/* ============================================================
   CALCULADORA DE MULTAS E INTERESES — estilos
   20-08-2026.

   Es la primera página del sitio con un formulario de verdad,
   así que acá nacen los estilos de campo. Si algún día hay otro
   formulario, esto se sube a styles.css; mientras haya uno solo,
   vive en su propio archivo y no le pesa al resto del sitio.

   Criterio de fondo: la herramienta va ARRIBA y ocupa el ancho.
   Quien llega buscando "cuánto me van a cobrar por atrasarme"
   no viene a leer; viene a poner un número. La explicación va
   después, que es además lo que Google necesita para entender
   de qué trata la página.
   ============================================================ */

.calc {
  margin-block: var(--esp-8) var(--esp-16);
}

/* El resto del sitio justifica los párrafos, y en el ancho de un
   artículo eso se ve bien. Acá no: las columnas son angostas y las
   líneas cortas, así que el justificado abre "ríos" de espacio en
   blanco entre palabras. Dentro de la herramienta se alinea a la
   izquierda y se acabó el problema. */
.calc p {
  text-align: left;
}

/* La caja se parte en dos columnas recién cuando hay ancho de
   sobra. Antes de eso, el resultado va debajo del formulario:
   en el teléfono se escribe y se baja la vista, que es el gesto
   natural. */
.calc__caja {
  display: grid;
  gap: var(--esp-6);
  align-items: start;
}

@media (min-width: 900px) {
  .calc__caja {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--esp-8);
  }

  /* 🔴 DÓNDE VA CADA CASILLA, Y POR QUÉ HAY QUE DECIRLO.
     El bloque del correo lo agrega `costo.js` al final de la caja, así
     que era la TERCERA casilla de una rejilla de dos columnas: caía en
     una fila nueva, debajo del formulario, y dejaba la columna derecha
     vacía — un hueco de media pantalla que lo cachó Sergio el
     01-09-2026. Al mismo tiempo quedaba muerto el espacio bajo el
     formulario, porque el resultado es más alto que él.

     Colocando las casillas a mano, el correo sube a ese espacio: el
     hueco desaparece y la caja se acorta 370 px (medido en vivo).

     ⚠️ El resultado ocupa las DOS filas a propósito. Si no, la fila 2
     no existiría para él y el correo quedaría fuera de la caja.
     Comprobado que cuando el correo todavía no está —aparece recién
     tras el primer cálculo— la fila vacía suma 0 px: la caja mide lo
     mismo con él y sin él.

     Bajo 900 px no aplica nada de esto: la caja es de una columna y
     el correo cae solo al final, que es el orden correcto de lectura. */
  .calc__form      { grid-column: 1; grid-row: 1; }
  .calc__correo    { grid-column: 1; grid-row: 2; }
  .calc__resultado { grid-column: 2; grid-row: 1 / span 2; }
}

/* --- FORMULARIO ------------------------------------------- */

.calc__form {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra-md);
  display: grid;
  gap: var(--esp-6);
}

.calc__campo {
  display: grid;
  gap: var(--esp-2);
}

.calc__campo label {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: var(--texto-sm);
  color: var(--color-texto);
}

.calc__campo input[type="text"],
.calc__campo input[type="date"],
/* `number` lo estrenó la calculadora de costo el 01-09-2026. Se suma
   acá y no en un bloque aparte porque tiene que verse EXACTAMENTE
   igual que los otros campos; ninguna de las otras dos calculadoras
   usa este tipo, así que no les cambia nada. */
.calc__campo input[type="number"],
.calc__campo select {
  width: 100%;
  min-height: 48px;                  /* alcanzable con el dedo */
  padding: var(--esp-3) var(--esp-4);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);      /* 16px: menos que eso hace que iOS acerque la pantalla */
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.calc__campo select {
  appearance: none;
  /* La flecha va dibujada acá y no con una imagen: una petición
     menos y se pinta en el color del texto. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%236B665E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-4) center;
  padding-right: var(--esp-12);
}

.calc__campo input:focus-visible,
.calc__campo select:focus-visible {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px rgba(176, 78, 57, .18);
}

/* El monto es el dato protagonista: se escribe más grande y en
   cifras tabulares, para que los puntos de mil queden alineados
   mientras se teclea. */
.calc__campo--monto input {
  font-size: var(--texto-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Marca los campos que se pueden dejar en blanco. Va en la
   etiqueta y no en el texto de ayuda porque se necesita saber
   antes de leer: si es opcional, se salta y listo. */
.calc__opcional {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-texto-sec);
}

.calc__ayuda {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-texto-sec);
  margin: 0;
  max-width: none;
}

.calc__casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-fondo-alt);
  border-radius: var(--radio-sm);
}

.calc__casilla input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--color-acento);
}

.calc__casilla label {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-texto-sec);
  cursor: pointer;
}

.calc__form .boton { width: 100%; }

/* --- RESULTADO -------------------------------------------- */

.calc__resultado {
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  border: 1px solid var(--color-borde);
  background: var(--color-fondo-alt);
}

.calc__resultado:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
}

/* Estado inicial y errores: caja tranquila, sin alarma de color. */
.calc__resultado--vacio,
.calc__resultado--aviso {
  background: var(--color-fondo-alt);
}

.calc__resultado--error {
  background: #FBEFEC;
  border-color: #E9C7BE;
}

