/* =============================================================================
   kumo.css — redesenho trazido da Zero7 Trading (zero-7-global, origin/main)

   É a porta do design system Kumo (Cloudflare) que a Zero7 Trading fez em
   set–out/2026, sobre o mesmo Bootstrap + jQuery + Blade daqui. Este arquivo NÃO
   é escrito à mão: são as regras do main.css de lá que são novas ou diferentes das
   do main.css daqui, já filtradas para as classes que alguma tela, componente ou
   script deste projeto usa.

   Carrega DEPOIS do main.css (components/header.blade.php): onde os dois falam do
   mesmo seletor, vale o desenho novo. O que só existe aqui — cores por fase,
   card de resultados, onboarding, Conta Real — continua no main.css e no
   conta-real.css, intocado.

   Ajuste específico do zero-7 vai no fim deste arquivo, na seção "Ajustes do
   zero-7", e não no meio das regras trazidas: assim dá para refazer a extração
   quando a Trading evoluir sem perder o que foi adaptado aqui.
   ============================================================================= */


/* Fonte de espera com as métricas da Inter.

/* Fonte de espera com as métricas da Inter.

   A Inter vem do Google Fonts com `display=swap`: até ela chegar, o texto é
   desenhado na fonte do sistema. Helvetica e Arial têm altura-x menor que a
   Inter no MESMO tamanho em px, então o texto nascia visivelmente miúdo e
   "crescia" quando a fonte chegava — era isso que parecia autofill.

   Os ajustes abaixo esticam a fonte de espera até as métricas da Inter, então a
   troca deixa de mexer no tamanho aparente. Números do mapeamento Inter/Arial
   usado pelo otimizador de fontes do Next. */
@font-face {
	font-family: "Inter Fallback";
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22.43%;
	line-gap-override: 0%;
}
@font-face {
    font-family: 'TT Fors Trial';
    src: url('/fonts/TTForsTrial-Medium.woff2') format('woff2'),
        url('/fonts/TTForsTrial-Medium.woff') format('woff'),
        url('/fonts/TTForsTrial-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "relationship of me'lodrame";
    src: url('/fonts/relationshipofmelodrame-regul.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
	--background: #FBFBFB;
	--foreground: #08080a;
	--card: #fefefe;
	/* Tom da zebra da .tabela. Próprio, e não o --card: o card clareou para
	   #fefefe e, contra o #fff das linhas ímpares, a zebra sumia. */
	--tabela-zebra: #f4f4f4;
	/* Grade e borda dos eixos dos gráficos Chart.js (lida pelo JS do gráfico de
	   performance). No claro é o próprio padrão do Chart.js, preto a 10%. */
	--grafico-grade: rgba(0, 0, 0, .1);

	/* Campo de formulário: os tokens do Input do Kumo, convertidos para hex. O
	   campo tem cores próprias em vez de emprestar --tertiary/--input/--ring:
	   era essa troca de papel que fazia claro e escuro não baterem com o
	   original (fundo #fafafa no lugar do branco, anel sólido no lugar do preto
	   a 10%). */
	--campo-fundo: #ffffff;
	--campo-anel: rgba(10, 10, 10, .1);
	--campo-foco: rgba(11, 11, 11, .5);
	--campo-texto: #171717;
	--campo-placeholder: #a1a1a1;
	--campo-erro: #fb2c36;
	--campo-erro-foco: rgba(251, 44, 54, .5);
	/* Seta do select: o CaretUpDown do Phosphor que o Select do Kumo usa, no
	   tom `kumo-subtle`. SVG em data URI porque o ícone é fundo do <select>
	   nativo — e cor de SVG em url() não herda currentColor, daí uma por tema. */
	--campo-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23737373'%3E%3Cpath d='M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z'/%3E%3C/svg%3E");
	--card-foreground: #08080a;
	--popover: #ffffff;
	--popover-foreground: #08080a;
	--destak: #001e40;
	--destak-opacity: rgba(0, 30, 64, 0.5);
	--primary: #17171b;
	--primary-foreground: #f9f9f9;
	--secondary: #f4f4f5;
	--secondary-foreground: #17171b;
	--tertiary: #FAFAFA;
	--muted: #f4f4f5;
	--muted-foreground: #71717a;
	--accent: #f4f4f5;
	--accent-foreground: #17171b;
	--destructive: #ee4444;
	--destructive-foreground: #f9f9f9;
	--border: rgba(0,0,29,0.075);
	--input: #e3e3e7;
	--ring: #17171b;
	--radius: 0.5rem;
	--white: #ffffff;

	/* Elevação em camadas, do zero-7: anel de 1px + duas sombras curtas, no lugar
	   de uma borda sólida. É o que dá aos campos o relevo do Stripe em vez do
	   retângulo chapado do Bootstrap. */
	--fancy-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(64, 68, 82, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;
	--fancy-shadow-focus: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(1, 150, 237, 0.36) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(64, 68, 82, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
	--fancy-shadow-invalid: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255 0 0 / 36%) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(64, 68, 82, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;

	/* Acento de interação. NÃO é o --primary-brand: aquele é o navy da marca e
	   pinta botão e notice — trocar lá repintaria o app inteiro. */
	--accent-blue: #007AFF;

	/* Azul do 4selet-pay: barra de impersonação e alça de redimensionar a sidebar. */
	--blue-4selet: #1E6EF4;

	--primary-brand: #003c81;
	--primary-brand-opacity: #00000080;

	--lil-black: #e3e3e7;
	--mid-black: #fff;

	--green: #008932;
	--red: #E9142D;

	/* Largura da sidebar. --sidebar-w é a largura vigente e é o que todo o layout
	   consulta; o JS do resize sobrescreve --sidebar-w-expanded no <html>, então
	   sidebar, conteúdo e logo acompanham sem tocar em regra nenhuma. */
	--sidebar-w-collapsed: 56px;
	--sidebar-w-expanded: 270px;
	--sidebar-w: var(--sidebar-w-collapsed);

	/* svg */
	--check: url("../img/svg/check.svg");
	--chevrons-up-down: url('../img/svg/chevrons-up-down.svg');

    --range-value: 0;
	--border-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
		0px 1px 2px -1px rgba(0, 0, 0, 0.08),
		0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}
body.dark {
	--background: #191919;
	--foreground: #f9f9f9;
	--card: #161616;
	--tabela-zebra: #161616;
	/* Branco a 9% dá sobre o card escuro (~#151515) o mesmo contraste relativo
	   (~1,26:1) que o preto a 10% dá sobre o branco. O preto do padrão sumia. */
	--grafico-grade: rgba(255, 255, 255, .09);

	--campo-fundo: #171717;
	--campo-anel: #333333;
	--campo-foco: rgba(233, 233, 233, .5);
	--campo-texto: #f5f5f5;
	--campo-placeholder: #737373;
	--campo-erro: #e7000b;
	--campo-erro-foco: rgba(231, 0, 11, .5);
	--campo-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23a1a1a1'%3E%3Cpath d='M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z'/%3E%3C/svg%3E");
	--card-foreground: #f9f9f9;
	--popover: #08080a;
	--popover-foreground: #f9f9f9;
	--primary: #f9f9f9;
	--primary-foreground: #17171b;
	--secondary: #27272a;
	--tertiary: #202020;
	--secondary-foreground: #f9f9f9;
	--muted: #27272a;
	--muted-foreground: #a1a1a9;
	--accent: #27272a;
	--accent-foreground: #f9f9f9;
	--destructive: #7f1d1d;
	--destructive-foreground: #f9f9f9;
	--border: #27272a;
	--input: #27272a;
	--ring: #d3d3d7;

	--lil-black: #43444A;
	--mid-black: #151515;

	/* svg */
	--chevrons-up-down: url('../img/svg/chevrons-up-down-white.svg');

	--border-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);

	/* No escuro o anel clareia em vez de escurecer: sombra preta sobre fundo
	   escuro não se vê, quem desenha a borda é o anel de cinza. */
	--fancy-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0 0 0 / 21%) 0px 1px 1px 0px, rgb(114 114 114 / 27%) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(86 86 86 / 8%) 0px 2px 5px 0px;
	--accent-blue: #0A84FF;
	--color-zero7: #005da0;
}
/* Calha da barra de rolagem sempre reservada. Sem isto, a página que passa a
   ter scroll (tabela que enche, aba mais longa) ganha a barra e perde ~15px de
   largura: o conteúdo e o cabeçalho "sambam" para a esquerda. Com a calha fixa a
   largura útil é a mesma com ou sem scroll. Só tem efeito onde a barra ocupa
   espaço (mouse conectado, Windows); com barra sobreposta não muda nada. */
html {
	scrollbar-gutter: stable;
}
/* Sem o "elástico" do macOS ao rolar além do fim da PÁGINA (rubber-band).

   Só no `html`, e só no eixo vertical, de propósito:
   - `overscroll-behavior` impede o ENCADEAMENTO de scroll. Aplicado a todo
     elemento, qualquer wrapper com `overflow: hidden|auto` — que é scroll
     container mesmo sem ter o que rolar — passa a engolir a roda do mouse em
     vez de repassar para a página, e a tela inteira "trava". Foi o que aconteceu
     com uma regra `:where(*)`.
   - O eixo horizontal fica livre porque `none` nele também desliga o gesto de
     dois dedos de voltar/avançar do navegador. */
html {
	overscroll-behavior-y: none;
}
/* Modal e offcanvas do Bootstrap e o SweetAlert2 travam o scroll e somam a
   largura da barra em `padding-right` inline no body, para o conteúdo não pular
   quando a barra some. Com a calha já reservada a barra não some, então essa
   compensação empurraria tudo para a esquerda ao abrir o diálogo. */
body[style*="padding-right"] {
	padding-right: 0 !important;
}
body {
	font-family: "Inter", "Inter Fallback", sans-serif;
	background-color: var(--background);
	color: var(--foreground);
	/* No macOS o texto renderiza mais pesado que o desenhado, e o peso 500 que
	   usamos nos títulos chega gordo. Uma vez na raiz, nunca por componente. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Dígito de largura fixa. Vai em todo número que MUDA — dinheiro, contador,
   data —, senão a coluna desalinha entre linhas e o cartão pula de largura a
   cada atualização de saldo. */
.tabular-nums {
	font-variant-numeric: tabular-nums;
}
/* Estilo da tela de financeiro, que vivia num <style> dentro da Blade. */
.subtitle {
	cursor: pointer;
}
.font-relation {
	font-family: "relationship of me'lodrame", sans-serif;
}
.text-primary-foreground {
	color: var(--primary-foreground) !important;
}
/* Checkbox e radio, na anatomia do Kumo: caixa de 16px, sem borda, anel de 1px
   e fundo de campo. Marcado vira sólido, e o glifo branco que o Bootstrap já
   desenha aparece por cima — por isso o marcado é o azul de destaque e não o
   --foreground: sobre branco o próprio glifo branco sumiria.

   O anel de foco é o mesmo dos campos de texto, para o teclado enxergar os
   três controles da mesma forma. */
.form-check-input {
	width: 16px;
	height: 16px;
	margin: 0;
	border: none !important;
	border-radius: 4px;
	background-color: var(--tertiary);
	box-shadow: 0 0 0 1px var(--input) !important;
	transition-property: background-color, box-shadow;
	transition-duration: .15s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.form-check-input[type="radio"] {
	border-radius: 999px;
}
.form-check-input:checked {
	background-color: var(--accent-blue) !important;
	box-shadow: 0 0 0 1px var(--accent-blue) !important;
}
.form-check-input:focus-visible {
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ring) 50%, transparent) !important;
}
.form-check-input:checked:focus-visible {
	box-shadow: 0 0 0 1px var(--accent-blue), 0 0 0 3px color-mix(in srgb, var(--accent-blue) 35%, transparent) !important;
}
.form-check-input:disabled {
	opacity: .5;
}
/* Campo de formulário: uma aparência só para input, select e textarea.

   As medidas vêm do Input e do Select do Kumo — 36px de altura (`h-9`), 12px de
   respiro lateral (`px-3`), raio 8px (`rounded-lg`), anel de 1px em repouso e
   1.5px no foco.

   Duas mudanças em relação ao que havia aqui, e é delas que vinha a diferença
   entre um campo e outro na mesma tela:

   1. O fundo era `transparent`, então o campo assumia a cor da superfície atrás
      dele — o mesmo select parecia um sobre o cartão e outro dentro do modal.
      Agora é `--campo-fundo`, fixo, o `bg-kumo-control` do original (branco no
      claro, #171717 no escuro).
   2. A moldura era o `--fancy-shadow`, uma pilha de sombra mais anel, feita para
      dar elevação. Campo não flutua: agora é um anel de 1px e só, na cor
      `--campo-anel` (o `ring-kumo-line`: preto a 10% no claro). */
.form-control {
	height: 36px;
	font-size: .875rem !important;
	line-height: 1.25rem !important;
	font-weight: 400 !important;
	padding: 8px 12px !important;
	border: none !important;
	border-radius: 8px;
	background-color: var(--campo-fundo);
	box-shadow: 0 0 0 1px var(--campo-anel) !important;
	transition-property: box-shadow;
	transition-duration: .15s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* Ícone de dica ao lado do rótulo.

   14px, e não os 16px de antes: ele acompanha um rótulo de 14px, e ícone maior
   que o texto que ele anota vira o elemento mais pesado da linha.

   O alinhamento vem do rótulo virar inline-flex quando tem dica: o SVG do Lucide
   é inline e assenta na linha de base, o que o jogava para baixo do texto. O
   `:has()` evita mudar o display de TODO rótulo do painel por causa de um caso. */
.field-hint-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	stroke-width: 1.5px;
	color: var(--muted-foreground);
	cursor: help;
}
.form-group label:has(.field-hint-icon) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
}
/* Preenchimento automático do Chrome.

   O Chrome pinta o campo de azul-claro e troca a cor do texto por conta própria,
   e não dá para sobrescrever `background-color`: a regra dele é de user agent e
   vence qualquer folha. O que funciona são estes três:

   - uma sombra INTERNA gigante, que cobre o azul com a nossa cor de campo. Vai
     junto do anel de 1px na mesma declaração, senão o campo perde a moldura;
   - `-webkit-text-fill-color`, que é o único jeito de recolorir o texto;
   - a transição absurda de background-color, porque o Chrome reaplica a pintura
     um instante depois de preencher — com a transição adiada ela nunca chega.

   Vale para input, select e textarea, e nos quatro estados em que o Chrome
   mantém a marca de preenchido. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:active,
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--campo-texto) !important;
	box-shadow: 0 0 0 1px var(--campo-anel), inset 0 0 0 1000px var(--campo-fundo) !important;
	caret-color: var(--foreground);
	transition: background-color 600000s 0s, color 600000s 0s;
	/* O Chrome desenha o valor preenchido com a fonte DELE até o campo receber
	   foco — daí o texto nascer miúdo e "consertar" sozinho no primeiro clique.
	   Repetir família, tamanho e entrelinha aqui força a nossa desde o load. */
	font-family: inherit !important;
	font-size: .875rem !important;
	line-height: 1.25rem !important;
	font-weight: 400 !important;
}
.form-control:-webkit-autofill:focus,
.form-group input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--campo-texto) !important;
	box-shadow: 0 0 0 1.5px var(--campo-foco), inset 0 0 0 1000px var(--campo-fundo) !important;
	transition: background-color 600000s 0s, color 600000s 0s;
	font-family: inherit !important;
	font-size: .875rem !important;
	line-height: 1.25rem !important;
	font-weight: 400 !important;
}
/* O Chrome recente marca o campo preenchido com esta pseudo-classe interna, e
   ela não é coberta por `:-webkit-autofill` em toda versão.

   Fica numa regra à parte DE PROPÓSITO: navegador que não conhece a
   pseudo-classe descarta o seletor inteiro, e se ela estivesse na lista acima
   levaria junto a correção que funciona em todos. */
input:-internal-autofill-selected {
	-webkit-text-fill-color: var(--campo-texto) !important;
	font-family: inherit !important;
	font-size: .875rem !important;
	line-height: 1.25rem !important;
	background-color: var(--campo-fundo) !important;
}
/* Área de texto cresce com o conteúdo: altura fixa aqui cortaria o campo. */
textarea.form-control {
	height: auto;
}
/* Select nativo com a aparência do gatilho do Select do Kumo: o mesmo campo
   do input (fundo, anel, foco e raio vêm do .form-control) e, no lugar da
   seta do sistema — que não acompanha o tema —, o CaretUpDown de 16px no tom
   apagado. Continua sendo o <select> do navegador: teclado, leitor de tela e
   a lista nativa do celular seguem funcionando sem nada recriado. */
select.form-control {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px !important;
	background-image: var(--campo-seta);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}
/* A lista que abre é do sistema, mas as opções herdam fundo e texto: sem isto,
   no escuro ela abria branca embaixo de um campo preto. */
select.form-control option {
	background-color: var(--campo-fundo);
	color: var(--campo-texto);
}
.form-control {
	color: var(--campo-texto) !important;
}
/* Placeholder no tom do Kumo. Sem regra, cada navegador usava o próprio cinza
   — e no escuro o do Chrome ficava quase da cor do texto. */
.form-control::placeholder {
	color: var(--campo-placeholder) !important;
	opacity: 1;
}
/* No foco o anel engrossa e clareia, em vez de o campo trocar de fundo. Trocar
   o fundo fazia o campo pular de cor ao receber o cursor. */
.form-control:focus {
	border-color: transparent !important;
	background-color: var(--campo-fundo) !important;
	color: var(--campo-texto) !important;
	box-shadow: 0 0 0 1.5px var(--campo-foco) !important;
}
/* Erro: o anel vermelho vale em repouso e engrossa no foco, como no original. */
.form-control.isnt-invalid {
	box-shadow: 0 0 0 1px var(--campo-erro) !important;
}
.form-control.isnt-invalid:focus {
	box-shadow: 0 0 0 1.5px var(--campo-erro-foco) !important;
}
/* Abaixo de 576px o campo vai a 16px porque o Safari do iOS dá ZOOM na página
   inteira quando o texto do campo é menor — e o zoom não volta sozinho ao sair
   do campo, o trader fica com a tela deslocada. Acima disso o desenho continua
   em 14px, então o visual no desktop não muda.

   Vale para o campo, o placeholder e a versão -sm, que é o que os modais desta
   área usam. */
@media (max-width: 575.98px) {
	/* O campo preenchido entra aqui junto: a regra do autofill é mais específica
	   que `.form-control` e, sem isto, ele voltaria a 14px no celular — que é
	   exatamente o tamanho que faz o iOS dar zoom. */
	.form-control:-webkit-autofill,
	.form-control,
	.form-control::-webkit-input-placeholder,
	.form-control::-moz-placeholder,
	.form-control::-ms-input-placeholder {
		font-size: 16px !important;
	}
}
/* O select tem a seta desenhada por cima; o anel azul do foco brigava com ela. */
.form-control.form-select:focus {
	box-shadow: 0 0 0 1.5px var(--campo-foco) !important;
}
/* Desabilitado como no Kumo: o mesmo fundo, texto apagado. O fundo era
   `var(--black)`, token que não existe — o campo ficava transparente. */
.form-control:disabled {
	background-color: var(--campo-fundo) !important;
	color: var(--campo-placeholder) !important;
	cursor: not-allowed;
}
/* A seta fica — desabilitado ainda é reconhecível como select, só apagado.
   Nada de `opacity` no elemento: ela também desbotaria o preenchimento sólido
   de `.form-control:disabled` e o campo ficaria translúcido, deixando ver o
   que está atrás. Em vez disso, texto e seta descem de opacidade cada um pela
   própria camada: o texto por `color-mix` (mistura com `transparent`, que o
   navegador compõe contra o fundo já opaco), e a seta por um véu — um segundo
   `background-image` pintado por cima do ícone, na MESMA cor do preenchimento,
   com opacidade parcial. Onde não há ícone o véu só soma preto sobre preto e
   não muda nada; onde há ícone, ele passa a se misturar com o fundo. */
select.form-control:disabled {
	color: var(--campo-placeholder) !important;
	background-image:
		linear-gradient(color-mix(in oklab, var(--campo-fundo) 45%, transparent), color-mix(in oklab, var(--campo-fundo) 45%, transparent)),
		var(--campo-seta);
}
/* ==========================================================================
   Logo da navbar (nav.blade.php) — um SVG só, com "ZER" e o C7 em paths
   separados. Aberta: a marca inteira, a 18px da borda, 22px de altura
   (100px de largura). Recolhida (56px): "ZER" some com opacidade e blur, e o
   C7 desliza até o centro da faixa. Transição por
   propriedade, interrompível — abrir no meio do fechar volta de onde está.

   Conta do encaixe: o C7 começa em 60,2% da largura da marca (x 953 do
   viewBox 61–1543) = 60,2px, e tem 39,8px de largura — cabe na faixa sem
   encolher. Ele tem de parar em (56 − 39,8) / 2 da borda da faixa; como está
   em 18 + 60,2, a distância é essa diferença.
   ========================================================================== */
.marca {
	--marca-zer: #7f8080;
	--marca-c7-inicio: #005ea2;
	--marca-c7-fim: #001e40;
	position: absolute;
	top: 50%;
	left: 18px;
	/* 22px de altura na proporção do viewBox (1482 × 326). */
	width: 100px;
	height: 22px;
	transform-origin: 60.2px 50%;
	transform: translateY(-50%);
	transition: transform .18s cubic-bezier(.2, 0, 0, 1);
}
body.dark .marca {
	--marca-zer: #fefefe;
	--marca-c7-inicio: #b7b7b7;
	--marca-c7-fim: #fefefe;
}
.toggle-menu .navbar-brand:not(.active):not(.active-force) .marca {
	transform: translateY(-50%) translateX(calc((var(--sidebar-w-collapsed) - 39.8px) / 2 - 78.2px));
}
.toggle-menu .navbar-brand:not(.active):not(.active-force) .marca__zer {
	opacity: 0;
	filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
	.marca {
		transition: none;
	}
}
/* Estado expandido: a largura vem da variável, que o resize atualiza. */
.dashboard.active,
.dashboard.active-force {
	--sidebar-w: var(--sidebar-w-expanded);
}
/* A folha: sem o padding24 do <x-sheet> (o recuo fica com cada faixa), coluna
   de três faixas — topo, lista e rodapé — e só a lista rola. */
#menuOffcanvas {
	padding: 0 !important;
	overflow: hidden;
}
/* Topo: logo à esquerda e fechar à direita, como a Cloudflare. */
.menu-mobile__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	min-height: 56px;
	/* 22px à esquerda = recuo da lista (12) + da linha (10): a logo alinha
	   com os ícones abaixo dela. */
	padding: 8px 12px 8px 22px;
	border-bottom: 1px solid var(--border);
}
.menu-mobile__marca {
	display: flex;
	align-items: center;
	line-height: 0;
}
/* Na navbar a logo é absoluta (anima ao recolher a sidebar); aqui ela fica no
   fluxo, no mesmo tamanho: 22px de altura. */
.menu-mobile__marca .marca {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	display: block;
}
.menu-mobile {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 12px 12px 8px;
}
.menu-mobile__lista,
.menu-mobile__sublista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.menu-mobile__secao {
	margin: 0;
	padding: 16px 10px 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--muted-foreground);
}
.menu-mobile__divisor {
	height: 1px;
	margin: 12px 8px;
	background-color: var(--border);
}
/* Linha: link, botão de submenu ou a linha do tema — o mesmo desenho. */
.menu-mobile-row__alvo {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 36px;
	padding: 7px 10px;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--foreground);
	font-size: 14px;
	line-height: 1.3;
	text-align: start;
	text-decoration: none;
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
a.menu-mobile-row__alvo:hover,
a.menu-mobile-row__alvo:focus-visible,
button.menu-mobile-row__alvo:hover,
button.menu-mobile-row__alvo:focus-visible {
	background-color: var(--accent);
	color: var(--foreground);
}
.menu-mobile-row.is-active > .menu-mobile-row__alvo {
	background-color: var(--accent);
	font-weight: 500;
}
.menu-mobile-row__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--muted-foreground);
}
.menu-mobile-row__icone svg {
	width: 18px !important;
	height: 18px !important;
	stroke-width: 1.75;
}
.menu-mobile-row.is-active > .menu-mobile-row__alvo .menu-mobile-row__icone,
.menu-mobile-row.is-open > .menu-mobile-row__alvo .menu-mobile-row__icone {
	color: var(--foreground);
}
.menu-mobile-row__rotulo {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Chevron do submenu: aponta para a direita fechado e gira para baixo aberto,
   como o do desktop. */
.menu-mobile-row__chevron {
	flex-shrink: 0;
	width: 16px !important;
	height: 16px !important;
	color: var(--muted-foreground);
	transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.menu-mobile-row__alvo:not(.collapsed) .menu-mobile-row__chevron {
	transform: rotate(90deg);
}
/* Filhos do submenu: só texto (sem ícone, como na sidebar do desktop),
   alinhado ao texto do pai (10px de recuo + 18px do ícone + 12px de gap − os
   10px de recuo do próprio filho = 30px), com uma guia vertical fina à
   esquerda, sob o ícone do pai. */
.menu-mobile__sublista {
	position: relative;
	padding: 2px 0 4px 30px;
}
.menu-mobile__sublista::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 6px;
	left: 19px;
	width: 1px;
	background-color: var(--border);
}
.menu-mobile-row_filho .menu-mobile-row__alvo {
	min-height: 34px;
	font-size: 14px;
	color: var(--muted-foreground);
}
.menu-mobile-row_filho.is-active .menu-mobile-row__alvo,
.menu-mobile-row_filho .menu-mobile-row__alvo:hover {
	color: var(--foreground);
}
/* A logo não divide a barra com nada à esquerda no celular: a borda da direita
   separava de um vazio. Vale para o contêiner e para o link dentro dele, porque
   os dois carregam utilitárias de borda no markup. */
@media (max-width: 768px) {
	.md-container-menu-mobile .toggle-menu,
	.md-container-menu-mobile .navbar-brand {
		border: 0 !important;
	}
}
/* Rodapé: tema, troca de área (Admin / Voltar ao Trader) e Sair, nas mesmas
   linhas da lista, grudados no fim da folha. O respiro de baixo soma a área
   segura do aparelho (barra de gestos do iPhone). */
.menu-mobile__footer {
	flex-shrink: 0;
	padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px));
}
.menu-mobile__footer .menu-mobile__divisor {
	margin-top: 4px;
}
/* A linha do tema não navega: sem hover, com o botão de tema no lugar do chevron. */
.menu-mobile-row_tema .menu-mobile-row__alvo {
	padding-block: 4px;
}
.menu-mobile-row_tema .btn_dark_mode,
.menu-mobile-row_tema .btn_light_mode {
	flex-shrink: 0;
	margin: 0 !important;
}
.menu-mobile-row_sair .menu-mobile-row__alvo,
.menu-mobile-row_sair .menu-mobile-row__icone {
	color: var(--nl-danger-text, #dc2626);
}
/* O widget de suporte flutuante não é desta página — ele injeta o próprio
   z-index, alto o bastante pra ficar por cima de praticamente qualquer coisa.
   O padrão do Bootstrap pro offcanvas (1045) perde fácil. Passa na frente com
   um valor bem acima do que qualquer widget de chat costuma usar. */
#menuOffcanvas {
	height: 100% !important;
}
/* O backdrop sobe junto — e aí TODO offcanvas precisa subir, não só o menu:
   um painel em 1045 ficava por baixo do próprio backdrop (a folha de detalhe
   de Minhas Compras abria escurecida e sem clique). */
.offcanvas {
	z-index: 2147483001 !important;
}
.offcanvas-backdrop {
	z-index: 2147483000 !important;
}
.side-link.active,
.side-link.active-force {
	background-color: var(--tertiary);
}
.table-container tbody tr td .tag_positive,
.tabela tbody tr td .tag_positive,
.table-container tbody tr td .tag.tag_pago,
.tabela tbody tr td .tag.tag_pago,
.table-container tbody tr td .tag.tag_finalizado,
.tabela tbody tr td .tag.tag_finalizado,
.table-container tbody tr td .tag.tag_ativo,
.tabela tbody tr td .tag.tag_ativo {
	background-color: rgb(59, 180, 45, .2);
	color: rgb(59, 180, 45);
	width: 120px;
	text-align: center;
}
.table-container tbody tr td .tag_negative,
.tabela tbody tr td .tag_negative,
.table-container tbody tr td .tag.tag_falhou,
.tabela tbody tr td .tag.tag_falhou,
.table-container tbody tr td .tag.tag_estornado,
.tabela tbody tr td .tag.tag_estornado,
.table-container tbody tr td .tag.tag_estorno_parcial,
.tabela tbody tr td .tag.tag_estorno_parcial,
.table-container tbody tr td .tag.tag_erros,
.tabela tbody tr td .tag.tag_erros,
.table-container tbody tr td .tag.tag_cancelado,
.tabela tbody tr td .tag.tag_cancelado,
.table-container tbody tr td .tag.tag_deletado,
.tabela tbody tr td .tag.tag_deletado,
.table-container tbody tr td .tag.tag_expirado,
.tabela tbody tr td .tag.tag_expirado,
.table-container tbody tr td .tag.tag_pagamento_pendente,
.tabela tbody tr td .tag.tag_pagamento_pendente {
	background-color: rgb(255, 0, 0, .2);
	color: rgb(255, 0, 0, 1);
	width: 120px;
	text-align: center;
	border-radius: 20px;
    padding: 2px 6px;
}
.tag.tag_erros,
.tag.tag_cancelado,
.tag.tag_deletado,
.tag.tag_expirado,
.tag.tag_pagamento_pendente {
	background-color: rgb(255, 0, 0, .2);
	color: rgb(255, 0, 0, 1);
	width: 120px;
	text-align: center;
}
.tag_positive,
.tag.tag_pago,
.tag.tag_finalizado,
.tag.tag_ativo {
	background-color: rgb(59, 180, 45, .2);
	color: rgb(59, 180, 45);
	width: 120px;
	text-align: center;
}
.tag.tag_processando {
	background-color: rgba(255, 170, 0, 0.2);
	color: rgb(255, 170, 0, 1);
	width: 120px;
	text-align: center;
}
.table-container tbody tr td .tag.tag_novo,
.tabela tbody tr td .tag.tag_novo,
.table-container tbody tr td .tag.tag_aguardando_pagamento,
.tabela tbody tr td .tag.tag_aguardando_pagamento {
	background-color: rgb(0, 60, 129, .2);;
	color: rgb(0, 100, 220);
	width: 120px;
	text-align: center;
}
/* .table-container tbody tr td .tag.tag_cancelado, */
.table-container tbody tr td .tag.tag_pausado,
.tabela tbody tr td .tag.tag_pausado {
	background-color: rgb(113, 113, 122, .2);
	color: rgb(113, 113, 122, 1);
	width: 120px;
	text-align: center;
}
.table-container tbody tr td .tag.tag_chargeback,
.tabela tbody tr td .tag.tag_chargeback {
	background-color: rgb(113, 113, 122, .2);
	color: rgb(113, 113, 122, 1);
	width: 120px;
	text-align: center;
}
.table-container tbody tr td .tag.tag_pendente,
.tabela tbody tr td .tag.tag_pendente,
.table-container tbody tr td .tag.tag_processando,
.tabela tbody tr td .tag.tag_processando,
.tag_pendente {
	background-color: rgba(255, 170, 0, 0.2);
	color: rgb(255, 170, 0, 1);
	text-align: center;
	text-align: center;
    border-radius: 20px;
    padding: 2px 6px;
}
.table-container tbody tr td .tag.tag_processando,
.tabela tbody tr td .tag.tag_processando,
.table-container tbody tr td .tag.tag_erros,
.tabela tbody tr td .tag.tag_erros,
.table-container tbody tr td .tag.tag_finalizado,
.tabela tbody tr td .tag.tag_finalizado {
	padding: 4px;
	border-radius: 6px;
}
.table-container .form-check,
.tabela .form-check {
	padding-left: 0 !important;
	margin-bottom: 0 !important;
}
/* O .form-select nasceu para o seletor compacto do rodapé da tabela (largura
   automática). O x-select usa `form-control form-select` junto, então este
   bloco também alcança campo de formulário — e era por isso que um x-select
   saía com borda e fundo diferentes dos outros campos da mesma tela.

   A moldura entra na régua dos demais; a largura automática fica, porque é dela
   que o seletor compacto depende. Quem é campo de formulário recupera 100% na
   regra logo abaixo. */
.form-select {
	width: auto !important;
	background-color: var(--campo-fundo) !important;
	border: none;
	border-radius: 8px;
	box-shadow: 0 0 0 1px var(--campo-anel);
	color: var(--campo-texto);
	fill: var(--foreground);
	/* Mesma seta e mesma medida do select.form-control: o CaretUpDown do Kumo,
	   16px, a 12px da borda. */
	background-image: var(--campo-seta) !important;
	background-position: right 12px center !important;
	padding: .25rem 36px .25rem 12px !important;
	background-size: 16px !important;
	cursor: pointer;
}
/* Select dentro de formulário: ocupa a linha e tem a altura dos outros campos. */
.form-control.form-select {
	width: 100% !important;
	height: 36px;
}
/* Mesmo foco dos outros campos: anel de 1.5px, sem borda e sem voltar ao raio
   de 6px que existia antes do padrão. */
