/* =========================================================================
   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;
    /* Seleção: o item ESCOLHIDO de uma lista (não o que está sob o mouse). Violeta da marca a 10% — criado em
       25/09/2026 para a fila do Catálogo, onde --color-surface-2 (#f3eff8) não se distinguia do branco no print do
       dono. Hover continua sendo --color-row-hover; a diferença entre os dois é o que diz "este é o escolhido". */
    --color-primary-tint: rgba(109, 40, 217, 0.10);
    /* A borda de uma superfície violeta translúcida (o balão "Conversar com a Maya", 26/09/2026). */
    --color-primary-tint-border: rgba(109, 40, 217, 0.28);
    --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;
    /* Tintas do verde, par das do amarelo e do vermelho. Nasceram para a caixa "Pode aceitar" do
       Editor de atributos: fundo leve com borda, e o texto do valor continua escuro por cima. */
    --color-success-tint-soft: rgba(31, 157, 87, 0.07);
    --color-success-tint-border: rgba(31, 157, 87, 0.34);
    /* 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;

    /* SINAL DE MOVIMENTO (12/09/2026). Par exclusivo para indicadores de subiu/caiu em tabela densa — ver o
       bloco .alt-mov lá embaixo. Fica aqui, entre os tokens, e não solto na regra: cor hardcoded fora dos
       tokens é o que o UI_GUARDRAILS proíbe, e o dia em que uma segunda tela precisar do mesmo sinal ela
       tem de achar o valor aqui. */
    --color-sinal-baixa: #e11d48;
    --color-sinal-baixa-tinta: rgba(225, 29, 72, 0.10);
    --color-sinal-baixa-borda: rgba(225, 29, 72, 0.30);
    --color-sinal-alta: #047857;
    --color-sinal-alta-tinta: rgba(4, 120, 87, 0.10);
    --color-sinal-alta-borda: rgba(4, 120, 87, 0.28);
    /* 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;
    /* A SUPERFÍCIE DA MAYA — uma receita só, usada onde quer que ela fale.
       Base branca com uma luz violeta caindo do topo, e uma borda violeta. Nasceu escrita na mão dentro
       de `.screen-intro` (a caixa dela nas outras telas) e virou token em 04/09/2026, quando o card do
       dashboard passou a usá-la também. Duas caixas da mesma personagem não podem ter duas receitas.

       O QUE ISTO SUBSTITUIU: um degradê CINZA (#e2ddec no topo -> #f8f6fb no pé), exclusivo do card do
       dashboard. Ele falhava por medida, não por gosto: o pé do degradê dava 1,02:1 contra o fundo da
       página (#faf8fd) — a mesma cor —, então o card se dissolvia embaixo. Numa página de branco, roxo e
       fúcsia, era também a única superfície dessaturada: lia como painel desligado.

       CUIDADO AO MEDIR ESTA BORDA, porque é fácil errar como se errou aqui na primeira vez. Achatada
       sobre o fundo da página ela vira rgb(211,190,243), que dá 1,60:1 — e não os 2,04:1 que uma
       estimativa de cabeça produziu antes de alguém abrir o navegador. Contra os 1,21:1 da borda cinza
       anterior é um ganho de ~32%, e não o dobro. Mas 1,60 NÃO é o motivo de esta borda funcionar: a
       fórmula do WCAG mede só claro-contra-escuro, e o que separa esta borda é COR (violeta contra
       quase-branco), que o olho enxerga e a conta não pontua. Se um dia a tentação for escurecer a borda
       para "bater 2:1", lembre que isso quebra o casamento com a `.screen-intro` — que é o objetivo
       inteiro — para melhorar um número que não é o que está fazendo o trabalho.

       O BANHO VEM DE CIMA e some em 82%: no resto do sistema a luz cai do topo. Invertido — que era o
       caso do degradê cinza, escuro em cima e pálido embaixo — o desenho vira sombra ou esqueleto de
       carregamento, e o card parece que não terminou de abrir. */
    --color-ai-wash: rgba(168, 85, 247, 0.10);
    --color-ai-line: rgba(109, 40, 217, 0.28);
    --gradient-ai-surface: linear-gradient(180deg, var(--color-ai-wash), rgba(255, 255, 255, 0) 82%);
    --color-ai-surface: #f3e8ff;
    --color-ai-surface-hover: #ead7ff;
    --color-ai-border: #d8b4fe;
    /* O cinza das ASPAS GRANDES que emolduram a fala da MAYA. Nasceu de um pedido de "cinza claro" e
       saiu cinza PUXADO PARA O VIOLETA de proposito: cinza neutro num sistema que fala roxo e fucsia
       le como sujeira de renderizacao, nao como marca d'agua. Contraste de 1,3:1 sobre o cartao
       branco — invisivel o bastante para nao competir com o texto, presente o bastante para nao
       sumir. E' decoracao: nenhuma informacao pode depender de enxergar isto. */
    --color-ai-quote: #e4daf2;
    --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);
    /* A aura do card da MAYA quando há leitura do dia. É CENTRADA (0 0), ao contrário de --shadow-ai,
       que cai 10px para baixo: sombra direcional lê como "o card está alto", e o que se quer aqui é
       "o card está aceso". Por isso as duas existem em vez de uma servir às duas funções. */
    --shadow-ai-aura: 0 0 24px 2px rgba(168, 85, 247, 0.30);

    /* 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;
    /* 40px — SO o numero grande do cartao da MAYA, no palco. Ele nasceu em 07/09/2026 porque o numero
       tinha empatado com a manchete: os dois em --text-3xl (28px), e cartao cujo dado empata com o
       titulo nao tem heroi. Antes de usar em outro lugar, pergunte se aquilo e' mesmo o topo da tela. */
    --text-4xl: 2.5rem;

    /* 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);
    /* Véu atrás do painel lateral: escurece o bastante para o painel ler como "por cima", sem apagar a lista. */
    --color-scrim: rgba(20, 27, 43, 0.28);

    --sidebar-width: 200px;
    --sidebar-collapsed: 60px;
    --rail-width: 360px;
    --topbar-height: 60px;
    /* A FAIXA DE CONTAS, acima do cabeçalho: a loja à esquerda, o login e o sair à direita. Existe para todo
       vendedor logado desde 28/09/2026 (antes só com duas lojas ou mais). Altura FIXA de propósito: tudo o
       que se prende "logo abaixo do cabeçalho" (painel do sino, chat da Maya, gavetas) soma as duas. */
    --barra-contas-height: 36px;
    --topo-do-conteudo: calc(var(--barra-contas-height) + var(--topbar-height));
    --agent-launcher-width: 88px;
    --agent-launcher-height: 80px;
    /* A PEGADA INTEIRA do lancador, avatar MAIS a plaquinha ''Conversar com a Maya''. As duas medidas
       acima descrevem so o bicho; o botao de verdade e ''width: auto'' e a plaquinha e nowrap, entao
       ele mede 248px na tela. Medido em 14/09/2026 a 1440px: com a reserva antiga de 88px, o botao
       ENVIAR da conversa (x 1235 a 1336) ficava inteiro debaixo do lancador (x 1180 a 1428) — o
       unico botao irreversivel da tela, escondido.
       QUEM MEXER NO TEXTO DA PLAQUINHA remede isto: o numero nao se ajusta sozinho. */
    --agent-launcher-faixa: 264px;
    --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);
    /* A BORDA FÚCSIA DE SUPERFÍCIE CLARA (28/09/2026): a mesma tinta da marca do "?", com nome de uso. Nasceu
       para os cartões de atalho do Dashboard, a pedido do dono, para tirar a palidez da primeira dobra.
       Continua sendo SUPERFÍCIE — nunca cor de botão ou link, que é o roxo. */
    --color-fucsia-borda: var(--color-dica-marca-borda);
    --color-fucsia-borda-forte: var(--color-dica-marca);
    --dica-largura: 260px;
    --dica-largura-ampla: 380px;

    /* ---- Cores DAS MARCAS dos marketplaces ----
       Estas não são cores nossas: são das empresas. Por isso ficam fora da paleta do produto, não têm versão
       clara/escura (a marca é a mesma nos dois temas) e não devem ser reaproveitadas para significar estado.
       Amarelo aqui quer dizer "Mercado Livre", nunca "atenção".
       Quando a Shopee entrar: --marca-shopee-fundo: #ee4d2d; --marca-shopee-tinta: #fff; e mais nada. */
    --marca-ml-fundo: #ffe600;
    --marca-ml-tinta: #2d3277;

    /* O AMARELO DE "VOCÊ ESTÁ AQUI", na faixa de lojas. Token próprio, e não o `--marca-ml-fundo` logo
       acima, embora os dois sejam amarelos: ali em cima está escrito que aquele amarelo quer dizer
       *Mercado Livre* e nunca estado. Se a faixa reaproveitasse o mesmo token, a mesma cor passaria a
       significar duas coisas e a primeira vez que alguém ajustasse o amarelo da marca mexeria, sem querer,
       no sinal de em que loja o vendedor está.

       É um tom mais quente que o da marca (#ffe600 é mais limão), o bastante para não parecer um pedaço do
       botão de conectar solto na faixa. E as duas formas são diferentes de propósito: a marca é botão
       PREENCHIDO, o "aqui" é uma BARRA. Cheio = ação; traço = lugar.

       Escolhido para o fundo `--escuro-fundo` (#0b0314): sobre ele o contraste passa de 12:1. */
    --faixa-lojas-aqui: #ffd21e;
}

/* Análise em massa dos campos da ficha — revisão primeiro, sem escrita no ML nesta fatia. */
.attr-page__top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.attr-page__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-2xl);
}

.attr-readonly {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--color-text);
    background: var(--color-ai-surface);
    border: 1px solid var(--color-ai-border);
    border-radius: var(--radius-md);
}

.attr-readonly svg { flex: 0 0 auto; }

.attr-start {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.attr-start > div { flex: 1 1 32rem; }
.attr-start h2, .attr-progress h2, .attr-table-head h2 { margin: 0 0 var(--space-1); }

.attr-progress__line,
.attr-meta,
.attr-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.attr-progress__number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.attr-progress__bar {
    height: var(--space-2);
    margin: var(--space-3) 0;
    overflow: hidden;
    background: var(--color-surface-2);
    border-radius: var(--radius-pill);
}

.attr-progress__bar > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
    transition: width 200ms ease;
}

.attr-meta {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.attr-meta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* O que a IA fez neste lote. Fica neutra; vira aviso quando sobrou anúncio sem leitura. */
.attr-ai-note {
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-radius: var(--radius-md);
}

.attr-ai-note--pending {
    color: var(--color-warning);
    background: var(--color-warning-tint-soft);
    border: 1px solid var(--color-warning-tint-border);
}

.attr-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.attr-summary__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-2);
    padding: var(--space-3);
    color: var(--color-text);
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.attr-summary__item:hover,
.attr-summary__item--active {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.attr-summary__item--active { background: var(--color-ai-surface); }
.attr-summary__item svg { grid-row: 1 / 3; color: var(--color-primary); }
.attr-summary__item strong { font-size: var(--text-xl); line-height: 1; }
.attr-summary__item span { color: var(--color-text-muted); font-size: var(--text-sm); }

.attr-table-card { padding: 0; overflow: hidden; }
.attr-table-head { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.attr-table-head > span { color: var(--color-text-muted); white-space: nowrap; }
.attr-table td { vertical-align: top; }
.attr-table td small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }
.attr-table code { font-size: var(--text-xs); }

.attr-value { color: var(--color-success); }
.attr-required {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 var(--space-1);
    color: var(--color-warning-text);
    background: var(--color-warning-soft);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.attr-evidence-row td { padding-top: 0; background: var(--color-surface-subtle); }
.attr-evidence-toggle {
    width: 100%;
    padding: var(--space-2) 0;
    color: var(--color-primary);
    text-align: left;
    font: inherit;
    font-weight: 600;
    background: transparent;
    border: 0;
    border-top: 1px dashed var(--color-border);
    cursor: pointer;
}

.attr-evidence-list { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); }
.attr-evidence {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 1.4fr);
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.attr-evidence small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }
.attr-evidence p { margin: var(--space-1) 0 0; }
.attr-source { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; }

/* Piloto visual de atributos: a foto aparece como prova, não como decoração. */
.attr-vision__start { display: grid; gap: var(--space-3); }
.attr-vision__start h2 { margin: 0 0 var(--space-1); }
.attr-vision__rules { margin: var(--space-3) 0 0; padding-left: var(--space-5); color: var(--color-text-muted); }
.attr-vision__rules li + li { margin-top: var(--space-1); }
.attr-vision__consent {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3); background: var(--color-surface-subtle);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--color-text);
}
.attr-vision__consent input { margin-top: var(--space-1); flex: 0 0 auto; }
.attr-vision__disclosure { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.attr-vision__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 38rem; }
.attr-vision__evidence { grid-template-columns: calc(var(--space-7) * 2) minmax(0, 1fr); }
.attr-vision__photo-link { display: block; width: calc(var(--space-7) * 2); height: calc(var(--space-7) * 2); }
.attr-vision__thumb {
    display: block; width: calc(var(--space-7) * 2); height: calc(var(--space-7) * 2); object-fit: cover;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.attr-vision__evidence .attr-source { display: block; margin-top: var(--space-2); }

/* Revisão humana: o produto dá contexto; cada campo conserva uma decisão local própria. */
.attr-review-notice { margin-bottom: var(--space-3); }

.attr-review-card { padding: 0; overflow: hidden; }
.attr-review-product { border-bottom: 1px solid var(--color-border); }
.attr-review-product:last-child { border-bottom: 0; }
.attr-review-product__head {
    display: grid;
    grid-template-columns: calc(var(--space-7) + var(--space-6)) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
}

.attr-review-product__thumb {
    display: grid;
    width: calc(var(--space-7) + var(--space-6));
    height: calc(var(--space-7) + var(--space-6));
    place-items: center;
    object-fit: cover;
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.attr-review-product__identity { min-width: 0; }
.attr-review-product__identity a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-review-product__identity small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }
.attr-review-product__states { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }

.attr-review-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
}

.attr-review-status--ready { color: var(--color-success); border-color: var(--color-success); }
.attr-review-status--decision { color: var(--color-warning); background: var(--color-warning-tint-soft); border-color: var(--color-warning-tint-border); }
.attr-review-status--conflict { color: var(--color-danger-emphasis); background: var(--color-danger-tint-soft); border-color: var(--color-danger-tint-border); }

.attr-review-product__fields { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }

/* Editor inteligente de atributos: uma linha por anúncio, os campos ao lado (desenho do dono, 29/09/2026).
   O anúncio é o contexto; a caixa é a decisão. Nada abre e fecha para revisar: a sanfona antiga obrigava
   um clique por anúncio antes do primeiro campo. */
.attr-rows__filters { margin-bottom: var(--space-3); }
.attr-rows__search { flex: 1 1 280px; max-width: 420px; }
.attr-rows__toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer;
}
.attr-rows { padding: 0; overflow: hidden; }
.attr-row {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.attr-row--done { padding-block: var(--space-2); background: var(--color-surface-subtle); }
.attr-row__id { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.attr-row__thumb {
    flex: 0 0 auto; width: var(--space-7); height: var(--space-7);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface-2); object-fit: cover;
}
.attr-row__thumb--empty { display: grid; place-items: center; color: var(--color-text-muted); }
.attr-row--done .attr-row__thumb { width: var(--space-6); height: var(--space-6); }
.attr-row__ident { display: grid; justify-items: start; gap: var(--space-1); min-width: 0; }
.attr-row__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--color-text); font-size: var(--text-sm); font-weight: 600; line-height: 1.35;
}
.attr-row__title:hover { color: var(--color-primary); }
.attr-row__ident small { color: var(--color-text-muted); font-size: var(--text-xs); }
.attr-row__body { display: grid; gap: var(--space-2); min-width: 0; }
.attr-row__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.attr-row__more {
    min-height: var(--space-6); padding: 0 var(--space-3);
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-primary);
    font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.attr-row__more:hover { border-color: var(--color-primary); }
.attr-row__more--blank { color: var(--color-text-muted); }
.attr-row__proof {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-ai-surface); border: 1px solid var(--color-ai-border); border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.attr-row__proof p { margin: var(--space-1) 0 0; }
.attr-row__proof-reason { color: var(--color-text-muted); }
.attr-row__summary, .attr-row__reason {
    display: flex; align-items: center; gap: var(--space-2); margin: 0;
    color: var(--color-text-muted); font-size: var(--text-sm);
}

/* A caixa do atributo: rótulo em cima, valor dentro, aprovar colado. */
.attr-cell {
    display: grid; gap: var(--space-1);
    flex: 0 1 calc(var(--space-7) * 4 + var(--space-2));
    min-width: calc(var(--space-7) * 3 + var(--space-5));
}
.attr-cell__label {
    display: flex; align-items: center; gap: var(--space-1); min-width: 0;
    color: var(--color-text-muted); font-size: var(--text-xs);
}
.attr-cell__label label { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attr-cell__req { color: var(--color-danger-emphasis); font-weight: 700; }
.attr-cell__proof {
    display: inline-grid; place-items: center; margin-left: auto; padding: 0;
    border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-primary); cursor: pointer;
}
.attr-cell__proof:focus-visible, .attr-cell__btn:focus-visible, .attr-cell__input:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: 1px;
}
.attr-cell__box {
    display: flex; align-items: center; min-height: var(--space-6); overflow: hidden;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface);
}
.attr-cell__state { display: inline-grid; place-items: center; padding: 0 var(--space-1) 0 var(--space-2); }
.attr-cell__input {
    flex: 1 1 auto; min-width: 0; height: calc(var(--space-6) - 2px); padding: 0 var(--space-1);
    border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-base);
}
.attr-cell__value {
    flex: 1 1 auto; min-width: 0; padding: 0 var(--space-1); overflow: hidden;
    font-size: var(--text-base); font-weight: 600; text-overflow: ellipsis; white-space: nowrap;
}
.attr-cell__btn {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: var(--space-6); height: calc(var(--space-6) - 2px); padding: 0;
    border: 0; border-left: 1px solid var(--color-border); background: transparent;
    color: var(--color-text-muted); cursor: pointer;
}
.attr-cell__btn:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); }
.attr-cell__btn:disabled { cursor: not-allowed; opacity: 0.45; }
.attr-cell__btn--reject:hover:not(:disabled) { color: var(--color-danger-emphasis); }
.attr-cell__btn--ok { border-left-color: var(--color-success); background: var(--color-success); color: var(--color-primary-contrast); }
.attr-cell__btn--ok:hover:not(:disabled) { background: var(--color-success); color: var(--color-primary-contrast); filter: brightness(0.92); }
.attr-cell__note {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.3;
}
/* O erro aparece inteiro: o corte em 2 linhas escondia justamente o que fazer ("use Não tem código?"). */
.attr-cell__note--error { display: block; -webkit-line-clamp: unset; color: var(--color-danger-emphasis); white-space: normal; }
/* Links discretos abaixo da caixa: "Não tem código?" (código de barras) e "Não se aplica". */
.attr-cell__extra { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.attr-cell__link {
    padding: 0; border: 0; background: none; color: var(--color-primary);
    font: inherit; font-size: var(--text-xs); text-decoration: underline; cursor: pointer;
}
.attr-cell__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Estados: fundo leve na caixa + ícone próprio. A cor nunca é o único sinal (o ícone e o texto
   escondido para leitor de tela dizem o mesmo). */
.attr-cell--ready .attr-cell__box { border-color: var(--color-success-tint-border); background: var(--color-success-tint-soft); }
.attr-cell--decision .attr-cell__box { border-color: var(--color-warning-tint-border); background: var(--color-warning-tint-soft); }
.attr-cell--conflict .attr-cell__box { border-color: var(--color-danger-tint-border); background: var(--color-danger-tint-soft); }
.attr-cell--blank .attr-cell__box { border-style: dashed; background: var(--color-surface-2); }
.attr-cell--approved .attr-cell__box { border-color: var(--color-success); }
.attr-cell--rejected .attr-cell__box { background: var(--color-surface-subtle); }
.attr-cell--rejected .attr-cell__value { color: var(--color-text-muted); font-weight: 400; font-style: italic; }
.attr-cell--ready .attr-cell__state, .attr-cell--approved .attr-cell__state, .attr-state--ready { color: var(--color-success); }
.attr-cell--decision .attr-cell__state, .attr-state--decision { color: var(--color-warning); }
.attr-cell--conflict .attr-cell__state, .attr-state--conflict { color: var(--color-danger-emphasis); }
.attr-cell--blank .attr-cell__state, .attr-cell--rejected .attr-cell__state, .attr-state--neutral { color: var(--color-text-muted); }
.status-tab .attr-state--ready, .status-tab .attr-state--decision, .status-tab .attr-state--conflict, .status-tab .attr-state--neutral {
    display: inline-grid; place-items: center;
}

/* Envio ao Mercado Livre, no fim do resumo: o único lugar da funcionalidade que escreve fora da Maya. */
.attr-send { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4); }
.attr-send__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.attr-send__head > svg { flex: 0 0 auto; color: var(--color-primary); }
.attr-send__head h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.attr-send__head p { margin: 0; color: var(--color-text-muted); }
.attr-send__start { justify-self: start; }
.attr-send__confirm {
    display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4);
    background: var(--color-primary-tint); border: 1px solid var(--color-primary-tint-border); border-radius: var(--radius-md);
}
.attr-send__confirm p { margin: 0; }
.attr-send__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.attr-send__receipt {
    display: flex; flex-wrap: wrap; gap: 0 var(--space-2); padding: var(--space-3) var(--space-4);
    background: var(--color-success-tint-soft); border: 1px solid var(--color-success-tint-border); border-radius: var(--radius-md);
}
.attr-send__message { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }

/* O rodapé acompanha a rolagem: o "quanto falta" e o resumo ficam sempre à mão. */
.attr-rows__footer { position: sticky; bottom: var(--space-2); z-index: 5; padding: var(--space-2) var(--space-4); }
/* Uma linha só: fixo embaixo, ele não pode esconder a linha em que a pessoa está trabalhando. */
.attr-review-progress.attr-rows__footer > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }

.attr-review-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.attr-review-progress > div { display: grid; gap: var(--space-1); }
.attr-review-progress span { color: var(--color-text-muted); font-size: var(--text-sm); }
.attr-review-progress__actions { justify-items: end; text-align: right; }

.attr-review-summary__counts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.attr-review-summary__count {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.attr-review-summary__count strong { font-size: var(--text-xl); }
.attr-review-summary__count span { color: var(--color-text-muted); font-size: var(--text-sm); }
.attr-review-summary__count--selected { border-color: var(--color-primary); }
.attr-review-summary__count--pending { background: var(--color-warning-tint-soft); border-color: var(--color-warning-tint-border); }
.attr-review-summary__count--rejected { background: var(--color-danger-tint-soft); border-color: var(--color-danger-tint-border); }

.attr-review-summary__empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.attr-review-summary__empty > svg { color: var(--color-primary); }
.attr-review-summary__empty h2,
.attr-review-summary__next h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.attr-review-summary__empty p,
.attr-review-summary__next p { margin: 0; color: var(--color-text-muted); }

.attr-review-summary-card { margin-top: var(--space-4); }
.attr-review-summary-list { display: grid; }
.attr-review-summary-listing { border-bottom: 1px solid var(--color-border); }
.attr-review-summary-listing:last-child { border-bottom: 0; }
.attr-review-summary-fields { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }

.attr-review-summary-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.attr-review-summary-field h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-base); }
.attr-review-summary-field__evidence { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.attr-review-summary-field__value {
    display: grid;
    justify-items: start;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.attr-review-summary-field__value > span,
.attr-review-summary-field__value small { color: var(--color-text-muted); font-size: var(--text-sm); }
.attr-review-summary-field__value strong { font-size: var(--text-lg); overflow-wrap: anywhere; }

.attr-review-summary__rejected { margin-top: var(--space-4); padding: 0; overflow: hidden; }
.attr-review-summary__rejected .attr-table-head { padding: var(--space-4); }
.attr-review-summary__rejected-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4);
    list-style: none;
    border-top: 1px solid var(--color-border);
}

.attr-review-summary__rejected-list li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-danger-tint-soft);
    border: 1px solid var(--color-danger-tint-border);
    border-radius: var(--radius-md);
}

.attr-review-summary__rejected-list span { color: var(--color-text-muted); font-size: var(--text-sm); }

.attr-review-summary__next {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    color: var(--color-text);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
}

.attr-review-summary__next > svg { color: var(--color-primary); }

@media (max-width: 900px) {
    .attr-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attr-row { grid-template-columns: 1fr; gap: var(--space-2); }
    /* No celular o rodapé fixo cobriria meia tela (e o botão da Maya): ele volta para o fim da lista. */
    .attr-rows__footer { position: static; }
    .attr-cell { flex: 1 1 calc(50% - var(--space-3)); min-width: 0; }
    .attr-review-product__head { grid-template-columns: calc(var(--space-7) + var(--space-6)) minmax(0, 1fr); }
    .attr-review-product__head > .btn { grid-column: 2; justify-self: start; }
    .attr-review-progress { align-items: flex-start; flex-direction: column; }
    .attr-review-progress__actions { justify-items: start; text-align: left; }
    .attr-review-summary__counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attr-review-summary-field { grid-template-columns: 1fr; }
    .attr-review-summary__rejected-list { grid-template-columns: 1fr; }
    .attr-evidence { grid-template-columns: 1fr; }
    .attr-vision__evidence { grid-template-columns: calc(var(--space-7) + var(--space-6)) minmax(0, 1fr); }
    .attr-vision__photo-link, .attr-vision__thumb { width: calc(var(--space-7) + var(--space-6)); height: calc(var(--space-7) + var(--space-6)); }
    .attr-meta, .attr-table-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .attr-page__top { flex-direction: column; }
    .attr-cell { flex-basis: 100%; }
    .attr-summary { grid-template-columns: 1fr; }
    .attr-review-product__head { grid-template-columns: 1fr; }
    .attr-review-product__thumb { width: calc(var(--space-7) + var(--space-6)); height: calc(var(--space-7) + var(--space-6)); }
    .attr-review-product__head > .btn { grid-column: auto; }
    .attr-review-summary__counts { grid-template-columns: 1fr; }
    .attr-review-summary__empty { grid-template-columns: 1fr; justify-items: start; }
    .attr-review-summary__next { grid-template-columns: 1fr; }
    .attr-vision__summary { grid-template-columns: 1fr; }
    .attr-vision__evidence { grid-template-columns: 1fr; }
}

/* Reset enxuto */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* TRAVA O DOCUMENTO SO' NO COCKPIT, e a condicao e' a razao inteira desta regra existir.

   O cockpit tem rolagem PROPRIA: .app-shell mede a altura da janela, .app-body clipa, e .content
   rola. Sem travar o documento, 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 (corrigido
   em 31/08/2026, encontrado olhando a tela).

   SO' QUE A TRAVA ERA CEGA — valia para toda pagina, e os dois arquivos de estilo sao carregados em
   todas elas. Quem NAO tem rolagem propria ficava preso na primeira dobra, sem erro nenhum, sem
   nada no log: a pagina publica (corrigida em 03/09), os documentos legais e a tela de aceite
   (.doc-shell), as telas de conta, e a area administrativa em janela estreita — onde ela justamente
   abre mao da rolagem interna e passa a depender do documento.

   A regra foi INVERTIDA: em vez de travar tudo e liberar caso a caso, o padrao e' rolar, e a trava
   vale onde existe o esqueleto do cockpit. Layout novo que nasca sem rolagem propria funciona por
   omissao, em vez de nascer quebrado esperando alguem descobrir. */
html:has(.app-shell),
body:has(.app-shell) { 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; }
/* Desconta a faixa de contas de cima. Sem isto a página media 100vh + a faixa, e como o body não rola
   (overflow: hidden, acima), o pé do conteúdo ficava cortado para quem tinha duas lojas. */
.app-shell { position: relative; display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); height: calc(100vh - var(--barra-contas-height)); }
/* 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 {
    /* `relative` por causa da linha de progresso do "Atualizar loja", presa ao pé do cabeçalho. */
    position: relative;
    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(--topo-do-conteudo) + 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(--topo-do-conteudo) 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;
    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);
    /* Violeta bem translúcido (pedido do dono, 26/09/2026): o balão flutua por cima do conteúdo e deixa ver o que
       está atrás. O desfoque é o que mantém o texto legível sobre qualquer fundo; sem ele, cai para sólido. */
    border: 1px solid var(--color-primary-tint-border);
    border-radius: var(--radius-pill);
    background: var(--color-primary-tint);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-hover);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-tight);
    white-space: nowrap;
}
/* A sombra fica no pet, e não no botão inteiro: um `filter` no botão faria dele a "raiz" do desfoque, e o
   backdrop-filter do balão não enxergaria a página por trás (o texto de trás aparecia nítido no print de 26/09). */
.agent-pet-video {
    filter: drop-shadow(0 var(--space-2) var(--space-3) rgba(91, 33, 182, 0.20));
    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 var(--color-ai-line);
    border-radius: var(--radius-xl);
    background: var(--gradient-ai-surface), 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); }

/* ---------- Botão de MARCA: conectar um marketplace ----------

   A COR É O CONTEÚDO, e esta é a única família de botões do sistema em que isso vale. Em todo o resto o
   amarelo significaria "atenção" e o laranja, "alerta" — aqui eles significam *Mercado Livre* e *Shopee*.
   Decisão do dono (21/09/2026), e o argumento dele é o que sustenta a regra: quando houver vários
   marketplaces, a fileira de botões vira um sistema que o vendedor lê sem ler, cada um na cor da sua marca.
   O amarelo também carrega o recado de que este cockpit é especialista em Mercado Livre.

   POR QUE ISSO NÃO QUEBRA O GUARDRAIL DE "UMA AÇÃO PRIMÁRIA POR CONTEXTO" (UI_GUARDRAILS §8). Ele continua
   valendo: quem é primária no dashboard é "Atualizar loja", que é roxa, maior, em negrito e com sombra de
   contato. Este aqui tem a MESMA ALTURA (pedido do dono, para a linha não ficar serrilhada) mas peso menor:
   corpo normal, sem sombra, sem negrito. Alto o bastante para ser encontrado por quem tem uma loja só;
   discreto o bastante para não disputar o clique do dia a dia.

   CADA MARCA SÓ DECLARA DUAS COISAS — fundo e tinta. É por isso que a Shopee vai caber sem CSS novo além de
   um bloco de duas linhas. */
.btn--marca {
    background: var(--marca-fundo);
    color: var(--marca-tinta);
    border-color: transparent;
    font-weight: 500;
}
/* Escurecer o FUNDO da marca seria inventar um tom que a marca não tem. A sombra some e o botão afunda 1px:
   a resposta ao toque vem do movimento, não de uma cor falsa. */
.btn--marca:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
.btn--marca:active:not(:disabled) { transform: translateY(1px); }

.btn--ml { --marca-fundo: var(--marca-ml-fundo); --marca-tinta: var(--marca-ml-tinta); }

/* O desenho acompanha a altura do texto, como um ícone — e não uma imagem colada dentro do botão. */
.btn--marca .logo-ml { height: 1.25em; width: auto; flex: 0 0 auto; }

/* ---------- O emblema do Mercado Livre ----------

   O OVAL HERDA O FUNDO DE ONDE ESTÁ. Dentro do botão amarelo ele vira o próprio botão, e o que sobra à vista
   é o contorno azul e as mãos brancas — que é exatamente como o Mercado Livre desenha o ícone do app dele.
   Se o oval mantivesse o amarelo do arquivo original (#f7d032, mais fechado que o da marca hoje), ele
   apareceria como um remendo de tom errado em cima do botão. Fora de um botão de marca, o fallback devolve
   o amarelo do Mercado Livre e o emblema fica completo. */
