/* ============================================================================
   Sistema OSECAC — Componentes
   Depende de tokens.css y base.css. Ningún color literal vive acá.
   ========================================================================== */

/* ── Vidrio ─────────────────────────────────────────────────────────────────
   La superficie del sistema. Todo panel la usa; nada de datos va sin ella. */
.vidrio{
  background:var(--superficie);
  backdrop-filter:blur(var(--desenfoque-panel)) saturate(var(--saturacion-vidrio));
  -webkit-backdrop-filter:blur(var(--desenfoque-panel)) saturate(var(--saturacion-vidrio));
  border:1px solid var(--borde);
}
.vidrio--cromo{
  backdrop-filter:blur(var(--desenfoque-cromo)) saturate(var(--saturacion-vidrio));
  -webkit-backdrop-filter:blur(var(--desenfoque-cromo)) saturate(var(--saturacion-vidrio));
}
.panel{
  background:var(--superficie-alta);
  border-radius:var(--radio-panel);
  box-shadow:var(--sombra-panel);
  overflow:hidden;
  /* 🔴 **El panel no tenía aire** (16/09/2026). `.panel` nació como superficie pura —fondo,
     curva y sombra— y el `padding` lo ponía cada quien: `.ficha` lo declara, `.ingreso .panel`
     lo declara, y los once templates que usan `.panel` pelado **no lo tenían de ningún lado**.
     Con `overflow:hidden` encima, el `<h2>` de cada sección quedaba **recortado contra la
     curva**. Es la causa de que el recibo, la carga y el alta del plan se vieran mal a la vez.
     `.ficha` sigue ganando con el mismo valor —`portal.css` carga después—, así que el panel
     de un legajo no cambia ni un píxel. */
  padding:var(--esp-7);
}
/* La excepción: el panel cuyo contenido es una tabla a sangre. Abre con `.tapa`, que ya trae su
   propio `padding` y su borde inferior, y la tabla va de borde a borde a propósito —cada píxel
   de ancho es una columna que se lee—. Ésos ya se veían bien: el aire los rompería. */
.panel:has(> .tapa){padding:0}

/* 🔴 **Pero lo que justifica el cero es la tabla, no la tapa** (20/09/2026). La condición que
   estaba escrita es «tiene tapa», y hay paneles que abren con tapa y siguen con cualquier otra
   cosa: las barras de la portada del supervisor, la paginación debajo de la grilla. Ésos
   perdían **todo** el aire y su contenido quedaba pegado a la curva del panel, que se comía el
   último número —«310» salía «31», «246» salía «24»— en los tres formatos por igual.

   Se veía que era esto porque `.linea-de-tiempo` ya se había puesto su propio `padding` a mano
   para sobrevivir al cero: cada componente que caía acá venía pagando el arreglo por separado.

   El cuerpo recupera el aire **en los dos ejes**: de costado con `--esp-6`, la misma medida
   que usa `.tapa`, para que el contenido quede **alineado con el rótulo** que lo encabeza y no
   corrido 4 px; y arriba y abajo con `--esp-5`, porque el defecto también era vertical —la
   última barra del plantel quedaba apoyada contra la curva de abajo del panel—.
   Quedan afuera las tres cosas que llegan a los dos bordes a propósito: la tabla, el marco que
   la desplaza en pantallas angostas, y la barra de selección, cuyo borde inferior tiene que
   separar de lado a lado igual que la tapa.

   ⚠️ Va como **exclusión**, no como «poné el aire y después sacáselo a estos tres». Medido: la
   segunda forma le borraba a `.barra-seleccion` su propio `padding` de 12 px y su texto
   terminaba igual de pegado al borde que el número de la portada. */
.panel:has(> .tapa) > :not(.tapa, table, .desplazable, .barra-seleccion){
  padding:var(--esp-5) var(--esp-6);
}

/* ── La fila de una opción · .opcion ────────────────────────────────────────
   Lo que explica a la izquierda y lo que se toca a la derecha. Es la forma de las tres
   secciones de la configuración (**T106**), y el sistema no tenía ninguna: todo lo que había
   era tabla, tarjeta o formulario, y una preferencia no es ninguna de las tres.

   ⚠️ **Envuelve, no se aprieta.** En teléfono el texto y el control no entran en un renglón de
   366 px; con `flex-wrap` el control baja entero en vez de estrangular la explicación. El
   `margin-left:auto` del control es lo que lo pega a la derecha mientras comparten renglón, y
   deja de aplicar solo cuando bajan. */
.opcion{
  display:flex;align-items:center;gap:var(--esp-6) var(--esp-7);flex-wrap:wrap;
}
.opcion__detalle{
  /* 🔴 **La medida se corta en 56ch, que es la que el sistema ya usa para texto explicativo**
     —`.vacio__detalle`—. Sin el tope, en escritorio la explicación salía en **un solo renglón
     de 110 caracteres**: técnicamente correcto y de hecho ilegible, porque el ojo pierde el
     principio del renglón siguiente. Se vio mirando la captura. */
  margin:0;flex:1 1 24ch;min-width:0;max-width:56ch;
  font-size:var(--fs-dato);color:var(--texto-2);line-height:var(--alto-linea);
}
.opcion > :not(.opcion__detalle){margin-left:auto;flex:none}

/* ── Título de panel ────────────────────────────────────────────────────────
   El rótulo que encabeza una sección adentro de un panel. Es hermano de `.ficha h3` y de
   `.tapa .zona`, y comparte su gramática: versalitas en la tipografía de dato, apagado, con
   el aire de `--track-seccion`. No compite con el `<h1>` de la pantalla — nombra un bloque,
   no la página. */
.titulo-panel{
  display:flex;align-items:baseline;gap:var(--esp-4);flex-wrap:wrap;
  margin:0 0 var(--esp-6);
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  letter-spacing:var(--track-seccion);text-transform:uppercase;color:var(--texto-2);
}
/* La coletilla que a veces lo acompaña —«no editable»— va todavía más apagada y sin versalitas:
   es una aclaración, no parte del nombre de la sección. */
.titulo-panel .ayuda{
  font-family:var(--f-texto);font-size:var(--fs-menor);font-weight:var(--peso-normal);
  letter-spacing:normal;text-transform:none;color:var(--texto-3);
}
/* Cuando el título comparte renglón con un contador, el margen lo pone la fila. */
.fila-etiqueta .titulo-panel{margin:0}

/* ── Botón ──────────────────────────────────────────────────────────────────
   Estados: normal · hover · activo · foco · deshabilitado.
   El texto dice exactamente lo que va a pasar ("Registrar pago", no "Aceptar"). */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-4);
  min-height:var(--boton-alto);padding:0 var(--esp-7);
  border:1px solid transparent;border-radius:var(--radio-pastilla);
  background:var(--acento);color:var(--acento-tinta);
  font-family:var(--f-texto);font-size:var(--fs-dato);font-weight:var(--peso-fuerte);
  cursor:pointer;white-space:nowrap;
  /* El isotipo de la espera va **superpuesto y centrado**, no al lado: sumarlo a
     la fila ensancharía el botón y haría saltar la barra de acciones entera
     justo cuando el operador acaba de apretar (`movimiento.css` §11). */
  position:relative;
  /* `.boton` también se le pone a un `<a>` —el «Reintentar» de la pantalla sin
     conexión es una navegación, no una acción— y ahí el navegador subraya por su
     cuenta. Un botón con subrayado se lee como dos cosas a la vez. */
  text-decoration:none;
  box-shadow:var(--sombra-control);
  transition:transform var(--dur-corta) var(--curva-salida),
             box-shadow var(--dur-corta) var(--curva-salida),
             background var(--dur-corta) var(--curva-salida),border-color var(--dur-corta) var(--curva-salida);
}
/* El gesto: reposa · sube y despliega sombra al pasar · se hunde al presionar */
/* 🔴 **Los gestos de hover van detrás de `hover:hover`** (15/09/2026).
   En una pantalla táctil el `:hover` se dispara al tocar y **queda pegado** hasta
   que se toque otra cosa: el botón que el inspector apretó se queda levantado y
   con sombra, como si siguiera bajo el dedo. La tablet al sol es un formato de
   primera clase de este sistema, así que el gesto se declara sólo donde existe un
   puntero de verdad. En táctil manda `:active`, que ya está y es el correcto. */
@media (hover:hover) and (pointer:fine){
  .boton:hover{transform:translateY(var(--elevacion));box-shadow:var(--sombra-control-alta)}
}
/* 🔀 **Se hunde, no sólo se apoya** (T117c, 27/09/2026). Hasta acá `:active` volvía a
   `translateY(0)`: sin puntero fino —la tableta, el teléfono— eso es el reposo, así que presionar
   no cambiaba nada, y la galería lo confirmó. Ahora el botón se achica un escalón y la sombra baja
   por debajo del reposo; al soltar vuelve con el mismo par `--dur-corta` + `--curva-salida` de la
   transición de arriba. Va **después** del `:hover` con el mismo peso: con los dos puestos gana
   éste, y el botón que subió 2 px baja y se hunde en el mismo recorrido. */
.boton:active{
  transform:scale(var(--escala-presion-chip));box-shadow:var(--sombra-control-presion);
  /* 🔀 **Se hunde en `--dur-instante`, se suelta en `--dur-corta`** (`T181`): hundirse es la respuesta al
     dedo y tiene que ser inmediata; la vuelta, que es la transición del reposo de arriba, se ve. */
  transition:transform var(--dur-instante) var(--curva-salida),
             box-shadow var(--dur-instante) var(--curva-salida),
             background var(--dur-corta) var(--curva-salida),border-color var(--dur-corta) var(--curva-salida);
}
.boton--secundario:hover{border-color:var(--borde-vivo)}
.boton[disabled],.boton[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;
}
.boton--secundario{
  background:var(--superficie-hover);color:var(--texto);border-color:var(--borde);
}
.boton--terciario{
  background:transparent;color:var(--acento);border-color:transparent;box-shadow:none;
  padding:0 var(--esp-5);
}
.boton--terciario:hover{box-shadow:none;transform:none}
.boton--peligro{background:var(--estado-intimada-fondo);color:var(--estado-intimada);border-color:var(--estado-intimada-borde)}
.boton svg{width:16px;height:16px;flex:none}

/* ── Campo ──────────────────────────────────────────────────────────────── */
.campo{
  width:100%;min-height:var(--campo-alto);padding:var(--esp-3) var(--esp-6);
  background:var(--superficie-hover);border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-control);
  color:var(--texto);font-family:var(--f-texto);font-size:var(--fs-dato);
  transition:border-color var(--dur-corta) var(--curva-salida),box-shadow var(--dur-corta) var(--curva-salida);
}
.campo::placeholder{color:var(--texto-3)}
/* 🔴 **El borde de un campo se mide contra el fondo de afuera, no contra el relleno** (T166). Con
   `--borde` daba 1,01:1 en diurno y 1,77:1 en nocturno: el campo se adivinaba por el relleno
   (1,15:1). `--borde-fuerte` da ≥ 3:1 en los dos temas (WCAG 1.4.11). Como el reposo ya es más
   firme que `--borde-vivo`, el `:hover` sube al acento: con `--borde-vivo` el borde se aclaraba
   al pasar el puntero. El foco se distingue del hover por el anillo, no por el borde. */
.campo:hover{border-color:var(--acento)}
.campo:focus-visible{border-color:var(--acento)}
/* 🔀 **La presión del campo es sólo tinte, sin escala** (T166, **R9**: después del `:hover`): un
   campo que se achica mientras uno escribe distrae. El tinte se apila sobre el relleno con una
   sombra interior en vez de reemplazarlo: `--superficie-activa` (.11) apenas supera a
   `--superficie-hover` (.09) en diurno, y reemplazar el fondo no se vería. */
.campo:active{box-shadow:inset 0 0 0 var(--campo-alto) var(--superficie-activa)}
.campo[aria-invalid="true"]{border-color:var(--estado-intimada)}
.campo--busqueda{border-radius:var(--radio-pastilla);padding-inline:var(--esp-7)}

/* El campo de plata. Alineado a la derecha y con cifras de ancho fijo, por la misma razón que
   la columna de una grilla: dos importes escritos uno debajo del otro tienen que poder
   compararse **por la forma**, sin leerlos. `inputmode="decimal"` lo pone el marcado. */
.campo--importe{
  text-align:right;font-family:var(--f-dato);font-variant-numeric:tabular-nums;
}
/* T186: todo campo que formatea al tipear (`data-importe`) lleva cifras de ancho fijo, también el que
   no es `.campo--importe` (las celdas de la carga del detalle): «$ 1 000 000,00» no se descuadra
   al sumar un dígito. */
.campo[data-importe]{font-variant-numeric:tabular-nums}
/* ── Grupo de campo ─────────────────────────────────────────────────────────
   Rótulo arriba, control abajo. Existía **tres veces anidado** —bajo `.ingreso`, bajo
   `.hoja-tarea`— y suelto en ningún lado, así que en el recibo, la carga y el alta del plan el
   rótulo y el control salían **en la misma línea**, a tamaño de cuerpo. Es un componente del
   sistema: su ley vive acá y los contextos sólo ajustan. */
.campo-grupo{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.campo-grupo > span,
.campo-grupo > label{
  font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--texto-2);
}
.campo-grupo > .ayuda{
  font-size:var(--fs-menor);font-weight:var(--peso-normal);color:var(--texto-3);
}

/* Varios grupos en una fila. Se reparten el ancho en partes iguales y **se apilan solos**
   cuando el contenedor no da: la medida es `--campo-minimo`, no un punto de quiebre, así que
   el mismo bloque se acomoda igual embebido en un panel angosto que a pantalla completa. */
.campos-en-fila{
  display:grid;gap:var(--esp-6);
  grid-template-columns:repeat(auto-fit,minmax(min(var(--campo-minimo),100%),1fr));
}

/* ── El resultado: la celda que el sistema calculó ──────────────────────────
   No es un campo gris. Un `<input disabled>` invita a intentar escribirlo y después no deja;
   el resultado se **muestra** —misma tipografía y mismas cifras que el total, para que se lea
   como plata y no como texto—. Lo usan el recibo, la carga y el cálculo del plan. */
.resultado{
  display:block;min-height:var(--campo-alto);
  padding:var(--esp-3) 0;
  font-family:var(--f-titulo);font-size:var(--fs-medio);font-weight:var(--peso-fuerte);
  font-variant-numeric:tabular-nums;letter-spacing:var(--track-cifra);
  color:var(--texto);text-align:right;line-height:1.3;
}
/* El total de una pantalla: el número que el operador vino a ver. */
.resultado--grande{font-size:var(--fs-cifra);font-weight:var(--peso-negro);line-height:1.05}
/* El resultado que no es plata —el nombre del agente que devolvió el padrón—. Vuelve a la
   tipografía de texto y a la izquierda: un apellido con `tabular-nums` y alineado a la derecha
   se lee como si fuera un importe. */
.resultado--texto{
  font-family:var(--f-texto);font-size:var(--fs-dato);font-weight:var(--peso-normal);
  font-variant-numeric:normal;letter-spacing:normal;text-align:left;color:var(--texto);
}

/* ── Resumen ────────────────────────────────────────────────────────────────
   La lista de definición corta —rótulo a la izquierda, valor a la derecha— que precede a un
   total. Sin regla propia heredaba los márgenes del navegador en `<dl>` y `<dd>`, y de ahí las
   «distancias erráticas» del panel de la carga. */
.resumen{display:flex;flex-direction:column;gap:var(--esp-3);margin:0 0 var(--esp-6)}
.resumen > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-5);
}
.resumen dt{font-size:var(--fs-dato);color:var(--texto-2);margin:0}
.resumen dd{margin:0;min-width:0}
/* Adentro del resumen el resultado es un renglón más, no el titular del panel. */
.resumen dd.resultado{min-height:0;padding:0;font-size:var(--fs-dato);font-family:var(--f-dato)}

/* El acta de la carga de una boleta (`T216`, spec 21 § 1 · El acta). Dos `.resumen--del-acta`: quién es
   el acta y cuánto reclama, con una línea fina entre ellos (**B2**). Es el paso de apoyo de la
   pantalla: lo que se lee va en `--texto-2` y los importes en peso normal (**B9**); sólo el
   **Total del acta**, que es el resultado de la suma, va en peso fuerte, con su línea fina arriba
   (**B1**). Los importes no se parten (**C6**) y alinean sus comas a la derecha (`tabular-nums`). */
.resumen--del-acta + .resumen--del-acta{
  padding-top:var(--esp-5);border-top:1px solid var(--separador);
}
.resumen--del-acta dd.resultado{font-weight:var(--peso-normal);color:var(--texto-2);white-space:nowrap}
.resumen--del-acta dt{min-width:0}
.zona__cuerpo > .resumen--del-acta:last-child{margin-bottom:0}
.resumen--del-acta dt .ayuda{font-size:var(--fs-menor);color:var(--texto-2)}
.resumen--con-total dd.resultado{text-align:right}
.resumen--con-total .resumen__total{
  padding-top:var(--esp-4);border-top:1px solid var(--separador);
}
.resumen--con-total .resumen__total dt,
.resumen--con-total .resumen__total dd.resultado{
  font-weight:var(--peso-fuerte);color:var(--texto);
}
/* Un dato de sólo lectura dentro de un paso —«N.º de boleta · se asigna al registrar»—: es texto, no un
   campo deshabilitado, así que ni se tabula ni se anuncia como control. */
.dato-fijo{margin:0;font-size:var(--fs-menor);color:var(--texto-2)}
.dato-fijo b{font-weight:var(--peso-medio);color:var(--texto)}
/* «(obligatorio)» y «(opcional)» en el rótulo de un paso: texto en el tono del rótulo, sin cursiva
   ni peso (la marca es la palabra, no el color) y sin que el `--texto-3` de la ayuda los toque. */
.zona--paso .campo-grupo > span > i{font-style:normal;font-weight:var(--peso-normal)}
.zona--paso .campo-grupo > .ayuda,
.zona--paso .campo-grupo output .ayuda{color:var(--texto-2)}

/* ── Acciones al pie de un panel ────────────────────────────────────────────
   Separadas por una línea, alineadas a la derecha, y **al ancho completo en teléfono**: en una
   tableta al sol el botón que confirma un recibo no puede medir 90 px. */
.acciones--panel{
  display:flex;gap:var(--esp-4);justify-content:flex-end;flex-wrap:wrap;
  margin-top:var(--esp-7);padding-top:var(--esp-6);border-top:1px solid var(--separador);
}
@container app (max-width:40rem){
  .acciones--panel{flex-direction:column-reverse}
  .acciones--panel > .boton{width:100%;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* ── La barra de acciones, y su «Más» (`T111`) ──────────────────────────────
   Una pantalla con **varias** acciones sobre el mismo sujeto —el plan tiene hasta seis— y una
   sola que se hace todos los días. En escritorio van todas en el pie del panel, como siempre. En
   tableta y teléfono **no caben, y apilarlas es peor**: seis botones de 46 px en una barra fija
   tapan el cronograma, que es lo que el operador vino a mirar. Entonces la barra baja fija con
   **una** —la primaria— y el resto despliega hacia arriba desde «Más».

   🔴 **La primaria nunca es destructiva.** Anular, deshacer e intimar van siempre en «Más»: se
   piden a propósito, no con el pulgar en el borde de la pantalla.

   ⚠️ **«Más» es un `popover` nativo, no un `<details>`.** En escritorio el grupo tiene que verse
   **desplegado** y en tableta **plegado**, y el contenido de un `<details>` cerrado no lo puede
   mostrar el CSS. El `[popover]` sí: en escritorio `display:contents` lo disuelve en la fila
   —y anula de paso todo el estilo que el navegador le pone—, y en tableta abre sin JavaScript
   (`popovertarget`), cierra con `Escape` o tocando afuera, y vive en la capa superior, así que
   la barra fija no lo recorta. */
.acciones__mas{display:contents}
.acciones__mas-boton{display:none}
/* Lo que un botón **se lleva**, dicho adentro del botón: «Deshacer plan y su recibo 004512». */
.acciones__detalle{font-weight:var(--peso-normal);color:var(--texto-2)}

@container app (max-width:67.5rem){
  .acciones--barra{
    position:fixed;left:0;right:0;z-index:19;
    bottom:calc(var(--esp-6) + env(safe-area-inset-bottom,0px));
    margin:0 var(--esp-6);padding:var(--esp-7);
    display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;
    border:1px solid var(--borde);border-radius:var(--radio-3);
    /* La superficie **fija** por la que pasa el contenido: el token de panel se transparenta
       flotando y los renglones de atrás se leían encima de los botones. 🔴 **Opaca** (T166,
       **A1**, **D6**): `--cromo` solo es 86 %; va sobre el piso del tema y sin `backdrop-filter`. */
    background:linear-gradient(var(--cromo),var(--cromo)),var(--cielo-piso);
    box-shadow:var(--sombra-panel);
  }
  /* Con la hoja abierta la barra se va: el velo es `absolute` contra el marco y una barra fija
     por encima de él quedaría ofreciendo acciones detrás de la decisión en curso. */
  [data-hoja-abierta] .acciones--barra{visibility:hidden}
  .acciones.acciones--barra > .boton{width:auto;min-height:var(--boton-alto-movil)}
  /* La primaria ocupa lo que sobra. Se la elige como «el botón que no es "Más"» —en la barra no hay
     otro— y no por su modificador de primario, que es una excepción declarada del sistema: `.boton`
     a secas ya es el primario. */
  .acciones.acciones--barra > .boton:not(.acciones__mas-boton){flex:1;justify-content:center}
  .acciones__mas-boton{display:inline-flex}

  .acciones__mas{display:none}
  /* 🔀 **Sin caja: se despliegan los botones solos** (26/09/2026, pedido del usuario sobre la
     galería de T111: *«desplegar los botones pero sin esa estructura rectangular de fondo que los
     contiene»*). El contenedor no pinta nada —ni fondo, ni borde, ni sombra, ni relleno— y los
     botones suben apilados, alineados a la derecha sobre «Más».

     🔴 **Cada botón es opaco y lleva su sombra.** Sin la caja, lo que tapa el contenido de atrás es
     el botón: con el fondo translúcido de `.boton--secundario` el saldo se leería a través (es el
     defecto que ya se vio con la caja de vidrio). El piso del tema con la superficie encima da el
     mismo tono, sin transparencia. */
  /* 🔀 **La forma va en el popover cerrado también, no sólo abierto** (`T181`): ahora sale con una
     transición (`display` y `overlay` discretos lo retienen en la capa superior mientras se va), y en
     esos cuadros, sin `:popover-open`, el popover volvería al estilo del navegador —centrado, con
     fondo y borde—. */
  .acciones__mas{
    flex-direction:column;align-items:flex-end;gap:var(--esp-4);
    position:fixed;inset:auto var(--esp-6) auto auto;margin:0;padding:0;
    /* Arriba de la barra: su alto es el botón más los dos rellenos. */
    bottom:calc(var(--boton-alto-movil) + var(--esp-7) * 2 + var(--esp-6) * 2 + env(safe-area-inset-bottom,0px));
    max-width:calc(100% - var(--esp-6) * 2);
    border:0;background:transparent;box-shadow:none;overflow:visible;
    transition:display var(--dur-instante) var(--curva-salida) allow-discrete,
               overlay var(--dur-instante) var(--curva-salida) allow-discrete;
  }
  .acciones__mas:popover-open{display:flex}
  .acciones__mas .boton{
    width:auto;justify-content:center;min-height:var(--boton-alto-movil);
    background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso);
    box-shadow:var(--sombra-panel);
    /* 🔀 **Suben escalonados y bajan juntos** (`T181`). Entraban con un `@keyframes` y al cerrar se
       cortaban en un cuadro. Ahora son transiciones: el desplazamiento va por `translate` (el
       `transform` sigue siendo de la presión) y, cerrado, todos bajan a la vez en `--dur-instante`;
       abierto, suben en `--dur-corta`, primero el más cercano a «Más». Reabrir a mitad parte de donde
       iban. */
    opacity:0;translate:0 var(--esp-4);
    transition:opacity var(--dur-instante) var(--curva-salida),translate var(--dur-instante) var(--curva-salida),
               transform var(--dur-corta) var(--curva-salida),box-shadow var(--dur-corta) var(--curva-salida);
  }
  .acciones__mas:popover-open .boton{
    opacity:1;translate:none;
    transition:opacity var(--dur-corta) var(--curva-salida) var(--escalon,0s),
               translate var(--dur-corta) var(--curva-salida) var(--escalon,0s),
               transform var(--dur-corta) var(--curva-salida),box-shadow var(--dur-corta) var(--curva-salida);
  }
  @starting-style{
    .acciones__mas:popover-open .boton{opacity:0;translate:0 var(--esp-4)}
  }
  .acciones__mas .boton--peligro{
    background:linear-gradient(var(--estado-intimada-fondo),var(--estado-intimada-fondo)),var(--cielo-piso);
  }
  .acciones__mas .acciones__detalle{margin-left:var(--esp-2)}
  /* Suben escalonados desde «Más»: primero el más cercano. Corto —el menú se abre para usarlo—. */
  .acciones__mas .boton:nth-last-child(2){--escalon:calc(var(--paso-del-mas) * 1)}
  .acciones__mas .boton:nth-last-child(3){--escalon:calc(var(--paso-del-mas) * 2)}
  .acciones__mas .boton:nth-last-child(4){--escalon:calc(var(--paso-del-mas) * 3)}

  /* La barra no puede tapar el último renglón: el listado deja su alto libre abajo. */
  .listado:has(.acciones--barra){
    padding-bottom:calc(var(--boton-alto-movil) + var(--esp-7) * 2 + var(--esp-6) * 2 + env(safe-area-inset-bottom,0px));
  }
}
/* En teléfono va **encima** de las pestañas, que también están fijas al borde de abajo.
   🔒 **T197 — con la reserva de la barra real, como las islas.** Se apoyaba en `--pestana-alto` (52, el
   ítem) y la barra mide 59: quedaba a 5 px de ella y no a `--esp-6`. Ahora `bottom` es
   `--reserva-inferior-telefono` (la barra medida + `--esp-6`, con la zona segura contada una vez), y
   «Más» y el relleno del listado se corren con ella. */
@container app (max-width:40rem){
  .acciones--barra{bottom:var(--reserva-inferior-telefono)}
  .acciones.acciones--barra{flex-direction:row}
  /* Lo mismo que en tableta, desde la barra de acciones: su alto (el botón y los dos rellenos) y
     `--esp-6` de aire hasta el primer botón que sube. */
  .acciones__mas{
    bottom:calc(var(--reserva-inferior-telefono) + var(--boton-alto-movil) + var(--esp-7) * 2 + var(--esp-6));
  }
  /* `+ --aire-final-telefono` (T119): el mismo colchón de más que el resto de `.listado` en
     teléfono — ver `formatos.css`, junto al resto de las reglas del contenedor. */
  .listado:has(.acciones--barra){
    padding-bottom:calc(var(--barra-inferior-alto) + var(--boton-alto-movil) + var(--esp-10) * 2
      + var(--aire-final-telefono));
  }
}

/* Con `reduce`, sólo `opacity` en `--dur-instante`, entrando y saliendo y sin escalón (`T181`, **H14**). */
@media (prefers-reduced-motion:reduce){
  .acciones__mas .boton,.acciones__mas:popover-open .boton{
    translate:none;
    transition:opacity var(--dur-instante) var(--curva-salida),box-shadow var(--dur-corta) var(--curva-salida);
  }
  @starting-style{.acciones__mas:popover-open .boton{translate:none}}
}

/* ── El desplegable del sistema ─────────────────────────────────────────────
   La lista que abre un `<select>` la dibuja el sistema operativo y **no se puede
   pintar con CSS**: es una ventana nativa, fuera del documento. Por eso los cuatro
   desplegables del sistema se veían prestados de Windows o de Android, con su
   tipografía y su azul, en el medio de una pantalla que es toda nuestra.

   🔒 **El `<select>` nativo sigue en el formulario y sigue siendo el que manda.** Lo
   que hay acá es una proyección: el botón y la lista muestran lo que el `<select>`
   dice, y al elegir le escriben el valor y le disparan `change`. Sin JavaScript no
   hay proyección y queda el `<select>` de siempre, funcionando — que es la doctrina
   de esta aplicación («sin JavaScript es más lenta, no está rota»).

   ⚠️ **El `<select>` se esconde con `opacity`, no con `display:none`.** Uno de los
   cuatro es `required`: un control obligatorio y no enfocable hace que el navegador
   **cancele el envío sin poder mostrar el globo de validación**, y el formulario deja
   de enviarse sin decir por qué. Escondido así conserva su caja, su foco y su globo. */
.desplegable{position:relative;width:100%}
.desplegable > select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}
.desplegable__control{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);
  width:100%;min-height:var(--campo-alto);padding:var(--esp-3) var(--esp-6);
  background:var(--superficie-hover);border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-control);
  color:var(--texto);font-family:var(--f-texto);font-size:var(--fs-dato);
  text-align:left;cursor:pointer;
  transition:transform var(--dur-corta) var(--curva-salida),
             box-shadow var(--dur-corta) var(--curva-salida),border-color var(--dur-corta) var(--curva-salida);
}
.desplegable__control:hover{border-color:var(--acento)}
/* La presión (T166, **R9**): después del `:hover`, mismo peso. Ancho completo → `--escala-presion`. */
.desplegable__control:active{
  transform:scale(var(--escala-presion));
  box-shadow:inset 0 0 0 var(--campo-alto) var(--superficie-activa);
}
.desplegable__control:focus-visible{border-color:var(--acento);outline:2px solid var(--acento);
  outline-offset:1px}
