/* ============================================================
   1g.cl — Sistema de diseño
   Identidad: cobalto sobre azul-negro, datos en IBM Plex Mono,
   títulos en Sora. Modo claro/oscuro vía tokens [data-theme].
   ============================================================ */

:root {
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-2: #eef1f8;
    --ink: #0e1330;
    --muted: #5b6478;
    --accent: #2447e0;
    --accent-strong: #1b39bd;
    --accent-soft: #e8edff;
    --on-accent: #ffffff;
    --line: #e3e7f0;
    --ok: #0f8a5f;
    --ok-bg: #e2f5ec;
    --warn: #b45309;
    --warn-bg: #fdf0dd;
    /* Naranja propio para "alerta naranja" (volcanes): distinto de warn. */
    --alert-orange: #c2540a;
    --alert-orange-bg: #fdeadd;
    --bad: #b91c1c;
    /* Niveles de alerta volcánica (ver docs/volcanes-rediseno.md): el texto
       del chip va en --ink; el color va en punto, fondo y borde. */
    --lv-verde: #16a34a;
    --lv-amarilla: #c29000;
    --lv-naranja: #e0620d;
    --lv-roja: #dc2626;
    --lv-sin: #8a93a3;
    --shadow: 0 1px 2px rgba(14, 19, 48, .05), 0 8px 24px rgba(14, 19, 48, .06);
    --radius: 12px;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Sora", "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

[data-theme="dark"] {
    --bg: #0b0f1e;
    --surface: #131932;
    --surface-2: #0f1428;
    --ink: #e9edfb;
    --muted: #9aa4c2;
    --accent: #8ea2ff;
    --accent-strong: #aebcff;
    --accent-soft: #1a2247;
    --on-accent: #0b0f1e;
    --line: #232b4d;
    --ok: #3ddc97;
    --ok-bg: #10312a;
    --warn: #f5a94b;
    --warn-bg: #33230d;
    --alert-orange: #fb923c;
    --alert-orange-bg: #3a1e07;
    --bad: #f87171;
    --lv-verde: #34c06a;
    --lv-amarilla: #f2c230;
    --lv-naranja: #ff8a3d;
    --lv-roja: #f87171;
    --lv-sin: #6d7a8c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    transition: background .2s ease, color .2s ease;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.muted { color: var(--muted); }
.fine { font-size: .8rem; color: var(--muted); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }
a { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.header-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--ink);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
}

.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin-right: auto;
}

.site-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
}

.site-nav a:hover { color: var(--accent); }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    margin-left: auto;
}

.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }

/* ---------- Hero de portada ---------- */

.home-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 2.5rem;
    align-items: center;
    padding: 3.5rem 0 2.5rem;
}

.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: .3rem .8rem;
}

.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.hero-title {
    font-size: clamp(2.1rem, 4.5vw, 3.1rem);
    font-weight: 700;
    margin: 1.1rem 0 1rem;
    letter-spacing: -.02em;
}

.hero-accent { color: var(--accent); }

.hero-sub {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 46ch;
    margin: 0 0 1.5rem;
}

.tool-search {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem 1rem;
    color: var(--muted);
    box-shadow: var(--shadow);
    max-width: 440px;
}

.tool-search:focus-within { border-color: var(--accent); }

.tool-search input {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .95rem;
    width: 100%;
}

/* ---------- Franja EN VIVO ---------- */

.live-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--line);
}

.live-updated {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--muted);
}

.live-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.live-cell {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.live-cell:nth-child(odd) { border-right: 1px solid var(--line); }
.live-cell:nth-child(n+3) { border-top: 1px solid var(--line); }

.live-label {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.live-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    min-height: 2.1rem;
}

.live-delta { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; }
.live-sub { font-size: .8rem; color: var(--muted); }
.sismo-lugar { font-family: var(--font-body); font-weight: 500; font-size: .95rem; letter-spacing: 0; }

/* ---------- Chips de frescura ---------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .18rem .65rem;
    background: var(--ok-bg);
    color: var(--ok);
    white-space: nowrap;
}

.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip-live .chip-dot { animation: pulso 2s ease-in-out infinite; }

@keyframes pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .chip-live .chip-dot { animation: none; }
}

.chip-warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- Bandas publicitarias ---------- */

.ad-slot { margin: 1.5rem 0; min-height: 90px; }

.ad-slot--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--surface-2);
}

/* ---------- Secciones de herramientas ---------- */

.tool-section { padding: 1.5rem 0 .5rem; scroll-margin-top: 5rem; }

.section-head {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .6rem;
    margin-bottom: 1.25rem;
}

.section-head h2 { font-size: 1.3rem; font-weight: 700; margin: 0; }

.section-count {
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
}

.tool-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem 1.1rem;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tool-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
    .tool-card, .tool-card:hover { transition: none; transform: none; }
}

.tool-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.tool-title { font-size: 1.08rem; font-weight: 700; margin: 0 0 .4rem; }

.tool-desc {
    color: var(--muted);
    font-size: .92rem;
    margin: 0 0 1rem;
    flex-grow: 1;
}

.tool-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
}

.tool-link:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---------- Hero simple de páginas de módulos ---------- */

.hero { padding: 2.25rem 0 1rem; }
.hero h1 { margin-bottom: .3rem; font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.hero p { color: var(--muted); margin: .2rem 0; }

.breadcrumb { margin: 1rem 0 0; font-size: .9rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

.value-hero {
    font-size: 2.4rem;
    font-weight: 700;
    font-family: var(--font-display);
    margin: .5rem 0 .25rem;
}

.data-value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-mono); margin: .35rem 0 0; }

.data-variation { margin: .2rem 0; font-size: .9rem; font-family: var(--font-mono); }
.data-variation.is-up { color: var(--ok); }
.data-variation.is-down { color: var(--bad); }

.data-updated {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
    margin: .5rem 0;
}

.data-updated--stale {
    background: var(--warn-bg);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    color: var(--warn);
    border-radius: 8px;
    padding: .5rem .75rem;
}

.data-updated--card { font-size: .78rem; color: var(--warn); margin: .3rem 0 0; }

.data-card .muted { font-size: .85rem; margin: .15rem 0 0; }

.spark {
    width: 100%;
    height: 120px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: .95rem;
}

.data-table th, .data-table td { padding: .55rem .9rem; text-align: left; }
.data-table thead th { background: var(--surface-2); font-size: .8rem; color: var(--muted); }
.data-table tbody tr { border-top: 1px solid var(--line); }
.data-table th[scope="row"] { font-weight: 600; width: 60%; }
.data-table th .fine { display: block; font-weight: 400; }
.data-table tr.is-total td, .data-table tr.is-total th { font-weight: 700; border-top: 2px solid var(--ink); }

.calc-links { margin: 2rem 0; }
.calc-links h2 { margin-bottom: .5rem; font-size: 1.15rem; }
.calc-link { text-decoration: none; color: var(--ink); font-weight: 600; display: flex; align-items: center; }
.calc-link:hover { border-color: var(--accent); }

.calc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .75rem 0;
    align-items: center;
    padding: .25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
}

.calc-nav a {
    text-decoration: none;
    color: var(--muted);
    border-radius: 8px;
    padding: .4rem .75rem;
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
}

.calc-nav a:hover { color: var(--ink); }
.calc-nav a.is-active { background: var(--accent-soft); color: var(--accent); }
.calc-nav a.is-active:hover { color: var(--accent); }

.calc-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0;
}

.calc-form label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }

.calc-form input[type="number"], .calc-form input[type="date"], .calc-form input[type="text"], .calc-form select {
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--font-body);
    width: 100%;
    max-width: 320px;
    background: var(--bg);
    color: var(--ink);
}

.calc-form input:focus, .calc-form select:focus { border-color: var(--accent); outline: 0; }

.calc-form .checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.calc-form .checkbox input { width: auto; }

.calc-form button {
    justify-self: start;
    background: var(--accent);
    color: var(--on-accent);
    border: 0;
    border-radius: 8px;
    padding: .6rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
}

.calc-form button:hover { background: var(--accent-strong); }

.result-panel {
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.result-panel > p { margin: .2rem 0; }

.state-panel {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}

.state-panel h2 { margin-top: 0; font-size: 1.15rem; }
.state-panel ol { padding-left: 1.25rem; }
.state-panel code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: .1rem .4rem; }

.countdown {
    font-size: 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.4rem;
    display: inline-block;
    margin: .5rem 0;
}

.countdown strong { font-size: 1.6rem; color: var(--accent); }

.badge-irrenunciable {
    display: inline-block;
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .6rem;
    margin-left: .4rem;
}

.mag { font-family: var(--font-mono); font-weight: 600; border-radius: 6px; padding: .1rem .5rem; }
.mag-menor { background: var(--accent-soft); color: var(--accent); }
.mag-leve { background: #fef9c3; color: #854d0e; }
.mag-media { background: #ffedd5; color: #9a3412; }
.mag-alta { background: #fee2e2; color: #991b1b; }

[data-theme="dark"] .mag-leve { background: #332a0d; color: #fde68a; }
[data-theme="dark"] .mag-media { background: #36200e; color: #fdba74; }
[data-theme="dark"] .mag-alta { background: #3a1212; color: #fca5a5; }

.farmacia { padding: .5rem 0; border-top: 1px solid var(--line); }
.farmacia:first-of-type { border-top: 0; }
.farmacia p { margin: .1rem 0; font-size: .9rem; }
.farmacia a { text-decoration: none; }

ul { padding-left: 1.2rem; }
li { margin: .2rem 0; }

/* ---------- Footer ---------- */

.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 3rem;
    background: var(--surface);
    font-size: .9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 2rem;
    padding-top: 2.25rem;
    padding-bottom: 1.75rem;
}

.footer-brand p { color: var(--muted); max-width: 34ch; margin: .75rem 0 0; }

.footer-col h3 {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .7rem;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: .35rem 0; }
.footer-col a { color: var(--ink); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }

/* Conteo de herramientas por sección del footer: cuánto hay detrás del ancla. */
.footer-count {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .72rem;
    margin-left: .4rem;
}

.footer-legal {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    color: var(--muted);
    font-size: .82rem;
    text-align: center;
}

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
    .home-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.25rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 560px) {
    .header-row { flex-wrap: wrap; gap: .75rem 1rem; }
    .live-grid { grid-template-columns: 1fr; }
    .live-cell:nth-child(odd) { border-right: 0; }
    .live-cell:nth-child(n+2) { border-top: 1px solid var(--line); }
    .hero-title { font-size: 1.9rem; }

    /* Touch targets: el nav de móvil necesita alto táctil real (>= 40px) */
    .site-nav { gap: 0 .5rem; }
    .site-nav a {
        display: inline-block;
        padding: .55rem .5rem;
    }
}

/* ---------- Grid y tarjeta genérica de módulos ---------- */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.1rem;
    padding: .5rem 0 1rem;
}

.module-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.module-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }

.module-card h2 { margin: 0 0 .3rem; font-size: 1.08rem; }
.module-card h2 a { color: var(--accent); text-decoration: none; }
.module-card h2 a:hover { text-decoration: underline; }
.module-card p { margin: .35rem 0; font-size: .95rem; }

/* Tarjeta de dato (indicadores): etiqueta mono + cifra protagonista */
.data-card { display: flex; flex-direction: column; }

.data-card h2 {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .6rem;
}

.data-card h2 a { color: var(--ink); text-decoration: none; }
.data-card h2 a:hover { color: var(--accent); text-decoration: none; }

.data-card .data-value { font-size: 1.7rem; }

.data-card .muted { font-size: .8rem; font-family: var(--font-mono); }

/* ---------- Formularios: cualquier input hereda estilo ---------- */

.calc-form input:not([type="checkbox"]),
.calc-form datalist { font-family: var(--font-body); }

.calc-form input:not([type="checkbox"]) {
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--ink);
    width: 100%;
    max-width: 320px;
}

.calc-form input:not([type="checkbox"]):focus { border-color: var(--accent); outline: 0; }

/* Formulario compacto en dos columnas (bloques independientes lado a lado) */
.form-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1.25rem 0;
}

.form-duo h2 { font-size: 1.02rem; margin: 0 0 .9rem; }

.form-duo form { display: grid; gap: 1rem; align-content: start; }

.form-duo form + form { border-left: 1px solid var(--line); padding-left: 1.25rem; }

@media (max-width: 720px) {
    .form-duo { grid-template-columns: 1fr; }
    .form-duo form + form { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; }
}

/* Tabla de datos compacta (sismos, bencina por comuna) */
.data-table--compacta th, .data-table--compacta td { padding: .4rem .75rem; font-size: .9rem; }

/* Los formularios dentro de .form-duo usan los mismos controles */
.form-duo input:not([type="checkbox"]), .form-duo select {
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--ink);
    width: 100%;
    max-width: 320px;
    font-family: var(--font-body);
}

.form-duo input:focus, .form-duo select:focus { border-color: var(--accent); outline: 0; }

.form-duo button {
    justify-self: start;
    background: var(--accent);
    color: var(--on-accent);
    border: 0;
    border-radius: 8px;
    padding: .6rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
}

.form-duo button:hover { background: var(--accent-strong); }

.form-duo label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Calidad del aire: búsqueda en una fila, ficha ICAP y grilla horaria
   --------------------------------------------------------------------------- */
.calc-form--fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    margin: .8rem 0;
}

.calc-form--fila input {
    flex: 1 1 16rem;
    max-width: none;
}

.calc-form--fila button { flex: 0 0 auto; padding: .55rem 1.2rem; }

.aire-ficha {
    display: grid;
    grid-template-columns: minmax(15rem, 21rem) 1fr;
    gap: 1rem;
    align-items: stretch;
    margin: 1rem 0;
}

@media (max-width: 780px) { .aire-ficha { grid-template-columns: 1fr; } }

.aire-icap {
    font-size: 3.4rem;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    margin: .3rem 0 0;
}

.aire-nivel {
    display: inline-block;
    margin-top: .45rem;
    padding: .18rem .65rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
}

.aire-dato { margin: .55rem 0 0; font-size: .95rem; }
.aire-dato strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.aire-horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
    gap: .5rem;
}

.aire-hora {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    padding: .5rem .6rem;
}

.aire-hora .h { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.aire-hora .v { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.aire-hora .v small { font-weight: 400; color: var(--muted); }

/* Ajustes finos ficha ICAP: numeral con unidad, pill sin estirarse,
   buscador mas compacto */
.aire-num { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0 0; }
.aire-unidad { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); margin-left: .3rem; }
.aire-nivel { align-self: flex-start; }
.aire-dato .muted { margin: 0; }

/* Resultados de busqueda de ciudades (clima): enlaces con look de chip */
a.aire-hora { display: block; color: var(--ink); text-decoration: none; }
a.aire-hora:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   Bencina: tabs de combustible y tarjetas de estacion
   --------------------------------------------------------------------------- */
.fuel-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .5rem;
    margin: .8rem 0 1rem;
}

