/* Tu Borderó · estilos de la aplicación (presupuesto, borderó, producción y calculadoras)
   Reúne en una sola hoja las siete capas que antes se pisaban entre sí (base,
   evolución, carácter, tintas, movimiento, calculadoras y lectura), en ese
   orden de cascada; los separadores "Origen" marcan dónde empieza cada una. Se quitaron sólo las declaraciones que una regla
   posterior con el mismo selector pisaba siempre. */

/* ===== Origen: estilos.css ===== */
/* =============================================================================
   Base — Identidad visual
   -----------------------------------------------------------------------------
   Lienzo de papel —un crema apenas cálido, no blanco— con superficies blancas
   encima, bloques de azul marino casi negro para cortar la página, un azul
   eléctrico como acento y un naranja para los remates. Radios grandes y un sistema de "chips" de color
   para clasificar. La jerarquía la marcan el tamaño y el aire, no los filetes.

   Sistema de color: cada acento viene en dos versiones, el tono fuerte para
   texto y el tinte para fondo. La regla es que un tono fuerte SIEMPRE se lee
   sobre su propio tinte, y el blanco se lee sobre el tono fuerte. Todos los
   pares están medidos —los números de acá abajo son ratios WCAG reales, no
   estimaciones— y ninguno baja de 4.5:1.

   El acento es azul y no verde a propósito: el verde ya significa "resultado
   positivo" en el panel, y con los dos en la misma familia el bloque del
   resultado y el del punto de equilibrio se confundían.

   Tipografía: Archivo para las cifras y los títulos, Inter para interfaz y datos.
   Cifras tabulares en todo lo que sea número.

   Ojo con el interletrado: los valores negativos estaban calibrados para
   Bricolage Grotesque, que era condensada. Sora es geométrica y más abierta, y
   con el mismo tracking las letras se tocaban. Están todos aflojados a dos
   tercios; si algún día cambia la tipografía de títulos, hay que revisarlos
   de nuevo.
   ============================================================================= */
:root {
  /* --- Neutros --- */
  /* texto principal · 15.91 sobre lienzo · 18.28 sobre nieve */
  /* texto secundario · 5.41 sobre lienzo · 6.21 sobre nieve */
  /* fondo de la página: papel, no blanco */
  /* superficies */
  /* El borde de los CAMPOS es aparte y más oscuro, y no es una cuestión de
     gusto: WCAG 1.4.11 pide 3:1 para el límite visual de un control, igual que
     para el texto. `--borde-fuerte` da 1.51 sobre blanco —prácticamente
     invisible— y con eso los 138 campos del formulario no se distinguían del
     papel. Este da 3.63 sobre blanco y 3.16 sobre el lienzo, o sea que pasa
     contra las dos superficies donde aparece un campo.

     Sigue siendo un filete de 1 px: se ve, y no convierte el formulario en una
     grilla de cajas.                                                        */
  /* bloques oscuros · crema encima 15.91 · blanco 18.28 */
  /* --- Acentos: tono fuerte (texto) + tinte (fondo) --- */
  /* 7.71 sobre lienzo · 7.33 sobre su tinte · blanco encima 8.86 */
  /* el acento sobre carbón, donde el fuerte no llega · 8.64 */
  /* --- El naranja, que viene con una trampa -----------------------------
     El de la identidad (#E5652F) da 2.77 sobre el lienzo: como texto es
     ilegible y no llega ni cerca del mínimo. Así que se parte en dos y cada
     uno tiene su trabajo:

       --naranja        relleno y decoración. Encima va tinta, nunca blanco
                        (tinta sobre naranja da 5.74; blanco, 3.18).
       --naranja-fuerte cuando el naranja tiene que ser TEXTO sobre claro.
                        Es el mismo color oscurecido hasta pasar: 5.11.       */
  /* 5.11 sobre lienzo · 5.08 sobre su tinte */
  --ocre: #9A5426;
  --ocre-t: #F8EBE0;
  /* 5.25 sobre lienzo · 4.89 sobre su tinte */
  /* 5.78 sobre lienzo · 5.32 sobre su tinte · blanco encima 6.30 */
  /* 5.53 sobre lienzo · 5.13 sobre su tinte · blanco encima 6.03 */
  --ambar: #94620F;
  --ambar-t: #F6EEDA;
  /* 4.80 sobre lienzo · 4.53 sobre su tinte · blanco encima 5.23 */
  /* --- El naranja como TEXTO sobre claro -------------------------------
     `--naranja` (#E5652F) da 2.77 sobre el lienzo: no pasa ni siquiera el
     3:1 de texto grande, así que como texto es inservible por vivo que se
     vea en una maqueta. `--naranja-fuerte` (5.11) pasa todo pero ya lee
     ladrillo. `--naranja-texto` es el punto medio medido: 4.47 sobre el
     lienzo, o sea holgado para display y a un pelo del mínimo de texto
     normal, conservando bastante más del naranja de la identidad.

     La regla, entonces, son TRES trabajos y no dos:
       --naranja        relleno: botones, bloques, rayas, tramas, sellos.
                        También sirve de TEXTO sobre el carbón (5.74).
       --naranja-texto  remates de titular y cifras sobre el lienzo.
       --naranja-fuerte texto chico sobre claro, donde 4.47 no alcanza.     */
  /* 4.47 sobre lienzo · 4.16 sobre nieve */
  /* --- Escala tipográfica: TRES registros y nada en el medio -----------
     El problema no era que hubiera texto chico: era que había 22 tamaños
     entre 9 y 58 px, o sea un continuo sin jerarquía. La identidad quiere
     display enorme / cuerpo cómodo / etiqueta diminuta, con el hueco entre
     medio VACÍO a propósito: el salto es lo que se lee como jerarquía.

     La escala manda sobre la PROSA y los TÍTULOS: ahí no hay nada por debajo
     de --t-cuerpo, y nada entre --t-etiqueta y --t-cuerpo. Si un párrafo pide
     un tamaño intermedio, casi siempre lo que pide en realidad es otro peso o
     menos opacidad.

     Dos cosas quedan afuera a propósito, y no son un descuido:

     · El CROMO de navegación (.lnav) va en 15 px. No es prosa: es una barra
       de etiquetas que compite por ancho con la marca y el botón.

     · Los FACSÍMILES —.captura y .papel— son miniaturas de otra superficie,
       como una captura de pantalla. Tienen su escala interna propia y no
       deben heredar la de la página: forzarlos a 16 px los rompe, porque lo
       que ilustran es una pantalla entera vista de lejos.                  */
  --t-display-l: clamp(2.75rem, 6vw, 5.25rem);
  /* 44–84 px · titular de portada */
  --t-display-m: clamp(1.75rem, 3.2vw, 2.75rem);
  /* 28–44 px · cabeza de sección */
  --t-display-s: 1.375rem;
  /* 22 px · título de tarjeta */
  --t-bajada: 1.0625rem;
  /* 17 px · bajadas */
  /* 16 px · PISO de toda prosa */
  /* 11 px · sólo caja alta con tracking */
  /* Las mayúsculas de display piden interletrado propio. Los valores muy
     negativos de la caja baja (-0.03em) las hacen chocar: en caja alta no hay
     ascendentes ni descendentes que separen visualmente, así que el ojo pide
     MÁS aire, no menos.

     Con Archivo el valor pasa a ser POSITIVO. Es más angosta que Sora, y una
     grotesca angosta en caja alta necesita que le abran el paso o las astas
     verticales se leen como una empalizada. */
  --tr-display: 0.012em;
  /* El peso del display baja de 800 a 700. El 800 sumado a la caja alta y al
     tamaño grande era la mitad de la sensación de tosquedad: tres cosas
     pesadas a la vez. */
  --peso-display: 700;
  --tr-etiqueta: .14em;
  /* La trama de puntos de la identidad. Va como fondo, nunca como contenido. */
  --trama: radial-gradient(circle, var(--borde-fuerte) 1.4px, transparent 1.5px);
  --trama-paso: .72rem .72rem;
  /* Archivo y no Sora. Sora es geométrica, ancha y de terminaciones romas: en
     caja alta y peso alto se empastaba, que es lo que se leía como "tosca".
     Archivo es una grotesca editorial, más angosta y de contraformas más
     abiertas, y en mayúsculas respira.

     Para volver a Sora alcanza con cambiar esta línea: el archivo sigue
     estando en vendor/fuentes y declarado en fuentes.css. */
  /* variable, 400–800 */
  /* 1340 y no 1200: con la columna del paso a paso a la izquierda y el panel a
     la derecha, al formulario le quedaban 496 px y las tablas —que necesitan
     528 para no aplastar las columnas— empezaban a scrollear en escritorio. */
  --pastilla: 999px;
  /* Las sombras van tintadas con la tinta, no con negro puro: sobre crema un
     gris neutro se ve sucio. */
  --sombra-2: 0 2px 4px rgba(10,15,61,.05), 0 14px 36px rgba(10,15,61,.09);
  --anillo: 0 0 0 4px rgba(75,163,201,.3);
  --paso: 160ms cubic-bezier(.3,.7,.4,1);
  /* La curva de todo lo que se mueve en grande. Es la misma que usa la
     portada: una sola curva en todo el sitio es lo que hace que se sienta de
     una pieza, y mezclarlas se nota aunque nadie sepa nombrar por qué. */
  --curva: cubic-bezier(.22,.68,.35,1);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1,
h2,
h3 {
  font-family: var(--titulo);
  font-weight: 700;
  line-height: 1.08;
}
h1 {
  font-size: var(--fs-7);
  margin: 0;
}
h2 {
  font-size: var(--fs-9);
  margin: 0 0 .5rem;
}
h3 {
  font-family: var(--texto);
  font-size: var(--fs-2);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grafito);
  margin: 2.4rem 0 .9rem;
}
/* Reparto de líneas. Va `balance` y no `pretty`: medí los dos y `pretty` seguía
   dejando últimas líneas del 9 % y 16 % del ancho, mientras que `balance` las
   elimina. Sirve porque acá los párrafos son cortos —`balance` deja de aplicar
   pasadas unas pocas líneas—, y `pretty` queda para el texto largo. */
.paso__bajada,
.entidad__ayuda,
.ayuda,
.reparto__pct,
.panel__nota,
h1,
h2,
h3,
h4,
.previs__titulo {
  text-wrap: balance;
}
p,
li,
dd {
  text-wrap: pretty;
}
p {
  margin: 0 0 .85rem;
}
:focus-visible {
  outline: 2px solid var(--acento);
  border-radius: var(--r-s);
}
/* =============================================================================
   Cabecera
   ============================================================================= */
/* Queda en el árbol para lectores de pantalla, fuera de la vista. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .15rem;
}
.pasos[hidden] {
  display: none;
}
.paso-li {
  display: block;
  min-width: 0;
}
/* Cada paso es un `<button>`: hereda la tipografía del navegador si no se le
   dice lo contrario, y sin `cursor` no parece que se pueda tocar. */
.paso-item {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  font-family: var(--texto);
  font-weight: 500;
  text-align: left;
  width: 100%;
  min-width: 0;
  cursor: pointer;
  transition: background var(--paso), color var(--paso);
}
.paso-item:disabled {
  cursor: not-allowed;
}
.paso-item__n {
  font-weight: 700;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: inherit;
}
/* Cumplido: el número se reemplaza por un tilde dibujado con dos trazos. */
.paso-item--hecho .paso-item__n {
  color: transparent;
  position: relative;
}
.paso-item--hecho .paso-item__n::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: .3rem;
  height: .55rem;
  margin: -.3rem 0 0 -.16rem;
  border-right: 2px solid var(--carbon);
  border-bottom: 2px solid var(--carbon);
  transform: rotate(45deg);
}
.paso-item--activo {
  font-weight: 600;
}
/* =============================================================================
   Estructura
   ============================================================================= */
/* Tres columnas: el paso a paso a la izquierda, el formulario en el medio, el
   panel en vivo a la derecha. */
.envoltorio {
  max-width: var(--medida);
  margin: 0 auto;
  display: grid;
  align-items: start;
}
/* =============================================================================
   Columna del paso a paso
   -----------------------------------------------------------------------------
   Antes eran seis pastillas arriba, con el nombre escondido en pantalla angosta
   porque no entraba. Como columna cada sección muestra su nombre entero y se ve
   de un vistazo dónde estás y qué falta.
   ============================================================================= */
.lateral {
  position: sticky;
  top: 6rem;
}
.lateral__caja {
  border-radius: var(--r-l);
}
.lateral__titulo {
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding: 0 .6rem;
}
.paso {
  display: none;
}
.paso--visible {
  display: block;
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* La dirección la escribe ui.js en el contenedor del formulario, según si el
   paso nuevo es mayor o menor que el anterior. */
.va-adelante .paso--visible {
  animation-name: entrar-desde-derecha;
}
.va-atras .paso--visible {
  animation-name: entrar-desde-izquierda;
}
@keyframes entrar-desde-derecha {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrar-desde-izquierda {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}
/* Sin tope de medida: son una o dos frases de instrucción arriba de un bloque
   ancho, y acotadas a 62ch quedaban como una columna finita con medio ancho
   vacío al lado. Acá pesa más que el bloque se vea parejo que la medida ideal
   de lectura, que importa en la prosa larga, no en un renglón de ayuda. */
/* La palabra destacada va en salvia plano. Antes era un degradado de tres
   colores recortado sobre el texto, que además de pedir cuatro propiedades con
   prefijo obligaba a `box-decoration-break` para que la segunda línea no
   arrancara del color donde había quedado la primera. Un color sólido dice lo
   mismo, se lee mejor sobre el bloque oscuro y no tiene bordes que cuidar. */
/* Cada tarjeta con su acento. Tono fuerte sobre su propio tinte: todos pasan. */
/* =============================================================================
   Campos
   ============================================================================= */
.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1.3rem;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.campo--ancho {
  grid-column: 1 / -1;
}
label {
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--tinta);
}
input[type="text"],
input[type="date"],
input[type="number"],
select {
  font-family: var(--texto);
  font-size: var(--fs-5);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  background: var(--nieve);
  border: 1px solid var(--borde-campo);
  border-radius: var(--r-s);
  padding: .6rem .75rem;
  width: 100%;
  min-width: 0;
  transition: border-color var(--paso), box-shadow var(--paso);
}
/* Gris tenue pero legible. Un gris más claro se ve lindo y no lo lee nadie:
   este da 4.85:1 sobre blanco y se distingue igual del texto ya cargado.
   Va apenas verdoso, como el resto de los neutros: un gris azul sobre crema
   se ve sucio. */
input::placeholder {
  color: #6B7085;
  opacity: 1;
}
/* El hover oscurece. Antes aclaraba —de #D2CABE a #CBC6B8 es casi lo mismo, y
   para peor en la dirección equivocada—: pasar el mouse tiene que reforzar el
   borde, no diluirlo. */
input:hover,
select:hover {
  border-color: var(--tinta);
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: var(--anillo);
}
input[aria-invalid="true"] {
  border-color: var(--rojo);
  background: var(--rojo-t);
}
input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(179,59,49,.20);
}
select {
  appearance: none;
  background-image: none;
}
.ayuda {
  font-size: var(--fs-3);
  color: var(--grafito);
  max-width: 54ch;
}
/* =============================================================================
   Pista · la "i" con la aclaración
   -----------------------------------------------------------------------------
   Se abre con el cursor, con el teclado y con el dedo. Lo último no es un extra:
   en un teléfono no hay hover, así que sin el toque la aclaración no existiría.
   ============================================================================= */
.pista {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: .3rem;
}
/* 1.35rem y no 1.05: a 17 px el círculo era incómodo de tocar en el teléfono.
   No llega a los 44 px que recomienda la norma, y es a propósito: probé
   agrandar el área con una capa invisible y esa capa se metía encima del campo
   de abajo, o sea que un toque destinado al monto podía terminar abriendo la
   ayuda. Un objetivo algo chico molesta; uno que roba toques en un campo de
   plata rompe la carga.

   INTENTADO OTRA VEZ Y REVERTIDO: botón de 44 px con el círculo dibujado por
   un ::before y márgenes negativos de −11 px para no mover el layout. Falla
   igual, y por el mismo motivo: los márgenes negativos sacan la caja del flujo
   visualmente pero el botón sigue pintando 44 px de alto, así que se monta
   sobre la fila de arriba y la de abajo y les roba los toques. El problema no
   es CÓMO se agranda el área: es que en una fila de 22 px de alto no entran 44
   sin pisar al vecino. Si algún día se resuelve, hay que resolverlo dándole
   más alto a la fila entera, no al botón. */
.pista__boton {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde-fuerte);
  background: var(--nieve);
  color: var(--grafito);
  border-radius: var(--pastilla);
  font-family: var(--titulo);
  font-size: var(--fs-1);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  padding: 0;
  transition: all var(--paso);
}
.pista__boton:hover,
.pista--abierta .pista__boton {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
/* Arranca anclado a la izquierda del ícono, y ui.js lo corre lo justo para que
   no se salga por ningún borde (--corr). Con anclajes fijos no alcanzaba: un
   globo de 320 px en una pantalla de 545 se sale de un lado o del otro. */
.pista__globo {
  position: absolute;
  left: -.5rem;
  bottom: calc(100% + .5rem);
  transform: translateX(var(--corr, 0px));
  width: max-content;
  max-width: min(20rem, calc(100vw - 2.5rem));
  background: var(--tinta);
  color: #fff;
  font-size: var(--fs-3);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  padding: .6rem .75rem;
  border-radius: var(--r-s);
  box-shadow: var(--sombra-2);
  z-index: 20;
  /* `display:none` y no `visibility:hidden`: aun oculto, un globo de 320 px
     seguía contando para el ancho de la página y le metía scroll horizontal a
     todo el sitio en pantallas angostas. Fuera del layout, el problema no
     existe. El costo es perder la transición, que no vale ese precio. */
  display: none;
}
/* La flechita del globo. */
/* La flechita se descuenta el corrimiento, así sigue apuntando al ícono. */
.pista__globo::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(.85rem - var(--corr, 0px));
  border: 5px solid transparent;
  border-top-color: var(--tinta);
}
.pista:hover .pista__globo,
.pista__boton:focus-visible+.pista__globo,
.pista--abierta .pista__globo {
  display: block;
}
.campo__error {
  font-size: var(--fs-3);
  color: var(--rojo);
  font-weight: 600;
}
.campo__error:empty {
  display: none;
}
/* =============================================================================
   Avisos
   ============================================================================= */
.aviso {
  font-size: var(--fs-4);
  color: var(--grafito);
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--r-m);
  padding: .9rem 1.05rem;
  margin: 1.2rem 0;
}
.aviso--atencion {
  border-left-color: var(--ambar);
  background: var(--ambar-t);
  border-color: rgba(148,98,15,.2);
  color: #5E3E06;
}
.aviso--accion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
}
.aviso p {
  margin: 0;
}
/* =============================================================================
   Alertas en vivo
   -----------------------------------------------------------------------------
   Nunca más de dos, y cada una en el color de su gravedad. Se distinguen de
   `.aviso` a propósito: el aviso es texto fijo que siempre está ahí, la alerta
   aparece y se va según los números que se van cargando.
   ============================================================================= */
.alertas {
  display: grid;
  gap: .7rem;
  margin: 1.6rem 0 0;
}
/* Vacía no ocupa nada, pero sigue existiendo: es una región `status` y si se
   fuera del todo del árbol, lo que aparece después no se anunciaría. */
.alertas:empty {
  margin: 0;
}
.alertas[hidden] {
  display: none;
}
.alerta {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border: 1px solid var(--borde);
  border-left-width: 3px;
  border-radius: var(--r-m);
  padding: .9rem 1.05rem;
  animation: entrar 320ms var(--curva);
}
.alerta__marca {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: var(--pastilla);
  flex-shrink: 0;
  white-space: nowrap;
  color: #fff;
}
/* Tope de medida: sin él, en escritorio el renglón llegaba a 91 caracteres y
   el ojo se pierde al saltar de línea. Entre 45 y 75 se lee cómodo. */
.alerta__texto {
  margin: 0;
  font-size: var(--fs-4);
  max-width: 68ch;
}
/* Cada tono fuerte sobre su propio tinte, igual que en el resto del sistema. */
.alerta--riesgo {
  background: var(--rojo-t);
  border-color: rgba(179,59,49,.18);
  border-left-color: var(--rojo);
}
.alerta--riesgo .alerta__marca {
  background: var(--rojo);
}
.alerta--riesgo .alerta__texto {
  color: #7A2418;
}
/* 8.53 sobre su tinte */
.alerta--atencion {
  background: var(--ambar-t);
  border-color: rgba(148,98,15,.2);
  border-left-color: var(--ambar);
}
.alerta--atencion .alerta__marca {
  background: var(--ambar);
}
.alerta--atencion .alerta__texto {
  color: #5E3E06;
}
/* 8.38 sobre su tinte */
.alerta--bueno {
  background: var(--verde-t);
  border-color: rgba(46,107,79,.18);
  border-left-color: var(--verde);
}
.alerta--bueno .alerta__marca {
  background: var(--verde);
}
.alerta--bueno .alerta__texto {
  color: #1E4A37;
}
/* 8.49 sobre su tinte */
/* =============================================================================
   Tablas
   ============================================================================= */
.tabla-envoltorio {
  overflow-x: auto;
  margin-bottom: 1rem;
  background: var(--nieve);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
}
/* En pantalla angosta la tabla scrollea adentro de su caja en vez de aplastar
   las columnas: sin los mínimos, en 375 px el campo de concepto queda en 71 px
   y no se lee lo que uno escribe. */
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 33rem;
  font-size: var(--fs-4);
}
/* 16rem y no 11: con 11 se cortaban los conceptos precargados largos, tipo
   "Subsidio o fondo concursable". */
.tabla-envoltorio th:first-child,
.tabla-envoltorio td:first-child {
  min-width: 16rem;
}
th {
  text-align: left;
  font-weight: 600;
  color: var(--grafito);
  background: var(--lienzo);
  padding: .6rem .6rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--borde);
}
th:first-child {
  border-top-left-radius: var(--r-m);
}
th:last-child {
  border-top-right-radius: var(--r-m);
}
th.num,
td.num {
  text-align: right;
}
td {
  border-top: 1px solid var(--borde);
  padding: .35rem .6rem;
  vertical-align: middle;
}
tbody tr:first-child td {
  border-top: none;
}
tbody tr {
  transition: background var(--paso);
}
tbody tr:hover {
  background: #F8F6F0;
}
td input {
  padding: .45rem .6rem;
}
td.num input {
  text-align: right;
}
.celda-calculada {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
.col-borrar {
  width: 1%;
}
.boton-borrar {
  font-family: var(--texto);
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--grafito);
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  padding: .3rem .6rem;
  cursor: pointer;
  transition: all var(--paso);
}
.boton-borrar:hover {
  border-color: var(--rojo);
  color: var(--rojo);
  background: var(--rojo-t);
}
.boton-borrar[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
.boton-borrar[disabled]:hover {
  border-color: var(--borde-fuerte);
  color: var(--grafito);
  background: transparent;
}
/* =============================================================================
   Rubros · un chip de color por rubro
   ============================================================================= */
/* El color de cada rubro se define acá y en ningún otro lado. Antes iba por
   posición (`nth-of-type`), que alcanzaba mientras los rubros se pintaran
   siempre en el orden del catálogo. El reparto de egresos va ordenado por
   monto, así que el color tiene que colgar del rubro y no del lugar. */
.rubro-color {
  --ac: var(--grafito);
  --ac-t: #E7E4DA;
}
.rubro-color--artistico {
  --ac: var(--ocre);
  --ac-t: var(--ocre-t);
}
.rubro-color--tecnica {
  --ac: var(--acento);
  --ac-t: var(--acento-t);
}
.rubro-color--espacio {
  --ac: var(--verde);
  --ac-t: var(--verde-t);
}
.rubro-color--comunicacion {
  --ac: var(--ambar);
  --ac-t: var(--ambar-t);
}
.rubro-color--administracion {
  --ac: var(--grafito);
  --ac-t: #E7E4DA;
}
/* Cada rubro es una tarjeta. Plegados y sin caja, los cinco quedaban flotando
   en el fondo y no se leía que fueran secciones desplegables: parecían cinco
   renglones sueltos. La caja los separa y da a entender que adentro hay algo. */
.rubro {
  margin-bottom: .8rem;
  background: var(--nieve);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
  transition: border-color var(--paso), box-shadow var(--paso);
}
.rubro:hover {
  border-color: var(--borde-fuerte);
}
.rubro[open] {
  box-shadow: var(--sombra-2);
  margin-bottom: 1.6rem;
}
/* La cabecera es el `summary` del rubro: se toca para plegar y desplegar, y
   queda pegada mientras scrolleás ese rubro, para no perder de vista en cuál
   estás cargando ni cuánto lleva acumulado. Va debajo de la cabecera del
   sitio, que también es sticky. */
.rubro__cabecera {
  display: flex;
  align-items: center;
  gap: .9rem;
  cursor: pointer;
  list-style: none;
  position: sticky;
  top: 4.2rem;
  z-index: 5;
  background: var(--nieve);
  padding: .9rem 1.1rem;
  border-radius: var(--r-m);
}
/* Abierto, la cabecera se apoya sobre el contenido con una línea. */
.rubro[open] .rubro__cabecera {
  border-bottom: 1px solid var(--borde);
  border-radius: var(--r-m) var(--r-m) 0 0;
}
/* El cuerpo respira adentro de la caja. */
.rubro>.tabla-envoltorio,
.rubro>.ayuda,
.rubro>.boton {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}
.rubro>.tabla-envoltorio {
  margin-top: 1rem;
}
.rubro>.boton {
  margin-bottom: 1.1rem;
}
.rubro__cabecera::-webkit-details-marker {
  display: none;
}
/* Plegado, el rubro tiene que seguir contando qué hay adentro: sin el conteo,
   una lista escondida es una lista olvidada. */
.rubro__cuenta {
  font-size: var(--fs-2);
  color: var(--grafito);
}
.rubro__total {
  margin-left: auto;
}
.rubro__flecha {
  width: .5rem;
  height: .5rem;
  flex-shrink: 0;
  border-right: 2px solid var(--grafito);
  border-bottom: 2px solid var(--grafito);
  transform: rotate(45deg);
  margin-bottom: .18rem;
  transition: transform var(--paso);
}
.rubro[open] .rubro__flecha {
  transform: rotate(-135deg);
  margin-bottom: -.1rem;
}
/* =============================================================================
   Zona de riesgo · lo que borra todo
   ============================================================================= */
.zona-riesgo {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 2.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borde);
}
.boton--peligro {
  color: var(--rojo);
  border-color: rgba(179,59,49,.35);
}
.boton--peligro:hover {
  background: var(--rojo-t);
  border-color: var(--rojo);
}
.rubro__titulo {
  font-family: var(--texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
  color: var(--ac);
  background: var(--ac-t);
  padding: .38rem .9rem;
  border-radius: var(--pastilla);
}
.rubro__total {
  font-family: var(--titulo);
  font-size: var(--fs-6);
  font-weight: 700;
  letter-spacing: -0.014em;
}
/* =============================================================================
   Derechos e impuestos
   ============================================================================= */
.entidad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 8rem;
  gap: .5rem 1.2rem;
  align-items: start;
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: 1rem 1.15rem;
  margin-bottom: .6rem;
  transition: border-color var(--paso), box-shadow var(--paso), background var(--paso);
}
.entidad:has(input[type="checkbox"]:checked) {
  border-color: var(--ui-accent-border);
  background: var(--ui-surface);
  box-shadow: var(--sombra-1);
}
.entidad__interruptor {
  display: flex;
  align-items: center;
  padding-top: .1rem;
}
.entidad__interruptor input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--acento);
  cursor: pointer;
}
.entidad__titulo {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex-wrap: wrap;
}
/* Es un <label> del interruptor: hay que sacarle el estilo de etiqueta. */
.entidad__nombre {
  font-weight: 650;
  font-size: var(--fs-5);
  margin: 0;
  cursor: pointer;
  color: var(--tinta);
}
.entidad__ayuda {
  font-size: var(--fs-3);
  color: var(--grafito);
  margin: .22rem 0 0;
}
.entidad__alicuota {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.entidad__alicuota label {
  font-size: var(--fs-1);
  color: var(--grafito);
  font-weight: 500;
}
/* Una entidad sin marcar se ve apagada con un gris que sigue siendo legible
   (5,2:1 sobre blanco). Antes era opacity sobre toda la tarjeta: los textos
   caían a 2,7:1 y el botón de ayuda, que sigue activo, parecía deshabilitado. */
.entidad--apagada .entidad__nombre,
.entidad--apagada .entidad__ayuda,
.entidad--apagada .entidad__ayuda span,
.entidad--apagada .entidad__alicuota label,
.entidad--apagada .entidad__alicuota input {
  color: #5f6f78;
}
.entidad--apagada .entidad__nombre {
  font-weight: 500;
}
/* =============================================================================
   Minipaneles
   ============================================================================= */
.minipanel {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.7rem 0 0;
  padding: 0;
}
.minipanel div {
  display: flex;
  flex-direction: column;
  flex: 1 1 9rem;
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: .85rem 1rem;
  box-shadow: var(--sombra-1);
}
.minipanel dt {
  color: var(--grafito);
  font-weight: 500;
}
.minipanel dd {
  margin: .25rem 0 0;
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* =============================================================================
   Botones
   ============================================================================= */
/* Sirve para `button` y para `a`. Lo segundo no era así: la clase se escribió
   pensando sólo en botones y a los enlaces les quedaba el subrayado del
   navegador, que en una pastilla se ve como un error. */
.boton {
  font-family: var(--texto);
  font-weight: 600;
  padding: .65rem 1.25rem;
  cursor: pointer;
  border: 1px solid var(--borde-fuerte);
  background: var(--nieve);
  color: var(--tinta);
  display: inline-block;
  text-decoration: none;
  text-align: center;
  /* Curva propia: acelera poco y frena mucho. `ease` a secas hace que el botón
     parezca lento al empezar; ésta se siente inmediata. */
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .18s var(--curva), box-shadow .22s var(--curva);
}
/* --- Respuesta al presionar ------------------------------------------------
   No había NINGUNA: se hacía clic y el botón no acusaba recibo hasta que la
   pantalla cambiaba. En un formulario largo, donde cada botón dispara un
   recálculo, esa fracción de segundo sin respuesta se siente como que no
   registró y lleva a tocar dos veces.

   Se aplica a todo lo tocable de una sola vez y no botón por botón: escrito
   por separado, el próximo que se agregue nace sin ella.

   `translateY(1px)` y no `scale()`: escalar un botón con borde le corre el
   filete medio píxel y se ve borroso mientras dura el toque. */
.boton:active,
button:active,
.paso-item:active,
.cortas__grilla a:active,
.hero__atajo:active {
  transform: translateY(1px);
}
/* Al apretar baja: sin esto el botón se siente una lámina, no algo físico. */
.boton:active {
  transform: translateY(1px);
}
.boton--borde:hover {
  border-color: var(--tinta);
  background: var(--lienzo);
}
.boton--solido {
  box-shadow: var(--sombra-1);
}
.boton--solido:hover {
  border-color: #12465a;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(1,35,47,.16);
}
.boton--solido:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(1,35,47,.16);
}
.boton--texto {
  font-size: var(--fs-3);
  padding: .45rem .9rem;
  color: var(--grafito);
}
.boton--texto:hover {
  color: var(--tinta);
  border-color: var(--borde-fuerte);
  background: var(--lienzo);
}
.boton[disabled] {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}
.boton--descarga {
  font-size: var(--fs-5);
  font-weight: 600;
  padding: 1rem 2rem;
  width: 100%;
  box-shadow: none;
}
.boton--descarga:hover {
  border-color: #12465a;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(1,35,47,.16);
}
.navegacion {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.navegacion[hidden] {
  display: none;
}
.descarga {
  margin-top: 2.2rem;
}
.boton--pdf {
  width: 100%;
  margin-top: 1.4rem;
  padding: .85rem 2rem;
  font-size: var(--fs-5);
}
/* =============================================================================
   Resumen final
   ============================================================================= */
/* Los cuatro bloques del resumen se pliegan, igual que los rubros del paso 4:
   los cuatro abiertos son una pared de renglones al final del recorrido. Cerrado,
   cada uno sigue mostrando su cifra, así que plegar aliviana sin esconder. */
.resumen-bloque {
  margin-bottom: .7rem;
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
  transition: border-color var(--paso), box-shadow var(--paso);
}
.resumen-bloque:hover {
  border-color: var(--borde-fuerte);
}
.resumen-bloque[open] {
  box-shadow: var(--sombra-2);
  margin-bottom: 1.3rem;
}
.resumen-bloque__cabecera {
  display: flex;
  padding: 1rem 1.4rem;
  cursor: pointer;
  list-style: none;
}
.resumen-bloque__cabecera::-webkit-details-marker {
  display: none;
}
.resumen-bloque[open] .resumen-bloque__cabecera {
  border-bottom: 1px solid var(--borde);
}
.resumen-bloque h4 {
  font-family: var(--texto);
  font-size: var(--fs-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grafito);
  margin: 0;
}
.resumen-bloque__cifra {
  margin-left: auto;
  font-family: var(--titulo);
  font-size: var(--fs-5);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--tinta);
}
.resumen-bloque__flecha {
  width: .5rem;
  height: .5rem;
  flex-shrink: 0;
  border-right: 2px solid var(--grafito);
  border-bottom: 2px solid var(--grafito);
  transform: rotate(45deg);
  margin-bottom: .18rem;
  transition: transform var(--paso);
}
.resumen-bloque[open] .resumen-bloque__flecha {
  transform: rotate(-135deg);
  margin-bottom: -.1rem;
}
.resumen-bloque__cuerpo {
  margin: 0;
  padding: 1.1rem 1.4rem;
}
.resumen-bloque__cuerpo+.resumen-bloque__cuerpo {
  padding-top: 0;
}
.linea {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-top: 1px solid var(--borde);
  font-size: var(--fs-4);
  color: var(--grafito);
}
.linea:nth-of-type(1) {
  border-top: none;
}
.linea dd {
  color: var(--tinta);
  font-weight: 600;
}
.linea--fuerte dt,
.linea--fuerte dd {
  font-weight: 700;
  color: var(--tinta);
}
.linea--clave {
  border-top: 1px solid var(--borde);
  margin-top: .5rem;
  padding-top: .9rem;
  align-items: baseline;
}
.linea--clave dt {
  font-weight: 700;
  color: var(--tinta);
}
.linea--clave dd {
  font-family: var(--titulo);
  font-size: var(--fs-8);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--acento);
}
.linea dt,
.linea dd {
  margin: 0;
}
/* =============================================================================
   Panel
   ============================================================================= */