.form-select:focus {
	border: none !important;
	border-radius: 8px;
	box-shadow: 0 0 0 1.5px var(--campo-foco) !important;
	outline: none;
}
.table-container .form-check .form-check-input,
.tabela .form-check .form-check-input {
	float: none !important;
	margin-left: 0 !important;
	background-color: transparent;
	border: 1px solid var(--primary);
}
.table-container .form-check .form-check-input:focus,
.tabela .form-check .form-check-input:focus {
	outline: none !important;
	box-shadow: none !important;
}
.table-container tbody tr td span.tag,
.tabela tbody tr td span.tag {
	border: 1px solid var(--primary);
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 12px;
}
/* Coluna "Capa" das tabelas (x-table) e dos cartões que a tabela vira no celular: miniatura 16:9 recortada. Sem
   tamanho, a imagem entrava no tamanho original e ocupava a linha inteira. */
td img.thumb,
.xtable-card img.thumb {
	display: inline-block;
	width: 96px;
	height: 54px;
	object-fit: cover;
	vertical-align: middle;
	border-radius: 6px;
}
/* O x-input embrulha o campo num .form-group, e estas duas regras são de antes
   do padrão: davam ao input borda de 1px, raio de 6px e fundo --secondary,
   enquanto o select ao lado ficava com o anel e o fundo do .form-control. Era
   daí que vinha a diferença entre dois campos da mesma tela.

   Agora seguem o padrão: sem borda, anel de 1px, mesmo fundo e mesmo raio. O
   anel vai sem `!important` de propósito — quando o campo também é .form-control,
   quem manda é a regra de lá, que é a mesma medida.

   Checkbox, radio e range ficam de fora: cada um tem desenho próprio e herdar
   fundo de campo de texto os deformaria. */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
	border: none;
	border-radius: 8px;
	background-color: var(--campo-fundo);
	color: var(--campo-texto) !important;
	box-shadow: 0 0 0 1px var(--campo-anel);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
	border: none !important;
	background-color: var(--campo-fundo);
}
/* Esta regra é mais específica que `.form-control:disabled` e pinta a cor com
   !important: sem repetir o estado aqui, o campo desabilitado não apagava. */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):disabled {
	color: var(--campo-placeholder) !important;
}
/* O `.btn` do Bootstrap só declara a borda do repouso; as de :active e
   :disabled vêm das classes `.btn-primary` & cia., que o <x-button> não usa.
   Sem elas o `var()` fica inválido, `border-color` cai no valor inicial —
   `currentColor` — e toda variante sem `.border` ganha um contorno da cor do
   próprio texto ao ser clicada ou desabilitada. Variante que tem borda de
   verdade usa `.border`, que é `!important` e passa por cima daqui.
   `:where()` zera a especificidade: as `.btn-primary` que ainda restam nas
   telas de auth e checkout seguem definindo a própria borda, mesmo este
   arquivo carregando depois do Bootstrap. */
:where(.btn) {
	--bs-btn-active-border-color: transparent;
	--bs-btn-disabled-border-color: transparent;
}
.btn {
	transition-property: color, background-color, box-shadow, text-decoration-color, fill, stroke !important;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
	transition-duration: .15s !important;
}
/* Botão não tem borda — nenhum. A borda de 1px ficava sobre o próprio fundo e,
   no primário escuro, virava um aro claro e serrilhado em volta (a `.border`
   do Bootstrap pinta com --bs-border-color). Quem precisa de contorno (outline,
   input, icon) usa `.btn-anel`: uma sombra inset de 1px, que desenha o mesmo
   traço por DENTRO da caixa — não soma no tamanho, não briga com o fundo e se
   combina com o anel de foco numa lista de sombras só. A exceção é o
   `.btn-filter`: o traço dele é tracejado, e sombra não faz tracejado. */
.btn,
.btn.border {
	--bs-btn-border-width: 0;
	border: 0 !important;
}
.btn.btn-filter,
.btn.btn-filter:active {
	border: 1px dashed var(--border) !important;
}
.btn-anel {
	box-shadow: inset 0 0 0 1px var(--campo-anel);
}
.btn-anel:focus-visible {
	box-shadow: inset 0 0 0 1px var(--campo-anel), 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
}
/* Resposta tátil ao clique. O 0.96 é o teto: abaixo de 0.95 o botão parece
   afundar. Só `transform` entra na transição — a lista de cores acima continua
   valendo, e transicionar tudo custaria repaint a cada hover. */
@media (prefers-reduced-motion: no-preference) {
	.btn {
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, scale !important;
	}

	/* A propriedade `scale`, e não `transform: scale()`: botão que já usa
	   transform para se posicionar — o "Mostrar" da senha se centraliza com
	   translateY(-50%) — perderia o posicionamento ao ser clicado, porque o
	   transform do :active substituiria o dele por inteiro. As propriedades
	   individuais se compõem em vez de sobrescrever. */
	.btn:not(.disabled):not(:disabled):active {
		scale: .96;
	}

	/* Fora do efeito: é um controle auxiliar dentro do campo, e encolher junto
	   com o clique chama atenção para onde ela não deve ir. */
	.togglePassword:active {
		scale: 1;
	}
}
/* Sem `color` aqui: era `var(--background)`, um token emprestado sem
   relação com o botão — a cor da PÁGINA, não a do próprio texto. Ficava
   ilegível em qualquer variante cujo texto não fosse claro por natureza
   (default, secondary). Desabilitado é a mesma peça apagada, não repintada:
   a opacidade sozinha já esmaece fundo, texto e borda juntos, preservando a
   cor de cada variante. */
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
	opacity: .5;
}
.btn-combobox,
.btn-combobox:active {
	font-size: .875rem !important;
	line-height: 1.25rem !important;
	font-weight: 500 !important;
	padding: .5rem 1rem .5rem 1rem !important;
	background-color: var(--background) !important;
	color: var(--foreground) !important;
	box-shadow: inset 0 0 0 1px var(--border) !important;
	height: 2.25rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}
.bg-destructive {
	background-color: var(--destructive) !important;
	color: var(--primary-foreground);
}
.bg-destructive:hover {
	filter: opacity(.9);
	color: var(--primary-foreground);
}
.togglePassword {
	position: absolute;
	right: 0;
	top: 50%;
	bottom: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	height: calc(100% - 4px);
	padding: 0 .5rem;
	border: none!important;
	outline: none;
	box-shadow: none;
	margin-right: 2px;
	/* Some no campo: o botão é auxiliar, e um retângulo em --secondary dentro do
	   input virava uma segunda caixa competindo com o valor digitado. Fundo
	   transparente, texto em tom de apoio, e o realce só no hover e no foco. */
	background-color: transparent !important;
	color: var(--muted-foreground) !important;
	border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
	/* Sem transição: ele troca de rótulo entre "Mostrar" e "Esconder", e animar
	   a cor de um texto que muda de conteúdo faz a troca parecer engasgada. */
	transition: none !important;
}
.togglePassword:hover,
.togglePassword:focus-visible {
	color: var(--foreground) !important;
}
/* Descrição de aula, curso e módulo nas páginas do trader. O texto vem de um textarea do painel: as quebras de
   linha digitadas são mantidas (por isso a view deixa o texto colado na tag), e a medida de leitura evita
   linhas atravessando a tela. */
.content-description {
	max-width: 720px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted-foreground);
	white-space: pre-line;
}
/* O degradê fica só atrás do texto: legível sobre qualquer capa, sem escurecer a imagem inteira. */
@media (max-width: 743px) {
	.modal-dialog .modal-body .content-unique-file {
		max-height: 300px;
		width: 100%;
	}

	.trilha-horizontal {
		width: 340px !important;
		height: 180px !important;
		min-width: 180px !important;
	}

	.navbar .navbar-brand {
		width: 82px;
	}

	.logo-sm {
		height: 44px;
	}

	.navbar .navbar-brand.active,
	.navbar .navbar-brand.active-force {
		width: 120px;
	}

    .w-sm-100 {
        width: 100%;
    }
}
/* Caixa do termo a assinar, nos dois modais do plano. O conteudo dentro dela varia:
   texto do termo do produto ou PDF do termo global. */
#modalTerms .box-aceita-termo,
#modalTermsEvaluation .box-aceita-termo {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid var(--input);
	border-radius: calc(var(--radius) - 2px);
	background-color: var(--tertiary);
}
.box-aceita-termo__texto {
	display: block;
	padding: 1rem;
	/* Termo e texto colado de outro lugar: uma URL longa ou um token sem espaco
	   estoura a caixa e poe rolagem horizontal no modal a 375px. */
	overflow-wrap: anywhere;
}
/* O PDF nao rola junto com a caixa: o proprio visualizador do navegador faz o scroll
   dele, entao a altura fixa aqui so garante area de leitura. */
#modalTerms .box-aceita-termo--vazio {
	padding: 1rem;
}
.nav.nav-pills .nav-link.nav-link-daterange {
	padding: 0.225rem 1rem !important;
}
.code {
	background-color: #09090B;
	color: #ffff;
	padding: 2rem !important;
	border-radius: 6px;
}
/* Painel de aba. Sem `.fade`/`.show` de propósito: a troca de aba é seca, sem
   transição de opacidade. O Bootstrap só anima o que tem `.fade`, e o painel
   ativo aparece só com `.active`. Quem procurar o painel aberto usa
   `.tab-pane.active`. */
.tab-pane {
	/*border: 1px solid var(--border);*/
	/*border-radius: 6px;*/
	/*padding: 10px 20px;*/
	background-color: var(--background);
	color: var(--primary) !important;
}
/* ==========================================================================
   Véu dos fundos (backdrop) — uma regra só
   Modal, layer-dialog, offcanvas, sheet, diálogos do Swal e a tela de carregamento
   usam o mesmo fundo: vidro fosco, e não uma cortina de preto chapado a 80%. Blur
   no que está atrás, um degradê de preto entre 10% e 15% (mais leve em cima, mais
   denso embaixo) para dar profundidade e contraste ao painel, e por baixo dele um
   toque do fundo da página. `--background` muda com o tema (body.dark), então o
   vidro sai claro no tema claro e escuro no escuro sem regra separada, e a página
   segue legível por trás.

   `--veu-alfa` é o quanto do vidro está presente (0 a 1). Quem anima entrada e
   saída anima só ele, e o blur, o degradê e o toque do tema entram e saem juntos.
   ========================================================================== */
@property --veu-alfa {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}
:root {
	--veu-topo: .10;
	--veu-base: .15;
	--veu-tema: 30%;
	--veu-blur: 10px;
}
/* No escuro o preto some no fundo quase preto: o toque do tema sobe um pouco
   para o vidro continuar lendo como camada, e o degradê fica um passo mais denso. */
body.dark {
	--veu-topo: .12;
	--veu-base: .18;
	--veu-tema: 38%;
}
/* Sem blur (navegador antigo) ou com "reduzir transparência" ligado no sistema:
   o vidro vira uma camada mais firme do fundo da página, que ainda lê bem. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root, body, body.dark {
		--veu-tema: 82%;
	}
}
@media (prefers-reduced-transparency: reduce) {
	:root, body, body.dark {
		--veu-tema: 82%;
		--veu-blur: 0px;
	}
}
.offcanvas-backdrop,
#loader-wrapper.carregamento,
body .swal2-container.swal2-backdrop-show,
body .swal2-container.swal-zero7-fundo-sai {
	background:
		linear-gradient(180deg,
			rgb(0 0 0 / calc(var(--veu-topo) * var(--veu-alfa))) 0%,
			rgb(0 0 0 / calc(var(--veu-base) * var(--veu-alfa))) 100%),
		color-mix(in srgb, var(--background) calc(var(--veu-tema) * var(--veu-alfa)), transparent);
	-webkit-backdrop-filter: blur(calc(var(--veu-blur) * var(--veu-alfa))) saturate(1.15);
	backdrop-filter: blur(calc(var(--veu-blur) * var(--veu-alfa))) saturate(1.15);
}
/* O Bootstrap esmaece o fundo com `opacity` (.5): o vidro já é translúcido por si, então a opacidade cheia
   fica com ele e o fade só liga e desliga. O modal lê a opacidade de uma variável; o offcanvas a fixa no
   `.show`, então este precisa da regra própria. */
.offcanvas-backdrop.show {
	opacity: 1;
}
/* Toast não tem fundo: é um aviso que flutua, não um diálogo. O container dele também leva a classe do
   fundo do Swal, e sem isto o vidro apareceria (e desfocaria a página) no canto onde o toast está. */
.swal2-container.toast-kumo-container {
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
/* O fundo em si vem do véu compartilhado (acima); aqui só entram e saem, com `--veu-alfa`. */
body .swal2-container.swal2-backdrop-show {
	animation: swal-zero7-fundo-entra .2s cubic-bezier(.32, .72, 0, 1) both;
}
body .swal2-container.swal-zero7-fundo-sai {
	animation: swal-zero7-fundo-sai .2s cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes swal-zero7-fundo-sai {
	to {
		--veu-alfa: 0;
	}
}
@keyframes swal-zero7-fundo-entra {
	from {
		--veu-alfa: 0;
	}
}
.swal2-popup.swal-zero7-entra {
	animation: swal-zero7-entra .2s cubic-bezier(.32, .72, 0, 1) both;
}
.swal2-popup.swal-zero7-sai {
	animation: swal-zero7-sai .2s cubic-bezier(.32, .72, 0, 1) both;
}
@keyframes swal-zero7-entra {
	from {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@keyframes swal-zero7-sai {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	to {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}
}
@media (prefers-reduced-motion: reduce) {
	body .swal2-container.swal2-backdrop-show,
	body .swal2-container.swal-zero7-fundo-sai,
	.swal2-popup.swal-zero7-entra,
	.swal2-popup.swal-zero7-sai {
		animation-duration: 1ms;
	}
}
.swal2-html-container {
	text-align: left !important;
	padding: 0 !important;
	color: var(--accent-foreground) !important;
	font-size: 14px !important;
}
.swal2-title {
	font-weight: 500 !important;
	font-size: 16px !important;
    line-height: 1 !important;
	color: var(--foreground) !important;
	letter-spacing: -.025em !important;
	position: relative;
    padding: 0!important;
	margin-bottom: 15px !important;
    text-align: start !important;
    text-transform: none;
    word-wrap: break-word;
}
/* O `>` não é estilo: `.swal2-container.swal2-center > .swal2-popup`, algumas
   linhas acima, crava `background-color` com três classes. Com duas, a casca
   nasceria na cor de fundo da página em vez da cor da camada. */
.swal2-container > .swal2-popup.swal-zero7 {
	/* 448px é o tamanho `sm` do LayerDialog. */
	width: min(448px, calc(100vw - 32px)) !important;
	padding: 6px !important;
	border-radius: 16px !important;
	background-color: var(--tertiary) !important;
	box-shadow: 0 0 0 1px var(--border), 0 24px 48px -12px rgba(0, 0, 0, .45) !important;
}
/* Raio concêntrico: 16 da casca menos os 6 de respiro dão os 10 de dentro. Com
   o mesmo raio nos dois, o canto de dentro parece torto. */
.swal-zero7__corpo {
	border-radius: 10px;
	padding: 14px;
	background-color: var(--card);
	box-shadow: 0 0 0 1px var(--input);
	text-align: start;
}
/* Título e texto são os próprios elementos do SweetAlert, movidos para dentro
   da superfície no render (montarSuperficieDialogo, em requisicaoformulario.js).
   As regras genéricas `.swal2-title` / `.swal2-html-container` deste arquivo
   cravam margem e cor com !important — daí o seletor composto e o !important. */
.swal-zero7 .swal2-title.swal-zero7__titulo {
	display: block;
	/* Espaço para o X não encostar no título em mensagem de uma linha. */
	margin: 0 0 2px !important;
	padding: 0 32px 0 0 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: -.01em !important;
	color: var(--foreground) !important;
	text-align: start !important;
	text-wrap: balance;
}
.swal-zero7 .swal2-html-container.swal-zero7__texto {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--muted-foreground) !important;
	text-align: start !important;
	text-wrap: pretty;
	overflow-wrap: break-word;
}
/* Sem título (o SweetAlert esconde com display: none inline), o texto é a
   primeira linha e é ele quem precisa desviar do X. */
.swal-zero7 .swal2-title[style*="none"] + .swal-zero7__texto {
	padding-inline-end: 32px !important;
}
.swal-zero7__texto p {
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}
.swal-zero7__texto p + p {
	margin-top: 8px !important;
}
/* Campo do diálogo (motivo em textarea, select): fica na casca, logo abaixo
   da superfície — o SweetAlert só o encontra como filho direto do popup. Mesmo
   desenho dos campos do painel. */
.swal-zero7 > .swal-zero7__campo {
	width: 100% !important;
	margin: 6px 0 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background-color: var(--campo-fundo) !important;
	box-shadow: inset 0 0 0 1px var(--campo-anel) !important;
	color: var(--campo-texto) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}
.swal-zero7 > textarea.swal-zero7__campo {
	min-height: 96px;
	resize: vertical;
}
.swal-zero7 > .swal-zero7__campo::placeholder {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--campo-placeholder) !important;
}
.swal-zero7 > .swal-zero7__campo:focus {
	outline: none !important;
	box-shadow: inset 0 0 0 1px var(--campo-foco) !important;
}
.swal-zero7 .swal-zero7__validacao {
	justify-content: flex-start !important;
	margin: 6px 0 0 !important;
	padding: 0 4px !important;
	background: transparent !important;
	color: var(--campo-erro) !important;
	font-size: 13px !important;
}
.swal-zero7 .swal-zero7__validacao::before {
	display: none !important;
}
/* Rodapé apoiado na casca, alinhado pela borda direita da superfície: sem
   respiro lateral próprio, porque os 6px da casca já são o alinhamento.
   A ação primária fica à direita; "Fechar", quando existe, vai para a esquerda
   (margin auto) — colado ao "Concluir" ele pareceria parte do grupo de
   confirmação, não uma alternativa a ele. Só com "OK", o OK fica à direita. */
.swal-zero7 .swal-zero7__acoes {
	width: 100% !important;
	justify-content: flex-end !important;
	gap: 8px;
	margin: 0 !important;
	padding: 8px 2px 2px !important;
}
/* O SweetAlert insere confirm antes de cancel no DOM; sem o `order` "Fechar"
   nasceria à direita de "Concluir". */
.swal-zero7 .swal-zero7__fechar {
	order: -1;
	margin-inline-end: auto;
}
/* Sem `.swal2-styled` no seletor: o diálogo abre com `buttonsStyling: false`, e
   essa opção REMOVE a classe do botão. Com ela na frente, nenhuma regra daqui
   pegava — o botão caía no desenho padrão do navegador.
   As regras `.swal2-styled.swal2-confirm` mais abaixo neste arquivo, que cravam
   padding e cor com `!important`, também não alcançam o botão por esse mesmo
   motivo; por isso aqui não precisa de `!important` nenhum. */
.swal-zero7 .swal-zero7__ok {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background-color: var(--primary);
	color: var(--primary-foreground);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
/* Confirmação digitada (data-confirmtyping): rótulo e campo dentro da superfície,
   logo depois do texto — como no LayerDialog do Kumo. */
.swal-zero7 .swal-zero7__rotulo {
	display: block;
	margin: 16px 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--foreground);
	text-align: start;
}
/* O campo é um .form-control (mesmo desenho do <x-input>); aqui só a largura. */
.swal-zero7 .swal-zero7__digitar {
	width: 100%;
}
/* Confirmar destrutivo: fundo vermelho. Desligado enquanto o texto não confere —
   apagado, e sem o hover dizer que dá para clicar. */
.swal-zero7 .swal-zero7__ok.swal-zero7__ok_destrutivo {
	background-color: #dc2626;
	color: #fff;
}
.swal-zero7 .swal-zero7__ok.swal-zero7__ok_destrutivo:hover {
	background-color: #b91c1c;
}
.swal-zero7 .swal-zero7__ok.swal-zero7__ok_destrutivo:disabled {
	opacity: .45;
	cursor: not-allowed;
	background-color: #dc2626;
}
.swal-zero7 .swal-zero7__ok:hover {
	background-color: var(--accent-foreground);
}
.swal-zero7 .swal-zero7__ok:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--destak-opacity);
}
/* Fantasma: sem fundo em repouso, fundo neutro no hover — o mesmo desenho do X
   da superfície, só que com rótulo em vez de ícone. É uma saída, não a ação
   principal, e por isso não compete em peso visual com "Concluir". */
.swal-zero7 .swal-zero7__fechar {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--muted-foreground);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.swal-zero7 .swal-zero7__fechar:hover {
	background-color: var(--muted);
	color: var(--foreground);
}
.swal-zero7 .swal-zero7__fechar:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--destak-opacity);
}
/* X fantasma no canto da SUPERFÍCIE, não da casca: o título começa a 20px da
   borda do popup (6 da casca + 14 do respiro da superfície), e o ícone de 24px
   centrado nessa linha nasce praticamente no mesmo 20. */
.swal-zero7 .swal-zero7__close {
	position: absolute;
	top: 20px;
	inset-inline-end: 20px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background-color: transparent;
	color: var(--muted-foreground);
	font-size: 0;
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.swal-zero7 .swal-zero7__close:hover,
.swal-zero7 .swal-zero7__close:focus-visible {
	background-color: var(--muted);
	color: var(--foreground);
	outline: none;
}
.swal2-popup.swal2-toast .swal2-title {
	font-size: 16px !important;
}
/* O desfoque é do fundo do modal (véu compartilhado); desfocar aqui também borrava duas vezes. */
.modal {
	backdrop-filter: none;
}
@media only screen and (max-width: 768px) {

	.mobile-menu {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row-reverse;
		gap: 16px;
	}

	.logo {
		width: auto;
	}
}
/* O escurecimento do modal é o fundo dele (.modal-backdrop, o véu compartilhado). Um `rgba(0, 0, 0, .6)` aqui,
   no próprio .modal, empilhava um segundo véu chapado por cima do vidro. */
.modal {
	background-color: transparent;
}
/* ==========================================================================
   Seletor de data (jquery.datetimepicker, XDSoft) com a cara do DatePicker do Kumo
   Só aparência: a lib, o JS e o formato dd/mm/aaaa ficam como estão. O Kumo desenha
   um painel com cabeçalho "Mês Ano" à esquerda e setas contornadas à direita, e a
   grade de dias sem régua nenhuma — cada dia é um quadrado arredondado de 36px.
   As cores saem dos tokens de campo (--campo-*), então claro e escuro vêm juntos.
   Os !important são para vencer os da própria lib (bordas, hover e fundos).
   ========================================================================== */
.xdsoft_datetimepicker {
	padding: 6px !important;
	border: 1px solid var(--border) !important;
	border-radius: 12px;
	background: var(--campo-fundo) !important;
	color: var(--campo-texto) !important;
	font-family: inherit !important;
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06) !important;
}
body.dark .xdsoft_datetimepicker {
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6) !important;
}
/* 7 colunas de 32px: a mesma largura de 224px da lib, agora sem a régua. Com
   36px o calendário ficava maior que o campo que o abre. */
.xdsoft_datetimepicker .xdsoft_datepicker {
	float: none;
	width: 224px;
	margin-left: 0;
}
/* --- cabeçalho: "Setembro 2026" à esquerda, ‹ › à direita ----------------- */
.xdsoft_datetimepicker .xdsoft_monthpicker {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	margin-bottom: 6px;
}
.xdsoft_datetimepicker .xdsoft_label {
	float: none;
	width: auto;
	padding: 0 0 0 6px !important;
	background: transparent !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 28px;
	color: var(--campo-texto) !important;
	text-align: start;
}
.xdsoft_datetimepicker .xdsoft_label.xdsoft_month { order: 1; }
.xdsoft_datetimepicker .xdsoft_label.xdsoft_year { order: 2; margin-left: 4px; }
/* O mês e o ano continuam clicáveis para abrir a lista; a setinha do sprite
   que indicava isso some, e o sublinhado do hover da lib também. */
.xdsoft_datetimepicker .xdsoft_label i {
	display: none;
}
.xdsoft_datetimepicker .xdsoft_label:hover > span {
	text-decoration: none;
	opacity: .7;
}
/* O Kumo não tem o botão "hoje" (a casinha): o dia de hoje já vem em azul. */
.xdsoft_datetimepicker .xdsoft_today_button {
	display: none !important;
}
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next {
	position: relative;
	float: none;
	width: 24px;
	height: 24px;
	border: 1px solid var(--campo-anel) !important;
	border-radius: 6px;
	background: transparent none !important;
	opacity: 1;
	color: var(--campo-texto);
	filter: none !important;
}
.xdsoft_datetimepicker .xdsoft_prev { order: 3; margin-left: auto; }
.xdsoft_datetimepicker .xdsoft_next { order: 4; }
.xdsoft_datetimepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_next:hover {
	background-color: var(--accent) !important;
}
/* Chevron em máscara: pinta com a cor do texto, então vale nos dois temas sem
   o `filter: invert` que o sprite PNG da lib precisava no escuro. */
.xdsoft_datetimepicker .xdsoft_prev::before,
.xdsoft_datetimepicker .xdsoft_next::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--seta-calendario) center / contain no-repeat;
	mask: var(--seta-calendario) center / contain no-repeat;
}
.xdsoft_datetimepicker .xdsoft_prev {
	--seta-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
.xdsoft_datetimepicker .xdsoft_next {
	--seta-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
/* Lista de meses e anos que abre ao clicar no rótulo. */
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
	top: 30px;
	padding: 4px;
	border: 1px solid var(--border) !important;
	border-radius: 10px;
	background: var(--campo-fundo) !important;
	box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .25);
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
	padding: 6px 10px !important;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--campo-texto);
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
	background: var(--accent) !important;
	color: var(--campo-texto) !important;
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
	background: var(--campo-texto) !important;
	color: var(--campo-fundo) !important;
	box-shadow: none !important;
	font-weight: 500;
}
/* --- grade de dias ------------------------------------------------------- */
.xdsoft_datetimepicker .xdsoft_calendar table {
	border-collapse: separate;
	border-spacing: 0 2px;
}
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
	height: 30px;
	border: 0 !important;
	border-radius: 6px;
	background: transparent !important;
	font-size: 13px;
	text-align: center;
	color: var(--campo-texto) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td > div {
	padding: 0;
}
/* Dias da semana: rótulo, não dado — menor, peso médio, no tom apagado. */
.xdsoft_datetimepicker .xdsoft_calendar th {
	height: 26px;
	font-size: 12px;
	font-weight: 500;
	color: var(--muted-foreground) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
	opacity: 1;
	color: var(--campo-placeholder) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
	color: var(--accent-blue) !important;
	font-weight: 600;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover {
	background: var(--accent) !important;
	color: var(--campo-texto) !important;
	box-shadow: none !important;
}
/* Dia escolhido: preenchido na cor do texto. Sem anel — o preenchimento já
   marca a escolha. O `box-shadow: none` também apaga a sombra azul interna
   que a própria lib põe no dia atual. */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current:hover,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default {
	background: var(--campo-texto) !important;
	color: var(--campo-fundo) !important;
	font-weight: 500;
	box-shadow: none !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover {
	opacity: .35;
	background: transparent !important;
	cursor: not-allowed;
}
/* Coluna de horas do .datetimepicker (com horário): mesmas cores. */
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
	border: 1px solid var(--border) !important;
	border-radius: 8px;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
	border-color: var(--border) !important;
	background: transparent !important;
	color: var(--campo-texto) !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
	background: var(--accent) !important;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
	background: var(--campo-texto) !important;
	color: var(--campo-fundo) !important;
	box-shadow: none !important;
}
.nav.nav-pills.nav-pills-daterange {
	width: 100% !important;
	justify-content: space-between !important;
}
.nav-pills .nav-link {
	color: var(--muted-foreground);
	background-color: var(--tertiary);
	font-weight: 500;
	font-size: .875rem;
	line-height: 1.25rem;
	padding: 6px 18px;
	border-radius: calc(var(--radius) - 2px);
	white-space: nowrap;
	justify-content: center;
	align-items: center;
	display: inline-flex;
}
.nav-pills .nav-link.active {
	--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	color: var(--foreground);
	background-color: var(--background);
	font-weight: 500;
	font-size: .875rem;
	line-height: 1.25rem;
	padding: 6px 18px;
	border-radius: 8px;
	white-space: nowrap;
	justify-content: center;
	align-items: center;
	display: inline-flex;
}
/* Teto de altura no desktop: object-fit: cover recorta pelas bordas em vez de achatar a arte. Só a partir de
   744px: abaixo disso quem aparece é a imagem mobile (.sm-visible), na proporção natural dela.
   O piso de 250px não veio da Zero7 Brasil: é o que título e descrição em duas linhas mais o botão ocupam.
   Com a sidebar aberta, perto de 800px de janela a arte de 2816 x 700 ficava com ~120px de altura e cortava
   o título e o botão; com o piso, quem cede são as bordas laterais da arte. */
@media (min-width: 744px) {
	.embla--banners .embla__slide img {
		min-height: 250px;
		max-height: 350px;
		object-fit: cover;
		object-position: center;
	}
}
/* Loader de requisição (MostrarLoad/PararLoad em requisicaoformulario.js).
   A logo reduzida da Zero7 no centro, vazada: o contorno apagado respirando e
   um traço de luz dando a volta nele — lê como "trabalhando" já no primeiro
   quadro, sem esperar um ciclo de desenho terminar. Entra e sai em fade.

   O véu é o compartilhado dos backdrops (ver "Véu dos fundos"): vidro fosco com
   blur e um degradê de preto de 10% a 15%, que segue o tema. */
#loader-wrapper.carregamento {
	position: fixed;
	inset: 0;
	z-index: 2147483100;
	display: grid;
	place-items: center;
	color: var(--foreground);
	opacity: 1;
	visibility: visible;
	transition: opacity .2s ease-out, visibility 0s linear 0s;
}
/* Saída: o fade roda e só depois o véu some de vez (visibility com atraso),
   senão ele continuaria bloqueando clique enquanto some. */
#loader-wrapper.carregamento.stoped {
	opacity: 0;
	visibility: hidden;
	transform: none;
	transition: opacity .2s ease-out, visibility 0s linear .2s;
}
.carregamento__logo {
	width: 64px;
	height: auto;
	overflow: visible;
}
.carregamento__base {
	fill: none;
	stroke: currentColor;
	stroke-width: 22;
	stroke-linejoin: round;
	opacity: .18;
	animation: carregamento-respiro 1.6s ease-in-out infinite;
}
/* 22 unidades do viewBox ≈ 1,5px na logo de 64px. O dash cobre um quarto do
   contorno e dá a volta inteira a cada ciclo. */
.carregamento__traco {
	fill: none;
	stroke: currentColor;
	stroke-width: 22;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: .24 .76;
	stroke-dashoffset: 1;
	animation: carregamento-traco 1.6s linear infinite;
}
@keyframes carregamento-traco {
	to { stroke-dashoffset: 0; }
}
@keyframes carregamento-respiro {
	0%, 100% { opacity: .18; }
	50% { opacity: .32; }
}
/* Sem movimento: o traço para (fica o contorno inteiro) e só o contorno de
   fundo respira — opacidade não é deslocamento, ainda indica que algo está rodando. */
@media (prefers-reduced-motion: reduce) {
	.carregamento__traco {
		animation: none;
		stroke-dasharray: none;
		opacity: .5;
	}
}
/* =============================================================================
   Área do Trader no painel: campos obrigatórios

   .field-required vai no invólucro do campo (a prop class dos componentes de formulário cai nele) e põe o
   asterisco no rótulo. .field-invalid é marcado pelo script das telas (painel/area-trader/partials/
   required-fields) quando o envio encontra o campo vazio. O vermelho é o --bs-danger: o --destructive do
   tema escuro é um vermelho de fundo de botão, escuro demais para texto e contorno finos.
   ============================================================================= */
.field-invalid .form-control {
	box-shadow: 0 0 0 1px var(--bs-danger) !important;
}
.bg-white-login {
    min-height: 100vh;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* Switch na geometria do Kumo: trilho de 36x18 e polegar quadrado de 18, não a
   pílula de 44x25 que havia aqui. O raio é o do original — 5px, que vira
   squircle de 10px onde o navegador suporta `corner-shape`. */
.switch .switch-wrapper {
	display: inline-block;
	width: 36px;
	height: 18px;
	position: relative;
}
.switch .switch-wrapper .switch-button {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 5px;
	background-color: var(--muted);
	box-shadow: 0 0 0 1px var(--input);
	transition-property: background-color, box-shadow;
	transition-duration: .15s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* O polegar tem a altura inteira do trilho e desliza a própria largura, como
   no original — nada de folga de 2px, que é o que fazia o controle parecer uma
   pílula com uma bolinha dentro.

   `transform` em vez de `left` porque é a propriedade que a GPU compõe: o
   movimento fica liso mesmo com a tela cheia de campos. */
.switch .switch-wrapper .switch-button::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 5px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: var(--background);
	box-shadow: 0 0 1px .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
	transition-property: transform, background-color;
	transition-duration: .15s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.switch .switch-wrapper input:checked+.switch-button {
	background-color: var(--accent-blue);
	box-shadow: 0 0 0 1px var(--accent-blue);
}
.switch .switch-wrapper input:checked+.switch-button::before {
	transform: translateX(18px);
	background-color: var(--white);
}
.switch .switch-wrapper input:focus-visible+.switch-button {
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ring) 50%, transparent);
}
/* Squircle onde houver suporte: é o detalhe que diferencia o controle do Kumo
   de um retângulo arredondado comum. */
@supports (corner-shape: squircle) {
	.switch .switch-wrapper .switch-button,
	.switch .switch-wrapper .switch-button::before {
		border-radius: 10px;
		corner-shape: squircle;
	}
}
@media (prefers-reduced-motion: reduce) {
	.switch .switch-wrapper .switch-button,
	.switch .switch-wrapper .switch-button::before {
		transition: none;
	}
}
/* Busca dentro do menu: é um campo, então usa a régua de campo. */
.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 32px !important;
	padding: 6px 10px !important;
	border: none !important;
	border-radius: 6px;
	background-color: var(--tertiary) !important;
	color: var(--secondary-foreground) !important;
	box-shadow: 0 0 0 1px var(--input) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ring) 50%, transparent) !important;
}
/* Opção sob o cursor ou navegada pelo teclado: o mesmo realce, porque as duas
   coisas significam "é esta que você vai escolher". */
.form-group .select2-container {
	width: 100% !important;
}
/* ---- Select2 múltiplo (`select2-campo`, posto pelo main.js) -------------------

   O campo é o select nativo (.form-control), sem tirar nem pôr: mesmo fundo,
   anel de 1px, foco de 1.5px, raio 8px, 36px de altura e o CaretUpDown à
   direita. Dentro dele fica só a busca. Os escolhidos saem do campo e viram
   badges logo abaixo (.select-fichas, desenhadas pelo main.js): dentro, eles
   empilhavam e o campo crescia sem limite.

   O menu é a superfície do layer-card: fundo de cartão, anel --input e o raio
   do sistema.

   Tudo com escopo na classe: o Select2 de escolha única das outras telas fica
   como está. O `!important` vem das regras genéricas acima, que já usam. */
.select2-selection.select2-campo {
	display: flex !important;
	align-items: center;
	height: 36px;
	padding: 0 36px 0 12px !important;
	border: none !important;
	border-radius: 8px !important;
	background-color: var(--campo-fundo) !important;
	background-image: var(--campo-seta) !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px !important;
	box-shadow: 0 0 0 1px var(--campo-anel) !important;
	cursor: pointer;
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
/* O 9999 do .select2-container (lá em cima) é para o menu, que vai ao <body>.
   No campo ele punha o select por cima do cabeçalho fixo ao rolar a página. */
.select2-container:has(> .selection > .select2-campo) {
	z-index: auto !important;
}
.select2-container--focus .select2-selection.select2-campo,
.select2-container--open .select2-selection.select2-campo {
	box-shadow: 0 0 0 1.5px var(--campo-foco) !important;
}
.select2-container--disabled .select2-selection.select2-campo {
	cursor: not-allowed;
	opacity: .6;
}
/* Os escolhidos não aparecem no campo: estão nas badges abaixo. */
.select2-selection.select2-campo .select2-selection__rendered {
	display: none !important;
}
.select2-selection.select2-campo .select2-search--inline {
	flex: 1 1 auto;
	min-width: 0;
}
/* A busca no tamanho e nas cores do texto do campo, sem moldura própria. A
   largura vem do Select2 em estilo inline, conforme o que foi digitado; aqui
   ela é o campo inteiro. O seletor longo vence o `form .form-group` lá de
   cima, que punha 18px e um placeholder escuro fixo. */
.select2-selection.select2-campo .select2-search__field {
	width: 100% !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	color: var(--campo-texto) !important;
	font-family: inherit !important;
	font-size: .875rem !important;
	line-height: 20px !important;
	white-space: nowrap;
	overflow: hidden;
	resize: none;
}
.select2-selection.select2-campo .select2-search__field::placeholder {
	padding-left: 0 !important;
	color: var(--campo-placeholder) !important;
	font-family: inherit !important;
	font-size: .875rem !important;
	line-height: 20px !important;
	opacity: 1;
}
/* Escolha única (`menu` no x-select): o escolhido fica no próprio campo, como no
   select nativo. A seta do Select2 sai: o CaretUpDown do campo já está lá. */
.select2-selection--single.select2-campo .select2-selection__rendered {
	display: block !important;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 !important;
	color: var(--campo-texto) !important;
	font-size: .875rem;
	line-height: 20px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.select2-selection--single.select2-campo .select2-selection__placeholder {
	color: var(--campo-placeholder) !important;
}
.select2-selection--single.select2-campo .select2-selection__arrow {
	display: none !important;
}
/* Os escolhidos, abaixo do campo. Nenhum escolhido, nenhuma caixa. */
.select-fichas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.select-fichas:empty {
	display: none;
}
.select-ficha {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 100%;
	height: 26px;
	padding: 0 3px 0 10px;
	border-radius: 6px;
	background-color: var(--tertiary);
	box-shadow: 0 0 0 1px var(--border);
	color: var(--foreground);
	font-size: 13px;
	font-weight: 500;
	line-height: 26px;
}
.select-ficha__nome {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.select-ficha__remover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
	transition: background-color .1s, color .1s;
}
.select-ficha__remover svg {
	width: 14px;
	height: 14px;
}
.select-ficha__remover:hover,
.select-ficha__remover:focus-visible {
	background-color: var(--muted);
	color: var(--foreground);
	outline: none;
}
.select2-dropdown.select2-campo {
	overflow: hidden;
	padding: 4px;
	border: none !important;
	border-radius: var(--radius) !important;
	background-color: var(--card) !important;
	box-shadow: 0 0 0 1px var(--input), 0 12px 24px -8px rgba(0, 0, 0, .25) !important;
}
body.dark .select2-dropdown.select2-campo {
	box-shadow: 0 0 0 1px var(--input), 0 12px 24px -8px rgba(0, 0, 0, .6) !important;
}
/* 6px de folga entre o campo e o menu, para o anel de um não encostar no do outro. */
.select2-dropdown--below.select2-campo {
	margin-top: 6px;
}
.select2-dropdown--above.select2-campo {
	margin-top: -6px;
}
.select2-dropdown.select2-campo .select2-results > .select2-results__options {
	max-height: 264px;
}
.select2-dropdown.select2-campo .select2-results__option {
	position: relative;
	padding: 7px 32px 7px 10px;
	border-radius: 6px;
	background-color: transparent !important;
	color: var(--foreground) !important;
	font-size: .875rem;
	line-height: 1.25rem;
	transition: background-color .1s;
}
/* Sob o cursor ou pelo teclado: o mesmo realce, porque os dois querem dizer
   "é esta que você vai marcar". */
.select2-dropdown.select2-campo .select2-results__option--highlighted,
.select2-dropdown.select2-campo .select2-results__option--selectable:hover {
	background-color: var(--muted) !important;
	color: var(--foreground) !important;
}
/* A marcada leva o check à direita, e não um fundo: com fundo, ela e a opção sob
   o cursor ficavam iguais. */
.select2-dropdown.select2-campo .select2-results__option--selected::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* "Nada encontrado": recado, não opção. */
.select2-dropdown.select2-campo .select2-results__message {
	padding: 10px;
	color: var(--muted-foreground) !important;
	cursor: default;
}
/* ---- Scroll fade (o `scroll-fade` do shadcn/ui, feito aqui) -------------------

   Uma lista que rola some suave nas bordas onde ainda há conteúdo: no começo
   depois que se rolou, no fim enquanto falta rolar. Diz "tem mais" sem barra
   nem seta.

   É uma máscara em degradê cujas duas pontas (--fade-inicio, --fade-fim) vão
   de 0 a --fade-tamanho. Quem as move é a própria rolagem, por scroll-driven
   animation: a do começo cresce nos primeiros pixels rolados, a do fim some
   nos últimos. Lista que não rola não tem linha do tempo, a animação não roda
   e as pontas ficam em 0 — sem fade nenhum, sem precisar perguntar.

   As duas pontas são @property para poderem ser animadas como medida. Onde
   não há scroll-driven animation (Firefox), o main.js escreve as mesmas duas
   variáveis no evento de rolagem.

   `scroll-fade` para rolagem vertical, `scroll-fade-x` para horizontal (a
   faixa de abas do Shop). A lista do Select2 múltiplo entra pelo seletor. */
@property --fade-inicio {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --fade-fim {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
.scroll-fade,
.select2-dropdown.select2-campo .select2-results > .select2-results__options {
	--fade-tamanho: 32px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-inicio), #000 calc(100% - var(--fade-fim)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-inicio), #000 calc(100% - var(--fade-fim)), transparent 100%);
}
.scroll-fade-x {
	--fade-tamanho: 32px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-inicio), #000 calc(100% - var(--fade-fim)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-inicio), #000 calc(100% - var(--fade-fim)), transparent 100%);
}
/* Fade num invólucro que não rola, lendo a rolagem do filho direto — para quando
   a máscara não pode ir no próprio elemento (a faixa de abas do Shop: ela
   apagaria o anel do .abas, que é desenhado por fora da caixa). A timeline do
   filho sobe até o invólucro por timeline-scope. */
.scroll-fade-x_filho {
	timeline-scope: --scroll-fade-filho;
}
.scroll-fade-x_filho > * {
	scroll-timeline: --scroll-fade-filho inline;
}
@supports (animation-timeline: scroll()) {
	.scroll-fade-x.scroll-fade-x_filho {
		animation-timeline: --scroll-fade-filho, --scroll-fade-filho;
	}
}
@supports (animation-timeline: scroll()) {
	.scroll-fade,
	.select2-dropdown.select2-campo .select2-results > .select2-results__options {
		animation: scroll-fade-inicio linear both, scroll-fade-fim linear both;
		animation-timeline: scroll(self), scroll(self);
		animation-range: 0 var(--fade-tamanho), calc(100% - var(--fade-tamanho)) 100%;
	}

	.scroll-fade-x {
		animation: scroll-fade-inicio linear both, scroll-fade-fim linear both;
		animation-timeline: scroll(self inline), scroll(self inline);
		animation-range: 0 var(--fade-tamanho), calc(100% - var(--fade-tamanho)) 100%;
	}
}
@keyframes scroll-fade-inicio {
	from { --fade-inicio: 0px; }
	to { --fade-inicio: var(--fade-tamanho); }
}
@keyframes scroll-fade-fim {
	from { --fade-fim: var(--fade-tamanho); }
	to { --fade-fim: 0px; }
}
/* `auto`, não `scroll`: com `scroll` a barra ocupava espaço mesmo sem nada
   para rolar (no macOS com mouse, a barra clássica reserva ~15px), e os itens
   paravam antes da borda direita do menu. */
.box-dropdown-select {
	max-height: 170px;
	overflow-x: hidden !important;
	overflow-y: auto;
}
.guiide {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(255,255,255);
    background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--background) 10%);
    background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--background) 10%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--background) 10%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
    padding: 0 0 0 .5rem;
}
/* -------------- Novo gráfico tela admin (se der pau, alterem aqui). -------------- */
body.dark #chartDiv text {
	fill: white !important;
}
body:not(.dark) #chartDiv text {
	fill: black !important;
}
/* ==========================================================================
   Notice — avisos de status (ex.: recebedor / KYC no perfil)
   ========================================================================== */
.notice {
	display: flex;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--border);
	border-left-width: 3px;
	border-radius: var(--radius);
	background-color: var(--card);
}
/* Chip: pílula com fundo tingido, anel 1px do mesmo tom e ícone à esquerda.
   O anel é o que separa o chip do fundo sem precisar de alpha alto — sem ele o
   badge some em superfícies escuras e parece "chapado". */
.notice-badge {
	display: flex;
	align-items: center;
	width: fit-content;
	gap: 8px;
	padding: 6px 12px 6px 10px;
	border: none !important;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	vertical-align: middle;
}
/* Com ícone na frente, 6px à esquerda: o ícone é redondo e encosta na curva da
   pílula; com 10px ele flutuava longe da borda e o chip parecia descentrado.
   Só texto ("Verificada") mantém os 10px — com 6px a palavra colava na borda.
   `svg` cobre o Lucide, que troca o <i data-lucide> por <svg> ao carregar. */
.notice-badge:has(> :is(i, svg, img):first-child) {
	padding-left: 6px;
}
.notice-badge i,
.notice-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	stroke-width: 2;
}
/* Phosphor é fonte, não SVG: `width`/`height` da regra acima não pautam o
   tamanho do glifo, quem pauta é `font-size`. Sem esta regra o ícone nascia no
   tamanho do texto ao redor em vez do mesmo 14px que o Lucide usa aqui perto.
   `.ph` é o traço regular, que as setas usam (phosphorIconClass). */
.notice-badge .ph-fill,
.notice-badge .ph {
	width: auto;
	height: auto;
	font-size: 14px;
	line-height: 1;
}
/* Pendência que ainda pode ser resolvida — âmbar, no mesmo matiz do
   .notice-badge-warning que já convive com ela dentro do bloco. Fica entre o
   informativo e a recusa: nem "está tudo certo", nem "acabou". */
body.dark .notice-brand {
	background-color: rgba(0, 60, 129, 0.16);
}
/* Cada tom é uma tríade do mesmo matiz: preenchimento discreto, anel um pouco
   mais forte e texto vivo. Os matizes são vivos de propósito — o --green do tema
   (#008932) é escuro demais para ler sobre o próprio tingido no dark. */
.notice-badge-info {
	background-color: rgba(59, 130, 246, .16);
	border-color: rgba(59, 130, 246, .34);
	color: #60a5fa;
}
.notice-badge-warning {
	background-color: rgba(245, 158, 11, .16);
	color: #fbbf24;
	border-color: rgba(245, 158, 11, .34);
}
.notice-badge-success {
	background-color: rgba(34, 197, 94, .16);
	border-color: rgba(34, 197, 94, .34);
	color: #4ade80;
}
.notice-badge-danger {
	background-color: rgba(239, 68, 68, .16);
	border-color: rgba(239, 68, 68, .34);
	color: #f87171;
}
/* Tom neutro, para marcadores sem carga semântica. */
.notice-badge-neutral {
	background-color: rgba(113, 113, 122, .18);
	border-color: rgba(113, 113, 122, .34);
	color: var(--muted-foreground);
}
/* No claro os matizes vivos perdem contraste sobre o tingido claro: escurece só
   o texto, mantendo preenchimento e anel. */
body:not(.dark) .notice-badge-info    { color: #1d4ed8; }
body:not(.dark) .notice-badge-warning { color: #b45309; }
body:not(.dark) .notice-badge-success { color: #15803d; }
body:not(.dark) .notice-badge-danger  { color: #b91c1c; }
.notice-badge-muted {
	background-color: rgba(113, 113, 122, 0.16);
	color: #71717a;
}
@media (max-width: 575.98px) {
	.notice {
		padding: 16px;
		gap: 12px;
	}
}
/* ==========================================================================
   LayerCard
   Tradução do LayerCard do Kumo (Cloudflare) para HTML + CSS, sem JS.

   Dois modos, como no original:

   - Superfície (.layer-card-surface): um cartão só, plano.
   - Em camadas (.layer-card): moldura na superfície CLARA do tema, com uma
     faixa de cabeçalho e, encostado nela, o conteúdo na superfície ESCURA e
     com anel próprio.

   A camada nasce de três coisas, e tirar qualquer uma achata o efeito: a
   moldura usa --tertiary e o conteúdo usa --card (no claro a ordem se
   inverte sozinha, porque os dois tokens viram quase branco); o cabeçalho
   tem padding vertical menor que o do conteúdo — é o `-my-2` sobre `p-4` do
   Kumo, escrito aqui direto como 8px; e o anel é box-shadow, não border,
   senão o conteúdo ficaria 2px mais estreito que a moldura e a costura
   apareceria torta.
   ========================================================================== */
.layer-card {
	display: flex;
	width: 100%;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--tertiary);
	box-shadow: 0 0 0 1px var(--border);

	/* A escala do Kumo é mais densa que a nossa: lá `text-base` vale 14px e
	   `text-sm` vale 13px, não 16 e 14. O componente inteiro herda daqui, que é
	   onde o original põe o `text-base`. Filho com f-size- próprio continua
	   mandando no tamanho dele. */
	font-size: 14px;
}
/* Modo superfície: sem faixa, sem camada — o mesmo cartão de sempre, aqui só
   para o componente cobrir os dois casos do original. */
.layer-card-surface {
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--card);
	box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, .06);
}
/* Lado a lado, os dois cartões têm alturas diferentes; `h-100` na peça faz os
   dois terminarem na mesma linha em vez de um flutuar mais curto. */
.layer-card.h-100 {
	height: 100%;
}
/* E a superfície de conteúdo acompanha: esticar só a moldura deixava o cartão
   mais curto com a parte escura parando no meio e a moldura seguindo sozinha até
   embaixo. O `flex: 1` faz o conteúdo ocupar o que sobra. */
.layer-card.h-100 .layer-card-primary {
	flex: 1 1 auto;
}
/* Em coluna estreita o título e o botão do cabeçalho não cabem na mesma linha:
   deixa quebrar e devolve o respiro entre eles. */
.layer-card-secondary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	/* 12px na vertical, não os 8px do Kumo.

	   Lá o cabeçalho é `p-4` com `-my-2`: 16px de padding com 8px comidos pelo
	   recorte em cima e pela superfície de conteúdo embaixo, o que sobra são 8px
	   e uma faixa de ~35px. Na nossa largura de cartão, que é a página inteira e
	   não uma coluna de 250px, essa faixa fica fina demais para o rótulo — ele
	   encosta na borda. 12px devolvem o respiro sem virar cabeçalho de seção:
	   ainda é metade do respiro do conteúdo, que tem 16px+12px por dentro.

	   A faixa mede 40px, com ou sem botão. Quem manda na altura é o RÓTULO — 21px
	   de linha mais 8px de respiro em cima e embaixo —, e o botão foi encolhido
	   até caber nessa medida em vez de esticá-la. Antes o cabeçalho com ação
	   ficava 7px mais gordo, e com dois cartões lado a lado o degrau aparecia na
	   emenda com a superfície de conteúdo.

	   `min-height`, e não `height`: na coluna estreita o cabeçalho quebra em duas
	   linhas, e aí ele precisa crescer em vez de cortar. */
	min-height: 40px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted-foreground);
}
/* Botão de apoio no cabeçalho do cartão: menor que o `sm` do componente, que
   ainda era alto demais ao lado de um rótulo de 14px.

   O `!important` aqui não é preguiça: o botão já carrega `.h-9` (altura com
   `!important`) e `.py-1\.5`/`.px-2` (padding idem) do próprio componente. Sem
   ele, a altura e o respiro antigos continuavam vencendo e a classe não mudava
   nada. Fonte e raio entram junto para o conjunto não ficar meio aplicado. */
.btn.btn-compacto {
	position: relative;
	height: 24px !important;
	min-height: 24px !important;
	padding: 0 10px !important;
	font-size: 12.5px !important;
	border-radius: 6px !important;
}
/* 24px é pouco para o dedo. A área de toque cresce por um pseudo-elemento
   invisível, então o alvo fica com ~40px sem o botão engordar a faixa — mesmo
   truque que o Kumo usa no checkbox. */
.btn.btn-compacto::after {
	content: "";
	position: absolute;
	inset: -8px -6px;
}
/* Sem `gap`: o do Kumo (8px) somava em cima do espaçamento que cada conteúdo
   já traz (o mt-3 dos campos, o padding das linhas, as margens das listas) e
   abria um respiro a mais em todo cartão. Quem precisa de distância entre
   blocos declara a própria. */
.layer-card-primary {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	padding: 16px 12px 16px 16px;
	background-color: var(--card);
	color: var(--card-foreground);
	box-shadow: 0 0 0 1px var(--input);
}
/* ==========================================================================
   Inclinação 3D (transitions.dev — "3D tilt")
   O cartão gira em direção ao ponteiro e tem um brilho que acompanha o cursor.
   Tudo o que desenha está aqui; o JS só escreve quatro variáveis e duas
   classes, porque posição de ponteiro é a única coisa que CSS não sabe ler.
   Tokens com os valores originais da referência.
   ========================================================================== */
:root {
	--tilt-perspective: 1000px;
	--tilt-return: 1000ms;
	--tilt-return-ease: cubic-bezier(.16, 1, .3, 1);
	--tilt-follow: 400ms;
	--tilt-follow-ease: cubic-bezier(.16, 1, .3, 1);
	--tilt-glare-opacity: .32;
	--tilt-glare-fade: 300ms;
	--tilt-glare-ease: cubic-bezier(.16, 1, .3, 1);
}
/* O brilho é luz somada (`screen`), então a mesma opacidade que no tema claro
   mal aparece vira um borrão branco sobre a superfície escura. No escuro ele
   entra com menos da metade da força: o suficiente para a peça acender por
   baixo do cursor sem lavar a cor do cartão. */
body.dark {
	--tilt-glare-opacity: .06;
}
/* A moldura externa é a área de captura e NUNCA gira — girar o próprio alvo do
   ponteiro cria realimentação: o elemento foge do cursor e treme.
   `touch-action: none` deixa o dedo inclinar em vez de rolar a página. */
.t-tilt {
	touch-action: none;
}
.t-tilt-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	transform:
		perspective(var(--tilt-perspective))
		rotateX(var(--tilt-rx, 0deg))
		rotateY(var(--tilt-ry, 0deg));
	transform-style: preserve-3d;
	transition: transform var(--tilt-return) var(--tilt-return-ease);
	will-change: transform;
}
/* Enquanto o ponteiro anda, a volta lenta dá lugar a um acompanhamento curto —
   é o que faz o cartão colar no cursor em vez de vir arrastado. */
.t-tilt-card.is-tilting {
	transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}
/* Brilho: três círculos moles somados como luz (blend `screen`) na posição do
   ponteiro. */
.t-tilt.is-hover .t-tilt-glare {
	opacity: var(--tilt-glare-opacity);
}
@media (prefers-reduced-motion: reduce) {
	.t-tilt-card {
		transform: none !important;
		transition: none !important;
	}
}
/* A peça ocupa a altura que sobra do cartão em vez de terminar no meio e deixar
   um bloco de vazio embaixo. A cadeia toda precisa esticar: a superfície de
   conteúdo já estica por `.layer-card.h-100`, e daqui para baixo vem a moldura
   do ponteiro e a credencial. `min-height: 0` porque filho de flex não encolhe
   abaixo do conteúdo sem isso. */
.layer-card-primary > .t-tilt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.t-tilt > .credencial {
	flex: 1 1 auto;
}
.credencial {
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* Piso de altura para a peça continuar com proporção de cartão quando não
	   houver um irmão mais alto para acompanhar. */
	min-height: 196px;
	padding: 16px;
	/* Cor da casa, uma variável só: dela saem o corpo da peça, a textura e o anel.
	   Casa sem cor listada abaixo cai no cinza do tema, e a peça continua legível
	   em vez de nascer sem fundo. */
	--marca: var(--muted-foreground);
	--marca-luz: color-mix(in oklab, var(--marca) 45%, white);
	background:
		/* Textura: dois feixes de anéis concêntricos de origens diferentes, no tom
		   claro da marca. Onde eles se cruzam nasce o moiré que dá o ar de guilhochê
		   de cartão impresso — sem imagem nenhuma, só gradiente repetido. */
		repeating-radial-gradient(circle at 82% 26%,
			color-mix(in oklab, var(--marca-luz) 13%, transparent) 0 1px,
			transparent 1px 8px),
		repeating-radial-gradient(circle at 14% 92%,
			color-mix(in oklab, var(--marca-luz) 8%, transparent) 0 1px,
			transparent 1px 12px),
		/* Corpo: a marca inteira, clareando em cima e escurecendo até embaixo.
		   Os três pontos do degradê não são gosto: o topo em 70% é o mais claro que
		   as casas AMARELAS (Binance, Bybit) suportam com texto branco em 15px —
		   acima disso o nome da corretora cai de 4,5:1. Quem manda no teto é a casa
		   mais clara, senão precisaria de um tom de texto por marca. */
		linear-gradient(158deg,
			color-mix(in oklab, var(--marca) 70%, black) 0%,
			color-mix(in oklab, var(--marca) 52%, black) 44%,
			color-mix(in oklab, var(--marca) 32%, black) 100%);
	/* A peça não muda com o tema: cartão é objeto, e objeto tem a cor que tem. */
	color: #fff;
	box-shadow:
		inset 0 1px 0 color-mix(in oklab, var(--marca-luz) 34%, transparent),
		0 0 0 1px color-mix(in oklab, var(--marca) 55%, black),
		0 12px 28px -16px rgba(0, 0, 0, .7);
}
/* Tudo o que escreve na peça passa a ser branco: o fundo agora é a cor da casa
   nos dois temas, e os tokens de texto do tema (que assumem fundo neutro)
   sumiriam num caso ou no outro. */
.credencial .credencial__conta,
.credencial .credencial__endereco {
	color: #fff;
}
.credencial .credencial__titular {
	color: rgba(255, 255, 255, .72);
	opacity: 1;
}
.credencial .wallet-id__marca {
	color: #fff;
}
/* Etiquetas sobre a peça: vidro fosco em vez de cor própria. A cor da rede e a
   de fundo do status brigariam com a da casa, e nenhuma das três venceria.
   O terceiro seletor não é redundante: os tons claros do .notice-badge vêm de
   regras `body:not(.dark) .notice-badge-*`, mais específicas que duas classes.
   Sem igualar a especificidade, o status voltaria à cor do tema no modo claro. */
.credencial .wallet-id__rede,
.credencial .notice-badge,
body:not(.dark) .credencial .notice-badge {
	background-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .82);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.credencial .wallet-id__rede {
	color: #fff;
}
/* Verificada ou não é informação de segurança, então ela não pode viver só no
   texto: o tom claro sobrevive sobre qualquer cor de casa, ao contrário do
   verde e do âmbar cheios que o selo usa fora daqui. */
.credencial .notice-badge-success,
body:not(.dark) .credencial .notice-badge-success {
	color: #bbf7d0;
}
.credencial .notice-badge-warning,
body:not(.dark) .credencial .notice-badge-warning {
	color: #fef08a;
}
/* Cores das casas que o cadastro aceita hoje (ExternalWalletAccount). O banho
   nasce no canto de cima e morre antes de chegar no endereço, que fica embaixo:
   a peça se reconhece pela cor de longe e o dado crítico continua sobre fundo
   neutro. */
