/* ===== ESTILO CASINO COMPLETO ===== */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 100, 255, 0.3) 0%, transparent 60%),
        radial-gradient(circle at 30% 20%, rgba(0, 150, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(0, 150, 255, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a2e 0%, #16213e 50%, #0f0f23 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Efectos de fondo de casino */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            transparent,
            transparent 2px,
            rgba(0, 191, 255, 0.03) 2px,
            rgba(0, 191, 255, 0.03) 4px);
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 20% 30%, rgba(0, 200, 255, 0.3) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.3) 0%, transparent 30%),
        radial-gradient(circle at 30% 80%, rgba(0, 100, 255, 0.2) 0%, transparent 25%),
        radial-gradient(circle at 70% 20%, rgba(0, 100, 255, 0.2) 0%, transparent 25%);
    pointer-events: none;
    z-index: 1;
    animation: casinoGlow 6s ease-in-out infinite alternate;
}

@keyframes casinoGlow {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.7;
    }
}

.app-container {
    /* max-width: 100%; */
    /* width: 100%; */
    margin: 0;
    position: relative;
    z-index: 10;
    padding: 10px;
    overflow: visible;
}

.header-card {
    text-align: center;
    max-width: 100%;
    background:
        url('imagenes/FONDO IBC 3.png') center/cover no-repeat,
        linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 128, 255, 0.1) 100%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    border: 2px solid rgba(0, 191, 255, 0.3);
    box-shadow:
        0 0 30px rgba(0, 191, 255, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.header-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(0, 191, 255, 0.1) 60deg,
            transparent 120deg,
            transparent 180deg,
            rgba(0, 128, 255, 0.1) 240deg,
            transparent 300deg,
            transparent 360deg);
    animation: casinoRotate 10s linear infinite;
    z-index: 1;
}

.header-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%),
        radial-gradient(circle at center, rgba(0, 191, 255, 0.1) 0%, transparent 70%);
    z-index: 2;
}

@keyframes casinoRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 🏢 Estilos del Logo IBC */
.header-logo {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    animation: fadeInDown 1s ease-out;
}

.logo-img {
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
    transition: all 0.3s ease;
}

.logo-img:hover {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(0, 191, 255, 0.5));
    transform: scale(1.05);
}

/* Ajuste del logo dentro del header-title */
.header-title .header-logo {
    margin-bottom: 0;
    justify-content: flex-start;
    flex-shrink: 0;
}

.header-title .logo-img {
    max-width: 150px;
}

/* Texto centrado del título */
.header-title-text {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: inherit;
    color: inherit;
    text-shadow: inherit;
}

/* El reloj a la derecha */
.header-title .clock-icon {
    flex-shrink: 0;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-title {
    font-size: 3rem;
    font-weight: 900;
    color: #00bfff;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    text-shadow:
        0 0 20px rgba(0, 191, 255, 0.8),
        0 0 40px rgba(0, 128, 255, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.5);
    animation: casinoTitleGlow 3s ease-in-out infinite alternate;
    position: relative;
    z-index: 3;
    padding: 20px 30px;
    border: 4px solid #00bfff;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%),
        radial-gradient(circle at center, rgba(0, 191, 255, 0.1) 0%, transparent 70%);
    box-shadow:
        0 0 30px rgba(0, 191, 255, 0.6),
        0 0 60px rgba(0, 128, 255, 0.4),
        inset 0 0 30px rgba(0, 191, 255, 0.2);
}

/* Estilos para iframes dentro de ruleta-container (si los hay) */
.ruleta-container iframe {
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.5);
    transition: all 0.3s ease;
}

.ruleta-container iframe:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 30px rgba(0, 191, 255, 0.8);
}


/* 🎰 SOLO EL TIEMPO - SIN CÍRCULO DECORATIVO */
.clock-icon {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0 20px;
}

/* 🎰 OCULTAR decoraciones del reloj (manecillas, centro, marcas) */
.clock-icon::before,
.clock-icon::after {
    display: none !important;
    /* 🎰 Ocultar manecillas */
}

.clock-icon .clock-center,
.clock-icon .clock-marks {
    display: none !important;
}

.clock-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 20px;
    background: #000;
    border-radius: 2px;
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
    animation: clockHands 2s ease-in-out infinite alternate;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.clock-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 15px;
    background: #000;
    border-radius: 2px;
    transform: translate(-50%, -100%) rotate(45deg);
    transform-origin: bottom center;
    animation: clockHands 2.5s ease-in-out infinite alternate;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Centro del reloj */
.clock-icon .clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Marcas del reloj */
.clock-icon .clock-marks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
}

.clock-icon .clock-marks::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 2px;
    height: 8px;
    background: #000;
    transform: translateX(-50%);
    border-radius: 1px;
}

.clock-icon .clock-marks::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 2px;
    height: 8px;
    background: #000;
    transform: translateX(-50%) rotate(90deg);
    transform-origin: center 25px;
    border-radius: 1px;
}

/* Animaciones del reloj - ESTILO CASINO */
@keyframes clockPulseCasino {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.9),
            /* 🎰 Brillo dorado */
            inset 0 0 30px rgba(255, 255, 255, 0.4),
            0 6px 15px rgba(0, 0, 0, 0.6),
            0 0 50px rgba(255, 215, 0, 0.5);
        /* 🎰 Halo dorado */
    }

    100% {
        transform: scale(1.05);
        box-shadow:
            0 0 45px rgba(255, 215, 0, 1),
            /* 🎰 Brillo dorado intenso */
            inset 0 0 40px rgba(255, 255, 255, 0.5),
            0 8px 20px rgba(0, 0, 0, 0.7),
            0 0 70px rgba(255, 215, 0, 0.7);
        /* 🎰 Halo dorado intenso */
    }
}

@keyframes clockHands {
    0% {
        transform: translate(-50%, -100%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -100%) rotate(30deg);
    }
}

/* Pantalla de cuenta regresiva - ESTILO CASINO MUY GRANDE */
.countdown-display {
    position: relative;
    /* 🎰 Relativo al contenedor, no absoluto */
    font-family: 'Arial Black', 'Impact', sans-serif;
    font-size: 48px;
    /* 🎰 MUY GRANDE - perceptible de lejos */
    font-weight: 900;
    color: #ffd700;
    /* 🎰 Color dorado brillante */
    text-shadow:
        0 3px 6px rgba(0, 0, 0, 1),
        /* 🎰 Sombra negra fuerte */
        0 0 20px rgba(255, 215, 0, 1),
        /* 🎰 Brillo dorado */
        0 0 35px rgba(255, 215, 0, 0.8),
        /* 🎰 Halo dorado */
        0 0 50px rgba(255, 215, 0, 0.5);
    /* 🎰 Halo externo */
    z-index: 10;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    /* 🎰 Fondo oscuro elegante */
    padding: 15px 30px;
    /* 🎰 Mucho padding para destacar */
    border-radius: 15px;
    border: 4px solid #ffd700;
    /* 🎰 Borde dorado grueso */
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.9),
        /* 🎰 Brillo dorado externo */
        inset 0 0 20px rgba(255, 215, 0, 0.2),
        /* 🎰 Brillo dorado interno */
        0 6px 20px rgba(0, 0, 0, 0.8);
    /* 🎰 Sombra fuerte */
    animation: countdownPulseCasino 1s ease-in-out infinite alternate;
    letter-spacing: 3px;
    /* 🎰 Espaciado para mejor lectura */
    min-width: 120px;
    /* 🎰 Ancho mínimo para que no se vea pequeño */
    text-align: center;
}

/* Animación de pulso casino para countdown - MUY GRANDE */
@keyframes countdownPulseCasino {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.9),
            /* 🎰 Brillo dorado */
            inset 0 0 20px rgba(255, 215, 0, 0.2),
            0 6px 20px rgba(0, 0, 0, 0.8);
    }

    100% {
        transform: scale(1.05);
        box-shadow:
            0 0 50px rgba(255, 215, 0, 1),
            /* 🎰 Brillo intenso */
            inset 0 0 30px rgba(255, 215, 0, 0.3),
            0 8px 25px rgba(0, 0, 0, 0.9),
            0 0 70px rgba(255, 215, 0, 0.7);
        /* 🎰 Halo pulsante enorme */
    }
}

/* Efecto especial cuando llega a los últimos 10 segundos - ESTILO CASINO */
.countdown-display.warning {
    background: linear-gradient(135deg, #ff0000 0%, #8b0000 50%, #ff0000 100%);
    /* 🎰 Rojo casino */
    color: #fff;
    font-size: 56px;
    /* 🎰 AÚN MÁS GRANDE en advertencia - CRÍTICO */
    animation: countdownWarningCasino 0.5s ease-in-out infinite alternate;
    border-color: #ff0000;
    border-width: 5px;
    /* 🎰 Borde más grueso */
    text-shadow:
        0 0 20px rgba(255, 255, 255, 1),
        /* 🎰 Brillo blanco intenso */
        0 3px 6px rgba(0, 0, 0, 1),
        /* 🎰 Sombra negra fuerte */
        0 0 40px rgba(255, 0, 0, 0.8);
    /* 🎰 Halo rojo */
    padding: 18px 35px;
    /* 🎰 Más padding para el tamaño crítico */
}

/* Animación de advertencia estilo casino - ALERTA CRÍTICA */
@keyframes countdownWarningCasino {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 35px rgba(255, 0, 0, 0.9),
            /* 🎰 Brillo rojo intenso */
            inset 0 0 20px rgba(255, 0, 0, 0.3),
            0 6px 20px rgba(0, 0, 0, 0.9),
            0 0 60px rgba(255, 0, 0, 0.7);
        /* 🎰 Halo rojo grande */
    }

    100% {
        transform: scale(1.1);
        /* 🎰 Pulso dramático */
        box-shadow:
            0 0 60px rgba(255, 0, 0, 1),
            /* 🎰 Brillo rojo ENORME */
            inset 0 0 35px rgba(255, 0, 0, 0.5),
            0 8px 30px rgba(0, 0, 0, 1),
            0 0 100px rgba(255, 0, 0, 1);
        /* 🎰 Halo rojo pulsante MASIVO */
    }
}

/* Efecto de brillo adicional */
.clock-icon:hover {
    animation: clockHover 0.5s ease-in-out;
}

/* Botón de control de música */
.btn-control-musica {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(147, 51, 234, 0.2));
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    flex-shrink: 0;
}

.btn-control-musica:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(147, 51, 234, 0.3));
}

.btn-control-musica:active {
    transform: scale(0.95);
}

.btn-control-musica .material-icons {
    color: #ff6b35;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.btn-control-musica.pausado {
    background: linear-gradient(135deg, rgba(150, 150, 150, 0.2), rgba(100, 100, 100, 0.2));
    border-color: rgba(150, 150, 150, 0.5);
    box-shadow: 0 4px 15px rgba(100, 100, 100, 0.3);
}

.btn-control-musica.pausado .material-icons {
    color: #999;
}

.btn-control-musica.pausado:hover {
    box-shadow: 0 6px 20px rgba(100, 100, 100, 0.5);
}

@keyframes pulseMusic {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.btn-control-musica:not(.pausado) {
    animation: pulseMusic 2s ease-in-out infinite;
}

@keyframes clockHover {
    0% {
        transform: scale(1.05);
    }

    50% {
        transform: scale(1.1) rotate(5deg);
    }

    100% {
        transform: scale(1.05);
    }
}

/* Efectos de chispas que se extienden a los costados del banner */
.header-title::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -50px;
    right: -50px;
    bottom: -10px;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(0, 191, 255, 0.3) 30deg,
            transparent 60deg,
            transparent 120deg,
            rgba(0, 128, 255, 0.3) 150deg,
            transparent 180deg,
            transparent 240deg,
            rgba(0, 191, 255, 0.3) 270deg,
            transparent 300deg,
            transparent 360deg);
    border-radius: 25px;
    animation: chispasRotate 2s linear infinite;
    z-index: -1;
}

.header-title::after {
    content: "";
    position: absolute;
    top: -15px;
    left: -60px;
    right: -60px;
    bottom: -15px;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 191, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 128, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(0, 191, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 128, 255, 0.4) 0%, transparent 50%);
    border-radius: 30px;
    animation: chispasPulse 1.5s ease-in-out infinite alternate;
    z-index: -2;
}

@keyframes chispasRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes chispasPulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes casinoTitleGlow {
    0% {
        text-shadow:
            0 0 20px rgba(0, 191, 255, 0.8),
            0 0 40px rgba(0, 128, 255, 0.6),
            0 4px 8px rgba(0, 0, 0, 0.5);
        box-shadow:
            0 0 30px rgba(0, 191, 255, 0.6),
            0 0 60px rgba(0, 128, 255, 0.4),
            inset 0 0 30px rgba(0, 191, 255, 0.2);
    }

    100% {
        text-shadow:
            0 0 30px rgba(0, 191, 255, 1),
            0 0 60px rgba(0, 128, 255, 0.8),
            0 6px 12px rgba(0, 0, 0, 0.7);
        box-shadow:
            0 0 50px rgba(0, 191, 255, 0.8),
            0 0 100px rgba(0, 128, 255, 0.6),
            inset 0 0 40px rgba(0, 191, 255, 0.4);
    }
}

.header-subtitle {
    font-size: 1.3rem;
    color: #ffffff;
    margin: 0;
    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(0, 191, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Subtítulo inline (dentro del título principal) */
.header-subtitle-inline {
    display: block;
    font-size: 0.8rem;
    color: #00bfff;
    margin-top: 5px;
    text-shadow:
        0 0 10px rgba(0, 191, 255, 0.8),
        0 0 20px rgba(0, 191, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    letter-spacing: 0.5px;
    font-style: italic;
}

.controls-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 100%;
}

.controls-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.button-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.status-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: none;
}

.status-success {
    border-left: 4px solid #4caf50;
    background: linear-gradient(90deg, #e8f5e8 0%, white 100%);
}

.status-error {
    border-left: 4px solid #f44336;
    background: linear-gradient(90deg, #ffebee 0%, white 100%);
}

.status-info {
    border-left: 4px solid #2196f3;
    background: linear-gradient(90deg, #e3f2fd 0%, white 100%);
}

.loading-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e3f2fd;
    border-top: 4px solid #1976d2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.data-card {
    padding: 15px;
    background:
        linear-gradient(135deg, rgba(0, 191, 255, 0.05) 0%, rgba(0, 128, 255, 0.05) 100%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%),
        url('imagenes/FondoIBC.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    border-radius: 20px;
    border: 2px solid rgba(0, 191, 255, 0.3);
    box-shadow:
        0 0 25px rgba(0, 191, 255, 0.2),
        inset 0 0 25px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: visible;
    /* Mantener visible para elementos decorativos */
}

.data-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(90deg, #00bfff, #0080ff, #40e0d0, #0080ff, #00bfff);
    background-size: 200% 100%;
    animation: casinoBorderFlow 3s linear infinite;
    border-radius: 22px;
    /* 🎨 Un poco más grande que el contenedor */
    z-index: -1;
    /* Detrás del contenido */
    mask:
        linear-gradient(to right, transparent 0px, transparent 2px, black 3px, black calc(100% - 3px), transparent calc(100% - 2px), transparent 100%),
        linear-gradient(to bottom, transparent 0px, transparent 2px, black 3px, black calc(100% - 3px), transparent calc(100% - 2px), transparent 100%);
    -webkit-mask:
        linear-gradient(to right, transparent 0px, transparent 2px, black 3px, black calc(100% - 3px), transparent calc(100% - 2px), transparent 100%),
        linear-gradient(to bottom, transparent 0px, transparent 2px, black 3px, black calc(100% - 3px), transparent calc(100% - 2px), transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

@keyframes casinoBorderFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

.data-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00bfff;
    margin: 10px 0 0px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-shadow: 0 0 15px rgba(0, 191, 255, 0.6);
    position: relative;
    z-index: 2;
    /* overflow: hidden; */
    /* 🔴 CONTENER elementos decorativos que se salen */
    width: 100%;
    box-sizing: border-box;
    /* 🔴 FORZAR que el contenido no se salga */
    padding-right: clamp(60px, 8vw, 100px);
    /* Espacio para el logo */
}

/* Logo en el título "¡Gira y Gana!" */
.data-title-logo {
    height: 50px;
    width: auto;
    vertical-align: middle;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1));
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background:
        linear-gradient(135deg, #00bfff 0%, #40e0d0 50%, #0080ff 100%);
    color: #000;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid rgba(0, 191, 255, 0.8);
    box-shadow:
        0 0 20px rgba(0, 191, 255, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    font-weight: 700;
}

.stat-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.1) 90deg,
            transparent 180deg,
            transparent 270deg,
            rgba(255, 255, 255, 0.1) 360deg);
    animation: casinoStatRotate 4s linear infinite;
    z-index: 1;
}

@keyframes casinoStatRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.stat-label {
    font-size: 1rem;
    opacity: 0.9;
    margin: 8px 0 0 0;
    position: relative;
    z-index: 2;
    font-weight: 600;
}

.json-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid #e9ecef;
}

.json-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.json-content {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
}

.table-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.data-table th {
    background: linear-gradient(135deg, #00bfff 0%, #40e0d0 50%, #0080ff 100%);
    color: #000;
    padding: 18px;
    text-align: left;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 191, 255, 0.8);
}

.data-table td {
    padding: 18px;
    border-bottom: 2px solid rgba(0, 191, 255, 0.3);
    color: #00bfff;
    font-weight: 500;
}

.data-table tr:hover {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 128, 255, 0.1) 100%);
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Lista de participantes compacta con estilo casino - FONDO AZUL ORIGINAL */
.participantes-column .participante-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #272037 50%, #1a0f23 100%), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 191, 255, 0.02) 2px, rgba(0, 191, 255, 0.02) 4px) !important;
    border: 1px solid #f7f7f5 !important;
    border-radius: 4px !important;
    padding: 3px 4px !important;
    margin-bottom: 3px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 191, 255, 0.3), inset 0 0 20px rgba(0, 191, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.5s ease !important;
}

/* Estilo especial para el ganador - CAMBIO A ORO */
.participantes-column .participante-item.ganador {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px) !important;
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.9),
        0 0 80px rgba(255, 215, 0, 0.6),
        inset 0 0 30px rgba(255, 255, 255, 0.4) !important;
    animation: ganadorGlow 2s ease-in-out infinite alternate !important;
    /* transform: scale(1.03) !important; */
}

@keyframes ganadorGlow {
    0% {
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(255, 215, 0, 0.6),
            inset 0 0 30px rgba(255, 255, 255, 0.3);
    }

    100% {
        box-shadow:
            0 0 50px rgba(255, 215, 0, 1),
            0 0 80px rgba(255, 215, 0, 0.8),
            inset 0 0 40px rgba(255, 255, 255, 0.5);
    }
}

.participantes-column .participante-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.1), transparent);
    transition: left 0.6s;
}

.participantes-column .participante-item:hover::before {
    left: 100%;
}

.participantes-column .participante-item:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(158, 158, 158, 0.4);
    border-color: rgba(187, 187, 187, 0.6);
}

.participantes-column .participante-numero {
    background: linear-gradient(135deg, #b9b9b9 0%, #b7b7b7 50%, #ffffff 100%) !important;
    color: #000 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: 0.7rem !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 0 15px rgb(217 217 217 / 80%), inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
    border: 2px solid #b5b5b5 !important;
    margin-right: 8px !important;
}

/* Número del ganador con estilo especial */
.participantes-column .participante-item.ganador .participante-numero {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%) !important;
    border: 2px solid #ffd700 !important;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 1),
        inset 0 0 10px rgba(255, 255, 255, 0.6) !important;
    animation: numeroGanadorPulse 1.5s ease-in-out infinite alternate !important;
}

@keyframes numeroGanadorPulse {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 25px rgba(255, 215, 0, 1),
            inset 0 0 12px rgba(255, 255, 255, 0.6);
    }

    100% {
        transform: scale(1.1);
        box-shadow:
            0 0 35px rgba(255, 215, 0, 1),
            inset 0 0 15px rgba(255, 255, 255, 0.8);
    }
}

.participantes-column .participante-nombre {
    color: #00bfff !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.5) !important;
    margin: 0 0 2px 0 !important;
    flex: 1 !important;
}

/* Nombre del ganador con estilo especial */
.participantes-column .participante-item.ganador .participante-nombre {
    color: #4c4c4c !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
}

/* Texto del premio más compacto */
.participantes-column .participante-premio {
    font-size: 0.7rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Email del ganador con estilo especial */
.participantes-column .participante-item.ganador .participante-email {
    color: #8B4513 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ===========================================
   LOADING OVERLAY PARA TABS
   =========================================== */

.tab-pane {
    position: relative;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(39, 32, 55, 0.95) 100%);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-in-out;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 191, 255, 0.2);
    border-top: 4px solid #00bfff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.loading-text {
    color: #00bfff;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.loading-subtext {
    color: #b0b0b0;
    font-size: 0.9rem;
    text-align: center;
    opacity: 0.8;
}

.loading-progress {
    width: 200px;
    height: 4px;
    background: rgba(0, 191, 255, 0.2);
    border-radius: 2px;
    margin-top: 15px;
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00bfff, #ffd700);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

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

/* ===========================================
   ESTILOS PARA PARTICIPANTES NO GANADORES
   =========================================== */

/* Estilos para participantes no ganadores (dorado opaco) */
.participantes-column .participante-item.no-ganador {
    background: linear-gradient(135deg, #b8860b 0%, #daa520 50%, #b8860b 100%), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.1) 4px) !important;
    border: 2px solid #daa520 !important;
    box-shadow:
        0 0 15px rgba(184, 134, 11, 0.4),
        0 0 30px rgba(184, 134, 11, 0.2) !important;
    opacity: 0.7 !important;
    position: relative !important;
    overflow: visible !important;
}

.participantes-column .participante-item.no-ganador .participante-numero {
    background: linear-gradient(135deg, #b8860b 0%, #daa520 50%, #b8860b 100%) !important;
    border: 2px solid #daa520 !important;
    box-shadow:
        0 0 10px rgba(184, 134, 11, 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.3) !important;
    color: #4c4c4c !important;
    font-weight: 800 !important;
}

.participantes-column .participante-item.no-ganador .participante-nombre {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-shadow:
        0 0 5px rgba(184, 134, 11, 0.5),
        0 0 10px rgba(184, 134, 11, 0.3) !important;
}

.participantes-column .participante-item.no-ganador .participante-email {
    color: #8B4513 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.participantes-column .participante-item.no-ganador .participante-nombre::after {
    content: "❌ NO GANÓ" !important;
    color: #000000 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-shadow:
        0 0 5px rgba(184, 134, 11, 0.6),
        0 0 10px rgba(184, 134, 11, 0.3) !important;
    display: block !important;
    margin-top: 3px !important;
    opacity: 0.8 !important;
}

.participantes-column .participante-email {
    color: #40e0d0 !important;
    font-size: 0.8rem !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    font-style: italic !important;
}

/* Selectores más específicos para forzar estilos de casino */
#participantesLista div[style*="background"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 191, 255, 0.02) 2px, rgba(0, 191, 255, 0.02) 4px) !important;
    border: 1px solid #00bfff !important;
    border-radius: 6px !important;
    padding: 5px 6px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 191, 255, 0.3), inset 0 0 20px rgba(0, 191, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
}

#participantesLista div[style*="background"] div[style*="background"] {
    background: linear-gradient(135deg, #00bfff 0%, #40e0d0 50%, #00bfff 100%) !important;
    color: #000 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: 0.9rem !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3) !important;
    box-shadow:
        0 0 15px rgba(0, 191, 255, 0.8),
        inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
    border: 3px solid #b8860b !important;
    margin-right: 12px !important;
}

#participantesLista h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-shadow: 0 0 5px rgb(197 195 185 / 50%) !important;
    margin: 0 0 4px 0 !important;
    flex: 1 !important;
}

#participantesLista p {
    color: #b5b5b5 !important;
    font-size: 0.8rem !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    font-style: italic !important;
}

/* ===== CONTENEDORES DE LISTAS CON SCROLL ===== */
/* Lista de participantes de BECAS con scroll */
#participantesLista {
    max-height: 650px;
    /* 📏 Altura óptima para ver muchos participantes */
    overflow-y: auto;
    /* 📜 Scroll vertical */
    overflow-x: hidden;
    /* 🚫 Sin scroll horizontal */
    padding-right: 8px;
    /* 📐 Espacio para el scrollbar */
    margin-bottom: 15px;
}

/* Lista de participantes de DICCIONARIO con scroll */
#participantesLista-diccionario {
    max-height: 650px;
    /* 📏 Altura óptima para ver muchos participantes */
    overflow-y: auto;
    /* 📜 Scroll vertical */
    overflow-x: hidden;
    /* 🚫 Sin scroll horizontal */
    padding-right: 8px;
    /* 📐 Espacio para el scrollbar */
    margin-bottom: 15px;
}

/* Scrollbar personalizado estilo casino - Para ambas listas */
#participantesLista::-webkit-scrollbar,
#participantesLista-diccionario::-webkit-scrollbar {
    width: 10px;
}

#participantesLista::-webkit-scrollbar-track,
#participantesLista-diccionario::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(0, 191, 255, 0.2);
}

#participantesLista::-webkit-scrollbar-thumb,
#participantesLista-diccionario::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00bfff 0%, #0080ff 100%);
    border-radius: 10px;
    border: 2px solid rgba(0, 191, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

#participantesLista::-webkit-scrollbar-thumb:hover,
#participantesLista-diccionario::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #40e0d0 0%, #00bfff 100%);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.8);
}

/* Scrollbar para Firefox */
#participantesLista,
#participantesLista-diccionario {
    scrollbar-width: thin;
    scrollbar-color: #00bfff rgba(0, 0, 0, 0.4);
}

/* Tarjetas de datos más compactas en columna de participantes */
.participantes-column .data-card {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 15px;
}

.participantes-column .data-title {
    font-size: 1.4rem;
    margin: 0 0 15px 0;
}

.participantes-column .data-title .material-icons {
    font-size: 1.2rem;
}

/* Estilos específicos para la tabla en la columna izquierda - COMPACTO Y CASINO */
.participantes-column .data-table {
    font-size: 0.75rem;
    background:
        linear-gradient(135deg, #0d4f3c 0%, #1a5f4a 50%, #0d4f3c 100%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 3px,
            rgba(0, 191, 255, 0.03) 3px,
            rgba(0, 191, 255, 0.03) 6px);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 191, 255, 0.2),
        inset 0 0 20px rgba(0, 191, 255, 0.05);
    border: 3px solid #00bfff;
}

.participantes-column .data-table th,
.participantes-column .data-table td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 191, 255, 0.2);
}

.participantes-column .data-table th {
    background: linear-gradient(135deg, #00bfff 0%, #40e0d0 50%, #0080ff 100%);
    color: #000;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    font-size: 0.8rem;
}

.participantes-column .data-table td {
    color: #00bfff;
    font-weight: 500;
}

.participantes-column .data-table tr:hover {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 128, 255, 0.1) 100%);
    transform: scale(1.01);
}

.participantes-column .table-container {
    max-height: 300px;
    overflow-y: auto;
    border: 4px solid #00bfff;
    border-radius: 15px;
    background:
        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%),
        radial-gradient(circle at center, rgba(0, 191, 255, 0.05) 0%, transparent 70%);
    box-shadow:
        inset 0 0 30px rgba(0, 191, 255, 0.1),
        0 0 25px rgba(0, 191, 255, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.6);
    position: relative;
}

.participantes-column .table-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(45deg,
            transparent,
            transparent 4px,
            rgba(0, 191, 255, 0.02) 4px,
            rgba(0, 191, 255, 0.02) 8px);
    pointer-events: none;
    border-radius: 11px;
}

.participantes-column .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.participantes-column .stat-card {
    padding: 8px;
    background:
        linear-gradient(135deg, #00bfff 0%, #40e0d0 50%, #0080ff 100%);
    border: 2px solid rgba(0, 191, 255, 0.8);
    box-shadow:
        0 0 15px rgba(0, 191, 255, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.participantes-column .stat-number {
    font-size: 1.2rem;
    color: #000;
    font-weight: 900;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.participantes-column .stat-label {
    font-size: 0.7rem;
    color: #000;
    font-weight: 600;
}

.participantes-column .json-container {
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 2px solid rgba(0, 191, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2);
}

.participantes-column .json-content {
    font-size: 0.7rem;
    padding: 8px;
    max-height: 150px;
    background: #1a1a2e;
    color: #00bfff;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
}

.participantes-column .json-title {
    color: #00bfff;
    font-size: 1rem;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.6);
}

/* Material Buttons */
.material-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.material-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.material-button.primary {
    background: linear-gradient(135deg, #00bfff 0%, #33e1fd 50%, #78ddff 100%);
    color: #000;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 191, 255, 0.8);
    box-shadow:
        0 0 20px rgba(0, 191, 255, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.material-button.primary::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.5s;
}

.material-button.primary:hover::before {
    left: 100%;
}

.material-button.success {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
}

.material-button.danger {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: white;
}

.material-button .material-icons {
    font-size: 18px;
}

.rouletteModal {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.rouletteModal.show {
    display: flex;
}

.rouletteModal__wrap {
    background-color: #ffffff;
    max-width: 420px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.btnCloseModal {
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    right: 8px;
    position: absolute;
    top: 5px;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rouletteModal__wrap__top {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    padding: 20px;
}

.rouletteModal__wrap__top canvas {
    margin-bottom: -4px;
    padding-top: 30px;
    padding-left: 10px;
}

#canvasImg {
    position: absolute;
    left: 0;
}

.rouletteModal__wrap__bottom {
    padding: 20px;
    text-align: center;
}

.rouletteModal__wrap__bottom h3 {
    color: #565655;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 20px 0;
}

.rouletteModal__wrap__bottom strong {
    color: #d41217;
    font-size: 38px;
    font-weight: bold;
}

.rouletteModal__wrap__bottom form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.rouletteModal__wrap__bottom input {
    border: 1px solid #565655;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    padding: 12px 15px;
}

.rouletteModal__wrap__bottom input[type="button"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
    height: 40px;
    font-size: 14px;
    padding: 0 35px 2px;
    transition: all .3s;
    -webkit-appearance: none;
    appearance: none;
}

.rouletteModal__wrap__bottom input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.rouletteModal__wrap__bottom input[type="button"]:disabled {
    background-color: #bebebe;
    cursor: not-allowed;
}

.copyright {
    font-size: 12px;
    padding: 0 20px;
    margin-top: 20px;
    color: #666;
}

.copyright a {
    color: #d41217;
    font-weight: 400;
}

.winner-display {
    background:
        linear-gradient(135deg, #00bfff 0%, #40e0d0 25%, #0080ff 50%, #40e0d0 75%, #00bfff 100%);
    color: #000;
    padding: 30px;
    border-radius: 20px;
    margin: 30px 0;
    text-align: center;
    display: none;
    border: 4px solid #00bfff;
    box-shadow:
        0 0 40px rgba(0, 191, 255, 0.8),
        0 10px 30px rgba(0, 128, 255, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    animation: casinoWinnerGlow 2s ease-in-out infinite alternate;
}

@keyframes casinoWinnerGlow {
    0% {
        box-shadow:
            0 0 40px rgba(0, 191, 255, 0.8),
            0 10px 30px rgba(0, 128, 255, 0.4),
            inset 0 0 30px rgba(255, 255, 255, 0.3);
    }

    100% {
        box-shadow:
            0 0 60px rgba(0, 191, 255, 1),
            0 10px 40px rgba(0, 128, 255, 0.6),
            inset 0 0 40px rgba(255, 255, 255, 0.5);
    }
}

.winner-display::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.1) 90deg,
            transparent 180deg,
            transparent 270deg,
            rgba(255, 255, 255, 0.1) 360deg);
    animation: casinoWinnerRotate 3s linear infinite;
    z-index: 1;
}

@keyframes casinoWinnerRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.winner-display.show {
    display: block;
}

.winner-name {
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 15px 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.winner-email {
    font-size: 1.3rem;
    opacity: 0.9;
    margin: 0;
    position: relative;
    z-index: 2;
    font-weight: 600;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}


/* ===== LAYOUT DE 2 COLUMNAS - ESTILO CASINO ===== */
.main-layout {
    display: grid;
    grid-template-columns: 25% 75%;
    position: relative;
    z-index: 10;
    overflow: visible;
    /* padding: 20px; */
}

/* ===== PANTALLAS GRANDES (1400px) - Responsivo dinámico ===== */
@media (min-width: 1025px) and (max-width: 1600px) {
    .ruleta-container .ruleta-wrapper {
        width: min(80vw, 75vh, 650px);
        /* 🔴 MUCHO MÁS GRANDE */
        height: min(80vw, 75vh, 650px);
        /* 🔴 MUCHO MÁS GRANDE */
    }

    #spin {
        width: clamp(80px, 18%, 130px);
        height: clamp(80px, 18%, 130px);
    }

    /* Robot ajustado para 1400px */
    .robot-decoration {
        width: clamp(200px, 20vw, 300px);
        left: -14%;
        bottom: -18px;
    }

    #spin-diccionario {
        width: clamp(80px, 18%, 130px);
        height: clamp(80px, 18%, 130px);
    }

    /* Ajustar puntero de la ruleta */
    .wheel-pointer {
        top: -2px;
        /* 🔴 FIJADO al borde superior del contenedor rojo */
        border-left: clamp(20px, 3vw, 30px) solid transparent;
        border-right: clamp(20px, 3vw, 30px) solid transparent;
        border-top: clamp(40px, 6vw, 60px) solid #00bfff;
    }
}

/* Layout de 1 columna para pantallas medianas y pequeñas */
@media (max-width: 1024px) {

    /* Logo responsive */
    .logo-img {
        max-width: 200px;
    }

    /* Robot responsive */
    .robot-decoration {
        width: 300px;
        left: -14%;
        bottom: -20px;
    }

    .main-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .ruleta-column {
        order: 1;
    }

    .participantes-column {
        order: 2;
    }
}

.participantes-column {
    border-radius: 20px;
    overflow-y: auto;
    position: relative;
    background:
        linear-gradient(135deg, rgba(0, 191, 255, 0.05) 0%, rgba(0, 128, 255, 0.05) 100%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 2px solid rgba(0, 191, 255, 0.3);
    box-shadow:
        0 0 25px rgba(0, 191, 255, 0.2),
        inset 0 0 25px rgba(0, 0, 0, 0.3);
}

.ruleta-column {
    min-height: 960px;
    border-radius: 20px;
    position: relative;
    background:
        linear-gradient(135deg, rgba(0, 191, 255, 0.05) 0%, rgba(0, 128, 255, 0.05) 100%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%),
        url('imagenes/FondoIBC.png') center no-repeat;
    /* 🌍 Fondo del mundo local */
    background-size: cover;
    border: 2px solid rgba(0, 191, 255, 0.3);
    box-shadow:
        0 0 25px rgba(0, 191, 255, 0.2),
        inset 0 0 25px rgba(0, 0, 0, 0.3);
    padding: 20px;
    overflow: visible;
}

.ruleta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: min(90vh, 800px);
    max-height: 95vh;
    padding: clamp(2px, 0.5vh, 8px);
    /* 🔴 PADDING MÍNIMO para maximizar espacio */
    overflow: visible;
    /* 🔴 CAMBIADO: visible para que la ruleta se vea completa */
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.ruleta-container canvas {
    border-radius: 50%;
    margin-bottom: 20px;
    overflow: visible !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

.ruleta-controls {
    width: 100%;
    text-align: center;
    margin-top: clamp(10px, 2vh, 20px);
    /* 🔴 Espaciado responsivo y más compacto */
    padding: 0 clamp(5px, 1vw, 15px);
    /* 🔴 Padding lateral para contener mejor */
}

.ruleta-controls input {
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
}

.ruleta-controls input:focus {
    border-color: #1976d2;
}

.ruleta-controls button {
    width: 330px;
    height: 58px;
    border-radius: 40px;
    border: 8px solid #00bfff;
    background:
        linear-gradient(145deg, #8B0000 0%, #DC143C 50%, #8B0000 100%);
    color: #00bfff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: 'Arial Black', sans-serif;
    position: relative;
    overflow: hidden;
    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 191, 255, 0.8);
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: casinoSpinGlow 2s ease-in-out infinite alternate;
    text-align: center;
    line-height: 1.2;
}

@keyframes casinoSpinGlow {
    0% {
        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.8),
            inset 0 2px 4px rgba(255, 255, 255, 0.2),
            inset 0 -2px 4px rgba(0, 0, 0, 0.6);
        text-shadow:
            0 3px 6px rgba(0, 0, 0, 0.8),
            0 0 15px rgba(0, 191, 255, 0.8);
    }

    100% {
        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.8),
            inset 0 2px 4px rgba(255, 255, 255, 0.3),
            inset 0 -2px 4px rgba(0, 0, 0, 0.6);
        text-shadow:
            0 3px 6px rgba(0, 0, 0, 0.8),
            0 0 25px rgba(0, 191, 255, 1);
    }
}

@keyframes casinoFrameGlow {
    0% {
        box-shadow:
            0 6px 15px rgba(0, 0, 0, 0.4),
            inset 0 3px 6px rgba(255, 255, 255, 0.5),
            inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    }

    100% {
        box-shadow:
            0 6px 15px rgba(0, 0, 0, 0.4),
            inset 0 3px 6px rgba(255, 255, 255, 0.7),
            inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    }
}

@keyframes casinoLEDs {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes casinoSparkles {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Marco dorado con luces LED */
.ruleta-controls button::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background:
        radial-gradient(circle at 20% 20%, #00bfff 0%, #40e0d0 30%, #b8860b 60%, #8B4513 100%),
        radial-gradient(circle at 80% 20%, #00bfff 0%, #40e0d0 30%, #b8860b 60%, #8B4513 100%),
        radial-gradient(circle at 20% 80%, #00bfff 0%, #40e0d0 30%, #b8860b 60%, #8B4513 100%),
        radial-gradient(circle at 80% 80%, #00bfff 0%, #40e0d0 30%, #b8860b 60%, #8B4513 100%),
        linear-gradient(145deg, #00bfff 0%, #40e0d0 25%, #b8860b 50%, #8B4513 75%, #00bfff 100%);
    border-radius: 48px;
    z-index: -1;
    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.4),
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    animation: casinoFrameGlow 3s ease-in-out infinite alternate;
}

/* Luces LED alrededor del marco */
.ruleta-controls button::before::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 30% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 70% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 30% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 20%);
    border-radius: 48px;
    animation: casinoLEDs 2s ease-in-out infinite alternate;
}

/* Efecto de chispas y brillo */
.ruleta-controls button::after {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 15%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 12%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.7) 0%, transparent 18%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.5) 0%, transparent 10%),
        conic-gradient(from 45deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.3) 30deg,
            transparent 60deg,
            transparent 120deg,
            rgba(255, 255, 255, 0.4) 150deg,
            transparent 180deg,
            transparent 240deg,
            rgba(255, 255, 255, 0.3) 270deg,
            transparent 300deg,
            transparent 360deg);
    border-radius: 60px;
    z-index: -2;
    animation: casinoSparkles 1.5s ease-in-out infinite alternate;
}

.ruleta-controls button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 191, 255, 0.8),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.8);
    animation: none;
}

.ruleta-controls button:hover::after {
    left: 100%;
}

.ruleta-controls button:active {
    transform: translateY(-2px) scale(1.02);
}

.ruleta-controls button:disabled {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    border-color: #999;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ruleta-controls button:disabled::before {
    display: none;
}

/* Estilos para la nueva ruleta con imágenes - ELIMINADO (duplicado) */

#ruleta {
    transition: transform 10s ease-out;
    cursor: pointer;
}

#puntero {
    pointer-events: none;
    z-index: 10;
}

#ruleta:hover {
    transform: scale(1.05);
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.rouletteModal {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    font-family: 'Roboto', sans-serif;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9999;
}

.rouletteModal.show {
    display: flex !important;
}

.rouletteModal__wrap {
    background-color: #ffffff;
    max-width: 420px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    z-index: 10000;
}

.btnCloseModal {
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    right: 15px;
    position: absolute;
    top: 10px;
    z-index: 1001;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rouletteModal__wrap__top {
    background: url(https://clientes.titamedia.com/flamingo/images/roulette_bkg.png) center no-repeat;
    background-size: cover;
    position: relative;
    height: 400px;
}

.rouletteModal__wrap__top canvas {
    margin-bottom: -4px;
    padding-top: 30px;
    padding-left: 10px;
}

#canvasImg {
    position: absolute;
    left: 0;
    top: 0;
}

.rouletteModal__wrap__bottom {
    padding: 20px;
    text-align: center;
}

.rouletteModal__wrap__bottom h3 {
    color: #565655;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.rouletteModal__wrap__bottom h3 strong {
    color: #d41217;
    font-size: 38px;
    font-weight: bold;
}

.rouletteModal__wrap__bottom form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.rouletteModal__wrap__bottom input {
    border: 1px solid #565655;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    padding: 10px 15px;
}

.rouletteModal__wrap__bottom input[type="button"] {
    background-color: #565655;
    border: none;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
    height: 40px;
    font-size: 14px;
    padding: 0 35px 2px;
    transition: all .3s;
    -webkit-appearance: none;
    appearance: none;
}

.rouletteModal__wrap__bottom input[type="button"]:hover {
    background-color: #d41217;
}

.rouletteModal__wrap__bottom input[type="button"]:disabled {
    background-color: #bebebe;
}

.winner-display {
    display: none !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 191, 255, 0.02) 2px, rgba(0, 191, 255, 0.02) 4px) !important;
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin: 20px 0;
}

.winner-display.show {
    display: block;
}

.winner-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.winner-email {
    font-size: 1rem;
    opacity: 0.9;
}

.copyright {
    font-size: 14px;
    padding: 0 20px;
    margin-top: 20px;
}

.copyright a {
    color: #d41217;
    font-weight: 400;
}

@keyframes changeColor {
    0% {
        background-color: black;
    }

    20% {
        background-color: #d41217;
    }

    40% {
        background-color: #ffe340;
    }

    60% {
        background-color: #d41217;
    }

    80% {
        background-color: black;
    }

    100% {
        background-color: #ffe340;
    }
}

/* ===== RULETA DE LA FORTUNA - ESTILO CASINO ===== */
.ruleta-container .ruleta-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
    width: min(85vw, 80vh, 700px);
    /* 🔴 MUCHO MÁS GRANDE - 85% del viewport */
    height: min(85vw, 80vh, 700px);
    /* 🔴 MUCHO MÁS GRANDE - 80% del viewport */
    aspect-ratio: 1 / 1;
    overflow: visible !important;
    box-sizing: border-box;
    padding: clamp(5px, 1vw, 15px);
    /* 🔴 PADDING NORMAL */
}

.ruleta-wrapper #spinWheel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: visible !important;
}

@keyframes casinoWheelGlow {
    0% {
        box-shadow:
            0 0 40px rgba(0, 191, 255, 0.8),
            0 0 80px rgba(0, 128, 255, 0.6),
            0 15px 40px rgba(0, 0, 0, 0.9),
            inset 0 0 20px rgba(0, 191, 255, 0.3);
    }

    100% {
        box-shadow:
            0 0 60px rgba(0, 191, 255, 1),
            0 0 100px rgba(0, 128, 255, 0.8),
            0 15px 40px rgba(0, 0, 0, 0.9),
            inset 0 0 30px rgba(0, 191, 255, 0.5);
    }
}

#spinWheel::after {
    content: "";
    position: absolute;
    top: 0px;
    left: calc(50% - 20px);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid #feeb69;
    -webkit-filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, .7));
    filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, .7));
}

@keyframes casinoPointerPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
    }

    100% {
        transform: scale(1.05);
        filter: drop-shadow(0 4px 8px rgba(0, 191, 255, 0.6));
    }
}

.ruleta-wrapper canvas#wheel {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 auto;
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

#spin {
    font: 1.1em/0 "Lato", sans-serif;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(60px, 22%, 180px);
    height: clamp(60px, 22%, 180px);
    pointer-events: auto;
    background: transparent;
    color: #fff;
    border-radius: 50%;
    transition: 0.8s;
    overflow: hidden;
    animation: ticketFloat 3s ease-in-out infinite;
    /* border: 3px solid #ffffffcc; */
}