.panel {
  position: sticky;
  overflow: hidden;
}
.panel[hidden] {
  display: none;
}
.panel__titulo {
  font-family: var(--texto);
  font-size: var(--fs-2);
  font-weight: 700;
  margin: 0;
}
.panel__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  border-bottom: 1px solid var(--borde);
}
.panel__etiqueta {
  color: var(--grafito);
  font-weight: 500;
}
.panel__valor {
  white-space: nowrap;
  font-weight: 600;
}
/* El resultado vive en su propio bloque tintado, que cambia de color según
   el signo. Cada tono fuerte se lee sobre su propio tinte. */
.panel__fila--resultado {
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  border-bottom: none;
  transition: background var(--paso);
}
.panel__fila--resultado .panel__etiqueta {
  font-weight: 600;
}
.panel__fila--resultado .panel__valor {
  font-family: var(--titulo);
  font-size: var(--fs-9);
  font-weight: 700;
  line-height: 1.02;
}
.panel__fila--resultado.es-positivo {
  background: var(--verde-t);
}
.panel__fila--resultado.es-positivo .panel__valor {
  color: var(--verde);
}
.panel__fila--resultado.es-negativo {
  background: var(--rojo-t);
}
.panel__fila--resultado.es-negativo .panel__valor {
  color: var(--rojo);
}
.panel__fila--resultado.es-neutro .panel__valor {
  color: var(--tinta);
}
.panel__fila--equilibrio {
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  border-radius: var(--r-m);
  background: var(--acento-t);
}
.panel__fila--equilibrio .panel__etiqueta {
  color: var(--acento);
  font-weight: 600;
}
.panel__fila--equilibrio .panel__valor {
  font-family: var(--titulo);
  font-size: var(--fs-8);
  font-weight: 700;
  color: var(--acento);
}
.panel__nota {
  color: var(--grafito);
  margin: .9rem 0 0;
}
/* =============================================================================
   Reparto de egresos · en qué se va la plata, de mayor a menor
   -----------------------------------------------------------------------------
   El mismo componente en la previsualización y en el resumen del cierre: es el
   mismo dato y no hay motivo para que se vea de dos maneras distintas.

   El orden es por monto, no por catálogo, porque lo primero que uno quiere
   saber de un presupuesto es adónde se va la plata. Por eso el color sale de
   `--ac`, que lo pone la clase `rubro-color--<id>` de cada fila.
   ============================================================================= */
.reparto {
  margin: 0 0 1.1rem;
}
.reparto__fila {
  margin-bottom: .9rem;
}
.reparto__fila:last-child {
  margin-bottom: 0;
}
.reparto__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--fs-4);
}
.reparto__nombre {
  color: var(--tinta);
  font-weight: 600;
}
.reparto__monto {
  color: var(--tinta);
  font-weight: 700;
  white-space: nowrap;
}
.reparto__barra {
  height: 6px;
  background: var(--lienzo);
  border-radius: var(--pastilla);
  margin: .35rem 0 .2rem;
  overflow: hidden;
}
.reparto__barra span {
  display: block;
  height: 100%;
  background: var(--ac);
  border-radius: var(--pastilla);
  transition: width var(--paso);
}
.reparto__pct {
  font-size: var(--fs-2);
  color: var(--grafito);
}
/* Un rubro en cero se muestra igual —que no haya nada cargado también es un
   dato— pero apagado, para que no compita con los que sí tienen plata. */
.reparto__fila--vacio .reparto__nombre,
.reparto__fila--vacio .reparto__monto {
  color: var(--grafito);
  font-weight: 500;
}
/* =============================================================================
   Previsualización · el desglose completo, a todo el ancho, debajo del form
   ============================================================================= */
.previs {
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}
.previs[hidden] {
  display: none;
}
.previs__caja {
  background: var(--nieve);
  border-radius: var(--r-l);
  overflow: hidden;
}
.previs__cabecera {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  padding: 1.15rem 1.5rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--paso);
}
.previs__cabecera::-webkit-details-marker {
  display: none;
}
.previs__cabecera:hover {
  background: var(--lienzo);
}
.previs__caja[open] .previs__cabecera {
  border-bottom: 1px solid var(--borde);
}
.previs__marca {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-t);
  padding: .3rem .75rem;
  border-radius: var(--pastilla);
}
.previs__titulo {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  flex: 1 1 auto;
}
/* Chevron dibujado con bordes: gira al abrir. */
.previs__flecha {
  width: .6rem;
  height: .6rem;
  flex-shrink: 0;
  border-right: 2px solid var(--grafito);
  border-bottom: 2px solid var(--grafito);
  transform: rotate(45deg);
  transition: transform var(--paso);
}
.previs__caja[open] .previs__flecha {
  transform: rotate(-135deg);
}
.previs__grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--borde);
}
.previs__caja-int {
  background: var(--nieve);
  padding: 1.3rem 1.5rem;
}
/* Son cinco cajas en una grilla de tres: si el punto de equilibrio ocupara el
   ancho entero, Resultado quedaría solo en su fila con dos celdas vacías al
   lado. Ocupando dos columnas, la segunda fila cierra justo. */
.previs__caja-int--ancha {
  grid-column: span 2;
}
.previs__caja-titulo {
  font-family: var(--texto);
  font-size: var(--fs-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grafito);
  margin: 0 0 1rem;
}
.previs__lista {
  margin: 0;
}
.previs__lista--columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 2rem;
  margin-bottom: 1.4rem;
}
.previs__linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .42rem 0;
  border-top: 1px solid var(--borde);
  font-size: var(--fs-4);
  color: var(--grafito);
}
.previs__linea:first-child {
  border-top: none;
}
.previs__lista--columnas .previs__linea:nth-child(-n+2) {
  border-top: none;
}
.previs__linea dt,
.previs__linea dd {
  margin: 0;
}
.previs__linea dd {
  color: var(--tinta);
  font-weight: 600;
  white-space: nowrap;
}
.previs__linea--total dt {
  color: var(--tinta);
  font-weight: 700;
}
.previs__linea--total dd {
  font-weight: 700;
}
.previs__linea--vacia dt {
  font-style: italic;
}
/* --- Rubros con barra de proporción --------------------------------------- */
/* Las barras por rubro viven en su propio componente, `.reparto`, más abajo:
   son el mismo dato en la previsualización y en el resumen del cierre. */
/* --- Resultado ------------------------------------------------------------- */
.previs__cifra {
  font-family: var(--titulo);
  font-size: var(--fs-9);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 1rem;
}
.previs__caja-int--resultado.es-positivo .previs__cifra {
  color: var(--verde);
}
.previs__caja-int--resultado.es-negativo .previs__cifra {
  color: var(--rojo);
}
.previs__caja-int--resultado.es-neutro .previs__cifra {
  color: var(--tinta);
}
/* --- Tabla de escenarios ---------------------------------------------------- */
.previs__tabla {
  overflow-x: auto;
}
.previs__tabla table {
  min-width: 30rem;
  font-size: var(--fs-4);
}
.previs__tabla caption {
  text-align: left;
  font-size: var(--fs-2);
  color: var(--grafito);
  margin-bottom: .6rem;
}
.previs__tabla th {
  background: transparent;
  border-bottom: 1px solid var(--borde);
  font-size: var(--fs-1);
  padding: .5rem .6rem;
}
.previs__tabla thead th {
  color: var(--grafito);
}
.previs__tabla tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--tinta);
  border-bottom: none;
  border-top: 1px solid var(--borde);
}
.previs__tabla td {
  border-top: 1px solid var(--borde);
  padding: .5rem .6rem;
  font-weight: 600;
  color: var(--tinta);
}
.previs__tabla tbody tr:hover {
  background: var(--lienzo);
}
.previs__negativo {
  color: var(--rojo);
}
@media (max-width: 900px) {
  .previs {
    padding: 0 1.25rem;
    margin-bottom: 2rem;
  }
  .previs__grilla {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Sin esto, el "span 2" inventaría una segunda columna en la grilla de una. */
  .previs__caja-int--ancha {
    grid-column: auto;
  }
  .previs__cabecera {
    padding: 1rem 1.25rem;
  }
  .previs__caja-int {
    padding: 1.15rem 1.25rem;
  }
  .previs__titulo {
    flex: 1 1 100%;
    order: 3;
  }
}
/* =============================================================================
   ¿Conviene hacerlo? · el veredicto y su reverso, la salud
   ============================================================================= */
.conviene {
  margin: 2.4rem 0;
}
.conviene__caja {
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
  padding: 1.5rem;
}
.conviene__veredicto {
  font-family: var(--titulo);
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.conviene__veredicto.es-positivo {
  color: var(--verde);
}
.conviene__veredicto.es-negativo {
  color: var(--rojo);
}
.conviene__veredicto.es-neutro {
  color: var(--tinta);
}
.conviene__detalle {
  color: var(--grafito);
  max-width: 60ch;
  margin-bottom: 1.3rem;
}
.conviene__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0 0 1.3rem;
}
.conviene__cifras div {
  flex: 1 1 10rem;
  background: var(--lienzo);
  border-radius: var(--r-m);
  padding: .8rem 1rem;
}
.conviene__cifras dt {
  font-size: var(--fs-2);
  color: var(--grafito);
  font-weight: 500;
}
.conviene__cifras dd {
  margin: .2rem 0 0;
  font-family: var(--titulo);
  font-size: var(--fs-7);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.salud {
  border-top: 1px solid var(--borde);
  padding-top: 1rem;
}
.salud__cabecera {
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  list-style: none;
  /* Envuelve y se deja achicar. Sin `min-width: 0` un hijo flex nunca baja del
     ancho de su contenido, y los tres elementos juntos se pasaban por dos
     píxeles en 375. */
  flex-wrap: wrap;
  min-width: 0;
}
.salud {
  min-width: 0;
}
.salud__cabecera::-webkit-details-marker {
  display: none;
}
.salud__marca {
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: .05em;
  padding: .3rem .75rem;
  border-radius: var(--pastilla);
}
.riesgo--bajo {
  background: var(--verde-t);
  color: var(--verde);
}
.riesgo--medio {
  background: var(--ambar-t);
  color: var(--ambar);
}
.riesgo--alto {
  background: var(--rojo-t);
  color: var(--rojo);
}
.salud__texto {
  font-size: var(--fs-4);
  color: var(--grafito);
  flex: 1 1 auto;
  min-width: 0;
}
/* En angosto el texto se lleva un renglón entero y la flecha sube con la
   pastilla. Los tres en fila piden 435 px y hay 293: dejando que envuelvan sin
   decirles cómo, el texto y la flecha terminaban compartiendo renglón y se
   pasaban por dos píxeles. */
@media (max-width: 640px) {
  .salud__texto {
    flex: 1 1 100%;
    order: 3;
  }
  /* Los 3 px de margen no son un ajuste al ojo: la flecha es un cuadrado
     rotado 45°, y un cuadrado rotado pinta una caja más ancha que la que
     ocupa en el layout. Pegada al borde derecho, esos píxeles de más se
     salían del contenedor y desbordaban la cabecera por dos. */
  .salud .pista__flecha {
    margin-left: auto;
    margin-right: 3px;
  }
}
.salud[open] .pista__flecha {
  transform: rotate(-135deg);
}
.salud .pista__flecha {
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--grafito);
  border-bottom: 2px solid var(--grafito);
  transform: rotate(45deg);
  transition: transform var(--paso);
}
.salud__cuerpo {
  padding-top: 1.1rem;
}
.salud__barra {
  height: 8px;
  background: var(--lienzo);
  border-radius: var(--pastilla);
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.salud__barra span {
  display: block;
  height: 100%;
  border-radius: var(--pastilla);
  transition: width var(--paso);
}
.salud__barra .riesgo--bajo {
  background: var(--verde);
}
.salud__barra .riesgo--medio {
  background: var(--ambar);
}
.salud__barra .riesgo--alto {
  background: var(--rojo);
}
.salud__lista {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.salud__item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .55rem 0;
  border-top: 1px solid var(--borde);
  font-size: var(--fs-4);
}
.salud__item:first-child {
  border-top: none;
}
.salud__marca-item {
  font-size: var(--fs-1);
  font-weight: 700;
  flex-shrink: 0;
  padding: .18rem .5rem;
  border-radius: var(--pastilla);
}
.salud__item.cumple .salud__marca-item {
  background: var(--verde-t);
  color: var(--verde);
}
.salud__item.no-cumple .salud__marca-item {
  background: var(--rojo-t);
  color: var(--rojo);
}
.salud__que {
  display: block;
  color: var(--tinta);
}
.salud__cuanto {
  display: block;
  font-size: var(--fs-3);
  color: var(--grafito);
}
/* =============================================================================
   ¿Qué pasa si…? · la simulación
   ============================================================================= */
.simular {
  margin: 2.6rem 0;
}
.simular__ocupacion {
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.2rem;
}
.simular__ocupacion label {
  display: block;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--tinta);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: .7rem;
}
.simular__ocupacion output {
  font-family: var(--titulo);
  font-size: var(--fs-6);
  font-weight: 700;
  color: var(--acento);
}
.simular__ocupacion .minipanel {
  margin-top: 1.1rem;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--acento);
  height: 1.5rem;
  cursor: pointer;
}
.simular__palancas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: 1.3rem;
}
.palanca {
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: .8rem 1rem;
  transition: border-color var(--paso), background var(--paso);
}
.palanca--movida {
  border-color: var(--ui-accent-border);
  background: var(--ui-hover);
}
.palanca__cabecera {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-bottom: .3rem;
}
.palanca__nombre {
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--tinta);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.palanca__valor {
  margin-left: auto;
  font-weight: 700;
  font-size: var(--fs-4);
  color: var(--grafito);
  font-variant-numeric: tabular-nums;
}
.palanca--movida .palanca__valor {
  color: var(--acento);
}
.simular__resultado {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.2rem;
}
.simular__etiqueta {
  display: block;
  font-size: var(--fs-2);
  color: var(--grafito);
  font-weight: 500;
}
.simular__cifra-chica {
  font-family: var(--titulo);
  font-size: var(--fs-7);
  font-weight: 700;
  color: var(--grafito);
  letter-spacing: -0.02em;
}
.simular__flecha {
  font-size: var(--fs-7);
  color: var(--grafito);
}
.simular__despues {
  flex: 1 1 12rem;
}
.simular__cifra {
  display: block;
  font-family: var(--titulo);
  font-size: var(--fs-9);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.05;
}
.simular__despues.es-positivo .simular__cifra {
  color: var(--verde);
}
.simular__despues.es-negativo .simular__cifra {
  color: var(--rojo);
}
.simular__despues.es-neutro .simular__cifra {
  color: var(--tinta);
}
.simular__delta {
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--grafito);
}
.simular__acciones {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.simular table caption {
  text-align: left;
  font-size: var(--fs-2);
  color: var(--grafito);
  padding: .7rem .6rem 0;
  caption-side: top;
}
.simular td.es-positivo {
  color: var(--verde);
  font-weight: 600;
}
.simular td.es-negativo {
  color: var(--rojo);
  font-weight: 600;
}
@media (max-width: 640px) {
  .simular__palancas {
    grid-template-columns: minmax(0, 1fr);
  }
  .simular__flecha {
    display: none;
  }
}
/* =============================================================================
   Calculadoras cortas · /precio-de-entrada y hermanas
   -----------------------------------------------------------------------------
   Una sola columna, el número grande arriba y la explicación abajo. Son puertas
   de entrada al mismo motor, así que comparten el sistema visual del resto.
   ============================================================================= */
.corta__cuerpo {
  margin: 0 auto;
}
.corta__hero {
  margin-bottom: 2rem;
}
.corta__hero h1 {
  font-family: var(--titulo);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
}
/* 58ch y no 42: a 42 la bajada quedaba en 445 px debajo de un título de 688 y
   se leía como una columna aparte, más angosta que todo lo que la rodea. */
.corta__bajada {
  color: var(--grafito);
}
.corta__caja {
  background: var(--nieve);
  padding: 1.6rem;
  margin-bottom: 1.2rem;
}
.corta__campos .campos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}
.unidad {
  color: var(--grafito);
  font-weight: 400;
}
.corta__salida {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
}
.corta__etiqueta {
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .2rem;
}
/* La cifra es la firma de estas páginas: el número manda. */
.cifra {
  font-family: var(--titulo);
  font-size: clamp(2.6rem, 9vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1;
  margin: 0 0 .5rem;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.cifra.es-positivo {
  color: var(--verde);
}
.cifra.es-negativo {
  color: var(--rojo);
}
.cifra.es-neutro {
  color: var(--tinta);
}
.corta__tabla {
  margin-bottom: 1.2rem;
}
.corta__tabla h2 {
  font-family: var(--texto);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grafito);
  margin: 0 0 .7rem;
}
.corta__tabla table {
  min-width: 0;
}
.corta__tabla tr.es-minimo {
  background: var(--acento-t);
}
.corta__tabla tr.es-minimo th {
  color: var(--acento);
  font-weight: 700;
}
.corta__tabla td.es-positivo {
  color: var(--verde);
  font-weight: 600;
}
.corta__tabla td.es-negativo {
  color: var(--rojo);
  font-weight: 600;
}
.corta__tabla th {
  background: transparent;
  color: var(--grafito);
}
.corta__tabla tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--tinta);
}
.corta__cta {
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
}
.corta__cta p {
  max-width: 48ch;
}
.corta__cta .boton {
  width: auto;
}
.corta__prosa {
  color: var(--grafito);
}
.corta__prosa h2 {
  font-family: var(--titulo);
  font-weight: 700;
  color: var(--tinta);
  margin: 2.2rem 0 .7rem;
}
.corta__prosa p {
  max-width: 62ch;
}
.corta__prosa strong,
.corta__prosa em {
  color: var(--tinta);
}
/* =============================================================================
   Preguntas plegables
   -----------------------------------------------------------------------------
   `<details>` y no un acordeón hecho a mano: el navegador ya sabe abrirlo con
   teclado, anunciarlo a un lector de pantalla y encontrar el texto con Ctrl+F
   aunque esté cerrado. Un acordeón con JavaScript pierde las tres cosas.

   Van todas cerradas: así se ve la lista completa de un vistazo, que es para
   lo que sirve una sección de preguntas.
   ============================================================================= */
