:root{color-scheme:dark;
  --preto:#160A08;--bordo:#2A1310;--bordo-alto:#3A1E18;--tijolo:#B4590F;--cobre:#D4711E;--cobre-vivo:#F0913A;
  --offwhite:#F7F1E8;--areia:#C9AE9B;--areia-fraca:#8F7A6E;--linha:rgba(247,241,232,.11);--grade:rgba(247,241,232,.07);
  --s1:#D4711E;--s2:#2FA898;--s3:#B98A2E;              /* séries categóricas (validadas no fundo #2A1310) */
  --bom:#5CB878;--atencao:#E0B23A;--critico:#E25D4F;   /* status, reservados */
  --ft:"Fraunces",Georgia,serif;--fx:"Inter","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--preto);color:var(--offwhite);font-family:var(--fx);font-size:14px;line-height:1.45}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}

/* Estrutura: barra lateral + área */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.lateral{background:var(--bordo);border-right:1px solid var(--linha);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:4px 8px}
.marca .ponto{width:10px;height:10px;border-radius:50%;background:var(--cobre);box-shadow:0 0 0 4px rgba(212,113,30,.22)}
.marca b{font-family:var(--ft);font-size:1.15rem;font-weight:700}
.marca small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobre);font-weight:600}
.grupo{display:flex;flex-direction:column;gap:2px}
.grupo .rot{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--areia-fraca);font-weight:700;padding:0 8px 6px}
.nav a,.nav span{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--areia);font-weight:500;font-size:.9rem}
.nav a:hover{background:rgba(247,241,232,.06);color:var(--offwhite)}
.nav a.on{background:rgba(212,113,30,.18);color:var(--offwhite)}
.nav a.on svg{color:var(--cobre-vivo)}
.nav span:not(.rot){opacity:.45;cursor:default}
.nav span:not(.rot)::after{content:"em breve";margin-left:auto;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobre)}
.nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lateral .fim{margin-top:auto;font-size:.74rem;color:var(--areia-fraca);padding:0 8px;line-height:1.5}

.area{padding:20px 24px 40px;min-width:0}
.cabec{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:16px}
.cabec h1{font-family:var(--ft);font-size:1.5rem;font-weight:600}
.cabec .sub{color:var(--areia);font-size:.86rem}
.cabec .dir{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{font-size:.76rem;font-weight:600;border:1px solid var(--linha);border-radius:999px;padding:6px 11px;color:var(--areia);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--cobre-vivo)}
.pill.sem i{background:var(--areia-fraca)}

/* Grade dos cartões */
.grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.card{background:var(--bordo);border:1px solid var(--linha);border-radius:14px;padding:16px 18px;min-width:0;display:flex;flex-direction:column;gap:8px}
.card .tit{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card .tit h2{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--areia)}
.card .tit small{font-size:.74rem;color:var(--areia-fraca);text-align:right}
.card .nota{font-size:.76rem;color:var(--areia-fraca);margin:0}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* KPIs */
.kpi{gap:4px}
.kpi .rot{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--areia)}
.kpi .val{font-family:var(--ft);font-size:2.1rem;font-weight:600;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:6px}
.kpi .val small{font-family:var(--fx);font-size:.8rem;font-weight:500;color:var(--areia);letter-spacing:0;margin-left:5px}
.kpi .cmp{font-size:.78rem;color:var(--areia);margin-top:4px}
.kpi .cmp b{color:var(--offwhite);font-weight:600;font-variant-numeric:tabular-nums}
.kpi .mini{height:5px;border-radius:999px;background:rgba(247,241,232,.1);overflow:hidden;margin-top:8px}
.kpi .mini i{display:block;height:100%;background:var(--cobre);border-radius:999px;width:0}
.kpi.destaque{background:linear-gradient(135deg,rgba(212,113,30,.32),rgba(212,113,30,.06)),var(--bordo);border-color:rgba(212,113,30,.55)}
.kpi.destaque .val{color:var(--cobre-vivo)}