.calc__resultado--ok {
  background: var(--color-tarjeta);
  box-shadow: var(--sombra-md);
}

.calc__mensaje {
  margin: 0;
  color: var(--color-texto-sec);
  font-size: var(--texto-base);
  line-height: 1.6;
  max-width: none;
}

.calc__resultado--error .calc__mensaje { color: var(--color-error); }

/* Antes iba en versalitas. Se sacó cuando el encabezado pasó a
   llevar la fecha adentro: "SI PAGAS EL 20 DE AGOSTO DE 2026"
   se lee como un grito, y la frase es informativa, no un rótulo. */
.calc__titulo {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-texto-sec);
  margin: 0 0 var(--esp-4);
}

/* El total va en verde salvia y no en rojo: la página ya trae
   suficiente mala noticia como para además gritarla.

   Va al final y no arriba: el desglose se lee como una suma hecha a
   mano —impuesto, recargos, total sin condonación, rebaja— y este es
   el renglón que la cierra. */
.calc__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  background: var(--color-superficie);
  color: #FFFDFA;
  border-radius: var(--radio-md);
  padding: var(--esp-4) var(--esp-6);
  margin-top: var(--esp-6);
}

.calc__total span {
  font-size: var(--texto-sm);
  opacity: .85;
}

.calc__total strong {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.calc__desglose {
  display: grid;
  gap: var(--esp-1);
}

.calc__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--color-borde);
}

/* Estos son los estilos de SIEMPRE, los que usa la calculadora de
   multas. La de sueldo los pisa mas abajo con sus propios selectores.

   🔴 ESTE ARCHIVO LO COMPARTEN LAS DOS CALCULADORAS. La compactacion
   del 28-08-2026 se escribio primero sin apellido —`.calc__fila`,
   `.calc__form`— y con eso le borro las ayudas y le cambio el
   formulario a la de multas, que nadie pidio tocar. Todo lo de ese
   bloque va colgado de `#calculadora-sueldo` y `#sueldo-resultado`. */
.calc__concepto strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 600;
}

.calc__concepto span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-texto-sec);
  margin-top: 2px;
}

.calc__monto {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* El subtotal antes de la condonación: cierra la columna de sumas
   con una línea gruesa, igual que en una boleta. Lo que viene
   después ya no suma, resta. */
.calc__fila--suma {
  border-bottom: 0;
  border-top: 2px solid var(--color-borde);
  margin-top: var(--esp-2);
  padding-top: var(--esp-4);
}

.calc__fila--suma .calc__monto,
.calc__fila--suma .calc__concepto strong {
  color: var(--color-acento);
}

.calc__lectura {
  margin: var(--esp-6) 0 0;
  font-size: var(--texto-base);
  line-height: 1.6;
  max-width: none;
}

/* El aviso de condonación es la parte accionable del resultado:
   es lo único que el lector todavía puede cambiar. */
.calc__condonacion {
  margin: var(--esp-4) 0 0;
  padding: var(--esp-4);
  border-left: 3px solid var(--color-salvia);
  background: var(--color-fondo-alt);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: none;
}

.calc__condonacion--vencida {
  border-left-color: var(--color-acento);
}

.calc__nota {
  margin: var(--esp-4) 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-texto-sec);
  max-width: none;
}

.calc__nota--estimado {
  color: var(--color-texto);
  background: #FDF6E9;
  border-radius: var(--radio-sm);
  padding: var(--esp-3) var(--esp-4);
}

/* --- SIN JAVASCRIPT ---------------------------------------
   La calculadora no funciona sin JS, así que conviene decirlo
   en vez de dejar un formulario que no responde.             */

.calc__sinjs {
  margin-top: var(--esp-4);
  padding: var(--esp-4);
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto-sec);
  font-size: 0.9375rem;
  max-width: none;
}

/* --- TEXTO SOLO PARA LECTORES DE PANTALLA ------------------
   Títulos y leyendas de tabla que el lector vidente no necesita
   —porque el contexto visual ya se lo dice— pero que quien
   navega escuchando sí necesita para saber dónde está parado.
   No se usa display:none: eso los borra también del lector.   */

.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* La rebaja va en verde y con el signo menos por delante: es la única
   línea del desglose que resta, y conviene que se vea distinta de las
   que suman sin tener que leerla. */
.calc__fila--rebaja {
  border-bottom: 0;                  /* es la última línea del desglose */
}

/* --- LA CALCULADORA DE SUELDOS ------------------------------
   Tiene dos totales y no uno, porque es un cálculo mirado desde
   los dos lados: arriba lo que desembolsa la empresa, abajo lo
   que recibe el trabajador, y en medio la escalera que explica
   por qué son cifras tan distintas.

   El costo va en terracota y el líquido en verde salvia. No es
   decoración: son los dos extremos de la misma cuenta y conviene
   que se distingan de un vistazo, incluso al hojear.            */

.calc__total--costo {
  background: var(--color-acento);
  margin-bottom: var(--esp-8);       /* separa los dos bloques */
}

/* Los encabezados de bloque, cuando hay dos cuentas seguidas. El
   primero no lleva margen arriba porque abre el resultado. */
.calc__resultado--ok .calc__titulo { margin-top: 0; }
.calc__resultado--ok .calc__total + .calc__titulo { margin-top: var(--esp-2); }