.faq {
  max-width: 46rem;
}
.faq__item {
  border-bottom: 1px solid var(--borde);
}
.faq__item:first-child {
  border-top: 1px solid var(--borde);
}
.faq__item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-5);
  color: var(--tinta);
  transition: color var(--paso);
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary:hover {
  color: var(--acento);
}
/* El signo de abrir: dos trazos que se cruzan y, al abrirse, se vuelven uno. */
.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  margin-left: auto;
  width: .7rem;
  height: .7rem;
  background: linear-gradient(var(--acento), var(--acento)) center/100% 2px no-repeat,
    linear-gradient(var(--acento), var(--acento)) center/2px 100% no-repeat;
  transition: transform var(--paso), background-size var(--paso);
}
.faq__item[open] summary::after {
  transform: rotate(180deg);
  background-size: 100% 2px, 0 100%;
}
.faq__respuesta {
  padding: 0 2rem 1.2rem 0;
}
/* `pretty` evita el renglón huérfano: sin esto, una respuesta terminaba con el
   punto final solo en la última línea. */
.faq__respuesta p {
  margin: 0;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--grafito);
  text-wrap: pretty;
  max-width: 58ch;
}
.faq__respuesta strong {
  color: var(--tinta);
  font-weight: 600;
}
@media (max-width: 640px) {
  .corta__campos .campos {
    grid-template-columns: minmax(0, 1fr);
  }
  .corta__caja {
    padding: 1.2rem;
  }
}
/* =============================================================================
   Pie
   ============================================================================= */
.pie {
  margin-top: 2.5rem;
}
.pie__interior {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2.5rem;
}
/* Tope de medida: el aviso legal es largo y sin esto el renglón llegaba a 140
   caracteres. Arriba de 75 el ojo pierde el salto de línea. Ojo con la unidad:
   `ch` mide el ancho del cero, más ancho que la letra promedio, así que 54ch
   dan unos 68 caracteres reales, no 54. */
.pie__nota {
  margin: 0;
  color: var(--grafito);
  flex: 1 1 30rem;
}
.pie__firma {
  flex: 0 1 auto;
  text-align: right;
}
.guardado {
  text-align: center;
  margin: 1rem auto 0;
  max-width: 60ch;
}
.pie__volver {
  margin: 0 0 .5rem;
}
.pie__volver a {
  color: var(--acento);
  font-weight: 600;
  font-size: var(--fs-4);
  text-decoration: none;
}
.pie__volver a:hover {
  text-decoration: underline;
}
.pie__credito {
  margin: 0 0 .6rem;
  color: var(--grafito);
}
.pie__apoyo {
  margin: 0;
  font-size: var(--fs-3);
  color: var(--grafito);
}
.pie__apoyo[hidden] {
  display: none;
}
.boton--cafecito {
  display: inline-block;
  text-decoration: none;
  margin-left: .5rem;
  font-size: var(--fs-3);
  padding: .45rem 1rem;
}
/* =============================================================================
   Pantallas angostas
   ============================================================================= */
