:root {
  --ink: #37352f; --muted: rgba(55,53,47,.65); --faint: rgba(55,53,47,.45);
  --line: rgba(55,53,47,.09); --line2: rgba(55,53,47,.16);
  --fundo: #fff; --superficie: #f1f1ef; --superficie-2: #f7f6f3; --hover: #f9f9f9;
  --toque: rgba(55,53,47,.05); --toque-forte: rgba(55,53,47,.08); --veu: rgba(15,15,15,.3);
  --azul: #2383e2; --azul-escuro: #1a6dc0; --serie-1: #2a78d6; --serie-2: #eb6834;
  --realce-fundo: #e7f3f8; --realce-borda: #c6e2ef; --realce-texto: #1f6f9d;
  --ok: #448361; --alerta: #d9730d; --perigo: #c4302b; --perigo-claro: #d44c47; --perigo-fundo: #ffe2dd;
  --aviso: #fbf3db; --atencao: #fbecdd;
  --selo-cinza: #e3e2e0; --selo-cinza-t: #32302c; --selo-azul: #d3e5ef; --selo-azul-t: #183347;
  --selo-roxo: #e8deee; --selo-roxo-t: #412454; --selo-laranja: #fadec9; --selo-laranja-t: #49290e;
  --selo-amarelo: #fdecc8; --selo-amarelo-t: #402c1b; --selo-verde: #dbeddb; --selo-verde-t: #1c3829;
  --selo-marrom: #eee0da; --selo-marrom-t: #442a1e; --selo-vermelho: #ffe2dd; --selo-vermelho-t: #5d1715;
  --raio-p: 3px; --raio: 4px; --raio-g: 6px;
  --sombra-cartao: rgba(15,15,15,.1) 0 0 0 1px, rgba(15,15,15,.1) 0 2px 4px;
  --fs-p: 12px; --fs: 14px; --fs-g: 16px; --topo: 48px; --menu: 224px; --recuo: 32px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: var(--fs)/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); background: var(--fundo); -webkit-text-size-adjust: 100%; }
