/* =========================================================================
   LA PIEL NUEVA
   =========================================================================

   Solo COMO se ven las cosas. El QUE COLOR, QUE TAMAÑO y QUE HUECO sale de
   `tokens.css`: aqui no puede haber un color ni un tamaño escritos a mano.
   Es lo
   que permite que una app nativa futura lea `tokens.json` y salga igual.

   Esta hoja NO se carga en la interfaz de siempre.
   ========================================================================= */

/* `hidden` ESCONDE. SIEMPRE, y lo primero de la hoja.
 *
 * `[hidden]` vive en la hoja del navegador y cualquier regla nuestra le gana,
 * tenga la especificidad que tenga. Aqui es `.medida label { display: block }`
 * la que la pisaba, y el campo de «cuales» de las alergias salia visible con
 * la casilla sin marcar. Mismo fallo y mismo arreglo que en la hoja de
 * siempre; se escribe en las dos porque nunca se cargan juntas. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Fondo EXPLICITO y desde un token: sin esto, la pagina hereda el fondo de
     lo que haya detras y en modo oscuro sale texto claro sobre blanco. */
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--texto-m);
  line-height: var(--linea-texto);
  -webkit-font-smoothing: antialiased;
}

/* El foco SIEMPRE visible. Nunca `outline: none` sin sustituto: quien navega
   con teclado se queda sin saber donde esta. */
:focus-visible {
  outline: var(--foco-ancho) solid var(--bronce);
  outline-offset: var(--foco-sep);
  border-radius: var(--radio-control);
}

.medida { max-width: var(--medida); margin-inline: auto; padding-inline: var(--e4); }
/* Para lo que no se lee seguido: una rejilla de tarjetas. Ver
   `--medida-ancha`. */
.medida-ancha { max-width: var(--medida-ancha); margin-inline: auto; padding-inline: var(--e4); }

/* LA REJILLA DE TARJETAS DE LA PORTADA, con un minimo mayor que `.rejilla-dos`.
   Aquella arranca en 13rem, que es lo que necesita un par de campos de
   formulario. Una TARJETA no: lleva 2rem de relleno a cada lado, asi que a
   13rem le quedan 148 px de texto y cada frase se parte en cinco renglones.
   Medido en la portada: con 13rem salian cuatro columnas de 212 px y tarjetas
   de hasta 452 px de alto para tres frases.

   Con 17rem caben tres columnas holgadas en la medida ancha y una sola en el
   telefono, sin ningun punto de corte. */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 var(--e4);
}

/* --- La descripcion de un evento, por bloques -----------------------------
   El mismo marcado que la piel de siempre -es una plantilla compartida- y aqui
   solo cambia como se ve. Nada de posiciones: esto se ve en un monitor y en un
   telefono, y lo unico que sobrevive a ese cambio de ancho es el tamano, el
   alineado y la clase de letra. */
.descripcion-evento { margin: 0 0 var(--e6); }
.descripcion-evento > * { margin: 0 0 var(--e4); }
.descripcion-evento > *:last-child { margin-bottom: 0; }

.de-titulo { line-height: var(--linea-titulo); letter-spacing: var(--tracking-titulo); font-weight: 400; }
.de-texto { color: var(--tinta-suave); line-height: 1.65; white-space: pre-line; }
.de-destacado {
  padding: var(--e3) var(--e4); line-height: 1.6;
  background: var(--marfil);
  border-left: 3px solid var(--bronce);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  white-space: pre-line;
}
.de-separador { border: none; border-top: 1px solid var(--arena); margin: var(--e8) 0; }

.descripcion-evento .pequeno { font-size: .85em; }
.descripcion-evento .normal  { font-size: 1em; }
.descripcion-evento .grande  { font-size: 1.35em; }
.descripcion-evento .enorme  { font-size: 1.8em; }
.descripcion-evento .hacia-izquierda { text-align: left; }
.descripcion-evento .hacia-centro    { text-align: center; }
.descripcion-evento .hacia-derecha   { text-align: right; }
.descripcion-evento .letra-gracias     { font-family: var(--serif); }
.descripcion-evento .letra-sin_gracias { font-family: var(--sans); }

.de-imagen { margin-inline: auto; }
.de-imagen img {
  display: block; width: 100%; height: auto; border-radius: var(--radio-carta);
}
.de-imagen figcaption { margin-top: var(--e2); text-align: center; }
.de-imagen.ancho-estrecha { max-width: 45%; }
.de-imagen.ancho-media    { max-width: 70%; }
.de-imagen.ancho-completa { max-width: 100%; }
/* En el telefono todas a ancho completo: una imagen al 45% de 360 px son
   160 px, que no es una foto, es un sello. */
@media (max-width: 560px) {
  .de-imagen.ancho-estrecha, .de-imagen.ancho-media { max-width: 100%; }
}

/* --- Las pantallas compartidas con la piel de siempre ---------------------
   El resguardo de la reserva, regalar una experiencia y la pagina del regalo
   son UNA plantilla para las dos pieles: no cambia la maqueta, solo el
   aspecto. Y por eso no traen columna propia -la de siempre se la pone su
   base- y aqui se quedaban a todo el ancho del monitor y pegadas al borde de
   la pantalla en el movil.

   La columna se la pone `premium/base.html`, y esto es solo el aire de arriba
   y de abajo: sin el, la tarjeta arranca pegada al borde superior.

   Los titulos tambien se quedaban en el tamaño de fabrica del navegador -un
   `h1` a 2em, mas grande que cualquier titular de esta piel-, porque aqui los
   titulares se marcan con `.titular` y estas plantillas no lo usan. */
.pagina-simple { padding-block: var(--e12) var(--e16); }
.pagina-simple h1 {
  font-family: var(--serif);
  font-size: var(--texto-xl);
  line-height: var(--linea-titulo);
  letter-spacing: var(--tracking-titulo);
  font-weight: 400;
  margin: 0 0 var(--e2);
  text-wrap: balance;
}
.pagina-simple h2 { font-size: var(--texto-l); margin: 0 0 var(--e3); }
/* Una tarjeta debajo de otra ya lleva su separacion: `.tarjeta` tiene margen
   inferior en esta piel. La clase existe para que la plantilla sea la misma. */
.pagina-simple .apilada { margin-top: 0; }
.pagina-simple .apartado { margin-top: var(--e8); }
.pagina-simple .volver { margin-top: var(--e6); }
/* El cartel del evento, arriba de la tarjeta. Mismo tratamiento que en la piel
   de siempre: ancho completo y sin deformar. */
.pagina-simple .cartel-evento-grande {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio-carta); margin-bottom: var(--e6);
}

/* LAS SEIS CLASES QUE LES FALTABAN A LAS PANTALLAS COMPARTIDAS.
   ---------------------------------------------------------------------------
   Al pasar el resguardo, la consulta, el evento, los dos pagos y la privacidad
   a esta base, sus plantillas venian con seis clases que solo existian en la
   hoja de siempre. Sin ellas la maqueta no se rompe -son detalles- pero un
   precio tachado que no se tacha dice justo lo contrario de lo que quiere
   decir, asi que se portan, y con los tokens de esta piel en vez de con los
   valores que tenian escritos.

   Son SEIS y no trece: las otras siete son de la portada de la plataforma, que
   tiene maqueta propia y va aparte. */
