/* plataforma.css — o sistema visual da Central, em um arquivo só.
 *
 * ── POR QUE ASSIM, E NÃO REESCREVENDO AS TELAS ──
 *
 * Medido: 58 telas ativas, cada uma com o seu <style> e o seu :root.
 * O mesmo visual preto-e-dourado está escrito com pelo menos OITO
 * vocabulários diferentes — --bg/--card/--gold em 14 telas,
 * --fundo/--caixa/--ouro em outras, --surf/--ink, --panel/--mut,
 * --carta/--tinta, --preto/--raio/--sombra…
 *
 * Não é desleixo: cada tela nasceu copiando a anterior com um ajuste
 * pelo caminho. O resultado é que "dourado" tem cinco valores e
 * "fundo" tem quatro.
 *
 * Os módulos abrem em IFRAME (__MASTEROPEN__ cria um iframe 100%×100%),
 * então cada página é independente. Reescrever as 58 seria caro e
 * arriscado; carregar UMA folha por último em cada uma custa uma linha
 * e faz todas convergirem.
 *
 * ── A ESCOLHA DO VOCABULÁRIO CANÔNICO ──
 *
 * --bg/--card/--card2/--line/--txt/--dim/--gold, que 14 telas já usam.
 * Escolher a maioria significa que a maior parte do sistema quase não
 * muda, e o esforço fica onde estava o desvio. É o mesmo critério que o
 * moldura.css usou para largura e recuo.
 *
 * Os outros vocabulários viram APELIDOS do mesmo valor. A tela que
 * escreve var(--ouro) passa a receber o dourado canônico sem uma linha
 * de HTML alterada.
 *
 * ── ORDEM DE CARGA ──
 *
 * Esta folha entra DEPOIS do <style> da tela. CSS resolve empate pela
 * ordem, então ela vence sem !important — que é o que se usa quando não
 * se sabe qual regra está ganhando, e aqui se sabe.
 */