/* Sobre terracota el texto chico necesita algo más de cuerpo que
   sobre el verde: con .85 de opacidad se empezaba a perder. */
.calc__total--costo span { opacity: .92; }

/* Las líneas que restan van en terracota, para que se lean
   distinto de las que suman sin tener que fijarse en el signo. */
.calc__fila--resta .calc__monto { color: var(--color-acento); }

.calc__fila--resta:last-child { border-bottom: 0; }

.calc__fila--rebaja .calc__monto,
.calc__fila--rebaja .calc__concepto strong {
  color: var(--color-exito);
}

/* ============================================================
   QUE EL CALCULO QUEPA EN UNA PANTALLA (28-08-2026)

   Sergio: «hay mucho texto que hace que la calculadora se vea muy
   extensa», «me gustaria que todo se viera en una misma pantalla,
   sin tener que bajar ni subir», y la barra fija del dia anterior
   «la encuentro muy invasiva».

   De donde salian los pixeles, medido en el navegador:

     formulario 1.982 px  →  665 px eran los textos de ayuda
     resultado  1.874 px  →  1.026 px eran trece filas a dos lineas

   🔴 LA REGLA DE ESTE BLOQUE: nada se borra, todo se mueve de
   sitio. La ayuda de cada campo aparece al usarlo; la prosa de cada
   linea del desglose sale entera en el PDF. El texto sigue en el
   HTML, asi que Google lo sigue leyendo y los lectores de pantalla
   tambien.

   La barra fija del telefono y el resumen pegajoso se eliminaron:
   eran el parche para un resultado que no cabia, y ahora cabe.
   ============================================================ */

.solo-pantalla { display: block; }

/* --- LAS AYUDAS DEL FORMULARIO ---------------------------- */

/* Cada campo llevaba debajo un parrafo de ayuda permanente. Trece
   parrafos son un tercio del alto del formulario, y se leen una
   vez en la vida. Ahora la ayuda aparece cuando el campo se usa.

   🔴 NO SE OCULTA CON display:none. Asi el texto desaparece
   tambien para los lectores de pantalla, y estas ayudas son
   justamente lo que le da sentido a un campo como «tasa adicional
   de la mutual». Se esconde a la vista pero se deja en el arbol de
   accesibilidad, que es lo que hace .sr-solo en el resto del
   sitio. */
#calculadora-sueldo .calc__campo .calc__ayuda {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#calculadora-sueldo .calc__campo:focus-within .calc__ayuda {
  position: static;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Una pista de que la ayuda existe: sin ella el campo parece pelado
   y nadie descubre que hay algo que leer. */
#calculadora-sueldo .calc__campo > label::after {
  content: " ?";
  font-size: 0.75em;
  font-weight: 400;
  color: var(--color-texto-sec);
  opacity: .55;
}
#calculadora-sueldo .calc__campo:focus-within > label::after { opacity: 0; }

/* La casilla de la gratificacion y el campo del monto no llevan
   marca: el primero ya es una frase larga y el segundo es el campo
   que todos entienden. */
#calculadora-sueldo .calc__campo--monto > label::after { content: none; }

/* --- LOS CAMPOS, EN DOS COLUMNAS -------------------------- */

/* Once campos en una columna son 2,8 pantallas. En dos columnas, y
   con las ayudas guardadas, el formulario entero cabe de una vez.
   La pregunta del modo, el campo del monto y la casilla ocupan el
   ancho completo: son el principio y el final del recorrido.

   🔴 EL MODO ESTÁ ACÁ PORQUE SU TEXTO NO CABE EN MEDIA COLUMNA.
   Medido el 01-09-2026: en media columna el select queda en 207 px y
   entre el relleno de los lados y el espacio de la flecha le sobran
   143 px para el texto. «Sé el costo para la empresa» necesita 207 y
   «Sé el líquido a pagar», 150: las dos salían cortadas con puntos
   suspensivos, y una opción que no se lee entera es una opción que
   nadie elige. A fila completa el select llega a 430 px y las tres
   caben con holgura. Es además la primera pregunta del formulario y
   la que decide qué significan todas las demás. */
@media (min-width: 560px) {
  #calculadora-sueldo {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-4) var(--esp-4);
    align-items: start;
  }
  #calculadora-sueldo .calc__campo--modo,
  #calculadora-sueldo .calc__campo--monto,
  #calculadora-sueldo .calc__casilla,
  #calculadora-sueldo .boton,
  #calculadora-sueldo noscript { grid-column: 1 / -1; }
}

/* --- LAS FILAS DEL DESGLOSE ------------------------------- */

/* Concepto y dato en la misma linea; la prosa, solo en el papel.
   Trece filas pasan de 90 px a unos 40 px. */
#sueldo-resultado .calc__concepto .calc__prosa { display: none; }

#sueldo-resultado .calc__fila { padding: var(--esp-2) 0; }

#sueldo-resultado .calc__concepto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--esp-2);
  min-width: 0;
}

#sueldo-resultado .calc__concepto > strong {
  display: inline;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 600;
  line-height: 1.35;
}

#sueldo-resultado .calc__concepto .calc__dato {
  display: inline;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-texto-sec);
  margin: 0;
}

/* --- EL BOTON DEL PDF ------------------------------------- */

