/* Portal Governança Tech · design tokens do V2
   ------------------------------------------------------------------
   Origem: `design_handoff_portal_governanca_tech/tokens.css`, extraído do
   protótipo `Portal Conta Coluna v2.dc.html`. O handoff é autoridade VISUAL
   e de composição; ele não decide definição de indicador, universo, período,
   filtro nem arredondamento. Número que aparece no protótipo é exemplo de
   design e nunca entra no produto.

   Duas adaptações deliberadas em relação ao arquivo do handoff, e só duas:

   1. O handoff chaveia o escuro por `[data-tema="escuro"]`. Aqui o gatilho é
      `data-theme`, que é o que `web/tema.js` já escreve e o que os CSS deste
      projeto já leem. Trocar o nome do atributo obrigaria a mexer no tema
      inteiro para não ganhar nada.
   2. Os valores do escuro vivem UMA vez, com prefixo `--d-`, e os dois
      gatilhos abaixo apenas apontam os tokens para eles. Escrever a paleta
      duas vezes, uma na media query e outra no atributo, é o caminho óbvio
      e é também como as duas versões divergem no primeiro ajuste de cor.
      Mesma estrutura já usada em `estilo.css`.

   Os nomes dos tokens são os do handoff, sem tradução. É por eles que a
   revisão visual compara tela e referência. */

:root {
  /* ---- superfícies, claro ---- */
  --s-card:#ffffff;
  --s-bar:rgba(255,255,255,.93);
  --s-app:#FAF9F5;
  --s-sunk:#F7F5F0;
  --s-hover:#FAFBFC;
  --s-plot:#FDFDFC;
  --s-sel:#F3F6FB;
  --s-nav:#EFEDE7;
  --s-track:#F0EEE9;
  --s-tag-a:#EFF2F8;

  /* ---- interruptor de tema ---- */
  --switch-bg:#E3E1DB;
  --switch-bd:#D3D5D9;
  --switch-knob:#8B919B;
  --switch-x:0px;

  /* ---- bordas ---- */
  --b-card:#E6E4DF;
  --b-line:#DFE1E4;
  --b-soft:#EDEBE5;
  --b-row:#F2F0EB;
  --b-strong:#D3D5D9;

  /* ---- texto, escala de contraste ----
     `--t-3` é o MÍNIMO para texto legível em fundo claro. De `--t-4` para
     baixo só linha, ícone decorativo e metadado que não precisa ser lido. */
  --t-1:#0D1117;
  --t-2:#4A515C;
  --t-3:#6B7280;
  --t-4:#8B919B;
  --t-5:#9AA0A8;
  --t-6:#B9BDC4;
  --t-7:#B0B5BC;
  --t-8:#C6C9CD;

  /* ---- marca e acento ---- */
  --a-1:#12264F;
  --a-deep:#0C1B3A;
  --a-link:#1E3A76;
  --a-2:#4A6291;
  --a-3:#8798B8;
  --a-4:#9FB0CE;
  --a-border:#C9D4E6;
  --a-tag-t:#2E3F63;
  --n-1:#A8AEB6;
  --n-2:#6E7A90;
  --on-a:#ffffff;

  /* ---- semântica de estado ---- */
  --e-red:#B4262A;
  --e-orange:#C4441C;
  --e-orange3:#C4741C;
  --e-amber:#8A6A1C;
  --e-amber-t:#6B5A2E;
  --e-green:#1D6F42;
  --e-red-bg:#FDF4F4;
  --e-orange-bg:#FBF0EC;
  --e-amber-bg:#FBF5E6;
  --e-amber-bg2:#F3E7CA;
  --e-green-bg:#F1F7F3;
  --e-red-bd:#E8C9CA;
  --e-red-line:#E0A9AB;
  --e-orange-bd:#EFE2DC;
  --e-amber-bd:#EADFC2;
  --e-green-bd:#CBE0D3;

  /* ---- áreas do hub de Apps ----
     Mora aqui, e não no `:root` de valores fixos, porque `tint` e `ink` pintam
     o botão "Abrir" e precisam virar junto com o tema. A cor base e o gradiente
     não viram: o glifo do ícone é branco nos dois temas.
     `-de`/`-ate` são os dois stops do gradiente do ícone, a 160graus.
     Valores do pacote de design V3, 20/09/2026. */
  --area-indicadores:#C4402B; --area-indicadores-de:#E05A42; --area-indicadores-ate:#B6301F;
  --area-indicadores-tint:#FBEFEC; --area-indicadores-ink:#A5321F;
  --area-portfolio:#2A4479;   --area-portfolio-de:#3C5A8E;   --area-portfolio-ate:#16294F;
  --area-portfolio-tint:#EFF2F8;   --area-portfolio-ink:#1E3A76;
  --area-auditoria:#1D6F42;   --area-auditoria-de:#2E9159;   --area-auditoria-ate:#155B35;
  --area-auditoria-tint:#F1F7F3;   --area-auditoria-ink:#17603A;
  /* O glifo dentro do squircle. Fixo nos dois temas de propósito: o
     gradiente que fica atrás dele também não vira, então `--on-a` não serve,
     porque aquele token escurece no tema escuro. */
  --area-glifo:#ffffff;

  /* ================================================================
     VALORES DO ESCURO
     Uma vez só. Os dois gatilhos abaixo apenas apontam os tokens.
     As superfícies espelham os PAPÉIS do claro, não os valores: no claro
     a aplicação é mais escura que o cartão, no escuro é o contrário,
     porque profundidade no escuro se lê com mais luz, não com menos.
     ================================================================ */
  --d-s-card:#161A20;
  --d-s-bar:rgba(22,26,32,.93);
  --d-s-app:#0F1216;
  --d-s-sunk:#13171C;
  --d-s-hover:#1C222A;
  --d-s-plot:#14181E;
  --d-s-sel:#17233A;
  --d-s-nav:#1E242C;
  --d-s-track:#242A33;
  --d-s-tag-a:#1C2436;

  --d-switch-bg:#17233A;
  --d-switch-bd:#33456B;
  --d-switch-knob:#7FA0DC;
  --d-switch-x:11px;

  --d-b-card:#272D36;
  --d-b-line:#2F3641;
  --d-b-soft:#232932;
  --d-b-row:#22282F;
  --d-b-strong:#3A424E;

  --d-t-1:#E9ECF1;
  --d-t-2:#C3C9D2;
  --d-t-3:#A5ACB6;
  --d-t-4:#8C939E;
  --d-t-5:#7C838E;
  --d-t-6:#5F6772;
  --d-t-7:#67707B;
  --d-t-8:#505761;

  /* O acento do claro (#12264F) sobre fundo escuro vira quase invisível,
     então ele sobe de luminosidade até destacar e continuar carregando
     texto. Mesmo raciocínio já aplicado em `estilo.css`. */
  --d-a-1:#7FA0DC;
  --d-a-deep:#0B1220;
  --d-a-link:#9FBCEF;
  --d-a-2:#5A76AE;
  --d-a-3:#41537A;
  --d-a-4:#33405C;
  --d-a-border:#33456B;
  --d-a-tag-t:#A9BEE6;
  --d-n-1:#6E7681;
  --d-n-2:#59636F;
  --d-on-a:#0F1216;

  --d-e-red:#E4696E;
  --d-e-orange:#E17F52;
  --d-e-orange3:#D9974E;
  --d-e-amber:#D9B45A;
  --d-e-amber-t:#D9B45A;
  --d-e-green:#4FB57F;
  --d-e-red-bg:#2B1B1D;
  --d-e-orange-bg:#2B1F19;
  --d-e-amber-bg:#2A2519;
  --d-e-amber-bg2:#3A3222;
  --d-e-green-bg:#17271E;
  --d-e-red-bd:#4A2B2E;
  --d-e-red-line:#6E3B3E;
  --d-e-orange-bd:#46302A;
  --d-e-amber-bd:#453B25;
  --d-e-green-bd:#254536;

  /* Áreas no escuro: o fundo do botão escurece e a tinta clareia, para manter
     o texto legível. O matiz de cada área é preservado. */
  --d-area-indicadores-tint:#2B1B1A; --d-area-indicadores-ink:#F0A091;
  --d-area-portfolio-tint:#1C2436;   --d-area-portfolio-ink:#A9BEE4;
  --d-area-auditoria-tint:#17291F;   --d-area-auditoria-ink:#8ED5AB;
}

