/* =============================================================================
   visual-crm.css — o ERP no desenho do CRM novo (crm-v2) · 21/10/2026
   Clínica Dr. Reges Jr. · pacote erp-visual-crm
   -----------------------------------------------------------------------------
   GERADO por scripts/gerar-visual-crm.mjs a partir de fonte/visual-crm.fonte.css
   e das folhas de produção. Não edite à mão: edite a fonte e rode o gerador.

   Pedido do dono (21/10/2026): "use como base o layout do novo CRM … e modifique
   todo o sistema ERP, mantendo as cores, formas, modo escuro/modo claro, fontes,
   e funcionalidades … Em especial, deixe o menu lateral do ERP igual ao do CRM".
   Referência: crm-v2/apps/web/src/app/globals.css (tokens), components/shell/
   sidebar.tsx, page-header.tsx, mobile-nav.tsx, ui/*.tsx e public/public-shell.tsx.

   POR QUE ESTA FOLHA É A ÚLTIMA E MORA FORA DE /css/
   A camada clara do ERP (css/tema-claro*.css) é GERADA das folhas de /css/ por
   tema-claro-escuro/scripts/gerar-tema-claro.mjs, que só lê <link> de "/css/".
   Esta folha já traz OS DOIS TEMAS escritos com os valores do CRM, então NÃO pode
   passar pelo gerador (ganharia contrapartes "claras" de regras que já são do
   claro). Ela entra DEPOIS do tema-claro*.css e casa ou supera a especificidade
   das regras que substitui:
     · estrutura (menu, topo, entrada, login): prefixo `html[data-tema] #app`,
       `#landing`, `#login-modal` — o ERP é dono dessas peças;
     · componentes (botão, campo, cartão, tabela, aba, selo, janela, aviso): o par
       `:where(html:not(.tema-claro)) body X` / `html.tema-claro body X` = a
       especificidade da regra base X (+ `html`), e não mais: as regras próprias de
       cada módulo (`.fin-modulo .card`, `#fin-cards .card`…) continuam vencendo
       NOS DOIS TEMAS — o desenho de cada módulo fica;
     · variáveis dos módulos (vidro, desfoque, sombra, canto, texto, fio, fonte):
       `html[data-tema] <seletor que as declara>` — mesma especificidade da
       contraparte clara, e vence por vir depois. As derivadas do claro
       (`--x--texto`, `--x--fundo`…) recebem o mesmo valor, menos `--x--bordaforte`
       (contorno de controle com contraste 3:1 no claro, decisão da camada clara).
   Ouro, caramelo, liga, preto e cores de estado dos módulos NÃO são trocados.

   FORMAS: cantos iguais e suaves (4/6/8/12/14 px) — regra do dono de 02/10/2026.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS DO CRM (crm-v2 globals.css) — escuro é o padrão, como lá
   --------------------------------------------------------------------------- */
:root {
  --vc-fonte: "Urbanist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --vc-bg: #050505;
  --vc-surface: #0f0f11;
  --vc-surface-2: #161619;
  --vc-surface-3: #1e1e22;
  --vc-text: #ededf0;
  --vc-text-2: #b6b6bf;
  --vc-text-3: #8a8a95;
  --vc-border: rgba(212, 163, 115, 0.18);
  --vc-border-strong: rgba(212, 163, 115, 0.34);
  /* Borda de CAMPO: o --border-strong do CRM dá 1,9:1 no escuro e 1,5:1 no claro; contorno de
     controle pede 3:1 (WCAG 1.4.11, a régua da camada clara do ERP). Mais forte só nos campos. */
  --vc-campo-borda: rgba(212, 163, 115, 0.6);
  --vc-rim-a: #ffd700;
  --vc-rim-b: #d4a373;
  --vc-gold: #e6c34a;
  --vc-gold-soft: rgba(255, 215, 0, 0.1);
  --vc-primary: #d4af37;
  --vc-primary-hover: #e6c34a;
  --vc-primary-text: #0a0a0a;
  --vc-focus: #ffd700;
  --vc-link: #e6c34a;
  --vc-nav-bg: #000000;
  --vc-nav-surface: #101012;
  --vc-nav-text: #d8d8de;
  --vc-nav-text-2: #8e8e98;
  --vc-nav-active: #ffd700;
  --vc-nav-border: rgba(212, 163, 115, 0.22);
  --vc-success: #34d399;
  --vc-success-soft: rgba(52, 211, 153, 0.14);
  --vc-danger: #f87171;
  --vc-danger-soft: rgba(248, 113, 113, 0.14);
  --vc-warning: #fbbf24;
  --vc-warning-soft: rgba(251, 191, 36, 0.14);
  --vc-info: #7cb3ff;
  --vc-overlay: rgba(0, 0, 0, 0.66);
  --vc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --vc-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 163, 115, 0.16);
  --vc-crest-sombra: none;
  /* Contorno institucional do CRM (utilitário `rim`): ouro no alto/esquerda,
     caramelo embaixo/direita, misturados ao fio neutro. */
  --vc-rim-cima: color-mix(in srgb, var(--vc-rim-a) 38%, var(--vc-border));
  --vc-rim-esq: color-mix(in srgb, var(--vc-rim-a) 30%, var(--vc-border));
  --vc-rim-baixo: color-mix(in srgb, var(--vc-rim-b) 30%, var(--vc-border));
  --vc-rim-dir: color-mix(in srgb, var(--vc-rim-b) 24%, var(--vc-border));
  --vc-rim: var(--vc-rim-cima) var(--vc-rim-dir) var(--vc-rim-baixo) var(--vc-rim-esq);
  --vc-rim-linha: color-mix(in srgb, var(--vc-rim-a) 30%, var(--vc-border));
  /* Botão dourado das páginas públicas (goldButton do CRM = ACESSO EQUIPE). */
  --vc-ouro-acesso: linear-gradient(135deg, #f7dc5c, #d9b062);
  --vc-ouro-acesso-texto: #1a1406;
  /* Medidas do CRM (engenharia reversa do Kommo). */
  --vc-topo: 64px;
  --vc-menu: 240px;
  --vc-menu-recolhido: 64px;
  --vc-r-xs: 4px;
  --vc-r-sm: 6px;
  --vc-r-md: 8px;
  --vc-r-lg: 12px;
  --vc-r-xl: 14px;
}