/* Gráficos */
.fig{width:100%;height:auto;display:block;font-family:var(--fx)}
.fig text{fill:var(--areia);font-size:11px}
.fig .grade-h line{stroke:var(--grade)}
.fig .eixo text{fill:var(--areia-fraca)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.76rem;color:var(--areia)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legenda i.tracejado{width:16px;height:0;border-top:2px dashed var(--areia);border-radius:0}
.dica{position:fixed;z-index:80;pointer-events:none;background:var(--preto);border:1px solid rgba(212,113,30,.5);border-radius:8px;padding:7px 10px;font-size:.76rem;color:var(--offwhite);display:none;max-width:240px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.dica b{display:block;color:var(--cobre-vivo);font-variant-numeric:tabular-nums}

/* Donut */
.donut-wrap{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center}
.donut-wrap .lista{display:flex;flex-direction:column;gap:8px;font-size:.82rem}
.donut-wrap .lista div{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center}
.donut-wrap .lista i{width:12px;height:12px;border-radius:3px}
.donut-wrap .lista b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.donut-wrap .lista small{color:var(--areia-fraca);display:block;font-size:.72rem}
@media (max-width:520px){.donut-wrap{grid-template-columns:1fr;justify-items:center}}

/* Fases (lista com barras) */
.fases{display:flex;flex-direction:column;gap:9px}
.fases div{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;font-size:.82rem}
.fases .n{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--areia-fraca)}
.fases .barra{height:9px;border-radius:999px;background:rgba(247,241,232,.09);overflow:hidden;position:relative}
.fases .barra i{position:absolute;left:0;top:0;bottom:0;background:var(--s1);border-radius:999px}
.fases .barra em{position:absolute;left:0;top:-4px;bottom:-4px;width:2px;background:var(--cobre-vivo)}
.fases .q{font-variant-numeric:tabular-nums;color:var(--areia);white-space:nowrap}
.fases .nome{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-weight:600;color:var(--offwhite);margin-bottom:3px}
.fases div.atual .n{color:var(--cobre-vivo)}
.fases div.atual .nome::after{content:"você está aqui";white-space:nowrap;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobre-vivo);font-weight:700}

/* Barras horizontais (donos) */
.hbars{display:flex;flex-direction:column;gap:7px;font-size:.8rem}
.hbars div{display:grid;grid-template-columns:44px 1fr 28px;gap:10px;align-items:center}
.hbars b{font-weight:700;color:var(--cobre-vivo);font-size:.72rem;letter-spacing:.06em}
.hbars .barra{height:12px;background:rgba(247,241,232,.07);border-radius:4px;overflow:hidden}
.hbars .barra i{display:block;height:100%;background:var(--s2);border-radius:0 4px 4px 0}
.hbars small{text-align:right;font-variant-numeric:tabular-nums;color:var(--areia)}

