:root{
  --bg:#050f0c; --bg2:#07140f;
  --panel:#0b1f18; --panel2:#0e2820;
  --line:rgba(52,211,153,.13); --line-strong:rgba(52,211,153,.28);
  --em:#34d399; --em-deep:#10b981; --em-glow:rgba(52,211,153,.35);
  --gold:#e4b85c; --cyan:#22d3ee; --indigo:#8b93f8; --rose:#f2777a; --slate:#93a7b8;
  --ink:#eafaf2; --muted:#8fb3a4; --muted2:#5f8074;
  --r:16px; --side-w:236px; --side-w-collapsed:74px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(16,185,129,.12), transparent 60%),
    radial-gradient(900px 500px at 105% 0%, rgba(34,211,238,.07), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed; min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--em-glow);color:#fff}
.accent{background:linear-gradient(120deg,var(--em),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--em);font-weight:600}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--em);box-shadow:0 0 12px 2px var(--em-glow)}

/* ============ LOGIN ============ */
.login-body{display:grid;place-items:center;min-height:100vh;padding:24px}
.login-card{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line-strong);
  border-radius:22px;padding:38px 36px;width:100%;max-width:400px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.login-title{font-family:'Sora';font-weight:800;font-size:34px;margin:14px 0 6px;letter-spacing:-.02em}
.login-sub{color:var(--muted);font-size:14px;margin-bottom:24px}
.login-form{display:flex;flex-direction:column;gap:15px}
.login-error{background:rgba(242,119,122,.12);border:1px solid rgba(242,119,122,.4);color:#ffc9ca;
  padding:11px 14px;border-radius:11px;font-size:13px;margin-bottom:18px}
.login-hint{margin-top:20px;font-size:12px;color:var(--muted2);text-align:center;line-height:1.6}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-size:12px;color:var(--muted);font-weight:500}
.field input,.field textarea,.field select{background:var(--bg);border:1px solid var(--line-strong);color:var(--ink);
  padding:11px 13px;border-radius:11px;font-size:14px;font-family:'Inter';outline:none;transition:.16s;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--em);box-shadow:0 0 0 3px var(--em-glow)}
.field textarea{resize:vertical}
.field select{cursor:pointer}
.field small{font-size:11.5px;color:var(--muted2)}

/* ============ BUTTONS ============ */
.btn-primary{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:linear-gradient(180deg,var(--em),var(--em-deep));color:#04140d;font-weight:600;
  border:none;padding:11px 18px;border-radius:12px;font-size:13.5px;cursor:pointer;font-family:'Inter';
  transition:.16s;box-shadow:0 10px 24px -12px var(--em-glow)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-full{width:100%;padding:13px}
.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding:11px 18px;border-radius:12px;font-size:13.5px;cursor:pointer;font-family:'Inter';transition:.16s}
.btn-ghost:hover{color:var(--ink);border-color:var(--em)}
.clearbtn{border:1px solid var(--line-strong);background:transparent;color:var(--muted);padding:8px 15px;
  border-radius:10px;font-size:12.5px;cursor:pointer;font-family:'Inter';transition:.16s;font-weight:500}
.clearbtn:hover{color:var(--rose);border-color:var(--rose)}

/* ============ APP SHELL ============ */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--side-w);flex:none;background:linear-gradient(180deg,rgba(14,40,32,.7),rgba(11,31,24,.55));
  border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  backdrop-filter:blur(8px);transition:width .22s ease;z-index:40}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 14px;gap:8px}
.logo{display:flex;align-items:center;gap:11px;overflow:hidden}
.logo-mark{width:28px;height:28px;flex:none;border-radius:8px;
  background:conic-gradient(from 140deg,var(--em),var(--cyan),var(--em-deep),var(--em));
  box-shadow:0 0 18px -2px var(--em-glow)}