.fuel-tab {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.fuel-tab:hover { border-color: var(--accent); }

.fuel-tab.is-active { border-color: var(--accent); background: var(--accent-soft); }

.fuel-tab .nombre {
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.fuel-tab .precio { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

.fuel-tab .min { font-size: .74rem; color: var(--muted); }

.bencina-card { position: relative; }

.bencina-card .rank {
    position: absolute;
    top: .6rem;
    right: .7rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bencina-card .marca-line { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding-right: 1.6rem; }

.bencina-card .marca-line img { width: 20px; height: 20px; border-radius: 4px; }

.bencina-card .precio {
    font-family: var(--font-mono);
    font-size: 1.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: .35rem 0 0;
}

.bencina-card .precio small { font-size: .78rem; font-weight: 400; color: var(--muted); }

.bencina-card .extras { font-size: .8rem; color: var(--muted); margin: .35rem 0 0; }

/* Valores con color semantico (edad y fichas de datos) */
.v-acento { color: var(--accent); }
.v-ok { color: var(--ok); }
.v-warn { color: var(--warn); }
.v-bad { color: var(--bad); }

/* Barra de rango de precios (modulo precios-alimentos): donde queda el
   promedio entre el minimo y el maximo observados. Semáforo suave:
   barato (verde) -> caro (rojo), marcador cobalto en el promedio. */
.pr-rango { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.pr-rango-min, .pr-rango-max { font-size: .72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-rango-track {
    position: relative; flex: 1; height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, #0f8a5f 0%, #b45309 55%, #b91c1c 100%);
    opacity: .85;
}
.pr-rango-avg {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 12px; border-radius: 2px;
    background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}
.pr-rango-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--accent); opacity: .45; }

/* Punto de color por grupo de producto (carne, verduras, lacteos...) */
.pr-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; margin-right: .1rem; }

/* ============================================================
   Finde largo (módulo finde-largo)
   La "cadena del finde": carril de días unidos — feriados en
   cobalto suave, vecinos laborales separados y atenuados —
   tarjetas de clima encadenadas con rango min–max en escala
   común, y timeline relativo de próximos bloques.
   Solo tokens del sistema: legible en claro y oscuro.
   ============================================================ */

.fl-ficha {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.4rem 1.1rem;
    margin: .4rem 0 1.9rem;
}

.fl-estado {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    animation: fl-entrada .45s ease both;
}

.fl-estado strong { color: var(--accent); }

.fl-encurso-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--ok);
    margin-right: .5rem;
    vertical-align: .18em;
    animation: fl-pulso 2s ease-in-out infinite;
}

.fl-motivo { color: var(--muted); margin: .2rem 0 1.25rem; }
.fl-motivo strong { color: var(--ink); }

/* Carril: la cadena de días libres; vecinos laborales fuera de
   la cadena, con borde punteado y atenuados, para que el bloque
   se lea como un objeto continuo. */
.fl-rail {
    display: flex;
    align-items: stretch;
    gap: .55rem;
    overflow-x: auto;
    padding: .15rem .15rem .45rem;
}

.fl-cadena {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    overflow: hidden;
    flex: none;
}

.fl-dia {
    min-width: 4.5rem;
    padding: .55rem .5rem .5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    justify-content: center;
}

.fl-dia + .fl-dia { border-left: 1px solid var(--line); }

.fl-dia-dow { font-size: .72rem; color: var(--muted); }

.fl-dia-num {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.fl-dia-mes { font-size: .72rem; color: var(--muted); }

.fl-dia--feriado { background: var(--accent-soft); }
.fl-dia--feriado .fl-dia-num { color: var(--accent); }
.fl-dia--feriado .fl-dia-dow, .fl-dia--feriado .fl-dia-mes { color: var(--accent-strong); }

.fl-dia--hoy { box-shadow: inset 0 -3px 0 var(--ok); }

.fl-dia--apagado {
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 12px;
    opacity: .55;
    flex: none;
}

.fl-dia-marca {
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--warn);
    margin: .12rem auto 0;
}

.fl-feriados { margin: .9rem 0 0; padding: 0; list-style: none; }

.fl-feriados li { padding: .3rem 0; }

.fl-clima-cadena {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow-x: auto;
    margin: .3rem 0 .5rem;
}

.fl-clima-card {
    flex: 0 0 auto;
    width: 11rem;
    padding: .8rem .85rem .75rem;
    text-align: center;
}

.fl-clima-card + .fl-clima-card { border-left: 1px solid var(--line); }

.fl-clima-icono { font-size: 1.7rem; line-height: 1.2; }

.fl-clima-fecha { font-size: .78rem; color: var(--muted); margin: .2rem 0 .1rem; }

.fl-clima-cielo { font-size: .82rem; font-weight: 600; }

.fl-clima-max {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.fl-clima-min { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Rango min–max del día sobre la escala común del bloque */
.fl-barra {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    margin: .5rem .2rem .55rem;
}

.fl-barra-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }

.fl-clima-lluvia { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.fl-clima-vacio { color: var(--muted); font-size: .82rem; padding: .9rem .4rem; }

/* El selector vive suelto en la sección: sin la caja de .calc-form */
.fl-form {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: .3rem 0 1rem;
}

.fl-form select { min-width: 13rem; width: auto; }

/* Timeline relativo de próximos bloques */
.fl-timeline { list-style: none; margin: .2rem 0 0; padding: 0; }

.fl-hit {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: baseline;
    padding: .75rem .15rem;
    border-top: 1px solid var(--line);
}

.fl-timeline li:first-child .fl-hit { border-top: 0; padding-top: .35rem; }

.fl-cuando {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: .08rem .65rem;
    white-space: nowrap;
}

.fl-hit-rango { font-weight: 600; white-space: nowrap; }

.fl-hit-dias { color: var(--muted); font-size: .85rem; white-space: nowrap; }

.fl-hit-por { color: var(--muted); }

@keyframes fl-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes fl-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .fl-estado { animation: none; }
    .fl-encurso-dot { animation: none; }
}

.fl-h2 { margin: 1.8rem 0 .45rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }

.fl-rail-cap { color: var(--muted); margin: .55rem 0 0; }

.fl-rail, .fl-clima-cadena { scrollbar-width: thin; }
.fl-rail::-webkit-scrollbar, .fl-clima-cadena::-webkit-scrollbar { height: 6px; }
.fl-rail::-webkit-scrollbar-thumb, .fl-clima-cadena::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
}

/* ============================================================
   Tendedero (módulo ¿Se seca la ropa?)
   El score es el protagonista: anillo del índice, recibo del
   cálculo (la regla publicada, como boleta) y las próximas horas
   colgadas de la cuerda. Solo tokens del sitio: claro y oscuro.
   ============================================================ */

.td-form {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: .2rem 0 .9rem;
}

.td-form select { min-width: 13rem; width: auto; }

.td-ficha {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
    margin: .2rem 0 1.6rem;
}

.td-principal {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.td-respuesta {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    animation: td-entrada .45s ease both;
}

.td-contexto { color: var(--muted); margin: .35rem 0 0; max-width: 34rem; }
.td-contexto strong { color: var(--ink); }
.td-ventana { font-size: .85rem; }

.td-anillo { width: 128px; height: 128px; flex: none; }
.td-anillo-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; fill: var(--ink); }
.td-anillo-sub { font-family: var(--font-mono); font-size: .68rem; fill: var(--muted); }

/* Recibo: la regla del score desglosada, como boleta */
.td-recibo { margin: 1.2rem 0 .2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.td-recibo-titulo { font-weight: 600; margin: 0 0 .5rem; }

.td-recibo-fila { display: flex; align-items: baseline; gap: .55rem; padding: .18rem 0; }
.td-recibo-factor { font-weight: 600; }
.td-recibo-detalle { color: var(--muted); font-size: .88rem; }
.td-recibo-linea { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-.28rem); }
.td-recibo-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.td-recibo-total { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .5rem; }
.td-recibo-total .td-recibo-num { font-weight: 700; font-size: 1.05rem; }

.td-reglas { margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.td-reglas summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.td-reglas ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.td-reglas li { margin: .25rem 0; }
.td-reglas strong { color: var(--ink); }

/* La cuerda: horas colgadas de un alambre, cada una con su índice */
.td-h2 { margin: 1.8rem 0 .6rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }

.td-cuerda {
    display: flex;
    gap: .35rem;
    border-top: 3px solid var(--line);
    overflow-x: auto;
    scrollbar-width: thin;
}

.td-pinza {
    position: relative;
    flex: 1 0 3.9rem;
    text-align: center;
    padding: .95rem .2rem .4rem;
}

.td-pinza::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: .6rem;
    background: var(--muted);
    transform: translateX(-50%);
    border-radius: 0 0 2px 2px;
}

.td-hora {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: .3rem;
}

.td-chip {
    display: inline-block;
    min-width: 2.1rem;
    padding: .2rem .35rem;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: .95rem;
}

.td-chip--ok { background: var(--ok-bg); color: var(--ok); }
.td-chip--warn { background: var(--warn-bg); color: var(--warn); }
.td-chip--bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }

.td-pinza-dato {
    display: block;
    font-size: .68rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

@keyframes td-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .td-respuesta { animation: none; }
}

/* ============================================================
   Correr hoy (módulo ¿Corro hoy?)
   Semáforo de decisión: veredicto gigante sobre una pista con
   carriles, checklist de factores (aire / lluvia / temperatura)
   con estado por fila y la mejor hora del día. Solo tokens.
   ============================================================ */

.crr-form {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: .2rem 0 .9rem;
}

.crr-form select { min-width: 13rem; width: auto; }

.crr-ficha {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
    margin: .2rem 0 1.6rem;
}

.crr-veredicto {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 7vw, 3.4rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    animation: crr-entrada .45s ease both;
}

.crr-contexto { color: var(--muted); margin: .35rem 0 0; }
.crr-contexto strong { color: var(--ink); }

.crr-aviso {
    margin: .7rem 0 0;
    padding: .45rem .8rem;
    border-radius: 8px;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: .88rem;
}

/* La pista: carriles que cruzan bajo el veredicto */
.crr-pista {
    margin-top: 1.1rem;
    height: 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: repeating-linear-gradient(
        90deg,
        var(--surface-2) 0 26px,
        var(--surface) 26px 34px
    );
}

.crr-h2 { margin: 1.8rem 0 .45rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }

/* Checklist de factores: filas con punto de estado */
.crr-factores { margin-top: .2rem; }

.crr-fila {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    align-items: baseline;
    padding: .8rem .15rem;
    border-top: 1px solid var(--line);
}

.crr-factores .crr-fila:first-child { border-top: 0; padding-top: .35rem; }

.crr-factor {
    font-weight: 600;
    min-width: 7.2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.crr-fila::before {
    content: '';
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--line);
}

.crr-fila:has(.crr-chip--bueno)::before { background: var(--ok); }
.crr-fila:has(.crr-chip--medio)::before { background: var(--warn); }
.crr-fila:has(.crr-chip--malo)::before { background: var(--bad); }

.crr-valor { font-family: var(--font-mono); font-size: .95rem; font-variant-numeric: tabular-nums; }
.crr-sub { color: var(--muted); font-size: .8rem; }
.crr-sindato { color: var(--muted); font-family: var(--font-body); font-size: .88rem; }

.crr-chip {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .78rem;
    padding: .12rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.crr-chip--bueno { background: var(--ok-bg); color: var(--ok); }
.crr-chip--medio { background: var(--warn-bg); color: var(--warn); }
.crr-chip--malo { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.crr-chip--sin-dato { background: var(--surface-2); color: var(--muted); }

.crr-mejor {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    margin: .2rem 0 0;
}

.crr-mejor-hora {
    font-family: var(--font-mono);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--accent);
}

.crr-mejor-nota { color: var(--muted); }

.crr-reglas { margin-top: 1.2rem; font-size: .88rem; color: var(--muted); }
.crr-reglas summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.crr-reglas ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.crr-reglas li { margin: .25rem 0; }
.crr-reglas strong { color: var(--ink); }

@keyframes crr-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .crr-veredicto { animation: none; }
}

/* ============================================================
   Operación Renta (módulo hub estacional)
   Countdown al próximo plazo, ticker UF/UTM en monospace, timeline
   vertical de hitos curados y grilla de CTAs a las calculadoras.
   Solo tokens del sitio.
   ============================================================ */

.or-disclaimer {
    display: inline-block;
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: 999px;
    font-size: .72rem;
    padding: .05rem .6rem;
    vertical-align: .1em;
}

.or-ficha {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
    margin: .2rem 0 1.6rem;
}

.or-countdown {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    animation: or-entrada .45s ease both;
}

.or-countdown strong { color: var(--accent); }

.or-hito { margin: .3rem 0 0; }
.or-hito strong { color: var(--ink); }
.or-hito-detalle { color: var(--muted); margin: .25rem 0 0; }

.or-h2 { margin: 1.8rem 0 .45rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }

/* Ticker UF/UTM: dos cotizaciones en monospace */
.or-ticker { display: flex; gap: .7rem; flex-wrap: wrap; }

.or-moneda {
    flex: 1 1 12rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.or-moneda-nombre { font-size: .78rem; font-weight: 700; color: var(--muted); }

.or-moneda-valor {
    font-family: var(--font-mono);
    font-size: 1.55rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.or-moneda-fecha { font-size: .74rem; color: var(--muted); }

/* Timeline vertical de hitos */
.or-timeline { list-style: none; margin: .2rem 0 0; padding: 0 0 0 1.05rem; border-left: 2px solid var(--line); }

.or-hito-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    align-items: baseline;
    padding: .7rem .1rem;
}

.or-hito-row::before {
    content: '';
    position: absolute;
    left: -1.44rem;
    top: 1.05rem;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg);
}

.or-hito-row--pasado::before { background: var(--line); }
.or-hito-row--pasado .or-fecha, .or-hito-row--pasado .or-hito-nombre { opacity: .55; }

.or-fecha {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--accent-strong);
    min-width: 7.5rem;
    white-space: nowrap;
}

.or-hito-nombre { font-weight: 600; }

.or-tipo {
    font-family: var(--font-mono);
    font-size: .68rem;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: 999px;
    padding: .05rem .55rem;
    margin-left: .3rem;
}

.or-detalle { width: 100%; color: var(--muted); font-size: .88rem; }

/* Grilla de CTAs a calculadoras */
.or-herramientas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .7rem;
}

.or-tool {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    text-decoration: none;
}

.or-tool:hover { border-color: var(--accent); }

.or-tool-nombre { font-weight: 600; color: var(--ink); }

.or-tool-detalle { font-size: .8rem; color: var(--muted); }

@keyframes or-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .or-countdown { animation: none; }
}

/* ============================================================
   Calendario PAES (módulo hub estacional)
   Countdown al próximo hito en hora de Chile y stepper horizontal
   de las etapas del proceso (inscripción → PAES → matrícula).
   Solo tokens del sitio.
   ============================================================ */

.pa-disclaimer {
    display: inline-block;
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: 999px;
    font-size: .72rem;
    padding: .05rem .6rem;
    vertical-align: .1em;
}

.pa-ficha {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
    margin: .2rem 0 1.6rem;
}

.pa-countdown {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    animation: pa-entrada .45s ease both;
}

.pa-countdown strong { color: var(--accent); }

.pa-hito { margin: .3rem 0 0; }
.pa-hito strong { color: var(--ink); }
.pa-tz { color: var(--muted); font-size: .85rem; }
.pa-hito-detalle { color: var(--muted); margin: .25rem 0 0; }

.pa-h2 { margin: 1.8rem 0 .45rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }

/* Stepper: las etapas del proceso sobre una línea, con el próximo hito
   marcado en cobalto */
.pa-stepper {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
    list-style: none;
    margin: .2rem 0 0;
    padding: 0;
}

.pa-paso {
    position: relative;
    flex: 1 0 9.5rem;
    padding: 1.15rem .75rem .3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.pa-paso::before {
    content: '';
    position: absolute;
    top: .45rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--line);
}

.pa-paso::after {
    content: '';
    position: absolute;
    top: .11rem;
    left: 50%;
    transform: translateX(-50%);
    width: .72rem;
    height: .72rem;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--line);
    box-sizing: border-box;
}

.pa-paso--pasado::after { background: var(--line); }

.pa-paso--proximo::after {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.pa-paso--proximo .pa-nombre { color: var(--accent-strong); }

.pa-fecha {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--muted);
    white-space: nowrap;
}

.pa-nombre { font-weight: 600; font-size: .92rem; }

.pa-detalle { font-size: .78rem; color: var(--muted); }

@keyframes pa-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pa-countdown { animation: none; }
}

/* ============================================================
   Tramo Fonasa (módulo calculadora)
   Letra de tramo gigante + escala A–D con marcador de posición
   del ingreso + tabla de tramos en pesos y su equivalente en UF.
   Solo tokens del sitio.
   ============================================================ */

.fo-disclaimer {
    display: inline-block;
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: 999px;
    font-size: .72rem;
    padding: .05rem .6rem;
    vertical-align: .1em;
}

.fo-form { margin: .2rem 0 .3rem; }

.fo-ficha {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
    margin: .6rem 0 1.6rem;
}

.fo-principal { display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; }

.fo-letra {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 10vw, 5rem);
    font-weight: 700;
    line-height: 1;
    animation: fo-entrada .45s ease both;
}

.fo-respuesta {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.5vw, 1.7rem);
    font-weight: 700;
    margin: 0;
}

.fo-cotizacion { margin: .3rem 0 0; }
.fo-contexto { color: var(--muted); margin: .25rem 0 0; font-size: .9rem; }

/* Escala de tramos: marcador sobre cuatro sectores A–D */
.fo-escala { position: relative; margin-top: 1.15rem; }

/* El marcador es un punto de ancho cero anclado a su porcentaje: con
   position: relative + left el div completo se desplazaba y generaba
   scrollbar horizontal en toda la página. */
.fo-escala-marcador {
    position: absolute;
    top: -.55rem;
    width: 0;
}

.fo-escala-marcador::before {
    content: '▲';
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    font-size: .8rem;
    color: var(--ink);
    line-height: 1;
}

.fo-escala-sectores {
    display: flex;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--muted);
}

.fo-escala-sectores span {
    flex: 1;
    text-align: center;
    padding: .3rem 0;
    background: var(--surface-2);
}

.fo-escala-sectores span + span { border-left: 1px solid var(--surface); }

.fo-h2 { margin: 1.8rem 0 .45rem; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }

.fo-tabla .fo-fila-actual { background: var(--accent-soft); }


.fo-norma {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    font-size: .9rem;
    color: var(--muted);
}

.fo-norma p { margin: .25rem 0; }

.fo-norma strong { color: var(--warn); }

@keyframes fo-entrada {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fo-letra { animation: none; }
}

.fo-tabla-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    border-radius: var(--radius);
}

.fo-tabla-wrap::-webkit-scrollbar { height: 6px; }
.fo-tabla-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.fo-tabla { min-width: 620px; }

/* ============================================================
   Home v3 (portada según referencia, ajustes de Diego)
   Hero de dos columnas: copy + buscador a la izquierda, panel
   "Chile ahora" vertical a la derecha (apila en móvil). Destacados
   con ícono y marca de agua Lucide, peek de una línea. Filas
   compactas de dos densidades. Solo tokens del sitio.
   ============================================================ */

.hm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
    gap: 2.25rem;
    align-items: stretch;
    padding-top: 2.5rem;
}

.hm-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
}

.hm-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    animation: hm-pulse 2.4s infinite;
}

.hm-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5.2vw, 50px);
    font-weight: 700;
    line-height: 1.03;
    margin: 0;
    max-width: 15ch;
    letter-spacing: -.02em;
}

.hm-title em { font-style: normal; color: var(--accent); }

.hm-lead {
    color: var(--muted);
    font-size: 16.5px;
    max-width: 52ch;
    margin: 14px 0 0;
}

.hm-search {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 15px;
    box-shadow: var(--shadow);
    max-width: 460px;
    width: 100%;
    cursor: text;
}

.hm-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.hm-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }

.hm-search input {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    width: 100%;
    outline: none;
}

.hm-search kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 7px;
    flex: none;
}

/* Panel "Chile ahora": columna derecha del hero */
.hm-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    align-self: stretch;
}

.hm-panel-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted);
}

.hm-panel-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 14px; }
.hm-panel-upd { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; }

.hm-panel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    animation: hm-pulse 2.4s infinite;
}

@keyframes hm-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.hm-prow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .78rem 18px;
    border-top: 1px solid var(--line);
}

.hm-prow:first-of-type { border-top: 0; }

.hm-pk {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-pv {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.hm-pdelta { font-size: 11px; }
.hm-up { color: var(--ok); }
.hm-down { color: var(--bad); }

.hm-sev {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

.hm-sev--ok { background: var(--ok); }
.hm-sev--warn { background: var(--warn); }
.hm-sev--bad { background: var(--bad); }

.hm-sd { color: var(--muted); font-weight: 400; }

.hm-psub { font-size: 11px; color: var(--muted); font-weight: 400; }

/* Encabezados de sección: título + conteo + regla */
.hm-shead { display: flex; align-items: center; gap: 11px; margin: 38px 0 16px; }
.hm-shead h2 { font-size: 19px; font-weight: 700; margin: 0; }
.hm-n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.hm-rule { flex: 1; height: 1px; background: var(--line); }

/* Destacados: tarjetas-enlace con marca de agua del propio ícono */
.hm-feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }

.hm-fcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hm-fcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(14,19,48,.06), 0 18px 40px rgba(14,19,48,.13);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.hm-fcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cabecera de tarjeta: ícono y título en la misma línea */
.hm-fhead { display: flex; align-items: center; gap: 10px; }

.hm-fhead .ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
}

.hm-fhead h3 { font-size: 14.5px; font-weight: 700; margin: 0; line-height: 1.2; }

.hm-fcard > p { margin: 0; color: var(--muted); font-size: 12.8px; line-height: 1.45; }

/* Peek del dato: siempre una sola línea */
.hm-peek {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

.hm-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 14%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
}

/* Marca de agua: el propio ícono como textura, abajo a la derecha */
.hm-wm {
    position: absolute;
    right: -18px;
    bottom: -18px;
    color: var(--accent);
    opacity: .06;
    pointer-events: none;
}

.hm-fcard.hm-spark .hm-wm { color: var(--warn); opacity: .10; }

/* Filas compactas: icono 34px + nombre + una línea, grilla de 3 */
.hm-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }

.hm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 13px;
    text-decoration: none;
    transition: border-color .14s ease, transform .14s ease;
}

.hm-row:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    transform: translateY(-1px);
}

.hm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hm-row .ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--accent);
}

.hm-row .ic svg, .hm-fhead .ic svg { width: 19px; height: 19px; }

.hm-row .tx { min-width: 0; }

.hm-row .nm {
    font-size: 13.7px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.hm-row .ds {
    font-size: 11.8px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.hm-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }

.hm-vacio { display: none; text-align: center; color: var(--muted); padding: 26px 0; }

@media (max-width: 880px) {
    .hm-hero { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2rem; }
    .hm-feat { grid-template-columns: repeat(2, 1fr); }
    .hm-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .hm-feat { grid-template-columns: 1fr 1fr; }
    .hm-rows { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-panel-dot { animation: none; }
}

/* Peek de destacados: alineado al pie de la tarjeta, con puntito de
   severidad (ok verde / warn ámbar / bad rojo) */
.hm-peek { margin-top: auto; }

.hm-peek-dot.hm-dot--ok { background: var(--ok); }
.hm-peek-dot.hm-dot--warn { background: var(--warn); }
.hm-peek-dot.hm-dot--bad { background: var(--bad); }

/* Apoyo: botón "Invítame un café" (Buy Me a Coffee) — enlace propio,
   sin widgets ni scripts de terceros. Discreto, con tokens del sitio. */
.bmc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 10px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.bmc:hover { border-color: var(--accent); transform: translateY(-1px); }
.bmc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bmc svg { flex: none; }

/* Línea de apoyo al pie de los módulos */
.bmc-suave {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin: 1.6rem 0 .4rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
    color: var(--muted);
    font-size: .92rem;
}

.bmc-suave .bmc { padding: 8px 14px; font-size: 13px; }

/* BMC en el footer: discreto, compacto */
.bmc-footer { margin-top: .9rem; padding: 7px 12px; font-size: 13px; border-radius: 8px; }

/* ============================================================
   ¿Sube o baja la bencina? (bencina-jueves / MEPCO)
   La respuesta primero: tarjetas por combustible con la
   dirección y el monto por litro; tendencia y dato crudo después.
   ============================================================ */

.bj-vigencia {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .95rem;
}

.bj-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .9rem;
}

.bj-tarjeta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}

.bj-tarjeta--sube { border-left-color: var(--bad); }
.bj-tarjeta--baja { border-left-color: var(--ok); }
.bj-tarjeta--igual { border-left-color: var(--accent); }

.bj-nombre {
    margin: 0 0 .35rem;
    font-size: 1rem;
    color: var(--muted);
}

.bj-monto {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
}

.bj-tarjeta--sube .bj-monto { color: var(--bad); }
.bj-tarjeta--baja .bj-monto { color: var(--ok); }
.bj-tarjeta--igual .bj-monto { color: var(--accent); }
.bj-monto--sindato { color: var(--muted); font-size: 1.05rem; }

.bj-flecha { font-size: 1.15em; }

.bj-nota {
    margin: .35rem 0 0;
    font-size: .82rem;
    color: var(--muted);
}

/* CTA de integración con /bencina: una sola pieza grande, no un banner */
.bj-cta {
    display: block;
    margin: 1.4rem 0;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--accent-soft);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.bj-cta:hover { border-color: var(--accent); transform: translateY(-1px); }

.bj-cta-principal {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
}

.bj-cta-secundaria {
    display: block;
    margin-top: .25rem;
    font-size: .9rem;
    color: var(--muted);
}

.bj-cta-secundaria strong { color: var(--accent); }

.bj-h2 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; }

/* Envoltorio responsive para tablas en móvil */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bj-tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .92rem;
}

.bj-tabla th,
.bj-tabla td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: nowrap;
}

.bj-tabla th:first-child,
.bj-tabla td:first-child { text-align: left; }

.bj-tabla thead th {
    font-family: var(--font-display);
    font-size: .82rem;
    color: var(--muted);
    background: var(--surface-2);
}

.bj-tabla tbody th { font-weight: 600; }
.bj-tabla tbody tr:last-child th,
.bj-tabla tbody tr:last-child td { border-bottom: none; }

.bj-tabla td.bj-sube { color: var(--bad); font-family: var(--font-mono); font-weight: 600; }
.bj-tabla td.bj-baja { color: var(--ok); font-family: var(--font-mono); font-weight: 600; }
.bj-tabla td.bj-igual { color: var(--muted); font-family: var(--font-mono); }

.bj-detalle,
.bj-explicador {
    margin: 1.4rem 0;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.bj-detalle summary,
.bj-explicador summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
}

.bj-explicador ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.bj-explicador li { margin-bottom: .55rem; font-size: .95rem; }
.bj-explicador li:last-child { margin-bottom: 0; }

/* ============================================================
   Precio del Gas (cilindro doméstico por comuna/región)
   Precio real por local cuando existe; promedio regional oficial
   siempre; el $/kg como respuesta a "¿qué balón conviene?".
   ============================================================ */

.ga-form { margin: 0 0 1.2rem; }

.ga-h2 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; }

.ga-card { display: flex; flex-direction: column; gap: .35rem; }

.ga-precios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
}

.ga-valvula {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    min-width: 100%;
}

.ga-precio {
    margin: .15rem 0 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.45rem;
}

.ga-suave {
    margin: 1rem 0;
    padding: .8rem 1rem;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.ga-barato {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}

.ga-chip strong { font-family: var(--font-mono); }

/* ============================================================
   Cruzar a Argentina (pasos fronterizos)
   Semáforo por paso (verde/amarillo/rojo) con la hora real de
   Gendarmería, avisos sobre la ficha y bloque de cambio ARS↔CLP.
   Solo tokens del sitio: funciona en claro y oscuro.
   ============================================================ */

.pf-h2 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; }

/* Punto del semáforo: el color del estado a un golpe de vista */
.pf-dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.pf-dot--abierto { background: var(--ok); }
.pf-dot--condicionado { background: var(--warn); }
.pf-dot--cerrado { background: var(--bad); }
.pf-dot--sd { background: var(--muted); }

.pf-estado--abierto { color: var(--ok); }
.pf-estado--condicionado { color: var(--warn); }
.pf-estado--cerrado { color: var(--bad); }
.pf-estado--sd { color: var(--muted); }

/* Cards del índice */
.pf-card { display: flex; flex-direction: column; gap: .3rem; }

.pf-card-head {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.pf-card-title { margin: 0; font-size: 1.05rem; }

.pf-card-title a { text-decoration: none; color: var(--ink); }
.pf-card-title a:hover { color: var(--accent); }

.pf-card-estado {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}

.pf-card-meta { margin: 0; font-size: .88rem; color: var(--ink); }

.pf-card-actu {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--muted);
}

.pf-card-cta { margin: .45rem 0 0; font-size: .88rem; }

.pf-chip { font-size: .78rem; }

.pf-chip-rezagado {
    background: var(--warn-bg);
    color: var(--warn);
    font-size: .72rem;
    margin-left: .3rem;
}

.pf-mini-aviso {
    margin: .2rem 0 0;
    font-size: .8rem;
    color: var(--warn);
}

/* Bloque de avisos (cortes programados): sobre la ficha, siempre visible */
.pf-avisos {
    display: grid;
    gap: .6rem;
    margin: 1.2rem 0;
}

.pf-aviso {
    padding: .7rem .9rem;
    border: 1px solid var(--warn);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--warn-bg);
}

.pf-aviso-titulo {
    margin: 0 0 .2rem;
    font-family: var(--font-display);
    font-weight: 600;
}

.pf-aviso-texto { margin: 0; font-size: .92rem; }

/* Semáforo grande de la ficha */
.pf-ficha {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.pf-semaforo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--line);
}

.pf-semaforo .pf-dot { width: 20px; height: 20px; }

.pf-semaforo-estado {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
}

.pf-semaforo--abierto .pf-semaforo-estado { color: var(--ok); }
.pf-semaforo--condicionado .pf-semaforo-estado { color: var(--warn); }
.pf-semaforo--cerrado .pf-semaforo-estado { color: var(--bad); }
.pf-semaforo--sd .pf-semaforo-estado { color: var(--muted); }

