/* reservas.css — Formulario de reservas (entorno dev)
   Complementa menu.css. Tarjeta, 2 columnas en escritorio,
   1 columna en móvil, áreas táctiles 48x48. Cero emojis. */

/* Dentro del formulario los párrafos quedan a la izquierda también
   dentro de .bloque-contenido (gana sobre la regla de bloque 3.7). */
.bloque-contenido form p { text-align: left; }

/* ── Banda de evento seleccionado ─────────────────────────── */
.banda-evento {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  color: var(--et-verde-oscuro);
  background: var(--et-fondo-verde);
  border-left: 4px solid var(--et-verde);
  border-radius: 8px;
  text-align: center;
}

/* ── Tarjeta del formulario ───────────────────────────────── */
.card.reserva-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
}

/* ── Grilla de campos: 2 por línea en escritorio ──────────── */
.fila-2 {
  display: grid;
  gap: 0 1.25rem;
}

@media (min-width: 48rem) {
  .fila-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Campos ───────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.form-control {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-texto);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 6px;
}

textarea.form-control { min-height: 96px; resize: vertical; }

.form-control:focus-visible {
  outline: 3px solid var(--et-amarillo);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--et-verde-oscuro);
}

.form-control[readonly] { background: #f6f6f6; }

.form-control.is-invalid { border-color: #b91c1c; }

.form-error {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #b91c1c;
}

.form-nota {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #555;
}

.form-nota.centrada { text-align: center; }

.form-global-error {
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  color: #7f1d1d;
  background: #fee2e2;
  border: 1px solid #b91c1c;
  border-radius: 8px;
}

/* Teléfono: prefijo + número en la misma línea */
.grupo-tel {
  display: flex;
  gap: 0.5rem;
}

/* MOVIL: el codigo toma solo lo que necesita ("+593 EC" es el mas
   largo) y el numero se queda con el resto. min-width: 0 deja que el
   numero se encoja sin empujar la linea fuera de la pantalla. */
.grupo-tel .tel-cod { width: auto; flex: 0 0 auto; }
.grupo-tel .form-control[type="tel"] { flex: 1 1 auto; min-width: 0; }

/* Modalidades (DEV-02): reemplazan al binario punto/domicilio.
   Tarjetas táctiles de 48px mínimo, una por línea, con el precio a la
   derecha en escritorio y debajo del nombre en móvil. */
.fieldset-modalidades {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.fieldset-modalidades .form-label { margin-bottom: 0.5rem; }

.opcion-modalidad {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 48px;
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.85rem;
  font-weight: 400;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  cursor: pointer;
}

.opcion-modalidad:last-of-type { margin-bottom: 0; }

/* PASOS: margen fijado entero. El navegador le pone al radio 5 px a la
   izquierda y 3 px a la derecha por su cuenta; con eso la sexta fila,
   que no tiene radio, quedaba 8 px corrida. Asi el hueco del radio mide
   lo mismo en todo navegador: 20 px mas el gap de 0,65rem. */
.opcion-modalidad input {
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--et-verde);
}

.opcion-modalidad:has(input:checked) {
  background: var(--et-fondo-verde);
  border-color: var(--et-verde);
}

.opcion-modalidad:has(input:focus-visible) {
  outline: 3px solid var(--et-amarillo);
  outline-offset: 2px;
}

.modalidad-texto {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.modalidad-nombre { flex: 1 1 14rem; }

.modalidad-precio {
  font-weight: 600;
  color: var(--et-verde-oscuro);
  white-space: nowrap;
}

/* MOVIL: "Haznos tu propuesta", sexta fila. Es un enlace, no una
   tarifa: toma el recuadro de .opcion-modalidad pero no lleva radio.
   - margin-top: la quinta tarifa es la ultima <label> y pierde su margen
     inferior por :last-of-type; este margen devuelve la misma separacion.
   - padding-left: deja el texto alineado con el de las tarifas, en el
     lugar donde ellas llevan el radio (20 px mas el hueco de 0,65rem).
   - El hover y el foco necesitan (0,4,1) para ganarle a
     "main a:not(...):not(...):hover" de menu.css (0,3,2), que subraya. */
.reserva-form a.opcion-propuesta {
  align-items: center;
  margin-top: 0.5rem;
  padding-left: calc(0.85rem + 20px + 0.65rem);
  color: inherit;
  text-decoration: none;
}

.reserva-form a.opcion-modalidad.opcion-propuesta:hover,
.reserva-form a.opcion-modalidad.opcion-propuesta:focus-visible {
  color: inherit;
  text-decoration: none;
  background: var(--et-fondo-verde);
  border-color: var(--et-verde);
}

.reserva-form a.opcion-modalidad.opcion-propuesta:focus-visible {
  outline: 3px solid var(--et-amarillo);
  outline-offset: 2px;
}

/* Bloque domicilio (oculto hasta que se elige regreso a domicilio) */
.bloque-domicilio {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--et-fondo-verde);
  border: 1px solid var(--et-verde-claro);
  border-radius: 8px;
}


/* Resumen en vivo (DEV-02, E4). Lo llena el guion con los precios que
   imprimió el servidor; al enviar, el servidor recalcula y manda. */
.resumen-reserva {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--et-fondo-verde);
  border: 1px solid var(--et-verde-claro);
  border-radius: 8px;
}

.resumen-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  margin: 0 0 0.5rem;
}

