/* =========================================================================
   Mercado — Design System (mínimo, Fase 0)
   Tokens conforme docs/design/DESIGN_SYSTEM.md.
   Estética: SaaS operacional premium / cockpit. Sem valores arbitrários:
   componentes devem usar SEMPRE as variáveis abaixo.
   ========================================================================= */

:root {
    /* Cor — semântica, não decorativa. Paleta 2026-08-13: electric purple controlado.
       O roxo elétrico chama para a ação; o fundo claro e o chrome ameixa evitam o aspecto burocrático. */
    --color-bg: #faf8fd;
    --color-surface: #ffffff;
    --color-surface-2: #f3eff8;
    /* Papéis de superfície. Não substituem --color-surface-2 de uma vez: ele ainda atende
       inputs, badges e vazios em muitas telas. Estes papéis separam canvas, cabeçalho,
       tabela e hover sem escurecer o sistema inteiro por efeito colateral. */
    --color-surface-subtle: #fcfbfd;
    /* Painéis decisórios ficam claros: a hierarquia vem do título, da borda e do status,
       sem repetir grandes barras escuras dentro do conteúdo. */
    --color-surface-header: #ffffff;
    --color-surface-header-text: #21172b;
    --color-surface-header-icon: #6d28d9;
    --color-surface-header-border: #e8e1ef;
    --color-panel-danger-badge: #c63232;
    --color-panel-warning-badge: #845e0b;
    --color-panel-neutral-badge: #eee9f7;
    --color-panel-badge-contrast: #ffffff;
    --color-panel-neutral-badge-text: #4b4263;
    --color-table-header: #fcfbfd;
    --color-row-hover: #f8f4fc;
    --color-text: #21172b;
    --color-text-muted: #665a72;
    --color-border: #e8e1ef;
    --color-border-strong: #ddd3e7;
    --color-panel-border: #ddd3e7;
    --color-primary: #6d28d9;
    --color-primary-hover: #5b21b6;
    --color-primary-contrast: #ffffff;
    --color-success: #1f9d57;
    /* O amarelo é sempre TEXTO ou borda, nunca fundo atrás de texto escuro — por isso escurecê-lo
       só melhora. O #b9810f anterior dava 3,38:1 sobre branco (medido no navegador), abaixo do
       mínimo de 4,5:1 do WCAG AA: justamente os avisos ("em alerta", "margem 1,1%", "perguntas a
       responder") eram o texto menos legível da tela. Este tom mantém a mesma matiz âmbar e dá
       5,85:1 sobre branco e 5,03:1 sobre --color-surface-2. */
    --color-warning: #845e0b;
    /* Tintas do amarelo. Existem como token porque estavam hardcoded em rgba() em três lugares
       (badge, chip e campo de custo pendente) — e ficariam com a cor VELHA depois desta mudança. */
    --color-warning-tint: rgba(132, 94, 11, 0.12);
    --color-warning-tint-soft: rgba(132, 94, 11, 0.06);
    --color-warning-tint-border: rgba(132, 94, 11, 0.34);
    --color-warning-row: rgba(132, 94, 11, 0.13);
    --color-warning-row-hover: rgba(132, 94, 11, 0.17);
    --color-danger: #d23f3f;
    /* Texto vermelho sobre uma tinta vermelha precisa ser mais escuro que a barra/contorno.
       #d23f3f passa sobre branco, mas perde contraste quando o fundo também é vermelho. */
    --color-danger-emphasis: #c63232;
    --color-danger-tint: rgba(210, 63, 63, 0.12);
    --color-danger-tint-soft: rgba(210, 63, 63, 0.08);
    --color-danger-tint-border: rgba(210, 63, 63, 0.28);
    --color-danger-row: rgba(210, 63, 63, 0.16);
    --color-danger-row-hover: rgba(210, 63, 63, 0.20);
    --color-info: #3f7cff;

    /* Sidebar (operacional, violeta-escura — o "chrome" do cockpit) */
    --color-sidebar-bg: #241136;
    --color-sidebar-text: #e1d6ec;
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-active: #6d28d9;

    /* IA — identidade do agente (gradiente + brilho). Uso: painel do agente, marca. */
    /* Mostarda do guia visual: é a única cor do sistema que NÃO é roxa, de propósito. Uma seta
       roxa apontando para um botão roxo disputa atenção com o que ela indica. */
    --color-alvo: #d8a01e;
    --color-alvo-claro: #e6b64a;
    --color-alvo-halo: rgba(216, 160, 30, 0.22);
    --shadow-alvo: 0 10px 30px rgba(216, 160, 30, 0.32);
    --color-ai-1: #a855f7;
    --color-ai-2: #6d28d9;
    /* O gradiente do card da MAYA. Cinza com o roxo da paleta por baixo — ver a nota em .d2-maya sobre
       por que cinza neutro puro leria como "desligado". */
    --color-ai-card-topo: #e2ddec;
    --color-ai-card-pe: #f8f6fb;
    --color-ai-surface: #f3e8ff;
    --color-ai-surface-hover: #ead7ff;
    --color-ai-border: #d8b4fe;
    --color-ai-message-surface: #ead7ff;
    --color-ai-message-border: #c084fc;
    --color-ai-message-text: #30134f;
    --gradient-ai: linear-gradient(150deg, var(--color-ai-1), var(--color-ai-2));
    --shadow-ai: 0 10px 30px rgba(109, 40, 217, 0.24);

    /* Vidro (glassmorphism) — EXCLUSIVO do painel flutuante da Maya (decisão 2026-07-17).
       Proibido em tabela/formulário/dashboard: ali o fundo é dado, não decoração.
       ATENÇÃO ao mexer: nossa página é quase branca (--color-bg). Vidro BRANCO sobre fundo
       branco resulta em branco — desfocar o nada não produz efeito nenhum. Sobre página clara
       o vidro só aparece se for levemente mais TINGIDO/escuro que o fundo; daí a base lavanda,
       a camada violeta e o realce interno, que sustentam o efeito sem depender do que está atrás.
       Pela mesma razão, --color-glass-bg NÃO é a alavanca da transparência: sobre fundo branco,
       0.38 e 0.20 ficam praticamente iguais (medido). Quem controla o "ver através" é --glass-blur:
       ~34px apaga tudo atrás, ~16px deixa formas suaves (escolhido), ~7px torna a tabela atrás
       legível e polui a conversa. Mexa no blur, não na opacidade. */
    --color-glass-tint: linear-gradient(160deg, rgba(168, 85, 247, 0.20), rgba(109, 40, 217, 0.08) 55%);
    --color-glass-bg: rgba(247, 244, 255, 0.28);
    --color-glass-border: rgba(255, 255, 255, 0.55);
    --color-glass-highlight: rgba(255, 255, 255, 0.75);
    --glass-blur: 16px;
    --shadow-glass: -18px 0 54px rgba(74, 54, 137, 0.22);

    /* Espaçamento — escala fixa: 4 8 12 16 24 32 48 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Border-radius — por função */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Tipografia */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;   /* 14px — mínimo em tabela */
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.375rem;
    --text-3xl: 1.75rem;

    /* Elevation — duas camadas discretas separam o objeto sem criar sombra de vitrine. */
    --shadow-sm: 0 1px 2px rgba(27, 24, 48, 0.05), 0 4px 12px rgba(46, 35, 82, 0.04);
    --shadow-md: 0 1px 2px rgba(27, 24, 48, 0.06), 0 10px 28px rgba(46, 35, 82, 0.09);
    /* Exceção de nível 2: somente os dois painéis decisórios do dashboard. A sombra de contato,
       a sombra difusa e o brilho interno dão corpo ao módulo sem aplicar 3D à tabela inteira. */
    --shadow-panel: 0 2px 6px rgba(33, 23, 43, 0.08), 0 14px 32px rgba(91, 33, 182, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    --shadow-lg: 0 8px 24px rgba(20, 27, 43, 0.12);

    --sidebar-width: 200px;
    --sidebar-collapsed: 60px;
    --rail-width: 360px;
    --topbar-height: 60px;
    --agent-launcher-width: 88px;
    --agent-launcher-height: 80px;
    --control-size-md: 44px;

    /* Dicas (tooltips). Fundo escuro de propósito: a bolha flutua por cima de tabela, cartão e
       diálogo — todos claros —, e só o contraste invertido a separa do que está atrás sem
       precisar de sombra pesada. É o mesmo violeta do "chrome" do cockpit (sidebar).
       A largura ampla é a exceção fechada de docs/design/TOOLTIPS.md §3.1. */
    --color-dica-bg: #241136;
    --color-dica-text: #e1d6ec;
    --color-dica-link: #d8b4fe;
    /* Fúcsia do "?" — a marca de "aqui existe explicação". Tom escolhido pelo contraste, não pelo
       brilho: o fúcsia vibrante (#ff00ff) dá ~3,1:1 sobre branco e reprova num glifo de 12px. Este
       dá ~6:1. REGRA: esta cor tem UM significado no sistema. Se ela for usada para outra coisa, o
       "?" deixa de ser reconhecível e volta a se perder no meio do texto.
       No repouso o círculo usa uma diluição: são 7 marcas numa linha de cabeçalho, e fúcsia cheio em
       todas viraria confete competindo com os números. O tom cheio fica para o hover e o foco.
       A diluição é 40% e não 28%: a 28% o círculo praticamente sumia em tamanho real e só o glifo
       carregava o sinal — no celular, onde não existe passar o mouse, a marca precisa parecer um
       controle tocável, não um sinal de pontuação. */
    --color-dica-marca: #b5177a;
    --color-dica-marca-borda: rgba(181, 23, 122, 0.4);
    --color-dica-marca-fundo: rgba(181, 23, 122, 0.08);
    --dica-largura: 260px;
    --dica-largura-ampla: 380px;
}

/* Reset enxuto */
*, *::before, *::after { box-sizing: border-box; }
/* overflow: hidden aqui e a peca que FALTAVA no esqueleto (corrigido em 31/08/2026).

   O desenho ja era de app-shell: .app-shell tem height 100vh, .app-body clipa, e .content e quem
   rola (overflow-y: auto). So que a PAGINA continuava podendo rolar tambem, e o vendedor via DUAS
   barras verticais no Dashboard, uma ao lado da outra. Rolando a de fora, o esqueleto inteiro subia
   e sobrava um vazio branco embaixo — foi assim que o dono encontrou, olhando a tela.

   O defeito e antigo: reproduzido tambem na versao anterior ao redesenho em faixas, entao nao veio de la.

   Nada fica inalcancavel: quem rola e .content, e todo o conteudo continua acessivel por ele.
   .app-shell ja media exatamente a altura da janela, entao a pagina nunca precisou rolar. */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Texto só para leitor de tela: some da tela, continua no acessível. Usado onde a coluna tem
   sentido visual óbvio mas nenhum rótulo escrito (a coluna da foto), e na legenda das tabelas. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- AppShell (menu no topo · conteúdo · agente) ---------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.app-shell { position: relative; display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); height: 100vh; }
/* Uma coluna só; o painel do agente abre ao lado, empurrando esta coluna (ver .agent-rail). */
.app-body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: hidden; }

/* O chat aberto reserva a faixa dele em vez de cobrir a tela.
   Isto não é preferência estética: com o painel por cima, qualquer botão da metade direita
   ficava embaixo dele, e a MAYA só conseguia apontar erguendo o botão acima do chat — o que
   mostrava o botão flutuando sobre o rosto dela, e não onde ele mora. Reservando a faixa,
   nenhum alvo pode ficar escondido e a seta aponta para o lugar de verdade.
   Custo medido em 2026-07-31, tabela de Anúncios (12 colunas, largura mínima ~950px):
   telas de 1366px para cima não perdem nada; em 1280px surgem 71px de rolagem lateral,
   absorvidos pelo .table-scroll com a coluna de ação congelada. */
@media (min-width: 861px) {
    .app-body { transition: padding-right 180ms ease; }
    html[data-rail="open"] .app-body { padding-right: var(--rail-width); }
    /* Com a Maya fechada, a barra de rolagem continua na borda da janela. O lançador só ocupa a
       quina inferior; reservar uma faixa lateral inteira faria a rolagem parecer desalinhada e
       tiraria largura das tabelas. O espaço seguro fica no fim do conteúdo rolável. */
    html[data-rail="closed"] .content { padding-bottom: calc(var(--agent-launcher-height) + var(--space-5)); }
}
/* Até 860px o painel ocupa a tela toda (ver o fim deste arquivo): empurrar deixaria o
   conteúdo com largura zero. */
@media (prefers-reduced-motion: reduce) {
    .app-body { transition: none; }
}

/* ---------- Menu de módulos no topo ---------- */
.topnav {
    display: flex; align-items: center; gap: var(--space-2);
    height: var(--topbar-height);
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    padding: 0 var(--space-4);
}
.topnav__brand { display: flex; align-items: center; min-width: 0; flex: 0 0 auto; }
.topnav__brand-logo { display: block; width: auto; max-height: 34px; object-fit: contain; object-position: left center; }
.topnav__env {
    flex: 0 0 auto; margin-left: auto;
    font-size: var(--text-xs); color: var(--color-sidebar-text);
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-pill);
    padding: 2px var(--space-3);
}
.topnav__user, .topnav__logout {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--color-sidebar-text); text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-pill);
    padding: 4px var(--space-3); font-size: var(--text-sm);
}
/* PODE encolher (0 1 auto), e o min-width: 0 e' o que permite o encolhimento acontecer de fato dentro de um
   flex - sem ele o item respeita o tamanho do conteudo e empurra a barra alem da largura da tela. */
.topnav__user { flex: 0 1 auto; min-width: 0; max-width: 260px; }
.topnav__user > .lucide { flex: 0 0 auto; }
.topnav__user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O botao de sair nunca encolhe: e' o unico jeito de sair, e um alvo espremido nao e' clicavel. */
.topnav__logout { flex: 0 0 auto; padding: 4px; width: 30px; height: 30px; justify-content: center; }
.topnav__user:hover, .topnav__logout:hover {
    background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); text-decoration: none;
}
.topnav__burger, .topnav__close { display: none; }

.topnav__modules { display: flex; align-items: center; gap: 0; min-width: 0; }
.topnav__root, .topnav__trigger {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-2);
    border: none; background: none; cursor: pointer; white-space: nowrap;
    color: var(--color-sidebar-text); font-family: inherit; font-size: var(--text-sm);
    border-radius: var(--radius-md); text-decoration: none;
}
/* No desktop os módulos são texto (cabem melhor); ícones só na gaveta mobile. */
.topnav__root > .lucide, .topnav__trigger > .lucide { display: none; }
.topnav__root:hover, .topnav__trigger:hover,
.topnav__module:focus-within .topnav__trigger { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); text-decoration: none; }
.topnav__root.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); font-weight: 600; }
.topnav__trigger::after {
    content: ""; width: 0; height: 0; margin-left: 2px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor; opacity: 0.7;
}
.topnav__module { position: relative; }
.topnav__menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
    min-width: 232px; padding: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.topnav__module:hover .topnav__menu,