/* Personalizar la animación de pulso de Animate.css */
#spin.animate__pulse {
    animation: ticketFloat 3s ease-in-out infinite, pulse 2s ease-in-out infinite;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes ticketFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    }

    25% {
        transform: translate(-50%, -50%) translateY(-5px) rotate(1deg);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-8px) rotate(0deg);
    }

    75% {
        transform: translate(-50%, -50%) translateY(-5px) rotate(-1deg);
    }
}

/* El pulso constante se aplica directamente en #spin */

@keyframes casinoButtonPulse {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 0 6px #00bfff,
            0 0 20px rgba(0, 191, 255, 0.8),
            0 0 40px rgba(0, 128, 255, 0.6),
            inset 0 0 20px rgba(255, 255, 255, 0.3);
    }

    100% {
        transform: scale(1.05);
        box-shadow:
            0 0 0 8px #00bfff,
            0 0 30px rgba(0, 191, 255, 1),
            0 0 60px rgba(0, 128, 255, 0.8),
            inset 0 0 30px rgba(255, 255, 255, 0.5);
    }
}

#spin:hover {
    transform: scale(1.1);
}

#spin:active {
    transform: scale(1.03);
}

#spin img {
    border-radius: 50%;
    transition: transform 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#spin:hover img {
    transform: scale(1.05);
}

/* Efecto de boleto volador hacia el ganador (Move to Cart style) */
.b-flying-boleto {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    border-radius: 50%;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    border: 2px solid #ffd700;
    will-change: transform, opacity;
}

/* Animación de rotación durante el vuelo */
@keyframes flyBoleto {
    0% {
        transform: rotate(0deg) scale(1);
        filter: brightness(1);
    }

    30% {
        transform: rotate(120deg) scale(1.05);
        filter: brightness(1.1);
    }

    60% {
        transform: rotate(240deg) scale(0.8);
        filter: brightness(1.2);
    }

    100% {
        transform: rotate(360deg) scale(0.3);
        filter: brightness(0.8);
    }
}

/* Aplicar animación de rotación */
.b-flying-boleto.animating {
    animation: flyBoleto 0.8s ease-out forwards;
}

/* ---- tsParticles styles elegantes ---- */
#tsparticles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: auto;
    background: transparent;
    filter: brightness(1.1) contrast(1.05);
}

#tsparticles canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    animation: particulasPulse 4s ease-in-out infinite alternate;
}

/* Animación suave para las partículas */
@keyframes particulasPulse {
    0% {
        filter: brightness(1) contrast(1) saturate(1);
        transform: scale(1);
    }

    100% {
        filter: brightness(1.15) contrast(1.1) saturate(1.2);
        transform: scale(1.01);
    }
}

/* Efecto suave para el contenedor de partículas ganador */
#particulas-ganador {
    animation: explosionParticulas 0.8s ease-out;
}

@keyframes explosionParticulas {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#particulas-ganador canvas {
    animation: particulasGanadorPulse 2s ease-in-out infinite alternate;
}

@keyframes particulasGanadorPulse {
    0% {
        filter: brightness(1.2) contrast(1.1) saturate(1.3);
        transform: scale(1);
    }

    100% {
        filter: brightness(1.4) contrast(1.2) saturate(1.5);
        transform: scale(1.02);
    }
}

/* Efecto de trayectoria curva más realista */
.b-flying-boleto.curved {
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Borde animado para la ruleta */
#wheel {
    position: relative;
    border-radius: 50%;
    overflow: visible;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: auto;
    object-fit: contain;
}

/* Puntero flecha mejorado */
.wheel-pointer {
    position: absolute;
    top: -2px;
    /* 🔴 FIJADO al borde superior del contenedor rojo */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 60px solid #ffd700;
    z-index: 10;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
}

.wheel-pointer::before {
    /* content: ''; */
    position: absolute;
    top: -50px;
    left: -25px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 40px solid #2c3e50;
}

.wheel-pointer::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -20px;
    width: 40px;
    height: 20px;
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 0 12px rgba(44, 62, 80, 0.8);
}

/* 🤖 Robot decorativo IBC */
.robot-decoration {
    position: absolute;
    bottom: clamp(-5px, -1vh, 0px);
    /* 🔴 Ajustado para no salirse */
    left: clamp(-5%, -2vw, 0%);
    /* 🔴 Ajustado para no salirse */
    width: clamp(120px, 15vw, 200px);
    /* 🔴 Responsivo y más pequeño */
    height: auto;
    z-index: 5;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(0, 191, 255, 0.3));
    transition: all 0.3s ease;
    animation-duration: 1.5s;
    pointer-events: none;
    /* 🔴 CONTENER dentro del contenedor */
    max-width: 100%;
    max-height: 100%;
}

.robot-decoration:hover {
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 40px rgba(0, 191, 255, 0.6));
    transform: scale(1.02);
    /* 🔴 Reducido para que no se salga del contenedor */
}

.wheel-pointer.wheel-pointer-diccionario {
    top: -30px;
}

/* 🏆 Logo de garantía decorativo - Posicionado relativo a data-title */
.garantia-decoration {
    position: absolute;
    top: 0px;
    /* 🔴 SIN salirse hacia arriba */
    right: 0px;
    /* 🔴 SIN salirse hacia la derecha */
    width: clamp(60px, 20vw, 250px);
    height: auto;
    z-index: 10;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    pointer-events: none;
    /* 🔴 CONTENER DENTRO DEL CONTENEDOR OBLIGATORIAMENTE */
    max-width: 100%;
    max-height: 100%;
    /* NO agregar transition ni animation-duration para no bloquear animate.css */
}

/* Base azul de la ruleta */
#spinWheel {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 20px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

#spinWheel::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #ffd700;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}


#wheel::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: linear-gradient(45deg, #00bfff, #0080ff, #00bfff, #0080ff, #00bfff);
    background-size: 300% 300%;
    border-radius: 50%;
    z-index: -1;
    animation: casinoBorderFlow 3s linear infinite;
}

#wheel::after {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    background: linear-gradient(90deg, #00bfff, #0080ff, #40e0d0, #0080ff, #00bfff);
    background-size: 200% 100%;
    border-radius: 50%;
    z-index: -2;
    animation: casinoBorderFlow 2s linear infinite reverse;
    opacity: 0.7;
}

.ruleta-indicador {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #00bfff;
    z-index: 20;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.ruleta-indicador::before {
    content: "";
    position: absolute;
    top: -35px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: #00bfff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.6);
}

.ruleta-base {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 20px;
    background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.ruleta-base::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 10px;
    background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
    border-radius: 5px;
}

/* Animaciones de giro */
.ruleta-girando {
    animation: girarRuleta 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes girarRuleta {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(var(--angulo-final, 1800deg));
    }
}

/* Efectos de iluminación */
.ruleta-casino-container::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: conic-gradient(from 0deg,
            rgba(0, 191, 255, 0.3) 0deg,
            transparent 30deg,
            transparent 330deg,
            rgba(0, 191, 255, 0.3) 360deg);
    border-radius: 50%;
    z-index: -1;
    animation: rotarLuz 3s linear infinite;
}

@keyframes rotarLuz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Efectos de partículas */
.ruleta-casino-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: #00bfff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 20px #00bfff,
        0 0 40px #00bfff,
        0 0 60px #00bfff;
    animation: brillar 2s ease-in-out infinite alternate;
}

@keyframes brillar {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Efectos adicionales de casino */
.ruleta-casino-container {
    position: relative;
}

/* Partículas flotantes de casino */
.ruleta-wrapper::before {
    content: "✦";
    position: absolute;
    top: 10%;
    left: 20%;
    font-size: 20px;
    color: #00bfff;
    animation: casinoFloat1 4s ease-in-out infinite;
    z-index: 5;
}

.ruleta-wrapper::after {
    content: "✦";
    position: absolute;
    top: 70%;
    right: 20%;
    font-size: 16px;
    color: #0080ff;
    animation: casinoFloat2 3s ease-in-out infinite;
    z-index: 5;
}

@keyframes casinoFloat1 {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

@keyframes casinoFloat2 {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-15px) rotate(-180deg);
        opacity: 0.9;
    }
}

.ruleta-casino-container::before {
    content: "★";
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #00bfff;
    animation: parpadear 2s ease-in-out infinite alternate;
    z-index: 15;
}

.ruleta-casino-container::after {
    content: "★";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #00bfff;
    animation: parpadear 2s ease-in-out infinite alternate;
    z-index: 15;
}

@keyframes parpadear {
    0% {
        opacity: 0.3;
        transform: translateX(-50%) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
    }
}

/* Efecto de resplandor en el centro */
.ruleta-casino::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 191, 255, 0.3);
    border: 3px solid #2c3e50;
    animation: resplandorCentro 3s ease-in-out infinite alternate;
}

@keyframes resplandorCentro {
    0% {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 191, 255, 0.3);
    }

    100% {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.3), 0 0 50px rgba(0, 191, 255, 0.6);
    }
}

/* Efecto de partículas flotantes */
.ruleta-casino-container {
    overflow: visible;
}

.ruleta-casino-container .particula {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00bfff;
    border-radius: 50%;
    animation: flotar 4s ease-in-out infinite;
    z-index: 5;
}

@keyframes flotar {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

/* ===== MODAL TRES GANADORES - ESTILO CASINO ===== */
.modal-tres-ganadores {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    font-family: 'Roboto', sans-serif;
    animation: modalFadeIn 0.3s ease-out;
}

.modal-tres-ganadores.show {
    display: flex;
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-tres-ganadores__wrap {
    background:
        linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 128, 255, 0.1) 100%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%),
        url('imagenes/FONDO IBC 3.png');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    border: 2px solid rgba(0, 191, 255, 0.6);
    box-shadow:
        0 0 40px rgba(0, 191, 255, 0.4),
        0 15px 40px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 191, 255, 0.1);
    max-width: 700px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    0% {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-tres-ganadores__wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(0, 191, 255, 0.1) 60deg,
            transparent 120deg,
            transparent 180deg,
            rgba(0, 128, 255, 0.1) 240deg,
            transparent 300deg,
            transparent 360deg);
    animation: modalRotate 8s linear infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes modalRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.modal-tres-ganadores__header {
    padding: 15px 20px 10px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.modal-tres-ganadores__icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00bfff 0%, #40e0d0 50%, #0080ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    border: 2px solid #00bfff;
    box-shadow:
        0 0 30px rgba(0, 191, 255, 0.8),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    animation: modalIconPulse 2s ease-in-out infinite alternate;
}

@keyframes modalIconPulse {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 30px rgba(0, 191, 255, 0.8),
            inset 0 0 20px rgba(255, 255, 255, 0.3);
    }

    100% {
        transform: scale(1.05);
        box-shadow:
            0 0 40px rgba(0, 191, 255, 1),
            inset 0 0 25px rgba(255, 255, 255, 0.5);
    }
}

.modal-tres-ganadores__icon .material-icons {
    font-size: 24px;
    color: #000;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal-tres-ganadores__title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #00bfff;
    margin: 0 0 4px 0;
    text-shadow:
        0 0 15px rgba(0, 191, 255, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5);
    animation: modalTitleGlow 3s ease-in-out infinite alternate;
}

@keyframes modalTitleGlow {
    0% {
        text-shadow:
            0 0 20px rgba(0, 191, 255, 0.8),
            0 4px 8px rgba(0, 0, 0, 0.5);
    }

    100% {
        text-shadow:
            0 0 30px rgba(0, 191, 255, 1),
            0 6px 12px rgba(0, 0, 0, 0.7);
    }
}

.modal-tres-ganadores__subtitle {
    font-size: 0.9rem;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.modal-tres-ganadores__content {
    padding: 10px 20px 15px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: calc(100% - 80px);
}

.modal-tres-ganadores__ganadores {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.modal-tres-ganadores__ganadores h3 {
    color: #00bfff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-align: center;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.6);
}

.lista-ganadores-modal {
    background:
        linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 128, 255, 0.1) 100%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 10px;
    border: 1px solid rgba(0, 191, 255, 0.3);
    padding: 12px;
    flex: 1;
    min-height: 300px;
    max-height: 60vh;
    overflow-y: auto;
}

.ganador-modal-item {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    border: 1px solid #ffd700;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 0 15px rgba(255, 215, 0, 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
    animation: ganadorModalItemPulse 2s ease-in-out infinite alternate;
}

.ganador-modal-item:last-child {
    margin-bottom: 0;
}

@keyframes ganadorModalItemPulse {
    0% {
        box-shadow:
            0 0 20px rgba(255, 215, 0, 0.6),
            inset 0 0 10px rgba(255, 255, 255, 0.3);
    }

    100% {
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.8),
            inset 0 0 15px rgba(255, 255, 255, 0.5);
    }
}

.ganador-modal-numero {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #000 0%, #333 100%);
    color: #ffd700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.8rem;
    border: 1px solid #ffd700;
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        inset 0 0 6px rgba(255, 255, 255, 0.2);
}

.ganador-modal-info {
    flex: 1;
}

.ganador-modal-nombre {
    color: #000;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 0 2px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ganador-modal-email {
    color: #8B4513;
    font-size: 0.75rem;
    margin: 0;
    font-style: italic;
}

.modal-tres-ganadores__options {
    text-align: center;
    margin-top: auto;
}

.modal-tres-ganadores__question {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.modal-tres-ganadores__buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    min-width: 100px;
    justify-content: center;
}

.modal-btn .material-icons {
    font-size: 16px;
}

.modal-btn::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.5s;
}

.modal-btn:hover::before {
    left: 100%;
}

