/* Slate Arctic — L3 materiais.
   ============================================================
   LEI ÚNICA DO SISTEMA — CLAY
   Existe UM material. Toda superfície é a mesma massa Slate inflada:
   volume macio, canto generoso, lábio de luz interno em cima à esquerda e
   sombra difusa embaixo à direita. Não há alternativa plana, vítrea ou 3D —
   elas foram removidas para que nenhuma tela possa escolher outro material.

   TRÊS DEGRAUS (tokens --e0/--e1/--e2, em tokens/elevation.css)
     e0 base        — o plano da página. Sem sombra.
     e1 cartão      — card, botão, chip, painel, sidebar, topbar.
     e2 sobreposição— modal, dropdown, drawer, toast, tooltip.
   Estados intrínsecos: sunken (campo, trilha, item ativo) e press (toque).

   RAIO       cartão 24px · controle 16px · chip 10px · pílula full.
              O raio pertence à CLASSE do elemento, nunca ao seu tamanho: botão
              sm, md e lg têm o mesmo canto de controle. Dois tamanhos lado a
              lado têm que ler como a mesma família.
   EMBOSS     é da MARCA, nunca da interface. Nenhum texto de UI tem relevo.
   ACENTO     livre em qualquer elemento interativo (decisão do brand owner).
   MOVIMENTO  expressivo: entrada escalonada, press que afunda de verdade.
   Nunca escrever array de sombra à mão num componente: usar estas classes. */

/* ---------- superfícies ---------- */
.neu-raised{background:var(--clay-surface);box-shadow:var(--e1);border-radius:var(--clay-radius)}
.neu-pressed{background:var(--clay-surface);box-shadow:var(--e-sunken);border-radius:var(--clay-radius-sm)}
.neu-inset{background:var(--clay-surface);box-shadow:var(--e-sunken);border-radius:var(--clay-radius-sm)}

/* ---------- embossed — EXCLUSIVO DA MARCA ----------
   Não aplicar em título, rótulo, número ou qualquer texto de interface. */
.emboss-basic,.emboss-subtle{text-shadow:var(--emboss-basic)}
.emboss-standard{text-shadow:var(--emboss-standard)}
.emboss-premium{text-shadow:var(--emboss-premium)}
.emboss-ultra{text-shadow:var(--emboss-ultra)}

/* ---------- botão — UM ÚNICO CAMINHO ----------
   `.neu-btn` + uma intenção + um tamanho. Não existe `.clay-btn` nem qualquer
   segundo botão: o material já é clay em todo o sistema. */