.resumen-linea strong {
  font-size: 1.05rem;
  color: var(--et-verde-oscuro);
  white-space: nowrap;
}

.resumen-reserva .form-nota { margin-top: 0.25rem; }

/* Botón grande */
.boton-lg {
  padding: 0.85rem 2rem;
  font-size: 1.1rem;
}

/* ── Resultado de prueba ──────────────────────────────────── */
.tarjeta-reserva {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

.tarjeta-reserva p { margin: 0 0 0.5rem; }
.tarjeta-reserva p:last-child { margin-bottom: 0; }


/* ── Salidas del formulario (DEV-04 A) ────────────────────────── */
/* Cuando el antiduplicado rechaza un envio, el cliente se quedaba
   sin ningun camino a la vista. Ahora siempre hay una salida. */
.form-salidas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0.6rem 0 0;
}

.form-salidas-pie {
  justify-content: center;
  margin-top: 1rem;
}

.boton-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
}

/* ── Nomina de quienes viajan (DEV-04 B) ──────────────────────── */
.fieldset-nomina {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.opcion-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  margin-bottom: 0.75rem;
  font-weight: 400;
  cursor: pointer;
}

.opcion-checkbox input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--et-verde);
}

.bloque-pasajero {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem 0.35rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
}

.bloque-pasajero:last-of-type { margin-bottom: 0; }

.bloque-pasajero-titulo {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--et-verde-oscuro);
}

.tel-obligatorio { color: #b91c1c; }
.tel-opcional { font-weight: 400; color: #555; }


/* ── DEV-05: formulario corto y ventana de tarifas ────────────── */

/* La banda gana su salida a la cartelera. */
.banda-evento {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  justify-content: center;
}

.banda-cambiar {
  font-weight: 600;
  color: var(--et-verde-oscuro);
  white-space: nowrap;
}

/* Titulo de seccion dentro del formulario. */
.bloque-titulo {
  position: relative;
  margin: 1.75rem 0 1rem;
  font-size: 1.25rem;
  color: var(--et-verde-oscuro);
}

/* PASOS: los rotulos "1.-" y "2.-". Van en posicion absoluta, asi que
   no empujan ni descentran el boton ni el titulo, y se centran en
   vertical con top 50% y translateY.
   Misma distancia del borde en los dos: el "1.-" se mide dentro del
   borde de 1 px de la caja verde; el "2.-" se mide desde el borde del
   titulo, que coincide con el borde exterior de la caja, asi que suma
   ese mismo 1 px. Los dos quedan en la misma vertical.
   Telefono: 1,25rem y a 0,5rem del borde. Con 1,5rem y el relleno
   normal, a 390 px el "2.-" se montaba 5 px sobre el titulo.
   Pantalla ancha (48rem, el quiebre del archivo): 1,5rem y el relleno
   normal de la caja, 1,25rem.
   El relleno simetrico del titulo y del boton les reserva el lugar del
   numero a los dos lados: siguen centrados y nunca lo pisan. Si un
   telefono muy angosto no alcanza, el titulo se parte en dos lineas en
   vez de montarse. */
.paso-num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--et-verde-oscuro);
}

#fila-servicio { position: relative; }
#fila-servicio .paso-num { left: 0.5rem; }
.bloque-titulo .paso-num { left: calc(0.5rem + 1px); }
/* El boton ya esta dentro del relleno de 1,25rem de la caja: su reserva
   es menor que la del titulo para llegar al mismo punto. */
.bloque-titulo { padding-inline: 2.5rem; }
#servicio-sin-elegir { padding-inline: 1.25rem; }

