:root{
  --brand:#39b54a; --brand-ink:#1a7c2d;
  --imc-gray:#f2f4f7; --ink:#101828; --muted:#475467;
  --line:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#fff;color:var(--ink)}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:#fff}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:32px}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-weight:800;color:var(--brand-ink)}
.brand-sub{font-size:12px;color:#667085}

/* Layout */
.container{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - 56px)}
.sidebar{border-right:1px solid var(--line);background:var(--imc-gray);padding:14px}
.group{margin-bottom:14px}
.group h3{margin:8px 8px;color:#344054;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.site-list,.month-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;max-height:65vh;overflow:auto;scrollbar-gutter:stable}
.item{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:inherit}
.item.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(57,181,74,.18)}
.item-meta{display:flex;flex-direction:column}
.item-title{font-weight:700}
.item-sub{font-size:12px;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.year-header{margin:8px 0 4px 0;padding:4px 8px;font-size:12px;color:#344054;text-transform:uppercase;letter-spacing:.04em}

/* Main */
.main{padding:16px;display:flex;flex-direction:column;gap:16px}
.card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px;overflow:hidden}
.title{margin:0 0 6px 0;font-size:18px;color:var(--brand-ink)}
.subtitle{margin:0;color:#667085}
.title-sm{margin:0 0 2px 0;font-size:14px;color:var(--brand-ink)}
.subtitle-sm{margin:0 0 8px 0;color:#667085;font-size:12px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:sticky;top:70px;z-index:10;background:#fff;padding-top:4px}
.stat{font-weight:800;font-size:22px}

/* Grids */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chart-card,.chart-card-mid,.chart-card-tall,.chart-card-full{position:relative;contain:content}

/* Canvas dimensiones fijas (para evitar bucles de resize) */
.chart-canvas{width:100%;display:block}
#ch-time{height:420px}
#ch-compare{height:340px}
#ch-origin{height:320px}
#ch-weekday{height:320px}
#ch-devices{height:320px}
#ch-scatter{height:480px}

/* Heatmap */
.full-bleed{grid-column:1 / -1}
.flex{display:flex;flex-direction:column}
.heatmap-wrap{width:100%;height:520px}
.heatmap-wrap canvas{width:100%;height:100%;display:block}

/* Tables & controls */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table.small{font-size:12px}
.table th,.table td{border-bottom:1px solid #eef2f7;padding:8px 6px;text-align:left;vertical-align:top}
.table-title{margin:10px 0 6px 0;font-size:13px;color:#344054}
.outlier-wrap{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);max-height:240px;overflow:auto}

.tools{display:flex;gap:8px;align-items:center}
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.subtle{color:#667085;font-size:12px}
.notice{font-size:12px;color:#667085}
.toolbar{display:flex;gap:8px;align-items:center;margin:6px 0 10px 0;flex-wrap:wrap}
.input{border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:220px}

/* Error banner */
.fatal{border:1px solid #ffd1d1;background:#fff4f4;color:#8a1f1f;border-radius:12px;padding:12px}

/* Footer */
.footer{border-top:1px solid var(--line);padding:16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#667085}
.footer a{color:var(--brand-ink);text-decoration:none}
.footer a:hover{text-decoration:underline}
.legal{display:flex;gap:12px}

/* Responsive */
@media (max-width:1200px){
  .container{grid-template-columns:1fr}
  .sidebar{order:2}
  .kpis{grid-template-columns:repeat(2,1fr);top:70px}
  .grid{grid-template-columns:1fr}
  #ch-time{height:360px}
  #ch-compare{height:300px}
  #ch-origin,#ch-weekday,#ch-devices{height:300px}
  #ch-scatter{height:420px}
  .heatmap-wrap{height:460px}
}