html.tema-claro {
  --vc-bg: #f5f5f5;
  --vc-surface: #ffffff;
  --vc-surface-2: #f2f3f5;
  --vc-surface-3: #e9eaee;
  --vc-text: #363844;
  --vc-text-2: #5c5f6d;
  /* #868996 do CRM dá 3,5:1 no branco (WCAG pede 4,5): um tom mais escuro, mesmo matiz. */
  --vc-text-3: #62656f;
  --vc-border: #e1e2e7;
  --vc-border-strong: #cfd1d8;
  --vc-campo-borda: #7f828c;
  --vc-rim-a: #cd9d20;
  --vc-rim-b: #cc9b6b;
  --vc-gold: #8a6a0e;
  --vc-gold-soft: rgba(205, 157, 32, 0.12);
  --vc-primary: #7c5e0c;
  --vc-primary-hover: #694f09;
  --vc-primary-text: #ffffff;
  --vc-focus: #97720f;
  --vc-link: #7c5e0c;
  --vc-nav-bg: #ffffff;
  --vc-nav-surface: #f2f3f5;
  --vc-nav-text: #363844;
  --vc-nav-text-2: #5c5f6d;
  --vc-nav-active: #7c5e0c;
  --vc-nav-border: rgba(205, 157, 32, 0.34);
  /* Verde e âmbar do CRM ficam abaixo de 4,5:1 nos selos (fundo suave): um tom mais escuro. */
  --vc-success: #0e7340;
  --vc-success-soft: rgba(19, 138, 75, 0.12);
  --vc-danger: #c62828;
  --vc-danger-soft: rgba(198, 40, 40, 0.1);
  --vc-warning: #935800;
  --vc-warning-soft: rgba(229, 140, 0, 0.14);
  --vc-info: #1f5fbf;
  --vc-overlay: rgba(12, 12, 14, 0.5);
  --vc-shadow-1: 0 1px 2px rgba(18, 20, 28, 0.06), 0 1px 1px rgba(18, 20, 28, 0.04);
  --vc-shadow-2: 0 8px 24px rgba(18, 20, 28, 0.12), 0 2px 6px rgba(18, 20, 28, 0.06);
  --vc-crest-sombra: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* ---------------------------------------------------------------------------
   2. VARIÁVEIS DO ERP E DOS MÓDULOS → valores do CRM (geradas)
   --------------------------------------------------------------------------- */
/* 202 variáveis + 12 derivadas do claro, em 25 seletores.
   Fontes: /css/style.css 92dfd797 · /css/liquid-glass.css 028bd9d4 · /css/liquid-glass-erp.css 6632354f · /css/menu-lateral.css 49cc352c · /css/vidro-escuro-dourado.css f4cabf4a · /css/insumos.css afa2fdca · /css/financeiro.css d692c85b · /css/rh.css fa8c54c1 · /css/prontuario.css 0188a9c1 · /css/importacao-pacientes.css 129376f4 · /css/perfis-oficiais.css e5c4b4f1 · /css/permissoes-granulares.css e2234a69 · /css/senha-paciente.css 8ca5e042 · /css/ficha-paciente.css 8273e60d · /css/folha.css 693fef73 · /css/ponto.css afa542e7 · /css/reges-datepicker.css 1d6a403a · /css/reges-senha.css b0134041 · /css/acesso-seguro.css cb206e03 · /css/chat.css 07ead68e · /css/sessao-unica.css cdc202a7 · /css/agenda.css e88111b9 · /css/relatorios.css 6bb0ba7d · /css/anamnese-erp.css b849f4d8 · /css/despesa-anexos.css e4ed214a · /css/toque-celular.css eb4d0704 · /css/tema-claro.css fd099f28 · /css/ponto-app.css 34b77d12 · /css/tema-claro-ponto.css d3ebe0dd · /css/tema-claro-definir-senha.css d6f77f27 */
html[data-tema]:root {
  --tinta: var(--vc-text);
  --tinta--fundo: var(--vc-text);
  --cinza: var(--vc-text-2);
  --cinza--fundo: var(--vc-text-2);
  --linha: var(--vc-border);
  --fundo: var(--vc-bg);
  --branco: var(--vc-surface);
  --sombra: var(--vc-shadow-1);
  --raio: var(--vc-r-lg);
  --lg-abismo: var(--vc-bg);
  --lg-abismo-alto: var(--vc-surface);
  --lg-tinta: var(--vc-text);
  --lg-tinta-media: var(--vc-text-2);
  --lg-tinta-fraca: var(--vc-text-2);
  --lg-vidro-fino: linear-gradient(var(--vc-surface), var(--vc-surface));
  --lg-vidro-medio: linear-gradient(var(--vc-surface), var(--vc-surface));
  --lg-vidro-denso: linear-gradient(var(--vc-surface), var(--vc-surface));
  --lg-refracao-leve: none;
  --lg-refracao: none;
  --lg-refracao-densa: none;
  --lg-rim: var(--vc-rim-linha);
  --lg-rim-forte: var(--vc-border-strong);
  --lg-rim-forte--fundo: var(--vc-border-strong);
  --lg-rim-fria: var(--vc-rim-linha);
  --lg-rim-fria--fundo: var(--vc-rim-linha);
  --lg-rim-quente: var(--vc-rim-linha);
  --lg-rim-quente--sombra: var(--vc-rim-linha);
  --lg-sombra-1: var(--vc-shadow-1);
  --lg-sombra-2: var(--vc-shadow-1);
  --lg-sombra-3: var(--vc-shadow-2);
  --lg-interno: 0 0 0 0 transparent;
  --lg-gota-1: var(--vc-r-lg);
  --lg-gota-2: var(--vc-r-lg);
  --lg-gota-3: var(--vc-r-lg);
  --lg-gota-4: var(--vc-r-lg);
  --lg-seixo-1: var(--vc-r-md);
  --lg-seixo-2: var(--vc-r-md);
  --lg-mercurio: var(--vc-r-md);
  --lg-mercurio-alt: var(--vc-r-md);
  --lg-fonte: var(--vc-fonte);
  --vd-contorno: var(--vc-rim);
  --vd-contorno-campo: var(--vc-border-strong);
  --vd-separador: var(--vc-border);
  --vd-pelicula: var(--vc-surface);
  --vd-pelicula-densa: var(--vc-surface);
  --vd-luz: transparent;
  --as-texto: var(--vc-text);
  --as-texto-fraco: var(--vc-text-2);
  --as-vidro: var(--vc-surface);
  --as-vidro-borda: var(--vc-rim-linha);
  --as-fonte: var(--vc-fonte);
  --su-texto: var(--vc-text);
  --su-texto-fraco: var(--vc-text-2);
  --su-vidro: var(--vc-surface);
  --su-vidro-borda: var(--vc-rim-linha);
  --su-fonte: var(--vc-fonte);
}
html[data-tema] .lg-tema-ouro {
  --lg-abismo: var(--vc-bg);
  --lg-abismo-alto: var(--vc-surface);
  --lg-tinta: var(--vc-text);
  --lg-tinta-media: var(--vc-text-2);
  --lg-tinta-fraca: var(--vc-text-2);
  --lg-rim-fria: var(--vc-rim-linha);
  --lg-rim-fria--fundo: var(--vc-rim-linha);
  --lg-vidro-fino: linear-gradient(var(--vc-surface), var(--vc-surface));
  --lg-vidro-medio: linear-gradient(var(--vc-surface), var(--vc-surface));
  --lg-vidro-denso: linear-gradient(var(--vc-surface), var(--vc-surface));
  --lg-interno: 0 0 0 0 transparent;
}
html[data-tema] .app > .sidebar {
  --ml-fonte: var(--vc-fonte);
  --lg-fonte: var(--vc-fonte);
}
html[data-tema] .chat-raiz {
  --chat-recebido-fundo: var(--vc-surface-2);
}
html[data-tema] .ins-modulo,
html[data-tema] #assinatura-overlay {
  --ins-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --ins-fosco: none;
  --ins-borda: var(--vc-rim-linha);
  --ins-borda-caramelo: var(--vc-rim-linha);
  --ins-canto-1: var(--vc-r-lg);
  --ins-canto-2: var(--vc-r-md);
  --ins-canto-3: var(--vc-r-sm);
  --ins-sombra: var(--vc-shadow-1);
  --ins-sombra-alta: var(--vc-shadow-2);
  --ins-texto: var(--vc-text);
  --ins-texto-fraco: var(--vc-text-2);
}
html[data-tema] .fin-modulo {
  --fin-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --fin-fosco: none;
  --fin-borda: var(--vc-rim-linha);
  --fin-borda--sombra: var(--vc-rim-linha);
  --fin-borda-caramelo: var(--vc-rim-linha);
  --fin-canto-1: var(--vc-r-lg);
  --fin-canto-2: var(--vc-r-md);
  --fin-canto-3: var(--vc-r-sm);
  --fin-sombra: var(--vc-shadow-1);
  --fin-texto: var(--vc-text);
  --fin-texto-fraco: var(--vc-text-2);
  --fin-fonte: var(--vc-fonte);
  --lg-fonte: var(--vc-fonte);
}
html[data-tema] .view:has(> .fin-janelas),
html[data-tema] #fin-cards,
html[data-tema] .fin-barra-geral,
html[data-tema] .fin-janelas {
  --fin-fio: var(--vc-rim-linha);
  --fin-fio-cartao: var(--vc-border);
  --fin-cartao: var(--vc-surface);
  --fin-cartao-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --fin-fonte: var(--vc-fonte);
  --lg-fonte: var(--vc-fonte);
}
html[data-tema] body:has(.fin-janelas) .redp-pop {
  --lg-fonte: var(--vc-fonte);
}
html[data-tema] .modal:has(.fin-modulo),
html[data-tema] body:has(.fin-janelas) #topbar-acoes,
html[data-tema] body:has(.fin-janelas) #assinatura-overlay {
  --lg-fonte: var(--vc-fonte);
}
html[data-tema] .card.fin-balao {
  --fin-fonte: var(--vc-fonte);
}
html[data-tema] .rh-modulo {
  --rh-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --rh-fosco: none;
  --rh-borda: var(--vc-rim-linha);
  --rh-borda-caramelo: var(--vc-rim-linha);
  --rh-canto-1: var(--vc-r-lg);
  --rh-canto-2: var(--vc-r-md);
  --rh-canto-3: var(--vc-r-sm);
  --rh-sombra: var(--vc-shadow-1);
  --rh-texto: var(--vc-text);
  --rh-texto-fraco: var(--vc-text-2);
}
html[data-tema] .pr-modulo {
  --pr-borda: var(--vc-rim-linha);
  --pr-borda-sutil: var(--vc-border);
  --pr-borda-sutil--fundo: var(--vc-border);
  --pr-texto: var(--vc-text);
  --pr-texto-suave: var(--vc-text-2);
  --pr-vidro: var(--vc-surface);
  --pr-vidro-forte: var(--vc-surface-2);
}
html[data-tema] #modal.importacao {
  --imp-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --imp-fosco: none;
  --imp-borda: var(--vc-rim-linha);
  --imp-texto: var(--vc-text);
  --imp-texto-fraco: var(--vc-text-2);
  --imp-canto-1: var(--vc-r-lg);
  --imp-canto-2: var(--vc-r-md);
  --imp-canto-3: var(--vc-r-sm);
  --imp-fonte: var(--vc-fonte);
}
html[data-tema] .po-seletor,
html[data-tema] .po-camada,
html[data-tema] .po-nota,
html[data-tema] .po-delegacao,
html[data-tema] .po-rotulo {
  --po-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --po-fosco: none;
  --po-texto: var(--vc-text);
  --po-texto-fraco: var(--vc-text-2);
  --po-canto-1: var(--vc-r-lg);
  --po-canto-2: var(--vc-r-md);
  --po-canto-3: var(--vc-r-sm);
  --po-fonte: var(--vc-fonte);
}
html[data-tema] .pg-secao,
html[data-tema] .pg-overlay {
  --pg-borda: var(--vc-rim-linha);
  --pg-borda-sutil: var(--vc-border);
  --pg-vidro: var(--vc-surface);
  --pg-texto: var(--vc-text);
  --pg-texto-fraco: var(--vc-text-2);
  --pg-fonte: var(--vc-fonte);
}
html[data-tema] #modal.senha-paciente {
  --sp-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --sp-fosco: none;
  --sp-borda: var(--vc-rim-linha);
  --sp-texto: var(--vc-text);
  --sp-texto-fraco: var(--vc-text-2);
  --sp-canto-1: var(--vc-r-lg);
  --sp-canto-2: var(--vc-r-md);
  --sp-canto-3: var(--vc-r-sm);
  --sp-fonte: var(--vc-fonte);
}
html[data-tema] .sp-alerta-pedido,
html[data-tema] .sp-pedidos,
html[data-tema] .sp-pedido-nota {
  --spa-fonte: var(--vc-fonte);
}
html[data-tema] #fp-overlay,
html[data-tema] #fp-a1 {
  --fp-borda: var(--vc-rim-linha);
  --fp-borda-sutil: var(--vc-border);
  --fp-texto: var(--vc-text);
  --fp-texto-suave: var(--vc-text-2);
  --fp-texto-apagado: var(--vc-text-3);
  --fp-texto-apagado--fundo: var(--vc-text-3);
  --fp-vidro: var(--vc-surface);
  --fp-vidro-forte: var(--vc-surface-2);
  --fp-fonte: var(--vc-fonte);
}
html[data-tema] .fp-modulo,
html[data-tema] #fp-assinatura-overlay {
  --fp-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --fp-fosco: none;
  --fp-borda: var(--vc-rim-linha);
  --fp-borda-caramelo: var(--vc-rim-linha);
  --fp-canto-1: var(--vc-r-lg);
  --fp-canto-2: var(--vc-r-md);
  --fp-canto-3: var(--vc-r-sm);
  --fp-sombra: var(--vc-shadow-1);
  --fp-sombra-alta: var(--vc-shadow-2);
  --fp-texto: var(--vc-text);
  --fp-texto-fraco: var(--vc-text-2);
}
html[data-tema] .pt-modulo {
  --pt-vidro: linear-gradient(var(--vc-surface), var(--vc-surface));
  --pt-fosco: none;
  --pt-borda: var(--vc-rim-linha);
  --pt-borda-caramelo: var(--vc-rim-linha);
  --pt-canto-1: var(--vc-r-lg);
  --pt-canto-2: var(--vc-r-md);
  --pt-canto-3: var(--vc-r-sm);
  --pt-sombra: var(--vc-shadow-1);
  --pt-sombra-alta: var(--vc-shadow-2);
  --pt-texto: var(--vc-text);
  --pt-texto-fraco: var(--vc-text-2);
}
html[data-tema] .chat-raiz {
  --chat-recebido-rim: var(--vc-border-strong);
  --chat-recebido-rim--texto: var(--vc-border-strong);
  --chat-recebido-fundo: var(--vc-surface-2);
}
html[data-tema] .ag-modulo,
html[data-tema] .ag-overlay {
  --ag-texto: var(--vc-text);
  --ag-texto-suave: var(--vc-text-2);
  --ag-texto-apagado: var(--vc-text-3);
  --ag-borda: var(--vc-rim-linha);
  --ag-borda-sutil: var(--vc-border);
  --ag-pelicula: var(--vc-surface-2);
  --ag-pelicula-forte: var(--vc-surface-3);
  --ag-fosco: none;
  --ag-fonte: var(--vc-fonte);
  --ag-fonte-luxo: var(--vc-fonte);
}
html[data-tema] .rel-modal {
  --rel-texto: var(--vc-text);
  --rel-apagado: var(--vc-text-3);
  --rel-fio: var(--vc-rim-linha);
  --rel-fonte: var(--vc-fonte);
  --lg-fonte: var(--vc-fonte);
}
html[data-tema] .an-corpo {
  --an-texto: var(--vc-text);
  --an-texto-suave: var(--vc-text-2);
  --an-texto-apagado: var(--vc-text-3);
  --an-texto-apagado--borda: var(--vc-text-3);
  --an-texto-apagado--fundo: var(--vc-text-3);
  --an-borda: var(--vc-rim-linha);
  --an-borda-sutil: var(--vc-border);
  --an-vidro: var(--vc-surface);
  --an-vidro-forte: var(--vc-surface-2);
  --an-fonte: var(--vc-fonte);
}
html[data-tema] .da-visor {
  --da-texto: var(--vc-text);
  --da-texto-fraco: var(--vc-text-2);
}