.tarjeta.centrada { text-align: center; }

/* Las definiciones de la pagina de privacidad: parrafos largos que se leen
   seguidos, no una tabla de datos. */
.detalle-largo dd { line-height: var(--linea-texto); margin-bottom: var(--e6); }

/* El formulario en columnas que se acomodan solas. `minmax` y no un numero de
   columnas fijo: en el telefono tiene que caer a una sola sin punto de corte. */
.rejilla-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--columna-formulario), 1fr));
  gap: 0 var(--e4);
  align-items: end;
  margin-top: var(--e4);
}
.rejilla-formulario .ancho-total { grid-column: 1 / -1; }

/* La pildora que marca un extra en la ficha de un evento. */
.marca-extra {
  font-size: var(--texto-xs);
  font-weight: 600;
  border-radius: var(--radio-pildora);
  padding: var(--e1) var(--e2);
  margin-left: var(--e1);
  background: color-mix(in srgb, var(--bronce) 14%, transparent);
  color: var(--bronce);
}
.marca-extra.alerta { color: var(--granate); }

/* LAS SEIS DE «SIN SITIO» Y «VERIFICAR», las dos ultimas pantallas publicas
   que quedaban en la base de siempre. Mismo criterio que las de arriba: se
   portan con los tokens de esta piel, no con los valores que tenian escritos.
   ------------------------------------------------------------------------ */

/* Las horas alternativas cuando no hay hueco a la que se pidio. */
.huecos-sin-sitio {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin: var(--e2) 0 var(--e4);
}
.huecos-sin-sitio form { margin: 0; }
.titulo-huecos { font-size: var(--texto-m); margin: var(--e6) 0 var(--e1); }

/* Una lista de cosas con su accion a la derecha. Sin viñetas: no es una
   enumeracion, son filas. */
.lista-menuda { list-style: none; margin: var(--e1) 0; padding: 0; font-size: var(--texto-s); }
.lista-menuda li {
  display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap;
  padding: var(--e1) 0; border-bottom: 1px solid var(--arena);
}
.lista-menuda li:last-child { border-bottom: none; }
.lista-menuda form { margin: 0; margin-left: auto; }

/* Un formulario que va dentro de una frase y no debe romper el renglon. */
.linea { display: inline; margin: 0; }

/* EL CAMPO DE LA CLAVE DEL SMS. Grande y separado: son seis cifras que se
   copian de la pantalla del movil mirando de una a otra, y juntas se leen mal.
   El `text-indent` compensa el hueco que `letter-spacing` deja DETRAS de la
   ultima cifra, que si no descentra el texto. */
.campo-codigo {
  text-align: center;
  font-size: var(--texto-xl);
  font-weight: 600;
  letter-spacing: .4em;
  text-indent: .4em;
  padding: var(--e3) var(--e2);
}
.reenviar-codigo { margin-top: var(--e6); text-align: center; }

/* El precio anterior, tachado. Con `line-through` y NO solo en gris: en un
   descuento, el color por si solo no dice que ese precio ya no vale. */
.precio-antes { text-decoration: line-through; color: var(--tinta-suave); }


/* --- Cabecera editorial ---------------------------------------------------
   La variante TIPOGRAFICA es la principal: no hay presupuesto de fotografia y
   una foto de banco en la pagina de un restaurante real seria una afirmacion
   falsa sobre ese negocio. Asi que esto tiene que sostenerse solo. */
.cabecera-editorial {
  padding: var(--e16) 0 var(--e12);
  border-bottom: 1px solid var(--arena);
  position: relative;
}
.cabecera-medida {
  max-width: var(--medida); margin-inline: auto; padding-inline: var(--e4);
}
.eyebrow {
  font-family: var(--mono);
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--bronce);
  margin: 0 0 var(--e4);
}
.titular {
  font-family: var(--serif);
  font-size: var(--texto-2xl);
  line-height: var(--linea-titulo);
  letter-spacing: var(--tracking-titulo);
  font-weight: 400;
  margin: 0 0 var(--e4);
  /* Que no quede una palabra sola en la ultima linea. */
  text-wrap: balance;
}
.bajada {
  font-family: var(--serif);
  font-size: var(--texto-l);
  color: var(--tinta-suave);
  margin: 0 0 var(--e8);
  max-width: 30rem;
}

/* Con foto, el texto no se mueve: solo cambia el fondo. La maqueta es la
   misma con y sin ella, que es lo que permite que la version tipografica no
   parezca un apaño. */
.cabecera-editorial.con-foto {
  background-image:
    linear-gradient(to top, rgba(20, 18, 15, .78), rgba(20, 18, 15, .25) 60%),
    var(--foto);
  background-size: cover;
  background-position: center;
}
.cabecera-editorial.con-foto .titular,
.cabecera-editorial.con-foto .bajada { color: var(--sobre-foto); }

/* --- La accion, y hay UNA por pantalla ----------------------------------- */
.accion {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tactil-min);
  padding: 0 var(--e6);
  background: var(--bronce);
  /* La letra de encima la decide el servidor por luminancia, no el marfil a
     ciegas: con un acento claro, marfil sobre marfil no se lee. */
  color: var(--sobre-acento);
  border: none; border-radius: var(--radio-control);
  font: inherit; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--curva);
}
.accion:hover { background: color-mix(in srgb, var(--bronce) 88%, var(--tinta)); }
.accion:active { background: color-mix(in srgb, var(--bronce) 78%, var(--tinta)); }
/* Desactivado NUNCA solo gris: un boton gris y uno apagado se confunden. */
.accion[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Franja de horarios ---------------------------------------------------
   Tres señales por hueco: color, forma y texto. Si un dia se quita el texto,
   hay que poner otra cosa en su sitio, no dejarlo en el color. */
.franja-horarios { margin: var(--e8) 0; }
.franja-titulo {
  font-family: var(--sans);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e3);
}
.franja-pista {
  display: flex; gap: var(--e2);
  overflow-x: auto;
  /* El desplazamiento se para en cada hueco: en el movil, una franja libre
     deja siempre una hora cortada por la mitad. */
  scroll-snap-type: x proximity;
  padding-bottom: var(--e2);
  /* La barra de desplazamiento no debe tapar la ultima etiqueta. */
  scrollbar-width: thin;
}
.hueco {
  flex: none;
  scroll-snap-align: start;
  width: 5.5rem;
  min-height: var(--tactil-min);
  padding: var(--e2) var(--e1);
  background: var(--papel);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--e1);
  transition: border-color var(--dur-rapida) var(--curva);
}
.hueco:hover { border-color: var(--bronce); }