.logo-ml { display: block; }
.logo-ml__oval  { fill: var(--marca-fundo, var(--marca-ml-fundo)); }
.logo-ml__tinta { fill: var(--marca-ml-tinta); }
.logo-ml__maos  { fill: #fff; }

/* ---------- 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); }

/* A celula com o apelido da loja, nas tabelas em modo Geral. Apelido de conta de teste e uma palavra
   unica de 27 caracteres: sem a quebra forcada ela empurra a largura da tabela inteira. */
.celula-loja { max-width: 14ch; overflow-wrap: anywhere; color: var(--color-text-muted); }

/* Os botoes de loja da caixa de escolha (LoadErrorState). Envolvem porque o vendedor pode ter seis
   contas e o apelido de uma delas pode ser uma palavra longa: em linha unica a sexta sairia da tela. */
.escolha-loja__botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* O PLACAR da caixa de escolha: uma linha por loja com o numero que aquela tela mede. Nao e a mesma
   peca dos botoes acima - aqui o vendedor COMPARA antes de escolher, entao o numero precisa de peso
   visual e as linhas precisam de largura igual para os numeros ficarem alinhados. */
.escolha-loja__placar {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
    text-align: left;
}
.escolha-loja__linha {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
}
.escolha-loja__linha:hover { border-color: var(--color-primary); background: var(--color-surface-subtle); }
/* min-width: 0 porque apelido de conta de teste e uma palavra unica de 27 caracteres: em celula de
   grid o minimo automatico e a palavra inteira, e ela empurra o numero para fora da linha. */
.escolha-loja__nome { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.escolha-loja__numero { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.escolha-loja__rotulo { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- 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); }
button.chip { font-family: inherit; line-height: inherit; }
button.chip:disabled { cursor: default; opacity: 0.6; }

/* Valores mais usados no Mercado Livre embaixo de um campo de texto livre da ficha (FichaEditor). */
.ficha-sugestoes {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
    margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted);
}

/* 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); }
/* Botão do frete grátis: embaixo do valor, discreto — a coluna é estreita e a ação é ocasional. */
.frete-gratis-botao { display: block; margin: var(--space-1) 0 0 auto; white-space: nowrap; }

.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(--topo-do-conteudo) 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); }

/* Configurações > Avisos da Maya. O exemplo imita o balão do sistema para a pessoa ver o que vai aparecer. */
.avisos-card { padding: var(--space-5); max-width: 860px; margin-bottom: var(--space-4); }
.avisos-topo { display: flex; gap: var(--space-5); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--space-4); }
.avisos-topo > div:first-child { flex: 1 1 280px; }
.avisos-titulo { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.avisos-exemplo {
    flex: 0 1 320px; display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface-subtle); box-shadow: var(--shadow-md); font-size: var(--text-sm);
}
.avisos-exemplo img { border-radius: var(--radius-sm); flex: 0 0 auto; }
.avisos-exemplo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avisos-exemplo__produto { color: var(--color-text-muted); font-size: var(--text-xs); }
.avisos-situacao { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-3); }
.avisos-passos { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.avisos-escolhas { border: 0; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.avisos-escolhas legend { width: 100%; padding: 0; margin-bottom: var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.avisos-escolhas label, .avisos-linha { display: inline-flex; gap: var(--space-2); align-items: center; cursor: pointer; }
.avisos-linha { margin-bottom: var(--space-3); }
.avisos-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.avisos-rodape { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* 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. */
/* Os cartões da Central tinham cada um a altura do próprio texto (align-items: start), e o resultado era
   uma parede irregular: o olho lia o tamanho do cartão como se fosse a gravidade do problema, quando o que
   mudava era só o comprimento da frase. Agora todos têm a mesma caixa, e quem varia é só o número.
   O cartão ABERTO é a exceção — ele vira uma fila de trabalho e cresce à vontade. */
/* auto-FILL, não auto-fit. Com `auto-fit` as colunas vazias somem e o ÚNICO cartão de uma faixa se
   estica pela largura toda — foi o que aconteceu com "Fotos insuficientes", sozinho na faixa de conserto,
   virando uma faixa horizontal gigante com um parágrafo perdido no meio. Com `auto-fill` as colunas
   continuam existindo e o cartão solitário mantém o tamanho dos outros. */
.qual-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); align-items: stretch; }
/* `.card + .card` empilha cartões soltos com 16px de respiro. Dentro deste grid, que já separa por `gap`,
   essa margem sobrava — e pior: comia 16px da altura de todo cartão menos o primeiro, que era exatamente
   por que um deles ficava diferente dos outros onze. */
.qual-cards > .qual-card + .qual-card { margin-top: 0; }
/* A altura mínima cobre o cartão mais alto (título de duas linhas + quatro de texto + barra + duas linhas
   de botão). Existe porque o grid só iguala DENTRO de cada linha: sem um piso comum, a segunda linha de
   cartões ficava 8px mais baixa que a primeira e a parede voltava a ficar irregular. */
/* COMPACTADO EM 07/09/2026. O cartão tinha 300px fixos para um conteúdo de pouco mais de 200: 81px
   reservados para quatro linhas de texto (mesmo em cartão de três), 62px reservados para botões (mesmo com
   um só) e 46px de puro espaçamento. Com 9 cartões numa faixa, isso custava quase mil pixels — e a tela
   inteira dava CINCO dobras num monitor de 1366x768.

   O alinhamento entre cartões vizinhos, que era a razão das reservas, passou a vir do rodapé grudado
   embaixo (.qual-card__rodape): as colunas da grade já têm a mesma altura, então barra e botões se alinham
   sozinhos e o texto ocupa o que precisa. Cartão de texto longo cresce e os vizinhos acompanham — que é o
   contrário do desenho antigo, onde todos pagavam pelo mais longo mesmo sem ter o quê dizer. */
.qual-card { display: flex; flex-direction: column; min-height: 200px; padding: var(--space-3); }
.qual-card__rodape { margin-top: auto; }
/* Altura igual não se consegue com uma altura mágica no cartão inteiro — ela quebra quando muda a fonte,
   o zoom ou a largura da coluna. Consegue-se reservando um número FIXO DE LINHAS para cada parte: título,
   explicação e botões. Assim o cartão tem sempre a mesma caixa, e ela acompanha o tamanho do texto do
   usuário em vez de brigar com ele. */
.qual-card .card__title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    /* A reserva de duas linhas saiu em 07/09/2026: ela existia para alinhar o que vinha depois, e isso
       agora vem do rodapé colado embaixo. Título de uma linha custava 21px de vazio em todo cartão. */
}
.qual-card .qual-card__why {
    display: -webkit-box; /* Três linhas, não quatro: a quarta quase sempre era o fim de uma frase que o title= já entrega
       inteira no mouse, e custava 19px em cada cartão da tela. */
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    /* Sem reserva: quem alinha agora é o rodapé. O corte em 4 linhas continua (-webkit-line-clamp), para
       um texto comprido não empurrar a coluna inteira — e o title= entrega a frase completa no mouse. */
}
/* Os botões variam entre um e dois por cartão, e "Buscar avaliação do Mercado Livre" quebra em duas
   linhas. Reservar a altura de duas mantém a régua reta sem apertar quem tem só um botão. */
/* De 4,4em para 2em: a reserva existia para o cartão com botão + link extra ficar da mesma altura do que
   só tem botão. Com o rodapé colado embaixo isso deixou de ser necessário — quem tem link extra cresce, e
   os vizinhos acompanham pela grade. */
.qual-card__actions { min-height: 2em; align-content: flex-end; }
/* Os botões descem para o rodapé de todo cartão: alinhados, viram uma régua de ação em vez de flutuarem
   em alturas diferentes conforme o tamanho do texto de cima. */
/* Redundante desde 07/09/2026 (quem cola o bloco embaixo agora é .qual-card__rodape), mas mantido: o
   cartão ABERTO tem um layout próprio, e ali as ações continuam dependendo disto para ficar no fim. */
.qual-card__actions { margin-top: auto; }
/* Cartão aberto ocupa a largura toda: a lista de anúncios dentro dele não cabe numa coluna. */
.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-1); margin-bottom: var(--space-2); line-height: 1.4; }
.qual-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); }
/* O aviso de "ainda não conserta aqui" é discreto mas está sempre à vista — esconder seria mentir. */
/* O segundo número da ficha: texto, não botão. Botão daria a ele o mesmo peso do conserto urgente. */
.qual-card__extra { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: underline; }
.qual-card__extra:hover { color: var(--color-primary); }
.qual-card__soon { font-size: var(--text-xs); color: var(--color-text-muted); }
/* ---- Fila de trabalho de uma pendência (/qualidade/fila/{chave}) -------------------------------------
   Substitui o cartão que inchava: fila estreita e rolável à esquerda, editor largo à direita. Uma coluna
   no celular e com o chat aberto, duas quando há largura — o mesmo ponto de corte do Dashboard. */
.fila-topo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.fila-topo__title { font-size: var(--text-2xl); margin: 0; }
.fila-topo__count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.fila-progresso { margin-bottom: var(--space-4); max-width: 420px; }

.fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
/* Duas colunas por padrão a partir de 1100px, e volta a uma quando o painel da Maya está ABERTO — ele
   come a largura que o editor precisa. O Dashboard pende de `data-rail="closed"`, mas esse atributo só
   existe depois que alguém mexe no painel; numa primeira visita ele não está lá, e a tela de trabalho
   ficaria numa coluna só sem motivo. Aqui a regra é ao contrário: duas colunas é o padrão. */
@media (min-width: 1100px) {
    .fila { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
    html[data-rail="open"] .fila { grid-template-columns: minmax(0, 1fr); }
}
.fila__lista { position: sticky; top: var(--space-4); display: flex; flex-direction: column; overflow: hidden; }
.fila__lista-head {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-header); color: var(--color-surface-header-text);
    border-bottom: 1px solid var(--color-surface-header-border); font-weight: 600;
}
.fila__itens { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.fila__item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
    padding: var(--space-2) var(--space-3); border: 0; background: none; cursor: pointer;
    border-left: 3px solid transparent; border-bottom: 1px solid var(--color-border);
}
.fila__item:hover { background: var(--color-surface-2); }
/* O anúncio aberto precisa ser óbvio: sem isto o vendedor perde o lugar ao rolar a fila. */
.fila__item--atual { background: var(--color-surface-2); border-left-color: var(--color-primary); }
.fila__item--feito .fila__titulo { color: var(--color-text-muted); }
.fila__item--feito .lucide { color: var(--color-success); flex: 0 0 auto; }
.fila__thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; }
.fila__thumb--vazio { background: var(--color-surface-2); display: block; }
.fila__texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fila__titulo { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__motivo {
    font-size: var(--text-xs); color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila__editor-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
    margin-bottom: var(--space-4);
}
/* A navegação fica no rodapé do editor, não no topo: o vendedor só decide "próximo" depois de trabalhar. */
.fila__nav {
    display: flex; justify-content: space-between; gap: var(--space-3);
    margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border);
}

/* ---- Faixas da Central de qualidade ----------------------------------------------------------------
   Emprestadas do vocabulário do Dashboard (.dash-band / .dash-panel__head): faixa com cabeçalho, ícone e
   contagem. A Central era uma grade de doze retângulos brancos iguais, e nela o vendedor não distinguia
   "isto eu resolvo aqui" de "isto o ML quer me vender" — nem sabia se o silêncio era aprovação.
   As quatro faixas são a história em ordem: conserte / resolva lá / já está certo / ninguém olhou. */
.qual-faixa { margin-top: var(--space-5); }
.qual-faixa__head {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
}
.qual-faixa__head .lucide { color: var(--color-surface-header-icon); }
.qual-faixa__title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.qual-faixa__count {
    font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--color-surface-2); color: var(--color-text-muted);
    border-radius: var(--radius-pill); padding: 0 var(--space-2);
}
/* A descrição ocupa a linha inteira embaixo, alinhada com o título e não com o ícone. */
.qual-faixa__desc {
    grid-column: 2 / -1; margin: 0;
    font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45;
}
.qual-faixa__nota {
    margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5;
}
/* A faixa do que se conserta aqui é a única com fundo: é onde o trabalho rende, e o olho vai nela
   primeiro. As outras ficam transparentes para não competir. */
.qual-faixa--acao {
    background: var(--color-surface-2); border-radius: var(--radius-lg);
    padding: var(--space-4); margin-top: var(--space-4);
}
.qual-faixa--acao .qual-faixa__count { background: var(--color-surface); }

/* Barra de progresso do cartão. Infográfico é o número virando forma — não ilustração: ela só existe
   quando há denominador real (o que o ML conferiu), e some quando não há o que comparar. */
.qual-barra {
    height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-2);
    /* var(--space-2) em vez de --space-3: o rodapé já se separa do texto por estar colado embaixo. */
    overflow: hidden; margin-top: var(--space-2);
}
.qual-barra__ok { display: block; height: 100%; background: var(--color-success); border-radius: inherit; }
.qual-barra__leg { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.qual-barra__leg strong { color: var(--color-success); }

/* "Já está certo": linha por ponto, com o número à direita. Não é cartão — é lista de conquista, e
   cartão daria a ela o mesmo peso do que ainda falta fazer. */
.qual-ok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); }
.qual-ok {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.qual-ok .lucide { color: var(--color-success); flex: 0 0 auto; }
.qual-ok__nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qual-ok__num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }

/* O ponto cego. Sem cor de alerta de propósito: não é problema do vendedor, é limite do Mercado Livre. */
.qual-cego-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.qual-cego {
    background: var(--color-surface); border: 1px dashed var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3);
}
.qual-cego__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.qual-cego__nome { font-weight: 600; }
.qual-cego__num { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.qual-cego .btn { margin-top: var(--space-3); }
/* A oferta de conferência própria: é ação, então ganha borda de destaque — mas fica DENTRO da faixa do
   ponto cego, porque é a saída dele, não uma seção nova. */
.qual-oferta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-top: var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-primary);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.qual-oferta > div { flex: 1 1 320px; }
.qual-oferta .qual-cego__pq { margin-top: var(--space-1); }
.qual-cego__pq { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; }
.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. */
/* A vaga vazia: mesma caixa da foto, tracejada. Mostra quantas faltam para o mínimo do ML em vez de só
   dizer o número numa frase — e dá corpo ao editor de um anúncio que só tem uma foto. */
.foto-vaga {
    /* Mesmas medidas do .foto-item logo abaixo: a vaga tem de ocupar exatamente o lugar da foto que falta. */
    width: 84px; height: 84px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 2px dashed var(--color-border); border-radius: var(--radius-md);
    color: var(--color-text-muted); background: var(--color-surface-2);
}
.foto-vaga__n { font-weight: 700; font-size: var(--text-lg); }
.foto-vaga__txt { font-size: var(--text-xs); text-transform: lowercase; }
.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; }

/* =========================================================================
   O PAINEL — o layout do Dashboard (rota /dashboard2)

   As classes daqui nasceram com prefixo `d2-` (de "dashboard 2"), enquanto isto era
   um experimento que se apagaria inteiro se fosse descartado. Renomeadas em
   14/09/2026, quando o nome passou a mentir: a Central de qualidade adotou a zona
   escura, e uma etiqueta que diz "isto é do dashboard" convida a apagar o que outra
   tela usa — e CSS que some não dá erro, só deixa de pintar.

   A REGRA QUE FICOU, e ela é o que impede a mentira de voltar:
     .painel-*     é DESTA tela. Ninguém de fora pode usar.
     .faixa-pagina e os tokens --escuro-* são do SISTEMA. Qualquer tela usa, e por
                   isso não se apagam junto com o painel.

   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. */
    --escuro-fundo: #0b0314;
    /* O topo do degrade da zona escura. Estava escrito na mao dentro de .faixa-pagina--escura, e a
       fila de conversas precisa da MESMA luz caindo do canto — duas receitas para o mesmo escuro
       divergem na primeira vez que alguem ajusta uma delas. */
    --escuro-fundo-topo: #1d0d33;
    /* A BARRA DE CIMA E A DE ESCREVER. É um apelido de --escuro-fundo-topo, e o apelido existe para
       travar as duas coisas juntas: a barra do anúncio precisa continuar a barra dos filtros da fila,
       sem emenda visível, como no WhatsApp. Se um dia o degradê da fila mudar, a barra acompanha
       sozinha — que é exatamente o que se quer. */
    --escuro-barra: var(--escuro-fundo-topo);

    /* AS MARCAS DAS CONTAS. Cada loja conectada ganha uma cor, e ela se repete em todo lugar onde a
       conta aparece: a aba no topo, a linha da fila e o "Respondendo como" em cima do campo. É a
       defesa contra responder pela loja errada — erro público e sem volta.

       ESTAS CORES SÃO IDENTIDADE, NUNCA STATUS. Por isso não reaproveitam --escuro-ok-*,
       --escuro-alerta-* nem --escuro-perigo-*: se a marca de uma loja fosse verde e a de outra
       vermelha, o vendedor leria "esta conta está bem, aquela está com problema" — e a cor estaria
       falando de identidade. Ao escolher uma sexta, siga a regra: matiz que não exista na paleta
       semântica, e clareza suficiente para aparecer num ponto de 8px sobre fundo escuro. */
    --conta-marca-1: #c084fc;
    --conta-marca-2: #67e8f9;
    --conta-marca-3: #f0abfc;
    --conta-marca-4: #93c5fd;
    --conta-marca-5: #fda4af;
    --escuro-painel: #2e1847;
    --escuro-chip: #3d2260;
    --escuro-linha: rgba(196, 181, 253, 0.16);
    --escuro-linha-forte: rgba(196, 181, 253, 0.28);
    /* O SVG externo não consegue ler variáveis CSS. Este valor é a fonte de verdade do traço
       decorativo, e o comentário dentro do arquivo obriga os dois lados a mudarem juntos. */
    --escuro-marca-dagua: rgba(196, 181, 253, 0.055);
    /* O ensaio de 320px denunciou a grade e o de 640px abriu vazios demais. Em 512px os objetos
       continuam pequenos e irregulares, mas recuperam a densidade da referência sem formar fileiras. */
    --escuro-marca-dagua-ladrilho: 512px;
    /* A segunda cópia dobra a densidade sem dobrar o arquivo. Os deslocamentos diferentes impedem
       que os mesmos objetos caiam em linhas ou colunas reconhecíveis. */
    --escuro-marca-dagua-deslocamento-x: 173px;
    --escuro-marca-dagua-deslocamento-y: 137px;
    --escuro-texto: #ede7f6;
    --escuro-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. */
    --escuro-ok-de: #059669;
    --escuro-ok-ate: #34d399;
    --escuro-alerta-de: #d97706;
    --escuro-alerta-ate: #fbbf24;
    --escuro-perigo-de: #be123c;
    --escuro-perigo-ate: #fb7185;
    --escuro-roxo-de: #7c3aed;
    --escuro-roxo-ate: #c084fc;
    --escuro-neutro-de: #4c3a6b;
    --escuro-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). */
.faixa-pagina { padding: var(--space-5) 0; }
.faixa-pagina--clara { background: transparent; }

/* ---------- O PALCO DA MAYA ----------
   O CARD DELA VIROU FAIXA em 07/09/2026, e o motivo e' medivel, nao de gosto: com QUATRO areas
   (Dinheiro, Atendimento, Estoque e Qualidade) dentro de uma caixa que ocupava 5/8 da linha e se
   repartia em colunas de no minimo 230px, cabiam tres e a quarta caia sozinha numa segunda fileira,
   com dois tercos de branco ao lado. Nao era aperto: era um grid que nao fechava. Aumentar a fonte
   pioraria — com letra maior cabem duas por fileira, e sobram duas orfas em vez de uma. Largura
   inteira deixou de ser preferencia e virou requisito.

   POR QUE FUNDO ESCURO. Os cartoes da leitura sao brancos. Sobre a pagina (--color-bg #faf8fd) branco
   sobre branco nao recorta e — o que pesa mais — SOMBRA NAO APARECE. A profundidade do carrossel vive
   de sombra; sem palco escuro o baralho ficaria chapado e o efeito de "tem mais vindo" nao existiria.

   POR QUE FUCSIA E NAO ROXO. O roxo ja esta ocupado pelo Radar logo abaixo, e dois blocos escuros
   colados leem como um bloco so. O fucsia esta a 56 graus de matiz dele — a medicao inteira esta no
   :root mais abaixo, junto com os contrastes conferidos no pior ponto do gradiente.

   O TEXTO CONTINUA EM BRANCO. A regra escrita no topo do Dashboard2.razor ("a faixa clara e' onde se
   le texto") vale pelo fundo SOB A LETRA, e a leitura dela mora dentro de cartao branco. O palco
   escuro fica embaixo dos cartoes, nao embaixo das frases. */
.faixa-pagina--palco {
    background: var(--gradient-stage);
    border-radius: var(--radius-xl);
    /* EM CIMA E EMBAIXO O MESMO 16px (11/09/2026). Era 8px, e o cartao ficava colado no teto do palco
       enquanto embaixo sobravam 64px de fucsia — nao por generosidade, mas porque tres coisas se
       empilhavam la: o leque descendo 32px, as bolinhas e uma frase de rodape. A correcao NAO foi
       somar no topo (isso empurraria o Radar para fora da primeira dobra, que e' o oposto do pedido):
       foi tirar altura de baixo. O leque desce 8px em vez de 16, as bolinhas foram para dentro do pe
       do cartao e a frase virou a legenda embaixo do retrato dela. */
    /* EMBAIXO E' 32 E EM CIMA E' 16, e isso E' a simetria, nao a quebra dela: `transform` nao ocupa
       espaco no layout, entao o leque que desce 16px passa POR CIMA do respiro de baixo. Com 32,
       sobram os mesmos 16px de fucsia debaixo do ultimo cartao que existem acima do primeiro.
       Com 16px nos dois, o cartao de tras encostava exatamente na beirada do palco. */
    padding: var(--space-4) var(--space-5) var(--space-6);
    margin-top: var(--space-2);
    color: var(--color-stage-text);
    box-shadow: inset 0 1px 0 var(--color-stage-line);
    overflow: hidden;
}
/* ---------- O DASHBOARD GERAL (todas as lojas) — 30/09/2026 ----------
   Contrato: docs/design/DASHBOARD_GERAL_UX.md. Substituiu o placar (`.loja-card`), que só somava filas.
   Os MATERIAIS são os do Dashboard da loja (`.faixa-pagina--escura`, `.painel-caixa`, tokens `--escuro-*`);
   a ANATOMIA é outra: o centro aqui é a comparação entre lojas, uma linha por loja com a mesma grade.

   AS CORES DOS GRÁFICOS foram medidas no validador de paleta (daltonismo e visão normal) sobre
   `--escuro-painel`. As marcas das lojas (`--conta-marca-*`) NÃO passam nesse teste lado a lado — por isso
   aqui elas nunca pintam barra: só a bolinha ao lado do nome escrito. */
:root {
    --grafico-ml-comissao: #8b5cf6;
    --grafico-ml-frete: #db2777;
    --grafico-ml-sobra: #0e9fb5;
    /* O mês de agora em fúcsia; o anterior no neutro, tracejado. O cinza do anterior é de propósito: ele é a
       régua, não o assunto — e o traço tracejado garante a diferença mesmo sem enxergar cor. */
    --grafico-mes-atual: #d946ef;
}

.geral-topo {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5);
    flex-wrap: wrap; margin: var(--space-2) 0 var(--space-4);
}
.geral-topo__texto { min-width: 0; }
.geral-topo__titulo { margin: 0; font-size: var(--text-2xl); font-weight: 700; }
.geral-topo__frescor {
    margin: var(--space-1) 0 0; display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-text-muted);
}
.geral-ponto { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: 0 0 auto; }
.geral-ponto--ok { background: var(--color-success); }
.geral-ponto--alerta { background: var(--color-warning); }
/* As abas de status do sistema, sem a margem de baixo: aqui elas são o seletor do período, ao lado do título. */
.geral-periodo { margin-bottom: 0; }
.geral-periodo .status-tab:disabled { cursor: progress; }

.geral-escura { display: flex; flex-direction: column; gap: var(--space-4); }
.geral-esqueleto { min-height: 280px; justify-content: center; align-items: center; color: var(--escuro-apagado); font-size: var(--text-sm); }
.geral-esqueleto--baixo { min-height: 220px; }

.geral-apagado { color: var(--escuro-apagado); font-weight: 400; }
.geral-alerta { color: var(--escuro-alerta-ate); }
.geral-perigo { color: var(--escuro-perigo-ate); }
.geral-negativo { color: var(--escuro-perigo-ate); }

/* ---- Resultado ---- */
.geral-resultado__corpo { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 820px) {
    .geral-resultado__corpo { grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); }
}
.geral-resultado__numeros { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.geral-heroi { display: flex; flex-direction: column; gap: var(--space-1); }
.geral-heroi__rotulo {
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--escuro-apagado);
}
.geral-heroi__valor {
    font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--escuro-texto);
}
.geral-heroi__comparacao { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--escuro-apagado); }
.geral-heroi__vazio { margin: 0; font-size: var(--text-lg); color: var(--escuro-apagado); }

.geral-variacao {
    display: inline-flex; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    background: var(--escuro-chip);
}
.geral-variacao--sobe { color: var(--escuro-ok-ate); }
.geral-variacao--desce { color: var(--escuro-perigo-ate); }
.geral-variacao--igual { color: var(--escuro-apagado); }

.geral-numeros { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.geral-numero {
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--escuro-chip); border: 1px solid var(--escuro-linha); min-width: 0;
}
.geral-numero dt { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--escuro-apagado); }
.geral-numero dd { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.geral-numero dd b { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--escuro-texto); }
.geral-numero dd small { font-size: var(--text-xs); color: var(--escuro-apagado); }
.geral-numero dd.geral-numero__bloqueado { align-items: center; color: var(--escuro-apagado); font-size: var(--text-xs); }

.geral-hoje {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
    padding-top: var(--space-3); border-top: 1px solid var(--escuro-linha); font-size: var(--text-sm);
}
.geral-hoje__rotulo { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--escuro-apagado); }
.geral-hoje__valor b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.geral-hoje__ontem { color: var(--escuro-apagado); font-size: var(--text-xs); }

/* A curva: acumulado dia a dia. Grade e eixos recuam; as duas linhas são o assunto. */
.geral-curva { min-width: 0; }
.geral-curva__leitura {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4);
    font-size: var(--text-sm); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); min-height: 22px;
}
.geral-curva__leitura small { color: var(--escuro-apagado); font-size: var(--text-xs); }
.geral-curva__dia { color: var(--escuro-apagado); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.geral-curva__traco { display: inline-block; width: 16px; height: 0; margin-right: var(--space-1); vertical-align: middle; border-top: 2px solid var(--grafico-mes-atual); }
.geral-curva__traco--anterior { border-top: 2px dashed var(--escuro-neutro-ate); }
.geral-curva__svg { display: block; width: 100%; height: auto; overflow: visible; }
.geral-curva__grade { stroke: var(--escuro-linha); stroke-width: 1; }
.geral-curva__eixo { fill: var(--escuro-apagado); font-size: 11px; font-variant-numeric: tabular-nums; }
.geral-curva__linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.geral-curva__linha--atual { stroke: var(--grafico-mes-atual); }
.geral-curva__linha--anterior { stroke: var(--escuro-neutro-ate); stroke-dasharray: 5 4; }
.geral-curva__area { fill: var(--grafico-mes-atual); opacity: .12; }
.geral-curva__foco { stroke: var(--escuro-linha-forte); stroke-width: 1; }
.geral-curva__ponto { fill: var(--grafico-mes-atual); stroke: var(--escuro-painel); stroke-width: 2; }
.geral-curva__alvo { fill: transparent; }
/* O desenho encolhe com a caixa (viewBox de 560): numa caixa de ~300px a letra de 11px viraria 6px. Em caixa
   estreita o eixo dobra de tamanho no desenho para continuar com ~11px na tela. */
@container (max-width: 520px) {
    .geral-curva__eixo { font-size: 20px; }
}

/* ---- Resultado + Últimas vendas, lado a lado (07/10/2026) ----
   Pedido do cliente: a curva ficou menor, embaixo dos números (o espaço que sobrava ali), e a coluna da direita
   é das vendas. As duas caixas esticam até a mesma altura; a lista tem 8 linhas para caber nela sem rolar. */
.geral-abertura { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1180px) { .geral-abertura { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.geral-vendas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.geral-venda {
    display: grid; align-items: center; gap: var(--space-3);
    grid-template-columns: 40px minmax(0, 1fr) minmax(88px, auto) minmax(84px, auto);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md); background: var(--escuro-chip); border: 1px solid var(--escuro-linha);
    cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease;
}
.geral-venda:hover { background: var(--escuro-painel); border-color: var(--escuro-linha-forte); }
.geral-venda__foto {
    width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover;
    /* A foto do anúncio vem com fundo branco: no escuro ela precisa de moldura clara, senão vira um buraco. */
    background: var(--color-surface);
}
.geral-venda__foto--vazia { display: flex; align-items: center; justify-content: center; background: var(--escuro-painel); color: var(--escuro-apagado); }
.geral-venda__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geral-venda__titulo {
    font-size: var(--text-sm); font-weight: 600; color: var(--escuro-texto); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.geral-venda:hover .geral-venda__titulo, .geral-venda__titulo:focus-visible { text-decoration: underline; }
.geral-venda__pe { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: var(--text-xs); color: var(--escuro-apagado); }
.geral-venda__pe > span + span::before { content: "·"; margin-right: var(--space-2); }
.geral-venda__loja { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.geral-venda__loja .geral-marca { width: 8px; height: 8px; margin-top: 0; }
.geral-venda__valor, .geral-venda__resultado { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.geral-venda__valor b { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--escuro-texto); }
.geral-venda__valor small, .geral-venda__resultado small { font-size: var(--text-xs); color: var(--escuro-apagado); font-variant-numeric: tabular-nums; }
.geral-venda__resultado small.geral-negativo { color: var(--escuro-perigo-ate); }
/* A margem é o assunto da linha: pílula com a cor do tom E o número escrito — a cor nunca é o único recado. */
.geral-venda__margem {
    padding: 0 var(--space-2); border-radius: var(--radius-pill); border: 1px solid currentColor;
    font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--escuro-painel);
}
.geral-venda__margem--boa { color: var(--escuro-ok-ate); }
.geral-venda__margem--apertada { color: var(--escuro-alerta-ate); }
.geral-venda__margem--prejuizo { color: var(--escuro-perigo-ate); }
.geral-venda__falta { font-size: var(--text-xs); color: var(--escuro-apagado); text-decoration: underline dotted; }
.geral-venda__falta:hover { color: var(--escuro-texto); }
@container (max-width: 460px) {
    /* Caixa estreita (celular): em uma linha só, o nome do produto ficava com ~100px. O nome ganha a largura
       toda (até duas linhas) e valor + margem descem para uma segunda linha, lado a lado. */
    .geral-venda {
        grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; row-gap: var(--space-1);
        grid-template-areas: "foto texto texto" "foto valor resultado";
    }
    .geral-venda__foto { grid-area: foto; }
    .geral-venda__texto { grid-area: texto; }
    .geral-venda__valor { grid-area: valor; flex-direction: row; align-items: baseline; gap: var(--space-1); }
    .geral-venda__resultado { grid-area: resultado; flex-direction: row; align-items: center; gap: var(--space-2); }
    .geral-venda__titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    /* Com a linha em dois andares, oito vendas passam de uma tela inteira de celular: ficam as cinco mais novas. */
    .geral-venda:nth-child(n + 6) { display: none; }
}

/* ---- Lojas lado a lado ----
   Tabela com pele de card (herdado do placar): a MESMA grade em todas as linhas, para os números caírem
   nas mesmas posições e o olho descer a coluna. */
.geral-ordem { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--escuro-apagado); }
.geral-tabela { display: flex; flex-direction: column; gap: var(--space-2); }
.geral-linha {
    display: grid; align-items: center; gap: var(--space-3);
    grid-template-columns: minmax(200px, 2.2fr) minmax(90px, 1fr) minmax(150px, 1.6fr) minmax(80px, .9fr) minmax(110px, 1.2fr) minmax(150px, 1.7fr) 20px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); background: var(--escuro-chip);
    border: 1px solid var(--escuro-linha); border-left: 3px solid transparent;
    cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease;
}
.geral-linha:hover { background: var(--escuro-painel); border-color: var(--escuro-linha-forte); }
.geral-linha--perigo { border-left-color: var(--escuro-perigo-ate); }
.geral-linha--alerta { border-left-color: var(--escuro-alerta-ate); }
.geral-linha--fila { border-left-color: var(--escuro-roxo-ate); }
.geral-linha--cabeca {
    background: none; border: none; padding-top: 0; padding-bottom: 0; cursor: default;
    font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--escuro-apagado);
}
.geral-linha--cabeca:hover { background: none; }

