/* ============================================
   dark-theme.css - Motor de Modo Oscuro Global (OLED Midnight Premium)
   ============================================ */

/* -------------------------------------------------------------
 * 1. REESCRITURA DE VARIABLES CSS (app.css)
 * ------------------------------------------------------------- */
html.dark {
    /* Neutrals - OLED Midnight */
    --bg-app:    #1A100C !important; /* Zinc 950 - True Black */
    --bg-card:   #271813 !important; /* Zinc 900 - Carbón Elevado */
    --bg-input:  #36221C !important; /* Zinc 800 - Input oscuro */
    --border:    #36221C !important; /* Zinc 800 - Bordes sutiles */
    
    /* Textos - Platinos legibles sin deslumbrar */
    --text-primary:   #fafafa !important; /* Zinc 50 */
    --text-secondary: #a1a1aa !important; /* Zinc 400 */
    --text-muted:     #71717a !important; /* Zinc 500 */
    
    /* Colores Institucionales en Modo Oscuro */
    --canaco-brown:   #0A0706 !important; /* Header casi negro */
}

/* Fix para la barra de navegación (Bottom Nav) */
html.dark .tab-item {
    color: var(--text-muted) !important;
}

html.dark .tab-item.tab-active {
    color: #FAFAFA !important; /* Activo: Blanco brillante en modo oscuro */
}
/* El punto indicador se queda dorado (var(--canaco-gold)) automáticamente */


/* -------------------------------------------------------------
 * 2. OVERRIDES DE CLASES TAILWIND (portal-socio.html legacy)
 * ------------------------------------------------------------- */

/* Base Background and Text Colors */
html.dark body {
    background-color: #1A100C !important; 
    color: #fafafa !important; 
}

/* Common Backgrounds (Tarjetas blancas a Carbón) */
html.dark .bg-white {
    background-color: #271813 !important; 
    color: #fafafa !important;
    border: 1px solid #36221C !important; /* Borde sutil para separar tarjetas */
}

/* Fondos Grises Genéricos (Convertir a True Black) */
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
    background-color: #1A100C !important; 
    color: #fafafa !important;
}

/* Section Headers (Mi Identidad) */
html.dark .section-header {
    background-color: #271813 !important;
    border-left-color: var(--canaco-gold, #ffc107) !important;
    border-top: 1px solid #36221C !important;
    border-right: 1px solid #36221C !important;
    border-bottom: 1px solid #36221C !important;
}
html.dark .section-header h3 {
    color: #fafafa !important;
}
html.dark .section-header p {
    color: #a1a1aa !important;
}

/* Fondos de Header o Sidebar legacy */
html.dark .bg-slate-800,
html.dark .bg-slate-900 {
    background-color: #0A0706 !important;
}

/* Hover States for Backgrounds */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-50:hover {
    background-color: #36221C !important; 
}

/* Text Colors */
html.dark .text-gray-900, html.dark .text-gray-800,
html.dark .text-slate-900, html.dark .text-slate-800 {
    color: #fafafa !important; 
}

html.dark .text-gray-700, html.dark .text-gray-600,
html.dark .text-slate-700, html.dark .text-slate-600 {
    color: #d4d4d8 !important; 
}

html.dark .text-gray-500, html.dark .text-slate-500 {
    color: #a1a1aa !important; 
}

/* Borders */
html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300,
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300,
html.dark .border {
    border-color: #36221C !important; 
}

/* Specific Sidebar / Navbar adjustments */
html.dark aside,
html.dark header,
html.dark nav {
    border-color: #36221C !important;
}

/* Form Inputs, Textareas, Selects */
html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"],
html.dark input[type="number"], html.dark input[type="tel"], html.dark input[type="date"],
html.dark input[type="time"], html.dark textarea, html.dark select {
    background-color: #36221C !important; 
    border-color: #3f3f46 !important; 
    color: #fafafa !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #71717a !important;
}

/* Shadows (Elevación con Glow sutil en modo oscuro) */
html.dark .shadow-sm, html.dark .shadow, html.dark .shadow-md, 
html.dark .shadow-lg, html.dark .shadow-xl {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.8), 0 0 2px rgba(255, 255, 255, 0.05) !important;
}


/* -------------------------------------------------------------
 * 3. ATENUACIÓN DE DEGRADADOS Y WIDGETS (Dimming)
 * ------------------------------------------------------------- */

/* Avisos y Eventos (Atenuar degradado morado cegador) */
html.dark .bg-gradient-to-br.from-indigo-600.to-purple-600 {
    background: linear-gradient(to bottom right, rgba(79, 70, 229, 0.15), rgba(147, 51, 234, 0.15)) !important;
    border: 1px solid rgba(147, 51, 234, 0.2) !important;
}

/* Textos blancos dentro de degradados atenuados */
html.dark .bg-gradient-to-br.from-indigo-600.to-purple-600 .text-indigo-100 {
    color: #c4b5fd !important;
}


/* -------------------------------------------------------------
 * 4. LIBRERÍAS DE TERCEROS
 * ------------------------------------------------------------- */

/* SweetAlert2 */
html.dark .swal2-popup {
    background-color: #271813 !important;
    color: #fafafa !important;
    border: 1px solid #36221C !important;
}
html.dark .swal2-title, html.dark .swal2-html-container {
    color: #fafafa !important;
}

/* Quill.js Editor */
html.dark .ql-toolbar.ql-snow { background-color: #36221C !important; border-color: #3f3f46 !important; }
html.dark .ql-container.ql-snow { border-color: #3f3f46 !important; color: #fafafa !important; }
html.dark .ql-snow .ql-stroke { stroke: #d4d4d8 !important; }
html.dark .ql-snow .ql-fill { fill: #d4d4d8 !important; }
html.dark .ql-snow .ql-picker { color: #d4d4d8 !important; }
html.dark .ql-snow .ql-picker-options { background-color: #271813 !important; border-color: #3f3f46 !important; }


/* -------------------------------------------------------------
 * 5. ESTILOS PREMIUM PARA WIDGETS (Fondos translúcidos y textos glow)
 * ------------------------------------------------------------- */

/* Blue / Indigo (Visitas, Tasa de conversión) */
html.dark .bg-blue-50, html.dark .bg-indigo-50 { background-color: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.2) !important; border-width: 1px; }
html.dark .text-blue-600, html.dark .text-indigo-600, html.dark .text-indigo-700 { color: #93c5fd !important; } 

/* Green / Emerald / Teal (WhatsApp, Ganados, Academia) */
html.dark .bg-green-50, html.dark .bg-emerald-50, html.dark .bg-teal-50 { background-color: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.2) !important; border-width: 1px; }
html.dark .text-green-600, html.dark .text-emerald-600, html.dark .text-teal-600, html.dark .text-emerald-700 { color: #6ee7b7 !important; } 

/* Amber / Orange (Eventos, Riesgo) */
html.dark .bg-amber-50, html.dark .bg-orange-50 { background-color: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.2) !important; border-width: 1px; }
html.dark .text-amber-600, html.dark .text-orange-600, html.dark .text-amber-700 { color: #fcd34d !important; } 

/* Purple (Llamadas) */
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.2) !important; border-width: 1px; }
html.dark .text-purple-600 { color: #d8b4fe !important; } 

/* Rose / Red (Cartera vencida) */
html.dark .bg-rose-50, html.dark .bg-red-50 { background-color: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.2) !important; border-width: 1px; }
html.dark .text-rose-600, html.dark .text-red-600, html.dark .text-rose-800 { color: #fda4af !important; } 

/* -------------------------------------------------------------
 * 6. ESTILOS PREMIUM PARA DIRECTORIO (Badges y Divisores)
 * ------------------------------------------------------------- */
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #36221C !important; 
}

/* Badges de Membresía y Estado */
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }
html.dark .text-emerald-800 { color: #6ee7b7 !important; }

html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; }
html.dark .text-amber-800 { color: #fcd34d !important; }

html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; border: 1px solid rgba(168, 85, 247, 0.3) !important; }
html.dark .text-purple-800 { color: #d8b4fe !important; }

html.dark .bg-gray-100.text-gray-600 { background-color: rgba(113, 113, 122, 0.2) !important; border: 1px solid rgba(113, 113, 122, 0.3) !important; color: #d4d4d8 !important; }

/* Botón de WhatsApp en Grid */
html.dark .bg-\[\#25D366\] { background-color: rgba(37, 211, 102, 0.1) !important; color: #4ade80 !important; border: 1px solid rgba(37, 211, 102, 0.2) !important; }
html.dark .bg-\[\#25D366\]:hover { background-color: rgba(37, 211, 102, 0.2) !important; }

/* -------------------------------------------------------------
 * 7. OVERRIDES PREMIUM PÁGINA WEB PÚBLICA
 * ------------------------------------------------------------- */

/* Header Transparente Glass-Nav */
html.dark .glass-nav {
    background-color: rgba(26, 16, 12, 0.95) !important;
    border-bottom-color: #36221C !important;
}

/* Fondos Brand en Modo Oscuro (Secciones asimétricas y fondos secundarios) */
html.dark .bg-brand-50,
html.dark .bg-brand-100,
html.dark .bg-brand-200 {
    background-color: #1A100C !important;
}

/* Textos Acento Brand a Oro */
html.dark .text-brand-700,
html.dark .text-brand-800,
html.dark .text-brand-900 {
    color: var(--canaco-gold, #D4AF37) !important;
}

/* -------------------------------------------------------------
 * 8. CARRUSEL DE LOGOS PREMIUM (Filtro Monocromático)
 * ------------------------------------------------------------- */

/* Logos en escala de grises y convertidos a platino claro/blanco */
html.dark .marquee-track img,
html.dark .marquee-track-slow img,
html.dark .marquee-item img {
    filter: grayscale(1) invert(1) contrast(500%) brightness(200%) opacity(0.85) drop-shadow(0 0 2px rgba(255,255,255,0.2)) !important;
    mix-blend-mode: screen !important;
}

/* Ocultar el recuadro blanco que se volvía oscuro feo */
html.dark .marquee-track .bg-white,
html.dark .marquee-track-slow .bg-white,
html.dark .marquee-item .bg-white {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Permitir color original al hacer hover sobre cualquier logo del carrusel */
html.dark .marquee-track:hover img,
html.dark .marquee-track-slow:hover img,
html.dark .marquee-item:hover img,
html.dark .partner-logo-box:hover img {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Corregir el degradado blanco de los bordes del carrusel tailwind classes */
html.dark .from-white {
    --tw-gradient-from: #1A100C var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(26, 16, 12, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* -------------------------------------------------------------
 * 9. GIROS DOCK PREMIUM (B2B HUB)
 * ------------------------------------------------------------- */
/* Contenedor Glass en Modo Oscuro */
html.dark .glass-dock {
    background-color: rgba(26, 16, 12, 0.95) !important; 
    border-color: #36221C !important;
}
/* Asegurar también compatibilidad por clase de tailwind si otra cosa lo usara */
html.dark .bg-white\/90 {
    background-color: rgba(26, 16, 12, 0.95) !important; 
}

/* Botones Activos con Resplandor Premium */
html.dark .giro-btn-active {
    background-color: var(--canaco-gold, #D4AF37) !important;
    color: #1A100C !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
    border-color: transparent !important;
}

/* Botones Inactivos */
html.dark .giro-btn:not(.giro-btn-active) {
    background-color: #271813 !important;
    border-color: #36221C !important;
    color: #a1a1aa !important;
}
html.dark .giro-btn:not(.giro-btn-active):hover {
    border-color: var(--canaco-gold, #D4AF37) !important;
    color: #fafafa !important;
}

/* -------------------------------------------------------------
 * 10. B2B ADS TRANSITION EFFECTS (Global)
 * ------------------------------------------------------------- */
/* Estas clases se aplican tanto en modo claro como oscuro */
.ad-trans-fade {
    transition: opacity 1s ease-in-out;
}
.ad-trans-fade.ad-hidden {
    opacity: 0;
}
.ad-trans-fade.ad-active {
    opacity: 1;
}
.ad-trans-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.ad-trans-slide.ad-hidden {
    transform: translateX(100%);
    opacity: 0;
}
.ad-trans-slide.ad-active {
    transform: translateX(0);
    opacity: 1;
}
.ad-trans-zoom {
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out;
}
.ad-trans-zoom.ad-hidden {
    transform: scale(1.1);
    opacity: 0;
}
.ad-trans-zoom.ad-active {
    transform: scale(1);
    opacity: 1;
}
.ad-trans-blur {
    transition: filter 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.ad-trans-blur.ad-hidden {
    filter: blur(10px);
    opacity: 0;
}
.ad-trans-blur.ad-active {
    filter: blur(0);
    opacity: 1;
}