/* ============================================================================
   ORIÓN · FORMULARIO DE CLASE DE CORTESÍA
   ----------------------------------------------------------------------------
   Los colores NO se escriben aquí. Salen del tema, que se configura en
   config/estilos_orion.php.

   Esta pantalla la ve gente de fuera del club: es su primer contacto. Por eso
   el formulario está partido en pasos numerados en vez de ser una lista larga
   de campos, y cada paso se enciende cuando el anterior está resuelto.
   ============================================================================ */


/* ============================================================================
   1. ESTRUCTURA
   ============================================================================ */

body {
  min-height: 100vh;
  padding: 0 0 40px;
}

.cort-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Cabecera ------------------------------------------------------------- */

.cort-hero {
  padding: 28px 0 22px;
  text-align: center;
}

.cort-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45));
}

.cort-hero h1 {
  margin: 0 0 6px;
  color: var(--o-text);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: .02em;
}

.cort-hero p {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--o-text-muted);
  font-size: .95rem;
  line-height: 1.55;
}

.cort-cupo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 14px;
  border-radius: var(--o-radius-pill);
  border: 1px solid var(--o-ok-border);
  background: var(--o-ok-bg);
  color: var(--o-ok);
  font-size: .84rem;
  font-weight: 700;
}


/* ============================================================================
   2. PASOS
   ----------------------------------------------------------------------------
   Cada bloque del formulario es un paso numerado. Los que todavía no tocan se
   ven apagados: así se entiende de un vistazo por dónde va uno, en vez de
   enfrentarse a quince campos a la vez.
   ============================================================================ */

.cort-paso {
  position: relative;
  margin-bottom: 16px;
  padding: 20px 20px 20px 22px;
  border: 1px solid var(--o-border);
  border-left: 3px solid var(--o-border-strong);
  border-radius: var(--o-radius);
  background: var(--o-surface-1);
  box-shadow: var(--o-shadow-sm);
  transition: border-color .25s ease, opacity .25s ease;
}

/* Paso pendiente: se atenúa, pero NUNCA se bloquea. Si alguien quiere
   rellenar en otro orden, puede. */
.cort-paso.esta-pendiente {
  opacity: .55;
}

.cort-paso.esta-activo {
  border-left-color: var(--o-accent);
  opacity: 1;
}

.cort-paso.esta-listo {
  border-left-color: var(--o-ok);
  opacity: 1;
}

.cort-paso-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cort-num {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--o-border-strong);
  background: var(--o-surface-3);
  color: var(--o-text-muted);
  font-weight: 800;
  font-size: .95rem;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.cort-paso.esta-activo .cort-num {
  border-color: var(--o-accent);
  background: var(--o-warn-bg);
  color: var(--o-accent);
}

.cort-paso.esta-listo .cort-num {
  border-color: var(--o-ok);
  background: var(--o-ok);
  color: var(--o-ink);
}

/* El número se cambia por un visto cuando el paso queda resuelto */
.cort-paso.esta-listo .cort-num::after {
  content: "✓";
}

.cort-paso.esta-listo .cort-num span {
  display: none;
}

