/* ── Sección de cupones: override a tema oscuro VIBEZ ── */
.seccion-detalle {
    background: #0d0a18 !important;
    border: 1px solid rgba(245,241,234,0.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.seccion-titulo {
    color: #f5f1ea !important;
    border-bottom-color: rgba(245,241,234,0.10) !important;
}
/* Textos con clases text-navy/* se convierten en texto claro */
body [class*="text-navy"] { color: rgba(245,241,234,0.75) !important; }

/* Botón favorito — estado activo (rojo) */
#btn-favorito-detalle.activo {
    background: #f43f5e !important;
    border-color: #f43f5e !important;
    color: #ffffff !important;
}

/* Mapa Leaflet */
#mapa-evento { z-index: 1; }

/* ─── Layout responsive de detalle ──────────────────────────────
   En desktop: 2 columnas (contenido | panel de compra sticky).
   En móvil: 1 columna, el panel de compra sube al principio.
─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .detalle-grid {
        grid-template-columns: 1fr !important;
    }
    /* El panel de compra pasa a la parte superior en móvil */
    .detalle-col-derecha {
        position: static !important;
        order: -1;
    }
}

@media (max-width: 600px) {
    /* Reducir padding del hero y cuerpo en móvil */
    .detalle-grid {
        gap: 1.25rem !important;
    }
}