/* ---------------------------------------------------------------------------
   3. AMBIENTE — fundo liso do CRM, sem cáustica nem grão
   --------------------------------------------------------------------------- */
html[data-tema] body:is(.lg-ambiente, *) {
  background-color: var(--vc-bg);
  background-image: none;
  color: var(--vc-text);
  font-family: var(--vc-fonte);
}
html[data-tema] body:is(.lg-ambiente, *)::before,
html[data-tema] body:is(.lg-ambiente, *)::after {
  content: none;
  display: none;
  animation: none;
}
html[data-tema] ::selection { background: var(--vc-gold-soft); }
:where(html[data-tema]) * {
  scrollbar-width: thin;
  scrollbar-color: var(--vc-border-strong) transparent;
}
/* Anel de foco do CRM: 2 px na cor de foco, 2 px de folga. Campos têm o próprio
   (borda + halo), por isso ficam de fora. */
html[data-tema] body:is(.lg-ambiente, *) :focus-visible:not(input, select, textarea) {
  outline: 2px solid var(--vc-focus);
  outline-offset: 2px;
  box-shadow: none;
}
:where(html:not(.tema-claro)) body h1,
html.tema-claro body h1, :where(html:not(.tema-claro)) body h2,
 html.tema-claro body h2, :where(html:not(.tema-claro)) body h3,
 html.tema-claro body h3, :where(html:not(.tema-claro)) body h4,
 html.tema-claro body h4 {
  font-family: var(--vc-fonte);
  color: var(--vc-text);
  letter-spacing: normal;
}
:where(html:not(.tema-claro)) body a,
html.tema-claro body a { color: var(--vc-link); }

/* ---------------------------------------------------------------------------
   4. ESTRUTURA — o app colado nas bordas, como o CRM (nada de peças flutuando)
   --------------------------------------------------------------------------- */
html[data-tema] #app {
  --ml-largura: var(--vc-menu);
  --ml-largura-recolhida: var(--vc-menu-recolhido);
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  gap: 0;
  background: transparent;
}
html[data-tema] #app.hidden { display: none; }
html[data-tema] #app > .content {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
}

/* --- 4a. Menu lateral (sidebar.tsx) ---------------------------------------- */
html[data-tema] #app > .sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: var(--ml-largura);
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--vc-nav-bg);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-right: 1px solid var(--vc-nav-border);
  border-radius: 0;
  box-shadow: none;
  color: var(--vc-nav-text);
  font-family: var(--vc-fonte);
  z-index: 30;
  transition: width 0.2s ease;
}
html[data-tema] #app.ml-recolhido > .sidebar { width: var(--ml-largura-recolhida); }

/* Marca: brasão + "Dr. Reges Jr." / "NUTROLOGIA DE PRECISÃO" (64 px). */
html[data-tema] #app > .sidebar .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 var(--vc-topo);
  height: var(--vc-topo);
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--vc-nav-border);
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
html[data-tema] #app > .sidebar .sidebar-brand .brand-crest {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  filter: var(--vc-crest-sombra);
}
html[data-tema] #app > .sidebar .vc-marca-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  line-height: 1.25;
}
html[data-tema] #app > .sidebar .vc-marca-nome {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--vc-nav-active);
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-tema] #app > .sidebar .vc-marca-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vc-nav-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lista de módulos. */
html[data-tema] #app > .sidebar .menu {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px 6px;
  overflow-x: hidden;
  overflow-y: auto;
}
html[data-tema] #app > .sidebar .menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  width: 100%;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--vc-r-md);
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--vc-nav-text);
  font-family: var(--vc-fonte);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transform: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
html[data-tema] #app > .sidebar .menu-item:hover {
  background: var(--vc-nav-surface);
  color: var(--vc-nav-text);
}
html[data-tema] #app > .sidebar .menu-item.active {
  background: var(--vc-nav-surface);
  color: var(--vc-nav-active);
  font-weight: 500;
  border: 0;
  box-shadow: none;
}
/* A barrinha de 3 px à esquerda do item ativo. */
html[data-tema] #app > .sidebar .menu-item::before {
  content: none;
}
html[data-tema] #app > .sidebar .menu-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: var(--vc-r-xs);
  background: var(--vc-nav-active);
}
html[data-tema] #app > .sidebar .menu-item::after { content: none; }
html[data-tema] #app > .sidebar .vc-icone {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  filter: none;
}
html[data-tema] #app > .sidebar .menu-item > span:not(.chat-badge) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: none;
}
/* Contador de não-lidas do Chat (chat.js): selo dourado na ponta do item. */
html[data-tema] #app > .sidebar .menu-item .chat-badge {
  position: static;
  display: inline-block;
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  margin: 0 0 0 auto;
  padding: 0 5px;
  border: 0;
  border-radius: var(--vc-r-sm);
  background: var(--vc-primary);
  color: var(--vc-primary-text);
  font: 700 11px/18px var(--vc-fonte);
  text-align: center;
  box-shadow: none;
}

/* Seções ("EQUIPE", "GESTÃO"): fio em cima e rótulo em caixa alta. Um grupo
   cujos itens o app.js escondeu todos some junto. */
html[data-tema] #app > .sidebar .vc-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px -6px 0;
  padding: 12px 6px 0;
  border-top: 1px solid var(--vc-nav-border);
}
html[data-tema] #app > .sidebar .vc-grupo:not(:has(> .menu-item:not([style*="none"]))) { display: none; }
html[data-tema] #app > .sidebar .vc-secao {
  margin: 0;
  padding: 0 10px 6px;
  font: 700 10px/1.2 var(--vc-fonte);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vc-nav-text-2);
  white-space: nowrap;
  overflow: hidden;
}

/* Pé: Recolher menu, Tema e o usuário. */
html[data-tema] #app > .sidebar .sidebar-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 6px;
  border-top: 1px solid var(--vc-nav-border);
  background: none;
}
html[data-tema] #app > .sidebar .ml-topo { display: contents; }
html[data-tema] #app > .sidebar .ml-legenda,
html[data-tema] #app > .sidebar .ml-defs { display: none; }
html[data-tema] #app > .sidebar .vc-linha,
html[data-tema] #app > .sidebar .ml-alternar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  width: 100%;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--vc-r-md);
  background: transparent;
  box-shadow: none;
  color: var(--vc-nav-text-2);
  font: 400 13px/1.2 var(--vc-fonte);
  letter-spacing: normal;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