.pf-semaforo-fuente { margin: 0; font-size: .85rem; color: var(--muted); }
.pf-semaforo-fuente strong { color: var(--ink); }

.pf-semaforo .pf-chip { margin-left: auto; }

.pf-datos { margin: .8rem 0 0; display: grid; gap: .5rem; }

.pf-datos > div { display: grid; grid-template-columns: minmax(7.5rem, 30%) 1fr; gap: .4rem; }

.pf-datos dt {
    font-family: var(--font-display);
    font-size: .82rem;
    color: var(--muted);
}

.pf-datos dd { margin: 0; font-size: .93rem; }

/* Clima de cordillera: pronóstico de ruta + reporte de Gendarmería */
.pf-clima {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .8rem;
}

.pf-clima-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .8rem .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.pf-clima-icono { font-size: 1.5rem; }

.pf-clima-temp {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
}

.pf-clima-nota { font-size: .78rem; color: var(--muted); }

/* Checklist "Antes de cruzar" (bloque de monetización no invasivo) */
.pf-checklist {
    margin: 1.2rem 0;
    padding: .95rem 1.1rem;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.pf-checklist ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.pf-checklist li { margin-bottom: .5rem; font-size: .93rem; }
.pf-checklist li:last-child { margin-bottom: 0; }

/* Cambio ARS↔CLP */
.pf-cambio {
    margin: 1.4rem 0;
    padding: .95rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.pf-cambio .pf-h2 { margin-top: 0; }

.pf-tasas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .8rem;
    margin-bottom: .8rem;
}

.pf-tasa {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem .85rem;
    background: var(--surface-2);
    border-radius: var(--radius);
}

.pf-tasa-label { font-size: .8rem; color: var(--muted); }

.pf-tasa-valor { font-family: var(--font-mono); font-size: 1.15rem; }

.pf-tasa-nota { font-size: .76rem; color: var(--muted); }

.pf-conversor { margin: .4rem 0 0; }

.pf-conversor input[type="number"] { max-width: 11rem; }

.pf-conversion {
    margin: .5rem 0 0;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    min-height: 1.5em;
}

/* Móvil: la ficha de datos pasa a una columna y el chip de cadenas
   baja del semáforo al flujo normal */
@media (max-width: 640px) {
    .pf-datos > div { grid-template-columns: 1fr; gap: .1rem; }
    .pf-datos dt { margin-top: .35rem; }
    .pf-semaforo .pf-chip { margin-left: 0; }

    @media (prefers-reduced-motion: no-preference) {
        .pf-dot { transition: background .2s; }
    }
}

/* ============================================================
   Costo del Viaje en Auto (costo-viaje)
   Calculadora con precio CNE real, peajes MOP detectados sobre
   la ruta, total por persona y bencineras más baratas.
   Solo tokens del sitio: funciona en claro y oscuro.
   ============================================================ */

.cv-h2 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; }

.cv-form {
    margin: 1rem 0 1.4rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.cv-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .7rem;
    margin-bottom: .8rem;
}

.cv-form label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .8rem;
    color: var(--muted);
}

.cv-form input,
.cv-form select {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: .95rem;
}

.cv-boton {
    display: inline-block;
    padding: .6rem 1.1rem;
    border: none;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

.cv-boton:hover { background: var(--accent-strong); }

.cv-boton-secundario {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.cv-resultado {
    margin: 1.2rem 0;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.cv-ruta-nombre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .25rem;
    font-size: 1.05rem;
}

.cv-total {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.9rem;
    color: var(--accent-strong);
}

.cv-total::before { content: '$'; }

.cv-persona { margin: 0 0 .8rem; color: var(--muted); font-size: .95rem; }
.cv-persona strong { color: var(--ink); font-family: var(--font-mono); }

.cv-desglose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
    margin: .9rem 0;
}

.cv-dato {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem;
    background: var(--surface-2);
    border-radius: var(--radius);
}

.cv-dato-label { font-size: .78rem; color: var(--muted); }
.cv-dato strong { font-family: var(--font-mono); font-size: 1.25rem; }
.cv-dato-nota { font-size: .78rem; color: var(--muted); }

.cv-fila-precio { margin: .6rem 0; }
.cv-fila-precio p { margin: .2rem 0; }

.cv-bencineras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .7rem;
    margin: .6rem 0;
}

.cv-bencinera {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem;
    background: var(--surface-2);
    border-radius: var(--radius);
}

.cv-bencinera strong { color: var(--ok); }
.cv-bencinera span { font-family: var(--font-mono); font-weight: 600; }

.cv-bencinera-donde {
    font-family: inherit !important;
    font-weight: 400 !important;
    font-size: .8rem;
    color: var(--muted);
}

.cv-chip-ruta { text-decoration: none; }

.cv-rutas {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .6rem 0 1rem;
}

.cv-mapa-wrap { margin: 1rem 0; }

.cv-mapa {
    height: 380px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    z-index: 0;
}

.cv-compartir { margin: 1rem 0; }

@media (max-width: 640px) {
    .cv-total { font-size: 1.6rem; }
    .cv-mapa { height: 300px; }
}

/* ============================================================
   Eclipse 2027 en Chile (eclipse-2027)
   Veredicto por comuna, cuenta regresiva, simulación del Sol y
   seguridad visual. Solo tokens del sitio: claro y oscuro.
   ============================================================ */

.ec-h2 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; }

.ec-seguridad-banner {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 2px solid var(--bad);
    border-radius: var(--radius);
    background: var(--warn-bg);
    font-size: .95rem;
}

.ec-seguridad-banner strong:first-child { color: var(--bad); }

.ec-seguridad {
    margin: 1.2rem 0;
    padding: .95rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.ec-seguridad ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.ec-seguridad li { margin-bottom: .5rem; font-size: .93rem; }
.ec-seguridad li:last-child { margin-bottom: 0; }

.ec-veredicto-box {
    margin: 1.2rem 0;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.ec-veredicto--anillo { border-left: 5px solid var(--warn); }
.ec-veredicto--parcial { border-left: 5px solid var(--accent); }

.ec-veredicto-grande {
    flex: 1 1 300px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.4;
}

.ec-veredicto-grande strong { color: var(--warn); font-size: 1.5rem; }

.ec-sol-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    flex: 0 0 auto;
}

.ec-sol-svg { width: 96px; height: 96px; }

.ec-sol-disco { fill: #f59e0b; }

.ec-sol-luna { fill: var(--bg); stroke: var(--line); stroke-width: 1; }

.ec-sol-pct { font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; }

.ec-sol-nota { font-size: .75rem; color: var(--muted); }

.ec-cuenta { margin: 1rem 0; }

.ec-cuenta-label { margin: 0; color: var(--muted); }

.ec-cuenta-numeros {
    margin: .2rem 0 .3rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--accent-strong);
}

.ec-card .ec-veredicto-anillo { color: var(--warn); font-weight: 600; }

.ec-card-meta { margin: .2rem 0 0; font-size: .82rem; color: var(--muted); }

.ec-mapa-wrap { margin: 1rem 0; }

.ec-mapa {
    height: 420px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    z-index: 0;
}

.ec-buscador { max-width: 640px; }

.ec-geo { margin: .5rem 0 1rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

.ec-compartir { margin: 1rem 0; display: flex; gap: .6rem; flex-wrap: wrap; }

.ec-cercanas { margin: .4rem 0 0; padding-left: 1.2rem; }

.ec-cercanas li { margin-bottom: .45rem; font-size: .93rem; }

.ec-archivo { border-left: 4px solid var(--muted); }

@media (max-width: 640px) {
    .ec-veredicto-grande { font-size: 1.05rem; }
    .ec-veredicto-grande strong { font-size: 1.25rem; }
    .ec-mapa { height: 300px; }
    .ec-cuenta-numeros { font-size: 1.3rem; }
}

/* ============================================================
   Eclipse 2027 — índice rediseñado: hero 2 col, tarjeta, chips,
   timeline, mapa esquemático, tabla de anulares y prepárate.
   ============================================================ */

/* ---- Hero a dos columnas ---- */
.ec-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 2rem;
    align-items: start;
    margin: 1.5rem 0 2rem;
}

.ec-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .8rem; }

.ec-badge-fecha,
.ec-badge-chip {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

.ec-badge-fecha { background: var(--accent-soft); color: var(--accent-strong); }
.ec-badge-chip { background: var(--surface-2); color: var(--muted); }

.ec-titulo {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    margin: 0 0 .6rem;
}

.ec-resaltado { color: var(--warn); }

.ec-sub { font-size: 1.05rem; color: var(--muted); margin: 0 0 1.2rem; max-width: 46ch; }

/* ---- Buscador ---- */
.ec-buscador { display: flex; gap: .6rem; flex-wrap: wrap; }

.ec-buscador input[type="text"] {
    flex: 1 1 220px;
    max-width: none;
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface);
    color: var(--ink);
}

.ec-buscador input:focus { border-color: var(--accent); outline: 0; }

.ec-busqueda-vacia { margin: .6rem 0 0; color: var(--bad); font-size: .92rem; }

.ec-geo-btn { color: var(--accent); font-weight: 600; text-decoration: none; }
.ec-geo-btn:hover { text-decoration: underline; }

/* ---- Chips de acceso rápido ---- */
.ec-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }

.ec-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: .88rem;
    text-decoration: none;
}

.ec-chip:hover { border-color: var(--accent); }

.ec-chip--activo {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}

.ec-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }

.ec-chip--anular .ec-chip-dot { background: var(--warn); }

/* ---- Tarjeta de la comuna seleccionada ---- */
.ec-hero-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.3rem;
}

.ec-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }

.ec-card-nombre { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }

.ec-card-region { margin: .1rem 0 0; color: var(--muted); font-size: .85rem; }

.ec-card-chip {
    flex: 0 0 auto;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ec-sol-escena { display: flex; justify-content: center; padding: .8rem 0 .3rem; }

.ec-sol-escena .ec-sol-svg { width: 150px; height: 150px; }

.ec-sol-caption {
    text-align: center;
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--muted);
    font-family: var(--font-mono);
}

.ec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }

.ec-stat {
    background: var(--surface-2);
    border-radius: 10px;
    padding: .55rem .6rem;
    text-align: center;
}

.ec-stat-label {
    display: block;
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ec-stat-valor {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    margin-top: .15rem;
}

.ec-stat-anillo { color: var(--warn); }

.ec-countdown {
    margin: 1rem 0;
    padding: .7rem .8rem;
    border: 1px dashed var(--line);
    border-radius: 10px;
    text-align: center;
}

.ec-countdown-label { margin: 0; font-size: .78rem; color: var(--muted); }

.ec-countdown-numeros {
    margin: .2rem 0 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--accent-strong);
}

.ec-card-link {
    display: block;
    margin-top: .8rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    font-size: .93rem;
}

.ec-card-link:hover { text-decoration: underline; }

/* ---- Timeline (slider) ---- */
.ec-timeline {
    margin: 2rem 0;
    padding: 1.2rem 1.3rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.ec-tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

.ec-tl-titulo { margin: 0; font-size: 1.15rem; }

.ec-tl-nota { margin: 0; font-size: .82rem; color: var(--muted); }

.ec-tl-range { width: 100%; margin: 1rem 0 .4rem; accent-color: var(--accent); }

.ec-tl-marcas { position: relative; height: 2.7rem; font-size: .72rem; color: var(--muted); }

.ec-tl-marca { position: absolute; top: 0; transform: translateX(-4px); line-height: 1.25; white-space: nowrap; }

.ec-tl-marca strong { display: block; font-family: var(--font-mono); color: var(--ink); }

.ec-tl-marca-max strong { color: var(--warn); }

.ec-tl-marca-max { text-align: right; }

.ec-tl-marca:last-child { transform: translateX(calc(-100% + 4px)); text-align: right; }

.ec-tl-fase { min-height: 1.4rem; margin: .2rem 0 .4rem; font-weight: 600; font-size: .95rem; }

.ec-tl-sol { display: flex; justify-content: center; }

/* ---- Franja: mapa esquemático + tabla de anulares ---- */
.ec-franja-sub { color: var(--muted); margin: 0 0 1rem; }

.ec-franja-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1.5rem;
    align-items: start;
    margin: 1rem 0;
}

.ec-mapa-esq-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem;
}

.ec-mapa-esq { display: block; width: 100%; height: auto; }

.ec-mapa-dot-anular { fill: var(--warn); }

.ec-mapa-dot-ref { fill: var(--muted); }

.ec-mapa-texto { font-size: 13px; fill: var(--muted); font-family: var(--font-body); }

.ec-mapa-texto-sel { font-weight: 700; fill: var(--ink); }

.ec-mapa-sel { fill: none; stroke: var(--accent); stroke-width: 2.5; }

.ec-mapa-leyenda {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin: .6rem 0 0;
    font-size: .8rem;
    color: var(--muted);
}

.ec-ley-item { display: inline-flex; align-items: center; gap: .35rem; }

.ec-ley-linea { width: 22px; height: 0; border-top: 3px solid var(--warn); }

.ec-ley-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.ec-ley-dot-anular { background: var(--warn); }

.ec-ley-dot-parcial { background: var(--muted); }

.ec-tabla-anulares .ec-tabla th a { color: var(--ink); text-decoration: none; }

.ec-tabla-anulares .ec-tabla th a:hover { color: var(--accent); text-decoration: underline; }

.ec-tabla-region { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); }

.ec-barra {
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    height: 7px;
    border-radius: 999px;
    background: var(--surface-2);
    margin-right: .5rem;
    overflow: hidden;
}

.ec-barra-fill { display: block; height: 100%; border-radius: 999px; background: var(--warn); }

/* ---- Prepárate ---- */
.ec-prep-sub { color: var(--muted); margin: 0 0 1rem; }

.ec-prep-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.ec-prep-col,
.ec-prep-afiliado,
.ec-prep-viaje {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

.ec-prep-col ul { margin: .4rem 0 0; padding-left: 1.15rem; }

.ec-prep-col li { margin-bottom: .5rem; font-size: .92rem; }

.ec-prep-ok-title { margin: 0; color: var(--ok); font-weight: 700; }

.ec-prep-no-title { margin: 0; color: var(--bad); font-weight: 700; }

.ec-prep-afiliado-tag {
    display: inline-block;
    margin: 0 0 .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ec-prep-afiliado-titulo { margin: 0 0 .3rem; font-family: var(--font-display); font-weight: 700; }

.ec-prep-afiliado-precio { margin: .5rem 0 0; font-family: var(--font-mono); font-weight: 600; color: var(--ok); }

.ec-enlace { color: var(--accent); font-weight: 600; text-decoration: none; }

.ec-enlace:hover { text-decoration: underline; }

/* ---- Responsive del índice ---- */
@media (max-width: 900px) {
    .ec-hero-grid { grid-template-columns: 1fr; }
    .ec-franja-grid { grid-template-columns: 1fr; }
    .ec-prep-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .ec-prep-grid { grid-template-columns: 1fr; }
    .ec-tl-marcas { display: none; }
    .ec-sol-escena .ec-sol-svg { width: 120px; height: 120px; }
}

/* ============================================================
   Aranas — "Reconoce tu araña" (rediseño mockup 2026-09-26):
   portada con conteos y chips de búsqueda, tarjetas con badge
   sobre la foto, comparativas VS, ficha con hero del semáforo,
   reconocimiento rápido, tamaño real a escala y mordedura.
   ============================================================ */

/* ---- Portada: hero y conteos ---- */
.sp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 2rem;
    align-items: center;
    margin: 1.4rem 0 1.2rem;
}

.sp-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    margin: 0 0 .4rem;
}

