/* public/css/index.css */

/* Tema Clean (Light) - Padrão */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  
  --accent-blue: #37AFB5; /* Cor oficial da logo */
  --accent-blue-hover: #298d92;
  --accent-green: #10b981;
  --accent-green-hover: #059669;
  
  --border-color: #e2e8f0;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --header-bg: rgba(255, 255, 255, 0.85);
  --footer-bg: #f8fafc;
  
  /* Gradientes */
  --grad-primary: linear-gradient(135deg, #37AFB5 0%, #10b981 100%);
  --grad-hover: linear-gradient(135deg, #298d92 0%, #059669 100%);
  
  /* Grid/fundo */
  --grid-bg-start: #f8fafc;
  --grid-bg-end: #e2e8f0;
  --grid-dot-color: rgba(15, 23, 42, 0.05);
}

/* Tema Dark - Secundário */
html.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  
  --accent-blue: #37AFB5; /* Cor oficial da logo */
  --accent-blue-hover: #4fc1c7;
  --accent-green: #10b981;
  --accent-green-hover: #34d399;
  
  --border-color: #334155;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --header-bg: rgba(15, 23, 42, 0.85);
  --footer-bg: #0b0f19;
  
  /* Gradientes */
  --grad-primary: linear-gradient(135deg, #37AFB5 0%, #065f46 100%);
  --grad-hover: linear-gradient(135deg, #4fc1c7 0%, #047857 100%);
  
  /* Grid/fundo */
  --grid-bg-start: #0f172a;
  --grid-bg-end: #090d16;
  --grid-dot-color: rgba(255, 255, 255, 0.05);
}

/* Transições globais suaves */
* {
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  top: 0 !important;
}

h1, h2, h3, h4, h5, h6, .font-black, .font-bold {
  font-family: 'Outfit', sans-serif !important;
}

/* Grid tecnológico customizado */
.tech-grid-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle at center, var(--grid-bg-start) 0%, var(--grid-bg-end) 100%) !important;
  background-image: radial-gradient(var(--grid-dot-color) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

/* Google Translate Custom Styling */
.goog-te-gadget {
  font-size: 0px !important;
  color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.goog-logo-link, 
.goog-te-banner-frame {
  display: none !important;
}

/* Cards Premium (Glassmorphism & Glow) */
.bg-slate-800\/50, .bg-slate-800\/80 {
  background-color: rgba(30, 41, 59, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bg-slate-800\/50:hover, .bg-slate-800\/80:hover {
  transform: translateY(-6px) scale(1.005) !important;
  border-color: rgba(55, 175, 181, 0.3) !important;
  box-shadow: 0 20px 40px -15px rgba(55, 175, 181, 0.2) !important;
}

/* Adaptação inteligente para o tema Clean (Light) das classes utilitárias do Tailwind existentes no site */
html:not(.dark) body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/80 {
  background-color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .bg-slate-800\/50:hover,
html:not(.dark) .bg-slate-800\/80:hover {
  border-color: rgba(55, 175, 181, 0.25) !important;
  box-shadow: 0 20px 40px -15px rgba(55, 175, 181, 0.15) !important;
}

html:not(.dark) .bg-slate-900\/90 {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-950 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .text-white {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
  color: #475569 !important;
}

html:not(.dark) .text-slate-500 {
  color: #64748b !important;
}

html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/50,
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-900 {
  border-color: #cbd5e1 !important;
}

/* Formulários e Inputs de texto */
input, select, textarea {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 4px rgba(55, 175, 181, 0.18) !important;
  background-color: rgba(30, 41, 59, 0.7) !important;
}

html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) input:focus, html:not(.dark) select:focus, html:not(.dark) textarea:focus {
  background-color: #ffffff !important;
  border-color: var(--accent-blue) !important;
}


/* Botões do painel admin/outros com cores escuras fixas */
html:not(.dark) .bg-slate-700 {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
html:not(.dark) .bg-slate-700:hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Links do Rodapé */
html:not(.dark) .hover\:text-slate-300:hover {
  color: #0f172a !important;
}

/* Ajustes dinâmicos de Sombras de Botão e Contêiner */
html:not(.dark) .shadow-blue-900\/50 {
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2), 0 4px 6px -4px rgba(37, 99, 235, 0.2) !important;
}

/* Efeitos especiais para botões no tema Clean */
html:not(.dark) .bg-blue-600 {
  background-color: #2563eb !important;
}
html:not(.dark) .bg-blue-600:hover {
  background-color: #1d4ed8 !important;
}

html:not(.dark) .bg-blue-600\/20 {
  background-color: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-500 {
  color: #2563eb !important;
}
html:not(.dark) .text-blue-400:hover,
html:not(.dark) .text-blue-500:hover {
  color: #1d4ed8 !important;
}

html:not(.dark) .text-emerald-400 {
  color: #059669 !important;
}

html:not(.dark) .bg-blue-500\/20 {
  background-color: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

html:not(.dark) .bg-red-500\/20 {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

html:not(.dark) .bg-red-500\/20:hover {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

/* WhatsApp Hover Dynamic adjustment */
html:not(.dark) .bg-green-500 {
  background-color: #22c55e !important;
}
html:not(.dark) .bg-green-500:hover {
  background-color: #16a34a !important;
}

/* Esconder elementos originais do Google Tradutor */
#google_translate_element,
.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner,
iframe[class*="goog"],
#goog-gt-tt {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

body {
  top: 0 !important;
}

/* Suporte de Tema para o Dropdown de Idiomas Customizado */
html:not(.dark) #lang-dropdown {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) #lang-dropdown button {
  color: #334155 !important;
}

html:not(.dark) #lang-dropdown button:hover {
  background-color: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
}

/* Inversão da logo no tema escuro */
html.dark img[src*="logo"] {
  filter: brightness(0) invert(1) !important;
}

/* Sobrescrita global de classes do Tailwind para usar o tom turquesa da logo */
.bg-blue-600,
.bg-blue-500 {
  background-color: var(--accent-blue) !important;
}

.bg-blue-600:hover,
.bg-blue-500:hover {
  background-color: var(--accent-blue-hover) !important;
}

.text-blue-400,
.text-blue-500,
.hover\:text-blue-400:hover,
.hover\:text-blue-500:hover {
  color: var(--accent-blue) !important;
}

.border-blue-500 {
  border-color: var(--accent-blue) !important;
}

.bg-blue-600\/20 {
  background-color: rgba(55, 175, 181, 0.1) !important;
  color: var(--accent-blue) !important;
  border-color: rgba(55, 175, 181, 0.3) !important;
}

.bg-blue-500\/20 {
  background-color: rgba(55, 175, 181, 0.1) !important;
  color: var(--accent-blue) !important;
  border-color: rgba(55, 175, 181, 0.2) !important;
}

.shadow-blue-500\/20,
.shadow-blue-900\/50 {
  box-shadow: 0 10px 15px -3px rgba(55, 175, 181, 0.2), 0 4px 6px -4px rgba(55, 175, 181, 0.2) !important;
}


/* Forçar texto branco em todos os botões com fundo verde/teal, inclusive no light mode, exceto em elementos de texto com gradiente (bg-clip-text) */
html:not(.dark) .bg-green-500:not(.bg-clip-text), html:not(.dark) .bg-green-600:not(.bg-clip-text),
html:not(.dark) .bg-teal-500:not(.bg-clip-text), html:not(.dark) .bg-teal-600:not(.bg-clip-text),
html:not(.dark) .bg-gradient-to-r.from-teal-500:not(.bg-clip-text),
html:not(.dark) .bg-gradient-to-br.from-teal-400:not(.bg-clip-text),
html:not(.dark) .bg-gradient-to-r.from-teal-400:not(.bg-clip-text),
html.dark .bg-green-500:not(.bg-clip-text), html.dark .bg-green-600:not(.bg-clip-text),
html.dark .bg-teal-500:not(.bg-clip-text), html.dark .bg-teal-600:not(.bg-clip-text),
html.dark .bg-gradient-to-r.from-teal-500:not(.bg-clip-text),
html.dark .bg-gradient-to-br.from-teal-400:not(.bg-clip-text),
html.dark .bg-gradient-to-r.from-teal-400:not(.bg-clip-text) {
    color: #ffffff !important;
}

html:not(.dark) .bg-green-500 *:not(.bg-clip-text), html:not(.dark) .bg-green-600 *:not(.bg-clip-text),
html:not(.dark) .bg-teal-500 *:not(.bg-clip-text), html:not(.dark) .bg-teal-600 *:not(.bg-clip-text),
html:not(.dark) .bg-gradient-to-r.from-teal-500 *:not(.bg-clip-text),
html:not(.dark) .bg-gradient-to-br.from-teal-400 *:not(.bg-clip-text),
html:not(.dark) .bg-gradient-to-r.from-teal-400 *:not(.bg-clip-text),
html.dark .bg-green-500 *:not(.bg-clip-text), html.dark .bg-green-600 *:not(.bg-clip-text),
html.dark .bg-teal-500 *:not(.bg-clip-text), html.dark .bg-teal-600 *:not(.bg-clip-text),
html.dark .bg-gradient-to-r.from-teal-500 *:not(.bg-clip-text),
html.dark .bg-gradient-to-br.from-teal-400 *:not(.bg-clip-text),
html.dark .bg-gradient-to-r.from-teal-400 *:not(.bg-clip-text) {
    color: #ffffff !important;
}

/* Fix for Tailwind bg-clip-text rendering/transition issues in Chrome/Safari */
.bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  transition: none !important;
}