/* Mejoras visuales de la experiencia de reserva. */

.booking-main {
  max-width: 1080px;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.booking-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.header-contact-link:hover,
.header-contact-link:focus-visible {
  color: var(--primary);
}

.booking-progress {
  display: flex;
  align-items: center;
  width: min(720px, 100%);
  margin: 0 auto 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}

.booking-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.booking-progress-step b {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.75rem;
}

.booking-progress-step.is-active {
  color: var(--primary);
}

.booking-progress-step.is-active b {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
}

.booking-progress-line {
  flex: 1;
  height: 1px;
  margin: 0 0.75rem;
  background: var(--border);
}

.booking-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: start;
  gap: 1rem;
}

.booking-columns #appointment-form {
  min-width: 0;
}

.booking-sidebar {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 0.85rem;
}

.booking-side-card {
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.booking-side-primary {
  border-color: var(--primary); /* respaldo para navegadores sin color-mix */
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: var(--card); /* respaldo para navegadores sin color-mix */
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, var(--card)), var(--card));
}

.booking-side-kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.booking-side-card h2,
.booking-side-card h3 {
  margin: 0;
  color: var(--fg);
  line-height: 1.25;
}

.booking-side-card h2 {
  font-size: 1.2rem;
}

.booking-side-card h3 {
  margin-top: 0.8rem;
  font-size: 1rem;
}

.booking-side-card p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.booking-side-card ul {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.booking-side-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--fg);
  font-size: 0.84rem;
  line-height: 1.4;
}

.booking-side-card li i {
  margin-top: 0.2rem;
  color: var(--primary);
  font-size: 0.75rem;
}

.booking-side-icon {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border-radius: 0.75rem;
  background: var(--primary-light);
  color: var(--primary);
}

.booking-side-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-top: 0.8rem;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.booking-help-card .booking-side-icon {
  background: #d9f8e5;
  color: #16834a;
}

.booking-side-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.booking-side-note i {
  margin-top: 0.12rem;
  color: var(--primary);
}

.form-card {
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.form-card:focus-within {
  border-color: var(--primary); /* respaldo para navegadores sin color-mix */
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: var(--shadow-md);
}

/* Todo el contenido de la reserva comparte el mismo ancho: banner, formulario, barra lateral, accesos y aviso. */
.quick-actions-grid,
.crisis-alert,
.booking-main > .page-hero {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.quick-actions-grid {
  margin-top: 0.25rem;
}

/* Banner de encabezado: ícono + título, alineado con las columnas */
.booking-main > .page-hero {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.1rem);
  padding: clamp(0.9rem, 2.5vw, 1.35rem) clamp(1rem, 3vw, 1.6rem);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.page-hero-icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex-shrink: 0;
  width: clamp(2.6rem, 8vw, 3.2rem);
  height: clamp(2.6rem, 8vw, 3.2rem);
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
}

.page-hero-text {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.booking-main > .page-hero h1 {
  margin: 0 0 0.2rem;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.2;
}

.booking-main > .page-hero p {
  font-size: clamp(0.88rem, 1.6vw, 0.98rem);
}

/* Pasos numerados en el encabezado de cada tarjeta del formulario */
#appointment-form {
  counter-reset: booking-step;
}

#appointment-form > .form-card {
  counter-increment: booking-step;
}

#appointment-form > .form-card > .card-header i {
  display: none;
}

#appointment-form > .form-card > .card-header > div::before {
  content: counter(booking-step);
  display: inline-grid;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 0.85rem;
  font-weight: 800;
}

#appointment-form > .form-card > .card-header {
  font-size: 1.02rem;
  margin-bottom: 1rem;
}

#appointment-form > .form-card > .card-header > div {
  gap: 0.7rem !important;
}

@media (max-width: 860px) {
  .booking-columns {
    grid-template-columns: 1fr;
  }

  /* En pantallas angostas la barra lateral repetía lo que ya dice el formulario y alejaba
     los botones de "Reservar por chat" y "Mis turnos": queda sólo la ayuda por WhatsApp. */
  .booking-sidebar {
    position: static;
    grid-template-columns: 1fr;
  }

  .booking-sidebar > .booking-side-primary,
  .booking-sidebar > .booking-side-card:not(.booking-help-card) {
    display: none;
  }

  .booking-help-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: center;
  }

  .booking-help-card .booking-side-icon {
    grid-row: span 3;
  }

  .booking-help-card h3 {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .booking-main {
    padding-top: 0.65rem;
  }

  .booking-header-actions {
    gap: 0.55rem;
  }

  .header-contact-link {
    font-size: 0.78rem;
  }

  .booking-progress {
    padding: 0.7rem;
  }

  .booking-progress-step {
    flex: 1;
    justify-content: center;
    font-size: 0.7rem;
  }

  .booking-progress-line {
    margin: 0 0.35rem;
  }

  .booking-sidebar {
    grid-template-columns: 1fr;
  }

  .booking-side-primary {
    grid-row: auto;
  }

  .booking-side-note {
    grid-column: auto;
  }
}

@media (max-width: 380px) {
  .booking-progress-step span {
    display: none;
  }
}

/* ============================================================
   RESERVA (patient.html) — Refuerzos móviles y de pantallas
   angostas. Este archivo se carga DESPUÉS de styles.css y del
   <style> inline de la página, así que gana en la cascada.
   Cubre iPhone SE (375px), 320px, 300px y 280px.
   ============================================================ */

/* ---- Botones fantasma (clase genérica) ---- */
.btn-ghost-44 {
  min-height: 44px;
}

/* ---- Honeypot anti-bot ----
   Se oculta por completo: al medir 1x1 px su etiqueta quedaba
   recortada dentro del contenedor y ensuciaba el layout móvil. */
#appointment-form .hp-field {
  display: none !important;
}

/* ---- Etiquetas y campos ----
   La etiqueta ocupa su alto natural, siempre pegada al campo, con el mismo espacio en todos
   los campos. El área táctil de 44 px la da el propio campo (48 px), no la etiqueta. */
#appointment-form .field {
  margin-bottom: 1.05rem;
}

#appointment-form .field:last-child {
  margin-bottom: 0;
}

.field > label,
.field-grid > .field > label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  color: var(--fg);
}

.field label i {
  width: 1rem;
  margin-right: 0 !important;
  text-align: center;
  color: var(--primary) !important;
}

#appointment-form .field-grid {
  align-items: start;
  gap: 0 1rem;
  margin-bottom: 1.05rem;
}

#appointment-form .field-grid > .field {
  margin-bottom: 0;
}

#appointment-form .field-grid:last-child,
#appointment-form .field-grid:last-child > .field {
  margin-bottom: 0;
}

#appointment-form .input {
  min-height: 48px;
  border-radius: 12px;
}

#appointment-form textarea.input {
  min-height: 96px;
  padding-top: 0.75rem;
}

#appointment-form .input::placeholder {
  color: var(--input-placeholder);
  font-weight: 400;
}

/* La fila de la casilla de menores también es interactiva */
.form-card label:has(> input[type="checkbox"]) {
  min-height: 44px;
}

/* ---- Casillas de verificación ---- */
.terms-check,
.terms-check > span {
  min-height: 44px;
}

.terms-check a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.terms-check input[type="checkbox"],
.form-card input[type="checkbox"] {
  min-width: 24px;
  min-height: 24px;
}

/* ---- Barra de progreso ---- */
.booking-progress {
  max-width: 100%;
  min-width: 0;
}

.booking-progress-step {
  min-width: 0;
}

.booking-progress-step b {
  flex-shrink: 0;
}

/* ---- Encabezado de tarjeta: nunca comprime el título ---- */
.form-card .card-header {
  flex-wrap: wrap;
  row-gap: 0.5rem;
  min-width: 0;
}

.form-card .card-header-left {
  min-width: 0;
}

.form-card .card-header-left span {
  overflow-wrap: anywhere;
}

/* ---- Accesos rápidos (chat / cuenta) ---- */
.quick-actions-grid > * {
  min-width: 0;
}

/* ---- Textos largos: correos, URLs y motivos ---- */
.crisis-alert > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.booking-side-card li,
.booking-side-card p,
.booking-side-note,
#tz-hint,
#form-feedback {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  /* Campos de 48 px de alto: objetivo táctil real en el celular */
  .field > label,
  .field-grid > .field > label {
    font-size: 0.92rem;
  }

  .field label i {
    font-size: 0.85rem;
  }

  /* Los círculos del paso siguen con su tamaño visual original: al
     crecer a 44px la etiqueta "Confirmación" se salía de la pantalla
     a 414px. El paso completo ya reserva 44px de alto. */
  .booking-progress-step b {
    font-size: 0.85rem;
  }

  .booking-progress-step {
    min-height: 44px;
    min-width: 0;
    align-items: center;
  }

  .terms-check input[type="checkbox"],
  .form-card input[type="checkbox"] {
    width: 24px;
    height: 44px;
    min-width: 24px;
    min-height: 44px;
    flex-shrink: 0;
  }

  /* Enlaces del pie: fila táctil de 44px, apilada en pantallas chicas */
  .app-footer .footer-links {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem;
  }

  .app-footer .footer-links a {
    min-height: 44px;
    padding: 0.35rem 0.25rem;
    justify-content: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
  }

  /* Textos por debajo de 12px */
  .qa-title { font-size: 0.82rem; }
  .qa-desc { font-size: 0.76rem; }
  .hero-badge { font-size: 0.78rem; }
  .booking-side-kicker { font-size: 0.76rem; }
  .booking-side-card p,
  .booking-side-card li { font-size: 0.86rem; }
  .booking-side-note { font-size: 0.8rem; }
  .crisis-alert { font-size: 0.82rem; }
  .form-card .card-header { font-size: 0.95rem; }
  .step-badge {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
  }
  #appointment-form p { font-size: 0.86rem; }
}

@media (max-width: 560px) {
  .booking-progress-step {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .booking-progress-step span {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 400px) {
  .booking-progress {
    padding: 0.6rem 0.5rem;
  }

  .booking-progress-line {
    margin: 0 0.25rem;
  }

  .quick-actions-grid {
    gap: 0.4rem;
  }
}

@media (max-width: 330px) {
  .booking-progress {
    padding: 0.5rem 0.4rem;
  }

  /* A este ancho las etiquetas ya se ocultan (<=380px): el círculo
     puede crecer hasta 44px reales sin desbordar nada. */
  .booking-progress-step b {
    min-width: 44px;
    min-height: 44px;
  }

  .form-card .card-header {
    font-size: 0.9rem;
  }

  .qa-icon {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }

  .crisis-alert {
    align-items: flex-start;
  }
}

/* ---- Una sola columna (celulares): cada campo conserva el mismo espacio hacia abajo ----
   Va al final del archivo para ganar a las reglas generales de arriba. */
@media (max-width: 560px) {
  #appointment-form .field-grid {
    gap: 0;
  }

  #appointment-form .field-grid > .field {
    margin-bottom: 1.05rem;
  }

  #appointment-form .field-grid > .field:last-child {
    margin-bottom: 0;
  }

  #appointment-form .field-grid:last-child {
    margin-bottom: 0;
  }
}