.geral-celula { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-sm); }
.geral-celula b { font-size: var(--text-base); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--escuro-texto); }
.geral-celula small { font-size: var(--text-xs); color: var(--escuro-apagado); }
.geral-celula__linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.geral-celula--loja { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.geral-celula--sem-vendas { grid-column: span 3; color: var(--escuro-apagado); }
.geral-marca {
    flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: var(--radius-pill);
    background: var(--cor-da-loja, var(--escuro-roxo-ate));
}
.geral-loja { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geral-loja__nome {
    font-weight: 700; color: var(--escuro-texto); text-decoration: none;
    min-width: 0; overflow-wrap: anywhere; /* apelido de conta de teste é uma palavra de 27 letras */
}
.geral-linha:hover .geral-loja__nome, .geral-loja__nome:focus-visible { text-decoration: underline; }
.geral-loja__pe { font-size: var(--text-xs); color: var(--escuro-apagado); }
.geral-sinal {
    align-self: flex-start; margin-top: 2px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 600; background: var(--escuro-painel); border: 1px solid currentColor;
}
.geral-sinal--perigo { color: var(--escuro-perigo-ate); }
.geral-sinal--alerta { color: var(--escuro-alerta-ate); }

.geral-mini { width: 96px; height: 24px; }
.geral-mini polyline { fill: none; stroke: var(--grafico-mes-atual); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.geral-parte { display: flex; align-items: center; gap: var(--space-2); }
.geral-parte__barra { flex: 1 1 auto; height: 6px; border-radius: var(--radius-pill); background: var(--escuro-painel); overflow: hidden; }
.geral-parte__barra span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--escuro-roxo-ate); }

.geral-filas { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); }
.geral-filas b { font-size: var(--text-sm); }
.geral-filas__grave b { color: var(--escuro-perigo-ate); }
.geral-em-dia { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--escuro-ok-ate); font-weight: 600; }
.geral-seta { color: var(--escuro-apagado); opacity: .5; display: flex; }
.geral-linha:hover .geral-seta { opacity: 1; }

/* ---- Barras 100% por loja (dinheiro e saúde) ---- */
.geral-grade { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .geral-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.geral-legenda { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--escuro-apagado); }
.geral-legenda li { display: inline-flex; align-items: center; gap: var(--space-1); }
.geral-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.geral-barras { display: flex; flex-direction: column; gap: var(--space-3); }
.geral-barra { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(0, 3fr) minmax(84px, auto); align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.geral-barra--total { padding-bottom: var(--space-3); border-bottom: 1px solid var(--escuro-linha); font-weight: 700; }
.geral-barra__nome { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
.geral-barra__nome .geral-marca { margin-top: 0; }
/* 2px de fundo entre os pedaços: sem o respiro, dois tons vizinhos se fundem. */
.geral-barra__trilho { display: flex; gap: 2px; height: 18px; border-radius: var(--radius-sm); overflow: hidden; background: var(--escuro-painel); }
.geral-barra__parte {
    display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
    font-size: 11px; font-weight: 700; color: var(--escuro-texto); font-variant-numeric: tabular-nums;
}
.geral-barra__fim { text-align: right; font-size: var(--text-xs); color: var(--escuro-apagado); white-space: nowrap; }
.geral-barra__fim b { font-size: var(--text-sm); color: var(--escuro-texto); }
.geral-barra__fim--link { text-decoration: none; }
.geral-barra__fim--link:hover { text-decoration: underline; color: var(--escuro-texto); }
.geral-barra__indisponivel { grid-column: span 2; font-size: var(--text-xs); color: var(--escuro-apagado); }

/* ---- Tela estreita e celular: cada loja vira um bloco, os campos na mesma ordem, rótulo em cima. ---- */
@media (max-width: 1100px) {
    .geral-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .geral-linha--cabeca { display: none; }
    .geral-celula--loja { grid-column: 1 / -1; }
    .geral-celula--sem-vendas { grid-column: 1 / -1; }
    .geral-celula[data-rotulo]::before {
        content: attr(data-rotulo); font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em;
        text-transform: uppercase; color: var(--escuro-apagado);
    }
    .geral-seta { display: none; }
}
@media (max-width: 640px) {
    .geral-numeros { grid-template-columns: minmax(0, 1fr); }
    .geral-barra { grid-template-columns: minmax(0, 1fr) auto; }
    .geral-barra__trilho { grid-column: 1 / -1; grid-row: 2; }
    .geral-periodo { width: 100%; }
}

.faixa-pagina--escura {
    background: radial-gradient(120% 140% at 15% 0%, var(--escuro-fundo-topo) 0%, var(--escuro-fundo) 62%);
    color: var(--escuro-texto);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-top: var(--space-4);
    box-shadow: inset 0 1px 0 var(--escuro-linha);
}

/* 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.

   ERA UMA COLUNA, virou CARTÃO em 07/09/2026. Sem fundo próprio, ele dependia do card branco da MAYA
   em volta para existir; agora que as leituras se revezam sobre o palco escuro, quem dá o recorte é a
   própria superfície branca. A barra de cor sobreviveu à mudança porque continua fazendo o trabalho
   dela: dizer de que área é aquela leitura sem gastar uma palavra.
   Ela subiu de 3px para 4px — sobre um cartão de ~900px, 3px sumia. */
/* UMA COLUNA SO, desde 11/09/2026. Eram duas — texto e retrato — e a segunda reservava 160px de
   largura pela ALTURA INTEIRA do cartao para uma imagem de 160px centralizada: ~140px de branco
   parado em cima e outro tanto embaixo, que o texto nunca podia alcancar porque a coluna nao era
   dele. O retrato virou `.painel-lead__assinatura`, ancorado no canto de cima; a coluna inteira voltou
   para o texto. */
.painel-lead {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* A ALTURA DEIXOU DE SER TRAVADA em 11/09/2026, e isto conserta um defeito que so aparecia em
       conta cheia. Eram 300px fixos, escolhidos quando a fala dela tinha 18px numa linha de 105
       caracteres. Com 22px e linha de 76, a mesma conclusao ocupa mais altura: numa conta em que a
       MAYA de fato falou (manchete + texto), 300px CORTARIAM o texto — sem aviso, porque o corpo do
       cartao tem `overflow: hidden`.
       TRAVAR MAIS ALTO SERIA PIOR: nesta conta, em que ela ainda nao leu e o cartao tem uma linha, os
       300px ja eram 150px de branco parado, e o palco empurrava o Radar para fora da primeira dobra.
       SO `min-height` RESOLVE OS DOIS, e sem efeito colateral: os cartoes dividem a MESMA celula do
       grid (`grid-area: 1/1` + `align-self: stretch`), entao a celula ja nasce com a altura do mais
       alto e os quatro continuam do mesmo tamanho. O palco nao pula ao virar a pagina — ele so fica
       do tamanho do que ha para ler. O teto continua existindo: o aparo de 5 linhas. */
    /* O DOBRO DA ALTURA (11/09/2026, por pedido do dono): de 192px para 384px de piso.
       O MOTIVO NAO E' ESTETICO, e' de conteudo: vem um comportamento novo da MAYA que escreve bem
       mais do que ela escreve hoje, e o cartao esta sendo preparado para caber isso.
       ISSO TEM UM PRECO, e fica registrado para quem comparar depois: a arrumacao anterior tinha
       encolhido o palco de 372px para 247px justamente para trazer o Radar para a primeira dobra. O
       piso de 384px devolve essa altura e mais um pouco. Foi decisao consciente do dono: espaco para
       a fala dela vale mais do que ver mais do Radar sem rolar.
       Continua sendo PISO, e nao altura travada — texto maior faz o cartao crescer; texto curto nao
       faz ele encolher abaixo disto, para que o palco nao mude de tamanho a cada dia. */
    /* 28/09/2026: o piso caiu de 384px para 240px junto com o fim do palco. O carrossel virou uma faixa
       baixa, para os atalhos e o Radar subirem; texto que passar do aparo continua no "Ver mais". */
    min-height: calc(var(--space-7) * 5);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    border-left: var(--space-1) solid var(--color-border-strong);
    /* Embaixo menos que em cima e nos lados, por pedido do dono (11/09/2026, noite). O ultimo elemento
       do cartao e' sempre o pe — botao cheio e link —, e forma fechada ja se separa da borda sozinha.
       O texto, que e' quem de fato precisa de margem para nao encostar, nunca chega ali. */
    padding: var(--space-6) var(--space-6) var(--space-4);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}
/* DUAS COLUNAS (11/09/2026): a fala dela na esquerda, as provas na direita.
   O CARTAO E' LARGO DEMAIS PARA UMA COLUNA SO, e isso e' aritmetica, nao gosto: em tela grande ele
   passa de 1500px, e texto de 22px correndo essa largura da ~100 caracteres por linha — o olho perde
   o comeco da linha seguinte. Limitar a linha em ~76 caracteres e' obrigatorio; a consequencia era um
   vazio de 600px embaixo do retrato, que foi exatamente o que o dono viu numa conta cheia.
   A saida nao e' esticar o texto e sim DAR OUTRO CONTEUDO AO ESPACO — ver `.painel-lead__provas`.
   A COLUNA DA DIREITA NAO E' `1fr`: ela tem teto (24rem). Sem teto, numa tela de 2000px ela viraria
   uma faixa de 800px de letra miuda, mais larga que a citacao ao lado. Com `space-between`, a sobra
   escorre para o VAO entre as duas, que e' onde sobra nao incomoda ninguem. */
/* DEIXOU DE SER GRADE DE DUAS COLUNAS em 11/09/2026 (noite), e o motivo e' de conteudo.
   GRADE NAO DEIXA TEXTO PASSAR POR BAIXO DE NADA: uma coluna de grade e' um corredor de largura fixa
   do topo a base, entao os ~200px de altura abaixo do retrato ficavam vazios para sempre enquanto a
   fala dela se espremia em 692px. O pedido do dono foi "o texto prossegue ate a imagem e, quando nao
   estiver em linha com ela, prossegue embaixo" — que e' flutuante, nao grade.
   Coluna flex simples: a leitura ocupa o que sobra, o pe fica colado na base. */
.painel-lead__corpo {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}
/* BLOCO, e nao mais coluna flex — e isto e' condicao, nao preferencia: flutuante dentro de contexto
   FLEX e' ignorado pelo navegador (a imagem voltaria para o fluxo e empurraria o texto para baixo).
   E' ELE QUEM APARA O TEXTO AGORA, e o aparo mudou de tecnica junto:
   `-webkit-line-clamp` conta linhas, mas o `-webkit-box` que ele exige tambem nao contorna flutuante
   — MEDIDO: 678px em todas as linhas, mesmo abaixo do retrato. Aparo por ALTURA num bloco normal
   contorna, desde que o flutuante esteja DENTRO dele (por isso o aside mudou de lugar no markup).
   O QUE SE PERDE: as reticencias automaticas do line-clamp. Quem avisa que ha mais passa a ser o
   esmaecido no rodape do bloco (mask-image) mais o botao "Ver mais", que ja existia. */
.painel-lead__principal {
    flex: 1 1 auto;
    display: block;
    min-width: 0; min-height: 0;
    /* ~8 linhas de fala (33px cada) mais o rotulo da area e a manchete. Numero conferido no navegador,
       nao estimado — ver o comentario de `.painel-lead__leitura`. */
    /* 28/09/2026: de 25rem para 15rem (~4 linhas de fala), com o carrossel mais baixo. */
    max-height: 15rem;
    overflow: hidden;
    /* O ESMAECIDO NO RODAPE SAIU em 28/09/2026. Ele existia para o texto longo cortado ao meio ler como
       "continua"; com o gancho, o banner fechado e' curto e termina no convite ("Clica em Solucoes da
       Maya..."), que o esmaecido apagava justamente. O texto longo que ainda aparece fechado e' aparado
       por linha (`.painel-lead__leitura--aparada`), com reticencias. */
}
/* Aberto, o aparo sai inteiro: altura livre, sem esmaecido, e quem rola e' o corpo do cartao. */
.painel-lead--aberta .painel-lead__principal {
    max-height: none;
    overflow: visible;
    mask-image: none;
}
/* `clear: both` E' O QUE SEGURA O PE ABAIXO DO RETRATO. Sem ele, um cartao de texto curto deixaria o
   flutuante mais alto que o texto, e o botao subiria para o lado da imagem. */
.painel-lead__pe { clear: both; }
/* O RETRATO DELA COM LEGENDA, no canto de cima.
   ABSOLUTO, e nao flutuando com `float`: `.painel-lead__corpo` e' uma coluna flex, e flutuante dentro de
   contexto flex e' simplesmente IGNORADO pelo navegador — a imagem voltaria para o fluxo e empurraria
   o texto. Tirar o corpo do flex custaria o `margin-top:auto` que gruda o pe na base do cartao.
   O TEXTO NAO PRECISA DESVIAR DELA porque a coluna de leitura e' limitada a ~46rem (ver
   `.painel-lead__fala`): sobram uns 200px de folga antes de chegar no retrato, mesmo no texto mais longo.
   Os dois pedidos se encaixam — o rosto sai do meio do caminho e a linha para de ficar comprida
   demais, sem que um custe o outro. */
/* ENCOSTADA NO CANTO (11/09/2026): 8px de respiro em vez de 32. Ela estava alinhada com o texto,
   como se fosse mais um bloco da coluna; encostada, ela passa a ser o canto do cartao — e os 24px que
   sobraram de cada lado voltaram para onde o pedido mandou, que e' a fala dela. */
/* NO FLUXO, e nao mais `position: absolute`. Ancorado, ele flutuava por cima da coluna da direita e
   eu teria que reservar a altura dele na mao para as provas nao passarem por baixo — numero que
   quebra no dia em que o retrato mudar de tamanho. Como primeiro item da coluna, ele empurra o resto
   sozinho e cai no mesmo canto de antes. */
.painel-lead__assinatura {
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}
/* A legenda de foto. Diz QUEM falou e QUANDO, colada na cara de quem falou — que e' onde a pergunta
   "isto e' de agora ou de semana passada?" nasce. Antes isso era um cinza de 12px no canto OPOSTO ao
   rosto, mais uma frase repetindo o mesmo no rodape do palco, a 340px dali. */
.painel-lead__origem {
    font-size: var(--text-xs);
    line-height: 1.3;
    color: var(--color-text-muted);
}
/* 112px, e nao mais 160px. No meio do cartao o tamanho era o que garantia presenca; no canto, com
   nome embaixo, presenca vem do conjunto — e 160px ali viraria um bloco de 210px de altura roubando
   o topo do cartao de volta. */
.painel-lead__maya {
    width: calc(var(--space-7) * 2 + var(--space-4));
    height: calc(var(--space-7) * 2 + var(--space-4));
    border-radius: var(--radius-pill);
    object-fit: cover;
    object-position: top center;
    background: var(--color-ai-surface);
    border: var(--space-1) solid var(--color-ai-border);
    box-shadow: var(--shadow-ai);
}
.painel-lead--perigo { border-left-color: var(--color-danger); }
.painel-lead--alerta { border-left-color: var(--color-warning); }
.painel-lead--neutro { border-left-color: var(--color-primary); }

.painel-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);
}
.painel-lead__area .lucide { flex: 0 0 auto; }
.painel-lead--perigo .painel-lead__area .lucide { color: var(--color-danger); }
.painel-lead--alerta .painel-lead__area .lucide { color: var(--color-warning); }
.painel-lead--neutro .painel-lead__area .lucide { color: var(--color-primary); }

/* =========================================================================
   O NÚMERO DE 40px FOI EMBORA (11/09/2026, por pedido do dono) — e o percurso vale ficar registrado,
   porque a decisão passou por um meio-termo que NÃO era a resposta.

   Ele era "o herói da faixa: é ele que substitui o parágrafo" — verdade enquanto o cartão era estreito
   e a fala dela tinha 18px. Deixou de ser quando a fala virou o produto.
   PRIMEIRO ELE SÓ PERDEU O VERMELHO. Era `--color-danger-emphasis` (#c63232, tijolo) enquanto o MESMO
   R$41,20 aparecia 30cm abaixo, no Radar, em #fb7185 (rosa): dois vermelhos para o mesmo número na
   mesma tela, e a linha de contadores do topo, que também é número grande, já era tinta preta.
   DEPOIS SAIU INTEIRO, e o motivo é melhor que o da cor: 40px de algarismo ao lado de um texto em
   primeira pessoa fazem o cartão ler como PAINEL DE INDICADOR, não como alguém falando — e o cartão
   da MAYA vive de parecer alguém falando. Some a isso que ele comia ~46px de altura de um bloco que
   tinha acabado de ganhar fonte maior.
   O DADO NÃO SUMIU DA TELA: os mesmos números estão na linha de contadores em cima e no Radar embaixo.
   Nos cartões do sistema ele virou o começo da própria frase ("R$41,20 já perdidos em 1 anúncio que
   vendeu"), que era o que ele já dizia — em duas peças em vez de uma.
   ========================================================================= */

/* QUEM DIZ QUE A LEITURA É DE PREJUÍZO, agora que o número saiu: a barra de 4px na lateral do cartão
   e o ícone da área, os dois em `--color-danger` (ver `.painel-lead--perigo`). Um sinal por significado. */
.painel-lead__frase { font-size: var(--text-sm); color: var(--color-text-muted); }

/* O BOTÃO DAS SOLUÇÕES — a ação principal do cartão.
   Era um LINK DE TEXTO com o nome da tela ("Ver prioritários →"): dizia para onde se ia, não o que se
   ganha indo, e ficava do mesmo peso visual que o "Ver mais" do lado oposto. O cartão diagnostica; o
   botão leva ao tratamento, e isso merece a forma de botão.
   A SUPERFÍCIE VEM DO DESIGN SYSTEM (`.btn .btn--primary`), e não daqui: aqui só entra o que é
   específico deste lugar. Roxo, e nunca fúcsia — fúcsia neste sistema é cor de SUPERFÍCIE, jamais de
   ação; quem diz "isto é clicável" é `--color-primary`, na tela inteira. */
.painel-lead__solucoes {
    flex: 0 0 auto;
    text-decoration: none;
    padding-right: var(--space-3);
}
.painel-lead__solucoes .lucide { margin-left: calc(var(--space-1) * -1); }

/* ---------- Faixa 3: os painéis de resumo ----------
   O cabeçalho "Radar da loja" (selo, título e subtítulo) saiu em 28/09/2026; a grade ficou. */

.painel-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"] .painel-radar__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.painel-caixa {
    background: var(--escuro-painel);
    border: 1px solid var(--escuro-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;
}
.painel-caixa__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.painel-caixa__titulo {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--escuro-texto);
}
.painel-caixa__titulo .lucide { color: var(--escuro-roxo-ate); flex: 0 0 auto; }
.painel-caixa__identificacao { min-width: 0; }
/* A legenda do eixo do painel: de QUE anuncios ele esta falando. Miuda e cinza de proposito — quem
   olha o painel quer o numero; quem desconfia do numero procura a populacao, e ela esta logo ali. */
.painel-caixa__escopo {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--escuro-apagado);
}
.painel-caixa__link { font-size: var(--text-sm); color: var(--escuro-roxo-ate); text-decoration: none; }
.painel-caixa__link:hover { text-decoration: underline; }

.painel-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.painel-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(--escuro-chip); border: 1px solid var(--escuro-linha);
    font-size: var(--text-xs); color: var(--escuro-apagado);
}
.painel-chip b { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--escuro-texto); }
/* Chip que é link (28/09/2026): abre a tela já recortada. Acende no hover como os itens da zona escura. */
a.painel-chip { text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
a.painel-chip:hover { background: var(--escuro-painel); border-color: var(--escuro-linha-forte); text-decoration: none; }
a.painel-chip:focus-visible { outline: 2px solid var(--escuro-roxo-ate); outline-offset: 2px; }
.painel-chip--perigo b { color: var(--escuro-perigo-ate); }
.painel-chip--alerta b { color: var(--escuro-alerta-ate); }

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

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

/* Uma ficha por loja na tela de Integrações. A linha divisória só aparece ENTRE as fichas: no caso de uma
   loja só — que é a maioria — a tela fica exatamente como era, sem ganhar um traço que não separa nada. */
.conta-ml + .conta-ml {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.conta-ml__nome { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 600; }

/* ---------- O botão que atualiza a loja, no CABEÇALHO (desde 28/09/2026) ----------
   Morava no topo do Dashboard como a ação primária da tela; subiu para o cabeçalho, em todas as telas, a
   pedido do dono. Ele empurra o sino e o nome para a direita (margin-left: auto) — ação primeiro, consulta
   depois. Em desenvolvimento quem empurra é o crachá do ambiente, que vem antes; aí ele só acompanha. */
.atualiza { flex: 0 0 auto; margin-left: auto; }
.topnav__env ~ .atualiza { margin-left: 0; }

/* Dois andares dentro da altura do cabeçalho: o verbo em cima, o carimbo embaixo. O carimbo é o que diz
   se vale a pena clicar — ele não pode morar num `title` que ninguém lê. */
.atualiza__botao {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-md);
    background: var(--color-sidebar-active); color: var(--color-sidebar-text-active);
    font-family: inherit; cursor: pointer; text-align: left;
}
.atualiza__botao:hover:not(:disabled) { background: var(--color-primary-hover); }
.atualiza__botao:disabled { opacity: 0.7; cursor: progress; }
.atualiza__botao .lucide { flex: 0 0 auto; }
.atualiza__texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.atualiza__texto strong { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.atualiza__legenda {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: 11px; color: var(--color-sidebar-text); white-space: nowrap;
}

/* Rodando, o botão deixa de ser roxo cheio: ele não é mais um convite, é um aviso. */
.atualiza--rodando .atualiza__botao { background: transparent; }
.atualiza--rodando .atualiza__botao:hover { background: rgba(255, 255, 255, 0.06); }

.atualiza__ponto { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: 0 0 auto; }
/* Os tons da zona escura, e não os do tema claro: o âmbar claro (#845e0b) some sobre o roxo do cabeçalho. */
.atualiza__ponto--ok { background: var(--escuro-ok-ate); }
.atualiza__ponto--alerta { background: var(--escuro-alerta-ate); }
.atualiza__ponto--neutro { background: var(--escuro-apagado); }

/* O pulso é o ÚNICO movimento do botão, e ele informa: há trabalho acontecendo agora, que é justamente o
   que não dá para provar pelo número quando o total ainda não existe (UI_GUARDRAILS §20). */
.atualiza__pulso {
    width: 9px; height: 9px; flex: 0 0 auto;
    border-radius: var(--radius-pill); background: var(--escuro-ok-ate);
    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); }
}

/* A LINHA FINA no pé do cabeçalho, na largura dele inteira. Presa ao .topnav (que é o `position: relative`
   mais próximo), e não ao botão — por isso o .atualiza não é posicionado. */
.atualiza__linha {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255, 255, 255, 0.08);
}
.atualiza__linha-cheia {
    display: block; height: 100%;
    background: var(--escuro-ok-ate);
    transition: width 400ms ease;
}

/* ---------- O detalhe, para quem clicar ---------- */
.atualiza__fundo { position: fixed; inset: 0; z-index: 199; }
/* Preso ao pé do cabeçalho, na direita, como o painel do sino. */
.atualiza__painel, .atualiza__recado {
    position: absolute; top: calc(100% + var(--space-1)); right: var(--space-4); z-index: 200;
    width: 380px; 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);
}
.atualiza__painel { padding: var(--space-4); display: grid; gap: var(--space-4); }
.atualiza__aviso { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.atualiza__loja-nome { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 700; }
.atualiza__cabeca {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2);
}
.atualiza__estagio { font-size: var(--text-sm); }
.atualiza__contador {
    font-size: var(--text-sm); font-variant-numeric: tabular-nums;
    color: var(--color-primary); font-weight: 700;
}

.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);
}

/* Recusa ou falha do pedido: fica à vista até o vendedor fechar. */
.atualiza__recado {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm); color: var(--color-warning);
}
.atualiza__recado > span { flex: 1 1 auto; }
.atualiza__recado-fechar {
    flex: 0 0 auto; display: inline-flex; padding: 2px;
    border: none; background: none; cursor: pointer; color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}
.atualiza__recado-fechar:hover { background: var(--color-surface-2); }

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

/* Quando o menu vira hambúrguer, o cabeçalho aperta: fica só o ícone (ou o pulso). O carimbo some junto, e
   a frase inteira continua na dica do botão. */
@media (max-width: 1320px) {
    .atualiza__texto { display: none; }
    .atualiza__botao { width: 34px; height: 34px; padding: 0; justify-content: center; }
}

/* A grade `.painel-topo` (MAYA e alterações lado a lado, 5fr/3fr) foi APAGADA em 07/09/2026. Era ela que
   dava à MAYA só 5/8 da linha — a causa do card não fechar com quatro áreas. Agora a leitura dela tem
   faixa própria de largura inteira (.faixa-pagina--palco) e as alterações desceram para depois do Radar. */

/* ---------- A leitura da MAYA, sem palco (28/09/2026) ----------
   DE PONTA A PONTA, colada no cabeçalho, como o banner da página inicial do Mercado Livre (pedido do dono).
   A margem negativa desfaz o respiro do `.content` só aqui: o resto da tela continua com a margem de sempre.
   Banner de borda a borda não flutua — sem canto redondo e sem sombra; uma linha fina embaixo separa. */
.painel-leitura {
    margin: calc(var(--space-4) * -1) calc(var(--space-3) * -1) 0;
}
.painel-leitura .painel-carrossel { gap: 0; }
.painel-leitura .painel-lead {
    border-radius: 0;
    border-top: 0; border-right: 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    /* Espaço dos lados para as setas, que passam a morar DENTRO do banner. */
    padding-inline: calc(var(--space-7) + var(--space-4));
}
.painel-leitura .painel-carrossel__seta {
    position: absolute; top: 50%; z-index: 25;
    transform: translateY(-50%);
}
.painel-leitura .painel-carrossel__seta:first-child { left: var(--space-4); }
.painel-leitura .painel-carrossel__seta:not(:first-child) { right: var(--space-4); }
@media (max-width: 720px) {
    .painel-leitura .painel-lead { padding-inline: var(--space-4); }
}

/* ---------- A FILEIRA DE ATALHOS (28/09/2026) ----------
   Seis cartões lado a lado, como a fileira da página inicial do Mercado Livre. Nível 1 de elevação (card
   padrão): eles são atalho, não painel de decisão — quem decide é a tela para onde levam.
   O CARTÃO INTEIRO É O LINK. Hover levanta a borda para o roxo de ação, que é quem diz "clicável" no
   sistema inteiro. */
.atalhos {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-3);
    padding-top: var(--space-4);
}
.atalho {
    display: flex; flex-direction: column; gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    /* FÚCSIA, a pedido do dono (28/09/2026): a borda cinza deixava a primeira dobra pálida. */
    border: 1px solid var(--color-fucsia-borda);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--color-text); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.atalho:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.atalho:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.atalho__topo { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.atalho__icone {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-pill);
    background: var(--color-primary-tint); color: var(--color-primary);
}
.atalho__nome { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atalho__numero {
    font-size: var(--text-2xl); font-weight: 700; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
/* "Em dia" / "Não conferido" no lugar do número: mesma linha, corpo menor — é um estado, não uma medida. */
.atalho__numero--texto {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-lg);
}
.atalho__contexto { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }

/* FILA COM GENTE ESPERANDO: âmbar no ícone e no número. Âmbar e não vermelho — pergunta esperando é
   trabalho a fazer, não prejuízo confirmado. Com todos os cartões em fúcsia, o destaque dele é a borda MAIS
   FORTE (um anel por fora, sem mudar a largura do cartão) — senão ele se perderia entre os outros. */
.atalho--pede { border-color: var(--color-fucsia-borda-forte); box-shadow: 0 0 0 1px var(--color-fucsia-borda-forte), var(--shadow-sm); }
.atalho--pede:hover { box-shadow: 0 0 0 1px var(--color-fucsia-borda-forte), var(--shadow-md); }
.atalho--pede .atalho__icone { background: var(--color-warning-tint); color: var(--color-warning); }
.atalho--pede .atalho__numero { color: var(--color-warning); }
.atalho--ok .atalho__numero { color: var(--color-success); }
.atalho--incerto .atalho__numero { color: var(--color-text-muted); }

/* A fileira inteira falhou: um aviso de uma linha no lugar dela, sem derrubar o resto da tela. */
.atalhos-falha { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-warning); }

/* Sete cartões (o 7º, Infrações, desde 02/10/2026). Numa linha só a partir de ~1280px; abaixo disso 4 + 3, e no
   celular 2 por linha com o último ocupando a linha inteira — um cartão sozinho num canto parecia esquecido. */
