:root,[data-theme="light"]{
  --sindatos:#5c6370;--sindatos-bg:#e4e4e6;--sindatos-glow:rgba(92,99,112,.15);
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;
  --color-surface-offset:#f3f0ec;--color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;
  --color-primary-highlight:#cedcd8;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
  --radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --font-body:'Inter','Helvetica Neue',sans-serif;--font-mono:'JetBrains Mono',monospace;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --verde:#437a22;--verde-bg:#d4dfcc;--verde-glow:rgba(67,122,34,.25);
  --amarilla:#d19900;--amarilla-bg:#e9e0c6;--amarilla-glow:rgba(209,153,0,.25);
  --naranja:#da7101;--naranja-bg:#e7d7c4;--naranja-glow:rgba(218,113,1,.25);
  --roja:#a12c7b;--roja-bg:#e0ced7;--roja-glow:rgba(161,44,123,.35);
}
[data-theme="dark"]{
  --color-bg:#111110;--color-surface:#1a1918;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;--color-primary-highlight:#313b3b;
  --shadow-sm:0 1px 2px oklch(0 0 0/.25);--shadow-md:0 4px 12px oklch(0 0 0/.35);
  --shadow-lg:0 12px 32px oklch(0 0 0/.45);
  --verde:#6daa45;--verde-bg:#2a3d22;--verde-glow:rgba(109,170,69,.2);
  --amarilla:#e8af34;--amarilla-bg:#3d3620;--amarilla-glow:rgba(232,175,52,.2);
  --naranja:#fdab43;--naranja-bg:#3d2e1a;--naranja-glow:rgba(253,171,67,.2);
  --roja:#d163a7;--roja-bg:#3a1f30;--roja-glow:rgba(209,99,167,.25);
  --sindatos:#8a8c90;--sindatos-bg:#25262a;--sindatos-glow:rgba(138,140,144,.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-bg);display:flex;flex-direction:column}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
a,button{transition:color var(--transition),background var(--transition),box-shadow var(--transition)}

/* Layout principal */
.app-layout{display:grid;grid-template-columns:220px 1fr;grid-template-rows:56px 1fr;min-height:100dvh}
.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-divider);position:sticky;top:0;z-index:100}
.sidebar{background:var(--color-surface);border-right:1px solid var(--color-divider);padding:var(--space-4) 0;overflow-y:auto}
.main{overflow-y:auto;padding:var(--space-6);background:var(--color-bg)}

/* Logo */
.logo-mark{display:flex;align-items:center;gap:var(--space-3)}
.logo-text{font-size:var(--text-sm);font-weight:700;letter-spacing:-.01em}
.logo-sub{font-size:var(--text-xs);color:var(--color-text-muted)}
.topbar-right{display:flex;align-items:center;gap:var(--space-4)}
.timestamp{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--verde);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.theme-btn{padding:var(--space-2);border-radius:var(--radius-md);color:var(--color-text-muted)}
.theme-btn:hover{background:var(--color-surface-offset);color:var(--color-text)}

/* Sidebar Nav */
.nav-section-label{font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:var(--space-4) var(--space-5) var(--space-2)}
.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);width:100%;text-align:left}
.nav-item:hover{color:var(--color-text);background:var(--color-surface-offset)}
.nav-item.active{color:var(--color-primary);background:var(--color-primary-highlight);font-weight:500}
.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.7}
.nav-item.active .nav-icon{opacity:1}
.sidebar-divider{height:1px;background:var(--color-divider);margin:var(--space-3) var(--space-5)}

/* Estacion badge en sidebar */
.nav-estacion-badge{display:inline-flex;align-items:center;margin-left:auto;padding:1px 6px;border-radius:var(--radius-full);font-size:10px;font-weight:700;letter-spacing:.04em}
.nav-estacion-badge.verde{background:var(--verde-bg);color:var(--verde)}
.nav-estacion-badge.amarilla{background:var(--amarilla-bg);color:var(--amarilla)}
.nav-estacion-badge.naranja{background:var(--naranja-bg);color:var(--naranja)}
.nav-estacion-badge.roja{background:var(--roja-bg);color:var(--roja)}
.nav-estacion-badge.sindatos{background:var(--sindatos-bg);color:var(--sindatos);border:1px dashed var(--sindatos)}