html[data-tema] #app > .sidebar .vc-linha:hover,
html[data-tema] #app > .sidebar .ml-alternar:hover {
  background: var(--vc-nav-surface);
  color: var(--vc-nav-text);
  border: 0;
}
html[data-tema] #app > .sidebar .vc-linha svg,
html[data-tema] #app > .sidebar .ml-alternar svg {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
html[data-tema] #app > .sidebar .ml-alternar .ml-seta { transform: none; }
html[data-tema] #app > .sidebar .vc-linha .ml-rotulo,
html[data-tema] #app > .sidebar .ml-alternar .ml-rotulo {
  display: block;
  max-width: none;
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tema: no escuro a linha oferece o diurno (sol); no claro, o escuro (lua). */
html[data-tema] #app > .sidebar #vc-tema .vc-icone-lua { display: none; }
html[data-tema].tema-claro #app > .sidebar #vc-tema .vc-icone-sol { display: none; }
html[data-tema].tema-claro #app > .sidebar #vc-tema .vc-icone-lua { display: block; }

html[data-tema] #app > .sidebar .user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--vc-r-md);
  white-space: nowrap;
}
html[data-tema] #app > .sidebar .user-chip > .avatar {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: var(--vc-r-md);
  background: var(--vc-gold-soft);
  background-image: none;
  box-shadow: none;
  color: var(--vc-gold);
  font: 700 11px/1 var(--vc-fonte);
  letter-spacing: normal;
}
html[data-tema] #app > .sidebar .vc-usuario {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  overflow: hidden;
  opacity: 1;
}
html[data-tema] #app > .sidebar .user-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--vc-nav-text);
  font: 600 13px/1.3 var(--vc-fonte);
}
html[data-tema] #app > .sidebar .user-cargo {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-tema] #app > .sidebar .user-cargo #user-perfil {
  display: inline;
  color: var(--vc-nav-text-2);
  font: 400 11px/1.3 var(--vc-fonte);
  letter-spacing: normal;
  text-transform: none;
}
html[data-tema] #app > .sidebar #btn-logout {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--vc-r-sm);
  background: none;
  box-shadow: none;
  color: var(--vc-nav-text-2);
  cursor: pointer;
  transition: color 0.15s ease;
}
html[data-tema] #app > .sidebar #btn-logout:hover { color: var(--vc-nav-active); border: 0; background: none; }
html[data-tema] #app > .sidebar #btn-logout .vc-icone { flex-basis: 16px; width: 16px; height: 16px; }

/* --- 4b. Menu RECOLHIDO (64 px): só ícones, centralizados ------------------ */
html[data-tema] #app.ml-recolhido > .sidebar .sidebar-brand { padding: 0 12px; }
html[data-tema] #app.ml-recolhido > .sidebar .sidebar-brand .brand-crest { height: 34px; }
html[data-tema] #app.ml-recolhido > .sidebar .menu-item,
html[data-tema] #app.ml-recolhido > .sidebar .vc-linha,
html[data-tema] #app.ml-recolhido > .sidebar .ml-alternar {
  justify-content: center;
  gap: 0;
  padding: 0;
}
/* Rótulos fora da vista, mas na árvore de acessibilidade (são o nome do botão). */
html[data-tema] #app.ml-recolhido > .sidebar .vc-marca-texto,
html[data-tema] #app.ml-recolhido > .sidebar .menu-item > span:not(.chat-badge),
html[data-tema] #app.ml-recolhido > .sidebar .vc-secao,
html[data-tema] #app.ml-recolhido > .sidebar .vc-linha .ml-rotulo,
html[data-tema] #app.ml-recolhido > .sidebar .ml-alternar .ml-rotulo,
html[data-tema] #app.ml-recolhido > .sidebar .vc-usuario {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
html[data-tema] #app.ml-recolhido > .sidebar .vc-grupo { padding-top: 10px; }
html[data-tema] #app.ml-recolhido > .sidebar .user-chip {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
}
html[data-tema] #app.ml-recolhido > .sidebar .menu-item .chat-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  box-shadow: 0 0 0 2px var(--vc-nav-bg);
}

/* Dica do menu recolhido (Tip do CRM). */
html[data-tema] body .ml-dica {
  padding: 4px 8px;
  border: 1px solid var(--vc-nav-border);
  border-radius: var(--vc-r-sm);
  background: var(--vc-nav-bg);
  box-shadow: var(--vc-shadow-2);
  color: var(--vc-nav-text);
  font: 400 12px/1.3 var(--vc-fonte);
}

/* --- 4c. Topo de 64 px (page-header.tsx) ----------------------------------- */
html[data-tema] #app .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px 16px;
  min-height: var(--vc-topo);
  margin: 0;
  padding: 0 20px;
  background: var(--vc-surface);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-bottom: 1px solid var(--vc-border);
  border-radius: 0;
  box-shadow: none;
}
html[data-tema] #app .topbar h1 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vc-text);
  font: 700 15px/1.2 var(--vc-fonte);
  letter-spacing: 1px;
  text-transform: uppercase;
}
html[data-tema] #app .topbar .tema-lugar { display: none; }
html[data-tema] #app .topbar-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
html[data-tema] #app .view { padding: 20px; }

/* --- 4d. Barra do celular (MobileTopBar) — só abaixo de 768 px -------------- */
html[data-tema] #app .vc-barra-celular { display: none; }

@media (max-width: 767px) {
  html[data-tema] #app > .sidebar,
  html[data-tema] #app.ml-recolhido > .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(300px, 86vw);
    height: 100vh;
    height: 100dvh;
    box-shadow: var(--vc-shadow-2);
    /* Fechada, a gaveta NÃO é desenhada (display: none): nada nela recebe foco ou clique, e
       `offsetParent` dos itens é nulo — testes que olham isso caem no trocarView(). A animação
       de entrada/saída segue com `allow-discrete` + @starting-style (navegador antigo: sem animar). */
    display: none;
    transform: translateX(-100%);
    transition: transform 0.2s ease, display 0.2s allow-discrete;
  }
  html[data-tema] #app.ml-sobreposto > .sidebar {
    display: flex;
    transform: none;
  }
  @starting-style {
    html[data-tema] #app.ml-sobreposto > .sidebar { transform: translateX(-100%); }
  }
  html[data-tema] #app.ml-sobreposto::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 59;
    background: var(--vc-overlay);
    opacity: 1;
    pointer-events: auto;
  }
  html[data-tema] #app > .content { margin-left: 0; }
  html[data-tema] #app > .sidebar .ml-alternar { display: none; }
  html[data-tema] #app > .sidebar .menu-item,
  html[data-tema] #app > .sidebar .vc-linha { height: 44px; min-height: 44px; font-size: 14px; }
  html[data-tema] #app > .sidebar #btn-logout { flex-basis: 40px; width: 40px; height: 40px; }
  html[data-tema] #app .vc-barra-celular {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 8px;
    background: var(--vc-nav-bg);
    border-bottom: 1px solid var(--vc-nav-border);
    color: var(--vc-nav-text);
  }
  html[data-tema] #app .topbar {
    top: 48px;
    flex-wrap: wrap;
    padding: 8px 12px;
  }
  html[data-tema] #app .view { padding: 12px; }
}
html[data-tema] #app .vc-abrir-menu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--vc-r-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
html[data-tema] #app .vc-abrir-menu:hover { background: var(--vc-nav-surface); }
html[data-tema] #app .vc-abrir-menu svg { width: 24px; height: 24px; }
html[data-tema] #app .vc-barra-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: var(--vc-nav-active);
  font: 700 15px/1.2 var(--vc-fonte);
  letter-spacing: 0.025em;
}
html[data-tema] #app .vc-barra-marca img { height: 26px; width: auto; flex: 0 0 auto; filter: var(--vc-crest-sombra); }
html[data-tema] #app .vc-barra-marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   5. COMPONENTES — no desenho dos ui/*.tsx do CRM
   (`@@ X` vira o par escuro/claro com a especificidade da regra base X)
   --------------------------------------------------------------------------- */

