/* =================================================================
   ORO SOBRE TINTA — sistema de diseno compartido de snninvestments.es
   -----------------------------------------------------------------
   Fondo casi negro calido, oro viejo para marca y accion principal,
   verde y rojo SOLO para cifras que suben o bajan (siempre con signo).
   EB Garamond en titulares, Inter en interfaz, JetBrains Mono en
   cifras (numeros tabulares).

   Se carga DESPUES de css/styles.css en todas las paginas. styles.css
   queda para lo que aun no se ha migrado (y para el asistente NIA);
   todo lo nuevo va aqui.

   Movimiento (criterio Emil Kowalski):
   - Pulsar: scale(.97) en 120 ms cubic-bezier(.23,1,.32,1).
   - Nunca "transition: all": se nombran las propiedades.
   - Hover solo con raton real: @media (hover: hover) and (pointer: fine).
   - Sin animaciones de entrada en cifras.
   - prefers-reduced-motion: fuera escalas y desplazamientos.

   OJO con la cache: _headers sirve /css/* como "immutable" durante un
   anio. Al cambiar este fichero hay que subir el ?v= de todas las
   paginas, o los visitantes seguiran con la version vieja.
   ================================================================= */

/* ── 1. Tokens ───────────────────────────────────────────────────── */
/* Fuentes de reserva con las medidas de las de Google Fonts. Las fuentes
   llegan tarde (se cargan sin bloquear el pintado) y, mientras, el texto
   sale en Times New Roman, Arial o Consolas. Sin ajustar, esas fuentes son
   mas anchas o mas estrechas, los titulares cambian de numero de lineas al
   llegar la buena y la pagina entera salta. size-adjust iguala el ancho y
   ascent/descent-override la altura (valores medidos en Chrome con las
   fuentes reales; los override van divididos por size-adjust). Si la
   fuente local no existe (Android), se pasa a la siguiente de la pila. */
@font-face {
    font-family: "EB Garamond Fallback";
    src: local("Times New Roman"), local("TimesNewRomanPSMT");
    font-weight: 100 599;
    size-adjust: 97%;
    ascent-override: 103.8%;
    descent-override: 30.7%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "EB Garamond Fallback";
    src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
    font-weight: 600 900;
    size-adjust: 94.5%;
    ascent-override: 106.6%;
    descent-override: 31.5%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT");
    font-weight: 100 599;
    size-adjust: 106%;
    ascent-override: 91.4%;
    descent-override: 22.8%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 600 900;
    size-adjust: 100.9%;
    ascent-override: 96%;
    descent-override: 23.9%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "JetBrains Mono Fallback";
    src: local("Consolas");
    size-adjust: 109.1%;
    ascent-override: 93.5%;
    descent-override: 27.5%;
    line-gap-override: 0%;
}

:root {
    --ground: #0A0908;
    --ground-2: #0D0C0A;
    --ground-3: #070605;
    --surface: #12110F;
    --raised: #1A1815;
    --line: #2B2723;
    --line-soft: #1E1B18;
    --line-strong: #3A342E;
    --line-hover: #4A433B;
    --text: #F2EDE4;
    --text-2: #A8A095;
    --text-3: #8A8177;
    --gold: #D4AF6A;
    --gold-hover: #DDBD80;
    --gold-text: #E3C88E;
    --gold-bg: #231C10;
    --up: #5BC48A;
    --down: #EF7A62;
    --up-bg: #0F1A14;
    --up-line: #1C3326;
    --down-bg: #1C110E;
    --down-line: #3A211A;
    --down-soft: #F09A86;

    --serif: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", serif;
    --sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --press: transform 120ms var(--ease-out);
    --gutter: clamp(16px, 4vw, 32px);
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    /* Tokens heredados de styles.css y de los estilos en linea de las
       paginas: se redirigen a la paleta nueva para que lo que aun los usa
       herede el aspecto sin reescribirlo todo. */
    --bg-primary: var(--ground);
    --bg-secondary: var(--ground-2);
    --bg-card: var(--surface);
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --primary: var(--gold);
    --secondary: var(--gold);
    --accent: var(--gold-text);
    --border-color: var(--line);
    --gradient: linear-gradient(var(--gold), var(--gold));
    --transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --glow: none;
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
/* Reinicio minimo: oro.css debe bastar por si sola (report-unsubscribe no
   carga styles.css). */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: var(--text); }
