:root{
      --bg:#07111f;
      --bg2:#0c1629;
      --panel:#0d1b31cc;
      --line:rgba(255,255,255,.08);
      --soft:rgba(133,173,255,.12);
      --text:#e8eefc;
      --muted:#93a6c7;
      --accent:#73e0ff;
      --accent2:#8b7cff;
      --ok:#4ce0b3;
      --warn:#ffd166;
      --bad:#ff6b7a;
      --gold:#f0c060;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      color:var(--text);
      font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
      background:
        radial-gradient(circle at 15% 20%, rgba(115,224,255,.18), transparent 22%),
        radial-gradient(circle at 85% 10%, rgba(139,124,255,.18), transparent 25%),
        radial-gradient(circle at 50% 100%, rgba(76,224,179,.10), transparent 35%),
        linear-gradient(160deg, #050b15 0%, #08101d 38%, #07111f 100%);
      min-height:100vh;
    }
    .mono{font-family:'JetBrains Mono', monospace;}
    .shell{max-width:1680px;margin:0 auto;padding:22px}
    .panel{
      background:linear-gradient(180deg, rgba(14,26,48,.88), rgba(9,18,33,.90));
      border:1px solid var(--line);
      box-shadow:0 14px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
      backdrop-filter: blur(10px);
    }
    .glow{box-shadow:0 0 0 1px rgba(115,224,255,.08), 0 0 32px rgba(115,224,255,.08)}
    .metric{
      position:relative; overflow:hidden;
      background:linear-gradient(180deg, rgba(17,31,56,.96), rgba(10,20,36,.96));
      border:1px solid rgba(255,255,255,.08);
    }
    .metric:before{
      content:"";
      position:absolute; inset:0 0 auto 0; height:2px;
      background:linear-gradient(90deg, transparent, rgba(115,224,255,.75), rgba(139,124,255,.75), transparent);
    }
    .metric.gold:before{
      background:linear-gradient(90deg, transparent, rgba(240,192,96,.75), rgba(255,209,102,.75), transparent);
    }
    .metric.danger:before{
      background:linear-gradient(90deg, transparent, rgba(255,107,122,.75), rgba(255,149,113,.75), transparent);
    }
    .grid-bg{
      background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:22px 22px;
    }
    .tiny{font-size:.72rem}
    .slider{accent-color:#73e0ff}
    .slider-gold{accent-color:#f0c060}
    .pill{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04)
    }
    .table-wrap::-webkit-scrollbar{height:10px;width:10px}
    .table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:20px}
    .heat-cell{
      min-width:84px; text-align:right; font-variant-numeric:tabular-nums;
      border-radius:10px; padding:8px 10px;
    }
    canvas{max-height:360px}
    .dropzone.dragover{
      border-color:rgba(115,224,255,.8)!important;
      background:rgba(115,224,255,.08)!important;
    }
    .section-title{
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#9ab0d7;
      font-size:.74rem;
      font-weight:700;
    }
    /* Nav tabs */
    .nav-tab{
      padding:10px 20px; border-radius:14px; font-size:.88rem; font-weight:500; cursor:pointer;
      border:1px solid transparent; transition:all .2s; color:var(--muted);
    }
    .nav-tab:hover{background:rgba(255,255,255,.06); color:var(--text);}
    .nav-tab.active{
      background:rgba(115,224,255,.1); border-color:rgba(115,224,255,.25); color:var(--accent);
    }
    .nav-tab.tab-fin.active{
      background:rgba(240,192,96,.1); border-color:rgba(240,192,96,.25); color:var(--gold);
    }
    .tab-section{display:none;}
    .tab-section.active{display:block;}

    /* Comerciales ranking bar */
    .rank-bar-bg{background:rgba(255,255,255,.07); border-radius:6px; height:8px; overflow:hidden;}
    .rank-bar-fill{height:100%; border-radius:6px; transition:width .4s ease;}

    /* Financiero badge */
    .fin-badge-red{background:rgba(255,107,122,.15); border:1px solid rgba(255,107,122,.3); color:#ff8090; border-radius:12px; padding:3px 10px; font-size:.75rem; font-weight:600;}
    .fin-badge-ok{background:rgba(76,224,179,.12); border:1px solid rgba(76,224,179,.25); color:#4ce0b3; border-radius:12px; padding:3px 10px; font-size:.75rem; font-weight:600;}
    .fin-badge-warn{background:rgba(255,209,102,.12); border:1px solid rgba(255,209,102,.25); color:#ffd166; border-radius:12px; padding:3px 10px; font-size:.75rem; font-weight:600;}

    /* Pulsing dot */
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
    .pulse{animation:pulse 2s ease-in-out infinite;}

    /* Tooltip */
    .tooltip-box{
      position:absolute; z-index:100;
      background:rgba(10,18,34,.97); border:1px solid rgba(115,224,255,.2);
      border-radius:14px; padding:10px 14px; font-size:.8rem; pointer-events:none;
      box-shadow:0 8px 24px rgba(0,0,0,.4); min-width:180px;
    }