@media (max-width: 1280px) {
    .atalhos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atalhos > .atalho:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

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

/* O CARD DELA SE SEPARA DOS OUTROS PELA BORDA E PELA LUZ DO TOPO, não por um fundo próprio.
   Esta é a MESMA superfície da caixa dela nas outras telas (`.screen-intro`) — ver a nota longa em
   --color-ai-wash, que conta por que o degradê cinza anterior foi aposentado e traz as medições.

   POR QUE A CONSISTÊNCIA É O PROTAGONISMO, e não o contrário: a versão de antes tentava destacar o card
   dando a ele uma cor que nenhuma outra caixa tinha. O efeito foi o oposto — numa página de branco, roxo
   e fúcsia, a única superfície CINZA não vira a mais importante, vira a mais apagada. O destaque aqui vem
   da borda violeta (1,60:1 contra a página, contra 1,21:1 da borda cinza que havia — e leia a ressalva
   sobre esse número em --color-ai-wash antes de mexer nele), do banho de luz no topo, do avatar grande
   e — quando existe leitura de hoje — do anel que gira. Tudo isso é vocabulário que o sistema já fala;
   o cinza não era.

   O CANTO SOBE PARA --radius-xl (18px), que é o da `.screen-intro`. Card comum é 14px: os 18 separam
   "caixa da MAYA" de "mais um card" sem precisar de cor para isso.

   A ELEVAÇÃO É NÍVEL 2, e a vaga estava aberta. O DESIGN_SYSTEM define nível 2 como "painel principal
   de decisão" (`--shadow-panel`), e o único ocupante era `.dash-panel.card--raised` — do dashboard
   antigo, apagado em 02/09. A regra ficou de pé sem ninguém dentro. Este card é o painel principal de
   decisão desta tela, então ele herda a vaga em vez de inventar uma sombra nova.
   A borda continua VIOLETA e não `--color-border-strong` como a tabela do nível 2 pede: aqui a borda
   também é identidade, e trocá-la por cinza forte devolveria o card à massa. */
/* A SUPERFÍCIE SAIU DAQUI em 07/09/2026 e foi para `.faixa-pagina--palco`. O que era um card branco
   elevado no meio da página virou a faixa inteira; `.painel-maya` ficou sendo só o arranjo interno
   (cabeçalho, abas, carrossel). O nível 2 de elevação não se perdeu — mudou de dono: quem carrega
   `--shadow-panel` agora é cada cartão de leitura (`.painel-lead`), que é o que de fato está por cima. */
.painel-maya { position: relative; }

/* 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;
}

/* AR É HIERARQUIA. O card vizinho respira 16px; este respira 32. Espaço é o sinal de importância mais
   barato e o mais difícil de estragar: não disputa com número, não inventa cor, não precisa de legenda.
   Era 24px, e a distância de 8px para o vizinho não chegava a ser lida como diferença.
   O CUSTO FOI MEDIDO, não estimado: em 1366px as três colunas passam de 240px para 235px. A intuição
   dizia 16px cada (metade dos 32 a mais), e estava errada — o card vive numa coluna flexível do grid,
   então a perda se dilui. Nenhuma linha passou a quebrar por causa disso. */
/* O respiro que este comentário defende continua existindo — mudou de lugar junto com a superfície:
   é o `padding` de `.faixa-pagina--palco`. Aqui não sobrou nada para preencher. */

/* 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`. */
/* O ANEL MUDOU DE PEÇA, NÃO DE SENTIDO (07/09/2026). Ele circulava a borda do card branco; o card
   virou faixa escura, e anel de luz na borda de uma faixa que atravessa a tela inteira não lê como
   "aceso" — lê como moldura. Passou a circular o CARTÃO DA FRENTE do carrossel, que é onde o texto
   dela está. O dado que ele carrega é o mesmo: só gira quando existe leitura de hoje. */
.painel-maya--viva .painel-lead--frente::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.

   ERA UMA FAIXA CHAPADA DE 4px (`0 0 0 4px --color-ai-surface`), e sobre o fundo cinza antigo ela
   funcionava. Sobre o card branco e elevado passou a ler como ANEL DE SELEÇÃO — a mesma forma que o
   navegador desenha em campo focado. Virou brilho: espalhado, sem segunda borda dura, lê como card
   ACESO e não como card clicado. */
/* SÓ A AURA, e não mais `border-color`. A regra antiga pintava as quatro bordas do card branco; aqui
   ela alcançaria `border-left`, que no cartão é a BARRA DA ÁREA (vermelho em Dinheiro, âmbar em
   Qualidade). Com especificidade 0,2,0 ela ganharia de `.painel-lead--perigo` e o cartão da frente — o
   único que se lê — perderia justamente a cor que diz de que área ele é. */
.painel-maya--viva .painel-lead--frente {
    box-shadow: var(--shadow-panel), var(--shadow-ai-aura);
}

@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) {
    .painel-maya--viva .painel-lead--frente::before { animation: none; --maya-giro: 45deg; }
}
/* ---------- O CARROSSEL EM BARALHO ----------
   SEM BIBLIOTECA, E NÃO É ECONOMIA DE BYTES. Esta tela é `@rendermode InteractiveServer`: quem manda
   no DOM é o Blazor, do servidor. Carrossel de biblioteca (Swiper e parentes) trabalha CLONANDO e
   reordenando os próprios slides — e quando o Blazor redesenha o trecho (clicar em "Ver mais", a
   barra de atualização terminar e chamar LoadAsync) os dois discordam sobre o que está na tela, com
   slide duplicado ou carrossel morto. Aqui quem está na frente é uma variável C# (`_ativo`), e o CSS
   só desenha a posição: não há um segundo dono do DOM.

   COMO A PROFUNDIDADE É FEITA. Cada cartão recebe do C# duas contas prontas: `--pos` (quantas casas
   está do da frente, COM SINAL, para o deslocamento) e `--prof` (a mesma distância em módulo, para
   tamanho, opacidade e empilhamento). São duas e não uma porque `abs()` em CSS ainda não é universal,
   e a conta é trivial do lado do servidor.
   `clamp(0, 1.6 - prof, 1)` faz o vizinho aparecer a 60% e o segundo vizinho sumir por completo: o
   recado é "tem mais vindo", não "veja quatro cartões meio apagados".

   POR QUE GRID E NÃO POSITION:ABSOLUTE — isto é o pulo do gato. Os cartões ocupam TODOS a mesma
   célula (`grid-area: 1 / 1`), então o palco tem a altura do cartão mais alto e os quatro ficam da
   mesma altura (`align-self: stretch`). Com posicionamento absoluto seria preciso chutar uma altura
   fixa, e texto da MAYA não tem altura fixa. Transform não afeta layout, então o deslocamento é de
   graça. */
.painel-carrossel {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    overflow: visible;
}
/* O TETO, para quando a gaveta abre. Sem altura travada (ver `.painel-lead`), clicar em "Ver mais" faz o
   cartao crescer — que e' o certo, porque quem clicou pediu para ver mais. Mas um texto de apoio fora
   da curva poderia esticar o palco pela tela inteira; a partir daqui quem rola e' o corpo do cartao
   (`.painel-lead--aberta .painel-lead__corpo` ja tem `overflow-y: auto`), e nao a pagina. */
.painel-carrossel__palco {
    flex: 1 1 auto; min-width: 0; display: grid;
    max-height: calc(var(--space-7) * 14);
}
.painel-carrossel__palco > .painel-lead {
    grid-area: 1 / 1;
    align-self: stretch;
    /* UM DE CADA VEZ, SEM BARALHO (28/09/2026). Os outros continuam na mesma célula do grid — é o que dá ao
       carrossel a altura do cartão mais alto e impede a faixa de pular ao virar — mas invisíveis. A troca
       é uma transição curta de opacidade: diz "mudou" sem desenhar profundidade. */
    transition: opacity .2s ease, visibility .2s;
}
.painel-carrossel__palco > .painel-lead:not(.painel-lead--frente) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .painel-carrossel__palco > .painel-lead { transition: none; }
}

/* 44px de alvo de toque (era o mesmo do selo do Radar, que saiu em 28/09/2026). */
.painel-carrossel__seta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-pill);
    /* Tokens de tela clara desde 28/09/2026: sem o palco, a seta mora sobre a página. */
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.painel-carrossel__seta:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-primary); }
.painel-carrossel__seta:disabled { opacity: .3; cursor: default; }

/* AS BOLINHAS MUDARAM DE ANDAR (11/09/2026): sairam de baixo do baralho e foram para DENTRO do pe do
   cartao da frente, que ja era espaco vazio — "Ver mais" mora na esquerda e o atalho na direita, e o
   meio nunca teve nada. Empilhadas embaixo elas custavam 26px de altura do palco e empurravam o Radar
   para fora da primeira dobra.
   AS CORES TIVERAM QUE MUDAR JUNTO, e isto e' o tipo de coisa que se esquece e passa: elas usavam
   --color-stage-item (rosa a 10% de opacidade) e --color-stage-text (#fdf2f8, quase branco), tokens
   desenhados para viver SOBRE O FUCSIA. Sobre o cartao branco as duas seriam invisiveis. Agora usam
   os tokens de tela clara, e a ativa e' --color-primary, que e' quem diz "voce esta aqui" no resto
   do sistema. */
.painel-carrossel__navegacao {
    position: absolute;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.painel-carrossel__passos { display: flex; align-items: center; gap: var(--space-2); }
.painel-carrossel__passo {
    width: var(--space-5);
    height: var(--space-1);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}
.painel-carrossel__passo--ativo {
    width: var(--space-7);
    background: var(--color-primary);
}
.painel-carrossel__contador {
    min-width: var(--space-7);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* O BOTAO DE PARAR o revezamento. Ele e' a contrapartida que o dono pediu junto com "pode passar
   sozinho", e e' tambem o que satisfaz a regra de acessibilidade (WCAG 2.2.2): o que se mexe sozinho
   por mais de 5 segundos precisa ter como ser parado.
   Fica DISCRETO de proposito — a acao principal do cartao e' o atalho da direita, nao este botao. */
.painel-carrossel__pausa {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--space-5); height: var(--space-5);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.painel-carrossel__pausa:hover { color: var(--color-primary); background: var(--color-surface-2); }

@media (max-width: 720px) {
    .painel-carrossel { gap: var(--space-1); }

    /* AS SETAS SOMEM NO CELULAR (11/09/2026), e isto nao e' enxugar por enxugar: dois botoes de 44px
       mais os vaos comiam 96px dos 375 da tela. Sobrava um cartao de ~205px que, descontado o respiro
       interno e o recuo da aspa, deixava 125px de coluna — larga o bastante para UMA PALAVRA por
       linha. Era a tela inteira trabalhando para a navegacao e nada para o texto.
       NADA SE PERDE: no celular vira-se a pagina arrastando o dedo (maya-carrossel.js), e as bolinhas
       continuam la, que sao botoes de verdade e e' por elas que teclado e leitor de tela navegam. */
    .painel-carrossel__seta { display: none; }

    /* NO CELULAR AS BOLINHAS VOLTAM PARA BAIXO DO BARALHO. No monitor elas se encaixam no vazio do pe
       do cartao e nao custam altura nenhuma; num cartao de 250px de conteudo, as bolinhas mais o
       contador mais a pausa somam 208px e passavam POR CIMA do botao "Solucoes da Maya" — medido,
       nao suposto. Aqui altura sobra e largura nao, entao a conta se inverte e elas descem. */
    .painel-carrossel { flex-wrap: wrap; }
    .painel-carrossel__navegacao {
        position: static;
        transform: none;
        width: 100%;
        justify-content: center;
        margin-top: var(--space-3);
    }
    .painel-lead {
        min-height: calc(var(--space-7) * 5);
        padding: var(--space-5);
    }
    /* NO CELULAR O RETRATO VOLTA PARA O FLUXO, deitado: a coluna tem menos de 400px, e o bloco de
       128px ancorado no canto comeria um terco de cada linha de texto. Deitado ele custa uma faixa de
       56px no topo e devolve a largura inteira para a fala dela. */
    .painel-lead__assinatura {
        position: static;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-2);
        text-align: left;
    }
    .painel-lead__origem { align-items: flex-start; }
    .painel-lead__maya {
        width: calc(var(--space-7) + var(--space-2));
        height: calc(var(--space-7) + var(--space-2));
    }
    /* Aspa menor e recuo menor: 56px de recuo numa coluna de 340px e' um sexto da linha. */
    .painel-lead__fala { padding-left: var(--space-5); }
    .painel-lead__fala::before { font-size: 3rem; }
    .painel-lead__fala::after { font-size: 2rem; }
    .painel-lead__leitura { font-size: var(--text-lg); }
    /* No celular o gancho desce um degrau: 28px numa coluna de ~300px daria duas ou três palavras por
       linha. 22px ainda é o maior texto da tela, que é o que o peso dele precisa. */
    .painel-lead__gancho { font-size: var(--text-2xl); }
    .painel-lead__complemento { font-size: var(--text-lg); }
}

/* O AVISO DE LEITURA PENDENTE SAIU DAQUI em 11/09/2026 e virou a legenda embaixo do retrato dela
   (`.painel-lead__origem`). Ele dizia, no pe do palco, a mesma coisa que o selo no topo do cartao ja
   dizia — "Dados do sistema" — com 340px entre os dois. Uma informacao, um lugar; e o palco ganhou
   de volta os ~26px de altura que a linha custava. */




/* =========================================================================
   A FALA DA MAYA — o bloco que faz o cartao parecer alguem falando

   POR QUE UM BLOCO, e nao manchete e texto soltos na coluna: e' ele quem segura as ASPAS, quem
   LIMITA A LARGURA DA LINHA e quem separa "o que ela disse" do resto do cartao, que e' dado do
   sistema. As tres coisas precisam da mesma caixa; em pecas separadas elas se desalinhariam.

   56rem NAO E' NUMERO DE GOSTO. A coluna de leitura tinha 858px, o que dava ~105 caracteres por
   linha — medido na tela, com a fonte de 18px. Linha confortavel de ler tem entre 60 e 75
   caracteres; acima disso o olho perde o comeco da linha seguinte e re-le a mesma.
   896px menos os 56px do recuo da aspa deixam 840px, que em 22px da uns 76 caracteres.
   A PRIMEIRA VERSAO FOI 46rem (62 caracteres) e estava apertada demais: encurtava tanto que a mesma
   conclusao passava a ocupar 5 linhas em vez de 3, e a altura que a linha curta economizava na
   horizontal voltava toda na vertical — justo o que o pedido de "puxar tudo para cima" queria evitar.
   E SUBIR A FONTE SEM LIMITAR A LARGURA TERIA PIORADO: linha mais alta e igualmente comprida cansa
   mais, nao menos. Os dois andam juntos ou nenhum dos dois vale. (Boa parte do conserto vem da
   propria fonte maior: 858px em 22px ja seriam 78 caracteres, e nao 105.)

   A FOLGA QUE ISSO ABRE NA DIREITA e' o que deixa o retrato dela morar no canto sem que o texto
   precise desviar dele. Ver `.painel-lead__assinatura`.
   ========================================================================= */
/* SEM `max-width` PROPRIO desde 11/09/2026: quem limita a linha agora e' a coluna da grade
   (`.painel-lead__corpo`, primeira faixa com teto de 56rem). Deixar os dois tetos ligados era garantia de
   que um dia alguem mexeria num e ficaria procurando por que nao mudou nada. */
.painel-lead__fala {
    position: relative;
    margin-top: var(--space-3);
    padding-left: calc(var(--space-7) + var(--space-2));
}

/* A ASPA DE ABERTURA fica PENDURADA no recuo, e nao antes do texto. Se ela empurrasse a primeira
   linha, so a primeira linha comecaria mais para dentro e o bloco ficaria torto. Pendurada, o texto
   inteiro alinha numa coluna so e a aspa vive na margem — que e' como revista faz ha um seculo. */
.painel-lead__fala::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -0.22em;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--color-ai-quote);
    pointer-events: none;
    user-select: none;
}

/* A ASPA DE FECHAMENTO E' MOLDURA, NAO PONTUACAO — e essa distincao resolve um conflito real.
   Como pontuacao ela teria que vir depois da ultima palavra; mas o texto e' aparado por CSS quando e'
   longo, e aspa fechando logo depois de um "..." le como defeito, nao como fim de fala. Ancorada no
   canto de baixo do bloco, longe do corte, ela emoldura a fala inteira e nao promete que a frase
   acabou ali. Por isso tambem e' menor que a de abertura: moldura nao disputa com o comeco. */
.painel-lead__fala::after {
    content: "\201D";
    position: absolute;
    right: 0;
    bottom: -0.55em;
    font-size: 3rem;
    line-height: 1;
    color: var(--color-ai-quote);
    pointer-events: none;
    user-select: none;
}

/* 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". */
/* Subiu de --text-xl (18px) para --text-3xl (28px) em 07/09/2026. O comentário acima explica por que
   ela nasceu — a coluna era estreita e o texto aparecia aparado. A coluna deixou de ser estreita, mas
   a manchete ficou: agora ela é a porta de entrada da leitura, o que se lê do outro lado da mesa. */
/* ITALICO SO AQUI (11/09/2026). O dono pediu italico leve em toda a fala dela; nao existe "leve" em
   fonte de sistema (e' liga ou desliga), e italico em seis linhas de portugues — lingua cheia de
   acento — e' mais lento de ler, justamente no texto que mais se quer lido. A manchete e' o oposto:
   uma ou duas linhas, 28px, lida de relance. Ali o italico da voz de graca, e o texto corrido fica
   em redondo. A "voz" que faltava no resto vem das aspas e do tamanho maior, nao da inclinacao. */
/* A MANCHETE GANHOU COR (12/09/2026, pedido do dono). Era `--color-text`, o mesmo preto da leitura logo
   abaixo — e manchete e texto no mesmo tom fazem o olho ler os dois como um bloco so', que e' justamente
   o contrario do trabalho dela: ela existe para ser lida DE RELANCE, antes de o vendedor decidir se le o
   resto.
   O ROXO E' O DA MARCA DA MAYA, nao uma cor nova: `--color-ai-2` e' o mesmo token do degrade do agente
   (--gradient-ai) e do selo do Radar. Isso amarra a manchete a ELA, e nao ao cartao — quem escreveu
   aquela frase tem cara, e a cor diz isso sem precisar de rotulo.
   CONTRASTE CONFERIDO: #6d28d9 sobre a superficie branca do cartao da' ~7,4:1, que passa em AA e AAA
   para texto grande com folga. Nao ha tema escuro neste app, entao o token nao muda debaixo dela. */
/* A MANCHETE VIROU GANCHO (28/09/2026, pedido do dono). Em produção ninguém lia o texto longo do banner;
   agora o banner fechado mostra uma frase FALADA, curta e assertiva ("Você está pagando para vender 214
   anúncios."), e o texto inteiro só abre em "Soluções da Maya".
   NEGRITO PESADO E SEM ITÁLICO. O itálico servia a um título de duas linhas; o gancho é uma frase com
   verbo, e é o PESO que o dono pediu — "fonte maior e negrito, para dar peso à frase". Mesmo roxo da
   manchete (`--color-ai-2`, a cor dela): contraste de ~7,4:1 sobre o branco do cartão. */
.painel-lead__gancho {
    margin: 0;
    font-size: var(--text-3xl); font-weight: 800; line-height: 1.2;
    color: var(--color-ai-2);
    text-wrap: balance;
}

/* A LINHA DISCRETA embaixo do gancho: tom mais baixo, uma frase. Preto de texto, e não cinza de legenda —
   ela ainda é a fala dela, só que em volume menor. */
.painel-lead__complemento {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xl); line-height: 1.45;
    color: var(--color-text);
}

/* O CONVITE É FIXO e é a tela que escreve, nunca a IA: sempre igual, sem custo e sem risco de ela esquecer.
   Miúdo e apagado — é a legenda do botão logo abaixo, não mais uma fala. */
.painel-lead__convite {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.painel-lead__convite strong { color: var(--color-ai-2); font-weight: 700; }

/* 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. */
/* 07/09/2026: de 16px para --text-xl (18px), e o aparo de 3 linhas passou para 6.
   O comentário acima ("por que 16 e não 14") continua valendo e só ficou mais forte: aquele degrau
   foi o possível dentro de uma coluna de 270px. Num cartão de ~900px, 16px volta a parecer legenda.
   O APARO DE 6 LINHAS QUASE NUNCA CORTA — os textos dela têm ~300 caracteres, o que dá umas 4 linhas
   nessa largura. Ele fica como teto, para que um texto fora da curva não estique o palco inteiro
   (todos os cartões têm a altura do mais alto). O botão "Ver mais" continua soltando o aparo. */
/* 11/09/2026: de --text-xl (18px) para --text-2xl (22px), e o aparo de 3 linhas passou para 5.
   A MAYA E' A PROTAGONISTA DO SISTEMA e a fala dela estava no mesmo corpo de um texto de apoio
   qualquer. 22px e' corpo de citacao — o tamanho em que uma revista imprime o que alguem disse.
   O 22 SO PODE EXISTIR PORQUE A LINHA ENCURTOU (ver `.painel-lead__fala`): fonte maior em linha de 105
   caracteres seria troca ruim.
   O APARO SUBIU PARA 9 LINHAS com o cartao dobrando de altura. Ele nunca foi limite de gosto: e' o
   teto que impede um texto fora da curva de esticar o palco inteiro (todos os cartoes tem a altura do
   mais alto). Com 384px de piso, 9 linhas e' o que cabe sem o cartao precisar crescer.
   "Ver mais" continua soltando o aparo — e continua sendo, ENQUANTO A PAGINA DE SOLUCOES NAO EXISTIR,
   a unica forma de ler o que foi cortado. Quando ela existir, este botao pode sair. */
/* 28/09/2026: de --text-2xl para --text-xl. Ela deixou de ser a fala do banner fechado e passou a ser o
   texto COMPLETO, lido por quem abriu — ~1.000 caracteres em 22px ocupavam o palco inteiro. Quem chega
   aqui escolheu ler; o tamanho de citação agora é do gancho. */
.painel-lead__leitura {
    margin: var(--space-4) 0 0; font-size: var(--text-xl); color: var(--color-text);
    line-height: 1.55;
    /* O APARO SAIU DAQUI (11/09/2026, noite) e subiu para `.painel-lead__principal`. NAO foi arrumacao:
       `-webkit-line-clamp` exige `display: -webkit-box`, e caixa dessas NAO contorna flutuante —
       medido no navegador, ela encolhe para 678px em TODAS as linhas, inclusive nas que passariam por
       baixo do retrato. Com o retrato flutuando, manter o line-clamp aqui anularia a mudanca inteira.

       O QUE A MEDIDA MOSTROU, e que ninguem tinha percebido ate medir: com 6 linhas numa coluna de
       692px o cartao mostrava ~414 caracteres, enquanto a trava do texto
       (ScreenConclusionGuard.MaxCaracteres) permitia 900. Mais da METADE do que ela escrevia nascia
       escondida atras do "Ver mais" — e o cartao ANTIGO, com 18px na largura inteira, mostrava MAIS
       que o novo. O carrossel deu espaco ao CARTAO e tirou da FALA.
       Contornando o retrato: ~69 caracteres por linha nas primeiras seis (ao lado dele) e ~98 nas
       seguintes (por baixo). */
}

/* LEITURA SEM GANCHO, com o banner fechado (28/09/2026): leitura gravada antes do gancho existir, ou gancho
   e complemento recusados pela trava. O texto completo é a única fala que existe, então ele aparece — mas
   aparado em 3 linhas, para o banner fechado continuar curto. Inteiro no DOM; "Soluções da Maya" abre. */
.painel-lead__leitura--aparada {
    margin-top: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Aberta, o corpo rola. O texto não muda — ele sempre esteve inteiro no DOM. */
.painel-lead--aberta .painel-lead__corpo {
    overflow-y: auto;
    padding-right: var(--space-1);
}

/* 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. */
/* =========================================================================
   A COLUNA DE PROVAS — o retrato dela e os fatos que sustentam a conclusao

   ESTE CONTEUDO NAO E' NOVO: ele morava atras do "Ver mais", e era a escolha errada duas vezes.
   Primeiro porque escondia justamente a parte VERIFICAVEL do cartao — os numeros apurados em C# —
   atras de um clique, enquanto a parte escrita pela IA aparecia sozinha. Segundo porque, escondido,
   ele nao ocupava o unico espaco do cartao que estava sobrando.
   E' DELIBERADAMENTE MIUDO (13px) E CINZA. Nao disputa com a citacao ao lado: quem le o cartao le a
   frase dela; quem duvida da frase olha para a direita e encontra de onde ela saiu. Hierarquia de
   leitura, nao dois textos concorrendo.
   ========================================================================= */
/* FLUTUANTE A DIREITA (11/09/2026, noite). Era a segunda coluna de uma grade; virou um bloco que o
   texto CONTORNA — o que devolve para a fala dela toda a altura abaixo do retrato.
   AS MARGENS ENCOLHERAM POR PEDIDO DO DONO, e cada uma tem um efeito diferente:
   - em cima: zero. O retrato encosta no topo do conteudo, ao lado do rotulo da area, em vez de comecar
     alinhado com a manchete. Era o "espaco superior" que ele apontou.
   - a direita: zero. O flutuante ja termina na borda do conteudo; quem da' o respiro ate a borda do
     cartao e' o padding dele, e nao uma margem propria (uma margem negativa aqui seria CORTADA pelo
     `overflow: hidden` do bloco que apara).
   - a esquerda: `--space-5` em vez do vao de `--space-7` da grade. E' a distancia entre a ultima letra
     e a imagem, e encolhe-la e' o que faz o texto "prosseguir ate a imagem".
   - embaixo: `--space-4`, para a linha que passa por baixo nao encostar no retrato.
   A LARGURA VIROU FIXA porque flutuante nao aceita `minmax()`: 15rem e' o piso que a grade ja usava. */
.painel-lead__provas {
    float: right;
    /* 9rem = 144px, FECHADO: o retrato tem 120px (112 de imagem + 4 de borda de cada lado) e o resto e'
       o respiro da legenda, que quebra em duas linhas nessa largura.
       ERA 15rem (240px), E ERA DESPERDICIO PURO: essa largura existia para as provas, que agora so'
       aparecem abertas. Com o retrato de 120px dentro de uma coluna de 240, sobravam 120px de coluna
       VAZIA a esquerda dele, mais 24px de margem — 144px de branco entre a ultima letra e a cara dela,
       em toda linha que corre ao lado. Era o "espaco grande vazio" que o dono apontou, e a margem era
       a menor parte dele. */
    width: 9rem;
    margin: 0 0 var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
    min-width: 0;
}
/* Aberto, o bloco volta a 15rem: agora ele tem conteudo de texto ("Apoiada em", "Tambem vi hoje"), e
   240px e' a largura em que aquilo le como coluna em vez de palavra por linha. */
.painel-lead--aberta .painel-lead__provas { width: 15rem; }
/* SO' COM O CARTAO ABERTO (11/09/2026, noite, decisao do dono). "Apoiada em" e "Tambem vi hoje"
   sumiram do cartao fechado e voltam no "Ver mais".

   O GANHO NAO E' SO' DE LIMPEZA, e' de espaco: o flutuante passa a ter a altura do RETRATO (~160px)
   em vez da coluna inteira. Como o texto contorna o flutuante, tudo o que vinha abaixo dele empurrava
   para baixo a linha em que a fala dela voltava a ocupar a largura cheia. Com as provas escondidas, a
   fala corre estreita por ~4 linhas e larga a partir dali, em vez de estreita por 8.

   A PROCEDENCIA NAO SE PERDE, e isso importa: a legenda embaixo do retrato ("leitura de hoje" contra
   "dados do sistema") continua VISIVEL no cartao fechado. Ela e' a unica coisa da tela que separa o
   que a MAYA concluiu do que o sistema contou; as provas dizem em QUE ela se apoiou, que e' a
   pergunta de quem duvidou da frase — e quem duvida clica.

   O aparo de 3 linhas que existia aqui saiu junto: ele servia para uma prova fora da curva nao
   esticar o cartao fechado, e no cartao fechado elas nao existem mais. */
.painel-lead__prova {
    display: none;
    width: 100%;
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
}
.painel-lead--aberta .painel-lead__prova { display: block; }
.painel-lead__prova .painel-lead__rotulo { display: block; margin-bottom: var(--space-1); }

/* ABAIXO DE 1100px A GRADE DESMONTA. Duas colunas exigem uns 640px para a citacao mais 240px para as
   provas mais o vao; apertadas alem disso, a citacao cai para ~40 caracteres por linha e a leitura
   fica pior do que era com uma coluna so. Empilhadas, o retrato vai para cima e as provas para baixo
   da fala — que e' a ordem em que se le mesmo. */
@media (max-width: 1100px) {
    /* SEM FLUTUANTE AQUI. Contornar so' compensa quando sobra largura: com 15rem de retrato dentro de
       uma coluna estreita, as linhas "ao lado" cairiam para ~30 caracteres — pior do que a coluna
       unica que existia antes. Empilhado, o retrato volta a ser um bloco depois da fala. */
    .painel-lead__principal {
        max-height: none;
        overflow: visible;
        mask-image: none;
        /* Volta a ser coluna flex SO' AQUI. No markup o aside vem primeiro (flutuante precisa vir antes
           do que ele desvia); empilhado, a ordem certa de leitura e' a inversa — a frase, e embaixo
           quem disse, como se cita alguem. `order` conserta isso sem duplicar markup. */
        display: flex;
        flex-direction: column;
    }
    .painel-lead__provas {
        float: none;
        width: auto;
        order: 1;
        margin: var(--space-4) 0 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-5);
    }
    /* O retrato deita: em coluna unica ele e' a primeira linha do bloco, e redondo de 112px com a
       data centralizada embaixo custaria 170px de altura so para dizer quem falou. */
    .painel-lead__assinatura {
        flex-direction: row;
        align-self: flex-start;
        gap: var(--space-3);
        text-align: left;
    }
    .painel-lead__prova { flex: 1 1 14rem; width: auto; }
    /* (O `grid-row: 3` que morava aqui saiu junto com a grade: o pe ja e' o ultimo filho do corpo.) */
}

.painel-lead__apoio {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted);
}
.painel-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. */
/* O PÉ TEM TRÊS PARTES e alinha da ESQUERDA, não mais `space-between`: botão à esquerda, as bolinhas
   do carrossel no meio (elas moram fora do cartão, posicionadas por cima — ver
   `.painel-carrossel__navegacao`) e o "Ver mais" empurrado para a direita por `margin-left: auto`.
   Com `space-between` o botão mudava de canto sozinho: nos cartões sem gaveta ele era o único item e
   ia para a esquerda; nos com gaveta, para a direita. Botão que troca de lugar a cada virada de
   cartão obriga a procurá-lo de novo toda vez. */
/* O RESPIRO EMBAIXO DO BOTAO ENCOLHEU (11/09/2026, noite, pedido do dono): o pe cedeu metade do seu
   afastamento de cima e o cartao cedeu parte do padding de baixo (ver `.painel-lead`). O que ele apontou
   e' que, com o botao cheio, sobrava uma faixa de branco entre ele e a borda que nao separava nada —
   o botao ja tem forma propria, entao nao precisava de tanto ar para nao encostar no texto. */
.painel-lead__pe {
    display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
    margin-top: auto; padding-top: var(--space-2);
}
/* O link "Ver mais" (`.painel-lead__abrir`) saiu em 28/09/2026: quem abre o texto completo agora é o próprio
   "Soluções da Maya", e quem fecha é um `.btn--secondary` ao lado do botão principal. */

/* 29/09/2026 — direção aprovada nos estudos: personagem oficial em destaque e fundo por assunto.
   Escopo fechado em .painel-leitura; não altera retratos ou balões da Maya nas outras telas.
   As cores de assunto são superfícies de marca, não estados de sucesso/perigo. O rótulo continua escrito.
   A navegação tem uma faixa própria para nunca cobrir o texto, o botão ou as mãos da personagem. */
.painel-leitura {
    --maya-banner-altura: calc(var(--space-7) * 6);
    --maya-banner-arte-largura: 38%;
    --maya-banner-marca-opacidade: .14;
    --maya-banner-nome-opacidade: .10;
    --maya-banner-anel-opacidade: .5;
    --maya-banner-fala-peso: 700;
    --maya-banner-fala-estilo: italic;
}
.painel-leitura .painel-carrossel { flex-wrap: wrap; }
.painel-leitura .painel-carrossel__palco { flex-basis: 100%; max-height: none; }
.painel-leitura .painel-lead {
    --banner-fundo: var(--color-ai-message-surface);
    --banner-texto: var(--color-text);
    --banner-titulo: var(--color-ai-2);
    --banner-legenda: var(--color-ai-message-text);
    --banner-marca: var(--color-ai-2);
    position: relative; isolation: isolate;
    container-type: inline-size; container-name: maya-banner;
    min-height: var(--maya-banner-altura);
    padding: 0; border-left: 0;
    border-bottom-color: var(--color-ai-border);
    background: var(--banner-fundo); color: var(--banner-texto);
}
.painel-leitura .painel-lead--dinheiro {
    --banner-fundo: var(--color-ai-message-text);
    --banner-texto: var(--color-primary-contrast);
    --banner-titulo: var(--color-primary-contrast);
    --banner-legenda: var(--color-ai-border);
    --banner-marca: var(--color-ai-border);
}
.painel-leitura .painel-lead--atendimento {
    --banner-fundo: var(--color-ai-2);
    --banner-texto: var(--color-primary-contrast);
    --banner-titulo: var(--color-primary-contrast);
    --banner-legenda: var(--color-primary-contrast);
    --banner-marca: var(--color-primary-contrast);
}
.painel-leitura .painel-lead--estoque {
    --banner-fundo: var(--color-ai-message-border);
    --banner-texto: var(--color-ai-message-text);
    --banner-titulo: var(--color-ai-message-text);
    --banner-marca: var(--color-primary-contrast);
}
.painel-leitura .painel-lead--pedidos { --banner-fundo: var(--color-ai-border); }
.painel-leitura .painel-lead--conta { --banner-fundo: var(--color-ai-surface); }
.painel-leitura .painel-lead__corpo {
    position: relative; z-index: 2;
    width: calc(100% - var(--maya-banner-arte-largura)); height: auto;
    min-height: var(--maya-banner-altura);
    padding: var(--space-6) var(--space-4) var(--space-5) calc(var(--space-7) + var(--space-4));
    overflow: visible;
}
.painel-leitura .painel-lead__principal {
    display: flex; flex-direction: column;
    max-height: none; overflow: visible; mask-image: none;
}
.painel-leitura .painel-lead__area {
    align-self: flex-start;
    color: var(--banner-legenda);
    font-size: var(--text-sm); font-weight: 750;
}
.painel-leitura .painel-lead__area .lucide { color: currentColor; }
.painel-leitura .painel-lead__fala { margin-top: var(--space-3); padding-left: 0; }
.painel-leitura .painel-lead__fala::before,
.painel-leitura .painel-lead__fala::after { content: none; }
/* A frase principal soa como fala da Maya: negrito moderado, itálico natural da fonte
   e aspas discretas no markup. Complemento, data e ações continuam em texto normal. */
.painel-leitura .painel-lead__gancho {
    color: var(--banner-titulo);
    font-weight: var(--maya-banner-fala-peso);
    font-style: var(--maya-banner-fala-estilo);
}
.painel-leitura .painel-lead__complemento,
.painel-leitura .painel-lead__leitura { color: var(--banner-texto); }
.painel-leitura .painel-lead__convite,
.painel-leitura .painel-lead__convite strong { color: var(--banner-legenda); }
.painel-leitura .painel-lead__pe { margin-top: var(--space-4); padding-top: 0; flex-wrap: wrap; }
.painel-leitura .painel-lead__pe .btn { min-height: calc(var(--space-7) - var(--space-1)); }
.painel-leitura .painel-lead__origem { margin: var(--space-3) 0 0; color: var(--banner-legenda); }
.painel-leitura .painel-lead--dinheiro .painel-lead__solucoes,
.painel-leitura .painel-lead--atendimento .painel-lead__solucoes { border-color: var(--color-ai-border); }
.painel-leitura .painel-lead__provas {
    display: none; float: none; order: 2; width: auto;
    margin: var(--space-4) 0 0; align-items: flex-start;
    flex-direction: column; gap: var(--space-3);
}
.painel-leitura .painel-lead--aberta .painel-lead__provas { display: flex; }
.painel-leitura .painel-lead__prova {
    flex: none; color: var(--banner-texto); border-color: var(--color-ai-border);
}
.painel-leitura .painel-lead__rotulo { color: var(--banner-legenda); }
.painel-leitura .painel-lead--aberta .painel-lead__corpo {
    max-height: calc(var(--space-7) * 14);
    overflow-y: auto;
    padding-right: var(--space-4);
}
/* A rolagem limita o corpo, não os blocos dentro dele: comprimir a fala longa
   faria o texto transbordar por cima das ações e impediria clicar em Fechar. */
.painel-leitura .painel-lead--aberta .painel-lead__corpo > * { flex-shrink: 0; }
.painel-leitura .painel-lead__marca-texto {
    position: absolute; z-index: -1; inset: 0 auto auto 0;
    width: calc(100% - var(--maya-banner-arte-largura)); height: var(--maya-banner-altura);
    pointer-events: none; user-select: none;
}
.maya-marca__nome {
    font-family: var(--font-sans); font-size: calc(var(--space-7) * 2); font-weight: 850;
    fill: var(--banner-marca); opacity: var(--maya-banner-nome-opacidade);
}
.maya-marca__simbolo {
    fill: none; stroke: var(--banner-marca); stroke-width: 4; stroke-linecap: round;
    opacity: var(--maya-banner-marca-opacidade);
}
.maya-marca__linha {
    fill: none; stroke: var(--banner-marca); stroke-width: 1;
    opacity: var(--maya-banner-marca-opacidade);
}
.painel-leitura .painel-lead__arte {
    position: absolute; inset: 0 0 0 auto; width: var(--maya-banner-arte-largura);
    overflow: hidden; z-index: 1; pointer-events: none;
}
.painel-leitura .painel-lead__campo { position: absolute; inset: 0; width: 100%; height: 100%; }
.maya-campo__roxo { fill: var(--color-ai-2); }
.maya-campo__luz { fill: var(--color-ai-1); }
.maya-campo__fucsia { fill: var(--color-dica-marca); }
.maya-campo__fucsia-linha {
    fill: none; stroke: var(--color-dica-marca); stroke-width: 2;
    opacity: var(--maya-banner-anel-opacidade);
}
.maya-campo__anel {
    fill: none; stroke: var(--color-ai-border); stroke-width: 1;
    opacity: var(--maya-banner-anel-opacidade);
}
.painel-leitura .painel-lead__marca {
    position: absolute; top: var(--space-6); right: var(--space-4);
    color: var(--color-primary-contrast); opacity: var(--maya-banner-nome-opacidade);
    font-size: calc(var(--space-7) * 3); font-weight: 850; line-height: 1;
}
.painel-leitura .painel-lead__personagem {
    position: absolute; z-index: 3; top: var(--space-2); left: 50%; transform: translateX(-50%);
    height: calc(var(--maya-banner-altura) + var(--space-4)); width: auto; max-width: 100%;
    object-fit: contain; object-position: center top;
}
.painel-leitura .painel-lead__brilho {
    position: absolute; z-index: 4;
    fill: none; stroke: var(--color-alvo-claro); stroke-width: 1.5;
}
.painel-leitura .painel-lead__brilho--um { top: 20%; left: 12%; width: var(--space-5); height: var(--space-5); }
.painel-leitura .painel-lead__brilho--dois { right: 10%; top: 75%; width: var(--space-4); height: var(--space-4); }
.painel-leitura .painel-carrossel__navegacao {
    position: static; transform: none; width: 100%; margin-top: 0;
    padding: 0 var(--space-4); justify-content: center;
    flex-wrap: wrap;
    background: var(--color-ai-surface); border-bottom: 1px solid var(--color-ai-border);
}
.painel-leitura .painel-carrossel__pausa {
    width: calc(var(--space-7) - var(--space-1)); height: calc(var(--space-7) - var(--space-1));
}
.painel-leitura .painel-carrossel__passo {
    height: calc(var(--space-7) - var(--space-1));
    border-radius: 0; background: none;
    display: flex; align-items: center; justify-content: center;
}
.painel-leitura .painel-carrossel__passo::before {
    content: ""; display: block; width: 100%; height: var(--space-1);
    border-radius: var(--radius-pill); background: var(--color-ai-border);
}
.painel-leitura .painel-carrossel__passo--ativo::before { background: var(--color-primary); }
.painel-leitura button:focus-visible,
.painel-leitura a:focus-visible {
    outline: var(--space-1) solid var(--color-alvo); outline-offset: var(--space-1);
}
@container maya-banner (max-width: 600px) {
    .painel-leitura .painel-lead__corpo { width: 100%; min-height: 0; padding: var(--space-5); }
    .painel-leitura .painel-lead__gancho { font-size: var(--text-2xl); }
    .painel-leitura .painel-lead__complemento { font-size: var(--text-lg); }
    .painel-leitura .painel-lead__marca-texto { width: 100%; opacity: .75; }
    .painel-leitura .painel-lead__arte { position: relative; width: 100%; height: calc(var(--space-7) * 4); }
    .painel-leitura .painel-lead__personagem { height: calc(var(--space-7) * 4 + var(--space-4)); left: 63%; max-width: 80%; }
    .painel-leitura .painel-lead__marca { top: var(--space-4); left: var(--space-5); right: auto; font-size: calc(var(--space-7) * 2); }
    .painel-leitura .painel-lead__brilho--um { left: 18%; top: 50%; }
    .painel-leitura .painel-lead__brilho--dois { right: 8%; top: 75%; }
}
/* Galeria de QA local: mesmas peças do banner, fora do fluxo de dados da loja. */
.maya-banners-preview { display: flex; flex-direction: column; gap: var(--space-5); }
.maya-banners-preview .painel-leitura { margin: 0; }
@media (max-width: 560px) {
    .painel-leitura .painel-carrossel__navegacao { gap: var(--space-2); }
    .painel-leitura .painel-carrossel__passos { gap: var(--space-1); }
}

/* =========================================================================
   O PALCO FÚCSIA — a zona da MAYA

   O FÚCSIA MUDOU DE DONO EM 07/09/2026, por decisão do dono, e virou cor predominante do sistema.
   Ele nasceu aqui, no card "Últimas alterações" (02/09/2026), como EXCEÇÃO — e o aviso escrito neste
   mesmo bloco dizia que uma terceira superfície fúcsia mataria o reconhecimento da marca do "?".
   Foi exatamente essa a decisão tomada: promover a exceção a família, de olho aberto.

   POR QUE: o carrossel da MAYA precisava de palco escuro (branco sobre #faf8fd não recorta e, pior,
   não deixa a sombra aparecer — e a profundidade do baralho vive de sombra), e o roxo já é do Radar,
   logo abaixo. O fúcsia é o único escuro do sistema que se separa do roxo por MATERIAL, não por tom.

   A REGRA QUE VEIO JUNTO, E QUE NÃO PODE SER QUEBRADA: fúcsia é cor de SUPERFÍCIE, nunca de AÇÃO.
   Quem diz "isto é clicável" no sistema inteiro é --color-primary. Se o fúcsia também virar cor de
   botão e link, passam a existir duas cores disputando o mesmo significado — pior do que ter uma só.

   O QUE ISSO CUSTOU, PARA QUEM MEXER DEPOIS:
     - A marca do "?" deixou de ser a única superfície fúcsia. A compensação que morava no fim deste
       bloco (o "?" trocando de cor dentro do card) FOI REMOVIDA: o card não é mais fúcsia.
     - "Últimas alterações" desceu para depois do Radar e ficou NEUTRO. Duas faixas fúcsia na mesma
       página leriam como a mesma categoria de coisa, e não são: uma é a conclusão da IA, a outra é
       registro de consulta. Cor igual comunica importância igual — e era isso que anulava o efeito.
     - A landing (landing.css) continua roxo puro, sem um pixel de fúcsia. Enquanto ficar assim, a
       marca fala roxo por fora e fúcsia por dentro.

   O VERMELHO NÃO SOBREVIVE SOBRE O FÚCSIA, 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 nada que fique DIRETO no palco (abas, setas, pílulas) usa a paleta de perigo; o
   tom da área é dito pela barra do cartão, e cartão é branco, onde vermelho continua sendo vermelho.
   No card das alterações, agora neutro, o par âmbar/verde foi MANTIDO de propósito — uma taxa que
   subiu é um AVISO, não um prejuízo confirmado — só passou a usar os tokens de tela clara.

   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 {
    --color-stage-from: #8c1a5e;
    --color-stage-to: #2b0a1e;
    --gradient-stage: linear-gradient(150deg, var(--color-stage-from) 0%, var(--color-stage-to) 62%);
    --color-stage-item: rgba(255, 214, 236, 0.10);
    --color-stage-item-hover: rgba(255, 214, 236, 0.18);
    --color-stage-line: rgba(255, 214, 236, 0.22);
    --color-stage-text: #fdf2f8;
    --color-stage-muted: #edc4dc;
    /* O tom claro da marca: a sobrancelha "MAYA" e os ícones sobre o palco. */
    --color-stage-brand: #ffd6ec;
}

/* ---------- A ZONA FÚCSIA dos painéis de resumo (28/09/2026) ----------
   O que se mexe lá fora: "Últimas alterações" e, em seguida, o Catálogo. MESMO DESENHO dos painéis roxos
   de cima — fúcsia sobreposto em fúcsia mais escuro, como eles são roxo sobre roxo mais escuro.

   COMO: em vez de copiar ~30 regras de .painel-caixa, .painel-chip e das barras, a zona REDEFINE os tokens
   --escuro-* que essas peças já usam. Tudo o que está dentro dela troca de tinta sozinho, e qualquer ajuste
   futuro no desenho dos painéis vale para as duas cores. Os valores vêm dos tokens do palco (medidos no
   bloco do palco, acima): texto 7,93:1 no ponto mais claro do gradiente.

   SEM VERMELHO AQUI DENTRO: a 36° da matiz do fúcsia ele vira mancha. O que pesa contra é âmbar. */
.faixa-pagina--fucsia {
    background: var(--gradient-stage);
    box-shadow: inset 0 1px 0 var(--color-stage-line);
    --escuro-painel: var(--color-stage-item);
    --escuro-chip: var(--color-stage-item-hover);
    --escuro-linha: var(--color-stage-line);
    --escuro-linha-forte: var(--color-stage-muted);
    --escuro-texto: var(--color-stage-text);
    --escuro-apagado: var(--color-stage-muted);
    --escuro-roxo-ate: var(--color-stage-brand);
    --escuro-perigo-ate: var(--escuro-alerta-ate);
}
/* Bloco que só aparece quando o painel está LARGO (empilhado, na largura inteira). Lado a lado com o vizinho,
   ele sai para os dois painéis da linha ficarem com altura parecida — ver "Últimas alterações". */
.painel-bloco--so-largo { display: none; }
@container (min-width: 620px) {
    .painel-bloco--so-largo { display: block; }
}

.painel-chip--ok b { color: var(--escuro-ok-ate); }

/* Duas metades iguais: gráfico e lista. O `auto` do corpo padrão serve à rosca, que tem tamanho fixo; uma
   lista em `auto` cresceria até a largura da frase mais comprida. */
@container (min-width: 620px) {
    .painel-caixa__corpo--metades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* O recado de "nada mudou" dentro de um painel escuro. */
.painel-silencio { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--escuro-texto); }
.painel-silencio .lucide { flex: 0 0 auto; color: var(--escuro-apagado); }
.painel-silencio strong { display: block; font-size: var(--text-base); }
.painel-silencio p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--escuro-apagado); }
.painel-silencio a { color: var(--escuro-roxo-ate); font-weight: 600; }

/* A lista curta das mudanças mais recentes, para zona escura. Cada linha leva ao anúncio, onde se age. */
.painel-mudancas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.painel-mudancas__link {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2); border-radius: var(--radius-md);
    color: var(--escuro-texto); text-decoration: none;
    transition: background-color 160ms ease;
}
.painel-mudancas__link:hover { background: var(--escuro-chip); text-decoration: none; }
.painel-mudancas__icone {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-pill);
    background: var(--escuro-chip); color: var(--escuro-apagado);
}
.painel-mudancas__icone--pior { color: var(--escuro-alerta-ate); }
.painel-mudancas__icone--melhor { color: var(--escuro-ok-ate); }
.painel-mudancas__corpo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.painel-mudancas__nome { font-size: var(--text-sm); font-weight: 600; }
.painel-mudancas__detalhe {
    font-size: var(--text-xs); color: var(--escuro-apagado);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.painel-mudancas__quando { flex: 0 0 auto; font-size: var(--text-xs); color: var(--escuro-apagado); }

/* ---------- 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(--escuro-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(--escuro-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 painel — por isso sem prefixo .painel-)
   ========================================================================= */

/* ---------- 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. */
.faixa-pagina--escura .rosca-comp__trilho { stroke: var(--escuro-chip); }
.faixa-pagina--escura .rosca-comp__centro strong { color: var(--escuro-texto); }
.faixa-pagina--escura .rosca-comp__centro small,
.faixa-pagina--escura .rosca-comp__rotulo { color: var(--escuro-apagado); }
.faixa-pagina--escura .rosca-comp__valor { color: var(--escuro-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(--escuro-apagado); }
.barras--escuro .barras__trilho { background: var(--escuro-chip); }
.barras--escuro .barras__valor { color: var(--escuro-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; }
}

/* ── Lote de conserto de fotos (QUA-09) ─────────────────────────────────────
   A tela é orientada a EXCEÇÃO: linha tranquila fica discreta, linha com aviso
   ganha borda e sobe. Se todas tivessem o mesmo peso visual, o vendedor rolaria
   100 linhas sem olhar — e o aviso que importava passaria batido. */
.lote-topo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.lote-topo__title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0;
}

.lote-resumo__linha {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lote-resumo__n {
    font-size: var(--text-xl);
    font-weight: 700;
}

.lote-resumo__resto { color: var(--color-text-muted); }
.lote-aviso-txt { color: var(--color-warning); }

.lote-filtros {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-4) 0 var(--space-3);
}

.lote-linha {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

/* A borda de aviso é a única cor forte da lista. Usada em mais lugares, deixaria
   de significar "olhe aqui". */
.lote-linha--aviso { border-left: 3px solid var(--color-warning); }

.lote-linha--fora {
    opacity: 0.55;
    background: var(--color-surface-2);
}

.lote-linha__topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.lote-linha__titulo { font-weight: 600; }

/* Os botões da linha ficam juntos e nunca quebram: "Publicar só este" nasceu ao lado de "Tirar do lote"
   em 12/09/2026, e duas ações soltas no fim da linha viram duas colunas tortas em tela estreita. */
.lote-linha__acoes { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.lote-linha__meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.lote-linha__aviso {
    font-size: var(--text-sm);
    color: var(--color-warning);
    margin-top: var(--space-2);
}

.lote-linha__erro {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.lote-fotos {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.lote-foto {
    margin: 0;
    position: relative;
    width: 150px;
}

.lote-foto img,
.lote-foto__no-ml {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: block;
}

.lote-foto__no-ml {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.lote-foto figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* Rejeitada continua VISÍVEL, apagada: sumir daria a impressão de que foi
   apagada no Mercado Livre — que é exatamente o que este botão não faz. */
.lote-foto--rejeitada img { opacity: 0.3; }
.lote-foto--rejeitada figcaption { text-decoration: line-through; }

.lote-foto__x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.lote-foto__x:hover:not(:disabled) {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

/* Fica colada embaixo: numa lista de 100 linhas, botão de publicar no fim da
   página é botão que o vendedor não acha. */
.lote-barra {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-4);
    box-shadow: var(--shadow-md);
}

.lote-barra__nota {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* =========================================================================
   PROTÓTIPO LOCAL — BARALHO 3D DA MAYA

   Rota de desenvolvimento: /dev/maya-carrossel. Todos os seletores têm prefixo próprio para que a
   comparação visual não altere o carrossel real do Dashboard antes de o dono aceitar o desenho. */
.maya-prototype {
    display: grid;
    gap: var(--space-5);
}

.maya-prototype__header { margin-bottom: 0; }
.maya-prototype__header > div { max-width: 72ch; }

.maya-prototype__eyebrow,
.maya-prototype__scenario,
.maya-prototype__area,
.maya-prototype__counter {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.maya-prototype__eyebrow {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-primary);
}

.maya-prototype__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--space-5) var(--space-7) var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--gradient-stage);
    box-shadow: inset 0 1px 0 var(--color-stage-line);
}

.maya-prototype__swiper {
    display: block;
    width: calc(100% - var(--space-7));
    margin: 0;
    overflow: visible;
}

.maya-prototype swiper-slide {
    display: flex;
    height: auto;
}

.maya-prototype swiper-slide:not(.swiper-slide-active) .maya-prototype__card {
    border-color: var(--color-ai-border);
    background: var(--gradient-ai-surface), var(--color-surface-2);
    box-shadow: var(--shadow-lg);
}

.maya-prototype__body,
.maya-prototype__portrait {
    transition: opacity .16s ease;
}

.maya-prototype swiper-slide:not(.swiper-slide-active) .maya-prototype__body,
.maya-prototype swiper-slide:not(.swiper-slide-active) .maya-prototype__portrait {
    opacity: 0;
}

.maya-prototype__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    width: 100%;
    min-height: calc(var(--space-7) * 9);
    height: calc(var(--space-7) * 9);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-left: var(--space-1) solid var(--color-primary);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}

.maya-prototype__card--danger { border-left-color: var(--color-danger); }
.maya-prototype__card--warning { border-left-color: var(--color-warning); }

.maya-prototype__body {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex-direction: column;
}

.maya-prototype__deck-label {
    position: absolute;
    left: var(--space-6);
    bottom: var(--space-5);
    display: none;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.maya-prototype__deck-label-note {
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-ai-border);
    color: var(--color-primary);
    font-weight: 600;
}

.maya-prototype swiper-slide.swiper-slide-next .maya-prototype__deck-label {
    display: inline-flex;
}

.maya-prototype__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.maya-prototype__area {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.maya-prototype__scenario { color: var(--color-text-muted); }

.maya-prototype__title {
    margin: var(--space-3) 0 0;
    font-size: var(--text-3xl);
    line-height: 1.25;
}

.maya-prototype__text {
    display: -webkit-box;
    margin: var(--space-3) 0 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-xl);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
}

.maya-prototype__card--expanded .maya-prototype__text {
    display: block;
    max-height: calc(var(--space-7) * 6);
    overflow-y: auto;
}

.maya-prototype__expand {
    align-self: flex-start;
    margin-top: auto;
    padding: var(--space-3) 0 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: var(--space-1);
    cursor: pointer;
}

.maya-prototype__expand:hover { color: var(--color-primary-hover); }

.maya-prototype__portrait {
    align-self: center;
    margin: 0;
    text-align: center;
}

.maya-prototype__portrait img {
    display: block;
    width: calc(var(--space-7) * 4);
    height: calc(var(--space-7) * 4);
    border: var(--space-1) solid var(--color-ai-border);
    border-radius: var(--radius-pill);
    background: var(--color-ai-surface);
    object-fit: cover;
    object-position: top center;
    box-shadow: var(--shadow-ai);
}

.maya-prototype__portrait figcaption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.maya-prototype__arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-6) + var(--space-3));
    height: calc(var(--space-6) + var(--space-3));
    border: 1px solid var(--color-stage-line);
    border-radius: var(--radius-pill);
    background: var(--color-stage-item);
    color: var(--color-stage-text);
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: var(--shadow-sm);
}

.maya-prototype__arrow--previous { left: var(--space-2); }
.maya-prototype__arrow--next { right: var(--space-2); }
.maya-prototype__arrow:hover:not(:disabled) { background: var(--color-stage-item-hover); }
.maya-prototype__arrow:disabled { opacity: .3; cursor: default; }

.maya-prototype__navigation {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.maya-prototype__steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.maya-prototype__step {
    width: var(--space-5);
    height: var(--space-1);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-stage-item);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

.maya-prototype__step--active {
    width: var(--space-7);
    background: var(--color-stage-text);
}

.maya-prototype__counter {
    min-width: var(--space-7);
    color: var(--color-stage-muted);
}

.maya-prototype__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-width: max-content;
    margin: var(--space-3) auto 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-stage-line);
    border-radius: var(--radius-md);
    background: var(--color-stage-item);
    color: var(--color-stage-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.maya-prototype__notice .lucide {
    flex: 0 0 auto;
    color: var(--color-stage-brand);
}

@media (max-width: 720px) {
    .maya-prototype__stage {
        padding: var(--space-4) var(--space-5) var(--space-4) var(--space-3);
    }

    .maya-prototype__swiper { width: calc(100% - var(--space-4)); }

    .maya-prototype__card {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        min-height: calc(var(--space-7) * 12);
        height: calc(var(--space-7) * 12);
        padding: var(--space-5);
    }

    .maya-prototype__portrait {
        grid-row: 1;
        justify-self: center;
    }

    .maya-prototype__portrait img {
        width: calc(var(--space-7) * 2 + var(--space-4));
        height: calc(var(--space-7) * 2 + var(--space-4));
    }

    .maya-prototype__body { grid-row: 2; }

    .maya-prototype__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }

    .maya-prototype__notice {
        align-items: flex-start;
        max-width: none;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .maya-prototype__step,
    .maya-prototype__body,
    .maya-prototype__portrait { transition: none; }
}

/* ============================================================================
   HISTÓRICO DE ALTERAÇÕES (/alteracoes) — 12/09/2026
   A tabela é agrupada por PRODUTO: a linha de grupo é o cabeçalho de um bloco e as filhas são os anúncios
   irmãos (Clássico/Premium, catálogo ou não). O recuo e o fundo da linha de grupo são o que faz a hierarquia
   ser lida sem nenhuma borda extra — a tabela já é densa, e mais moldura só tiraria linha da tela.
   ========================================================================== */
.alt-filtros {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
}
.alt-filtros__lado { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.alt-filtros__check {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; cursor: pointer;
}

.alt-resumo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3); margin-bottom: var(--space-4);
}
.alt-resumo__item { display: grid; gap: 2px; }
.alt-resumo__rotulo {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--color-text-muted); font-weight: 600;
}
.alt-resumo__valor { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.alt-resumo__nota { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Vermelho é "contra o vendedor" em dinheiro E em nota, mesmo que o sinal do número seja invertido entre os
   dois (custo que sobe é +, nota que cai é −). Quem lê a tela pensa em bom e ruim, não em sinal. */
.alt--pior { color: var(--color-sinal-baixa); }
.alt--melhor { color: var(--color-sinal-alta); }

.alt-manchete { margin-bottom: var(--space-4); border-color: var(--color-ai-border); background: var(--color-ai-surface); }
.alt-manchete__rotulo {
    display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--color-primary); font-weight: 700; margin-bottom: var(--space-2);
}
.alt-manchete__lista { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); }

/* A LINHA DO SINAL. Pedido do dono em 12/09/2026 depois de ver a tela pronta: "está pálida, cheia de
   numeração, o olhar fica perdido". A cor vem SÓ dos tokens existentes (--color-danger #d23f3f e
   --color-success #1f9d57) e das tintas que já servem as linhas de tabela em toda a UI — nenhum verde ou
   vermelho novo entrou no sistema por causa desta tela. */
.alt-mov {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--radius-md);
    border: 1px solid transparent;
}
.alt-mov svg { width: 15px; height: 15px; }
/* TONS PRÓPRIOS DE INDICADOR, liberados pelo dono em 12/09/2026 ("para indicativos podemos usar outras
   cores"). Não substituem --color-danger/--color-success, que continuam mandando em botão, alerta e estado:
   estes existem só para SINAL em tabela densa, onde o vermelho tijolo e o verde grama do sistema somem no
   meio do texto. São um vermelho frio (rosa) e um verde frio (esmeralda), escolhidos por conviverem com o
   roxo da marca em vez de brigar com ele. Contraste sobre branco: 4,8:1 e 4,7:1 — passam em AA para o número
   em negrito, que é onde eles aparecem como texto. */
.alt-mov--pior { color: var(--color-sinal-baixa); background: var(--color-sinal-baixa-tinta); border-color: var(--color-sinal-baixa-borda); }
.alt-mov--melhor { color: var(--color-sinal-alta); background: var(--color-sinal-alta-tinta); border-color: var(--color-sinal-alta-borda); }

/* O FRETE QUE SOBE é o único que ganha selo CHEIO. Não é enfeite: é o único dos três assuntos que o vendedor
   não controla (o ML remarca o frete grátis obrigatório sozinho) e o que mais come margem — metade do impacto
   real da semana medida. Selo cheio contra selo com tinta é a hierarquia entre "isso te custou dinheiro
   agora" e "isso mudou". */
.alt-mov--frete-subiu {
    color: #ffffff; background: var(--color-sinal-baixa); border-color: var(--color-sinal-baixa);
}
/* Neutro é neutro DE VERDADE: primeira medição não pode ganhar tinta de alarme, que foi o erro que esta
   tela nasceu para corrigir. */
.alt-mov--neutro { color: var(--color-text-muted); background: var(--color-surface-2); border-color: var(--color-border); }

.alt-col-icone { width: 40px; padding-right: 0 !important; }

/* O DELTA é o protagonista; o "de → para" vira nota de rodapé. Antes os três números tinham o mesmo peso e
   era preciso ler todos para saber se a notícia era boa. */
.alt-delta { display: block; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alt-delta--pior { color: var(--color-sinal-baixa); }
.alt-delta--melhor { color: var(--color-sinal-alta); }
.alt-delta--neutro { color: var(--color-text-muted); font-weight: 600; }
.alt-de-para {
    display: block; margin-top: 1px; font-size: var(--text-xs); color: var(--color-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.alt-col-assunto { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.alt-col-motivo { color: var(--color-text); }

.alt-grupo > td { background: var(--color-surface-2); }
/* A faixa lateral no bloco do produto: é ela que dá ao olho onde um produto começa e o outro termina, sem
   somar borda nenhuma numa tabela que já é densa. */
.alt-grupo > td:first-child { border-left: 3px solid var(--color-border); }
.alt-grupo--pior > td:first-child { border-left-color: var(--color-sinal-baixa); }
.alt-grupo--melhor > td:first-child { border-left-color: var(--color-sinal-alta); }
.alt-grupo strong { margin-right: var(--space-2); }
.alt-grupo__impacto {
    margin-left: var(--space-2); font-size: var(--text-xs); font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.alt-linha > td:first-child { padding-left: var(--space-5); }
.alt-linha__item { font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.alt-linha__selos { display: inline-flex; gap: var(--space-1); margin-left: var(--space-2); }
.alt-col-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.alt-col-quando { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; text-align: right; }

/* =========================================================================
   A GRADE DA CENTRAL DE QUALIDADE (QUA-02b)
   -------------------------------------------------------------------------
   Um cartão por ASSUNTO, sempre — inclusive o assunto sem pendência nenhuma,
   que na tela antiga não existia em lugar nenhum.

   POR QUE ESTA GRADE MORA NO ESCURO, e não é gosto: a barra de cada cartão
   tem um segmento HACHURADO que quer dizer "ninguém conferiu". Ele não pode
   ter cor de semáforo — não é bom nem ruim —, então é cinza. Sobre o branco
   do sistema claro, hachura cinza grita mais que o vermelho ao lado e a tela
   inteira lê como suja; sobre o painel #2e1847 ela recua e vira textura.

   Reusa `.faixa-pagina--escura` e os tokens `--escuro-*`, que são do SISTEMA e não
   do Dashboard — ver a regra no bloco "O PAINEL". ATENÇÃO: os tons foram medidos em
   L*, não escolhidos no olho; leia a nota longa perto de --escuro-fundo antes de
   mexer em qualquer cor daqui.
   ========================================================================= */

.qual-palco { margin-bottom: var(--space-5); }
.qual-palco__kpis {
    display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7);
    padding: var(--space-2) var(--space-4);
}
.qual-palco__kpi { min-width: 0; }
.qual-palco__num {
    font-size: 1.75rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--color-stage-text);
}
/* As variantes do sistema claro remapeadas para o que sobrevive ao fúcsia. Sem isto o verde
   #1f9d57 fica abaixo de 2:1 sobre o palco e o número some. */
.qual-palco__num--success { color: var(--escuro-ok-ate); }
.qual-palco__num--warning { color: var(--escuro-alerta-ate); }
.qual-palco__num--danger { color: var(--escuro-perigo-ate); }
.qual-palco__num--text-muted { color: var(--color-stage-muted); }
.qual-palco__rot { font-size: var(--text-sm); color: var(--color-stage-muted); }
.qual-palco__rot .dica__marca { color: var(--color-stage-brand); }

.qual-grade { display: flex; flex-direction: column; gap: var(--space-6); }

.qgr-faixa { min-width: 0; }
.qgr-faixa__head {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: var(--space-2); margin-bottom: var(--space-3);
}
.qgr-faixa__head .lucide { color: var(--escuro-apagado); }
.qgr-faixa__title { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--escuro-texto); }
.qgr-faixa__count {
    font-size: var(--text-sm); font-weight: 700; color: var(--escuro-apagado);
    font-variant-numeric: tabular-nums;
}
/* A descrição ocupa a linha inteira embaixo do título — é texto de leitura, não legenda de cabeçalho. */
.qgr-faixa__desc {
    grid-column: 1 / -1; margin: 0;
    font-size: var(--text-sm); color: var(--escuro-apagado); max-width: 88ch;
}

.qgr-cards {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.qgr-card {
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--escuro-painel); border: 1px solid var(--escuro-linha);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) var(--space-4);
    min-width: 0;
}
.qgr-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.qgr-card__nome {
    margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--escuro-texto);
    min-width: 0; overflow-wrap: anywhere;
}

.qgr-tarja {
    flex: none; border-radius: var(--radius-pill); padding: 1px var(--space-2);
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--escuro-chip); border: 1px solid var(--escuro-linha);
    white-space: nowrap;
}
.qgr-tarja--problema { color: var(--escuro-perigo-ate); }
.qgr-tarja--melhoria { color: var(--escuro-roxo-ate); }
.qgr-tarja--oferta { color: var(--escuro-alerta-ate); }
.qgr-tarja--decisao { color: var(--escuro-texto); }
.qgr-tarja--cego { color: var(--escuro-apagado); }

/* A BARRA É O TOTAL DA ABA, não o total do problema. É ela que impede o número grande de mentir:
   149 em 865 é uma coisa, 149 em 160 é outra — e até aqui a tela só mostrava o 149. */
.qgr-barra {
    display: flex; height: 8px; border-radius: var(--radius-pill);
    overflow: hidden; background: rgba(0, 0, 0, 0.28);
}
.qgr-barra__seg { display: block; height: 100%; min-width: 2px; }
.qgr-barra__seg--problema { background: var(--escuro-perigo-ate); }
.qgr-barra__seg--certo { background: var(--escuro-ok-ate); }
.qgr-barra__seg--fora { background: var(--escuro-alerta-de); }
/* O ponto cego: hachura, nunca cor. Cor plana aqui viraria um quarto sinal de semáforo, e este
   segmento é exatamente a ausência de sinal. */
.qgr-barra__seg--cego {
    background-color: rgba(157, 146, 173, 0.14);
    background-image: repeating-linear-gradient(135deg,
        rgba(196, 181, 253, 0.34) 0 2px, transparent 2px 6px);
}

.qgr-nums {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs); color: var(--escuro-apagado); font-variant-numeric: tabular-nums;
}
.qgr-nums li { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.qgr-nums b { color: var(--escuro-texto); font-weight: 700; }
/* O ponto cego é escrito SEMPRE que existe, e por último. Esconder nos cartões que já têm trabalho
   repetiria o defeito que a Central acabou de perder: número que some porque há outro maior do lado. */
.qgr-nums__cego b { color: var(--escuro-apagado); }

.qgr-chave { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.qgr-chave--problema { background: var(--escuro-perigo-ate); }
.qgr-chave--certo { background: var(--escuro-ok-ate); }
.qgr-chave--fora { background: var(--escuro-alerta-de); }
.qgr-chave--cego {
    background-color: rgba(157, 146, 173, 0.14);
    background-image: repeating-linear-gradient(135deg,
        rgba(196, 181, 253, 0.34) 0 2px, transparent 2px 5px);
}

/* O texto para em 4 linhas no cartão, para que todos tenham a mesma altura; o `title` entrega a frase
   inteira a quem passar o mouse. Mesmo tratamento do cartão antigo. */
.qgr-card__pq {
    margin: 0; font-size: var(--text-sm); color: var(--escuro-apagado);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.qgr-card__extra {
    margin: 0; font-size: var(--text-xs); color: var(--escuro-apagado);
    border-top: 1px dashed var(--escuro-linha); padding-top: var(--space-2);
}

/* ===== Experiência de compra: o texto É o conteúdo, e por isso não pode ser cortado =====
   A grade da Central de qualidade corta a explicação em 4 linhas (.qgr-card__pq), e lá isso está certo:
   o texto é apoio de um número que já diz tudo. Aqui é o contrário — o número é sempre 100 e quem conta o
   que aconteceu é a frase. Cortada em "Confirmaste a entrega...", ela esconde justamente a parte que fez o
   cartão existir.

   O PREÇO ASSUMIDO é o alinhamento: com altura livre, os cartões de uma mesma fileira deixam de terminar
   na mesma linha. Entre uma grade perfeitamente alinhada que esconde o recado e uma grade irregular que o
   mostra inteiro, a escolha não é de gosto. */
/* Os cartoes de uma mesma fileira terminam na mesma linha. Foi o pedido do dono ao ver a tela pronta, e
   ele tem razao: com altura livre, dois cartoes lado a lado de tamanhos diferentes leem como defeito, nao
   como conteudo de tamanhos diferentes. O texto continua inteiro — quem se ajusta e o espaco em branco no
   fim do cartao mais curto, nao o recado. */
.exp-textos { align-items: stretch; }

/* O corpo cresce e empurra o rodape para baixo, para os botoes de cartoes vizinhos ficarem na mesma altura
   em vez de flutuarem cada um onde o texto terminou. */
.exp-card__texto { flex: 1 1 auto; }

.exp-card__texto {
    margin: 0; font-size: var(--text-sm); color: var(--escuro-texto);
    /* Sem -webkit-line-clamp: é esta ausência que resolve o defeito. */
}

/* O que o Mercado Livre RECOMENDA é apoio, não o diagnóstico — fica um degrau abaixo no contraste, para o
   olho achar primeiro a frase que descreve o que aconteceu. */
.exp-card__recomendacao {
    margin: 0; font-size: var(--text-xs); color: var(--escuro-apagado);
    border-top: 1px dashed var(--escuro-linha); padding-top: var(--space-2);
}

/* O cartão apontado ocupa DUAS colunas: o texto dele é o mais longo da tela (é o único que descreve um
   problema em vez de negar todos) e numa coluna estreita viraria uma torre de dez linhas. Na largura de
   duas, respira. Abaixo do ponto em que a grade já é de coluna única, a regra se desfaz sozinha. */
@media (min-width: 900px) {
    .exp-card--atencao { grid-column: span 2; }
}

.qgr-card__acoes {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: auto; padding-top: var(--space-1);
}
.qgr-card__semacao { font-size: var(--text-xs); color: var(--escuro-apagado); font-style: italic; }

/* Os botões do sistema claro sobre painel escuro: o primário (roxo cheio) continua valendo, o
   secundário e o fantasma precisam de borda e texto que existam no escuro. */
.qgr-card__acoes .btn--secondary,
.qgr-card__acoes .btn--ghost,
.conversa__escrita .btn--secondary,
.conversa__cabecalho .btn--ghost,
.conversa__redacao .btn--ghost {
    background: transparent; color: var(--escuro-texto); border-color: var(--escuro-linha-forte);
}
.qgr-card__acoes .btn--secondary:hover,
.qgr-card__acoes .btn--ghost:hover,
.conversa__escrita .btn--secondary:hover,
.conversa__cabecalho .btn--ghost:hover,
.conversa__redacao .btn--ghost:hover { background: var(--escuro-chip); color: var(--escuro-texto); }

@media (max-width: 640px) {
    .qgr-cards { grid-template-columns: minmax(0, 1fr); }
    .qual-palco__kpis { gap: var(--space-3) var(--space-5); }
}

/* =========================================================================
   TELA DE ALTURA CHEIA (.tela-cheia) + A CONVERSA (.conversa)
   ---------------------------------------------------------------------
   O COCKPIT INTEIRO rola por dentro de .content (ver o bloco da rolagem própria lá em cima). Numa
   tela de conversa isso está errado: quem rola é a FILA, de um lado, e o histórico, do outro, cada
   um no seu ritmo. Se a página rolasse junto, o campo de resposta desceria para fora da vista
   justamente quando a pessoa está digitando nele.

   Por isso .tela-cheia não é enfeite: é a página declarando "eu mesma administro minha altura".
   Quem observa essa declaração é o :has() aqui embaixo — a página não tem como pôr classe no pai
   dela, e inventar JavaScript para isso seria trocar uma regra de CSS por um efeito colateral que
   precisa sobreviver à troca de tela (o mesmo defeito que derrubou as dicas — ver TOOLTIPS §7.1).

   O RODAPÉ LEGAL CONTINUA. Ele mora dentro de .content, depois do @Body, e a lei pede que os
   documentos sejam alcançáveis de qualquer tela (ver M8 no MainLayout). Aqui ele vira uma linha
   fina na última fileira, em vez de sumir.
   ========================================================================= */
.content:has(> .tela-cheia) {
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}
/* O respiro que o lançador da MAYA pede no fim do conteúdo rolável não vale aqui: nada rola.
   Mantê-lo criava uma faixa morta de 104px debaixo da conversa. */
html[data-rail="closed"] .content:has(> .tela-cheia) { padding-bottom: 0; }

/* O RODAPÉ LEGAL SAI DESTA TELA, e isto foi conferido antes de fazer — não é "sumir com a lei".
   A obrigação é os documentos serem ALCANÇÁVEIS, e eles continuam sendo: /configuracoes tem um
   cartão para cada um, e Configurações fica no nome do usuário, na barra de cima, em toda tela.
   Também estão no aceite (/aceite), no cadastro e nas telas de conta.

   POR QUE SAIR SÓ AQUI: numa tela que mede a altura da janela, cada linha embaixo é altura roubada
   do campo de escrever — e o rodapé legal é a única coisa da tela que ninguém lê enquanto responde
   pergunta. Em qualquer tela que role normalmente ele continua onde sempre esteve. */
.content:has(> .tela-cheia) .app-footer { display: none; }

.tela-cheia {
    /* FLEX, E NAO GRADE COM FILEIRAS FIXAS. A versao anterior era
       grid-template-rows: auto minmax(0, 1fr) — escrita para DOIS filhos. Em 15/09/2026, com o recado
       de 'Pergunta apagada' presente, passaram a ser tres: o recado herdou a fileira que estica, ocupou
       370px de altura vazia e empurrou a conversa para uma fileira implicita, meio para fora da tela.

       Layout que depende da QUANTIDADE de filhos quebra toda vez que alguem acrescenta um aviso no topo,
       e quebra longe de quem acrescentou. Aqui a regra e por PAPEL: tudo que vier acima ocupa a altura
       que precisa, e a conversa fica com o que sobra. */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--escuro-barra);
}
/* Faixas, recados e avisos: so a altura deles. */
.tela-cheia > * { flex: 0 0 auto; }
/* Quem come o resto da janela: a conversa, ou o vazio que ocupa o lugar dela. */
.tela-cheia > .conversa,
.tela-cheia > .conversa__nada { flex: 1 1 auto; min-height: 0; }
/* A caixa da MAYA e a ação da tela ganham o respiro que o .content perdeu. */
.tela-cheia > .screen-intro-block { padding: var(--space-3) var(--space-4) 0; }

/* A ação da tela sozinha, sem caixa em volta. Uma linha só, encostada à direita: numa tela que mede a
   altura da janela, o topo é o lugar mais caro que existe. */
.conversa__barra-acao {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

/* A FAIXA DO TOPO: abas de conta à esquerda, ação da tela à direita, na MESMA linha.
   Duas fileiras separadas custariam ~40px de altura que saem da fila e do campo de escrever. */
.conversa__topo {
    display: flex; align-items: stretch; gap: var(--space-3);
    border-bottom: 1px solid var(--escuro-linha);
}
.conversa__topo .conversa__contas { flex: 1 1 auto; min-width: 0; border-bottom: none; }
/* A ação NÃO entra na parte que rola: com muitas contas, o botão de sincronizar sairia da tela
   junto com as abas e o vendedor perderia a saída de emergência. */
.conversa__topo .conversa__barra-acao { flex: 0 0 auto; padding-right: var(--space-4); }

/* O recado de que existem outras contas conectadas que esta tela ainda não opera. Fica apagado e
   pequeno: é informação de contexto, não aviso de problema. */
.conversa__contas-nota {
    flex: 0 0 auto; align-self: center;
    font-size: var(--text-xs); color: var(--escuro-apagado);
}
.conversa__contas-nota a { color: var(--escuro-roxo-ate); }

/* ---------- A BARRA DE CONTAS ----------
   Faixa de largura inteira, acima das duas colunas: escolhe de qual loja você quer ver as perguntas.

   POR QUE AQUI E NÃO DENTRO DA FILA (era a proposta anterior): a fila tem 340px. Com quatro ou cinco
   lojas, filtros ali dentro quebram em duas ou três linhas e roubam altura justamente da lista que a
   pessoa veio olhar. Esta faixa tem a largura da tela e estava vazia.

   POR QUE ABA E NÃO PÍLULA, sendo que a fila usa pílula logo abaixo: são duas perguntas diferentes
   ("de qual loja" x "pendente ou respondida") e duas perguntas diferentes não podem ter o mesmo
   desenho — o olho leria as duas fileiras como a mesma família de filtro. A aba com risco embaixo
   também é o desenho que o sistema inteiro já usa para dizer "isto troca o conteúdo da tela".

   NÃO É O SELETOR GLOBAL. Quando existir a troca de conta acima do header, ela manda no aplicativo
   todo e esta faixa só reparte o que ela entregou: em "Geral" as abas aparecem; numa conta
   específica elas somem, porque aí não há o que filtrar. */
.conversa__contas {
    display: flex; align-items: center; gap: var(--space-1);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--escuro-linha);
    overflow-x: auto;
}
.conversa__conta-aba {
    display: inline-flex; align-items: center; gap: var(--space-2);
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-3);
    border: none; background: transparent;
    border-bottom: 2px solid transparent;
    color: var(--escuro-apagado);
    font: inherit; font-size: var(--text-sm); font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
button.conversa__conta-aba:hover { color: var(--escuro-texto); }
/* Com UMA conta conectada não existe para onde trocar, então a aba nasce como texto, não como
   botão. Um botão que não faz nada ensina o vendedor a desconfiar dos outros botões da tela. */
span.conversa__conta-aba { cursor: default; }
.conversa__conta-aba--ativa {
    color: var(--escuro-texto);
    border-bottom-color: var(--escuro-roxo-ate);
}
/* O número de pendentes. É o dado que decide qual aba clicar, então ele não pode ser um detalhe
   apagado dentro do rótulo — ganha caixa própria. */
.conversa__conta-conta {
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--escuro-chip);
    color: var(--escuro-texto);
    font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.conversa__conta-aba--ativa .conversa__conta-conta { background: var(--color-primary); }

/* ---------- As duas colunas ----------
   A fila tem largura de leitura, não de tabela: cabe foto pequena, uma linha de título e duas de
   pergunta. O painel leva o resto. minmax(0, 1fr) nas duas para que texto comprido encolha a coluna
   em vez de esticá-la — grid não encolhe abaixo do conteúdo sem isto, e essa é a causa clássica da
   barra horizontal que aparece "do nada". */
.conversa {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--escuro-linha);
}

/* ---------- Coluna da esquerda: a fila ----------
   Escura de propósito, com a mesma luz de .faixa-pagina--escura. Não é imitação do WhatsApp por
   estética: a conversa à direita é onde se lê e se escreve, e ela precisa ser a superfície mais
   clara da tela. Dois brancos lado a lado reduziriam a divisa entre fila e conversa a uma linha de
   1px — e é essa divisa que diz "isto aqui é a lista, aquilo ali é o trabalho". */
.conversa__fila {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    background: radial-gradient(120% 140% at 15% 0%, var(--escuro-fundo-topo) 0%, var(--escuro-fundo) 62%);
    color: var(--escuro-texto);
    border-right: 1px solid var(--escuro-linha-forte);
}

.conversa__filtros {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--escuro-linha);
    background: var(--escuro-barra);
}
/* Pendentes/Respondidas. Não usa .badge: o badge do sistema claro tem fundo claro, e sobre a fila
   escura ele pintava de branco justamente o filtro que NÃO está ativo — o olho lia ao contrário. */
.conversa__aba {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--escuro-linha-forte);
    font-size: var(--text-xs); font-weight: 600;
    color: var(--escuro-apagado);
    cursor: pointer;
}
.conversa__aba--ativa {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.conversa__lista { overflow-y: auto; min-height: 0; }

/* Uma pergunta. A foto é pequena porque serve para RECONHECER o anúncio, não para avaliá-lo —
   quem quer olhar o produto abre a conversa. */
.conversa__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--escuro-linha);
    border-left: var(--space-1) solid transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.conversa__item:hover { background: var(--escuro-chip); }
.conversa__item[aria-current="true"] {
    background: var(--escuro-painel);
    border-left-color: var(--escuro-roxo-ate);
}
.conversa__foto {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--escuro-chip);
}
.conversa__linha { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.conversa__anuncio {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--text-base); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* O relógio em palavras. "há 4h" cobra; "14/09 08:32" só informa — e a fila existe para cobrar. */
.conversa__espera { flex: 0 0 auto; font-size: var(--text-xs); color: var(--escuro-apagado); }
.conversa__espera--tarde { color: var(--escuro-alerta-ate); }
.conversa__previa {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm); color: var(--escuro-apagado);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* A TERCEIRA LINHA: de qual loja veio a pergunta, e quem perguntou. É esta linha que substitui a aba
   de conta dentro da fila — com várias contas ligadas, saber a origem sem clicar é o que impede a
   resposta sair pela loja errada. Menor e mais apagada que as duas de cima de propósito: ela se
   confere de relance, não se lê. */
.conversa__origem {
    display: flex; align-items: center; gap: var(--space-2);
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs); color: var(--escuro-apagado);
    min-width: 0;
}
.conversa__conta { font-weight: 600; white-space: nowrap; }
/* O comprador cede espaço primeiro: numa fila apertada, perder o nome da loja é perigoso, perder o
   número do comprador não muda nada. */
.conversa__comprador { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.conversa__comprador::before { content: "·"; margin-right: var(--space-2); }

/* O contador de perguntas da conversa. Só aparece quando é conversa mesmo (2 ou mais): escrever
   "1 pergunta" em toda linha seria ruído em cima do caso comum. */
.conversa__quantas {
    flex: 0 0 auto;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--escuro-chip);
    color: var(--escuro-texto);
    font-weight: 600;
}

/* O buraco na conversa quando o ML removeu a pergunta E o texto dela. Acontece de verdade: 2 das 52
   perguntas de producao estao assim. Um balao vazio pareceria defeito nosso. */
.conversa__removida {
    align-self: center;
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--escuro-linha-forte);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs); color: var(--escuro-apagado);
}
.conversa__removida .lucide { color: var(--escuro-alerta-ate); flex: 0 0 auto; }

/* DIVISOR DE DATA — a única classe que o Atendimento acrescentou ao vocabulário da conversa.
   Não existe em Perguntas de propósito: lá o fio dura minutos (o caso que motivou aquela tela foram 5
   perguntas em 52 minutos), e um divisor por dia não separaria nada. No pós-venda a conversa acompanha o
   ciclo do pedido e dura dias ou semanas — sem ele, "há 6h" e "há 9 dias" ficam colados e o vendedor lê a
   conversa errada.
   A linha atravessa a largura e o rótulo mora no meio dela; nenhuma cor nova, só tokens. */
.conversa__dia {
    align-self: stretch;
    display: flex; align-items: center; gap: var(--space-3);
    margin: var(--space-2) 0;
    font-size: var(--text-xs); color: var(--escuro-apagado);
}
.conversa__dia::before,
.conversa__dia::after {
    content: ""; flex: 1 1 auto;
    border-top: 1px solid var(--escuro-linha-forte);
}

/* Interruptor do ENSAIO. Não é peça do produto: vive só enquanto /dev/conversa existir. */
.conversa__ensaio {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-left: auto;
    font-size: var(--text-xs); color: var(--escuro-apagado);
    cursor: pointer;
}

/* ---------- Coluna da direita: a conversa ---------- */
.conversa__painel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    background: var(--escuro-painel);
    color: var(--escuro-texto);
}

/* O cabeçalho NÃO é o comprador, é o anúncio — com preço e estoque. A maioria das perguntas é
   "tem?" e "quanto sai?", e o vendedor que precisa abrir outra aba para responder isso já perdeu.
   Os três dados saem do snapshot que já temos em Listing: nenhuma chamada nova à API. */
.conversa__cabecalho {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--escuro-linha);
    background: var(--escuro-barra);
}
.conversa__cabecalho-foto {
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: var(--radius-sm); object-fit: cover; background: var(--escuro-chip);
}
.conversa__cabecalho-texto { min-width: 0; flex: 1 1 auto; }
.conversa__cabecalho-titulo {
    margin: 0; font-size: var(--text-base); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conversa__cabecalho-dados {
    margin: var(--space-1) 0 0;
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm); color: var(--escuro-apagado);
}
.conversa__cabecalho-dados b { color: var(--escuro-texto); font-variant-numeric: tabular-nums; }

/* DE QUEM VEIO A PERGUNTA, no espaço vazio do cabeçalho. O cabeçalho respondia só "qual anúncio";
   faltava "quem perguntou e para qual loja". Repetir a loja aqui em cima não é excesso: é o segundo
   ponto de conferência antes de escrever — o primeiro é a fila, o terceiro é o "Respondendo como"
   na hora de enviar. Responder pela loja errada é público e não tem volta. */
.conversa__cabecalho-origem {
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1);
    flex: 0 0 auto;
    font-size: var(--text-sm); color: var(--escuro-apagado);
    text-align: right;
}
.conversa__cabecalho-origem strong { color: var(--escuro-texto); font-weight: 600; }
.conversa__cabecalho-loja { display: inline-flex; align-items: center; gap: var(--space-2); }

/* O CHAO DA CONVERSA E A FAIXA DO RADAR, e os balões são as caixas dele.
   ---------------------------------------------------------------------
   Não é escolha de gosto: o Radar do Dashboard já resolveu este problema. Lá, a faixa
   (--escuro-painel) é o fundo e as caixas claras por cima são o conteúdo. Aqui vale a mesma
   gramática — chão escuro, mensagem por cima — então reusar os tons dele é o que impede a
   conversa de virar uma terceira linguagem visual dentro do mesmo produto.

   A ESCADA DE PROFUNDIDADE, do mais fundo ao mais perto (é ela que faz a tela ser legível):
     fila (esquerda)  #0b0314 -> #1d0d33   o lugar mais escuro: lista, não leitura
     chão da conversa #2e1847              a faixa do Radar
     balão do comprador #3d2260            um degrau acima do chão, por isso "flutua"
     balão da loja      fúcsia             material diferente, não só tom diferente

   O FÚCSIA AQUI NÃO QUEBRA A REGRA do bloco do palco ("fúcsia é superfície, nunca ação"): balão é
   superfície. Quem continua dizendo "isto é clicável" é --color-primary, e o botão Enviar segue roxo.

   É TAMBÉM O CHÃO PREVISTO PARA A MARCA D'ÁGUA (como no WhatsApp): o padrão vai desenhado por cima
   desta cor, e por isso ela é chapada — degradê embaixo de padrão vira sujeira. */
.conversa__historico,
.conversa__painel--vazio {
    background-color: var(--escuro-painel);
    background-image:
        url("assets/conversa-marketplace-pattern.svg"),
        url("assets/conversa-marketplace-pattern.svg");
    background-position:
        0 0,
        var(--escuro-marca-dagua-deslocamento-x) var(--escuro-marca-dagua-deslocamento-y);
    background-repeat: repeat;
    background-size: var(--escuro-marca-dagua-ladrilho) var(--escuro-marca-dagua-ladrilho);
    /* O padrão fica preso ao painel enquanto as mensagens rolam. Se ele acompanhasse o conteúdo,
       os desenhos virariam movimento sem função atrás do texto e cansariam a leitura. */
    background-attachment: scroll;
}

.conversa__historico {
    overflow-y: auto; min-height: 0;
    padding: var(--space-5) var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3);
    color: var(--escuro-texto);
}

/* Os balões. Um da pergunta, um da resposta, e acabou — no Mercado Livre não existe ida e volta.
   Por isso eles não tentam parecer um fio de conversa infinita. */
.balao {
    max-width: min(80%, 620px);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-base); line-height: 1.5;
    box-shadow: var(--shadow-sm);
}
.balao--comprador {
    align-self: flex-start;
    background: var(--escuro-chip);
    border: 1px solid var(--escuro-linha);
    color: var(--escuro-texto);
    border-bottom-left-radius: var(--radius-sm);
}
/* O fúcsia do palco da MAYA. Separa-se do roxo da fila por MATERIAL, não por tom (56° de matiz) —
   é o único escuro do sistema que consegue isso, e é justamente o que a resposta da loja precisa:
   ela não é "mais uma mensagem", é a única coisa na tela que saiu de você. */
.balao--loja {
    align-self: flex-end;
    background: var(--color-stage-from);
    border: 1px solid var(--color-stage-line);
    color: var(--color-stage-text);
    border-bottom-right-radius: var(--radius-sm);
}
.balao__quem {
    display: block; margin-bottom: var(--space-1);
    font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--escuro-apagado);
}
/* Medido no bloco do palco: #edc4dc dá 5,58:1 no ponto MAIS CLARO do fúcsia (#8c1a5e). */
.balao--loja .balao__quem { color: var(--color-stage-muted); }
.balao__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.balao__quando { display: block; margin-top: var(--space-1); font-size: var(--text-xs); opacity: 0.75; }

/* ---------- O campo de resposta ---------- */
/* SEM FAIXA PRÓPRIA. O chão da conversa desce inteiro até o fim da coluna e o campo flutua sobre
   ele — como no WhatsApp. A barra que existia aqui cortava a tela numa altura em que nada acaba:
   a conversa continua, só mudou de ser lida para ser escrita.

   A RESERVA PARA O LANÇADOR DA MAYA SAIU daqui a pedido do dono (14/09), que vai tratar o boneco
   depois. Consequência enquanto isso: o ícone de enviar nasce embaixo da plaquinha dela. Não é
   descuido — é dívida conhecida, e quem mexer aqui antes disso precisa saber. */
.conversa__redacao {
    padding: var(--space-3) var(--space-4) var(--space-2);
    background: transparent;
}

/* A faixa que não pode sumir: no ML a resposta é pública e vale uma vez só. Num layout que parece
   aplicativo de mensagem, esse aviso é o que impede a pessoa de escrever como escreve no WhatsApp. */
.conversa__selo {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}
/* O âmbar da tela clara (#845e0b) é ESCURO: sobre a barra ele praticamente sumia, e justamente
   o aviso de "isto é público e não dá para desfazer" não pode ser a coisa menos visível da tela.
   O par escuro do mesmo âmbar dá 10,4:1 sobre o painel (medido no bloco da zona escura). */
.conversa__aviso {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--escuro-alerta-ate);
}
.conversa__aviso .lucide { flex: 0 0 auto; }

/* Fica na MESMA linha do aviso. Empilhados, os dois recados comiam 40px de altura do campo de
   escrita — e altura no rodape da conversa e o que separa ''caixa de mensagem'' de ''formulario''. */
.conversa__quem {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-left: auto;
    color: var(--escuro-apagado);
}
/* A marca da conta. Repetida na fila e aqui: é o que vai substituir a aba de conta quando houver
   várias, e é a única defesa contra responder pela loja errada — erro público e sem volta. */
.conversa__marca {
    width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill);
    background: var(--escuro-roxo-ate); flex: 0 0 auto;
}

.conversa__escrita {
    display: flex; align-items: flex-end; gap: var(--space-2);
    margin-top: var(--space-2);
}

/* A CAIXA DO CAMPO.
   A moldura (fundo, borda, canto) é DELA, não do <textarea>. É isso que permite o ícone de enviar morar
   numa coluna própria à direita, parecendo dentro do campo sem nunca disputar espaço com ele.

   O DEFEITO QUE ISTO CONSERTA (15/09/2026, visto em produção): com o ícone posicionado por cima do
   textarea, uma resposta longa fazia aparecer a barra de rolagem — bem embaixo do botão. O único botão
   irreversível da tela ficava em cima da barra que a pessoa precisava arrastar. */
.conversa__campo {
    flex: 1 1 auto; min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    background: var(--escuro-chip);
    border: 1px solid var(--escuro-linha-forte);
    border-radius: var(--radius-lg);
}

/* O CAMPO CRESCE COM O TEXTO, em vez de rolar dentro de duas linhas.
   O truque é o pseudo-elemento: ele recebe o MESMO texto (via data-texto) e ocupa a mesma célula do
   grid, invisível. Quem estica a caixa é ele; o textarea só acompanha a altura. Sem JavaScript — e sem
   JavaScript é o ponto: altura calculada em script se perde quando o Blazor remonta o componente.

   TUDO que afeta quebra de linha tem de ser IDÊNTICO nos dois, senão as alturas divergem e o campo
   ganha um degrau. Por isso a fonte, a entrelinha e a quebra estão declaradas para os dois juntos.
   `break-word` não é detalhe: a resposta real que revelou o problema era um link do Mercado Livre de
   400 caracteres sem um espaço. */
.conversa__cresce {
    display: grid;
    /* O teto existe para a conversa não sumir atrás do campo. Passando disto, aí sim rola — mas a barra
       nasce nesta coluna, longe do botão. */
    max-height: 40vh;
    overflow-y: auto;
}
.conversa__cresce::after {
    content: attr(data-texto) " ";
    visibility: hidden;
}
.conversa__cresce > textarea,
.conversa__cresce::after {
    grid-area: 1 / 1;
    margin: 0; padding: 0; border: 0;
    font: inherit; font-size: var(--text-base); line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}
.conversa__cresce > textarea {
    background: transparent;
    color: var(--escuro-texto);
    resize: none;
    overflow: hidden;
    outline: none;
    min-height: calc(var(--text-base) * 1.5);
}
.conversa__cresce > textarea::placeholder { color: var(--escuro-apagado); }

/* O ENVIAR SÓ EXISTE QUANDO HÁ O QUE ENVIAR. Botão aceso com o campo vazio é um convite a clicar
   sem ter escrito nada; e num envio público e sem volta, o botão não deve estar ali antes da hora. */
.conversa__enviar {
    align-self: end;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: none; border-radius: var(--radius-pill);
    background: var(--color-primary); color: var(--color-primary-contrast);
    cursor: pointer;
}
.conversa__enviar:hover:not(:disabled) { background: var(--color-primary-hover); }
.conversa__enviar:disabled { opacity: 0.6; cursor: default; }
/* ---------- A CITAÇÃO: o campo diz o que está respondendo ----------
   Sem isto, numa conversa com duas perguntas em aberto, o campo é um retângulo mudo — e a resposta da
   pergunta A vai para a pergunta B sem ninguém perceber. No Mercado Livre isso é público e sem volta.
   Desenhada como a citação de mensagem do WhatsApp: barra colorida à esquerda e o texto citado apagado. */
.conversa__citacao {
    display: flex; align-items: center; gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-left: var(--space-1) solid var(--escuro-roxo-ate);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--escuro-chip);
    font-size: var(--text-xs);
    min-width: 0;
}
.conversa__citacao-rotulo { flex: 0 0 auto; color: var(--escuro-apagado); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
/* Uma linha só: a pergunta inteira está logo acima, no balão. Aqui ela serve para identificar, não para ler. */
.conversa__citacao-texto {
    flex: 1 1 auto; min-width: 0;
    color: var(--escuro-texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conversa__citacao-troca { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--escuro-apagado); }
.conversa__citacao-troca button {
    border: 1px solid var(--escuro-linha-forte); background: transparent; color: var(--escuro-texto);
    border-radius: var(--radius-sm); cursor: pointer; line-height: 1;
    padding: 0 var(--space-2); font-size: var(--text-base);
}
.conversa__citacao-troca button:hover { background: var(--escuro-painel); }

/* ---------- Uma resposta para as outras em aberto ----------
   Ação de risco: o mesmo texto vira várias respostas públicas. Por isso nasce desmarcada, e marcar
   ABRE a lista de quem vai receber — decidir sem ver quem recebe é como assinar sem ler. */
.conversa__todas {
    margin: 0 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--escuro-linha-forte);
    border-radius: var(--radius-md);
    font-size: var(--text-xs); color: var(--escuro-texto);
}
.conversa__todas label { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
/* A dica aparece só quando os textos são IGUAIS depois de normalizados. Ela sugere; quem marca é o vendedor. */
.conversa__todas-dica { margin-left: var(--space-2); color: var(--escuro-alerta-ate); }
.conversa__todas-lista {
    margin: var(--space-2) 0 0; padding-left: var(--space-5);
    color: var(--escuro-apagado);
}
.conversa__todas-lista li { margin-bottom: var(--space-1); }

/* ---------- O buraco no fio ----------
   Pergunta sem resposta precisa parecer diferente de pergunta respondida. Antes disto, rolar a conversa
   e contar de cabeça era a única forma de saber o que faltava. */
.balao--aguardando { border-color: var(--escuro-alerta-ate); }
.balao__aguardando {
    display: inline-block; margin-left: var(--space-2);
    padding: 0 var(--space-2); border-radius: var(--radius-pill);
    background: var(--escuro-painel); color: var(--escuro-alerta-ate);
    font-weight: 600;
}
/* O balão que o campo está mirando agora. Liga visualmente a citação lá embaixo à pergunta aqui em cima. */
.balao--mirado { box-shadow: 0 0 0 2px var(--escuro-roxo-ate); }
/* APAGAR: a acao mais perigosa da conversa, e por isso a menos chamativa.
   Ela nao compete com responder — responder e o caminho normal. O botao e texto pequeno e apagado, e o
   vermelho so aparece ao passar o mouse, quando a intencao ja existe. Quem confirma e o dialogo. */
.balao__apagar {
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid var(--escuro-linha-forte);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--escuro-apagado);
    font: inherit; font-size: var(--text-xs);
    cursor: pointer;
}
.balao__apagar:hover:not(:disabled) { color: var(--escuro-perigo-ate); border-color: var(--escuro-perigo-ate); }
.balao__apagar:disabled { opacity: 0.5; cursor: default; }

/* No dialogo, a pergunta que vai sumir aparece INTEIRA e em destaque. E a ultima chance de perceber que
   e a pergunta errada, e um trecho cortado nao serviria para isso. */
.conversa__apagar-texto {
    margin: var(--space-3) 0;
    padding: var(--space-2) var(--space-3);
    border-left: var(--space-1) solid var(--color-danger);
    background: var(--color-surface-2);
    font-size: var(--text-base); color: var(--color-text);
    overflow-wrap: anywhere;
}


/* ---------- O painel sem nada escolhido ----------
   Sem isto o vazio cairia na primeira das três fileiras do painel (cabeçalho/histórico/redação) e
   ficaria colado no topo, num retângulo de 600px de altura vazia embaixo. */
.conversa__painel--vazio { grid-template-rows: minmax(0, 1fr); }

/* ---------- Recado da tela (enviada, sincronizada, já respondida no ML) ----------
   Fica na faixa de cima, não dentro da conversa: é resposta a uma AÇÃO da pessoa, não conteúdo. */
.conversa__recado {
    margin: 0; padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm); color: var(--escuro-texto);
    border-left: var(--space-1) solid var(--escuro-ok-ate);
    background: var(--escuro-painel);
}
.conversa__recado--ruim { border-left-color: var(--escuro-perigo-ate); }