.sp-hero-titulo { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .5rem; }

.sp-hero-sub { color: var(--muted); font-size: 1.02rem; margin: 0; max-width: 52ch; }

.sp-conteos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.sp-conteo {
    padding: .8rem .9rem;
    border-top: 4px solid var(--line);
    display: grid;
    gap: .1rem;
}

.sp-conteo + .sp-conteo { border-left: 1px solid var(--line); }

.sp-conteo--rojo { border-top-color: var(--bad); }
.sp-conteo--amarillo { border-top-color: var(--warn); }
.sp-conteo--verde { border-top-color: var(--ok); }

.sp-conteo strong { font-family: var(--font-mono); font-size: 1.6rem; }

.sp-conteo span { font-size: .78rem; color: var(--muted); }

/* ---- Filtros: buscador + chips ---- */
.sp-panel-filtros {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin: 0 0 1.6rem;
}

.sp-panel-filtros input[type="text"] {
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    background: var(--bg);
    color: var(--ink);
    margin-bottom: .7rem;
}

.sp-panel-filtros input[type="text"]:focus { border-color: var(--accent); outline: 0; }

.sp-chips-fila {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.sp-chips-titulo {
    flex: 0 0 8.5rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    font-weight: 700;
    color: var(--muted);
}

.sp-chip-filtro {
    padding: .22rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
    font-size: .85rem;
}

.sp-chip-filtro:hover { border-color: var(--accent); color: var(--accent-strong); }

.sp-chip-filtro--activo {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.sp-busqueda-vacia { color: var(--bad); font-size: .95rem; margin: -.8rem 0 1.2rem; }

/* ---- Grilla de tarjetas ---- */
.sp-h2 { font-size: 1.3rem; margin: 1.8rem 0 1rem; }

.sp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.sp-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: transform .12s ease, border-color .12s ease;
}

.sp-tarjeta:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Stretched link: el título enlaza y cubre la tarjeta; los enlaces del
   crédito quedan por encima (son obligación de la licencia). */
.sp-tarjeta-link { color: inherit; text-decoration: none; }

.sp-tarjeta-link::after { content: ''; position: absolute; inset: 0; }

.sp-tarjeta .sp-credito a { position: relative; z-index: 1; }

.sp-tarjeta-media { position: relative; }

.sp-tarjeta-media .sp-foto { margin: 0; }

.sp-tarjeta-media .sp-foto img,
.sp-tarjeta-media .sp-foto-placeholder { width: 100%; height: 200px; object-fit: cover; display: block; }

.sp-tarjeta-badge {
    position: absolute;
    top: .55rem;
    left: .55rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: var(--surface);
    font-size: .72rem;
    font-weight: 700;
    box-shadow: var(--shadow);
}

.sp-tarjeta-badge--rojo { color: var(--bad); }
.sp-tarjeta-badge--amarillo { color: var(--warn); }
.sp-tarjeta-badge--verde { color: var(--ok); }

.sp-cat-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted);
}

.sp-cat-dot--rojo { background: var(--bad); }
.sp-cat-dot--amarillo { background: var(--warn); }
.sp-cat-dot--verde { background: var(--ok); }

.sp-tarjeta-nombre {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    padding: .65rem .85rem 0;
}

.sp-tarjeta-cientifico { color: var(--muted); font-size: .84rem; padding: 0 .85rem; }

.sp-tarjeta-resumen { color: var(--muted); font-size: .87rem; padding: .25rem .85rem .5rem; }

.sp-tarjeta-chips { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 .85rem .8rem; }

.sp-mini {
    padding: .12rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .72rem;
}

/* ---- Foto y crédito (overlay en tarjetas y ficha) ---- */
.sp-foto { margin: 0; position: relative; }

.sp-foto img {
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.sp-foto-placeholder {
    border-radius: 8px;
    border: 1px dashed var(--line);
    background: var(--surface-2);
    aspect-ratio: 4 / 3;
}

.sp-foto--overlay img { border-radius: 0; border: none; }

.sp-foto--overlay .sp-credito {
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    background: rgba(10, 12, 20, .62);
    color: #fff;
    padding: .12rem .5rem;
    border-radius: 6px;
    font-size: .68rem;
}

.sp-foto--overlay .sp-credito a { color: #fff; }

.sp-credito { font-size: .75rem; color: var(--muted); margin: .25rem 0 0; }

.sp-credito a { color: var(--muted); }

/* ---- Comparativas VS (portada) ---- */
.sp-vs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.sp-vs-card {
    display: grid;
    gap: .4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem;
    text-decoration: none;
    color: var(--ink);
}

.sp-vs-card:hover { border-color: var(--accent); }

.sp-vs-fotos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
}

.sp-vs-fotos img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.sp-vs-sep {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    color: var(--muted);
}

.sp-vs-nombres { font-size: .9rem; }

.sp-vs-clave { color: var(--muted); font-size: .84rem; }

/* ---- Barra de mordedura (portada) ---- */
.sp-mordio {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.8rem 0 1rem;
    padding: .9rem 1.1rem;
    border: 1.5px solid var(--bad);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bad) 6%, var(--surface));
}

.sp-mordio strong:first-child { color: var(--bad); font-size: 1.02rem; }

.sp-mordio > span { flex: 1 1 260px; font-size: .92rem; }

.sp-mordio-tel {
    font-family: var(--font-mono);
    color: var(--bad);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
}

/* ---- Ficha: hero del semáforo ---- */
.sp-miga { font-size: .85rem; color: var(--muted); margin: 1rem 0 .4rem; }

.sp-miga a { color: var(--muted); }

.sp-ficha-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: .4rem 0 1.2rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.sp-ficha-hero--rojo { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.sp-ficha-hero--amarillo { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.sp-ficha-hero--verde { background: color-mix(in srgb, var(--ok) 9%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }

.sp-ficha-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7rem;
    font-weight: 700;
    margin: 0 0 .15rem;
}

.sp-ficha-hero--rojo .sp-ficha-eyebrow { color: var(--bad); }
.sp-ficha-hero--amarillo .sp-ficha-eyebrow { color: var(--warn); }
.sp-ficha-hero--verde .sp-ficha-eyebrow { color: var(--ok); }

.sp-ficha-titulo { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.2rem); }

.sp-ficha-cientifico { color: var(--muted); margin: .2rem 0 0; font-size: .92rem; }

.sp-ficha-accion { text-align: right; max-width: 300px; }

.sp-ficha-accion-titulo {
    margin: 0 0 .2rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--bad);
}

.sp-ficha-accion p:last-child { margin: 0; font-size: .88rem; color: var(--muted); }

/* ---- Ficha: dos columnas, galería y datos ---- */
.sp-ficha-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6rem;
    margin: 1.2rem 0;
}

.sp-galeria { min-width: 0; }

.sp-foto-principal { cursor: zoom-in; }

.sp-foto-principal .sp-foto img { width: 100%; height: auto; }

.sp-thumbs { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }

.sp-thumb-wrap { display: grid; gap: .15rem; justify-items: center; }

.sp-thumb {
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.sp-thumb img { width: 90px; height: 68px; object-fit: cover; display: block; }

.sp-thumb--activa { border-color: var(--accent); }

.sp-thumb-vista { font-size: .7rem; color: var(--muted); }

.sp-resumen { font-size: 1.05rem; font-weight: 500; margin: 0 0 1rem; }

.sp-h3 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }

.sp-tips { margin: 0; padding-left: 1.2rem; }

.sp-tips li { margin-bottom: .45rem; }

.sp-rapidos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.sp-rapido {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .55rem .7rem;
    display: grid;
    gap: .1rem;
}

.sp-rapido-clave {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 700;
    color: var(--muted);
}

.sp-rapido-valor { font-size: .92rem; }

.sp-datos { display: grid; gap: .55rem; margin: 1rem 0; }

.sp-datos > div { display: grid; grid-template-columns: 120px 1fr; gap: .6rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }

.sp-datos dt { color: var(--muted); font-size: .88rem; font-weight: 600; }

.sp-datos dd { margin: 0; }

/* ---- Ficha: tamaño real a escala ---- */
.sp-escala {
    margin-top: 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}

.sp-escala .sp-h3 { margin-top: 0; }

.sp-escala-svg { width: 100%; height: auto; display: block; }

.sp-escala-moneda { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }

.sp-escala-valor { font-family: var(--font-display); font-weight: 700; font-size: 15px; fill: var(--accent-strong); }

.sp-escala-cuerpo { fill: var(--warn); opacity: .85; }

.sp-escala-linea { stroke: var(--bad); stroke-width: 1.5; }

.sp-escala-texto { font-family: var(--font-mono); font-size: 10px; fill: var(--bad); }

.sp-escala-mm { font-family: var(--font-mono); font-size: 9.5px; fill: var(--muted); }

.sp-escala-regla line { stroke: var(--line); stroke-width: 1.5; }

/* ---- Confusión destacada (dos tarjetas) ---- */
.sp-confusion { margin: 1.8rem 0; }

.sp-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.sp-duo-col {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem;
}

.sp-duo-col--rojo { border-top-color: var(--bad); }
.sp-duo-col--amarillo { border-top-color: var(--warn); }
.sp-duo-col--verde { border-top-color: var(--ok); }

.sp-duo-col .sp-foto img { width: 100%; height: auto; }

.sp-duo-lista { margin: .6rem 0 0; padding-left: 1.15rem; font-size: .9rem; }

.sp-duo-lista li { margin-bottom: .3rem; }

.sp-clave {
    font-size: 1rem;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: var(--radius);
    padding: .7rem .95rem;
    margin: 1rem 0 .6rem;
}

/* ---- Mordedura ---- */
.sp-mordedura {
    margin: 1.6rem 0;
    padding: 1.1rem 1.3rem;
    background: var(--surface);
    border: 1.5px solid var(--bad);
    border-radius: var(--radius);
}

.sp-mordedura h2 { margin: 0 0 .7rem; color: var(--bad); font-size: 1.2rem; }

.sp-mordedura-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }

.sp-mordedura-pasos li {
    counter-increment: paso;
    display: flex;
    gap: .6rem;
    align-items: baseline;
    margin-bottom: .55rem;
}

.sp-mordedura-pasos li::before {
    content: counter(paso);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bad);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .72rem;
    transform: translateY(3px);
}

.sp-mordedura-telefono {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    margin: .9rem 0 .3rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.sp-mordedura-telefono a { color: var(--bad); font-weight: 700; text-decoration: none; }

.sp-copiar {
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    border-radius: 6px;
    font-size: .75rem;
    padding: .15rem .55rem;
    cursor: pointer;
}

.sp-copiar:hover { border-color: var(--accent); color: var(--accent-strong); }

.sp-copiar-ok { color: var(--ok); font-size: .8rem; }

.sp-nota-medica {
    background: var(--warn-bg);
    border-radius: 8px;
    padding: .7rem .9rem;
    font-size: .92rem;
}

.sp-fuentes { margin: 1.4rem 0; }

.sp-fuentes ol { color: var(--muted); font-size: .88rem; }

/* ---- Afiliado ---- */
.sp-afiliado {
    margin: 1.4rem 0;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.sp-afiliado-tag {
    display: inline-block;
    margin: 0 0 .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sp-afiliado-titulo { margin: 0 0 .3rem; font-family: var(--font-display); font-weight: 700; }

/* ---- Lightbox ---- */
.sp-lightbox {
    border: none;
    border-radius: var(--radius);
    padding: 0;
    background: transparent;
    max-width: min(92vw, 1100px);
}

.sp-lightbox::backdrop { background: rgba(0, 0, 0, .82); }

.sp-lightbox img { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto; border-radius: 8px; }

.sp-lightbox-credito { color: #eee; font-size: .8rem; text-align: center; margin: .4rem 0; }

.sp-lightbox-botones { display: flex; justify-content: center; gap: 1rem; }

.sp-lightbox-botones button {
    font-size: 1.2rem;
    padding: .3rem .9rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    cursor: pointer;
}

.sp-lightbox-botones button:hover { background: rgba(255, 255, 255, .3); }

/* ---- Página comparar (mantiene su propio layout) ---- */
.sp-titulo-comparar { margin: .6rem 0 .6rem; }

.sp-vs { color: var(--muted); font-size: .7em; }

.sp-comparar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.2rem 0; }

.sp-comparar-col {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

.sp-comparar-col--rojo { border-top-color: var(--bad); }
.sp-comparar-col--amarillo { border-top-color: var(--warn); }
.sp-comparar-col--verde { border-top-color: var(--ok); }

.sp-comparar-nombre { margin: 0; font-size: 1.15rem; }

.sp-comparar-cientifico { color: var(--muted); font-size: .85rem; margin: 0 0 .6rem; }

.sp-comparativas-sub { color: var(--muted); margin: 0 0 .8rem; }

.sp-comparativas-chips { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.4rem; }

.sp-chip-comparar {
    padding: .45rem .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.sp-chip-comparar:hover { border-color: var(--accent); color: var(--accent-strong); }

.sp-tabla { width: 100%; border-collapse: collapse; }

.sp-tabla th:first-child, .sp-tabla td:first-child { text-align: left; }

.sp-tabla th, .sp-tabla td {
    text-align: left;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--line);
}

.sp-tabla thead th {
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: .85rem;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .sp-hero { grid-template-columns: 1fr; gap: 1rem; }
    .sp-grid { grid-template-columns: 1fr 1fr; }
    .sp-vs-grid { grid-template-columns: 1fr 1fr; }
    .sp-ficha-grid { grid-template-columns: 1fr; }
    .sp-duo { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .sp-grid { grid-template-columns: 1fr; }
    .sp-vs-grid { grid-template-columns: 1fr; }
    .sp-conteos strong { font-size: 1.25rem; }
    .sp-chips-titulo { flex-basis: 100%; }
    .sp-datos > div { grid-template-columns: 100px 1fr; }
    .sp-ficha-accion { text-align: left; }
}
/* ============================================================
   Legal — páginas de privacidad, cookies, términos y aviso
   legal + formulario de derechos. Textos = compuerta humana.
   ============================================================ */

.legal-cabecera { margin: 1.4rem 0 1.2rem; }

.legal-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    margin: 0 0 .3rem;
}

.legal-titulo { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .3rem; }

.legal-actualizado { color: var(--muted); font-size: .88rem; margin: 0; }

.legal-indice {
    margin-top: .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem 1rem;
}

.legal-indice-titulo {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    font-weight: 700;
    color: var(--muted);
}

.legal-indice ol { margin: .3rem 0 0; padding-left: 1.2rem; columns: 2; }

.legal-indice li { margin-bottom: .2rem; }

.legal-cuerpo { max-width: 760px; }

.legal-cuerpo h2 {
    font-size: 1.15rem;
    margin: 1.8rem 0 .5rem;
    scroll-margin-top: 5rem;
}

.legal-cuerpo p, .legal-cuerpo li { line-height: 1.65; }

.legal-cuerpo ul, .legal-cuerpo ol { padding-left: 1.3rem; }

.legal-cuerpo li { margin-bottom: .4rem; }

.legal-tabla { width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem; font-size: .92rem; }

.legal-tabla th, .legal-tabla td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.legal-tabla thead th { background: var(--surface-2); font-family: var(--font-display); font-size: .82rem; }

.legal-nota {
    background: var(--surface);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: .7rem .9rem;
    font-size: .92rem;
}

.legal-volver { margin: 2rem 0 1rem; font-size: .9rem; }

.legal-volver a { color: var(--muted); }

.legal-volver a:hover { color: var(--accent); }

.legal-exito {
    background: var(--ok-bg);
    border: 1px solid var(--ok);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
}

.legal-error { color: var(--bad); font-size: .9rem; margin: .2rem 0 .6rem; }

.legal-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.legal-boton {
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.legal-boton:hover { border-color: var(--accent); color: var(--accent-strong); }

.legal-formulario { max-width: 560px; }

.legal-formulario label { display: block; font-weight: 600; font-size: .9rem; margin: .9rem 0 .25rem; }

.legal-formulario input[type="text"],
.legal-formulario input[type="email"],
.legal-formulario select,
.legal-formulario textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: var(--bg);
    color: var(--ink);
}

.legal-formulario input:focus, .legal-formulario select:focus, .legal-formulario textarea:focus {
    border-color: var(--accent);
    outline: 0;
}

.legal-formulario button { margin-top: 1rem; }

.footer-legal-links { display: inline-flex; gap: .4rem; flex-wrap: wrap; margin-left: .5rem; }

.footer-legal-links a {
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.footer-legal-links a:hover { color: var(--accent); }

@media (max-width: 640px) {
    .legal-indice ol { columns: 1; }
}

/* ============================================================
   Volcanes de Chile — rediseño 2026-09 (docs/volcanes-rediseno.md)
   Resumen + distribución, buscador, perfil de la cordillera,
   filas compactas y ficha con subnav. El nivel NUNCA se comunica
   solo con color: chip con punto de color + texto en color de
   tinta (los tokens --lv-* van en :root y [data-theme="dark"]).
   ============================================================ */

/* ── Línea de frescura ── */

.vol-frescura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .55rem;
    margin: .55rem 0 0;
    font-size: .82rem;
    color: var(--muted);
}

.vol-frescura strong { color: var(--ink); font-weight: 600; }

.vol-frescura-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lv-verde);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-verde) 22%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .vol-frescura-punto { animation: vol-latido 2.4s ease-in-out infinite; }
}

@keyframes vol-latido {
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--lv-verde) 10%, transparent); }
}