.cort-paso-titulo {
  margin: 0;
  color: var(--o-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.cort-paso-ayuda {
  margin: 2px 0 0;
  color: var(--o-text-muted);
  font-size: .85rem;
  line-height: 1.45;
}


/* ============================================================================
   3. CAMPOS
   ============================================================================ */

.form-label {
  margin-bottom: .35rem;
  color: var(--o-text-soft);
  font-size: .85rem;
  font-weight: 600;
}

.form-control,
.form-select {
  min-height: 48px;
  border-radius: var(--o-radius-sm) !important;
  border: 1px solid var(--o-border-strong) !important;
  background: var(--o-surface-3) !important;
  color: var(--o-text) !important;
  font-size: 1rem;
}

.form-control::placeholder {
  color: var(--o-text-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--o-accent) !important;
  box-shadow: var(--o-focus-ring) !important;
}

/* En Windows el desplegable nativo se pinta con los colores del sistema y las
   opciones salían blancas sobre blanco. */
.form-select option {
  background: var(--o-surface-2);
  color: var(--o-text);
}

.form-text,
.muted {
  color: var(--o-text-muted) !important;
  font-size: .84rem;
}

.hidden {
  display: none !important;
}

.form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: .18em;
  border: 1px solid var(--o-border-strong);
  background-color: var(--o-surface-3);
}

.form-check-input:checked {
  background-color: var(--o-ok);
  border-color: var(--o-ok);
}

.form-check-label {
  color: var(--o-text-soft);
  padding-left: .25rem;
}

.cort-edad {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: var(--o-radius-pill);
  border: 1px solid var(--o-border);
  background: var(--o-surface-2);
  color: var(--o-text-soft);
  font-size: .88rem;
  font-weight: 600;
}

.cort-edad.tiene-valor {
  border-color: var(--o-ok-border);
  background: var(--o-ok-bg);
  color: var(--o-ok);
}


/* ============================================================================
   4. TARJETAS DE HORARIO
   Las genera el JavaScript; las clases tienen que llamarse igual.
   ============================================================================ */

.slot-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.slot {
  position: relative;
  display: block;
  padding: 14px;
  border: 1px solid var(--o-border);
  border-radius: var(--o-radius-sm);
  background: var(--o-surface-2);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.slot:hover {
  transform: translateY(-2px);
  border-color: var(--o-accent);
  background: var(--o-surface-3);
}

.slot:focus-within {
  border-color: var(--o-accent);
  box-shadow: var(--o-focus-ring);
}

/* El radio real se esconde: la tarjeta entera hace de botón */
.slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slot .topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--o-text);
  font-weight: 700;
  font-size: .95rem;
}

.slot .meta {
  margin-top: 6px;
  color: var(--o-text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.slot.is-selected {
  border-color: var(--o-ok);
  background: var(--o-ok-bg);
}

.slot.is-selected::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--o-ok);
  font-weight: 800;
}

.slot.is-selected .topline {
  color: var(--o-ok);
}

/* Lleno: se ve, pero no se puede elegir */
.slot.is-full {
  opacity: .45;
  cursor: not-allowed;
  border-style: dashed;
}

.slot.is-full:hover {
  transform: none;
  border-color: var(--o-border);
  background: var(--o-surface-2);
}

.badge-cupo {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--o-radius-pill);
  border: 1px solid var(--o-border);
  background: var(--o-surface-3);
  color: var(--o-text-soft);
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.slot.is-full .badge-cupo {
  border-color: var(--o-danger-border);
  background: var(--o-danger-bg);
  color: var(--o-danger);
}

/* Barra de ocupación */
.cupo-bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--o-surface-3);
  overflow: hidden;
}

.cupo-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--o-ok);
  transition: width .35s ease, background .35s ease;
}

/* Casi lleno: el color avisa antes de que la persona elija */
.cupo-fill.casi {
  background: var(--o-warn);
}

.cupo-fill.lleno {
  background: var(--o-danger);
}


/* ============================================================================
   5. CALENDARIO Y RESUMEN
   ============================================================================ */

.calendar-shell {
  padding: 12px;
  border: 1px solid var(--o-border);
  border-radius: var(--o-radius-sm);
  background: var(--o-surface-2);
}

.orion-panel {
  height: 100%;
  padding: 16px;
  border: 1px solid var(--o-border);
  border-left: 3px solid var(--o-info);
  border-radius: var(--o-radius-sm);
  background: var(--o-surface-2);
}

.orion-panel-title {
  margin-bottom: 12px;
  color: var(--o-text);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.orion-input {
  background: var(--o-surface-3) !important;
  color: var(--o-text) !important;
  font-weight: 600;
}

/* --- Flatpickr -----------------------------------------------------------
   La librería trae su propio tema claro. Se repinta con los tokens para que
   no aparezca un cuadro blanco en medio de la pantalla oscura. */

.calendar-shell .flatpickr-calendar.inline {
  width: 100%;
  max-width: none;
  box-shadow: none;
  background: transparent;
}

.calendar-shell .flatpickr-calendar {
  background: transparent;
  color: var(--o-text);
}

.calendar-shell .flatpickr-months,
.calendar-shell .flatpickr-month {
  background: transparent;
  color: var(--o-text);
  fill: var(--o-text);
}

.calendar-shell .flatpickr-current-month,
.calendar-shell .flatpickr-current-month input.cur-year,
.calendar-shell .flatpickr-monthDropdown-months {
  color: var(--o-text);
  font-weight: 700;
}

.calendar-shell .flatpickr-monthDropdown-months option {
  background: var(--o-surface-2);
  color: var(--o-text);
}

.calendar-shell .flatpickr-months .flatpickr-prev-month svg,
.calendar-shell .flatpickr-months .flatpickr-next-month svg {
  fill: var(--o-text-soft);
}

.calendar-shell .flatpickr-months .flatpickr-prev-month:hover svg,
.calendar-shell .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--o-accent);
}

