/* ============================================================================
   Sistema OSECAC — Portal
   Lo que el armazón necesita y el sistema no tenía porque no existía la app.

   Regla: acá NO va ningún color literal. Todo sale de la capa semántica de
   `tokens.css`, igual que en `componentes.css`.
   ========================================================================== */

/* El contenedor de consulta. Sin `container-name: app` los formatos no se
   activan nunca: el sistema responde al ancho del CONTENEDOR, no del viewport. */
/* 🔀 **Sin fondo propio desde el gesto 10.** Lo pintaba acá —`background:var(--aurora)`—
   y era el fondo real de la aplicación; el del `<body>` quedaba tapado. Ahora lo pinta el
   cielo, que vive **fuera** de `.app` justamente porque `container-type` crea un contexto de
   apilamiento y encerraría la capa de `z-index` negativo detrás de este elemento.

   ⚠️ Esto costó una vuelta: se cambió el fondo del `<body>` dando por hecho que era el que se
   veía, y la pantalla siguió idéntica. Lo encontró mirar una captura, no un test. */
.app{container-type:inline-size;container-name:app}
/* 🔴 **El piso de `100dvh`, sólo arriba del teléfono** (`T189`, sexta vuelta, 14/10/2026).

   Estaba suelto: `.app{min-height:100dvh}` y `.app > .marco{min-height:100dvh}`. En la app
   instalada del dueño (Android, Chrome 155) `100dvh` valía 986 con 930 visibles, y un
   `min-height` le gana a un `height`: el marco medía 986 aunque `formatos.css` le diera el alto
   medido (`--alto-visible`, 930) y la isla de «Emitir recibo» quedaba bajo la barra. `.app > .marco` es
   0,2,0 y esta hoja carga después de `formatos.css`, así que le ganaba también al `min-height:0`
   del bloque de teléfono; y el `.app{min-height:0}` de la cadena de alto, misma especificidad,
   perdía por orden.

   En teléfono el alto del armazón lo manda `formatos.css` (la cadena de `100%` y lo medido): acá
   no se le impone **ningún** piso. `not all and (max-width:40rem)` es el complemento exacto del
   `@media` de esa cadena, así que en tableta y escritorio queda lo mismo que antes, unidad
   incluida. La guardia es `test_ningun_piso_de_viewport_en_el_marco_del_telefono`
   (`comun/tests/test_formatos_del_marco.py`), que lee todas las hojas del sistema. */
@media not all and (max-width:40rem){
  .app{min-height:100dvh}
  .app > .marco{min-height:100dvh}
}

/* La cabecera del mockup termina en el bloque de identidad y salida. */
.salir{display:flex;align-items:center;gap:var(--esp-4)}

/* El engranaje del encabezado (**T106**). **Nace escondido**: arriba de 640 px la entrada a la
   configuración vive en la barra lateral, y repetirla acá sería poner la misma puerta dos veces
   a diez centímetros de distancia. Lo enciende el bloque de teléfono de más abajo, que es donde
   la barra lateral no existe. Es el complemento exacto de `.pestanas`, que hace lo inverso. */
.ir-a-configuracion{
  display:none;place-items:center;flex:none;
  min-width:var(--tactil-min);min-height:var(--tactil-min);
  margin-inline-start:var(--esp-4);border-radius:var(--radio-pastilla);
  color:var(--texto-2);
  transition:color var(--dur-corta) var(--curva-salida),
             background var(--dur-corta) var(--curva-salida);
}
.ir-a-configuracion svg{width:20px;height:20px}
@media (hover:hover){.ir-a-configuracion:hover{color:var(--texto);background:var(--superficie-hover)}}
.ir-a-configuracion:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* La marca del teléfono (**T107**). **Nace escondida**, por el mismo motivo que el engranaje:
   arriba de 640 px el nombre está en la barra lateral y repetirlo acá sería decirlo dos veces
   en la misma pantalla. La enciende el bloque de teléfono de más abajo, que es donde
   `formatos.css` hace `.nav{display:none}` y el nombre del sistema se queda sin ningún lugar.

   🔑 **Lleva el color del acento y no el del texto.** No es un control ni un rótulo: es la
   marca, y es lo único de la fila que no lo es. */
.marca-movil{display:none;place-items:center;flex:none;width:22px;height:22px;
  color:var(--acento);margin-inline-end:var(--esp-1)}
/* La identidad empuja al conjunto contra el margen derecho, que antes hacía `.salir`. */
.identidad{display:flex;flex-direction:column;gap:1px;margin-left:auto;min-width:0;
  text-align:right}
.identidad__nombre{font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* El renglón de abajo es el que puede crecer —tres zonas ya son largas— así que es el que se
   recorta. El nombre no: quién sos no se abrevia. */
.identidad__detalle{font-size:var(--fs-micro);color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42ch}
.identidad__detalle b{color:var(--estado-intimada);font-weight:var(--peso-medio)}
.miga{font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-3);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;width:100%;margin-bottom:var(--esp-2)}
/* La cabecera es una **columna de dos filas** (09/09/2026): arriba lo que se repite en todas
   las pantallas, abajo lo propio de cada una. Antes era una sola fila con las dos cosas
   mezcladas, y el «Volver» terminaba pegado al título. */
.cabecera{display:flex;flex-direction:column;gap:var(--esp-4);padding:var(--esp-5) var(--esp-7);
  border-bottom:1px solid var(--separador);flex:none}
.cabecera__chrome{display:flex;align-items:center;gap:var(--esp-4);min-height:var(--esp-9)}
.cabecera__pagina{display:flex;align-items:center;gap:var(--esp-6);flex-wrap:wrap}
.cabecera h1{font-size:var(--fs-titulo);letter-spacing:var(--track-titulo);margin:0;min-width:0}
/* 🔑 **El título toma el renglón entero, y de ahí sale la fila de botones** (**T108**).
   Esta regla vivía dentro del bloque de teléfono: ahí abajo el título ya se negaba a achicarse
   y los botones bajaban solos. Ahora vale en los tres formatos, que es todo el cambio de
   disposición — con el `<h1>` ocupando el ancho, lo que va después **envuelve** a la fila
   siguiente sin necesidad de un contenedor propio. */
.cabecera__pagina > h1{flex:1 1 100%}
/* El gesto de salida va **primero entre los botones**, y se lo garantiza `order` y no el orden
   del marcado: una pantalla puede declarar sus acciones antes que su «Volver» y el extremo
   sigue siendo el mismo.

   🔴 **Los dos valores son positivos, y eso está medido.** `order` ordena respecto de **todos**
   los hijos del flex, no sólo de los botones: con un `-1` el «Volver» le pasaba por encima a la
   miga y al título y se dibujaba arriba de todo —en los tres formatos, a 112 px por encima del
   borde inferior del título—. La miga, el título y la ayuda se quedan en el 0 implícito, así que
   siguen primero sin declarar nada. */
.cabecera__pagina > .boton{order:2}
.cabecera__pagina > .volver{order:1}
/* Un nombre largo de empresa en el «Volver» se **trunca con puntos suspensivos** (T191, criterio 17):
   el nombre completo viaja en el `aria-label` del enlace, y el botón no desborda en ningún ancho ni
   crece de alto. Antes envolvía (T171); con la empresa en el rótulo —ahora también en el acta, el
   plan y el recibo— un nombre de 60 caracteres lo volvía un bloque de tres renglones. Sólo se
   trunca el texto: la flecha y el alto táctil (C1) no se tocan. */
.cabecera__pagina > .volver{min-width:0;max-width:100%;padding-block:var(--esp-3)}
.volver__texto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Los totales de la portada: tres en escritorio, carrusel con anclaje en teléfono
   —tres columnas a 390 px no se leen—. Es el mismo tratamiento del mockup. */
/* 🔑 **Tres columnas mientras entren, menos cuando no** (T171). El piso está en `rem`: con el texto al
   200 % una cifra de 21 px pasa a 42 y tres tarjetas de 230 px se pisaban. `(100% - huecos) / 3`
   da **exactamente** las tres columnas de siempre cuando hay lugar (`auto-fill` las cuenta), así que
   al tamaño por defecto el dibujo no cambia. */
.totales{display:grid;gap:var(--esp-5);
  grid-template-columns:repeat(auto-fill,minmax(max(11rem,calc((100% - 2 * var(--esp-5)) / 3 - .5px)),1fr))}

/* La tabla del listado. En teléfono `formatos.css` la vuelve tarjetas con el mismo
   marcado, así que la estructura no cambia entre formatos. */
.desplazable{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio-panel);
  background:var(--superficie)}
.tapa{display:flex;align-items:center;gap:var(--esp-5);flex-wrap:wrap;
  padding:var(--esp-5) var(--esp-6);border-bottom:1px solid var(--separador)}
.tapa .cuenta{margin-left:auto;font-family:var(--f-dato);font-size:var(--fs-etiqueta);
  color:var(--texto-3);letter-spacing:var(--track-etiqueta);text-transform:uppercase}
/* `#la-bandeja` y `#el-plantel` llevan `tabindex="-1"` para que el rescate de foco de
   `portal.js` («El foco no se cae al vacío») tenga dónde pararse tras un intercambio del panel
   entero (defecto real: sin esto el foco caía al `<body>`). El anillo genérico de `base.css`
   sobre un contenedor así de grande —avisos, tabla, paginación— sería el bloque feo que se
   quiere evitar, así que se apaga en el contenedor y se redirige a la tapa, que es donde
   § Teclado dice que el foco tiene que leerse: «cuánto queda», no la fila que ya no está. */
#la-bandeja:focus-visible,
#el-plantel:focus-visible,
#legajo-seccion:focus-visible{outline:none}
/* La pantalla entera recibe el foco al cambiar de sección por el menú (T117b): un anillo
   alrededor de todo el contenido no señala nada que se pueda operar. El próximo Tab entra en
   ella, que es lo que importa. */
#pantalla:focus-visible{outline:none}
#la-bandeja:focus-visible > .desplazable > .tapa,
#el-plantel:focus-visible > .desplazable > .tapa,
#legajo-seccion:focus-visible > .desplazable > .tapa,
#legajo-seccion:focus-visible > #actas-del-legajo > .desplazable > .tapa,
#legajo-seccion:focus-visible > #recibos-del-legajo > .desplazable > .tapa{
  outline:2px solid var(--acento);outline-offset:2px;border-radius:var(--radio-1);
}
/* Los botones de trabajo, en la tapa del panel que los explica (**T078**, 18/09/2026). Estaban
   arriba de todo, pegados a las tarjetas de totales, a dos secciones de la tabla sobre la que
   actúan; el dueño del producto los pidió acá «para que visualmente se asocien los botones con
   el cálculo de los meses».

   `.cuenta` ya lleva `margin-left:auto`, así que la cuenta y este grupo forman el bloque derecho
   sin una regla de alineación más. `display:contents` en el `<form>` de Calcular es lo mismo que
   hace la barra del pie: sin eso el formulario es el ítem de la fila y el botón queda con el
   ancho de su texto, fuera del reparto. */
.tapa__acciones{display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap}
.tapa__acciones form{display:contents}
@container app (max-width:40rem){
  /* En la tapa angosta el grupo baja a su propio renglón y se estira: tres controles
     compartiendo fila con el título y la cuenta no se tocan sin apuntar. */
  .tapa__acciones{flex:1 1 100%;justify-content:flex-start}
  .tapa__acciones .boton{flex:1 1 auto;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* La fila de acciones **de un panel**, que no es la barra del acta: vive adentro del panel que
   la produce y por eso lleva su propio modificador. Hay dos tests que exigen que en la pantalla
   del acta haya una sola `acciones--acta` y **ninguna** `acciones` suelta — de ahí que ésta se
   llame como se llama. */
.acciones--detalle{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4);
  justify-content:flex-end;padding:var(--esp-5) var(--esp-6)}
@container app (max-width:40rem){
  .acciones--detalle{flex-direction:column;align-items:stretch}
  .acciones--detalle .boton{justify-content:center;min-height:var(--boton-alto-movil)}
}

/* 🔀 **El vacío se mudó a `componentes.css`** (16/09/2026). Vivía suelto acá, con dos
   declaraciones y sin spec, y así aparecieron tres patrones distintos —uno de ellos
   apoyado en clases que NO existían—. Es un componente del sistema: su ley está en
   `componentes.css` § El vacío y sus criterios en `componentes.md`. Acá quedan sólo
   los ajustes de contexto propios del portal, más abajo. */

/* Ingreso: una sola columna centrada, sin navegación — todavía no hay quién navegue. */
.ingreso{min-height:var(--alto-de-pantalla);display:grid;place-items:center;padding:var(--esp-9)}
.ingreso .panel{width:min(380px,100%);padding:var(--esp-9);display:flex;
  flex-direction:column;gap:var(--esp-6)}
.ingreso .marca{padding:0 0 var(--esp-4)}
.ingreso .campo-grupo{display:flex;flex-direction:column;gap:var(--esp-3)}
.ingreso label{font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--texto-2)}
.ingreso .boton{justify-content:center;width:100%}