.desplegable__control[aria-expanded="true"]{border-color:var(--acento)}
/* La flecha la dibuja el borde de una caja girada: sin SVG, sin archivo y hereda el color. */
.desplegable__flecha{
  flex:none;width:7px;height:7px;
  border-right:1.5px solid var(--texto-3);border-bottom:1.5px solid var(--texto-3);
  /* 🔀 **El ajuste vertical va en el `transform`, no en el margen** (`T181`). Era `margin-top` −3 → 3 px,
     sin transición: la flecha saltaba de altura mientras giraba. En un ítem centrado de una fila
     flexible, un `margin-top` de −3 px la corre 1,5 px: es el mismo lugar, ahora dentro de la misma
     transición que el giro. */
  transform:translateY(-1.5px) rotate(45deg);transition:transform var(--dur-corta) var(--curva-salida)}
.desplegable__control[aria-expanded="true"] .desplegable__flecha{
  transform:translateY(1.5px) rotate(-135deg)}
/* El valor elegido envuelve en vez de cortarse con «…» (T171): con el texto agrandado «Todas las
   situaciones» no entra en una línea, y una letra cortada en un filtro es un filtro ilegible. Al
   tamaño por defecto entra en una línea y el control mide lo mismo. */
.desplegable__valor{min-width:0;overflow-wrap:anywhere;white-space:normal;text-align:left}

/* 🔴 **`fixed`, y colgada del `<body>` mientras está abierta** (T120, 28/09/2026). Era
   `position:absolute; z-index:40` contra `.desplegable`, y ese `z-index` sólo vale **dentro**
   del contexto de apilamiento del ancestro posicionado más cercano: el `transform` de la
   entrada escalonada (`.entra`/`[data-vivo]`), la cascada de `T117` y el `backdrop-filter` del
   vidrio crean uno propio en el camino. Puertas adentro la lista ganaba; puertas afuera, no — la
   fila siguiente de la grilla y el panel de resumen se pintaban **encima**, que es exactamente lo
   que reportó el dueño de producto sobre el filtro de zona del padrón de empresas.

   Es el mismo problema que ya resolvió `.calendario__panel`, dos reglas más abajo, y la misma
   solución: se saca del flujo con `fixed`, coloca `portal.js` con la misma medición
   (`colocarFlotante`, bajo el control o arriba si no entra), y por si un ancestro con `transform`
   o `filter` igual le rompe el `fixed` —lo hace: pasa a ser relativo a ese ancestro—, la lista se
   reparenta a `document.body` mientras está abierta y vuelve a `.desplegable` al cerrarse. El
   `z-index` comparte valor con el calendario: los dos son proyecciones de un control nativo y
   tienen que ganarle a `.hoja` (21) y a `.velo` (20) por igual. */
.desplegable__lista{
  /* Ancha como el control **o como su contenido**, lo que sea mayor: con el ancho
     clavado al control, «Ajuste sin deuda» se cortaba con puntos suspensivos y había
     que adivinar el estado por el que se filtra. Acotada para que una opción larga no
     se coma la pantalla. El mínimo ya no puede ser `min-width:100%` —100% de qué,
     cuando el padre pasa a ser `<body>`— así que lo escribe `portal.js` en línea,
     midiendo el control, igual que hace con `top`/`left`. */
  position:fixed;z-index:60;top:0;left:0;
  width:max-content;max-width:min(24rem,70vw);
  margin:0;padding:var(--esp-2);list-style:none;
  max-height:min(17rem,calc(var(--alto-de-pantalla) * .5));overflow-y:auto;
  /* 🔴 **Opaca, y por eso son dos capas.** Las superficies del sistema son vidrio
     —`--superficie-alta` es blanco al 8,8 %— y funcionan porque tienen contenido
     detrás que **se quiere** ver. Una lista que flota sobre la grilla es lo
     contrario: con el vidrio solo se leían las filas de actas **a través** de las
     opciones. Va el piso del cielo abajo, que es el color opaco del tema, y el
     vidrio encima para que siga siendo la misma superficie del sistema. */
  background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso);
  border:1px solid var(--borde);
  border-radius:var(--radio-control);box-shadow:var(--sombra-control-alta);
}
.desplegable__lista[hidden]{display:none}
.desplegable__opcion{
  padding:var(--esp-3) var(--esp-5);border-radius:var(--radio-2);
  font-size:var(--fs-dato);color:var(--texto-2);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* El realce del teclado y el del mouse son **el mismo**: dos realces distintos en una
   lista abierta se leen como dos selecciones. */
.desplegable__opcion:hover,.desplegable__opcion.esta-en-foco{
  background:var(--superficie-activa);color:var(--texto)}
.desplegable__opcion[aria-selected="true"]{color:var(--texto);font-weight:var(--peso-medio)}
.desplegable__opcion[aria-selected="true"]::after{content:" ✓";color:var(--acento)}
@media (prefers-reduced-motion:reduce){.desplegable__flecha{transition:none}}

/* ── El calendario del sistema ──────────────────────────────────────────────
   El mismo problema que el desplegable, con `<input type="date">`: el panel que
   abre **lo dibuja el sistema operativo**, es una ventana fuera del documento y
   **no se puede pintar con CSS**. Trece campos de fecha en ocho plantillas se
   veían prestados de Windows o de Android en el medio de una pantalla nuestra.

   🔒 **El campo nativo sigue en el formulario y sigue siendo el que manda.** Esto
   es una proyección: el botón muestra lo que el `<input>` dice —en DD/MM/YYYY, que
   es el formato de negocio— y al elegir un día le escribe el valor y le dispara
   `change`. Con eso siguen funcionando sin enterarse los `hx-get` que cuelgan de
   `fecha_plan` y de `primer_vencimiento`. Sin JavaScript no hay proyección y queda
   el campo de fecha de siempre, funcionando.

   ⚠️ **El nativo se esconde con `opacity`, no con `display:none`** — por lo mismo
   que el desplegable, y acá pesa el doble: **cuatro** de los trece campos son
   `required` (los de confeccionar el acta). Un control obligatorio y no enfocable
   hace que el navegador **cancele el envío sin poder mostrar el globo de
   validación**, y el formulario deja de enviarse sin decir por qué.

   🔑 **Los topes no se dibujan acá.** `min` y `max` los pone el servidor en el
   campo —A15, E2, P22— y el panel los lee de ahí: los días fuera de rango quedan
   apagados. Ninguna regla de negocio vive en este archivo ni en el JavaScript. */
.calendario{position:relative;width:100%}
.calendario > input[type="date"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}
.calendario__control{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);
  width:100%;min-height:var(--campo-alto);padding:var(--esp-3) var(--esp-6);
  background:var(--superficie-hover);border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-control);
  color:var(--texto);font-family:var(--f-texto);font-size:var(--fs-dato);
  font-variant-numeric:tabular-nums;
  text-align:left;cursor:pointer;
  transition:transform var(--dur-corta) var(--curva-salida),
             box-shadow var(--dur-corta) var(--curva-salida),border-color var(--dur-corta) var(--curva-salida);
}
.calendario__control:hover{border-color:var(--acento)}
.calendario__control:active{
  transform:scale(var(--escala-presion));
  box-shadow:inset 0 0 0 var(--campo-alto) var(--superficie-activa);
}
.calendario__control:focus-visible{border-color:var(--acento);outline:2px solid var(--acento);
  outline-offset:1px}
.calendario__control[aria-expanded="true"]{border-color:var(--acento)}
.calendario__control:disabled{cursor:not-allowed;opacity:.55}
/* 🟡 **Dentro de un `.campo` el control no dibuja su propia caja.** Es la misma lección
   que `portal.css` ya tiene escrita para el buscador: el `<label class="campo">` **es** la
   píldora y lo de adentro le presta el cursor; un control con su propio borde y su propio
   fondo se ve como una caja adentro de otra.

   🔴 Pasó, y se vio midiendo tableta y teléfono: los dos filtros del listado de actas
   crecieron de 94×29 a 113×34 al proyectarse, porque el control les metía su `min-height`
   y su `padding` adentro de la píldora. El realce de foco tampoco hace falta: el
   `:focus-within` de la píldora ya lo pone. */
.campo > .calendario{width:auto}
.campo > .calendario > .calendario__control{
  min-height:0;padding:0;gap:var(--esp-3);
  background:none;border:0;border-radius:0;
  font-family:var(--f-dato);
}
.campo > .calendario > .calendario__control:focus-visible{outline:none}
/* La presión de un control dentro de la píldora la da la píldora (`.campo:active`): dos tintes y
   una escala adentro de otra caja se leerían como dos controles. */
.campo > .calendario > .calendario__control:active{transform:none;box-shadow:none}
/* Sin fecha el control no queda mudo: dice que hay que elegir una. */
.calendario__valor:empty::before{content:"dd/mm/aaaa";color:var(--texto-3)}
/* El ícono, dibujado con bordes: sin SVG, sin archivo, y hereda el color. */
.calendario__marca{
  flex:none;width:11px;height:10px;margin-top:1px;
  border:1.5px solid var(--texto-3);border-radius:1.5px;border-top-width:3.5px;
}

/* 🔴 **`fixed`, y colgado del `<body>`** (19/09/2026). `.panel` lleva `overflow:
   hidden` a propósito —las esquinas— y con el calendario adentro la fila de atajos
   quedaba **recortada 57 px**, medido. En la tabla del detalle es peor: vive dentro
   de `.desplazable`, que recorta en horizontal. No se le saca el `overflow` a
   `.panel`, que es de todo el sistema: se saca el panel de ahí. Dónde cae lo mide
   el JavaScript, que es lo único que sabe en qué parte de la pantalla quedó el
   campo. */
.calendario__panel{
  position:fixed;z-index:60;top:0;left:0;
  width:max-content;padding:var(--esp-5);
  /* 🔴 **Opaco, y por eso son dos capas** — igual que la lista del desplegable y
     por el mismo motivo: las superficies del sistema son vidrio, y un panel que
     flota sobre la grilla del detalle dejaba leer las filas **a través** de los
     días. Va el piso del cielo abajo y el vidrio encima. */
  background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso);
  border:1px solid var(--borde);
  border-radius:var(--radio-control);box-shadow:var(--sombra-control-alta);
}
.calendario__panel[hidden]{display:none}

.calendario__tapa{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);
  margin-bottom:var(--esp-5);
}
.calendario__mes{
  font-family:var(--f-texto);font-size:var(--fs-dato);font-weight:var(--peso-medio);
  color:var(--texto);text-transform:capitalize;
}
.calendario__paso{
  flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;
  background:none;border:1px solid var(--borde);border-radius:var(--radio-2);
  color:var(--texto-2);font-size:var(--fs-dato);cursor:pointer;
}
.calendario__paso:hover:not(:disabled){background:var(--superficie-activa);color:var(--texto)}
.calendario__paso:disabled{opacity:.3;cursor:not-allowed}
.calendario__paso:focus-visible{outline:2px solid var(--acento);outline-offset:1px}

.calendario__grilla{
  display:grid;grid-template-columns:repeat(7,1fr);gap:var(--esp-1);
}
.calendario__dia-semana{
  padding:var(--esp-2) 0;
  font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  color:var(--texto-3);text-align:center;text-transform:uppercase;
}
.calendario__dia{
  width:30px;height:28px;padding:0;
  background:none;border:1px solid transparent;border-radius:var(--radio-2);
  color:var(--texto-2);font-family:var(--f-texto);font-size:var(--fs-dato);
  font-variant-numeric:tabular-nums;cursor:pointer;
}
.calendario__dia:hover:not(:disabled),.calendario__dia.esta-en-foco{
  background:var(--superficie-activa);color:var(--texto)}
.calendario__dia:focus-visible{outline:2px solid var(--acento);outline-offset:-1px}
/* Hoy se marca con el borde y **no** con el fondo: el fondo es la selección, y dos
   realces distintos en una grilla de cuarenta y dos celdas se leen como dos fechas
   elegidas. Misma decisión que el realce único de la lista del desplegable. */
.calendario__dia[data-hoy]{border-color:var(--borde-vivo);color:var(--texto)}
.calendario__dia[aria-selected="true"]{
  background:var(--acento);border-color:var(--acento);color:var(--acento-tinta);
  font-weight:var(--peso-medio)}
.calendario__dia:disabled{opacity:.28;cursor:not-allowed}
.calendario__dia[data-de-otro-mes]{color:var(--texto-3)}

.calendario__atajos{
  display:flex;flex-wrap:wrap;gap:var(--esp-2);
  margin-top:var(--esp-5);padding-top:var(--esp-5);border-top:1px solid var(--borde);
}
.calendario__atajo{
  padding:var(--esp-2) var(--esp-5);
  background:none;border:1px solid var(--borde);border-radius:var(--radio-2);
  color:var(--texto-2);font-family:var(--f-texto);font-size:var(--fs-etiqueta);
  cursor:pointer;white-space:nowrap;
}
.calendario__atajo:hover{background:var(--superficie-activa);color:var(--texto)}
.calendario__atajo:focus-visible{outline:2px solid var(--acento);outline-offset:1px}

/* 👆 **El blanco del día lo decide el dedo, no el ancho** (19/09/2026, ampliado en `T172`). 30×28 px es
   cómodo con un mouse y chico con un dedo, así que la pregunta correcta es **con qué se apunta**,
   y eso lo contesta `pointer:coarse`. La consulta es la **única** del sistema para los blancos
   táctiles (ver el bloque «Blancos táctiles» más abajo): `(pointer:coarse), (max-width:67.5rem)`.

   🔴 **Empezó siendo `max-width:640px` y estaba mal**, medido: en tableta —834 y 1112 px—
   los días seguían en 30×28. La tableta **es el formato de referencia de este producto**
   (`alta_del_plan.html`: *«el inspector arma el plan de pie, en la empresa»*).

   🔑 **Y va con `@media` y no con `@container`**: el panel cuelga del `<body>` —para que no lo
   recorte el `overflow:hidden` de `.panel`—, o sea **fuera del contenedor `app`**, y una container
   query no lo alcanza nunca. Acá `@media` además es lo correcto: el panel es `fixed` y su marco
   es la ventana. El tamaño de los días (`38×36` y pasos de `32×32`, que eran la medida de `T163`
   y quedaban chicos) pasó a `--tactil-min` de lado menor: 7 columnas de 44 + el aire entran en
   342 px, que caben en 390. */
@media (pointer:coarse),(max-width:67.5rem){
  .calendario__dia{width:var(--tactil-min);height:var(--tactil-min)}
  .calendario__paso{width:var(--tactil-min);height:var(--tactil-min)}
  .calendario__atajo{min-height:var(--tactil-min);padding:var(--esp-3) var(--esp-6)}
}
/* El error explica qué pasó y cómo se arregla. Nunca sólo "Dato inválido". */
.campo-error{
  display:block;margin-top:var(--esp-2);
  font-size:var(--fs-menor);color:var(--estado-intimada);
}

/* ── Estado del acta ────────────────────────────────────────────────────────
   Los ocho del Anexo A. Color + texto SIEMPRE: el color solo no informa. */
.estado{
  display:inline-flex;align-items:center;gap:var(--esp-3);
  padding:var(--esp-1) var(--esp-4) var(--esp-1) var(--esp-3);
  border:1px solid;border-radius:var(--radio-pastilla);
  font-size:var(--fs-etiqueta);font-weight:var(--peso-fuerte);white-space:nowrap;
}
.estado i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;display:block}
.estado--deuda,.estado--intimacion-previa{color:var(--estado-deuda);border-color:var(--estado-deuda-borde);background:var(--estado-deuda-fondo)}
.estado--sin-deuda,.estado--ajuste-sin-deuda{color:var(--estado-sin);border-color:var(--estado-sin-borde);background:var(--estado-sin-fondo)}
.estado--cancelada{color:var(--estado-cancelada);border-color:var(--estado-cancelada-borde);background:var(--estado-cancelada-fondo)}
.estado--alta-plan{color:var(--estado-plan);border-color:var(--estado-plan-borde);background:var(--estado-plan-fondo)}
.estado--intimada{color:var(--estado-intimada);border-color:var(--estado-intimada-borde);background:var(--estado-intimada-fondo)}
/* Único estado con movimiento permanente: es el que corre plazo legal. */
.estado--intimada i{animation:latido var(--dur-latido) var(--curva-latido) infinite}

/* ── Activo / Inactivo (cuenta, legajo de inspector) — **T116** ─────────────
   No es un estado del acta ni del plan: es si algo tiene acceso o trabajo asignado, y hasta
   acá tomaba prestadas `.estado--cancelada` (gris) para «Activo» y `.estado--intimada` (rojo,
   con el latido de intimación) para «Inactivo» — cambiadas entre sí respecto de lo que pide el
   negocio, y con un pulso legal en una pastilla que no corre ningún plazo. Clases propias, sin
   la regla de `i{animation}`: al no ser `.estado--intimada`, ninguna hereda el latido. */
.estado--activo{color:var(--estado-activo);border-color:var(--estado-activo-borde);background:var(--estado-activo-fondo)}
/* Crédito `Agotado`: tinta plena del tema (negro en diurno, claro en nocturno), sin tinte. */
.estado--agotado{color:var(--texto);border-color:var(--texto);background:transparent;font-weight:600}
/* ── La marca «Ajustada» (A69, `T155`) ──────────────────────────────────────
   **No es un estado**: el estado dice dónde está la deuda; «Ajustada» califica al documento —su
   importe fue corregido por un ajuste aprobado— y se lee **junto** a la pastilla, no mezclada con
   ella. Por eso:

     · **no lleva el punto `<i>`** de `.estado`, que es el sello de «esto es un estado»;
     · **no usa ningún `--estado-*` ni `--acento`**: usarlos la haría pasar por estado (y chocaría
       con «Ajuste sin deuda», verde), y el acento significa «elegido». Sólo `--texto` y
       `--texto-2`, con fondo transparente (AA en nocturna y diurna; **no** `--texto-3`, que mide
       2,78:1 en diurno);
     · **no se mueve**: el latido es de la intimación, y una `Intimada` ajustada lleva las dos —el
       estado late, la marca no—;
     · **siempre con texto**: una marca vacía es un defecto.

   No es un objetivo táctil (no es enlace, no tiene hover ni foco), así que no le aplica el piso de
   44 px. Mismo marcado que la pastilla neutra `.estado--agotado` —el precedente de una pastilla que
   no es un estado—: así alinea con la de al lado.

   🔴 **Colisión de nombres.** `.marca` **ya existe** en `portal.css` —la marca de la aplicación en
   la barra lateral, una grilla con isotipo— y hay otras `.marca-estado`, `.marca-tono`,
   `.marca-movil`. **No se le pone la clase `.marca`** a la etiqueta: heredaría una grilla que no le
   corresponde. `.marca--ajustada` se declara **autosuficiente**, con todas sus propiedades; si
   parece raro un modificador sin bloque, es a propósito (el nombre lo fijó `T155`). */
.marca--ajustada{
  display:inline-flex;align-items:center;
  padding:var(--esp-1) var(--esp-4);
  border:1px solid var(--texto-2);border-radius:var(--radio-pastilla);
  background:transparent;color:var(--texto);
  font-family:var(--f-texto);font-size:var(--fs-etiqueta);font-weight:var(--peso-fuerte);white-space:nowrap;
  letter-spacing:normal;text-transform:none;vertical-align:middle;
}
.estado--inactivo{color:var(--estado-inactivo);border-color:var(--estado-inactivo-borde);background:var(--estado-inactivo-fondo)}
/* ── Estado del PLAN · lo que el acta no tenía ──────────────────────────────
   🔴 **`Anulado` no puede compartir el gris de `Cancelado`, y no es una preferencia.**

   En el acta, `Cancelada` es gris porque significa *saldada*, y ahí el gris está bien. En el plan,
   `Cancelado` y `Anulado` son **opuestos**: uno se pagó entero, el otro se deshizo. Dos grises al
   lado son la peor forma de decir dos cosas contrarias.

   Y la diferencia **no puede depender del color**: hay quien no lo ve, y una impresión no lo
   tiene. Por eso `.estado--anulado` se distingue por **forma** —borde punteado y rótulo
   tachado—, que sobrevive a la escala de grises, al daltonismo y al papel. El punto va hueco, como
   en `.estado--borrador`: es lo que se lee como «esto ya no corre».

   🔀 **Tenía dos pares pendientes, y `T111` los escribe** (25/09/2026). `T050` construyó la
   máquina y el sistema **ya escribía** `Empresa no ubicada` (**A34**) y `Cheques rechazados`
   (**H13**, **P32**), que se pintaban en el neutro de «borrador»: un estado real vestido de
   ausencia de estado. */
/* 🔀 **El rótulo va en el gris secundario y no en el terciario** (`T111`). Con `--texto-3` medía
   **2,78:1** en el tema diurno y **3,49:1** en el nocturno, abajo del 4,5 que la spec pide para los
   ocho estados; con `--texto-2`, 5,46 y 6,43. Lo que dice «esto ya no corre» es la **forma** —borde
   punteado, tachado, punto hueco—, y la forma no necesitaba además que costara leerlo. */
