/* ==========================================================================
   ATIX TEAM APP - ESTILO LUXURY, RESPONSIVE & MANUAL LIGHT/DARK MODE
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&display=swap');

.atix-app-wrapper, .atix-app-container, body { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; letter-spacing: -0.03em !important; }

/* ==========================================================================
   1. VARIABLES: MODO OSCURO (POR DEFECTO - RESTAURADO)
   ========================================================================== */
:root {
    --atix-bg-body: #0a0a0a;
    --atix-bg-card: #050505;
    --atix-text-main: #ffffff;
    --atix-text-soft: #d1d5db;  
    --atix-text-muted: #9ca3af; 
    
    --atix-panel-glass: rgba(255, 255, 255, 0.02);
    --atix-panel-overlay: rgba(5, 5, 5, 0.6);
    --atix-input-bg: rgba(255, 255, 255, 0.05);
    --atix-input-hover: rgba(255, 255, 255, 0.08);
    
    --atix-border-soft: rgba(255, 255, 255, 0.05);
    --atix-border-mid: rgba(255, 255, 255, 0.1);
    --atix-border-strong: rgba(255, 255, 255, 0.2);
    
    --atix-cyan-base: #17D4FE;
    --atix-cyan-text: #17D4FE;
    --atix-btn-text: #000000;
    
    --atix-shadow-glow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --atix-logo-filter: none;
    
    --grad-landing-from: rgba(10,10,10,0.8);
    --grad-landing-via: rgba(10,10,10,0.6);
    --grad-landing-to: rgba(10,10,10,1);
}

/* ==========================================================================
   2. OVERRIDE MANUAL MODO CLARO (RESTAURADO PARA EL DASHBOARD)
   ========================================================================== */
body.light-theme {
    --atix-bg-body: #f3f4f6; 
    --atix-bg-card: #ffffff;
    --atix-text-main: #111827; 
    --atix-text-soft: #374151;  
    --atix-text-muted: #4b5563; 
    
    --atix-panel-glass: rgba(255, 255, 255, 0.85);
    --atix-panel-overlay: rgba(255, 255, 255, 0.9);
    --atix-input-bg: rgba(0, 0, 0, 0.03);
    --atix-input-hover: rgba(0, 0, 0, 0.06);
    
    --atix-border-soft: rgba(0, 0, 0, 0.06);
    --atix-border-mid: rgba(0, 0, 0, 0.12);
    --atix-border-strong: rgba(0, 0, 0, 0.2);
    
    --atix-cyan-base: #00b4d8; 
    --atix-cyan-text: #0284c7; 
    --atix-btn-text: #ffffff;  
    
    --atix-shadow-glow: 0 10px 40px rgba(0, 0, 0, 0.06);
    --atix-logo-filter: brightness(0); 
    
    --grad-landing-from: rgba(255,255,255,0.9);
    --grad-landing-via: rgba(255,255,255,0.7);
    --grad-landing-to: rgba(243,244,246,1);
}

/* ==========================================================================
   3. TRANSICIÓN PROFESIONAL
   ========================================================================== */
div, section, header, nav, aside, main, p, h1, h2, h3, h4, h5, h6, span, a, button, input, select, textarea, table, th, td, tr, i, svg {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease;
}
.animate-spin, .animate-pulse, .group-hover\:scale-105, .transition-transform { transition-property: transform, opacity !important; }

/* ==========================================================================
   4. BLINDAJE HEADER LANDING Y SECCIÓN NOSOTROS
   ========================================================================== */
#view-landing #atix-nav { background-color: #050505 !important; color: #ffffff !important; border-bottom-color: rgba(255,255,255,0.1) !important;}
#view-landing #atix-nav .text-white { color: #ffffff !important; }
#view-landing #atix-nav .text-gray-300 { color: #d1d5db !important; }
#view-landing #atix-nav img { filter: none !important; } 
#view-landing #atix-nav button#theme-toggle-btn { color: #ffffff !important; border-color: rgba(255,255,255,0.1) !important; background-color: rgba(255,255,255,0.05) !important;}
#view-landing #atix-nav button#theme-toggle-btn:hover { background-color: #17D4FE !important; color: #000 !important; }
#view-landing #atix-nav .bg-white\/5 { background-color: rgba(255,255,255,0.05) !important; }
#view-landing #atix-nav .border-white\/20 { border-color: rgba(255,255,255,0.2) !important; }

/* Blindaje estricto para que Nosotros de la Landing sea siempre Modo Día */
#nosotros { background-color: #ffffff !important; color: #111827 !important; }
body.light-theme #nosotros { background-color: #ffffff !important; }
body.light-theme #nosotros-slider { opacity: 0.6 !important; }

/* ==========================================================================
   5. LOGOS INTELIGENTES
   ========================================================================== */
img[src*="Recurso-10.png"] { filter: var(--atix-logo-filter) !important; max-height: 35px !important; width: auto !important; object-fit: contain !important; }
#view-landing #atix-nav img[src*="Recurso-10.png"] { filter: none !important; }
.atix-footer-logo { filter: none !important; mix-blend-mode: multiply !important; }

/* SWAP DE LOGOS EN EL FOOTER (SIN ALTERAR COLORES) */
.atix-footer-logo-dark { display: block !important; }
.atix-footer-logo-light { display: none !important; }
body.light-theme .atix-footer-logo-dark { display: none !important; }
body.light-theme .atix-footer-logo-light { display: block !important; mix-blend-mode: multiply !important; }

/* ==========================================================================
   6. INTERCEPTOR DE TAILWIND (Colores dinámicos)
   ========================================================================== */
.bg-\[\#0a0a0a\], .bg-\[\#050505\], .bg-\[\#f5f5f7\] { background-color: var(--atix-bg-body) !important; }
.bg-black { background-color: var(--atix-bg-card) !important; }
.bg-white\/5, .bg-\[\#050505\]\/95 { background-color: var(--atix-input-bg) !important; }
.bg-white\/10 { background-color: var(--atix-input-hover) !important; }
.bg-\[\#050505\]\/90, .bg-\[\#0a0a0a\]\/40, .bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/80, .bg-black\/90, .bg-neutral-900\/30, .bg-neutral-900\/20, .bg-neutral-900\/10 { background-color: var(--atix-panel-overlay) !important; }
.glass-panel { background-color: var(--atix-panel-glass) !important; border-color: var(--atix-border-mid) !important; box-shadow: var(--atix-shadow-glow) !important; }

.text-white, .text-gray-50, .text-gray-100 { color: var(--atix-text-main) !important; }
.text-gray-200, .text-gray-300 { color: var(--atix-text-soft) !important; }
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--atix-text-muted) !important; }
.text-\[\#17D4FE\] { color: var(--atix-cyan-text) !important; }

.border-white\/5 { border-color: var(--atix-border-soft) !important; }
.border-white\/10 { border-color: var(--atix-border-mid) !important; }
.border-white\/20, .border-white\/30 { border-color: var(--atix-border-strong) !important; }
.border-gray-200 { border-color: var(--atix-border-mid) !important; }

.bg-\[\#17D4FE\] { background-color: var(--atix-cyan-base) !important; }
button.bg-\[\#17D4FE\], a.bg-\[\#17D4FE\] { color: var(--atix-btn-text) !important; }
.bg-\[\#17D4FE\]\/10 { background-color: rgba(0, 180, 216, 0.1) !important; }

input, select, textarea { color: var(--atix-text-main) !important; }
input::placeholder, textarea::placeholder { color: var(--atix-text-muted) !important; opacity: 0.7 !important; }

/* ==========================================================================
   7. DEGRADADOS ORIGINALES (Suavidad perfecta)
   ========================================================================== */
.from-\[\#0a0a0a\]\/60 { --tw-gradient-from: var(--grad-landing-from) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-\[\#0a0a0a\]\/40 { --tw-gradient-stops: var(--tw-gradient-from), var(--grad-landing-via), var(--tw-gradient-to) !important; }
.to-\[\#0a0a0a\] { --tw-gradient-to: var(--grad-landing-to) !important; }

.from-black\/80 { --tw-gradient-from: var(--atix-panel-overlay) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-\[\#050505\] { --tw-gradient-from: var(--atix-bg-body) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-\[\#050505\]\/40 { --tw-gradient-stops: var(--tw-gradient-from), var(--atix-input-bg), var(--tw-gradient-to) !important; }
.to-\[\#050505\] { --tw-gradient-to: var(--atix-bg-body) !important; }
.to-transparent { --tw-gradient-to: transparent !important; }

/* ==========================================================================
   8. FIX PERFECTO: SISTEMA SEMANAL EN MODO CLARO (SIN SOMBRAS NI BORDES FEOS)
   ========================================================================== */
body.light-theme #dash-tab-sistema .snap-start.bg-\[\#050505\] {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; 
}
body.light-theme #dash-tab-sistema .group\/card {
    border-color: #e5e7eb !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05) !important;
}
body.light-theme #dash-tab-sistema .bg-black\/40 { background-color: transparent !important; }
body.light-theme #dash-tab-sistema .bg-black\/50 { background-color: rgba(255,255,255,0.9) !important; }
body.light-theme #dash-tab-sistema .bg-black\/60 { background-color: rgba(255,255,255,0.9) !important; border-color: #e5e7eb !important; }
body.light-theme #dash-tab-sistema .bg-gradient-to-b { background: linear-gradient(to bottom, transparent 0%, transparent 50%, #ffffff 100%) !important; }
body.light-theme #dash-tab-inicio .bg-gradient-to-t { background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.8) 40%, transparent 80%) !important; }

/* ==========================================================================
   9. FIX PERFECTO: ACADEMIA DIGITAL EN MODO CLARO (IMÁGENES LIMPIAS)
   ========================================================================== */
body.light-theme #dash-tab-educacion .bg-black\/50 { background-color: transparent !important; }
body.light-theme #dash-tab-educacion .group:hover .bg-black\/50 { background-color: rgba(255,255,255,0.3) !important; }
body.light-theme #dash-tab-educacion .bg-black\/80 { background-color: #ffffff !important; color: #000000 !important; border-color: #e5e7eb !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
body.light-theme #dash-tab-educacion .bg-\[\#050505\] { background-color: var(--atix-bg-card) !important; border-color: var(--atix-border-mid) !important; }

/* ==========================================================================
   10. RESPONSIVE Y SCROLLBARS
   ========================================================================== */
.h-screen { height: 100dvh !important; }
.min-h-screen { min-height: 100dvh !important; }

@media screen and (max-width: 768px) {
    body, html, .atix-app-container { overflow-x: hidden !important; max-width: 100vw !important; }
    #form-login, #form-register, .max-w-3xl.mx-auto.p-8 { padding: 32px 20px !important; width: calc(100% - 30px) !important; margin: 0 auto !important; border-radius: 28px !important; }
    h1.text-6xl, h1.text-8xl { font-size: 2.75rem !important; line-height: 1.1 !important; }
    h2.text-4xl, h2.text-5xl, h2.text-6xl, h2.text-7xl { font-size: 2.25rem !important; line-height: 1.15 !important; }
    .glass-panel { padding: 20px !important; }
    #oportunidad a, #bioliffe a, .btn-mobile-full { width: 100% !important; justify-content: center !important; text-align: center !important; }
    #bioliffe .flex-col.sm\\:flex-row { flex-direction: column !important; align-items: center !important; }
    #country-selector { width: 95px !important; min-width: 95px !important; }
    #country-selector span { font-size: 11px !important; }
}

#mobile-menu, #dash-mobile-menu, #admin-mobile-menu { position: fixed !important; top: 60px !important; left: 0 !important; width: 100vw !important; height: calc(100dvh - 60px) !important; background: var(--atix-panel-overlay) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; z-index: 99999 !important; padding: 30px 24px !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 12px !important; border-radius: 0 0 24px 24px !important; overflow-y: auto !important; border: none !important; }
#mobile-menu.hidden, #dash-mobile-menu.hidden, #admin-mobile-menu.hidden { display: none !important; }
#mobile-menu:not(.hidden), #dash-mobile-menu:not(.hidden), #admin-mobile-menu:not(.hidden) { display: flex !important; animation: fadeInMenu 0.3s ease-out forwards; }
@keyframes fadeInMenu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
#mobile-menu button, #mobile-menu a, #dash-mobile-menu button, #admin-mobile-menu button { width: 100% !important; padding: 18px 20px !important; font-size: 16px !important; justify-content: flex-start !important; border-radius: 16px !important; background: var(--atix-input-bg) !important; border: 1px solid var(--atix-border-soft) !important; color: var(--atix-text-main) !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--atix-bg-body); }
::-webkit-scrollbar-thumb { background: var(--atix-border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--atix-cyan-base); }
.custom-scrollbar::-webkit-scrollbar { height: 4px; width: 4px; }
#atix-agenda-slider { scrollbar-width: none !important; -ms-overflow-style: none !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; padding-left: 10px; padding-right: 10px; }
#atix-agenda-slider::-webkit-scrollbar { display: none !important; }
#atix-agenda-slider > div { scroll-snap-align: start !important; scroll-margin-left: 10px !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important; will-change: transform; }

.animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   11. FIX DEFINITIVO: SELECTORES / DROPDOWNS EN MODO DÍA
   ========================================================================== */
body.light-theme select option {
    background-color: #ffffff !important;
    color: #111827 !important;
}

body.light-theme select {
    color: #111827 !important;
}