.modal-btn--primary {
    background: linear-gradient(135deg, #00bfff 0%, #40e0d0 50%, #0080ff 100%);
    color: #000;
    border: 2px solid #00bfff;
    box-shadow:
        0 0 25px rgba(0, 191, 255, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.modal-btn--primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 0 35px rgba(0, 191, 255, 0.8),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.modal-btn--secondary {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    color: #ffffff;
    border: 2px solid #666;
    box-shadow:
        0 0 15px rgba(102, 102, 102, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.modal-btn--secondary:hover {
    transform: translateY(-3px) scale(1.05);
    background: linear-gradient(135deg, #777 0%, #555 100%);
    box-shadow:
        0 0 25px rgba(102, 102, 102, 0.6),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.modal-btn--warning {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 50%, #ef6c00 100%);
    color: #000;
    border: 2px solid #ff9800;
    box-shadow:
        0 0 25px rgba(255, 152, 0, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.modal-btn--warning:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 0 35px rgba(255, 152, 0, 0.8),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.modal-btn:active {
    transform: translateY(-1px) scale(1.02);
}


/* ===== ESTILOS PARA BOTÓN SORTEO COMPLETO ===== */
.ruleta-controls button.sorteo-completo {
    background: linear-gradient(135deg, #666 0%, #444 100%) !important;
    border-color: #666 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    box-shadow:
        0 0 15px rgba(102, 102, 102, 0.4),
        inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
    animation: none !important;
}

.ruleta-controls button.sorteo-completo:hover {
    transform: none !important;
    box-shadow:
        0 0 15px rgba(102, 102, 102, 0.4),
        inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

.ruleta-controls button.sorteo-completo::before {
    display: none !important;
}

.ruleta-controls button.sorteo-completo::after {
    display: none !important;
}

/* Indicador visual de sorteo completo */
.ruleta-controls button.sorteo-completo::before {
    content: "🏆";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 24px;
    animation: sorteoCompletoPulse 2s ease-in-out infinite alternate;
    z-index: 10;
}

@keyframes sorteoCompletoPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* ===== ESTILOS PARA BOTÓN SIN PARTICIPANTES ===== */
.ruleta-controls button.sin-participantes {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%) !important;
    border-color: #ff4444 !important;
    color: #fff !important;
    cursor: not-allowed !important;
    box-shadow:
        0 0 15px rgba(255, 68, 68, 0.4),
        inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
    animation: none !important;
}

.ruleta-controls button.sin-participantes:hover {
    transform: none !important;
    box-shadow:
        0 0 15px rgba(255, 68, 68, 0.4),
        inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

.ruleta-controls button.sin-participantes::before {
    display: none !important;
}

.ruleta-controls button.sin-participantes::after {
    display: none !important;
}

/* Indicador visual de sin participantes */
.ruleta-controls button.sin-participantes::before {
    content: "⚠️";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 24px;
    animation: sinParticipantesPulse 1.5s ease-in-out infinite alternate;
    z-index: 10;
}

@keyframes sinParticipantesPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* ===== BOTÓN CONTROL DE PARTICIPANTES ===== */
.admin-participantes-container {
    margin-top: 20px;
    text-align: center;
    padding: 15px 0;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ff6b35 100%);
    color: #000;
    border: 2px solid #ff6b35;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow:
        0 0 20px rgba(255, 107, 53, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.admin-btn::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.5s;
}

.admin-btn:hover::before {
    left: 100%;
}

.admin-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 0 30px rgba(255, 107, 53, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 0 15px rgba(255, 255, 255, 0.3);
}

.admin-btn .material-icons {
    font-size: 18px;
}

/* ===== MODAL CONTROL DE PARTICIPANTES ===== */
.modal-control-participantes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    font-family: 'Roboto', sans-serif;
    will-change: opacity, transform;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.modal-control-participantes.show {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.modal-control-participantes.show .modal-control-participantes__wrap {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-control-participantes__wrap {
    background: rgba(26, 26, 26, 0.95);
    border-radius: 15px;
    border: 2px solid rgba(255, 107, 53, 0.6);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    max-width: 800px;
    width: 90%;
    height: 95vh;
    max-height: 95vh;
    overflow: hidden;
    position: relative;
    will-change: transform, opacity;
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    display: flex;
    flex-direction: column;
}

.modal-control-participantes__wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 107, 53, 0.05) 50%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.modal-control-participantes__header {
    padding: 8px 15px 6px;
    text-align: center;
    position: relative;
    flex-shrink: 0;
    /* No comprimir */
    z-index: 2;
}

.modal-control-participantes__icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ff6b35 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    border: 2px solid #ff6b35;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.8);
}

.modal-control-participantes__icon .material-icons {
    font-size: 24px;
    color: #000;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.modal-control-participantes__title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #ff6b35;
    margin: 0 0 2px 0;
    text-shadow:
        0 0 15px rgba(255, 107, 53, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.modal-control-participantes__subtitle {
    font-size: 0.7rem;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.modal-control-participantes__content {
    padding: 8px 12px 10px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* CRÍTICO: permite que el scroll funcione en flex */
    overflow: hidden;
    /* Sin scroll en el contenido principal */
}

.modal-control-participantes__stats {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    flex-shrink: 0;
    /* No comprimir */
    justify-content: space-around;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(247, 147, 30, 0.1) 100%);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 6px;
    padding: 6px 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    box-shadow: none;
}

.stat-number {
    font-size: 0.85rem;
    font-weight: 900;
    color: #ff6b35;
    margin: 0;
    text-shadow: 0 0 8px rgba(255, 107, 53, 0.6);
}

.stat-label {
    font-size: 0.7rem;
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.modal-control-participantes__config {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(247, 147, 30, 0.15) 100%);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.2);
    flex-shrink: 0;
    /* No comprimir */
}

.config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.config-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.config-label .material-icons {
    font-size: 1rem;
    color: #FFD700;
}

.config-number-control {
    padding: 3px;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.config-number-control:hover {
    border-color: #ff6b35;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}

.config-number-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3) 0%, rgba(247, 147, 30, 0.3) 100%);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ff6b35;
    padding: 0;
}

.config-number-btn:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.6) 0%, rgba(247, 147, 30, 0.6) 100%);
    color: #fff;
}

.config-number-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.8) 0%, rgba(247, 147, 30, 0.8) 100%);
}

.config-number-btn .material-icons {
    font-size: 1rem;
}

.config-number-btn--minus {
    border-right: 1px solid rgba(255, 107, 53, 0.3);
}

.config-number-btn--plus {
    border-left: 1px solid rgba(255, 107, 53, 0.3);
}

.config-input {
    width: 50px;
    padding: 6px 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ff6b35;
    background: transparent;
    border: none;
    text-align: center;
    outline: none;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    transition: transform 0.15s ease;
}

/* Ocultar flechas del input number */
.config-input::-webkit-inner-spin-button,
.config-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.config-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Sección de Bots */
.modal-control-participantes__bots {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    border: 1px solid rgba(147, 51, 234, 0.4);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.modal-control-participantes__bots h3 {
    color: #a855f7;
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 3px 0;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

.bots-description {
    color: #c4b5fd;
    font-size: 0.7rem;
    margin: 0 0 8px 0;
    font-style: italic;
}

.bots-form {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.bots-input {
    flex: 1;
    padding: 7px 10px;
    font-size: 0.85rem;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(147, 51, 234, 0.5);
    border-radius: 6px;
    outline: none;
    transition: all 0.3s ease;
}

.bots-input:focus {
    border-color: #a855f7;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    background: rgba(0, 0, 0, 0.7);
}

.bots-input::placeholder {
    color: rgba(196, 181, 253, 0.5);
}

.bots-btn-add {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

.bots-btn-add:hover {
    background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.5);
    transform: translateY(-2px);
}

.bots-btn-add:active {
    transform: translateY(0);
}

.bots-btn-add .material-icons {
    font-size: 1rem;
}

.lista-bots-admin {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Scrollbar personalizada */
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 51, 234, 0.6) rgba(0, 0, 0, 0.3);
}

/* Scrollbar webkit para lista de bots */
.lista-bots-admin::-webkit-scrollbar {
    width: 8px;
}

.lista-bots-admin::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.lista-bots-admin::-webkit-scrollbar-thumb {
    background: rgba(147, 51, 234, 0.6);
    border-radius: 10px;
}

.lista-bots-admin::-webkit-scrollbar-thumb:hover {
    background: rgba(147, 51, 234, 0.8);
}

.bot-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: rgba(147, 51, 234, 0.2);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.bot-item:hover {
    background: rgba(147, 51, 234, 0.3);
    border-color: rgba(147, 51, 234, 0.5);
}

.bot-item-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bot-item-icon {
    color: #a855f7;
    font-size: 1rem;
}

.bot-item-name {
    color: #e9d5ff;
    font-size: 0.8rem;
    font-weight: 500;
}

.bot-item-badge {
    padding: 2px 6px;
    background: rgba(147, 51, 234, 0.6);
    border-radius: 8px;
    font-size: 0.6rem;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
}

.bot-item-delete {
    padding: 4px;
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bot-item-delete:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #ef4444;
}

.bot-item-delete .material-icons {
    font-size: 1rem;
}

.modal-control-participantes__controls {
    margin-bottom: 8px;
    flex-shrink: 0;
    /* No comprimir */
}

.control-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.control-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.control-btn--primary {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #000;
    border: 2px solid #ff6b35;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}

.control-btn--secondary {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    color: #ffffff;
    border: 2px solid #666;
    box-shadow: 0 0 10px rgba(102, 102, 102, 0.4);
}

.control-btn:hover {
    transform: translateY(-2px) scale(1.05);
}

.control-btn--primary:hover {
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.6);
}

.control-btn--secondary:hover {
    box-shadow: 0 0 20px rgba(102, 102, 102, 0.6);
}

.modal-control-participantes__lista {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-control-participantes__lista h3 {
    color: #ff6b35;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 107, 53, 0.6);
    flex-shrink: 0;
    /* evita que se comprima */
}

.lista-participantes-admin {
    background:
        linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(247, 147, 30, 0.1) 100%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 53, 0.3);
    padding: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Estilos para scrollbar personalizada */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.6) rgba(0, 0, 0, 0.3);
}

/* Scrollbar webkit (Chrome, Safari, Edge) */
.lista-participantes-admin::-webkit-scrollbar {
    width: 8px;
}

.lista-participantes-admin::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.lista-participantes-admin::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.6);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.lista-participantes-admin::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.9);
}

.participante-admin-item {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease;
}

.participante-admin-item:last-child {
    margin-bottom: 0;
}

.participante-admin-item:hover {
    background: rgba(255, 107, 53, 0.15);
    border-color: rgba(255, 107, 53, 0.6);
}

.participante-admin-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #ff6b35;
    cursor: pointer;
    transform: scale(1.1);
}

.participante-admin-info {
    flex: 1;
}

.participante-admin-nombre {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 0 2px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.participante-admin-email {
    color: #cccccc;
    font-size: 0.75rem;
    margin: 0;
    font-style: italic;
}

.participante-admin-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.participante-admin-status.activo {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: #ffffff;
}

.participante-admin-status.inactivo {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: #ffffff;
}

/* Estilos para ganadores en Control de Participantes */
.participante-admin-item.ganador {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 193, 7, 0.1) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.participante-admin-item.ganador .participante-admin-checkbox {
    opacity: 0.5;
    cursor: not-allowed;
}

.participante-admin-status.ganador {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000;
    font-weight: 700;
}

.modal-control-participantes__options {
    text-align: center;
    margin-top: auto;
    flex-shrink: 0;
    /* No comprimir */
}

.modal-control-participantes__buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================== */
/* TABS DEL MODAL */
/* ===================== */
.modal-control-participantes__tabs {
    display: flex;
    border-bottom: 1px solid rgba(0, 191, 255, 0.2);
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 128, 255, 0.1) 100%);
    border-radius: 8px 8px 0 0;
    padding: 3px;
}

.modal-tab-btn {
    flex: 1;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: rgba(196, 181, 253, 0.7);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.modal-tab-btn:hover {
    background: rgba(0, 191, 255, 0.1);
    color: rgba(196, 181, 253, 0.9);
    transform: translateY(-1px);
}

.modal-tab-btn--active {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.3) 0%, rgba(0, 128, 255, 0.3) 100%);
    color: #00bfff;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
}

.modal-tab-btn .material-icons {
    font-size: 0.95rem;
}

/* Sub-Tabs (Lista / Configuración / Reloj) */
.modal-sub-tab-btn {
    flex: 1;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    color: rgba(196, 181, 253, 0.6);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-radius: 6px;
}

.modal-sub-tab-btn:hover {
    background: rgba(147, 51, 234, 0.1);
    color: rgba(147, 51, 234, 0.9);
}

.modal-sub-tab-btn--active {
    background: rgba(147, 51, 234, 0.15);
    color: #9333ea;
    border-bottom: 2px solid #9333ea;
}

.modal-sub-tab-btn .material-icons {
    font-size: 0.85rem;
}

.modal-tab-content {
    display: none;
    overflow: hidden;
    /* Sin scroll en el tab */
    padding-right: 5px;
}

.modal-tab-content--active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* Sin scroll en el tab */
}

/* Scrollbar webkit para tabs */
.modal-tab-content::-webkit-scrollbar {
    width: 8px;
}

.modal-tab-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.modal-tab-content::-webkit-scrollbar-thumb {
    background: rgba(0, 191, 255, 0.6);
    border-radius: 10px;
}

.modal-tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 191, 255, 0.8);
}

/* ===================== */
/* CONTROL DE RELOJ */
/* ===================== */
.reloj-control__section {
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-radius: 15px;
    border: 1px solid rgba(0, 191, 255, 0.2);
}

