/* ---------------------------------------------------------------------------
   reservas.css — Hoja única, sin dependencias externas.

   Hereda la paleta del sistema de pedidos (burdeos sobre negro) para que se
   reconozca la casa, pero la disposición es de cara al público y pensada para
   el móvil primero: botonazos, poco texto y un solo paso por pantalla.
   --------------------------------------------------------------------------- */

:root {
  --negro-900: #141414;
  --negro-800: #222222;
  --negro-700: #333333;

  --vino-500: #8a1f33;
  --vino-600: #6e1728;
  --vino-050: #f8edef;

  --arena-050: #f5f7f8;
  --blanco:    #ffffff;

  --tinta-900: #152430;
  --tinta-600: #4a5b68;
  --tinta-300: #9fb0bb;
  --linea:     #e3e9ed;

  --ok-500:   #1d9e57;
  --rojo-500: #d84343;
  --oro-500:  #d9a441;

  --radio: 14px;
  --sombra: 0 1px 3px rgba(21, 36, 48, .10);
  --sombra-alta: 0 6px 24px rgba(21, 36, 48, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--arena-050);
  color: var(--tinta-900);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--vino-500); }

/* --- Estructura ---------------------------------------------------------- */

/* El fondo y el texto los pone marca.php según cómo sea el logo de cada casa.
   Aquí van los valores de reserva, por si esa hoja no cargara. */
.cabecera {
  background: var(--cabecera-fondo, linear-gradient(135deg, var(--negro-900), var(--negro-700)));
  color: var(--cabecera-texto, var(--blanco));
  border-bottom: 3px solid var(--cabecera-borde, transparent);
  padding: 18px 20px;
}

.cabecera .interior,
.contenido {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.cabecera .marca {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cabecera-texto, var(--blanco));
  text-decoration: none;
}

/* Cada marca tiene su logo. Los originales son de proporciones distintas
   (el de La Pesquera es apaisado, los otros más cuadrados), así que se limita
   la ALTURA y se deja que el ancho se acomode. */
.cabecera .marca-logo { display: inline-block; line-height: 0; }

.cabecera .marca-logo img {
  height: 38px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

@media (min-width: 640px) {
  .cabecera .marca-logo img { height: 46px; }
}

.cabecera .sitio {
  margin-top: 2px;
  font-size: 14px;
  color: var(--cabecera-suave, rgba(255, 255, 255, .75));
}

/* --- Selector de idioma ---------------------------------------------------
   Arriba a la derecha, discreto: es un rótulo, no un botón. Se enseña el código
   (ES · EN · DE · FR) y no una bandera, porque una bandera es un país y no un
   idioma: al austriaco no se le representa con la bandera alemana, ni al
   suizo, ni al belga con la francesa.

   Se coloca en la esquina de la cabecera sin sacar el logo de su sitio. */
.cabecera .interior { position: relative; padding-right: 128px; }

.idiomas {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 2px;
  align-items: center;
}

.idiomas .idioma {
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--cabecera-suave, rgba(255, 255, 255, .7));
  transition: background .15s, color .15s;
}

.idiomas a.idioma:hover,
.idiomas a.idioma:focus-visible {
  background: rgba(127, 127, 127, .22);
  color: var(--cabecera-texto, var(--blanco));
}

/* El idioma en curso no es un enlace: se marca, no se pulsa. */
.idiomas .idioma.actual {
  background: rgba(127, 127, 127, .28);
  color: var(--cabecera-texto, var(--blanco));
}

/* En un móvil estrecho, el nombre del restaurante y los idiomas se pisarían.
   Los idiomas bajan a su propia línea. */
@media (max-width: 460px) {
  .cabecera .interior { padding-right: 0; }
  .idiomas {
    position: static;
    margin-top: 10px;
    justify-content: flex-start;
    margin-left: -7px;
  }
}

.contenido { padding: 20px 20px 60px; }

.pie {
  border-top: 1px solid var(--linea);
  padding: 22px 20px 40px;
  color: var(--tinta-600);
  font-size: 13px;
  text-align: center;
}

.pie a { color: var(--tinta-600); }

/* --- Tarjetas ------------------------------------------------------------ */

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 16px;
}

h1 { font-size: 22px; margin: 4px 0 18px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 22px 0 10px; color: var(--tinta-600); font-weight: 600; }

.entradilla { color: var(--tinta-600); margin: -10px 0 20px; }

/* --- Lista de restaurantes ----------------------------------------------- */

.locales { display: grid; gap: 12px; }

.local {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}

.local:hover, .local:focus-visible {
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}

.local .nombre { font-weight: 700; font-size: 17px; }
.local .donde  { color: var(--tinta-600); font-size: 14px; }
.local .flecha { margin-left: auto; color: var(--vino-500); font-size: 22px; line-height: 1; }

/* --- Formularios --------------------------------------------------------- */

.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-600);
  margin-bottom: 6px;
}

.campo .ayuda {
  font-weight: 400;
  color: var(--tinta-300);
}

input[type=text], input[type=tel], input[type=email], input[type=date],
input[type=number], input[type=password], select, textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--tinta-900);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  /* 16px como mínimo: por debajo, Safari en iPhone hace zoom al enfocar. */
  font-size: 16px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--vino-500);
  outline-offset: 1px;
  border-color: var(--vino-500);
}

textarea { min-height: 84px; resize: vertical; }

.fila { display: flex; gap: 12px; }
.fila > * { flex: 1; }

.consentimiento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--tinta-600);
  margin-bottom: 16px;
}

.consentimiento input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