.neu-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-min);padding:var(--space-3) var(--space-6);border:none;border-radius:var(--clay-radius-sm);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-black);cursor:pointer;white-space:nowrap;transition:box-shadow var(--duration-press) var(--ease-press),transform var(--duration-press) var(--ease-press),background-color var(--duration-fast) linear}
.neu-btn--primary{background:var(--primary-solid);color:var(--primary-foreground);box-shadow:var(--e1-ctrl)}
.neu-btn--primary:hover{background:var(--primary-solid-hover);transform:translateY(-2px);box-shadow:var(--e1-ctrl-hover)}
.neu-btn--primary:active{transform:translateY(2px) scale(.985);box-shadow:var(--e-press-ctrl)}
.neu-btn--secondary{background:var(--clay-surface);color:var(--foreground);box-shadow:var(--e1-ctrl-surface)}
.neu-btn--secondary:hover{transform:translateY(-2px);box-shadow:var(--e1-ctrl-hover);color:var(--primary)}
.neu-btn--secondary:active{transform:translateY(2px) scale(.985);box-shadow:var(--e-press-ctrl)}
.neu-btn--ghost{background:var(--clay-surface);color:var(--primary-text);box-shadow:var(--e-sunken-sm)}
.neu-btn--ghost:hover{color:var(--foreground)}
.neu-btn--ghost:active{box-shadow:var(--e-sunken)}
.neu-btn--danger{background:var(--danger-solid);color:#fff;box-shadow:var(--e1-ctrl)}
.neu-btn--danger:hover{background:var(--danger-solid-hover);transform:translateY(-2px);box-shadow:var(--e1-ctrl-hover)}
.neu-btn--danger:active{transform:translateY(2px) scale(.985);box-shadow:var(--e-press-ctrl)}
.neu-btn--sm{min-height:38px;padding:8px 16px;font-size:var(--text-xs)}
.neu-btn--lg{min-height:var(--control-h-lg);padding:14px 28px;font-size:var(--text-base)}
.neu-btn--block{width:100%}
/* DESABILITADO: estado próprio, não uma opacidade sobre o estilo ativo.
   Reduzir a opacidade de um botão de acento produz um azul intermediário que
   lê como OUTRA variante, não como inerte. Aqui o botão perde o acento, perde
   o volume e afunda: nenhuma dúvida sobre o que ele é. */
/* INERTE — desabilitado não é uma variante mais fraca, é ausência de vida.
   Baixar a opacidade do ativo produz um tom intermediário que lê como OUTRA
   variante. E recuar para o clay afundado colide com o ghost, que já mora lá.
   Então o inerte usa o que nenhuma variante viva usa: ZERO elevação — superfície
   chapada, sem lance de luz nem sombra — e o rótulo um degrau real abaixo. */
.neu-btn:focus-visible{outline:none;box-shadow:var(--e1),var(--focus-ring)}
.neu-btn[disabled],.neu-btn[aria-disabled="true"]{background:var(--surface-disabled);color:var(--foreground-disabled);box-shadow:none;transform:none;pointer-events:none}
.neu-btn[disabled] *,.neu-btn[aria-disabled="true"] *{color:inherit;-webkit-text-fill-color:currentColor;background:none}
/* CARREGANDO ≠ DESABILITADO. Desabilitado é ausência de vida; carregar é uma
   ação EM CURSO — o botão mantém acento e volume, só troca o rótulo pelo spinner
   e recusa um segundo clique. Um sinal de progresso não pode parecer morto. */
.neu-btn--loading,.neu-btn--loading[disabled],.neu-btn--loading[aria-disabled="true"]{pointer-events:none;transform:none;box-shadow:var(--e1-ctrl)}
.neu-btn--loading.neu-btn--primary{background:var(--primary-solid);color:var(--primary-foreground)}
.neu-btn--loading.neu-btn--secondary{background:var(--clay-surface);color:var(--foreground)}
.neu-btn--loading.neu-btn--danger{background:var(--danger-solid);color:#fff}
.neu-btn--loading.neu-btn--ghost{background:var(--clay-surface);color:var(--primary-text);box-shadow:var(--e-sunken-sm)}
.neu-btn--loading.neu-btn--brand{background:var(--fontan-gradient-control);color:#fff}
/* Botão de marca (revisto em 04-09-2026, decisão registrada em DESIGN.md §7): veste a versão de CONTROLE
   da família da esfera — claro em cima, fundo embaixo, aro de 1px em crosslight — igual à
   referência "Compliance". Rótulo BRANCO: AA medido na zona do glifo (4,94:1 a 35 % da
   altura, 5,37:1 no meio); o rótulo slate da referência mediria 3,30:1 e não entra.
   Antes (até 04-09-2026): --fontan-gradient-fill radial com --e1-ctrl. */
.neu-btn--brand{background:var(--fontan-gradient-control);color:#fff;box-shadow:var(--e1-brand)}
.neu-btn--brand:hover{transform:translateY(-2px);box-shadow:var(--e1-brand-hover)}
.neu-btn--brand:focus-visible{outline:none;box-shadow:var(--e1-brand),var(--focus-ring-brand)} /* 9.5 (04-09-2026): anel proprio sobre o gradiente */
.neu-btn--brand:active{transform:translateY(3px) scale(.98);box-shadow:var(--e-press-ctrl)}
.neu-btn__spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:arc-spin .7s linear infinite}
@keyframes arc-spin{to{transform:rotate(360deg)}}
.arc-spin{animation:arc-spin 1s linear infinite}

/* botão de ícone circular */
.neu-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);border:none;border-radius:50%;background:var(--clay-surface);color:var(--foreground-secondary);box-shadow:var(--e1-ctrl-surface);cursor:pointer;position:relative;transition:box-shadow var(--duration-press) var(--ease-press),transform var(--duration-press) var(--ease-press),color var(--duration-fast) linear}
.neu-iconbtn:hover{transform:translateY(-2px);box-shadow:var(--e1-ctrl-hover);color:var(--primary)}
.neu-iconbtn:active{transform:translateY(2px) scale(.985);box-shadow:var(--e-press-ctrl)}
/* A-13 (04-09-2026): branco sobre --danger dava 3,43:1 no escuro; --danger-solid e o par cheio com rotulo branco (lei 5), fonte --text-2xs */
.neu-iconbtn__dot{position:absolute;top:2px;left:22px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-pill);background:var(--danger-solid);color:var(--primary-foreground);font-size:var(--text-2xs);font-weight:var(--weight-black);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--clay-surface)}

/* ---------- caixa de ícone ---------- */
.neu-iconbox{display:inline-flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--clay-tint,var(--primary)) 18%,var(--clay-surface));box-shadow:var(--e1-ctrl-surface);border-radius:var(--clay-radius-xs);transition:box-shadow var(--duration-press) var(--ease-press)}
.neu-iconbox--pressed{box-shadow:var(--e-sunken-sm)}
.neu-iconbox--flat{background:var(--clay-surface);box-shadow:var(--e-sunken-sm)}
/* Ícone de domínio em Argila Ártica (04-09-2026): duas imagens, uma por tema; o tema da raiz decide qual
   aparece, sem remontar componente (DS-5). Dentro do .neu-iconbox o glifo mede a metade da caixa. */
.arc-domain-icon{display:inline-block;position:relative;flex:none;line-height:0}
.arc-domain-icon__img{display:block;width:100%;height:100%;object-fit:contain}
.arc-domain-icon__img--light{display:none}
.light .arc-domain-icon__img--light,[data-theme="light"] .arc-domain-icon__img--light{display:block}
.light .arc-domain-icon__img--dark,[data-theme="light"] .arc-domain-icon__img--dark{display:none}

