/* ============================================================
   CALCULADORA — la SPA vestida con la piel de SDL

   🔴 POR QUÉ EXISTE ESTE ARCHIVO Y NO SE METIÓ EN styles.css

   `css/styles.css` es el cascarón de codex, copiado byte a byte
   (MD5 11EA6D5621B60247512005F06F83D375). No se toca: cualquier
   edición allí rompe la garantía de «mismos archivos, sin cambios».

   Las clases que pinta `js/app.js` —`.campo`, `.opcion`, `.bloque`,
   `.concepto`, `.importe`…— no existen en el cascarón, porque el
   cascarón era una demo sin motor. Viven aquí, y se definen SOLO
   con las variables que ya declara el cascarón (--imss, --line,
   --ink, --muted, --warn, --mint, --paper, --white). Así el color
   no puede divergir: si el cascarón cambia su verde, esto cambia
   con él.

   🔴 NO RENOMBRAR NINGUNA CLASE. `app.js` es la capa más tonta del
   sistema a propósito y las emite tal cual; renombrar aquí obliga a
   meter lógica de presentación allí, que es justo lo que el diseño
   del motor evita.
   ============================================================ */

/* ---------- Contenedor y pantallas ---------- */
.calc-main { padding: 44px 0 72px; }
.pantalla { display: none; }
.pantalla.activa { display: block; animation: aparece .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .pantalla.activa { animation: none; } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.calc-main h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.02; letter-spacing: -.045em; margin: 0 0 20px;
}
.calc-main h1 span { color: var(--imss); }
.entrada { font-size: 18px; color: #34423f; max-width: 62ch; margin: 0 0 32px; }

/* ---------- Portada · la promesa ---------- */
.promesa {
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--imss); padding: 28px 30px; margin-bottom: 28px;
}
.promesa h2 { font-size: 20px; margin: 0 0 16px; }
.promesa ul { list-style: none; margin: 0; padding: 0; }
.promesa li { padding: 13px 0; border-top: 1px solid var(--line); color: #40504c; font-size: 15px; }
.promesa li:first-child { border-top: 0; padding-top: 0; }
.promesa li strong { color: var(--ink); }

/* ---------- Borrador guardado ---------- */
.borrador {
  background: var(--mint); border-left: 4px solid var(--imss);
  padding: 20px 22px; margin-bottom: 26px;
}
.borrador p { margin: 0 0 14px; }

/* ---------- Botones ----------
   Heredan del `.button` del cascarón. Se mantiene el nombre `.boton`
   porque es el que ya está escrito en el HTML y en las suites. */
.boton {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 48px; padding: 12px 24px; border-radius: 8px;
  background: var(--imss); border: 1px solid var(--imss); color: var(--white);
  text-decoration: none; font: inherit; font-weight: 750; cursor: pointer;
}
.boton:hover { background: var(--imss-dark); }
.boton.secundario { background: var(--white); color: var(--imss); }
.boton.secundario:hover { background: var(--mint); }
.boton[hidden] { display: none; }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.acciones-final { margin-top: 36px; }

/* Tabla comparativa de las guías (`construir-paginas.mjs` → `tabla`).
   Se desplaza ella en móvil, nunca la página. */
.tabla-scroll { overflow-x: auto; margin: 22px 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.tabla-comparativa { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 13.5px; line-height: 1.4; }
.tabla-comparativa th, .tabla-comparativa td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.tabla-comparativa thead th { background: var(--imss); color: var(--white); font-weight: 750; white-space: nowrap; }
.tabla-comparativa tbody th { font-weight: 750; white-space: nowrap; }
.tabla-comparativa td:nth-child(3) { font-weight: 650; }
.tabla-comparativa td:last-child { background: #f1f5f4; }
.tabla-comparativa tbody tr:last-child th, .tabla-comparativa tbody tr:last-child td { border-bottom: 0; }

/* ---------- Progreso ---------- */
.progreso { height: 6px; background: var(--line); overflow: hidden; margin-bottom: 12px; }
.progreso-barra { height: 100%; width: 0; background: var(--imss); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .progreso-barra { transition: none; } }
.paso {
  color: var(--imss); font-size: 12px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; margin: 0 0 22px;
}

/* ---------- Cuestionario ---------- */
#formulario h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 12px; }
.ayuda { color: var(--muted); font-size: 16px; margin: 0 0 20px; max-width: 62ch; }
.ayuda[hidden] { display: none; }

/* Las dos ayudas plegables. Cerradas por defecto: quien no las
   necesita no las ve y la pantalla no crece. */
.ayuda-extra { display: grid; gap: 8px; margin-bottom: 24px; }
.ayuda-porque, .ayuda-glosario { background: var(--white); border: 1px solid var(--line); }
.ayuda-porque summary, .ayuda-glosario summary {
  cursor: pointer; padding: 13px 16px; font-size: 14px;
  font-weight: 700; color: var(--imss); list-style: none;
}
.ayuda-porque summary::-webkit-details-marker,
.ayuda-glosario summary::-webkit-details-marker { display: none; }
.ayuda-porque summary::before, .ayuda-glosario summary::before { content: "＋ "; font-weight: 800; }
.ayuda-porque[open] summary::before, .ayuda-glosario[open] summary::before { content: "－ "; }
.ayuda-porque p, .ayuda-glosario dl { margin: 0; padding: 0 16px 16px; color: #40504c; font-size: 14px; }
.ayuda-glosario dt { font-weight: 750; margin-top: 10px; }
.ayuda-glosario dt:first-child { margin-top: 0; }
.ayuda-glosario dd { margin: 3px 0 0; color: var(--muted); }

/* U4 · si falta algo se dice qué, y se lleva el foco ahí. */
.error {
  background: #fdf0ee; border-left: 4px solid #9a2f18; color: #7c2614;
  padding: 13px 16px; margin: 0 0 18px; font-weight: 650;
}
.error[hidden] { display: none; }

/* ---------- Campos ---------- */
#campos { display: grid; gap: 14px; max-width: 620px; }
.campo { display: block; }
.campo > span { display: block; font-size: 13px; font-weight: 750; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1px solid #aab7b4; border-radius: 7px; font: inherit; background: var(--white);
}
.campo textarea, #campos textarea { min-height: 116px; resize: vertical; width: 100%;
  padding: 11px 13px; border: 1px solid #aab7b4; border-radius: 7px; font: inherit; background: var(--white); }
.campo input:focus-visible, .campo select:focus-visible, #campos textarea:focus-visible {
  outline: 3px solid #111; outline-offset: 3px;
}

/* Opciones · el área pulsable es la etiqueta entera, no solo el círculo. */
.opcion {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  background: var(--white); border: 1px solid var(--line); padding: 16px 18px;
  cursor: pointer; min-height: 56px;
}
.opcion:hover { border-color: var(--imss); background: var(--mint); }
.opcion:has(input:checked) { border-color: var(--imss); border-left-width: 4px; background: var(--mint); }
.opcion input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--imss); }
.opcion > span { font-size: 15px; }
.opcion small { grid-column: 2; display: block; font-size: 13px; margin-top: 6px; }
/* La alerta advierte; la nota informa. Distinguirlas sin depender
   del color: la alerta lleva barra, la nota no. */
.opcion .alerta { color: var(--warn); border-left: 3px solid var(--warn); padding-left: 10px; }
.opcion .nota-opcion { color: var(--muted); }

.nota-omitir { color: var(--muted); font-size: 13px; margin: 18px 0 0; }
.estado-guardado { color: var(--imss); font-size: 12px; margin: 8px 0 0; }

/* ---------- Resultado · bloques ----------
   El peso lo decide el renderizador, no esta hoja. Aquí solo se
   traduce a jerarquía visual: un condicional nunca puede leerse
   con el mismo énfasis que un confirmado. */
.bloque { background: var(--white); border: 1px solid var(--line); padding: 30px 32px; margin-bottom: 18px; }
.bloque > h2 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 16px; }
.bloque p { color: #40504c; }
.bloque.peso-alto { border-top: 5px solid var(--imss); }
.bloque.peso-alerta, .bloque.peso-critico { border-left: 5px solid var(--warn); background: #fdfaf5; }
.bloque.peso-bajo { background: transparent; border-style: dashed; }

.aviso-fuerte {
  background: #f7f4ef; border-left: 4px solid var(--warn);
  padding: 15px 17px; font-weight: 650; color: #5f5546;
}

/* ---------- Conceptos ---------- */
.concepto { border-top: 1px solid var(--line); padding: 20px 0; }
.concepto:first-of-type { border-top: 0; }
.concepto h3 { font-size: 18px; margin: 0 0 6px; }
.concepto .explicacion { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
/* R19 · qué es esto, antes de cuánto es. */
.concepto .importe {
  font-size: 27px; font-weight: 820; letter-spacing: -.03em;
  color: var(--imss); font-variant-numeric: tabular-nums; margin: 0 0 8px;
}
/* 🔴 A5 · el fundamento es lo que da confianza a la cifra: no puede
   ser el texto más pequeño de la pantalla. 14px, no 13. */
.concepto .fundamento { font-size: 14px; color: var(--imss); font-weight: 700; margin: 0 0 6px; }
.concepto .redaccion { font-size: 14px; color: #40504c; }
.concepto .supuesto, .concepto .advertencia { font-size: 14px; margin: 6px 0 0; }
.concepto .supuesto { color: var(--muted); }
.concepto .supuesto::before { content: "Supuesto: "; font-weight: 700; }
.concepto .advertencia { color: var(--warn); border-left: 3px solid var(--warn); padding-left: 10px; }

/* ---------- Total ---------- */
.total {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: var(--imss-deep); color: var(--white); padding: 22px 24px; margin-top: 22px;
}
.total span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #b9d4cf; }
.total strong { font-size: 32px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nota-total { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* ---------- Acción principal ----------
   R16 · UNA acción domina. Cuatro con el mismo peso equivalen a ninguna. */
.accion-principal { background: var(--mint); border-left: 5px solid var(--imss); padding: 22px 24px; margin-top: 22px; }
.accion-principal .que { font-size: 18px; font-weight: 750; color: var(--ink); margin: 0; }
.accion-principal .porque { font-size: 14px; color: #40504c; margin: 8px 0 0; }

/* ---------- Pasos ---------- */
.pasos { counter-reset: paso; list-style: none; margin: 22px 0 0; padding: 0; }
.pasos li { counter-increment: paso; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--line); }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 14px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--imss);
  display: grid; place-items: center; font-size: 13px; font-weight: 850;
}
.pasos strong { display: block; }
.pasos .porque { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; }

/* ---------- Plazos ----------
   🔴 El dato más importante del producto, por encima de la cifra:
   quien fue separado tiene DOS MESES (Art. 518), no un año. */
.plazos { display: grid; gap: 10px; margin-top: 22px; }
.plazo { background: var(--mint); border-left: 4px solid var(--imss); padding: 15px 17px; margin: 0; }
.plazo strong { display: block; }
.plazo span { color: #40504c; font-size: 14px; }
.plazo.urgente { background: #fdf0ee; border-left-color: #9a2f18; }
.plazo.urgente strong { color: #7c2614; }

/* ---------- Exclusiones ----------
   Lo que NO suma se muestra con su cifra: ocultar la magnitud es
   mentir, y por eso la cifra fuera es visible pero nunca verde. */
.lista-exclusiones { list-style: none; margin: 20px 0 0; padding: 0; }
.lista-exclusiones li { padding: 13px 0; border-top: 1px solid var(--line); color: #40504c; font-size: 15px; }
.cifra-fuera { color: var(--warn); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }

.profedet { background: var(--mint); border-left: 4px solid var(--imss); padding: 15px 17px; margin-top: 20px; font-size: 14px; }

/* ---------- WCAG 2.5.8 · Target Size (Minimum) ----------
   🔴 Los enlaces del pie de codex miden 20 px de alto (13px × 1.55) y el
   mínimo AA son 24. Detectado en Chrome por `navegador.prueba.mjs`, no a
   ojo: reportaba «A. 351×20» en los tres anchos de prueba.

   Se corrige AQUÍ y no en `styles.css` porque aquel archivo es copia byte a
   byte del cascarón. Misma especificidad que la regla original y cargado
   después, así que gana sin necesidad de `!important`.
   `.footer-cta a` queda fuera a propósito: es inline-flex con su propio
   subrayado, y ya supera el mínimo. */
.footer a:not(.footer-cta a), .footer-legal-link { min-height: 24px; }

/* ---------- Impresión ----------
   «Guardar o imprimir» es cómo la persona se lleva el expediente a
   una consulta. Lo que no sirve en papel, fuera. */
/* Señal de estimación junto a cada importe (descongelado ALINEACION-LEGAL-2026-09-06).
   Visible, no tooltip, contraste legible, y también al imprimir: si la cifra circula en papel, la señal va con ella. */
.concepto .estimacion { display: block; font-size: 0.8rem; font-weight: 600; color: #4a5568; margin: -0.2rem 0 0.45rem; letter-spacing: 0.01em; }
/* Ampliación: la cifra que queda fuera del total (.cifra-fuera) lleva la misma señal, en línea para no romper el <li>. */
.lista-exclusiones .estimacion { display: inline; font-size: 0.8rem; font-weight: 600; color: #4a5568; white-space: nowrap; }

@media print {
  .header, .independent, .footer, .acciones, .progreso, .paso, .footer-legal-link { display: none !important; }
  .concepto .estimacion { display: block !important; color: #000; }
  .lista-exclusiones .estimacion { display: inline !important; color: #000; }
  body { background: var(--white); }
  .bloque { border: 1px solid #ccc; page-break-inside: avoid; margin-bottom: 12px; }
  .total { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
  .total span { color: var(--ink); }
}

@media (max-width: 620px) {
  .calc-main { padding: 30px 0 54px; }
  .bloque { padding: 22px 20px; }
  .total { flex-direction: column; align-items: flex-start; gap: 8px; }
  .acciones .boton { width: 100%; }
}