/* ============================================================
   mx-nss — app.css (relanzamiento 2026)
   Sistema de diseño: verde institucional IMSS + ámbar del documento.
   Motivo visual: los 11 dígitos del NSS segmentados. Ver docs/design/design-brief.md.
   Objetivo CWV: 100 en las 4 métricas. Sin frameworks, íconos SVG inline.
   ============================================================ */

/* ---------- 0. Fallbacks con métricas ajustadas ----------
   Mismo truco que el resto del portfolio: las Noto tienen la caja de línea ~18% más alta que
   Arial y son más anchas, así que sin ajustar el texto reflota cuando carga el webfont (CLS) y
   el LCP se registra recién en el swap. Estos fallback ocupan el MISMO espacio que la Noto. */
@font-face{font-family:'Noto Sans fb';src:local('Arial'),local('Helvetica'),local('sans-serif');size-adjust:101.4%;ascent-override:107%;descent-override:29%;line-gap-override:0%}

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca — verde institucional del IMSS, en un pino más profundo y sobrio que el del
     organismo: el sitio tiene que leerse como herramienta, no como imitación (y el aviso de
     "no somos el IMSS" tiene que ser creíble). */
  --brand:#255450; --brand-d:#173936; --brand-l:#2a5b57; --brand-br:#2f6863;

  /* ⭐ Ámbar del DOCUMENTO. La apuesta del sistema: el verde es "informarse" y el ámbar es
     "conseguí tu papel" (botón primario, PDF, descarga). Separa las dos intenciones que
     encontró la auditoría, así el que viene por el PDF no lee una palabra de más. */
  --accent:#b26a12; --accent-d:#8f5410; --accent-t:#8f5410; --accent-o:#e9a94a;
  --accent-bg:#fdf4e7; --accent-bg-2:#fefaf3; --accent-bd:#f0dcb9;

  /* Superficies del verde */
  --brand-bg:#ecf1f1; --brand-bg-2:#f5f8f8; --brand-bd:#cad9d8;

  /* Estados. Nunca se usan como color de marca ni al revés. */
  --ok:#1c7a4b; --info:#1d5aa8; --warn:#6b5426; --danger:#a3271f;
  --ok-bg:#eaf6ef; --info-bg:#eef4fb; --warn-bg:#fff8ec; --danger-bg:#fbecea;
  --ok-bd:#bfe3cd; --info-bd:#cfe0f3; --warn-bd:#f0d9ae; --danger-bd:#f0cdc8;

  /* Superficie / texto. Neutros con sesgo frío-verdoso: un gris puro al lado del pino se ve
     sucio. */
  --bg:#f4f6f6; --surface:#fff; --surface-alt:#f9fafa; --tile:#eaefef;
  --ink:#192121; --soft:#495251; --muted:#727d7c; --border:#dfe6e5; --border-2:#eff3f3;

  /* Los bloques de dígitos: el motivo */
  --digit:#173936; --digit-bg:#eff3f3; --digit-bd:#d2dddc;

  --r-s:10px; --r:14px; --r-l:16px; --r-xl:18px; --r-cta:20px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(23,57,54,.05);
  --sh-2:0 1px 2px rgba(23,57,54,.05),0 12px 30px -18px rgba(23,57,54,.18);
  --sh-3:0 20px 44px -26px rgba(23,57,54,.8);
  --sh-accent:0 12px 26px -20px rgba(178,106,18,.7);

  /* ⚠️ 780 y no 1120. Con 1120 el texto quedaba topado en 70ch (601px) mientras el formulario
     y las tablas ocupaban 1072px: la página se leía como una columna angosta flotando en un
     contenedor ancho, con 556px de hueco SIEMPRE a la derecha. Lo marcó Pablo el 2026-08-17
     preguntando por qué se encolumnaba así.
     El tope de 70ch en <p> se queda —una línea de 130 caracteres es ilegible, el rango cómodo
     es 45-75— pero ahora el contenedor está cerca de ese tope, así que el texto y las cajas
     tienen casi el mismo ancho y el hueco es simétrico.
     780 es el piso: los 11 bloques de dígitos necesitan 597px naturales y por debajo de eso
     envuelven, y son la firma del sitio. */
  --wrap:780px; --pad:24px;
  /* El header y el footer usan su propio ancho: son barras, no columna de lectura, y el
     logo horizontal (236px) más los 4 grupos del menú (540px) no entran en los 732px del
     contenido. 960 les da aire sin despegarlos de la columna. */
  --wrap-barra:960px;
  --font:'Noto Sans','Noto Sans fb',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* Los dígitos del NSS van en mono DEL SISTEMA: es lo que los hace leer como documento
     oficial y no como texto corrido. No se descarga nada. */
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* Este sitio escribe seguido cosas largas e incortables — el dominio, la CURP de 18
     caracteres, privacidad@numerosegurosocial.com.mx. Sin esto desbordan a 320 px. */
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto}
a{color:var(--brand-l);text-underline-offset:2px}
a:hover{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand-br);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
/* ⚠️ Los encabezados no traían NINGÚN margen superior, así que un h2 quedaba pegado a la
   tabla o a la rejilla de arriba y la página se leía como un bloque continuo: no se veía
   dónde termina una sección y empieza otra. Lo marcó Pablo el 2026-08-17 sobre la home.
   El margen va en el encabezado y no en el elemento anterior para que valga sea cual sea lo
   que venga antes (párrafo, tabla, figura o tarjetas). */