.logo-text{font-family:'Sora';font-weight:600;font-size:16px;white-space:nowrap}
.logo-text b{font-weight:800}
.side-collapse{background:transparent;border:1px solid var(--line);color:var(--muted);width:30px;height:30px;
  border-radius:9px;cursor:pointer;display:grid;place-items:center;flex:none;transition:.16s}
.side-collapse:hover{color:var(--em);border-color:var(--em)}
.side-collapse svg{width:16px;height:16px}
.nav{display:flex;flex-direction:column;gap:3px;padding:10px 12px;flex:1;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;border:none;
  background:transparent;color:var(--muted);cursor:pointer;font-family:'Inter';font-size:13.5px;font-weight:500;
  transition:.15s;text-align:left;width:100%}
.nav-item:hover{background:rgba(52,211,153,.07);color:var(--ink)}
.nav-item.active{background:linear-gradient(90deg,rgba(52,211,153,.16),transparent);color:var(--em);font-weight:600;
  box-shadow:inset 2px 0 0 var(--em)}
.ni{width:19px;height:19px;flex:none}
.nav-label{white-space:nowrap;overflow:hidden}
.nav-sep{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);font-weight:600;
  font-family:'Space Grotesk';padding:14px 14px 6px}
.side-bottom{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.user-pill{display:flex;align-items:center;gap:11px;padding:8px;border-radius:11px;overflow:hidden}
.avatar{width:34px;height:34px;flex:none;border-radius:10px;background:linear-gradient(140deg,var(--em),var(--cyan));
  color:#04140d;font-weight:700;display:grid;place-items:center;font-family:'Sora';font-size:15px}
.user-meta{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
.user-meta b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta span{font-size:11px;color:var(--muted2)}
.logout{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:11px;color:var(--muted);
  text-decoration:none;font-size:13px;transition:.15s}
.logout:hover{background:rgba(242,119,122,.1);color:var(--rose)}
.logout svg{width:18px;height:18px;flex:none}

/* Sidebar recolhida */
.app.collapsed .sidebar{width:var(--side-w-collapsed)}
.app.collapsed .nav-label,.app.collapsed .logo-text,.app.collapsed .user-meta,.app.collapsed .nav-sep{display:none}
.app.collapsed .side-collapse svg{transform:rotate(180deg)}
.app.collapsed .nav-item,.app.collapsed .logout{justify-content:center;gap:0}
.app.collapsed .user-pill{justify-content:center}
.app.collapsed .side-top{justify-content:center;flex-wrap:wrap}

/* ============ MAIN ============ */
.main{flex:1;min-width:0;padding:26px 30px 60px;max-width:1360px}
.topbar{display:none;align-items:center;gap:14px;margin-bottom:16px}
.menu-toggle{background:var(--panel);border:1px solid var(--line-strong);color:var(--ink);width:40px;height:40px;
  border-radius:11px;cursor:pointer;display:grid;place-items:center}
.menu-toggle svg{width:20px;height:20px}
.topbar-title{font-family:'Sora';font-weight:700;font-size:18px}

.tab-panel{display:none;animation:fade .3s ease}
.tab-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:22px}
.page-title{font-family:'Sora';font-weight:800;font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.02em;margin:9px 0 5px}
.page-sub{color:var(--muted);font-size:13.5px;max-width:56ch}
.story{font-family:'Space Grotesk';font-size:13px;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;max-width:400px}
.story b{color:var(--em);font-weight:600}

/* ============ FILTERS (dashboard - intacto) ============ */
.filters{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;margin-bottom:22px;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.filters.compact{padding:14px 16px;margin-bottom:18px}
.frow{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.fgroup{display:flex;flex-direction:column;gap:9px;min-width:0}
.flabel{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);font-weight:600;font-family:'Space Grotesk'}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);background:transparent;color:var(--muted);padding:6px 13px;
  border-radius:999px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:'Inter';transition:.16s;
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.chip:hover{color:var(--ink);border-color:var(--em)}
.chip .cd{width:8px;height:8px;border-radius:50%;flex:none}
.chip.on{background:var(--em);border-color:var(--em);color:#04140d;font-weight:600}
.chip.on .cd{background:#04140d!important}
.search{position:relative}
.search input{background:var(--bg);border:1px solid var(--line-strong);color:var(--ink);padding:9px 13px 9px 34px;
  border-radius:10px;font-size:13px;font-family:'Inter';width:230px;outline:none;transition:.16s}
.search input:focus{border-color:var(--em);box-shadow:0 0 0 3px var(--em-glow)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted2)}
.months{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.mbtn{border:1px solid var(--line);background:transparent;color:var(--muted2);width:34px;height:30px;border-radius:8px;
  font-size:11px;font-weight:600;cursor:pointer;transition:.14s;font-family:'Space Grotesk'}
.mbtn:hover{color:var(--ink);border-color:var(--em)}
.mbtn.on{background:linear-gradient(180deg,var(--em),var(--em-deep));color:#04140d;border-color:transparent}
.clearbtn#clear{margin-left:auto;align-self:center}

/* ============ KPIs (intacto) ============ */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.kpi{position:relative;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r);padding:18px 18px 16px;overflow:hidden;transition:.2s}
.kpi::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(160deg,var(--line-strong),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kpi:hover{transform:translateY(-3px)}
.kpi .glow{position:absolute;width:120px;height:120px;border-radius:50%;filter:blur(38px);opacity:.5;top:-40px;right:-30px}
.kpi .klabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
  font-family:'Space Grotesk';display:flex;align-items:center;gap:7px}
.kpi .kval{font-family:'Sora';font-weight:800;font-size:34px;line-height:1;margin:12px 0 4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .kfoot{font-size:12px;color:var(--muted2)}
.kpi .kfoot b{color:var(--em);font-weight:600}
.ic{width:14px;height:14px;stroke-width:2}

/* ============ CHARTS (intacto) ============ */
.grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-bottom:16px}
.card{background:linear-gradient(170deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;box-shadow:0 24px 60px -34px rgba(0,0,0,.8)}
.card h3{font-family:'Sora';font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px;margin-bottom:2px}
.card h3 .bar{width:3px;height:15px;border-radius:2px;background:linear-gradient(var(--em),var(--cyan))}
.card .ch-sub{font-size:12px;color:var(--muted2);margin-bottom:16px;padding-left:12px}
.canvas-box{position:relative;height:250px}
.foot-legend{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted2)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.leg .cd{width:8px;height:8px;border-radius:50%}

/* ============ TABLES ============ */
.thead-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.count-pill{font-family:'Space Grotesk';font-size:12px;color:var(--em);background:var(--em-glow);padding:4px 12px;border-radius:999px;font-weight:600}
.table-scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:640px}
.tbl thead th{text-align:left;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted2);
  font-weight:600;font-family:'Space Grotesk';padding:0 12px 11px;border-bottom:1px solid var(--line)}
.tbl tbody tr{border-bottom:1px solid rgba(52,211,153,.06);transition:.14s}
.tbl tbody tr:hover{background:rgba(52,211,153,.045)}
.tbl td{padding:13px 12px;font-size:13px;vertical-align:middle}
.t-main{font-weight:600;color:var(--ink);max-width:420px}
.t-sub{color:var(--muted);font-size:12px;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.badge .bd{width:7px;height:7px;border-radius:50%}
.tcost{font-family:'Space Grotesk';font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.empty{text-align:center;padding:44px;color:var(--muted2);font-size:14px;line-height:1.6}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{color:var(--em);border-color:var(--em)}
.icon-btn.danger:hover{color:var(--rose);border-color:var(--rose)}
.icon-btn svg{width:15px;height:15px}
.progress-cell{display:flex;align-items:center;gap:8px}
.pbar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;min-width:60px}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--em),var(--cyan))}
.pval{font-size:11px;color:var(--muted);font-family:'Space Grotesk';width:32px;text-align:right}
.sector-tags{display:flex;gap:5px;flex-wrap:wrap}
.stag{font-size:11px;padding:2px 8px;border-radius:7px;background:rgba(52,211,153,.1);color:var(--em);font-weight:500}
.stag.muted{background:rgba(147,167,184,.12);color:var(--slate)}

/* ============ TIMELINE (auditoria) ============ */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:14px;padding:13px 4px;border-bottom:1px solid rgba(52,211,153,.06)}
.tl-item:last-child{border-bottom:none}
.tl-dot{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:0}
.tl-dot svg{width:16px;height:16px}
.tl-body{flex:1;min-width:0}
.tl-desc{font-size:13.5px;color:var(--ink)}
.tl-meta{font-size:11.5px;color:var(--muted2);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.tl-meta b{color:var(--muted);font-weight:600}
.ev-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.04em;text-transform:uppercase}