/* ---------- Alertas do envio ----------
   Moram DENTRO da área de escrever, acima do campo, porque é ali que a pessoa está olhando quando o
   texto é recusado. Alerta no topo da tela seria um aviso fora do campo de visão. */
.conversa__alerta {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--text-sm);
    color: var(--escuro-texto);
    background: var(--escuro-painel);
}
.conversa__alerta ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.conversa__alerta--atencao { border-color: var(--escuro-alerta-ate); }
.conversa__alerta--perigo { border-color: var(--escuro-perigo-ate); }
.conversa__alerta--perigo .btn { margin-top: var(--space-2); }

/* Encerrar/reabrir sem responder: o botão e a frase que diz o que acontece, na mesma linha. Dentro do
   alerta de confirmação, a mesma classe alinha os dois botões. */
.conversa__fecho {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--text-xs); color: var(--escuro-apagado);
}

/* A nota do rascunho da IA e o recado de pergunta já fechada. */
.conversa__nota {
    display: flex; align-items: center; gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs); color: var(--escuro-apagado);
}
.conversa__nota--fechada { margin: 0; font-size: var(--text-sm); }
.conversa__nota .lucide { flex: 0 0 auto; color: var(--escuro-ok-ate); }
/* Pergunta removida ou encerrada SEM resposta não pode levar o visto verde de "feito": o verde diria
   que deu tudo certo, e ninguém respondeu nada. */
.conversa__nota--sem-resposta .lucide { color: var(--escuro-alerta-ate); }

/* O seletor de resposta rápida vive na barra escura: o .select do sistema claro nasce branco. */
.select--escuro {
    background: var(--escuro-chip);
    border-color: var(--escuro-linha-forte);
    color: var(--escuro-texto);
    font-size: var(--text-xs);
    max-width: 180px;
}

/* ---------- Vazios ---------- */
.conversa__nada {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-2); height: 100%;
    padding: var(--space-6);
    text-align: center; color: var(--escuro-apagado);
}

/* ---------- Estreito ----------
   Abaixo de 860px o painel da MAYA já ocupa a tela toda, e duas colunas de conversa não cabem.
   A fila vira a tela inteira e a conversa entra por cima quando uma pergunta é escolhida — o mesmo
   que o WhatsApp faz no celular. Quem liga .conversa--aberta é a pergunta escolhida. */
@media (max-width: 860px) {
    .conversa { grid-template-columns: minmax(0, 1fr); }
    .conversa__painel { display: none; }
    .conversa--aberta .conversa__fila { display: none; }
    .conversa--aberta .conversa__painel { display: grid; }
    .balao { max-width: 92%; }
}

/* ---------------------------------------------------------------------------
   Faixa de lojas — a escolha de em qual loja o vendedor está trabalhando.

   Fica ACIMA do cabeçalho de propósito: o risco que ela existe para evitar é
   agir na loja errada, e um indicador no meio da tela some da vista. Aqui ele
   é a primeira coisa antes de qualquer conteúdo.

   Desde 28/09/2026 aparece para TODO vendedor logado, mesmo com uma loja só (pedido do dono): ela recebeu
   o login e o sair que ocupavam o cabeçalho, e o cabeçalho ganhou a largura para o "Atualizar loja".
   --------------------------------------------------------------------------- */
.barra-contas {
    display: flex; align-items: stretch; gap: var(--space-3);
    height: var(--barra-contas-height);
    padding-right: var(--space-4);
    background: var(--escuro-fundo);
}
/* O login e o sair, à direita da faixa. Os mesmos do cabeçalho de antes, só que sem a borda: numa faixa de
   36px a pílula contornada pesava mais que as próprias lojas. */
.barra-contas .topnav__user, .barra-contas .topnav__logout { align-self: center; border-color: transparent; font-size: var(--text-xs); }
.barra-contas .topnav__user { color: var(--escuro-apagado); }

.faixa-lojas {
    flex: 1 1 auto; min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    /* SEM RECUO À ESQUERDA desde 28/09/2026 (pedido do dono): a aba da loja nasce colada na borda da tela,
       com o sublinhado amarelo junto. O nome não encosta porque cada aba tem o próprio respiro. */
    padding: 0 var(--space-4) 0 0;
    /* MAIS FUNDA QUE O CABEÇALHO (que é #241136), e não mais clara. A faixa é o contexto que contém tudo o
       que vem abaixo — em que loja você está —, e camada mais funda lê como "mais atrás", que é exatamente
       a relação. Duas barras escuras em degraus dão a profundidade; uma barra clara em cima de uma escura
       daria a impressão de dois aplicativos empilhados. */
    background: var(--escuro-fundo);
    color: var(--escuro-apagado);
    /* Uma linha, sempre. Com muitas lojas a faixa rola na horizontal em vez de quebrar: altura que muda
       conforme o número de lojas empurraria o conteúdo de TODAS as telas para baixo sem o vendedor
       entender por quê. O teto com "+N lojas" ainda não existe — está no plano. */
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.faixa-lojas__aba {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    color: var(--escuro-apagado);
    text-decoration: none;
    /* A barra de "aqui" é uma borda que já existe transparente em todas as abas: assim a aba selecionada
       não muda de altura ao ser escolhida, e a faixa não estremece quando o vendedor troca de loja. */
    border-bottom: 3px solid transparent;
}

.faixa-lojas__aba:hover { color: var(--escuro-texto); background: rgba(255, 255, 255, 0.04); }

/* ---------- DOIS SINAIS, DOIS CANAIS ----------

   Esta faixa precisa responder duas perguntas ao mesmo tempo, e elas brigam se usarem o mesmo recurso:

   1. QUAL É O LUGAR PRINCIPAL?  → o "GERAL", sempre, esteja ele escolhido ou não.
   2. ONDE EU ESTOU AGORA?       → muda a cada clique.

   Se o destaque do "GERAL" fosse a cor, ele gritaria mesmo quando o vendedor estivesse DENTRO de uma loja
   — apontando para o lugar errado, que é o oposto do que a faixa existe para fazer.

   Então: a HIERARQUIA vem da forma (tamanho, caixa alta, espaçamento, o traço que o separa das lojas) e é
   permanente. A SELEÇÃO vem da cor (o amarelo) e é móvel. Os dois se leem juntos sem disputa. */

.faixa-lojas__aba--geral {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Ganhou respiro à esquerda quando a faixa perdeu o recuo (28/09/2026): antes o recuo era da faixa. */
    padding-left: var(--space-3);
    padding-right: var(--space-4);
    color: var(--escuro-texto);
}

/* UM traço, depois do "GERAL", e não um entre cada loja. O que precisa ser separado aqui são os dois
   NÍVEIS — "tudo junto" de um lado, "uma loja" do outro. Um risco entre cada aba seria enfeite repetido,
   e gastaria a largura que as lojas vão precisar. A folga entre as lojas faz o resto do trabalho. */
.faixa-lojas__divisor {
    flex: 0 0 auto;
    width: 1px;
    margin: var(--space-2) var(--space-3) var(--space-2) 0;
    background: rgba(255, 255, 255, 0.14);
}

/* A LOJA ATUAL. A barra amarela é o sinal principal, mas nunca o único: o texto também acende e engrossa.
   Cor sozinha falha para quem não a percebe bem — e falha numa captura de tela em preto e branco, que é
   como um problema costuma chegar para quem vai investigar. */
.faixa-lojas__aba--atual {
    color: var(--escuro-texto);
    font-weight: 600;
    border-bottom-color: var(--faixa-lojas-aqui);
    background: rgba(255, 255, 255, 0.06);
}

/* OS DOIS CANAIS SE CRUZAM AQUI, e sem esta linha o cruzamento dá errado: a regra de seleção acima engrossa
   o texto para 600, o que é um GANHO numa aba de loja (que é 400) e uma PERDA no "GERAL" (que é 700). Sem
   isto, escolher o Geral o deixava mais leve do que quando não estava escolhido — exatamente ao contrário.
   Peso é o canal da hierarquia; a seleção fala pela cor. */
.faixa-lojas__aba--geral.faixa-lojas__aba--atual { font-weight: 700; }

/* O PONTO DE IDENTIDADE DA LOJA. As cinco cores já existiam no projeto desde a zona escura, criadas para
   isto e nunca usadas — o comentário delas cita "a aba no topo" com todas as letras.

   Ele faz um trabalho que o amarelo NÃO faz: o amarelo diz *onde estou*, a cor da loja diz *que loja é
   essa*. Como ela se repete em todo lugar onde a conta aparece, o vendedor aprende a loja pela cor antes
   de ler o nome — e é isso que protege de agir na conta errada. Identidade, nunca status. */
.faixa-lojas__ponto {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-da-loja, var(--escuro-apagado));
}

.faixa-lojas__nome { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* O "Conectar outra conta" no fim da faixa (desde 28/09/2026). Amarelo da marca, como em Integrações, mas
   baixo — do tamanho da faixa, para ela não crescer por causa dele. Encostado na direita: é a saída da
   fileira, não mais uma aba. */
.faixa-lojas__conectar {
    flex: 0 0 auto; align-self: center;
    margin-left: auto;
    padding: 2px var(--space-3);
    font-size: 12px;
}
/* No celular não cabe: a loja, o botão e o login disputam 375px, e o botão saía cortado no meio da palavra.
   Ele some SÓ daqui — continua na tela de Integrações, e acrescentar loja pelo celular é raro. */
@media (max-width: 560px) {
    .faixa-lojas__conectar { display: none; }
}

/* Loja que precisa reconectar. Um "!" em texto, e não só uma cor, pelo mesmo motivo da aba atual. O tom
   claro da paleta escura, porque o vermelho do tema claro fica ilegível sobre este fundo. */
.faixa-lojas__alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--escuro-perigo-ate);
    color: var(--escuro-fundo);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================================
   CATÁLOGO — a disputa pela vitrine (docs/design/CATALOGO_UX.md)
   Fila + mesa de decisão. De propósito NÃO é faixa de largura inteira nem grade de cartões: o esqueleto é duas
   colunas, lista e painel fixo. Tema claro com zonas escuras (DESIGN_SYSTEM): violeta escuro só na barra dos grupos,
   fúcsia só no veredito, o resto claro. Nenhum valor fora dos tokens.
   ========================================================================= */

.vitrine-topo {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    flex-wrap: wrap; margin-bottom: var(--space-3);
}
.vitrine-topo__leitura { font-size: var(--text-sm); color: var(--color-text-muted); }
.vitrine-recado { margin: 0 0 var(--space-3); }

/* A barra dos grupos: violeta escuro das zonas --escuro-*, porque é aqui que o vendedor escolhe o que decidir. */
/* Seletor de fila em barra escura: nasceu na vitrine do Catálogo e foi PROMOVIDO em 26/09/2026 para a central de
   pedidos (abas por etapa). Os dois nomes valem; tela nova usa .seletor-de-fila. */
.vitrine-grupos, .seletor-de-fila {
    display: flex; gap: var(--space-2); overflow-x: auto;
    padding: var(--space-2);
    background: radial-gradient(120% 140% at 15% 0%, var(--escuro-fundo-topo) 0%, var(--escuro-fundo) 62%);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}
.vitrine-grupos__item, .seletor-de-fila__item {
    display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent; border-radius: var(--radius-md);
    background: transparent; color: var(--escuro-apagado);
    font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.vitrine-grupos__item:hover, .seletor-de-fila__item:hover { color: var(--escuro-texto); background: var(--escuro-marca-dagua); }
.vitrine-grupos__item--ativo, .seletor-de-fila__item--ativo { background: var(--escuro-chip); color: var(--escuro-texto); border-color: var(--escuro-linha-forte); }
.vitrine-grupos__n, .seletor-de-fila__n {
    min-width: 1.75em; padding: 0 var(--space-1); border-radius: var(--radius-pill);
    background: var(--escuro-painel); color: var(--escuro-texto); font-size: var(--text-xs); text-align: center;
}

/* Urgência dentro da aba ("1 atrasado", "2 hoje"): contorno, não bloco de cor, para não competir com a aba ativa.
   Mesmo desenho do aviso do cartão de loja; perigo e alerta com os tons próprios de fundo escuro. */
.seletor-de-fila__alerta {
    font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
    color: var(--escuro-alerta-ate); border: 1px solid var(--escuro-alerta-de);
    border-radius: var(--radius-pill); padding: 0 var(--space-2);
}
.seletor-de-fila__alerta--perigo { color: var(--escuro-perigo-ate); border-color: var(--escuro-perigo-de); }

/* Linha de tabela operacional com gravidade (pedido atrasado, vence hoje). Mesma tinta do Dashboard; o sinal forte
   continua no texto do prazo. */
.data-table tbody tr.row--danger > td { background: var(--color-danger-row); }
.data-table tbody tr.row--warn > td { background: var(--color-warning-row); }
.data-table tbody tr.row--danger:hover > td { background: var(--color-danger-row-hover); }
.data-table tbody tr.row--warn:hover > td { background: var(--color-warning-row-hover); }
.prazo--atrasado { color: var(--color-danger-emphasis); font-weight: 600; white-space: nowrap; }
.prazo--hoje { color: var(--color-warning); font-weight: 600; white-space: nowrap; }

/* Linha de resumo da central de pedidos: texto, não cartões. */
.resumo-vendas { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.resumo-vendas strong { color: var(--color-text); font-weight: 600; }
.resumo-vendas__sobe { color: var(--color-success); }
.resumo-vendas__desce { color: var(--color-danger-emphasis); }

/* ---- Painel lateral (drawer) — componente PainelLateral, nascido na central de pedidos em 26/09/2026 ----
   Abre por cima, abaixo da barra do topo; o véu fecha ao clicar. Acima do painel da Maya (70) e do sino (200),
   abaixo da barra do topo (300). No celular ocupa a largura toda. */
.painel-lateral__fundo { position: fixed; inset: var(--topo-do-conteudo) 0 0 0; background: var(--color-scrim); z-index: 250; }
.painel-lateral {
    position: fixed; top: var(--topo-do-conteudo); right: 0; bottom: 0; z-index: 251;
    width: min(480px, 100%); display: flex; flex-direction: column; outline: none;
    background: var(--color-surface); border-left: 1px solid var(--color-border-strong); box-shadow: var(--shadow-lg);
}
.painel-lateral__cabeca {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border);
}
.painel-lateral__titulo { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.painel-lateral__titulo h2 { margin: 0; font-size: var(--text-lg); }
.painel-lateral__acoes { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.painel-lateral__corpo { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }

/* Seções do painel do pedido. */
.detalhe-secao { display: flex; flex-direction: column; gap: var(--space-2); }
/* Parágrafo e lista dentro da seção já ganham o espaço do gap; a margem padrão do navegador dobrava. */
.detalhe-secao > p, .detalhe-secao > ul { margin: 0; }
.detalhe-secao > ul { padding-left: var(--space-5); }
.detalhe-secao__titulo { margin: 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); }
.detalhe-secao__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.detalhe-atalhos { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* A conta da venda no painel do pedido: rótulo à esquerda, valor à direita, total em destaque. */
.conta-da-venda { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--text-sm); }
.conta-da-venda dt { color: var(--color-text-muted); }
.conta-da-venda dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* Variante para frases (motivo, pedido do comprador): o rótulo não pode ser espremido pelo texto longo. */
.conta-da-venda--texto { grid-template-columns: minmax(9rem, auto) 1fr; }
.conta-da-venda--texto dd { text-align: left; }
.conta-da-venda__total { padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-weight: 600; color: var(--color-text); }
.conta-da-venda__total--lucro { color: var(--color-success); }
.conta-da-venda__total--prejuizo { color: var(--color-danger-emphasis); }

/* Linha do tempo do envio: um ponto por passo, a data à direita. */
.linha-do-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.linha-do-tempo__passo { display: grid; grid-template-columns: var(--space-3) 1fr auto; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); }
.linha-do-tempo__ponto { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--color-primary); }
.linha-do-tempo__quando { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A linha da tabela abre o painel; a aberta fica marcada com a tinta de "escolhido" (DESIGN_SYSTEM). */
.data-table tbody tr.linha-clicavel { cursor: pointer; }
.data-table tbody tr.linha--aberta > td { background: var(--color-primary-tint); }
.data-table tbody tr.linha--aberta > td:first-child { box-shadow: inset 4px 0 0 var(--color-primary); }
.pedido-numero { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-align: left; }
.pedido-numero:hover { text-decoration: underline; }

/* Título do item vendido em uma linha: a coluna de itens não pode empurrar o prazo para fora da tela. */
.pedido-item__titulo { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vitrine { display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr); gap: var(--space-4); align-items: start; }

.vitrine-fila { padding: 0; overflow: hidden; }
.vitrine-fila__lista { list-style: none; margin: 0; padding: 0; }
.vitrine-fila__lista li + li { border-top: 1px solid var(--color-border); }
.vitrine-fila__vazio { padding: var(--space-6); }
.vitrine-busca {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.vitrine-busca .input { flex: 1 1 auto; min-width: 0; }
.vitrine-busca__total { font-size: var(--text-xs); white-space: nowrap; }
.vitrine-linha__grupo {
    display: inline-block; margin-right: var(--space-2); padding: 0 var(--space-2);
    border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text);
}

/* A linha ESCOLHIDA fala por quatro sinais, porque só um fundo claro sobre branco some em tela apagada (print do
   dono, 25/09/2026): fundo violeta (--color-primary-tint), barra violeta à esquerda, título em negrito e a seta
   apontando para a mesa. O hover usa só o fundo leve e a seta apagada — o bastante para dizer "esta também abre". */
.vitrine-linha {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3);
    width: 100%; text-align: left;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface); border: 0; border-left: 4px solid transparent;
    font: inherit; color: var(--color-text); cursor: pointer;
}
.vitrine-linha__corpo { display: grid; gap: var(--space-1); min-width: 0; }
.vitrine-linha__seta { display: inline-flex; color: var(--color-text-muted); opacity: 0; }
.vitrine-linha:hover { background: var(--color-row-hover); }
.vitrine-linha:hover .vitrine-linha__seta { opacity: 0.6; }
.vitrine-linha:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.vitrine-linha--ativa, .vitrine-linha--ativa:hover { background: var(--color-primary-tint); border-left-color: var(--color-primary); }
.vitrine-linha--ativa .vitrine-linha__titulo { font-weight: 700; }
.vitrine-linha--ativa .vitrine-linha__seta { opacity: 1; color: var(--color-primary); }
.vitrine-linha__modalidade {
    display: inline-block; margin-right: var(--space-2); padding: 0 var(--space-2);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text);
}
.vitrine-linha__titulo { font-size: var(--text-sm); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vitrine-linha__meta { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.vitrine-linha__dif { font-weight: 600; color: var(--color-text); }

/* A mesa acompanha a rolagem da fila: a decisão fica à vista enquanto se percorre a lista. */
.vitrine-mesa {
    position: sticky; top: var(--space-4); display: grid; gap: var(--space-3);
    /* Nunca mais alta que a tela: a mesa fixa que passa da dobra esconde o próprio fim até a fila acabar. */
    max-height: calc(100vh - var(--topo-do-conteudo) - var(--space-6)); overflow-y: auto;
}
.vitrine-mesa__vazia { padding: var(--space-6); }
.vitrine-mesa__voltar { display: none; justify-self: start; }

.vitrine-veredito { color: var(--color-stage-text); padding: var(--space-4) var(--space-5); }
.vitrine-veredito__anuncio { margin: 0; font-size: var(--text-sm); }
.vitrine-veredito__anuncio a { color: var(--color-stage-muted); text-decoration: none; }
.vitrine-veredito__anuncio a:hover { text-decoration: underline; }
.vitrine-veredito__frase { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-xl); font-weight: 700; line-height: 1.25; }
.vitrine-veredito__rodape { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-stage-muted); }

.vitrine-cartao { padding: var(--space-4); }
.vitrine-cartao p { margin: var(--space-2) 0 0; }
.vitrine-conta { width: 100%; margin-top: var(--space-2); }
.vitrine-conta th:not(:first-child), .vitrine-conta td:not(:first-child) { text-align: right; }
.vitrine-conta__resultado td { font-weight: 600; border-top: 1px solid var(--color-border-strong); }
.vitrine-conta--negativo { color: var(--color-danger); }
.vitrine-armas, .vitrine-motivos, .vitrine-armas__todas ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.vitrine-armas__todas { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.vitrine-armas__todas summary { cursor: pointer; }

.vitrine-acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vitrine-acao:empty { display: none; }
.vitrine-acao p { margin: 0; flex-basis: 100%; }
.vitrine-acao__recado { color: var(--color-sinal-alta); font-size: var(--text-sm); }
.vitrine-acao__recado--erro { color: var(--color-danger); }

/* ---------- A régua de preço ---------- */
/* O traço é pintado por TRECHOS (26/09/2026): prejuízo listrado, a zona do troféu com lucro em verde, a zona do
   troféu sem custo conhecido num tom claro. O troféu fica ABAIXO do traço — o ▲ de hoje já ocupa o lado de cima,
   e os dois preços costumam estar a centavos um do outro. */
.regua { position: relative; padding: var(--space-2) 0 var(--space-4); }
.regua__trilho { position: relative; height: 4px; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.regua__zona { position: absolute; top: -2px; bottom: -2px; border-radius: 2px; }
.regua__zona--trofeu { background: var(--color-success); opacity: 0.45; }
.regua__zona--ganha { background: var(--color-primary); opacity: 0.30; }
.regua__zona--prejuizo {
    background: repeating-linear-gradient(135deg, var(--color-danger) 0 2px, transparent 2px 5px); opacity: 0.55;
}
.regua__marca { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.regua__marca--zero { width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-text-muted); }
.regua__marca--atual {
    width: 0; height: 0; top: 0; transform: translate(-50%, -100%);
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--color-text);
}
.regua__trofeu { position: absolute; top: calc(100% + 2px); transform: translateX(-50%); display: inline-flex; color: var(--color-text-muted); }
.regua__trofeu--aceso { color: var(--color-warning); }
.regua--grande { padding-bottom: var(--space-2); }
.regua--grande .regua__trilho { height: 6px; margin-bottom: var(--space-5); }
/* Na régua interativa o troféu desce mais: a bolinha (22px) cobriria o troféu colado no traço. */
.regua--interativa .regua__trofeu { top: calc(100% + var(--space-3)); }
.regua--interativa .regua__trilho { margin-bottom: var(--space-6); }
.regua__legenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--text-xs); }
.regua__legenda-trofeu { display: inline-flex; align-items: center; gap: var(--space-1); }
.regua__amostra { display: inline-block; width: 18px; height: 8px; vertical-align: middle; border-radius: 2px; }

/* A bolinha de arrastar é um input range nativo (teclado, toque e leitor de tela vêm de graça), transparente por
   cima do traço. Ele sobra meio polegar para cada lado: assim o CENTRO da bolinha anda de 0% a 100% do traço e
   bate com as marcas, que são posicionadas em % do traço. A área de toque tem 44px de altura. */
.regua__controle {
    position: absolute; top: 50%; left: -11px; width: calc(100% + 22px); height: 44px; margin: 0;
    transform: translateY(-50%); background: transparent; cursor: pointer;
    -webkit-appearance: none; appearance: none; touch-action: none;
}
.regua__controle::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.regua__controle::-moz-range-track { height: 44px; background: transparent; }
.regua__controle::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; margin-top: 11px; border-radius: 50%;
    background: var(--color-surface); border: 3px solid var(--color-primary); box-shadow: var(--shadow-sm);
}
.regua__controle::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--color-surface); border: 3px solid var(--color-primary); box-shadow: var(--shadow-sm);
}
.regua__controle:focus-visible { outline: none; }
.regua__controle:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.regua__controle:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Sobre o palco fúcsia: nada da paleta de perigo (DESIGN_SYSTEM — o vermelho vira mancha a 36° da matiz do
   fundo). O prejuízo é LISTRADO no tom apagado do palco: a diferença é a textura, não a cor. O verde e o âmbar
   do escuro foram medidos sobre o palco (4,97:1 e 5,19:1 no ponto mais claro) e podem entrar. */
.regua--palco .regua__trilho { background: var(--color-stage-line); }
.regua--palco .regua__zona--trofeu { background: var(--escuro-ok-ate); opacity: 0.75; }
.regua--palco .regua__zona--ganha { background: var(--color-stage-brand); opacity: 0.55; }
.regua--palco .regua__zona--prejuizo {
    background: repeating-linear-gradient(135deg, var(--color-stage-muted) 0 2px, transparent 2px 5px); opacity: 0.75;
}
.regua--palco .regua__marca--zero { background: var(--color-stage-to); border-color: var(--color-stage-muted); }
.regua--palco .regua__marca--atual { border-top-color: var(--color-stage-text); }
.regua--palco .regua__trofeu { color: var(--color-stage-muted); }
.regua--palco .regua__trofeu--aceso { color: var(--escuro-alerta-ate); }
.regua--palco .regua__legenda { color: var(--color-stage-muted); }
.regua--palco .regua__legenda strong { color: var(--color-stage-text); }
.regua--palco .regua__controle::-webkit-slider-thumb { background: var(--color-stage-text); }
.regua--palco .regua__controle::-moz-range-thumb { background: var(--color-stage-text); }
.regua--palco .regua__controle:focus-visible::-webkit-slider-thumb { outline-color: var(--color-stage-text); }
.regua--palco .regua__controle:focus-visible::-moz-range-thumb { outline-color: var(--color-stage-text); }

/* A frase do preço simulado, logo abaixo da régua. Com o troféu aceso ela ganha o dourado do palco. */
.vitrine-simulacao {
    display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0;
    color: var(--color-stage-text); font-size: var(--text-sm); font-weight: 600;
}
.vitrine-simulacao--ganha svg { color: var(--escuro-alerta-ate); }
.vitrine-acao__preco { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.vitrine-acao__preco .input { width: 9rem; }
.vitrine-acao__dica { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Celular: a fila ocupa a tela; escolher um anúncio abre a mesa por cima, com "voltar à fila". */
@media (max-width: 900px) {
    .vitrine { grid-template-columns: minmax(0, 1fr); }
    .vitrine-mesa { position: static; display: none; }
    .vitrine--com-selecao .vitrine-fila { display: none; }
    .vitrine--com-selecao .vitrine-mesa { display: grid; }
    .vitrine-mesa__voltar { display: inline-flex; }
    .vitrine-veredito { padding: var(--space-4); }
}

/* Devoluções: cobertura acima da tabela; filtros flexíveis, sem outra composição de dashboard. */
.devolucoes-cobertura { margin-bottom: var(--space-5); }
.devolucoes-cobertura p { margin: 0 0 var(--space-2); }
.devolucoes-cobertura p:last-child { margin-bottom: 0; }
.devolucoes-cobertura a { color: inherit; text-decoration: underline; }
.devolucoes-filtros { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin: var(--space-4) 0; }
.devolucoes-filtros label { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 calc(var(--space-8) * 6); min-width: 0; font-size: var(--text-sm); }
.devolucoes-filtros .input, .devolucoes-filtros .select { width: 100%; }
.devolucoes-filtros__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.devolucoes-tabela td { vertical-align: top; }

/* =========================================================================
   Resultado do período (28/09/2026)
   Gráficos na faixa escura, onde os degradês --escuro-* têm contraste medido; o demonstrativo, que é
   onde se lê e confere número, fica na parte clara. Só tokens.
   ========================================================================= */
.resultado-filtros { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; justify-content: flex-end; margin: 0; }
.resultado-filtros label { display: flex; flex-direction: column; gap: var(--space-1); flex: 0 1 calc(var(--space-7) * 4); min-width: 0; font-size: var(--text-sm); }
.resultado-filtros .input, .resultado-filtros .select { width: 100%; }
.resultado-filtros__erro { flex-basis: 100%; margin: 0; font-size: var(--text-sm); color: var(--color-danger); }
.screen-actions .resultado-filtros { flex-wrap: nowrap; }
.resultado-filtros .btn { white-space: nowrap; }
.screen-actions .resultado-filtros label { flex: 0 0 calc(var(--space-7) * 4); }
@media (max-width: 720px) { .screen-actions .resultado-filtros { flex-wrap: wrap; justify-content: stretch; } .screen-actions .resultado-filtros label { flex: 1 1 100%; } }

.resultado-cobertura {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    background: var(--color-warning-tint-soft); border: 1px solid var(--color-warning-tint-border);
    border-radius: var(--radius-md); color: var(--color-warning); font-size: var(--text-sm);
}
.resultado-cobertura ul { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }

.resultado-graficos__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); }
.resultado-graficos__topo h2 { margin: 0; font-size: var(--text-xl); color: var(--escuro-texto); }
.resultado-graficos__topo p { margin: 0; font-size: var(--text-sm); color: var(--escuro-apagado); }
.resultado-graficos__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.resultado-grafico { background: var(--escuro-painel); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: inset 0 1px 0 var(--escuro-linha); container-type: inline-size; min-width: 0; }
.resultado-grafico > .rosca-comp { min-height: calc(100% - var(--space-6)); }
.resultado-grafico h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); color: var(--escuro-texto); }
.resultado-grafico__sub { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--escuro-apagado); }
.resultado-grafico__vazio { margin: 0; font-size: var(--text-sm); color: var(--escuro-apagado); }

/* ---------- Cascata ---------- */
.cascata { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.cascata__coluna { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-width: 0; text-align: center; border-radius: var(--radius-sm); }
.cascata__coluna:focus-visible { outline: 2px solid var(--escuro-roxo-ate); outline-offset: 2px; }
.cascata__valor { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--escuro-texto); white-space: nowrap; }
.cascata__valor--desconto { color: var(--escuro-apagado); font-weight: 600; }
.cascata__area { position: relative; height: calc(var(--space-7) * 4); border-bottom: 1px solid var(--escuro-linha-forte); }
.cascata__barra {
    position: absolute; left: 12%; right: 12%; border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
    transform-origin: bottom; animation: resultado-subir 520ms ease-out both;
}
/* Incompleta: hachura por cima do degradê, e o degradê continua visível embaixo. */
.cascata__barra--incompleta { box-shadow: inset 0 0 0 1px var(--escuro-linha-forte); }
.cascata__barra--incompleta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, var(--escuro-fundo) 0 3px, transparent 3px 9px); opacity: .55; }
.cascata__ligacao { position: absolute; left: 88%; width: calc(24% + var(--space-2)); border-top: 1px dashed var(--escuro-linha-forte); }
.cascata__rotulo { font-size: var(--text-xs); color: var(--escuro-texto); line-height: 1.25; }
.cascata__nota { font-size: var(--text-xs); color: var(--escuro-apagado); }
@media (max-width: 720px) {
    .cascata { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-4); }
    .cascata__ligacao { display: none; }
}