.credencial[data-marca="foxbit"]   { --marca: #ff6e00; }
.credencial[data-marca="binance"]  { --marca: #f3ba2f; }
.credencial[data-marca="bybit"]    { --marca: #f7a600; }
.credencial[data-marca="coinbase"] { --marca: #0052ff; }
/* Status da verificação da carteira ao lado do título. Focável para o tooltip
   abrir no teclado também; o nome do status vai no aria-label. */
body.dark .credencial-secao__status_success {
	color: #4ade80;
}
body.dark .credencial-secao__status_warning {
	color: #fbbf24;
}
/* ==========================================================================
   LayerDialog
   Tradução do LayerDialog do Kumo: o mesmo princípio do LayerCard aplicado ao
   diálogo. A casca é a superfície CLARA com 6px de respiro; dentro dela flutua
   a superfície de conteúdo, escura e com anel próprio, levando cabeçalho e
   corpo; e as ações ficam FORA dela, na casca, sem borda de separação — quem
   separa é a própria superfície terminando.

   Por isso as ações não levam `border-top`: no Kumo a linha só existe na versão
   mobile, onde o rodapé fica dentro da superfície e precisa se destacar dela.
   ========================================================================== */
.modal-content.layer-dialog {
	padding: 6px;
	border: 0;
	/* 12px na casca contra 8px do conteúdo: é a soma do raio interno com o
	   respiro de 6px, arredondada. Cantos concêntricos, sem o efeito de canto
	   "espremido" que dois raios iguais produzem. */
	border-radius: 12px;
	background-color: var(--tertiary);
	box-shadow: 0 0 0 1px var(--border), 0 20px 25px -5px rgba(0, 0, 0, .28), 0 8px 10px -6px rgba(0, 0, 0, .2);
}
/* Fechar como botão fantasma: sem fundo em repouso, fundo só no hover.

   O X é redesenhado com `mask` em vez de continuar sendo a imagem de fundo do
   Bootstrap por um motivo prático: no tema escuro o projeto inverte esse botão
   inteiro com `filter: invert(1)`, e o filtro pegaria também o fundo do hover —
   o quadrado sairia claro sobre o diálogo escuro. Com máscara, glifo e fundo
   são duas propriedades independentes e cada um recebe seu token.

   Por isso o `filter: none`: ele desliga a inversão herdada do tema. */
.layer-dialog .modal-header .btn-close {
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 0;
	/* 6px, menos que os 8px dos botões do rodapé: num quadrado de 28px o mesmo
	   raio deles arredonda demais e o alvo começa a parecer uma pílula. */
	border-radius: 6px;
	background: transparent;
	filter: none;
	opacity: 1;
	transform: none;
	transition-property: background-color;
	transition-duration: .15s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.layer-dialog .modal-header .btn-close::before {
	content: "";
	width: 12px;
	height: 12px;
	background-color: var(--muted-foreground);
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
	-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 12px 12px no-repeat;
	mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 12px 12px no-repeat;
}
/* O fundo aparece no hover e no foco de teclado: quem chega pelo Tab precisa
   enxergar o mesmo alvo que o mouse revela. */
.layer-dialog .modal-header .btn-close:hover,
.layer-dialog .modal-header .btn-close:focus-visible {
	background-color: var(--muted);
}
.layer-dialog .modal-header .btn-close:hover::before,
.layer-dialog .modal-header .btn-close:focus-visible::before {
	background-color: var(--foreground);
}
/* O cabeçalho e o corpo dividem o mesmo respiro lateral de 18px — é o `px-4.5`
   do original. O corpo fecha embaixo com os mesmos 18px.

   O `!important` existe porque o componente de cabeçalho já carrega a utilitária
   `.p-0` do Bootstrap, que é `!important` na origem: sem isto o cabeçalho ficaria
   colado nas bordas da superfície. */
.layer-dialog-surface .modal-header {
	padding: 16px 18px 0 !important;
}
/* Os botões do rodapé não herdam o `mt-4` que o resto dos modais usa: aqui o
   espaçamento é do contêiner, não de cada botão. */
.layer-dialog-actions .btn {
	margin: 0;
}
/* ==========================================================================
   Banner
   Tradução do Banner do Kumo. Fundo tingido, texto no mesmo matiz, ícone à
   esquerda e ação no fim da linha.

   Os matizes são os vivos que o .notice-badge já usa, e pelo mesmo motivo:
   o --green e o --primary-brand do tema são escuros demais para ler sobre o
   próprio tingido no escuro. No claro o tingido clareia e o texto escurece.
   ========================================================================== */
.banner {
	display: flex;
	width: 100%;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: 14px;
	line-height: 1.5;
}
/* Compacto: para diálogo e espaço apertado. */
.banner-sm {
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: calc(var(--radius) - 2px);
	font-size: 13px;
}
.banner-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: 1.375em;
}
/* 1em e não um tamanho fixo: o ícone do Phosphor é uma FONTE, então ele cresce
   junto com o texto do banner e mantém a proporção nos dois tamanhos. */
.banner-icon .ph-fill,
.banner-icon .ph {
	font-size: 1em;
	line-height: 1;
}
.banner-sm .banner-icon {
	height: 1.25em;
}
/* A linha que separa texto de ação. `min-width: 0` é o que deixa o texto
   quebrar em vez de empurrar o botão para fora do banner. */
.banner-row {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.banner-sm .banner-row {
	gap: 8px;
}
.banner-content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}
/* Peso 500 e não 600: no Kumo o título do banner é `font-medium`, e em 14px o
   semibold já pesa demais ao lado da descrição. */
.banner-title {
	margin: 0;
	font-weight: 500;
	line-height: 1.375;
}
.banner-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.375;
}
/* Banner só com descrição: o texto (13px) tem linha menor que a caixa do ícone
   (1.375em de 14px = 19.25px), e o ícone descia em relação à frase. Com a
   mesma altura de linha da caixa, os dois centros coincidem — e numa descrição
   de várias linhas o ícone segue preso à primeira. */
.banner:not(.banner-sm) .banner-content > .banner-text:first-child {
	line-height: 19.25px;
}
/* Com ação ao lado, a linha tem a altura do botão e centraliza o texto nela;
   o ícone, preso ao topo, ficava acima da frase. Aqui ele centraliza junto. */
.banner:has(> .banner-row > .banner-actions) {
	align-items: center;
}
/* No compacto os dois ficam no mesmo tamanho, como no original. */
.banner-sm .banner-text {
	font-size: 13px;
}
/* Vazio de tabela centralizado: o banner alinha à esquerda por padrão, que é o
   certo para aviso, mas "nenhum registro" fica melhor no meio da coluna. */
.banner.justify-content-center .banner-row {
	flex: 0 1 auto;
}
/* Link dentro do banner: MESMA cor do texto em volta, e só o sublinhado marca
   que é clicável.

   O que havia era o azul de link padrão no meio de um texto âmbar — duas cores
   brigando numa frase de uma linha, e o azul sobre o tingido amarelo ainda
   perdia contraste. É assim que o Kumo faz: a cor pertence à variante do
   banner, o sublinhado pertence ao link.

   O deslocamento tira o traço de cima dos rabos de p, q e g.

   Só link de TEXTO: o x-button com rota também é um <a> (sempre com .btn), e
   herdava o sublinhado e a cor âmbar no lugar do próprio estilo de botão. */
.banner a:not(.btn) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 2px;
	font-weight: 500;
}
.banner a:not(.btn):hover,
.banner a:not(.btn):focus-visible {
	text-decoration-thickness: 2px;
}
.banner-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}
.banner-default {
	background-color: rgba(59, 130, 246, .16);
	color: #60a5fa;
}
.banner-alert {
	background-color: rgba(245, 158, 11, .16);
	color: #fbbf24;
}
.banner-error {
	background-color: rgba(239, 68, 68, .16);
	color: #f87171;
}
.banner-secondary {
	background-color: rgba(113, 113, 122, .18);
	color: var(--muted-foreground);
}
/* Fora do Kumo: o tom da marca, para convite em vez de aviso — é o que o
   bloco da FoxBit era antes, e vira aviso azul se cair em .banner-default. */
.banner-brand {
	background-color: rgba(0, 60, 129, .22);
	color: #8fbdf0;
}
body:not(.dark) .banner-default { color: #1d4ed8; }
body:not(.dark) .banner-alert   { color: #b45309; }
body:not(.dark) .banner-error   { color: #b91c1c; }
/* Verde de "tudo certo", que o Banner não tem entre as variantes: vai como classe
   junto de variant="secondary" (<x-banner variant="secondary" class="banner-sucesso">).
   Mesma receita das irmãs: fundo do matiz a 16% e texto no tom 400 no escuro, 700
   no claro. Primeiro uso: a faixa "Contas verificadas" de Contas sem atividade. */
.banner.banner-sucesso {
	background-color: rgba(34, 197, 94, .16);
	color: #4ade80;
}
body:not(.dark) .banner.banner-sucesso { color: #15803d; }
/* Ícone de item de checklist dentro do banner. Caixa fixa de 16px centrada
   na linha: em 13px com entrelinha 1.375, o centro da altura das maiúsculas
   do Inter cai exatamente no centro da linha, então SVG centrado alinha com o
   texto. Os dois estados são SVG com o mesmo diâmetro externo — o feito é um
   disco com o check recortado, o pendente o anel do Lucide. */
.banner-checklist__icone {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
.banner-checklist__icone svg {
	display: block;
	width: 16px;
	height: 16px;
}
body:not(.dark) .banner-brand {
	background-color: rgba(0, 60, 129, .06);
	color: var(--primary-brand);
}
/* O tingido some sob contraste alto e o banner vira uma caixa invisível: o
   anel do próprio matiz é o que garante a borda quando o sistema descarta
   cor de fundo. */
@media (prefers-contrast: more) {
	.banner {
		box-shadow: 0 0 0 1px currentColor;
	}
}
@media (max-width: 575.98px) {
	.banner {
		padding: 12px;
	}

	/* Abaixo de 576px o botão não cabe ao lado do texto: a ação desce para a
	   linha de baixo e ocupa a largura toda em vez de espremer o título. */
	.banner-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.banner-actions {
		width: 100%;
	}
}
.dashboard>.sidebar-menu .link-sidebar.active a,
.dashboard>.sidebar-menu .link-sidebar.active a .auxiliar,
.dashboard>.sidebar-menu .link-sidebar:hover a,
.dashboard>.sidebar-menu .link-sidebar:hover a .auxiliar,
.dashboard>.sidebar-menu .link-sidebar.active .accordion-button,
.dashboard>.sidebar-menu .link-sidebar.active .accordion-button .auxiliar,
.dashboard>.sidebar-menu .link-sidebar:hover .accordion-button,
.dashboard>.sidebar-menu .link-sidebar:hover .accordion-button .auxiliar {
	color: var(--primary) !important;
}
.dashboard>.sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar.active::before {
	background-color: var(--primary);
}
/* Duas barras: (0,3,1) vence a regra de uma barra (0,2,1) por especificidade,
   independente da ordem no arquivo. */
body:has(.top-bar_news):has(.top-bar_impersonate) {
	--top-bars-h: calc(var(--top-bar-h) * 2);
}
.top-bar {
	display: flex;
	align-items: center;
	gap: .75rem;
	height: var(--top-bar-h);
	padding: .5rem 1rem;
	color: #fff;
	overflow: hidden;
	user-select: none;
}
/* O ::before precisa se ancorar na própria barra, não no container. */
.top-bar {
	position: relative;
}
/* Duas cópias → deslocar metade do track devolve exatamente ao ponto inicial. */
@keyframes news-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* -----------------------------------------------------------------------------
   Barra de impersonificação (componente impersonate-bar)

   Mesma anatomia da barra de notícias, sem esteira: a mensagem é uma só. Azul e
   não laranja para não competir com o aviso de notícia quando as duas aparecem —
   quem está impersonificando precisa lembrar disso a cada tela.
   ----------------------------------------------------------------------------- */
.top-bar_impersonate {
	/* Mesmo azul do 4selet-pay (--blue: #1E6EF4). Texto branco em 4.57:1, passa
	   WCAG AA — mesma faixa do laranja da barra de notícias (4.55:1). */
	background-color: var(--blue-4selet);
	border-bottom: 1px solid rgba(0, 0, 0, .22);
}
@media (max-width: 920px) {
	.top-bar__label,
	.top-bar__cta {
		display: none;
	}

	/* Exceção: na barra de impersonificação esta CTA é a ÚNICA saída da sessão —
	   a barra em si não é clicável (diferente da de notícias, onde some sem
	   prejuízo porque o clique na faixa abre o modal) e não há outro ponto de
	   saída na interface. Escondê-la deixaria o admin preso em telas estreitas.
	   A mensagem ao lado já trunca com elipse, então cabe. */
	.top-bar_impersonate .top-bar__cta {
		display: inline-flex;
	}
}
/* Bandeira em SVG, 4:3, com cantinho arredondado e um fio para o branco da
   bandeira não sumir sobre fundo claro. */
body.dark .idioma-bandeira {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
.dashboard:not(.active):not(.active-force) .idioma-gatilho {
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-inline: auto;
	padding: 0;
}
.dashboard:not(.active):not(.active-force) .idioma-gatilho__nome,
.dashboard:not(.active):not(.active-force) .idioma-gatilho__seta {
	display: none;
}
.dashboard:not(.active):not(.active-force) .idioma-gatilho__bandeira {
	width: 20px;
	height: 15px;
}
/* position: fixed e ancorada em --sidebar-w, não dentro da sidebar: como filha de
   .sidebar-menu (overflow: hidden) qualquer pixel além da borda era cortado, então
   a área de pega ficava só do lado de dentro. Fixa, a faixa atravessa a borda e
   sobra safezone dos dois lados. Acompanha a largura sozinha, pela variável. */
.sidebar-resizer {
	position: fixed;
	/* Da nav para baixo, abaixo só das barras do topo: a linha segue pela borda
	   do bloco do logo, que é a continuação da sidebar na nav. */
	top: var(--top-bars-h);
	left: var(--sidebar-w);
	/* 14px de alvo centrados na borda: 7px para dentro, 7px para fora. */
	width: 14px;
	margin-left: -7px;
	height: calc(100vh - var(--top-bars-h));
	/* Acima da nav (z-index 999), senão o trecho do topo ficava por baixo dela. */
	z-index: 1000;
	cursor: col-resize;
	background-color: transparent;
	/* Arrastar não deve selecionar o texto dos itens do menu. */
	user-select: none;
	touch-action: none;
}
/* Os 2px pintados ficam rentes ao fim da sidebar — em cima da própria borda, no
   centro da faixa de alvo. */
.sidebar-resizer::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	width: 2px;
	/* O mesmo azul da barra de impersonação. */
	background-color: var(--blue-4selet);
	opacity: 0;
	transition: opacity .15s;
}
/* O deslocamento da alça com barras no topo está junto dos outros offsets, na seção
   "Barras do topo" — todos leem --top-bars-h de um lugar só. */
.sidebar-resizer:hover::after,
.dashboard.is-resizing .sidebar-resizer::after {
	opacity: 1;
}
/* A sidebar colapsada tem 56px e o clique ali é para expandir, não para arrastar.
   Manter a alça só no estado expandido evita arrastes acidentais no ícone. */
.dashboard:not(.active):not(.active-force) .sidebar-resizer {
	display: none;
}
/* opacity: 0, não display: none. Sem altura nos <a>, o <li> encolheria e a guia
   encurtaria até desaparecer; assim o item mantém a altura e a barra continua
   do tamanho que tem hoje. */
.dashboard:not(.active):not(.active-force) .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar > * {
	opacity: 0;
}
/* O fundo é do próprio <li>, não dos filhos: .side-link.active pinta --tertiary e
   sobrava como um retângulo arredondado ao lado da guia, com o conteúdo já
   invisível. Zerar aqui é o que apaga o resquício do botão.
   pointer-events porque clicar às cegas levaria para uma rota surpresa. */
.dashboard:not(.active):not(.active-force) .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar,
.dashboard:not(.active):not(.active-force) .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar.active,
.dashboard:not(.active):not(.active-force) .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar:hover {
	background-color: transparent;
	border-color: transparent;
	pointer-events: none;
}
/*
   Acentos locais do bloco. Os tokens globais de status nao tem contraste
   legivel nos dois temas: --destructive vira #7f1d1d no dark (escuro demais
   para texto) e --green / ambar ficam claros demais sobre fundo branco.
   Cada acento e resolvido por tema aqui e usado somente no escopo .nl-*.
*/
:root {
	--nl-danger-text: #dc2626;
	--nl-warning-text: #b45309;
	--nl-success-text: #2b8a22;
	--nl-info-accent: var(--primary-brand);
}
body.dark {
	--nl-danger-text: #ef4444;
	--nl-warning-text: #f59e0b;
	--nl-success-text: var(--green);
	--nl-info-accent: #3b82f6;
}
/* Estado / visibilidade */
.nl-hidden {
	display: none !important;
}
/* Layout do grafico */
.nl-chart-wrap {
	position: relative;
	width: 100%;
	height: 340px;
}
/* Enquanto o primeiro dado não chega, o skeleton ocupa o lugar do gráfico. O canvas
   continua no layout (o Chart.js mede o contêiner na criação), só invisível. */
.nl-chart-wrap.is-loading canvas {
	visibility: hidden;
}
.nl-chart-wrap:not(.is-loading) .chart-skeleton {
	display: none;
}
/* =============================================================================
   Skeleton de gráfico de linha (components/chart-skeleton.blade.php)

   Port do ChartSkeletonLoader do Kumo (TimeseriesChart com `loading`): onda
   estática em área, com degradê que some para baixo, traço fino e um brilho
   recortado na área, atravessando em 1,8s. Cor `Skeleton` da paleta semântica
   do Kumo (#DDDDDD no claro, #5C5C5C no escuro) e as mesmas opacidades.
   ============================================================================= */
.chart-skeleton {
	--chart-skeleton-cor: #dddddd;
	--chart-skeleton-traco: 0.6;
	--chart-skeleton-area: 0.1;
	--chart-skeleton-brilho: 0.24;
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
body.dark .chart-skeleton {
	--chart-skeleton-cor: #5c5c5c;
	--chart-skeleton-traco: 0.36;
	--chart-skeleton-area: 0.07;
	--chart-skeleton-brilho: 0.16;
}
.chart-skeleton svg {
	display: block;
}
.chart-skeleton__fill-top {
	stop-color: var(--chart-skeleton-cor);
	stop-opacity: var(--chart-skeleton-area);
}
.chart-skeleton__fill-bottom,
.chart-skeleton__shine-edge {
	stop-color: var(--chart-skeleton-cor);
	stop-opacity: 0;
}
.chart-skeleton__shine-mid {
	stop-color: var(--chart-skeleton-cor);
	stop-opacity: var(--chart-skeleton-brilho);
}
.chart-skeleton__line {
	stroke: var(--chart-skeleton-cor);
	stroke-opacity: var(--chart-skeleton-traco);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.chart-skeleton__shine {
	transform-box: fill-box;
	animation: chart-skeleton-brilho 1.8s ease-in-out infinite;
}
@keyframes chart-skeleton-brilho {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.chart-skeleton__shine {
		animation: none;
		transform: none;
	}
}
/* =============================================================================
   Tooltip dos gráficos (Chart.js) no padrão do tooltip de série do Kumo

   Tradução das classes de packages/kumo/src/components/chart:
   - caixa (TimeseriesChart, Popup): `max-w-xs min-w-[150px] rounded-lg
     bg-kumo-base p-2 shadow-md outline-1 outline-kumo-line`;
   - título (timeseries-tooltip): `mb-1 text-xs font-semibold text-kumo-default`;
   - linha: `flex items-center gap-2 py-0.5`, marcador `h-3 w-3 rounded-full`,
     texto `text-xs font-medium`.
   As cores são os tokens do Kumo, em oklch como no original (kumo-base,
   kumo-line, kumo-default), claro e escuro.

   O HTML é montado por public/assets/js/chart-tooltip.js, que passa só a cor
   da série (--chart-tooltip-cor) e a posição (--chart-tooltip-x/-y).
   ============================================================================= */
.chart-tooltip {
	--chart-tooltip-fundo: #fff;
	--chart-tooltip-contorno: oklch(14.5% 0 0 / 0.1);
	--chart-tooltip-texto: oklch(21% 0.006 285.885);

	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	min-width: 150px;
	max-width: 20rem;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--chart-tooltip-fundo);
	outline: 1px solid var(--chart-tooltip-contorno);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	color: var(--chart-tooltip-texto);
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(var(--chart-tooltip-x, 0px), var(--chart-tooltip-y, 0px));
	visibility: hidden;
}
.chart-tooltip_visivel {
	visibility: visible;
}
body.dark .chart-tooltip {
	--chart-tooltip-fundo: oklch(17% 0 0);
	--chart-tooltip-contorno: oklch(32% 0 0);
	--chart-tooltip-texto: oklch(97% 0 0);
}
.chart-tooltip__titulo {
	margin-bottom: 4px;
	font-weight: 600;
}
.chart-tooltip__linha {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
}
/* Detalhe do mesmo ponto (máx./mín. do dia, origem): sem marcador, com o
   texto alinhado ao da linha de cima — recuo = largura do marcador + gap. */
.chart-tooltip__linha_sub {
	padding-left: 20px;
}
.chart-tooltip__cor {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background-color: var(--chart-tooltip-cor, currentColor);
}
.chart-tooltip__texto {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}
/* =============================================================================
   Halo de borda que segue o ponteiro (.card-glow) + selo de icone (.tone-badge)

   Duas pecas usadas hoje por DOIS componentes -- os cards de metrica do trader
   (.nl-metric) e os cards de pendencia do painel (.pend-card). Moram aqui, uma
   vez, e nao dentro de cada um: sao a mesma linguagem visual nas duas telas, e
   duplicar a regra seria assinar que um dia as duas divergem.

   Para adotar num terceiro card: a classe .card-glow no elemento, --glow-radius
   com o raio dele, e um data-spotlight no container da grade. A cor vem do
   --tone que o componente ja declara (a paleta .tone_* / .pend-card_* mais
   abaixo neste arquivo); sem --tone, o halo sai cinza.

   Duas camadas decorativas, ambas alimentadas pelas mesmas tres variaveis que o
   card-spotlight.js escreve no elemento (--glow-x, --glow-y, --glow-strength):

     ::before  lavagem interna, sobre o fundo do card e ABAIXO do texto (z-index
               negativo dentro do stacking context criado pelo isolation).
     ::after   a moldura acesa. Um gradiente radial recortado numa fita de 1px
               pelo mask-composite -- e por isso que a luz corre pela borda em vez
               de pintar o retangulo inteiro.

   Sem o JS (ou em ponteiro grosso / reduced-motion) o :hover mais abaixo ainda
   acende a moldura, so sem seguir o cursor.
   ============================================================================= */
.card-glow {
	/* Raio do halo. Vale tambem para o card-spotlight.js, que le o valor
	   computado daqui: um numero, um lugar. */
	--glow-spot: 240px;
	--glow-tone: var(--tone, 113 113 122);

	position: relative;
	/* Cria o stacking context: sem ele o ::before de z-index -1 escaparia para
	   tras do proprio card. */
	isolation: isolate;
}
.card-glow::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(
		var(--glow-spot) circle at var(--glow-x, 50%) var(--glow-y, 0%),
		rgb(var(--glow-tone) / .10),
		rgb(var(--glow-tone) / 0) 70%
	);
	opacity: var(--glow-strength, 0);
	transition: opacity .3s ease;
	pointer-events: none;
}
/* Dentro do @supports de proposito, e nao com o mask como um extra opcional: sem
   a mascara aplicada, o gradiente nao "deixa de recortar" -- ele pinta o
   RETANGULO INTEIRO por cima do card, a 95% de opacidade. O modo de falha e
   apagar o dado, nao perder o efeito. Entao onde nao houver mask-composite o
   ::after simplesmente nao existe, e o card fica com a borda que sempre teve.

   Cobertura das duas condicoes: exclude e Chrome 120+, Safari 15.4+, Firefox 53+;
   o xor prefixado pega todo o WebKit/Blink anterior a isso. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
	.card-glow::after {
		content: '';
		position: absolute;
		/* -1px: a fita cobre exatamente a borda de 1px que ja existe (ou, no
		   .pend-card, o anel de 1px do --fancy-shadow), em vez de desenhar uma
		   segunda moldura por dentro dela. */
		inset: -1px;
		z-index: 1;
		/* O fallback de 10px serve a quem adotar a classe sem declarar o proprio
		   raio: sem ele o calc() ficaria invalido e o card perderia o
		   arredondamento inteiro. */
		border-radius: calc(var(--glow-radius, 10px) + 1px);
		padding: 1px;
		background: radial-gradient(
			var(--glow-spot) circle at var(--glow-x, 50%) var(--glow-y, 0%),
			rgb(var(--glow-tone) / .95),
			rgb(var(--glow-tone) / 0) 62%
		);
		/* Duas mascaras identicas recortadas em caixas diferentes; o xor/exclude
		   apaga a interseccao e sobra so o anel do padding. */
		-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
		-webkit-mask-clip: content-box, border-box;
		-webkit-mask-composite: xor;
		mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
		mask-clip: content-box, border-box;
		mask-composite: exclude;
		opacity: var(--glow-strength, 0);
		transition: opacity .3s ease;
		pointer-events: none;
	}
}
/* Fallback sem JS: acende a moldura pelo topo do card. Assim que o
   card-spotlight.js entra, ele escreve as tres variaveis inline e passa a
   mandar -- inline vence qualquer seletor. */
.card-glow:hover {
	--glow-x: 50%;
	--glow-y: 0%;
	--glow-strength: 1;
}
/* Phosphor é fonte: o tamanho vem do font-size, não de width/height. */
.tone-badge .ph,
.tone-badge .ph-fill {
	font-size: 16px;
	line-height: 1;
}
/* Valor do card de metrica na tela do trader: uma linha, sempre.
   O .nl-metric-value herda overflow-wrap: break-word do CSS global, e com
   seis caixinhas na linha (col-2) mais a sidebar aberta sobram ~120px por
   card -- o suficiente para o navegador partir "$25,500.00" no meio do
   numero. O nowrap tira a quebra; quem ajusta o tamanho quando nao cabe e
   o ajustaValores() do trader/index.blade.php, card a card. Fonte menor
   cravada aqui encolheria 24px tambem nas telas onde o numero ja cabe, e
   so adiaria o estouro no proximo patamar de saldo. */
.text-nl-success {
	color: var(--nl-success-text) !important;
}
.text-nl-danger {
	color: var(--nl-danger-text) !important;
}
/* Número que muda a cada operação fechada. Verde como o --live, porque o dado é
   corrente e não de fechamento, mas sem o ponto pulsante: não é stream. */
@keyframes nl-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .35;
	}
}
/* Alerta de stop */
body.dark .nl-alert--info {
	background-color: rgba(0, 60, 129, .18);
}
/* Skeleton de carregamento */
@keyframes nl-shimmer {
	0%,
	100% {
		opacity: .5;
	}

	50% {
		opacity: 1;
	}
}
@media (max-width: 768px) {
	.nl-chart-wrap {
		height: 240px;
	}
}
/* No escuro o --green (#008932) fica escuro demais sobre o fundo do tema: sobe
   para um verde vivo, que é o que a Apple e o Stripe fazem no dark. */
body.dark .passo-aviso_sucesso { --aviso: 74 222 128; }
/* Botão "Excluir conta" — destrutivo contornado, como o do LayerDialog do Kumo:
   texto vermelho, anel neutro, sem fundo. O hover só tinge de vermelho; pintar o
   botão inteiro fica para a confirmação, que é onde a ação acontece de fato. */
.btn.botao-excluir-conta {
	--botao-perigo: #dc2626;
	color: var(--botao-perigo) !important;
	background-color: transparent !important;
}
body.dark .btn.botao-excluir-conta {
	--botao-perigo: #f87171;
}
.btn.botao-excluir-conta:hover,
.btn.botao-excluir-conta:focus-visible {
	color: var(--botao-perigo) !important;
	background-color: color-mix(in srgb, var(--botao-perigo) 10%, transparent) !important;
}
/* Aviso de conta ativa no tom do selo âmbar (badge-estado_ambar): atenção, não bloqueio. */
.dado__valor {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--foreground);
	word-break: break-word;
}
/* Item da grade e link do valor podem encolher: sem isso um valor longo (um
   código de conta, um link) passava da borda do cartão em vez de quebrar. */
.dados-grid > .dado,
.dado__valor > .link-kumo {
	min-width: 0;
}
/* Faixa compacta no estreito.

   Empilhado, cada cartão gastava ~90px para dizer duas coisas curtas — três
   deles comiam a tela antes do primeiro conteúdo. Aqui o rótulo e o número
   dividem a MESMA linha, e os três voltam a se ler como um bloco só: bordas
   internas somem, só as pontas arredondam e os 12px entre eles saem.

   Vale só para a faixa marcada com `_compacta`: a do /painel tem minigráfico e
   comparativo dentro do cartão, e viraria sopa numa linha. */
@media (max-width: 991.98px) {
	.stat-cards-group_compacta .stat-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 14px !important;
		border-radius: 0;
	}

	.stat-cards-group_compacta .stat-card-first {
		border-radius: 10px 10px 0 0;
	}

	.stat-cards-group_compacta .stat-card-last {
		border-radius: 0 0 10px 10px;
	}

	/* A emenda passa a ser horizontal: o que some é a borda de CIMA. */
	.stat-cards-group_compacta .stat-card-middle,
	.stat-cards-group_compacta .stat-card-last {
		border-top-width: 0 !important;
	}

	.stat-cards-group_compacta .stat-card-item:not(:first-child) .stat-card {
		margin-top: 0;
	}

	/* O `mt-2` do Bootstrap separava rótulo e número quando eles estavam em
	   pé; na mesma linha ele vira um degrau. */
	.stat-cards-group_compacta .stat-card > * {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* O número encosta à direita e não quebra; o rótulo cede espaço primeiro. */
	.stat-cards-group_compacta .stat-card > p {
		min-width: 0;
	}

	.stat-cards-group_compacta .stat-card .text-2xl {
		font-size: 20px;
		white-space: nowrap;
	}
}
/* A faixa compacta segue em pé, lado a lado, até 992px. O empilhamento de
   1199px acima foi pensado para o /painel, sem sidebar ao lado; aqui, entre
   992 e 1199px de janela, sobram 660–870px — três cartões de ~250px cabem
   com folga, e empilhados viravam três blocos altos antes do conteúdo. Abaixo
   de 992 entra o modo em linha logo acima. */
@media (min-width: 992px) and (max-width: 1199px) {
	.stat-cards-group_compacta .stat-card-item {
		flex: 1 1 25%;
	}

	.stat-cards-group_compacta .stat-card {
		border-radius: 0;
	}

	.stat-cards-group_compacta .stat-card-first {
		border-radius: 10px 0 0 10px;
	}

	.stat-cards-group_compacta .stat-card-last {
		border-radius: 0 10px 10px 0;
	}

	.stat-cards-group_compacta .stat-card-middle,
	.stat-cards-group_compacta .stat-card-last {
		border-left-width: 0 !important;
	}

	.stat-cards-group_compacta .stat-card-item:not(:first-child) .stat-card {
		margin-top: 0;
	}
}
/* Célula de duas linhas: identidade em cima, classificação embaixo. O peso e o
   tamanho separam as duas sem precisar de régua nem de segunda coluna. */
.cell-title {
	font-size: 14px;
	font-weight: 500;
	/* 1.35 e não o 1.5 da célula: são duas linhas curtas e empilhadas, e a
	   entrelinha larga engordava a linha inteira da tabela sem ajudar a ler. */
	line-height: 1.35;
	color: var(--foreground);
}
/* Célula sem dado: "N/A" em tom apagado. Presente o bastante para a coluna não
   parecer quebrada, apagado o bastante para não competir com dado de verdade —
   e é texto, então leitor de tela anuncia em vez de pular a célula. */
.cell-empty {
	color: var(--muted-foreground);
	opacity: .55;
}
.pend-card {
	--glow-radius: 8px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 104px;
	padding: 16px;
	border-radius: var(--glow-radius);
	/* Mesmo fundo dos cards da Visão Geral logo acima (.bg-tertiary), e não --card:
	   no escuro o --card é quase preto (#08080a) e a grade destoava do painel. */
	background-color: var(--tertiary);
	box-shadow: var(--fancy-shadow);
	text-decoration: none;
	color: inherit;
}
/* Ressalva sobre o número do card (ex.: verificacao parada). Menor que o rotulo
   e na cor de destaque do tom: precisa ser lida junto com o numero, sem
   competir com ele. */
.pend-card__note {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.3;
	color: rgb(var(--tone));
}
/* Só país com compra é clicável — e é o único que recebe cor. */
.globo__pais_com-dado.is-active {
	stroke: var(--foreground);
	stroke-width: 1.2;
}
/* Estados do país aberto. Ficam numa camada própria acima dos países para o
   fade de entrada valer para o conjunto — e para sumirem todos de uma vez quando
   alguém volta ao mundo. */
.globo__estados.is-visible {
	opacity: 1;
}
/* fill-opacity é o que o JS modula por volume; a cor é sempre a mesma. */
.globo__estado_com-dado.is-active {
	stroke: var(--foreground);
	stroke-width: 1;
}
/* Segue o cursor: posicionado pelo JS, deslocado para não ficar sob o ponteiro. */
.globo__tooltip.is-visible {
	opacity: 1;
}
/* Três colunas fixas — sigla, quantidade, valor — para os números alinharem na
   vertical em vez de dançarem conforme o tamanho do nome. */
.globo-detalhe__linha.is-active {
	background-color: var(--muted);
}
/* --- controle segmentado dos gráficos -------------------------------------
   Dois usos na dashboard, mesmo desenho: globo/rosca em "Origem das compras" e
   barra/linha nas séries temporais. Os seletores andam juntos de propósito —
   duplicar o bloco deixaria os dois controles livres para divergirem no visual.
   --------------------------------------------------------------------------- */
.uf-toggle {
	display: inline-flex;
	padding: 2px;
	border-radius: 10px;
	background-color: var(--muted);
}
.uf-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--muted-foreground);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.uf-toggle__btn:hover {
	color: var(--foreground);
}
.uf-toggle__btn.is-active,
.chart-toggle__btn.is-active {
	background-color: var(--background);
	color: var(--foreground);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
/* O Kumo não desenha bico, e o do Bootstrap vem de cor fixa — ficaria um
   triângulo escuro pendurado na superfície clara do tema claro. */
.tooltip .tooltip-arrow {
	display: none;
}
.tooltip.show {
	opacity: 1;
}
.max-w500 {
	max-width: 500px;
}
/* Único valor da tela que vale destacar em cor no offcanvas: é dinheiro que
   voltou. O painel já tem --destructive; faltava o utilitário de texto. */
.text-destructive {
	color: var(--destructive) !important;
}
/* ==========================================================================
   Cadastro (auth/register) — indicador de etapas e selects de país
   ========================================================================== */
.step-indicator__item.active {
	opacity: 1;
}
.step-indicator__item.active .step-indicator__circle {
	background: #2563eb;
	border-color: #60a5fa;
	color: #e5e7eb;
}
.custom-country-trigger.open {
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* .nationality-option e .addr-country-option são as classes que o Blade usa;
   .country-option fica pelo histórico, para não quebrar nada que ainda a use. */
body.dark .custom-country-dropdown,
body.dark .phone-country-dropdown {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
}
body.dark .country-option:hover,
body.dark .nationality-option:hover,
body.dark .addr-country-option:hover,
body.dark .phone-country-option:hover {
	background-color: #1e3a5f;
}
.stage_em-challenge { --stage: #e2a347; }
/* Cor única do Shop: o verde da faixa Planos 50K (.tone_green, 34 197 94). Vale
   para o halo, o ícone das abas e o selo dos cards; trocar a cor é mexer só aqui.
   O --glow-tone é sobrescrito com dois seletores de classe para vencer o
   .card-glow (que o deriva do --tone) independentemente da ordem no arquivo. */
body:not(.dark) .shop-card {
	--shop-ink: 22 101 52;
}
.shop-card.card-glow {
	--glow-tone: var(--shop-tone);
}
/* Contorno de 1px por cima da imagem, preto no claro e branco no escuro, a 10%:
   foto clara num card claro (e escura num escuro) perdia a borda. Por dentro e
   sem cor de tema, para não sujar a beira da foto com o tom da superfície. */
body.dark .shop-card-media::after {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* A da Amex é quadrada: um pouco mais alta para ter o mesmo peso das outras. */
body.dark .campos-cartao__bandeiras img {
	filter: grayscale(1) invert(1) contrast(1.15);
	opacity: .75;
}
/* Lugar do QR enquanto ele é gerado: mesma medida, para nada pular quando ele chega. */
@keyframes pix-esqueleto {
	50% { opacity: .5; }
}
/* Ponto pulsando ao lado de "Aguardando pagamento": a tela está viva, olhando o
   pagamento. Quem pede menos movimento vê o ponto parado. */
@keyframes pix-ponto {
	50% { opacity: .35; }
}
/* O botão tem 24px de área de toque; o desenho é o ::before, pequeno, no meio. O
   ativo vira cápsula em vez de só clarear: a forma se lê mesmo onde a diferença de
   opacidade sumiria. */
.shop-banner-dot.is-active::before {
	width: 16px;
	background-color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
	.shop-banner-dot:not(.is-active):hover::before {
		background-color: rgb(255 255 255 / .8);
	}
}
/* Seletor de imagem nos modais do Shop (exibição do produto e banner). O
   x-button-media põe 12px sob a prévia e 26px sobre os botões, e a prévia
   encostava no texto de ajuda: ficava colado em cima (~6px) e solto embaixo
   (~38px). Aqui tudo fica a 12px. Local de propósito: o componente é usado em
   outras 27 telas, que seguem como estão. */
.shop-media-field .box_media_actions > img {
	margin: 12px 0 0;
}
/* Barra de rolagem dos modais.

   A padrão do navegador vem cinza-clara e, num modal escuro, fica como uma faixa
   branca colada na borda. Os tokens resolvem os dois temas de uma vez: polegar em
   --muted-foreground, que tem contraste suficiente no claro e no escuro, e trilho
   transparente, para a barra não desenhar uma coluna ao lado do conteúdo. */
.modal-body {
	scrollbar-width: thin;
	scrollbar-color: var(--muted-foreground) transparent;
}
.modal-body::-webkit-scrollbar {
	width: 8px;
}
.modal-body::-webkit-scrollbar-track {
	background-color: transparent;
}
.modal-body::-webkit-scrollbar-thumb {
	background-color: var(--muted-foreground);
	border-radius: 999px;
	/* A borda transparente afina o polegar sem estreitar a área de clique. */
	border: 2px solid transparent;
	background-clip: content-box;
}
.modal-body::-webkit-scrollbar-thumb:hover {
	background-color: var(--foreground);
}
/* ==========================================================================
   Trilha de navegação (componente x-breadcrumb)
   Os níveis de cima em tom apagado e a página atual no tom do texto: o olho
   pousa em "onde estou" e os ancestrais ficam como contexto. Classes próprias
   porque `.breadcrumb-item` do Bootstrap injeta um "/" no ::before.
   ========================================================================== */
.crumbs {
	margin-bottom: 16px;
}
.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 20px;
}
.crumbs__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.crumbs__link,
.crumbs__page {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.crumbs__link {
	color: var(--muted-foreground);
	border-radius: 4px;
	transition-property: color;
	transition-duration: .15s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.crumbs__link:hover {
	color: var(--foreground);
}
.crumbs__link:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
.crumbs__text {
	color: var(--muted-foreground);
}
.crumbs__page {
	color: var(--foreground);
	font-weight: 500;
}
/* O rótulo trunca em vez de quebrar no meio: numa trilha estreita a palavra
   partida em duas linhas desalinha o ícone e o chevron. */
.crumbs__link > span,
.crumbs__page > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 16px: a casa é o único ícone da trilha e divide a linha com texto de 14px. */
.crumbs__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	stroke-width: 1.75;
}
/* Separador menor e mais apagado que o texto: marca o degrau sem virar um
   quarto item para ler. */
.crumbs__separator {
	display: inline-flex;
	align-items: center;
	color: var(--muted-foreground);
	opacity: .6;
}
.crumbs__separator svg,
.crumbs__ellipsis svg {
	width: 14px;
	height: 14px;
}
.crumbs__ellipsis {
	display: inline-flex;
	align-items: center;
	color: var(--muted-foreground);
}
/* ==========================================================================
   Cabeçalho de página (componente x-page_header)
   Desenho do PageHeader do Kumo: trilha, fio, título e descrição. O fio só
   existe quando há trilha — é ele que separa "onde estou" de "o que é esta
   tela", e sem trilha não há o que separar.
   ========================================================================== */
.page-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.page-header__crumbs {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
/* Dentro do cabeçalho quem espaça é o fio; o respiro próprio da trilha solta
   ficaria somado a ele. */
.page-header__crumbs .crumbs {
	margin-bottom: 0;
}
.page-header__crumbs + .page-header__main {
	padding-top: 12px;
}
/* Ações pela base do bloco de texto: o botão fecha a linha da descrição (ou
   do título, quando não há descrição), não flutua no topo. */
.page-header__main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.page-header__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	text-align: start;
}
/* 30px/600 com entrelinha 1.2, o text-3xl do Kumo. O tracking negativo é o
   que o Inter pede nesse tamanho: calibrado para texto de corpo, a 30px ele
   deixa as letras soltas. `balance` evita título de duas linhas com uma
   palavra sozinha embaixo. */
.page-header__title {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -.02em;
	text-wrap: balance;
	color: var(--foreground);
}
/* 65ch é o `max-w-prose` do Kumo: a descrição é uma ou duas frases, e numa
   tela larga ela correria de ponta a ponta sem o limite. */
.page-header__desc {
	margin: 0;
	max-width: 65ch;
	font-size: 14px;
	line-height: 1.5;
	text-wrap: pretty;
	color: var(--muted-foreground);
}
.page-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
/* Seção dentro da tela: um degrau abaixo do título da página, para as seções
   do formulário não disputarem com o nome da tela. 20px ainda pede um pouco
   de tracking negativo; 600 segura o peso de título mesmo menor. */
.page-header_section .page-header__title {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -.01em;
}
.page-header_section .page-header__text {
	gap: 4px;
}
/* No celular 30px ocupa duas linhas para qualquer título de três palavras;
   24px mantém a hierarquia sem empurrar o conteúdo para baixo da dobra. */
@media (max-width: 743px) {
	.page-header:not(.page-header_section) .page-header__title {
		font-size: 24px;
	}
}
/* ==========================================================================
   Tabela (desenho do Table do Kumo)
   Linhas zebradas sem régua entre elas, cabeçalho compacto e coluna fixa à
   direita para o menu da linha. Tudo CSS: o componente original é React, e
   nada aqui precisa de estado que o CSS não expresse.

   O fundo de cada linha vive numa variável (`--tabela-linha`) porque a célula
   fixa precisa pintar o MESMO fundo da linha em que está — é ela que cobre o
   conteúdo que rola por baixo — e o degradê dela termina nessa mesma cor.
   ========================================================================== */
.tabela-moldura {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background-color: var(--background);
}
/* Linha da rolagem horizontal, lida pelo degradê da coluna fixa lá embaixo. */
@supports (animation-timeline: scroll()) {
	.tabela-moldura {
		scroll-timeline: --tabela-rolagem x;
	}
}
/* `separate` e não `collapse`: com borda colapsada, célula sticky perde a
   borda ao rolar, porque ela pertence à tabela e não à célula. */
.tabela {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
	color: var(--foreground);
}
/* 12px na vertical, como no Kumo; 10px na lateral para o histórico caber
   inteiro em 1440px com a sidebar aberta — com 12px sobravam 16px, e a data
   ficava meio escondida sob a coluna fixa sem o trader ter rolado nada. */
.tabela th,
.tabela td {
	padding: 12px 10px;
	vertical-align: middle;
	text-align: start;
	white-space: nowrap;
}
/* Só a coluna de texto livre quebra linha, e com piso de largura: sem ele,
   numa tela estreita a descrição se espremia em quatro linhas de duas palavras
   em vez de a tabela rolar — e rolar é o que a coluna fixa existe para
   suportar. O resto fica numa linha: valor, data ou referência quebrados no
   meio não se leem. */
.tabela td.tabela__texto {
	min-width: 14rem;
	white-space: normal;
}
/* Data com ícone: o calendário no tom apagado, para a data continuar sendo o
   que se lê. 16px ao lado de texto de 14px, alinhados pelo centro. */
.tabela__data {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tabela__data svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	stroke-width: 1.75;
	color: var(--muted-foreground);
}
/* Centro óptico: sem o corte, o flex centraliza a caixa da linha, que reserva
   espaço para acento e descendente, e as maiúsculas ficam baixas. Aparada na
   altura da maiúscula, a caixa é a própria letra. Sem letter-spacing, que deixa
   um espaço depois da última letra e puxa o par para a esquerda. */
.tabela thead {
	--tabela-linha: var(--background);
}
.tabela th {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	background-color: var(--tabela-linha);
	border-bottom: 1px solid var(--border);
}
/* `.tabela` na frente para vencer o `.tabela thead` acima, que define a
   mesma variável com especificidade maior. */
.tabela .tabela__cabecalho_compacto {
	--tabela-linha: var(--tabela-zebra);
}
.tabela__cabecalho_compacto th {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--muted-foreground);
}
.tabela tbody tr {
	--tabela-linha: var(--background);
	background-color: var(--tabela-linha);
}
.tabela tbody tr:nth-child(even) {
	--tabela-linha: var(--tabela-zebra);
}
/* --- coluna fixa à direita ------------------------------------------------- */
.tabela__fixa-direita {
	position: sticky;
	right: 0;
	z-index: 1;
	width: 1%;
	white-space: nowrap;
	background-color: var(--tabela-linha);
}
.tabela td.tabela__fixa-direita {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-inline: 8px;
}
th.tabela__fixa-direita {
	z-index: 2;
}
/* Degradê à esquerda da coluna fixa: avisa que há conteúdo passando por
   baixo. Termina na cor da própria linha, então funciona na zebra. */
.tabela__fixa-direita::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -24px;
	width: 24px;
	pointer-events: none;
	background: linear-gradient(to right, transparent, var(--tabela-linha));
}
/* Onde dá para ler a rolagem, o degradê só aparece enquanto há colunas
   escondidas à direita: some quando a rolagem chega ao fim, e sem rolagem
   nenhuma (a tabela cabe inteira) a linha do tempo fica inativa e vale a
   opacidade zero. No Kumo ele fica sempre, cobrindo o fim da coluna ao lado
   mesmo quando nada passa por baixo. */
@supports (animation-timeline: scroll()) {
	.tabela__fixa-direita::before {
		opacity: 0;
		animation: tabela-sombra linear both;
		animation-timeline: --tabela-rolagem;
	}
}
@keyframes tabela-sombra {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}
/* Cada célula fixa é um contexto de empilhamento no mesmo nível: sem isto, o
   menu aberto numa linha ficava por baixo da célula fixa da linha seguinte. */
.tabela__fixa-direita:has(.dropdown-menu.show) {
	z-index: 3;
}
/* Só o gatilho de menu: células de ação com botões diretos ("Editar",
   "Ver") mantêm o tamanho próprio. */
.tabela__fixa-direita > .btn[data-bs-toggle="dropdown"],
.tabela__fixa-direita > .btn.tabela__acao-icone {
	width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
	padding: 0 !important;
}
/* O botão da linha é fantasma de verdade: a variante `ghost_simple` pinta o
   fundo da página (`bg-background`, com !important), que nas linhas pares da
   zebra aparecia como um quadrado. Transparente no repouso, com o fundo de
   hover e o de menu aberto preservados. `>`: os itens do menu moram na
   mesma célula, e sem o seletor de filho direto eles herdavam o tamanho de
   28px do botão — o "Ver mais" saía espremido. */
.tabela__fixa-direita > .btn[data-bs-toggle="dropdown"]:not(:hover):not([aria-expanded="true"]),
.tabela__fixa-direita > .btn.tabela__acao-icone:not(:hover) {
	background-color: transparent !important;
}
.tabela__fixa-direita > .btn[data-bs-toggle="dropdown"][aria-expanded="true"] {
	background-color: var(--accent) !important;
}
/* Linha única do vazio: o empty state já tem respiro e moldura próprios. */
.tabela td.tabela__vazio {
	padding: 16px;
}
/* ==========================================================================
   Menu de ações (desenho do DropdownMenu do Kumo)
   Painel com 4px de respiro, itens de 32px com ícone e rótulo, fundo no hover
   e a ação destrutiva separada, em vermelho. Serve a qualquer .dropdown-menu
   que receba `.menu-lista`; os itens levam `dropdown-item` para o Bootstrap
   navegar com as setas, e aqui o visual do Bootstrap é substituído.
   ========================================================================== */
.dropdown-menu.menu-lista {
	--menu-fundo: var(--popover);
	min-width: 11rem;
	margin: 0;
	padding: 4px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: var(--menu-fundo);
	box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06);
	list-style: none;
}
/* No escuro o menu é um tom ACIMA da tabela: o `--popover` do tema escuro é
   quase preto e o painel afundava em vez de flutuar. */
body.dark .dropdown-menu.menu-lista {
	--menu-fundo: var(--tertiary);
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .02);
}
/* Raio 6 dentro do painel de raio 10 com 4px de respiro: concêntrico. */
.menu-lista .menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 32px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--foreground);
	text-align: start;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.menu-lista .menu-item:hover,
.menu-lista .menu-item:focus-visible {
	background-color: var(--accent);
	color: var(--foreground);
	outline: none;
}
/* O Bootstrap pinta o item ativo de azul no clique; aqui ele continua neutro. */
.menu-lista .menu-item:active {
	background-color: var(--accent);
	color: var(--foreground);
}
.menu-lista .menu-item svg,
.menu-lista .menu-nota svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	stroke-width: 1.75;
	color: var(--muted-foreground);
}
/* Destrutivo: texto e ícone em vermelho, hover tingido do mesmo vermelho —
   a cor avisa antes do clique, e o modal de recusa ainda confirma depois. */
.menu-lista .menu-item_destrutivo,
.menu-lista .menu-item_destrutivo svg {
	color: var(--red);
}
.menu-lista .menu-item_destrutivo:hover,
.menu-lista .menu-item_destrutivo:focus-visible,
.menu-lista .menu-item_destrutivo:active {
	background-color: color-mix(in oklab, var(--red) 12%, transparent);
	color: var(--red);
}
.menu-lista .menu-separador {
	height: 1px;
	margin: 4px -4px;
	border: 0;
	background-color: var(--border);
	opacity: 1;
}
/* Nota: informação dentro do menu, não ação — sem hover e no tom apagado. */
.menu-lista .menu-nota {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted-foreground);
}
/* O x-form envolve o item de aceitar numa <form>: sem margem própria. */
.menu-lista form {
	margin: 0;
}
/* No escuro o vermelho da marca fica abaixo de 4,5:1 sobre o painel; clareado
   ele continua lendo como vermelho e passa do contraste. */
body.dark .menu-lista .menu-item_destrutivo,
body.dark .menu-lista .menu-item_destrutivo svg,
body.dark .menu-lista .menu-item_destrutivo:hover {
	color: color-mix(in oklab, var(--red) 65%, white);
}
/* Troca tabela → cartões antecipada para 992px (o padrão do x-table é 768).
   Em páginas com a sidebar aberta, entre 768 e 991px sobram ~440–660px, e a
   tabela larga mostrava duas colunas e escondia o resto na rolagem. */
@media (max-width: 991.98px) {
	.xtable-table.xtable-table_ate-992 {
		display: none !important;
	}

	.xtable-card.xtable-card_ate-992 {
		display: flex;
	}
}
/* Carteira empilhada embaixo dos prêmios (≤1199): a coluna fica com a largura
   inteira, e a credencial esticada até ela virava uma faixa de ~770×172 em vez
   de um cartão. O teto devolve a proporção de cartão. */
@media (max-width: 1199px) {
	.layer-card-primary > .t-tilt {
		width: 100%;
		max-width: 420px;
	}
}
/* 32px no toque, e não os 28 da tabela: aqui o dedo é o ponteiro. */
.mov-card__acoes > .btn {
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	padding: 0 !important;
}
.mov-card__acoes > .btn:not(:hover):not([aria-expanded="true"]) {
	background-color: transparent !important;
}
.mov-card__acoes > .btn[aria-expanded="true"] {
	background-color: var(--accent) !important;
}
/* `dt` vem em negrito do Bootstrap; aqui o rótulo é o que cede. */
.mov-card__detalhes .tabela__data svg {
	width: 14px;
	height: 14px;
}
/* Itens antigos dentro de .menu-lista: os menus das tabelas migradas ainda são
   x-button fantasmas carregados de utilitários com !important (px-2, h-8,
   rounded-4px…) dentro de <li class="padding-1">. Em vez de reescrever cada
   menu à mão, eles herdam aqui o mesmo desenho do .menu-item. */
.menu-lista li {
	padding: 0 !important;
	list-style: none;
}
/* `li .btn` e não `> li > .btn`: em alguns menus o <form> envolve o <li>, em
   outros o <li> envolve o <form> — o seletor não pode depender da ordem. */
.menu-lista li .btn:not(.menu-item) {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px;
	width: 100% !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--foreground) !important;
	text-align: start;
	white-space: nowrap;
}
.menu-lista li .btn:not(.menu-item):hover,
.menu-lista li .btn:not(.menu-item):focus-visible {
	background-color: var(--accent) !important;
	outline: none;
}
.menu-lista li .btn:not(.menu-item) svg {
	width: 16px;
	height: 16px;
	color: var(--muted-foreground);
}
.menu-lista li > hr {
	height: 1px;
	margin: 4px -4px !important;
	border: 0 !important;
	background-color: var(--border);
	opacity: 1;
}
/* Selos antigos (.tag_*) dentro da .tabela: eles têm largura fixa de 120px e
   antes quebravam o texto dentro dela. Com as células da tabela em uma linha
   só, "Bloqueado pela Nelogica" vazava por cima da coluna ao lado. Aqui o selo
   tem a largura do próprio texto. */
.tabela td .tag,
.tabela td [class^="tag_"],
.tabela td [class*=" tag_"] {
	width: auto !important;
	min-width: 0;
	white-space: nowrap;
}
/* Colunas de texto livre das telas migradas: a classe da coluna pedia quebra
   de linha, mas perdia para o `nowrap` da .tabela (mais específica). */
.tabela td.coluna-motivo-analise {
	min-width: 14rem;
	white-space: normal;
}
/* ==========================================================================
   Cartões antigos das tabelas no celular (.xtable-card > .card)
   Todas as telas repetem o mesmo molde — rótulo em negrito à esquerda, valor
   em cinza à direita, <hr> entre cada linha e botões brancos de largura cheia.
   Aqui ele herda o desenho dos cartões do histórico (.mov-card): rótulo
   apagado, dado na cor do texto, linhas curtas sem régua e botões contornados.
   Sem reescrever cada tela: o molde é o mesmo em todas.
   ========================================================================== */
.xtable-card > .card {
	gap: 6px;
	padding: 14px 16px !important;
	border: 1px solid var(--border) !important;
	border-radius: 12px !important;
	background-color: var(--card) !important;
	box-shadow: none !important;
}
.xtable-card > .card > hr {
	display: none;
}
.xtable-card > .card > .d-flex.justify-content-between {
	align-items: baseline !important;
	gap: 16px;
	font-size: 13px;
	line-height: 1.4;
}
/* Rótulo: a primeira peça da linha (span direto, ou span dentro de div nos
   cartões do slot mobile do x-table.root). */
.xtable-card > .card > .d-flex.justify-content-between > :first-child,
.xtable-card > .card > .d-flex.justify-content-between > :first-child span {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--muted-foreground) !important;
}
/* O molde dava `w-100` ao rótulo e ao valor — meio a meio —, e o e-mail
   quebrava no meio da palavra com metade da linha sobrando do lado do rótulo.
   O rótulo ocupa o próprio texto; o valor, o resto. */
.xtable-card > .card > .d-flex.justify-content-between > :first-child {
	flex: 0 0 auto;
	width: auto !important;
	max-width: 45%;
}
.xtable-card > .card > .d-flex.justify-content-between > :last-child {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	font-size: 13px !important;
	color: var(--foreground) !important;
	overflow-wrap: anywhere;
}
/* Área de ações: um respiro acima, já que o <hr> que separava saiu. */
.xtable-card > .card > .col,
.xtable-card > .card > .row,
.xtable-card > .card > div:last-child:not(.d-flex) {
	margin-top: 8px;
}
/* Botões contornados: branco sólido em largura cheia pesava mais que o
   conteúdo do cartão. Vermelho e verde (destrutivo, aceitar) mantêm a cor. */
.xtable-card > .card .btn:not(.dropdown-item):not([data-bs-toggle="dropdown"]):not(.bg-destructive):not(.bg-danger):not(.bg-success) {
	height: 36px !important;
	box-shadow: inset 0 0 0 1px var(--border) !important;
	border-radius: 8px !important;
	background-color: transparent !important;
	color: var(--foreground) !important;
	font-weight: 500 !important;
}
.xtable-card > .card .btn:not(.dropdown-item):not([data-bs-toggle="dropdown"]):not(.bg-destructive):not(.bg-danger):not(.bg-success):hover {
	background-color: var(--accent) !important;
}
/* Campo de busca com lupa (x-table-filter). A lupa fica dentro do campo, à
   esquerda, no tom apagado; o texto abre espaço para ela. O `!important` no
   padding é para vencer o `padding: 8px 12px !important` do .form-control. */
.campo-busca {
	position: relative;
}
.campo-busca__icone {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 16px;
	height: 16px;
	translate: 0 -50%;
	color: var(--campo-placeholder);
	pointer-events: none;
}
.campo-busca > .form-control {
	padding-left: 36px !important;
}
/* type="search" ganha um X de limpar do WebKit que não segue o tema e disputa
   espaço com o texto; quem limpa a busca é o botão de limpar filtros. */
.campo-busca > .form-control::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
/* Filtro de escolha única (x-table-filter): select nativo na largura do próprio
   conteúdo, e não os 100% do .form-control — na fila de filtros ele dividiria a
   linha com a busca. Sem escolha, o rótulo ("Tipo") aparece no tom de
   placeholder, como os outros campos vazios. */
.campo-filtro-select {
	width: auto !important;
	min-width: 9rem;
}
.campo-filtro-select:has(> option[value=""]:checked) {
	color: var(--campo-placeholder) !important;
}
/* ==========================================================================
   Sidebar — desenho de referência
   Rótulo na cor do texto e só o ícone apagado; item ativo e grupo aberto com o
   mesmo fundo leve (a cor do texto a 6%, que aparece nos dois temas — o
   --tertiary anterior sumia sobre o fundo #FBFBFB); seta para a direita que
   gira para baixo ao abrir; subitens só texto, alinhados ao rótulo do pai,
   presos à guia vertical. Fica no fim do arquivo para valer sobre as camadas
   anteriores; medidas que mudam o encaixe só no modo expandido (.dashboard
   .active), para o modo recolhido de 56px continuar só com os ícones.
   ========================================================================== */
.dashboard > .sidebar-menu {
	/* Fundo do item ativo (e do grupo aberto): #F3F3F3 no claro; no escuro,
	   #262626 dá o mesmo degrau leve sobre o fundo #191919. */
	--side-item-fundo: #F3F3F3;
}
body.dark .dashboard > .sidebar-menu {
	--side-item-fundo: #262626;
}
/* Cada opção com 34px de altura, sem a margem de 1px entre elas. A altura fica
   no <li> e no link/botão de dentro; os paddings verticais antigos (10px no
   link, 10px no <p>, a altura fixa de 50px do <p>) saem para não empurrar. */
.dashboard > .sidebar-menu .link-sidebar {
	height: 34px;
	margin: 0 !important;
	border-radius: 8px;
}
.dashboard > .sidebar-menu .link-sidebar > a,
.dashboard > .sidebar-menu .link-sidebar > .accordion-button {
	height: 34px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* Texto das opções: 13px, entrelinha 1/0.85 e peso médio. */
.dashboard > .sidebar-menu .link-sidebar .t-link {
	height: auto !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-size: 13px !important;
	line-height: calc(1 / .85) !important;
	font-weight: 500;
}
/* Rótulo na cor do texto em todo item, ativo ou não. */
.dashboard > .sidebar-menu .link-sidebar a,
.dashboard > .sidebar-menu .link-sidebar .accordion-button,
.dashboard > .sidebar-menu .link-sidebar a .t-link,
.dashboard > .sidebar-menu .link-sidebar .accordion-button .t-link {
	color: var(--foreground) !important;
}
/* Ícone sempre apagado — no repouso, no hover, no item ativo e no grupo aberto.
   Quem marca o estado é o fundo do item; o ícone não muda de cor. Os estados
   entram no seletor porque regras anteriores do arquivo acendiam o ícone neles. */
.dashboard > .sidebar-menu .link-sidebar > a > .auxiliar,
.dashboard > .sidebar-menu .link-sidebar > .accordion-button > .auxiliar,
.dashboard > .sidebar-menu .link-sidebar.active > a > .auxiliar,
.dashboard > .sidebar-menu .link-sidebar:hover > a > .auxiliar,
.dashboard > .sidebar-menu .link-sidebar.active > .accordion-button > .auxiliar,
.dashboard > .sidebar-menu .link-sidebar:hover > .accordion-button > .auxiliar,
.dashboard > .sidebar-menu .link-sidebar > .accordion-button:not(.collapsed) > .auxiliar {
	color: var(--muted-foreground) !important;
}
/* Um destaque só, nunca dois. Sem hover, ele é do item da página aberta; com o
   ponteiro (ou o foco do teclado) sobre outro item, o destaque vai para ele e
   sai do item ativo — os dois nunca ficam acesos juntos. O pai de um grupo
   aberto não tem fundo próprio: a seta para baixo já diz que o grupo está
   aberto, e com um subitem ativo seriam dois itens destacados. */
.dashboard > .sidebar-menu .side-link.active,
.dashboard > .sidebar-menu .side-link.active-force,
.dashboard > .sidebar-menu .side-link:hover,
.dashboard > .sidebar-menu .side-link:has(:focus-visible) {
	background-color: var(--side-item-fundo);
}
/* O cabeçalho do grupo também recebe `.active` quando a página é de um dos
   subitens: o destaque é do subitem, então o cabeçalho só acende no hover. */
.dashboard > .sidebar-menu .side-link.active:has(> .accordion-button):not(:hover):not(:has(:focus-visible)),
.dashboard > .sidebar-menu:has(.side-link:hover) .side-link.active:not(:hover),
.dashboard > .sidebar-menu:has(.side-link:hover) .side-link.active-force:not(:hover),
.dashboard > .sidebar-menu:has(.side-link:focus-visible, .side-link :focus-visible) .side-link.active:not(:has(:focus-visible)) {
	background-color: transparent;
}
/* Seta: para a direita fechado, para baixo aberto. */
.dashboard > .sidebar-menu .link-sidebar .sidebar-chevron {
	transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.dashboard > .sidebar-menu .link-sidebar .accordion-button:not(.collapsed) .sidebar-chevron {
	transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
	.dashboard > .sidebar-menu .link-sidebar .sidebar-chevron {
		transition: none;
	}
}
/* Só texto: o ícone próprio de cada subitem sai; no modo recolhido ele fica,
   porque ali é a única coisa que a sidebar mostra. `!important` porque o SVG do
   Lucide herda a classe `d-flex` do <i>, que é `display: flex !important`. */
.dashboard.active > .sidebar-menu .accordion-body .link-sidebar .auxiliar > svg,
.dashboard.active > .sidebar-menu .accordion-body .link-sidebar .auxiliar > i,
.dashboard.active-force > .sidebar-menu .accordion-body .link-sidebar .auxiliar > svg,
.dashboard.active-force > .sidebar-menu .accordion-body .link-sidebar .auxiliar > i {
	display: none !important;
}
.dashboard > .sidebar-menu .accordion-body .link-sidebar a,
.dashboard > .sidebar-menu .accordion-body .link-sidebar a .auxiliar,
.dashboard > .sidebar-menu .accordion-body .link-sidebar a .t-link {
	color: var(--foreground) !important;
}
/* Guia vertical sempre no mesmo tom: o destaque do subitem ativo é o fundo,
   como no item de topo. */
.dashboard > .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar::before,
.dashboard > .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar:hover::before,
.dashboard > .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar.active::before {
	background-color: var(--border);
}
/* Rótulo do subitem alinhado ao rótulo do pai (x do texto igual), como na
   referência. Três paddings antigos se somavam aqui (paddingl10 no <p>, 1.25rem
   do .accordion-body .t-link e o do link) e empurravam o texto 13px para dentro. */
.dashboard.active > .sidebar-menu .accordion-body .link-sidebar a,
.dashboard.active-force > .sidebar-menu .accordion-body .link-sidebar a {
	padding-left: 6px !important;
}
.dashboard.active > .sidebar-menu .accordion-body .link-sidebar a .t-link,
.dashboard.active-force > .sidebar-menu .accordion-body .link-sidebar a .t-link {
	padding-left: 0 !important;
}
/* Título de seção e linha do rodapé da sidebar. O título é rótulo, não link:
   13px no tom apagado, com respiro acima para separar do grupo anterior. No
   modo recolhido (56px) o título some — não cabe — e fica só a linha. */
.dashboard > .sidebar-menu .sidebar-secao {
	padding: 16px 12px 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--muted-foreground);
	white-space: nowrap;
	user-select: none;
}
.dashboard:not(.active):not(.active-force) > .sidebar-menu .sidebar-secao {
	height: 1px;
	margin: 10px 8px;
	padding: 0;
	overflow: hidden;
	color: transparent;
	background-color: var(--border);
}
.dashboard > .sidebar-menu .sidebar-divisor {
	height: 1px;
	margin: 12px 8px;
	background-color: var(--border);
}
/* Ícone do subitem também sempre apagado (aparece no modo recolhido). O rótulo
   mora dentro do mesmo .auxiliar, mas tem cor própria (.t-link) e não é afetado. */
.dashboard > .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar a .auxiliar,
.dashboard > .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar.active a .auxiliar,
.dashboard > .sidebar-menu .component-accordion-item .accordion-body ul .link-sidebar:hover a .auxiliar {
	color: var(--muted-foreground) !important;
}
/* ==========================================================================
   Lista de status (Verificação de identidade)
   Mesma anatomia da composição do saldo em Prêmios: rótulo à esquerda, selo ou
   valor à direita, um fio entre as linhas. O selo carrega a cor; o rótulo fica
   neutro para a lista não virar um arco-íris.
   ========================================================================== */
.lista-status {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lista-status__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 10px 0;
}
.lista-status__linha:first-child {
	padding-top: 0;
}
.lista-status__linha + .lista-status__linha {
	border-top: 1px solid var(--border);
}
.lista-status__rotulo {
	font-size: 14px;
	color: var(--foreground);
}
.lista-status__valor {
	font-size: 14px;
	color: var(--foreground);
	text-align: end;
}
/* Descrição curta no topo de cada cartão de formulário: diz o que a seção pede. */
.form-cartao__descricao {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	text-wrap: pretty;
	color: var(--muted-foreground);
}
/* Título de bloco dentro de um painel de detalhe (offcanvas): rótulo de seção,
   não manchete — 13px, peso médio, apagado, como os títulos da sidebar. */
.detalhe-secao {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted-foreground);
}
/* Linha sem valor some (painel de detalhe preenchido por script): uma linha só
   com o rótulo lê como dado faltando por erro. */
.lista-status__linha:has(> .lista-status__valor:empty) {
	display: none;
}
/* Card de situação: lista, notas e banners empilhados, sem gap no card. Logo
   depois da lista o respiro já é o padding de 10px da última linha — nada
   soma em cima dele. Margem só entre blocos que não trazem padding próprio:
   nota com nota, e o banner depois de uma nota. */
.situacao-verificacao .layer-card-primary > .lista-status__nota + .lista-status__nota {
	margin-top: 4px;
}
.situacao-verificacao .layer-card-primary > .lista-status__nota + .banner,
.situacao-verificacao .layer-card-primary > .banner + .banner {
	margin-top: 10px;
}
/* Situação da verificação na coluna lateral (4/12): o banner não tem largura
   para texto e botão lado a lado — o texto virava seis linhas ao lado do botão.
   Na coluna estreita a ação desce para baixo do texto; empilhado (≤1199px) a
   coluna tem a largura inteira e o banner volta ao normal. */
@media (min-width: 1200px) {
	.situacao-verificacao .banner-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/* Com a ação embaixo do texto, centralizar poria o ícone no meio do bloco
	   todo; ele volta a acompanhar a primeira linha. */
	.situacao-verificacao .banner:has(> .banner-row > .banner-actions) {
		align-items: flex-start;
	}
}
/* Botões diretos na coluna de ações da .tabela ("Visualizar", "Editar", "Ver
   plano"…): pequenos e contornados. A variante `secondary` tem fundo cinza
   sólido, que na zebra aparecia como bloco nas linhas claras e sumia nas
   escuras — o mesmo botão parecia dois. Contornado ele é igual em qualquer
   linha; o fundo só entra no hover. Vermelho e verde (destrutivo, aceitar)
   mantêm a cor, e o gatilho "…" do menu tem regra própria. */
.tabela__fixa-direita .btn:not([data-bs-toggle="dropdown"]):not(.dropdown-item):not(.tabela__acao-icone):not(.bg-destructive):not(.bg-danger):not(.bg-success):not(.table-action_ghost) {
	height: 28px !important;
	padding: 0 10px !important;
	box-shadow: inset 0 0 0 1px var(--campo-anel) !important;
	border-radius: 8px !important;
	background-color: transparent !important;
	color: var(--foreground) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	white-space: nowrap;
}
.tabela__fixa-direita .btn:not([data-bs-toggle="dropdown"]):not(.dropdown-item):not(.tabela__acao-icone):not(.bg-destructive):not(.bg-danger):not(.bg-success):not(.table-action_ghost):hover {
	background-color: var(--accent) !important;
}
.tabela__fixa-direita .btn:not([data-bs-toggle="dropdown"]):not(.dropdown-item):not(.tabela__acao-icone) svg {
	width: 14px;
	height: 14px;
}
/* Ação com texto no estilo fantasma (ex.: "Logar como usuário"): sem contorno,
   fundo só no hover, como o "…" ao lado — e no tamanho normal de texto, não no
   compacto de 28px dos botões contornados acima. */
.tabela__fixa-direita .btn.table-action_ghost {
	height: 32px !important;
	padding: 0 10px !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	background-color: transparent !important;
	color: var(--foreground) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	white-space: nowrap;
}
.tabela__fixa-direita .btn.table-action_ghost:hover,
.tabela__fixa-direita .btn.table-action_ghost:focus-visible {
	background-color: var(--accent) !important;
}
/* !important: a regra de ícone acima (14px) é mais específica. */
.tabela__fixa-direita .btn.table-action_ghost svg {
	width: 16px !important;
	height: 16px !important;
}
/* ==========================================================================
   Painel de detalhe (offcanvas) — Minhas Compras
   Três andares: cabeçalho com o título, corpo rolável (resumo + grupos de
   dados), rodapé fixo com as ações. O resumo responde o que se abre o painel
   pra saber — em que pé está e quanto foi —, então vem primeiro e maior; o
   resto é consulta e fica em grupos com moldura, como os cartões da página.
   ========================================================================== */
.painel-detalhe {
	display: flex;
	flex-direction: column;
	background-color: var(--background);
	border-left: 1px solid var(--border) !important;
}
.painel-detalhe__cabecalho {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
}
.painel-detalhe__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--foreground);
}
/* Fechar no mesmo desenho do fechar dos diálogos (.layer-dialog): glifo por
   máscara, pra cor vir do token e o hover ter fundo próprio no tema escuro. */
.painel-detalhe .btn-close {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	margin: -4px -6px -4px 0;
	padding: 0;
	border-radius: 6px;
	background: transparent;
	filter: none;
	opacity: 1;
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.painel-detalhe .btn-close::before {
	content: "";
	width: 12px;
	height: 12px;
	background-color: var(--muted-foreground);
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
	-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 12px 12px no-repeat;
	mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 12px 12px no-repeat;
}
.painel-detalhe .btn-close:hover,
.painel-detalhe .btn-close:focus-visible {
	background-color: var(--accent);
	box-shadow: none;
}
.painel-detalhe .btn-close:hover::before,
.painel-detalhe .btn-close:focus-visible::before {
	background-color: var(--foreground);
}
.painel-detalhe__corpo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px;
	overflow-y: auto;
}
.painel-detalhe__resumo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.painel-detalhe__resumo > [data-campo="status"] {
	margin-bottom: 6px;
}
/* Dois selos no resumo (status e tipo, no detalhe da movimentação): lado a
   lado, com o mesmo respiro embaixo que o selo único tem. */
.painel-detalhe__valor {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--foreground);
}
.painel-detalhe__produto {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	text-wrap: pretty;
	overflow-wrap: break-word;
	color: var(--muted-foreground);
}
/* `section` herda 60px de respiro vertical do tema de páginas: aqui é bloco
   dentro do painel, o espaço entre eles vem do gap do corpo. */
.painel-detalhe__secao {
	padding: 0;
}
.painel-detalhe__secao .detalhe-secao {
	margin-bottom: 8px;
}
/* Grupo com moldura: as linhas da lista-status ganham respiro nas bordas e o
   fio entre elas fica dentro da caixa. */