h3, h4, h5 { font-family: var(--sans); font-weight: 600; line-height: 1.3; color: var(--text); }
a { color: var(--gold-text); }
strong, b { font-weight: 600; }
img, svg { max-width: 100%; }
::selection { background: rgba(212, 175, 106, .3); color: var(--text); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gold-text);
    outline-offset: 3px;
    border-radius: 4px;
}
main [id] { scroll-margin-top: 88px; }

.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;
}
.skip-link {
    position: absolute; left: var(--gutter); top: -100px; z-index: 2000;
    padding: 10px 16px; border-radius: var(--radius-sm);
    background: var(--gold); color: var(--ground); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ── 3. Utilidades ───────────────────────────────────────────────── */
.wrap,
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.wrap-narrow { max-width: 880px; }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
.num,
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.eyebrow {
    margin: 0;
    font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold);
}
.is-up { color: var(--up); }
.is-down { color: var(--down); }
.is-flat { color: var(--text-2); }

.section { padding-top: clamp(56px, 8vw, 88px); padding-bottom: clamp(56px, 8vw, 88px); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.section-note { margin: 0; font-size: 14px; color: var(--text-2); }
.h2 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; }

/* Cabecera de las paginas interiores */
.page-head {
    padding-top: clamp(40px, 7vw, 72px);
    padding-bottom: clamp(24px, 4vw, 40px);
    display: flex; flex-direction: column; gap: 14px;
}
.page-title { margin: 0; max-width: 820px; font-size: clamp(36px, 5.5vw, 60px); line-height: 1.04; }
.page-lead { margin: 0; max-width: 680px; font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--text-2); }
.page-meta { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
main.wrap { padding-bottom: clamp(56px, 8vw, 88px); }

/* ── 4. Botones ──────────────────────────────────────────────────── */
.cta,
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--text);
    font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.2;
    text-decoration: none; text-align: center; cursor: pointer;
    box-shadow: none;
    -webkit-user-select: none; user-select: none;
    transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.cta:active,
.btn:active { transform: scale(.97); }
.cta svg,
.btn svg { width: 18px; height: 18px; flex: none; }

.cta-primary,
.btn-primary,
.btn-hero { background: var(--gold); color: var(--ground); border-color: var(--gold); }
.cta-ghost,
.btn-secondary,
.btn-outline,
.btn-account { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-logout,
.cta-danger { background: transparent; color: var(--down); border-color: var(--down-line); }
.cta-quiet { background: transparent; color: var(--gold-text); padding: 0 8px; }
.cta-sm,
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.cta-block { width: 100%; }

.cta:disabled,
.btn:disabled,
.cta[aria-disabled="true"],
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.text-link { font-size: 15px; text-decoration: none; color: var(--gold-text); transition: color 150ms ease; }

@media (hover: hover) and (pointer: fine) {
    .cta-primary:hover,
    .btn-primary:hover,
    .btn-hero:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--ground); }
    .cta-ghost:hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .btn-account:hover { background: var(--raised); border-color: var(--line-hover); color: var(--text); }
    .btn-logout:hover,
    .cta-danger:hover { background: var(--down-bg); }
    .cta-quiet:hover,
    .text-link:hover { color: var(--text); }
}

