/* GA-Chat — identidade visual do Grupo Astória nas páginas de acesso (login, esqueci a senha, definir nova senha).
   Só vale quando a página tem o contêiner de autenticação do Chatwoot (fundo "bg-n-brand/5"); o painel interno não é afetado.
   Paleta do ícone do Grupo Astória: vermelho #D82B40, âmbar #F9A819, preto quente #1F1A17, cinza #72706F.
   Observação: o Chatwoot fixa o azul #2781F6 direto nas classes (bg-n-brand, text-link, outline-n-brand), por isso
   elas são sobrescritas aqui, e não só as variáveis de cor. */

/* 1) Escala "azul" trocada pelo vermelho Astória (usada por componentes que leem as variáveis) */
html:has([class*="bg-n-brand/5"]) {
  --blue-1: 255 252 252 !important;
  --blue-2: 255 247 248 !important;
  --blue-3: 253 236 238 !important;
  --blue-4: 252 224 228 !important;
  --blue-5: 249 209 215 !important;
  --blue-6: 244 187 196 !important;
  --blue-7: 238 160 172 !important;
  --blue-8: 230 120 135 !important;
  --blue-9: 216 43 64 !important;
  --blue-10: 196 36 56 !important;
  --blue-11: 179 32 47 !important;
  --blue-12: 80 14 22 !important;
}
html.dark:has([class*="bg-n-brand/5"]) {
  --blue-1: 28 16 18 !important;
  --blue-2: 38 20 24 !important;
  --blue-3: 62 22 30 !important;
  --blue-4: 80 26 36 !important;
  --blue-5: 98 30 42 !important;
  --blue-6: 120 36 50 !important;
  --blue-7: 146 42 58 !important;
  --blue-8: 180 50 68 !important;
  --blue-9: 216 43 64 !important;
  --blue-10: 232 70 88 !important;
  --blue-11: 255 150 160 !important;
  --blue-12: 255 226 230 !important;
}

/* 2) Botão, links e foco dos campos no vermelho Astória */
html:has([class*="bg-n-brand/5"]) .bg-n-brand { background-color: #D82B40 !important; }
html:has([class*="bg-n-brand/5"]) .bg-n-brand\/10 { background-color: rgba(216, 43, 64, 0.1) !important; }
html:has([class*="bg-n-brand/5"]) .bg-n-brand\/20 { background-color: rgba(216, 43, 64, 0.2) !important; }
html:has([class*="bg-n-brand/5"]) .outline-n-brand,
html:has([class*="bg-n-brand/5"]) .focus\:outline-n-brand:focus,
html:has([class*="bg-n-brand/5"]) .dark\:focus\:outline-n-brand:focus { outline-color: #D82B40 !important; }
html:has([class*="bg-n-brand/5"]) .text-link,
html:has([class*="bg-n-brand/5"]) .text-n-brand { color: #D82B40 !important; }
html.dark:has([class*="bg-n-brand/5"]) .text-link,
html.dark:has([class*="bg-n-brand/5"]) .text-n-brand { color: #FF8A98 !important; }

/* 3) Fundo quente no modo claro (no escuro, mantém o do Chatwoot) */
html:not(.dark) [class*="bg-n-brand/5"] { background-color: #F8F5F2 !important; }

/* 4) Cartão com cantos arredondados e barra de destaque vermelho-âmbar no topo
   (a barra é um ::after recortado pelo overflow do cartão, para acompanhar os cantos arredondados) */
form.sm\:max-w-lg {
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(31, 26, 23, 0.08) !important;
}
form.sm\:max-w-lg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #D82B40 0%, #D82B40 70%, #F9A819 100%);
}

/* 5) Logomarca do Grupo Astória:
   - cartão "definir nova senha" (form.sm:max-w-lg), que não tinha logo;
   - tela de login: a imagem que o Chatwoot carrega (logo.svg / logo_dark.svg) é trocada pela logomarca, em tamanho maior. */
form.sm\:max-w-lg::before {
  content: "";
  display: block;
  width: 176px;
  height: 42px;
  margin: 0 0 26px;
  background: url("/brand-assets/logomarca-astoria.svg") left center / contain no-repeat;
}
html.dark form.sm\:max-w-lg::before { background-image: url("/brand-assets/logomarca-astoria-dark.svg"); }
html:has([class*="bg-n-brand/5"]) img[src$="brand-assets/logo.svg"] {
  content: url("/brand-assets/logomarca-astoria.svg");
  height: 2.9rem !important;
  width: auto !important;
}
html:has([class*="bg-n-brand/5"]) img[src$="brand-assets/logo_dark.svg"] {
  content: url("/brand-assets/logomarca-astoria-dark.svg");
  height: 2.9rem !important;
  width: auto !important;
}

/* 6) Título em preto quente (modo claro) e botões com cantos no padrão dos e-mails */
html:not(.dark) form.sm\:max-w-lg h1 { color: #1F1A17; }
html:has([class*="bg-n-brand/5"]) form button:not([type="button"]) { border-radius: 14px; }