/* Design system SeuHub (Doc A, 12/10/2026). Único lugar com cor escrita direto: o resto do hub usa só estes tokens.
   Cinza: Slate (Radix Colors). Acabamento: Rhea (Basecoat), só os valores. Marca: um token por agência (--marca),
   a escala sai por color-mix. Tokens antigos (--ink, --bg, --pri…) ficam como apelidos para as telas que ainda não migraram. */
:root{
  --cinza-1: #fcfcfd; --cinza-2: #f9f9fb; --cinza-3: #f0f0f3; --cinza-4: #e8e8ec; --cinza-5: #e0e1e6; --cinza-6: #d9d9e0;
  --cinza-7: #cdced6; --cinza-8: #b9bbc6; --cinza-9: #8b8d98; --cinza-10: #80838d; --cinza-11: #60646c; --cinza-12: #1c2024;
  --fundo: var(--cinza-2); --superficie: #ffffff; --texto: var(--cinza-12); --texto-2: var(--cinza-11); --texto-3: var(--cinza-9);
  --linha: var(--cinza-4); --linha-forte: var(--cinza-6); --campo: color-mix(in srgb, var(--cinza-5) 50%, transparent); --foco: var(--cinza-8);
  --marca: #FF5B1F;
  --marca-fundo: color-mix(in oklch, var(--marca) 8%, var(--superficie));
  --marca-hover: color-mix(in oklch, var(--marca) 16%, var(--superficie));
  --marca-borda: color-mix(in oklch, var(--marca) 45%, var(--superficie));
  --marca-texto: color-mix(in oklch, var(--marca) 70%, #000000);
  --sobre-marca: #111111; --branco: #ffffff; --preto: #000000;   /* não invertem no escuro: texto sobre cor cheia, véu sobre imagem */
  --painel-login: var(--marca); --sobre-painel: var(--sobre-marca);
  --ok-fundo: #f0fdf4; --ok: #22c55e; --ok-texto: #15803d; --ok-cheio: #16a34a;
  --erro-fundo: #fff1f2; --erro: #e11d48; --erro-texto: #be123c;
  --atencao-fundo: #fffbeb; --atencao: #f59e0b; --atencao-texto: #b45309;
  --info-fundo: #f0f9ff; --info: #0ea5e9; --info-texto: #0369a1;
  --raio-grande: 24px; --raio-medio: 16px; --raio-pequeno: 10px; --raio-pilula: 999px;
  --sombra-card: 0 0 0 1px rgb(28 32 36 / .05), 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
  --sombra-flutuante: 0 0 0 1px rgb(28 32 36 / .06), 0 12px 32px -12px rgb(0 0 0 / .22);
  --altura-controle: 32px;
  --dur: 160ms; --curva: cubic-bezier(.25,.1,.25,1); --desloca: 4px;
  --fonte-texto: 'Geist'; --fonte-titulo: var(--fonte-texto); --fonte-mono: 'Geist Mono';
  /* apelidos das telas antigas */
  --header-bg: color-mix(in srgb, var(--fundo) 88%, transparent); --seg-bg: var(--texto); --seg-fg: var(--superficie);
  --acao: var(--texto); --acao-esc: var(--texto); --acao-fundo: var(--cinza-3);   /* cor dos botões e destaques de ação: preto no padrão; a agência pode trocar (por exemplo, para a --marca) */
  --azu: var(--info);
  --green: var(--ok-texto); --greenbg: var(--ok-fundo); --red: var(--erro-texto); --redbg: var(--erro-fundo);
  --orange: var(--atencao-texto); --orangebg: var(--atencao-fundo); --orange-txt: var(--atencao-texto);
  --rosa: var(--erro); --lav: #8b7fe8; --pes: var(--atencao); --lar: #8b7fe8; --ceu: var(--info);
  --p-azul: #2f7bef; --p-rosa: #e8457b; --p-pes: #f2a93b; --p-lav: #7c5ce6; --p-verde: #1fa463; --p-ceu: #1a95d3;
  --mh-col: var(--cinza-2); --mh-col-borda: var(--linha);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])){
  --cinza-1: #111113; --cinza-2: #18191b; --cinza-3: #212225; --cinza-4: #272a2d; --cinza-5: #2e3135; --cinza-6: #363a3f;
  --cinza-7: #43484e; --cinza-8: #5a6169; --cinza-9: #696e77; --cinza-10: #777b84; --cinza-11: #b0b4ba; --cinza-12: #edeef0;
  --fundo: var(--cinza-1); --superficie: var(--cinza-2); --texto: var(--cinza-12); --texto-2: var(--cinza-11); --texto-3: var(--cinza-9);
  --linha: var(--cinza-4); --linha-forte: var(--cinza-6); --campo: color-mix(in srgb, var(--cinza-5) 60%, transparent); --foco: var(--cinza-8);
  --marca: #FF5B1F;
  --marca-fundo: color-mix(in oklch, var(--marca) 14%, var(--superficie));
  --marca-hover: color-mix(in oklch, var(--marca) 22%, var(--superficie));
  --marca-borda: color-mix(in oklch, var(--marca) 50%, var(--superficie));
  --marca-texto: color-mix(in oklch, var(--marca) 70%, #ffffff);
  --sobre-marca: #111111; --branco: #ffffff; --preto: #000000;   /* não invertem no escuro: texto sobre cor cheia, véu sobre imagem */
  --painel-login: var(--marca); --sobre-painel: var(--sobre-marca);
  --ok-fundo: color-mix(in srgb, #22c55e 14%, var(--superficie)); --ok: #22c55e; --ok-texto: #4ade80; --ok-cheio: #16a34a;
  --erro-fundo: color-mix(in srgb, #e11d48 16%, var(--superficie)); --erro: #fb7185; --erro-texto: #fda4af;
  --atencao-fundo: color-mix(in srgb, #f59e0b 14%, var(--superficie)); --atencao: #fbbf24; --atencao-texto: #fcd34d;
  --info-fundo: color-mix(in srgb, #0ea5e9 14%, var(--superficie)); --info: #38bdf8; --info-texto: #7dd3fc;
  --sombra-card: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .4);
  --sombra-flutuante: 0 0 0 1px rgb(255 255 255 / .08), 0 16px 40px -12px rgb(0 0 0 / .7);
  --header-bg: color-mix(in srgb, var(--fundo) 88%, transparent); --seg-bg: var(--texto); --seg-fg: var(--fundo);
  --acao: var(--texto); --acao-esc: var(--texto); --acao-fundo: var(--cinza-3);   /* cor dos botões e destaques de ação: preto no padrão; a agência pode trocar (por exemplo, para a --marca) */
  --azu: var(--info);
  --green: var(--ok-texto); --greenbg: var(--ok-fundo); --red: var(--erro-texto); --redbg: var(--erro-fundo);
  --orange: var(--atencao-texto); --orangebg: var(--atencao-fundo); --orange-txt: var(--atencao-texto);
  --rosa: var(--erro); --lav: #a99bf5; --pes: var(--atencao); --lar: #a99bf5; --ceu: var(--info);
  --p-azul: #60a5fa; --p-rosa: #fb7185; --p-pes: #fbbf24; --p-lav: #a78bfa; --p-verde: #4ade80; --p-ceu: #38bdf8;
  --mh-col: var(--cinza-2); --mh-col-borda: var(--linha);
  color-scheme: dark;
}}
:root:where([data-theme="dark"]){
  --cinza-1: #111113; --cinza-2: #18191b; --cinza-3: #212225; --cinza-4: #272a2d; --cinza-5: #2e3135; --cinza-6: #363a3f;
  --cinza-7: #43484e; --cinza-8: #5a6169; --cinza-9: #696e77; --cinza-10: #777b84; --cinza-11: #b0b4ba; --cinza-12: #edeef0;
  --fundo: var(--cinza-1); --superficie: var(--cinza-2); --texto: var(--cinza-12); --texto-2: var(--cinza-11); --texto-3: var(--cinza-9);
  --linha: var(--cinza-4); --linha-forte: var(--cinza-6); --campo: color-mix(in srgb, var(--cinza-5) 60%, transparent); --foco: var(--cinza-8);
  --marca: #FF5B1F;
  --marca-fundo: color-mix(in oklch, var(--marca) 14%, var(--superficie));
  --marca-hover: color-mix(in oklch, var(--marca) 22%, var(--superficie));
  --marca-borda: color-mix(in oklch, var(--marca) 50%, var(--superficie));
  --marca-texto: color-mix(in oklch, var(--marca) 70%, #ffffff);
  --sobre-marca: #111111; --branco: #ffffff; --preto: #000000;   /* não invertem no escuro: texto sobre cor cheia, véu sobre imagem */
  --painel-login: var(--marca); --sobre-painel: var(--sobre-marca);
  --ok-fundo: color-mix(in srgb, #22c55e 14%, var(--superficie)); --ok: #22c55e; --ok-texto: #4ade80; --ok-cheio: #16a34a;
  --erro-fundo: color-mix(in srgb, #e11d48 16%, var(--superficie)); --erro: #fb7185; --erro-texto: #fda4af;
  --atencao-fundo: color-mix(in srgb, #f59e0b 14%, var(--superficie)); --atencao: #fbbf24; --atencao-texto: #fcd34d;
  --info-fundo: color-mix(in srgb, #0ea5e9 14%, var(--superficie)); --info: #38bdf8; --info-texto: #7dd3fc;
  --sombra-card: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .4);
  --sombra-flutuante: 0 0 0 1px rgb(255 255 255 / .08), 0 16px 40px -12px rgb(0 0 0 / .7);
  --header-bg: color-mix(in srgb, var(--fundo) 88%, transparent); --seg-bg: var(--texto); --seg-fg: var(--fundo);
  --acao: var(--texto); --acao-esc: var(--texto); --acao-fundo: var(--cinza-3);   /* cor dos botões e destaques de ação: preto no padrão; a agência pode trocar (por exemplo, para a --marca) */
  --azu: var(--info);
  --green: var(--ok-texto); --greenbg: var(--ok-fundo); --red: var(--erro-texto); --redbg: var(--erro-fundo);
  --orange: var(--atencao-texto); --orangebg: var(--atencao-fundo); --orange-txt: var(--atencao-texto);
  --rosa: var(--erro); --lav: #a99bf5; --pes: var(--atencao); --lar: #a99bf5; --ceu: var(--info);
  --p-azul: #60a5fa; --p-rosa: #fb7185; --p-pes: #fbbf24; --p-lav: #a78bfa; --p-verde: #4ade80; --p-ceu: #38bdf8;
  --mh-col: var(--cinza-2); --mh-col-borda: var(--linha);
  color-scheme: dark;
}
/* hidden sempre esconde: classes com display (.lg, .btn…) não podem passar por cima do atributo. */
[hidden]{ display: none !important; }
@media print{
  *, *::before, *::after{ box-shadow: none !important; }
  .card, .mh-kpi, body{ background: #ffffff !important; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}