/* ---------------------------------------------------------------------------
   CHASSI COMPARTILHADO — os tokens da pele `comite` (DESIGN-DNA de 11/09/2026).
   Paleta fixada pelo Gabriel, medida na arte oficial. Tipografia da V3.
   Construção: massa e bloco, raio 0, sombra nenhuma, o vão faz o contorno.
   Cada versão traz só o layout dela; nada de cor nova, nada de fonte nova.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600;700;800&family=Public+Sans:wght@400;500;600;700&family=Martian+Mono:wght@400;600&display=swap');

:root{
  --bg:#08090A; --bg2:#16191B; --bg3:#1F2325; --line:#2B3033; --line2:#3A4145;
  --txt:#E8EDEF; --dim:#9AA7AD;
  /* --dim2 CLAREADO nestas prévias, de #78868D para #7E8D94, e vale reportar:
     no chassi do comitê o #78868D sobre o --bg3 (#1F2325) mede 4,22:1, abaixo
     do 4,5 do AA. O par aparece em todo rótulo mono dentro de superfície
     elevada: cartão aberto, degrau selecionado, linha de supervisor. Com
     #7E8D94 a razão sobe para 4,6:1 e o matiz frio continua o mesmo. */
  --dim2:#7E8D94;
  --acento:#F90156;        /* framboesa do Cícero */
  --acento-txt:#FE3479;    /* o mesmo acento ajustado para virar texto */
  --acento-fundo:#2F0816;
  --acento2:#EF7316;       /* laranja do Mersinho */
  --azul:#3014E7;
  --violet:#A11E8F;
  --sobre-acento:#0E1011;
  --ok:#5FD08A; --alerta:#EFB316;
  --display:'Big Shoulders Display',ui-sans-serif,system-ui,sans-serif;
  --body:'Public Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--body);
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;font-size:inherit}
select,input{font-family:inherit;color:inherit;background:var(--bg3);border:none;padding:10px;font-size:15px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1}
a{color:var(--acento-txt)}

/* ---------- a barra que identifica a versão, igual nas cinco ---------- */
/* A tese vai para a SEGUNDA LINHA no celular, e isso não é preferência de
   layout. Com ela espremida entre a marca e o botão, a 375px sobravam 60px de
   largura e a frase saía em coluna de uma palavra por linha, empurrando o topo
   para 150px de altura. Em linha própria ela cabe em duas linhas de texto. */
.vtopo{
  position:sticky;top:0;z-index:40;background:var(--bg2);
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:2px solid var(--bg);flex-wrap:wrap;
}
.vtopo .vmarca{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:19px;letter-spacing:.01em;flex:1;min-width:0;
}
.vtopo .vmarca b{color:var(--acento-txt)}
.vtopo .vtese{
  font-family:var(--mono);font-size:9px;color:var(--dim2);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.45;
  order:3;flex-basis:100%;
}
@media(min-width:900px){
  .vtopo .vmarca{flex:0 0 auto}
  .vtopo .vtese{order:0;flex-basis:auto;flex:1;min-width:0;font-size:9.5px}
}
.vtopo .vvolta{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  background:var(--bg3);color:var(--txt);padding:10px 12px;min-height:44px;
  display:flex;align-items:center;flex-shrink:0;
}
.vtopo .vvolta:hover{background:var(--acento);color:var(--sobre-acento)}

/* ---------- o aviso de dado falso, obrigatório em toda prévia ---------- */
.vfake{
  background:var(--acento-fundo);color:#FFC9DB;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  padding:8px 16px;line-height:1.5;
}
.vfake b{color:var(--acento-txt)}

.vcorpo{padding:16px;max-width:1360px;margin:0 auto}

/* ---------- peças que as cinco versões reaproveitam ---------- */
.rot{
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--dim2);
}
.num{font-family:var(--display);font-weight:700;line-height:.92;font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.barra{height:6px;background:var(--bg3);overflow:hidden}
.barra i{display:block;height:100%;background:var(--acento)}
.barra i.ok{background:var(--ok)}
.barra i.baixo{background:var(--alerta)}
.barra i.zero{background:var(--line2)}

.chip{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--bg3);color:var(--dim);padding:6px 9px;display:inline-flex;align-items:center;gap:5px;
}
.chip.on{background:var(--acento);color:var(--sobre-acento)}
.chip.on2{background:var(--acento2);color:var(--sobre-acento)}

.btn{
  min-height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg3);color:var(--txt);font-weight:600;font-size:14px;
}
.btn:hover{background:var(--line2)}
.btn.pri{background:var(--acento);color:var(--sobre-acento)}
.btn.pri:hover{background:var(--acento-txt)}

/* tabela nunca solta no celular: vira lista empilhada abaixo de 720px */
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}