.reloj-control__section h3 {
    color: #00bfff;
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.reloj-control__status {
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(0, 191, 255, 0.1);
}

.reloj-status-item {
    text-align: center;
}

.reloj-status-label {
    display: block;
    color: rgba(196, 181, 253, 0.8);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.reloj-status-value {
    display: block;
    color: #00bfff;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
}

.reloj-control__buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.reloj-btn {
    padding: 12px 18px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
    justify-content: center;
}

.reloj-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.reloj-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.reloj-btn--start {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
}

.reloj-btn--start:hover:not(:disabled) {
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.reloj-btn--pause {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: white;
}

.reloj-btn--pause:hover:not(:disabled) {
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
}

.reloj-btn--reset {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
}

.reloj-btn--reset:hover:not(:disabled) {
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
}

.reloj-btn--destroy {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: white;
}

.reloj-btn--destroy:hover:not(:disabled) {
    box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
}

.reloj-btn .material-icons {
    font-size: 1.1rem;
}

.reloj-control__config {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 191, 255, 0.1);
}

.reloj-config-item {
    margin-bottom: 20px;
}

.reloj-config-item:last-child {
    margin-bottom: 0;
}

.reloj-config-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(196, 181, 253, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.reloj-config-label .material-icons {
    font-size: 1.1rem;
    color: #00bfff;
}

.reloj-config-input {
    width: 100%;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: 8px;
    color: #c4b5fd;
    font-size: 1rem;
}

.reloj-config-input:focus {
    outline: none;
    border-color: #00bfff;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

.reloj-config-checkbox {
    margin-right: 10px;
    transform: scale(1.2);
    accent-color: #00bfff;
}

.reloj-config-text {
    color: rgba(196, 181, 253, 0.8);
    font-size: 0.9rem;
}

/* ===================== */
/* HEADERS DE TABS */
/* ===================== */
.lista-tab-header,
.config-tab-header {
    text-align: center;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 128, 255, 0.1) 100%);
    border-radius: 8px;
    border: 1px solid rgba(0, 191, 255, 0.2);
}

.lista-tab-header h3,
.config-tab-header h3 {
    color: #00bfff;
    font-size: 0.95rem;
    margin-bottom: 3px;
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.lista-tab-description,
.config-tab-description {
    color: rgba(196, 181, 253, 0.8);
    font-size: 0.7rem;
    margin: 0;
}

/* ===================== */
/* BOTÓN CERRAR (X) */
/* ===================== */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(244, 67, 54, 0.2);
    border: 2px solid rgba(244, 67, 54, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    color: #f44336;
}

.modal-close-btn:hover {
    background: rgba(244, 67, 54, 0.3);
    border-color: #f44336;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.5);
}

.modal-close-btn .material-icons {
    font-size: 24px;
    transition: all 0.3s ease;
}

.modal-close-btn:hover .material-icons {
    color: #fff;
}


/* ===== ANIMACIONES PARA NOTIFICACIONES ===== */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===== MEDIA QUERIES - RESPONSIVE DESIGN ===== */

/* ===== PANTALLAS EXTRA PEQUEÑAS - MÓVILES PEQUEÑOS (320px) ===== */
@media (max-width: 320px) {

    /* Logo responsive */
    .logo-img {
        max-width: 120px;
    }

    /* Robot responsive */
    .robot-decoration {
        display: none;
        /* Ocultar en móviles muy pequeños */
    }

    /* Layout principal - Filas (arriba y abajo) */
    .main-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Header optimizado */
    .app-container {
        padding: 10px;
    }

    .header-card {
        padding: 15px;
        margin-bottom: 15px;
    }

    .header-title {
        font-size: 1.2rem;
        padding: 10px 20px;
        gap: 8px;
    }

    .header-subtitle {
        font-size: 0.9rem;
    }

    /* Relojes estilo casino - TIEMPO GRANDE */
    .clock-icon {
        width: auto;
        /* 🎰 Sin círculo */
        height: auto;
    }

    .countdown-display {
        font-size: 32px;
        /* 🎰 MUY GRANDE */
        padding: 10px 20px;
    }

    .countdown-display.warning {
        font-size: 36px;
        /* 🎰 Crítico */
    }

    /* Ruleta más pequeña */
    .ruleta-container .ruleta-wrapper {
        width: 250px;
        height: 250px;
        margin: 0 auto;
    }

    .ruleta-wrapper #spinWheel {
        width: 270px;
        height: 270px;
    }

    .ruleta-wrapper canvas#wheel {
        /* width: 250px; - REMOVIDO para evitar conflictos */
        /* height: 250px; - REMOVIDO para evitar conflictos */
    }

    /* Animación Lottie removida */

    /* Botón de ruleta */
    .ruleta-controls button {
        width: 200px;
        height: 45px;
        font-size: 12px;
        padding: 10px 20px;
    }

    /* Orden de columnas - Ruleta arriba, Participantes abajo */
    .participantes-column {
        order: 2;
    }

    .ruleta-column {
        order: 1;
        min-height: auto;
    }

    /* Modales */
    .modal-tres-ganadores__wrap,
    .modal-control-participantes__wrap {
        width: 95%;
        margin: 10px;
        max-height: 90vh;
    }

    .modal-tres-ganadores__title {
        font-size: 1.2rem;
    }

    .modal-btn {
        padding: 10px 15px;
        font-size: 12px;
        min-width: 120px;
    }

    /* Participantes en móvil */
    .participantes-column .participante-item {
        padding: 3px 4px;
        margin-bottom: 4px;
    }

    .participantes-column .participante-numero {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }

    .participantes-column .participante-nombre {
        font-size: 0.8rem;
    }

    .participantes-column .participante-email {
        font-size: 0.65rem;
    }
}

/* ===== MÓVILES PEQUEÑOS (375px) ===== */
@media (max-width: 375px) {
    .header-title {
        font-size: 1.4rem;
        padding: 12px 18px;
    }

    .header-title .logo-img {
        max-width: 70px;
    }

    .clock-icon {
        width: auto;
        /* 🎰 Sin círculo */
        height: auto;
    }

    .countdown-display {
        font-size: 38px;
        /* 🎰 MUY GRANDE */
        padding: 12px 25px;
    }

    .countdown-display.warning {
        font-size: 42px;
        /* 🎰 Crítico */
    }

    .ruleta-container .ruleta-wrapper {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }

    .ruleta-wrapper #spinWheel {
        width: 300px;
        height: 300px;
    }

    .ruleta-wrapper canvas#wheel {
        /* width: 280px; - REMOVIDO para evitar conflictos */
        /* height: 280px; - REMOVIDO para evitar conflictos */
    }

    .ruleta-controls button {
        width: 220px;
        height: 48px;
        font-size: 13px;
    }
}

/* ===== MÓVILES GRANDES (414px) ===== */
@media (max-width: 414px) {

    /* Logo responsive dentro del header */
    .header-title .logo-img {
        max-width: 80px;
    }

    .header-title {
        flex-wrap: wrap;
        gap: 10px;
        padding: 15px 20px;
        justify-content: center;
    }

    .header-title-text {
        flex: 1 1 100%;
        order: 1;
        width: 100%;
    }

    .header-logo {
        order: 0;
    }

    .clock-icon {
        order: 2;
    }

    .logo-img {
        max-width: 140px;
    }

    /* Robot responsive */
    .robot-decoration {
        width: 150px;
        left: -10%;
        bottom: -10px;
    }

    .header-title {
        font-size: 1.6rem;
        padding: 15px 30px;
    }

    .clock-icon {
        width: auto;
        /* 🎰 Sin círculo */
        height: auto;
    }

    .countdown-display {
        font-size: 40px;
        /* 🎰 MUY GRANDE */
        padding: 12px 25px;
    }

    .countdown-display.warning {
        font-size: 44px;
        /* 🎰 Crítico */
    }

    /* ESTILOS DE RULETA REMOVIDOS - DEJAR QUE EL MEDIA QUERY DE 425px LOS MANEJE */

    .ruleta-controls button {
        width: 250px;
        height: 50px;
        font-size: 14px;
    }
}

/* ===== MÓVILES GRANDES Y PHABLETS (480px) ===== */
@media (max-width: 480px) {

    /* 📜 Listas de participantes con scroll en móviles grandes */
    #participantesLista,
    #participantesLista-diccionario {
        max-height: 450px;
        /* 📏 Altura ajustada para móviles grandes */
    }

    /* Layout principal - Filas (arriba y abajo) */
    .main-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Header */
    .app-container {
        padding: 15px;
    }

    .header-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    .header-title {
        font-size: 1.8rem;
        padding: 15px 30px;
        gap: 15px;
    }

    .header-subtitle {
        font-size: 1rem;
    }

    /* Relojes estilo casino - TIEMPO MUY GRANDE */
    .clock-icon {
        width: auto;
        /* 🎰 Sin círculo */
        height: auto;
    }

    .countdown-display {
        font-size: 42px;
        /* 🎰 MUY GRANDE */
        padding: 12px 25px;
    }

    .countdown-display.warning {
        font-size: 46px;
        /* 🎰 Crítico */
    }

    /* Ruleta */
    .ruleta-container .ruleta-wrapper {
        width: 350px;
        height: 350px;
        margin: 0 auto;
    }

    .ruleta-wrapper #spinWheel {
        width: 370px;
        height: 370px;
    }

    .ruleta-wrapper canvas#wheel {
        /* width: 350px; - REMOVIDO para evitar conflictos */
        /* height: 350px; - REMOVIDO para evitar conflictos */
    }

    /* Animación Lottie removida */

    /* Botón */
    .ruleta-controls button {
        width: 280px;
        height: 52px;
        font-size: 15px;
    }

    /* Orden de columnas - Ruleta arriba, Participantes abajo */
    .participantes-column {
        order: 2;
    }

    .ruleta-column {
        order: 1;
        min-height: auto;
    }

    /* Modales */
    .modal-tres-ganadores__wrap,
    .modal-control-participantes__wrap {
        width: 95%;
        margin: 15px;
        max-height: 85vh;
    }

    .modal-tres-ganadores__title {
        font-size: 1.4rem;
    }

    .modal-btn {
        padding: 12px 20px;
        font-size: 14px;
        min-width: 140px;
    }

    /* Participantes */
    .participantes-column .participante-item {
        padding: 4px 6px;
        margin-bottom: 5px;
    }

    .participantes-column .participante-numero {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }

    .participantes-column .participante-nombre {
        font-size: 0.9rem;
    }

    .participantes-column .participante-email {
        font-size: 0.7rem;
    }
}

/* ===== MÓVILES GRANDES (576px) ===== */
@media (max-width: 576px) {

    /* Logo responsive */
    .logo-img {
        max-width: 160px;
    }

    /* Robot responsive */
    .robot-decoration {
        width: 200px;
        left: -12%;
        bottom: -15px;
    }

    .header-title {
        font-size: 2rem;
        padding: 18px 35px;
    }

    .ruleta-wrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto !important;
    }

    #spinWheel {
        width: 100%;
        height: 100%;
    }

    canvas#wheel {
        width: 100%;
        height: 100%;
    }

    /* Animación Lottie removida */

    .ruleta-controls button {
        width: 300px !important;
        height: 54px !important;
        font-size: 16px !important;
    }
}

/* ===== TABLETS VERTICAL (768px) - SIN IMPORTANT ===== */
/* Estrategia: Usar selectores más específicos en lugar de !important */
/* Ejemplo: .app-container .header-title en lugar de .header-title !important */
@media (max-width: 768px) {

    /* 📜 Listas de participantes con scroll en tablets */
    #participantesLista,
    #participantesLista-diccionario {
        max-height: 500px;
        /* 📏 Altura ajustada para tablets */
    }

    .ruleta-container .ruleta-wrapper {
        width: min(80vw, 70vh, 500px);
        /* 🔴 MUCHO MÁS GRANDE para tablets */
        height: min(80vw, 70vh, 500px);
        /* 🔴 MUCHO MÁS GRANDE para tablets */
    }

    /* Logo responsive */
    .logo-img {
        max-width: 180px;
    }

    /* Logo de garantía más pequeño en móviles */
    .subtitle-logo {
        height: 25px;
    }

    /* Subtítulo inline responsive */
    .header-subtitle-inline {
        font-size: 0.7rem;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* Robot responsive */
    .robot-decoration {
        width: 250px;
        left: -13%;
        bottom: -18px;
    }

    /* Layout principal - Filas (arriba y abajo) */
    .app-container .main-layout {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    /* Header */
    .app-container {
        padding: 20px;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .app-container .header-card {
        padding: 25px;
        margin-bottom: 25px;
    }

    .header-title {
        font-size: 3.5rem;
        padding: 30px 50px;
        gap: 30px;
    }

    .app-container .header-subtitle {
        font-size: 2.0rem;
    }

    /* Relojes estilo casino - TIEMPO MUY GRANDE en tablet */
    .app-container .clock-icon {
        width: auto;
        /* 🎰 Sin círculo */
        height: auto;
    }

    .app-container .countdown-display {
        font-size: 52px;
        /* 🎰 MUY GRANDE en tablet */
        padding: 15px 35px;
    }

    .app-container .countdown-display.warning {
        font-size: 58px;
        /* 🎰 Crítico en tablet */
    }

    /* Ruleta - MÁS GRANDE para tablets pero responsive - FORZADO CON !IMPORTANT */
    .ruleta-container .ruleta-wrapper {
        width: 600px;
        height: 600px;
        margin: 0 auto !important;
        max-width: none;
        max-height: none;
        min-width: 600px;
        min-height: 600px;
    }

    .ruleta-container #spinWheel {
        width: 600px;
        height: 600px;
        max-width: none;
        max-height: none;
        min-width: 600px;
        min-height: 600px;
    }

    .ruleta-container canvas#wheel {
        width: 600px;
        height: 600px;
        max-width: none;
        max-height: none;
        min-width: 600px;
        min-height: 600px;
    }

    /* FORZAR TAMAÑO ADICIONAL - SELECTORES MÁS ESPECÍFICOS */
    .app-container .ruleta-container .ruleta-wrapper {
        width: 600px;
        height: 600px;
        max-width: none;
        max-height: none;
    }

    .app-container .ruleta-container #spinWheel {
        width: 600px;
        height: 600px;
        max-width: none;
        max-height: none;
    }

    .app-container .ruleta-container canvas#wheel {
        width: 600px;
        height: 600px;
        max-width: none;
        max-height: none;
    }

    /* Animación Lottie removida */

    /* Botón */
    .ruleta-controls button {
        width: 420px;
        height: 72px;
        font-size: 22px;
    }

    /* Orden ya manejado globalmente en el media query de 1024px */

    /* Modales */
    .modal-tres-ganadores__wrap,
    .modal-control-participantes__wrap {
        width: 90%;
        margin: 20px;
        max-height: 80vh;
    }

    .modal-tres-ganadores .modal-tres-ganadores__title {
        font-size: 2.5rem;
    }

    .modal-tres-ganadores .modal-btn {
        padding: 22px 35px;
        font-size: 20px;
        min-width: 200px;
    }

    /* Participantes */
    .participantes-column .participante-item {
        padding: 12px 15px;
        margin-bottom: 12px;
    }

    .participantes-column .participante-numero {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    .participantes-column .participante-nombre {
        font-size: 1.4rem;
    }

    .participantes-column .participante-email {
        font-size: 1.1rem;
    }
}

/* ===== TABLETS HORIZONTAL Y LAPTOPS PEQUEÑAS (992px) ===== */
@media (max-width: 992px) {

    /* Layout principal - Ya es 1 columna por el media query de 1024px */

    /* Header */
    .header-title {
        font-size: 2.5rem;
        padding: 20px 40px;
    }

    /* Ruleta más pequeña para tablets - ESTILOS REMOVIDOS PARA EVITAR CONFLICTOS */

    /* Animación Lottie removida */

    /* Botón */
    .ruleta-controls button {
        width: 350px !important;
        height: 58px !important;
        font-size: 15px !important;
    }

    /* Participantes más compactos */
    .participantes-column .data-card {
        padding: 15px !important;
    }

    .participante-item {
        padding: 6px 8px !important;
    }

    .participante-numero {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }
}

/* ===== LAPTOPS PEQUEÑAS Y TABLETS GRANDES (1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    /* 📜 Listas de participantes con scroll en tablets grandes */
    #participantesLista,
    #participantesLista-diccionario {
        max-height: 600px;
        /* 📏 Altura ajustada para tablets grandes */
    }

    /* Logo responsive */
    .logo-img {
        max-width: 220px;
    }

    /* Robot responsive */
    .robot-decoration {
        width: 320px;
        left: -14%;
        bottom: -18px;
    }

    /* Layout principal - Ya es 1 columna por el media query de 1024px */

    .wheel-pointer {
        top: -2px;
        /* 🔴 FIJADO al borde superior del contenedor rojo */
    }

    /* Header más compacto */
    .header-title {
        font-size: 2.4rem;
        padding: 20px 35px;
    }

    .header-subtitle {
        font-size: 1.1rem !important;
    }

    /* Relojes estilo casino - TIEMPO MUY GRANDE en 425px */
    .clock-icon {
        width: auto !important;
        /* 🎰 Sin círculo */
        height: auto !important;
    }

    .countdown-display {
        font-size: 36px !important;
        /* 🎰 MUY GRANDE */
        padding: 10px 22px !important;
    }

    .countdown-display.warning {
        font-size: 40px !important;
        /* 🎰 Crítico */
    }

    /* Ruleta más pequeña pero proporcionada */
    .ruleta-wrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    #spinWheel {
        width: 100%;
        height: 100%;
        /* max-width y max-height removidos para no limitar el tamaño */
    }

    canvas#wheel {
        width: 100%;
        height: 100%;
    }

    /* Animación Lottie removida */

    /* Botón más proporcionado */
    .ruleta-controls button {
        width: 320px !important;
        height: 56px !important;
        font-size: 14px !important;
    }

    /* Participantes más compactos */
    .participantes-column .data-card {
        padding: 12px;
    }

    .participante-item {
        padding: 5px 6px !important;
        margin-bottom: 5px !important;
    }

    .participante-numero {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem !important;
    }

    .participante-nombre {
        font-size: 0.85rem !important;
    }

    .participante-email {
        font-size: 0.7rem !important;
    }

    /* Modales ajustados */
    .modal-tres-ganadores__wrap,
    .modal-control-participantes__wrap {
        width: 85% !important;
        margin: 15px auto !important;
        max-height: 85vh !important;
    }

    .modal-tres-ganadores__title {
        font-size: 1.5rem !important;
    }

    .modal-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-width: 140px !important;
    }

    /* Contenedor de la ruleta */
    .ruleta-container {
        padding: 40px !important;
        min-height: 100% !important;
    }

    /* Stats más compactos */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 15px !important;
    }

    .stat-number {
        font-size: 1.8rem !important;
    }

    .stat-label {
        font-size: 0.8rem !important;
    }
}

