html {
            overflow-x: clip;
        }
        [x-cloak] { display: none !important; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .dark ::-webkit-scrollbar-thumb { background: #334155; }

        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .dark .glass {
            background: rgba(15, 23, 42, 0.7);
        }

        .card-shadow {
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
        }
        .dark .card-shadow {
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
        }

        @keyframes slide-in {
            from { transform: translateY(10px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .animate-slide-in { animation: slide-in 0.3s ease-out forwards; }

        /* Status Pulse */
        .pulse-emerald { animation: pulse-emerald 2s infinite; }
        @keyframes pulse-emerald {
            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        /* Login footer — infraestructura lista (latido doble, legible) */
        .midi-status-ring {
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            background: rgba(16, 185, 129, 0.55);
            animation: midi-status-heartbeat-ring 1.65s ease-out infinite;
        }
        @keyframes midi-status-heartbeat-ring {
            0% { transform: scale(1); opacity: 0.75; }
            11% { transform: scale(2.75); opacity: 0; }
            17% { transform: scale(1); opacity: 0; }
            26% { transform: scale(1); opacity: 0.68; }
            40% { transform: scale(2.45); opacity: 0; }
            48%, 100% { transform: scale(1); opacity: 0; }
        }
        .midi-status-core {
            animation: midi-status-heartbeat-core 1.65s ease-out infinite;
        }
        @keyframes midi-status-heartbeat-core {
            0%, 100% { transform: scale(1); opacity: 0.88; }
            11% { transform: scale(1.38); opacity: 1; }
            17% { transform: scale(1); opacity: 0.85; }
            26% { transform: scale(1.06); opacity: 0.95; }
            40% { transform: scale(1.32); opacity: 1; }
            48%, 100% { transform: scale(1); opacity: 0.88; }
        }

        /* Sidebar — tarjeta “viva”: brillo suave + barras de actividad */
        .midi-status-live::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                105deg,
                transparent 36%,
                rgba(16, 185, 129, 0.07) 50%,
                transparent 64%
            );
            background-size: 220% 100%;
            animation: midi-status-live-sweep 5s ease-in-out infinite;
            pointer-events: none;
        }
        .dark .midi-status-live::after {
            background: linear-gradient(
                105deg,
                transparent 36%,
                rgba(52, 211, 153, 0.09) 50%,
                transparent 64%
            );
            background-size: 220% 100%;
        }
        @keyframes midi-status-live-sweep {
            0% { background-position: 100% 0; opacity: 0.35; }
            50% { opacity: 0.75; }
            100% { background-position: -100% 0; opacity: 0.35; }
        }
        .midi-mem-bar {
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
        }
        .midi-eq__bar {
            width: 2px;
            height: 12px;
            align-self: flex-end;
            border-radius: 999px;
            background: linear-gradient(to top, #059669, #34d399);
            transform-origin: bottom center;
            animation: midi-eq-pulse 0.85s ease-in-out infinite;
        }
        .midi-eq__bar:nth-child(1) { animation-delay: 0s; }
        .midi-eq__bar:nth-child(2) { animation-delay: 0.14s; }
        .midi-eq__bar:nth-child(3) { animation-delay: 0.28s; }
        .midi-eq__bar:nth-child(4) { animation-delay: 0.1s; }
        @keyframes midi-eq-pulse {
            0%, 100% { transform: scaleY(0.28); opacity: 0.5; }
            50% { transform: scaleY(1); opacity: 1; }
        }
        .midi-process-track {
            position: relative;
        }
        .midi-process-track__glow {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 42%;
            border-radius: 999px;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(16, 185, 129, 0.55),
                rgba(59, 130, 246, 0.45),
                transparent
            );
            filter: blur(0.5px);
            animation: midi-process-scan 2.4s ease-in-out infinite;
        }
        .dark .midi-process-track__glow {
            background: linear-gradient(
                90deg,
                transparent,
                rgba(52, 211, 153, 0.5),
                rgba(96, 165, 250, 0.4),
                transparent
            );
        }
        @keyframes midi-process-scan {
            0% { transform: translateX(-100%); opacity: 0.4; }
            40% { opacity: 1; }
            100% { transform: translateX(240%); opacity: 0.35; }
        }
        @media (prefers-reduced-motion: reduce) {
            .midi-status-live::after { animation: none; opacity: 0; }
            .midi-mem-bar { transition: none; }
            .midi-eq__bar { animation: none; transform: scaleY(0.55); opacity: 0.75; }
            .midi-process-track__glow { animation: none; transform: translateX(20%); opacity: 0.5; }
            .midi-status-ring,
            .midi-status-core { animation: none; }
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 10px;
        }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #334155;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #cbd5e1;
        }

        /* Login — selector país (flag-icons SVG + capas premium) */
        .midi-flag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 6px;
            overflow: hidden;
            box-shadow:
                0 1px 2px rgba(15, 23, 42, 0.1),
                0 0 0 1px rgba(15, 23, 42, 0.06);
        }
        .dark .midi-flag {
            box-shadow:
                0 1px 3px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.1);
        }
        .midi-flag .fi {
            display: block;
            width: 100% !important;
            height: 100% !important;
            line-height: 1 !important;
            background-size: cover !important;
            background-position: center !important;
            border-radius: inherit;
        }
        .midi-flag--trigger {
            width: 1.3125rem;
            height: 1.3125rem;
        }
        .midi-flag--row {
            width: 1.875rem;
            height: 1.875rem;
        }
        .midi-country-option--active {
            padding-left: 1rem !important;
            background: linear-gradient(105deg, rgba(244, 242, 255, 0.98) 0%, rgba(207, 248, 254, 0.35) 100%);
            box-shadow: inset 0 0 0 1px rgba(113, 89, 245, 0.14);
        }
        .dark .midi-country-option--active {
            background: linear-gradient(105deg, rgba(62, 55, 150, 0.35) 0%, rgba(8, 90, 110, 0.22) 100%);
            box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.22);
        }
        .midi-country-panel {
            box-shadow:
                0 24px 64px -16px rgba(15, 23, 42, 0.32),
                inset 0 0 0 1px rgba(255, 255, 255, 0.45);
        }
        .dark .midi-country-panel {
            box-shadow:
                0 28px 64px -12px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
        }
        .midi-country-option--active::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 58%;
            max-height: 2rem;
            border-radius: 9999px;
            background: linear-gradient(180deg, #6247e8 0%, #07b7dc 100%);
            box-shadow: 0 0 12px rgba(98, 71, 232, 0.35);
        }

        /* Login hero — título con acento animado + blobs */
        .midi-hero-h1 {
            perspective: 900px;
        }
        .midi-hero-h1-part {
            display: inline-block;
            animation: midi-h1-part-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .midi-hero-h1-part--delay {
            animation-delay: 0.16s;
        }
        @keyframes midi-h1-part-in {
            from {
                opacity: 0;
                transform: translateY(0.65em) rotateX(16deg);
                filter: blur(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0) rotateX(0deg);
                filter: blur(0);
            }
        }
        .midi-headline-highlight {
            position: relative;
            z-index: 0;
            isolation: isolate;
            display: inline-block;
            margin-left: 0.04em;
            padding: 0 0.02em 0.06em;
            background-image: linear-gradient(
                105deg,
                #5338cb 0%,
                #7159f5 18%,
                #07b7dc 52%,
                #9b82ff 82%,
                #6247e8 100%
            );
            background-size: 240% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: midi-headline-shimmer 8s ease-in-out infinite;
        }
        .dark .midi-headline-highlight {
            background-image: linear-gradient(
                105deg,
                #b8a9ff 0%,
                #67e3f8 38%,
                #9b82ff 68%,
                #cff8fe 100%
            );
            background-size: 240% auto;
            filter: drop-shadow(0 0 20px rgba(113, 89, 245, 0.28));
        }
        @keyframes midi-headline-shimmer {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .midi-headline-highlight::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0.02em;
            height: 0.12em;
            min-height: 3px;
            border-radius: 9999px;
            background: linear-gradient(90deg, rgba(98, 71, 232, 0.5), rgba(7, 183, 220, 0.55), rgba(155, 130, 255, 0.45));
            opacity: 0.85;
            transform: scaleX(0.92);
            transform-origin: left center;
            animation: midi-underline-glow 5s ease-in-out infinite;
            pointer-events: none;
            z-index: -1;
        }
        .dark .midi-headline-highlight::after {
            opacity: 0.55;
        }
        @keyframes midi-underline-glow {
            0%, 100% { opacity: 0.75; transform: scaleX(0.88); }
            50% { opacity: 1; transform: scaleX(0.97); }
        }
        .midi-hero-blob {
            will-change: transform, opacity;
        }
        .midi-hero-blob-a {
            animation: midi-blob-a 24s ease-in-out infinite;
        }
        .midi-hero-blob-b {
            animation: midi-blob-b 30s ease-in-out infinite;
        }
        .midi-hero-blob-c {
            animation: midi-blob-c 18s ease-in-out infinite;
        }
        @keyframes midi-blob-a {
            0%, 100% { transform: translate(0, 0) scale(1); }
            40% { transform: translate(18px, -24px) scale(1.08); }
            70% { transform: translate(-14px, 12px) scale(0.95); }
        }
        @keyframes midi-blob-b {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
            50% { transform: translate(-22px, 18px) scale(1.06); opacity: 1; }
        }
        @keyframes midi-blob-c {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(14px, -20px) scale(1.12); }
        }
        @media (prefers-reduced-motion: reduce) {
            .midi-headline-highlight,
            .midi-headline-highlight::after,
            .midi-hero-h1-part,
            .midi-hero-blob {
                animation: none !important;
            }
            .midi-headline-highlight {
                background-position: 0% 50%;
            }
            .midi-hero-h1-part {
                opacity: 1;
                transform: none;
                filter: none;
            }
            .midi-login-submit:active {
                transform: none !important;
            }
        }

        .midi-login-card,
        .midi-login-form-shell {
            -webkit-tap-highlight-color: transparent;
        }
        @media (max-width: 1023px) {
            .midi-login-header {
                border-bottom: 1px solid rgba(148, 163, 184, 0.12);
            }
            .dark .midi-login-header {
                border-bottom-color: rgba(51, 65, 85, 0.5);
            }
        }