.painel-detalhe__grupo {
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background-color: var(--card);
}
.painel-detalhe__grupo > .lista-status__linha,
.painel-detalhe__grupo > .lista-status__linha:first-child {
	min-height: 44px;
	padding: 10px 0;
}
.painel-detalhe__grupo .lista-status__rotulo {
	color: var(--muted-foreground);
}
.painel-detalhe__grupo .lista-status__valor {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
/* Motivo da falha é frase, não dado curto: desce pra linha de baixo, alinhado
   à esquerda, em vez de espremer à direita do rótulo. */
.painel-detalhe__motivo > .lista-status__valor {
	flex-basis: 100%;
	font-weight: 400;
	text-align: start;
	text-wrap: pretty;
}
.painel-detalhe__rodape {
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
	padding: 16px 20px;
	border-top: 1px solid var(--border);
}
/* Empilhado: lado a lado, "Cancelar processo de pagamento" não cabe na metade
   do painel. No DOM o formulário vem antes; o column-reverse põe o próximo
   passo (pagar) em cima, onde o olho chega primeiro. */
.painel-detalhe__rodape > * {
	width: 100%;
}
.painel-detalhe__rodape .btn {
	height: 36px !important;
	color: var(--foreground) !important;
	background-color: transparent !important;
	box-shadow: inset 0 0 0 1px var(--campo-anel) !important;
}
.painel-detalhe__rodape .btn:hover {
	background-color: var(--accent) !important;
}
/* Cancelar é destrutivo: texto vermelho, sem pintar o botão inteiro — quem
   manda no rodapé é o próximo passo (pagar), não a saída. */
.painel-detalhe__rodape .painel-detalhe__cancelar {
	color: var(--destructive) !important;
}
body.dark .painel-detalhe__rodape .painel-detalhe__cancelar {
	color: #f87171 !important;
}
.painel-detalhe__rodape .painel-detalhe__acao_principal {
	color: var(--primary-foreground) !important;
	background-color: var(--primary) !important;
	box-shadow: none !important;
}
.painel-detalhe__rodape .painel-detalhe__acao_principal:hover {
	background-color: var(--primary) !important;
	opacity: .9;
}
/* Cartão de formulário que começa direto nos campos (sem a descrição acima): o
   `mt-3` que separa cada campo da descrição sobrava como respiro extra no topo. */
.layer-card-primary > .row:first-child > [class*="col-"] > .form-group.mt-3 {
	margin-top: 0 !important;
}
/* Menu do usuário no topo (nav.blade.php).
   Gatilho sem fundo no hover nem aberto: é o nome do usuário, não um botão de
   ação — o chevron já diz que abre. */
.nav-usuario.btn,
.nav-usuario.btn:hover,
.nav-usuario.btn:focus,
.nav-usuario.btn[aria-expanded="true"] {
	background-color: transparent !important;
}
/* Sem teto de altura: são poucos itens fixos, e o limite de 170px do
   .box-dropdown-select (pensado para listas de seleção) poderia cortar o menu. */
.menu-usuario {
	max-height: none;
}
/* Sair é destrutivo: o hover pinta no vermelho do selo de perigo, não no
   cinza neutro dos outros itens. */
.menu-usuario .menu-usuario__sair:hover,
.menu-usuario .menu-usuario__sair:focus-visible {
	background-color: rgba(239, 68, 68, .14) !important;
	color: #f87171 !important;
}
body:not(.dark) .menu-usuario .menu-usuario__sair:hover,
body:not(.dark) .menu-usuario .menu-usuario__sair:focus-visible {
	background-color: rgba(239, 68, 68, .1) !important;
	color: #b91c1c !important;
}
/* ==========================================================================
   Paginação (<x-table-pagination>) — desenho do Pagination do Kumo, variante
   com seletor de tamanho. À esquerda o resumo e o "Por página"; à direita um
   grupo segmentado com a página atual num campo no meio. O grupo é uma peça
   só: um anel em volta e um fio entre os segmentos, desenhados com sombra
   inset (sem borda, como os botões do painel).
   ========================================================================== */
.paginacao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin-top: 16px;
}
.paginacao__resumo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	min-width: 0;
}
.paginacao__contagem {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--muted-foreground);
	white-space: nowrap;
}
.paginacao__divisor {
	width: 1px;
	height: 20px;
	background-color: var(--border);
}
.paginacao__tamanho {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.paginacao__rotulo {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--muted-foreground);
	white-space: nowrap;
}
.paginacao__select {
	height: 36px;
	padding: 0 32px 0 12px;
	border: 0;
	border-radius: 8px;
	background-color: var(--campo-fundo);
	background-image: var(--chevrons-up-down);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px 14px;
	box-shadow: inset 0 0 0 1px var(--campo-anel);
	color: var(--campo-texto, var(--foreground));
	font-family: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.paginacao__select:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--campo-foco);
}
.paginacao__select option {
	background-color: var(--background);
	color: var(--foreground);
}
.paginacao__controles {
	display: inline-flex;
	align-items: stretch;
	height: 36px;
	margin: 0 1px 0 auto;
	overflow: hidden;
	border-radius: 8px;
	/* Anel POR FORA: inset, o fundo do campo da página cobria o anel em cima
	   e embaixo, e o grupo parecia aberto no meio. */
	box-shadow: 0 0 0 1px var(--campo-anel);
}
.paginacao__botao {
	display: grid;
	place-items: center;
	width: 40px;
	color: var(--foreground);
	text-decoration: none;
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
/* Fio entre segmentos: sombra inset na borda esquerda de cada um a partir do
   segundo. O campo da página também recebe, dos dois lados. */
.paginacao__controles > :not(:first-child):not([type="hidden"]) {
	box-shadow: inset 1px 0 0 var(--campo-anel);
}
.paginacao__botao:hover {
	background-color: var(--accent);
	color: var(--foreground);
}
.paginacao__botao:focus-visible {
	outline: none;
	background-color: var(--accent);
}
.paginacao__botao[aria-disabled="true"] {
	color: var(--muted-foreground);
	opacity: .45;
	cursor: default;
}
.paginacao__botao[aria-disabled="true"]:hover {
	background-color: transparent;
}
.paginacao__botao svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.75;
}
/* A página atual é o único segmento com fundo de campo: é onde se digita. */
.paginacao__pagina {
	width: 52px;
	height: 100%;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background-color: var(--campo-fundo);
	color: var(--foreground);
	font-family: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
/* O campo tem fundo próprio e desenha o anel nos quatro lados: com fio só
   nas laterais, ele ficava "aberto" em cima e embaixo sobre o grupo. */
.paginacao__controles > .paginacao__pagina {
	box-shadow: inset 0 0 0 1px var(--campo-anel);
}
.paginacao__pagina::-webkit-outer-spin-button,
.paginacao__pagina::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
.paginacao__pagina:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--campo-foco) !important;
}
.paginacao__pagina:disabled {
	opacity: 1;
	color: var(--foreground);
	cursor: default;
}
.paginacao__enviar {
	height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--campo-anel);
	background: transparent;
	color: var(--foreground);
}
/* Celular: o resumo em cima, largura cheia; o grupo desce e vai para a
   direita. O divisor some — empilhado ele não separa nada. */
@media (max-width: 743px) {
	.paginacao__resumo {
		width: 100%;
		justify-content: space-between;
	}

	.paginacao__divisor {
		display: none;
	}
}
/* ==========================================================================
   Empty (<x-empty>) — tradução do Empty do Kumo.
   Medidas do original: raio 12px (rounded-xl), borda 1px no cinza "fill"
   (neutral-200 / neutral-800), fundo de controle, conteúdo centralizado.
   Tamanhos: sm 32×24 / gap 16 · base 64×40 / gap 24 · lg 80×48 / gap 32.
   Ícone Phosphor fill num selo quadrado em --tertiary (40/48/56px por tamanho).
   ========================================================================== */
.empty {
	--empty-borda: #e5e5e5;
	--empty-selo: #efefef;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	border: 1px solid var(--empty-borda);
	border-radius: 12px;
	background-color: var(--card);
	color: var(--foreground);
	text-align: center;
}
body.dark .empty {
	--empty-borda: #262626;
	--empty-selo: var(--tertiary);
}
.empty_sm {
	gap: 16px;
	padding: 32px 24px;
}
.empty_base {
	gap: 24px;
	padding: 64px 40px;
}
.empty_lg {
	gap: 32px;
	padding: 80px 48px;
}
/* Dentro de um cartão: a moldura já é do cartão. */
.empty.empty_solto {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}
/* Selo do ícone: quadrado exato, sem borda, só a superfície por trás do glifo.
   No escuro é o --tertiary (#202020 sobre o card #161616). No claro o --tertiary
   (#FAFAFA) some contra o --card (#fefefe) e, sem anel, o selo desapareceria:
   ali vai um cinza sólido próprio, o mesmo tom da referência. Glifo a metade do lado. */
.empty__selo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: center;
	width: 48px;
	height: 48px;
	aspect-ratio: 1;
	border-radius: 12px;
	background-color: var(--empty-selo);
	color: var(--muted-foreground);
	font-size: 24px;
	line-height: 1;
}
.empty_sm .empty__selo {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 20px;
}
.empty_lg .empty__selo {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	font-size: 28px;
}
.empty__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
/* Com descrição: `heading lg` do Kumo — 16px, semibold, entrelinha 1.5. */
.empty__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--foreground);
	text-wrap: balance;
}
/* Sozinho: `secondary base` — 14px, peso normal, tom secundário. */
.empty__titulo.empty__titulo_sozinho {
	font-size: 14px;
	font-weight: 400;
	color: var(--muted-foreground);
}
.empty__descricao {
	max-width: 560px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted-foreground);
	text-wrap: balance;
}
.empty__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
/* Painel > Certificados: nome e tipo lado a lado, e os produtos na linha de
   baixo, de ponta a ponta — as badges dos escolhidos precisam de largura. */
.certificado-campos > .div_product {
	grid-column: 1 / -1;
}
/* ==========================================================================
   Meus Certificados (trader/certificate/index)
   Grade automática de cartões. Cada cartão é a arte, em proporção fixa, e um
   rodapé com nome, data e o download — a arte é o que se reconhece primeiro.
   ========================================================================== */
.certificados {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
.certificado {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	border-radius: 16px;
	background-color: var(--tertiary);
	box-shadow: 0 0 0 1px var(--border);
}
/* Proporção do arquivo (1080 × 1350) e container das medidas em `cqw` que o
   CertificateLayout usa para posicionar o texto. Raio concêntrico: 16 − 6. */
.certificado__arte {
	position: relative;
	aspect-ratio: 1080 / 1350;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--card);
	box-shadow: 0 0 0 1px var(--border);
	container-type: inline-size;
}
/* Arte nova (aprovação e saque): quadrada, 1080 × 1080, com o texto fixo já
   desenhado na imagem. */
.certificado__imagem {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Sem a arte: some a imagem quebrada e o texto posicionado, e o quadro mostra
   só a logo da Zero7, na versão de cada tema. */
.certificado__arte_sem-imagem .certificado__imagem,
.certificado__arte_sem-imagem .certificate-text {
	display: none;
}
.certificado__arte_sem-imagem {
	background-image: url('../img/logos/default.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 44% auto;
}
body.dark .certificado__arte_sem-imagem {
	background-image: url('../img/logos/default-light.png');
}
/* ==========================================================================
   Editor de texto (Summernote)
   O plugin traz o tema claro e os ícones numa fonte própria, e no painel escuro
   a barra ficava apagada e desalinhada. Aqui o editor veste os tokens do campo
   (fundo, anel e foco iguais aos do .form-control) e os ícones passam a ser
   Lucide, desenhados como máscara: acompanham a cor do texto do botão e mudam
   de tom no hover e no tema sem outro arquivo.
   ========================================================================== */
.note-editor.note-frame {
	border: none;
	border-radius: 8px;
	background-color: var(--campo-fundo);
	box-shadow: 0 0 0 1px var(--campo-anel);
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.note-editor.note-frame:focus-within {
	box-shadow: 0 0 0 1.5px var(--campo-foco);
}
/* Barra: um grupo por família de ação, separados por um fio. */
.note-editor .note-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 6px;
	border-bottom: 1px solid var(--campo-anel);
	border-radius: 8px 8px 0 0;
	background-color: transparent;
}
.note-editor .note-toolbar > .note-btn-group {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
}
.note-editor .note-toolbar > .note-btn-group + .note-btn-group {
	margin-left: 4px;
	padding-left: 8px;
	border-left: 1px solid var(--campo-anel);
}
.note-editor .note-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: none !important;
	border-radius: 6px;
	background-color: transparent !important;
	color: var(--muted-foreground) !important;
	box-shadow: none !important;
	transition: background-color .12s, color .12s;
}
.note-editor .note-btn:hover,
.note-editor .note-btn:focus-visible,
.note-editor .note-btn.active,
.note-editor .note-btn[aria-expanded="true"] {
	background-color: var(--accent) !important;
	color: var(--foreground) !important;
}
.note-editor .note-btn:focus-visible {
	outline: 2px solid var(--campo-foco);
	outline-offset: 1px;
}
/* A seta do Bootstrap se somava à do plugin, e o botão de parágrafo saía com
   duas. Fica a do plugin (Lucide), e os grupos perdem o raio do btn-group, que
   entortava o fio que os separa. */
.note-editor .note-btn.dropdown-toggle::after {
	display: none;
}
.note-editor .note-btn-group {
	border-radius: 0;
}
/* Sem a barra de status: o editor tem altura fixa e a alça de redimensionar só
   deixava uma faixa cinza no rodapé. */
.note-editor .note-statusbar {
	display: none;
}
/* O grupo de parágrafo abre um menu com outros dois grupos de botões. */
.note-editor .note-dropdown-menu {
	min-width: 0;
	padding: 4px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background-color: var(--popover);
	color: var(--popover-foreground);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.note-editor .note-dropdown-menu .note-btn-group {
	display: inline-flex;
	gap: 2px;
}
.note-editor .note-dropdown-menu .note-btn-group + .note-btn-group {
	margin-left: 4px;
}
/* Área de escrita: a letra do campo, sem o fundo branco do plugin. */
.note-editor.note-frame .note-editing-area .note-editable {
	padding: 12px;
	border-radius: 0 0 8px 8px;
	background-color: transparent;
	color: var(--campo-texto);
	font-size: 14px;
	line-height: 1.5;
}
.note-editor .note-placeholder {
	padding: 12px;
	color: var(--campo-placeholder);
	font-size: 14px;
}
/* Ícones: Lucide, por máscara. Só as classes mapeadas ganham a máscara; o
   restante do plugin (barra de redimensionar, paletas) não usa a fonte. */
.note-editor .note-icon-bold,
.note-editor .note-icon-italic,
.note-editor .note-icon-underline,
.note-editor .note-icon-eraser,
.note-editor .note-icon-unorderedlist,
.note-editor .note-icon-orderedlist,
.note-editor .note-icon-align-left,
.note-editor .note-icon-align-center,
.note-editor .note-icon-align-right,
.note-editor .note-icon-align-justify,
.note-editor .note-icon-align-outdent,
.note-editor .note-icon-align-indent,
.note-editor .note-icon-caret,
.note-editor .note-icon-menu-check,
.note-editor .note-icon-undo,
.note-editor .note-icon-redo {
	display: inline-block;
	width: 16px;
	height: 16px;
	font-size: 0;
	line-height: 0;
	background-color: currentColor;
	-webkit-mask: var(--note-icone) center / contain no-repeat;
	mask: var(--note-icone) center / contain no-repeat;
}
.note-editor .note-icon-bold::before,
.note-editor .note-icon-italic::before,
.note-editor .note-icon-underline::before,
.note-editor .note-icon-eraser::before,
.note-editor .note-icon-unorderedlist::before,
.note-editor .note-icon-orderedlist::before,
.note-editor .note-icon-align-left::before,
.note-editor .note-icon-align-center::before,
.note-editor .note-icon-align-right::before,
.note-editor .note-icon-align-justify::before,
.note-editor .note-icon-align-outdent::before,
.note-editor .note-icon-align-indent::before,
.note-editor .note-icon-caret::before,
.note-editor .note-icon-menu-check::before,
.note-editor .note-icon-undo::before,
.note-editor .note-icon-redo::before {
	content: none !important;
}
.note-editor .note-icon-caret {
	width: 12px;
	height: 12px;
}
.note-editor .note-icon-bold {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2012h9a4%204%200%200%201%200%208H7a1%201%200%200%201-1-1V5a1%201%200%200%201%201-1h7a4%204%200%200%201%200%208'/%3E%3C/svg%3E");
}
.note-editor .note-icon-italic {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='19'%20x2='10'%20y1='4'%20y2='4'/%3E%3Cline%20x1='14'%20x2='5'%20y1='20'%20y2='20'/%3E%3Cline%20x1='15'%20x2='9'%20y1='4'%20y2='20'/%3E%3C/svg%3E");
}
.note-editor .note-icon-underline {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204v6a6%206%200%200%200%2012%200V4'/%3E%3Cline%20x1='4'%20x2='20'%20y1='20'%20y2='20'/%3E%3C/svg%3E");
}
.note-editor .note-icon-eraser {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m7%2021-4.3-4.3c-1-1-1-2.5%200-3.4l9.6-9.6c1-1%202.5-1%203.4%200l5.6%205.6c1%201%201%202.5%200%203.4L13%2021'/%3E%3Cpath%20d='M22%2021H7'/%3E%3Cpath%20d='m5%2011%209%209'/%3E%3C/svg%3E");
}
.note-editor .note-icon-unorderedlist {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h.01'/%3E%3Cpath%20d='M3%2018h.01'/%3E%3Cpath%20d='M3%206h.01'/%3E%3Cpath%20d='M8%2012h13'/%3E%3Cpath%20d='M8%2018h13'/%3E%3Cpath%20d='M8%206h13'/%3E%3C/svg%3E");
}
.note-editor .note-icon-orderedlist {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%205h10'/%3E%3Cpath%20d='M11%2012h10'/%3E%3Cpath%20d='M11%2019h10'/%3E%3Cpath%20d='M4%204h1v5'/%3E%3Cpath%20d='M4%209h2'/%3E%3Cpath%20d='M6.5%2020H3.4c0-1%202.6-1.925%202.6-3.5a1.5%201.5%200%200%200-2.6-1.02'/%3E%3C/svg%3E");
}
.note-editor .note-icon-align-left {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%2012H3'/%3E%3Cpath%20d='M17%2018H3'/%3E%3Cpath%20d='M21%206H3'/%3E%3C/svg%3E");
}
.note-editor .note-icon-align-center {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2012H7'/%3E%3Cpath%20d='M19%2018H5'/%3E%3Cpath%20d='M21%206H3'/%3E%3C/svg%3E");
}
.note-editor .note-icon-align-right {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012H9'/%3E%3Cpath%20d='M21%2018H7'/%3E%3Cpath%20d='M21%206H3'/%3E%3C/svg%3E");
}
.note-editor .note-icon-align-justify {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M3%2018h18'/%3E%3Cpath%20d='M3%206h18'/%3E%3C/svg%3E");
}
.note-editor .note-icon-align-outdent {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012H11'/%3E%3Cpath%20d='M21%2018H11'/%3E%3Cpath%20d='M21%206H11'/%3E%3Cpath%20d='m7%208-4%204%204%204'/%3E%3C/svg%3E");
}
.note-editor .note-icon-align-indent {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012H11'/%3E%3Cpath%20d='M21%2018H11'/%3E%3Cpath%20d='M21%206H11'/%3E%3Cpath%20d='m3%208%204%204-4%204'/%3E%3C/svg%3E");
}
.note-editor .note-icon-caret {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
}
.note-editor .note-icon-menu-check {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E");
}
.note-editor .note-icon-undo {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2014%204%209l5-5'/%3E%3Cpath%20d='M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5a5.5%205.5%200%200%201-5.5%205.5H11'/%3E%3C/svg%3E");
}
.note-editor .note-icon-redo {
	--note-icone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m15%2014%205-5-5-5'/%3E%3Cpath%20d='M20%209H9.5A5.5%205.5%200%200%200%204%2014.5A5.5%205.5%200%200%200%209.5%2020H13'/%3E%3C/svg%3E");
}
.layer-card-primary.layer-card-primary_editor {
	padding: 0;
	overflow: visible;
	background-color: transparent;
	box-shadow: none;
}
/* ==========================================================================
   Editor de canvas do certificado (painel/certificates), no desenho do Figma
   Barra de ferramentas em cima, camadas à esquerda, a arte no centro e o painel
   de design à direita. A moldura do editor (barra, painéis, palco e campos)
   segue o tema do painel: as cores saem dos tokens do tema, e o palco é um
   degrau mais fundo que os painéis, como no Figma. O que está dentro da arte —
   a imagem e os textos, cada um com a cor que o admin escolheu — não muda com
   o tema. Os elementos são posicionados em `cqw` — a largura do próprio canvas
   —, então o desenho e o zoom não pedem conta em JS.
   ========================================================================== */
body.dark .cert-editor {
	--fig-canvas: color-mix(in srgb, #000 42%, var(--background));
	--fig-art-ring: rgba(255, 255, 255, .08);
	--fig-art-shadow: 0 8px 32px rgba(0, 0, 0, .5);
	--fig-danger: #ff7b5e;
	--fig-notice: #8fd0ff;
	--fig-warning: #ff9d87;
}
/* Raio concêntrico: o editor tem raio 12 e a barra respeita o mesmo recuo de 6px do topo (44px de barra,
   botões de 32px) nas laterais; 12 − 6 = 6, o raio dos botões, então o curvado de fora e o de dentro
   correm paralelos nas duas pontas da barra. */
.cert-editor__tool.is-active {
	background-color: var(--fig-blue);
	color: #ffffff;
}
/* Alinhamento: grupo de quatro botões, o ativo em destaque. */
.cert-editor__seg.is-active {
	background-color: var(--fig-field-active);
	color: var(--fig-text);
}
.cert-editor__btn.is-active {
	box-shadow: inset 0 0 0 1px var(--fig-blue);
}
/* Lista de fontes: flutua sobre o botão, com busca e rolagem. */
.cert-editor__fontitem.is-active {
	background-color: var(--fig-hover);
}
/* Envio direto para o palco: o modal de mídia trabalha por baixo, sem aparecer. */
body.cert-editor-uploading #modalMedia {
	opacity: 0 !important;
	transition: none !important;
}
.certificado__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 6px 4px 8px;
}
.certificado__info {
	min-width: 0;
}
.certificado__titulo {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.certificado__data {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--muted-foreground);
}
/* O summernote grava `p` e `div`; a margem que o navegador põe no `p` faria o texto
   ocupar mais altura que a medida em CertificateLayout, e sair do certificado pelo pé. */
.certificate-text p,
.certificate-text div {
	margin: 0;
	padding: 0;
}
.certificate-text {
	white-space: normal;
	word-wrap: break-word;
}
/* Avisos de prazo acima do cartão de dados; some sozinho quando não há aviso. */
.plano-avisos__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.plano-avisos:has(.passo-aviso) {
	margin-top: 24px;
}
/* Tabela dentro de layer card: o cartão já é a moldura (anel, raio, fundo), então
   a superfície perde o respiro e a .tabela-moldura perde a borda própria — senão
   seriam duas caixas, uma dentro da outra. A moldura continua sendo quem rola na
   horizontal quando falta largura. */
.layer-card-primary.layer-card-primary_tabela {
	padding: 0;
}
/* A versão em cartões (celular) dentro do layer card ganha o respiro que a
   superfície perdeu. */
.layer-card-primary_tabela > .xtable-card {
	padding: 12px;
}
.layer-card-primary_tabela > .tabela-moldura {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}
/* Contestação acima dos dados: só ganha respiro quando tem conteúdo. */
.plano-contestacao:has(.marginb30) {
	margin-top: 24px;
}
/* As variáveis também no .iti--container: a lista abre no body, fora do .iti, e
   sem elas o CSS da lib (que carrega depois deste) pintava a casca de branco. */
.iti {
	--iti-hover-color: var(--accent);
	--iti-border-color: var(--border);
	--iti-dialcode-color: var(--muted-foreground);
	--iti-dropdown-bg: var(--tertiary);
	--iti-arrow-color: var(--muted-foreground);
}
.iti__selected-dial-code {
	font-size: 14px;
	color: var(--campo-texto, var(--foreground));
}
.iti__country-container .iti__selected-country:hover,
.iti__country-container .iti__selected-country:focus-visible {
	background-color: transparent;
}
/* Até a lib formatar o número, o texto fica invisível: sem isso o valor cru
   ("(62)995793681") piscava antes de virar "62 99579-3681". O seletor longo
   existe para vencer o `.form-group input:not(...)`, que crava a cor com
   !important e mais especificidade; o text-fill-color garante no WebKit. */
.form-group input.input-phone.input-phone_carregando:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}
/* Lista de países no desenho do layer card: a casca (tom --tertiary, anel,
   raio 12) traz a busca como faixa de cabeçalho, sem borda própria; a lista fica
   numa superfície interna (--card, anel, raio 8), com os itens de 32px dos
   nossos menus. */
body.dark .iti--container .iti__dropdown-content,
body.dark .iti__dropdown-content {
	box-shadow: 0 0 0 1px var(--border), 0 12px 32px -8px rgba(0, 0, 0, .6);
}
/* Na casca a área visível é só o vão e o cabeçalho: a lavagem vem um pouco mais
   forte que a do card inteiro (.10), senão some. */
.nl-metric_camadas.card-glow::before {
	background: radial-gradient(
		var(--glow-spot) circle at var(--glow-x, 50%) var(--glow-y, 0%),
		rgb(var(--glow-tone) / .22),
		rgb(var(--glow-tone) / 0) 70%
	);
}
/* ==========================================================================
   Grupo Usuários — Bloqueados Zero7: modal "Importar planilha"
   Saiu do <style> e dos style= da view. Tokens do tema no lugar do azul e do
   branco fixos: o hover antigo pintava o fundo de navy e o nome do arquivo era
   #fff, ilegível no tema claro.
   ========================================================================== */
.excel-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 28px 24px;
	border: 1.5px dashed var(--input);
	border-radius: 12px;
	background: var(--tertiary);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.excel-dropzone:hover {
	border-color: var(--muted-foreground);
}
.excel-dropzone.drag-over {
	border-color: var(--accent-blue);
	background: color-mix(in srgb, var(--accent-blue) 6%, var(--tertiary));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 15%, transparent);
}
.excel-dropzone:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ring);
}
@media (prefers-reduced-motion: reduce) {
	.excel-dropzone {
		transition: none;
	}
}
/* O x-button-media traz margint26 fixo no botão, pensado para ficar logo abaixo
   de um rótulo solto; aqui a medida já separa, então o respiro encolhe. */
.aparencia-midias__item .box_media_actions {
	margin-top: 12px;
}
.aparencia-midias__item .box_media_actions .margint26 {
	margin-top: 0;
}
.aparencia-midias__item .box_media_actions img {
	width: 100%;
	max-height: 220px;
	object-fit: contain;
	border-radius: var(--radius);
	box-shadow: 0 0 0 1px var(--border);
}
/* Painel — Configurações (cont.): o .modal-content do bootstrap.css tem 500px
   fixos, e o modal-xl não alarga nada aqui (o max-width dele mora num media query
   invertido). O visualizador de termo precisa de largura de leitura de PDF. */
.modal-content.termo-aceite__modal {
	width: min(900px, calc(100vw - 32px));
}
/* "Adicionar valor máximo", embaixo do campo de valor do modal de aprovar
   performance, preenche o campo ao clicar. Veio do <style> que a view tinha. */
#modalApprovePerformance .subtitle {
	cursor: pointer;
}
/* Filtro de escolha única com largura cravada. O .campo-filtro-select cresce até
   a opção mais longa, e "Todas as etapas" tem rótulos de 50 caracteres: o campo
   empurrava a barra inteira para outra linha. (O wh.css, com as classes w200,
   não é carregado no painel.) */
.filtro-largura-fixa .campo-filtro-select {
	width: 100% !important;
	min-width: 0;
	text-overflow: ellipsis;
}
/* Filtro de data mais estreito. O campo nasce com a largura padrão do <input>
   (~239px), e em Contas sem atividade (aba de finalizadas), com duas datas, o
   responsável e a busca, a lupa de enviar caía para a linha de baixo em 1440px.
   180px ainda cabem o ícone e "Finalizada até". */
.filtro-data-estreito .form-control {
	width: 100%;
	min-width: 0;
}
/* Contas sem atividade: nada de rolagem lateral dentro da moldura da tabela (a
   coluna fixa de ações cobria a última operação). A lista é um container: quando
   o espaço dela não comporta a tabela, entram os cartões do slot mobile do
   x-table.root, lado a lado. Container, e não media query como o
   .xtable-table_ate-992, porque o espaço muda com a sidebar aberta ou fechada na
   mesma janela. Cada aba tem o seu limite: a largura mínima da tabela dela, medida
   com os cabeçalhos em duas linhas (982px e 771px, mais a borda). Com a sidebar
   aberta, a aba das contas ainda é tabela em 1366px de tela; abaixo, cartões. */
@container (max-width: 984.98px) {
	.xtable-table.xtable-table_conteiner-985 {
		display: none !important;
	}

	.xtable-card.xtable-card_conteiner-985 {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	}
}
@container (max-width: 779.98px) {
	.xtable-table.xtable-table_conteiner-780 {
		display: none !important;
	}

	.xtable-card.xtable-card_conteiner-780 {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	}
}
/* Título maior nos diálogos desta tela (finalizar e registro): os 16px do
   x-layer-dialog ficavam pequenos sobre o resumo, cheio de dados em 14px. Só aqui:
   os outros diálogos do painel seguem com o tamanho do componente. */
.dialogo-inatividade .layer-dialog__titulo {
	font-size: 20px;
	line-height: 1.3;
}
/* Sem a barra de rolagem visível no conteúdo destes diálogos (pedido do produto): o
   conteúdo continua rolando com a roda, o toque e o teclado. Mesma receita da
   .hidden-scrollbar, que não dá para pôr no .layer-dialog__conteudo porque ele é
   desenhado pelo componente. */
.dialogo-inatividade .layer-dialog__conteudo {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.dialogo-inatividade .layer-dialog__conteudo::-webkit-scrollbar {
	display: none;
}
/* Caneta da mensagem ao trader (diálogo de finalizar): o botão de ícone de 28px das
   ações de tabela (.tabela__acao-icone), transparente até o hover. Os -4px em cima e
   embaixo centram os 28px na primeira linha do texto (20px de entrelinha) sem crescer
   a caixa; os -6px à direita põem o ícone de 16px na mesma margem de 12px que o
   texto tem do outro lado. Solto no canto, ele ficava a 33px da borda e fora da
   linha. */
.btn.mensagem-trader__editar {
	flex: 0 0 auto;
	width: 28px !important;
	height: 28px !important;
	margin: -4px -6px -4px 0;
	padding: 0 !important;
	border-radius: 8px !important;
	color: var(--muted-foreground) !important;
}
.btn.mensagem-trader__editar:not(:hover) {
	background-color: transparent !important;
}
/* "Ver como o trader recebe", logo abaixo da mensagem: alinhado à esquerda com a
   caixa e os rótulos, a 8px dela. O x-button pequeno põe 12px de padding lateral
   e 32px de altura, e o link ficava recuado e com 16px em cima e 32px embaixo,
   fora do ritmo de 24px entre as seções do diálogo. */
.btn.mensagem-trader__previa {
	height: auto !important;
	margin-top: 8px;
	padding: 0 !important;
}
/* A busca encolhe (até 15rem) antes de a lupa ou um filtro cair para a linha de
   baixo; no componente ela tem 400px cravados. */
.contas-inatividade .campo-busca {
	flex: 1 1 15rem;
}
/* x-dado que ocupa a linha inteira da .dados-grid (Contas sem atividade: as
   etiquetas). Na coluna de ~240px do diálogo, "Violação de notícia pendente de
   stop" e "Última conta da licença" lado a lado não cabiam. */
.dados-grid > .dado_largo {
	grid-column: 1 / -1;
}
/* =============================================================================
   Dashboard do painel: x-empty no lugar dos gráficos e listas

   .empty_grafico ocupa a mesma altura do .chart-area (240px), para a linha não
   encolher quando um dos gráficos lado a lado está vazio. .empty_preenche cresce
   na coluna esticada (row align-items-stretch), e os dois blocos terminam juntos.
   ============================================================================= */
.empty.empty_grafico {
	min-height: 240px;
	justify-content: center;
}
.empty.empty_preenche {
	flex: 1 1 auto;
	justify-content: center;
}
/* =============================================================================
   BI: seletor de período numa linha só

   O cartão "Selecionar período" fica numa coluna estreita (col-3), e o .nav do
   Bootstrap tem flex-wrap: wrap: "Mês Passado" caía para baixo de "Esse mês".
   O calendário subiu para a linha do título (.nav-pills-calendario) e as duas
   abas dividem a largura (os <a> crescem juntos, a partir do tamanho do texto).
   O grid da tela (layout do PowerBI) não muda.
   ============================================================================= */
.nav.nav-pills.nav-pills-daterange {
	flex-wrap: nowrap;
	gap: 2px;
}
.nav.nav-pills.nav-pills-daterange > a {
	flex: 1 1 auto;
	min-width: 0;
}
.nav.nav-pills.nav-pills-daterange .nav-link.nav-link-daterange {
	width: 100%;
	padding: 6px 8px !important;
}
/* Calendário: botão de ícone 28px na mesma trilha das abas. */
.nav.nav-pills.nav-pills-calendario {
	flex-wrap: nowrap;
	flex-shrink: 0;
}
.nav.nav-pills.nav-pills-calendario .nav-link {
	width: 28px;
	height: 28px;
	padding: 0;
}
.nav.nav-pills.nav-pills-calendario .nav-link svg {
	width: 16px;
	height: 16px;
}
/* Celular: os cinco selects de Meus produtos em duas colunas iguais, em vez de
   uma pilha com a largura de cada rótulo. */
@media (max-width: 743px) {

	/* .campo-filtro-select traz width: auto !important e min-width: 9rem. */
	.filtro-produtos .campo-filtro-select {
		width: 100% !important;
		min-width: 0;
	}
}
/* x-table dentro do layer card: o componente embrulha a tabela em .row > .col,
   então o reset de .layer-card-primary_tabela > .tabela-moldura não o alcança. */
.layer-card-primary_tabela > .row {
	margin: 0;
}
.layer-card-primary_tabela > .row > [class*="col-"] {
	padding: 0;
}
.layer-card-primary_tabela .tabela-moldura {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}
/* O vazio do x-table (ou solto) também não desenha a própria caixa aqui. */
.layer-card-primary_tabela .empty {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}
/* Paginação de x-table dentro do layer card: vira rodapé da superfície, com o
   respiro que .layer-card-primary_tabela tirou e um fio separando da tabela. */
.layer-card-primary_tabela .paginacao {
	margin-top: 0;
	padding: 10px 12px;
	border-top: 1px solid var(--border);
}
/* =============================================================================
   Abas do x-tab-pane horizontal: Tabs "segmented" do Kumo
   (kumo-ui.com/components/tabs)

   Trilha de 36px (h-9), raio 8px, fundo rebaixado com anel fino e 2px de
   respiro; abas na largura do rótulo (px-2.5), 14px, tom apagado que acende no
   hover; a ativa vira uma pílula de superfície com sombra leve e anel. O
   indicador do original desliza entre as abas por JS; aqui a troca é um fade de
   fundo e cor. Com abas demais para a largura, a trilha rola na horizontal.

   Os !important vencem as regras antigas de .nav.nav-tabs, que já os usam.
   ============================================================================= */
.nav.nav-tabs.abas {
	--abas-trilho: #f4f4f5;
	--abas-anel: rgba(0, 0, 29, 0.08);
	--abas-ativa: #ffffff;
	--abas-ativa-anel: rgba(0, 0, 29, 0.1);
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	max-width: 100%;
	height: 36px;
	padding: 0 2px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	border: 0;
	border-radius: 8px;
	background-color: var(--abas-trilho);
	box-shadow: 0 0 0 1px var(--abas-anel);
}
.nav.nav-tabs.abas::-webkit-scrollbar {
	display: none;
}
body.dark .nav.nav-tabs.abas {
	--abas-trilho: #0f0f0f;
	--abas-anel: rgba(255, 255, 255, 0.06);
	--abas-ativa: #232323;
	--abas-ativa-anel: rgba(255, 255, 255, 0.08);
}
.nav.nav-tabs.abas .nav-link {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 2px 0;
	padding: 0 10px !important;
	border: 0;
	border-radius: 6px;
	background-color: transparent !important;
	color: var(--muted-foreground) !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition-property: background-color, color, box-shadow;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
}
.nav.nav-tabs.abas .nav-link:hover {
	color: var(--foreground) !important;
}
.nav.nav-tabs.abas .nav-link.active {
	background-color: var(--abas-ativa) !important;
	color: var(--foreground) !important;
	box-shadow: 0 0 0 1px var(--abas-ativa-anel), 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Indicador que desliza entre as abas, como o do Kumo — só com CSS.

   A aba ativa vira âncora (anchor-name) e um pseudo-elemento da trilha se
   posiciona sobre ela com anchor() e anchor-size(). Quando o Bootstrap passa o
   .active para outra aba, a âncora muda de lugar e o left/width do indicador
   transicionam até ela. anchor-scope isola cada trilha: duas listas de abas na
   mesma página não disputam a mesma âncora.

   Sem suporte a anchor positioning (hoje, o Firefox) vale a regra acima: a aba
   ativa pinta o próprio fundo e a troca é instantânea. */
@supports (anchor-name: --aba) and (anchor-scope: --aba) {
	.nav.nav-tabs.abas {
		position: relative;
		anchor-scope: --aba-ativa;
	}

	.nav.nav-tabs.abas::before {
		content: "";
		position: absolute;
		position-anchor: --aba-ativa;
		top: anchor(top);
		left: anchor(left);
		width: anchor-size(width);
		height: anchor-size(height);
		z-index: 0;
		border-radius: 6px;
		background-color: var(--abas-ativa);
		box-shadow: 0 0 0 1px var(--abas-ativa-anel), 0 1px 2px rgba(0, 0, 0, 0.08);
		transition-property: left, width;
		transition-duration: 200ms;
		transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
		pointer-events: none;
	}

	.nav.nav-tabs.abas .nav-link {
		position: relative;
		z-index: 1;
	}

	.nav.nav-tabs.abas .nav-link.active {
		anchor-name: --aba-ativa;
		background-color: transparent !important;
		box-shadow: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.nav.nav-tabs.abas::before {
		transition: none;
	}
}
.nav.nav-tabs.abas .nav-link:focus-visible {
	outline: 2px solid var(--ring, #3b82f6);
	outline-offset: -2px;
}
/* Imagem dentro do layer card: 16px até os botões, e não 12 (da imagem) + 26
   (de cada botão) — o x-button-media traz as duas margens de fábrica. */
.layer-card-primary .box_media_actions > img {
	margin-bottom: 16px;
}
.layer-card-primary .box_media_actions .btn.margint26 {
	margin-top: 0;
}
/* =============================================================================
   x-layer-dialog: LayerDialog do Kumo sobre o modal do Bootstrap
   (kumo-ui.com/components/layer-dialog)

   Mesmos tokens do diálogo do Swal (.swal-zero7): casca na cor de camada com
   6px de respiro e raio 16; superfície do corpo em --card com anel --input e
   raio 10 (16 - 6, concêntrico); rodapé apoiado na casca. Entrada: sobe 8px
   com fade em 200ms, curva cubic-bezier(.32, .72, 0, 1), sem escala nem bounce.
   ============================================================================= */
.layer-dialog-modal {
	/* O .modal genérico deste arquivo desfoca o próprio container; aqui o
	   desfoque é do fundo (abaixo), como no Swal. */
	backdrop-filter: none;
	transition: opacity .2s cubic-bezier(.32, .72, 0, 1);
}
/* O fundo do Bootstrap é um irmão no <body>, fora do modal: :has() liga os dois
   sem JS. O desenho é o véu compartilhado dos backdrops (vidro fosco); aqui fica só o tempo do fade,
   o mesmo do painel. */
body:has(.layer-dialog-modal.show) .modal-backdrop {
	transition: opacity .2s cubic-bezier(.32, .72, 0, 1);
}
.modal-dialog.layer-dialog {
	--layer-dialog-largura: 448px;
	width: auto;
	max-width: min(var(--layer-dialog-largura), calc(100vw - 32px));
	margin-inline: auto;
}
.modal-dialog.layer-dialog_md { --layer-dialog-largura: 560px; }
.modal-dialog.layer-dialog_lg { --layer-dialog-largura: 720px; }
.modal-dialog.layer-dialog_xl { --layer-dialog-largura: 960px; }
/* A subida de 8px é da CASCA, não do .modal-dialog.

   O .modal-dialog-centered do bootstrap.css do projeto tem min-height: 100vh e o
   .modal é um contêiner com overflow-y: auto. Com o dialog inteiro 8px abaixo, ele
   terminava 8px depois do fim da tela: o .modal virava rolável durante os 200ms da
   entrada, e o macOS piscava a barra de rolagem toda vez que um diálogo abria. A
   casca fica centralizada e tem no máximo 100dvh - 32px, então os 8px cabem na
   folga de baixo e nada transborda. O dialog fica parado: o transform: none
   também cancela o -50px de entrada que o Bootstrap põe em todo .modal-dialog. */
.modal.fade .modal-dialog.layer-dialog {
	transform: none;
	transition: none;
}
.modal.fade .modal-dialog.layer-dialog .layer-dialog__casca {
	transform: translateY(8px);
	transition: transform .2s cubic-bezier(.32, .72, 0, 1);
}
.modal.show .modal-dialog.layer-dialog .layer-dialog__casca {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.layer-dialog-modal,
	.modal.fade .modal-dialog.layer-dialog .layer-dialog__casca {
		transition: none;
	}
}
.modal-content.layer-dialog__casca {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 32px);
	padding: 6px;
	border: 0;
	border-radius: 16px;
	background-color: var(--tertiary);
	box-shadow: 0 0 0 1px var(--border), 0 24px 48px -12px rgba(0, 0, 0, .45);
	color: var(--foreground);
}
/* O <x-form> entre a casca e o corpo não pode quebrar a coluna: sem isto o
   conteúdo longo empurraria o rodapé para fora da tela em vez de rolar. */
.layer-dialog__casca > form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.layer-dialog__superficie {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 10px;
	background-color: var(--card);
	box-shadow: 0 0 0 1px var(--input);
}
.layer-dialog__cabecalho {
	padding: 16px 18px 0;
}
.layer-dialog__cabecalho:last-child {
	padding-bottom: 16px;
}
.layer-dialog__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--foreground);
	text-wrap: balance;
}
.layer-dialog__descricao {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted-foreground);
	text-wrap: pretty;
}
.layer-dialog__conteudo {
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 18px 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Tema escuro: a barra de rolagem do conteúdo seguia o esquema claro do navegador
   (trilho branco e setas claras no Windows sobre o diálogo escuro), porque o tema
   é só a classe body.dark e nada declara color-scheme. Aqui o navegador desenha a
   barra nativa escura, sem redesenhar a barra à mão. Vale também para o textarea
   que rola dentro do diálogo. */
body.dark .layer-dialog__conteudo {
	color-scheme: dark;
}
/* Primeiro campo encosta no cabeçalho pelo respiro do conteúdo, não pela
   margem própria (margint16/26 que os campos trazem de outras telas). */
.layer-dialog__conteudo > :first-child {
	margin-top: 0 !important;
}
/* Painel de aba dentro do diálogo: sem fundo próprio. O .tab-pane pinta a cor da
   página (--background), que no diálogo virava uma caixa de outro tom em volta do
   conteúdo da aba (a aba Pix do modal de compra do Shop). */
.layer-dialog .tab-pane {
	background-color: transparent;
}
.layer-dialog__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-shrink: 0;
	padding: 8px 2px 2px;
}
.layer-dialog__acoes {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}
.layer-dialog__fechar {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--muted-foreground);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.layer-dialog__fechar:hover {
	background-color: var(--muted);
	color: var(--foreground);
}
.layer-dialog__fechar:focus-visible {
	outline: 2px solid var(--ring, #3b82f6);
	outline-offset: 2px;
}
/* "Fechar" escrito à mão dentro do slot do x-layer-dialog-rodape (quando o botão
   precisa de gancho próprio, como no x-alert-dialog): o slot vira a linha
   inteira e o botão vai para a esquerda, no lugar do "Fechar" automático. */
.layer-dialog__acoes:has(> .layer-dialog__fechar:first-child) {
	flex: 1 1 auto;
}
.layer-dialog__acoes > .layer-dialog__fechar:first-child {
	margin-inline-end: auto;
}
/* Paleta de busca da nav: o miolo (campo + sugestões) ocupa a superfície de
   ponta a ponta, sem o respiro de formulário do conteúdo. */
.layer-dialog__superficie.search-modal {
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background-color: var(--card);
}
.layer-dialog__superficie.search-modal .layer-dialog__conteudo {
	padding: 0;
}
.layer-dialog__superficie.search-modal .modal-header,
.layer-dialog__superficie.search-modal .modal-header .form-control {
	background-color: transparent;
}
/* Biblioteca de mídia: diálogo largo e de altura fixa (a da tela), para a grade
   e o painel de detalhes não mudarem de tamanho a cada filtro. O miolo antigo
   (.modal-body > abas > grade + .content-unique-file) preenche o conteúdo, e
   cada coluna rola sozinha. */
.media-dialog .modal-dialog.layer-dialog {
	--layer-dialog-largura: 1200px;
}
.media-dialog .modal-content.layer-dialog__casca {
	height: calc(100dvh - 32px);
}
.media-dialog .layer-dialog__cabecalho {
	padding-bottom: 0;
}
.media-dialog .layer-dialog__cabecalho .nav-tabs {
	margin-top: 12px;
}
.media-dialog .layer-dialog__conteudo {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}
.media-dialog .layer-dialog__conteudo > .modal-body {
	flex: 1 1 auto;
	min-height: 0;
}
.media-dialog .modal-body .content-files {
	overflow-y: auto;
}
.media-dialog .modal-body .content-unique-file {
	background-color: var(--tertiary);
}
/* =============================================================================
   Modal aberto a partir de um offcanvas (estorno em Vendas: o botão mora na
   folha de detalhe). O .offcanvas e o .offcanvas-backdrop sobem para
   2147483000+ para ficar acima do widget de suporte; sem isto o diálogo nasce
   em 1055, por baixo do fundo do offcanvas, e não recebe clique. Sobe o
   diálogo e o fundo dele por cima dos dois só enquanto há offcanvas aberto.

   Vale para todo .modal, não só o x-layer-dialog: o estorno de Vendas é um
   .modal comum e ficava atrás do véu do offcanvas, embaçado e sem clique.
   ============================================================================= */
body:has(.offcanvas.show) .modal-backdrop {
	z-index: 2147483002 !important;
}
body:has(.offcanvas.show) .modal,
body:has(.offcanvas.show) .layer-dialog-modal {
	z-index: 2147483003;
}
/* E o Swal (erro/sucesso do envio) continua por cima do diálogo. */
body:has(.offcanvas.show) .swal2-container {
	z-index: 2147483004 !important;
}
/* x-layer-dialog — grupo "planos": o bootstrap.css deste projeto fixa
   .modal-content em width: 500px, então md/lg/xl (560/720/960) paravam em 500.
   A casca acompanha a largura do .layer-dialog_*. */
.modal-content.layer-dialog__casca {
	width: 100%;
}
/* Abas no cabeçalho: o Tabs do Kumo (.abas), aqui em <ul><li>. */
.media-dialog .nav.nav-tabs.abas.midia-abas {
	margin-top: 14px;
	padding: 0 2px !important;
}
.media-dialog .midia-abas > .nav-item {
	display: flex;
}
.media-dialog .modal-body.midia {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	border-radius: 0;
}
/* O script põe .dragover no #drop-area enquanto o arquivo passa por cima. */
.media-dialog .midia__area.dragover .midia-envio__alvo {
	border-color: var(--foreground);
	background-color: var(--muted);
}
/* ---- Aba "Biblioteca" --------------------------------------------------- */
.media-dialog .modal-body .content-files.midia-biblioteca__lista {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 16px 18px 18px;
	overflow-y: auto;
}
/* Grade: colunas que se ajustam à largura, miniatura quadrada. */
.media-dialog #file-list.midia-grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.media-dialog #file-list.midia-grade li.file-item {
	position: relative;
	width: auto;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--muted);
	box-shadow: 0 0 0 1px var(--input);
	cursor: pointer;
	transition: box-shadow .15s ease-out;
}
.media-dialog #file-list.midia-grade li.file-item:hover {
	box-shadow: 0 0 0 1px var(--muted-foreground);
}
.media-dialog #file-list.midia-grade li.file-item > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Selecionado: anel de 2px na cor do texto, com um vão da cor do cartão. */
.media-dialog #file-list.midia-grade li.file-item.active {
	border-radius: 10px;
	box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--foreground);
}
.media-dialog #file-list.midia-grade li.file-item .box-check {
	top: 6px !important;
	right: 6px !important;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 999px;
	background-color: var(--foreground);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.media-dialog #file-list.midia-grade li.file-item .box-check img {
	width: 14px;
	height: 14px;
}
/* Arquivo que não é imagem: ícone e nome no lugar da miniatura. */
.media-dialog #file-list.midia-grade li.file-item_arquivo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	text-align: center;
}
/* ---- Painel de detalhes ------------------------------------------------- */
.media-dialog .modal-body .content-unique-file.midia-detalhe {
	flex: 0 0 300px;
	width: 300px;
	height: 100%;
	padding: 16px 18px;
	border-left: 1px solid var(--input);
	background-color: var(--tertiary);
	overflow-y: auto;
}
.media-dialog .modal-body .content-unique-file .midia-detalhe__previa img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-height: 220px;
	object-fit: contain;
}
/* As regras antigas de .content-unique-file input/button (borda, fonte 12px,
   largura 100%) não valem aqui: campos e botões seguem o desenho do painel. */
.media-dialog .modal-body .content-unique-file.midia-detalhe .form-control {
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	color: var(--foreground);
}
.media-dialog .modal-body .content-unique-file.midia-detalhe .midia-detalhe__copiar {
	display: inline-flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: var(--card);
	box-shadow: inset 0 0 0 1px var(--input);
	color: var(--foreground);
	font-size: 16px;
	cursor: pointer;
}
.media-dialog .modal-body .content-unique-file.midia-detalhe .midia-detalhe__copiar:hover {
	background-color: var(--muted);
}
.media-dialog .modal-body .content-unique-file.midia-detalhe .midia-detalhe__excluir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin-top: 20px;
	padding: 6px 8px;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--nl-danger-text, #dc2626);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.media-dialog .modal-body .content-unique-file.midia-detalhe .midia-detalhe__excluir:hover {
	background-color: rgba(220, 38, 38, .1);
}
/* Celular: detalhes embaixo da grade, não ao lado. */
@media (max-width: 743px) {

	.media-dialog .modal-body .content-unique-file.midia-detalhe {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		max-height: 45%;
		border-top: 1px solid var(--input);
		border-left: 0;
	}
}
/* Filtros da biblioteca numa linha: o .form-control.form-select do x-select é
   100% de largura; aqui cada select fica do tamanho do rótulo. */
.media-dialog .midia-filtros .form-control.form-select.campo-filtro-select {
	flex: 0 0 auto;
	width: auto !important;
	min-width: 160px;
}
@media (max-width: 743px) {
	.media-dialog .midia-filtros .form-control.form-select.campo-filtro-select {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
	}
}
/* As abas (.tab-pane) herdam fundo --background de uma regra global: dentro do
   diálogo isso pintava um retângulo de outra cor sobre a superfície, com canto
   reto embaixo. Aqui o painel é transparente e a superfície recorta o que
   encostar nas bordas. */
.media-dialog .tab-content > .tab-pane {
	background-color: transparent;
}
.media-dialog .layer-dialog__superficie {
	overflow: hidden;
}
/* =============================================================================
   Sem anel de foco em contêineres

   Painel de aba (tabindex="0" do Bootstrap/ARIA), modal (tabindex="-1", recebe o
   foco ao abrir), formulário e div/section com tabindex recebem foco pelo Tab
   ou por script, e o navegador desenhava o contorno azul padrão em volta do
   bloco inteiro. Eles não são controles: o anel continua só em quem se aciona
   (botão, link, campo, aba e div com role="button", que têm o foco próprio).
   ============================================================================= */
.tab-pane:focus,
.tab-pane:focus-visible,
[role="tabpanel"]:focus,
[role="tabpanel"]:focus-visible,
.modal:focus,
.modal:focus-visible,
.offcanvas:focus,
.offcanvas:focus-visible,
[role="dialog"]:focus,
[role="dialog"]:focus-visible,
form:focus,
form:focus-visible,
div[tabindex]:not([role="button"]):not([role="tab"]):not([role="option"]):not([role="menuitem"]):focus,
div[tabindex]:not([role="button"]):not([role="tab"]):not([role="option"]):not([role="menuitem"]):focus-visible,
section[tabindex]:focus,
section[tabindex]:focus-visible {
	outline: none;
}
/* =============================================================================
   Tags antigas no desenho do x-badge-estado

   `.tag.tag_<estado>` (status da Nelogica, importação, possíveis stops, alertas
   de drawdown, coluna baseEnum da tabela genérica) e as caixas de valor
   `.tag_positive` / `.tag_negative` / `.tag_pendente` eram retângulos de largura
   fixa com cantos e padding variando por tela. Aqui viram a mesma pílula do
   x-badge-estado: fundo no tom a 14%, texto no tom, ponto na frente.

   Só os modificadores que já tinham cor entram: a coluna baseEnum da tabela
   gera `tag_<valor>` para qualquer enum (tipo, categoria…) e esses continuam
   texto simples. O `.tag` sozinho é o contador do filtro (filter-dropdown).

   Os !important vencem as utilidades que a marcação antiga carrega junto
   (padding4/8, radius-6, rounded-1, py-2 px-3, w-100, f-size-12) e as regras
   `.tabela tbody tr td .tag.tag_*` mais acima, que cravam largura e padding.
   ============================================================================= */
.tag.tag_erros, .tag.tag_cancelado, .tag.tag_deletado, .tag.tag_expirado,
.tag.tag_pagamento_pendente, .tag.tag_falhou, .tag.tag_estornado, .tag.tag_estorno_parcial,
.tag.tag_pago, .tag.tag_finalizado, .tag.tag_ativo,
.tag.tag_processando, .tag.tag_pendente, .tag.tag_aguardando_pagamento,
.tag.tag_novo, .tag.tag_pausado, .tag.tag_chargeback,
.tag_positive, .tag_negative, .tag_pendente, .tag_pendente2, .tag_positiva, .tag_negativa {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: fit-content !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 4px 8px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	text-align: start;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--estado)) !important;
	background-color: rgb(var(--estado) / .14) !important;
}
.tag.tag_erros::before, .tag.tag_cancelado::before, .tag.tag_deletado::before, .tag.tag_expirado::before,
.tag.tag_pagamento_pendente::before, .tag.tag_falhou::before, .tag.tag_estornado::before, .tag.tag_estorno_parcial::before,
.tag.tag_pago::before, .tag.tag_finalizado::before, .tag.tag_ativo::before,
.tag.tag_processando::before, .tag.tag_pendente::before, .tag.tag_aguardando_pagamento::before,
.tag.tag_novo::before, .tag.tag_pausado::before, .tag.tag_chargeback::before,
.tag_positive::before, .tag_negative::before, .tag_pendente::before, .tag_pendente2::before,
.tag_positiva::before, .tag_negativa::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background-color: currentColor;
	flex-shrink: 0;
}
/* Tons: os mesmos do x-badge-estado. */
.tag.tag_erros, .tag.tag_cancelado, .tag.tag_deletado, .tag.tag_expirado,
.tag.tag_pagamento_pendente, .tag.tag_falhou, .tag.tag_estornado, .tag.tag_estorno_parcial,
.tag_negative, .tag_negativa {
	--estado: 233 20 45;
}
.tag.tag_pago, .tag.tag_finalizado, .tag.tag_ativo,
.tag_positive, .tag_positiva {
	--estado: 0 137 50;
}
.tag.tag_processando, .tag.tag_pendente, .tag.tag_aguardando_pagamento,
.tag_pendente, .tag_pendente2 {
	--estado: 217 119 6;
}
.tag.tag_novo, .tag.tag_pausado, .tag.tag_chargeback {
	--estado: 113 113 122;
}
/* Mais estados com cor nas tags antigas (nota fiscal, repasse, reprovação):
   mesma pílula do bloco "Tags antigas no desenho do x-badge-estado". */
.tag.tag_aprovado, .tag.tag_invalida, .tag.tag_negado, .tag.tag_reprovado {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: fit-content !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 4px 8px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: rgb(var(--estado)) !important;
	background-color: rgb(var(--estado) / .14) !important;
}
.tag.tag_aprovado::before, .tag.tag_invalida::before, .tag.tag_negado::before, .tag.tag_reprovado::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background-color: currentColor;
	flex-shrink: 0;
}
.tag.tag_aprovado { --estado: 0 137 50; }
.tag.tag_invalida, .tag.tag_negado, .tag.tag_reprovado { --estado: 233 20 45; }
/* x-tabs com o visual .abas: nas telas de notícias os gatilhos vêm embrulhados
   em <a> (a aba é um link com o período na URL). O link vira o item flex e o
   gatilho ocupa a altura toda, como no x-tab-pane. */
.nav.nav-tabs.abas > a {
	display: flex;
	flex: 0 0 auto;
	text-decoration: none;
}
/* Grade de campos do cartão: três por linha na tela larga, dois no meio, um no
   celular. Grade, e não col-4 com margem por linha: o número de campos muda com
   o status do plano (a etapa some quando o status não tem lista). */
.plano-campos > .form-group,
.plano-campos > div > .form-group {
	margin-top: 0 !important;
}
/* Ações de linha fora de .tabela__fixa-direita: mesmo botão de 28px, lado a
   lado. O excluir vem dentro de um form, que não pode quebrar a linha. */
.tabela-acoes .btn.tabela__acao-icone {
	width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
	padding: 0 !important;
}
.tabela-acoes .btn.tabela__acao-icone.bg-background:not(:hover) {
	background-color: transparent !important;
}
/* =============================================================================
   Toast no desenho do Kumo (kumo-ui.com/components/toast)

   Classes postas pelo mixin Toast (requisicaoformulario.js) só onde o main.css
   carrega. Anatomia do original: cartão de 340px com raio 12, 16px de respiro,
   anel fino e véu na cor da variante sobre o fundo base, sombra grande; ícone
   preenchido de 16px e título na cor da variante; descrição em tom secundário;
   X no canto (20px). Movimento: desliza e some em 500ms com
   cubic-bezier(.22, 1, .36, 1) — o original sobe de baixo; aqui desce do topo.

   O !important vence o CSS que o SweetAlert injeta em runtime e as regras
   antigas de .swal2-toast mais acima (sombra na cor primária, título 16px).
   ============================================================================= */
.swal2-container.toast-kumo-container {
	padding: 16px !important;
}
.swal2-popup.swal2-toast.toast-kumo {
	--toast: 113 113 122;
	position: relative;
	display: grid !important;
	grid-template-columns: 16px minmax(0, 1fr);
	column-gap: 8px;
	row-gap: 2px;
	align-items: start;
	width: min(340px, calc(100vw - 32px)) !important;
	padding: 16px 36px 16px 16px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background-color: var(--popover) !important;
	background-image: linear-gradient(rgb(var(--toast) / .07), rgb(var(--toast) / .07)) !important;
	box-shadow: 0 0 0 1px rgb(var(--toast) / .45), 0 10px 15px -3px rgba(0, 0, 0, .12), 0 4px 6px -4px rgba(0, 0, 0, .1) !important;
	color: var(--foreground) !important;
	overflow: hidden;
}
body.dark .swal2-popup.swal2-toast.toast-kumo {
	box-shadow: 0 0 0 1px rgb(var(--toast) / .45), 0 10px 15px -3px rgba(0, 0, 0, .45), 0 4px 6px -4px rgba(0, 0, 0, .35) !important;
}
/* Tons: verde, vermelho, âmbar e azul, mais claros no escuro para o título
   manter contraste sobre o fundo. */
.swal2-popup.toast-kumo.swal2-icon-success { --toast: 22 163 74; }
.swal2-popup.toast-kumo.swal2-icon-error { --toast: 220 38 38; }
.swal2-popup.toast-kumo.swal2-icon-warning { --toast: 217 119 6; }
.swal2-popup.toast-kumo.swal2-icon-info,
.swal2-popup.toast-kumo.swal2-icon-question { --toast: 37 99 235; }
body.dark .swal2-popup.toast-kumo.swal2-icon-success { --toast: 74 222 128; }
body.dark .swal2-popup.toast-kumo.swal2-icon-error { --toast: 248 113 113; }
body.dark .swal2-popup.toast-kumo.swal2-icon-warning { --toast: 251 191 36; }
body.dark .swal2-popup.toast-kumo.swal2-icon-info,
body.dark .swal2-popup.toast-kumo.swal2-icon-question { --toast: 96 165 250; }
/* Ícone: o círculo animado do SweetAlert sai; fica o ícone preenchido. */
.swal2-popup.toast-kumo .swal2-icon.toast-kumo__icone {
	display: flex !important;
	grid-column: 1;
	grid-row: 1;
	align-items: center;
	justify-content: center;
	width: 16px !important;
	height: 20px !important;
	min-width: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	color: rgb(var(--toast)) !important;
	animation: none !important;
}
.swal2-popup.toast-kumo .swal2-icon.toast-kumo__icone > :not(i) {
	display: none !important;
}
.swal2-popup.toast-kumo .toast-kumo__titulo {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	text-align: start !important;
	color: rgb(var(--toast)) !important;
	text-wrap: pretty;
	overflow-wrap: break-word;
}
/* Toast sem ícone: o título ocupa a primeira coluna também. */
.swal2-popup.toast-kumo:not([class*="swal2-icon-"]) .toast-kumo__titulo {
	grid-column: 1 / -1;
	color: var(--foreground) !important;
}
.swal2-popup.toast-kumo .toast-kumo__texto {
	grid-column: 2;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	text-align: start !important;
	color: var(--muted-foreground) !important;
}
.swal2-popup.toast-kumo .toast-kumo__fechar {
	position: absolute !important;
	top: 8px;
	right: 8px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 4px !important;
	background: transparent !important;
	color: var(--muted-foreground) !important;
	font-size: 12px !important;
	box-shadow: none !important;
	transition: background-color .15s ease-out, color .15s ease-out;
}
.swal2-popup.toast-kumo .toast-kumo__fechar:hover {
	background-color: rgb(var(--toast) / .15) !important;
	color: var(--foreground) !important;
}
.swal2-popup.toast-kumo .toast-kumo__fechar:focus-visible {
	outline: 2px solid rgb(var(--toast)) !important;
	outline-offset: 1px;
}
/* Entrada e saída: desce de cima com fade; sai subindo e sumindo. */
.swal2-popup.toast-kumo.toast-kumo-entra {
	animation: toast-kumo-entra .5s cubic-bezier(.22, 1, .36, 1) both;
}
.swal2-popup.toast-kumo.toast-kumo-sai {
	animation: toast-kumo-sai .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes toast-kumo-entra {
	from {
		opacity: 0;
		transform: translateY(-150%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes toast-kumo-sai {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-150%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.swal2-popup.toast-kumo.toast-kumo-entra,
	.swal2-popup.toast-kumo.toast-kumo-sai {
		animation-duration: .01ms;
	}
}
/* Números que mudam (datas, valores, contagens) com largura fixa por dígito, para a
   coluna não tremer entre linhas. */
.plano-detalhe .tabela td,
.plano-detalhe .dado__valor {
	font-variant-numeric: tabular-nums;
}
/* O acordeão do componente pinta --background com !important (o fundo da página),
   que dentro do card virava uma faixa de outro tom. Aqui ele herda a superfície. */
.acoes-nelogica .ui-accordion,
.acoes-nelogica .ui-component-accordion-item,
.acoes-nelogica .ui-accordion-button,
.acoes-nelogica .ui-accordion-button:not(.collapsed) {
	background: transparent !important;
}
.acoes-nelogica .ui-component-accordion-item {
	border-bottom: 0;
	border-top: 1px solid var(--border);
}
.acoes-nelogica .ui-accordion-button {
	gap: 12px;
	padding: 12px 16px !important;
	transition: background-color .15s ease;
}
/* Hover como fundo, não sublinhado: a linha inteira é o alvo. */
.acoes-nelogica .ui-accordion-button:hover {
	text-decoration: none;
	background-color: var(--accent) !important;
}
.acoes-nelogica .ui-accordion-button:focus-visible {
	outline: 2px solid var(--ring, var(--muted-foreground));
	outline-offset: -2px;
}
.acoes-nelogica .ui-accordion-button > svg {
	flex-shrink: 0;
	color: var(--muted-foreground);
	transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
/* Itens encaixados na linha: sem moldura própria nem respiro extra, só o fio que
   separa do cabeçalho da ação. */
.acoes-nelogica .ui-accordion-body {
	padding: 0 !important;
}
.acoes-nelogica .ui-accordion-body .tabela-moldura {
	border: 0;
	border-top: 1px solid var(--border);
	border-radius: 0;
	background-color: transparent;
}
.acoes-nelogica > .paginacao {
	margin-top: 0;
	border-top: 1px solid var(--border);
}
/* Sem pontos de saldo o canvas some, mas a caixa de 300px ficava: meia tela vazia
   com a frase no rodapé. Sem canvas visível, a caixa sai e fica só o recado. */
#nelogicaLive .nl-chart-wrap:has(> canvas.nl-hidden) {
	display: none;
}
/* Primeira coluna da tabela de itens alinhada ao selo da linha da ação (16px). */
.acoes-nelogica .ui-accordion-body .tabela th:first-child,
.acoes-nelogica .ui-accordion-body .tabela td:first-child {
	padding-left: 16px;
}
/* =============================================================================
   Tabelas que cabem em 1440px

   Por padrão célula não quebra linha (valor, data e referência partidos não se
   leem), e o .tabela__texto quebra com piso de 14rem, pensado para descrição
   longa. Nas listagens com vários textos médios (plano, cliente, e-mail,
   produto, log) isso fazia a tabela passar da tela e a coluna fixa de ações
   cobrir a última coluna.

   - .tabela__quebra: texto médio que pode ir para duas linhas, com piso de 7rem;
     e-mail quebra antes do "@" (helper breakableEmail).
   - Cabeçalho pode quebrar: com o layout automático da tabela isso só acontece
     quando falta largura — tabela que já cabe não muda.
   ============================================================================= */
.tabela th {
	white-space: normal;
	text-wrap: balance;
}
.tabela th.tabela__fixa-direita {
	white-space: nowrap;
}
.tabela td.tabela__quebra {
	min-width: 7rem;
	white-space: normal;
	/* break-word, e não anywhere: só parte a palavra se ela não couber de jeito
	   nenhum, e não entra no cálculo de largura mínima da coluna. E-mail quebra
	   antes do "@" pelo <wbr> do helper breakableEmail(). */
	overflow-wrap: break-word;
	text-wrap: pretty;
}
/* Texto livre e longo no <x-table> (descrição que o suporte escreve no log do plano,
   observação, motivo). Com o `nowrap` da .tabela a descrição inteira virava uma linha
   só, e a tabela rolava centenas de pixels para o lado. Aqui ela quebra linha numa
   largura fixa: no máximo 24rem — o texto longo para nela e desce —, e no mínimo 14rem,
   para não virar uma coluna de duas palavras por linha numa tela estreita. O limite fica
   no bloco de dentro, e não na célula: max-width em <td> é ignorado pela tabela.
   `anywhere` parte também o que não tem espaço (URL, id, e-mail colado). */
.tabela td.tabela__longo {
	white-space: normal;
}
.tabela__longo-texto {
	min-width: 14rem;
	max-width: 24rem;
	white-space: pre-line;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}
/* Texto comprido (a mensagem de reprovação que o suporte manda tem 2 mil caracteres)
   mostra 4 linhas; o "Ver mais" abre o resto. Sem isso a linha da tabela passava de
   1.900px de altura. */
.tabela__longo-texto_recolhido {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}
.tabela__longo-alternar {
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.tabela__longo-alternar:hover {
	text-decoration: underline;
}
/* Motivo da análise (solicitações de aprovação): 12rem de piso em vez de 14 —
   era o que faltava para a fila caber em 1440px sem rolar. */
.tabela td.coluna-motivo-analise {
	min-width: 12rem;
}
/* Célula com ícone + texto que pode quebrar: o ícone fica no topo da primeira
   linha, e não centralizado no meio das duas. */
.tabela td.tabela__quebra .celula-dado {
	align-items: flex-start;
}
.tabela td.tabela__quebra .celula-dado .celula-icone {
	margin-top: 3px;
	flex-shrink: 0;
}
/* Log da Nelogica: a mensagem crua da API pode ser longa; quebra com piso de
   7rem em vez de esticar a tabela por centenas de pixels. */
.tabela td.tabela__quebra.tabela__log {
	min-width: 7rem;
	font-size: 13px;
	color: var(--muted-foreground);
}
/* Tabela com muitas colunas (Nelogica > Cadastros, alertas de drawdown): 8px de respiro lateral
   em vez de 10, o que falta para caber em 1440px sem rolar. */
.tabela.tabela_densa th,
.tabela.tabela_densa td {
	padding-inline: 8px;
}
/* =============================================================================
   x-table.* (Kumo-style composable table)

   The components reuse the existing .tabela / .tabela-moldura look on desktop;
   this block only adds what is new: the actions wrapper, the selected row and
   the stacked (card) mode for small screens.
   ============================================================================= */
.table-cell__value {
	display: contents;
}
.table-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.tabela tbody tr.table-row_selected {
	--tabela-linha: var(--accent);
}
.tabela__fixa-direita > .table-actions > .btn.tabela__acao-icone.table-action_destructive {
	color: var(--nl-danger-text, #dc2626);
}
/* Stacked mode: up to 768px (the same breakpoint the old hand-written mobile
   cards used) each row becomes a card, one "label — value" line per cell.
   The label comes from the cell's data-label; the header row is hidden
   visually but kept for screen readers. */
@media (max-width: 768px) {
	.tabela-moldura.table-stack {
		overflow: visible;
		border: 0;
		border-radius: 0;
		background-color: transparent;
	}

	.table-stack .tabela,
	.table-stack .tabela tbody,
	.table-stack .tabela tr,
	.table-stack .tabela td {
		display: block;
		width: 100%;
	}

	.table-stack .tabela thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.table-stack .tabela tbody {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.table-stack .tabela tbody tr {
		--tabela-linha: var(--card);
		padding: 4px 16px;
		border: 1px solid var(--input);
		border-radius: 10px;
		background-color: var(--card);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	}

	.table-stack .tabela td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		min-width: 0 !important;
		padding: 10px 0 !important;
		border-bottom: 1px solid var(--border);
		white-space: normal;
		overflow-wrap: anywhere;
		text-align: end;
	}

	.table-stack .tabela td > .table-cell__value {
		display: block;
		min-width: 0;
		max-width: 65%;
	}

	.table-stack .tabela td:not([data-label]) > .table-cell__value {
		max-width: 100%;
	}

	.table-stack .tabela td::before {
		content: attr(data-label);
		flex-shrink: 0;
		font-size: 14px;
		font-weight: 500;
		color: var(--foreground);
		text-align: start;
	}

	.table-stack .tabela td:not([data-label])::before {
		content: none;
	}

	/* Cell without label (e.g. a full block): spans the card. */
	.table-stack .tabela td:not([data-label]) {
		justify-content: flex-start;
		text-align: start;
	}

	.table-stack .tabela td:last-child {
		border-bottom: 0;
	}

	/* Actions: last line of the card, aligned right, no sticky/fade. */
	.table-stack .tabela td.tabela__fixa-direita {
		position: static;
		justify-content: flex-end;
		width: 100%;
		background: transparent;
	}

	.table-stack .tabela td.tabela__fixa-direita::before {
		content: none;
		display: none;
	}
}
/* Same row-button look as the direct-child rules above (28px, transparent at
   rest, accent when the menu is open), for buttons inside .table-actions. */
.tabela__fixa-direita > .table-actions > .btn[data-bs-toggle="dropdown"],
.tabela__fixa-direita > .table-actions > .btn.tabela__acao-icone {
	width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
	padding: 0 !important;
}
.tabela__fixa-direita > .table-actions > .btn[data-bs-toggle="dropdown"]:not(:hover):not([aria-expanded="true"]),
.tabela__fixa-direita > .table-actions > .btn.tabela__acao-icone:not(:hover) {
	background-color: transparent !important;
}
.tabela__fixa-direita > .table-actions > .btn[data-bs-toggle="dropdown"][aria-expanded="true"] {
	background-color: var(--accent) !important;
}
/* ==========================================================================
   Telefone nas listagens (<x-phone>): bandeira, número e o atalho do WhatsApp
   ========================================================================== */
.phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
/* Assinatura do Replicador (issue #317): só o período a pagar tem ação. No celular, a célula de
   ações vazia dos períodos pagos viraria uma linha em branco no fim do cartão. */
@media (max-width: 768px) {
	.assinatura-replicador.table-stack .tabela td.tabela__fixa-direita:not(:has(.table-actions > *)) {
		display: none;
	}
}
/* =============================================================================
   Link (x-link) — porte do Link do Kumo: azul, sublinhado com respiro e, quando
   leva para fora, o ícone de link externo colado ao texto.
   ============================================================================= */
:root {
	--link: #2563eb;
	--link-hover: #1d4ed8;
}
body.dark {
	--link: #60a5fa;
	--link-hover: #93c5fd;
}
.link-kumo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .15s ease;
}
.link-kumo:hover {
	color: var(--link-hover);
	text-decoration-thickness: 1.5px;
}
.link-kumo:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: 4px;
}
.link-kumo__texto {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.link-kumo__externo {
	flex: none;
	width: 1em;
	height: 1em;
}
/* O select de evento cresce até a opção mais longa ("Black Arrow · Consulta de
   challenge do cliente"): no celular ele vazava a tela. */
.registro-integracoes__filtro-evento .campo-filtro-select {
	max-width: 100%;
	text-overflow: ellipsis;
}
/* Filtros de Meus planos: busca, status, estado e as duas datas numa linha só no desktop. A
   busca fica com o que sobra (no mínimo 220px) em vez dos 400px fixos, e as datas na largura
   de "dd/mm/aaaa"; no celular a busca toma a linha e as datas dividem a de baixo. */
.carreira-filtros .campo-busca {
	flex: 1 1 220px;
	max-width: none;
}
/* Prêmios aprovados sem prêmio: o card estica até a altura da coluna da
   carteira, e o vazio fica no meio dela, não colado no topo. */
.layer-card-primary.premios-vazio {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Solicitações em andamento: descrição e linhas no mesmo ritmo de 12px; data à
   esquerda, valor e status juntos à direita, tudo no mesmo eixo. */
.saques-andamento__descricao {
	margin: 0;
	font-size: 14px;
	color: var(--muted-foreground);
}
.saques-andamento__linha {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
}
.saques-andamento__linha:last-child {
	padding-bottom: 0;
}
.saques-andamento__data {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}
.saques-andamento__data svg,
.saques-andamento__data i {
	width: 16px;
	height: 16px;
	color: var(--muted-foreground);
}
.saques-andamento__valor {
	margin-left: auto;
	font-size: 14px;
	font-weight: 500;
}
/* =============================================================================
   ClipboardText (x-clipboard-text) — porte do Kumo
   O campo usa os mesmos tokens do .form-control (fundo, anel, texto), então
   segue o claro e o escuro do resto dos campos. O estado copiado vem de
   [data-copiado], ligado pelo main.js por 1,5s: a troca de ícone e o tooltip
   "copiado" são só CSS.
   ============================================================================= */
.clipboard-text {
	--clipboard-altura: 40px;
	--clipboard-fonte: 13px;
	--clipboard-raio: 8px;
	/* Curva de saída forte (Emil Kowalski): começa rápido, assenta suave. */
	--clipboard-curva: cubic-bezier(.2, 0, 0, 1);
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	height: var(--clipboard-altura);
	border-radius: var(--clipboard-raio);
	background-color: var(--campo-fundo);
	box-shadow: 0 0 0 1px var(--campo-anel);
	color: var(--campo-texto);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--clipboard-fonte);
}
.clipboard-text_base {
	--clipboard-altura: 36px;
}
.clipboard-text_sm {
	--clipboard-altura: 28px;
	--clipboard-fonte: 12px;
	--clipboard-raio: 6px;
}
.clipboard-text__texto {
	flex: 1 1 auto;
	min-width: 0;
	align-self: center;
	padding-inline: 14px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.clipboard-text_sm .clipboard-text__texto {
	padding-inline: 10px 6px;
}
.clipboard-text__botao {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 12px;
	border: 0;
	border-inline-start: 1px solid var(--campo-anel);
	border-radius: 0 var(--clipboard-raio) var(--clipboard-raio) 0;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
	.clipboard-text__botao:hover {
		background-color: var(--tertiary);
	}
}
.clipboard-text__botao:focus-visible {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--campo-foco);
}
/* Aperto: o miolo encolhe 3% e volta rápido — o botão responde ao dedo. */
.clipboard-text__icones {
	position: relative;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	transition: scale .16s var(--clipboard-curva);
}
.clipboard-text__botao:active .clipboard-text__icones {
	scale: .97;
}
/* Troca de ícone: os dois no mesmo lugar; o que sai encolhe para 0.25,
   desfoca e some, o que entra faz o caminho inverso. O blur funde os dois no
   meio da troca, e não se veem dois ícones sobrepostos. A volta (ao fim dos
   1,5s) é mais curta que a ida: a confirmação merece ser vista, o retorno não. */
.clipboard-text__icone {
	grid-area: 1 / 1;
	font-size: 16px;
	line-height: 1;
	transition-property: scale, opacity, filter;
	transition-duration: .15s;
	transition-timing-function: var(--clipboard-curva);
}
.clipboard-text__icone_feito {
	color: #16a34a;
	scale: .25;
	opacity: 0;
	filter: blur(4px);
}
body.dark .clipboard-text__icone_feito {
	color: #4ade80;
}
[data-copiado] .clipboard-text__icone {
	transition-duration: .3s;
}
[data-copiado] .clipboard-text__icone_feito {
	scale: 1;
	opacity: 1;
	filter: blur(0);
}
[data-copiado] .clipboard-text__icone_copiar {
	scale: .25;
	opacity: 0;
	filter: blur(4px);
}
/* Tooltip em CSS puro. Ancorado pela borda direita do botão e crescendo para
   dentro do campo: centralizado, ele passava da borda do botão e era cortado
   pelo contêiner com rolagem do modal. Entra de 0.97 a partir do canto que
   aponta para o botão (origem no gatilho), em 125ms. */
.clipboard-text__botao[data-dica]::after {
	content: attr(data-dica);
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 5;
	padding: 5px 10px;
	border-radius: 6px;
	background-color: var(--campo-fundo);
	box-shadow: 0 0 0 1px var(--campo-anel), 0 4px 12px rgba(0, 0, 0, .12);
	color: var(--campo-texto);
	font-family: var(--bs-body-font-family, system-ui, sans-serif);
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	scale: .97;
	transform-origin: bottom right;
	transition: opacity .125s ease-out, scale .125s ease-out;
}
@media (hover: hover) and (pointer: fine) {
	.clipboard-text__botao[data-dica]:hover::after {
		opacity: 1;
		scale: 1;
	}
}
.clipboard-text__botao[data-dica]:focus-visible::after,
[data-copiado] .clipboard-text__botao[data-dica]::after {
	opacity: 1;
	scale: 1;
}
[data-copiado] .clipboard-text__botao[data-dica]::after {
	content: attr(data-dica-copiado);
}
/* Menos movimento: sem escala nem blur, só a troca de opacidade. */
@media (prefers-reduced-motion: reduce) {
	.clipboard-text__icone,
	[data-copiado] .clipboard-text__icone {
		scale: 1 !important;
		filter: none !important;
	}

	.clipboard-text__botao[data-dica]::after {
		scale: 1;
	}
}/* =============================================================================
   Ajustes do zero-7
   ============================================================================= */

/* Cores por fase (GetTraderBackgroundTier) sobre o desenho novo.

   O desenho novo redefine os tokens do tema em `body.dark` e `:root` — e, vindo
   depois do main.css, anulava as cores por fase: o fundo verde/azul/dourado voltava
   ao cinza do Kumo. `html body[...]` ganha de `body.dark` pela especificidade, sem
   depender da ordem dos arquivos.

   Além dos tokens que o main.css já tingia (fundo, destaque, bordas), o desenho novo
   trouxe superfícies em camadas — card, camada dos layer-cards (--tertiary), campo
   de formulário e zebra da tabela. Elas passam a nascer da cor da fase, mantendo a
   relação do desenho original: no escuro, o card um pouco abaixo do fundo, a camada
   um pouco acima e o campo no meio; no claro, o card e o campo quase brancos. */
html body[class*="trader-tier-"] {
	--background:    var(--trader-surface);
	--accent:        color-mix(in oklab, rgb(var(--trader-rgb)) var(--trader-accent-mix), var(--trader-surface));
	--muted:         var(--accent);
	--secondary:     var(--accent);
	--border:        color-mix(in oklab, rgb(var(--trader-rgb)) var(--trader-border-mix), var(--trader-surface));
	--input:         var(--border);

	--card:          color-mix(in oklab, var(--trader-surface) 40%, #ffffff);
	--tertiary:      color-mix(in oklab, rgb(var(--trader-rgb)) 5%, var(--trader-surface));
	--tabela-zebra:  color-mix(in oklab, rgb(var(--trader-rgb)) 5%, var(--trader-surface));
	--campo-fundo:   #ffffff;
	--campo-anel:    color-mix(in oklab, rgb(var(--trader-rgb)) 22%, var(--trader-surface));
}

html body.dark[class*="trader-tier-"] {
	--card:          color-mix(in oklab, var(--trader-surface) 88%, #000000);
	--tertiary:      color-mix(in oklab, rgb(var(--trader-rgb)) 9%, var(--trader-surface));
	--tabela-zebra:  color-mix(in oklab, var(--trader-surface) 88%, #000000);
	--campo-fundo:   color-mix(in oklab, var(--trader-surface) 92%, #000000);
	--campo-anel:    color-mix(in oklab, rgb(var(--trader-rgb)) 20%, var(--trader-surface));
}

/* Ordem dos utilitários de cor. No main.css da Trading `.text-primary-foreground`
   vem antes de `.bg-background`, e os dois têm !important: quem pinta o texto é o
   `.bg-background`. Aqui a primeira veio para este arquivo (que carrega depois do
   main.css) e passou a ganhar — o botão `ghost_simple` (seta das linhas da tabela,
   "…" dos menus) ficava com o texto da cor do fundo e sumia no tema escuro. */
.bg-background {
	color: var(--foreground) !important;
}

/* Etapas do zero-7 com nome comprido ("Aguardando Ativação da Conta (Incubadora)").
   No cartão do celular (tabela empilhada) o selo divide a linha com o rótulo da
   coluna, e com nowrap o texto saía pela borda do cartão. Ali ele quebra linha. */
@media (max-width: 767.98px) {
	.table-stack .badge-estado {
		white-space: normal;
		text-align: start;
		height: auto;
	}
}

/* Modais escritos à mão (≈70 no painel e na área do trader): o mesmo desenho do
   x-layer-dialog sem reescrever cada um. Todos seguem o molde
   .modal-content > .modal-body.bg-background — o .modal-content vira a casca
   (fundo de camada, 6px de respiro, raio 16px) e o .modal-body vira a superfície
   (cartão com anel, raio concêntrico de 10px). Os que já usam o componente têm
   .layer-dialog__casca e ficam de fora pelo :not(). */
.modal-content:not(.layer-dialog__casca):has(> .modal-body.bg-background) {
	padding: 6px;
	border: 0;
	border-radius: 16px;
	background-color: var(--tertiary);
	box-shadow: 0 0 0 1px var(--border), 0 24px 48px -12px rgba(0, 0, 0, .45);
	color: var(--foreground);
}
.modal-content:not(.layer-dialog__casca) > .modal-body.bg-background {
	border-radius: 10px;
	background-color: var(--card) !important;
	box-shadow: 0 0 0 1px var(--input);
}

/* Título de coluna que ordena (o .sort-btn escutado em layouts/padrao, que manda
   orderby[] ao BaseModel). Aqui ele ainda funciona, então fica um botão — mas sem
   cara de botão: lê como o próprio título, e só o cursor e o foco dizem que clica. */
.tabela__ordenar {
	appearance: none;
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	white-space: nowrap;
	cursor: pointer;
}
.tabela__ordenar:hover {
	color: var(--muted-foreground);
}
.tabela__ordenar:focus-visible {
	outline: 2px solid var(--ring, var(--primary));
	outline-offset: 2px;
	border-radius: 4px;
}

/* =============================================================================
   BI do painel (painel/bi/partials/resumo)
   ============================================================================= */

/* Faixa do período: atalhos + intervalo, alinhada à direita como na home. */
.bi-periodo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

/* Área do gráfico: altura fixa (o Chart.js mede o pai com maintainAspectRatio off). */
.bi-grafico {
	position: relative;
	height: 220px;
}
.bi-grafico_alto {
	height: 280px;
}

/* Formas de pagamento: rótulo e percentual numa linha, barra fina embaixo. */
.bi-pagamentos {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bi-pagamentos__linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--foreground);
}
.bi-pagamentos__trilho {
	height: 8px;
	margin-top: 8px;
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--accent);
}
.bi-pagamentos__barra {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-color: #1a7aff;
}

/* Lista de produtos: o nome quebra em duas linhas no máximo, em vez de "Sênior...". */
.bi-produtos td.tabela__quebra {
	min-width: 12rem;
	white-space: normal;
}

/* Rolagem horizontal das tabelas. A barra nativa vinha com trilho branco e setas
   no tema escuro — o tema é só a classe body.dark, nada declara color-scheme. Aqui
   ela fica fina, sem setas e nas cores do tema: polegar no tom da borda, que acende
   no hover, sobre trilho transparente. */
.tabela-moldura,
.table-container,
.table-responsive {
	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
}
.tabela-moldura:hover,
.table-container:hover,
.table-responsive:hover {
	scrollbar-color: var(--muted-foreground) transparent;
}
/* Safari, que ainda não lê scrollbar-color. */
.tabela-moldura::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}
.tabela-moldura::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
	background: transparent;
}
.tabela-moldura::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 999px;
	background-color: var(--border);
	background-clip: padding-box;
}
.tabela-moldura::-webkit-scrollbar-button,
.table-container::-webkit-scrollbar-button,
.table-responsive::-webkit-scrollbar-button {
	display: none;
}

/* Marcador da página aberta no submenu: um traço curto sobre a linha da árvore
   (o ::before de 1px, 10px à esquerda do item), no trecho do subitem ativo. Fica
   longe do rótulo e só existe no submenu — item solto e cabeçalho de grupo já se
   destacam pelo fundo. Diferente do fundo, que segue o ponteiro, o traço fica na
   página aberta mesmo com o hover em outro item. ::after porque o ::before já é a
   própria linha da árvore. */
.dashboard > .sidebar-menu .accordion-body .side-link.active::after,
.dashboard > .sidebar-menu .accordion-body .side-link.active-force::after {
	content: '';
	position: absolute;
	top: 50%;
	left: -10.5px;
	width: 2px;
	height: 16px;
	border-radius: 2px;
	background-color: var(--foreground);
	transform: translateY(-50%);
	pointer-events: none;
}

/* Cabeçalho de cartão com controle ao lado do título (Pagamentos): o título herda a
   fonte da faixa, e o select encolhe para caber nos 40px dela, como o botão de apoio. */
.layer-card-secondary__titulo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font: inherit;
	color: inherit;
}
.layer-card-secondary select.form-control {
	width: auto;
	min-width: 180px;
	height: 28px !important;
	min-height: 28px;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 13px;
}
.layer-card-secondary:has(> select.form-control) {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* Botões no cabeçalho do cartão (Alterar Oferta, Novo Ciclo, Adicionar plataforma…):
   o mesmo tamanho do .btn-compacto, sem precisar marcar cada um. A faixa fica nos
   40px; a área de toque cresce pelo ::after, como no compacto. */
.layer-card-secondary .btn {
	position: relative;
	height: 24px !important;
	min-height: 24px !important;
	padding: 0 10px !important;
	font-size: 12.5px !important;
	border-radius: 6px !important;
}
.layer-card-secondary .btn::after {
	content: "";
	position: absolute;
	inset: -8px -6px;
}

/* Select do formulário dentro de cartão (x-dropdown-select): o cartão recorta o que
   passa da borda (overflow: hidden, para o raio valer nos filhos), e a lista de
   opções perto do fim do cartão saía cortada. Enquanto um menu está aberto, o
   cartão deixa ele sair; fechado, volta a recortar. */
.layer-card:has(.dropdown-menu.show),
.layer-card-primary:has(.dropdown-menu.show),
.layer-card-surface:has(.dropdown-menu.show) {
	overflow: visible;
}

/* Logo do zero-7 (imagens) no topo do menu do celular, no lugar da marca SVG da
   Trading. A folha fica fora do <nav>, então a regra de tema do main.css
   (nav .logo_dark / nav .logo_light) não chega aqui. */
.menu-mobile__logo {
	display: block;
	height: 28px;
	width: auto;
}
body:not(.dark) .menu-mobile__marca .logo_dark,
body.dark .menu-mobile__marca .logo_light {
	display: none !important;
}

/* Item ativo (e hover) da sidebar na Área do Trader: o tom da fase, como a faixa e o
   anel do layer card ("Dados do plano"), e não o cinza fixo de --side-item-fundo, que
   virava um remendo sobre o fundo verde/azul/dourado. Um pouco mais forte que o
   --tertiary do cartão para se destacar na sidebar, que já é tingida. */
html body[class*="trader-tier-"] .dashboard > .sidebar-menu {
	--side-item-fundo: color-mix(in oklab, rgb(var(--trader-rgb)) 14%, var(--trader-surface));
}
html body.dark[class*="trader-tier-"] .dashboard > .sidebar-menu {
	--side-item-fundo: color-mix(in oklab, rgb(var(--trader-rgb)) 18%, var(--trader-surface));
}
html body[class*="trader-tier-"] .dashboard > .sidebar-menu .side-link.active:not(:has(> .accordion-button)) {
	box-shadow: inset 0 0 0 1px var(--border);
}

/* =============================================================================
   Próximo passo (tela do plano do trader)

   Cartão logo abaixo do título: de quem é a vez, o que é e até quando, com os botões
   da etapa à direita. Substitui a coluna "Próximos passos" e a lista de prazos que
   ficava solta abaixo do título — quem esperava a Zero7 lia "Nenhuma ação necessária"
   e não sabia se o plano estava andando ou parado.

   A cor diz de quem é a vez, numa faixa fina à esquerda e no ícone: azul quando é o
   trader, âmbar quando é a Zero7 (o mesmo âmbar do selo de etapa "aguardando"), verde
   com o plano correndo, cinza encerrado.
   ============================================================================= */
.proximo-passo {
	--passo: 37 99 235;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
	gap: 20px;
	align-items: start;
	padding: 18px 20px 18px 22px;
	border-radius: var(--radius);
	background-color: var(--card);
	box-shadow: 0 0 0 1px var(--border), inset 4px 0 0 rgb(var(--passo));
}
.proximo-passo_zero7 { --passo: 217 119 6; }
.proximo-passo_andamento { --passo: 0 137 50; }
.proximo-passo_encerrado { --passo: 113 113 122; }

.proximo-passo__principal {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}
.proximo-passo__icone {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: rgb(var(--passo) / .12);
	color: rgb(var(--passo));
}
.proximo-passo__icone svg {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}
.proximo-passo__conteudo {
	min-width: 0;
}
.proximo-passo__quem {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgb(var(--passo));
}
.proximo-passo__titulo {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--foreground);
}
.proximo-passo__texto {
	margin: 4px 0 0;
	max-width: 70ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted-foreground);
}
.proximo-passo__prazos {
	margin-top: 12px;
}
.proximo-passo__prazos:not(:has(.passo-aviso)) {
	display: none;
}
/* Dentro do cartão os avisos são lidos da esquerda, junto do título: a regra de
   desktop que os encostava à direita era para a coluna que deixou de existir. */
.proximo-passo .passo-aviso {
	display: flex;
	flex-direction: row;
	margin-left: 0;
	max-width: none;
	text-align: left;
}
.proximo-passo__acoes {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}
.proximo-passo__acoes:empty,
.proximo-passo__acoes:not(:has(*)) {
	display: none;
}
.proximo-passo__acoes .sem-acoes {
	white-space: normal;
}
.proximo-passo__acoes .x-form,
.proximo-passo__acoes form {
	width: 100%;
}
/* Sem nenhuma ação, o texto ocupa a largura toda. */
.proximo-passo:not(:has(.proximo-passo__acoes > *)) {
	grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 767.98px) {
	.proximo-passo {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px 16px 16px 18px;
	}
}
.proximo-passo__alerta {
	margin-top: 10px;
}

/* Próximo passo na lista "Meus Planos": uma linha curta embaixo do nome do plano, com a mesma
   cor de "de quem é a vez" do cartão do topo do plano (.proximo-passo). */
.passo-linha {
	--passo: 37 99 235;
	display: flex;
	/* Sem piso a coluna do nome (estreita) quebrava a frase em cinco linhas. */
	min-width: 13rem;
	align-items: flex-start;
	gap: 6px;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--muted-foreground);
	text-decoration: none;
}
.passo-linha:hover {
	color: var(--foreground);
}
.passo-linha_zero7 { --passo: 217 119 6; }
.passo-linha_andamento { --passo: 0 137 50; }
.passo-linha svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	color: rgb(var(--passo));
}
.passo-linha strong {
	font-weight: 600;
	color: rgb(var(--passo));
}

/* =============================================================================
   Busca única do painel (topo e página "Buscar cliente")
   ============================================================================= */
.busca-cliente {
	position: relative;
	display: flex;
	align-items: center;
	width: 340px;
	max-width: 40vw;
	height: 36px;
}
.busca-cliente > svg {
	position: absolute;
	left: 10px;
	width: 16px;
	height: 16px;
	color: var(--muted-foreground);
	pointer-events: none;
}
.busca-cliente input {
	width: 100%;
	height: 100%;
	padding: 0 32px 0 34px;
	border: 0;
	border-radius: 8px;
	background-color: var(--tertiary);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--foreground);
	font-size: 13px;
	outline: none;
	transition: box-shadow .15s;
}
.busca-cliente input::placeholder {
	color: var(--muted-foreground);
}
.busca-cliente input:focus {
	box-shadow: inset 0 0 0 1px var(--ring, var(--muted-foreground)), 0 0 0 3px color-mix(in srgb, var(--ring, var(--muted-foreground)) 20%, transparent);
}
.busca-cliente__atalho {
	position: absolute;
	right: 8px;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--accent);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--muted-foreground);
	font-family: inherit;
	font-size: 11px;
}
.busca-cliente input:focus ~ .busca-cliente__atalho {
	display: none;
}
.busca-cliente_pagina {
	width: 100%;
	max-width: 640px;
	height: 44px;
}
.busca-cliente_pagina input {
	font-size: 15px;
}

/* =============================================================================
   Prévia das ações em lote (previa-lote.js)
   Uma tabela dentro da janela de confirmação: quem entra no lote, o que acontece com cada um, e
   quem fica fora com o motivo. Rolagem própria para lotes grandes.
   ============================================================================= */
.swal2-popup.previa-lote .swal2-html-container {
	margin: 12px 0 0;
	text-align: left;
}
.previa-lote__aviso {
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgb(217 119 6 / .12);
	box-shadow: inset 0 0 0 1px rgb(217 119 6 / .35);
	font-size: 13px;
	line-height: 1.45;
	color: var(--foreground);
}
.previa-lote__resumo {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--foreground);
}
.previa-lote__resumo-fora {
	color: rgb(233 20 45);
}
.previa-lote__tabela {
	max-height: 52vh;
	overflow: auto;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--border);
}
.previa-lote__tabela table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	line-height: 1.4;
	color: var(--foreground);
}
.previa-lote__tabela th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 8px 10px;
	background: var(--tertiary, var(--background));
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	color: var(--muted-foreground);
	white-space: nowrap;
}
.previa-lote__tabela td {
	padding: 8px 10px;
	border-top: 1px solid var(--border);
	vertical-align: top;
}
.previa-lote__tabela ul {
	margin: 0;
	padding-left: 16px;
}
.previa-lote__plano {
	font-weight: 600;
	white-space: nowrap;
}
.previa-lote__sub {
	display: block;
	font-size: 12px;
	color: var(--muted-foreground);
}
.previa-lote__selo {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgb(0 137 50 / .12);
	color: rgb(0 137 50);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.previa-lote__fora td {
	background: rgb(233 20 45 / .05);
}
.previa-lote__fora .previa-lote__selo {
	background: rgb(233 20 45 / .12);
	color: rgb(233 20 45);
}
.previa-lote__motivo {
	color: rgb(233 20 45);
}

/* Botão do topo que abre a paleta: com cara de campo, como a busca do Kumo. */
.busca-cliente_gatilho {
	gap: 8px;
	padding: 0 32px 0 34px;
	border: 0;
	border-radius: 8px;
	background-color: var(--tertiary);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--muted-foreground);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition: box-shadow .15s, color .15s;
}
.busca-cliente_gatilho span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.busca-cliente_gatilho:hover {
	color: var(--foreground);
	box-shadow: inset 0 0 0 1px var(--ring, var(--muted-foreground));
}

/* =============================================================================
   Paleta de busca (paleta-busca.js)
   Janela no centro, no alto da tela, sobre o véu dos diálogos: campo em cima, resultados em
   grupos com rolagem própria, e o rodapé com a contagem e os atalhos de teclado.
   ============================================================================= */
.paleta-busca[hidden] {
	display: none;
}
.paleta-busca {
	position: fixed;
	inset: 0;
	z-index: 2147483200;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px;
}
.paleta-busca__fundo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(0 0 0 / var(--veu-topo, .1)) 0%, rgb(0 0 0 / var(--veu-base, .15)) 100%),
		color-mix(in srgb, var(--background) var(--veu-tema, 30%), transparent);
	-webkit-backdrop-filter: blur(var(--veu-blur, 10px)) saturate(1.15);
	backdrop-filter: blur(var(--veu-blur, 10px)) saturate(1.15);
	animation: paleta-surge .15s ease-out;
}
.paleta-busca__janela {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 672px;
	/* Altura fixa: centralizada na tela, a janela pularia a cada resultado que chega. */
	height: min(560px, 80vh);
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--card);
	box-shadow: 0 0 0 1px var(--border), 0 24px 48px rgb(0 0 0 / .35);
	animation: paleta-surge .15s ease-out;
}
@keyframes paleta-surge {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
.paleta-busca__campo {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--border);
}
.paleta-busca__campo > svg {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: var(--muted-foreground);
	pointer-events: none;
}
.paleta-busca__campo input {
	width: 100%;
	height: 48px;
	padding: 0 16px 0 44px;
	border: 0;
	background: transparent;
	color: var(--foreground);
	font-size: 14px;
	outline: none;
}
.paleta-busca__campo input::placeholder {
	color: var(--muted-foreground);
	font-size: 13px;
}
.paleta-busca__lista {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 6px 8px 8px;
}
.paleta-busca__grupo {
	margin: 10px 8px 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted-foreground);
}
.paleta-busca__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--foreground);
	text-decoration: none;
}
.paleta-busca__item > svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--muted-foreground);
}
.paleta-busca__item_ativo {
	background-color: var(--accent);
	color: var(--foreground);
}
.paleta-busca__item_ativo > svg {
	color: var(--foreground);
}
.paleta-busca__textos {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.paleta-busca__titulo {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}
.paleta-busca__sub {
	overflow: hidden;
	font-size: 12px;
	line-height: 1.35;
	color: var(--muted-foreground);
	white-space: nowrap;
	text-overflow: ellipsis;
}
.paleta-busca__vazio {
	margin: 0;
	padding: 28px 16px;
	font-size: 14px;
	text-align: center;
	color: var(--muted-foreground);
}
.paleta-busca__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	font-size: 12px;
	color: var(--muted-foreground);
}
.paleta-busca__atalhos {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.paleta-busca__atalhos kbd {
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--accent);
	box-shadow: inset 0 0 0 1px var(--border);
	color: var(--muted-foreground);
	font-family: inherit;
	font-size: 11px;
	text-align: center;
}
.paleta-busca__atalhos kbd + kbd {
	margin-left: -2px;
}
body.paleta-busca-aberta {
	overflow: hidden;
}
@media (max-width: 575.98px) {
	.paleta-busca__atalhos {
		display: none;
	}
}

/* Totais da visão do cliente (painel/clients/show): gasto e sacado. */
.cliente-total {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
}
.cliente-total__rotulo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted-foreground);
}
.cliente-total__rotulo svg {
	width: 15px;
	height: 15px;
}
.cliente-total__valor {
	margin: 4px 0 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--foreground);
}
.cliente-total__detalhe {
	margin: 0;
	font-size: 12px;
	color: var(--muted-foreground);
}