a { color: var(--realce-texto); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.num { font-variant-numeric: tabular-nums; } .r { text-align: right; } .muted { color: var(--muted); } .faint { color: var(--faint); } .p { font-size: var(--fs-p); line-height: 16px; }
.cod { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.perigo { color: var(--perigo); } .ok { color: var(--ok); }

/* casca */
.menu { position: fixed; inset: 0 auto 0 0; width: var(--menu); background: var(--superficie-2); border-right: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 30; overflow: auto; }
.marca { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px; font-weight: 600; margin-bottom: 8px; }
.marca i { width: 20px; height: 20px; border-radius: 5px; background: var(--azul); display: inline-block; }
.menu a.it { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: var(--raio); color: var(--muted); text-decoration: none; }
.menu a.it:hover { background: var(--toque); }
.menu a.it[aria-current="page"] { background: var(--toque-forte); color: var(--ink); font-weight: 500; }
.menu .tit { font-size: var(--fs-p); color: var(--faint); padding: 12px 8px 4px; }
.menu .sair { margin-top: auto; font-size: var(--fs-p); }
.bolha { background: var(--selo-laranja); color: var(--selo-laranja-t); font-size: 11px; line-height: 16px; min-width: 18px; text-align: center; border-radius: 999px; padding: 0 5px; font-weight: 600; }
.corpo { margin-left: var(--menu); min-height: 100vh; }
.topo { position: sticky; top: 0; height: var(--topo); background: var(--fundo); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 var(--recuo); z-index: 20; }
.topo h1 { font-size: var(--fs); font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .fim { margin-left: auto; font-size: var(--fs-p); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.burger { display: none; width: 36px; height: 36px; border: 0; background: none; border-radius: var(--raio); font-size: 20px; cursor: pointer; }
.burger:hover { background: var(--toque); }
.veu { display: none; }
main { max-width: 1440px; margin: 0 auto; padding: 20px var(--recuo) 64px; }
.faixa { padding: 8px 12px; border-radius: var(--raio); margin: 0 0 16px; font-size: var(--fs); }
.faixa.aviso { background: var(--aviso); } .faixa.atencao { background: var(--atencao); } .faixa.neutra { background: var(--superficie); } .faixa.erro { background: var(--perigo-fundo); color: var(--selo-vermelho-t); }
h2 { font-size: var(--fs-g); font-weight: 600; margin: 24px 0 8px; } h2:first-child { margin-top: 0; }
h2 small { font-weight: 400; color: var(--muted); font-size: var(--fs); margin-left: 6px; }

/* controles */
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.barra select, .pilula { border: 1px solid var(--line2); border-radius: 999px; background: var(--fundo); color: var(--muted); padding: 2px 12px; height: 28px; font-size: 13px; cursor: pointer; }
.barra select.on { background: var(--realce-fundo); border-color: var(--realce-borda); color: var(--realce-texto); }
.link { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0 4px; } .link:hover { color: var(--ink); }
.btn { border: 1px solid var(--line2); background: var(--fundo); border-radius: var(--raio); padding: 4px 12px; cursor: pointer; min-height: 32px; }
.btn:hover:not(:disabled) { background: var(--toque); } .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.prim { background: var(--azul); border-color: var(--azul); color: #fff; } .btn.prim:hover:not(:disabled) { background: var(--azul-escuro); }
textarea, input[type=text], input[type=password] { width: 100%; border: 1px solid var(--line2); border-radius: var(--raio); padding: 8px 10px; background: var(--fundo); }
textarea { min-height: 72px; resize: vertical; }

/* selos */
.selo { display: inline-block; font-size: 13px; line-height: 20px; padding: 0 6px; border-radius: var(--raio-p); white-space: nowrap; }
.selo.cinza { background: var(--selo-cinza); color: var(--selo-cinza-t); } .selo.azul { background: var(--selo-azul); color: var(--selo-azul-t); }
.selo.roxo { background: var(--selo-roxo); color: var(--selo-roxo-t); } .selo.laranja { background: var(--selo-laranja); color: var(--selo-laranja-t); }
.selo.amarelo { background: var(--selo-amarelo); color: var(--selo-amarelo-t); } .selo.verde { background: var(--selo-verde); color: var(--selo-verde-t); }
.selo.marrom { background: var(--selo-marrom); color: var(--selo-marrom-t); } .selo.vermelho { background: var(--selo-vermelho); color: var(--selo-vermelho-t); }

/* tabela */
.rolar { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--raio-g); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs); }
th { text-align: left; font-weight: 400; color: var(--muted); font-size: 13px; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--fundo); position: sticky; top: 0; }
td { padding: 0 10px; height: 34px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--hover); }
td.tit { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
tr.grupo td { background: var(--superficie-2); font-weight: 500; height: 30px; }
.seta { display: inline-block; width: 20px; text-align: center; color: var(--faint); cursor: pointer; background: none; border: 0; padding: 0; }
.seta:hover { color: var(--ink); }
.t td:first-child, .t th:first-child { position: sticky; left: 0; background: inherit; }

/* kanban */
.kanban { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.col { flex: 0 0 272px; background: var(--superficie-2); border-radius: var(--raio-g); padding: 8px; }
.col h3 { font-size: 13px; font-weight: 500; margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.cartao { display: block; background: var(--fundo); box-shadow: var(--sombra-cartao); border-radius: var(--raio); padding: 8px 10px; margin-bottom: 8px; color: var(--ink); text-decoration: none; }
.cartao:hover { background: var(--hover); text-decoration: none; }
.cartao b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao .l2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-p); color: var(--muted); }

/* esperando / detalhe */
.card { background: var(--fundo); box-shadow: var(--sombra-cartao); border-radius: var(--raio); padding: 16px; margin-bottom: 16px; }
.card h3 { margin: 0 0 4px; font-size: var(--fs-g); font-weight: 600; }
.card ul { margin: 8px 0; padding-left: 20px; }
.acoes { display: grid; gap: 8px; margin-top: 12px; }
.acoes .linha { display: flex; gap: 8px; flex-wrap: wrap; }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.kpi { border: 1px solid var(--line2); border-radius: var(--raio-g); padding: 12px; }
.kpi .v { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; } .kpi .n { font-size: var(--fs-p); color: var(--muted); }
.spec { background: var(--superficie-2); border-radius: var(--raio); padding: 12px 16px; } .spec h4 { margin: 8px 0 2px; } .spec p { margin: 4px 0; } .spec ul { margin: 4px 0; padding-left: 20px; }
.tempo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line2); }
.tempo li { padding: 0 0 12px 14px; position: relative; } .tempo li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--fundo); border: 2px solid var(--faint); }
.meter { height: 8px; background: var(--superficie); border-radius: 999px; position: relative; overflow: visible; margin: 6px 0; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--azul); } .meter i.al { background: var(--alerta); } .meter i.pe { background: var(--perigo-claro); }
.meter b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); opacity: .55; }
.meter.desc { background: repeating-linear-gradient(45deg, var(--superficie), var(--superficie) 4px, var(--line2) 4px, var(--line2) 5px); }
.graf { width: 100%; height: auto; display: block; } .graf text { fill: var(--muted); font-size: 11px; } .graf .eixo { stroke: var(--line2); } .graf .grade { stroke: var(--line); }
.leg { display: flex; gap: 16px; font-size: var(--fs-p); color: var(--muted); margin: 4px 0 8px; } .leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.vazio { color: var(--muted); padding: 24px; text-align: center; border: 1px dashed var(--line2); border-radius: var(--raio-g); }
details summary { cursor: pointer; color: var(--muted); font-size: var(--fs-p); margin: 4px 0; }
.login { max-width: 360px; margin: 18vh auto; padding: 0 16px; } .login h1 { font-size: 20px; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--raio); z-index: 50; }

@media (max-width: 1023px) {
  .menu { transform: translateX(-100%); transition: transform .15s; box-shadow: none; } .corpo { margin-left: 0; }
  body.gaveta .menu { transform: none; box-shadow: rgba(15,15,15,.2) 0 0 12px; }
  body.gaveta .veu { display: block; position: fixed; inset: 0; background: var(--veu); z-index: 25; }
  .burger { display: block; margin-left: -8px; }
}
@media (max-width: 640px) {
  :root { --recuo: 16px; } .dois { grid-template-columns: 1fr; } .col { flex-basis: 84vw; } td.tit { max-width: 220px; }
  .topo .fim { max-width: 40vw; }
}
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }
.dois > *, .tres > * { min-width: 0; }