/* =================================================================
   Finanzas Arcano · interfaz
   -----------------------------------------------------------------
   Todo sale de los tokens del sistema de diseño (app/ds/). Las clases
   de componente traducen los JSX del sistema con sus mismos valores;
   cada bloque dice de cuál sale. Lo que el sistema no tiene (la rejilla
   del tablero, las cifras, las filas de importe, la pastilla de estado)
   está marcado «propio de la app».

   Densidad: la app es transacción y consulta (niveles 0 y 1 del sistema):
   color, tipografía y el doble filete; sin patrón ni destellos.
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--tipo);
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto);
  background-color: var(--tinta);
  background-image: var(--aurora);
  background-attachment: fixed;
}
/* El grano del sistema: fijo, 5.5 % en soft-light, sobre todo el documento. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--grano);
  opacity: var(--grano-opacidad);
  mix-blend-mode: soft-light;
  z-index: 100;
}
:focus-visible { outline: var(--foco); outline-offset: 3px; }
a { color: var(--texto-enlace); }
a:hover { color: var(--texto-enlace-hover); }
h1, h2, h3, p { margin: 0; }
/* Lo oculto se oculta aunque su componente diga display: un .campo con hidden seguía visible. */
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }

/* ---- Cabecera (sitio/Cabecera.jsx), compacta: la app se usa todo el día ---- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--superficie-cabecera);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filete-interno);
}
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.6rem; }
.cabecera__logo { display: inline-flex; align-items: center; flex: none; }
.cabecera__logo img { height: clamp(2.6rem, 2rem + 2vw, 3.2rem); width: auto; display: block; }
/* Se desliza de lado SIEMPRE, no solo en el teléfono. Antes el overflow vivía en la consulta de 60rem, así que
   entre 960 px y el ancho donde todo cabe la lista desbordaba su caja sin recorte y se pintaba ENCIMA del nombre
   de quien entró (medido a 1000 px: la caja acababa en 755 y el contenido seguía hasta pasar los 779 de la
   persona). Con el menú en grupos ya cabe de sobra, pero el defecto volvería con la primera sección nueva. */
.cabecera__nav { margin-inline-start: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cabecera__nav::-webkit-scrollbar { display: none; }
.cabecera__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.35rem; }
.cabecera__nav li { flex: none; }
.cabecera__enlace {
  position: relative;
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding-block: 0.4rem;
  color: var(--texto);
}
.cabecera__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--degradado-subrayado);
  transition: right var(--transicion);
}
.cabecera__enlace:hover { color: var(--texto-fuerte); }
.cabecera__enlace:hover::after, .cabecera__enlace[aria-current="page"]::after { right: 0; }
.cabecera__enlace[aria-current="page"] { color: var(--oro); }
.cabecera__persona { display: flex; align-items: center; gap: 0.75rem; flex: none; font-size: 0.875rem; color: var(--texto-suave); }

/* El menú de adentro de un grupo. Se pega bajo la cabecera, que es sticky: por eso
   top va en --alto-barra-app, el alto que mide cabecera() y que cambia con el ancho. */
.subcabecera {
  position: sticky;
  top: var(--alto-barra-app, 0px);
  z-index: 49;
  background-color: var(--superficie-cabecera);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filete-interno);
}
.subcabecera__fila { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.subcabecera__fila::-webkit-scrollbar { display: none; }
.subcabecera__fila ul { list-style: none; margin: 0; padding: 0.35rem 0; display: flex; align-items: center; gap: 1.1rem; }
.subcabecera__fila li { flex: none; }
.subcabecera__enlace {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding-block: 0.3rem;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
}
.subcabecera__enlace:hover { color: var(--texto-fuerte); }
.subcabecera__enlace[aria-current="page"] { color: var(--oro); border-bottom-color: var(--oro); }

/* ---- Antetítulo (core/Antetitulo.jsx) ---- */
.antetitulo {
  font-size: var(--fs-antetitulo);
  font-weight: 700;
  letter-spacing: var(--ls-antetitulo);
  text-transform: uppercase;
  color: var(--cian);
  margin: 0 0 0.75rem;
}

/* ---- Títulos (core/TituloSeccion.jsx; el display solo en el H1 del acceso) ---- */
.titulo-seccion {
  font-family: var(--tipo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-titulo-seccion);
  letter-spacing: var(--ls-titulo-seccion);
  line-height: var(--lh-titulo);
  color: var(--texto-fuerte);
  text-wrap: balance;
}
.titulo-tarjeta { font-size: 1.0625rem; font-weight: var(--peso-titulo); line-height: var(--lh-titulo); color: var(--texto-fuerte); }
.titular {
  font-family: var(--tipo-display);
  font-weight: 700;
  font-size: var(--fs-titular-medio);
  line-height: var(--lh-titular);
  color: var(--texto-fuerte);
  text-wrap: balance;
}

/* ---- Marco (core/Marco.jsx): filete exterior y segundo filete a 7 px ---- */
.marco {
  position: relative;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--superficie);
}
.marco::before {
  content: "";
  position: absolute;
  inset: var(--filete-doble-inset);
  border: 1px solid var(--filete-interno);
  border-radius: calc(var(--radio) - var(--filete-doble-inset));
  pointer-events: none;
}

/* ---- Botón (core/Boton.jsx). El oro, una sola acción por vista. ---- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--tipo);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  padding: 1rem 1.6rem;
  min-height: var(--tap-min);
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton--principal { background-image: var(--degradado-oro); color: var(--texto-sobre-oro); box-shadow: var(--sombra-oro); }
.boton--principal:hover { transform: var(--elevacion-boton); box-shadow: var(--sombra-oro-hover); }
.boton--secundario { background-color: rgba(255,244,220,0.06); border-color: rgba(255,244,220,0.32); color: var(--pergamino); }
.boton--secundario:hover { transform: var(--elevacion-boton); border-color: var(--oro); color: var(--oro); background-color: rgba(255,201,74,0.08); }
.boton--fantasma { background: none; color: var(--cian); padding-inline: 0.5rem; }
.boton--fantasma:hover { transform: var(--elevacion-boton); color: var(--oro); }
.boton--compacto { padding: 0.75rem 1.15rem; font-size: 0.9375rem; }
.boton--chico { padding: 0.45rem 0.85rem; font-size: 0.8125rem; min-height: 0; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---- Aviso (core/Aviso.jsx) ---- */
.aviso {
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  padding: 1rem 1.25rem;
  color: var(--texto);
  font-size: var(--fs-nota);
}
.aviso--error { border-color: var(--brasa); }
.aviso--exito { border-color: rgba(54,214,148,0.45); }

/* ---- Nota (core/Nota.jsx) ---- */
.nota { font-size: var(--fs-nota); color: var(--texto-suave); max-width: var(--medida-lectura); }