.state-panel--aviso {
    border-color: color-mix(in srgb, var(--lv-amarilla) 45%, var(--line));
    background: color-mix(in srgb, var(--lv-amarilla) 10%, var(--surface));
}

/* ── Chips de nivel (punto de color + texto en tinta) ── */

.vol-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .18rem .6rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid transparent;
}

a.vol-chip { text-decoration: none; }
a.vol-chip:hover { border-color: var(--accent); }

.vol-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lv-sin); flex: none; }

.vol-chip--verde {
    background: color-mix(in srgb, var(--lv-verde) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--lv-verde) 38%, transparent);
}

.vol-chip--verde .vol-chip-dot { background: var(--lv-verde); }

.vol-chip--amarilla {
    background: color-mix(in srgb, var(--lv-amarilla) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--lv-amarilla) 42%, transparent);
}

.vol-chip--amarilla .vol-chip-dot { background: var(--lv-amarilla); }

.vol-chip--naranja {
    background: color-mix(in srgb, var(--lv-naranja) 15%, var(--surface));
    border-color: color-mix(in srgb, var(--lv-naranja) 40%, transparent);
}

.vol-chip--naranja .vol-chip-dot { background: var(--lv-naranja); }

.vol-chip--roja {
    background: color-mix(in srgb, var(--lv-roja) 13%, var(--surface));
    border-color: color-mix(in srgb, var(--lv-roja) 40%, transparent);
}

.vol-chip--roja .vol-chip-dot { background: var(--lv-roja); }

.vol-chip--sin { border-color: var(--line); }

/* Dato viejo (regla dura #3): borde punteado + "último dato". */
.vol-chip--stale { border-style: dashed; }

.vol-chip-extra {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
}

.vol-chip-nombre {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Alertas de protección civil (SENAPRED): temprana preventiva comparte
   el tramo amarillo; roja el tramo rojo. El uppercase va en CSS para que
   el HTML conserve el texto real. */
.vol-chip--civil { text-transform: uppercase; }

.vol-chip--civil-temprana_preventiva,
.vol-chip--civil-amarilla {
    background: color-mix(in srgb, var(--lv-amarilla) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--lv-amarilla) 42%, transparent);
}

.vol-chip--civil-temprana_preventiva .vol-chip-dot,
.vol-chip--civil-amarilla .vol-chip-dot { background: var(--lv-amarilla); }

.vol-chip--civil-roja {
    background: color-mix(in srgb, var(--lv-roja) 13%, var(--surface));
    border-color: color-mix(in srgb, var(--lv-roja) 40%, transparent);
}

.vol-chip--civil-roja .vol-chip-dot { background: var(--lv-roja); }

/* ── Resumen del hero + barra de distribución ── */

.vol-resumen {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.2rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.3rem;
    margin: .4rem 0 1.4rem;
}

.vol-resumen-frase p { margin: 0 0 .6rem; font-size: 1.12rem; }

.vol-resumen-links { display: flex; flex-wrap: wrap; gap: .45rem; }

.vol-dist-barra {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.vol-dist-seg { display: block; height: 100%; }

.vol-dist-seg--verde { background: var(--lv-verde); }
.vol-dist-seg--amarilla { background: var(--lv-amarilla); }
.vol-dist-seg--naranja { background: var(--lv-naranja); }
.vol-dist-seg--roja { background: var(--lv-roja); }

.vol-dist-seg--sin {
    background: repeating-linear-gradient(45deg,
        var(--lv-sin), var(--lv-sin) 4px,
        transparent 4px, transparent 8px);
    background-color: color-mix(in srgb, var(--lv-sin) 18%, var(--surface));
}

.vol-dist-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .65rem;
    font-size: .8rem;
    color: var(--muted);
}

.vol-leyenda-item { display: inline-flex; align-items: center; gap: .35rem; }

.vol-leyenda-item strong {
    font-family: var(--font-mono);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.vol-leyenda-item--verde .vol-chip-dot { background: var(--lv-verde); }
.vol-leyenda-item--amarilla .vol-chip-dot { background: var(--lv-amarilla); }
.vol-leyenda-item--naranja .vol-chip-dot { background: var(--lv-naranja); }
.vol-leyenda-item--roja .vol-chip-dot { background: var(--lv-roja); }
.vol-leyenda-item--sin .vol-chip-dot { background: var(--lv-sin); }

/* ── Buscador con sugerencias ── */

.vol-buscador { position: relative; max-width: 560px; margin: 0 0 1.4rem; }

.vol-buscador--texto { max-width: none; margin: .4rem 0 .8rem; }

.vol-buscador input {
    width: 100%;
    padding: .6rem 2.3rem .6rem .95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    appearance: none;
}

.vol-buscador-icono {
    position: absolute;
    right: .95rem;
    top: 50%;
    translate: 0 -50%;
    color: var(--muted);
    font-size: 1.15rem;
    pointer-events: none;
}

.vol-sugerencias {
    list-style: none;
    margin: .3rem 0 0;
    padding: .3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 560px;
    position: relative;
    z-index: 20;
}

.vol-sugerencias li {
    display: flex;
    flex-direction: column;
    padding: .45rem .7rem;
    border-radius: 8px;
    cursor: pointer;
}

.vol-sugerencias li:hover,
.vol-sugerencias li.is-activa { background: var(--accent-soft); }

/* ── Tarjetas del top 3 ── */

.vol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.vol-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
}

.vol-card:hover { border-color: var(--accent); }

.vol-card-foto {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vol-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vol-card-ranking {
    position: absolute;
    top: .5rem;
    left: .5rem;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(4px);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .12rem .55rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink);
}

.vol-card-cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    flex: 1;
}

.vol-card h3 { margin: 0; font-size: 1.15rem; }

.vol-card h3 a { color: inherit; text-decoration: none; }
.vol-card h3 a:hover { color: var(--accent); }

.vol-card-lugar { margin: 0; }

.vol-pares {
    margin: .3rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
}

.vol-pares > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .85rem;
    border-top: 1px dashed var(--line);
    padding-top: .3rem;
}

.vol-pares dt { color: var(--muted); }

.vol-pares dd {
    margin: 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.vol-card-abrir {
    margin-top: auto;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}

.vol-card-abrir:hover { color: var(--accent); }

/* ── Filas compactas de "En alerta ahora" ── */

.vol-filas { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }

.vol-fila {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto auto;
    gap: .9rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .55rem .85rem;
    text-decoration: none;
    color: inherit;
}

.vol-fila:hover { border-color: var(--accent); }

.vol-fila-mini {
    width: 84px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
}

.vol-fila-mini img,
.vol-fila-mini svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.vol-fila-datos { display: flex; flex-direction: column; min-width: 0; }

.vol-fila-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
    text-align: right;
}

.vol-fila-estado .fine { max-width: 340px; }

.vol-fila-flecha { color: var(--muted); }

.vol-vacio {
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    color: var(--muted);
}

/* ── Perfil de la cordillera ── */

.vol-perfil-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .6rem .5rem .15rem;
    margin: .6rem 0 .8rem;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.vol-perfil-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vol-perfil { display: block; width: 100%; min-width: 680px; height: auto; }

.vol-perfil-zona {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--muted);
    font-family: var(--font-body);
}

.vol-perfil-sep { stroke: var(--line); stroke-dasharray: 3 4; }

.vol-perfil-guia { stroke: var(--line); stroke-dasharray: 2 5; }

.vol-perfil-base { stroke: var(--muted); stroke-width: 1.2; }

.vol-perfil-alt,
.vol-perfil-lat { font-size: 10px; fill: var(--muted); font-family: var(--font-mono); }

.vol-perfil-enlace { cursor: pointer; }

.vol-perfil-enlace:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.vol-cono { fill: var(--lv-sin); opacity: .55; stroke: var(--surface); stroke-width: .6; transition: opacity .15s ease; }

.vol-cono--verde { fill: var(--lv-verde); opacity: .6; }
.vol-cono--amarilla { fill: var(--lv-amarilla); opacity: .95; }
.vol-cono--naranja { fill: var(--lv-naranja); opacity: .95; }
.vol-cono--roja { fill: var(--lv-roja); opacity: .95; }

.vol-perfil-nieve { fill: var(--surface); opacity: .85; pointer-events: none; }

.vol-perfil-etiqueta {
    font-size: 11px;
    font-weight: 600;
    fill: var(--ink);
    font-family: var(--font-body);
    pointer-events: none;
}

.vol-perfil-enlace.is-activo .vol-cono { stroke: var(--accent); stroke-width: 2; opacity: 1; }

.vol-perfil-detalle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem 1rem;
}

.vol-perfil-detalle-datos {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-right: auto;
    min-width: 0;
}

/* ── Filtros y listado por zona ── */

.vol-filtros { margin: .6rem 0; }

.vol-filtro-conteo {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--muted);
    margin-left: .2rem;
    font-variant-numeric: tabular-nums;
}

.calc-nav a.is-active .vol-filtro-conteo {
    color: color-mix(in srgb, var(--on-accent) 80%, transparent);
}

.vol-zona { margin: 1.1rem 0; }

.vol-zona-titulo {
    font-size: .95rem;
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.vol-zona-conteo {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-variant-numeric: tabular-nums;
}

.vol-zona-filas {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.vol-reg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .85rem .5rem .95rem;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid var(--lv-sin);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
}

.vol-zona-filas .vol-reg:last-child { border-bottom: none; }

.vol-reg:hover { background: var(--surface-2); }

.vol-reg--verde { border-left-color: var(--lv-verde); }
.vol-reg--amarilla { border-left-color: var(--lv-amarilla); }
.vol-reg--naranja { border-left-color: var(--lv-naranja); }
.vol-reg--roja { border-left-color: var(--lv-roja); }
.vol-reg--sin { border-left-color: var(--lv-sin); }

.vol-reg-datos { display: flex; flex-direction: column; min-width: 0; }

/* ── Cabeceras de sección (título + nota a la derecha) ── */

.vol-seccion-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .2rem 1rem;
    margin-top: 2rem;
}

.vol-seccion-cabecera h2 { margin: 0; }

.vol-seccion-cabecera .fine { margin: 0; }

section[id] { scroll-margin-top: 7.5rem; }

/* ── Ficha: hero, subnav, dos columnas ── */

.vol-ficha-hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.4rem;
    align-items: start;
}

.vol-ficha-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .55rem;
    align-items: center;
    color: var(--muted);
    font-size: .92rem;
}

.vol-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.vol-ficha-foto {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.vol-ficha-foto img { width: 100%; height: auto; display: block; }

.vol-ficha-foto .fine { padding: .35rem .6rem; margin: 0; }

.vol-subnav {
    position: sticky;
    top: 3.8rem;
    z-index: 30;
    display: flex;
    gap: .25rem 1.1rem;
    overflow-x: auto;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem .9rem;
    margin: 1rem 0;
    scrollbar-width: thin;
}

.vol-subnav a {
    font-size: .85rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.vol-subnav a:hover { color: var(--accent); }

.vol-dos-col {
    display: grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 1rem;
    align-items: stretch;
    margin: 1rem 0;
}

.vol-tarjeta-alerta,
.vol-tarjeta-civil {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem;
}

.vol-tarjeta-alerta { border-top: 4px solid var(--lv-sin); }

.vol-tarjeta-alerta--verde { border-top-color: var(--lv-verde); }
.vol-tarjeta-alerta--amarilla { border-top-color: var(--lv-amarilla); }
.vol-tarjeta-alerta--naranja { border-top-color: var(--lv-naranja); }
.vol-tarjeta-alerta--roja { border-top-color: var(--lv-roja); }

.vol-etiqueta {
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--muted);
    margin: 0 0 .3rem;
    font-family: var(--font-mono);
}

.vol-alerta-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.vol-alerta-cabecera h2 { margin: 0; font-size: 2rem; }

.vol-alerta-desde { margin: .25rem 0 .8rem; font-size: .9rem; color: var(--muted); }

.vol-medidor {
    display: flex;
    gap: 4px;
    margin: .4rem 0 .3rem;
}

.vol-medidor-seg {
    height: 8px;
    flex: 1;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.vol-medidor-seg.is-activo { background: var(--lv-sin); border-color: transparent; }

.vol-tarjeta-alerta--verde .vol-medidor-seg.is-activo { background: var(--lv-verde); }
.vol-tarjeta-alerta--amarilla .vol-medidor-seg.is-activo { background: var(--lv-amarilla); }
.vol-tarjeta-alerta--naranja .vol-medidor-seg.is-activo { background: var(--lv-naranja); }
.vol-tarjeta-alerta--roja .vol-medidor-seg.is-activo { background: var(--lv-roja); }

.vol-medidor-labels {
    display: flex;
    justify-content: space-between;
    font-size: .66rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .9rem;
}

.vol-medidor-labels .is-activo { color: var(--ink); font-weight: 600; }

.vol-significado {
    border-top: 1px dashed var(--line);
    padding-top: .7rem;
    font-size: .92rem;
}

.vol-restriccion {
    margin: .7rem 0 0;
    font-size: .88rem;
    background: var(--surface-2);
    border-radius: 8px;
    padding: .55rem .75rem;
}

.vol-restriccion .vol-etiqueta { display: block; }

.vol-tarjeta-civil h3 { margin: .1rem 0 .6rem; font-size: 1.05rem; }

.vol-civil-vacia {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: .06em;
    background: var(--surface-2);
    border-radius: 999px;
    padding: .2rem .7rem;
    margin: 0 0 .5rem;
}

.vol-civil-lista { margin: 0; }

.vol-civil-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--line);
}