/* Tipografía páginas */
.page-title{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-1)}
.page-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}
.section-title{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-4)}

/* Breadcrumb de estación */
.estacion-breadcrumb{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6)}
.breadcrumb-back{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border)}
.breadcrumb-back:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-highlight)}
.breadcrumb-sep{color:var(--color-text-faint)}
.breadcrumb-current{font-size:var(--text-xs);color:var(--color-text-muted)}

/* KPI Grid */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}
.kpi-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-bottom:var(--space-2)}
.kpi-val{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.kpi-sub{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-1)}

/* Semaforos */
.semaforo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}
.semaforo-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition)}
.semaforo-card:hover{box-shadow:var(--shadow-md)}
.semaforo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.semaforo-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.horizon-badge{font-family:var(--font-mono);font-size:var(--text-xs);padding:2px var(--space-2);border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);font-weight:600}
.semaforo-light-wrap{display:flex;justify-content:center;margin-bottom:var(--space-4)}
.semaforo-lights{display:flex;flex-direction:column;gap:10px;background:#111;border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);box-shadow:0 0 0 2px rgba(0,0,0,.3),inset 0 2px 8px rgba(0,0,0,.5)}
.light{width:44px;height:44px;border-radius:50%;transition:all .4s ease}
.light.roja-l{background:#3a1520}
.light.amarilla-l{background:#2a2010}
.light.naranja-l{background:#2a1a08}
.light.verde-l{background:#1a2e10}
.light.active.roja-l{background:var(--roja);box-shadow:0 0 16px 6px var(--roja-glow),0 0 4px 2px var(--roja)}
.light.active.amarilla-l{background:var(--amarilla);box-shadow:0 0 16px 6px var(--amarilla-glow),0 0 4px 2px var(--amarilla)}
.light.active.naranja-l{background:var(--naranja);box-shadow:0 0 16px 6px var(--naranja-glow),0 0 4px 2px var(--naranja)}
.light.active.verde-l{background:var(--verde);box-shadow:0 0 16px 6px var(--verde-glow),0 0 4px 2px var(--verde)}
.semaforo-info{text-align:center}
.nivel-pred{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em}
.alerta-text{font-size:var(--text-sm);font-weight:600;margin-top:2px}
.mae-row{font-size:var(--text-xs);color:var(--color-text-faint);font-family:var(--font-mono);margin-top:var(--space-1)}

/* Charts */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-6)}
.chart-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.chart-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.chart-title{font-size:var(--text-base);font-weight:600}
.chart-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.chart-wrap{position:relative;height:200px}

/* Tabla */
.table-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:var(--space-6)}
.table-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider)}
.table-title{font-size:var(--text-base);font-weight:600}
table{width:100%;border-collapse:collapse}
th{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-divider)}
td{font-size:var(--text-sm);padding:var(--space-3) var(--space-4);border-bottom:1px solid oklch(from var(--color-divider) l c h/.5)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--color-surface-offset)}
td.mono{font-family:var(--font-mono);font-size:var(--text-xs)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:600;padding:2px 8px;border-radius:var(--radius-full)}
.badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.verde{background:var(--verde-bg);color:var(--verde)}.verde .badge-dot{background:var(--verde)}
.amarilla{background:var(--amarilla-bg);color:var(--amarilla)}.amarilla .badge-dot{background:var(--amarilla)}
.naranja{background:var(--naranja-bg);color:var(--naranja)}.naranja .badge-dot{background:var(--naranja)}
.roja{background:var(--roja-bg);color:var(--roja)}.roja .badge-dot{background:var(--roja)}
.sindatos{background:var(--sindatos-bg);color:var(--sindatos);border:1px dashed color-mix(in oklch,var(--sindatos) 40%,transparent)}.sindatos .badge-dot{background:var(--sindatos)}

/* Modelo ML */
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}
.model-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.model-label{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.accuracy-bar-wrap{height:6px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-3)}
.accuracy-bar{height:100%;background:var(--color-primary);border-radius:var(--radius-full)}
.accuracy-nums{display:flex;justify-content:space-between;align-items:baseline}
.accuracy-pct{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:700}
.accuracy-mae{font-size:var(--text-xs);color:var(--color-text-faint);font-family:var(--font-mono)}