@container app (max-width:40rem){
  .totales{display:flex;gap:var(--esp-4);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--esp-6) * -1);padding-inline:var(--esp-6);scrollbar-width:none}
  .totales::-webkit-scrollbar{display:none}
  .total{flex:0 0 73%;scroll-snap-align:start}
  .cabecera{padding:var(--esp-6)}
  /* 🔀 En teléfono **se acorta, no desaparece** (07/09/2026). Antes se escondía el bloque
     entero y se podía trabajar una jornada sin ver nunca con qué cuenta. Queda el nombre,
     que es lo que contesta «¿quién soy acá?»; el detalle vive en el perfil (T040). */
  .identidad__detalle{display:none}
  .identidad__nombre{max-width:14ch}
  /* 🔑 **Acá se enciende el engranaje**, que es el único camino a la configuración —y con ella
     a los parámetros y al cerrar sesión— cuando no hay barra lateral. */
  .ir-a-configuracion{display:grid}
  /* 🔑 **Y acá se enciende la marca**, que en teléfono es el único lugar donde el sistema dice
     cómo se llama: no hay barra lateral, y el `<title>` tampoco se ve porque la app instalada
     corre en `standalone`.

     🔀 **Y ya no cede ante nada** (**T108**). Tenía una regla que la escondía cuando la fila de
     arriba traía un «Volver», porque en 390 px no entraban los dos. El «Volver» se fue abajo
     con el resto de los botones, así que la disputa no existe: la marca se ve también en las
     pantallas de detalle, que es donde más falta hacía. */
  .marca-movil{display:grid}
  /* 🔀 **Ningún filtro vive ya en la cabecera** (`T162`). Planes y Numeración eran los últimos
     que la usaban —con el buscador en un renglón propio y el estado en la tapa— y pasaron a la
     zona de filtros del cuerpo, como Actas y Empresas. Las reglas de `.cabecera .filtro` se
     fueron con ellos: una regla sin a quién aplicarle es una trampa para la próxima pantalla. */
  /* 🔴 **El título se lleva su renglón y los botones el de abajo** (17/09/2026). El
     `h2{flex:1;min-width:0}` de arriba lo dejaba encogerse **hasta 28 px** —una columna
     de letras sueltas, medida en el legajo a 390 px— en vez de empujar los botones a la
     fila siguiente. Se leía como una superposición, porque el texto se desbordaba de su
     caja por debajo de «Recibo» y «Confeccionar acta». Un título es lo último que se
     achica: acá directamente no se achica, ocupa el ancho y los botones bajan.

     Y los botones **reparten el renglón** en vez de amontonarse a la izquierda: en
     teléfono un botón angosto al lado de otro es dos blancos difíciles de acertar. */
  .cabecera__pagina{gap:var(--esp-4) var(--esp-5)}
  .cabecera__pagina > .boton{flex:1 1 auto;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* ── Gesto 1 · Entrada escalonada, en CSS ───────────────────────────────────
   El sistema la trae como transición atada a `[data-vivo]`, que los mockups
   encienden desde JavaScript. Acá se hace con una **animación**, y la diferencia
   no es de estilo:

   - una transición sobre un estado inicial `opacity:0` sólo se resuelve cuando
     algo cambia ese estado, y en los mockups ese algo es un cuadro de JS. Si el
     cuadro tarda —una hoja externa lenta basta—, el listado queda **invisible**
     con la página ya pintada alrededor. Medido: ~1,4 s en la pantalla más usada
     del sistema, que se lee como que se rompió.
   - una animación arranca con el primer cálculo de estilo y **siempre termina**.
     Sin JavaScript, igual. Con el CSS caído, el contenido se ve plano y visible,
     que es el fallo correcto.

   El desfase por pieza sale de `nth-child` y no de una variable puesta por JS, por lo mismo.

   🔀 **Los bloques del listado, con los mismos tiempos que las filas** (`T164`). Eran escalones de
   34 ms escritos a mano con `--dur-larga` y `--curva-salida`, y la entrada tenía dos ritmos. Ahora
   `.listado > *` y `.lista > *` usan el mecanismo de las filas: `--cascada-dur`, `--curva-cascada`
   y `--i` por `nth-child` (más abajo, compartido). **Los bloques van antes**, en el orden de
   lectura: toman los lugares 0 a 3 (`--i` acotado a 3, así un listado con muchos hijos no pisa
   a las filas) y las filas arrancan en el 4. `.lista > *` es el cuerpo de un listado —las
   tarjetas de la nómina—: va a la par de las filas, con el desplazamiento de arranque de cuatro
   pasos. */
@media (prefers-reduced-motion:no-preference){
  .listado > *{
    animation:entrar-al-listado var(--cascada-dur) var(--curva-cascada) backwards;
    animation-delay:min(calc(min(var(--i,0),3) * var(--cascada-paso)),var(--cascada-tope));
  }

  /* 🔀 **Y después las filas, una por una** (07/09/2026). El sistema describe el gesto como
     «34 ms **por fila**» y acá escalonaba **dos o tres bloques** en 102 ms: el orden de lectura
     de la pantalla se resolvía antes de que el ojo llegara. Se reportó como que las animaciones
     no se veían, y sobre esta parte era cierto.
     Arrancan donde termina el bloque que las contiene, así que la cascada se lee como una sola:
     el listado aparece y las filas caen detrás.

     🔀 **Con los tiempos del relevo y con tope de verdad** (`T163`). Hasta acá eran escalones de
     34 ms escritos a mano, anteriores a los tokens, que arrancaban en 136 ms y se cortaban en la
     fila 10 a 442 ms: la última fila de Empresas quedaba entera cerca de 780 ms y a 400 ms había
     **una** de quince — contra **R5** y contra el tope que la cascada del relevo ya respetaba.
     Ahora son los mismos que `[data-en-cascada]` y el relevo: `--cascada-paso` por fila y **tope**
     en `--cascada-tope`, así que la cascada entera dura el tope más `--cascada-dur` tenga la tabla
     diez filas o doscientas. Las filas empiezan **cuatro pasos** después del comienzo —el lugar
     que les toca en el orden de lectura, detrás de la cabecera y de los bloques del listado, que
     es el mismo que les da el relevo—, y `--i` (más abajo, compartido con `[data-en-cascada]`)
     es sólo el orden: los tiempos salen de tokens.

     🔀 **Más marcada y algo más lenta** (`T164`): el dueño de producto la vio «casi
     imperceptible». La duración, la subida, la escala de partida y la curva también son tokens
     (`--cascada-dur`, `--cascada-subida`, `--cascada-escala`, `--curva-cascada`): con 36 ms de
     paso y tope en 560 ms la ola recorre las trece primeras filas antes de juntarse, y la entrada
     entera termina a 1080 ms. */
  .grilla tbody tr,
  .lista > *{
    animation:entrar-al-listado var(--cascada-dur) var(--curva-cascada) backwards;
    animation-delay:min(calc((var(--i,0) + 4) * var(--cascada-paso)),var(--cascada-tope));
  }

  /* 🔀 **Y todo listado de piezas independientes, no sólo las filas de `.grilla`** (`T162`,
     pedido del dueño de producto: «cada vez que se carga una página con un listado de elementos
     independientes, esos elementos entran en cascada»). Las tarjetas de la portada, las de un
     tablero, la lista de Legales, el detalle mes a mes, los historiales: no son `.grilla` y
     entraban en bloque. Se marcan en el marcado con `data-en-cascada` sobre el contenedor, y sus
     hijos entran con **el mismo gesto** (`entrar-al-listado`) y **los tiempos del relevo**: un
     paso de `--cascada-paso` por pieza y **tope** en `--cascada-tope`, así que una lista de
     cincuenta no tarda más que una de doce. `--i` es sólo el orden; los tiempos salen de tokens.
     En CSS y no en JS por lo mismo que el resto de este gesto: arranca solo y siempre termina. */
  [data-en-cascada] > *{
    animation:entrar-al-listado var(--cascada-dur) var(--curva-cascada) backwards;
    animation-delay:min(calc(var(--i,0) * var(--cascada-paso)),var(--cascada-tope));
  }
  .grilla tbody tr:nth-child(1),.listado > :nth-child(1),.lista > :nth-child(1),[data-en-cascada] > :nth-child(1){--i:0}
  .grilla tbody tr:nth-child(2),.listado > :nth-child(2),.lista > :nth-child(2),[data-en-cascada] > :nth-child(2){--i:1}
  .grilla tbody tr:nth-child(3),.listado > :nth-child(3),.lista > :nth-child(3),[data-en-cascada] > :nth-child(3){--i:2}
  .grilla tbody tr:nth-child(4),.listado > :nth-child(4),.lista > :nth-child(4),[data-en-cascada] > :nth-child(4){--i:3}
  .grilla tbody tr:nth-child(5),.listado > :nth-child(5),.lista > :nth-child(5),[data-en-cascada] > :nth-child(5){--i:4}
  .grilla tbody tr:nth-child(6),.listado > :nth-child(6),.lista > :nth-child(6),[data-en-cascada] > :nth-child(6){--i:5}
  .grilla tbody tr:nth-child(7),.listado > :nth-child(7),.lista > :nth-child(7),[data-en-cascada] > :nth-child(7){--i:6}
  .grilla tbody tr:nth-child(8),.listado > :nth-child(8),.lista > :nth-child(8),[data-en-cascada] > :nth-child(8){--i:7}
  .grilla tbody tr:nth-child(9),.listado > :nth-child(9),.lista > :nth-child(9),[data-en-cascada] > :nth-child(9){--i:8}
  .grilla tbody tr:nth-child(10),.listado > :nth-child(10),.lista > :nth-child(10),[data-en-cascada] > :nth-child(10){--i:9}
  .grilla tbody tr:nth-child(11),.listado > :nth-child(11),.lista > :nth-child(11),[data-en-cascada] > :nth-child(11){--i:10}
  .grilla tbody tr:nth-child(12),.listado > :nth-child(12),.lista > :nth-child(12),[data-en-cascada] > :nth-child(12){--i:11}
  .grilla tbody tr:nth-child(n+13),.listado > :nth-child(n+13),.lista > :nth-child(n+13),[data-en-cascada] > :nth-child(n+13){--i:12}

  /* 🔴 **La cascada es de la llegada, no de cada fragmento** (`T162`; `movimiento.md` § 3.2). La
     animación de arriba corre cada vez que una fila **nace**, y un filtro que se aplica solo hace
     nacer la tabla entera en cada tecla: el listado se reescalonaba 350 ms después de cada letra.
     Lo que va al filtrar es el crossfade de la espera (gesto 11: la vieja se atenúa y se
     reemplaza), no otra entrada. `portal.js` marca con `data-sin-cascada` lo que llega por un
     intercambio que no es un relevo (filtrar, paginar, asignar una zona, recalcular el plan), y
     el relevo de sección —que sí es llegar— conserva la suya: su regla pesa (0,3,0).

     Y **nunca** en una tabla de plata que se está editando —el detalle de la carga, el armado del
     plan, el recibo—: ahí las cifras cambian mientras se leen, y una fila que entra tarde es una
     cifra que no está cuando hace falta (**R5**). Esas tablas llevan `data-sin-cascada` en el
     marcado. */
  [data-sin-cascada] :is(.grilla tbody tr,.lista > *,[data-en-cascada] > *),
  .grilla[data-sin-cascada] tbody tr,
  .listado > [data-sin-cascada]{animation:none}
}
/* 🔴 **`backwards` y no `both`, y la diferencia se vio en una captura de teléfono.**

   Con `both` la animación **sigue aplicando su último fotograma para siempre**. Ese fotograma
   dice `transform:none`, pero una propiedad animada hacia `none` se computa como **matriz
   identidad** —`matrix(1,0,0,1,0,0)`—, y un `transform` que no es literalmente `none`, aunque no
   mueva nada, **convierte al elemento en el bloque contenedor de todo `position:fixed` que tenga
   adentro**.

   Consecuencia medida: la barra de selección del reparto, que en teléfono tiene que quedar fija
   sobre las pestañas, se posicionaba contra `#el-reparto` —2.500 px de alto— y terminaba en
   `top: 2398px` con una ventana de 860. `getComputedStyle` decía `position:fixed`, así que
   parecía bien; **estaba fuera de la pantalla**.

   `backwards` conserva lo único que `both` aportaba —que una pieza con retardo esté invisible
   hasta que le toque, que es la mitad `from`— y suelta la mitad `to`, que no aportaba nada: su
   estado final es idéntico al natural (`opacity:1`, sin transform). Lo que cambia es que al
   terminar el `transform` vuelve a ser `none` **de verdad**.

   El punto de partida es de tokens desde `T164`: `--cascada-subida` (12 px) y `--cascada-escala`
   (.985). Sólo `transform` y `opacity`, nada de desenfoque (R2, R6). */
@keyframes entrar-al-listado{
  from{opacity:0;transform:translateY(var(--cascada-subida)) scale(var(--cascada-escala))}
  to{opacity:1;transform:none}
}

/* Piezas del listado que el sistema no tenía porque no había listado construido. */
.filtro{display:flex;align-items:center;gap:var(--esp-4)}
/* Empresas (T124): la sección y su resultado apilan sus piezas con el mismo aire que `.listado`
   —el aviso de E24, la tapa y la tabla eran hijos directos de `.listado` antes de envolverlos. */
#empresas-seccion,#resultado-de-empresas{display:flex;flex-direction:column;gap:var(--esp-6);min-width:0}
/* Las actas del legajo (T125) apilan el filtro y el resultado con el mismo aire, y el conmutador
   respira de la sección: `#legajo-vista` pasa a columna con `gap`. Es seguro con el relevo de
   secciones (`portal.js`): la sección que se va se saca del flujo con `position:absolute` y la
   caja que `offsetTop` midió **en vivo**, con el `gap` ya adentro; la que entra ocupa su lugar.
   Sólo hay un hijo en flujo por sección, así que el aire entre conmutador y sección es uno solo. */
#legajo-vista{display:flex;flex-direction:column;gap:var(--esp-6)}
#actas-del-legajo,#recibos-del-legajo{display:flex;flex-direction:column;gap:var(--esp-6);min-width:0}

/* El campo de fecha de la barra de filtros. Va acotado: un `<input type=date>` suelto se estira
   a lo que le den, y dos de ellos al lado del buscador lo dejan sin ancho — que es el control que
   más se usa de los cuatro. La medida es la que necesita `DD/MM/AAAA` con su ícono de calendario.

   ⚠️ El `<label>` es el contenedor y el `<input>` va adentro, como el buscador: así la etiqueta
   invisible queda asociada sin un `for`, y por eso el ancho se declara en los dos. */
.campo--fecha-filtro{flex:0 0 auto;width:auto;padding:0 var(--esp-4);display:flex;align-items:center}
.campo--fecha-filtro input{
  width:13ch;border:0;background:none;padding:var(--esp-3) 0;outline:none;
  color:var(--texto);font-family:var(--f-dato);font-size:var(--fs-dato);
}
.campo--fecha-filtro input:focus-visible{outline:none}
/* El calendario propio se proyecta también sobre estos dos, así que el ancho que el input
   tenía pasa al control que lo muestra (**T083**). */
.campo--fecha-filtro .calendario__control{width:13ch}
/* 🔴 **El foco lo dibuja la píldora** (T170, resto de T166; **G10**). El `outline:none` del `<input>` y
   del control del calendario es correcto, pero la fecha sólo cambiaba el color del borde: el foco
   del teclado casi no se veía. Mismo anillo que el buscador y que el resto del sistema. */
.campo--fecha-filtro:focus-within{
  border-color:var(--acento);outline:2px solid var(--acento);outline-offset:2px;
}

@container app (max-width:40rem){
  /* 🔀 **Se fue el carril deslizable de los filtros** (`T162`, 06/10/2026). Nació el 29/09/2026
     para Actas (`T148`), Empresas (`T124`) y las actas del legajo (`T125`): los controles en una
     fila que desliza dentro de su propio carril, sin scroll horizontal de página. `T155` §G se lo
     sacó a Actas porque cortaba el selector y escondía las fechas, y le dio la zona de filtros con
     hoja desde abajo; el dueño de producto pidió que todos los listados filtren así, «en especial
     Empresas». Las tres pantallas usan ahora `.filtros` (`componentes.css`), y lo que el carril
     resolvía —que la página nunca deslice— lo resuelve la hoja: el buscador a la vista y el resto
     apilado a ancho completo. */
  /* Tarjetas, filtro y tabla son hermanos dentro de la sección —el `gap` del `.listado` sólo
     separa a la sección de sus vecinos— y estaban pegados. */
  #empresas-seccion{display:flex;flex-direction:column;gap:var(--esp-6)}
  /* El carrusel de tarjetas ya existía (`.totales`, arriba); sólo le faltaba decirle al anclaje
     dónde empieza la primera. Sin `scroll-padding` el `mandatory` la pegaba al borde de la
     pantalla y se leía como una tarjeta cortada. */
  #actas-seccion .totales{scroll-padding-inline:var(--esp-6)}
  .campo--fecha-filtro input{width:100%}
  .campo--fecha-filtro .calendario,.campo--fecha-filtro .calendario__control{width:100%}
}

/* 🟡 El buscador es un `<label class="campo">` con el `<input>` adentro —para que la
   etiqueta invisible quede asociada sin un `for`—, y `.campo` no es contenedor flex: el
   input quedaba con su propio recuadro del navegador **dentro** de la píldora. Se veía como
   una caja adentro de otra. La píldora es el campo; el input le presta el cursor. */
.campo--busqueda{display:flex;align-items:center;gap:var(--esp-4)}
.campo--busqueda input{flex:1;min-width:0;border:0;background:none;padding:0;outline:none;
  color:inherit;font:inherit}
.campo--busqueda input::placeholder{color:var(--texto-3)}
/* 🔴 **El foco lo dibuja la píldora** (T166, WCAG 2.4.7). El `outline:none` del `<input>` de arriba
   se queda —un recuadro del navegador adentro de la píldora es el defecto que esa regla evita—,
   pero sin nada que lo reemplace el buscador, el control que más se usa con teclado, no mostraba
   dónde estaba el foco: el recorte con y sin foco era idéntico al 100 % en Empresas y Numeración.
   Mismo anillo que el resto (`base.css`: 2 px de `--acento`, 2 px de separación) más el borde. */
.campo--busqueda:focus-within{
  border-color:var(--acento);outline:2px solid var(--acento);outline-offset:2px;
}
/* El rótulo de una fecha de filtro se oculta como `.oculto-visual` en escritorio; en teléfono,
   dentro de `#actas-seccion`, se ve. El JS del calendario lo lee con `span:first-child`. */
.oculto-visual,.campo__rotulo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.derecha{text-align:right}
.dato{font-family:var(--f-dato);font-variant-numeric:tabular-nums}
.grilla .empresa{max-width:32ch;overflow:hidden;text-overflow:ellipsis}

/* Un acta que este usuario no puede operar se sigue viendo — **A28** restringe actuar, no
   ver, y **A8** deja mirar el acta intimada sin acciones. Lo que cambia es que la fila no
   se ofrece como accionable: sin cursor de mano y sin barrido al pasar. Prometer una acción
   que después se rechaza es peor que no ofrecerla. */
.grilla tbody tr.fila--mirar{cursor:default;background-image:none}

.nota-etapa{padding:var(--esp-7);display:flex;flex-direction:column;gap:var(--esp-5);
  font-size:var(--fs-dato);color:var(--texto-2);line-height:1.6}
.nota-etapa p{margin:0}
.nota-etapa b{color:var(--texto)}

/* La firma de la barra lateral. Vive en el mockup como CSS local; acá pasa al sistema
   porque el armazón la usa en todas las pantallas y en el ingreso.

   🔀 **Es un lockup, no una lista** (**T108**): el isotipo arriba y las dos líneas del nombre
   debajo. Se arma con áreas nombradas y no con un `<span>` envoltorio porque los tres hijos ya
   están en el marcado y así se colocan solos —el día que alguien agregue un cuarto, la grilla
   no lo ubica y se nota, que es mejor que verlo aparecer torcido.

   🔴 **Apilado y no al costado, y eso está medido.** Al costado el isotipo se come 26 px más su
   aire y a «Sistema Fiscalizador» le quedaban 111 px para los 143 que mide: se partía en dos
   renglones y el símbolo quedaba centrado contra tres líneas de texto. Apilado, el nombre
   recupera el ancho entero de la pista y vuelve a entrar en uno. */
.marca{display:grid;grid-template-areas:"iso" "n" "s";justify-items:start;
  row-gap:1px;padding:var(--esp-7) var(--esp-5) var(--esp-4)}
.marca .n{grid-area:n;font-family:var(--f-titulo);font-weight:var(--peso-negro);
  font-size:var(--fs-medio);letter-spacing:-.02em}
.marca .s{grid-area:s;font-size:var(--fs-micro);letter-spacing:var(--track-rotulo);
  text-transform:uppercase;color:var(--texto-3)}

/* El isotipo de la marca (**T107**, ampliado en **T108**). Ahora se dibuja **siempre**: es
   parte del lockup, no un reemplazo del texto. Lo que cambia en tableta es que el texto se va
   y queda él solo.

   ⚠️ **Las reglas viven acá y no en `formatos.css`, y no es indistinto**: `portal.css` se
   sirve **después**, así que una base declarada allá perdería contra ésta —a igual
   especificidad, manda la última—. Es la misma trampa que `formatos.css` deja documentada
   arriba de `.cuerpo`. */
.marca__isotipo{grid-area:iso;width:26px;height:26px;color:var(--acento);
  margin-bottom:var(--esp-4)}

/* ── Tableta · la marca se queda en símbolo ────────────────────────────────
   El mismo movimiento que ya hacen los enlaces de la barra —la etiqueta se va, queda el
   ícono—. Con 66 px de pista menos el borde y los dos rellenos quedan 45 px de ancho útil:
   el texto no entra y se montaba sobre la cabecera; el isotipo entra con aire. */
@container app (max-width:67.5rem){
  /* 🔑 **Acotado a `.nav`, y no es cosmético.** El mismo bloque de marca lo usan el ingreso y
     la pantalla sin conexión, donde no hay pista que angostar y el nombre entra de sobra. Sin
     acotar, el día que alguna de esas dos quede envuelta en `.app` perderían el nombre escrito
     por una regla pensada para una barra lateral que ahí no existe. */
  .nav .marca{justify-items:center;padding:var(--esp-7) 0 var(--esp-4)}
  .nav .marca__isotipo{margin-bottom:0}
  .nav .marca .n,.nav .marca .s{display:none}
}

/* ── Conmutador de tema · el sol y la luna ──────────────────────────────────
   🔀 **Reemplaza a los dos botones con nombre** (06/09/2026). El comentario que
   estaba acá defendía dos botones —«Nocturna» y «Diurno»— con un argumento que
   sigue siendo bueno: el sistema tiene **dos identidades con nombre**, no un
   booleano «oscuro sí/no», y un interruptor deja una de las dos sin nombre en
   la interfaz.

   Se responde, no se ignora: los dos nombres siguen dichos, en el `aria-label`
   y en el `title` del botón, que dicen a cuál se va —«Cambiar al tema Diurno»—.
   Lo que se gana a cambio es que el control **es** el gesto: el cielo gira
   detrás (gesto 10) y la perilla que lo dispara es el astro que sale. Dos
   pastillas de texto no pueden decir eso.

   La perilla es un solo elemento con máscara: en día es un disco lleno con
   rayos; al pasar a noche gira 218°, los rayos se encogen y una máscara radial
   le muerde una medialuna. **No hay dos íconos que se cruzan** — es la misma
   forma transformándose, que es lo que hace que se lea como un astro y no como
   un cambio de imagen. */
.temas{display:inline-flex}
.tema{
  --pista-ancho:56px; --pista-alto:30px; --perilla:24px;
  --sol:var(--p-ambar-400); --luna:#EEF1F8;
  position:relative;appearance:none;cursor:pointer;padding:0;
  width:var(--pista-ancho);height:var(--pista-alto);border-radius:var(--radio-pastilla);
  /* Borde neutro, no de acento: la píldora ya se distingue por su relleno, y un
     borde de color en reposo la hacía competir con el astro que tiene adentro. */
  border:1px solid var(--borde);background:var(--superficie);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:background var(--dur-cielo) var(--curva-cielo),border-color var(--dur-cielo) var(--curva-cielo);
}
.tema:hover{border-color:var(--borde-vivo)}
.tema:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

/* El viaje de la perilla y su giro. Duran menos que el cielo —el astro llega
   antes de que el fondo termine de girar—, que es lo que da la sensación de que
   el astro arrastra al cielo y no al revés. */
.tema .perilla{
  position:absolute;left:2px;top:2px;
  width:var(--perilla);height:var(--perilla);
  transform:translateX(0) rotate(0deg);
  transition:transform calc(var(--dur-cielo) * .62) var(--curva-cielo);
}
.tema .astro{
  position:absolute;inset:0;border-radius:50%;background:var(--sol);
  filter:drop-shadow(0 0 8px rgba(255,180,138,.6));
  transition:background var(--dur-cielo) var(--curva-cielo),filter var(--dur-cielo) var(--curva-cielo);
}
.tema .rayos{
  position:absolute;left:50%;top:50%;width:0;height:0;opacity:1;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity calc(var(--dur-cielo) * .62) var(--curva-cielo),
             transform calc(var(--dur-cielo) * .62) var(--curva-rebote);
}
.tema .rayos i{
  position:absolute;left:-.75px;top:-.75px;width:1.5px;height:4px;border-radius:2px;
  background:var(--sol);
}
/* Ocho rayos, uno cada 45°. El `translateY` los empuja hacia afuera **después**
   de girarlos, que es lo que los reparte en círculo en vez de apilarlos. */
.tema .rayos i:nth-child(1){transform:rotate(0deg)   translateY(-16px)}
.tema .rayos i:nth-child(2){transform:rotate(45deg)  translateY(-16px)}
.tema .rayos i:nth-child(3){transform:rotate(90deg)  translateY(-16px)}
.tema .rayos i:nth-child(4){transform:rotate(135deg) translateY(-16px)}
.tema .rayos i:nth-child(5){transform:rotate(180deg) translateY(-16px)}
.tema .rayos i:nth-child(6){transform:rotate(225deg) translateY(-16px)}
.tema .rayos i:nth-child(7){transform:rotate(270deg) translateY(-16px)}
.tema .rayos i:nth-child(8){transform:rotate(315deg) translateY(-16px)}

/* Estado noche. Lo manda el tema del documento, no una clase que ponga JS: así
   la posición de reposo es correcta también cuando la página llega ya pintada
   en el tema —recarga, o navegación sin JavaScript—. */
[data-tema="nocturna"] .tema .perilla{
  transform:translateX(calc(var(--pista-ancho) - var(--perilla) - 4px)) rotate(218deg);
}
[data-tema="nocturna"] .tema .astro{
  background:var(--luna);
  filter:drop-shadow(0 0 8px rgba(226,234,255,.45));
  /* La medialuna: un círculo transparente mordiendo el disco desde arriba a la
     derecha. Está en `px` y no en `%` porque tiene que morder **fuera** del
     centro; con porcentajes se deforma en cuanto cambia el tamaño de la perilla. */
  -webkit-mask-image:radial-gradient(circle 12px at 19px 4px,transparent 99.5%,#000 100%);
  mask-image:radial-gradient(circle 12px at 19px 4px,transparent 99.5%,#000 100%);
}
[data-tema="nocturna"] .tema .rayos{opacity:0;transform:translate(-50%,-50%) scale(.55)}

/* En el ingreso no hay cabecera donde apoyarlo, así que se fija al margen: es el
   mismo lugar de la pantalla que ocupa adentro de la app, y eso importa más que
   dónde caiga en el marcado. */
.temas--ingreso{position:fixed;top:var(--esp-7);right:var(--esp-7);z-index:2}

@container app (max-width:67.5rem){
  /* 🔀 **Se veía en escritorio y en ningún otro lado** (07/09/2026). Estaba escondido con el
     argumento de que el conmutador es una preferencia y no una tarea, así que cedía el espacio.
     El problema es a quién se lo cedía: **el inspector trabaja en el teléfono**, y era el único
     que no podía cambiar de tema — justamente quien más lo necesita, porque fiscaliza de día en
     la calle y carga de noche.

     Se queda tal cual: el conmutador **ya es sólo la perilla**, sin etiqueta de texto, así que
     ocupa lo que un botón de ícono. No había espacio que ganar escondiéndolo. */
}

@media (prefers-reduced-motion:reduce){
  .tema .perilla,.tema .astro,.tema .rayos{transition:none}
}

/* El aviso de que el tema no se pudo guardar (`T170`): el cambio se aplica en el clic y, si el
   servidor no lo recuerda, vuelve al anterior. Flota sobre texto, así que es **opaco** (**A1**:
   `--cielo-piso` debajo, el tono del aviso encima) y se va con la próxima acción. */
.aviso.aviso-del-tema{
  position:fixed;left:var(--esp-7);right:var(--esp-7);bottom:var(--esp-9);z-index:30;
  max-width:28rem;margin-inline:auto;box-shadow:var(--sombra-panel);
  background-color:var(--cielo-piso);
  background-image:linear-gradient(var(--tono-fondo),var(--tono-fondo));
}
/* 🔒 **T197 — en el teléfono, sobre la barra.** A `--esp-9` del borde quedaba **encima** de la barra de
   pestañas (`z-index` 30 contra 26) y la tapaba. Va colgado de `<body>`, fuera del contenedor `app`,
   así que el corte es el `@media` del armazón, no un `@container`. */
@media (max-width:40rem){
  .aviso.aviso-del-tema{bottom:var(--reserva-inferior-telefono)}
}

/* ── Panel de detalle ───────────────────────────────────────────────────────
   `componentes.css` trae `.detalle`, `.detalle-fila` y `.detalle-total`; el
   resto vivía como CSS local del mockup y sube acá porque ahora lo usa la app. */
.detalle{overflow-y:auto}
/* El destello del traspaso (`.traspasa::after`) es absoluto y necesita un bloque
   contenedor propio, o se posiciona contra `.cuerpo` y tapa la grilla entera.
   Pero sólo hace falta **en escritorio**: bajo 1080 el panel ya es
   `position:absolute` por `formatos.css`, y declararlo acá sin condición se lo
   pisaba —esta hoja carga después— dejando el detalle en el flujo, debajo del
   listado. Es la misma trampa de orden que la ✕; por eso va acotado. */
@container app (min-width:67.5625rem){ .detalle{position:relative} }
.detalle .titulo-acta{font-family:var(--f-titulo);font-weight:var(--peso-negro);
  font-size:var(--fs-cifra);letter-spacing:var(--track-cifra);font-variant-numeric:tabular-nums}
.detalle .emp{font-weight:var(--peso-fuerte);font-size:var(--fs-dato);margin-top:var(--esp-2)}
.detalle .cuit{font-family:var(--f-dato);font-size:var(--fs-menor);color:var(--texto-3)}
.detalle .bloque{display:flex;flex-direction:column;gap:var(--esp-4);
  padding-top:var(--esp-6);border-top:1px solid var(--separador)}
/* El panel mide 268 px: una cifra de 21 px no entra en la misma línea que su
   rótulo, así que el total se apila con el número a la derecha. */
.detalle .detalle-total{flex-direction:column;align-items:stretch;gap:var(--esp-2)}
.detalle .detalle-total .r{text-align:right;font-family:var(--f-titulo);
  font-size:var(--fs-cifra);font-weight:var(--peso-negro);letter-spacing:var(--track-cifra)}
.detalle .acciones{display:flex;gap:var(--esp-4);margin-top:auto;padding-top:var(--esp-6)}
.detalle .acciones .boton{flex:1;justify-content:center}
.detalle .nota-rol{font-size:var(--fs-menor);color:var(--texto-2);line-height:1.5}
.detalle .nota-rol b{color:var(--texto);display:block;margin-bottom:var(--esp-2)}
.detalle .vacio{margin:auto 0;padding:var(--esp-7) 0}

/* El botón de cierre: `formatos.css` lo enciende en tableta y teléfono, donde el
   detalle es una hoja. En escritorio el panel es fijo y no se cierra. */
.detalle-cerrar{display:none;position:absolute;top:var(--esp-5);right:var(--esp-5);
  width:30px;height:30px;place-items:center;border-radius:50%;
  border:1px solid var(--borde);background:var(--superficie);color:var(--texto-2);
  text-decoration:none;font-size:18px;line-height:1}
/* Y se vuelve a encender ACÁ, no sólo en `formatos.css`.
   Esta hoja se carga después que el sistema, así que el `display:none` de arriba
   le ganaba a la regla que lo prende y la ✕ no aparecía nunca: en tableta y
   teléfono el detalle se abría y no había forma de cerrarlo. Repetir la consulta
   en el mismo archivo que declara el estado base saca el orden de carga de la
   ecuación. */
@container app (max-width:67.5rem){ .detalle-cerrar{display:grid} }

/* La agarradera de la hoja de teléfono: la spec la pide y el sistema ya la trae.
   Sólo se ve donde el detalle sube desde abajo. */
.detalle .agarradera{display:none}
@container app (max-width:40rem){ .detalle .agarradera{display:block} }

/* El rótulo de una zona dentro de un panel. Vivía como CSS local del mockup
   (`.tapa .zona`) y sube acá porque lo usan dos pantallas de la app. Es la
   tercera clase que aparece así; por eso el chequeo de huérfanas. */
.tapa .zona{font-weight:var(--peso-fuerte);font-size:var(--fs-dato)}

/* La fila entera es un enlace. El pseudo-elemento lo estira sobre toda la fila
   sin sacar el texto de su celda: así el clic del medio, «abrir en pestaña
   nueva» y el teclado funcionan, cosa que un `onclick` en el `<tr>` no da. */
.enlace-fila{color:inherit;text-decoration:none}
.enlace-fila::after{content:"";position:absolute;inset:0}
.grilla tbody tr{position:relative}

/* ── Pantallas sin panel de detalle ─────────────────────────────────────────
   `.cuerpo` reserva una columna para el detalle. Las pantallas que no lo tienen
   la sueltan, o queda una franja vacía a la derecha. */
.cuerpo--sin-detalle{grid-template-columns:minmax(0,1fr)}

/* La ficha: bloques de datos etiqueta/valor, misma forma que el panel de detalle. */
.ficha{padding:var(--esp-7);display:flex;flex-direction:column;gap:var(--esp-4)}
.ficha h3{font-size:var(--fs-dato);letter-spacing:var(--track-etiqueta);text-transform:uppercase;
  color:var(--texto-3);font-family:var(--f-dato);margin:0 0 var(--esp-3)}
.ficha .sin-datos{color:var(--texto-3);font-size:var(--fs-dato);margin:0}

/* ── Crédito: jerarquía y distancias (revisión del 02/10/2026) ───────────────
   🔑 **Lo que la persona vino a saber va primero y más grande**: cuánto queda por imputar y en
   qué estado está. El saldo es la cifra de la ficha —un escalón por encima del texto de al lado,
   `--fs-cifra-lg`—; la traza (fechas, origen, quién) queda debajo y en tinta de segundo nivel. */
.ficha__saldo{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-3);
  font-size:var(--fs-medio);color:var(--texto-2)}
.ficha__saldo .cifra{font-family:var(--f-titulo);font-size:var(--fs-cifra-lg);
  font-weight:var(--peso-negro);letter-spacing:var(--track-cifra);color:var(--texto);
  font-variant-numeric:tabular-nums}
/* La causa de la cancelación es el hecho principal de un crédito cancelado: tinta plena y
   tamaño de cuerpo, no el gris chico de un `.sub`. */
.ficha__explica{margin:0;font-size:var(--fs-base);line-height:1.5;color:var(--texto)}
/* La resta del libro mayor: el renglón del saldo cierra con una línea y pesa más que los
   términos que lo explican. */
.resumen .resumen__saldo{margin-top:var(--esp-2);padding-top:var(--esp-5);
  border-top:1px solid var(--separador)}
.resumen .resumen__saldo dt{color:var(--texto);font-weight:var(--peso-fuerte)}
.resumen .resumen__saldo dd.resultado{font-size:var(--fs-medio);font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra)}
/* La pestaña de créditos apila aviso, vigentes y agotados con la misma distancia que usa
   `.listado` entre bloques: antes quedaban pegados borde con borde. */
.resumen--del-libro{margin-bottom:0}
.legajo-creditos{display:flex;flex-direction:column;gap:var(--esp-6)}
/* 🔴 **El origen envuelve, con ancho máximo.** Una celda con el crédito devuelto o el reemplazo
   trae un texto y un enlace largos; en `nowrap` empujaban la tabla más allá de la tableta
   (834 px) y la columna Estado quedaba cortada. Se conserva todo el texto: baja de renglón.
   Lo mismo para la causa de cancelación bajo el estado. */
.grilla--creditos td.celda-origen{white-space:normal;min-width:20ch;max-width:30ch;
  overflow-wrap:anywhere}
.grilla--creditos td.celda-origen .sub{display:block;margin-top:var(--esp-1)}
.grilla--creditos td.celda-estado .sub{display:block;white-space:normal;max-width:18ch;
  margin-top:var(--esp-2)}
/* El ajuste: el panel de cierre separa sus bloques con una distancia mayor que la de la ficha
   de datos (`--esp-4`): cada bloque —lo que pasó, la decisión, lo que va a pasar, las
   acciones— es una unidad, y los campos de un mismo bloque se acercan entre sí. */
.ficha--cierre{gap:var(--esp-7)}
.ficha--cierre h3{margin:0}
.ficha--cierre form{display:flex;flex-direction:column;gap:var(--esp-6);margin:0}
.ficha--cierre form[hidden]{display:none}
.ficha--cierre .acciones--panel{margin-top:0}
.ficha--cierre .acciones-fila{align-self:flex-end}
@container app (max-width:40rem){
  .ficha--cierre .acciones-fila{align-self:stretch}
  .ficha--cierre .acciones-fila .boton{flex:1;justify-content:center;min-height:var(--boton-alto-movil)}
}
.cambio{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-4);
  font-size:var(--fs-dato);padding:var(--esp-3) 0;border-bottom:1px solid var(--separador)}
