/* Plataforma AXIS · sistema de design (Frente 32, 19/10/2026).
   Carregado por último no index.html. Faz duas coisas:
   1. define os tokens --ax-* (cores da marca nos dois temas, superfícies em camadas, bordas, sombras, raios,
      espaçamentos, tipografia e movimento) e liga os nomes antigos (--roxo, --card, --fg...) a eles,
      para todo CSS que já existe passar a usar a mesma paleta;
   2. refaz o acabamento dos componentes globais que as telas já usam (trilho, topo, cartões, tabelas, botões,
      campos, abas, pílulas, toasts, janelas, estados vazios e carregamento) sem mudar a estrutura nem o JS.
   Documentação para as outras frentes: web/TEMA.md. */

/* ================= tokens: tema claro ================= */
:root{
  /* marca */
  --ax-roxo:#8436FE;--ax-roxo-claro:#A66FFE;--ax-navy:#141534;--ax-branco:#FFFFFF;

  /* acento (muda de tom no escuro) */
  --ax-acento:#8436FE;--ax-acento-forte:#6E25E0;--ax-acento-suave:#F1EAFF;--ax-acento-borda:#D9C7FF;--ax-sobre-acento:#FFFFFF;
  --ax-degrade:linear-gradient(180deg,#9352FF 0%,#7A2FF2 100%);
  --ax-degrade-hover:linear-gradient(180deg,#9D62FF 0%,#7330EA 100%);
  --ax-degrade-marca:linear-gradient(140deg,#9A5BFF 0%,#6E25E0 100%);

  /* superfícies, da mais funda para a mais alta */
  --ax-fundo:#F5F4FA;          /* fundo da área de trabalho */
  --ax-afundada:#EEECF6;       /* trilho de abas, colunas do kanban, áreas rebaixadas */
  --ax-superficie-1:#FFFFFF;   /* cartão, caixa, tabela */
  --ax-superficie-2:#FAF9FD;   /* cabeçalho de tabela, área interna de cartão */
  --ax-superficie-3:#F3F0FA;   /* hover e item selecionado neutro */
  --ax-flutuante:#FFFFFF;      /* menus suspensos, popovers, janelas */
  --ax-campo:#FFFFFF;

  /* texto */
  --ax-texto:#16162E;--ax-texto-2:#3A3954;--ax-texto-mudo:#6F6C8A;--ax-texto-fraco:#A3A0BA;

  /* bordas translúcidas de 1px */
  --ax-borda:rgba(22,22,46,.08);--ax-borda-forte:rgba(22,22,46,.14);

  /* situação */
  --ax-ok:#15805A;--ax-ok-suave:#E2F3EB;
  --ax-alerta:#9A5B06;--ax-alerta-suave:#FCF0DB;
  --ax-erro:#C0392B;--ax-erro-suave:#FBE7E4;
  --ax-info:#2563EB;--ax-info-suave:#E4ECFD;

  /* trilho lateral (escuro nos dois temas) */
  --ax-trilho:#0F1030;--ax-trilho-2:#191A44;--ax-trilho-3:#23245A;--ax-trilho-texto:#C9C6E8;--ax-trilho-mudo:#7D7AAE;

  /* DRE */
  --ax-dre-grupo:#F3EEFF;--ax-dre-resultado:#1A1B45;--ax-dre-resultado-texto:#FFFFFF;

  /* sombras: anel de 1px + sombra macia */
  --ax-anel:0 0 0 1px var(--ax-borda);
  --ax-sombra-1:0 1px 2px rgba(22,22,46,.04),0 2px 8px rgba(22,22,46,.05);
  --ax-sombra-2:0 2px 4px rgba(22,22,46,.04),0 8px 24px rgba(22,22,46,.08);
  --ax-sombra-3:0 8px 28px rgba(22,22,46,.12),0 2px 6px rgba(22,22,46,.05);
  --ax-sombra-acento:0 1px 0 rgba(255,255,255,.22) inset,0 4px 12px rgba(132,54,254,.28);
  --ax-foco:0 0 0 4px rgba(132,54,254,.16);

  /* raios */
  --ax-raio-xs:6px;--ax-raio-s:8px;--ax-raio-m:10px;--ax-raio-l:14px;--ax-raio-xl:18px;--ax-raio-pilula:999px;

  /* espaçamentos (escala de 4) */
  --ax-esp-1:4px;--ax-esp-2:8px;--ax-esp-3:12px;--ax-esp-4:16px;--ax-esp-5:20px;--ax-esp-6:24px;--ax-esp-7:32px;--ax-esp-8:48px;

  /* tipografia */
  --ax-fonte:'Switzer','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ax-fonte-mono:'Geist Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
  --ax-t-micro:10px;      /* rótulo mono em caixa alta */
  --ax-t-legenda:11.5px;
  --ax-t-pequeno:12.5px;
  --ax-t-corpo:14px;
  --ax-t-destaque:15.5px; /* h2 de caixa */
  --ax-t-subtitulo:19px;  /* h2 de janela */
  --ax-t-numero:26px;     /* número de KPI */
  --ax-t-titulo:28px;     /* h1 da tela */
  --ax-t-display:36px;
  --ax-peso-normal:400;--ax-peso-medio:500;--ax-peso-semi:600;--ax-peso-forte:700;

  /* movimento */
  --ax-dur-1:150ms;--ax-dur-2:200ms;--ax-dur-3:250ms;--ax-curva:cubic-bezier(.2,.7,.2,1);

  /* carregamento */
  --ax-esqueleto:#ECEAF4;--ax-esqueleto-brilho:rgba(255,255,255,.7);

  /* seta do select */
  --ax-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236F6C8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ax-seta-clara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23C9C6E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ax-esquema:light;
}

/* ================= tokens: tema escuro (sistema operacional ou data-theme="dark") ================= */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ax-acento:#A66FFE;--ax-acento-forte:#B98EFF;--ax-acento-suave:rgba(166,111,254,.14);--ax-acento-borda:rgba(166,111,254,.36);
  --ax-degrade:linear-gradient(180deg,#9654FF 0%,#7A2FF2 100%);
  --ax-degrade-hover:linear-gradient(180deg,#A36AFF 0%,#8436FE 100%);
  --ax-fundo:#0A0B1F;--ax-afundada:#0E0F28;--ax-superficie-1:#13143A;--ax-superficie-2:#181A44;--ax-superficie-3:#1F2150;--ax-flutuante:#1A1B46;--ax-campo:#0F1030;
  --ax-texto:#EEECFA;--ax-texto-2:#C9C6E3;--ax-texto-mudo:#9A96BE;--ax-texto-fraco:#6B6890;
  --ax-borda:rgba(255,255,255,.07);--ax-borda-forte:rgba(255,255,255,.13);
  --ax-ok:#4FD1A0;--ax-ok-suave:rgba(79,209,160,.13);--ax-alerta:#F0B65A;--ax-alerta-suave:rgba(240,182,90,.13);
  --ax-erro:#F28B7D;--ax-erro-suave:rgba(242,139,125,.13);--ax-info:#7EA8FF;--ax-info-suave:rgba(126,168,255,.13);
  --ax-trilho:#07081A;--ax-trilho-2:#11122E;--ax-trilho-3:#1C1D48;
  --ax-dre-grupo:#1B1A48;--ax-dre-resultado:#2B2373;
  --ax-sombra-1:0 1px 0 rgba(255,255,255,.03) inset,0 2px 10px rgba(0,0,0,.25);
  --ax-sombra-2:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
  --ax-sombra-3:0 18px 50px rgba(0,0,0,.5);
  --ax-sombra-acento:0 1px 0 rgba(255,255,255,.2) inset,0 4px 14px rgba(132,54,254,.38);
  --ax-foco:0 0 0 4px rgba(166,111,254,.22);
  --ax-esqueleto:rgba(255,255,255,.055);--ax-esqueleto-brilho:rgba(255,255,255,.07);
  --ax-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239A96BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ax-esquema:dark;
}}
:root[data-theme="dark"]{
  --ax-acento:#A66FFE;--ax-acento-forte:#B98EFF;--ax-acento-suave:rgba(166,111,254,.14);--ax-acento-borda:rgba(166,111,254,.36);
  --ax-degrade:linear-gradient(180deg,#9654FF 0%,#7A2FF2 100%);
  --ax-degrade-hover:linear-gradient(180deg,#A36AFF 0%,#8436FE 100%);
  --ax-fundo:#0A0B1F;--ax-afundada:#0E0F28;--ax-superficie-1:#13143A;--ax-superficie-2:#181A44;--ax-superficie-3:#1F2150;--ax-flutuante:#1A1B46;--ax-campo:#0F1030;
  --ax-texto:#EEECFA;--ax-texto-2:#C9C6E3;--ax-texto-mudo:#9A96BE;--ax-texto-fraco:#6B6890;
  --ax-borda:rgba(255,255,255,.07);--ax-borda-forte:rgba(255,255,255,.13);
  --ax-ok:#4FD1A0;--ax-ok-suave:rgba(79,209,160,.13);--ax-alerta:#F0B65A;--ax-alerta-suave:rgba(240,182,90,.13);
  --ax-erro:#F28B7D;--ax-erro-suave:rgba(242,139,125,.13);--ax-info:#7EA8FF;--ax-info-suave:rgba(126,168,255,.13);
  --ax-trilho:#07081A;--ax-trilho-2:#11122E;--ax-trilho-3:#1C1D48;
  --ax-dre-grupo:#1B1A48;--ax-dre-resultado:#2B2373;
  --ax-sombra-1:0 1px 0 rgba(255,255,255,.03) inset,0 2px 10px rgba(0,0,0,.25);
  --ax-sombra-2:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
  --ax-sombra-3:0 18px 50px rgba(0,0,0,.5);
  --ax-sombra-acento:0 1px 0 rgba(255,255,255,.2) inset,0 4px 14px rgba(132,54,254,.38);
  --ax-foco:0 0 0 4px rgba(166,111,254,.22);
  --ax-esqueleto:rgba(255,255,255,.055);--ax-esqueleto-brilho:rgba(255,255,255,.07);
  --ax-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239A96BE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ax-esquema:dark;
}

/* ================= nomes antigos ligados aos tokens =================
   O :not(#ax-tema) dá especificidade de id, então vence as redefinições de app.css e app-glow.css
   nos dois temas sem depender da ordem dos arquivos. */
:root:not(#ax-tema){
  --navy:var(--ax-navy);--roxo:var(--ax-acento);--roxo-2:var(--ax-acento-forte);--roxo-s:var(--ax-acento-suave);--roxo-m:var(--ax-acento-borda);
  --bg:var(--ax-fundo);--bg-2:var(--ax-afundada);--card:var(--ax-superficie-1);--campo:var(--ax-campo);
  --fg:var(--ax-texto);--fg-2:var(--ax-texto-2);--mudo:var(--ax-texto-mudo);--linha:var(--ax-borda);--linha-2:var(--ax-borda-forte);
  --ok:var(--ax-ok);--ok-s:var(--ax-ok-suave);--at:var(--ax-alerta);--at-s:var(--ax-alerta-suave);--cr:var(--ax-erro);--cr-s:var(--ax-erro-suave);--az:var(--ax-info);--az-s:var(--ax-info-suave);
  --rail:var(--ax-trilho);--rail-2:var(--ax-trilho-2);--rail-3:var(--ax-trilho-3);--rail-fg:var(--ax-trilho-texto);--rail-mudo:var(--ax-trilho-mudo);
  --sombra:var(--ax-sombra-1);--sombra-2:var(--ax-sombra-3);--anel:var(--ax-anel);--r:var(--ax-raio-l);--r-s:var(--ax-raio-m);
  --f:var(--ax-fonte);--m:var(--ax-fonte-mono);
  --grupo-bg:var(--ax-dre-grupo);--res-bg:var(--ax-dre-resultado);--res-fg:var(--ax-dre-resultado-texto);
  color-scheme:var(--ax-esquema);
}

/* ================= base ================= */
body{background:var(--ax-fundo);color:var(--ax-texto);font-family:var(--ax-fonte);font-size:var(--ax-t-corpo);font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility}
::selection{background:var(--ax-acento-borda);color:var(--ax-texto)}
*{scrollbar-width:thin;scrollbar-color:var(--ax-borda-forte) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ax-borda-forte);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--ax-texto-fraco)}
::-webkit-scrollbar-track{background:transparent}
a{color:var(--ax-acento);text-underline-offset:2px;text-decoration-thickness:1px;transition:color var(--ax-dur-1)}
a:hover{color:var(--ax-acento-forte)}
h1{font-size:var(--ax-t-titulo);font-weight:650;letter-spacing:-.028em;line-height:1.12}
h2{font-size:var(--ax-t-destaque);font-weight:650;letter-spacing:-.012em}
.sub{color:var(--ax-texto-mudo)}
.nota{color:var(--ax-texto-mudo)}

/* números sempre tabulares */
.num,td.v,th.v,.kpi b,.conc b,.pn-bar b,.pn-rp b,.cq-resumo b,.fu-tile b,.fu-comp b,.dt-pv,.dt-horas b{font-variant-numeric:tabular-nums lining-nums}

/* ================= trilho lateral ================= */
nav.rail{
  background:
    radial-gradient(420px 260px at 0% 0%,rgba(132,54,254,.20),transparent 62%),
    radial-gradient(300px 220px at 100% 100%,rgba(132,54,254,.10),transparent 60%),
    linear-gradient(180deg,var(--ax-trilho) 0%,color-mix(in srgb,var(--ax-trilho) 82%,#000) 100%);
  border-right:1px solid rgba(255,255,255,.05);
}
.grupo a{transition:background var(--ax-dur-1),color var(--ax-dur-1),padding var(--ax-dur-2) var(--ax-curva)}
.grupo a:hover{background:rgba(255,255,255,.05)}
.grupo a[aria-current="page"]{background:linear-gradient(90deg,rgba(132,54,254,.30),rgba(132,54,254,.07));box-shadow:inset 0 0 0 1px rgba(167,119,255,.14)}
.grupo a[aria-current="page"]::before{background:var(--ax-roxo-claro);box-shadow:0 0 12px var(--ax-roxo-claro)}
.grupo a .tag{font-variant-numeric:tabular-nums}
.empsel select{--ax-seta:var(--ax-seta-clara);color-scheme:dark}
.rail .pe{transition:background var(--ax-dur-1)}
.rail .pe:hover{background:rgba(255,255,255,.06)}

/* ================= topo ================= */
.topo{background:color-mix(in srgb,var(--ax-fundo) 80%,transparent);border-bottom:1px solid var(--ax-borda)}
.topo .ctx .logo{box-shadow:var(--ax-sombra-1),inset 0 0 0 1px rgba(255,255,255,.12)}
@media screen and (max-width:980px){
  .topo{gap:8px;padding-top:10px;padding-bottom:10px;min-height:0}
  .topo .ctx{min-width:0}
  .topo .ctx>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ================= tela e cabeçalho ================= */
/* luz leve do acento no alto da área de trabalho, para dar profundidade sem pesar */
.app>main{background:radial-gradient(1100px 420px at 100% -8%,color-mix(in srgb,var(--ax-acento-suave) 80%,transparent),transparent 62%) no-repeat}
.cab h1+.sub{margin-top:6px}

/* ================= cartões e superfícies ================= */
.box,.kpi,.wrap,.cli,.cat,.cal,.conc,.vazio,.perfil-card,.cq-card,.cq-resumo,.ia-chat,.ia-hist{
  background:var(--ax-superficie-1);border:0;border-radius:var(--ax-raio-l);box-shadow:var(--ax-anel),var(--ax-sombra-1)
}
a.box,button.box,.cli,.kcard,.perfil-card,.cq-card{transition:transform var(--ax-dur-2) var(--ax-curva),box-shadow var(--ax-dur-2)}
.cli:hover,a.box:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-3)}

/* KPI: o brilho redondo no canto virou uma lavagem leve do acento, sem forma recortada */
.kpi{background:radial-gradient(130% 90% at 100% 0%,var(--ax-acento-suave),transparent 58%),var(--ax-superficie-1)}
.kpi::after{content:none}
.kpi small{font-family:var(--ax-fonte-mono);font-size:var(--ax-t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ax-texto-mudo);font-weight:500;line-height:1.6}
.kpi b{font-size:var(--ax-t-numero);font-weight:650;letter-spacing:-.03em;margin-top:8px}
.kpi .var{color:var(--ax-texto-mudo)}
.kpi .var.up,.kpi b.up{color:var(--ax-ok)}.kpi .var.down,.kpi b.down{color:var(--ax-erro)}

/* ================= tabelas ================= */
.wrap{background:var(--ax-superficie-1);overflow:auto}
table{font-size:13px}
th{background:var(--ax-superficie-2);color:var(--ax-texto-mudo);font-family:var(--ax-fonte-mono);font-size:var(--ax-t-micro);letter-spacing:.14em;font-weight:500;text-transform:uppercase;
   padding:11px 14px;border-bottom:1px solid var(--ax-borda-forte);position:sticky;top:0;z-index:2}
td{padding:10px 14px;border-bottom:1px solid var(--ax-borda)}
/* zebra sutil: só nas linhas comuns (as linhas da DRE com tipo t-* mantêm o fundo delas) */
:where(tbody tr:nth-child(even):not([class*="t-"])) > td{background:color-mix(in srgb,var(--ax-superficie-2) 70%,transparent)}
tbody tr{transition:background var(--ax-dur-1)}
tbody tr:hover>td{background:color-mix(in srgb,var(--ax-acento-suave) 60%,var(--ax-superficie-1))}
/* números à direita */
td.v,th.v,td.num,th.num{text-align:right}
td.v{font-family:var(--ax-fonte-mono);font-size:12.5px}
/* total em destaque */
tfoot td,tfoot th,tr.total td,tr.t-total td,td.tot{font-weight:650;color:var(--ax-texto)}
tfoot td,tfoot th,tr.total td,tr.t-total td{background:color-mix(in srgb,var(--ax-acento-suave) 75%,var(--ax-superficie-1));border-bottom:0;position:sticky;bottom:0;z-index:1}
tfoot th{text-transform:none;letter-spacing:0;font-family:var(--ax-fonte);font-size:13px}
/* DRE: as faixas continuam as do app-glow, agora pelos tokens */
tr.t-grupo td{background:var(--ax-dre-grupo)}
tr.t-resultado td,tr.t-equilibrio td{background:var(--ax-dre-resultado);color:var(--ax-dre-resultado-texto)}
tr.t-titulo td{background:var(--ax-superficie-2)}
/* cabeçalho fixo: no computador a tabela rola dentro da caixa e o cabeçalho fica parado.
   No celular a página rola inteira (rolagem dentro de rolagem atrapalha o dedo). */
@media screen and (min-width:981px){
  .tela .wrap{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  dialog .wrap{max-height:60vh}
}

/* ================= botões ================= */
.btn{background:var(--ax-degrade);color:var(--ax-sobre-acento);border:0;border-radius:var(--ax-raio-m);box-shadow:var(--ax-sombra-acento);
     transition:transform var(--ax-dur-1) var(--ax-curva),box-shadow var(--ax-dur-1),background var(--ax-dur-1),color var(--ax-dur-1)}
.btn:hover{background:var(--ax-degrade-hover);color:var(--ax-sobre-acento);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 18px rgba(132,54,254,.36);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:var(--ax-sombra-acento)}
.btn.sec{background:var(--ax-superficie-1);color:var(--ax-texto);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.btn.sec:hover{background:var(--ax-superficie-1);color:var(--ax-acento);box-shadow:0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-2)}
.btn.fantasma{background:transparent;color:var(--ax-texto-2);box-shadow:none}
.btn.fantasma:hover{background:var(--ax-superficie-3);color:var(--ax-texto);box-shadow:none;transform:none}
.btn.perigo,.btn.sec.perigo{background:var(--ax-erro-suave);color:var(--ax-erro);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ax-erro) 22%,transparent)}
.btn.perigo:hover,.btn.sec.perigo:hover{background:var(--ax-erro);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--ax-erro) 35%,transparent)}
.btn.gd{padding:12px 20px;font-size:15px;border-radius:var(--ax-raio-l)}
.btn[aria-pressed="true"]{background:var(--ax-acento-suave);color:var(--ax-acento);box-shadow:0 0 0 1px var(--ax-acento-borda)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;filter:saturate(.6)}
.btn:disabled:hover{transform:none}
.btn[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-color:rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent;animation:ax-gira .7s linear infinite}
.btn.sec[aria-busy="true"]::after,.btn.fantasma[aria-busy="true"]::after{border-color:var(--ax-acento) var(--ax-acento) transparent transparent}
.btn:focus-visible{outline:2px solid var(--ax-acento);outline-offset:2px}
@keyframes ax-gira{to{transform:rotate(360deg)}}

/* ================= campos ================= */
input,select,textarea{background-color:var(--ax-campo);color:var(--ax-texto);border:0;border-radius:var(--ax-raio-m);box-shadow:inset 0 0 0 1px var(--ax-borda-forte);
  transition:box-shadow var(--ax-dur-1),background-color var(--ax-dur-1);color-scheme:var(--ax-esquema)}
input::placeholder,textarea::placeholder{color:var(--ax-texto-fraco);opacity:1}
input:hover,select:hover,textarea:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ax-acento) 45%,var(--ax-borda-forte))}
input:focus,select:focus,textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--ax-acento),var(--ax-foco)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input:is([type=checkbox],[type=radio],[type=range],[type=color]){box-shadow:none;accent-color:var(--ax-acento);padding:0}
input:is([type=checkbox],[type=radio]){width:16px;height:16px;cursor:pointer;vertical-align:-3px}
input[type=file]{box-shadow:none;padding:0;background:none}
/* seta própria no select: a nativa some, a do tema acompanha claro e escuro */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background-image:var(--ax-seta);background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px;padding-right:32px}
/* lista aberta do select: no escuro ela abria branca */
select option,select optgroup{background-color:var(--ax-flutuante);color:var(--ax-texto)}
select optgroup{font-weight:650;color:var(--ax-texto-mudo)}
.empsel select option,.empsel select optgroup{background-color:#14153A;color:#EEECFA}
input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
input::-webkit-calendar-picker-indicator:hover{opacity:1}
/* rótulo do campo em caixa alta espaçada (só dentro do app e das janelas; a tela de entrada tem o dela) */
.app .campo>span:first-child,dialog .campo>span:first-child,.app fieldset.campo>legend,dialog fieldset.campo>legend{
  font-family:var(--ax-fonte);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ax-texto-mudo)}
.campo{gap:6px}

/* ================= abas ================= */
.abas{background:var(--ax-afundada);box-shadow:inset 0 0 0 1px var(--ax-borda);border-radius:var(--ax-raio-l)}
.abas button{border-radius:var(--ax-raio-m);color:var(--ax-texto-mudo);transition:background var(--ax-dur-1),color var(--ax-dur-1),box-shadow var(--ax-dur-1)}
.abas button:hover{color:var(--ax-texto);background:color-mix(in srgb,var(--ax-superficie-1) 45%,transparent)}
.abas button[aria-selected="true"]{background:var(--ax-superficie-1);color:var(--ax-texto);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.abas button:focus-visible{outline:2px solid var(--ax-acento);outline-offset:1px}
.vis-alt{background:var(--ax-afundada);box-shadow:inset 0 0 0 1px var(--ax-borda)}
.vis-alt button{transition:background var(--ax-dur-1),color var(--ax-dur-1)}

/* ================= pílulas e selos ================= */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--ax-raio-pilula);line-height:1.35;letter-spacing:.01em;
      box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent)}
.pill.ok{background:var(--ax-ok-suave);color:var(--ax-ok)}
.pill.at{background:var(--ax-alerta-suave);color:var(--ax-alerta)}
.pill.cr{background:var(--ax-erro-suave);color:var(--ax-erro)}
.pill.ro{background:var(--ax-acento-suave);color:var(--ax-acento)}
.pill.info{background:var(--ax-info-suave);color:var(--ax-info)}
.pill.ne{background:var(--ax-afundada);color:var(--ax-texto-mudo);border:0;box-shadow:inset 0 0 0 1px var(--ax-borda)}
.pill.ponto::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.selo{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:var(--ax-raio-pilula);font:600 10px/1.4 var(--ax-fonte-mono);letter-spacing:.2em;text-transform:uppercase;
      color:var(--ax-acento);background:var(--ax-acento-suave);box-shadow:inset 0 0 0 1px var(--ax-acento-borda)}