/* ==================================================================
   MAPEAMENTO DO ESCURO
   Aparece duas vezes, e só ele: uma para quem deixou o sistema decidir,
   outra para quem clicou no botão. A ordem entre os dois é o que faz o
   botão funcionar nos DOIS sentidos.
   ================================================================== */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --s-card:var(--d-s-card); --s-bar:var(--d-s-bar); --s-app:var(--d-s-app);
    --s-sunk:var(--d-s-sunk); --s-hover:var(--d-s-hover); --s-plot:var(--d-s-plot);
    --s-sel:var(--d-s-sel); --s-nav:var(--d-s-nav); --s-track:var(--d-s-track);
    --s-tag-a:var(--d-s-tag-a);
    --switch-bg:var(--d-switch-bg); --switch-bd:var(--d-switch-bd);
    --switch-knob:var(--d-switch-knob); --switch-x:var(--d-switch-x);
    --b-card:var(--d-b-card); --b-line:var(--d-b-line); --b-soft:var(--d-b-soft);
    --b-row:var(--d-b-row); --b-strong:var(--d-b-strong);
    --t-1:var(--d-t-1); --t-2:var(--d-t-2); --t-3:var(--d-t-3); --t-4:var(--d-t-4);
    --t-5:var(--d-t-5); --t-6:var(--d-t-6); --t-7:var(--d-t-7); --t-8:var(--d-t-8);
    --a-1:var(--d-a-1); --a-deep:var(--d-a-deep); --a-link:var(--d-a-link);
    --a-2:var(--d-a-2); --a-3:var(--d-a-3); --a-4:var(--d-a-4);
    --a-border:var(--d-a-border); --a-tag-t:var(--d-a-tag-t);
    --n-1:var(--d-n-1); --n-2:var(--d-n-2); --on-a:var(--d-on-a);
    --e-red:var(--d-e-red); --e-orange:var(--d-e-orange); --e-orange3:var(--d-e-orange3);
    --e-amber:var(--d-e-amber); --e-amber-t:var(--d-e-amber-t); --e-green:var(--d-e-green);
    --e-red-bg:var(--d-e-red-bg); --e-orange-bg:var(--d-e-orange-bg);
    --e-amber-bg:var(--d-e-amber-bg); --e-amber-bg2:var(--d-e-amber-bg2);
    --e-green-bg:var(--d-e-green-bg);
    --e-red-bd:var(--d-e-red-bd); --e-red-line:var(--d-e-red-line);
    --e-orange-bd:var(--d-e-orange-bd); --e-amber-bd:var(--d-e-amber-bd);
    --e-green-bd:var(--d-e-green-bd);
    --area-indicadores-tint:var(--d-area-indicadores-tint);
    --area-indicadores-ink:var(--d-area-indicadores-ink);
    --area-portfolio-tint:var(--d-area-portfolio-tint);
    --area-portfolio-ink:var(--d-area-portfolio-ink);
    --area-auditoria-tint:var(--d-area-auditoria-tint);
    --area-auditoria-ink:var(--d-area-auditoria-ink);
  }
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --s-card:var(--d-s-card); --s-bar:var(--d-s-bar); --s-app:var(--d-s-app);
  --s-sunk:var(--d-s-sunk); --s-hover:var(--d-s-hover); --s-plot:var(--d-s-plot);
  --s-sel:var(--d-s-sel); --s-nav:var(--d-s-nav); --s-track:var(--d-s-track);
  --s-tag-a:var(--d-s-tag-a);
  --switch-bg:var(--d-switch-bg); --switch-bd:var(--d-switch-bd);
  --switch-knob:var(--d-switch-knob); --switch-x:var(--d-switch-x);
  --b-card:var(--d-b-card); --b-line:var(--d-b-line); --b-soft:var(--d-b-soft);
  --b-row:var(--d-b-row); --b-strong:var(--d-b-strong);
  --t-1:var(--d-t-1); --t-2:var(--d-t-2); --t-3:var(--d-t-3); --t-4:var(--d-t-4);
  --t-5:var(--d-t-5); --t-6:var(--d-t-6); --t-7:var(--d-t-7); --t-8:var(--d-t-8);
  --a-1:var(--d-a-1); --a-deep:var(--d-a-deep); --a-link:var(--d-a-link);
  --a-2:var(--d-a-2); --a-3:var(--d-a-3); --a-4:var(--d-a-4);
  --a-border:var(--d-a-border); --a-tag-t:var(--d-a-tag-t);
  --n-1:var(--d-n-1); --n-2:var(--d-n-2); --on-a:var(--d-on-a);
  --e-red:var(--d-e-red); --e-orange:var(--d-e-orange); --e-orange3:var(--d-e-orange3);
  --e-amber:var(--d-e-amber); --e-amber-t:var(--d-e-amber-t); --e-green:var(--d-e-green);
  --e-red-bg:var(--d-e-red-bg); --e-orange-bg:var(--d-e-orange-bg);
  --e-amber-bg:var(--d-e-amber-bg); --e-amber-bg2:var(--d-e-amber-bg2);
  --e-green-bg:var(--d-e-green-bg);
  --e-red-bd:var(--d-e-red-bd); --e-red-line:var(--d-e-red-line);
  --e-orange-bd:var(--d-e-orange-bd); --e-amber-bd:var(--d-e-amber-bd);
  --e-green-bd:var(--d-e-green-bd);
  --area-indicadores-tint:var(--d-area-indicadores-tint);
  --area-indicadores-ink:var(--d-area-indicadores-ink);
  --area-portfolio-tint:var(--d-area-portfolio-tint);
  --area-portfolio-ink:var(--d-area-portfolio-ink);
  --area-auditoria-tint:var(--d-area-auditoria-tint);
  --area-auditoria-ink:var(--d-area-auditoria-ink);
}