.cambio:last-child{border-bottom:0}
.cambio .fecha{color:var(--texto-3);font-size:var(--fs-menor)}
.cambio .antes{color:var(--texto-3);text-decoration:line-through}
.cambio .flecha{color:var(--texto-3)}
.cambio .despues{font-weight:var(--peso-medio)}
/* «Quién» acompaña a «cuándo»: mismo tono, atrás del resto de la traza (**E7**). */
.cambio .quien{color:var(--texto-3);font-size:var(--fs-menor)}
.cambio .quien::before{content:"· "}
/* El motivo es prosa, no un dato corto como el resto: lleva **su propio renglón**
   (`flex-basis:100%` adentro de un `.cambio` con `wrap`) y envuelve en vez de desbordar. */
.cambio .motivo{flex-basis:100%;color:var(--texto-2);font-size:var(--fs-menor);
  overflow-wrap:break-word}
.cambio .motivo::before{content:"“";color:var(--texto-3)}
.cambio .motivo::after{content:"”";color:var(--texto-3)}

/* La hoja de tarea. En escritorio es una columna angosta centrada: confeccionar
   es **una** tarea, y estirarla a todo el ancho la hace parecer un formulario
   de carga masiva. */
.hoja-tarea{max-width:520px;padding:var(--esp-8);display:flex;flex-direction:column;
  gap:var(--esp-5)}
.hoja-tarea .bloque{display:flex;flex-direction:column;gap:var(--esp-4);
  padding-top:var(--esp-6);border-top:1px solid var(--separador)}
.hoja-tarea .campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-5)}
.hoja-tarea .campo-grupo{display:flex;flex-direction:column;gap:var(--esp-3)}
.hoja-tarea .campo-grupo > span{font-size:var(--fs-menor);font-weight:var(--peso-medio);
  color:var(--texto-2)}
/* La ayuda es un `span` hermano de la etiqueta, y la regla de arriba también la
   alcanza: hay que igualarle la especificidad, no ponerle `!important`. */
.hoja-tarea .campo-grupo > .ayuda{font-size:var(--fs-menor);font-weight:var(--peso-normal);
  color:var(--texto-3);margin:0}
.hoja-tarea .acciones{display:flex;gap:var(--esp-4);justify-content:flex-end;
  margin-top:var(--esp-6)}
.hoja-tarea .plegable{border-top:1px solid var(--separador);padding-top:var(--esp-6)}
.hoja-tarea .plegable summary{cursor:pointer;font-size:var(--fs-dato);color:var(--texto-2)}
.hoja-tarea .mios{margin-top:var(--esp-5)}

/* El aviso: barra de tono a la izquierda, como en los mockups. */
.aviso{display:flex;gap:var(--esp-5);padding:var(--esp-6);border-radius:var(--radio-3);
  border:1px solid var(--tono-borde,var(--borde));background:var(--tono-fondo,var(--superficie));
  font-size:var(--fs-dato);color:var(--texto-2);line-height:1.5;margin:0}
.aviso b{color:var(--texto)}
.aviso .marca-tono{width:3px;border-radius:2px;background:var(--tono,var(--acento));flex:none}
.aviso--sobrio{--tono:var(--texto-3)}
.aviso--error{--tono:var(--estado-intimada);--tono-borde:var(--estado-intimada-borde);
  --tono-fondo:var(--estado-intimada-fondo)}
/* Ámbar y no rojo: el rojo es plazo legal o error del sistema. Un hueco de la parametría
   —meses sin sueldo mínimo cargado— no es ninguna de las dos, pero tampoco puede pasar
   desapercibido: su ausencia se lee como que esos meses están bien. */
.aviso--deuda{--tono:var(--estado-deuda);--tono-borde:var(--estado-deuda-borde);
  --tono-fondo:var(--estado-deuda-fondo)}
.aviso .renglon{display:block;margin-top:var(--esp-2)}

@container app (max-width:40rem){
  .hoja-tarea .campos{grid-template-columns:minmax(0,1fr)}
  .hoja-tarea .acciones{flex-direction:column-reverse}
  .hoja-tarea .acciones .boton{width:100%;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* La grilla de carga: campos dentro de las celdas. Los `input` pierden el alto
   fijo porque una fila de diez columnas a 34 px cada una hace una tabla altísima. */
.grilla--carga td{padding:var(--esp-3) var(--esp-4);vertical-align:top}
.grilla--carga .campo{width:100%;min-width:9ch;height:auto;padding:var(--esp-3) var(--esp-4)}
.grilla--carga .campo--corto{min-width:6ch}
/* T186: el importe tipeado lleva «$ » y miles —«$ 9 999 999,99»—. Sin este piso la columna se
   angostaba a lo que cabía «0,00» y el «$» salía cortado por la izquierda. `ch` es el del propio
   campo, así que sigue a la tipografía; no depende de un ancho escrito a mano. */
.grilla--carga .campo[data-importe]{min-width:calc(13ch + var(--esp-4) * 2 + 2px)}
/* El depósito y su fecha comparten celda: eran dos columnas y la segunda se leía como una
   tercera cosa. Van apilados, con la fecha más chica — es el acompañamiento del importe.
   🔴 El contenedor no es decorativo: dos `<input>` al 100 % en la misma celda son elementos en
   línea, se ponen uno al lado del otro y desbordan sobre la columna de al lado. */
.grilla--carga .apilado{display:flex;flex-direction:column;gap:var(--esp-2)}
.grilla--carga .campo--fecha{font-size:var(--fs-etiqueta);color:var(--texto-2)}
/* 🔴 **Los campos de plata se tipean a la derecha**, igual que se leen. Si no, la mitad de la
   tabla queda alineada a un borde y la otra mitad al otro, con los rótulos —que siguen a las
   columnas calculadas— en la punta contraria a lo que se está escribiendo. Es el mismo defecto
   que en la tabla del acta, con una vuelta más: acá el valor lo escribe el usuario. */
.grilla--carga .campo{text-align:right}
.grilla--carga .campo[type="date"]{text-align:left}
/* El resultado no se edita: se lee. Distinto peso para que no se confunda con
   una celda vacía que alguien tiene que llenar. */
.grilla--carga .resultado{font-family:var(--f-titulo);font-weight:var(--peso-fuerte);
  color:var(--texto)}
/* El aporte anticipado por el navegador **no es el número del sistema**, y tiene que verse que
   no lo es: mientras dice un valor estimado se apaga y se marca en itálica, y vuelve a su peso
   normal cuando el servidor lo confirma al guardar. */
.grilla--carga .resultado[data-estimado]{color:var(--texto-2);font-style:italic;
  font-weight:var(--peso-medio)}
.grilla--carga tbody tr{cursor:default;background-image:none}
.listado > .ayuda{font-size:var(--fs-menor);color:var(--texto-3);margin:0}

/* ── Stock de numeración ────────────────────────────────────────────────────
   Pestañas por tipo: son numeraciones legales independientes y no se mezclan. */
.pestanas-tipo{display:flex;gap:var(--esp-3);flex-wrap:wrap}
.chip-tipo{text-decoration:none;font:var(--peso-medio) var(--fs-menor)/1 var(--f-texto);
  padding:8px 14px;border-radius:var(--radio-pastilla);border:1px solid var(--borde);
  background:var(--superficie);color:var(--texto-2)}
.chip-tipo:hover{color:var(--texto);border-color:var(--borde-vivo)}
.chip-tipo[aria-current="page"]{background:var(--superficie-activa);color:var(--texto);
  border-color:var(--borde-vivo)}

.totales--cuatro{grid-template-columns:repeat(auto-fill,minmax(max(10rem,calc((100% - 3 * var(--esp-5)) / 4 - .5px)),1fr))}
/* La única tarjeta que puede ir en color de alerta, y no porque sea urgente:
   porque no cuenta números, cuenta personas que no pueden trabajar. */
.total--alerta{border-color:var(--estado-intimada-borde);background:var(--estado-intimada-fondo)}
.total--alerta .valor,.total--alerta .etiqueta{color:var(--estado-intimada)}
.total .unidad{font-family:var(--f-texto);font-size:var(--fs-menor);font-weight:var(--peso-medio);
  letter-spacing:0}
/* 🔴 **La pastilla de estado dentro de una tarjeta decía «Condeuda».** `.total .valor` aplica
   `--track-cifra`, que es **-.035em**: un tracking pensado para que una cifra grande no se
   desarme, y que sobre texto corriente se come el espacio entre palabras. La pastilla no es una
   cifra — es texto — así que recupera el suyo. */
.total .valor .estado{letter-spacing:normal;font-family:var(--f-texto)}
/* La situación de la empresa (T125) es el dato principal de su tarjeta: la píldora sube de
   `--fs-etiqueta` a `--fs-medio`, con el relleno que le corresponde a ese cuerpo, y la acción
   —`.mini`— queda debajo, separada del dato y alineada al comienzo. Todo de `tokens.css`. */
.total--situacion .valor .estado{
  font-size:var(--fs-medio);gap:var(--esp-4);padding:var(--esp-2) var(--esp-6) var(--esp-2) var(--esp-5);
}
.total--situacion .valor .estado i{width:7px;height:7px}
.total--situacion .accion-discreta{margin-top:var(--esp-6)}

/* El estado del número es una etiqueta de texto, no una pastilla de color: los
   cinco estados no tienen semántica de alerta como los del acta — son etapas de
   un ciclo, no situaciones a atender. */
.marca-estado{font-family:var(--f-dato);font-size:var(--fs-menor);color:var(--texto-2)}
.marca-estado--usado,.marca-estado--anulado{color:var(--texto-3)}
.marca-estado--asignado{color:var(--acento)}

/* La única ayuda que puede ir en tono de alerta: no avisa de un error de tipeo, avisa de
   que ese inspector hoy no puede confeccionar actas. Es información sobre el mundo, no
   sobre el formulario. */
.hoja-tarea .campo-grupo > .ayuda--alerta{color:var(--estado-intimada)}

/* ── Carga de numeración ────────────────────────────────────────────────────
   La tanda se arma en pantalla y se guarda entera al final. Nada se escribe en la
   base hasta confirmar, así que la lista de acá es la única prueba de lo que se
   lleva tipeado: tiene que leerse contra el papel sin esfuerzo. */
.fila-etiqueta{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-5);
  flex-wrap:wrap}
.fila-etiqueta > span:first-child{font-size:var(--fs-menor);font-weight:var(--peso-medio);
  color:var(--texto-2)}
.campo--corto{max-width:22ch}

/* Un valor editable **dentro de la celda de una grilla**: el campo y su botón (**T109**).
   🔴 Sin esto el par no cabe y el botón se dibuja **fuera de la celda**, encima de la columna
   siguiente — medido: 59 px de desborde en escritorio y en tableta, en los seis parámetros.
   El campo cede primero (`flex:1 1 6ch`, y el `max-width` de arriba le sigue poniendo techo) y,
   cuando ni así entran, el botón baja de renglón en vez de irse al costado. */
.dato-editable{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4)}
.dato-editable .campo{flex:1 1 6ch;min-width:0}

/* La descripción de un parámetro, **debajo del nombre y con medida** (**T109**).
   🔴 Iba en el mismo renglón y sin tope: «Interés financiero del plan de pago, en porcentaje.
   Flat sobre el total financiado (P3). No es la mora de ARCA.» estiraba la primera columna
   hasta empujar **Valor** y **Último cambio** fuera de la pantalla en tableta — la tabla entra
   en `.desplazable` y se iba de corrido a la derecha. Apilada y acotada a 52ch, las tres
   columnas entran. */
.grilla--parametros td .sub{display:block;max-width:52ch;margin-top:var(--esp-2)}

/* 🔴 **Los dos bloques de tarea del calendario tomaban el ancho de su contenido** (**T109**),
   o sea unos 520 px dentro de un panel de 1.000: al lado del listado, que sí va de borde a
   borde, se leían como piezas de otra pantalla. `.hoja-tarea` se dimensiona así porque nació
   para una hoja de tarea suelta; acá está **anidada** y tiene que acompañar al panel. */
/* 🔴 **Las subsecciones del calendario se tocaban** (**T109**, segunda vuelta). `.panel` es un
   bloque con relleno propio y **sin `gap`**: los dos bloques de tarea quedaban a 0 px uno del
   otro y de la tabla, y el aviso a 0 px de la paginación — medido en los tres formatos. Con
   fondo y borde cada uno, «pegado» se lee como «encimado».

   Va acotado al calendario y no a `.panel`: los paneles de tabla del resto del portal —actas,
   empresas, planes— tienen un solo hijo después de la tapa y un `gap` global les movería el
   listado sin que nadie lo haya pedido. */
.calendario{display:flex;flex-direction:column;gap:var(--esp-8)}

/* 🔴 **Entre estirarse y encogerse, ninguna de las dos** (**T109**, dos vueltas).
   Al 100 % las tres columnas dejaban huecos de 300 px entre un dato y el siguiente. Achicada a
   su contenido pasó lo contrario: 290 px de tabla dentro de un panel de 1.000, un bloque chico
   perdido en el aire.

   La tabla ocupa el ancho y **la columna de la tasa se queda con el sobrante**: las dos fechas
   miden lo que miden y quedan ancladas a la derecha. No hay hueco porque no hay nada flotando
   en el medio — el período es un bloque contra el borde, como en la tarjeta del teléfono. */
.grilla--tramos{width:100%}
.grilla--tramos td.celda-tasa,.grilla--tramos th:first-child{width:100%}
.grilla--tramos td.celda-desde,.grilla--tramos td.celda-hasta,
.grilla--tramos th:not(:first-child){white-space:nowrap;text-align:right}

/* El historial, con jerarquía (**T109**, segunda vuelta). Eran tres columnas de dígitos
   monoespaciados del mismo cuerpo: se leía como una planilla exportada, no como el calendario
   con el que el sistema calcula la mora.

   La tasa es lo que se viene a leer —la fecha es el índice—, así que va primera, en cuerpo de
   cifra y con el tono del texto fuerte. Las dos fechas se quedan en el monoespaciado del dato,
   que es lo que hace que una columna de fechas se compare de un vistazo. */
.grilla--tramos td.celda-tasa{display:flex;align-items:center;gap:var(--esp-5);
  white-space:nowrap}
.grilla--tramos .tasa{font-size:var(--fs-medio);font-weight:var(--peso-negro);
  letter-spacing:-.02em;color:var(--texto);font-variant-numeric:tabular-nums}
/* El tramo abierto es el único que importa para calcular hoy, y el único corregible: se marca
   una vez, acá, y por eso la columna «Hasta» puede decir «sin fin» sin explicar nada más. */
.grilla--tramos tbody tr:not(.fila--mirar) .tasa{color:var(--acento)}

/* La suma fija por afiliado (**T226**, **C66**): el mismo molde que los tramos de ARCA. El panel apila sus
   bloques con el aire del calendario; la tabla ocupa el ancho y **«Último cambio» se queda con el
   sobrante** (lleva un motivo, que puede ser largo); el monto y las dos fechas miden lo que miden. */
.suma-fija{display:flex;flex-direction:column;gap:var(--esp-8)}
.grilla--suma-fija{width:100%}
.grilla--suma-fija td.celda-monto,.grilla--suma-fija td.celda-desde,.grilla--suma-fija td.celda-hasta,
.grilla--suma-fija th:not(:last-child){white-space:nowrap}
.grilla--suma-fija td.celda-cambio,.grilla--suma-fija th:last-child{width:100%;text-align:left}
.grilla--suma-fija td.celda-cambio .sub{display:block;max-width:60ch;margin-top:var(--esp-2)}
.grilla--suma-fija .monto{font-size:var(--fs-medio);font-weight:var(--peso-negro);
  letter-spacing:-.02em;color:var(--texto);font-variant-numeric:tabular-nums}
.grilla--suma-fija td.celda-monto .estado{margin-left:var(--esp-5)}
.grilla--suma-fija tbody tr:not(.fila--mirar) .monto{color:var(--acento)}

.panel > .hoja-tarea{max-width:none}
.panel > .hoja-tarea .campos-en-fila{flex-wrap:wrap}
.cuenta-tanda{font-family:var(--f-titulo);font-weight:var(--peso-negro);font-size:var(--fs-cifra);
  letter-spacing:var(--track-cifra);line-height:1;color:var(--texto)}
/* Alto acotado y scroll propio: una tanda de cuarenta números no puede empujar el
   botón de guardar fuera de la pantalla. */
.tanda{display:flex;flex-direction:column;gap:var(--esp-2);max-height:212px;overflow-y:auto;
  border:1px solid var(--borde);border-radius:var(--radio-3);padding:var(--esp-3);
  background:var(--superficie)}
.tanda-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-5);
  padding:var(--esp-4) var(--esp-5);border-radius:var(--radio-2);
  background:var(--superficie-alta);font-size:var(--fs-dato)}
/* El recién agregado va arriba y va marcado: es el que se está comparando contra el
   papel en ese momento. */
.tanda-fila:first-child{border:1px solid var(--borde-vivo)}
.tanda-vacia{padding:var(--esp-8) var(--esp-6);text-align:center;color:var(--texto-3);
  font-size:var(--fs-dato);line-height:1.6;margin:0}
.quitar{appearance:none;border:0;background:none;cursor:pointer;color:var(--texto-3);
  font-size:var(--fs-dato);line-height:1;padding:var(--esp-3);border-radius:var(--radio-1);
  min-width:var(--tactil-min);min-height:28px;
  transition:color var(--dur-corta) var(--curva-salida),background var(--dur-corta) var(--curva-salida)}
.quitar:hover,.quitar:focus-visible{color:var(--estado-intimada);
  background:var(--estado-intimada-fondo)}

@container app (max-width:67.5rem){ .totales--cuatro{grid-template-columns:repeat(2,minmax(0,1fr))} }

@container app (max-width:40rem){
  /* La grilla de numeración necesita SU propio mapa de tarjeta.
     `formatos.css` reordena la grilla en tarjetas con las áreas de la tabla de
     actas —siete columnas: num · empresa · cuit · período · estado · total ·
     vence—. Numeración tiene cinco y otro significado, así que heredarlas dejaba
     «Asignado» ocupando el ancho completo y la fecha de uso arriba a la derecha.
     La spec pide: N.º y estado arriba, inspector y fechas abajo. */
  .grilla--numeracion tbody tr{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"numero estado" "inspector inspector" "asignado usado";
  }
  .grilla--numeracion tbody td:nth-child(1){grid-area:numero;font-size:var(--fs-medio);
    font-weight:var(--peso-fuerte)}
  .grilla--numeracion tbody td:nth-child(2){grid-area:estado;justify-self:end}
  .grilla--numeracion tbody td:nth-child(3){grid-area:inspector;margin:var(--esp-2) 0 var(--esp-3)}
  .grilla--numeracion tbody td:nth-child(4){grid-area:asignado;font-size:var(--fs-etiqueta)}
  .grilla--numeracion tbody td:nth-child(5){grid-area:usado;justify-self:end;
    font-size:var(--fs-etiqueta)}
  /* Sin rótulo, dos fechas sueltas no se distinguen. */
  .grilla--numeracion tbody td:nth-child(4)::before{content:"Asignado ";color:var(--texto-3)}
  .grilla--numeracion tbody td:nth-child(5):not(.sin-uso)::before{content:"Usado ";color:var(--texto-3)}
  .grilla--numeracion tbody td:nth-child(7)::before{content:none}

  /* La tanda muestra hasta cuatro en teléfono (la spec), no ocho. */
  .tanda{max-height:184px}
}


/* ── El conmutador con corredera ────────────────────────────────────────────
   Tema, formato y vista son **la misma elección**: dos opciones, una activa. Un
   solo componente para las tres, y el fondo no salta de un lado al otro — se
   desliza. El recorrido es lo que dice de dónde venía la selección; sin él, dos
   estados distintos se ven iguales en el instante del cambio.

   Acá las opciones son **enlaces** y no botones: la vista se elige por GET y se
   recuerda en cookie (ver `interno/views.py :: _vista_de_la_nomina`), así que
   cada mitad tiene que ser copiable, con historial y con botón de volver. El
   componente no distingue: estila `a` y `button` por igual.

   ⚠️ **Sin JavaScript no hay corredera**, y sin nada más el activo no se
   distinguiría. `portal.js` marca el contenedor con `data-corredera` cuando
   llega a colocarla; hasta entonces —y para siempre, si el script no corre— el
   activo lleva la pastilla de acento puesta directamente. Se pierde el
   recorrido, no la información. */
.conmutador{position:relative;display:inline-flex;padding:3px;
  border-radius:var(--radio-pastilla);
  background:var(--superficie);border:1px solid var(--borde)}
.conmutador > a,
.conmutador > button{
  position:relative;z-index:1;
  appearance:none;border:0;background:transparent;color:var(--texto-2);cursor:pointer;
  text-decoration:none;text-align:center;
  font:var(--peso-fuerte) var(--fs-menor)/1 var(--f-texto);
  padding:9px 15px;border-radius:var(--radio-pastilla);white-space:nowrap;
  transition:color var(--dur-media) var(--curva-salida),transform var(--dur-corta) var(--curva-salida);
}
/* 🔴 **El hover es sólo para la opción que NO es la elegida** (28/09/2026). En pantalla táctil
   el `:hover` se dispara al tocar y queda pegado hasta el próximo toque —no hay puntero que se
   retire—, así que si esta regla alcanzara a la activa le pisaría `--acento-tinta` con `--texto`
   encima del propio fondo de acento: letra blanca sobre la píldora verde agua en tema nocturno,
   o letra oscura sobre la azul en diurno — el defecto que reportó el dueño de producto. El
   `:not()` la saca del alcance sin pelear de especificidad, y `hover:hover` la saca del todo en
   táctil, donde no hay hover de verdad, sólo el pegado. */
@media (hover:hover){
  .conmutador > a:not([aria-current="page"]):not([aria-pressed="true"]):hover,
  .conmutador > button:not([aria-current="page"]):not([aria-pressed="true"]):hover{color:var(--texto)}
}
/* Se hunde al presionarla (T117c): la opción es chica y aislada, así que lleva el escalón de chip.
   La corredera no la acompaña —la mueve `portal.js` con un `transform` en línea—; lo que se hunde
   es el rótulo, y basta para leer que el toque entró. */
.conmutador > a:active,
.conmutador > button:active{transform:scale(var(--escala-presion-chip))}
/* La activa: `--acento-tinta` en todo estado. El `:not()` de arriba ya la deja afuera del hover
   genérico, pero estas reglas quedan explícitas —y no sólo implícitas por exclusión— porque son
   lo que un test de CSS puede verificar sin interpretar la cascada: la letra sobre la píldora de
   acento nunca es `--texto`, ni pegada, ni con el foco puesto, ni recién clickeada. */