/* ===== LAPTOPS Y DESKTOPS MEDIANOS (1200px) ===== */
@media (min-width: 1025px) and (max-width: 1200px) {

    /* Layout principal - Mantiene grid de 2 columnas para pantallas grandes */

    /* Header */
    .header-title {
        font-size: 2.6rem;
        padding: 22px 40px;
    }

    .header-subtitle {
        font-size: 1.15rem !important;
    }

    /* Ruleta */
    .ruleta-wrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto !important;
    }

    #spinWheel {
        width: 100%;
        height: 100%;
    }

    canvas#wheel {
        width: 100%;
        height: 100%;
    }

    /* Animación Lottie removida */

    /* Botón */
    .ruleta-controls button {
        width: 350px !important;
        height: 58px !important;
        font-size: 18px !important;
    }

    /* Participantes */
    .participante-item {
        padding: 6px 8px !important;
        margin-bottom: 6px !important;
    }

    .participante-numero {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.85rem !important;
    }

    .participante-nombre {
        font-size: 0.9rem !important;
    }

    .participante-email {
        font-size: 0.75rem !important;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
        gap: 12px !important;
    }

    .stat-number {
        font-size: 2rem !important;
    }

    .stat-label {
        font-size: 0.85rem !important;
    }
}

/* ===== DESKTOPS GRANDES (1440px) ===== */
@media (min-width: 1201px) and (max-width: 1440px) {

    /* 📜 Listas de participantes con scroll en desktops grandes */
    #participantesLista,
    #participantesLista-diccionario {
        max-height: 750px;
        /* 📏 Altura máxima para desktops grandes */
    }

    /* Layout principal - Mantiene grid de 2 columnas para pantallas grandes */

    /* Header */
    .header-title {
        font-size: 2.8rem;
        padding: 24px 45px;
    }

    .header-subtitle {
        font-size: 1.2rem !important;
    }

    /* Ruleta */
    .ruleta-wrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto !important;
    }

    #spinWheel {
        width: 100%;
        height: 100%;
    }

    canvas#wheel {
        width: 100%;
        height: 100%;
    }

    /* Animación Lottie removida */

    /* Botón */
    .ruleta-controls button {
        width: 380px !important;
        height: 60px !important;
        font-size: 19px !important;
    }

    /* Participantes */
    .participante-item {
        padding: 6px 8px !important;
        margin-bottom: 6px !important;
    }

    .participante-numero {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }

    .participante-nombre {
        font-size: 0.95rem !important;
    }

    .participante-email {
        font-size: 0.8rem !important;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 14px !important;
    }

    .stat-number {
        font-size: 2.2rem !important;
    }

    .stat-label {
        font-size: 0.9rem !important;
    }
}

/* ===== PANTALLAS FULL HD (1920px) ===== */
@media (min-width: 1441px) and (max-width: 1920px) {

    /* Layout principal - Mantiene grid de 2 columnas para pantallas grandes */

    /* Ruleta tamaño completo */
    .ruleta-wrapper {
        width: 100%;
        height: 100%;
        margin: 0 auto !important;
    }

    #spinWheel {
        width: 100%;
        height: 100%;
    }

    canvas#wheel {
        width: 100%;
        height: 100%;
    }

    /* Animación Lottie removida */

    /* Botón tamaño completo */
    .ruleta-controls button {
        width: 330px !important;
        height: 58px !important;
        font-size: 16px !important;
    }
}

/* ===== PANTALLAS 4K Y SUPERIORES (1921px+) ===== */
@media (min-width: 1921px) {

    /* 📜 Listas de participantes con scroll en pantallas 4K */
    #participantesLista,
    #participantesLista-diccionario {
        max-height: 900px;
        /* 📏 Altura máxima para 4K - máximo espacio */
    }

    /* Layout principal - Mantiene grid de 2 columnas para pantallas grandes */

    /* Header más grande */
    .header-title {
        font-size: clamp(2.5rem, 3vw, 4rem);
        padding: clamp(20px, 2vw, 40px) clamp(40px, 4vw, 80px);
    }

    /* Ruleta más grande para 4K - DINÁMICA */
    .ruleta-container .ruleta-wrapper {
        width: min(70vw, 65vh, 800px);
        /* 🔴 MUCHO MÁS GRANDE para 4K */
        height: min(70vw, 65vh, 800px);
        /* 🔴 MUCHO MÁS GRANDE para 4K */
    }

    /* Animación Lottie removida */

    /* Botón más grande - responsivo */
    .ruleta-controls button {
        width: clamp(300px, 50%, 500px) !important;
        height: clamp(55px, 8vh, 80px) !important;
        font-size: clamp(18px, 2vw, 28px) !important;
    }

    /* Participantes más grandes - responsivos */
    .participante-item {
        padding: clamp(6px, 1vw, 12px) clamp(8px, 1.5vw, 15px) !important;
        margin-bottom: clamp(6px, 1vh, 12px) !important;
    }

    .participante-numero {
        width: clamp(30px, 3vw, 45px) !important;
        height: clamp(30px, 3vw, 45px) !important;
        font-size: clamp(0.9rem, 1.2vw, 1.3rem) !important;
    }

    .participante-nombre {
        font-size: clamp(1rem, 1.5vw, 1.4rem) !important;
    }

    .participante-email {
        font-size: clamp(0.8rem, 1.2vw, 1.1rem) !important;
    }
}

/* ===== ORIENTACIÓN HORIZONTAL EN MÓVILES ===== */
@media (orientation: landscape) and (max-height: 500px) {

    /* Layout horizontal para móviles - Ya es 1 columna por el media query de 1024px */

    /* Robot más pequeño en landscape */
    .robot-decoration {
        width: 180px;
        left: -10%;
        bottom: -10px;
    }

    /* Header más compacto */
    .header-card {
        padding: 10px;
        margin-bottom: 10px;
    }

    .header-title {
        font-size: 1.5rem;
        padding: 10px 20px;
        gap: 10px;
    }

    .header-subtitle {
        font-size: 0.9rem;
    }

    /* Relojes estilo casino - TIEMPO GRANDE en landscape pequeño */
    .clock-icon {
        width: auto;
        /* 🎰 Sin círculo */
        height: auto;
    }

    .countdown-display {
        font-size: 28px;
        /* 🎰 Grande */
        padding: 8px 18px;
    }

    .countdown-display.warning {
        font-size: 32px;
        /* 🎰 Crítico */
    }

    /* Ruleta más pequeña para landscape - DINÁMICA */
    .ruleta-container .ruleta-wrapper {
        width: min(60vh, 80vw, 400px);
        /* 🔴 MUCHO MÁS GRANDE para landscape */
        height: min(60vh, 80vw, 400px);
        /* 🔴 MUCHO MÁS GRANDE para landscape */
    }

    /* Animación Lottie removida */

    /* Botón más pequeño - responsivo */
    .ruleta-controls button {
        width: clamp(180px, 50vw, 250px) !important;
        height: clamp(35px, 8vh, 50px) !important;
        font-size: clamp(10px, 2.5vw, 14px) !important;
    }

    /* Participantes más compactos - responsivos */
    .participante-item {
        padding: clamp(1px, 0.5vh, 4px) clamp(3px, 1vw, 6px) !important;
        margin-bottom: clamp(2px, 0.5vh, 5px) !important;
    }

    .participante-numero {
        width: clamp(16px, 4vw, 24px) !important;
        height: clamp(16px, 4vw, 24px) !important;
        font-size: clamp(0.5rem, 1.5vw, 0.8rem) !important;
    }

    .participante-nombre {
        font-size: clamp(0.6rem, 2vw, 0.9rem) !important;
    }

    .participante-email {
        font-size: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    }
}

/* ===== DISPOSITIVOS TÁCTILES ===== */
@media (hover: none) and (pointer: coarse) {

    /* Botones más grandes para touch */
    .ruleta-controls button {
        min-height: 48px;
        padding: 12px 24px;
    }

    .modal-btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .admin-btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    /* Hover effects deshabilitados */
    .ruleta-controls button:hover,
    .modal-btn:hover,
    .admin-btn:hover {
        transform: none;
    }
}

/* ===== MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {

    /* Ajustes para modo oscuro si es necesario */
    /* .data-card {
        background: linear-gradient(135deg, rgba(0, 191, 255, 0.08) 0%, rgba(0, 128, 255, 0.08) 100%),
            linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
    } */
}

/* ===== REDUCIR MOVIMIENTO ===== */
@media (prefers-reduced-motion: reduce) {

    /* Deshabilitar animaciones para usuarios que prefieren menos movimiento */
    .animate__animated,
    .animate__pulse,
    .animate__tada,
    .animate__zoomInDown,
    .animate__heartBeat {
        animation: none !important;
    }

    .clock-icon,
    .header-title,
    .ruleta-controls button {
        animation: none !important;
    }

    /* Transiciones más suaves */
    * {
        transition-duration: 0.1s !important;
    }
}

/* ===== CONTRASTE ALTO ===== */
@media (prefers-contrast: high) {

    /* Aumentar contraste para mejor accesibilidad */
    .header-title {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 1);
    }

    .data-card {
        border: 3px solid #00bfff !important;
    }

    .ruleta-controls button {
        border: 4px solid #00bfff !important;
        color: #ffffff !important;
    }
}

/* ===== DISPOSITIVOS ESPECÍFICOS ===== */

/* iPhone SE específico */
@media (max-width: 320px) and (max-height: 568px) {
    .ruleta-wrapper {
        width: 220px;
        height: 220px;
    }

    canvas#wheel {
        width: 220px;
        height: 220px;
    }

    .ruleta-controls button {
        width: 180px !important;
        height: 40px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 425px) {

    /* Botón de música en móviles */
    .btn-control-musica {
        width: 40px;
        height: 40px;
    }

    .btn-control-musica .material-icons {
        font-size: 1.2rem;
    }

    /* 📜 Listas de participantes con scroll en móviles */
    #participantesLista,
    #participantesLista-diccionario {
        max-height: 400px;
        /* 📏 Altura ajustada para móviles */
    }

    /* Robot responsive */
    .robot-decoration {
        width: clamp(120px, 25vw, 180px);
        left: -10%;
        bottom: -12px;
    }

    /* Header más pequeño */
    .header-title {
        font-size: clamp(1rem, 4vw, 1.5rem) !important;
        padding: 10px 20px !important;
    }

    .header-subtitle {
        font-size: clamp(0.8rem, 3vw, 1rem) !important;
    }

    /* Relojes más pequeños */
    .app-container .clock-icon {
        width: auto;
        height: auto;
    }

    .app-container .countdown-display {
        font-size: clamp(10px, 3vw, 14px);
        padding: clamp(2px, 1vw, 4px) clamp(4px, 2vw, 8px);
    }

    /* Ruleta optimizada para móviles pequeños - DINÁMICA */
    .ruleta-container .ruleta-wrapper {
        width: min(85vw, 75vh, 400px);
        /* 🔴 MUCHO MÁS GRANDE para móviles */
        height: min(85vw, 75vh, 400px);
        /* 🔴 MUCHO MÁS GRANDE para móviles */
    }

    /* Botón más pequeño - responsivo */
    .ruleta-controls button {
        width: clamp(220px, 70vw, 320px);
        height: clamp(45px, 12vw, 60px);
        font-size: clamp(11px, 3vw, 15px);
        text-align: center;
    }

    /* Contenedor con menos padding */
    .ruleta-container {
        padding: clamp(10px, 2vh, 20px);
    }

    /* Participantes más compactos */
    .participantes-column .participante-item {
        padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 10px);
        margin-bottom: clamp(4px, 1vw, 8px);
    }

    .participantes-column .participante-numero {
        width: clamp(22px, 6vw, 30px);
        height: clamp(22px, 6vw, 30px);
        font-size: clamp(0.7rem, 2.5vw, 1rem);
    }

    .participantes-column .participante-nombre {
        font-size: clamp(0.85rem, 3vw, 1.1rem);
    }

    .participantes-column .participante-email {
        font-size: clamp(0.7rem, 2.5vw, 0.9rem);
    }
}

/* iPhone 12/13/14 específico */
@media (max-width: 390px) and (max-height: 844px) {
    .ruleta-container .ruleta-wrapper {
        width: min(80vw, 70vh, 350px);
        /* 🔴 MUCHO MÁS GRANDE para iPhone */
        height: min(80vw, 70vh, 350px);
        /* 🔴 MUCHO MÁS GRANDE para iPhone */
    }
}

/* iPad específico */
@media (max-width: 768px) and (max-height: 1024px) {
    /* Layout ya es 1 columna por el media query de 1024px */
    /* ESTILOS DE RULETA REMOVIDOS - DEJAR QUE EL MEDIA QUERY DE 768px LOS MANEJE */
}