/* ============ MODAL ============ */
.modal-backdrop{position:fixed;inset:0;background:rgba(3,10,8,.72);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:22px;z-index:100}
.modal-backdrop.open{display:flex}
.modal{background:linear-gradient(175deg,var(--panel2),var(--panel));border:1px solid var(--line-strong);
  border-radius:20px;width:100%;max-width:720px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9);animation:pop .24s ease}
.modal-sm{max-width:520px}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.modal-head h2{font-family:'Sora';font-weight:700;font-size:19px}
.modal-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.modal-x{background:transparent;border:none;color:var(--muted);cursor:pointer;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;transition:.15s}
.modal-x:hover{background:rgba(242,119,122,.1);color:var(--rose)}
.modal-x svg{width:18px;height:18px}
.modal-body{padding:22px 24px;overflow-y:auto}
.modal-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form-grid .span2{grid-column:1/-1}
.fl{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px}
.fl .w{color:var(--em);font-family:'Sora';font-weight:700}
.fl .req{color:var(--rose);font-style:normal}
.range{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:rgba(255,255,255,.09);outline:none;padding:0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--em);cursor:pointer;box-shadow:0 0 0 4px var(--em-glow)}
.range::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--em);cursor:pointer;box-shadow:0 0 0 4px var(--em-glow)}
.form-err{margin-top:14px;color:#ffc9ca;font-size:13px;background:rgba(242,119,122,.1);border:1px solid rgba(242,119,122,.35);
  padding:10px 13px;border-radius:10px;display:none}