.vol-civil-item:last-child { border-bottom: none; }

.vol-civil-item dt { font-weight: 600; }
.vol-civil-item dd { margin: 0; }

/* ── Texto oficial (blockquote) ── */

.vol-quote {
    margin: .8rem 0 0;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--muted);
    border-radius: var(--radius);
    font-size: .95rem;
}

.vol-quote p { margin: 0 0 .5rem; }

.vol-quote footer { margin: 0; }

/* ── Reportes RAV/REAV ── */

.vol-reportes { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }

.vol-reporte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .9rem;
}

.vol-reporte-tipo {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
    border-radius: 6px;
    padding: .2rem .45rem;
    margin-top: .1rem;
}

.vol-reporte-tipo--reav {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: var(--accent-soft);
}

.vol-reporte-datos { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.vol-reporte-datos a { font-weight: 600; }

.vol-reporte-extracto {
    margin: .35rem 0 0;
    font-size: .88rem;
    background: var(--surface-2);
    border-radius: 8px;
    padding: .5rem .7rem;
}

.vol-reporte-pdf {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    margin-top: .1rem;
}

/* ── Historial vertical ── */

.vol-historial { list-style: none; margin: .8rem 0; padding: 0; }

.vol-historial li {
    position: relative;
    padding: 0 0 1.1rem 1.5rem;
    border-left: 2px solid var(--line);
    margin-left: .45rem;
}

.vol-historial li:last-child { border-left-color: transparent; padding-bottom: .2rem; }

.vol-h-punto {
    position: absolute;
    left: -8px;
    top: .2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--muted);
    border: 2px solid var(--surface);
}

.vol-h--verde .vol-h-punto { background: var(--lv-verde); }
.vol-h--amarilla .vol-h-punto { background: var(--lv-amarilla); }
.vol-h--naranja .vol-h-punto { background: var(--lv-naranja); }
.vol-h--roja .vol-h-punto { background: var(--lv-roja); }

.vol-h-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.vol-h-cabecera strong { font-family: var(--font-mono); }

.vol-historial li p { margin: .25rem 0 0; }

/* ── Sismos: radar + tabla ── */

.vol-sismos {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
}

.vol-sismos-radar { width: 100%; max-width: 220px; }

.vol-radar { width: 100%; height: auto; display: block; }

.vol-radar-anillo { fill: none; stroke: var(--line); }
.vol-radar-anillo--borde { stroke: var(--muted); }

.vol-radar-eje { stroke: var(--line); stroke-dasharray: 2 4; }

.vol-radar-km { font-size: 8px; fill: var(--muted); font-family: var(--font-mono); }

.vol-radar-norte { font-size: 9px; fill: var(--muted); font-weight: 600; }

.vol-radar-punto { fill: var(--accent); stroke: var(--surface); stroke-width: 1; }

.vol-radar-volcan { fill: var(--ink); }

.vol-sismos-datos h3 { margin: 0 0 .4rem; font-size: 1.05rem; }

/* ── Datos en grilla de fichas (dl) ── */

.vol-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem;
    margin: 1rem 0;
}

.vol-datos > div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .8rem;
}

.vol-datos dt {
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-family: var(--font-mono);
    margin-bottom: .2rem;
}

.vol-datos dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }

/* ── Fotos ── */

.vol-grid-galeria { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.vol-figura { margin: 0; }

.vol-figura img { border-radius: 8px; width: 100%; height: auto; display: block; }

.vol-fotos-vacias {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    max-width: 460px;
}

.vol-fotos-vacias svg { border-radius: 8px; }

/* ── Ilustración de fallback (cono por altura, tokens de tema) ── */

.vol-ilustracion { width: 100%; height: 100%; display: block; }

.vol-il-cielo { fill: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }

.vol-il-suelo { fill: color-mix(in srgb, var(--muted) 30%, var(--surface-2)); }

.vol-il-cono { fill: color-mix(in srgb, var(--muted) 62%, var(--surface)); }

.vol-il-nieve { fill: var(--surface); opacity: .9; }

/* ── Qué significa cada nivel ── */

.vol-niveles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .8rem;
    margin: 1rem 0;
}

.vol-nivel-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-top: 4px solid var(--lv-sin);
    padding: .9rem 1rem;
}

.vol-nivel-card--verde { border-top-color: var(--lv-verde); }
.vol-nivel-card--amarilla { border-top-color: var(--lv-amarilla); }
.vol-nivel-card--naranja { border-top-color: var(--lv-naranja); }
.vol-nivel-card--roja { border-top-color: var(--lv-roja); }

.vol-nivel-card h3 { margin: 0 0 .3rem; font-size: 1rem; }

.vol-nivel-card p { margin: 0; font-size: .88rem; color: var(--muted); }

.vol-tabla { margin: 1rem 0; }

/* ── Qué hacer + tarjeta de feed ── */

.vol-hacer {
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: 1.2rem;
    align-items: start;
    margin-top: .6rem;
}

/* Los items de grilla pueden encoger: el code del feed lleva su propio
   scroll interno y no empuja el ancho del body (regla: sin scroll
   horizontal de página). */
.vol-ficha-hero > *,
.vol-dos-col > *,
.vol-hacer > *,
.vol-sismos > * { min-width: 0; }

.vol-feed-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

.vol-feed-card h3 { margin: 0 0 .2rem; font-size: 1rem; }

.vol-feed-linea {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: .5rem 0;
    flex-wrap: wrap;
}

.vol-feed-linea code {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .45rem .6rem;
    font-family: var(--font-mono);
    font-size: .78rem;
}

.vol-afiliado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    justify-content: space-between;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin: 1.2rem 0;
}

.vol-boton {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: .45rem 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: .9rem;
}

.vol-boton:hover { background: var(--accent-strong); }

@media (max-width: 760px) {
    .vol-resumen { grid-template-columns: 1fr; }
    .vol-ficha-hero { grid-template-columns: 1fr; }
    .vol-dos-col { grid-template-columns: 1fr; }
    .vol-sismos { grid-template-columns: 1fr; }
    .vol-sismos-radar { max-width: 220px; }
    .vol-hacer { grid-template-columns: 1fr; }

    .vol-fila { grid-template-columns: 64px minmax(0, 1fr); }

    .vol-fila-mini { width: 64px; }

    .vol-fila-estado {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        text-align: left;
    }

    .vol-fila-flecha { display: none; }

    .vol-subnav { top: calc(4.9rem + env(safe-area-inset-top, 0px)); }
}

/* Botones disfrazados de enlace (ej: "copiar link del feed" en volcanes). */
button.calc-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ============================================================
   Revisión técnica (.rt-*) — rediseño según claude/revision-
   tecnica-rediseno.md: placa, veredicto con barra, grilla del
   año, paneles del día. Solo tokens del sitio; la placa queda
   blanca también en oscuro (colores fijos AA).
   ============================================================ */

.rt-migas {
    display: flex;
    gap: .45rem;
    font-size: .82rem;
    color: var(--muted);
    margin: .4rem 0 .2rem;
}

.rt-migas a { color: var(--muted); }
.rt-migas a:hover { color: var(--accent); }

.rt-hero { margin-bottom: 1rem; }
.rt-hero p { margin: .35rem 0 0; }

.rt-frescura {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--muted);
}

.rt-punto {
    border-radius: 999px;
    flex: 0 0 auto;
    height: .5rem;
    width: .5rem;
}

.rt-punto--ok { background: var(--ok); }
.rt-punto--alerta { background: var(--warn); }

/* Tarjeta de consulta: 5/7, apila bajo 820 px */
.rt-consulta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 5fr 7fr;
    margin: 1rem 0 1.6rem;
    overflow: hidden;
}

.rt-panel { padding: 1.3rem 1.4rem; min-width: 0; }
.rt-panel--patente { background: var(--surface-2); border-right: 1px solid var(--line); }

.rt-panel-titulo { font-size: 1.15rem; margin: 0 0 .9rem; }

.rt-etiqueta {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .4rem;
}

/* Placa: blanca también en oscuro, borde oscuro, mono grande */
.rt-placa {
    background: #ffffff;
    border: 3px solid #0e1330;
    border-radius: 12px;
    padding: .55rem .8rem .45rem;
    text-align: center;
}

.rt-placa input {
    background: transparent;
    border: none;
    color: #0e1330;
    font-family: var(--font-mono);
    font-size: clamp(1.7rem, 6vw, 2.4rem);
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.15;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.rt-placa input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.rt-placa-chile {
    color: #3a4152;
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .5em;
    margin-right: -.5em; /* compensa el letter-spacing para centrar de verdad */
}

.rt-ayuda { color: var(--muted); font-size: .8rem; margin: .5rem 0 0; }
.rt-ayuda code {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: .74rem;
    padding: .05rem .3rem;
}

.rt-digitos { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }

.rt-digito-btn {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    min-width: 2.5rem;
    padding: .5rem .3rem;
}

.rt-digito-btn:hover { border-color: var(--accent); }

.rt-digito-btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #fff);
}

/* Veredicto */
.rt-vacio {
    background: var(--surface-2);
    border-radius: var(--radius);
    color: var(--muted);
    padding: 1.4rem 1.3rem;
}
.rt-vacio p { margin: .2rem 0; }

.rt-badge-linea { margin: 0 0 .3rem; }

.rt-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    padding: .18rem .75rem;
}