/* ═══════════════════════════════════════════════════════════════════
 * 1 · TOKENS
 * ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── superfícies ────────────────────────────────────────────────
     Grafite, com degraus PEQUENOS entre níveis. A diferença entre
     --bg e --sup-1 é de 5% de luminosidade: o suficiente para separar,
     pouco o bastante para não virar listra. */
  --p-bg:      #0d1117;   /* fundo da página */
  --p-sup-1:   #151a22;   /* cartão, painel */
  --p-sup-2:   #1b212b;   /* campo, cabeçalho de tabela, aninhado */
  --p-sup-3:   #232a36;   /* hover, selecionado */
  --p-linha:   #262d3a;   /* borda padrão */
  --p-linha-2: #323b4b;   /* borda de ênfase */

  /* ── texto ──────────────────────────────────────────────────────
     --p-txt sobre --p-bg dá contraste ~14:1; --p-dim dá ~5.4:1, acima
     do mínimo AA para texto normal. --p-dim-2 só para 12px+ em rótulo
     curto, nunca para texto corrido. */
  --p-txt:    #e6e9ef;
  --p-dim:    #9aa3b2;
  --p-dim-2:  #6b7483;

  /* ── dourado: seleção e ação principal, e mais nada ─────────────
     Um tom só, e um claro para foco/hover. Nada de brilho: o dourado
     marca O QUE FAZER, e se estiver em tudo não marca nada. */
  /* O DOURADO OFICIAL e #C8A24A -- decisao do titular, 14/10/2026.
     Os dois vizinhos sao DERIVADOS dele, nao o par antigo: o claro
     clareia o oficial, o escuro escurece o oficial. Antes eram
     #c9a227 com #e2bd4e e #8a6f19, que vinham de outro tom e por
     isso nao combinavam com o oficial quando os dois apareciam
     juntos na mesma tela. */
  --p-ouro:    #c8a24a;
  --p-ouro-cl: #e0bc6a;
  --p-ouro-esc:#8e7233;
  --p-sobre-ouro:#171203;   /* texto sobre o dourado */

  /* ── situação: sempre acompanhada de texto, nunca cor sozinha ──── */
  --p-ok:    #3fa96b;  --p-ok-fnd:   #12241a;  --p-ok-lin:   #27402f;
  --p-avi:   #d99a2b;  --p-avi-fnd:  #241d10;  --p-avi-lin:  #443616;
  --p-erro:  #e05252;  --p-erro-fnd: #261417;  --p-erro-lin: #4d2429;
  --p-info:  #4a8fd4;  --p-info-fnd: #101b28;  --p-info-lin: #1f3350;

  /* ── tipografia ─────────────────────────────────────────────────
     Uma família só. A pilha começa por fontes de sistema: carregam
     instantaneamente e são desenhadas para interface. */
  --p-fonte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
             Arial, sans-serif;
  --p-fonte-num: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* escala tipográfica: 12 · 13 · 14 · 16 · 20 · 26
     Sem 11px: abaixo de 12 a leitura cai para quem não tem visão
     perfeita, e este sistema é usado o dia inteiro. */
  --p-t-xs: 12px;  --p-t-sm: 13px;  --p-t-md: 14px;
  --p-t-lg: 16px;  --p-t-xl: 20px;  --p-t-2xl: 26px;
  --p-lh:   1.5;
  --p-lh-ap: 1.3;          /* apertado, para títulos */

  /* ── espaçamento: escala de 4 ────────────────────────────────── */
  --p-e-1: 4px;   --p-e-2: 8px;   --p-e-3: 12px;  --p-e-4: 16px;
  --p-e-5: 20px;  --p-e-6: 24px;  --p-e-8: 32px;  --p-e-10: 40px;

  /* ── bordas e raios ─────────────────────────────────────────────
     Três raios, e só. Cinco raios diferentes na mesma tela é o que faz
     parecer montado por pessoas diferentes — e era o caso. */
  --p-r-sm: 6px;   --p-r-md: 10px;  --p-r-lg: 14px;  --p-r-cheio: 999px;
  --p-b: 1px;

  /* ── elevação: dois níveis, discretos ───────────────────────────
     Sombra forte em tema escuro não levanta, suja. */
  --p-elev-1: 0 1px 2px rgba(0,0,0,.4);
  --p-elev-2: 0 8px 24px rgba(0,0,0,.45);

  /* ── interação ──────────────────────────────────────────────── */
  --p-foco: 2px solid var(--p-ouro-cl);
  --p-foco-off: 2px;
  --p-transicao: 120ms ease;

  /* ── densidade ──────────────────────────────────────────────── */
  --p-alt-ctrl: 36px;      /* altura de botão e campo no desktop */
  --p-alt-ctrl-toque: 44px;/* mínimo confortável ao toque */
  --p-larg-leitura: 68ch;  /* largura confortável de leitura */

  /* ═════════════════════════════════════════════════════════════
   * APELIDOS · os vocabulários que já existem nas telas passam a
   * apontar para os valores canônicos. Nenhuma tela precisa mudar.
   * ═════════════════════════════════════════════════════════════ */
  --bg: var(--p-bg);        --fundo: var(--p-bg);     --preto: var(--p-bg);
  --esc: var(--p-bg);
  --card: var(--p-sup-1);   --caixa: var(--p-sup-1);  --surf: var(--p-sup-1);
  --panel: var(--p-sup-1);  --carta: var(--p-sup-1);
  --card2: var(--p-sup-2);  --caixa2: var(--p-sup-2); --surf2: var(--p-sup-2);
  --panel2: var(--p-sup-2); --carta2: var(--p-sup-2);
  --line: var(--p-linha);   --linha: var(--p-linha);
  --line2: var(--p-linha-2);--linha2: var(--p-linha-2);
  --txt: var(--p-txt);      --texto: var(--p-txt);    --ink: var(--p-txt);
  --tinta: var(--p-txt);    --claro: var(--p-txt);
  --dim: var(--p-dim);      --mut: var(--p-dim);      --tinta2: var(--p-dim);
  --cinza: var(--p-dim);
  --dim2: var(--p-dim-2);   --mut2: var(--p-dim-2);   --tinta3: var(--p-dim-2);
  --gold: var(--p-ouro);    --ouro: var(--p-ouro);
  --gold2: var(--p-ouro-cl);--ouro2: var(--p-ouro-cl);
  --ok: var(--p-ok);        --verde: var(--p-ok);     --verde2: var(--p-ok);
  --warn: var(--p-avi);     --amarelo: var(--p-avi);  --ambar: var(--p-avi);
  --laranja: var(--p-avi);
  --bad: var(--p-erro);     --vermelho: var(--p-erro);--verm: var(--p-erro);
  --vermelho2: var(--p-erro);
  --info: var(--p-info);    --azul: var(--p-info);    --azul2: var(--p-info);
  /* grafias curtas em ingles -- achadas medindo o Tarefas, nao supondo */
  --red: var(--p-erro);     --blue: var(--p-info);    --green: var(--p-ok);
  --new: var(--p-avi);      --lock: var(--p-dim-2);   --pre: var(--p-sup-2);
  --raio: var(--p-r-md);    --sombra: var(--p-elev-1);
}

