/* ============================================================================
   HUB PYM — desktop
   Linguagem do Otto Hub: vermelho da marca sobre neutros quentes, Franklin no
   texto, mono em todo número. Aqui quem usa é quem administra, no computador —
   então vale a densidade do hub. A tela da estrada é outra folha, outra escala.
   ========================================================================== */

:root {
  --brand:#C0392B; --brand-2:#A32E22; --brand-soft:#FBEDEB;
  --bg:#F2EEEB; --surface:#FFFFFF; --surface-2:#FBF8F6; --side:#FFFFFF;
  --line:#DCD7D3; --line-2:#E9E4E1;
  --ink:#150E0C; --ink-2:#6B5A55; --ink-3:#9C8A84;
  --ok:#0A7A50; --ok-soft:#E7F4EE;
  --warn:#8A5A00; --warn-soft:#FBF1DF;
  --shadow:0 1px 2px rgb(24 14 12/.05), 0 14px 30px -22px rgb(192 57 43/.5);
  --sans:"Franklin Gothic Medium","Franklin Gothic","Segoe UI",-apple-system,system-ui,sans-serif;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,ui-monospace,monospace;
  --sb:222px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:#FF4B33; --brand-2:#FF6A54; --brand-soft:#2A1310;
    --bg:#0C0908; --surface:#171110; --surface-2:#130E0D; --side:#100C0B;
    --line:#382A28; --line-2:#241B1A;
    --ink:#F8EEEB; --ink-2:#AB9994; --ink-3:#7A6862;
    --ok:#00D98A; --ok-soft:#0C2A20; --warn:#FFC24B; --warn-soft:#2A2110;
    --shadow:0 1px 0 rgb(255 255 255/.05) inset, 0 20px 44px -30px #000;
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:where(a,button,input,select):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.n,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sub{font-size:11.5px;color:var(--ink-3)}
.d{text-align:right}
.pos{color:var(--ok);font-weight:600}
.neg{color:var(--brand);font-weight:600}
.alerta-txt{color:var(--warn)}

/* ------------------------------------------------------------- casca --- */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
@media(max-width:820px){.app{grid-template-columns:1fr}.sb{position:static;height:auto}}

.sb{background:var(--side);border-right:1px solid var(--line);padding:18px 11px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.sb-marca{display:flex;align-items:baseline;gap:8px;padding:4px 10px 18px}
.sb-marca b{font-size:21px;font-weight:700;letter-spacing:-.02em}
.sb-marca b em{font-style:normal;color:var(--brand)}
.sb-marca span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.sb-grp{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:14px 10px 6px;display:flex;align-items:center;gap:8px}
.sb-grp::before{content:'';width:11px;height:2px;background:var(--brand);border-radius:2px;opacity:.6;flex:none}
.sb-item{display:block;padding:9px 10px;border-radius:8px;color:var(--ink-2);font-size:14px;font-weight:500}
.sb-item:hover{background:var(--surface-2);color:var(--ink)}
.sb-item.ativo{background:var(--brand-soft);color:var(--brand-2);font-weight:700}
@media(prefers-color-scheme:dark){.sb-item.ativo{color:var(--brand)}}
.sb-rodape{margin-top:auto;border-top:1px solid var(--line-2);padding-top:10px}

.conteudo{padding:24px 28px 70px;max-width:1200px;width:100%}
@media(max-width:820px){.conteudo{padding:18px 15px 50px}}

.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:22px}
.cab h1{font-size:27px;font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.1}
.cab p{margin:5px 0 0;color:var(--ink-2)}
.voltar{display:inline-block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.voltar:hover{color:var(--brand)}

/* ------------------------------------------------------------ botões --- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;box-shadow:var(--shadow)}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn--p{background:var(--brand);color:#fff;border-color:transparent}
.btn--p:hover{background:var(--brand-2);color:#fff}
.btn--mini{padding:5px 11px;font-size:12px;box-shadow:none}
.link-apagar{border:0;background:none;color:var(--ink-3);font-size:11.5px;text-decoration:underline;padding:2px}
.link-apagar:hover{color:var(--brand)}

.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline input,.inline select{padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:13.5px}

/* -------------------------------------------------------------- kpis --- */
.kpis{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px 15px;box-shadow:var(--shadow)}
.kpi .rot{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.kpi .val{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-top:6px}
.kpi .val small{font-size:14px;color:var(--ink-2);font-weight:400}
.kpi .nota{font-size:11.5px;color:var(--ink-2);margin-top:3px}
.kpi.alerta{border-color:var(--warn)}

/* ------------------------------------------------------------ painel --- */
.painel{background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px}
.painel-cab{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.painel-cab h2{font-size:14px;font-weight:700;margin:0}
.painel-cab .dir{margin-left:auto;display:flex;gap:7px}
.painel-corpo{padding:16px}
.apoio{color:var(--ink-2);font-size:13px;margin:0 0 10px}

.duas{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:1020px){.duas{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}}

.rolo{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:9px 16px;border-bottom:1px solid var(--line-2);font-weight:500;white-space:nowrap}
.tbl td{padding:10px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .clicavel{cursor:pointer}
.tbl .vazio{text-align:center;color:var(--ink-2);padding:36px}

.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:5px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.hot{background:var(--brand-soft);color:var(--brand-2)}
@media(prefers-color-scheme:dark){.pill.hot{color:var(--brand)}}
.pill.off{background:var(--line-2);color:var(--ink-2)}

/* --------------------------------------------------------- barra gasto - */
.barra-linha{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.bl-rot{width:96px;flex:none;font-size:13px;color:var(--ink-2)}
.bl-trilho{flex:1;height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.bl-trilho i{display:block;height:100%;background:var(--brand)}
.bl-val{font-size:13px;font-weight:600;white-space:nowrap}

/* ------------------------------------------------------------- forms --- */
.form{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:16px}
.campo{display:grid;gap:5px}
.campo.full{grid-column:1/-1}
.campo label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.campo input,.campo select{padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);font-size:14px;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--brand);outline:none}

.link-linha{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:8px}
.link-linha code{font-family:var(--mono);font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

.aviso{border:1px solid var(--brand);border-left:4px solid var(--brand);background:var(--brand-soft);border-radius:9px;padding:13px 15px;margin-bottom:18px;font-size:13.5px}

/* ------------------------------------------------------------ entrar --- */
.tela-entrar{display:grid;place-items:center;min-height:100vh}
.entrar{width:100%;max-width:350px;padding:0 20px}
.marca-grande{display:flex;align-items:baseline;gap:9px;margin-bottom:20px}
.marca-grande b{font-size:30px;font-weight:700;letter-spacing:-.02em}
.marca-grande b em{font-style:normal;color:var(--brand)}
.marca-grande span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.cartao{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:var(--shadow)}
.cartao .campo{margin-bottom:14px}
.erro{color:var(--brand);font-weight:600;font-size:13px;margin:12px 0 0}