/* ── 5. Barra de navegacion ──────────────────────────────────────────
   Mismo markup en todas las paginas. js/navbar.js completa los enlaces
   canonicos, pinta los botones de sesion en .nav-actions y gestiona el
   menu en movil (clase .is-open en .navbar, por debajo de 960 px). */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: var(--ground);
    border-bottom: 1px solid var(--line-soft);
}
.nav-container {
    max-width: 1200px; margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 10px 28px;
}
.logo {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--text); text-decoration: none; cursor: pointer;
}
.logo-word { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.logo-sub { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; color: var(--gold); }
.nav-links {
    flex: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
    margin: 0; padding: 0; list-style: none;
}
.nav-links li { display: block; }
.nav-link {
    display: inline-block;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: color 150ms ease, background-color 150ms ease;
}
.nav-actions { display: flex; align-items: center; gap: 8px; }
/* js/navbar.js pinta los botones de sesion (40 px) cuando carga: la fila
   ya mide eso desde el principio para que la barra no crezca 3 px y empuje
   toda la pagina. */
@media (min-width: 961px) {
    .nav-links { min-height: 40px; }
}
/* navbar.js pinta los botones de sesion con padding y tamanio en linea. */
.nav-actions .btn {
    min-height: 40px; height: 40px; padding: 0 16px !important;
    font-size: 14px !important;
}
.mobile-menu-btn {
    display: none;
    margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text);
}
.mobile-menu-btn span {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: var(--text);
    transition: transform 200ms var(--ease-out), opacity 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--text); background: var(--raised); }
}

@media (max-width: 960px) {
    .nav-container { gap: 0 12px; }
    .logo { order: 0; }
    .logo-word { font-size: 25px; }
    .mobile-menu-btn {
        order: 1; margin-left: auto;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        width: 44px; height: 44px;
    }
    .nav-links {
        order: 2; flex: 1 1 100%;
        display: none;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 0 0;
    }
    .nav-actions {
        order: 3; flex: 1 1 100%;
        display: none;
        flex-wrap: wrap; gap: 8px;
        padding: 12px 0 8px;
    }
    .navbar.is-open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
    .navbar.is-open .nav-links,
    .navbar.is-open .nav-actions { display: flex; }
    .nav-links .nav-link {
        display: block; padding: 12px 2px;
        font-size: 16px; border-radius: 0;
        border-bottom: 1px solid var(--line-soft);
    }
    .nav-actions .nav-link { padding: 10px 2px; font-size: 15px; }
    .navbar.is-open .mobile-menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .navbar.is-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
    .navbar.is-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ── 6. Superficies ──────────────────────────────────────────────── */
.surface,
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
}
.card-pad { padding: clamp(18px, 3vw, 28px); }
.card-title { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }
.card-link {
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    color: var(--text); text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .card-link:hover { border-color: var(--line-strong); background: var(--raised); }
}

/* Franja de llamada a la accion al final de las paginas interiores */
.cta-band {
    margin-top: clamp(48px, 7vw, 72px);
    padding: clamp(24px, 4vw, 40px);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
}
.cta-band h2 { font-size: clamp(24px, 3vw, 30px); }
.cta-band p { margin-top: 8px; max-width: 600px; color: var(--text-2); line-height: 1.6; }

/* Aviso / nota destacada (sustituye a las cajas doradas de cada pagina) */
.note {
    padding: 16px 20px;
    background: var(--gold-bg);
    border: 1px solid #3A2F1A;
    border-radius: var(--radius);
    color: var(--text-2); font-size: 14px; line-height: 1.6;
}
.note strong { color: var(--gold-text); }

/* Mensajes de estado: error al cargar (con "Reintentar") y listas vacias.
   .state es el componente; las otras clases son las que ya usaban las
   paginas y heredan el mismo aspecto. Icono segun el tipo: .is-error,
   .is-empty. Ver tambien la seccion 16 (esqueletos). */
.state,
.state-msg,
.data-error,
.track-error,
.chart-error {
    margin: 0; padding: 28px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
    color: var(--text-2); font-size: 15px; line-height: 1.5; text-align: center;
}
.state.is-error::before,
.state.is-empty::before {
    content: '';
    flex: none; width: 40px; height: 40px; margin-bottom: 2px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--raised) center / 20px 20px no-repeat;
}
.state.is-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C88E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5h.01'/%3E%3C/svg%3E");
}
.state.is-empty::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A095' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v13H7zM14 3.5v4h4M10 12h5M10 15.5h3.5'/%3E%3C/svg%3E");
}
.state-title { margin: 0; color: var(--text); font-size: 15px; font-weight: 500; }
.state-text { margin: 0; max-width: 46ch; color: var(--text-2); font-size: 14px; }
.state .cta { margin-top: 4px; }
/* En una caja pequenia (cotizaciones de la portada, listas del admin):
   en fila y sin icono. */
