:root{
    --bg:#0A0A0D;
    --bg-panel:#14141B;
    --bg-panel-2:#1B1B24;
    --line:#2A2A36;
    --purple:#820AD1;
    --purple-soft:#B27CE8;
    --cyan:#00E0FF;
    --amber:#F2A93B;
    --coral:#FF6B7A;
    --green:#3DDC97;
    --text:#ECE9F5;
    --text-dim:#9C99AC;
    --text-faint:#67647A;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
  }
  .mono{font-family:'JetBrains Mono',monospace;}
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}

  /* HERO */
  .hero{
    padding:64px 48px 40px;
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(600px 300px at 85% -10%, rgba(130,10,209,0.35), transparent 60%),
      radial-gradient(500px 260px at 10% 110%, rgba(0,224,255,0.12), transparent 60%);
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
  .hero h1{
    font-size:44px;
    font-weight:700;
    margin:0 0 14px;
    max-width:820px;
    letter-spacing:-0.01em;
  }
  .hero h1 span{color:var(--purple-soft);}
  .hero p.sub{
    color:var(--text-dim);
    font-size:16px;
    max-width:640px;
    margin:0 0 28px;
  }
  .hero-meta{
    display:flex;
    gap:32px;
    flex-wrap:wrap;
  }
  .hero-meta div{border-left:2px solid var(--purple); padding-left:12px;}
  .hero-meta .k{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint);}
  .hero-meta .v{font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--text); margin-top:2px;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 48px;}
  section{padding:56px 0; border-bottom:1px solid var(--line);}
  section:last-of-type{border-bottom:none;}

  .section-head{display:flex; align-items:baseline; gap:16px; margin-bottom:8px;}
  .section-num{font-family:'JetBrains Mono',monospace; color:var(--purple-soft); font-size:14px;}
  .section-head h2{font-size:26px; margin:0; font-weight:600;}
  .section-desc{color:var(--text-dim); max-width:760px; margin:10px 0 32px; font-size:14.5px;}

  .grid{display:grid; gap:20px;}
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  @media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}

  .card{
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px 22px 12px;
  }
  .card h3{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--text-dim);
    font-weight:600;
    margin:0 0 4px;
  }
  .card .card-sub{font-size:12.5px; color:var(--text-faint); margin-bottom:14px;}
  .chart-box{position:relative; height:280px;}
  .chart-box.tall{height:340px;}

  /* Granularity toggle (e.g. Enerxia habilitado vs. contratado: diario/mensual/anual) */
  .gran-toggle{display:flex; align-items:center; gap:4px; margin-bottom:12px; flex-wrap:wrap;}
  .gran-toggle button{
    background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text-dim);
    font-family:'JetBrains Mono',monospace; font-size:11px; padding:4px 11px;
    border-radius:5px; cursor:pointer; transition:background 0.15s, color 0.15s;
  }
  .gran-toggle button:hover{color:var(--text);}
  .gran-toggle button.active{background:var(--purple); border-color:var(--purple); color:#fff;}
  .gran-toggle .gran-status{font-size:11px; color:var(--text-faint); margin-left:6px;}

  /* KPI cards */
  .kpi{
    background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--line);
    border-radius:10px;
    padding:20px;
  }
  .kpi .k-label{font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:8px;}
  .kpi .k-value{font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--text);}
  .kpi .k-value.purple{color:var(--purple-soft);}
  .kpi .k-value.cyan{color:var(--cyan);}
  .kpi .k-value.amber{color:var(--amber);}
  .kpi .k-delta{font-family:'JetBrains Mono',monospace; font-size:12.5px; margin-top:6px;}
  .k-delta.up{color:var(--green);}
  .k-delta.down{color:var(--coral);}
  .k-delta.flat{color:var(--text-faint);}

  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  th,td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--line);}
  th{color:var(--text-faint); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:0.04em;}
  td.num{font-family:'JetBrains Mono',monospace; text-align:right;}
  td.rank-num{
    color:var(--text-faint);
    font-size:12px;
    width:24px;
  }
  tr.highlight td.rank-num{color:var(--purple-soft); font-weight:700;}
  tr.highlight td{background:rgba(130,10,209,0.14); font-weight:600;}
  .bar-cell{display:flex; align-items:center; gap:8px;}
  .bar-track{flex:1; height:6px; background:var(--line); border-radius:3px; overflow:hidden;}
  .bar-fill{height:100%; border-radius:3px; background:var(--purple);}

  .callout{
    border-left:3px solid var(--amber);
    background:rgba(242,169,59,0.08);
    padding:14px 18px;
    border-radius:0 8px 8px 0;
    font-size:13.5px;
    color:var(--text-dim);
    margin-bottom:24px;
  }
  .callout b{color:var(--amber);}
  .callout.cyan{border-left-color:var(--cyan); background:rgba(0,224,255,0.06);}
  .callout.cyan b{color:var(--cyan);}

  .legend-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:12px; color:var(--text-dim);}
  .legend-row .li{display:flex; align-items:center; gap:6px;}
  .legend-row .sw{width:10px; height:10px; border-radius:3px;}

  .timeline{position:relative; padding-left:28px;}
  .timeline::before{content:'';position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line);}
  .t-item{position:relative; margin-bottom:20px;}
  .t-item::before{content:''; position:absolute; left:-28px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(0,224,255,0.15);}
  .t-item.exit::before{background:var(--coral); box-shadow:0 0 0 4px rgba(255,107,122,0.15);}
  .t-item.rebrand::before{background:var(--amber); box-shadow:0 0 0 4px rgba(242,169,59,0.15);}
  .t-date{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-faint);}
  .t-title{font-weight:600; margin:2px 0 3px;}
  .t-desc{font-size:13px; color:var(--text-dim);}

  footer{padding:36px 48px 60px; color:var(--text-faint); font-size:12.5px;}
  footer .wrap{border-top:1px solid var(--line); padding-top:24px;}

  .tag{
    display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
    padding:2px 8px; border-radius:20px; border:1px solid var(--purple); color:var(--purple-soft);
    text-transform:uppercase; letter-spacing:0.05em;
  }

  /* FILTER BAR */
  .filter-bar{
    position:sticky; top:0; z-index:50;
    background:rgba(10,10,13,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .filter-inner{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:14px 48px;
  }
  .filter-label{
    display:flex; align-items:center; gap:7px;
    font-family:'JetBrains Mono',monospace; font-size:11.5px;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim);
    margin-right:4px;
  }
  .filter-select{
    background:var(--bg-panel-2);
    border:1px solid var(--line);
    color:var(--text);
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    padding:6px 10px;
    border-radius:6px;
    outline:none;
    cursor:pointer;
  }
  .filter-select:focus{border-color:var(--purple);}
  .filter-sep{color:var(--text-faint); font-size:13px;}
  .filter-reset{
    background:transparent;
    border:1px solid var(--purple);
    color:var(--purple-soft);
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    font-weight:600;
    padding:6px 14px;
    border-radius:6px;
    cursor:pointer;
    transition:background 0.15s;
  }
  .filter-reset:hover{background:rgba(130,10,209,0.15);}
  .filter-export{
    display:flex; align-items:center; gap:7px;
    background:var(--purple);
    border:1px solid var(--purple);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    font-weight:600;
    padding:6px 14px;
    border-radius:6px;
    cursor:pointer;
    transition:background 0.15s, box-shadow 0.15s;
  }
  .filter-export:hover{background:#9412E8; box-shadow:0 0 0 3px rgba(130,10,209,0.25);}
  .filter-hint{
    font-size:12px; color:var(--text-faint); margin-left:auto;
    font-family:'JetBrains Mono',monospace;
  }
  @media (max-width:900px){
    .filter-inner{padding:14px 20px;}
    .filter-hint{width:100%; margin-left:0; order:10;}
  }

  /* PRINT / PDF EXPORT */
  @media print{
    @page{ margin:14mm 12mm; }
    html, body{ background:#0A0A0D !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
    .filter-bar{ display:none !important; }
    section{ break-inside:avoid-page; padding:28px 0; }
    .card, .kpi, .timeline{ break-inside:avoid-page; }
    .grid-2, .grid-3{ break-inside:avoid-page; }
    .hero{ padding:32px 32px 24px; }
    .wrap{ padding:0 32px; }
    canvas{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }