/* Sistema de design do CENBRAP — a base das três telas (esteira, plano de ação
   e manual da API).

   Existe porque as páginas nasceram separadas e cada uma tinha a sua cópia de
   botão, campo, card e cor: o mesmo verde com três nomes, três tamanhos de
   fonte, três raios de borda. Quem usava sentia que eram dois sistemas, não um.
   Daqui para frente o token e o componente moram aqui; cada página guarda no
   seu <style> só o que é dela de verdade (o quadro, o kanban, o manual).

   Ordem de carga em toda página: /app.css → /sidebar.css → <style> da página.
   O <style> vem depois de propósito: é ali que uma tela ajusta o que precisa
   ajustar, sem !important.

   A barra lateral (/sidebar.css) tem os seus próprios tokens --sb-*: ela precisa
   ser idêntica mesmo se uma página não carregar este arquivo. As cores são as
   mesmas daqui. */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  /* Cor — a identidade: verde escuro institucional, acento verde, ouro de
     destaque, papel levemente esverdeado. */
  --cor-banda:#0b241e;          /* faixa institucional e barra lateral */
  --cor-banda-tinta:#ffffff;    /* texto sobre a faixa */
  --cor-banda-suave:#9ed0ba;    /* texto secundário sobre a faixa */

  --cor-papel:#f4f7f4;          /* fundo da página */
  --cor-superficie:#ffffff;     /* card, painel, campo */
  --cor-superficie-alt:#fbfdfb; /* superfície rebaixada, dentro de um card */

  --cor-linha:#d9e4de;          /* divisor e borda de card */
  --cor-linha-forte:#bfd2c8;    /* borda de campo e de botão, precisa ser vista */
  --cor-linha-acento:#c4ddcf;   /* borda de bloco verde-claro */

  --cor-tinta:#19332b;          /* texto principal */
  --cor-tinta-media:#61756d;    /* rótulo, apoio, legenda */
  --cor-tinta-fraca:#8ca198;    /* placeholder e texto desligado */

  --cor-acento:#176b51;         /* ação primária */
  --cor-acento-forte:#0f513e;   /* hover da ação primária e texto sobre lavado */
  --cor-acento-lavado:#e5f1eb;  /* fundo de chip e de estado selecionado */
  --cor-acento-tenue:#f7fbf8;   /* fundo de bloco agrupador */

  --cor-ouro:#c99828;           /* destaque da marca */
  /* Tom de TEXTO, não de marca: as etiquetas são 11,5px em negrito, e nesse
     tamanho o mínimo legível é 4,5:1. O #8a6818 de antes dava 4,49 sobre o
     lavado — passava raspando por baixo. */
  --cor-ouro-tinta:#7a5c14;
  --cor-ouro-lavado:#f8efd4;
  --cor-sobre-ouro:#19332b;

  --cor-ok:#1f7a4d;
  --cor-ok-lavado:#e4f2ea;

  --cor-critico:#bd4b42;
  --cor-critico-texto:#a33a31;  /* o crítico como TEXTO sobre o lavado: 4,15 → 5,4 */
  --cor-critico-lavado:#fbe7e4;
  --cor-critico-linha:#edc8c4;

  --cor-veu:rgba(11,36,30,.55); /* véu atrás de modal e gaveta */

  /* Tipografia — uma família só, um tamanho base só. */
  --fonte-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fonte-serif:"IBM Plex Serif", Georgia, serif;
  --texto-base:15px;
  --texto-apoio:13.5px;    /* legenda, ajuda, rodapé de card */
  --texto-rotulo:11.5px;   /* rótulo caixa-alta de campo e de seção */
  --altura-linha:1.55;

  /* Raio — três degraus, não sete. */
  --raio-p:6px;   /* botão, campo, chip retangular */
  --raio:8px;     /* card, painel, bloco */
  --raio-g:12px;  /* modal e janelas flutuantes */

  /* Sombra — card quase plano, flutuante para o que sai do plano. */
  --sombra-card:0 1px 2px rgba(25,51,43,.06);
  --sombra-flutua:0 1px 3px rgba(23,107,81,.12), 0 10px 22px -14px rgba(23,107,81,.35);
  --sombra-janela:0 20px 60px rgba(6,21,15,.35);

  /* Espaçamento — a mesma régua nas três telas. */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px;
  --esp-pagina:clamp(16px, 3vw, 32px); /* respiro lateral de qualquer conteúdo */
}

/* Modo escuro: o mesmo verde, não outra marca. A versão anterior virava azul no
   escuro e parecia outro produto. */
:root[data-theme="dark"]{
  --cor-banda:#07110e; --cor-banda-tinta:#eaf3ee; --cor-banda-suave:#8fb9a6;
  --cor-papel:#0b1714; --cor-superficie:#11221d; --cor-superficie-alt:#162a24;
  --cor-linha:#223a32; --cor-linha-forte:#2e4d42; --cor-linha-acento:#2a4a3d;
  --cor-tinta:#e6efea; --cor-tinta-media:#9db3aa; --cor-tinta-fraca:#728a81;
  --cor-acento:#3f9d7c; --cor-acento-forte:#5fbf9b;
  --cor-acento-lavado:#153027; --cor-acento-tenue:#12231e;
  --cor-ouro:#e0a800; --cor-ouro-tinta:#e8be4c; --cor-ouro-lavado:#312a12; --cor-sobre-ouro:#10201a;
  --cor-ok:#4fb07c; --cor-ok-lavado:#12291e;
  --cor-critico:#e5796a; --cor-critico-texto:#f0958a; --cor-critico-lavado:#341a17; --cor-critico-linha:#5e2a24;
  --cor-veu:rgba(0,0,0,.62);
  --sombra-card:0 1px 2px rgba(0,0,0,.35);
  --sombra-flutua:0 1px 3px rgba(0,0,0,.4), 0 12px 26px -16px rgba(0,0,0,.9);
  --sombra-janela:0 20px 60px rgba(0,0,0,.6);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden],.hidden{display:none !important}

body{
  background:var(--cor-papel); color:var(--cor-tinta);
  font-family:var(--fonte-sans); font-size:var(--texto-base);
  line-height:var(--altura-linha); font-weight:500;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--cor-acento); text-decoration:none}
a:hover{text-decoration:underline}

/* Foco visível em tudo: a navegação por teclado precisa funcionar igual nas três telas. */
:focus-visible{outline:2px solid var(--cor-acento-forte); outline-offset:2px; border-radius:4px}

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

/* ==========================================================================
   3. Cabeçalho de página (faixa institucional)
   ========================================================================== */
header.top{background:var(--cor-banda); color:var(--cor-banda-tinta); display:block}
.faixa,.top-in{padding:var(--esp-5) var(--esp-pagina)}
.eyebrow{
  margin:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cor-banda-suave); font-weight:700;
}
header.top h1,.top h1{
  margin:5px 0 0; font-size:clamp(26px, 2.4vw, 31px); font-weight:700;
  letter-spacing:-.02em; line-height:1.12; text-wrap:balance; color:inherit;
}
.sub,.top-in > p{
  margin:8px 0 0; font-size:var(--texto-apoio); font-weight:500;
  color:var(--cor-banda-suave); max-width:62ch;
}
.acoes{display:flex; align-items:center; gap:var(--esp-2); flex-wrap:wrap}

/* ==========================================================================
   4. Botão
   ========================================================================== */
.btn{
  border:1px solid var(--cor-linha-forte); background:var(--cor-superficie); color:var(--cor-tinta);
  padding:10px 16px; border-radius:var(--raio-p); cursor:pointer;
  font-family:var(--fonte-sans); font-weight:700; font-size:14px; line-height:1.2;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background .15s, border-color .15s, filter .15s;
}
.btn:hover{border-color:var(--cor-acento); background:var(--cor-acento-lavado); text-decoration:none}
.btn.primary{background:var(--cor-acento); border-color:var(--cor-acento); color:#fff}
.btn.primary:hover{background:var(--cor-acento-forte); border-color:var(--cor-acento-forte)}
.btn.ouro{background:var(--cor-ouro); border-color:var(--cor-ouro); color:var(--cor-sobre-ouro)}
.btn.ouro:hover{filter:brightness(1.06); background:var(--cor-ouro); border-color:var(--cor-ouro)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--cor-critico); border-color:var(--cor-critico-linha); background:transparent}
.btn.danger:hover{background:var(--cor-critico-lavado); border-color:var(--cor-critico)}
.btn[disabled]{opacity:.55; cursor:default}

/* Sobre a faixa escura o botão vira contorno claro: é o mesmo botão, outro fundo. */
.btn.banda,.btn.icone{
  background:transparent; border-color:rgba(255,255,255,.28); color:var(--cor-banda-tinta);
}
.btn.banda:hover,.btn.icone:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5)}
.btn.banda{padding:9px 14px; font-size:13px; letter-spacing:.02em}
.btn.banda svg{opacity:.85}
.btn.icone{padding:9px 12px; font-size:16px; line-height:1}

/* O antigo botão de tema de cada cabeçalho saiu de cena: o controle agora é o
   da barra lateral, igual nas três telas. O elemento continua no HTML porque o
   script das páginas ainda escreve nele. */
#tema{display:none !important}

/* ==========================================================================
   5. Campo de formulário
   ========================================================================== */
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
/* O rótulo de um campo. O `:not()` importa: dentro de uma opção com caixinha
   (.check) ou de uma peça do enxoval (.peca), o <span> é o TEXTO da opção, não
   um rótulo — e ele saía em caixa alta espaçada, "SITE", "INSTAGRAM",
   "VALIDAÇÃO TÉCNICA CONCLUÍDA", como se fossem títulos de seção. */
.field > span,.field > label,
.form label:not(.check):not(.peca) > span,
.legend,.copy-box label{
  font-size:var(--texto-rotulo); letter-spacing:.06em; text-transform:uppercase;
  color:var(--cor-tinta-media); font-weight:700; display:block;
}
.field small,.ajuda{
  color:var(--cor-tinta-media); font-size:12px; font-weight:500; line-height:1.4;
  margin:0; text-transform:none; letter-spacing:0;
}
input[type="text"],input[type="password"],input[type="date"],input[type="url"],
input[type="email"],input[type="number"],input:not([type]),select,textarea{
  background:var(--cor-superficie); border:1px solid var(--cor-linha-forte);
  border-radius:var(--raio-p); padding:10px 12px; width:100%; min-width:0;
  color:var(--cor-tinta); font-weight:500; outline:none;
}
input::placeholder,textarea::placeholder{color:var(--cor-tinta-fraca)}
input:focus,select:focus,textarea:focus{
  border-color:var(--cor-acento); box-shadow:0 0 0 3px rgba(23,107,81,.14);
}
textarea{resize:vertical; min-height:80px}
input[type="checkbox"],input[type="radio"]{width:auto; min-width:0; accent-color:var(--cor-acento)}

/* O seletor de arquivo nativo destoava de tudo: um botão cinza de sistema no
   meio de um formulário verde. O campo continua o mesmo, só o botão dele passa
   a ser o nosso. */
input[type="file"]{
  width:100%; font-size:var(--texto-apoio); color:var(--cor-tinta-media);
  border:0; padding:0; background:transparent;
}
input[type="file"]::file-selector-button{
  margin-right:10px; padding:8px 14px; border-radius:var(--raio-p);
  border:1px solid var(--cor-linha-forte); background:var(--cor-superficie);
  color:var(--cor-tinta); font-family:var(--fonte-sans); font-weight:700; font-size:13px;
  cursor:pointer; transition:background .15s, border-color .15s;
}
input[type="file"]::file-selector-button:hover{
  border-color:var(--cor-acento); background:var(--cor-acento-lavado);
}
fieldset{border:0; padding:0; margin:0}

/* ==========================================================================
   6. Superfícies: card, painel e cabeçalho de painel
   ========================================================================== */
.panel,.rota{
  background:var(--cor-superficie); border:1px solid var(--cor-linha);
  border-radius:var(--raio); box-shadow:var(--sombra-card);
}
.panel{overflow:hidden}
.panel-head{
  padding:14px var(--esp-4); border-bottom:1px solid var(--cor-linha);
  display:flex; align-items:center; justify-content:space-between; gap:var(--esp-3);
}
.panel-head h2{margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em}
.panel-head small,.panel-head .sub{color:var(--cor-tinta-media); font-size:12.5px}
/* um select no cabeçalho é um controle, não um campo: não estica */
.panel-head select{width:auto; max-width:240px}

/* ==========================================================================
   7. Estatística (os medidores da esteira e os contadores do plano)
   ========================================================================== */
.stats{display:flex; gap:var(--esp-3); flex-wrap:wrap}
.stat,.gauge{
  background:var(--cor-superficie); border:1px solid var(--cor-linha);
  border-radius:var(--raio); padding:14px 17px; box-shadow:var(--sombra-flutua);
  display:flex; flex-direction:column; gap:4px; text-align:left;
}
.stat{min-width:145px; flex:1}
.stat b,.gauge .n{
  display:block; font-family:var(--fonte-mono); font-size:28px; font-weight:600;
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat span,.gauge .l{color:var(--cor-tinta-media); font-size:12.5px; font-weight:600}

/* ==========================================================================
   8. Chip / etiqueta
   ========================================================================== */
.chip,.tag,.pill,.verbo,.static-tag{
  display:inline-flex; align-items:center; gap:5px;
  border-radius:999px; padding:3px 9px;
  background:var(--cor-acento-lavado); color:var(--cor-acento-forte);
  font-size:var(--texto-rotulo); font-weight:700; line-height:1.35; white-space:nowrap;
}
.chip.ok,.tag.ok{background:var(--cor-ok-lavado); color:var(--cor-ok)}
.chip.high,.tag.pend,.pill.warn{background:var(--cor-ouro-lavado); color:var(--cor-ouro-tinta)}
.chip.over,.pill.crit{background:var(--cor-critico-lavado); color:var(--cor-critico-texto)}
.tag.funil{background:var(--cor-superficie-alt); color:var(--cor-tinta-media); box-shadow:inset 0 0 0 1px var(--cor-linha)}
.pill,.verbo{font-family:var(--fonte-mono); font-size:11.5px; letter-spacing:.04em}
.static-tag{border-radius:var(--raio-p); padding:9px 10px}

/* ==========================================================================
   9. Tabela
   ========================================================================== */
.tab{
  width:100%; border-collapse:collapse; background:var(--cor-superficie);
  border:1px solid var(--cor-linha); border-radius:var(--raio); overflow:hidden;
  margin:var(--esp-3) 0; font-size:14.5px;
}
.tab th{
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cor-tinta-fraca); font-weight:700; padding:10px 14px;
  border-bottom:1px solid var(--cor-linha); background:var(--cor-superficie-alt);
}
.tab td{padding:9px 14px; border-bottom:1px solid var(--cor-linha); color:var(--cor-tinta-media); vertical-align:top}
.tab tr:last-child td{border-bottom:0}
/* Numa tela estreita a tabela rola dentro de si em vez de esticar a página.
   Sem isto, as tabelas do manual da API empurravam o documento para os lados. */
@media (max-width:720px){
  .tab{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
  .tab th,.tab td{white-space:normal; min-width:130px}
}

/* ==========================================================================
   10. Estado vazio
   ========================================================================== */
.empty,.kanban-empty{
  border:1px dashed var(--cor-linha-forte); border-radius:var(--raio);
  padding:24px 12px; text-align:center; color:var(--cor-tinta-media);
  font-family:var(--fonte-serif); font-style:italic; font-size:13.5px; line-height:1.45;
  background:transparent;
}

/* ==========================================================================
   11. Véu, modal e gaveta
   ========================================================================== */
/* Camadas: barra lateral 70 (/sidebar.css), véu 100, janela 101, aviso 110,
   porta de entrada 120. Quem abre uma janela cobre a navegação — nas três telas. */
.scrim,.modal{background:var(--cor-veu)}
.scrim{position:fixed; inset:0; backdrop-filter:blur(2px); display:none; z-index:100}
.scrim.open{display:block}

.modal{
  display:none; position:fixed; inset:0; z-index:100;
  width:100%; height:100%; padding:var(--esp-5); overflow:auto;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; max-width:none !important;
}
.modal.open{display:flex; align-items:flex-start; justify-content:center}
.modal-card{
  width:min(760px,100%); background:var(--cor-superficie);
  border-radius:var(--raio-g); overflow:hidden; box-shadow:var(--sombra-janela);
}

@media (max-width:600px){
  .modal{padding:var(--esp-2)}
  .modal-card{width:100%}
}
/* Abre espaço para o botão ☰ da gaveta, que existe até 1023px (ver /sidebar.css). */
@media (max-width:1023px){
  .faixa,.top-in{padding-top:60px}
}