/* =====================================================================
   ASA BRANCA — design system do app (fonte da verdade: docs/design-tokens.json
   e docs/asa-branca-design.html). Centro de comando: grafite quente, vermelho
   e ouro só como acento/ação. Todo número em mono tabular.
   ===================================================================== */
:root{
  --asa-red-900:#7E0808; --asa-red-800:#9B0A0A; --asa-red-700:#B30D0C;
  --asa-red-600:#CB141B; --asa-red-500:#E11D1D; --asa-red-400:#F2554F;
  --asa-gold-600:#C99700; --asa-gold-500:#F5B301; --asa-gold-400:#FCCC22; --asa-gold-300:#FFDD66;
  --ink-950:#120F0D; --ink-900:#1A1613; --ink-850:#211C18; --ink-800:#2A231E;
  --ink-750:#322A23; --ink-700:#3D342C; --ink-600:#52473D; --ink-400:#8B7F73;
  --ink-300:#A99E92; --ink-200:#CFC6BC; --ink-100:#E9E3DB; --paper:#F6F2EC; --white:#fff;
  --ok:#19A974; --warn:#F5B301; --crit:#E11D1D; --info:#2E90C9;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 8px 24px rgba(0,0,0,.45);
  --sh-glow:0 0 0 1px rgba(203,20,27,.35),0 8px 30px rgba(203,20,27,.18);
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font-body); color:var(--ink-100);
  background:radial-gradient(1200px 600px at 80% -10%,rgba(203,20,27,.10),transparent 60%),
             radial-gradient(900px 500px at -10% 10%,rgba(245,179,1,.06),transparent 55%),var(--ink-900);
  -webkit-font-smoothing:antialiased; line-height:1.5;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

/* ---- frame: sidebar + main ---- */
.app{display:grid; grid-template-columns:236px 1fr; min-height:100vh;}
@media(max-width:840px){.app{grid-template-columns:1fr;} .side{display:none;}}
.side{background:var(--ink-950); border-right:1px solid var(--ink-700); padding:18px 14px; display:flex; flex-direction:column;}
.brandmark{display:flex; flex-direction:column; gap:7px; padding:4px 4px 16px;}
.brandmark .logo-img{width:100%; max-width:196px; height:auto; display:block;}
.brandmark .prod{font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:.2em; color:var(--asa-gold-400); text-transform:uppercase; padding-left:2px;}
/* marca antiga (fallback) */
.brandmark .logo{width:40px; height:40px; border-radius:11px; background:linear-gradient(150deg,var(--asa-red-600),var(--asa-red-800)); display:grid; place-items:center; box-shadow:var(--sh-glow); flex:0 0 auto;}
.side .grp{font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-600); padding:18px 12px 8px;}
.side .lk{display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:var(--r); color:var(--ink-300); font-size:13.5px; font-weight:500; cursor:pointer; transition:.15s; text-decoration:none;}
.side .lk:hover{background:var(--ink-850); color:var(--ink-100);}
.side .lk.active{background:linear-gradient(90deg,rgba(203,20,27,.22),rgba(203,20,27,.04)); color:#fff; box-shadow:inset 3px 0 0 var(--asa-red-500);}
.side .side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--ink-800); display:flex; align-items:center; gap:10px;}
.avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(150deg,var(--asa-gold-400),var(--asa-gold-600)); color:#3a2b00; display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 auto;}
.side-foot .who{font-size:12.5px; line-height:1.2;} .side-foot .who small{display:block; color:var(--ink-400); font-size:11px;}
.side-foot .sair{margin-left:auto; background:none; border:1px solid var(--ink-700); color:var(--ink-400); border-radius:var(--r); padding:6px 9px; cursor:pointer; font-size:12px;}
.side-foot .sair:hover{border-color:var(--asa-red-400); color:var(--asa-red-400);}