/* --- Botones ------------------------------------------------------------- */

.boton, button.boton {
  display: inline-block;
  padding: 13px 22px;
  font: inherit;
  font-weight: 600;
  color: var(--blanco);
  background: var(--vino-500);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.boton:hover { background: var(--vino-600); }
.boton.ancho { display: block; width: 100%; }

.boton.suave {
  background: var(--blanco);
  color: var(--vino-500);
  border: 1px solid var(--linea);
}

.boton.suave:hover { background: var(--vino-050); }

.boton.peligro { background: var(--blanco); color: var(--rojo-500); border: 1px solid var(--linea); }
.boton.peligro:hover { background: #fdf2f2; }

/* --- Horas disponibles --------------------------------------------------- */

.turno { margin-bottom: 22px; }

.turno .titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.turno .titulo strong { font-size: 16px; }
.turno .titulo span { color: var(--tinta-600); font-size: 14px; }

.horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.hora {
  display: block;
  padding: 12px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--tinta-900);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  text-decoration: none;
}

.hora:hover, .hora:focus-visible {
  border-color: var(--vino-500);
  background: var(--vino-050);
  color: var(--vino-600);
}

.hora .plazas {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--tinta-600);
  margin-top: 2px;
}

/* --- Avisos -------------------------------------------------------------- */

.aviso, .error, .exito {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 15px;
}

.aviso { background: #fdf8ec; border: 1px solid #f0e0bd; color: #7a5a12; }
.error { background: #fdf2f2; border: 1px solid #f3d4d4; color: #8c2b2b; }
.exito { background: #eefaf3; border: 1px solid #c9ecd9; color: #14663a; }

.vacio {
  text-align: center;
  color: var(--tinta-600);
  padding: 26px 10px;
}

/* --- Resumen de la reserva ----------------------------------------------- */

.resumen { width: 100%; border-collapse: collapse; }

.resumen td {
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.resumen tr:last-child td { border-bottom: 0; }
.resumen td:first-child { color: var(--tinta-600); width: 40%; padding-right: 12px; }
.resumen td:last-child { font-weight: 600; }

.localizador {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
  background: var(--vino-050);
  color: var(--vino-600);
  padding: 8px 14px;
  border-radius: 10px;
}

.etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
}

.etiqueta.confirmada   { background: #eefaf3; color: #14663a; }
.etiqueta.anulada      { background: #fdf2f2; color: #8c2b2b; }
.etiqueta.sentada      { background: #eef4fb; color: #1d4e89; }
.etiqueta.cumplida     { background: var(--arena-050); color: var(--tinta-600); }
.etiqueta.no_presentado{ background: #fdf8ec; color: #7a5a12; }

/* --- Pasos --------------------------------------------------------------- */

.pasos {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--tinta-300);
}

.pasos .paso { display: flex; align-items: center; gap: 6px; }
.pasos .paso + .paso::before { content: "›"; margin-right: 4px; }
.pasos .paso.activo { color: var(--vino-500); font-weight: 600; }

.volver {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--tinta-600);
  text-decoration: none;
}

.volver:hover { color: var(--vino-500); }

/* El señuelo antirrobots: invisible para una persona, tentador para un robot. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 640px) {
  .contenido { padding-top: 28px; }
  h1 { font-size: 26px; }
}

/* Estados que aparecieron con la confirmación a mano del club hípico. */
.etiqueta.pendiente { background: #fdf8ec; color: #7a5a12; }
.etiqueta.rechazada { background: #fdf2f2; color: #8c2b2b; }

/* --- Elegir sitio (solo hamacas) ------------------------------------------
   En un restaurante el cliente no elige mesa: pide zona y ya. Pero en la playa
   el sitio ES el producto —primera línea u oculto al fondo—, así que ahí sí. */

.sitios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

/* Acotado a .sitios a propósito: «.sitio» a secas ya existe en la cabecera
   para el nombre del restaurante, y sin acotar le caía este estilo encima. */
.sitios .sitio {
  display: block;
  padding: 10px 6px;
  text-align: center;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--blanco);
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

.sitios .sitio:hover { border-color: var(--vino-500); }
.sitios .sitio input { margin-right: 6px; }
.sitios .sitio:has(input:checked) {
  border-color: var(--vino-500);
  background: var(--vino-050);
  color: var(--vino-600);
}

/* ---------------------------------------------------------------------------
   Lista de espera (11/09/2026)
   --------------------------------------------------------------------------- */

/* El bloque de la lista de espera se pliega con <details>, sin una línea de
   JavaScript: la política de contenidos no admite guiones en línea y una página
   pública no puede depender de que el móvil de alguien ejecute algo. */
details.espera > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: var(--vino-500);
  list-style: none;
  padding: 2px 0;
}

details.espera > summary::-webkit-details-marker { display: none; }

details.espera > summary::before {
  content: '+ ';
  font-weight: 800;
}

details.espera[open] > summary::before { content: '– '; }

details.espera[open] > summary { margin-bottom: 10px; }

/* La tarjeta que hay que mirar primero: la de confirmar que viene. */
.tarjeta.destacada {
  border: 2px solid var(--vino-500);
  box-shadow: 0 2px 10px rgba(138, 31, 51, .12);
}

/* Encabezados de la tabla del aviso de privacidad (quién responde de los datos
   en cada restaurante). Va en la hoja y no en un style="", que la política de
   contenidos de la parte pública no admite estilos en línea. */
.resumen th {
  text-align: left;
  font-weight: 700;
  color: var(--tinta-600);
  padding: 6px 12px 6px 0;
}