/* Correcciones para el calendario */

/* Asegurar que el calendario aparezca en la posición correcta y con buen área de toque */
.date-picker-calendar {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: min(420px, calc(100vw - 24px)); /* Mantener margen seguro de 12px por lado */
  background: #1a0a30; /* Fondo completamente opaco */
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px; /* Un poco más de padding para separar la grilla de los bordes */
  z-index: 99999; /* Valor extremadamente alto para estar por encima de todo */
  display: none;
  animation: datepickerFadeIn 0.2s ease;
  backdrop-filter: none; /* Asegurar que no haya efecto de desenfoque */
  -webkit-backdrop-filter: none; /* Para Safari */
  touch-action: manipulation; /* Mejor respuesta a taps */
  user-select: none; /* Evitar selección accidental de texto al tocar */
}

/* Versión para estudiantes */
body.student-mode .date-picker-calendar {
  background: #1a3b2a; /* Fondo verde oscuro opaco para estudiantes */
}

/* Asegurar que el calendario no se superponga con otros elementos */
.register-form, .register-form-fields {
  position: relative;
  z-index: 1;
}

/* Separar la grilla de los bordes para mejorar taps en las orillas */
.calendar-grid {
  padding: 0 10px; /* Más separación lateral para mejorar los taps de la primera/última columna */
  gap: 8px; /* Aumenta la separación entre días para ampliar el área clicable */
}

/* Afinar el tap highlight para feedback sutil en móviles */
.day {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
  user-select: none;           /* Evita selección de texto al tocar */
  pointer-events: auto;        /* Asegura que reciba el tap */
  touch-action: manipulation;  /* Mejora la respuesta al tap */
}

/* Aumentar el área mínima clicable de cada día (especialmente útil para los bordes) */
.calendar-grid .day {
  min-width: 36px;
  min-height: 36px;
}

@media (max-width: 360px) {
  .calendar-grid .day {
    min-width: 34px;
    min-height: 34px;
  }
}

/* Ocultar elementos que puedan aparecer detrás del calendario */
.date-picker-calendar.active + .register-footer,
.date-picker-calendar.active ~ .register-footer-mobile {
  visibility: hidden;
}

/* Mejorar la visibilidad de los días seleccionados */
.day.selected {
  background: linear-gradient(135deg, #4b0082, #9370DB);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(147, 112, 219, 0.7);
  transform: scale(1.1);
}

body.student-mode .day.selected {
  background: linear-gradient(135deg, #2d6a4f, #52b788);
  box-shadow: 0 0 15px rgba(82, 183, 136, 0.7);
}

/* Mejorar la visibilidad de los botones de navegación */
.month-nav {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.month-nav:hover {
  background: rgba(147, 112, 219, 0.6);
  transform: scale(1.1);
}

body.student-mode .month-nav:hover {
  background: rgba(82, 183, 136, 0.6);
}

/* Asegurar que el texto "Iniciar Sesión" no aparezca detrás del calendario */
.register-footer, .register-footer-mobile {
  position: relative;
  z-index: 1;
}

/* Asegurar que los indicadores de pasos estén por debajo del calendario */
.steps-indicator, .step, .step-line {
  position: relative;
  z-index: 1 !important; /* Forzar un z-index bajo */
}

/* Asegurar que el calendario esté por encima de todo */
.date-picker-container {
  position: relative;
  z-index: 100000 !important; /* Valor extremadamente alto */
}

/* Animación específica para el calendario manteniendo el centrado horizontal */
@keyframes datepickerFadeIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}