/* ============================================================================
   H-GO · LAS PÁGINAS DEL CLIENTE
   ----------------------------------------------------------------------------
   Dos páginas sueltas —enviar comprobante y cambiar mi reservación— que no
   son la portada: no hay lienzo invertido, no hay video, no hay dock. Una
   hoja centrada, oscura, del ancho de un teléfono aunque se abra en una
   pantalla grande, porque es lo que casi siempre va a pasar.

   Toma los colores y las fuentes de estilos.css. Aquí sólo vive lo que esas
   dos páginas necesitan y el resto del sitio no.
   ============================================================================ */

body.cliente {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(61, 176, 47, 0.10), transparent 60%),
    var(--fondo);
}

/* ── cabeza ────────────────────────────────────────────────────────────── */
.cl-cabeza {
  padding: 22px var(--esp-3);
  display: flex; justify-content: center;
}
.cl-marca img { height: 30px; width: auto; opacity: 0.95; }

/* ── la hoja ───────────────────────────────────────────────────────────── */
.cl-hoja {
  flex: 1;
  width: 100%; max-width: 520px;
  margin: 0 auto;
  padding: 8px var(--esp-3) var(--esp-8);
}
.cl-paso { animation: cl-entra 0.45s var(--suave) both; }
@keyframes cl-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-paso { animation: none; }
}

.cl-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  line-height: 1.1; letter-spacing: 0.01em; font-weight: 400;
  margin-bottom: 10px;
}
.cl-titulo--chico { font-size: 1.35rem; margin-top: var(--esp-4); }
.cl-bajada {
  color: var(--texto-2); font-size: 0.97rem; line-height: 1.5;
  margin-bottom: var(--esp-4);
}

/* ── formularios ───────────────────────────────────────────────────────── */
.cl-forma { display: flex; flex-direction: column; gap: var(--esp-3); }
.cl-campo { display: block; }
.cl-etiqueta {
  display: block; margin-bottom: 7px;
  font-size: 0.86rem; font-weight: 600; color: var(--texto-2);
}
.cl-campo input,
.cl-campo select,
.cl-campo textarea {
  width: 100%;
  padding: 15px 16px;
  font: inherit; font-size: 1.02rem;
  color: var(--texto);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  transition: border-color 0.2s var(--suave), background 0.2s var(--suave);
  /* iOS acerca la pantalla si la letra baja de 16px; 1.02rem la deja arriba */
  -webkit-appearance: none; appearance: none;
}
.cl-campo textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.cl-campo select {
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}
.cl-campo select option { background: var(--carbon); color: var(--texto); }
.cl-campo input:focus,
.cl-campo select:focus,
.cl-campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  background: var(--panel-alto);
}
.cl-campo input::placeholder, .cl-campo textarea::placeholder { color: var(--texto-3); }
.cl-pista {
  display: block; margin-top: 7px;
  font-size: 0.8rem; color: var(--texto-3); line-height: 1.4;
}

/* ── botones ───────────────────────────────────────────────────────────── */
.cl-boton {
  display: block; width: 100%;
  margin-top: var(--esp-3);
  padding: 16px 24px;
  font-family: var(--f-texto); font-size: 1.02rem; font-weight: 600;
  color: var(--carbon);
  background: var(--verde);
  border-radius: var(--radio-ch);
  text-align: center;
  transition: transform 0.2s var(--suave), opacity 0.2s var(--suave);
}
.cl-boton:hover:not(:disabled) { transform: translateY(-1px); }
.cl-boton:active:not(:disabled) { transform: scale(0.985); }
.cl-boton:disabled { opacity: 0.4; cursor: not-allowed; }
.cl-boton--cargando { opacity: 0.65; }
.cl-boton--vidrio {
  color: var(--texto);
  background: var(--panel-alto);
  border: 1px solid var(--linea);
}
.cl-atras {
  display: block; text-align: center;
  margin-top: var(--esp-3);
  font-size: 0.88rem; color: var(--texto-3);
}
.cl-atras:hover { color: var(--texto-2); }

/* ── avisos ────────────────────────────────────────────────────────────── */
.cl-error, .cl-nota {
  margin-top: var(--esp-2);
  padding: 13px 15px;
  border-radius: 13px;
  font-size: 0.9rem; line-height: 1.45;
}
.cl-error {
  color: #FFD9D9;
  background: rgba(216, 32, 43, 0.16);
  border: 1px solid rgba(216, 32, 43, 0.4);
}
.cl-nota {
  color: var(--texto-2);
  background: var(--panel);
  border: 1px solid var(--linea);
}
.cl-nota b { color: var(--texto); }

