/* Design system Vega. Servido por /vega/tema.css (Support\Tema), com
   versão no endereço e cache longo; antes ia inteiro dentro de cada página. */
    

    :root {
        /* Monoespacada de verdade (codigo, token, hash): so via `.vega-codigo`. */
        --vega-mono: 'IBM Plex Mono', ui-monospace, monospace;
        --vega-blue: #2563FF;
        /* Um tom abaixo do azul da marca. Sobre o BRANCO o #2563FF passa (4.84),
           mas os links de apoio ficam sobre o cinza da pagina, onde ele cai
           para 4.43. Como este token e so de texto, escurecer aqui nao mexe no
           azul dos botoes. */
        --vega-blue-texto: #1E56E6;
        /* Vermelho de TEXTO. `#E0574F` da 4.12 no escuro e o `vega-link-perigo` do
           Tailwind da 4.07: os dois abaixo do minimo, e sao a cor de "Remover"
           e da ocupacao baixa no painel. */
        --vega-red-texto: #D93B30;
        --vega-green-texto: #0E7A4C;
        /* Categorias dos graficos (rosca, linhas): ordem fixa, validada para
           daltonismo com o validador do dataviz (26/09). Nao reusar como status. */
        --vega-cat-1: #2563FF; --vega-cat-2: #0FA968; --vega-cat-3: #8B5CF6; --vega-cat-4: #F59E0B;
        --vega-blue-deep: #1645B8;
        --vega-blue-soft: #EAF0FF;
        --vega-ink: #0B1220;
        --vega-ink-2: #3F4A5C;
        /* Escurecido de #6B7689: aquele valor passava sobre o cartao branco
           (4.57) mas nao sobre o cinza da pagina (4.17), que e justamente onde
           ficam os eyebrows e os textos de estado vazio. */
        --vega-ink-3: #626C7D;
        --vega-line: #E2E7EE;
        --vega-green: #12905A;
        --vega-amber: #9A6B00;
        /* Ambar de TEXTO, mais escuro: #9A6B00 da 4.18 sobre o cinza da pagina. */
        --vega-amber-texto: #7A5500;
        --vega-bg: #FFFFFF;
        --vega-card: #FFFFFF;
        --vega-hover: rgba(37, 99, 255, .03);
        --vega-chip-blue-bg: #EAF0FF;  --vega-chip-blue-fg: #1645B8;
        --vega-chip-green-bg: #E4F7EE; --vega-chip-green-fg: #0B7A49;
        --vega-chip-amber-bg: #FBF1DA; --vega-chip-amber-fg: #8A5F00;  /* escurecido: #9A6B00 dava 4.17 sobre o proprio chip */
        --vega-chip-red-bg: #FDE7E7;   --vega-chip-red-fg: #C0392B;
        --vega-chip-gray-bg: #EEF1F6;  --vega-chip-gray-fg: #3F4A5C;
        --vega-chip-done-bg: #E9F1EC;  --vega-chip-done-fg: #4E6B5D;

        /* WhatsApp — cores oficiais do app, para a caixa de entrada parecer o
           WhatsApp de verdade. O acento é configurável (aureon.whatsapp.color):
           clínica que queira a própria identidade troca só essa variável. */
        --wa-accent:      #00A884;
        /* Quem falou, escrito sobre o balao: o verde do app da 2.63 ali. */
        --wa-autor:       #0A6E4A;

        /* Verde para superficie que carrega TEXTO BRANCO (avatar, chip de
           filtro, botao de enviar). O #00A884 com branco por cima da 3.03, e
           era a origem de 131 das falhas de contraste desta tela.

           #008069 nao e invencao: e o proprio verde de cabecalho do WhatsApp.
           Ou seja, a correcao deixa a tela MAIS fiel ao aplicativo, nao menos. */
        --wa-accent-forte: #008069;
        /* Vermelho de aviso da coluna de contexto. Tom proprio, e nao o
           --vega-red: aquele foi calibrado sobre o fundo claro do CRM, e a
           coluna do WhatsApp tem fundo proprio nos dois temas. */
        --wa-alerta:      #B3261E;
        /* Ambar de TEXTO. O ambar de preenchimento (#F5A623, do selo de
           espera) mede 1.9 sobre o chip claro: serve de fundo, nunca de letra. */
        --wa-ambar-texto: #8A5A00;
        --wa-header:      #F0F2F5;
        --wa-chat-bg:     #EFEAE2;
        --wa-bubble-in:   #FFFFFF;
        --wa-bubble-out:  #D9FDD3;
        --wa-text:        #111B21;
        /* Clareado do #667781 do aplicativo: o horario da mensagem e o que se
           procura ao rolar uma conversa atras do que foi dito, e no original ele
           passa raspando. A fidelidade fica no fundo, nos baloes e no verde.
           #5A6B75 dava 4.42 nos filtros da lista (Aguardando, Com a IA);
           #54656F e o cinza secundario do proprio app e passa (27/09). */
        --wa-text-2:      #54656F;
        --wa-line:        #E9EDEF;
        --wa-panel:       #FFFFFF;
        --wa-tick:        #53BDEB;
    }

    /* Dark mode — preto neutro.
     *
     * Vem das referencias que o Daniel escolheu: fundo quase preto, superficie
     * um degrau acima, borda fina de baixo contraste, texto branco com cinza
     * medio de apoio. Antes era um cinza QUENTE, que e outra familia.
     *
     * E cinza PURO: R = G = B em toda superficie e todo texto cinza. A primeira
     * tentativa usou a escala `zinc`, que e cinza FRIO — o fundo tinha azul 11
     * contra vermelho 9, e o cartao cinco pontos de diferenca. Pouco, mas o
     * Daniel viu na tela antes de mim.
     *
     * A regra que fica: MATIZ so no que significa alguma coisa (azul de acao,
     * verde de sucesso, ambar de atencao, vermelho de alerta). Cinza e cinza.
     *
     * O acento continua o azul da Aureon. As referencias usam laranja, roxo ou
     * verde conforme a marca de cada uma — o que se copia e a ESTRUTURA de
     * tons, e nao a cor de marca dos outros.
     *
     * Cada par foi medido: o menor deu 5.74 contra os 4.5 da regra. */
    .dark {
        /* Azul de TEXTO, separado do azul de preenchimento.

           `--vega-blue` (#2563FF) sobre o fundo dos cartoes escuros da 3.14 de
           contraste, e ele e a cor de todo link e acao em texto do CRM:
           "Editar", "Escrever", "Ver agenda", os percentuais do Financeiro.
           Clarear o proprio `--vega-blue` NAO serve: ele tambem e o fundo dos
           botoes, e um azul mais claro derrubaria o contraste do texto branco
           por cima. Por isso sao dois tokens. */
        --vega-blue-texto: #7BA6FF;
        --vega-red-texto: #FF9A90;
        --vega-green-texto: #5FD79B;
        --vega-cat-1: #4D82FF; --vega-cat-2: #159E66; --vega-cat-3: #8C70F5; --vega-cat-4: #B8801F;
        /* Superficie de apoio: NEUTRA, e nao azulada. Ela e o fundo do trilho
           de filtros e dos botoes redondos do perfil, que nas referencias sao
           cinza. O azul fica para o que e acao. */
        --vega-blue-soft: #1F1F1F;
        /* O fundo, igual ao do body escuro. Sem ele valia o branco do tema
           claro: a caixa de variáveis das automações, os códigos da
           verificação em dois passos e a linha aberta da auditoria ficavam
           brancas no modo escuro, com texto claro por cima. */
        --vega-bg: #171717;
        --vega-ink: #FAFAFA;
        --vega-ink-2: #D4D4D4;
        /* Texto de apoio em 12px, que e onde a regra mais aperta. Da 7.11
           sobre o cartao e 6.38 sobre a superficie elevada. */
        --vega-ink-3: #A3A3A3;
        --vega-line: #262626;
        --vega-green: #4ADE9A;
        --vega-amber: #E3AE4E;
        --vega-amber-texto: #E9BC68;
        --vega-card: #171717;
        --vega-hover: rgba(255, 255, 255, .045);
        /* Chips com fundo NA COR, e nao mais bege: nas referencias o estado
           aparece pelo matiz, e o cinza uniforme nao distinguia nada. */
        --vega-chip-blue-bg: #16233D;  --vega-chip-blue-fg: #A9C2FF;
        --vega-chip-green-bg: #0F2318; --vega-chip-green-fg: #6FD69F;
        --vega-chip-amber-bg: #261E0E; --vega-chip-amber-fg: #E7B857;
        --vega-chip-red-bg: #271512;   --vega-chip-red-fg: #FF9A90;
        /* O chip cinza e o unico sem matiz: e ausencia de estado. */
        --vega-chip-gray-bg: #262626;  --vega-chip-gray-fg: #D4D4D4;
        --vega-chip-done-bg: #18211C;  --vega-chip-done-fg: #8FAF9C;

        /* WhatsApp escuro — os mesmos tons do app no modo noturno.

           A tela do WhatsApp NAO acompanha a paleta do CRM, de proposito: ela
           existe para parecer o aplicativo, e quem atende reconhece o lugar
           pelo tom. Cheguei a alinhar a casca ao preto neutro e o Daniel pediu
           de volta. Se um dia parecer colada, o ajuste e aqui e so aqui. */
        --wa-header:      #202C33;
        --wa-chat-bg:     #0B141A;
        --wa-bubble-in:   #202C33;
        --wa-bubble-out:  #005C4B;
        --wa-text:        #E9EDEF;
        /* Mesmo motivo do tema claro: o #8696A0 do aplicativo dava 2.61. */
        --wa-text-2:      #A7B7C1;
        /* Sobe de #4FD69E: aquele dava 4.35 sobre o balao VERDE (o de saida),
           logo abaixo dos 4.5. Este da 5.05 la e 9.06 sobre o balao cinza.
           Nao e cor do aplicativo — o verde do app dava 2.63 e ja tinha sido
           trocado; so faltava conferir contra o balao de saida. */
        --wa-autor:       #6FE3B2;
        --wa-accent-forte: #00785F;
        --wa-alerta:      #F2837C;
        --wa-ambar-texto: #F0B357;
        --wa-line:        #2A3942;
        --wa-panel:       #111B21;
    }

    /* Neutraliza os cinzas azulados do Krayin no dark → preto neutro. O fundo
       do CRM é a MESMA cor dos cards (#171717), como no claro (branco em
       ambos); o que separa card de fundo é a linha. Pedido de 19/09/2026. */
    .dark body { background-color: #171717 !important; }
    /* Cor do texto que não define a sua: a da marca, nos dois temas. Sem isto
       o modo escuro herdava o cinza-escuro do Krayin (text-gray-800) e textos
       sem cor própria (rótulos, caixas de marcar, cartões do celular) ficavam
       quase invisíveis no fundo escuro. */
    body { color: var(--vega-ink); }
    /* Texto na cor da marca (abas ativas do Krayin: "Todos", "Notas"...): no
       escuro o azul de botão dá 3,7:1 sobre o fundo; o azul de texto dá mais
       de 7:1. */
    .dark .text-brandColor, .dark .\!text-brandColor { color: var(--vega-blue-texto) !important; }
    .dark .dark\:bg-gray-950 { background-color: #171717 !important; }
    .dark .dark\:bg-gray-900 { background-color: #171717 !important; }
    .dark .dark\:bg-gray-800 { background-color: #212121 !important; }
    .dark .dark\:border-gray-800 { border-color: #262626 !important; }
    .dark .dark\:border-gray-700 { border-color: #343434 !important; }
    .dark .dark\:border-gray-900 { border-color: #212121 !important; }

    /* Cards de lead do kanban (Krayin): fundo neutro, sem sombra branca */
    .lead-item { box-shadow: 0 1px 3px rgba(11, 18, 32, .07) !important; }
    .dark .lead-item {
        background-color: var(--vega-card) !important;
        border-color: var(--vega-line) !important;
        box-shadow: none !important;
    }

    /* Azul de marca do Krayin (#0E90D9) → azul Aureon; item de menu ativo neutro no dark */
    .bg-brandColor { background-color: var(--vega-blue) !important; }
    /* Item de menu ativo: superficie elevada, e nao o azul cheio. Nas
       referencias o ativo e um degrau de luz, e nao um bloco de cor. */
    .dark .bg-brandColor { background-color: #212121 !important; color: var(--vega-ink) !important; }
    .text-brandColor { color: var(--vega-blue-texto) !important; }

    /* Conteúdo acompanha o sidebar: 92px colapsado, 264px expandido (hover) */
    @media (min-width: 1024px) {
        /* O padding segue o estado VISUAL da barra, `sidebar-collapsed`, e nao
           mais a preferencia fixada.

           Antes usava a preferencia justamente para o conteudo nao "pular" ao
           passar o mouse. Na pratica saiu pior: a barra abria POR CIMA do
           conteudo e cobria o comeco de cada linha. Entre um deslocamento suave
           de 130px e texto tapado, o deslocamento ganha — e a transicao de .3s
           ja existia para suavizar. */
        [dir="ltr"] .vega-content-pad { padding-left: 264px; transition: padding .3s; }
        [dir="ltr"] .group\/container.sidebar-collapsed .vega-content-pad { padding-left: 92px; }
        [dir="rtl"] .vega-content-pad { padding-right: 264px; transition: padding .3s; }
        [dir="rtl"] .group\/container.sidebar-collapsed .vega-content-pad { padding-right: 92px; }

        /* O cabecalho recua igual ao conteudo.

           A barra lateral e `fixed` e sobe ate o topo, entao ela nao ocupa
           espaco no fluxo: sem este recuo o primeiro botao do cabecalho nasceria
           DEBAIXO dela e ficaria inalcancavel. Os mesmos 264/92px do conteudo,
           para os dois recuarem juntos quando a barra encolhe. */
        [dir="ltr"] .vega-header-pad { padding-left: 264px; transition: padding .3s; }
        [dir="ltr"] .group\/container.sidebar-collapsed .vega-header-pad { padding-left: 92px; }
        [dir="rtl"] .vega-header-pad { padding-right: 264px; transition: padding .3s; }
        [dir="rtl"] .group\/container.sidebar-collapsed .vega-header-pad { padding-right: 92px; }
    }

    /* Hover dos itens do sidebar no dark: era gray-950 azul-preto → cinza neutro */
    .dark .hover\:dark\:bg-gray-950:hover { background-color: #212121 !important; }
    .dark .dark\:hover\:bg-gray-950:hover { background-color: #212121 !important; }
    .dark .dark\:focus\:bg-gray-950:focus { background-color: #212121 !important; }

    /* Scrollbars Vega — finos, arredondados e theme-aware (substitui o padrão cru) */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent !important; }
    ::-webkit-scrollbar-thumb {
        background: #C6CDD8 !important;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box !important;
    }
    ::-webkit-scrollbar-thumb:hover { background: #A9B2C0 !important; background-clip: padding-box !important; }
    ::-webkit-scrollbar-corner { background: transparent; }
    .dark ::-webkit-scrollbar-thumb { background: #343434 !important; background-clip: padding-box !important; }
    .dark ::-webkit-scrollbar-thumb:hover { background: #57524A !important; background-clip: padding-box !important; }

    /* Firefox */
    * { scrollbar-width: thin; scrollbar-color: #C6CDD8 transparent !important; }
    .dark * { scrollbar-color: #343434 transparent !important; }

    /* Skeleton de carregamento (shimmer) no dark. Acompanha as superficies:
       com os tons quentes antigos ele piscava bege sobre o preto neutro. */
    .dark .shimmer {
        background: linear-gradient(to right, #171717 8%, #242424 18%, #171717 33%) !important;
        background-size: 1250px 100% !important;
    }
    .dark .light-shimmer-bg {
        background: linear-gradient(to right, #212121 8%, #2C2C2C 18%, #212121 33%) !important;
        background-size: 1250px 100% !important;
    }

    /* Tipografia base do produto.

       Manrope como primeiro fallback e proposital: se o Fontshare cair, a tela
       volta para a fonte da marca em vez de uma generica do sistema. */
    body, .font-inter {
        font-family: 'Satoshi', 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
        letter-spacing: -0.008em;
    }
    html:not(.dark) body { background-color: var(--vega-bg); }

    /* ---- Componentes Vega (usam só tokens → theme-aware) ---- */
    .vega-eyebrow {
        /* Sem monoespacada: ela serve para alinhar numero, nao para rotular.
           Em maiuscula e espacada, o texto ficava largo e com cara de terminal.
           O peso e o `letter-spacing` dao a hierarquia sem isso. */
        font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
        text-transform: uppercase; color: var(--vega-ink-3);
    }

    .vega-card {
        background: var(--vega-card);
        border: 1px solid var(--vega-line);
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 6px 20px -12px rgba(11, 18, 32, .10);
    }
    .dark .vega-card { box-shadow: none; }

    /* ---- KPIs do topo do painel ----
       Cinco cards brancos identicos nao dizem qual numero importa. O primeiro
       vai preenchido com o azul da marca e leva o olho; os outros ficam quietos,
       com um selo colorido no icone. */
    .vega-kpi-destaque {
        background: linear-gradient(140deg, var(--vega-blue) 0%, var(--vega-blue-deep) 100%);
        border: 1px solid transparent; border-radius: 16px; color: #fff;
        box-shadow: 0 10px 26px -14px rgba(37, 99, 255, .6);
    }
    .vega-kpi-destaque .vega-eyebrow { color: rgba(255, 255, 255, .74); }
    .vega-kpi-destaque .vega-stat { color: #fff; }

    /* Selo do icone. Dois tons, nao quatro: o icone ja diferencia o card, e uma
       cor por metrica viraria arco-iris ao lado do destaque. */
    .vega-kpi-selo {
        width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
        display: grid; place-content: center;
    }
    .vega-kpi-selo svg { width: 17px; height: 17px; stroke-width: 1.9; }
    .vega-kpi-azul  { background: var(--vega-chip-blue-bg);  color: var(--vega-chip-blue-fg); }
    .vega-kpi-verde { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-kpi-claro { background: rgba(255, 255, 255, .2);   color: #fff; }

    /* Sparkline do card. Tom de APOIO, nao a cor cheia: ela acompanha o numero,
       nao disputa com ele. O ponto de hoje e o unico em cor forte. */
    /* O Tailwind do Krayin compilou col-span 2, 4, 5, 7 e 8, mas NAO o 3.
       Classe que nao existe no CSS nao avisa: o bloco simplesmente ocupa uma
       coluna e encolhe para 82px no meio da linha. Ja mordeu antes com outras
       classes, e a licao e a mesma: conferir no CSS compilado antes de usar. */
    @media (min-width: 1280px) {
        .xl\:col-span-3 { grid-column: span 3 / span 3; }
        /* O 12 tambem nao: a tendencia de receita na largura toda encolhia
           para uma coluna de 82px. */
        .xl\:col-span-12 { grid-column: span 12 / span 12; }
        .xl\:col-span-6 { grid-column: span 6 / span 6; }
    }

    /* A marca no topo da barra. Encolhida, troca a palavra pelo simbolo. */
    /* ---- Largura e respiro da barra lateral ----

       Referencia: a barra do Aureon Hub. A daqui era estreita e apertada, com
       o texto quase encostando nas duas bordas e os itens colados um no outro.
       Nao e copia: o que veio de la foi a PROPORCAO — mais largura, mais ar em
       volta de cada item e mais separacao entre os grupos.

       A largura mora aqui, e nao numa classe do Tailwind: valor arbitrario novo
       nao existe no CSS compilado do Krayin, e a barra cairia para largura
       automatica sem nenhum erro que explicasse. */
    /* O rodape vem de uma CONFIGURACAO gravada no banco, com a cor da marca em
       estilo inline. No tema escuro o azul cheio da 3.26 de contraste, abaixo
       do minimo de 4.5. `!important` porque estilo inline nao se sobrescreve de
       outro jeito, e a alternativa seria editar o dado em cada clinica. */
    .dark .vega-rodape span[style] { color: #7FA8FF !important; }

    .vega-side { width: 248px; --vega-marca-h: 72px; }
    .sidebar-collapsed .vega-side { width: 76px; --vega-marca-h: 104px; }

    /* Desconta a faixa da marca (altura + 14px de margem). O numero ficava
       escrito na mao no blade e ja tinha ficado defasado uma vez, deixando o
       ultimo item do menu embaixo da borda da janela. */
    /* Desconta também os 26px da linha da versão (`vega-side-versao`, presa
       no pé da barra): sem isso, em janela de 844px de altura o último item
       ("Configurações") rolava por baixo do texto da versão e os dois
       ficavam escritos um em cima do outro. */
    .vega-side-rolagem { height: calc(100% - var(--vega-marca-h) - 14px - 26px); }

    /* Recuo lateral dos itens. Sai do `px-4` (16px) do Krayin, apertado numa
       barra estreita e desproporcional numa larga. */
    .vega-side .vega-acc,
    .vega-side nav > div,
    .vega-side-movel .vega-acc,
    .vega-side-movel nav > div { padding-left: 12px; padding-right: 12px; }

    /* O item em si: era `p-1.5` (6px em volta), o que deixava as linhas quase
       se tocando. 10px na vertical da a mesma respiracao da referencia.
       `.vega-side-movel` e a gaveta do celular, que segue o mesmo desenho. */
    .vega-side nav summary,
    .vega-side nav > div > a,
    .vega-side-movel nav summary,
    .vega-side-movel nav > div > a {
        padding: 10px 12px; gap: 12px; border-radius: 10px;
    }
    /* ===================== Troca de secao ===================== */

    /* Ir de uma secao a outra pelo menu e uma navegacao de verdade (cada
       tela do Krayin monta os proprios componentes Vue ao carregar; trocar
       o HTML no lugar, como nas abas e nos filtros, deixaria Leads, WhatsApp
       e as tabelas mortos). O que da a sensacao de "sem carregamento" e a
       View Transition entre documentos: o navegador tira uma foto da tela
       atual, carrega a proxima e faz o cruzamento com uma animacao curta,
       sem o piscar branco. A barra lateral e o cabecalho ficam parados (tem
       nome proprio na transicao); so o conteudo desliza. Navegadores sem
       suporte (Firefox) navegam como sempre. */
    @view-transition { navigation: auto; }

    .vega-side { view-transition-name: vega-barra; }
    .vega-header-pad { view-transition-name: vega-cabecalho; }

    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
    ::view-transition-old(root) { animation-name: vega-secao-sai; }
    ::view-transition-new(root) { animation-name: vega-secao-entra; }
    ::view-transition-old(vega-barra), ::view-transition-new(vega-barra),
    ::view-transition-old(vega-cabecalho), ::view-transition-new(vega-cabecalho) { animation: none; }

    @keyframes vega-secao-sai   { to   { opacity: 0; transform: translateY(6px); } }
    @keyframes vega-secao-entra { from { opacity: 0; transform: translateY(-5px); } }

    @media (prefers-reduced-motion: reduce) {
        ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }

    /* ===================== Painel: estrategia de dashboard ===================== */
    /* Icone "i" com a definicao da metrica. A caixa e o #vega-dica de
       partials/ui: um elemento fixo no body, por cima de tudo. Como ::after
       do icone ela nascia dentro do cartao e saia cortada pelo overflow. */
    .vega-info {
        display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
        width: 16px; height: 16px; margin-left: 4px; border-radius: 50%;
        font-size: 10px; font-weight: 800; font-style: italic; font-family: Georgia, serif;
        color: var(--vega-ink-3); border: 1px solid var(--vega-line); cursor: help; position: relative;
    }
    .vega-info:focus-visible { outline: 2px solid var(--vega-blue); }
    #vega-dica {
        position: fixed; z-index: 10005; padding: 10px 12px; border-radius: 10px;   /* acima do header (10001) */
        background: var(--vega-ink); color: var(--vega-card); font-size: 12px; font-weight: 500; line-height: 1.45;
        text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(11, 18, 32, .18);
        opacity: 0; transform: translateY(3px); pointer-events: none;
        transition: opacity .14s ease, transform .14s ease;
    }
    #vega-dica.vega-dica-baixo { transform: translateY(-3px); }
    #vega-dica.vega-dica-visivel { opacity: 1; transform: none; }
    #vega-dica[hidden] { display: none; }

    /* Acoes do dia: uma linha por pendencia, com a severidade na borda. */
    .vega-acoes-lista { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .vega-acao {
        display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
        padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vega-line); border-left-width: 4px;
        background: var(--vega-card); transition: transform .12s, box-shadow .12s; text-decoration: none;
    }
    .vega-acao:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11, 18, 32, .08); }
    .vega-acao-n { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--vega-ink-3); }
    .vega-acao-texto { font-size: 13px; color: var(--vega-ink-2); }
    .vega-acao-cta { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--vega-blue-texto); }
    .vega-acao-critica { border-left-color: var(--vega-red-texto); }
    .vega-acao-critica .vega-acao-n { background: var(--vega-red-texto); }
    .vega-acao-alta { border-left-color: var(--vega-amber); }
    .vega-acao-alta .vega-acao-n { background: var(--vega-amber); }
    .vega-acao-media { border-left-color: var(--vega-blue); }
    .vega-acao-media .vega-acao-n { background: var(--vega-blue); }
    .vega-acao-baixa { border-left-color: var(--vega-line); }
    .vega-acoes-vazio { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
    .vega-acoes-ok { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vega-chip-green-bg); color: var(--vega-green); font-weight: 800; }

    /* Acoes do dia: uma faixa, nao um card. Icone e resumo a esquerda, as
       pendencias no meio, o contador a direita. A cor da faixa e do tom mais
       grave: ambar quando ha o que fazer, vermelho se algo e critico, verde
       em dia. Os itens NAO levam borda colorida (pedido do Daniel). */
    .vega-faixa {
        --faixa-cor: var(--vega-amber-texto); --faixa-fundo: var(--vega-chip-amber-bg);
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
        padding: 14px 18px; border-radius: 16px; background: var(--faixa-fundo);
    }
    .vega-faixa-critica { --faixa-cor: var(--vega-chip-red-fg); --faixa-fundo: var(--vega-chip-red-bg); }
    .vega-faixa-ok { --faixa-cor: var(--vega-green); --faixa-fundo: var(--vega-chip-green-bg); }
    .vega-faixa-cabeca { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .vega-faixa-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--faixa-cor); }
    .vega-faixa-sub { font-size: 12px; color: var(--vega-ink-3); white-space: nowrap; }
    .vega-faixa-meio { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .vega-faixa-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--vega-card); box-shadow: 0 1px 2px rgba(11, 18, 32, .05); }
    /* O numero: azul da marca. O ambar escuro do texto virava marrom no circulo. */
    .vega-faixa-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 50%; font-size: 13px; font-weight: 800; color: #fff !important; background: var(--vega-blue); }
    .vega-faixa-item-critica .vega-faixa-n { background: var(--vega-chip-red-fg); }
    .vega-faixa-ok .vega-faixa-n { background: var(--vega-green); }
    .vega-faixa-texto { flex: 1; min-width: 0; }
    .vega-faixa-titulo { font-size: 14px; font-weight: 700; color: var(--vega-ink); line-height: 1.2; }
    .vega-faixa-porque { font-size: 12px; color: var(--vega-ink-3); margin-top: 2px; }
    .vega-faixa-cta { flex: none; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--vega-blue-texto); background: var(--vega-chip-blue-bg); text-decoration: none; white-space: nowrap; transition: transform .12s; }
    .vega-faixa-cta:hover { transform: translateY(-1px); }
    .vega-faixa-fim { padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--faixa-cor) 25%, transparent); text-align: center; }
    .vega-faixa-contador { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faixa-cor); }
    .vega-faixa-mais summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--vega-blue-texto); padding: 2px 4px; }
    .vega-faixa-mais .vega-faixa-item { margin-top: 8px; }
    @media (max-width: 900px) {
        .vega-faixa { grid-template-columns: 1fr; gap: 12px; }
        .vega-faixa-fim { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--faixa-cor) 25%, transparent); padding-top: 10px; text-align: left; display: flex; gap: 10px; align-items: baseline; }
        .vega-faixa-item { flex-wrap: wrap; }
        /* O texto toma a linha inteira ao lado do numero; o botao desce. */
        .vega-faixa-texto { flex: 1 1 calc(100% - 44px); }
        .vega-faixa-cta { margin-left: 44px; }
    }

    /* Indicadores: o cartao acompanha a altura do funil ao lado; o heroi
       cresce e a faixa dos quatro fica no rodape, sem vao no meio. */
    /* Indicadores ao lado do funil: o cartao acompanha a altura da linha, o
       heroi cresce e a faixa fica no rodape, sem vao. O grafico de fundo do
       heroi tem altura propria (nao estica com o cartao), senao vira um pico. */
    /* Linha 1 do painel: cards iguais que se reacomodam sozinhos. */
    /* Linhas de cards do painel: cada card enche a coluna e os rodapes
       descem, para os vizinhos terminarem juntos. */
    .vega-linha-cards > div { display: flex; flex-direction: column; min-width: 0; }
    .vega-linha-cards > div > .vega-card { flex: 1 1 auto; display: flex; flex-direction: column; }
    /* O rodape de cada um desce ate o fim, para os quatro terminarem juntos. */
    .vega-linha-cards .vega-agenda-fim, .vega-linha-cards .vega-resposta-rodape, .vega-linha-cards .vega-meta-rodape { margin-top: auto; }
    .vega-linha-cards .vega-agenda-fim { padding-top: 10px; }
    .vega-linha-cards .vega-linha-tempo { margin-bottom: 14px; }

    /* Indicadores integrado: o card e o azul. O heroi deixa de ser um bloco
       dentro dele (sem borda, sem sombra, sem fundo proprio) e os quatro
       blocos viram vidro translucido sobre o mesmo azul. */
    .vega-indicadores-azul {
        background: linear-gradient(140deg, var(--vega-blue) 0%, var(--vega-blue-deep) 100%);
        border-color: transparent; color: #fff; position: relative; overflow: hidden;
        box-shadow: 0 10px 26px -14px rgba(37, 99, 255, .6);
    }
    .vega-indicadores-azul .vega-title, .vega-indicadores-azul .vega-eyebrow { color: #fff; }
    .vega-indicadores-azul .vega-title { color: #fff !important; }
    .vega-indicadores-azul .vega-chip-gray { background: rgba(255, 255, 255, .16); color: #fff; }
    .vega-indicadores-azul .vega-info { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .4); }
    .vega-indicadores-azul .vega-heroi-integrado { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 8px 0 0; margin: 0; }
    .vega-indicadores-azul .vega-heroi-onda { margin: 4px 0 -8px; }
    .vega-heroi-integrado .vega-eyebrow { color: rgba(255, 255, 255, .74); }
    .vega-heroi-integrado .vega-kpi-nota { color: rgba(255, 255, 255, .78); }
    .vega-heroi-integrado .vega-spark { color: #fff; }
    .vega-heroi-integrado .vega-spark-line { stroke: #fff; }
    .vega-heroi-integrado .vega-spark-hoje, .vega-heroi-integrado .vega-spark-ponto { fill: #fff; }
    .vega-heroi-integrado .vega-heroi-onda { margin-left: 0; margin-right: 0; }
    /* Os quatro sem fundo e sem traco: so o texto sobre o azul. */
    .vega-indicadores-azul .vega-kpi-bloco { background: none; border: 0; border-radius: 0; padding: 10px 4px 4px; }
    .vega-indicadores-azul .vega-kpi-bloco:hover { background: rgba(255, 255, 255, .06); border-radius: 8px; }
    .vega-indicadores-azul .vega-kpi-blocos { gap: 6px 18px; margin-top: 10px; }
    .vega-indicadores-azul .vega-kpi-bloco-icone { color: #fff; }
    .vega-indicadores-azul .vega-kpi-bloco-rotulo { color: rgba(255, 255, 255, .78); }
    .vega-indicadores-azul .vega-kpi-bloco-valor { color: #fff; }
    .vega-indicadores-azul .vega-kpi-bloco .vega-spark { color: #fff; }
    .vega-indicadores-azul .vega-kpi-bloco .vega-spark-line { stroke: #fff; }
    .vega-indicadores-azul .vega-kpi-bloco .vega-spark-hoje { fill: #fff; }
    /* O brilho que passeia no heroi azul agora e do card. */
    .vega-indicadores-azul::before, .vega-indicadores-azul::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
    .vega-indicadores-azul::before { width: 52%; aspect-ratio: 1; top: -28%; right: -10%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%); animation: vega-brilho-a 18s ease-in-out infinite; }
    .vega-indicadores-azul::after { width: 46%; aspect-ratio: 1; bottom: -30%; left: -8%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 66%); animation: vega-brilho-b 24s ease-in-out infinite; }
    .vega-indicadores-azul > * { position: relative; z-index: 1; }
    .vega-heroi-integrado::before, .vega-heroi-integrado::after { display: none; }
    @media (prefers-reduced-motion: reduce) { .vega-indicadores-azul::before, .vega-indicadores-azul::after { animation: none; } }

    /* Indicadores: heroi compacto (rotulo, numero, pill, onda com pontos e a
       etiqueta do ultimo valor) e os quatro em blocos 2x2 com icone. */
    .vega-indicadores { display: flex; flex-direction: column; }
    /* Indicadores principais (referência de set/2026) */
    .vega-ind-topo { display: flex; align-items: flex-start; gap: 12px; }
    .vega-ind-icone { flex: none; display: inline-flex; color: #fff; margin-top: 2px; }
    .vega-ind-sub { font-size: 12px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
    .vega-ind-heroi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 20px; align-items: center; align-content: center; margin-top: 18px; flex: 1; }
    @media (max-width: 760px) { .vega-ind-heroi { grid-template-columns: 1fr; } }
    .vega-ind-numero { display: block; text-decoration: none; color: #fff; }
    .vega-ind-numero .vega-eyebrow { color: rgba(255, 255, 255, .74); }
    .vega-ind-numero .vega-heroi-num { font-size: clamp(30px, 2.6vw, 40px); margin-top: 6px; color: #fff; }
    .vega-ind-numero .vega-kpi-nota { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .78); }
    .vega-ind-grafico { min-width: 0; }
    .vega-ind-onda { margin: 0; height: 110px; padding-top: 22px; }
    .vega-ind-onda .vega-spark { color: #fff; }
    .vega-ind-onda .vega-spark-line { stroke: #fff; }
    .vega-ind-onda .vega-spark-ponto, .vega-ind-onda .vega-spark-hoje { fill: #fff; }
    .vega-ind-eixo { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
    .vega-ind-semonda { font-size: 12px; color: rgba(255, 255, 255, .7); }
    .vega-ind-blocos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
    @media (max-width: 1400px) { .vega-ind-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .vega-ind-bloco { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px 8px; border-radius: 14px; background: rgba(255, 255, 255, .11); color: #fff; text-decoration: none; transition: background .12s; }
    .vega-ind-bloco:hover { background: rgba(255, 255, 255, .18); }
    /* O rótulo quebra em duas linhas em vez de cortar: com `nowrap` num flex
       as reticências não aparecem (o texto é item anônimo) e "Receita
       contratada" virava "Receita contrata" até no desktop. */
    .vega-ind-bloco-topo { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, .85); min-width: 0; }
    @media (max-width: 400px) { .vega-ind-bloco-topo { font-size: 11px; gap: 5px; } }
    .vega-ind-bloco-icone { flex: none; display: inline-flex; color: #fff; }
    .vega-ind-bloco-valor, .vega-indicadores-azul .vega-ind-bloco .vega-stat { font-size: 18px; color: #fff; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
    .vega-ind-bloco-onda { display: block; margin-top: 2px; }
    .vega-ind-bloco-onda .vega-spark { width: 100%; height: 30px; color: #fff; }
    .vega-ind-bloco-onda .vega-spark-line { stroke: #fff; }
    .vega-ind-bloco-onda .vega-spark-hoje { fill: #fff; }
    /* Agenda de hoje: a lista rola dentro do card em vez de esticar a linha. */
    /* No máximo duas consultas à vista; o resto rola. Assim o card não puxa a linha inteira para baixo. */
    .vega-linha-cards .vega-agenda .vega-linha-tempo { overflow-y: auto; max-height: 150px; flex: none; padding-right: 4px; scrollbar-width: thin; }
    .vega-heroi-compacto { padding: 18px 18px 0; display: flex; flex-direction: column; }
    .vega-heroi-compacto .vega-heroi-num { font-size: clamp(28px, 2.4vw, 38px); margin-top: 4px; }
    .vega-heroi-compacto .vega-kpi-nota { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
    .vega-heroi-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 800; font-size: 11px; }
    /* A onda com folga em cima, para a etiqueta do ultimo valor nao subir
       em cima do texto. */
    .vega-heroi-onda { position: relative; height: 108px; padding-top: 24px; box-sizing: border-box; margin: 4px -18px 0; }
    .vega-heroi-onda .vega-spark { width: 100%; height: 100%; }
    .vega-spark-ponto { fill: currentColor; opacity: 0; animation: vega-spark-surge .3s ease-out .75s forwards; }
    .vega-kpi-destaque .vega-spark-ponto { fill: #fff; }
    .vega-spark-rotulo {
        position: absolute; transform: translate(-100%, -130%); padding: 3px 8px; border-radius: 8px;
        background: var(--vega-card); color: var(--vega-ink); font-size: 11px; font-weight: 800; white-space: nowrap;
        box-shadow: 0 4px 12px rgba(11, 18, 32, .18); opacity: 0; animation: vega-spark-surge .3s ease-out .9s forwards;
    }
    .vega-kpi-blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
    .vega-kpi-bloco { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vega-line); background: var(--vega-card); text-decoration: none; min-width: 0; transition: border-color .12s; }
    .vega-kpi-bloco:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); }
    .vega-kpi-bloco-icone { flex: none; color: var(--vega-blue); margin-top: 1px; }
    .vega-kpi-bloco-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .vega-kpi-bloco-rotulo { font-size: 11px; color: var(--vega-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-kpi-bloco-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
    .vega-kpi-bloco-valor { font-size: 18px; font-weight: 800; color: var(--vega-ink); white-space: nowrap; line-height: 1.1; }
    /* Indicadores: cada numero do rodape e um link para a lista. */
    .vega-kpi-link { display: block; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; transition: background .12s; text-decoration: none; }
    .vega-kpi-link:hover { background: var(--vega-hover); }
    a.vega-heroi { text-decoration: none; }

    /* Funil horizontal: cabecas (rotulo, numero, taxa) alinhadas as colunas
       do desenho. No celular rola de lado dentro do cartao. */
    .vega-funil-rolagem { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
    .vega-funil { min-width: 560px; }
    /* No celular a borda direita esmaece: diz que o funil continua e rola. */
    @media (max-width: 640px) {
        .vega-funil-rolagem { mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); }
    }
    .vega-funil-cabecas { display: grid; grid-template-columns: repeat(var(--vega-funil-colunas, 7), minmax(0, 1fr)); gap: 0; }
    .vega-funil-cabeca { display: flex; flex-direction: column; gap: 3px; padding: 0 8px 10px 10px; border-left: 1px solid var(--vega-line); text-decoration: none; min-width: 0; border-radius: 8px 8px 0 0; transition: background .12s; }
    .vega-funil-cabeca:first-child { border-left: 0; padding-left: 2px; }
    .vega-funil-cabeca:hover { background: var(--vega-hover); }
    .vega-funil-rotulo { font-size: 11px; font-weight: 600; color: var(--vega-ink-3); line-height: 1.2; text-wrap: balance; }
    .vega-funil-valor { font-size: 22px; font-weight: 700; color: var(--vega-ink); line-height: 1.1; letter-spacing: -.01em; }
    .vega-funil-taxas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 18px; }
    .vega-funil-taxas .vega-chip { font-size: 10px; padding: 1px 6px; }
    .vega-funil-corpo { position: relative; height: 170px; }
    .vega-funil-svg { width: 100%; height: 100%; display: block; }
    .vega-funil-cliques { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--vega-funil-colunas, 7), minmax(0, 1fr)); }
    .vega-funil-cliques a { display: block; }
    .vega-funil-cliques a:hover { background: color-mix(in srgb, var(--vega-blue) 8%, transparent); }

    /* Meta de faturamento: numero grande com a pill do percentual, barra
       grossa com o percentual dentro do preenchimento (listrado, para ler
       como progresso e nao como grafico), e o rodape com o que mede. */
    .vega-meta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .vega-meta-ir {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
        border-radius: 10px; background: var(--vega-blue); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
        transition: transform .12s, box-shadow .12s;
    }
    .vega-meta-ir:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 99, 255, .28); }
    .vega-meta-numero { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .vega-meta-valor { font-size: 30px; line-height: 1.05; color: var(--vega-ink); }
    .vega-meta-pill { font-size: 12px; padding: 3px 9px; }
    .vega-meta-sub { margin-top: 4px; font-size: 12px; color: var(--vega-ink-3); }
    .vega-meta-barra {
        position: relative; display: flex; align-items: center; height: 52px; margin-top: 14px;
        border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--vega-blue) 9%, var(--vega-card));
    }
    .vega-meta-cheio {
        height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; border-radius: 14px;
        color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0;
        background:
            repeating-linear-gradient(-55deg, rgba(255, 255, 255, .13) 0 8px, transparent 8px 18px),
            linear-gradient(90deg, var(--vega-blue-deep), var(--vega-blue) 60%, #3FB8FF);
    }
    .vega-meta-barra.bateu .vega-meta-cheio { background:
            repeating-linear-gradient(-55deg, rgba(255, 255, 255, .13) 0 6px, transparent 6px 14px),
            linear-gradient(90deg, #0E7A4C, var(--vega-green) 60%, #4ADE9A); }
    /* Abaixo de 18% o numero fica fora, e o preenchimento nao leva padding
       (senao o 0% ainda mostra uma lasca azul). */
    .vega-meta-cheio.curta { padding: 0; }
    .vega-meta-fora { position: absolute; left: 14px; font-size: 15px; font-weight: 800; color: var(--vega-ink-2); font-variant-numeric: tabular-nums; }
    .vega-meta-fora small { font-weight: 500; color: var(--vega-ink-3); }
    .vega-meta-rodape { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11px; color: var(--vega-ink-3); }

    /* Agenda de hoje: linha do tempo com bolinhas ligadas por um fio. */
    .vega-agenda { display: flex; flex-direction: column; }
    .vega-agenda-topo { display: flex; align-items: flex-start; gap: 12px; }
    /* Icones sem caixa atras (regra do Daniel): so o traco, na cor. */
    .vega-agenda-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 2px; color: var(--vega-blue); }
    .vega-linha-tempo { list-style: none; margin: 16px 0 0; padding: 0; }
    .vega-lt-item { position: relative; display: grid; grid-template-columns: 22px 52px 1fr auto; align-items: start; gap: 0 12px; padding: 0 0 18px; }
    .vega-lt-item:last-child { padding-bottom: 0; }
    /* O fio: do centro desta bolinha ao centro da proxima. */
    .vega-lt-item:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 2px; background: var(--vega-line); }
    .vega-lt-bola {
        position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px;
        border-radius: 50%; border: 2px solid var(--vega-line); background: var(--vega-card); font-size: 11px; font-weight: 800; color: #fff;
    }
    .vega-lt-item.confirmada .vega-lt-bola { border-color: var(--vega-green); background: var(--vega-green); }
    .vega-lt-hora { display: flex; flex-direction: column; line-height: 1.1; }
    .vega-lt-hora .vega-stat { font-size: 15px; font-weight: 700; color: var(--vega-ink); }
    .vega-lt-hora small { font-size: 10px; color: var(--vega-ink-3); margin-top: 2px; }
    .vega-lt-corpo { min-width: 0; }
    .vega-lt-nome { font-size: 14px; font-weight: 600; color: var(--vega-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vega-lt-proc { font-size: 12px; color: var(--vega-ink-2); margin-top: 1px; }
    .vega-lt-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 11px; color: var(--vega-ink-3); }
    .vega-lt-meta span { display: inline-flex; align-items: center; gap: 4px; }
    .vega-lt-chip { align-self: center; white-space: nowrap; }
    .vega-agenda-fim { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--vega-chip-blue-bg); font-size: 12px; }
    .vega-linha-tempo + .vega-agenda-fim { margin-top: 14px; }
    .vega-linha-tempo { margin-top: 12px; }
    .vega-lt-item { padding-bottom: 14px; }
    .vega-agenda-fim-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--vega-blue); }
    @media (max-width: 480px) {
        .vega-lt-item { grid-template-columns: 22px 46px 1fr; }
        .vega-lt-chip { grid-column: 3; justify-self: start; margin-top: 6px; }
        /* No celular o botao "Ver agenda" desce para baixo do titulo, senao o
           subtitulo com a data e os numeros quebra em cinco linhas. */
        .vega-agenda-topo { flex-wrap: wrap; }
        .vega-agenda-topo > a { order: 3; margin-left: 52px; }
        .vega-agenda-topo > .min-w-0 { flex-basis: calc(100% - 52px); }
    }

    /* Tempo de 1a resposta: icone e pill no topo, media grande com a
       variacao e o mini grafico, tres blocos, rodape agente x atendente. */
    /* O topo (icone, titulo, media e grafico) fica num painel azul claro,
       como na referencia; os blocos e o rodape ficam fora dele. */
    .vega-resposta-painel { position: relative; overflow: hidden; margin: -8px -8px 0; padding: 16px 16px 12px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--vega-blue) 9%, var(--vega-card)), color-mix(in srgb, var(--vega-blue) 4%, var(--vega-card))); }
    .vega-resposta-topo { display: flex; align-items: flex-start; gap: 12px; }
    .vega-resposta-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 2px; color: var(--vega-blue); }
    .vega-resposta-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
    .vega-resposta-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .vega-resposta-media { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 14px; }
    /* A mesma fonte do numero grande do card de receita (Satoshi, sem mono). */
    .vega-resposta-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-resposta-delta { margin-top: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .vega-resposta-delta span { font-weight: 500; color: var(--vega-ink-3); }
    .vega-resposta-grafico { flex: 1; max-width: 240px; min-width: 120px; height: 78px; margin-bottom: -12px; }
    .vega-resposta-grafico .vega-spark { width: 100%; height: 100%; }
    .vega-resposta-blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
    .vega-resposta-bloco { padding: 12px; border-radius: 12px; background: var(--vega-card); border: 1px solid var(--vega-line); box-shadow: 0 1px 2px rgba(11, 18, 32, .04); }
    .vega-resposta-bloco-icone { display: inline-flex; align-items: center; margin-bottom: 8px; }
    .vega-resposta-bloco-icone.azul { color: var(--vega-blue); }
    .vega-resposta-bloco-icone.vermelho { color: var(--vega-chip-red-fg); }
    .vega-resposta-bloco-rotulo { font-size: 11px; color: var(--vega-ink-3); }
    .vega-resposta-bloco-valor { font-size: 18px; font-weight: 800; color: var(--vega-ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
    .vega-resposta-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--vega-hover); font-size: 11px; color: var(--vega-ink-3); }
    .vega-resposta-rodape b { color: var(--vega-ink); }
    @media (max-width: 480px) { .vega-resposta-blocos { grid-template-columns: 1fr 1fr; } .vega-resposta-grafico { display: none; } }

    /* Conversao do funil: icone (sem caixa), nome e numero, barra, percentual. */
    .vega-conv { display: flex; flex-direction: column; gap: 12px; }
    .vega-conv-linha { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px; align-items: center; gap: 12px; text-decoration: none; border-radius: 8px; }
    a.vega-conv-linha:hover .vega-conv-nome { color: var(--vega-blue-texto); }
    .vega-conv-linha-mini { padding: 6px 0; border-top: 1px solid var(--vega-line); }
    .vega-conv-icone { display: inline-flex; align-items: center; justify-content: center; color: var(--vega-blue); }
    .vega-conv-corpo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .vega-conv-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .vega-conv-nome { font-size: 13px; font-weight: 600; color: var(--vega-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-conv-nome small { font-weight: 500; color: var(--vega-ink-3); }
    .vega-conv-valor { font-size: 15px; font-weight: 800; color: var(--vega-ink); }
    .vega-conv-trilho { display: block; height: 8px; border-radius: 999px; overflow: hidden; background: var(--vega-blue-soft); }
    .vega-conv-barra { display: block; height: 100%; border-radius: 999px; background: var(--vega-blue); }
    .vega-conv-pct { text-align: right; font-size: 13px; font-weight: 700; color: var(--vega-ink-2); }
    .vega-conv-linha-mini .vega-conv-trilho { height: 6px; }
    .vega-conv-linha-mini .vega-conv-barra { background: color-mix(in srgb, var(--vega-blue) 55%, var(--vega-card)); }

    /* Origem dos leads: rosca com legenda ao lado, tabela embaixo. */
    .vega-origem-topo { display: flex; align-items: center; gap: 18px; }
    .vega-origem-legenda { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
    .vega-origem-legenda-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; }
    .vega-origem-nome { display: inline-flex; align-items: center; gap: 6px; color: var(--vega-ink); }
    .vega-origem-nome svg { flex: none; }

    /* ===================== Profissionais (redesign set/2026) ===================== */
    /* Cabecalho com o icone solto (sem caixa), acoes a direita. */
    .vega-prof-cabeca { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
    .vega-prof-cabeca-icone { flex: none; display: inline-flex; margin-top: 4px; color: var(--vega-blue); }
    .vega-prof-cabeca-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .vega-prof-cabeca-acoes .vega-btn, .vega-prof-filtros .vega-btn, .vega-prof-faixa .vega-btn { display: inline-flex; align-items: center; gap: 6px; }

    /* Quatro resumos: icone solto a esquerda, rotulo, numero grande e a
       linha de apoio. O segundo leva quatro barrinhas (semanas), o quarto a
       barra de distribuicao. Clicavel = filtro. */
    .vega-prof-kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @media (max-width: 1100px) { .vega-prof-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    /* minmax(0, 1fr), e não 1fr: com 1fr o cartão não encolhia abaixo do conteúdo e passava da tela em 360 px (auditoria de 27/09). */
    @media (max-width: 560px) { .vega-prof-kpis { grid-template-columns: minmax(0, 1fr); } }
    .vega-prof-kpi { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 14px; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
    a.vega-prof-kpi:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); transform: translateY(-1px); }
    .vega-prof-kpi.ativo { border-color: var(--vega-blue); box-shadow: 0 0 0 3px var(--vega-chip-blue-bg); }
    .vega-prof-kpi-icone { flex: none; display: inline-flex; color: var(--vega-blue); margin-top: 2px; }
    .vega-prof-kpi.alerta .vega-prof-kpi-icone { color: var(--vega-amber-texto); }
    /* Os cards da fileira têm a altura da rosca: o rótulo fica em cima, o número cresce e o apoio desce para o pé. */
    .vega-prof-kpi-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; align-self: stretch; }
    .vega-prof-kpi-corpo > .vega-prof-kpi-linha { margin-top: auto; }
    .vega-prof-kpi-corpo > .vega-prof-kpi-sub { margin-bottom: auto; padding-top: 2px; }
    .vega-prof-kpi-rotulo { font-size: 12px; font-weight: 600; color: var(--vega-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-prof-kpi-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .vega-prof-kpi-num { font-size: 34px; line-height: 1.05; }
    .vega-prof-kpi-sub { font-size: 12px; color: var(--vega-ink-3); }
    .vega-prof-delta { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
    .vega-prof-delta.sobe { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-prof-delta.desce { background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg); }
    .vega-prof-delta.neutro { background: var(--vega-chip-gray-bg); color: var(--vega-chip-gray-fg); }
    .vega-prof-barras { flex: none; display: flex; align-items: flex-end; gap: 4px; height: 40px; width: 44px; align-self: center; }
    .vega-prof-barras i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--vega-blue); opacity: .45; transform-origin: bottom; animation: vega-prof-barra .5s cubic-bezier(.22, .61, .36, 1) both; }
    .vega-prof-barras i:last-child { opacity: 1; }
    @keyframes vega-prof-barra { from { transform: scaleY(0); } to { transform: none; } }
    .vega-prof-kpi-selo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; align-self: center; }
    .vega-prof-kpi-selo.ok { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-prof-kpi-selo.alerta { background: var(--vega-chip-amber-bg); color: var(--vega-amber-texto); }
    .vega-prof-trilho { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--vega-chip-gray-bg); margin-top: 8px; }
    .vega-prof-trilho i { display: block; height: 100%; transform-origin: left; animation: vega-prof-trilho .6s cubic-bezier(.22, .61, .36, 1) both; }
    @keyframes vega-prof-trilho { from { transform: scaleX(0); } to { transform: none; } }
    /* Rosca da distribuição por especialidade (referência do Daniel, 20/09). */
    .vega-prof-rosca-linha { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
    .vega-prof-rosca { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .vega-prof-rosca-miolo { width: 52px; height: 52px; border-radius: 50%; background: var(--vega-card); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
    .vega-prof-rosca-miolo b { font-size: 18px; font-weight: 800; color: var(--vega-ink); letter-spacing: -.02em; }
    .vega-prof-rosca-miolo small { font-size: 9px; color: var(--vega-ink-3); margin-top: 2px; }
    .vega-prof-rosca-legenda { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--vega-ink-2); }
    .vega-prof-rosca-legenda > span { display: flex; align-items: center; gap: 7px; }
    .vega-prof-rosca-legenda i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
    .vega-prof-rosca-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vega-prof-rosca-legenda b { font-weight: 700; color: var(--vega-ink-2); font-variant-numeric: tabular-nums; }
    .vega-prof-legenda { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; color: var(--vega-ink-3); }
    .vega-prof-legenda span { display: inline-flex; align-items: center; gap: 5px; }
    .vega-prof-legenda i { width: 7px; height: 7px; border-radius: 50%; }
    @media (prefers-reduced-motion: reduce) { .vega-prof-barras i, .vega-prof-trilho i { animation: none; } }

    /* Filtros num cartao, com "Limpar" no canto. */
    .vega-prof-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
    .vega-prof-busca { position: relative; flex: 1 1 220px; max-width: 360px; color: var(--vega-ink-3); }
    .vega-prof-busca svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
    .vega-prof-busca .vega-input { padding-left: 32px; }
    /* `.vega-input` e 100% de largura; os selects do filtro ficam no tamanho do texto. */
    .vega-prof-filtros select.vega-input { width: auto; }
    .vega-prof-limpar { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--vega-blue-texto); text-decoration: none; }
    .vega-prof-limpar:hover { text-decoration: underline; }

    /* Tabela. */
    .vega-prof-tabela td { vertical-align: middle; }
    .vega-prof-pessoa { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; max-width: 320px; }
    .vega-prof-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--vega-chip-blue-bg); color: var(--vega-blue-texto); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
    .vega-prof-nome { display: block; font-size: 14px; font-weight: 700; color: var(--vega-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-prof-pessoa:hover .vega-prof-nome { color: var(--vega-blue-texto); }
    .vega-prof-sub { display: block; font-size: 12px; color: var(--vega-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-prof-agenda { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 13px; color: var(--vega-ink); }
    .vega-prof-agenda-icone { flex: none; display: inline-flex; color: var(--vega-ink-3); }
    .vega-prof-agenda-quando { display: block; font-weight: 600; }
    .vega-prof-agenda small { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; color: var(--vega-ink-3); }
    a.vega-prof-agenda:hover .vega-prof-agenda-quando { text-decoration: underline; }
    .vega-prof-agenda-quieta .vega-prof-agenda-quando { color: var(--vega-ink-3); font-weight: 500; }
    .vega-prof-agenda-aviso .vega-prof-agenda-icone, .vega-prof-agenda-aviso .vega-prof-agenda-quando { color: var(--vega-amber-texto); }
    .vega-prof-agenda-aviso small { color: var(--vega-blue-texto); font-weight: 600; }
    .vega-ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
    .vega-ponto.verde { background: var(--vega-green); }
    .vega-ponto.cinza { background: var(--vega-ink-3); opacity: .5; }
    .vega-prof-chip { gap: 5px; }
    .vega-prof-chip svg { flex: none; }
    .vega-prof-acoes-th, .vega-prof-acoes { text-align: center !important; }
    .vega-prof-acoes-caixa { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .vega-prof-editar { padding: 6px 12px; font-size: 12.5px; }

    /* Faixa de orientacao no pe. */
    .vega-prof-faixa { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--vega-blue) 7%, var(--vega-card)), var(--vega-card) 60%); }
    .vega-prof-faixa-arte { flex: none; display: inline-flex; }
    .vega-prof-faixa-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
    @media (max-width: 720px) { .vega-prof-faixa-arte { display: none; } .vega-prof-faixa-acoes { align-items: flex-start; margin-left: 0; } }

    /* ===================== Ficha do profissional (abas) ===================== */
    .vega-ficha-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .vega-ficha-pessoa { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
    .vega-ficha-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--vega-chip-blue-bg); color: var(--vega-blue-texto); font-size: 16px; font-weight: 800; letter-spacing: .02em; margin-top: 4px; }
    .vega-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .vega-ficha-chips a { text-decoration: none; }
    .vega-ficha-aba-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--vega-amber); }
    .vega-ficha-form { display: flex; flex-direction: column; gap: 16px; }
    .vega-ficha-secao { display: flex; flex-direction: column; gap: 3px; }
    .vega-ficha-secao-linha { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .vega-ficha-secao + .vega-ficha-grade { margin-top: -4px; }
    /* Fora de um form (Acesso, Integracoes), a secao precisa do seu respiro. */
    .ficha-painel > .vega-ficha-secao, .vega-ficha-bloqueios > .vega-ficha-secao { margin-bottom: 14px; }
    .vega-ficha-bloqueios > .vega-ficha-secao { margin-bottom: 0; }
    /* `~` e nao `:not(:first-child)`: o primeiro filho do form e o @csrf. */
    .vega-ficha-form .vega-ficha-secao ~ .vega-ficha-secao { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--vega-line); }
    .vega-ficha-grade { display: grid; gap: 14px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (max-width: 760px) { .vega-ficha-grade { grid-template-columns: 1fr; } }
    .vega-ficha-obrig { color: var(--vega-chip-red-fg); }
    .vega-ficha-leitura { padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--vega-ink) 4%, var(--vega-card)); font-size: 14px; color: var(--vega-ink); }
    .vega-ficha-rodape { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--vega-line); }
    .vega-ficha-perigo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--vega-line); }
    .vega-ficha-estado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--vega-ink) 4%, var(--vega-card)); margin-bottom: 18px; }
    .vega-ficha-estado-icone { flex: none; display: inline-flex; color: var(--vega-ink-3); }
    .vega-ficha-estado.ok .vega-ficha-estado-icone { color: var(--vega-green); }
    .vega-ficha-estado.alerta .vega-ficha-estado-icone { color: var(--vega-amber-texto); }
    .vega-ficha-estado.perigo .vega-ficha-estado-icone { color: var(--vega-chip-red-fg); }
    .vega-ficha-estado .vega-btn { display: inline-flex; align-items: center; gap: 6px; }
    .vega-ficha-regra { padding: 12px 14px; border-radius: 12px; background: var(--vega-chip-blue-bg); margin-top: 4px; }
    .vega-ficha-regra .vega-eyebrow { color: var(--vega-blue-texto); margin-bottom: 4px; }
    .vega-ficha-acoes-linha { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 4px 0 18px; }
    .vega-ficha-acoes-linha .vega-btn { display: inline-flex; align-items: center; gap: 6px; }
    .vega-ficha-avancado { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--vega-line); }
    .vega-ficha-avancado summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--vega-ink-2); }
    .vega-ficha-lista { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 13px; color: var(--vega-ink-2); }
    .vega-ficha-lista li { display: flex; align-items: center; gap: 10px; }
    .vega-ficha-lista-icone { flex: none; display: inline-flex; color: var(--vega-blue); }

    /* Disponibilidade semanal: uma linha por dia, turnos lado a lado. */
    .vega-turnos { display: flex; flex-direction: column; border: 1px solid var(--vega-line); border-radius: 12px; overflow: hidden; }
    .vega-turno-dia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 12px; }
    .vega-turno-dia + .vega-turno-dia { border-top: 1px solid var(--vega-line); }
    .vega-turno-dia:has(input[type=checkbox]:not(:checked)) .vega-turno-lista { opacity: .45; }
    .vega-turno-nome { display: flex; align-items: center; gap: 8px; width: 96px; flex: none; font-size: 13px; font-weight: 600; color: var(--vega-ink); cursor: pointer; }
    .vega-turno-lista { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; transition: opacity .12s; }
    .vega-turno { display: inline-flex; align-items: center; gap: 6px; }
    .vega-turno .vega-input { width: 94px; padding: 5px 8px; font-size: 13px; }
    .vega-turno-ate { font-size: 12px; color: var(--vega-ink-3); }
    .vega-turno-x { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--vega-ink-3); font-size: 16px; line-height: 1; cursor: pointer; }
    .vega-turno-x:hover { background: var(--vega-hover); color: var(--vega-chip-red-fg); }
    .vega-turno-acoes { display: flex; gap: 10px; margin-left: auto; }
    .vega-turno-acoes button { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--vega-blue-texto); cursor: pointer; white-space: nowrap; }
    .vega-turno-acoes button:hover { text-decoration: underline; }
    @media (max-width: 640px) { .vega-turno-acoes { margin-left: 108px; } }

    /* Bloqueios. */
    .vega-ficha-bloqueios { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--vega-line); display: flex; flex-direction: column; gap: 14px; }
    .vega-bloqueio-form { display: grid; gap: 10px 12px; grid-template-columns: 170px minmax(160px, 1fr) 200px 200px auto; align-items: end; }
    @media (max-width: 1000px) { .vega-bloqueio-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vega-bloqueio-form-botao { grid-column: 1 / -1; } }
    .vega-bloqueios-lista { display: flex; flex-direction: column; gap: 8px; }
    .vega-bloqueio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vega-line); }
    .vega-bloqueio-icone { flex: none; display: inline-flex; color: var(--vega-amber-texto); }
    .vega-bloqueio .vega-chip { margin-right: 6px; }

    /* Servicos: os dois modos como cartoes de escolha; lista em grade. */
    .vega-ficha-opcoes { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (max-width: 760px) { .vega-ficha-opcoes { grid-template-columns: 1fr; } }
    .vega-ficha-opcao { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--vega-line); cursor: pointer; transition: border-color .12s, background .12s; }
    .vega-ficha-opcao input { margin-top: 3px; }
    .vega-ficha-opcao b { display: block; font-size: 13.5px; color: var(--vega-ink); }
    .vega-ficha-opcao small { display: block; margin-top: 2px; font-size: 12px; color: var(--vega-ink-3); }
    .vega-ficha-opcao.ativa { border-color: var(--vega-blue); background: color-mix(in srgb, var(--vega-blue) 5%, var(--vega-card)); }
    .vega-servicos-lista { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    .vega-servico { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--vega-line); cursor: pointer; }
    .vega-servico:has(input:checked) { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); }
    .vega-servicos-travada .vega-servico { opacity: .6; cursor: default; }

    /* Caixa de entrada: estado de automacao suprimida (ignorada ou loop). */
    .wa-supressao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: var(--vega-chip-amber-bg); color: var(--vega-amber-texto); font-size: 13px; }
    .wa-supressao b { display: block; color: var(--vega-ink); }
    .wa-supressao span { color: var(--vega-ink-2); font-size: 12.5px; }
    .wa-supressao-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
    .wa-supressao-acoes .vega-btn { padding: 6px 12px; font-size: 12.5px; background: var(--vega-card); }

    /* Configuracoes > Agente IA > Contatos ignorados: o formulario de adicionar. */
    .vega-ignorados-form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
    @media (max-width: 760px) { .vega-ignorados-form { grid-template-columns: 1fr; } }

    /* ===================== Pacientes: lista e ficha 360 (set/2026) ===================== */
    .vega-pac-filtros .vega-prof-busca { max-width: 420px; }
    .vega-pac-mais > summary { list-style: none; }
    .vega-pac-mais-lista { min-width: 260px; right: auto; left: 0; }
    .vega-pac-mais-lista .vega-input { margin-bottom: 4px; }
    .vega-pac-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 46px; }
    .vega-pac-tags .vega-chip { font-size: 10px; padding: 1px 8px; }
    .vega-pac-acao { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--vega-line); background: var(--vega-card); color: var(--vega-ink-2); transition: border-color .12s, color .12s; }
    .vega-pac-acao:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); color: var(--vega-blue-texto); }
    .vega-menu-nota { display: block; padding: 8px 10px; font-size: 12px; color: var(--vega-ink-3); }

    /* Ficha: cabecalho com as acoes frequentes, e o resto no menu. */
    .vega-pac-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .vega-pac-acoes .vega-btn { display: inline-flex; align-items: center; gap: 6px; }
    .vega-pac-mais-acoes { list-style: none; }
    /* Cabecalho com a onda azul no canto (decoracao atras, o texto na frente). */
    .vega-pac-cabeca { position: relative; }
    .vega-pac-cabeca > * { position: relative; z-index: 1; }
    .vega-pac-cabeca-onda { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0 !important; pointer-events: none; }
    .vega-pac-onda { position: absolute; right: -40px; bottom: -8px; width: 560px; height: 150px; }
    .vega-pac-voltar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; margin-bottom: 12px; }

    /* Indicadores: um card por numero, icone solto a esquerda. */
    .vega-pac-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .vega-pac-kpi { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
    .vega-pac-kpi-prox { grid-column: span 1; }
    .vega-pac-kpi-icone { flex: none; display: inline-flex; color: var(--vega-blue); margin-top: 2px; }
    .vega-pac-kpi-rotulo { font-size: 12px; font-weight: 600; color: var(--vega-ink-3); }
    .vega-pac-kpi-num { margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-pac-kpi-vazio { font-size: 15px; font-weight: 700; color: var(--vega-ink-2); }
    .vega-pac-kpi-sub { margin-top: 2px; font-size: 11.5px; color: var(--vega-ink-3); display: block; }
    .vega-pac-titulo { display: inline-flex; align-items: center; gap: 8px; }
    .vega-pac-titulo svg { color: var(--vega-blue); flex: none; }
    .vega-pac-dl dt { display: flex; align-items: center; gap: 6px; }
    .vega-pac-dl dt svg { color: var(--vega-ink-3); flex: none; }
    .vega-pac-aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--vega-chip-blue-bg); font-size: 12.5px; line-height: 1.45; color: var(--vega-ink-2); }
    .vega-pac-aviso b { color: var(--vega-ink); display: block; }
    .vega-pac-aviso-icone { flex: none; color: var(--vega-blue); margin-top: 1px; }
    .vega-pac-secao { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
    .vega-pac-secao > .flex-1 { flex: 1 1 240px; }
    .vega-pac-secao-icone { flex: none; display: inline-flex; color: var(--vega-blue); }
    .vega-pac-secao .vega-btn { display: inline-flex; align-items: center; gap: 6px; }
    .vega-pac-linha { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; padding: 6px 0; }
    .vega-pac-linha-quando { display: grid; grid-template-columns: 10px auto; gap: 2px 8px; align-items: center; padding-top: 10px; font-size: 13px; color: var(--vega-ink-2); }
    .vega-pac-linha-quando i { grid-row: 1; }
    .vega-pac-linha-quando b { color: var(--vega-ink); }
    .vega-pac-linha-quando span, .vega-pac-linha-quando small { grid-column: 2; font-size: 12px; color: var(--vega-ink-3); }
    .vega-pac-linha-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
    .vega-pac-linha-icone { flex: none; display: inline-flex; color: var(--vega-blue); }
    .vega-ponto.azul { background: var(--vega-blue); }
    .vega-ponto.ambar { background: var(--vega-amber); }
    .vega-ponto.vermelho { background: var(--vega-chip-red-fg); }
    .vega-pac-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border-radius: 12px; border: 1px solid var(--vega-line); text-align: center; }
    .vega-pac-vazio.tracejado { border-style: dashed; }
    .vega-pac-vazio-icone { color: var(--vega-blue); margin-bottom: 4px; }
    .vega-pac-vazio .vega-btn { display: inline-flex; align-items: center; gap: 6px; }
    .vega-pac-fin { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
    @media (max-width: 760px) { .vega-pac-fin { grid-template-columns: minmax(0, 1fr); } }
    .vega-pac-fin-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--vega-line); }
    .vega-pac-fin-card.azul { background: color-mix(in srgb, var(--vega-blue) 5%, var(--vega-card)); }
    .vega-pac-fin-card.verde { background: color-mix(in srgb, var(--vega-green) 6%, var(--vega-card)); }
    .vega-pac-fin-card.ambar { background: color-mix(in srgb, var(--vega-amber) 8%, var(--vega-card)); }
    .vega-pac-fin-icone { flex: none; display: inline-flex; color: var(--vega-blue); margin-top: 2px; }
    .vega-pac-fin-card.verde .vega-pac-fin-icone { color: var(--vega-green); }
    .vega-pac-fin-card.ambar .vega-pac-fin-icone { color: var(--vega-amber-texto); }
    .ficha-abas .vega-aba svg { flex: none; opacity: .8; }

    /* ---- Caixa de ícone (referências de set/2026): quadrado suave atrás do ícone ---- */
    .vega-caixa-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--vega-blue); }
    .vega-caixa-icone.grande svg { width: 30px; height: 30px; }
    .vega-caixa-icone.ambar { color: var(--vega-amber-texto); }
    .vega-caixa-icone.clara { color: #fff; }
    .vega-caixa-icone.verde { color: var(--vega-chip-green-fg); }
    .vega-caixa-icone.vermelha { color: var(--vega-chip-red-fg); }
    .vega-pac-kpi .vega-caixa-icone { margin-top: 2px; }
    .vega-pac-secao .vega-caixa-icone { margin-top: 2px; }
    /* Saúde da base (referência): meia-lua segmentada, legenda em três, aviso. */
    .vega-rel-saude-topo { display: flex; align-items: flex-start; gap: 10px; }
    .vega-rel-saude-topo .vega-caixa-icone { margin-top: 2px; }
    .vega-rel-saude-titulo { font-size: 15px; font-weight: 700; color: var(--vega-ink); display: inline-flex; align-items: center; gap: 6px; }
    .vega-rel-saude-sub { font-size: 12px; color: var(--vega-ink-3); }
    .vega-rel-saude-janela { margin-left: auto; flex: none; }
    .vega-rel-medidor { position: relative; width: 100%; max-width: 250px; margin: 10px auto 0; }
    .vega-rel-medidor svg { width: 100%; height: auto; display: block; }
    .vega-rel-medidor-texto { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
    .vega-rel-medidor-num { font-size: 26px; font-weight: 800; line-height: 1; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-rel-medidor-rotulo { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--vega-ink); }
    .vega-rel-medidor-base { font-size: 12px; color: var(--vega-ink-3); }
    .vega-rel-medidor-base b { color: var(--vega-ink); }
    .vega-rel-legenda-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
    .vega-rel-legenda-item { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; font-size: 12.5px; }
    .vega-rel-legenda-item > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--vega-ink); }
    .vega-rel-legenda-item i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
    .vega-rel-legenda-item small { font-size: 12px; color: var(--vega-ink-2); padding-left: 16px; }
    .vega-rel-legenda-item:hover > span:first-child { color: var(--vega-blue-texto); }
    .vega-rel-saude-aviso { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
    .vega-rel-saude-aviso.verde { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-rel-saude-aviso.ambar { background: var(--vega-chip-amber-bg); color: var(--vega-amber-texto); }
    .vega-rel-saude-aviso.azul { background: var(--vega-chip-blue-bg); color: var(--vega-ink-2); }
    .vega-rel-saude-aviso.azul b { display: inline; color: var(--vega-ink); }
    .vega-rel-saude-aviso.azul .vega-rel-saude-aviso-icone { color: var(--vega-blue); }
    /* Card da taxa de retorno (referência do Daniel, 20/09): cabeçalho com a pill, anel maior e o rodapé de comparação. */
    .vega-rel-retorno { display: flex; flex-direction: column; }
    .vega-rel-retorno .vega-rel-anel-linha { flex: 1; align-items: center; margin-top: 14px; }
    .vega-rel-retorno .vega-rel-anel { width: 176px; height: 176px; flex: none; }
    .vega-rel-retorno .vega-rel-anel-num { font-size: 20px; }
    .vega-rel-retorno .vega-rel-anel-sub { font-size: 8px; }
    .vega-rel-retorno .vega-rel-anel-linha { gap: 18px; }
    .vega-rel-retorno-titulo { font-size: 15.5px; font-weight: 800; color: var(--vega-ink); line-height: 1.3; margin-bottom: 4px; }
    .vega-rel-retorno-texto .vega-rel-kpi-link { margin-top: 10px; }
    .vega-rel-retorno-pill { display: inline-flex; align-items: center; gap: 5px; }
    .vega-rel-retorno-pe { margin-top: auto; }
    /* Card do NPS (referência do Daniel, 20/09). */
    .vega-rel-nps { display: flex; flex-direction: column; gap: 12px; }
    .vega-rel-nps-topo { display: flex; align-items: flex-start; gap: 12px; }
    .vega-rel-nps-topo .vega-caixa-icone { margin-top: 2px; }
    .vega-rel-nps-nota { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
    .vega-rel-nps-nota b { font-size: 30px; line-height: 1; letter-spacing: -.02em; }
    .vega-rel-nps-nota span { font-size: 12px; color: var(--vega-ink-3); }
    .vega-rel-nps-pill { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 12px; border-radius: 12px; font-size: 11px; line-height: 1.2; }
    .vega-rel-nps-pill b { font-size: 14px; }
    .vega-rel-nps-pill small { font-size: 10.5px; opacity: .85; }
    .vega-rel-nps-pill svg { margin-bottom: 1px; }
    .vega-rel-nps-pill.sobe { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-rel-nps-pill.desce { background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg); }
    .vega-rel-nps-pill.igual { background: var(--vega-chip-gray-bg); color: var(--vega-chip-gray-fg); }
    .vega-rel-nps-barra { display: flex; height: 10px; width: 100%; overflow: hidden; border-radius: 999px; background: var(--vega-line); }
    .vega-rel-nps-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .vega-rel-nps-grupo { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vega-line); }
    .vega-rel-nps-grupo > span:first-child { display: inline-flex; flex: none; }
    .vega-rel-nps-grupo > span:last-child { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .vega-rel-nps-grupo b { font-size: 16px; color: var(--vega-ink); }
    .vega-rel-nps-grupo small { font-size: 11px; color: var(--vega-ink-3); }
    .vega-rel-nps-ultimas { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--vega-line); }
    .vega-rel-nps-ultimas-titulo { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--vega-ink); }
    .vega-rel-nps-resposta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; color: var(--vega-ink-2); }
    .vega-rel-nps-nota-chip { flex: none; min-width: 26px; text-align: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .vega-rel-nps-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vega-rel-nps-quem { flex: none; font-size: 11.5px; color: var(--vega-ink-3); }
    .vega-rel-nps-botao { margin-top: auto; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .vega-rel-saude-aviso b { display: block; }
    .vega-rel-saude-aviso .vega-rel-saude-aviso-icone { flex: none; display: inline-flex; margin-top: 1px; }
    .vega-rel-secao-acao { display: inline-flex; align-items: center; gap: 6px; }
    .vega-rel-comparado { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 500; }
    .vega-rel-comparado.bom { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-rel-comparado.ruim { background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg); }
    .vega-rel-comparado b { font-weight: 800; font-variant-numeric: tabular-nums; }
    .vega-rel-kpi { position: relative; overflow: hidden; }
    .vega-rel-kpi > * { position: relative; z-index: 1; }
    .vega-rel-kpi-arte { position: absolute !important; right: 12px; bottom: 30px; z-index: 0 !important; color: var(--vega-blue); opacity: .10; pointer-events: none; }
    .vega-rel-kpi.destaque .vega-rel-kpi-arte { color: #fff; opacity: .16; }
    .vega-rel-delta-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--vega-ink-3); }
    .vega-rel-kpi.destaque .vega-rel-delta-linha { color: rgba(255, 255, 255, .85); }
    .vega-rel-atualizado { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--vega-line); border-radius: 10px; }
    .vega-kpi-onda { position: absolute; right: 0; bottom: 0; width: 60%; height: 70%; pointer-events: none; }
    .vega-kpi-onda svg { width: 100%; height: 100%; }
    .vega-kpi-seta { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 15px; font-weight: 700; }
    .vega-auto-kpi-destaque { position: relative; overflow: hidden; }
    .vega-auto-kpi-destaque > * { position: relative; z-index: 1; }
    /* Automações em grade (o mesmo toggle dos orçamentos). */
    .vega-auto-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .vega-auto-grade[hidden], #auto-tabela-caixa[hidden] { display: none; }
    .vega-auto-cartao { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
    .vega-auto-cartao:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); transform: translateY(-1px); }
    .vega-auto-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
    .vega-auto-cartao-nome { font-size: 14.5px; font-weight: 700; color: var(--vega-ink); }
    .vega-auto-cartao-objetivo { font-size: 12.5px; color: var(--vega-ink-3); line-height: 1.4; }
    .vega-auto-cartao-quando { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--vega-ink-2); margin-top: 2px; }
    .vega-auto-cartao-quando svg { color: var(--vega-blue); }
    .vega-auto-cartao-pe { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--vega-line); }
    .vega-auto-cartao-ultima { margin-top: 2px; }
    @media (max-width: 1100px) { .vega-auto-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .vega-auto-grade { grid-template-columns: 1fr; } }
    .vega-auto-kpi-destaque > .vega-kpi-onda { position: absolute; z-index: 0; }
    .vega-auto-kpi-destaque > .vega-kpi-seta { position: absolute; }
    .vega-auto-linha-nome { display: flex; align-items: flex-start; gap: 12px; }
    .vega-auto-sem-envio { display: inline-flex; align-items: center; gap: 6px; }
    .vega-auto-sem-envio svg { opacity: .55; }
    .vega-menu-botao.horizontal { width: 36px; font-size: 16px; letter-spacing: 1px; }

    /* ---- Telas estreitas: tabela rola dentro do card e os grupos de período quebram linha ---- */
    @media (max-width: 1100px) {
        .vega-card.overflow-hidden:has(> table), .vega-card.overflow-hidden:has(> .vega-prof-tabela) { overflow-x: auto; }
        .vega-periodos { flex-wrap: wrap; max-width: 100%; }
    }

    /* ---- Leads (lista pela referência) ---- */
    /* Duas linhas: busca + por página + filtros em cima; as etapas na linha
       de baixo, na largura toda (antes elas disputavam a linha com os
       controles e uma caía sozinha embaixo, com espaço sobrando à direita). */
    .vega-leads-filtros { display: grid; grid-template-columns: minmax(200px, 360px) minmax(0, 1fr) auto auto; gap: 10px 10px; align-items: center; }
    .vega-leads-filtros .vega-prof-busca { grid-column: 1; max-width: none; }
    .vega-leads-filtros .vega-leads-porpagina { grid-column: 3; }
    .vega-leads-filtros .vega-leads-mais { grid-column: 4; }
    .vega-leads-etapas { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--vega-line); }
    @media (max-width: 640px) {
        .vega-leads-filtros { grid-template-columns: 1fr auto; }
        .vega-leads-filtros .vega-prof-busca { grid-column: 1 / -1; }
        .vega-leads-filtros .vega-leads-porpagina { grid-column: 1; grid-row: 2; }
        .vega-leads-filtros .vega-leads-mais { grid-column: 2; grid-row: 2; justify-self: end; }
        .vega-leads-etapas { grid-row: 3; }
    }
    .vega-leads-etapa { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid transparent; font-size: 13px; font-weight: 600; color: var(--vega-ink-2); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; }
    .vega-leads-etapa i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
    .vega-leads-etapa:hover { background: var(--vega-hover); }
    /* Etapa selecionada no mesmo tom do submenu ativo da barra lateral
       (vega-sub-ativo): fundo azul claro e texto azul, não o azul cheio. */
    .vega-leads-etapa.ativa { background: var(--vega-chip-blue-bg); color: var(--vega-chip-blue-fg); }
    .vega-leads-etapa.ativa:hover { background: var(--vega-chip-blue-bg); }
    .vega-leads-etapa-n { font-size: 11.5px; font-weight: 700; color: var(--vega-ink-3); }
    .vega-leads-etapa.ativa .vega-leads-etapa-n { color: var(--vega-chip-blue-fg); }
    .vega-leads-etapa-n.ativa { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vega-blue); color: #fff; }
    .vega-leads-porpagina { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vega-ink-3); white-space: nowrap; }
    .vega-leads-porpagina select.vega-input { width: auto; }
    .vega-leads-mais { position: relative; }
    .vega-leads-mais > summary { display: inline-flex; align-items: center; gap: 6px; }
    .vega-leads-mais-lista { min-width: 240px; padding: 12px; gap: 10px; }
    .vega-leads-mais-lista .vega-label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
    .vega-leads-tabela th.vega-leads-id, .vega-leads-tabela td.vega-leads-id { width: 44px; }
    .vega-leads-tabela td { vertical-align: middle; }
    .vega-leads-fone, .vega-leads-origem, .vega-leads-passo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vega-ink-2); white-space: nowrap; }
    .vega-leads-fone svg, .vega-leads-passo svg { color: var(--vega-ink-3); flex: none; }
    .vega-leads-passo { white-space: normal; min-width: 150px; max-width: 220px; align-items: flex-start; }
    .vega-leads-tabela .vega-chip, .vega-leads-tabela .vega-stat { white-space: nowrap; }
    .vega-leads-tabela td, .vega-leads-tabela th { padding-left: 8px; padding-right: 8px; }
    /* Em telas menores que a referência, as colunas de menor decisão saem
       (a informação continua na ficha e no cartão do celular). */
    @media (max-width: 1720px) { .vega-leads-tabela .vega-leads-id, .vega-leads-tabela .col-resposta { display: none; } }
    @media (max-width: 1400px) { .vega-leads-tabela .col-criado, .vega-leads-tabela .col-responsavel { display: none; } }
    .vega-leads-parado { display: block; margin-top: 4px; font-size: 11px; color: var(--vega-chip-red-fg); }
    .vega-leads-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--vega-line); }
    .vega-leads-rodape .vega-paginacao { margin: 0; padding: 0; border: 0; }

    /* ---- Paginador "‹ 1 2 3 ›" ---- */
    .vega-paginacao { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 0 4px; margin-top: -8px; }
    .vega-paginacao a[data-vega-filtro].vega-periodo-ativo { background: var(--vega-chip-blue-bg); color: var(--vega-blue-texto); }
    .vega-paginacao-pagina, .vega-paginacao-seta { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--vega-ink-2); text-decoration: none; background: var(--vega-card); border: 1px solid var(--vega-line); transition: border-color .12s, color .12s; font-variant-numeric: tabular-nums; }
    .vega-paginacao-pagina:hover, .vega-paginacao-seta:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); color: var(--vega-blue-texto); }
    .vega-paginacao-pagina.atual { background: var(--vega-chip-blue-bg); border-color: transparent; color: var(--vega-blue-texto); }
    .vega-paginacao-seta { font-size: 18px; line-height: 1; }
    .vega-paginacao-seta.desligada { opacity: .35; pointer-events: none; }
    .vega-paginacao-reticencias { padding: 0 4px; color: var(--vega-ink-3); }
    .vega-card > .vega-paginacao, .vega-card .vega-paginacao { border-top: 1px solid var(--vega-line); padding: 12px 16px; margin-top: 12px; }
    .vega-card.overflow-hidden > .vega-paginacao { margin-top: 0; }

    /* ---- Automações: lista como central operacional e detalhe em abas ---- */
    .vega-prof-kpi.vega-auto-kpi-destaque { background: linear-gradient(135deg, var(--vega-blue-deep), var(--vega-blue) 70%, #3B82FF); border-color: transparent; color: #fff; }
    .vega-auto-kpi-destaque .vega-prof-kpi-icone, .vega-auto-kpi-destaque .vega-prof-kpi-rotulo, .vega-auto-kpi-destaque .vega-prof-kpi-sub, .vega-auto-kpi-destaque .vega-prof-kpi-num { color: #fff; }
    .vega-auto-kpi-destaque .vega-prof-kpi-sub { opacity: .78; }
    button.vega-prof-kpi { text-align: left; cursor: pointer; font: inherit; transition: transform .12s, border-color .12s; }
    button.vega-prof-kpi:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); }
    .vega-auto-nome { display: block; max-width: 340px; text-decoration: none; }
    .vega-auto-nome:hover .vega-prof-nome { color: var(--vega-blue-texto); }
    .vega-auto-categoria { margin-top: 6px; font-size: 11px; }
    .vega-auto-quando { display: block; font-size: 13.5px; font-weight: 600; color: var(--vega-ink); }
    .vega-auto-motivo { display: block; margin-top: 4px; max-width: 260px; line-height: 1.35; }
    .vega-auto-resultado { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--vega-ink-2); }
    .vega-auto-resultado b { font-size: 18px; color: var(--vega-ink); }
    .vega-auto-trilho { display: block; width: 120px; height: 6px; margin: 6px 0 4px; border-radius: 999px; background: color-mix(in srgb, var(--vega-blue) 12%, var(--vega-card)); overflow: hidden; }
    .vega-auto-trilho i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vega-blue-deep), var(--vega-blue)); }
    .vega-auto-tabela td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
    .vega-auto-modelos { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow: auto; padding-right: 4px; }
    .vega-auto-modelos .vega-eyebrow { margin-top: 8px; }
    .vega-auto-modelo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--vega-line); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; }
    .vega-auto-modelo:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); }
    .vega-auto-modelo:has(input:checked) { border-color: var(--vega-blue); background: var(--vega-chip-blue-bg); }
    .vega-auto-modelo input { margin-top: 3px; accent-color: var(--vega-blue); }
    .vega-auto-modelo b { display: block; font-size: 13.5px; color: var(--vega-ink); }
    .vega-auto-modelo small { display: block; font-size: 12px; color: var(--vega-ink-3); line-height: 1.35; }
    .vega-auto-avatar { background: var(--vega-chip-blue-bg); color: var(--vega-blue); }
    .vega-auto-fluxo { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
    .vega-auto-fluxo li { position: relative; padding: 6px 0 10px 22px; font-size: 13.5px; color: var(--vega-ink-2); }
    .vega-auto-fluxo li::before { content: ''; position: absolute; left: 6px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--vega-blue); }
    .vega-auto-fluxo li:not(:last-child)::after { content: ''; position: absolute; left: 9.5px; top: 22px; bottom: -2px; width: 1px; background: var(--vega-line); }
    .vega-auto-fluxo b { color: var(--vega-ink); }
    .vega-auto-fluxo-texto { display: block; margin-top: 3px; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-auto-regras { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (max-width: 1000px) { .vega-auto-regras { grid-template-columns: minmax(0, 1fr); } }
    .vega-auto-lista { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--vega-ink-2); }
    .vega-auto-lista li { padding-left: 14px; position: relative; }
    .vega-auto-lista li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--vega-ink-3); }
    .vega-auto-lista b { color: var(--vega-ink); }
    .vega-auto-historico { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .vega-auto-historico li { display: flex; gap: 12px; align-items: flex-start; }
    .vega-auto-historico .vega-ponto { margin-top: 6px; }

    /* ---- Relatórios: seções por pergunta, KPIs com definição e base ---- */
    .vega-rel-filtros { align-items: center; }
    /* Sem o texto de apoio no cabeçalho, o filtro sobe (20/09). */
    .vega-rel-pagina > .vega-prof-cabeca { margin-bottom: -8px; align-items: center; }
    .vega-rel-filtros select.vega-input { width: auto; }
    .vega-rel-atualizado { margin-left: auto; font-size: 12px; color: var(--vega-ink-3); white-space: nowrap; }
    .vega-rel-secao { display: flex; flex-direction: column; }
    .vega-rel-kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @media (max-width: 1100px) { .vega-rel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) { .vega-rel-kpis { grid-template-columns: minmax(0, 1fr); } }
    .vega-rel-kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; }
    .vega-rel-kpi.destaque { background: linear-gradient(135deg, var(--vega-blue-deep), var(--vega-blue) 70%, #3B82FF); border-color: transparent; color: #fff; }
    .vega-rel-kpi.destaque .vega-rel-kpi-icone, .vega-rel-kpi.destaque .vega-rel-kpi-rotulo, .vega-rel-kpi.destaque .vega-rel-kpi-num, .vega-rel-kpi.destaque .vega-rel-kpi-sub, .vega-rel-kpi.destaque .vega-rel-kpi-link { color: #fff; }
    .vega-rel-kpi.destaque .vega-rel-kpi-sub { opacity: .8; }
    .vega-rel-kpi.destaque .vega-info { background: rgba(255, 255, 255, .22); color: #fff; }
    .vega-rel-kpi.destaque .vega-rel-delta { background: rgba(255, 255, 255, .18); color: #fff; }
    .vega-rel-kpi.destaque .vega-rel-delta small { color: rgba(255, 255, 255, .8); }
    .vega-rel-kpi-topo { display: flex; align-items: center; gap: 8px; }
    .vega-rel-kpi-icone { flex: none; display: inline-flex; color: var(--vega-blue); }
    .vega-rel-kpi-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--vega-ink-3); }
    .vega-rel-kpi-num { font-size: 28px; line-height: 1.05; color: var(--vega-ink); }
    .vega-rel-kpi-vazio { font-size: 26px; color: var(--vega-ink-3); }
    .vega-rel-kpi-sub { font-size: 12px; color: var(--vega-ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .vega-rel-kpi-link { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--vega-blue-texto); text-decoration: none; }
    .vega-rel-kpi-link:hover { text-decoration: underline; }
    .vega-rel-delta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .vega-rel-delta small { font-weight: 500; color: var(--vega-ink-3); }
    .vega-rel-delta.bom { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-rel-delta.ruim { background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg); }
    .vega-rel-delta.neutro { background: var(--vega-chip-gray-bg); color: var(--vega-ink-3); }
    .vega-rel-tres { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (max-width: 1100px) { .vega-rel-tres { grid-template-columns: minmax(0, 1fr); } }
    .vega-rel-anel-linha { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
    .vega-rel-anel { width: 124px; height: 124px; flex: none; }
    .vega-rel-anel-num { font-size: 22px; font-weight: 800; fill: var(--vega-ink); font-family: inherit; }
    .vega-rel-anel-sub { font-size: 10px; fill: var(--vega-ink-3); font-family: inherit; }
    .vega-rel-base-linha { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
    .vega-rel-base-linha:hover b { color: var(--vega-blue-texto); }
    .vega-rel-base-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
    .vega-rel-base-topo b { color: var(--vega-ink); }
    .vega-rel-base-topo small { font-weight: 500; color: var(--vega-ink-3); }
    .vega-rel-base-crit { font-size: 11.5px; color: var(--vega-ink-3); }
    .vega-rel-trilho { display: block; width: 100%; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--vega-blue) 10%, var(--vega-card)); overflow: hidden; }
    .vega-rel-trilho.fina { height: 5px; }
    .vega-rel-trilho i { display: block; height: 100%; border-radius: 999px; }
    .vega-rel-tendencia { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    @media (max-width: 1100px) { .vega-rel-tendencia { grid-template-columns: minmax(0, 1fr); } }
    .vega-rel-capacidade { display: flex; flex-direction: column; gap: 12px; }
    .vega-rel-duas { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (max-width: 1100px) { .vega-rel-duas { grid-template-columns: minmax(0, 1fr); } }
    /* Distribuição dos atendimentos: três colunas arredondadas, juntas. */
    .vega-rel-dist { display: flex; flex-direction: column; }
    .vega-rel-dist-colunas { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex: 1; min-height: 210px; margin-top: 18px; padding-bottom: 44px; box-sizing: border-box; }
    .vega-rel-dist-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; height: 100%; }
    .vega-rel-dist-num { font-size: 15px; margin-bottom: 8px; color: var(--vega-ink); }
    .vega-rel-dist-barra { display: block; width: 100%; border-radius: 12px; }
    .vega-rel-dist-barra.cheia { background: var(--vega-blue); }
    .vega-rel-dist-barra.media { background: color-mix(in srgb, var(--vega-blue) 30%, var(--vega-card)); }
    .vega-rel-dist-barra.vazia { background: color-mix(in srgb, var(--vega-blue) 12%, var(--vega-card)); }
    .vega-rel-dist-rotulo { position: absolute; top: 100%; margin-top: 8px; font-size: 12.5px; color: var(--vega-ink-2); white-space: nowrap; }
    .vega-rel-dist-pct { position: absolute; top: 100%; margin-top: 26px; font-size: 12px; font-weight: 600; color: var(--vega-ink-3); font-variant-numeric: tabular-nums; }
    .vega-rel-mini { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
    .vega-rel-mini > div { display: flex; flex-direction: column; gap: 4px; }
    .vega-rel-mini .vega-rel-kpi-num { display: block; font-size: 24px; margin: 2px 0; }
    .vega-rel-tabela td { vertical-align: middle; }
    .vega-rel-legenda { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
    .vega-rel-legenda.tracejada { background: repeating-linear-gradient(90deg, var(--vega-ink-3) 0 4px, transparent 4px 7px); }
    .vega-rel-tabela th { white-space: nowrap; }
    /* Aquisição: uma linha por origem, jornada em barras e fatia da receita. */
    .vega-rel-origens { display: flex; flex-direction: column; }
    .vega-rel-origem-linha { display: grid; grid-template-columns: 190px minmax(0, 1fr) 210px; gap: 20px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--vega-line); }
    .vega-rel-origem-linha:first-child { border-top: 0; }
    .vega-rel-origem-linha.sem-dinheiro { grid-template-columns: 190px minmax(0, 1fr); }
    @media (max-width: 900px) { .vega-rel-origem-linha, .vega-rel-origem-linha.sem-dinheiro { grid-template-columns: 1fr; gap: 12px; } }
    .vega-rel-origem-nome { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vega-ink); min-width: 0; }
    .vega-rel-origem-nome b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-rel-origem-nome small { display: block; font-size: 12px; color: var(--vega-ink-3); }
    .vega-rel-origem-nome:hover b { color: var(--vega-blue-texto); }
    .vega-rel-origem-marca { flex: none; display: inline-flex; width: 22px; justify-content: center; }
    .vega-rel-jornada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .vega-rel-etapa { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .vega-rel-etapa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--vega-ink-3); white-space: nowrap; }
    .vega-rel-etapa-topo b { font-size: 14px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-rel-etapa-trilho { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--vega-blue) 10%, var(--vega-card)); overflow: hidden; }
    .vega-rel-etapa-trilho i { display: block; height: 100%; border-radius: 999px; background: var(--vega-blue); }
    .vega-rel-etapa:nth-child(2) .vega-rel-etapa-trilho i { opacity: .85; }
    .vega-rel-etapa:nth-child(3) .vega-rel-etapa-trilho i { opacity: .7; }
    .vega-rel-etapa:nth-child(4) .vega-rel-etapa-trilho i { background: var(--vega-green); }
    .vega-rel-origem-receita { text-align: right; }
    .vega-rel-origem-receita b { display: block; font-size: 17px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-rel-origem-receita small { display: block; font-size: 12px; color: var(--vega-ink-3); }
    .vega-rel-origem-fatia { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--vega-green) 12%, var(--vega-card)); overflow: hidden; }
    .vega-rel-origem-fatia i { display: block; height: 100%; border-radius: 999px; background: var(--vega-green); margin-left: auto; }
    .vega-rel-origens-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 20px 6px; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-rel-origens-topo b { color: var(--vega-ink); }
    .vega-rel-origem { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--vega-ink); }
    .vega-rel-origem:hover b { color: var(--vega-blue-texto); }
    .vega-rel-pct { display: block; font-size: 11px; color: var(--vega-ink-3); font-variant-numeric: tabular-nums; }
    .vega-rel-operacional { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    @media (max-width: 1100px) { .vega-rel-operacional { grid-template-columns: minmax(0, 1fr); } }
    .vega-rel-funil-linha { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px 44px; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
    .vega-rel-funil-linha:hover .vega-rel-funil-rotulo { color: var(--vega-blue-texto); }
    .vega-rel-funil-rotulo { font-size: 13px; color: var(--vega-ink-2); }
    .vega-rel-funil-num { text-align: right; font-size: 14px; color: var(--vega-ink); }
    .vega-rel-funil-linha .vega-rel-pct { text-align: right; }
    .vega-rel-qualidade { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (max-width: 1100px) { .vega-rel-qualidade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .vega-rel-qualidade { grid-template-columns: minmax(0, 1fr); } }
    .vega-rel-qual { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; }
    .vega-rel-qual-icone { flex: none; display: inline-flex; color: var(--vega-green); margin-top: 1px; }
    .vega-rel-qual.pendente { background: color-mix(in srgb, var(--vega-amber) 7%, var(--vega-card)); }
    .vega-rel-qual.pendente .vega-rel-qual-icone { color: var(--vega-amber-texto); }
    .vega-marca { flex: none; display: inline-block; vertical-align: -.15em; overflow: visible; }
    /* overflow visible: o desenho do WhatsApp encosta na borda da área dele,
       e em tela de celular (densidade 3x) a borda esquerda saía cortada. */
    /* Em botão cheio a marca vira monocromática (a cor do texto do botão). */
    .vega-marca.mono, .vega-marca.mono * { fill: currentColor !important; }
    .vega-pac-resumo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
    @media (max-width: 1000px) { .vega-pac-resumo { grid-template-columns: minmax(0, 1fr); } }
    .vega-pac-bloco { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--vega-line); }
    .vega-pac-bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .vega-pac-dados { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--vega-ink) 3%, var(--vega-card)); align-self: start; }
    .vega-pac-editar { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12.5px; }
    .vega-pac-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; }
    .vega-pac-dl dt { color: var(--vega-ink-3); font-weight: 600; }
    .vega-pac-dl dd { margin: 0; color: var(--vega-ink); overflow-wrap: anywhere; }
    .vega-pac-nota-form { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; margin-bottom: 6px; }
    @media (max-width: 640px) { .vega-pac-nota-form { grid-template-columns: minmax(0, 1fr); } }
    .vega-pac-notas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
    .vega-pac-nota { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--vega-line); }
    .vega-pac-nota .vega-chip { margin-top: 1px; }
    .vega-pac-nota-meta { grid-column: 2; display: flex; gap: 10px; font-size: 11px; color: var(--vega-ink-3); }
    .vega-pac-nota-meta form { display: inline; }
    .vega-pac-consulta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--vega-line); }
    .vega-pac-consulta:first-of-type { border-top: 0; }
    .vega-pac-consulta-acoes { display: flex; gap: 12px; font-size: 12.5px; font-weight: 600; }
    .vega-pac-consulta-acoes form { display: inline; }
    .vega-pac-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--vega-ink) 4%, var(--vega-card)); max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    /* Listas de consultas da ficha: rolam dentro da aba, como a conversa. */
    .vega-pac-rolagem { max-height: min(50vh, 460px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
    .vega-pac-msg { max-width: 78%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--vega-card); border: 1px solid var(--vega-line); font-size: 13.5px; line-height: 1.4; color: var(--vega-ink); display: flex; flex-direction: column; gap: 2px; }
    .vega-pac-msg.nosso { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--vega-chip-blue-bg); border-color: transparent; }
    .vega-pac-msg-quem { font-size: 11px; font-weight: 700; color: var(--vega-ink-3); }
    .vega-pac-msg small { align-self: flex-end; font-size: 10.5px; color: var(--vega-ink-3); }
    .vega-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; min-height: 8px; }
    .vega-tag-chip button { border: 0; background: none; color: inherit; font-size: 14px; line-height: 1; margin-left: 4px; cursor: pointer; opacity: .7; }
    .vega-tag-chip button:hover { opacity: 1; }

    /* Menu de acoes (tres pontos): um <details>, sem JS. */
    .vega-menu { position: relative; display: inline-block; }
    .vega-menu summary { list-style: none; cursor: pointer; user-select: none; }
    .vega-menu summary::-webkit-details-marker { display: none; }
    .vega-menu-botao { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--vega-line); background: var(--vega-card); color: var(--vega-ink-2); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .12s, color .12s; }
    .vega-menu-botao:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); }
    .vega-menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--vega-card); border: 1px solid var(--vega-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(11, 18, 32, .14); text-align: left; transform-origin: top right; }
    .vega-menu[open] .vega-menu-lista { animation: vega-menu-abre .16s cubic-bezier(.22, .61, .36, 1); }
    .vega-menu[open] .vega-menu-botao { border-color: var(--vega-ink); color: var(--vega-ink); }
    @keyframes vega-menu-abre { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .vega-menu[open] .vega-menu-lista { animation: none; } }
    .vega-menu-lista a, .vega-menu-lista button { display: block; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--vega-ink-2); text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer; }
    .vega-menu-lista a:hover, .vega-menu-lista button:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-menu-lista .destaque { color: var(--vega-blue-texto); font-weight: 700; }
    .vega-menu-lista .perigo { color: var(--vega-chip-red-fg); }
    .vega-menu-lista form { margin: 0; }

    /* ---- Painel Aureon (dominio central), desenho das prints de 26/09 ---- */
    /* Barra do cartao da lista: busca a esquerda, Filtros e Ordenar a direita. */
    .vega-painel-lista { overflow: visible; }
    .vega-painel-barra { justify-content: space-between; border-bottom: 1px solid var(--vega-line); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .vega-painel-barra .vega-prof-busca { max-width: 420px; }
    .vega-painel-barra > .vega-menu { margin-left: auto; }
    .vega-painel-barra > .vega-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
    .vega-painel-barra > .vega-menu > summary::-webkit-details-marker { display: none; }
    .vega-painel-filtro-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vega-blue); color: #fff; font-size: 11px; font-weight: 700; }
    .vega-painel-filtro-n[hidden] { display: none; }
    .vega-menu-lista .vega-painel-menu-titulo { margin: 6px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vega-ink-3); }
    .vega-menu-lista label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--vega-ink-2); cursor: pointer; }
    .vega-menu-lista label:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-menu-lista .vega-painel-menu-nota { display: block; padding: 8px 10px; font-size: 12px; color: var(--vega-ink-3); }
    /* Os resumos da lista viram botao (filtram a tabela): herdam fonte e cor. */
    button.vega-prof-kpi { font: inherit; color: inherit; width: 100%; cursor: pointer; }
    .vega-painel-integracoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    /* Marca da integração: colorida = ok; apagada = não configurada; ponto âmbar ou vermelho = atenção. */
    .vega-painel-integ { position: relative; display: inline-flex; line-height: 0; }
    .vega-painel-integ.off .vega-marca { filter: grayscale(1); opacity: .35; }
    .vega-painel-integ.espera::after, .vega-painel-integ.falha::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--vega-card); background: var(--vega-amber, #F59E0B); }
    .vega-painel-integ.falha::after { background: var(--vega-chip-red-fg); }
    /* ===== Ficha da clínica e abas detalhadas do painel (26/09) =====
       Ícones soltos e coloridos, sem caixa (regra do Daniel). */
    .vega-painel-ficha-topo { display: grid; grid-template-columns: auto minmax(200px, 1.4fr) repeat(3, minmax(140px, 1fr)); align-items: center; gap: 16px 28px; padding: 22px 24px; }
    .vega-painel-ficha-icone { color: var(--vega-blue); }
    .vega-painel-ficha-quem { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
    .vega-painel-ficha-quem b { font-size: 18px; color: var(--vega-ink); }
    .vega-painel-ficha-quem .vega-codigo { font-size: 12px; color: var(--vega-ink-3); }
    .vega-painel-ficha-dado { display: flex; flex-direction: column; gap: 2px; padding-left: 24px; border-left: 1px solid var(--vega-line); min-width: 0; }
    .vega-painel-ficha-dado small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-painel-ficha-dado b { font-size: 14px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-ficha-dado span { font-size: 12px; color: var(--vega-ink-3); overflow-wrap: anywhere; }
    @media (max-width: 1000px) { .vega-painel-ficha-topo { grid-template-columns: auto 1fr; } .vega-painel-ficha-dado { grid-column: 2; padding-left: 0; border-left: 0; } }
    [data-ficha-painel][hidden], #ficha-auto-grade[hidden], #ficha-auto-lista[hidden], [data-seg-tabela][hidden], [data-seg-linha][hidden] { display: none !important; }

    /* Resumos em grade: 3, 4 ou 6 por linha. */
    .vega-painel-kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vega-painel-kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vega-painel-kpis.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    @media (max-width: 1300px) { .vega-painel-kpis.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 1000px) { .vega-painel-kpis, .vega-painel-kpis.tres, .vega-painel-kpis.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) { .vega-painel-kpis, .vega-painel-kpis.tres, .vega-painel-kpis.seis { grid-template-columns: 1fr; } }
    .vega-painel-kpi-medio { font-size: 26px; line-height: 1.1; color: var(--vega-ink); }
    .vega-painel-kpis .vega-prof-kpi-rotulo { white-space: normal; }
    .vega-painel-kpis .vega-prof-kpi-corpo > .vega-prof-kpi-linha, .vega-painel-duas > .vega-prof-kpi .vega-prof-kpi-corpo > .vega-prof-kpi-linha { margin-top: 0; }

    /* Duas colunas desiguais (conteúdo | lateral). */
    .vega-painel-lado { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
    @media (max-width: 1100px) { .vega-painel-lado { grid-template-columns: 1fr; } }

    /* Cartões (integrações, automações, usuários, modelos, módulos...). */
    .vega-painel-cartoes { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vega-painel-cartoes.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vega-painel-cartoes.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @media (max-width: 1250px) { .vega-painel-cartoes.quatro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 1000px) { .vega-painel-cartoes, .vega-painel-cartoes.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .vega-painel-cartoes, .vega-painel-cartoes.dois, .vega-painel-cartoes.quatro { grid-template-columns: 1fr; } }
    /* Uso do VEGA › Modelos no desktop: os três modelos (principal,
       escalonamento, transcrição) numa linha, em cartões mais compactos.
       Tablet e celular continuam como estavam. */
    @media (min-width: 1001px) {
        .vega-painel-cartoes.vega-painel-modelos { grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 12px; }
        .vega-painel-modelos .vega-painel-cartao { padding: 14px; gap: 10px; }
        .vega-painel-modelos .vega-painel-numeros { gap: 8px; }
        .vega-painel-modelos .vega-painel-numeros > span { padding: 8px; column-gap: 5px; }
        .vega-painel-modelos .vega-painel-numeros > span { grid-template-columns: 16px minmax(0, 1fr); min-width: 0; }
        .vega-painel-modelos .vega-painel-numeros i svg { width: 16px; height: 16px; }
        .vega-painel-modelos .vega-painel-numeros b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .vega-painel-modelos .vega-painel-numeros small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .vega-painel-modelos .vega-painel-barras-linha { font-size: 12px; gap: 6px 10px; }
    }
    .vega-painel-cartao { display: flex; flex-direction: column; gap: 14px; padding: 18px; min-width: 0; }
    .vega-painel-cartao.destaque { border-color: color-mix(in srgb, var(--vega-blue) 55%, var(--vega-line)); }
    .vega-painel-cartao-cabeca { display: flex; align-items: flex-start; gap: 12px; }
    .vega-painel-cartao-cabeca > span:not(.vega-painel-avatar):not(.vega-painel-cartao-icone) { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    .vega-painel-cartao-cabeca b { font-size: 14.5px; color: var(--vega-ink); line-height: 1.3; }
    .vega-painel-cartao-icone { flex: none; display: inline-flex; color: var(--vega-blue); line-height: 0; }
    .vega-painel-cartao-seta { color: var(--vega-ink-3); padding: 2px; border-radius: 6px; }
    .vega-painel-cartao-seta:hover { color: var(--vega-blue-texto); }
    .vega-painel-cartao-pe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--vega-line); }
    .vega-painel-cartao-pe dt { font-size: 11.5px; color: var(--vega-ink-3); }
    .vega-painel-cartao-pe dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--vega-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    .vega-painel-cartao-linhas { display: flex; flex-direction: column; margin: 0; }
    .vega-painel-cartao-linhas > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--vega-line); }
    .vega-painel-cartao-linhas dt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vega-ink-2); }
    .vega-painel-cartao-linhas dt svg { color: var(--vega-ink-3); }
    .vega-painel-cartao-linhas dd { margin: 0; }
    .vega-painel-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; }
    .vega-painel-cargo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--vega-blue-texto); background: var(--vega-chip-blue-bg); }
    .vega-painel-cargo.sem { color: var(--vega-amber-texto); background: var(--vega-chip-amber-bg); }
    .vega-painel-avatar.tom-2 { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-painel-avatar.tom-3 { background: color-mix(in srgb, var(--vega-cat-3) 16%, transparent); color: var(--vega-cat-3); }
    .vega-painel-avatar.tom-4 { background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg); }

    /* Lista de resumo (ícone, número, rótulo). */
    .vega-painel-resumo { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
    .vega-painel-resumo li { display: grid; grid-template-columns: 24px 44px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--vega-line); font-size: 13.5px; color: var(--vega-ink-2); }
    .vega-painel-resumo li:first-child { border-top: 0; }
    .vega-painel-resumo b { font-size: 20px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-resumo small { font-size: 12px; color: var(--vega-ink-3); }

    /* Barra de proporção (tokens, % do total). */
    .vega-painel-trilho { display: block; height: 8px; border-radius: 999px; background: var(--vega-line); overflow: hidden; }
    .vega-painel-trilho > i { display: block; height: 100%; border-radius: 999px; background: var(--vega-blue); min-width: 2px; }

    /* Rosca e legenda. */
    .vega-painel-rosca { display: grid; grid-template-columns: minmax(140px, 190px) 1fr; align-items: center; gap: 24px; }
    @media (max-width: 560px) { .vega-painel-rosca { grid-template-columns: 1fr; } }
    .vega-painel-rosca svg { width: 100%; height: auto; }
    .vega-painel-rosca-fatia { transition: opacity .15s; }
    .vega-painel-rosca svg:hover .vega-painel-rosca-fatia { opacity: .5; }
    .vega-painel-rosca svg .vega-painel-rosca-fatia:hover { opacity: 1; }
    .vega-painel-rosca-num { font-size: 18px; font-weight: 700; fill: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-rosca-rot { font-size: 7.5px; fill: var(--vega-ink-3); }
    .vega-painel-rosca-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .vega-painel-rosca-legenda li { display: grid; grid-template-columns: 10px 1fr auto 44px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--vega-ink-2); }
    .vega-painel-rosca-legenda i, .vega-painel-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
    .vega-painel-rosca-legenda b { color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-rosca-legenda small { text-align: right; color: var(--vega-ink-3); font-variant-numeric: tabular-nums; }
    .vega-painel-legenda { display: inline-flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--vega-ink-2); }
    .vega-painel-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
    .vega-painel-grafico-mira { stroke: var(--vega-ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
    .vega-painel-grafico-coluna:hover .vega-painel-grafico-mira { opacity: .6; }

    /* Linha do tempo (rotinas). */
    .vega-painel-tempo { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
    .vega-painel-tempo li { position: relative; display: grid; grid-template-columns: 22px 28px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; }
    .vega-painel-tempo li::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--vega-blue) 25%, var(--vega-line)); }
    .vega-painel-tempo li:first-child::before { top: 50%; }
    .vega-painel-tempo li:last-child::before { bottom: 50%; }
    .vega-painel-tempo-ponto { position: relative; z-index: 1; width: 12px; height: 12px; margin-left: 5px; border-radius: 50%; background: var(--vega-blue); border: 2px solid var(--vega-card); }
    .vega-painel-tempo-ponto.atrasada { background: var(--vega-chip-red-fg); }
    .vega-painel-tempo-ponto.nunca { background: var(--vega-ink-3); }
    .vega-painel-tempo b { display: block; font-size: 13.5px; color: var(--vega-ink); }
    .vega-painel-tempo small { font-size: 12px; color: var(--vega-ink-3); }
    /* Uso do VEGA por clínica: números em mini caixas, barras de tokens,
       uso por usuário e ferramentas. */
    .vega-painel-kpis.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    @media (max-width: 1300px) { .vega-painel-kpis.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 1000px) { .vega-painel-kpis.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .vega-painel-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vega-painel-numeros > span { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 12px; border: 1px solid var(--vega-line); border-radius: 12px; }
    .vega-painel-numeros i { grid-row: span 2; display: inline-flex; padding-top: 2px; font-style: normal; }
    .vega-painel-numeros b { font-size: 16px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-numeros small { font-size: 11.5px; color: var(--vega-ink-3); }
    .vega-painel-barras-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; font-size: 12.5px; color: var(--vega-ink-2); }
    .vega-painel-barras-linha b { font-variant-numeric: tabular-nums; color: var(--vega-ink); text-align: right; }
    .vega-painel-uso-usuario { display: grid; grid-template-columns: 44px minmax(160px, 1.2fr) repeat(3, minmax(150px, 1fr)); align-items: center; gap: 12px 18px; padding: 16px 18px; }
    @media (max-width: 1100px) { .vega-painel-uso-usuario { grid-template-columns: 44px 1fr; } .vega-painel-uso-caixa { grid-column: 2; } }
    .vega-painel-uso-caixa { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--vega-line); border-radius: 12px; min-width: 0; }
    .vega-painel-uso-caixa > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-painel-uso-caixa > span:first-child i { display: inline-flex; font-style: normal; }
    .vega-painel-uso-caixa b { font-size: 15px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-uso-caixa small { font-size: 11.5px; color: var(--vega-ink-3); }
    /* Uso do VEGA no celular (desenho de 27/09): Usuários em linhas compactas
       (avatar, nome, e-mail e os três números; a seta abre as caixas) e Saúde
       em uma coluna (latência com a curva; os sinais com o valor à direita e
       uma barra). No desktop nada disto aparece. */
    .vega-painel-uso-resumo, .vega-painel-uso-abrir, .vega-painel-uso-faisca, .vega-painel-uso-sinal-barra { display: none; }
    @media (max-width: 640px) {
        .vega-painel-uso-usuario { grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 5px 10px; padding: 14px 10px 14px 14px; }
        .vega-painel-uso-usuario > .vega-painel-avatar { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 16px; }
        .vega-painel-uso-usuario > .vega-painel-operador-quem { grid-column: 2; }
        .vega-painel-uso-usuario > .vega-painel-operador-quem > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--vega-ink-3); }
        .vega-painel-uso-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; grid-column: 2; font-size: 12px; }
        .vega-painel-uso-resumo > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
        .vega-painel-uso-resumo i { display: inline-flex; font-style: normal; }
        .vega-painel-uso-resumo b { color: var(--vega-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
        .vega-painel-uso-abrir { display: inline-flex; grid-column: 3; grid-row: 1 / span 2; align-items: center; justify-content: center; width: 22px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--vega-ink-2); cursor: pointer; }
        .vega-painel-uso-abrir:hover { background: var(--vega-hover); }
        .vega-painel-uso-abrir svg { transition: transform .15s; }
        .vega-painel-uso-usuario.aberto .vega-painel-uso-abrir svg { transform: rotate(90deg); }
        .vega-painel-uso-usuario > .vega-painel-uso-caixa { display: none; grid-column: 1 / -1; }
        .vega-painel-uso-usuario.aberto > .vega-painel-uso-caixa { display: flex; }

        .vega-painel-kpis.cinco { grid-template-columns: minmax(0, 1fr); gap: 10px; }
        .vega-painel-uso-latencia { flex-wrap: wrap; }
        .vega-painel-uso-latencia .vega-painel-kpi-medio { white-space: nowrap; }
        .vega-painel-uso-faisca { display: block; flex: 1 1 100%; width: 100%; height: 44px; margin-top: 4px; }
        .vega-painel-uso-sinal { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 14px 16px; }
        .vega-painel-uso-sinal .vega-prof-kpi-corpo { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
        .vega-painel-uso-sinal .vega-prof-kpi-rotulo { white-space: normal; font-size: 13px; }
        .vega-painel-uso-sinal .vega-prof-kpi-corpo > .vega-prof-kpi-linha, .vega-painel-uso-sinal .vega-painel-kpi-medio { margin: 0; font-size: 18px; }
        .vega-painel-uso-sinal-barra { display: block; grid-column: 2; height: 6px; }
    }
    .vega-painel-ferramenta { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
    .vega-painel-ferramenta > span.min-w-0 { display: flex; flex-direction: column; gap: 2px; }
    .vega-painel-ferramenta b { font-size: 13px; color: var(--vega-ink); overflow-wrap: anywhere; }
    .vega-painel-ferramenta small { font-size: 12px; color: var(--vega-ink-3); }
    /* Cartão de módulo (Uso do VEGA): números empilhados, barra e etiquetas. */
    .vega-painel-modulo-numeros { display: flex; flex-direction: column; gap: 14px; }
    .vega-painel-modulo-numeros > span { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
    .vega-painel-modulo-numeros i { grid-row: span 2; display: inline-flex; justify-content: center; font-style: normal; }
    .vega-painel-modulo-numeros b { font-size: 18px; line-height: 1.1; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-modulo-numeros small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-painel-modulo-pct { font-size: 20px; font-weight: 700; }
    .vega-painel-trilho.grosso { height: 10px; }
    .vega-painel-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
    .vega-painel-etiquetas > span { padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--vega-ink-2); background: var(--vega-chip-gray-bg); }
    button.vega-painel-cartao-seta { border: 0; background: none; cursor: pointer; }
    .vega-painel-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--vega-line); }
    .vega-painel-rodape .vega-paginacao { margin-top: 0; padding: 0; }
    .vega-painel-rodape button.vega-paginacao-pagina, .vega-painel-rodape button.vega-paginacao-seta { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
    .vega-painel-rodape button:disabled { opacity: .4; cursor: default; }
    .vega-painel-secao-cabeca { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--vega-line); }
    /* Trilha acima do titulo ("Clinicas > Propagar template"). */
    .vega-painel-trilha { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-painel-selecao { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
    /* Rodape de acao (resumo + botao) das telas que aplicam algo em lote. */
    .vega-painel-aplicar { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: color-mix(in srgb, var(--vega-blue) 4%, var(--vega-card)); }
    .vega-painel-aplicar .vega-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
    /* Celular: o botão desce para uma linha própria, largura toda (antes ele
       empurrava o texto para uma coluna de uma palavra e saía da tela). */
    @media (max-width: 640px) {
        .vega-painel-aplicar { flex-wrap: wrap; }
        .vega-painel-aplicar .vega-btn { flex: 1 1 100%; justify-content: center; white-space: normal; }
    }
    /* Log do Agente: periodo com as duas datas, e a lista em linhas. */
    .vega-painel-datas { display: inline-flex; align-items: center; gap: 8px; color: var(--vega-ink-3); }
    .vega-painel-datas .vega-input { width: auto; }
    /* Celular: as filtros viram grade de duas colunas; o período (duas datas)
       ocupa a linha toda e cada data divide o espaço. Antes o rótulo ficava
       com meia largura e a segunda data cobria o seletor de clínica. */
    @media (max-width: 640px) {
        .vega-prof-filtros > .vega-painel-datas { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
        .vega-painel-datas .vega-input { width: 100%; min-width: 0; }
    }
    .vega-painel-log { list-style: none; margin: 0; padding: 0; }
    /* Saude: seletor de clinica, abas sublinhadas, duas colunas e listas de itens. */
    .vega-painel-seletor { display: inline-flex; align-items: center; gap: 8px; color: var(--vega-blue); }
    .vega-painel-seletor .vega-input { width: auto; min-width: 200px; }
    .vega-painel-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--vega-line); overflow-x: auto; }
    .vega-painel-abas button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--vega-ink-3); cursor: pointer; white-space: nowrap; }
    .vega-painel-abas button:hover { color: var(--vega-ink); }
    .vega-painel-abas button.ativa { color: var(--vega-blue-texto); border-bottom-color: var(--vega-blue); }
    .vega-painel-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    /* minmax(0, 1fr): com 1fr puro a coluna crescia até o rótulo longo
       ("Usuários ativos sem verificação em dois passos") e o cartão saía da
       tela no celular. O rótulo quebra linha em vez de cortar. */
    @media (max-width: 900px) { .vega-painel-duas { grid-template-columns: minmax(0, 1fr); } }
    .vega-painel-duas > .vega-prof-kpi .vega-prof-kpi-rotulo { white-space: normal; }
    .vega-painel-itens { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
    .vega-painel-itens > li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--vega-line); font-size: 13.5px; color: var(--vega-ink-2); }
    .vega-painel-itens > li:first-child { border-top: 0; }
    .vega-painel-bloco { padding: 12px 14px; border: 1px solid var(--vega-line); border-radius: 12px; }
    .vega-painel-destaque { background: var(--vega-chip-blue-bg); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
    /* `hidden` perde para o display do Tailwind (.flex, .grid): sem isto as
       clinicas e as abas escondidas apareciam todas juntas. */
    [data-saude-clinica][hidden], [data-saude-aba][hidden] { display: none !important; }
    .vega-prof-kpi-num.vega-painel-kpi-texto { font-size: 24px; }
    /* Gráfico de barras do painel (panel/_barras): uma série, grade discreta,
       texto nas cores de tinta, a barra clareia as outras ao passar o mouse. */
    .vega-painel-grafico { margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .vega-painel-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
    .vega-painel-grafico-grade { stroke: var(--vega-line); stroke-width: 1; }
    .vega-painel-grafico-eixo { fill: var(--vega-ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
    .vega-painel-grafico svg:hover .vega-painel-grafico-barra path { opacity: .45; }
    .vega-painel-grafico svg .vega-painel-grafico-barra:hover path { opacity: 1; }
    .vega-painel-grafico-barra path { transition: opacity .15s; }
    .vega-painel-grafico .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    /* Tabela não obedece width: 1px (cresce com as células) e empurrava a
       página para o lado (gráficos da ficha). Como bloco, ela obedece. */
    .vega-painel-grafico table.sr-only { display: block; }
    [data-uso-aba][hidden] { display: none !important; }
    /* Colunas do painel no desenho das barras do CRM (Relatórios/Financeiro):
       pílula, a maior em cor cheia, as outras mais claras, grade tracejada. */
    .vega-painel-colunas { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 170px; padding-top: 8px; border-bottom: 1px solid var(--vega-line); }
    .vega-painel-colunas-grade { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--vega-line); pointer-events: none; }
    .vega-painel-coluna { position: relative; z-index: 1; flex: 1 1 0; display: flex; justify-content: center; align-items: flex-end; height: 100%; min-width: 0; cursor: default; }
    .vega-painel-coluna i { display: block; width: min(22px, 72%); border-radius: 999px 999px 4px 4px; background: color-mix(in srgb, var(--vega-coluna-cor) 32%, var(--vega-card)); transition: background .15s; }
    .vega-painel-coluna i.cheia { background: var(--vega-coluna-cor); }
    .vega-painel-coluna i.vazia { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--vega-coluna-cor) 12%, var(--vega-card)); }
    .vega-painel-coluna:hover i:not(.vazia) { background: var(--vega-coluna-cor); }
    .vega-painel-colunas-eixo { display: flex; margin-top: 6px; font-size: 11px; color: var(--vega-ink-3); font-variant-numeric: tabular-nums; }
    .vega-painel-colunas-eixo > span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
    .vega-painel-colunas-eixo.linhas { justify-content: space-between; }
    .vega-painel-colunas-eixo.linhas > span { flex: 0 0 auto; }
    .vega-painel-colunas-eixo.linhas > span:empty { display: none; }
    /* Linhas interativas (_linhas): guia, ponto em destaque e caixa de valores. */
    .vega-painel-linhas-caixa { position: relative; height: 190px; outline: none; cursor: crosshair; touch-action: pan-y; }
    .vega-painel-linhas-caixa:focus-visible { box-shadow: 0 0 0 2px var(--vega-blue); border-radius: 8px; }
    .vega-painel-linhas-caixa > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .vega-painel-linhas-marca, .vega-painel-linhas-ponto { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--vega-card); border: 2px solid var(--cor); pointer-events: none; }
    .vega-painel-linhas-ponto { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--cor); border: 2px solid var(--vega-card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 25%, transparent); z-index: 2; }
    .vega-painel-linhas-guia { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--vega-ink-3); pointer-events: none; z-index: 1; }
    .vega-painel-linhas-dica { position: absolute; top: 6px; z-index: 3; display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 10px 12px; border-radius: 10px; background: var(--vega-card); border: 1px solid var(--vega-line); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); font-size: 12px; color: var(--vega-ink-2); pointer-events: none; }
    .vega-painel-linhas-dica strong { font-size: 12.5px; color: var(--vega-ink); }
    .vega-painel-linhas-dica span { display: flex; align-items: center; gap: 6px; }
    .vega-painel-linhas-dica i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
    .vega-painel-linhas-dica b { margin-left: auto; padding-left: 12px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-linhas-guia[hidden], .vega-painel-linhas-ponto[hidden], .vega-painel-linhas-dica[hidden] { display: none !important; }
    .vega-painel-linhas.oculta-0 [data-serie="0"], .vega-painel-linhas.oculta-1 [data-serie="1"], .vega-painel-linhas.oculta-2 [data-serie="2"], .vega-painel-linhas.oculta-3 [data-serie="3"] { display: none; }
    .vega-painel-legenda button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer; }
    .vega-painel-legenda button:hover { background: var(--vega-hover); }
    .vega-painel-legenda button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
    /* Colunas: o valor aparece numa caixa ao passar o mouse. */
    .vega-painel-coluna[data-dica]:hover::after { content: attr(data-dica); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--vega-card); border: 1px solid var(--vega-line); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); font-size: 12px; font-weight: 600; color: var(--vega-ink); }
    .vega-painel-coluna:first-child[data-dica]:hover::after { left: 0; transform: none; }
    .vega-painel-coluna:last-child[data-dica]:hover::after { left: auto; right: 0; transform: none; }
    .vega-painel-colunas .vega-painel-coluna[data-dica]:hover::after { bottom: auto; top: 0; }

    /* Linha do tempo das migrações (ficha > Manutenção). */
    .vega-painel-migs { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .vega-painel-migs li { position: relative; display: grid; grid-template-columns: 70px 24px minmax(0, 1fr); align-items: center; gap: 10px; }
    .vega-painel-migs li::before { content: ''; position: absolute; left: 91px; top: -10px; bottom: -10px; width: 2px; background: color-mix(in srgb, var(--vega-blue) 22%, var(--vega-line)); }
    .vega-painel-migs li:first-child::before { top: 50%; }
    .vega-painel-migs li:last-child::before { bottom: 50%; }
    .vega-painel-migs-data { display: flex; flex-direction: column; line-height: 1.1; }
    .vega-painel-migs-data b { font-size: 20px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-migs-data small { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--vega-ink-3); }
    .vega-painel-migs-ponto { position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--vega-blue); border: 2px solid var(--vega-card); }
    .vega-painel-migs-ponto.antigo { background: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-card)); }
    .vega-painel-migs-caixa { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--vega-line); border-radius: 12px; min-width: 0; }
    .vega-painel-migs-caixa b { display: block; font-size: 13.5px; color: var(--vega-ink); }
    .vega-painel-migs-caixa code { display: block; font-size: 11.5px; color: var(--vega-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vega-painel-migs-lote { flex: none; min-width: 34px; padding: 3px 10px; border-radius: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--vega-blue-texto); background: var(--vega-chip-blue-bg); font-variant-numeric: tabular-nums; }

    /* Status das integrações (Saúde > Integrações). */
    .vega-painel-integ-grade { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: stretch; }
    @media (max-width: 900px) { .vega-painel-integ-grade { grid-template-columns: 1fr; } }
    .vega-painel-integ-medidor { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; border: 1px solid var(--vega-line); border-radius: 14px; }
    .vega-painel-integ-medidor svg { width: 100%; max-width: 240px; height: auto; }
    .vega-painel-integ-centro { position: absolute; top: 70px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
    .vega-painel-integ-centro b { font-size: 13px; color: var(--vega-ink); max-width: 110px; line-height: 1.25; }
    .vega-painel-integ-legenda { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
    .vega-painel-integ-legenda li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 13px; color: var(--vega-ink-2); }
    .vega-painel-integ-legenda i { width: 10px; height: 10px; border-radius: 50%; }
    .vega-painel-integ-legenda b { color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-integ-lista { list-style: none; margin: 0; padding: 4px 16px; border: 1px solid var(--vega-line); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; }
    .vega-painel-integ-lista li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--vega-line); }
    .vega-painel-integ-lista li:first-child { border-top: 0; }
    .vega-painel-integ-lista b { display: block; font-size: 14px; font-weight: 600; color: var(--vega-ink); }
    .vega-painel-integ-lista small { display: block; font-size: 12px; color: var(--vega-ink-3); }
    .vega-painel-integ-marca { flex: none; display: inline-flex; width: 30px; justify-content: center; line-height: 0; }
    .vega-painel-integ-dominios { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--vega-line); border-radius: 14px; }
    .vega-painel-integ-dominio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--vega-chip-blue-bg); font-size: 13.5px; color: var(--vega-ink-2); }
    /* Configurações Gerais do painel: seção = ícone solto à esquerda + campos
       em grade; imagens com "Escolher arquivo", prévia e lixeira. */
    .vega-painel-secao { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 24px; }
    .vega-painel-secao-icone { color: var(--vega-blue); padding-top: 2px; }
    .vega-painel-secao-corpo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
    .vega-painel-secao-titulo { font-size: 16px; font-weight: 700; color: var(--vega-ink); }
    /* Colunas fixas; dentro da grade, cada campo ocupa 3 linhas (rótulo,
       controle, dica) em subgrid, então os controles da mesma fileira ficam
       na mesma altura mesmo com dicas de tamanhos diferentes. */
    .vega-painel-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; row-gap: 22px; }
    .vega-painel-campos.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @media (max-width: 1180px) { .vega-painel-campos, .vega-painel-campos.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .vega-painel-campos, .vega-painel-campos.quatro { grid-template-columns: 1fr; } }
    .vega-painel-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .vega-painel-campos > .vega-painel-campo { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 6px; align-content: start; }
    .vega-painel-campo.largo { grid-column: span 2; }
    @media (max-width: 640px) { .vega-painel-campo.largo { grid-column: auto; } .vega-painel-secao { grid-template-columns: 1fr; } }
    .vega-painel-campo > label, .vega-painel-campo-rotulo { font-size: 13px; font-weight: 600; color: var(--vega-ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .vega-painel-campos > .vega-painel-campo > label, .vega-painel-campos > .vega-painel-campo > .vega-painel-campo-rotulo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
    .vega-painel-personalizado { color: var(--vega-blue); font-weight: 600; }
    .vega-painel-campo > p, .vega-painel-imagem > p { font-size: 12px; line-height: 1.45; color: var(--vega-ink-3); }
    .vega-painel-campo-fixo { display: flex; align-items: center; min-height: 40px; color: var(--vega-ink-2); background: var(--vega-hover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-painel-exemplo { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vega-green-texto, var(--vega-green)); background: var(--vega-chip-green-bg); }
    .vega-painel-imagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px 20px; }
    .vega-painel-imagem { display: flex; flex-direction: column; gap: 8px; }
    .vega-painel-imagem-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .vega-painel-imagem-linha form { margin: 0; }
    .vega-painel-arquivo { cursor: pointer; white-space: nowrap; }
    .vega-btn.vega-painel-arquivo { padding: 0 12px; height: 40px; font-size: 13px; }
    .vega-painel-imagem-previa { display: flex; align-items: center; justify-content: center; width: 92px; height: 40px; border-radius: 10px; border: 1px solid var(--vega-line); padding: 6px; }
    .vega-painel-imagem-previa img { max-height: 28px; max-width: 80px; }
    .vega-painel-lixeira { color: var(--vega-chip-red-fg); padding: 6px; border-radius: 8px; }
    .vega-painel-lixeira:hover { background: var(--vega-chip-red-bg); }
    .vega-painel-sobre { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
    .vega-painel-sobre > span { display: flex; flex-direction: column; gap: 2px; }
    .vega-painel-sobre small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-painel-sobre b { font-size: 14px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-painel-sobre em { font-size: 12px; font-style: normal; color: var(--vega-ink-3); }
    .vega-painel-sobre-links { margin-left: auto; }
    /* Comunicados: formulário + prévia num CRM de mentira. */
    .vega-painel-comunicado { align-items: start; }
    .vega-painel-com-linha { display: flex; flex-wrap: wrap; gap: 16px; }
    .vega-painel-com-clinicas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin-top: 6px; }
    .vega-painel-com-tela { border: 1px solid var(--vega-line); border-radius: 12px; overflow: hidden; background: var(--vega-card); }
    .vega-painel-com-janela { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--vega-line); background: var(--vega-card); }
    .vega-painel-com-janela i { width: 8px; height: 8px; border-radius: 50%; background: var(--vega-line); }
    .vega-painel-com-miolo { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 240px; }
    .vega-painel-com-lado { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-right: 1px solid var(--vega-line); background: var(--vega-card); }
    .vega-painel-com-lado i, .vega-painel-com-conteudo i { display: block; height: 8px; border-radius: 4px; background: var(--vega-line); }
    .vega-painel-com-conteudo { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--vega-hover); }
    .vega-painel-com-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; background: #EEF4FF; color: #1D4ED8; }
    .vega-painel-com-entendi { flex: none; border: 1px solid currentColor; border-radius: 8px; padding: 5px 10px; font-weight: 600; font-size: 12px; }
    .vega-painel-com-blocos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .vega-painel-com-blocos i { height: 48px !important; border-radius: 10px !important; }
    .vega-painel-com-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--vega-ink-3); padding: 10px 12px; border-radius: 10px; background: var(--vega-chip-blue-bg); }
    .vega-painel-com-item { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--vega-line); }
    /* Funções por clínica: etapas e cartões de função. */
    [data-fn-passo][hidden], [data-fn-clinica][hidden] { display: none !important; }
    .vega-painel-passos { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--vega-line); overflow-x: auto; }
    .vega-painel-passos li { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: max-content; font-size: 14px; font-weight: 600; color: var(--vega-ink-3); }
    .vega-painel-passos li:not(:last-child)::after { content: ''; flex: 1 1 auto; min-width: 24px; height: 1px; background: var(--vega-line); }
    .vega-painel-passo-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--vega-line); font-size: 13px; font-variant-numeric: tabular-nums; }
    .vega-painel-passos li.atual { color: var(--vega-ink); }
    .vega-painel-passos li.atual .vega-painel-passo-num, .vega-painel-passos li.feito .vega-painel-passo-num { background: var(--vega-blue); border-color: var(--vega-blue); color: #fff; }
    .vega-painel-passos li.feito { color: var(--vega-ink-2); }
    .vega-painel-passos li.feito:not(:last-child)::after { background: var(--vega-blue); }
    .vega-painel-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
    .vega-painel-opcao { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--vega-line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
    .vega-painel-opcao:hover { border-color: var(--vega-blue); }
    .vega-painel-opcao:has(input:focus-visible) { outline: 2px solid var(--vega-blue); outline-offset: 2px; }
    .vega-painel-opcao.ativa, .vega-painel-opcao:has(input:checked) { border-color: var(--vega-blue); background: var(--vega-chip-blue-bg); }
    .vega-painel-opcao-icone { color: var(--vega-blue); }
    .vega-painel-opcao b { font-size: 14px; color: var(--vega-ink); }
    .vega-painel-opcao small { font-size: 12.5px; line-height: 1.4; color: var(--vega-ink-3); }
    /* Operadores: um cartão por pessoa e o convite. */
    .vega-painel-operador { display: grid; grid-template-columns: 44px minmax(200px, 1.6fr) repeat(3, minmax(110px, auto)) 40px; align-items: center; gap: 12px 24px; padding: 18px 20px; border-top: 1px solid var(--vega-line); }
    .vega-painel-lista > .px-5 + .vega-painel-operador { border-top: 0; }
    .vega-painel-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vega-chip-blue-bg); color: var(--vega-blue); font-weight: 700; font-size: 17px; }
    .vega-painel-operador-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vega-painel-operador-quem b { font-size: 15px; color: var(--vega-ink); }
    .vega-painel-operador-quem > span { font-size: 13px; color: var(--vega-ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
    .vega-painel-operador-dado { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 20px; border-left: 1px solid var(--vega-line); }
    .vega-painel-operador-dado small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-painel-operador-acao { justify-self: end; }
    @media (max-width: 900px) { .vega-painel-operador { grid-template-columns: 44px 1fr; } .vega-painel-operador-dado { grid-column: 2; padding-left: 0; border-left: 0; } .vega-painel-operador-acao { grid-column: 2; justify-self: start; } }
    .vega-painel-convite { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--vega-chip-blue-bg); border-color: transparent; }
    .vega-painel-convite-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: end; gap: 16px; }
    @media (max-width: 760px) { .vega-painel-convite-campos { grid-template-columns: 1fr; } }
    .vega-painel-log > li { display: grid; grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 1.4fr) 150px 150px 40px; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--vega-line); }
    .vega-painel-log > li:last-child { border-bottom: 0; }
    .vega-painel-log > li:hover { background: var(--vega-hover); }
    .vega-painel-log-quem { display: flex; flex-direction: column; min-width: 0; }
    .vega-painel-log-quem b { font-size: 13.5px; color: var(--vega-ink); }
    .vega-painel-log-quem small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-painel-log-acao { font-size: 13px; color: var(--vega-ink-2); display: inline-flex; gap: 8px; min-width: 0; }
    .vega-painel-log .vega-chip { justify-self: start; }
    .vega-painel-log > li > .vega-menu { justify-self: end; }
    @media (max-width: 900px) {
        .vega-painel-log > li { grid-template-columns: 24px 1fr 40px; }
        .vega-painel-log-acao, .vega-painel-log > li > .vega-mono { grid-column: 2; }
        .vega-painel-log > li > .vega-chip { grid-column: 2; }
    }

    /* Gargalo do funil: uma faixa no fundo neutro do produto, o icone ambar
       sem caixa, a frase em destaque e as acoes a direita (embaixo no
       celular). O amarelo cheio de antes brigava com o azul do funil. */
    .vega-gargalo {
        display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
        padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--vega-ink) 4%, var(--vega-card));
    }
    .vega-gargalo-icone { flex: none; display: inline-flex; color: var(--vega-amber-texto); }
    .vega-gargalo-texto { flex: 1 1 260px; min-width: 0; }
    .vega-gargalo-texto .vega-eyebrow { color: var(--vega-amber-texto); }
    .vega-gargalo-frase { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--vega-ink); line-height: 1.3; }
    .vega-gargalo-nota { margin-top: 2px; font-size: 12px; color: var(--vega-ink-3); }
    .vega-gargalo-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
    .vega-gargalo-acoes a {
        display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px;
        border: 1px solid var(--vega-line); background: var(--vega-card); color: var(--vega-ink-2);
        font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
        transition: border-color .12s, color .12s;
    }
    .vega-gargalo-acoes a:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); color: var(--vega-ink); }
    /* Em 320 px "Ver agendados que não avançaram" não cabia numa linha e o
       botão saía do cartão (auditoria de 27/09): no celular o texto quebra. */
    @media (max-width: 480px) {
        .vega-gargalo-acoes { min-width: 0; max-width: 100%; }
        .vega-gargalo-acoes a { white-space: normal; max-width: 100%; text-align: left; }
    }
    .vega-gargalo-acoes a.principal { background: var(--vega-ink); border-color: var(--vega-ink); color: var(--vega-card); }
    .vega-gargalo-acoes a.principal:hover { border-color: var(--vega-blue); background: var(--vega-blue); color: #fff; }
    .vega-meta-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px; border-radius: 16px; border: 1px dashed var(--vega-line); }

    /* Estado vazio orientado. */
    .vega-card-vazio { padding: 12px 14px; border-radius: 12px; background: var(--vega-hover); border: 1px dashed var(--vega-line); }

    /* Tabela compacta dos cards analiticos. */
    .vega-tabela-mini { width: 100%; border-collapse: collapse; font-size: 12px; }
    .vega-tabela-mini th { text-align: right; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vega-ink-3); padding: 6px 5px; border-bottom: 1px solid var(--vega-line); white-space: nowrap; }
    .vega-tabela-mini td { text-align: right; padding: 7px 5px; border-bottom: 1px solid var(--vega-line); color: var(--vega-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .vega-tabela-mini th:first-child, .vega-tabela-mini td:first-child { text-align: left; color: var(--vega-ink); font-weight: 600; }

    /* Modal de personalizacao: tres colunas, um interruptor por card, e a
       mudanca aplicada na hora (nao ha Salvar). Largo de proposito: e uma
       tela de configuracao, nao um aviso. */
    /* `.vega-dialog.vega-dialog-painel`: a regra base do dialogo vem depois
       nesta folha e ganharia na largura. */
    .vega-dialog.vega-dialog-painel { max-width: 960px; width: 94vw; }
    .vega-dialog-painel form { display: flex; flex-direction: column; gap: 18px; padding: 24px 26px; }
    .vega-modal-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .vega-modal-contador { display: flex; flex-direction: column; align-items: flex-end; padding: 8px 14px; border-radius: 12px; background: var(--vega-hover); font-size: 12px; color: var(--vega-ink-3); white-space: nowrap; }
    .vega-modal-contador b { font-size: 15px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-modal-contador.aviso { background: var(--vega-chip-amber-bg); color: var(--vega-chip-amber-fg); }
    .vega-modal-contador.alerta { background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg); }
    .vega-modal-grupos { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (max-width: 760px) { .vega-modal-grupos { grid-template-columns: 1fr; } }
    .vega-modal-grupo { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--vega-hover); }
    .vega-modal-grupo .vega-eyebrow { margin: 2px 4px 6px; }
    .vega-modal-card {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 9px 10px 9px 12px; border-radius: 10px; background: var(--vega-card); border: 1px solid var(--vega-line);
        cursor: pointer; transition: border-color .12s, box-shadow .12s;
    }
    .vega-modal-card:hover { border-color: color-mix(in srgb, var(--vega-blue) 45%, var(--vega-line)); }
    .vega-modal-card:has(input:checked) { border-color: color-mix(in srgb, var(--vega-blue) 55%, var(--vega-line)); box-shadow: inset 3px 0 0 var(--vega-blue); }
    .vega-modal-card-texto { display: flex; flex-direction: column; min-width: 0; }
    .vega-modal-card-nome { font-size: 13px; font-weight: 600; color: var(--vega-ink); }
    .vega-modal-card small { font-size: 11px; line-height: 1.35; color: var(--vega-ink-3); margin-top: 1px; }
    .vega-modal-card.sem-dado .vega-modal-card-nome { color: var(--vega-ink-2); }
    .vega-modal-card.sem-dado small { color: var(--vega-amber-texto, var(--vega-amber)); }
    .vega-modal-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--vega-line); }
    /* Interruptor: o mesmo desenho do sistema operacional, em azul da marca. */
    .vega-switch { position: relative; flex: none; width: 38px; height: 22px; }
    .vega-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
    .vega-switch-trilho { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--vega-ink) 18%, var(--vega-card)); transition: background .15s; }
    .vega-switch-trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(11, 18, 32, .25); transition: transform .15s; }
    .vega-switch input:checked + .vega-switch-trilho { background: var(--vega-blue); }
    .vega-switch input:checked + .vega-switch-trilho::after { transform: translateX(16px); }
    .vega-switch input:focus-visible + .vega-switch-trilho { outline: 2px solid var(--vega-blue); outline-offset: 2px; }

    /* ===================== Matriz dia x hora (No-show) ===================== */
    /* Uma linha por dia da semana, uma coluna por hora do expediente; a
       primeira coluna e o rotulo do dia, a ultima linha o das horas. Celulas
       quadradas de canto arredondado, como um calendario de atividade. */
    .vega-matriz-kpis { display: flex; gap: 28px; margin-top: 10px; }
    .vega-matriz-kpi { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-matriz-kpi-rotulo { display: block; font-size: 11px; color: var(--vega-ink-3); margin-top: 2px; }
    /* Quadrados grandes e colados (referência do Daniel): cada célula ocupa a
       coluna inteira, a folga é de 4px, e a grade tem largura máxima para os
       quadrados não virarem lajes num card largo. */
    .vega-matriz {
        display: grid; grid-template-columns: 30px repeat(var(--vega-matriz-colunas, 11), minmax(0, 1fr));
        gap: 4px; align-items: center; margin-top: 16px;
    }
    .vega-matriz-dia, .vega-matriz-hora { font-size: 10px; font-weight: 600; color: var(--vega-ink-3); letter-spacing: .02em; }
    .vega-matriz-hora { text-align: center; font-variant-numeric: tabular-nums; }
    .vega-matriz-cel { display: block; aspect-ratio: 1; width: 100%; border-radius: 8px; justify-self: stretch; }
    .vega-matriz-cel.vazia { background: color-mix(in srgb, var(--vega-ink) 7%, var(--vega-card)); }
    /* Esqueleto: a grade aparece mesmo sem dados, cinza e respirando devagar. */
    .vega-matriz-esqueleto .vega-matriz-cel.vazia { animation: vega-esqueleto 1.8s ease-in-out infinite; }
    .vega-matriz-esqueleto .vega-matriz-cel.vazia:nth-child(3n) { animation-delay: .3s; }
    .vega-matriz-esqueleto .vega-matriz-cel.vazia:nth-child(3n+1) { animation-delay: .6s; }
    .vega-esqueleto-kpis .vega-matriz-kpi { color: var(--vega-ink-3); }
    @keyframes vega-esqueleto { 50% { opacity: .45; } }
    @media (prefers-reduced-motion: reduce) { .vega-matriz-esqueleto .vega-matriz-cel.vazia { animation: none; } }
    .vega-matriz-cel.ok.n1 { background: color-mix(in srgb, var(--vega-blue) 32%, var(--vega-card)); }
    .vega-matriz-cel.ok.n2 { background: color-mix(in srgb, var(--vega-blue) 55%, var(--vega-card)); }
    .vega-matriz-cel.ok.n3 { background: color-mix(in srgb, var(--vega-blue) 78%, var(--vega-card)); }
    .vega-matriz-cel.ok.n4 { background: var(--vega-blue); }
    .vega-matriz-cel.falta.n1 { background: color-mix(in srgb, var(--vega-red-texto) 38%, var(--vega-card)); }
    .vega-matriz-cel.falta.n2 { background: color-mix(in srgb, var(--vega-red-texto) 58%, var(--vega-card)); }
    .vega-matriz-cel.falta.n3 { background: color-mix(in srgb, var(--vega-red-texto) 80%, var(--vega-card)); }
    .vega-matriz-cel.falta.n4 { background: var(--vega-red-texto); }
    .vega-matriz-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11px; color: var(--vega-ink-3); }
    .vega-matriz-legenda span { display: inline-flex; align-items: center; gap: 6px; }
    .vega-matriz-legenda i { width: 12px; height: 12px; border-radius: 4px; }

    /* ===================== Anel segmentado (Ocupacao) ===================== */
    .vega-anel-linha { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
    /* A ultima linha nao soma o respiro dela ao do cartao: com um so
       profissional (filtro) o anel parecia caido para baixo. */
    .vega-anel-linha:last-child { padding-bottom: 0; }
    .vega-anel line { stroke: color-mix(in srgb, var(--vega-ink) 9%, var(--vega-card)); stroke-width: 3.2; stroke-linecap: round; }
    .vega-anel line.aceso { stroke: var(--vega-anel-cor, var(--vega-blue)); }
    .vega-anel-num { font-size: 19px; font-weight: 700; fill: var(--vega-ink); font-family: 'Satoshi', 'Manrope', sans-serif; letter-spacing: -.02em; }

    /* ===================== Pesquisa de satisfacao ===================== */
    @media (max-width: 480px) { .vega-nps-escala { grid-template-columns: repeat(6, 1fr); } }

    /* ===================== Acesso restrito ===================== */

    .vega-restrito-fundo { display: flex; justify-content: center; padding: 64px 16px 48px; }
    .vega-restrito {
        width: 100%; max-width: 620px; padding: 48px 44px 40px; text-align: center;
    }
    .vega-restrito-icone {
        width: 72px; height: 72px; margin: 0 auto; border-radius: 999px;
        display: flex; align-items: center; justify-content: center;
        background: var(--vega-blue-soft); color: var(--vega-blue-texto);
    }
    .vega-restrito-titulo {
        margin: 22px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em;
        color: var(--vega-ink); line-height: 1.2;
    }
    .vega-restrito-texto {
        margin: 14px auto 0; max-width: 46ch; font-size: 16px; line-height: 1.65;
        color: var(--vega-ink-2);
    }
    .vega-restrito-apoio {
        margin: 10px auto 0; max-width: 52ch; font-size: 14px; line-height: 1.65;
        color: var(--vega-ink-3);
    }
    /* O respiro que faltava: os botoes ficavam colados no texto. */
    .vega-restrito-acoes {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
        margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--vega-line);
    }
    .vega-restrito-acoes .vega-btn { min-width: 160px; justify-content: center; }
    @media (max-width: 640px) {
        .vega-restrito-fundo { padding: 24px 12px 32px; }
        .vega-restrito { padding: 32px 22px 28px; }
        .vega-restrito-titulo { font-size: 22px; }
        .vega-restrito-acoes { flex-direction: column-reverse; align-items: stretch; }
        .vega-restrito-acoes .vega-btn { width: 100%; }
    }

    /* Item com cadeado: opaco de leve, mas legivel; o cadeado e o texto do
       title dizem que e restrito (nao so a cor). Cursor de "nao permitido"
       avisa antes do clique, e o clique ainda abre a explicacao. */
    .vega-side-trancado { opacity: .55; cursor: not-allowed; }
    .vega-side-trancado:hover { opacity: .8; }
    .vega-side-cadeado { flex-shrink: 0; color: var(--vega-ink-3); }
    .sidebar-collapsed .vega-side-trancado .vega-side-cadeado { display: none; }

    .vega-side-movel details.vega-acc > summary { list-style: none; }
    .vega-side-movel details.vega-acc > summary::-webkit-details-marker { display: none; }
    .vega-side-movel details.vega-acc[open] > summary .vega-acc-arrow { transform: rotate(180deg); }

    /* Encolhida, o icone volta ao centro: com o recuo acima ele ficaria torto. */
    .sidebar-collapsed .vega-side nav summary,
    .sidebar-collapsed .vega-side nav > div > a { justify-content: center; padding: 10px 0; }

    /* Os filhos do acordeao acompanham o mesmo ritmo. */
    .vega-side .vega-acc-caixa a,
    .vega-side-movel .vega-acc-caixa a { padding: 8px 12px; }

    /* A faixa da marca guarda tambem o botao de encolher. A altura e a margem
       ficam AQUI, e nao no link: a area rolavel do menu desconta 76px (62 + 14)
       e mover essa conta quebraria o encaixe com a borda da janela. */
    .vega-side-marca {
        display: flex; align-items: center; justify-content: space-between;
        height: var(--vega-marca-h); padding: 0 16px; margin-bottom: 14px;
    }
    /* Encolhida, marca em cima e botao embaixo: 32px de botao ao lado de um
       simbolo de 40px numa faixa de 76px deixaria os dois tortos.

       O respiro entre os dois e maior que a folga em volta de proposito: com
       espacos iguais, o botao subia e sobrava vao embaixo dele. */
    .sidebar-collapsed .vega-side-marca {
        flex-direction: column; justify-content: center; gap: 16px; padding: 0;
    }
    .vega-side-marca-link { display: flex; align-items: center; }

    /* O canto arredondado do Krayin sai no tema escuro.
     *
     * `.sidebar-rounded::after` cola um `dark-corner-clip.svg` na lateral da
     * barra, e o cinza dele esta DENTRO do arquivo: foi desenhado para o fundo
     * escuro antigo. Com o fundo novo ele deixou de combinar e virou um
     * triangulo cinza solto no meio da barra.
     *
     * No tema claro o arquivo ainda casa com o fundo, e la a curva continua. */
    .dark .sidebar-rounded::after,
    .dark .sidebar-rounded::before { display: none !important; }

    .vega-side-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; flex-shrink: 0;
        border: 0; border-radius: 8px; cursor: pointer;
        background: transparent; color: var(--vega-ink-3);
        transition: background-color .12s ease-out, color .12s ease-out;
    }
    .vega-side-toggle:hover { background: rgba(128,128,128,.14); color: var(--vega-ink); }
    /* A seta acompanha o estado: para dentro quando da para encolher, para
       fora quando da para abrir. Sem isso o mesmo desenho servia aos dois, e
       encolhido a pessoa usava um botao de "minimizar" para expandir. */
    /* `sidebar-pinned-collapsed` e a PREFERENCIA; `sidebar-collapsed` e o que
       esta na tela agora. Enquanto o mouse espia, a barra abre mas a
       preferencia continua "encolhida" — e e a preferencia que o clique vai
       inverter. Usar a classe visual faria a seta dizer "fechar" no momento em
       que o clique abriria. */
    .vega-side-seta-abre { display: none; }
    .sidebar-pinned-collapsed .vega-side-seta-fecha { display: none; }
    .sidebar-pinned-collapsed .vega-side-seta-abre { display: inline; }
    /* A marca e 369x120 (3,08:1). A 26px ela ocupava 80px dos 208px uteis da
       barra e perdia presenca; a 36px ja melhorou, e a 44px vai a 135px, que e
       o tamanho em que ela lidera a barra sem encostar no botao. */
    .vega-side-logo { height: 44px; width: auto; }
    /* O simbolo e quadrado e mora na barra encolhida, de 76px. */
    .vega-side-iso { height: 40px; width: auto; display: none; }
    /* Sem escapar `group/container`: a classe `sidebar-collapsed` esta no
       mesmo elemento e sozinha ja identifica o estado. */
    .sidebar-collapsed .vega-side-logo { display: none; }
    .sidebar-collapsed .vega-side-iso { display: block; }
    .sidebar-collapsed .vega-side-marca { justify-content: center; padding: 0; }

    /* Rodape da versao. Uma linha so, cortada com reticencias se faltar espaco:
       antes ela quebrava em quatro linhas e vazava para fora da barra. */
    .vega-side-versao {
        position: absolute; left: 0; right: 0; bottom: 8px;
        padding: 0 18px; pointer-events: none;
    }
    .vega-side-versao p {
        margin: 0; font-size: 10px; letter-spacing: .08em; color: var(--vega-ink-3);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Encolhida fica so o numero: e o que se olha de relance para saber o que
       esta no ar. A palavra e a data nao cabem em 76px. */
    .sidebar-collapsed .vega-side-versao { padding: 0 6px; text-align: center; }
    .sidebar-collapsed .vega-side-versao p { letter-spacing: 0; }
    .sidebar-collapsed .vega-side-versao-marca,
    .sidebar-collapsed .vega-side-versao-data { display: none; }

    /* O acordeao abria de uma vez, e o conteudo saltava na tela.

       So a ABERTURA e animada: `<details>` esconde o conteudo com display:none
       ao fechar, e nenhuma transicao roda em cima disso sem JS. Animar so a
       entrada resolve o que incomoda e nao pede script nenhum. */
    /* O painel DESDOBRA para baixo, em vez de aparecer inteiro e assentar.

       Antes o conteudo entrava de `translateY(-6px)` ate 0: nascia 6px ACIMA
       do lugar e caia. Como o `<details>` ja tinha saltado para a altura cheia,
       a queda lia como repique. O Daniel descreveu exatamente assim: "vai para
       baixo e da um pulinho".

       Agora quem anima e a ALTURA (`grid-template-rows` de `0fr` a `1fr`), que
       e o unico jeito de animar altura automatica sem medir nada em JS. O
       painel cresce de cima para baixo e para. Nenhum deslocamento, nenhum
       repique.

       Precisa ser `animation` e nao `transition`: o `<details>` fechado nao
       renderiza o conteudo, e transicao nenhuma roda sobre um elemento que
       acabou de nascer. */
    .vega-acc-caixa { display: grid; grid-template-rows: 1fr; }
    .vega-acc-caixa > div { min-height: 0; }

    .vega-acc-abrindo > .vega-acc-caixa {
        animation: vega-acc-abre .26s cubic-bezier(.22, .61, .36, 1);
    }
    .vega-acc-abrindo > .vega-acc-caixa > div { overflow: hidden; }

    @keyframes vega-acc-abre {
        from { grid-template-rows: 0fr; opacity: .4; }
        to   { grid-template-rows: 1fr; opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vega-acc-abrindo > .vega-acc-caixa { animation: none; }
    }

    /* ---- Telas do Krayin com a forma do Vega ----

       Leads e Pipeline sao telas do Krayin, e destoavam do resto do CRM. A cor
       ja foi resolvida na raiz (o `brand_color` padrao apontava para o azul do
       Krayin) e a tipografia ja era a mesma. O que sobrava era a FORMA: cantos
       de 4 e 6px contra os 10 e 16px do Vega, e botao sem o mesmo respiro.

       Ajustado aqui, no tema, e nao nas views do Krayin: sao dezenas de telas,
       e mexer numa a uma envelhece mal a cada atualizacao do pacote. */
    .primary-button, .secondary-button {
        border-radius: 10px; padding: 8px 16px; font-size: 14px; font-weight: 600;
        transition: filter .15s, transform .05s;
    }
    .primary-button:hover, .secondary-button:hover { filter: brightness(1.06); opacity: 1; }
    .primary-button:active, .secondary-button:active { transform: translateY(1px); }

    /* Os cartoes e caixas do Krayin. O seletor e feio de proposito: as classes
       vem do Tailwind, entao nao ha nome proprio para segurar. */
    .box-shadow { border-radius: 16px; }

    /* Campos: o Krayin usa 6px, o Vega 10px. */
    .primary-input, .secondary-input, input.rounded-md, select.rounded-md, textarea.rounded-md {
        border-radius: 10px;
    }

    /* O cinza-400 do Krayin como TEXTO da 2.54 sobre branco: e a cor dos
       textos de estado vazio ("Adicione um lead para organizar..."), justamente
       o texto que a pessoa precisa ler quando a tela esta vazia e ela nao sabe
       o que fazer. So no tema claro; no escuro esse mesmo cinza vai bem. */
    :root:not(.dark) .text-gray-400 { color: var(--vega-ink-3); }

    /* ---- Abas ----

       Um componente so para toda faixa de abas do CRM: Configuracoes, o modal
       do botao "+", lista de espera e antecipacoes. Antes cada tela tinha o
       seu: Configuracoes usava botao com borda e a ativa em azul cheio, as
       outras usavam chip. Tres desenhos para a mesma ideia.

       Sublinhado curto sob o texto, na cor da tinta e nao no azul: azul no Vega
       marca acao e foco, e trocar de aba e navegacao. A ativa se distingue pelo
       peso e pelo traco, sem pintar nada. */
    /* Rola na horizontal em vez de quebrar linha.

       Com `flex-wrap`, sete abas num container estreito viravam duas fileiras
       e a borda de baixo passava a valer so para a ultima: a de cima ficava
       com o traco da aba ativa boiando, sem faixa que o sustentasse. Uma
       fileira so, rolavel, mantem o desenho igual em qualquer largura. */
    /* Link e acao em texto.

       Classe de verdade, e nao `text-[var(--...)]`: valor arbitrario NOVO nao
       existe no CSS compilado do Krayin, e a cor simplesmente nao aplica. Foi
       assim que "Editar" e "Ver agenda" ficaram com 1.04 de contraste. */
    .vega-link { color: var(--vega-blue-texto); }
    .vega-link:hover { text-decoration: underline; }

    /* Acao destrutiva em texto. O vermelho puro do Tailwind da 4.07 no escuro. */
    .vega-link-perigo { color: var(--vega-red-texto); }
    .vega-link-ok { color: var(--vega-green-texto); }
    .vega-link-ok:hover { text-decoration: underline; }
    .vega-link-perigo:hover { text-decoration: underline; }

    .vega-abas {
        display: flex; flex-wrap: nowrap; gap: 2px;
        border-bottom: 1px solid var(--vega-line);
        overflow-x: auto; overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .vega-abas::-webkit-scrollbar { height: 0; }
    .vega-aba {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 14px; margin-bottom: -1px;
        border: 0; border-bottom: 2px solid transparent;
        background: transparent; cursor: pointer;
        font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3;
        color: var(--vega-ink-3); white-space: nowrap;
        text-decoration: none;
        transition: color .15s, border-color .15s;
    }
    .vega-aba:hover { color: var(--vega-ink-2); }
    .vega-aba-ativa { color: var(--vega-ink); border-bottom-color: var(--vega-ink); }
    .vega-aba-ativa:hover { color: var(--vega-ink); }

    /* O icone acompanha o texto: apagado quando a aba esta em repouso, cheio
       quando ela esta ativa. Sem isto o icone fica na mesma cor nas cinco e
       rouba a atencao do unico sinal que importa. */
    .vega-aba [class^="icon-"], .vega-aba [class*=" icon-"] { font-size: 20px; opacity: .75; }
    .vega-aba-ativa [class^="icon-"], .vega-aba-ativa [class*=" icon-"] { opacity: 1; }

    @media (max-width: 640px) {
        .vega-aba { padding: 9px 10px; font-size: 13px; gap: 6px; }
    }

    /* ---- Financeiro ----

       Os tres valores de apoio em LISTA, e nao em grade. A grade do painel tem
       quatro colunas, e la os valores sao "0" e "12"; aqui sao "R$ 11.500,00"
       em 75px, e quebravam no meio da linha. Empilhado, o rotulo fica a
       esquerda e o valor a direita, todos alinhados pela mesma borda: da para
       comparar os tres de cima a baixo sem procurar. */
    .vega-fin-lista { padding: 8px 22px; display: flex; flex-direction: column; }
    .vega-fin-linha {
        display: flex; align-items: center; justify-content: space-between;
        gap: 14px; padding: 14px 0; flex: 1 1 auto;
        border-top: 1px solid var(--vega-line);
    }
    /* Ícone solto (sem caixa), na cor da métrica; o rótulo cresce e o valor fecha a linha. */
    .vega-fin-icone { flex: none; display: inline-flex; }
    .vega-fin-linha .vega-fin-rotulo { flex: 1; }
    .vega-fin-linha:first-child { border-top: 0; }
    .vega-fin-linha:hover .vega-fin-rotulo { color: var(--vega-blue-texto); }

    .vega-fin-rotulo {
        font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
        text-transform: uppercase; color: var(--vega-ink-3);
    }
    .vega-fin-valor {
        font-size: 19px; font-weight: 700; color: var(--vega-ink);
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .vega-fin-ativo { background: var(--vega-blue-soft); margin: 0 -22px; padding: 14px 22px; }
    .vega-fin-ativo .vega-fin-rotulo { color: var(--vega-blue-texto); }

    /* Barra da inadimplencia. A taxa sozinha nao diz se e muito;
       a barra mostra o tamanho antes de a pessoa ler o numero. */
    .vega-fin-barra {
        height: 6px; border-radius: 999px; overflow: hidden; margin-top: 10px;
        background: var(--vega-blue-soft);
    }
    .vega-fin-barra-cheia { height: 100%; border-radius: 999px; }

    /* O recorte aberto fica marcado na faixa de apoio. */
    .vega-fin-ativo .vega-eyebrow { color: var(--vega-blue-texto); }

    /* Altura de linha: PROPORCAO, e nao pixel fixo.

       O Krayin traz `p { @apply text-[14px] !leading-[17px] }` — ou seja,
       `line-height: 17px !important` em TODO paragrafo do CRM. Fixo e com
       `!important`, num seletor de elemento.

       Para 14px isso da 1.21, que ja e apertado. Mas a altura nao acompanha a
       fonte: o numero do heroi, de 38px, ficava com uma caixa de linha de 17px
       — menos da metade da propria letra. No celular aparece mais porque o
       texto quebra em mais linhas e elas quase se tocam.

       Precisa de `!important` para vencer o do Krayin: entre dois importantes
       de mesma forca, ganha a especificidade, e `p` e o mais fraco que existe. */
    p { line-height: 1.45 !important; }

    /* Onde a letra e grande, a proporcao aperta de proposito: titulo com 1.45
       fica frouxo. */
    .vega-heroi-num { line-height: 1.05 !important; }
    .vega-title, .vega-stat, .vega-kpi-num { line-height: 1.2 !important; }
    .vega-eyebrow { line-height: 1.35 !important; }

    /* Avatar do usuario no cabecalho.

       O Krayin desenha a inicial em BRANCO sobre um pastel (bg-pink-400), o que
       da 2.65 — e falha nos dois temas, nao so no escuro. Texto escuro sobre o
       mesmo pastel vai a 6.5, e o avatar continua colorido.

       Era o unico reprovado que sobrou depois de varrer Painel, Financeiro,
       Agenda e Pacientes: 572 elementos, um so abaixo de 4.5. */
    header button.rounded-full.text-white { color: #171717 !important; }

    /* Os icones do menu vinham em #D1D5DB, que e cinza FRIO — o Krayin fixa
       isso em `html.dark [class*=" icon-"]`. Ao lado de superficies neutras o
       azul deles aparece. Mesmo seletor para vencer pela ordem. */
    html.dark [class*=" icon-"],
    html.dark [class^="icon-"] { color: var(--vega-ink-2); }

    /* Borda padrao do Tailwind (#E5E7EB, tambem fria) para quem nao declara
       uma. Quase sempre invisivel por ter largura zero, mas quando aparece,
       aparece azulada. */
    .dark *, .dark ::before, .dark ::after { border-color: var(--vega-line); }

    /* Os cinzas de TEXTO do Tailwind sao todos frios (a familia `gray`). Onde o
       Krayin os declara direto na marcacao, eles escapavam dos tokens e
       apareciam azulados no meio de superficies neutras. */
    .dark .dark\:text-gray-300,
    .dark .text-gray-400 { color: var(--vega-ink-3) !important; }
    .dark .text-gray-600,
    .dark .text-gray-800 { color: var(--vega-ink-2) !important; }

    /* ---- Variacao (o chip ao lado do numero) ----

       As tres referencias poem a variacao colada no numero. Vem sobre fundo
       escuro no hero, entao a cor tem que ter fundo proprio para ler. */
    .vega-heroi-linha { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
    .vega-delta {
        font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
        font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
    }
    /* Cores CLARAS de proposito, e iguais nos dois temas: o chip vive dentro do
       heroi, que tem fundo azul da marca nos dois. E texto claro sobre azul, e
       nao sobre o fundo da pagina.

       O FUNDO E QUASE SOLIDO por isso. Com 18% de opacidade o azul do gradiente
       atravessava, e o contraste variava com a POSICAO no cartao: 3.13 na ponta
       clara do gradiente e 4.76 na escura, para o vermelho; 3.05 e 4.60 para o
       verde. A 75% o chip carrega a propria cor e o numero fica igual em
       qualquer fundo — 5.58 e 4.81 no pior caso.

       Historia, porque ja errei aqui duas vezes: uma primeira medicao acusou
       2.86, eu troquei por tokens de tema e derrubei para 1.07 (vermelho ESCURO
       sobre azul). Descartei como falso positivo e deixei quieto — mas nunca
       calculei o valor VERDADEIRO. O erro das duas vezes foi o mesmo: medir
       contra a cor errada. Sobre gradiente, a conta e composta e tem dois
       extremos. */
    .vega-delta-sobe { background: rgba(12, 92, 60, .75);  color: #6ee7a8; }
    .vega-delta-cai  { background: rgba(130, 34, 26, .75); color: #ffb4a6; }

    /* ---- Grafico de recebimento (onda) ----

       A serie temporal do topo, como nas referencias, mas em azul Vega. Era
       barras retas; virou onda: area suave em SVG (curva Catmull-Rom no helper
       Curva.php) com preenchimento em degrade. O eixo abaixo marca o primeiro
       e o ultimo dia do periodo. */
    .vega-fin-onda { display: block; width: 100%; height: 150px; margin-top: 18px; }

    /* Grafico com faixa propria esperando a resposta: esmaece de leve, so o
       desenho, para o clique nao parecer perdido. Some junto com a troca. */
    [data-vega-grafico][aria-busy="true"] svg,
    [data-vega-grafico][aria-busy="true"] [data-vega-barra] { opacity: .45; transition: opacity .15s; }
    .vega-fin-grafico-eixo {
        display: flex; justify-content: space-between; margin-top: 8px;
        font-size: 11px; color: var(--vega-ink-3); font-variant-numeric: tabular-nums;
    }

    /* ---- Quebra por forma de pagamento ----

       Cada forma com seu peso, como o "Mutual Funds 27%" da referencia. */
    .vega-fin-metodo { padding: 11px 0; border-top: 1px solid var(--vega-line); }
    .vega-fin-metodo:first-of-type { border-top: 0; padding-top: 4px; }
    .vega-fin-metodo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .vega-fin-metodo-nome { font-size: 14px; font-weight: 600; color: var(--vega-ink); }
    .vega-fin-metodo-pct {
        font-size: 14px; font-weight: 700; color: var(--vega-blue-texto);
        font-variant-numeric: tabular-nums;
    }
    .vega-fin-metodo-barra {
        height: 6px; border-radius: 999px; overflow: hidden; margin: 7px 0 5px;
        background: var(--vega-blue-soft);
    }
    .vega-fin-metodo-cheia { height: 100%; border-radius: 999px; background: var(--vega-blue); }
    .vega-fin-metodo-val {
        font-size: 11.5px; color: var(--vega-ink-3);
        font-variant-numeric: tabular-nums; margin: 0;
    }

    /* ---- Barra lateral ----

       Nove itens numa lista corrida, com metade da barra vazia embaixo, nao
       dizem nada sobre o que e o que. Agrupados por secao, a pessoa acha pelo
       contexto ("preciso ver dinheiro") em vez de varrer a lista toda vez. */
    .vega-side-saudacao {
        padding: 2px 24px 16px; margin-bottom: 10px;
        border-bottom: 1px solid var(--vega-line);
    }
    .vega-side-ola { font-size: 12px; color: var(--vega-ink-3); margin: 0; line-height: 1.3; }
    .vega-side-nome {
        font-size: 15px; font-weight: 700; color: var(--vega-ink);
        margin: 0; line-height: 1.3;
    }

    /* Mais ar ACIMA do titulo do que abaixo: e o que agrupa. Colado por igual
       dos dois lados, o titulo parecia pertencer tanto ao grupo de cima quanto
       ao de baixo. */
    .vega-side-secao {
        font-size: 10px; font-weight: 700; letter-spacing: .1em;
        text-transform: uppercase; color: var(--vega-ink-3);
        padding: 0 24px; margin: 20px 0 6px;
    }
    /* O primeiro titulo nasce colado no topo: a divisoria da saudacao ja
       separa. */
    .vega-side-secao:first-of-type { margin-top: 2px; }

    /* Os cartoes esticam ate o fim da linha.

       O grid ja deixava as COLUNAS da mesma altura; o que nao esticava era o
       cartao dentro de cada uma. Dai o buraco branco embaixo do card de
       receita: a coluna ia ate o fim da linha e o cartao parava na metade. */
    .vega-grade > div { display: flex; flex-direction: column; }
    .vega-grade > div > .vega-card,
    .vega-grade > div > .vega-kpi-destaque { flex: 1 1 auto; }
    /* Linha solta: agenda, primeira resposta e meta ficam do tamanho do que
       tem, sem esticar ate o vizinho mais alto (pedido do Daniel). */
    .vega-grade > .vega-col-solta { align-self: start; }
    .vega-grade > .vega-col-solta > .vega-card { flex: 0 0 auto; }

    /* ---- Painel: hierarquia em vez de grade uniforme ----

       Cinco cards do mesmo tamanho lado a lado dizem que as cinco coisas
       importam igual. Nao importam: a dona abre o painel para ver receita, e
       leads e conversas sao contexto para esse numero. */
    /* O cartao da receita ocupa a altura toda da linha e distribui o
       conteudo: rotulo em cima, numero no meio, comparacao no rodape. Antes
       ele parava logo abaixo do numero e sobrava branco. */
    .vega-heroi {
        padding: 28px 30px; display: flex; flex-direction: column;
        justify-content: space-between; position: relative; overflow: hidden;
    }
    .vega-heroi > * { position: relative; z-index: 1; }

    /* Fundo em movimento lento.

       Dois brilhos que passeiam, nao um gradiente piscando: o cartao fica
       aberto o dia inteiro na recepcao, e qualquer coisa rapida vira
       distracao. 18 e 24 segundos por volta, e tempos diferentes para o
       desenho nao se repetir. */
    .vega-heroi::before,
    .vega-heroi::after {
        content: ''; position: absolute; border-radius: 50%;
        pointer-events: none; z-index: 0;
    }
    .vega-heroi::before {
        width: 58%; aspect-ratio: 1; top: -28%; right: -12%;
        background: radial-gradient(circle, rgba(255,255,255,.20), transparent 68%);
        animation: vega-brilho-a 18s ease-in-out infinite;
    }
    .vega-heroi::after {
        width: 46%; aspect-ratio: 1; bottom: -30%; left: -8%;
        background: radial-gradient(circle, rgba(255,255,255,.13), transparent 66%);
        animation: vega-brilho-b 24s ease-in-out infinite;
    }
    @keyframes vega-brilho-a {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(-14%, 16%) scale(1.18); }
    }
    @keyframes vega-brilho-b {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(18%, -14%) scale(1.12); }
    }
    /* Quem pediu menos movimento no sistema fica com o cartao parado. */
    @media (prefers-reduced-motion: reduce) {
        .vega-heroi::before, .vega-heroi::after { animation: none; }
    }
    .vega-heroi-num {
        font-size: clamp(38px, 5.2vw, 56px); font-weight: 800; line-height: 1.02;
        letter-spacing: -.03em; color: #fff; margin: 6px 0 0;
        font-variant-numeric: tabular-nums;
    }

    /* As quatro do funil do dia, pequenas e agrupadas. */
    .vega-secundarias {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px;
    }
    @media (min-width: 640px) { .vega-secundarias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    /* Quando ha grafico acima, elas viram rodape do mesmo cartao. */
    .vega-secundarias-rodape {
        margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vega-line);
    }

    /* O cartao estica junto com a coluna vizinha, e o conteudo acabava antes:
       sobravam uns 40px de vao morto embaixo da faixa. Empurrada para o fim, a
       faixa ocupa essa sobra em vez de deixar buraco, e a borda de cima dela
       vira a divisao natural entre o grafico e o funil do dia.
    
       `:has()` para nao mexer nos outros `.vega-card`, que nao tem rodape. */
    .vega-card:has(> .vega-secundarias-rodape) {
        display: flex; flex-direction: column;
    }
    .vega-card:has(> .vega-secundarias-rodape) > .vega-secundarias-rodape {
        margin-top: auto;
    }
    /* Maior que o `text-xl` da marcacao (20px).
    
       Elas sao o funil do dia e ficavam do tamanho de legenda, perdendo para o
       proprio rotulo em peso visual. A regra ganha do utilitario por
       especificidade, entao a classe na marcacao pode continuar la. */
    .vega-secundarias .vega-stat {
        margin-top: 2px; line-height: 1.1; font-size: 28px;
    }
    @media (min-width: 640px) { .vega-secundarias .vega-stat { font-size: 30px; } }

    /* O mini grafico gruda no numero DELE.
    
       `.vega-kpi-linha` usa `space-between`, que esta certo no card grande (um
       card, numero de um lado e grafico do outro). Aqui sao quatro celulas
       largas lado a lado: o `space-between` jogava cada grafico na borda
       direita da celula, colado no rotulo do vizinho. Lendo a linha, "LEADS"
       aparecia sem grafico e sobrava um grafico sem titulo na ponta. */
    .vega-secundarias .vega-kpi-linha {
        justify-content: center;
        gap: 10px;
    }

    /* Centralizado dentro da propria celula.
    
       Encostado a esquerda, as quatro ficavam empurradas para um canto com um
       vao grande sobrando na direita da faixa: parecia desalinhamento, e nao
       escolha. Centrado, cada par ocupa o meio da coluna dele e os quatro se
       distribuem por igual. */
    .vega-secundarias > div, .vega-secundarias > .vega-kpi-link { text-align: center; }

    /* ---- Card de indicador ----

       Numero e grafico na MESMA linha, alinhados pela base. Empilhados, o
       sparkline empurrava o card para baixo e sobrava faixa vazia dos lados do
       numero; lado a lado o card encolhe e os cinco ficam da mesma altura. */
    .vega-kpi { padding: 18px 20px 16px; }
    .vega-kpi-linha {
        display: flex; align-items: flex-end; justify-content: space-between;
        gap: 12px; margin-top: 6px;
    }
    .vega-kpi-linha .vega-stat { margin: 0; line-height: 1.1; }

    .vega-kpi-nota {
        margin-top: 10px; font-size: 11.5px; font-weight: 500;
        color: var(--vega-ink-3); display: flex; align-items: center; gap: 4px;
    }
    .vega-kpi-destaque .vega-kpi-nota { color: rgba(255, 255, 255, .72); }
    /* A seta so diz a direcao. Verde e vermelho seriam errados: este mesmo
       componente serve metricas onde subir nao e bom. */
    .vega-kpi-seta { font-size: 13px; line-height: 1; opacity: .8; }

    /* O grafico ocupa o canto inferior direito do card grande, encostado nas
       duas bordas, e sobe da esquerda para a direita.

       Sai do `padding` do card de proposito: dentro do fluxo do texto ele
       ficava com faixa vazia dos dois lados.

       Os dois limites existem para nao passar por cima do texto, e cada um
       resolve um lado:

       `left` tira o desenho da coluna de texto — a nota do rodape termina perto
       de 36% da largura, entao 42% deixa folga em vez de encostar.

       `top` o mantem abaixo da linha do numero grande. E `top`, e nao altura
       fixa, porque o numero CRESCE com o valor: "R$ 0,00" e curto, mas
       "R$ 128.450,00" chega a 91% da largura do cartao. Medido na tela: as
       letras do numero terminam em 153px de 244, e 66% deixa 8px de folga. */
    .vega-heroi-grafico {
        position: absolute; left: 42%; right: 0; top: 66%; bottom: 0;
        z-index: 0; pointer-events: none;
    }
    .vega-heroi-grafico .vega-spark { width: 100%; height: 100%; }

    /* No celular o cartao encolhe para 343x145 e o texto ocupa proporcao maior
       dele: numero e nota terminam em 49% da largura, e o numero desce ate 64%
       da altura. Os 42%/66% do desktop cairiam em cima dos dois. */
    @media (max-width: 640px) {
        .vega-heroi-grafico { left: 56%; top: 70%; }
    }

    .vega-spark {
        /* Largura vem do proprio SVG (o partial recebe `largura`/`altura`), e
           nao de um valor fixo aqui: o card grande usa 150x52 e as metricas
           pequenas 56x22. Fixar no CSS obrigaria os dois a serem iguais. */
        display: block; flex: 0 0 auto;
        width: auto; height: auto;
        overflow: visible;   /* o ponto do fim encosta na borda direita */
    }
    .vega-spark { color: var(--vega-blue); }   /* o degradê da área lê daqui */
    .vega-spark-line {
        fill: none; stroke: var(--vega-blue); stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round;
        opacity: .9;
        vector-effect: non-scaling-stroke;  /* preserveAspectRatio=none esticaria a linha */
        /* A linha se desenha da esquerda para a direita ao entrar
           (pathLength=1 no SVG faz o traço inteiro valer 1). */
        stroke-dasharray: 1; stroke-dashoffset: 1;
        animation: vega-spark-desenha .9s cubic-bezier(.22, .61, .36, 1) .1s forwards;
    }
    .vega-spark-area { stroke: none; opacity: 0; animation: vega-spark-surge .7s ease-out .45s forwards; }
    .vega-spark-hoje { fill: var(--vega-blue); opacity: 0; animation: vega-spark-surge .3s ease-out .85s forwards; }
    @keyframes vega-spark-desenha { to { stroke-dashoffset: 0; } }
    @keyframes vega-spark-surge { to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
        .vega-spark-line { stroke-dashoffset: 0; animation: none; }
        .vega-spark-area, .vega-spark-hoje { opacity: 1; animation: none; }
    }

    /* Dentro do card azul tudo vira branco: o azul sobre azul sumiria. */
    .vega-kpi-destaque .vega-spark { color: #fff; }
    .vega-kpi-destaque .vega-spark-hoje { fill: #fff; }

    /* Escuro NAO e o claro invertido: o azul da marca a 45% sobre o card escuro
       cai para 1.6:1 de contraste e some. Aqui a linha ganha um passo mais claro
       do mesmo azul e mais opacidade, escolhidos contra ESTE fundo. */
    .dark .vega-spark-line { stroke: #7DA2FF; opacity: .85; }
    .dark .vega-spark { color: #7DA2FF; }
    .dark .vega-spark-hoje { fill: #9DB9FF; }

    /* O card azul e o mesmo nos dois temas, entao so ganha mais presenca. */
    .vega-kpi-destaque .vega-spark-line,
    .dark .vega-kpi-destaque .vega-spark-line { stroke: #fff; opacity: .75; }
    .dark .vega-kpi-destaque .vega-spark-area { fill: #fff; opacity: .16; }
    .dark .vega-kpi-destaque .vega-spark-hoje { fill: #fff; }

    .vega-spark-nota {
        font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
        text-transform: uppercase; color: var(--vega-ink-3); margin-top: 6px;
    }
    .vega-kpi-destaque .vega-spark-nota { color: rgba(255, 255, 255, .6); }

    /* Numero grande: a MESMA familia do texto (Satoshi, com Manrope de
       reserva), como o herói de receita do painel. Antes vinha em Manrope
       fixo e o painel mostrava duas fontes de numero lado a lado. */
    .vega-stat {
        font-family: inherit; font-weight: 800; letter-spacing: -0.02em;
        color: var(--vega-ink); font-variant-numeric: tabular-nums;
    }
    .vega-title { font-weight: 700; letter-spacing: -0.02em; color: var(--vega-ink); }
    /* Contador de pendencia no menu. Numero e nao bolinha: "3 comprovantes" e
       uma decisao diferente de "1", e a pessoa merece saber antes de clicar. */
    .vega-badge {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 999px; background: var(--vega-blue); color: #fff;
        font-size: 10.5px; font-weight: 700; line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    /* `.vega-mono` e o numero de tabela, valor, hora, data: fica na fonte do
       texto, com algarismos tabulares para alinhar. O nome ficou pelo
       historico (sao 160 usos). Monoespacada de verdade so em `.vega-codigo`:
       token, dominio, IP, hash, codigo de MFA, JSON. */
    .vega-mono { font-family: inherit; font-variant-numeric: tabular-nums; }
    .vega-codigo { font-family: var(--vega-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
    /* Bloco com URL e token (Configurações → Avançado): sem ponto de quebra,
       a linha empurrava a página 15px para o lado no celular. */
    div.vega-codigo, p.vega-codigo, pre.vega-codigo { overflow-wrap: anywhere; }

    .vega-chip {
        display: inline-flex; align-items: center; gap: 4px;
        border-radius: 999px; padding: 2px 10px;
        font-size: 11px; font-weight: 600; line-height: 1.6;
    }
    .vega-chip-blue  { background: var(--vega-chip-blue-bg);  color: var(--vega-chip-blue-fg); }
    .vega-chip-green { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .vega-chip-done  { background: var(--vega-chip-done-bg);  color: var(--vega-chip-done-fg); }
    .vega-chip-amber { background: var(--vega-chip-amber-bg); color: var(--vega-chip-amber-fg); }
    .vega-chip-red   { background: var(--vega-chip-red-bg);   color: var(--vega-chip-red-fg); }
    .vega-chip-gray  { background: var(--vega-chip-gray-bg);  color: var(--vega-chip-gray-fg); }

    .vega-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        border-radius: 10px; padding: 8px 16px; font-weight: 600; font-size: 14px;
        background: var(--vega-blue); color: #fff; transition: filter .15s, transform .05s;
    }
    .vega-btn:hover { filter: brightness(1.06); }
    .vega-btn:active { transform: translateY(1px); }
    .vega-btn-ghost {
        background: transparent; color: var(--vega-ink-2);
        border: 1px solid var(--vega-line);
    }

    .vega-funnel-bar {
        height: 12px; border-radius: 999px;
        background: linear-gradient(90deg, var(--vega-blue), #6f9bff);
    }

    /* Formulários */
    .vega-label { display: block; font-size: 13px; font-weight: 600; color: var(--vega-ink-2); margin-bottom: 6px; }
    /* ------------------------------------------------------------------
       Controles nativos: menu do <select>, calendario do <input type=date>,
       barras de rolagem.

       Nada disso e desenhado pela pagina; quem desenha e o sistema. Sem
       `color-scheme` ele assume claro sempre, e no tema escuro o menu do
       select abria branco com texto preto, destoando de tudo em volta. Nao era
       falta de estilo: era o navegador sem saber em que tema estava.
       ------------------------------------------------------------------ */
    :root { color-scheme: light; }
    .dark { color-scheme: dark; }

    /* A cor de destaque do item selecionado no menu e do dia escolhido no
       calendario. Sem isto vem o azul do sistema, que nao e o nosso. */
    :root, .dark { accent-color: var(--vega-blue); }

    /* ------------------------------------------------------------------
       Menu do <select>, desenhado por nos.

       O nativo aceita tema e cor de destaque e para por ai: canto arredondado,
       sombra e respiro entre os itens ele nao aceita. Ao lado dos modais e
       cards do CRM ele parecia de outro programa.

       O `<select>` continua sendo a fonte da verdade (ver `partials/select`);
       isto aqui e so a casca. As regras de <option> logo abaixo ficam porque
       o menu nativo ainda aparece em lista multipla e quando o script falha.
       ------------------------------------------------------------------ */
    #vega-select-menu {
        position: fixed; z-index: 1200;
        max-height: 280px; overflow-y: auto;
        padding: 6px; border-radius: 12px;
        background: var(--vega-card); border: 1px solid var(--vega-line);
        box-shadow: 0 12px 32px rgba(11, 18, 32, .16), 0 2px 6px rgba(11, 18, 32, .08);
        display: flex; flex-direction: column; gap: 2px;
    }
    .dark #vega-select-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
    #vega-select-menu[hidden] { display: none; }

    .vega-select-item {
        display: block; width: 100%; text-align: left;
        padding: 8px 12px; border: 0; border-radius: 8px;
        background: transparent; color: var(--vega-ink);
        font-size: 14px; font-family: inherit; line-height: 1.35;
        cursor: pointer; white-space: nowrap;
    }
    .vega-select-item:hover:not(:disabled) { background: var(--vega-blue-soft); }
    .vega-select-item:disabled { opacity: .45; cursor: default; }

    /* O escolhido: fundo suave e o azul da marca, em vez do azul cheio do
       sistema, que gritava mais que o resto da tela. */
    .vega-select-item[data-escolhido] {
        background: var(--vega-blue-soft); color: var(--vega-blue-texto); font-weight: 600;
    }

    /* Chrome e Firefox no Windows respeitam cor no <option>; o Safari ignora e
       usa o desenho do sistema, que ja fica certo pelo color-scheme acima. */
    .vega-input option,
    select option {
        background: var(--vega-card);
        color: var(--vega-ink);
    }

    /* Seta propria no select. A nativa muda de desenho a cada navegador e
       encostava na borda; esta e a mesma em todos, e deixa espaco para ela. */
    select.vega-input {
        appearance: none; -webkit-appearance: none; -moz-appearance: none;
        padding-right: 34px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7689' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 16px 16px;
    }
    /* Multiplo e com tamanho nao tem seta: sao listas, nao menus. */
    select.vega-input[multiple], select.vega-input[size] {
        appearance: auto; -webkit-appearance: auto;
        background-image: none; padding-right: 12px;
    }

    /* O indicador nativo sai de cena por completo.

       Antes eu o deixei invisivel mas clicavel, para quem preferisse o
       calendario do navegador. Resultado: o clique abria OS DOIS, o nativo por
       cima do nosso. Ele responde ao proprio clique, e nenhum `preventDefault`
       nosso alcanca isso. Ou e um, ou e o outro. */
    input[type="date"].vega-input::-webkit-calendar-picker-indicator {
        display: none;
    }
    input[type="date"].vega-input {
        position: relative;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7689' stroke-width='1.5' stroke-linecap='round'><rect x='3' y='4.5' width='14' height='13' rx='2.5'/><path d='M3 8.5h14M7 2.5v4M13 2.5v4'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 17px 17px;
        padding-right: 36px;
    }

    /* ------------------------------------------------------------------
       Calendario do campo de data, desenhado por nos.

       Cada navegador desenha o dele, nenhum se parece com o CRM, e o do Chrome
       ainda traz "Limpar" e "Hoje" com o layout dele em cima do nosso.
       ------------------------------------------------------------------ */
    #vega-calendario {
        position: fixed; z-index: 1200;
        padding: 12px; border-radius: 14px; width: 268px;
        background: var(--vega-card); border: 1px solid var(--vega-line);
        box-shadow: 0 12px 32px rgba(11, 18, 32, .16), 0 2px 6px rgba(11, 18, 32, .08);
    }
    .dark #vega-calendario { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
    #vega-calendario[hidden] { display: none; }

    .vega-cal-topo {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 8px;
    }
    .vega-cal-mes {
        font-size: 13px; font-weight: 600; color: var(--vega-ink);
        /* Sem `capitalize`: capitalizaria o "de" tambem. */
        text-transform: none;
    }
    .vega-cal-mes::first-letter { text-transform: uppercase; }
    .vega-cal-seta {
        width: 26px; height: 26px; border-radius: 7px; border: 0;
        background: transparent; color: var(--vega-ink-2);
        font-size: 17px; line-height: 1; cursor: pointer;
    }
    .vega-cal-seta:hover { background: var(--vega-blue-soft); color: var(--vega-blue-texto); }

    .vega-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .vega-cal-dia-nome {
        text-align: center; font-size: 10px; font-weight: 700;
        color: var(--vega-ink-3); padding-bottom: 4px;
    }
    .vega-cal-dia {
        height: 32px; border: 0; border-radius: 8px; cursor: pointer;
        background: transparent; color: var(--vega-ink);
        font-size: 12.5px; font-family: inherit;
    }
    .vega-cal-dia:hover { background: var(--vega-blue-soft); color: var(--vega-blue-texto); }
    .vega-cal-dia[data-hoje] { font-weight: 700; color: var(--vega-blue-texto); }
    .vega-cal-dia[data-escolhido] {
        background: var(--vega-blue); color: #fff; font-weight: 700;
    }
    .vega-cal-dia[data-escolhido]:hover { background: var(--vega-blue); color: #fff; }

    .vega-cal-hoje {
        width: 100%; margin-top: 8px; padding: 7px; border-radius: 8px;
        border: 1px solid var(--vega-line); background: transparent;
        color: var(--vega-ink-2); font-size: 12px; font-weight: 600;
        font-family: inherit; cursor: pointer;
    }
    .vega-cal-hoje:hover { border-color: var(--vega-blue); color: var(--vega-blue-texto); }

    .vega-input {
        width: 100%; border: 1px solid var(--vega-line); border-radius: 10px;
        padding: 9px 12px; font-size: 14px; background: var(--vega-card); color: var(--vega-ink);
        transition: border-color .15s, box-shadow .15s;
    }
    .vega-input::placeholder { color: var(--vega-ink-3); }
    .vega-input:focus {
        outline: none; border-color: var(--vega-blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 255, .15);
    }

    /* Tabela */
    /* No celular a tabela rola DENTRO do cartao.

       Sem isto ela e mais larga que a tela e empurra a PAGINA de lado: o
       cabecalho, o menu e todo o resto andam junto, e a pessoa perde a
       referencia de onde esta. Medido em 375px: o Financeiro passava 146px e os
       Relatorios 63px.

       So abaixo de 900px, onde o transbordo existe de fato. No desktop a regra
       nem entra, entao nao ha risco de cortar dropdown dentro do cartao. */
    @media (max-width: 900px) {
        .vega-card:has(.vega-table) { overflow-x: auto; }
    }

    .vega-table { width: 100%; border-collapse: collapse; }
    .vega-table thead th {
        font-size: 10.5px; font-weight: 600;
        letter-spacing: .09em; text-transform: uppercase; color: var(--vega-ink-3);
        text-align: left; padding: 0 16px 12px; border-bottom: 1px solid var(--vega-line);
    }
    /* O cabeçalho segue o alinhamento da coluna (`.text-right` perdia para esta regra). */
    .vega-table thead th.text-right { text-align: right; }
    .vega-table thead th.text-center { text-align: center; }
    .vega-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--vega-line); font-size: 14px; color: var(--vega-ink-2); }
    .vega-table tbody tr:last-child td { border-bottom: 0; }
    .vega-table tbody tr:hover { background: var(--vega-hover); }
    /* Entre 901 e 1180px (tablet deitado, notebook pequeno, com a barra
       lateral aberta) a tabela de Pacientes passava ~30px do cartão e cortava
       a coluna de ações. Rolagem ali cortaria o menu "⋮"; menos respiro nas
       células resolve sem esconder coluna. */
    @media (min-width: 901px) and (max-width: 1180px) {
        .vega-table thead th { padding-left: 10px; padding-right: 10px; }
        .vega-table tbody td { padding-left: 10px; padding-right: 10px; }
    }

    /* Modal (dialog nativo) */
    /* `margin: auto` e o que centraliza um <dialog> nativo — o navegador poe
       isso sozinho, mas o reset do Tailwind zera a margem de TUDO e derruba a
       regra. Sem ele, todo modal do CRM abria encostado no canto. */
    .vega-dialog {
        border: 0; border-radius: 18px; padding: 0; margin: auto;
        max-width: 460px; width: 92vw; max-height: 92vh; overflow-y: auto;
        background: var(--vega-card); color: var(--vega-ink);
    }
    .vega-dialog::backdrop { background: rgba(11, 18, 32, .55); backdrop-filter: blur(2px); }
    /* Campos em duas colunas dentro de modal (Telefone | E-mail, Início |
       Fim...) ficavam com ~130px cada em 360px e cortavam o que estava
       escrito. Em tela estreita, um embaixo do outro. */
    @media (max-width: 400px) {
        .vega-dialog .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
    }

    /* Abertura do modal.

       Sem isto o dialog aparecia no mesmo quadro, inteiro e parado, e a tela
       inteira mudava de uma vez: lia como travamento, nao como abertura.

       ARMADILHA: o `transform` fica SO durante a animacao, sem `forwards`.
       Um elemento com transform vira bloco de contencao para os descendentes
       `position: fixed`, e os menus do select e da busca de paciente sao
       movidos para DENTRO do dialog justamente por causa da top layer. Com
       transform permanente aqui, a conta de coordenada de viewport deles
       passaria a errar. Os dois so abrem por clique, com o modal ja parado. */
    .vega-dialog[open] {
        animation: vega-dialog-abre .2s cubic-bezier(.22, .61, .36, 1);
    }
    .vega-dialog[open]::backdrop {
        animation: vega-dialog-fundo .2s ease-out;
    }
    @keyframes vega-dialog-abre {
        from { opacity: 0; transform: translateY(10px) scale(.98); }
        to   { opacity: 1; transform: none; }
    }
    @keyframes vega-dialog-fundo {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vega-dialog[open],
        .vega-dialog[open]::backdrop { animation: none; }
    }

    /* Dropdown de exportar (details nativo, sem JS) */
    /* O modal Exportar: os formatos como cartões pequenos. */
    .vega-exportar { max-width: 520px; }
    .vega-exportar-formatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .vega-exportar-formato { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--vega-line); border-radius: 12px; background: var(--vega-card); color: var(--vega-ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s, color .15s; }
    .vega-exportar-formato:hover { border-color: var(--vega-blue); color: var(--vega-blue-texto); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 18, 32, .08); }
    .vega-exportar-ext { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--vega-blue-soft); color: var(--vega-blue-texto); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    @media (max-width: 640px) { .vega-exportar-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .vega-export { position: relative; }
    .vega-export > summary { list-style: none; cursor: pointer; }
    .vega-export > summary::-webkit-details-marker { display: none; }
    .vega-export-menu {
        position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 190px;
        display: flex; flex-direction: column; gap: 2px; padding: 6px;
        background: var(--vega-card); border: 1px solid var(--vega-line); border-radius: 12px;
        box-shadow: 0 10px 30px rgba(11,18,32,.14);
    }
    .vega-export-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
        font-size: 13px; font-weight: 500; color: var(--vega-ink-2); white-space: nowrap; }
    .vega-export-menu a:hover { background: var(--vega-blue-soft); color: var(--vega-blue-texto); }

    /* Masonry: cards empacotam juntos (sem espaço em branco embaixo dos curtos) */
    /* ===================== Logo Vega =====================
       Altura em CSS próprio: as classes h-8/h-10/h-12 do Tailwind NÃO existem
       no CSS compilado do admin, então a imagem vinha em tamanho natural
       (392px de largura no cabeçalho). Mesmo padrão que já mordeu com
       col-span-12, as alturas do layout e o avatar do WhatsApp. */
    .vega-logo        { height: 34px; width: auto; display: block; }
    .vega-logo-sm     { height: 28px; width: auto; display: none; }
    .vega-logo-login  { height: 54px; width: auto; display: block; margin: 0 auto 4px; }

    /* A troca lockup ↔ símbolo precisa vir daqui: as classes responsivas do
       Tailwind (sm:hidden, max-sm:hidden) NÃO existem no CSS compilado do
       admin, então nenhuma das duas logos era escondida e as DUAS apareciam. */
    @media (max-width: 640px) {
        .vega-logo    { display: none; }
        .vega-logo-sm { display: block; }
    }

    /* ===================== WhatsApp ===================== */

    /* O rodape "Powered By" do Krayin e position: fixed, e a compensacao dele
       no layout e a classe `pb-[72px]` — que NAO existe no CSS compilado
       (conferido nos dois app-*.css). Resultado: nenhuma pagina tinha margem
       inferior e a ultima coisa da tela ficava debaixo do rodape.
       Aqui e <style> inline, entao vale. */
    #app .vega-content-pad { padding-bottom: 84px; }
    /* O rodapé fixo tinha z-index 1: as consultas da agenda (2), o bloco em
       foco (30) e a linha de "agora" passavam por cima dele ao rolar. 35 fica
       acima do conteúdo e abaixo dos menus (40) e das gavetas. */
    .vega-rodape-fixo { z-index: 35; }

    /* Tres pontinhos do "digitando", como no WhatsApp. */
    .wa-dots { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
    /* Sem isto o `hidden` nao esconde: uma regra de classe com `display` vence
       a regra do atributo que o navegador aplica sozinho. Os pontinhos ficavam
       na tela junto do microfone quando a pessoa estava gravando. */
    .wa-dots[hidden] { display: none; }
    .wa-dots i {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--wa-text-2); opacity: .45;
        animation: wa-dot 1.2s infinite ease-in-out;
    }
    .wa-dots i:nth-child(2) { animation-delay: .18s; }
    .wa-dots i:nth-child(3) { animation-delay: .36s; }
    @keyframes wa-dot {
        0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
        30%           { transform: translateY(-4px); opacity: .9; }
    }
    @media (prefers-reduced-motion: reduce) {
        .wa-dots i { animation: none; }
    }

    .wa-shell     { background: var(--wa-panel); border: 1px solid var(--wa-line); border-radius: 14px; overflow: hidden; }
    .wa-header    { background: var(--wa-header); border-bottom: 1px solid var(--wa-line); }
    .wa-sidebar   {
        background: var(--wa-panel); border-right: 1px solid var(--wa-line);
        width: 340px; min-width: 340px; flex: 0 0 340px;
    }

    /* Largura da coluna de contexto: no tema, para o celular poder derrubar. */
    .wa-coluna-contexto { width: 280px; min-width: 280px; flex: 0 0 280px; }

    /* Botao de voltar: so no celular, onde a conversa ocupa a tela inteira. */
    .wa-voltar {
        display: none; align-items: center; justify-content: center;
        width: 34px; height: 34px; margin-right: 2px; flex-shrink: 0;
        border-radius: 50%; color: var(--wa-text-2); text-decoration: none;
    }
    .wa-voltar:hover { background: rgba(128,128,128,.14); color: var(--wa-text); }

    /* ---- WhatsApp no celular ----

       O aplicativo de verdade mostra UMA coisa por vez: a lista, e a conversa
       so depois do toque. Aqui a lista era fixa em 340px e o chat ficava com o
       que sobrasse: numa tela de 375px sobravam 35px, e a conversa aparecia
       cortada ao lado da lista. Nao era falta de estilo, era o desenho de duas
       colunas aplicado onde nao cabem duas colunas.

       Sem conversa aberta, a lista ocupa a tela. Com conversa, a lista sai e a
       conversa entra inteira, com o botao de voltar no cabecalho. O estado vem
       da URL (`?conversation=`), entao voltar e avancar do navegador funcionam
       sozinhos. */
    /* Tres colunas somam 340 + 280 de casca, entao abaixo de 1100 o contexto sai
       e ficam a lista e a conversa, que e o essencial. */
    @media (max-width: 1100px) {
        .wa-coluna-contexto { display: none; }
    }

    /* Abaixo de 720 nao cabem duas: uma de cada vez, como no aplicativo. */
    @media (max-width: 720px) {
        .wa-sidebar {
            width: 100%; min-width: 0; flex: 1 1 auto;
            border-right: 0;
        }

        /* Uma coluna por vez. Sem isto as duas dividem a largura e a lista
           colapsa para zero, porque o controller ja deixa uma conversa
           selecionada mesmo quando a URL nao pediu. */
        .wa-shell:not([data-conversa]) .wa-coluna-chat { display: none; }
        .wa-shell[data-conversa] .wa-sidebar { display: none; }

        .wa-voltar { display: inline-flex; }

        /* A altura vem do `ajustarAlturaInbox()` da tela, que mede o espaço
           que sobra de verdade. Um `calc(100vh - 150px) !important` aqui
           passava por cima da medida e, com o cabeçalho em duas linhas,
           empurrava a caixa de digitar para fora da tela. */

        /* O respiro lateral das mensagens era de tela grande. */
        #mensagens { padding-left: 12px; padding-right: 12px; }
    }

    /* Fundo do chat: o padrão de rabiscos do WhatsApp, em SVG inline para não
       depender de imagem externa. */
    .wa-chat {
        background-color: var(--wa-chat-bg);
        background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.04' stroke-width='1.4'%3E%3Cpath d='M14 22c4-6 10-6 14 0M92 16c3 5 8 6 12 2M28 74c5-4 11-2 13 3M78 96c4-5 10-5 14 1'/%3E%3Ccircle cx='58' cy='40' r='6'/%3E%3Ccircle cx='102' cy='68' r='4'/%3E%3Ccircle cx='20' cy='104' r='5'/%3E%3Cpath d='M46 88h12M60 14h10M6 54h9'/%3E%3C/g%3E%3C/svg%3E");
    }
    .dark .wa-chat { background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1.4'%3E%3Cpath d='M14 22c4-6 10-6 14 0M92 16c3 5 8 6 12 2M28 74c5-4 11-2 13 3M78 96c4-5 10-5 14 1'/%3E%3Ccircle cx='58' cy='40' r='6'/%3E%3Ccircle cx='102' cy='68' r='4'/%3E%3Ccircle cx='20' cy='104' r='5'/%3E%3Cpath d='M46 88h12M60 14h10M6 54h9'/%3E%3C/g%3E%3C/svg%3E"); }

    /* Balões com a "orelhinha" característica */
    .wa-bubble {
        position: relative; max-width: 65%; padding: 6px 9px 8px;
        border-radius: 8px; font-size: 14.2px; line-height: 19px;
        color: var(--wa-text); box-shadow: 0 1px .5px rgba(11,20,26,.13);
        word-wrap: break-word;
    }
    /* Balao com midia tem largura propria: sem isso ele acompanhava o
       comprimento da legenda e a imagem, com largura fixa, deixava um vazio ao
       lado dela. Agora a imagem preenche e a legenda quebra embaixo. */
    .wa-bubble:has(.wa-midia) { width: 320px; }
    .wa-midia {
        display: block; width: 100%; height: auto;
        border-radius: 8px; margin-bottom: 6px;
    }
    .wa-midia img { display: block; width: 100%; height: auto; border-radius: 8px; }

    /* O que o agente leu na midia: nota de rodape, nao fala da pessoa. */
    .wa-visao {
        margin: 6px 0 0; padding-top: 6px;
        border-top: 1px solid rgba(128,128,128,.22);
        font-size: 12px; line-height: 16px; color: var(--wa-text-2);
    }
    .wa-visao span { font-weight: 600; color: var(--wa-autor); }

    .wa-in  { background: var(--wa-bubble-in);  border-top-left-radius: 0; }
    .wa-out { background: var(--wa-bubble-out); border-top-right-radius: 0; }

    .wa-bubble::before {
        content: ''; position: absolute; top: 0; width: 8px; height: 13px;
    }
    .wa-in::before {
        left: -8px;
        background: var(--wa-bubble-in);
        clip-path: polygon(100% 0, 100% 100%, 0 0);
    }
    .wa-out::before {
        right: -8px;
        background: var(--wa-bubble-out);
        clip-path: polygon(0 0, 0 100%, 100% 0);
    }

    .wa-meta  { float: right; margin: 6px -4px -4px 8px; font-size: 11px; color: var(--wa-text-2); display: flex; align-items: center; gap: 3px; }
    /* Hora na bolha verde enviada, no escuro: #A7B7C1 dava 3,9:1 no verde. */
    .dark .wa-out .wa-meta { color: #CFE0DA; }
    /* Os dois certinhos SOBREPOSTOS, como no aplicativo.

       Eram dois caracteres de check com o espaco natural da fonte entre eles, e
       liam como dois sinais separados. No WhatsApp e um desenho so, com o
       segundo check nascendo no meio do primeiro. */
    /* Cinza por padrao: azul so quando a leitura foi CONFIRMADA. O azul era
       fixo, e afirmava leitura sem nada ter sido verificado. */
    .wa-tick        { color: var(--wa-text-2); display: inline-flex; align-items: center; opacity: .8; }
    .wa-tick-lido   { color: var(--wa-tick); opacity: 1; }
    .wa-tick-falhou { color: var(--wa-alerta); opacity: 1; }
    .wa-tick svg { display: block; }

    /* ---- Anexo: menu do clipe ---- */

    .wa-anexo { position: relative; display: flex; }

    .wa-anexo-menu {
        position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 50;
        min-width: 208px; padding: 8px; border-radius: 12px;
        background: var(--wa-panel); border: 1px solid var(--wa-line);
        box-shadow: 0 12px 32px rgba(11, 20, 26, .28);
        display: flex; flex-direction: column; gap: 2px;
    }
    .wa-anexo-menu[hidden] { display: none; }

    .wa-anexo-menu button {
        display: flex; align-items: center; gap: 14px;
        padding: 10px 12px; border: 0; border-radius: 8px; cursor: pointer;
        background: transparent; color: var(--wa-text);
        font: inherit; font-size: 14px; text-align: left; width: 100%;
    }
    .wa-anexo-menu button:hover { background: var(--wa-hover, rgba(128,128,128,.12)); }
    .wa-anexo-icone { display: flex; flex-shrink: 0; }

    /* ---- Anexo: confirmacao antes de enviar ---- */

    /* A confirmacao cobre a CONVERSA, e nao a tela.

       Com <dialog> e showModal() ela ia para a top layer e escondia a lista de
       conversas e o menu do CRM, como se fosse outra tela. No aplicativo a
       confirmacao acontece dentro da conversa, que e de onde a acao partiu. */
    .wa-coluna-chat { position: relative; }

    .wa-anexo-painel {
        position: absolute; inset: 0; z-index: 30;
        background: var(--wa-chat-bg); color: var(--wa-text);
        display: flex; flex-direction: column; overflow: hidden;

        /* Entra deslizando de baixo. Antes aparecia inteira no mesmo quadro,
           sem nenhum movimento que ligasse o clique ao resultado. */
        opacity: 0; transform: translateY(14px);
        transition: opacity .18s ease-out, transform .22s cubic-bezier(.22,.61,.36,1);
    }
    .wa-anexo-painel.aberto { opacity: 1; transform: none; }
    .wa-anexo-painel[hidden] { display: none; }

    @media (prefers-reduced-motion: reduce) {
        .wa-anexo-painel { transition: none; }
    }

    .wa-anexo-topo {
        display: flex; align-items: center; gap: 14px;
        padding: 12px 16px; background: var(--wa-header);
        border-bottom: 1px solid var(--wa-line); flex-shrink: 0;
    }
    .wa-anexo-x {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
        background: transparent; color: var(--wa-text-2); flex-shrink: 0;
    }
    .wa-anexo-x:hover { background: rgba(128,128,128,.16); color: var(--wa-text); }
    .wa-anexo-nome {
        flex: 1; text-align: center; font-size: 14px; color: var(--wa-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        padding-right: 34px;
    }

    .wa-anexo-previa {
        flex: 1; min-height: 240px; display: flex;
        align-items: center; justify-content: center;
        padding: 28px; overflow: auto;
    }
    .wa-anexo-previa img,
    .wa-anexo-previa video { max-width: 100%; max-height: 52vh; border-radius: 8px; }

    /* Sem previa possivel: o cartao mostra o que da para conferir antes de
       mandar, que e nome, peso e tipo. */
    .wa-anexo-doc {
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        padding: 42px 56px; border-radius: 10px;
        background: var(--wa-panel); color: var(--wa-text-2);
    }
    .wa-anexo-doc-t { margin: 0; font-size: 17px; color: var(--wa-text); }
    .wa-anexo-doc-m { margin: 0; font-size: 13px; color: var(--wa-text-2); }

    .wa-anexo-rodape {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px; background: var(--wa-header);
        border-top: 1px solid var(--wa-line); flex-shrink: 0;
    }
    .wa-anexo-rodape .wa-input { flex: 1; }

    @media (max-width: 720px) {
        .wa-anexo-previa { padding: 16px; }
        .wa-anexo-doc { padding: 32px 28px; }
    }

    /* ---------------- Previa na lista de conversas ----------------

       A linha mostrava o TELEFONE embaixo do nome. O numero ja esta no topo da
       conversa aberta e no perfil, e repetido em toda linha nao ajuda a
       escolher qual conversa abrir, que e a unica decisao que se toma olhando
       esta lista. O aplicativo poe ali a ultima mensagem por isso. */
    .wa-previa {
        display: flex; align-items: center; gap: 4px; min-width: 0;
        margin: 0; font-size: 13px; line-height: 18px; color: var(--wa-text-2);
    }
    .wa-previa-texto {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wa-previa-tick  { display: inline-flex; flex-shrink: 0; color: var(--wa-tick); }
    .wa-previa-icone { display: inline-flex; flex-shrink: 0; }

    /* ---------------- Fita de anexos ----------------

       O que vai junto no envio, embaixo da legenda, com o `+` no fim para
       acrescentar mais sem perder o que ja foi escolhido. */
    .wa-anexo-fita {
        /* Mesma razao do visor: a fita e clicada varias vezes seguidas. */
        -webkit-user-select: none; user-select: none;
        display: flex; align-items: center; justify-content: center; gap: 10px;
        padding: 12px 16px; background: var(--wa-header);
        border-top: 1px solid var(--wa-line); flex-shrink: 0;
        overflow-x: auto;
    }
    .wa-anexo-thumb, .wa-anexo-mais {
        position: relative; flex-shrink: 0;
        width: 52px; height: 52px; padding: 0; cursor: pointer;
        border-radius: 6px; background: var(--wa-panel);
        border: 2px solid transparent; color: var(--wa-text-2);
        display: flex; align-items: center; justify-content: center;
        transition: border-color .12s ease-out;
    }
    .wa-anexo-thumb img {
        width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
    }
    /* O selecionado ganha a borda de destaque: e o que a previa grande esta
       mostrando, e sem isso nao da para saber qual dos tres esta em cima. */
    .wa-anexo-thumb.atual { border-color: var(--wa-accent); }
    .wa-anexo-thumb-x {
        position: absolute; top: -6px; right: -6px;
        width: 18px; height: 18px; border-radius: 50%;
        background: var(--wa-text); color: var(--wa-panel);
        font-size: 13px; line-height: 18px; text-align: center;
    }
    .wa-anexo-mais { border: 1px dashed var(--wa-line); }
    .wa-anexo-mais:hover { color: var(--wa-text); border-color: var(--wa-accent); }

    /* ---------------- Visor de imagem ----------------

       Clicar numa foto abria uma aba do navegador com o arquivo cru: a pessoa
       saia do CRM e voltava no botao de voltar. Aqui a tela inteira e coberta
       de proposito (o aplicativo faz o mesmo), ao contrario da confirmacao de
       anexo, que fica dentro da conversa. */
    .wa-visor {
        width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
        margin: 0; padding: 0; border: 0; background: #0B141A; color: #E9EDEF;
        display: none; flex-direction: column;

        /* Sem selecao no visor.

           Cliques seguidos no mesmo ponto viram duplo e triplo clique, e o
           navegador estende a selecao para o que estiver em volta: apertar a
           lupa tres vezes pintava a foto inteira de azul, como acontece ao
           clicar duas vezes numa frase. Nada aqui e texto para copiar, com uma
           excecao logo abaixo. */
        -webkit-user-select: none; user-select: none;
    }
    /* A legenda E texto que alguem pode querer copiar. */
    .wa-visor-legenda { -webkit-user-select: text; user-select: text; }
    .wa-visor[open] { display: flex; }
    .wa-visor::backdrop { background: rgba(0,0,0,.85); }

    /* `position: relative` + z-index em tudo que NAO e a foto.

       Sem isso a imagem ampliada passava por cima da barra de acoes e da fita:
       `transform: scale` nao mexe no layout, entao ela crescia para fora do
       palco e cobria os botoes. Sem botao alcancavel nao havia como desfazer o
       zoom, e a unica saida era sair da pagina. */
    .wa-visor-topo {
        position: relative; z-index: 2;
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; padding: 10px 16px; flex-shrink: 0;
        background: #111B21; border-bottom: 1px solid #2A3942;
    }
    .wa-visor-autor  { margin: 0; font-size: 14px; font-weight: 600; color: #E9EDEF; }
    .wa-visor-quando { margin: 0; font-size: 12px; color: #A7B7C1; }
    .wa-visor-acoes  { display: flex; align-items: center; gap: 2px; }
    .wa-visor-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border: 0; border-radius: 50%;
        background: transparent; color: #A7B7C1; cursor: pointer;
        text-decoration: none;
    }
    .wa-visor-btn:hover { background: rgba(255,255,255,.1); color: #E9EDEF; }

    .wa-visor-palco {
        position: relative; flex: 1; min-height: 0;
        display: flex; align-items: center; justify-content: center; padding: 20px;
        /* Recorta a foto ampliada dentro do palco. E o que impede o zoom de
           cobrir a tela inteira. */
        overflow: hidden;
    }
    .wa-visor-palco img {
        max-width: 100%; max-height: 100%; object-fit: contain;
        transition: transform .15s ease-out;
        /* Arrastar a foto move o zoom; nao inicia o arrasto de imagem do
           navegador, que largaria o arquivo em cima de outra janela. */
        -webkit-user-drag: none; user-drag: none;
    }
    /* Ampliada, a foto se arrasta: sem isso o zoom mostra so o centro e nao ha
       como chegar na borda da imagem. */
    .wa-visor-palco img.ampliada { cursor: grab; transition: none; }
    .wa-visor-palco img.ampliada:active { cursor: grabbing; }
    .wa-visor-seta {
        position: absolute; z-index: 3; left: 18px; top: 50%; transform: translateY(-50%);
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; border-radius: 50%;
        background: rgba(255,255,255,.12); color: #E9EDEF; cursor: pointer;
    }
    .wa-visor-seta-d { left: auto; right: 18px; }
    .wa-visor-seta:hover { background: rgba(255,255,255,.22); }
    .wa-visor-seta[hidden] { display: none; }

    /* O aviso do copiar/compartilhar. Some sozinho: e confirmacao de uma acao
       que ja aconteceu, e nao algo para a pessoa fechar. */
    .wa-visor-aviso {
        position: absolute; z-index: 4; bottom: 16px; left: 50%; transform: translateX(-50%);
        margin: 0; padding: 8px 14px; border-radius: 18px;
        background: rgba(0,0,0,.75); color: #E9EDEF; font-size: 13px;
    }
    .wa-visor-aviso[hidden] { display: none; }

    .wa-visor-legenda {
        position: relative; z-index: 2;
        margin: 0; padding: 0 20px 14px; text-align: center;
        font-size: 14px; color: #E9EDEF; flex-shrink: 0;
        background: #0B141A;
    }
    .wa-visor-legenda:empty { display: none; }

    .wa-visor-fita {
        position: relative; z-index: 2;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px 16px; flex-shrink: 0; overflow-x: auto;
        background: #111B21; border-top: 1px solid #2A3942;
    }
    .wa-visor-thumb {
        flex-shrink: 0; width: 52px; height: 52px; padding: 0; cursor: pointer;
        border: 2px solid transparent; border-radius: 6px; background: transparent;
        transition: border-color .12s ease-out;
    }
    .wa-visor-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
    .wa-visor-thumb.atual { border-color: var(--wa-accent); }
    /* Uma foto so nao e fita: a faixa embaixo viraria enfeite. */
    .wa-visor-fita:has(.wa-visor-thumb:only-child) { display: none; }

    @media (max-width: 720px) {
        .wa-visor-seta { width: 34px; height: 34px; left: 8px; }
        .wa-visor-seta-d { left: auto; right: 8px; }
        .wa-visor-acoes { gap: 0; }
        .wa-visor-btn { width: 34px; height: 34px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .wa-visor-palco img { transition: none; }
    }

    /* ---------------- Coluna de contexto ----------------

       Aqui ficava o log de `agent_actions`, que repetia "reply / atendimento /
       sent". Isso responde "a IA respondeu?", pergunta que a conversa ao lado
       ja responde. Quem atende precisa saber se a pessoa tem consulta marcada,
       quando veio pela ultima vez e se deve alguma coisa. */
    .wa-ctx-atalhos {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: 4px 12px; margin-top: 8px; font-size: 13px;
    }
    .wa-ctx-chips {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: 6px; margin-top: 12px;
    }
    .wa-ctx {
        padding-top: 14px; border-top: 1px solid var(--wa-line);
        display: flex; flex-direction: column; gap: 2px;
    }
    .wa-ctx-titulo {
        margin: 0 0 4px; font-size: 12px; font-weight: 600;
        text-transform: uppercase; letter-spacing: .04em; color: var(--wa-text-2);
    }
    .wa-ctx-forte { margin: 0; font-size: 14px; font-weight: 600; color: var(--wa-text); }
    .wa-ctx-sub   { margin: 0; font-size: 12.5px; line-height: 17px; color: var(--wa-text-2); }
    .wa-ctx-vazio { margin: 0; font-size: 12.5px; color: var(--wa-text-2); opacity: .75; }
    .wa-ctx-chip {
        display: inline-block; width: fit-content; margin-top: 4px;
        padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
        background: rgba(128,128,128,.16); color: var(--wa-text-2);
    }
    /* --wa-autor, e nao --wa-accent-forte: o verde profundo foi calibrado
       para texto sobre fundo CLARO e mede 2.55 sobre o chip no tema escuro.
       --wa-autor ja existe justamente para texto verde e tem um tom por tema. */
    .wa-ctx-chip-ok     { background: rgba(0,168,132,.16); color: var(--wa-autor); }
    .wa-ctx-chip-alerta { background: rgba(179,38,30,.14); color: var(--wa-alerta); }
    .wa-ctx-acao {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 10px; padding: 3px 0;
    }

    /* ---------------- Tags da conversa ----------------

       O ponto verde marca o que a IA deduziu. Sem ele a recepcao nao sabe se o
       rotulo foi posto por alguem que leu a conversa ou pela maquina, e uma
       deducao errada passa a valer tanto quanto um fato conferido. */
    .wa-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
    .wa-tag {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 8px; border-radius: 999px;
        font-size: 11.5px; line-height: 15px; font-weight: 600;
        background: rgba(128,128,128,.16); color: var(--wa-text-2);
    }
    /* Cor por GRAVIDADE, e nao por quem marcou.

       Cinza uniforme nao ajuda a varrer a coluna: "urgencia" precisa saltar
       antes de "pediu preco". Quem marcou continua no ponto, que e informacao
       de outra natureza e nao pode disputar a mesma pista visual. */
    .wa-tag-ok      { background: rgba(0,168,132,.15);  color: var(--wa-autor); }
    .wa-tag-atencao { background: rgba(245,166,35,.18); color: var(--wa-ambar-texto); }
    .wa-tag-alerta  { background: rgba(179,38,30,.15);  color: var(--wa-alerta); }
    .wa-tag-ponto {
        width: 5px; height: 5px; border-radius: 50%;
        background: currentColor; flex-shrink: 0;
    }
    /* O X aparece no hover: seis tags com seis X viram uma fileira de X. */
    .wa-tag-x { display: inline-flex; opacity: 0; transition: opacity .12s ease-out; }
    .wa-tag:hover .wa-tag-x, .wa-tag:focus-within .wa-tag-x { opacity: 1; }
    .wa-tag-x button {
        border: 0; background: transparent; cursor: pointer; padding: 0;
        color: inherit; font-size: 14px; line-height: 1;
    }
    .wa-tag-nova { margin-top: 8px; }
    .wa-tag-nova .vega-input { width: 100%; font-size: 12.5px; padding: 5px 8px; }

    /* Gravando audio: microfone pulsando, no lugar dos tres pontos. O pulso
       lembra o do aplicativo e diz "esta acontecendo agora" sem texto extra. */
    /* O balao recem-enviado entra deslizando de baixo. Curto de proposito: e
       confirmacao de que saiu, e nao um efeito para admirar. */
    /* Galeria do perfil: grade que rola por dentro. Com o historico inteiro,
       uma tira horizontal viraria rolagem lateral sem fim. */
    .wa-galeria {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
        gap: 6px; margin-top: 12px; max-height: 42vh; overflow-y: auto;
    }
    .wa-galeria > a { display: block; }

    /* A conversa so aparece posicionada. Ver `wa-chat-preparando` no blade. */
    .wa-chat-preparando { opacity: 0; }

    .wa-entrando { animation: wa-entra .22s cubic-bezier(.22,.61,.36,1); }

    @keyframes wa-entra {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }

    .wa-aviso-envio {
        margin: 0 0 8px; padding: 6px 10px; border-radius: 8px;
        font-size: 12.5px; background: rgba(179,38,30,.12); color: var(--wa-alerta);
    }
    .wa-aviso-envio[hidden] { display: none; }

    @media (prefers-reduced-motion: reduce) {
        .wa-entrando { animation: none; }
    }

    .wa-gravando {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 13px; color: var(--wa-text-2);
    }
    .wa-gravando[hidden] { display: none; }
    .wa-gravando svg { color: var(--wa-alerta); animation: wa-pulsa 1.4s ease-in-out infinite; }

    @keyframes wa-pulsa {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: .5; transform: scale(.88); }
    }

    @media (prefers-reduced-motion: reduce) {
        .wa-gravando svg { animation: none; }
    }

    .wa-who   { font-size: 11.5px; font-weight: 600; color: var(--wa-autor); margin-bottom: 1px; }

    /* Divisor de data, como no app */
    .wa-day   { align-self: center; background: var(--wa-header); color: var(--wa-text-2);
                font-size: 12px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }

    .wa-item        { border-bottom: 1px solid var(--wa-line); }
    .wa-item:hover  { background: rgba(0,0,0,.03); }
    .dark .wa-item:hover { background: rgba(255,255,255,.04); }
    .wa-item-active { background: rgba(0,0,0,.06); }
    .dark .wa-item-active { background: rgba(255,255,255,.07); }

    /* Tamanho no CSS próprio: as classes de dimensão do Tailwind (w-11, h-11,
       shrink-0) NÃO existem no CSS compilado do admin — o avatar virava uma
       pílula esticada porque o flex o comprimia sem largura definida. */
    .wa-avatar {
        background: var(--wa-accent-forte); color: #fff;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%; font-weight: 600;
        width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px;
        font-size: 16px; line-height: 1; user-select: none;
    }
    .wa-avatar-lg { width: 80px; height: 80px; min-width: 80px; flex: 0 0 80px; font-size: 30px; }
    .wa-avatar-sm { width: 40px; height: 40px; min-width: 40px; flex: 0 0 40px; font-size: 15px; }
    .wa-input  { background: var(--wa-panel); border: 1px solid var(--wa-line); border-radius: 8px;
                 padding: 9px 12px; font-size: 14px; color: var(--wa-text); width: 100%; outline: none; }
    .wa-input::placeholder { color: var(--wa-text-2); }
    .wa-send   { background: var(--wa-accent-forte); color: #fff; border-radius: 50%; width: 40px; height: 40px;
                 display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; flex-shrink: 0; }
    .wa-send:hover { filter: brightness(.94); }

    .vega-masonry { column-gap: 20px; }
    .vega-masonry > * { break-inside: avoid; margin-bottom: 20px; width: 100%; }
    @media (min-width: 768px) { .vega-masonry { column-count: 2; } }
    @media (min-width: 1280px) { .vega-masonry { column-count: 3; } }

    /* ============================================================
       AGENDA — grade no desenho do calendario do Hub da Aureon.

       Mora AQUI e nao na propria tela por um motivo que ja mordeu antes: o
       `<style>` que fica dentro do `#app` e descartado quando o Vue do Krayin
       monta o template. As classes existem no HTML e simplesmente nao pintam,
       sem erro em lugar nenhum. O tema e renderizado no <head>, fora do #app.
       ============================================================ */

    .ag-topo {
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; flex-wrap: wrap; padding: 4px 0;
    }
    .ag-topo-nav { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .ag-topo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

    .ag-btn-hoje {
        padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
        background: var(--vega-card); border: 1px solid var(--vega-line);
        color: var(--vega-ink); white-space: nowrap;
    }
    .ag-btn-hoje:hover { border-color: var(--vega-blue); color: var(--vega-blue-texto); }

    .ag-setas { display: flex; gap: 2px; }
    .ag-seta {
        width: 32px; height: 32px; border-radius: 8px;
        border: 1px solid var(--vega-line); color: var(--vega-ink-2);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 20px; line-height: 1;
    }
    .ag-seta:hover { border-color: var(--vega-blue); color: var(--vega-blue-texto); }

    /* O periodo e o maior texto da tela: e a pergunta que a recepcao
       faz o tempo todo. */
    .ag-titulo {
        font-size: 20px; font-weight: 600; color: var(--vega-ink); margin: 0;
        letter-spacing: -0.01em;
        /* `overflow: hidden` corta os descendentes quando a linha e apertada:
           o "g" de "Agosto" saia pela metade. E sem `capitalize`, que
           capitalizava cada palavra e escrevia "Agosto De 2026" — o PHP ja
           manda a primeira maiuscula no lugar certo. */
        line-height: 1.4; padding-bottom: 1px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .ag-visoes {
        display: inline-flex; padding: 3px; border-radius: 9px;
        border: 1px solid var(--vega-line); background: var(--vega-blue-soft);
    }
    .ag-visao {
        padding: 5px 14px; font-size: 12px; font-weight: 600; border-radius: 6px;
        /* `--vega-ink-2` e nao `-3`: estes botoes ficam sobre o azul-soft, um
           fundo mais claro que o dos cartoes, onde o cinza de apoio cai para
           4.06. E sao controles, nao texto de apoio. */
        border: 0; background: transparent; color: var(--vega-ink-2);
        cursor: pointer; transition: all .15s;
    }
    .ag-visao:hover { color: var(--vega-ink); }
    .ag-visao-ativa {
        background: var(--vega-blue); color: #fff;
        box-shadow: 0 1px 2px rgba(11,18,32,.18);
    }
    .ag-visao-ativa:hover { color: #fff; }

    /* No escuro o ativo e um DEGRAU DE LUZ, e nao um bloco de cor saturada: e
       o que as referencias fazem num controle segmentado, e o azul cheio
       gritava ao lado das superficies apagadas. Da 1.37 de separacao do trilho
       e 10.8 de contraste no texto.

       Vale para os DOIS controles do mesmo tipo: o de visao da Agenda e o de
       periodo do Painel. Tratar so um deixaria dois controles identicos com
       aparencia diferente. O botao "+" e os pontos de legenda continuam azuis:
       aquilo e acao e indicador, e nao selecao. */
    /* O rotulo nao quebra no meio: no celular "7 dias" virava "7 / dias" e a
       faixa dobrava de altura. Se faltar largura, ela rola de lado — que e o
       que o WhatsApp e o proprio Krayin fazem com faixas de filtro. */
    .vega-periodos { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .vega-periodos::-webkit-scrollbar { height: 0; }
    .vega-periodo { white-space: nowrap; flex: 0 0 auto; }

    .vega-periodo-ativo { background: var(--vega-blue); color: #fff; }

    .dark .ag-visao-ativa,
    .dark .vega-periodo-ativo {
        background: #3A3A3A; color: var(--vega-ink); box-shadow: none;
    }
    .dark .ag-visao-ativa:hover,
    .dark .vega-periodo-ativo:hover { color: var(--vega-ink); }

    .ag-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

    /* ---- Grade de dia e semana ---- */
    .ag-grade {
        display: flex; flex-direction: column;
        border: 1px solid var(--vega-line); border-radius: 12px;
        background: var(--vega-card); overflow: hidden;
        height: 68vh; min-height: 420px;
    }
    .ag-cabecalho {
        display: grid; border-bottom: 1px solid var(--vega-line); flex-shrink: 0;
        /* A barra de rolagem da area de baixo tem largura propria; sem
           este espelho, o cabecalho fica deslocado das colunas. */
        overflow-y: scroll; scrollbar-gutter: stable;
    }
    .ag-dia-cabecalho {
        padding: 10px 0; text-align: center; border-left: 1px solid var(--vega-line);
        display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .ag-dia-nome {
        font-size: 10px; font-weight: 600; text-transform: uppercase;
        letter-spacing: .06em; color: var(--vega-ink-3);
    }
    .ag-dia-num {
        font-size: 22px; font-weight: 500; line-height: 1; color: var(--vega-ink);
        width: 36px; height: 36px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .ag-hoje .ag-dia-nome { color: var(--vega-blue-texto); }
    .ag-hoje .ag-dia-num { background: var(--vega-blue); color: #fff; }

    .ag-rolagem { flex: 1; overflow-y: scroll; overflow-x: hidden; scrollbar-gutter: stable; }
    .ag-colunas { display: grid; position: relative; }

    .ag-regua { position: relative; user-select: none; }
    .ag-regua-hora {
        font-size: 10px; color: var(--vega-ink-3); text-align: right;
        padding-right: 8px; line-height: 14px; box-sizing: border-box;
    }

    .ag-coluna { position: relative; border-left: 1px solid var(--vega-line); }
    .ag-coluna-hoje { background: color-mix(in srgb, var(--vega-blue) 4%, transparent); }
    .ag-linha { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--vega-line); }
    .ag-meia { position: absolute; left: 0; right: 0; border-bottom: 1px dashed var(--vega-line); opacity: .55; }
    /* Fora do expediente: a clinica ve de relance onde da para encaixar. */
    .ag-fora { position: absolute; left: 0; right: 0; background: var(--vega-ink); opacity: .04; pointer-events: none; }

    .ag-agora { position: absolute; left: 0; right: 0; z-index: 32; pointer-events: none; height: 2px; background: #E0574F; }
    .ag-agora::before {
        content: ''; position: absolute; left: -4px; top: -3px;
        width: 8px; height: 8px; border-radius: 50%; background: #E0574F;
    }

    .ag-bloco {
        border-radius: 5px; padding: 4px 7px; font-size: 11px; line-height: 1.3;
        overflow: hidden; box-sizing: border-box; transition: box-shadow .12s;
        display: flex; flex-direction: column; gap: 1px;
        /* Consulta de 30 min dava um bloco de 30px, e o nome saia cortado ao
           meio. O minimo garante a primeira linha inteira; o excedente invade
           o vao seguinte, que na pratica esta vazio (senao haveria consulta
           ali, e ai as duas dividem a coluna). */
        min-height: 34px;
    }
    /* Numero em largura fixa: sem isso as horas nao alinham entre blocos e a
       coluna do dia parece torta. */
    .ag-bloco b { font-variant-numeric: tabular-nums; }
    .ag-bloco:hover { box-shadow: 0 2px 8px rgba(11,18,32,.18); z-index: 30; }
    .ag-bloco-titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* O Vue do Krayin (modo "condense") apaga o espaço entre </b> e <span>
       quando há quebra de linha no Blade: a tela mostrava "08:00Priscila". O
       respiro vem do CSS, não do HTML (auditoria de 30/09/2026). */
    .ag-bloco-titulo > b + .ag-bloco-nome { margin-left: .35em; }
    .ag-bloco-sub { opacity: .75; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ag-bloco-chip { position: relative; }
    .ag-bloco-sm { padding: 1px 4px; font-size: 10px; border-radius: 3px; border-left-width: 2px; }
    .ag-bloco-sm .ag-bloco-sub { display: none; }
    /* Coluna estreita demais para texto: fica a faixa de cor, que ainda diz
       quando e em que status. O nome vem no title e no clique. */
    .ag-bloco-fino { padding: 3px; }
    .ag-bloco-fino .ag-bloco-titulo, .ag-bloco-fino .ag-bloco-sub { display: none; }

    .ag-bloco-acoes { display: flex; gap: 4px; margin-top: auto; padding-top: 3px; }
    .ag-bloco-acao {
        font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px;
        background: rgba(255,255,255,.7); border: 1px solid currentColor; color: inherit;
    }
    .dark .ag-bloco-acao { background: rgba(0,0,0,.25); }

    /* ---- Visao mes ---- */
    .ag-mes {
        border: 1px solid var(--vega-line); border-radius: 12px;
        background: var(--vega-card); overflow: hidden;
    }
    .ag-mes-cabecalho { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--vega-line); }
    .ag-mes-dia-nome {
        padding: 8px 0; text-align: center; font-size: 10px; font-weight: 700;
        letter-spacing: .06em; color: var(--vega-ink-3); text-transform: uppercase;
    }
    .ag-mes-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .ag-mes-celula {
        border-right: 1px solid var(--vega-line); border-bottom: 1px solid var(--vega-line);
        min-height: 96px; padding: 4px; transition: background .1s; min-width: 0;
    }
    .ag-mes-celula:hover { background: var(--vega-blue-soft); }
    .ag-mes-fora { opacity: .45; }
    .ag-mes-num {
        font-size: 12px; width: 26px; height: 26px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--vega-ink); margin-bottom: 4px;
    }
    .ag-mes-num:hover { background: var(--vega-blue-soft); color: var(--vega-blue-texto); }
    .ag-mes-num-hoje { background: var(--vega-blue); color: #fff; font-weight: 700; }
    .ag-mes-num-hoje:hover { background: var(--vega-blue); color: #fff; }
    .ag-mes-itens { display: flex; flex-direction: column; gap: 2px; }
    .ag-mes-mais { font-size: 9px; font-weight: 600; color: var(--vega-ink-3); padding-left: 4px; }
    .ag-mes-mais:hover { color: var(--vega-blue-texto); }

    @media (max-width: 720px) {
        .ag-titulo { font-size: 16px; }
        .ag-grade { height: 60vh; }
    }

    /* Controle segmentado pequeno, para a faixa propria de um grafico
       (hoje / 7d / 30d / 3m / 6m / 1a). Mesmo desenho do filtro do topo,
       menor, para caber no cabecalho do cartao sem competir com o titulo. */
    .vega-periodos-mini { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .vega-periodos-mini::-webkit-scrollbar { height: 0; }
    .vega-periodos-mini .vega-periodo { white-space: nowrap; }

    /* ---------------------------------------------------------------------
       Ficha do paciente: cabecalho, faixa de indicadores e abas.

       Aqui, e nao num <style> na propria view: o Vue do Krayin descarta tags
       de estilo ao montar o #app (ver a nota do topo, logo abaixo).
       --------------------------------------------------------------------- */
    /* Faixa de indicadores: cinco colunas com divisória, e não cinco
       cartões. Em tela estreita vira duas colunas. */
    .ficha-kpis {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 18px 8px;
    }
    .ficha-kpis > div { padding: 0 18px; border-left: 1px solid var(--vega-line); min-width: 0; }
    .ficha-kpis > div:first-child { border-left: 0; }
    @media (max-width: 900px) {
        .ficha-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
        .ficha-kpis > div:nth-child(odd) { border-left: 0; }
    }

    /* As abas moram dentro do cartão: a faixa cola no topo, o painel
       ganha o padding que os cartões antigos tinham. */
    .ficha-abas-card { padding: 0; overflow: hidden; }
    .ficha-abas { padding: 0 12px; }
    .ficha-aba-n {
        font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600;
        padding: 1px 7px; border-radius: 999px;
        background: var(--vega-chip-gray-bg); color: var(--vega-chip-gray-fg);
    }
    .vega-aba-ativa .ficha-aba-n { background: var(--vega-chip-blue-bg); color: var(--vega-chip-blue-fg); }
    .ficha-painel { padding: 24px; animation: vega-aba-troca .2s cubic-bezier(.22, .61, .36, 1); }
    /* O parcial de pacotes já é um cartão: aqui ele perde a borda dupla. */
    .ficha-painel-solto { padding: 0; }
    .ficha-painel-solto > .vega-card { border: 0; box-shadow: none; border-radius: 0; }
    @media (prefers-reduced-motion: reduce) { .ficha-painel { animation: none; } }

    /* ---------------------------------------------------------------------
       Topo: busca global e botao "+".

       Mora aqui, e nao numa tag <style> junto do componente, porque o Vue do
       Krayin descarta tags de estilo ao montar o #app: a classe existe no
       HTML e simplesmente nao pinta, sem erro em lugar nenhum.
       --------------------------------------------------------------------- */

    .vega-busca { position: relative; width: 460px; max-width: 100%; }
    @media (max-width: 1100px) { .vega-busca { width: 320px; } }

    /* O fundo sai do `--vega-card`, nao do `--vega-bg`.
       `--vega-bg` so e redefinido no tema claro (serve ao body); no escuro ele
       segue claro, e o campo ficava com texto claro sobre fundo claro, ilegivel.
       O `color-mix` da o mesmo leve rebaixo em relacao ao topo nos dois temas. */
    .vega-busca-campo {
        width: 100%; padding: 7px 76px 7px 38px; border-radius: 999px;
        border: 1px solid var(--vega-line);
        background: color-mix(in srgb, var(--vega-card) 94%, var(--vega-ink) 6%);
        color: var(--vega-ink); font-size: 14px; line-height: 22px;
        transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .vega-busca-campo::placeholder { color: var(--vega-ink-3); }
    .vega-busca-campo:hover { border-color: var(--vega-ink-3); }
    .vega-busca-campo:focus {
        outline: none; border-color: var(--vega-blue);
        background: var(--vega-card);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--vega-blue) 18%, transparent);
    }

    .vega-busca-lupa {
        position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
        color: var(--vega-ink-3); pointer-events: none; display: flex;
    }

    /* Atalho a direita. Some no foco: ali ele ja cumpriu a funcao de ensinar,
       e competiria com o texto que a pessoa esta digitando. */
    .vega-busca-atalho {
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; gap: 3px; pointer-events: none;
        font-family: var(--vega-mono); font-size: 10px; color: var(--vega-ink-3);
    }
    .vega-busca-atalho kbd {
        border: 1px solid var(--vega-line); border-radius: 5px;
        padding: 1px 5px; background: var(--vega-card); font: inherit;
    }
    .vega-busca-campo:focus ~ .vega-busca-atalho { opacity: 0; }

    .vega-busca-limpar {
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
        background: transparent; color: var(--vega-ink-3);
    }
    .vega-busca-limpar:hover { background: var(--vega-hover); color: var(--vega-ink); }

    .vega-busca-menu {
        position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
        max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
        background: var(--vega-card); border: 1px solid var(--vega-line);
        border-radius: 14px; box-shadow: 0 18px 44px rgba(11, 18, 32, .18);
        padding: 6px;
    }

    .vega-busca-grupo + .vega-busca-grupo { border-top: 1px solid var(--vega-line); margin-top: 6px; padding-top: 6px; }

    .vega-busca-grupo-topo {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 8px; padding: 6px 10px 4px;
    }
    .vega-busca-grupo-nome {
        font-family: var(--vega-mono); font-size: 10px; letter-spacing: .08em;
        text-transform: uppercase; color: var(--vega-ink-3);
    }
    .vega-busca-grupo-todos { font-size: 11px; font-weight: 600; color: var(--vega-blue-texto); }
    .vega-busca-grupo-todos:hover { text-decoration: underline; }

    .vega-busca-item {
        display: flex; align-items: center; gap: 10px; justify-content: space-between;
        padding: 8px 10px; border-radius: 9px; cursor: pointer; text-decoration: none;
    }
    .vega-busca-item:hover { background: var(--vega-hover); }
    /* Realce do teclado. Precisa ser diferente do hover, senao a seta move a
       selecao e nada muda enquanto o mouse esta parado sobre outra linha. */
    .vega-busca-item-ativo { background: var(--vega-blue-soft); }
    .vega-busca-item-ativo .vega-busca-item-titulo { color: var(--vega-blue-texto); }

    .vega-busca-item-texto { min-width: 0; }
    /* `display: block` nos dois: sao <span>, e em linha o nome e o telefone
       saiam grudados ("Maria Silva(11) 98888-0001"). */
    .vega-busca-item-titulo {
        display: block;
        font-size: 13px; font-weight: 600; color: var(--vega-ink);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vega-busca-item-apoio {
        display: block;
        font-size: 11px; color: var(--vega-ink-3);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .vega-busca-vazio, .vega-busca-carregando {
        padding: 22px 12px; text-align: center; font-size: 13px; color: var(--vega-ink-3);
    }
    .vega-busca-vazio strong { color: var(--vega-ink); font-weight: 600; }

    .vega-busca-dica {
        padding: 8px 10px; border-top: 1px solid var(--vega-line); margin-top: 6px;
        display: flex; gap: 12px; flex-wrap: wrap;
        font-family: var(--vega-mono); font-size: 10px; color: var(--vega-ink-3);
    }

    /* Botao "+" ------------------------------------------------------------ */

    .vega-mais {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
        background: var(--vega-blue); color: #fff;
        transition: filter .15s, transform .1s;
    }
    .vega-mais:hover { filter: brightness(1.08); }
    .vega-mais:active { transform: scale(.94); }

    .vega-mais-dialog { max-width: 520px; }

    /* A faixa de abas do "+" usa o componente comum (`.vega-abas`); aqui so o
       respiro lateral, para o traco nao encostar na borda do modal. */
    .vega-mais-abas { padding: 0 10px; }

    /* Corpo com PISO e TETO de altura.

       Cada aba tem um numero diferente de campos (consulta 6, paciente 3,
       espera 5), e o modal pulava de tamanho a cada troca: o botao Salvar
       mudava de lugar debaixo do cursor. Com um piso comum, a moldura fica
       parada e so o conteudo troca. O teto em `vh` existe para o modal nunca
       passar da tela numa janela baixa; a rolagem fica dentro dele. */
    .vega-mais-corpo {
        display: flex; flex-direction: column; gap: 16px;
        padding: 24px;
        /* `height`, e nao `min-height`: com piso so a aba mais baixa subia, e as
           tres continuavam de tamanhos diferentes (658 / 549 / 503 numa janela
           de 900px). Altura fixa deixa a moldura parada, entao o botao Salvar
           nao muda de lugar debaixo do cursor ao trocar de aba.

           O `min()` impede que o valor passe da janela: sem ele, numa tela
           baixa o corpo seria mais alto que o proprio modal. */
        height: min(552px, 62vh);
        overflow-y: auto;
        animation: vega-aba-troca .2s cubic-bezier(.22, .61, .36, 1);
    }
    /* O rodape sai do corpo rolavel: os botoes ficam sempre a vista, e nao
       somem quando a aba mais alta gera rolagem. */
    .vega-mais-rodape {
        display: flex; justify-content: flex-end; gap: 8px;
        padding: 14px 24px; border-top: 1px solid var(--vega-line);
    }

    @keyframes vega-aba-troca {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vega-mais-corpo { animation: none; }
    }

    /* Autocomplete de paciente dentro do "+" */
    .vega-ac { position: relative; }
    .vega-ac-menu {
        position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
        max-height: 220px; overflow-y: auto; padding: 4px;
        background: var(--vega-card); border: 1px solid var(--vega-line);
        border-radius: 10px; box-shadow: 0 12px 28px rgba(11, 18, 32, .16);
    }
    .vega-ac-item { padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--vega-ink); }
    .vega-ac-item:hover, .vega-ac-item-ativo { background: var(--vega-blue-soft); }
    .vega-ac-item span { display: block; font-size: 11px; color: var(--vega-ink-3); }
    .vega-ac-escolhido {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 8px 10px; border-radius: 10px;
        background: var(--vega-blue-soft); color: var(--vega-ink); font-size: 13px;
    }
    .vega-ac-trocar { border: 0; background: transparent; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--vega-blue-texto); }

    .vega-mais-erro {
        padding: 8px 10px; border-radius: 8px; font-size: 12px;
        background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg);
    }

    /* Busca no celular: o campo nao cabe no topo, entao vira lupa que abre um
       dialog. Mesmo componente, mesma consulta — so a moldura muda. */
    .vega-busca-lupa-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 8px; border: 0; cursor: pointer;
        background: transparent; color: var(--vega-ink-2);
    }
    .vega-busca-lupa-btn:hover { background: var(--vega-hover); }

    /* Menu da busca de paciente (partial `paciente-busca`).
       Compartilha o desenho do item com o menu do select, e mora no mesmo
       lugar dele: `position: fixed`, movido para dentro do dialog aberto. */
    #vega-paciente-menu {
        position: fixed; z-index: 1200;
        max-height: 280px; overflow-y: auto;
        padding: 6px; border-radius: 12px;
        background: var(--vega-card); border: 1px solid var(--vega-line);
        box-shadow: 0 12px 32px rgba(11, 18, 32, .16), 0 2px 6px rgba(11, 18, 32, .08);
        display: flex; flex-direction: column; gap: 2px;
    }
    .dark #vega-paciente-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
    #vega-paciente-menu[hidden] { display: none; }

    #vega-paciente-menu .vega-select-item { white-space: normal; }
    .vega-paciente-fone {
        display: block; font-variant-numeric: tabular-nums;
        font-size: 11px; color: var(--vega-ink-3);
    }
    .vega-paciente-vazio {
        padding: 10px 12px; font-size: 13px; color: var(--vega-ink-3);
    }

    .vega-busca-dialog { max-width: 560px; width: 94vw; }
    .vega-busca-dialog .vega-busca { width: 100%; }
    .vega-busca-dialog .vega-busca-menu {
        position: static; max-height: 60vh; box-shadow: none;
        border: 0; border-top: 1px solid var(--vega-line);
        border-radius: 0; margin-top: 6px; padding: 6px 0 0;
    }

    /* A lupa e o X sao ancorados no meio de `.vega-busca`. Com o menu em fluxo
       (`position: static`, acima), esse container passa a ter a altura do campo
       MAIS a da lista, e `top: 50%` jogava os dois icones para o meio dos
       resultados, soltos sobre uma linha qualquer. Aqui a ancora e a altura do
       campo, que e fixa. */
    .vega-busca-dialog .vega-busca-lupa,
    .vega-busca-dialog .vega-busca-limpar { top: 19px; }

    /* ==================================================================== */
    /* TELA DE LOGIN                                                          */
    /*                                                                        */
    /* A tela padrao do Krayin e um cartao solto no meio de uma pagina vazia. */
    /* Aqui ela vira uma divisao: painel azul a esquerda com a marca e o que   */
    /* espera a pessoa la dentro, formulario a direita.                        */
    /*                                                                        */
    /* Tudo em CSS proprio, com prefixo `vega-login-`. Classe utilitaria nova  */
    /* do Tailwind NAO funciona no admin: o CSS ja vem compilado e uma classe  */
    /* que nao estava no build simplesmente nao existe. Ja custou seis         */
    /* rodadas em outras telas.                                                */
    /* ==================================================================== */

    .vega-login {
        display: grid; grid-template-columns: 1.06fr 1fr;
        min-height: 100vh; background: var(--vega-bg);
    }

    /* ---- painel da esquerda ---- */

    .vega-login-painel {
        position: relative; overflow: hidden;
        margin: 14px; border-radius: 26px;
        background: linear-gradient(150deg, #2775FF 0%, #1645B8 62%, #0E36A0 100%);
        color: #fff;
        display: flex; flex-direction: column; justify-content: space-between;
        padding: clamp(26px, 3.4vw, 52px);
    }

    /* A tela do shader cobre o painel inteiro. O degrade CSS acima continua
       valendo como rede: sem WebGL2 o painel segue azul. */
    .vega-login-tela {
        position: absolute; inset: 0; width: 100%; height: 100%;
        display: block; z-index: 0;
    }

    /* VEU.
       O Grainient do Daniel tem branco na paleta (`color1: #ffffff`), e o
       clarao ATRAVESSA o painel: em parte dos quadros ele passa exatamente por
       cima do logotipo e do titulo, que sao brancos, e apaga os dois. Sem isto
       a tela fica legivel em metade do tempo.

       O veu escurece so onde o texto mora — a esquerda e na base — e libera o
       canto superior direito, que e onde o clarao aparece bonito. Assim as
       cores dele continuam as mesmas e a leitura para de depender do quadro.

       Fica DEPOIS do canvas no documento, entao pinta por cima dele; o
       conteudo esta em `z-index: 1` e pinta por cima dos dois. */
    .vega-login-painel::after {
        content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background:
            linear-gradient(to right,
                rgba(8,36,104,.46) 0%, rgba(8,36,104,.22) 46%, rgba(8,36,104,0) 82%),
            linear-gradient(to top,
                rgba(8,36,104,.42) 0%, rgba(8,36,104,0) 50%);
    }
    /* O `:not()` NAO e detalhe. Esta regra existe para por o conteudo acima do
       brilho de canto, e sem a excecao ela forcava `position: relative` no
       canvas do shader: ele deixava de ser absoluto, virava bloco no fluxo e
       esticava o painel de 872 para 1216px, empurrando titulo e cartoes para
       fora da tela. Mesma armadilha do `.heroi > *` no site. */
    .vega-login-painel > *:not(.vega-login-tela) { position: relative; z-index: 1; }

    .vega-login-marca img { height: 62px; width: auto; display: block; }

    .vega-login-pill {
        display: inline-flex; align-items: center; gap: 8px;
        background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
        border-radius: 999px; padding: 7px 15px;
        font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
        margin-bottom: 18px;
    }
    .vega-login-pill i {
        width: 7px; height: 7px; border-radius: 50%; background: #6EF2AC;
        display: block; font-style: normal;
    }

    .vega-login-titulo {
        font-size: clamp(28px, 3vw, 44px); font-weight: 700;
        line-height: 1.08; letter-spacing: -.03em; margin: 0 0 12px;
        color: #fff;
    }
    .vega-login-apoio {
        font-size: 14.5px; line-height: 1.55; margin: 0;
        color: rgba(255,255,255,.84); max-width: 40ch;
    }

    /* Os tres cartoes. SEM numero: a referencia que o Daniel trouxe era um
       cadastro em etapas, e ali o numero significa ordem. Aqui sao tres coisas
       que existem ao mesmo tempo — numerar seria inventar uma sequencia. */
    /* Tres em linha. So funciona porque o painel ocupa metade da tela: quando
       ele encolheu para ~490px, cada cartao virava um quadrado de 128px com a
       descricao quebrando em cinco linhas, e ai a pilha era a saida. Se o
       painel voltar a estreitar, e a primeira coisa a rever. */
    .vega-login-cartoes {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
        margin-top: 30px;
    }
    .vega-login-cartao {
        background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
        border-radius: 16px; padding: 14px;
    }
    .vega-login-cartao:first-child {
        background: #fff; border-color: transparent; color: var(--vega-ink);
    }
    /* Sem fundo atras do icone: a placa quadrada competia com o cartao, que ja
       e uma superficie. Sobra o glifo, que e o que precisava aparecer. */
    /* Sem placa de fundo: ela competia com o cartao, que ja e uma superficie.
       Sobra o glifo, que e o que precisava aparecer. */
    .vega-login-cartao .ic {
        width: auto; height: auto; margin-bottom: 8px;
        display: block; font-size: 17px; line-height: 1;
        background: none; color: #fff;
    }
    .vega-login-cartao:first-child .ic { background: none; color: var(--vega-blue); }
    .vega-login-cartao b { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
    .vega-login-cartao span {
        display: block; font-size: 11.5px; line-height: 1.4; margin-top: 4px;
        color: rgba(255,255,255,.78);
    }
    .vega-login-cartao:first-child span { color: var(--vega-ink-2); }

    /* ---- lado do formulario ---- */

    .vega-login-lado {
        display: flex; align-items: center; justify-content: center;
        padding: 32px clamp(20px, 4vw, 64px);
    }
    /* Mais larga e com mais respiro por dentro. Com o painel de volta a metade
       da tela, sobram 950px do outro lado, e uma caixa estreita ali vira uma
       ilha no meio do branco — foi o que o Daniel viu como desproporcional. */
    .vega-login-caixa { width: 100%; max-width: 568px; }

    .vega-login-caixa h1 {
        font-size: 35px; font-weight: 700; letter-spacing: -.025em;
        margin: 0 0 8px; color: var(--vega-ink);
    }
    .vega-login-caixa .sub {
        font-size: 15px; color: var(--vega-ink-2); margin: 0 0 34px; line-height: 1.5;
    }

    /* O formulario continua sendo o componente do Krayin, com a validacao dele.
       Aqui so o visual muda, por descendente — trocar a marcacao quebraria as
       regras de validacao e as mensagens de erro. */
    .vega-login-caixa .control-group { margin-bottom: 20px; }
    .vega-login-caixa label {
        display: block; font-size: 12.5px; font-weight: 600;
        color: var(--vega-ink-2); margin-bottom: 6px;
    }
    .vega-login-caixa input[type="email"],
    .vega-login-caixa input[type="password"],
    .vega-login-caixa input[type="text"] {
        width: 100% !important; max-width: none !important;
        background: var(--vega-card); border: 1px solid var(--vega-line);
        border-radius: 12px; padding: 14px 16px; font-size: 15px;
        color: var(--vega-ink); transition: border-color .16s, box-shadow .16s;
    }
    .vega-login-caixa input:focus {
        outline: none; border-color: var(--vega-blue);
        box-shadow: 0 0 0 3px rgba(37,99,255,.14);
    }
    .vega-login-senha { position: relative; }
    .vega-login-caixa .vega-login-olho {
        position: absolute; top: 50%; transform: translateY(-50%); right: 12px;
        cursor: pointer; font-size: 19px; line-height: 1; color: var(--vega-ink-3);
    }

    .vega-login-rodape {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-top: 28px;
    }
    .vega-login-esqueci {
        font-size: 13px; font-weight: 600; color: var(--vega-blue-texto);
        text-decoration: none;
    }
    .vega-login-esqueci:hover { text-decoration: underline; }

    .vega-login-entrar {
        display: inline-flex; align-items: center; gap: 9px;
        background: var(--vega-blue); color: #fff; border: 0;
        border-radius: 999px; padding: 13px 26px;
        font-size: 14.5px; font-weight: 700; cursor: pointer;
        /* Sem sombra: o Daniel pediu o botao chapado. O hover fica so no
           deslocamento e num escurecimento leve, senao ele perde o retorno
           de que e clicavel. */
        transition: transform .16s, background-color .16s;
    }
    .vega-login-entrar:hover { transform: translateY(-1px); background: #1E4FD8; }

    .vega-login-selo {
        margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--vega-line);
        font-size: 12px; color: var(--vega-ink-3);
    }

    /* ---- escuro ---- */

    .dark .vega-login { background: #0A0A0A; }
    .dark .vega-login-caixa h1 { color: #F5F5F5; }
    .dark .vega-login-caixa .sub,
    .dark .vega-login-caixa label { color: #A3A3A3; }
    .dark .vega-login-caixa input[type="email"],
    .dark .vega-login-caixa input[type="password"],
    .dark .vega-login-caixa input[type="text"] {
        background: #171717; border-color: #262626; color: #F5F5F5;
    }
    .dark .vega-login-selo { border-top-color: #262626; color: #737373; }

    /* ---- telas estreitas ---- */

    /* Abaixo de 1000 o painel vira uma faixa de topo: em coluna, um painel de
       tela cheia empurraria o formulario para fora da primeira dobra, e quem
       vem para entrar nao quer rolar. */
    @media (max-width: 1000px) {
        .vega-login { grid-template-columns: 1fr; min-height: 0; }
        .vega-login-painel { margin: 12px 12px 0; padding: 24px; border-radius: 20px; }
        .vega-login-cartoes { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
        .vega-login-cartao { display: flex; align-items: center; gap: 12px; padding: 11px 13px; }
        .vega-login-cartao .ic { margin-bottom: 0; flex: none; width: 20px; text-align: center; }
        .vega-login-lado { padding: 26px 20px 40px; }
    }
    @media (max-width: 560px) {
        .vega-login-titulo { font-size: 25px; }
        .vega-login-apoio { font-size: 13.5px; }
        .vega-login-rodape { flex-direction: column-reverse; align-items: stretch; }
        .vega-login-entrar { justify-content: center; }
        .vega-login-esqueci { text-align: center; }
    }

    /* ---- entrar com Google ---- */

    .vega-login-ou {
        display: flex; align-items: center; gap: 14px;
        margin: 26px 0 20px; color: var(--vega-ink-3); font-size: 12.5px;
    }
    /* As duas linhas saem de pseudo-elementos, e nao de dois `<span>` vazios:
       elas sao decoracao e nao deviam existir no documento. */
    .vega-login-ou::before, .vega-login-ou::after {
        content: ''; flex: 1; height: 1px; background: var(--vega-line);
    }

    .vega-login-google {
        display: flex; align-items: center; justify-content: center; gap: 11px;
        width: 100%; padding: 14px 20px;
        background: var(--vega-card); color: var(--vega-ink);
        border: 1px solid var(--vega-line); border-radius: 12px;
        font-size: 14.5px; font-weight: 600; text-decoration: none;
        transition: border-color .16s, box-shadow .16s, transform .16s;
    }
    .vega-login-google:hover {
        border-color: #C9D3E4; transform: translateY(-1px);
        box-shadow: 0 10px 22px -14px rgba(11,18,32,.5);
    }
    .vega-login-google svg { flex: none; }

    .dark .vega-login-ou::before, .dark .vega-login-ou::after { background: #262626; }
    .dark .vega-login-google { background: #171717; border-color: #262626; color: #F5F5F5; }

    /* ---- troca entre "entrar" e "esqueceu a senha" ---- */

    /* As duas vistas moram na mesma pagina e so uma fica visivel. A troca nao
       recarrega nada: o painel azul continua parado e so o formulario muda.

       A animacao e a MESMA da troca de abas do CRM (`vega-aba-troca`), de
       proposito — o sistema ja tem um jeito de dizer "o conteudo aqui trocou",
       e inventar um segundo so para esta tela seria ruido.

       Ela nao precisa ser disparada por JS: quando um elemento sai de
       `display: none` para visivel, as animacoes CSS dele comecam do zero. */
    .vega-login-vista[hidden] { display: none !important; }
    .vega-login-vista {
        animation: vega-aba-troca .22s cubic-bezier(.22,.61,.36,1);
    }

    @media (prefers-reduced-motion: reduce) {
        .vega-login-vista { animation: none; }
    }

    /* ---- Fundo do CRM igual ao dos cards (pedido do Daniel, 18/09/2026) ---- */
    html:not(.dark) .vega-fundo { background: var(--vega-bg); }
    html.dark .vega-fundo { background: var(--vega-card); }

    /* Submenu ativo do sidebar: azul claro, para não competir com o item pai. */
    .vega-sub-ativo { background: var(--vega-chip-blue-bg); color: var(--vega-chip-blue-fg); }
    .vega-sub-ativo:hover { background: var(--vega-chip-blue-bg); }

    /* Ficha do paciente: a onda é decoração atrás; os botões fantasmas eram
       transparentes e a onda aparecia através deles. */
    .vega-pac-cabeca .vega-btn-ghost, .vega-pac-cabeca .vega-pac-mais-acoes > summary { background: var(--vega-card); }

    /* ---- Funil (kanban) com o desenho Vega ---- */
    .vega-kb-toolbar { padding: 10px 12px; align-items: center; }
    .vega-kb-busca .vega-input { height: 40px; padding-left: 40px !important; }
    .vega-kb-busca-icone { top: 50%; transform: translateY(-50%); color: var(--vega-ink-3); pointer-events: none; }
    .vega-kb-filtro { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--vega-chip-blue-bg); color: var(--vega-chip-blue-fg); }
    .vega-kb-filtro > span { background: var(--vega-blue); }
    .vega-kb-visao { color: var(--vega-ink-3); border-radius: 10px; transition: color .12s; }
    .vega-kb-visao.ativa { color: var(--vega-blue-texto); }
    a:hover > .vega-kb-visao { color: var(--vega-ink); }
    .vega-kb { padding-bottom: 6px; }
    .vega-kb-coluna { background: var(--vega-card); border: 1px solid var(--vega-line); border-radius: 14px; }
    .vega-kb-cabeca { padding: 12px 12px 10px; gap: 6px; border-bottom: 1px solid var(--vega-line); }
    .vega-kb-titulo { font-size: 13px; font-weight: 700; color: var(--vega-ink); }
    .vega-kb-n { font-weight: 500; color: var(--vega-ink-3); }
    .vega-kb-mais { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 18px; color: var(--vega-ink-3); cursor: pointer; transition: color .12s; }
    .vega-kb-mais:hover { color: var(--vega-blue-texto); }
    .vega-kb-valor { font-size: 12px; font-weight: 600; color: var(--vega-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .vega-kb-barra { flex: 1; height: 4px; max-width: 150px; border-radius: 999px; overflow: hidden; background: var(--vega-chip-gray-bg, #EEF1F6); }
    .vega-kb-barra-cheia { height: 4px; border-radius: 999px; background: var(--vega-blue); transition: width .4s ease; }
    .vega-kb-lista { padding: 10px; }
    .vega-kb-card { user-select: none; gap: 10px; padding: 12px; border-radius: 12px; background: var(--vega-card); border: 1px solid var(--vega-line); box-shadow: 0 1px 2px rgba(11, 18, 32, .04); transition: border-color .12s, box-shadow .12s, transform .12s; }
    .vega-kb-card:hover { border-color: color-mix(in srgb, var(--vega-blue) 40%, var(--vega-line)); box-shadow: 0 6px 18px -10px rgba(11, 18, 32, .18); }
    .draggable-ghost.vega-kb-card { opacity: .45; border-style: dashed; }
    .vega-kb-nome { font-size: 13px; font-weight: 600; color: var(--vega-ink); line-height: 1.25; }
    .vega-kb-sub { font-size: 11px; color: var(--vega-ink-3); line-height: 1.3; }
    .vega-kb-sub:empty { display: none; }
    .vega-kb-card-titulo { font-size: 12px; color: var(--vega-ink-2); }
    .vega-kb-podre { color: var(--vega-chip-red-fg); }
    .vega-kb-origem svg { width: 13px; height: 13px; flex: none; }
    .vega-kb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--vega-ink-2); background: var(--vega-chip-gray-bg, #EEF1F6); white-space: nowrap; }
    .vega-kb-chip .icon-settings-user { font-size: 13px; }
    .vega-kb-vazio { padding: 28px 12px; text-align: center; gap: 14px; }
    .vega-kb-vazio-icone { color: var(--vega-ink-3); opacity: .7; }
    .vega-kb-vazio-titulo { font-size: 13px; font-weight: 700; color: var(--vega-ink); }
    .vega-kb-vazio-sub { font-size: 12px; color: var(--vega-ink-3); max-width: 200px; }
    .dark .vega-kb-chip, .dark .vega-kb-barra { background: var(--vega-chip-gray-bg, #1F2937); }

    /* ---- Ficha do lead: bordas, raios e a barra de etapas no tom Vega ---- */
    .vega-lead-view .border-gray-300 { border-color: var(--vega-line) !important; }
    .vega-lead-view .vega-lead-lado { border-radius: 16px; overflow: hidden; }
    .vega-lead-view .vega-lead-lado h1 { font-size: 18px; letter-spacing: -0.01em; }
    .vega-lead-view .vega-lead-lado h4 { font-size: 14px; font-weight: 700; color: var(--vega-ink); }
    .vega-lead-view > div:last-child > div.rounded-lg { border-radius: 16px; }
    .vega-lead-view .journal-scroll { border: 1px solid var(--vega-line); border-radius: 12px; background: var(--vega-card); padding: 4px; }
    .vega-lead-view .stage { height: 34px; border-radius: 8px 0 0 8px; }
    .vega-lead-view .stage:first-child { border-radius: 8px 0 0 8px; }
    .vega-lead-view .stage span { font-size: 13px; }
    .vega-lead-view .stage::after { border-color: var(--vega-card); }
    /* --vega-green-texto, e nao --vega-green: o nome da etapa e branco, e sobre
       o #12905A ele dava 4.07 (auditoria de 27/09). No escuro o tom e claro e o
       texto vira escuro (regra .dark abaixo). */
    .vega-lead-view .stage[class*="bg-green-500"] { background: var(--vega-green-texto) !important; }
    .vega-lead-view .stage[class*="bg-green-500"]::after { background: var(--vega-green-texto) !important; }
    .vega-lead-view .stage[class*="bg-red-500"] { background: var(--vega-chip-red-fg) !important; }
    .vega-lead-view .stage[class*="bg-red-500"]::after { background: var(--vega-chip-red-fg) !important; }
    /* Modo escuro: o verde e o vermelho das etapas ficam claros; o texto
       branco por cima some (1,7:1). Texto escuro, como nos chips. */
    .dark .vega-lead-view .stage[class*="bg-green-500"] > span,
    .dark .vega-lead-view .stage[class*="bg-red-500"] > span { color: #0B1220 !important; }
    .vega-lead-view .stage:hover:not([class*="bg-green"]):not([class*="bg-red"]) { background: var(--vega-chip-blue-bg); }
    .vega-lead-view .vega-card { border-radius: 16px; }

    /* ---- Tela de etapa (o clique num card do painel/relatórios) ---- */
    .vega-etapa-busca { padding: 14px 16px; border-bottom: 1px solid var(--vega-line); }
    .vega-etapa-busca .vega-prof-busca { max-width: 420px; }
    .vega-etapa-linha { cursor: pointer; }
    .vega-etapa-linha:hover td { background: color-mix(in srgb, var(--vega-blue) 4%, var(--vega-card)); }
    .vega-etapa-data { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vega-ink-2); white-space: nowrap; }
    .vega-etapa-data svg { color: var(--vega-ink-3); }
    .vega-etapa-valor-rotulo { display: block; font-size: 11px; color: var(--vega-ink-3); }
    .vega-etapa-valor { display: block; font-size: 14px; font-weight: 700; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-etapa-abrir { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; color: var(--vega-ink-3); transition: color .12s, background .12s; }
    .vega-etapa-linha:hover .vega-etapa-abrir { color: var(--vega-blue-texto); }

    /* ---- Orçamento (documento de 18/09/2026) ---- */
    .vega-orc-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
    .vega-orc-remover { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--vega-ink-3); transition: color .12s; }
    .vega-orc-remover:hover { color: var(--vega-chip-red-fg); }
    .vega-btn-perigo { background: var(--vega-chip-red-fg); color: #fff; }
    .vega-btn:disabled { opacity: .55; cursor: not-allowed; }

    /* ---- Financeiro pelas referências (18/09/2026) ---- */
    .vega-azul-link { display: flex; flex-direction: column; text-decoration: none; transition: filter .12s; height: 100%; }
    .vega-azul-link:hover { filter: brightness(1.05); }
    .vega-indicadores-azul .vega-heroi-num { color: #fff; }
    .vega-indicadores-azul .vega-kpi-nota { color: rgba(255, 255, 255, .78); }
    .vega-fin-inad { display: flex; flex-direction: column; justify-content: center; gap: 14px; text-decoration: none; transition: filter .12s; height: 100%; }
    .vega-fin-inad:hover { filter: brightness(1.03); }
    .vega-fin-inad-topo { display: flex; align-items: center; gap: 16px; }
    .vega-fin-inad-icone { flex: none; display: inline-flex; color: var(--vega-chip-red-fg); }
    .vega-fin-aviso { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--vega-chip-blue-bg); color: var(--vega-chip-blue-fg); font-size: 13px; }
    .vega-fin-aviso svg { flex: none; }
    /* Rosca e legenda lado a lado só quando cabem (240px cada); senão a
       legenda desce. Em 1280px, com a barra aberta, o cartão ficava estreito
       e os valores ("R$ 7.000,00") passavam da borda direita. */
    .vega-fin-donut { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; align-items: center; justify-items: center; }
    @media (max-width: 480px) { .vega-fin-donut { grid-template-columns: 1fr; justify-items: center; } }
    .vega-fin-donut-anel { position: relative; width: 150px; height: 150px; }
    .vega-fin-donut-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
    .vega-fin-donut-centro b { font-size: 24px; color: var(--vega-ink); letter-spacing: -.02em; }
    .vega-fin-donut-centro span { font-size: 12px; color: var(--vega-ink-3); margin-top: 2px; }
    .vega-fin-donut-legenda { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 100%; }
    .vega-fin-donut-linha { display: flex; align-items: center; gap: 10px; }
    .vega-fin-donut-linha i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
    .vega-fin-donut-nome { flex: 1; font-size: 14px; font-weight: 600; color: var(--vega-ink); }
    .vega-fin-donut-val { text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
    .vega-fin-donut-val b { font-size: 15px; color: var(--vega-ink); font-variant-numeric: tabular-nums; }
    .vega-fin-donut-val small { font-size: 11px; color: var(--vega-ink-3); }
    .vega-fin-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 12px; text-align: center; }
    .vega-fin-vazio-icone { display: inline-flex; color: var(--vega-ink-3); opacity: .55; margin-bottom: 6px; }
    .vega-fin-periodo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--vega-line); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--vega-ink-2); white-space: nowrap; }
    .vega-fin-periodo svg { color: var(--vega-ink-3); }
    .vega-fin-pilula { display: inline-block; padding: 6px 12px; border-radius: 9px; background: var(--vega-chip-green-bg); color: var(--vega-green-texto, #0E7A4C); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .vega-fin-fat td { vertical-align: middle; }
    /* O nome encolhe com reticências em vez de alargar a tabela. Sem isto a
       célula pedia os 320px do `.vega-prof-pessoa` e, em 1366px, "Alinhador
       invisível (tratamento completo)" empurrava a página 80px de lado
       (auditoria de 30/09/2026). `max-width: 0` com `width: 100%` é o que
       deixa uma célula de tabela automática ceder espaço. */
    .vega-fin-fat td:first-child { width: 100%; max-width: 0; }
    .vega-fin-fat .vega-prof-pessoa { max-width: 100%; }
    .vega-fin-fat td:not(:first-child) { white-space: nowrap; }
    .vega-fin-proj { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--vega-line); border-radius: 14px; }
    .vega-fin-proj-barras { display: flex; align-items: flex-end; gap: 6px; height: 44px; flex: none; }
    .vega-fin-proj-barras i { display: block; width: 8px; border-radius: 4px 4px 2px 2px; }

    /* Subseções do Financeiro (Recebidos, A receber, ...) */
    .vega-fin-sub-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
    .vega-fin-sub-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .vega-fin-sub-busca .vega-prof-busca { width: 240px; max-width: 100%; }
    .vega-fin-sub td { vertical-align: middle; }
    .vega-fin-forma { display: inline-flex; align-items: center; gap: 7px; color: var(--vega-ink-2); white-space: nowrap; }
    .vega-fin-status { display: inline-flex; align-items: center; gap: 5px; }
    .vega-fin-donut-nome { display: inline-flex; align-items: center; gap: 7px; }
    @media (max-width: 640px) { .vega-fin-sub-busca, .vega-fin-sub-busca .vega-prof-busca { width: 100%; } }

    /* Orçamentos em lista ou grade (partial orcamentos-lista) */
    .vega-orcs-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    .vega-orcs-visoes { display: inline-flex; gap: 2px; }
    .vega-orcs-visao { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; color: var(--vega-ink-3); cursor: pointer; transition: color .12s; }
    .vega-orcs-visao:hover { color: var(--vega-ink); }
    .vega-orcs-visao.ativa { color: var(--vega-blue-texto); }
    .vega-orcs-itens { display: flex; flex-direction: column; }
    .vega-orcs-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--vega-line); text-decoration: none; color: inherit; transition: background .12s; min-width: 0; }
    .vega-orcs-item:first-child { border-top: 0; }
    .vega-orcs-item:hover .vega-orcs-nome { color: var(--vega-blue-texto); }
    .vega-orcs-icone { flex: none; display: inline-flex; color: var(--vega-ink-3); }
    .vega-orcs-item.aceito .vega-orcs-icone { color: var(--vega-green); }
    .vega-orcs-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .vega-orcs-nome { font-size: 14px; font-weight: 600; color: var(--vega-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-orcs-sub { font-size: 12px; color: var(--vega-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-orcs-fim { display: flex; align-items: center; gap: 10px; flex: none; }
    .vega-orcs-valor { font-size: 14px; font-weight: 700; color: var(--vega-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .vega-orcs-data { display: none; font-size: 11px; color: var(--vega-ink-3); }
    /* A troca lista/grade e o Ver mais entram suaves: os itens surgem em cascata. */
    @keyframes vega-surgir { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
    /* A resposta do VEGA sendo escrita: os blocos esperam a vez (invisíveis, sem sair do fluxo) e o cursor pisca no ponto atual. */
    .vega-bloco-esperando { visibility: hidden; }
    .vega-cursor { display: inline-block; width: .55em; margin-left: 1px; color: var(--vega-blue); animation: vega-cursor-pisca .9s steps(2, start) infinite; }
    @keyframes vega-cursor-pisca { to { visibility: hidden; } }
    /* Cartão, arquivos e rodapé entram depois do texto (o JS escalona o delay). */
    .vega-linha-surge { animation: vega-linha-surge .26s cubic-bezier(.22, .61, .36, 1) both; }
    tr.vega-linha-surge { animation-name: vega-linha-surge-tr; }
    @keyframes vega-linha-surge { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
    @keyframes vega-linha-surge-tr { from { opacity: 0; } to { opacity: 1; } }
    .vega-orcs.trocando .vega-orcs-item { animation: vega-surgir .32s cubic-bezier(.22,.61,.36,1) both; }
    .vega-orcs.trocando .vega-orcs-item:nth-child(2) { animation-delay: .03s; }
    .vega-orcs.trocando .vega-orcs-item:nth-child(3) { animation-delay: .06s; }
    .vega-orcs.trocando .vega-orcs-item:nth-child(4) { animation-delay: .09s; }
    .vega-orcs.trocando .vega-orcs-item:nth-child(5) { animation-delay: .12s; }
    .vega-orcs.trocando .vega-orcs-item:nth-child(n+6) { animation-delay: .15s; }
    .vega-orcs-visao { transition: color .15s, transform .15s; }
    .vega-orcs-visao:active { transform: scale(.9); }
    [data-vega-vermais-extra].vega-vermais-entrando { animation: vega-surgir .3s cubic-bezier(.22,.61,.36,1) both; }
    @media (prefers-reduced-motion: reduce) { .vega-orcs.trocando .vega-orcs-item, [data-vega-vermais-extra].vega-vermais-entrando { animation: none; } }
    /* Grade: cartões dois a dois, com valor, chip e data empilhados à direita. */
    .vega-orcs.grade .vega-orcs-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vega-orcs.grade .vega-orcs-item { border: 1px solid var(--vega-line); border-radius: 12px; padding: 12px 14px; }
    .vega-orcs.grade .vega-orcs-item:first-child { border-top: 1px solid var(--vega-line); }
    .vega-orcs.grade .vega-orcs-fim { flex-direction: column; align-items: flex-end; gap: 3px; }
    .vega-orcs.grade .vega-orcs-data { display: block; }
    .vega-orcs.grade .vega-orcs-itens > .vega-vermais-botao { grid-column: 1 / -1; justify-self: start; }
    @media (max-width: 640px) {
        .vega-orcs.grade .vega-orcs-itens { grid-template-columns: 1fr; }
        .vega-orcs-fim { flex-direction: column; align-items: flex-end; gap: 3px; }
    }

    /* ---- Orçamento pela referência: abas no card de itens e resumo azul ---- */
    .vega-orc-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .vega-orc-cabeca .vega-abas { flex: 1; min-width: 0; }
    .vega-orc-detalhes { display: flex; flex-direction: column; }
    .vega-orc-detalhes > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--vega-line); font-size: 14px; }
    .vega-orc-detalhes > div:first-child { border-top: 0; }
    .vega-orc-detalhes dt { color: var(--vega-ink-3); font-size: 13px; }
    .vega-orc-detalhes dd { color: var(--vega-ink); margin: 0; }
    @media (max-width: 640px) { .vega-orc-detalhes > div { grid-template-columns: 1fr; gap: 2px; } }
    .vega-orc-resumo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; color: rgba(255, 255, 255, .8); }
    .vega-orc-resumo-linha b { color: #fff; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
    .vega-orc-resumo-link { border: 0; background: none; color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
    .vega-orc-resumo-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); }
    .vega-orc-resumo-total span { font-size: 14px; font-weight: 700; color: #fff; }
    .vega-orc-resumo-total b { font-size: clamp(24px, 2vw, 30px); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
    .vega-orc-resumo-botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 16px; padding: 11px 16px; border: 0; border-radius: 10px; background: #fff; color: var(--vega-blue-texto); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
    .vega-orc-resumo-botao:hover { filter: brightness(.96); }

    /* ---- Orçamentos, condições e envio (documento de 27/09/2026) ---- */
    .vega-dialog.vega-dialog-largo { max-width: 720px; }
    .vega-orc-modo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--vega-line); border-radius: 12px; cursor: pointer; }
    .vega-orc-modo.ativo { border-color: var(--vega-ink-3); background: var(--vega-hover); }
    .vega-orc-modo input { margin-top: 3px; flex: none; }
    .vega-orc-modo b { display: block; font-size: 14px; color: var(--vega-ink); }
    .vega-orc-modo small { display: block; font-size: 12px; line-height: 1.4; color: var(--vega-ink-3); }
    .vega-orc-msg { display: block; white-space: pre-line; font-size: 13.5px; line-height: 1.5; color: var(--vega-ink); }
    .vega-orc-msg-previa { padding: 14px 16px; border-radius: 12px; background: var(--vega-hover); border: 1px solid var(--vega-line); max-height: 320px; overflow-y: auto; }
    .vega-plano-bloco { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
    .vega-plano-previa td.text-right { white-space: nowrap; }
    .vega-plano-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--vega-ink); cursor: pointer; }
    .vega-plano-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .vega-plano-grade[hidden], .vega-plano-bloco [hidden] { display: none; }
    .vega-plano-previa td { vertical-align: middle; }
    .vega-plano-in { padding-top: 6px; padding-bottom: 6px; font-size: 13px; min-width: 0; }
    .vega-plano-previa input[type="number"].vega-plano-in { width: 110px; margin-left: auto; }
    .vega-plano-grade > *, .vega-plano-grade .vega-input { min-width: 0; }
    .vega-plano-grade .vega-input { width: 100%; }
    .vega-plano-previa-caixa { overflow-x: auto; }
    @media (max-width: 640px) {
        .vega-plano-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .vega-plano-previa th:nth-child(4), .vega-plano-previa td:nth-child(4) { display: none; }
        table.vega-table.vega-plano-previa th, table.vega-table.vega-plano-previa td { padding-left: 4px; padding-right: 4px; }
        .vega-plano-previa input[type="number"].vega-plano-in { width: 90px; }
        .vega-plano-previa input[type="date"].vega-plano-in { width: 124px; padding-left: 8px; padding-right: 6px; }
        table.vega-table.vega-plano-previa { min-width: 0; width: 100%; }
        .vega-plano-previa th:nth-child(5), .vega-plano-previa td:nth-child(5):empty { display: none; }
    }
    .vega-orc-lista-filtros { border-bottom: 1px solid var(--vega-line); }
    .vega-orc-lista-abas { padding: 0 16px; }
    .vega-indicadores-azul .vega-ind-topo { align-items: center; }

    /* `hidden` perde para o `.flex` do Tailwind: painéis de aba escondidos ficam escondidos. */
    [data-com-painel][hidden], [data-orc-painel][hidden] { display: none !important; }
    .vega-fin-donut-val b { white-space: nowrap; }

    /* ---- Comissões pela referência ---- */
    .vega-com-kpis { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 12px; }
    @media (max-width: 1200px) { .vega-com-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vega-com-heroi { grid-column: 1 / -1; } }
    @media (max-width: 640px) { .vega-com-kpis { grid-template-columns: 1fr; } }
    .vega-com-kpi { display: flex; align-items: center; gap: 14px; }
    .vega-com-kpi-icone { flex: none; display: inline-flex; }
    .vega-com-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
    .vega-com-rodape .vega-fin-aviso { flex: 1; min-width: 260px; }

    /* ---- Agenda operacional (documento e referência de 18/09/2026) ----
       Cabeçalho com trilha, filtros com ícone, cartões do resumo com tinta
       própria, quadro com rodapé (legenda + dica), menu rápido no evento,
       gaveta em cartões, lista de espera em duas colunas e antecipação. ---- */
    .ag-cabeca { display: flex; flex-direction: column; gap: 6px; }
    .ag-trilha-sep { margin: 0 6px; color: var(--vega-ink-3); }
    .ag-nova-menu { position: relative; }
    .ag-nova-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
    .ag-nova-menu summary::-webkit-details-marker { display: none; }
    .ag-nova-seta { font-size: 10px; opacity: .85; }

    /* Filtro com o ícone do que filtra, dentro do campo. */
    .ag-campo { position: relative; display: inline-flex; align-items: center; color: var(--vega-ink-3); }
    .ag-campo > svg { position: absolute; left: 11px; pointer-events: none; }
    .ag-campo .vega-input { width: auto; min-width: 200px; padding-left: 34px; color: var(--vega-ink); }
    .ag-campo input.vega-input { min-width: 176px; }

    /* Cartões do resumo: ícone solto (sem caixa), número e rótulo; a tinta
       do estado vai no fundo e no ícone. Clicáveis acendem as consultas. */
    .ag-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
    .ag-kpis-mes { grid-template-columns: repeat(5, minmax(0, 1fr)) 1.3fr; }
    .ag-kpis-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Dia: quatro números e as vagas, cinco colunas. */
    .ag-kpis:not(.ag-kpis-mes):not(.ag-kpis-tres):has(.ag-kpi-azul-claro) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ag-kpi {
        display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0;
        border: 1px solid transparent; border-radius: 14px; text-align: left; font: inherit;
        color: var(--vega-ink); transition: transform .12s, box-shadow .12s, border-color .12s;
    }
    button.ag-kpi { cursor: pointer; }
    button.ag-kpi:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 18, 32, .08); }
    .ag-kpi.ativo { border-color: var(--vega-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vega-blue) 18%, transparent); }
    .ag-kpi-icone { flex: none; display: inline-flex; }
    .ag-kpi-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
    .ag-kpi-texto b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--vega-ink); }
    .ag-kpi-texto small { font-size: 12px; font-weight: 500; color: var(--vega-ink-2); line-height: 1.2; }
    .ag-kpi-texto em { font-style: normal; font-size: 11.5px; color: var(--vega-ink-3); margin-top: 2px; }
    .ag-kpi-azul { background: color-mix(in srgb, var(--vega-blue) 9%, var(--vega-card)); }
    .ag-kpi-azul .ag-kpi-icone { color: var(--vega-blue); }
    .ag-kpi-azul-claro { background: var(--vega-card); border-color: var(--vega-line); }
    .ag-kpi-azul-claro .ag-kpi-icone { color: var(--vega-blue); }
    .ag-kpi-verde { background: color-mix(in srgb, var(--vega-green) 10%, var(--vega-card)); }
    .ag-kpi-verde .ag-kpi-icone { color: var(--vega-green-texto, var(--vega-green)); }
    .ag-kpi-ambar { background: color-mix(in srgb, var(--vega-chip-amber-fg) 11%, var(--vega-card)); }
    .ag-kpi-ambar .ag-kpi-icone { color: var(--vega-amber-texto, var(--vega-chip-amber-fg)); }
    .ag-kpi-cinza { background: color-mix(in srgb, var(--vega-ink) 5%, var(--vega-card)); }
    .ag-kpi-cinza .ag-kpi-icone { color: var(--vega-ink-3); }
    .ag-kpi-vermelho { background: color-mix(in srgb, var(--vega-chip-red-fg) 9%, var(--vega-card)); }
    .ag-kpi-vermelho .ag-kpi-icone { color: var(--vega-chip-red-fg); }
    .ag-kpi-roxo { background: color-mix(in srgb, #7C3AED 9%, var(--vega-card)); }
    .ag-kpi-roxo .ag-kpi-icone { color: #7C3AED; }
    /* Antecipação: rótulo em cima, número grande, apoio embaixo. */
    .ag-kpi-alto { padding: 20px 22px; gap: 16px; }
    .ag-kpi-alto .ag-kpi-texto b { font-size: 30px; line-height: 1.1; }
    .ag-kpi-alto .ag-kpi-texto small { font-size: 13px; }
    /* Taxa de confirmação: número, variação e as barrinhas dos períodos. */
    .ag-kpi-taxa { background: var(--vega-card); border-color: var(--vega-line); justify-content: space-between; }
    .ag-kpi-taxa .ag-kpi-texto b { font-size: 26px; }
    .ag-kpi-delta { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; align-self: flex-start; margin-top: 4px; white-space: nowrap; }
    .ag-kpi-delta.sobe { background: var(--vega-chip-green-bg); color: var(--vega-chip-green-fg); }
    .ag-kpi-delta.desce { background: var(--vega-chip-red-bg); color: var(--vega-chip-red-fg); }
    .ag-kpi-delta.igual { background: var(--vega-chip-gray-bg); color: var(--vega-chip-gray-fg); }
    .ag-kpi-barras { flex: none; display: flex; align-items: flex-end; gap: 4px; height: 40px; width: 34px; }
    .ag-kpi-barras i { flex: 1; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--vega-blue) 30%, var(--vega-card)); min-height: 4px; transition: height .4s cubic-bezier(.22, .61, .36, 1); }
    .ag-kpi-barras i.atual { background: var(--vega-blue); }
    .ag-kpi-barras i.vazia { background: var(--vega-line); }
    .ag-resumo-limpar { grid-column: 1 / -1; justify-self: end; }
    .agenda-appt.ag-apagado { opacity: .18 !important; }

    /* O quadro: grade ou mês em cima, legenda e dica no rodapé. */
    .ag-quadro { border: 1px solid var(--vega-line); border-radius: 14px; background: var(--vega-card); overflow: hidden; display: flex; flex-direction: column; }
    .ag-quadro .ag-grade, .ag-quadro .ag-mes { border: 0; border-radius: 0; }
    .ag-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; border-top: 1px solid var(--vega-line); }
    .ag-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--vega-line); }
    .ag-legenda { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--vega-ink-2); }
    .ag-legenda > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .ag-legenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
    .ag-legenda-marcas { font-size: 11px; color: var(--vega-ink-3); }
    .ag-dica { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: 480px; font-size: 12px; line-height: 1.4; color: var(--vega-ink-3); }
    .ag-dica b { color: var(--vega-ink-2); }
    .ag-dica-icone { flex: none; display: inline-flex; color: var(--vega-blue); margin-top: 1px; }

    /* Marca de confirmação no evento (texto, não só cor) */
    .ag-bloco-marca { font-weight: 800; margin-left: 2px; }
    .ag-marca-sem_resposta { color: var(--vega-chip-red-fg); }
    /* Menu rápido ("...") no canto do evento. Abre um menu único da página. */
    .ag-bloco { position: relative; }
    .ag-bloco-titulo, .ag-bloco-sub { padding-right: 16px; }
    .ag-bloco-menu { position: absolute; right: 3px; top: 2px; width: 16px; height: 16px; border: 0; background: none; padding: 0; border-radius: 4px; color: inherit; opacity: .65; font-size: 13px; line-height: 1; cursor: pointer; }
    .ag-bloco-menu:hover { opacity: 1; background: rgba(255, 255, 255, .55); }
    .dark .ag-bloco-menu:hover { background: rgba(0, 0, 0, .25); }
    .ag-bloco-sm .ag-bloco-sub { display: block; }
    .ag-menu { position: fixed; z-index: 10005; width: 200px; }
    .ag-menu[hidden] { display: none !important; }
    /* Bloqueios: hachurado com cadeado */
    .ag-bloqueio { position: absolute; left: 2px; right: 2px; display: flex; align-items: flex-start; gap: 5px; padding: 3px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--vega-ink-3); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--vega-ink) 7%, var(--vega-card)) 0 6px, color-mix(in srgb, var(--vega-ink) 3%, var(--vega-card)) 6px 12px); border: 1px dashed color-mix(in srgb, var(--vega-ink) 22%, var(--vega-line)); overflow: hidden; pointer-events: none; z-index: 1; }
    .ag-bloqueio svg { flex: none; margin-top: 1px; }
    .ag-coluna .agenda-appt { z-index: 2; }
    .ag-mes-conta { display: block; font-size: 10px; color: var(--vega-ink-3); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ag-mes-bloqueio { display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 3px; font-size: 10px; color: var(--vega-ink-3); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--vega-ink) 8%, var(--vega-card)) 0 4px, transparent 4px 8px); border: 1px dashed var(--vega-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    /* Vaga aberta depois do cancelamento */
    .ag-vaga { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--vega-blue) 40%, var(--vega-line)); }
    .ag-vaga-icone { flex: none; display: inline-flex; color: var(--vega-blue); }
    /* Remarcar: de → para */
    .ag-rm-de-para { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-size: 14px; color: var(--vega-ink-2); }
    @media (max-width: 640px) { .ag-rm-de-para { grid-template-columns: 1fr; } }
    .ag-btn-perigo { color: var(--vega-chip-red-fg) !important; }
    .ag-btn-perigo:hover { border-color: var(--vega-chip-red-fg) !important; }

    /* ---- Gaveta da consulta (referência): cartões dentro da gaveta ---- */
    .ag-gaveta[hidden], .ag-gaveta-fundo[hidden] { display: none !important; }
    .ag-gaveta-fundo { position: fixed; inset: 0; background: rgba(11, 18, 32, .28); z-index: 10010; }
    .ag-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); z-index: 10011; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 16px; background: var(--vega-bg, var(--vega-card)); border-left: 1px solid var(--vega-line); box-shadow: -18px 0 44px rgba(11, 18, 32, .16); overflow-y: auto; animation: ag-gaveta-entra .22s cubic-bezier(.22,.61,.36,1); }
    .dark .ag-gaveta { background: var(--vega-card); }
    @keyframes ag-gaveta-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .ag-gaveta { animation: none; } }
    .ag-gaveta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .ag-gaveta-nome { font-size: 20px; font-weight: 800; color: var(--vega-ink); line-height: 1.2; letter-spacing: -.01em; }
    .ag-gaveta-sub { font-size: 12.5px; color: var(--vega-ink-3); margin-top: 2px; }
    .ag-gaveta-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--vega-blue-texto); }
    .ag-gaveta-link:hover { text-decoration: underline; }
    .ag-gaveta-fechar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; color: var(--vega-ink-3); cursor: pointer; }
    .ag-gaveta-fechar:hover { color: var(--vega-ink); background: var(--vega-hover); }
    .ag-gaveta-corpo { display: flex; flex-direction: column; gap: 12px; flex: 1; }
    /* Situação e confirmação: dois cartões com a tinta do estado. */
    .ag-gaveta-estados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ag-estado { display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--vega-ink) 5%, var(--vega-card)); min-width: 0; }
    .ag-estado > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .ag-estado small { font-size: 11px; font-weight: 600; color: var(--vega-ink-2); }
    .ag-estado .vega-chip { align-self: flex-start; }
    .ag-estado-icone { flex: none; display: inline-flex; color: var(--vega-ink-3); }
    .ag-estado-blue { background: color-mix(in srgb, var(--vega-blue) 9%, var(--vega-card)); }
    .ag-estado-blue .ag-estado-icone { color: var(--vega-blue); }
    .ag-estado-green { background: color-mix(in srgb, var(--vega-green) 10%, var(--vega-card)); }
    .ag-estado-green .ag-estado-icone { color: var(--vega-green-texto, var(--vega-green)); }
    .ag-estado-amber { background: color-mix(in srgb, var(--vega-chip-amber-fg) 11%, var(--vega-card)); }
    .ag-estado-amber .ag-estado-icone { color: var(--vega-amber-texto, var(--vega-chip-amber-fg)); }
    .ag-estado-red { background: color-mix(in srgb, var(--vega-chip-red-fg) 9%, var(--vega-card)); }
    .ag-estado-red .ag-estado-icone { color: var(--vega-chip-red-fg); }
    .ag-estado-done { background: color-mix(in srgb, var(--vega-ink) 6%, var(--vega-card)); }
    .ag-estado-done .ag-estado-icone { color: var(--vega-ink-2); }
    /* Dados em duas colunas, cada um com o ícone solto. */
    .ag-gaveta-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 16px; border: 1px solid var(--vega-line); border-radius: 12px; background: var(--vega-card); margin: 0; }
    .ag-gaveta-dados > div { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
    .ag-gaveta-dados > div > div { min-width: 0; }
    .ag-gaveta-dados .ag-dado-largo { grid-column: 1 / -1; }
    .ag-gaveta-dados > div[hidden], .ag-espera-painel-vazio[hidden] { display: none !important; }
    .ag-dado-icone { flex: none; display: inline-flex; color: var(--vega-blue); margin-top: 1px; }
    .ag-gaveta-dados dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vega-ink-3); }
    .ag-gaveta-dados dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 500; color: var(--vega-ink); overflow-wrap: anywhere; }
    .ag-gaveta-acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ag-gaveta-acoes .vega-btn { padding: 8px 10px; font-size: 12.5px; line-height: 1.2; }
    .ag-gaveta-acoes[hidden] { display: none !important; }
    .ag-gaveta-secao { padding: 14px 16px; border: 1px solid var(--vega-line); border-radius: 12px; background: var(--vega-card); }
    .ag-gaveta-titulo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--vega-ink); margin-bottom: 10px; }
    .ag-gaveta-titulo-icone { display: inline-flex; color: var(--vega-blue); }
    .ag-agente-corpo { display: flex; align-items: flex-start; gap: 12px; }
    .ag-agente { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--vega-ink-2); }
    .ag-agente li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .ag-agente li > span:not(.ag-ponto) { color: var(--vega-ink); }
    .ag-agente small, .ag-historico small { color: var(--vega-ink-3); font-size: 11px; }
    .ag-agente-vazio { color: var(--vega-ink-3); }
    .ag-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vega-ink-3); position: relative; top: -1px; }
    .ag-ponto.ok { background: var(--vega-green); }
    .ag-ponto.pendente { background: var(--vega-chip-amber-fg); }
    .ag-ponto.proximo { background: var(--vega-blue); }
    /* "Ver conversa no WhatsApp": a marca, o texto e a seta. */
    .ag-conversa { flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: 150px; padding: 10px 12px; border: 1px solid var(--vega-line); border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--vega-ink); text-decoration: none; line-height: 1.25; }
    .ag-conversa:hover { border-color: #25D366; }
    .ag-conversa[hidden] { display: none !important; }
    .ag-conversa svg:first-child { flex: none; }
    /* Histórico: linha do tempo com o ponto na cor do que aconteceu. */
    .ag-historico { display: flex; flex-direction: column; gap: 0; font-size: 12.5px; color: var(--vega-ink-2); margin: 0; }
    .ag-historico li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; position: relative; }
    .ag-historico li .ag-ponto { top: 4px; }
    .ag-historico li:not(:last-child)::before { content: ''; position: absolute; left: 3.5px; top: 18px; bottom: -6px; width: 1px; background: var(--vega-line); }
    .ag-historico li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .ag-historico li b { color: var(--vega-ink); font-weight: 600; }
    .ag-historico li.tom-ok .ag-ponto { background: var(--vega-green); }
    .ag-historico li.tom-ruim .ag-ponto { background: var(--vega-chip-red-fg); }
    .ag-historico li.tom-info .ag-ponto { background: var(--vega-blue); }
    .ag-historico li.ag-agente-vazio { padding-left: 0; }
    .ag-gaveta-rodape { position: sticky; bottom: -16px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 20px; margin: auto -20px -16px; border-top: 1px solid var(--vega-line); background: var(--vega-bg, var(--vega-card)); }
    .dark .ag-gaveta-rodape { background: var(--vega-card); }
    .ag-gaveta-rodape .vega-btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
    .ag-gaveta-rodape-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
    .ag-gaveta-rodape button[hidden] { display: none !important; }

    /* ---- Lista de espera: duas colunas ---- */
    .ag-espera { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
    .ag-espera-lista { padding: 18px 0 0; overflow: hidden; }
    .ag-espera-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 20px 14px; }
    .ag-espera-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .ag-espera-busca .vega-prof-busca { width: 240px; max-width: 100%; }
    .ag-espera-abas { padding: 0 12px; }
    .ag-espera-tabela { width: 100%; }
    .ag-espera-linha { cursor: pointer; }
    .ag-espera-linha:focus-visible { outline: 2px solid var(--vega-blue); outline-offset: -2px; }
    .ag-espera-linha-ativa td { background: var(--vega-blue-soft) !important; }
    .ag-espera-linha-ativa td:first-child { box-shadow: inset 3px 0 0 var(--vega-blue); }
    .ag-espera-col-acoes { display: none; }
    .ag-espera-acoes-linha { display: inline-flex; align-items: center; gap: 8px; }
    .ag-espera-acoes-linha form { margin: 0; }
    .ag-espera-acoes-linha select.vega-input { width: 130px; }
    .ag-espera-paginas { padding: 12px 16px; border-top: 1px solid var(--vega-line); }
    .ag-espera-painel { position: sticky; top: 16px; padding: 20px; }
    .ag-espera-painel-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 12px; text-align: center; }
    .ag-espera-painel-icone { display: inline-flex; color: var(--vega-ink-3); opacity: .6; margin-bottom: 8px; }
    .ag-espera-painel-corpo { display: flex; flex-direction: column; gap: 14px; }
    .ag-espera-painel-corpo[hidden] { display: none !important; }
    .ag-espera-painel-topo { display: flex; align-items: flex-start; gap: 12px; }
    .ag-espera-avatar { width: 44px; height: 44px; font-size: 14px; }
    .ag-espera-chips { display: flex; gap: 6px; flex-wrap: wrap; }
    .ag-espera-dados { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
    .ag-espera-status { display: flex; flex-direction: column; gap: 4px; }
    .ag-espera-painel-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
    .ag-espera-painel-acoes > a, .ag-espera-painel-acoes > form { flex: 1 1 auto; }
    .ag-espera-painel-acoes form { margin: 0; }
    .ag-espera-painel-acoes form button { width: 100%; }
    .ag-espera-painel-acoes .vega-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
    @media (max-width: 900px) {
        .ag-espera { grid-template-columns: minmax(0, 1fr); }
        .ag-espera-painel { display: none; }
        .ag-espera-col-acoes { display: table-cell; }
    }

    /* ---- Antecipação: "como funciona" e filtro ativo ---- */
    .ag-como-funciona { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-radius: 14px; background: color-mix(in srgb, var(--vega-blue) 7%, var(--vega-card)); border: 1px solid color-mix(in srgb, var(--vega-blue) 22%, var(--vega-line)); }
    .ag-como-icone { flex: none; display: inline-flex; color: var(--vega-blue); }
    .ag-como-funciona .vega-btn { display: inline-flex; align-items: center; gap: 6px; }
    .ag-filtro-ativo { border-color: var(--vega-blue) !important; color: var(--vega-blue-texto) !important; }
    .ag-ofertas-tabela td .vega-prof-sub { white-space: normal; }

    /* Telas médias: cartões em duas colunas. */
    @media (max-width: 1100px) {
        .ag-kpis, .ag-kpis-mes, .ag-kpis:not(.ag-kpis-mes):not(.ag-kpis-tres):has(.ag-kpi-azul-claro) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .ag-kpis-mes .ag-kpi-taxa { grid-column: span 3; }
    }
    @media (max-width: 720px) {
        .ag-kpis, .ag-kpis-mes, .ag-kpis-tres, .ag-kpis:not(.ag-kpis-mes):not(.ag-kpis-tres):has(.ag-kpi-azul-claro) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .ag-kpis-mes .ag-kpi-taxa { grid-column: span 2; }
        .ag-kpi { padding: 12px; gap: 10px; }
        .ag-kpi-texto b { font-size: 19px; }
        .ag-kpi-texto small { white-space: normal; }
        .ag-kpi-alto .ag-kpi-texto b { font-size: 24px; }
        .ag-rodape { flex-direction: column; align-items: flex-start; }
        .ag-dica { max-width: none; }
        .ag-gaveta { width: 100vw; padding: 16px 14px 14px; }
        .ag-gaveta-rodape { margin: auto -14px -14px; padding: 12px 14px; bottom: -14px; }
        .ag-gaveta-dados { grid-template-columns: 1fr; }
        .ag-gaveta-acoes { grid-template-columns: 1fr 1fr; }
        .ag-gaveta-acoes > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
        .ag-bloco-sm .ag-bloco-menu, .ag-bloco-sm .ag-bloco-sub, .ag-bloco-sm .ag-bloco-nome { display: none; }
        .ag-bloco-sm .ag-bloco-titulo { padding-right: 0; }
        .ag-bloco-sm { padding: 1px 3px; font-size: 9.5px; }
        .ag-bloco-sm .ag-bloco-marca { margin-left: 0; }
        .ag-mes-conta { display: none; }
        .ag-mes-celula { min-height: 72px; }
        .ag-agente-corpo { flex-direction: column; }
        .ag-conversa { max-width: none; width: 100%; }
        .ag-gaveta-rodape { flex-direction: column-reverse; align-items: stretch; }
        .ag-gaveta-rodape > .vega-btn { width: 100%; justify-content: center; }
        .ag-gaveta-rodape-acoes { display: grid; grid-template-columns: 1fr 1fr; }
        .ag-gaveta-rodape-acoes > #cm-remarcar { grid-column: 1 / -1; }
        .ag-gaveta-rodape-acoes .vega-btn { width: 100%; justify-content: center; }
        .ag-espera-topo { flex-direction: column; align-items: stretch; }
        .ag-espera-acoes { flex-direction: column; align-items: stretch; }
        .ag-espera-busca .vega-prof-busca { width: 100%; max-width: none; }
        .ag-espera-acoes .vega-btn { justify-content: center; }
        .ag-como-funciona .vega-btn { width: 100%; justify-content: center; }
    }

    /* ---- Configurações (redesign de 18/09/2026) ----
       Cabeçalho com trilha e subtítulo, abas com ícone de traço, títulos de
       seção com ícone, interruptores no lugar das caixinhas, rodapé de salvar
       com hairline, avisos com ícone. Tudo pela classe `.vega-config`, para
       valer nas onze abas sem reescrever cada formulário. ---- */
    .cfg-cabeca { align-items: flex-start; }
    .cfg-abas .vega-aba svg { flex: none; opacity: .7; }
    .cfg-abas .vega-aba-ativa svg { opacity: 1; color: var(--vega-blue); }
    .vega-config .vega-card { border-radius: 14px; }
    .cfg-titulo { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--vega-ink); line-height: 1.3; }
    .cfg-titulo-icone { display: inline-flex; color: var(--vega-blue); }
    .cfg-titulo .vega-marca { flex: none; }
    .cfg-titulo + p, .cfg-titulo + .text-xs { margin-top: 4px; }
    .vega-config .vega-label { font-size: 12.5px; font-weight: 600; color: var(--vega-ink-2); }
    .vega-config .vega-input { border-radius: 10px; }
    .vega-config textarea.vega-input { line-height: 1.5; }
    /* Interruptor: a caixinha vira um toggle. Só nas caixas soltas de
       formulário (label com texto); as de tabela e de lista de permissões
       continuam quadradas. */
    .vega-config label > input[type="checkbox"] {
        appearance: none; -webkit-appearance: none; flex: none;
        width: 34px; height: 20px; border-radius: 999px; margin: 0;
        background: color-mix(in srgb, var(--vega-ink) 18%, var(--vega-card));
        border: 0; position: relative; cursor: pointer;
        transition: background .18s cubic-bezier(.22, .61, .36, 1);
    }
    .vega-config label > input[type="checkbox"]::after {
        content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
        border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 18, 32, .3);
        transition: transform .18s cubic-bezier(.22, .61, .36, 1);
    }
    .vega-config label > input[type="checkbox"]:checked { background: var(--vega-blue); }
    .vega-config label > input[type="checkbox"]:checked::after { transform: translateX(14px); }
    .vega-config label > input[type="checkbox"]:focus-visible { outline: 2px solid var(--vega-blue); outline-offset: 2px; }
    .vega-config label > input[type="checkbox"].mt-1 { margin-top: 2px; }
    /* Rodapé do formulário: o Salvar fica sempre no mesmo lugar. */
    .cfg-rodape { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--vega-line); }
    /* Avisos: ícone solto na cor do tom, sem barra lateral. */
    .cfg-aviso { display: flex; align-items: flex-start; gap: 12px; }
    .cfg-aviso-icone { flex: none; display: inline-flex; margin-top: 1px; }
    .cfg-aviso.ambar { border-color: color-mix(in srgb, var(--vega-chip-amber-fg) 45%, var(--vega-line)); background: color-mix(in srgb, var(--vega-chip-amber-fg) 6%, var(--vega-card)); }
    .cfg-aviso.ambar .cfg-aviso-icone { color: var(--vega-amber-texto, var(--vega-chip-amber-fg)); }
    .cfg-aviso.azul { border-color: color-mix(in srgb, var(--vega-blue) 40%, var(--vega-line)); background: color-mix(in srgb, var(--vega-blue) 6%, var(--vega-card)); }
    .cfg-aviso.azul .cfg-aviso-icone { color: var(--vega-blue); }
    /* Separadores internos de formulário ganham o mesmo respiro. */
    .vega-config form .border-t { margin-top: 6px; }
    @media (max-width: 640px) {
        .cfg-cabeca { flex-direction: column; }
        .cfg-cabeca .vega-prof-cabeca-acoes { margin-left: 0; width: 100%; }
        .cfg-cabeca .vega-prof-cabeca-acoes > * { width: 100%; justify-content: center; }
        .cfg-rodape .vega-btn { width: 100%; justify-content: center; }
        .vega-config .vega-card > .flex.items-center.justify-between { flex-wrap: wrap; gap: 8px; }
    }

    /* ---- VEGA no CRM (documentos de 18/09/2026; referência de tela do Daniel) ----
       Ícone do menu, a tela de chat em duas colunas, o orbe da saudação, os
       cartões, a conversa (VEGA sem balão), o status com o "thinking orb", a
       borda animada do campo e o microfone com brilho. Sem pacote: os
       componentes indicados são React; aqui é CSS. ---- */
    .icon-vega { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/><path d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/><path d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/></svg>") no-repeat center / contain; }
    .icon-vega::before { content: none !important; }
    /* Barra do Painel Aureon (dominio central): icones de traco no desenho do
       icon-vega, soltos (sem caixa), herdando a cor do item. */
    .icon-painel-clinicas { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6.5v6.5H4z'/><path d='M13.5 4H20v6.5h-6.5z'/><path d='M4 13.5h6.5V20H4z'/><path d='M13.5 13.5H20V20h-6.5z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6.5v6.5H4z'/><path d='M13.5 4H20v6.5h-6.5z'/><path d='M4 13.5h6.5V20H4z'/><path d='M13.5 13.5H20V20h-6.5z'/></svg>") no-repeat center / contain; }
    .icon-painel-clinicas::before { content: none !important; }
    .icon-painel-template { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h9l4 4v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M17 3v4h4'/><path d='M3 7v12a3 3 0 0 0 3 3h10'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h9l4 4v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M17 3v4h4'/><path d='M3 7v12a3 3 0 0 0 3 3h10'/></svg>") no-repeat center / contain; }
    .icon-painel-template::before { content: none !important; }
    .icon-painel-log { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h9l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M15 3v4h4'/><path d='M8 12h8M8 16h8M8 8h3'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h9l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M15 3v4h4'/><path d='M8 12h8M8 16h8M8 8h3'/></svg>") no-repeat center / contain; }
    .icon-painel-log::before { content: none !important; }
    .icon-painel-saude { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M20.4 5.6a5 5 0 0 0-7.1 0L12 6.9l-1.3-1.3a5 5 0 0 0-7.1 7.1L12 21l8.4-8.3a5 5 0 0 0 0-7.1z'/><path d='M3.5 12h4l1.5-3 3 6 1.5-3h7'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M20.4 5.6a5 5 0 0 0-7.1 0L12 6.9l-1.3-1.3a5 5 0 0 0-7.1 7.1L12 21l8.4-8.3a5 5 0 0 0 0-7.1z'/><path d='M3.5 12h4l1.5-3 3 6 1.5-3h7'/></svg>") no-repeat center / contain; }
    .icon-painel-saude::before { content: none !important; }
    .icon-painel-usuarios { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/><path d='M2 21v-1a6 6 0 0 1 12 0v1'/><path d='M16 3.5a4 4 0 0 1 0 7'/><path d='M18 14a5 5 0 0 1 4 5v2'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/><path d='M2 21v-1a6 6 0 0 1 12 0v1'/><path d='M16 3.5a4 4 0 0 1 0 7'/><path d='M18 14a5 5 0 0 1 4 5v2'/></svg>") no-repeat center / contain; }
    .icon-painel-usuarios::before { content: none !important; }

    /* Duas colunas, sem cartão em volta: a tela é o chat. */
    /* Do cabeçalho (59px) ao rodapé fixo (61px), encostado na barra principal:
       o conteúdo do admin tem 16px de folga em volta e o chat os desconta. */
    .vega-chat { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 0; height: calc(100vh - 120px); min-height: 520px; margin: -12px -16px 0 -16px; border-top: 1px solid var(--vega-line); }
    .vega-chat-lista { display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 12px; border-right: 1px solid var(--vega-line); background: color-mix(in srgb, var(--vega-ink) 2%, var(--vega-card)); }
    .vega-chat-marca-linha { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .vega-chat-marca { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--vega-ink); letter-spacing: -.01em; padding: 0 4px 4px; }
    .vega-chat-lista-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--vega-ink-3); cursor: pointer; transition: background .15s, color .15s; }
    .vega-chat-lista-toggle:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-chat-lista-toggle .vega-side-seta-abre { display: none; }
    /* Minimizada: a coluna some e o botão do cabeçalho da conversa reabre. */
    .vega-chat { transition: grid-template-columns .22s cubic-bezier(.22, .61, .36, 1); }
    .vega-chat.lista-minimizada { grid-template-columns: 0 minmax(0, 1fr); }
    .vega-chat.lista-minimizada .vega-chat-lista { overflow: hidden; padding-left: 0; padding-right: 0; border-right: 0; opacity: 0; pointer-events: none; }
    .vega-chat-lista { transition: opacity .18s; }
    .vega-chat.lista-minimizada .vega-chat-lista-abrir { display: inline-flex; }
    /* Primeira vez (nenhum chat): sem a lista, saudação e campo no centro,
       cartões abaixo do campo. A metade de cima termina na saudação e a de
       baixo começa nos cartões; ao sair, o bloco dos cartões encolhe
       (flex-grow anima) e a coluna da lista desliza para dentro. */
    .vega-chat.primeira-vez { grid-template-columns: 0 minmax(0, 1fr); }
    .vega-chat.primeira-vez .vega-chat-lista { overflow: hidden; padding-left: 0; padding-right: 0; border-right: 0; opacity: 0; pointer-events: none; }
    /* `centrada`: qualquer conversa vazia (chat novo também), com ou sem a lista. */
    .vega-chat.centrada .vega-chat-cabeca { display: none; }
    /* Conversa vazia com a lista minimizada: o cabeçalho volta (sem a linha)
       só para o botão que reabre os chats; escondido, não havia como voltar. */
    .vega-chat.centrada.lista-minimizada:not(.primeira-vez) .vega-chat-cabeca { display: flex; border-bottom: 0; min-height: 0; padding-bottom: 0; }
    /* Os dois blocos ficam com o tamanho do conteúdo e dividem a sobra por igual; a saudação encosta no campo (margin-top auto) e, em tela baixa, rola em vez de cortar o orbe. */
    .vega-chat.centrada .vega-chat-conversa { flex: 1 1 auto; }
    .vega-chat.centrada .vega-chat-rolagem { flex: 1 1 auto; display: flex; flex-direction: column; padding-bottom: 4px; }
    .vega-chat.centrada .vega-chat-boas-vindas { margin: auto auto 0; }
    .vega-chat.centrada .vega-chat-pe { width: 100%; max-width: 820px; margin: 0 auto; }
    .vega-chat-primeira { flex: 0 1 0; min-height: 0; overflow: hidden; width: 100%; max-width: 820px; margin: 0 auto; padding: 0 28px; transition: flex-grow .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease-out; }
    .vega-chat.centrada .vega-chat-primeira { flex: 1 1 auto; padding-top: 4px; }
    .vega-chat-primeira.saindo { opacity: 0; }
    .vega-chat-primeira .vega-chat-cartoes { margin-top: 10px; }
    /* Cada chat: o link e o "⋯" que aparece ao passar o mouse. */
    .vega-chat-item-linha { position: relative; display: flex; align-items: center; transition: opacity .2s, transform .2s, max-height .25s, margin .25s; max-height: 60px; overflow: visible; }
    .vega-chat-item-linha.saindo { opacity: 0; transform: translateX(-10px); max-height: 0; margin: 0; overflow: hidden; pointer-events: none; }
    .vega-chat-item-linha .vega-chat-item { flex: 1; min-width: 0; padding-right: 30px; }
    .vega-chat-item-menu { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--vega-ink-3); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
    .vega-chat-item-linha:hover .vega-chat-item-menu, .vega-chat-item-menu[aria-expanded="true"], .vega-chat-item-linha.ativo .vega-chat-item-menu { opacity: 1; }
    .vega-chat-item-menu:hover, .vega-chat-item-menu[aria-expanded="true"] { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-chat-item-linha:hover .vega-chat-item-quando { opacity: 0; }
    .vega-chat-item-quando { transition: opacity .15s; }
    .vega-chat-item-opcoes { position: absolute; right: 4px; top: calc(100% + 2px); z-index: 30; min-width: 176px; padding: 6px; border-radius: 12px; border: 1px solid var(--vega-line); background: var(--vega-card); box-shadow: 0 14px 36px rgba(11, 18, 32, .16); animation: vega-menu-abre .16s ease-out; transform-origin: top right; display: flex; flex-direction: column; gap: 2px; }
    .vega-chat-item-opcoes[hidden] { display: none !important; }
    .vega-chat-item-opcoes button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--vega-ink-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
    .vega-chat-item-opcoes button:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-chat-item-opcoes button.perigo { color: var(--vega-chip-red-fg); }
    .vega-chat-item-opcoes button svg { color: var(--vega-ink-3); }
    .vega-chat-item-opcoes button.perigo svg { color: inherit; }
    .vega-chat-item-editar { width: 100%; font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--vega-blue); border-radius: 6px; background: var(--vega-card); color: var(--vega-ink); outline: none; }
    .vega-chat-marca svg { color: var(--vega-blue); }
    .vega-chat-novo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--vega-line); background: var(--vega-card); color: var(--vega-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; }
    .vega-chat-novo:hover { border-color: var(--vega-blue); color: var(--vega-blue-texto); }
    .vega-chat-lista form { margin: 0; }
    .vega-chat-busca .vega-prof-busca { max-width: none; }
    .vega-chat-busca .vega-input { font-size: 13px; padding-top: 7px; padding-bottom: 7px; background: var(--vega-card); }
    .vega-chat-grupos { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
    .vega-chat-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vega-ink-3); padding: 10px 6px 4px; }
    .vega-chat-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--vega-ink-2); text-decoration: none; font-size: 13px; transition: background .18s, color .18s, transform .18s; animation: vega-surgir .32s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
    .vega-chat-item:active { transform: scale(.985); }
    .vega-chat-item:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-chat-item.ativo { background: var(--vega-blue-soft); color: var(--vega-blue-texto); font-weight: 600; }
    .vega-chat-item-titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vega-chat-item-quando { flex: none; font-size: 11px; color: var(--vega-ink-3); font-variant-numeric: tabular-nums; }
    .vega-chat-vazio { padding: 24px 12px; text-align: center; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-chat-lista-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px 0; border-top: 1px solid var(--vega-line); }
    /* A engrenagem do rodapé da lista abre as configurações do VEGA. */
    .vega-chat-personalizar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--vega-ink-3); cursor: pointer; transition: background .15s, color .15s, transform .2s cubic-bezier(.22, .61, .36, 1); }
    .vega-chat-personalizar:hover { background: var(--vega-hover); color: var(--vega-ink); transform: rotate(30deg); }
    .vega-chat.lista-minimizada .vega-chat-lista-rodape { visibility: hidden; }
    .vega-chat-pref { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--vega-ink-2); margin: 0; }
    .vega-chat-pref span { flex: 1; min-width: 0; }
    .vega-chat-pref-x { display: inline-flex; border: 0; background: none; color: var(--vega-ink-3); cursor: pointer; padding: 2px; border-radius: 6px; }
    .vega-chat-pref-x:hover { color: var(--vega-chip-red-fg); background: var(--vega-hover); }

    /* `min-height: 0` nos filhos da grade: sem isso a conversa cresce além da
       linha, a página inteira rola e o campo de digitar some embaixo do rodapé. */
    .vega-chat > * { min-height: 0; }
    .vega-chat-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--vega-card); position: relative; }
    /* Troca de chat por fetch: a conversa sai e entra com um fade curto; o
       campo de escrever, fora deste bloco, não pisca. */
    /* O fundo animado do chat novo (vega/_ceu): so aparece com a conversa
       vazia; o veu por cima segura o azul nas bordas e deixa o centro na cor
       do cartao. Conversa e rodape ficam acima (z-index). */
    .vega-ceu-caixa { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; overflow: hidden; }
    .vega-chat.centrada .vega-ceu-caixa { display: block; }
    .vega-ceu { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .55; }
    .dark .vega-ceu { opacity: .5; }
    .vega-ceu-veu { position: absolute; inset: 0; background:
        linear-gradient(to bottom, var(--vega-card) 0%, color-mix(in srgb, var(--vega-card) 55%, transparent) 14%, transparent 34%),
        radial-gradient(ellipse 52% 46% at 50% 56%, var(--vega-card) 0%, color-mix(in srgb, var(--vega-card) 88%, transparent) 55%, color-mix(in srgb, var(--vega-card) 40%, transparent) 80%, transparent 100%); }
    .vega-chat-area > .vega-chat-conversa, .vega-chat-area > .vega-chat-pe { position: relative; z-index: 1; }
    .vega-chat-conversa { display: flex; flex-direction: column; flex: 1; min-height: 0; transition: opacity .14s ease-out, transform .14s ease-out; }
    .vega-chat-conversa.saindo { opacity: 0; transform: translateY(4px); }
    .vega-chat-conversa.entrando { animation: vega-chat-entra .3s cubic-bezier(.22, .61, .36, 1); }
    @keyframes vega-chat-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .vega-chat-toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; padding: 9px 16px; border-radius: 999px; background: var(--vega-ink); color: #fff; font-size: 13px; box-shadow: 0 10px 30px rgba(11, 18, 32, .22); animation: vega-chat-entra .25s ease-out; transition: opacity .35s, transform .35s; }
    .vega-chat-toast.sumindo { opacity: 0; transform: translate(-50%, -6px); }
    /* As abas Chat | Pesquisa no topo da conversa (aparecem também na tela vazia). */
    .vega-chat-abas { display: inline-flex; align-self: center; gap: 2px; margin: 10px auto 0; padding: 3px; border-radius: 999px; border: 1px solid var(--vega-line); background: color-mix(in srgb, var(--vega-ink) 3%, var(--vega-card)); }
    .vega-chat-aba { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--vega-ink-3); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
    .vega-chat-aba:hover { color: var(--vega-ink); }
    .vega-chat-aba.ativa { background: var(--vega-card); color: var(--vega-ink); box-shadow: 0 1px 3px rgba(11, 18, 32, .12); }
    .vega-chat-aba.ativa svg { color: var(--vega-blue); }
    .vega-chat.centrada .vega-chat-abas { margin-top: 14px; }
    .vega-chat-abas + .vega-chat-cabeca { min-height: 44px; padding-top: 4px; }
    .vega-msg-sugerir { margin: 6px 0 2px; }
    .vega-msg-sugerir-botao { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; }
    .vega-chat-item-titulo svg { display: inline; vertical-align: -1px; color: var(--vega-ink-3); margin-right: 2px; }   /* o preflight põe svg em block */
    .vega-chat-cabeca { display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 52px; border-bottom: 1px solid var(--vega-line); }
    .vega-chat-cabeca.vazia { border-bottom-color: transparent; }
    .vega-chat-lista-abrir { display: none; border: 0; background: none; color: var(--vega-ink-2); cursor: pointer; padding: 6px; border-radius: 8px; }
    .vega-chat-titulo-form { flex: 1; min-width: 0; margin: 0; }
    .vega-chat-titulo { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--vega-ink); padding: 6px 8px; border-radius: 8px; }
    .vega-chat-titulo:hover { border-color: var(--vega-line); }
    .vega-chat-titulo:focus { outline: none; border-color: var(--vega-blue); background: var(--vega-card); }
    .vega-chat-cabeca-acoes { display: flex; gap: 6px; }
    .vega-chat-cabeca-acoes form { margin: 0; }
    .vega-chat-cabeca-acoes .vega-btn { padding: 6px 11px; font-size: 12.5px; }
    .vega-chat-rolagem { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px; }

    /* ---- Tela vazia: o orbe, a saudação e os cartões ---- */
    .vega-chat-boas-vindas { max-width: 880px; margin: 4vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .2s ease-out, transform .2s ease-out; }
    .vega-chat-boas-vindas.saindo { opacity: 0; transform: translateY(-8px); pointer-events: none; }
    .vega-chat-boas-vindas > .vega-orb-caixa { animation: vega-boas-orb .6s cubic-bezier(.22, .61, .36, 1) both; }
    .vega-chat-boas-vindas > .vega-chat-boas-titulo { animation: vega-surgir .45s cubic-bezier(.22, .61, .36, 1) .12s both; }
    .vega-chat-boas-vindas > .vega-chat-boas-sub, .vega-chat-boas-vindas > .vega-chat-boas-aviso { animation: vega-surgir .45s cubic-bezier(.22, .61, .36, 1) .2s both; }
    @keyframes vega-boas-orb { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
    .vega-orb { position: relative; width: 120px; height: 120px; border-radius: 50%; margin-bottom: 18px; background: radial-gradient(circle at 32% 28%, #ffffff 0%, #dbe6ff 14%, #9dbaff 34%, #4f83ff 58%, #2563ff 76%, #1645b8 100%); box-shadow: 0 24px 60px rgba(37, 99, 255, .32), inset -14px -18px 34px rgba(11, 18, 32, .18), inset 10px 12px 26px rgba(255, 255, 255, .55); animation: vega-orb-flutua 5.5s ease-in-out infinite; }
    .vega-orb::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(37, 99, 255, 0) 0%, rgba(124, 58, 237, .45) 22%, rgba(37, 99, 255, 0) 40%, rgba(15, 169, 104, .35) 58%, rgba(37, 99, 255, 0) 72%, rgba(37, 99, 255, .45) 88%, rgba(37, 99, 255, 0) 100%); filter: blur(16px); z-index: -1; animation: vega-orb-gira 9s linear infinite; }
    .vega-orb-brilho { position: absolute; left: 22%; top: 16%; width: 34%; height: 24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); filter: blur(2px); animation: vega-orb-brilha 4s ease-in-out infinite; }
    .vega-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 75%, rgba(124, 58, 237, .45), rgba(124, 58, 237, 0) 55%); mix-blend-mode: screen; animation: vega-orb-ondula 7s ease-in-out infinite; }
    @keyframes vega-orb-flutua { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.03); } }
    @keyframes vega-orb-gira { to { transform: rotate(360deg); } }
    @keyframes vega-orb-brilha { 0%, 100% { opacity: .85; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(6px, 4px); } }
    @keyframes vega-orb-ondula { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(20deg); } }
    .dark .vega-orb { box-shadow: 0 24px 70px rgba(37, 99, 255, .45), inset -14px -18px 34px rgba(0, 0, 0, .35), inset 10px 12px 26px rgba(255, 255, 255, .35); }
    /* Orbe da saudação: o WebGL (react-bits) por cima; o CSS fica atrás como
       reserva e some quando o canvas entra. */
    .vega-orb-caixa { position: relative; width: 150px; height: 150px; margin-bottom: 8px; }
    .vega-orb-caixa .vega-orb { position: absolute; left: 15px; top: 15px; margin: 0; }
    .vega-orb-react { position: absolute; inset: 0; }
    .vega-orb-react:has(canvas) + .vega-orb, .vega-orb-caixa:has(canvas) .vega-orb { opacity: 0; }
    /* Status: o thinking-orb ocupa 20px; os três pontos em CSS somem quando o canvas chega. */
    /* O thinking-orbs só tem dois desenhos (64 e 20); o de 64 é a esfera
       pontilhada, mostrada a 48px. */
    .vega-status-orb { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
    .vega-status-orb:has(canvas) .vega-status-orbs { display: none; }
    /* O "+" e os atalhos que se derretem para fora dele (liquid-gooey). */
    .vega-chat-linha { position: relative; display: flex; flex-direction: column; }
    /* A caixa em duas linhas: o texto em cima; embaixo o "+", o modo, e à
       direita o microfone e o enviar. Tudo dentro da caixa. */
    .vega-chat-composer.vega-chat-composer-caixa { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 8px 6px 10px; }
    .vega-chat-composer-caixa .vega-chat-entrada { padding: 10px 6px 6px; min-height: 58px; }
    .vega-chat-barra { display: flex; align-items: center; gap: 4px; min-height: 38px; }
    .vega-chat-barra-vao { flex: 1; }
    .vega-chat-mais { position: relative; width: 38px; height: 38px; flex: none; z-index: 2; transition: width .32s cubic-bezier(.34, 1.3, .64, 1); }
    /* Anexos na caixa: chips acima do texto. */
    .vega-chat-anexos { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 2px; }
    .vega-chat-anexo { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 5px 6px 5px 9px; border-radius: 999px; border: 1px solid var(--vega-line); background: var(--vega-card); color: var(--vega-ink); font-size: 12px; animation: vega-surgir .25s ease-out; }
    .vega-chat-anexo svg { color: var(--vega-blue); flex: none; }
    .vega-chat-anexo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .vega-chat-anexo small { color: var(--vega-ink-3); white-space: nowrap; }
    .vega-chat-anexo.enviando { opacity: .7; }
    .vega-chat-anexo.aviso { border-color: var(--vega-line); }   /* limpo (pedido de 19/09): o aviso fica no title */
    .vega-chat-anexo button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--vega-ink-3); cursor: pointer; }
    .vega-chat-anexo button:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-msg-anexos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    /* O anexo da pessoa como cartão (WhatsApp): fundo mais escuro dentro da bolha azul, Ver e Baixar embaixo. */
    .vega-msg-cartao-anexo { min-width: 260px; max-width: 420px; border-radius: 12px; background: rgba(11, 18, 32, .22); overflow: hidden; }
    .vega-msg-cartao-anexo-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
    .vega-msg-cartao-anexo-topo .vega-icone-arquivo { flex: none; }
    .vega-msg-cartao-anexo-topo .vega-icone-arquivo path { stroke: #fff; }
    .vega-msg-cartao-anexo-topo .vega-icone-arquivo text { fill: #fff; }
    .vega-msg-cartao-anexo-nome { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
    .vega-msg-cartao-anexo-nome b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vega-msg-cartao-anexo-nome small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }
    .vega-msg-cartao-anexo-acoes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .18); }
    .vega-msg-cartao-anexo-acoes > * { display: block; padding: 8px 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s; }
    .vega-msg-cartao-anexo-acoes > * + * { border-left: 1px solid rgba(255, 255, 255, .18); }
    .vega-msg-cartao-anexo-acoes > *:hover { background: rgba(255, 255, 255, .12); }
    .vega-msg-anexo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 12px; border: 0; color: inherit; font-family: inherit; }
    button.vega-msg-anexo { cursor: pointer; transition: background .15s, transform .15s; }
    button.vega-msg-anexo:hover { background: rgba(255, 255, 255, .3); transform: translateY(-1px); }
    /* O visor de anexo: cabeçalho com o tipo, o documento, e os dois botões. */
    /* ---- Minha conta (perfil e segurança) ---- */
    .vega-conta { display: flex; flex-direction: column; gap: 16px; }
    .vega-conta [hidden] { display: none !important; }   /* o display dos botões/painéis não pode vencer o hidden */
    /* Mini sidebar + painel (o mesmo desenho do diálogo Personalizar o VEGA). */
    /* A tela inteira: o sidebar vai do topo ao pé (o resumo encosta embaixo) e o painel ocupa o resto. */
    .vega-conta-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: stretch; min-height: calc(100vh - 150px); }
    .vega-conta-nav { position: sticky; top: 76px; align-self: start; height: calc(100vh - 150px); display: flex; flex-direction: column; gap: 14px; padding: 18px 12px 12px; border-radius: 16px; border: 1px solid var(--vega-line); background: color-mix(in srgb, var(--vega-ink) 3%, var(--vega-card)); }
    .vega-conta-nav .vega-conta-resumo { margin-top: auto; }
    .vega-conta-nav-marca { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
    .vega-conta-nav-icone { display: inline-flex; color: var(--vega-blue); }
    .vega-conta-nav-marca h1 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.15; color: var(--vega-ink); letter-spacing: -.01em; }
    .vega-conta-nav-marca p { margin: 0; font-size: 12px; color: var(--vega-ink-3); line-height: 1.4; }
    .vega-conta-menu { display: flex; flex-direction: column; gap: 2px; }
    .vega-conta-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--vega-ink-2); cursor: pointer; text-align: left; transition: background .15s, color .15s; }
    .vega-conta-menu-item:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-conta-menu-item.ativo { background: color-mix(in srgb, var(--vega-blue) 12%, var(--vega-card)); color: var(--vega-blue-texto); }
    .vega-conta-resumo { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--vega-card); border: 1px solid var(--vega-line); }
    .vega-conta-resumo-titulo { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; font-weight: 700; color: var(--vega-ink-2); }
    .vega-conta-resumo-titulo svg { color: var(--vega-blue); }
    .vega-conta-main { min-width: 0; display: flex; flex-direction: column; }
    .vega-conta-painel { display: flex; flex-direction: column; gap: 16px; }
    .vega-conta-painel[hidden] { display: none; }
    .vega-conta-painel-cabeca h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--vega-ink); letter-spacing: -.01em; }
    .vega-conta-painel-cabeca p { margin: 3px 0 0; font-size: 13px; color: var(--vega-ink-3); }
    .vega-conta-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .vega-conta-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
    .vega-conta-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--vega-ink-3); max-width: 720px; }
    .vega-conta-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
    .vega-conta-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .vega-conta-secao { margin: 8px 0 -6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vega-ink-3); }
    .vega-conta-card { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
    .vega-conta-card-cabeca { display: flex; align-items: center; gap: 8px; }
    .vega-conta-card-cabeca svg { color: var(--vega-blue); flex: none; }
    .vega-conta-card-cabeca h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--vega-ink); }
    .vega-conta-foto { display: flex; align-items: center; gap: 18px; }
    .vega-conta-avatar { flex: none; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--vega-blue) 12%, var(--vega-card)); color: var(--vega-blue-texto); font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
    .vega-conta-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .vega-conta-foto-acoes { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .vega-conta-foto-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
    .vega-conta-foto-botoes .vega-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; }
    .vega-conta-ajuda { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--vega-ink-3); }
    .vega-conta-foto-estado { margin: 0; font-size: 12.5px; color: var(--vega-green, #0fa968); font-weight: 600; }
    .vega-conta-foto-estado.erro { color: var(--vega-chip-red-fg); }
    .vega-conta-form { display: flex; flex-direction: column; gap: 6px; }
    .vega-conta-form .vega-label { margin-top: 4px; }
    .vega-conta-form-pe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
    .vega-conta-form-pe .vega-btn { padding: 8px 14px; font-size: 13.5px; }
    .vega-conta-erro { margin: 2px 0 0; font-size: 12.5px; color: var(--vega-chip-red-fg); }
    .vega-conta-email { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-top: 1px solid var(--vega-line); }
    .vega-conta-email .vega-btn { flex: none; padding: 7px 12px; font-size: 13px; }
    .vega-conta-valor { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; color: var(--vega-ink); }
    .vega-conta-pendente { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--vega-line); background: color-mix(in srgb, var(--vega-blue) 5%, var(--vega-card)); font-size: 12.5px; color: var(--vega-ink-2); }
    .vega-conta-pendente b { color: var(--vega-ink); }
    .vega-conta-pendente-acoes { display: flex; gap: 12px; margin-top: 4px; }
    .vega-conta-pendente-acoes form { margin: 0; }
    .vega-conta-pendente-acoes button { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; }
    .vega-conta-leitura { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--vega-line); }
    .vega-conta-leitura dt { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vega-ink-3); }
    .vega-conta-leitura dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--vega-ink); }
    .vega-conta-resumo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
    .vega-conta-resumo-lista li { display: flex; align-items: flex-start; gap: 10px; }
    .vega-conta-resumo-lista li > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .vega-conta-resumo-lista b { font-size: 12.5px; color: var(--vega-ink); }
    .vega-conta-resumo-lista small { font-size: 11.5px; color: var(--vega-ink-3); line-height: 1.35; }
    .vega-conta-resumo-icone { display: inline-flex; flex: none; margin-top: 2px; color: var(--vega-ink-3); }
    .vega-conta-resumo-icone.ok { color: var(--vega-green, #0fa968); }
    .vega-conta-resumo-icone.atencao { color: var(--vega-chip-amber-fg); }
    .vega-conta-resumo-links { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; border-top: 1px solid var(--vega-line); font-size: 12px; font-weight: 700; }
    .vega-conta-resumo-links a { display: inline-flex; align-items: center; gap: 4px; }
    .vega-conta-senha-campo { position: relative; display: flex; }
    .vega-conta-senha-campo .vega-input { padding-right: 38px; }
    .vega-conta-senha-campo button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--vega-ink-3); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; }
    .vega-conta-senha-campo button:hover { color: var(--vega-ink); background: var(--vega-hover); }
    .vega-conta-requisitos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-conta-requisitos li::before { content: '○'; display: inline-block; width: 16px; color: var(--vega-ink-3); }
    .vega-conta-requisitos li.ok { color: var(--vega-green, #0fa968); }
    .vega-conta-requisitos li.ok::before { content: '✓'; color: var(--vega-green, #0fa968); }
    .vega-conta-requisitos li.fixo::before { content: '•'; }
    .vega-conta-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
    .vega-conta-botoes .vega-btn { padding: 7px 12px; font-size: 13px; }
    .vega-conta-codigos { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--vega-green, #0fa968) 50%, var(--vega-line)); font-size: 12.5px; color: var(--vega-ink-2); }
    .vega-conta-codigos b { color: var(--vega-ink); }
    .vega-conta-codigos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 4px 0; }
    .vega-conta-codigos-lista code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: var(--vega-ink); }
    .vega-conta-codigos .vega-btn { align-self: flex-start; padding: 6px 10px; font-size: 12.5px; }
    .vega-conta-sessao { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--vega-line); }
    .vega-conta-sessao:last-of-type { border-bottom: 0; }
    .vega-conta-sessao-icone { display: inline-flex; flex: none; color: var(--vega-ink-3); }
    .vega-conta-sessao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .vega-conta-sessao-texto b { font-size: 13.5px; color: var(--vega-ink); }
    .vega-conta-sessao-texto small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-conta-sessao form { margin: 0; }
    .vega-conta-botao-mini { padding: 5px 10px; font-size: 12.5px; }
    .vega-conta-atividade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; }
    .vega-conta-atividade li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--vega-line); }
    .vega-conta-atividade-quando { flex: none; width: 74px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--vega-ink-3); padding-top: 2px; }
    .vega-conta-atividade-texto { display: flex; flex-direction: column; min-width: 0; }
    .vega-conta-atividade-texto b { font-size: 13px; color: var(--vega-ink); }
    .vega-conta-atividade-texto small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-conta-perigo { border-color: color-mix(in srgb, var(--vega-chip-red-fg) 35%, var(--vega-line)); }
    .vega-conta-perigo .vega-conta-card-cabeca svg { color: var(--vega-chip-red-fg); }
    .vega-conta-btn-perigo { color: var(--vega-chip-red-fg) !important; border-color: color-mix(in srgb, var(--vega-chip-red-fg) 45%, var(--vega-line)) !important; background: var(--vega-card) !important; }
    .vega-conta-btn-perigo:hover { background: var(--vega-chip-red-bg) !important; }
    @media (max-width: 1000px) { .vega-conta-tres, .vega-conta-duas { grid-template-columns: 1fr; } .vega-conta-atividade { grid-template-columns: 1fr; } }
    @media (max-width: 860px) { .vega-conta-layout { grid-template-columns: 1fr; min-height: 0; } .vega-conta-nav { position: static; height: auto; } .vega-conta-menu { flex-direction: row; flex-wrap: wrap; } .vega-conta-nav-marca { display: none; } }
    @media (max-width: 760px) { .vega-conta-grade { grid-template-columns: 1fr; } .vega-conta-leitura { grid-template-columns: 1fr; } .vega-conta-email { flex-direction: column; } }

    /* ---- Configurações do VEGA (diálogo com navegação à esquerda) ---- */
    /* `.vega-personalizar` (não `.vega-config`: essa classe é da tela Configurações e o diálogo a escondia inteira, 20/09). */
    .vega-personalizar { max-width: 900px; width: 94vw; height: min(680px, 90vh); max-height: 90vh; padding: 0; overflow: hidden; }
    .vega-personalizar:not([open]) { display: none; }
    /* Sem blur no fundo: era o que deixava a abertura pesada. */
    .vega-personalizar::backdrop { background: rgba(11, 18, 32, .5); backdrop-filter: none; }
    .vega-personalizar[open] { animation-duration: .16s; }
    .vega-config-form { display: grid; grid-template-columns: 218px minmax(0, 1fr); height: 100%; margin: 0; }
    .vega-config-nav { display: flex; flex-direction: column; gap: 16px; padding: 22px 14px 14px; background: color-mix(in srgb, var(--vega-ink) 3%, var(--vega-card)); border-right: 1px solid var(--vega-line); min-height: 0; }
    .vega-config-marca { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
    .vega-config-marca-icone { display: inline-flex; color: var(--vega-blue); }
    .vega-config-marca h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.15; color: var(--vega-ink); letter-spacing: -.01em; }
    .vega-config-marca p { margin: 0; font-size: 12px; color: var(--vega-ink-3); line-height: 1.4; }
    .vega-config-menu { display: flex; flex-direction: column; gap: 2px; }
    .vega-config-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--vega-ink-2); cursor: pointer; text-align: left; transition: background .15s, color .15s; }
    .vega-config-menu-item:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-config-menu-item.ativo { background: color-mix(in srgb, var(--vega-blue) 12%, var(--vega-card)); color: var(--vega-blue-texto); }
    .vega-config-dica { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--vega-card); border: 1px solid var(--vega-line); font-size: 11.5px; color: var(--vega-ink-3); line-height: 1.45; }
    .vega-config-dica-titulo { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--vega-ink-2); margin-bottom: 4px; }
    .vega-config-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
    .vega-config-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--vega-line); }
    .vega-config-cabeca h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--vega-ink); }
    .vega-config-cabeca p { margin: 2px 0 0; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-perfil-fechar { display: inline-flex; border: 0; background: none; color: var(--vega-ink-3); cursor: pointer; padding: 6px; border-radius: 8px; }
    .vega-perfil-fechar:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-config-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 22px 18px; scroll-behavior: smooth; }
    .vega-config-corpo > [data-secao] { scroll-margin-top: 6px; }
    .vega-config-bloco { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--vega-line); }
    .vega-config-corpo > [data-secao]:last-child .vega-config-bloco:last-child { border-bottom: 0; }
    .vega-config-bloco-cabeca { display: flex; align-items: flex-start; gap: 10px; }
    .vega-config-bloco-cabeca h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--vega-ink); }
    .vega-config-bloco-cabeca p { margin: 1px 0 0; font-size: 12px; color: var(--vega-ink-3); }
    /* Ícones sem caixa de fundo (regra da casa): só o traço, na cor da marca. */
    .vega-config-bloco-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; color: var(--vega-blue); }
    .vega-perfil-campo { display: flex; flex-direction: column; gap: 5px; }
    .vega-perfil-rotulo { font-size: 12.5px; font-weight: 700; color: var(--vega-ink-2); }
    .vega-perfil-campo input, .vega-perfil-campo textarea { width: 100%; font: inherit; font-size: 13.5px; color: var(--vega-ink); background: var(--vega-card); border: 1px solid var(--vega-line); border-radius: 10px; padding: 9px 11px; resize: vertical; outline: none; transition: border-color .15s; }
    .vega-perfil-campo input:focus, .vega-perfil-campo textarea:focus { border-color: color-mix(in srgb, var(--vega-blue) 55%, var(--vega-line)); }
    .vega-perfil-campo ::placeholder { color: var(--vega-ink-3); }
    .vega-config-entrada { position: relative; display: flex; align-items: center; color: var(--vega-ink-3); }
    .vega-config-entrada svg { position: absolute; left: 11px; pointer-events: none; }
    .vega-config-entrada input { padding-left: 34px; }
    .vega-config-contador { align-self: flex-end; font-size: 11px; color: var(--vega-ink-3); font-variant-numeric: tabular-nums; }
    .vega-config-caixa { border: 1px solid var(--vega-line); border-radius: 12px; padding: 11px 12px; }
    .vega-perfil-linha { display: flex; align-items: center; gap: 12px; cursor: pointer; }
    div.vega-perfil-linha { cursor: default; }
    .vega-perfil-linha > span:nth-of-type(2), .vega-config-detalhe summary > span:nth-of-type(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .vega-perfil-linha b, .vega-config-detalhe b { font-size: 13.5px; font-weight: 700; color: var(--vega-ink); }
    .vega-perfil-linha small, .vega-config-detalhe small { font-size: 12px; color: var(--vega-ink-3); line-height: 1.4; }
    .vega-config-linha-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; color: var(--vega-blue); }
    .vega-config-detalhe { padding: 0; }
    .vega-config-detalhe summary { display: flex; align-items: center; gap: 12px; padding: 11px 12px; cursor: pointer; list-style: none; }
    .vega-config-detalhe summary::-webkit-details-marker { display: none; }
    .vega-config-chevron { display: inline-flex; color: var(--vega-blue-texto); transition: transform .2s; }
    .vega-config-detalhe[open] .vega-config-chevron { transform: rotate(90deg); }
    .vega-perfil-memorias { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 10px 52px; }
    .vega-perfil-memorias .vega-chat-pref { padding: 4px 0; }
    .vega-perfil-nada { margin: 0; font-size: 12.5px; color: var(--vega-ink-3); }
    .vega-config-botao { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
    .vega-config-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .vega-config-modo input { position: absolute; opacity: 0; pointer-events: none; }
    .vega-config-modo { position: relative; cursor: pointer; }
    .vega-config-modo-caixa { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 11px 12px; border: 1px solid var(--vega-line); border-radius: 12px; transition: border-color .15s, background .15s; }
    .vega-config-modo-caixa b { font-size: 13px; color: var(--vega-ink); }
    .vega-config-modo-caixa small { font-size: 11.5px; color: var(--vega-ink-3); line-height: 1.4; }
    .vega-config-modo input:checked + .vega-config-modo-caixa { border-color: var(--vega-blue); background: color-mix(in srgb, var(--vega-blue) 7%, var(--vega-card)); }
    .vega-config-modo input:focus-visible + .vega-config-modo-caixa { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vega-blue) 20%, transparent); }
    .vega-config-plano { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--vega-line); border-radius: 12px; }
    .vega-config-plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .vega-config-plano-topo b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--vega-ink); }
    .vega-config-plano-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 12.5px; color: var(--vega-ink-2); }
    .vega-config-plano-lista li { display: flex; align-items: center; gap: 6px; }
    .vega-config-plano-lista svg { color: var(--vega-green, #0fa968); flex: none; }
    .vega-config-plano p { margin: 0; font-size: 12.5px; color: var(--vega-ink-3); line-height: 1.45; }
    .vega-config-plano-bloqueado { background: color-mix(in srgb, var(--vega-ink) 2%, var(--vega-card)); }
    .vega-config-plano-bloqueado .vega-config-botao { align-self: flex-start; opacity: .55; cursor: not-allowed; }
    .vega-config-pe { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--vega-line); }
    .vega-config-pe-espaco { flex: 1; }
    @media (max-width: 760px) {
        .vega-personalizar { height: 94vh; max-height: 94vh; }
        .vega-config-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
        .vega-config-nav { flex-direction: row; align-items: center; gap: 6px; padding: 10px 10px 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--vega-line); }
        .vega-config-marca, .vega-config-dica { display: none; }
        .vega-config-menu { flex-direction: row; }
        .vega-config-menu-item { white-space: nowrap; padding: 7px 10px; }
        .vega-config-modos { grid-template-columns: 1fr; }
        .vega-config-plano-lista { grid-template-columns: 1fr; }
    }
    /* Arquivos que o VEGA gerou (create_document): abrir no visor ou baixar. */
    .vega-msg-arquivos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
    .vega-msg-arquivo { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--vega-line); border-radius: 12px; background: var(--vega-card); color: var(--vega-ink); font: inherit; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
    .vega-msg-arquivo:hover { border-color: var(--vega-blue); transform: translateY(-1px); }
    .vega-msg-arquivo svg { flex: none; }
    .vega-msg-arquivo span { display: flex; flex-direction: column; min-width: 0; }
    .vega-msg-arquivo b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vega-msg-arquivo small { font-size: 11px; color: var(--vega-ink-3); letter-spacing: .04em; }
    /* Fontes da busca na web, abaixo da resposta. */
    .vega-msg-web { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
    .vega-msg-web-fonte { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--vega-line); border-radius: 999px; font-size: 12px; color: var(--vega-ink-2); text-decoration: none; transition: border-color .15s, color .15s; }
    .vega-msg-web-fonte:hover { border-color: var(--vega-blue); color: var(--vega-blue-texto); }
    .vega-visor { max-width: min(920px, 96vw); width: 96vw; max-height: 92vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
    .vega-visor:not([open]) { display: none; }
    .vega-visor-cabeca { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--vega-line); }
    /* O ícone do tipo (folha com a sigla), sem caixa de fundo. */
    .vega-visor-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; }
    .vega-visor-icone svg { width: 34px; height: 34px; }
    .vega-msg-anexo .vega-icone-arquivo { flex: none; }
    .vega-msg-anexo .vega-icone-arquivo path { stroke: currentColor; }
    .vega-msg-anexo .vega-icone-arquivo text { fill: currentColor; }
    .vega-visor-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .vega-visor-nome b { font-size: 14px; color: var(--vega-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vega-visor-nome small { font-size: 12px; color: var(--vega-ink-3); }
    .vega-visor-fechar { border: 0; background: transparent; color: var(--vega-ink-3); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
    .vega-visor-fechar:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-visor-corpo { flex: none; height: min(70vh, 720px); background: color-mix(in srgb, var(--vega-ink) 4%, var(--vega-card)); display: flex; align-items: center; justify-content: center; }
    .vega-visor-corpo iframe { width: 100%; height: 100%; border: 0; background: #fff; }
    .vega-visor-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .vega-visor-nada { padding: 32px; color: var(--vega-ink-3); font-size: 14px; }
    .vega-visor-botoes { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--vega-line); }
    .vega-visor-botoes .vega-btn { text-decoration: none; }
    .vega-chat-anexo.paginas small { color: var(--vega-blue-texto); }
    /* A linha de voz (como no ChatGPT): "+" apagado, pontilhado, a onda, × e ✓. */
    .vega-chat-voz { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 2px 4px; animation: vega-surgir .2s ease-out; }
    .vega-chat-voz-mais { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--vega-ink-3); opacity: .5; }
    .vega-onda { flex: 1; min-width: 0; height: 28px; color: var(--vega-ink); }
    .vega-chat-voz-botao { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--vega-ink-2); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
    .vega-chat-voz-botao:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-chat-voz-botao.ok { background: var(--vega-ink); color: var(--vega-card); }
    .vega-chat-voz-botao.ok:hover { transform: scale(1.06); }
    .vega-chat-mais > div { width: 100%; height: 38px; }
    .vega-chat-composer-caixa .vega-redondo { width: 34px; height: 34px; margin: 2px; }
    /* O botão do modo: escudo + rótulo + seta; some enquanto os atalhos do "+" estão abertos. */
    .vega-chat-modo { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--vega-ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .18s, color .18s, opacity .18s, transform .18s; white-space: nowrap; }
    .vega-chat-modo:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-chat-modo.perigo { color: var(--vega-chip-red-fg); }
    .vega-chat-modo.escondido { opacity: 0; pointer-events: none; transform: translateX(8px); }
    .vega-modo-menu { color: var(--vega-ink); z-index: 10020; width: 320px; max-width: calc(100vw - 16px); padding: 8px; border-radius: 14px; border: 1px solid var(--vega-line); background: var(--vega-card); box-shadow: 0 18px 48px rgba(11, 18, 32, .18); animation: vega-menu-abre .16s ease-out; transform-origin: bottom left; }
    .vega-modo-titulo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vega-ink-3); padding: 6px 10px 4px; }
    .vega-modo-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--vega-ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
    .vega-modo-item:hover { background: var(--vega-hover); }
    .vega-modo-item.ativo b { color: var(--vega-blue-texto); }
    .vega-modo-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .vega-modo-item-texto b { font-size: 13.5px; font-weight: 700; color: var(--vega-ink); }
    .vega-modo-item-texto small { font-size: 11.5px; color: var(--vega-ink-3); line-height: 1.3; }
    .vega-modo-item-fim { display: inline-flex; align-items: center; gap: 8px; color: var(--vega-blue); }
    .vega-modo-item-fim kbd { font: inherit; font-size: 11px; color: var(--vega-ink-3); min-width: 18px; text-align: center; border: 1px solid var(--vega-line); border-radius: 5px; padding: 0 4px; }
    .vega-modo-ignorar { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; border-top: 1px solid var(--vega-line); }
    .vega-modo-ignorar.ativo b { color: var(--vega-chip-red-fg); }
    .vega-modo-ativar { flex: none; border: 1px solid var(--vega-line); background: transparent; color: var(--vega-ink-2); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
    .vega-modo-ativar:hover { background: var(--vega-hover); color: var(--vega-ink); }
    .vega-modo-ignorar.ativo .vega-modo-ativar { border-color: color-mix(in srgb, var(--vega-chip-red-fg) 50%, var(--vega-line)); color: var(--vega-chip-red-fg); }
    .vega-modo-dica { font-size: 11px; color: var(--vega-ink-3); padding: 6px 10px 2px; }
    /* Os itens do liquid-gooey nascem em linha (inline-block); aqui ficam
       todos no mesmo ponto e o x/y da biblioteca os espalha. */
    .vega-chat-mais > div > div { position: absolute !important; left: 0; top: 0; }
    .vega-chat-mais > div > div:last-child { z-index: 1; }
    .vega-redondo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--vega-card); color: var(--vega-ink-2); cursor: pointer; transition: color .12s, transform .12s; }
    .vega-redondo:hover { color: var(--vega-blue-texto); }
    .vega-mais-botao svg { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
    .vega-atalho { opacity: 0; pointer-events: none; transition: opacity .2s; }
    .vega-chat-linha.aberto .vega-atalho { opacity: 1; pointer-events: auto; }
    .vega-chat-linha.aberto .vega-mais-botao svg { transform: rotate(45deg); }
    .vega-chat-mic-erro { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); z-index: 3; animation: vega-surgir .25s ease-out; font-size: 12px; color: var(--vega-chip-red-fg); background: var(--vega-card); border: 1px solid var(--vega-line); border-radius: 8px; padding: 6px 10px; }
    .vega-chat-boas-titulo { font-size: 26px; font-weight: 800; color: var(--vega-ink); letter-spacing: -.02em; line-height: 1.2; }
    .vega-chat-boas-sub { font-size: 14px; color: var(--vega-ink-2); line-height: 1.5; max-width: 520px; }
    .vega-chat-boas-aviso { font-size: 12.5px; color: var(--vega-amber-texto, var(--vega-chip-amber-fg)); }
    .vega-chat-cartoes[hidden], .vega-chat-sugestoes[hidden] { display: none; }
    .vega-chat-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 24px; }
    .vega-chat-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px; border: 1px solid var(--vega-line); border-radius: 14px; background: var(--vega-card); font: inherit; color: var(--vega-ink); cursor: pointer; transition: border-color .2s, transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .2s; animation: vega-surgir .45s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(.26s + var(--i, 0) * 60ms); }
    .vega-chat-cartao:active { transform: translateY(0) scale(.985); }
    .vega-chat-sugestoes .cp-chip { animation: vega-surgir .4s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(.3s + var(--i, 0) * 45ms); }
    .vega-chat-cartao:hover { border-color: color-mix(in srgb, var(--vega-blue) 55%, var(--vega-line)); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 18, 32, .08); }
    .vega-chat-cartao-icone { display: inline-flex; color: var(--vega-blue); margin-bottom: 6px; }
    .vega-chat-cartao-titulo { font-size: 13.5px; font-weight: 700; }
    .vega-chat-cartao-sub { font-size: 12px; color: var(--vega-ink-3); line-height: 1.35; }
    .vega-chat-sugestoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
    .vega-chat-sugestoes .cp-chip { font-size: 12.5px; padding: 7px 12px; border-radius: 999px; }

    /* ---- A conversa: VEGA sem balão, à esquerda; a pessoa em azul, à direita ---- */
    .vega-chat-mensagens { display: flex; flex-direction: column; gap: 18px; width: 100%; }
    .vega-msg { display: flex; gap: 12px; align-items: flex-start; animation: vega-msg-entra .32s cubic-bezier(.22, .61, .36, 1) both; }
    @keyframes vega-msg-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .vega-msg-user { justify-content: flex-end; }
    .vega-msg-user .vega-msg-balao { max-width: min(72%, 720px); padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--vega-blue); color: #fff; font-size: 14px; line-height: 1.45; }
    /* O orbe centrado na primeira linha do texto (14.5px × 1.6 = 23px de
       linha, com 2px de folga em cima): 27px de altura, sem margem. */
    .vega-msg-avatar { display: none; }
    .vega-orb-mini { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffff 0%, #dbe6ff 12%, #9dbaff 34%, #4f83ff 60%, #1645b8 100%); box-shadow: 0 4px 12px rgba(37, 99, 255, .35), inset -3px -4px 8px rgba(11, 18, 32, .18); }
    .vega-msg-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .vega-msg-texto { color: var(--vega-ink); font-size: 14.5px; line-height: 1.6; padding-top: 2px; }
    .vega-md p { margin: 0 0 10px; }
    .vega-md p:last-child { margin-bottom: 0; }
    .vega-md ul, .vega-md ol { margin: 0 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
    .vega-md ul { list-style: disc; }
    .vega-md ol { list-style: decimal; }
    .vega-md a { color: var(--vega-blue-texto); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--vega-blue) 40%, transparent); }
    .vega-md a:hover { text-decoration-color: currentColor; }
    .vega-md code { font-family: var(--vega-mono); font-size: 12.5px; background: color-mix(in srgb, var(--vega-ink) 6%, var(--vega-card)); padding: 1px 5px; border-radius: 5px; }
    .vega-md strong { font-weight: 700; }
    .vega-msg-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 22px; }
    .vega-fb { display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .15s; }
    .vega-msg:hover .vega-fb, .vega-fb.vega-fb-positivo, .vega-fb.vega-fb-negativo, .vega-fb:focus-within { opacity: 1; }
    .vega-fb-pergunta { font-size: 11.5px; color: var(--vega-ink-3); margin-right: 4px; }
    .vega-fb-botao { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--vega-ink-3); cursor: pointer; transition: color .15s, background .15s, transform .15s; }
    .vega-fb-botao:hover { color: var(--vega-ink); background: var(--vega-hover); }
    .vega-fb-botao.marcado { color: var(--vega-blue); transform: scale(1.1); }
    .vega-fb-negativo .vega-fb-botao.marcado { color: var(--vega-chip-red-fg); }
    .vega-fb-motivos { display: inline-flex; flex-wrap: wrap; gap: 6px; width: 100%; animation: vega-surgir .25s ease-out; }
    .vega-fb-motivos[hidden] { display: none !important; }
    .vega-fb-motivo { font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid var(--vega-line); border-radius: 999px; background: var(--vega-card); color: var(--vega-ink-2); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
    .vega-fb-motivo:hover, .vega-fb-motivo.marcado { border-color: var(--vega-blue); color: var(--vega-blue-texto); background: var(--vega-blue-soft); }
    /* O cartão de uma ação preparada pelo VEGA: nada acontece até o clique. */
    .vega-cacao { position: relative; max-width: 420px; margin-top: 4px; padding: 18px 18px 16px; border: 1px solid var(--vega-line); border-radius: 16px; background: var(--vega-card); box-shadow: 0 8px 24px rgba(11, 18, 32, .06); display: flex; flex-direction: column; gap: 12px; animation: vega-surgir .35s cubic-bezier(.22, .61, .36, 1) .1s both; transition: border-color .25s, background .25s, opacity .25s; }
    .vega-cacao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .vega-cacao-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .vega-cacao-sub { font-size: 12.5px; color: var(--vega-ink-3); line-height: 1.4; }
    .vega-cacao-ilustra { flex: none; width: 104px; height: 88px; }
    .vega-cacao-linhas > div { display: contents; }
    .vega-cacao-linhas dt { display: inline-flex; align-items: center; gap: 8px; }
    .vega-cacao-linhas dt svg { color: var(--vega-ink-3); flex: none; }
    .vega-cacao-ver { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: var(--vega-blue-soft); color: var(--vega-blue-texto); font-size: 13px; font-weight: 700; text-decoration: none; transition: filter .15s, transform .15s; }
    .vega-cacao-ver:hover { filter: brightness(.97); transform: translateY(-1px); }
    .vega-cacao.enviando { opacity: .6; }
    .vega-cacao-aviso { font-size: 11.5px; color: var(--vega-ink-3); }
    .vega-cacao-titulo { font-size: 16px; font-weight: 800; color: var(--vega-ink); letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
    .vega-cacao-linhas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13px; }
    .vega-cacao-linhas > div { display: contents; }
    .vega-cacao-linhas dt { color: var(--vega-ink-3); }
    .vega-cacao-linhas dd { margin: 0; color: var(--vega-ink); font-weight: 600; }
    .vega-cacao-botoes { display: flex; gap: 8px; margin-top: 2px; }
    .vega-cacao-botoes[hidden] { display: none !important; }
    .vega-cacao-campo { width: 100%; min-width: 220px; font: inherit; font-size: 13px; line-height: 1.4; padding: 6px 8px; border: 1px solid var(--vega-blue); border-radius: 8px; background: var(--vega-card); color: var(--vega-ink); resize: vertical; outline: none; }
    .vega-cacao.editando .vega-cacao-linhas dd { font-weight: 500; }
    .vega-cacao-botoes .vega-btn { padding: 7px 14px; font-size: 13px; }
    .vega-cacao-nota { font-size: 11.5px; color: var(--vega-ink-3); }
    .vega-cacao-ver { font-size: 13px; font-weight: 600; }
    .vega-cacao-recusada { opacity: .75; }
    .vega-cacao-falhou { border-color: color-mix(in srgb, var(--vega-chip-red-fg) 40%, var(--vega-line)); }
    .vega-msg-fontes { font-size: 11px; color: var(--vega-ink-3); }
    .vega-msg-ouvir { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--vega-ink-3); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s; }
    .vega-msg:hover .vega-msg-ouvir, .vega-msg-ouvir.falando { opacity: 1; }
    .vega-msg-ouvir:hover { color: var(--vega-blue-texto); background: var(--vega-hover); }
    .vega-msg-ouvir.falando { color: var(--vega-blue); animation: vega-status-pulsa 1s infinite; }
    .vega-msg-aviso { font-size: 12px; color: var(--vega-amber-texto, var(--vega-chip-amber-fg)); padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--vega-chip-amber-fg) 8%, var(--vega-card)); }

    /* ---- Status: "thinking orbs" + a etapa, que troca conforme a ação ---- */
    .vega-status { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: 13.5px; color: var(--vega-ink-2); }
    .vega-status-orbs { display: inline-flex; gap: 4px; }
    .vega-status-orbs i { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #7fa6ff 40%, #2563ff 80%); box-shadow: 0 0 8px rgba(37, 99, 255, .5); animation: vega-status-orb 1.1s infinite ease-in-out; }
    .vega-status-orbs i:nth-child(2) { animation-delay: .18s; }
    .vega-status-orbs i:nth-child(3) { animation-delay: .36s; }
    @keyframes vega-status-orb { 0%, 100% { transform: translateY(0) scale(.85); opacity: .55; } 50% { transform: translateY(-4px) scale(1.1); opacity: 1; } }
    .vega-status-texto { animation: vega-status-pulsa 1.6s infinite ease-in-out; }
    .vega-status-texto.troca { animation: vega-status-troca .3s ease-out, vega-status-pulsa 1.6s .3s infinite ease-in-out; }
    @keyframes vega-status-pulsa { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
    @keyframes vega-status-troca { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    #vega-pensando[data-etapa="consultando"] .vega-status-orbs i { background: radial-gradient(circle at 35% 30%, #fff, #7fe0b3 40%, #0fa968 80%); box-shadow: 0 0 8px rgba(15, 169, 104, .5); }
    #vega-pensando[data-etapa="analisando"] .vega-status-orbs i { background: radial-gradient(circle at 35% 30%, #fff, #c4a7ff 40%, #7c3aed 80%); box-shadow: 0 0 8px rgba(124, 58, 237, .5); }

    /* ---- Campo: borda animada ("border beam") enquanto trabalha, microfone com brilho ---- */
    .vega-chat-pe { padding: 10px 28px 12px; }
    @property --vega-beam-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    .vega-chat-composer { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px 8px 10px; border: 1px solid var(--vega-line); border-radius: 16px; background: var(--vega-card); margin: 0; transition: border-color .15s, box-shadow .15s; }
    /* Ao focar, o campo não muda de cor (pedido de 19/09): a borda fica a mesma linha. */
    .vega-chat-composer:focus-within { border-color: var(--vega-line); box-shadow: none; }
    .vega-beam::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--vega-beam-ang), transparent 0 62%, #2563ff 78%, #7c3aed 88%, transparent 100%); -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; opacity: 0; pointer-events: none; transition: opacity .3s; }
    .vega-beam.trabalhando::before { opacity: 1; animation: vega-beam-gira 2.4s linear infinite; }
    @keyframes vega-beam-gira { to { --vega-beam-ang: 360deg; } }
    .vega-chat-entrada { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; font: inherit; font-size: 14px; line-height: 1.45; color: var(--vega-ink); padding: 12px 6px; min-height: 58px; max-height: 220px; outline: none; }
    .vega-chat-entrada::placeholder { color: var(--vega-ink-3); }
    .vega-chat-mic { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--vega-ink-2); cursor: pointer; transition: color .12s, background .12s; }
    .vega-chat-mic:hover { background: var(--vega-hover); color: var(--vega-blue-texto); }
    .vega-chat-mic.indisponivel { color: var(--vega-ink-3); cursor: not-allowed; }
    .vega-chat-mic.ouvindo { color: #fff; background: var(--vega-blue); animation: vega-voz 1.4s infinite; }
    .vega-chat-mic.ouvindo::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--vega-blue) 60%, transparent); animation: vega-voz-anel 1.4s infinite; }
    @keyframes vega-voz { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 255, .45); } 50% { box-shadow: 0 0 0 10px rgba(37, 99, 255, 0); } }
    @keyframes vega-voz-anel { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
    .vega-chat-enviar { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--vega-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s, background .12s; }
    .vega-chat-enviar:hover { transform: scale(1.05); }
    .vega-chat-enviar:disabled { opacity: .5; }
    .vega-chat-rodape-nota { font-size: 11px; color: var(--vega-ink-3); text-align: center; padding: 8px 16px 0; }
    .cp-botao-form, .cp-insight-form { margin: 0; display: inline-flex; }
    .cp-chip { text-align: left; padding: 9px 12px; border: 1px solid var(--vega-line); border-radius: 12px; background: var(--vega-card); color: var(--vega-ink); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .12s, transform .12s; }
    .cp-chip:hover { border-color: var(--vega-blue); color: var(--vega-blue-texto); transform: translateY(-1px); }
    .cp-botao { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .cp-botao svg { color: var(--vega-blue); }
    .vega-chat-cabeca-acoes .vega-btn, .vega-chat-novo, .vega-chat-enviar, .vega-chat-mic, .vega-msg-ouvir { transition: background .18s, color .18s, border-color .18s, transform .18s cubic-bezier(.22, .61, .36, 1), opacity .18s, filter .18s; }
    .vega-chat-cabeca-acoes .vega-btn:active, .vega-chat-novo:active { transform: scale(.97); }
    @media (prefers-reduced-motion: reduce) { .vega-orb, .vega-orb::before, .vega-orb::after, .vega-orb-brilho, .vega-status-orbs i, .vega-status-texto, .vega-beam.trabalhando::before, .vega-chat-mic.ouvindo, .vega-chat-mic.ouvindo::after, .vega-msg, .vega-chat-item, .vega-chat-cartao, .vega-chat-sugestoes .cp-chip, .vega-chat-boas-vindas > *, .vega-cacao, .vega-chat-conversa.entrando { animation: none !important; } }
    @media (max-width: 1100px) { .vega-chat-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 900px) {
        .vega-chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 120px); margin: -12px -16px 0; }
        .vega-chat-lista { position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 90vw); z-index: 10011; border-right: 1px solid var(--vega-line); background: var(--vega-card); transform: translateX(-105%); transition: transform .2s cubic-bezier(.22,.61,.36,1); box-shadow: 18px 0 44px rgba(11, 18, 32, .16); }
        .vega-chat-lista.aberta { transform: none; }
        .vega-chat-lista-abrir { display: inline-flex; }
        .vega-chat.lista-minimizada { grid-template-columns: minmax(0, 1fr); }
        .vega-chat.lista-minimizada .vega-chat-lista { opacity: 1; pointer-events: auto; padding: 16px 12px 12px; overflow: visible; }
        .vega-chat.primeira-vez { grid-template-columns: minmax(0, 1fr); }
        .vega-chat-primeira { padding: 0 12px; }
        /* No celular o cabeçalho fica (é onde abre a gaveta dos chats). */
        .vega-chat.centrada:not(.primeira-vez) .vega-chat-cabeca { display: flex; }
        .vega-chat-lista-toggle { display: none; }
        .vega-chat-item-menu { opacity: 1; }
        .vega-chat-modo span { display: none; }
        .vega-chat-rolagem { padding: 16px 14px; }
        .vega-chat-pe { padding: 8px 12px 10px; }
        .vega-msg-user .vega-msg-balao { max-width: 88%; }
        .vega-chat-cartoes { grid-template-columns: 1fr; }
        .vega-chat-boas-titulo { font-size: 22px; }
        .vega-orb { width: 96px; height: 96px; }
        .vega-chat-cabeca-acoes .vega-btn { padding: 6px 8px; font-size: 12px; }
    }
    /* Insights proativos no painel */
    .cp-insights { display: flex; flex-direction: column; gap: 8px; }
    .cp-insights[hidden] { display: none !important; }
    .cp-insight { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--vega-chip-amber-fg) 40%, var(--vega-line)); background: color-mix(in srgb, var(--vega-chip-amber-fg) 7%, var(--vega-card)); }
    .cp-insight[hidden] { display: none !important; }
    .cp-insight-icone { flex: none; display: inline-flex; color: var(--vega-amber-texto, var(--vega-chip-amber-fg)); }
    .cp-insight-texto { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--vega-ink); margin: 0; }
    .cp-insight-acao { flex: none; font-size: 12.5px; padding: 6px 11px; }
    .cp-insight-fechar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--vega-ink-3); cursor: pointer; }
    .cp-insight-fechar:hover { background: var(--vega-hover); color: var(--vega-ink); }
    @media (max-width: 640px) {
        .cp-painel { width: 100vw; }
        .cp-insight { flex-wrap: wrap; }
        .cp-insight-texto { flex-basis: calc(100% - 70px); }
        .cp-insight-acao { width: calc(100% - 40px); justify-content: center; }
    }

    /* ---- Celular (≤ 640px): cabeçalhos e filtros em grade, botões cheios ----
       Fica no FIM do arquivo de propósito: as regras base dos mesmos seletores
       vêm antes, e em CSS quem vem depois ganha. 
       Os botões e filtros "espalhados" nas telas estreitas viram uma grade de
       duas colunas com os campos na largura toda; o ícone do cabeçalho fica
       ao lado do título, e as ações descem para uma linha própria. */
    @media (max-width: 640px) {
        .vega-prof-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; }
        .vega-prof-cabeca > div[style*="max-width"] { max-width: none !important; }
        .vega-prof-cabeca-acoes { grid-column: 1 / -1; margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .vega-prof-cabeca-acoes > * { width: 100%; justify-content: center; }
        .vega-prof-cabeca-acoes > details { width: 100%; }
        .vega-prof-cabeca-acoes > details > summary { width: 100%; justify-content: center; display: inline-flex; }
        .vega-prof-filtros, .vega-rel-filtros, .ag-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .vega-prof-filtros > *, .vega-rel-filtros > *, .ag-filtros > * { min-width: 0; }
        .vega-prof-filtros select.vega-input, .vega-rel-filtros select.vega-input, .ag-filtros .vega-input { width: 100% !important; min-width: 0 !important; }
        .vega-prof-filtros > div > .vega-input { width: 100% !important; min-width: 0 !important; }
        .vega-prof-busca, .vega-rel-filtros .vega-periodos, .vega-rel-atualizado, .ag-legenda, .vega-prof-filtros > details, .vega-prof-filtros > .vega-btn, .vega-prof-filtros > button { grid-column: 1 / -1; }
        .vega-rel-atualizado { justify-content: center; white-space: normal; text-align: center; }
        .vega-periodos { display: flex; width: 100%; }
        .vega-periodos > a, .vega-periodos > button { flex: 1 1 0; text-align: center; justify-content: center; padding-left: 4px; padding-right: 4px; }
        .ag-topo { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
        .ag-topo-nav { flex-wrap: wrap; }
        .ag-titulo { width: 100%; font-size: 17px; white-space: normal; }
        /* Em 360px o título da data e os botões "Perguntar sobre a agenda" e
           "Lista de espera" não quebravam linha e empurravam a barra 11px
           para fora da tela. */
        .ag-topo > *, .ag-topo-acoes > * { min-width: 0; }
        .ag-topo-acoes > .vega-btn, .ag-topo-acoes > a, .ag-topo-acoes > details > summary { white-space: normal; text-align: center; line-height: 1.25; }
        /* Mesma ordem do Painel: o VEGA em cima, na largura toda; "Nova
           consulta" (a ação principal) também ocupa a linha. */
        .ag-topo-acoes > .cp-botao { grid-column: 1 / -1; order: -1; }
        .ag-topo-acoes > details.ag-nova-menu { grid-column: 1 / -1; }
        .ag-topo-acoes > details.ag-nova-menu > summary { width: 100%; justify-content: center; }
        .ag-topo-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .ag-topo-acoes .ag-visoes { grid-column: 1 / -1; display: flex; width: 100%; }
        .ag-topo-acoes .ag-visoes > * { flex: 1 1 0; text-align: center; }
        .ag-topo-acoes > .vega-btn, .ag-topo-acoes > form, .ag-topo-acoes > form > .vega-btn { width: 100%; justify-content: center; display: inline-flex; }
        .ag-topo-acoes > form:last-child, .ag-topo-acoes > .vega-btn:not(.vega-btn-ghost) { grid-column: 1 / -1; }
        .ag-filtros .ag-campo { width: 100%; }
        .ag-filtros .ag-campo:last-child { grid-column: 1 / -1; }
        .ag-campo .vega-input { min-width: 0 !important; width: 100% !important; }
        .vega-pac-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
        .vega-pac-acoes > *, .vega-pac-acoes > details > summary { width: 100%; justify-content: center; display: inline-flex; }
        .vega-ficha-cabeca { flex-direction: column; }
        .vega-ind-topo { flex-wrap: wrap; }
        .vega-ind-topo > .vega-chip { order: 3; }
        .vega-ind-bloco-valor, .vega-indicadores-azul .vega-ind-bloco .vega-stat { font-size: 16px; }

        /* Tabela vira cartões "resumo + detalhes" (partials/tabela-movel). */
        table.vega-table[data-movel="pronta"] { display: none; }
        .vega-tcards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
        .vega-tcard { border: 1px solid var(--vega-line); border-radius: 14px; background: var(--vega-card); overflow: hidden; }
        .vega-tcard-topo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
        /* overflow-wrap: nome de uma palavra só, maior que o espaço, quebra em vez de passar por cima do selo. */
        .vega-tcard-quem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
        .vega-tcard-quem .vega-prof-pessoa, .vega-tcard-quem .vega-auto-nome, .vega-tcard-quem .vega-auto-linha-nome { max-width: none; }
        /* Selo longo ("sem acesso, defina o cargo") quebra em linhas em vez de empurrar o nome. */
        .vega-tcard-estado { flex: 0 1 auto; max-width: 48%; white-space: normal; text-align: center; }
        .vega-tcard-seta { flex: none; display: inline-flex; color: var(--vega-ink-3); transition: transform .15s; }
        .vega-tcard-topo[aria-expanded="true"] .vega-tcard-seta { transform: rotate(180deg); }
        .vega-tcard-topo[aria-expanded="true"] { border-bottom: 1px solid var(--vega-line); }
        .vega-tcard-detalhes { padding: 4px 14px 14px; }
        .vega-tcard-detalhes dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); margin: 0; }
        .vega-tcard-detalhes dt, .vega-tcard-detalhes dd { padding: 9px 0; border-bottom: 1px solid var(--vega-line); margin: 0; font-size: 13px; min-width: 0; }
        .vega-tcard-detalhes dt { display: flex; align-items: center; gap: 8px; color: var(--vega-ink-3); }
        .vega-tcard-detalhes dt svg { flex: none; }
        .vega-tcard-detalhes dd { color: var(--vega-ink); text-align: right; overflow-wrap: anywhere; }
        .vega-tcard-detalhes dd .vega-prof-sub, .vega-tcard-detalhes dd small { white-space: normal; }
        .vega-tcard-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
        .vega-tcard-acoes > * { flex: 1 1 auto; min-width: 44px; }
        .vega-tcard-acoes > details { flex: 0 0 44px; }
        .vega-tcard-acoes > span { display: flex; gap: 8px; width: 100%; }
        .vega-tcard-acoes > span > a { flex: 1; }
        .vega-tcard-acoes .vega-pac-acao { width: 100%; height: 38px; }
        .vega-tcard-acoes .vega-menu-botao { width: 44px; height: 38px; flex: none; }
        .vega-tcard-acoes details.vega-menu { position: relative; }
        .vega-tcard-acoes .vega-menu-lista { left: 0; right: 0; }
        .vega-tcards-vazio { padding: 24px 12px; text-align: center; font-size: 13px; color: var(--vega-ink-3); }
    }
    @media (min-width: 641px) { .vega-tcards { display: none !important; } }

    /* Celular: o seletor de faixa ocupa a linha inteira do cabeçalho e rola
       de lado, em vez de quebrar em três linhas dentro da grade de botões. */
    @media (max-width: 640px) {
        .vega-prof-cabeca-acoes .vega-periodos { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; width: 100%; justify-content: flex-start; }
        /* Cabem na linha: dividem a largura (como nos filtros de Relatórios);
           não cabem: rolam de lado, sem espremer. */
        .vega-prof-cabeca-acoes .vega-periodos .vega-periodo { flex: 1 0 auto; width: auto; text-align: center; }
    }

    /* ---- Barra de filtros e ações no celular (auditoria de 24/09/2026) ----
       Um padrão só para toda barra de topo com filtros e botões: o Painel, o
       Financeiro e qualquer tela que use `vega-barra` ou o cabeçalho
       `vega-prof-cabeca-acoes`. Antes cada tela resolvia o celular do seu
       jeito e o Painel não resolvia: os controles quebravam linha onde dava,
       cada um com uma largura, e sobrava botão sozinho no canto.

       No celular a barra vira uma grade de duas colunas, na ordem da
       referência: o botão do VEGA em cima, o período logo abaixo, os
       filtros na largura toda e os botões de ação lado a lado. Botão que
       ficaria sozinho numa coluna ocupa a linha (`vega-barra-cheia` ou filho
       único). No desktop nada muda. */
    @media (max-width: 640px) {
        .vega-barra { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 100% !important; }
        .vega-barra > *, .vega-prof-cabeca-acoes > * { min-width: 0; }
        .vega-barra > .vega-btn, .vega-barra > button, .vega-barra > a.vega-btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; }
        .vega-barra > .cp-botao, .vega-prof-cabeca-acoes > .cp-botao { order: -2; }
        .vega-barra > .vega-periodos { order: -1; }
        .vega-barra > .cp-botao, .vega-barra > .vega-periodos, .vega-barra > form, .vega-barra > .vega-chip,
        .vega-barra > .vega-barra-cheia, .vega-prof-cabeca-acoes > .vega-barra-cheia, .vega-prof-filtros > .vega-barra-cheia,
        .vega-barra > :only-child, .vega-prof-cabeca-acoes > :only-child { grid-column: 1 / -1; }
        .vega-barra > form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .vega-barra > form.hidden { display: none; }
        .vega-barra > form > select.vega-input, .vega-barra > form > .vega-input { width: 100% !important; min-width: 0; flex: 1 1 130px; }
        .vega-barra > form > .vega-btn { flex: 1 1 100%; justify-content: center; }
        .vega-barra > .vega-chip { justify-content: center; padding-top: 8px; padding-bottom: 8px; }
        /* Seis faixas ("Hoje" a "1 ano") não cabem numa fila de 360px sem
           rolar ou quebrar torto: viram duas fileiras de três, iguais. */
        .vega-periodos:not(.vega-periodos-mini):has(> :nth-child(6)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .vega-periodos:not(.vega-periodos-mini):has(> :nth-child(6)) > * { width: 100%; }
        /* Item que sobraria sozinho na última linha da grade ocupa a linha
           (Leads: Funil | Exportar e "Adicionar Lead" embaixo, na largura
           toda). Conta só o que divide coluna: modal, script e o seletor de
           período, que já ocupa a linha, ficam fora da conta. */
        .vega-prof-cabeca-acoes > :nth-last-child(1 of :not(dialog, script, template, .vega-periodos, .vega-barra-cheia)):nth-child(odd of :not(dialog, script, template, .vega-periodos, .vega-barra-cheia)) { grid-column: 1 / -1; }

        /* Filtros de Pacientes: busca na linha toda, os seletores dois a dois
           (o último, se sobrar, na linha toda), "Mais filtros" e "Filtrar"
           lado a lado. Origem e Tag só aparecem quando há dado, então a
           conta de colunas muda de clínica para clínica. */
        .vega-pac-filtros > select:nth-last-child(1 of select):nth-child(odd of select) { grid-column: 1 / -1; }
        .vega-pac-filtros > details.vega-menu, .vega-pac-filtros > button.vega-btn { grid-column: auto; }
        .vega-pac-filtros > details > summary { display: flex; width: 100%; justify-content: center; }
        .vega-pac-filtros > button.vega-btn { width: 100%; justify-content: center; }
        .vega-pac-filtros > .vega-prof-limpar { grid-column: 1 / -1; justify-content: center; }
        .vega-pac-filtros .vega-prof-busca { max-width: none; }

        /* Painel Aureon, o mesmo padrão dos filtros das clínicas. Barra das
           listas (Clínicas, Template, Log): busca na linha toda, "Filtros" e
           "Ordenar por" lado a lado, a contagem de marcadas numa linha só.
           Antes "Filtros" ficava sozinho à direita e o "Ordenar" cortado na
           linha de baixo. */
        .vega-painel-barra > details.vega-menu { grid-column: auto; margin-left: 0; }
        .vega-painel-barra > details > summary { display: flex; width: 100%; justify-content: center; }
        .vega-painel-barra > .vega-painel-selecao { grid-column: 1 / -1; margin-left: 0; justify-content: space-between; }
        .vega-painel-selecao .vega-chip { white-space: nowrap; }
        /* Seletor de clínica do cabeçalho (Uso do VEGA, Saúde): a linha toda,
           como os seletores do CRM, em vez de estreito e no meio. */
        .vega-prof-cabeca-acoes > .vega-painel-seletor { grid-column: 1 / -1; justify-content: flex-start; }
        .vega-painel-seletor .vega-input { flex: 1 1 auto; width: 100%; min-width: 0; }
        /* Template: o ícone do "Aplicar" fica junto do texto. */
        .vega-painel-aplicar .vega-btn > span { flex: 0 1 auto; text-align: center; }

        /* Cabeçalho de título + barra: a barra desce para a linha toda. */
        .vega-topo-barra { flex-direction: column; align-items: stretch; }
        .vega-topo-barra > .cp-botao { justify-content: center; }
        /* O rodapé "Vega CRM · Sistema Operacional..." ficava fixo no pé da
           tela e, em duas linhas, tapava conteúdo em toda página. No celular
           ele vai para o fim da página, depois do conteúdo. */
        .vega-rodape-fixo { position: static; margin-top: auto; }
        #app .vega-content-pad { padding-bottom: 20px; }
        /* Telas de altura cheia (WhatsApp e chat do VEGA) se medem pela
           janela: o rodapé embaixo delas só empurrava a caixa de digitar
           para fora da tela. */
        body:has(.wa-shell, .vega-chat) .vega-rodape-fixo { display: none; }
    }