@media (max-width: 900px) {
  .lateral {
    order: -1;
  }
  .campos {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel {
    border-top: 1px solid var(--borde);
  }
  .panel__cuerpo {
    align-items: stretch;
    max-width: var(--medida);
    margin: 0 auto;
  }
  .panel__fila--resultado,
  .panel__fila--equilibrio {
    flex: 1 1 auto;
    justify-content: center;
  }
  .panel__fila--equilibrio {
    flex: 0 1 auto;
    text-align: right;
  }
  /* La columna de 190 px no entra al lado de un formulario en un teléfono, así
     que vuelve a ser una tira horizontal pegada arriba. Se muestra el nombre
     del paso activo y nada más: esa pastilla se estira y las otras cinco
     quedan de número, que es lo único que entra a lo ancho. */
  .lateral {
    top: 3.4rem;
    z-index: 9;
  }
  .lateral__caja {
    border-radius: 0;
  }
  .paso-li {
    flex: 0 1 auto;
  }
  .paso-li--activo {
    flex: 1 1 auto;
  }
  .paso-item__nombre {
    display: none;
  }
  /* En pantalla angosta los botones van arriba y las pastillas debajo, a lo
     ancho: en una sola fila no entran y empujaban la página a scrollear. */
  h2 {
    font-size: var(--fs-8);
  }
  .entidad {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .entidad__alicuota {
    grid-column: 2;
    max-width: 8rem;
  }
  .pie {
    margin-bottom: 4.5rem;
  }
}
/* =============================================================================
   Tablas apiladas · sólo en pantalla angosta
   -----------------------------------------------------------------------------
   Hasta acá las tablas scrolleaban de costado adentro de su caja. Con cuatro
   columnas y una lista larga de conceptos eso significa no ver nunca la fila
   entera: cargás el costo sin ver de qué concepto era. Abajo de 640 px cada
   fila pasa a ser una tarjeta y cada celda un renglón con su etiqueta, que
   sale del `data-col` que pone ui.js.
   ============================================================================= */
@media (max-width: 640px) {
  .tabla-envoltorio {
    overflow-x: visible;
    background: none;
    border: none;
    box-shadow: none;
  }
  .tabla-envoltorio table {
    min-width: 0;
  }
  .tabla-envoltorio thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tabla-envoltorio tr {
    display: block;
    margin-bottom: .9rem;
    background: var(--nieve);
    border: 1px solid var(--borde);
    border-radius: var(--r-m);
    padding: .5rem .8rem;
    box-shadow: var(--sombra-1);
  }
  .tabla-envoltorio tbody tr:hover {
    background: var(--nieve);
  }
  .tabla-envoltorio td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: none;
    border-bottom: 1px solid var(--borde);
    padding: .5rem 0;
    min-width: 0;
    text-align: left;
  }
  .tabla-envoltorio td:last-child {
    border-bottom: none;
  }
  /* El concepto va con la etiqueta arriba y el campo a todo el ancho: al lado
     de la etiqueta le quedaba media fila y los conceptos largos no se leían. */
  .tabla-envoltorio td:first-child {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
  }
  .tabla-envoltorio td:first-child input {
    max-width: 100%;
  }
  /* La etiqueta de la columna, que en ancho vive en el `thead`. */
  .tabla-envoltorio td::before {
    content: attr(data-col);
    font-size: var(--fs-2);
    font-weight: 600;
    color: var(--grafito);
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .tabla-envoltorio td:not([data-col])::before {
    content: none;
  }
  /* El campo ocupa lo que sobra, sin achicarse a nada. */
  .tabla-envoltorio td input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60%;
  }
  .tabla-envoltorio td.num {
    justify-content: space-between;
  }
  .tabla-envoltorio td.celda-calculada {
    font-weight: 700;
  }
  /* `width: 1%` mantiene angosta la columna del botón en la tabla ancha; acá
     la fila ya no es una tabla y ese 1 % la dejaba en tres píxeles, con el
     botón desbordando por la izquierda. */
  .tabla-envoltorio td.col-borrar {
    width: auto;
    justify-content: flex-end;
    padding-top: .6rem;
  }
}
@media (max-width: 420px) {
  .envoltorio,
  .pasos,
  .panel__cuerpo,
  .pie p {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* La tira oscura va de borde a borde, así que su margen negativo tiene que
     valer exactamente lo que mide el margen interno del envoltorio. Si no,
     sobresale y le mete scroll a la página. */
  .lateral {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .navegacion .boton {
    flex: 1;
    padding: .7rem .5rem;
  }
}
/* =============================================================================
   Impresión · lo que sale cuando se elige "Guardar como PDF"
   -----------------------------------------------------------------------------
   Se imprime el resumen del paso 6 y la previsualización completa, sin la
   cáscara de la aplicación: nada de cabecera, pasos, botones ni campos.
   ============================================================================= */
@media print {
  @page { margin: 14mm 12mm; }
  body {
    line-height: 1.4;
  }
  /* Fuera todo lo que es interfaz y no contenido. */
  .navegacion,
  .descarga,
  .pie__firma,
  .alertas,
  .guardado,
  .zona-riesgo,
  .panel,
  .paso__bajada,
  .aviso,
  .aviso--accion,
  .boton,
  .boton-borrar,
  .minipanel,
  .col-borrar,
  .previs__cabecera {
    display: none !important;
  }
  /* De los seis pasos, sólo el resumen del cierre. */
  .paso {
    display: none !important;
  }
  .paso[data-paso="6"] {
    display: block !important;
  }
  .paso[data-paso="6"] .campos {
    display: none !important;
  }
  .envoltorio {
    max-width: none;
    margin: 0;
  }
  .previs {
    padding: 0;
    margin: 1.2rem 0 0;
  }
  .previs__caja {
    border-radius: 0;
  }
  .previs__caja[open] .previs__cabecera {
    border: none;
  }
  /* La grilla en una columna y sin fondos: en papel el gris no aporta. */
  .previs__grilla {
    display: block;
    background: none;
  }
  .previs__caja-int {
    padding: 0;
    margin-bottom: 10mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .resumen-bloque {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 8mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .resumen-bloque h4,
  .previs__caja-titulo {
    background: none !important;
    padding: 0 0 2mm;
    border-bottom: 1pt solid #000;
    display: block;
    border-radius: 0;
    margin-bottom: 3mm;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .linea,
  .previs__linea {
    border-color: #bbb;
    color: #000;
  }
  .linea dd,
  .previs__linea dd {
    color: #000;
  }
  /* Las barras de proporción se imprimen huecas; el porcentaje ya está escrito. */
  /* En papel la barra no imprime el fondo de color y quedaría un renglón gris
     sin significado: el porcentaje escrito al lado dice lo mismo. */
  .reparto__barra {
    display: none;
  }
  .previs__tabla table {
    min-width: 0;
  }
  .previs__tabla th,
  .previs__tabla td {
    padding: 1.5mm 2mm;
  }
  a[href^="http"]::after {
    content: "";
  }
  /* sin URLs impresas al lado */
}
/* =============================================================================
   Caja de herramientas · la checklist
   -----------------------------------------------------------------------------
   Vive en la misma cáscara que las calculadoras cortas (`body.corta`), así que
   hereda su ancho y su tipografía. Acá va sólo lo propio.
   ============================================================================= */
.caja {
  margin-bottom: 2.4rem;
}
.plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .7rem;
  margin-bottom: 1.6rem;
}
.plantilla {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-align: left;
  background: var(--nieve);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: .9rem 1rem;
  cursor: pointer;
  font-family: var(--texto);
  color: var(--tinta);
  transition: border-color var(--paso), box-shadow var(--paso),
              transform .2s cubic-bezier(.22,.68,.35,1), background var(--paso);
}
.plantilla:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-2px);
}
.plantilla__nombre {
  font-weight: 600;
  font-size: var(--fs-4);
}
.plantilla__resumen {
  font-size: var(--fs-2);
  color: var(--grafito);
  line-height: 1.35;
}
.plantilla--activa {
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: var(--sombra-1);
}
.plantilla--activa .plantilla__nombre {
  color: #fff;
}
.plantilla--activa .plantilla__resumen {
  color: rgba(255,255,255,.78);
}
/* --- El avance ------------------------------------------------------------ */
.avance {
  border: 1px solid var(--borde);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--sombra-1);
}
.avance__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}
.avance__etiqueta {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.avance__cifra {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -0.014em;
}
.avance__barra {
  height: 8px;
  border-radius: var(--pastilla);
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.avance__barra span {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: var(--pastilla);
  transition: width var(--paso);
}
.avance__acciones {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  align-items: center;
}
/* --- Las tres fases -------------------------------------------------------- */
.fase {
  margin-bottom: 2.4rem;
}
.fase__titulo {
  font-family: var(--titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin: 0 0 .2rem;
}
.fase__pie {
  color: var(--grafito);
  margin: 0 0 1.1rem;
  max-width: 54ch;
}
.tarea-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tarea-lista li {
  border-bottom: 1px solid var(--borde);
}
.tarea-lista li:first-child {
  border-top: 1px solid var(--borde);
}
/* La fila entera es la etiqueta: se puede tocar en cualquier parte, que en un
   teléfono importa mucho más que acertarle al cuadradito. */
.tarea {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .8rem .2rem;
  cursor: pointer;
  transition: background var(--paso);
}
.tarea:hover {
  background: var(--nieve);
}
.tarea__casilla {
  flex-shrink: 0;
  margin: .1rem 0 0;
  accent-color: var(--acento);
}
.tarea__texto {
  color: var(--tinta);
}
/* Tachado y apagado, pero legible: sirve para saber qué ya hiciste. */
.tarea--hecha .tarea__texto {
  color: var(--grafito);
  text-decoration: line-through;
}
@media (max-width: 640px) {
  .plantillas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media print {
  /* En papel la checklist es para llevar y tachar a mano: se van los controles
     y las casillas quedan como cuadraditos vacíos. */
  .plantillas,
  .avance__acciones,
  .corta__cta {
    display: none !important;
  }
  .tarea {
    break-inside: avoid;
  }
  .tarea--hecha .tarea__texto {
    text-decoration: none;
  }
}
/* =============================================================================
   Borderó · lo real contra lo presupuestado
   ============================================================================= */
/* La columna de lo presupuestado va apagada: es la referencia, no el dato que
   se está cargando. Si pesa lo mismo que la columna real, la vista se lee como
   dos planillas en vez de una comparación. */
.celda-tenue {
  color: var(--grafito);
  font-size: var(--fs-3);
}
.campo-real {
  max-width: 8rem;
  margin-left: auto;
  text-align: right;
}
/* --- El desvío ------------------------------------------------------------
   El color no lo decide el signo: vender de más es buena noticia y gastar de
   más no. Quien pinta la fila dice cuál de los dos casos es. */
.desvio {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--fs-2);
  font-weight: 600;
  padding: .18rem .5rem;
  border-radius: var(--pastilla);
}
.desvio--igual {
  color: var(--grafito);
  background: var(--lienzo);
}
.desvio--bueno {
  color: var(--verde);
  background: var(--verde-t);
}
.desvio--malo {
  color: var(--naranja-fuerte);
  background: var(--naranja-t);
}
/* --- El panel comparado ---------------------------------------------------- */
.panel__fila--comparada {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}
.panel__par {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}
.panel__previsto {
  font-size: var(--fs-2);
  color: var(--grafito);
  text-decoration: line-through;
}
.panel__fila--comparada .desvio {
  flex-basis: 100%;
  text-align: right;
}
#comparacion .celda-tenue {
  text-decoration: none;
}
/* La primera columna del formulario reserva 16rem porque ahí va un campo de
   texto donde se escribe el concepto. En el borderó esa columna es sólo el
   nombre, ya cargado: con 16rem la tabla de venta real no entraba y scrolleaba
   de costado en una pantalla de 1400. */
.bordero .tabla-envoltorio th:first-child,
.bordero .tabla-envoltorio td:first-child {
  min-width: 10rem;
}
.bordero .tabla-envoltorio table {
  min-width: 0;
}
.ayuda--despues {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--borde);
}
.ayuda--despues a {
  color: var(--acento);
  font-weight: 600;
}
/* Encabezado editorial exclusivo del PDF: identifica el reporte sin llevar
   al papel los controles de la aplicación. */
/* Recordatorios adicionales: la guía conserva profundidad sin obligar a leer
   todo de una vez. */
.fase__extras {
  margin-top: .7rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: rgba(255,255,255,.38);
}
.fase__extras-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .9rem;
  cursor: pointer;
  color: var(--tinta);
  font-weight: 600;
  list-style: none;
}
.fase__extras-resumen::-webkit-details-marker {
  display: none;
}
.fase__extras-resumen::after {
  content: '+';
  color: var(--acento);
  font-family: var(--titulo);
  font-size: var(--fs-6);
}
.fase__extras[open] .fase__extras-resumen {
  border-bottom: 1px solid var(--borde);
}
.fase__extras[open] .fase__extras-resumen::after {
  content: '−';
}
.fase__extras-pista {
  color: var(--grafito);
  font-size: var(--fs-2);
  font-weight: 400;
}
.fase__extras .tarea-lista {
  padding: 0 .65rem .25rem;
}
@media print {
  .fase__extras {
    border: none;
    margin-top: .3rem;
  }
  .fase__extras-resumen {
    display: none;
  }
  .fase__extras:not([open])>.tarea-lista {
    display: block !important;
  }
}
/* Navegación móvil de la landing: el salto a "Cómo funciona" ya existe en el
   hero; ocultarlo en el encabezado evita una segunda fila para un único enlace. */

/* ===== Origen: evolucion.css ===== */
/* Dirección 2026: superficie clara, lima de identidad y contraste explícito. */
:root {
  --nieve: #fff;
  --borde-fuerte: #b9c4d6;
  --borde-campo: #788ba8;
  --carbon: #01232f;
  --acento-claro: #dfedf4;
  --titulo: 'Archivo',sans-serif;
  --texto: 'Inter',sans-serif;
  --sombra-1: none;
  --medida: 1400px;
  --t-cuerpo: 14px;
  --t-etiqueta: 11px;
}
body {
  font-size: var(--fs-4);
  background: var(--lienzo);
}
h1,
h2,
h3 {
  letter-spacing: -.03em;
}
.app-tools {
  max-width: var(--medida);
  margin: auto;
  padding: 18px 32px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.app-tools>p {
  font-size: var(--fs-2);
  color: var(--grafito);
  margin: 0;
}
.app-tools-actions {
  display: flex;
  gap: 9px;
  align-items: center;
}
.save-status {
  font-size: var(--fs-2);
  color: var(--grafito);
  margin-right: 10px;
}
.storage-alert {
  max-width: 1336px;
  margin: 15px auto 0;
  border: 1px solid #b57624;
  border-radius: var(--r-tarjeta);
  background: #fff7e9;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--fs-2);
  color: #75470e;
}
.storage-alert[hidden] {
  display: none;
}
.storage-alert button {
  padding: 10px 14px;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
}
.envoltorio {
  padding: 25px 32px 45px;
  gap: 25px;
}
.lateral__caja {
  background: transparent;
  border: 0;
  padding: 10px 0;
  box-shadow: none;
}
.lateral__titulo {
  color: var(--grafito);
  font-size: var(--fs-1);
  letter-spacing: 1.3px;
  margin-bottom: 18px;
}
.paso-item {
  font-size: var(--fs-3);
  min-height: 46px;
  color: var(--grafito);
  padding: 10px 9px;
  gap: 10px;
}
.paso-item:disabled {
  opacity: .65;
  color: var(--grafito);
}
.paso-item__n {
  width: 26px;
  height: 26px;
  background: white;
  border: 1px solid #b9c4d6;
  font-size: var(--fs-1);
}
.paso-item--hecho {
  color: var(--tinta);
}
.paso-item--activo {
  color: var(--tinta);
}
.paso-item--activo .paso-item__n {
  color: white;
}
.paso-item:hover:not(:disabled):not(.paso-item--activo) {
  background: var(--ui-hover);
  color: var(--tinta);
}
.formulario {
  background: white;
  border: 1px solid var(--borde);
  padding: 28px;
  min-width: 0;
}
.paso h2 {
  font: 600 var(--fs-8)/1.12 var(--titulo);
  letter-spacing: -1px;
  margin: 0 0 12px;
}
.paso__bajada {
  font-size: var(--fs-3) !important;
  max-width: 65ch;
  margin-bottom: 25px;
  color: var(--grafito);
}
.campo label {
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.6;
}
.campo input,
.campo select,
.campo textarea {
  font-size: var(--fs-4);
  min-height: 46px;
  background: #fff;
  padding: 10px 12px;
}
.campo input::placeholder {
  font-size: var(--fs-4);
}
.campos {
  gap: 18px;
}
.campo {
  margin: 0;
}
.boton {
  font-size: var(--fs-3);
  min-height: 44px;
}
.boton--solido,
.boton--descarga {
  color: white;
}
.boton--solido:hover,
.boton--descarga:hover {
  color: white;
}
.boton--borde {
  border-color: var(--borde-campo);
  color: var(--tinta);
}
.navegacion {
  padding-top: 23px;
  border-top: 1px solid var(--borde);
  margin-top: 25px;
}
.panel {
  background: #fff;
  border: 1px solid var(--borde);
  box-shadow: none;
  top: 96px;
}
.panel__titulo {
  font: 600 var(--fs-5) var(--titulo);
  text-transform: none;
  letter-spacing: -.3px;
  background: transparent;
  color: var(--tinta);
  padding: 21px 20px;
  border-bottom: 1px solid var(--borde);
}
.panel__cuerpo {
  padding: 3px 19px 18px;
}
.panel__fila {
  padding: 13px 0;
}
.panel__etiqueta {
  font-size: var(--fs-2) !important;
  line-height: 1.5;
}
.panel__valor {
  font-size: var(--fs-4);
}
.panel__fila--resultado {
  padding: 16px;
  margin: 10px -3px;
}
.panel__fila--resultado .panel__valor {
  font: 600 var(--fs-8) var(--titulo);
  letter-spacing: -.8px;
}
.panel__fila--equilibrio {
  padding: 14px 0;
}
.panel__fila--equilibrio .panel__valor {
  font: 600 var(--fs-7) var(--titulo);
  letter-spacing: -.5px;
}
.panel__nota {
  font-size: var(--fs-2) !important;
}
.zona-riesgo {
  margin-top: 20px;
  text-align: left;
}
.zona-riesgo .boton {
  font-size: var(--fs-2);
  color: #8d3d33;
  min-height: 44px;
}
.previs {
  max-width: 1336px;
}
.previs__titulo {
  font-size: var(--fs-6);
}
.previs__caja {
  border: 1px solid var(--borde);
  box-shadow: none;
}
.pie {
  background: transparent !important;
  color: var(--grafito);
  padding: 22px 32px;
  border-top: 1px solid var(--borde);
}
.pie__interior {
  max-width: 1336px;
}
.pie__nota {
  font-size: var(--fs-2) !important;
  line-height: 1.7;
  max-width: 95ch;
}
.pie__credito,
.pie__volver {
  font-size: var(--fs-2);
}
.pie a {
  color: var(--tinta);
}
.corta__cuerpo {
  max-width: 1080px;
  padding: 34px 32px 60px;
}
.corta__hero {
  padding: 0 0 27px;
}
.corta__hero h1 {
  font: 600 39px/1.12 var(--titulo);
  letter-spacing: -1.3px;
  max-width: 650px;
  margin: 0 0 15px;
}
.corta__bajada {
  font-size: var(--fs-4) !important;
  line-height: 1.8;
  max-width: 65ch;
}
.corta__caja {
  border: 1px solid var(--borde);
  box-shadow: none;
  overflow: hidden;
}
.corta__campos {
  padding: 28px;
  background: #fff;
}
.corta__salida {
  color: var(--tinta);
  padding: 30px;
}
.corta__salida .cifra {
  font: 600 43px var(--titulo);
  letter-spacing: -1.6px;
}
.corta__etiqueta {
  color: var(--grafito);
  font-size: var(--fs-2);
}
.corta__salida .ayuda {
  color: var(--grafito);
  font-size: var(--fs-3) !important;
}
.corta__tabla h2,
.corta__prosa h2 {
  font-size: var(--fs-7);
  letter-spacing: -.6px;
}
.corta__prosa p {
  font-size: var(--fs-4) !important;
  line-height: 1.8;
}
.corta__cta {
  color: var(--tinta);
}
.corta__cta p {
  font-size: var(--fs-4) !important;
  color: var(--tinta);
}
.fase {
  box-shadow: none;
  border: 1px solid var(--borde);
  background: #fff;
  padding: 24px;
}
.fase__titulo {
  font-size: var(--fs-7);
}
.fase__pie {
  font-size: var(--fs-3) !important;
}
.tarea {
  font-size: var(--fs-3);
  min-height: 46px;
}
.tarea__texto {
  font-size: var(--fs-3) !important;
}
.tarea-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ui-hover);
}
.tarea-row .tarea {
  flex: 1;
  border: 0;
  min-width: 0;
}
.task-skip {
  border: 0;
  background: transparent;
  color: var(--grafito);
  font: var(--fs-2) var(--texto);
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.task-skip[aria-pressed=true] {
  color: #7b493c;
  text-decoration: underline;
}
.tarea-row.is-skipped .tarea__texto {
  color: var(--grafito);
  text-decoration: line-through;
}
.task-add {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.task-add input {
  min-width: 0;
  flex: 1;
  padding: 11px 13px;
  border: 1px solid #788ba8;
  border-radius: var(--r-control);
  font: var(--fs-4) var(--texto);
  min-height: 44px;
}
.task-add button {
  font-size: var(--fs-2);
}
.task-hint {
  font-size: var(--fs-2);
  color: var(--grafito);
  margin-bottom: 0;
}
.avance {
  background: var(--ui-tint);
}
.avance__etiqueta,
.avance__cifra {
  color: var(--tinta);
  font-size: var(--fs-3);
}
.avance__barra {
  background: var(--ui-accent-border);
}
.fase__extras-resumen {
  font-size: var(--fs-3);
}
.rubros,
.rubro {
  border-radius: var(--r-interno);
}
.rubro__titulo {
  font-size: var(--fs-4);
}
.tabla-envoltorio {
  border-radius: var(--r-interno);
}
th {
  font-size: var(--fs-2);
}
td {
  font-size: var(--fs-3);
}
.minipanel {
  background: var(--ui-hover);
}
.minipanel dt {
  font-size: var(--fs-1);
}
.minipanel dd {
  font-size: var(--fs-6);
}
.numeric-error {
  color: #a43830;
  font-size: var(--fs-2);
  margin: 8px 0;
}
.scroll-step-title {
  font-size: var(--fs-1);
  color: var(--grafito);
  margin: 0 0 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bordero-notice {
  font-size: var(--fs-3);
  margin-bottom: 18px;
}
@media(max-width:1100px) {
  .envoltorio {
    gap: 16px;
    padding-inline: 22px;
  }
  .formulario {
    padding: 22px;
  }
  .panel__fila--resultado .panel__valor {
    font-size: var(--fs-7);
  }
}
@media(max-width:900px) {
  .panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }
  .panel__titulo,
  .panel__nota {
    display: none;
  }
  .panel__cuerpo {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    gap: 15px;
  }
  .panel__fila {
    display: none;
  }
  .panel__fila--resultado,
  .panel__fila--equilibrio {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: transparent !important;
    align-items: flex-start;
  }
  .panel__fila--equilibrio {
    align-items: flex-end;
  }
  .panel__fila--resultado .panel__valor,
  .panel__fila--equilibrio .panel__valor {
    font-size: var(--fs-7);
  }
  .panel__etiqueta {
    font-size: var(--fs-1) !important;
  }
  .app-tools {
    padding: 15px 22px 0;
  }
  .app-tools>p {
    display: none;
  }
  .app-tools-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .save-status {
    margin-right: auto;
  }
  .storage-alert {
    margin: 12px 20px 0;
  }
  .pie {
    padding-bottom: 100px;
  }
}
@media(max-width:640px) {
  .envoltorio {
    display: flex;
    flex-direction: column;
    padding: 14px 15px 115px;
    gap: 15px;
  }
  .lateral {
    position: static;
    width: 100%;
  }
  .lateral__caja {
    padding: 0;
  }
  .lateral__titulo {
    display: none;
  }
  .pasos {
    display: flex;
    justify-content: space-between;
    gap: 3px;
  }
  .paso-li {
    flex: 0 1 auto;
  }
  .paso-item {
    padding: 8px 7px;
    min-height: 46px;
    gap: 6px;
    font-size: var(--fs-2);
  }
  .paso-item__n {
    width: 24px;
    height: 24px;
  }
  .paso-item:not(.paso-item--activo) .paso-item__nombre {
    display: none;
  }
  .paso-item--activo .paso-item__nombre {
    display: block;
  }
  .formulario {
    width: 100%;
    padding: 22px 18px;
  }
  .paso h2 {
    font-size: var(--fs-8);
  }
  .paso__bajada {
    font-size: var(--fs-3) !important;
  }
  .campos {
    gap: 17px;
  }
  .campo--ancho {
    grid-column: auto;
  }
  .app-tools {
    padding: 12px 20px 0;
  }
  .save-status {
    font-size: var(--fs-1);
  }
  .corta__cuerpo {
    padding: 28px 20px 40px;
  }
  .corta__hero h1 {
    font-size: var(--fs-9);
  }
  .corta__caja {
    display: block;
  }
  .corta__campos,
  .corta__salida {
    padding: 24px 20px;
  }
  .corta__salida .cifra {
    font-size: 39px;
  }
  .fase {
    padding: 20px 17px;
  }
  .task-add {
    gap: 7px;
  }
  .task-add button {
    padding: 8px 10px;
  }
  .task-add input {
    width: 50%;
  }
  .task-skip {
    font-size: var(--fs-1);
    padding: 8px 6px;
  }
  .task-hint {
    font-size: var(--fs-2);
  }
  .storage-alert {
    align-items: flex-start;
    flex-direction: column;
  }
  .corta__cta {
    display: block;
  }
  .corta__cta .boton {
    margin-top: 12px;
  }
  .panel__fila--resultado .panel__valor {
    font-size: var(--fs-7);
  }
}
@media print {
  .app-tools,
  .storage-alert,
  .task-add,
  .task-skip,
  .task-hint,
  .bordero-notice,
  .scroll-step-title {
    display: none !important;
  }
  .envoltorio {
    display: block;
  }
  .formulario {
    padding: 0;
  }
  .corta__cuerpo {
    padding: 0;
  }
  .fase {
    border: 1px solid #ddd;
    background: white;
  }
  .tarea-row.is-skipped {
    display: none;
  }
}
.lateral__titulo {
  border-left: 2px solid #c93819;
  padding-left: 11px;
}
.panel__fila--equilibrio {
  border-bottom: 2px solid #c93819;
}
.fase__titulo {
  padding-left: 14px;
  border-left: 3px solid #c93819;
}
@media print {
  body {
    font-family: 'Inter',Arial,sans-serif;
    color: #01232f;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .lateral {
    display: none !important;
  }
  .formulario {
    border: none !important;
  }
  .resumen-bloque h4,
  .previs__caja-titulo {
    color: #01232f !important;
  }
  .previs__caja-int--resultado {
    border: 1pt solid #ccd7ea !important;
    border-left: 3pt solid #21617d !important;
    padding: 4mm;
    background: #f3f6fc;
  }
  .fase__titulo {
    font-family: 'Archivo',Arial,sans-serif;
    color: #01232f !important;
  }
  .corta__hero h1 {
    font-family: 'Archivo',Arial,sans-serif;
    color: #01232f;
  }
  .fase {
    break-inside: auto;
  }
  .tarea-row {
    break-inside: avoid;
  }
  .task-skip,
  .task-hint {
    display: none !important;
  }
  .pie__nota {
    font-size: 7.5pt !important;
  }
  .previs__tabla th {
    color: #01232f;
    background: #e6ecf6;
  }
  .previs__tabla tr {
    break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  h2,
  h3,
  h4 {
    break-after: avoid;
  }
  .tarea__texto {
    font-size: 10pt !important;
  }
}
.paso h2 {
  scroll-margin-top: 120px;
}
.campo input::placeholder {
  color: #667389;
}
[hidden] {
  display: none !important;
}
.per-person-label {
  display: block;
  font-size: var(--fs-1);
  color: #21617d;
  margin-top: 5px;
}
/* =============================================================================
   Piso tipográfico y áreas táctiles
   -----------------------------------------------------------------------------
   Va acá, y no en la sección base, porque la base trabaja en rem sobre una
   escala coherente: el problema no era esa escala sino los px con que esta hoja
   la pisaba. Se corrigieron arriba, uno por uno. Lo que sigue es lo que faltaba
   y no existía como regla en ningún lado.
   ============================================================================= */
/* --- El zoom de iOS al enfocar un campo --------------------------------------
   Safari en iPhone hace zoom sobre cualquier campo de menos de 16px y después
   deja la página corrida y en otra escala. En un formulario de seis pasos eso
   pasa decenas de veces por presupuesto. No se puede desactivar sin bloquear
   también el zoom manual con los dedos, que sería peor: la única salida real es
   que el campo mida 16px. Sólo en pantallas chicas; en escritorio 15px lee
   mejor y no hay zoom que evitar.

   La lista repite el mismo selector en dos formas a propósito. La regla base de
   la base es `input[type=text]`, que pesa (0,1,1) y le gana a un `td input`;
   las de esta hoja son `.campo input`, que pesan (0,2,1) y le ganan al atributo.
   Con una sola de las dos formas, la otra queda sin pisar. */
@media(max-width:820px) {
  input[type=text],
  input[type=date],
  input[type=number],
  input[type=email],
  input[type=tel],
  input[type=search],
  select,
  textarea,
  .campo input,
  .campo select,
  .campo textarea,
  .corta__campos input,
  .corta__campos select,
  .task-add input {
    font-size: var(--fs-5);
  }
}
/* --- Alturas de toque --------------------------------------------------------
   El mínimo cómodo es 44px. En las tablas de rubros eso engordaría cada fila,
   así que ahí se respeta el piso de 24px que pide WCAG 2.5.8 con el puntero, y
   se sube a 44 sólo cuando la pantalla es chica (o sea, cuando se toca). */
.boton--peligro {
  min-height: 44px;
}
.boton-borrar {
  min-height: 32px;
}
.tarea__casilla {
  width: 22px;
  height: 22px;
}
td input,
td select {
  min-height: 38px;
}
@media(max-width:820px) {
  .boton-borrar {
    min-height: 44px;
  }
  td input,
  td select {
    min-height: 44px;
  }
}
/* --- El botón de pista (ⓘ) ---------------------------------------------------
   Mide 22px y el mínimo de WCAG 2.5.8 es 24. La nota de la sección base avisa que
   agrandarlo le pisa el renglón al vecino, y tiene razón. Pero el criterio es
   sobre el área que responde al toque, no sobre lo que se ve: un pseudo
   transparente la lleva a 44px sin mover un pixel del dibujo ni de la fila. */
.pista__boton {
  position: relative;
}
.pista__boton::after {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: inherit;
}
/* --- Foco --------------------------------------------------------------------
   2px con 2px de separación se pierde sobre los bordes de los campos, que ya
   son de 1px. Igual que en la portada: 3 y 3. */
:focus-visible {
  outline-width: 3px;
  outline-offset: 3px;
}
/* =============================================================================
   Movimiento
   -----------------------------------------------------------------------------
   Poco y con motivo. Las transiciones entre pasos ya estaban en la sección base
   —incluso con dirección, `va-adelante` / `va-atras`—, así que acá va sólo lo
   que faltaba: avisar de un cambio y premiar uno.

   Todo esto lo apaga el bloque `prefers-reduced-motion` de más arriba, que usa
   !important y por eso gana aunque esté antes.
   ============================================================================= */
/* --- La cifra del panel acusa el cambio --------------------------------------
   El panel está a la derecha y los campos a la izquierda: al cargar un costo,
   el resultado se actualizaba en silencio y a varios centímetros de donde
   estabas mirando. Un movimiento corto conecta una cosa con la otra. Sube en
   vez de parpadear: el parpadeo se lee como error, subir se lee como que entró
   un dato. La clase la pone ui.js y sólo cuando el número cambió de verdad. */
.panel__valor--cambio {
  display: inline-block;
  animation: tb-cifra 520ms cubic-bezier(.2,.7,.3,1);
}
@keyframes tb-cifra {
  0%{transform:translateY(-4px);opacity:.4}
  60%{transform:translateY(0);opacity:1}
  100%{transform:none;opacity:1}
}
/* --- Tachar una tarea --------------------------------------------------------
   Es el momento de recompensa de una checklist y era instantáneo. El tilde da
   un salto corto y el texto se apaga de a poco en vez de cambiar de golpe. */
.tarea__casilla {
  transition: transform 160ms cubic-bezier(.2,.7,.3,1);
}
.tarea__casilla:checked {
  animation: tb-tilde 300ms cubic-bezier(.2,.7,.3,1);
}
@keyframes tb-tilde {0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.tarea__texto {
  transition: color 240ms ease;
}
/* --- El lateral de pasos -----------------------------------------------------
   Con los pasos a 13px "Derechos e impuestos" ya no entra en 185px. */
.envoltorio {
  grid-template-columns: 200px minmax(0,1fr) 295px;
}
@media(max-width:1100px) {
  .envoltorio {
    grid-template-columns: 168px minmax(0,1fr) 255px;
  }
}

/* ===== Origen: caracter.css ===== */
/* Un sistema de tintas: petróleo, azul medio, naranja rojizo y papel.
   Alcance: sólo las páginas de la app (presupuesto, borderó, herramientas y
   calculadoras). La portada usa css/portada.css, que es autosuficiente.
   Las reglas de portada que vivían acá se movieron allá. */
.lateral {
  margin: 0;
  padding: 0;
  background: transparent;
}
:root {
  --ink: #01232f;
  --muted: #526672;
  --line: #d2d3d6;
  --tinta: #01232f;
  --grafito: #526672;
  --lienzo: #f6f4ef;
  --acento: #21617d;
  --acento-t: #dfedf4;
  --borde: #d2d3d6;
}
.formulario,
.panel,
.corta__caja,
.fase {
  border-radius: var(--r-tarjeta);
}
.boton,
.campo input,
.campo select,
.campo textarea {
  border-radius: var(--r-control);
}
.paso-item {
  border-radius: var(--r-control);
}
.panel__titulo {
  border-top: 3px solid #21617d;
}
.panel__fila--resultado {
  border-radius: var(--r-interno);
}
.corta__salida {
  background: #dfedf4;
  border-top: 3px solid #c93819;
}
.corta__salida .cifra {
  color: #01232f;
}
.corta__salida .cifra.es-negativo {
  color: #c93819;
}
.corta__cta {
  background: #f4e9e3;
  border-radius: 4px;
}
.fase__titulo {
  border-color: #c93819;
}
.avance {
  border-radius: var(--r-tarjeta);
}
@media(max-width:680px) {
  .panel__titulo {
    border-top: 0;
  }
}
@media print {
  .panel {
    display: none !important;
  }
  .previs__caja-titulo,
  .resumen-bloque h4 {
    border-color: #c93819 !important;
  }
  .per-person-label {
    color: #01232f;
  }
}

/* ===== Origen: tintas.css ===== */
/* Colores aproximados muestreados de la referencia aportada.
   Alcance: sólo las páginas de la app. Ver la nota de la sección carácter. */
:root {
  --verde: #01232f;
  --verde-t: #dfedf4;
  --rojo: #a82e13;
  --rojo-t: #f4e9e3;
  --naranja: #c93819;
  --naranja-t: #f4e9e3;
  --naranja-fuerte: #a82e13;
  --naranja-texto: #c93819;
}
/* Tokens de componente. Una sola receta para superficies, filetes y estados de
   las tarjetas laterales, el panel, las descargas y los llamados a la acción
   (ver la sección "Componentes de la app", al final de este archivo). Nombran un propósito y apuntan a las
   tintas de arriba; los tres que no tienen primitiva se definen acá. */
:root {
  --ui-ink: var(--tinta);
  --ui-muted: var(--grafito);
  --ui-surface: var(--nieve);
  --ui-border: var(--borde);
  --ui-border-strong: var(--borde-fuerte);
  --ui-accent: var(--acento);
  --ui-tint: var(--acento-t);
  --ui-coral: var(--naranja);
  --ui-coral-h: var(--naranja-fuerte);
  --ui-coral-t: var(--naranja-t);
  --ui-highlight: #4ba3c9;
  --ui-hover: #f2f6f8;
  --ui-accent-border: #bcd6e2;
  --ui-radius: var(--r-m);
  --ui-radius-s: var(--r-s);
  --ui-pad: 20px;
  /* La escala de radios acompaña al formulario y al panel (6 px) y a botones
     y campos (4 px). Antes las tarjetas internas iban a 11 y 16 px y cada
     sección parecía de otra aplicación. */
  --r-l: var(--r-interno);
  --r-m: var(--r-interno);
  --r-s: var(--r-control);
}
.panel__titulo {
  border-top-color: #4ba3c9;
}
.panel__fila--resultado {
  background: #dfedf4 !important;
  color: #01232f;
}
.panel__fila--resultado .panel__valor {
  color: #01232f;
}
.panel__fila--equilibrio {
  border-color: #4ba3c9;
}
.corta__salida {
  border-top-color: #4ba3c9;
}
.avance__barra>span {
  background: #4ba3c9;
}
.boton--solido,
.boton--descarga {
  background: #01232f;
  border-color: #01232f;
}
.boton--solido:hover,
.boton--descarga:hover {
  background: #12465a;
}
.paso-item--activo {
  background: #dfedf4;
}
.paso-item--activo .paso-item__n {
  background: #01232f;
  border-color: #01232f;
}
@media(max-width:680px) {
  .panel__fila--resultado {
    background: transparent !important;
  }
}
@media print {
  .previs__caja-int--resultado {
    border-left-color: #4ba3c9 !important;
  }
  .previs__cifra,
  .linea--clave dd {
    color: #01232f !important;
  }
}

/* ===== Origen: movimiento.css ===== */
/* Movimiento breve, sin bloquear controles ni depender de animaciones para leer. */
:root {
  --motion-ease: cubic-bezier(.2,.75,.25,1);
  --motion-fast: 160ms;
  --motion-medium: 320ms;
}
html {
  scroll-padding-top: 100px;
}
:where(a,button,summary,input,select,textarea) {
  -webkit-tap-highlight-color: transparent;
}
:where(button,.action,.quick-card,.journey>a,.nav-link,.global-nav a,summary) {
  transition: background-color var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--motion-ease);
}
:where(input,select,textarea) {
  transition: border-color var(--motion-fast),box-shadow var(--motion-fast);
  accent-color: #c93819;
}
:where(input,select,textarea):focus-visible {
  outline: 2px solid #4ba3c9;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #4ba3c91a;
}
:where(button,.action):active:not(:disabled) {
  transform: translateY(1px) scale(.985);
}
:where(button,.action):focus-visible,
:where(a,summary):focus-visible {
  outline: 3px solid #4ba3c9;
  outline-offset: 4px;
}
button[aria-busy=true] {
  cursor: progress;
  opacity: .7;
}
button:disabled {
  cursor: not-allowed;
}
.action svg,
.corner-arrow,
.journey .right {
  transition: transform var(--motion-medium) var(--motion-ease);
}
@media(hover:hover) and (pointer:fine) {
  .action:hover svg {
    transform: translateX(4px);
  }
  .quick-card:hover .corner-arrow {
    transform: translate(3px,-3px);
  }
  .journey>a:hover .right {
    transform: translateX(4px);
  }
  .journey>a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px #01232f0a;
  }
  .nav-link:hover {
    transform: translateX(2px);
  }
}
.sim-result output,
.panel__valor,
.linea dd,
.corta__numero {
  font-variant-numeric: tabular-nums;
}
.chart rect {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: fill 140ms;
}
.avance__barra>span {
  transition: width 350ms var(--motion-ease);
}
.tarea-row {
  transition: background-color 180ms,opacity 180ms;
}
.tarea-row:has(.tarea--hecha) {
  background: #dfedf44d;
}
.tarea__casilla {
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
}
.task-skip {
  min-height: 36px;
}
.paso--visible,
.seccion--visible {
  animation: step-in 260ms var(--motion-ease);
}
.motion-enter {
  animation: step-in 460ms var(--motion-ease) both;
}
@keyframes step-in {from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media(max-width:680px) {
  .topbar-end .free-tag {
    display: none;
  }
  .topbar-end {
    min-width: 0;
  }
  .app-tools-actions {
    gap: 8px;
  }
}
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  body.bordero .paso[data-paso="4"] {
    display: block !important;
  }
  body.bordero .paso[data-paso="4"]>.campo {
    display: none !important;
  }
  body.bordero #comparacion .tabla-envoltorio {
    overflow: visible;
    border: 0;
    border-radius: 0;
    margin: 0 0 8mm;
  }
  body.bordero #comparacion table {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 9pt;
    border-collapse: collapse;
  }
  body.bordero #comparacion thead {
    display: table-header-group;
  }
  body.bordero #comparacion tbody {
    display: table-row-group;
  }
  body.bordero #comparacion tr {
    display: table-row;
    break-inside: avoid;
    border: 0;
  }
  body.bordero #comparacion th,
  body.bordero #comparacion td {
    display: table-cell;
    width: auto;
    min-width: 0;
    padding: 3mm 2mm;
    border-bottom: 1px solid #cdd9de;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
  }
  body.bordero #comparacion th:first-child {
    width: 31%;
    min-width: 0;
    text-align: left;
  }
  body.bordero #comparacion thead th {
    background: #dfedf4;
    color: #01232f;
    font-size: 8pt;
    letter-spacing: 0;
    text-transform: none;
  }
  body.bordero #comparacion td::before {
    content: none;
  }
  body.bordero #comparacion tbody tr:last-child {
    font-weight: 700;
    background: #edf4f7;
  }
  body.bordero #comparacion .desvio {
    white-space: normal;
    border-radius: 0;
    font-size: 8pt;
    padding: 0;
    background: none;
  }
}