.estado--anulado{
  color:var(--texto-2);border-color:var(--borde);background:transparent;
  border-style:dashed;text-decoration:line-through;text-decoration-thickness:1px;
}
.estado--anulado i{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* `Empresa no ubicada` — **gris lleno**: el plan está detenido porque no hay a quién reclamarle, y
   la deuda sigue viva. Toma el gris de `Cancelada` del acta, que **ningún estado del plan usa**
   (`Cancelado` es verde), así que no dice «saldado» en esta máquina. Y se distingue de sus dos
   vecinos grises por forma: de `Anulado` por el borde entero y sin tachar, de «borrador» por el
   punto **lleno** — hay un estado, no la falta de uno. */
.estado--no-ubicada{color:var(--estado-cancelada);border-color:var(--estado-cancelada-borde);background:var(--estado-cancelada-fondo)}

/* `Cheques rechazados` — rojo, porque el valor con que se pagó rebotó y la plata no entró. ⚠️ **Sin
   latido**: el latido es de lo intimado, lo único que corre plazo legal, y acá el circuito de
   reposición está abierto pero no hay plazo. Se lo distingue de `Intimado` justamente por eso: el
   mismo tono, el punto quieto. */
.estado--cheques-rechazados{color:var(--estado-intimada);border-color:var(--estado-intimada-borde);background:var(--estado-intimada-fondo)}

/* ── Las pastillas de las specs del 30/09/2026 (`T150`) ─────────────────────────────────────────────
   Diez, y **ninguna trae un color**: todas reusan `--estado-*`. Lo que las distingue entre sí no es el
   tono sino la **forma del marcador** (`<i>`) y el rótulo, porque en una fila entre veinte iguales, en
   una impresión o con el color indistinguible, el rojo de `Rechazado` y el rojo de `Intimada` son el
   mismo (la lección de `.estado--anulado`, F4). Las formas miden `--marca-forma`; el punto de 5 px de
   `.estado i` no alcanza para que un rombo se distinga de un punto.

   ⚠️ **Ninguna lleva latido**: el latido es de `.estado--intimada` y de nadie más —es lo único que corre
   plazo legal—. Aquí lo garantiza el selector de arriba (`.estado--intimada i`), que ninguna de estas
   clases comparte; no hay que anular nada. Si una late, es un defecto. */

/* Las formas: rombo (`cheque-rechazado`), triángulo (`intimacion-no-entregada`), cuadrado
   (`intimacion-supervisor`), tilde (`cheque-recuperado`, `intimacion-recibida`) y hueco
   (`intimacion-resuelta`). El cuadrado comparte la caja de las formas y no recorta nada. */
.estado--cheque-rechazado i,.estado--intimacion-no-entregada i,.estado--intimacion-supervisor i,
.estado--cheque-no-repuesto i,.estado--pendiente-viejo i,
.estado--cheque-recuperado i,.estado--intimacion-recibida i{
  width:var(--marca-forma);height:var(--marca-forma);border-radius:0}
.estado--cheque-rechazado i{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.estado--intimacion-no-entregada i,.estado--pendiente-viejo i{clip-path:polygon(50% 0,100% 100%,0 100%)}
/* `Pendiente hace N días` (`T220`, **C62**): el recibo que lleva más del umbral esperando la confirmación. Ámbar, el
   token de advertencia que ya existe (`--estado-deuda`), y triángulo: ni el rojo del plazo legal ni el verde de lo
   hecho. Sin latido: no corre ningún plazo, sólo avisa. */
.estado--pendiente-viejo{color:var(--estado-deuda);border-color:var(--estado-deuda-borde);background:var(--estado-deuda-fondo)}
/* El tilde: un círculo de línea con la marca adentro. Se dibuja con bordes —sin imagen ni color
   propio—, así que toma el `currentColor` de la pastilla en los dos temas. */
.estado--cheque-recuperado i,.estado--intimacion-recibida i{
  position:relative;box-sizing:border-box;border-radius:50%;background:transparent;
  border:1.5px solid currentColor}
.estado--cheque-recuperado i::after,.estado--intimacion-recibida i::after{
  content:"";position:absolute;left:28%;top:6%;width:26%;height:50%;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
/* El punto hueco: el mismo anillo de `.estado--anulado`, pero con borde entero y sin tachar. */
.estado--intimacion-resuelta i{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* Cheques (spec 17 § El estado, en tres formas): neutro con punto lleno · rojo con rombo, sin latido ·
   verde con tilde. El neutro es `--texto-2` y `--borde`, lo mismo que `.estado--cuota-anulada` sin lo
   punteado ni lo tachado: es un estado vivo, no uno que «ya no corre». */
.estado--cheque-cargado{color:var(--texto-2);border-color:var(--borde);background:transparent}
.estado--cheque-rechazado{color:var(--estado-intimada);border-color:var(--estado-intimada-borde);background:var(--estado-intimada-fondo)}
.estado--cheque-recuperado{color:var(--estado-sin);border-color:var(--estado-sin-borde);background:var(--estado-sin-fondo)}
/* `T065`: el cuarto estado del cheque, «No repuesto» (**H19**): gris de `Cancelada` —ya no corre nada, el recibo
   se anuló y se emitió otro— y **cuadrado**, la forma que ningún otro estado del cheque usa. Sin color nuevo. */
.estado--cheque-no-repuesto{color:var(--estado-cancelada);border-color:var(--estado-cancelada-borde);background:var(--estado-cancelada-fondo)}

/* La cédula de la intimación (legales/03 § los cinco estados). Dos lenguajes que no se mezclan: el
   recorrido de la carta (enviada, no entregada, recibida, resuelta) y dónde está el papel
   (`supervisor`, cuadrado, rótulo «La tiene el supervisor» —no «Supervisor», que se lee como un
   paso—). No confundir con `.estado--intimacion-previa`, que es un estado **del acta**. */
.estado--intimacion-enviada,.estado--reabierta{color:var(--estado-plan);border-color:var(--estado-plan-borde);background:var(--estado-plan-fondo)}
.estado--intimacion-no-entregada{color:var(--estado-deuda);border-color:var(--estado-deuda-borde);background:var(--estado-deuda-fondo)}
.estado--intimacion-recibida{color:var(--estado-sin);border-color:var(--estado-sin-borde);background:var(--estado-sin-fondo)}
.estado--intimacion-supervisor{color:var(--estado-cancelada);border-color:var(--estado-cancelada-borde);background:var(--estado-cancelada-fondo)}
/* Terminal y apagada: gris de texto, sin fondo, borde entero. */
.estado--intimacion-resuelta{color:var(--texto-2);border-color:var(--borde);background:transparent}

/* Requerimiento (spec 05 § los tres estados): «esperando algo» y «cerrado y bien». Punto lleno las dos:
   se distinguen por tono **y** por el rótulo, que es lo que exige la regla. */
.estado--registrado{color:var(--estado-plan);border-color:var(--estado-plan-borde);background:var(--estado-plan-fondo)}
.estado--confirmado{color:var(--estado-sin);border-color:var(--estado-sin-borde);background:var(--estado-sin-fondo)}

/* Los cuatro estados de la **cuota** del plan. Tres reusan el tono del acta, que dice lo mismo;
   la anulada hereda la forma de arriba, por el mismo motivo. */
.estado--cuota-pendiente{color:var(--estado-deuda);border-color:var(--estado-deuda-borde);background:var(--estado-deuda-fondo)}
.estado--cuota-pagada{color:var(--estado-sin);border-color:var(--estado-sin-borde);background:var(--estado-sin-fondo)}
.estado--cuota-vencida{color:var(--estado-intimada);border-color:var(--estado-intimada-borde);background:var(--estado-intimada-fondo)}
.estado--cuota-anulada{
  color:var(--texto-2);border-color:var(--borde);background:transparent;
  border-style:dashed;text-decoration:line-through;text-decoration-thickness:1px;
}
.estado--cuota-anulada i{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* «Borrador» **no es un estado del acta**: es la ausencia de uno. Va en los grises del texto
   y con el punto hueco para que se lea como «todavía no», y no como una categoría más de la
   máquina de estados — que es justo la confusión que el negocio pidió sacar. */
.estado--borrador{color:var(--texto-3);border-color:var(--borde);background:transparent}
.estado--borrador i{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* ── El vacío ───────────────────────────────────────────────────────────────
   **El vacío no es un error: es una respuesta.** Se tiene que ver distinto de una
   tabla rota, y tiene que decir **qué falta y cómo se llena** —no «no hay datos»—.

   🔴 **Por qué está acá y no suelto en `portal.css`** (16/09/2026). Vivía ahí con dos
   declaraciones y sin spec, y el resultado fue que nacieron **tres patrones** para lo
   mismo: `<p class="vacio"><b>` (13 usos), `<div class="vacio">` con
   `.vacio__titulo` / `.vacio__detalle` (7 usos) y `.sin-datos` (2). Los siete del
   segundo **renderizaban sin jerarquía**: esas dos clases no existían en ninguna hoja,
   así que el título salía con el mismo cuerpo, peso y color que su propio detalle
   —medido: 12 px / 400 / 62 % en los dos—. Nadie lo notó porque los otros trece usan
   `<b>`, que sí tenía regla.

   **Las dos formas son válidas y rinden IGUAL.** La de `<b>` porque ya está en trece
   pantallas y no hay razón para tocarlas; la explícita porque es mejor marcado y
   admite `role="status"`. Para algo nuevo, se prefiere la explícita:

       <div class="vacio" role="status">
         <p class="vacio__titulo">Qué falta.</p>
         <p class="vacio__detalle">Cómo se llena.</p>
       </div>

   ⚠️ **Un vacío que es un DEFECTO no usa este componente.** Si lo que falta tendría que
   estar —un historial de plan sin su fila de alta—, eso no es un vacío amable: es un
   aviso de error. Ver `templates/interno/_historial_del_plan.html`, que usa
   `.aviso--error` con `role="alert"` a propósito. */
.vacio{
  padding:var(--esp-11) var(--esp-7);text-align:center;
  color:var(--texto-2);font-size:var(--fs-dato);line-height:1.6;
}
/* El título, en sus dos formas. La medida evita que un texto centrado se estire a lo
   ancho de una pantalla de escritorio: pasados los ~60 caracteres el ojo pierde el
   renglón, y acá el renglón es lo único que hay. */
.vacio__titulo,
.vacio b{
  display:block;margin:0 auto var(--esp-3);max-width:46ch;
  color:var(--texto);font-size:var(--fs-medio);font-weight:var(--peso-fuerte);
}
.vacio__detalle{margin:0 auto;max-width:56ch}

/* `.vacio` con acción propia: el botón respira y no se pega al texto. */
.vacio .boton,.vacio .mini{margin-top:var(--esp-5)}

/* ── Totalizador ────────────────────────────────────────────────────────── */
.total{
  border-radius:var(--radio-panel);padding:var(--esp-6) var(--esp-7);
  background:var(--superficie-alta);border:1px solid var(--borde);
  box-shadow:var(--sombra-panel);
}
.total .etiqueta{margin-bottom:var(--esp-3)}
.total .valor{
  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;
}
.total .pie{font-size:var(--fs-menor);color:var(--texto-2);margin-top:var(--esp-1)}

/* ── Grilla de actas ────────────────────────────────────────────────────────
   Ancha, densa, y con la fila seleccionable por mouse y por teclado. */
.grilla{width:100%;border-collapse:collapse;font-size:var(--fs-dato)}
.grilla th{
  text-align:left;padding:var(--esp-4) var(--esp-5);
  border-bottom:1px solid var(--borde);white-space:nowrap;
  font-family:var(--f-dato);font-size:var(--fs-micro);font-weight:var(--peso-medio);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-2);
}
/* 🔴 **El bloque contenedor es la FILA, no la celda** (07/09/2026).
   `.enlace-fila::after` se estira con `inset:0` para que se pueda abrir el acta tocando
   cualquier parte del renglón. `inset` resuelve contra el ancestro **posicionado** más cercano,
   y acá lo era la celda: el área sensible medía una columna —en escritorio, el número; en
   teléfono, la esquina donde cae `grid-area:num`— y había que apuntarle justo. Se reportó como
   «hay que hacerle click justo al número, es incómodo», y es exactamente eso.
   La celda pasa a `static` y la fila a `relative`, que es contra lo que el enlace quería
   estirarse desde el principio. La marca de fila seleccionada se mueve con él y queda en el
   mismo lugar: el borde izquierdo del renglón. */
.grilla td{padding:var(--esp-4) var(--esp-5);border-bottom:1px solid var(--separador);white-space:nowrap}
.grilla tbody tr{position:relative}
.grilla tr:last-child td{border-bottom:0}
/* El barrido sigue al puntero moviendo la MISMA imagen con background-position,
   en vez de re-rasterizar el degradé en cada frame. JS fija --rx en px; sin JS
   el realce queda centrado y sigue leyéndose como hover. */
.grilla tbody tr{
  cursor:pointer;
  background-image:radial-gradient(closest-side,var(--barrido),transparent);
  background-repeat:no-repeat;background-size:0 100%;
  background-position:calc(var(--rx,50%) - 150px) center;
  transition:background-size var(--dur-corta) var(--curva-salida);
}
.grilla tbody tr:hover{background-size:300px 100%}
.grilla tbody tr[aria-selected="true"]{background-color:var(--superficie-activa)}
/* 🔴 La barra de acento va en la PRIMERA CELDA, no en un pseudo-elemento del `<tr>`.
   Un `::before` sobre un `<tr>` hace que el navegador genere una **celda anónima de
   tabla**, y esa celda corre las siete columnas un lugar a la derecha. Medido en
   Chromium: la primera celda pasa de `x=8` a `x=133,42` — 125 px, exactamente el ancho
   de una columna— mientras el DOM sigue teniendo tres `<td>`. Por eso no se veía
   revisando la plantilla: la celda de más no está en el HTML.
   `position:absolute` no lo evita, y `position:relative` sobre el `<tr>` tampoco.
   El `box-shadow` sobre la celda no genera caja: no ocupa lugar y no corre nada.
   ⚠️ Sobre el `<td>` y no sobre el `<tr>`: con `border-collapse` el `box-shadow` de una
   fila no lo pintan todos los navegadores. */
.grilla tbody tr[aria-selected="true"] td:first-child{
  box-shadow:inset 3px 0 0 var(--acento);
}
.grilla tbody tr:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
.grilla .empresa{font-weight:var(--peso-fuerte);max-width:212px;overflow:hidden;text-overflow:ellipsis}
.grilla .sub{color:var(--texto-3);font-size:var(--fs-etiqueta);font-weight:var(--peso-normal)}

/* Los recibos del legajo · `.grilla--recibos` (**T190**)
   La fila no se abre entera: el número, «Ver» y «Constancia PDF» son enlaces con su propio
   objetivo, así que el cursor de la fila no promete lo que no hace. El «Anulado el …» es texto
   que se lee, en `--texto-2` (**B9**), y las acciones no se parten. */
.grilla--recibos tbody tr{cursor:default}
.grilla--recibos .sub--anulacion,.grilla--cuenta .sub--anulacion{display:block;color:var(--texto-2)}
/* 🔴 **El recibo en rojo** (`T065`, **H13**): el cheque que pagó rebotó. Borde de acento rojo en la **primera celda** (nunca
   como pseudo-elemento del `<tr>`: el navegador le genera una celda anónima y corre las columnas, **E3**), el rombo
   de la pastilla y la frase: color más forma más texto, y sobrevive a la escala de grises. */
.grilla--recibos tr.fila--cheque-rechazado td:first-child,
.grilla--cuenta tr.fila--cheque-rechazado td:first-child{box-shadow:inset 3px 0 0 var(--estado-intimada)}
.grilla--recibos .sub--cheque,.grilla--cuenta .sub--cheque{display:block;color:var(--texto-2);margin-top:var(--esp-2);
  max-width:34ch;white-space:normal}
.grilla--recibos .sub--cheque a,.grilla--cuenta .sub--cheque a{color:var(--texto);font-weight:var(--peso-medio);
  text-decoration-color:var(--borde);text-underline-offset:.2em}
.grilla--recibos td.celda-numero a{
  color:var(--texto);font-weight:var(--peso-medio);
  text-decoration-color:var(--borde);text-underline-offset:.2em;
}
.grilla--recibos td.celda-numero a:hover{text-decoration-color:currentColor}
.grilla--recibos td.celda-acciones{white-space:nowrap}
.grilla--recibos td.celda-acciones .mini{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.grilla--recibos td.celda-acciones .mini + .mini{margin-left:var(--esp-3)}

/* Las boletas de pago a ARCA del legajo · `.grilla--boletas` (**T026**)
   Como los recibos: la fila no se abre entera —el acta y «Ver PDF» son enlaces con su objetivo—.
   🔑 **La fila recién registrada se resalta por `:target`** (spec 21 § *Registrar*): se vuelve a la
   pestaña con `#boleta-000019` y **el cambio es el acuse**, sin `?registrada=1`. La misma marca que la
   fila elegida (`aria-selected`): fondo activo y la barra de acento en la primera celda, no en el `<tr>`. */
.grilla--boletas tbody tr{cursor:default}
.grilla--boletas td.celda-acta a{
  color:var(--texto);font-weight:var(--peso-medio);
  text-decoration-color:var(--borde);text-underline-offset:.2em;
}
.grilla--boletas td.celda-acta a:hover{text-decoration-color:currentColor}
.grilla--boletas td.celda-comprobante,.grilla--boletas td.celda-pagada{white-space:nowrap}
.grilla--boletas td.celda-accion .mini{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.grilla--boletas tbody tr:target{background-color:var(--superficie-activa)}
.grilla--boletas tbody tr:target td:first-child{box-shadow:inset 3px 0 0 var(--acento)}

/* Los totales de lo filtrado, al pie de la tabla (**T190**, **C52**): cuántos, la cifra que decide
   —«Total cobrado», de los activos— y el desglose por medio, que la suma. Una cifra grande por
   zona (**B1**); los importes no se parten (**C6**). */
.resumen-de-recibos{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-5) var(--esp-9);
  padding:var(--esp-7) var(--esp-6);border-top:1px solid var(--separador);
}
.resumen-de-recibos p,.resumen-de-recibos ul{margin:0}
.resumen-de-recibos__cuenta{flex:1 1 100%;font-size:var(--fs-dato);color:var(--texto-2)}
.resumen-de-recibos__total{display:flex;align-items:baseline;gap:var(--esp-5);flex-wrap:wrap}
.resumen-de-recibos__rotulo{font-size:var(--fs-dato);color:var(--texto-2)}
.resumen-de-recibos__total .cifra{
  font-family:var(--f-titulo);font-size:var(--fs-cifra);font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra);
}
.resumen-de-recibos__medios{
  list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--esp-4) var(--esp-9);
  font-size:var(--fs-dato);color:var(--texto-2);
}
.resumen-de-recibos__medios li{display:flex;align-items:baseline;gap:var(--esp-4)}
.resumen-de-recibos__medios .cifra{color:var(--texto)}
.resumen-de-recibos__nota{flex:1 1 100%;font-size:var(--fs-dato);color:var(--texto-2)}

/* ── La cuenta corriente de la empresa · `.resumen-de-cuenta`, `.grilla--cuenta`, `.celda-informativa` ──
   (`T224`, spec `interno/26`). Todo sale de tokens que ya existen: ninguna medida ni color propios.

   🔴 **Una sola cifra de nivel 2**: la deuda viva (`--fs-cifra`). El saldo a favor va aparte y un
   escalón menos (`--f-dato`). Ninguna cifra lleva color de estado: el rojo de esta pantalla es del
   recibo con un cheque rechazado (`.fila--cheque-rechazado`, compartida con Recibos) y nada más. */
#cuenta-del-legajo{display:flex;flex-direction:column;gap:var(--esp-9);min-width:0}
.resumen-de-cuenta{display:flex;flex-direction:column;gap:var(--esp-9);min-width:0}
.resumen-de-cuenta p,.resumen-de-cuenta dl,.resumen-de-cuenta dd{margin:0}
.resumen-de-cuenta__cifras{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-7) var(--esp-9);
  align-items:start;margin-top:var(--esp-6);
}
.resumen-de-cuenta__deuda,.resumen-de-cuenta__favor{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.resumen-de-cuenta__rotulo{
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-2);
}
.resumen-de-cuenta__cifra{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-3) var(--esp-5)}
.resumen-de-cuenta__cifra .cifra{
  font-family:var(--f-dato);font-size:var(--fs-cifra);font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--texto);
}
/* El saldo a favor, un escalón menos que la deuda: no compite con ella. */
.resumen-de-cuenta__cifra--menor .cifra{font-size:var(--fs-medio)}
.resumen-de-cuenta__sin{font-size:var(--fs-dato);color:var(--texto-2)}
.resumen-de-cuenta__apoyo,.resumen-de-cuenta__nota{font-size:var(--fs-dato);color:var(--texto-2);line-height:var(--alto-linea)}
.resumen-de-cuenta__desglose{
  margin-top:var(--esp-7);padding-top:var(--esp-6);border-top:1px solid var(--separador);
  display:flex;flex-direction:column;gap:var(--esp-5);max-width:44rem;
}
.resumen-de-cuenta__subtitulo{
  margin:0;font-family:var(--f-dato);font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-2);
}
.desglose{display:flex;flex-direction:column;gap:var(--esp-3);margin:0}
.desglose__linea{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-5)}
.desglose dt{margin:0;min-width:0;font-size:var(--fs-dato);color:var(--texto-2)}
.desglose dd{margin:0;text-align:right;white-space:nowrap;font-family:var(--f-dato);font-size:var(--fs-dato);
  font-variant-numeric:tabular-nums;color:var(--texto)}
/* Las dos líneas con «=» son las que se comparan con la cifra grande: más peso y un filete arriba. */
.desglose__linea--total{padding-top:var(--esp-3);border-top:1px solid var(--separador)}
.desglose__linea--total dt,.desglose__linea--total dd{font-weight:var(--peso-fuerte);color:var(--texto)}
.resumen-de-cuenta__ejes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-7) var(--esp-9)}
.resumen-de-cuenta__eje{display:flex;flex-direction:column;gap:var(--esp-5);min-width:0}
.zona__cuerpo.resumen-de-cuenta__ejes > * + *{margin-top:0}
/* Los enlaces de texto de la pantalla van en el acento (**F2**) y su caja mide `--tactil-min` (**C10**):
   crece la caja, no la letra. */
.enlace-de-documento{
  display:inline-flex;align-items:center;min-height:var(--tactil-min);
  color:var(--acento);font-weight:var(--peso-medio);
}

/* La tabla: cinco columnas. La fila no es un enlace —lo son los números de documento—, así que no hay
   barrido ni cursor de enlace (gesto 3, fuera). */