.form-err.show{display:block}
.switch-row{flex-direction:row;align-items:center;justify-content:space-between}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:99px;cursor:pointer;transition:.2s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.slider{background:var(--em)}
.switch input:checked+.slider::before{transform:translateX(20px)}

/* ============ TOASTS ============ */
.toast-wrap{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{background:var(--panel2);border:1px solid var(--line-strong);color:var(--ink);padding:13px 16px;border-radius:12px;
  font-size:13.5px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);display:flex;align-items:center;gap:10px;
  animation:slidein .25s ease;max-width:340px}
.toast.ok{border-color:rgba(52,211,153,.5)}
.toast.err{border-color:rgba(242,119,122,.5)}
.toast .ti{width:8px;height:8px;border-radius:50%;flex:none}
.toast.ok .ti{background:var(--em)} .toast.err .ti{background:var(--rose)}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){.kpis{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr}}
@media(max-width:860px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:0 0 60px rgba(0,0,0,.6)}
  .app.mobile-open .sidebar{transform:none}
  .app.collapsed .sidebar{width:var(--side-w)}
  .app.collapsed .nav-label,.app.collapsed .logo-text,.app.collapsed .user-meta,.app.collapsed .nav-sep{display:block}
  .topbar{display:flex}
  .main{padding:18px 16px 50px}
  .side-collapse{display:none}
  .form-grid{grid-template-columns:1fr}
  .backdrop-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30;display:none}
  .app.mobile-open .backdrop-scrim{display:block}
}
@media(max-width:520px){.kpis{grid-template-columns:repeat(2,1fr)}.story{max-width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}