/* --- Botões (button.tsx) --- */
:where(html:not(.tema-claro)) body .btn,
html.tema-claro body .btn {
  font-family: var(--vc-fonte);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--vc-r-md);
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
:where(html:not(.tema-claro)) body .btn:hover,
html.tema-claro body .btn:hover, :where(html:not(.tema-claro)) body .btn:active,
 html.tema-claro body .btn:active { transform: none; }
:where(html:not(.tema-claro)) body .btn-primary,
html.tema-claro body .btn-primary {
  color: var(--vc-primary-text);
  background: var(--vc-primary);
  background-image: none;
  border: 1px solid transparent;
  box-shadow: var(--vc-shadow-1);
  font-weight: 700;
  letter-spacing: 0.5px;
}
:where(html:not(.tema-claro)) body .btn-primary:hover,
html.tema-claro body .btn-primary:hover {
  color: var(--vc-primary-text);
  background: var(--vc-primary-hover);
  background-image: none;
  box-shadow: var(--vc-shadow-1);
}
:where(html:not(.tema-claro)) body .btn-outline,
html.tema-claro body .btn-outline, :where(html:not(.tema-claro)) body .btn-ghost,
 html.tema-claro body .btn-ghost {
  color: var(--vc-text);
  background: var(--vc-surface);
  background-image: none;
  border: 1px solid var(--vc-border-strong);
  box-shadow: none;
}
:where(html:not(.tema-claro)) body .btn-outline:hover,
html.tema-claro body .btn-outline:hover, :where(html:not(.tema-claro)) body .btn-ghost:hover,
 html.tema-claro body .btn-ghost:hover {
  color: var(--vc-text);
  background: var(--vc-surface-2);
  border-color: var(--vc-border-strong);
}
:where(html:not(.tema-claro)) body table .btn-ghost,
html.tema-claro body table .btn-ghost, :where(html:not(.tema-claro)) body table .btn-outline,
 html.tema-claro body table .btn-outline { background-color: var(--vc-surface); }
:where(html:not(.tema-claro)) body .btn-danger,
html.tema-claro body .btn-danger {
  color: var(--vc-danger);
  background: var(--vc-danger-soft);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--vc-danger) 40%, transparent);
  box-shadow: none;
}
:where(html:not(.tema-claro)) body .btn-danger:hover,
html.tema-claro body .btn-danger:hover { color: #ffffff; background: var(--vc-danger); }
:where(html:not(.tema-claro)) body .btn-success,
html.tema-claro body .btn-success {
  color: var(--vc-success);
  background: var(--vc-success-soft);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--vc-success) 40%, transparent);
  box-shadow: none;
}
:where(html:not(.tema-claro)) body .btn-success:hover,
html.tema-claro body .btn-success:hover { color: #ffffff; background: var(--vc-success); }

/* --- Janelas (Dialog do overlay.tsx) --- */
:where(html:not(.tema-claro)) body .modal-backdrop,
html.tema-claro body .modal-backdrop {
  background: var(--vc-overlay);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:where(html:not(.tema-claro)) body .modal,
html.tema-claro body .modal {
  color: var(--vc-text);
  background: var(--vc-surface);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--vc-border);
  border-color: var(--vc-rim);
  border-radius: var(--vc-r-xl);
  box-shadow: var(--vc-shadow-2);
}
:where(html:not(.tema-claro)) body .modal h3,
html.tema-claro body .modal h3 { font-size: 16px; font-weight: 700; color: var(--vc-text); }
:where(html:not(.tema-claro)) body .modal-close,
html.tema-claro body .modal-close {
  color: var(--vc-text-3);
  border-radius: var(--vc-r-sm);
  transform: none;
}
:where(html:not(.tema-claro)) body .modal-close:hover,
html.tema-claro body .modal-close:hover { color: var(--vc-text); background: var(--vc-surface-2); transform: none; }

/* --- Campos (field.tsx) — só pintura: largura e flex ficam com cada tela --- */
:where(html:not(.tema-claro)) body form label,
html.tema-claro body form label {
  color: var(--vc-text-2);
  font-weight: 600;
  letter-spacing: normal;
}
:where(html:not(.tema-claro)) body form input,
html.tema-claro body form input, :where(html:not(.tema-claro)) body form select,
 html.tema-claro body form select, :where(html:not(.tema-claro)) body form textarea,
 html.tema-claro body form textarea, :where(html:not(.tema-claro)) body .barra-filtros input,
 html.tema-claro body .barra-filtros input, :where(html:not(.tema-claro)) body .barra-filtros select,
 html.tema-claro body .barra-filtros select {
  font-family: var(--vc-fonte);
  color: var(--vc-text);
  background: var(--vc-surface);
  background-image: none;
  border: 1px solid var(--vc-campo-borda);
  border-radius: var(--vc-r-md);
  box-shadow: none;
}
:where(html:not(.tema-claro)) body form input:focus,
html.tema-claro body form input:focus, :where(html:not(.tema-claro)) body form select:focus,
 html.tema-claro body form select:focus, :where(html:not(.tema-claro)) body form textarea:focus,
 html.tema-claro body form textarea:focus, :where(html:not(.tema-claro)) body .barra-filtros input:focus,
 html.tema-claro body .barra-filtros input:focus, :where(html:not(.tema-claro)) body .barra-filtros select:focus,
 html.tema-claro body .barra-filtros select:focus {
  outline: none;
  border-color: var(--vc-focus);
  box-shadow: 0 0 0 2px var(--vc-gold-soft);
}
:where(html:not(.tema-claro)) body ::placeholder,
html.tema-claro body ::placeholder { color: var(--vc-text-3); }
:where(html:not(.tema-claro)) body select option,
html.tema-claro body select option { background-color: var(--vc-surface); color: var(--vc-text); }
:where(html:not(.tema-claro)) body .redp > .redp-campo,
html.tema-claro body .redp > .redp-campo {
  background: var(--vc-surface);
  background-image: none;
  border-color: var(--vc-campo-borda);
  border-radius: var(--vc-r-md);
  box-shadow: none;
}
:where(html:not(.tema-claro)) body .redp-campo:focus-within,
html.tema-claro body .redp-campo:focus-within {
  border-color: var(--vc-focus);
  box-shadow: 0 0 0 2px var(--vc-gold-soft);
}

/* --- Cartões e painéis (seções `rim rounded-lg bg-surface` do CRM) --- */
:where(html:not(.tema-claro)) body .card,
html.tema-claro body .card, :where(html:not(.tema-claro)) body .painel,
 html.tema-claro body .painel {
  color: var(--vc-text);
  background: var(--vc-surface);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--vc-border);
  border-color: var(--vc-rim);
  box-shadow: var(--vc-shadow-1);
  transform: none;
}
:where(html:not(.tema-claro)) body .card::before,
html.tema-claro body .card::before, :where(html:not(.tema-claro)) body .painel::before,
 html.tema-claro body .painel::before { content: none; display: none; }