.chip{background:var(--ax-afundada);color:var(--ax-texto-2)}

/* ================= avisos (toast) ================= */
.toast{display:flex;align-items:center;gap:10px;background:#16173A;color:#fff;border-radius:var(--ax-raio-l);padding:12px 16px 12px 14px;
       box-shadow:0 0 0 1px rgba(255,255,255,.07),0 18px 44px rgba(10,10,40,.32);animation:ax-toast var(--ax-dur-3) var(--ax-curva) both}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:#A66FFE;box-shadow:0 0 0 4px rgba(166,111,254,.22)}
.toast.ok::before{background:#4FD1A0;box-shadow:0 0 0 4px rgba(79,209,160,.22)}
.toast.erro{background:#3A1418;box-shadow:0 0 0 1px rgba(242,139,125,.35),0 18px 44px rgba(10,10,40,.32)}
.toast.erro::before{background:#F28B7D;box-shadow:0 0 0 4px rgba(242,139,125,.22)}
@keyframes ax-toast{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ================= janelas (dialog) ================= */
dialog{background:var(--ax-flutuante);color:var(--ax-texto);border:0;border-radius:var(--ax-raio-xl);box-shadow:0 0 0 1px var(--ax-borda),var(--ax-sombra-3),0 40px 100px rgba(10,10,40,.28)}
dialog[open]{animation:ax-janela var(--ax-dur-3) var(--ax-curva)}
dialog::backdrop{background:rgba(10,11,32,.52);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
dialog[open]::backdrop{animation:ax-esmaece var(--ax-dur-2) ease-out}
dialog h2{font-size:var(--ax-t-subtitulo);font-weight:650;letter-spacing:-.018em}
dialog h2+.sub{margin-top:-4px}
dialog footer{padding-top:6px;gap:8px}
@keyframes ax-janela{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ax-esmaece{from{opacity:0}to{opacity:1}}

/* menus suspensos e popovers que já existem */
.tk-pop,.tk-mencao-pop,.avisos-painel,.dg-dica{background:var(--ax-flutuante);box-shadow:var(--ax-anel),var(--ax-sombra-3)}

/* ================= estado vazio =================
   O símbolo da AXIS só aparece no vazio "de verdade", o que tem título em <b> (padrão das telas).
   Vazio usado como rótulo pequeno dentro de cartão (sem <b>) fica só com o texto. */
.vazio{padding:40px 28px;text-align:center;color:var(--ax-texto-mudo);background:var(--ax-superficie-1)}
.vazio:has(> b)::before{content:"";display:block;width:34px;height:30px;margin:0 auto 14px;background:var(--ax-acento);opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 281.11 250.96'%3E%3Cpolygon points='140.55 179.8 124.82 195.53 124.82 250.96 156.29 250.96 156.29 195.54 140.55 179.8'/%3E%3Cpolygon points='281.11 94.97 179.56 94.97 251.36 23.16 228.52 .31 140.55 88.28 52.59 .31 29.74 23.16 101.55 94.97 0 94.97 0 127.28 101.55 127.28 29.74 199.09 52.59 221.93 140.55 133.97 228.52 221.93 251.36 199.09 179.56 127.28 281.11 127.28 281.11 94.97'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 281.11 250.96'%3E%3Cpolygon points='140.55 179.8 124.82 195.53 124.82 250.96 156.29 250.96 156.29 195.54 140.55 179.8'/%3E%3Cpolygon points='281.11 94.97 179.56 94.97 251.36 23.16 228.52 .31 140.55 88.28 52.59 .31 29.74 23.16 101.55 94.97 0 94.97 0 127.28 101.55 127.28 29.74 199.09 52.59 221.93 140.55 133.97 228.52 221.93 251.36 199.09 179.56 127.28 281.11 127.28 281.11 94.97'/%3E%3C/svg%3E") center/contain no-repeat}
.vazio.sem-icone::before{content:none}
.vazio b{display:block;color:var(--ax-texto);font-size:15px;font-weight:650;letter-spacing:-.01em;margin-bottom:6px}
.box .vazio{box-shadow:none;background:var(--ax-superficie-2);padding:28px 20px}
.box .vazio:has(> b)::before{width:26px;height:23px;margin-bottom:10px}

/* ================= carregamento (esqueleto) ================= */
/* classes para quem desenhar tela nova */
.skel{display:block;position:relative;overflow:hidden;background:var(--ax-esqueleto);border-radius:var(--ax-raio-s);color:transparent!important;user-select:none;pointer-events:none}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--ax-esqueleto-brilho),transparent);animation:ax-brilho 1.3s ease-in-out infinite}
.skel.linha{height:12px;margin:8px 0}
.skel.linha.curta{width:40%}
.skel.titulo{height:26px;width:240px;border-radius:var(--ax-raio-m)}
.skel.bloco{height:120px;border-radius:var(--ax-raio-l)}
.skel.circulo{width:32px;height:32px;border-radius:50%}
/* o "Carregando…" que o app.js põe na tela enquanto busca os dados vira um esqueleto de cabeçalho, KPIs e caixa.
   O texto continua lá para leitor de tela; só fica transparente. */
#tela>p.nota:only-child{
  --sk:var(--ax-esqueleto);
  position:relative;overflow:hidden;margin:0;height:560px;color:transparent;user-select:none;border-radius:var(--ax-raio-l);
  animation:ax-pulso 1.4s ease-in-out infinite;
  background-image:
    linear-gradient(var(--sk),var(--sk)),linear-gradient(var(--sk),var(--sk)),
    linear-gradient(var(--sk),var(--sk)),linear-gradient(var(--sk),var(--sk)),linear-gradient(var(--sk),var(--sk)),linear-gradient(var(--sk),var(--sk)),
    linear-gradient(var(--sk),var(--sk));
  background-repeat:no-repeat;
  background-size:240px 28px,170px 12px,calc(25% - 12px) 112px,calc(25% - 12px) 112px,calc(25% - 12px) 112px,calc(25% - 12px) 112px,100% 340px;
  background-position:0 0,0 44px,0 88px,33.333% 88px,66.666% 88px,100% 88px,0 220px;
}
@media screen and (max-width:560px){
  #tela>p.nota:only-child{background-size:180px 26px,130px 12px,calc(50% - 5px) 96px,calc(50% - 5px) 96px,calc(50% - 5px) 96px,calc(50% - 5px) 96px,100% 300px;
    background-position:0 0,0 42px,0 80px,100% 80px,0 186px,100% 186px,0 292px}
}
@keyframes ax-brilho{to{transform:translateX(100%)}}
@keyframes ax-pulso{0%,100%{opacity:1}50%{opacity:.55}}

/* ================= peças pequenas ================= */
.lista .it{border-top-color:var(--ax-borda)}
.perg{background:var(--ax-alerta-suave);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ax-alerta) 22%,transparent)}
.av{background:var(--ax-degrade-marca)}
.sino .n{box-shadow:0 0 0 2px var(--ax-fundo)}
.kanban .col{background:var(--ax-afundada);box-shadow:inset 0 0 0 1px var(--ax-borda)}
.kcard{background:var(--ax-superficie-1);box-shadow:var(--ax-anel),var(--ax-sombra-1)}
.kcard:hover{box-shadow:0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-3)}

/* foco visível igual em tudo que é clicável */
.grupo a:focus-visible,.abas button:focus-visible,.cli:focus-visible,.kcard:focus-visible,a:focus-visible{outline:2px solid var(--ax-acento);outline-offset:2px;border-radius:var(--ax-raio-s)}

@media (prefers-reduced-motion:reduce){
  .skel::after,#tela>p.nota:only-child{animation:none}
  dialog[open],dialog[open]::backdrop,.toast{animation:none}
}
@media print{
  .tela .wrap{max-height:none!important;overflow:visible!important}
  th,tfoot td,tr.total td,tr.t-total td{position:static}
}