/* ═══════════════════════════════════════════════════════════
   PALETA PROFISSIONAL MULTI
   ═══════════════════════════════════════════════════════════
   
   Primária: #1E40AF (Azul Corporativo Profundo)
   Secundária: #334155 (Cinza Slate Elegante)
   Destaque: #3B82F6 (Azul Vibrante)
   Acentos: #0EA5E9 (Cyan Profissional)
   
   Background: #0F172A → #1E293B (Gradiente Escuro)
   Texto: #F8FAFC (Branco Suave)
   
   ═══════════════════════════════════════════════════════════ */

/* Variáveis CSS Personalizadas */
:root {
  --primary: 30 64 175 !important; /* #1E40AF - Azul Corporativo */
  --primary-hover: 29 78 216 !important; /* #1D4ED8 */
  --primary-light: 59 130 246 !important; /* #3B82F6 */
  --primary-foreground: 248 250 252 !important;
  
  --secondary: 51 65 85 !important; /* #334155 - Slate */
  --secondary-foreground: 248 250 252 !important;
  
  --accent: 14 165 233 !important; /* #0EA5E9 - Cyan Profissional */
  --accent-foreground: 248 250 252 !important;
  
  --ring: 30 64 175 !important;
  --theme-color: #1E40AF !important;
  
  --background: 15 23 42 !important; /* #0F172A - Slate 900 */
  --foreground: 248 250 252 !important;
}

/* ═══════════════════════════════════════════════════════════
   BACKGROUNDS - Tons Corporativos
   ═══════════════════════════════════════════════════════════ */

.bg-blue-300 {
  background-color: #3B82F6 !important; /* Azul Vibrante */
}

.bg-blue-400 {
  background-color: #2563EB !important; /* Azul Médio */
}

.bg-blue-500,
.bg-primary {
  background-color: #1E40AF !important; /* Azul Corporativo */
}

.bg-blue-600 {
  background-color: #1D4ED8 !important; /* Azul Escuro */
}

.hover\:bg-blue-400:hover {
  background-color: #2563EB !important;
}

.hover\:bg-blue-600:hover {
  background-color: #1E3A8A !important; /* Azul Muito Escuro */
}

/* ═══════════════════════════════════════════════════════════
   TEXTOS - Hierarquia Visual Profissional
   ═══════════════════════════════════════════════════════════ */

.text-blue-300 {
  color: #93C5FD !important; /* Azul Claro */
}

.text-blue-400 {
  color: #60A5FA !important; /* Azul Médio Claro */
}

.text-blue-600 {
  color: #2563EB !important; /* Azul Vibrante */
}

.text-primary {
  color: #3B82F6 !important; /* Azul Destaque */
}

/* ═══════════════════════════════════════════════════════════
   BORDAS - Elegantes e Sutis
   ═══════════════════════════════════════════════════════════ */

.border-blue-400 {
  border-color: #60A5FA !important;
}

.border-blue-500,
.border-primary {
  border-color: #3B82F6 !important;
}

.border-blue-600 {
  border-color: #2563EB !important;
}

/* ═══════════════════════════════════════════════════════════
   GRADIENTES - Suaves e Profissionais
   ═══════════════════════════════════════════════════════════ */