.state.is-compact {
    flex-direction: row; flex-wrap: wrap; gap: 6px 14px;
    padding: 12px 16px; border-style: solid; border-color: var(--line);
    font-size: 14px;
}
.state.is-compact::before { display: none; }
.state.is-compact .cta { margin-top: 0; }
.state.is-compact .state-title { font-size: 14px; font-weight: 400; color: var(--text-2); }

/* ── 7. Formularios ──────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.label,
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-2); }
.hint { font-size: 13px; color: var(--text-3); }

/* Base de especificidad cero para cualquier campo sin clase dentro de
   <main>: las clases de cada pagina siguen mandando. */
:where(main) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="file"], [type="hidden"]), select, textarea),
.input,
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--ground);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-family: var(--sans); font-size: 16px; line-height: 1.4;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
:where(main) :where(textarea),
textarea.input,
.form-textarea { min-height: 120px; resize: vertical; }
:where(main) :where(input, select, textarea)::placeholder,
.input::placeholder,
.form-input::placeholder { color: var(--text-3); opacity: 1; }
:where(main) :where(input, select, textarea):focus,
.input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 106, .22);
}
:where(main) :where(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--gold); }

/* Interruptor: un checkbox real (role="switch"), accesible con teclado */
.switch {
    -webkit-appearance: none; appearance: none;
    position: relative; flex: none; width: 44px; height: 26px; margin: 0;
    border-radius: 999px; background: var(--line-strong); cursor: pointer;
    transition: background-color 150ms ease;
}
.switch::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--text);
    transition: transform 200ms var(--ease-out), background-color 150ms ease;
}
.switch:checked { background: var(--gold); }
.switch:checked::after { transform: translateX(18px); background: var(--ground); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

.notice,
.error-message,
.success-message {
    padding: 12px 16px; border-radius: var(--radius);
    font-size: 14px; line-height: 1.5;
}
.notice-error,
.error-message { background: var(--down-bg); border: 1px solid var(--down-line); color: var(--down-soft); }
.notice-success,
.success-message { background: var(--up-bg); border: 1px solid var(--up-line); color: var(--up); }
/* Las paginas los muestran poniendo contenido o la clase .show/.visible */
.error-message:empty,
.success-message:empty { display: none; }

/* ── 8. Tablas ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    padding: 12px 16px; text-align: left; white-space: nowrap;
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-3); background: var(--surface); border-bottom: 1px solid var(--line);
}
.table td { padding: 12px 16px; color: var(--text); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody th {
    background: none; border-bottom: 1px solid var(--line-soft);
    font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text);
}
.table tr:last-child th { border-bottom: 0; }
.table .num,
.table td.num { text-align: right; white-space: nowrap; }

/* ── 9. Etiquetas ────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-family: var(--mono); font-size: 12px; line-height: 1.3; white-space: nowrap;
    background: var(--raised); color: var(--text-2);
}
.badge-gold { background: var(--gold-bg); color: var(--gold-text); }
.badge-up { background: var(--up-bg); color: var(--up); }
.badge-down { background: #2A1712; color: var(--down-soft); }
.badge-outline { background: transparent; border: 1px solid var(--line); }

/* Control segmentado (vistas, periodos) */
.segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.segmented button {
    min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-2);
    font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.segmented button[aria-selected="true"],
.segmented button.is-active { background: var(--line); color: var(--text); }
@media (hover: hover) and (pointer: fine) {
    .segmented button:hover { color: var(--text); }
}

/* ── 10. Componentes de datos (portada y portal) ─────────────────── */
.live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
    font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.live-badge.is-stale .live-dot { background: var(--text-3); }

.chart { display: block; width: 100%; height: 180px; overflow: visible; }
.chart-zero { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 5; }
.chart-area { fill: var(--gold); fill-opacity: .07; }
.chart-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.chart-axis {
    display: flex; justify-content: space-between; gap: 8px;
    font-family: var(--mono); font-size: 11px; color: var(--text-2);
}
.chart-error { min-height: 180px; display: flex; align-items: center; justify-content: center; }

.chart-wrap { position: relative; }
.chart-peak-dot {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: var(--ground); border: 2px solid var(--gold);
    transform: translate(-50%, -50%); pointer-events: none;
}

.footnote { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* Fila de KPI (invertir, portal) */
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Fila de cifras: valor encima, etiqueta debajo */
.stats {
    margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px;
}
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }
.stats dt { font-size: 12px; color: var(--text-2); }
.stats dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; line-height: 1.3; white-space: nowrap; }