:where(html:not(.tema-claro)) body .cards > .card:hover,
html.tema-claro body .cards > .card:hover {
  transform: none;
  border-color: var(--vc-rim);
  box-shadow: var(--vc-shadow-1);
}
:where(html:not(.tema-claro)) body .card .rotulo,
html.tema-claro body .card .rotulo {
  color: var(--vc-text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
:where(html:not(.tema-claro)) body .card .valor,
html.tema-claro body .card .valor {
  color: var(--vc-text);
  -webkit-text-fill-color: currentColor;
  background: none;
  filter: none;
  font-weight: 700;
}
:where(html:not(.tema-claro)) body .card .valor.verde,
html.tema-claro body .card .valor.verde { color: var(--vc-success); }
:where(html:not(.tema-claro)) body .card .valor.vermelho,
html.tema-claro body .card .valor.vermelho { color: var(--vc-danger); }
:where(html:not(.tema-claro)) body .card .valor.ambar,
html.tema-claro body .card .valor.ambar { color: var(--vc-warning); }
:where(html:not(.tema-claro)) body .painel-head,
html.tema-claro body .painel-head { border-bottom: 1px solid var(--vc-border); }
/* Título de seção do CRM (kanban-title): 12 px, 700, caixa alta, 1 px. */
:where(html:not(.tema-claro)) body .painel-head h2,
html.tema-claro body .painel-head h2 {
  color: var(--vc-text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
:where(html:not(.tema-claro)) body .painel.painel-longo,
html.tema-claro body .painel.painel-longo { background-color: var(--vc-surface); }

/* --- Tabelas (data-table.tsx) --- */
:where(html:not(.tema-claro)) body table,
html.tema-claro body table { color: var(--vc-text); }
:where(html:not(.tema-claro)) body th,
html.tema-claro body th, :where(html:not(.tema-claro)) body td,
 html.tema-claro body td { border-bottom: 1px solid var(--vc-border); }
:where(html:not(.tema-claro)) body th,
html.tema-claro body th {
  background: var(--vc-surface-2);
  color: var(--vc-text-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
:where(html:not(.tema-claro)) body tbody tr:hover,
html.tema-claro body tbody tr:hover { background: var(--vc-surface-2); }
:where(html:not(.tema-claro)) body .vazio,
html.tema-claro body .vazio { color: var(--vc-text-3); }
:where(html:not(.tema-claro)) body .pac-pag-info,
html.tema-claro body .pac-pag-info, :where(html:not(.tema-claro)) body .pac-pag-reticencias,
 html.tema-claro body .pac-pag-reticencias { color: var(--vc-text-3); }

/* --- Selos (Badge do feedback.tsx) --- */
:where(html:not(.tema-claro)) body .badge,
html.tema-claro body .badge {
  border: 0;
  border-radius: var(--vc-r-sm);
  font-weight: 600;
  letter-spacing: normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
:where(html:not(.tema-claro)) body .badge.verde,
html.tema-claro body .badge.verde { background: var(--vc-success-soft); color: var(--vc-success); }
:where(html:not(.tema-claro)) body .badge.vermelho,
html.tema-claro body .badge.vermelho { background: var(--vc-danger-soft); color: var(--vc-danger); }
:where(html:not(.tema-claro)) body .badge.ambar,
html.tema-claro body .badge.ambar { background: var(--vc-warning-soft); color: var(--vc-warning); }
:where(html:not(.tema-claro)) body .badge.cinza,
html.tema-claro body .badge.cinza { background: var(--vc-surface-3); color: var(--vc-text-2); }
:where(html:not(.tema-claro)) body .badge.azul,
html.tema-claro body .badge.azul { background: var(--vc-gold-soft); color: var(--vc-gold); }

/* --- Aviso (toast do overlay.tsx) --- */
:where(html:not(.tema-claro)) body .toast,
html.tema-claro body .toast {
  color: var(--vc-text);
  background: var(--vc-surface);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--vc-border);
  border-color: var(--vc-rim);
  border-radius: var(--vc-r-lg);
  box-shadow: var(--vc-shadow-2);
  font-size: 13px;
  font-weight: 500;
}
:where(html:not(.tema-claro)) body .toast.ok,
html.tema-claro body .toast.ok { color: var(--vc-success); background-color: var(--vc-surface); border-color: color-mix(in srgb, var(--vc-success) 50%, transparent); }
:where(html:not(.tema-claro)) body .toast.erro,
html.tema-claro body .toast.erro { color: var(--vc-danger); background-color: var(--vc-surface); border-color: color-mix(in srgb, var(--vc-danger) 50%, transparent); }

/* --- Abas (Tabs do overlay.tsx): sublinhado dourado na ativa --- */
:where(html:not(.tema-claro)) body .tabs,
html.tema-claro body .tabs { border-bottom: 1px solid var(--vc-border); gap: 4px; }
:where(html:not(.tema-claro)) body .tab,
html.tema-claro body .tab {
  color: var(--vc-text-2);
  background: none;
  background-image: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--vc-fonte);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
}
:where(html:not(.tema-claro)) body .tab:hover,
html.tema-claro body .tab:hover { color: var(--vc-text); background: none; }
:where(html:not(.tema-claro)) body .tab.active,
html.tema-claro body .tab.active {
  color: var(--vc-text);
  background: none;
  background-image: none;
  border: 0;
  border-bottom: 2px solid var(--vc-gold);
  box-shadow: none;
}

/* --- Mini-listas (cartões internos surface-2 do CRM) --- */
:where(html:not(.tema-claro)) body .mini-item,
html.tema-claro body .mini-item {
  color: var(--vc-text);
  background: var(--vc-surface-2);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-r-md);
  box-shadow: none;
}
:where(html:not(.tema-claro)) body .mini-item:hover,
html.tema-claro body .mini-item:hover { background: var(--vc-surface-3); }
:where(html:not(.tema-claro)) body .mini-item .data,
html.tema-claro body .mini-item .data { color: var(--vc-text-3); }

/* ---------------------------------------------------------------------------
   6. ENTRADA E LOGIN (public-shell.tsx e login/page.tsx do CRM)
   --------------------------------------------------------------------------- */
html[data-tema] #landing {
  background-color: var(--vc-bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--vc-gold-soft), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in srgb, var(--vc-rim-b) 10%, transparent), transparent 70%);
  color: var(--vc-text);
  font-family: var(--vc-fonte);
}
html[data-tema] #landing .landing-top {
  margin: 24px 24px 0;
  padding: 16px 28px;
  border: 1px solid var(--vc-border);
  border-color: var(--vc-rim);
  border-radius: var(--vc-r-xl);
  background: color-mix(in srgb, var(--vc-surface) 82%, transparent);
  background-image: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: none;
}
html[data-tema] #landing .brand { color: var(--vc-text); font-size: 21px; }
html[data-tema] #landing .landing-top .brand-crest { height: 52px; filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.25)); }
html[data-tema] #landing #btn-home {
  height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border: 1px solid var(--vc-campo-borda);
  border-radius: var(--vc-r-md);
  background: transparent;
  box-shadow: none;
  color: var(--vc-text);
  font: 700 13px/1 var(--vc-fonte);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