/* LA HORA ELEGIDA SE QUEDA MARCADA.
 *
 * El guion ya le ponia `.elegido` al pulsarla —y la hoja de siempre ya la
 * pintaba— pero **esta piel no tenia la regla**, asi que en el widget se
 * pulsaba una hora y no cambiaba nada: la unica forma de saber cual habias
 * elegido era acordarte. Justo el paso donde mas importa, porque es el que
 * decide la reserva.
 *
 * Es la misma trampa de siempre en este proyecto: las dos hojas no se cargan
 * nunca juntas, cada restaurante usa una, y lo que solo esta en una no existe
 * para la mitad de los clientes.
 *
 * Se pinta como los botones de «carta o menu» y como el dia elegido del
 * calendario: macizo, del color de marca. Tres controles que significan lo
 * mismo -«esto es lo que has elegido»- tienen que verse igual.
 *
 * `border-color` tambien, y no solo el fondo: el borde claro de al lado
 * dibujaria una linea alrededor del relleno y se veria como un boton
 * a medio pintar. */
.hueco.elegido {
  background: var(--bronce); border-color: var(--bronce);
  color: var(--sobre-acento); font-weight: 600;
}
/* El punto de estado y la etiqueta van dentro: sobre el relleno tienen que
   cambiar de color con el, o se quedan del tono de antes y no se leen. */
.hueco.elegido .marca { background: var(--sobre-acento); box-shadow: none; }
.hueco.elegido .etiqueta { color: var(--sobre-acento); }

.marca {
  width: var(--punto-estado); height: var(--punto-estado);
  border-radius: 50%;
  border: 2px solid var(--bronce);
  background: var(--bronce);
}
.hora {
  font-family: var(--mono);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}
.etiqueta {
  font-size: var(--texto-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.hueco.recomendado { border-color: var(--bronce); }
.hueco.recomendado .marca { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bronce) 25%, transparent); }

.hueco.ultimas .marca {
  border-color: var(--ambar-aviso);
  /* Media luna: la FORMA distingue, no solo el color. */
  background: linear-gradient(90deg, var(--ambar-aviso) 50%, transparent 50%);
}
.hueco.ultimas .etiqueta { color: var(--ambar-aviso); font-weight: 600; }

/* El hueco lleno no es un boton: un boton desactivado no recibe foco y no
   puede explicarse a quien navega con teclado. Es un dato. */
.hueco.lleno {
  cursor: default;
  background: transparent;
  border-style: dashed;
}
.hueco.lleno:hover { border-color: var(--arena); }
.hueco.lleno .marca { border-color: var(--piedra); background: transparent; }
.hueco.lleno .hora { text-decoration: line-through; color: var(--piedra); }
.hueco.lleno .etiqueta { color: var(--piedra); }

.franja-pie {
  font-size: var(--texto-s);
  color: var(--tinta-suave);
  margin: var(--e3) 0 0;
}

/* --- Movimiento reducido -------------------------------------------------
   Quien lo ha pedido en su sistema no lo tiene. No es opcional. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Telefono ------------------------------------------------------------
   700 A PELO Y NO `var(--corte-telefono)`: una consulta de medios no puede
   leer una variable CSS. Es una limitacion del lenguaje, no un descuido, y es
   el unico numero de esta hoja que no sale de un token. El valor esta en
   `tokens.css` para quien lea el JSON, y aqui repetido porque no hay otra. */
@media (max-width: 700px) {
  .cabecera-editorial { padding: var(--e12) 0 var(--e8); }
  /* Los margenes se SUMAN y en un telefono eso es un cuarto de pantalla: ya
     paso en el panel, con 20 px del contenido mas 28 de la tarjeta dejando el
     formulario en 277 de 375. */
  .cabecera-medida, .medida { padding-inline: var(--e3); }
  .accion { width: 100%; }
}

/* =========================================================================
   EL FORMULARIO DE RESERVA, EN LA PIEL NUEVA
   =========================================================================

   El marcado lo comparten las dos pieles -`publico/_formulario_reserva.html`-
   porque ahi dentro hay una decena de ramas que son reglas de negocio y
   duplicarlas seria garantizar que un dia se separen.

   El precio de compartirlo es que las clases vienen con el nombre de siempre.
   Y eso no es una fealdad que haya que tapar: son nombres SEMANTICOS
   -«rejilla de dos», «casilla», «aviso»- y lo que cambia entre pieles es como
   se ven, no lo que son. Vestirlas aqui con otro aspecto es exactamente lo que
   se queria poder hacer.
   ========================================================================= */

.tarjeta-reserva {
  background: var(--papel);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
  box-shadow: var(--sombra-carta);
  padding: var(--e8);
}

/* --- Campos --------------------------------------------------------------
   Etiqueta ENCIMA y no al lado: al lado obliga a decidir un ancho para la
   etiqueta, y en cuanto una es larga se desalinea todo. */
.medida label, .tarjeta-reserva label {
  display: block;
  margin-bottom: var(--e4);
}
.medida label > span, .tarjeta-reserva label > span {
  display: block;
  font-size: var(--texto-s);
  font-weight: 600;
  margin-bottom: var(--e2);
}
.medida label em, .tarjeta-reserva label em {
  font-style: normal;
  font-weight: 400;
  color: var(--tinta-suave);
}

.tarjeta-reserva input[type=text],
.tarjeta-reserva input[type=tel],
.tarjeta-reserva input[type=email],
.tarjeta-reserva input[type=date],
.tarjeta-reserva input[type=number],
.tarjeta-reserva select,
.tarjeta-reserva textarea {
  width: 100%;
  min-height: var(--tactil-min);
  padding: var(--e2) var(--e3);
  font: inherit;
  color: var(--tinta);
  background: var(--marfil);
  border: 1px solid var(--piedra);
  border-radius: var(--radio-control);
}
.tarjeta-reserva textarea { min-height: 5rem; resize: vertical; }
.tarjeta-reserva input:focus, .tarjeta-reserva select:focus,
.tarjeta-reserva textarea:focus { border-color: var(--bronce); }

/* Dos columnas donde caben; una donde no. `auto-fit` en vez de un punto de
   corte: asi se parte cuando lo pide el contenido y no cuando lo dice una
   medida escrita a mano. */
.rejilla-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 var(--e4);
}

