/* ====================================================================================================================
   TEMA ERP (30/09/2026) — o visual alternativo do Vortex, regra da casa: Configurações › Aparência liga para todos
   (parâmetro ui_tema_erp; classe html.vx-tema-erp). Nasceu como "Modo Granito", no menu da paleta; o Daniel pediu o
   nome e o lugar: "pode ficar nas configurações; em vez de modo granito, ponha outro nome melhor: Tema ERP".

   O Daniel: "não quero que pareça que foi criado por IA — todo mundo, ao ver o sistema, pensa que foi o Claude que fez;
   isso é ruim, não passa credibilidade". E, na mesma conversa: "a identidade deve permanecer, de cores e animações".

   Então o Tema ERP é A MESMA MARCA COM OUTRA EXECUÇÃO. Fica o que é identidade: o verde-água sobre o escuro (e o claro,
   no tema claro), o vórtice girando, a abertura, o céu da entrada, as transições. Sai o que é tique de sistema gerado por
   IA — e tem regra:
   1. CHAPADO. O botão e a barra em verde cheio, sem degradê; nenhum brilho (glow) em volta de nada; nenhum vidro fosco;
      nenhuma sombra de elevação. Separação por fio de 1px, como em impresso.
   2. CANTO VIVO. Raio de 2 a 3px; a pílula vira etiqueta.
   3. HIERARQUIA NA TIPOGRAFIA, não na decoração. Archivo, grotesca de origem industrial com larguras variáveis: título
      condensado e pesado, texto em largura normal, número tabular. Rótulo em caixa baixa, sem letra espaçada. A palavra
      "vortex" continua na letra da marca.
   4. SEM ENFEITE VAZIO. Sai o círculo decorativo no canto do cartão e o holofote atrás da tela.

   O CSS de base ficou temável antes disto (30/09/2026): o que estava escrito direto — o verde-água, o raio, a pílula, a
   caixa alta, o espaço entre letras, a sombra decorativa, o brilho dos degradês, o preenchimento em degradê — virou
   variável com o valor de sempre como padrão. Aqui só se trocam os valores. O documento que vai para o cliente (a
   oferta, o PDF, a campanha) nunca recebe o modo.
   ==================================================================================================================== */

/* ── 1. OS VALORES — no html e no layout (o tema de cor escolhido grava as variáveis no .mud-layout) ── */
html.vx-tema-erp,
html.vx-tema-erp .mud-layout {
  --vx-cheio: var(--vx-teal-br);        /* o preenchimento que era degradê entre os dois verdes: o verde cheio */
  --vx-teal-glow: transparent;          /* o brilho em volta */
  --vx-brilho: transparent;             /* o holofote dos degradês decorativos */
  --vx-sombra: none;
  --vx-sombra-texto: none;
  --vx-raio: .22;
  --vx-pill: 3px;
  --vx-r: 3px;
  --vx-r-lg: 4px;
  --vx-m-raio: 3px;
  --vx-caixa: none;
  --vx-tracking: 0;
  --vx-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --vx-sans: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --vx-marca: 'Outfit', 'Segoe UI', system-ui, sans-serif;   /* a letra da palavra "vortex" — identidade */
  --mud-default-borderradius: 3px;
  --mud-typography-default-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
}

/* ── 2. O FUNDO: a cor de sempre, chapada — sem o holofote azulado num canto. Sem vidro (o papel de parede da casa,
   quando há, continua) ── */
html.vx-tema-erp,
html.vx-tema-erp body { background: var(--vx-bg) !important; }
html.vx-tema-erp *,
html.vx-tema-erp *::before,
html.vx-tema-erp *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* o que era vidro precisa ser sólido para ler por cima do papel de parede */
html.vx-tema-erp .mud-appbar { background: var(--vx-bg) !important; border-bottom: 1px solid var(--vx-border) !important; box-shadow: none !important; }
html.vx-tema-erp .mud-drawer { border-right: 1px solid var(--vx-border) !important; box-shadow: none !important; }
html.vx-tema-erp body.vx-wall.vx-vidro .vx-card,
html.vx-tema-erp body.vx-wall.vx-vidro .vx-res-item,
html.vx-tema-erp body.vx-wall.vx-vidro .vx-res-gcab,
html.vx-tema-erp body.vx-wall.vx-vidro .vx-erp-card,
html.vx-tema-erp body.vx-wall.vx-vidro .mud-drawer { background: var(--vx-surface) !important; }