.rt-badge--toca { background: var(--accent); color: var(--on-accent, #fff); }
.rt-badge--proximo { background: var(--accent-soft); color: var(--accent-strong); }
.rt-badge--paso { background: var(--warn-bg); color: var(--warn); }

.rt-mes-hero {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 3.9rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
}

.rt-chip-digito {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    padding: .12rem .5rem;
    vertical-align: middle;
}

.rt-cuenta { font-size: 1.05rem; margin: .55rem 0 0; }
.rt-cuenta strong { color: var(--accent); }

.rt-barra {
    background: var(--surface-2);
    border-radius: 999px;
    height: .4rem;
    margin-top: .8rem;
    overflow: hidden;
}

.rt-barra-fill {
    background: var(--accent);
    border-radius: 999px;
    height: 100%;
    transition: width .35s ease;
}

.rt-barra-extremos {
    color: var(--muted);
    display: flex;
    font-family: var(--font-mono);
    font-size: .72rem;
    justify-content: space-between;
    margin: .3rem 0 0;
}

.rt-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.rt-boton {
    background: var(--accent);
    border-radius: 999px;
    color: var(--on-accent, #fff);
    font-weight: 600;
    padding: .55rem 1.15rem;
    text-decoration: none;
}

.rt-boton:hover { background: var(--accent-strong); color: var(--on-accent, #fff); }

.rt-boton--suave {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
}

.rt-boton--suave:hover { background: transparent; border-color: var(--accent); color: var(--accent-strong); }

.rt-advertencia {
    background: var(--warn-bg);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius);
    font-size: .9rem;
    margin: 1rem 0 0;
    padding: .75rem .95rem;
}

/* Grilla del año: 12 casillas, 6/4/3 columnas */
.rt-anio-cabecera {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.2rem;
    justify-content: space-between;
}

.rt-anio-cabecera h2 { margin: 1.6rem 0 .6rem; }

.rt-leyenda {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    gap: .3rem 1rem;
    list-style: none;
    margin: 1.6rem 0 .6rem;
    padding: 0;
}

.rt-leyenda li { align-items: center; display: flex; gap: .35rem; }

.rt-leyenda-muestra {
    border-radius: 4px;
    display: inline-block;
    height: .8rem;
    width: .8rem;
}

.rt-leyenda-muestra--tu { background: var(--accent); }
.rt-leyenda-muestra--hoy { background: var(--surface); border: 2px solid var(--ink); }
.rt-leyenda-muestra--libre {
    background: repeating-linear-gradient(45deg, transparent 0 4px, var(--line) 4px 7px);
    border: 1px solid var(--line);
}

.rt-anio {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rt-mes {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    padding: .55rem .6rem;
    position: relative;
}

.rt-mes.past { opacity: .55; }
.rt-mes.today { border: 2px solid var(--ink); }

.rt-mes-boton {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: .1rem;
    min-width: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.rt-mes-abrev {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.rt-mes-digito {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
}

.rt-mes-sub { color: var(--muted); font-size: .66rem; line-height: 1.35; }

.rt-mes-hoy {
    background: var(--surface-2);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: .06rem .45rem;
    position: absolute;
    right: .45rem;
    text-transform: uppercase;
    top: .4rem;
}

.rt-mes.you { background: var(--accent); border-color: var(--accent); }
.rt-mes.you .rt-mes-abrev { color: var(--on-accent, #fff); opacity: .85; }
.rt-mes.you .rt-mes-digito { color: var(--on-accent, #fff); }
.rt-mes.you .rt-mes-sub { color: var(--on-accent, #fff); opacity: .85; }
.rt-mes.you .rt-mes-hoy { background: var(--accent-strong); color: var(--on-accent, #fff); }

.rt-mes--libre {
    background:
        repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--muted) 14%, transparent) 6px 11px);
    justify-content: center;
}

.rt-mes--libre .rt-mes-abrev { color: var(--muted); }
.rt-mes--libre .rt-mes-libre {
    font-weight: 700;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.rt-mes--libre .rt-mes-sub { color: var(--muted); }

.rt-anio-nota { color: var(--muted); font-size: .8rem; margin: .6rem 0 0; }

/* El día de la revisión */
.rt-paneles {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .6rem;
}

.rt-paneles h3 { font-size: 1.05rem; margin: 0; }
.rt-panel-bajada { color: var(--muted); font-size: .85rem; margin: .15rem 0 .8rem; }

.rt-checklist { list-style: none; margin: 0; padding: 0; }

.rt-checklist li { border-bottom: 1px solid var(--line); }
.rt-checklist li:last-child { border-bottom: none; }

.rt-checklist label {
    cursor: pointer;
    display: flex;
    gap: .65rem;
    padding: .5rem 0;
}

.rt-check { accent-color: var(--accent); flex: 0 0 auto; height: 1.05rem; margin-top: .2rem; width: 1.05rem; }

.rt-checklist small { color: var(--muted); display: block; font-size: .8rem; }

.rt-contador {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .8rem;
    margin: .6rem 0 0;
}

.rt-planta {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rt-planta > div {
    background: var(--surface-2);
    border-radius: 8px;
    min-width: 0;
    padding: .55rem .7rem;
}

.rt-planta strong { display: block; font-size: .9rem; }
.rt-planta span { color: var(--muted); font-size: .78rem; }

.rt-planta-enlace {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-top: .7rem;
    padding: .55rem .8rem;
    text-decoration: none;
}

.rt-planta-enlace:hover { border-color: var(--accent); color: var(--accent-strong); }

/* Aviso semestral: excepción importante, familia ámbar "ojo" */
.rt-semestral {
    align-items: flex-start;
    background: var(--warn-bg);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius);
    display: flex;
    gap: .8rem;
    margin: 0 0 1.6rem;
    padding: 1rem 1.1rem;
}

.rt-semestral p { font-size: .92rem; margin: 0; }
.rt-semestral-titulo { margin: 0 0 .15rem; }
.rt-semestral-chip {
    background: var(--surface);
    border: 1px solid var(--warn);
    border-radius: 8px;
    color: var(--warn);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-weight: 600;
    padding: .15rem .45rem;
}

/* Relacionado + cierre */
.rt-relacionado { margin-top: 1.8rem; }

.rt-relacionado-titulo {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}

.rt-relacionado ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.rt-relacionado a {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-block;
    font-size: .9rem;
    padding: .45rem .95rem;
    text-decoration: none;
}

.rt-relacionado a:hover { border-color: var(--accent); color: var(--accent-strong); }

.rt-cierre {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.5rem;
    justify-content: space-between;
    margin-top: 1.8rem;
    padding-top: 1.1rem;
}

.rt-cierre p { margin: 0; max-width: 46rem; }

@media (max-width: 1000px) {
    .rt-anio { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .rt-consulta { grid-template-columns: 1fr; }
    .rt-panel--patente { border-bottom: 1px solid var(--line); border-right: none; }
    .rt-paneles { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .rt-anio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rt-panel { padding: 1.1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-barra-fill { transition: none; }
}

/* ============================================================
   Clima — tarjeta "¿Necesitas bloqueador?" (.cl-*)
   Vive en la grilla aire-ficha (reemplazó a "UV de hoy").
   Veredicto por bandas OMS con el uv_index horario de
   Open-Meteo. Solo tokens del sitio.
   ============================================================ */

.cl-bloqueador { min-width: 0; }

.cl-bloqueador-veredicto {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    margin: .2rem 0 0;
}

.cl-bloqueador-veredicto--no { color: var(--ok); }
.cl-bloqueador-veredicto--recomendado { color: var(--warn); }
.cl-bloqueador-veredicto--si { color: var(--bad); }

.cl-bloqueador-banda {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 500;
    margin-left: .4rem;
    vertical-align: .25em;
}

.cl-bloqueador-resumen { margin: .4rem 0 0; }

.cl-bloqueador-spf { margin: .5rem 0 0; }

.cl-afiliado {
    border-top: 1px solid var(--line);
    margin-top: .9rem;
    padding-top: .8rem;
}

.cl-afiliado a { font-weight: 600; text-decoration: none; }
.cl-afiliado a:hover { color: var(--accent-strong); }

/* ============================================================
   Feriados — diseño "Feriados en Chile {año}": tarjeta de próximo
   feriado (auto/1fr/15rem), minicalendarios del año y lista por
   mes. Reusa componentes rt-* (paneles, leyendas, cierre).
   ============================================================ */

.fd-proximo {
    display: grid;
    grid-template-columns: auto 1fr 15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 1.2rem 0 1.6rem;
    overflow: hidden;
}

.fd-proximo-dias {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    background: var(--accent);
    color: var(--on-accent, #fff);
    padding: 1.4rem 1.6rem;
    min-width: 11rem;
}

.fd-proximo-num {
    font-family: var(--font-mono);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fd-proximo-unidad { font-size: .85rem; opacity: .9; text-transform: uppercase; letter-spacing: .08em; }

.fd-proximo-hoy { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; line-height: 1.15; }

.fd-proximo-principal { padding: 1.3rem 1.4rem; min-width: 0; }

.fd-eyebrow {
    margin: 0 0 .25rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
}

.fd-proximo-principal h2 { margin: 0 0 .3rem; font-size: 1.7rem; line-height: 1.15; }

.fd-proximo-fecha { margin: 0 0 .7rem; color: var(--muted); }

.fd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }

.fd-chip {
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .74rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--muted);
}

.fd-chip--ok { background: var(--ok-bg); color: var(--ok); }
.fd-chip--irr { background: var(--warn-bg); color: var(--warn); }
.fd-chip--alerta { background: var(--warn-bg); color: var(--warn); }

.fd-proximo-datos {
    padding: 1.3rem 1.2rem;
    border-left: 1px solid var(--line);
    background: var(--surface-2);
    font-size: .88rem;
}

.fd-proximo-datos p { margin: 0 0 .55rem; }
.fd-proximo-datos strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.fd-acciones { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; margin-top: .8rem; }

.fd-enlace { font-size: .84rem; color: var(--accent); }

/* Minicalendarios del año (renderizados en el servidor). */
.fd-minicales {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin: .9rem 0 0;
}

.fd-mini {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .8rem;
}

.fd-mini--actual { border-color: var(--ink); border-width: 2px; padding: .6rem .7rem; }

.fd-mini-mes { margin: 0 0 .4rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.fd-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
    font-family: var(--font-mono);
    font-size: .66rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fd-mini-cab { color: var(--muted); font-size: .56rem; }

.fd-mini-dia { line-height: 1.5; border-radius: 4px; }

.fd-mini-we { color: var(--muted); }

.fd-mini-hol { background: var(--accent); color: var(--on-accent, #fff); font-weight: 600; }

.fd-mini-irr { background: var(--warn); color: var(--on-accent, #fff); font-weight: 600; }

.fd-mini-today { outline: 2px solid var(--ink); outline-offset: -1px; }

/* Lista agrupada por mes. */
.fd-toggle { display: flex; gap: .3rem; }

.fd-toggle-btn {
    border-radius: 999px;
    padding: .25rem .8rem;
    font-size: .8rem;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--font-body);
}

.fd-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

.fd-toggle-btn[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #fff);
}

.fd-grupo-mes { margin: 1.1rem 0; }

.fd-grupo-titulo {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 0 0 .4rem;
}

.fd-fila {
    display: grid;
    grid-template-columns: 3.4rem 1fr auto;
    gap: .3rem 1rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: .5rem;
}

.fd-fila--pasada { opacity: .55; }

.fd-fila--proximo { background: var(--accent-soft); border-color: var(--accent); }

.fd-fila-fecha { display: flex; flex-direction: column; align-items: center; }

.fd-fila-dia {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fd-fila-mes { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.fd-fila-nombre h4 { margin: 0; font-size: 1rem; line-height: 1.25; }

.fd-nota { margin: .1rem 0 0; font-size: .74rem; color: var(--muted); }

.fd-fila-dia-semana { margin: .1rem 0 0; font-size: .74rem; color: var(--muted); }

.fd-ya-paso { text-transform: uppercase; font-size: .66rem; letter-spacing: .06em; }

.fd-chips--fila { justify-content: end; }

@media (max-width: 860px) {
    .fd-proximo { grid-template-columns: auto 1fr; }
    .fd-proximo-datos { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
    .fd-minicales { grid-template-columns: repeat(3, 1fr); }
    .fd-fila { grid-template-columns: 3rem 1fr; }
    .fd-chips--fila { grid-column: 1 / -1; justify-content: start; }
}

@media (max-width: 480px) {
    .fd-minicales { grid-template-columns: repeat(2, 1fr); }
    .fd-proximo { grid-template-columns: 1fr; }
    .fd-proximo-dias {
        flex-direction: row;
        gap: .5rem;
        padding: .9rem 1.2rem;
        min-width: 0;
        align-items: baseline;
    }
    .fd-proximo-num { font-size: 44px; }
    .fd-proximo-principal h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
}

/* Checklist estático (sin checkboxes): misma estructura visual. */
.rt-checklist--estatica li { padding: .5rem 0; }

/* ============================================================
   Calculadora UF ↔ pesos (.uf-*) — rediseño según
   uf-calculadora-rediseno.html: conversor en vivo de dos celdas
   con botón de intercambio, fecha segmentada, fórmula visible,
   tarjeta "tu monto en el tiempo" y lateral con sparkline.
   Solo tokens del sitio; sin JS el form por GET sigue funcionando.
   ============================================================ */

.uf-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem 1.5rem;
}

.uf-hero { margin: .5rem 0 0; }
.uf-hero p { margin: .35rem 0 0; color: var(--muted); }
.uf-cabecera .calc-nav { margin: 0 0 .2rem; }

.uf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
    margin: 1.1rem 0 1.4rem;
}

/* El input del conversor tiene un min-content grande: sin esto,
   los ítems desbordan la columna en pantallas angostas. */
.uf-grid > * { min-width: 0; }

/* Conversor: dos celdas apiladas; la salida con fondo alterno */
.uf-conv {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin: 0;
}

.uf-celda { position: relative; padding: 1.3rem 1.5rem 1.15rem; min-width: 0; }

.uf-celda--salida {
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

.uf-celda:focus-within { box-shadow: inset 3px 0 0 var(--accent); }

.uf-celda-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.uf-etiqueta {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.uf-unidad {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
}

.uf-unidad--salida { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

.uf-monto { display: flex; align-items: baseline; gap: .5rem; }

.uf-pre {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    color: var(--muted);
}

.uf-monto input,
.uf-monto output {
    flex: 1 1 0;
    width: 0; /* el ancho intrínseco del input no debe inflar la grilla */
    min-width: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: clamp(2.1rem, 7vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.uf-monto input {
    background: none;
    border: 0;
    outline: 0;
    padding: 0;
    color: var(--ink);
}

.uf-monto input::placeholder { color: var(--muted); opacity: .5; }

.uf-palabras { min-height: 1.15rem; margin: .15rem 0 0; font-size: .82rem; color: var(--muted); }

.uf-rapidos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }

.uf-rapidos button {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: .3rem .7rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
}

.uf-rapidos button:hover { border-color: var(--accent); color: var(--accent); }

.uf-swap {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 2;
}

.uf-swap svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.uf-swap:hover { border-color: var(--accent); color: var(--accent); }
.uf-swap--girado svg { transform: rotate(180deg); }

.uf-acciones { margin-top: .7rem; }

.uf-copiar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 8px;
    padding: .32rem .65rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}

.uf-copiar:hover { border-color: var(--accent); color: var(--accent); }

/* Barra de fecha + fórmula visible */
.uf-fecha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--line);
}

.uf-seg {
    display: flex;
    gap: .15rem;
    padding: .2rem;
    background: var(--surface-2);
    border-radius: 9px;
}

.uf-seg button {
    border: 0;
    background: none;
    padding: .38rem .7rem;
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
}

.uf-seg button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(14, 19, 48, .12);
}

.uf-fecha-input {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 8px;
    padding: .32rem .55rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 500;
}

.uf-fecha-input[hidden] { display: none; }

.uf-usada {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
}

.uf-usada b { color: var(--ink); font-weight: 600; }

.uf-formula {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .4rem 1rem;
    padding: .75rem 1.5rem;
    border-top: 1px dashed var(--line);
    font-size: .8rem;
    color: var(--muted);
}

#uf-formula-texto { font-family: var(--font-mono); color: var(--ink); }

/* Tarjeta "Tu monto en el tiempo" */
.uf-tiempo {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
    margin-top: 1.25rem;
}

.uf-tiempo h2 { margin: 0; font-size: 1.05rem; }

.uf-tiempo-lead { margin: .35rem 0 0; font-size: .88rem; color: var(--muted); }
.uf-tiempo-lead strong { color: var(--ink); }

.uf-delta { color: var(--ok); font-family: var(--font-mono); font-weight: 600; font-size: .8rem; }
.uf-delta--menos { color: var(--warn); }

.uf-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: .6rem;
    align-items: end;
    height: 150px;
    margin-top: 1.1rem;
}

.uf-bars[hidden] { display: none; }

.uf-bar {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .35rem;
    min-width: 0;
}

/* Alturas fijas para valor y etiqueta: la pista del medio queda igual
   en todas las columnas, así las barras comparten escala y línea de base. */
.uf-bar-valor {
    height: 1.1rem;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.uf-bar--ahora .uf-bar-valor { color: var(--accent); }

.uf-bar-pista { position: relative; flex: 1; min-height: 0; }

.uf-bar-pista i {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    border-radius: 6px 6px 2px 2px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    transition: height .5s cubic-bezier(.2, .8, .2, 1);
}

.uf-bar--ahora .uf-bar-pista i { background: var(--accent); border-color: var(--accent); }

.uf-bar-etiqueta {
    height: 2.1rem;
    font-size: .75rem;
    line-height: 1.2;
    color: var(--muted);
}

/* Lateral: UF de hoy + sparkline, últimos valores */
.uf-side { display: grid; gap: .9rem; }

.uf-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.35rem;
}

.uf-panel h2 { margin: 0; font-size: 1.05rem; }

.uf-panel-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

.uf-fresca {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ok);
}

.uf-punto { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

.uf-punto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ok);
    animation: uf-pulso 2s infinite;
}

@keyframes uf-pulso {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(2.6); opacity: 0; }
}

.uf-grande {
    margin: .5rem 0 .1rem;
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.uf-meta { margin: 0; font-size: .8rem; color: var(--muted); }

.uf-spark { display: block; width: 100%; height: 64px; margin-top: .9rem; }

.uf-spark-ejes {
    display: flex;
    justify-content: space-between;
    margin-top: .25rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    color: var(--muted);
}

.uf-nota { margin: .35rem 0 0; font-size: .8rem; color: var(--muted); }

.uf-lista { list-style: none; margin: .6rem 0 0; padding: 0; }

.uf-lista li {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .5rem 0;
    border-top: 1px solid var(--line);
    font-size: .85rem;
}

.uf-lista li:first-child { border-top: 0; }
.uf-lista li span:first-child { color: var(--muted); }

.uf-lista-valor {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Respaldo sin JS: select + botón Convertir dentro del form */
.uf-noscript {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .8rem;
    padding: .9rem 1.5rem;
    border-top: 1px solid var(--line);
}

.uf-noscript-campo { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; }

.uf-noscript-campo select {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 8px;
    padding: .45rem .6rem;
    font: inherit;
    font-weight: 400;
}

.uf-enviar {
    display: none; /* sin JS se muestra vía <noscript><style> */
    align-items: center;
    border: 0;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 9px;
    padding: .5rem 1.1rem;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}

.uf-enviar:hover { background: var(--accent-strong); }

@media (max-width: 880px) {
    .uf-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .uf-celda { padding: 1.1rem 1.1rem 1rem; }
    .uf-fecha, .uf-formula, .uf-noscript { padding-left: 1.1rem; padding-right: 1.1rem; }
    .uf-usada { margin-left: 0; }
    .uf-bar-valor { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .uf-punto::after { animation: none; }
    .uf-swap svg, .uf-bar i { transition: none; }
}