/* movimento reduzido é preferência, não enfeite */
@media (prefers-reduced-motion: reduce){
  :root{ --p-transicao: 0ms; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * 2 · BASE
 * ═══════════════════════════════════════════════════════════════════ */
html{ background: var(--p-bg); }
body{
  font-family: var(--p-fonte);
  font-size: var(--p-t-md);
  line-height: var(--p-lh);
  color: var(--p-txt);
  background: var(--p-bg);
  -webkit-font-smoothing: antialiased;
}

/* Foco visível em TUDO que recebe foco. Sem isto a navegação por
   teclado vira adivinhação — e foi assim que várias telas ficaram. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: var(--p-foco);
  outline-offset: var(--p-foco-off);
  border-radius: var(--p-r-sm);
}

::selection{ background: var(--p-ouro-esc); color: #fff; }

/* barra de rolagem discreta, em vez da branca do sistema */
*{ scrollbar-width: thin; scrollbar-color: var(--p-linha-2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background: var(--p-linha-2); border-radius: var(--p-r-cheio);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-track{ background: transparent; }

/* ═══════════════════════════════════════════════════════════════════
 * 3 · COMPONENTES  ·  prefixo `p-` para não colidir com o CSS das telas
 * ═══════════════════════════════════════════════════════════════════ */

/* ── cabeçalho de página ─────────────────────────────────────────
   Título, descrição curta e UMA ação principal. A ação fica à direita
   e não some no celular: vira a primeira coisa abaixo do título. */
.p-cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: var(--p-e-4); flex-wrap: wrap;
  padding-bottom: var(--p-e-4);
  border-bottom: var(--p-b) solid var(--p-linha);
  margin-bottom: var(--p-e-5);
}
.p-cab h1{
  font-size: var(--p-t-xl); line-height: var(--p-lh-ap);
  margin:0; font-weight:600; letter-spacing:-.01em; color: var(--p-txt);
}
.p-cab .p-desc{ color: var(--p-dim); font-size: var(--p-t-sm); margin-top: var(--p-e-1); }
.p-cab-acoes{ display:flex; gap: var(--p-e-2); align-items:center; }

/* ── abas ────────────────────────────────────────────────────────
   Sublinhado, não pílula: a aba selecionada é UM item, e o dourado
   fica reservado para isso. */
.p-abas{
  display:flex; gap: var(--p-e-1); border-bottom: var(--p-b) solid var(--p-linha);
  overflow-x:auto; scrollbar-width:none;
}
.p-abas::-webkit-scrollbar{ display:none; }
.p-abas > button{
  appearance:none; background:none; border:0; cursor:pointer;
  color: var(--p-dim); font: 600 var(--p-t-sm)/1 var(--p-fonte);
  padding: var(--p-e-3) var(--p-e-3);
  border-bottom: 2px solid transparent; margin-bottom:-1px;
  white-space:nowrap; transition: color var(--p-transicao);
}
.p-abas > button:hover{ color: var(--p-txt); }
.p-abas > button[aria-selected="true"], .p-abas > button.on{
  color: var(--p-ouro-cl); border-bottom-color: var(--p-ouro);
}

/* ── botões ──────────────────────────────────────────────────────
   Três variantes, e só: principal (dourado), padrão (contorno) e
   discreto (texto). Tamanhos diferentes sem motivo foi um dos
   problemas medidos. */
.p-bt{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap: var(--p-e-2);
  min-height: var(--p-alt-ctrl); padding: 0 var(--p-e-4);
  border-radius: var(--p-r-sm); border: var(--p-b) solid var(--p-linha);
  background: var(--p-sup-2); color: var(--p-txt);
  font: 600 var(--p-t-sm)/1 var(--p-fonte);
  transition: background var(--p-transicao), border-color var(--p-transicao);
}
.p-bt:hover:not([disabled]){ background: var(--p-sup-3); border-color: var(--p-linha-2); }
.p-bt--principal{
  background: var(--p-ouro); border-color: var(--p-ouro); color: var(--p-sobre-ouro);
}
.p-bt--principal:hover:not([disabled]){
  background: var(--p-ouro-cl); border-color: var(--p-ouro-cl);
}
.p-bt--discreto{ background:transparent; border-color:transparent; color: var(--p-dim); }
.p-bt--discreto:hover:not([disabled]){ background: var(--p-sup-2); color: var(--p-txt); }
.p-bt--perigo{ border-color: var(--p-erro-lin); color: #ffb4b4; background: var(--p-erro-fnd); }
.p-bt[disabled]{ opacity:.45; cursor:not-allowed; }
.p-bt--sm{ min-height:28px; padding: 0 var(--p-e-3); font-size: var(--p-t-xs); }
.p-bt--icone{ padding:0; width: var(--p-alt-ctrl); }

@media (pointer: coarse){
  .p-bt{ min-height: var(--p-alt-ctrl-toque); }
  .p-bt--sm{ min-height: 36px; }
}

/* ── superfícies ─────────────────────────────────────────────────
   UM nível de cartão. Cartão dentro de cartão é o que dava a
   sensação de caixas empilhadas sem hierarquia. */
.p-caixa{
  background: var(--p-sup-1); border: var(--p-b) solid var(--p-linha);
  border-radius: var(--p-r-lg); padding: var(--p-e-5);
}
.p-caixa .p-caixa{ background:none; border:0; padding:0; border-radius:0; }

/* ── campos ──────────────────────────────────────────────────────── */
.p-campo{ display:block; }
.p-campo > label, .p-rotulo{
  display:block; font-size: var(--p-t-xs); font-weight:600;
  color: var(--p-dim); margin-bottom: var(--p-e-1);
}
.p-campo .p-obrig{ color: var(--p-ouro-cl); margin-left:2px; }
.p-entrada{
  width:100%; min-height: var(--p-alt-ctrl);
  background: var(--p-sup-2); color: var(--p-txt);
  border: var(--p-b) solid var(--p-linha); border-radius: var(--p-r-sm);
  padding: var(--p-e-2) var(--p-e-3);
  font: var(--p-t-md)/var(--p-lh) var(--p-fonte);
  transition: border-color var(--p-transicao);
}
.p-entrada::placeholder{ color: var(--p-dim-2); }
.p-entrada:hover{ border-color: var(--p-linha-2); }
.p-entrada[aria-invalid="true"]{ border-color: var(--p-erro); }
/* o erro fica JUNTO do campo, não no topo do formulário */
.p-erro-campo{
  display:flex; gap: var(--p-e-1); align-items:center;
  color:#ffb4b4; font-size: var(--p-t-xs); margin-top: var(--p-e-1);
}

/* ── etiquetas de situação ───────────────────────────────────────
   Cor + TEXTO sempre. Cor sozinha não é informação para quem não
   distingue as duas. */
.p-etiq{
  display:inline-flex; align-items:center; gap: var(--p-e-1);
  padding: 2px var(--p-e-2); border-radius: var(--p-r-cheio);
  font-size: var(--p-t-xs); font-weight:600; line-height:1.6;
  border: var(--p-b) solid var(--p-linha); color: var(--p-dim);
  background: var(--p-sup-2);
}
.p-etiq--ok{   color:#9fd0b4; border-color: var(--p-ok-lin);   background: var(--p-ok-fnd); }
.p-etiq--avi{  color:#e5c98d; border-color: var(--p-avi-lin);  background: var(--p-avi-fnd); }
.p-etiq--erro{ color:#f0a3a3; border-color: var(--p-erro-lin); background: var(--p-erro-fnd); }
.p-etiq--info{ color:#9cc4ea; border-color: var(--p-info-lin); background: var(--p-info-fnd); }

/* ── tabela ──────────────────────────────────────────────────────── */
.p-tabela{ width:100%; border-collapse: collapse; font-size: var(--p-t-sm); }
.p-tabela th{
  text-align:left; font-weight:600; font-size: var(--p-t-xs);
  text-transform:uppercase; letter-spacing:.04em; color: var(--p-dim);
  background: var(--p-sup-2); padding: var(--p-e-2) var(--p-e-3);
  border-bottom: var(--p-b) solid var(--p-linha); position:sticky; top:0; z-index:1;
}
.p-tabela td{
  padding: var(--p-e-3); border-bottom: var(--p-b) solid var(--p-linha);
  vertical-align: top;
}
.p-tabela tbody tr:hover{ background: var(--p-sup-2); }
/* dinheiro e datas alinhados à direita, em fonte de número: a coluna
   fica legível de cima a baixo em vez de serrilhada */
.p-num{ text-align:right; font-family: var(--p-fonte-num); font-variant-numeric: tabular-nums; }

/* ── estados ─────────────────────────────────────────────────────
   Cinco estados DIFERENTES, porque são cinco coisas diferentes:
   sem registros · não consultado · carregando · erro · desatualizado.
   Tratar "erro" como "sem registros" foi o defeito mais caro deste
   sistema. */
.p-estado{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--p-e-2); text-align:center;
  padding: var(--p-e-10) var(--p-e-5); color: var(--p-dim);
  font-size: var(--p-t-sm);
}
.p-estado strong{ color: var(--p-txt); font-weight:600; font-size: var(--p-t-md); }
.p-estado--erro strong{ color:#f0a3a3; }

.p-aviso{
  display:flex; gap: var(--p-e-2); align-items:flex-start;
  padding: var(--p-e-3); border-radius: var(--p-r-md);
  border: var(--p-b) solid var(--p-linha); background: var(--p-sup-2);
  font-size: var(--p-t-sm);
}
.p-aviso--ok{   background: var(--p-ok-fnd);   border-color: var(--p-ok-lin);   color:#9fd0b4; }
.p-aviso--avi{  background: var(--p-avi-fnd);  border-color: var(--p-avi-lin);  color:#e5c98d; }
.p-aviso--erro{ background: var(--p-erro-fnd); border-color: var(--p-erro-lin); color:#f0a3a3; }

/* carregando: barra discreta, sem girar nada */
.p-carregando{ position:relative; overflow:hidden; height:2px;
  background: var(--p-sup-2); border-radius: var(--p-r-cheio); }
.p-carregando::after{
  content:''; position:absolute; inset:0; width:40%;
  background: linear-gradient(90deg, transparent, var(--p-ouro), transparent);
  animation: p-desliza 1.1s infinite;
}
@keyframes p-desliza{ from{ transform:translateX(-100%) } to{ transform:translateX(250%) } }

/* ── paginação ───────────────────────────────────────────────────
   O total é do CONJUNTO, não da página — e aparece por extenso. */
.p-pag{
  display:flex; align-items:center; gap: var(--p-e-2); flex-wrap:wrap;
  padding-top: var(--p-e-3); margin-top: var(--p-e-3);
  border-top: var(--p-b) solid var(--p-linha);
  font-size: var(--p-t-xs); color: var(--p-dim);
}
.p-pag .p-pag-nums{ display:flex; gap: var(--p-e-1); margin-left:auto; }

/* ── filtros ─────────────────────────────────────────────────────── */
.p-filtros{ display:flex; gap: var(--p-e-2); align-items:center; flex-wrap:wrap; }
.p-filtros .p-busca{ flex:1; min-width:180px; max-width:340px; }
/* o critério ativo fica visível: filtro que não se vê é filtro que se
   esquece, e depois a lista "está errada" */
.p-criterio{
  display:inline-flex; align-items:center; gap: var(--p-e-1);
  padding: 2px var(--p-e-2); border-radius: var(--p-r-cheio);
  background: var(--p-sup-3); border: var(--p-b) solid var(--p-linha-2);
  font-size: var(--p-t-xs); color: var(--p-txt);
}

/* ── indicadores ─────────────────────────────────────────────────── */
.p-inds{ display:grid; gap: var(--p-e-3);
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.p-ind{
  background: var(--p-sup-1); border: var(--p-b) solid var(--p-linha);
  border-radius: var(--p-r-md); padding: var(--p-e-3) var(--p-e-4);
}
.p-ind-r{ font-size: var(--p-t-xs); color: var(--p-dim); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; }
.p-ind-v{ font-size: var(--p-t-2xl); font-weight:600; line-height:1.1;
  margin-top: var(--p-e-1); font-variant-numeric: tabular-nums; }
.p-ind-nota{ font-size: var(--p-t-xs); color: var(--p-dim-2); margin-top: var(--p-e-1); }

/* ── ícones ──────────────────────────────────────────────────────
   Uma biblioteca só: SVG com traço, herdando currentColor. Emoji em
   controle sai — ele muda de desenho a cada sistema e não herda cor.
   Medido: 98 botões com emoji. */
.p-i{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.p-i--lg{ width:20px; height:20px; }

/* ── diálogo ─────────────────────────────────────────────────────── */
.p-dialogo{
  background: var(--p-sup-1); color: var(--p-txt);
  border: var(--p-b) solid var(--p-linha-2); border-radius: var(--p-r-lg);
  box-shadow: var(--p-elev-2); padding: var(--p-e-5);
  max-width: 560px; width: calc(100vw - 32px);
}
.p-dialogo::backdrop{ background: rgba(0,0,0,.6); }

/* ── utilitários curtos ──────────────────────────────────────────── */
.p-leitura{ max-width: var(--p-larg-leitura); }
.p-so-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}