/* Es el entregable de la pagina: la hoja con la marca que se le
   deja al cliente. Estaba en gris de boton secundario, debajo de
   un parrafo de instrucciones de impresora. */
#sueldo-resultado .calc__total {
  padding: var(--esp-3) var(--esp-4);
  margin-top: var(--esp-4);
}

#sueldo-resultado .calc__total strong {
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2rem);
}

#sueldo-resultado .calc__imprimir {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--color-borde);
  display: grid;
  gap: var(--esp-2);
  justify-items: start;
}

#sueldo-resultado .calc__imprimir .boton { font-size: var(--texto-base); }

#sueldo-resultado .calc__imprimir__ayuda {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-texto-sec);
}

/* --- EL CORREO, DESPUES DE LA DESCARGA --------------------
   Aparece recien cuando el dialogo de impresion se cerro, o sea
   cuando la persona ya tiene su PDF. Por eso puede permitirse ser
   una invitacion y no un peaje. */

.calc__correo {
  margin-top: var(--esp-4);
  padding: var(--esp-4);
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-left: 3px solid var(--color-salvia);
  border-radius: var(--radio-sm);
}

.calc__correo__titulo {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 600;
}

.calc__correo__texto {
  margin: 0 0 var(--esp-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-texto-sec);
  max-width: none;
}

.calc__correo__linea {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.calc__correo__linea input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-tarjeta);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
}

.calc__correo__linea input:focus-visible {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px rgba(176, 78, 57, .18);
}

.calc__correo__linea .boton { flex: none; }

.calc__correo__acuerdo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-texto-sec);
  cursor: pointer;
}

.calc__correo__acuerdo input {
  width: 18px; height: 18px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--color-acento);
}

.calc__correo__aviso:empty { display: none; }

.calc__correo__aviso {
  margin: var(--esp-2) 0 0;
  font-size: 0.8125rem;
  color: var(--color-texto-sec);
}

/* ============================================================
   REPORTE EN PDF (24-08-2026, rehecho el 26-08-2026,
   vestido con la marca el 27-08-2026)

   No hay librería que cargar. El PDF lo genera el propio
   navegador con «Guardar como PDF» desde el diálogo de
   impresión, y esta hoja decide qué sale y cómo.

   El motivo de hacerlo así y no con jsPDF es que una librería
   obliga a escribir el desglose DOS VECES —una para la pantalla
   y otra para el papel— y en este proyecto ya sabemos cómo
   termina eso: las dos copias se separan y nadie se da cuenta.
   Acá se imprime exactamente el mismo HTML que se está viendo,
   así que el papel no puede decir algo distinto de la pantalla.

   🔴 LA PRIMERA VERSIÓN SALIÓ FEA Y ESTAS FUERON LAS CAUSAS.
   Sergio bajó el PDF el 26-08-2026 y tenía razón. Al abrirlo:

     * la hoja medía 842 × 1191 puntos, o sea A3. Sin regla
       @page el navegador usa el papel que tenga configurado, y
       en A3 todo sale estirado y con márgenes absurdos;

     * el archivo pesaba 402 KB y el texto venía como CURVAS, no
       como texto: la tipografía web se incrustaba entera en el
       PDF. No se podía ni buscar ni seleccionar una cifra;

     * los títulos de bloque salían MÁS CHICOS que las filas
       (13,2 px contra 14,67 px), porque en pantalla son gris
       tenue y en papel eso no se lee como jerarquía;

     * el reporte ocupaba 1,64 hojas para nueve líneas, porque
       las filas de pantalla miden 66 px de alto.

   Todo lo de abajo son medidas de papel —milímetros y puntos—,
   no las de pantalla. Es la diferencia entre imprimir una web y
   entregar un documento.

   ---- LA MARCA EN EL PAPEL (27-08-2026) ----
   La hoja arreglada seguía siendo un documento en blanco y negro,
   y esta hoja se le entrega a clientes: es carta de presentación.
   Ahora lleva el logo, la terracota y el verde salvia del sitio,
   la cursiva de la casa en el titular y la firma con el contacto.

   Los colores NO se escriben acá: se toman de tokens.css con
   var(--color-acento) y compañía. Si algún día cambia la paleta
   del sitio, el reporte cambia con ella y no queda un documento
   con los colores viejos circulando por ahí.

   🔴 LA REGLA QUE MANDA EN TODO ESTE BLOQUE: el color de marca
   viaja en el TEXTO y en los BORDES, nunca en un texto claro
   sobre fondo de color. Los rellenos se piden con
   print-color-adjust: exact, pero si la impresora los ignora la
   hoja tiene que seguir leyéndose entera. En la primera versión
   el total salía blanco sobre blanco y el número desaparecía.
   ============================================================ */

.solo-papel { display: none; }
.calc__imprimir { margin-top: var(--esp-2); }

@page {
  size: A4 portrait;
  /* El margen inferior es el umbral donde el navegador corta la
     hoja. Medido: con 20 mm el reporte todavia cabe en una pagina y
     con 25 mm se parte, asi que a 10 mm quedan unos 13 mm de colchon
     para los avisos que aparecen solo en algunos casos. */
  margin: 10mm 14mm 12mm;
}

@media print {
  /* Fuera todo lo que no es el reporte. El título y la bajada de
     la página tampoco van: el reporte trae su propia cabecera, y
     repetirlos gasta un tercio de la primera hoja diciendo dos
     veces lo mismo. Las fuentes de la página tampoco, porque el
     pie del reporte ya resume de dónde sale cada número. */
  .nav, .footer, .saltar, .migas, .calc__form,
  .articulo__cta, .articulo__faq, .articulo__fuentes,
  .articulo__cabecera, .calc__imprimir, .sr-solo,
  /* El resumen de dos cifras y la barra del teléfono son ayudas de
     pantalla: en el papel cada total ya va pegado a las líneas que
     lo explican, y repetirlos arriba gastaría hoja diciendo dos
     veces lo mismo. */
  .solo-pantalla, .calc__correo,
  .calc__nota--intro, .tabla-scroll, .articulo__cuerpo h2,
  .articulo__cuerpo p, .articulo__cuerpo ul, .destacado-dato {
    display: none !important;
  }

  .solo-papel { display: block; }

  /* 🔴 Tipografía del sistema, no la de la web. La fuente propia
     se incrusta entera en el PDF —402 KB por una hoja— y el texto
     termina convertido en curvas, así que no se puede seleccionar
     ni buscar una cifra. Con la del sistema el archivo baja a
     unas pocas decenas de KB y el texto sigue siendo texto.
     La única excepción está más abajo: la palabra en cursiva del
     título, que son cinco letras y pesa nada. */
  html, body,
  .calc__resultado, .calc__resultado *,
  .solo-papel, .solo-papel * {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  }

  /* 🔴 Esto es lo que hace que el color llegue al papel. Chrome
     imprime en blanco y negro los fondos salvo que se le pida lo
     contrario, y sin esta línea la hoja sale como antes.
     Aun así, NINGÚN dato del reporte depende de que el fondo se
     imprima: el color de marca viaja en el TEXTO y en los BORDES,
     que salen siempre. Los rellenos son un plus, no la estructura.
     Es la lección de la primera versión, donde el total se ponía
     blanco sobre blanco y desaparecía. */
  html, body, .solo-papel, .solo-papel *,
  .calc__resultado, .calc__resultado * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html, body {
    background: #fff !important;
    color: var(--color-texto) !important;
    font-size: 10pt;
    line-height: 1.35;
  }

  .contenedor { max-width: none; padding: 0; margin: 0; }
  main, article, section, .calc, .calc__caja {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .calc__resultado {
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  /* ---------- Membrete ----------
     El logo del sitio es blanco sobre transparente, para que se lea
     sobre el verde de la barra. En papel blanco sería invisible, así
     que se da vuelta con el mismo filtro que usa la navegación. Se
     invierte a negro puro, no al tinta de la paleta: un filtro no
     sabe teñir, y el logo de la casa es blanco y negro. */
  .papel__marca {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8mm;
  }
  .papel__logo {
    width: 32mm;
    height: auto;
    filter: invert(1);
  }
  .papel__fecha {
    margin: 0;
    font-size: 8pt;
    color: var(--color-texto-sec) !important;
    text-align: right;
  }

  /* La regla terracota es el sello de la hoja. Va gruesa a propósito:
     es lo primero que se ve y lo único que separa el membrete del
     documento. Al ser un borde, se imprime siempre. */
  .papel__cabecera {
    border-bottom: 2.5pt solid var(--color-acento);
    padding-bottom: 2mm;
    margin-bottom: 2.5mm;
  }
  .papel__titulo {
    font-size: 16pt;
    font-weight: 700;
    color: var(--color-texto) !important;
    letter-spacing: -.4pt;
    line-height: 1.1;
    margin: 2.6mm 0 0;
  }
  /* LA CURSIVA DE LA CASA, la misma del sitio: una palabra suelta
     dentro del titular, en serif itálica y terracota. Es el único
     adorno y por eso funciona. Acá se incrusta el subconjunto de
     cinco letras, que pesa unos pocos KB. */
  .papel__titulo em {
    font-family: var(--fuente-serif) !important;
    font-style: italic;
    font-weight: 400;
    color: var(--color-acento) !important;
    font-size: 1.08em;
    letter-spacing: -.01em;
  }
  .papel__bajada {
    margin: 1mm 0 0;
    font-size: 8.5pt;
    color: var(--color-salvia) !important;
    max-width: none;
  }

  /* ---------- Ficha del cálculo ----------
     Los parámetros van en dos columnas, sobre el crema de la casa y
     con una línea salvia al costado. Es la ficha de lo que se pidió,
     no parte del resultado, y tiene que leerse como algo aparte. */
  .papel__ficha {
    background: var(--color-fondo-alt) !important;
    border-left: 2pt solid var(--color-salvia) !important;
    border-radius: 0 1.5mm 1.5mm 0;
    padding: 2.4mm 3.5mm;
    margin: 0 0 2.8mm;
    break-inside: avoid;
  }
  .papel__ficha__titulo {
    margin: 0 0 1.2mm;
    font-size: 7.5pt !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6pt;
    color: var(--color-salvia) !important;
  }
  .papel__datos {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 8.5pt;
    line-height: 1.38;
    color: var(--color-texto) !important;
    columns: 2;
    column-gap: 7mm;
  }
  .papel__datos li { break-inside: avoid; margin: 0; }
  .papel__datos strong { color: var(--color-salvia) !important; font-weight: 700; }

  /* ---------- Títulos de bloque ----------
     En pantalla son gris tenue y chicos. En papel eso no se lee
     como jerarquía: acá van en salvia, en mayúsculas, más grandes
     que las filas y con una regla debajo. */
  .calc__titulo {
    font-size: 9.5pt !important;
    font-weight: 700 !important;
    color: var(--color-salvia) !important;
    text-transform: uppercase;
    letter-spacing: .6pt;
    margin: 2.6mm 0 1.2mm !important;
    padding-bottom: 1mm;
    border-bottom: .75pt solid var(--color-salvia);
    break-after: avoid;
  }
  .calc__resultado--ok .calc__titulo:first-of-type { margin-top: 0 !important; }

  /* ---------- Filas del desglose ----------
     66 px de alto por fila en pantalla son 17 mm en papel: el
     reporte se iba a dos hojas. Acá cada fila mide lo que tiene
     que medir. La línea divisoria es el borde crema del sitio, un
     punto más oscuro para que la tinta lo alcance. */
  .calc__fila {
    padding: .45mm 0 !important;
    border-bottom: .4pt solid #D9CFC0 !important;
    gap: 6mm !important;
    break-inside: avoid;
  }
  /* 🔴 EN PAPEL, CONCEPTO Y EXPLICACIÓN VAN EN LA MISMA LÍNEA.
     En pantalla la explicación va debajo, en un renglón propio, y
     ahí se lee bien. En el papel eso costaba DOS líneas por fila:
     con trece filas eran unos 40 mm, y el reporte de un sueldo con
     horas extras se iba a una segunda hoja que llevaba solo el pie.
     Puestas en una línea, cada fila ocupa lo que ocupa un renglón de
     liquidación —que es justamente lo que esto es— y el reporte
     vuelve a caber entero.
     El separador se dibuja desde acá y no desde el JS: es una
     decisión de cómo se ve en papel, no de qué dice el cálculo. */
  .calc__concepto strong {
    display: inline !important;
    font-size: 9.5pt !important;
    font-weight: 600 !important;
    color: var(--color-texto) !important;
  }
  .calc__concepto strong::after {
    content: " · ";
    color: var(--color-texto-sec);
    font-weight: 400;
  }
  /* El dato corto («11,27%») y la prosa son dos <span> distintos
     desde el 28-08-2026: en pantalla solo se ve el primero. En papel
     salen los dos y necesitan el separador entre medio. */
  .calc__dato:not(:last-child)::after {
    content: " · ";
    color: var(--color-texto-sec);
  }
  .calc__concepto span {
    display: inline !important;
    font-size: 7.6pt !important;
    color: var(--color-texto-sec) !important;
    margin: 0 !important;
    line-height: 1.22 !important;
  }
  .calc__monto {
    font-size: 9.5pt !important;
    font-weight: 700 !important;
    color: var(--color-texto) !important;
  }
  /* Los descuentos en terracota y las rebajas en verde, igual que en
     pantalla: el color dice de qué lado está el número. */
  .calc__fila--resta .calc__monto { color: var(--color-acento) !important; }
  .calc__fila--rebaja .calc__monto,
  .calc__fila--rebaja .calc__concepto strong { color: var(--color-exito) !important; }
  .calc__fila--suma {
    border-top: 1pt solid var(--color-salvia) !important;
    padding-top: 1.5mm !important;
  }

  /* ---------- Totales ----------
     Los dos remates de la hoja: lo que recibe el trabajador en
     terracota, lo que le cuesta a la empresa en salvia. Se
     distinguen por color, igual que en el sitio.
     🔴 El color va en el BORDE y en la CIFRA, nunca en un texto
     blanco sobre fondo de color. Así, si la impresión sale sin
     fondos, el total sigue leyéndose: en la primera versión el
     texto blanco sobre blanco hacía desaparecer el número. */
  .calc__total,
  .calc__total--costo {
    background: var(--color-fondo-alt) !important;
    color: var(--color-texto) !important;
    border: 0 !important;
    border-left: 3pt solid var(--color-acento) !important;
    border-radius: 0 1.5mm 1.5mm 0 !important;
    padding: 2.2mm 4mm !important;
    margin-top: 2.3mm !important;
    break-inside: avoid;
  }
  .calc__total--costo { border-left-color: var(--color-salvia) !important; }

  .calc__total span,
  .calc__total--costo span {
    color: var(--color-texto-sec) !important;
    opacity: 1 !important;
    font-size: 9pt !important;
    font-weight: 600;
  }
  .calc__total strong {
    color: var(--color-acento) !important;
    font-size: 16pt !important;
    letter-spacing: -.4pt;
  }
  .calc__total--costo strong {
    color: var(--color-salvia) !important;
    font-size: 16pt !important;
    letter-spacing: -.4pt;
  }

  /* ---------- Notas y avisos ----------
     🔴 La nota genérica del final («cálculo referencial con los
     valores de...») NO se imprime: dice lo mismo que el pie del
     reporte, y sus 34 px eran justo los que empujaban el reporte a
     una segunda hoja. El aviso de «resultado estimado» sí se
     imprime, porque ese no está en ninguna otra parte. */
  .calc__nota { display: none !important; }
  .calc__nota--estimado { display: block !important; }

  .calc__lectura,
  .calc__condonacion,
  .calc__nota--estimado {
    font-size: 8pt !important;
    line-height: 1.32 !important;
    color: var(--color-texto-sec) !important;
    background: #fff !important;
    border: 0 !important;
    border-left: 1.5pt solid var(--color-borde) !important;
    border-radius: 0 !important;
    padding: .5mm 0 .5mm 3mm !important;
    margin: 1.6mm 0 0 !important;
    max-width: none !important;
    break-inside: avoid;
  }
  .calc__lectura strong,
  .calc__condonacion strong { color: var(--color-texto) !important; }

  /* ---------- Pie del reporte ---------- */
  .papel__pie {
    margin-top: 3.2mm;
    padding-top: 1.8mm;
    border-top: .75pt solid var(--color-borde);
    font-size: 7pt;
    line-height: 1.35;
    color: var(--color-texto-sec) !important;
    break-inside: avoid;
  }
  .papel__pie p { margin: 0 0 1mm; max-width: none; }
  .papel__pie strong { color: var(--color-texto) !important; }

  /* La firma cierra la hoja. Va en salvia y separada por una regla
     terracota fina: es la línea que dice de quién es el documento. */
  .papel__firma {
    margin: 2mm 0 0 !important;
    padding-top: 1.5mm;
    border-top: 1.5pt solid var(--color-acento);
    font-size: 8pt !important;
    color: var(--color-salvia) !important;
  }
  .papel__firma strong {
    color: var(--color-acento) !important;
    letter-spacing: .3pt;
  }
  .papel__firma__sep { color: var(--color-borde) !important; }

  /* En papel un enlace no se puede pinchar: que no imprima la URL. */
  a[href]::after { content: ""; }
}

/* Aviso al lado del botón del PDF. Va acá y no en el HTML porque el
   botón se dibuja desde el JS junto con el resultado. */
.calc__imprimir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.calc__imprimir__ayuda {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-texto-sec);
  flex: 1 1 16rem;
}


/* ==================================================================
   EL GRÁFICO DE LAS TRES CIFRAS — solo la calculadora de sueldo
   ------------------------------------------------------------------
   ⚠️ Todo cuelga de #sueldo-resultado: `calculadora.css` la comparten
   las dos calculadoras y un selector suelto le rompe la de multas
   (§5.32). Las barras son HTML, no SVG: así las cifras son texto de
   verdad, se leen a 16px en teléfono y siguen ahí si una impresora
   decide ignorar los fondos de color.
   ================================================================== */

#sueldo-resultado .calc__grafico {
  margin: 0 0 var(--esp-6);
}

#sueldo-resultado .calc__barras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}

/* ⚠️ `text-align` se hereda hacia adentro: la regla de justificado
   del sitio alcanza al <li> y desde ahí a los <span>, y el rótulo
   salía con las palabras separadas y partido en dos líneas. Se apaga
   acá y en los descendientes, igual que `.paso, .paso *` (§5.5). */
#sueldo-resultado .calc__barra,
#sueldo-resultado .calc__barra * {
  text-align: left;
  hyphens: manual;
}

#sueldo-resultado .calc__barra {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-3);
  margin: 0;
}

#sueldo-resultado .calc__barra__rotulo {
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
}

#sueldo-resultado .calc__barra .calc__barra__cifra {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* La pista ocupa las dos columnas y va debajo: con la cifra al lado,
   a 320px de ancho la barra quedaba en nada. */
#sueldo-resultado .calc__barra__pista {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: var(--radio-full);
  background: var(--color-fondo-alt);
  overflow: hidden;
}

#sueldo-resultado .calc__barra__relleno {
  display: block;
  height: 100%;
  border-radius: var(--radio-full);
  background: var(--color-texto-sec);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* 🔴 Los colores son los MISMOS que ya usan los dos totales más abajo
   en esta misma pantalla: `.calc__total--costo` es terracota y
   `.calc__total` es verde salvia. Invertirlos —aunque el reporte
   impreso los use al revés— dejaba el mismo dato de dos colores en
   una sola pantalla. El del medio va neutro porque no es un
   resultado: es el punto del que salen los otros dos. */
