/* =========================================================
   SEDRO 10 — PÁGINA DE RESERVAS
   1. Encabezado y estructura
   2. Pasos
   3. Calendario
   4. Horas
   5. Mapa de pistas
   6. Extras y datos
   7. Resumen fijo
   8. Confirmación con strike
   9. Barra móvil
   ========================================================= */


/* ---------- 1. Encabezado y estructura ---------- */
.reserva-cabeza {
  display: grid;
  gap: 1.1rem;
  padding-top: calc(var(--nav-alto) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.reserva {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-bottom: var(--e-7);
}

@media (max-width: 980px) {
  .reserva { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 2. Pasos ---------- */
.pasos { display: grid; }

.paso {
  min-width: 0;
  margin: 0;
  padding: 2.25rem 0 2.5rem;
  border: 0;
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--nav-alto) + 20px);
}
.paso__titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  padding: 0;
  margin-bottom: 1.35rem;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.15;
}
.paso__num {
  min-width: 1.4ch;
  font-stretch: 125%;
  font-weight: 850;
  color: var(--naranja-claro);
  font-variant-numeric: tabular-nums;
}
.paso__titulo .opcional { font-size: 1rem; font-weight: 600; }
/* La leyenda del fieldset entra al flujo normal (no se monta sobre la línea) */
fieldset.paso > legend { float: left; width: 100%; }
fieldset.paso > legend + * { clear: both; }
.paso__nota { margin-bottom: 1.1rem; color: var(--texto-suave); }
.paso__nota--paquete { color: var(--crema); }
.paso .campo__error { margin-top: 0.9rem; }

.grupo-fila { display: flex; flex-wrap: wrap; gap: 1.75rem 3rem; }
.campo--sin-borde { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo--sin-borde legend { padding: 0; margin-bottom: 0.45rem; }

.chip--ocasion > span { min-height: 54px; padding-inline: 1.25rem; }


/* ---------- 3. Calendario ---------- */
.cal { max-width: 32rem; }
.cal__cabeza {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  margin-bottom: 0.75rem;
}
.cal__titulo {
  text-align: center;
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.2rem;
}
.cal__mover {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  background: transparent;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--crema);
}
.cal__mover svg { width: 14px; height: 14px; }
.cal__mover:hover:not(:disabled) { border-color: var(--crema); }
.cal__mover:disabled { opacity: 0.3; cursor: not-allowed; }

.cal__semana,
.cal__grilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.cal__semana {
  margin-bottom: 5px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--texto-suave);
}
.cal__dia {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  background: var(--carbon-2);
  border: 1px solid var(--linea);
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease;
}
.cal__dia:hover:not(:disabled) { border-color: var(--crema); }
.cal__dia[aria-pressed="true"] { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
.cal__dia:disabled {
  background: transparent;
  border-color: transparent;
  color: rgba(247, 234, 219, 0.3);
  cursor: not-allowed;
}
.cal__dia--hoy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 16px; height: 2px;
  margin-left: -8px;
  background: var(--naranja-claro);
}


