.card {
  transition: all 0.3s ease;
  border-left: 5px solid #ffcc00 !important;
  border-right: 0.1rem solid #ffcc00 !important;
  border-top: 0.1rem solid #ffcc00 !important;
  border-bottom: 0.1rem solid #ffcc00 !important;
  border-radius: 10px;
  background-color: #000000 !important;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.4) !important;
  background-color: #1a1a1a !important;
}

.text-warning {
  color: #ffcc00 !important;
}

.italic {
  font-style: italic;
}

.card-title {
  color: #ffcc00 !important;
  font-family: 'ABeeZee';
  font-weight: 800;
  letter-spacing: 1px;
}

.nombre-dj {
  color: #ffffff;
  font-family: 'ABeeZee';
  background-color: #dc3545;
  font-size: 1.0rem;
  font-weight: 800;
  letter-spacing: 1px;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 50px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.resena-dj {
  color: #adadad;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 1px;
  display: inline-block;
  padding: 0px 0px 8px 15px;
  text-shadow: 1px 1px 2px rgba(255,0,0,0.5);
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  line-height: 1.2 !important;
}

.ql-editor {
  white-space: pre-wrap !important;
}

.ql-editor p {
  margin-bottom: 0px !important;
}

/* --- REGLA @MEDIA PARA MÓVILES --- */

@media (max-width: 576px) {
  .nombre-dj {
    font-size: 1rem;
    padding: 4px 12px;
  }
}

@media (max-width: 576px) {
  .resena-dj {
    font-size: 1rem;
  }
}

/* --- REGLA PARA ESCRITORIO --- */

@media (min-width: 577px) {
  .nombre-dj {
    font-size: 1rem;
  }
}

/* Estilo responsivo para la foto del DJ */

.dj-photo-responsive {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* --- REGLA @MEDIA PARA MÓVILES (Menos de 768px) --- */

@media (max-width: 767px) {
  .dj-photo-responsive {
    height: 250px;
    object-fit: contain;
    border-bottom: 4px solid #ffcc00;
    cursor: pointer;
  }
}

/* --- REGLA @MEDIA PARA ESCRITORIO (768px o más) --- */

@media (min-width: 768px) {
  .dj-photo-responsive {
    aspect-ratio: 1/1;
    padding: 0;
    margin: 1rem;
    border: 4px solid #ffcc00;
    border-radius: 50% !important;
  }
}

/* Unificamos el peso de los horarios */

.badge.fs-5 {
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
}

/* Regla para que en celulares no se amontonen */

@media (max-width: 576px) {
  .badge.fs-5 {
    font-size: 1rem !important;
    width: 100%;
    justify-content: center;
  }
}

/* Ajuste de los controles del carrusel para que no tapen el contenido */

.carousel-control-prev, .carousel-control-next {
  width: 5%;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8));
}

/* Altura mínima para que el carrusel sea estable */

.carousel-inner {
  min-height: 400px;
}

/* Efecto de transición suave */

.carousel-item {
  transition: transform .6s ease-in-out, opacity .6s;
}

@media (max-width: 767px) {
  .carousel-inner {
    min-height: 600px;
  }
}

/* Animación de pulso de neón */

/* 1. Permitimos que el brillo salga del contenedor */

#contenedor-programacion {
  overflow: visible !important;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* 2. Definimos la animación de Neón Retro */

@keyframes neon-retro {
  0% {
    box-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00;
  }
  50% {
    box-shadow: 0 0 25px #ffcc00, 0 0 45px #ff3300;
  }
  100% {
    box-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00;
  }
}

/* 3. Aplicamos la clase a la tarjeta */

.programa-neon {
  border: 2px solid #ffcc00 !important;
  animation: neon-retro 2s infinite ease-in-out;
  margin: 10px auto !important;
  transition: transform 0.3s;
}

/* 4. IMPORTANTE: Quitar el recorte interno de la tarjeta */

.card.programa-neon {
  overflow: visible !important;
}

/* Animación de parpadeo (Blink) */

@keyframes parpadeo-radio {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.blink {
  animation: parpadeo-radio 1s linear infinite;
  letter-spacing: 1px;
  font-weight: bold;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 8px #ff0000;
}

/* Opcional: Hacer que el icono del radio también resalte */

.blink i {
  margin-right: 5px;
  color: #fff;
}

/* 1. Eliminamos el margen de los párrafos que están dentro de la reseña */

.resena-dj p {
  margin-bottom: 5px !important;
  margin-top: 0 !important;
}

/* 2. Eliminamos el espacio extra del primer párrafo para que no se separe del título */

.resena-dj p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. Si Quill insertó etiquetas <p> vacías, las ocultamos */

.resena-dj p:empty {
  display: none;
}

/* Efecto hover en la foto del DJ */

.dj-photo-responsive {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.dj-photo-responsive:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* Fondo oscuro detrás del modal */

#fotoModal .modal-backdrop {
  background-color: rgba(0, 0, 0, 1);
}

/* --- EFECTO DE ZOOM LENTO AL ABRIR --- */

/* 1. Estado inicial: Oculto, transparente y un poco más pequeño */

.modal.fade .modal-dialog {
  transition: transform 0.6s ease-out, opacity 0.6s ease-out !important;
  transform: scale(0.8);
  opacity: 0;
}

/* 2. Estado final (cuando el modal se muestra): Tamaño real y visible */

.modal.show .modal-dialog {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* --- EFECTO DE FADE LENTO AL CERRAR --- */

/* Forzamos que la animación de cierre dure lo mismo (0.6s) */

.modal.fade {
  transition: opacity 0.6s ease-out !important;
}