/* Tabela de prazos */
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--areia-fraca);font-weight:700;padding:6px 8px 8px 0;border-bottom:1px solid var(--linha)}
td{padding:8px 8px 8px 0;border-bottom:1px solid var(--linha);vertical-align:top}
tr:last-child td{border-bottom:0}
td.id{color:var(--cobre-vivo);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
td.data{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--areia)}
td.dono i{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px;background:rgba(247,241,232,.08);color:var(--areia);margin-right:3px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.pend{color:var(--atencao);background:rgba(224,178,58,.12)}
.chip.venc{color:var(--critico);background:rgba(226,93,79,.14)}
.chip.ok{color:var(--bom);background:rgba(92,184,120,.12)}
.chip.neutro{color:var(--areia);background:rgba(247,241,232,.08)}
.rolagem{overflow-x:auto;min-width:0;max-width:100%}
.card>*{min-width:0}
.grade{min-width:0}
.area{overflow-x:hidden}

/* Cantinas */
.cantinas{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.cantinas i{aspect-ratio:1;border-radius:6px;background:rgba(247,241,232,.08);border:1px dashed var(--linha);display:grid;place-items:center;font-size:.66rem;color:var(--areia-fraca);font-style:normal;font-variant-numeric:tabular-nums}
.cantinas i.ok{background:var(--s3);border-style:solid;border-color:transparent;color:var(--preto);font-weight:700}

/* Alertas */
.alertas{display:flex;flex-direction:column;gap:8px}
.alertas>div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.8rem;padding:8px 10px;border-radius:9px;background:rgba(247,241,232,.04)}
.alertas .tx{display:block}
.alertas b{display:block;font-weight:600}
.alertas small{color:var(--areia-fraca)}
.alertas .chip{margin-top:2px}

/* Checkpoints */
.checks{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:4px}
.checks div{background:rgba(247,241,232,.04);border-radius:8px;padding:8px 8px;text-align:center}
.checks b{display:block;font-family:var(--ft);font-size:.98rem;font-variant-numeric:tabular-nums}
.checks small{font-size:.68rem;color:var(--areia-fraca)}
.checks div.ok{background:rgba(92,184,120,.14)}.checks div.falta{background:rgba(226,93,79,.14)}
@media (max-width:640px){.checks{grid-template-columns:repeat(3,1fr)}}

/* Responsivo */
@media (max-width:1100px){
  .c2{grid-column:span 4}.c3{grid-column:span 6}.c4{grid-column:span 6}.c5{grid-column:span 12}.c6{grid-column:span 12}.c7{grid-column:span 12}.c8{grid-column:span 12}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--linha)}
  .lateral .grupo{flex-direction:row;flex-wrap:wrap;gap:4px}
  .lateral .grupo .rot{display:none}
  .nav a,.nav span{padding:7px 10px;font-size:.82rem}
  .nav span::after{display:none}
  .lateral .fim{display:none}
  .area{padding:16px 16px 32px}
}
@media (max-width:600px){
  .c2{grid-column:span 6}.c3{grid-column:span 12}.c4{grid-column:span 12}
  .kpi .val{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Placar dos grupos (gamificação leve) */
.placar{display:flex;flex-direction:column;gap:8px}
.placar>div{display:grid;grid-template-columns:30px 1fr auto;gap:8px 12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(247,241,232,.04);border:1px solid var(--linha)}
.placar>div.top{border-color:rgba(212,113,30,.5);background:rgba(212,113,30,.08)}
.placar .pos{font-family:var(--ft);font-size:1.3rem;font-weight:700;color:var(--areia-fraca);text-align:center;line-height:1}
.placar>div.top .pos{color:var(--cobre-vivo)}
.placar .nome{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.placar .nivel{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--cobre-vivo);background:rgba(212,113,30,.16);padding:2px 7px;border-radius:999px}
.placar .num{font-size:.78rem;color:var(--areia);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.placar .num b{color:var(--offwhite)}
.placar .trilha{grid-column:2/4;display:flex;gap:4px;align-items:center}
.placar .trilha i{flex:1;height:7px;border-radius:999px;background:rgba(247,241,232,.09);position:relative}
.placar .trilha i.ok{background:var(--cobre)}
.placar .trilha i.parcial{background:linear-gradient(90deg,var(--cobre) var(--p,0%),rgba(247,241,232,.09) var(--p,0%))}
.placar .trilha i::after{content:attr(data-n);position:absolute;left:0;right:0;top:9px;font-size:.6rem;color:var(--areia-fraca);text-align:center;font-style:normal}
.placar .trilha{padding-bottom:12px}
.placar .falta{grid-column:2/4;font-size:.74rem;color:var(--areia-fraca)}
.placar .falta b{color:var(--cobre-vivo)}
.marcos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.marcos div{border:1px solid var(--linha);border-radius:10px;padding:10px;text-align:center}
.marcos div.on{border-color:var(--cobre);background:rgba(212,113,30,.1)}
.marcos div.passou{opacity:.55}
.marcos .t{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobre);font-weight:700}
.marcos b{display:block;font-family:var(--ft);font-size:1.2rem;font-variant-numeric:tabular-nums}
.marcos small{display:block;color:var(--areia-fraca);font-size:.7rem;line-height:1.3}
@media (max-width:600px){.marcos{grid-template-columns:repeat(2,1fr)}}