:root {
            --bg-deep: #050505;
            --neon-orange: #ff6a00;
            --neon-glow: #ff8c00;
            --border-tech: rgba(255, 106, 0, 0.3);
            --nucky-gold: #ffcc00;
        }

        * { 
            box-sizing: border-box; margin: 0; padding: 0; font-family: 'Coolvetica Rg It', 'Modern Romance', 'Nighthawk', sans-serif; 
            -webkit-tap-highlight-color: transparent; 
        }
        
        body { 
            background-color: #080808;
            background-image: 
                radial-gradient(circle at 50% 0%, rgba(255, 106, 0, 0.15) 0%, transparent 70%),
                radial-gradient(#222 1px, transparent 1px), 
                radial-gradient(#222 1px, transparent 1px);
            background-size: 100% 100%, 20px 20px, 20px 20px;
            background-position: 0 0, 0 0, 10px 10px;
            color: white; 
            min-height: 100vh; 
            overflow-x: hidden;
            user-select: none;
        }

        .pop-effect {
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s;
            cursor: pointer;
        }
        .pop-effect:active {
            transform: scale(0.90) !important;
            filter: brightness(1.2);
            transition: transform 0.05s ease-in;
        }

        .btn-glow {
            background: linear-gradient(135deg, var(--neon-orange) 0%, #ff4500 100%);
            color: white; border: none; border-radius: 50px; font-weight: 800; letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4); text-transform: uppercase;
            position: relative; overflow: hidden; transition: transform 0.2s;
        }
        .btn-glow:active { transform: scale(0.90); }

        /* --- LOGIN SCREEN --- */
        #login-screen {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; z-index: 1000; 
            background: #080808;
            background-image: radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 0%, transparent 80%), radial-gradient(#1a1a1a 1px, transparent 1px);
            background-size: 100% 100%, 15px 15px;
        }
        
        .logo-login { font-size: 42px; font-weight: 800; color: white; text-shadow: 0 5px 15px rgba(0,0,0,0.5); margin-bottom: 40px; letter-spacing: -1px; }
        .logo-login span { background: linear-gradient(to right, #ff6a00, #ffcc00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        .input-group { position: relative; width: 100%; max-width: 320px; margin-bottom: 20px; }
        input { width: 100%; padding: 16px 20px; border-radius: 12px; border: 1px solid #333; background: rgba(20, 20, 20, 0.9); color: white; font-size: 16px; outline: none; transition: 0.3s; }
        input:focus { border-color: var(--neon-orange); box-shadow: 0 0 10px rgba(255, 106, 0, 0.2); }
        .legal-text { margin-top: 40px; text-align: center; color: #555; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

        /* --- MAIN APP --- */
        #main-app { display: none; padding-bottom: 120px; overflow: auto; -webkit-overflow-scrolling: touch; }
        
        .app-header {
            display: flex; justify-content: space-between; align-items: center; padding: 20px; 
            background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        .welcome-hero { padding: 30px 20px; text-align: left; display: flex; flex-direction: column; gap: 6px;}
        #user-display { 
            font-family: 'Coolvetica Rg It', serif; font-weight: 800; font-size: 28px; 
            background: linear-gradient(to right, #fff, #bbb); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            margin-top: 0; text-transform: uppercase; font-style: italic;
            letter-spacing: 1px;
        }       
        .welcome-sub { color: var(--neon-orange); font-size: 14px; font-weight: 600; letter-spacing: 2px; font-style: italic; }

        .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0 20px 25px}
        .action-card {
            background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
            border: 1px solid var(--border-tech); border-radius: 20px; padding: 25px 10px;
            text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1);
            position: relative; overflow: hidden;
        }
        .action-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--neon-orange); box-shadow: 0 0 10px var(--neon-orange); }
        .action-card .emoji { font-size: 32px; margin-bottom: 8px; display: block; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); pointer-events: none; }
        .action-card span { font-weight: 700; font-size: 13px; color: #eee; letter-spacing: 0.5px; pointer-events: none; }

        .game-title { margin: 10px 20px 15px; font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
        .game-item {
            display: flex; align-items: center; justify-content: space-between;
            background: linear-gradient(to right, rgba(20,20,20,0.9), rgba(10,10,10,0.8));
            margin: 0 20px 15px; padding: 20px; border-radius: 16px; 
            border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 4px 10px rgba(0,0,0,0.2); position: relative;
        }
        .game-item::before { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon-orange), transparent); opacity: 0.5; }
        .game-item span { font-weight: 600; color: #ddd; font-size: 15px; pointer-events: none; }
        .game-item i { background: #222; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; color: var(--neon-orange); box-shadow: 0 0 10px rgba(0,0,0,0.5); pointer-events: none; }

        .footer-social { display: flex; flex-direction: column; align-items: center; margin-top: 40px; gap: 15px; }
        .social-icons { display: flex; align-items: center; gap: 25px; }
        .social-icons i { font-size: 24px; color: #666; transition: 0.3s; }
        .social-icons .fa-whatsapp { color: #25D366; font-size: 38px; filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.3)); }
        .created-by { font-size: 10px; color: #333; text-transform: uppercase; letter-spacing: 2px; }

        /* --- MODALS & SIDEBAR --- */
        .modal-reg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 9000; padding: 20px; backdrop-filter: blur(8px); }
        .reg-content { background: #111; border: 1px solid var(--border-tech); box-shadow: 0 0 30px rgba(0,0,0,0.8); padding: 30px; border-radius: 30px; width: 100%; max-width: 350px; text-align: center; position: relative; }
        .sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background: #080808; z-index: 8000; transition: 0.4s; padding: 40px 25px; border-right: 1px solid #222; box-shadow: 10px 0 30px rgba(0,0,0,0.5); }
        .sidebar.active { left: 0; }
        .sidebar-menu { list-style: none; margin-top: 30px; }
        .sidebar-menu li { padding: 15px 0; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; gap: 15px; color: #ccc; font-size: 14px; }
        .sidebar-menu i { color: var(--neon-orange); width: 25px; text-align: center; }
        #menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 7999; display: none; }
        .link-box { background: #000; padding: 12px; border-radius: 8px; border: 1px dashed var(--neon-orange); color: #fff; font-family: 'Cooveltica Rg It', serif; font-size: 11px; margin: 15px 0; word-break: break-all; }
        
       /* --- ESTILOS RULETA VIP (VERSION PREMIUM RE-CALIBRADA) --- */
        .ruleta-container { 
            position: relative; 
            width: 100%; 
            max-width: 270px; /* Le damos un pelín más de cuerpo visual */
            aspect-ratio: 1/1; 
            margin: 20px auto; 
            border-radius: 50%; 
            /* Borde premium de acrílico oscuro y resplandor neón naranja de Milton */
            border: 6px solid #141416; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            box-shadow: 0 0 35px rgba(255, 106, 0, 0.45), inset 0 0 20px rgba(0, 0, 0, 0.9); 
            background: #08080a;
        }
        
        .ruleta { 
            width: 96%; 
            height: 96%; 
            border-radius: 50%; 
            position: relative; 
            overflow: hidden; 
            box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
        }
        
        /* Reemplazamos los planos de la normal por un degradado cónico cyber-naranja agresivo */
        .ruleta-normal { 
            background: conic-gradient(
                #ff5500 0deg 60deg, 
                #111115 60deg 120deg, 
                #ff7700 120deg 180deg, 
                #181822 180deg 240deg, 
                #ff3300 240deg 300deg, 
                #0a0a0c 300deg 360deg
            ); 
        }
        
        /* Reemplazamos los marrones de la dorada por oro puro metalizado y sombras premium */
        .ruleta-dorada { 
            background: conic-gradient(
                #fbbf24 0deg 60deg, 
                #78350f 60deg 120deg, 
                #fcd34d 120deg 180deg, 
                #451a03 180deg 240deg, 
                #f59e0b 240deg 300deg, 
                #9a3412 300deg 360deg
            ); 
        }
        
        /* El puntero superior ahora es un diamante afilado con luz propia */
        .ruleta-pointer { 
            position: absolute; 
            top: -14px; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 0; 
            height: 0; 
            border-left: 14px solid transparent; 
            border-right: 14px solid transparent; 
            border-top: 26px solid #fbbf24; /* Amarillo oro brillante para el contraste */
            filter: drop-shadow(0 2px 10px rgba(251, 191, 36, 0.7));
            z-index: 20; 
        }
        
        /* Pin central decorativo estilo casino flotante */
        .ruleta-container::after {
            content: '';
            position: absolute;
            width: 55px;
            height: 55px;
            background: radial-gradient(circle, #252529 0%, #050505 100%);
            border: 2px solid var(--neon-orange);
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(255, 106, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1);
            z-index: 5;
            pointer-events: none; /* No estorba los clics */
        }
        
        .racha-badge { 
            background: rgba(15, 15, 20, 0.75); 
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            padding: 6px 18px; 
            border-radius: 20px; 
            font-size: 12px; 
            color: white; 
            display: inline-block; 
            margin-bottom: 12px; 
            border: 1px solid rgba(255,106,0,0.25); 
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        .racha-dorada { 
            border-color: var(--nucky-gold); 
            color: var(--nucky-gold); 
            font-weight: 800; 
            background: rgba(251, 191, 36, 0.12); 
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.6); 
            font-size: 13px; 
            padding: 8px 22px; 
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); 
            text-transform: uppercase;
        }
        
        .banner-dorado { 
            border: 1px solid rgba(251, 191, 36, 0.3); 
            background: rgba(251, 191, 36, 0.04); 
            backdrop-filter: blur(5px);
            padding: 14px; 
            border-radius: 16px; 
            margin-bottom: 15px; 
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); 
        }
        
        .neon-border-normal { border: 1px solid rgba(255, 106, 0, 0.3) !important; box-shadow: 0 0 25px rgba(255, 106, 0, 0.15); }
        .neon-border-dorado { border: 1px solid rgba(255, 204, 0, 0.4) !important; box-shadow: 0 0 35px rgba(251, 191, 36, 0.25); }
        .sufijo-input { position: absolute; right: 15px; top: 15px; color: #666; font-weight: bold; }
        .suggestion { font-size: 11px; color: #d4af37; height: 15px; display: block; margin-bottom:10px; cursor:pointer; }
        
        /* --- NAVBAR INFERIOR --- */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); /* Centrado absoluto en PC y Celular */
            width: 100%;
            max-width: 480px; /* CLAVE: En PC no se estira, se contiene al ancho de un celular */
            height: 68px;
            
            /* Fondo de acrílico oscuro translúcido */
            background: rgba(15, 15, 20, 0.75) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            
            /* Línea superior neón ultra delgada */
            border-top: 1px solid rgba(255, 106, 0, 0.18);
            
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-bottom: env(safe-area-inset-bottom);
            z-index: 1000;
            box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.6);
            border-radius: 0;
        }

        /* DISEÑO ESPECÍFICO CUANDO SE ABRE DESDE UNA PC (Pantallas mayores a 480px) */
        @media (min-width: 481px) {
            .bottom-nav {
                bottom: 16px; /* Flota sutilmente en el escritorio */
                border: 1px solid rgba(255, 106, 0, 0.25); /* Contorno neón completo en PC */
                border-radius: 24px; /* Esquinas redondeadas premium en monitores */
                width: calc(100% - 32px);
                box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 106, 0, 0.2);
            }
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #8a8a93;
            font-size: 11px;
            font-weight: 600;
            text-decoration: none;
            gap: 5px;
            width: 20%;
            height: 100%;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-item i {
            font-size: 20px;
            transition: transform 0.2s ease;
        }

        .nav-item.active {
            color: #ffffff !important;
        }

        .nav-item.active i {
            color: var(--neon-orange) !important;
            transform: translateY(-2px) scale(1.1);
            text-shadow: 0 0 12px rgba(255, 106, 0, 0.6);
        }

        .nav-item:active i {
            transform: scale(0.9);
        }

        .btn-atencion {
            width: calc(100% - 40px); 
            /* Fondo oscuro translúcido con efecto vidrio */
            background: rgba(20, 20, 25, 0.6); 
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            
            /* Bordes elegantes y sutiles en naranja neón */
            border: 1px solid rgba(255, 106, 0, 0.25); 
            border-radius: 20px;
            
            padding: 18px; 
            color: #ffffff; 
            font-weight: 700; 
            font-size: 15px; 
            letter-spacing: 0.5px;
            
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 10px; 
            margin: 0 20px 25px 20px;
            
            /* Sombra profunda para dar volumen */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0px rgba(255, 255, 255, 0.05);
            transition: all 0.2s ease;
        }

        /* Color exclusivo para el ícono de mensajes dentro del botón */
        .btn-atencion i {
            color: var(--neon-orange);
            font-size: 18px;
            text-shadow: 0 0 10px rgba(255, 106, 0, 0.4);
        }
        .woot-widget-bubble, .chatwoot-widget-bubble {
            bottom: 95px !important; 
            right: 20px !important;
            transition: bottom 0.3s ease !important;
            z-index: 99999 !important;
        }
        @media (min-width: 768px) {
        .woot-widget-holder {
            bottom: 95px !important;
            right: 20px !important;
            z-index: 99999 !important;
            }
        }

        /* ==================== CUSTOM NOTIFICATION VIP ==================== */
        .custom-notification-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            animation: fadeInBg 0.3s ease;
        }

        .custom-notification-modal.show {
            display: flex;
        }

        /* LA CAJA PRINCIPAL (CON EFECTO SHINE) */
        .custom-notification-content {
            background: linear-gradient(160deg, #18181b 0%, #09090b 100%);
            border-radius: 24px;
            padding: 30px;
            max-width: 380px;
            width: 90%;
            text-align: center;
            position: relative;
            overflow: hidden;
            animation: modalPopUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Efecto de rayo de luz (Chiche premium) */
        .custom-notification-content::before {
            content: '';
            position: absolute;
            top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
            transform: skewX(-25deg);
            animation: shineEffect 3s infinite;
            pointer-events: none;
        }

        /* ==================== TEMA BASE / ÉXITO (NARANJA NEÓN) ==================== */
        .theme-default {
            border: 1px solid var(--neon-orange);
            box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(255, 106, 0, 0.15);
        }
        .theme-default #notification-title {
            color: var(--nucky-gold);
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        }
        .theme-default .btn-notification-close {
            background: linear-gradient(135deg, var(--neon-orange) 0%, #ff4500 100%);
            box-shadow: 0 4px 15px rgba(255, 69, 0, 0.4);
        }
        .theme-default .notification-icon {
            filter: drop-shadow(0 0 12px rgba(255, 106, 0, 0.5));
            animation: floatIcon 2.5s ease-in-out infinite;
        }

        /* ==================== TEMA ERROR (ROJO SANGRE) ==================== */
        .theme-error {
            border: 1px solid #ef4444;
            background: linear-gradient(160deg, #2a0808 0%, #0a0000 100%);
            box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(239, 68, 68, 0.2);
        }
        .theme-error #notification-title {
            color: #ef4444;
            text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
        }
        .theme-error .btn-notification-close {
            background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
        }
        .theme-error .notification-icon {
            filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.6));
            animation: shakeIcon 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }

        /* TEXTOS Y BOTONES GLOBALES */
        .notification-icon { font-size: 55px; margin-bottom: 15px; min-height: 55px; }
        #notification-title { font-size: 22px; font-weight: 800; margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 1px; }
        #notification-message { color: #e2e8f0; font-size: 14px; line-height: 1.6; margin: 15px 0 25px 0; font-weight: 500; }

        .btn-notification-close {
            color: white; border: none; padding: 14px 35px; font-size: 14px; font-weight: 800;
            border-radius: 50px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .btn-notification-close:active { transform: scale(0.92); }

        /* ANIMACIONES KEYFRAMES */
        @keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modalPopUp {
            0% { opacity: 0; transform: scale(0.8) translateY(20px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes floatIcon {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px) scale(1.1); }
        }
        @keyframes shakeIcon {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }
        @keyframes shineEffect {
            0% { left: -100%; }
            20% { left: 200%; }
            100% { left: 200%; }
        }

                @font-face {
                    font-family: 'Coolvetica Rg It';
                    src: url('fonts/Coolvetica Rg It.otf') format('opentype');
                    font-weight: normal;
                    font-style: italic;
                    font-display: swap;
                }