/* iPad Pro específico */
@media (max-width: 1024px) and (max-height: 1366px) {
    /* Layout ya es 1 columna por el media query de 1024px */

    .ruleta-wrapper {
        width: 100%;
        height: 100%;
    }

    canvas#wheel {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 768px) {

    /* Botón de música responsive */
    .btn-control-musica {
        width: 45px;
        height: 45px;
    }

    .btn-control-musica .material-icons {
        font-size: 1.3rem;
    }

    /* Animación Lottie */
    .ruleta-container iframe {
        width: 60px !important;
        height: 60px !important;
        right: -80px !important;
    }

    /* Layout general */
    .app-container {
        padding: 16px;
    }

    .header-title {
        /* font-size: 2rem; */
    }

    .button-group {
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Modal de ruleta */
    .rouletteModal__wrap {
        max-width: 90%;
        margin: 20px;
    }

    .rouletteModal__wrap__top {
        height: 300px;
    }

    .rouletteModal__wrap__top canvas {
        width: 300px;
        height: 300px;
    }

    /* Modal de tres ganadores */
    .modal-tres-ganadores__wrap {
        width: 95%;
        max-height: 85vh;
    }

    .modal-tres-ganadores__title {
        font-size: 1.8rem;
    }

    .modal-tres-ganadores__buttons {
        flex-direction: column;
        align-items: center;
    }

    .modal-btn {
        width: 100%;
        max-width: 250px;
    }

    .lista-ganadores-modal {
        max-height: 150px;
    }

    .ganador-modal-item {
        padding: 10px 12px;
    }

    .ganador-modal-nombre {
        font-size: 1rem;
    }

    .ganador-modal-email {
        font-size: 0.8rem;
    }

    /* Modal de participantes */
    .modal-control-participantes__wrap {
        width: 95%;
        max-height: 95vh;
    }

    .modal-control-participantes__title {
        font-size: 1.6rem;
    }

    .modal-control-participantes__stats {
        flex-wrap: wrap;
        gap: 6px;
        padding: 5px 8px;
    }

    .stat-item {
        flex: 1 1 40%;
        min-width: 40%;
    }

    .control-buttons {
        flex-direction: column;
        align-items: center;
    }

    .control-btn {
        width: 100%;
        max-width: 200px;
    }

    .modal-control-participantes__buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Tabs responsivos */
    .modal-control-participantes__tabs {
        flex-direction: column;
        gap: 5px;
    }

    .modal-tab-btn {
        font-size: 0.85rem;
        padding: 10px 15px;
    }

    /* Control de reloj responsivo */
    .reloj-control__buttons {
        flex-direction: column;
        align-items: center;
    }

    .reloj-btn {
        width: 100%;
        max-width: 200px;
        margin-bottom: 10px;
    }

    .reloj-control__status {
        flex-direction: column;
        gap: 15px;
    }

    .lista-participantes-admin {
        min-height: 0;
        max-height: none;
        /* Permitir que use todo el espacio disponible */
    }

    .participante-admin-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .participante-admin-nombre {
        font-size: 0.9rem;
    }

    .participante-admin-email {
        font-size: 0.8rem;
    }

    /* Ruleta y elementos de casino */
    .ruleta-casino-container {
        width: 300px;
        height: 300px;
    }

    .ruleta-casino {
        width: 260px;
        height: 260px;
    }

    .ruleta-segmento .segmento-texto {
        font-size: 10px;
    }

    .ruleta-controls button {
        padding: 15px 30px;
        font-size: 16px;
    }

    .ruleta-wrapper {
        width: 400px;
        height: 400px;
        aspect-ratio: 1 / 1;
    }

    .ruleta-container {
        min-height: 100% !important;
    }

    #spinWheel {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
    }

    canvas#wheel {
        /* width: 400px !important; - REMOVIDO para evitar conflictos */
        /* height: 400px !important; - REMOVIDO para evitar conflictos */
        aspect-ratio: 1 / 1 !important;
    }
}

/* =====================
   MODAL DE VICTORIA ESTILO CASINO
   ===================== */

.modal-victoria {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-victoria.show {
    opacity: 1;
    visibility: visible;
}

.modal-victoria__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%);
    backdrop-filter: blur(5px);
}

.modal-victoria__container {
    position: relative;
    background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
    border-radius: 15px;
    padding: 0;
    max-width: 420px;
    width: 85%;
    box-shadow:
        0 0 50px rgba(255, 215, 0, 0.3),
        inset 0 0 50px rgba(255, 215, 0, 0.1);
    border: 3px solid #ffd700;
    overflow: hidden;
    transform: scale(0.5) rotateX(90deg);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal-victoria.show .modal-victoria__container {
    transform: scale(1) rotateX(0deg);
}

/* Efectos de luces de casino */
.modal-victoria__lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
    animation: casinoLights 3s ease-in-out infinite alternate;
}

@keyframes casinoLights {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.8;
    }
}

.modal-victoria__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 12px;
}

/* Header con efectos */
.modal-victoria__header {
    position: relative;
    margin-bottom: 6px;
}

.modal-victoria__sparkles {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
}

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffd700;
    border-radius: 50%;
    animation: sparkleAnimation 2s ease-in-out infinite;
}

.sparkle-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 30%;
    right: 20%;
    animation-delay: 0.5s;
}

.sparkle-3 {
    bottom: 30%;
    left: 30%;
    animation-delay: 1s;
}

.sparkle-4 {
    bottom: 20%;
    right: 30%;
    animation-delay: 1.5s;
}

@keyframes sparkleAnimation {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-victoria__title {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700, #ff6b6b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: casinoShimmer 2s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    letter-spacing: 2px;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.modal-victoria__subtitle {
    font-size: 1.8rem;
    color: #ffd700;
    margin: 10px 0 0 0;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Tarjeta del ganador */
.modal-victoria__winner-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    padding: 12px;
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}

.modal-victoria__winner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    animation: shine 2s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.modal-victoria__winner-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 20px; */
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.modal-victoria__ticket-image {
    width: 60%;
    height: 100%;
    object-fit: contain;
    animation: ticketFloat 3s ease-in-out infinite, pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9));
}

.avatar-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #1a1a1a;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    animation: avatarGlow 2s ease-in-out infinite alternate;
}

@keyframes avatarGlow {
    0% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    }

    100% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.8);
    }
}

.modal-victoria__winner-info {
    text-align: center;
}

.modal-victoria__winner-name {
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 215, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 75%;
    text-align: center;
    padding: 4px;
    border-radius: 5px;
}

/* 🎯 ESTILO ESPECIAL PARA NOMBRE EN DICCIONARIO - RESALTADO */
.modal-victoria__winner-name.winner-name-diccionario {
    font-size: clamp(1.2rem, 2.5vw, 0.6rem);
    font-weight: 800;
    color: #FFD700; /* 🔴 Color dorado brillante */
    text-shadow: 
        0 0 15px rgba(255, 215, 0, 1), /* Brillo dorado intenso */
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 45px rgba(255, 215, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.9); /* Sombra negra fuerte */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
    padding: 10px 15px;
    border-radius: 12px;
    border: 2px solid #FFD700;
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.8),
        inset 0 0 15px rgba(255, 215, 0, 0.2);
    animation: diccionarioNamePulse 2s ease-in-out infinite alternate;
}

/* Animación de pulso para el nombre del diccionario */
@keyframes diccionarioNamePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.8),
            inset 0 0 20px rgba(255, 215, 0, 0.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 1),
            inset 0 0 30px rgba(255, 215, 0, 0.4);
    }
}

/* 🎯 ESTILO PARA BECA - MANTENER COMO ESTABA */
.modal-victoria__winner-name.winner-name-beca {
    /* Mantiene los estilos base definidos arriba */
}

.modal-victoria__winner-email {
    font-size: 1.1rem;
    color: #ccc;
    margin: 5px 0;
}

/* 🔧 Premio dentro del winner-info (UN SOLO MARCO) */
.modal-victoria__winner-info .modal-victoria__prize-text {
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffd700;
    margin-top: 15px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    letter-spacing: 2px;
    animation: pulse 2s ease-in-out infinite;
}

/* Sección del premio */
.modal-victoria__prize-section {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: 20px;
    /* 🔧 Reducido de 30px a 20px para hacer más compacto */
    margin: 20px 0;
    /* 🔧 Reducido de 30px a 20px para hacer más compacto */
    position: relative;
}

.modal-victoria__prize-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    animation: trophyRotate 3s linear infinite;
}

@keyframes trophyRotate {
    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}

.modal-victoria__prize-text {
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 10px 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
}

.modal-victoria__prize-amount {
    font-size: 1.5rem;
    color: #ffed4e;
    margin: 0;
    font-weight: 600;
}

/* Botón */
.modal-victoria__actions {
    margin-top: 20px;
}

.modal-victoria__btn {
    background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
    color: #1a1a1a;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    transition: all 0.3s ease;
    box-shadow:
        0 6px 20px rgba(255, 215, 0, 0.4),
        inset 0 2px 5px rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-victoria__btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 35px rgba(255, 215, 0, 0.6),
        inset 0 2px 5px rgba(255, 255, 255, 0.4);
}

.modal-victoria__btn:active {
    transform: translateY(-1px);
}

/* Confetis */
.modal-victoria__confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(50vh) rotate(180deg) scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: translateY(100vh) rotate(360deg) scale(0.5);
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .modal-victoria__container {
        margin: 20px;
        padding: 0;
    }

    .modal-victoria__content {
        padding: 15px;
        /* 🔧 Reducido de 30px 20px a 15px para hacer más compacto en móvil */
    }

    .modal-victoria__title {
        font-size: 2.5rem;
        /* 🔧 Reducido de 3rem a 2.5rem para hacer más compacto en móvil */
    }

    .modal-victoria__winner-name {
        font-size: 1.5rem;
    }

    .modal-victoria__prize-text {
        font-size: 1.5rem;
    }
}

/* ===== ESTILOS PARA TABS DE BOOTSTRAP - TEMA CASINO ===== */

/* Contenedor de tabs */
.container-fluid {
    position: relative;
    z-index: 10;
}

/* Barra de navegación de tabs - COMPACTA */
.nav-tabs {
    border-bottom: 2px solid rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg, rgba(10, 10, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
    padding: 5px 15px 0 15px;
    border-radius: 10px 10px 0 0;
    box-shadow:
        0 -3px 15px rgba(0, 191, 255, 0.3),
        inset 0 0 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

/* Items de navegación */
.nav-tabs .nav-item {
    margin-bottom: -2px;
    margin-right: 6px;
}

/* Links de tabs (botones de navegación) - COMPACTOS */
.nav-tabs .nav-link {
    color: #00bfff;
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.9) 0%, rgba(10, 10, 46, 0.9) 100%);
    border: 2px solid rgba(0, 191, 255, 0.3);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

/* Efecto de brillo deslizante al hover */
.nav-tabs .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(0, 191, 255, 0.3),
            transparent);
    transition: left 0.5s ease;
}

.nav-tabs .nav-link:hover::before {
    left: 100%;
}

/* Hover en tabs */
.nav-tabs .nav-link:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 128, 255, 0.5) 0%, rgba(0, 191, 255, 0.4) 100%);
    border-color: rgba(0, 191, 255, 0.6);
    transform: translateY(-2px);
    box-shadow:
        0 4px 15px rgba(0, 191, 255, 0.4),
        inset 0 0 15px rgba(0, 191, 255, 0.1);
}

/* Tab activo - estilo dorado brillante COMPACTO */
.nav-tabs .nav-link.active {
    color: #1a1a1a;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    border-color: rgba(255, 215, 0, 0.8);
    border-bottom: 2px solid transparent;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(255, 215, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    text-shadow:
        0 0 20px rgba(255, 215, 0, 1),
        0 2px 4px rgba(0, 0, 0, 0.3);
    animation: tabActiveGlow 2s ease-in-out infinite alternate;
    transform: translateY(-3px);
}

/* Animación de pulso para el tab activo */
@keyframes tabActiveGlow {
    0% {
        box-shadow:
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 40px rgba(255, 215, 0, 0.4),
            inset 0 0 20px rgba(255, 255, 255, 0.3);
    }

    100% {
        box-shadow:
            0 0 40px rgba(255, 215, 0, 0.8),
            0 0 80px rgba(255, 215, 0, 0.6),
            inset 0 0 40px rgba(255, 255, 255, 0.4);
    }
}

/* Línea inferior dorada en tab activo */
.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* Contenedor del contenido - SOLO borde y sombra */
.tab-content {
    border: 2px solid rgba(0, 191, 255, 0.3);
    border-top: none;
    border-radius: 0 0 15px 15px;
    padding: 20px 15px;
    box-shadow:
        0 10px 30px rgba(0, 191, 255, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Responsive para tablets */
@media (max-width: 768px) {
    .nav-tabs {
        padding: 8px 15px 0 15px;
    }

    .nav-tabs .nav-item {
        margin-right: 5px;
    }

    .nav-tabs .nav-link {
        padding: 12px 25px;
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .tab-content {
        padding: 15px 10px;
    }
}

/* Responsive para móviles */
@media (max-width: 576px) {
    .nav-tabs {
        padding: 5px 10px 0 10px;
    }

    .nav-tabs .nav-item {
        margin-right: 3px;
        flex: 1;
    }

    .nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }

    .tab-content {
        padding: 10px 5px;
    }
}

/* ===== ESTILOS PARA RULETA Y BOLETO DEL DICCIONARIO ===== */

/* Aplicar mismos estilos de spinWheel al diccionario - DINÁMICO */
#spinWheel-diccionario {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: visible !important;
    /* 🔴 MISMOS ESTILOS QUE BECAS para mantener consistencia */
}

/* Puntero del diccionario */
#spinWheel-diccionario::after {
    /* content: ""; */
    position: absolute;
    top: 0px;
    left: calc(50% - 20px);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid #feeb69;
    -webkit-filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, .7));
    filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, .7));
}

/* Boleto dorado central del diccionario */
#spin-diccionario {
    font: 1.1em/0 "Lato", sans-serif;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(60px, 22%, 180px);
    height: clamp(60px, 22%, 180px);
    pointer-events: auto;
    background: transparent;
    color: #fff;
    border-radius: 50%;
    animation: ticketFloat 3s ease-in-out infinite, pulse 2s ease-in-out infinite;
}

#spin-diccionario:hover {
    transform: scale(1.1);
}

#spin-diccionario:active {
    transform: scale(1.03);
}

#spin-diccionario img {
    border-radius: 50%;
    transition: transform 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#spin-diccionario:hover img {
    transform: scale(1.05);
}

/* Canvas del diccionario - se ajusta dinámicamente igual que el de becas */
.ruleta-wrapper canvas#wheel-diccionario {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ===== AJUSTES RESPONSIVOS PARA IMAGEN DEL TICKET EN MODAL ===== */
@media (max-width: 768px) {
    .modal-victoria__winner-avatar {
        width: 90%;
        /* 🔧 Usar todo el ancho disponible en tablet */
        max-width: 350px;
        height: 180px;
        /* 🔧 Proporción horizontal */
    }

    .modal-victoria__winner-name {
        font-size: 1.3rem;
    }
    
    /* Ajustar nombre de diccionario en tablet */
    .modal-victoria__winner-name.winner-name-diccionario {
        font-size: 1.4rem;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .modal-victoria__winner-avatar {
        width: 90%;
        /* 🔧 Usar todo el ancho disponible en móvil */
        max-width: 280px;
        height: 150px;
        /* 🔧 Proporción horizontal */
    }

    .modal-victoria__winner-name {
        font-size: 1rem;
        letter-spacing: 1px;
    }
    
    /* Ajustar nombre de diccionario en móvil */
    .modal-victoria__winner-name.winner-name-diccionario {
        font-size: 1.1rem;
        padding: 6px 10px;
    }
}