:root {
    --navy: #2C4B66;
    --navy-deep: #1E3548;
    --teal: #89B8BC;
    --teal-pale: #C5DDE0;
    --sage: #92B294;
    --peach: #F8BC7E;
    --coral: #E78D70;
    --offwhite: #F6F4F1;
    --card: #FFFFFF;
    --text-mute: #7B8A99;
    --text-light: #B0B9C2;
    --shadow-sm: 0 1px 2px rgba(44,75,102,0.04), 0 2px 8px rgba(44,75,102,0.04);
    --shadow-md: 0 2px 4px rgba(44,75,102,0.04), 0 8px 24px rgba(44,75,102,0.06);
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 24px;
    --radius-pill: 999px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    background: var(--offwhite);
    font-family: 'Century Gothic', 'Futura', 'Avenir', system-ui, sans-serif;
    color: var(--navy); -webkit-font-smoothing: antialiased;
    width: 100%; height: 100%; overflow: hidden;
  }
  .dashboard-wrap {
    width: 100vw; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .dashboard {
    width: 1920px; height: 1080px;
    transform-origin: center center;
    background: var(--offwhite);
    padding: 24px 28px 18px;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    gap: 14px;
    position: relative;
  }
  .heading-font {
    font-family: 'Helvetica Neue', 'Arial Narrow', Helvetica, sans-serif;
    font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  }

  /* ---------- HEADER ---------- */
  header.bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px;
  }
  .brand { display: flex; align-items: center; gap: 16px; }
  /* v1.20: logo GEAF UC — background-image (no mask) + filter para teñirlo navy.
     Si el PNG no carga, no se ve nada (igual que cualquier asset 404). */
  .logo-geaf {
    width: 64px; height: 64px;
    background-image: url('Logos e imagenes/GEAF%20LOGO%20copy.png');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
    /* Filter chain que convierte negro → #2C4B66 (navy) */
    filter: brightness(0) saturate(100%) invert(24%) sepia(28%) saturate(900%) hue-rotate(178deg) brightness(95%) contrast(89%);
  }
  .logo-muc {
    width: 70px; height: 80px;
    background-image: url('Logos e imagenes/Logo_MUC.svg');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
  }
  .brand-text h1 { font-size: 24px; letter-spacing: 1.8px; line-height: 1.05; }
  .brand-text p {
    font-size: 12px; color: var(--text-mute); letter-spacing: 1.4px;
    text-transform: uppercase; margin-top: 4px; font-weight: 600;
  }
  .brand-text .fondecyt {
    font-size: 11px; color: var(--coral); letter-spacing: 1.8px;
    text-transform: uppercase; margin-top: 3px; font-weight: 700;
  }
  .status-cluster { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

  /* ---------- SITE NAV (v1.35: multipágina) ---------- */
  .site-nav {
    display: flex; align-items: center; gap: 2px;
    background: rgba(44,75,102,0.06);
    border-radius: var(--radius-pill);
    padding: 3px;
  }
  .site-nav-link {
    font-family: 'Helvetica Neue', 'Arial Narrow', Helvetica, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--text-mute); text-decoration: none;
    padding: 7px 16px; border-radius: var(--radius-pill);
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
  }
  .site-nav-link:hover { color: var(--navy); }
  .site-nav-link.active {
    background: var(--card); color: var(--navy);
    box-shadow: var(--shadow-sm);
  }
  .clock { text-align: right; flex-shrink: 0; }
  .clock .time {
    font-size: 42px; font-weight: 200; letter-spacing: 1px; line-height: 1;
    font-family: 'Helvetica Neue', sans-serif;
    white-space: nowrap;
  }
  .clock .date {
    font-size: 11px; color: var(--text-mute); letter-spacing: 1.6px;
    text-transform: uppercase; margin-top: 4px; font-weight: 600;
    white-space: nowrap;
  }
  /* v1.23: pill grande horizontal — todo en una sola línea adentro.
     "● 4/7 ESTACIONES ACTIVAS  ·  Providencia, Chamisero, Cerrillos offline" */
  .net-pill {
    display: flex; align-items: center; gap: 12px;
    background: white; padding: 10px 20px; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); position: relative; flex-shrink: 0; }
  .pulse::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: var(--sage); opacity: 0.4; animation: pulse 2s ease-out infinite;
  }
  @keyframes pulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2.2); opacity: 0; } }
  .net-pill #netPillText {
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    font-weight: 700; color: var(--navy); white-space: nowrap; line-height: 1;
  }
  /* Offline en línea dentro del pill — sutil, gris muted, sentence case */
  .net-pill .net-offline {
    font-size: 10px; letter-spacing: 0.2px; text-transform: none;
    font-weight: 500; color: var(--text-mute); line-height: 1;
    white-space: nowrap;
    padding-left: 10px;
    border-left: 1px solid rgba(44,75,102,0.12);
  }
  .net-pill .net-offline[hidden] { display: none; }
  /* Pulse cambia a coral cuando hay estaciones offline */
  .net-pill[data-status="warn"] .pulse,
  .net-pill[data-status="warn"] .pulse::after { background: var(--coral); }

  /* ---------- DAILY STRIP — fills its container ---------- */
  .daily-strip {
    overflow: visible;
    background: var(--navy);
    border-radius: 14px;
    padding: 8px 16px 8px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-md);
    color: white;
    height: 64px;
    width: 100%;
  }
  .ds-season {
    flex-shrink: 0;
    padding-right: 6px;
  }
  .ds-conditions { flex: 1; justify-content: space-around; }
  .ds-season .label {
    font-size: 22px; font-weight: 700; letter-spacing: 0.5px;
    font-family: 'Helvetica Neue', sans-serif; line-height: 1;
  }
  .ds-season .date {
    font-size: 10px; letter-spacing: 1.4px; opacity: 0.7;
    text-transform: uppercase; font-weight: 600; margin-top: 2px;
  }
  .ds-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.25); }
  .ds-ampm { display: flex; align-items: center; gap: 8px; }
  .ds-ampm-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: white; display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  .ds-ampm-icon.inactive { background: rgba(255,255,255,0.4); box-shadow: none; opacity: 0.85; }
  .ds-ampm-icon svg { width: 22px; height: 22px; }

  .ds-conditions {
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
  }
  .ds-condition {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    opacity: 0.45;
  }
  .ds-condition.active { opacity: 1; }
  .ds-condition.active .ds-condition-icon {
    background: white; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  .ds-condition.active .ds-condition-icon svg { color: var(--navy); }
  .ds-condition-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.1); display: grid; place-items: center;
  }
  .ds-condition-icon svg { width: 18px; height: 18px; color: white; }
  .ds-condition-label {
    font-size: 8px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  .ds-temps { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .ds-thermo { width: 28px; height: 44px; }
  .ds-thermo svg { width: 100%; height: 100%; }
  .ds-temp-vals { display: flex; flex-direction: column; gap: 2px; }
  .ds-temp-row { display: flex; align-items: baseline; gap: 6px; }
  .ds-temp-row .lbl {
    display: none;
  }
  .ds-temp-row .val {
    font-size: 13px; font-weight: 600; font-family: 'Helvetica Neue', sans-serif;
    letter-spacing: -0.3px; line-height: 1; white-space: nowrap;
  }
  .ds-temp-row.max .val::before { content: '↑'; opacity: 0.6; margin-right: 2px; font-size: 10px; }
  .ds-temp-row.min .val::before { content: '↓'; opacity: 0.6; margin-right: 2px; font-size: 10px; }
  .ds-temp-row.max .val { color: white; font-weight: 600; text-shadow: 0 0 1px rgba(231,141,112,0.4); }
  .ds-temp-row.min .val { color: var(--teal-pale); }

  /* ---------- MAIN GRID — map column (with daily strip on top) + stations ---------- */
  .main-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 14px;
    min-height: 0;
  }
  .map-column {
    display: flex; flex-direction: column; gap: 10px;
    min-height: 0;
  }
  .map-column .map-card { flex: 1; min-height: 0; }

  .card {
    background: var(--card); border-radius: var(--radius-lg);
    padding: 18px 20px; box-shadow: var(--shadow-md);
    position: relative; overflow: hidden;
  }
  .card-label {
    font-size: 10px; letter-spacing: 1.8px; color: var(--text-mute);
    text-transform: uppercase; font-weight: 700; margin-bottom: 3px;
  }
  .card-title {
    font-size: 14px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--navy);
    font-family: 'Helvetica Neue', sans-serif;
  }
  .card-subtitle { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

  /* MAP — v1.34: canvas con aspect-ratio fijo + satelital blurred como fondo del card.
     Las franjas que aparecen a los costados (TV mode) ahora muestran satelital desenfocado
     en vez de navy plano — se lee como "fondo fuera de foco", el canvas central queda nítido. */
  .map-card {
    background-color: #1E3548;
    padding: 0;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* v1.36: fondo satelital difuminado eliminado — el mapa Leaflet llena la card */
  .map-card::before {
    content: '';
    position: absolute; inset: 0;
    background: #EAE8E4;
    z-index: 0;
  }
  .map-card > * { position: relative; z-index: 1; }
  .map-canvas {
    width: 100%;
    height: 100%;
  }

  /* ---------- v1.36: mapa Leaflet ---------- */
  #livemap {
    position: absolute; inset: 0;
    z-index: 1;
    background: #EAE8E4;
    font-family: 'Century Gothic', 'Futura', 'Avenir', system-ui, sans-serif;
  }
  .lf-station { pointer-events: auto; }
  .lf-station .pin {
    width: 26px; height: 26px; border-radius: 50%;
    color: white; font-weight: 700; font-size: 10px;
    font-family: 'Helvetica Neue', sans-serif;
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px white, 0 2px 6px rgba(44,75,102,0.25);
  }
  .lf-station.rural .pin {
    box-shadow: 0 0 0 2px var(--sage), 0 2px 6px rgba(44,75,102,0.25);
  }
  .lf-station .label {
    position: absolute;
    font-size: 8px; font-weight: 700; letter-spacing: 0.3px;
    color: rgba(44,75,102,0.85); background: rgba(255,255,255,0.85);
    padding: 2px 6px; border-radius: var(--radius-pill);
    box-shadow: 0 1px 3px rgba(44,75,102,0.12);
    white-space: nowrap;
    pointer-events: none;
  }
  .lf-station.side-right .label { top: 50%; left: calc(100% + 6px); transform: translateY(-50%); }
  .lf-station.side-left  .label { top: 50%; right: calc(100% + 6px); transform: translateY(-50%); }
  .lf-station.side-above .label { bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-weight: 800; }
  .comuna-tip {
    font-family: 'Helvetica Neue', 'Arial Narrow', Helvetica, sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--navy);
    background: rgba(255,255,255,0.92); border: none;
    border-radius: var(--radius-pill); padding: 3px 9px;
    box-shadow: 0 2px 8px rgba(44,75,102,0.15);
  }
  #livemap .leaflet-control-attribution {
    font-size: 8px; background: rgba(255,255,255,0.65);
    color: var(--text-mute); border-radius: 8px 0 0 0;
  }
  #livemap .leaflet-bar { border: none; box-shadow: 0 2px 8px rgba(44,75,102,0.18); border-radius: 12px; overflow: hidden; }
  #livemap .leaflet-bar a {
    color: var(--navy); font-family: 'Helvetica Neue', sans-serif;
    border-bottom-color: rgba(44,75,102,0.1);
  }
  #livemap .muc-home-btn { font-size: 16px; line-height: 26px; }
  #livemap .leaflet-control-layers {
    border: none; box-shadow: 0 2px 8px rgba(44,75,102,0.18); border-radius: 12px;
    font-family: 'Century Gothic', 'Futura', system-ui, sans-serif; font-size: 11px; color: var(--navy);
  }
  /* Wrapper markers con shift en % (no px) para que match el shift del SVG en cualquier escala */
  .map-canvas .markers-shift {
    position: absolute; inset: 0;
    transform: translateY(8.4%);
    pointer-events: none;
  }
  .map-canvas .markers-shift > * { pointer-events: auto; }
  .map-header {
    position: absolute;
    top: 14px; left: 16px; right: 16px;
    z-index: 3;
    display: flex; justify-content: space-between; align-items: flex-start;
    pointer-events: none;
  }
  .map-header > * { pointer-events: auto; }
  .map-header .card-label,
  .map-header .card-title,
  .map-header .card-subtitle {
    background: rgba(255,255,255,0.85);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    display: inline-block;
  }
  .map-header .card-label { margin-bottom: 4px; }
  .map-legend {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.85); padding: 5px 12px;
    border-radius: var(--radius-pill); backdrop-filter: blur(8px);
  }
  .legend-bar {
    width: 90px; height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, var(--sage), var(--teal), var(--peach), var(--coral));
  }
  .legend-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); font-weight: 700; }

  .out-stations { display: flex; justify-content: flex-end; margin-top: 4px; padding: 0 4px; }
  .out-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: white; padding: 6px 8px 6px 14px; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
  }
  .out-chip .dot {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; color: white;
    font-size: 11px; font-weight: 700; font-family: 'Helvetica Neue', sans-serif;
    flex-shrink: 0;
  }
  .out-chip .info .name {
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--navy);
  }
  .out-chip .info .dir {
    font-size: 9px; color: var(--text-mute); letter-spacing: 0.6px;
    margin-top: 1px;
  }

  /* v1.25: SVG ocupa todo el canvas — usamos preserveAspectRatio="none" en el SVG
     para que la imagen se estire ligeramente y llene la ficha. La distorsión (~7%)
     en un mapa decorativo es imperceptible. Los markers (% del canvas) alinean. */
  .map-canvas {
    flex: 1; position: relative; min-height: 0;
    overflow: hidden;
  }
  .map-canvas .map-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }
  .map-svg { width: 100%; height: 100%; display: block; }
  .comuna {
    fill: rgba(255,255,255,0.55);
    stroke: rgba(44,75,102,0.2); stroke-width: 0.8;
    stroke-linejoin: round;
  }
  .comuna-active {
    fill: rgba(255,255,255,0.85);
    stroke: rgba(44,75,102,0.4); stroke-width: 1.2;
  }
  .outside-zone {
    fill: rgba(146,178,148,0.08);
    stroke: rgba(146,178,148,0.3);
    stroke-width: 0.6;
    stroke-dasharray: 3 3;
  }
  .outside-label {
    font-family: 'Helvetica Neue', sans-serif; font-size: 9px;
    fill: rgba(146,178,148,0.7); letter-spacing: 2px; font-weight: 700;
    text-transform: uppercase;
  }

  .station-marker {
    position: absolute; transform: translate(-50%, -50%);
    z-index: 2; pointer-events: none;
  }
  /* v1.24: pins más compactos (26px) — matchea proporción de circles del SVG original */
  .station-marker .pin {
    width: 26px; height: 26px; border-radius: 50%;
    color: white; font-weight: 700; font-size: 10px;
    font-family: 'Helvetica Neue', sans-serif;
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px white, 0 2px 6px rgba(44,75,102,0.25);
  }
  /* Marker rural (Isla de Maipo): borde verde sage */
  .station-marker.rural .pin {
    box-shadow: 0 0 0 2px var(--sage), 0 2px 6px rgba(44,75,102,0.25);
  }
  .station-marker .label {
    position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
    font-size: 8px; font-weight: 700; letter-spacing: 0.3px;
    color: rgba(44,75,102,0.75); background: rgba(255,255,255,0.75);
    padding: 2px 6px; border-radius: var(--radius-pill);
    box-shadow: 0 1px 3px rgba(44,75,102,0.08);
    white-space: nowrap;
    backdrop-filter: blur(2px);
  }
  .station-marker.label-above .label { top: auto; bottom: calc(100% + 4px); }
  .station-marker.label-right .label { top: 50%; left: calc(100% + 6px); transform: translateY(-50%); }
  .station-marker.label-left  .label { top: 50%; left: auto; right: calc(100% + 6px); transform: translateY(-50%); }
  .station-marker.star .label { font-weight: 800; }

  /* ============== STATION CARDS — Providencia tall + 2 columns groups ============== */
  .stations-col {
    display: grid;
    grid-template-rows: auto repeat(3, 1fr);
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 10px;
    min-height: 0;
  }
  /* Group headers */
  .group-header {
    font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--text-mute); font-weight: 700; padding: 0 4px 2px;
    border-bottom: 1px solid rgba(44,75,102,0.1);
  }
  .group-header.urban { color: var(--coral); border-color: rgba(231,141,112,0.3); }
  .group-header.peripheral { color: var(--sage); border-color: rgba(146,178,148,0.4); }
  .station-card {
    background: white; border-radius: var(--radius-md); padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    position: relative;
    border: 1px solid rgba(44,75,102,0.04);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .station-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent, var(--coral));
  }
  .station-card.s-providencia { --accent: #E78D70; grid-column: 1; grid-row: 1 / span 4; }
  .station-card.s-stgocentro  { --accent: #E78D70; grid-column: 2; grid-row: 2; }
  .station-card.s-renca       { --accent: #E78D70; grid-column: 2; grid-row: 3; }
  .station-card.s-cerrillos   { --accent: #E78D70; grid-column: 2; grid-row: 4; }
  .station-card.s-sancarlos   { --accent: #F8BC7E; grid-column: 3; grid-row: 2; }
  .station-card.s-chamisero   { --accent: #F8BC7E; grid-column: 3; grid-row: 3; }
  .station-card.s-isla        { --accent: #89B8BC; grid-column: 3; grid-row: 4; }

  .sc-header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
  }
  .sc-header > .sc-status { margin-left: auto; }
  .sc-name {
    font-size: 12px; font-weight: 700; letter-spacing: 0.7px;
    text-transform: uppercase; color: var(--navy);
  }
  /* v1.18: sub-ubicación campus para Providencia (Lo Contador) */
  .sc-sublocation {
    font-weight: 500;
    color: var(--text-mute);
    letter-spacing: 0.5px;
    margin-left: 2px;
  }
  .sc-status {
    display: flex; align-items: center; gap: 3px;
    font-size: 8px; color: var(--text-mute); font-weight: 600;
    letter-spacing: 0.6px;
  }
  .sc-status::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--sage); display: inline-block;
  }

  /* The card body has TWO sides */
  .sc-body {
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 10px;
    flex: 1; align-items: center;
  }
  .sc-left {
    display: flex; flex-direction: column; gap: 4px;
    justify-content: center;
  }
  .sc-right {
    display: grid; grid-template-rows: 1fr 1fr 1fr;
    gap: 3px;
    align-content: center;
  }

  /* Temperature display */
  .sc-temp-row { display: flex; align-items: baseline; gap: 5px; }
  .sc-temp-big {
    font-size: 30px; font-weight: 200; letter-spacing: -1px; line-height: 1;
    font-family: 'Helvetica Neue', sans-serif;
  }
  .sc-temp-trend {
    font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 1px;
  }
  .sc-temp-trend.up { color: var(--coral); }
  .sc-temp-trend.down { color: var(--teal); }

  /* SHARED-SCALE RANGE BAR — Apple-style
     Scale runs from 8° to 32° across all stations (same as map legend).
     Pin: current reading. Range strip: today's min-max for this station. */
  .sc-range-block {
    margin-top: 4px;
    width: 100%;
  }
  .sc-range-ends {
    display: flex; justify-content: space-between;
    font-size: 8px; color: var(--text-light); letter-spacing: 0.6px;
    font-weight: 700; margin-bottom: 2px;
  }
  .sc-range-track {
    position: relative; height: 6px; border-radius: var(--radius-pill);
    background: rgba(44,75,102,0.08);
  }
  .sc-range-fill {
    position: absolute; top: 0; height: 6px; border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #89B8BC, #92B294 30%, #F8BC7E 70%, #E78D70);
  }
  .sc-range-pin {
    position: absolute; top: -2px; width: 10px; height: 10px;
    background: white; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(44,75,102,0.3), 0 0 0 1.5px var(--navy);
    transform: translateX(-50%);
  }
  .sc-range-nums {
    display: flex; justify-content: space-between;
    margin-top: 3px;
    font-size: 9px;
  }
  .sc-range-nums .min-num { color: var(--teal); font-weight: 700; font-family: 'Helvetica Neue', sans-serif; }
  .sc-range-nums .max-num { color: var(--coral); font-weight: 700; font-family: 'Helvetica Neue', sans-serif; }
  .sc-range-nums .span-lbl { font-size: 7px; color: var(--text-mute); letter-spacing: 0.6px; font-weight: 600; align-self: center; }

  /* Right side - 3 metrics, big and readable */
  .sc-metric {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px;
    padding: 3px 0;
  }
  .sc-metric .val-block { text-align: right; min-width: 56px; }
  .sc-metric .icon {
    flex-shrink: 0; width: 22px; height: 22px;
    display: grid; place-items: center;
    color: var(--text-mute);
  }
  .sc-metric .icon svg { width: 16px; height: 16px; }
  .sc-metric .icon.hum { color: var(--teal); }
  .sc-metric .icon.rad { color: var(--peach); }
  .sc-metric .icon.wind { color: var(--coral); }
  .sc-metric .val-block {
    flex: 1; text-align: right; line-height: 1.05;
  }
  .sc-metric .val {
    font-size: 14px; font-weight: 600; color: var(--navy);
    font-family: 'Helvetica Neue', sans-serif;
  }
  .sc-metric .val .u { font-size: 9px; color: var(--text-mute); margin-left: 2px; font-weight: 500; }
  .sc-metric .sub {
    font-size: 8px; color: var(--text-mute); letter-spacing: 0.5px;
    font-weight: 600;
  }
  .sc-metric .sub.dir { color: var(--coral); font-weight: 700; }

  /* ISLA DE MAIPO + cards chicas — layout 4 columnas con .isla-metric-col.
     minmax(0, fr) evita que columnas se expandan más allá de su fracción cuando hay
     contenido nowrap largo (el problema de v1.12: wind se escapaba y .card overflow-hidden la recortaba). */
  .s-isla .sc-body,
  .station-card:not(.s-providencia):has(.isla-metric-col) .sc-body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.15fr);
  }
  .isla-metric-col { min-width: 0; }
  .s-isla .sc-tag {
    background: var(--sage); color: white; font-size: 7px;
    padding: 1px 5px; border-radius: var(--radius-pill); letter-spacing: 0.6px;
    font-weight: 700; margin-left: 5px;
    white-space: nowrap;
  }
  .isla-metric-col {
    display: flex; flex-direction: column; gap: 6px;
    justify-content: center; align-items: center;
    border-left: 1px solid rgba(44,75,102,0.06);
    padding-left: 12px;
  }
  .isla-metric-col:first-of-type { border-left: none; padding-left: 0; }
  .isla-metric-col .icon {
    width: 28px; height: 28px;
    display: grid; place-items: center;
  }
  .isla-metric-col .icon svg { width: 22px; height: 22px; }
  .isla-metric-col .icon.hum { color: var(--teal); }
  .isla-metric-col .icon.rad { color: var(--peach); }
  .isla-metric-col .val {
    font-size: 22px; font-weight: 300; color: var(--navy);
    font-family: 'Helvetica Neue', sans-serif; line-height: 1;
    letter-spacing: -0.5px;
  }
  .isla-metric-col .val .u { font-size: 11px; color: var(--text-mute); margin-left: 2px; font-weight: 500; }

  /* PROVIDENCIA tall card — vertical layout to fill the 4-row span */
  .s-providencia .sc-body {
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start;
    gap: 14px;
  }
  .s-providencia .sc-left { gap: 8px; flex-shrink: 0; }
  .s-providencia .sc-temp-big { font-size: 56px; letter-spacing: -2px; }
  .s-providencia .sc-temp-trend { font-size: 12px; }
  .s-providencia .sc-right {
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(44,75,102,0.08);
    flex: 1;
  }

  .isla-metric-col .lbl {
    font-size: 8px; color: var(--text-mute); letter-spacing: 0.8px;
    text-transform: uppercase; font-weight: 700; margin-top: 2px;
  }
  .isla-wind-block {
    display: grid; grid-template-columns: 50px 1fr;
    gap: 8px; align-items: center;
    border-left: 1px solid rgba(44,75,102,0.06); padding-left: 12px;
  }
  .isla-wind-block svg { width: 100%; height: 100%; display: block; }

  /* Header section above stations cards: shared scale reference */
  .scale-reference {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 14px;
    margin-bottom: 2px;
    font-size: 9px;
    color: var(--text-mute);
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .scale-reference .scale-info {
    display: flex; align-items: center; gap: 10px;
  }
  .scale-reference .legend-bar-small {
    width: 90px; height: 5px; border-radius: 3px;
    background: linear-gradient(90deg, var(--sage), var(--teal), var(--peach), var(--coral));
  }

  /* ---------- BOTTOM ROW ---------- */
  .bottom-row {
    display: grid;
    grid-template-columns: 1.1fr 2.4fr 1.4fr;
    gap: 14px;
    height: 230px;
  }
  /* Carousel dots: ocultos por defecto, visibles solo en mobile */
  .bottom-dots { display: none; }

  .delta-card {
    background: linear-gradient(135deg, #F8BC7E 0%, #E78D70 100%);
    color: white; padding: 16px 20px;
    display: flex; flex-direction: column;
  }
  .delta-card .card-label { color: rgba(255,255,255,0.75); }
  .delta-card .big {
    font-size: 50px; font-weight: 200; line-height: 1;
    letter-spacing: -2px; margin-top: 4px;
    font-family: 'Helvetica Neue', sans-serif;
  }
  .delta-card .sub {
    font-size: 10px; opacity: 0.85; letter-spacing: 1px;
    margin-top: 4px; text-transform: uppercase; font-weight: 700;
  }
  .delta-chart { margin-top: 6px; flex: 1; min-height: 0; }
  .delta-chart svg { width: 100%; height: 100%; }
  .delta-stats {
    display: flex; justify-content: space-between;
    margin-top: 6px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  .delta-stat .v { font-size: 14px; font-weight: 400; font-family: 'Helvetica Neue', sans-serif; }
  .delta-stat .l {
    font-size: 8px; opacity: 0.7; letter-spacing: 0.6px;
    text-transform: uppercase; font-weight: 700; margin-top: 1px;
  }

  .heatmap-card { padding: 14px 18px 12px; display: flex; flex-direction: column; }
  .heatmap-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 8px;
  }
  .hm-legend {
    display: flex; align-items: center; gap: 6px; font-size: 8px; color: var(--text-mute);
    letter-spacing: 0.6px; font-weight: 600;
  }
  .hm-legend-bar {
    width: 90px; height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, #3E647A 0%, #B4D4E0 22%, #D9E6D5 50%, #F8BC7E 76%, #D26852 100%);
  }
  .heatmap-grid { display: grid; grid-template-columns: 24px 1fr; gap: 4px; flex: 1; min-height: 0; }
  .hm-days {
    display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px;
    font-size: 7px; color: var(--text-mute); letter-spacing: 0.4px; font-weight: 700;
    text-align: right;
  }
  .hm-days div { display: flex; align-items: center; justify-content: flex-end; }
  .hm-cells-wrap { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
  .hm-months {
    display: grid; grid-template-columns: repeat(12, 1fr);
    font-size: 8px; color: var(--text-mute); font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
  }
  .hm-months div { padding-left: 2px; }
  .hm-cells {
    display: grid; grid-template-columns: repeat(52, 1fr); grid-template-rows: repeat(7, 1fr);
    gap: 2px;
    grid-auto-flow: column;
    flex: 1; min-height: 0;
  }
  .hm-cells .cell { border-radius: 2px; min-height: 0; }
  /* v1.41: sin datos = rayado diagonal (el verde sage queda para Δ ≈ 0) */
  .cell.nodata {
    background: repeating-linear-gradient(45deg, rgba(123,138,153,0.35) 0 2px, rgba(123,138,153,0.08) 2px 5px);
  }

  .stats-card { padding: 12px 16px; display: flex; flex-direction: column; gap: 0; }
  .season-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 8px; flex: 1; justify-content: space-around;
  }
  .season-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-radius: 10px;
    background: rgba(137,184,188,0.06);
  }
  .season-row.current {
    background: rgba(248,188,126,0.14);
    border-left: 3px solid var(--peach);
    padding-left: 7px;
  }
  .season-row.upcoming {
    opacity: 0.45;
  }
  .season-info {
    display: flex; align-items: center; gap: 8px;
  }
  .season-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  }
  .season-dot.summer { background: var(--coral); }
  .season-dot.autumn { background: var(--peach); }
  .season-dot.winter { background: var(--teal); }
  .season-dot.spring { background: var(--sage); }
  .season-name {
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--navy);
  }
  .now-tag {
    font-size: 7px; background: var(--coral); color: white;
    padding: 1px 5px; border-radius: var(--radius-pill);
    letter-spacing: 1px; font-weight: 700; margin-left: 4px;
    vertical-align: middle;
  }
  .season-period {
    font-size: 8px; color: var(--text-mute); letter-spacing: 0.6px;
    margin-top: 1px; font-weight: 600;
  }
  .season-stats {
    display: flex; gap: 12px;
  }
  .season-stats.upcoming {
    font-size: 9px; color: var(--text-mute); letter-spacing: 1px;
    font-weight: 600;
  }
  .season-stat {
    display: flex; flex-direction: column; align-items: flex-end;
  }
  .season-stat .v {
    font-size: 13px; font-weight: 600; color: var(--navy);
    font-family: 'Helvetica Neue', sans-serif; line-height: 1;
  }
  .season-stat .v .u {
    font-size: 8px; color: var(--text-mute); margin-left: 1px; font-weight: 500;
  }
  .season-stat .l {
    font-size: 7px; color: var(--text-mute); letter-spacing: 0.6px;
    text-transform: uppercase; font-weight: 700; margin-top: 1px;
  }

  /* FOOTER */
  footer.bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 4px 0; border-top: 1px solid rgba(44,75,102,0.08);
  }
  .footer-text {
    font-size: 9px; color: var(--text-mute); letter-spacing: 1.2px;
    text-transform: uppercase; font-weight: 600;
  }
  .footer-text .fondecyt-num {
    color: var(--coral); font-weight: 700; margin-left: 8px; letter-spacing: 1.4px;
  }
  .footer-logos { display: flex; gap: 24px; align-items: center; opacity: 0.7; }
  .footer-logo { background-size: contain; background-repeat: no-repeat; background-position: center; }
  .footer-logo.geaf {
    background-image: url('Logos e imagenes/GEAF%20LOGO%20copy.png');
    width: 48px; height: 32px;
    filter: brightness(0) saturate(100%) invert(24%) sepia(28%) saturate(900%) hue-rotate(178deg) brightness(95%) contrast(89%);
  }
  .footer-logo.uc {
    background-image: url('Logos e imagenes/Logo_UC ARQ.svg');
    width: 100px; height: 32px;
  }
  .footer-logo.mase {
    background-image: url('Logos e imagenes/Logo mase.svg');
    width: 96px; height: 22px;
  }
  .footer-logo.anid-text {
    background-image: url('Logos e imagenes/Logo_Anid.svg');
    width: 82px; height: 26px;
  }
  /* Logo vertical (proporción 0.88) — más alto que el resto para que "CIGIDEN" se lea */
  .footer-logo.cigiden {
    background-image: url('Logos e imagenes/Logo_CIGIDEN.svg');
    width: 34px; height: 38px;
  }

  .toggle-bar {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    display: none; gap: 6px;
    background: white; padding: 4px; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md); z-index: 100;
  }
  .toggle-bar button {
    border: none; background: transparent; cursor: pointer;
    padding: 7px 16px; border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text-mute);
    font-family: inherit; transition: all 0.15s;
    white-space: nowrap; line-height: 1;
  }
  .toggle-bar button.active { background: var(--navy); color: white; }
  .toggle-bar button:hover:not(.active) { background: rgba(44,75,102,0.06); color: var(--navy); }
  body.view-current .bottom-row { display: none; }
  body.view-trends .main-grid { display: none; }
  body.view-trends .bottom-row { height: auto; flex: 1; }
  body.view-trends .daily-strip { display: none; }
  @media (max-width: 1700px) { .toggle-bar { display: flex; } }


  /* PROVIDENCIA sparkline — 24h temperature trajectory */
  .s-providencia .sc-chart {
    width: 100%;
    margin-top: 4px;
    padding: 6px 0 2px;
  }
  .s-providencia .sc-chart svg {
    width: 100%;
    height: 80px;
    display: block;
  }
  .s-providencia .sc-chart-caption {
    display: flex; justify-content: space-between;
    font-size: 8px; letter-spacing: 0.6px; font-weight: 600;
    color: var(--text-mute);
    text-transform: uppercase;
    margin-top: 2px;
  }


  /* HEATMAP tabs */
  .hm-title-row {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap; margin-bottom: 2px;
    min-height: 22px;
  }
  .heatmap-card .card-title {
    min-height: 32px;
    line-height: 1.15;
    white-space: normal;
  }
  .hm-tabs {
    display: inline-flex; gap: 2px;
    background: rgba(44,75,102,0.05);
    padding: 3px; border-radius: var(--radius-pill);
  }
  .hm-tab {
    border: none; background: transparent; cursor: pointer;
    padding: 5px 12px; border-radius: var(--radius-pill);
    font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text-mute);
    font-family: inherit; transition: all 0.2s;
    white-space: nowrap; line-height: 1;
  }
  .hm-tab:hover:not(.active) { color: var(--navy); }
  .hm-tab.active {
    background: var(--navy); color: white;
    box-shadow: 0 1px 3px rgba(44,75,102,0.2);
  }
  .hm-tab-hour {
    opacity: 0.7; font-weight: 500; margin-left: 3px;
  }
  .hm-tab.active .hm-tab-hour { opacity: 0.85; }


  /* STATION UPTIME — yearly measurement continuity bar */
  .sc-uptime {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(44,75,102,0.06);
  }
  .sc-uptime-svg {
    width: 100%; height: 6px; display: block;
    border-radius: 2px; overflow: hidden;
    background: rgba(44,75,102,0.05);
  }
  .sc-uptime-caption {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 3px;
    font-size: 7px; letter-spacing: 0.6px;
    color: var(--text-light); font-weight: 700;
    text-transform: uppercase;
  }
  .sc-uptime-pct strong {
    color: var(--text-mute); font-weight: 800;
    letter-spacing: 0.3px;
  }
  .sc-uptime-pct strong.warn { color: var(--coral); }
  .sc-uptime-pct strong.ok { color: var(--sage); }

  /* network pill — offline detail */
  .net-pill { transition: background 0.3s; }
  .net-pill[data-status="warn"] { background: rgba(231,141,112,0.12); }
  .net-pill[data-status="warn"] .pulse { background: var(--coral); }
  .net-offline {
    margin-left: 8px; padding-left: 8px;
    border-left: 1px solid rgba(44,75,102,0.15);
    font-size: 11px; font-weight: 600;
    color: var(--coral); letter-spacing: 0.3px;
  }

  .heatmap-grid[hidden] { display: none !important; }


  /* v1.10: small-station cards ahora usan .isla-metric-col (mismo layout que Isla).
     Las reglas .sc-right/.sc-metric quedaron obsoletas — ver bloque .isla-metric-col arriba. */
  .station-card:not(.s-providencia):has(.isla-metric-col) .sc-body {
    display: grid;
    align-items: stretch;
    flex: 1;
    gap: 4px;
  }


  /* RESUMEN compact — fit 4 seasons without cropping */
  .stats-card .card-subtitle { font-size: 10px; margin-bottom: 6px; margin-top: 1px; }
  .stats-card .season-row {
    padding: 5px 0 !important;
    min-height: 0;
  }
  .stats-card .season-name { font-size: 12px !important; line-height: 1.1; }
  .stats-card .season-period { font-size: 8.5px !important; margin-top: 1px; }
  .stats-card .season-stat .v { font-size: 13px !important; }
  .stats-card .season-stat .l { font-size: 7.5px !important; }


  /* HEATMAP tabs row — separated from header so it stays put */
  .hm-tabs-row {
    display: flex; justify-content: center;
    margin: 6px 0 8px;
  }
  .hm-tabs {
    margin: 0;
  }


  /* v1.10: small-station labels handled by .isla-metric-col ::after rules (below) */


  /* PROVIDENCIA — multi-series sparkline */
  .sc-chart-multi {
    margin-top: 4px;
  }
  .sc-chart-multi + .sc-chart-multi { margin-top: 8px; }
  .sc-chart-legend {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 9px; letter-spacing: 0.5px; font-weight: 600;
    color: var(--text-mute); text-transform: uppercase;
    margin-bottom: 2px;
  }
  .sc-chart-legend .lgd-item {
    display: inline-flex; align-items: center; gap: 4px;
  }
  .sc-chart-legend .lgd-swatch {
    width: 14px; height: 2.5px; border-radius: 2px;
  }
  .sc-chart-legend strong {
    font-weight: 800; font-size: 11px; color: var(--navy);
    letter-spacing: -0.2px;
    margin-left: 2px;
  }
  .sc-chart-multi svg {
    width: 100%; height: 58px; display: block;
  }


  /* PROVIDENCIA new structure: horizontal top + 2 charts below */
  .s-providencia .sc-top-row {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }
  .s-providencia .sc-top-row .sc-metric {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    padding: 4px;
    border-left: 1px solid rgba(44,75,102,0.06);
    text-align: center;
    min-width: 0;
  }
  .s-providencia .sc-top-row .sc-metric .val-block {
    text-align: center; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  .s-providencia .sc-top-row .sc-metric .val { font-size: 14px; line-height: 1; white-space: nowrap; }
  .s-providencia .sc-top-row .sc-metric .val .u { font-size: 9px; margin-left: 2px; }
  .s-providencia .sc-top-row .sc-metric .icon { width: 24px; height: 24px; }
  .s-providencia .sc-top-row .sc-metric .icon svg { width: 18px; height: 18px; }
  .s-providencia .sc-top-row .sc-metric .val-block::after {
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    color: var(--text-mute); text-transform: uppercase;
    margin-top: 4px;
  }
  .s-providencia .sc-top-row .sc-metric:has(.icon.hum) .val-block::after { content: "HR"; }
  .s-providencia .sc-top-row .sc-metric:has(.icon.rad) .val-block::after { content: "RAD"; }
  /* Wind: no usar ::after, la dirección ya aparece via .sub.dir (consistente con cards chicas) */
  .s-providencia .sc-top-row .sc-metric:has(.icon.wind) .val-block::after { content: ""; display: none; }
  .s-providencia .sc-top-row .sc-metric .sub.dir { font-size: 8px; margin-top: 2px; }

  /* INTERACTIVE: station-card click highlight */
  .station-card {
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
  }
  .station-card:hover:not(.active-station) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(44,75,102,0.1);
  }
  .station-card.active-station {
    box-shadow: var(--shadow-md), 0 0 0 2px var(--navy);
  }
  .station-card.active-station::before {
    background: var(--navy);
    height: 4px;
  }


  /* PROVIDENCIA wind rose */
  .sc-windrose {
    margin-top: 18px;
    display: flex; flex-direction: column;
    align-items: stretch;
  }
  .sc-windrose .sc-chart-legend {
    margin-bottom: 4px;
  }
  .sc-windrose-svg-wrap {
    display: flex; justify-content: center;
    width: 100%;
  }
  .sc-windrose svg {
    width: 100%; max-width: 210px; height: auto;
    display: block;
  }


  /* STATION STALE — data >1h old shows a semi-transparent overlay */
  .station-card.station-stale {
    position: relative;
  }
  .station-card.station-stale::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(123,138,153,0.32);
    border-radius: var(--radius-lg);
    pointer-events: none;
    z-index: 4;
    backdrop-filter: saturate(0.4);
  }
  /* Lift the X H badge above the overlay so it stays legible */
  .station-card.station-stale .sc-header {
    position: relative;
    z-index: 5;
  }
  .station-card.station-stale .sc-status {
    background: rgba(255,255,255,0.92);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    box-shadow: 0 1px 4px rgba(44,75,102,0.15);
    color: var(--coral) !important;
    font-weight: 800;
  }


  /* Per-station condition icon — small, before the name */
  .sc-cond {
    width: 24px; height: 24px;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(123,138,153,0.18);
    border-radius: 50%;
    color: var(--text-mute);
    margin-right: 2px;
    visibility: visible !important;
  }
  .sc-cond svg { width: 14px; height: 14px; display: block; pointer-events: none; }
  .sc-cond[data-cond="soleado"]    { color: #B85F00; background: #F8BC7E; }
  .sc-cond[data-cond="parcial"]    { color: var(--navy); background: rgba(123,138,153,0.22); }
  .sc-cond[data-cond="nublado"]    { color: white; background: var(--text-mute); }
  .sc-cond[data-cond="niebla"]     { color: var(--navy); background: var(--text-light); }
  .sc-cond[data-cond="ola-calor"]  { color: white; background: var(--coral); }
  .sc-cond[data-cond="noche"]      { color: var(--navy); background: #F4E2A5; }


  /* Last-update indicator under the clock */
  .last-update {
    font-size: 9px; color: var(--text-light); letter-spacing: 1px;
    text-transform: uppercase; margin-top: 3px; font-weight: 600;
    text-align: right;
  }





  /* Δ Urbano-Rural — compact header (big number top-left) + big chart */
  .delta-card {
    display: flex; flex-direction: column;
    min-height: 0; padding: 14px 18px;
  }
  .delta-card .delta-header {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 8px;
  }
  .delta-card .delta-big-wrap {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .delta-card .delta-big-wrap .big {
    font-size: 30px; line-height: 1; margin: 0;
  }
  .delta-card .delta-big-wrap .sub {
    font-size: 9px; margin-top: 4px; margin-bottom: 0;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  }
  .delta-card .delta-titles { flex: 1; text-align: right; }
  .delta-card .delta-titles .card-label { margin-bottom: 2px; }
  .delta-card .delta-titles .card-subtitle { margin-top: 0; }
  .delta-card .delta-chart {
    flex: 1; min-height: 100px;
    margin-bottom: 6px;
  }
  .delta-card .delta-chart svg { width: 100%; height: 100%; display: block; }
  .delta-card .delta-stats {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 6px;
  }


  /* Version tag in footer */
  .dashboard-version {
    margin-left: 12px;
    font-size: 9px; letter-spacing: 1px; font-weight: 600;
    color: var(--text-light); text-transform: uppercase;
    opacity: 0.65;
  }


  /* ============================================================ */
  /* RESPONSIVE — <1200px usa reflow real (sin transform:scale)   */
  /* >=1200px sigue con scale, layout 1920×1080 nativo            */
  /* ============================================================ */
  @media (max-width: 1199px) {
    html, body { overflow: auto; height: auto; }
    .dashboard-wrap {
      width: 100%; height: auto; min-height: 100vh;
      align-items: stretch; justify-content: flex-start;
      overflow: visible;
    }
    .dashboard {
      width: 100%; height: auto; min-height: 100vh;
      transform: none !important;
      grid-template-rows: auto auto 1fr auto auto;
      padding: 20px 22px 14px;
    }
    .toggle-bar { display: none !important; }
  }


  /* Tablet: 768–1199px — main grid 1 col, stations 2 col, bottom 1 col */
  @media (max-width: 1199px) {
    .main-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .map-column { gap: 10px; }
    .map-card { min-height: 420px; }
    .map-card .map-canvas { height: 320px; min-height: 320px; }
    .stations-col {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      gap: 10px;
    }
    .group-header.urban   { grid-column: 1 !important; grid-row: auto !important; }
    .group-header.peripheral { grid-column: 2 !important; grid-row: auto !important; }
    .station-card.s-providencia,
    .station-card.s-stgocentro,
    .station-card.s-renca,
    .station-card.s-cerrillos,
    .station-card.s-sancarlos,
    .station-card.s-chamisero,
    .station-card.s-isla {
      grid-column: auto !important;
      grid-row: auto !important;
    }
    /* Providencia tall pierde su sc-top-row 4-col en tablet, vuelve a flujo normal */
    .s-providencia .sc-top-row {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .bottom-row {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .delta-card .delta-chart { min-height: 140px; }
    .heatmap-card { min-height: 360px; }
    .stats-card { min-height: auto; }
  }

  /* Mobile portrait: <768px — todo en 1 columna */
  @media (max-width: 767px) {
    .dashboard {
      padding: 14px 12px 12px;
      gap: 10px;
      grid-template-rows: auto auto 1fr auto auto;
    }
    header.bar {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .brand { gap: 14px; }
    .brand-text h1 { font-size: 16px; letter-spacing: 1.2px; }
    .brand-text p { font-size: 10px; }
    .logo-muc { width: 50px; height: 56px; }
    .status-cluster {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    /* v1.11: clock right-aligned en mobile, status pill a la izquierda */
    .status-cluster { justify-content: space-between; }
    .clock { text-align: right; margin-left: auto; }
    .clock .time { font-size: 24px; }
    .clock .date { font-size: 9px; }
    .net-pill { padding: 6px 12px; }
    .net-pill span { font-size: 9px; letter-spacing: 1px; }
    /* Daily strip: wrap content into 2 rows */
    .daily-strip {
      flex-wrap: wrap;
      height: auto;
      min-height: 64px;
      padding: 10px 14px;
      gap: 8px;
      border-radius: 16px;
    }
    .ds-conditions {
      width: 100%;
      gap: 6px;
      justify-content: space-around;
      order: 99;
      flex-basis: 100%;
    }
    .ds-condition-icon { width: 28px; height: 28px; }
    .ds-condition-icon svg { width: 14px; height: 14px; }
    .ds-condition-label { font-size: 7px; }
    .ds-temps { margin-left: auto; }
    .ds-season .label { font-size: 16px; }
    .ds-season .date { font-size: 9px; }
    /* Map smaller */
    .map-card { min-height: 460px; padding: 14px; }
    .map-card .map-canvas { height: 360px; min-height: 360px; }
    .map-header { margin-bottom: 4px; }
    .map-legend { padding: 4px 8px; }
    .legend-bar { width: 60px; }
    .out-chip { padding: 4px 8px; }
    .out-chip .info .name { font-size: 9px; }
    /* Stations: 1 column stack */
    .stations-col {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: auto !important;
      gap: 10px;
    }
    .station-card.s-providencia,
    .station-card.s-stgocentro,
    .station-card.s-renca,
    .station-card.s-cerrillos,
    .station-card.s-sancarlos,
    .station-card.s-chamisero,
    .station-card.s-isla,
    .group-header.urban,
    .group-header.peripheral {
      grid-column: 1 !important;
      grid-row: auto !important;
    }
    /* Orden lógico en mobile: Providencia, URBANAS header, sus 3 cards, PERIFÉRICAS header, sus 3 cards */
    .station-card.s-providencia { order: 1; }
    .group-header.urban         { order: 2; }
    .station-card.s-stgocentro  { order: 3; }
    .station-card.s-renca       { order: 4; }
    .station-card.s-cerrillos   { order: 5; }
    .group-header.peripheral    { order: 6; }
    .station-card.s-sancarlos   { order: 7; }
    .station-card.s-chamisero   { order: 8; }
    .station-card.s-isla        { order: 9; }
    /* Mobile: Providencia compacto sin charts ni rosa */
    .s-providencia .sc-chart-multi { display: none; }
    .s-providencia .sc-windrose { display: none; }
    .station-card { padding: 10px 12px; }
    .sc-temp-big { font-size: 24px; }
    .sc-name { font-size: 11px; }
    /* Providencia top-row se mantiene 4-col en mobile (igual que las demás) */
    .s-providencia .sc-top-row { grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr; }
    .s-providencia .sc-chart-multi svg { height: 50px; }
    .sc-windrose svg { max-width: 140px; }
    /* v1.10: Bottom row como carrusel horizontal en mobile (achica la página y resuelve el footer lejano) */
    .bottom-row {
      display: flex !important;
      grid-template-columns: none !important;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 10px;
      padding-bottom: 2px;
      scroll-padding: 0;
    }
    .bottom-row::-webkit-scrollbar { display: none; }
    .delta-card, .heatmap-card, .stats-card {
      flex: 0 0 100%;
      width: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    /* v1.13: carrusel — abandonar flex stretch interno, usar height auto + alturas explícitas en chart */
    .bottom-row .card,
    .bottom-row .delta-card,
    .bottom-row .heatmap-card,
    .bottom-row .stats-card {
      overflow: visible !important;
    }
    .bottom-row .delta-card {
      display: block !important;
      min-height: 0 !important;
      height: auto !important;
      padding: 14px 16px 16px !important;
    }
    .bottom-row .delta-card .delta-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 6px;
    }
    .bottom-row .delta-card .delta-chart {
      height: 150px !important;
      min-height: 0 !important;
      flex: none !important;
      margin: 6px 0 8px !important;
    }
    .bottom-row .delta-card .delta-stats {
      flex: none !important;
      margin-top: 6px !important;
      padding-top: 8px !important;
      border-top: 1px solid rgba(255,255,255,0.2);
      display: flex;
      justify-content: space-between;
    }
    .bottom-row .delta-card .delta-stat .v { font-size: 14px; font-weight: 400; }
    .bottom-row .delta-card .delta-stat .l { font-size: 9px !important; line-height: 1.3; opacity: 0.85; }
    .bottom-row .heatmap-card {
      display: block !important;
      min-height: 0 !important;
      height: auto !important;
      padding: 14px 14px 18px !important;
    }
    .bottom-row .stats-card {
      display: block !important;
      min-height: 0 !important;
      height: auto !important;
      padding: 14px 14px 18px !important;
    }
    /* Carrusel: flex con align-items stretch para que todos sean la misma altura */
    .bottom-row {
      align-items: stretch;
    }
    /* Mobile: temp column más ancha, viento más estrecha */
    .station-card:not(.s-providencia):has(.isla-metric-col) .sc-body {
      grid-template-columns: 1.4fr 0.85fr 0.85fr 1fr !important;
      gap: 6px;
    }
    /* Mobile: bajar font del wind val/lbl para que entren */
    .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col:has(.icon.wind) .val,
    .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col .icon.wind ~ .val {
      font-size: 14px;
    }
    .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col:has(.icon.wind) .lbl,
    .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col .icon.wind ~ .lbl {
      font-size: 8px;
    }
    /* Dots indicator visible solo en mobile */
    .bottom-dots {
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin: 4px 0 2px;
      padding: 0;
    }
    .bottom-dot {
      width: 7px; height: 7px; border-radius: 50%;
      border: none; padding: 0; cursor: pointer;
      background: rgba(44,75,102,0.22);
      transition: background 0.2s, transform 0.2s;
    }
    .bottom-dot.active {
      background: var(--coral);
      transform: scale(1.25);
    }
    /* Heatmap tabs siempre visibles dentro de la card en mobile */
    .heatmap-card .hm-tabs-row { padding: 0 4px; }
    .heatmap-card .heatmap-grid { padding-bottom: 8px; }
    .delta-card .delta-big-wrap .big { font-size: 26px; }
    .delta-card .delta-chart { min-height: 140px; }
    .stats-card .card-label { font-size: 9px; }
    /* Heatmap cells smaller for narrow */
    .hm-cells { font-size: 7px; }
    .hm-months { font-size: 7px; }
    /* v1.11: Footer mobile con jerarquía clara — institución / FONDECYT / versión / logos */
    footer.bar {
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 16px 0 12px;
      border-top: 1px solid rgba(44,75,102,0.08);
      margin-top: 8px;
    }
    .footer-text {
      font-size: 10px;
      text-align: center;
      line-height: 1.5;
      color: var(--navy);
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .footer-text .fondecyt-num {
      display: block;
      margin-top: 4px;
      color: var(--coral);
      font-weight: 700;
      letter-spacing: 0.8px;
    }
    .dashboard-version {
      display: block;
      margin-top: 6px;
      font-size: 8px;
      letter-spacing: 0.6px;
      color: var(--text-mute);
      font-weight: 500;
      text-transform: uppercase;
    }
    .footer-logos {
      gap: 18px;
      opacity: 0.55;
      justify-content: center;
      margin-top: 2px;
    }
    .footer-logo.uc { width: 70px; height: 22px; }
    .footer-logo.mase { width: 66px; height: 16px; }
    .footer-logo.anid-text { width: 58px; height: 20px; }
    .footer-logo.cigiden { width: 24px; height: 27px; }
  }

  /* Mobile landscape muy chico (<480px) — más compacto aún */
  @media (max-width: 479px) {
    .dashboard { padding: 10px 8px 10px; }
    .brand-text h1 { font-size: 14px; }
    .ds-conditions { gap: 4px; }
    .ds-condition { transform: scale(0.85); }
  }


  /* Fallback label content using ~ (sibling) — Providencia top-row sigue usando .sc-metric */
  .s-providencia .sc-top-row .sc-metric .icon.hum ~ .val-block::after  { content: "HR"; }
  .s-providencia .sc-top-row .sc-metric .icon.rad ~ .val-block::after  { content: "RAD"; }
  .s-providencia .sc-top-row .sc-metric .icon.wind ~ .val-block::after { content: ""; display: none; }
  /* Wind dir en Providencia: estilizada igual que en cards chicas (coral, bold) */
  .s-providencia .sc-top-row .sc-metric .sub.dir {
    color: var(--coral); font-weight: 700;
    font-size: 9px; letter-spacing: 0.3px;
    margin-top: 3px;
  }


  /* Mobile-only: heatmap tabs en scroll horizontal + footer visible */
  @media (max-width: 767px) {
    .hm-tabs-row {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 4px -8px 8px;
      padding: 0 8px;
      scrollbar-width: none;
    }
    .hm-tabs-row::-webkit-scrollbar { display: none; }
    .hm-tabs {
      display: inline-flex; flex-wrap: nowrap;
      min-width: max-content;
    }
    .hm-tab {
      flex-shrink: 0;
      font-size: 11px;
    }
    /* Footer en mobile: con espacio para que no se pegue al borde */
    footer.bar {
      padding-bottom: 24px;
    }
    /* Strip mobile: centrar contenido y separar bien */
    .daily-strip {
      gap: 6px;
      padding: 8px 12px;
    }
    .ds-ampm { gap: 6px; }
    .ds-ampm-icon { width: 30px; height: 30px; }
    .ds-ampm-icon svg { width: 16px; height: 16px; }
    .ds-condition-icon { width: 26px; height: 26px; }
    .ds-condition-icon svg { width: 13px; height: 13px; }
  }


  /* ============================================================ */
  /* polish v1.7 — fixes surgical for persistent overflow         */
  /* ============================================================ */

  /* Fix 1: Stack value + unit vertically in station metrics.
     Frees horizontal space + creates clean hierarchy (number prominent, unit subtle). */
  .sc-metric .val,
  .isla-metric-col .val {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    white-space: nowrap;
  }
  .sc-metric .val .u,
  .isla-metric-col .val .u {
    display: block;
    font-size: 8px;
    margin: 2px 0 0 0;
    opacity: 0.7;
    font-weight: 600;
    letter-spacing: 0.4px;
  }
  /* In Providencia top-row, give a bit more breathing room since values are bigger */
  .s-providencia .sc-top-row .sc-metric .val .u {
    font-size: 9px;
    margin-top: 3px;
  }
  /* Isla card values are bigger; unit proportional */
  .isla-metric-col .val .u {
    font-size: 11px;
    margin-top: 2px;
  }
  /* v1.12: cards chicas — val grande y label coral bold visible */
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col .val {
    font-size: 20px;
    font-weight: 300;
  }
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col .val .u {
    font-size: 10px;
  }
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col:has(.icon.wind) .val,
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col .icon.wind ~ .val {
    font-size: 18px;
  }
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col:has(.icon.hum)::after,
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col:has(.icon.rad)::after {
    font-size: 10px;
    letter-spacing: 0.5px;
  }
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col:has(.icon.wind) .lbl,
  .station-card:not(.s-providencia):not(.s-isla) .isla-metric-col .icon.wind ~ .lbl {
    font-size: 10px;
    color: var(--coral);
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-top: 3px;
    white-space: nowrap;
    display: block !important;
  }


  /* Strip layout — bring thermo back small, hide visual noise */
  .ds-temps {
    flex-shrink: 0;
    margin-left: 4px;
    gap: 6px;
  }
  .ds-temp-row .val {
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }


  /* Fix 4: Isla wind column — accommodate dir+degrees label */
  .isla-metric-col:has(.icon.wind) .lbl {
    white-space: nowrap;
    font-size: 8px;
    letter-spacing: 0.3px;
  }
  .isla-metric-col:has(.icon.wind) .val {
    font-size: 18px;
  }
  /* Sibling-selector fallback (browsers sin :has) */
  .isla-metric-col .icon.wind ~ .lbl {
    white-space: nowrap;
    font-size: 8px;
    letter-spacing: 0.3px;
  }
  .isla-metric-col .icon.wind ~ .val {
    font-size: 18px;
  }


  /* ============================================================ */
  /* v1.8 — Strip aggressive simplification + Isla consistency    */
  /* ============================================================ */

  /* Strip aggressive simplification v1.8 — hide dividers + condition labels, smaller icons */
  .ds-divider { display: none !important; }
  .ds-condition-label {
    display: block !important;
    font-size: 7px !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 2px;
  }
  .ds-conditions { gap: 6px !important; }
  .ds-condition-icon { width: 26px !important; height: 26px !important; }
  .ds-condition-icon svg { width: 14px !important; height: 14px !important; }
  .ds-condition.active .ds-condition-icon {
    transform: scale(1.18);
    transition: transform 0.2s ease-out;
  }
  .ds-ampm-icon { width: 30px !important; height: 30px !important; }
  .ds-ampm-icon svg { width: 16px !important; height: 16px !important; }
  .ds-thermo { display: inline-block !important; width: 18px !important; height: 28px !important; flex-shrink: 0; }
  .ds-thermo svg { width: 100%; height: 100%; }
  .ds-temps {
    flex-shrink: 0;
    margin-left: 4px;
    gap: 4px;
    align-items: center;
  }
  .ds-temp-row .val {
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap;
  }
  .daily-strip {
    padding: 8px 16px !important;
    gap: 8px !important;
  }

  /* Isla card consistency v1.9 — Hum/Rad usan CSS ::after, Viento mantiene .lbl con dirección */
  .isla-metric-col:has(.icon.hum) .lbl,
  .isla-metric-col:has(.icon.rad) .lbl { display: none; }
  /* Fallback sin :has() */
  .isla-metric-col .icon.hum ~ .lbl,
  .isla-metric-col .icon.rad ~ .lbl { display: none; }
  .isla-metric-col {
    position: relative;
  }
  .isla-metric-col:has(.icon.hum)::after,
  .isla-metric-col:has(.icon.rad)::after {
    content: "";
    display: block;
    text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
    color: var(--text-mute); text-transform: uppercase;
    line-height: 1; margin-top: 4px;
  }
  .isla-metric-col:has(.icon.hum)::after  { content: "HR"; }
  .isla-metric-col:has(.icon.rad)::after  { content: "RAD"; }
  /* Wind label en Isla: muestra dirección, pero estilizada igual que otros labels */
  .isla-metric-col:has(.icon.wind) .lbl,
  .isla-metric-col .icon.wind ~ .lbl {
    display: block;
    font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
    color: var(--text-mute); text-transform: uppercase;
    text-align: center; margin-top: 4px;
    white-space: nowrap;
  }


  /* Alineación uniforme metric columns — Providencia top-row sigue usando .sc-metric */
  .s-providencia .sc-top-row .sc-metric {
    justify-content: space-between !important;
    min-height: 70px;
    padding: 6px 2px !important;
  }
  .s-providencia .sc-top-row .sc-metric .val-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* Isla también alineada */
  .s-isla .sc-body,
  .station-card:not(.s-providencia):has(.isla-metric-col) .sc-body { align-items: stretch; }
  .isla-metric-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
  }


  /* Mobile heatmap tabs — wrap y fonts ajustados para caber sin scroll */
  @media (max-width: 767px) {
    /* .hm-tabs flex-wrap mobile fix */
    .hm-tabs {
      flex-wrap: wrap !important;
      justify-content: center;
      gap: 4px;
    }
    .hm-tab {
      font-size: 9px !important;
      padding: 4px 8px !important;
      flex-shrink: 1;
    }
    .hm-tab-hour {
      font-size: 8px !important;
    }
    .hm-tabs-row {
      overflow: visible !important;
    }
    /* Footer no se monta sobre heatmap */
    footer.bar { margin-top: 12px; }
    .bottom-row { margin-bottom: 8px; }
  }