:root{
    --bg:#f5f6f8;
    --surface:#ffffff;
    --surface-2:#eef0f4;
    --border:#dde1e8;
    --ink:#1a2233;
    --ink-soft:#5b6472;
    --ink-faint:#8b93a3;
    --accent:#33538f;
    --accent-ink:#ffffff;
    --accent-soft:#e7ecf7;
    --good:#1f8a5f;
    --good-soft:#e4f5ec;
    --bad:#c1443d;
    --bad-soft:#fbe8e6;
    --warn:#a8720f;
    --warn-soft:#fbf0dc;
    --sidebar-bg:#1a2233;
    --sidebar-ink:#c6cbd8;
    --sidebar-ink-active:#ffffff;
    --sidebar-hover:#242e45;
    --focus:#33538f;
    --shadow: 0 1px 2px rgba(20,24,38,.04), 0 4px 16px rgba(20,24,38,.06);
    --radius:10px;
  }
  :root:not([data-theme="light"]){
    @media (prefers-color-scheme: dark){
      --bg:#12151d;
      --surface:#181c26;
      --surface-2:#1f2430;
      --border:#2a3040;
      --ink:#e7e9ee;
      --ink-soft:#a7adba;
      --ink-faint:#6d7383;
      --accent:#7f9cdb;
      --accent-ink:#0e1420;
      --accent-soft:#202b45;
      --good:#4bbf8c;
      --good-soft:#173328;
      --bad:#e8746c;
      --bad-soft:#3a1f1f;
      --warn:#d9a441;
      --warn-soft:#3a2f16;
      --sidebar-bg:#0d1017;
      --sidebar-ink:#8d94a5;
      --sidebar-ink-active:#ffffff;
      --sidebar-hover:#181d29;
      --focus:#7f9cdb;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"]{
    --bg:#12151d;
    --surface:#181c26;
    --surface-2:#1f2430;
    --border:#2a3040;
    --ink:#e7e9ee;
    --ink-soft:#a7adba;
    --ink-faint:#6d7383;
    --accent:#7f9cdb;
    --accent-ink:#0e1420;
    --accent-soft:#202b45;
    --good:#4bbf8c;
    --good-soft:#173328;
    --bad:#e8746c;
    --bad-soft:#3a1f1f;
    --warn:#d9a441;
    --warn-soft:#3a2f16;
    --sidebar-bg:#0d1017;
    --sidebar-ink:#8d94a5;
    --sidebar-ink-active:#ffffff;
    --sidebar-hover:#181d29;
    --focus:#7f9cdb;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.4);
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:14px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{font-family:'Sora',Inter,sans-serif; text-wrap:balance;}
  .num, .money, td.num, .kpi-value{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}

  a{color:inherit;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

  /* ---- App shell ---- */
  #app{display:flex; height:100vh; min-height:600px;}

  .sidebar{
    width:232px; flex:none;
    background:var(--sidebar-bg);
    color:var(--sidebar-ink);
    display:flex; flex-direction:column;
    padding:18px 12px;
    gap:4px;
  }
  .brand{
    color:#fff; font-weight:700; font-size:16px;
    padding:6px 10px 18px 10px;
    display:flex; align-items:center; gap:9px;
  }
  .brand .mark{
    width:26px;height:26px;border-radius:7px;
    background:linear-gradient(135deg,var(--accent),#6c8fd4);
    display:flex;align-items:center;justify-content:center;
    font-family:'Sora',sans-serif; font-size:13px; color:#fff; font-weight:800;
  }
  .nav-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
    color:#5b6272; margin:14px 10px 6px 10px; font-weight:600;
  }
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:8px; cursor:pointer;
    font-size:13.5px; font-weight:500; color:var(--sidebar-ink);
    border:none; background:none; text-align:left; width:100%;
  }
  .nav-item svg{width:16px;height:16px; flex:none; opacity:.85;}
  .nav-item:hover{background:var(--sidebar-hover); color:#fff;}
  .nav-item.active{background:var(--accent); color:#fff;}
  .sidebar-foot{
    margin-top:auto; padding:10px; font-size:12px; color:#5b6272;
    border-top:1px solid #262c3d; padding-top:14px;
  }

  .main{flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden;}

  .topbar{
    height:60px; flex:none; background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:16px;
    padding:0 22px;
  }
  .topbar h1{font-size:16px; margin:0; font-weight:700;}
  .company-switch{
    margin-left:auto; display:flex; align-items:center; gap:10px;
  }
  select.company{
    appearance:none; background:var(--surface-2); border:1px solid var(--border);
    color:var(--ink); padding:7px 30px 7px 12px; border-radius:8px; font-size:13px;
    font-weight:600; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%235b6472'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
  }
  .avatar{
    width:32px;height:32px;border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex;align-items:center;justify-content:center; font-weight:700; font-size:12.5px;
  }

  .view{display:none; flex:1; overflow-y:auto; padding:24px 28px 40px;}
  .view.active{display:block;}

  .page-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap;}
  .page-head h2{margin:0 0 4px; font-size:20px;}
  .page-head p{margin:0; color:var(--ink-soft); font-size:13px;}

  .btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface); color:var(--ink); font-size:13px; font-weight:600;
    cursor:pointer;
  }
  .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  .btn.ghost{background:transparent;}
  .btn svg{width:14px;height:14px;}

  /* KPI cards */
  .kpi-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:22px;}
  @media (min-width:1250px){
    .kpi-row{grid-template-columns:repeat(5, 1fr);}
  }
  .kpi{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px; box-shadow:var(--shadow);
  }
  .kpi-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600;}
  .kpi-value{font-size:22px; font-weight:700; margin-top:8px;}
  .kpi-sub{font-size:12px; color:var(--ink-soft); margin-top:5px; display:flex; align-items:center; gap:5px;}
  .kpi.good .kpi-value{color:var(--good);}
  .kpi.bad .kpi-value{color:var(--bad);}
  .tag-up{color:var(--good);} .tag-down{color:var(--bad);}

  .grid-2{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:20px; align-items:start;}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
  .card-head{padding:16px 18px 0; display:flex; align-items:center; justify-content:space-between;}
  .card-head h3{font-size:14.5px; margin:0;}
  .card-body{padding:14px 18px 18px;}
  .card-foot{padding:10px 18px; border-top:1px solid var(--border);}

  .empresa-pill{
    display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 6px;
    border-radius:999px; font-size:11.5px; font-weight:700; background:var(--surface-2); color:var(--ink-soft);
  }
  .empresa-dot{width:7px;height:7px;border-radius:50%;}
  .dot-a{background:#33538f;} .dot-b{background:#a8720f;}

  /* bars chart (css only) */
  .bars{display:flex; align-items:flex-end; gap:10px; height:150px; padding:6px 4px 0;}
  .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
  .bar-stack{width:100%; max-width:26px; display:flex; flex-direction:column-reverse; border-radius:4px 4px 2px 2px; overflow:hidden;}
  .bar-seg-in{background:var(--good);}
  .bar-seg-out{background:var(--bad); opacity:.85;}
  .bar-month{font-size:10.5px; color:var(--ink-faint);}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-faint); font-weight:600; padding:9px 10px; border-bottom:1px solid var(--border);
  }
  td{padding:11px 10px; border-bottom:1px solid var(--border); color:var(--ink);}
  td.num{text-align:right;}
  tr:last-child td{border-bottom:none;}
  .table-wrap{overflow-x:auto;}

  .pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700;}
  .pill.good{background:var(--good-soft); color:var(--good);}
  .pill.bad{background:var(--bad-soft); color:var(--bad);}
  .pill.warn{background:var(--warn-soft); color:var(--warn);}
  .pill.info{background:var(--accent-soft); color:var(--accent);}
  .pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}

  .toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
  .toolbar input[type=text], .toolbar select{
    padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface);
    color:var(--ink); font-size:13px;
  }
  .toolbar .spacer{flex:1;}
  .seg{display:flex; background:var(--surface-2); border-radius:8px; padding:3px; gap:2px;}
  .seg button{padding:6px 12px; border-radius:6px; border:none; background:none; color:var(--ink-soft); font-size:12.5px; font-weight:600; cursor:pointer;}
  .seg button.active{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08);}

  /* budget doc preview */
  .budget-layout{display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start;}
  .doc{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:34px 38px; min-height:520px;
  }
  .doc-head{display:flex; justify-content:space-between; border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:20px;}
  .doc-head .from h2{margin:0; font-size:17px;}
  .doc-head .from p{margin:2px 0 0; color:var(--ink-soft); font-size:12px;}
  .doc-head .meta{text-align:right; font-size:12px; color:var(--ink-soft);}
  .doc-head .meta strong{display:block; font-size:15px; color:var(--ink); font-family:'Sora',sans-serif;}
  .doc table td, .doc table th{padding:9px 4px;}
  .doc-total{display:flex; justify-content:flex-end; margin-top:14px;}
  .doc-total table{width:auto; min-width:220px;}
  .doc-total td{border:none; padding:5px 4px;}
  .doc-total .grand td{font-weight:700; font-size:15px; border-top:1px solid var(--border); padding-top:9px;}

  .form-field{margin-bottom:13px;}
  .form-field label{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
  .form-field input, .form-field select, .form-field textarea{
    width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:7px;
    background:var(--surface-2); color:var(--ink); font-size:13px; font-family:inherit;
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

  .perm-grid{display:grid; grid-template-columns:1.3fr repeat(4,90px); gap:0; font-size:12.5px;}
  .perm-grid .h{font-weight:700; color:var(--ink-faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:8px 6px; text-align:center;}
  .perm-grid .h.mod{text-align:left;}
  .perm-grid .row{display:contents;}
  .perm-grid .mod-name{padding:10px 6px; border-top:1px solid var(--border); font-weight:600;}
  .perm-grid .cell{padding:10px 6px; border-top:1px solid var(--border); display:flex; justify-content:center;}
  .chk{width:17px;height:17px; border-radius:5px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .chk.on{background:var(--accent); border-color:var(--accent); color:#fff;}
  .chk.off{background:var(--surface-2);}
  .chk svg{width:11px;height:11px;}

  .bank-row{display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border);}
  .bank-row:last-child{border-bottom:none;}
  .bank-icon{width:38px;height:38px;border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:#fff; flex:none;}
  .bank-meta{flex:1; min-width:0;}
  .bank-meta strong{display:block; font-size:13.5px;}
  .bank-meta span{font-size:12px; color:var(--ink-soft);}
  .bank-balance{text-align:right;}
  .bank-balance .v{font-weight:700; font-size:14.5px;}
  .bank-balance .l{font-size:11px; color:var(--ink-faint);}

  .proj-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;}
  .proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .proj-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
  .proj-top h4{margin:0 0 4px; font-size:14.5px;}
  .proj-top p{margin:0; font-size:12px; color:var(--ink-soft);}
  .proj-bar{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin:12px 0 8px;}
  .proj-bar > div{height:100%; background:var(--accent);}
  .proj-nums{display:flex; justify-content:space-between; font-size:12px;}
  .proj-nums .in{color:var(--good); font-weight:700;} .proj-nums .out{color:var(--bad); font-weight:700;}

  /* ---------- Chart Styles ---------- */
  .chart-container{
    padding: 16px 16px 20px;
    position: relative;
  }
  .chart-stats-row{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .chart-stat-box{
    flex: 1;
    min-width: 140px;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
  }
  .chart-stat-box .l{ font-size: 11.5px; color: var(--ink-soft); font-weight: 500; margin-bottom: 4px; }
  .chart-stat-box .v{ font-size: 15.5px; font-weight: 700; color: var(--ink); }
  .chart-stat-box .v.good{ color: var(--good); }
  .chart-stat-box .v.bad{ color: var(--bad); }

  .chart-legend{
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--ink-soft);
  }
  .chart-legend-item{
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .chart-legend-dot{
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }
  .chart-legend-dot.rec{ background: #10b981; }
  .chart-legend-dot.pag{ background: #f43f5e; }
  .chart-legend-dot.sal{ background: #38bdf8; border-radius: 50%; }

  .chart-detail-banner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    font-size: 12.5px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .chart-detail-banner .m-title{ font-weight: 700; color: var(--ink); font-size: 13.5px; }
  .chart-detail-banner .m-rec{ color: var(--good); font-weight: 600; }
  .chart-detail-banner .m-pag{ color: var(--bad); font-weight: 600; }
  .chart-detail-banner .m-sal{ color: #38bdf8; font-weight: 700; }

  .chart-svg-wrap{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-svg-wrap svg{
    display: block;
    width: 100%;
    min-width: 720px;
    height: auto;
  }

  .chart-hover-col{
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .chart-hover-col:hover rect.bg-hover{
    opacity: 0.12 !important;
  }
  .chart-hover-col:hover rect.bar-rec{
    filter: brightness(1.2);
  }
  .chart-hover-col:hover rect.bar-pag{
    filter: brightness(1.2);
  }
  .chart-hover-col:hover circle.dot-sal{
    r: 6px;
  }

  .login-wrap{height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%, var(--accent-soft), var(--bg) 60%);}
  .login-card{width:380px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:34px 32px;}
  .login-card .brand{color:var(--ink); justify-content:center; padding:0 0 22px;}
  .login-card h1{font-size:18px; text-align:center; margin:0 0 4px;}
  .login-card p.sub{text-align:center; color:var(--ink-soft); font-size:12.5px; margin:0 0 22px;}

  .btn-menu-toggle{
    display:none; background:transparent; border:1px solid var(--border); border-radius:8px;
    padding:6px 10px; font-size:16px; cursor:pointer; color:var(--ink);
  }
  .btn-close-sidebar{
    display:none; background:transparent; border:none; color:var(--sidebar-ink);
    font-size:18px; cursor:pointer; margin-left:auto; padding:4px 8px;
  }
  .sidebar-overlay{
    display:none;
    position:fixed; inset:0; background:rgba(10,14,24,0.5); backdrop-filter:blur(3px);
    z-index:90; opacity:0; transition:opacity .25s ease;
  }
  .sidebar-overlay.active{
    display:block;
    opacity:1;
  }

  @media (min-width:769px){
    .sidebar-overlay{display:none !important;}
  }

  @media (max-width:980px){
    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .grid-2, .budget-layout, .proj-grid{grid-template-columns:1fr;}
  }

  @media (max-width:768px){
    .btn-menu-toggle{display:inline-flex; align-items:center; justify-content:center;}
    .btn-close-sidebar{display:block;}

    #app{display:block; height:auto; min-height:100vh;}
    
    .sidebar{
      position:fixed; top:0; bottom:0; left:0; width:270px;
      z-index:100; transform:translateX(-100%);
      transition:transform .28s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:4px 0 24px rgba(0,0,0,0.35);
      overflow-y:auto; -webkit-overflow-scrolling:touch;
    }
    .sidebar.open{
      transform:translateX(0);
    }

    .main{width:100%; min-height:100vh; overflow-x:hidden;}
    
    .topbar{
      padding:0 12px; gap:8px; position:sticky; top:0; z-index:40;
    }
    .topbar h1{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .company-switch{gap:6px;}
    select.company{max-width:135px; font-size:11.5px; padding:6px 22px 6px 8px;}
    .avatar{width:28px; height:28px; font-size:11px;}
    #btn-logout{padding:5px 8px; font-size:11.5px;}

    .view{padding:14px 12px 36px;}
    
    .page-head{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px;}
    .page-head > div{width:100%;}
    .page-head .btn{width:100%; justify-content:center; padding:10px;}
    .page-head h2{font-size:18px;}

    .kpi-row{grid-template-columns:1fr; gap:10px; margin-bottom:14px;}
    .kpi{padding:14px 14px;}
    .kpi-value{font-size:20px;}

    .toolbar{flex-direction:column; align-items:stretch; gap:8px;}
    .toolbar .seg{overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; justify-content:flex-start;}
    .toolbar .seg button{white-space:nowrap; padding:6px 10px; font-size:12px;}
    .toolbar input[type=text], .toolbar select{width:100%;}

    .form-row{grid-template-columns:1fr; gap:8px;}

    .modal{
      width:96vw !important; max-width:96vw !important; max-height:92vh !important;
      padding:16px 14px; border-radius:12px;
    }
    .modal-actions{flex-direction:column-reverse; gap:8px;}
    .modal-actions button{width:100%; justify-content:center; padding:10px; margin:0;}

    .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;}
    table{font-size:12px; min-width:550px;}
    th, td{padding:8px 8px;}
    
    .doc{padding:16px 12px; min-height:auto;}
    .doc-head{flex-direction:column; gap:12px;}
    .doc-head .meta{text-align:left;}

    .perm-grid{overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:480px;}

    .login-wrap{padding:16px;}
    .login-card{width:100%; max-width:380px; padding:24px 18px;}
  }

  @media (max-width:480px){
    select.company{max-width:105px; font-size:11px;}
    .topbar h1{display:none;}
  }