/* ---- Icono (core/Icono.jsx): máscara pintada con el color del texto ---- */
.icono {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.icono--grande { width: 1.6em; height: 1.6em; vertical-align: -0.35em; }
.icono--buscar { --icono: url("../ds/assets/iconos/buscar.webp"); }
.icono--calendario { --icono: url("../ds/assets/iconos/calendario.webp"); }
.icono--cerrar { --icono: url("../ds/assets/iconos/cerrar.webp"); }
.icono--confirmado { --icono: url("../ds/assets/iconos/confirmado.webp"); }
.icono--correo { --icono: url("../ds/assets/iconos/correo.webp"); }
.icono--enlace-externo { --icono: url("../ds/assets/iconos/enlace-externo.webp"); }
.icono--etiqueta { --icono: url("../ds/assets/iconos/etiqueta.webp"); }
.icono--filtros { --icono: url("../ds/assets/iconos/filtros.webp"); }
.icono--flecha-abajo { --icono: url("../ds/assets/iconos/flecha-abajo.webp"); }
.icono--flecha-derecha { --icono: url("../ds/assets/iconos/flecha-derecha.webp"); }
.icono--flecha-izquierda { --icono: url("../ds/assets/iconos/flecha-izquierda.webp"); }
.icono--medidor { --icono: url("../ds/assets/iconos/medidor.webp"); }
.icono--navegacion { --icono: url("../ds/assets/iconos/navegacion.webp"); }
.icono--personas { --icono: url("../ds/assets/iconos/personas.webp"); }
.icono--reloj { --icono: url("../ds/assets/iconos/reloj.webp"); }

/* ---- Campo (sitio/Campo.jsx): sin ornamento, solo color y tipografía ---- */
.campo { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.campo label { font-size: 0.875rem; font-weight: 700; color: var(--texto); }
.campo input {
  width: 100%;
  font-family: var(--tipo);
  font-size: 1rem;
  color: var(--texto-fuerte);
  background: rgba(255,244,220,0.05);
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico);
  padding: 0.85rem 1rem;
  min-height: var(--tap-min);
  outline: none;
}
.campo input:focus { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(255,201,74,0.25); }
.campo__ayuda { font-size: 0.8125rem; color: var(--texto-suave); }

/* ---- Vacío (sitio/Vacio.jsx): dice qué no hay y qué lo llena ---- */
.vacio { padding: 0.25rem 0 0; color: var(--texto-suave); font-size: var(--fs-nota); }
.vacio strong { display: block; color: var(--texto-fuerte); font-weight: 800; margin-bottom: 0.25rem; }

/* ---- Propio de la app: página y tablero ---- */
.pagina { padding-block: clamp(1.5rem, 4vw, 2.75rem) var(--seccion-compacta); }
.pagina__encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--rejilla-gap); align-items: start; }
.tarjeta { padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 1rem; }
.tarjeta--ancha { grid-column: 1 / -1; }
.tarjeta__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.tarjeta__cabeza .antetitulo { margin: 0; }
.tarjeta__pie { margin-top: auto; padding-top: 0.25rem; }

/* Cifras: siempre tabulares, el signo menos de verdad, nunca solo color */
.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra--grande { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.4rem); font-weight: var(--peso-titulo); letter-spacing: -0.015em; line-height: 1.1; color: var(--texto-fuerte); }
.cifra--negativa { color: var(--brasa); }
.cifra-titulo { display: flex; flex-direction: column; gap: 0.2rem; }
.cifra-titulo__etiqueta { font-size: 0.8125rem; color: var(--texto-suave); }

/* Filas de importe: etiqueta a la izquierda, cifra a la derecha, filete interno */
.filas { list-style: none; margin: 0; padding: 0; }
.filas li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; border-top: 1px solid var(--filete-interno); font-size: 0.9375rem; }
.filas li:first-child { border-top: none; }
.filas__etiqueta { display: flex; flex-direction: column; min-width: 0; }
.filas__nombre { color: var(--texto); overflow-wrap: anywhere; }
.filas__detalle { font-size: 0.8125rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.filas__cifra { color: var(--texto-fuerte); font-weight: var(--peso-medio); }
.filas li.filas--total { border-top: 1px solid var(--filete); font-weight: 800; }
.filas li.filas--total .filas__cifra { font-weight: 800; }

/* Un pago del detalle: su importe y con qué cancelarlo. Envuelve para que a
   375 px el botón caiga bajo la cifra en vez de empujarla fuera. */
.pago-fila { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.5rem; }

/* La aclaración de «sale de caja»: por qué no coincide con el neto. */
.nomina__aclara { color: var(--texto-suave); }

/* El pie de la tarjeta de un colaborador: quitar de la semana y su recibo. */
.nomina__pie-tarjeta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.nomina__pie-tarjeta:empty { display: none; }

/* ── El recibo de nómina ──
   Dos copias por hoja (empresa y colaborador) con su línea de corte, como el
   PDF que Cuentas venía entregando. Solo existe al imprimir: en pantalla el
   contenedor está oculto y nadie lo ve. Va en blanco y negro porque se
   imprime, y un fondo oscuro se lleva el tóner y se lee peor en papel. */
.recibo-impresion { display: none; }

@media print {
  /* Carta, con el margen en la hoja y no en el contenido: lo que se mide
     contra los 980 px utiles es el recibo, no el relleno. */
  @page { size: letter; margin: 1cm; }
  /* Solo las hojas: el resto de la app no se imprime. */
  body.imprimiendo > *:not(.recibo-impresion) { display: none !important; }
  body.imprimiendo { background: #fff; }
  .recibo-impresion { display: block; }

  .recibo-hoja { page-break-after: always; break-after: page; }
  .recibo-hoja:last-child { page-break-after: auto; break-after: auto; }
  .recibo { color: #000; background: #fff; font-size: 9.5pt; break-inside: avoid; }

  .recibo__cabeza { margin-bottom: 0.35rem; }
  .recibo__marca { display: flex; align-items: center; gap: 0.5rem; }
  .recibo__logo { height: 1.5rem; width: auto; filter: grayscale(1); }
  .recibo__negocio { font-weight: 800; font-size: 12pt; letter-spacing: 0.02em; }
  .recibo__copia { margin-left: auto; border: 1px solid #999; border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 8pt; color: #444; }
  .recibo__periodo { margin: 0.25rem 0 0; font-size: 8.5pt; color: #444; }
  .recibo__quien { margin: 0.35rem 0 0; }
  .recibo__canal { margin: 0; font-size: 8.5pt; color: #444; }

  .recibo__cuerpo, .recibo__caja { margin-top: 0.4rem; }
  .recibo__caja { border: 1px solid #ccc; border-radius: 6px; padding: 0.2rem 0.7rem; }
  .recibo__fila { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.14rem 0; border-top: 1px solid #ddd; }
  .recibo__fila:first-child { border-top: none; }
  .recibo__importe { white-space: nowrap; }
  .recibo__fila--fuerte { font-weight: 700; }
  .recibo__fila--total { font-weight: 800; border-top: 1.5px solid #000; font-size: 10.5pt; }

  .recibo__firma { display: flex; flex-direction: column; gap: 0.1rem; width: 60%; margin-top: 0.9rem; font-size: 7.5pt; color: #444; }
  .recibo__raya { border-bottom: 1px solid #000; height: 0.95rem; }

  .recibo__corte { margin: 0.6rem 0; border-top: 1px dashed #999; text-align: center; }
  .recibo__corte span { position: relative; top: -0.6rem; background: #fff; padding: 0 0.6rem; font-size: 8pt; color: #777; }
}

/* Pastilla de estado: el texto siempre dice el estado; el color solo lo acompaña */
.pastilla { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: var(--ls-etiqueta); padding: 0.2rem 0.6rem; border-radius: var(--radio-pastilla); border: 1px solid var(--filete); color: var(--texto); white-space: nowrap; }
.pastilla--bien { border-color: rgba(54,214,148,0.55); color: var(--esmeralda); }
.pastilla--alerta { border-color: rgba(255,101,93,0.6); color: var(--brasa); }
.pastilla--aviso { border-color: rgba(255,201,74,0.5); color: var(--oro); }

.cargando { color: var(--texto-suave); padding-block: var(--seccion-compacta); text-align: center; }
.vista-previa { margin-bottom: 1.25rem; }

/* ---- Acceso: transacción (nivel 0), el titular display como firma ---- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: var(--canal); }
.acceso__caja { width: min(100%, 26rem); padding: clamp(1.5rem, 5vw, 2.5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.acceso__logo { height: 4.5rem; width: auto; align-self: center; }
.acceso__caja .titular { text-align: center; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); }
.acceso__caja .boton { width: 100%; }

/* ---- Campo (sitio/Campo.jsx): el select y el archivo, con el mismo control que el input ---- */
.campo select, .filtros input, .filtros select {
  width: 100%;
  font-family: var(--tipo);
  font-size: 1rem;
  color: var(--texto-fuerte);
  background: rgba(255,244,220,0.05);
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico);
  padding: 0.85rem 1rem;
  min-height: var(--tap-min);
  outline: none;
}
.campo select:focus, .filtros input:focus, .filtros select:focus { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(255,201,74,0.25); }
.campo input, .campo select, .filtros input, .filtros select { color-scheme: dark; }
.campo input[type="file"] { padding: 0.7rem 0.9rem; cursor: pointer; }
.campo input:disabled { opacity: 0.6; }
select option { background: var(--superficie-solida); color: var(--texto-fuerte); }

/* ---- Propio de la app: casilla del tamaño de un dedo ---- */
.casilla { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap-min); cursor: pointer; font-size: 0.9375rem; }
.casilla input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--oro); cursor: pointer; }

/* ---- Propio de la app: documentos ---- */
.pagina__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Filtros (sitio/Filtros.jsx): vistas, búsqueda y clase, con el conteo en vivo */
.filtros { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.25rem; }
.filtros__campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.9rem; }
.filtros__estado { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.vistas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vistas__opcion {
  font-family: var(--tipo);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--texto);
  background: rgba(255,244,220,0.04);
  border: 1px solid var(--filete);
  border-radius: var(--radio-pastilla);
  padding: 0.55rem 1rem;
  min-height: 2.5rem;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion), background-color var(--transicion);
}
.vistas__opcion:hover { border-color: var(--oro); color: var(--oro); }
.vistas__opcion[aria-pressed="true"] { border-color: var(--oro); color: var(--oro); background: rgba(255,201,74,0.10); }

/* La lista: en escritorio, columnas; a lo angosto, una ficha por documento */
.docs { display: flex; flex-direction: column; }
.docs__cabeza, .docs__fila {
  display: grid;
  grid-template-columns: 2.25rem minmax(14rem, 2.6fr) minmax(7rem, 1.1fr) 8.5rem 7.75rem 7.75rem 9rem;
  align-items: center;
  column-gap: 0.9rem;
}
.docs__cabeza { padding-bottom: 0.4rem; border-bottom: 1px solid var(--filete); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--texto-suave); }
.docs__fila { padding-block: 0.45rem; border-bottom: 1px solid var(--filete-interno); font-size: 0.9375rem; transition: background-color var(--transicion); }
.docs__fila:hover { background: rgba(255,244,220,0.03); }
.docs__fila--elegida { background: rgba(255,201,74,0.06); }
.docs__sel { display: flex; align-items: center; }
.docs__abrir {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0;
  font: inherit; color: inherit; text-align: start; background: none; border: 0; padding: 0.35rem 0; cursor: pointer;
}
.docs__abrir:hover .docs__tercero { color: var(--oro); }
.docs__tercero { font-weight: 700; color: var(--texto-fuerte); overflow-wrap: anywhere; }
.docs__concepto { font-size: 0.8125rem; color: var(--texto-suave); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs__fecha { font-size: 0.8125rem; color: var(--texto-suave); }
.docs__categoria, .docs__cuando { font-size: 0.875rem; color: var(--texto); overflow-wrap: anywhere; }
.docs__num { text-align: end; justify-self: end; }
.docs__saldo .cifra { font-weight: 700; color: var(--texto-fuerte); }
.docs__etiqueta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.docs__mas { display: flex; justify-content: center; padding-block: 1.25rem; }
.docs__mas:empty { padding: 0; }

/* La barra de lo seleccionado, pegada abajo */
.lote {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: 1rem;
  background-color: var(--superficie-cabecera);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--filete);
  border-radius: var(--radio-chico) var(--radio-chico) 0 0;
}
.lote[hidden] { display: none; }
.lote__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding-block: 0.75rem; }
.lote__cuenta { font-size: 0.9375rem; }
.lote__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Diálogo (propio de la app): el Marco sobre el velo, sólido para leer cifras */
.dialogo {
  width: min(100% - 2rem, 34rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--texto);
  background: var(--superficie-solida);
  box-shadow: var(--sombra-panel);
}
.dialogo--ancho { width: min(100% - 2rem, 44rem); }
/* Lo que se desplaza es el cuerpo, no el diálogo: el filete interior del marco (::before) mide lo que mide el
   diálogo, y con el diálogo entero desplazándose se iba con el contenido y quedaba cortado a media pantalla (un
   formulario largo a 375 px). Así la cabeza y los botones también quedan a la vista. */
.dialogo[open] { display: flex; flex-direction: column; overflow: hidden; }
.dialogo[open] > .dialogo__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dialogo::backdrop { background: rgba(7,5,26,0.72); backdrop-filter: blur(3px); }
.dialogo__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem) 0.75rem; }
.dialogo__cabeza .antetitulo { margin-bottom: 0.35rem; }
.dialogo__cerrar { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); margin: -0.6rem -0.6rem 0 0; flex: none; color: var(--texto-suave); background: none; border: 0; border-radius: var(--radio-pastilla); cursor: pointer; }
.dialogo__cerrar:hover { color: var(--oro); }
.dialogo__cuerpo { display: flex; flex-direction: column; gap: 1rem; padding: 0 clamp(1.25rem, 4vw, 1.75rem) 1.25rem; }
.dialogo__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; padding: 1rem clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem); border-top: 1px solid var(--filete-interno); }
.dialogo__form .campo { margin-bottom: 0.85rem; }
.dialogo__par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
.dialogo__error:empty { display: none; }
.dialogo__subtitulo { font-size: 0.875rem; font-weight: 800; color: var(--texto-fuerte); margin-bottom: 0.25rem; }
.dialogo__archivos { font-size: 0.875rem; }