/* ===== Origen: calculadoras.css ===== */
/* Composición compartida por las tres calculadoras. */
.calc .corta__cuerpo {
  max-width: 1120px;
  padding: 28px 32px 56px;
  text-align: left;
}
.calc .corta__hero {
  margin: 0 0 32px;
  padding: 0;
}
/* Selector entre las tres calculadoras. El menú principal lleva a la primera;
   desde acá se elige cualquiera de las tres sin volver a la portada. */
.calc-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 28px;
  padding: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--r-tarjeta);
}
.calc-switch a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--ui-radius-s);
  color: var(--ui-muted);
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--motion-fast, 160ms), color var(--motion-fast, 160ms);
}
.calc-switch a:hover {
  background: var(--ui-hover);
  color: var(--ui-ink);
}
.calc-switch a[aria-current=page] {
  background: var(--ui-tint);
  color: var(--ui-ink);
  font-weight: 600;
  box-shadow: inset 0 -2px var(--ui-highlight);
}
.calc-switch svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calc-switch a[aria-current=page] svg {
  color: var(--ui-coral);
}
.calc .corta__hero h1 {
  max-width: none;
  margin: 0 0 16px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.calc .corta__bajada {
  max-width: none;
  margin: 0;
  line-height: 1.7;
  text-wrap: pretty;
}
.calc .corta__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  padding: 0;
  margin: 0 0 32px;
  overflow: visible;
}
.calc .corta__campos {
  min-width: 0;
  padding: 28px;
  border-radius: var(--r-tarjeta) 0 0 var(--r-tarjeta);
}
.calc .corta__campos .campos {
  gap: 20px;
  margin: 0;
}
.calc .campo {
  min-width: 0;
}
.calc .campo label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-height: 2.9em;
  line-height: 1.45;
  text-wrap: pretty;
}
.calc .unidad {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: .9em;
}
.calc .campo input {
  width: 100%;
  min-width: 0;
  font-size: var(--fs-5);
}
.calc .corta__salida {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
  padding: 28px 32px;
  border-top: 0;
  border-left: 3px solid #4ba3c9;
  border-radius: 0 var(--r-tarjeta) var(--r-tarjeta) 0;
}
.calc .corta__etiqueta {
  margin: 0 0 12px;
  line-height: 1.5;
  text-wrap: pretty;
}
.calc .corta__salida .cifra {
  max-width: 100%;
  margin: 0 0 16px;
  font-size: clamp(34px, 3.5vw, 46px);
  line-height: 1.1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.calc .corta__salida .ayuda {
  width: 100%;
  max-width: none;
  margin: 0;
  line-height: 1.7;
  text-wrap: pretty;
}
.calc .corta__salida .ayuda+.ayuda {
  margin-top: 12px;
}
.calc .corta__tabla {
  margin: 0 0 32px;
}
.calc .corta__tabla h2 {
  margin: 0 0 16px;
  font: 600 var(--fs-7)/1.3 var(--titulo);
  letter-spacing: -.025em;
  text-transform: none;
  color: var(--tinta);
}
.calc .corta__tabla th,
.calc .corta__tabla td {
  padding: 14px 20px;
  line-height: 1.5;
}
.calc .corta__tabla th:first-child {
  width: 60%;
}
.calc .corta__prosa {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--borde);
}
.calc .corta__prosa>div {
  min-width: 0;
}
.calc .corta__prosa h2 {
  margin: 0 0 20px;
  font-size: var(--fs-7);
  line-height: 1.3;
  text-wrap: balance;
}
.calc .corta__prosa p {
  max-width: none;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.calc .faq {
  max-width: none;
}
.calc .faq__item summary {
  gap: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.calc .faq__respuesta {
  padding: 0 24px 20px 0;
}
.calc .faq__respuesta p {
  margin: 0;
}
@media (max-width: 900px) {
  .calc .corta__caja {
    grid-template-columns: minmax(0, 1fr);
  }
  .calc .corta__campos {
    border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0;
  }
  .calc .corta__salida {
    border-left: 0;
    border-top: 3px solid #4ba3c9;
    border-radius: 0 0 var(--r-tarjeta) var(--r-tarjeta);
    padding: 28px;
  }
  .calc .corta__salida .ayuda {
    max-width: 72ch;
  }
  .calc .corta__prosa {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .calc-switch {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 24px;
  }
  .calc .corta__cuerpo {
    padding: 24px 20px 40px;
  }
  .calc .corta__hero {
    margin-bottom: 26px;
  }
  .calc .corta__campos,
  .calc .corta__salida {
    padding: 24px 20px;
  }
  .calc .corta__campos .campos {
    grid-template-columns: minmax(0, 1fr);
  }
  .calc .campo label {
    min-height: 0;
  }
  .calc .corta__tabla th,
  .calc .corta__tabla td {
    padding: 12px;
  }
  .calc .corta__prosa {
    padding-top: 28px;
  }
}
@media print {
  .calc .corta__cuerpo {
    max-width: none;
    padding: 0;
  }
  .calc .corta__caja,
  .calc .corta__prosa {
    display: block;
  }
  .calc .corta__salida {
    border-left: 0;
    border-top: 2px solid #4ba3c9;
  }
  .calc .corta__preguntas {
    margin-top: 28px;
  }
}

/* ===== Origen: lectura.css ===== */
/* Alineaciones y lectura comunes, incluidas secciones desplegables. */
.paso__bajada,
.ayuda,
.panel__nota,
.entidad__ayuda,
.alerta__texto,
.bordero-notice,
.tarea__texto,
.fase__pie {
  text-align: left;
  text-wrap: pretty;
  line-height: 1.65;
}
.paso-item__nombre {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}
.resumen-bloque__cabecera {
  align-items: start;
  gap: 14px;
}
.resumen-bloque__cabecera h4 {
  flex-shrink: 0;
  line-height: 1.6;
}
.resumen-bloque__cifra {
  min-width: 0;
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  text-align: right;
  line-height: 1.45;
}
.resumen-bloque__flecha {
  margin-top: 5px;
}
.linea dt,
.linea dd,
.previs__linea dt {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pie__interior {
  padding: 0;
}
.pie__nota {
  text-wrap: pretty;
}
.pie .aviso-legal {
  max-width: 1336px;
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.bordero .panel__fila--resultado {
  flex-wrap: nowrap;
}
.bordero .panel__fila--resultado .desvio {
  flex-basis: auto;
  align-self: flex-start;
  max-width: 100%;
  white-space: normal;
  border-radius: var(--r-control);
}
.caja+.fases .tarea__texto {
  overflow-wrap: anywhere;
}
.corta:has(.fases) .corta__hero {
  margin: 0 0 28px;
  padding: 0;
}
.corta:has(.fases) .corta__bajada {
  max-width: 80ch;
  margin: 0;
}
/* Tablas de carga en pantalla ancha. Una cantidad es un número chico y no
   necesita el ancho de un precio, y el botón de borrar es una cruz (su nombre
   para lectores de pantalla sigue siendo "Borrar fila N"). Con eso las tablas
   entran enteras desde 1280 px, sin scroll lateral. En el teléfono se apilan en
   tarjetas y el botón vuelve a decir "Borrar". */
@media (min-width: 641px) {
  /* Un monto de siete cifras (1500000) entra entero, con lugar para las
     flechitas que Chrome muestra al pasar el mouse; una cantidad, cinco. */
  .tabla-envoltorio input[type=number] {
    min-width: 104px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .tabla-envoltorio input[data-campo=cantidad],
  .tabla-envoltorio input[data-number-kind=count] {
    min-width: 80px;
  }
  /* Las columnas de números se quedan con lo justo y el espacio que sobra va
     al concepto, que es el texto que se corta. */
  .tabla-envoltorio th.num,
  .tabla-envoltorio td.num {
    width: 1%;
  }
  .boton-borrar {
    position: relative;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 0;
  }
  /* Con bordes y no con fondos, para que la cruz se vea también en modo de alto contraste. */
  .boton-borrar::before,
  .boton-borrar::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 0;
    border-top: 1.5px solid currentColor;
  }
  .boton-borrar::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .boton-borrar::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
@media (min-width: 641px) and (max-width: 820px) {
  .boton-borrar {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}
/* Primera columna según lo que suele ir: las categorías de entrada son cortas y
   los conceptos de gastos precargados no pasan de 23 letras; los de otros
   ingresos ("Subsidio o fondo concursable") se quedan con los 16rem. En el
   borderó la primera columna es texto y puede ir en dos renglones. */
@media (min-width: 641px) {
  #tabla-entradas th:first-child,
  #tabla-entradas td:first-child {
    min-width: 12rem;
  }
  .rubro .tabla-envoltorio th:first-child,
  .rubro .tabla-envoltorio td:first-child {
    min-width: 13rem;
  }
  .bordero .tabla-envoltorio th:first-child,
  .bordero .tabla-envoltorio td:first-child,
  .bordero #tabla-entradas th:first-child,
  .bordero #tabla-entradas td:first-child {
    min-width: 7rem;
  }
}
@media (max-width: 1100px) {
  .rubro__cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  .rubro__titulo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: 100%;
  }
  .rubro__cuenta {
    grid-column: 1;
    grid-row: 2;
  }
  .rubro__total {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .rubro__flecha {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}
@media (max-width: 900px) {
  .bordero .panel__fila--resultado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
  }
  .bordero .panel__fila--resultado .panel__etiqueta {
    grid-column: 1;
    grid-row: 1;
  }
  .bordero .panel__fila--resultado .panel__par {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-left: 0;
  }
  .bordero .panel__fila--resultado .desvio {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }
  .envoltorio {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 120px;
  }
  .lateral {
    position: static;
    width: 100%;
  }
  .lateral__caja {
    padding: 0;
  }
  .lateral__titulo {
    display: none;
  }
  .pasos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding-bottom: 28px;
  }
  .bordero .pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .paso-li,
  .paso-li--activo {
    min-width: 0;
  }
  .paso-item,
  .paso-item--activo {
    width: 100%;
    min-height: 44px;
    padding: 8px 4px;
    justify-content: center;
    gap: 0;
    white-space: normal;
  }
  .paso-item .paso-item__nombre {
    display: none;
  }
  .paso-item--activo .paso-item__nombre {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: var(--fs-3);
    text-align: left;
    line-height: 1.5;
  }
  .paso-item__n {
    flex-shrink: 0;
  }
}
@media (max-width: 640px) {
  .app-tools {
    flex-wrap: wrap;
  }
  .app-tools-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  .save-status {
    flex-basis: 100%;
    margin: 0;
  }
  .alerta {
    flex-direction: column;
    gap: 10px;
  }
  .alerta__texto {
    width: 100%;
    max-width: none;
  }
  .tarea-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0 8px;
    padding: 10px 0;
  }
  .tarea-row .tarea {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    align-items: start;
  }
  .tarea__casilla {
    margin-top: 2px;
  }
  .tarea-row>.task-skip:nth-child(2) {
    grid-column: 2;
  }
  .tarea-row>.task-add {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    margin: 0;
  }
  .tarea-row>.task-add input {
    grid-column: 1 / -1;
    width: 100%;
  }
  .avance__cabecera {
    flex-wrap: wrap;
    gap: 8px;
  }
  .avance__acciones {
    flex-wrap: wrap;
  }
  .resumen-bloque__cabecera {
    padding: 16px;
  }
  .pie {
    padding: 24px 20px;
  }
}
@media print {
  .envoltorio {
    padding: 0;
  }
  .pie {
    padding: 0;
  }
  .tarea-row {
    display: block;
  }
}
/* =============================================================================
   Componentes de la app
   -----------------------------------------------------------------------------
   Una misma receta para lo que acompaña al formulario o cierra una sección:
   superficie blanca, filete de 1 px, radio de 6 px y un solo tinte para marcar
   lo activo. Los valores salen de los tokens --ui-* de la sección tintas.
   ============================================================================= */
/* --- Pasos del presupuesto y del borderó ------------------------------------
   En escritorio es una tarjeta, igual que el formulario y el panel, y los
   pasos van unidos por una línea que se pinta a medida que avanzás. En
   pantalla angosta sigue siendo la tira horizontal de más arriba. */
.paso-item--hecho .paso-item__n {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}
.paso-item--hecho .paso-item__n::after {
  border-color: var(--ui-surface);
}
/* Escritorio: el menú del sitio es una columna a la izquierda (css/comun.css)
   y los pasos viven adentro, debajo de la sección (js/menu.js). La columna de
   pasos desaparece y el formulario gana ese ancho. Como ya no hay una barra
   fija arriba, lo que se pega al hacer scroll se pega al borde. */
@media (min-width: 1101px) {
  .envoltorio {
    grid-template-columns: minmax(0, 1fr) 295px;
  }
  .lateral,
  .calc-switch {
    display: none;
  }
  .panel {
    top: 24px;
  }
  .rubro__cabecera {
    top: 0;
  }
  .paso h2 {
    scroll-margin-top: 24px;
  }
}
/* Escritorio chico (el caso típico: una notebook a 1280 px, que con la barra
   de scroll de Windows deja 1263): panel y márgenes más ajustados, para que
   las tablas de carga entren enteras. */
@media (min-width: 1101px) and (max-width: 1439px) {
  .envoltorio {
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: 20px;
    padding-inline: 24px;
  }
  .app-tools {
    padding-inline: 24px;
  }
  .formulario {
    padding: 24px;
  }
}
/* Si una tabla igual no entra (pantallas intermedias), una sombra en el borde
   avisa que sigue de costado. Las tapas blancas viajan con el contenido y
   tapan la sombra del lado al que ya se llegó. */
@media (min-width: 641px) {
  .tabla-envoltorio {
    background:
      linear-gradient(90deg, var(--nieve) 40%, rgba(255, 255, 255, 0)) 0 0 / 32px 100% no-repeat local,
      linear-gradient(270deg, var(--nieve) 40%, rgba(255, 255, 255, 0)) 100% 0 / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(1, 35, 47, .24), rgba(1, 35, 47, 0)) 0 0 / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(1, 35, 47, .24), rgba(1, 35, 47, 0)) 100% 0 / 14px 100% no-repeat scroll,
      var(--nieve);
  }
}
@media (min-width: 901px) {
  .lateral__caja {
    padding: 16px 10px 10px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--r-tarjeta);
  }
  .lateral__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0 8px 14px;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--fs-1);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--ui-muted);
  }
  .lateral__titulo::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--ui-coral);
  }
  .pasos {
    gap: 2px;
  }
  .paso-li {
    position: relative;
  }
  /* Cada tramo va del centro de un círculo al centro del siguiente y pasa
     por detrás de los dos: así no se descuadra aunque un nombre ocupe dos
     líneas. Centro del círculo: 8 px de aire + 13 px de radio. */
  .paso-li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    width: 2px;
    height: calc(100% + 2px);
    background: var(--ui-border);
  }
  .paso-li:has(.paso-item--hecho)::after {
    background: var(--ui-accent);
  }
  .paso-item {
    min-height: 44px;
    padding: 9px 8px;
    gap: 12px;
    border-radius: var(--ui-radius-s);
    color: var(--ui-muted);
    font-weight: 500;
  }
  .paso-item__n {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    background: var(--ui-surface);
    border: 1.5px solid var(--ui-border-strong);
    color: var(--ui-muted);
  }
  .paso-item--hecho {
    color: var(--ui-ink);
  }
  .paso-item--activo {
    background: var(--ui-tint);
    color: var(--ui-ink);
    font-weight: 600;
  }
  .paso-item--activo .paso-item__n {
    background: var(--ui-ink);
    border-color: var(--ui-ink);
    color: var(--ui-surface);
  }
  .paso-item:hover:not(:disabled):not(.paso-item--activo) {
    background: var(--ui-hover);
    color: var(--ui-ink);
  }
  .paso-item:disabled {
    opacity: .55;
  }
}
/* --- Panel en vivo -----------------------------------------------------------
   Resultado y equilibrio comparten ancho, radio y aire. El resultado va
   tintado porque es la cifra que se viene a mirar; el equilibrio, con filete. */
