@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-09.css — ACTO 9 · «Reserva tu mesa» (el formulario)
   Fichero: web/estilos/sec-09.css        Bloque: F2-secciones · frente S09
   -----------------------------------------------------------------------------------------
   Estilos SOLO de este acto, con prefijo .a9-.
   · 0 HEX literales: todo por tokens var() de tokens.css (regla dura, SPEC §2.8); las
     transparencias van en color-mix() sobre el token correspondiente (mismo criterio que
     sec-07.css), nunca con un HEX suelto.
   · Sin transition:all y sin animaciones propias: la entrada la conduce el motor
     ([data-sc-in], reveal único) y el golpe del sello lo pone .sp-sello.is-estampando
     (componentes.css). Aquí solo hay superficies, tinta y estados.
   · El acto es administrativo y práctico a propósito (BRIEF §4.2): el formulario va en
     cristal (mandato del cliente: la cola funcional va en cristal y ahí manda el contraste)
     y el único adorno es la sala real del local elegido.
   · Contraste: sobre el cristal la tinta es blanca (--cristal-tinta) y el acento mostaza
     (--cristal-tinta-acento) SOLO en el rótulo del local y en el aviso de Gandia, con el
     panel en --fuerte detrás (≈9:1 en el peor caso). El granate nunca es tinta sobre negro.
   ========================================================================================= */

/* ------------------------------------------------------------------ estructura ---------- */
.a9 {
  position: relative;
  --a9-carril: 0px;                /* carril reservado al ticket fijo de la firma (solo ≥901 px) */
}
/* El ticket de «La comanda» vive fijo en el borde derecho (comanda.css: right var(--esp-5),
   ancho min(17rem, 24vw)); en pantallas con ticket lateral se le reserva su carril para que
   ni el formulario ni la foto de la sala queden debajo (misma fórmula que S05 y S07). */
@media (min-width: 901px) {
  .a9 {
    --a9-carril: calc(min(17rem, 24vw) + var(--esp-5) + var(--esp-4));
  }
}
.a9-wrap {
  display: block;
  padding-right: calc(var(--esp-pagina-x) + var(--a9-carril));
}
/* El atributo hidden es LA fuente de verdad de la sala y de la confirmación (lo toca
   sec-09.js): pisa a cualquier display de este fichero, sin excepciones. */
.a9 [hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------- cabecera ---------- */
.a9-cab {
  max-width: 46rem;
}
.a9-sub {
  margin: var(--esp-3) 0 0;
  max-width: var(--ancho-max-texto);
  font-size: var(--fs-p);
  line-height: var(--lh-texto);
  color: var(--sc-ink-soft);       /* blanco al 72 % (≈9:1 sobre negro), definido en pagina.css */
}

/* ------------------------------------------------------------------- dos columnas ------- */
.a9-cuerpo {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-7);
  align-items: start;
}
.a9-col {
  display: grid;
  gap: var(--esp-5);
  min-width: 0;
}
@media (min-width: 901px) {
  .a9-cuerpo {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--esp-6);
  }
}

/* ------------------------------------------------------------------ el formulario ------- */
.a9-form {
  display: grid;
  gap: var(--esp-5);
  min-width: 0;
  padding: var(--esp-5);
  color-scheme: dark;              /* los controles nativos (fecha/hora/número) en oscuro */
}
.a9-grupo {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
}
.a9-grupo--local {
  margin: 0;                       /* fieldset sin marco: el grupo se lee por su leyenda */
  padding: 0;
  border: 0;
}
.a9-leyenda {
  padding: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-small);
  line-height: var(--lh-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--cristal-tinta);
}

/* --- el local: dos casillas grandes; el elegido en mostaza (nunca granate como tinta) --- */
.a9-locales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
}
.a9-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.a9-chip {
  padding-inline: var(--esp-3);
  font-size: var(--fs-small);
  text-align: center;
}
.a9-radio:checked + .a9-chip {
  background-color: var(--sp-mostaza);
  border-color: var(--sp-mostaza);
  color: var(--tinta-sobre-mostaza);     /* negro sobre mostaza: 11,41:1 */
  box-shadow: var(--sombra-mostaza);
}
.a9-radio:focus-visible + .a9-chip {
  outline: none;
  box-shadow: var(--foco-anillo);
}

/* --- día / hora / comensales ------------------------------------------------------------ */
.a9-campos {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: 1fr;
}
.a9-grupo--ancho {
  grid-column: 1 / -1;
}
@media (min-width: 560px) {
  .a9-campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.a9-campo {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--alto-tactil-min);          /* 48px: se rellena desde el móvil */
  padding: var(--esp-2) var(--esp-3);
  background-color: color-mix(in oklab, var(--sp-blanco) 6%, transparent);
  border: var(--borde-tenue);
  border-radius: var(--radio-sm);
  color: var(--sp-blanco);
  font-family: var(--fuente-texto);
  font-size: var(--fs-p);
  line-height: var(--lh-compacto);
}
.a9-campo:hover {
  border-color: color-mix(in oklab, var(--sp-blanco) 30%, transparent);
}
/* `:focus-within` cubre el hueco medido en F8-T04: al tabular por dentro de un input
   `type=date`/`type=time`, Chrome mueve el foco a sus subcampos y el input deja de casar
   `:focus`/`:focus-visible` durante esos pasos — el anillo desaparecía a media tabulación. */
.a9-campo:focus-visible,
.a9-campo:focus-within {
  outline: none;
  border-color: var(--sp-mostaza);
  box-shadow: var(--foco-anillo);
}
.a9-campo[aria-invalid="true"] {
  border-color: var(--estado-error);           /* rojo documentado: 5,25:1 sobre negro */
}

/* --- la opción del reto: solo la enciende sec-09.js con el reto confirmado --------------- */
.a9-grupo--reto {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  background-color: color-mix(in oklab, var(--sp-mostaza) 8%, transparent);
  border: var(--cristal-borde-acento);
  border-radius: var(--radio-sm);
}
.a9-check {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--sp-mostaza);
}
.a9-check__etiqueta {
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-cta);
  line-height: var(--lh-rotulo);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  color: var(--cristal-tinta);
  cursor: pointer;
}

/* --- aviso de validación + envío + notas ------------------------------------------------ */
.a9-error {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  color: var(--estado-error);
}
.a9-nota {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  color: var(--cristal-tinta);
  opacity: .8;
}
.a9-nota--gandia {
  color: var(--cristal-tinta-acento);          /* el aviso de Gandia, en el acento de marca */
  opacity: 1;
}

/* --------------------------------------------------------------- la confirmación -------- */
.a9-ok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
  padding: var(--esp-5);
  border: var(--borde-acento);                 /* 2px mostaza: el estado de éxito del acto */
  border-radius: var(--cristal-radio);
  box-shadow: var(--cristal-sombra), var(--sombra-mostaza);
}
.a9-sello {
  --sello-tam: 6.5rem;
  grid-row: span 3;                            /* el tampón acompaña al bloque entero */
  align-self: center;
}
.a9-ok__titulo {
  grid-column: 2;
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-h5);
  line-height: var(--lh-compacto);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--cristal-tinta);
}
.a9-ok__recap {
  grid-column: 1 / -1;                         /* la línea de datos va a todo el ancho */
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-precio);
  line-height: var(--lh-compacto);
  letter-spacing: var(--ls-pequeno);
  white-space: pre-line;                       /* el salto de línea del recado es deliberado */
  text-wrap: pretty;                           /* sin palabras huérfanas al partir la línea */
  color: var(--cristal-tinta-acento);          /* mostaza sobre cristal fuerte */
}
.a9-ok__dir {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  color: var(--cristal-tinta);
  opacity: .85;
}

/* ---------------------------------------------------------------- la sala real ---------- */
.a9-sala {
  margin: 0;
  overflow: hidden;                /* la foto sangra hasta el borde del cristal */
}
.a9-sala__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;             /* reserva de espacio: la foto ya se sirve recortada a 3:2 */
  object-fit: cover;
}
.a9-sala__pie {
  display: grid;
  gap: var(--esp-1);
  justify-items: start;
  padding: var(--cristal-padding);
}
.a9-sala__nombre {
  margin: 0;
  color: var(--cristal-tinta-acento);          /* mostaza sobre cristal humo */
}
.a9-sala__dir {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  color: var(--cristal-tinta);
  opacity: .88;
}
.a9-sala__accion {
  margin: var(--esp-2) 0 0;
}
.a9-sala__btn {
  padding-inline: var(--esp-5);
}

/* ------------------------------------------------- degradado sin motor de scroll -------- */
/* Si el motor no carga, sec-09.js marca .a9--sin-motor: sin él, [data-sc-in] dejaría el acto
   a opacidad 0 (scrollcraft.css) y la sección quedaría invisible. El formulario funciona
   igual: no depende del motor (SPEC §7: el laboratorio también prueba el caso degradado). */
.a9--sin-motor [data-sc-in] {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------- móvil ----- */
@media (max-width: 560px) {
  .a9-form {
    padding: var(--esp-4);
  }
  .a9-ok {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: var(--esp-4);
  }
  /* A una columna no hay carril del tampón: se apila y cada pieza ocupa su fila. */
  .a9-sello {
    --sello-tam: 5.5rem;
    grid-row: auto;
    align-self: start;
  }
  .a9-ok__titulo,
  .a9-ok__recap,
  .a9-ok__dir {
    grid-column: 1;
  }
  .a9-sala__btn {
    width: 100%;
    padding-inline: var(--esp-4);
  }
}

/* ------------------------------------------------------- prefers-reduced-motion --------- */
/* Nada propio que apagar: la entrada es opacidad + 14px que el motor ya colapsa
   (scrollcraft.css) y el sello aparece sin gesto (componentes.css). El significado no cambia. */