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

/* Animaciones para el loading screen */
@keyframes pulse-loading {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-smooth {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Estilos del loading screen */
#global-loading {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#global-loading .loading-logo {
    animation: pulse-loading 2s ease-in-out infinite;
}

#global-loading .loading-text {
    animation: fade-in-up 0.8s ease-out 0.3s both;
}

#global-loading .loading-dots {
    animation: fade-in-up 0.8s ease-out 0.6s both;
}

/* Estilos de la barra de progreso */
#loading-progress-bar {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    position: relative;
    overflow: hidden;
}

/* Asegurar que no haya pseudo-elementos residuales */
#loading-progress-bar::before,
#loading-progress-bar::after {
    display: none !important;
}

/* Eliminar cualquier efecto de brillo en elementos hijos */
#loading-progress-bar > * {
    animation: none !important;
    background: none !important;
}

/* Efecto shimmer removido para mantener colores limpios */

/* Animación shimmer removida - no se necesita */

#loading-percentage {
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: right;
}

#loading-task {
    min-height: 1rem;
    transition: opacity 0.3s ease;
}

body {
    font-family: 'Inter', sans-serif;
    /* Solo prevenir selección de texto, no bloquear clics */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Permitir selección solo en inputs y textareas */
input, textarea, select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Prevenir comportamientos de arrastre en elementos específicos */
html {
    touch-action: none; /* Bloquea pinch-zoom y doble tap zoom globalmente */
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    touch-action: pan-x pan-y;
}

/* Permitir scroll normal en contenedores principales */
body.app-layout {
    position: static;
    overflow: auto;
    height: auto;
}

/* Contenedor principal que permite scroll */
.main-content {
    -webkit-overflow-scrolling: touch;
}

/* Prevenir drag en imágenes y elementos */
img, svg, button, div, span {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* Prevenir doble tap zoom en todos los elementos interactivos */
button, a, input, textarea, select, div, span, img, svg {
    touch-action: manipulation;
}

/* Contenedores scrolleable específicos */
.slider-container, .scrollbar-hide {
    overflow-x: auto;
}


/* Para dispositivos móviles específicamente */
@media screen and (max-device-width: 768px) {
  
    /* Inputs específicos del juego */
    .game-input {
        font-size: 12px !important;
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Gradientes personalizados */
.dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.3);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 375px) {
    .game-input {
        font-size: 12px !important; /* Asegurar que nunca sea menor a 12px */
        width: 36px;
        height: 28px;
    }
    
    .qp-button {
        width: 28px;
        height: 28px;
        font-size: 9px;
    }
    
    .combo-button {
        font-size: 9px;
        padding: 2px 6px;
    }
    
    .draw-checkbox {
        font-size: 9px;
        padding: 2px 1px;
    }
    
    .nav-arrow {
        width: 24px;
        height: 24px;
    }
    
    .game-card-slider {
        min-height: 160px;
    }
  
}

.gradient-orange {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #DC2626 100%);
}

.gradient-primary {
    background: linear-gradient(135deg, #174f36 0%, #1e5f42 50%, #0f3427 100%);
}

/* Animaciones */
@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.animate-pulse-soft {
    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Efectos de hover */
.game-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

/* Estilos para los números de lotería */
.lottery-ball {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Responsive adjustments */
@media (max-width: 375px) {
    .countdown-timer {
        gap: 4px;
    }
    
    .countdown-box {
        min-width: 50px;
        padding: 8px 12px;
    }
}

/* Sombras personalizadas */
.custom-shadow {
    box-shadow: 0 4px 6px -1px rgba(23, 79, 54, 0.1), 0 2px 4px -1px rgba(23, 79, 54, 0.06);
}

.custom-shadow-lg {
    box-shadow: 0 12px 15px -3px rgba(23, 79, 54, 0.1), 0 4px 6px -2px rgba(23, 79, 54, 0.05);
}

/* Mejoras para la navegación inferior */
.bottom-nav-item {
    position: relative;
    transition: all 0.2s ease-in-out;
}

.bottom-nav-item:active {
    transform: scale(0.95);
}

/* Estilos para el botón activo */
.active-play-button {
    background: linear-gradient(135deg, #F59E0B 0%, #DC2626 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* Loading states */
.loading {
    /* opacity: 0.7; */
    pointer-events: none;
}

/* Badge styles */
.notification-badge {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

/* Game view specific styles */
.game-slider-container {
    position: relative;
    overflow: hidden;
}

.game-slider-card {
    transition: transform 0.3s ease-in-out;
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3);
}

.game-slider-card:hover {
    transform: translateY(-2px);
}

/* Custom inputs for game cards */
.game-input {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    transition: all 0.2s ease-in-out;
    font-size: 12px !important; /* Prevenir zoom */
    -webkit-appearance: none;
    appearance: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.game-input:focus {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
    font-size: 12px !important; /* Mantener tamaño en focus */
}

.game-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

/* QP Button specific styles */
.qp-button {
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
    transition: all 0.2s ease-in-out;
    font-size: 12px;
    font-weight: 700;
}

.qp-button:hover {
    background: linear-gradient(135deg, #991B1B 0%, #7F1D1D 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.4);
}

.qp-button.selected {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Combo button styles */
.combo-button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease-in-out;
    font-size: 12px;
    font-weight: 500;
}

.combo-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.combo-button.selected {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* Draw checkbox styles */
.draw-checkbox {
    transition: all 0.2s ease-in-out;
    font-size: 12px;
    font-weight: 600;
}

/* Navigation arrows in card header */
.nav-arrow {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease-in-out;
}

.nav-arrow:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.nav-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dots indicator */
.dots-indicator {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease-in-out;
}

.dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

/* Countdown timer styles */
.countdown-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Bet selection styles */
.bet-option {
    transition: all 0.2s ease-in-out;
}

.bet-option:hover {
    transform: scale(1.05);
}

.bet-option.selected {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
}

/* Draw state tabs */
.draw-tab {
    transition: all 0.2s ease-in-out;
}

.draw-tab.active {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* Play button */
.play-button {
    background: linear-gradient(135deg, #F59E0B 0%, #DC2626 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    transition: all 0.2s ease-in-out;
}

.play-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.play-button:disabled {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* Notification styles */
.notification {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive adjustments for game view */
@media (max-width: 375px) {
    .game-slider-card {
        padding: 12px;
        min-height: 180px;
    }
    
    .bet-options {
        gap: 8px;
    }
    
    .draw-tabs {
        gap: 4px;
    }
}

/* Swipe indicators */
.swipe-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.swipe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.2s ease-in-out;
}

.swipe-dot.active {
    background: rgba(255, 255, 255, 0.8);
}
.gradient-bg {
            background: linear-gradient(135deg, #1c523a 0%, #235943 50%, #154129 100%);
        }
        
        /* Countdown background with lottery theme */
        .lottery-countdown-bg {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 25%, #8b5cf6 50%, #a855f7 75%, #d946ef 100%);
            background-size: 300% 300%;
            animation: lotteryGradient 8s ease infinite;
            position: relative;
        }

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

        /* Lottery timer cards */
        .lottery-timer-card {
            background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 16px;
            padding: 12px 8px;
            text-align: center;
            min-width: 70px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .lottery-timer-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
        }

        .lottery-timer-number {
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            line-height: 1;
            margin-bottom: 4px;
        }

        .lottery-timer-label {
            color: rgba(255,255,255,0.9);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .lottery-timer-separator {
            color: white;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Lottery Games Button */
        .lottery-games-button-container {
            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 24px;
            padding: 4px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .lottery-games-button {
            width: 100%;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 25%, #dc2626 50%, #b91c1c 75%, #7c2d12 100%);
            background-size: 300% 300%;
            animation: lotteryButtonGradient 4s ease infinite;
            border-radius: 20px;
            padding: 16px 24px;
            border: none;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .lottery-games-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .lottery-games-button:hover::before {
            left: 100%;
        }

        @keyframes lotteryButtonGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* Layout sticky para header y footer */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .main-header {
            position: sticky;
            top: 0;
            z-index: 40;
        }
        
        .main-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 80px;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }
        
        /* Prevenir scroll horizontal en toda la página */
        body {
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Mejorar el scroll */
        .main-content::-webkit-scrollbar {
            width: 4px;
        }
        
        .bottom-navigation {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 40;
        }
        
        .main-content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .main-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 2px;
        }
        
        .main-content::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
        
        /* Animación tipo hoja que cae para el countdown */
        .countdown-number {
            position: relative;
            overflow: hidden;
            display: inline-block;
            min-width: 1.5rem;
            text-align: center;
        }
        
        .countdown-digit {
            position: relative;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center;
        }
        
        .countdown-number.flip-animation .countdown-digit {
            animation: leafFall 0.8s ease-in-out;
        }
        
        @keyframes leafFall {
            0% {
                transform: rotateX(0deg) translateY(0);
                opacity: 1;
            }
            30% {
                transform: rotateX(-15deg) translateY(-10px);
                opacity: 0.8;
            }
            60% {
                transform: rotateX(15deg) translateY(10px);
                opacity: 0.6;
            }
            100% {
                transform: rotateX(0deg) translateY(0);
                opacity: 1;
            }
        }
        
        /* Efecto de sombra suave para el countdown */
        .countdown-container {
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* Game drawer styles */
        .game-card-slider {
            background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
            position: relative;
        }
        .draw-checkbox {
            position: relative;
            user-select: none;
        }
        .draw-checkbox:hover {
            z-index: 1;
        }
        .draw-checkbox.selected {
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        /* Mejoras para el comportamiento táctil y scroll */
        * {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }
        
        /* Mejorar containers para evitar scroll issues */
        .game-rules-container {
            contain: layout style paint;
            will-change: transform;
        }
        
        /* Optimización para scroll horizontal en drawers */
        .draw-item {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        
        /* Hacer el header del drawer sticky */
        .card-footer-sticky {
            position: sticky;
            top: 0;
            z-index: 30;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .card-footer-sticky .bg-white.bg-opacity-20 {
            background: rgba(255, 255, 255, 0.25) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* Estilos para reloj flip (hojas que bajan) */
        .flip-clock {
            display: inline-block;
            position: relative;
            margin: 0 1px;
            perspective: 300px;
        }

        .flip-clock-digit {
            position: relative;
            display: block;
            width: 28px;
            height: 36px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 4px;
            border: 1px solid #cbd5e0;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            overflow: hidden;
            transform-style: preserve-3d;
        }

        .flip-clock-digit:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, #a0aec0, transparent);
            z-index: 3;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
        }

        .flip-clock-digit:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 50%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
            border-radius: 4px 4px 0 0;
            z-index: 2;
        }

        .flip-clock-number {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            font-weight: bold;
            color: #2d3748;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
            z-index: 1;
        }

        .flip-animation .flip-clock-digit {
            animation: flipCard 0.8s ease-in-out;
        }

        @keyframes flipCard {
            0% { 
                transform: rotateX(0deg);
                transform-origin: bottom;
            }
            25% { 
                transform: rotateX(-15deg);
                transform-origin: bottom;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            }
            50% { 
                transform: rotateX(-90deg);
                transform-origin: bottom;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
            }
            75% { 
                transform: rotateX(-105deg);
                transform-origin: bottom;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            }
            100% { 
                transform: rotateX(0deg);
                transform-origin: bottom;
            }
        }

        .flip-clock-label {
            display: block;
            text-align: center;
            font-size: 8px;
            font-weight: 600;
            color: #718096;
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .flip-clock-separator {
            font-size: 16px;
            font-weight: bold;
            color: #4a5568;
            margin: 0 3px;
            /* animation: blink 2s infinite; */
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 36px;
            align-self: flex-start;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0.3; }
        }

        /* Card compacto para próximos sorteos */
        .compact-draw-card {
            transition: all 0.2s ease;
        }

        .compact-draw-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .draw-logo-compact {
            transition: all 0.2s ease;
        }

        .draw-logo-compact:hover {
            transform: scale(1.05);
        }

        /* Efecto de urgencia para flip clock */
        .urgent-flash .flip-clock-digit {
            background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
            border-color: #fc8181;
            animation: urgentPulse 1s infinite;
        }

        .urgent-flash .flip-clock-number {
            color: #c53030;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
        }

        @keyframes urgentPulse {
            0%, 100% { 
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 rgba(229, 62, 62, 0.3);
            }
            50% { 
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 8px rgba(229, 62, 62, 0.6);
            }
        }

        /* Mejorar el comportamiento del drawer */
        .overflow-x-auto {
            scroll-snap-type: x mandatory;
            scroll-padding: 16px;
        }
        
        .draw-item {
            scroll-snap-align: start;
        }
        
        /* Animaciones para sorteos */
        .draw-item {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(0);
        }
        
        .draw-item.moving-to-end {
            animation: slideToEnd 0.8s ease-in-out forwards;
            z-index: 10;
        }
        
        .draw-item.closed {
            opacity: 0.4;
            filter: grayscale(0.3);
            transform: scale(0.95);
        }
        
        .draw-item.unavailable {
            background: rgba(107, 114, 128, 0.3) !important;
            cursor: not-allowed !important;
            pointer-events: none !important;
        }
        
        /* Refuerzo para sorteos bloqueados */
        .draw-item.blocked {
            pointer-events: none !important;
            cursor: not-allowed !important;
            user-select: none !important;
            touch-action: none !important;
        }
        
        @keyframes slideToEnd {
            0% {
                transform: translateX(0) scale(1);
                opacity: 1;
            }
            50% {
                transform: translateX(10px) scale(0.9);
                opacity: 0.6;
            }
            100% {
                transform: translateX(0) scale(0.95);
                opacity: 0.4;
            }
        }
        
        /* Indicador visual de tiempo crítico */
        .time-critical {
            animation: pulse-red 2s infinite;
        }
        
        @keyframes pulse-red {
            0%, 100% { 
                background-color: rgba(239, 68, 68, 0.3);
            }
            50% { 
                background-color: rgba(239, 68, 68, 0.5);
            }
        }
        
        /* Text shadow para sorteos seleccionados */
        .selected-text-shadow {
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3);
        }
        
        /* Text shadow suave para sorteos abiertos */
        .open-text-shadow {
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        /* Estilos para fichas de lotería estilo casino */
        .lottery-chip {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .lottery-chip:hover {
            transform: translateY(-1px);
        }
        
        .lottery-chip .bg-gradient-to-br {
            box-shadow: 
                inset 0 2px 4px rgba(255,255,255,0.3),
                inset 0 -2px 4px rgba(0,0,0,0.1),
                0 2px 8px rgba(0,0,0,0.15);
        }
        
        /* Estilos para botón de eliminar jugada individual */
        .delete-bet-button {
            position: relative;
            background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
            border: none;
            border-radius: 8px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 
                0 2px 8px rgba(255, 68, 68, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }
        
        .delete-bet-button:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 
                0 4px 12px rgba(255, 68, 68, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
            background: linear-gradient(135deg, #ff5555 0%, #dd1111 100%);
        }
        
        .delete-bet-button:active {
            transform: translateY(-1px) scale(1.02);
            box-shadow: 
                0 2px 6px rgba(255, 68, 68, 0.5),
                inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .delete-bet-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s;
        }
        
        .delete-bet-button:hover::before {
            left: 100%;
        }
        
        .delete-bet-button svg {
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
            transition: transform 0.2s ease;
        }
        
        .delete-bet-button:hover svg {
            transform: scale(1.1);
        }
        
        /* Animación de pulso sutil para indicar interactividad */
        @keyframes subtle-pulse {
            0%, 100% {
                box-shadow: 
                    0 2px 8px rgba(255, 68, 68, 0.3),
                    inset 0 1px 2px rgba(255, 255, 255, 0.2);
            }
            50% {
                box-shadow: 
                    0 2px 12px rgba(255, 68, 68, 0.4),
                    inset 0 1px 2px rgba(255, 255, 255, 0.2);
            }
        }
        
        .delete-bet-button.pulse {
            animation: subtle-pulse 2s infinite;
        }
        
        /* Estilo mejorado para el botón Play de lotería */
        .lottery-play-button {
            position: relative;
            background: linear-gradient(135deg, #1c523a 0%, #235943 25%, #2d7f54 50%, #1c523a 100%);
            background-size: 300% 300%;
            animation: lotteryPlayGradient 3s ease infinite;
            border: none;
            border-radius: 16px;
            padding: 16px 24px;
            box-shadow: 
                0 8px 32px rgba(28, 82, 58, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.2),
                inset 0 -2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            overflow: hidden;
            color: white;
            font-weight: 700;
            font-size: 1.125rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            cursor: pointer;
        }
        
        .lottery-play-button:hover:not(:disabled) {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 
                0 12px 40px rgba(28, 82, 58, 0.5),
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, #235943 0%, #2d7f54 25%, #39966b 50%, #235943 100%);
        }
        
        .lottery-play-button:active:not(:disabled) {
            transform: translateY(-1px) scale(1.01);
            box-shadow: 
                0 6px 24px rgba(28, 82, 58, 0.6),
                inset 0 3px 6px rgba(0, 0, 0, 0.2);
        }
        
        .lottery-play-button:disabled {
            background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
            box-shadow: 
                0 4px 16px rgba(107, 114, 128, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.1);
            cursor: not-allowed;
            transform: none;
            opacity: 0.7;
        }
        
        /* Efecto de brillo deslizante */
        .lottery-play-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s;
        }
        
        .lottery-play-button:hover:not(:disabled)::before {
            left: 100%;
        }
        
        /* Icono del botón play con animación */
        .lottery-play-button .play-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        
        .lottery-play-button:hover:not(:disabled) .play-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        /* Animación de gradiente del botón */
        @keyframes lotteryPlayGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* Efecto de partículas flotantes cuando está habilitado */
        .lottery-play-button:not(:disabled)::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: playButtonSparkle 2s infinite;
        }
        
        @keyframes playButtonSparkle {
            0%, 100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }
        
        /* Borde dorado sutil para el botón activo */
        .lottery-play-button:not(:disabled) {
            border: 1px solid rgba(255, 215, 0, 0.3);
        }
        
        /* Efecto de resplandor al hacer hover */
        .lottery-play-button:hover:not(:disabled) {
            box-shadow: 
                0 12px 40px rgba(28, 82, 58, 0.5),
                0 0 20px rgba(255, 215, 0, 0.2),
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.1);
        }
        
        /* Estilos para las reglas de juegos expandibles */
        .game-rules-container {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .game-rules-container.expanded {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: var(--game-primary-color, #1c523a);
        }
        
        .game-rules-header {
            padding: 16px;
            cursor: pointer;
            background: #ffffff;
            transition: all 0.3s ease;
            border-bottom: 1px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .game-rules-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s;
        }
        
        .game-rules-header:hover::before {
            left: 100%;
        }
        
        .game-rules-header:hover {
            background: #f9fafb;
        }
        
        .game-rules-header.expanded {
            border-bottom-color: var(--game-primary-color, #1c523a);
            background: linear-gradient(135deg, var(--game-primary-color, #1c523a) 0%, var(--game-secondary-color, #235943) 100%);
            color: white;
        }
        
        .game-rules-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            background: #ffffff;
        }
        
        .game-rules-content.expanded {
            max-height: 800px;
        }
        
        .game-rules-tabs {
            display: flex;
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            border-bottom: 2px solid #e2e8f0;
            position: relative;
        }
        
        .game-rules-tab {
            flex: 1;
            padding: 16px 20px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-bottom: 3px solid transparent;
            position: relative;
            background: transparent;
        }
        
        .game-rules-tab::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: var(--game-accent-color, #fbbf24);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .game-rules-tab.active {
            background: linear-gradient(135deg, var(--game-primary-color, #1c523a) 0%, var(--game-secondary-color, #235943) 100%);
            color: white;
            border-bottom-color: var(--game-accent-color, #fbbf24);
            box-shadow: 
                inset 0 2px 4px rgba(0, 0, 0, 0.1),
                0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }
        
        .game-rules-tab.active::before {
            width: 100%;
        }
        
        .game-rules-tab:not(.active):hover {
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
            color: var(--game-primary-color, #1c523a);
            transform: translateY(-1px);
        }
        
        .game-rules-tab-content {
            padding: 16px;
            font-size: 14px;
            line-height: 1.5;
            color: #374151;
        }
        
        .game-rules-tab-panel {
            display: none;
        }
        
        .game-rules-tab-panel.active {
            display: block;
            animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes slideInUp {
            from { 
                opacity: 0; 
                transform: translateY(20px);
            }
            to { 
                opacity: 1; 
                transform: translateY(0);
            }
        }
        
        .game-rules-icon {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .game-rules-icon.expanded {
            transform: rotate(180deg);
            color: white;
        }
        
        .game-title-badge {
            background: linear-gradient(135deg, var(--game-primary-color, #1c523a) 0%, var(--game-secondary-color, #235943) 100%);
            color: white;
            padding: 6px 16px;
            border-radius: 25px;
            font-size: 12px;
            font-weight: 700;
            margin-left: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            border: 2px solid var(--game-accent-color, #fbbf24);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .win-condition {
            background: none;
            border: none;
            border-radius: 0;
            padding: 8px 0;
            margin: 6px 0;
            position: relative;
            box-shadow: none;
            transition: all 0.3s ease;
            border-left: none;
        }
        
        .win-condition:hover {
            transform: none;
            box-shadow: none;
        }
        
        .win-condition::before {
            display: none;
        }
        
     
        
        .win-multiplier {
            color: var(--game-primary-color, #dc2626);
            font-weight: 700;
            font-size: 15px;
            background: linear-gradient(135deg, var(--game-primary-color, #dc2626), var(--game-secondary-color, #b91c1c));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .game-description {
            background: none;
            border: none;
            border-radius: 0;
            padding: 0;
            margin-bottom: 12px;
            box-shadow: none;
            position: relative;
            overflow: visible;
        }
        
        .game-description::before {
            display: none;
        }
        
        .game-feature {
            background: none;
            border: none;
            border-radius: 0;
            padding: 4px 0;
            margin: 4px 0;
            font-size: 13px;
            display: block;
            margin-right: 0;
            margin-bottom: 6px;
            box-shadow: none;
            transition: all 0.3s ease;
            position: relative;
            border-left: none;
        }
        
        .game-feature:hover {
            transform: none;
            box-shadow: none;
            background: none;
        }
        
        .disclaimer {
            background: none;
            border: none;
            border-radius: 0;
            padding: 8px 0;
            margin-top: 12px;
            font-size: 12px;
            color: #6b7280;
            box-shadow: none;
            position: relative;
            border-left: none;
        }
        
        .disclaimer::before {
            display: none;
        }
        
        /* Colores dinámicos por juego */
        .game-rules-container[data-game="bolet"] {
            --game-primary-color: #dc2626;
            --game-secondary-color: #b91c1c;
            --game-accent-color: #fbbf24;
            --game-light-color: #fefefe;
            --game-lighter-color: #f9fafb;
            --game-bg-light: #fafafa;
            --game-bg-lighter: #f5f5f5;
            --game-border-color: rgba(248, 113, 113, 0.15);
            --game-feature-bg: #fafafa;
            --game-feature-bg-light: #f5f5f5;
            --game-feature-border: rgba(248, 113, 113, 0.2);
        }
        
        .game-rules-container[data-game="maryaj"] {
            --game-primary-color: #16a34a;
            --game-secondary-color: #15803d;
            --game-accent-color: #fbbf24;
            --game-light-color: #fefefe;
            --game-lighter-color: #f9fafb;
            --game-bg-light: #fafafa;
            --game-bg-lighter: #f5f5f5;
            --game-border-color: rgba(74, 222, 128, 0.15);
            --game-feature-bg: #fafafa;
            --game-feature-bg-light: #f5f5f5;
            --game-feature-border: rgba(34, 197, 94, 0.2);
        }
        
        .game-rules-container[data-game="lotto3"] {
            --game-primary-color: #e11d48;
            --game-secondary-color: #be185d;
            --game-accent-color: #fbbf24;
            --game-light-color: #fefefe;
            --game-lighter-color: #f9fafb;
            --game-bg-light: #fafafa;
            --game-bg-lighter: #f5f5f5;
            --game-border-color: rgba(244, 114, 182, 0.15);
            --game-feature-bg: #fafafa;
            --game-feature-bg-light: #f5f5f5;
            --game-feature-border: rgba(236, 72, 153, 0.2);
        }
        
        .game-rules-container[data-game="lotto4"] {
            --game-primary-color: #0891b2;
            --game-secondary-color: #0e7490;
            --game-accent-color: #fbbf24;
            --game-light-color: #fefefe;
            --game-lighter-color: #f9fafb;
            --game-bg-light: #fafafa;
            --game-bg-lighter: #f5f5f5;
            --game-border-color: rgba(94, 234, 212, 0.15);
            --game-feature-bg: #fafafa;
            --game-feature-bg-light: #f5f5f5;
            --game-feature-border: rgba(45, 212, 191, 0.2);
        }
        
        .game-rules-container[data-game="lotto5"] {
            --game-primary-color: #d97706;
            --game-secondary-color: #b45309;
            --game-accent-color: #fbbf24;
            --game-light-color: #fefefe;
            --game-lighter-color: #f9fafb;
            --game-bg-light: #fafafa;
            --game-bg-lighter: #f5f5f5;
            --game-border-color: rgba(252, 211, 77, 0.15);
            --game-feature-bg: #fafafa;
            --game-feature-bg-light: #f5f5f5;
            --game-feature-border: rgba(245, 158, 11, 0.2);
        }

        /* =============
           LOTTERY TICKET STYLES
           ============= */
        
        /* Contenedor principal del ticket */
        .lottery-ticket-container {
            background: #ffffff;
            position: relative;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* Header del ticket con bordes perforados */
        .ticket-header {
            position: relative;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-bottom: 1px dashed #cbd5e1;
        }

        /* Bordes perforados superior e inferior */
        .perforated-edge-top, .perforated-edge-bottom {
            position: absolute;
            width: 100%;
            height: 6px;
            background-image: radial-gradient(circle at 5px center, transparent 2px, #f8fafc 2px, #f8fafc 5px, transparent 5px);
            background-size: 10px 6px;
            background-repeat: repeat-x;
            z-index: 5;
        }

        .perforated-edge-top {
            top: -1px;
            background-image: radial-gradient(circle at 5px center, transparent 2px, #ffffff 2px, #ffffff 5px, transparent 5px);
        }

        .perforated-edge-bottom {
            bottom: -1px;
            background-image: radial-gradient(circle at 5px center, transparent 2px, #ffffff 2px, #ffffff 5px, transparent 5px);
        }

        /* Cuerpo del ticket */
        .ticket-body {
            position: relative;
            background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
            min-height: 150px;
        }

        /* Patrón de fondo del ticket */
        .ticket-pattern {
            background-image: 
                linear-gradient(45deg, transparent 24%, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.02) 26%, transparent 27%, transparent 74%, rgba(0,0,0,0.02) 75%, rgba(0,0,0,0.02) 76%, transparent 77%),
                linear-gradient(45deg, transparent 24%, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.02) 26%, transparent 27%, transparent 74%, rgba(0,0,0,0.02) 75%, rgba(0,0,0,0.02) 76%, transparent 77%);
            background-size: 15px 15px;
            background-position: 0 0, 7px 7px;
        }

        /* Secciones de juego compactas */
        .game-section {
            background: #ffffff;
            border: 1px dashed #d1d5db;
            border-radius: 6px;
            padding: 8px;
            margin-bottom: 8px;
            position: relative;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: all 0.2s ease;
        }

        .game-section:hover {
            border-color: #9ca3af;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        }

        .game-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 6px;
            right: 6px;
            height: 1px;
            background: repeating-linear-gradient(
                to right,
                #d1d5db 0px,
                #d1d5db 6px,
                transparent 6px,
                transparent 12px
            );
        }

        /* Badge de número de juego compacto */
        .play-number-badge {
            background: #374151;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            position: relative;
        }

        /* Footer del ticket */
        .ticket-footer {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            border-top: 1px dashed #d1d5db;
            position: relative;
        }

        /* Estado de ticket vacío */
        .empty-ticket-state {
            text-align: center;
            padding: 24px 16px;
            color: #6b7280;
        }

        /* Fichas de casino compactas */
        .lottery-chip {
            position: relative;
        }

        .lottery-chip:hover {
            transform: scale(1.1);
        }

        /* Animaciones simplificadas */
        .game-section {
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Efecto de papel de ticket simplificado */
        .lottery-ticket-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(45deg, transparent 49%, rgba(0,0,0,0.01) 50%, transparent 51%);
            background-size: 30px 30px;
            pointer-events: none;
            border-radius: inherit;
        }


/* Estilo base para la bola de bolos */
.bowling-ball-3d {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Esencial para la forma esférica */
    position: relative; /* Para posicionar elementos hijos dentro de él */
    
    /* Degradado radial para el color y la iluminación principal */
    background: radial-gradient(circle at 35% 35%, #f783ac, #e64980, #c2185b);
    
    /* Sombras para dar profundidad y efecto 3D */
    box-shadow: 
        inset -15px -10px 20px rgba(0, 0, 0, 0.3), /* Sombra interior oscura */
        inset 5px 5px 15px rgba(255, 255, 255, 0.4),  /* Luz interior brillante */
        0 10px 20px rgba(0, 0, 0, 0.2);              /* Sombra exterior debajo */

    /* Centrado del contenido (el círculo central) */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Transición suave para los efectos hover */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el ratón por encima */
.bowling-ball-3d:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        inset -15px -10px 25px rgba(0, 0, 0, 0.4),
        inset 5px 5px 20px rgba(255, 255, 255, 0.5),
        0 15px 25px rgba(0, 0, 0, 0.3);
}

/* Círculo blanco central - ESTILO LIMPIO */
.bowling-ball-center {
    width: 65%;
    height: 65%;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        inset 0 0 6px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Estilo para el número - ESTILO BOLA DE POOL */
.bowling-ball-number {
    font-size: 48px;
    font-weight: 900;
    color: #1f2937;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Reflejo de luz superior para un mayor realismo */
.bowling-ball-reflection {
    position: absolute;
    top: 10px;
    left: 30px;
    width: 80px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: rotate(-30deg);
    filter: blur(10px); /* Desenfoque para un reflejo suave */
}

/* =============
   BOWLING BALL VARIATIONS FOR LOTTERY GAMES
   ============= */

/* Variaciones de color para cada juego de lotería */
.bowling-ball-bolet {
    background: radial-gradient(circle at 35% 35%, #fca5a5, #f87171, #dc2626);
}

.bowling-ball-maryaj {
    background: radial-gradient(circle at 35% 35%, #86efac, #4ade80, #16a34a);
}

.bowling-ball-boloto {
    background: radial-gradient(circle at 35% 35%, #93c5fd, #60a5fa, #2563eb);
}

.bowling-ball-lotto3 {
    background: radial-gradient(circle at 35% 35%, #f9a8d4, #f472b6, #ec4899);
}

.bowling-ball-lotto4 {
    background: radial-gradient(circle at 35% 35%, #67e8f9, #22d3ee, #0891b2);
}

.bowling-ball-lotto5 {
    background: radial-gradient(circle at 35% 35%, #fcd34d, #f59e0b, #d97706);
}

.bowling-ball-lotto55 {
    background: radial-gradient(circle at 35% 35%, #6366f1, #4f46e5, #1e4397);
}

.bowling-ball-royal5 {
    background: radial-gradient(circle at 35% 35%, #fbbf24, #f59e0b, #bd9247);
}

.bowling-ball-boloto {
    background: radial-gradient(circle at 35% 35%, #fb923c, #f97316, #ff6b00);
}

.bowling-ball-purple {
    background: radial-gradient(circle at 35% 35%, #c4b5fd, #a78bfa, #7c3aed);
}

/* Versión compacta para las fichas en el ticket */
.bowling-ball-compact {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    position: relative;
    box-shadow: 
        inset -3px -2px 4px rgba(0, 0, 0, 0.3),
        inset 1px 1px 3px rgba(255, 255, 255, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bowling-ball-compact:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 
        inset -3px -2px 5px rgba(0, 0, 0, 0.4),
        inset 1px 1px 4px rgba(255, 255, 255, 0.5),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Centro blanco para la versión compacta - ESTILO LIMPIO */
.bowling-ball-compact-center {
    width: 75%;
    height: 75%;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        inset 0 0 3px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
}

/* Número en la versión compacta - ESTILO BOLA DE POOL */
.bowling-ball-compact-number {
    font-size: 11px;
    font-weight: 900;
    color: #1f2937;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

/* Reflejo de luz para versión compacta */
.bowling-ball-compact-reflection {
    position: absolute;
    top: 2px;
    left: 6px;
    width: 12px;
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: rotate(-30deg);
    filter: blur(1px);
}

/* Círculos exteriores para versión compacta - ESTILO SIMPLE CON 4 CÍRCULOS */
.bowling-ball-compact-circles {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Solo 4 círculos blancos: arriba, abajo, izquierda, derecha */
.bowling-ball-compact-circles::before, 
.bowling-ball-compact-circles::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

/* Círculo superior */
.bowling-ball-compact-circles::before {
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
}

/* Círculo inferior */
.bowling-ball-compact-circles::after {
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}

/* Solo círculos izquierdo y derecho usando box-shadow */
.bowling-ball-compact-circles {
    box-shadow: 
        /* Círculo izquierdo */
        -11px 0 0 -8px #ffffff,
        /* Círculo derecho */
        11px 0 0 -8px #ffffff;
}

 input[type="checkbox"] {
         appearance: auto !important;
         -webkit-appearance: checkbox !important;
         -moz-appearance: checkbox !important;
         background-color: white !important;
         border: 2px solid #374151 !important;
         border-radius: 3px;
         width: 16px !important;
         height: 16px !important;
         position: relative;
         cursor: pointer;
         }
         input[type="checkbox"]:checked {
         background-color: #10b981 !important;
         border-color: #10b981 !important;
         }
         input[type="checkbox"]:checked::before {
         content: '✓';
         position: absolute;
         color: white;
         font-weight: bold;
         font-size: 12px;
         top: -2px;
         left: 1px;
         }

        /* =============
           MODAL DE JUGADAS RECHAZADAS
           ============= */
        
        /* Modal overlay - Z-index alto para estar sobre todos los drawers */
        .rejected-plays-modal-overlay {
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 99999 !important; /* Muy alto para estar sobre drawers */
        }
        
        /* Contenedor principal del modal - más compacto */
        .rejected-plays-modal {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 16px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            max-width: 90vw;
            max-height: 80vh;
            width: 420px;
            position: relative;
            overflow: hidden;
        }
        
        /* Header del modal - más compacto */
        .rejected-plays-header {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            color: white;
            padding: 12px 16px;
            position: relative;
        }
        
        .rejected-plays-title {
            font-size: 1.125rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        
        .rejected-plays-subtitle {
            font-size: 0.75rem;
            opacity: 0.9;
            margin: 2px 0 0 0;
        }
        
        /* Botón de cerrar - más pequeño */
        .rejected-plays-close {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .rejected-plays-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        /* Cuerpo del modal - más compacto */
        .rejected-plays-body {
            padding: 0;
            max-height: 50vh;
            overflow-y: auto;
        }
        
        .rejected-plays-body::-webkit-scrollbar {
            width: 4px;
        }
        
        .rejected-plays-body::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        
        .rejected-plays-body::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 2px;
        }
        
        /* Grupos de razones - más compactos */
        .reason-group {
            border-bottom: 1px solid #e2e8f0;
        }
        
        .reason-group:last-child {
            border-bottom: none;
        }
        
        .reason-header {
            background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
            padding: 8px 16px;
            border-left: 3px solid #dc2626;
        }
        
        .reason-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: #991b1b;
            margin: 0;
        }
        
        .reason-count {
            font-size: 0.625rem;
            color: #7f1d1d;
            font-weight: 500;
            opacity: 0.8;
            margin: 0;
        }
        
        /* Lista de jugadas - más compacta */
        .plays-list {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .play-item {
            padding: 8px 16px;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s ease;
            background: white;
        }
        
        .play-item:hover {
            background: #f8fafc;
        }
        
        .play-item:last-child {
            border-bottom: none;
        }
        
        /* Icono de la jugada - más pequeño */
        .play-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
            border: 1px solid #f87171;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #dc2626;
            font-weight: 700;
            font-size: 0.75rem;
            flex-shrink: 0;
        }
        
        /* Detalles de la jugada - más compactos */
        .play-details {
            flex: 1;
        }
        
        .play-game {
            font-size: 0.75rem;
            font-weight: 600;
            color: #374151;
            text-transform: uppercase;
            margin: 0;
        }
        
        .play-numbers {
            font-size: 1rem;
            font-weight: 700;
            color: #1f2937;
            margin: 0;
            font-family: 'Monaco', 'Menlo', monospace;
        }
        
        .play-draw-amount {
            font-size: 0.625rem;
            color: #6b7280;
            display: flex;
            gap: 8px;
            margin: 0;
        }
        
        .play-draw {
            font-weight: 500;
        }
        
        .play-amount {
            font-weight: 600;
            color: #dc2626;
        }
        
        /* Footer del modal - más compacto */
        .rejected-plays-footer {
            padding: 12px 16px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-top: 1px solid #e2e8f0;
            text-align: center;
        }
        
        .footer-summary {
            font-size: 0.75rem;
            color: #64748b;
            margin: 0 0 8px 0;
        }
        
        /* Botón de entendido - más compacto */
        .understood-button {
            background: linear-gradient(135deg, #1c523a 0%, #235943 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 24px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(28, 82, 58, 0.3);
        }
        
        .understood-button:hover {
            background: linear-gradient(135deg, #235943 0%, #2d7f54 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(28, 82, 58, 0.4);
        }
        
        .understood-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(28, 82, 58, 0.4);
        }
        
        /* Animaciones del modal */
        .modal-enter {
            animation: modalEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes modalEnter {
            0% {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        /* Responsive para dispositivos móviles */
        @media (max-width: 640px) {
            .rejected-plays-modal {
                width: 95vw;
                max-height: 85vh;
                margin: 8px;
                border-radius: 12px;
            }
            
            .rejected-plays-header {
                padding: 10px 12px;
            }
            
            .rejected-plays-title {
                font-size: 1rem;
            }
            
            .reason-header {
                padding: 6px 12px;
            }
            
            .play-item {
                padding: 6px 12px;
                gap: 8px;
            }
            
            .play-icon {
                width: 24px;
                height: 24px;
                font-size: 0.625rem;
            }
            
            .rejected-plays-footer {
                padding: 10px 12px;
            }
        }

          @keyframes ring-pulse {
            0%, 100% {
               box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
            }
            50% {
               box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.1);
            }
         }
         
         /* Animaciones del Loader de Lotería */
         @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
         }
         
         @keyframes spin-reverse {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
         }
         
         @keyframes bounce-slow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
         }
         
         @keyframes pulse-slow {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.1); }
         }
         
         @keyframes lottery-numbers {
            0% { transform: translateY(0px); }
            25% { transform: translateY(-5px); }
            50% { transform: translateY(0px); }
            75% { transform: translateY(5px); }
            100% { transform: translateY(0px); }
         }
         
         @keyframes lever-pull {
            0%, 80% { transform: rotate(0deg); }
            10%, 30% { transform: rotate(-15deg); }
            20%, 40% { transform: rotate(0deg); }
         }
         
         @keyframes blink {
            0%, 50% { opacity: 1; box-shadow: 0 0 10px currentColor; }
            25%, 75% { opacity: 0.3; box-shadow: none; }
         }
         
         @keyframes sweep {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
         }
         
         @keyframes falling-coins {
            0% { 
               opacity: 0; 
               transform: translateY(-20px) rotate(0deg); 
            }
            20% { 
               opacity: 1; 
            }
            100% { 
               opacity: 0; 
               transform: translateY(60px) rotate(360deg); 
            }
         }
         
         @keyframes floating-particle {
            0% { 
               transform: translateY(0px) translateX(0px) rotate(0deg); 
               opacity: 0.7;
            }
            33% { 
               transform: translateY(-30px) translateX(20px) rotate(120deg); 
               opacity: 1;
            }
            66% { 
               transform: translateY(-10px) translateX(-15px) rotate(240deg); 
               opacity: 0.8;
            }
            100% { 
               transform: translateY(0px) translateX(0px) rotate(360deg); 
               opacity: 0.7;
            }
         }
         
         @keyframes star-twinkle {
            0%, 100% { 
               transform: scale(1) rotate(0deg); 
               opacity: 0.8; 
            }
            50% { 
               transform: scale(1.3) rotate(180deg); 
               opacity: 1; 
            }
         }
         
         /* Animación shine eliminada completamente */
         
         @keyframes bounce-dot {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
         }
         
         /* Clases de animación */
         .animate-spin-slow { animation: spin-slow 4s linear infinite; }
         .animate-spin-reverse { animation: spin-reverse 3s linear infinite; }
         .animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; }
         .animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }
         .animate-lever-pull { animation: lever-pull 2s ease-in-out infinite; }
         .animate-blink { animation: blink 1.5s ease-in-out infinite; }
         .animate-sweep { animation: sweep 2s linear infinite; }
         /* .animate-shine eliminada - causaba overlay blanco */
         .animate-bounce-dot { animation: bounce-dot 1.5s ease-in-out infinite; }
         
         /* Elementos específicos */
         .lottery-numbers {
            color: #00ff00;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 1.2rem;
         }
         
         .lottery-number {
            display: inline-block;
            animation: lottery-numbers 2s ease-in-out infinite;
         }
         
         .lottery-number:nth-child(2) { animation-delay: 0.3s; }
         .lottery-number:nth-child(3) { animation-delay: 0.6s; }
         
         .falling-coins {
            position: relative;
            width: 100%;
            height: 40px;
         }
         
         .coin {
            position: absolute;
            font-size: 1.5rem;
            animation: falling-coins 3s ease-in-out infinite;
         }
         
         .coin-1 { left: 0%; animation-delay: 0s; }
         .coin-2 { left: 50%; animation-delay: 0.5s; }
         .coin-3 { left: 100%; animation-delay: 1s; }
         
         .floating-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
         }
         
         .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: linear-gradient(45deg, #ffd700, #ffed4e);
            border-radius: 50%;
            animation: floating-particle 4s ease-in-out infinite;
         }
         
         .particle-1 { top: 20%; left: 10%; animation-delay: 0s; }
         .particle-2 { top: 40%; right: 15%; animation-delay: 0.8s; }
         .particle-3 { bottom: 30%; left: 20%; animation-delay: 1.6s; }
         .particle-4 { bottom: 20%; right: 25%; animation-delay: 2.4s; }
         .particle-5 { top: 60%; left: 50%; animation-delay: 3.2s; }
         
         .star {
            position: absolute;
            font-size: 1.5rem;
            animation: star-twinkle 2s ease-in-out infinite;
         }
         
         .star-1 { top: 10%; left: 10%; animation-delay: 0s; }
         .star-2 { top: 20%; right: 15%; animation-delay: 0.5s; }
         .star-3 { bottom: 20%; left: 20%; animation-delay: 1s; }
         .star-4 { bottom: 10%; right: 10%; animation-delay: 1.5s; }
         
         /* Mejoras visuales adicionales */
         .lottery-machine {
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
         }
         
         #global-loading {
            backdrop-filter: blur(10px);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            min-width: 100vw;
         }
         
         /* Asegurar que el splash screen ocupe toda la pantalla */
         body.loading {
            overflow: hidden !important;
            margin: 0;
            padding: 0;
            height: 100vh !important;
            width: 100vw !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
         }
         
         html {
            margin: 0;
            padding: 0;
         }
         
         /* Prevenir scroll durante carga y asegurar que no interfiera */
         body.loading #main-content {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
         }
         
         /* Mantener splash screen completamente opaco durante carga */
         body.loading #global-loading {
            opacity: 1 !important;
            z-index: 10001 !important;
            background: linear-gradient(to bottom right, #0f172a, #581c87, #312e81) !important;
         }
         
         /* Suavizar transición final */
         .page-loaded {
            scroll-behavior: smooth;
         }

                        /* estado normal */
                #global-loading{
                opacity: 1;
                visibility: visible;
                transition: opacity .35s ease, visibility 0s linear .35s;
                will-change: opacity;
                }

                /* al cerrar */
                #global-loading.fade-out{
                opacity: 0;
                visibility: hidden;    /* se oculta al final por el delay de visibility */
                pointer-events: none;  /* deja pasar clics mientras se va */
                }

                /* evita el “borde que aparece”: no transiciones de border/box-shadow */
                #global-loading, #global-loading *{
                transition-property: opacity, transform !important;
                }

                /* opcional: apaga animaciones internas durante el fade */
                #global-loading.fade-out *{
                animation: none !important;
                box-shadow: none !important;
                }

/* Promotional Game Card Styles */
.promotional-game-card {
    position: relative;
}

.text-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Custom animations for promotional card */
@keyframes animate-spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: animate-spin-slow 20s linear infinite;
}

/* Glow effects */
.promotional-game-card:hover .glow-effect {
    filter: blur(8px);
    opacity: 1;
}

/* Enhanced hover effects */
.promotional-game-card:hover {
    transform: translateY(-2px);
}

.promotional-game-card .main-card:hover {
    box-shadow: 0 25px 50px -12px rgba(251, 146, 60, 0.4);
}


                /* Asegura que html y body ocupen toda la altura y sin márgenes */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Previene el scroll en el body */
}

/* Contenedor principal de la aplicación usando Flexbox */
.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ocupa el 100% de la altura de la ventana */
}

/* Estilos para el encabezado principal */
.main-header {
    flex-shrink: 0; /* Evita que el header se encoja */
    position: sticky; /* Se mantiene fijo en la parte superior */
    top: 0;
    z-index: 50;
    background-color: white; /* Asegura que el contenido no se transparente */
}

/* Estilos para el contenido principal */
.main-content {
    flex: 1; /* Permite que el contenido ocupe todo el espacio restante */
    overflow-y: auto; /* Habilita el scroll vertical solo en esta área */
    -webkit-overflow-scrolling: touch; /* Scroll suave en dispositivos iOS */
}

/* Estilos para el pie de página principal */
.main-footer {
    flex-shrink: 0; /* Evita que el footer se encoja */
    position: sticky; /* Se mantiene fijo en la parte inferior */
    bottom: 0;
    z-index: 50;
    background-color: white; /* Asegura que el contenido no se transparente */
}