.from-blue-500 {
  --tw-gradient-from: #3B82F6 !important; /* Azul Vibrante */
  --tw-gradient-to: rgb(59 130 246 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-blue-600 {
  --tw-gradient-from: #2563EB !important; /* Azul Médio */
  --tw-gradient-to: rgb(37 99 235 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-500 {
  --tw-gradient-to: #3B82F6 !important;
}

.to-blue-600 {
  --tw-gradient-to: #2563EB !important;
}

.to-blue-700 {
  --tw-gradient-to: #1D4ED8 !important;
}

.via-blue-800 {
  --tw-gradient-via: #1E40AF !important; /* Azul Corporativo */
  --tw-gradient-to: rgb(30 64 175 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.via-blue-900 {
  --tw-gradient-via: #1E3A8A !important; /* Azul Muito Escuro */
  --tw-gradient-to: rgb(30 58 138 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

/* Hover states para gradientes */
.hover\:from-blue-600:hover {
  --tw-gradient-from: #2563EB !important;
}

.hover\:from-blue-700:hover {
  --tw-gradient-from: #1D4ED8 !important;
}

.hover\:to-blue-600:hover {
  --tw-gradient-to: #2563EB !important;
}

.hover\:to-blue-700:hover {
  --tw-gradient-to: #1D4ED8 !important;
}

.hover\:to-blue-800:hover {
  --tw-gradient-to: #1E40AF !important;
}

/* ═══════════════════════════════════════════════════════════
   BOTÕES - Design Moderno e Corporativo
   ═══════════════════════════════════════════════════════════ */

button[class*="bg-blue"],
.btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%) !important;
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39) !important;
  transition: all 0.3s ease !important;
}

button[class*="bg-blue"]:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E3A8A 100%) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════
   FOCUS STATES - Acessibilidade Profissional
   ═══════════════════════════════════════════════════════════ */

.focus\:border-blue-400:focus {
  border-color: #60A5FA !important;
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: #3B82F6 !important;
}

/* ═══════════════════════════════════════════════════════════
   BACKGROUNDS COM OPACIDADE - Sobreposições Elegantes
   ═══════════════════════════════════════════════════════════ */

.bg-blue-500\/10 {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

.bg-blue-500\/20 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

.bg-blue-500\/30 {
  background-color: rgba(59, 130, 246, 0.3) !important;
}

.bg-blue-600\/20 {
  background-color: rgba(37, 99, 235, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   BORDAS COM OPACIDADE - Separadores Sutis
   ═══════════════════════════════════════════════════════════ */

.border-blue-400\/20 {
  border-color: rgba(96, 165, 250, 0.2) !important;
}

.border-blue-400\/30 {
  border-color: rgba(96, 165, 250, 0.3) !important;
}

.border-blue-500\/20 {
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.border-blue-500\/30 {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.border-blue-600\/20 {
  border-color: rgba(37, 99, 235, 0.2) !important;
}

.border-blue-600\/30 {
  border-color: rgba(37, 99, 235, 0.3) !important;
}

.border-blue-600\/50 {
  border-color: rgba(37, 99, 235, 0.5) !important;
}

.hover\:border-blue-400\/50:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
}

/* Textos com opacidade */
.text-blue-100\/60 {
  color: rgba(219, 234, 254, 0.6) !important;
}

.text-blue-100\/90 {
  color: rgba(219, 234, 254, 0.9) !important;
}

.text-blue-200\/80 {
  color: rgba(191, 219, 254, 0.8) !important;
}

/* Placeholders */
.placeholder\:text-blue-300::placeholder {
  color: #190afb !important;
  opacity: 0.5;
}

/* Estados hover especiais */
.hover\:from-blue-50:hover {
  --tw-gradient-from: #f0edff !important;
}

/* ═══════════════════════════════════════════════════════════
   CYAN/TEAL - Tom de Acento Profissional
   ═══════════════════════════════════════════════════════════ */

.bg-cyan-300,
.bg-cyan-400 {
  background-color: #0EA5E9 !important; /* Cyan Profissional */
}

.bg-cyan-500 {
  background-color: #0284C7 !important; /* Cyan Escuro */
}

.bg-cyan-600 {
  background-color: #0369A1 !important; /* Cyan Muito Escuro */
}

.text-cyan-200 {
  color: #67E8F9 !important; /* Cyan Claro */
}

.text-cyan-300 {
  color: #22D3EE !important; /* Cyan Médio */
}

.text-cyan-400 {
  color: #0EA5E9 !important; /* Cyan Vibrante */
}

.border-cyan-400\/20 {
  border-color: rgba(14, 165, 233, 0.2) !important;
}

.border-cyan-400\/30 {
  border-color: rgba(14, 165, 233, 0.3) !important;
}

.border-cyan-500\/20 {
  border-color: rgba(2, 132, 199, 0.2) !important;
}

.from-cyan-300,
.from-cyan-400 {
  --tw-gradient-from: #0EA5E9 !important;
  --tw-gradient-to: rgb(14 165 233 / 0) !important;
}

.from-cyan-500 {
  --tw-gradient-from: #0284C7 !important;
  --tw-gradient-to: rgb(2 132 199 / 0) !important;
}

.from-cyan-600\/20 {
  --tw-gradient-from: rgba(3, 105, 161, 0.2) !important;
}

.to-cyan-600\/20 {
  --tw-gradient-to: rgba(3, 105, 161, 0.2) !important;
}

.hover\:bg-cyan-600:hover,
.focus\:bg-cyan-600:focus {
  background-color: #0369A1 !important;
}

.hover\:bg-cyan-700:hover {
  background-color: #0C4A6E !important; /* Cyan Super Escuro */
}

.hover\:from-cyan-600:hover {
  --tw-gradient-from: #0369A1 !important;
}

.hover\:text-cyan-100:hover {
  color: #CFFAFE !important; /* Cyan Super Claro */
}

.focus\:border-cyan-500:focus {
  border-color: #0284C7 !important;
}

.bg-cyan-500\/10 {
  background-color: rgba(2, 132, 199, 0.1) !important;
}

.bg-cyan-500\/20 {
  background-color: rgba(2, 132, 199, 0.2) !important;
}

.bg-cyan-400\/20 {
  background-color: rgba(14, 165, 233, 0.2) !important;
}

.text-cyan-100\/60 {
  color: rgba(207, 250, 254, 0.6) !important;
}

.text-cyan-100\/90 {
  color: rgba(207, 250, 254, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════
   INDIGO - Tom Corporativo Alternativo
   ═══════════════════════════════════════════════════════════ */

.bg-indigo-400 {
  background-color: #818CF8 !important; /* Indigo Claro */
}

.bg-indigo-500 {
  background-color: #6366F1 !important; /* Indigo Médio */
}

.bg-indigo-500\/20 {
  background-color: rgba(99, 102, 241, 0.2) !important;
}

.text-indigo-400 {
  color: #818CF8 !important;
}

.from-indigo-500\/10 {
  --tw-gradient-from: rgba(99, 102, 241, 0.1) !important;
}

.to-indigo-500\/10 {
  --tw-gradient-to: rgba(99, 102, 241, 0.1) !important;
}

.via-indigo-600 {
  --tw-gradient-via: #4F46E5 !important; /* Indigo Escuro */
  --tw-gradient-to: rgb(79 70 229 / 0) !important;
}

.to-indigo-300 {
  --tw-gradient-to: #A5B4FC !important; /* Indigo Muito Claro */
}

.to-indigo-600 {
  --tw-gradient-to: #4F46E5 !important;
}

.to-indigo-700 {
  --tw-gradient-to: #4338CA !important;
}

.to-indigo-900 {
  --tw-gradient-to: #312E81 !important;
}

.hover\:bg-indigo-400:hover {
  background-color: #6366F1 !important;
}

.hover\:to-indigo-700:hover {
  --tw-gradient-to: #4338CA !important;
}

.hover\:to-indigo-800:hover {
  --tw-gradient-to: #3730A3 !important;
}

/* ═══════════════════════════════════════════════════════════
   GROUP HOVER STATES - Interações Elegantes
   ═══════════════════════════════════════════════════════════ */

.group:hover .group-hover\:bg-blue-500\/30 {
  background-color: rgba(59, 130, 246, 0.3) !important;
}

.group:hover .group-hover\:bg-indigo-500\/30 {
  background-color: rgba(99, 102, 241, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   DATA STATES - Estados Especiais
   ═══════════════════════════════════════════════════════════ */

[data-state="checked"] .bg-cyan-600,
[data-state="checked"] .bg-primary {
  background-color: #2563EB !important;
}

/* ═══════════════════════════════════════════════════════════
   AJUSTES FINAIS - Garantir Consistência
   ═══════════════════════════════════════════════════════════ */

/* Garantir que o hover "from blue-50" fique profissional */
.hover\:from-blue-50:hover {
  --tw-gradient-from: #EFF6FF !important;
}

/* Placeholder text com tom profissional */
.placeholder\:text-blue-300::placeholder {
  color: #93C5FD !important;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   OCULTAR LOGO - Customização Multi
   ═══════════════════════════════════════════════════════════ */

/* Ocultar elementos de logo comuns */
.text-2xl.font-bold.text-white,
[class*="logo"],
[id*="logo"],
img[alt*="logo" i],
img[alt*="CSFBANK" i],
img[alt*="Multi" i],
svg[class*="logo"],
.header-logo,
.navbar-logo,
.site-logo,
.brand-logo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Se o logo estiver dentro de um link ou div */
a > .text-2xl.font-bold.text-white,
div > .text-2xl.font-bold.text-white {
  display: none !important;
}

/* Ocultar texto específico que contenha o nome da marca */
div:has(> .text-2xl.font-bold.text-white) {
  /* O container do logo mantém o espaço mas o texto fica invisível */
}

/* Alternativa: Ocultar qualquer texto grande e bold no header */
header .text-2xl.font-bold,
nav .text-2xl.font-bold {
  display: none !important;
}