/* --- Casillas ------------------------------------------------------------
   La casilla y su texto son un solo objetivo: pulsar el texto la marca, que es
   lo que espera cualquiera y lo que hace que se pueda usar con el dedo. */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-height: var(--tactil-min);
  cursor: pointer;
}
.casilla input { margin-top: .3rem; flex: none; }
.casilla span { font-weight: 400; }
.casilla small {
  display: block;
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

/* --- Extras y desplegables ----------------------------------------------- */
.bloque { border: none; margin: 0 0 var(--e8); padding: 0; }
.bloque legend {
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0;
  margin-bottom: var(--e3);
}
/* LAS PREGUNTAS DEL RESTAURANTE, EN DOS COLUMNAS.
 *
 * Iban una debajo de otra: ocho o diez renglones de preguntas cortas -«trona»,
 * «carrito», «alergias»- justo antes del botón de reservar, con el botón fuera
 * de la pantalla mientras se contestan. Cuanto más largo es un formulario de
 * reserva, más gente lo abandona a mitad.
 *
 * `auto-fit` con un mínimo y no dos columnas fijas: en un móvil, o en un
 * iframe metido en una barra lateral estrecha, sale UNA sola, que es lo que
 * tiene que salir. Nadie tiene que elegir el número de columnas.
 *
 * EL MINIMO ES 8rem Y NO 12, Y ESO ES LO QUE DECIDE EL MOVIL.
 *
 * Con 12rem hacian falta 396px para dos columnas, asi que en un telefono salia
 * una sola. A peticion: en el movil tambien de dos en dos. Con 8rem caben dos
 * desde unos 280px de hueco, o sea desde un telefono normal.
 *
 * Queda estrecho -«Marca si necesitas trona para un nino» ocupa tres
 * renglones- y aun asi sale a cuenta: son tres renglones ANCHOS contra dos
 * preguntas apiladas, y lo que se gana es que el boton de reservar entre en la
 * pantalla antes.
 *
 * Y sigue habiendo suelo: en un telefono muy estrecho -320px- no caben dos de
 * 8rem y vuelve a una sola columna sin que nadie haga nada. Eso es `auto-fit`
 * y por eso no hay ninguna media query aqui.
 *
 * ESTO VA AQUÍ Y TAMBIÉN EN `estilo.css`, y no es un descuido: las dos hojas
 * no se cargan nunca juntas -cada restaurante usa una piel- así que lo que
 * solo esté en una no existe para la mitad de los clientes. Se escribió
 * primero solo en la de siempre y el widget siguió igual, porque el widget
 * lleva esta. */
.extras {
  display: grid; gap: var(--e2) var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  align-items: start;
}

/* La casilla y su detalle son UNA celda, no dos. Sueltos caían en columnas
   distintas: «Alergias» a la izquierda y «¿cuáles?» a la derecha, sin que se
   viera que uno es del otro. Ver `_formulario_reserva.html`. */
.extra-uno { display: flex; flex-direction: column; gap: var(--e1); }

/* Los dos códigos opcionales, en paralelo: son cortos, casi nadie los rellena,
   y uno debajo de otro son dos renglones de scroll para nada. */
.pareja-campos {
  display: grid; gap: var(--e1) var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.extra { display: block; }
.extra-campo { margin-top: var(--e2); }
.detalle-extra { margin-top: var(--e2); }
/* «¿Cuántas?» y su hueco en la misma línea, como en la hoja de siempre: la
   etiqueta es una palabra y el número tiene dos dígitos. Se escribe en las dos
   porque nunca se cargan juntas. */
.detalle-extra.cuantas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
.detalle-extra.cuantas > span { display: inline; margin: 0; }
.detalle-extra.cuantas input[type=number] { width: 4.5rem; }
/* Cuántas entradas: un número de dos cifras, estrecho. Mismo motivo y mismo
   ancho que arriba; se escribe en las dos hojas porque nunca se cargan juntas.
   Con el tipo delante: un selector de atributo pesa lo mismo que una clase, y
   sin él la regla general del ancho completo le gana. */
input[type=number].hueco-cifras { width: 5rem; }
.abre-detalle { cursor: pointer; }
.ofertas { margin-top: var(--e4); }

/* --- Avisos --------------------------------------------------------------
   Nunca solo color: llevan borde y texto. Un aviso que solo se distingue por
   el tono no lo ve quien no distingue ese tono. */
.aviso, .aviso-grupo, .aviso-privacidad {
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--ambar-aviso);
  background: color-mix(in srgb, var(--ambar-aviso) 8%, transparent);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  font-size: var(--texto-s);
  margin: var(--e4) 0;
}
.aviso-privacidad { border-left-color: var(--piedra); background: transparent; }

.apunte { font-size: var(--texto-s); color: var(--tinta-suave); }

/* --- Las pestañas del widget ---------------------------------------------
   Reservar / Eventos / Regalar. La marca de cuál está abierta son DOS cosas y
   no una: el subrayado de bronce y el peso del texto. Con el color solo, quien
   no distingue ese tono no sabe en cuál está.

   La activa no es un enlace -es un `span`-, así que aquí no se hereda ningún
   color de enlace y hay que ponerlo. */
.pestanas {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  margin: 0 0 var(--e6);
  border-bottom: 1px solid var(--arena);
}
.pestana {
  display: flex; align-items: center;
  min-height: var(--tactil-min);
  padding: 0 var(--e4);
  color: var(--tinta-suave); text-decoration: none;
  font-size: var(--texto-s); font-weight: 500;
  letter-spacing: .02em;
  /* El borde va SIEMPRE, transparente en las apagadas: puesto solo en la
     activa, al cambiar de pestaña las demás se mueven dos píxeles. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-rapida) var(--curva);
}
.pestana:hover { color: var(--tinta); }
.pestana.activa {
  color: var(--tinta); font-weight: 700;
  border-bottom-color: var(--bronce);
}

/* --- Botones -------------------------------------------------------------
   `.boton` es el de siempre; aqui se viste como la accion de esta piel. */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tactil-min);
  padding: 0 var(--e6);
  background: var(--bronce);
  color: var(--sobre-acento);
  border: none; border-radius: var(--radio-control);
  font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-rapida) var(--curva);
}
.boton:hover { background: color-mix(in srgb, var(--bronce) 88%, var(--tinta)); }
.boton.grande { width: 100%; font-size: var(--texto-l); min-height: 3.5rem; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Las horas que pinta el guion compartido -----------------------------
   El guion escribe `<button class="hueco">` con la hora dentro, sin las
   etiquetas de la franja: es marcado de la piel de siempre. Aqui se le da el
   aspecto de esta sin tocarlo. */
.tarjeta-reserva .hueco { width: auto; min-width: 4.5rem; }

.logo-portada img { max-height: 4rem; width: auto; }
.logo-portada { text-align: center; margin: 0 0 var(--e4); }
/* Dentro de la cabecera editorial va alineado con el nombre -a la izquierda-,
   no centrado: centrado rompe la unica linea vertical que tiene esta piel. */
.logo-cabecera { text-align: left; }
.centrado { text-align: center; }
.aviso-widget {
  border-left: 3px solid var(--bronce);
  padding: var(--e3) var(--e4);
  margin: 0 0 var(--e6);
  font-size: var(--texto-s);
}

/* --- El resguardo de la reserva ------------------------------------------
   Misma plantilla que la piel de siempre -no cambia la maqueta, solo el
   aspecto-, asi que aqui se visten sus clases. */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
  box-shadow: var(--sombra-carta);
  padding: var(--e8);
  margin-bottom: var(--e6);
}
.parrafo { margin: 0 0 var(--e4); }

/* EL CODIGO ES LO QUE SE ENSEÑA EN LA PUERTA, asi que se lee de lejos y se
   puede seleccionar con el dedo. Nunca una imagen: hay que poder copiarlo. */
.codigo {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--texto-xl);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  padding: var(--e2) var(--e4);
  background: var(--marfil);
  border: 1px dashed var(--piedra);
  border-radius: var(--radio-control);
  user-select: all;
}