.topnav__module:focus-within .topnav__menu { display: block; }
.topnav__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    color: var(--color-text); font-size: var(--text-base); text-decoration: none; white-space: nowrap;
}
.topnav__item:hover { background: var(--color-surface-2); text-decoration: none; }
.topnav__item.active { background: rgba(109, 40, 217, 0.10); color: var(--color-primary); font-weight: 600; }
.topnav__item--disabled { opacity: 0.55; cursor: not-allowed; }
.topnav__soon {
    font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.4px;
    background: var(--color-surface-2); color: var(--color-text-muted);
    padding: 1px var(--space-1); border-radius: var(--radius-sm);
}

/* ---------- Sino de avisos do Mercado Livre (lado direito do topo) ---------- */
.bell { position: relative; flex: 0 0 auto; }
.bell__button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: none; background: none; cursor: pointer;
    color: var(--color-sidebar-text); border-radius: var(--radius-md);
}
.bell__button:hover,
.bell--open .bell__button { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); }
.bell__button--warning { color: var(--color-warning); }
.bell__count {
    position: absolute; top: 0; right: 0;
    min-width: 16px; height: 16px; padding: 0 var(--space-1);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-danger); color: var(--color-primary-contrast);
    font-size: 0.625rem; font-weight: 600; line-height: 1;
    border-radius: var(--radius-pill);
}
.bell__backdrop { position: fixed; inset: 0; z-index: 199; }
/* Ancorado na JANELA, não no botão. O sino nem sempre fica na borda direita: dependendo da largura, o menu de
   módulos empurra ele para o meio, e um painel preso ao botão saía metade para fora da tela. Preso à janela, ele
   cai sempre no mesmo lugar — e no desktop, onde o sino já está na direita, o resultado é visualmente o mesmo. */
.bell__panel {
    position: fixed; top: calc(var(--topbar-height) + var(--space-1)); right: var(--space-4); z-index: 200;
    width: 340px; max-width: calc(100vw - var(--space-5));
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
/* Em tela bem estreita o painel ocupa a largura toda disponível, com margem nas duas bordas. */
@media (max-width: 420px) {
    .bell__panel { left: var(--space-3); right: var(--space-3); width: auto; max-width: none; }
}
.bell__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3); border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.bell__mark {
    display: inline-flex; align-items: center; gap: var(--space-1);
    border: none; background: none; cursor: pointer;
    color: var(--color-primary); font-family: inherit; font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.bell__mark:hover:not(:disabled) { background: var(--color-surface-2); }
.bell__mark:disabled { opacity: 0.55; cursor: not-allowed; }
.bell__empty {
    margin: 0; padding: var(--space-4) var(--space-3);
    color: var(--color-text-muted); font-size: var(--text-sm);
}
.bell__list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.bell__item { border-bottom: 1px solid var(--color-border); }
.bell__item:last-child { border-bottom: none; }
.bell__item > a {
    display: grid; gap: 2px; padding: var(--space-3);
    color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
}
.bell__item > a:hover { background: var(--color-surface-2); text-decoration: none; }
/* Não visto ganha uma barra à esquerda: diferença perceptível sem depender só de cor. */
.bell__item--unseen > a { box-shadow: inset 3px 0 0 var(--color-primary); font-weight: 600; }
.bell__item--warning > a { box-shadow: inset 3px 0 0 var(--color-warning); }
.bell__item-detail { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.bell__item-time { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.bell__item-count {
    margin-left: var(--space-2); padding: 0 var(--space-1);
    background: var(--color-surface-2); border-radius: var(--radius-sm);
}
.bell__foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted); font-size: var(--text-xs);
}

/* Itens de navegação REUSADOS pelo console /admin (não remover). */
.sidebar__section {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.6px;
    color: #6b7689;
    padding: var(--space-4) var(--space-3) var(--space-1);
}
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-sidebar-text);
    font-size: var(--text-base);
    text-decoration: none;
}
.nav-link:hover { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); text-decoration: none; }
.nav-link.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); font-weight: 600; }
.nav-link--disabled { opacity: 0.45; cursor: not-allowed; }
.nav-link__soon {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #2a3550;
    color: #8b96ab;
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
}
/* ---------- Faixa de acesso de suporte ----------
   Grudada no topo e acima de TUDO (inclusive do painel do agente, z-index 70, e do sino, 200): o único jeito
   de o staff esquecer que está na conta de outra pessoa é a faixa sumir de vista em alguma tela. */
.support-banner {
    position: sticky; top: 0; z-index: 300;
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-2) var(--space-4);
    background: var(--color-danger); color: var(--color-primary-contrast);
    font-size: var(--text-sm);
}
.support-banner__mark { display: inline-flex; flex: 0 0 auto; }
.support-banner__text { flex: 1 1 260px; }
.support-banner__time { opacity: 0.85; font-variant-numeric: tabular-nums; }
.support-banner__form { margin: 0; flex: 0 0 auto; }
.support-banner .btn { background: var(--color-primary-contrast); color: var(--color-danger); border-color: transparent; }

/* Contador de avisos abertos no menu do admin. `margin-left: auto` encosta na borda direita do item, para o
   número não dançar conforme o tamanho do rótulo. Some junto com o rótulo quando a barra está recolhida. */
.nav-link__count {
    margin-left: auto;
    min-width: 18px; padding: 0 var(--space-1);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-danger); color: var(--color-primary-contrast);
    font-size: 0.625rem; font-weight: 600; line-height: 1.5;
    border-radius: var(--radius-pill);
}
.nav-link .lucide { flex: 0 0 auto; }
.nav-backdrop { display: none; }

/* Conteúdo usa a largura TODA (sem cap): ao fechar o chat, texto/tabela acompanham o espaço. */
.content { padding: var(--space-4) var(--space-3); max-width: none; width: 100%; min-height: 0; overflow-y: auto; }

/* ---------- Painel lateral do agente de IA ----------
   Continua `position: fixed` (para não rolar junto com a tabela), mas o conteúdo reserva a
   faixa dele em .app-body, então ele não cobre nada. Estado vem de `data-rail` no <html>
   (maya-rail.js), que lembra a escolha do vendedor: fecha no "×" do topo, abre no pet.
   Não é modal de propósito: dá para ler a tabela com o chat aberto. */
.agent-rail {
    position: fixed;
    inset: var(--topbar-height) 0 0 auto;
    width: min(var(--rail-width), 100vw);
    z-index: 70;
    min-width: 0;
    overflow: hidden;
    background: var(--color-glass-tint), var(--color-glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-left: 1px solid var(--color-glass-border);
    /* O realce interno na borda é o que "vende" o vidro sem depender do fundo. */
    box-shadow: var(--shadow-glass), inset 1px 0 0 var(--color-glass-highlight);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
}
html[data-rail="open"] .agent-rail {
    transform: translateX(0);
    visibility: visible;
    transition: transform 180ms ease, visibility 0s;
}
/* Sem suporte a desfoque (ou com transparência reduzida no SO): cai para sólido.
   O vidro é acabamento — a legibilidade do painel não pode depender dele. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .agent-rail { background: var(--color-glass-tint), var(--color-surface); }
}
@media (prefers-reduced-transparency: reduce) {
    .agent-rail {
        background: var(--color-glass-tint), var(--color-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .agent-rail, html[data-rail="open"] .agent-rail { transition: none; }
}
.agent-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Cabeçalho: avatar grande + identidade — o "rosto" da ferramenta. */
.agent-panel__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    /* Sem camada sólida por baixo: é o que deixa o vidro do painel aparecer aqui. */
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.14), rgba(255, 255, 255, 0) 78%);
}
.agent-panel__collapse {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-size-md);
    height: var(--control-size-md);
    padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-ai-border);
    background: var(--color-ai-surface);
    color: var(--color-primary);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.agent-panel__collapse:hover {
    background: var(--color-ai-surface-hover);
    color: var(--color-primary-hover);
    transform: translateY(-1px);
}
.agent-panel__collapse:focus-visible {
    outline: var(--space-1) solid var(--color-primary);
    outline-offset: var(--space-1);
}
.agent-panel__avatar {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(109, 40, 217, 0.20));
}
.agent-panel__avatar--fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
    .agent-panel__avatar--motion { display: none; }
    .agent-panel__avatar--fallback { display: block; }
}

/* Cartão de ação ciente do contexto (aparece sob o cabeçalho, quando a tela oferece uma ação real). */
.agent-suggestion {
    margin: 0 var(--space-4) var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(109, 40, 217, 0.28);
    border-radius: var(--radius-lg);
    /* Camada sólida por baixo do gradiente: este cartão tem texto, e sobre o vidro translúcido
       ele boiaria em cima da tabela. Vale a mesma regra dos balões — conteúdo fica opaco. */
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.10), rgba(255, 255, 255, 0)), var(--color-surface);
}
.agent-suggestion__text { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.agent-suggestion__btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: var(--text-sm); font-weight: 600;
    border: none; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
    background: var(--gradient-ai); box-shadow: var(--shadow-ai);
    color: var(--color-primary-contrast); cursor: pointer;
}
.agent-suggestion__btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Log de mensagens (rola). */
.agent-panel__log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.chat-msg {
    max-width: 90%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.chat-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--ai {
    align-self: flex-start;
    background: var(--color-ai-message-surface);
    border-color: var(--color-ai-message-border);
    color: var(--color-ai-message-text);
    border-top-left-radius: var(--radius-sm);
}
.chat-msg--user {
    align-self: flex-end;
    background: var(--gradient-ai);
    color: var(--color-primary-contrast);
    border-color: transparent;
    border-top-right-radius: var(--radius-sm);
}
.chat-msg--typing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: calc(var(--space-7) + var(--space-1));
    color: var(--color-primary);
}
.chat-typing__dot {
    width: var(--space-1);
    height: var(--space-1);
    border-radius: var(--radius-pill);
    background: currentColor;
    animation: chat-typing-pulse 1.2s ease-in-out infinite;
}
.chat-typing__dot:nth-child(2) { animation-delay: 160ms; }
.chat-typing__dot:nth-child(3) { animation-delay: 320ms; }
@keyframes chat-typing-pulse {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(calc(-1 * var(--space-1))); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-typing__dot { animation: none; opacity: 0.7; }
}
.chat-msg--error { align-self: stretch; max-width: 100%; background: var(--color-danger-tint); border-color: var(--color-danger-tint-border); color: var(--color-danger-emphasis); }
.chat-msg__guide-link {
    display: inline-flex; align-items: center; margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-primary); font-weight: 700;
}
.chat-msg__evidence { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.chat-msg__evidence summary { cursor: pointer; }
.chat-msg__evidence ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }

/* Guia visual persistente: a MAYA aponta, mas a pessoa decide se clica. */
.maya-alvo--target {
    position: relative; z-index: 75;
    outline: 3px solid var(--color-alvo);
    outline-offset: var(--space-1);
    box-shadow: 0 0 0 var(--space-3) var(--color-alvo-halo), var(--shadow-alvo);
}
/* Baixa e larga de propósito. A versão alta (156px) não cabia acima de botões perto do topo e
   cortava justamente a etiqueta, a única parte com texto. O corpo é translúcido porque cobre o
   conteúdo; a ponta e a etiqueta continuam opacas porque são o que comunica. Se a seta inteira
   ficar apagada, ela vira enfeite — foi o que reprovou o brilho colorido testado antes.
   Mudou a altura? Nada a acertar no script: ele mede a seta antes de decidir o lado. */
.maya-alvo__indicator {
    position: fixed; z-index: 76; pointer-events: none;
    display: flex; flex-direction: column; align-items: center;
    transform: translate(-50%, -100%); color: var(--color-alvo);
}
/* A sombra fica no corpo e na ponta, não no conjunto: `filter` no pai atinge todo mundo, e a
   etiqueta é texto — sombra em texto pequeno só suja a leitura. */
.maya-alvo__line, .maya-alvo__head {
    filter: drop-shadow(0 2px var(--space-1) rgba(38, 20, 82, 0.35));
}
.maya-alvo__line {
    width: calc(var(--space-4) + var(--space-1)); height: var(--space-5);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(180deg, var(--color-alvo-claro), var(--color-alvo));
}
.maya-alvo__head {
    width: 0; height: 0;
    border-left: calc(var(--space-5) - var(--space-1)) solid transparent;
    border-right: calc(var(--space-5) - var(--space-1)) solid transparent;
    border-top: calc(var(--space-4) + var(--space-1)) solid var(--color-alvo);
}
.maya-alvo__label {
    margin-bottom: var(--space-1); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill); background: var(--color-alvo); color: var(--color-text);
    font-size: var(--text-sm); font-weight: 700; white-space: nowrap;
}
/* Cutucada em direção ao botão. Só o corpo e a ponta se mexem: texto que balança fica pior de
   ler, e parada a etiqueta ainda ancora o conjunto.
   O mesmo keyframe serve para os dois lados sem ganhar exceção: quando a seta vira para baixo,
   quem gira 180° é o pai, então este mesmo "+Y" passa a apontar visualmente para cima — ou seja,
   sempre na direção do botão. */
@media (prefers-reduced-motion: no-preference) {
    .maya-alvo__line, .maya-alvo__head { animation: maya-alvo-cutucada 1.4s ease-in-out infinite; }
}
@keyframes maya-alvo-cutucada {
    50% { transform: translateY(var(--space-1)); }
}
.maya-alvo__indicator--below { transform: translate(-50%, 0) rotate(180deg); }
.maya-alvo__indicator--below .maya-alvo__label { transform: rotate(180deg); }
.maya-alvo-status {
    position: fixed; left: 50%; bottom: var(--space-5); z-index: 77;
    max-width: min(520px, calc(100vw - var(--space-6))); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-warning); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg);
    transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
    .maya-alvo--target { animation: maya-alvo-pulse 1.5s ease-in-out infinite; }
}
@keyframes maya-alvo-pulse {
    50% { box-shadow: 0 0 0 calc(var(--space-4) + var(--space-1)) rgba(216, 160, 30, 0.05), var(--shadow-alvo); }
}
@media (prefers-reduced-motion: reduce) {
    .maya-alvo--target { animation: none; }
}

/* Composer. */
.agent-panel__composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--control-size-md);
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
}
.agent-panel__input {
    min-width: 0;
    font-family: inherit; font-size: var(--text-base); color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); line-height: 1.4;
}
.agent-panel__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15); }
.agent-panel__send {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-size-md); height: var(--control-size-md);
    border: none; border-radius: var(--radius-pill);
    background: var(--gradient-ai); box-shadow: var(--shadow-ai);
    color: var(--color-primary-contrast); font-size: var(--text-lg); cursor: pointer;
}
.agent-panel__send:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.agent-panel__send:not(:disabled):hover { background: var(--color-primary-hover); }
.agent-panel__send:focus-visible {
    outline: var(--space-1) solid var(--color-primary);
    outline-offset: var(--space-1);
}

/* Botão flutuante que abre o agente. Some enquanto o painel está aberto. */
.agent-reopen {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    position: fixed;
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    height: var(--agent-launcher-height);
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    filter: drop-shadow(0 var(--space-2) var(--space-3) rgba(91, 33, 182, 0.20));
    font-family: inherit;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    z-index: 60;
}
html[data-rail="open"] .agent-reopen { display: none; }
.agent-reopen--dragging { cursor: grabbing; }
.agent-reopen:focus-visible {
    outline: var(--space-1) solid var(--color-primary);
    outline-offset: var(--space-1);
}
.agent-reopen__label {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-size-md);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-tight);
    white-space: nowrap;
}
.agent-pet-video {
    display: grid;
    place-items: center;
    flex: 0 0 var(--agent-launcher-height);
    width: var(--agent-launcher-height);
    height: var(--agent-launcher-height);
}
.agent-pet-video__motion,
.agent-pet-video__poster {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* A imagem estática não fica por baixo da animação: os dois quadros não coincidem e criariam
   um efeito de mascote duplicada. O próprio `poster` do vídeo cobre o primeiro quadro; esta
   imagem separada entra somente quando o vídeo realmente falhar. */
.agent-pet-video__poster { display: none; }
.agent-pet-video--fallback .agent-pet-video__motion { display: none; }
.agent-pet-video--fallback .agent-pet-video__poster { display: block; }
@media (prefers-reduced-motion: reduce) {
    .agent-pet-video__motion { display: none; }
    .agent-pet-video__poster { display: block; }
}

/* ---------- PageHeader ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-header__title { font-size: var(--text-2xl); }
.page-header__desc { color: var(--color-text-muted); font-size: var(--text-base); margin-top: var(--space-1); }

/* ---------- ScreenIntro (caixa "Maya explica" — topo de cada tela) ----------
   Substitui o PageHeader. Tom de IA sutil (mesma identidade do painel da Maya),
   não gradiente decorativo — a empatia vem da avatar, o layout continua operacional. */
.screen-intro-block { margin-bottom: var(--space-5); }
.screen-intro {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
    border: 1px solid rgba(109, 40, 217, 0.28);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.10), rgba(255, 255, 255, 0) 82%), var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.screen-intro__avatar {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: var(--radius-pill);
    object-fit: cover; object-position: top center;
    border: 2px solid var(--color-surface);
    box-shadow: var(--shadow-ai);
    background: var(--color-surface-2);
}
.screen-intro__body { flex: 1 1 auto; min-width: 0; }
.screen-intro__eyebrow {
    font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--color-primary);
}
.screen-intro__title { font-size: var(--text-2xl); }
.screen-intro__lines {
    /* Texto corrido que reflui com a largura da tela (como um editor de texto). Cada dica é
       um <span> inline; um "·" discreto separa uma da outra sem travá-las em linha própria. */
    margin-top: var(--space-2);
    color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6;
}
.screen-intro__summary {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-top: var(--space-2); color: var(--color-primary);
    font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.screen-intro__summary:hover { color: var(--color-primary-hover); }
.screen-intro__details[open] .screen-intro__summary { margin-bottom: var(--space-1); }
.screen-intro__details .screen-intro__lines { margin-top: 0; }
.screen-intro__lines > span:not(:first-child)::before {
    content: "·"; margin: 0 var(--space-2);
    color: var(--color-primary); font-weight: 700;
}
.screen-intro__more { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.screen-intro__lead { color: var(--color-text-muted); font-size: var(--text-base); margin-top: var(--space-1); }
.screen-intro__lead a { font-weight: 600; white-space: nowrap; }
/* ---------------------------------------------------------------- Conclusão da MAYA
   Fica ACIMA da explicação, na linha, e nunca em rodapé: é a parte mais importante da caixa e
   também a menos certa. Rodapé ninguém lê, e uma conclusão que ninguém lê é dinheiro gasto à toa.
   A barra à esquerda separa o que a MAYA concluiu do que o sistema apurou, sem precisar de cor
   de alerta — conclusão não é aviso de erro. */
.maya-conclusao {
    margin-top: var(--space-3);
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-primary);
}
.maya-conclusao__selo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
    font-size: var(--text-xs); margin: 0;
}
.maya-conclusao__marca {
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--color-primary);
}
/* A força não é enfeite: é a diferença entre "é isto" e "pode ser isto", e o vendedor decide
   preço em cima dela. Fica ao lado da marca, não escondida no fim do texto. */
.maya-conclusao__forca, .maya-conclusao__quando { color: var(--color-text-muted); }
/* Uma faixa por área dentro do card. Com o texto INTEIRO de cada tela empilhado — decisão de 30/08, a
   MAYA é o carro-chefe e não leva 'ver mais' —, sem separação visual o card viraria parede de texto. */
.maya-bloco { padding: var(--space-2) 0; }
.maya-bloco:first-of-type { padding-top: 0; }
.maya-bloco:last-of-type { padding-bottom: 0; }
.maya-bloco + .maya-bloco { border-top: 1px dashed var(--color-border); }
.maya-bloco__area {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
    margin: 0 0 var(--space-1); font-size: var(--text-xs);
}
.maya-bloco__area > a, .maya-bloco__area > span:first-child {
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--color-text);
}
.maya-bloco__forca { color: var(--color-text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.maya-bloco .maya-conclusao__texto { margin-top: 0; }
/* Atalho para a tela que resolve. Botao discreto: a conclusao continua sendo o conteudo. */
.maya-bloco__alvo {
    display: inline-block; margin: var(--space-1) 0 var(--space-2);
    font-size: var(--text-xs); font-weight: 600; text-decoration: none;
    color: var(--color-primary);
}
.maya-bloco__alvo:hover { text-decoration: underline; }

/* Os dois caminhos de cada bloco, lado a lado: "Ir para X" e a conversa. Sao intencoes diferentes —
   um e a acao, o outro e a duvida — e por isso ficam juntos, no mesmo peso visual discreto. */
.maya-bloco__acoes {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    margin: var(--space-1) 0 var(--space-2);
}
.maya-bloco__acoes .maya-bloco__alvo { margin: 0; }

/* Botao com cara de link: e um caminho, nao a acao principal da tela. */
.maya-bloco__conversar {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: var(--text-xs); font-weight: 600;
    color: var(--color-primary);
}
.maya-bloco__conversar:hover { text-decoration: underline; }
.maya-bloco__conversar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.maya-conclusao__texto {
    margin: var(--space-1) 0 0;
    color: var(--color-text); font-size: var(--text-base); line-height: 1.55;
}
.maya-conclusao__apoio {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5;
}
/* "Tambem vi hoje": os outros sinais do dia. Mais forte que o "Apoiada em" (que e rodape) e mais fraco que
   a conclusao (que e o conteudo) — sao coisas que ela viu, nao a leitura que ela fez. */
.maya-bloco__tambem {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5;
}
.maya-bloco__tambem-rotulo { font-weight: 600; color: var(--color-text); }
.screen-intro__highlight {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-text); margin-top: var(--space-2);
}
.screen-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    justify-content: flex-end; margin-top: var(--space-3);
}
.screen-intro__close {
    position: absolute; top: var(--space-3); right: var(--space-3);
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text-muted);
    font-size: var(--text-lg); line-height: 1; cursor: pointer;
}
.screen-intro__close:hover { background: var(--color-surface-2); color: var(--color-text); }
/* Substitui o botão de sincronizar no dia a dia: uma linha discreta, no tom de texto secundário, porque ela
   informa e não pede nada. Quando a automação cai ela troca de tom e o botão volta ao lado. */
.auto-sync { color: var(--color-text-muted); font-size: var(--text-sm); }
.auto-sync--alerta { color: var(--color-warning); margin-right: var(--space-3); }

/* As duas partes convivem no HTML e o CSS escolhe. Por padrão a caixa aparece e o botão de reabrir
   fica escondido; a regra injetada no <head>, a partir do que o vendedor já fechou, inverte os dois
   antes da primeira pintura — por isso não pisca. */
.screen-intro__reopen { display: none; }
.screen-intro__reopen {
    align-items: center; gap: var(--space-2);
    font-family: inherit; font-size: var(--text-sm); font-weight: 600;
    color: var(--color-primary);
    border: 1px solid rgba(109, 40, 217, 0.28); border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.12), rgba(255, 255, 255, 0)), var(--color-surface);
    padding: var(--space-2) var(--space-4); cursor: pointer;
}
.screen-intro__reopen:hover { background: var(--color-surface-2); }
.screen-intro__reopen span { font-weight: 800; }

/* ---------- Central de ajuda (/ajuda) ---------- */
.help-hero {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.help-hero__avatar {
    flex: 0 0 auto; width: 72px; height: 72px;
    border-radius: var(--radius-pill); object-fit: cover; object-position: top center;
    box-shadow: var(--shadow-ai); background: var(--color-surface-2);
}
.help-group {
    text-transform: uppercase; font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.6px; color: var(--color-text-muted);
    margin: var(--space-5) 0 var(--space-3);
}
.help-card { scroll-margin-top: var(--space-5); }
.help-card__head { display: flex; align-items: center; gap: var(--space-3); }
.help-card__avatar {
    flex: 0 0 auto; width: 44px; height: 44px;
    border-radius: var(--radius-pill); object-fit: cover; object-position: top center;
    background: var(--color-surface-2);
}
.help-card__go { flex: 0 0 auto; margin-left: auto; }
.help-start { border-color: rgba(109, 40, 217, 0.28); }
.help-card__about {
    margin: var(--space-3) 0 0;
    color: var(--color-text); font-size: var(--text-base); line-height: 1.55;
}
.help-card__subhead {
    text-transform: uppercase; font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.5px; color: var(--color-primary);
    margin: var(--space-4) 0 var(--space-2);
}
.help-card__steps {
    margin: 0; padding-left: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    color: var(--color-text); font-size: var(--text-sm); line-height: 1.5;
}
.help-card__notes {
    margin: 0; padding-left: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5;
}

/* ---------- Card ---------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    overflow-x: auto;
}
.card--raised {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}
.card + .card { margin-top: var(--space-4); }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* ---------- Atualização persistente ---------- */
/* container-type próprio: o cartão precisa reagir à LARGURA DELE, não à da janela. Sem isto, a regra
   @container lá embaixo não tinha contexto nenhum para consultar (só .dash-panel declarava um) e as duas
   colunas ficavam espremidas no celular em vez de empilhar. E reagir à própria largura é o certo mesmo no
   desktop: quando o chat da Maya abre, ele come 360px sem a janela mudar de tamanho. */
.sync-status-card { margin-bottom: var(--space-4); container-type: inline-size; }
.sync-status-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sync-status-card__intro, .sync-status-card__body, .sync-status-card__time { color: var(--color-text-muted); font-size: var(--text-sm); }
.sync-status-card__message { color: var(--color-text); }
.sync-status-card__message--warning { color: var(--color-warning); }
.sync-status-card__muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.sync-status-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* Duas colunas: o estado ocupa o mínimo, o que MUDOU fica com o resto. Antes o cartão gastava a largura
   inteira para três linhas de texto, e a lista de mudanças não tinha onde existir. A coluna da esquerda é
   fixa porque ela é sempre do mesmo tamanho — quem cresce com o conteúdo é a direita. */
.sync-status-card__grid {
    display: grid; grid-template-columns: minmax(210px, 260px) 1fr;
    gap: var(--space-5); margin-top: var(--space-2);
}
/* Sem atualização nenhuma: uma coluna só, senão sobra uma borda vertical sem nada ao lado. */
.sync-status-card__grid--solo { grid-template-columns: 1fr; }
.sync-status-card__status { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.sync-status-card__changes {
    border-left: 1px solid var(--color-border); padding-left: var(--space-5);
}
.sync-status-card__changes-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    list-style: none; color: var(--color-primary); cursor: pointer;
}
.sync-status-card__changes-head::-webkit-details-marker { display: none; }
.sync-status-card__changes-head:hover { color: var(--color-primary-hover); }
.sync-status-card__changes-title { font-size: var(--text-sm); font-weight: 600; margin: 0; }
.sync-status-card__changes-title::before { content: "›"; display: inline-block; margin-right: var(--space-1); }
.sync-status-card__changes[open] .sync-status-card__changes-title::before { transform: rotate(90deg); }
.sync-status-card__changes-body { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }

/* O número do dinheiro. Grande porque é a pergunta que o vendedor faz de verdade; colorido porque a
   direção importa mais que o valor. */
.sync-status-card__impacto { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sync-status-card__impacto-valor { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.sync-status-card__impacto--pior .sync-status-card__impacto-valor { color: var(--color-danger); }
.sync-status-card__impacto--melhor .sync-status-card__impacto-valor { color: var(--color-success); }

.sync-status-card__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sync-status-card__linha {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto;
    gap: var(--space-3); align-items: baseline;
    padding: var(--space-1) 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm);
}
.sync-status-card__linha--pior { background: var(--color-danger-row); }
/* O título cede espaço, nunca o número: é o número que a linha existe para mostrar. */
.sync-status-card__linha-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-status-card__linha-mudanca { color: var(--color-text-muted); }
.sync-status-card__linha-delta { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.sync-status-card__linha-delta.is-pior { color: var(--color-danger); }
.sync-status-card__linha-delta.is-melhor { color: var(--color-success); }

/* Separa os dois assuntos do painel (dinheiro e saúde) sem virar mais uma caixa dentro da caixa: um rótulo
   pequeno e uma linha de respiro bastam para o olho saber que mudou de assunto. O primeiro não leva espaço
   extra em cima porque o corpo do painel já dá o dele. */
.sync-status-card__bloco-titulo {
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-muted); margin: var(--space-3) 0 0;
}
.sync-status-card__changes-body > .sync-status-card__bloco-titulo:first-child { margin-top: 0; }

/* A pendência fica embaixo da nota, na mesma célula: é a continuação da frase ("caiu para 62, falta ficha
   técnica"), não uma terceira coluna disputando espaço com o número. */
.sync-status-card__pendencia { display: block; font-size: var(--text-xs); }

/* Painel estreito: as colunas empilham e a borda vira uma linha em cima, senão a lista fica espremida. */
@container (max-width: 720px) {
    .sync-status-card__grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .sync-status-card__changes {
        border-left: 0; padding-left: 0;
        border-top: 1px solid var(--color-border); padding-top: var(--space-4);
    }
    .sync-status-card__linha { grid-template-columns: minmax(0, 1fr) auto; }
    .sync-status-card__linha-mudanca { grid-column: 1 / -1; }
}

/* ---------- Rosca de progresso ---------- */
.rosca { position: relative; width: 96px; height: 96px; margin-bottom: var(--space-2); }
.rosca__svg { width: 100%; height: 100%; display: block; }
.rosca__trilho { fill: none; stroke: var(--color-border-strong); stroke-width: 4; }
.rosca__arco { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; }
.rosca__centro {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1.1;
}
.rosca__centro strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.rosca__centro small { color: var(--color-text-muted); font-size: var(--text-xs); }
/* Sem total conhecido: só o trilho, sem arco. Não existe progresso para desenhar, e desenhar um seria mentir. */
.rosca--indefinida .rosca__centro small { max-width: 70px; text-align: center; }

/* Lista "sem moldura": card sem padding lateral — a tabela vira a folha larga da tela.
   Filtros, paginação e textos de topo mantêm um respiro interno; a tabela (dentro de
   .table-scroll) vai de borda a borda do card, usando as sombras de rolagem como moldura. */
.card--flush { padding-left: 0; padding-right: 0; }
.card--flush > *:not(.table-scroll):not(.dash-table) { padding-left: var(--space-4); padding-right: var(--space-4); }

/* ---------- Button ---------- */
.btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: inherit; font-size: var(--text-base); font-weight: 500;
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-4);
    border: 1px solid transparent; cursor: pointer; line-height: 1.4;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn--secondary:hover:not(:disabled) { background: var(--color-surface-2); }
.btn--ghost { background: transparent; color: var(--color-text); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-2); }
.btn--sm { padding: 3px var(--space-2); font-size: var(--text-xs); }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.95); }

/* ---------- Badge / StatusBadge ---------- */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); font-weight: 600; line-height: 1;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--neutral { background: var(--color-surface-2); color: var(--color-text-muted); }
.badge--success { background: rgba(31,157,87,0.12); color: var(--color-success); }
.badge--warning { background: var(--color-warning-tint); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-tint); color: var(--color-danger-emphasis); }
.badge--info    { background: rgba(47,125,225,0.12); color: var(--color-info); }

/* ---------- EmptyState ---------- */
.empty-state { text-align: center; padding: var(--space-7) var(--space-5); color: var(--color-text-muted); }
.empty-state__title { font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-2); }

/* ---------- Definition list (status) ---------- */
.kv { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-3) var(--space-4); align-items: center; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; font-weight: 500; }

/* ---------- DataTable (mínimo) ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table th { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.4px; }
.data-table tbody tr:hover { background: var(--color-row-hover); }
/* A ação mais usada fica exposta; as que alteram estado entram num menu curto. Isso reduz a altura
   da tabela sem esconder ações e evita uma coluna inteira de botões iguais. */
.row-actions { display: inline-flex; flex-direction: row; gap: var(--space-1); align-items: center; }
.row-actions .btn { justify-content: center; }
.row-actions__menu { position: relative; }
.row-actions__menu > summary { list-style: none; }
.row-actions__menu > summary::-webkit-details-marker { display: none; }
.row-actions__menu-panel {
    position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
    min-width: 176px; padding: var(--space-1);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.row-actions__menu-panel .btn { width: 100%; justify-content: flex-start; white-space: nowrap; }
.data-table td.col-actions:focus-within { z-index: 3; }

/* Na visão compacta, números comparáveis usam a mesma borda de leitura; o nome e a qualidade
   ficam à esquerda porque são texto para interpretar, não valores para comparar. */
.listings-table th:nth-child(n + 3):nth-child(-n + 9),
.listings-table td:nth-child(n + 3):nth-child(-n + 9) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Rolagem horizontal com aviso visual: sombra nas bordas indica "tem mais para o lado"
   (some a sensação de linha cortada / bug quando a barra de rolagem fica fora da dobra). */
.table-scroll {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--color-surface) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--color-surface) 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(20, 27, 43, 0.16), rgba(20, 27, 43, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(20, 27, 43, 0.16), rgba(20, 27, 43, 0)) right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
/* Coluna de ação "congelada": grudada à direita, sempre visível ao rolar na horizontal. */
.data-table th.col-actions, .data-table td.col-actions {
    position: sticky; right: 0; z-index: 1;
    background: var(--color-surface);
    box-shadow: -12px 0 10px -10px rgba(20, 27, 43, 0.18);
}
.data-table tbody tr:hover td.col-actions { background: var(--color-row-hover); }

/* ---------- Dialog ---------- */
.dialog__overlay { position: fixed; inset: 0; background: rgba(33, 23, 43, 0.52); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); }
.dialog { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-5); width: 100%; max-width: 460px; }
.dialog__close {
    position: sticky; top: 0; z-index: 2; float: right;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-size-md); height: var(--control-size-md); margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0 var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--text-xl); cursor: pointer;
}
.dialog__close:hover { background: var(--color-surface-2); color: var(--color-text); }

/* Grupo de ações de página: mantém as duas decisões frequentes à vista e recolhe operações ocasionais. */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.action-menu { position: relative; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::after { content: "▾"; margin-left: var(--space-2); font-size: var(--text-xs); }
.action-menu[open] > summary::after { content: "▴"; }
.action-menu__panel {
    position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 20;
    display: grid; gap: var(--space-1); min-width: 240px; padding: var(--space-2);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: var(--shadow-md);
}
.action-menu__panel .btn { justify-content: flex-start; width: 100%; }

/* ---------- Inputs ---------- */
.input, .select {
    font-family: inherit; font-size: var(--text-base); color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); line-height: 1.4;
}
.input:focus, .select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15); }
.filter-bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }

/* Abas por status (padrão MercadoTurbo: fila de trabalho com contagem ao vivo). */
.status-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.status-tab {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border: none; background: none; cursor: pointer;
    color: var(--color-text-muted); font-family: inherit; font-size: var(--text-base);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.status-tab:hover { color: var(--color-text); }
.status-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.status-tab__count {
    font-size: var(--text-xs); background: var(--color-surface-2); color: var(--color-text-muted);
    border-radius: var(--radius-pill); padding: 0 var(--space-2); min-width: 20px; text-align: center;
}
.status-tab--active .status-tab__count { background: rgba(109, 40, 217, 0.12); color: var(--color-primary); }

/* Célula densa do anúncio: miniatura + título + SKU. */
.listing-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.listing-cell__thumb {
    flex: 0 0 auto; width: 36px; height: 36px;
    border-radius: var(--radius-sm); object-fit: cover;
    border: 1px solid var(--color-border); background: var(--color-surface-2);
}
.listing-cell__text { display: flex; flex-direction: column; min-width: 0; }
.listing-cell__sku { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Input compacto para edição inline na tabela. */
.input--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); max-width: 108px; }
.filter-bar .input { min-width: 260px; }

/* ---------- Alternador de densidade (compacto = tabela / detalhado = cartões) ----------
   Responde ao RISK-UX-001 do benchmark: o cartão dá contexto, a tabela dá comparação.
   Em vez de escolher um, a tela oferece os dois sobre a MESMA consulta e seleção. */
.view-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.view-toggle__btn {
    border: none; background: var(--color-surface); cursor: pointer;
    font-family: inherit; font-size: var(--text-sm); color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3); white-space: nowrap;
}
.view-toggle__btn + .view-toggle__btn { border-left: 1px solid var(--color-border); }
.view-toggle__btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.view-toggle__btn--active { background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 600; }
.view-toggle__btn--active:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }

/* ---------- Modo detalhado: lista de cartões densos ---------- */
.listing-board { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.listing-board__bar {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs); color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 1px solid var(--color-border); background: var(--color-surface-2);
}
.listing-row {
    display: grid;
    grid-template-columns: auto 64px minmax(0, 1fr) 232px 128px;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.listing-row:hover { background: var(--color-surface-2); }
/* Cartão em edição: o vendedor precisa enxergar de longe qual anúncio vai mudar no ML. */
.listing-row--editing, .listing-row--editing:hover {
    background: rgba(109, 40, 217, 0.06);
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.listing-row--editing .input--sm { max-width: 96px; }
.listing-row__thumb {
    width: 64px; height: 64px; object-fit: cover;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface);
}
.listing-row__thumb--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: var(--text-xs); text-align: center;
}
.listing-row__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.listing-row__title {
    font-size: var(--text-base); font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.listing-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.listing-line__meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.listing-line__meta strong { color: var(--color-text); font-weight: 600; }
.listing-line__dot { color: var(--color-border); }

/* Etiquetas de completude: verde = ok, vermelho = falta, cinza = não sabemos ainda. */
.chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 1px var(--space-2); border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-surface);
    font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap;
}
.chip--ok { border-color: rgba(31, 157, 87, 0.32); background: rgba(31, 157, 87, 0.08); color: var(--color-success); }
.chip--warn { border-color: var(--color-warning-tint-border); background: var(--color-warning-tint-soft); color: var(--color-warning); }
.chip--missing { border-color: rgba(210, 63, 63, 0.32); background: rgba(210, 63, 63, 0.08); color: var(--color-danger); }
.chip--unknown { border-style: dashed; }
.chip--channel { border-color: var(--color-ai-border); background: var(--color-ai-surface); color: var(--color-primary); font-weight: 600; }
.chip--link { cursor: pointer; }
.chip--link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Bloco financeiro: preço em destaque, componentes do custo embaixo. */
.listing-money { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.listing-money .chip { align-self: flex-start; }
.money-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--color-text-muted);
    background: var(--color-surface-2); border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
}
.money-line span:last-child { color: var(--color-text); font-variant-numeric: tabular-nums; }
.money-line--main {
    font-size: var(--text-base); font-weight: 600; color: var(--color-text);
    background: rgba(109, 40, 217, 0.09); padding: var(--space-1) var(--space-2);
}
.money-line--main span:last-child { font-weight: 600; }
/* Linha clicável (custo): o bloco lê a conta de cima para baixo e o campo editável se anuncia. */
.money-line--action { cursor: pointer; border: 1px dashed var(--color-border); }
.money-line--action:hover, .money-line--action:focus-visible {
    border-color: var(--color-primary); color: var(--color-primary); outline: none;
}
.money-line--action:hover span:last-child { color: var(--color-primary); }
/* Resultado da conta (lucro): separado das parcelas por uma linha. */
.money-line--result {
    margin-top: var(--space-1); border-top: 1px solid var(--color-border);
    border-radius: 0; background: none; padding-top: var(--space-2);
    font-weight: 600; color: var(--color-text);
}
.money-note { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }
.money-note--warn { color: var(--color-warning); }

.listing-row__actions { display: flex; flex-direction: column; gap: var(--space-1); }
.listing-row__actions .btn { justify-content: center; }

/* Abaixo de ~1100px o bloco financeiro e as ações descem para baixo do conteúdo. */
@media (max-width: 1100px) {
    .listing-row { grid-template-columns: auto 64px minmax(0, 1fr); }
    .listing-money, .listing-row__actions { grid-column: 3; }
    .listing-row__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- KPI (Dashboard) ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.kpi__value { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; }
.kpi__label { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---------- Dashboard: faixa de números + dois painéis de triagem ----------
   O dashboard deixou de ser relatório e virou triagem. Os números perderam o tamanho de cartaz
   (contar anúncios não faz ninguém decidir nada) e viraram uma faixa de uma linha; o palco é dos
   dois painéis de anúncios problemáticos. */
.dash-metrics {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}
.dash-metric {
    display: inline-flex; align-items: baseline; gap: var(--space-2);
    color: var(--color-text-muted); font-size: var(--text-xs); text-decoration: none;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: var(--space-1) 0;
}
.dash-metric b { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.dash-metric:hover { text-decoration: none; color: var(--color-primary); }
.dash-metric:hover b { color: var(--color-primary); }
/* Perguntas e mensagens têm prazo: são a única parte das antigas "Prioridades de hoje" que
   precisava sobreviver à faxina, então acendem sozinhas quando há fila. */
.dash-metric--alert {
    padding: var(--space-1) var(--space-2);
    background: var(--color-warning-tint-soft);
    border-color: var(--color-warning-tint-border);
    color: var(--color-warning);
}
.dash-metric--alert b { color: var(--color-warning); }
/* Ressalva da janela de 30 dias. Mesma ideia do .dash-panel__warn: o indicador confessa o que
   deixa de fora, em vez de deixar o número parecer a história inteira. */
.dash-metrics__caveat { font-size: var(--text-xs); color: var(--color-warning); }
.dash-metrics__sync { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-xs); }

/* Lado a lado só quando o chat está FECHADO e a janela tem espaço real. Dinheiro recebe 60% porque
   carrega sete colunas; saúde recebe 40% porque carrega três. Abaixo de 1320px, empilhar preserva a
   leitura em vez de transformar nomes e cabeçalhos em fragmentos. */
/* ============================================================================
   Dashboard em três faixas (31/08/2026, desenho do dono).

   O card da Maya passou a mostrar a conclusão de todas as áreas com o texto inteiro. Em largura
   cheia ele empurrava os dois painéis para baixo da dobra, e o vendedor deixava de ver as linhas
   vermelhas ao abrir a tela. A saída não foi encurtar a Maya — foi dar a ela uma coluna própria.

   Faixa 1: contadores + estado da sincronização (sinais vitais, uma linha só)
   Faixa 2: Maya à esquerda, painel de qualidade à direita
   Faixa 3: painel do dinheiro em largura cheia — sete colunas não cabem em meia tela de 1366px
   ============================================================================ */

/* SEM margem negativa, e isto foi um defeito corrigido no mesmo dia.

   A primeira versao puxava a faixa para fora com margin-inline negativa, para o fundo sangrar ate a borda.
   Mas <article class="content"> e um CONTEINER DE ROLAGEM (overflow: auto): o que passa da largura dele nao
   sangra, vira barra de rolagem horizontal. Media 1360px dentro de 1336px, e o vendedor ganhava uma barra
   horizontal que nao existia antes.

   A faixa nao precisa tocar a borda para separar secao. Fundo mais padding ja resolve, e nao inventa
   rolagem. */
.dash-band {
    padding: var(--space-5) 0;
}
.dash-band + .dash-band { margin-top: 0; }

/* As faixas alternam claro e escuro para o olho achar onde uma seção acaba. Cores SEMPRE de token:
   valor escrito à mão aqui quebraria silenciosamente se a paleta mudasse. */
.dash-band--read {
    background: var(--color-surface-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-lg);
}
.dash-band--vitals, .dash-band--money { background: transparent; }

/* Uma coluna no celular e com o chat aberto; duas quando há largura. O ponto de corte é o mesmo dos
   painéis de antes, e o estado do chat já vive em data-rail no <html>. */
.dash-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1320px) {
    html[data-rail="closed"] .dash-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* A caixa da Maya não tem margem própria dentro da coluna: quem dá o respiro agora é a faixa. */
.dash-split__main > .screen-intro-block { margin: 0; }

/* O painel curto acompanha a altura da coluna da Maya em vez de deixar um vazio grande à direita. */
.dash-split__side { display: flex; flex-direction: column; }
.dash-split__side > .dash-panel { flex: 1 1 auto; }

.dash-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1320px) {
    html[data-rail="closed"] .dash-panels { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.dash-panel {
    margin: 0; padding-top: 0; padding-bottom: 0;
    display: flex; flex-direction: column; container-type: inline-size;
    overflow: hidden;
}
.dash-panel + .dash-panel { margin-top: 0; }
.dash-panel.card--raised { border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.dash-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding-top: var(--space-3); padding-bottom: var(--space-3);
    background: var(--color-surface-header);
    border-bottom: 1px solid var(--color-surface-header-border);
}
.dash-panel__heading { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.dash-panel__heading .lucide { flex: 0 0 auto; color: var(--color-surface-header-icon); }
.dash-panel__title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--text-lg); color: var(--color-surface-header-text);
}
.dash-panel__head .badge--danger { background: var(--color-panel-danger-badge); color: var(--color-panel-badge-contrast); }
.dash-panel__head .badge--warning { background: var(--color-panel-warning-badge); color: var(--color-panel-badge-contrast); }
.dash-panel__head .badge--neutral { background: var(--color-panel-neutral-badge); color: var(--color-panel-neutral-badge-text); }
.dash-panel__count {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--color-text-muted);
}

/* Os painéis são <table> DE VERDADE, não um grid de <div> parecendo tabela. O grid de div lia,
   no leitor de tela, como uma fila de números soltos — "Mochila R$199,89 R$250,00 R$29,98
   R$25,55 -R$105,64" — sem dizer qual número é preço e qual é taxa. Com <th scope="col">, cada
   valor é anunciado junto com o nome da coluna. Herda .data-table de propósito: guardrail 2
   (não duplicar componente que já existe) — inclusive as classes row--danger / row--warn. */
/* A distribuição 60/40 e o empilhamento em janelas menores devolvem espaço suficiente para a tabela
   usar o tamanho normal do sistema. A informação fica legível sem sacrificar nenhuma parcela da conta. */
.dash-table { table-layout: fixed; font-size: var(--text-base); border-top: 0; }
/* Aperto horizontal maior que o da .data-table: são até sete colunas em meia tela. */
.dash-table th, .dash-table td { padding: var(--space-2); }
.dash-table th:first-child, .dash-table td:first-child { padding-left: var(--space-4); }
.dash-table th:last-child, .dash-table td:last-child { padding-right: var(--space-4); }
/* Os nomes curtos e as larguras medidas abaixo mantêm os cabeçalhos em uma linha no desktop. Em uma
   largura realmente pequena, as parcelas de apoio saem juntas pela regra de container mais abaixo. */
.dash-table thead th {
    background: var(--color-table-header);
    border-bottom-color: var(--color-border-strong);
}
/* Larguras fixas (table-layout: fixed): quem cede espaço é o título, nunca o número. Fixar o
   número evitava quebrar "R$ 1.100.000,00" em duas linhas — e o valor é justamente o que a
   linha existe para mostrar. */
.dash-col-thumb { width: 44px; }
.dash-col-preco { width: 84px; }
.dash-col-parcela { width: 84px; }
.dash-col-taxa { width: 88px; }
/* "Seu frete" mantém claro que é custo do vendedor; a dica conserva a explicação completa. */
.dash-col-frete { width: 104px; }
.dash-col-result { width: 104px; }
.dash-col-score { width: 76px; }

/* Números à direita. Precisa de th./td. na frente para vencer o "text-align: left" da .data-table. */
.dash-table th.dash-num, .dash-table td.dash-num {
    text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted);
}
/* O preço é a âncora da linha: é dele que os três descontos saem. Fica em cor cheia (as outras
   parcelas são apoio) e é a única parcela que sobrevive quando o painel estreita. */
.dash-table td.dash-num--preco { color: var(--color-text); font-weight: 600; }

/* O título do anúncio é <th scope="row"> por semântica — é ele que amarra cada número ao anúncio
   no leitor de tela. Mas não pode herdar o VISUAL de cabeçalho de coluna da .data-table
   (maiúsculas, cinza, 12px): ali é o nome do produto, não um rótulo. */
.dash-table th.dash-cell-title {
    text-transform: none; letter-spacing: normal;
    font-size: var(--text-base); color: var(--color-text); font-weight: 600;
}

/* A linha inteira continua clicável no mouse (o link de verdade mora no título, para teclado e
   leitor de tela). O cursor é a única pista visual disso. */
.dash-row--clickable { cursor: pointer; }
.dash-cell-title a { color: var(--color-text); }
.dash-row:hover .dash-cell-title a { color: var(--color-primary); }

.dash-row__thumb {
    display: block; width: 32px; height: 32px; object-fit: cover;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.dash-row__thumb--empty { background: var(--color-surface-2); }
.dash-row__stack { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dash-row__title {
    display: block; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dash-row__reasons {
    display: block; font-size: var(--text-xs); color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-row__result, .dash-row__score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.dash-row__result b, .dash-row__score b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-row__result small, .dash-row__score small { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
/* Quantas vezes vendeu: existe para explicar a ORDEM da lista, não para competir com o resultado. Fica um
   degrau abaixo da nota — quem lê rápido vê o valor; quem estranhar a ordem acha a resposta aqui. */
.dash-row__vendas { opacity: 0.75; }
/* A gravidade pertence ao anúncio inteiro, não só ao último número. A tinta é visível em leitura
   rápida, mas ainda translúcida: elimina as caixas que comprimiam "prejuízo" e "provisória" e
   deixa a barra lateral e o valor serem os sinais mais fortes. */
.dash-table tbody tr.row--danger > th,
.dash-table tbody tr.row--danger > td { background: var(--color-danger-row); }
.dash-table tbody tr.row--warn > th,
.dash-table tbody tr.row--warn > td { background: var(--color-warning-row); }
.dash-table tbody tr.row--danger:hover > th,
.dash-table tbody tr.row--danger:hover > td { background: var(--color-danger-row-hover); }
.dash-table tbody tr.row--warn:hover > th,
.dash-table tbody tr.row--warn:hover > td { background: var(--color-warning-row-hover); }
.dash-row.row--danger .dash-row__result b, .dash-row.row--danger .dash-row__score b { color: var(--color-danger-emphasis); }
.dash-row.row--warn .dash-row__result b, .dash-row.row--warn .dash-row__score b { color: var(--color-warning); }

/* Painel estreito: as parcelas da conta saem e ficam anúncio, preço e resultado. No mesmo ponto,
   título e selos do cabeçalho ganham linhas próprias para a quebra ser intencional. */
@container (max-width: 560px) {
    .dash-panel__head { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .dash-panel__count { justify-content: flex-start; }
    .dash-table--money .dash-col-parcela { display: none; }
}

/* ---------- Lucratividade: barra de ordem/filtro, custo editável, sinal na linha ---------- */
.lucro-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3);
}
.lucro-bar__ordem { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.lucro-bar__conferido { flex: 1 1 320px; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }
.lucro-bar__conferido--velha { color: var(--color-warning); font-weight: 600; }
.lucro-bar__filtros { display: flex; gap: var(--space-2); }

/* Manchete da primeira visita (chegou do "Conectar Mercado Livre"). O botão de fechar fica alinhado ao
   topo do texto: com duas ou três linhas, centralizá-lo o joga para o meio do parágrafo. */
.lucro-boas-vindas { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

/* Campo de custo SEMPRE aberto. A versão anterior era um botão com borda tracejada em
   --color-border: sobre fundo branco essa borda é quase invisível, então a única pista de que dava
   para editar era passar o mouse por cima — ou seja, adivinhar. Agora o campo se mostra como campo.
   Fundo levemente tingido em vez de caixa cheia: vinte deles numa tabela não podem virar formulário. */
.lucro-custo-edit { display: flex; align-items: center; gap: var(--space-1); }
.lucro-custo-input {
    max-width: 96px; text-align: right; font-variant-numeric: tabular-nums;
    background: var(--color-surface-2); border-color: transparent;
}
.lucro-custo-input:hover { border-color: var(--color-border); }
.lucro-custo-input:focus, .lucro-custo-input:focus-visible {
    background: var(--color-surface); border-color: var(--color-primary);
}
/* Sem valor cadastrado o campo chama para a ação, porque é ele que trava a conta do anúncio. */
.lucro-custo-input:placeholder-shown { border-color: var(--color-warning); background: var(--color-warning-tint-soft); }

/* Preço tem o mesmo campo, mas o que ele faz é diferente: simula, não salva. */
.lucro-preco-input {
    max-width: 100px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
    background: var(--color-surface-2); border-color: transparent;
}
.lucro-preco-input:hover { border-color: var(--color-border); }
.lucro-preco-input:focus, .lucro-preco-input:focus-visible { background: var(--color-surface); border-color: var(--color-primary); }

/* A leitura da conta é horizontal: preço − taxa − frete − custo − imposto = lucro. Alinhar cada parcela
   pela direita e travar os algarismos monoespaçados deixa diferenças pequenas visíveis sem aumentar
   a tabela. O título continua sendo a coluna que pode ceder espaço.
   Da 4ª à 11ª coluna: preço, taxa, frete, custo, imposto, lucro, margem e dinheiro em jogo. */
.profitability-table th:nth-child(n + 4):nth-child(-n + 11),
.profitability-table td.profitability-table__number {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Cabendo em 1366px ----------
   Com a coluna de imposto a tabela foi a 1599px e a última coluna saía da tela numa resolução que
   ainda é a mais comum. Medido: sobrava ~10 a 30px de respiro em CADA coluna numérica, e o respiro
   padrão da .data-table é generoso porque foi pensado para tabelas de 5 ou 6 colunas.
   Aqui são doze — apertar as numéricas devolve ~120px sem os números se encostarem, e o título
   continua com o espaço que precisa para ser lido. */
.profitability-table th,
.profitability-table td { padding-left: var(--space-2); padding-right: var(--space-2); }
.profitability-table th:first-child,
.profitability-table td:first-child { padding-left: var(--space-3); }

.profitability-table .profitability-table__listing { min-width: 200px; font-weight: 600; }
.profitability-table .profitability-table__result { font-weight: 700; }
.profitability-table .profitability-table__margin { font-weight: 600; }
.profitability-table .profitability-table__action { white-space: nowrap; }

/* A célula de duas linhas (valor em cima, "4 vendas" embaixo) — mesmo desenho que o painel do
   dashboard já usa. Os <span> precisam virar bloco para empilhar; em linha, eles brigariam pela
   mesma largura e a coluna voltaria a crescer, que é justamente o que a fusão veio resolver. */
.profitability-table td.profitability-table__result .page-header__desc { display: block; }
.profitability-table td.profitability-table__result { line-height: 1.35; }

/* "falta: custo do produto" numa linha só ocupa 141px e era ele que ditava a largura da coluna Lucro
   nas 47 linhas — inclusive nas que tinham a conta fechada e só mostram um valor curto. Quebrando em
   duas linhas, a coluna volta ao tamanho do número e a informação continua inteira na tela. */
.profitability-table .lucro-falta {
    display: inline-block; white-space: normal; max-width: 108px; text-align: right; line-height: 1.3;
}

/* Linha da projeção: presa ao anúncio de cima, e visivelmente "ainda não aplicada". */
.data-table tbody tr.lucro-sim td {
    background: var(--color-ai-surface); border-top: none;
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.lucro-sim__grid {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}
.lucro-sim__de { font-weight: 600; }

/* Mesmo código de cor do painel do dashboard: a barra repete o que a cor diz. */
.data-table tbody tr.row--danger td:first-child { box-shadow: inset var(--space-1) 0 0 var(--color-danger); }
.data-table tbody tr.row--warn td:first-child { box-shadow: inset var(--space-1) 0 0 var(--color-warning); }

.dash-empty {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding-top: var(--space-5); padding-bottom: var(--space-5);
    color: var(--color-text-muted); font-size: var(--text-sm);
}
.dash-empty strong { color: var(--color-text); font-size: var(--text-base); }
.dash-sync-feedback {
    margin: var(--space-3) var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.dash-sync-feedback--ok { border-color: var(--color-success); color: var(--color-success); }
.dash-sync-feedback--error { border-color: var(--color-danger); color: var(--color-danger); }

.dash-panel__foot {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    margin-top: auto; padding-top: var(--space-3); padding-bottom: var(--space-3);
    background: var(--color-surface-subtle); border-top: 1px solid var(--color-border);
    font-size: var(--text-xs); color: var(--color-text-muted);
}
.dash-panel__warn { flex: 1 1 260px; line-height: 1.45; }
.dash-panel__all { white-space: nowrap; font-weight: 600; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: var(--space-3); align-items: center; justify-content: flex-end; margin-top: var(--space-4); }
.pagination__info { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Tendências de mercado ---------- */
.trend-list { display: flex; flex-direction: column; gap: var(--space-1); }
.trend-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.trend-list__item:last-child { border-bottom: none; }
.trend-list__pos { flex: 0 0 auto; min-width: 22px; text-align: right; color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.trend-list__kw { flex: 1 1 auto; font-weight: 500; }
.ranking-box { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-1); }
/* Dica abaixo de um campo (ex.: as regras da senha). Mesmo tom da label, sem o peso. */
.form-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.veh-results { margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); max-height: 260px; overflow-y: auto; }
.veh-results__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.veh-results__row:last-child { border-bottom: none; }
.veh-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.veh-chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px var(--space-3); font-size: var(--text-sm); }
.veh-chip__x { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); padding: 0; line-height: 1; }
.veh-chip__x:hover { color: var(--color-danger); }

/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
    background: #fff3cd; color: #664d03; bottom: 0; box-shadow: var(--shadow-lg);
    display: none; left: 0; padding: var(--space-3) var(--space-5); position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-3); top: var(--space-2); }
.blazor-error-boundary { background: var(--color-danger); padding: var(--space-4); color: #fff; }
.blazor-error-boundary::after { content: "Ocorreu um erro."; }
.validation-message { color: var(--color-danger); }

/* ---------- Responsivo (mínimo) ---------- */
/* O agente já é flutuante em qualquer largura — aqui sobra só a gaveta do menu. */
@media (max-width: 1320px) {
    /* Menu de módulos vira gaveta (hambúrguer). */
    .topnav__burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: var(--radius-md);
        color: var(--color-sidebar-text); cursor: pointer;
    }
    .topnav__burger:hover { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); }
    .topnav__env { display: none; }
    /* Espaco disputado com o hamburguer e o sino: o e-mail sai e fica so o icone. Quem quiser conferir a
       conta abre Configuracoes, que mostra o e-mail por extenso. */
    .topnav__user-name { display: none; }
    .topnav__user { padding: 4px; width: 30px; height: 30px; justify-content: center; }
    .topnav__modules {
        position: fixed; inset: 0 auto 0 0;
        width: min(320px, calc(100vw - var(--space-7))); height: 100vh; z-index: 90;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--color-sidebar-bg); padding: var(--space-3) var(--space-2);
        overflow-y: auto; transform: translateX(calc(-100% - var(--space-2)));
        transition: transform 160ms ease; box-shadow: var(--shadow-lg);
    }
    .nav-toggle:checked ~ .app-shell .topnav__modules { transform: translateX(0); }
    .nav-toggle:checked ~ .app-shell .nav-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(20, 27, 43, 0.45); z-index: 80;
    }
    .topnav__close {
        display: inline-flex; align-self: flex-end;
        color: var(--color-sidebar-text-active); border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--radius-md); padding: var(--space-1) var(--space-2);
        font-size: var(--text-sm); cursor: pointer; margin-bottom: var(--space-2);
    }
    /* Na gaveta, cada módulo vira acordeão simples: submenu já aberto abaixo do gatilho. */
    .topnav__module { position: static; }
    .topnav__root, .topnav__trigger { width: 100%; justify-content: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-base); }
    .topnav__root > .lucide, .topnav__trigger > .lucide { display: inline-flex; }
    .topnav__trigger::after { margin-left: auto; }
    .topnav__menu {
        display: block; position: static; min-width: 0;
        border: none; background: transparent; box-shadow: none;
        padding: 0 0 var(--space-2) var(--space-5);
    }
    .topnav__item { color: var(--color-sidebar-text); }
    .topnav__item:hover,
    .topnav__item.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); }
    .topnav__soon { background: #2a3550; color: #8b96ab; }
}
@media (max-width: 860px) {
    .content { padding: var(--space-4); }
    .page-header { flex-direction: column; align-items: stretch; }
    .screen-intro { flex-direction: column; align-items: flex-start; }
    .screen-actions { justify-content: flex-start; }
    .help-card__head { flex-wrap: wrap; }
    .help-card__go { margin-left: 0; }
    .dash-panel__head { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .dash-panel__count { justify-content: flex-start; }
    .dash-metrics__sync { margin-left: 0; flex-basis: 100%; }
    .kv { grid-template-columns: 1fr; gap: var(--space-1) 0; }
    .agent-reopen { right: var(--space-4); bottom: var(--space-4); }
    /* No celular o painel toma a tela toda (abaixo do topo). */
    .agent-rail { inset: var(--topbar-height) 0 0 0; width: 100vw; }
}

/* ========================================================================
   Console operacional de IA (/admin) — chrome próprio, denso, SEM avatar
   Maya nem menu do vendedor. Reusa tokens e componentes (.card, .btn,
   .data-table, .badge, .nav-link, .sidebar__section). Só o shell é novo.
   ======================================================================== */
.admin-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100vh; }
.admin-sidebar {
    background: var(--color-sidebar-bg); color: var(--color-sidebar-text);
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--space-4) var(--space-2); height: 100vh; overflow-y: auto;
}
.admin-sidebar .nav { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar__brand {
    display: flex; align-items: center; gap: var(--space-2);
    color: #fff; font-weight: 700; font-size: var(--text-lg);
    padding: var(--space-1) var(--space-3) var(--space-4);
}
.admin-sidebar__mark {
    flex: 0 0 auto; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: var(--gradient-ai); color: #fff;
}
.admin-sidebar__back {
    margin-top: auto; display: block;
    color: var(--color-sidebar-text); font-size: var(--text-sm); font-weight: 600;
    padding: var(--space-4) var(--space-3) var(--space-1);
}
.admin-sidebar__back:hover { color: var(--color-sidebar-text-active); text-decoration: none; }
.admin-main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.admin-topbar {
    flex: 0 0 auto; height: var(--topbar-height);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 0 var(--space-5);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.admin-topbar__title { font-weight: 600; }
.admin-content { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); }

/* Grade de cartões de um hub (Painel de IA e Configurações) */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.hub-card {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text);
    text-decoration: none;
}
a.hub-card:hover { background: var(--color-surface-2); text-decoration: none; }
.hub-card--stub { opacity: 0.72; }
.hub-card__head { display: flex; align-items: center; gap: var(--space-2); }
.hub-card__icon {
    flex: 0 0 auto; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: rgba(109, 40, 217, 0.12); color: var(--color-primary);
}
.hub-card__title { font-weight: 600; }
.hub-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Título de grupo numa tela de índice (Configurações separa "sua conta" de "sua loja"). */
.settings-group { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-1); }
.settings-group:first-of-type { margin-top: 0; }
.settings-group + .page-header__desc { margin-bottom: var(--space-3); }

/* Detalhe de execução: blocos monoespaçados roláveis (entrada/saída da IA) */
.code-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-1); }
.code-block {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-xs); line-height: 1.5;
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3);
    max-height: 340px; overflow: auto;
}

@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; height: auto; }
    .admin-sidebar { height: auto; flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
    .admin-sidebar__back { margin-top: 0; }
    .admin-main { height: auto; overflow: visible; }
    .admin-content { overflow: visible; padding: var(--space-4); }
}

/* Fluxograma dos agentes (/admin/fluxos) — passos verticais com trilho conector */
.badge--ai { background: rgba(109, 40, 217, 0.14); color: var(--color-primary); }
.flow { display: grid; }
.flow__step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-3); }
.flow__rail { display: flex; flex-direction: column; align-items: center; }
.flow__dot {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
    background: rgba(109, 40, 217, 0.12); color: var(--color-primary);
}
.flow__line { flex: 1 1 auto; width: 2px; background: var(--color-border); min-height: var(--space-3); }
.flow__step:last-child .flow__line { display: none; }
.flow__card {
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-3); background: var(--color-surface); margin-bottom: var(--space-3);
}
.flow__title { font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.flow__desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Texto formatado da IA (markdown seguro) — hierarquia leve, espaçamento enxuto */
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0 0 var(--space-2); }
.ai-md ul, .ai-md ol { margin: var(--space-1) 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.ai-md li { margin: 0; }
.ai-md strong { font-weight: 700; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4 { font-size: var(--text-base); font-weight: 700; margin: var(--space-2) 0 var(--space-1); }
.ai-md code { background: var(--color-surface-2); padding: 0 4px; border-radius: var(--radius-sm); font-size: 0.9em; }

/* ---------- Central de qualidade (QUA-02) ----------
   Cartão por PENDÊNCIA, não por anúncio: o número grande é quantos anúncios estão naquele problema,
   porque é ele que diz ao vendedor se o trabalho cabe no dia de hoje. */
.qual-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
/* Cartão aberto ocupa a largura toda: a lista de anúncios dentro dele não cabe numa coluna. */
.qual-card--open { grid-column: 1 / -1; }
.qual-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.qual-card__count { font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: var(--color-text); }
.qual-card__why { margin-top: var(--space-2); line-height: 1.45; }
.qual-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
/* O aviso de "ainda não conserta aqui" é discreto mas está sempre à vista — esconder seria mentir. */
.qual-card__soon { font-size: var(--text-xs); color: var(--color-text-muted); }
.qual-card__list { margin-top: var(--space-4); border-top: 1px solid var(--color-border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

.qual-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.qual-row__head { display: flex; align-items: center; gap: var(--space-3); }
.qual-row__thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); flex: none; }
.qual-row__thumb--empty { background: var(--color-surface-2); }
.qual-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.qual-row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qual-row__ficha { margin-top: var(--space-3); border-top: 1px dashed var(--color-border); padding-top: var(--space-3); }

/* ---------- Fotos do anúncio (QUA-04) ----------
   Mostrar as fotos que existem não é enfeite: o Mercado Livre dá id novo a cada upload, então o mesmo
   arquivo enviado duas vezes vira duas fotos iguais sem aviso. Ver a lista é como o vendedor percebe. */
.foto-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.foto-item { position: relative; margin: 0; width: 84px; height: 84px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-item--capa { border-color: var(--color-primary); }
.foto-item__capa { position: absolute; left: 0; bottom: 0; right: 0; font-size: var(--text-xs); text-align: center; background: var(--color-primary); color: #fff; padding: 1px 0; }
.foto-item__x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 1; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: var(--text-xs); }
.foto-item__x:disabled { opacity: .35; cursor: not-allowed; }

/* QUA-06: barra de sequência dentro da linha aberta ("anúncio 3 de 15" + próximo). */
.qual-row__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }

/* Selo da linha corrigida na Central: o vendedor consertou, mas a fila só encolhe quando o Mercado Livre
   refizer a avaliação dele. Fica DENTRO da linha porque é ali que a pessoa está olhando. */
.qual-row__corrigido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); line-height: 1.45; }
.qual-row__corrigido > span:first-child { flex: 1 1 320px; }
.qual-row__corrigido-acao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* ============================================================
   M8 — Documentos legais (Termos, Privacidade, Aceite)
   Leitura longa, não painel: largura limitada de propósito, porque linha comprida cansa.
   ============================================================ */

.doc-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--space-5) var(--space-4); gap: var(--space-5); }
.doc-shell__brand { display: block; }
.doc-shell__body { width: 100%; max-width: 820px; }
.doc-shell__footer { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.doc-shell__footer a { color: var(--color-text-muted); }

.doc-md__title { margin: 0 0 var(--space-1); }
.doc-md__meta { margin: 0 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }

.doc-md { line-height: 1.6; }
.doc-md h2 { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-lg); }
.doc-md p, .doc-md li { color: var(--color-text); }
.doc-md ul { padding-left: var(--space-5); }
.doc-md li { margin-bottom: var(--space-2); }
.doc-md code { background: var(--color-surface-subtle); padding: 1px 5px; border-radius: var(--radius-sm); }

/* A tabela rola dentro da própria caixa: em telefone, uma tabela de bases legais não pode empurrar a página. */
.doc-md table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; display: block; overflow-x: auto; }
.doc-md th, .doc-md td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.doc-md th { background: var(--color-surface-subtle); font-weight: 600; }

/* Documento inteiro dentro do aceite, dobrável: quem quiser ler lê, quem já leu não rola três telas. */
.doc-accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); }
.doc-accordion > summary { cursor: pointer; padding: var(--space-1) 0; }

/* Rodapé legal do cockpit: presente em toda tela, discreto o bastante para não competir com o conteúdo. */
.app-footer { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.app-footer a { color: var(--color-text-muted); }

/* Recado da tela de login: quem chega sem acesso precisa saber o que fazer, em vez de encarar
   dois campos e um botão. Separado do formulário por uma linha, para não competir com ele. */
.login-help { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }

/* =========================================================================
   Dicas (tooltips) — docs/design/TOOLTIPS.md
   A bolha vive presa ao <body> e é posicionada em coordenadas de tela por dica.js.
   Não é capricho: as tabelas rolam para o lado (.table-scroll) e a coluna de ação é
   congelada — bolha desenhada dentro desse recorte sai cortada ao meio.
   ========================================================================= */

/* Gatilho: o que a dica explica. Continua sendo texto normal da tela; só o cursor avisa que
   existe explicação. Sublinhado permanente em 30 elementos viraria poluição. */
.dica {
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.dica:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* O "?" existe por causa do celular: onde não há passar de mouse, sem uma marca visível ninguém
   descobre que a explicação está ali. Reservado a KPI e cabeçalho de coluna. */
.dica__marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-dica-marca-borda);
    color: var(--color-dica-marca);
    font-size: var(--text-xs);
    line-height: 1;
    flex: 0 0 auto;
}
.dica:hover .dica__marca,
.dica:focus-visible .dica__marca {
    border-color: var(--color-dica-marca);
    background: var(--color-dica-marca-fundo);
}

/* A bolha. z-index acima do diálogo (1000): há dicas dentro da ficha do anúncio, e uma explicação
   que aparece atrás da janela que ela explica não explica nada. */
.dica-bolha {
    position: fixed;
    z-index: 1100;
    max-width: var(--dica-largura);
    background: var(--color-dica-bg);
    color: var(--color-dica-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    line-height: 1.45;
    /* Sem transição de propósito: a dica nativa do navegador demorava ~1s e era esse atraso o
       problema que este componente existe para resolver. */
}
.dica-bolha[hidden] { display: none; }
.dica-bolha--ampla { max-width: var(--dica-largura-ampla); }

.dica-bolha__texto { margin: 0; }

.dica-bolha__mais {
    display: inline-block;
    margin-top: var(--space-1);
    color: var(--color-dica-link);
    font-weight: 600;
}

/* Seta: aponta o elemento explicado mesmo quando a bolha encostou na borda da janela e saiu do
   centro dele. O deslocamento horizontal é calculado no dica.js. */
.dica-bolha__seta {
    position: absolute;
    bottom: -5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--color-dica-bg);
    transform: rotate(45deg);
}
.dica-bolha--abaixo .dica-bolha__seta { bottom: auto; top: -5px; }

/* =========================================================================
   DASHBOARD 2 — experimento de layout (rota /dashboard2)

   Vive num bloco só, com prefixo .d2-, por um motivo prático: se a decisão for
   descartar o experimento, apaga-se daqui até o fim do arquivo e nada mais na
   aplicação muda. Nenhuma classe .d2- é usada por outra tela.

   A ZONA ESCURA, E POR QUE ELA EXISTE
   O sistema claro tem cinco papéis de superfície que, medidos, são a mesma cor:
   fundo -> card dá dL* = 2,1 (L* é clareza perceptual; ~10 é um degrau que o olho
   vê). É daí que vem a queixa de "tudo pálido". A faixa escura resolve isso sem
   repintar o sistema inteiro: ela cria o degrau que faltava, no lugar onde o
   número precisa saltar.

   OS TONS DO ESCURO FORAM MEDIDOS, NÃO ESCOLHIDOS NO OLHO:
     faixa  #0b0314  L* =  1,7
     painel #2e1847  L* = 13,8   (degrau de 12,1 — bem visível)
     chip   #3d2260  L* = 20,0   (degrau de  6,2)
   ATENÇÃO ao mexer: a razão de contraste do WCAG NÃO serve para julgar escuro
   sobre escuro. Os dois valores ficam perto de zero e a razão fica presa em
   ~1,2:1 mesmo quando a diferença é óbvia. Use L*, como acima.

   Texto e sinais no escuro foram conferidos sobre o painel:
     #ede7f6 14,4:1 · #a996c4 6,5:1 · verde 9,0:1 · âmbar 10,4:1 · rosa 6,5:1
   O roxo #a855f7 dá 4,4:1 e por isso só aparece em GRÁFICO (mínimo 3:1), nunca
   em texto corrido.
   ========================================================================= */

:root {
    /* Zona escura. Fora do escuro estes tokens não valem para nada. */
    --d2-faixa: #0b0314;
    --d2-painel: #2e1847;
    --d2-chip: #3d2260;
    --d2-linha: rgba(196, 181, 253, 0.16);
    --d2-linha-forte: rgba(196, 181, 253, 0.28);
    --d2-texto: #ede7f6;
    --d2-apagado: #a996c4;

    /* Degradês dos gráficos. São a MESMA semântica do sistema claro (verde ok,
       âmbar atenção, vermelho perigo), só na versão que sobrevive ao fundo escuro.
       Não são cor decorativa: nenhum tom aqui aparece sem um número escrito ao lado. */
    --d2-ok-de: #059669;
    --d2-ok-ate: #34d399;
    --d2-alerta-de: #d97706;
    --d2-alerta-ate: #fbbf24;
    --d2-perigo-de: #be123c;
    --d2-perigo-ate: #fb7185;
    --d2-roxo-de: #7c3aed;
    --d2-roxo-ate: #c084fc;
    --d2-neutro-de: #4c3a6b;
    --d2-neutro-ate: #7b6a9c;
}

/* ---------- Faixas ----------
   Sem margin negativa de propósito: .content é contêiner de rolagem, e sangrar
   para fora dele inventa barra horizontal (já aconteceu antes — ver .dash-band). */
.d2-faixa { padding: var(--space-5) 0; }
.d2-faixa--clara { background: transparent; }
.d2-faixa--escura {
    background: radial-gradient(120% 140% at 15% 0%, #1d0d33 0%, var(--d2-faixa) 62%);
    color: var(--d2-texto);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-top: var(--space-4);
    box-shadow: inset 0 1px 0 var(--d2-linha);
}

/* ---------- Faixa 1: contadores ---------- */
.d2-vitals {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2) var(--space-5);
    font-size: var(--text-sm); color: var(--color-text-muted);
}
.d2-vital { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.d2-vital b { font-size: var(--text-lg); color: var(--color-text); font-variant-numeric: tabular-nums; }
a.d2-vital { text-decoration: none; }
a.d2-vital:hover, a.d2-vital:hover b { color: var(--color-primary); }
.d2-vital--alerta b { color: var(--color-warning); }

/* Cada bloco tem uma barra de cor à esquerda em vez de fundo colorido: pintar o
   card inteiro de vermelho competiria com o número, que é o que precisa saltar. */
.d2-lead {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding-left: var(--space-4); border-left: 3px solid var(--color-border-strong);
}
.d2-lead--perigo { border-left-color: var(--color-danger); }
.d2-lead--alerta { border-left-color: var(--color-warning); }
.d2-lead--neutro { border-left-color: var(--color-primary); }

.d2-lead__area {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.d2-lead__area .lucide { flex: 0 0 auto; }
.d2-lead--perigo .d2-lead__area .lucide { color: var(--color-danger); }
.d2-lead--alerta .d2-lead__area .lucide { color: var(--color-warning); }
.d2-lead--neutro .d2-lead__area .lucide { color: var(--color-primary); }

/* O número é o herói da faixa: é ele que substitui o parágrafo. */
.d2-lead__valor {
    font-size: var(--text-3xl); font-weight: 700; line-height: 1.05;
    font-variant-numeric: tabular-nums; color: var(--color-text);
}
.d2-lead--perigo .d2-lead__valor { color: var(--color-danger-emphasis); }
.d2-lead__frase { font-size: var(--text-sm); color: var(--color-text-muted); }

.d2-lead__acao {
    margin-top: var(--space-2); font-size: var(--text-sm);
    font-weight: 600; color: var(--color-primary); text-decoration: none;
}
.d2-lead__acao:hover { text-decoration: underline; }

/* ---------- Faixa 3: o radar ---------- */
.d2-radar__topo { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.d2-radar__marca {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: var(--radius-lg);
    background: var(--gradient-ai);
    color: #fff; box-shadow: var(--shadow-ai);
}
.d2-radar__titulo { margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--d2-texto); }
.d2-radar__sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--d2-apagado); }

.d2-radar__grade { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1320px) {
    html[data-rail="closed"] .d2-radar__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.d2-painel {
    background: var(--d2-painel);
    border: 1px solid var(--d2-linha);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-4);
    min-width: 0; container-type: inline-size;
}
.d2-painel__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.d2-painel__titulo {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--d2-texto);
}
.d2-painel__titulo .lucide { color: var(--d2-roxo-ate); flex: 0 0 auto; }
.d2-painel__link { font-size: var(--text-sm); color: var(--d2-roxo-ate); text-decoration: none; }
.d2-painel__link:hover { text-decoration: underline; }

.d2-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.d2-chip {
    display: inline-flex; align-items: baseline; gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--d2-chip); border: 1px solid var(--d2-linha);
    font-size: var(--text-xs); color: var(--d2-apagado);
}
.d2-chip b { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--d2-texto); }
.d2-chip--perigo b { color: var(--d2-perigo-ate); }
.d2-chip--alerta b { color: var(--d2-alerta-ate); }

.d2-painel__corpo { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; flex: 1 1 auto; }
@container (min-width: 460px) {
    .d2-painel__corpo { grid-template-columns: minmax(0, 1fr) auto; }
}

.d2-bloco { min-width: 0; }
.d2-bloco--rosca { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 190px; height: 100%; }
.d2-bloco--rosca .rosca-comp { flex-direction: column; gap: var(--space-3); align-items: stretch; }
.d2-bloco--rosca .rosca-comp__desenho { align-self: center; }
.d2-bloco--rosca .rosca-comp__lista { width: 100%; }
.d2-bloco__titulo {
    margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600;
    color: var(--d2-apagado); text-transform: uppercase; letter-spacing: .04em;
}
.d2-nota { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--d2-apagado); }
.d2-nota a { color: var(--d2-roxo-ate); }
.d2-vazio { margin: 0; font-size: var(--text-sm); color: var(--d2-apagado); }

/* ---------- "Piores agora" ---------- */
.d2-piores { border-top: 1px solid var(--d2-linha); padding-top: var(--space-4); }
.d2-piores__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.d2-piores__link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2); border-radius: var(--radius-md);
    text-decoration: none; color: var(--d2-texto);
    transition: background-color 160ms ease;
}
.d2-piores__link:hover { background: var(--d2-chip); }
.d2-piores__foto { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--radius-sm); object-fit: cover; background: var(--d2-chip); }
.d2-piores__foto--vazia { display: inline-block; }
.d2-piores__nome { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d2-piores__nota {
    flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center;
    min-width: 42px; padding: 2px var(--space-2); border-radius: var(--radius-sm);
    font-weight: 700; font-variant-numeric: tabular-nums; background: var(--d2-chip);
}
.d2-piores__nota small { font-size: 10px; font-weight: 400; color: var(--d2-apagado); }
.d2-piores__nota--perigo { color: var(--d2-perigo-ate); }
.d2-piores__nota--alerta { color: var(--d2-alerta-ate); }
.d2-piores__nota--prov { color: var(--d2-apagado); }


/* =========================================================================
   A faixa "Atualizar loja" — botão em repouso, progresso enquanto roda

   NÃO É MODAL, por decisão de 02/09/2026: a atualização é trabalho de fundo e a própria interface do
   dashboard atual diz "você pode fechar esta tela; o andamento fica salvo". Prender o vendedor numa
   caixa no meio da tela contradiz isso e, numa loja grande, custa minutos dele. Em largura cheia a
   faixa fica MAIS visível que um modal, sem bloquear nada.

   SÃO TRÊS ETAPAS, não uma barra: anúncios → taxas e fretes → saúde, cada uma com o próprio total.
   Uma barra só encheria e recomeçaria duas vezes, o que se lê como defeito.
   ========================================================================= */

.d2-topo-barra {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-3) var(--space-5);
}
.d2-topo-barra > .d2-vitals { flex: 1 1 auto; }

/* Em repouso a faixa é um canto; rodando, ela quebra para uma linha inteira. É a mesma caixa mudando
   de papel — o "transforma-se" que substitui o modal. */
.atualiza { flex: 0 0 auto; }
.atualiza--rodando { flex: 1 1 100%; }

.atualiza__repouso { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.atualiza__estado { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.atualiza__ponto { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: 0 0 auto; }
.atualiza__ponto--ok { background: var(--color-success); }
.atualiza__ponto--alerta { background: var(--color-warning); }
.atualiza__ponto--neutro { background: var(--color-border-strong); }

.atualiza__vencidos { font-size: var(--text-xs); color: var(--color-warning); }

/* A ÚNICA ação primária da tela (UI_GUARDRAILS §8), e por isso pode ser a coisa mais forte da faixa
   clara: roxo cheio, corpo maior que o botão padrão e sombra de contato. Sem gradiente: o
   --gradient-ai é a identidade do agente e usá-lo aqui diluiria a marca da MAYA num botão de sync. */
.atualiza__botao {
    font-size: var(--text-base); font-weight: 600;
    padding: var(--space-3) var(--space-5);
    box-shadow: var(--shadow-md);
}
.atualiza__botao .lucide { flex: 0 0 auto; }

.atualiza__mensagem {
    margin: var(--space-2) 0 0; font-size: var(--text-xs);
    color: var(--color-warning); text-align: right;
}

/* ---------- Enquanto roda ---------- */
.atualiza__progresso {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}
.atualiza__cabeca {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
}
.atualiza__estagio { font-size: var(--text-base); }
.atualiza__contador {
    font-size: var(--text-sm); font-variant-numeric: tabular-nums;
    color: var(--color-primary); font-weight: 700;
}
.atualiza__aviso { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); }

/* O pulso é o ÚNICO movimento da faixa, e ele informa: diz que há trabalho acontecendo agora, que é
   justamente o que não dá para provar pelo número quando o total ainda não existe. Motion informa,
   não enfeita (UI_GUARDRAILS §20). */
.atualiza__pulso {
    width: 10px; height: 10px; flex: 0 0 auto;
    border-radius: var(--radius-pill); background: var(--color-primary);
    animation: atualiza-pulso 1.4s ease-in-out infinite;
}
@keyframes atualiza-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.7); }
}

