:root {
    color-scheme: light;
    --bg: #f3f5f7;
    --panel: #ffffff;
    --text: #17202a;
    --muted: #647180;
    --line: #dfe4e9;
    --accent: #b42318;
    --accent-dark: #84160f;
    --accent-soft: #fff0ee;
    --blue: #1769aa;
    --blue-dark: #0f4e80;
    --shadow: 0 10px 30px rgba(20, 33, 48, .08);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
button, input, textarea, select { font: inherit; }
.container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.wide-container { width: min(1660px, calc(100% - 32px)); margin-inline: auto; }

.site-header {
    padding: 54px 0 48px;
    color: white;
    background:
        linear-gradient(135deg, rgba(92, 15, 9, .95), rgba(180, 35, 24, .88)),
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 45%);
}
.site-header h1 { margin: 4px 0 10px; max-width: 850px; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.05; }
.eyebrow, .section-kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.intro { margin: 0; max-width: 760px; color: rgba(255,255,255,.9); font-size: 1.08rem; }
.intro a { color: white; }

.main-grid, .admin-main { display: grid; gap: 24px; padding-block: 28px 56px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.main-column { display: grid; gap: 24px; min-width: 0; }
.weather-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.notice {
    padding: 16px 18px;
    border: 1px solid #efc7c2;
    border-left: 5px solid var(--accent);
    border-radius: 12px;
    background: var(--accent-soft);
}
.panel {
    padding: clamp(20px, 4vw, 34px);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.section-heading { margin-bottom: 22px; }
.section-heading h2 { margin: 4px 0 6px; font-size: clamp(1.45rem, 3vw, 2rem); }
.section-heading p { margin: 0; color: var(--muted); max-width: 790px; }
.section-kicker { color: var(--accent); }
.with-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.weather-card { min-width: 0; }
.weather-heading { align-items: flex-start; flex-direction: column; }
.weather-heading h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.weather-heading p { max-width: 520px; }

.map-switcher { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: #eef1f4; }
.map-button { border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; background: transparent; color: var(--muted); font-weight: 700; }
.map-button.active { background: var(--panel); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.map-frame { overflow: hidden; width: 100%; height: var(--map-height-desktop, 420px); min-height: 0; border: 1px solid var(--line); border-radius: 14px; background: #dfe8ef; }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 15px; }
.map-footer p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 700px; }
.compact-footer { align-items: flex-start; }
.compact-footer p { max-width: 440px; }


.timeline { position: relative; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 10px; top: 13px; bottom: 13px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-left: 34px; }
.timeline-marker { position: absolute; z-index: 2; left: 3px; top: 22px; width: 16px; height: 16px; border: 4px solid var(--panel); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line); }
details { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
details[open] { border-color: #d0d7df; box-shadow: 0 6px 18px rgba(20,33,48,.06); }
summary { display: grid; gap: 5px; padding: 18px 20px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 18px; margin-top: 12px; color: var(--muted); font-size: 1.5rem; }
details[open] summary::after { content: "−"; }
.event-date { color: var(--accent); font-size: .85rem; font-weight: 800; }
.event-title { padding-right: 32px; font-size: 1.1rem; font-weight: 800; }
.event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .86rem; }
.tag { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: .74rem; font-weight: 800; text-transform: uppercase; }


/* Colores automáticos para las categorías de la cronología */
.timeline-item {
    --category-color: var(--accent);
    --category-bg: var(--accent-soft);
    --category-text: var(--accent-dark);
}
.timeline-item .timeline-marker {
    background: var(--category-color);
}
.timeline-item .tag {
    background: var(--category-bg);
    color: var(--category-text);
    border: 1px solid color-mix(in srgb, var(--category-color) 22%, transparent);
}
.category-comunicado { --category-color: #b42318; --category-bg: #fff0ee; --category-text: #84160f; }
.category-entrevista { --category-color: #6d3bb5; --category-bg: #f3edff; --category-text: #4f258e; }
.category-enlace { --category-color: #1769aa; --category-bg: #eaf4fc; --category-text: #0f4e80; }
.category-prensa { --category-color: #007d8a; --category-bg: #e7f7f8; --category-text: #075e68; }
.category-aviso { --category-color: #c76a00; --category-bg: #fff4df; --category-text: #8a4700; }
.category-actualizacion { --category-color: #087f5b; --category-bg: #e8f8f2; --category-text: #056044; }
.category-emergencia { --category-color: #d01818; --category-bg: #ffeaea; --category-text: #970d0d; }
.category-video { --category-color: #a02d70; --category-bg: #fbeaf4; --category-text: #762052; }
.category-ayuda { --category-color: #3f7d20; --category-bg: #eef8e9; --category-text: #2d5b16; }
.category-servicios { --category-color: #5969b0; --category-bg: #eef0fb; --category-text: #3b4782; }
.category-mapa { --category-color: #4e7180; --category-bg: #edf4f6; --category-text: #36515d; }
.category-otros { --category-color: #6d7782; --category-bg: #f0f2f4; --category-text: #48515a; }

.event-content { padding: 0 20px 20px; border-top: 1px solid var(--line); }
.event-description { padding: 18px 0; }
.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.text-link { font-weight: 700; }

.attachment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.attachment { display: flex; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
.attachment:hover { border-color: #b9c3ce; background: #f8fafb; color: var(--text); }
.attachment-icon { font-size: 1.45rem; }
.attachment span:last-child { display: grid; }
.attachment small { color: var(--muted); }

.event-video-list { display: grid; gap: 16px; margin-top: 16px; }
.event-video { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #0e1115; }
.event-video-player { display: block; width: 100%; max-height: 680px; background: #000; object-fit: contain; }
.event-video figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #fff; }
.event-video figcaption > span { display: grid; min-width: 0; }
.event-video figcaption strong { overflow-wrap: anywhere; }
.event-video figcaption small { color: var(--muted); }
.event-video figcaption a { flex: 0 0 auto; font-weight: 800; }
.upload-limit-warning { display: block; margin-top: 7px; color: #9a3412; font-weight: 700; }
.upload-limit-ok { display: block; margin-top: 7px; color: #226b36; font-weight: 700; }

.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 16px; }
.resource-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.resource-card h3 { margin: 0 0 12px; }
.resource-list { display: grid; gap: 9px; }
.resource-list a { display: flex; gap: 11px; padding: 11px; border-radius: 10px; color: var(--text); text-decoration: none; }
.resource-list a:hover { background: #f4f6f8; color: var(--text); }
.resource-list a > span:last-child { display: grid; min-width: 0; }
.resource-list small { color: var(--muted); overflow-wrap: anywhere; }
.resource-list.compact { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.resource-list.compact a { border: 1px solid var(--line); }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 10px 15px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent); color: white; text-decoration: none; font-weight: 800; cursor: pointer; }
.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: white; }
.button.secondary { background: white; border-color: var(--line); color: var(--text); }
.button.secondary:hover { background: #f4f6f8; border-color: #c8d0d8; color: var(--text); }
.button.telegram { background: #2481cc; border-color: #2481cc; }
.copy-event-button.copied { background: #e7f6ec; border-color: #9fd4af; color: #146c2e; }
.copy-event-button.copy-error { background: var(--accent-soft); border-color: #efc7c2; color: var(--accent-dark); }
.button.danger { background: #8f1d14; border-color: #8f1d14; }
.button.small { min-height: 34px; padding: 7px 11px; font-size: .85rem; }
.empty-state { display: grid; gap: 4px; padding: 22px; border: 1px dashed #c7cfd7; border-radius: 12px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--text); }
.site-footer { padding: 24px 0 36px; color: var(--muted); text-align: center; }
.site-footer p { margin: 0; }

.admin-header { padding: 36px 0; }
.admin-header h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.admin-main { max-width: 980px; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.admin-toolbar form, .compact-buttons form { margin: 0; }
.flash { padding: 13px 15px; border-radius: 10px; font-weight: 700; }
.flash.success { background: #e7f6ec; color: #146c2e; border: 1px solid #b7e2c4; }
.flash.error { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid #efc7c2; }
.auth-panel { max-width: 590px; margin: 20px auto; width: 100%; }
.form-grid { display: grid; gap: 16px; }
.form-grid label { display: grid; gap: 6px; font-weight: 750; }
.form-grid small { color: var(--muted); font-weight: 400; }
input, textarea, select { width: 100%; border: 1px solid #cbd3da; border-radius: 10px; background: white; color: var(--text); padding: 11px 12px; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(23,105,170,.16); border-color: var(--blue); }
textarea { resize: vertical; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fieldset { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.fieldset legend { padding: 0 7px; font-weight: 800; }
.link-row { display: grid; grid-template-columns: 1fr 1.7fr; gap: 10px; margin-bottom: 10px; }
.check-row { display: flex !important; grid-template-columns: none; align-items: center; gap: 9px !important; padding: 6px 0; font-weight: 500 !important; }
.check-row input { width: auto; }
.admin-list { display: grid; gap: 10px; }
.admin-list-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.admin-list-item:last-child { border-bottom: 0; }
.admin-list-item > div:first-child { display: grid; min-width: 0; }
.admin-list-item small { color: var(--muted); overflow-wrap: anywhere; }
.compact-buttons { flex-wrap: nowrap; }


@media (max-width: 900px) {
    .weather-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .site-header { padding: 38px 0 34px; }
    .container, .wide-container { width: min(100% - 20px, 1120px); }
    .panel { padding: 18px; border-radius: 14px; }
    .with-actions, .map-footer, .admin-list-item { align-items: stretch; flex-direction: column; }
    .map-switcher { align-self: flex-start; }
    .map-frame { height: var(--map-height-mobile, 360px); min-height: 0; }
    .map-frame iframe { height: 100%; }
    .two-cols, .link-row { grid-template-columns: 1fr; }
    .timeline-item { padding-left: 28px; }
    .timeline::before { left: 8px; }
    .timeline-marker { left: 1px; }
    summary { padding: 16px; }
    .event-content { padding: 0 16px 17px; }
    .compact-buttons { flex-wrap: wrap; }
}

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

/* Buscador general */
.header-topline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}
.header-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: white;
    color: var(--accent-dark);
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 5px 16px rgba(53, 9, 6, .18);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.header-home-button:hover {
    color: var(--accent-dark);
    background: #fff5f3;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(53, 9, 6, .24);
}
.header-home-button:focus-visible {
    outline: 3px solid rgba(255,255,255,.8);
    outline-offset: 3px;
}
.header-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: white;
    font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.header-search-button:hover {
    background: rgba(255,255,255,.23);
}
.header-search-button:focus-visible {
    outline: 3px solid rgba(255,255,255,.75);
    outline-offset: 3px;
}
.search-close:focus-visible,
.search-result-item:focus-visible {
    outline: 3px solid rgba(23,105,170,.35);
    outline-offset: 2px;
}
.search-overlay[hidden] { display: none; }
.search-overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: clamp(18px, 6vh, 64px) 16px;
    overflow-y: auto;
    background: rgba(10, 17, 24, .68);
}
.search-dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 36px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.search-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 22px 14px;
}
.search-dialog-header h2 {
    margin: 4px 0 0;
    font-size: clamp(1.45rem, 4vw, 2rem);
}
.search-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: white;
    color: var(--text);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.search-close:hover { background: #f4f6f8; }
.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 22px;
    padding: 0 14px;
    border: 2px solid #cbd3da;
    border-radius: 13px;
    background: white;
}
.search-field:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(23,105,170,.13);
}
.search-field input {
    min-width: 0;
    padding: 13px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    font-size: 1.05rem;
}
.search-field input:focus { border: 0; outline: 0; box-shadow: none; }
.search-help {
    margin: 9px 22px 14px;
    color: var(--muted);
    font-size: .9rem;
}
.search-results {
    max-height: min(520px, calc(100vh - 240px));
    padding: 0 14px 16px;
    overflow-y: auto;
}
.search-count {
    margin: 0;
    padding: 9px 8px 7px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}
.search-result-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 10px;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.search-result-item:hover { background: #f5f7f9; }
.search-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}
.search-result-content {
    display: grid;
    min-width: 0;
}
.search-result-content strong,
.search-result-content small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-result-content small {
    color: var(--muted);
    font-size: .84rem;
}
.search-empty {
    display: grid;
    gap: 4px;
    margin: 8px;
    padding: 24px 18px;
    border: 1px dashed #c7cfd7;
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
}
.search-empty strong { color: var(--text); }
.search-is-open { overflow: hidden; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.search-highlight {
    animation: search-highlight 2.2s ease;
}
@keyframes search-highlight {
    0%, 45% { box-shadow: 0 0 0 5px rgba(180,35,24,.2); }
    100% { box-shadow: none; }
}

@media (max-width: 760px) {
    .header-topline {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }
    .header-topline .eyebrow {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 2px;
    }
    .header-home-button,
    .header-search-button {
        min-height: 40px;
        padding: 8px 12px;
    }
    .search-overlay { padding: 10px; }
    .search-dialog { max-height: calc(100vh - 20px); border-radius: 16px; }
    .search-dialog-header { padding: 18px 16px 12px; }
    .search-field { margin-inline: 16px; }
    .search-help { margin-inline: 16px; }
    .search-results { max-height: calc(100vh - 225px); padding-inline: 8px; }
    .search-result-badge { min-width: 58px; }
}

/* Calidad del aire: vista compacta */
.air-quality-panel {
    --air-color: #7a8793;
    --air-soft: #f1f3f5;
    --air-text: #45515c;
    scroll-margin-top: 18px;
    padding: 20px 24px;
    border-left: 6px solid var(--air-color);
}
.air-quality-compact-top {
    display: grid;
    grid-template-columns: minmax(300px, 1.5fr) auto auto;
    align-items: center;
    gap: 24px;
}
.air-quality-identity {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}
.air-quality-icon {
    display: block;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--air-color);
    border: 4px solid white;
    box-shadow: 0 0 0 7px var(--air-soft), 0 0 0 8px var(--air-color);
}
.air-quality-identity h2 {
    margin: 2px 0 1px;
    color: var(--air-text);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.08;
}
.air-quality-identity p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
}
.air-quality-key-values {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.air-quality-key-value {
    display: grid;
    grid-template-columns: auto auto;
    align-content: center;
    align-items: baseline;
    column-gap: 5px;
    min-width: 104px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbfc;
}
.air-quality-key-value small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}
.air-quality-key-value strong {
    font-size: 1.55rem;
    line-height: 1;
}
.air-quality-key-value span {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 700;
}
.air-quality-updated {
    display: grid;
    min-width: 88px;
    text-align: right;
    line-height: 1.15;
}
.air-quality-updated small,
.air-quality-updated span {
    color: var(--muted);
    font-size: .76rem;
}
.air-quality-updated strong {
    margin: 2px 0;
    font-size: 1.25rem;
}
.air-quality-compact-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.air-quality-short-advice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: .94rem;
    font-weight: 700;
}
.air-quality-short-advice span {
    flex: 0 0 auto;
    font-size: 1.15rem;
}
.air-quality-quick-actions {
    flex: 0 0 auto;
}
.air-quality-details {
    margin-top: 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.air-quality-details[open] {
    border: 0;
    box-shadow: none;
}
.air-quality-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: white;
    color: var(--text);
    font-size: .84rem;
    font-weight: 800;
}
.air-quality-details > summary::after {
    position: static;
    margin: 0;
    content: "+";
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
}
.air-quality-details[open] > summary::after {
    content: "−";
}
.air-quality-details > summary:hover {
    background: #f4f6f8;
}
.air-quality-details-body {
    display: grid;
    gap: 14px;
    margin-top: 12px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbfc;
}
.air-quality-secondary-readings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.air-quality-secondary-reading {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
}
.air-quality-secondary-reading > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.air-quality-secondary-reading > div > strong {
    font-size: .82rem;
}
.air-quality-secondary-reading p {
    margin: 4px 0 0;
    font-size: 1.18rem;
    font-weight: 800;
}
.air-quality-secondary-reading p small {
    color: var(--muted);
    font-size: .67rem;
}
.air-reading-level {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--air-color, #9aa5af);
}
.air-quality-detail-note {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: .84rem;
}
.air-quality-detail-note p {
    margin: 0;
}
.air-quality-unavailable-actions {
    justify-content: flex-end;
}
.air-status-buena {
    --air-color: #087ead;
    --air-soft: #eaf7fc;
    --air-text: #075774;
}
.air-status-razonablemente-buena {
    --air-color: #368b45;
    --air-soft: #edf8ef;
    --air-text: #225e2c;
}
.air-status-regular {
    --air-color: #d7a800;
    --air-soft: #fff8dc;
    --air-text: #685200;
}
.air-status-desfavorable {
    --air-color: #d34a40;
    --air-soft: #fff0ee;
    --air-text: #8a2019;
}
.air-status-muy-desfavorable {
    --air-color: #8f2938;
    --air-soft: #faecef;
    --air-text: #691b28;
}
.air-status-extremadamente-desfavorable {
    --air-color: #703789;
    --air-soft: #f5edf9;
    --air-text: #512364;
}
.air-status-unavailable {
    --air-color: #7a8793;
    --air-soft: #f1f3f5;
    --air-text: #45515c;
}
.air-status-border-buena { --air-color: #087ead; --air-soft: #eaf7fc; --air-text: #075774; }
.air-status-border-razonablemente-buena { --air-color: #368b45; --air-soft: #edf8ef; --air-text: #225e2c; }
.air-status-border-regular { --air-color: #d7a800; --air-soft: #fff8dc; --air-text: #685200; }
.air-status-border-desfavorable { --air-color: #d34a40; --air-soft: #fff0ee; --air-text: #8a2019; }
.air-status-border-muy-desfavorable { --air-color: #8f2938; --air-soft: #faecef; --air-text: #691b28; }
.air-status-border-extremadamente-desfavorable { --air-color: #703789; --air-soft: #f5edf9; --air-text: #512364; }

@media (max-width: 980px) {
    .air-quality-compact-top {
        grid-template-columns: 1fr auto;
    }
    .air-quality-updated {
        grid-column: 2;
        grid-row: 1;
    }
    .air-quality-key-values {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .air-quality-panel {
        padding: 16px;
    }
    .air-quality-compact-top {
        grid-template-columns: 1fr auto;
        gap: 14px;
    }
    .air-quality-identity {
        gap: 11px;
    }
    .air-quality-icon {
        width: 26px;
        height: 26px;
        border-width: 3px;
        box-shadow: 0 0 0 6px var(--air-soft), 0 0 0 7px var(--air-color);
    }
    .air-quality-identity .section-kicker {
        font-size: .68rem;
    }
    .air-quality-identity h2 {
        font-size: 1.35rem;
    }
    .air-quality-identity p {
        font-size: .78rem;
    }
    .air-quality-updated {
        min-width: 64px;
    }
    .air-quality-key-values {
        width: 100%;
    }
    .air-quality-key-value {
        flex: 1 1 0;
        min-width: 0;
    }
    .air-quality-compact-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .air-quality-short-advice {
        font-size: .88rem;
    }
    .air-quality-secondary-readings {
        grid-template-columns: 1fr;
    }
    .air-quality-unavailable-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 430px) {
    .air-quality-compact-top {
        grid-template-columns: 1fr;
    }
    .air-quality-updated {
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: auto auto auto;
        align-items: baseline;
        justify-content: start;
        gap: 5px;
        text-align: left;
    }
    .air-quality-updated strong {
        font-size: 1rem;
    }
    .air-quality-key-value strong {
        font-size: 1.35rem;
    }
}

@media (max-width: 760px) {
    .event-video-player { max-height: 62vh; }
    .event-video figcaption { align-items: flex-start; flex-direction: column; }
}