.grilla--cuenta tbody tr{cursor:default;background-image:none;transition:none}
.grilla--cuenta td{vertical-align:top}
.grilla--cuenta td.celda-fecha{white-space:nowrap;font-family:var(--f-dato)}
.grilla--cuenta td.celda-movimiento{white-space:normal}
.grilla--cuenta .mov__tipo{display:block;font-weight:var(--peso-fuerte);color:var(--texto)}
.grilla--cuenta .mov__tipo .estado{margin-left:var(--esp-3);font-weight:var(--peso-medio)}
.grilla--cuenta .mov__documentos{display:block}
.grilla--cuenta .mov__detalle{display:flex;flex-direction:column;color:var(--texto-2)}
.grilla--cuenta .mov__estado{display:block}
.grilla--cuenta th.cifra,.grilla--cuenta td.celda-sube,.grilla--cuenta td.celda-baja,.grilla--cuenta td.celda-recibida{
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* El peor importe posible, `$ 999.999.999,99` (16 caracteres), cabe sin partirse; `width:1%` deja que cada
   columna de importe mida lo justo y «Movimiento» tome el resto. */
.grilla--cuenta td.celda-sube,.grilla--cuenta td.celda-baja,.grilla--cuenta td.celda-recibida{min-width:16ch;width:1%}
.grilla--cuenta .importe{white-space:nowrap}
/* El rótulo del efecto es texto real para el lector de pantalla y se ve sólo en la tarjeta del teléfono. */
.grilla--cuenta .rotulo-de-efecto{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* La celda combinada de lo que no suma: una frase, a la izquierda, en `--texto-2`. */
.grilla--cuenta td.celda-informativa{text-align:left;white-space:normal;color:var(--texto-2);font-size:var(--fs-dato)}

/* Los reajustes aprobados sin usar · `.grilla--reajustes` y `.resumen--de-reajustes` (**T161**)
   La única acción es abrir la ficha del acta: el enlace de la fila es la caja de `--tactil-min`.
   La celda de la empresa lleva el nombre entero, sin recortar. */
.grilla--reajustes .empresa{max-width:none;overflow:visible;white-space:normal}
.grilla--reajustes .sub{display:block}
.grilla--reajustes .enlace-de-fila{
  display:inline-flex;align-items:center;min-height:var(--tactil-min);
  color:var(--acento);font-weight:var(--peso-medio);
}
.resumen--de-reajustes > div{flex-wrap:wrap;row-gap:var(--esp-2)}
.resumen--de-reajustes dd{text-align:right;white-space:nowrap}

/* Las grillas de cheques · `.grilla--cheques` (la bandeja, **T065**) y `.grilla--control-de-cheques` (el
   control de **H16**, **T157**). La celda de la empresa lleva debajo las actas y el recibo —enlaces que no
   se pueden recortar con puntos suspensivos— y la del cheque, el banco: las dos van en dos renglones. */
.grilla--cheques .empresa,.grilla--control-de-cheques .empresa{max-width:none;overflow:visible;white-space:normal}
.grilla--cheques .sub,.grilla--control-de-cheques .sub{display:block}
/* Las actas y el recibo son enlaces sueltos: cada uno entero en su renglón, sin separadores que
   queden colgados al principio de una línea cuando la columna se angosta. */
.grilla--cheques .sub--enlaces,.grilla--control-de-cheques .sub--enlaces{display:flex;flex-wrap:wrap;gap:0 var(--esp-5)}
.grilla--cheques td.celda-acciones,.grilla--control-de-cheques td.celda-acciones{text-align:right}

/* Los enlaces de esta pantalla (actas, recibos) se leen como texto que se puede abrir, no con el
   azul y el subrayado del navegador: el color es el del texto y el subrayado, el del borde. */
.grilla--cheques a:not(.boton),
.grilla--control-de-cheques a:not(.boton),
.grilla--reparto-del-cheque a,
.resumen--del-cheque a{
  color:var(--texto);font-weight:var(--peso-medio);
  text-decoration-color:var(--borde);text-underline-offset:.2em;
}
.grilla--cheques a:not(.boton):hover,
.grilla--control-de-cheques a:not(.boton):hover,
.grilla--reparto-del-cheque a:hover,
.resumen--del-cheque a:hover{text-decoration-color:currentColor}

/* ── La bandeja de cheques (`T065`) ──────────────────────────────────────────────────────────────────
   **Una sola columna lleva estado, segundas líneas y acciones** (`.celda-estado`): en escritorio es una
   celda como las demás; en teléfono `display:contents` deja que cada pieza ocupe su lugar del mapa. */
.grilla--cheques td.celda-estado{text-align:left;white-space:normal}
.grilla--cheques .sub--estado,.grilla--cheques .sub--canje,.grilla--cheques .sub--explicacion{
  color:var(--texto-2);margin-top:var(--esp-2);
}
.grilla--cheques .sub--explicacion{max-width:26ch}
.grilla--cheques td.celda-importe{white-space:nowrap}
/* Una fila sin casilla (un cheque que no tiene informe) **no está apagada**: es un cheque como cualquier otro,
   y apagar su importe y su empresa con `--texto-3` los volvía ilegibles (**B9**). Lo que dice que no se elige
   es la casilla ausente. */
.grilla--seleccion.grilla--cheques tbody tr[data-sin-casilla]{color:var(--texto)}
/* El banco vive en su columna; la segunda línea del cheque y la del recibo sólo existen cuando la tabla
   se angosta (abajo). */
.grilla--cheques .sub--banco,.grilla--cheques .sub--recibo{display:none}
.grilla--cheques .subs-del-estado{display:block}
.acciones-de-fila{display:flex;align-items:center;gap:var(--esp-3);margin-top:var(--esp-4)}
/* El «Más» de la fila es un `popover` nativo: abre sin JavaScript, cierra con `Escape` y con un toque
   afuera, y vive en la capa superior (no lo recorta la tabla). **Opaco** (`--cielo-piso` debajo y la
   superficie encima: **A1**, la lista lleva texto para leer) y **sin movimiento**: es un menú que se abre
   para usarlo, aparece donde se lo pidió y no informa ningún cambio de estado (`movimiento.md` § 6). */
.mas-de-fila{
  margin:0;padding:var(--esp-4);
  display:none;flex-direction:column;gap:var(--esp-3);
  border:1px solid var(--borde);border-radius:var(--radio-3);
  background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso);
  box-shadow:var(--sombra-panel);color:var(--texto);
}
.mas-de-fila:popover-open{display:flex}
.mas-de-fila .boton{justify-content:flex-start;white-space:nowrap}
@supports (position-area:bottom){
  /* El menú sale pegado al botón que lo abrió (ancla implícita del `popovertarget`) y, si no entra
     abajo, se da vuelta solo. Sin soporte queda centrado en la pantalla, que también se usa. */
  .mas-de-fila{position-area:block-end span-inline-start;position-try-fallbacks:flip-block;margin:var(--esp-2) 0}
}

/* Los chips de estado (spec 17 § *Los filtros*): enlaces con forma de botón, en un carril con pista que
   desliza en teléfono sin cortar un chip a la mitad. El elegido se llena con el tinte de la selección: la
   cuenta de «Pendientes» y el `aria-current` lo dicen, no el color solo. */
.chips-de-estado{align-items:center}
.chip-de-estado{white-space:nowrap}
.chip-de-estado .cifra{font-family:var(--f-dato);font-variant-numeric:tabular-nums;font-weight:var(--peso-negro)}
.chip-de-estado[aria-current="page"]{
  background:var(--superficie-activa);border-color:var(--borde-vivo);font-weight:var(--peso-fuerte);
}
.cifras-clave--control{grid-template-columns:repeat(2,minmax(0,1fr))}
.cifras-clave--control > .cifra-clave > dd{margin:0}
.ayuda--alcance{margin:0}
/* 🔀 **Cortes de línea y alineación de «no repuesto»** (`T157`, 04/10/2026). Los dos resúmenes
   (la hoja y el resultado) llevan textos largos al lado del rótulo, y el rótulo —sin ancho
   propio— se encogía hasta partir «Vuelve a deberse» en tres líneas. Ahora el rótulo **no se
   encoge ni se parte**; el valor ocupa lo que queda, alineado a la derecha como en todo
   resumen, y si no entra al lado **baja entero** debajo del rótulo (`flex-wrap`), también en
   el teléfono. El `$` no se separa de su cifra: lo garantiza el formato (`pesos_sin_corte`). */
.resumen--del-cheque > div,
.resumen--de-la-hoja-del-cheque > div{flex-wrap:wrap;row-gap:var(--esp-2)}
.resumen--del-cheque dt,
.resumen--de-la-hoja-del-cheque dt{flex:0 0 auto;white-space:nowrap}
.resumen--del-cheque dd,
.resumen--de-la-hoja-del-cheque dd{flex:1 1 20ch;text-align:right}
/* La segunda línea de un valor —lo que va a crédito, a dónde vuelve el plan—: en el mismo bloque
   y con la jerarquía de una aclaración, `--texto-2` y nunca `--texto-3` (contraste). */
.resumen__detalle{
  display:block;margin-top:var(--esp-2);
  font-size:var(--fs-menor);font-weight:var(--peso-normal);color:var(--texto-2);
}

/* ── Selección múltiple · .grilla--seleccion ────────────────────────────────
   Tres pantallas la daban por existente —asignación de actas, bandeja de
   Legales y la previa del recibo— y **no estaba en ninguna parte**: `.grilla`
   sólo tenía fila seleccionada **única** (`aria-selected`), que es otra cosa.
   El patrón vivía en prosa y en wireframes ASCII, y cada pantalla lo habría
   inventado de nuevo.

   Las dos selecciones no se mezclan: `aria-selected` dice *«de esto habla el
   panel»* y se mueve con las flechas; la casilla dice *«esto entra en la
   operación»* y sobrevive a moverse de fila. Una grilla usa una o la otra.

   ⚠️ La casilla **es** la información, nunca el tinte de la fila: sobre vidrio
   translúcido la diferencia de fondo entre elegida y no elegida es sutil a
   propósito —si no, veinte filas elegidas son una mancha—, así que el estado lo
   dice el control, y el fondo acompaña. */
.grilla--seleccion tbody tr{cursor:pointer}
/* El área táctil la da la etiqueta, no la marca: 44 px de casilla dibujada es
   enorme, y 22 px de marca con 44 px de etiqueta alrededor es lo que se pide. */
.casilla{
  position:relative;
  display:inline-grid;place-items:center;
  min-width:var(--tactil-min);min-height:var(--tactil-min);
  margin:calc(var(--esp-3) * -1) 0;cursor:pointer;
}

/* 🔀 **La casilla pasó a dibujarse** (20/09/2026), y hasta acá decía lo contrario.
   Decía: *«se deja nativa a propósito: una casilla dibujada con pseudo-elementos pierde el
   estado `indeterminate`, que es justo el que necesita la del encabezado»*. El motivo era
   correcto y la conclusión no: lo que se pierde no es por dibujarla, es por **dibujarla de
   menos**. `_marca_de_casilla.html` trae tres trazos —aro, tilde y raya— y el tercero es
   `indeterminate`, que se lee del propio control nativo con `:indeterminate`.

   🔒 **El `<input>` sigue siendo el control**: no se esconde con `display:none` ni con
   `visibility`, que lo sacarían del orden de tabulación. Se le saca la pintura con
   `appearance:none` y la opacidad, y se lo estira sobre toda la etiqueta, así que el foco, el
   `espacio`, el `tab`, la validación y los lectores de pantalla siguen siendo los del
   navegador. Es la misma disciplina que el desplegable y el calendario del sistema: se
   **proyecta** el control, no se lo reemplaza. */
.casilla input{
  appearance:none;-webkit-appearance:none;
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;
}
.casilla__marca{
  display:grid;place-items:center;pointer-events:none;border-radius:var(--radio-2);
  transition:transform var(--dur-corta) var(--curva-salida),
             background-color var(--dur-corta) var(--curva-salida);
}
/* 🔀 **La presión va en la marca, no en la etiqueta** (T166, **R9**): la etiqueta mide 44 px y es
   el blanco táctil (**C1**); si ella se achicara, el área que acepta el dedo se movería mientras
   uno aprieta. La marca (22 px) es lo que se mira, y `pointer-events:none` la deja sin hit-test.
   El tinte es un disco de `--superficie-activa` detrás del aro; no hay `:hover` que preceda
   porque la casilla no lo tenía. */
.casilla:active .casilla__marca{
  transform:scale(var(--escala-presion-chip));background-color:var(--superficie-activa);
}
.casilla__marca svg{
  display:block;width:22px;height:22px;
  /* El aro se dibuja con un trazo de 2 px sobre el borde del `viewBox`: sin esto la mitad de
     afuera del trazo queda recortada y el aro se ve más fino de un lado. */
  overflow:visible;
}
/* El foco se ve en la marca, que es lo que se mira; el `outline` del control ya no tiene forma
   propia que mostrar. */
.casilla:has(input:focus-visible) .casilla__marca{
  outline:2px solid var(--acento);outline-offset:3px;border-radius:var(--radio-2);
}
/* Una casilla que no se puede tocar se apaga entera —marca y área—, y deja de ofrecer el
   cursor: es lo que ya hacía el control nativo por su cuenta. */
.casilla:has(input:disabled){cursor:default;opacity:.45}
.grilla--seleccion th:first-child,
.grilla--seleccion td:first-child{width:1%;padding-right:0}
/* 🔴 La barra de acento va en la PRIMERA CELDA y no en un pseudo-elemento del
   `<tr>`: el navegador le genera una celda anónima de tabla y corre todas las
   columnas un lugar a la derecha. Está medido y explicado arriba, en la fila
   seleccionada de `.grilla`; acá se repite el mecanismo, no el error. */
.grilla--seleccion tbody tr:has(.casilla input:checked){background-color:var(--superficie-activa)}
.grilla--seleccion tbody tr:has(.casilla input:checked) td:first-child{
  box-shadow:inset 3px 0 0 var(--acento);
}
/* Una fila que no se puede elegir —un acta que salió de alcance, una cuota ya
   pagada— **se muestra** y no ofrece casilla. Se apaga, no se esconde: su
   ausencia de la lista se leería como un error. */
.grilla--seleccion tbody tr[data-sin-casilla]{cursor:default;color:var(--texto-3)}

/* La barra de la tanda: cuántas hay elegidas y qué se va a hacer con ellas. En
   escritorio va sobre la grilla (bandeja de Legales) o debajo (carga); en
   teléfono `formatos.css` la fija abajo. El botón dice la cantidad. */
.barra-seleccion{
  display:flex;align-items:center;gap:var(--esp-5);flex-wrap:wrap;
  padding:var(--esp-4) var(--esp-6);
  border-bottom:1px solid var(--separador);
}
.barra-seleccion .boton{margin-left:auto}
/* `.boton` es `inline-flex` y le gana al `hidden` del navegador: el botón de la clase que no corresponde (la
   bandeja de cheques, `T065`) se esconde de verdad. */
.barra-seleccion .boton[hidden]{display:none}
.cuenta-seleccion{font-family:var(--f-dato);font-size:var(--fs-menor);color:var(--texto-2)}
.cuenta-seleccion b{color:var(--texto);font-weight:var(--peso-fuerte)}
/* Sin nada elegido la barra no desaparece: queda con la instrucción. Una barra
   que aparece y desaparece mueve la grilla entera cada vez que se marca la
   primera casilla. */
.barra-seleccion[data-vacia] .cuenta-seleccion{color:var(--texto-3)}

/* ── Panel de detalle / hoja ────────────────────────────────────────────────
   En escritorio es un panel fijo; en tableta entra desde la derecha; en
   teléfono sube desde abajo. Una sola pieza, tres comportamientos. */
.detalle{
  width:var(--detalle-ancho);padding:var(--esp-7);
  display:flex;flex-direction:column;gap:var(--esp-6);
  border-left:1px solid var(--borde);background:var(--superficie-alta);
}
.detalle-fila{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--esp-2) var(--esp-6);font-size:var(--fs-dato)}
.detalle-fila .l{color:var(--texto-2)}
.detalle-fila .r{font-variant-numeric:tabular-nums;font-weight:var(--peso-medio);white-space:nowrap}
.detalle-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--esp-5);
  border-top:1px solid var(--borde-vivo);padding-top:var(--esp-5);
}

/* 🔀 **El velo anima sólo `opacity`, y ya no desenfoca** (`T169`, 08/10/2026; **R2**, **A5**).
   Animaba también el `backdrop-filter` de 0 a 18 px, y se midió en dos pasos, sin GPU y a 1440
   (mediana por cuadro, tres aperturas seguidas cada una):
     · desenfoque animado de 0 a 18 px ........ 20 fps al abrir (50 ms; 13 de 15 cuadros > 33 ms);
     · desenfoque **fijo** y sólo `opacity` .... 52–58 ms, 6–7 cuadros > 33 ms: no mejora —el
       navegador vuelve a filtrar el fondo en cada cuadro mientras la capa cambia de opacidad—;
     · **sin desenfoque** ...................... 16,7 ms y ningún cuadro > 33 ms.
   Es la misma lección del giro del cielo (`T038`): el desenfoque se sacó. El velo queda como un
   tinte (`--velo`) que sube y baja; el fondo no se disuelve, se apaga. La medición con una GPU
   real queda por hacer: si cuesta lo mismo que un tinte, el desenfoque fijo podría volver.
   🔀 **El velo y su hoja son un solo gesto** (`T181`, **G15**): la misma duración y la misma curva que la
   hoja, en los dos sentidos. Acá, los de la hoja centrada; los de la hoja de borde del teléfono están
   en `formatos.css`. */
.velo{
  position:absolute;inset:0;z-index:20;background:var(--velo);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-corta) var(--curva-salida);
}
[data-hoja-abierta] .velo{
  opacity:1;pointer-events:auto;
  transition:opacity var(--dur-larga) var(--curva-hoja);
}
/* 🔀 **La hoja se centra en la ventana, no en el marco** (`T111`, 25/09/2026). Era `absolute`
   contra `.marco`, y en escritorio el marco mide lo que mide la página: con el plan —1.455 px de
   alto en una ventana de 900— `top:50%` caía a 727 px y la hoja de deshacer, que es la más alta,
   **dejaba los botones abajo del borde**. Se vio en una captura; en el acta no pasaba porque la
   página es más corta. `fixed` la ata a la ventana, y el tope de alto con desplazamiento propio
   cubre la hoja que igual no entre. El velo sigue `absolute`: tiene que tapar la página entera.
   🔀 **La hoja es opaca** (`T155`, 06/10/2026). Reflejaba lo que había detrás — se veían manchas
   del contenido, avisos, botones a través del diálogo—, impidiendo leer. Se corrigió con el
   mismo patrón que `.hoja__pie`: fondo opaco (`cielo-piso`) + capa de `superficie-alta` con
   `background-image` de gradiente, dejando el velo desenfocado por debajo. */
.hoja{
  position:fixed;z-index:21;left:50%;top:50%;width:min(var(--hoja-ancho),86%);
  max-height:calc(var(--alto-de-pantalla) - var(--esp-9) * 2);overflow-y:auto;
  padding:var(--esp-9);border-radius:calc(var(--radio-panel) + 4px);
  background:var(--superficie-alta);background-color:var(--cielo-piso);background-image:linear-gradient(var(--superficie-alta),var(--superficie-alta));box-shadow:var(--sombra-hoja);
  /* 🔀 **Abre como cierra** (`T169`, 08/10/2026). Dos estados con el mismo camino: `--hoja-cerrada`
     y `--hoja-abierta` son los dos extremos del recorrido, y `formatos.css` los cambia en el
     teléfono (donde sube desde abajo). Con movimiento reducido los dos valen lo mismo y la hoja
     sólo funde. **La entrada** (`[data-hoja-abierta]`, más abajo) dura `--dur-larga` con
     `--curva-hoja`; **la salida**, que es este bloque, dura menos y usa `--curva-salida`
     (`movimiento.md § 2`: lo que sale dura menos). `portal.js` fuerza un cuadro cerrado antes de
     poner el atributo: sin él, la hoja nacía ya en su estado final y no había nada que animar. */
  /* 🔀 **Opaca antes de moverse** (`T181`, **A1**, **G15**). Entraba con una `opacity` de `--dur-corta`
     sobre un recorrido de `--dur-larga`: a +80 ms se leía un importe de atrás dentro de la hoja. Ahora
     la `opacity` llega en `--dur-instante` y el recorrido se asienta con `--curva-hoja`; sale con
     `transform` y `opacity` **juntos** en `--dur-corta`, entre los mismos extremos. `--hoja-entra` es
     cuánto dura la entrada del recorrido: el arrastre (`sofArrastre.retomar`) lo lee de acá, y la hoja
     de borde del teléfono lo cambia por `--dur-hoja` (`formatos.css`). */
  --hoja-cerrada:translate(-50%,-48%) scale(.97);
  --hoja-abierta:translate(-50%,-50%) scale(1);
  --hoja-entra:var(--dur-larga);
  transform:var(--hoja-cerrada);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-corta) var(--curva-salida),
             transform var(--dur-corta) var(--curva-salida),
             visibility 0s linear var(--dur-corta);
}
[data-hoja-abierta] .hoja{
  transform:var(--hoja-abierta);opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity var(--dur-instante) var(--curva-salida),
             transform var(--hoja-entra) var(--curva-hoja),visibility 0s;
}
/* 🔴 **Adentro de la hoja, cada pieza con su aire y su peso** (`T111`, 25/09/2026). Hasta acá la
   hoja era un bloque sin espacio interno y con `p{margin:0}` global: el título, los párrafos, el
   campo y los botones salían **pegados**, y lo que la hoja tiene que decir —qué se mueve, cuánta
   plata, qué no vuelve— quedaba enterrado en prosa. Se ordena en cuatro escalones:

   1. **La pregunta** (`h2`) y **una** frase de bajada, en gris secundario.
   2. **Los efectos**, como renglones rotulados (`.resumen`): rótulo a la izquierda, valor a la
      derecha, cifras alineadas. Se leen de un vistazo y se comparan.
   3. **El campo**, con su rótulo y su ayuda de una línea.
   4. **Los botones**, a la derecha, con la acción al final.

   Aplica a toda `.hoja`: la del acta (`T087`) tenía el mismo defecto. */
/* 🔀 **Los tres niveles de peso, y dos escalones de aire** (`T115`, 26/09/2026). El orden de
   arriba ordena la hoja; no decía qué mirar primero — `.hoja .resumen .cifra` no tenía
   `font-size` propio y pesaba lo mismo que el rótulo de al lado. Corrección del usuario, la
   misma que `T111` un día antes: *«todo pesa igual… los importes no resaltan»*. La spec completa
   está en `diseno/pantallas/interno/15-jerarquia-de-las-hojas.md`.

   Tres niveles: **1·la pregunta** (`h2`, sin cambios: `--f-titulo`, `--peso-negro`, primero en el
   marcado); **2·la cifra que decide el acto** (`.hoja__cifra-valor`, nuevo); **3·todo lo demás**
   (bajada, resumen, ayudas). 🔴 **La cifra mide más que el `h2`** (`--fs-cifra` 21px contra
   `--fs-titulo` 17px) y aun así es el nivel 2, no el 1: el `h2` sigue mandando por posición,
   familia y peso, no por tamaño — el sistema no tiene un token de tamaño para «lo más grande de
   todos», tiene tres pesos y una jerarquía por lugar (`DESIGN.md` § Jerarquía). Un token de
   cifra nuevo hubiera sido inventar un cuarto nivel para no reusar uno que ya existe.

   Dos escalones de aire, no uno: `.hoja{gap:var(--esp-8)}` (20px) separa los cuatro grupos —qué
   pasa / con qué / motivo / acciones—; dentro de un grupo (h2↔bajada, cifra↔su etiqueta,
   cifra↔lo que la sigue) el margen negativo lo recorta a `--esp-3`/`--esp-4` (6–8px). Los
   márgenes negativos son válidos acá porque `.hoja` es flex con `gap`: lo que hacen es **restar**
   del espacio grande que el `gap` ya puso, nunca superponer contenido. */
.hoja{display:flex;flex-direction:column;gap:var(--esp-8)}
.hoja > h2{margin:0;font-size:var(--fs-titulo);line-height:1.25;text-wrap:balance}
.hoja__bajada{margin:calc(var(--esp-8) * -1 + var(--esp-3)) 0 0;color:var(--texto-2);
  font-size:var(--fs-base);line-height:1.45;max-width:46ch}
/* Nivel 2 · la cifra que decide el acto: el importe o el conteo, siempre entre la bajada y el
   resumen/la lista que la explica. Nunca dentro de un párrafo, nunca repetida a este tamaño dos
   veces en la misma hoja. */
.hoja__cifra{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--esp-4);margin:0}
.hoja__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;text-align:left;white-space:nowrap;
}
/* Lo que ese número significa, en 2 a 6 palabras. `--texto-2` y nunca `--texto-3`: hay que
   poder leerlo, no es un adorno. */
.hoja__cifra-etiqueta{font-size:var(--fs-base);font-weight:var(--peso-normal);color:var(--texto-2)}
.hoja .resumen{
  margin:0;padding:var(--esp-6) 0;gap:var(--esp-5);
  border-top:1px solid var(--separador);border-bottom:1px solid var(--separador);
}
.hoja .resumen > div{align-items:baseline}
.hoja .resumen dd{text-align:right;font-weight:var(--peso-medio);color:var(--texto)}
.hoja .resumen .cifra{font-family:var(--f-dato);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 🔴 **Segunda vuelta (`T115`, 27/09/2026): sin segunda línea gris.** El `<small>` de matiz
   —«queda Anulado», «no vuelve»— sumaba texto debajo de cada valor sin agregar información: el
   hecho que decía ya era obligatorio, así que pasó al rótulo (`dt`) de su propia fila, no a una
   línea aparte. `.hoja .resumen dd small` se retira: ninguna de las ocho hojas lo usa (las cinco
   que nunca lo tuvieron, y las tres que sí ya lo sacaron). No hay otra pantalla con `.resumen`
   dentro de `.hoja` que dependa de esta regla — `credito.html`, `_totales_de_la_carga.html` y
   `_el_calculo_del_plan.html` usan `.resumen` fuera de `.hoja`, con su propio bloque. */
.hoja form{display:flex;flex-direction:column;gap:var(--esp-6)}
.hoja .acciones{display:flex;gap:var(--esp-4);justify-content:flex-end;flex-wrap:wrap}
/* 🔴 **El `margin-top` es de `.hoja form .acciones`, no de `.hoja .acciones` a secas**
   (`T115`, medido en el navegador). Adentro de un `<form>` el `gap` de 12px (arriba) más este
   margen de 8px dan los 20px de separación entre el motivo y las acciones. Pero la rama vacía
   de `_hoja_de_deshacer.html` («no hay recibo que deshacer») tiene un `.acciones` **suelto**,
   hijo directo de `.hoja` y sin `<form>`: ahí el `gap:20px` de `.hoja` ya alcanza, y sumarle
   este margen medía 28px de más — se vio con `getBoundingClientRect`, no a ojo. */
.hoja form .acciones{margin-top:var(--esp-4)}              /* + los 12px del form = 20px */
/* 🔴 **Un vacío de contraste que la jerarquía también cierra** (`T115`). `.campo-grupo > .ayuda`
   usaba `--texto-3` para texto que hay que leer —P29, «se guarda en el historial»—, y no llega a
   4.5:1; un `<p class="ayuda">` suelto (sin regla propia dentro de `.hoja`) caía al extremo
   contrario, tinta plena (`--texto`), que pesa igual que un dato siendo una aclaración. Las dos
   van a `--texto-2`, nunca a `--texto-3` ni a tinta plena. */
.hoja .campo-grupo > .ayuda{color:var(--texto-2)}
.hoja > .ayuda,
.hoja form > .ayuda{
  display:block;margin:0;max-width:46ch;
  font-size:var(--fs-menor);font-weight:var(--peso-normal);color:var(--texto-2);
}
.hoja .lista-de-actas,
.hoja .lista-de-bloqueantes{margin:0}
/* Una lista adentro de la hoja lleva su rótulo, como un grupo de campos: sin él, la lista se lee
   como más párrafo. */
/* `margin-bottom` sólo: el resto queda en el `margin:0` de `p{}` (`base.css`). Así
   `.hoja__rotulo.hoja__nota` (`_hoja_de_intimacion.html`) puede seguir pisando el `margin-top` sin
   que este shorthand se lo lleve puesto por venir declarado después en la cascada. */
.hoja__rotulo{margin-bottom:calc(var(--esp-8) * -1 + var(--esp-3));font-family:var(--f-dato);
  font-size:var(--fs-etiqueta);letter-spacing:var(--track-etiqueta);text-transform:uppercase;
  color:var(--texto-2)}
/* Cada acta en un renglón: el número a la izquierda, el importe a la derecha. */
.hoja .lista-de-actas > li{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--esp-5)}
/* Lo que se mueve con su estado de origen y de destino (`T065`): el instrumento arriba y «de → a» debajo, porque
   en 424 px las dos mitades juntas parten el período y el estado a media palabra. */
.hoja .lista-de-actas--movimientos > li{flex-direction:column;align-items:flex-start;gap:var(--esp-1)}
/* La plata en la lista, un escalón por encima del texto de al lado (`--peso-fuerte`, 600) —
   por debajo del nivel 2 (`--peso-negro`, 700), sin competir con la cifra que decide el acto. */
.hoja .lista-de-actas .cifra{font-family:var(--f-dato);font-variant-numeric:tabular-nums;
  font-weight:var(--peso-fuerte);color:var(--texto);white-space:nowrap}
/* 🔴 **El importe con su columna propia** (`T113`, 26/09/2026). Cuando la fila también trae una
   pastilla de estado, las dos comparten el lado derecho de la fila — pero si el importe fuera lo
   último en el marcado, el ancho variable de la pastilla («Con deuda» ≠ «Intimada por PP») corría
   su borde izquierdo, y con él la coma decimal: medido a 1440 px, hasta 51 px de una fila a otra.
   `.lista-de-actas__valor` agrupa las dos piezas en **un solo ítem flexible**, con la pastilla
   **antes** que el importe: así el importe queda pegado al borde derecho del grupo —que a su vez
   queda pegado al borde derecho de la fila por el `space-between` de arriba— sin que le importe
   cuánto mida la pastilla de al lado. Ninguna otra hoja necesita el envoltorio: la que sólo
   muestra el importe (`_hoja_de_intimacion.html`, `plan.html`) ya lo tiene pegado a la derecha
   porque es el único ítem de ese lado; la que sólo muestra la pastilla (`_hoja_de_reactivar.html`)
   no tiene coma que alinear. */
.hoja .lista-de-actas__valor{display:flex;align-items:baseline;gap:var(--esp-3)}
/* 🔴 **`.hoja__nota` va al final del bloque, y es a propósito** (`T115`). Es un opt-in que se
   agrega a mano en la plantilla — junto a `.resumen`, `.hoja__rotulo`, `.lista-de-actas` o
   `<p class="ayuda">`— para decir «sigo perteneciendo al grupo de arriba, no abro uno nuevo»
   (§2 de la spec). Todas esas clases ya traen su propio `margin-top:0` con la misma especificidad
   de dos clases (`.hoja .resumen`, `.hoja .lista-de-actas`, `.hoja > .ayuda`): sólo **ganando el
   empate por orden** —declarándose último— este selector, con la misma especificidad, puede
   recortar el espacio sin que la regla de la clase base se lo vuelva a poner en cero. */
.hoja .hoja__nota{margin-top:calc(var(--esp-8) * -1 + var(--esp-4))}
@container app (max-width:40rem){
  .hoja .acciones{flex-direction:column-reverse}
  .hoja .acciones .boton{width:100%;justify-content:center}
}
/* 👆 **La agarradera promete un arrastre, así que sólo se dibuja donde hay arrastre** (`T173`;
   **G7**: lo prometido tiene que verse, y lo que se ve tiene que cumplirse). Con mouse y a más de
   1080 px las hojas se cierran con `Esc`, el velo o su botón, y la agarradera no existe; con el dedo
   (o a un ancho de tableta o teléfono) la hoja sigue al dedo y se cierra con un gesto (`portal.js`,
   `sofArrastre`). La consulta es la misma de `T172`, la única del sistema: no se escribe otra. El
   marcado no se toca. El área que se agarra mide `--tactil-min` de alto (**C1**): el `::before`
   crece la caja sin cambiar lo que se ve, y `touch-action:none` en ella y en la cabecera es lo que
   deja que el navegador no se quede con el gesto como desplazamiento. */
