/* ========================================

   ESTILOS DE MODALES COBAQROO 45 ANIVERSARIO

   ======================================== */



/* Modal específico para el programa de actividades */

.program-modal-content {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  background: var(--color-bg-primary);

  border-radius: 20px 20px 0 0;

  padding: 30px 20px;

  transform: translateY(100%);

  transition: transform 0.3s ease;

  z-index: 10000;

  max-height: 100vh; /* Altura al 100% de la pantalla */

  overflow-y: auto; /* Permitir scroll interno */

}



.program-modal-content.active {

  transform: translateY(0);

}



/* Estilos para el contenido del modal */

.program-modal-content .space-y-4 {

  max-height: calc(100vh - 120px); /* Altura máxima menos el header */

  overflow-y: auto; /* Permitir scroll interno */

  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */

  scrollbar-width: none; /* Ocultar scrollbar en Firefox */

  -ms-overflow-style: none; /* Ocultar scrollbar en IE/Edge */

}



/* Ocultar scrollbar en WebKit (Chrome, Safari, Edge) */

.program-modal-content .space-y-4::-webkit-scrollbar {

  display: none;

}



/* Flecha indicadora de scroll */

.scroll-indicator {

  position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(0, 0, 0, 0.6);

  color: white;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  opacity: 1;

  transition: opacity 0.3s ease;

  pointer-events: none;

  z-index: 10001;

}



.scroll-indicator.hidden {

  opacity: 0;

}



/* Animación de rebote para la flecha */

@keyframes bounce {

  0%, 20%, 50%, 80%, 100% {

    transform: translateX(-50%) translateY(0);

  }

  40% {

    transform: translateX(-50%) translateY(-5px);

  }

  60% {

    transform: translateX(-50%) translateY(-3px);

  }

}



.scroll-indicator {

  animation: bounce 2s infinite;

}



/* Estilos específicos para modales con fondo especial */

.program-modal-content[style*="background: #F5F0F8"] {

  background: #F5F0F8 !important;

}



/* Estilos para FAQ */

.faq-item {

  border: 1px solid rgba(224, 64, 251, 0.2);

  border-radius: 12px;

  overflow: hidden;

  margin-bottom: 8px;

}



.faq-question {

  width: 100%;

  padding: 12px 16px;

  text-align: left;

  background: rgba(255, 255, 255, 0.5);

  transition: background-color 0.2s ease;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border: none;

  cursor: pointer;

}



.faq-question:hover {

  background: rgba(255, 255, 255, 0.7);

}



.faq-question span {

  font-weight: 600;

  color: #332B47;

  font-size: 14px;

}



.faq-question i {

  color: #E040FB;

  transition: transform 0.2s ease;

  font-size: 14px;

}



.faq-question i.rotate-180 {

  transform: rotate(180deg);

}



.faq-answer {

  padding: 12px 16px;

  background: rgba(255, 255, 255, 0.3);

  display: none;

  transition: all 0.3s ease;

}



.faq-answer.show {

  display: block;

}



.faq-answer p {

  color: #5A526B;

  font-size: 14px;

  line-height: 1.5;

  margin: 0;

}



/* Estilos para tablas en modales */

.modal-table {

  width: 100%;

  font-size: 14px;

  border-collapse: collapse;

}



.modal-table thead {

  background: #2d2c4e;

  color: white;

}



.modal-table th {

  padding: 12px 16px;

  text-align: left;

  font-weight: 600;

}



.modal-table tbody tr {

  border-bottom: 1px solid #f0f0f0;

}



.modal-table tbody tr:hover {

  background: #f8f9fa;

}



.modal-table td {

  padding: 12px 16px;

  vertical-align: top;

}



.modal-table .activity-icon {

  display: flex;

  align-items: center;

  margin-right: 8px;

}



.modal-table .activity-icon i {

  font-size: 18px;

  margin-right: 8px;

}



/* Estilos para botones en modales */

.modal-btn {

  background: #E040FB;

  color: white;

  padding: 8px 24px;

  border-radius: 25px;

  font-weight: bold;

  box-shadow: 0 4px 15px rgba(224, 64, 251, 0.3);

  transition: all 0.3s ease;

  transform: scale(1);

  font-size: 14px;

  border: none;

  cursor: pointer;

}



.modal-btn:hover {

  background: #D63384;

  transform: scale(1.05);

}



/* Estilos para información de pago */

.payment-info {

  background: rgba(255, 255, 255, 0.5);

  border-radius: 12px;

  padding: 16px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.payment-info ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.payment-info li {

  display: flex;

  align-items: center;

  margin-bottom: 8px;

  color: #5A526B;

  font-size: 14px;

}



.payment-info li:before {

  content: '';

  width: 6px;

  height: 6px;

  background: #E040FB;

  border-radius: 50%;

  margin-right: 8px;

  flex-shrink: 0;

}



.payment-info .highlight {

  font-weight: bold;

  color: #332B47;

}