.detalle { display: grid; gap: var(--e2); margin: var(--e6) 0; }
.detalle > div { display: flex; gap: var(--e3); justify-content: space-between;
                 padding-bottom: var(--e2); border-bottom: 1px solid var(--arena); }

/* El estado, con COLOR Y TEXTO. La etiqueta lleva el nombre del estado
   escrito: un cliente daltonico tiene que poder saber si su reserva esta
   confirmada, y eso no se deja en un tono. */
.etiqueta {
  display: inline-block;
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.etiqueta.confirmada {
  color: var(--verde-mesa);
  background: color-mix(in srgb, var(--verde-mesa) 14%, transparent);
}
.etiqueta.pendiente {
  color: var(--ambar-aviso);
  background: color-mix(in srgb, var(--ambar-aviso) 14%, transparent);
}
.etiqueta.cancelada {
  color: var(--granate);
  background: color-mix(in srgb, var(--granate) 14%, transparent);
}

/* Anular no puede parecer la accion principal: el bronce se reserva para
   reservar. Va en granate y con borde, no relleno. */
.boton.peligro {
  background: transparent;
  color: var(--granate);
  border: 1px solid var(--granate);
}
.boton.peligro:hover {
  background: color-mix(in srgb, var(--granate) 10%, transparent);
}
.boton.secundario {
  background: transparent;
  color: var(--bronce);
  border: 1px solid var(--piedra);
}
.boton.secundario:hover { background: var(--marfil); }
.boton.pequeno { min-height: var(--tactil-min); font-size: var(--texto-s); padding: 0 var(--e4); }

/* --- Lo que pinta el guion compartido -------------------------------------
   `/horas` devuelve `publico/_horas.html`, que es marcado de la piel de
   siempre y lo usan LAS DOS. Sus clases tenian que estar aqui y no estaban:
   sin `.huecos`, cada hora caia en su propia linea y estirada de lado a lado,
   porque un `<button>` suelto dentro de un bloque hace justo eso.

   Se vio en el widget de un restaurante de verdad, no en las pruebas: mi
   comprobacion de clases huerfanas solo miraba las plantillas de `premium/` y
   estas viven en `publico/`. Ya mira las dos. */
.turno { margin-bottom: var(--e6); }
.turno h3 {
  font-family: var(--sans);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e3);
}

/* EN FILA Y QUE ENVUELVA. Es la regla que faltaba. */
.huecos { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* El cronometro de la ficha que se retrasa. Tabular para que el numero no
   baile de lado mientras corre. */
.ficha-crono {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--texto-xs);
  /* `--radio-pildora` y no 999px a mano: en esta hoja los tamanos salen de
     tokens, y ademas el token ya existe para esto exactamente. */
  padding: .05rem var(--e2); border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--bronce) 18%, transparent);
  color: var(--bronce);
  white-space: nowrap;
}
/* Se acabo el tiempo: rojo. Ha dejado de ser «mira esto». */
.ficha-crono.agotado {
  background: color-mix(in srgb, var(--rojo) 18%, transparent);
  color: var(--rojo);
}

/* Dos campos en el hueco de uno, para los ajustes que son la misma decision
   partida en dos. */
.a-la-mitad {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: end;
}

/* --- Cambiar la reserva desde el enlace del correo ------------------------ */
/* Lo PRIMERO que se le ofrece a quien llega por su correo. Recuadrado y a la
   vista, no plegado: estuvo dentro de un desplegable, nadie lo abria, y el que
   llegaba tarde pulsaba el boton rojo de anular y volvia a reservar. */
.tarjeta-cambio {
  margin-top: var(--e5); padding: var(--e4);
  background: var(--marfil);
  border: 1px solid var(--arena); border-radius: var(--radio-carta);
}
.tarjeta-cambio h3 { margin: 0 0 var(--e2); }
.cambiar-reserva {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3);
  margin: var(--e3) 0;
}
.cambiar-reserva label { display: flex; flex-direction: column; gap: .25rem; }
/* Grandes a proposito: es lo unico que el cliente viene a hacer aqui, muchas
   veces desde el movil. Y «Cuantos» del mismo tamano que la hora y en la misma
   linea: son las dos mitades de la misma pregunta. */
.cambiar-reserva span { font-size: 1rem; font-weight: 600; }
.cambiar-reserva select,
.cambiar-reserva input[type=number] {
  /* 2.75rem son los 44 px de alto de dedo de las guias de accesibilidad. En
     rem y no en px porque esta hoja no admite tamanos sueltos en pixeles: los
     px salen de tokens, y un alto de dedo no es un token, es una medida del
     mundo. */
  font-size: 1.15rem; padding: .5rem .6rem; min-height: 2.75rem;
}
.cambiar-reserva select { width: auto; min-width: 7.5rem; }
.cambiar-reserva input[type=number] { width: 5.5rem; text-align: center; }

/* Y anular, abajo y sin gritar: un enlace, no un boton rojo. Sigue estando
   -quien no puede venir tiene que soltar la mesa, o es un no-show- pero ya no
   se lleva la atencion de quien solo llegaba tarde. */
.anular-discreto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem;
  margin-top: var(--e5);
}
.anular-discreto form { margin: 0; }
.anular-discreto .apunte { margin: 0; }

/* --- El detalle de «hoy no ha podido ser» --------------------------------- */
/* Va justo debajo de las alternativas y con su misma carta, no con otra: son
   dos respuestas al mismo «no hay mesa» y en pantalla tienen que leerse como
   una sola conversacion. Lo que cambia es el orden, no el aspecto: primero se
   intenta darle mesa esta noche, aunque sea en otro sitio; esto es lo que
   queda cuando eso tampoco. */
.pedir-detalle {
  margin: var(--e3) 0 0;
  padding: var(--e4);
  background: var(--marfil);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
}
.detalle-titulo { margin: 0 0 var(--e2); font-weight: 600; }
.detalle-linea {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e2); margin: var(--e3) 0;
}
.detalle-linea input[type=email] { flex: 1; min-width: 11rem; width: auto; }

/* --- Alternativas: «no hay hueco, pero en el de al lado si» --------------- */
.alternativas {
  margin: var(--e4) 0 0;
  padding: var(--e4);
  background: var(--marfil);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
}
.alternativas-titulo { margin: 0 0 var(--e3); font-weight: 600; }
.alternativa {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  padding: var(--e2) 0;
  border-top: 1px solid var(--arena);
}
.alternativa:first-of-type { border-top: none; padding-top: 0; }
.alternativa-ir { display: flex; gap: var(--e2); }
/* Lo unico que se dice de la ocupacion del otro, y solo cuando se ha
   comprobado: que le quedan mesas. Ni cuantas, ni a que horas. */
.alternativa-libre {
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--verde-mesa) 16%, transparent);
  color: var(--verde-mesa);
  font-size: var(--texto-xs);
  font-weight: 700;
}

.evento-del-dia { margin-bottom: var(--e6); }