/* ---------- cards ---------- */
.arc-card{background:var(--clay-surface);border-radius:var(--clay-radius);box-shadow:var(--e1);transition:box-shadow var(--duration-normal) var(--ease-release),transform var(--duration-normal) var(--ease-release)}
.arc-card--interactive{cursor:pointer}
.arc-card--interactive:hover{transform:translateY(-3px);box-shadow:var(--e1-hover)}
.arc-card--interactive:active{transform:translateY(1px) scale(.995);box-shadow:var(--e-press)}
.arc-card--pressed{box-shadow:var(--e-sunken)}
.arc-card__head{display:flex;align-items:center;gap:12px;padding:18px 20px 12px}
.arc-card__title{font:var(--type-h3);color:var(--foreground);margin:0}
.arc-card__body{padding:12px 20px 20px}

/* ---------- CLAY · aliases semânticos ---------- */
.clay{background:var(--clay-surface);border-radius:var(--clay-radius);box-shadow:var(--e1);transition:box-shadow var(--duration-normal) var(--ease-release),transform var(--duration-normal) var(--ease-release)}
.clay--sm{border-radius:var(--clay-radius-sm)}
.clay--overlay{box-shadow:var(--e2)}
.clay--sunken{box-shadow:var(--e-sunken)}
.clay--interactive{cursor:pointer}
.clay--interactive:hover{transform:translateY(-3px);box-shadow:var(--e1-hover)}
.clay--interactive:active{transform:translateY(1px) scale(.995);box-shadow:var(--e-press)}
.clay--tinted{background:color-mix(in srgb,var(--clay-tint,var(--primary)) 16%,var(--clay-surface));--muted-foreground:var(--foreground-secondary)} /* 3.6 (04-09-2026): sobre superficie tingida o texto silenciado sobe ao secundario, para manter 4,5:1 */
.clay-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--clay-radius-xs);background:color-mix(in srgb,var(--clay-tint,var(--primary)) 18%,var(--clay-surface));box-shadow:var(--e1-ctrl-surface)}
.clay-pill{display:inline-flex;gap:var(--space-1);padding:6px;border-radius:var(--radius-pill);background:var(--clay-surface);box-shadow:var(--e-sunken-sm)}
.clay-pill__item{border:none;background:transparent;color:var(--muted-foreground);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-bold);padding:0 18px;height:38px;border-radius:var(--radius-pill);cursor:pointer;transition:var(--transition-surface)}
.clay-pill__item--on{background:var(--primary-solid);color:var(--primary-foreground);box-shadow:var(--e1-ctrl)}
.clay-field{display:flex;align-items:center;gap:var(--space-2);min-height:52px;padding:0 18px;border-radius:var(--clay-radius-sm);background:var(--clay-surface);box-shadow:var(--e-sunken);color:var(--muted-foreground)}
.clay-field input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;font-size:var(--text-base);color:var(--foreground)}
.clay-field input::placeholder{color:var(--muted-foreground)}
.clay-orb{border-radius:50%;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,#fff 30%,var(--clay-tint,var(--primary))),var(--clay-tint,var(--primary)) 62%,color-mix(in srgb,var(--clay-tint,var(--primary)) 70%,#0b1120));box-shadow:var(--e2)}

/* ---------- campos ---------- */
.arc-field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}
.arc-field__label{font:var(--type-label);color:var(--foreground-secondary)}
.arc-field__hint{font-size:var(--text-xs);color:var(--muted-foreground)}
.arc-field__error{font-size:var(--text-xs);color:var(--danger-text);font-weight:var(--weight-semibold)}
.neu-input{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch-min);padding:0 16px;--_pad-y:var(--field-pad-y);background:var(--clay-surface);border:1.5px solid transparent;border-radius:var(--clay-radius-sm);box-shadow:var(--e-sunken);color:var(--muted-foreground);transition:box-shadow var(--duration-fast) var(--ease-release)}
.neu-input:focus-within{box-shadow:var(--e-sunken),var(--focus-ring)}
.neu-input input,.neu-input textarea{flex:1;min-width:0;width:100%;background:none;border:none;outline:none;color:var(--foreground);font:inherit;font-size:var(--text-base);padding:var(--field-pad-y) 0}
.neu-input textarea{resize:vertical;min-height:84px}
.neu-input input::placeholder,.neu-input textarea::placeholder{color:var(--muted-foreground)}
.neu-input__icon{color:var(--muted-foreground);flex:none;display:flex}
.neu-input--sm{min-height:38px;padding:0 13px}
.neu-input--sm input{padding:8px 0;font-size:var(--text-sm)}
.neu-input--error{border-color:var(--danger)}
.neu-input--error .neu-input__icon{color:var(--danger-text)}
.neu-input--success{border-color:var(--success)}
.neu-input--disabled{background:var(--surface-disabled);box-shadow:none;color:var(--foreground-disabled);pointer-events:none}
.neu-input--disabled input,.neu-input--disabled textarea{color:var(--foreground-disabled)}
.neu-input__kbd{font-size:10px;font-weight:var(--weight-bold);color:var(--muted-foreground);background:var(--clay-surface);box-shadow:var(--e1-ctrl-surface);border-radius:var(--radius-sm);padding:3px 7px;flex:none}