@media (min-width: 48rem) {
  .paso-num { font-size: 1.5rem; }
  #fila-servicio .paso-num { left: 1.25rem; }
  .bloque-titulo .paso-num { left: calc(1.25rem + 1px); }
  .bloque-titulo { padding-inline: 3.5rem; }
  #servicio-sin-elegir { padding-inline: 2.25rem; }
}

/* La fila "Tipo de servicio". */
.fila-servicio {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--et-fondo-verde);
  border: 1px solid var(--et-verde-claro);
  border-radius: 8px;
}

.fila-servicio .form-label { margin-bottom: 0.6rem; }

.servicio-nombre {
  margin: 0 0 0.2rem;
  font-weight: 600;
  color: var(--et-verde-oscuro);
}

.servicio-precio {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

/* La ventana. Sin JavaScript no se pinta y las modalidades se quedan en
   el cuerpo del formulario, que es el camino de respaldo. */
.dialogo-tarifas {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  overflow: hidden;
  color: var(--color-texto);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
}

.dialogo-tarifas::backdrop { background: rgba(0, 0, 0, 0.55); }

.dialogo-tarifas[open] {
  display: flex;
  flex-direction: column;
}

/* MOVIL: una sola linea, "Tarifas", centrada. La franja se ajusta a
   esa linea. El selector (0,2,0) le gana a ".bloque-contenido form p"
   (0,1,2), que manda los parrafos del formulario a la izquierda. */
.dialogo-cabecera {
  padding: 0.85rem 1.25rem;
  color: var(--color-acento-contraste);
  background: var(--et-verde-oscuro);
}

.dialogo-cabecera .dialogo-rotulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* La lista se desplaza dentro de la ventana si no cabe. */
.dialogo-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}

.dialogo-cuerpo .fieldset-modalidades { margin-bottom: 0; }

.dialogo-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-borde);
}

.dialogo-pie button { min-height: 48px; }

.dialogo-pie button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}


/* El pie del formulario: enviar y la salida, uno al lado del otro.
   ORDEN: en telefono se apilan, Enviar arriba (va primero en el
   marcado); desde 48rem, el mismo quiebre de .fila-2, van en fila.
   stretch les da la misma altura. */
.pie-formulario {
  display: flex;
  flex-direction: column;
  gap: 0.75rem 1.25rem;
  align-items: stretch;
  margin-top: 1.5rem;
}

/* MOVIL: en pantalla ancha, Volver a la izquierda y Enviar a la
   derecha, con row-reverse. El marcado no cambia: en telefono Enviar
   sigue arriba y el tabulador sigue yendo a Enviar y despues a Volver. */
@media (min-width: 48rem) {
  .pie-formulario {
    flex-direction: row-reverse;
    justify-content: center;
  }
}

/* Los dos con la misma forma. En esta pagina no se carga ninguna hoja
   con el estilo base de .boton-secundario (vive en guia.css y
   portada.css), asi que se define aqui, acotado al pie. El borde de 2 px
   va en los dos, transparente en Enviar, para que midan lo mismo. Estas
   reglas ganan a "main .boton-principal" de menu.css, que los centra
   con margen automatico y ancho ajustado.
   MOVIL: "Cambiar", en el recuadro de la tarifa elegida, toma el mismo
   aspecto secundario. Antes era letra verde oscura sobre el fondo verde
   de "main button" (cerca de 1,6:1). Sigue centrado: es inline-flex y lo
   centra el text-align del recuadro. */
.pie-formulario .boton-principal,
.pie-formulario .boton-secundario,
.tarifa-elegida .boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  font-family: inherit;
  line-height: 1.25;
  text-decoration: none;
  border-radius: 6px;
}

.pie-formulario .boton-principal { border: 2px solid transparent; }

.pie-formulario .boton-secundario,
.tarifa-elegida .boton-secundario {
  color: var(--color-acento);
  background: var(--color-fondo);
  border: 2px solid var(--color-acento);
}

/* Empata en especificidad con ".boton-secundario:hover" de menu.css y
   esta hoja carga despues: sin esta linea el hover se perderia. */
.pie-formulario .boton-secundario:hover,
.tarifa-elegida .boton-secundario:hover { background: var(--et-fondo-verde); }


/* ── DEV-06: la tarifa primero ─────────────────────────────────── */

/* El recuadro sin tarifa: solo el boton, centrado y comodo. */
#servicio-sin-elegir { text-align: center; }

.boton-tarifa {
  min-height: 48px;
  padding: 0.75rem 2rem;
  font-size: 1.05rem;
}