/* ── la tarjeta con la reservación ─────────────────────────────────────── */
.cl-tarjeta {
  padding: var(--esp-3);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.cl-folio {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--verde);
  margin-bottom: 6px;
}
.cl-nombre {
  font-family: var(--f-display); font-size: 1.4rem;
  letter-spacing: 0.01em; line-height: 1.15;
}
.cl-fecha {
  margin-top: 4px;
  color: var(--texto-2); font-size: 0.94rem;
}
/* "martes 1 de septiembre" con la primera en alta. Con capitalize salía
   "Martes 1 De Septiembre": el "de" también se levantaba. */
.cl-fecha::first-letter { text-transform: uppercase; }
.cl-acts {
  list-style: none;
  margin: var(--esp-2) 0 0;
  padding-top: var(--esp-2);
  border-top: 1px solid var(--linea);
}
.cl-acts li {
  padding: 5px 0;
  font-size: 0.94rem;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cl-hora, .cl-pax {
  font-size: 0.8rem; color: var(--texto-3);
  padding: 2px 8px;
  background: var(--panel-alto);
  border-radius: var(--radio-ch);
}
.cl-dinero {
  display: flex; gap: var(--esp-2); flex-wrap: wrap;
  margin-top: var(--esp-2);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--linea);
}
.cl-dinero span {
  display: flex; flex-direction: column;
  font-size: 1.02rem; font-weight: 600;
}
.cl-dinero small {
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-3);
}
.cl-saldo { color: var(--ambar); }

/* ── el cajón del archivo ──────────────────────────────────────────────── */
.cl-soltar {
  margin-top: var(--esp-2);
  padding: var(--esp-4) var(--esp-3);
  background: var(--panel);
  border: 1.5px dashed var(--linea);
  border-radius: var(--radio);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--suave), background 0.2s var(--suave);
}
.cl-soltar:hover { border-color: var(--verde); background: var(--panel-alto); }
.cl-soltar__vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cl-soltar__vacio svg { color: var(--verde); }
.cl-soltar__vacio b { font-size: 0.97rem; font-weight: 600; }
.cl-soltar__vacio small { font-size: 0.82rem; color: var(--texto-3); }
.cl-soltar__listo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cl-soltar__listo img {
  max-height: 220px; width: auto;
  border-radius: 14px;
  border: 1px solid var(--linea);
}
.cl-archivo b {
  display: block; font-size: 0.92rem; font-weight: 600;
  word-break: break-all;
}
.cl-archivo small { font-size: 0.8rem; color: var(--texto-3); }
.cl-quitar {
  font-size: 0.85rem; color: var(--texto-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.cl-quitar:hover { color: var(--texto); }

/* ── la pantalla de "listo" ────────────────────────────────────────────── */
.cl-paso--fin { text-align: center; padding-top: var(--esp-6); }
.cl-palomita {
  width: 62px; height: 62px;
  margin: 0 auto var(--esp-3);
  display: grid; place-items: center;
  background: var(--verde);
  border-radius: 50%;
  animation: cl-brinca 0.5s var(--suave) both;
}
@keyframes cl-brinca {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.cl-paso--fin .cl-bajada { margin-bottom: var(--esp-4); }

/* ── elegir qué hacer (página de cambios) ──────────────────────────────── */
.cl-opciones { display: flex; flex-direction: column; gap: 12px; margin-top: var(--esp-3); }
.cl-opcion {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 18px var(--esp-3);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 18px;
  transition: background 0.2s var(--suave), border-color 0.2s var(--suave), transform 0.2s var(--suave);
}
.cl-opcion:hover { background: var(--panel-alto); border-color: var(--verde); transform: translateY(-1px); }
.cl-opcion:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.cl-opcion svg { flex: none; color: var(--verde); }
.cl-opcion div { flex: 1; }
.cl-opcion b { display: block; font-size: 1rem; font-weight: 600; }
.cl-opcion small { font-size: 0.85rem; color: var(--texto-3); line-height: 1.4; }

/* ── los horarios para reagendar ───────────────────────────────────────── */
.cl-horarios {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin-top: 10px;
}
.cl-hora-op {
  padding: 13px 8px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  text-align: center;
  font-size: 0.97rem; font-weight: 600;
  transition: background 0.2s var(--suave), border-color 0.2s var(--suave), color 0.2s var(--suave);
}
.cl-hora-op:hover:not(:disabled) { border-color: var(--verde); background: var(--panel-alto); }
.cl-hora-op[aria-pressed="true"] { background: var(--verde); color: var(--carbon); border-color: var(--verde); }
.cl-hora-op:disabled { opacity: 0.35; cursor: not-allowed; }
.cl-hora-op small { display: block; font-size: 0.7rem; font-weight: 400; opacity: 0.75; }
.cl-cargando-h {
  padding: var(--esp-3); text-align: center;
  color: var(--texto-3); font-size: 0.9rem;
}

/* ── pie ───────────────────────────────────────────────────────────────── */
.cl-pie {
  padding: var(--esp-3);
  text-align: center;
  font-size: 0.85rem; color: var(--texto-3);
  border-top: 1px solid var(--linea);
}
.cl-pie a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }