/*
 | Páginas de catálogo del SAT.
 |
 | No son artículos: son tablas que alguien deja abiertas mientras factura. El
 | diseño se somete a eso — poca decoración, mucha legibilidad, y una clave que
 | se pueda copiar sin pelearse con el ratón.
 */

:root {
    --bg: #020817;
    --blue: #0ea5e9;
    --white: #f1f5f9;
    --slate: #64748b;
    --slate2: #94a3b8;
    --line: rgba(148, 163, 184, .14);
    --font: 'Roboto', system-ui, sans-serif;
    --mono: 'Roboto Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

.mesh {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 55% at 15% 0%, rgba(14,165,233,.07) 0%, transparent 70%);
}

.envoltura { position: relative; z-index: 10; max-width: 1080px; margin: 0 auto; padding: 0 22px 110px; }

/* Sólo para lectores de pantalla. */
.sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.migas { font-size: 13px; color: var(--slate); margin-bottom: 20px; }
.migas a { color: var(--slate2); text-decoration: none; }
.migas a:hover { color: var(--blue); }

h1 {
    font-size: clamp(30px, 4.6vw, 46px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin-bottom: 16px;
}

.entrada { font-size: clamp(16px, 2vw, 18px); color: var(--slate2); max-width: 68ch; }

/* ── Buscador ────────────────────────────────────────────── */

.buscador { display: flex; align-items: center; gap: 12px; margin: 30px 0 18px; flex-wrap: wrap; }

.buscador input {
    flex: 1;
    min-width: 260px;
    padding: 13px 17px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(148, 163, 184, .05);
    color: var(--white);
    font-family: inherit;
    font-size: 15px;
    transition: border-color .15s ease, background-color .15s ease;
}

.buscador input::placeholder { color: var(--slate); }
.buscador input:focus { outline: none; border-color: rgba(14,165,233,.5); background: rgba(14,165,233,.05); }

.cuenta { font-size: 13px; color: var(--slate); font-variant-numeric: tabular-nums; }

/* ── Tabla ───────────────────────────────────────────────── */

/* La tabla desborda a lo ancho en pantallas chicas: se le da su propia
   barra para que la página nunca se mueva de lado. */
.tabla-caja { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }

/*
 | El ancho mínimo lo manda la última columna.
 |
 | Con 720px, a la lista de usos le tocaban 148 píxeles para trece fichas: se
 | partía en siete renglones y dejaba filas de 254px con las tres primeras
 | columnas vacías. La tabla se lee peor cuanto más alta es cada fila, porque
 | el ojo pierde la correspondencia entre la clave y su descripción.
 */
.tabla { width: 100%; border-collapse: collapse; min-width: 880px; }

.tabla thead th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--slate);
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(148, 163, 184, .04);
    position: sticky;
    top: 0;
    backdrop-filter: blur(8px);
}

.tabla tbody tr { border-bottom: 1px solid rgba(148,163,184,.07); }
.tabla tbody tr:last-child { border-bottom: 0; }
.tabla tbody tr:hover { background: rgba(14,165,233,.04); }

.tabla td, .tabla tbody th { padding: 15px 16px; vertical-align: top; text-align: left; font-weight: 400; }

.tabla tbody th code {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--blue);
    /* Seleccionable de un doble clic: se va a copiar y pegar mil veces. */
    user-select: all;
}

.tabla b { font-weight: 500; color: var(--white); display: block; font-size: 14.5px; }

.nota { display: block; margin-top: 5px; font-size: 13px; color: var(--slate2); line-height: 1.5; max-width: 46ch; }

.quien { font-size: 13px; color: var(--slate2); white-space: nowrap; }

.usos { min-width: 290px; }
.usos code {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--slate2);
    background: rgba(148,163,184,.1);
    padding: 1px 5px;
    border-radius: 4px;
    margin: 0 2px 2px 0;
}

.vacio { margin-top: 22px; color: var(--slate2); }

/* ── Preguntas y cierre ──────────────────────────────────── */

.faq-cat { margin-top: 64px; }
.faq-cat h2, .cierre h2 { font-size: clamp(21px, 2.8vw, 27px); font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }

.lista-faq details { border-bottom: 1px solid var(--line); }
.lista-faq summary {
    cursor: pointer; list-style: none;
    padding: 19px 0; font-size: 16px; font-weight: 500; color: var(--white);
    display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.lista-faq summary::-webkit-details-marker { display: none; }
.lista-faq summary::after { content: '+'; color: var(--blue); font-size: 21px; line-height: 1; flex-shrink: 0; }
.lista-faq details[open] summary::after { content: '−'; }
.lista-faq details p { padding-bottom: 20px; color: #cbd5e1; max-width: 72ch; }

.cierre {
    margin-top: 56px; padding: 26px;
    border: 1px solid var(--line); border-radius: 18px;
    background: rgba(14, 165, 233, .05);
}

.cierre p { color: #cbd5e1; max-width: 66ch; }

.cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 11px 20px;
    border-radius: 999px; background: var(--white); color: #020817;
    font-weight: 500; text-decoration: none; font-size: 15px;
    transition: transform .15s cubic-bezier(.23,1,.32,1);
}
.cta:active { transform: scale(.97); }

.fuente { margin-top: 44px; font-size: 13px; color: var(--slate); max-width: 72ch; line-height: 1.6; }

@media (max-width: 620px) {
    .nota { max-width: none; }
    .faq-cat { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .buscador input, .cta { transition: none; }
    .cta:active { transform: none; }
}