/* select custom — nunca <select> nativo */
.arc-select{position:relative}
.arc-select__panel{position:absolute;z-index:40;top:calc(100% + 8px);left:0;right:0;padding:7px;background:var(--clay-surface);border-radius:var(--clay-radius-sm);box-shadow:var(--e2);animation:arc-pop var(--duration-fast) var(--ease-release);max-height:260px;overflow-y:auto}
.arc-select__opt{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:40px;padding:0 12px;border:none;background:transparent;border-radius:var(--clay-radius-xs);color:var(--foreground-secondary);font:inherit;font-size:var(--text-sm);cursor:pointer;text-align:left;transition:var(--transition-surface)}
.arc-select__opt:hover{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--foreground)}
.arc-select__opt--on{background:color-mix(in srgb,var(--primary) 20%,transparent);color:var(--foreground);font-weight:var(--weight-semibold)}
.arc-select__check{margin-left:auto;color:var(--primary)}

/* marcação */
.arc-check{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch-min);cursor:pointer;user-select:none;font-size:var(--text-base);color:var(--foreground)}
.arc-check__box{width:22px;height:22px;flex:none;border-radius:7px;background:var(--clay-surface);box-shadow:var(--e-sunken-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--primary-foreground);transition:box-shadow var(--duration-press) var(--ease-press),background-color var(--duration-fast) linear}
.arc-check--on .arc-check__box{background:var(--primary-solid);box-shadow:var(--e1-ctrl)}
.arc-check__box--radio{border-radius:50%}
.arc-check__dot{width:8px;height:8px;border-radius:50%;background:var(--primary-foreground)}
.arc-check--disabled{color:var(--foreground-disabled);pointer-events:none}
.arc-check--disabled .arc-check__box{background:var(--surface-disabled);box-shadow:none;color:var(--foreground-disabled)}
.arc-check--disabled .arc-check__dot{background:var(--foreground-disabled)}

.arc-switch{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch-min);cursor:pointer;user-select:none;font-size:var(--text-base);color:var(--foreground)}
.arc-switch__track{width:46px;height:26px;flex:none;border-radius:var(--radius-pill);background:var(--clay-surface);box-shadow:var(--e-sunken-sm);padding:3px;transition:background-color var(--duration-fast) linear,box-shadow var(--duration-press) var(--ease-press)}
.arc-switch__thumb{width:20px;height:20px;border-radius:50%;background:var(--muted-foreground);box-shadow:var(--e1-ctrl-surface);transition:transform var(--duration-normal) var(--ease-release),background-color var(--duration-fast) linear}
.arc-switch--on .arc-switch__track{background:var(--primary-solid)}
.arc-switch--on .arc-switch__thumb{transform:translateX(20px);background:#fff}
.arc-switch--disabled{color:var(--foreground-disabled);pointer-events:none}
.arc-switch--disabled .arc-switch__track{background:var(--surface-disabled);box-shadow:none}
.arc-switch--disabled .arc-switch__thumb{background:var(--foreground-disabled);box-shadow:none}

/* ---------- pílulas e abas ---------- */
.toggle-pills{display:inline-flex;gap:4px;padding:var(--space-1);background:var(--clay-surface);border-radius:var(--radius-pill);box-shadow:var(--e-sunken-sm)}
.toggle-pill{border:none;background:transparent;color:var(--muted-foreground);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);padding:0 18px;height:36px;border-radius:var(--radius-pill);cursor:pointer;transition:var(--transition-surface)}
.toggle-pill:hover{color:var(--foreground)}
.toggle-pill--on{background:var(--primary-solid);color:var(--primary-foreground);box-shadow:var(--e1-ctrl)}
.arc-tabs{display:flex;gap:var(--space-2);padding:var(--space-1);background:var(--clay-surface);border-radius:var(--radius-pill);box-shadow:var(--e-sunken-sm);width:fit-content;max-width:100%;overflow-x:auto}
.arc-tab{position:relative;border:none;background:transparent;padding:0 18px;height:38px;border-radius:var(--radius-pill);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--muted-foreground);cursor:pointer;white-space:nowrap;transition:var(--transition-surface)}
.arc-tab:hover{color:var(--foreground)}
.arc-tab--on{background:var(--primary-solid);color:var(--primary-foreground);box-shadow:var(--e1-ctrl)}
.arc-tab__count{margin-left:7px;font-size:var(--text-2xs);font-variant-numeric:tabular-nums;opacity:.72}
.arc-tab[disabled]{color:var(--foreground-disabled);box-shadow:none;pointer-events:none}

/* ---------- badges e tags ---------- */
.arc-badge{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-size:var(--text-2xs);font-weight:var(--weight-bold);white-space:nowrap}
.arc-badge__dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.arc-tag{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--clay-radius-xs);padding:6px 12px;font-size:var(--text-xs);color:var(--foreground-secondary);background:var(--clay-surface);box-shadow:var(--e-sunken-sm)}
.arc-delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--text-2xs);font-weight:var(--weight-bold);padding:4px 10px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums}
.arc-delta--up{color:var(--success-text);background:var(--success-bg)}
.arc-delta--down{color:var(--danger-text);background:var(--danger-bg)}
.arc-delta--flat{color:var(--muted-foreground);background:var(--card-muted)}

