/* ============================================================
   OMNI REPORTES v3 — Municipio de Quilmes
   TEMA: BLANCO por defecto / OSCURO con clase .dark en body
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=DM+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Variables tema CLARO (default) ── */
:root {
  --purple:    #783884;
  --purple-lt: #9b52a8;
  --purple-d:  #5a2663;
  --purple-bg: rgba(120,56,132,.10);
  --purple-bg2:rgba(120,56,132,.05);

  --gold:      #b87c1a;
  --gold-bg:   rgba(184,124,26,.10);
  --teal:      #157a62;
  --teal-bg:   rgba(21,122,98,.10);
  --red:       #c0392b;
  --red-bg:    rgba(192,57,43,.10);
  --green:     #1a7a4a;
  --green-bg:  rgba(26,122,74,.10);
  --blue:      #2563a8;
  --blue-bg:   rgba(37,99,168,.10);

  /* Superficies */
  --bg0:  #f5f4f8;
  --bg1:  #ffffff;
  --bg2:  #faf9fc;
  --bg3:  #f0eef5;
  --bg4:  #e8e5f0;

  /* Bordes */
  --line:  rgba(120,56,132,.09);
  --line2: rgba(120,56,132,.18);

  /* Texto */
  --t1: #1a1228;
  --t2: #5a4d6e;
  --t3: #9b8fb0;

  --r:8px; --r-lg:12px;
  --ff:'Nunito',sans-serif;
  --fm:'DM Mono',monospace;
  --sidebar-w:230px;
  --topbar-h:58px;
}

/* ── Variables tema OSCURO ── */
body.dark {
  --purple-bg: rgba(120,56,132,.15);
  --purple-bg2:rgba(120,56,132,.08);
  --gold:      #c9933a; --gold-bg:   rgba(201,147,58,.13);
  --teal:      #1e9e82; --teal-bg:   rgba(30,158,130,.13);
  --red:       #d94f4f; --red-bg:    rgba(217,79,79,.13);
  --green:     #2daa6b; --green-bg:  rgba(45,170,107,.12);
  --blue:      #3a7fd4; --blue-bg:   rgba(58,127,212,.13);
  --bg0:  #0f0f14; --bg1:#16161e; --bg2:#1e1e28; --bg3:#262633; --bg4:#2e2e3e;
  --line:  rgba(255,255,255,.07);
  --line2: rgba(255,255,255,.14);
  --t1:#ecedf5; --t2:#9296b0; --t3:#565a72;
}

html,body{min-height:100%;background:var(--bg0);color:var(--t1);font-family:var(--ff);font-size:14px;line-height:1.5;transition:background .2s,color .2s}

/* ── Layout ── */
.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;min-height:100vh}

/* ── Topbar ── */
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 20px 0 0;background:var(--bg1);border-bottom:2px solid var(--purple);position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(120,56,132,.08)}
.topbar-brand{display:flex;align-items:center;background:var(--purple);height:var(--topbar-h);padding:0 18px;gap:12px;flex-shrink:0}
.topbar-brand img{height:32px;filter:brightness(0) invert(1)}
.brand-text{display:flex;flex-direction:column}
.brand-text .line1{font-size:14px;font-weight:800;color:#fff;letter-spacing:.02em;line-height:1}
.brand-text .line2{font-size:9px;font-weight:600;color:rgba(255,255,255,.65);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.topbar-divider{width:1px;height:28px;background:rgba(255,255,255,.15);margin:0 4px}
.topbar-app{display:flex;flex-direction:column}
.topbar-app .t-title{font-size:13px;font-weight:800;color:var(--t1);letter-spacing:.02em}
.topbar-app .t-sub{font-size:9px;font-weight:700;color:var(--t2);letter-spacing:.1em;text-transform:uppercase}
.topbar-sep{flex:1}
.topbar-user{font-size:11px;color:var(--t2);font-family:var(--fm)}
.btn-logout{font-size:11px;padding:5px 12px;border:1px solid var(--line2);border-radius:var(--r);background:transparent;color:var(--t2);cursor:pointer;font-family:var(--ff);font-weight:700;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.btn-logout:hover{border-color:var(--red);color:var(--red)}

/* ── Theme switch ── */
.theme-switch{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t2);cursor:pointer;user-select:none;margin-left:8px}
.theme-switch input{display:none}
.sw-track{width:36px;height:20px;background:var(--bg3);border-radius:10px;position:relative;border:1px solid var(--line2);transition:background .2s}
.sw-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--t3);transition:transform .2s,background .2s}
.theme-switch input:checked ~ .sw-track{background:var(--purple-bg);border-color:var(--purple)}
.theme-switch input:checked ~ .sw-track .sw-thumb{transform:translateX(16px);background:var(--purple)}