#sueldo-resultado .calc__barra--costo .calc__barra__relleno { background: var(--color-acento); }
#sueldo-resultado .calc__barra--pactado .calc__barra__relleno { background: var(--color-texto-sec); }
#sueldo-resultado .calc__barra--liquido .calc__barra__relleno { background: var(--color-salvia); }

#sueldo-resultado .calc__barra--costo .calc__barra__cifra { color: var(--color-acento); }
#sueldo-resultado .calc__barra--liquido .calc__barra__cifra { color: var(--color-salvia); }

#sueldo-resultado .calc__grafico__nota {
  margin: var(--esp-3) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
  text-align: left;
  hyphens: manual;
}

/* Con espacio, rótulo · barra · cifra van en UNA línea: apiladas, las
   tres barras costaban 153 px de los 234 del bloque. Bajo 700 px el
   panel del resultado se angosta a ~343 px y ahí la barra en línea
   queda en nada, así que vuelve a apilarse. */
@media (min-width: 700px) {
  #sueldo-resultado .calc__barra {
    grid-template-columns: 165px minmax(0, 1fr) 105px;
    align-items: center;
    gap: var(--esp-3);
  }
  #sueldo-resultado .calc__barra__pista { grid-column: auto; order: 2; }
  #sueldo-resultado .calc__barra__cifra { order: 3; }
}