/* ---------- navegação ---------- */
.arc-sidebar{width:var(--sidebar-w);flex:none;display:flex;flex-direction:column;gap:18px;padding:18px 14px;background:var(--clay-surface);box-shadow:var(--e1);border-radius:0 var(--clay-radius) var(--clay-radius) 0;overflow-y:auto;transition:width var(--duration-theme) var(--ease-release)}
.arc-sidebar--collapsed{width:var(--sidebar-w-collapsed);padding:18px 10px;align-items:center}
.arc-sidebar__group{font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--muted-foreground);padding:0 12px;margin-bottom:8px}
.arc-navitem{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--touch-min);padding:0 14px;border:none;background:transparent;border-radius:var(--clay-radius-sm);color:var(--foreground-secondary);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;text-align:left;transition:var(--transition-surface)}
.arc-navitem:hover{color:var(--foreground);background:color-mix(in srgb,var(--primary) 9%,transparent)}
.arc-navitem--on{background:var(--clay-surface);box-shadow:var(--e-sunken-sm);color:var(--primary-text)} /* A-12 (04-09-2026): --primary dava 4,43:1 no recesso; --primary-text e o acento de TEXTO do tema */
.arc-sidebar--collapsed .arc-navitem{justify-content:center;padding:0;width:var(--touch-min);min-height:var(--touch-min)} /* A-22 (04-09-2026): 32x44 -> 44x44 */
.arc-navitem__badge{margin-left:auto;font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--muted-foreground);font-variant-numeric:tabular-nums}

.arc-topbar{display:flex;align-items:center;gap:var(--space-3);height:var(--topbar-h);flex:none;padding:0 20px;background:var(--clay-surface);box-shadow:var(--e1);border-radius:var(--clay-radius);margin:12px 12px 0;position:relative}
/* A-29 (04-09-2026): abaixo de 600 px as acoes recolhem num alvo unico de 44 px e abrem um grupo clay; a busca cede */
.arc-topbar__menu{position:absolute;right:12px;top:calc(100% + var(--space-2));display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3);z-index:60;max-width:calc(100% - 24px)}
@media (max-width:600px){.arc-topbar{padding:0 12px;gap:var(--space-2)}}
/* A-31 (04-09-2026): titulo de pagina e display do login quebram por palavra a 390 px a 130 % (353 em 330; 427 em 344) */
.arc-page-header h1,.acesso__titulo{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:600px){.arc-page-header h1{font-size:var(--text-3xl)}} /* A-31: abaixo de 600 px o titulo desce um degrau (33 -> 28 px) para caber em duas linhas a 130 % */
.arc-crumb{display:flex;align-items:center;gap:8px;color:var(--muted-foreground);font-size:var(--text-xs)}
.arc-crumb b{color:var(--foreground);font-weight:var(--weight-bold)}
.arc-crumb a,.arc-crumb button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch-min);min-height:var(--touch-min);padding:0 var(--space-2);color:inherit} /* A-21 (04-09-2026): link da trilha 32x44 -> 44x44 (lei 19) */

/* ---------- tabela ----------
   A tabela é o único lugar onde clay recua: linhas não são placas empilhadas.
   O volume fica no card que a contém; dentro dele, separação por espaço e
   por um divisor de baixíssimo contraste. Números sempre em mono tabular. */
.arc-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
[data-densidade="compacta"] .arc-table{font-size:var(--text-sm-compacta)} /* 9.10: 12,8 px so em tabela compacta */
[data-densidade="compacta"] .neu-input{min-height:var(--row-h)} /* 9.10: campo acompanha a linha compacta (36 px) */
@media (max-width:768px){.arc-col--secundaria{display:none}} /* A-44 (04-09-2026): coluna secundaria (DataTable secundaria:true) some ate 768 px, como as demais listagens */
.arc-table th{text-align:left;font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--muted-foreground);padding:var(--cell-pad-y) 14px;white-space:nowrap}
.arc-table th.arc-th--sortable{cursor:pointer;user-select:none}
.arc-table th.arc-th--sortable:hover{color:var(--foreground-secondary)}
.arc-table th .arc-th__inner{display:inline-flex;align-items:center;gap:var(--space-2)}
.arc-table td{padding:var(--cell-pad-y) 14px;border-top:1px solid var(--border);color:var(--foreground-secondary);vertical-align:middle}
.arc-table tbody tr{transition:background-color var(--duration-fast) linear}
.arc-table tbody tr:hover td{background:color-mix(in srgb,var(--primary) 7%,transparent)}
.arc-table td.arc-td--num{font-variant-numeric:tabular-nums;color:var(--foreground)}
.arc-pag{display:inline-flex;gap:var(--space-2)} /* A-23 (04-09-2026): botoes 38 -> 44 e legenda min-height 44 (lei 19) */
.arc-pag button{min-width:var(--touch-min);height:var(--touch-min);padding:0 10px;border:none;border-radius:var(--clay-radius-sm);background:var(--clay-surface);box-shadow:var(--e1-ctrl-surface);color:var(--foreground-secondary);font:inherit;font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;transition:box-shadow var(--duration-press) var(--ease-press),transform var(--duration-press) var(--ease-press)}
.arc-pag button:hover{transform:translateY(-2px);box-shadow:var(--e1-ctrl-hover);color:var(--primary)}
.arc-pag button:active{transform:translateY(2px);box-shadow:var(--e-press-ctrl)}
.arc-pag button.arc-pag--on{background:var(--primary-solid);color:var(--primary-foreground)}
.arc-pag button[disabled]{background:var(--surface-disabled);color:var(--foreground-disabled);box-shadow:none;pointer-events:none}