/* Vista general estaciones */
.estaciones-overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin-bottom:var(--space-6)}
.estacion-overview-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition)}
.estacion-overview-card:hover{box-shadow:var(--shadow-lg);border-color:var(--color-primary);transform:translateY(-2px)}
.estacion-overview-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-4)}
.estacion-overview-name{font-size:var(--text-base);font-weight:700;letter-spacing:-.01em}
.estacion-overview-tipo{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.estacion-overview-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4)}
.estacion-kpi-mini{padding:var(--space-3);background:var(--color-surface-offset);border-radius:var(--radius-md)}
.estacion-kpi-mini-label{font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.estacion-kpi-mini-val{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700}
.estacion-overview-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-divider)}
.estacion-overview-action{font-size:var(--text-xs);color:var(--color-primary);font-weight:600;display:flex;align-items:center;gap:4px}

/* Estación detail page */
.estacion-detail-header{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-6);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between}
.estacion-detail-info{}
.estacion-detail-name{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.estacion-detail-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1);display:flex;gap:var(--space-4)}
.estacion-detail-badges{display:flex;gap:var(--space-2);align-items:center}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:600;padding:3px 10px;border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);border:1px solid var(--color-border)}
.tag-primary{background:var(--color-primary-highlight);color:var(--color-primary);border-color:transparent}

/* Alerta banner */
.alerta-banner{border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);display:flex;align-items:center;gap:var(--space-4)}
.alerta-banner.verde{background:var(--verde-bg);border:1px solid color-mix(in oklch,var(--verde) 30%,transparent)}
.alerta-banner.amarilla{background:var(--amarilla-bg);border:1px solid color-mix(in oklch,var(--amarilla) 30%,transparent)}
.alerta-banner.naranja{background:var(--naranja-bg);border:1px solid color-mix(in oklch,var(--naranja) 30%,transparent)}
.alerta-banner.roja{background:var(--roja-bg);border:1px solid color-mix(in oklch,var(--roja) 30%,transparent)}
.alerta-banner-icon{font-size:1.5rem;flex-shrink:0}
.alerta-banner-text{}
.alerta-banner-title{font-weight:700;font-size:var(--text-base)}
.alerta-banner-desc{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}

/* Estado cargando / error */
.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--color-text-muted);gap:var(--space-4)}
.loading-spinner{width:32px;height:32px;border:2px solid var(--color-divider);border-top-color:var(--color-primary);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-state{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-8);text-align:center;color:var(--color-text-muted)}
.error-state strong{display:block;color:var(--color-text);margin-bottom:var(--space-2)}

/* Mapa */
#map-container{width:100%;height:calc(100dvh - 240px);border-radius:var(--radius-xl);border:1px solid var(--color-divider);overflow:hidden;box-shadow:var(--shadow-sm)}

/* Overrides para Leaflet en dark mode */
[data-theme="dark"] .leaflet-container{background:var(--color-surface-offset) !important}
[data-theme="dark"] .leaflet-control-zoom-in,[data-theme="dark"] .leaflet-control-zoom-out,[data-theme="dark"] .leaflet-control{background:var(--color-surface) !important;border-color:var(--color-border) !important;color:var(--color-text) !important}
[data-theme="dark"] .leaflet-popup-content-wrapper{background:var(--color-surface) !important;color:var(--color-text) !important}
[data-theme="dark"] .leaflet-popup-tip{background:var(--color-surface) !important}

/* Responsive */
@media(max-width:768px){
  .app-layout{grid-template-columns:1fr;grid-template-rows:56px auto 1fr}
  .sidebar{grid-row:2;border-right:none;border-bottom:1px solid var(--color-divider);padding:var(--space-2) 0;display:flex;flex-wrap:wrap;gap:0}
  .nav-section-label{display:none}
  .sidebar-divider{display:none}
  .nav-item{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .semaforo-grid{grid-template-columns:1fr}
  .charts-grid{grid-template-columns:1fr}
  .estaciones-overview-grid{grid-template-columns:1fr}
  .estacion-overview-body{grid-template-columns:1fr 1fr}
  .estacion-detail-header{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .model-grid{grid-template-columns:1fr}
  #map-container{height:calc(100dvh - 200px)}
}