/* 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); } }

/* ============================================
   SELECT/DROPDOWN FIX — ALL THEMES
   ============================================ */

/* Default theme: base select + option high-contrast */
select {
    color-scheme: dark;
}
select option {
    background-color: #1e293b;
    color: #f1f5f9;
    padding: 8px 12px;
}
select option:checked,
select option:hover {
    background: linear-gradient(#4338ca, #4338ca);
    color: #ffffff;
}

/* Default chevron (applies when no theme-specific rule wins) */
:root select,
body.theme-default 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='%23a5b4fc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ============================================
   PROJECTION WIDE LAYOUT — ~90% viewport
   ============================================ */

.projection-wide {
    width: min(92vw, 1720px);
    margin-left: auto;
    margin-right: auto;
}

.projection-wide-narrow {
    width: min(88vw, 1280px);
    margin-left: auto;
    margin-right: auto;
}

/* QR modal shell helpers — bigger, projection-friendly */
.qr-modal-shell {
    width: min(92vw, 960px);
}
.qr-code-frame {
    width: min(72vw, 520px);
}
@media (min-width: 1024px) {
    .qr-code-frame { width: min(40vw, 560px); }
}

/* ============================================
   LIGHT THEME — COMPREHENSIVE v3
   ============================================ */

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

/* ── Text color inversion ────────────────────────────────────────── */
body.theme-light .text-white { color: #0f172a !important; }
body.theme-light .text-white\/90 { color: rgba(15, 23, 42, 0.92) !important; }
body.theme-light .text-white\/80 { color: rgba(15, 23, 42, 0.82) !important; }
body.theme-light .text-white\/70 { color: rgba(15, 23, 42, 0.72) !important; }
body.theme-light .text-white\/60 { color: rgba(15, 23, 42, 0.62) !important; }
body.theme-light .text-white\/50 { color: rgba(15, 23, 42, 0.52) !important; }
body.theme-light .text-white\/40 { color: rgba(15, 23, 42, 0.42) !important; }
body.theme-light .text-white\/30 { color: rgba(15, 23, 42, 0.35) !important; }
body.theme-light .text-white\/20 { color: rgba(15, 23, 42, 0.25) !important; }
body.theme-light .text-white\/10 { color: rgba(15, 23, 42, 0.15) !important; }

/* ── Form controls (inputs, textareas, selects) ──────────────────── */
body.theme-light input,
body.theme-light textarea,
body.theme-light select {
    color: #1e293b !important;
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body.theme-light input:focus,
body.theme-light textarea:focus,
body.theme-light select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

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='%234b5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

body.theme-light select {
    color-scheme: light;
}
body.theme-light select option {
    background-color: #ffffff;
    color: #1e293b;
    padding: 8px 12px;
}
body.theme-light select option:checked,
body.theme-light select option:hover {
    background: linear-gradient(#dbeafe, #dbeafe);
    color: #1e3a8a;
}

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.38) !important;
}

body.theme-light input[disabled],
body.theme-light textarea[disabled],
body.theme-light select[disabled] {
    background-color: rgba(241, 245, 249, 0.8) !important;
    color: rgba(15, 23, 42, 0.4) !important;
}

/* ── Gradient text ───────────────────────────────────────────────── */
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; }
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; }
body.theme-light .from-indigo-600 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position) !important; }
body.theme-light .to-purple-600   { --tw-gradient-to: #7c3aed var(--tw-gradient-to-position) !important; }

/* ── Background inversions ───────────────────────────────────────── */
body.theme-light .bg-black\/5  { background-color: rgba(15, 23, 42, 0.02) !important; }
body.theme-light .bg-black\/10 { background-color: rgba(15, 23, 42, 0.03) !important; }
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.80) !important; }

body.theme-light .bg-white\/5  { background-color: rgba(255, 255, 255, 0.85) !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }
body.theme-light .bg-white\/10 { background-color: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05); }
body.theme-light .bg-white\/15 { background-color: rgba(255, 255, 255, 0.95) !important; }
body.theme-light .hover\:bg-white\/5:hover  { background-color: #ffffff !important; }
body.theme-light .hover\:bg-white\/10:hover { background-color: #ffffff !important; border-color: rgba(37, 99, 235, 0.20) !important; }
body.theme-light .hover\:bg-white\/15:hover { background-color: #ffffff !important; border-color: rgba(37, 99, 235, 0.25) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08) !important; }
body.theme-light .hover\:bg-white\/20:hover { background-color: #ffffff !important; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12) !important; }

/* ── Borders ─────────────────────────────────────────────────────── */
body.theme-light .border-white\/5  { border-color: rgba(15, 23, 42, 0.07) !important; }
body.theme-light .border-white\/10 { border-color: rgba(15, 23, 42, 0.12) !important; }
body.theme-light .border-white\/20 { border-color: rgba(15, 23, 42, 0.18) !important; }
body.theme-light .border-white\/30 { border-color: rgba(15, 23, 42, 0.22) !important; }
body.theme-light .hover\:border-white\/10:hover { border-color: rgba(15, 23, 42, 0.18) !important; }
body.theme-light .hover\:border-white\/20:hover { border-color: rgba(15, 23, 42, 0.25) !important; }

/* ── Accent colors — Sapphire blue ───────────────────────────────── */
body.theme-light .text-indigo-100 { color: #1d4ed8 !important; }
body.theme-light .text-indigo-200 { color: #1d4ed8 !important; }
body.theme-light .text-indigo-300 { color: #2563eb !important; }
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; }
body.theme-light .text-indigo-400,
body.theme-light .text-indigo-500 { color: #2563eb !important; }
body.theme-light .text-purple-100 { color: #6d28d9 !important; }
body.theme-light .text-purple-200 { color: #6d28d9 !important; }
body.theme-light .text-purple-300 { color: #7c3aed !important; }
body.theme-light .text-purple-400 { color: #6d28d9 !important; }
body.theme-light .text-emerald-100 { color: #047857 !important; }
body.theme-light .text-emerald-200 { color: #047857 !important; }
body.theme-light .text-amber-100 { color: #92400e !important; }
body.theme-light .text-amber-200 { color: #b45309 !important; }
body.theme-light .text-rose-200 { color: #be123c !important; }
body.theme-light .text-rose-300 { color: #e11d48 !important; }
body.theme-light .text-fuchsia-200 { color: #a21caf !important; }
body.theme-light .text-fuchsia-300 { color: #c026d3 !important; }
body.theme-light .text-blue-200 { color: #1d4ed8 !important; }
body.theme-light .text-blue-300 { color: #2563eb !important; }
body.theme-light .text-purple-300\/60 { color: rgba(109, 40, 217, 0.70) !important; }

body.theme-light .bg-indigo-500    { background-color: #2563eb !important; }
body.theme-light .bg-indigo-600    { background-color: #2563eb !important; }
body.theme-light .bg-indigo-500\/10 { background-color: rgba(37, 99, 235, 0.08) !important; }
body.theme-light .bg-indigo-500\/30 { background-color: rgba(37, 99, 235, 0.12) !important; }
body.theme-light .bg-indigo-600\/20 { background-color: rgba(37, 99, 235, 0.10) !important; }
body.theme-light .hover\:bg-indigo-500:hover { background-color: #3b82f6 !important; }
body.theme-light .hover\:bg-indigo-500\/10:hover { background-color: rgba(37, 99, 235, 0.08) !important; }
body.theme-light .ring-indigo-500 { --tw-ring-color: rgba(37, 99, 235, 0.35) !important; }
body.theme-light .border-indigo-400 { border-color: rgba(37, 99, 235, 0.35) !important; }
body.theme-light .border-indigo-400\/30 { border-color: rgba(37, 99, 235, 0.22) !important; }
body.theme-light .border-indigo-400\/50 { border-color: rgba(37, 99, 235, 0.30) !important; }
body.theme-light .border-indigo-500\/20 { border-color: rgba(37, 99, 235, 0.20) !important; }
body.theme-light .border-purple-400\/30 { border-color: rgba(109, 40, 217, 0.22) !important; }

/* ── Status colors ───────────────────────────────────────────────── */
body.theme-light .text-emerald-300 { color: #047857 !important; }
body.theme-light .text-emerald-400 { color: #059669 !important; }
body.theme-light .text-amber-300   { color: #b45309 !important; }
body.theme-light .text-amber-400   { color: #d97706 !important; }
body.theme-light .text-red-400     { color: #dc2626 !important; }
body.theme-light .text-red-400\/40 { color: rgba(220, 38, 38, 0.45) !important; }
body.theme-light .text-red-400\/60 { color: rgba(220, 38, 38, 0.55) !important; }

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

body.theme-light .border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.20) !important; }
body.theme-light .border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.25) !important; }
body.theme-light .border-amber-400\/50   { border-color: rgba(217, 119, 6, 0.30) !important; }
body.theme-light .border-amber-400       { border-color: #d97706 !important; }
body.theme-light .border-amber-500\/20   { border-color: rgba(245, 158, 11, 0.20) !important; }
body.theme-light .border-amber-500\/30   { border-color: rgba(245, 158, 11, 0.25) !important; }
body.theme-light .border-red-500\/40     { border-color: rgba(239, 68, 68, 0.30) !important; }

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

/* ── Shadows ─────────────────────────────────────────────────────── */
body.theme-light .shadow-lg   { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important; }
body.theme-light .shadow-xl   { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important; }
body.theme-light .shadow-2xl  { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05) !important; }
body.theme-light .hover\:shadow-2xl:hover  { box-shadow: 0 20px 48px rgba(37, 99, 235, 0.10), 0 8px 16px rgba(15, 23, 42, 0.06) !important; }
body.theme-light .hover\:shadow-lg:hover   { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04) !important; }
body.theme-light .hover\:shadow-indigo-500\/20:hover { box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12) !important; }
body.theme-light .shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.3\)\] { box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important; }
body.theme-light .shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.2\)\] { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important; }
body.theme-light .shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.3\)\] { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15) !important; }
body.theme-light .shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.35\)\] { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18) !important; }
body.theme-light .shadow-\[0_0_30px_rgba\(99\,102\,241\,0\.15\)\] { box-shadow: 0 4px 16px rgba(37, 99, 235, 0.10) !important; }
body.theme-light .shadow-amber-500\/10 { --tw-shadow-color: rgba(245, 158, 11, 0.08) !important; }
body.theme-light .shadow-md\.shadow-indigo-500\/20 { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10) !important; }

/* ── Glows → subtle elevations ───────────────────────────────────── */
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.18)) !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.20)) !important; }
body.theme-light .drop-shadow-\[0_0_15px_rgba\(255\,255\,255\,0\.5\)\] { filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.15)) !important; }
body.theme-light .shadow-\[0_0_8px_rgba\(52\,211\,153\,0\.8\)\]  { box-shadow: 0 0 6px rgba(16, 185, 129, 0.30) !important; }
body.theme-light .shadow-\[0_0_10px_rgba\(52\,211\,153\,0\.8\)\] { box-shadow: 0 0 8px rgba(16, 185, 129, 0.25) !important; }
body.theme-light .shadow-\[0_0_6px_rgba\(52\,211\,153\,0\.8\)\]  { box-shadow: 0 0 4px rgba(16, 185, 129, 0.25) !important; }

/* ── Prose / Markdown ────────────────────────────────────────────── */
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; }

/* ── IA / Purple gradients ───────────────────────────────────────── */
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 .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.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; }
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; }
body.theme-light .bg-purple-950\/30     { background-color: rgba(237, 233, 255, 0.55) !important; }
body.theme-light .border-purple-500\/10 { border-color: rgba(109, 40, 217, 0.18) !important; }
body.theme-light .border-purple-500\/15 { border-color: rgba(109, 40, 217, 0.22) !important; }
body.theme-light .border-purple-500\/20 { border-color: rgba(109, 40, 217, 0.28) !important; }

/* ── Misc fixes ──────────────────────────────────────────────────── */
body.theme-light .animate-pulse { animation-duration: 2.5s; }
body.theme-light .bg-emerald-400 { background-color: #059669 !important; }
body.theme-light .bg-amber-400   { background-color: #d97706 !important; }

/* ============================================
   DARK THEME (DEEP BLACK) — REFINEMENTS
   ============================================ */

/* Form controls — dark theme contrast */
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
    color: #e5e7eb !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
    border-color: rgba(6, 182, 212, 0.60) !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.20) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
body.theme-dark select {
    color-scheme: dark;
    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='%2367e8f9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
}
body.theme-dark select option {
    background-color: #0b1220;
    color: #e5e7eb;
    padding: 8px 12px;
}
body.theme-dark select option:checked,
body.theme-dark select option:hover {
    background: linear-gradient(#0e7490, #0e7490);
    color: #ffffff;
}
body.theme-dark ::placeholder {
    color: rgba(229, 231, 235, 0.40) !important;
}

body.theme-dark .text-indigo-300    { color: #67e8f9 !important; }
body.theme-dark .text-indigo-300\/80 { color: rgba(103, 232, 249, 0.80) !important; }
body.theme-dark .text-indigo-300\/70 { color: rgba(103, 232, 249, 0.70) !important; }
body.theme-dark .bg-indigo-500\/30  { background-color: rgba(6, 182, 212, 0.15) !important; }
body.theme-dark .bg-indigo-600      { background-color: #0891b2 !important; }
body.theme-dark .hover\:bg-indigo-500:hover { background-color: #06b6d4 !important; }
body.theme-dark .border-indigo-400     { border-color: rgba(6, 182, 212, 0.40) !important; }
body.theme-dark .border-indigo-400\/50 { border-color: rgba(6, 182, 212, 0.35) !important; }
body.theme-dark .focus\:border-indigo-400:focus { border-color: rgba(6, 182, 212, 0.50) !important; }
body.theme-dark .focus\:ring-indigo-400:focus { --tw-ring-color: rgba(6, 182, 212, 0.30) !important; }

/* ===================================================================
 * Logo EdutekaLab con switch por tema
 * El HTML expone ambas imágenes con clases logo-on-dark / logo-on-light;
 * cada tema muestra la versión que contrasta con su fondo.
 * ================================================================ */
.edutekalab-logo { height: 31px; width: auto; display: block; }
/* Default (dark gradient) y theme-dark: logo claro */
body.theme-default .logo-on-dark,
body.theme-dark    .logo-on-dark  { display: block; }
body.theme-default .logo-on-light,
body.theme-dark    .logo-on-light { display: none; }
/* Light: logo oscuro */
body.theme-light .logo-on-dark   { display: none; }
body.theme-light .logo-on-light  { display: block; }

/* ===================================================================
 * Sliders (tipo 'sliders': rango 1-10 con thumb indigo→purple)
 * ================================================================ */
.slider-range {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.35));
    outline: none;
}
.slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.slider-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.slider-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    cursor: pointer;
}
body.theme-light .slider-range {
    background: linear-gradient(to right, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.25));
}

/* ================================================================ */
/* Theme-light: preservar text-white sobre fondos saturados/CTA      */
/* ================================================================ */
/* Por defecto theme-light fuerza .text-white a slate-900, pero los  */
/* botones primarios y badges con bg saturado necesitan texto blanco */
/* para mantener contraste WCAG AA.                                   */

body.theme-light .bg-indigo-500.text-white,
body.theme-light .bg-indigo-500 .text-white,
body.theme-light .bg-indigo-600.text-white,
body.theme-light .bg-indigo-600 .text-white,
body.theme-light .bg-blue-500.text-white,
body.theme-light .bg-blue-500 .text-white,
body.theme-light .bg-blue-600.text-white,
body.theme-light .bg-blue-600 .text-white,
body.theme-light .bg-purple-500.text-white,
body.theme-light .bg-purple-500 .text-white,
body.theme-light .bg-purple-600.text-white,
body.theme-light .bg-purple-600 .text-white,
body.theme-light .bg-fuchsia-500.text-white,
body.theme-light .bg-fuchsia-500 .text-white,
body.theme-light .bg-fuchsia-600.text-white,
body.theme-light .bg-fuchsia-600 .text-white,
body.theme-light .bg-rose-500.text-white,
body.theme-light .bg-rose-500 .text-white,
body.theme-light .bg-red-500.text-white,
body.theme-light .bg-red-500 .text-white,
body.theme-light .bg-red-600.text-white,
body.theme-light .bg-red-600 .text-white,
body.theme-light .bg-emerald-500.text-white,
body.theme-light .bg-emerald-500 .text-white,
body.theme-light .bg-emerald-600.text-white,
body.theme-light .bg-emerald-600 .text-white,
body.theme-light .bg-green-500.text-white,
body.theme-light .bg-green-500 .text-white,
body.theme-light .bg-green-600.text-white,
body.theme-light .bg-green-600 .text-white,
body.theme-light .bg-amber-500.text-white,
body.theme-light .bg-amber-500 .text-white,
body.theme-light .bg-amber-600.text-white,
body.theme-light .bg-amber-600 .text-white,
/* Gradientes saturados (Categorizar IA, CTAs primarios) */
body.theme-light .bg-gradient-to-r.from-indigo-600.text-white,
body.theme-light .bg-gradient-to-r.from-indigo-600 .text-white,
body.theme-light .bg-gradient-to-r.from-purple-600.text-white,
body.theme-light .bg-gradient-to-r.from-purple-600 .text-white,
body.theme-light .bg-gradient-to-br.from-purple-600.text-white,
body.theme-light .bg-gradient-to-br.from-purple-600 .text-white,
body.theme-light .bg-gradient-to-r.from-amber-500.text-white,
body.theme-light .bg-gradient-to-r.from-amber-500 .text-white,
body.theme-light .bg-gradient-to-r.from-emerald-500.text-white,
body.theme-light .bg-gradient-to-r.from-emerald-500 .text-white,
body.theme-light .bg-gradient-to-r.from-rose-500.text-white,
body.theme-light .bg-gradient-to-r.from-rose-500 .text-white {
    color: #ffffff !important;
}

/* Hover variants — mantener blanco en hover sobre saturado */
body.theme-light .hover\:bg-indigo-500:hover.text-white,
body.theme-light .hover\:bg-indigo-500:hover .text-white,
body.theme-light .hover\:bg-indigo-600:hover.text-white,
body.theme-light .hover\:bg-indigo-600:hover .text-white,
body.theme-light .hover\:bg-emerald-500:hover.text-white,
body.theme-light .hover\:bg-emerald-500:hover .text-white {
    color: #ffffff !important;
}

/* Badges circulares con bg saturado — placeholder/contadores */
body.theme-light .bg-rose-500,
body.theme-light .bg-red-500,
body.theme-light .bg-amber-500,
body.theme-light .bg-emerald-500,
body.theme-light .bg-indigo-500,
body.theme-light .bg-purple-500 {
    color: #ffffff !important;
}

/* Iconos SVG dentro de botones primarios deben heredar */
body.theme-light .bg-indigo-500 svg,
body.theme-light .bg-indigo-600 svg,
body.theme-light .bg-purple-600 svg,
body.theme-light .bg-emerald-500 svg,
body.theme-light .bg-rose-500 svg,
body.theme-light .bg-amber-500 svg,
body.theme-light .bg-gradient-to-r.from-indigo-600 svg,
body.theme-light .bg-gradient-to-r.from-purple-600 svg,
body.theme-light .bg-gradient-to-br.from-purple-600 svg {
    color: #ffffff !important;
}