/* ---------- sobreposições (e2) ---------- */
.arc-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:60;animation:arc-fade var(--duration-fast) var(--ease-release)}
.arc-modal{width:100%;background:var(--clay-surface);border-radius:var(--clay-radius);box-shadow:var(--e2);animation:arc-pop var(--duration-normal) var(--ease-release)}
.arc-modal__head{display:flex;align-items:flex-start;gap:var(--space-3);padding:22px 24px 12px}
.arc-modal__title{font:var(--type-h3);margin:0;color:var(--foreground)}
.arc-modal__desc{margin:6px 0 0;font-size:var(--text-sm);color:var(--muted-foreground);line-height:var(--leading-normal)}
.arc-modal__body{padding:12px 24px}
.arc-modal__foot{display:flex;justify-content:flex-end;gap:var(--space-3);padding:16px 24px 22px}
.arc-drawer{position:fixed;top:0;bottom:0;width:380px;max-width:92vw;background:var(--clay-surface);box-shadow:var(--e2);z-index:61;padding:24px;overflow-y:auto;animation:arc-slide-left var(--duration-normal) var(--ease-release)}
.arc-drawer--right{right:0;border-radius:var(--clay-radius) 0 0 var(--clay-radius)}
.arc-drawer--left{left:0;border-radius:0 var(--clay-radius) var(--clay-radius) 0}
.arc-tooltip{position:absolute;z-index:70;background:var(--clay-surface);color:var(--foreground);padding:9px 13px;border-radius:var(--clay-radius-xs);font-size:var(--text-2xs);white-space:nowrap;box-shadow:var(--e2);pointer-events:none}
.arc-toast{display:flex;gap:12px;align-items:flex-start;border-radius:var(--clay-radius-sm);padding:14px 16px;font-size:var(--text-sm);max-width:420px;background:var(--clay-surface);box-shadow:var(--e2);animation:arc-slide-left var(--duration-normal) var(--ease-release)}
.arc-toast b{color:var(--foreground);display:block;font-weight:var(--weight-bold)}
.arc-toast span{color:var(--muted-foreground)}

/* ---------- alerta em linha ----------
   Sem borda-acento à esquerda: o status é a própria cor do volume. */
.arc-alert{display:flex;gap:12px;align-items:flex-start;border-radius:var(--clay-radius-sm);padding:14px 16px;font-size:var(--text-sm);line-height:var(--leading-normal)}
.arc-alert--info{background:var(--info-bg);color:var(--info-text)}
.arc-alert--success{background:var(--success-bg);color:var(--success-text)}
.arc-alert--warning{background:var(--warning-bg);color:var(--warning-text)}
.arc-alert--danger{background:var(--danger-bg);color:var(--danger-text)}
/* TITULO do alerta: classe explicita, nunca o seletor de elemento. `.arc-alert b`
   transformava QUALQUER <b> do corpo em linha propria, e enfase inline dentro da
   frase quebrava o paragrafo (medido em 2026-08-28; o consumo real precisou trocar
   <b> por <strong> para escapar). `.arc-alert > b` NAO serve: no AlertaInline.jsx e
   nos 6 sitios do Worker o <b> do titulo vive dentro de um <div> de corpo, logo nao
   e filho direto — o seletor de filho quebraria todos eles. */
.arc-alert__titulo{display:block;margin-bottom:2px}

/* ---------- estados ---------- */
.arc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:52px 24px}
.arc-empty__title{font:var(--type-h3);color:var(--foreground)}
.arc-empty__desc{font-size:var(--text-sm);color:var(--muted-foreground);max-width:42ch;line-height:var(--leading-normal)}
.arc-skeleton{background:linear-gradient(90deg,var(--skeleton) 25%,var(--skeleton-sheen) 37%,var(--skeleton) 63%);background-size:400% 100%;animation:arc-shimmer 1.5s ease infinite;border-radius:var(--clay-radius-xs);display:block}