/* ==================================================================
   DE QUÉ ESTÁ HECHO EL TOTAL — solo la calculadora de multas
   ------------------------------------------------------------------
   ⚠️ Todo cuelga de #calc-resultado. `calculadora.css` la comparten
   las dos calculadoras y un selector suelto le rompe la de sueldos
   (§5.32). La de sueldos usa #sueldo-resultado.

   Una sola barra partida en dos: lo que siempre debiste y lo que
   agregó el atraso. El desglose de más abajo dice de qué está hecho
   ese recargo; esta barra dice cuánto pesa.
   ================================================================== */

#calc-resultado .calc__mezcla {
  margin: 0 0 var(--esp-6);
}

#calc-resultado .calc__mezcla__barra {
  display: flex;
  height: 26px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  overflow: hidden;
  background: var(--color-fondo-alt);
}

#calc-resultado .calc__mezcla__parte {
  display: block;
  height: 100%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* 🔴 UN SOLO COLOR RELLENA LA BARRA, y no es capricho: salvia contra
   terracota da **1,27:1**, o sea los dos tramos tienen casi la misma
   luminosidad y el corte entre ellos no se distingue —menos aún sin
   ver color—. Dejando el tramo del impuesto sin rellenar, el terracota
   queda contra la pista crema: **4,52:1**, sobre el mínimo de 3:1 que
   pide un elemento gráfico, y se lee igual en blanco y negro.
   De paso obedece la regla de la casa: la terracota es el único color
   fuerte de la pantalla, y acá marca justo la mala noticia. */
#calc-resultado .calc__mezcla__parte--impuesto { background: transparent; }
#calc-resultado .calc__mezcla__parte--recargo  { background: var(--color-acento); }

#calc-resultado .calc__mezcla__leyenda,
#calc-resultado .calc__mezcla__leyenda * {
  text-align: left;
  hyphens: manual;
}

#calc-resultado .calc__mezcla__leyenda {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-6);
}

#calc-resultado .calc__mezcla__leyenda li {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-sec);
}

#calc-resultado .calc__mezcla__punto {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--radio-full);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* El punto del impuesto repite la pista vacía, con su mismo filete:
   así la leyenda dice lo mismo que muestra la barra. */
#calc-resultado .calc__mezcla__punto--impuesto {
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
}
#calc-resultado .calc__mezcla__punto--recargo  { background: var(--color-acento); }

/* --- CALCULADORA DE COSTO: los campos que se esconden ---------------
   🔴 `hidden` NO alcanza. El atributo trae `display:none` de la hoja del
   navegador, con especificidad (0,0,0), y `.calc__campo { display:grid }`
   (0,1,0) le gana: el campo queda con hidden=true y a la vista igual.
   Se vio el 01-09-2026 en una captura — «¿Cómo la quieres constituir?»
   aparecía sin marcar la casilla —, y una comprobación anterior había
   dado «oculto: true» porque leía el ATRIBUTO y no el display calculado.

   > Regla que queda: para saber si algo se ve, se mide
   > `getComputedStyle(...).display`, nunca `elemento.hidden`.

   Va colgado de `#calculadora-costo` porque este archivo lo comparten
   las tres calculadoras (§5.32). */
#calculadora-costo [hidden] { display: none; }

/* --- LA LISTA DE QUE ENTRA Y QUE NO ------------------------
   Lo pidio Sergio el 01-09-2026: un precio sin alcance escrito
   genera trabajo que nadie cobro. La marca (✓ o —) va DENTRO del
   texto del <li> y no como vinieta de CSS, a proposito: asi viaja
   tal cual en el correo que recibe la persona, que se arma con el
   texto plano de este mismo bloque.

   Colgado de #costo-resultado porque este archivo lo comparten las
   tres calculadoras (§5.32). */
#costo-resultado .calc__ambito {
  display: grid;
  gap: 5px;
  margin: 0 0 var(--esp-4);
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-texto-sec);
}

#costo-resultado .calc__ambito li {
  padding-left: 1.35em;
  text-indent: -1.35em;
}

/* ==================================================================
   ENLACES DENTRO DE LOS AVISOS DEL RESULTADO (07-09-2026)
   ------------------------------------------------------------------
   🔴 Misma familia del hallazgo del 08-08-2026 con `.articulo__cta`
   (memoria.md §5.4): el resultado de la calculadora no está dentro de
   `.articulo__cuerpo`, así que la regla del terracota no lo alcanza y
   un enlace salía con el AZUL DE FÁBRICA del navegador —y morado el
   visitado—, que sobre el papel crema se lee como un error.

   Medido, no supuesto: terracota `#B04E39` sobre el fondo del aviso
   `#F4EDE3` da **4,52:1**, sobre el mínimo de 4,5:1 para texto normal;
   al pasar el mouse, `#96412E` da 5,84:1.

   Colgado de #sueldo-resultado porque este archivo lo comparten las
   tres calculadoras (§5.32) y hoy solo esta tiene enlaces en sus
   avisos.
   ================================================================== */
#sueldo-resultado .calc__condonacion a {
  color: var(--color-acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#sueldo-resultado .calc__condonacion a:hover,
#sueldo-resultado .calc__condonacion a:focus-visible {
  color: var(--color-acento-oscuro);
}