.agarradera{display:none}
@media (pointer:coarse),(max-width:67.5rem){
  .agarradera{
    display:block;position:relative;width:38px;height:4px;border-radius:var(--radio-pastilla);
    background:var(--borde-vivo);margin:var(--esp-1) auto var(--esp-5);flex:none;touch-action:none;
  }
  .agarradera::before{
    content:"";position:absolute;inset:calc((var(--tactil-min) - 4px) / -2) -4.5rem;
  }
  .hoja > h2,.filtros__hoja-tapa,.mas__titulo{touch-action:none}
}

/* ── Navegación lateral ─────────────────────────────────────────────────── */
.nav{width:var(--nav-ancho);padding:var(--esp-6) var(--esp-5);display:flex;flex-direction:column;gap:var(--esp-1);border-right:1px solid var(--borde)}
.nav-grupo{font-family:var(--f-dato);font-size:var(--fs-micro);letter-spacing:var(--track-seccion);text-transform:uppercase;color:var(--texto-3);padding:var(--esp-6) var(--esp-4) var(--esp-3)}
.nav a{
  display:flex;align-items:center;gap:var(--esp-5);
  min-height:var(--tactil-min);padding:var(--esp-3) var(--esp-4);
  border-radius:var(--radio-control);border:1px solid transparent;
  color:var(--texto-2);text-decoration:none;font-size:var(--fs-dato);font-weight:var(--peso-medio);
  transition:background var(--dur-corta) var(--curva-salida),color var(--dur-corta) var(--curva-salida),border-color var(--dur-corta) var(--curva-salida),
             transform var(--dur-corta) var(--curva-salida),
             box-shadow var(--dur-corta) var(--curva-salida);
}
/* mismo gesto que el botón y la pestaña */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{
    background:var(--superficie-hover);color:var(--texto);
    transform:translateY(var(--elevacion));box-shadow:var(--sombra-control-alta);
  }
}
.nav a:active{transform:scale(var(--escala-presion));box-shadow:var(--sombra-control-presion)}
.nav a[aria-current="page"]{background:var(--superficie-activa);color:var(--texto);border-color:var(--borde-vivo)}
.nav a svg{width:16px;height:16px;flex:none}
/* La marca que se desliza (T117b). La pastilla del enlace activo deja de ser su propio fondo y
   pasa a ser una pieza aparte, `.nav__indicador`, que `portal.js` coloca debajo del activo y
   desliza en el clic — la sección no recarga el documento, así que la barra no se vuelve a pintar
   y la pastilla tiene de dónde partir. Es la misma idea que la corredera del conmutador, en
   vertical y con el fondo neutro de siempre. `data-indicador` lo pone el script cuando la
   coloca: sin JavaScript el activo conserva su fondo y no se pierde nada más que el recorrido. */
.nav[data-indicador]{position:relative}
.nav[data-indicador] a{position:relative;z-index:1}
.nav[data-indicador] a[aria-current="page"]{background:transparent;border-color:transparent}
/* El activo no sube al pasar el puntero: subiría el texto y la pastilla se quedaría abajo. */
.nav[data-indicador] a[aria-current="page"]:hover{background:transparent;transform:none;box-shadow:none}
/* Pero sí se hunde al presionarlo: el `:hover` de arriba pesa más que `.nav a:active`, y sin esta
   regla el enlace de la sección en la que se está sería lo único de la barra que no responde. */
.nav[data-indicador] a[aria-current="page"]:active{transform:scale(var(--escala-presion))}
.nav__indicador{
  position:absolute;top:0;left:0;width:0;height:0;z-index:0;pointer-events:none;
  border-radius:var(--radio-control);border:1px solid var(--borde-vivo);
  background:var(--superficie-activa);
  /* 🔀 **Se estira, no se traslada** (`T178`, gesto 13). El viaje ya no es una transición de CSS: lo
     corre `portal.js` con la API de animaciones, porque los dos bordes llevan curvas distintas y una
     transición tiene una sola por propiedad. Queda la de `opacity`, que es la de la marca que aparece o se
     apaga. Esta pieza es la excepción acotada a la **R2** (`movimiento.md`): un indicador absoluto,
     `aria-hidden`, sin hijos y con `pointer-events:none` no participa del flujo, así que su `height` no
     reflowea nada. Prohibido acá animar `top`, `left`, `inset`, `margin` y `padding`. */
  transition:opacity var(--dur-corta) var(--curva-salida);
}

/* ── Barra inferior (teléfono) ──────────────────────────────────────────────
   Componente propio, no la navegación lateral reciclada.

   Es una superficie FIJA por la que pasa el contenido al scrollear, así que no
   puede usar --superficie como un panel: a 7,8 % de opacidad se leen las filas
   que van pasando por debajo y la barra se vuelve ilegible. 🔴 Desde T166 es
   **opaca**: --cromo (86 %) sobre --cielo-piso, sin desenfoque. Con 14 de
   desenfoque las filas de atrás se leían borrosas, pero se leían (A1, D6). */
.pestanas{display:flex;align-items:flex-end;gap:var(--esp-1);position:relative;overflow:visible;
  padding:var(--esp-3) var(--esp-3) calc(var(--esp-3) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--borde);
  /* 🔴 **Opaca** (T166, **A1**, **D6**): `--cromo` es 86 % y dejaba pasar las filas de la lista; con el
     desenfoque se leían borrosas pero se leían. El piso del tema debajo y el cromo encima. Sin
     `backdrop-filter`: ya no hay nada que ver a través. */
  background:linear-gradient(var(--cromo),var(--cromo)),var(--cielo-piso);
  box-shadow:0 -1px 0 var(--separador),var(--sombra-panel)}
.pestana{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--esp-3);
  min-height:var(--pestana-alto);padding:var(--esp-4) var(--esp-1) var(--esp-2);
  border:0;border-radius:var(--radio-4);background:none;cursor:pointer;position:relative;
  color:var(--texto-2);text-decoration:none;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-corta) var(--curva-salida),background var(--dur-corta) var(--curva-salida),
             transform var(--dur-corta) var(--curva-salida),
             box-shadow var(--dur-corta) var(--curva-salida);
}
.pestana svg{width:20px;height:20px;flex:none}
.pestana span{font-size:var(--fs-micro);font-weight:var(--peso-fuerte);line-height:1;white-space:nowrap}
/* mismo gesto que el botón: sube y despliega sombra, se hunde al presionar */
@media (hover:hover) and (pointer:fine){
  .pestana:hover{
    color:var(--texto);background:var(--superficie-hover);
    transform:translateY(var(--elevacion));box-shadow:var(--sombra-control-alta);
  }
  /* la ranura del botón de acción no es accionable: nunca se eleva */
  .pestana--hueco:hover{transform:none;box-shadow:none;background:none}
}
.pestana:active{background:var(--superficie-activa);transform:scale(var(--escala-presion-chip));box-shadow:var(--sombra-control-presion)}
.pestana[aria-current="page"]{color:var(--texto)}
/* El estado activo enciende la pieza entintada del propio ícono. */
.pestana[aria-current="page"]{--tinta:var(--acento)}
.pestana[aria-current="page"]::before{
  content:"";position:absolute;top:0;width:20px;height:2.5px;
  border-radius:0 0 3px 3px;background:var(--acento);
}
/* La raya que se desliza (T117b): la misma de arriba, pero una sola para toda la barra, que
   `portal.js` corre de una pestaña a la otra en el clic. Con ella puesta, la de cada pestaña se
   apaga; sin JavaScript queda la de cada pestaña, y se pierde sólo el recorrido. */
.pestanas[data-indicador] .pestana[aria-current="page"]::before{content:none}
/* La primera colocación de las dos marcas no viaja —nace donde le toca—, igual que la corredera:
   sin esto entrarían deslizándose desde la esquina en cada carga. */
.nav__indicador.sin-viaje,.pestanas__indicador.sin-viaje{transition:none}
.pestanas__indicador{
  position:absolute;top:0;left:0;width:20px;height:2.5px;z-index:1;pointer-events:none;
  border-radius:0 0 3px 3px;background:var(--acento);
  /* La misma excepción que `.nav__indicador`, en ancho: la raya se estira con `width` de la animación
     de `portal.js` (`T178`, gesto 13). Aquí sólo queda la `opacity`. */
  transition:opacity var(--dur-corta) var(--curva-salida);
}

/* ── «Más» (teléfono) ───────────────────────────────────────────────────────
   La cuarta pestaña y la hoja de **navegación** que abre: se apoya sobre la barra y la barra
   sigue a la vista —a diferencia de `.hoja`, que es de tarea y la cubre—. Vive adentro de
   `.pestanas`, así que donde la barra no se dibuja tampoco existe.

   La hoja se ancla al borde de arriba de la barra (`bottom:100%`) y el `clip-path` la recorta
   por abajo: entra deslizándose **desde detrás de la barra**, no por encima de las pestañas. El
   velo es un enlace del alto de la ventana, apilado sobre la hoja de atrás. No lleva desenfoque:
   `.pestanas` era una capa de `backdrop-filter` (hasta T166, ya es opaca) y un hijo suyo sólo vería lo
   que hay adentro.

   Sin JavaScript abre con `:target` (la pestaña es un enlace a la hoja); con JavaScript la barra
   lleva `data-mas-listo` y manda `data-mas-abierto`. */
.pestana--mas[aria-expanded="true"]{color:var(--texto);--tinta:var(--acento)}
.mas{
  position:absolute;left:0;right:0;bottom:100%;z-index:1;
  clip-path:inset(calc(var(--alto-de-pantalla) * -1) 0 0 0);visibility:hidden;
  transition:visibility 0s linear var(--dur-hoja-sale);
}
.mas__velo{
  position:absolute;left:0;right:0;bottom:0;height:var(--alto-de-pantalla);
  /* Dos capas del mismo token: sin desenfoque, el tinte solo no separa la hoja del contenido. */
  background:linear-gradient(var(--velo),var(--velo)),var(--velo);
  opacity:0;-webkit-tap-highlight-color:transparent;
  /* 🔒 **Cerrado no recibe toques** (`T202`): durante la salida un toque atraviesa el velo que se va
     en vez de volver a «cerrar». Sólo abierta (reglas de abajo) es una superficie. */
  pointer-events:none;
  /* El velo con su hoja (`T181`, **G15**): mismo tiempo y misma curva, en los dos sentidos. */
  transition:opacity var(--dur-hoja-sale) var(--curva-hoja);
}
.mas__hoja{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--esp-6);
  padding:var(--esp-5) var(--esp-7) var(--esp-7);
  border:1px solid var(--borde);border-bottom:0;border-radius:var(--radio-6) var(--radio-6) 0 0;
  /* 🔴 **Dos capas de `--cromo`, no una.** Sin desenfoque (ver arriba) un 86 % de opacidad deja
     ver las filas de la lista a través de la hoja y los rótulos se leen sobre ellas. Apilar el
     mismo token sube la opacidad a ~98 % sin inventar un color. */
  background:linear-gradient(var(--cromo),var(--cromo)),var(--cromo);
  box-shadow:var(--sombra-panel);
  /* Sale en `--dur-hoja-sale` y entra en `--dur-hoja` (`T181`): con la salida tan larga como la entrada
     quedaban 25 px asomando sobre la barra ~280 ms. Sólo `transform`: una hoja de borde no funde. */
  transform:translateY(102%);
  transition:transform var(--dur-hoja-sale) var(--curva-hoja);
}
.mas__titulo{margin:0;font-size:var(--fs-medio);font-weight:var(--peso-fuerte);color:var(--texto)}
.mas__grilla{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--esp-4);
}
.mas__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--esp-4);
  min-height:calc(var(--tactil-pestana) + var(--esp-10));padding:var(--esp-5) var(--esp-4);
  border:1px solid var(--borde);border-radius:var(--radio-4);background:var(--superficie);
  color:var(--texto);text-decoration:none;text-align:center;
  font-size:var(--fs-dato);font-weight:var(--peso-medio);line-height:1.2;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-corta) var(--curva-salida),border-color var(--dur-corta) var(--curva-salida),
             transform var(--dur-corta) var(--curva-salida);
}
.mas__item svg{width:22px;height:22px;flex:none}
/* 🔴 **El rótulo de una entrada de «Más» envuelve** (`T220`). «Confirmaciones» más su cuenta mide 171 px con el
   texto al 200 % y la celda, 113: sobresalía 12 px del marco y la barra deslizaba de costado (`test_t171`). Una
   palabra larga se parte antes de empujar el marco; con el texto normal no cambia nada. */
.mas__item span{min-width:0;max-width:100%;overflow-wrap:anywhere}
.mas__item:active{background:var(--superficie-activa);transform:scale(var(--escala-presion))}
.mas__item[aria-current="page"]{border-color:var(--borde-vivo);--tinta:var(--acento)}
.mas__item:focus-visible,.pestana--mas:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.mas__cerrar{align-self:stretch;justify-content:center}
.pestanas[data-mas-listo] .mas__cerrar{display:none}
.pestanas[data-mas-abierto] .mas,
.pestanas:not([data-mas-listo]) .mas:target{visibility:visible;transition-delay:0s}
.pestanas[data-mas-abierto] .mas__velo,
.pestanas:not([data-mas-listo]) .mas:target .mas__velo{
  opacity:1;pointer-events:auto;transition:opacity var(--dur-hoja) var(--curva-hoja)}
.pestanas[data-mas-abierto] .mas__hoja,
.pestanas:not([data-mas-listo]) .mas:target .mas__hoja{
  transform:none;transition:transform var(--dur-hoja) var(--curva-hoja)}
/* Con la hoja abierta la pestaña de la pantalla en la que se está se apaga y se enciende «Más»: la
   barra sigue a la vista y tiene que decir **qué está abierto**, no dos cosas a la vez. */
.pestanas[data-mas-abierto] .pestana[aria-current="page"]:not(.pestana--mas){color:var(--texto-2);--tinta:currentColor}
.pestanas[data-mas-abierto]:not(:has(> .pestana--mas[aria-current="page"])) .pestanas__indicador{background:var(--texto-3)}
/* Sin JavaScript no hay `aria-expanded`: el ancla activa la misma marca de «abierta». */
.pestanas:not([data-mas-listo]) .pestana--mas:has(+ .mas:target){color:var(--texto);--tinta:var(--acento)}

/* ── Botón de acción (teléfono) ─────────────────────────────────────────────
   La acción del inspector no es un destino: no compite con la navegación.
   Va redondo, centrado en la barra y sobresaliendo, con el nombre en
   aria-label — así no le come ancho a las pestañas. */
.accion{
  position:absolute;left:50%;top:calc(var(--accion-medida) / -2 + 7px);z-index:28;
  transform:translateX(-50%);
  display:grid;place-items:center;
  width:var(--accion-medida);height:var(--accion-medida);padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:var(--acento);color:var(--acento-tinta);
  box-shadow:0 12px 26px -8px rgba(0,0,0,.66),0 2px 6px -2px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-corta) var(--curva-rebote),box-shadow var(--dur-corta) var(--curva-salida),
             filter var(--dur-corta) var(--curva-salida),opacity var(--dur-corta) var(--curva-salida);
}
.accion svg{width:23px;height:23px;flex:none}
/* mismo gesto que el botón, componiendo con su centrado */
@media (hover:hover) and (pointer:fine){
  .accion:hover{transform:translateX(-50%) translateY(var(--elevacion));box-shadow:0 16px 32px -8px rgba(0,0,0,.7),0 4px 10px -3px rgba(0,0,0,.5)}
}
.accion:active{transform:translateX(-50%) translateY(0) scale(.96);box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
[data-hoja-abierta] .accion{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px) scale(.9)}
/* la ranura central de la barra le hace lugar */
.pestana--hueco{pointer-events:none;flex:0 0 62px}

/* ── Íconos ─────────────────────────────────────────────────────────────────
   Nueve marcas sobre grilla de 16, trazo 1,4 y UNA sola pieza entintada
   (.tinta) en cada una. Esa pieza es lo que las hace familia — y lo que se
   enciende en el estado activo. Se usan desde el sprite:
       <svg class="icono"><use href="{% static 'iconos/sprite.svg' %}#icono-actas"></use></svg> */
.icono{
  width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  --tinta:currentColor;
}
/* ⚠️ La tinta se controla con la variable --tinta, NO con el selector .tinta.
   <use> clona el símbolo en un shadow tree y los selectores de clase del
   documento no entran ahí; las custom properties sí heredan. Con .tinta el
   estado activo de las pestañas no pintaba nunca. */
.icono .tinta{fill:var(--tinta,currentColor);stroke:none}

/* ── Sello ──────────────────────────────────────────────────────────────────
   El gesto propio del oficio. Lleva el número de recibo adentro. */
.sello{
  position:absolute;z-index:31;left:50%;top:50%;
  width:var(--sello-medida);height:var(--sello-medida);
  transform:translate(-50%,-50%) rotate(-13deg) scale(1.75);
  opacity:0;pointer-events:none;color:var(--sello);
}
[data-sellado] .sello{animation:sellar var(--dur-sello) var(--curva-rebote) forwards}

/* ── La espera ──────────────────────────────────────────────────────────────
   El isotipo de la obra social, girando. Es la segunda señal de carga del
   sistema, y **no reemplaza a la primera**: el hilo de `movimiento.css` §11
   dice «esta región se actualiza»; el isotipo dice «hay algo en curso», que es
   lo que hacía falta donde no hay región que marcar — el botón que ya se
   apretó, el ingreso, el arranque, un pie de listado.

   🔒 **Un solo archivo para los dos temas.** El símbolo toma el color por
   `currentColor`, así que acá se pinta con `color` y NUNCA con `fill`: el
   `<use>` clona el símbolo en un shadow tree, donde el `fill="currentColor"`
   propio del símbolo le gana a cualquier `fill` heredado de afuera.

   Dos medidas, y cada una tiene motivo:
     20 px — el tamaño de trabajo: un botón, una píldora. Es la medida de
             `.pestana svg`, un escalón por encima de `.icono`, y viene del
             entregable con su razón escrita: «a 16 px se leía apenas».
     92 px — una pantalla entera esperando: el ingreso.

   📎 **El entregable traía una tercera, de 16 px, para «la fila que se
   recalcula». Acá no entra, y no es un olvido:** una fila que se recalcula **es
   una región**, y para eso el sistema ya tiene el hilo, que es mejor —ocupa cero
   espacio y dice *dónde*—. Poner las dos señales sobre lo mismo sería ruido.

   El giro y su demora viven en `movimiento.css`, no acá. */
.espera{
  width:20px;height:20px;flex:none;display:block;
  fill:currentColor;stroke:none;
  /* 🔑 **Por defecto va en el color de la marca, no en el del texto.** Es el
     logotipo de la obra social: pintado con `--texto` se lee como un glifo más
     de la fila —se probó, y se veía así—. Que el valor por defecto sea el acento
     es lo que hace que no haya que acordarse en cada lugar nuevo; lo pisa el
     único caso que no puede llevarlo, el botón lleno (`movimiento.css` §11). */
  color:var(--acento);
}
.espera--grande{width:92px;height:92px}

/* Le gana a `.boton svg{width:16px}` por especificidad (0,2,0 contra 0,1,1) y
   sin `!important`: el isotipo de un botón es el de 20 px, no el de ícono. */
.boton .espera{width:20px;height:20px}

/* La píldora del intercambio total.

   Cuatro plantillas intercambian el documento entero (`hx-target="body"`) y
   ahí `portal.js` no marca nada **a propósito**: atenuar la pantalla entera es
   el velo global que la doctrina prohíbe. La píldora es la respuesta honesta —
   dice que hay algo en curso sin apagar ni desplazar nada—. Va dentro de `.app`
   para que el formato de teléfono la alcance. */
.espera-global{
  position:fixed;z-index:26;
  right:var(--esp-7);bottom:calc(var(--esp-7) + env(safe-area-inset-bottom,0px));
  display:none;align-items:center;gap:var(--esp-4);
  min-height:var(--boton-alto);padding:0 var(--esp-6);
  border-radius:var(--radio-pastilla);
  background:var(--superficie-alta);border:1px solid var(--borde);
  box-shadow:var(--sombra-panel);
  color:var(--texto-2);
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;
}
.espera-global[data-espera]{display:flex}
/* En teléfono la barra de pestañas está fija al borde de abajo: la píldora se
   corre por encima en vez de taparla. Mismo corte que usa la barra. */
@container app (max-width:40rem){
  .espera-global{bottom:var(--reserva-inferior-telefono)}
}
/* La misma píldora, anclada a la sección que espera (T117b). Mientras llega la sección que se
   eligió en el menú, la vieja se atenúa y ésta aparece encima, centrada en el contenido y no en
   la esquina de la ventana: la pregunta es «¿llega lo que pedí?», y se contesta donde se está
   mirando. La enciende `data-esperando` sobre `#pantalla` (gesto 11), con su demora de 140 ms. */
.espera-global--seccion{position:absolute;left:50%;right:auto;bottom:auto;
  top:clamp(140px,calc(var(--alto-de-pantalla) * .34),50%);translate:-50% 0;z-index:3}
@container app (max-width:40rem){
  .espera-global--seccion{bottom:auto}
}

/* ── El esqueleto ───────────────────────────────────────────────────────────
   La lista que muestra su forma mientras los datos viajan — variante 3 del
   entregable del 19/09/2026.

   ⚠️ **Hoy vive en el banco (`banco-espera.html`) y en ninguna pantalla, y eso
   es un dato, no un olvido.** Un esqueleto tapa el hueco de un contenido que
   **todavía no llegó**, y en esta aplicación ese hueco no existe: todo listado
   lo dibuja el servidor junto con la página, porque sin JavaScript tiene que
   seguir siendo legible (**ADR-0008**). Medido sobre el único fragmento que se
   pide aparte —el historial del plan, con `hx-trigger="revealed once"`—: la
   pantalla ya trae sus filas y el pedido de HTMX trae las mismas. No hay hueco.

   Queda construido y demostrable para la primera pantalla que cargue contenido
   a pedido de verdad —legales, empresas, asignación de actas—, que es cuando
   entra. Hasta entonces el banco es su consumidor y su prueba.

   🔑 **No es lo mismo que el hilo.** El hilo marca una región que **ya tiene
   contenido** y se está actualizando; el esqueleto ocupa el lugar de un
   contenido que no llegó. Si hay algo que mirar debajo, la señal es el hilo. */
.esqueleto{display:flex;flex-direction:column;gap:var(--esp-5)}
.esqueleto__rotulo{
  display:flex;align-items:center;gap:var(--esp-5);
  color:var(--texto-3);
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;
}
/* La fila toma la altura de una fila real de `.grilla` para que el relevo no
   mueva nada: el esqueleto que cambia de alto al llegar los datos es un salto
   con otro nombre. */
.esqueleto__fila{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:var(--esp-6);
  min-height:44px;padding:0 var(--esp-7);
  border-radius:var(--radio-3);
  background:var(--superficie-hover);border:1px solid var(--borde);
}
.esqueleto__barra{height:9px;border-radius:var(--radio-pastilla);background:var(--texto-3);opacity:.5}
/* La última barra de cada fila es la columna de importe: va a la derecha y en
   acento, porque es lo que el ojo busca primero en todas las grillas de plata
   del sistema. El esqueleto tiene que anticipar ESA forma, no una genérica. */
.esqueleto__barra--fin{margin-left:auto;background:var(--acento);opacity:.32}
/* Los cuatro anchos de `.grilla--seleccion` (Reasignar), por columna y no por
   posición: `style="width:…"` en la plantilla era estilo escrito a mano —lo
   mismo que este archivo existe para no tener que hacer—, y acá vive junto a
   `.esqueleto__barra` como el resto de sus variantes. */
.esqueleto__barra--casilla{width:8%}
.esqueleto__barra--empresa{width:42%}
.esqueleto__barra--zona{width:18%}
.esqueleto__barra--saldo{width:14%}

/* ── El barrido ─────────────────────────────────────────────────────────────
   La pantalla completa que espera: el ingreso mientras se verifica la clave
   —la espera más larga del sistema, porque el hash es lento a propósito— y el
   reintento sin conexión.

   📎 **Se aparta del entregable, y conviene decir en qué.** Ahí la luz recorre
   el logotipo completo, que son cuatro PNG (uno por tema y por capa). Traerlos
   contradice la decisión de esta tarea —un archivo, `currentColor`, los dos
   temas—, así que el barrido se arma con el isotipo y la barra indeterminada. */
.barrido{
  display:none;flex-direction:column;align-items:center;gap:var(--esp-9);
  width:100%;color:var(--acento);
}
/* Lo dibuja el servidor y lo enciende `portal.js` al enviar: el isotipo ya está
   descargado y pintado cuando hace falta, en vez de pedirse justo en el cuadro
   en que la red se ocupó con el pedido que importa. */
[data-espera] > .barrido{display:flex}
/* Los campos se retiran mientras espera. No es adorno: la pantalla ya navegó en
   la cabeza del operador, y dejar un formulario editable que no va a mandar nada
   invita a tipear encima de un envío en curso. */
.ingreso .panel[data-espera] .campo-grupo,
.ingreso .panel[data-espera] > .boton,
.ingreso .panel[data-espera] .campo-error{display:none}
.barrido__rotulo{
  color:var(--texto-2);
  font-family:var(--f-dato);font-size:var(--fs-menor);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;
}
.barrido__riel{
  position:relative;overflow:hidden;
  width:100%;height:4px;border-radius:var(--radio-pastilla);
  background:var(--superficie-hover);
}
.barrido__avance{
  position:absolute;top:0;bottom:0;left:-38%;width:38%;
  border-radius:var(--radio-pastilla);background:var(--acento);
}