/* ---------- Evolução mês a mês ---------- */
.evolucao__grafico { position: relative; display: grid; grid-template-columns: repeat(var(--evolucao-colunas), minmax(0, 1fr)); height: calc(var(--space-7) * 3); border-bottom: 1px solid var(--escuro-linha-forte); }
.evolucao__coluna { display: flex; align-items: flex-end; justify-content: center; }
.evolucao__barra {
    width: 56%; border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
    background: linear-gradient(180deg, var(--escuro-roxo-ate), var(--escuro-roxo-de));
    transform-origin: bottom; animation: resultado-subir 520ms ease-out both;
}
.evolucao__barra--hachurada { background: repeating-linear-gradient(135deg, var(--escuro-roxo-de) 0 4px, var(--escuro-chip) 4px 9px); }
.evolucao__linha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.evolucao__linha polyline { fill: none; stroke: var(--escuro-ok-ate); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.evolucao__ponto { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--escuro-ok-ate); box-shadow: 0 0 0 3px var(--escuro-painel); pointer-events: none; }
.evolucao__ponto--vazado { background: var(--escuro-painel); box-shadow: inset 0 0 0 2px var(--escuro-ok-ate), 0 0 0 3px var(--escuro-painel); }
.evolucao__meses { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--evolucao-colunas), minmax(0, 1fr)); }
.evolucao__mes { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; border-radius: var(--radius-sm); }
.evolucao__mes:focus-visible { outline: 2px solid var(--escuro-roxo-ate); outline-offset: 2px; }
.evolucao__mes b { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--escuro-texto); white-space: nowrap; }
.evolucao__rotulo { font-size: var(--text-xs); color: var(--escuro-apagado); }
.evolucao__nota { font-size: var(--text-xs); color: var(--escuro-alerta-ate); line-height: 1.2; }
.evolucao__legenda { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--escuro-apagado); }
.evolucao__legenda span { display: inline-flex; align-items: center; gap: var(--space-1); }
.evolucao__amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.evolucao__amostra--vendido { background: linear-gradient(180deg, var(--escuro-roxo-ate), var(--escuro-roxo-de)); }
.evolucao__amostra--sobra { height: 3px; border-radius: 2px; background: var(--escuro-ok-ate); }
.evolucao__amostra--hachura { background: repeating-linear-gradient(135deg, var(--escuro-roxo-de) 0 3px, var(--escuro-chip) 3px 6px); }

/* Em cartão estreito (celular), sete valores e sete notas não cabem lado a lado: fica o mês, a hachura diz o que
   está incompleto e o valor exato continua na dica de cada mês. */
@container (max-width: 480px) {
    .evolucao__mes b, .evolucao__nota { display: none; }
}

@keyframes resultado-subir { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cascata__barra, .evolucao__barra { animation: none; } }

/* ---------- Demonstrativo ---------- */
.resultado-demonstrativo { margin-top: var(--space-5); }
.resultado-demonstrativo h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.resultado-tabela th[scope="row"] { text-align: left; font-weight: 400; text-transform: none; letter-spacing: normal; }
.resultado-tabela .num, .resultado-detalhe .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resultado-tabela .num > * + * { margin-left: var(--space-2); }
.resultado-tabela__total th[scope="row"], .resultado-tabela__total td { background: var(--color-surface-2); font-weight: 600; }
.resultado-tabela__abrir { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-align: left; }
.resultado-tabela__abrir:hover { text-decoration: underline; }
.resultado-tabela__nota { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); text-transform: none; letter-spacing: normal; }
.resultado-variacao { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.resultado-variacao--bom { color: var(--color-success); font-weight: 600; }
.resultado-variacao--ruim { color: var(--color-danger); font-weight: 600; }
.resultado-detalhe { width: 100%; }
.resultado-detalhe td { vertical-align: top; }
.resultado-detalhe tfoot th, .resultado-detalhe tfoot td { border-top: 1px solid var(--color-border); }

/* ---------- CUSTOS IGUAIS ENTRE LOJAS (30/09/2026) ----------
   Contrato: docs/design/CUSTOS_ENTRE_LOJAS_UX.md. Fluxo em lote: a faixa escura é o DIAGNÓSTICO (o que decide —
   o tamanho e o critério); as listas ficam no claro, table-first, porque é ali que se confere linha a linha. */
.custos-lojas__diagnostico {
    display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-2);
}
@media (min-width: 1000px) {
    .custos-lojas__diagnostico { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.custos-lojas__numeros { display: flex; flex-direction: column; gap: var(--space-4); }
.custos-lojas__heroi { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.custos-lojas__num { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--escuro-texto); }
.custos-lojas__rotulo { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-lg); color: var(--escuro-texto); }
.custos-lojas__rotulo small { font-size: var(--text-sm); color: var(--escuro-apagado); }
.custos-lojas__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.custos-lojas__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(--escuro-chip); border: 1px solid var(--escuro-linha);
    font-size: var(--text-xs); color: var(--escuro-apagado);
}
.custos-lojas__chip b { font-size: var(--text-lg); color: var(--escuro-texto); font-variant-numeric: tabular-nums; }
.custos-lojas__chip--apagado b { color: var(--escuro-apagado); }
.custos-lojas__criterio {
    padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--escuro-painel); border: 1px solid var(--escuro-linha);
}
.custos-lojas__criterio h2 {
    margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--escuro-apagado);
}
.custos-lojas__criterio ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.custos-lojas__criterio li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--escuro-texto); }
.custos-lojas__criterio li .lucide { flex: 0 0 auto; margin-top: 3px; color: var(--escuro-ok-ate); }
.custos-lojas__criterio--fora { color: var(--escuro-apagado) !important; }
.custos-lojas__criterio--fora .lucide { color: var(--escuro-apagado) !important; }

.custos-lojas__abas { margin-top: var(--space-5); }
.custos-lojas__acao {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.custos-lojas__acao p { margin: 0; flex: 1 1 320px; font-size: var(--text-sm); color: var(--color-text-muted); }
.custos-lojas__explica { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

.custos-lojas__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.custos-lojas__loja {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
}
/* A cor da loja é a da faixa de abas — só a bolinha, nunca o texto (a cor não passa no teste de daltonismo sozinha). */
.custos-lojas__loja::before {
    content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill);
    background: var(--cor-da-loja, var(--color-primary));
}
.custos-lojas__titulo { font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; }
.custos-lojas__id small, .custos-lojas__atual { font-size: var(--text-xs); color: var(--color-text-muted); display: block; }
.custos-lojas__opcoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.custos-lojas__link { display: block; margin-top: var(--space-1); font-size: var(--text-xs); }
.custos-lojas__mais { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.custos-lojas__resultado {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    border-left: 3px solid var(--color-success); margin-bottom: var(--space-4);
}
.custos-lojas__nota { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.custos-lojas__aviso { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-warning); font-weight: 500; }
.custos-lojas__num-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.custos-lojas__origem + .custos-lojas__origem { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
/* "Para revisar": a prova de cada par (o que ligou e por que não copiei) e as três saídas, na mesma linha. */
.custos-lojas__prova { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-2); margin: var(--space-2) 0; font-size: var(--text-xs); }
.custos-lojas__prova dt { color: var(--color-text-muted); font-weight: 600; }
.custos-lojas__prova dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.custos-lojas__destino { vertical-align: top; }
.custos-lojas__digitar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.custos-lojas__digitar .input { width: 120px; }

/* ============================================================================================================
   Clips (/clips) — gerador de clips, fatia 1 (docs/product/GERADOR_DE_CLIPS.md). Fila + painel lateral
   compartilhado; nada aqui é cor nova: só tokens.
   ============================================================================================================ */
.clips-vozes { padding: var(--space-4) var(--space-4) 0; margin-bottom: var(--space-2); }
.clips-vozes__rotulo { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.clips-voz { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.clips-voz--marcada { border-color: var(--color-primary); background: var(--color-primary-tint); }
.clips-voz__nome { border: 0; background: none; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); cursor: pointer; }
.clips-voz--marcada .clips-voz__nome { color: var(--color-primary); }
.clips-voz__genero { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.clips-nota { padding: 0 var(--space-4); margin-bottom: var(--space-3); }
.clips-anuncio { display: flex; flex-direction: column; gap: var(--space-1); }
.clips-anuncio__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.clips-anuncio__meta > * { white-space: nowrap; }
.clips-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table--clicavel tbody tr { cursor: pointer; }

/* Painel: o vídeo vertical em cima e os passos de envio embaixo. O painel lateral é estreito demais para as
   duas colunas — lado a lado, os passos viravam uma tira de duas palavras por linha (visto no teste local). */
.clips-detalhe { display: flex; flex-direction: column; gap: var(--space-4); }
.clips-video { display: block; width: 100%; max-width: 240px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); background: var(--color-text); }
.clips-envio { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.clips-envio__titulo { font-size: var(--text-base); margin: 0; }
.clips-passos { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); }
.clips-passos__dica { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.clips-copiar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.clips-situacao { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.clips-situacao--ok { background: var(--color-success-tint-soft); border: 1px solid var(--color-success-tint-border); }
.clips-situacao--alerta { background: var(--color-warning-tint); }
.clips-textos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.clips-textos dt { color: var(--color-text-muted); }
.clips-textos dd { margin: 0; }

/* ==========================================================================
   Central da Maya (/maya) — docs/product/CENTRAL_DA_MAYA.md
   ==========================================================================
   Fila de ação: só tokens existentes; composição própria (ver o comentário no topo do .razor).
   A faixa da Maya usa a zona escura violeta do sistema (--escuro-*), não o palco fúcsia: aqui não há "o que se
   mexe lá fora", e a página não precisa de uma segunda categoria de destaque. */
.central { display: grid; gap: var(--space-5); }
.central .btn { min-height: var(--control-size-md); }
.central .btn--sm { min-height: auto; }

.central-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.central-topo__titulo { margin: 0; font-size: var(--text-2xl); }
.central-topo .page-header__desc { margin: var(--space-1) 0 0; }

/* ---------------- faixa da Maya: orienta, não opera ---------------- */
.central-maya { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-5); padding: var(--space-5) var(--space-6) 0; color: var(--escuro-texto); background: var(--escuro-fundo-topo); border: 1px solid var(--escuro-linha-forte); border-radius: var(--radius-xl); overflow: hidden; }
.central-maya__avatar { width: auto; height: calc(var(--space-7) * 3 + var(--space-5)); object-fit: contain; object-position: bottom; }
.central-maya__corpo { padding-bottom: var(--space-5); min-width: 0; }
.central-maya__rotulo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--escuro-apagado); }
.central-maya__loja { color: var(--escuro-texto); overflow-wrap: anywhere; }
.central-maya h2 { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-2xl); line-height: 1.25; font-weight: 700; color: var(--escuro-texto); max-width: 48ch; }
.central-maya__cobertura { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-base); color: var(--escuro-alerta-ate); }
.central-maya__cobertura svg { flex-shrink: 0; }

.central-trilhas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.central-trilha { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--escuro-linha-forte); border-radius: var(--radius-pill); background: var(--escuro-chip); color: var(--escuro-texto); font-size: var(--text-base); text-decoration: none; }
.central-trilha:hover { border-color: var(--escuro-roxo-ate); }
.central-trilha:focus-visible { outline: 2px solid var(--escuro-roxo-ate); outline-offset: var(--space-1); }
.central-trilha svg { color: var(--escuro-roxo-ate); }
.central-trilha span { color: var(--escuro-apagado); }

/* ---------------- recibo e estado vazio ---------------- */
.central-recibo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-success-tint-border); background: var(--color-success-tint-soft); border-radius: var(--radius-lg); }
.central-recibo svg { color: var(--color-success); }
.central-recibo--atencao { border-color: var(--color-warning); background: var(--color-warning-tint); }
.central-recibo--atencao svg { color: var(--color-warning); }
.central-recibo p { margin: var(--space-1) 0 0; font-size: var(--text-base); color: var(--color-text-muted); }

.central-vazia { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
.central-vazia svg { flex-shrink: 0; color: var(--color-primary); }
.central-vazia h2 { margin: 0; font-size: var(--text-xl); }
.central-vazia p { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

/* ---------------- a fila ---------------- */
.central-fila { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; scroll-margin-top: var(--space-7); }
.central-fila__titulo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: var(--space-4) var(--space-5); font-size: var(--text-lg); border-bottom: 1px solid var(--color-border); background: var(--color-surface-subtle); }
.central-fila__titulo svg { color: var(--color-primary); }
.central-fila__titulo span { font-size: var(--text-base); font-weight: 400; color: var(--color-text-muted); }
.central-lista { margin: 0; padding: 0; list-style: none; }
.central-item { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); border-left: var(--space-1) solid transparent; }
.central-item:last-child { border-bottom: 0; }
.central-item--pronto { border-left-color: var(--color-success); }
.central-item__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.central-item__texto h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-lg); color: var(--color-text); }
.central-item__texto p { margin: 0; font-size: var(--text-base); color: var(--color-text-muted); max-width: 90ch; }
.central-item__texto .central-item__meta { margin-top: var(--space-2); font-size: var(--text-xs); }
.central-item__acoes { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }

/* ---------------- a proposta: prévia do que muda antes do aceite ---------------- */
.central-proposta { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--color-border-strong); }
.central-proposta__escopo { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); font-size: var(--text-base); }
.central-proposta__escopo span:last-child { color: var(--color-text-muted); }
.central-proposta__vazio { margin: 0; color: var(--color-text-muted); }
.central-proposta__tabela td { vertical-align: top; font-size: var(--text-sm); }
.central-proposta__anuncio a { display: block; font-weight: 600; color: var(--color-text); }
.central-proposta__anuncio span { font-size: var(--text-xs); color: var(--color-text-muted); }
.central-proposta__valor { font-weight: 600; }
.central-proposta__prova span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.central-proposta__rodape { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface-subtle); border-radius: var(--radius-md); }
.central-proposta__rodape p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 70ch; }

/* ---------------- todas as lojas ---------------- */
.central-lojas { padding: var(--space-5); }
.central-lojas h2 { margin: 0; font-size: var(--text-xl); }
.central-lojas__nota { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.central-lojas__acao { text-align: right; }

/* ---------------- histórico, sob demanda ---------------- */
.central-historico { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.central-historico summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); font-weight: 600; cursor: pointer; color: var(--color-primary); min-height: var(--control-size-md); }
.central-historico summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: var(--space-1); }
.central-historico__corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-7) * 6), 1fr)); gap: var(--space-5); padding: 0 var(--space-5) var(--space-5); }
.central-historico h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.central-historico ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.central-historico li strong { margin-right: var(--space-2); }
.central-historico__vazio { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 768px) {
    .central-maya { grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--space-4) 0; }
    .central-maya__avatar { display: none; }
    .central-item__cabeca { grid-template-columns: minmax(0, 1fr); }
    .central-item__acoes { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .central-proposta__tabela thead { display: none; }
    .central-proposta__tabela tr, .central-proposta__tabela td { display: block; }
    .central-proposta__tabela td { border: 0; padding: var(--space-1) 0; }
    .central-proposta__tabela tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
    .central-proposta__rodape .btn { width: 100%; justify-content: center; }
}

/* Central da Maya — antes e depois do conserto de fotos, dentro do cartão. */
.central-fotos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-7) * 6), 1fr)); }
.central-fotos__anuncio { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.central-fotos__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.central-fotos__cabeca a { font-weight: 600; color: var(--color-text); }
.central-fotos__troca { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-text-muted); }
.central-fotos__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.central-fotos__grupo span { width: 100%; font-size: var(--text-xs); color: var(--color-text-muted); }
.central-fotos__grupo img { width: calc(var(--space-7) + var(--space-4)); height: calc(var(--space-7) + var(--space-4)); object-fit: contain; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.central-fotos__aviso { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-warning); }

/* Central da Maya — descrições escritas pela Maya, para ler antes de aceitar. */
.central-descricoes { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.central-descricoes__anuncio { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.central-descricoes__antes { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.central-descricoes__texto { white-space: pre-line; font-size: var(--text-sm); line-height: 1.6; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-subtle); max-height: calc(var(--space-7) * 6); overflow-y: auto; }

/* Anúncios piloto: fila elevada, ferramentas agrupadas e dados em superfície clara.
   As peças compartilhadas são optativas; as demais telas conservam sua composição. */
.screen-intro-block--compact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-3); margin-bottom: var(--space-3); }
.screen-intro-block--compact:has(.maya-conclusao) { display: block; }
.screen-intro-block--compact .screen-intro { padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3); gap: var(--space-3); }
.screen-intro-block--compact .screen-intro__avatar { width: var(--control-size-md); height: var(--control-size-md); flex-basis: var(--control-size-md); }
.screen-intro-block--compact .screen-intro__details { display: inline-block; margin-right: var(--space-3); }
.screen-intro-block--compact .screen-intro__details[open] { display: block; }
.screen-intro-block--compact .screen-intro__more { margin-top: var(--space-1); }
.screen-intro-block--compact .screen-intro__lines, .screen-intro-block--compact .screen-intro__summary { margin-top: var(--space-1); }
.screen-intro-block--compact .screen-actions { margin-top: 0; }
.screen-intro-block--compact .page-actions { justify-content: flex-end; }
.screen-intro-block--compact .auto-sync { order: 2; flex-basis: 100%; }
.anuncios-workspace { padding: 0; border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.operational-queue { display: flex; align-items: stretch; gap: var(--space-2); padding: var(--space-2); overflow-x: auto; background: var(--color-sidebar-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; scrollbar-color: var(--color-sidebar-text) var(--color-sidebar-bg); }
.operational-queue__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-size-md); padding: var(--space-2) var(--space-4); flex: 1 0 auto; font: inherit; font-size: var(--text-base); font-weight: 600; color: var(--color-sidebar-text); background: var(--escuro-painel); border: 1px solid var(--escuro-linha-forte); border-radius: var(--radius-md); cursor: pointer; }
.operational-queue__item:hover { color: var(--color-sidebar-text-active); background: var(--escuro-chip); }
.operational-queue__item[aria-pressed="true"] { color: var(--color-primary-hover); background: var(--color-surface); border-color: var(--color-surface); box-shadow: var(--shadow-md); }
.operational-queue__count { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--escuro-chip); color: var(--color-sidebar-text-active); font-variant-numeric: tabular-nums; }
.operational-queue__item[aria-pressed="true"] .operational-queue__count { background: var(--color-primary-tint); color: var(--color-primary-hover); }
.operational-queue__item:focus-visible { outline: var(--space-1) solid var(--color-sidebar-text-active); outline-offset: var(--space-1); }
.anuncios-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto; align-items: end; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border-strong); }
.anuncios-field { display: grid; min-width: 0; gap: var(--space-1); font-size: var(--text-base); font-weight: 600; color: var(--color-text); }
.anuncios-field .input, .anuncios-field .select { width: 100%; min-width: 0; min-height: var(--control-size-md); margin: 0; font-size: var(--text-base); font-weight: 400; box-shadow: var(--shadow-sm); }
.anuncios-extra { display: contents; }
.anuncios-extra > summary { align-self: end; min-height: var(--control-size-md); }
.anuncios-extra__fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border-strong); }
.anuncios-extra:not([open]) > .anuncios-extra__fields { display: none; }
.anuncios-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-1) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.anuncios-list-bar .page-header__desc { margin: 0; font-size: var(--text-base); }
.anuncios-list-bar .view-toggle { margin-left: auto; }
.anuncios-list-bar .view-toggle__btn { min-height: var(--control-size-md); font-size: var(--text-base); }
.anuncios-health { gap: var(--space-2); }
.anuncios-health[aria-pressed="true"] { background: var(--color-primary-tint); color: var(--color-primary-hover); border-color: var(--color-primary); }
.anuncios-health__count { font-variant-numeric: tabular-nums; font-weight: 700; }
.anuncios-workspace .listings-table { font-size: var(--text-base); }
.anuncios-workspace .listings-table th { background: var(--color-surface-2); font-size: var(--text-base); }
.anuncios-workspace .listings-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); font-variant-numeric: tabular-nums; }
.anuncios-workspace .listings-table .badge { font-size: var(--text-base); }
.anuncios-workspace .listing-cell { gap: var(--space-3); align-items: center; }
.anuncios-workspace .listing-cell__thumb { width: var(--control-size-md); height: var(--control-size-md); border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); object-fit: contain; }
.anuncios-workspace .listing-cell__text { min-width: calc(var(--space-7) * 6); gap: var(--space-1); }
.anuncios-title { font-weight: 600; font-size: var(--text-base); line-height: 1.4; overflow-wrap: anywhere; }
.anuncios-identifiers { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.anuncios-workspace .celula-loja { max-width: none; font-size: var(--text-base); }
.anuncios-row--selected > td { background: var(--color-primary-tint); }
.anuncios-quality { display: flex; flex-direction: column; align-items: start; gap: var(--space-1); min-height: var(--control-size-md); padding: var(--space-1); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; text-align: left; cursor: pointer; color: var(--color-primary-hover); }
.anuncios-quality > span:last-child { font-size: var(--text-base); text-decoration: underline; text-underline-offset: var(--space-1); }
.anuncios-quality:hover { background: var(--color-primary-tint); border-color: var(--color-primary-tint-border); }
.anuncios-workspace :is(button, summary, input, select, a, .table-scroll):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.anuncios-workspace .operational-queue__item:focus-visible { outline-color: var(--color-sidebar-text-active); }
.anuncios-workspace input[type="checkbox"] { accent-color: var(--color-primary); }
.anuncios-workspace .table-scroll { scrollbar-color: var(--color-text-muted) var(--color-surface-2); }
@media (max-width: 1100px) {
    .screen-intro-block--compact { grid-template-columns: minmax(0, 1fr); }
    .anuncios-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .anuncios-extra > summary { justify-self: start; }
}
@media (max-width: 600px) {
    .anuncios-filters { grid-template-columns: minmax(0, 1fr); }
    .anuncios-extra__fields { grid-template-columns: minmax(0, 1fr); }
    .anuncios-list-bar .view-toggle { margin-left: 0; }
    .operational-queue__item { flex-grow: 0; }
}

/* Lucratividade: leitura financeira em profundidade; a conta continua na tabela clara. */
.lucro-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); margin-bottom: var(--space-4); color: var(--color-sidebar-text-active); background: var(--color-sidebar-bg); border: 1px solid var(--color-panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); overflow: hidden; }
.lucro-overview__lead { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-1); padding: var(--space-4); background: var(--escuro-painel); border-right: 1px solid var(--escuro-linha-forte); }
.lucro-overview__eyebrow { color: var(--color-sidebar-text); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; }
.lucro-overview__number { color: var(--color-sidebar-text-active); font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.lucro-overview__lead-label { font-size: var(--text-base); font-weight: 700; }
.lucro-overview__context { color: var(--color-sidebar-text); font-size: var(--text-sm); line-height: 1.4; }
.lucro-overview__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-7) * 3 + var(--space-4)), 1fr)); align-content: center; gap: var(--space-2); padding: var(--space-3); }
.lucro-metric { min-width: 0; padding: var(--space-2) var(--space-3); background: var(--escuro-painel); border: 1px solid var(--escuro-linha-forte); border-radius: var(--radius-md); }
.lucro-metric__value { font-size: var(--text-xl); font-weight: 700; color: var(--color-sidebar-text-active); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lucro-metric__value span { color: var(--color-sidebar-text); font-size: var(--text-base); }
.lucro-metric__label { color: var(--color-sidebar-text); font-size: var(--text-sm); line-height: 1.35; }
.lucro-metric__label .dica-marca { color: inherit; }
.lucro-workspace { padding-top: 0; border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.lucro-workspace > .operational-queue { margin-bottom: var(--space-2); }
.lucro-workspace .lucro-bar { margin-bottom: var(--space-2); }
.lucro-workspace .lucro-bar__conferido { font-size: var(--text-base); }
.lucro-workspace .chip[aria-pressed="true"] { background: var(--color-primary-tint); border-color: var(--color-primary-tint-border); color: var(--color-primary-hover); }
.lucro-workspace .profitability-table { font-size: var(--text-base); }
.lucro-workspace .profitability-table th { font-size: var(--text-sm); background: var(--color-surface-2); }
.profitability-table__identity { display: grid; gap: var(--space-1); min-width: 0; line-height: 1.35; }
.profitability-table__identity strong { font-weight: 600; overflow-wrap: anywhere; }
.profitability-table__identity > span:not(.celula-loja) { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.profitability-table__identity .celula-loja { max-width: none; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 400; }
.lucro-workspace :is(button, input, a, .table-scroll):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lucro-workspace .operational-queue__item:focus-visible { outline-color: var(--color-sidebar-text-active); }
@media (max-width: 1100px) {
    .lucro-overview { grid-template-columns: minmax(0, 1fr); }
    .lucro-overview__lead { border-right: 0; border-bottom: 1px solid var(--escuro-linha-forte); }
}
@media (max-width: 600px) {
    .lucro-overview__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Estoque: fila de reposição e busca numa superfície de trabalho compacta. */
.estoque-workspace { padding-top: 0; border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.estoque-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border-strong); }
.estoque-tools .anuncios-field { flex: 1 1 calc(var(--space-7) * 6); }
.estoque-tools__count { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.estoque-workspace .data-table { font-size: var(--text-base); }
.estoque-workspace .data-table th { background: var(--color-surface-2); font-size: var(--text-base); }
.estoque-workspace .data-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.estoque-listing { min-width: calc(var(--space-7) * 6); }
.estoque-listing > strong, .estoque-listing > span { display: block; }
.estoque-listing > strong { font-weight: 600; overflow-wrap: anywhere; }
.estoque-listing > span { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.estoque-listing .celula-loja { max-width: none; font-weight: 400; }
.estoque-workspace :is(button, input, a, .table-scroll):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.estoque-workspace .operational-queue__item:focus-visible { outline-color: var(--color-sidebar-text-active); }

/* Catálogo conserva fila e mesa próprias; só compartilha o significado de seleção elevada. */
.vitrine-grupos__item { min-height: var(--control-size-md); font-size: var(--text-base); border-color: var(--escuro-linha-forte); background: var(--escuro-painel); color: var(--escuro-texto); }
.vitrine-grupos__item[aria-pressed="true"] { color: var(--color-primary-hover); background: var(--color-surface); border-color: var(--color-surface); box-shadow: var(--shadow-md); font-weight: 700; }
.vitrine-grupos__item[aria-pressed="true"] .vitrine-grupos__n { color: var(--color-primary-hover); background: var(--color-primary-tint); }
.vitrine-grupos__item:focus-visible { outline: 2px solid var(--escuro-texto); outline-offset: 2px; }
.vitrine-linha__identity { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.vitrine-linha__identity .celula-loja { max-width: none; }
.vitrine-veredito__identity { margin: var(--space-1) 0 var(--space-2); color: var(--color-stage-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.vitrine-veredito__identity .celula-loja { max-width: none; color: inherit; }

/* Produtos: o custo pendente orienta o trabalho; a manutenção do catálogo recua. */
.produtos-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-bottom: var(--space-4); overflow: hidden; color: var(--color-sidebar-text-active); background: var(--color-sidebar-bg); border: 1px solid var(--color-panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.produtos-overview__lead { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--escuro-painel); border-right: 1px solid var(--escuro-linha-forte); }
.produtos-overview__lead strong { font-size: var(--text-3xl); font-variant-numeric: tabular-nums; line-height: 1; }
.produtos-overview__lead span { font-size: var(--text-base); font-weight: 700; }
.produtos-overview__lead small { color: var(--color-sidebar-text); font-size: var(--text-sm); }
.produtos-overview__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.produtos-overview__facts span { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-3); color: var(--color-sidebar-text); background: var(--escuro-painel); border: 1px solid var(--escuro-linha-forte); border-radius: var(--radius-md); font-size: var(--text-base); }
.produtos-overview__facts strong { color: var(--color-sidebar-text-active); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.produtos-workspace { padding-top: 0; border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.produtos-tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border-strong); }
.produtos-tools .anuncios-field { flex: 1 1 calc(var(--space-7) * 6); }
.produtos-tools__count { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.produtos-workspace .data-table { font-size: var(--text-base); }
.produtos-workspace .data-table th { background: var(--color-surface-2); font-size: var(--text-base); }
.produtos-name > strong { display: block; font-weight: 600; }
.produtos-name .celula-loja { display: block; max-width: none; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.produtos-cost--missing { border-color: var(--color-primary-tint-border); background: var(--color-primary-tint); color: var(--color-primary-hover); }
.produtos-workspace :is(button, input, a, .table-scroll):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* A fila de Perguntas e Atendimento usa a mesma presença de seleção, mantendo a conversa ao lado. */
.conversa__aba { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-size-md); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--escuro-painel); color: var(--escuro-texto); font-size: var(--text-base); }
.conversa__aba[aria-pressed="true"] { color: var(--color-primary-hover); background: var(--color-surface); border-color: var(--color-surface); box-shadow: var(--shadow-md); }
.conversa__aba:focus-visible { outline: 2px solid var(--escuro-texto); outline-offset: 2px; }

/* Pedidos mantém a régua de prazos; a escolha da etapa ganha presença de controle. */
.seletor-de-fila__item { min-height: var(--control-size-md); border-color: var(--escuro-linha-forte); background: var(--escuro-painel); color: var(--escuro-texto); font-size: var(--text-base); }
.seletor-de-fila__item[aria-pressed="true"] { color: var(--color-primary-hover); background: var(--color-surface); border-color: var(--color-surface); box-shadow: var(--shadow-md); font-weight: 700; }
.seletor-de-fila__item[aria-pressed="true"] .seletor-de-fila__n { color: var(--color-primary-hover); background: var(--color-primary-tint); }
.seletor-de-fila__item[aria-pressed="true"] .seletor-de-fila__alerta { color: var(--color-warning); border-color: var(--color-warning); }
.seletor-de-fila__item[aria-pressed="true"] .seletor-de-fila__alerta--perigo { color: var(--color-danger); border-color: var(--color-danger); }
.seletor-de-fila__item:focus-visible { outline: 2px solid var(--escuro-texto); outline-offset: 2px; }
.pedidos-workspace { border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.reclamacoes-workspace { border-color: var(--color-panel-border); box-shadow: var(--shadow-panel); }
.seletor-de-fila__hint { color: var(--color-sidebar-text); font-size: var(--text-sm); }
.seletor-de-fila__item[aria-pressed="true"] .seletor-de-fila__hint { color: var(--color-text-muted); }
.central-pronto { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); color: var(--color-sidebar-text-active); background: var(--color-sidebar-bg); border: 1px solid var(--color-panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.central-pronto > div { display: grid; gap: var(--space-1); }
.central-pronto__eyebrow { color: var(--color-sidebar-text); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; }
.central-pronto strong { font-size: var(--text-xl); }
.central-pronto p { margin: 0; color: var(--color-sidebar-text); font-size: var(--text-base); }
.central-item { scroll-margin-top: var(--space-7); }
.central-item__evidence { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.central-item__evidence summary { width: fit-content; cursor: pointer; text-decoration: underline; text-underline-offset: var(--space-1); }
.central-item__evidence span { display: block; padding-top: var(--space-1); font-variant-numeric: tabular-nums; }
.central-item__evidence summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 700px) {
    .produtos-overview { grid-template-columns: minmax(0, 1fr); }
    .produtos-overview__lead { border-right: 0; border-bottom: 1px solid var(--escuro-linha-forte); }
}