/* Ecossistema AXIS: base comum dos quatro produtos (Frente 02, rodada 5, 19/10/2026).
AxisNexus e Portal do cliente (web/), AXIS Finanças (web-pessoal/) e, quando adotar, a Área exclusiva do site.
Servido em /static/r5-base.css para os dois apps. Documentação: web/ECOSSISTEMA.md.
O arquivo tem quatro partes:
1. tokens --ax-* nos dois temas (os mesmos valores do app-tema.css, que no Nexus continua carregado depois e manda);
2. ligação das cores antigas (--roxo, --bg, --card, --fg...) aos tokens, para o Finanças seguir a mesma paleta do Nexus;
3. componentes comuns com prefixo .ax-: tipografia, profundidade, botões, campos, cartões, avisos, janelas, esqueleto, selos;
4. ponte do Finanças: acabamento das peças antigas dele que têm equivalente no Nexus (só seletores que existem lá).
Nada aqui usa seletor global solto (button, input, table). As peças antigas de cada app continuam como estão. */
@font-face{font-family:'Switzer';src:url('/static/fontes/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Switzer';src:url('/static/fontes/switzer-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Switzer';src:url('/static/fontes/switzer-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Switzer';src:url('/static/fontes/switzer-700.woff2') format('woff2');font-weight:700;font-display:swap}
/* ================= 1. tokens: tema claro ================= */
:root{
/* marca */
--ax-roxo:#8436FE;--ax-roxo-claro:#A66FFE;--ax-navy:#141534;--ax-branco:#FFFFFF;
/* acento */
--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 em camadas, da mais funda para a mais alta */
--ax-fundo:#F5F4FA;--ax-afundada:#EEECF6;--ax-superficie-1:#FFFFFF;--ax-superficie-2:#FAF9FD;--ax-superficie-3:#F3F0FA;
--ax-flutuante:#FFFFFF;--ax-campo:#FFFFFF;
/* texto */
--ax-texto:#16162E;--ax-texto-2:#3A3954;--ax-texto-mudo:#67647F;--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 e faixas escuras (escuras 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);
/* profundidade (novos na rodada 5): luz no alto da peça e relevo do campo */
--ax-relevo:inset 0 1px 0 rgba(255,255,255,.9); /* fio de luz na borda de cima do cartão */
--ax-relevo-campo:inset 0 1px 2px rgba(22,22,46,.05); /* campo levemente rebaixado */
--ax-luz:radial-gradient(120% 70% at 0% 0%,rgba(132,54,254,.035),transparent 60%); /* lavagem de luz da marca */
--ax-sombra-flutuante:0 0 0 1px var(--ax-borda),0 24px 60px rgba(20,21,52,.18),0 4px 12px rgba(20,21,52,.06);
--ax-veu:rgba(10,11,32,.52); /* fundo atrás da janela */
/* 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;--ax-t-legenda:11.5px;--ax-t-pequeno:12.5px;--ax-t-corpo:14px;--ax-t-destaque:15.5px;
--ax-t-subtitulo:19px;--ax-t-numero:26px;--ax-t-titulo:28px;--ax-t-display:36px;
--ax-peso-normal:400;--ax-peso-medio:500;--ax-peso-semi:600;--ax-peso-forte:700;
/* alturas de controle: o toque do celular pede 44 px */
--ax-alt-pq:32px;--ax-alt-m:40px;--ax-alt-gd:48px;--ax-alt-toque:44px;
/* 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-relevo:inset 0 1px 0 rgba(255,255,255,.06);
--ax-relevo-campo:inset 0 1px 2px rgba(0,0,0,.25);
--ax-luz:radial-gradient(120% 70% at 0% 0%,rgba(166,111,254,.08),transparent 60%);
--ax-sombra-flutuante:0 0 0 1px rgba(255,255,255,.08),0 28px 70px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.3);
--ax-veu:rgba(4,4,16,.62);
--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-relevo:inset 0 1px 0 rgba(255,255,255,.06);
--ax-relevo-campo:inset 0 1px 2px rgba(0,0,0,.25);
--ax-luz:radial-gradient(120% 70% at 0% 0%,rgba(166,111,254,.08),transparent 60%);
--ax-sombra-flutuante:0 0 0 1px rgba(255,255,255,.08),0 28px 70px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.3);
--ax-veu:rgba(4,4,16,.62);
--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;
}
/* ================= 2. cores antigas ligadas aos tokens =================
Só cor, fonte e situação. Raio (--r), sombra (--sombra) e o --bg-2 ficam com cada app, porque o Finanças é
pensado para o dedo (raios maiores) e no escuro usa o --bg-2 mais claro que o cartão para botão secundário.
O :not(#ax-tema) dá especificidade de id: vence o :root do fin.css e do app.css nos dois temas.
No Nexus o app-tema.css faz a mesma ligação com os mesmos valores. */
: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);--card:var(--ax-superficie-1);--card-2:var(--ax-superficie-2);
--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);
--f:var(--ax-fonte);--m:var(--ax-fonte-mono);
}
/* ================= 3. componentes comuns (.ax-*) ================= */
/* ---------- tipografia ---------- */
.ax-display{margin:0;font:650 var(--ax-t-display)/1.08 var(--ax-fonte);letter-spacing:-.035em;color:var(--ax-texto);text-wrap:balance}
.ax-titulo{margin:0;font:650 var(--ax-t-titulo)/1.12 var(--ax-fonte);letter-spacing:-.028em;color:var(--ax-texto);text-wrap:balance}
.ax-subtitulo{margin:0;font:650 var(--ax-t-subtitulo)/1.25 var(--ax-fonte);letter-spacing:-.018em;color:var(--ax-texto)}
.ax-destaque{margin:0;font:650 var(--ax-t-destaque)/1.3 var(--ax-fonte);letter-spacing:-.012em;color:var(--ax-texto)}
.ax-texto{font:400 var(--ax-t-corpo)/1.55 var(--ax-fonte);color:var(--ax-texto-2)}
.ax-sub{margin:4px 0 0;font:400 var(--ax-t-corpo)/1.5 var(--ax-fonte);color:var(--ax-texto-mudo)}
.ax-legenda{font:500 var(--ax-t-legenda)/1.45 var(--ax-fonte);color:var(--ax-texto-mudo)}
/* rótulo pequeno: Switzer em caixa alta com respiro, sem mono */
.ax-rotulo{font:600 10.5px/1.4 var(--ax-fonte);letter-spacing:.1em;text-transform:uppercase;color:var(--ax-texto-mudo)}
.ax-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em;white-space:nowrap}
.ax-num-grande{font:650 var(--ax-t-numero)/1.1 var(--ax-fonte);letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--ax-texto)}
.ax-num.up,.ax-num-grande.up{color:var(--ax-ok)}.ax-num.down,.ax-num-grande.down{color:var(--ax-erro)}
/* ---------- profundidade ---------- */
.ax-elev-0{box-shadow:var(--ax-anel)}
.ax-elev-1{box-shadow:var(--ax-relevo),var(--ax-anel),var(--ax-sombra-1)}
.ax-elev-2{box-shadow:var(--ax-relevo),var(--ax-anel),var(--ax-sombra-2)}
.ax-elev-3{box-shadow:var(--ax-relevo),var(--ax-anel),var(--ax-sombra-3)}
.ax-afundado{background:var(--ax-afundada);box-shadow:inset 0 0 0 1px var(--ax-borda),inset 0 1px 3px rgba(22,22,46,.04);border-radius:var(--ax-raio-l)}
/* ---------- cartões ---------- */
.ax-cartao{position:relative;min-width:0;padding:var(--ax-esp-5);border-radius:var(--ax-raio-l);color:var(--ax-texto);
background:var(--ax-luz),var(--ax-superficie-1);box-shadow:var(--ax-relevo),var(--ax-anel),var(--ax-sombra-1)}
.ax-cartao.compacto{padding:var(--ax-esp-4)}
.ax-cartao.plano{background:var(--ax-superficie-2);box-shadow:var(--ax-anel)}
/* cartão de destaque escuro (saldo, resumo do mês): navy com luz roxa, escuro nos dois temas */
.ax-cartao.marca{color:#fff;isolation:isolate;overflow:hidden;
background:radial-gradient(420px 240px at 100% 0%,rgba(167,119,255,.45),transparent 60%),radial-gradient(320px 220px at 0% 110%,rgba(132,54,254,.30),transparent 70%),linear-gradient(150deg,#221E63,#141534 58%,#0D0E2A);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.04),0 18px 40px rgba(20,21,52,.30)}
.ax-cartao.marca .ax-sub,.ax-cartao.marca .ax-legenda,.ax-cartao.marca .ax-rotulo{color:rgba(230,226,255,.7)}
.ax-cartao.marca .ax-titulo,.ax-cartao.marca .ax-subtitulo,.ax-cartao.marca .ax-destaque,.ax-cartao.marca .ax-num-grande{color:#fff}
/* cartão que se clica: levanta 2 px no hover e afunda no toque */
.ax-cartao.interativo{cursor:pointer;text-align:left;text-decoration:none;
transition:transform var(--ax-dur-2) var(--ax-curva),box-shadow var(--ax-dur-2) var(--ax-curva)}
.ax-cartao.interativo:hover{transform:translateY(-2px);box-shadow:var(--ax-relevo),0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-3)}
.ax-cartao.interativo:active{transform:translateY(0) scale(.995)}
.ax-cartao.interativo:focus-visible{outline:2px solid var(--ax-acento);outline-offset:2px}
.ax-cartao-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--ax-esp-3);margin-bottom:var(--ax-esp-3)}
.ax-cartao-cab>:first-child{min-width:0}
.ax-cartao-rod{display:flex;align-items:center;justify-content:flex-end;gap:var(--ax-esp-2);margin-top:var(--ax-esp-4);padding-top:var(--ax-esp-3);box-shadow:inset 0 1px 0 var(--ax-borda)}
.ax-grade{display:grid;gap:var(--ax-esp-4);grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
/* ---------- botões ---------- */
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ax-alt-m);padding:0 16px;border:0;border-radius:var(--ax-raio-m);
font:600 13.5px/1 var(--ax-fonte);letter-spacing:-.003em;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
color:var(--ax-sobre-acento);background:var(--ax-degrade);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),filter var(--ax-dur-1)}
.ax-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ax-btn:hover{background:var(--ax-degrade-hover);color:var(--ax-sobre-acento);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 18px rgba(132,54,254,.36)}
.ax-btn:active{transform:translateY(0) scale(.98);box-shadow:var(--ax-sombra-acento)}
.ax-btn:focus-visible{outline:2px solid var(--ax-acento);outline-offset:2px}
.ax-btn.sec{color:var(--ax-texto);background:var(--ax-superficie-1);box-shadow:var(--ax-relevo),var(--ax-anel),var(--ax-sombra-1)}
.ax-btn.sec:hover{color:var(--ax-acento);background:var(--ax-superficie-1);box-shadow:var(--ax-relevo),0 0 0 1px var(--ax-acento-borda),var(--ax-sombra-2)}
.ax-btn.fantasma{color:var(--ax-texto-2);background:transparent;box-shadow:none}
.ax-btn.fantasma:hover{color:var(--ax-texto);background:var(--ax-superficie-3);transform:none;box-shadow:none}
.ax-btn.perigo{color:var(--ax-erro);background:var(--ax-erro-suave);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ax-erro) 22%,transparent)}
.ax-btn.perigo:hover{color:#fff;background:var(--ax-erro);box-shadow:0 4px 14px color-mix(in srgb,var(--ax-erro) 35%,transparent)}
.ax-btn.pq{height:var(--ax-alt-pq);padding:0 12px;font-size:12.5px;border-radius:var(--ax-raio-s)}
.ax-btn.gd{height:var(--ax-alt-gd);padding:0 22px;font-size:15px;border-radius:var(--ax-raio-l)}
.ax-btn.cheio{width:100%}
.ax-btn.icone{width:var(--ax-alt-m);padding:0}
.ax-btn.icone.pq{width:var(--ax-alt-pq)}
.ax-btn[aria-pressed="true"]{color:var(--ax-acento);background:var(--ax-acento-suave);box-shadow:0 0 0 1px var(--ax-acento-borda)}
.ax-btn:disabled,.ax-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;filter:saturate(.6);pointer-events:none}
.ax-btn[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
.ax-btn[aria-busy="true"]>*{visibility:hidden}
.ax-btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;
border:2px solid rgba(255,255,255,.9);border-right-color:transparent;border-bottom-color:transparent;animation:ax5-gira .7s linear infinite}
.ax-btn:is(.sec,.fantasma,.perigo)[aria-busy="true"]::after{border-top-color:var(--ax-acento);border-left-color:var(--ax-acento)}
.ax-btns{display:flex;flex-wrap:wrap;gap:var(--ax-esp-2);align-items:center}
@media (pointer:coarse){.ax-btn{min-height:var(--ax-alt-toque)}.ax-btn.pq{min-height:40px}.ax-btn.icone{min-width:var(--ax-alt-toque)}}
/* ---------- campos ---------- */
.ax-campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.ax-campo>.ax-rotulo,.ax-campo>span:first-child{font:600 10.5px/1.4 var(--ax-fonte);letter-spacing:.1em;text-transform:uppercase;color:var(--ax-texto-mudo)}
.ax-entrada{width:100%;min-width:0;height:44px;padding:0 14px;border:0;border-radius:var(--ax-raio-m);
font:500 14.5px/1.3 var(--ax-fonte);color:var(--ax-texto);background-color:var(--ax-campo);color-scheme:var(--ax-esquema);
box-shadow:var(--ax-relevo-campo),inset 0 0 0 1px var(--ax-borda-forte);outline:0;
transition:box-shadow var(--ax-dur-1),background-color var(--ax-dur-1)}
textarea.ax-entrada{height:auto;min-height:92px;padding:11px 14px;line-height:1.5;resize:vertical}
select.ax-entrada{-webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;
background-image:var(--ax-seta);background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px}
select.ax-entrada option{background-color:var(--ax-flutuante);color:var(--ax-texto)}
.ax-entrada::placeholder{color:var(--ax-texto-fraco);opacity:1}
.ax-entrada:hover{box-shadow:var(--ax-relevo-campo),inset 0 0 0 1px color-mix(in srgb,var(--ax-acento) 45%,var(--ax-borda-forte))}
.ax-entrada:focus,.ax-entrada:focus-visible{box-shadow:inset 0 0 0 1px var(--ax-acento),var(--ax-foco)}
.ax-entrada[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--ax-erro),0 0 0 4px color-mix(in srgb,var(--ax-erro) 16%,transparent)}
.ax-entrada:disabled{opacity:.6;cursor:not-allowed}
.ax-campo .ax-ajuda{font:500 var(--ax-t-legenda)/1.45 var(--ax-fonte);color:var(--ax-texto-mudo)}
.ax-campo .ax-erro-msg{font:600 var(--ax-t-legenda)/1.45 var(--ax-fonte);color:var(--ax-erro)}
/* campo com ícone ou botão dentro (busca, olho da senha) */
.ax-entrada-ic{position:relative;display:flex;align-items:center}
.ax-entrada-ic>.ax-entrada{padding-left:42px}
.ax-entrada-ic>svg{position:absolute;left:14px;width:17px;height:17px;fill:none;stroke:var(--ax-texto-mudo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ax-entrada-ic>button{position:absolute;right:6px;height:32px;min-width:32px;border:0;border-radius:var(--ax-raio-s);background:none;color:var(--ax-texto-mudo);cursor:pointer;display:grid;place-items:center}
.ax-entrada-ic>button:hover{background:var(--ax-superficie-3);color:var(--ax-texto)}
.ax-form{display:flex;flex-direction:column;gap:var(--ax-esp-4)}
.ax-form .ax-dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ax-esp-3)}
/* iOS amplia a tela se o campo tiver menos de 16 px */
@media (pointer:coarse){.ax-entrada{font-size:16px;height:48px}}
@media screen and (max-width:560px){.ax-form .ax-dupla{grid-template-columns:minmax(0,1fr)}}
/* ---------- selos e pílulas ---------- */
.ax-selo{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 12px 6px 10px;border-radius:var(--ax-raio-pilula);
font:600 10.5px/1.3 var(--ax-fonte);letter-spacing:.16em;text-transform:uppercase;color:var(--ax-acento);
background:var(--ax-acento-suave);box-shadow:inset 0 0 0 1px var(--ax-acento-borda)}
.ax-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.ax-pilula{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--ax-raio-pilula);font:600 11px/1.35 var(--ax-fonte);white-space:nowrap;
color:var(--ax-texto-mudo);background:var(--ax-afundada);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent)}
.ax-pilula.ok{color:var(--ax-ok);background:var(--ax-ok-suave)}
.ax-pilula.at{color:var(--ax-alerta);background:var(--ax-alerta-suave)}
.ax-pilula.cr{color:var(--ax-erro);background:var(--ax-erro-suave)}
.ax-pilula.ro{color:var(--ax-acento);background:var(--ax-acento-suave)}
.ax-pilula.info{color:var(--ax-info);background:var(--ax-info-suave)}
.ax-pilula.ponto::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* ---------- avisos (toast) ----------
Some sozinho: acrescente .saindo antes de remover para ele descer suave. */
.ax-toasts{position:fixed;z-index:80;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;max-width:min(420px,calc(100vw - 32px))}
.ax-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 14px;border-radius:var(--ax-raio-l);
font:500 13.5px/1.4 var(--ax-fonte);color:#fff;background:#16173A;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.07),0 18px 44px rgba(10,10,40,.32);
animation:ax5-toast var(--ax-dur-3) var(--ax-curva) both}
.ax-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)}
.ax-toast.ok::before{background:#4FD1A0;box-shadow:0 0 0 4px rgba(79,209,160,.22)}
.ax-toast.at::before{background:#F0B65A;box-shadow:0 0 0 4px rgba(240,182,90,.22)}
.ax-toast.erro{background:#3A1418;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(242,139,125,.35),0 18px 44px rgba(10,10,40,.32)}
.ax-toast.erro::before{background:#F28B7D;box-shadow:0 0 0 4px rgba(242,139,125,.22)}
.ax-toast.saindo{animation:ax5-toast-sai var(--ax-dur-2) ease-in both}
@media screen and (max-width:560px){.ax-toasts{left:16px;right:16px;align-items:stretch;max-width:none}}
/* ---------- janela (dialog.ax-modal) ----------
No celular vira folha que sobe de baixo. */
dialog.ax-modal{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:var(--ax-raio-xl);overflow:hidden;
color:var(--ax-texto);background:var(--ax-luz),var(--ax-flutuante);box-shadow:var(--ax-relevo),var(--ax-sombra-flutuante)}
dialog.ax-modal[open]{display:flex;flex-direction:column;animation:ax5-janela var(--ax-dur-3) var(--ax-curva)}
dialog.ax-modal::backdrop{background:var(--ax-veu);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.ax-modal[open]::backdrop{animation:ax5-esmaece var(--ax-dur-2) ease-out}
dialog.ax-modal.largo{width:min(980px,calc(100vw - 48px))}
.ax-modal>header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ax-esp-3);padding:var(--ax-esp-6) var(--ax-esp-6) var(--ax-esp-3)}
.ax-modal>header h2{margin:0;font:650 var(--ax-t-subtitulo)/1.25 var(--ax-fonte);letter-spacing:-.018em}
.ax-modal>header .ax-sub{margin-top:4px}
.ax-modal-fechar{flex:none;width:34px;height:34px;margin:-4px -6px 0 0;border:0;border-radius:var(--ax-raio-m);background:none;color:var(--ax-texto-mudo);cursor:pointer;display:grid;place-items:center;transition:background var(--ax-dur-1),color var(--ax-dur-1)}
.ax-modal-fechar:focus-visible{outline:2px solid var(--ax-acento);outline-offset:1px}
.ax-modal-fechar:hover{background:var(--ax-superficie-3);color:var(--ax-texto)}
.ax-modal-fechar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ax-modal-corpo{flex:1;min-height:0;overflow:auto;padding:var(--ax-esp-2) var(--ax-esp-6) var(--ax-esp-4);overscroll-behavior:contain}
.ax-modal>footer{display:flex;justify-content:flex-end;gap:var(--ax-esp-2);padding:var(--ax-esp-4) var(--ax-esp-6) var(--ax-esp-5);
background:color-mix(in srgb,var(--ax-superficie-2) 70%,transparent);box-shadow:inset 0 1px 0 var(--ax-borda)}
@media screen and (max-width:560px){
dialog.ax-modal,dialog.ax-modal.largo{width:100%;max-width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:92dvh}
dialog.ax-modal[open]{animation:ax5-folha 280ms var(--ax-curva) both}
.ax-modal>header{padding:22px 18px 10px}
.ax-modal>header::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--ax-borda-forte)}
.ax-modal-corpo{padding:6px 18px 14px}
.ax-modal>footer{padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px))}
.ax-modal>footer .ax-btn{flex:1}
}
/* ---------- esqueleto de carregamento ---------- */
.ax-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}
.ax-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--ax-esqueleto-brilho),transparent);animation:ax5-brilho 1.3s ease-in-out infinite}
.ax-skel.linha{height:12px;margin:8px 0}
.ax-skel.linha.curta{width:40%}
.ax-skel.titulo{height:26px;width:min(240px,70%);border-radius:var(--ax-raio-m)}
.ax-skel.numero{height:30px;width:min(150px,60%);border-radius:var(--ax-raio-m)}
.ax-skel.bloco{height:120px;border-radius:var(--ax-raio-l)}
.ax-skel.circulo{width:36px;height:36px;border-radius:50%}
.ax-skel.cartao{height:108px;border-radius:var(--ax-raio-l)}
/* ---------- estado vazio ---------- */
.ax-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:36px 24px;border-radius:var(--ax-raio-l);
color:var(--ax-texto-mudo);background:var(--ax-superficie-2);box-shadow:inset 0 0 0 1px var(--ax-borda)}
.ax-vazio b{color:var(--ax-texto);font:650 15px/1.35 var(--ax-fonte);letter-spacing:-.01em}
.ax-vazio .ax-btn{margin-top:12px}
/* ---------- movimento ---------- */
@keyframes ax5-gira{to{transform:rotate(360deg)}}
@keyframes ax5-brilho{to{transform:translateX(100%)}}
@keyframes ax5-toast{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ax5-toast-sai{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes ax5-janela{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ax5-folha{from{transform:translateY(100%)}to{transform:none}}
@keyframes ax5-esmaece{from{opacity:0}to{opacity:1}}
@keyframes ax5-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ax-entra{animation:ax5-entra 260ms var(--ax-curva) both}
/* ================= 4. ponte do Finanças =================
Peças antigas do web-pessoal que têm par no Nexus. Os seletores só existem no Finanças. */
/* aviso: mesmo desenho do toast do Nexus (bolinha de cor, fio de luz, vermelho escuro no erro) */
.toast-p{display:flex;align-items:center;gap:10px;background:#16173A;font-family:var(--ax-fonte);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.07),0 18px 44px rgba(10,10,40,.34)}
.toast-p::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-p.erro{background:#3A1418;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(242,139,125,.35),0 18px 44px rgba(10,10,40,.34)}
.toast-p.erro::before{background:#F28B7D;box-shadow:0 0 0 4px rgba(242,139,125,.22)}
/* cartão: o mesmo fio de luz no alto que o Nexus usa (só acrescenta a primeira camada de sombra) */
.app .card{box-shadow:var(--ax-relevo),var(--sombra),0 0 0 1px var(--linha)}
/* folha: véu e desfoque iguais aos da janela do Nexus */
dialog#folha::backdrop{background:var(--ax-veu);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){
.ax-btn,.ax-cartao.interativo,.ax-entrada{transition:none}
.ax-skel::after,.ax-btn[aria-busy="true"]::after{animation:none}
.ax-toast,.ax-toast.saindo,dialog.ax-modal[open],dialog.ax-modal[open]::backdrop,.ax-entra{animation:none}
}
@media print{
.ax-cartao,.ax-cartao.marca{box-shadow:none;border:1px solid #ddd;background:#fff;color:#000}
.ax-toasts,.ax-skel{display:none}
}