.calendar-shell .flatpickr-weekday {
  color: var(--o-text-muted);
  font-weight: 700;
  font-size: .76rem;
}

.calendar-shell .dayContainer {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.calendar-shell .flatpickr-days {
  width: 100% !important;
}

.calendar-shell .flatpickr-day {
  max-width: none;
  height: 42px;
  line-height: 42px;
  border-radius: var(--o-radius-sm);
  border: 1px solid transparent;
  color: var(--o-text-soft);
}

.calendar-shell .flatpickr-day:hover {
  background: var(--o-surface-3);
  border-color: var(--o-border);
}

/* Días que sí se pueden elegir: destacados, porque son pocos */
.calendar-shell .flatpickr-day.orion-enabled {
  border-color: var(--o-ok-border);
  background: var(--o-ok-bg);
  color: var(--o-ok);
  font-weight: 700;
}

.calendar-shell .flatpickr-day.orion-disabled,
.calendar-shell .flatpickr-day.flatpickr-disabled,
.calendar-shell .flatpickr-day.prevMonthDay,
.calendar-shell .flatpickr-day.nextMonthDay {
  color: var(--o-text-muted);
  opacity: .32;
  background: transparent;
  border-color: transparent;
}

.calendar-shell .flatpickr-day.selected,
.calendar-shell .flatpickr-day.selected:hover {
  background: var(--o-ok);
  border-color: var(--o-ok);
  color: var(--o-ink);
  font-weight: 800;
}

.calendar-shell .flatpickr-day.today:not(.selected) {
  border-color: var(--o-accent);
}


/* ============================================================================
   6. ENVÍO
   ============================================================================ */

/* El botón NO flota a propósito.
   Flotando se veía desde el primer segundo, cuando el formulario todavía no
   se puede enviar: invitaba a pulsarlo y llevarse un aviso de error. Además
   en el teléfono se comía 90px fijos, justo donde el calendario los necesita.
   Va al final, que es donde toca, y encima se avisa de lo que falta. */
.cort-enviar {
  padding: 4px 0 6px;
}

/* Aviso de lo que queda pendiente. Se rellena por JavaScript. */
.cort-falta {
  display: none;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--o-warn-border);
  border-radius: var(--o-radius-sm);
  background: var(--o-warn-bg);
  color: var(--o-warn);
  font-size: .88rem;
  line-height: 1.45;
}

.cort-falta.se-ve {
  display: flex;
}

.cort-falta .bi {
  flex: 0 0 auto;
  margin-top: 2px;
}

.cort-enviar .btn {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: var(--o-radius-sm);
  background: var(--o-ok);
  color: var(--o-ink);
  font-size: 1.02rem;
  font-weight: 800;
}

.cort-enviar .btn:hover,
.cort-enviar .btn:focus {
  background: var(--o-ok);
  color: var(--o-ink);
  filter: brightness(1.08);
}

.cort-nota {
  margin-top: 10px;
  color: var(--o-text-muted);
  font-size: .8rem;
  text-align: center;
}


/* ============================================================================
   7. RESPONSIVE
   ============================================================================ */

@media (max-width: 767.98px) {
  .cort-wrap {
    padding: 0 .75rem;
  }

  .cort-hero {
    padding: 20px 0 16px;
  }

  .cort-logo {
    width: 76px;
    height: 76px;
  }

  .cort-paso {
    padding: 16px 14px 16px 16px;
  }

  .cort-paso-cabecera {
    margin-bottom: 12px;
  }

  .slot-wrap {
    grid-template-columns: 1fr;
  }

  .calendar-shell .flatpickr-day {
    height: 38px;
    line-height: 38px;
  }

  /* Los pasos pendientes no se atenúan en el teléfono: con la pantalla
     pequeña solo se ve uno a la vez y el gris se lee como "desactivado". */
  .cort-paso.esta-pendiente {
    opacity: 1;
  }
}