/* ── 3. TIPOGRAFIA ── */
html.vx-tema-erp body,
html.vx-tema-erp .mud-typography,
html.vx-tema-erp .mud-button-root,
html.vx-tema-erp input, html.vx-tema-erp textarea, html.vx-tema-erp select, html.vx-tema-erp button {
  font-family: var(--vx-sans);
  font-feature-settings: normal;
}
html.vx-tema-erp body { font-size: 14px; letter-spacing: 0; }
/* o título da tela: condensado, pesado, grande — a hierarquia está aqui, e não num ícone com brilho */
html.vx-tema-erp h1,
html.vx-tema-erp .vx-page-titulo,
html.vx-tema-erp .vx-page-cab h1,
html.vx-tema-erp .vx-page-head h1 {
  font-family: var(--vx-display);
  font-stretch: 78%;
  font-weight: 750;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.01em;
}
html.vx-tema-erp h2 { font-family: var(--vx-display); font-stretch: 82%; font-weight: 700; letter-spacing: -.005em; }
html.vx-tema-erp h3,
html.vx-tema-erp h4 { font-family: var(--vx-display); font-stretch: 88%; font-weight: 650; }
/* o número grande (KPI, valor): condensado e tabular — lê como tabela de preço */
html.vx-tema-erp .vx-kpi-val,
html.vx-tema-erp .vx-kpi .k-val,
html.vx-tema-erp .vx-mk-kpi b,
html.vx-tema-erp .vx-num {
  font-family: var(--vx-display);
  font-stretch: 80%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* o rótulo que era caixa alta espaçada: caixa baixa, peso no lugar do espaço */
html.vx-tema-erp .vx-kpi-lbl,
html.vx-tema-erp .vx-kpi .k-label { font-size: 12.5px; font-weight: 600; color: var(--vx-muted); }
html.vx-tema-erp .vx-rk-lin.cab,
html.vx-tema-erp .mud-table-head .mud-table-cell { font-size: 12px; font-weight: 650; color: var(--vx-muted); }
/* a palavra "vortex" fica na letra da marca, em qualquer lugar */
html.vx-tema-erp .vx-brand,
html.vx-tema-erp .vx-login-brand h1,
html.vx-tema-erp .vx-splash-word { font-family: var(--vx-marca) !important; font-stretch: 100% !important; }

/* ── 4. SEM ENFEITE VAZIO ── */
/* o hero em degradê (o degradê está no style de cada tela, por isso o !important): superfície e um fio verde */
html.vx-tema-erp .vx-hero {
  background: var(--vx-surface) !important;
  border: 1px solid var(--vx-border) !important;
  border-left: 4px solid var(--vx-teal-br) !important;
  box-shadow: none !important;
}
html.vx-tema-erp .vx-hero h1 { color: var(--vx-text); }
html.vx-tema-erp .vx-hero p { color: var(--vx-muted); }
html.vx-tema-erp .vx-hero-icon { background: transparent !important; border: 1px solid var(--vx-border-2); }
html.vx-tema-erp .vx-hero .mud-icon-root { color: var(--vx-teal-br) !important; }
/* o círculo decorativo no canto do cartão e do hero */
html.vx-tema-erp .vx-hero::after,
html.vx-tema-erp .vx-kpi::after,
html.vx-tema-erp .vx-kpi::before { display: none !important; }
/* sem sombra: o cartão se separa por fio */
html.vx-tema-erp .vx-card,
html.vx-tema-erp .vx-kpi,
html.vx-tema-erp .mud-paper { box-shadow: none !important; }
/* o que abre por cima (menu, diálogo, painel do sino) também */
html.vx-tema-erp .mud-popover,
html.vx-tema-erp .mud-dialog,
html.vx-tema-erp .vx-avisos,
html.vx-tema-erp .vx-menu-tema,
html.vx-tema-erp .vx-dlg { border: 1px solid var(--vx-border-2) !important; box-shadow: none !important; }
/* a barra do mês a mês: verde cheio */
html.vx-tema-erp .vx-rx-evol .col i { background: var(--vx-teal-br) !important; }

/* ── 5. BOTÃO: verde cheio (ou fio); nunca degradê nem brilho ── */
html.vx-tema-erp .mud-button-filled { box-shadow: none !important; background-image: none !important; }
html.vx-tema-erp .mud-button-root { font-weight: 600; letter-spacing: 0; }
/* o anel de foco do teclado; o [tabindex="-1"] é o título que o Blazor foca ao navegar — esse não se contorna */
html.vx-tema-erp button:focus-visible,
html.vx-tema-erp a:focus-visible,
html.vx-tema-erp [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--vx-teal-br) !important; outline-offset: 2px; }
html.vx-tema-erp [tabindex="-1"]:focus { outline: none !important; }

/* ── 6. PÍLULA VIRA ETIQUETA; a escolhida em verde cheio, sem brilho ── */
html.vx-tema-erp .pills button,
html.vx-tema-erp .pills a { border-radius: 2px !important; box-shadow: none !important; }
html.vx-tema-erp .pills button.on,
html.vx-tema-erp .pills a.on,
html.vx-tema-erp .vx-conc-modo .pills a.on {
  background: var(--vx-teal-br) !important;
  border-color: var(--vx-teal-br) !important;
  color: var(--vx-sobre-destaque, #04110c) !important;
}
html.vx-tema-erp .pills button.on i,
html.vx-tema-erp .pills a.on i { color: var(--vx-sobre-destaque, #04110c) !important; opacity: .75; }

/* ── 7. O MENU LATERAL: o item ativo é um fio verde de 3px e o peso da letra — sem pílula acesa ── */
html.vx-tema-erp .mud-nav-link { border-radius: 0 !important; }
html.vx-tema-erp .mud-nav-link.active:not(.mud-nav-link-disabled) {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--vx-teal-br) !important;
}

/* ── 8. A ENTRADA: o céu fica (é identidade); o formulário vai para a esquerda, sólido e sem vidro — a assimetria dá o
   tom, e o lado direito fica para o céu ── */
html.vx-tema-erp .vx-login {
  place-items: center start;
  padding: 24px 24px 24px clamp(24px, 11vw, 180px);
}
html.vx-tema-erp .vx-login-card {
  background: var(--vx-surface) !important;
  border: 1px solid var(--vx-border-2) !important;
  border-left: 3px solid var(--vx-teal-br) !important;
  max-width: 380px;
}
html.vx-tema-erp .vx-field label { font-size: 12.5px; font-weight: 600; margin-left: 0; }
html.vx-tema-erp .vx-input:focus { box-shadow: none !important; }
html.vx-tema-erp .vx-btn { font-weight: 650; }
@media (max-width: 640px) {
  html.vx-tema-erp .vx-login { padding: 24px; place-items: center; }
}