html[data-tema] #landing #btn-home:hover { border-color: var(--vc-gold); color: var(--vc-gold); background: transparent; }
html[data-tema] #landing .brand-name strong { white-space: nowrap; letter-spacing: 0.025em; }
html[data-tema] #landing .landing-hero h1 {
  color: var(--vc-text);
  -webkit-text-fill-color: currentColor;
  background: none;
  filter: none;
  font-weight: 700;
  letter-spacing: normal;
  text-shadow: none;
}
@media (max-width: 639px) {
  html[data-tema] #landing .landing-top { margin: 16px 16px 0; padding: 12px 16px; gap: 12px; }
  html[data-tema] #landing .brand { font-size: 17px; gap: 10px; min-width: 0; }
  html[data-tema] #landing .landing-top .brand-crest { height: 44px; }
  html[data-tema] #landing #btn-home { padding: 0 16px; }
}
html[data-tema] #landing .landing-hero p { color: var(--vc-text-2); opacity: 1; }
/* ACESSO EQUIPE: o botão dourado das páginas públicas do CRM (goldButton). */
html[data-tema] #landing #btn-acesso-equipe-2,
html[data-tema] #login-modal .btn-primary {
  min-height: 46px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--vc-r-md);
  background: var(--vc-ouro-acesso);
  color: var(--vc-ouro-acesso-texto);
  font: 700 14px/1 var(--vc-fonte);
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.22);
  transform: none;
}
html[data-tema] #landing #btn-acesso-equipe-2:hover,
html[data-tema] #login-modal .btn-primary:hover {
  background: var(--vc-ouro-acesso);
  filter: brightness(1.05);
  box-shadow: 0 0 28px rgba(255, 215, 0, 0.35);
}
html[data-tema] #landing .landing-hero .btn-outline {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  border: 1px solid var(--vc-border-strong);
  border-radius: var(--vc-r-md);
  background: var(--vc-surface);
  color: var(--vc-text);
  font: 700 14px/1 var(--vc-fonte);
  letter-spacing: 1px;
  box-shadow: none;
}
html[data-tema] #landing .landing-hero .btn-outline:hover { border-color: var(--vc-gold); color: var(--vc-gold); }
html[data-tema] #landing .landing-rodape { color: var(--vc-text-3); font-size: 13px; }
html[data-tema] #landing .landing-rodape .rodape-marca .brand-crest { height: 56px; filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.25)); }
html[data-tema] #landing .landing-rodape .rodape-marca-nome { color: var(--vc-gold); font-size: 18px; font-weight: 600; letter-spacing: normal; }
html[data-tema] #landing .landing-rodape .assinatura-yvetech a { color: var(--vc-text); font-weight: 600; }

/* Login: cartão `rim glass` de 420 px, cantos de 14. */
html[data-tema] #login-modal.modal-backdrop { background: var(--vc-overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-tema] #login-modal .login-card {
  max-width: 420px;
  padding: 32px;
  border: 1px solid var(--vc-border);
  border-color: var(--vc-rim);
  border-radius: var(--vc-r-xl);
  background: var(--vc-surface);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--vc-shadow-2);
  color: var(--vc-text);
}
html[data-tema] #login-modal .login-head { margin-bottom: 24px; }
html[data-tema] #login-modal .login-head .brand-crest {
  height: 52px;
  margin: 0 auto 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.25));
}
html[data-tema] #login-modal .login-head h2 { color: var(--vc-text); font: 700 22px/1.25 var(--vc-fonte); }
html[data-tema] #login-modal .login-head p { color: var(--vc-text-2); font-size: 13px; font-style: normal; margin-top: 4px; }
html[data-tema] #login-modal form label { color: var(--vc-text-2); font-size: 12px; font-weight: 600; letter-spacing: normal; margin-bottom: 16px; }
html[data-tema] #login-modal form input {
  margin-top: 4px;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
}
html[data-tema] #login-modal .btn-primary { width: 100%; }

/* ---------------------------------------------------------------------------
   7. PÁGINAS AVULSAS — ponto.html (relógio do celular) e definir-senha.html
   --------------------------------------------------------------------------- */
/* Ponto: o login no mesmo cartão do login do ERP (login/page.tsx do CRM). */
html[data-tema] #pa-login .login-card {
  max-width: 420px;
  padding: 32px;
  border: 1px solid var(--vc-border);
  border-color: var(--vc-rim);
  border-radius: var(--vc-r-xl);
  background: var(--vc-surface);
  background-image: none;
  box-shadow: var(--vc-shadow-2);
  color: var(--vc-text);
}
html[data-tema] #pa-login .login-head .brand-crest {
  height: 52px;
  margin: 0 auto 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.25));
}
html[data-tema] #pa-login .login-head h2 { color: var(--vc-text); font: 700 22px/1.25 var(--vc-fonte); }
html[data-tema] #pa-login .login-head p { color: var(--vc-text-2); font-size: 13px; font-style: normal; }
html[data-tema] #pa-login form label { color: var(--vc-text-2); font-size: 12px; font-weight: 600; letter-spacing: normal; }
html[data-tema] #pa-login .btn-primary {
  min-height: 46px;
  border: 0;
  border-radius: var(--vc-r-md);
  background: var(--vc-ouro-acesso);
  color: var(--vc-ouro-acesso-texto);
  font: 700 14px/1 var(--vc-fonte);
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.22);
}
html[data-tema] #pa-login .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 0 28px rgba(255, 215, 0, 0.35); }
html[data-tema] #pa-login .pa-nota { color: var(--vc-text-3); opacity: 1; }

/* Ponto: o topo do relógio vira a barra do celular do CRM (48 px, cor do menu). */
html[data-tema] #pa-app .pa-topo {
  margin: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--vc-nav-border);
  border-radius: 0;
  background: var(--vc-nav-bg);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--vc-nav-text);
}
html[data-tema] #pa-app .pa-topo .brand-crest { height: 26px; filter: var(--vc-crest-sombra); }
html[data-tema] #pa-app .pa-nome { color: var(--vc-nav-active); font: 700 15px/1.2 var(--vc-fonte); letter-spacing: 0.025em; }
html[data-tema] #pa-app .pa-rodape a { color: var(--vc-link); }

/* Definir senha: cartão do CRM. A página não carrega a Urbanist de propósito
   (nenhum recurso externo numa página com token na URL): cai na fonte do sistema. */
html[data-tema] body.as-pagina {
  background-color: var(--vc-bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--vc-gold-soft), transparent 70%);
  color: var(--vc-text);
}
html[data-tema] .as-pagina .as-cartao {
  border: 1px solid var(--vc-border);
  border-color: var(--vc-rim);
  border-radius: var(--vc-r-xl);
  background: var(--vc-surface);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--vc-shadow-2);
}