.conmutador > [aria-pressed="true"],
.conmutador > [aria-current="page"],
.conmutador > [aria-pressed="true"]:hover,
.conmutador > [aria-current="page"]:hover,
.conmutador > [aria-pressed="true"]:focus-visible,
.conmutador > [aria-current="page"]:focus-visible,
.conmutador > [aria-pressed="true"]:active,
.conmutador > [aria-current="page"]:active,
.conmutador > [aria-pressed="true"]:visited,
.conmutador > [aria-current="page"]:visited{color:var(--acento-tinta)}
/* El foco no lo tapa la corredera: por eso el desplazamiento del contorno. */
.conmutador > a:focus-visible,
.conmutador > button:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.conmutador:not([data-corredera]) > [aria-pressed="true"],
.conmutador:not([data-corredera]) > [aria-current="page"]{
  background:var(--acento);box-shadow:var(--sombra-control)}
/* La corredera la crea `portal.js` y se mide del botón activo, no de constantes:
   la cuenta de meses vive **adentro** del rótulo, así que el ancho cambia solo. */
.conmutador .corredera{
  position:absolute;top:3px;left:3px;height:calc(100% - 8px);width:0;
  border-radius:var(--radio-pastilla);background:var(--acento);
  box-shadow:var(--sombra-control);pointer-events:none;
  transition:transform var(--dur-media) var(--curva-salida),
             width var(--dur-media) var(--curva-salida);
}
/* La primera colocación no viaja: nace donde le toca. Sin esto la corredera
   entra deslizándose desde el borde izquierdo en cada carga de página. */
.conmutador .corredera.sin-viaje{transition:none}

/* ── Nómina de CUILes ───────────────────────────────────────────────────────
   Dos vistas sobre los mismos datos, y elige el inspector: «Para revisar» lista
   lo que hay que resolver y «Toda la nómina» la declaración completa.
   Spec de construcción: `diseno/pantallas/interno/06b-nomina-especificacion.md`;
   referencia ejecutable: `diseno/mockups/nomina-de-cuiles.html`. */

/* ⚠️ **No se llama `.pestanas`.** Ese nombre ya es la barra inferior del teléfono
   (`componentes.css` + `formatos.css`), que está `display:none` hasta 640 px:
   reusarlo dejaba el conmutador invisible en escritorio. */
.conmutador--vista{align-self:flex-start}
@container app (max-width:40rem){
  /* Dos mitades iguales: con anchos distintos la corredera se lee como si una
     opción pesara más. Y «empleados» es lo primero que sobra cuando aprieta. */
  .conmutador--vista{display:flex;align-self:stretch}
  .conmutador--vista > a{flex:1 1 0;padding:9px var(--esp-4);min-width:0}
  .conmutador--vista .larga{display:none}
}

/* ── El legajo de empresa ───────────────────────────────────────────────────
   El mismo conmutador, pero con **cinco** secciones en vez de dos, y eso cambia
   qué hacer cuando no entran: repartir el ancho en cinco da pastillas de setenta
   píxeles donde no se lee nada. Acá se **desplaza en horizontal** y cada opción
   conserva su ancho natural. La barra de desplazamiento se oculta porque el
   recorte sobre el borde ya dice que hay más. */
.conmutador--legajo{max-width:100%}
@container app (max-width:53rem){ /* 848 px a 16 px de base; en `rem` para que el texto grande también lo desplace (T171). Era 47,5 rem (760): con la octava pestaña —«Requerimientos · N», T129— el carril se desbordaba 14 px a 834 */
  .conmutador--legajo{display:flex;align-self:stretch;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .conmutador--legajo::-webkit-scrollbar{display:none}
  /* Gana al `flex:1 1 0` de `.conmutador--vista`: acá el ancho lo pone el rótulo. */
  .conmutador--legajo > a{flex:0 0 auto}
  .conmutador--legajo .larga{display:none}
}

/* Las pestañas de «Actas · Ajustes · Borradores» (T171): con el texto agrandado no entran en el ancho
   del teléfono y se pisaban («Ajustes · 0Borradores»). Como en el legajo, se desplazan y cada una
   conserva el ancho de su rótulo; con el texto por defecto entran enteras y nada cambia. */
@container app (max-width:40rem){
  .conmutador--vista:not(.conmutador--legajo){max-width:100%;overflow-x:auto;scrollbar-width:none}
  .conmutador--vista:not(.conmutador--legajo)::-webkit-scrollbar{display:none}
  .conmutador--vista:not(.conmutador--legajo) > a{min-width:max-content}
}

/* La ficha de datos **no es una pestaña**: acompaña a la banda de identidad y está
   siempre a la vista. Como está siempre, no puede costar siete renglones de alto:
   sus filas se acomodan en columnas mientras entren, y vuelven a una sola cuando
   no. El ancho mínimo es el de «Localidad» con una provincia larga al lado. */
.ficha--identidad{display:grid;gap:var(--esp-3) var(--esp-7);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18.75rem),1fr));align-items:start}
.ficha--identidad h3{grid-column:1/-1}

/* Los dos listados del legajo son `<form>` sólo para que la paginación lleve la
   pestaña puesta; sin esto perderían la pinta de panel que tenían como `<div>`. */
form.desplazable{margin:0}

/* El motivo de un botón inerte, cuando el botón vive en la cabecera. Cae en su
   propio renglón —`.cabecera__pagina` ya envuelve— en vez de pelear por el hueco
   con el título. */
.cabecera__pagina .ayuda{flex:1 1 100%;margin:0}
/* 🔀 **Los motivos van debajo de la fila de botones** (T209, **B10**). Los botones llevan `order:2`
   y la ayuda el 0 implícito, así que el motivo subía por encima y la primaria se movía según el
   estado de la empresa. Con `order:3` la fila queda quieta y lo que crece, crece hacia abajo.
   Se lee, así que va en `--texto-2` (**B9**). Los motivos juntos van en un solo párrafo, cada uno
   en su `<span>`, uno detrás de otro. */
.cabecera__pagina .ayuda{order:3;color:var(--texto-2)}
.cabecera__pagina .ayuda b{color:var(--texto)}

/* ── Progreso de la tanda ───────────────────────────────────────────────────
   Cuánto falta, en una línea. El riel se ilumina cuando cierra la tanda: es el
   único momento en que el estado cambia y no lo cuenta ninguna otra pieza. */
.progreso{display:flex;align-items:center;gap:var(--esp-6)}
.progreso .texto{font-size:var(--fs-menor);color:var(--texto-2);white-space:nowrap}
.progreso .texto b{color:var(--texto)}
.riel{flex:1;height:3px;border-radius:2px;background:var(--separador);overflow:hidden;
  transition:box-shadow var(--dur-media) var(--curva-salida)}
.riel i{display:block;height:100%;background:var(--acento);border-radius:2px;
  transition:width var(--dur-larga) var(--curva-salida)}
.riel[data-lleno]{box-shadow:0 0 10px -1px var(--acento)}

/* ── La tarjeta de mes (vista «Para revisar») ───────────────────────────────
   Una de 1.220 px no tiene centro de atención y deja mil píxeles entre la cifra
   que decide y el botón que la aplica. **Una sola por fila**: dos decisiones
   lado a lado invitan a comparar y barrer. */
.lista{display:flex;flex-direction:column;gap:var(--esp-7)}
.tarjeta{border:1px solid var(--borde);border-radius:var(--radio-panel);
  background:var(--superficie-alta);padding:var(--esp-8);max-width:860px}
/* La regla ámbar dice «acá hay algo que resolver». */
.tarjeta[data-marcada="si"]{box-shadow:inset 3px 0 0 var(--aviso-marca)}

/* El CUIL va **primero**: identifica a la persona, y el mes es su coordenada. */
.tapa-tarjeta{display:flex;align-items:baseline;gap:var(--esp-5);flex-wrap:wrap;
  margin-bottom:var(--esp-5)}
.tapa-tarjeta .cuil{font-family:var(--f-dato);font-size:var(--fs-base);
  font-weight:var(--peso-fuerte);letter-spacing:.01em}
.tapa-tarjeta .tipo{font-size:var(--fs-menor);color:var(--texto-2)}
.tapa-tarjeta .mes{font-family:var(--f-titulo);font-weight:var(--peso-fuerte);
  font-size:var(--fs-base);color:var(--texto-2);margin-left:auto}

/* Por qué está marcado, en texto: las dos ramas de C21 son argumentos distintos
   y antes producían tarjetas idénticas. */
.motivo{margin:0 0 var(--esp-7);font-size:var(--fs-menor);color:var(--texto);
  display:flex;gap:var(--esp-4);align-items:flex-start}
.motivo .punto{width:6px;height:6px;border-radius:50%;background:var(--aviso-marca);
  margin-top:6px;flex:none}

/* El cuerpo se parte en dos: a la izquierda lo que hay que decidir, a la derecha
   lo que ayuda a decidirlo. */
.cuerpo-tarjeta{display:grid;gap:var(--esp-8) var(--esp-10);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(190px,240px);margin-bottom:var(--esp-8)}

/* ── `.par` — el corazón de la pantalla ─────────────────────────────────────
   Tres bloques y no una fila que se acomoda sola: **lo declarado**, **el salto**
   y **lo sugerido**. Los de los costados se van a los bordes y el del medio queda
   centrado en el aire que sobra, que es lo que lo hace leer como salto.

   Sobre cada remuneración va el aporte que le corresponde —el pagado sobre lo
   declarado, el que debió ser sobre lo sugerido—, así que la asociación es
   vertical y directa. Y la diferencia va **en el medio**, no encima del sugerido:
   es lo que separa un número del otro; encima de uno se lee como atributo suyo. */
.par{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:end;gap:var(--esp-6)}
.par .lado{display:flex;flex-direction:column;gap:2px;min-width:0}
/* ⚠️ `nowrap` en toda cifra: una columna `max-content` al lado de una `1fr` se
   deja apretar hasta su min-content, y el min-content de `$ 450.000,00` es
   partirlo por el espacio. Un importe es **un solo dato**. */
.par .apoyo{font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.par .apoyo b{color:var(--texto);font-weight:var(--peso-fuerte)}
.par .apoyo .que{color:var(--texto-3);text-transform:uppercase;letter-spacing:var(--track-rotulo);
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);margin-right:var(--esp-3)}
/* Cuando el aporte pagado ya alcanza no hay línea que poner, pero el rótulo
   «Sugerido» tiene que seguir alineado con «Declarado». */
.par .apoyo--hueca{height:1em}
.par .rotulo{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:var(--track-rotulo);
  color:var(--texto-2);font-weight:var(--peso-fuerte);margin-top:var(--esp-3)}
/* Los dos montos al mismo cuerpo, peso y color: la decisión no es «¿acepto este
   número?» sino «¿cuál de los dos entra al acta?». Destacar uno sería elegir por
   el inspector — y por eso tampoco lleva `--acento`, que acá significa «lo tuyo». */
.par .monto{font-family:var(--f-titulo);font-size:var(--fs-cifra);
  font-weight:var(--peso-negro);letter-spacing:var(--track-cifra);
  font-variant-numeric:tabular-nums;color:var(--texto);white-space:nowrap}
.par .flecha{color:var(--texto-3);font-size:var(--fs-medio);padding-bottom:3px}
.par .entre{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding-bottom:3px;justify-self:center}
/* Porcentaje arriba, pesos abajo: apilada, la columna del medio mide 76 px en vez
   de 133 y le deja el ancho a las dos cifras que compara. */
.par .salto{font-family:var(--f-dato);font-size:var(--fs-etiqueta);
  color:var(--texto-2);font-variant-numeric:tabular-nums;text-align:center;
  line-height:1.35}
.par .salto b{display:block;color:var(--texto);font-weight:var(--peso-fuerte)}
.par .salto i{display:block;font-style:normal;white-space:nowrap}

/* El contexto: el mínimo del mes y, sólo cuando difiere de la sugerencia, qué
   sueldo implica el aporte pagado. En la rama «acorde» los dos números coinciden
   y la nota sobra; en la rama «minimo» explica por qué no se sugiere el acorde. */
.contexto{display:grid;gap:var(--esp-5);margin:0;padding-left:var(--esp-8);
  border-left:1px solid var(--separador)}
.contexto div{display:flex;justify-content:space-between;gap:var(--esp-6)}
.contexto dt{color:var(--texto-2);font-size:var(--fs-menor)}
.contexto dd{margin:0;font-family:var(--f-dato);font-size:var(--fs-dato);
  color:var(--texto-2);font-variant-numeric:tabular-nums}
.contexto .nota{display:block;margin:0;font-size:var(--fs-menor);color:var(--texto-3);
  line-height:1.4}
.contexto .nota b{color:var(--texto-2)}

@container app (max-width:40rem){
  .cuerpo-tarjeta{grid-template-columns:minmax(0,1fr);gap:var(--esp-7)}
  .contexto{padding-left:0;border-left:0;
    border-top:1px solid var(--separador);padding-top:var(--esp-6)}
  /* Los tres bloques se apilan y el del medio se corre al centro. Apilados no hay
     nada que alinear: el hueco sería un renglón vacío y nada más. */
  .par{grid-template-columns:minmax(0,1fr);gap:var(--esp-8);justify-items:start}
  .par .apoyo--hueca{display:none}
  .par .entre{flex-direction:row;align-items:baseline;gap:var(--esp-4);
    padding:0;justify-self:center}
  .par .salto{display:flex;gap:var(--esp-3)}
  .par .salto b,
  .par .salto i{display:inline}
  /* Apilada, la flecha apunta hacia abajo: horizontal cuelga al costado del
     declarado sin unir nada. */
  .par .flecha{transform:rotate(90deg);padding:0}
}

/* ── La decisión: dos salidas equivalentes ──────────────────────────────────
   ⚠️ **Ninguna de las dos es «la correcta»** y la pantalla no puede sugerir que
   lo sea. Mantener un sueldo bajo el mínimo es tan normal como corregirlo —puede
   ser vacaciones, licencia o una pasantía— y es la decisión del inspector, no
   nuestra (**C22**).

   `flex:1 1 0` iguala los dos **por geometría**, no por buena voluntad: midan lo
   que midan los importes, ocupan lo mismo. Y los dos llevan el monto que
   comprometen. */
.decision{display:flex;gap:var(--esp-6);margin:0}
.decision .boton--par{
  flex:1 1 0;background:var(--superficie-hover);color:var(--texto);
  border-color:var(--borde-fuerte);font-weight:var(--peso-fuerte);
  padding:0 var(--esp-6);box-shadow:var(--sombra-control);
}
/* ⚠️ El hover **no** usa `--borde-vivo`: ese token es el acento del tema, y encender
   «Adoptar» en color de endoso justo antes del clic reintroduce por la ventana el empuje
   que sacamos por la puerta. Los dos suben igual, en neutro. */
.decision .boton--par:hover{border-color:var(--texto-3);background:var(--superficie-activa)}
@container app (max-width:40rem){
  /* ⚠️ En 390 px los dos botones **no entran** en fila: `.boton` es `nowrap`, así que
     `flex:1 1 0` no los puede achicar por debajo de su texto y el segundo se corta. */
  .decision{flex-direction:column}
}

/* ── Vista «Toda la nómina»: un desplegable por CUIL ────────────────────────
   Doce meses por doce personas son ciento cuarenta y cuatro filas. **La pantalla
   abre con todos los CUILes plegados**: plegada contesta primero a quién le falta,
   y el detalle se pide. */
.persona{border:1px solid var(--borde);border-radius:var(--radio-panel);
  background:var(--superficie-alta);overflow:hidden}
.persona > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--esp-6);
  padding:var(--esp-7) var(--esp-8);transition:background var(--dur-corta) var(--curva-salida);
}
/* El marcador nativo se va, pero sigue siendo un `<summary>`: navegable y anunciable. */
.persona > summary::-webkit-details-marker{display:none}
.persona > summary:hover{background:var(--superficie-hover)}
.persona > summary:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
.persona .chevron{width:16px;height:16px;flex:none;color:var(--texto-3);
  transition:transform var(--dur-media) var(--curva-salida)}
.persona[open] .chevron{transform:rotate(90deg)}
/* ⚠️ `nowrap` en el CUIL: es **un solo dato**, y partido en tres líneas deja de ser
   legible como documento. En teléfono, en vez de apretarlo, se baja lo demás a un
   segundo renglón. */
.quien{display:flex;flex:1;align-items:baseline;gap:var(--esp-6);min-width:0}
.persona summary .cuil{font-family:var(--f-dato);font-weight:var(--peso-fuerte);
  font-size:var(--fs-base);white-space:nowrap}
/* ⚠️ No se llama `.detalle`: ése es el panel lateral del armazón, que es
   `overflow-y:auto` y en teléfono una hoja que entra desde abajo. */
.persona summary .datos{display:flex;flex:1;align-items:baseline;gap:var(--esp-6);min-width:0}
.persona summary .tipo{font-size:var(--fs-menor);color:var(--texto-2);white-space:nowrap}
/* Los tres estados del resumen plegado. ⚠️ **«Sin sugerencias» no va en verde**: no es
   un logro del inspector, y el «✓ Revisado» sí. Por eso no comparten color. */
.persona summary .cuenta{margin-left:auto;font-size:var(--fs-menor);
  font-family:var(--f-dato);color:var(--texto-2);white-space:nowrap}
.persona summary .cuenta--marcada{color:var(--aviso)}
.persona summary .cuenta--revisado{color:var(--estado-sin);font-weight:var(--peso-fuerte)}
.cuerpo-persona{border-top:1px solid var(--separador)}
@container app (max-width:40rem){
  .quien{flex-direction:column;align-items:flex-start;gap:var(--esp-2)}
  .persona summary .datos{flex:none;gap:var(--esp-4)}
  .persona summary .cuenta{margin-left:0}
  .persona summary .cuenta::before{content:"· ";color:var(--texto-3)}
}

/* ── La barra de desplazamiento ─────────────────────────────────────────────
   Entre ~640 y ~960 px de marco la tabla no entra y se desplaza en horizontal —a
   propósito: se conserva la tabla en vez de convertirla en tarjetas—. La barra
   sale de los tokens: la del sistema operativo es más gruesa y de otro color en
   cada tema. Se declaran las dos formas: `scrollbar-*` es lo estándar y gana en
   Chromium moderno; `::-webkit-` cubre los que todavía no la soportan. */
.desplazable{scrollbar-width:thin;scrollbar-color:var(--borde-fuerte) transparent}
.desplazable::-webkit-scrollbar{height:8px}
.desplazable::-webkit-scrollbar-track{background:transparent}
.desplazable::-webkit-scrollbar-thumb{background:var(--borde-fuerte);
  border-radius:var(--radio-pastilla);border:2px solid transparent;
  background-clip:content-box}
.desplazable::-webkit-scrollbar-thumb:hover{background:var(--texto-2);
  border:2px solid transparent;background-clip:content-box}
/* Adentro del desplegable el marco ya lo pone la persona. */
.cuerpo-persona .desplazable{border:0;border-radius:0;background:transparent}

/* ── La tabla de la nómina ──────────────────────────────────────────────────
   🔒 **No es `.grilla`.** La grilla del listado se convierte en tarjetas con el mapa
   de la tabla de actas (`formatos.css`), que tiene otras columnas y otro significado:
   heredarlo pintaba el mínimo del mes como si fuera el total del acta y rotulaba un
   importe con la palabra «Vence». La nómina tiene su propio mapa, más abajo.

   **Diez `<th>`, siete visibles.** El orden del DOM es el de la tabla de escritorio y
   no cambia nunca; en teléfono la posición la dan las áreas de grilla. */
table.nomina{width:100%;border-collapse:collapse;font-size:var(--fs-dato)}
table.nomina th{
  font:var(--peso-fuerte) var(--fs-micro)/1.3 var(--f-texto);
  text-transform:uppercase;letter-spacing:var(--track-rotulo);color:var(--texto-3);
  padding:var(--esp-6) var(--esp-7);border-bottom:1px solid var(--separador);
  white-space:nowrap;text-align:left;
}
/* Alineación: los rótulos siguen a sus valores — texto a la izquierda, importes a
   la derecha, acciones al final. */
table.nomina th.num,table.nomina td.num{text-align:right}
table.nomina th.acc,table.nomina td.acc{text-align:right}
table.nomina td{padding:var(--esp-6) var(--esp-7);
  border-bottom:1px solid var(--separador);vertical-align:middle}
table.nomina tr:last-child td{border-bottom:0}
table.nomina td.periodo{font-family:var(--f-dato);color:var(--texto-2);white-space:nowrap}
table.nomina td.num{font-family:var(--f-dato);font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* Jerarquía tonal por columna: dos cifras se comparan, dos son evidencia y contexto.
   El mínimo vale lo mismo en las setenta y dos filas del acta — comunica con su
   constancia, no con su presencia. */
table.nomina td.apagada{color:var(--texto-2)}
table.nomina tr.resuelta td{color:var(--texto-2)}

/* La señal, en texto: es lo que anuncia un lector de pantalla, lo que sobrevive al
   blanco y negro, y de paso contesta por qué está marcado. El color nunca es el
   único portador. */
table.nomina .senal{font-size:var(--fs-etiqueta);color:var(--aviso);white-space:nowrap}
table.nomina .senal--sin-minimo{color:var(--texto-3)}
/* ⚠️ Un mes sin sueldo mínimo cargado **no se colorea nunca** (**C21**): un hueco de la
   parametría no puede parecerse a una infracción. */
.marca-si{display:inline-flex;align-items:center;gap:var(--esp-3);
  font-size:var(--fs-etiqueta);color:var(--estado-sin);white-space:nowrap}

/* ── El resaltado ───────────────────────────────────────────────────────────
   Se colorea **la celda «Sugerido»**, no la fila. Con un tercio de los meses
   marcados, un fondo de fila tiñe la pantalla entera y el color deja de señalar;
   en una columna, la mancha ámbar queda como un mapa vertical de dónde mirar.

   📎 Es lo que el legado quiso hacer y dejó a medio camino: `p00062` define
   `td.col-alerta` «para anclar la vista» y **ninguna columna declara esa clase**.

   ⚠️ **Ámbar y no rojo**: un mes marcado no es todavía una infracción. Y no
   `--acento`: hacía que el problema y el endoso compartieran color. */
table.nomina td.sugerida{
  background:var(--aviso-fondo);box-shadow:inset 2px 0 0 var(--aviso-marca);
  color:var(--texto);font-weight:var(--peso-fuerte);
}
.acciones-fila{display:inline-flex;gap:var(--esp-4);justify-content:flex-end;margin:0}

/* La barra de acciones de la pantalla del acta: **una sola**, y por eso el `<form>` de
   finalizar entra como un elemento más de la fila en vez de ser un segundo contenedor.
   🔴 Antes eran un `<div class="acciones">` y un `<form class="acciones">` uno debajo del
   otro, y los botones del acta quedaban repartidos en dos filas separadas. */
.acciones--acta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4);
  padding:var(--esp-6) 0}
.acciones--acta form,
.acciones--acta .acciones__aparte{display:contents}
/* El que **confirma** se separa del resto y cierra la fila: `display:contents` en el `<form>`
   hace que el botón sea un ítem más, así que el margen automático va en el botón y no en el
   formulario, que no tiene caja.

   🔀 **Se mudó de «Eliminar» a «Finalizar» el 18/09/2026** (**T078**), a pedido del dueño del
   producto: la acción destructiva abre la fila y la que confirma la cierra, donde el ojo termina
   de leer. La separación entre las dos no se perdió, se espejó — y el motivo que estaba escrito
   acá, «lejos del dedo que venía apretando Calcular», caducó en la misma tanda: Calcular se fue
   de esta barra a la tapa del panel de meses. */
.acciones--acta .acciones__aparte > .boton{margin-left:auto}
@container app (max-width:40rem){
  /* En teléfono se apilan a lo ancho: un botón por renglón se toca sin apuntar. */
  .acciones--acta{flex-direction:column;align-items:stretch}
  .acciones--acta .boton{justify-content:center}
  /* 🔴 **Apilado, «primero» es «arriba», y ahí el orden se da vuelta.** En escritorio la
     destructiva abre la fila por la izquierda, que está bien; apilada quedaría **arriba de
     todo**, justo donde cae el pulgar. `order` la manda al pie sin tocar el documento, así que
     el orden de lectura y el de foco siguen siendo los del marcado. */
  .acciones--acta .acciones__aparte > .boton{order:-1;margin-left:0}
}

/* ── La pantalla del acta, reordenada (09/09/2026) ──────────────────────────
   Cinco correcciones de la validación de staging. Todas de disposición: no se agregó ni se
   quitó ningún dato, se cambió dónde cae. */


/* **La empresa y el acta, lado a lado.** `.listado` es una columna flex, así que dos paneles
   hermanos se apilan; el par los mete en su propia grilla de dos. Abajo de 1080 no entran: dos
   fichas de etiqueta/valor a menos de 300 px parten cada renglón en dos líneas.

   🔴 **Se llamaba `.par` y ya había una `.par`**, la de los tres bloques de la nómina de CUILes.
   No se rompió nada en escritorio —esa otra vive dentro de su propio `@container`— pero en
   teléfono su `justify-items:start` alcanzaba a estas dos fichas y las dejaba con el ancho de su
   contenido: 320 y 253 px sobre una tarjeta de 366, cada una distinta de la otra. Es la clase de
   error que no se ve en el navegador ancho y aparece recién al medir el teléfono. */
.par-de-fichas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-6);
  align-items:start}
@container app (max-width:67.5rem){
  .par-de-fichas{grid-template-columns:minmax(0,1fr)}
}
/* ── Las dos tablas del acta en teléfono ────────────────────────────────────
   🔴 **`formatos.css` convierte TODA `.grilla` en tarjetas con un mapa fijo**, y el mapa es el
   de la tabla de actas: siete columnas, `"num estado" "empresa empresa" "cuit total" "periodo
   vence"`. Las dos tablas del acta no entran en ese molde y fallan de dos maneras distintas:

   - **Meses fiscalizados tiene diez columnas.** De la octava en adelante no hay área asignada:
     el auto-placement las apila sobre las que ya están.
   - **La grilla de carga también tiene diez**, y encima cada celda lleva un `<input>`.

   Y las siete primeras heredan significados ajenos: `nth-child(6)` en peso negro porque ahí va
   el total del acta, y un `::before` que escribe **«Vence »** delante de lo que caiga séptimo.
   Ese es el caso peor, porque no se ve roto: se ve **mal rotulado**.

   Además `formatos.css` pone `.desplazable{overflow:visible}` en teléfono, así que acá **no hay
   escape por desplazamiento horizontal**: o entra en la tarjeta o no se lee.

   El camino es el que el proyecto ya usó dos veces: `.grilla--numeracion` (cinco columnas) y
   `table.nomina` (diez). Cada tabla declara **su** mapa. De la nómina, que es la más madura, se
   toman las tres decisiones que la hicieron sostenible: ubicar por **clase semántica** y no por
   `nth-child` —que se desacomoda al mover una columna—, rotular con `::before` **por celda**, y
   **anular explícitamente lo heredado**.

   ⚠️ **Todos los selectores llevan `.grilla` adelante además del modificador, y no es adorno.**
   La regla heredada del «Vence» es `.grilla tbody td:nth-child(7):not(.sin-vencimiento)::before`
   y pesa (0,3,2): un `.grilla--detalle tbody td.c-retenciones::before` pesa (0,2,3) y **pierde**,
   así que la séptima columna seguiría diciendo «Vence» sin que nada avise. Con las dos clases
   juntas la cuenta da (0,3,3) y gana. Es la misma trampa que `table.nomina` documenta. */
@container app (max-width:40rem){
  /* Lo heredado, apagado de una vez para las dos tablas.

     ⚠️ **Estos dos selectores son posicionales y el resto del mapa no.** Apuntan a la 6.ª y la
     7.ª celda, que hoy son **Depósito 2** y **Retenciones**. Los tres coeficientes se
     insertaron en 8, 9 y 10 justamente por eso: más adelante que la 7.ª, así que no las
     mueven. Si alguna vez se reordena de otra forma, la séptima columna vuelve a decir
     «Vence » sin que nada avise — hay un test que fija las dos posiciones para que el aviso
     llegue. */
  .grilla.grilla--detalle tbody td:nth-child(7)::before,
  .grilla.grilla--carga tbody td:nth-child(7)::before{content:none}
  .grilla.grilla--detalle tbody td:nth-child(6),
  .grilla.grilla--carga tbody td:nth-child(6){font-size:inherit;font-weight:inherit;
    letter-spacing:inherit}
  .grilla.grilla--detalle tbody td,
  .grilla.grilla--carga tbody td{justify-self:stretch}

  /* El rótulo de cada dato, arriba del dato. En una tarjeta no hay encabezado de columna que
     mirar, así que sin esto la tarjeta es una lista de números sin nombre. */
  .grilla.grilla--detalle tbody td::before,
  .grilla.grilla--carga tbody td::before{
    display:block;font-family:var(--f-dato);font-size:var(--fs-micro);
    letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-3);
    margin-bottom:var(--esp-1);
  }

  /* ── Meses fiscalizados ─────────────────────────────────────────────────
     El período y el total del mes arriba, que es lo que se busca al recorrer; después los
     pares, en el orden de la fórmula. */
  /* ⚠️ **Seis columnas y no dos**, desde que los coeficientes son columnas (18/09/2026). Son
     **tres** celdas nuevas y un mapa de dos no puede alojar una fila de tres: `grid-template-areas`
     exige que todas las filas tengan el mismo ancho. Con seis, cada par de arriba ocupa tres
     columnas —o sea que **ninguno se movió**— y los tres factores entran de a dos en la fila de
     abajo, juntos, que es como se leen. */
  .grilla.grilla--detalle tbody tr{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "periodo   periodo   periodo   total     total     total"
      "empleados empleados empleados remun     remun     remun"
      "aportes   aportes   aportes   deposit   deposit   deposit"
      "deposito2 deposito2 deposito2 retenc    retenc    retenc"
      "coefa     coefa     coefb     coefb     coefc     coefc"
      "saldo     saldo     saldo     interes   interes   interes";
    gap:var(--esp-5) var(--esp-6);padding:var(--esp-7);min-height:0;align-content:start;
  }
  .grilla.grilla--detalle tbody td.c-periodo{grid-area:periodo;font-size:var(--fs-base);
    color:var(--texto);font-family:var(--f-titulo)}
  .grilla.grilla--detalle tbody td.c-total{grid-area:total;text-align:right;
    font-size:var(--fs-medio);font-weight:var(--peso-negro);letter-spacing:-.025em}
  .grilla.grilla--detalle tbody td.c-empleados{grid-area:empleados;text-align:left}
  .grilla.grilla--detalle tbody td.c-remuneracion{grid-area:remun}
  .grilla.grilla--detalle tbody td.c-aportes{grid-area:aportes;text-align:left}
  .grilla.grilla--detalle tbody td.c-depositado{grid-area:deposit}
  .grilla.grilla--detalle tbody td.c-deposito-2{grid-area:deposito2;text-align:left}
  .grilla.grilla--detalle tbody td.c-retenciones{grid-area:retenc}
  .grilla.grilla--detalle tbody td.c-coef-a{grid-area:coefa;text-align:left}
  .grilla.grilla--detalle tbody td.c-coef-b{grid-area:coefb;text-align:left}
  .grilla.grilla--detalle tbody td.c-coef-c{grid-area:coefc;text-align:left}
  .grilla.grilla--detalle tbody td.c-saldo{grid-area:saldo;text-align:left}
  .grilla.grilla--detalle tbody td.c-interes{grid-area:interes}

  .grilla.grilla--detalle tbody td.c-total::before{content:"Total del mes"}
  .grilla.grilla--detalle tbody td.c-empleados::before{content:"Empleados"}
  .grilla.grilla--detalle tbody td.c-remuneracion::before{content:"Remuneración"}
  .grilla.grilla--detalle tbody td.c-aportes::before{content:"Aportes y contrib."}
  .grilla.grilla--detalle tbody td.c-depositado::before{content:"Depositado"}
  .grilla.grilla--detalle tbody td.c-deposito-2::before{content:"Depósito 2"}
  .grilla.grilla--detalle tbody td.c-retenciones::before{content:"Retenciones"}
  .grilla.grilla--detalle tbody td.c-coef-a::before{content:"Coef. A"}
  .grilla.grilla--detalle tbody td.c-coef-b::before{content:"Coef. B"}
  .grilla.grilla--detalle tbody td.c-coef-c::before{content:"Coef. C"}
  .grilla.grilla--detalle tbody td.c-saldo::before{content:"Saldo"}
  .grilla.grilla--detalle tbody td.c-interes::before{content:"Interés"}

  /* ── La grilla de carga ─────────────────────────────────────────────────
     Mismo mapa, con dos diferencias: lo que se tipea va primero —es a lo que el inspector
     viene— y las columnas se reparten en partes iguales, porque las dos llevan campos. */
  .grilla.grilla--carga tbody tr{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "periodo   periodo   periodo   total     total     total"
      "empleados empleados empleados remun     remun     remun"
      "deposit   deposit   deposit   deposito2 deposito2 deposito2"
      "retenc    retenc    retenc    aportes   aportes   aportes"
      "coefa     coefa     coefb     coefb     coefc     coefc"
      "saldo     saldo     saldo     interes   interes   interes";
    gap:var(--esp-5) var(--esp-6);padding:var(--esp-7);min-height:0;align-content:start;
  }
  .grilla.grilla--carga tbody td.c-periodo{grid-area:periodo;font-size:var(--fs-base);
    color:var(--texto);font-family:var(--f-titulo)}
  .grilla.grilla--carga tbody td.c-total{grid-area:total;text-align:right;
    font-size:var(--fs-medio);font-weight:var(--peso-negro);letter-spacing:-.025em}
  .grilla.grilla--carga tbody td.c-empleados{grid-area:empleados}
  .grilla.grilla--carga tbody td.c-remuneracion{grid-area:remun}
  .grilla.grilla--carga tbody td.c-depositado{grid-area:deposit}
  .grilla.grilla--carga tbody td.c-deposito-2{grid-area:deposito2}
  .grilla.grilla--carga tbody td.c-retenciones{grid-area:retenc}
  .grilla.grilla--carga tbody td.c-coef-a{grid-area:coefa;text-align:left}
  .grilla.grilla--carga tbody td.c-coef-b{grid-area:coefb;text-align:left}
  .grilla.grilla--carga tbody td.c-coef-c{grid-area:coefc;text-align:left}
  .grilla.grilla--carga tbody td.c-aportes{grid-area:aportes;text-align:right}
  .grilla.grilla--carga tbody td.c-saldo{grid-area:saldo;text-align:right}
  .grilla.grilla--carga tbody td.c-interes{grid-area:interes;text-align:right}

  .grilla.grilla--carga tbody td.c-total::before{content:"Total del mes"}
  .grilla.grilla--carga tbody td.c-empleados::before{content:"Empleados"}
  .grilla.grilla--carga tbody td.c-remuneracion::before{content:"Remuneración"}
  .grilla.grilla--carga tbody td.c-aportes::before{content:"Aportes y contrib."}
  .grilla.grilla--carga tbody td.c-depositado::before{content:"Depositado y fecha"}
  .grilla.grilla--carga tbody td.c-deposito-2::before{content:"Depósito 2"}
  .grilla.grilla--carga tbody td.c-retenciones::before{content:"Retenciones"}
  .grilla.grilla--carga tbody td.c-coef-a::before{content:"Coef. A"}
  .grilla.grilla--carga tbody td.c-coef-b::before{content:"Coef. B"}
  .grilla.grilla--carga tbody td.c-coef-c::before{content:"Coef. C"}
  .grilla.grilla--carga tbody td.c-saldo::before{content:"Saldo"}
  .grilla.grilla--carga tbody td.c-interes::before{content:"Interés"}
}

/* 🔴 **El encabezado estaba en la punta opuesta a su columna.** `.grilla th` alinea a la
   izquierda y `.grilla td.cifra` a la derecha, así que en una tabla de diez columnas cada
   rótulo de plata quedaba sobre la columna anterior. Se leía como si las cifras estuvieran
   corridas. Es lo que se veía; el orden de las columnas era lo de menos.

   Va sobre `.grilla th.cifra` y no sobre `.grilla--detalle` solo: el defecto es de todas las
   grillas con columnas de plata, no de ésta. */
.grilla th.cifra{text-align:right}

/* El detalle mensual. El período y su desplegable van a la izquierda —es texto, no plata— y
   los importes se quedan a la derecha, que es lo que alinea las comas entre meses. */
.grilla--detalle td.c-periodo{vertical-align:top}
/* La fecha del depósito cuelga de su importe en vez de ocupar una columna que se llamaba casi
   igual que la de al lado («Depositado» / «Depósito»). */
.grilla--detalle td.c-depositado .sub{display:block;font-size:var(--fs-etiqueta);
  color:var(--texto-3);font-weight:var(--peso-normal)}
/* La pista de la tapa: una línea de contexto al lado del título del panel. Nació anunciando el
   desplegable de los coeficientes —que ya no existe, son columnas— y quedó porque el modo de
   edición del detalle la usa para decir que guardar y calcular son una sola acción. */
.tapa .pista{font-size:var(--fs-etiqueta);color:var(--texto-3)}

/* ── Los tres coeficientes ───────────────────────────────────────────────────────────
   🔀 **Son columnas desde el 18/09/2026**, entre Retenciones y Saldo, donde el dueño del
   producto los pidió. Estaban plegados en un `<details>` dentro de la **primera** columna —a
   seis columnas de donde se los necesita, y descubiertos sólo por una pista en la tapa— porque
   son factores de seis decimales y la tabla ya tenía diez.

   **El ancho se resuelve por jerarquía, no recortando decimales.** Un factor recortado es un
   factor falso, así que los seis se muestran enteros y lo que baja es el peso visual: van en el
   cuerpo chico y en el texto de segundo nivel, porque **no son plata**. `.cifra` es del dinero
   —`base.css` lo dice: «el formateo lo hace el backend, es-AR $ 1.234.567,89»— y un coeficiente
   no lleva signo ni separador de miles. Alinean a la derecha igual, que es como se comparan
   entre meses, y `nowrap` es lo que impide que `0,051200` se parta en dos renglones. */
.coef{font-size:var(--fs-etiqueta);color:var(--texto-2);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  text-align:right;white-space:nowrap}
.grilla th.coef{text-align:right}

/* ── La observación del acta, escrita en la ficha ─────────────────────────────────
   Es una fila más del detalle —mismo rótulo a la izquierda, mismo valor a la derecha— y por eso
   hereda `.detalle-fila` en vez de inventar un formulario aparte: mientras el acta es borrador
   se escribe, y finalizada se lee, sin que la ficha cambie de forma.

   ⚠️ **`.detalle-fila .r` trae `white-space:nowrap`**, que sobre un campo de texto de 500
   caracteres y su botón impide que la pareja baje de renglón cuando no entra. Se devuelve a
   `normal` en el modificador mismo —no sólo en `.anotar`— porque desde **T112** el libro mayor
   de un crédito reusa `.detalle-fila--anotar` para una observación **de lectura**, sin `<input>`
   ni botón: sin esta regla acá, esa fila se cortaba a mitad de palabra en vez de bajar de
   renglón (encontrado en la galería con un navegador real, 26/09/2026). */
.detalle-fila--anotar{align-items:center}
.detalle-fila--anotar .l{flex:0 0 auto}
.detalle-fila--anotar .r{white-space:normal}
.anotar{display:flex;gap:var(--esp-3);align-items:center;flex:1 1 auto;
  min-width:0;white-space:normal;justify-content:flex-end}
.anotar .campo{flex:1 1 auto;min-width:0;max-width:34ch}
@container app (max-width:40rem){
  /* En la tarjeta angosta el rótulo se va arriba y el campo toma el ancho entero: un
     `<input>` de 500 caracteres compartiendo renglón con su etiqueta no se puede tipear. */
  .detalle-fila--anotar{flex-direction:column;align-items:stretch;gap:var(--esp-2)}
  .anotar .campo{max-width:none}
}

/* 🔍 **Dos reglas que quedaron sin dueño** cuando el acta dejó de ser un panel lateral
   (07/09/2026): sus únicos selectores empiezan con `.detalle`, que en esta pantalla ya no
   existe, así que la nota de rol se veía con el cuerpo de texto normal y el total de importes
   había perdido su apilado. Se repiten acá scopeadas a la ficha. */
.ficha .detalle-total{flex-direction:column;align-items:stretch;gap:var(--esp-2)}
.ficha .detalle-total .r{text-align:right;font-family:var(--f-titulo);
  font-size:var(--fs-cifra);font-weight:var(--peso-negro);letter-spacing:var(--track-cifra)}
.nota-rol{font-size:var(--fs-menor);color:var(--texto-2);line-height:1.5}
.nota-rol b{color:var(--texto);display:block;margin-bottom:var(--esp-2)}

/* El cambio de contraseña vive **en la fila**, no en una pantalla aparte: es una acción de
   un renglón y sacarla de contexto obligaría a volver a elegir de quién se trata. El campo se
   acota para que la columna no se coma la grilla. */
.clave-en-linea{display:flex;gap:var(--esp-3);align-items:center}
.clave-en-linea .campo{width:16ch;min-width:0}
@container app (max-width:67.5rem){
  /* En pantallas angostas la fila de acciones se apila: dos formularios uno al lado del otro
     no entran, y apretados dejan de ser tocables. */
  .acciones-fila{flex-direction:column;align-items:stretch}
  .clave-en-linea .campo{width:100%}
}

/* El padrón de cuentas · `.grilla--cuentas` (**T110**)
   Los roles se reparten **en la fila**, por lo mismo que la contraseña de acá arriba: es la
   acción que más se hace después del alta, y sacarla a otra pantalla convertiría un cambio de
   una casilla en tres navegaciones. */
.grilla--cuentas{width:100%}
/* El nombre es lo que se lee para encontrar a alguien, así que se come el sobrante; el legajo
   y el estado son cortos y de ancho fijo, y los roles piden lo suyo. */
.grilla--cuentas td.celda-nombre,.grilla--cuentas th:nth-child(2){width:100%}
.grilla--cuentas td.celda-legajo{white-space:nowrap;font-variant-numeric:tabular-nums}
/* 🔴 **La columna de roles se lee; el editor va plegado.** Con las siete casillas siempre a la
   vista la fila medía 306 px en escritorio y 466 en teléfono —medido—, o sea nueve pantallas de
   scroll para veinte cuentas. Lo que se hace todo el tiempo es mirar quién tiene qué. */
.grilla--cuentas td.celda-roles{min-width:22ch}
.lista-de-roles{display:block;color:var(--texto-2)}
.vincular-cuenta > summary,
.editar-roles > summary{
  cursor:pointer;list-style:none;display:inline-block;margin-top:var(--esp-2);
  font-size:var(--fs-etiqueta);color:var(--acento);
}
.vincular-cuenta > summary::-webkit-details-marker,
.editar-roles > summary::-webkit-details-marker{display:none}
.vincular-cuenta > summary:hover,
.editar-roles > summary:hover{text-decoration:underline}
.vincular-cuenta > summary:focus-visible,
.editar-roles > summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.vincular-cuenta[open] > summary,
.editar-roles[open] > summary{margin-bottom:var(--esp-4)}
/* Vincular un legajo con su cuenta (**T110**, **U7**): el mismo plegado que los roles del
   padrón, porque es la misma situación —una acción ocasional dentro de una fila que casi
   siempre sólo se lee—. El selector y el botón van en línea y bajan juntos si no entran. */
.vincular-cuenta > form{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center}
/* La celda es `.dato` —el legajo va en la tipografía de datos—, pero el control no es un dato:
   sin esto «Vincular cuenta» salía en monoespaciada, distinto del «Cambiar» de los roles. */
.vincular-cuenta > summary{font-family:var(--f-texto)}
.roles-en-linea{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center}
/* 🔴 El `<fieldset>` trae **borde y padding propios del navegador**, y ningún otro campo del
   portal los tiene: el bloque de roles salía encajonado al lado de campos sin caja. Es el
   único elemento del formulario que necesita ser un fieldset —agrupa casillas con el mismo
   `name`, que es lo que le da su rótulo al lector de pantalla—, así que se lo desviste en
   lugar de cambiarlo por un `div` y perder la semántica. */
.campo-grupo:is(fieldset){border:0;padding:0;margin:0}
.campo-grupo > legend{
  padding:0;font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--texto-2);
  margin-bottom:var(--esp-3);
}
/* Cada rol es una pastilla tocable entera —no una casilla de 13 px con una etiqueta al lado—,
   que es lo mismo que T104 corrigió en las tarjetas de actas: el objetivo del dedo es la
   etiqueta, no el cuadradito. */
.casilla-rol{
  display:inline-flex;align-items:center;gap:var(--esp-3);cursor:pointer;
  padding:var(--esp-2) var(--esp-4);border-radius:var(--radio-pastilla);
  border:1px solid var(--borde);background:var(--superficie);
  font-size:var(--fs-etiqueta);color:var(--texto-2);white-space:nowrap;
  transition:border-color var(--dur-corta) var(--curva-salida),
             color var(--dur-corta) var(--curva-salida);
}
.casilla-rol:hover{border-color:var(--acento);color:var(--texto)}
.casilla-rol:has(input:checked){border-color:var(--acento);color:var(--texto);font-weight:var(--peso-medio)}
.casilla-rol:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:2px}
/* ⚠️ **Este bloque de teléfono vive acá y no en `formatos.css`, a propósito.** Las hojas cargan
   `… movimiento, formatos, portal`, así que `portal.css` es la última: la regla base de
   `.roles-en-linea` de acá arriba **le gana** a una `@container` de `formatos.css` con la misma
   especificidad, y el override de teléfono no se aplicaría. Los de `.grilla--cuentas` sí están
   en `formatos.css` porque allá los selectores llevan `tbody` y pesan más. */
@container app (max-width:40rem){
  /* En teléfono van **de a dos**, no en una columna: siete renglones de una palabra corta
     gastaban media pantalla antes de llegar al listado, y con 340 px de ancho entran dos
     cómodos. `grid` y no `flex` para que las dos columnas midan lo mismo y el ojo baje derecho. */
  .roles-en-linea{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .casilla-rol{justify-content:flex-start}
}

/* ── El editor de roles, rediseñado · `.editor-de-roles` (**T116**) ─────────
   🔴 **El problema medido**: `.roles-en-linea{gap:var(--esp-3)}` —6 px— envolvía las siete
   casillas **y** el botón «Guardar roles» en el mismo `flex-wrap`, así que el botón era, para
   el layout, una octava pastilla; y `.boton--secundario` se leía más parecido a una casilla sin
   marcar que a una acción.

   La corrección: dos grupos con un escalón de espacio grande entre ellos —«qué elegís» (las
   casillas, en un contenedor propio) y «qué hacés con eso» (los botones)— misma lógica de dos
   escalones que ya usa `.hoja` (`15-jerarquia-de-las-hojas.md` §2): chico **dentro** de un
   grupo, grande **entre** grupos. Ver `diseno/pantallas/interno/16-usuarios-e-inspectores.md`
   §2.4. */
.editor-de-roles{
  margin-top:var(--esp-3);
  padding:var(--esp-5) var(--esp-6);
  border:1px solid var(--borde);
  border-radius:var(--radio-panel);
  background:var(--superficie);
}
.editor-de-roles .campo-grupo{gap:var(--esp-4)}
.editor-de-roles__acciones{
  display:flex;justify-content:flex-end;gap:var(--esp-4);
  margin-top:var(--esp-8);          /* el escalón grande: separa «elegís» de «hacés» */
  padding-top:var(--esp-5);
  border-top:1px solid var(--separador);
}
@container app (max-width:40rem){
  .editor-de-roles__acciones{flex-direction:column-reverse}
  .editor-de-roles__acciones .boton{width:100%;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* ── El selector de zonas de la hoja de editar inspector · `.zonas-del-inspector` (**T116**)
   Cada zona es su propia fila —no una pastilla en línea como los roles—, porque acá cada una
   puede llevar una nota propia (compartida o única cobertura) y una pastilla apretada no tiene
   dónde ponerla. `max-height` + `overflow-y` porque el catálogo de zonas puede crecer más que
   lo que entra sin scroll en la hoja. */
.zonas-del-inspector{
  display:flex;flex-direction:column;gap:var(--esp-4);
  max-height:280px;overflow-y:auto;
}
.casilla-zona{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-2) var(--esp-4);
  padding:var(--esp-3) var(--esp-4);border:1px solid var(--borde);
  border-radius:var(--radio-control);cursor:pointer;
}
.casilla-zona:has(input:checked){border-color:var(--acento)}
.casilla-zona__nombre{font-size:var(--fs-dato);color:var(--texto)}
/* **E32**: compartir es cómo se cubre una ausencia, no un error — se informa y no se impide.
   La nota de «única cobertura» sí es una advertencia y va en `--aviso` (ámbar), no en el rojo
   del acta: no hay nada intimado acá. */
.zona-unica{font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--aviso)}
.mini{
  --mini-relleno-v:7px;  /* el relleno vertical de la pastilla: la caja táctil de `T172` se calcula con él */
  appearance:none;cursor:pointer;white-space:nowrap;
  padding:var(--mini-relleno-v) 12px;border-radius:var(--radio-pastilla);
  border:1px solid var(--borde-fuerte);background:var(--superficie-hover);
  color:var(--texto);font:var(--peso-fuerte) var(--fs-etiqueta)/1 var(--f-texto);
  transition:transform var(--dur-corta) var(--curva-salida),background var(--dur-corta) var(--curva-salida);
}
@media (hover:hover) and (pointer:fine){
  .mini:hover{transform:translateY(-1px);background:var(--superficie-activa)}
}
/* Después del `:hover`, con el mismo peso: al presionar gana la escala sobre el `-1px`. */
.mini:active{transform:scale(var(--escala-presion-chip))}
.mini:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* 🔀 **También sobre un `<a>`** desde que «Editar los meses» abre el modo de edición del
   detalle (18/09/2026). Es navegación —cambia lo que la URL muestra, se comparte por link y el
   atrás del navegador funciona—, así que el elemento correcto es un enlace; lo que necesita de
   más es lo que un `<button>` ya trae puesto. */
a.mini{display:inline-block;text-decoration:none;line-height:1}

/* ── La nómina en teléfono: el mapa de tarjeta ──────────────────────────────
   ⚠️ **Todas las reglas de celda llevan `table.nomina` adelante.** La regla base de
   acá abajo pone `white-space:normal` con especificidad (0,3,2); un `td.periodo`
   pelado es (0,3,1) y **pierde**, así que los `nowrap` no se aplicaban y las cifras
   se partían en dos renglones sin que nada avisara. No se arregla con `!important`:
   se arregla igualando la especificidad. */
@container app (max-width:40rem){
  table.nomina,
  table.nomina tbody,
  table.nomina tr{display:block}
  table.nomina thead{display:none}
  table.nomina tr{
    display:grid;grid-template-columns:auto auto minmax(max-content,1fr) auto;
    gap:var(--esp-2) var(--esp-6);padding:var(--esp-7);
    border-bottom:1px solid var(--separador);
    /* Cuatro columnas para que la primera la mida **el mes** y no la cifra: lo
       declarado ocupa las dos primeras, así la señal arranca a 12 px de donde
       termina el mes y no a 230, en el borde opuesto.
       ⚠️ Y `minmax(max-content,1fr)` en la tercera: con `minmax(0,1fr)` la columna
       del medio quedaba más angosta que su propio número y la diferencia **se
       pisaba** con el chip del sugerido —−7 y −10 px de holgura—. */
    grid-template-areas:
      "periodo   senal     senal      senal"
      "aporte    aporte    aporte     debido"
      "raya      raya      raya       raya"
      "declarado declarado diferencia sugerido"
      "minimo    minimo    minimo     minimo"
      "acciones  acciones  acciones   acciones";
  }
  table.nomina td{display:block;padding:0;border:0;white-space:normal}
  table.nomina td.periodo{grid-area:periodo;font-weight:var(--peso-fuerte);
    color:var(--texto);padding-bottom:var(--esp-4);white-space:nowrap}
  table.nomina td.c-senal{grid-area:senal;text-align:left;justify-self:start;
    padding-bottom:var(--esp-4)}
  /* ⚠️ En tarjeta la columna izquierda arranca en el borde: el `text-align:right`
     que la tabla de escritorio les pone a las cifras dejaría media tarjeta vacía en
     los meses que cierran, donde la columna derecha no existe. */
  table.nomina td.c-declarado{grid-area:declarado;text-align:left;white-space:nowrap;
    font-family:var(--f-titulo);font-size:var(--fs-medio);font-weight:var(--peso-negro)}
  table.nomina td.c-sugerido{grid-area:sugerido;text-align:right;white-space:nowrap;
    font-family:var(--f-titulo);font-size:var(--fs-medio);font-weight:var(--peso-negro);
    padding:var(--esp-2) var(--esp-4);border-radius:var(--radio-2)}
  table.nomina td.c-aporte{grid-area:aporte;text-align:left;white-space:nowrap;
    font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-2)}
  table.nomina td.c-minimo{grid-area:minimo;text-align:left;white-space:nowrap;
    font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-2);
    margin-top:var(--esp-7)}
  table.nomina td.acc{grid-area:acciones;text-align:left;margin-top:var(--esp-7)}
  /* La diferencia y el aporte debido **existen sólo en tarjeta**. */
  table.nomina td.c-diferencia{display:block;grid-area:diferencia;align-self:end;
    text-align:center;font-family:var(--f-dato);font-size:var(--fs-etiqueta);
    color:var(--texto-2);line-height:1.35}
  table.nomina td.c-diferencia b{display:block;color:var(--texto)}
  table.nomina td.c-diferencia i{display:block;font-style:normal;white-space:nowrap}
  table.nomina td.c-debido{display:block;grid-area:debido;text-align:right;
    font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-2);
    line-height:1.35}
  table.nomina td.c-debido .que{display:block;color:var(--texto-3);
    text-transform:uppercase;letter-spacing:var(--track-rotulo);font-family:var(--f-texto);
    font-weight:var(--peso-fuerte);font-size:var(--fs-micro)}
  table.nomina td.c-debido .val{white-space:nowrap}
  table.nomina td.c-debido b{color:var(--texto)}
  /* ⚠️ **La única raya es entre meses.** Adentro del mes el aire alcanza: una segunda
     línea compite con la que separa un período del siguiente. La celda sigue en el
     DOM como **espaciador**, no como línea. */
  table.nomina td.raya{display:block;grid-area:raya;height:var(--esp-5);padding:0}
  /* En tarjeta no hay encabezado, así que cada cifra dice qué es. El `:not(:empty)`
     evita que un mes sin sugerencia muestre un rótulo huérfano. */
  table.nomina td.c-declarado::before{content:"Remuneración";display:block;
    font:var(--peso-fuerte) var(--fs-micro)/1.4 var(--f-texto);
    text-transform:uppercase;letter-spacing:var(--track-rotulo);color:var(--texto-2)}
  table.nomina td.c-sugerido:not(:empty)::before{content:"Sugerido";display:block;
    font:var(--peso-fuerte) var(--fs-micro)/1.4 var(--f-texto);
    text-transform:uppercase;letter-spacing:var(--track-rotulo);color:var(--texto-2)}
  table.nomina td.c-aporte::before{content:"Aporte pagado";display:block;
    color:var(--texto-3);text-transform:uppercase;letter-spacing:var(--track-rotulo);
    font-family:var(--f-texto);font-weight:var(--peso-fuerte);font-size:var(--fs-micro)}
  table.nomina td.c-minimo::before{content:"Sueldo mínimo ";
    color:var(--texto-3);text-transform:uppercase;letter-spacing:var(--track-rotulo);
    font-family:var(--f-texto);font-weight:var(--peso-fuerte);font-size:var(--fs-micro)}
}
/* Teléfonos chicos: el mismo mapa con menos aire interno. Es lo último que se cede
   antes de que una cifra se salga del marco. El corte es 355 y no 380 para que un
   teléfono de 390 px de viewport reciba el espaciado normal. */
@container app (max-width:355px){
  table.nomina tr{padding:var(--esp-6);gap:var(--esp-2) var(--esp-4)}
  table.nomina td.c-declarado,
  table.nomina td.c-sugerido{font-size:var(--fs-base)}
}
/* En escritorio las tres celdas del formato tarjeta no existen. 🔒 **La tabla de
   escritorio no cambia**: es la vista austera, deliberadamente, y sumarle la
   diferencia y el aporte debido apretaría las columnas que sí se leen de un vistazo. */
.c-diferencia,.c-debido,.raya{display:none}

/* ── Movimiento ─────────────────────────────────────────────────────────────
   Los gestos son los del sistema (`movimiento.css`), no unos nuevos. La regla que
   los ordena es la misma: si un movimiento no informa un cambio de estado, no va.

   La entrada escalonada de `.listado > *` y de `.lista > *` la declara el bloque del gesto 1
   (más arriba, en CSS y no en JS, con los tokens `--cascada-*`). */

/* ── Los desplegables se ven abrir y cerrar (T177, T181) ──────────────────
   Un `<details>` no anima por sí solo: su cuerpo (`::details-content`) aparecía y desaparecía de
   golpe. Se anima ese cuerpo, sin tocar el marcado y sin JavaScript. Cada `<details>` nuevo cae en una
   de las dos listas de `T177` —A, los chicos (texto, un formulario corto); B, los que llevan una tabla o
   una lista de filas—; el test estático (`test_t177_desplegables_estatico.py`) falla si queda uno sin
   clasificar.

   🔀 **Los dos grupos hacen lo mismo desde `T181`** (decisión del dueño, 11/10/2026). En `T177` el B
   fundía sin animar el espacio, y medido se veía como un salto (286 px en un cuadro el historial del
   plan a 390) y al cerrar en dos tiempos: fundía y **después** subía todo lo de abajo. Ahora el alto del
   cuerpo crece en `--dur-alto-abre` y se achica en `--dur-alto-cierra` con `--curva-alto`, y el contenido
   funde **en paralelo** (`--dur-corta` al entrar, `--dur-instante` al salir, `--curva-salida`): lo de
   abajo acompaña. Lo permite la segunda excepción acotada a la **R2** (`movimiento.md § 2`): lo que
   cambia de alto es el contenedor recortado (`overflow:clip`, nunca `hidden`, **A4**), y la tabla de
   adentro se maqueta una vez a su ancho final. `interpolate-size` va **sólo en estos cuerpos** y nunca
   en `:root`: haría crecer todo, tablas incluidas. `content-visibility` discreto retiene el cuerpo
   hasta el último cuadro del cierre.

   ⚠️ **El cuerpo es un `flow-root`**: sin eso, el `margin-top` del primer hijo (`.zona__cuerpo`,
   `--esp-6`) colapsaba **a través** de `::details-content` —`overflow:clip` no corta el colapso— y
   quedaba fuera del alto que se anima: aparecía de golpe en el primer cuadro de la apertura y se iba
   de golpe en el último del cierre (12 px de salto, medido). Contenido, el margen crece y se achica
   con el resto, y en reposo el alto es el mismo de antes.

   El que nace abierto desde el servidor (carga completa o fragmento de HTMX) no anima: no hay un
   estado anterior desde el cual hacerlo. Donde el navegador no sabe de `::details-content` el
   despliegue es instantáneo, que es lo que había: mejora progresiva. */
:is(.barra-total,.mes-card__mas,.sin-datos--notas,.circuito__detalle,.circuito__historial,
    .editar-roles,.vincular-cuenta,details.plegable,
    .zona--plegable,.plegable-de-creditos-agotados,.cronograma-desplegable,.persona)::details-content{
  display:flow-root;block-size:0;overflow:clip;interpolate-size:allow-keywords;opacity:0;
  transition:block-size var(--dur-alto-cierra) var(--curva-alto),
             opacity var(--dur-instante) var(--curva-salida),
             content-visibility var(--dur-alto-cierra) var(--curva-alto) allow-discrete;
}
:is(.barra-total,.mes-card__mas,.sin-datos--notas,.circuito__detalle,.circuito__historial,
    .editar-roles,.vincular-cuenta,details.plegable,
    .zona--plegable,.plegable-de-creditos-agotados,.cronograma-desplegable,.persona)[open]::details-content{
  block-size:auto;opacity:1;
  transition:block-size var(--dur-alto-abre) var(--curva-alto),opacity var(--dur-corta) var(--curva-salida);
}

/* ⚠️ **`reduce` apaga el recorrido, no el aviso** (R1, T175): no crece, el espacio cambia de una vez y el
   cuerpo funde en `opacity` en `--dur-corta`. Se apagan el estado de reposo **y** el abierto (H14): el
   abierto vuelve a declarar la `transition` con más especificidad, y un `transition:none` en el de
   reposo sólo cortaría el cierre. */
@media (prefers-reduced-motion:reduce){
  :is(.barra-total,.mes-card__mas,.sin-datos--notas,.circuito__detalle,.circuito__historial,
      .editar-roles,.vincular-cuenta,details.plegable,
      .zona--plegable,.plegable-de-creditos-agotados,.cronograma-desplegable,.persona)::details-content{
    block-size:auto;overflow:visible;opacity:0;
    transition:opacity var(--dur-corta) var(--curva-salida),
               content-visibility var(--dur-corta) var(--curva-salida) allow-discrete;
  }
  :is(.barra-total,.mes-card__mas,.sin-datos--notas,.circuito__detalle,.circuito__historial,
      .editar-roles,.vincular-cuenta,details.plegable,
      .zona--plegable,.plegable-de-creditos-agotados,.cronograma-desplegable,.persona)[open]::details-content{
    opacity:1;transition:opacity var(--dur-corta) var(--curva-salida);
  }
}

/* Lo que `portal.js` abre o cierra según el ancho (`data-plegable-en-telefono`) no es un gesto de
   quien mira: se asienta sin movimiento. `!important` porque tiene que ganarle a la lista de
   propiedades de cualquiera de los estados de arriba, abierto o cerrado, con o sin `reduce`. */
details[data-asentando]::details-content{transition:none !important}

/* Gesto 3 · Barrido de fila — dónde está el puntero entre seis columnas de cifras.
   `portal.js` fija `--rx` con un solo oyente delegado en el `<tbody>`; sin JS el
   realce queda centrado y se sigue leyendo como hover. */
table.nomina tbody tr{position:relative}
table.nomina tbody tr::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--rx,50%) 50%,
             var(--superficie-hover),transparent 72%);
  transition:opacity var(--dur-corta) var(--curva-salida);
}
table.nomina tbody tr:hover::after{opacity:1}

/* La marca de decisión no aparece: **llega**. Es el acuse de que el mes quedó
   resuelto, y es lo único que cambia en esa celda. */
.marca-si{animation:acusar var(--dur-media) var(--curva-salida) both}
@keyframes acusar{
  from{opacity:0;transform:translateX(-5px) scale(.9)}
  to  {opacity:1;transform:none}
}

/* ⚠️ **No se apaga la información, se apaga el recorrido.** Un
   `*{animation-duration:.01ms !important}` apaga a lo bruto y deja estados sin
   comunicar. */
@media (prefers-reduced-motion:reduce){
  table.nomina tbody tr::after{transition:none}
  .marca-si{animation:none}
  .conmutador .corredera{transition:none}
  .mini:hover,.mini:active{transform:none}
  .ficha__enlace:hover .mini,.ficha__enlace:active .mini{transform:none}
  .conmutador > a:active,.conmutador > button:active{transform:none}
}

/* ── Gesto 8 · Dónde apoya el lienzo de la aurora (T034) ────────────────────
   `movimiento.css` define **cómo** deriva el fondo —`.aurora-lienzo` con su
   `data-saldo`—. Lo que falta, y vive acá porque es del armazón, es **sobre qué
   apoya**: el lienzo es `position:absolute; inset:0; z-index:0`, así que pide
   un bloque contenedor propio y que el contenido de ese bloque quede por
   encima. Es el mismo par que `formatos.css` ya arma para el marco
   (`.marco > .contenido{position:relative;z-index:1}`).

   ⚠️ **Por qué no va a lo ancho del marco**, que es donde lo pone el prototipo
   (`.ui > .aurora`) y donde lo pintaban los mockups (`.probeta`). El lienzo
   pinta `--aurora` **entera** —manchas *sobre piso*, y el piso es opaco—, y
   desde el gesto 10 el fondo de la aplicación es el cielo, que vive fuera de
   `.app` con `z-index` negativo. Un lienzo del tamaño del marco lo tapa: medido
   sobre la pantalla real, las estrellas desaparecen y el giro del tema al
   cambiar de portal deja de verse.

   🔀 **Una superficie, no dos** (07/09/2026). Estaba también detrás de la banda
   de cifras de la portada, y el par de reglas que la sostenía vivía acá. Se sacó
   por lo mismo que explica el párrafo de arriba, un piso más abajo: el lienzo es
   opaco y `.total` es vidrio (`--superficie-alta`), así que el color se veía **a
   través** de las tarjetas y **entre** ellas, y las tres pasaban a leerse como un
   recuadro con divisiones. Queda la que habla de **una** cosa concreta:

     · el panel de detalle del acta → el saldo de esa acta.

   El contenido se levanta con `position:relative; z-index:1`. La ✕ del detalle
   queda afuera de la regla: ya es `position:absolute` y pisársela la devolvería
   al flujo, que es la trampa que esta hoja ya documenta dos veces. */
.detalle > :not(.aurora-lienzo,.detalle-cerrar){position:relative;z-index:1}
.detalle > .detalle-cerrar{z-index:2}
/* 🔀 **Y desde el 07/09/2026, la ficha de importes de la pantalla del acta**, que es
   donde se mudó el panel. Mismo par de reglas y por la misma razón: el lienzo pide un
   bloque contenedor propio y que el contenido quede por encima. Sin `position` acá el
   lienzo resuelve contra `.cuerpo` y vuelve a taparlo todo — medido 1094×800 antes de
   corregirlo. `overflow:hidden` lo recorta al radio del panel. */
.ficha--deuda{position:relative;overflow:hidden}
.ficha--deuda > :not(.aurora-lienzo){position:relative;z-index:1}
/* 🟡 **En teléfono el lienzo no llega hasta abajo, y está medido.** El panel es el
   que desplaza (`overflow-y:auto`), y un hijo absoluto de un contenedor que
   desplaza se dimensiona contra la caja **visible** y se va con el contenido. En
   escritorio y tableta da igual —el panel nunca desborda: `margin-top:auto` en
   las acciones lo estira, medido 800/800, 700/700 y 691/691 px— pero en teléfono
   la hoja desborda **251 px** a 390×780 y al llegar al fondo se ve el borde donde
   la aurora se termina. No se arregla desde acá: haría falta que desplace una
   pieza interna y no el panel, que es cambiarle la forma al componente. Queda
   escrito, que es lo que corresponde mientras no se decida. */

/* ── El visor del PDF ───────────────────────────────────────────────────────
   El `<object>` no tiene alto propio: sin esto mide 0 y la pantalla se ve vacía
   con el documento cargado. Toma lo que queda de la hoja y deja respirar a las
   acciones de abajo. `min-height` y no `height` porque en teléfono la pantalla
   es más baja que cualquier página que valga la pena mirar. */
.visor-pdf { padding: 0; overflow: hidden; }
.visor-pdf > object { display: block; width: 100%; min-height: 62vh; border: 0; }
@container app (max-width:40rem){ .visor-pdf > object{ min-height: 54vh } }
/* El contenido de reserva del `<object>`: se ve sólo donde el PDF no se incrusta —el WebView
   de Android, que es donde corre la aplicación instalada del inspector— así que es lo único
   que esa persona ve de esta pantalla. Centrado y con el botón pegado a su mensaje. */
.visor-reserva{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--esp-5);min-height:inherit;padding:var(--esp-7);text-align:center;
}
.visor-reserva .vacio{margin:0}

/* ════════════════════════════════════════════════════════════════════════════
   Las clases que los templates pedían y no existían (T070, 16/09/2026)

   No son componentes nuevos: son las reglas de clases que el marcado ya usa —26 en total— y
   que no estaban escritas en ninguna hoja. El diagnóstico está en la tarea; el resumen es que
   el recibo, la carga y el alta del plan se veían mal **por la misma razón**, y la razón no
   era de gusto. Lo que sigue se ajusta a lo que cada template dice que el bloque es, sin
   cambiarle ni una línea al HTML.
   ══════════════════════════════════════════════════════════════════════════ */

/* El aviso que confirma. Verde `--estado-sin`, que es el tono de «al día» del sistema: la
   cuadratura del recibo es exactamente eso — lo cobrado y lo pagado coinciden. */
.aviso--exito{--tono:var(--estado-sin);--tono-borde:var(--estado-sin-borde);
  --tono-fondo:var(--estado-sin-fondo)}

/* ── Dos paneles hermanos, lado a lado ──────────────────────────────────────
   Se reparten el ancho y **se apilan solos por medida**, no por punto de quiebre: la regla del
   sistema es mirar el contenedor, así que el mismo par se acomoda igual embebido en una columna
   angosta que a pantalla completa. Lo usan los dos bloques de totales del recibo y las dos
   tandas de pago. */
/* 🔴 **Dos columnas, no «las que entren»** (17/09/2026). Estaba con `auto-fit`, que fabrica todas
   las pistas que quepan: en un contenedor de 1222 px con `--panel-minimo` en 340 armaba **tres**
   columnas para dos paneles, así que el par ocupaba dos tercios del ancho y dejaba una columna
   muerta. Un par son **dos**, no «los que entren»: se declara y se apila por consulta de
   contenedor, que es la única forma de decir «dos o uno» y ninguna otra cosa. */
.par-de-paneles{
  display:grid;gap:var(--esp-6) var(--esp-7);align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@container app (max-width:760px){
  .par-de-paneles{grid-template-columns:minmax(0,1fr)}
}

/* ── El recibo ──────────────────────────────────────────────────────────── */
/* Los dos bloques de totales: **lado a lado**, y cada uno con sus ítems uno debajo del otro.
   Antes eran dos grillas de cuatro columnas apiladas, y el operador comparaba *Del recibo* contra
   *Pagado* mirando dos renglones separados por media pantalla. Son la misma cuenta de los dos
   lados: van juntos. */
.bloques-del-recibo{
  display:grid;gap:var(--esp-6) var(--esp-7);align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@container app (max-width:760px){
  .bloques-del-recibo{grid-template-columns:minmax(0,1fr)}
}
/* El renglón que dice cómo viene la cosa —y los errores— cruzan las dos columnas: hablan de la
   suma de los dos bloques, no de uno. */
.bloques-del-recibo > .al-ancho{grid-column:1 / -1}
.bloque-de-totales{display:flex;flex-direction:column;min-width:0}
.bloque-de-totales .titulo-panel{margin-bottom:var(--esp-5)}
/* Uno debajo del otro, y compactos: cinco tarjetas al tamaño de la portada harían de este
   bloque la pantalla entera. Rótulo a la izquierda, número a la derecha, en un renglón. */
.bloque-de-totales .totales{display:flex;flex-direction:column;gap:var(--esp-4)}
.bloque-de-totales .total{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-6);
  padding:var(--esp-4) var(--esp-6);
}
.bloque-de-totales .total .etiqueta{margin-bottom:0;flex:none}
.bloque-de-totales .total .resultado{min-height:0;padding:0;font-size:var(--fs-medio)}
/* Los dos que cierran son **hijos de la misma grilla** que los bloques: caen en la fila siguiente,
   uno por columna, así que quedan exactamente bajo la columna que encabezan. Envolverlos en una
   grilla propia fue el primer intento y no alineaba — está contado en
   `_cuadratura_del_recibo.html`, con la medida. */
.total--cierre{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-6);
  padding:var(--esp-5) var(--esp-7);margin-top:var(--esp-2);
}
.total--cierre .etiqueta{margin-bottom:0;flex:none}
.total--cierre .resultado{
  min-height:0;padding:0;font-size:var(--fs-cifra);font-weight:var(--peso-negro);
}
/* El efectivo es el único importe que se escribe en toda la pantalla, y tiene que verse que lo
   es: el campo se muestra, no se disimula dentro de la tarjeta. */
/* T186: el ancho se mide en `ch` **del propio campo** (mono, 12 px) y alcanza para «$ 99 999 999,99»
   con su relleno; en `14ch` del rótulo, «$ 100 000,5» salía cortado por la izquierda en 390. */
.bloque-de-totales .total > .campo{flex:0 1 calc(17ch + var(--esp-6) * 2);min-width:0}

/* ── Paginación ─────────────────────────────────────────────────────────────
   La cuenta a la izquierda, los pasos a la derecha, y la línea que la separa de la tabla. En
   teléfono se apila y los dos botones se reparten el ancho: pasar de página con una mano es el
   caso normal de esta pantalla, no el excepcional. */