/* EL PIE DE LA PAGINA PUBLICA: la direccion y el telefono.
   En una linea y centrado, separado del contenido por aire y no por una raya:
   esta piel no dibuja cajas si puede evitarlo. Se parte solo en el movil. */
.pie {
  display: flex; gap: var(--e6); justify-content: center; flex-wrap: wrap;
  padding: var(--e12) var(--e4) var(--e8);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  text-align: center;
}
.pie .mensaje-publico { flex-basis: 100%; margin: 0 0 var(--e2); }

/* El pie del widget incrustado, que lo pone la base de siempre. */
.pie-widget { margin-top: var(--e8); text-align: center; }
.mensaje-publico { font-family: var(--serif); color: var(--tinta-suave); }
.menudo { font-size: var(--texto-s); color: var(--tinta-suave); }

/* --- La cartelera de eventos ---------------------------------------------
   La rellena el guion compartido cada vez que cambia la fecha. Sus clases
   tampoco estaban: las caza la comprobacion ampliada, que ahora mira los
   parciales de `publico/` ademas de los de `premium/`. */
.cartelera { margin-top: var(--e8); }
.cartelera h3 {
  font-family: var(--sans);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e3);
}
.cartelera-nombre {
  font-family: var(--serif);
  font-size: var(--texto-l);
  display: block;
}
/* La fecha, en cifras alineadas: una lista de eventos se lee en columna. */
.cartelera-fecha {
  font-family: var(--mono);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}

/* =========================================================================
   EL CALENDARIO
   =========================================================================

   Lo construye `calendario.js` DESDE JAVASCRIPT, asi que sus clases no salen
   en ninguna plantilla: la comprobacion de clases huerfanas no podia verlas y
   la piel nueva lo pintaba con lo que hubiera, que era nada. Se veian unas
   cajitas apretadas con borde y las letras de los dias pegadas.

   Se escribe entero aqui, y con mas cuidado que el de siempre en tres cosas:
   los dias son ZONA TACTIL de verdad, el festivo se distingue sin depender del
   color, y el mes se lee antes que los numeros.
   ========================================================================= */

.calendario { position: relative; display: block; }

/* El boton tiene que parecer el campo que sustituye: en una fila con otros
   campos, uno distinto canta. */
.calendario-valor {
  width: 100%;
  min-height: var(--tactil-min);
  padding: var(--e2) var(--e3);
  text-align: left;
  font: inherit;
  color: var(--tinta);
  background: var(--marfil);
  border: 1px solid var(--piedra);
  border-radius: var(--radio-control);
  cursor: pointer;
}
.calendario-valor:hover { border-color: var(--bronce); }
.calendario-valor.vacio { color: var(--tinta-suave); }

.calendario-panel {
  position: absolute; z-index: var(--capa-flotante);
  top: calc(100% + var(--e2)); left: 0;
  width: 21rem; max-width: calc(100vw - 2rem);
  padding: var(--e4);
  background: var(--papel);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
  box-shadow: var(--sombra-flotante);
}

/* EL MES, PRIMERO Y GRANDE. Es lo que se busca al abrir un calendario; los
   numeros vienen despues. En el de siempre iba al mismo tamaño que todo lo
   demas y se leia al final. */
.calendario-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.calendario-cabecera strong {
  font-family: var(--serif);
  font-size: var(--texto-l);
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0;
}
.calendario-flecha {
  /* Cuadradas y de dedo: se pulsan varias veces seguidas para ir a un mes
     lejano, y una flecha pequeña se falla una de cada tres. */
  min-width: var(--tactil-min); min-height: var(--tactil-min);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--arena); border-radius: var(--radio-control);
  background: none; color: var(--tinta-suave);
  font: inherit; font-size: var(--texto-l); line-height: 1;
  cursor: pointer;
}
.calendario-flecha:hover { border-color: var(--bronce); color: var(--bronce); }

.calendario-semana, .calendario-rejilla {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--e1);
}
/* Las iniciales de los dias, separadas de la rejilla por una linea: pegadas a
   los numeros se leen como una fila mas de fechas. */
.calendario-semana {
  padding-bottom: var(--e2); margin-bottom: var(--e2);
  border-bottom: 1px solid var(--arena);
}
.calendario-semana span {
  text-align: center;
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tinta-suave);
}

.calendario-dia {
  aspect-ratio: 1 / 1;
  min-height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  background: none; color: var(--tinta);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--curva);
}
.calendario-dia:hover:not(:disabled) { background: var(--arena); }
.calendario-dia.otro-mes { color: var(--piedra); }
/* Hoy: un punto debajo, no un borde. Un borde en una rejilla de bordes no se
   ve; un punto si, y no compite con el dia elegido. */
.calendario-dia.hoy { font-weight: 700; position: relative; }
.calendario-dia.hoy::after {
  content: ""; position: absolute; bottom: .35rem;
  width: var(--punto-menudo); height: var(--punto-menudo); border-radius: 50%;
  background: var(--tinta-suave);
}
.calendario-dia:disabled { color: var(--piedra); cursor: default; opacity: .5; }

/* El dia elegido: relleno de bronce. Es el unico sitio del calendario donde
   aparece el acento, para que se encuentre de un vistazo. */
.calendario-dia.elegido {
  background: var(--bronce); color: var(--sobre-acento); font-weight: 700;
}
.calendario-dia.elegido:hover { background: var(--bronce); }
.calendario-dia.elegido.hoy::after { background: var(--sobre-acento); }

/* EL FESTIVO, CON TRES SEÑALES. En granate, en negrita y con un punto encima:
   quien no distingue el granate del negro lo reconoce igual. Es la misma
   regla que en la franja de horas y no se negocia. */
.calendario-dia.festivo {
  color: var(--granate); font-weight: 700; position: relative;
}
.calendario-dia.festivo::before {
  content: ""; position: absolute; top: .3rem;
  width: var(--punto-menudo); height: var(--punto-menudo); border-radius: 50%;
  background: var(--granate);
}
.calendario-dia.festivo.elegido { color: var(--sobre-acento); }
.calendario-dia.festivo.elegido::before { background: var(--sobre-acento); }

.calendario-leyenda, .calendario-pie {
  margin-top: var(--e3);
  font-size: var(--texto-s);
  color: var(--tinta-suave);
}
.calendario-leyenda { display: flex; align-items: center; gap: var(--e2); }
.calendario-quitar {
  background: none; border: none; padding: 0;
  color: var(--bronce); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em;
}
.calendario-falta { color: var(--granate); }

/* --- El plano del cliente -------------------------------------------------
   La misma pantalla que en la piel de siempre y el MISMO marcado: aqui solo
   cambia como se ve. Las reglas de que se puede elegir y que no estan en el
   servidor, en `eleccion_mesa`.

   Ni un color ni una medida a mano, como en toda esta hoja: `--verde-mesa`
   existe en `tokens.css` justamente para esto. */
.elegir-mesa { margin: var(--e8) 0 0; border: none; padding: 0; }
.elegir-mesa legend {
  font-family: var(--sans);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 0;
}
.elegir-mesa .sala-titulo {
  font-family: var(--mono);
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--bronce);
  margin: var(--e6) 0 var(--e2);
}
.sitio-cualquiera {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--tactil-min);
  font-size: var(--texto-s);
}