/* Tarjeta KPI */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi-label { font-size: 12px; color: var(--text-2); }
.kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; white-space: nowrap; }
.kpi-sub { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* Casillas mensuales */
.month-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 520px) { .month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .month-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .month-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.month {
    min-width: 0; padding: 14px 10px;
    display: flex; flex-direction: column; gap: 6px;
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.month.is-up { background: var(--up-bg); border-color: var(--up-line); }
.month.is-down { background: var(--down-bg); border-color: var(--down-line); }
.month-label { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.month-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; line-height: 1.2; white-space: nowrap; }
@media (max-width: 400px) { .month-value { font-size: 16px; } }
@media (min-width: 1180px) { .month-value { font-size: 15px; } }

/* Tabla "mes a mes" por anios (invertir, portal) */
.year-wrap { border: 0; border-radius: 0; }
.year-table { min-width: 780px; border-collapse: separate; border-spacing: 3px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; }
.year-table th,
.year-table td { padding: 7px 3px; text-align: center; border: 0; background: none; letter-spacing: 0; text-transform: none; }
.year-table thead th { font-size: 11px; color: var(--text-3); }
.year-table tbody th { text-align: left; font-size: 11px; font-weight: 400; color: var(--text-2); border-bottom: 0; }
.year-table .num,
.year-table .ytotal { text-align: right; }
.ycell { border-radius: 6px; }
.ycell.is-up { background: var(--up-bg); color: var(--up); }
.ycell.is-down { background: var(--down-bg); color: var(--down); }

/* Tarjeta de lectura (analisis, informes) */
.read-card {
    height: 100%; min-height: 170px; padding: 24px;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    color: var(--text); text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.read-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.read-title { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.read-excerpt { font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
    .read-card:hover { border-color: var(--line-strong); background: var(--raised); }
}
.read-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px;
}

/* Listados con portada (informes, noticias) */
.pub-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px;
}
.pub-card {
    min-width: 0;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.pub-card-link { flex: 1; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.pub-cover {
    display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
    background: var(--raised); border-bottom: 1px solid var(--line);
}
/* Portada esqueleto (un span, no una imagen): tapa con .skel-fill. */
span.pub-cover { position: relative; overflow: hidden; }
span.pub-cover .skel-fill { border-radius: 0; }
.pub-body { flex: 1; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.pub-date { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pub-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.pub-excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.pub-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.pub-more { font-size: 14px; font-weight: 600; color: var(--gold-text); }
.pub-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.pub-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-card > .pub-actions { padding: 0 22px 22px; }
.list-more { margin-top: 32px; display: flex; justify-content: center; }
@media (hover: hover) and (pointer: fine) {
    .pub-card:hover { border-color: var(--line-strong); background: var(--raised); }
}

/* Ventana superpuesta (visor de PDF) */
.modal {
    position: fixed; inset: 0; z-index: 10000; overflow: auto;
    padding: clamp(12px, 3vw, 40px) var(--gutter);
    background: rgba(7, 6, 5, .94);
}
.modal-panel { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.modal-title { font-size: clamp(22px, 3vw, 28px); }
.modal-frame { background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.modal-frame iframe { display: block; width: 100%; height: 80vh; border: 0; }

/* Pasos numerados y lista de lo que SNNI no hace */
.steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px;
}
.step { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 12px; }
.step-num { font-family: var(--mono); font-size: 14px; color: var(--gold); }
.step h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.no-list {
    list-style: none; margin: 0;
    padding: 24px clamp(20px, 3vw, 28px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.no-list li { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }
.no-tag { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--down); }

/* Tabla compacta de cotizaciones */
.quotes {
    padding: 10px 14px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius);
    display: flex; flex-direction: column; justify-content: center;
}
/* Si las cotizaciones no llegan, el aviso ocupa el sitio de la tabla (la
   caja conserva su alto). */
.quotes > .state { border: 0; padding: 0; background: none; }
.quote-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.quote-table th { padding: 4px 0; text-align: left; font-weight: 400; color: var(--text-2); }
.quote-table td { padding: 4px 0 4px 16px; text-align: right; white-space: nowrap; }

/* Listas con separadores y pasos numerados (ayuda, invertir) */
.line-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.line-list li { padding: 10px 0; border-top: 1px solid var(--line-soft); color: var(--text-2); font-size: 15px; line-height: 1.55; }
.line-list strong { color: var(--text); }
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: flex; flex-direction: column; }
.step-list li {
    counter-increment: paso;
    position: relative;
    padding: 14px 0 14px 44px; border-top: 1px solid var(--line-soft);
    color: var(--text-2); line-height: 1.6;
}
.step-list li::before {
    content: counter(paso, decimal-leading-zero);
    position: absolute; left: 0; top: 16px;
    font-family: var(--mono); font-size: 14px; color: var(--gold);
}
.step-list strong { color: var(--text); }

/* Preguntas frecuentes con <details>: abrir y cerrar sin animacion,
   accesible con teclado por defecto. */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.faq-item summary {
    position: relative; cursor: pointer; list-style: none;
    padding: 18px 52px 18px 20px; font-weight: 600; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 18px; color: var(--gold);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item > :not(summary) { padding: 0 20px 18px; color: var(--text-2); line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
    .faq-item summary:hover { color: var(--gold-text); }
}

/* ── 11. Texto largo (legales, informes) ─────────────────────────── */
.prose { color: var(--text-2); font-size: 16px; line-height: 1.75; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 44px; font-size: clamp(24px, 3vw, 30px); color: var(--text); }
.prose h3 { margin-top: 28px; font-size: 18px; color: var(--text); }
.prose h2 + *,
.prose h3 + * { margin-top: 12px; }
.prose ul,
.prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--text); }
.prose a { color: var(--gold-text); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--text); background: var(--surface); border-bottom: 1px solid var(--line); }
.prose td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }

/* ── 12. Pie y bloque legal ──────────────────────────────────────── */
.site-footer { background: var(--ground-3); border-top: 1px solid var(--line-soft); }
.footer-inner {
    padding-top: 48px; padding-bottom: clamp(104px, 12vw, 120px);
    display: flex; flex-direction: column; gap: 20px;
    font-size: 13px; line-height: 1.6; color: var(--text-3);
}
.footer-inner p { margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.legal-links a { display: inline-block; padding: 6px 0; color: var(--text-2); text-decoration: none; transition: color 150ms ease; }
.legal-links a[aria-current="page"] { color: var(--gold-text); }
.legal-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.social { display: flex; gap: 8px; }
.social a {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius);
    transition: color 150ms ease, border-color 150ms ease;
}
.social svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
    .legal-links a:hover { color: var(--text); }
    .social a:hover { color: var(--text); border-color: var(--line-strong); }
}

/* ── 13. Clases heredadas de styles.css aun en uso ───────────────────
   Superficies "de cristal" de la version anterior: pasan a panel plano,
   sin desenfoque, sin canto especular y sin levantarse al pasar el raton. */
.auth-card,
.subscribe-card,
.related-card,
.modal-box,
.info-box,
.helper-box,
.saved-login-box,
.panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ── 14. Acceso: login, registro, recuperar contraseña, baja ────────
   Va despues de las clases heredadas para mandar sobre ellas. */
.hidden { display: none !important; }
.auth-container {
    min-height: calc(100vh - 70px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(32px, 7vw, 72px) var(--gutter) clamp(48px, 8vw, 88px);
}
.auth-card { width: 100%; max-width: 460px; padding: clamp(24px, 5vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.auth-header { display: flex; flex-direction: column; gap: 8px; }
.auth-title { margin: 0; font-size: clamp(30px, 4vw, 38px); line-height: 1.1; }
.auth-subtitle { margin: 0; color: var(--text-2); line-height: 1.6; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.password-hint { font-size: 13px; color: var(--text-3); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; }
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-link { text-align: center; color: var(--text-2); font-size: 15px; }
.auth-link a { color: var(--gold-text); font-weight: 600; text-decoration: none; }
.remember-row,
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.remember-row input,
.check-row input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.check-row small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13px; }
.helper-box {
    padding: 14px 16px;
    background: var(--gold-bg); border: 1px solid #3A2F1A; border-radius: var(--radius);
    color: var(--text-2); font-size: 14px; line-height: 1.6;
}
/* Credenciales guardadas: oculto hasta que login.html lo muestra */
.saved-login-box { display: none; padding: 16px 18px; background: var(--gold-bg); border: 1px solid #3A2F1A; border-radius: var(--radius-lg); }
.saved-login-title { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--text); }
.saved-login-grid { display: grid; gap: 10px; margin-bottom: 14px; }
.saved-login-field { padding: 10px 12px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); }
.saved-login-label { display: block; margin-bottom: 2px; font-size: 12px; color: var(--text-2); }
.saved-login-value { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.saved-login-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (hover: hover) and (pointer: fine) {
    .auth-link a:hover { color: var(--text); }
}

/* ── 15. Movimiento reducido ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cta,
    .btn,
    .mobile-menu-btn span,
    .segmented button,
    .switch,
    .switch::after { transition: none; }
    .cta:active,
    .btn:active { transform: none; }
}

/* ── 16. Esqueletos de carga ─────────────────────────────────────────
   Mientras llegan los datos (Supabase, funciones de Netlify) cada zona
   ensenia la forma final de su contenido: mismo alto, mismo ancho, misma
   disposicion. Al llegar los datos nada se mueve (CLS ~ 0).

   - .skel: barra del tamanio de un texto o de una cifra. Va SIEMPRE dentro
     del elemento que luego llevara el texto, para que la linea mida lo
     mismo que con el texto real. El ancho con --w: en ch para cifras (la
     fuente de cifras es monoespaciada), en em o % para texto.
   - .skel-fill: bloque que tapa todo su contenedor (graficos, portadas).
     El contenedor debe tener position: relative.
   - No se ve hasta pasados 150 ms (skel-in): si los datos llegan antes,
     el contenido entra directamente y no hay parpadeo.
   - Brillo muy sutil que barre la barra en 1,4 s, lineal e infinito,
     animando solo transform. Con prefers-reduced-motion se queda quieto.
   - El contenido real entra con un fundido de opacidad de 180 ms en
     ease-out (js/carga.js, revelar), sin desplazamientos, y solo en la
     primera carga: nunca en refrescos automaticos ni al teclear.
   - .is-ghost: el esqueleto se queda quieto y apagado detras de un aviso
     de error superpuesto (.state.is-over), sin cambiar de tamanio. */
.skel {
    position: relative;
    display: inline-block;
    width: var(--w, 100%);
    max-width: 100%;
    height: .72em;
    vertical-align: middle;
    border-radius: 4px;
    background: var(--skel-bg, var(--raised));
    overflow: hidden;
    opacity: 0;
    animation: skel-in 200ms var(--ease-out) 150ms forwards;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.skel::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 106, .07) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: skel-brillo 1.4s linear infinite;
}
.skel-fill {
    position: absolute; inset: 0;
    width: auto; max-width: none; height: auto;
    border-radius: var(--radius);
}
/* Sobre fondos ya elevados (casillas mensuales) la barra sube un tono para
   que se distinga. */
.month { --skel-bg: var(--line); }

@keyframes skel-in { to { opacity: 1; } }
@keyframes skel-brillo { to { transform: translateX(100%); } }

.is-ghost { position: relative; }
.is-ghost .skel { animation: none; opacity: .35; }
.is-ghost .skel::after { display: none; }
.state.is-over {
    position: absolute; z-index: 1; top: 16px; left: 50%;
    width: min(460px, calc(100% - 32px));
    transform: translateX(-50%);
    background: var(--surface); border-style: solid; border-color: var(--line-strong);
}

@media (prefers-reduced-motion: reduce) {
    .skel::after { display: none; animation: none; }
}