/* ── Sidebar ── */
.sidebar{background:var(--bg1);border-right:1px solid var(--line);padding:12px 0 24px;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto}
.nav-section{padding:14px 16px 5px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--t3);text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;color:var(--t2);cursor:pointer;border-left:3px solid transparent;transition:all .15s;font-size:13px;font-weight:600;user-select:none;text-decoration:none}
.nav-item:hover{color:var(--t1);background:var(--purple-bg2)}
.nav-item.active{color:var(--purple);border-left-color:var(--purple);background:var(--purple-bg);font-weight:700}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}

/* ── Main ── */
.main{padding:24px;overflow-y:auto;background:var(--bg0)}

/* ── Vistas ── */
.view{display:none}
.view.active{display:block}

/* ── Page header ── */
.page-header{margin-bottom:22px;border-left:4px solid var(--purple);padding-left:14px}
.page-title{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.01em}
.page-sub{font-size:12px;color:var(--t2);margin-top:3px;font-weight:600}

/* ── Section label ── */
.section-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-lt, var(--purple));margin:20px 0 10px;display:flex;align-items:center;gap:8px}
.section-label::after{content:'';flex:1;height:1px;background:var(--line)}

/* ── Metric cards ── */
.metric-grid{display:grid;gap:12px;margin-bottom:18px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

.mcard{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(120,56,132,.05)}
.mcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px}
.mcard.c-purple::after{background:var(--purple)}
.mcard.c-gold::after{background:var(--gold)}
.mcard.c-teal::after{background:var(--teal)}
.mcard.c-red::after{background:var(--red)}
.mcard.c-blue::after{background:var(--blue)}
.mcard.c-green::after{background:var(--green)}
.mcard-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.mcard-value{font-size:28px;font-weight:800;color:var(--t1);line-height:1;font-variant-numeric:tabular-nums}
.mcard-value.sm{font-size:22px}
.mcard-sub{font-size:11px;color:var(--t2);margin-top:5px;font-weight:600}
.mcard-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:6px;letter-spacing:.03em}
.badge-warn{background:var(--gold-bg);color:var(--gold)}
.badge-ok{background:var(--green-bg);color:var(--green)}
.badge-danger{background:var(--red-bg);color:var(--red)}
.badge-info{background:var(--purple-bg);color:var(--purple)}
.badge-blue{background:var(--blue-bg);color:var(--blue)}

/* ── Alert ── */
.alert-box{background:var(--gold-bg);border:1px solid rgba(184,124,26,.25);border-left:4px solid var(--gold);border-radius:var(--r);padding:12px 16px;margin-bottom:16px;font-size:12px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:10px}

/* ── Chart cards ── */
.chart-card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(120,56,132,.05)}
.chart-card h3{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;margin-bottom:14px}
.chart-row{display:grid;gap:16px}
.split-2{grid-template-columns:1fr 1fr}
.split-3{grid-template-columns:1fr 1fr 1fr}
.split-6-4{grid-template-columns:6fr 4fr}

/* ── Tablas ── */
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);padding:6px 10px;border-bottom:1px solid var(--line)}
.data-table td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--t1);font-family:var(--fm);font-size:12px}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--purple-bg2)}
.data-table .name-col{font-family:var(--ff);font-weight:700}

/* ── Progress ── */
.prog-bar{background:var(--bg3);border-radius:3px;height:6px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;transition:width .4s}

/* ── Heatmap ── */
.heatmap-wrap{overflow-x:auto}
.heatmap-grid{display:grid;gap:3px;min-width:600px}
.hm-cell{height:22px;border-radius:3px;font-size:9px;font-family:var(--fm);display:flex;align-items:center;justify-content:center;cursor:default}
.hm-label{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10px;color:var(--t3);font-family:var(--fm)}
.hm-hour{display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--t3);font-family:var(--fm)}

/* ── Pills ── */
.pill-group{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;cursor:pointer;border:1px solid var(--line2);color:var(--t2);background:transparent;transition:all .15s}
.pill:hover{border-color:var(--purple);color:var(--t1)}
.pill.active{background:var(--purple-bg);border-color:var(--purple);color:var(--purple)}

/* ── Legend ── */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t2);font-weight:600}
.leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}

/* ── Responsive ── */
@media(max-width:1100px){.cols-5{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.split-6-4,.split-2,.split-3{grid-template-columns:1fr}}
@media(max-width:768px){.layout{grid-template-columns:1fr}.sidebar{display:none}.cols-3{grid-template-columns:repeat(2,1fr)}}