/* Pull Lab - Premium Custom Styles with Theme System */

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

/* ============================================
   THEME TOKENS
   ============================================ */

/* Default theme (actual: slate-900 + indigo/purple) */
:root,
body.theme-default {
    --bg-base: #0f172a;
    --mesh-1: rgba(79, 70, 229, 0.40);    /* indigo */
    --mesh-2: rgba(147, 51, 234, 0.40);   /* purple */
    --mesh-3: rgba(79, 70, 229, 0.40);
    --mesh-4: rgba(59, 130, 246, 0.40);   /* blue */

    --glass-bg-1: rgba(255, 255, 255, 0.08);
    --glass-bg-2: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.30);

    --glass-strong-bg-1: rgba(255, 255, 255, 0.15);
    --glass-strong-bg-2: rgba(255, 255, 255, 0.05);
    --glass-strong-border: rgba(255, 255, 255, 0.30);
    --glass-strong-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.40);

    --text-base: #ffffff;

    --scroll-thumb: rgba(255, 255, 255, 0.20);

    --accent-primary: #6366f1;   /* indigo-500 */
    --accent-secondary: #a855f7; /* purple-500 */

    --glow-ring: rgba(99, 102, 241, 0.30);
    --glow-ring-strong: rgba(99, 102, 241, 0.70);
}

/* Light theme: Zafiro / Plata / Perla */
body.theme-light {
    --bg-base: #fcfdfe; /* Perla pura */
    --mesh-1: rgba(37, 99, 235, 0.12);   /* Zafiro blue */
    --mesh-2: rgba(148, 163, 184, 0.15);  /* Plata sutil */
    --mesh-3: rgba(255, 255, 255, 0.90);  /* Brillo perla */
    --mesh-4: rgba(37, 99, 235, 0.08);   /* Zafiro profundo */

    --glass-bg-1: rgba(255, 255, 255, 0.85);
    --glass-bg-2: rgba(255, 255, 255, 0.70);
    --glass-border: rgba(15, 23, 42, 0.08); 
    --glass-shadow: 0 8px 30px 0 rgba(15, 23, 42, 0.06);

    --glass-strong-bg-1: rgba(255, 255, 255, 0.95);
    --glass-strong-bg-2: rgba(255, 255, 255, 0.85);
    --glass-strong-border: rgba(15, 23, 42, 0.12);
    --glass-strong-shadow: 0 15px 45px 0 rgba(15, 23, 42, 0.12);

    --text-base: #0f172a; /* Slate-900 (Contraste premium) */

    --scroll-thumb: rgba(148, 163, 184, 0.50);

    --accent-primary: #2563eb;
    --accent-secondary: #475569;

    --glow-ring: rgba(37, 99, 235, 0.12);
    --glow-ring-strong: rgba(37, 99, 235, 0.35);
}

/* Dark theme: negro profundo + cian/indigo eléctrico */
body.theme-dark {
    --bg-base: #030712; /* gray-950 */
    --mesh-1: rgba(6, 182, 212, 0.30);    /* cyan-500 */
    --mesh-2: rgba(79, 70, 229, 0.35);    /* indigo-600 */
    --mesh-3: rgba(139, 92, 246, 0.25);   /* violet-500 */
    --mesh-4: rgba(14, 165, 233, 0.30);   /* sky-500 */

    --glass-bg-1: rgba(255, 255, 255, 0.05);
    --glass-bg-2: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.60);

    --glass-strong-bg-1: rgba(255, 255, 255, 0.08);
    --glass-strong-bg-2: rgba(255, 255, 255, 0.03);
    --glass-strong-border: rgba(255, 255, 255, 0.18);
    --glass-strong-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.70);

    --text-base: #ffffff;

    --scroll-thumb: rgba(255, 255, 255, 0.15);

    --accent-primary: #06b6d4;
    --accent-secondary: #6366f1;

    --glow-ring: rgba(6, 182, 212, 0.30);
    --glow-ring-strong: rgba(6, 182, 212, 0.70);
}

/* ============================================
   BASE
   ============================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }

/* Animated Mesh Background Base */
.mesh-bg {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(at 0% 0%, var(--mesh-1) 0px, transparent 50%),
        radial-gradient(at 100% 0%, var(--mesh-2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, var(--mesh-3) 0px, transparent 50%),
        radial-gradient(at 0% 100%, var(--mesh-4) 0px, transparent 50%);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite alternate;
    color: var(--text-base);
}

@keyframes gradientMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Glassmorphism Premium */
.glass {
    background: linear-gradient(135deg, var(--glass-bg-1) 0%, var(--glass-bg-2) 100%);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-strong {
    background: linear-gradient(135deg, var(--glass-strong-bg-1) 0%, var(--glass-strong-bg-2) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--glass-strong-border);
    box-shadow: var(--glass-strong-shadow);
}

/* Base Animations */
.fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.slide-up { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.card-appear { animation: cardAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes cardAppear { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.pulse-glow { animation: pulseGlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 10px var(--glow-ring); }
    50% { box-shadow: 0 0 30px var(--glow-ring-strong); }
}

.bar-animate { transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Interactive/Haptic specific actions */
.haptic-button {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.haptic-button:active {
    transform: scale(0.96);
}

/* Spinner */
.loading-orb {
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */

body.theme-light.mesh-bg,
body.theme-light {
    color: var(--text-base);
}

/* Tailwind Text Normalization */
body.theme-light .text-white { color: #0f172a !important; }
body.theme-light .text-white\/90 { color: rgba(15, 23, 42, 0.90) !important; }
body.theme-light .text-white\/80 { color: rgba(15, 23, 42, 0.80) !important; }
body.theme-light .text-white\/70 { color: rgba(15, 23, 42, 0.70) !important; }
body.theme-light .text-white\/60 { color: rgba(15, 23, 42, 0.65) !important; }
body.theme-light .text-white\/50 { color: rgba(15, 23, 42, 0.55) !important; }
body.theme-light .text-white\/40 { color: rgba(15, 23, 42, 0.45) !important; }
body.theme-light .text-white\/30 { color: rgba(15, 23, 42, 0.40) !important; }
body.theme-light .text-white\/20 { color: rgba(15, 23, 42, 0.30) !important; }
body.theme-light .text-white\/10 { color: rgba(15, 23, 42, 0.15) !important; }

/* Inputs y placeholders con enfoque Zafiro */
body.theme-light input,
body.theme-light textarea,
body.theme-light select {
    color: #0f172a;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
}

/* Opciones nativas del select: fondo blanco y texto oscuro en light */
body.theme-light select option {
    background-color: #ffffff;
    color: #0f172a;
}

body.theme-light select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

body.theme-light .placeholder-white\/20::placeholder,
body.theme-light .placeholder-white\/30::placeholder,
body.theme-light .placeholder-white\/40::placeholder {
    color: rgba(15, 23, 42, 0.40);
}

/* Gradient text normalization */
body.theme-light .from-white { --tw-gradient-from: #0f172a var(--tw-gradient-from-position) !important; }
body.theme-light .to-white\/80 { --tw-gradient-to: rgba(15, 23, 42, 0.80) var(--tw-gradient-to-position) !important; }
body.theme-light .to-white\/70 { --tw-gradient-to: rgba(15, 23, 42, 0.70) var(--tw-gradient-to-position) !important; }

/* Fondos y Botones adaptados al brillo Perla/Zafiro */
body.theme-light .bg-black\/20 { background-color: rgba(15, 23, 42, 0.04) !important; }
body.theme-light .bg-black\/30 { background-color: rgba(15, 23, 42, 0.06) !important; }
body.theme-light .bg-black\/40 { background-color: rgba(15, 23, 42, 0.08) !important; }
body.theme-light .bg-black\/90 { background-color: rgba(15, 23, 42, 0.85) !important; }

body.theme-light .bg-white\/5 { background-color: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
body.theme-light .bg-white\/10 { background-color: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(15, 23, 42, 0.1) !important; }
body.theme-light .hover\:bg-white\/10:hover { background-color: #ffffff !important; border-color: rgba(37, 99, 235, 0.2) !important; }
body.theme-light .hover\:bg-white\/15:hover { background-color: #ffffff !important; border-color: rgba(37, 99, 235, 0.3) !important; }
body.theme-light .hover\:bg-white\/20:hover { background-color: #ffffff !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important; }

/* Bordes táctiles */
body.theme-light .border-white\/5 { border-color: rgba(15, 23, 42, 0.06) !important; }
body.theme-light .border-white\/10 { border-color: rgba(15, 23, 42, 0.10) !important; }
body.theme-light .border-white\/20 { border-color: rgba(15, 23, 42, 0.15) !important; }

/* Prose refinement */
body.theme-light .prose-invert { color: #1e293b; }
body.theme-light .prose-invert :where(p, li, ul, ol) { color: #334155; }
body.theme-light .prose-invert :where(h1, h2, h3, h4, strong) { color: #0f172a; }

/* Acentos Zafiro y Refinamiento de Botones */
body.theme-light .text-indigo-400,
body.theme-light .text-indigo-500 { color: #2563eb !important; }
body.theme-light .text-indigo-300 { color: #3b82f6 !important; }
body.theme-light .bg-indigo-600 { background-color: #2563eb !important; }
body.theme-light .hover\:bg-indigo-500:hover { background-color: #3b82f6 !important; }
body.theme-light .ring-indigo-500 { --tw-ring-color: rgba(37, 99, 235, 0.4) !important; }

/* Status y Alertas Legibles en Light */
body.theme-light .text-emerald-400 { color: #059669 !important; } /* Emerald-600 */
body.theme-light .text-amber-400 { color: #d97706 !important; }   /* Amber-600 */
body.theme-light .text-red-400 { color: #dc2626 !important; }     /* Red-600 */
body.theme-light .text-emerald-300 { color: #047857 !important; } 

body.theme-light .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.12) !important; }
body.theme-light .bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.12) !important; }
body.theme-light .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.08) !important; }

/* Inversión de sombras para botones en Light */
body.theme-light .shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.3\)\] { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important; }
body.theme-light .shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.2\)\] { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important; }

/* IA / Especiales */
body.theme-light .from-purple-600 { --tw-gradient-from: #7c3aed var(--tw-gradient-from-position) !important; }
body.theme-light .to-fuchsia-600 { --tw-gradient-to: #c026d3 var(--tw-gradient-to-position) !important; }
body.theme-light .text-purple-300 { color: #7c3aed !important; }

/* Otros ajustes de legibilidad */
body.theme-light .bg-indigo-500 { background-color: #2563eb !important; }
body.theme-light .bg-black\/10 { background-color: rgba(15, 23, 42, 0.02) !important; }
body.theme-light .bg-black\/5 { background-color: rgba(15, 23, 42, 0.01) !important; }

/* ============================================
   LIGHT THEME — FIXES & IMPROVEMENTS v2
   ============================================ */

/* bg-black/* faltantes (timer, contenedores de barras, escala) */
body.theme-light .bg-black\/30 { background-color: rgba(15, 23, 42, 0.05) !important; }
body.theme-light .bg-black\/40 { background-color: rgba(15, 23, 42, 0.07) !important; }

/* text-indigo-100 → era casi blanco, ilegible sobre fondo claro */
body.theme-light .text-indigo-100 { color: #1d4ed8 !important; }

/* text-purple-400 → era lavanda claro, sin contraste suficiente */
body.theme-light .text-purple-400 { color: #6d28d9 !important; }

/* text-indigo-300/* variantes con opacidad */
body.theme-light .text-indigo-300\/80 { color: rgba(37, 99, 235, 0.90) !important; }
body.theme-light .text-indigo-300\/70 { color: rgba(37, 99, 235, 0.85) !important; }

/* Gradientes de texto: from-indigo-300 to-purple-300/400
   (usado en "Conectado", promedio de escala, etc.) */
body.theme-light .from-indigo-300 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position) !important; }
body.theme-light .to-purple-300   { --tw-gradient-to:   #7c3aed var(--tw-gradient-to-position)   !important; }
body.theme-light .to-purple-400   { --tw-gradient-to:   #6d28d9 var(--tw-gradient-to-position)   !important; }

/* drop-shadow glow en números de escala: en light crea halos morados, se reemplaza por sombra sutil */
body.theme-light .drop-shadow-\[0_0_20px_rgba\(99\,102\,241\,0\.3\)\] { filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.20)) !important; }
body.theme-light .drop-shadow-\[0_0_30px_rgba\(99\,102\,241\,0\.4\)\] { filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.22)) !important; }

/* ── Sección Síntesis IA en Resultados ─────────────────────────────── */

/* Header strip: de morado-oscuro a lavanda perla */
body.theme-light .from-purple-900\/40 {
    --tw-gradient-from: rgba(237, 233, 255, 0.85) var(--tw-gradient-from-position) !important;
}
body.theme-light .to-indigo-900\/40 {
    --tw-gradient-to: rgba(224, 231, 255, 0.85) var(--tw-gradient-to-position) !important;
}

/* Body: de indigo-950 muy oscuro a lavanda ultra-sutil */
body.theme-light .from-purple-950\/20 {
    --tw-gradient-from: rgba(245, 243, 255, 0.60) var(--tw-gradient-from-position) !important;
}
body.theme-light .to-indigo-950\/20 {
    --tw-gradient-to: rgba(238, 242, 255, 0.60) var(--tw-gradient-to-position) !important;
}

/* Cabecera de tarjeta de análisis */
body.theme-light .bg-purple-950\/30 { background-color: rgba(237, 233, 255, 0.55) !important; }

/* Bordes de tarjeta de análisis: más visibles en light */
body.theme-light .border-purple-500\/15 { border-color: rgba(109, 40, 217, 0.22) !important; }
body.theme-light .border-purple-500\/10 { border-color: rgba(109, 40, 217, 0.18) !important; }
body.theme-light .border-purple-500\/20 { border-color: rgba(109, 40, 217, 0.28) !important; }

/* Barra acento lateral de card de análisis */
body.theme-light .from-purple-400 { --tw-gradient-from: #7c3aed var(--tw-gradient-from-position) !important; }
body.theme-light .to-indigo-500   { --tw-gradient-to:   #4338ca var(--tw-gradient-to-position)   !important; }

/* Subtítulo "N análisis generados" en la cabecera IA */
body.theme-light .text-purple-300\/60 { color: rgba(109, 40, 217, 0.70) !important; }

/* Barra de glow en botones de resultado (sombras oscuras → sutiles) */
body.theme-light .shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.3\)\] { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18) !important; }
body.theme-light .shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.35\)\] { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.20) !important; }

/* Estado "Conectado" — anillos decorativos giratorios */
body.theme-light .border-indigo-400\/30 { border-color: rgba(37, 99, 235, 0.22) !important; }
body.theme-light .border-purple-400\/30 { border-color: rgba(109, 40, 217, 0.22) !important; }

/* bg-indigo-500/10 (badge tipo actividad) */
body.theme-light .bg-indigo-500\/10 { background-color: rgba(37, 99, 235, 0.08) !important; }
body.theme-light .border-indigo-500\/20 { border-color: rgba(37, 99, 235, 0.20) !important; }

/* Hover en tarjeta de sesión: sombra indigo oscuro → azul sutil */
body.theme-light .hover\:shadow-2xl:hover { box-shadow: 0 20px 40px rgba(37, 99, 235, 0.10), 0 8px 16px rgba(15, 23, 42, 0.06) !important; }
body.theme-light .hover\:shadow-indigo-500\/20:hover { box-shadow: none !important; }