/* Los egresos que podrían ser el pago */
.candidatos { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.candidatos legend { font-size: 0.875rem; font-weight: 700; color: var(--texto); padding: 0; margin-bottom: 0.35rem; }
.candidato { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.85rem; border: 1px solid var(--filete-interno); border-radius: var(--radio-chico); cursor: pointer; }
.candidato:has(input:checked) { border-color: var(--oro); background: rgba(255,201,74,0.06); }
.candidato input { margin: 0.2rem 0 0; accent-color: var(--oro); flex: none; width: 1.1rem; height: 1.1rem; }
.candidato__titulo { display: block; color: var(--texto-fuerte); font-weight: 600; overflow-wrap: anywhere; }
.candidato__detalle { display: block; font-size: 0.8125rem; color: var(--texto-suave); }
.candidato__fila { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Propio de la app: nómina ---- */
.semanas { display: flex; flex-direction: column; }
.semanas__cabeza, .semanas__fila { display: grid; grid-template-columns: minmax(12rem, 2fr) 8rem 8rem 8rem 10rem; align-items: center; column-gap: 0.9rem; }
.semanas__cabeza { padding-bottom: 0.4rem; border-bottom: 1px solid var(--filete); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--texto-suave); }
.semanas__fila { padding-block: 0.7rem; border-bottom: 1px solid var(--filete-interno); color: var(--texto); text-decoration: none; transition: background-color var(--transicion); }
.semanas__fila:hover { background: rgba(255,244,220,0.03); color: var(--texto); }
.semanas__fila:hover strong { color: var(--oro); }
.semanas__nombre { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.semanas__nombre strong { color: var(--texto-fuerte); }

.nomina__volver { margin-bottom: 0.75rem; font-size: 0.875rem; }
.nomina__fechas { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--texto-suave); }
.nomina__avisos:empty { display: none; }
.nomina__avisos { margin-bottom: 1rem; }
.nomina__cuerpo { display: flex; flex-direction: column; gap: var(--rejilla-gap); }
.nomina__titulo { font-size: 1.125rem; font-weight: var(--peso-titulo); color: var(--texto-fuerte); margin-top: 0.5rem; }
.nomina__num, .nomina__campo {
  width: 100%;
  font-family: var(--tipo);
  font-size: 0.9375rem;
  color: var(--texto-fuerte);
  background: rgba(255,244,220,0.05);
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico);
  padding: 0.55rem 0.6rem;
  min-height: 2.6rem;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.nomina__num { text-align: end; }
.nomina__num:focus, .nomina__campo:focus { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(255,201,74,0.25); }
.nomina__num:disabled, .nomina__campo:disabled { opacity: 0.6; }
.nomina__num--corto { width: 5rem; }

/* La tira de los siete días: martes a domingo se capturan; el lunes es descanso y se calcula */
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.dias__dia { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.dias__dia .casilla { min-height: 2rem; font-size: 0.8125rem; color: var(--texto-suave); }
.dias__etiqueta { font-size: 0.75rem; font-weight: 700; color: var(--texto-suave); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dias__dia--descanso .dias__etiqueta { color: var(--cian); }

.nomina__cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.nomina__cabeza .titulo-tarjeta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nomina__neto { display: flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; }
.nomina__controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.875rem; }
.nomina__controles .nomina__campo { flex: 1 1 12rem; max-width: 18rem; min-height: 2.6rem; }
.nomina__control { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.nomina__descuento { color: var(--brasa); font-size: 0.8125rem; }
.nomina__reparto { font-size: 0.875rem; color: var(--texto); }
.nomina__reparto strong { color: var(--texto-fuerte); font-variant-numeric: tabular-nums; }
.nomina__pago { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.nomina__barra {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: var(--rejilla-gap);
  background-color: var(--superficie-cabecera);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--filete);
}
.nomina__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; padding-block: 0.75rem; }
.nomina__sucio { margin-inline-end: auto; font-size: 0.875rem; color: var(--oro); }
.nomina__sucio:empty { display: none; }

/* ---- Propio de la app: movimientos ---- */
.movs__filtros { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.movs .movs__fila { grid-template-columns: 2.25rem minmax(14rem, 2fr) minmax(8rem, 1fr) 8.5rem minmax(0, auto); }
.movs__fila .docs__categoria { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.movs__fecha { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; font-weight: 700; color: var(--texto-suave); }
.movs__filtros { align-items: end; }

/* ---- Propio de la app: cortes y terminal ---- */
.cortes .cortes__fila { grid-template-columns: minmax(0, 1fr) 8.5rem 8.5rem minmax(9rem, auto) minmax(0, auto); padding-block: 0.6rem; }
.corte__denominaciones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.corte__denominacion { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; font-weight: 700; color: var(--texto-suave); }
.corte__total { font-size: 1rem; }
.corte__total strong { color: var(--texto-fuerte); font-variant-numeric: tabular-nums; }
.terminal__filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }
.control__filtros { grid-template-columns: repeat(2, minmax(0, 12rem)); margin-bottom: 1rem; }
.terminal__grupos .terminal__grupo { grid-template-columns: minmax(0, 1fr) 8.5rem minmax(9rem, auto) minmax(0, auto); padding-block: 0.6rem; }
.terminal__manual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rejilla-gap); }
.terminal__lista { display: flex; flex-direction: column; gap: 0.4rem; max-height: 20rem; overflow: auto; }
.terminal__seleccion { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; max-width: 32rem; }

/* ---- Propio de la app: banco ---- */
.lineas .lineas__fila { grid-template-columns: minmax(0, 1fr) 8.5rem minmax(9rem, auto) minmax(0, auto); column-gap: 1rem; padding-block: 0.6rem; }
.lineas__dato { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lineas__dato .docs__tercero { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.lineas__estado { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-start; }
.lineas__acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.previa { display: flex; flex-direction: column; max-height: 22rem; overflow: auto; border-top: 1px solid var(--filete); }
.previa__fila { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem minmax(12rem, 16rem); align-items: center; column-gap: 0.75rem; padding-block: 0.45rem; border-bottom: 1px solid var(--filete-interno); font-size: 0.875rem; }
.previa__accion { margin: 0; }
/* ---- Cuentas: el catálogo de cajas y bancos ---- */
.cuentas__fila { grid-template-columns: minmax(0, 1fr) 7rem 9rem minmax(12rem, auto); }
.cuentas__fila--inactiva { opacity: 0.6; }
/* Una de crédito siempre admite negativo: la casilla queda fija y tiene que verse fija. */
.casilla--fija { opacity: 0.65; cursor: default; }
@media (max-width: 60rem) {
  .cuentas .cuentas__fila {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "dato dato" "estado saldo" "acciones acciones";
    row-gap: 0.35rem;
    padding-block: 0.65rem;
  }
  .cuentas .cuentas__fila .lineas__dato { grid-area: dato; }
  .cuentas .cuentas__fila .docs__estado { grid-area: estado; justify-self: start; }
  .cuentas .cuentas__fila .docs__num { grid-area: saldo; justify-self: end; }
  .cuentas .cuentas__fila .lineas__acciones { grid-area: acciones; display: flex; gap: 0.5rem; }
  .cuentas .cuentas__fila .lineas__acciones .boton { flex: 1 1 auto; }
}

/* ---- Auditor: un hallazgo por tarjeta, con lo que encontró y qué revisar ---- */
.auditor { display: flex; flex-direction: column; gap: 0.9rem; }
.auditor__filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 11rem)); gap: 0.4rem 0.9rem; align-items: end; }
.auditor__filtros .campo { margin: 0; }
.auditor__tarjeta { padding: 0.95rem 1.1rem; }
.auditor__tarjeta--cerrado { opacity: 0.68; }
.auditor__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; }
.auditor__titulo { min-width: 0; }
.auditor__titulo .titulo-tarjeta { margin: 0; }
.auditor__pastillas { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: none; }
.auditor__meta { margin: 0.2rem 0 0; font-size: 0.8125rem; color: var(--texto-suave); }
.auditor__detalle { margin: 0.6rem 0 0; }
.auditor__revisar { margin: 0.6rem 0 0; font-size: 0.9375rem; }
.auditor__nota { margin: 0.6rem 0 0; font-size: 0.9375rem; color: var(--texto-suave); }
.auditor__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
@media (max-width: 60rem) {
  .auditor__filtros { grid-template-columns: 1fr 1fr; }
  .auditor__cabeza { flex-direction: column; gap: 0.5rem; }
  .auditor__acciones .boton { flex: 1 1 auto; }
}

/* ---- Reportes: solo lectura. Las cifras grandes arriba, las tarjetas debajo ---- */
.reportes__rango { display: grid; grid-template-columns: repeat(2, minmax(0, 11rem)); gap: 0.4rem 0.9rem; align-items: end; }
.reportes__rango .campo { margin: 0; }
.reportes__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; margin-bottom: 1.1rem; }
.reportes__kpi { padding: 0.9rem 1.1rem; }
.reportes__kpi-etiqueta { margin: 0 0 0.25rem; font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--texto-suave); }
.reportes__tarjeta { padding: 1rem 1.15rem; margin-bottom: 1.1rem; }
.reportes__tarjeta .titulo-tarjeta { margin: 0 0 0.6rem; }
.reportes__pie { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--texto-suave); }
.reportes__fila { grid-template-columns: minmax(0, 1fr) 8rem 9rem; }
.reportes__caja { grid-template-columns: minmax(0, 1fr) 8rem 8rem 9rem; }
.reportes__entrada { color: var(--texto-suave); }
.reportes__salida { color: var(--texto-suave); }
.reportes__vacio { color: var(--texto-suave); }
/* La tabla de gasto por mes se desliza de lado: lo que se quiere ahí es comparar columnas, no apilarlas. */
.reportes__tabla-marco { overflow-x: auto; }
.reportes__tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.reportes__tabla th, .reportes__tabla td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--filete-interno); text-align: left; white-space: nowrap; }
.reportes__tabla thead th { font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--texto-suave); border-bottom-color: var(--filete); }
.reportes__tabla tbody th { font-weight: 600; }
.reportes__tabla tbody th .docs__fecha { display: block; font-size: 0.75rem; color: var(--texto-suave); }
.reportes__tabla .docs__num { text-align: right; }
@media (max-width: 60rem) {
  .reportes__rango { grid-template-columns: 1fr 1fr; }
  .reportes__lista .reportes__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dato dato" "estado importe"; row-gap: 0.3rem; padding-block: 0.6rem; }
  .reportes__lista .reportes__fila .lineas__dato { grid-area: dato; }
  .reportes__lista .reportes__fila .docs__estado { grid-area: estado; justify-self: start; }
  .reportes__lista .reportes__fila .docs__num { grid-area: importe; justify-self: end; }
  .reportes__lista .reportes__caja { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; padding-block: 0.6rem; }
  .reportes__lista .reportes__caja .lineas__dato { grid-column: 1 / -1; }
  .reportes__lista .reportes__caja .docs__num { justify-self: end; }
}

/* ---- Incidencias: persona y qué pasó · severidad · puntos · cancelar ---- */
.incidencias__filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.9rem; align-items: end; }
.incidencias__filtros .campo { margin: 0; }
.incidencias__fila { grid-template-columns: minmax(0, 1fr) 9rem 5rem auto; }
.incidencias__fila--cancelada .docs__tercero { text-decoration: line-through; text-decoration-color: var(--texto-suave); }
.incidencias__fila--cancelada { opacity: 0.72; }
/* El motivo de la cancelación en su propio renglón: es el rastro de quién movió dinero y por qué. */
.incidencias__motivo { display: block; margin-top: 0.2rem; color: var(--brasa); }
@media (max-width: 60rem) {
  .incidencias__filtros { grid-template-columns: 1fr 1fr; }
  .incidencias__filtros .campo:first-child { grid-column: 1 / -1; }
  /* Con áreas nombradas, no auto-colocadas: la regla general de .docs__fila manda «estado» a su propia área y, sin
     estas, las cuatro celdas caían en desorden —los puntos antes del nombre y «Cancelar» encima de la descripción—.
     Va con DOS clases a propósito: .docs__fila de abajo tiene la misma especificidad y, por estar después en el
     archivo, ganaba. Medido: con una sola clase los renglones seguían encimados a 375 px. */
  .incidencias .incidencias__fila {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "dato dato dato" "sev pts acc";
    row-gap: 0.35rem;
    padding-block: 0.65rem;
  }
  .incidencias__fila .lineas__dato { grid-area: dato; }
  .incidencias__fila .docs__estado { grid-area: sev; justify-self: start; }
  .incidencias__fila .docs__num { grid-area: pts; justify-self: start; color: var(--texto-suave); }
  .incidencias__fila .lineas__acciones { grid-area: acc; justify-self: end; }
}

/* Los movimientos del libro que ninguna línea explica: la diferencia contra el banco, con nombre y apellido. */
.previa__sueltos { margin-top: 0.5rem; padding: 0.6rem 0.85rem; border: 1px solid var(--filete-interno); border-left: 3px solid var(--brasa); border-radius: var(--radio-chico); }
.previa__sueltos > :first-child { margin-top: 0; }
.previa__accion select { padding: 0.5rem 0.7rem; min-height: 2.5rem; font-size: 0.875rem; }
.historial { margin-top: var(--rejilla-gap); }
.historial summary { cursor: pointer; font-weight: 700; color: var(--texto-fuerte); padding-block: 0.5rem; }
.historial[open] summary { margin-bottom: 0.5rem; }

/* ---- Propio de la app: catálogos ---- */
.cat__barra { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.9rem; margin-bottom: 1rem; }
.cat__barra .cat__filtros { grid-template-columns: minmax(0, 22rem) auto; align-items: end; flex: 1 1 20rem; }
.cat__filtros .campo { margin-bottom: 0; }
.cat .cat__fila { grid-template-columns: minmax(0, 1fr) minmax(7rem, auto) minmax(0, auto) minmax(0, auto); padding-block: 0.55rem; }
.cat__fila .docs__fecha { overflow-wrap: anywhere; }
.config__valor { font-weight: 700; color: var(--texto-fuerte); overflow-wrap: anywhere; text-align: end; }
.config__json { width: 100%; min-height: 6rem; padding: 0.7rem 0.9rem; font: inherit; font-family: ui-monospace, monospace; font-size: 0.875rem; color: var(--texto-fuerte); background: rgba(255,244,220,0.05); border: 1px solid var(--filete); border-radius: var(--radio-chico); outline: none; color-scheme: dark; }
.config__json:focus { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(255,201,74,0.25); }
.permisos__clave { display: block; font-size: 0.75rem; color: var(--texto-suave); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.permisos__grupo { display: flex; flex-direction: column; gap: 0.4rem; }
.permisos__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, auto); align-items: center; gap: 0.75rem; font-size: 0.875rem; padding-block: 0.25rem; border-bottom: 1px solid var(--filete-interno); }
.permisos__fila select { padding: 0.45rem 0.6rem; min-height: 2.5rem; font: inherit; font-size: 0.8125rem; color: var(--texto-fuerte); background: var(--superficie-solida); border: 1px solid var(--filete); border-radius: var(--radio-chico); color-scheme: dark; }
@media (max-width: 40rem) { .permisos__fila { grid-template-columns: 1fr; gap: 0.35rem; } }

@media (max-width: 60rem) {
  .cat .cat__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dato estado" "num num" "acciones acciones"; row-gap: 0.35rem; }
  .cat__fila .lineas__dato { grid-area: dato; }
  .cat__fila > .docs__num { grid-area: num; justify-self: start; text-align: start; }
  .cat__fila > .docs__num:empty { display: none; }
  .cat__fila .docs__estado { grid-area: estado; }
  .cat__fila .lineas__acciones { grid-area: acciones; justify-content: flex-start; }
  .cat__fila .lineas__acciones:empty { display: none; }
  .cat__fila .docs__etiqueta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.75rem; color: var(--texto-suave); }
  .cat__barra .cat__filtros { grid-template-columns: 1fr; }
}