.main{display:flex; flex-direction:column; min-width:0;}
.top{display:flex; align-items:center; gap:14px; padding:16px 22px; border-bottom:1px solid var(--ink-700); background:var(--ink-850); position:sticky; top:0; z-index:10;}
.top h3{font-size:17px; letter-spacing:-.01em;}
.top .spacer{flex:1;}
.top .clock{font-family:var(--font-mono); font-size:13px; color:var(--ink-300);}
.filtros{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-400);}
.filtros input{background:var(--ink-900); border:1px solid var(--ink-700); color:var(--ink-100); border-radius:var(--r); padding:7px 10px; font-family:var(--font-mono); font-size:13px;}
.filtros input:focus{outline:none; border-color:var(--asa-red-500); box-shadow:0 0 0 3px rgba(225,29,29,.18);}
.body{padding:22px; overflow:auto;}

/* ---- buttons ---- */
.btn{font-family:var(--font-body); font-weight:600; font-size:14px; border:none; border-radius:var(--r); padding:9px 15px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:var(--asa-red-600); color:#fff; box-shadow:var(--sh-1);} .btn-primary:hover{background:var(--asa-red-500);}
.btn-gold{background:var(--asa-gold-400); color:#3a2b00;} .btn-gold:hover{background:var(--asa-gold-300);}
.btn-ghost{background:transparent; color:var(--ink-100); border:1px solid var(--ink-600);} .btn-ghost:hover{border-color:var(--asa-red-400); color:var(--asa-red-400);}

/* ---- KPI ---- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.kpis{grid-template-columns:1fr;}}
.kpi{background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-lg); padding:18px; position:relative; overflow:hidden;}
.kpi::after{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--asa-red-600);}
.kpi.gold::after{background:var(--asa-gold-400);}
.kpi.info::after{background:var(--info);}
.kpi .lab{font-size:12px; color:var(--ink-400); display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.04em;}
.kpi .val{font-family:var(--font-mono); font-size:26px; font-weight:700; letter-spacing:-.01em; margin-top:9px;}
.kpi .val .u{font-size:13px; color:var(--ink-400); font-weight:500;}
.kpi .sub{font-size:12px; margin-top:7px; color:var(--ink-400);}
.kpi .sub.crit{color:var(--asa-red-400);} .kpi .sub.ok{color:#54d6a3;}

/* ---- panels ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
@media(max-width:980px){.grid-2{grid-template-columns:1fr;}}
.panel{background:var(--ink-850); border:1px solid var(--ink-700); border-radius:var(--r-lg); padding:20px; margin-top:14px;}
.panel-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.panel-head h4{font-size:15px;}

/* ---- table ---- */
table.tx{width:100%; border-collapse:collapse; font-size:13px;}
table.tx th{text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); font-weight:600; padding:0 10px 10px;}
table.tx td{padding:10px; border-top:1px solid var(--ink-800);}
table.tx td.num,table.tx th.num{font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums;}
table.tx tr:hover td{background:var(--ink-900);}
.bar{height:6px; background:var(--ink-750); border-radius:4px; overflow:hidden;}
.bar>div{height:100%; background:linear-gradient(90deg,var(--asa-red-600),var(--asa-red-400));}

/* ---- status pills ---- */
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill);}
.pill .d{width:7px; height:7px; border-radius:50%;}
.pill.ok{background:rgba(25,169,116,.14); color:#54d6a3;} .pill.ok .d{background:var(--ok);}
.pill.warn{background:rgba(245,179,1,.14); color:var(--asa-gold-300);} .pill.warn .d{background:var(--warn);}
.pill.crit{background:rgba(225,29,29,.16); color:var(--asa-red-400);} .pill.crit .d{background:var(--crit); box-shadow:0 0 8px var(--crit);}
.pill.info{background:rgba(46,144,201,.14); color:#74c0ec;} .pill.info .d{background:var(--info);}

.sync{font-size:11px; color:var(--ink-600); font-family:var(--font-mono); margin-top:18px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }