html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    max-width: 100vw;
    color-scheme: dark;
}
html.light {
    color-scheme: light;
}
body {
    background-color: #0d1117;
    color: #c9d1d9;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    position: relative;
}
/* Directrices de Interfaz Web: Accesibilidad, Rendimiento y Reducción de Movimiento */
button, a, input, select, textarea {
    touch-action: manipulation;
}
.tabular-nums, .font-mono, [data-tabular] {
    font-variant-numeric: tabular-nums;
}
:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
        .bg-card { background-color: #161b22; border: 1px solid #30363d; }
        .bg-card-hover:hover { background-color: #1f242d; }
        .border-main { border-color: #30363d; }
        .monthly-calendar-section { max-width: 1540px; }
        .monthly-calendar-layout { display: flex; flex-direction: column; gap: 0.75rem; }
        .monthly-year-panel { display: flex; width: fit-content; align-items: center; gap: 0.75rem; }
        .account-group-card { position: relative; margin-right: 8px; margin-bottom: 8px; cursor: pointer; }
        .account-group-stack { position: absolute; inset: 6px -4px -4px 6px; border: 1px solid #46566b; border-radius: 0.85rem; background: #111a26; pointer-events: none; transition: transform 180ms ease, border-color 180ms ease; }
        .account-group-stack-back { inset: 11px -8px -8px 11px; border-color: #344255; background: #0f151e; }
        .account-group-face { position: relative; z-index: 1; min-height: 176px; }
        .account-group-card:hover .account-group-stack { border-color: #7086a4; transform: translate(2px, 2px); }
        .account-group-card:hover .account-group-stack-back { transform: translate(3px, 3px); }
                .monthly-month-card {
            position: relative;
            min-height: 176px;
            overflow: visible;
            cursor: pointer;
            --monthly-accent: #30363d;

            background-color: #161b22;
            border-color: var(--monthly-accent);
            border-width: 2px;
            transform-origin: center center;
            transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease, border-color 240ms ease, border-radius 180ms ease;
        }
        .monthly-month-card.monthly-month-current {
            --monthly-accent: #3b82f6;
            background-color: #132238;
        }
        .monthly-month-card.monthly-month-be {
            --monthly-accent: #d69e2e;
            background-color: #282313;
        }
        .monthly-month-card.monthly-month-best {
            --monthly-accent: #16a36a;
            background-color: #11251c;
        }
        .monthly-month-card.monthly-month-worst {
            --monthly-accent: #dc4545;
            background-color: #291819;
        }
        .monthly-month-card:hover,
        .monthly-month-card:focus-visible {
            z-index: 60;
            transform: scale(1.30, 1.18);
            box-shadow: 0 20px 42px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--monthly-accent);
        }
        .monthly-month-details {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            right: 0;
            z-index: 61;
            max-height: 0;
            overflow: hidden;
            padding: 0;
            border: 2px solid var(--monthly-accent);
            border-radius: 0.75rem;
            background-color: inherit;
            opacity: 0;
            pointer-events: none;
            transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease, padding 240ms ease;
        }
        .monthly-month-card:hover .monthly-month-details,
        .monthly-month-card:focus-visible .monthly-month-details {
            max-height: min(340px, calc(100dvh - 8rem));
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 0.75rem;
            opacity: 1;
            pointer-events: auto;
        }
        @media (hover: none) {
            .monthly-month-card,
            .monthly-month-card:hover,
            .monthly-month-card:focus-visible {
                transform: none;
                box-shadow: none;
            }
            .monthly-month-details {
                position: static;
                max-height: none;
                overflow: visible;
                margin-top: 0.75rem;
                padding: 0.75rem;
                border: 2px solid var(--monthly-accent);
                border-radius: 0.75rem;
                opacity: 1;
                pointer-events: auto;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .monthly-month-card,
            .monthly-month-details { transition: none; }
        }
        @media (min-width: 1024px) {
            .monthly-calendar-layout {
                display: grid;
                grid-template-columns: 112px minmax(0, 1fr);
                align-items: start;
                gap: 1rem;
            }
            .monthly-year-panel {
                width: 112px;
                flex-direction: column;
                align-items: stretch;
            }
            #monthly-grid {
                width: min(100%, 1400px);
                aspect-ratio: 1.85;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                grid-template-rows: repeat(3, minmax(148px, 1fr));
                --monthly-grid-gap: clamp(0.5rem, 1.2vh, 1.25rem);
                gap: var(--monthly-grid-gap);
                margin-inline: auto;
            }
            #monthly-grid .monthly-month-card {
                width: 100%;
                height: 100%;
                min-height: 148px;
                padding: clamp(0.625rem, 1.2vh, 0.875rem);
            }
        }
        @media (min-width: 1024px) and (max-height: 760px) {
            .monthly-year-panel { padding: 0.625rem; }
            #monthly-grid {
                aspect-ratio: 2.05;
                grid-template-rows: repeat(3, minmax(145px, 1fr));
            }
            #monthly-grid .monthly-month-card {
                min-height: 145px;
                padding: 0.625rem;
            }
            #monthly-grid .monthly-month-card .monthly-primary-value { font-size: 1.15rem; line-height: 1.35rem; }
        }
        @media (min-width: 1024px) and (hover: hover) {
            #monthly-grid .monthly-month-card:nth-child(4n + 1) .monthly-month-details,
            #monthly-grid .monthly-month-card:nth-child(4n + 2) .monthly-month-details {
                left: 0;
                right: auto;
                width: calc(250% + var(--monthly-grid-gap));
            }
            #monthly-grid .monthly-month-card:nth-child(4n + 3) .monthly-month-details,
            #monthly-grid .monthly-month-card:nth-child(4n + 4) .monthly-month-details {
                left: auto;
                right: 0;
                width: calc(250% + var(--monthly-grid-gap));
            }
            #monthly-grid .monthly-month-card:nth-child(n + 5) .monthly-month-details {
                top: auto;
                bottom: calc(100% + 0.5rem);
            }
        }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #0d1117; }
        ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #8b949e; }
        #toast { transition: transform 0.3s ease, opacity 0.3s ease; }
        /* Registro de Trades: texto más grande, crece en alto y no en ancho */
        table.journal-table { font-size: 14px; }
        .journal-table thead { font-size: 12px; }
        .journal-table th { padding-top: 0.75rem; padding-bottom: 0.75rem; line-height: 1.25; vertical-align: bottom; }
        .journal-table td { padding-top: 0.85rem; padding-bottom: 0.85rem; line-height: 1.4; }
        .journal-table .text-\[11px\] { font-size: 12.5px; }
        .journal-table .text-\[10px\] { font-size: 12px; }
        .journal-table .text-lg { font-size: 1.25rem; }

        /* Botón de tema (sol / luna) */
        /* Celebración al superar una fase de fondeo */
        .fondeo-celebration { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); overflow: hidden; animation: fondeo-fade-in 250ms ease; }
        html.light .fondeo-celebration { background: rgba(15, 23, 42, 0.35); }
        .fondeo-celebration-card { position: relative; z-index: 2; animation: fondeo-pop 520ms cubic-bezier(0.2, 1.4, 0.4, 1); }
        .fondeo-celebration-trophy { animation: fondeo-bounce 1.2s ease-in-out infinite; }
        .fondeo-confetti { position: absolute; top: -20px; z-index: 1; width: 10px; height: 16px; border-radius: 2px; opacity: 0.95; animation: fondeo-fall linear forwards; }
        @keyframes fondeo-fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fondeo-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        @keyframes fondeo-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-6deg); } }
        @keyframes fondeo-fall { to { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); } }
        @media (prefers-reduced-motion: reduce) {
            .fondeo-celebration, .fondeo-celebration-card, .fondeo-celebration-trophy { animation: none; }
            .fondeo-confetti { display: none; }
        }

        /* Botón de tema (sol / luna): se ilumina el icono del tema activo */
        .theme-toggle-icon { color: #6b7280; transition: color 0.2s ease; }
        html:not(.light) .theme-icon-moon { color: #818cf8; }
        html.light .theme-icon-sun { color: #f59e0b; }

        /* ===================== TEMA CLARO ===================== */
        html.light body { background-color: #f4f6f9; color: #1f2937; }
        html.light .bg-card { background-color: #ffffff; border-color: #d9dee5; }
        html.light .bg-card-hover:hover { background-color: #f0f3f7; }
        html.light .border-main { border-color: #d9dee5; }
        html.light ::-webkit-scrollbar-track { background: #eef1f5; }
        html.light ::-webkit-scrollbar-thumb { background: #c3cad4; }
        html.light ::-webkit-scrollbar-thumb:hover { background: #9aa3af; }
        html.light ::placeholder { color: #9ca3af; }

        /* Fondos neutros */
        html.light .bg-\[\#161b22\], html.light .bg-\[\#11151c\], html.light .bg-\[\#111625\] { background-color: #ffffff !important; }
        html.light .bg-\[\#112130\] { background-color: #e9f6ee; }
        html.light .bg-gray-950, html.light .bg-gray-950\/50, html.light .bg-gray-950\/60, html.light .bg-gray-950\/70, html.light .bg-gray-950\/80, html.light .bg-gray-950\/90 { background-color: #f8fafc !important; }
        html.light .bg-gray-900, html.light .bg-gray-900\/50, html.light .bg-gray-900\/60, html.light .bg-gray-900\/70, html.light .bg-gray-900\/80, html.light .bg-gray-900\/90 { background-color: #f8fafc !important; }
        html.light .bg-gray-800, html.light .bg-gray-800\/60, html.light .bg-gray-800\/80, html.light .bg-gray-800\/90 { background-color: #f1f5f9 !important; }
        html.light .bg-black\/85 { background-color: rgba(15, 23, 42, 0.45); }
        html.light .hover\:bg-\[\#1a2129\]:hover { background-color: #f0f3f7; }
        html.light .hover\:bg-gray-800:hover { background-color: #e5e9ef; }
        html.light .hover\:bg-gray-700:hover { background-color: #dbe1e8; }

        /* Textos neutros */
        html.light .text-white { color: #111827; }
        html.light .text-gray-200 { color: #1f2937; }
        html.light .text-gray-300 { color: #374151; }
        html.light .text-gray-400 { color: #4b5563; }
        html.light .text-gray-500 { color: #6b7280; }
        html.light .text-gray-600 { color: #9ca3af; }
        html.light .hover\:text-white:hover { color: #111827; }
        html.light .hover\:text-gray-300:hover { color: #374151; }
        html.light .hover\:text-black:hover { color: #000000; }

        /* Bordes neutros */
        html.light .border-gray-600 { border-color: #c3cad4; }
        html.light .border-gray-700, html.light .border-gray-800 { border-color: #d9dee5; }
        html.light .hover\:border-gray-400:hover, html.light .focus\:border-gray-400:focus, html.light .focus\:border-gray-500:focus { border-color: #9ca3af; }
        html.light [class*="focus:border-green"]:focus { border-color: #22c55e; }
        html.light [class*="focus:border-blue"]:focus { border-color: #3b82f6; }
        html.light [class*="focus:border-indigo"]:focus { border-color: #6366f1; }

        /* Textos de color: tonos más oscuros para que se lean sobre fondo claro */
        html.light :is([class^="text-green-"], [class*=" text-green-"]) { color: #15803d; }
        html.light :is([class^="text-emerald-"], [class*=" text-emerald-"]) { color: #047857; }
        html.light :is([class^="text-red-"], [class*=" text-red-"]) { color: #dc2626; }
        html.light :is([class^="text-blue-"], [class*=" text-blue-"]) { color: #1d4ed8; }
        html.light :is([class^="text-amber-"], [class*=" text-amber-"]) { color: #b45309; }
        html.light :is([class^="text-yellow-"], [class*=" text-yellow-"]) { color: #a16207; }
        html.light :is([class^="text-indigo-"], [class*=" text-indigo-"]) { color: #4338ca; }
        html.light :is([class^="text-purple-"], [class*=" text-purple-"]) { color: #7e22ce; }
        html.light :is([class^="text-teal-"], [class*=" text-teal-"]) { color: #0f766e; }
        html.light [class*="hover:text-red-"]:hover { color: #b91c1c; }
        html.light [class*="hover:text-blue-"]:hover { color: #1e40af; }
        html.light [class*="hover:text-indigo-"]:hover { color: #3730a3; }
        html.light [class*="hover:text-purple-"]:hover { color: #6b21a8; }

        /* Fondos tintados (x-900 / x-950 con transparencia) → tintes suaves */
        html.light :is([class^="bg-green-9"], [class*=" bg-green-9"]) { background-color: rgba(22, 163, 74, 0.12); }
        html.light :is([class^="bg-emerald-9"], [class*=" bg-emerald-9"]) { background-color: rgba(16, 185, 129, 0.12); }
        html.light :is([class^="bg-red-9"], [class*=" bg-red-9"]) { background-color: rgba(220, 38, 38, 0.10); }
        html.light :is([class^="bg-blue-9"], [class*=" bg-blue-9"]) { background-color: rgba(37, 99, 235, 0.09); }
        html.light :is([class^="bg-amber-9"], [class*=" bg-amber-9"]) { background-color: rgba(217, 119, 6, 0.12); }
        html.light :is([class^="bg-indigo-9"], [class*=" bg-indigo-9"]) { background-color: rgba(79, 70, 229, 0.09); }
        html.light :is([class^="bg-purple-9"], [class*=" bg-purple-9"]) { background-color: rgba(147, 51, 234, 0.09); }
        html.light :is([class*="hover:bg-green-9"], [class*="hover:bg-emerald-9"]):hover { background-color: rgba(22, 163, 74, 0.18); }
        html.light [class*="hover:bg-red-9"]:hover { background-color: rgba(220, 38, 38, 0.15); }
        html.light [class*="hover:bg-blue-9"]:hover { background-color: rgba(37, 99, 235, 0.15); }
        html.light :is([class*="hover:bg-indigo-8"], [class*="hover:bg-indigo-9"]):hover { background-color: rgba(79, 70, 229, 0.15); }
        html.light :is([class*="hover:bg-purple-8"], [class*="hover:bg-purple-9"]):hover { background-color: rgba(147, 51, 234, 0.15); }

        /* Bordes de color oscuros (x-700 / x-800 / x-900) */
        html.light :is([class*=" border-green-7"], [class*=" border-green-8"], [class*=" border-green-9"], [class*=" border-emerald-7"], [class*=" border-emerald-8"], [class*=" border-emerald-9"]) { border-color: rgba(22, 163, 74, 0.40); }
        html.light :is([class*=" border-red-7"], [class*=" border-red-8"], [class*=" border-red-9"]) { border-color: rgba(220, 38, 38, 0.35); }
        html.light :is([class*=" border-blue-7"], [class*=" border-blue-8"], [class*=" border-blue-9"]) { border-color: rgba(37, 99, 235, 0.35); }
        html.light :is([class*=" border-amber-7"], [class*=" border-amber-8"], [class*=" border-amber-9"]) { border-color: rgba(217, 119, 6, 0.40); }
        html.light :is([class*=" border-indigo-7"], [class*=" border-indigo-8"], [class*=" border-indigo-9"]) { border-color: rgba(79, 70, 229, 0.35); }
        html.light :is([class*=" border-purple-7"], [class*=" border-purple-8"], [class*=" border-purple-9"]) { border-color: rgba(147, 51, 234, 0.35); }
        html.light :is([class*=" border-teal-7"], [class*=" border-teal-8"], [class*=" border-teal-9"]) { border-color: rgba(13, 148, 136, 0.35); }

        /* Botones sólidos: mantener texto blanco y sus colores de hover */
        html.light :is(.bg-green-500, .bg-green-600, .bg-green-700, .bg-blue-600, .bg-indigo-600, .bg-purple-600, .bg-red-600, .bg-amber-600, [class*="bg-teal-7"]) { color: #ffffff; }
        html.light .hover\:bg-green-500:hover { background-color: #22c55e; color: #ffffff; }
        html.light .hover\:bg-green-600:hover { background-color: #16a34a; color: #ffffff; }
        html.light .hover\:bg-green-700:hover { background-color: #15803d; color: #ffffff; }
        html.light .hover\:bg-blue-500:hover { background-color: #3b82f6; color: #ffffff; }
        html.light .hover\:bg-blue-700:hover { background-color: #1d4ed8; color: #ffffff; }
        html.light .hover\:bg-indigo-500:hover { background-color: #6366f1; color: #ffffff; }
        html.light .hover\:bg-purple-500:hover { background-color: #a855f7; color: #ffffff; }
        html.light .hover\:bg-purple-700:hover { background-color: #7e22ce; color: #ffffff; }
        html.light .hover\:bg-red-700:hover { background-color: #b91c1c; color: #ffffff; }
        html.light .hover\:bg-amber-500:hover { background-color: #f59e0b; color: #ffffff; }
        html.light .hover\:bg-amber-700:hover { background-color: #b45309; color: #ffffff; }
        html.light .hover\:bg-teal-600:hover { background-color: #0d9488; color: #ffffff; }
        html.light :is(.bg-green-500, .bg-green-600, .bg-green-700, .bg-blue-600, .bg-indigo-600, .bg-purple-600, .bg-red-600, .bg-amber-600, [class*="bg-teal-7"]) :is(.text-white, [class*=" text-"]) { color: #ffffff; }

        /* Tarjetas del calendario mensual y grupos de cuentas */
        html.light .monthly-month-card { --monthly-accent: #d9dee5; background-color: #ffffff; }
        html.light .monthly-month-card.monthly-month-current { --monthly-accent: #3b82f6; background-color: #eaf2ff; }
        html.light .monthly-month-card.monthly-month-be { --monthly-accent: #d69e2e; background-color: #fdf6e3; }
        html.light .monthly-month-card.monthly-month-best { --monthly-accent: #16a36a; background-color: #e9f7ef; }
        html.light .monthly-month-card.monthly-month-worst { --monthly-accent: #dc4545; background-color: #fdecec; }
        html.light .monthly-month-card:hover,
        html.light .monthly-month-card:focus-visible { box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--monthly-accent); }
        html.light .account-group-stack { border-color: #c3cad4; background: #eef2f7; }
        html.light .account-group-stack-back { border-color: #d5dce6; background: #e5eaf1; }
        html.light .account-group-card:hover .account-group-stack { border-color: #8e9bb0; }

        /* Historial de balances: columnas estables y transiciones suaves */
        #balance-history-table-container { view-transition-name: balance-history-table; }
        #balance-history-table-container .journal-table { table-layout: fixed; font-size: 13px; }
        #balance-history-table-container .journal-table thead th { vertical-align: middle; }
        #balance-history-table-container .journal-table thead tr:last-child th { height: 44px; }
        #balance-history-table-container .journal-table tbody tr { transition: background-color 0.15s ease; }
        @keyframes balance-hist-out { from { opacity: 1; filter: blur(0); transform: scale(1); } to { opacity: 0; filter: blur(3px); transform: scale(0.985); } }
        @keyframes balance-hist-in { from { opacity: 0; filter: blur(3px); transform: scale(0.985) translateY(6px); } to { opacity: 1; filter: blur(0); transform: none; } }
        ::view-transition-group(balance-history-table) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
        ::view-transition-old(balance-history-table) { animation: balance-hist-out 0.3s cubic-bezier(0.4, 0, 1, 1) both; }
        ::view-transition-new(balance-history-table) { animation: balance-hist-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
        @keyframes balance-group-glow {
            0% { background-color: rgba(99, 102, 241, 0); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0); }
            35% { background-color: rgba(99, 102, 241, 0.18); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.4); }
            100% { background-color: rgba(99, 102, 241, 0); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0); }
        }
        .balance-group-glow { animation: balance-group-glow 0.9s ease-out; }

        /* Celebración de fase superada: confeti y modal */
        #confettiCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100 !important; }
        #phaseCelebrationModal .phase-celebration-pop { animation: phase-celebration-pop 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) both; }
        @keyframes phase-celebration-pop {
            from { opacity: 0; transform: scale(0.9) translateY(14px); }
            to { opacity: 1; transform: none; }
        }


        /* ===================== SIMULADOR DE SETUPS (AMBOS TEMAS) ===================== */
        .calc-chip-btn.active {
            background-color: #2563eb;
            color: #ffffff;
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
        }
        .calc-chip-btn.inactive {
            background-color: rgba(31, 41, 55, 0.8);
            color: #d1d5db;
        }
        .calc-chip-btn.inactive:hover {
            background-color: #374151;
            color: #ffffff;
        }

        /* ===================== TEMA CLARO PARA LANDING PAGE ===================== */
        html.light body {
            background-color: #f8fafc !important;
            color: #1e293b !important;
        }
        html.light header.backdrop-blur-md {
            background-color: rgba(255, 255, 255, 0.95) !important;
            border-color: #e2e8f0 !important;
        }
        html.light nav a {
            color: #475569 !important;
        }
        html.light nav a:hover {
            color: #059669 !important;
        }

        /* Barra Superior de Anuncios */
        html.light #top-announcement-bar,
        html.light .bg-gradient-to-r.from-emerald-950\/80 {
            background: #ecfdf5 !important;
            background-image: none !important;
            border-color: #a7f3d0 !important;
            color: #065f46 !important;
        }
        html.light #top-announcement-bar span,
        html.light #top-announcement-bar button,
        html.light .bg-gradient-to-r.from-emerald-950\/80 span,
        html.light .bg-gradient-to-r.from-emerald-950\/80 button {
            color: #065f46 !important;
        }
        html.light #top-announcement-bar span.inline-flex,
        html.light .bg-gradient-to-r.from-emerald-950\/80 span.inline-flex {
            background: #d1fae5 !important;
            border-color: #6ee7b7 !important;
            color: #047857 !important;
        }

        /* Secciones con degradados oscuros de fondo */
        html.light section#calculadora,
        html.light section#proximamente-mt5,
        html.light section#caracteristicas,
        html.light section#fondeo,
        html.light section#precios,
        html.light section#faq {
            background-color: #f8fafc !important;
            background-image: none !important;
            border-color: #e2e8f0 !important;
        }

        /* Suavizar resplandores en modo claro */
        html.light .blur-3xl {
            opacity: 0.15 !important;
        }

        /* Fondos oscuros generales */
        html.light .bg-\[\#0d121f\],
        html.light .bg-\[\#0b0f19\],
        html.light .bg-\[\#101728\],
        html.light .bg-\[\#0f172a\] {
            background-color: #f8fafc !important;
            background-image: none !important;
        }

        /* Tarjetas de contenido */
        html.light .bg-\[\#111726\],
        html.light .bg-\[\#111625\] {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
        }

        /* Badges flotantes en la curva de equidad (Showcase) */
        html.light .anim-float-1,
        html.light .anim-float-2 {
            background: rgba(255, 255, 255, 0.95) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
            color: #0f172a !important;
        }
        html.light .anim-float-1 span,
        html.light .anim-float-2 span {
            color: #0f172a !important;
        }
        html.light .anim-float-1 strong.text-emerald-400 {
            color: #059669 !important;
        }
        html.light .anim-float-2 strong.text-blue-400 {
            color: #2563eb !important;
        }

        /* SECCIÓN CALCULADORA PRO (MODO CLARO) */
        html.light #calculadora .bg-blue-950\/80,
        html.light #calculadora .bg-blue-950 {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
            box-shadow: none !important;
        }
        html.light #calculadora .border-blue-500\/40 {
            border-color: #bfdbfe !important;
        }
        html.light .calc-chip-btn.active {
            background-color: #2563eb !important;
            color: #ffffff !important;
            border: 1px solid #1d4ed8 !important;
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25) !important;
        }
        html.light .calc-chip-btn.inactive {
            background-color: #f1f5f9 !important;
            border: 1px solid #cbd5e1 !important;
            color: #334155 !important;
        }
        html.light .calc-chip-btn.inactive:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        /* Contenedor de resultado del simulador de lotaje */
        html.light #calculadora .bg-gradient-to-tr.from-blue-950\/80 {
            background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%) !important;
            background-image: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%) !important;
            border-color: #93c5fd !important;
        }
        html.light #calculadora .bg-gradient-to-tr.from-blue-950\/80 span.text-blue-300 {
            color: #1d4ed8 !important;
        }
        html.light #calculadora .bg-gradient-to-tr.from-blue-950\/80 #calc-demo-lots {
            color: #0f172a !important;
        }
        html.light #calculadora .bg-gradient-to-tr.from-blue-950\/80 .border-blue-900\/60 {
            border-color: #bfdbfe !important;
            color: #475569 !important;
        }
        html.light #calculadora .bg-gradient-to-tr.from-blue-950\/80 strong.text-gray-200 {
            color: #0f172a !important;
        }

        /* SECCIÓN PRÓXIMAMENTE MT5 (MODO CLARO) */
        html.light #proximamente-mt5 .bg-blue-950\/90 {
            background: #eff6ff !important;
            border-color: #93c5fd !important;
            color: #1d4ed8 !important;
            box-shadow: none !important;
        }
        html.light #proximamente-mt5 .bg-gradient-to-r.from-blue-950\/60 {
            background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%) !important;
            background-image: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%) !important;
            border-color: #bfdbfe !important;
        }
        html.light #proximamente-mt5 .bg-gradient-to-r.from-blue-950\/60 h4 {
            color: #0f172a !important;
        }
        html.light #proximamente-mt5 .bg-gradient-to-r.from-blue-950\/60 p {
            color: #475569 !important;
        }
        html.light #proximamente-mt5 .bg-gradient-to-r.from-blue-950\/60 button {
            background: #0f172a !important;
            color: #ffffff !important;
        }
        html.light #proximamente-mt5 .bg-gradient-to-r.from-blue-950\/60 button:hover {
            background: #1e293b !important;
        }

        /* Elementos generales de formularios y cajas */
        html.light .bg-gray-900\/90,
        html.light .bg-gray-900\/80,
        html.light .bg-gray-900\/60,
        html.light .bg-gray-900\/50,
        html.light .bg-gray-900 {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }
        html.light .bg-gray-950\/40,
        html.light .bg-gray-950 {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
        }
        html.light .bg-gray-800\/90,
        html.light .bg-gray-800\/80,
        html.light .bg-gray-800\/60,
        html.light .bg-gray-800 {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #334155 !important;
        }
        html.light .text-white {
            color: #0f172a !important;
        }
        html.light .text-gray-400,
        html.light .text-gray-300 {
            color: #475569 !important;
        }
        html.light .border-gray-800,
        html.light .border-gray-800\/90,
        html.light .border-gray-800\/80,
        html.light .border-gray-800\/60,
        html.light .border-gray-700,
        html.light .border-gray-700\/80,
        html.light .border-gray-700\/60 {
            border-color: #e2e8f0 !important;
        }
        html.light footer {
            background-color: #e2e8f0 !important;
            border-color: #cbd5e1 !important;
            color: #475569 !important;
        }

        /* Animaciones para el Showcase de la Landing Page */
        @keyframes float-badge-1 {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-6px); }
        }
        @keyframes float-badge-2 {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(6px); }
        }
        .anim-float-1 { animation: float-badge-1 4s ease-in-out infinite; }
        .anim-float-2 { animation: float-badge-2 4.5s ease-in-out infinite; }

        /* Rotate icon on accordion open */
        .accordion-open {
            transform: rotate(180deg);
        }

        /* Estilos móviles para prevenir desbordamientos */
        @media (max-width: 640px) {
            .mobile-no-overflow {
                max-width: 100vw !important;
                overflow-x: hidden !important;
            }
        }

        /* Showcase Movil: Segmented Tabs y Fichas de Ejecucion (Modo Claro) */
        html.light .showcase-m-tab.active {
            background-color: #ecfdf5 !important;
            border-color: #a7f3d0 !important;
            color: #047857 !important;
        }
        html.light .showcase-m-tab.inactive {
            color: #64748b !important;
            background-color: transparent !important;
        }
        html.light .showcase-m-tab.inactive:hover {
            color: #0f172a !important;
            background-color: #f1f5f9 !important;
        }
        html.light .mobile-trade-card {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }
        html.light .mobile-trade-card:hover {
            border-color: #cbd5e1 !important;
        }
        html.light .mobile-trade-card-detail {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }
        html.light .mobile-cal-card-win {
            background-color: #f0fdf4 !important;
            border-color: #bbf7d0 !important;
        }
        html.light .mobile-cal-card-loss {
            background-color: #fef2f2 !important;
            border-color: #fecaca !important;
        }

        /* Tabs de escritorio del Showcase en modo claro */
        html.light #showcase-tab-trades,
        html.light #showcase-tab-calendar,
        html.light #showcase-tab-propfirm {
            color: #64748b !important;
            background-color: transparent !important;
        }
        html.light #showcase-tab-trades:hover,
        html.light #showcase-tab-calendar:hover,
        html.light #showcase-tab-propfirm:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        html.light #showcase-tab-metrics {
            background-color: #ecfdf5 !important;
            border-color: #a7f3d0 !important;
            color: #047857 !important;
        }

        /* Tabs del showcase desktop en modo claro: hover visible y activo */
        html.light .showcase-dt-tab-inactive {
            color: #475569 !important;
            background-color: transparent !important;
        }
        html.light .showcase-dt-tab-inactive:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        html.light .showcase-dt-tab-active {
            background-color: #ecfdf5 !important;
            border-color: #a7f3d0 !important;
            color: #047857 !important;
        }

        /* Banner Meta de Fondeo en modo claro */
        html.light #showcase-meta-banner {
            background: linear-gradient(to right, #fefce8, #fffbeb) !important;
            background-image: linear-gradient(to right, #fefce8, #fffbeb) !important;
            border-color: #fbbf24 !important;
        }
        html.light #showcase-meta-banner .text-amber-300,
        html.light #showcase-meta-banner span {
            color: #92400e !important;
        }
        html.light #showcase-meta-banner .text-amber-400,
        html.light #showcase-meta-banner i.fa-trophy {
            color: #b45309 !important;
        }


        /* ==========================================================================
           SIMULADOR INTERACTIVO DE MÉTRICAS & EVOLUCIÓN DEL TRADER
           ========================================================================== */
        @keyframes toast-slide-down {
            0% { opacity: 0; transform: translateY(-10px) scale(0.97); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-toast-in {
            animation: toast-slide-down 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        #evo-curve-polyline,
        #evo-curve-polygon {
            transition: all 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        #evo-curve-dot,
        #evo-curve-pulse {
            transition: cx 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), cy 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), fill 0.4s ease;
        }

        /* Botones de etapa en el simulador de métricas */
        .evo-stage-btn.active {
            background-color: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
        }
        .evo-stage-btn.inactive {
            background-color: rgba(17, 24, 39, 0.6);
            border-color: rgba(55, 65, 81, 0.6);
        }
        .evo-stage-btn.inactive:hover {
            border-color: rgba(156, 163, 175, 0.5);
            background-color: rgba(31, 41, 55, 0.8);
        }

        /* Modo Claro: Botones de etapa */
        html.light .evo-stage-btn.active {
            background-color: #ecfdf5 !important;
            border-color: #10b981 !important;
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2) !important;
        }
        html.light .evo-stage-btn.inactive {
            background-color: #f8fafc !important;
            border-color: #cbd5e1 !important;
        }
        html.light .evo-stage-btn.inactive:hover {
            background-color: #f1f5f9 !important;
            border-color: #94a3b8 !important;
        }
        html.light .evo-stage-btn.inactive span.text-gray-200 {
            color: #0f172a !important;
        }

        /* ==========================================================================
           LABORATORIO DE BACKTESTING & SIMULADOR DE FONDEO Y RETIROS
           ========================================================================== */
        /* Chips selectores de empresa de fondeo */
        .bt-chip-btn.active {
            background-color: #d97706;
            color: #0f172a;
            border: 1px solid #f59e0b;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
            font-weight: 800;
        }
        .bt-chip-btn.inactive {
            background-color: rgba(17, 24, 39, 0.7);
            border: 1px solid rgba(75, 85, 99, 0.5);
            color: #9ca3af;
        }
        .bt-chip-btn.inactive:hover {
            background-color: rgba(31, 41, 55, 0.9);
            color: #ffffff;
            border-color: rgba(156, 163, 175, 0.6);
        }

        /* Tabs de fases de fondeo en el backtesting */
        .bt-phase-tab.active {
            background-color: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.5);
            font-weight: 800;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
        }
        .bt-phase-tab.inactive {
            color: #9ca3af;
            background-color: transparent;
            border: 1px solid transparent;
        }
        .bt-phase-tab.inactive:hover {
            color: #ffffff;
            background-color: rgba(31, 41, 55, 0.6);
        }

        /* ==========================================================================
           MODO CLARO (LIGHT THEME): SIMULADOR DE MÉTRICAS & DIAGNÓSTICO
           ========================================================================== */
        html.light #evo-controller-bar {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
        }
        html.light #evo-controller-bar .text-white {
            color: #0f172a !important;
        }
        html.light #evo-controller-bar p {
            color: #475569 !important;
        }
        html.light #evo-controller-bar span.text-emerald-300 {
            color: #047857 !important;
            background-color: #d1fae5 !important;
            border-color: #6ee7b7 !important;
        }
        html.light #evo-btn-autoplay {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
        }
        html.light #evo-btn-autoplay:hover {
            background-color: #e2e8f0 !important;
        }

        /* Toast en modo claro */
        html.light #evo-trade-toast {
            background-color: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }
        html.light #evo-toast-text {
            color: #1e293b !important;
            font-weight: 600;
        }
        html.light #evo-toast-badge {
            background-color: #d1fae5 !important;
            border-color: #6ee7b7 !important;
            color: #047857 !important;
        }
        html.light #evo-toast-badge.bg-rose-950 {
            background-color: #ffe4e6 !important;
            border-color: #fda4af !important;
            color: #be123c !important;
        }
        html.light #evo-toast-badge.bg-sky-950 {
            background-color: #e0f2fe !important;
            border-color: #7dd3fc !important;
            color: #0369a1 !important;
        }
        html.light #evo-toast-badge.bg-emerald-950 {
            background-color: #d1fae5 !important;
            border-color: #6ee7b7 !important;
            color: #047857 !important;
        }

        /* Diagnóstico bajo la curva en modo claro (Soluciona Image 2) */
        html.light #evo-diagnosis-box {
            background-color: #f8fafc !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }
        html.light #evo-diagnosis-content {
            color: #0f172a !important;
        }
        html.light #evo-diagnosis-content strong {
            color: #0f172a !important;
        }
        html.light #evo-diagnosis-content span {
            color: #047857 !important;
            font-weight: 700 !important;
        }
        html.light #evo-diagnosis-content span.text-rose-400 {
            color: #e11d48 !important;
        }
        html.light #evo-diagnosis-content span.text-sky-400 {
            color: #0284c7 !important;
        }
        html.light #evo-diagnosis-content span.text-emerald-400 {
            color: #047857 !important;
        }

        /* Curva SVG y contenedor en modo claro */
        html.light #showcase-view-metrics .bg-gray-900\/60,
        html.light #showcase-view-metrics .bg-gray-900\/80 {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        }
        html.light #evo-curve-title {
            color: #0f172a !important;
        }
        html.light #evo-svg-container line {
            stroke: #e2e8f0 !important;
        }
        html.light #evo-pf {
            color: #047857 !important;
        }
        html.light #evo-diff.text-emerald-400,
        html.light #evo-diff-m.text-emerald-400 {
            color: #047857 !important;
        }
        html.light #evo-diff.text-rose-400,
        html.light #evo-diff-m.text-rose-400 {
            color: #e11d48 !important;
        }
        html.light #evo-curve-netgain {
            background-color: #ecfdf5 !important;
            border-color: #86efac !important;
            color: #047857 !important;
        }
        html.light #evo-curve-netgain.bg-rose-950\/60 {
            background-color: #fff1f2 !important;
            border-color: #fda4af !important;
            color: #e11d48 !important;
        }

        /* Floating Badges en modo claro */
        html.light #evo-badge-left,
        html.light #evo-badge-right,
        html.light #evo-badge-mobile {
            background-color: rgba(255, 255, 255, 0.95) !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        }
        html.light #evo-badge-left-text,
        html.light #evo-badge-right-text {
            color: #1e293b !important;
        }
        html.light #evo-badge-left-text strong {
            color: #047857 !important;
        }
        html.light #evo-badge-right-text strong {
            color: #0284c7 !important;
        }

        /* ==========================================================================
           MODO CLARO (LIGHT THEME): LABORATORIO DE BACKTESTING (Soluciona Image 3)
           ========================================================================== */
        html.light section#backtesting {
            background-color: #f8fafc !important;
            background-image: none !important;
            border-color: #e2e8f0 !important;
        }
        html.light section#backtesting .bg-\[\#111625\] {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
        }
        html.light section#backtesting .bg-\[\#111726\] {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
        }
        html.light section#backtesting .bg-\[\#111726\]:hover {
            border-color: #cbd5e1 !important;
        }

        /* Chips y tabs */
        html.light .bt-chip-btn.active {
            background-color: #d97706 !important;
            color: #ffffff !important;
            border: 1px solid #b45309 !important;
            box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
        }
        html.light .bt-chip-btn.inactive {
            background-color: #f1f5f9 !important;
            border: 1px solid #cbd5e1 !important;
            color: #334155 !important;
        }
        html.light .bt-chip-btn.inactive:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        html.light .bt-phase-tab.active {
            background-color: #fef3c7 !important;
            color: #92400e !important;
            border: 1px solid #fcd34d !important;
        }
        html.light .bt-phase-tab.inactive {
            color: #64748b !important;
        }
        html.light .bt-phase-tab.inactive:hover {
            color: #0f172a !important;
            background-color: #f1f5f9 !important;
        }

        /* Tabla de especificaciones de reglas (Left Col) */
        html.light #bt-spec-rules-card,
        html.light section#backtesting .bg-gray-900\/70 {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }
        html.light #bt-spec-rules-card span.text-gray-400,
        html.light section#backtesting .bg-gray-900\/70 span.text-gray-400 {
            color: #475569 !important;
        }
        html.light #bt-spec-balance {
            color: #0f172a !important;
        }
        html.light #bt-spec-target {
            color: #b45309 !important;
        }
        html.light #bt-spec-daily {
            color: #dc2626 !important;
        }
        html.light #bt-spec-maxdd {
            color: #b91c1c !important;
        }
        html.light #bt-spec-split {
            color: #047857 !important;
        }

        /* Contenedor de Fases (Stepper) */
        html.light section#backtesting .bg-gray-900\/90 {
            background-color: #f1f5f9 !important;
            border-color: #e2e8f0 !important;
        }

        /* Header de Auditoría en Tiempo Real (Right Col) */
        html.light #bt-audit-card,
        html.light section#backtesting .bg-gradient-to-br.from-gray-900\/90 {
            background: #ffffff !important;
            background-image: none !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
        }
        html.light #bt-audit-status-badge {
            background-color: #d1fae5 !important;
            border-color: #6ee7b7 !important;
            color: #047857 !important;
        }
        html.light #bt-audit-status-badge.bg-amber-950 {
            background-color: #fef3c7 !important;
            border-color: #fcd34d !important;
            color: #92400e !important;
        }
        html.light #bt-current-balance {
            color: #0f172a !important;
        }
        html.light #bt-current-gain {
            color: #047857 !important;
        }
        html.light #bt-target-distance {
            color: #b45309 !important;
        }
        html.light #bt-progress-label,
        html.light section#backtesting .text-gray-300 {
            color: #334155 !important;
        }
        html.light #bt-daily-consumed {
            color: #047857 !important;
        }
        html.light #bt-max-consumed {
            color: #047857 !important;
        }
        html.light section#backtesting .bg-gray-950 {
            background-color: #e2e8f0 !important;
            border-color: #cbd5e1 !important;
        }

        /* 3 Mini Pills de Checklist (Días, Consistencia, R:R) */
        html.light section#backtesting .bg-gray-950\/60 {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        html.light #bt-pill-days {
            color: #0f172a !important;
        }
        html.light #bt-pill-cons {
            color: #047857 !important;
        }
        html.light #bt-pill-rr {
            color: #0284c7 !important;
        }

        /* Terminal de Retiros y Liquidación */
        html.light #bt-payout-box {
            background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
            background-image: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
            border-color: #86efac !important;
        }
        html.light #bt-payout-box h4 {
            color: #064e3b !important;
        }
        html.light #bt-payout-box .bg-emerald-950 {
            background-color: #d1fae5 !important;
            border-color: #6ee7b7 !important;
            color: #065f46 !important;
        }
        html.light #bt-payout-box .bg-gray-950\/70 {
            background-color: #ffffff !important;
            border-color: #bbf7d0 !important;
        }
        html.light #bt-payout-box .bg-gray-950\/70 span.text-gray-400 {
            color: #475569 !important;
        }
        html.light #bt-payout-total {
            color: #0f172a !important;
        }
        html.light #bt-payout-box .bg-emerald-950\/40 {
            background-color: #ffffff !important;
            border-color: #86efac !important;
        }
        html.light #bt-payout-box .bg-emerald-950\/40 span.text-emerald-300 {
            color: #047857 !important;
        }
        html.light #bt-payout-net {
            color: #047857 !important;
        }
        html.light #bt-btn-reset-payout {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #334155 !important;
        }
        html.light #bt-btn-reset-payout:hover {
            background-color: #f1f5f9 !important;
            color: #0f172a !important;
        }

        /* Recibo de Retiro Simulado */
        html.light #bt-payout-receipt-card {
            background-color: #ecfdf5 !important;
            border-color: #34d399 !important;
            color: #064e3b !important;
        }
        html.light #bt-payout-receipt-card strong.text-white {
            color: #0f172a !important;
        }
        html.light #bt-payout-receipt-card strong.text-emerald-400 {
            color: #047857 !important;
        }
        html.light #bt-payout-receipt-card .border-emerald-800\/60 {
            border-color: #a7f3d0 !important;
            color: #065f46 !important;
        }
        html.light #bt-payout-receipt-card span.text-emerald-300 {
            color: #047857 !important;
        }

        /* Banner de Próximamente / Roadmap */
        html.light #bt-roadmap-banner {
            background: linear-gradient(to right, #fefce8, #eff6ff) !important;
            background-image: linear-gradient(to right, #fefce8, #eff6ff) !important;
            border-color: #fcd34d !important;
        }
        html.light #bt-roadmap-banner h4 {
            color: #78350f !important;
        }
        html.light #bt-roadmap-banner p {
            color: #475569 !important;
        }
        html.light #bt-roadmap-banner strong {
            color: #0f172a !important;
        }

        /* ==========================================================================
           VISOR DE GALERÍA Y ANÁLISIS DE TRADES (ANTES / DESPUÉS)
           ========================================================================== */
        .trade-inspect-chip.active {
            background-color: #10b981;
            color: #0f172a;
            font-weight: 800;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
        }
        .trade-inspect-chip.inactive {
            background-color: transparent;
            color: #94a3b8;
        }
        .trade-inspect-chip.inactive:hover {
            color: #ffffff;
            background-color: rgba(255, 255, 255, 0.05);
        }
        .trade-dt-row.active {
            background-color: rgba(16, 185, 129, 0.12) !important;
            border-left: 3px solid #10b981;
        }

        /* Modo Claro: Visor de Galería & Análisis */
        html.light .trade-inspect-chip.active {
            background-color: #10b981 !important;
            color: #ffffff !important;
        }
        html.light .trade-inspect-chip.inactive {
            color: #64748b !important;
        }
        html.light .trade-inspect-chip.inactive:hover {
            color: #0f172a !important;
            background-color: #e2e8f0 !important;
        }
        html.light .trade-dt-row.active {
            background-color: #ecfdf5 !important;
            border-left: 3px solid #10b981 !important;
        }
        html.light .trade-dt-row:hover {
            background-color: #f8fafc !important;
        }
        html.light .trade-dt-row td {
            color: #334155;
        }
        html.light .trade-dt-row td .text-white {
            color: #0f172a !important;
        }
        html.light .trade-dt-row td .text-gray-300 {
            color: #475569 !important;
        }
        html.light .trade-dt-row td .text-gray-500 {
            color: #64748b !important;
        }
        html.light .trade-dt-row td .bg-gray-800 {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
        }
        html.light .trade-dt-row td .bg-gray-900 {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
            color: #334155 !important;
        }
        html.light #showcase-view-trades thead {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #475569 !important;
        }
        html.light #showcase-view-trades .bg-gray-950\/40 {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
        }
        html.light #trade-inspection-card {
            background: #ffffff !important;
            background-image: none !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
        }
        html.light #trade-inspection-card .bg-gray-950\/70 {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }
        html.light #inspect-card-title {
            color: #0f172a !important;
        }
        html.light #inspect-card-sub {
            color: #475569 !important;
        }
        html.light #inspect-nota-antes,
        html.light #inspect-nota-despues {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
        }
        html.light #trade-lightbox-modal .bg-\[\#111625\] {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
        }
        html.light #lightbox-title {
            color: #0f172a !important;
        }
        html.light #lightbox-subtitle {
            color: #475569 !important;
        }
        html.light #lightbox-note {
            color: #1e293b !important;
        }

        /* ==========================================================================
           SHOWCASE CALENDARIO MENSUAL & AUDITORÍA ANUAL
           ========================================================================== */
        .showcase-month-card {
            position: relative;
            cursor: pointer;
            border-radius: 0.75rem;
            border-width: 1.5px;
            background-color: #161b22;
            transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, border-color 200ms ease;
        }
        .showcase-month-card:hover,
        .showcase-month-card.active-month-card {
            transform: translateY(-2px) scale(1.02);
            z-index: 10;
        }
        .showcase-month-card.monthly-month-best {
            border-color: #10b981;
            background: linear-gradient(135deg, #11251c 0%, #161b22 100%);
        }
        .showcase-month-card.monthly-month-best:hover,
        .showcase-month-card.monthly-month-best.active-month-card {
            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.28);
            border-color: #34d399;
        }
        .showcase-month-card.monthly-month-worst {
            border-color: #ef4444;
            background: linear-gradient(135deg, #291819 0%, #161b22 100%);
        }
        .showcase-month-card.monthly-month-worst:hover,
        .showcase-month-card.monthly-month-worst.active-month-card {
            box-shadow: 0 8px 24px rgba(239, 68, 68, 0.22);
            border-color: #f87171;
        }
        .showcase-month-card.monthly-month-be {
            border-color: #f59e0b;
            background: linear-gradient(135deg, #282313 0%, #161b22 100%);
        }
        .showcase-month-card.monthly-month-be:hover,
        .showcase-month-card.monthly-month-be.active-month-card {
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.22);
            border-color: #fbbf24;
        }
        .showcase-month-card.monthly-month-current {
            border-color: #3b82f6;
            background: linear-gradient(135deg, #132238 0%, #161b22 100%);
        }
        .showcase-month-card.monthly-month-current:hover,
        .showcase-month-card.monthly-month-current.active-month-card {
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.28);
            border-color: #60a5fa;
        }
        .showcase-month-card.monthly-month-win {
            border-color: rgba(16, 185, 129, 0.35);
        }
        .showcase-month-card.monthly-month-win:hover,
        .showcase-month-card.monthly-month-win.active-month-card {
            border-color: #10b981;
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.18);
        }

        /* Modo Claro: Showcase Calendario */
        html.light .showcase-month-card {
            background-color: #ffffff !important;
        }
        html.light .showcase-month-card.monthly-month-best {
            background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
            border-color: #10b981 !important;
        }
        html.light .showcase-month-card.monthly-month-worst {
            background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
            border-color: #ef4444 !important;
        }
        html.light .showcase-month-card.monthly-month-be {
            background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
            border-color: #f59e0b !important;
        }
        html.light .showcase-month-card.monthly-month-current {
            background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
            border-color: #3b82f6 !important;
        }
        html.light .showcase-month-card.monthly-month-win {
            border-color: #cbd5e1 !important;
        }
        html.light .showcase-month-card.monthly-month-win:hover,
        html.light .showcase-month-card.monthly-month-win.active-month-card {
            border-color: #10b981 !important;
        }
        html.light #showcase-month-inspector {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
        }
        html.light #showcase-month-inspector .bg-gray-900\/60 {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        html.light #smi-month-title {
            color: #0f172a !important;
        }
        html.light .showcase-month-card h4 {
            color: #0f172a !important;
        }
        html.light .showcase-month-card .text-gray-400 {
            color: #64748b !important;
        }
        html.light .showcase-month-card .border-gray-800\/80,
        html.light .showcase-month-card .border-emerald-800\/80 {
            border-color: #e2e8f0 !important;
        }
        html.light #showcase-view-calendar .bg-gray-900\/80 {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        html.light #showcase-view-calendar .text-white {
            color: #0f172a !important;
        }
        html.light #showcase-view-calendar .bg-gray-950\/80 {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
        }

        /* ==========================================================================
           SHOWCASE AUDITORÍA DE FONDEO & SIMULADOR DE METAS (VIEW 4)
           ========================================================================== */
        .propfirm-preset-btn.active {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
        }
        .propfirm-preset-btn.inactive {
            background-color: rgba(17, 24, 39, 0.8);
            color: #9ca3af;
            border-color: rgba(75, 85, 99, 0.4);
        }
        .propfirm-preset-btn.inactive:hover {
            color: #ffffff;
            border-color: rgba(156, 163, 175, 0.6);
        }

        /* Modo Claro: Botones Preset y Controles Superiores */
        html.light .propfirm-preset-btn.active {
            background-color: #ecfdf5 !important;
            color: #059669 !important;
            border-color: #10b981 !important;
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15) !important;
        }
        html.light .propfirm-preset-btn.inactive {
            background-color: #f1f5f9 !important;
            color: #475569 !important;
            border-color: #cbd5e1 !important;
        }
        html.light .propfirm-preset-btn.inactive:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        html.light .propfirm-step-btn {
            background-color: #f1f5f9 !important;
            color: #1e293b !important;
            border-color: #cbd5e1 !important;
        }
        html.light .propfirm-step-btn:hover {
            background-color: #e2e8f0 !important;
        }
        html.light .propfirm-reset-btn {
            background-color: #f8fafc !important;
            color: #64748b !important;
            border-color: #cbd5e1 !important;
        }
        html.light .propfirm-reset-btn:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }

        /* Modo Claro: Tarjeta de Objetivo Principal (Legibilidad Perfecta) */
        html.light #pf-target-box {
            background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
            border-color: #86efac !important;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.08) !important;
        }
        html.light #pf-target-box #pf-target-title {
            color: #065f46 !important;
        }
        html.light #pf-target-box #pf-current-balance {
            color: #047857 !important;
        }
        html.light #pf-target-box #pf-current-gain {
            color: #059669 !important;
        }
        html.light #pf-target-box .bg-gray-900 {
            background-color: #e2e8f0 !important;
            border-color: #cbd5e1 !important;
        }
        html.light #pf-target-box .text-gray-400 {
            color: #475569 !important;
        }
        html.light #pf-target-box #pf-target-distance {
            color: #b45309 !important;
        }
        html.light #pf-target-box #pf-target-distance.goal-reached {
            color: #059669 !important;
        }

        /* Modo Claro: Gauges y Pistas de Barras */
        html.light #showcase-view-propfirm .bg-gray-950\/80,
        html.light #showcase-view-propfirm .bg-gray-900\/80 {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        html.light #showcase-view-propfirm .bg-gray-900\/90 {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }
        html.light #showcase-view-propfirm .bg-gray-900\/90 .text-gray-400 {
            color: #64748b !important;
        }
        html.light #showcase-view-propfirm .bg-gray-950 {
            background-color: #e2e8f0 !important;
            border-color: #cbd5e1 !important;
        }
        html.light #showcase-view-propfirm .text-white {
            color: #0f172a !important;
        }
        html.light #showcase-view-propfirm .text-gray-300 {
            color: #334155 !important;
        }
        html.light #showcase-view-propfirm .text-gray-400 {
            color: #64748b !important;
        }

        /* Modo Claro: Toast inferior y Píldoras */
        html.light #showcase-view-propfirm #pf-step-toast {
            background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
            border-color: #bbf7d0 !important;
        }
        html.light #showcase-view-propfirm #pf-toast-desc {
            color: #1e293b !important;
        }
        html.light #showcase-view-propfirm #pf-days-pill,
        html.light #showcase-view-propfirm #pf-rr-pill {
            background-color: #ffffff !important;
            border-color: #bbf7d0 !important;
            color: #065f46 !important;
        }

        /* Modo Claro: Modal de Celebración */
        html.light #phaseCelebrationModal .phase-celebration-pop {
            background-color: #ffffff !important;
            border-color: #f59e0b !important;
        }
        html.light #phaseCelebrationModal h3 {
            color: #0f172a !important;
        }
        html.light #phaseCelebrationModal #phaseCelebrationSummary {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
            color: #334155 !important;
        }
        html.light #phaseCelebrationModal #phaseCelebrationSummary .text-gray-300 {
            color: #334155 !important;
        }
        html.light #phaseCelebrationModal #phaseCelebrationSummary .text-white {
            color: #0f172a !important;
        }
        html.light #phaseCelebrationModal #phaseCelebrationSummary .border-gray-800\/60 {
            border-color: #e2e8f0 !important;
        }

        /* ==========================================================================
           BENTO GRID CARACTERÍSTICAS (AMBOS TEMAS)
           ========================================================================== */
        .bento-calc-btn.active {
            background-color: rgba(59, 130, 246, 0.25);
            color: #60a5fa;
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
        }
        .bento-calc-btn.inactive {
            background-color: rgba(17, 24, 39, 0.8);
            color: #9ca3af;
            border-color: rgba(75, 85, 99, 0.4);
        }
        .bento-calc-btn.inactive:hover {
            color: #ffffff;
            border-color: rgba(156, 163, 175, 0.6);
        }

        /* Modo Claro: Bento Grid */
        html.light #caracteristicas {
            background-color: #f8fafc !important;
            border-color: #e2e8f0 !important;
        }
        html.light #caracteristicas .bento-card {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
        }
        html.light #caracteristicas .bento-card:hover {
            border-color: #10b981 !important;
            box-shadow: 0 10px 25px rgba(16, 185, 129, 0.1) !important;
        }
        html.light #caracteristicas .text-white {
            color: #0f172a !important;
        }
        html.light #caracteristicas .text-gray-300 {
            color: #334155 !important;
        }
        html.light #caracteristicas .text-gray-400 {
            color: #64748b !important;
        }
        html.light #caracteristicas .bg-gray-950\/90,
        html.light #caracteristicas .bg-gray-950 {
            background-color: #f8fafc !important;
            border-color: #cbd5e1 !important;
        }
        html.light #caracteristicas .bg-gray-900\/80,
        html.light #caracteristicas .bg-gray-900\/90,
        html.light #caracteristicas .bg-gray-900 {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        html.light #caracteristicas .bento-calc-btn.active {
            background-color: #eff6ff !important;
            color: #2563eb !important;
            border-color: #3b82f6 !important;
        }
        html.light #caracteristicas .bento-calc-btn.inactive {
            background-color: #f1f5f9 !important;
            color: #475569 !important;
            border-color: #cbd5e1 !important;
        }
        html.light #caracteristicas .bento-calc-btn.inactive:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        html.light #caracteristicas #bento-btn-loss {
            color: #64748b !important;
        }
        html.light #caracteristicas #bento-btn-loss:hover {
            color: #0f172a !important;
        }
        html.light #caracteristicas .text-emerald-400 {
            color: #059669 !important;
        }
        html.light #caracteristicas .text-emerald-300 {
            color: #047857 !important;
        }
        html.light #caracteristicas .text-rose-400 {
            color: #e11d48 !important;
        }
        html.light #caracteristicas .text-blue-400,
        html.light #caracteristicas .text-sky-400,
        html.light #caracteristicas .text-cyan-400 {
            color: #2563eb !important;
        }
        html.light #caracteristicas .text-cyan-300,
        html.light #caracteristicas .text-blue-300 {
            color: #1d4ed8 !important;
        }
        html.light #caracteristicas .text-yellow-400,
        html.light #caracteristicas .text-amber-400,
        html.light #caracteristicas .text-amber-300 {
            color: #d97706 !important;
        }
        html.light #caracteristicas .text-teal-400 {
            color: #0d9488 !important;
        }
        html.light #caracteristicas .text-indigo-400,
        html.light #caracteristicas .text-indigo-300 {
            color: #4f46e5 !important;
        }
        html.light #caracteristicas .border-gray-800\/60,
        html.light #caracteristicas .border-gray-800\/80,
        html.light #caracteristicas .border-gray-800\/90,
        html.light #caracteristicas .border-gray-800 {
            border-color: #e2e8f0 !important;
        }
        html.light #caracteristicas .bg-gray-900 {
            background-color: #e2e8f0 !important;
        }
        html.light #caracteristicas .bg-emerald-950\/60 {
            background-color: #ecfdf5 !important;
            border-color: #a7f3d0 !important;
        }
        html.light #caracteristicas .bg-rose-950\/60 {
            background-color: #fff1f2 !important;
            border-color: #fecdd3 !important;
        }
        html.light #caracteristicas .bg-emerald-950\/80 {
            background-color: #d1fae5 !important;
            border-color: #10b981 !important;
        }

        /* ==========================================================================
           Tour Interactivo de Primeros Pasos con Spotlight
           ========================================================================== */
        #tourOverlay {
            transition: opacity 0.25s ease-in-out;
        }
        #tourOverlay.tour-active {
            display: block !important;
            opacity: 1;
        }
        #tourHighlightRing {
            transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #tourTooltip {
            transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.2s ease,
                        transform 0.2s ease;
        }
        html.light #tourTooltip {
            background-color: #ffffff;
            border-color: #10b981;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        html.light #tourTooltip h4 {
            color: #0f172a;
        }
        html.light #tourTooltip p {
            color: #475569;
        }
        html.light #tourTooltip .border-t {
            border-color: #e2e8f0;
        }
        html.light #tourPrevBtn {
            color: #64748b;
        }
        html.light #tourPrevBtn:hover {
            color: #0f172a;
            background-color: #f1f5f9;
        }
        .tour-dot {
            width: 7px;
            height: 7px;
            border-radius: 9999px;
            background-color: rgba(148, 163, 184, 0.4);
            transition: all 0.25s ease;
        }
        .tour-dot.active {
            width: 18px;
            background-color: #10b981;
        }

        /* Guía de Entrada y Post-Análisis & Menú Guía */
        #guideMenu {
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        #tradeLifecycleModal {
            transition: opacity 0.25s ease-in-out;
        }
        html.light #tradeLifecycleModal .bg-card {
            background-color: #ffffff;
            border-color: #cbd5e1;
        }
        html.light #tradeLifecycleModal h3 {
            color: #0f172a;
        }
        html.light #tradeLifecycleModal .bg-gray-900\/80,
        html.light #tradeLifecycleModal .bg-gray-900\/60,
        html.light #tradeLifecycleModal .bg-gray-900\/50 {
            background-color: #f8fafc;
            border-color: #e2e8f0;
        }
        html.light #tradeLifecycleModal .text-gray-300 {
            color: #334155;
        }
        html.light #tradeLifecycleModal .text-gray-400 {
            color: #64748b;
        }
        html.light #tradeLifecycleModal .border-main\/50,
        html.light #tradeLifecycleModal .border-main\/30 {
            border-color: #e2e8f0;
        }

        /* ==========================================================================
           SHOWCASE STORIES PROGRESS BARS & AUTO-TOUR
           ========================================================================== */
        .story-track {
            background-color: rgba(31, 41, 55, 0.7);
            transition: background-color 0.2s ease, transform 0.15s ease;
        }
        .story-track:hover {
            background-color: rgba(55, 65, 81, 0.9);
            transform: scaleY(1.3);
        }
        .story-fill {
            transition: width 0.06s linear, opacity 0.2s ease;
        }

        /* Modo Claro: Showcase Stories Bars */
        html.light .story-track {
            background-color: #e2e8f0 !important;
        }
        html.light .story-track:hover {
            background-color: #cbd5e1 !important;
        }
        html.light .story-fill {
            background-color: #059669 !important;
            box-shadow: 0 0 8px rgba(5, 150, 105, 0.4) !important;
        }
        html.light #showcase-tour-status-btn {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #334155 !important;
        }
        html.light #showcase-tour-status-btn:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        html.light #showcase-resume-pill,
        html.light #showcase-resume-pill-m {
            background-color: #059669 !important;
            color: #ffffff !important;
        }