.plano-cliente {
  position: relative;
  background: var(--marfil);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
  overflow: hidden;
}

.sitio { display: block; }
/* El radio se aparta, NO se quita: `display: none` lo saca del teclado y la
   mesa deja de poder elegirse sin raton. */
.sitio input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.sitio-texto {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: var(--e1);
  overflow: hidden; text-align: center;
  font-size: var(--texto-xs);
  line-height: var(--linea-titulo);
  background: var(--papel);
  border: 1px solid var(--verde-mesa);
  color: var(--tinta);
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--curva),
              box-shadow var(--dur-rapida) var(--curva);
}
.sitio-texto strong { display: block; font-weight: 600; }
.sitio-texto small { display: block; color: var(--tinta-suave); }

.sitio.forma-redonda .sitio-texto { border-radius: 50%; }
.sitio.forma-cuadrada .sitio-texto,
.sitio.forma-rectangular .sitio-texto { border-radius: var(--radio-control); }

/* Elegida: color, sombra Y tamaño. Tres señales, nunca solo el color. */
.sitio input:checked + .sitio-texto {
  background: var(--bronce);
  border-color: var(--bronce);
  color: var(--sobre-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bronce) 30%, transparent);
  transform: scale(1.06);
}
.sitio input:checked + .sitio-texto small { color: inherit; opacity: .85; }
.sitio input:focus-visible + .sitio-texto {
  outline: var(--foco-ancho) solid var(--bronce);
  outline-offset: var(--foco-sep);
}
/* La que no se puede elegir tampoco es solo gris: va con el borde discontinuo,
   igual que el hueco lleno de la franja de horarios. */
.sitio input:disabled + .sitio-texto {
  background: transparent;
  border-color: var(--arena); border-style: dashed;
  color: var(--piedra);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.sitio input:disabled + .sitio-texto small { color: var(--piedra); }

.plano-cliente .adorno {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--piedra);
  background: var(--arena);
  border-radius: var(--radio-control);
}
.plano-cliente .adorno.rotulo { background: none; }

/* 701 A PELO: una consulta de medios no puede leer `var(--corte-ancho)`. Es
   la misma limitacion que ya esta explicada arriba en esta hoja. */
@media (min-width: 701px) {
  .plano-cliente { aspect-ratio: var(--lienzo, 2 / 1); }
  .plano-cliente .sitio {
    position: absolute;
    left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  }
}

/* En el telefono, fichas. Un lienzo de 1200 px metido en 360 deja mesas de
   25 px: ni se leen ni se tocan. */
@media (max-width: 700px) {
  .plano-cliente {
    display: flex; flex-wrap: wrap; gap: var(--e2); padding: var(--e3);
  }
  .plano-cliente .adorno { display: none; }
  .plano-cliente .sitio { flex: 1 1 7.5rem; max-width: 12rem; }
  .sitio-texto {
    min-height: var(--tactil-min);
    padding: var(--e2) var(--e1);
    font-size: var(--texto-s);
    border-radius: var(--radio-control);
  }
  .plano-cliente .sitio .sitio-texto { border-radius: var(--radio-control); }
}

/* El marco: en pantalla ancha el plano SE SALE de la columna del formulario.
   La columna mide 540 px de lectura y ahi un lienzo de 1200 deja mesas de
   41 px con el rotulo cortado -medido, siete de quince-. Y si aun asi no cabe,
   se desplaza de lado, como el plano del panel. */
.plano-marco-cliente { margin: 0 0 var(--e2); }
@media (min-width: 701px) {
  .plano-marco-cliente {
    width: min(88vw, var(--plano-ancho));
    /* Centrado y desbordando la columna: si la columna es mas ancha que el
       tope, el margen sale positivo y simplemente queda centrado. */
    margin-left: calc((100% - min(88vw, var(--plano-ancho))) / 2);
    overflow-x: auto;
  }
  /* Por debajo de esto los rotulos dejan de leerse: antes que encogerlos mas,
     que se desplace. */
  .plano-cliente { min-width: var(--plano-minimo); }
}
/* Y si aun asi un rotulo no cabe, que termine en puntos suspensivos en vez de
   partirse en dos renglones dentro de una mesa de 40 px. */
.sitio-texto small {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

/* --- Las entradas de un evento -------------------------------------------
   La misma pantalla que en la piel de siempre; aqui solo cambia como se ve. */
.entradas { display: flex; flex-wrap: wrap; gap: var(--e4); margin: var(--e6) 0; }
.entrada {
  flex: 1 1 12rem; max-width: 16rem;
  padding: var(--e4);
  background: var(--papel);
  border: 1px solid var(--arena);
  border-radius: var(--radio-carta);
  text-align: center;
}
/* Blanco siempre, tambien en oscuro: un QR en negativo no lo lee la mitad de
   los lectores, y esto se escanea en una puerta de noche. */
.entrada-qr {
  display: block; width: 100%; height: auto; max-width: var(--qr-lado);
  margin: 0 auto var(--e2);
  background: var(--blanco-qr); padding: var(--e1);
  border-radius: var(--radio-control);
  image-rendering: pixelated;
}
.entrada .codigo {
  font-family: var(--mono);
  font-size: var(--texto-m);
  letter-spacing: var(--tracking-rotulo);
  margin: 0;
}

/* LOS BOTONES DE «¿carta o menú?».
 *
 * Con el aspecto de `.boton` —el de «Confirmar reserva»— porque es lo que se
 * pidió: mismo alto táctil, mismo redondeo, misma tipografía.
 *
 * PERO EL ELEGIDO VA MACIZO Y LOS DEMÁS NO, y eso no es un adorno: si los tres
 * fueran del color de marca no se vería cuál está marcado —que es lo único que
 * este control tiene que decir— y además competirían con el botón de enviar,
 * que es el que de verdad cierra la reserva. Un formulario con cuatro botones
 * macizos no dice dónde hay que pulsar.
 *
 * Por dentro siguen siendo radios escondidos: así funciona sin JavaScript, se
 * envía como cualquier formulario y las flechas del teclado eligen. */
.elegir-menu { border: none; margin: var(--e3) 0 var(--e6); padding: 0; }
.elegir-menu legend {
  padding: 0 0 var(--e2); font-size: var(--texto-xs); font-weight: 600;
  color: var(--tinta-suave);
}
.botones-menu { display: flex; flex-wrap: wrap; gap: var(--e2); }

.boton-menu {
  flex: 1 1 11rem;
  display: flex; flex-direction: column; align-items: center; gap: var(--e1);
  margin: 0; padding: var(--e3) var(--e4);
  min-height: var(--tactil-min);
  border: 2px solid var(--bronce); border-radius: var(--radio-control);
  background: transparent; color: var(--tinta);
  font: inherit; font-weight: 600; text-align: center; cursor: pointer;
  transition: background var(--dur-rapida) var(--curva);
}
/* La casilla de verdad, invisible pero NO `display:none`: sin ella en el flujo
   no recibe el foco y el teclado no podría elegir. */
.boton-menu input[type=radio] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.boton-menu:hover { background: color-mix(in srgb, var(--bronce) 12%, transparent); }

/* El elegido: igual que «Confirmar reserva». Con `:has(:checked)` y no con una
   clase que ponga un guion — si el guion no carga, el marcado se sigue viendo. */
.boton-menu:has(:checked) {
  background: var(--bronce); color: var(--sobre-acento);
}
.boton-menu:has(:focus-visible) {
  outline: 2px solid var(--bronce); outline-offset: 2px;
}
.boton-menu-titulo { font-size: var(--texto-m); }
.boton-menu-precio { font-size: var(--texto-s); font-weight: 400; }
/* La descripción, más apagada, y solo cuando el botón NO está elegido: sobre
   el fondo macizo hereda el color de encima y se lee igual. */
.boton-menu-pie { font-size: var(--texto-xs); font-weight: 400; opacity: .8; }

/* EL PRECIO, YA ELEGIDO EL MENÚ, y el suplemento de cada plato.
   Los dos son dinero, así que ninguno va apagado: un recargo escrito en gris
   claro es un recargo que nadie lee hasta que llega la cuenta. El suplemento,
   además, en negrita, porque compite con el nombre del plato. */
.precio-menu {
  margin: 0 0 .6rem;
  font-size: var(--texto-s);
}
.suplemento { font-weight: 600; white-space: nowrap; }

/* CUÁNTOS DE CADA PLATO.
   Un bloque por apartado y una línea por plato con su cantidad delante. Antes
   era un bloque por comensal con un desplegable por apartado: para una mesa de
   ocho, veinticuatro desplegables para un dato —quién come qué— que no usa
   nadie. Ver `_menu_eleccion.html`.

   ESTAS REGLAS VAN AQUÍ y no sólo en `estilo.css`: el formulario público y el
   widget cargan únicamente `premium/premium.css`. */
.menu-apartado {
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--borde);
}
.menu-apartado:first-of-type { border-top: none; padding-top: 0; }