/* ==================================================================
   TOKENS QUE NÃO DEPENDEM DO TEMA
   ================================================================== */
:root {
  /* ---- tipografia ----
     Instrument Serif é carregada pelo handoff e não é usada em tela
     nenhuma do V2. Não entra aqui enquanto não tiver papel. */
  --font-ui:'Instrument Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --type-h1:600 clamp(23px,3.2vw,30px)/1.1 var(--font-ui);
  --type-h1-tracking:-.035em;
  --type-kicker:500 10px/1 var(--font-mono);
  --type-kicker-tracking:.09em;
  --type-lead:400 13.5px/1.6 var(--font-ui);
  --type-card-title:600 14.5px/1.3 var(--font-ui);
  --type-body:400 12.5px/1.55 var(--font-ui);
  --type-nav:400 12.5px/1.3 var(--font-ui);
  --type-numero:600 26px/1 var(--font-ui);

  /* ---- raio ---- */
  --r-painel:16px; --r-card:13px; --r-card-sm:11px;
  --r-control:9px; --r-tag:6px; --r-pill:999px;

  /* ---- espaçamento ---- */
  --pad-pagina:clamp(28px,3.2vw,40px) clamp(16px,3.2vw,36px) 76px;
  --pad-card:20px 22px;
  --gap-secao:22px; --gap-rotulo:12px; --gap-card:18px;

  /* ---- sombra ---- */
  --sh-card:0 1px 2px rgba(13,17,23,.05), 0 14px 30px -22px rgba(13,17,23,.45);
  --sh-hover:0 18px 40px -26px rgba(13,24,48,.32);
  --sh-popover:0 14px 36px -10px rgba(13,17,23,.22);

  /* ---- shell ----
     `--bp-rail` é o ponto em que a coluna vira rail sozinha. */
  --col-w:212px; --col-rail-w:56px; --bp-rail:880px; --pagina-max:1400px;

  /* ---- diretorias ----
     Fixas por diretoria, usadas em gráfico e tabela. São cor de DADO: não
     vestem cromo de interface e nenhuma delas pinta botão, aba ou selo. */
  --dir-operadora:#2E8B57; --dir-backoffice:#C4741C; --dir-digital:#1D9E6A;
  --dir-assistencial:#2F6FE4; --dir-insights:#C2185B; --dir-ia:#C9A227;
  --dir-modernizacao:#1E7B52;

  /* ---- mapa do fluxo ---- */
  --fluxo-upstream:#4A6291; --fluxo-downstream:#BD5533; --fluxo-downstream-bd:#D08A6E;
}

/* ==================================================================
   MOVIMENTO
   Tudo desligado sob `prefers-reduced-motion`, sem exceção.
   ================================================================== */
@keyframes dcSobe { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
@keyframes dcApp  { from { opacity:0; transform:translateY(9px) }  to { opacity:1; transform:translateY(0) } }
@keyframes dcChip { from { opacity:0; transform:translateY(6px) }  to { opacity:1; transform:translateY(0) } }
@keyframes dcPonteiro { 0%{transform:rotate(-96deg)} 18%{transform:rotate(-96deg)} 62%{transform:rotate(12deg)} 80%{transform:rotate(-5deg)} 92%{transform:rotate(2deg)} 100%{transform:rotate(0)} }
@keyframes dcIcone { 0%{transform:translateY(0) scale(1)} 35%{transform:translateY(-2.5px) scale(1.14)} 70%{transform:translateY(0) scale(1.02)} 100%{transform:translateY(0) scale(1)} }
@keyframes dcGira { to { transform:rotate(360deg) } }

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