h2{margin-top:2.4em}
h3{margin-top:1.9em}
/* El primero de un bloque no necesita separación: ya la da el contenedor. */
h2:first-child,h3:first-child,.hero h1{margin-top:0}
h1{font-size:clamp(1.75rem,4.2vw,2.6rem);font-weight:800}
h2{font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:700}
h3{font-size:1.12rem;font-weight:700}
p{margin:0 0 1em;max-width:70ch;text-wrap:pretty}
ul,ol{max-width:70ch}
/* Toda cifra que el usuario tiene que leer o comparar va tabular. */
.num,td.num,th.num,time,.tabular{font-variant-numeric:tabular-nums}

/* ---------- 3. ⭐ NssBlocks — el motivo visual ----------
   El NSS NUNCA se muestra como cadena corrida: siempre segmentado en sus 5 partes con las
   etiquetas debajo. Que el usuario vea qué significa su número es el diferencial del sitio.
   Se usa en el hero, en el resultado de la consulta y en el decodificador. */
/* ⚠️ align-items:flex-start y NO flex-end: las etiquetas tienen 1 o 2 líneas según el grupo
   ("Folio" vs "Año de nacimiento"), y alineando abajo cada bloque de dígitos quedaba a una
   altura distinta — el motivo se veía escalonado en vez de leerse como un número. Alineando
   arriba, los dígitos comparten línea y las etiquetas cuelgan. El min-height reserva las dos
   líneas para que el bloque no cambie de alto entre páginas. */
.nssb{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:0 0 18px}
.nssb__g{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.nssb__d{
  display:flex;gap:4px;
}
.nssb__d span{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.25rem,3.6vw,1.9rem);font-weight:700;color:var(--digit);
  background:var(--digit-bg);border:1px solid var(--digit-bd);border-radius:8px;
  width:1.55em;height:1.9em;display:flex;align-items:center;justify-content:center;
}
/* El verificador se distingue: es el único que no eligió nadie, lo calcula el algoritmo. */
.nssb__g--check .nssb__d span{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent-d)}
.nssb__l{
  font-size:11.5px;line-height:1.25;color:var(--muted);text-align:center;
  letter-spacing:.02em;max-width:11ch;min-height:2.5em;   /* 2 líneas reservadas */
  /* El body corta palabras largas (el dominio, la CURP); acá NO: partía "Subdelegació/n"
     a mitad de palabra, que en una etiqueta de 2 palabras se lee como un error. */
  overflow-wrap:normal;hyphens:none;
}
.nssb--sm .nssb__d span{font-size:1.05rem;width:1.5em;height:1.8em}
/* ⚠️ En la variante compacta los DÍGITOS encogen pero la etiqueta no, así que dos grupos
   angostos ("Subdelegación de alta" al lado de "Año de alta") se pisaban y se leían como una
   sola palabra. Lo encontró la hoja de revisión de Claude Design (2026-08-16), no la vista de
   la página: en el sitio esta variante sólo aparece cuando la búsqueda ENCUENTRA el NSS, que
   es el 1,7% de los casos, así que podía vivir rota mucho tiempo. La etiqueta encoge con el
   bloque y se le da un mínimo para que no se solapen. */
.nssb--sm .nssb__l{font-size:10px;min-width:5.4em;line-height:1.25}

/* ---------- 4. Header / footer ---------- */
.hdr{background:var(--brand);color:#fff}
/* flex-wrap: en 320 px la marca + los 3 enlaces no entran y el nav se salía de la pantalla
   (330 > 320), arrastrando scroll horizontal a TODAS las páginas. Envolviendo, el nav baja a
   su propia línea en las pantallas más angostas y no pasa nada en el resto. */
.hdr .wrap,.ftr .wrap{max-width:var(--wrap-barra)}
/* `position:relative` para que el panel del hamburger se cuelgue de acá (ver .nav--mob). */
.hdr__in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  min-height:74px;padding-block:11px}
.hdr a{color:#fff;text-decoration:none}
.hdr__brand{display:flex;align-items:center;flex:none}
/* Ancho y alto explícitos en el <img> + estos topes: el logo no puede empujar al nav ni
   provocar salto de layout mientras carga el SVG.
   ⚠️ EL TAMAÑO LO MANDA EL BAJOLOGO. El logotipo trae debajo «SITIO NO OFICIAL», que es lo que
   separa al sitio de parecer gubernamental; por debajo de ~44px esa línea deja de leerse en un
   teléfono y el aviso se vuelve decorativo. Estaba en 34px en móvil (Pablo, 2026-08-19). */
/* El alto escala con la pantalla en vez de saltar en un breakpoint: el logotipo es ancho
   (260px a 44 de alto) y en un teléfono compite por la línea con el botón del menú. Con
   `clamp` ocupa lo que puede sin empujarlo a una segunda fila. */
.hdr__brand img{display:block;width:auto;height:clamp(36px,10.5vw,48px);max-width:100%}

/* ⚠️ Los tokens de este archivo son los del bloque :root de arriba (--ink, --border,
   --surface, --brand-bg…). NO inventar nombres: un `var(--noexiste)` no es un error visible
   ni rompe la regla, hace que la propiedad **herede**, y acá heredar `color` significa tomar
   el blanco del header. El 2026-08-15 eso dejó 2 de 3 enlaces del desplegable en blanco sobre
   blanco, y parecía un problema de especificidad. Grepear el :root antes de escribir. */

/* ---------- 4b. Navegación de 16 destinos ----------
   Superior agrupada en 4 bloques (las 4 intenciones medidas), no lateral: el tráfico es de
   Bing y mayoritariamente móvil, y en escritorio un lateral le roba ancho a la columna de
   lectura. El motivo largo está en partials/header.php.

   ⚠️ ABRE POR CLIC O TOQUE, NUNCA POR HOVER. Hasta el 2026-08-16 abría con :hover y
   :focus-within a la vez, y eso producía un bug visible: al hacer clic en un grupo el foco lo
   dejaba abierto, y al pasar el mouse por otro se abría el segundo detrás del primero. Dos
   disparadores que no se cancelan entre sí. Ahora cada grupo es un <details> y el disparador
   es uno solo, igual en escritorio y en móvil.

   ⭐ SIN JAVASCRIPT sigue funcionando: <details> es nativo. El JS sólo agrega cerrar los
   hermanos, cerrar al hacer clic afuera y cerrar con Escape. */
.nav{display:flex;gap:2px}
.nav__g{position:relative}
.nav__t{display:flex;align-items:center;gap:4px;list-style:none;cursor:pointer;
  color:#fff;opacity:.88;font-weight:600;font-size:14.5px;line-height:1;
  padding:9px 11px;border-radius:var(--r-s);user-select:none}
.nav__t::-webkit-details-marker{display:none}
.nav__t::marker{content:''}
.nav__g:hover>.nav__t{opacity:1}
.nav__g[open]>.nav__t{opacity:1;background:rgba(255,255,255,.13)}
.nav__chev{width:.9em;height:.9em;transition:transform .15s}
.nav__g[open]>.nav__t .nav__chev{transform:rotate(180deg)}
.nav__d{list-style:none;margin:0;padding:6px}

/* --- Escritorio --- */
.nav--desk .nav__d{position:absolute;z-index:40;top:100%;left:0;min-width:230px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 12px 28px rgba(0,0,0,.16)}
/* Los dos últimos anclan por la DERECHA: un panel de 230px colgando a la izquierda del último
   grupo se salía de la ventana y arrastraba scroll horizontal a todas las páginas. */
.nav--desk .nav__g:nth-last-child(-n+2) .nav__d{left:auto;right:0}
.nav--desk .nav__d a{display:block;color:var(--ink);font-size:14.5px;padding:8px 10px;
  border-radius:var(--r-s)}
.nav--desk .nav__d a:hover{background:var(--brand-bg-2);color:var(--brand)}
.nav--desk .nav__d a[aria-current]{color:var(--brand);font-weight:700}
.nav--desk .nav__g.is-act>.nav__t{box-shadow:inset 0 -2px 0 var(--accent)}

/* --- Hamburger --- */
/* ⚠️ EL HAMBURGER VA AL LADO DE LA MARCA, NO EN SU PROPIA FILA. Con `width:100%` ocupaba
   una segunda línea entera del header y el botón «Menú» quedaba suelto abajo a la izquierda,
   lejos de donde se lo busca —arriba a la derecha— y estirando el header a dos filas.
   (Pablo, 2026-08-19.) El panel sigue ocupando todo el ancho porque se cuelga del header. */
.nav__ham{margin-left:auto;flex:none}
.nav__ham>summary{list-style:none;display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:14.5px;padding:8px 12px;border:1px solid rgba(255,255,255,.32);
  border-radius:9px;cursor:pointer}
.nav__ham>summary::-webkit-details-marker{display:none}
.nav__bars{width:17px;height:2px;background:#fff;box-shadow:0 -5.5px 0 #fff,0 5.5px 0 #fff}
.nav__ham[open]>summary{background:rgba(255,255,255,.14)}
/* Por debajo de 430px la palabra «Menú» es lo que hace que marca + botón no entren en una
   línea. Se va la palabra, no el botón: el <summary> ya declara aria-label="Abrir el menú",
   así que para un lector de pantalla no cambia nada, y el icono de tres barras arriba a la
   derecha es donde se lo busca. */
@media(max-width:430px){
  /* 44×44 es el mínimo de un objetivo táctil; sin el `min-*` quedaba en 43×31. */
  .nav__ham>summary{gap:0;padding:0;font-size:0;min-width:44px;min-height:44px;
    justify-content:center}
  .nav__ham>summary .nav__bars{margin:0}
  .hdr__in{gap:8px}
}

/* El panel se descuelga del header a todo el ancho, como un menú móvil de verdad: en el flujo
   normal heredaría el ancho del <details>, que ahora es el del botón. */
.nav--mob{display:block;position:absolute;z-index:50;top:100%;left:0;right:0;
  background:var(--brand);padding:6px var(--pad) 16px;
  box-shadow:0 18px 30px -14px rgba(0,0,0,.45);max-height:78vh;overflow-y:auto}
/* En móvil el grupo NO se subraya en ámbar: el título es una etiqueta de sección y la raya de
   ancho completo se leía como un separador roto. El enlace activo ya se marca. */
.nav--mob .nav__t{width:100%;justify-content:space-between;opacity:1;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:#a8c8ba;padding:12px 2px 6px}
.nav--mob .nav__g[open]>.nav__t{background:none;color:#fff}
.nav--mob .nav__d{padding:0 0 8px}
.nav--mob .nav__d a{display:block;color:#fff;opacity:.94;font-size:15.5px;padding:8px 2px}
.nav--mob .nav__d a[aria-current]{font-weight:800;text-decoration:underline}
.nav__d--suelta{border-top:1px solid rgba(255,255,255,.16);margin-top:10px;padding-top:8px}

/* El corte lo manda el contenido: 16 destinos en 4 grupos dejan de entrar antes de 900px. */
@media (max-width:899px){ .nav--desk{display:none} }
@media (min-width:900px){ .nav__ham{display:none} .nav--desk{margin-left:auto} }

/* El aviso de sitio no oficial es parte del diseño, no una nota al pie. */
.noof{background:var(--brand-d);color:#cfe0d7;font-size:12.5px;text-align:center;padding:6px var(--pad)}
.noof a{color:#fff;text-decoration:underline}
.ftr{background:var(--brand-d);color:#c9d9d2;margin-top:56px;padding:34px 0;font-size:14px}
.ftr a{color:#fff}

/* ---------- 5. Hero ---------- */
.hero{background:linear-gradient(180deg,var(--brand-bg) 0%,var(--bg) 100%);padding:34px 0 26px}
.hero h1{margin-bottom:.35em}
.hero__lead{font-size:1.06rem;color:var(--soft);max-width:62ch;margin-bottom:18px}

/* ---------- 5b. Íconos ----------
   ⚠️ Un <svg> SIN tamaño explícito NO mide 1em: cae al default de reemplazo del navegador
   (300×150 px) y revienta el layout. Se detectó con un botón de 414 px en un viewport de 390
   que producía scroll horizontal en toda la página. Todo `sb_ico()` pasa por acá. */
.ico{width:1em;height:1em;flex:none;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:0}

/* ---------- 6. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font:inherit;font-weight:700;font-size:15.5px;line-height:1.25;
  padding:13px 22px;border-radius:var(--r-s);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .14s,border-color .14s;
  max-width:100%;text-align:center;   /* en mobile el label largo envuelve, no desborda */
}
/* Primario = ÁMBAR = "conseguí tu documento". Es la acción que trae a la gente. */
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--sh-accent)}
.btn--primary:hover{background:var(--accent-d);color:#fff}
.btn--secondary{background:var(--brand);color:#fff}
.btn--secondary:hover{background:var(--brand-d);color:#fff}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--brand-bd)}
.btn--ghost:hover{background:var(--brand-bg);color:var(--brand)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;box-shadow:none}

/* ---------- 7. Consulta (form de 2 solapas) ---------- */
.tool{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--sh-2);overflow:hidden}
.tool__tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface-alt)}
.tool__tab{
  flex:1;padding:14px 16px;font:inherit;font-weight:700;font-size:15px;
  background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;
}
.tool__tab[aria-selected=true]{color:var(--brand);border-bottom-color:var(--accent);background:var(--surface)}
.tool__body{padding:22px}
.tool__hint{font-size:13px;color:var(--muted)}
.tool__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}

.field{margin-bottom:16px}
.field__l{display:block;font-weight:700;font-size:14.5px;margin-bottom:5px}
.field__h{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.field input,.field select{
  width:100%;font:inherit;font-size:16px;padding:12px 13px;
  border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);color:var(--ink);
}
.field input:focus,.field select:focus{border-color:var(--brand-br);outline:none;box-shadow:0 0 0 3px rgba(29,122,90,.15)}
/* La CURP y el NSS se tipean en mono: se leen mejor y se detecta el error de tipeo antes. */
.field input[data-mono]{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.field__e{display:block;color:var(--danger);font-size:13.5px;margin-top:6px;font-weight:600}
.row{display:grid;gap:14px}
/* En una fila de dos o tres columnas, un campo con texto de ayuda y otro sin él dejaban los
   <input> a distinta altura. Empujando el control al fondo de su celda quedan alineados
   aunque las etiquetas ocupen distinto alto. */
/* El margen inferior pasa del campo a la FILA: si lo llevaran los campos, el más alto de la
   fila mandaría y la separación cambiaría según cuál tuviera texto de ayuda. */
.row{margin-bottom:16px}
.row .field{display:flex;flex-direction:column;margin-bottom:0}
.row .field input,.row .field select{margin-top:auto}
@media(min-width:640px){.row--2{grid-template-columns:repeat(2,1fr)}}
/* ⚠️ TRES COLUMNAS SIEMPRE, también en móvil. Día / Mes / Año son campos de 2 a 4 caracteres:
   apilados ocupaban tres filas enteras del formulario para pedir una fecha, y en un teléfono
   eso es la mitad de la pantalla. Entran de sobra en 320px. (Pablo, 2026-08-19.) */
.row--3{grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:640px){.row--3{gap:14px}}

/* ---------- 8. Resultado ---------- */
/* Separado de la caja del formulario: pegados se leen como un solo bloque y no se ve
   dónde termina lo que escribiste y dónde empieza la respuesta. */
/* --- El NSS encontrado: grande, entero y seleccionable --- */
.nssv{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px}
.nssv__n{font:700 clamp(1.5rem,5vw,2.1rem)/1 var(--mono);color:var(--digit);
  letter-spacing:.06em;background:var(--surface);border:1px solid var(--accent-bd);
  border-radius:var(--r);padding:12px 16px;
  /* Explícito: es lo único de la página que la persona vino a llevarse. */
  user-select:all;-webkit-user-select:all;cursor:text}
.nssv__c{flex:none;transition:opacity .2s,background-color .2s}
.nssv__c[data-copiado]{background:var(--ok);border-color:var(--ok);color:#fff}
/* El aviso no desaparece de golpe: se desvanece y vuelve con su etiqueta. Un cambio brusco de
   texto se lee como un parpadeo. */
.nssv__c[data-saliendo]{opacity:0}
@media (prefers-reduced-motion:reduce){ .nssv__c{transition:none} }
@media (max-width:400px){ .nssv__n{letter-spacing:.03em;padding:10px 12px} }

/* El bloque recibe foco por JS al volver del POST; el anillo del navegador sobre una caja de
   22px de padding se ve como un borde roto, y el bloque ya se distingue por color y posición. */
.res:focus{outline:none}
.res{border-radius:var(--r-l);padding:22px;margin:26px 0 20px;border:1px solid}
.res--hit{background:var(--accent-bg);border-color:var(--accent-bd)}
.res--miss{background:var(--info-bg);border-color:var(--info-bd)}
.res__t{font-weight:800;font-size:1.05rem;margin:0 0 10px}
.res--hit .res__t{color:var(--accent-d)}
.res--miss .res__t{color:var(--info)}

/* ---------- 9. Callouts ---------- */
.call{border-radius:var(--r);padding:15px 18px;margin:0 0 18px;border:1px solid;font-size:15.5px}
.call p:last-child{margin-bottom:0}
.call__t{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.call--info{background:var(--info-bg);border-color:var(--info-bd)}   .call--info .call__t{color:var(--info)}
.call--warn{background:var(--warn-bg);border-color:var(--warn-bd)}   .call--warn .call__t{color:var(--warn)}
.call--ok{background:var(--ok-bg);border-color:var(--ok-bd)}         .call--ok .call__t{color:var(--ok)}
.call--danger{background:var(--danger-bg);border-color:var(--danger-bd)} .call--danger .call__t{color:var(--danger)}

/* ---------- 10. Cards ---------- */
.grid{display:grid;gap:16px}
@media(min-width:620px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{
  /* `overflow:hidden` para que la barra del hover la recorte el propio redondeo de la caja
     (ver .card::before). */
  display:block;position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-l);padding:19px;text-decoration:none;
  color:inherit;box-shadow:var(--sh-1);
  transition:border-color .16s,box-shadow .16s,background-color .16s,transform .16s;
}
/* El hover anterior era sólo un cambio de sombra y no se notaba: las cajitas parecían texto,
   no algo en lo que se puede hacer clic. Ahora se tiñen de marca, se levantan y marcan el
   borde izquierdo. (Pablo, 2026-08-19.) */
/* ⚠️ LA BARRA VA DENTRO DEL BORDE, NO ENCIMA. Iba en `left:-1px;top:-1px;bottom:-1px` con su
   propio `border-radius`: un radio de 14px sobre una caja de 3px de ancho no redondea nada, así
   que la barra salía recta y sobresalía por arriba y por abajo de las esquinas redondeadas de
   la caja, leyéndose como una línea suelta. (Pablo, 2026-08-19.) Ahora se alinea al borde y la
   recorta el `overflow:hidden` de la caja, que la curva exactamente igual que el resto. */
.card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand);opacity:0;transition:opacity .16s;
}
a.card:hover,a.card:focus-visible{
  border-color:var(--brand-br);background:var(--brand-bg-2);box-shadow:var(--sh-2);
  transform:translateY(-2px);color:inherit;
}
a.card:hover::before,a.card:focus-visible::before{opacity:1}
a.card:hover .card__t,a.card:focus-visible .card__t{color:var(--brand-d)}
/* En un teléfono no hay hover, así que el toque tiene que responder: es la única confirmación
   de que la caja hizo algo antes de que cargue la página siguiente. */
a.card:active{transform:translateY(0);background:var(--brand-bg)}
@media (prefers-reduced-motion:reduce){ .card{transition:none} a.card:hover{transform:none} }

.card__t{font-weight:700;margin:0 0 5px;color:var(--brand);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card__d{font-size:14.5px;color:var(--soft);margin:0}

/* ⚠️ LA FLECHA SE VE SIEMPRE, NO SÓLO EN HOVER. Es lo que distingue una tarjeta que lleva a
   algún lado de una caja que sólo explica algo, y en móvil —que es la mayoría del tráfico de
   este sitio— era indistinguible porque el hover no existe. En hover se corre un pelo, que es
   el refuerzo, no la señal. (Pablo, 2026-08-19.) */
.card__i{
  flex:none;width:16px;height:16px;color:var(--brand-br);opacity:.75;
  transform:rotate(-90deg);           /* el chevron apunta abajo; acá tiene que apuntar a la derecha */
  transition:transform .16s,opacity .16s;
}
a.card:hover .card__i,a.card:focus-visible .card__i{opacity:1;transform:rotate(-90deg) translateY(3px)}
@media (prefers-reduced-motion:reduce){ .card__i{transition:none} }

/* La caja que NO lleva a ningún lado: misma forma, sin nada que insinúe que se puede tocar. */
.card--nota{cursor:default}
.card--nota::before{content:none}

/* ---------- 11. Steps ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 22px;max-width:74ch}
.steps li{counter-increment:s;position:relative;padding:0 0 18px 46px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.steps__t{font-weight:700;display:block;margin-bottom:3px}

/* ---------- 12. Tablas ---------- */
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin:0 0 22px}
/* ⚠️ El ancho mínimo sólo vale de 620px para arriba. Abajo, las tablas de datos cortos entran
   solas envolviendo el texto y las de prosa se apilan (ver más abajo): en ninguno de los dos
   casos hace falta scroll horizontal, que era lo que pasaba con `min-width` fijo. */
table{border-collapse:collapse;width:100%;font-size:15px}
@media(min-width:620px){ table{min-width:460px} }
th{
  text-align:left;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:12px 15px;border-bottom:1px solid var(--border);white-space:nowrap;
}
td{padding:11px 15px;border-bottom:1px solid var(--border-2);color:var(--soft)}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--ink)}
th.num,td.num{text-align:right}

/* --- Tablas de prosa en móvil: cada fila es una ficha --- */
/* ⭐ Lo decide `sb_table()` mirando el contenido, no una clase a mano: si alguna celda pasa de
   40 caracteres la tabla llega con `tw--apila`. 28 de las 42 tablas del sitio son de dos
   columnas con prosa, o sea listas de definiciones disfrazadas de tabla; scrollearlas de lado
   para leer el contenido principal de la página era lo peor del sitio en un teléfono.
   La semántica NO se pierde: `sb_table()` declara los roles ARIA a mano, porque `display:block`
   se los saca al navegador. */
/* Las 4 que NO se apilan son tablas de verdad (datos cortos). Para que entren sin scroll en
   un teléfono se les aprieta el aire y se deja envolver el encabezado, que por defecto va en
   `nowrap` y era lo que las sacaba de la pantalla («Vigencia de derechos» en una sola línea). */
@media(max-width:619px){
  .tw:not(.tw--apila) th{white-space:normal;padding:9px 10px;font-size:11.5px;letter-spacing:.03em}
  .tw:not(.tw--apila) td{padding:9px 10px;font-size:14px}
}
/* Un escalón más para los teléfonos de 320px, donde la columna útil son 270px. */
@media(max-width:400px){
  .tw:not(.tw--apila) th{padding:7px 7px;font-size:11px}
  .tw:not(.tw--apila) td{padding:7px 7px;font-size:13px}
}

@media(max-width:619px){
  .tw--apila{border:0;background:none;border-radius:0;overflow:visible}
  .tw--apila table{display:block;min-width:0}
  .tw--apila thead{display:none}          /* el nombre de cada columna reaparece en data-th */
  .tw--apila tbody,.tw--apila tr,.tw--apila td{display:block;width:auto}
  .tw--apila tr{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
    padding:14px 16px;margin:0 0 10px;
  }
  .tw--apila tr:last-child{margin-bottom:0}
  .tw--apila td{border:0;padding:0}
  .tw--apila td+td{margin-top:9px}
  .tw--apila td[data-th]::before{
    content:attr(data-th);display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);margin-bottom:3px;
  }
  /* La primera celda es el asunto de la ficha, no un dato más: va como título. */
  .tw--apila td:first-child{font-weight:700;color:var(--brand);font-size:16px;line-height:1.35}
  .tw--apila td:first-child strong{color:inherit}
  .tw--apila td.num{text-align:left}
  .tw--apila{margin-bottom:22px}
}

/* ---------- 13. FAQ ---------- */
.faq{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin:0 0 22px}
.faq details{border-bottom:1px solid var(--border-2)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:15px 18px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--muted);font-weight:800}
.faq details[open] summary::after{content:'−'}
.faq__a{padding:0 18px 16px;color:var(--soft);font-size:15.5px}

/* ---------- 14. Chips / Updated ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);
}
.chip--ok{background:var(--ok-bg);color:var(--ok)}
.chip--warn{background:var(--warn-bg);color:var(--warn)}
.chip--info{background:var(--info-bg);color:var(--info)}
.chip--neutral{background:var(--tile);color:var(--soft)}
.upd{font-size:13px;color:var(--muted);margin:0 0 18px}

/* ---------- 15. Movimiento ---------- */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 12. Infografías ----------
   La auditoría del 2026-08-15 encontró el sitio con CERO imágenes de contenido hablando todo
   el tiempo de documentos y procesos. Dos técnicas, y la elección no es estética: SVG cuando
   la FORMA es el contenido (los documentos), HTML+CSS cuando el contenido es texto ordenado
   (flujos, líneas de tiempo, árboles) porque un SVG con párrafos no reflowea a 320 px.
   El detalle está en partials/figuras.php. */
.fig{margin:26px 0;padding:0}
.fig figcaption{margin-top:12px;font-size:14.5px;color:var(--soft);line-height:1.55}

/* --- Los dos documentos --- */
/* Son ILUSTRACIONES, no facsímiles: a ancho completo un mockup de hoja carta ocupa media
   pantalla y compite con el texto. Se acotan para que se lean como una miniatura de documento
   y para que la diferencia de tamaño entre la hoja y la tarjeta se note. */
.fig__docs{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;max-width:600px}
.doc__svg{display:block;width:100%;height:auto;border-radius:var(--r-s)}
.doc__pg{fill:var(--surface);stroke:var(--border)}
.doc__hd{fill:var(--brand)}
.doc__mk{fill:#fff;font:800 13px var(--font);letter-spacing:.06em}
.doc__lb{fill:var(--muted);font:700 7.5px var(--font);letter-spacing:.09em}
.doc__nm{fill:var(--ink);font:700 11px var(--font)}
.doc__tx{fill:var(--soft);font:400 9px var(--mono)}
.doc__hi{fill:var(--accent-bg);stroke:var(--accent-bd)}
.doc__nss{fill:var(--digit);font:700 15px var(--mono);letter-spacing:.02em}
.doc__ln rect{fill:var(--border-2)}
.doc__qr{fill:var(--tile)}
.doc__t{margin:12px 0 4px;font-weight:800;color:var(--brand)}
.doc__d{margin:0;font-size:14.5px;color:var(--soft);line-height:1.5}
/* La tarjeta es de bolsillo: se muestra más chica para que la diferencia de tamaño se vea. */
.doc--tarjeta .doc__svg{max-width:96%}
.doc--tarjeta{padding-top:34px}
@media (max-width:620px){ .fig__docs{grid-template-columns:1fr;gap:28px} }

/* --- El círculo del correo --- */
.fig__ciclo{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ciclo__p{display:flex;gap:13px;align-items:flex-start;background:var(--surface-alt);
  border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.ciclo__p--stop{background:var(--danger-bg);border-color:var(--danger-bd)}
.ciclo__n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px}
.ciclo__p--stop .ciclo__n{background:var(--danger)}
.ciclo__p p{margin:0;line-height:1.55}
.fig__salida{margin:14px 0 0;padding:14px 16px;background:var(--ok-bg);
  border:1px solid var(--ok-bd);border-radius:var(--r);line-height:1.55}

/* --- Flujo del trámite --- */
.fig__flujo{list-style:none;margin:0;padding:0}
.fig__flujo li{position:relative;display:grid;grid-template-columns:44px 1fr;
  column-gap:14px;padding:0 0 22px 0}
/* La línea que une los pasos. El último no la lleva. */
.fig__flujo li::before{content:'';position:absolute;left:21px;top:44px;bottom:0;width:2px;
  background:var(--brand-bd)}
.fig__flujo li:last-child::before{display:none}
.flj__i{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--brand-bg);
  color:var(--brand);display:grid;place-items:center;position:relative;z-index:1}
.flj__i .ico{width:22px;height:22px}
.flj--giro .flj__i{background:var(--accent-bg);color:var(--accent-t)}
.flj__t{margin:10px 0 2px;font-weight:700;color:var(--ink)}
.flj__d{margin:0;color:var(--soft);font-size:15px;line-height:1.55}

/* --- Bloques de la CURP: mismo motivo que los del NSS --- */
.fig__curp{display:flex;flex-wrap:wrap;gap:10px}
.curpb__d{display:flex;gap:3px}
.curpb__d span{width:1.55em;height:1.9em;display:grid;place-items:center;
  font:700 1.1rem/1 var(--mono);color:var(--digit);background:var(--digit-bg);
  border:1px solid var(--digit-bd);border-radius:6px}
.curpb__l{margin:6px 0 0;max-width:15ch;font-size:11.5px;color:var(--muted);line-height:1.3;
  overflow-wrap:normal;hyphens:none}

/* --- Línea de tiempo --- */
.fig__linea{list-style:none;margin:0;padding:0}
.fig__linea li{position:relative;padding:0 0 20px 26px;border-left:2px solid var(--border)}
.fig__linea li:last-child{border-left-color:transparent;padding-bottom:0}
.fig__linea li::before{content:'';position:absolute;left:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--surface);border:2px solid var(--brand-bd)}
.lin--hoy::before{background:var(--accent);border-color:var(--accent)}
.lin--no::before{background:var(--ok);border-color:var(--ok)}
.lin__f{display:block;font:700 12.5px var(--font);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}
.lin--hoy .lin__f{color:var(--accent-t)}
.fig__linea p{margin:0;line-height:1.55}

/* --- Historial partido --- */
.fig__part{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.part__col{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r);
  padding:16px}
.part__col--ok{background:var(--ok-bg);border-color:var(--ok-bd)}
.part__h{margin:0 0 12px;font-weight:800;font-size:14px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.part__col--ok .part__h{color:var(--ok)}
.part__b{margin-bottom:12px}
.part__nss{font:700 13.5px var(--mono);color:var(--digit)}
.part__bar{height:9px;border-radius:5px;background:var(--tile);margin:6px 0 4px;overflow:hidden}
.part__bar i{display:block;height:100%;background:var(--brand-bd)}
.part__bar--ok i{background:var(--ok)}
.part__w{font-size:13px;color:var(--soft)}
.part__x{margin:10px 0 0;font-size:14px;color:var(--soft);line-height:1.5}
.part__ar{color:var(--muted)}
.part__ar .ico{width:26px;height:26px}
@media (max-width:640px){
  .fig__part{grid-template-columns:1fr}
  .part__ar{justify-self:center;transform:rotate(90deg)}
}

/* --- Árbol de decisión --- */
.arb__q{display:inline-block;background:var(--brand);color:#fff;font-weight:700;
  padding:9px 16px;border-radius:var(--r-pill);margin-bottom:16px}
.arb__r{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.arb__c{background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--border);border-radius:var(--r);padding:15px}
.arb__c--yo{border-top-color:var(--brand);background:var(--brand-bg-2)}
.arb__k{margin:0 0 8px;font-weight:700;line-height:1.4}
.arb__w{margin:0 0 8px;font:800 12.5px var(--font);letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-t)}
.arb__c--yo .arb__w{color:var(--brand)}
.arb__d{margin:0;font-size:14px;color:var(--soft);line-height:1.5}
@media (max-width:760px){ .arb__r{grid-template-columns:1fr} }

/* --- Las 8 semanas --- */
.sem__barra{display:grid;grid-template-columns:2fr 1.4fr 2fr;gap:3px;margin-bottom:14px}
.sem__t{padding:13px 12px;font-size:13px;font-weight:700;line-height:1.3;text-align:center;
  display:grid;place-items:center}
.sem__t--on{background:var(--ok);color:#fff;border-radius:var(--r-s) 0 0 var(--r-s)}
.sem__t--gr{background:var(--accent-o);color:#3b2a0d}
.sem__t--off{background:var(--tile);color:var(--muted);border-radius:0 var(--r-s) var(--r-s) 0}
.sem__l{margin:0;padding-left:20px;line-height:1.6}
.sem__l li{margin-bottom:5px}
@media (max-width:560px){
  .sem__barra{grid-template-columns:1fr}
  .sem__t--on{border-radius:var(--r-s) var(--r-s) 0 0}
  .sem__t--off{border-radius:0 0 var(--r-s) var(--r-s)}
}