/* «3 de 5», y en rojo «faltan 2» cuando el apartado exige uno por cabeza: sin
   la cuenta a la vista hay que sumar de cabeza para saber si falta alguien. */
.cuenta-apartado { margin-left: .5rem; opacity: .7; font-weight: 400; }
/* `--rojo` y no un color a mano: en esta piel los colores salen SIEMPRE de un
   token —hay tema claro y oscuro, y un valor fijo deja de leerse en uno de los
   dos—. `--peligro` es de la hoja de siempre y aquí no existe. */
.cuenta-apartado.falta {
  color: var(--rojo); opacity: 1; font-weight: 600;
}

/* EL NOMBRE ARRIBA, ENTERO, Y LA CANTIDAD DEBAJO.
   Con la casilla delante en la misma línea, un plato como «Crema de grelos y
   patata con huevo a baja temperatura y crujiente de pan» parte en tres
   renglones colgados de la casilla. Así se lee de un vistazo, y la pregunta va
   en el orden en que se decide: primero qué es, después cuántos. */
.linea-plato { margin: .7rem 0; }
.nombre-plato { margin: 0 0 .2rem; font-weight: 600; }
.cuantas-plato {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin: 0;
}
.cuantas-texto { opacity: .8; font-size: var(--texto-s); }
/* Estrecha a propósito: son cantidades de un dígito, y un campo ancho invita a
   escribir números que no caben en una mesa. */
.cantidad-plato { width: 3.6rem; text-align: center; }

/* --- «¿Qué tal fue?», después de la visita -------------------------------
   La nota decide qué se PREGUNTA; el enlace de Google sale igual en los dos
   casos y con el mismo peso visual, que es lo que lo separa del «review
   gating». Ver `publico/opinion.html` y `servicios/opiniones.py`. */
.opinion { max-width: 34rem; margin: 0 auto; text-align: center; }
.opinion-nota, .opinion-votar { margin: .5rem 0 1rem; }
.estrella {
  font-size: 2.2rem; line-height: 1; color: var(--ambar-aviso);
  text-decoration: none;
}
.estrella.apagada { opacity: .25; }
.opinion-votar .estrella { padding: 0 .2rem; }
/* El formulario, alineado a la izquierda dentro de una página centrada: un
   campo centrado se lee mal y se rellena peor. */
.opinion-forma { text-align: left; margin-top: 1.2rem; }
.opinion-forma label { display: block; margin-bottom: .9rem; }
.opinion-google {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--borde);
}

/* --- El pie del formulario -----------------------------------------------
   El nombre del local y la segunda imagen, debajo de todo. Son dos huecos
   independientes —uno en la cabecera editorial y otro aquí— para poder tener
   los dos a la vez: la marca arriba y la fachada abajo. Ver `inicio.html`. */
.pie-widget { margin: var(--e12) 0 var(--e4); text-align: center; }
.pie-widget-nombre {
  margin: 0 0 var(--e4); font-family: var(--serif, inherit);
  font-size: var(--texto-xl); line-height: 1.15;
}

/* --- Apuntarse solo a la lista de espera ---------------------------------
   El formulario del cartel de la puerta. Se rellena DE PIE y con una mano, así
   que va estrecho y con los campos a lo ancho: cada tropiezo aquí es alguien
   que lo deja a medias y se va a otro sitio.

   Sin el código QR: ese solo se ve en el panel, y su regla vive en la hoja del
   panel. Aquí no pinta nada. */
.espera-publica { max-width: 26rem; margin-inline: auto; }
.espera-forma { margin-top: var(--e6); text-align: left; }
.espera-forma label { display: block; margin-bottom: var(--e4); }
.espera-forma .boton { width: 100%; }

/* El número de la cola, en grande: es lo único que ha venido a ver. */
.posicion-cola { font-size: 2.4em; line-height: 1; }

/* CUÁNTOS HAY, antes de apuntarse. Destacado pero sin gritar: es un dato para
   decidir, no una alarma. Por eso el borde de bronce y no el ámbar del aviso.
   Aquí el número va más pequeño que el de «vas el N» -mismo `.posicion-cola`
   con `font-size` propio-: el que importa es el suyo, no el del montón. */
.cola-ahora {
  border-left: 3px solid var(--bronce);
  padding: var(--e3) var(--e4);
  margin: var(--e4) 0 var(--e6);
}
.cola-ahora .posicion-cola { font-size: 1.6em; }

/* Salirse de la cola. Separado del resto y en secundario a propósito: no es lo
   que se viene a hacer a esta página, y no puede competir con el número. */
.espera-salir { margin-top: var(--e6); }
.espera-salir .boton { width: 100%; }

/* «Te hemos borrado»: se ha hecho lo que se pidió, así que se dice en verde y
   no en ámbar. En ámbar se lee como que algo ha ido mal. */
.aviso-suave {
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--verde-mesa);
  background: color-mix(in srgb, var(--verde-mesa) 8%, transparent);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  font-size: var(--texto-s);
  margin: var(--e4) 0;
}