/* La seccion que espera a la tarifa. El disabled lo pone el guion. */
.seccion-datos {
  margin: 0;
  padding: 0;
  border: 0;
}

/* DEV-06 (D2): 0,65 y no menos. Con 0,5 el texto se vuelve ilegible
   para quien tiene vision reducida, y atenuar no es esconder.
   BOTONES (24-09): la opacidad va en cada hijo y no en el fieldset,
   porque la de un padre no se puede anular desde un hijo. "Volver a la
   cartelera" es un enlace, sigue funcionando y se ve pleno; en el pie
   solo se atenua lo que esta desactivado (Enviar). Lo palido no se
   puede usar; lo nitido si. */
.seccion-datos[disabled] > :not(.pie-formulario),
.seccion-datos[disabled] .pie-formulario > :disabled {
  opacity: 0.65;
}

.seccion-datos[disabled] .form-control,
.seccion-datos[disabled] .opcion-checkbox,
.seccion-datos[disabled] button {
  cursor: not-allowed;
}

/* La linea de aviso sobre la seccion bloqueada. Va fuera del recuadro
   verde, en gris, sin recuadro propio: avisa sin gritar.
   DEV-07: el selector lleva .reserva-form delante. Solo, ".aviso-bloqueado"
   perdia contra ".bloque-contenido form p" de este mismo archivo, que manda
   los parrafos del formulario a la izquierda, y el centrado no se veia. */
.reserva-form .aviso-bloqueado {
  margin: 0 0 0.75rem;
  font-size: 1rem;          /* DEV-06 (D2): 16 px, no menos */
  color: #444;              /* 9,7:1 sobre blanco, muy por encima del 4,5:1 */
  text-align: center;
}

/* ENVIANDO (24-09): el boton ya envio y espera al servidor. La misma
   atenuacion que sin tarifa (0,65) y sin respuesta al puntero. El guion lo
   restaura si la pagina vuelve desde la memoria del navegador. */
.reserva-form #btn-enviar.enviando,
.reserva-form #btn-enviar.enviando:disabled {
  opacity: 0.65;
  cursor: progress;
  pointer-events: none;
}

/* El aviso de espera: mismo aspecto que el aviso de la seccion bloqueada
   (gris #444, centrado, sin recuadro), pero en 17 px como pide la ficha.
   No es un error: nada de rojo. */
.reserva-form .aviso-enviando {
  margin: 0.75rem 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #444;              /* 9,7:1 sobre blanco */
  text-align: center;
}

/* ORDEN: la tarifa elegida baja al final, justo antes del resumen y de
   los botones. Lleva la clase .fila-servicio para conservar su aspecto.
   Nombre, precio y "Cambiar" van centrados, cada uno en su linea. El
   selector de los parrafos (0,2,1) le gana a ".bloque-contenido form p"
   y a "main .bloque-contenido p" (0,1,2), que los mandan a la izquierda
   o los justifican. El boton es inline-flex: lo centra el text-align
   del recuadro. El resumen NO se centra. */
.reserva-form .tarifa-elegida,
.reserva-form .tarifa-elegida p { text-align: center; }

/* ORDEN: arriba solo queda el boton "Elige tu tarifa". Cuando el guion
   lo esconde porque ya hay tarifa, el recuadro verde quedaria vacio: se
   esconde con el. Sin soporte de :has se veria un recuadro vacio, que
   es un defecto de forma y no de funcion. */
.fila-servicio:has(> #servicio-sin-elegir[hidden]) { display: none; }

/* Oculto a la vista, disponible para el lector de pantalla. Recorte
   estandar: nunca display:none ni visibility:hidden, que lo esconden
   tambien del lector. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot oculto (nunca display:none inline) */
.hp-off {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* La nomina en la pantalla de confirmacion: nombres, nunca telefonos. */
.lista-nomina {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.lista-nomina li { margin-bottom: 0.2rem; }

/* 28-09 (REPORTE-ERROR-CONTACTO): el campo trampa va dentro de .hp-caja,
   oculta desde esta hoja. Chrome no rellena lo que no se dibuja; un robot
   que lee el HTML sin CSS lo sigue viendo. Nunca display:none en línea. */
.hp-caja { display: none; }

/* 28-09: aviso junto al botón cuando el guion detiene el envío. Rojo de
   los errores de campo, 16 px, centrado bajo el botón. */
.reserva-form .aviso-revisar {
  margin: 0.75rem 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #b91c1c;           /* 6,5:1 sobre blanco */
  text-align: center;
}