/* ==========================================================================
   ESTILOS PREMIUM EN MODO NOCTURNO: SELECCIÓN ULTRA NOTORIA
   ========================================================================== */

/* Animación de pulso sutil para los elementos activos */
@keyframes neonPulse {
    0% { box-shadow: 0 0 10px rgba(192, 132, 255, 0.5), 0 0 20px rgba(255, 111, 181, 0.3); }
    50% { box-shadow: 0 0 20px rgba(192, 132, 255, 0.8), 0 0 35px rgba(255, 111, 181, 0.6); }
    100% { box-shadow: 0 0 10px rgba(192, 132, 255, 0.5), 0 0 20px rgba(255, 111, 181, 0.3); }
}

/* Transición suave para todos los elementos interactivos */
.grid-opciones .opcion, 
.calendario .dia, 
.horas-grid .hora,
.cantidad-ret {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
}

/* --------------------------------------------------------------------------
   1. TARJETAS DE OPCIONES ACTIVAS (Técnicas, Formas, Longitudes, Retiros)
   -------------------------------------------------------------------------- */
.grid-opciones .opcion.activa {
    background: #2d1b4e !important; /* Fondo violeta oscuro profundo para contraste */
    border: 3px solid #ff6fb5 !important; /* Borde rosa neón grueso */
    transform: scale(1.06) translateY(-4px) !important; /* Crece y se eleva más */
    animation: neonPulse 2s infinite ease-in-out !important; /* Efecto de brillo palpitante */
    z-index: 10;
}

/* Texto dentro de la tarjeta activa */
.grid-opciones .opcion.activa div {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* Miniatura/Imagen dentro de la tarjeta activa */
.grid-opciones .opcion.activa img {
    border: 3px solid #9b59ff !important; /* Contorno morado vibrante en la foto */
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(155, 89, 255, 0.5) !important;
}

/* --------------------------------------------------------------------------
   2. BOTONES DE CANTIDAD DE RETIRO ACTIVOS
   -------------------------------------------------------------------------- */
.grid-opciones .cantidad-ret.activa {
    background: linear-gradient(135deg, #ff6fb5, #9b59ff) !important; /* Gradante sólido brillante */
    color: #ffffff !important;
    font-weight: 800 !important;
    transform: scale(1.1) !important; /* Mayor escala para destacar */
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 111, 181, 0.7) !important;
}

.grid-opciones .cantidad-ret.activa span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   3. DÍAS ACTIVOS / SELECCIONADOS EN EL CALENDARIO
   -------------------------------------------------------------------------- */
.calendario .dia.activo {
    background: #ff6fb5 !important; /* Color rosa sólido ultra llamativo */
    color: #ffffff !important;
    font-weight: 800 !important;
    transform: scale(1.15) !important; /* Destaca por sobre los demás días */
    border: 2px solid #ffffff !important; /* Anillo blanco de confirmación */
    box-shadow: 0 0 18px #ff6fb5, 0 0 30px rgba(155, 89, 255, 0.5) !important; /* Doble destello */
    z-index: 5;
}

/* --------------------------------------------------------------------------
   4. BLOQUES DE HORAS ACTIVAS
   -------------------------------------------------------------------------- */
.horas-grid .hora.activa {
    background: linear-gradient(135deg, #9b59ff, #c084ff) !important; /* Gradante morado imperial */
    color: #ffffff !important;
    font-weight: 700 !important;
    transform: scale(1.08) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 20px rgba(155, 89, 255, 0.8) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}