/* ---------- passo a passo ---------- */
.arc-stepper{display:flex;align-items:center}
.arc-step{display:flex;align-items:center;gap:var(--space-2);color:var(--muted-foreground);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.arc-step__n{width:30px;height:30px;flex:none;border-radius:50%;background:var(--clay-surface);box-shadow:var(--e1-ctrl-surface);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.arc-step--done .arc-step__n{background:var(--success);color:#06210f}
.arc-step--current{color:var(--foreground)}
.arc-step--current .arc-step__n{background:var(--primary-solid);color:var(--primary-foreground)}
.arc-step__bar{flex:1;height:3px;border-radius:var(--radius-pill);background:var(--clay-surface);box-shadow:var(--e-sunken-sm);margin:0 8px;min-width:24px}

/* ---------- dataviz ---------- */
.arc-legend{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.arc-legend__item{display:inline-flex;align-items:center;min-height:var(--touch-min);gap:7px;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--muted-foreground);background:none;border:none;cursor:pointer;padding:0;transition:color var(--duration-fast) var(--ease-hover-out)}
.arc-legend__item:hover{color:var(--foreground)}
.arc-legend__item--off{opacity:.4}
.arc-legend__swatch{width:11px;height:11px;border-radius:4px;flex:none}
.arc-axis{font-size:10px;font-weight:var(--weight-semibold);fill:var(--muted-foreground);color:var(--muted-foreground)}
.arc-draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:arc-draw 1.1s ease forwards}
.arc-rise{transform-box:fill-box;transform-origin:bottom;animation:arc-rise .7s cubic-bezier(.2,.8,.2,1) forwards}
@media (prefers-reduced-motion:reduce){.arc-draw,.arc-rise{animation:none;stroke-dashoffset:0}}

/* ---------- grade de indicadores ----------
   Fileiras equilibradas por breakpoint nomeado — nunca um card órfão. */
.arc-kpigrid{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(var(--kpi-cols,4),minmax(0,1fr))}
@media (max-width:1180px){.arc-kpigrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.arc-kpigrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- números ----------
   A marca não tem face mono: o alinhamento vem de tabular-nums na própria sans.
   Valor, código, identificador e eixo usam .num — nunca uma segunda família. */
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* Texto com o gradiente da cruz da marca. O relevo vem de drop-shadow, não de
   text-shadow: com o glifo recortado em transparente, text-shadow pintaria um
   duplo fantasma atrás; drop-shadow acompanha o desenho realmente pintado. */
.brand-cross-text{background-image:linear-gradient(150deg,#F2F6FC 0%,var(--color-arctic-crosslight) 55%,#A9BEDC 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(-1px -1px 0 var(--emboss-hi)) drop-shadow(1px 1px 0 var(--emboss-lo)) drop-shadow(2px 3px 5px var(--emboss-lo-soft))}
.light .brand-cross-text{background-image:linear-gradient(150deg,var(--color-arctic-mediumslate) 0%,var(--color-arctic-textdark) 60%,var(--color-arctic-deepnavy) 100%)}
/* Degradê da cruz com faixa de brilho que atravessa lentamente. A faixa é uma
   parada a mais no MESMO degradê — não uma camada por cima —, então o texto
   nunca perde a cor da marca enquanto o brilho passa. */
.brand-sheen-text{background-image:linear-gradient(100deg,var(--color-arctic-crosslight) 0%,#A9BEDC 28%,#FFFFFF 46%,#F2F6FC 54%,#A9BEDC 72%,var(--color-arctic-crosslight) 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brand-sheen 7s var(--ease-release) infinite}
.light .brand-sheen-text{background-image:linear-gradient(100deg,var(--color-arctic-mediumslate) 0%,var(--color-arctic-textdark) 30%,var(--color-arctic-crosslight) 48%,var(--color-arctic-textdark) 70%,var(--color-arctic-mediumslate) 100%)}
@keyframes brand-sheen{0%{background-position:180% 0}55%,100%{background-position:-80% 0}}
/* Assinatura gravada: degradê escuro da cruz + relevo em CAMADAS. O relevo é
   `filter: drop-shadow`, nunca `text-shadow` — com o texto recortado do
   degradê o preenchimento é transparente, e um text-shadow apareceria POR
   DENTRO das letras. O drop-shadow segue os pixels realmente pintados.
   O PREENCHIMENTO acompanha o tema — claro no escuro, escuro no claro. Quem
   carrega a leitura de "gravado" é a camada de relevo, não a cor: um degradê
   escuro sobre painel escuro fica ilegível (1,2:1) por mais relevo que tenha. */
.brand-engraved-text{background-image:linear-gradient(100deg,#7E95BB 0%,#A8BEDF 26%,#E6EEFA 44%,#BACBE8 56%,#8FA6CA 74%,#7E95BB 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(6,10,20,.92)) drop-shadow(-1px 0 0 rgba(6,10,20,.62)) drop-shadow(0 1px 0 rgba(214,226,244,.30)) drop-shadow(0 2px 1px rgba(214,226,244,.14)) drop-shadow(0 3px 4px rgba(6,10,20,.55));
  animation:brand-sheen 7s var(--ease-release) infinite}
.light .brand-engraved-text{background-image:linear-gradient(100deg,#55658A 0%,#33415F 26%,#1E2942 44%,#2C3A57 56%,#46567A 74%,#55658A 100%);
  filter:drop-shadow(0 -1px 0 rgba(42,54,80,.42)) drop-shadow(-1px 0 0 rgba(42,54,80,.28)) drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 2px 1px rgba(255,255,255,.62)) drop-shadow(0 3px 4px rgba(42,54,80,.24))}
@media (prefers-reduced-motion:reduce){.brand-engraved-text{animation:none;background-position:40% 0}}

/* ---------- órbita da marca ----------
   O corpo gira no plano do próprio anel; a inclinação fica no invólucro, para
   que rotação e perspectiva não briguem pela mesma propriedade. A sensação de
   profundidade vem de opacidade e escala sincronizadas com a posição. */
@keyframes arc-orbit-spin{to{transform:rotate(360deg)}}
@keyframes arc-orbit-yaw{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes arc-orbit-depth{0%{opacity:.18;transform:scale(.55)}25%{opacity:1;transform:scale(1.15)}50%{opacity:.5;transform:scale(.8)}75%{opacity:.16;transform:scale(.5)}100%{opacity:.18;transform:scale(.55)}}
@keyframes arc-radar{0%{opacity:.42;transform:scale(.42)}70%{opacity:0}100%{opacity:0;transform:scale(1.25)}}
@keyframes arc-loader-sweep{from{left:-40%}to{left:104%}}
@keyframes arc-breathe{0%,100%{transform:translateZ(38px) translateY(0) scale(1)}50%{transform:translateZ(38px) translateY(-7px) scale(1.035)}}
@keyframes arc-halo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes arc-ignite{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){
  .brand-orbit *{animation:none!important}
}

/* ---------- marca ----------
   LEI DA FONTE DE LUZ: uma direção ilumina todo o sistema — luz em cima à
   esquerda, sombra embaixo à direita. Emboss é ARESTA, não brilho: 1px de luz,
   1px de sombra e uma difusão curta. Os offsets são IGUAIS nos dois temas; só
   as cores invertem (--emboss-hi / --emboss-lo). Vale só para a marca. */
.fontan-wordmark{font-family:var(--font-display);font-weight:400;letter-spacing:.02em;color:var(--color-arctic-textdark);line-height:1;white-space:nowrap;
  text-shadow:-1px -1px 0 var(--emboss-hi),1px 1px 0 var(--emboss-lo),2px 3px 5px var(--emboss-lo-soft)}
.fontan-tagline{font-family:var(--font-sans);font-weight:var(--weight-bold);color:var(--color-arctic-textdark);text-align:center;
  text-shadow:-1px -1px 0 var(--emboss-hi),1px 1px 0 var(--emboss-lo)}
.fontan-wordmark img,.fontan-symbol{filter:drop-shadow(-1px -1px 0 var(--emboss-hi)) drop-shadow(1px 1px 0 var(--emboss-lo)) drop-shadow(2px 3px 5px var(--emboss-lo-soft))}
.dark .fontan-wordmark,[data-theme="dark"] .fontan-wordmark{color:var(--color-arctic-lightslate)}
.dark .fontan-tagline,[data-theme="dark"] .fontan-tagline{color:var(--color-arctic-crosslight)}
.light .fontan-wordmark{color:var(--color-arctic-textdark)}
.light .fontan-tagline{color:var(--color-arctic-textdark)} /* 3.3 (04-09-2026): igual à v2 do guia (tagline textdark), que o inline já pintava; agora o CSS decide */

/* ---------- movimento expressivo ----------
   Entrada escalonada: filhos diretos sobem em sequência, 60ms de intervalo. */
.page-enter{animation:arc-page-enter var(--duration-page) var(--ease-release)}
.arc-stagger>*{animation:arc-rise-in var(--duration-normal) var(--ease-release) both}
.arc-stagger>*:nth-child(1){animation-delay:0ms}
.arc-stagger>*:nth-child(2){animation-delay:60ms}
.arc-stagger>*:nth-child(3){animation-delay:120ms}
.arc-stagger>*:nth-child(4){animation-delay:180ms}
.arc-stagger>*:nth-child(5){animation-delay:240ms}
.arc-stagger>*:nth-child(6){animation-delay:300ms}
.arc-stagger>*:nth-child(n+7){animation-delay:360ms}
@keyframes arc-rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes arc-orbit{to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes arc-orbit-float{0%,100%{transform:translateZ(34px) translateY(-5px) rotateY(-9deg)}50%{transform:translateZ(46px) translateY(5px) rotateY(9deg)}}
@media (prefers-reduced-motion:reduce){[style*="arc-orbit"]{animation:none!important}}
@media (prefers-reduced-motion:reduce){.arc-stagger>*{animation:none}}

/* Crédito de autoria: texto em branco de token com pulso discreto.
   Anima somente `opacity`, entre 1 e 0,55, sem tocar em layout, cor ou
   transformação. `base.css` zera a duração das animações sob
   `prefers-reduced-motion`; a regra abaixo vai além e desliga a animação por
   inteiro, fixando `opacity:1`, para o texto não assentar num quadro de
   opacidade parcial. */
/* A-43 (04-09-2026): abaixo de 600 px a pilha de toasts (transitorios) ocupa a largura toda no rodape, sem exceder 12 px de margem; aviso persistente de versao entra em fluxo no consumidor */
@media (max-width:600px){.arc-toaststack{left:12px;right:12px!important;bottom:12px!important}}
@keyframes arc-credit-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.arc-credit-pulse{animation:arc-credit-pulse 3.2s ease-in-out infinite;color:var(--primary-foreground)}
.light .arc-credit-pulse{color:var(--foreground)} /* A-27 (decisao de 04-09-2026, registrada em DESIGN.md par. 7): no claro o credito e --foreground; branco dava 1,45:1; substitui a regra de 18-08-2026 */
@media (prefers-reduced-motion:reduce){.arc-credit-pulse{animation:none;opacity:1}}