/* ============================================================================
   Zonas de pantalla · `.zona`, `.filtros`, `.resumen-fijo`, `.barra-total`, `.cuadre`, `.datos`,
   `.tabla-agrupada`, `.mes-card`  (T155 §G, spec 25)
   ----------------------------------------------------------------------------
   La regla de jerarquía de las hojas (`15`) subida a la **pantalla entera**: cada cosa en su zona,
   con aire, y lo que decide a la vista. Cuatro niveles —dónde estoy · la cifra o la decisión · el
   cuerpo en zonas · el apoyo— y **una sola cifra a `--fs-cifra` por zona de cifras**.

   Sólo tokens: `--esp-*` para el aire, `--fs-*` para el tamaño, `--superficie*`/`--borde*`/`--texto*`
   para el color. Ningún hex, ninguna sombra de relleno y **ningún gesto de movimiento nuevo**: plegar
   y desplegar usa lo que ya hay.

   ⚠️ **`.zona` ya existía** como el rótulo de un `<span>` dentro de `.tapa` (`portal.css`,
   `.tapa .zona`). El panel nuevo se declara por **elemento** —`div`, `section`, `details`— para no
   alcanzar a los dieciséis `<span class="zona">` de las tapas.

   🔴 **Ni `backdrop-filter` ni `transform` en una zona**: convertirían a la zona en el bloque
   contenedor de todo `position:fixed` que lleve adentro (la hoja de filtros, la barra del total), y
   esas piezas se posicionarían contra la zona y no contra la ventana. Es la misma trampa que
   documenta `portal.css` sobre las animaciones de entrada.
   ========================================================================== */

/* ── La zona ──────────────────────────────────────────────────────────────── */
:is(div,section,details).zona{
  min-width:0;
  padding:var(--esp-7);
  background:var(--superficie);
  /* `--borde-zona`: en diurno el `--borde` es casi blanco sobre vidrio claro y la zona se separa del
     fondo con el vivo. Lo decide el token, no una regla según el tema (`T181`: así cruza el cambio de
     tema con todo lo demás). */
  border:1px solid var(--borde-zona);border-radius:var(--radio-panel);
}
.zona > * + *{margin-top:var(--esp-6)}
.zona__titulo{
  margin:0;display:flex;align-items:baseline;gap:var(--esp-4);flex-wrap:wrap;
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-2);
  text-wrap:wrap;
}
.zona__titulo .icono{width:14px;height:14px;align-self:center}
/* El conteo del título es de nivel 3: la cifra grande de `.cuenta-tanda` no compite con la de la zona. */
.zona__titulo .cuenta-tanda{
  font-family:var(--f-dato);font-size:var(--fs-dato);font-weight:var(--peso-medio);
  letter-spacing:normal;color:var(--texto-2);
}
.zona__subtitulo{
  margin:0;font-family:var(--f-dato);font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-2);
}
/* El cuerpo de una zona siempre se separa de lo que lo encabeza: gana a los `margin:0` propios de
   cada lista (`dl`, `ul`, `table`) por especificidad. */
.zona > .zona__cuerpo,.zona > .zona__ayuda + .zona__cuerpo{margin-top:var(--esp-6)}
.zona__cuerpo > * + *{margin-top:var(--esp-6)}
.zona > .zona__titulo + .zona__ayuda{margin-top:var(--esp-3)}
.zona__ayuda{margin:0;font-size:var(--fs-menor);color:var(--texto-2);line-height:var(--alto-linea)}
.zona__vacio{margin:0;font-size:var(--fs-dato);color:var(--texto-2)}
/* El número de paso del armado del plan. */
.zona__numero{
  display:inline-grid;place-items:center;flex:none;
  width:var(--esp-8);height:var(--esp-8);border-radius:var(--radio-pastilla);
  border:1px solid var(--borde-vivo);color:var(--texto);
  font-family:var(--f-dato);font-size:var(--fs-menor);letter-spacing:normal;
}
/* Deshabilitada no es escondida: se lee apagada, con su ayuda diciendo por qué. */
.zona--deshabilitada > :not(.zona__titulo, .zona__ayuda, summary){opacity:.62}

/* Plegable: abierta arriba de 640 px, plegada en teléfono (la decide `portal.js`). */
details.zona--plegable > summary{list-style:none;cursor:pointer}
details.zona--plegable > summary::-webkit-details-marker{display:none}
details.zona--plegable > summary::after{
  content:"";display:none;flex:none;margin-left:auto;align-self:center;
  width:var(--esp-4);height:var(--esp-4);
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
  /* Gira con el pliegue (`T181`): mismo tiempo y misma curva que el alto del cuerpo, en cada sentido. */
  transition:transform var(--dur-alto-cierra) var(--curva-alto);
}
details.zona--plegable[open] > summary::after{
  transform:rotate(-135deg);transition:transform var(--dur-alto-abre) var(--curva-alto)}
details.zona--plegable[data-asentando] > summary::after{transition:none}
@media (prefers-reduced-motion:reduce){
  details.zona--plegable > summary::after,details.zona--plegable[open] > summary::after{transition:none}
}

@container app (max-width:40rem){
  :is(div,section,details).zona{padding:var(--esp-6)}
  details.zona--plegable > summary{min-height:var(--tactil-min);align-items:center}
  details.zona--plegable > summary::after{display:block}
}

/* ── El aire entre zonas: `--esp-9`, y `--esp-8` en teléfono ─────────────────── */
.ficha-en-zonas,.con-resumen,.plan-en-zonas,.plan-en-zonas__columna,#actas-seccion,
.detalle-mensual,#detalle-seccion{
  display:flex;flex-direction:column;gap:var(--esp-9);min-width:0;
}
.listado:has(> .zona,> #ficha-del-acta){gap:var(--esp-9)}
#ficha-del-acta{gap:var(--esp-9)}
@container app (max-width:40rem){
  .ficha-en-zonas,.con-resumen,.plan-en-zonas,.plan-en-zonas__columna,#actas-seccion,
  .detalle-mensual,#detalle-seccion,#ficha-del-acta,.listado:has(> .zona){gap:var(--esp-8)}
}

/* ── El cuadre · una cuenta de dos columnas, con el signo escrito ─────────────── */
.cuadre{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.cuadre td{padding:var(--esp-3) 0;vertical-align:baseline}
.cuadre__operador{
  width:var(--esp-9);padding-right:var(--esp-4);
  font-family:var(--f-dato);color:var(--texto-2);text-align:center;
}
.cuadre__rotulo{color:var(--texto-2)}
.cuadre__rotulo .estado{margin-left:var(--esp-3)}
.cuadre__importe{
  text-align:right;white-space:nowrap;font-family:var(--f-dato);font-variant-numeric:tabular-nums;
  font-weight:var(--peso-medio);color:var(--texto);
}
.cuadre__importe .sub{display:block;font-family:var(--f-texto);font-size:var(--fs-menor);
  font-weight:var(--peso-normal);color:var(--texto-2)}
/* El total: línea arriba y el peso más fuerte del cuadre (nivel 3 con énfasis, no la cifra de la zona). */
.cuadre__total td,.cuadre__subtotal td{padding-top:var(--esp-5)}
.cuadre__total td{border-top:1px solid var(--borde-vivo)}
.cuadre__subtotal td{border-top:1px solid var(--separador)}
.cuadre__total .cuadre__rotulo{color:var(--texto);font-weight:var(--peso-negro)}
.cuadre__total .cuadre__importe{font-size:var(--fs-medio);font-weight:var(--peso-negro)}
.cuadre__subtotal .cuadre__rotulo{color:var(--texto);font-weight:var(--peso-medio)}

/* ── Los datos · cuatro filas con las mismas etiquetas ────────────────────────── */
.datos{margin:0;display:flex;flex-direction:column;gap:var(--esp-5)}
.datos__fila{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--esp-1) var(--esp-6);align-items:baseline}
.datos dt{margin:0;font-size:var(--fs-dato);color:var(--texto-2);flex:none}
.datos dd{margin:0;font-size:var(--fs-base);color:var(--texto);text-align:right;min-width:0;overflow-wrap:anywhere}
@container app (max-width:40rem){
  .datos__fila{flex-direction:column;gap:var(--esp-1)}
  .datos dd{text-align:left}
}

/* ── Las cifras clave · la que decide manda, la compañera es de nivel 3 ────────── */
.cifras-clave,.cifras-del-detalle{
  margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-6) var(--esp-9);
}
.cifras-del-detalle{grid-template-columns:repeat(auto-fill,minmax(max(9rem,calc((100% - 3 * var(--esp-9)) / 4 - .5px)),1fr))}
.cifra-clave{margin:0;display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.cifra-clave__rotulo{margin:0;font-size:var(--fs-dato);color:var(--texto-2)}
.cifra-clave__valor{
  margin:0;font-family:var(--f-dato);font-variant-numeric:tabular-nums;white-space:nowrap;
  font-size:var(--fs-medio);font-weight:var(--peso-fuerte);color:var(--texto);
}
.cifra-clave--principal .cifra-clave__valor{
  font-size:var(--fs-cifra);font-weight:var(--peso-negro);letter-spacing:var(--track-cifra);line-height:1.1;
}
@container app (max-width:40rem){
  .cifras-clave{grid-template-columns:minmax(0,1fr)}
  .cifras-del-detalle{grid-template-columns:repeat(auto-fill,minmax(max(9rem,calc((100% - var(--esp-9)) / 2 - .5px)),1fr))}
  .cifras-del-detalle .cifra-clave--principal{grid-column:1 / -1}
}

/* ── La ficha del acta en seis zonas ──────────────────────────────────────────── */
.ficha-en-zonas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-9);align-items:start;
}
.ficha-en-zonas > .zona--tapa,.ficha-en-zonas > .zona--cifras,
.ficha-en-zonas > .zona--documentos,.ficha-en-zonas > .zona--historial{grid-column:1 / -1}
.zona--tapa{padding-block:var(--esp-6)}
.zona--tapa .tapa-de-la-seccion{margin:0}
.documentos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--esp-5) var(--esp-7);align-items:center}
.documentos__aparte{font-size:var(--fs-dato);color:var(--texto-2)}
.historial__bloque + .historial__bloque{margin-top:var(--esp-7)}
.historial__subtitulo{
  margin:0 0 var(--esp-4);font-size:var(--fs-dato);font-weight:var(--peso-fuerte);color:var(--texto);
  font-family:var(--f-texto);letter-spacing:normal;
}
@container app (max-width:67.5rem){
  .ficha-en-zonas{grid-template-columns:minmax(0,1fr)}
}
@container app (max-width:40rem){
  .documentos .boton{width:100%;min-height:var(--boton-alto-movil)}
  .documentos{flex-direction:column;align-items:stretch}
}

/* ── El circuito del ajuste · una zona compacta ───────────────────────────────── */
.zona--circuito{padding-block:var(--esp-6)}
.circuito__paneles{display:flex;flex-direction:column;gap:var(--esp-5)}
.circuito__linea{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-5) var(--esp-7);flex-wrap:wrap}
.circuito__linea .circuito__titulo{display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap;min-width:0}
.circuito__linea .circuito__acciones{margin:0;padding:0;border:0}
.circuito__detalle > summary{
  display:flex;align-items:center;min-height:var(--tactil-min);cursor:pointer;
  font-size:var(--fs-dato);color:var(--texto-2);
}
.circuito__detalle-cuerpo{display:flex;flex-direction:column;gap:var(--esp-3);padding-bottom:var(--esp-3)}
.circuito__detalle-cuerpo p{margin:0}
@container app (max-width:40rem){
  .circuito__linea .circuito__acciones{width:100%}
  .circuito__linea .circuito__acciones .boton{flex:1 1 auto;min-height:var(--boton-alto-movil)}
}

/* ── Los filtros del listado · zona propia, rótulos a la vista ────────────────── */
.filtros .filtro{display:block}
/* 1440: una sola fila, 2fr 1fr 1fr 1fr. */
.filtros__campos{
  display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  gap:var(--esp-6) var(--esp-7);align-items:start;
}
.filtros__hoja{display:contents}
.filtros__campo{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.filtros--solo-buscar .filtros__campos{grid-template-columns:minmax(0,1fr)}
.filtros--solo-buscar .filtros__campo--buscar{max-width:36rem}
/* Los demás listados (`T162`) filtran por menos campos que Actas: la grilla toma la forma de lo que
   hay —Buscar en 2fr y cada desplegable en 1fr— en vez de dejar una columna vacía al final de la
   fila (**C4**). Empresas y el legajo: tres campos; Planes y Numeración: dos. */
.filtros--tres-campos .filtros__campos{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
.filtros--dos-campos .filtros__campos{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* La cuenta corriente del legajo (`T224`): cuatro campos y **sin Buscar** —tipo, desde, hasta y el orden—:
   cuatro iguales en una fila, y dos y dos a 834 (el orden con su rótulo entero, no en tres renglones). */
.filtros--sin-buscar .filtros__campos{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Los recibos del legajo (`T190`): cuatro campos —estado, desde, hasta y orden— junto al buscador. */
.filtros--cuatro-campos .filtros__campos{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
.filtros__rotulo{margin:0;font-size:var(--fs-dato);font-weight:var(--peso-medio);color:var(--texto-2)}
.filtros__ayuda{font-size:var(--fs-menor);color:var(--texto-2)}
/* El rótulo de la fecha es un `<span>` hijo del `<label>`: acá se ve (portal.css lo oculta como `.oculto-visual`). */
.filtros .filtros__rotulo{
  position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;
}
.filtros .campo,.filtros .desplegable__control{min-height:var(--tactil-min)}
.filtros .campo--busqueda{width:100%}
.filtros .campo--fecha-filtro{display:flex;align-items:center;width:100%;padding:0 var(--esp-6)}
.filtros .campo--fecha-filtro input{width:100%}
.filtros .campo--fecha-filtro .calendario,.filtros .campo--fecha-filtro .calendario__control{width:100%}
.filtros .desplegable{width:100%}
.filtros__abrir,.filtros__hoja-tapa,.filtros__hoja-pie{display:none}
.filtros__pie{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-4) var(--esp-6);
  padding-top:var(--esp-6);border-top:1px solid var(--separador);
}
.filtros__contador{margin:0;font-size:var(--fs-dato);font-weight:var(--peso-medio);color:var(--texto)}
.filtros__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4)}
/* El «×» mide 44 px: el chip se ve chico y el área que se toca no. */
.filtros__quitar{display:inline-flex;align-items:center;min-height:var(--tactil-min);color:var(--texto)}
.filtros__chip{
  display:inline-flex;align-items:center;gap:var(--esp-4);
  padding:var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-5);
  border:1px solid var(--borde-vivo);border-radius:var(--radio-pastilla);
  background:var(--superficie-activa);font-size:var(--fs-dato);
}
.filtros__chip b{
  display:inline-grid;place-items:center;width:var(--esp-9);height:var(--esp-9);
  font-weight:var(--peso-normal);color:var(--texto-2);
}
.filtros__resumen-movil{display:none;margin:0;font-size:var(--fs-dato);color:var(--texto-2)}
.filtros__limpiar{margin-left:auto}
.vacio__salida{margin-top:var(--esp-6)}
/* El lugar de la cuenta (`T163`): está siempre, para que la cuenta viaje fuera de banda aunque no
   haya filtros, y no genera caja —vacío no suma un hueco al `gap` del botón—. */
.filtros__cuenta-lugar{display:contents}
.filtros__cuenta{
  display:inline-grid;place-items:center;min-width:var(--esp-8);height:var(--esp-8);padding:0 var(--esp-2);
  border-radius:var(--radio-pastilla);background:var(--acento);color:var(--acento-tinta);
  font-size:var(--fs-menor);font-weight:var(--peso-negro);
}

/* 834: «Buscar» y «Estado» en la primera fila, las dos fechas en la segunda. */
@container app (max-width:67.5rem){
  .filtros__campos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .filtros__campo--buscar{grid-column:span 4}
  .filtros__campo--estado{grid-column:span 2}
  .filtros__campo--fecha{grid-column:span 3}
  .filtros--solo-buscar .filtros__campos{grid-template-columns:minmax(0,1fr)}
  .filtros--solo-buscar .filtros__campo--buscar{grid-column:auto}
  /* Con dos o tres campos entran en una fila también a 834: la grilla de seis columnas es la de
     los cuatro campos de Actas, que a este ancho se parten en dos filas. */
  :is(.filtros--tres-campos,.filtros--dos-campos) .filtros__campo--buscar{grid-column:auto}
  /* Y las dos fechas de la bandeja de cheques (`T065`) caben una al lado de la otra: el `span 3` de arriba es de
     la grilla de seis y, en una de tres columnas, mandaba cada fecha a su propia fila (350 px de filtros a 834). */
  .filtros--tres-campos .filtros__campo--fecha{grid-column:auto}
  /* Los cuatro de los recibos: «Buscar» y «Estado» arriba; «Desde», «Hasta» y el orden, en una
     segunda fila de tres iguales. */
  .filtros--cuatro-campos .filtros__campo--buscar{grid-column:span 4}
  .filtros--cuatro-campos .filtros__campo--estado{grid-column:span 2}
  .filtros--cuatro-campos :is(.filtros__campo--fecha,.filtros__campo--orden){grid-column:span 2}
  .filtros--sin-buscar .filtros__campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filtros--sin-buscar .filtros__campo{grid-column:auto}
}

/* A 390: «Buscar» a la vista, el botón «Filtros» y el contador a su lado, y los otros tres campos en
   una hoja desde abajo. Se va el carril deslizable: cortaba el selector y escondía las fechas. */
@container app (max-width:40rem){
  .filtros{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--esp-6);align-items:center;
  }
  .filtros > *{margin-top:0}
  .filtros > .zona__titulo,.filtros .filtro{grid-column:1 / -1}
  .filtros .filtro,.filtros__campos,.filtros__pie{display:contents}
  .filtros__campos > .filtros__campo--buscar{grid-column:1 / -1}
  .filtros .campo,.filtros .desplegable__control,.filtros__abrir{min-height:var(--tactil-comodo)}
  .filtros__abrir{display:inline-flex;grid-column:1;width:100%;justify-content:center}
  .filtros--solo-buscar .filtros__abrir{display:none}
  .filtros__contador{grid-column:2;white-space:nowrap}
  .filtros--solo-buscar .filtros__contador{grid-column:1 / -1}
  .filtros__chips{display:none}
  .filtros__resumen-movil{display:block;grid-column:1 / -1}
  .filtros__limpiar--pie{display:none}

  /* La hoja: oculta hasta que la abre el enlace («:target», sin JavaScript) o `portal.js`. */
  .filtros__hoja{
    display:flex;flex-direction:column;gap:var(--esp-6);
    /* Se apoya sobre la barra de pestañas, como la hoja de navegación: la barra sigue viva. */
    /* 🔀 **Por debajo de la barra** (`T175`): la hoja baja para irse y tiene que pasar **detrás** de las
       pestañas (`z-index:26`), no por encima. Hoy lo hace el contexto de apilamiento de `.contenido`;
       con 25 no depende de él. El velo, un escalón más abajo, sigue tapando el contenido. */
    position:fixed;left:0;right:0;z-index:25;
    /* 🔒 **T197 — apoyada en la barra real, con el alto medido.** `bottom` era `--pestana-alto` (52) y la
       barra mide 59: la hoja terminaba 7 px **detrás** de ella. Una hoja de borde se apoya en el borde
       de arriba de la barra (no flota a `--esp-6`, como una isla: no tiene esquinas abajo). Su tope es
       lo visible sobre la barra (`--alto-sobre-la-barra`, que sale de `--alto-visible`) menos
       `--esp-12`; con `100dvh` en la app instalada del dueño valía 56 px de más. */
    bottom:var(--barra-inferior-alto);
    max-height:calc(var(--alto-sobre-la-barra) - var(--esp-12));overflow-y:auto;
    padding:var(--esp-7);
    background:var(--superficie-alta);border:1px solid var(--borde-vivo);
    border-radius:var(--radio-panel) var(--radio-panel) 0 0;
    visibility:hidden;pointer-events:none;overscroll-behavior:contain;
    background-color:var(--cielo-piso);
    background-image:linear-gradient(var(--superficie-alta),var(--superficie-alta));
    /* 🔀 **Abre como cierra, y como `.mas__hoja`** (`T173`, 09/10/2026). Antes «ningún gesto nuevo, la
       hoja aparece»: sin recorrido, no había a qué volver cuando se la arrastra. Ahora sube desde
       fuera de la pantalla (`translateY`, su alto más la barra de pestañas que la espera abajo) en
       `--dur-hoja` con `--curva-hoja` y se va por el mismo camino en `--dur-hoja-sale` (`T181`);
       `visibility` espera a que termine. Sólo `transform` en la hoja y `opacity` en el velo. */
    transform:translateY(calc(100% + var(--barra-inferior-alto) + var(--esp-1)));
    transition:transform var(--dur-hoja-sale) var(--curva-hoja),visibility 0s linear var(--dur-hoja-sale);
  }
  .filtros__hoja:target,.filtros[data-filtros-abiertos] .filtros__hoja{
    visibility:visible;pointer-events:auto;transform:none;
    transition:transform var(--dur-hoja) var(--curva-hoja),visibility 0s;
  }
  /* El velo: lo que queda atrás se apaga; tocarlo cierra la hoja (`portal.js`). Siempre está, para que
     tenga de dónde fundir. 🔀 **Con su hoja** (`T181`, **G15**): antes se iba en 180 ms y la hoja seguía
     bajando sola 330 ms más; ahora tiene su tiempo y su curva, en los dos sentidos. */
  .filtros::after{
    content:"";position:fixed;inset:0;z-index:24;background:var(--velo);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--dur-hoja-sale) var(--curva-hoja),visibility 0s linear var(--dur-hoja-sale);
  }
  .filtros[data-filtros-abiertos]::after{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity var(--dur-hoja) var(--curva-hoja),visibility 0s;
  }
  .filtros__hoja-tapa{display:flex;flex-direction:column;align-items:center;gap:var(--esp-4)}
  .filtros__hoja-titulo{margin:0;font-family:var(--f-titulo);font-weight:var(--peso-negro);font-size:var(--fs-titulo)}
  .filtros__hoja-pie{
    display:flex;flex-direction:column-reverse;gap:var(--esp-4);
    padding-top:var(--esp-6);border-top:1px solid var(--separador);
  }
  .filtros__hoja-pie .boton{width:100%;justify-content:center;min-height:var(--boton-alto-movil)}
}

/* ── El resumen fijo · el total y la acción que viajan con la pantalla ─────────── */
.con-resumen{
  display:grid;grid-template-columns:minmax(0,1fr) var(--ancho-resumen);
  column-gap:var(--esp-9);row-gap:var(--esp-9);align-items:start;
}
.con-resumen > *{grid-column:1;min-width:0}
.con-resumen > .resumen-fijo{grid-column:2;grid-row:1 / span 20}
.resumen-fijo{
  position:sticky;top:var(--esp-7);z-index:5;
  display:flex;flex-direction:column;gap:var(--esp-6);min-width:0;
  padding:var(--esp-7);
  /* 🔴 **Opaco en los tres anchos, con la misma receta** (T166, **A1**, **D6**): `--superficie-alta` solo
     es ~9 % de blanco, y el resumen es `sticky`: lo que pasa por debajo se lee a través. Es la receta
     de la isla de 390 (`--cromo` sobre el piso del tema). Con `--superficie-alta` sobre el piso el
     `--texto` nocturno medía 14,7:1 y no llegaba a los 15:1 de **F1**; `--cromo` da más. */
  background:linear-gradient(var(--cromo),var(--cromo)),var(--cielo-piso);
  border:1px solid var(--borde-zona);border-radius:var(--radio-panel);
}
.resumen-fijo__titulo{
  margin:0;font-family:var(--f-dato);font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--texto-2);
}
.resumen-fijo__cuerpo{display:flex;flex-direction:column;gap:var(--esp-6)}
.resumen-fijo__desglose{display:flex;flex-direction:column;gap:var(--esp-5)}
.resumen-fijo .resumen{margin:0;gap:var(--esp-5)}
.resumen-fijo__campo{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-5);
  font-size:var(--fs-dato);color:var(--texto-2)}
.resumen-fijo__campo .campo{width:calc(15ch + var(--esp-6) * 2 + 2px);max-width:100%;text-align:right;font-family:var(--f-dato);min-height:var(--tactil-min)}
.resumen-fijo__total{
  display:flex;flex-direction:column;gap:var(--esp-3);
  padding-top:var(--esp-6);border-top:1px solid var(--borde-vivo);
}
.resumen-fijo__rotulo{font-size:var(--fs-dato);color:var(--texto-2)}
.resumen-fijo__total .resultado--grande{
  min-height:0;padding:0;border:0;background:none;
  font-family:var(--f-dato);font-size:var(--fs-cifra);font-weight:var(--peso-negro);
  letter-spacing:var(--track-cifra);font-variant-numeric:tabular-nums;color:var(--texto);
}
.resumen-fijo__conteo{margin:0;font-size:var(--fs-dato);color:var(--texto-2)}
.resumen-fijo__acciones{
  margin:0;padding:0;border:0;display:flex;gap:var(--esp-4);justify-content:flex-end;flex-wrap:wrap;
}
.resumen-fijo__razon{margin:0;font-size:var(--fs-menor);color:var(--texto-2)}
.resumen-fijo__ver{display:none}
.resumen-fijo > .aviso{margin:0}
/* El armado del plan reparte el resumen en tres piezas hermanas: se disuelve el envoltorio para
   que sus hijos sean celdas de la misma grilla. */
.resumen-fijo--plan #resumen-del-plan{display:contents}
.resumen-fijo--plan > .acciones{margin:0;padding:0;border:0}
.resumen-fijo--plan .acciones .boton{flex:1 1 auto}

/* Con el desglose plegado por `portal.js` (abajo de 1080). Sin JavaScript queda abierto. */
.resumen-fijo[data-plegable] .resumen-fijo__ver{display:inline-flex}
.resumen-fijo[data-plegable]:not([data-abierto]) .resumen-fijo__desglose{display:none}

