/* Modal principal de la radio */
body.modal-abierto {
  overflow: hidden;
}

.modalR {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.modalR-contenido {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 90%;
  width: 95%;
  min-height: 90vh;
  /* Para que ocupe casi toda la pantalla */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 20px auto;
  /* Espaciado vertical en móvil */
}

/* Botón estilo general */
.btn-ver-merchR {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

.btn-ver-merchR:hover {
  background: #218838;
}

.btn-cerrar-modalR {
  background: #dc3545;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 240%;
}

.btn-cerrar-modalR:hover {
  background: #c82333;
}

/* Grid para productos de la radio */
.productosR {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Ajustado para pantallas pequeñas */
  gap: 16px;
  margin-top: 20px;
}

.producto-cardR {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background-color: #f9f9f9;
  transition: transform 0.2s ease-in-out;
}

.producto-cardR:hover {
  transform: translateY(-5px);
}

.producto-cardR img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.producto-cardR h3 {
  font-size: 16px;
  /* Tamaño reducido para móvil */
  font-weight: bold;
  color: #333;
  margin: 10px 0;
}

.producto-cardR p {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

.producto-cardR p.precioR {
  font-size: 16px;
  font-weight: bold;
  color: #007bff;
  margin: 10px 0;
}

.producto-cardR button {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 15px;
}

.producto-cardR button:hover {
  background: #0056b3;
}

/* Modal de detalles del producto */
.modalRDetalle {
  display: none;
  position: fixed;
  z-index: 1100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.modalRDetalle-contenido {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 95%;
  /* Más ajustado para dispositivos móviles */
  width: 90%;
  /* Mejor adaptado a pantallas pequeñas */
  text-align: center;
  margin: 20px auto;
}

.modalRDetalle img {
  max-width: 75%;
  border-radius: 8px;
  margin-bottom: 20px;
}

.modalRDetalle h3 {
  font-size: 18px;
  /* Tamaño reducido */
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.modalRDetalle p {
  font-size: 14px;
  /* Ajustado para dispositivos móviles */
  color: #666;
  margin: 5px 0;
}

.modalRDetalle a {
  display: inline-block;
  background: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 15px;
}

.modalRDetalle a:hover {
  background: #0056b3;
}

/* Media Queries para pantallas más pequeñas */
@media (max-width: 480px) {

  .modalR-contenido,
  .modalRDetalle-contenido {
    padding: 15px;
  }

  .producto-cardR {
    padding: 10px;
  }

  .producto-cardR h3 {
    font-size: 14px;
  }

  .producto-cardR p {
    font-size: 12px;
  }

  .producto-cardR button {
    padding: 8px 16px;
  }
}