/* ---------- 4. Horas ---------- */
.horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: 0.5rem;
}
.chip--hora > span {
  min-height: 50px;
  padding-inline: 0.6rem;
  font-weight: 750;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
/* Hora elegida a mano con el botón "Another time…" */
.chip--hora-propia > span { border-style: dashed; }

.hora-otra { display: grid; justify-items: start; gap: 0.85rem; margin-top: 1.5rem; }
.hora-otra__campo { display: flex; flex-wrap: wrap; align-items: end; gap: 0.85rem; }
.hora-otra__campo .campo { gap: 0.35rem; }
.hora-otra__campo .entrada { width: auto; min-width: 9.5rem; }
.horas__nota { margin-top: 1rem; color: var(--texto-suave); }
.horas__nota:empty { display: none; }
.horas .vacio { grid-column: 1 / -1; color: var(--texto-suave); }
.horas .vacio a { color: var(--crema); }


/* ---------- 5. Mapa de pistas ---------- */
.carriles {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  padding: 14px 14px 10px;
  background: #0f0c0a;
  border: 1px solid var(--linea);
}
.carril {
  position: relative;
  display: grid;
  gap: 0.35rem;
  cursor: pointer;
}
.carril input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.carril input:disabled { cursor: not-allowed; }

.carril__pista {
  position: relative;
  height: clamp(170px, 22vw, 250px);
  overflow: hidden;
  border-radius: 3px;
  background:
    linear-gradient(to bottom, rgba(20, 12, 6, 0.35), transparent 35%),
    repeating-linear-gradient(90deg, rgba(70, 36, 12, 0.28) 0 1px, transparent 1px 12.5%),
    linear-gradient(90deg, #b67944, #dcab75 50%, #b67944);
  box-shadow: inset 0 0 0 0 var(--crema);
  transition: box-shadow var(--rapido) ease, filter var(--rapido) ease;
}
.carril:hover .carril__pista { filter: brightness(1.08); }
.carril__pinos {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 72%;
  transform: translateX(-50%);
  fill: #fffaf2;
}
.carril__bola {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffb3a2 0 7%, #c21a17 34%, #6e0a0a 100%);
  transform: translateX(-50%) scale(0);
  transition: transform var(--medio) var(--salida);
}
.carril__num {
  text-align: center;
  font-stretch: 125%;
  font-weight: 850;
  font-size: 1.2rem;
  line-height: 1.1;
}
.carril__estado {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--texto-suave);
}

.carril--elegido .carril__pista { box-shadow: inset 0 0 0 3px var(--crema); }
.carril--elegido .carril__bola { transform: translateX(-50%) scale(1); }
.carril--elegido .carril__estado { color: var(--crema); }

.carril--tomado .carril__pista {
  background: repeating-linear-gradient(135deg, #2b241d 0 7px, #1b1612 7px 14px);
}
.carril--tomado .carril__pinos { opacity: 0.2; }
.carril--tomado .carril__num { color: rgba(247, 234, 219, 0.4); }

.carriles--espera .carril { cursor: default; }
.carriles--espera .carril__pista { filter: saturate(0.4) brightness(0.6); }

.carril input:focus-visible ~ .carril__pista { outline: 3px solid var(--naranja-claro); outline-offset: 2px; }

@media (max-width: 700px) {
  .carriles { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .carril {
    grid-template-columns: 2.25rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: 0.6rem;
  }
  .carril__num { order: -1; }
  .carril__estado { text-align: right; }
  .carril__pista {
    height: 46px;
    background:
      linear-gradient(to left, rgba(20, 12, 6, 0.35), transparent 35%),
      repeating-linear-gradient(0deg, rgba(70, 36, 12, 0.28) 0 1px, transparent 1px 12.5%),
      linear-gradient(0deg, #b67944, #dcab75 50%, #b67944);
  }
  .carril--tomado .carril__pista { background: repeating-linear-gradient(135deg, #2b241d 0 7px, #1b1612 7px 14px); }
  .carril__pinos { left: auto; right: 6px; top: 50%; width: 38px; transform: translateY(-50%) rotate(90deg); }
  .carril__bola { left: 10px; bottom: auto; top: 50%; width: 30px; transform: translateY(-50%) scale(0); }
  .carril--elegido .carril__bola { transform: translateY(-50%) scale(1); }
}


/* ---------- 6. Extras y datos ---------- */
.casilla--zapatos {
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--carbon-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.casilla--zapatos[hidden] { display: none; }

.extras { border-top: 1px solid var(--linea); }
.extra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--linea);
}
.extra__nombre { font-weight: 700; }
.extra__precio { margin-left: 0.4rem; font-weight: 600; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.extra__detalle { font-size: 1rem; color: var(--texto-suave); }
.contador--chico button { width: 48px; min-height: 48px; }
.contador--chico output { font-size: 1.2rem; }

.datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.5rem;
}
.campo--ancho { grid-column: 1 / -1; }
@media (max-width: 640px) { .datos { grid-template-columns: minmax(0, 1fr); } }


/* ---------- 7. Resumen fijo ---------- */
.resumen {
  position: sticky;
  top: calc(var(--nav-alto) + 24px);
  display: grid;
  gap: 1.5rem;
}
.resumen__noche { display: grid; margin-bottom: 0.5rem; }
.resumen__noche div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.3rem;
}
.resumen__noche dt { color: var(--tinta-2); }
.resumen__noche dd { margin: 0; font-weight: 700; text-align: right; }
.resumen__noche .pendiente { color: var(--tinta-2); font-weight: 500; font-style: italic; }
.resumen__errores {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: #fbe0d8;
  border: 1px solid #d3553f;
  border-radius: 6px;
  color: #6e0a0a;
  font-weight: 600;
}
.resumen__errores ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.resumen__errores a { color: inherit; }
.resumen__letra { margin-top: 0.9rem; font-size: 0.95rem; color: var(--tinta-2); text-align: center; }
.resumen__ayuda { color: var(--texto-suave); text-align: center; }
.resumen__ayuda a { color: var(--crema); font-weight: 700; }

@media (max-width: 980px) {
  .resumen { position: static; max-width: 34rem; width: 100%; justify-self: center; }
}


/* ---------- 8. Confirmación con strike ---------- */
.confirmado {
  padding-top: calc(var(--nav-alto) + clamp(2rem, 5vw, 4rem));
  padding-bottom: var(--e-7);
}
.confirmado[hidden] { display: none; }

.lanzamiento {
  position: relative;
  container-type: inline-size;
  height: clamp(90px, 12vw, 130px);
  margin-bottom: var(--e-5);
  overflow: hidden;
  background:
    linear-gradient(to right, transparent 60%, rgba(20, 12, 6, 0.35)),
    repeating-linear-gradient(0deg, rgba(70, 36, 12, 0.26) 0 1px, transparent 1px 8.33%),
    linear-gradient(0deg, #b67944, #e0b07a 50%, #b67944);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.lanzamiento__bola {
  position: absolute;
  top: 50%;
  left: 16px;
  width: clamp(46px, 6vw, 70px);
  aspect-ratio: 1;
  margin-top: calc(clamp(46px, 6vw, 70px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffb3a2 0 7%, #c21a17 34%, #6e0a0a 100%);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
  animation: rodar-bola 1s cubic-bezier(0.35, 0.05, 0.45, 1) 0.25s both;
}
.lanzamiento__pinos {
  position: absolute;
  top: 50%;
  right: 3%;
  height: 78%;
  transform: translateY(-50%);
  fill: #fffaf2;
  overflow: visible;
}
.lanzamiento__pinos circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: volar-pino 0.7s ease-out 1.15s both;
}
.lanzamiento__pinos circle:nth-child(1)  { --dx: 30px;  --dy: -40px; }
.lanzamiento__pinos circle:nth-child(2)  { --dx: 44px;  --dy: -14px; }
.lanzamiento__pinos circle:nth-child(3)  { --dx: 44px;  --dy: 16px; }
.lanzamiento__pinos circle:nth-child(4)  { --dx: 30px;  --dy: 42px; }
.lanzamiento__pinos circle:nth-child(5)  { --dx: 20px;  --dy: -48px; }
.lanzamiento__pinos circle:nth-child(6)  { --dx: 52px;  --dy: 2px; }
.lanzamiento__pinos circle:nth-child(7)  { --dx: 22px;  --dy: 50px; }
.lanzamiento__pinos circle:nth-child(8)  { --dx: 8px;   --dy: -56px; }
.lanzamiento__pinos circle:nth-child(9)  { --dx: 10px;  --dy: 58px; }
.lanzamiento__pinos circle:nth-child(10) { --dx: 60px;  --dy: -4px; }
.lanzamiento__strike {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--tinta);
  animation: aparecer-strike 0.5s var(--salida) 1.2s both;
}

@keyframes rodar-bola {
  to { transform: translateX(calc(100cqw - 100% - 17cqw)); }
}
@keyframes volar-pino {
  to { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0; }
}
@keyframes aparecer-strike {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: none; }
}

.confirmado__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.confirmado__texto { display: grid; gap: 1.75rem; }
.confirmado__texto h2:focus { outline: none; }

.siguientes { display: grid; border-top: 1px solid var(--linea); }
.siguientes li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.siguientes__num {
  font-stretch: 125%;
  font-weight: 850;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--naranja-claro);
}
.siguientes h3 { font-size: 1.2rem; font-weight: 750; }
.siguientes p { color: var(--texto-suave); }

.confirmado__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.confirmado__demo {
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--alerta);
  border-radius: var(--radio);
  color: var(--crema);
}
.confirmado__demo a { font-weight: 700; }

@media (max-width: 900px) {
  .confirmado__grilla { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 9. Barra móvil ---------- */
.resumen-movil { display: none; }

@media (max-width: 980px) {
  .resumen-movil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem var(--margen) calc(0.65rem + env(safe-area-inset-bottom));
    background: rgba(11, 10, 9, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea);
  }
  .resumen-movil[hidden] { display: none; }
  .resumen-movil p { display: grid; line-height: 1.15; }
  .resumen-movil__etiqueta { font-size: 0.9rem; color: var(--texto-suave); }
  .resumen-movil .num { font-weight: 850; font-stretch: 112%; font-size: 1.45rem; }
  .resumen-movil .boton { min-height: 52px; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .aviso-demo { bottom: calc(92px + env(safe-area-inset-bottom)); }
}