/* Tableta: una franja sticky de una línea arriba de la lista; un toque abre el desglose. */
@container app (max-width:67.5rem){
  .con-resumen{display:flex;flex-direction:column;align-items:stretch}
  .con-resumen > .resumen-fijo{order:-1;position:sticky;top:0}
  .resumen-fijo{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
    gap:0 var(--esp-6);padding:var(--esp-5) var(--esp-6);
    grid-template-areas:
      "conteo total ver acciones"
      "desglose desglose desglose desglose"
      "razon razon razon razon";
    background:linear-gradient(var(--cromo),var(--cromo)),var(--cielo-piso);
  }
  .resumen-fijo > *{margin:0}
  .resumen-fijo--plan #resumen-del-plan{display:contents}
  .resumen-fijo__titulo{display:none}
  .resumen-fijo__conteo{grid-area:conteo}
  .resumen-fijo__total{
    grid-area:total;flex-direction:row;align-items:baseline;justify-content:flex-end;gap:var(--esp-4);
    padding:0;border:0;
  }
  .resumen-fijo__ver{grid-area:ver}
  .resumen-fijo__desglose{grid-area:desglose;margin-top:var(--esp-5)}
  .resumen-fijo__acciones,.resumen-fijo--plan > .acciones{grid-area:acciones;flex-wrap:nowrap}
  .resumen-fijo__acciones > .boton--secundario,.resumen-fijo--plan > .acciones > .boton--secundario{display:none}
  .resumen-fijo__razon{grid-area:razon;margin-top:var(--esp-3)}
  .resumen-fijo > .aviso{grid-column:1 / -1}
  /* La franja no tapa el listado: es parte del flujo y se pega arriba al recorrer. */
}

/* Teléfono: la isla inferior, encima de las pestañas y respetando el área segura.
   Regla única de las islas (spec 25, «Islas flotantes»): relleno ≥ `--esp-7`, separación entre grupos ≥
   `--esp-6`; primero el rótulo y la cifra, con la acción secundaria («Ver desglose») como terciaria en la
   línea del rótulo; la acción principal sola en su fila. Es una pila (`flex`) y no una grilla con áreas:
   lo que no existe (el aviso, el motivo vacío) no deja una fila ni una separación de más.
   📐 Es `sticky` al fondo y no `fixed`: ocupa su lugar en el flujo, así que **al final del recorrido la
   isla queda debajo de todo el contenido** y nada se tapa, sea cual sea su alto real. */
@container app (max-width:40rem){
  .resumen-fijo,.con-resumen > .resumen-fijo{
    position:sticky;top:auto;bottom:0;z-index:19;margin:0 var(--esp-6);
    /* El tope, con el alto **medido** (`T197`): `60dvh` valía 591 con 558 visibles en el teléfono del dueño. */
    max-height:calc(var(--alto-de-pantalla) * .6);overflow-y:auto;
    display:flex;flex-flow:row wrap;align-items:flex-start;gap:var(--esp-6);
    padding:var(--esp-7);order:0;
    box-shadow:var(--sombra-panel);
    /* Opaca: con el vidrio al 86 % el texto de la lista asomaba por detrás del aviso y del total. Mismo
       recurso que las celdas fijas de la tabla: el cromo sobre el piso del tema. */
    background:linear-gradient(var(--cromo),var(--cromo)),var(--cielo-piso);
  }
  .resumen-fijo > *,.resumen-fijo--plan #resumen-del-plan > *{flex:1 1 100%;min-width:0}
  .resumen-fijo > :empty{display:none}
  .resumen-fijo .resumen-fijo__total,.resumen-fijo--plan #resumen-del-plan > .resumen-fijo__total{order:1;flex:1 1 0;flex-direction:column;align-items:flex-start;gap:var(--esp-1)}
  .resumen-fijo .resumen-fijo__ver,.resumen-fijo--plan #resumen-del-plan > .resumen-fijo__ver{order:2;flex:none;min-height:var(--tactil-min);margin:calc(var(--esp-5) * -1) calc(var(--esp-5) * -1) 0 0}
  .resumen-fijo__desglose{order:3;margin:0}
  .resumen-fijo__conteo{order:4;margin:0}
  .resumen-fijo > .aviso{order:5}
  .resumen-fijo__acciones,.resumen-fijo--plan > .acciones{order:6;width:100%}
  .resumen-fijo__acciones{justify-content:stretch}
  .resumen-fijo__acciones .boton,.resumen-fijo--plan > .acciones .boton{flex:1 1 auto;min-height:var(--boton-alto-movil)}
  /* 🔒 **T197 — la isla tiene alto estable entre estados.** Con 0 actas llevaba **dos** renglones
     («Ninguna seleccionada todavía» arriba del botón y «Elegí al menos un acta para emitir el recibo» abajo) y
     con 1 o 2, uno: 190,8 contra 162,8 px. Anclada abajo, su borde de arriba y «Emitir recibo» saltaban
     27,9 px al elegir o dejar de elegir. Ahora hay **un** renglón de estado, siempre en el mismo
     lugar (arriba del botón) y con la misma letra: el motivo ocupa el lugar del conteo cuando no hay
     nada elegido —es lo que pide la spec `25` § 6 para la barra del teléfono: «{n} seleccionadas» o,
     sin selección, «Elegí al menos un acta para emitir el recibo»—. No se anima el cambio de alto: sobre una
     isla con cifras el espacio no se mueve (`movimiento.md` § 2, segunda excepción a la R2, punto 4),
     y lo que se arregla es que no cambie. */
  .resumen-fijo__razon{order:4;margin:0;font-size:var(--fs-dato)}
  .resumen-fijo:has(> .resumen-fijo__razon) > .resumen-fijo__conteo{display:none}
  /* El armado del plan no tiene conteo: su renglón de estado es el motivo («Elegí al menos un acta para
     financiar»), que se vaciaba al elegir la primera (164,3 contra 133,4 px: 30,8 de salto). Va en el
     mismo lugar que el del recibo y, vacío, **guarda su renglón** (`1lh`). Un motivo de más de un
     renglón (la simulación con otra fecha) sí agranda la isla: es otro estado, no elegir. */
  .resumen-fijo--plan > .ayuda{order:4;margin:0;font-size:var(--fs-dato);min-height:1lh}
  .resumen-fijo--plan > .ayuda:empty{display:block}
  .resumen-fijo__campo .campo{min-height:var(--tactil-comodo)}
  [data-hoja-abierta] .resumen-fijo{visibility:hidden}
  /* Lo que queda debajo de la isla: la barra (alto real), la zona segura y el respiro de `--esp-6`.
     🔒 **T189 — la isla se ancla sola.** Antes dependía de que el **relleno** de `.listado` valiera
     lo mismo que la barra: un `sticky` no puede salir de la caja de contenido de su contenedor, así
     que el relleno hacía de tope, y si la reserva no coincidía con la barra real (52 contra 59 px)
     la isla quedaba a 5 px de ella, o debajo. Ahora el contenedor no aporta relleno y la isla lleva
     las dos mitades en sí misma, con **el mismo token** (`--reserva-inferior-telefono`, que sale del
     alto real de la barra y cuenta la zona segura **una sola vez**):
       · `bottom` = dónde se pega al recorrer (por encima de la barra);
       · `margin-bottom` = lo mismo al final del recorrido, para que no salte al llegar al fondo.
     `scroll-padding-bottom` (en `formatos.css`) sigue ahí para el foco y los `scrollIntoView`. */
  .listado:has(.resumen-fijo,.barra-total){padding-bottom:0}
  .resumen-fijo,.con-resumen > .resumen-fijo{
    bottom:var(--reserva-inferior-telefono);margin-bottom:var(--reserva-inferior-telefono);
  }
  /* (`.barra-total` lleva lo mismo en su propia regla, más abajo: se declara después y le ganaría.) */
}

/* ── El armado del plan · la condición y el cronograma lado a lado ─────────────── */
.condiciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-9);align-items:start}
.condiciones__campos,.condiciones__cronograma{display:flex;flex-direction:column;gap:var(--esp-6);min-width:0}
.aviso--en-linea{margin:0}
.pie-de-la-grilla__total{display:flex;flex-direction:column;gap:var(--esp-2);padding:var(--esp-4) 0 0;border:0;background:none}
.pie-de-la-grilla__total .resultado{font-family:var(--f-dato);font-size:var(--fs-medio);font-weight:var(--peso-fuerte)}
@container app (max-width:67.5rem){
  .condiciones{grid-template-columns:minmax(0,1fr)}
}

/* ── El detalle del plan ────────────────────────────────────────────────────── */
.plan-en-zonas{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--esp-9);align-items:start}
.zona--cabecera-del-plan .fila-etiqueta{display:flex;align-items:center;gap:var(--esp-5) var(--esp-6);flex-wrap:wrap}
.cabecera-del-plan__aviso{margin:0;font-size:var(--fs-dato);color:var(--texto-2);flex:1 1 24ch}
.cabecera-del-plan__cuerpo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-7);flex-wrap:wrap;
}
/* 🔴 **Sólo en escritorio** (T170, defecto confirmado por el dueño): sin el `@container`, esta regla
   (0,2,0) le ganaba a `.acciones--barra` (0,1,0) también en tableta y teléfono, y la barra fija
   —que es una caja: borde, relleno, fondo opaco— se veía sin caja, suelta sobre el cronograma. En
   escritorio no hay barra: las acciones van en línea con el total, sin la línea de arriba. */
@container app (min-width:67.5625rem){
  .cabecera-del-plan__cuerpo .acciones--panel{margin:0;padding:0;border:0;justify-content:flex-end}
}
.zona--cabecera-del-plan .total--destacado{padding:0;border:0;background:none}
.zona--cabecera-del-plan .total--destacado .resultado--grande{
  font-family:var(--f-dato);font-size:var(--fs-cifra);letter-spacing:var(--track-cifra);
}
.zona--montos .zona__cuerpo,.zona--cronograma .zona__cuerpo{margin-top:var(--esp-6)}
.zona--cronograma .desplazable{border:0;border-radius:0}
@container app (max-width:67.5rem){
  .plan-en-zonas{grid-template-columns:minmax(0,1fr)}
}

/* ── El tablero de Legales ──────────────────────────────────────────────────── */
.portada__metricas{margin:0;display:flex;flex-wrap:wrap;gap:var(--esp-3) var(--esp-9);font-size:var(--fs-dato);color:var(--texto-2)}
.portada__metrica b{color:var(--texto);font-weight:var(--peso-fuerte)}
.portada__metrica-pie{color:var(--texto-2)}
.portada--legales{display:flex;flex-direction:column;gap:var(--esp-9)}
.zona--plazos .plazos{display:flex;flex-direction:column}
.plazos__encabezado,.zona--plazos .plazo{
  display:grid;grid-template-columns:minmax(9rem,12rem) minmax(0,1fr) minmax(7rem,9rem) auto;
  align-items:center;gap:var(--esp-6);
}
.plazos__encabezado{
  padding:0 0 var(--esp-4);border-bottom:1px solid var(--borde-vivo);
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;color:var(--texto-2);
}
.plazo__abrir .boton{min-height:var(--tactil-min)}
.plazo__vencio{color:var(--texto-2)}
.sin-datos--notas{margin:0}
.sin-datos--notas > summary{cursor:pointer;min-height:var(--tactil-min);display:flex;align-items:center;list-style:none}
.sin-datos--notas > summary::-webkit-details-marker{display:none}
@container app (max-width:40rem){
  .plazos__encabezado{display:none}
  .zona--plazos .plazo{
    grid-template-columns:minmax(0,1fr);gap:var(--esp-3);padding:var(--esp-6) 0;
  }
  .plazo__abrir .boton{width:100%;min-height:var(--boton-alto-movil)}
}

/* ── La hoja de intimación · el motivo y la acción, sin recorrer ──────────────── */
.lista-de-actas[data-acotada]{max-height:calc(var(--tactil-min) * 4);overflow-y:auto;overscroll-behavior:contain}
.hoja .lista-de-actas[data-acotada] > li{min-height:var(--tactil-min)}
.hoja[data-con-pie] > .hoja__pie{
  position:sticky;bottom:0;z-index:1;
  margin:0 calc(var(--esp-9) * -1) calc(var(--esp-9) * -1);padding:var(--esp-6) var(--esp-9) var(--esp-9);
  background:var(--superficie-alta);background-color:var(--cielo-piso);
  background-image:linear-gradient(var(--superficie-alta),var(--superficie-alta));
  border-top:1px solid var(--separador);
}

/* ── El detalle mes a mes ───────────────────────────────────────────────────── */
.detalle-mensual__contexto{margin:0;font-size:var(--fs-base);color:var(--texto-2)}
.detalle-mensual__versiones{display:flex;align-items:center;gap:var(--esp-6);flex-wrap:wrap}
@container app (min-width:67.5625rem){
  /* El resumen se queda arriba mientras se recorre la tabla. */
  .zona--resumen{position:sticky;top:0;z-index:4;background:var(--cromo)}
}
.tabla-agrupada__control{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.tabla-agrupada__marco{border:0;border-radius:0}
.tabla-agrupada{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--fs-menor);font-variant-numeric:tabular-nums;
}
.tabla-agrupada th,.tabla-agrupada td{padding:var(--esp-4) var(--esp-3);white-space:nowrap;text-align:right}
.tabla-agrupada .g-periodo{text-align:left}
.tabla-agrupada thead th{
  font-family:var(--f-dato);font-size:var(--fs-etiqueta);font-weight:var(--peso-medio);
  letter-spacing:.04em;text-transform:uppercase;color:var(--texto-2);
  background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso);
}
.tabla-agrupada__columnas th{white-space:normal;line-height:1.2;vertical-align:bottom}
.tabla-agrupada__grupos th{text-align:center;border-bottom:1px solid var(--separador);color:var(--texto)}
.tabla-agrupada__columnas th{border-bottom:1px solid var(--borde-vivo)}
/* El borde izquierdo de cada grupo separa sin pintar. */
.tabla-agrupada .g-inicio{border-left:1px solid var(--borde)}
.tabla-agrupada tbody tr:nth-child(even) > :not(.c-periodo,.c-total){background:var(--superficie-hover)}
.tabla-agrupada tbody th{font-weight:var(--peso-fuerte);color:var(--texto)}
.tabla-agrupada .coef{color:var(--texto-2);font-family:var(--f-dato)}
.tabla-agrupada .c-total{font-weight:var(--peso-negro);color:var(--texto)}
.tabla-agrupada tfoot th,.tabla-agrupada tfoot td{
  position:sticky;bottom:0;z-index:2;background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso);
  border-top:2px solid var(--borde-vivo);font-weight:var(--peso-fuerte);color:var(--texto);
}
/* Período fijo a la izquierda. */
/* Las celdas fijas son **opacas** (el piso del tema debajo del vidrio): translúcidas dejaban leer lo que pasa por detrás. */
.tabla-agrupada .c-periodo{position:sticky;left:0;z-index:1;background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso)}
.tabla-agrupada thead .c-periodo,.tabla-agrupada tfoot .c-periodo{z-index:3}
.tabla-agrupada__grupo{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-3);
  min-height:var(--tactil-min);cursor:pointer;
}
.tabla-agrupada__grupo .chevron{
  width:var(--esp-3);height:var(--esp-3);flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
}
.tabla-agrupada .g-cerrado{display:none}
.meses-en-tarjetas,.barra-total{display:none}
/* A 1440 la tabla entra entera y se recorre con la página: sin marco que desplace. */
@container app (min-width:67.5625rem){
  .tabla-agrupada__marco{overflow:visible}
}
/* Tableta: Período y Total del mes quedan fijos, y «Depósitos» y «Coeficientes» se pliegan. */
@container app (max-width:67.5rem){
  .tabla-agrupada__marco{overflow:auto;max-height:calc(var(--alto-de-pantalla) - 18rem)}
  .tabla-agrupada .g-abierto.g-depositos,.tabla-agrupada .g-abierto.g-coeficientes{display:none}
  .tabla-agrupada .g-cerrado{display:table-cell;width:var(--tactil-min);min-width:var(--tactil-min)}
  .tabla-agrupada-envoltorio:has(#ver-los-depositos:checked) .tabla-agrupada .g-depositos.g-abierto{display:table-cell}
  .tabla-agrupada-envoltorio:has(#ver-los-depositos:checked) .tabla-agrupada .g-depositos.g-cerrado{display:none}
  .tabla-agrupada-envoltorio:has(#ver-los-coeficientes:checked) .tabla-agrupada .g-coeficientes.g-abierto{display:table-cell}
  .tabla-agrupada-envoltorio:has(#ver-los-coeficientes:checked) .tabla-agrupada .g-coeficientes.g-cerrado{display:none}
  .tabla-agrupada .c-total{position:sticky;right:0;z-index:1;background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso)}
  .tabla-agrupada thead .c-total,.tabla-agrupada tfoot .c-total{z-index:3}
  .tabla-agrupada thead{position:sticky;top:0;z-index:3}
  .tabla-agrupada thead th{position:sticky;top:0}
  .tabla-agrupada__columnas th{top:var(--tactil-min)}
}
.tabla-agrupada-envoltorio:has(#ver-los-depositos:focus-visible) [for="ver-los-depositos"],
.tabla-agrupada-envoltorio:has(#ver-los-coeficientes:focus-visible) [for="ver-los-coeficientes"]{
  outline:2px solid var(--acento);outline-offset:2px;
}

/* Teléfono: nada de catorce columnas apretadas. Una tarjeta por mes, y los totales en la barra. */
@container app (max-width:40rem){
  .tabla-agrupada__marco{display:none}
  .meses-en-tarjetas{
    list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-6);
  }
  .mes-card{
    padding:var(--esp-6);border:1px solid var(--borde);border-radius:var(--radio-3);
    background:var(--superficie-alta);
  }
  .mes-card > * + *{margin-top:var(--esp-5)}
  .mes-card__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-5)}
  .mes-card__periodo{font-size:var(--fs-base);font-weight:var(--peso-fuerte)}
  .mes-card__total{
    font-family:var(--f-dato);font-size:var(--fs-medio);font-weight:var(--peso-negro);
    letter-spacing:var(--track-cifra);font-variant-numeric:tabular-nums;text-align:right;
  }
  .mes-card__rotulo{display:block;font-family:var(--f-texto);font-size:var(--fs-menor);
    font-weight:var(--peso-normal);letter-spacing:normal;color:var(--texto-2)}
  .mes-card__pares,.mes-card__resto,.barra-total__desglose{margin:0;display:flex;flex-direction:column;gap:var(--esp-4)}
  .mes-card__pares > div,.mes-card__resto > div,.barra-total__desglose > div{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--esp-2) var(--esp-5);align-items:baseline;
  }
  .mes-card dt,.barra-total dt{margin:0;font-size:var(--fs-dato);color:var(--texto-2)}
  .mes-card dd,.barra-total dd{margin:0;font-family:var(--f-dato);font-size:var(--fs-dato);
    font-variant-numeric:tabular-nums;text-align:right;color:var(--texto)}
  .mes-card__mas > summary{
    display:flex;align-items:center;justify-content:center;min-height:var(--tactil-min);cursor:pointer;
    border-radius:var(--radio-pastilla);border:1px solid var(--borde);font-size:var(--fs-dato);
    list-style:none;
  }
  .mes-card__mas > summary::-webkit-details-marker{display:none}
  .mes-card__mas > .mes-card__resto{margin-top:var(--esp-5)}
  .mes-card__mas .ver-menos,.barra-total .ver-menos{display:none}
  .mes-card__mas[open] .ver-mas,.barra-total[open] .ver-mas{display:none}
  .mes-card__mas[open] .ver-menos,.barra-total[open] .ver-menos{display:inline}

  /* Misma regla de las islas que el resumen fijo: relleno ≥ `--esp-7`, primero rótulo y «Ver desglose»
     como terciaria en esa línea, después la cifra. `sticky` al fondo, así que la última fila del detalle
     nunca queda debajo (spec 25, «Islas flotantes»). */
  .barra-total{
    display:block;position:sticky;z-index:19;
    bottom:var(--reserva-inferior-telefono);margin:0 var(--esp-6) var(--reserva-inferior-telefono);
    max-height:calc(var(--alto-de-pantalla) * .6);overflow-y:auto;
    padding:var(--esp-7);border:1px solid var(--borde);border-radius:var(--radio-3);
    background:linear-gradient(var(--cromo),var(--cromo)),var(--cielo-piso);
    box-shadow:var(--sombra-panel);
  }
  [data-hoja-abierta] .barra-total{visibility:hidden}
  .barra-total > summary{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--esp-3) var(--esp-6);
    cursor:pointer;list-style:none;
  }
  .barra-total > summary::-webkit-details-marker{display:none}
  .barra-total__rotulo{grid-column:1;grid-row:1;font-size:var(--fs-dato);color:var(--texto-2)}
  .barra-total__valor{
    grid-column:1 / -1;grid-row:2;
    font-family:var(--f-dato);font-size:var(--fs-cifra);font-weight:var(--peso-negro);
    letter-spacing:var(--track-cifra);font-variant-numeric:tabular-nums;
  }
  .barra-total__accion{
    grid-column:2;grid-row:1;justify-self:end;margin:calc(var(--esp-5) * -1) calc(var(--esp-5) * -1) calc(var(--esp-5) * -1) 0;
    padding:0 var(--esp-5);font-size:var(--fs-dato);font-weight:var(--peso-fuerte);color:var(--acento);
    display:inline-flex;align-items:center;min-height:var(--tactil-min);
  }
  .barra-total__desglose{margin-top:var(--esp-6);padding-top:var(--esp-6);border-top:1px solid var(--separador)}
  .barra-total__final{padding-top:var(--esp-4);border-top:1px solid var(--borde-vivo);font-weight:var(--peso-negro)}
}

/* ── Dos defectos de teléfono que esta pantalla dejó a la vista ───────────────── */
@container app (max-width:40rem){
  /* La previa del recibo lleva `.grilla--seleccion` **y** `.grilla--recibo`: el mapa de la primera
     (definido después, en `formatos.css`) le ganaba al de la segunda y las celdas, ubicadas por
     las áreas de `--recibo`, caían todas encima del número. Las tres clases juntas desempatan. */
  .grilla.grilla--seleccion.grilla--recibo tbody tr{
    grid-template-columns:auto minmax(min-content,1fr) auto;
    grid-template-areas:
      "elegir rotulo capital"
      ".      vence  interes";
    row-gap:var(--esp-1);
  }
  .grilla.grilla--seleccion.grilla--recibo.grilla--con-estado tbody tr{
    grid-template-areas:
      "elegir rotulo capital"
      ".      vence  interes"
      ".      estado estado";
  }
  /* `.grilla--seleccion` ubica la casilla arriba (`align-self:start`) y, definida después, le gana a
     `.grilla--recibo`: acá la casilla y el número comparten línea. */
  .grilla.grilla--seleccion.grilla--recibo tbody td.celda-elegir{align-self:center}
  /* Celdas sin el relleno de tabla (10 × 12 px): en la tarjeta el aire lo pone la fila, y cada celda de más
     sumaba 20 px de alto. El vencimiento se lee bajo el número, a la izquierda; el interés, bajo el capital. */
  .grilla.grilla--seleccion.grilla--recibo tbody td{padding:0}
  .grilla.grilla--seleccion.grilla--recibo tbody td.celda-vence{justify-self:start}
}

/* ── Ganchos de las zonas de pantalla que sólo necesitan una medida ───────────── */
/* «Cuadre» y «Datos» van lado a lado en escritorio: se estiran al mismo alto. */
.ficha-en-zonas > .zona--cuadre,.ficha-en-zonas > .zona--datos{align-self:stretch}
/* Un enlace a una zona (`#historial-de-ajuste`) la deja con aire arriba. */
.zona--lista,.zona--detalle,.zona--paso,.zona--historial{scroll-margin-top:var(--esp-9)}
/* Las tres primeras agrupaciones de columnas del detalle: importes con cifras de ancho fijo. */
.tabla-agrupada .g-remuneracion,.tabla-agrupada .g-aportes,.tabla-agrupada .g-saldo{
  font-variant-numeric:tabular-nums;
}
/* El conmutador de versión y el de la ficha ocupan el ancho de su contenedor, con un tope (`--ancho-conmutador`),
   y reparten ese ancho en segmentos iguales con más aire: dueño de producto, galería de T155 («darle más espacio y
   que se ajuste al ancho de la pantalla»). La pastilla de vigencia que lo acompaña envuelve a su propia línea
   cuando no entra al lado. No toca los otros `.conmutador--vista` (nómina, legajo, listado de actas, portada). */
.conmutador--version,.conmutador--acta{
  display:flex;align-self:stretch;width:100%;max-width:var(--ancho-conmutador);
}
.conmutador--version > a,.conmutador--acta > a{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--tactil-comodo);padding:var(--esp-6) var(--esp-7);
}

/* ── El listado de actas en tableta: ninguna columna se corta (T155 §G, spec 25 § 3.4) ──────────
   Con el aire de escritorio la tabla mide ~800 px y el marco de 734 recorta «Vence». Entre 641 y
   820 se aprieta el relleno lateral de las celdas y se acota la empresa (que ya trunca con «…»):
   las siete columnas entran sin recorrer. */
@container app (min-width:40.0625rem) and (max-width:56.25rem){
  #resultado-de-actas .grilla th,#resultado-de-actas .grilla td{padding-inline:var(--esp-2)}
  #resultado-de-actas .grilla .empresa{max-width:22ch}
  /* Los recibos del legajo (`T190`) tienen ocho columnas: con el aire de escritorio miden ~830 px y
     «Constancia PDF» queda fuera del marco. Menos relleno y los nombres en dos renglones. */
  #resultado-del-legajo .grilla--recibos th,#resultado-del-legajo .grilla--recibos td{padding-inline:var(--esp-2)}
  #resultado-del-legajo .grilla--recibos :is(td.celda-tipo,td.celda-agente,td.celda-asignado){
    white-space:normal;
  }
  /* La cuenta corriente (`T224`): las cinco columnas entran a 834 con menos relleno lateral y
     «Movimiento» envolviendo más; **no se esconde ninguna** para que entre (**E1**). */
  #resultado-del-legajo .grilla--cuenta th,#resultado-del-legajo .grilla--cuenta td{padding-inline:var(--esp-2)}
}

/* 🔑 **El mismo recorte, pero según el texto** (T171). Los cortes de arriba son en `px` y no saben
   que el texto creció: con la letra al 150 % las siete columnas de 734 px miden 851. Este corte
   está en `rem`: a 16 px de base es «menos de 720 px» (donde la tabla ya iba a recorrer de todos
   modos) y a 834 px sólo se enciende con el texto agrandado. La empresa pasa a dos renglones en
   vez de «…», que es la columna que más ancho se come. */
@container app (min-width:40.0625rem) and (max-width:45rem){
  #resultado-de-actas .grilla .empresa,#resultado-del-legajo .grilla .empresa{
    white-space:normal;max-width:14ch;overflow:visible;text-overflow:clip}
}