@media (min-width: 901px) {
  .panel__fila--resultado {
    margin: 14px 0 10px;
    padding: 16px 18px;
    border-radius: var(--ui-radius);
  }
  .panel__fila--equilibrio {
    margin: 0;
    padding: 14px 18px;
    gap: 4px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-accent-border);
    border-radius: var(--ui-radius);
  }
}
/* --- Descargas ---------------------------------------------------------------
   Tres formatos, una sola tarjeta: la etiqueta dice el formato, el título para
   qué sirve y el botón qué hace. El color vive en la etiqueta, no en filetes
   de distinto grosor y color según la tarjeta. */
.export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 12px;
}
.export-option,
.export-pdf {
  min-width: 0;
  padding: var(--ui-pad);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  transition: border-color var(--motion-fast, 160ms), box-shadow var(--motion-fast, 160ms);
}
.export-option:hover,
.export-pdf:hover {
  border-color: var(--ui-border-strong);
  box-shadow: 0 4px 14px rgba(1, 35, 47, .06);
}
.export-option {
  display: flex;
  flex-direction: column;
}
.export-option__tipo {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--r-pastilla);
  background: var(--ui-tint);
  color: var(--ui-accent);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}
.export-option__tipo--pdf {
  background: var(--ui-coral-t);
  color: var(--ui-coral-h);
}
.descarga .export-option h4,
.descarga .export-pdf h4 {
  margin: 12px 0 6px;
  font: 600 var(--fs-5)/1.35 var(--titulo);
  letter-spacing: -.01em;
  color: var(--ui-ink);
  text-wrap: balance;
}
.export-option .ayuda,
.export-pdf .ayuda {
  max-width: none;
  margin: 0 0 18px;
  font-size: var(--fs-3);
  line-height: 1.6;
}
.export-option .boton,
.export-pdf .boton {
  min-height: 44px;
  padding: 11px 16px;
  font-size: var(--fs-3);
  line-height: 1.4;
  white-space: normal;
  box-shadow: none;
}
.export-option .boton {
  width: 100%;
  margin-top: auto;
}
.export-pdf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.export-pdf>div {
  flex: 1;
  min-width: 0;
}
.export-pdf .ayuda {
  max-width: 56ch;
  margin: 0;
}
.export-pdf .boton {
  flex: none;
}
.descarga .ayuda--despues {
  max-width: none;
  margin-top: 20px;
  padding-top: 16px;
  font-size: var(--fs-3);
}
.ayuda--despues a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 680px) {
  .export-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .export-pdf {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .export-pdf .boton {
    width: 100%;
  }
}
/* --- Llamado a la acción al pie de la guía y las calculadoras ---------------
   El mismo patrón que la tarjeta principal de la portada: fondo petróleo y
   botón naranja rojizo. Si no entra en una línea, el botón baja entero. */
.corta .corta__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin: 0 0 44px;
  padding: 28px 32px;
  background: var(--ui-ink);
  color: var(--ui-surface);
  border: 0;
  border-radius: var(--r-tarjeta);
}
.corta .corta__cta p {
  flex: 1 1 340px;
  max-width: 62ch;
  margin: 0;
  color: var(--ui-surface);
  line-height: 1.6;
  text-wrap: balance;
}
.corta .corta__cta .boton {
  flex: none;
  max-width: 100%;
  margin: 0;
  background: var(--ui-coral);
  border-color: var(--ui-coral);
  color: var(--ui-surface);
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  box-shadow: none;
}
.corta .corta__cta .boton:hover {
  background: var(--ui-coral-h);
  border-color: var(--ui-coral-h);
  box-shadow: none;
}
@media (max-width: 600px) {
  .corta .corta__cta {
    padding: 24px 20px;
    margin-bottom: 32px;
  }
  .corta .corta__cta .boton {
    width: 100%;
  }
}
/* --- Avisos del borderó ------------------------------------------------------ */
.bordero-notice {
  padding: 12px 16px;
  background: var(--ui-tint);
  border-radius: var(--ui-radius);
  color: var(--ui-ink);
}
.bordero-notice a {
  color: var(--ui-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* --- Pistas descartadas con Escape ------------------------------------------
   El globo se muestra también con :hover y :focus-visible; Escape lo oculta
   aunque el puntero o el foco sigan encima (WCAG 1.4.13). ui.js quita la marca
   cuando el puntero o el foco salen de la pista. */
.pista.pista--descartada .pista__globo,
.pista.pista--descartada .pista__boton:focus-visible+.pista__globo {
  display: none;
}
/* --- Título de la página ------------------------------------------------------
   Presupuesto y borderó no tenían H1: el título de cada paso es un H2. Va en
   la franja de arriba con el mismo aspecto que tenía; en pantalla angosta esa
   franja se oculta a la vista pero sigue ahí para lectores de pantalla. */
.app-tools__ruta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35em;
  margin: 0;
  color: var(--grafito);
  font-size: var(--fs-2);
}
.app-tools__ruta h1 {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
}
@media (max-width: 900px) {
  .app-tools__ruta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* --- Objetivos táctiles en celular -------------------------------------------
   44 px de alto para lo que se toca con el dedo (WCAG 2.5.5): "Editar" y
   "No aplica" de la guía, las alícuotas y los controles deslizantes. */
@media (max-width: 760px) {
  .task-skip,
  .entidad__alicuota input {
    min-height: 44px;
  }
  input[type="range"] {
    height: 44px;
  }
}
/* =============================================================================
   Hoja para presentar (PDF de una página) — la arma js/hoja.js
   -----------------------------------------------------------------------------
   En pantalla no se ve. Al imprimir se monta fuera de vista para medirla y, en
   la impresión, es lo único que sale. Medidas en mm y pt, pensadas para A4.
   ============================================================================= */
.hoja-pdf {
  display: none;
}
body.con-hoja .hoja-pdf {
  display: block;
  position: absolute;
  left: -10000px;
  top: 0;
  background: #fff;
}
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body.con-hoja {
    background: #fff !important;
  }
  body.con-hoja>*:not(.hoja-pdf) {
    display: none !important;
  }
  body.con-hoja .hoja-pdf {
    position: static;
    left: auto;
  }
}
.hoja {
  color: #01232f;
  font: 400 9pt/1.4 'Inter', Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.hoja *,
.hoja *::before,
.hoja *::after {
  box-sizing: border-box;
}
.hoja__franja {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3mm;
  border-bottom: 2px solid #01232f;
}
.hoja__marca {
  font: 750 14pt/1 'Archivo', Arial, sans-serif;
  letter-spacing: -.4pt;
}
.hoja__marca em {
  font-style: normal;
  color: #c93819;
}
.hoja__tipo {
  font: 700 7.5pt/1 'Inter', Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #21617d;
}
.hoja .hoja__titulo {
  margin: 4mm 0 1mm;
  font: 750 20pt/1.1 'Archivo', Arial, sans-serif;
  letter-spacing: -.6pt;
  color: #01232f;
}
.hoja__meta {
  margin: 0;
  font-size: 8.5pt;
  color: #526672;
}
.hoja__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5mm;
  margin: 5mm 0 3mm;
}
.hoja__kpi {
  display: flex;
  flex-direction: column;
  gap: .8mm;
  padding: 3mm 3.5mm;
  background: #f2f6f8;
  border: 1px solid #d5dde0;
  border-radius: 2mm;
}
.hoja__kpi-etq {
  font: 700 7pt/1.2 'Inter', Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #21617d;
}
.hoja__kpi strong {
  font: 700 13pt/1.1 'Archivo', Arial, sans-serif;
  letter-spacing: -.3pt;
  color: #01232f;
}
.hoja__kpi small {
  font-size: 7.5pt;
  line-height: 1.3;
  color: #526672;
}
.hoja__kpi--principal {
  background: #01232f;
  border-color: #01232f;
}
.hoja__kpi--principal .hoja__kpi-etq {
  color: #9dcbd6;
}
.hoja__kpi--principal strong {
  font-size: 15pt;
  color: #fff;
}
.hoja__kpi--principal small {
  color: #bdd1d5;
}
.hoja__kpi--negativo strong {
  color: #ef8060;
}
.hoja__veredicto {
  margin: 0 0 3mm;
  padding: 2.5mm 3.5mm;
  background: #dfedf4;
  border-left: 3px solid #4ba3c9;
  font-size: 8.5pt;
  line-height: 1.45;
}
.hoja__veredicto span {
  color: #21617d;
  font-weight: 600;
  white-space: nowrap;
}
.hoja h2 {
  margin: 3.5mm 0 1.5mm;
  font: 700 7.5pt/1.2 'Inter', Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #21617d;
}
.hoja__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6mm;
}
.hoja__tabla {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-collapse: collapse;
  font-size: 8.5pt;
  background: none;
}
.hoja__tabla th {
  padding: 1.2mm 1.5mm;
  border-bottom: 1px solid #b9c4d6;
  background: none;
  font: 700 7pt/1.2 'Inter', Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  color: #526672;
}
.hoja__tabla td {
  padding: 1.1mm 1.5mm;
  border-bottom: 1px solid #e6eaec;
  vertical-align: middle;
  color: inherit;
  background: none;
}
.hoja__tabla .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hoja__detalle {
  font-size: 7.5pt;
  color: #526672;
  white-space: nowrap;
}
.hoja__subtotal td {
  font-weight: 600;
  background: #f6f4ef;
}
.hoja__total td {
  font-weight: 700;
  border-top: 1px solid #01232f;
  border-bottom: 0;
}
.hoja__resultado td {
  font: 700 10pt/1.3 'Archivo', Arial, sans-serif;
  background: #dfedf4;
  border-top: 1.5px solid #01232f;
  border-bottom: 0;
}
.hoja__resultado--negativo td {
  color: #a82e13;
}
.hoja__rubro {
  display: flex;
  align-items: center;
  gap: 2mm;
}
.hoja__rubro-nombre {
  flex: none;
  width: 25mm;
}
.hoja__pista {
  flex: 1;
  height: 2mm;
  overflow: hidden;
  background: #eef1f2;
  border-radius: 1mm;
}
.hoja__barra {
  display: block;
  height: 100%;
  background: #4ba3c9;
  border-radius: 1mm;
}
.hoja__tabla td.hoja__bien {
  font-weight: 700;
  color: #01232f;
}
.hoja__tabla td.hoja__mal {
  font-weight: 700;
  color: #c93819;
}
.hoja__tabla td.hoja__igual {
  color: #5f7079;
}
.hoja__escenarios {
  margin-top: 1mm;
}
/* Notas largas: se cortan con puntos suspensivos visibles, no en silencio. El
   relleno va en la caja y no en el párrafo, para que no asome el renglón nueve. */
.hoja__notas-caja {
  padding: 2.5mm 3mm;
  background: #f6f4ef;
  border-radius: 1.5mm;
}
.hoja__notas p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  margin: 0;
  overflow: hidden;
  font-size: 8.5pt;
  white-space: pre-line;
}
.hoja__notas-mas {
  display: block;
  margin-top: 1mm;
  font-size: 7.5pt;
  font-style: italic;
  color: #526672;
}
.hoja__nombre span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.hoja__firmas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8mm;
  margin-top: 12mm;
}
.hoja__firma {
  padding-top: 1.5mm;
  border-top: 1px solid #01232f;
  font-size: 8pt;
  color: #526672;
}
.hoja__pie {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  margin-top: 5mm;
  padding-top: 2mm;
  border-top: 1px solid #d5dde0;
  font-size: 7pt;
  color: #526672;
}
/* =============================================================================
   Borderó en PDF: documento de liquidación — lo arma HOJA.bordero (js/hoja.js)
   -----------------------------------------------------------------------------
   Otro lenguaje que la hoja del presupuesto: no es un tablero para mostrar,
   es el papel que firman la sala, la producción y el artista. Tinta sobre
   blanco, filetes finos, secciones numeradas y la plata de cada parte al final.
   ============================================================================= */
.doc {
  font-size: 8.4pt;
  line-height: 1.3;
}
.doc__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8mm;
  padding-bottom: 2.5mm;
  border-bottom: 1.5pt solid #01232f;
}
.doc__marca {
  font: 750 12pt/1 'Archivo', Arial, sans-serif;
  letter-spacing: -.3pt;
  color: #01232f;
}
.doc__marca em {
  font-style: normal;
  color: #c93819;
}
.doc__titulo {
  text-align: right;
}
.doc .doc__titulo h1 {
  margin: 0;
  font: 750 16pt/1.05 'Archivo', Arial, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #01232f;
}
.doc__titulo p {
  margin: 1mm 0 0;
  font-size: 7.8pt;
  color: #526672;
}
.doc__ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 3.5mm 0 0;
  border: .75pt solid #9aa8ae;
}
.doc__dato {
  display: grid;
  grid-template-columns: 22mm minmax(0, 1fr);
  align-items: baseline;
  gap: 2mm;
  padding: 1mm 2.5mm;
  border-bottom: .5pt solid #d5dde0;
}
.doc__dato:nth-child(odd) {
  border-right: .5pt solid #d5dde0;
}
.doc__dato:nth-last-child(-n+2) {
  border-bottom: 0;
}
.doc__dato dt {
  font-size: 6.6pt;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #526672;
}
.doc__dato dd {
  margin: 0;
  font-weight: 600;
  color: #01232f;
  overflow-wrap: anywhere;
}
.doc__seccion {
  margin-top: 3.2mm;
  break-inside: avoid;
}
.doc h2 {
  display: flex;
  align-items: center;
  gap: 2mm;
  margin: 0 0 1mm;
  padding-bottom: 1mm;
  border-bottom: .9pt solid #01232f;
  font: 700 7.8pt/1.2 'Inter', Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #01232f;
}
.doc__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 4.2mm;
  height: 4.2mm;
  border-radius: 50%;
  background: #01232f;
  color: #fff;
  font-size: 6.6pt;
  letter-spacing: 0;
}
.doc .doc__tabla {
  font-size: 8.4pt;
}
.doc .doc__tabla th {
  padding: .7mm 1.5mm;
  border-bottom: .6pt solid #9aa8ae;
  font-size: 6.4pt;
  color: #526672;
}
.doc .doc__tabla td {
  padding: .5mm 1.5mm;
  border-bottom: .4pt solid #e1e6e8;
}
.doc .doc__tabla .doc__tenue td {
  color: #5f7079;
}
.doc .doc__tabla .doc__sub td {
  padding-top: 1.8mm;
  border-bottom: .5pt solid #cfd8db;
  font-size: 6.6pt;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #21617d;
}
.doc .doc__tabla .doc__subtotal td {
  font-weight: 600;
  border-top: .6pt solid #9aa8ae;
}
.doc .doc__tabla .doc__total td {
  font-weight: 700;
  border-top: .9pt solid #01232f;
  border-bottom: 0;
}
.doc .doc__tabla .doc__clave td {
  font: 700 9.4pt/1.3 'Archivo', Arial, sans-serif;
  background: #eef2f3;
  border-top: .9pt solid #01232f;
  border-bottom: .9pt solid #01232f;
}
.doc .doc__tabla .doc__clave--negativo td,
.doc .doc__tabla .doc__parte.doc__clave--negativo td.num {
  color: #a82e13;
}
.doc__base {
  font-weight: 400;
  font-size: 7.6pt;
  color: #526672;
}
.doc__nota {
  margin: 1.2mm 0 0;
  font-size: 7.6pt;
  color: #526672;
}
/* La liquidación final: la parte de cada uno, enmarcada y con la cifra grande. */
.doc .doc__final {
  border: 1.2pt solid #01232f;
}
.doc .doc__final th,
.doc .doc__final td {
  padding-left: 2.5mm;
  padding-right: 2.5mm;
}
.doc .doc__final .doc__parte td {
  padding-top: 1mm;
  padding-bottom: 1mm;
  font-size: 9pt;
  font-weight: 700;
}
.doc .doc__final .doc__parte td.num {
  font: 700 11pt/1.2 'Archivo', Arial, sans-serif;
}
.doc .doc__final .doc__resto td {
  color: #526672;
}
.doc .doc__final .doc__total td {
  background: #eef2f3;
}
.doc .hoja__notas-caja {
  background: none;
  border: .6pt solid #9aa8ae;
  border-radius: 0;
}
.doc__firmas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8mm;
  margin-top: 4.5mm;
  break-inside: avoid;
}
.doc__firma {
  display: flex;
  flex-direction: column;
}
.doc__rol {
  font-size: 7.4pt;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #01232f;
}
.doc__linea {
  display: flex;
  align-items: flex-end;
  gap: 1.5mm;
  margin-top: 2.4mm;
  font-size: 7pt;
  color: #526672;
}
.doc__linea::after {
  content: '';
  flex: 1;
  border-bottom: .6pt solid #9aa8ae;
}
/* La firma va arriba de la línea, con espacio para firmar. */
.doc__linea--firma {
  flex-direction: column-reverse;
  align-items: stretch;
  gap: .8mm;
  margin-top: 8mm;
}
.doc__linea--firma::after {
  flex: none;
  border-bottom-color: #01232f;
}
/* Dos columnas donde la lectura lo permite (venta y deducciones; ingresos y
   gastos), para que la liquidación entre en una hoja sin achicar la letra. */
.doc__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 6mm;
  align-items: start;
}
.doc__columnas--cuenta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1.5mm;
}
.doc__bloque {
  margin-top: 2.5mm;
  break-inside: avoid;
}
/* El reparto va en una línea, debajo del total que se reparte. */
.doc .doc__reparto {
  margin-top: 1mm;
}
.doc .doc__reparto td {
  padding-top: .8mm;
  padding-bottom: .8mm;
  border-bottom: .6pt solid #9aa8ae;
  font-weight: 600;
  white-space: nowrap;
}
.doc .doc__reparto td.num {
  padding-right: 4mm;
}
.doc .doc__reparto td.doc__reparto-titulo {
  width: 1%;
  padding-right: 4mm;
  font-size: 6.6pt;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #21617d;
}
/* =============================================================================
   Preguntas frecuentes al pie del presupuesto y del borderó
   -----------------------------------------------------------------------------
   Responden lo que la gente busca ("qué es un borderó", "trabajar a borderó")
   y son el texto visible que respalda los datos estructurados FAQPage.
   Mismo componente que las calculadoras (.faq).
   ============================================================================= */
.saber {
  padding: 8px 32px 48px;
}
.saber__interior {
  max-width: var(--medida);
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--borde);
}
.saber h2 {
  margin: 0 0 16px;
  font: 700 var(--fs-7)/1.3 var(--titulo);
  letter-spacing: -.6px;
  color: var(--tinta);
}
.saber .faq {
  max-width: 820px;
}
.saber .faq__item summary {
  gap: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
.saber .faq__respuesta p {
  max-width: 70ch;
}
@media (min-width: 1101px) and (max-width: 1439px) {
  .saber {
    padding-inline: 24px;
  }
}
@media (max-width: 1100px) {
  .saber {
    padding-inline: 22px;
  }
}
@media (max-width: 640px) {
  .saber {
    padding: 0 15px 32px;
  }
  .saber__interior {
    padding-top: 22px;
  }
}
@media print {
  .saber {
    display: none !important;
  }
}
/* Acuerdos con la sala y con el artista: un monto fijo o un porcentaje, con
   solo el dato que corresponde a la vista. Mismo control segmentado que las
   calculadoras. */
.acuerdo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.acuerdo legend {
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.6;
}
.acuerdo__opciones {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--r-tarjeta);
}
.acuerdo__opcion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--ui-radius-s);
  color: var(--ui-muted);
  font-size: var(--fs-3);
  font-weight: 500;
  cursor: pointer;
}
.acuerdo__opcion:hover {
  background: var(--ui-hover);
  color: var(--ui-ink);
}
.acuerdo__opcion:has(input:checked) {
  background: var(--ui-tint);
  color: var(--ui-ink);
  font-weight: 600;
}
/* El radio queda de su tamaño: sin esto heredaba el alto y el relleno de
   los campos de texto (.campo input) y el foco dibujaba una barra alta. */
.acuerdo__opcion input {
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--ui-accent);
}
/* Con teclado, el foco marca la opción entera, no el circulito. */
.acuerdo__opcion input:focus-visible {
  outline: none;
  box-shadow: none;
}
.acuerdo__opcion:has(input:focus-visible) {
  outline: 2px solid #4ba3c9;
  outline-offset: 2px;
}
/* El mismo ancho que una columna de .campos, para que los montos del
   acuerdo queden alineados con el campo de imprevistos. */
.acuerdo .campo {
  max-width: calc(50% - 9px);
}
@media (max-width: 900px) {
  .acuerdo .campo {
    max-width: none;
  }
}
.aviso-doble {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--ambar);
  border-radius: var(--r-control);
  background: var(--ambar-t);
  color: #6b4a0e;
  font-size: var(--fs-3);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .acuerdo__opciones {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  .acuerdo__opcion {
    min-height: 44px;
  }
}
/* Sin presupuesto, la comparación del cierre tiene una sola columna de
   importes: en el teléfono va como una lista de concepto e importe, en vez de
   una tarjeta por renglón. */
@media (max-width: 640px) {
  .tabla-envoltorio .tabla--lista,
  .tabla-envoltorio .tabla--lista tbody {
    display: block;
  }
  .tabla-envoltorio .tabla--lista {
    background: var(--nieve);
    border: 1px solid var(--borde);
    border-radius: var(--r-m);
    box-shadow: var(--sombra-1);
  }
  .tabla-envoltorio .tabla--lista tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: .7rem .9rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--borde);
    border-radius: 0;
    box-shadow: none;
  }
  .tabla-envoltorio .tabla--lista tr:last-child {
    border-bottom: 0;
    font-weight: 700;
  }
  .tabla-envoltorio .tabla--lista th,
  .tabla-envoltorio .tabla--lista td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    white-space: normal;
  }
  .tabla-envoltorio .tabla--lista td::before {
    content: none;
  }
}
/* El textarea no hereda la tipografía por defecto: sin esto, las notas del
   cierre se veían en letra de máquina de escribir. */
.campo textarea {
  font-family: var(--texto);
  line-height: 1.5;
}
/* =============================================================================
   Borderó directo (sin presupuesto)
   -----------------------------------------------------------------------------
   La ficha de la función arriba de todo, las filas con nombre editable y las
   deducciones para elegir. Con presupuesto, la ficha viene plegada y las
   deducciones se muestran como texto.
   ============================================================================= */
.ficha-funcion {
  margin: 0 0 20px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--r-tarjeta);
}
.ficha-funcion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 48px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
}
.ficha-funcion__cabecera::-webkit-details-marker {
  display: none;
}
.ficha-funcion__titulo {
  color: var(--ui-muted);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ficha-funcion__resumen {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--ui-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ficha-funcion__flecha {
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4px 3px auto;
  border-right: 2px solid var(--ui-accent);
  border-bottom: 2px solid var(--ui-accent);
  transform: rotate(45deg);
  transition: transform var(--motion-fast, 160ms);
}
.ficha-funcion[open] .ficha-funcion__flecha {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}
.ficha-funcion__cabecera:focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: var(--r-tarjeta);
}
.ficha-funcion__campos {
  margin: 0;
  padding: 6px 16px 18px;
  border-top: 1px solid var(--ui-border);
}
.campo-real--nombre {
  width: 100%;
  min-width: 10rem;
  max-width: none;
  margin-left: 0;
  text-align: left;
}
.boton--agregar {
  margin-top: 12px;
}
.rubro > .boton--agregar {
  margin-bottom: 16px;
}
.deducciones {
  margin-top: 28px;
}
.deducciones__titulo {
  margin: 0 0 4px;
  font: 600 var(--fs-5)/1.3 var(--titulo);
  color: var(--ui-ink);
}
.deducciones > .ayuda {
  margin: 0 0 12px;
}
.deducciones__lista {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--r-interno);
}
.deduccion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem 7rem;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  border-top: 1px solid var(--ui-border);
}
.deduccion:first-child {
  border-top: 0;
}
.deduccion--encabezado {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--lienzo);
  border-radius: var(--r-interno) var(--r-interno) 0 0;
  color: var(--grafito);
  font-size: var(--fs-2);
  font-weight: 600;
}
.deduccion--encabezado span:not(:first-child),
.deduccion__monto {
  text-align: right;
}
.deduccion__entidad {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  cursor: pointer;
}
.deduccion__entidad input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ui-accent);
}
.deduccion__alicuota {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.deduccion__alicuota input {
  width: 5rem;
  min-width: 0;
  min-height: 38px;
  margin: 0;
}
.deduccion__pct {
  color: var(--grafito);
  font-size: var(--fs-3);
}
.deduccion__monto {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .deduccion {
    grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem;
    gap: 8px;
    padding-inline: 10px;
    font-size: var(--fs-3);
  }
  .deduccion__alicuota input {
    width: 3.8rem;
    min-height: 44px;
  }
}
.deducciones__retenciones {
  margin-top: 8px;
}
.deducciones__retenciones > summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ui-accent);
  font-size: var(--fs-3);
  font-weight: 600;
  cursor: pointer;
}
@media print {
  .ficha-funcion,
  .deducciones,
  .boton--agregar {
    display: none !important;
  }
}