/* Página de reserva: una hoja de libro con el resumen como boleta al lado. */

.cabecera {
  background: var(--arandano);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px);
  color: var(--oro-claro);
  padding: 14px 0;
}
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cabecera a { color: var(--oro-claro); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 21px; }
.cabecera img { height: 22px; width: auto; }
@media (max-width: 560px) { .cabecera a { font-size: 17px; white-space: nowrap; } .cabecera img { height: 17px; } }

.reserva {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
  padding: 40px 0 120px;
}
@media (max-width: 960px) { .reserva { grid-template-columns: 1fr; padding-bottom: 140px; } }

.hoja {
  background: var(--nieve);
  border-radius: var(--radio-hoja);
  box-shadow: var(--sombra-hoja);
  padding: clamp(20px, 4vw, 44px);
}
.hoja h1 { font-size: clamp(32px, 4.6vw, 46px); }
.hoja > p.lead { color: var(--tinta-suave); margin-top: 10px; }

/* Capítulos: el formulario es una secuencia real, por eso va numerado. */
.capitulo { margin-top: 40px; padding-top: 32px; border-top: 1px dashed var(--papel-hondo); }
.capitulo:first-of-type { margin-top: 30px; }
.capitulo__cab { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.capitulo__num {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 18px/1 var(--display);
  background: var(--oro-claro); color: var(--arandano);
  box-shadow: inset 0 0 0 2px var(--oro);
}
.capitulo__cab h2 { font-size: 26px; }
.capitulo__cab p { color: var(--tinta-suave); font-size: 15px; }

/* Día y hora elegidos */
.eleccion { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }

/* Cantidad de niños */
.contador { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.contador__control { display: inline-flex; align-items: center; background: var(--papel); border-radius: 999px; box-shadow: inset 0 0 0 2px var(--papel-hondo); padding: 4px; }
.contador__control button {
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--nieve); color: var(--arandano);
  font: 600 26px/1 var(--texto); cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(59,13,24,.3);
  transition: transform .12s ease;
}
.contador__control button:active { transform: scale(.94); }
.contador__control button[disabled] { opacity: .35; cursor: not-allowed; box-shadow: none; }
.contador__valor { min-width: 64px; text-align: center; font: 700 30px/1 var(--display); }
.contador__nota { color: var(--tinta-suave); font-size: 15px; }

/* Fichas de cada niño */
.ninos { display: grid; gap: 14px; margin-top: 22px; }
.nino {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px; gap: 14px; align-items: end;
  padding: 16px; border-radius: 16px;
  background: var(--papel);
  animation: entra .28s cubic-bezier(.2, .8, .2, 1);
}
.nino__marca {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; align-self: center;
  background: var(--nieve); color: var(--arandano);
  font: 700 18px/1 var(--display);
  box-shadow: inset 0 0 0 2px var(--oro);
}
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .nino { animation: none; } }
@media (max-width: 560px) {
  .nino { grid-template-columns: 36px minmax(0, 1fr); }
  .nino__marca { width: 36px; height: 36px; font-size: 15px; grid-row: span 2; align-self: start; margin-top: 26px; }
  .nino .campo--edad { grid-column: 2; }
}

.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rejilla .ancho { grid-column: 1 / -1; }
.doc { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .rejilla { grid-template-columns: 1fr; } }

/* Aceptaciones */
.acepta { display: grid; gap: 14px; }
.acepta label { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: 16px; }
.acepta input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--arandano); cursor: pointer; }

/* Resumen: una boleta troquelada */
.boleta-resumen {
  position: sticky; top: 24px;
  background: var(--arandano);
  color: var(--oro-claro);
  border-radius: var(--radio-hoja);
  padding: 28px 26px;
  box-shadow: var(--sombra-hoja);
  --muesca: radial-gradient(circle at 0 50%, var(--papel) 12px, transparent 12.5px);
}
.boleta-resumen h2 { font-size: 24px; color: var(--oro-claro); }
.boleta-resumen dl { margin: 18px 0 0; display: grid; gap: 12px; }
.boleta-resumen dt { font-size: 13px; color: #F0C9D0; }
.boleta-resumen dd { margin: 2px 0 0; font-weight: 600; font-size: 17px; color: var(--nieve); }
.boleta-resumen .corte {
  position: relative; height: 0; margin: 22px -26px; border-top: 2px dashed rgba(247,231,193,.45);
}
.boleta-resumen .corte::before, .boleta-resumen .corte::after {
  content: ''; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--papel);
}
.boleta-resumen .corte::before { left: -12px; }
.boleta-resumen .corte::after { right: -12px; }
.boleta-resumen .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.boleta-resumen .total b { font: 700 32px/1 var(--display); color: var(--oro-claro); }
.boleta-resumen .boton { width: 100%; margin-top: 20px; }
.boleta-resumen .reloj { margin-top: 12px; font-size: 14px; color: #F0C9D0; text-align: center; }
.boleta-resumen .aviso-error { color: #FFD7DC; margin-top: 12px; }

@media (max-width: 960px) {
  .boleta-resumen { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 10; border-radius: 22px 22px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .boleta-resumen h2, .boleta-resumen dl, .boleta-resumen .corte { display: none; }
  .boleta-resumen .pie-movil { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
  .boleta-resumen .boton { width: auto; margin-top: 0; padding: 0 22px; }
  .boleta-resumen .total b { font-size: 24px; }
  .boleta-resumen .total span { font-size: 13px; }
  .boleta-resumen .total { flex-direction: column; align-items: start; gap: 4px; }
}

.cambio { color: var(--arandano); font-weight: 600; font-size: 15px; }
.vacio { padding: 18px; border-radius: 16px; background: var(--papel); color: var(--tinta-suave); }