@media (max-width: 60rem) {
  .cortes .cortes__fila, .terminal__grupos .terminal__grupo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dato estado" "libro contado" "acciones acciones"; row-gap: 0.35rem; }
  .terminal__grupos .terminal__grupo { grid-template-areas: "dato libro" "estado estado" "acciones acciones"; }
  .cortes__fila .lineas__dato, .terminal__grupo .lineas__dato { grid-area: dato; }
  .cortes__fila > .docs__num:nth-of-type(2), .terminal__grupo > .docs__num { grid-area: libro; justify-self: start; }
  .cortes__fila > .docs__num:nth-of-type(3) { grid-area: contado; }
  .cortes__fila .docs__estado, .terminal__grupo .docs__estado { grid-area: estado; }
  .cortes__fila .lineas__acciones, .terminal__grupo .lineas__acciones { grid-area: acciones; justify-content: flex-start; }
  .cortes__fila .docs__etiqueta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.75rem; color: var(--texto-suave); }
  .terminal__filtros { grid-template-columns: 1fr 1fr; }
  .terminal__manual { grid-template-columns: 1fr; }
  .corte__denominaciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .movs__filtros { grid-template-columns: 1fr 1fr; }
  .movs__filtros .filtros__buscar { grid-column: 1 / -1; }
  .movs .movs__fila { grid-template-columns: 2.25rem minmax(0, 1fr) auto; grid-template-areas: "sel doc importe" "sel cat cat" "sel acciones acciones"; row-gap: 0.35rem; }
  .movs__fila > .docs__num { grid-area: importe; align-self: start; padding-top: 0.35rem; }
  .movs__fila .lineas__acciones { grid-area: acciones; justify-content: flex-start; }
  .lineas .lineas__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dato importe" "estado estado" "acciones acciones"; row-gap: 0.4rem; }
  .lineas__dato { grid-area: dato; }
  .lineas__fila > .docs__num { grid-area: importe; }
  .lineas__estado { grid-area: estado; }
  .lineas__acciones { grid-area: acciones; justify-content: flex-start; }
  .previa__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dato importe" "accion accion"; row-gap: 0.3rem; }
  .previa__fila .lineas__dato { grid-area: dato; }
  .previa__fila > .docs__num { grid-area: importe; }
  .previa__accion { grid-area: accion; }
}

@media (max-width: 60rem) {
  .semanas__cabeza { display: none; }
  .semanas__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre estado" "nombre neto"; row-gap: 0.25rem; }
  .semanas__nombre { grid-area: nombre; }
  .semanas__fila .docs__estado { grid-area: estado; justify-self: end; }
  .semanas__fila > .docs__num:not(.semanas__extra) { grid-area: neto; }
  .semanas__extra { display: none; }
  .semanas__fila .docs__etiqueta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.75rem; color: var(--texto-suave); }
}
@media (max-width: 40rem) {
  /* En el teléfono la tira se dobla: martes a viernes arriba, sábado a lunes abajo */
  .dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* En el teléfono la barra no se pega abajo: con cuatro botones taparía un cuarto de la pantalla */
  .nomina__barra { position: static; border-radius: var(--radio-chico); }
  .nomina__acciones { justify-content: stretch; }
  .nomina__acciones .boton { flex: 1 1 calc(50% - 0.6rem); padding-inline: 0.75rem; }
  .nomina__sucio { flex-basis: 100%; }
}

@media (max-width: 60rem) {
  /* A lo angosto, cada documento es una ficha: quién y qué arriba, el saldo y el estado abajo */
  .docs__cabeza { display: flex; justify-content: space-between; }
  .docs__cabeza > span:not(.docs__sel) { display: none; }
  .docs__cabeza .docs__sel .casilla span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
  .docs__fila {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    grid-template-areas: "sel doc doc" "sel cat estado" "sel cuando saldo";
    row-gap: 0.15rem;
    padding-block: 0.65rem;
  }
  .docs__sel { grid-area: sel; align-self: start; }
  .docs__abrir { grid-area: doc; }
  .docs__categoria { grid-area: cat; font-size: 0.8125rem; }
  .docs__cuando { grid-area: cuando; font-size: 0.8125rem; color: var(--texto-suave); }
  .docs__total { display: none; }
  .docs__saldo { grid-area: saldo; }
  .docs__estado { grid-area: estado; justify-self: end; }
  .docs__etiqueta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.75rem; color: var(--texto-suave); }
  .docs__concepto { white-space: normal; }
}

@media (max-width: 40rem) {
  .filtros__campos { grid-template-columns: 1fr; }
  .movs__filtros, .terminal__filtros, .control__filtros { grid-template-columns: 1fr 1fr; }
  .dialogo__par { grid-template-columns: 1fr; }
  .pagina__acciones { width: 100%; }
  .pagina__acciones .boton { flex: 1 1 auto; }
  .cabecera__fila { gap: 0.75rem; }
  .cabecera__nav ul { gap: 1rem; }
  /* Con más secciones de las que caben, el menú se desliza de lado (sin barra visible); la activa se trae a la vista */
  .cabecera__nav { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent); padding-inline: 0.75rem; }
  .cabecera__nav::-webkit-scrollbar { display: none; }
  .cabecera__persona span { display: none; }
  /* El submenú, igual: se desliza de lado y la activa se trae a la vista */
  .subcabecera__fila { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent); }
  .subcabecera__fila::-webkit-scrollbar { display: none; }
  .subcabecera__fila ul { gap: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Mapeo de compras ---- */
.filtros .casilla input { padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; }
.mapeo__intro { margin-bottom: 1.25rem; }
.mapeo__filtros > .casilla { white-space: nowrap; }
.mapeo__filtros { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; }
.mapeo .mapeo__fila { grid-template-columns: 2.25rem minmax(14rem, 2.4fr) minmax(9rem, 1.4fr) minmax(9rem, 1.1fr) 8.5rem; }
.mapeo__fila .docs__categoria { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.mapeo__fila .docs__cuando { font-size: 0.8125rem; color: var(--texto-suave); }
.mapeo__renglones { display: flex; flex-direction: column; gap: 0.75rem; }
.mapeo__renglon { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; align-items: end; gap: 0.4rem 0.9rem; padding: 0.75rem 0.85rem; border: 1px solid var(--filete-interno); border-radius: var(--radio-chico); }
.mapeo__renglon > :not(.mapeo__concepto):not(.mapeo__factor) { grid-column: 1 / -1; }
.mapeo__renglon--dudoso { border-color: rgba(255,101,93,0.6); }
.mapeo__concepto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; align-self: start; }
.mapeo__concepto strong { color: var(--texto-fuerte); overflow-wrap: anywhere; }
.mapeo__concepto span { font-size: 0.8125rem; color: var(--texto-suave); }
.dialogo__form .mapeo__factor { margin: 0; }
.mapeo__resultado { font-size: 0.875rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.mapeo__muestra { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; color: var(--texto); display: flex; flex-direction: column; gap: 0.2rem; }
@media (max-width: 60rem) {
  .mapeo__filtros { grid-template-columns: 1fr 1fr; }
  .mapeo__filtros .filtros__buscar, .mapeo__filtros > .casilla { grid-column: 1 / -1; }
  .mapeo .mapeo__fila { grid-template-columns: 2.25rem minmax(0, 1fr) auto; grid-template-areas: "sel doc importe" "sel cat cat" "sel cuando cuando"; row-gap: 0.2rem; }
  .mapeo__fila > .docs__num { grid-area: importe; align-self: start; padding-top: 0.35rem; }
  .mapeo__fila .docs__categoria:empty { display: none; }
}
@media (max-width: 40rem) {
  .mapeo__filtros { grid-template-columns: 1fr; }
  .mapeo__renglon { grid-template-columns: 1fr; }
}

/* ---- Deudas ---- */
.deudas .deudas__fila { grid-template-columns: minmax(14rem, 2.4fr) minmax(9rem, 1.2fr) 7rem 8.5rem minmax(0, auto); }

/* Planeación: el concepto necesita ancho —son frases, no claves— y la etapa
   es una pastilla corta. Sin rejilla propia heredaba la de documentos y el
   concepto se partía letra por letra. */
.planeacion .planeacion__fila { grid-template-columns: minmax(16rem, 2.6fr) 9rem 7.5rem 9rem minmax(0, auto); }
@media (max-width: 60rem) {
  .planeacion .planeacion__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "doc monto" "etapa cuando" "acciones acciones"; row-gap: 0.2rem; }
  .planeacion__fila .docs__abrir { grid-area: doc; }
  .planeacion__fila .docs__categoria { grid-area: etapa; }
  .planeacion__fila .docs__cuando { grid-area: cuando; justify-self: end; }
  .planeacion__fila .docs__saldo { grid-area: monto; align-self: start; padding-top: 0.35rem; }
  .planeacion__fila .lineas__acciones { grid-area: acciones; justify-content: flex-start; }
  .planeacion__fila .lineas__acciones:empty { display: none; }
  .planeacion__fila .docs__etiqueta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.75rem; color: var(--texto-suave); }
}
.deudas__fila .docs__categoria { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; }
.deudas__calculo { font-size: 0.9375rem; color: var(--texto-fuerte); font-variant-numeric: tabular-nums; padding: 0.6rem 0.85rem; border: 1px solid var(--filete-interno); border-radius: var(--radio-chico); }
@media (max-width: 60rem) {
  .deudas .deudas__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "doc saldo" "cat cuando" "acciones acciones"; row-gap: 0.2rem; }
  .deudas__fila .docs__abrir { grid-area: doc; }
  .deudas__fila .docs__categoria { grid-area: cat; }
  .deudas__fila .docs__cuando { grid-area: cuando; justify-self: end; }
  .deudas__fila .docs__saldo { grid-area: saldo; align-self: start; padding-top: 0.35rem; }
  .deudas__fila .lineas__acciones { grid-area: acciones; justify-content: flex-start; }
  .deudas__fila .lineas__acciones:empty { display: none; }
  .deudas__fila .docs__etiqueta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.75rem; color: var(--texto-suave); }
}

/* ---- Indicador de compras al inventario (Mapeo) ---- */
.indicador-compras { padding: 1rem 1.25rem; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.indicador-compras[hidden] { display: none; }
.indicador-compras__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.25rem; }
.indicador-compras__cifras p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin: 0; }
.indicador-compras__etiqueta { flex-basis: 100%; font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--texto-suave); }
.indicador-compras .nota a { color: var(--oro); }
@media (max-width: 40rem) { .indicador-compras__cifras { grid-template-columns: 1fr; } }

/* ---- El buzón de facturación (Facturas y gastos): cuándo se revisó, qué trajo y el botón para revisarlo ---- */
.buzon { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.25rem; padding: 0.95rem 1.25rem; margin-bottom: 1.25rem; }
.buzon[aria-busy="true"]:empty { display: none; }
.buzon__texto { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 24rem; min-width: 0; }
.buzon__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; margin: 0; font-size: 0.9375rem; color: var(--texto-suave); }
.buzon__cabeza strong { color: var(--texto-fuerte); }
.buzon__detalle { margin: 0; font-size: var(--fs-nota); color: var(--texto); overflow-wrap: anywhere; }
.buzon__enlace { padding: 0; border: 0; background: none; font: inherit; color: var(--oro); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: start; }
.buzon__enlace:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 2px; }
.buzon__resultado:empty { display: none; }
.buzon__frase { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.buzon__frase .aviso { padding: 0.6rem 0.9rem; }
.buzon__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buzon__pastillas { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; }
@media (max-width: 40rem) {
  .buzon__acciones, .buzon__acciones .boton { width: 100%; }
}

/* ---- Inventario ---- */
.existencias .existencias__fila { grid-template-columns: minmax(13rem, 2.2fr) minmax(8rem, 1fr) 6.5rem 6.5rem minmax(7rem, 1fr) 8.5rem; }
.existencias__conteo { display: flex; flex-direction: column; align-items: flex-end; }
.existencias__filtros { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: center; }
.subidos .subidos__fila { grid-template-columns: 9rem minmax(11rem, 1.3fr) minmax(14rem, 2fr) 8rem; }
.subidos__fila .docs__fecha { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.subidos__fila .docs__categoria { display: flex; flex-direction: column; min-width: 0; }
.subidos__filtros { grid-template-columns: repeat(2, minmax(0, 12rem)); }
@media (max-width: 60rem) {
  .existencias .existencias__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; row-gap: 0.25rem; }
  .existencias__fila .docs__abrir { grid-column: 1 / -1; }
  .existencias__fila > .docs__num { justify-self: start; text-align: start; align-items: flex-start; }
  .existencias__fila .docs__etiqueta, .subidos__fila .docs__etiqueta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 0.75rem; color: var(--texto-suave); }
  .existencias__filtros { grid-template-columns: 1fr 1fr; }
  .existencias__filtros .filtros__buscar { grid-column: 1 / -1; }
  .subidos .subidos__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "abrir num" "fecha fecha" "cat cat"; row-gap: 0.25rem; }
  .subidos__fila .docs__abrir { grid-area: abrir; }
  .subidos__fila > .docs__num { grid-area: num; }
  .subidos__fila .docs__fecha { grid-area: fecha; flex-direction: row; align-items: center; }
  .subidos__fila .docs__categoria { grid-area: cat; }
}
@media (max-width: 60rem) {
  .existencias .existencias__fila > * { grid-area: auto; }
  .existencias .existencias__fila > .docs__abrir { grid-column: 1 / -1; }
  .existencias .existencias__conteo { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; }
}

/* ---- Cabeceras de las tablas: se quedan pegadas bajo la barra al bajar (--alto-barra-app lo pone cabecera(); --alto-cabecera es la del sitio, más alta), y las
   columnas que ordenan son botones con la flecha del sentido ---- */
.docs__cabeza, .semanas__cabeza {
  position: sticky;
  top: calc(var(--alto-barra-app, 4.5rem) + var(--alto-subbarra, 0px));
  z-index: 30;
  padding-top: 0.55rem;
  background-color: var(--superficie-cabecera);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.docs__orden { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.docs__orden:hover, .docs__orden--activo { color: var(--texto-fuerte); }
.docs__orden:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 2px; }
.docs__flecha { font-size: 0.85em; opacity: 0.45; }
.docs__orden--activo .docs__flecha { opacity: 1; color: var(--oro); }
@media (max-width: 60rem) {
  /* A lo angosto no hay columnas que leer: la cabecera no se pega (taparía casi 90px de pantalla) y lo que ordena
     queda en un renglón de botones chicos, debajo de «Seleccionar todos» */
  .docs__cabeza { position: static; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.35rem 1rem; padding-top: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .docs__cabeza > span.docs__ordenable { display: inline-flex; }
  .docs__cabeza > .docs__sel:not(:empty) { flex-basis: 100%; }
}

/* ---- Tienda: el libro de inventario de la tienda -------------------------

   SUS FILAS NO USAN .docs__fila, y es a propósito. A lo angosto, .docs__fila
   trae `grid-template-areas: "sel doc doc" …` para la ficha de documentos, y
   unas áreas nombradas imponen su número de columnas POR ENCIMA de cualquier
   grid-template-columns que se ponga después: la fila de tienda salía en tres
   columnas con el nombre pegado a la derecha del dato. Lo mismo con
   `.docs__abrir { grid-area: doc }`.

   Subir la especificidad lo habría tapado hasta la siguiente regla con áreas.
   Así que la tienda tiene sus propias clases de rejilla y nada que herede de
   otra pantalla. Es la tercera vez que esta familia de clases muerde (ver
   incidencias y cuentas): la lección es no compartir la rejilla, solo el
   aspecto. */
.tienda__resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.tienda__kpi { padding: 0.85rem 1rem; }
.tienda__kpi-titulo { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--texto-suave); }
.tienda__kpi-valor { margin: 0.3rem 0 0; font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--texto-fuerte); }
.tienda__kpi-pie { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--texto-suave); }
.tienda__kpi--alerta { border-color: var(--brasa); }
.tienda__kpi--alerta .tienda__kpi-pie { color: var(--brasa); }
.tienda__kpi--aviso .tienda__kpi-pie { color: var(--oro); }

.tienda__filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 1rem; }
.tienda__filtros-campos { display: grid; grid-template-columns: minmax(12rem, 22rem) minmax(8rem, 12rem); gap: 0.4rem 0.9rem; align-items: end; }
.tienda__filtros-campos .campo { margin: 0; }
.tienda__lista { display: flex; flex-direction: column; }

/* El aspecto de la fila, sin rejilla: la rejilla la pone la clase de cada lista. */
.tienda__cabeza, .tienda__renglon { display: grid; align-items: center; column-gap: 0.9rem; }
.tienda__cabeza {
  position: sticky; top: calc(var(--alto-barra-app, 4.5rem) + var(--alto-subbarra, 0px)); z-index: 30;
  padding: 0.55rem 0 0.4rem; border-bottom: 1px solid var(--filete);
  background-color: var(--superficie-cabecera); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--texto-suave);
}
.tienda__renglon { padding-block: 0.45rem; border-bottom: 1px solid var(--filete-interno); font-size: 0.9375rem; transition: background-color var(--transicion); }
.tienda__renglon:hover { background: rgba(255,244,220,0.03); }
.tienda__abrir {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0;
  font: inherit; color: inherit; text-align: start; background: none; border: 0; padding: 0.35rem 0; cursor: pointer;
}
.tienda__nombre { font-weight: 600; color: var(--texto-fuerte); }
.tienda__sub { font-size: 0.8125rem; color: var(--texto-suave); }
.tienda__num { text-align: end; justify-self: end; font-variant-numeric: tabular-nums; }
.tienda__estado { justify-self: end; }
/* Escondida a lo ancho, donde la columna ya dice qué es; visible a lo angosto. */
.tienda__etq { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La primera columna de tres de estas cuatro es la foto. Va en ancho fijo y no
   en `auto` para que el hueco de los productos sin foto mida exactamente lo
   mismo y los nombres queden alineados: con `auto` la lista se escalona según
   quién tenga foto y cuál sea más ancha. */
.tienda__fila { grid-template-columns: 2.5rem minmax(12rem, 2.4fr) minmax(10rem, 1.2fr) 7.5rem 8.5rem; }
.tienda__fila-rot { grid-template-columns: 2.5rem minmax(11rem, 2.2fr) 10rem 8rem 8.5rem 7rem; }
.tienda__fila-conteo { grid-template-columns: minmax(12rem, 2.6fr) 11rem 7rem; }
.tienda__fila-captura { grid-template-columns: 3.5rem minmax(11rem, 2.2fr) 9rem 8rem 8rem 7.5rem; }

/* ── La foto del producto ──
   Siempre `contain` y nunca `cover`: una caja de juego recortada por la mitad
   deja de servir para reconocerla, que es justo para lo que está. El fondo
   rellena lo que sobra. */
.tienda__foto {
  width: 2.5rem; height: 2.5rem; flex: none;
  background: rgba(255,244,220,0.04); border: 1px solid var(--filete-interno);
  border-radius: var(--radio-chico); overflow: hidden;
}
img.tienda__foto { object-fit: contain; }
.tienda__foto--grande { width: 3.5rem; height: 3.5rem; }
.tienda__foto--vacia {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-etiqueta);
  color: var(--texto-suave); user-select: none;
}
.tienda__foto--grande.tienda__foto--vacia { font-size: 0.875rem; }

/* En la ficha la foto se ve de verdad: se guarda a 600 px de lado, así que
   hasta en una pantalla al doble de densidad no se ve pastosa. */
.tienda__ficha { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
.tienda__ficha-datos { flex: 1 1 16rem; min-width: 0; }
.tienda__ficha-datos .filas { margin-top: 0; }
.tienda__foto--ficha { width: 13rem; height: 13rem; font-size: 2rem; }

.tienda__stock { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; }
.tienda__rot-nombre { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
/* De cuántas ventas sale la cifra, pegado a la cifra y no en una nota al pie:
   con una sola venta, «8.57 al mes» no es una tendencia. */
.tienda__respaldo { display: block; font-size: 0.75rem; color: var(--texto-suave); }
/* Lo que no se sabe se dice con palabras. En cursiva y apagado para que no se
   confunda con una cifra: un costo ausente NO es cero. */
.tienda__sindato { font-style: italic; color: var(--texto-suave); }

.tienda__captura { width: 100%; max-width: 7rem; padding: 0.3rem 0.5rem; font: inherit; font-variant-numeric: tabular-nums; text-align: end; color: var(--texto-fuerte); background: rgba(255,244,220,0.04); border: 1px solid var(--filete); border-radius: var(--radio-chico); }
.tienda__captura:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }
.tienda__captura-celda { display: flex; justify-content: flex-end; }

.tienda__conteo-cabeza { padding: 1rem 1.15rem; margin-bottom: 1rem; }
.tienda__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

.tienda__importar { padding: 1rem 1.15rem; margin-bottom: 1rem; }
.tienda__explica { margin: 0.35rem 0 0.75rem; font-size: 0.875rem; color: var(--texto-suave); }
.tienda__archivo { display: block; width: 100%; margin-bottom: 0.75rem; padding: 0.45rem; font: inherit; color: var(--texto); background: none; border: 1px dashed var(--filete); border-radius: var(--radio-chico); }
.tienda__informe:not(:empty) { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--filete-interno); }
.tienda__movs, .tienda__avisos { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.tienda__movs li { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding-block: 0.3rem; border-bottom: 1px solid var(--filete-interno); font-variant-numeric: tabular-nums; }
.tienda__movs li > span:first-child { flex: 1 1 10rem; min-width: 0; }
.tienda__mov-nota { color: var(--texto-suave); }
.tienda__avisos li { padding-block: 0.2rem; color: var(--oro); }

@media (max-width: 60rem) {
  .tienda__filtros-campos { grid-template-columns: 1fr; }
  /* A lo angosto no hay columnas que encabezar: la fila se vuelve una lista y
     cada dato lleva su etiqueta al lado. */
  .tienda__cabeza { display: none; }
  .tienda__fila, .tienda__fila-rot, .tienda__fila-conteo, .tienda__fila-captura {
    grid-template-columns: 1fr; row-gap: 0.3rem; padding-block: 0.75rem;
  }
  /* Cada dato en su renglón: etiqueta a la izquierda, valor a la derecha, para
     que se lea «Existencia … 39» y no un 39 suelto. El nombre del producto se
     queda como está, que no es un par etiqueta-valor. */
  .tienda__renglon > span:not(.tienda__rot-nombre) {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 0.3rem 0.8rem; justify-self: stretch; text-align: start;
  }
  .tienda__etq { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; color: var(--texto-suave); font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--ls-etiqueta); }
  .tienda__respaldo { flex-basis: 100%; text-align: end; }
  .tienda__captura { max-width: 6.5rem; }
  /* A lo angosto la foto se pone encima del nombre, no al lado: hacerla
     abarcar las filas del renglón obliga a saber cuántas tiene cada lista
     —son cuatro, cinco o seis según cuál— y se rompe al añadir un dato. */
  .tienda__renglon > img.tienda__foto,
  .tienda__renglon > span.tienda__foto { width: 3.5rem; height: 3.5rem; justify-self: start; display: flex; justify-content: center; }
  .tienda__renglon > img.tienda__foto { display: block; }
  .tienda__foto--ficha { width: 100%; height: auto; aspect-ratio: 1; }
}