.paginacion{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-5);flex-wrap:wrap;
  margin-top:var(--esp-5);padding-top:var(--esp-5);border-top:1px solid var(--separador);
}
.paginacion__cuenta{
  margin:0;font-family:var(--f-dato);font-size:var(--fs-etiqueta);
  letter-spacing:var(--track-etiqueta);color:var(--texto-3);
}
.paginacion__pasos{display:flex;align-items:center;gap:var(--esp-4)}
.paginacion__donde{
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-2);
  white-space:nowrap;
}
@container app (max-width:40rem){
  .paginacion{flex-direction:column;align-items:stretch}
  .paginacion__pasos{justify-content:space-between}
  .paginacion__pasos .mini{flex:1;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* ── La grilla de la Carga · lo que va al recibo ────────────────────────────
   🔴 **Es la tabla más densa del sistema y la que menos densidad necesita.** El listado de actas
   reparte siete columnas y vive de entrar entera; ésta tiene cinco, se mira **de pie y con una
   mano**, y lo único que se hace en ella es reconocer un acta y tildarla. A 12 px sobraba ancho y
   faltaba número: veinte filas de aire con las cifras ilegibles.

   Sube el cuerpo, sube el número del acta —que es por donde se busca— y suben los dos importes,
   que es lo que se compara contra el papel. El alto de fila lo da el texto, no un `min-height`:
   una fila más alta con la misma letra chica no arregla nada. */
.grilla--recibo{font-size:var(--fs-base)}
.grilla--recibo tbody td{padding:var(--esp-5) var(--esp-6)}
.grilla--recibo tbody td.celda-rotulo{
  font-family:var(--f-dato);font-size:var(--fs-medio);font-weight:var(--peso-fuerte);
  letter-spacing:var(--track-cifra);color:var(--texto);
}
.grilla--recibo tbody td.celda-capital,
.grilla--recibo tbody td.celda-interes{
  font-size:var(--fs-medio);font-variant-numeric:tabular-nums;
}
.grilla--recibo tbody td.celda-vence{color:var(--texto-2)}
/* Los rótulos de columna acompañan el cuerpo nuevo: a 9 px sobre datos de 15 px se leían como
   una nota al pie de la tabla y no como su encabezado. */
.grilla--recibo thead th{font-size:var(--fs-etiqueta)}

/* ── La fila de carga de una tanda ──────────────────────────────────────────
   Cuatro campos y un botón. 🔴 **No es `.grilla--carga`**, aunque hasta el 17/09/2026 usara esa
   clase: aquélla es una **tabla** —sus reglas hablan de `td`, `tbody tr` y `.apilado`— y acá hay
   `div`s con `.campo-grupo`. De las reglas de aquélla sólo llegaban dos, y una alineaba a la
   derecha el número de cheque y el banco. Los cinco controles salían apilados a lo ancho del
   panel, que es exactamente como se veía. */
.fila-de-carga{
  display:grid;gap:var(--esp-5);align-items:end;margin-bottom:var(--esp-6);
  grid-template-columns:repeat(auto-fit,minmax(min(var(--campo-minimo),100%),1fr));
}
/* El botón cierra la fila y ocupa lo suyo: alineado con los campos, no estirado al ancho. */
.fila-de-carga > .boton{justify-self:start}
@container app (max-width:40rem){
  .fila-de-carga > .boton{justify-self:stretch;width:100%;min-height:var(--boton-alto-movil)}
}

/* La lista de lo ya ingresado. Es un `<ul>` y sus filas son `.tanda-fila`, la misma del stock de
   numeración: sin viñeta, la última arriba y marcada. */
.tanda{list-style:none;margin:0}
.tanda > li{margin:0}

/* ── La carga ───────────────────────────────────────────────────────────── */
/* El panel de la derecha: la consecuencia de lo elegido. Es una columna, y el total cierra. */
.totales-del-recibo{display:flex;flex-direction:column;gap:var(--esp-6)}
.totales-del-recibo .resumen{margin:0}
.totales-del-recibo .total{margin-top:var(--esp-2)}
.totales-del-recibo .acciones--panel{margin-top:var(--esp-3)}

/* El pie de la grilla de selección: cuántas van a la izquierda, cuánto suman a la derecha.
   Se apila solo cuando el contenedor no da para las dos piezas. */
.pie-de-la-grilla{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--esp-6);flex-wrap:wrap;margin-top:var(--esp-6);
}
.pie-de-la-grilla > .ayuda{font-size:var(--fs-menor);color:var(--texto-3);margin:0}
.pie-de-la-grilla > .total{flex:0 1 auto;min-width:min(260px,100%)}

/* El total destacado: el número que cierra un bloque. No cambia de tamaño —para eso está
   `.resultado--grande`— sino de peso visual: el borde se enciende y el fondo sube. */
.total--destacado{
  border-color:var(--borde-vivo);background:var(--superficie-activa);
}
.total--destacado .etiqueta{color:var(--texto-2)}

/* ── El plan ────────────────────────────────────────────────────────────── */
/* El panel de los montos. ⚠️ La spec dice que «en escritorio va fijo a la derecha»: **hoy
   no**. La pantalla es una sola columna (`.cuerpo--sin-detalle` + `.listado`),
   así que el panel baja con el resto. Queda anotado y no se resuelve acá: darle una segunda
   columna a esta pantalla es rediseñarle el esqueleto, y esta tarea escribe reglas que faltan.
   Lo que sí hace la clase es lo que su nombre promete — que el bloque de los números respire
   más que un panel cualquiera. */
/* 🔀 **Los montos del plan, en tres escalones** (26/09/2026, pedido sobre la galería de T111:
   *«todo está muy pegado… jerarquía de importancia usando distintos tamaños, opacidades,
   distancias»*). Los bloques se separan por **aire**, no por cajas: entre bloques `--esp-10`
   (32 px), entre renglones `--esp-6`/`--esp-5` (12/10 px) — la diferencia tiene que verse. Y cada escalón pesa distinto:

   1. `.montos__saldo` — el saldo del plan en grande, con las cuotas impagas debajo.
   2. `.montos__cuenta` — la cuenta a tamaño base; su resultado (`= A financiar`) con línea arriba
      y más peso.
   3. `.montos__condiciones` — un escalón más chico y apagado; el total del plan cierra con línea
      arriba y peso fuerte.

   Todos los montos en **una sola columna**: el `dd` va a la derecha con cifras tabulares, y el
   estado del anticipo vive en el `dt` para no correrlo.

   ⚠️ Las reglas de bloque llevan `.panel--la-plata` adelante a propósito: la general
   (`.panel--la-plata .resumen dd.resultado`) pesa tres clases, y una de bloque con dos pierde. */
.panel--la-plata{display:flex;flex-direction:column;gap:var(--esp-10)}
/* El título es del panel, no un bloque más: va pegado a lo que titula. */
.panel--la-plata > .titulo-panel{margin:0 0 calc(var(--esp-10) * -1 + var(--esp-6))}
.panel--la-plata > .acciones--panel,
.panel--la-plata > .ficha-al-pie{margin-top:0}
.montos__saldo{display:flex;flex-direction:column;gap:var(--esp-3)}
.montos__saldo .total--destacado{margin:0}
.montos__saldo .ayuda{margin:0;font-size:var(--fs-dato);color:var(--texto-2)}

.panel--la-plata .resumen{margin:0;gap:var(--esp-6)}
.panel--la-plata .resumen > div{align-items:baseline}
.panel--la-plata .resumen dt{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-3);
  font-size:var(--fs-dato);color:var(--texto-2)}
.panel--la-plata .resumen dd.resultado{font-size:var(--fs-base);text-align:right;
  font-variant-numeric:tabular-nums;color:var(--texto)}
/* El recibo del anticipo cobrado va **debajo** del importe, chico y en letra de texto. */
.panel--la-plata .resumen dd .sub{display:block;margin-top:var(--esp-1);font-family:var(--f-texto);
  font-size:var(--fs-menor);font-weight:var(--peso-normal);color:var(--texto-2)}

/* El resultado de la cuenta: la resta termina acá. */
.panel--la-plata .montos__resultado{padding-top:var(--esp-6);border-top:1px solid var(--separador)}
.panel--la-plata .montos__resultado dt{color:var(--texto);font-weight:var(--peso-medio)}
.panel--la-plata .montos__resultado dd.resultado{font-weight:var(--peso-fuerte)}

/* Las condiciones: un escalón más chicas y más apagadas. */
.panel--la-plata .montos__condiciones{gap:var(--esp-5)}
.panel--la-plata .montos__condiciones dt{font-size:var(--fs-menor)}
.panel--la-plata .montos__condiciones dd.resultado{font-size:var(--fs-dato);color:var(--texto-2)}
.montos__por{font-family:var(--f-dato);font-variant-numeric:tabular-nums}

/* Y el total del plan, que cierra el panel con más peso que todo lo que tiene arriba salvo el
   saldo. Va después de las condiciones para ganarles con la misma especificidad. */
.panel--la-plata .montos__total{margin-top:var(--esp-3);padding-top:var(--esp-6);
  border-top:1px solid var(--separador)}
.panel--la-plata .montos__total dt{font-size:var(--fs-dato);color:var(--texto);
  font-weight:var(--peso-medio)}
.panel--la-plata .montos__total dd.resultado{font-size:var(--fs-medio);color:var(--texto);
  font-weight:var(--peso-fuerte)}

/* La ficha al pie de un panel: responsable, observaciones. Cuelga del bloque anterior con una
   línea, y sus rótulos son los mismos de `.ficha`. */
.ficha-al-pie{
  margin-top:var(--esp-7);padding-top:var(--esp-6);border-top:1px solid var(--separador);
  display:flex;flex-direction:column;gap:var(--esp-3);
}
.ficha-al-pie h3{
  margin:0;font-size:var(--fs-dato);letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;color:var(--texto-2);font-weight:var(--peso-medio);
}
.ficha-al-pie .sub{margin:0;font-size:var(--fs-dato);color:var(--texto)}

/* El atraso de una cuota: **texto**, no un estado inventado. Va debajo del vencimiento, en el
   rojo de plazo vencido, y no se abrevia — «venció hace 12 días» se entiende sin leyenda. */
.atraso{
  display:block;margin-top:var(--esp-1);
  font-family:var(--f-texto);font-size:var(--fs-etiqueta);color:var(--estado-intimada);
}

/* Las dos listas de renglones enlazados —las actas del plan, los recibos que bloquean una
   anulación—. Misma gramática: sin viñeta, un renglón por ítem, separadas por una línea fina
   para que la vista no se pierda cuando son diez. */
.lista-de-actas,
.lista-de-bloqueantes{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  font-size:var(--fs-dato);color:var(--texto-2);
}
.lista-de-actas > li,
.lista-de-bloqueantes > li{
  padding:var(--esp-4) 0;border-bottom:1px solid var(--separador);
}
.lista-de-actas > li:last-child,
.lista-de-bloqueantes > li:last-child{border-bottom:0;padding-bottom:0}
.lista-de-actas a,
.lista-de-bloqueantes a{color:var(--texto);font-weight:var(--peso-medio)}

/* El historial de estados. Una fila por transición: cuándo, qué pasó, quién, y el motivo si lo
   hay. En escritorio las tres primeras van en renglón; el motivo siempre baja, porque es texto
   libre y puede ser largo. */
.linea-de-tiempo{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--esp-4);font-size:var(--fs-dato);
}
.linea-de-tiempo > li{
  display:grid;gap:var(--esp-2) var(--esp-5);
  grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:baseline;
  padding-bottom:var(--esp-4);border-bottom:1px solid var(--separador);
}
.linea-de-tiempo > li:last-child{border-bottom:0;padding-bottom:0}
.linea-de-tiempo .fecha{color:var(--texto-3);font-size:var(--fs-etiqueta)}
.linea-de-tiempo .quien{color:var(--texto-3);font-size:var(--fs-etiqueta);text-align:right}
.linea-de-tiempo .motivo{grid-column:1 / -1;color:var(--texto-2);font-size:var(--fs-menor)}
/* La transición en sí: «Pendiente → **Activo**». La flecha separa dos estados, así que el
   destino va en el color del texto y el origen apagado — se lee hacia dónde fue. */
.transicion{color:var(--texto-2)}
.transicion b{color:var(--texto);font-weight:var(--peso-fuerte)}
@container app (max-width:40rem){
  .linea-de-tiempo > li{grid-template-columns:minmax(0,1fr)}
  .linea-de-tiempo .quien{text-align:left}
}

/* Los tres plegables. El `<summary>` es el disparador, así que se comporta como tal: dedo
   cómodo, cursor de mano, y sin el triángulo del navegador —el estado abierto/cerrado ya lo
   dice el propio contenido—.

   🔀 **`.plegable-de-creditos-agotados` se suma a `.plegable-del-historial`** (`T112`): son la
   misma forma —un `<details>` de panel con su `.titulo-panel` adentro del `<summary>`—, y
   copiarla en una regla aparte sería la misma clase de deuda que ya evitaron los cuatro
   `.grilla--*` reusando el mapa de tarjeta. */
.plegable-del-historial > summary,
.plegable-de-creditos-agotados > summary,
.cronograma-desplegable > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--esp-4);
  min-height:var(--tactil-min);
}
.plegable-del-historial > summary::-webkit-details-marker,
.plegable-de-creditos-agotados > summary::-webkit-details-marker,
.cronograma-desplegable > summary::-webkit-details-marker{display:none}
.plegable-del-historial > summary .titulo-panel,
.plegable-de-creditos-agotados > summary .titulo-panel{margin:0}
/* 🔀 **El aire bajo el título lo pone el cuerpo, no el título** (`T181`). Era un `margin-bottom` del título
   en `[open]`, y saltaba en el primer cuadro mientras el cuerpo crecía: ahora es relleno de lo primero
   del cuerpo, que crece y se recorta con él (el mismo arreglo que `T177` hizo en `.mes-card__mas`). */
.plegable-del-historial > summary + *,
.plegable-de-creditos-agotados > summary + *{padding-top:var(--esp-6)}
.plegable-del-historial[open] > summary,
.plegable-de-creditos-agotados[open] > summary{align-items:flex-start}
.cronograma-desplegable > summary{
  font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--texto-2);
  margin-bottom:var(--esp-5);
}
@media (hover:hover) and (pointer:fine){
  .plegable-del-historial > summary:hover .titulo-panel,
  .plegable-de-creditos-agotados > summary:hover .titulo-panel,
  .cronograma-desplegable > summary:hover{color:var(--texto)}
}

/* La forma que va a tomar el cronograma, mientras todavía no hay ninguno.

   Los encabezados van atenuados —son una pista, no un dato— y el mensaje se apoya contra
   ellos en vez de flotar en el medio del panel. `.vacio` trae `padding` propio y acá sobra
   el de arriba: la tabla ya separó. */
/* Las columnas del cronograma las fija el `<colgroup>`, no el contenido: es lo que hace que
   los encabezados del vacío y los de la tabla con datos caigan en el mismo lugar. El importe
   se lleva la porción más grande porque es plata, va a la derecha y `.cifra` no parte líneas:
   una cuota de ocho cifras tiene que entrar sin desbordar. */
.grilla--cronograma{table-layout:fixed}
.col-cuota{width:26%}
.col-vence{width:34%}
.col-importe{width:40%}

.grilla--por-venir{margin-bottom:0}
.grilla--por-venir th{color:var(--texto-3)}
.vacio--por-venir{padding-top:var(--esp-7)}

/* El cronograma en una oración, para cuando la tabla se pliega: «12 cuotas de $ 48.500,00». */
.resumen-del-cronograma{
  margin:0 0 var(--esp-5);font-size:var(--fs-dato);color:var(--texto-2);
}
.resumen-del-cronograma b{
  color:var(--texto);font-family:var(--f-dato);font-variant-numeric:tabular-nums;
}
.resumen-del-cronograma .sub{display:block;color:var(--texto-3);font-size:var(--fs-etiqueta)}

/* ── Las portadas por rol (T089) ─────────────────────────────────────────────
   Cuatro pantallas, una por rol, con cuatro reglas que comparten y que son criterios y no
   gustos (`diseno/pantallas/inicio/README.md`):

     1 · Una sola cifra de titular por pantalla. Ninguna otra usa ese tamaño.
     2 · Toda métrica lleva a la pantalla que la resuelve.
     3 · Lo urgente se distingue POR FORMA, no sólo por color.
     4 · Gráfico sólo cuando el dato tiene forma. Dos de las cuatro no llevan ninguno. */

.portada{display:flex;flex-direction:column;gap:var(--esp-9)}

/* El titular. Es lo que la persona vino a saber, así que no comparte fila con nada más que su
   acción — y en teléfono ni eso: ahí la acción baja a ancho completo. */
.titular{
  /* 🔴 `center` y no `flex-end`. Con `flex-end` la cifra se alineaba al pie del bloque de
     texto, así que bastaba con que la leyenda partiera en dos renglones —«empresas designadas
     sin fiscalizar este mes» lo hace— para que el número quedara colgando abajo, descolocado.
     Centrado aguanta una leyenda de uno, dos o tres renglones sin moverse. */
  display:flex;align-items:center;gap:var(--esp-7);flex-wrap:wrap;
  padding-bottom:var(--esp-7);border-bottom:1px solid var(--separador);
}
.titular__cifra{
  font-family:var(--f-titulo);font-size:var(--fs-titular);font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra);line-height:.95;
  font-variant-numeric:tabular-nums;color:var(--texto);
}
.titular__dicho{display:flex;flex-direction:column;gap:var(--esp-1)}
.titular__leyenda{font-size:var(--fs-medio);color:var(--texto-2);max-width:34ch;text-wrap:balance}
.titular__apostilla{font-size:var(--fs-menor);color:var(--texto-3)}
.titular .boton{margin-left:auto}

/* Las fichas de estado. ⚠️ NO son totalizadores: llevan color de estado porque son deuda de
   trabajo, y el pie dice CUÁL —el más viejo, el más urgente—, porque cuatro pagos de ayer y
   cuatro de hace tres semanas no son el mismo problema. */
.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--esp-6)}
.ficha{
  display:flex;flex-direction:column;gap:var(--esp-2);
  padding:var(--esp-7);border-radius:var(--radio-panel);
  background:var(--superficie-alta);border:1px solid var(--borde);box-shadow:var(--sombra-panel);
}
.ficha__cifra{
  font-family:var(--f-titulo);font-size:var(--fs-cifra);font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra);font-variant-numeric:tabular-nums;line-height:1.05;
}
.ficha__pie{font-size:var(--fs-menor);color:var(--texto-2)}
.ficha .mini{margin-top:var(--esp-4);align-self:flex-start}
/* 📱 **El enlace de la tarjeta es un blanco táctil de 44 px** (`T163`, **C1**). Era la `.mini`
   misma, de 25 px. Ahora el `<a>` es la caja de `--tactil-min` y la pastilla va adentro, igual que
   antes: la letra no crece y la tarjeta no cambia de alto, porque el sobrante (`--holgura`, la
   mitad de lo que le falta a la pastilla para llegar a 44) se devuelve con márgenes negativos y
   la pastilla queda exactamente donde estaba. Su alto es el de la `.mini`: una línea de
   `--fs-etiqueta` con `line-height:1` y sus 7 px de relleno arriba y abajo (medido: 24,5 px; el
   borde computa 0). Si la `.mini` cambiara de alto, la pastilla sigue centrada en sus 44 px y lo
   único que se corre es el aire de la tarjeta. */
.ficha__enlace{
  --holgura:calc((var(--tactil-min) - var(--fs-etiqueta) - 14px) / 2);
  display:inline-flex;align-items:center;align-self:flex-start;
  min-height:var(--tactil-min);min-width:var(--tactil-min);
  margin:calc(var(--esp-4) - var(--holgura)) 0 calc(-1 * var(--holgura));
  text-decoration:none;border-radius:var(--radio-pastilla);
}
.ficha__enlace .mini{margin:0;align-self:center}
@media (hover:hover) and (pointer:fine){
  .ficha__enlace:hover .mini{transform:translateY(-1px);background:var(--superficie-activa)}
}
.ficha__enlace:active .mini{transform:scale(var(--escala-presion-chip))}
/* El foco se dibuja sobre la pastilla, que es lo que se ve; no sobre la caja de 44. */
.ficha__enlace:focus-visible{outline:none}
.ficha__enlace:focus-visible .mini{outline:2px solid var(--acento);outline-offset:2px}
/* 🔑 **La regla 3, y por eso es un borde y no un fondo.** Un color de fondo lo pierde quien no
   distingue ese color; un borde de 3 px cambia la FORMA de la tarjeta, y el rótulo de estado que
   va adentro lo dice además con palabras. */
.ficha--urgente{border-inline-start:3px solid var(--estado-intimada)}

/* La spec del inspector pide **numeración y medidor en una fila** en escritorio y tableta, y
   apilados en teléfono. `auto-fit` con un mínimo lo resuelve sin un punto de quiebre propio: los
   dos entran mientras haya lugar y se apilan cuando no. */
.par-de-la-portada{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--esp-6);align-items:start;
}

/* ── El medidor: una proporción contra un total conocido ─────────────────────
   No es una torta de dos porciones. Es una barra con su riel, los dos en el mismo tono, para
   que el estado se lea a lo largo de toda la barra. El número va como «18 / 26» y no como
   «69 %»: el inspector piensa en empresas, no en porcentajes. */
.medidor{display:flex;flex-direction:column;gap:var(--esp-4)}
.medidor__cuenta{
  font-family:var(--f-dato);font-size:var(--fs-cifra);font-weight:var(--peso-medio);
  font-variant-numeric:tabular-nums;
}
.medidor__riel{height:10px;border-radius:var(--radio-pastilla);background:var(--superficie-hover);overflow:hidden}
.medidor__relleno{height:100%;border-radius:var(--radio-pastilla);background:var(--acento)}
.medidor__falta{font-size:var(--fs-menor);color:var(--texto-2)}

/* ── Columnas: las actas por mes ─────────────────────────────────────────────
   Conteos discretos, así que columnas y no una línea: no hay nada que interpolar entre julio y
   agosto. Una sola serie, un solo color, sin leyenda — el título ya dice qué se muestra. */
.columnas{display:flex;flex-direction:column;gap:var(--esp-5)}
.columnas__grafico{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  align-items:end;gap:var(--esp-4);
  height:120px;padding-top:var(--esp-7);
  /* La grilla es **sólida y hairline**, nunca punteada. Un paso por encima de la superficie. */
  background:repeating-linear-gradient(
    to top,var(--separador) 0 1px,transparent 1px 25%);
}
.columna{display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.columna__barra{
  /* ≤ 24 px, punta redondeada 4 px, base cuadrada. Los 2 px de aire los da el `gap`. */
  width:100%;max-width:24px;margin:0 auto;
  background:var(--acento);
  border-radius:var(--radio-1) var(--radio-1) 0 0;
  min-height:2px;
}
.columna__valor{
  position:absolute;top:calc(-1 * var(--esp-6));left:0;right:0;text-align:center;
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-2);
  font-variant-numeric:tabular-nums;
}
/* 🔑 Los rótulos del eje van en **tokens de texto**, nunca en el color de la serie: si el eje
   se pinta del color del dato, el ojo lee el eje como si fuera un dato más. */
.columnas__eje{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--esp-4);
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-3);
  letter-spacing:var(--track-etiqueta);text-align:center;
}
.columnas__eje b{color:var(--texto-2);font-weight:var(--peso-medio)}

/* ── Barras horizontales: la carga por inspector ─────────────────────────────
   Horizontal porque los nombres son largos y tienen que leerse enteros, sin rotar ni truncar.
   ⚠️ **Todas del mismo color**, no más oscuras cuanto más largas: eso sería pintar dos veces el
   mismo dato y quemar el único canal que queda libre. */
.barras{display:flex;flex-direction:column;gap:var(--esp-5)}
.barra{display:grid;grid-template-columns:minmax(0,11rem) 1fr auto;align-items:center;gap:var(--esp-6)}
.barra__nombre{font-size:var(--fs-dato);color:var(--texto-2);overflow-wrap:anywhere}
.barra__riel{height:14px;border-radius:var(--radio-pastilla);background:var(--superficie-hover)}
.barra__relleno{
  height:100%;background:var(--acento);
  border-radius:var(--radio-pastilla) var(--radio-1) var(--radio-1) var(--radio-pastilla);
  min-width:2px;
}
.barra__valor{
  font-family:var(--f-dato);font-size:var(--fs-dato);font-variant-numeric:tabular-nums;
  color:var(--texto);
}

/* ── Los plazos de legales ───────────────────────────────────────────────────
   La urgencia se marca con una barra al inicio de la fila **más el texto**. Nunca sólo color. */
/* El contenedor existe para que las filas se separen entre sí y no contra el panel: el
   `padding` del panel ya da el aire de los bordes. */
.plazos{display:flex;flex-direction:column}
.plazo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--esp-6);
  padding:var(--esp-5) 0;border-bottom:1px solid var(--separador)}
.plazo:last-child{border-bottom:0}
.plazo__cuanto{
  display:flex;align-items:center;gap:var(--esp-4);
  font-family:var(--f-dato);font-size:var(--fs-dato);color:var(--texto-2);white-space:nowrap;
}
/* La barra al inicio de la fila da la forma que la regla 3 pide. **No cambia de color por
   urgencia**, y no es un olvido: después de los 60 días de A11 no hay un segundo plazo definido,
   así que cualquier umbral sería inventado — y el que se probó alcanzaba al 84 % de las filas.
   Lo que ordena es la antigüedad, y para eso alcanza con el orden de la lista. */
.plazo__cuanto::before{content:"";width:3px;height:1.2em;border-radius:2px;background:var(--texto-3)}
.plazo__quien{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0}
.plazo__quien b{overflow-wrap:anywhere}
.plazo__quien .sub{font-family:var(--f-dato);font-size:var(--fs-etiqueta);color:var(--texto-3)}

/* ── Lo que no se puede construir, dicho en la pantalla ──────────────────────
   No es una nota de desarrollo: es la diferencia entre una portada honesta y una demo. Va al
   pie, apagada, y dice qué falta y por qué — para que nadie acuerde sobre algo que no existe. */
.sin-datos{
  padding:var(--esp-6) var(--esp-7);border-radius:var(--radio-4);
  background:var(--superficie-hover);border:1px dashed var(--borde);
}
.sin-datos__rotulo{
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;color:var(--texto-3);
}
.sin-datos ul{margin:var(--esp-4) 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:var(--esp-3)}
.sin-datos li{font-size:var(--fs-menor);color:var(--texto-2)}

/* ── El reparto de actas (T090) ──────────────────────────────────────────────
   Tres zonas: **de quién** (el plantel con su carga), **qué actas** y **a quién**. La tercera no
   tiene panel propio: vive en `.barra-seleccion`, que ya existía en `componentes.css` escrita
   para esta pantalla y sin un solo consumidor hasta hoy.

   🔀 **La pantalla está dada vuelta respecto de su spec**, y por eso el plantel manda a la
   izquierda en vez de una cola de actas sin dueño: en este sistema esa cola es cero por
   construcción. El motivo entero está en `tareas/T090_ui_la_asignacion_de_actas.md`. */
/* 🔴 **La grilla de `.reparto` NO vive acá, y el motivo es el orden de carga.**
   `portal.css` se sirve **después** de `formatos.css`, así que una `grid-template-columns` base
   declarada acá le gana a la que la consulta de formato pone allá —misma especificidad, gana la
   última— y la pantalla **no se apila nunca**. Se vio en una captura de teléfono: las dos
   columnas lado a lado, la segunda cortada fuera de la pantalla y el texto partido letra por
   letra.

   Es la convención que `.cuerpo` ya seguía: **lo que cambia por formato declara su base junto a
   sus variantes**, en `formatos.css`. */
.reparto__plantel{display:flex;flex-direction:column;gap:var(--esp-4)}
.reparto__actas{display:flex;flex-direction:column;min-width:0}

/* La fila del plantel, cuando además de informar **elige**. Es `.barra` con un estado: el
   componente no se duplica, se le agrega lo que un enlace necesita y nada más.

   🔴 **Dos defectos que aparecieron mirando una captura y no leyendo el código.**

   1. La fila es un `<a>`, así que sus partes se escribieron con `<span>` — y un `<span>` es
      **`display:inline`**, donde `width` y `height` **no se aplican**. El relleno medía
      `0×0`: las cinco barras salían vacías y nadie lo notaba, porque el riel gris se ve igual.
      Medido contra la portada, que usa `<div>`: 572×14 ahí, 0×0 acá.
   2. En una columna de 19 rem la grilla de `.barra` —`minmax(0,11rem) 1fr auto`— dejaba **50 px**
      para el riel. Una barra de 50 px comparando 246 contra 310 no compara nada, así que acá
      **se apila**: el nombre y la cuenta en un renglón, el riel a lo ancho debajo. Es lo mismo
      que la spec pide para el teléfono —*«nombre arriba de la barra»*— por el mismo motivo. */
.barra--elegible{
  text-decoration:none;color:inherit;
  padding:var(--esp-3) var(--esp-4);margin-inline:calc(var(--esp-4) * -1);
  border-radius:var(--radio-3);
  /* El área táctil completa de la fila, no la de la barra: se elige de pie, en la tableta. */
  min-height:var(--tactil-min);
  transition:background var(--dur-corta) var(--curva-salida),transform var(--dur-corta) var(--curva-salida);
  /* Se apila: `nombre · cuenta` arriba, el riel a lo ancho debajo. */
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--esp-3) var(--esp-5);
}
.barra--elegible .barra__nombre{grid-row:1}
.barra--elegible .barra__valor{grid-row:1}
.barra--elegible .barra__riel{grid-row:2;grid-column:1 / -1}
/* 🔒 Y lo que hace que la barra exista: sin esto los `<span>` son inline y su caja mide cero. */
.barra--elegible .barra__riel,
.barra--elegible .barra__relleno{display:block}
@media (hover:hover) and (pointer:fine){
  .barra--elegible:hover{background:var(--superficie-hover)}
}
.barra--elegible:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* 🔒 El elegido se marca **por forma y no sólo por color**: el filete al inicio es lo que lo
   distingue con la pantalla en blanco y negro o al sol. Es la misma regla que las fichas
   urgentes de las portadas. */
.barra--elegible[aria-current]{
  background:var(--superficie-activa);
  box-shadow:inset 3px 0 0 var(--acento);
}
.barra--elegible[aria-current] .barra__nombre{color:var(--texto);font-weight:var(--peso-medio)}

/* Los campos que viven **adentro** de la barra de selección: sin la etiqueta arriba, porque ahí
   la etiqueta es el `placeholder` y el rótulo accesible va en `.oculto-visual`. */
.campo-grupo--en-linea{flex:1 1 13rem;min-width:0}

/* Las columnas de la grilla del reparto. `table-layout:fixed` necesita que alguien fije los
   anchos, y que los fije **acá** es lo que evita que los encabezados se corran al cambiar de
   página con importes de largo distinto. */
.col-marca{width:3.2rem}
.col-numero{width:6rem}
.col-empresa{width:auto}
.col-zona{width:9rem}
.col-vence{width:7rem}
/* ⚠️ `.cifra` lleva `white-space:nowrap`, así que esta columna tiene que entrar el importe más
   largo que el dominio admite. Medido con `$ 999.999.999,99`. */
.col-saldo{width:10.5rem}

/* ── Línea de tiempo: las asignaciones del acta (T090) ───────────────────────
   **No es un campo con un valor, es un recorrido**: reasignar no sobrescribe, inserta otra fila
   con su fecha y su autor — el legado hace eso y este sistema lo porta. Un «Inspector: Sosa»
   escondería que el acta cambió de manos dos veces. */
.linea-de-tiempo{display:flex;flex-direction:column;margin:0;padding:var(--esp-5) var(--esp-6);list-style:none}
.hito{
  display:grid;grid-template-columns:auto 1fr;gap:var(--esp-6);
  padding:var(--esp-4) 0 var(--esp-4) var(--esp-5);
  border-left:2px solid var(--separador);
}
/* 🔒 La vigente se distingue **por forma y texto**, no sólo por color: el filete más grueso y la
   palabra «vigente». Es la misma regla que las fichas urgentes de las portadas. */
.hito--vigente{border-left-color:var(--acento);border-left-width:3px;padding-left:calc(var(--esp-5) - 1px)}
.hito__cuando{
  font-family:var(--f-dato);font-size:var(--fs-menor);font-variant-numeric:tabular-nums;
  color:var(--texto-3);white-space:nowrap;
}
.hito__que{display:flex;flex-direction:column;gap:var(--esp-2);font-size:var(--fs-dato);min-width:0}
.hito__quien{font-size:var(--fs-menor);color:var(--texto-2);overflow-wrap:anywhere}
.hito__marca{
  font-family:var(--f-dato);font-size:var(--fs-micro);letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;color:var(--acento);
}

/* ── Blancos táctiles de 44 px: la pastilla y el conmutador de tema (T172) ───────────────────────
   Misma consulta que el resto de `T172` (ver «Blancos táctiles» en `componentes.css`):
   `(pointer:coarse), (max-width:67.5rem)`. El escritorio con mouse no cambia un píxel.

   🔑 **La caja crece, lo que se ve no.** Un blanco táctil tiene que medir 44 px de lado menor, pero
   la pastilla de `.mini` y la píldora del tema son más chicas por diseño. Es el patrón de
   `.ficha__enlace` (`T163`): el elemento es la caja de `--tactil-min`, la pastilla se dibuja con
   `::before` en el lugar donde estaba, y el sobrante (`--holgura`) se devuelve con márgenes
   negativos, así que la barra o la tarjeta que la contiene no cambia de alto.

   Quedan afuera `.ficha__enlace .mini` (su `<a>` ya es la caja de 44) y `.boton.mini` (ya mide
   `--boton-alto`). */
@media (pointer:coarse),(max-width:67.5rem){
  .mini:not(.ficha__enlace .mini,.boton){
    /* Alto natural de la pastilla: una línea de `--fs-etiqueta` (`line-height:1`), el relleno
       arriba y abajo y los dos bordes. */
    --pastilla:calc(var(--fs-etiqueta) + 2 * var(--mini-relleno-v) + 2px);
    --holgura:calc((var(--tactil-min) - var(--pastilla)) / 2);
    position:relative;isolation:isolate;display:inline-flex;align-items:center;
    min-height:var(--tactil-min);box-sizing:border-box;
    margin-block:calc(-1 * var(--holgura));
    background:none;border-color:transparent;
  }
  .mini:not(.ficha__enlace .mini,.boton)::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:calc(var(--holgura) - 1px) -1px;
    background:var(--superficie-hover);border:1px solid var(--borde-fuerte);
    border-radius:var(--radio-pastilla);
    transition:background var(--dur-corta) var(--curva-salida);
  }
  .mini:not(.ficha__enlace .mini,.boton):hover::before{background:var(--superficie-activa)}
  .mini:not(.ficha__enlace .mini,.boton):focus-visible{outline:none}
  .mini:not(.ficha__enlace .mini,.boton):focus-visible::before{outline:2px solid var(--acento);outline-offset:2px}
  /* Las dos reglas con `margin-top` propio de la pastilla restan lo que la caja le suma. */
  .vacio .mini:not(.ficha__enlace .mini,.boton){
    margin-top:calc(var(--esp-5) - (var(--tactil-min) - var(--fs-etiqueta) - 2 * var(--mini-relleno-v) - 2px) / 2);
  }

  /* El conmutador de tema: el botón es la caja de 44; la píldora de 30 se dibuja en `::before`. */
  .tema{
    --holgura:calc((var(--tactil-min) - var(--pista-alto)) / 2);
    height:var(--tactil-min);margin-block:calc(-1 * var(--holgura));
    border:0;background:none;box-shadow:none;border-radius:var(--radio-pastilla);
    transition:none;
  }
  .tema::before{
    content:"";position:absolute;inset:var(--holgura) 0;border-radius:var(--radio-pastilla);
    border:1px solid var(--borde);background:var(--superficie);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    transition:background var(--dur-cielo) var(--curva-cielo),border-color var(--dur-cielo) var(--curva-cielo);
  }
  .tema:hover{border-color:transparent}
  .tema:hover::before{border-color:var(--borde-vivo)}
  .tema:focus-visible{outline:none}
  .tema:focus-visible::before{outline:2px solid var(--acento);outline-offset:3px}
  /* Sin el borde de 1 px del botón la perilla baja y corre su lado: se devuelve el px. */
  .tema .perilla{left:calc(2px + 1px);top:calc(var(--holgura) + 2px + 1px)}
}

@media (prefers-reduced-motion:reduce){
  .mini::before,.tema::before{transition:none}
}

/* `.totales` es un carrusel con anclaje a 390: el arrastre que llega al último elemento no se
   lleva puesto el gesto de «atrás» del navegador (`T172`). Sólo el eje horizontal. */
.totales{overscroll-behavior-x:contain}


/* ═══ El acta ajustada (T155, spec `24-el-acta-ajustada.md`) ═══════════════════════════════════
   Todo con tokens y con `@container app`, como el resto del sistema. Ningún hex suelto. */

/* ── Dónde va la marca «Ajustada» ───────────────────────────────────────────
   Pegada al dato que identifica al acta en cada lista: detrás de la pastilla donde hay Estado,
   detrás del número donde no. Nunca una columna nueva (`formatos.css` reparte las siete del
   listado por `nth-child`). En el título, después del número, a su propia medida: el número sigue
   siendo el objeto tipográfico más grande. */
.marca--ajustada{margin-inline-start:var(--esp-3)}
/* En el título la marca es una pieza más de una fila que envuelve: si no entra junto al número,
   **baja a la línea siguiente, alineada a la izquierda**, y no corta nunca el número (7 · formatos). */
h1:has(> .marca--ajustada){display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-4)}
h1 > .marca--ajustada{margin-inline-start:0}

/* ── El conmutador «Acta» · «Ajuste» ────────────────────────────────────────
   El mismo componente que el del legajo y el de la nómina, pero **éste sí cumple 44 px** de alto
   (el alto de aquéllos queda declarado como deuda, no resuelto acá). La corredera se mide del
   activo, así que acompaña sola. Bajo 640, dos mitades iguales y ≥ 46 px (`conmutador--vista`
   ya reparte el ancho). */
.conmutador--acta > a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--boton-alto);
}
@container app (max-width:40rem){
  .conmutador--acta{display:flex;align-self:stretch}
  .conmutador--acta > a{flex:1 1 0;min-height:var(--boton-alto-movil)}
}

/* ── Las dos secciones: tapa, nota, cuadre y decisión ───────────────────────── */
.ficha--seccion{gap:var(--esp-4)}
.tapa-de-la-seccion{display:flex;align-items:center;justify-content:space-between;
  gap:var(--esp-5);flex-wrap:wrap}
.ficha .tapa-de-la-seccion h3{margin:0;display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap}
.tapa-de-la-seccion__pdf{display:flex;gap:var(--esp-4);flex-wrap:wrap}
/* Los botones de PDF bajan a una fila propia, a ancho completo, ≥ 46 px. */
@container app (max-width:40rem){
  .tapa-de-la-seccion{flex-direction:column;align-items:stretch}
  .tapa-de-la-seccion__pdf{flex-direction:column}
  .tapa-de-la-seccion__pdf .boton{width:100%;min-height:var(--boton-alto-movil)}
}
.ficha .nota-de-la-seccion{margin:0;color:var(--texto-2)}
/* El cuadre se lee como una cuenta: el renglón que suma y el que cierra pesan más. */
.detalle-fila--fuerte .l,.detalle-fila--fuerte .r{color:var(--texto);font-weight:var(--peso-fuerte)}
.detalle-fila--separa{padding-bottom:var(--esp-4);border-bottom:1px solid var(--separador)}
/* Un texto largo («Motivo») se parte en renglones y se alinea con las cifras. */
.detalle-fila .r--texto{white-space:normal;text-align:right;overflow-wrap:anywhere}
.decision-de-la-diferencia{margin:0;font-weight:var(--peso-medio)}
.ficha--seccion > .boton{align-self:flex-start;min-height:var(--boton-alto)}
.hito__pdf{display:flex;gap:var(--esp-4);flex-wrap:wrap;margin-top:var(--esp-3)}
.hito__pdf .boton{min-height:var(--boton-alto)}
/* En teléfono el hito se apila —fecha arriba, texto abajo, enlaces al pie— y cada enlace ≥ 44 px. */
@container app (max-width:40rem){
  .hito{grid-template-columns:minmax(0,1fr);gap:var(--esp-2)}
  .hito__pdf .boton{flex:1 1 auto;min-height:var(--boton-alto-movil)}
}

/* ── El circuito del ajuste: el pedido y el ajuste en curso ────────────────────
   Dos paneles con el marcado de `.aviso` —barra de tono + cuerpo—, que ya sabe decir «algo espera
   una decisión» (`--deuda`) y «una decisión tomada» (`--sobrio`). El cuerpo apila título, detalle,
   cifras y la fila de botones. Con tres botones el orden va de la más destructiva a la izquierda a
   la más constructiva a la derecha; a 390 se apilan a ancho completo con **la constructiva
   arriba** (`column-reverse`) y cada botón ≥ 46 px. */
.circuito{display:flex;flex-direction:column;gap:var(--esp-5)}
.circuito__panel{align-items:stretch}
.circuito__cuerpo{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0;flex:1}
.circuito__cuerpo p{margin:0}
.circuito__titulo{font-size:var(--fs-medio);line-height:1.3}
.circuito__cifras{display:flex;flex-direction:column;gap:var(--esp-2);max-width:36rem}
.circuito__acciones{display:flex;gap:var(--esp-4);justify-content:flex-end;flex-wrap:wrap;
  margin-top:var(--esp-3)}
.circuito__acciones .boton{min-height:var(--boton-alto)}
.circuito__historial summary{cursor:pointer;color:var(--texto-2);font-size:var(--fs-menor);
  min-height:var(--boton-alto);display:flex;align-items:center}
.circuito__historial .linea-de-tiempo{padding-inline:0}
@container app (max-width:40rem){
  .circuito__acciones{flex-direction:column-reverse}
  .circuito__acciones .boton{width:100%;min-height:var(--boton-alto-movil)}
  /* «Finalizado, esperando aprobación» no entra en una línea: baja a dos, sin cortarse. */
  .circuito__cuerpo .estado{white-space:normal;text-align:left}
}
.subtitulo-del-panel{margin:0;font-size:var(--fs-dato);color:var(--texto-2);font-weight:var(--peso-fuerte)}

/* ── Las hojas del circuito: un campo de motivo que no se desborda ──────────── */
.hoja--circuito .campo-grupo{min-width:0}
.campo--motivo{min-width:0;max-width:100%;resize:vertical}
@container app (max-width:40rem){
  .hoja--circuito .acciones .boton{min-height:var(--boton-alto-movil)}
}

/* El control de N de los planes sin pagos (**T135**, spec 22 § El control de N)
   La oración con el número **adentro**: «…sin ningún pago hace más de [−] 3 [+] meses». El campo y los
   dos pasos se mantienen juntos y la frase baja sobre ellos cuando no entra (teléfono), sin un
   `@media` propio. Los pasos son enlaces —andan sin JavaScript— y miden `--tactil-comodo` de ancho
   para cumplir los 46 px del teléfono; el alto lo da `.boton`. */
.control-de-n{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4) var(--esp-5);margin:0 0 var(--esp-6)}
.control-de-n__frase{color:var(--texto)}
.control-de-n__campo{display:inline-flex;align-items:center;gap:var(--esp-3)}
.control-de-n__campo .campo{width:8ch;min-width:8ch;text-align:center;font-variant-numeric:tabular-nums}
.control-de-n__paso{min-width:var(--tactil-comodo);justify-content:center;padding-inline:0}
.control-de-n__unidad{color:var(--texto)}
.control-de-n__ayuda{flex-basis:100%;margin:0;color:var(--texto-2)}
/* La aclaración al pie: fija, sin plegar y a la altura del resultado (spec 22 § Jerarquía, nivel 5). */
.aclaracion-de-planes-sin-pagos{display:flex;flex-direction:column;gap:var(--esp-3);margin-top:var(--esp-6);color:var(--texto-2)}
.aclaracion-de-planes-sin-pagos p{margin:0}

/* ── El cálculo por período (**T226** · **C67**, **C68**, **C69**) ──────────────────────────────
   Un mes con saldo negativo fuera del umbral es lo que la empresa depositó de más. Se muestra «A favor»
   —en positivo y **en texto**, nunca con un menos pegado a una cifra de una columna de deuda— y su
   color es el del estado, no el rojo de la mora (F4): el rojo es de lo que se debe.

   Tres lugares lo dicen y los tres usan lo mismo: la celda del saldo, la zona «Saldo a favor de la
   empresa» y la tarjeta del total. */

/* El estado de un mes: un punto y su texto, bajo la cifra. Ancho de la celda, no de su contenido: el
   texto envuelve (las salidas se llaman «Crédito a reconocer al confirmar») y el importe no se parte. */
.mes-estado{
  display:flex;align-items:baseline;justify-content:flex-end;gap:var(--esp-3);
  margin-top:var(--esp-1);font-family:var(--f-texto);font-size:var(--fs-etiqueta);
  font-weight:var(--peso-fuerte);line-height:1.3;letter-spacing:normal;text-transform:none;
  text-align:right;white-space:normal;color:var(--texto-2);
}
.mes-estado i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;display:block}
.mes-estado--a-favor,.mes-estado--credito{color:var(--estado-plan)}
.mes-estado--sin-resolver{color:var(--estado-deuda)}
.mes-estado--ajustado{color:var(--estado-sin)}
/* «No suma al total»: una aclaración, no un estado. Sin punto y sin peso. */
.mes-estado--no-suma{font-weight:var(--peso-normal);color:var(--texto-2)}
/* En la tarjeta de teléfono las celdas del saldo alinean a la izquierda y el estado las sigue; el
   total, que alinea a la derecha, lleva el suyo a la derecha. */
.grilla--detalle td.c-saldo .mes-estado,
.grilla--carga td.c-saldo .mes-estado{justify-content:flex-end}
@container app (max-width:40rem){
  .grilla.grilla--detalle tbody td.c-saldo .mes-estado,
  .grilla.grilla--detalle tbody td.c-total .mes-estado{justify-content:flex-start}
  .grilla.grilla--detalle tbody td.c-total .mes-estado{justify-content:flex-end;text-align:right}
  .grilla.grilla--carga tbody td.c-saldo .mes-estado{justify-content:flex-end}
}

/* El total del acta explica que los meses a favor no compensan (**C68**). */
.total .pie.pie--sin-compensar{color:var(--texto);font-weight:var(--peso-fuerte);margin-top:var(--esp-3)}

/* La zona «Saldo a favor de la empresa». Una sola cifra de nivel 2: lo que falta resolver. */
.excedente{display:flex;flex-direction:column}
#detalle-mensual > .excedente{margin-top:var(--esp-8)}
.excedente__regla{margin:0;font-size:var(--fs-base);color:var(--texto-2);line-height:var(--alto-linea);
  max-width:64ch}
.excedente__regla b{color:var(--texto);font-weight:var(--peso-fuerte)}
.excedente__cifra{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--esp-3) var(--esp-6);margin:0}
.excedente__cifra-valor{
  font-family:var(--f-dato);font-size:var(--fs-cifra);font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra);color:var(--texto);line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.excedente__cifra-rotulo{font-size:var(--fs-base);color:var(--texto-2)}
.excedente__resuelto{font-size:var(--fs-base);color:var(--texto-2);white-space:nowrap}
.excedente__resuelto b{font-family:var(--f-dato);font-variant-numeric:tabular-nums;color:var(--texto)}
.excedente__meses{list-style:none;margin:0;display:flex;flex-direction:column;gap:var(--esp-6)}
.excedente__mes{
  display:flex;flex-direction:column;gap:var(--esp-5);
  padding:var(--esp-6) var(--esp-7);border:1px solid var(--borde-zona);border-radius:var(--radio-control);
}
.excedente__mes:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.excedente__cabeza{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--esp-3) var(--esp-6)}
.excedente__periodo{font-family:var(--f-titulo);font-size:var(--fs-medio);font-weight:var(--peso-fuerte);
  color:var(--texto)}
.excedente__importe{font-family:var(--f-dato);font-size:var(--fs-medio);font-weight:var(--peso-fuerte);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--texto)}
.excedente__cabeza .mes-estado{margin:0;justify-content:flex-start;text-align:left}
.excedente__resolucion,.excedente__invalidada{margin:0;font-size:var(--fs-base);color:var(--texto-2);
  line-height:var(--alto-linea)}
.excedente__invalidada{color:var(--texto)}
.excedente__invalidada b{color:var(--estado-deuda)}
.excedente__acciones{display:flex;flex-wrap:wrap;gap:var(--esp-4)}
.excedente__historial-titulo{margin:0 0 var(--esp-4);font-size:var(--fs-base);font-weight:var(--peso-fuerte);
  color:var(--texto)}
.excedente__historial ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--esp-4);font-size:var(--fs-base);color:var(--texto)}
.excedente__historial .sub{display:block;font-size:var(--fs-etiqueta);color:var(--texto-2)}
@container app (max-width:40rem){
  .excedente__mes{padding:var(--esp-6)}
  .excedente__acciones .boton{flex:1 1 100%;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* Los meses que «Finalizar» pide resolver: cada uno es un enlace de 44 px (C1). */
.hoja__enlaces{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hoja__enlaces a{display:inline-flex;align-items:center;min-height:var(--tactil-min);
  font-variant-numeric:tabular-nums}