/* ============================================================================
   Área con sesión · dashboard, cartas, proyectos, auth, crisis, demo
   ============================================================================
   Fase 2 (2/3) del rediseño claro · 2026-09-15.

   Hasta hoy estas pantallas las renderizaba FastAPI con el CSS inline y
   hardcodeado al tema oscuro (#0A0716 con estrellas, tarjetas #0F1620, teal
   brillante). La Fase 1 y la 2 (1/3) convirtieron las páginas estáticas de
   web-static/ y nunca alcanzaron a estas, que viven en web_api/*.py: quedaron
   fuera por omisión, no por decisión.

   Esta hoja es la única fuente de maqueta y componentes del área con sesión.
   No declara ni un color: todo sale de tokens.css, que se carga antes. Los
   fallbacks `var(--x, …)` van alineados al sistema claro por la misma razón
   que en style.css — si tokens.css no cargara, la página degradaría al mismo
   sistema y no a una mezcla de los dos.

   Las dos capas (docs/frontend_i18n_style.md, 2026-09-10):
     1. tinta — papel, superficie, dos acentos, un filete;
     2. composición — medida de lectura en la carta, escala con clamp(),
        etiquetas mono a 12px, aire entre tarjetas.

   Reglas que esta hoja respeta y que un mapeo mecánico de color rompe:
     - inputs en --bg-2 (hundidos), nunca en --paper-card (invisibles);
     - hover, reposo y activo de un mismo control nunca comparten color;
     - etiquetas mono a 12px como mínimo, con --fg-faint (7.04:1 sobre --bg-2);
     - los acentos brillantes (--cyan-bright, --gold-bright) NO existen aquí:
       son para lámina oscura;
     - color-scheme: light, para que los <select> y los scrollbars nativos
       no sigan pintándose para la noche.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg, #F7F3EA);
    color: var(--fg, #111B24);
    font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
::selection { background: var(--cyan, #0B6B63); color: var(--paper-card, #FFFCF6); }

a { color: var(--cyan, #0B6B63); text-decoration: none; }
a:hover { color: var(--cyan-hover, #08544E); }
h1, h2, h3 { text-wrap: balance; line-height: 1.28; }
p { text-wrap: pretty; line-height: 1.55; }

@keyframes spinPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* --- cabecera --------------------------------------------------------------
   Misma receta que las páginas de papel: logo del compás en registro papel,
   nombre en tinta y rótulo mono. Sin gradiente ni halo: eran para la noche. */
header.topbar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(247, 243, 234, 0.88);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hair, #E2DACA);
}
header.topbar .row {
    max-width: 1100px; margin: 0 auto;
    padding: 13px clamp(16px, 3vw, 24px);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
    color: var(--fg, #111B24); text-decoration: none;
}
.brand:hover { color: var(--fg, #111B24); }
.brand img { width: 26px; height: 26px; flex: none; }
.tag-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cyan, #0B6B63); text-align: center;
}
nav.top { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
nav.top a, nav.top button {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-dim, #545E68); background: transparent;
    border: 1px solid transparent; border-radius: 5px; padding: 6px 10px;
    cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
nav.top a:hover, nav.top button:hover,
nav.top a:focus-visible, nav.top button:focus-visible {
    color: var(--cyan, #0B6B63); border-color: var(--hair, #E2DACA);
    background: var(--paper-card, #FFFCF6); outline: none;
}

main.wrap {
    position: relative; z-index: 1; flex: 1; width: 100%;
    max-width: 1000px; margin: 0 auto;
    padding: 28px clamp(16px, 3vw, 24px) 96px;
    display: flex; flex-direction: column; gap: 18px;
}

/* --- aviso de verificación -------------------------------------------------
   Ámbar entintado: el aviso es un incentivo, no una alarma. */
.banner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: rgba(138, 90, 22, 0.07);
    border: 1px solid rgba(138, 90, 22, 0.35);
    border-radius: 8px; padding: 14px 18px;
    color: var(--fg, #111B24); font-size: 14px; text-wrap: pretty;
}
.banner strong { color: var(--gold, #8A5A16); font-weight: 600; }
.banner button.ghost {
    background: transparent; border: 1px solid rgba(138, 90, 22, 0.5);
    color: var(--gold, #8A5A16); padding: 8px 14px; border-radius: 4px;
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
}
.banner button.ghost:hover { background: rgba(138, 90, 22, 0.10); }

/* --- tarjetas --------------------------------------------------------------
   La superficie sobre el papel, con el único borde y la única sombra del
   sistema. La tarjeta hero no brilla: se distingue por el aire (gap 22). */
.card {
    background: var(--paper-card, #FFFCF6);
    border: 1px solid var(--hair, #E2DACA);
    border-radius: 10px;
    box-shadow: 0 1px 2px var(--paper-shadow, rgba(17, 27, 36, 0.04));
    padding: clamp(20px, 3vh, 32px);
    display: flex; flex-direction: column; gap: 14px;
}
.card-hero { gap: 22px; padding: clamp(24px, 3.4vh, 36px) clamp(20px, 3.2vw, 36px); }
.card h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--fg, #111B24); }
.card-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cyan, #0B6B63);
}
.card-hdr-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.card-hdr-row.base { align-items: baseline; }
.card .lbl {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fg-faint, #464E58); margin: 0;
}
.card p.value, .card span.value { margin: 0; color: var(--fg, #111B24); font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.card .value-muted { color: var(--fg-dim, #545E68); }
.card-decision {
    margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500;
    font-size: clamp(23px, 2.8vw, 31px); line-height: 1.26; letter-spacing: -0.012em;
    text-wrap: balance; color: var(--fg, #111B24);
}
.card-hint { margin: 0; font-size: 13.5px; color: var(--fg-dim, #545E68); line-height: 1.55; }
.card-link { font-size: 13px; }
.card-dashed { background: transparent; border-style: dashed; border-color: var(--hair-2, #C9BFA9); box-shadow: none; }
.card-row { flex-direction: row; align-items: center; gap: 14px; }
.card-strong { font-size: 15px; font-weight: 600; color: var(--fg, #111B24); }
.field-block { display: flex; flex-direction: column; gap: 5px; }
.field-block-full { grid-column: 1 / -1; }
.field-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 28px; border-top: 1px solid var(--hair, #E2DACA); padding-top: 20px;
}
.field-grid > * { min-width: 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-2 > * { min-width: 0; }
.row-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.row-2col > * { min-width: 0; }

/* --- página: cabecera de sección (proyectos, historial) -------------------- */
.page-head { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.page-back { font-size: 13px; color: var(--fg-dim, #545E68); }
.page-back:hover { color: var(--cyan, #0B6B63); }
.page-title {
    margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600;
    font-size: clamp(28px, 3.6vw, 36px); letter-spacing: -0.014em; line-height: 1.1;
    color: var(--fg, #111B24);
}
.page-sub { margin: 0; color: var(--fg-dim, #545E68); font-size: 14.5px; }
.page-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.06em; color: var(--fg-faint, #464E58);
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.spread { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

/* --- estados ---------------------------------------------------------------
   Un texto por estado, todos medidos sobre --bg-2. El punto de color y la
   etiqueta van juntos: el punto identifica de lejos, la etiqueta dice. */
.st-ready { color: var(--cyan, #0B6B63); }
.st-generating { color: var(--gold, #8A5A16); }
.st-queued { color: var(--fg-faint, #464E58); }
.st-failed { color: var(--down, #8E2E1B); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot.is-generating { animation: spinPulse 1.2s ease-in-out infinite; }

/* --- formularios ---------------------------------------------------------- */
label {
    display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-faint, #464E58); margin: 16px 0 6px;
}
label.req::after { content: " *"; color: var(--gold, #8A5A16); }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    width: 100%;
    background: var(--bg-2, #F1EADC);
    border: 1px solid var(--hair, #E2DACA);
    border-radius: 6px; padding: 12px 14px;
    color: var(--fg, #111B24);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 15px; line-height: 1.55;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--fg-dim, #545E68); opacity: 1; }
textarea { min-height: 120px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--hair-2, #C9BFA9); }
input:focus, textarea:focus, select:focus {
    border-color: var(--cyan, #0B6B63);
    background: var(--paper-card, #FFFCF6);
    box-shadow: 0 0 0 3px rgba(11, 107, 99, 0.14);
}
input:invalid:not(:placeholder-shown) { border-color: rgba(142, 46, 27, 0.55); }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--fg-dim, #545E68); text-wrap: pretty; }
.hint.hint-ok { color: var(--cyan, #0B6B63); }

/* Toggle de idioma de la carta. Tres estados con tres bordes: reposo (hair),
   hover (hair-2) y elegido (cyan). Un mapeo mecánico había dejado hover y
   reposo del mismo color. */
.lang-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-opt {
    flex: 1 1 140px; display: flex; align-items: center; gap: 9px;
    background: var(--bg-2, #F1EADC); border: 1px solid var(--hair, #E2DACA);
    border-radius: 6px; padding: 11px 14px; cursor: pointer;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 14.5px;
    color: var(--fg, #111B24); letter-spacing: 0; text-transform: none; margin: 0;
    transition: border-color 0.15s, background 0.15s;
}
.lang-opt:hover { border-color: var(--hair-2, #C9BFA9); }
.lang-opt input[type="radio"] { accent-color: var(--cyan, #0B6B63); width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; }
.lang-opt:has(input:checked) { border-color: var(--cyan, #0B6B63); background: rgba(11, 107, 99, 0.07); }
.lang-opt:has(input:focus-visible) { outline: 2px solid var(--cyan, #0B6B63); outline-offset: 2px; }

/* CTA: teal profundo con texto claro (Fase 1). El texto va en la superficie
   de tarjeta y no en blanco puro para que no vibre sobre el papel. */
button.primary, a.primary {
    display: inline-block; margin-top: 22px;
    background: var(--cyan, #0B6B63); color: var(--paper-card, #FFFCF6);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 600;
    font-size: 15px; padding: 12px 24px; border-radius: 6px; border: none;
    cursor: pointer; text-decoration: none; line-height: 1.3;
    transition: background 0.15s;
}
button.primary:hover, button.primary:focus-visible,
a.primary:hover, a.primary:focus-visible {
    background: var(--cyan-hover, #08544E); color: var(--paper-card, #FFFCF6); outline: none;
}
button.primary:disabled { opacity: 0.55; cursor: not-allowed; }
a.secondary { display: inline-block; margin-left: 10px; padding: 12px 18px; color: var(--fg-dim, #545E68); font-size: 14px; }
a.secondary:hover { color: var(--cyan, #0B6B63); }
button.ghost, a.ghost {
    display: inline-block; background: var(--paper-card, #FFFCF6);
    border: 1px solid var(--hair, #E2DACA); color: var(--fg, #111B24);
    padding: 7px 14px; border-radius: 5px;
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; line-height: 1.3;
    cursor: pointer; text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
button.ghost:hover, a.ghost:hover, button.ghost:focus-visible, a.ghost:focus-visible {
    border-color: var(--hair-2, #C9BFA9); color: var(--cyan, #0B6B63); background: var(--bg-2, #F1EADC); outline: none;
}
button.ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.self-start { align-self: flex-start; margin-top: auto; }

/* Avisos de resultado. El de error va en el rojo entintado del sistema; el
   de éxito en el teal. Ambos con fondo translúcido sobre tarjeta. */
.err, .ok { margin-top: 14px; padding: 10px 14px; border-radius: 6px; font-size: 13.5px; line-height: 1.5; display: none; }
.err { border: 1px solid rgba(142, 46, 27, 0.4); background: rgba(142, 46, 27, 0.06); color: var(--down, #8E2E1B); }
.ok { border: 1px solid rgba(11, 107, 99, 0.4); background: rgba(11, 107, 99, 0.06); color: var(--cyan, #0B6B63); }
.err.show, .ok.show { display: block; }

.slot {
    background: transparent; border: 1px dashed var(--hair-2, #C9BFA9); border-radius: 8px;
    padding: 16px 20px; color: var(--fg-dim, #545E68); font-size: 13px; text-align: center;
    margin-bottom: 20px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em;
}

/* --- cartas recientes (dashboard) ----------------------------------------- */
.recent-row { display: block; padding: 12px 0; border-bottom: 1px solid var(--hair, #E2DACA); text-decoration: none; color: inherit; }
.recent-row:last-of-type { border-bottom: 0; }
.recent-row:hover .recent-subj { color: var(--cyan, #0B6B63); }
.recent-inner { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.recent-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint, #464E58);
}
.recent-subj { font-size: 14.5px; color: var(--fg, #111B24); margin-top: 3px; transition: color 0.15s; }
.recent-status {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px;
}

/* --- historial de cartas --------------------------------------------------- */
.letter-row {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 20px;
    background: var(--paper-card, #FFFCF6); border: 1px solid var(--hair, #E2DACA);
    border-radius: 10px; padding: 18px 22px; color: inherit; text-decoration: none;
    box-shadow: 0 1px 2px var(--paper-shadow, rgba(17, 27, 36, 0.04));
    transition: border-color 0.2s, background 0.2s;
}
.letter-row > * { min-width: 0; }
.letter-row:hover { border-color: var(--hair-2, #C9BFA9); background: var(--bg-2, #F1EADC); color: inherit; }
.letter-row .lr-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint, #464E58);
}
.letter-row .lr-status {
    justify-self: end; display: inline-flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.letter-row .lr-subj { font-size: 16.5px; font-weight: 600; color: var(--fg, #111B24); line-height: 1.35; text-wrap: balance; }
.letter-row .lr-pill {
    justify-self: end; align-self: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--fg-dim, #545E68); white-space: nowrap;
}
.pg-btn {
    display: inline-block; padding: 9px 16px; border-radius: 5px; font-size: 13px;
    font-family: 'Bricolage Grotesque', sans-serif; text-decoration: none; background: var(--paper-card, #FFFCF6);
    border: 1px solid var(--hair, #E2DACA); color: var(--fg, #111B24); line-height: 1.3; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pg-btn.pg-btn-on:hover { border-color: var(--hair-2, #C9BFA9); color: var(--cyan, #0B6B63); background: var(--bg-2, #F1EADC); }
.pg-btn.pg-btn-off { color: var(--fg-dim, #545E68); background: transparent; cursor: not-allowed; opacity: 0.7; }

/* --- vista de carta --------------------------------------------------------
   Capa de composición: la carta es lectura larga, así que el cuerpo va en
   Fraunces a 17-18px con interlineado 1.68 y el artículo se estrecha a 820px
   (medida cómoda con los márgenes de la tarjeta), no al ancho del dashboard. */
.letter-head { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.letter-article {
    background: var(--paper-card, #FFFCF6); border: 1px solid var(--hair, #E2DACA);
    border-radius: 10px; overflow: hidden; width: 100%; max-width: 820px; margin: 0 auto;
    box-shadow: 0 1px 2px var(--paper-shadow, rgba(17, 27, 36, 0.04));
}
.letter-article-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 24px clamp(22px, 5vw, 44px); border-bottom: 1px solid var(--hair, #E2DACA);
    background: var(--bg-2, #F1EADC);
}
.letter-article-brand { display: flex; flex-direction: column; gap: 3px; }
.letter-article-brand .name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 21px; color: var(--fg, #111B24); }
.letter-article-brand .sub { font-size: 14px; color: var(--fg-dim, #545E68); }
.letter-article-date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.10em; color: var(--fg-faint, #464E58); }
.letter-content { padding: clamp(28px, 5vh, 44px) clamp(22px, 5vw, 44px); color: var(--fg, #111B24); font-family: 'Fraunces', Georgia, serif; font-size: 17.5px; line-height: 1.68; text-wrap: pretty; }
.letter-content h1, .letter-content h2, .letter-content h3 { color: var(--fg, #111B24); font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.letter-content h1 { font-size: clamp(26px, 3vw, 32px); line-height: 1.15; margin: 0 0 16px; }
.letter-content h2 { font-size: clamp(22px, 2.4vw, 26px); line-height: 1.2; margin: 36px 0 12px; }
.letter-content h3 { font-size: 19px; line-height: 1.3; margin: 24px 0 8px; font-weight: 500; }
.letter-content p { margin: 0 0 16px; }
.letter-content strong { color: var(--fg, #111B24); font-weight: 600; }
.letter-content em { font-style: italic; }
.letter-content ul, .letter-content ol { margin: 0 0 16px; padding-left: 24px; }
.letter-content li { margin: 6px 0; }
.letter-content a { color: var(--cyan, #0B6B63); text-decoration: none; border-bottom: 1.5px solid var(--deco-underline, #A8CFCB); }
.letter-content a:hover { border-bottom-color: var(--cyan, #0B6B63); }
.letter-content code { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; background: var(--bg-2, #F1EADC); padding: 1px 6px; border-radius: 3px; color: var(--fg, #111B24); }
.letter-content hr { border: none; border-top: 1px solid var(--hair, #E2DACA); margin: 32px 0; }
/* El HTML guardado de la carta es el del correo, con su rótulo de marca y su
   pie: se sirven aquí en tinta neutra y en la tipografía del sistema. */
.letter-content .brand { display: none; }
.letter-content .footer {
    margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hair, #E2DACA);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 13px; line-height: 1.55; color: var(--fg-dim, #545E68);
}
.letter-content .footer a { color: var(--fg-dim, #545E68); border-bottom-color: var(--hair-2, #C9BFA9); }
.letter-content details {
    margin-top: 24px; padding: 14px 20px; border: 1px solid var(--hair, #E2DACA); border-radius: 8px; background: var(--bg, #F7F3EA);
    font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 15px;
}
.letter-content details > summary {
    cursor: pointer; list-style: none; font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint, #464E58);
}
.letter-content details > summary::-webkit-details-marker { display: none; }
.letter-content details[open] > summary { color: var(--fg, #111B24); margin-bottom: 12px; }
.letter-content table.report-table {
    width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; color: var(--fg, #111B24);
    display: block; overflow-x: auto; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}
.letter-content table.report-table th, .letter-content table.report-table td { padding: 8px 12px; border-bottom: 1px solid var(--hair, #E2DACA); text-align: left; vertical-align: top; }
.letter-content table.report-table th { color: var(--fg, #111B24); font-weight: 600; border-bottom: 1px solid var(--hair-2, #C9BFA9); }
.letter-content table.report-table tr:hover td { background: var(--bg-2, #F1EADC); }
.letter-disclaimer {
    margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--hair, #E2DACA);
    font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7; color: var(--fg-faint, #464E58);
}
.letter-md {
    background: var(--paper-card, #FFFCF6); border: 1px solid var(--hair, #E2DACA); border-radius: 10px; padding: 24px;
    color: var(--fg, #111B24); white-space: pre-wrap; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6; overflow-x: auto;
}
.letter-pill { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim, #545E68); }
.letter-pill a { color: var(--gold, #8A5A16); border-bottom: 1.5px solid var(--deco-underline, #A8CFCB); }
.card.is-failed { border-color: rgba(142, 46, 27, 0.4); }
.card.is-generating { border-color: rgba(138, 90, 22, 0.4); }
.card.is-generating h2 { color: var(--gold, #8A5A16); }

/* --- chat ------------------------------------------------------------------
   El historial se hunde (--bg-2) y las burbujas suben a la superficie. Tú:
   borde teal, a la derecha. Brújula: filete ámbar a la izquierda. */
.chat-history {
    display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; padding: 16px;
    background: var(--bg-2, #F1EADC); border: 1px solid var(--hair, #E2DACA); border-radius: 8px; margin-bottom: 14px;
}
.chat-empty { padding: 30px 10px; text-align: center; color: var(--fg-dim, #545E68); font-size: 14px; text-wrap: pretty; }
.chat-msg {
    padding: 11px 14px; display: flex; flex-direction: column; gap: 5px; line-height: 1.6;
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; margin: 0;
    background: var(--paper-card, #FFFCF6); border: 1px solid var(--hair, #E2DACA);
}
.chat-msg-user { align-self: flex-end; max-width: 78%; border-color: rgba(11, 107, 99, 0.35); border-radius: 8px 8px 2px 8px; }
.chat-msg-assistant { align-self: flex-start; max-width: 88%; border-left: 2px solid var(--gold, #8A5A16); border-radius: 2px 8px 8px 8px; }
.chat-role { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.chat-msg-user .chat-role { color: var(--cyan, #0B6B63); }
.chat-msg-assistant .chat-role { color: var(--gold, #8A5A16); }
.chat-content { color: var(--fg, #111B24); }
@media (max-width: 520px) { .chat-msg-user, .chat-msg-assistant { max-width: 94%; } }
.chat-input { min-height: 56px; }
.chat-below { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 14px; flex-wrap: wrap; }
.chat-char { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--fg-faint, #464E58); letter-spacing: 0.06em; }
.chat-char.warn { color: var(--gold, #8A5A16); }
.chat-char.danger { color: var(--down, #8E2E1B); }
button.primary.chat-send { margin-top: 0; padding: 9px 18px; font-size: 14px; }
.chat-thinking { margin-top: 10px; padding: 10px 14px; color: var(--gold, #8A5A16); font-size: 13px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; }
.chat-disabled { padding: 20px; text-align: center; color: var(--fg-dim, #545E68); border: 1px dashed var(--hair-2, #C9BFA9); border-radius: 8px; font-size: 14px; }
.chat-clear-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair, #E2DACA); text-align: right; }
.chat-clear-link {
    background: transparent; border: none; padding: 6px 10px; color: var(--fg-dim, #545E68);
    font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.15s;
}
.chat-clear-link:hover { color: var(--down, #8E2E1B); }

/* --- proyectos -------------------------------------------------------------- */
/* La vista de un proyecto alterna etiqueta y valor; el aire va entre pares,
   no entre etiqueta y su valor (que se leen juntos). */
.proj-view { display: flex; flex-direction: column; gap: 4px; }
.proj-view .lbl { margin-top: 12px; }
.proj-view .lbl:first-child { margin-top: 0; }
.proj-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.proj-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.proj-state { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.proj-state.is-active { background: var(--cyan, #0B6B63); }
.proj-state.is-off { background: transparent; border: 1.5px solid var(--hair-2, #C9BFA9); }

/* --- auth (login, registro, reset, verificación, reclamo) ------------------
   Una sola tarjeta centrada. El wordmark en tinta con el compás al lado; el
   rótulo mono en teal. Sin estrellas, sin halo, sin sombra de 80px. */
.auth-wrap { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 20px; }
.auth-wrap .card { width: 100%; max-width: 440px; padding: clamp(28px, 4vh, 42px) clamp(22px, 4vw, 36px); gap: 22px; box-shadow: 0 1px 2px var(--paper-shadow, rgba(17, 27, 36, 0.04)), 0 14px 40px rgba(17, 27, 36, 0.05); }
.brand-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-block .brand { font-size: 26px; gap: 12px; }
.brand-block .brand img { width: 32px; height: 32px; }
.auth-wrap .tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan, #0B6B63); text-align: center; }
.title-block { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.auth-wrap h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(24px, 3vw, 28px); letter-spacing: -0.012em; line-height: 1.22; margin: 0; color: var(--fg, #111B24); text-align: center; }
.auth-wrap p.sub { font-weight: 400; color: var(--fg-dim, #545E68); font-size: 14.5px; line-height: 1.5; margin: 0; }
.auth-wrap p.sub.left { text-align: left; margin: 6px 0 0; font-size: 13px; }
.auth-wrap form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.auth-wrap .field { display: flex; flex-direction: column; gap: 7px; }
.auth-wrap label { margin: 0; }
.auth-wrap .pw-hint { font-size: 13px; color: var(--fg-dim, #545E68); margin: 0; line-height: 1.5; }
.auth-wrap button.primary { margin-top: 4px; width: 100%; padding: 13px; font-size: 14.5px; }
.auth-wrap a.primary { margin-top: 0; }
.auth-wrap .err, .auth-wrap .ok { margin-top: 0; }
.foot-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot-block .divider, .auth-wrap .divider { width: 60px; height: 1px; background: var(--hair-2, #C9BFA9); margin: 0 auto; }
.foot-stack { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.foot { margin: 0; text-align: center; font-size: 13.5px; color: var(--fg-dim, #545E68); }
.foot a { color: var(--cyan, #0B6B63); border-bottom: 1.5px solid var(--deco-underline, #A8CFCB); }
.foot a:hover { border-bottom-color: var(--cyan, #0B6B63); }
/* Las páginas de reset, verificación y reclamo llevan el rótulo y el título
   sueltos (sin brand-block); se centran igual. */
.auth-wrap .card > .brand, .auth-wrap .card > .tag, .auth-wrap .card > .divider { align-self: center; }
.auth-wrap .card > .brand { font-size: 26px; gap: 12px; }
.auth-wrap .card > .brand img { width: 32px; height: 32px; }
.auth-wrap .card > .brand + .tag { margin-top: -12px; }

/* --- crisis (pantalla de recursos) ----------------------------------------
   Lectura, no dashboard: Fraunces, medida corta, tarjetas de recurso sobre
   la superficie. El de emergencia lleva el rojo entintado; el de líneas de
   apoyo, el teal. */
.crisis-wrap { max-width: 640px; margin: 0 auto; padding: 48px 24px 72px; font-family: 'Fraunces', Georgia, serif; }
.crisis-wrap .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint, #464E58); margin-bottom: 24px; }
.crisis-wrap h1 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(28px, 4vw, 34px); font-weight: 600; color: var(--fg, #111B24); letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 22px; }
.crisis-wrap p { font-size: 17px; line-height: 1.65; color: var(--fg, #111B24); margin: 0 0 16px; }
.crisis-wrap .card { margin: 24px 0; padding: 18px 20px; gap: 0; border-left: 3px solid var(--cyan, #0B6B63); }
.crisis-wrap .card .label { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan, #0B6B63); margin: 0 0 10px; }
.crisis-wrap .card .body { font-size: 16px; line-height: 1.55; color: var(--fg, #111B24); }
.crisis-wrap .card .body a { color: var(--cyan, #0B6B63); border-bottom: 1.5px solid var(--deco-underline, #A8CFCB); }
.crisis-wrap .card.emergency { border-left-color: var(--down, #8E2E1B); }
.crisis-wrap .card.emergency .label { color: var(--down, #8E2E1B); }
.crisis-wrap .footer-note { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hair, #E2DACA); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--fg-faint, #464E58); line-height: 1.65; letter-spacing: 0.02em; }

/* --- demo (carta de un solo uso) ------------------------------------------ */
.demo-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 24px; text-align: center; }
.demo-wrap .brand { font-size: 30px; gap: 12px; margin: 0 0 10px; }
.demo-wrap .brand img { width: 36px; height: 36px; }
.demo-wrap .tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan, #0B6B63); margin: 0 0 40px; }
.demo-wrap h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.25; letter-spacing: -0.012em; text-wrap: balance; max-width: 560px; margin: 0 0 12px; color: var(--fg, #111B24); }
.demo-wrap p { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; text-wrap: pretty; max-width: 520px; margin: 0 0 32px; color: var(--fg-dim, #545E68); }
.demo-wrap .btn { display: inline-block; background: var(--cyan, #0B6B63); color: var(--paper-card, #FFFCF6); font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 6px; border: none; text-decoration: none; cursor: pointer; transition: background 0.15s; }
.demo-wrap .btn:hover, .demo-wrap .btn:focus-visible { background: var(--cyan-hover, #08544E); outline: none; }
.demo-wrap form { margin: 0; }
.demo-wrap .link { color: var(--cyan, #0B6B63); font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.04em; border-bottom: 1.5px solid var(--deco-underline, #A8CFCB); }
.demo-wrap .divider { width: 80px; height: 1px; background: var(--hair-2, #C9BFA9); margin: 28px auto; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 720px) {
    nav.top { gap: 2px; }
    nav.top a, nav.top button { letter-spacing: 0.08em; padding: 6px 8px; }
}
@media (max-width: 520px) {
    header.topbar .row { grid-template-columns: 1fr; gap: 8px; justify-items: center; }
    .tag-mono { display: none; }
    nav.top { justify-content: center; }
    .field-grid { grid-template-columns: 1fr; gap: 14px; }
    .row-2 { grid-template-columns: 1fr; }
    .letter-row { grid-template-columns: 1fr; }
    .letter-row .lr-status, .letter-row .lr-pill { justify-self: start; }
    .letter-content { font-size: 16.5px; line-height: 1.62; }
    .card-row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Módulos C y D del dashboard · Fase 4 · paso 2
   ============================================================================
   Registro papel: superficies de tarjeta, filete --hair y tinta --fg. El tono
   de la tesis vive SOLO en la línea de la sparkline (los --tm-* no pasan
   contraste como color de letra sobre --bg-2). Nada por debajo de 12px.
   ========================================================================== */

.maestras, .accesos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* --- C · las ocho maestras ------------------------------------------------ */

.maestra {
    display: grid;
    grid-template-columns: 52px 1fr 92px 58px 44px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hair, #E2DACA);
}
.maestra:last-child { border-bottom: none; }

.maestra-code {
    font-family: var(--mono, monospace);
    font-size: 12px;
    color: var(--fg-faint, #464E58);
    letter-spacing: 0.04em;
}

.maestra-nombre {
    font-size: 14px;
    line-height: 1.4;
    color: var(--fg, #111B24);
}

.maestra-spark { display: block; min-height: 24px; }

.maestra-spark-vacia {
    font-size: 12px;
    color: var(--fg-dim, #545E68);
    line-height: 24px;
}

.maestra-prob {
    font-family: var(--mono, monospace);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg, #111B24);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.chip {
    font-family: var(--mono, monospace);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid var(--hair, #E2DACA);
    color: var(--fg-dim, #545E68);
    background: var(--bg-2, #F1EADC);
    font-variant-numeric: tabular-nums;
}
/* Verde y rojo de papel, los mismos de --up/--down: 5:1 sobre --bg-2. */
.chip-sube { color: var(--up, #0B6B63); border-color: color-mix(in srgb, var(--up) 35%, var(--hair)); }
.chip-baja { color: var(--down, #8E2E1B); border-color: color-mix(in srgb, var(--down) 35%, var(--hair)); }
/* Sin cambio en la ventana: se dice '=' en gris, no un cero verde. */
.chip-plana { color: var(--fg-faint, #464E58); }

@media (max-width: 640px) {
    /* En móvil la línea estorba antes que el dato: fuera la sparkline y el
       nombre ocupa el ancho. */
    .maestra { grid-template-columns: 48px 1fr 54px 42px; gap: 10px; }
    .maestra .maestra-spark, .maestra .maestra-spark-vacia { display: none; }
    .maestra-nombre { font-size: 13.5px; }
}

/* --- D · accesos directos con estado -------------------------------------- */

.acceso {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hair, #E2DACA);
}
.acceso:last-child { border-bottom: none; }

.acceso-txt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg, #111B24);
}