/* ── Las tres tarjetas de la ficha a 390: sin carril, sin tarjeta cortada (T155 §G, spec 25 § 4) ──
   El carril de `.totales` deja la segunda tarjeta mordida por el borde y «Saldo pendiente» queda
   fuera de vista. En la ficha el total y el saldo van lado a lado, y el estado ocupa la fila de
   abajo: las tres cifras que deciden se leen sin deslizar. */
@container app (max-width:40rem){
  #totales-del-acta{
    display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(max(10rem,calc((100% - var(--esp-4)) / 2 - .5px)),1fr));
    gap:var(--esp-4);overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none;
  }
  #totales-del-acta .total{flex:none;min-width:0}
  #totales-del-acta .total:nth-child(n+3){grid-column:1 / -1}
}

/* El cuadre a 390: el rótulo largo («Diferencia con el acta · sube la deuda») envuelve en vez de
   pegarse al importe; el importe no se parte nunca. */
@container app (max-width:40rem){
  .cuadre td.cuadre__rotulo{white-space:normal;padding-right:var(--esp-6)}
  .cuadre td.cuadre__importe{white-space:nowrap;padding-left:var(--esp-3)}
}

/* Los enlaces de texto sin clase (la razón social, el número en la miga) tomaban el azul del navegador
   en diurno —fuera de la paleta— y el del tema en nocturna. Un solo color, el del acento, en los dos. */
a:not([class]){color:var(--acento)}

/* El detalle mes a mes en tableta (834): las nueve columnas visibles entran en el marco. Con el relleno
   de escritorio la tabla mide ~760 px y «Interés» quedaba escondido bajo el «Total del mes» fijo,
   asomando como un «$» suelto. Se aprieta el relleno lateral sólo en ese rango. */
@container app (min-width:40.0625rem) and (max-width:56.25rem){
  .tabla-agrupada th,.tabla-agrupada td{padding-inline:var(--esp-1)}
}

/* El pie fijo de la hoja de intimación a 390: la hoja tiene 16 px de relleno y el pie se estiraba 24 px
   hacia cada lado, 8 px de más que empujaban un desborde horizontal dentro de la hoja. */
@container app (max-width:40rem){
  .hoja[data-con-pie] > .hoja__pie{
    margin:0 calc(var(--esp-7) * -1) calc(var(--esp-7) * -1);padding:var(--esp-6) var(--esp-7) var(--esp-7);
  }
}

/* Los conmutadores de vista (secciones del listado, versiones del detalle) en teléfono y tableta: cada
   opción mide al menos el mínimo táctil. Medían ~29 px (deuda de `24` § 2.5, que `25` § 8 corrige). */
@container app (max-width:900px){
  .conmutador--vista > a,.conmutador--vista > button{
    display:inline-flex;align-items:center;justify-content:center;min-height:var(--tactil-min);
  }
  /* 🔴 **«Cambiosde datos»** (`T163`, medido a 834 en el legajo). El `inline-flex` de arriba vuelve
     **ítems flexibles** al texto y a la `.larga` que lo completa («Cambios» + « de datos», «Toda la
     nómina · 12» + « empleados»), y un ítem flexible es un bloque: el espacio con el que empieza la
     `.larga` cae al comienzo de una línea y se descarta. Entre 641 y 900 px —donde la `.larga` se
     ve y el `inline-flex` ya rige— el rótulo se leía pegado. Se conserva ese espacio en vez de
     sacarlo del marcado: afuera del `<span>` quedaría al final del otro ítem y se descartaría igual. */
  .conmutador--vista .larga{white-space:pre}
  .conmutador--version > a,.conmutador--acta > a{min-height:var(--tactil-comodo)}
}

/* Campos de una hoja en teléfono: el motivo de la intimación medía 34 px. */
@container app (max-width:40rem){
  .hoja input.campo,.hoja select.campo,.hoja .campo input{min-height:var(--tactil-comodo)}
}

/* La isla del armado a 390: «Emitir plan y recibo del anticipo» es larga y va sola en su fila; el total nunca se
   parte. El orden y el aire los pone la regla general de arriba. */
@container app (max-width:40rem){
  .resumen-fijo--plan .resumen-fijo__total .resultado,.resumen-fijo--plan .resultado--grande{white-space:nowrap}
  .resumen-fijo--plan > .acciones .boton{width:100%}
}

/* Los campos de una zona (armado del plan, previa del recibo, filtros) en teléfono: ninguno mide menos que el mínimo
   cómodo. Medían 34 px y el pulgar los erraba (spec 25, § 2: «táctiles ≥ 44 px»). */
@container app (max-width:40rem){
  .zona .campo,.zona select.campo,.zona input.campo,.zona .campo input,.zona .campo select{min-height:var(--tactil-comodo)}
  .zona textarea.campo,.zona .campo textarea{min-height:calc(var(--tactil-comodo) * 2)}
}

/* ── Contraste AA del texto que se lee (T155 §G, spec 25 § 2) ────────────────────────────────────────
   `--texto-3` mide 2,7 : 1 en diurno y 3,4 : 1 en nocturna: sirve para lo que se mira (placeholders,
   chevrones, esqueletos) y no para lo que se lee. La spec dice «`--texto-2`, nunca `--texto-3`» y las
   zonas nuevas —fechas del historial, subtítulos, ayudas, contadores, títulos de zona— lo usaban
   igual. Dentro del área de contenido, `--texto-3` se resuelve al secundario; la cabecera (miga,
   identidad, grupos del menú) se corrige a mano. El token no se toca: lo usan cientos de reglas más. */
.listado{--texto-3:var(--texto-2)}
:root .miga,:root .identidad__detalle,:root .nav-grupo,:root .marca .s{color:var(--texto-2)}

/* ── Blancos táctiles de 44 px (T172) ─────────────────────────────────────────────────────────────
   Decisión del 07/10/2026: todo lo que se toca mide `--tactil-min` de lado menor **sin cambiar la
   densidad del escritorio con mouse** (34 px de `.campo`, 24,5 de `.mini`).

   🔑 **Una sola consulta:** `(pointer:coarse), (max-width:67.5rem)`. Medido en el contexto táctil
   emulado de `T165` (`has_touch`, `is_mobile`) a 390, 834 y 1440: `pointer:coarse`,
   `any-pointer:coarse` y `hover:none` dan verdadero, `pointer:fine` falso; sin la emulación, al
   revés. Lo que **no** se pudo medir es la tableta real (un iPad con teclado o mouse puede reportar
   `fine` en el puntero principal): por eso la salida por ancho está en la misma consulta. 67,5 rem
   son los 1080 px de `--bp-tableta` en `rem` (**H12**), el mismo corte que `@container app`. Sin
   `hover:none`: una notebook táctil con mouse reporta `fine` y se queda con la densidad de escritorio.

   Cada control sube con la misma altura: `--tactil-min`, y `--tactil-comodo` en teléfono (**C1**). */
@media (pointer:coarse),(max-width:67.5rem){
  .campo,.desplegable__control,.calendario__control{min-height:var(--tactil-min)}
  /* Dentro de un `.campo` que es una envoltura (`<span>` o `<label>`: el buscador y la fecha de los
     filtros) el control no dibuja su caja y **el toque tiene que caer sobre él**: el `<span>` no
     enfoca nada, y el `<label>` enfoca pero no abre el panel del calendario. Por eso la píldora
     pierde su relleno vertical y el control la llena de borde a borde (la píldora menos sus dos
     bordes de 1 px). */
  :is(span,label).campo{padding-block:0}
  /* N2: el control mide el blanco entero (`--tactil-min`) y sale 1 px por arriba y por abajo sobre el
     borde de la píldora (margen negativo): la píldora sigue midiendo lo mismo y el control no dibuja
     caja, así que no se ve diferente; el toque sobre el borde ya cae en el control. */
  :is(span,label).campo > input,
  :is(span,label).campo > .calendario > .calendario__control{min-height:var(--tactil-min);margin-block:-1px}
  /* Los conmutadores de vista (Actas · 6, Planes · 1…) con puntero grueso a cualquier ancho: la
     regla de contenedor de más arriba sólo los sube cuando el área de contenido mide < 900 px. */
  .conmutador--vista > a,.conmutador--vista > button{
    display:inline-flex;align-items:center;justify-content:center;min-height:var(--tactil-min);
  }
  .conmutador--vista .larga{white-space:pre}
  textarea.campo{min-height:calc(var(--tactil-min) * 2)}
  /* Sin `display:flex`: el `text-overflow` no actúa sobre un contenedor flexible. El alto sale de la
     línea (una sola, `nowrap`) más el relleno de la opción. */
  .desplegable__opcion{line-height:calc(var(--tactil-min) - 2 * var(--esp-3))}
  /* Un título de zona que se pliega es un `<summary>`: se toca. Sólo crece su caja. */
  summary.zona__titulo{min-height:var(--tactil-min);align-content:center}
}
@media (max-width:40rem){
  .campo,.desplegable__control,.calendario__control{min-height:var(--tactil-comodo)}
  :is(span,label).campo > input,
  :is(span,label).campo > .calendario > .calendario__control{min-height:var(--tactil-comodo);margin-block:-1px}
}

/* La fila de una tabla en tableta vuelve a `--fila-alto`. **Nadie lo consumía**: el token valía
   `--tactil-min` desde el principio y `.grilla` medía 37 px por su relleno y su renglón. No es
   el apriete de **E1** (que sólo recorta el relleno lateral): ese se queda como está. El enlace
   estirado de la fila (`.enlace-fila::after`) hereda el alto. */
@media (pointer:coarse),(max-width:67.5rem){
  @container app (min-width:40.0625rem){
    .grilla tbody td{box-sizing:border-box;height:var(--fila-alto)}
  }
}

/* 👆 `touch-action:manipulation` en lo que se toca (`T172`, sin consulta): sin esto el valor computa
   `auto` y el navegador espera a ver si el toque es el primero de un doble para ampliar. No depende
   del `meta viewport`, que sólo lo evita mientras no se pueda hacer zoom por doble toque. */
a,button,summary,label.casilla{touch-action:manipulation}

/* ── El carril con pista (`T150`; spec `interno/13-la-situacion-de-la-empresa.md` § El carril) ──────────
   Una fila de controles que **desliza dentro de su propio ancho** y que **avisa que sigue**. Antes el
   aviso era una coincidencia —el siguiente control asomando cortado por el borde— y a 390 px, cuando
   el borde caía justo entre dos controles, no asomaba nada: un filtro quedaba fuera de pantalla sin
   pista. La pista no depende del layout: es un **desvanecido de `--carril-pista`** hecho con una
   **máscara alfa**, que no pinta ningún color —sólo deja ver menos el último control— y por eso sirve
   igual en los dos temas.

   Quién sabe de qué lado queda contenido es `portal.js`, que pone `data-mas` (`derecha`, `izquierda`,
   `ambos`, o `ninguno` si todo entra) al desplazar, al redimensionar y tras un intercambio de HTMX; el
   CSS sólo lo lee. **Sin el atributo** —sin JavaScript, o antes de que corra— se ve la pista a la
   derecha: se equivoca por exceso («hay más» aunque no haya), nunca por defecto.

   Sin transición, a propósito: no es un gesto, es un estado (`prefers-reduced-motion` no lo toca).

   👆 `scroll-padding-inline` deja un control enfocado con `Tab` **fuera** del desvanecido: si no, el
   anillo del último control quedaba bajo la máscara y se borraba. Y `padding-block` da el aire para
   que ese anillo (2 px + 2 px de separación) no lo recorte el `overflow` del propio carril.
   `black` en la máscara no es un color del tema: sólo cuenta su alfa (opaco), nunca se pinta.
   Nunca hay scroll horizontal de página: lo que no entra lo absorbe el carril. */
.carril{
  display:flex;gap:var(--esp-3);max-width:100%;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  padding-block:var(--esp-2);
  scroll-padding-inline:var(--carril-pista);
  -webkit-mask-image:linear-gradient(to right,black calc(100% - var(--carril-pista)),transparent);
  mask-image:linear-gradient(to right,black calc(100% - var(--carril-pista)),transparent);
}
.carril::-webkit-scrollbar{display:none}
.carril > *{flex:0 0 auto}
.carril[data-mas="ambos"]{
  -webkit-mask-image:linear-gradient(to right,transparent,black var(--carril-pista),black calc(100% - var(--carril-pista)),transparent);
  mask-image:linear-gradient(to right,transparent,black var(--carril-pista),black calc(100% - var(--carril-pista)),transparent)}
.carril[data-mas="izquierda"]{
  -webkit-mask-image:linear-gradient(to right,transparent,black var(--carril-pista));
  mask-image:linear-gradient(to right,transparent,black var(--carril-pista))}
.carril[data-mas="ninguno"]{-webkit-mask-image:none;mask-image:none}

/* ── El requerimiento de cambio de datos (T129, spec 05) ─────────────────────────────────────────
   Tres piezas: el diff (*lo que hay, una flecha, lo que queda*), el interruptor Sí/No de los tres
   bloques de R4 y la composición de la pantalla de generar.

   **Sin movimiento, a propósito** (G5): los bloques que aparecen al contestar «Sí» y el diff que se
   redibuja mientras se tipea son datos que se leen mientras se escriben; animarlos los retrasa y no
   informa nada que el cambio de lugar no diga. El único gesto de la pantalla es el de siempre, la
   hoja de confirmación (gesto 5). El `:active` de las opciones es tinte, sin escala (G9). */

/* El diff. Un renglón por bloque que cambia; los que no cambian no figuran. */
.diff{display:flex;flex-direction:column;gap:var(--esp-7)}
.diff__fila{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}
.diff__rotulo{
  margin:0;font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--texto-2);
  letter-spacing:var(--track-etiqueta);text-transform:uppercase;
}
.diff__linea{
  margin:0;display:flex;align-items:baseline;gap:var(--esp-4);
  font-size:var(--fs-dato);overflow-wrap:anywhere;
}
.diff__marca{flex:none;min-width:5.5ch;font-size:var(--fs-menor);color:var(--texto-2)}
.diff__antes .diff__texto{color:var(--texto-2);text-decoration:line-through}
.diff__ahora .diff__texto{color:var(--texto);font-weight:var(--peso-medio)}
.diff__flecha{margin:0;padding-left:var(--esp-2);color:var(--texto-2);line-height:1}
.diff__nota{margin:0}

/* El interruptor Sí/No. Dos radios en una píldora: sin ninguno preseleccionado, para que el
   inspector conteste cada uno (la spec lo dibuja así). */
.interruptores{
  display:grid;gap:var(--esp-6);grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;padding:0;border:0;min-width:0;
}
.interruptor{display:flex;flex-direction:column;gap:var(--esp-3);margin:0;padding:0;border:0;min-width:0}
.interruptor > legend{padding:0;font-size:var(--fs-menor);font-weight:var(--peso-medio);color:var(--texto-2)}
.interruptor__opciones{
  display:flex;border:1px solid var(--borde-fuerte);border-radius:var(--radio-control);overflow:hidden;
}
.interruptor__opcion{
  position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;
  min-height:var(--tactil-comodo);cursor:pointer;
  font-size:var(--fs-dato);font-weight:var(--peso-medio);color:var(--texto-2);
}
.interruptor__opcion + .interruptor__opcion{border-left:1px solid var(--borde-fuerte)}
.interruptor__opcion input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.interruptor__opcion:has(input:checked){background:var(--acento);color:var(--acento-tinta)}
.interruptor__opcion:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:-4px}
.interruptor__opcion:active{box-shadow:inset 0 0 0 var(--tactil-comodo) var(--superficie-activa)}

/* La composición de la pantalla de generar: una columna en teléfono y tableta (el diff abajo) y
   dos en escritorio (el formulario a la izquierda; a la derecha, lo que va a quedar registrado). */
.requerimiento__cuerpo{display:grid;gap:var(--esp-9);grid-template-columns:minmax(0,1fr)}
.requerimiento__formulario{display:flex;flex-direction:column;gap:var(--esp-8);min-width:0}
@container app (min-width:67.5rem){
  .requerimiento__cuerpo{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
}
.requerimiento__bloque{display:flex;flex-direction:column;gap:var(--esp-6);min-width:0}
.requerimiento__antes{
  display:flex;flex-direction:column;gap:var(--esp-2);margin:0;
  padding:var(--esp-5) var(--esp-6);border:1px solid var(--borde);border-radius:var(--radio-control);
  background:var(--superficie);color:var(--texto-2);font-size:var(--fs-dato);
}
.requerimiento__antes b{font-size:var(--fs-menor);font-weight:var(--peso-medio)}
.requerimiento__cita{
  margin:0;padding:var(--esp-5) var(--esp-6);border-left:3px solid var(--borde-fuerte);
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--texto);font-size:var(--fs-dato);
}
.acciones--requerimiento{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--esp-4);
  padding-top:var(--esp-6);border-top:1px solid var(--separador);
}
.requerimiento__identidad{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4) var(--esp-6)}
.requerimiento__identidad .cuit{color:var(--texto-2);font-family:var(--f-dato)}
@container app (max-width:40rem){
  .interruptores{gap:var(--esp-4)}
  .acciones--requerimiento{flex-direction:column-reverse;align-items:stretch}
  .acciones--requerimiento .boton{min-height:var(--tactil-comodo);justify-content:center}
}
/* La cuenta de pendientes en el rótulo del menú: «Requerimientos 11» (T129, spec 05). Es un dato del
   rótulo y no un distintivo que llame la atención: el número ya es la respuesta. */
.nav-cuenta{margin-left:var(--esp-2);font-weight:var(--peso-medio);font-variant-numeric:tabular-nums;color:var(--texto-2)}
/* Los bloques que cambian se apilan con el aire de una zona entre ellos (T129). */
.requerimiento__bloques{display:flex;flex-direction:column;gap:var(--esp-8)}

/* ── La bandeja de confirmación de ingresos (`T220`) ─────────────────────────────────────────────────
   `.grilla--ingresos`: cinco columnas —documento, empresa, quién lo cargó, importe y qué se puede hacer—.
   La última lleva, **en este orden**, la explicación (con las palabras del servicio, cuando la persona
   tiene la llave y algo se lo impide) y los botones: ninguna acción se ejecuta desde la fila, todas abren
   la hoja. La empresa envuelve (nunca se corta con puntos suspensivos: es lo que se busca) y el importe
   no se parte (**C6**). «Lo cargó» sólo existe como columna en escritorio: abajo es la segunda línea de la
   empresa (`formatos.css`). */
.grilla--ingresos .empresa{max-width:none;overflow:visible;white-space:normal}
.grilla--ingresos .sub{display:block;color:var(--texto-2)}
.grilla--ingresos .sub--tipo{font-size:var(--fs-etiqueta);letter-spacing:.04em;text-transform:uppercase}
.grilla--ingresos .sub--cargo{display:none}
.grilla--ingresos td.celda-importe{white-space:nowrap}
.grilla--ingresos td.celda-acciones{text-align:left;white-space:normal}
.grilla--ingresos .sub--explicacion{max-width:34ch;margin:0 0 var(--esp-3)}
/* La alerta de antigüedad del recibo (**C62**): la pastilla y, debajo, la frase. Aire propio para que no se pegue a «Lo
   cargó». `.estado` es `nowrap`: la pastilla es corta («Pendiente hace 9 días») y entra en 390. */
.grilla--ingresos .alerta-de-antiguedad{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-2);
  margin-top:var(--esp-3)}
.grilla--ingresos .alerta-de-antiguedad .sub{max-width:34ch}
/* El acta reabierta (**A83**): la misma pila que la alerta de antigüedad —pastilla y, debajo, la frase—, en la celda de
   las acciones, donde en las demás filas van los botones. Sin botones, la celda dice por qué. */
.grilla--ingresos .reapertura{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-2)}
.grilla--ingresos .reapertura .sub{max-width:34ch}
.grilla--ingresos .acciones-de-fila{margin-top:0;flex-wrap:wrap}
.grilla--ingresos a:not(.boton){color:var(--texto);font-weight:var(--peso-medio);
  text-decoration-color:var(--borde);text-underline-offset:.2em}
.grilla--ingresos a:not(.boton):hover{text-decoration-color:currentColor}

/* «Confirmar por número» (**A81**) y el informe de lo confirmado (**T221**): dos zonas con campos en
   fila. Los campos usan los blancos táctiles del sistema; el botón se alinea con la base de los campos. */
.por-numero__campos,.informe-de-confirmados__campos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--esp-5);align-items:end;
}
.por-numero__campos{grid-template-columns:minmax(9rem,12rem) minmax(9rem,16rem) auto;justify-content:start}
.informe-de-confirmados__campos{grid-template-columns:repeat(3,minmax(9rem,12rem)) auto;justify-content:start}
.por-numero__campos .campo-grupo,.informe-de-confirmados__campos .campo-grupo{margin:0}
.por-numero > .ayuda{margin:var(--esp-3) 0 0}
.informe-de-confirmados > .ayuda{margin:0 0 var(--esp-5)}

/* ── El aviso al inspector: «Recibo 4512 sin efecto» (`T220`, **C59**) ─────────────────────────────────────────────
   Un `.aviso--deuda` (ámbar: trabajo por rehacer, no un error) con el texto a la izquierda y «Entendido» a la derecha.
   El bloque es una pila `flex` con el aire de una zona entre tarjetas. Vacío **mide cero y absorbe su propio `gap`
   con un margen negativo** (el de `.listado`, `--esp-6`): no se le pone `display:none` porque tiene que seguir
   existiendo para recibir el foco cuando la última tarjeta se va (un elemento `display:none` no se enfoca). El botón es el blanco táctil del sistema (**C1**). */
.avisos-de-rechazo{display:flex;flex-direction:column;gap:var(--esp-5);margin-block-end:var(--esp-7)}
.avisos-de-rechazo:not(:has(.aviso, .ayuda)){margin-block-end:calc(var(--esp-6) * -1)}
.avisos-de-rechazo:focus{outline:none}
.aviso-de-rechazo{align-items:center}
.aviso-de-rechazo__cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--esp-2)}
.aviso-de-rechazo__cuerpo p{margin:0}
.aviso-de-rechazo__titulo{font-size:var(--fs-medio);color:var(--texto)}
.aviso-de-rechazo form{flex:none;margin:0}
.aviso-de-rechazo .boton{min-height:var(--tactil-min)}

/* La casilla «Pago comprobado» de la hoja de confirmar un recibo (`T220`, **C58**): la marca dibujada del sistema con
   su texto al lado; toda la línea es el blanco táctil. */
.hoja__casilla{display:flex;align-items:center;gap:var(--esp-4);cursor:pointer;min-height:var(--tactil-min)}
.hoja__casilla .casilla{margin:0;flex:none}
.hoja__casilla-texto{font-size:var(--fs-dato);font-weight:var(--peso-medio);color:var(--texto)}
.hoja__casilla-texto i{font-style:normal;font-weight:var(--peso-normal);color:var(--texto-2)}

/* ── El medidor de la barra (T194) ───────────────────────────────────────────────────────────────────
   Diagnóstico, no pantalla: lo crea `portal.js` sólo con `?medir=1` (queda en `localStorage`). Va
   ARRIBA —no abajo— para no interferir con lo que se mide (la barra y la isla del fondo) y es `fixed`
   colgado de `<body>` (A3/A4). Opaco (A1): `--cielo-piso` debajo y `--superficie-alta` encima. No
   anima nada. La sonda mide unidades y zona segura sin ocupar lugar.

   🔴 **`.medidor-de-barra` y no `.medidor`** (`T195`, 14/10/2026). Nació como `.medidor`, y esa clase
   ya era el medidor «Fiscalizadas este mes» del inicio del inspector (`_portada_inspector.html`,
   `portal.css`). Una regla de clase no sabe que el diagnóstico está apagado: el `position:fixed`, el
   `z-index:60` y el fondo opaco de acá casaban con el «10 / 10» del inicio, que salía de su tarjeta,
   pisaba la siguiente y quedaba quieto al desplazar, como una isla. Todo lo de esta herramienta vive
   bajo su propio bloque; la guardia es `comun/tests/test_el_diagnostico_no_toca_las_pantallas.py`. */
.medidor-de-barra{
  position:fixed;z-index:60;
  background:linear-gradient(var(--superficie-alta),var(--superficie-alta)),var(--cielo-piso);
  color:var(--texto);font-family:var(--f-dato);
}
/* Segunda vuelta: PLEGADO es lo normal (una pastilla al borde derecho, centrada, que no tapa el
   encabezado ni la navegación); desplegado es la caja de arriba de siempre. */
.medidor-de-barra[data-vista="plegado"]{
  top:50%;right:0;translate:0 -50%;
  border:1px solid var(--borde-fuerte);border-right:0;
  border-radius:var(--radio-panel) 0 0 var(--radio-panel);
}
.medidor-de-barra[data-vista="abierto"]{
  top:0;left:0;right:0;
  padding:calc(var(--esp-3) + env(safe-area-inset-top,0px)) var(--esp-4) var(--esp-3);
  border-bottom:1px solid var(--borde-fuerte);
}
.medidor-de-barra__pildora{display:flex;flex-direction:column;align-items:stretch;gap:var(--esp-3);padding:var(--esp-3)}
.medidor-de-barra__pildora[hidden],.medidor-de-barra__cuerpo[hidden]{display:none}
.medidor-de-barra__resumen{text-align:center;font-size:.75rem;white-space:nowrap;color:var(--texto-2)}
.medidor-de-barra__pildora .medidor-de-barra__boton{padding:0 var(--esp-4);min-width:var(--tactil-min)}
.medidor-de-barra__cuerpo{display:flex;flex-direction:column;gap:var(--esp-3)}
.medidor-de-barra__acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3)}
.medidor-de-barra__boton{
  min-height:var(--tactil-min);padding:0 var(--esp-5);
  font:inherit;font-size:.75rem;color:var(--acento);background:transparent;
  border:1px solid var(--borde-fuerte);border-radius:var(--radio-pastilla);
}
.medidor-de-barra__texto{
  margin:0;max-height:9rem;overflow:auto;overscroll-behavior:contain;
  font-family:var(--f-dato);font-size:.6875rem;line-height:1.35;color:var(--texto-2);
  white-space:pre;
}
.medidor-de-barra[data-abierto="true"] .medidor-de-barra__texto{max-height:40svh}
.medidor-de-barra__linea[hidden]{display:none}
.medidor-de-barra__sondas{position:fixed;top:0;left:0;width:0;overflow:hidden;visibility:hidden;pointer-events:none}
.medidor-de-barra__sondas i{display:block;width:0}
.medidor-de-barra__copia{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0}