/* Página entera oscura — mismo tratamiento que .gfm-hero en ../index.css:
   background fijo a --c-ink (no lo voltea .gfm-light-theme) + textos del
   título hardcodeados a claro. El card del formulario (.agendar-form-card,
   más abajo) ya se fuerza a blanco/negro de forma independiente del tema,
   así que queda intacto sobre este fondo oscuro. */
.agendar-page {
  min-height: 100vh;
  padding: 60px 24px;
  position: relative;
  z-index: 1;
  background: var(--c-ink);
}

.agendar-wrap {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.agendar-eyebrow {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-primary);
  margin: 0 0 16px;
}

.agendar-title {
  width: min(1180px, calc(100vw - 48px));
  margin: 0 0 18px 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -1.5px;
}

.agendar-title .l1,
.agendar-title .l2 {
  display: block;
  color: #f4f2ee;
}

.agendar-title .accent {
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 901px) {
  .agendar-title .l1,
  .agendar-title .l2 {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .agendar-title {
    font-size: clamp(22px, 6vw, 32px);
    letter-spacing: -0.8px;
  }
}

.agendar-cal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 420px;
  color: var(--c-primary);
  font-weight: 700;
  text-align: center;
}

.agendar-cal-loading.hidden {
  display: none;
}

.agendar-cal-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(var(--c-primary-rgb), 0.2);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: agendar-cal-spin 0.8s linear infinite;
}

@keyframes agendar-cal-spin {
  to { transform: rotate(360deg); }
}

.agendar-submit {
  width: 100%;
  margin-top: 8px;
}

.agendar-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.gfm-phone-field input#agendar-phone {
  flex: 1;
  min-width: 0;
}

/* Finding 1 (final review): #gfmPhoneOptions en el root index.css apunta al id
   del wizard (gfmPhoneOptions). Esta página usa un id propio (gfmAgendarPhoneOptions)
   para el mismo widget de dropdown de países, así que necesita su propio reset de
   lista + scroll — si no, el listado de ~245 países se corta sin scrollbar. */
#gfmAgendarPhoneOptions {
  list-style: none;
  margin: 0;
  padding: 0 4px 8px;
  overflow-y: auto;
}

/* Finding 2 (final review): .gfm-qual-form sola (sin .gfm-wizard-form) usa
   var(--c-dark) de fondo, el mismo color que el body, por lo que el card del
   form no tenía contraste contra la página. Reusamos el mismo gradiente y
   tratamiento de labels que .gfm-wizard-form aplica en el root index.css,
   pero escopeado a esta página vía una clase propia para no depender de
   .gfm-wizard-form (que también trae comportamiento específico del wizard). */
.agendar-form-card {
  max-width: 780px;
  background: #fff;
  border-color: rgba(var(--c-primary-rgb), 0.35);
}

.agendar-form-card label {
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
}

/* Pedido: el recuadro del formulario con fondo blanco y toda su tipografía
   (preguntas, labels, ayudas) en negro — antes era texto claro pensado para
   el card oscuro que usa .gfm-qual-form/.gfm-wizard-step por defecto. */
.agendar-form-card label,
.agendar-form-card legend,
.agendar-form-card .gfm-wizard-hint {
  color: #111;
}

/* Finding 2 (final review, wave 2): .gfm-wizard-progress-label usa
   var(--text-muted) (casi blanco) pensado para el card oscuro del wizard, y
   .gfm-wizard-progress-track usa var(--c-darker) (casi negro) — ambos
   invisibles/ilegibles sobre nuestro card blanco. */
.agendar-form-card .gfm-wizard-progress-label {
  color: #555;
}

.agendar-form-card .gfm-wizard-progress-track {
  background: #eee;
  border-color: rgba(0, 0, 0, 0.12);
}

/* Finding 4 (final review, wave 2): botón "Reintentar" que aparece cuando el
   envío falla (ver agendar/index.js, catch() de submitApplication()). Hereda
   color #111 de la regla .agendar-form-card .gfm-wizard-hint de arriba; acá
   solo lo distinguimos como elemento clickeable. */
.agendar-form-card .gfm-wizard-retry {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  color: var(--c-primary);
  cursor: pointer;
}

/* Pedido: inputs de texto y opciones tipo bullet con fondo blanco y texto
   negro (en vez del tema oscuro que usa .gfm-qual-form/.gfm-radio-option por
   defecto). El botón de país del campo WhatsApp se incluye para que no quede
   oscuro al lado de un input ahora blanco. Con el recuadro también blanco,
   el borde (heredado, tinte naranja) es lo que sigue marcando cada fila. */
.agendar-form-card input,
.agendar-form-card select,
.agendar-form-card .gfm-radio-option,
.agendar-form-card .gfm-phone-dial {
  background-color: #fff;
  color: #111;
}

/* .gfm-phone-caret fija su propio color (pensado para el tema oscuro) que
   pisaría el negro heredado de .gfm-phone-dial de arriba. */
.agendar-form-card .gfm-phone-caret {
  color: #111;
}

.agendar-form-card input:focus,
.agendar-form-card select:focus {
  background-color: #fff;
}

.agendar-form-card .gfm-radio-option:has(input:checked) {
  background-color: #fff;
}

/* Pedido: filas más compactas a lo ancho (menos padding horizontal) y con
   más aire a lo alto (más padding vertical) para que se lean más fácil. */
.agendar-form-card input,
.agendar-form-card select,
.agendar-form-card .gfm-radio-option {
  padding: 18px 14px;
}

/* Pedido: los botones (.gfm-btn) venían con el padding grande pensado para
   los CTAs del home (18px 42px) — acá los achicamos, y a "Atrás" (.gfm-btn-outline)
   le damos colores claros porque su estilo por defecto (pensado para fondo
   oscuro: texto casi blanco + fondo "glass" oscuro) se veía como un botón
   negro sobre nuestro card blanco. */
.agendar-form-card .gfm-btn {
  padding: 14px 22px;
  font-size: 14px;
}

.agendar-form-card .gfm-btn-outline {
  color: #111;
  border-color: rgba(0, 0, 0, 0.18);
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* La regla original de .gfm-wizard-nav en mobile lo vuelve sticky con
   background: var(--c-dark) — una franja negra sobre nuestro card blanco.
   Acá lo apilamos en una sola columna (ancho completo) para que "Reservar
   mi cita →" nunca se corte a varias líneas, y le sacamos el fondo oscuro. */
@media (max-width: 550px) {
  .agendar-form-card .gfm-wizard-nav {
    position: static;
    flex-direction: column;
    background: transparent;
    padding-top: 0;
    margin-top: 0;
  }
}

/* Mobile: en pantallas chicas (ej. iPhone SE, 375x667) el padding de 60px
   de .agendar-page + el título de 2 líneas + los 40px de padding de
   .gfm-qual-form empujaban el botón "Continuar" del paso 1 muy por debajo
   del fold, obligando a scrollear antes de ver el CTA. Acá se comprime el
   aire alrededor (page, título, card) para que el paso 1 entre casi
   completo en la primera pantalla. */
@media (max-width: 600px) {
  .agendar-page {
    padding: 20px 16px 32px;
  }
  .agendar-eyebrow {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .agendar-title {
    margin-bottom: 10px;
  }
  .agendar-form-card {
    padding: 18px 16px;
    gap: 12px;
  }
  .agendar-form-card .gfm-wizard-progress {
    margin-bottom: 10px;
  }
}

/* La escena vive anidada dentro de .agendar-page (position: relative), no
   como hija directa de <body> — el position: absolute por defecto de
   .gfm-iso-scene (index.css) ya la contiene correctamente, sin necesitar el
   truco de position: fixed que usan agendar-page's hermanas (confirmado/,
   instagram/), que sí la tienen como hija directa de body. */