/* ============================================================================
   A CARA DA ELYVIA no Chatwoot — acabamento das telas que levam o nome Elyvia.
   Etapa: "O Chatwoot com a cara da Elyvia" (24/08/2026).

   COMO ISTO ENTRA: injetado pelo nginx (sub_filter) no <head> de toda pagina
   HTML servida por atende.elyviabrasil.com — NAO altera o codigo-fonte nem a
   imagem do Chatwoot. Ver o snippet /etc/nginx/snippets/elyvia-marca.conf.

   DIVIDA DE MANUTENCAO ASSUMIDA: o Chatwoot 4.16.2 nao tem cor de marca em
   config; a cor vem de classes compiladas (ex.: .bg-n-brand = azul fixo). Por
   isso aqui sobrescrevemos classes utilitarias, e escopamos as telas de auth
   por ancoras estaveis dessas telas:
     - LOGIN e ESQUECI:  <main class="... bg-n-brand/5 ...">  (fundo com tinta de marca)
     - DEFINIR e CONVITE: <form class="... max-w-lg ... bg-white ...">  (o form E o cartao)
   O painel de conversas NAO tem nenhuma das duas ancoras, entao fica intocado.
   Quando o Chatwoot atualizar e renomear uma classe, a tela pode "voltar ao
   azul": o conserto e reabrir a tela, achar a ancora nova no DevTools e ajustar
   aqui. Procedimento completo no vault.

   MARCA (master somente-leitura em .../Elyvia Planos de Saude/marca/):
     creme #F4EFE3 · floresta #0E3A2F · tinta #12211C · brasa #BF3F18 ·
     brasa clara #EF8761 · borda #D2C6AB · raio 14px.
     PROIBIDO brasa sobre floresta (2,37:1) — aqui a brasa so aparece sobre
     creme/branco (botao) e como realce.
   ========================================================================== */

/* ------------------------------- fontes ---------------------------------- */
@font-face { font-family:'LexendElyvia'; src:url('/marca/Lexend.woff2') format('woff2');
  font-weight:100 900; font-display:swap; }
@font-face { font-family:'PlexElyvia'; src:url('/marca/IBMPlexSans.woff2') format('woff2');
  font-weight:100 700; font-display:swap; }

/* ===== 1. COR DA MARCA (vale em TODO o painel) — o azul vira brasa ======== */
.bg-n-brand { background-color:#BF3F18 !important; }
.hover\:bg-n-brand:hover { background-color:#A8380F !important; }
.text-n-brand { color:#BF3F18 !important; }
.border-n-brand { border-color:#BF3F18 !important; }
.bg-n-brand:focus-visible { outline:3px solid #EF8761 !important; outline-offset:2px !important; }

/* ===== 2. TELAS DE AUTENTICACAO ==========================================
   Ancoras: MAIN (login/esqueci) e FORM.max-w-lg (definir/convite).          */

/* -- fundo creme com textura de papel, no lugar do azul -- */
main[class*="bg-n-brand/5"],
div[class*="antialiased"]:has(> form[class*="max-w-lg"]),
div[class*="antialiased"]:has(> div > form[class*="max-w-lg"]),
div[class*="antialiased"]:has(section form) {
  background-color:#F4EFE3 !important;
  background-image:
    radial-gradient(rgba(18,33,28,.028) 1px, transparent 1px),
    radial-gradient(rgba(18,33,28,.022) 1px, transparent 1px) !important;
  background-size:22px 22px, 22px 22px !important;
  background-position:0 0, 11px 11px !important;
}

/* -- o cartao central: raio 14, borda da casa, sombra, fundo creme claro -- */
main[class*="bg-n-brand/5"] section:has(form),
form[class*="max-w-lg"] {
  border:1px solid #D2C6AB !important;
  border-radius:14px !important;
  box-shadow:0 8px 30px rgba(14,58,47,.10) !important;
  background-color:#FBF8F1 !important;
}

/* -- tipografia: Lexend nos titulos, IBM Plex nos campos e botoes -- */
main[class*="bg-n-brand/5"] h1, main[class*="bg-n-brand/5"] h2,
form[class*="max-w-lg"] h1, form[class*="max-w-lg"] h2 {
  font-family:'LexendElyvia',-apple-system,'Segoe UI',Roboto,sans-serif !important;
  color:#0E3A2F !important; letter-spacing:-.02em;
}
main[class*="bg-n-brand/5"] input, main[class*="bg-n-brand/5"] button,
main[class*="bg-n-brand/5"] label, form[class*="max-w-lg"] input,
form[class*="max-w-lg"] button, form[class*="max-w-lg"] label {
  font-family:'PlexElyvia',-apple-system,'Segoe UI',Roboto,sans-serif !important;
}

/* -- links em brasa (o "Esqueceu a senha" e afins) -- */
main[class*="bg-n-brand/5"] a, form[class*="max-w-lg"] a { color:#BF3F18 !important; }

/* -- botao Entrar/Enviar: altura confortavel e cantos da casa -- */
main[class*="bg-n-brand/5"] button.bg-n-brand,
form[class*="max-w-lg"] button.bg-n-brand {
  min-height:48px !important; border-radius:12px !important;
  font-weight:600 !important; letter-spacing:.01em;
}

/* -- campos: foco na cor de realce -- */
main[class*="bg-n-brand/5"] input:focus, form[class*="max-w-lg"] input:focus {
  outline:2px solid #EF8761 !important; outline-offset:1px !important;
}

/* -- assinatura no rodape da tela -- */
main[class*="bg-n-brand/5"]::after,
form[class*="max-w-lg"]::after {
  content:'Elyvia · Planos de Saúde';
  display:block; text-align:center; margin-top:24px;
  font-family:'PlexElyvia',-apple-system,'Segoe UI',sans-serif;
  font-size:13px; letter-spacing:.06em; color:#4A5C54;
}