.atualiza__etapas {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
}
.atualiza__etapa { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.atualiza__trilho {
    height: 8px; border-radius: var(--radius-pill);
    background: var(--color-surface-2); overflow: hidden;
}
.atualiza__preenche {
    display: block; height: 100%; border-radius: var(--radius-pill);
    background: var(--color-primary);
    transition: width 400ms ease;
}
.atualiza__nome { font-size: var(--text-xs); color: var(--color-text-muted); }

.atualiza__etapa--concluida .atualiza__preenche { background: var(--color-success); }
.atualiza__etapa--concluida .atualiza__nome { color: var(--color-success); }
.atualiza__etapa--andando .atualiza__nome { color: var(--color-text); font-weight: 600; }

/* Etapa andando SEM total conhecido fica com o trilho listrado e parado: mostra que ela é a da vez
   sem afirmar um progresso que ninguém mediu. Barra andando sozinha seria mentira animada. */
.atualiza__etapa--andando .atualiza__trilho {
    background: repeating-linear-gradient(
        135deg,
        var(--color-surface-2) 0 6px,
        var(--color-ai-surface) 6px 12px);
}

@media (prefers-reduced-motion: reduce) {
    .atualiza__pulso { animation: none; }
    .atualiza__preenche { transition: none; }
}

@media (max-width: 720px) {
    .atualiza__etapas { grid-template-columns: minmax(0, 1fr); }
    .atualiza__aviso { margin-left: 0; }
    .atualiza__botao { width: 100%; justify-content: center; }
}

/* ---------- Faixa 2: a MAYA e as alterações, lado a lado ---------- */
.d2-topo { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
/* Quem separa os dois cartoes aqui e o `gap` do grid. A regra global `.card + .card` somava mais uma
   margem no segundo — e era so no de cima: as bases alinhavam e os topos ficavam 16px fora. */
.d2-topo > .card { margin: 0; }
@media (min-width: 1320px) {
    html[data-rail="closed"] .d2-topo { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
}

/* ---------- O card da MAYA ---------- */

/* O FUNDO DO CARD DELA É DIFERENTE DE TODOS OS OUTROS, e isso é a decisão de protagonismo.
   Enquanto os demais cards são brancos, o dela tem um gradiente próprio — some da grade e vira a coisa
   que se olha primeiro.
   O cinza NÃO é neutro puro: puxa o roxo da paleta. Cinza chapado, em interface, quer dizer DESLIGADO —
   é a cor de campo bloqueado e de botão inativo. Num card que é o carro-chefe do sistema, isso diria
   exatamente o contrário do pretendido. Com o roxo por baixo, ele lê como "área da MAYA". */
.d2-maya {
    background: linear-gradient(160deg, var(--color-ai-card-topo) 0%, var(--color-ai-card-pe) 100%);
}

/* A LUZ QUE CIRCULA A BORDA — e por que ela não é só enfeite.
   A MAYA é a protagonista do sistema, então o card dela pode ter tratamento diferente do resto. Mas
   luz que fica acesa sempre vira papel de parede: em uma semana ninguém enxerga mais. Então ela
   CARREGA UM DADO: só gira quando existe leitura de hoje.
   Isso responde, sem texto, a pergunta mais importante deste card — que é justamente a que o próprio
   componente já se preocupa em responder com a data no topo: "isto é de agora ou de semana passada?".
   Card sem leitura fica parado, e o silêncio é honesto. */
@property --maya-giro {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.d2-maya { padding: var(--space-5); position: relative; }

/* O anel mora no ::before com a máscara em xor: o preenchimento inteiro é desenhado e depois vazado,
   sobrando só a faixa de 1px da borda. É o jeito de ter gradiente cônico numa borda arredondada —
   `border-image` não acompanha `border-radius`. */
.d2-maya--viva::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    /* O gradiente NÃO passa por `transparent`, e isso não é detalhe de gosto: interpolar até
       transparente atravessa o preto invisível e deixa um véu cinza no anel. Ele vai até a cor da
       borda comum — então o anel É a borda do card, e o que gira é um brilho viajando por ela. */
    /* O arco claro ocupa cerca de um terço da volta, com queda suave dos dois lados. A primeira versão
       usava 45° e sumia: num anel de 2px, um arco curto é um ponto, não um facho — e ponto que anda
       parece defeito de renderização, não luz. */
    background: conic-gradient(from var(--maya-giro),
        var(--color-border) 0deg,
        var(--color-ai-border) 30deg,
        var(--color-primary) 70deg,
        var(--color-primary) 90deg,
        var(--color-ai-border) 130deg,
        var(--color-border) 175deg,
        var(--color-border) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: maya-giro 8s linear infinite;
    /* Não intercepta clique: é decoração por cima do conteúdo, e o conteúdo tem links. */
    pointer-events: none;
}

/* A aura por fora. Sem ela o anel some no meio de uma tela cheia de cards — foi o que aconteceu na
   primeira tentativa, com 1px e nenhum brilho: tecnicamente pintando, visualmente inexistente.
   Fica ESTÁTICA de propósito: a aura marca "este card é o da MAYA", e o movimento fica por conta do
   anel, que é quem carrega o dado. Duas coisas piscando na mesma caixa competem entre si. */
.d2-maya--viva {
    border-color: var(--color-ai-border);
    box-shadow: var(--shadow-sm), 0 0 0 4px var(--color-ai-surface);
}

@keyframes maya-giro {
    to { --maya-giro: 360deg; }
}

/* Quem pediu menos movimento no sistema operacional NÃO perde a informação: o anel continua lá,
   parado, num ângulo fixo. Sumir com ele trocaria "menos movimento" por "menos dado". */
@media (prefers-reduced-motion: reduce) {
    .d2-maya--viva::before { animation: none; --maya-giro: 45deg; }
}
.d2-maya__topo { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
/* O avatar tem tamanho de retrato, não de ícone: ele é o contraponto de empatia do sistema
   (DESIGN_SYSTEM, "dureza operacional + empatia dos avatares"), e a 24px viraria mais um símbolo
   na barra. alt vazio de propósito — o nome dela já está escrito ao lado, no título. */
.d2-maya__avatar {
    width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-pill);
    object-fit: cover; background: var(--color-ai-surface);
    box-shadow: 0 0 0 2px var(--color-ai-border);
}
.d2-maya__cabeca { min-width: 0; }
.d2-maya__titulo { margin: 0; font-size: var(--text-xl); font-weight: 700; }
.d2-maya__quando { font-size: var(--text-xs); color: var(--color-text-muted); }

.d2-maya__grade {
    display: grid; gap: var(--space-4) var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.d2-maya__vazio {
    margin: var(--space-4) 0 0; padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm); color: var(--color-text-muted);
}



/* A unidade fica colada no número, em letra pequena: "R$ 58,04 / perdidos em 13 anúncios". */
.d2-lead__unidade { font-size: var(--text-xs); color: var(--color-text-muted); }

/* A LEITURA DA MAYA É APARADA POR CSS, NUNCA POR CORTE DE STRING.
   O texto inteiro fica no DOM (leitor de tela e busca da página acham tudo); só a exibição para em
   3 linhas. Cortar a frase em C# seria pior que feio: uma conclusão dela cortada no meio pode dizer
   o contrário do que ela concluiu. */
/* A MANCHETE da MAYA. Escrita por ela, na mesma chamada da leitura.
   Existe porque a coluna é estreita: sem manchete, o vendedor cai direto no texto aparado e começa a ler
   no meio de um raciocínio. Ela é conclusão curta, não rótulo de gaveta — "Visitas chegam, vendas não",
   e nunca "Análise de qualidade". */
.d2-lead__manchete {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xl); font-weight: 700; line-height: 1.25;
    color: var(--color-text);
}

/* A leitura dela sobe de tamanho e ESCURECE. Nos outros cards o texto de apoio é cinza porque legenda
   de número é secundária; aqui o texto É o produto — o número ao lado é que ilustra. Cor de legenda num
   texto que se quer lido é o que o dono chamou de "muito pequeno" na tela de 02/09.

   POR QUE 16px E NÃO 14. A escala deste projeto tem `--text-base` em 14px, e o comentário ao lado dela
   diz o que ela é: "mínimo em tabela". Tabela é para varrer com o olho; isto aqui é prosa, escrita para
   ser lida do começo ao fim. Subir para 14 não teria resolvido nada — é 1px acima do que já estava. */
.d2-lead__leitura {
    margin: var(--space-2) 0 0; font-size: var(--text-lg); color: var(--color-text);
    line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Aberta, a coluna solta o aparo. O texto não muda — ele sempre esteve inteiro no DOM. */
.d2-lead--aberta .d2-lead__leitura { -webkit-line-clamp: unset; overflow: visible; }

/* Os fatos em que ela se apoiou, e o que mais viu hoje. É o que transforma "a IA disse" em "a IA mostrou
   a conta" — e é a única coisa que a gaveta traz e que a tela densa não tem. */
.d2-lead__apoio {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted);
}
.d2-lead__rotulo {
    display: block; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-text-subtle, var(--color-text-muted));
}

/* O pé da coluna: o botão de abrir à esquerda, o atalho para a tela densa à direita. Empurrado para
   baixo com margin-top:auto para que colunas de alturas diferentes terminem alinhadas. */
.d2-lead__pe {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-top: auto; padding-top: var(--space-3);
}
.d2-lead__abrir {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: var(--text-xs); font-weight: 600;
    color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px;
}
.d2-lead__abrir:hover { color: var(--color-primary-hover); }

/* =========================================================================
   O card FÚCSIA — "Últimas alterações"

   DECISÃO DO DONO (02/09/2026), tomada contra a recomendação anterior e com a regra alterada de
   propósito. O que valia antes: o fúcsia era exclusivo da marca do "?" (--color-dica-marca), com um
   significado só no sistema inteiro. O dono decidiu abrir a regra para este card e definiu a
   compensação: onde um "?" cair dentro do card fúcsia, ELE troca de cor para manter contraste — está
   implementado no fim deste bloco.

   O QUE ISSO CUSTA, PARA QUEM MEXER DEPOIS: a marca do "?" deixou de ser a única superfície fúcsia da
   aplicação. O risco não é o card; é o olho acostumar. Se aparecer uma terceira superfície fúcsia, o
   "?" perde o que sobrou de reconhecimento — este card é a exceção, não o começo de uma família.

   O VERMELHO NÃO SOBREVIVE AQUI, e isso foi medido, não achado. Em fundo fúcsia (324°) o rosa de
   perigo fica a 29° da matiz do fundo, o vermelho a 36° e até o coral a 53° — todos viram mancha.
   Por isso, NESTE CARD:
       piorou   -> ÂMBAR  (79° do fundo)
       melhorou -> VERDE  (178° do fundo)
   Não é semântica quebrada: uma taxa que subiu é um AVISO, não um prejuízo confirmado — e o título da
   linha diz "subiu"/"caiu" por escrito, então a cor nunca é o único recado. Perigo confirmado continua
   vermelho onde ele mora, nas tabelas e no Radar.

   A SEPARAÇÃO DO ROXO PRECISOU DOS TRÊS EIXOS (a primeira tentativa, um azul-marinho apagado, foi
   recusada porque mexia só na matiz):
       matiz     324°   (56° do roxo do Radar)
       saturação 69%    (o Radar tem 49%)
       clareza   L* 32,1 (o painel do Radar tem 13,8 — degrau de 18,3)
       gradiente varia 24,6 de L* (o do Radar varia 5,4)

   TONS CONFERIDOS NO PIOR CASO — o ponto MAIS CLARO do gradiente (#8c1a5e), onde o contraste é menor:
   texto 7,93:1 · apagado 5,58:1 · âmbar 5,19:1 · verde 4,97:1 · marca do "?" 6,63:1.
   Ao mexer no gradiente, meça por ali: no ponto escuro passa qualquer coisa.
   ========================================================================= */

:root {
    --d2-alter-claro: #8c1a5e;
    --d2-alter-escuro: #2b0a1e;
    --d2-alter-item: rgba(255, 214, 236, 0.10);
    --d2-alter-item-hover: rgba(255, 214, 236, 0.18);
    --d2-alter-linha: rgba(255, 214, 236, 0.22);
    --d2-alter-texto: #fdf2f8;
    --d2-alter-apagado: #edc4dc;
    --d2-alter-pior: #fbbf24;
    --d2-alter-melhor: #4ade80;
    --d2-alter-neutro: #e9d5ff;
    /* A marca do "?" dentro deste card. É a compensação combinada: fúcsia sobre fúcsia não existe. */
    --d2-alter-marca: #ffd6ec;
}

.d2-alter {
    padding: var(--space-4);
    background: linear-gradient(150deg, var(--d2-alter-claro) 0%, var(--d2-alter-escuro) 62%);
    border: 1px solid var(--d2-alter-linha);
    color: var(--d2-alter-texto);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.d2-alter__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.d2-alter__titulo { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--d2-alter-texto); }
.d2-alter__sub { margin: 2px 0 0; font-size: var(--text-xs); color: var(--d2-alter-apagado); }
.d2-alter__contador {
    flex: 0 0 auto; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
    padding: 2px var(--space-2); border-radius: var(--radius-pill);
    background: var(--d2-alter-item); border: 1px solid var(--d2-alter-linha);
    color: var(--d2-alter-apagado);
}

.d2-alter__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.d2-alter__link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2); border-radius: var(--radius-md);
    text-decoration: none; color: var(--d2-alter-texto);
    transition: background-color 160ms ease;
}
.d2-alter__link:hover { background: var(--d2-alter-item-hover); }

/* O ícone diz o TIPO (frete, taxa, nota, pendência) e a cor diz a DIREÇÃO (piorou, melhorou).
   São duas informações diferentes e por isso ocupam dois canais — quem não distingue as cores ainda
   lê o tipo pelo desenho, e a direção está escrita no título da linha. */
.d2-alter__icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--d2-alter-item); border: 1px solid var(--d2-alter-linha);
}
.d2-alter__icone--pior { color: var(--d2-alter-pior); }
.d2-alter__icone--melhor { color: var(--d2-alter-melhor); }
.d2-alter__icone--neutro { color: var(--d2-alter-neutro); }

.d2-alter__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.d2-alter__nome { font-size: var(--text-sm); font-weight: 600; }
.d2-alter__detalhe {
    font-size: var(--text-xs); color: var(--d2-alter-apagado);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d2-alter__quando { flex: 0 0 auto; font-size: var(--text-xs); white-space: nowrap; color: var(--d2-alter-apagado); }
.d2-alter__quando--pior { color: var(--d2-alter-pior); }
.d2-alter__quando--melhor { color: var(--d2-alter-melhor); }

/* Vazio que não parece bug: diz o que foi conferido, em que janela, e que silêncio é boa notícia.
   Cresce para ocupar a altura sobrando, porque este card acompanha a altura do card da MAYA. */
.d2-alter__vazio {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--space-2); padding: var(--space-5) var(--space-3);
    color: var(--d2-alter-apagado);
}
.d2-alter__vazio .lucide { color: var(--d2-alter-melhor); }
.d2-alter__vazio strong { color: var(--d2-alter-texto); font-size: var(--text-base); }
.d2-alter__vazio span { font-size: var(--text-xs); max-width: 34ch; }

.d2-alter__rodape {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    margin-top: auto; padding-top: var(--space-3);
    border-top: 1px solid var(--d2-alter-linha);
    font-size: var(--text-xs); color: var(--d2-alter-apagado);
}
.d2-alter__rodape a { color: var(--d2-alter-texto); text-decoration: none; font-weight: 600; }
.d2-alter__rodape a:hover { text-decoration: underline; }

/* A COMPENSAÇÃO COMBINADA COM O DONO: o "?" não pode ser fúcsia sobre fúcsia. Dentro deste card ele
   vira rosa muito claro (6,63:1 no pior ponto do gradiente) e mantém a mesma forma — é a forma, não a
   cor, que o vendedor aprendeu a reconhecer. */
.d2-alter .dica__marca {
    color: var(--d2-alter-marca);
    border-color: var(--d2-alter-linha);
}
.d2-alter .dica:hover .dica__marca,
.d2-alter .dica:focus-visible .dica__marca {
    border-color: var(--d2-alter-marca);
    background: var(--d2-alter-item-hover);
}

/* ---------- Foto e nota nas barras ---------- */
.barras--com-foto .barras__item { grid-template-columns: 28px minmax(110px, 1.2fr) minmax(60px, 1.6fr) var(--barras-valor); }
.barras__foto {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    object-fit: cover; background: var(--color-surface-2);
}
.barras--escuro .barras__foto { background: var(--d2-chip); }
.barras__foto--vazia { display: inline-block; }
.barras__nota {
    grid-column: 1 / -1; text-align: right; line-height: 1.2;
    font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted);
}
.barras--escuro .barras__nota { color: var(--d2-apagado); }

@container (max-width: 380px) {
    .barras--com-foto .barras__item { grid-template-columns: 28px minmax(0, 1fr) var(--barras-valor); }
    .barras--com-foto .barras__rotulo { grid-column: 2 / -1; }
    .barras--com-foto .barras__trilho { grid-column: 2 / 3; }
}

/* =========================================================================
   Gráficos (usáveis fora do Dashboard 2 — por isso sem prefixo .d2-)
   ========================================================================= */

/* ---------- Rosca de composição ---------- */
.rosca-comp { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.rosca-comp__desenho { position: relative; width: var(--rosca-tamanho, 128px); height: var(--rosca-tamanho, 128px); flex: 0 0 auto; }
.rosca-comp__svg { width: 100%; height: 100%; display: block; }
.rosca-comp__trilho { fill: none; stroke: var(--color-border); }
/* A fatia tem tampa reta: com stroke-linecap arredondado as pontas invadem a fatia
   vizinha e uma parte de 2% aparece maior do que é. Gráfico não pode arredondar
   para cima o que ele está medindo. */
.rosca-comp__fatia { fill: none; stroke-linecap: butt; }
.rosca-comp__centro {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1.1; text-align: center;
}
.rosca-comp__centro strong { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.rosca-comp__centro small { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 84px; }

.rosca-comp__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.rosca-comp__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.rosca-comp__ponto { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 3px; }
.rosca-comp__rotulo { color: var(--color-text-muted); }
.rosca-comp__valor { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Dentro da zona escura os textos da rosca trocam de tinta. */
.d2-faixa--escura .rosca-comp__trilho { stroke: var(--d2-chip); }
.d2-faixa--escura .rosca-comp__centro strong { color: var(--d2-texto); }
.d2-faixa--escura .rosca-comp__centro small,
.d2-faixa--escura .rosca-comp__rotulo { color: var(--d2-apagado); }
.d2-faixa--escura .rosca-comp__valor { color: var(--d2-texto); }

/* ---------- Barras horizontais ---------- */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* A COLUNA DO VALOR TEM LARGURA FIXA, e isso e correcao de defeito, nao capricho.
   Cada .barras__item e uma grade INDEPENDENTE — nao ha grade compartilhada entre as linhas. Com a
   ultima coluna em `auto`, cada linha dimensionava a coluna pelo proprio conteudo, e o trilho ficava
   com a sobra. Medido no navegador: trilho de 150px nas linhas com "2 vendas" e de 85px nas linhas
   com "sem venda no historico". Isso da DUAS REGUAS no mesmo grafico — uma barra cheia de 85px
   parece igual a uma pela metade de 150px, e o desenho passa a mentir sobre a proporcao.
   Largura fixa faz todas as linhas calcularem as colunas igual. Se um valor maior aparecer (casa de
   milhar), aumente --barras-valor; nao volte para `auto`. */
.barras { --barras-valor: 84px; }
.barras__item {
    display: grid; align-items: center; gap: var(--space-1) var(--space-3);
    grid-template-columns: minmax(120px, 1.3fr) minmax(60px, 1.7fr) var(--barras-valor);
}
.barras__rotulo {
    font-size: var(--text-sm); color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barras__trilho { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
.barras__preenchimento { display: block; height: 100%; border-radius: var(--radius-pill); }
.barras__valor { font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

.barras--escuro .barras__rotulo { color: var(--d2-apagado); }
.barras--escuro .barras__trilho { background: var(--d2-chip); }
.barras--escuro .barras__valor { color: var(--d2-texto); }

/* Em painel estreito o rótulo sobe para a própria linha, senão sobra 40px para
   um título de anúncio e a barra vira um traço. */
@container (max-width: 380px) {
    .barras__item { grid-template-columns: minmax(0, 1fr) auto; }
    .barras__rotulo { grid-column: 1 / -1; white-space: normal; }
}