/* Web pública de reservas (M05/M06). Móvil primero (se prueba a 375×812), sin librerías ni fuentes externas: tipografía del sistema.
   Los colores de MARCA (--wnb-primario, --wnb-acento, --wnb-sobre-*, --wnb-tinta, --wnb-realce) y los neutros (--wnb-fondo, --wnb-tarjeta, --wnb-texto,
   --wnb-borde, --wnb-error…) los define la página en un <style> con nonce a partir de la configuración: aquí nunca hay un color escrito.
   Dos temas con las mismas reglas: el claro y el oscuro (el de WhyNot, `body.wnb-tema-oscuro`, que sale cuando el color principal es negro o casi
   negro). El tema oscuro solo cambia colores (por las variables), la forma (--radio, botones redondos) y los titulares (Impact en mayúsculas):
   está al final de este fichero. «Lo elegido» (día, filtro, contornos) usa --wnb-realce, que es la tinta en el claro y el acento en el oscuro.
   Objetivos táctiles de 44 px o más, foco siempre visible, nada que dependa solo del color. Convención de nombres: BEM con prefijo wnb. */

:root {
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --radio: 0.625rem;
  --alto-tactil: 2.75rem;
}

html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { overflow-wrap: break-word; line-height: 1.5; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 700; }
h2 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 var(--e2); color: var(--wnb-tinta); }
h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 var(--e1); }
p { margin: 0 0 var(--e3); }
ul, ol { margin: 0; padding: 0; }
a { color: var(--wnb-tinta); }
main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--wnb-foco); outline-offset: 2px; box-shadow: 0 0 0 5px var(--wnb-fondo); border-radius: 2px; }

/* ---- utilidades ---- */
.wnb-solo-lector { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wnb-suave { color: var(--wnb-texto-suave); }
.wnb-vacio { padding: var(--e4); background: var(--wnb-fondo-suave); border-radius: var(--radio); }
.wnb-lista-simple { list-style: none; }
[hidden] { display: none !important; }

.wnb-salto:focus { left: var(--e2); top: var(--e2); z-index: 100; padding: var(--e3) var(--e4); background: var(--wnb-fondo); color: var(--wnb-texto); border: 2px solid var(--wnb-foco); border-radius: var(--e2); }

/* ---- cabecera y pie ---- */
.wnb-logo { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: 0.375rem; background: var(--wnb-logo-fondo); flex: none; }
.wnb-marca { display: inline-flex; align-items: center; min-height: var(--alto-tactil); }
.wnb-marca:hover { text-decoration: underline; }
.wnb-pie { max-width: 40rem; margin: 0 auto; padding: var(--e4); color: var(--wnb-texto-suave); font-size: 0.875rem; }

/* ---- enlaces y botones ---- */
.wnb-enlace { display: inline-flex; align-items: center; min-height: var(--alto-tactil); padding: 0.25em 0; text-decoration: underline; text-underline-offset: 0.2em; }
.wnb-enlaces { display: flex; flex-wrap: wrap; column-gap: var(--e5); margin: 0; }
.wnb-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--alto-tactil); min-width: var(--alto-tactil); padding: var(--e2) var(--e4);
  border: 2px solid var(--wnb-tinta); border-radius: var(--radio); background: var(--wnb-tarjeta); color: var(--wnb-tinta);
  font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.wnb-boton:hover { background: var(--wnb-fondo-suave); }
.wnb-boton--principal { background: var(--wnb-acento); border-color: var(--wnb-acento); color: var(--wnb-sobre-acento); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.wnb-boton--principal:hover { background: var(--wnb-acento); filter: brightness(0.95); }
.wnb-boton[disabled] { opacity: 0.6; cursor: not-allowed; }
.wnb-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
/* reservar por WhatsApp: el botón va debajo de la fila de contacto, sin pegarse a ella */
.wnb-whatsapp { margin: var(--e2) 0 0; }

.wnb-chip {
  display: inline-flex; align-items: center; min-height: var(--alto-tactil); padding: 0 var(--e4);
  border: 2px solid var(--wnb-borde); border-radius: 999px; background: var(--wnb-tarjeta); color: var(--wnb-texto);
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.wnb-chip:hover { border-color: var(--wnb-realce); }

/* ---- avisos ---- */
.wnb-aviso { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--wnb-borde); border-left-width: 0.375rem; border-radius: var(--radio); background: var(--wnb-fondo-suave); color: var(--wnb-texto); }
.wnb-aviso--error { background: var(--wnb-error-fondo); border-color: var(--wnb-error); color: var(--wnb-error); font-weight: 600; }
.wnb-aviso--ok { background: var(--wnb-ok-fondo); border-color: var(--wnb-ok); color: var(--wnb-ok); font-weight: 600; }
.wnb-aviso a { color: inherit; }

/* ---- inicio: selector de local ---- */
.wnb-intro { color: var(--wnb-texto-suave); }
.wnb-sedes { list-style: none; display: grid; gap: var(--e3); }
.wnb-sede-tarjeta { padding: var(--e4); border: 1px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-tarjeta); }
.wnb-sede-tarjeta__nombre { font-size: 1.125rem; margin: 0 0 var(--e2); }
.wnb-sede-tarjeta__dato { margin: 0 0 var(--e1); }
.wnb-sede-tarjeta__accion { margin: var(--e3) 0 0; }

/* ---- sede: ficha ---- */
.wnb-ficha { margin: 0 0 var(--e4); padding: 0 0 var(--e3); border-bottom: 1px solid var(--wnb-borde); }
.wnb-ficha__dato { margin: 0 0 var(--e1); }
.wnb-ficha__hoy { font-weight: 600; }
.wnb-horario { margin-top: var(--e2); }
.wnb-horario summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--alto-tactil); cursor: pointer; font-weight: 600; }
.wnb-horario summary::after { content: "\25BE"; margin-left: var(--e2); }
.wnb-horario[open] summary::after { content: "\25B4"; }
.wnb-horario dl { margin: 0; }
.wnb-horario__fila { display: flex; justify-content: space-between; gap: var(--e4); padding: var(--e1) 0; border-bottom: 1px solid var(--wnb-fondo-suave); }
.wnb-horario dt { text-transform: capitalize; }
.wnb-horario dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---- sede: buscador y catálogo ---- */
.wnb-buscador { margin: 0 0 var(--e3); }
.wnb-etiqueta { display: block; margin: 0 0 var(--e1); font-weight: 600; }
.wnb-buscador__fila { display: flex; gap: var(--e2); }
.wnb-buscador__fila .wnb-campo { flex: 1; min-width: 0; }
.wnb-campo {
  display: block; width: 100%; min-height: var(--alto-tactil); padding: var(--e2) var(--e3);
  border: 2px solid var(--wnb-borde-control); border-radius: var(--radio); background: var(--wnb-tarjeta); color: var(--wnb-texto); font: inherit; font-size: 1rem;
}
.wnb-campo:focus { border-color: var(--wnb-foco); }
.wnb-campo::placeholder { color: var(--wnb-texto-suave); opacity: 1; }
.wnb-resultados { margin: 0 0 var(--e3); }

.wnb-categorias { margin: 0 calc(var(--e4) * -1) var(--e3); padding: 0 var(--e4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wnb-categorias ul { display: flex; gap: var(--e2); list-style: none; padding: var(--e1) 0 var(--e2); }
.wnb-categoria { margin: 0 0 var(--e5); }
.wnb-categoria > h2 { padding-bottom: var(--e1); border-bottom: 2px solid var(--wnb-realce); }

.wnb-servicio { margin: 0 0 var(--e3); padding: var(--e4); border: 1px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-tarjeta); scroll-margin-top: 4rem; }
.wnb-servicio--enfocado { border-color: var(--wnb-realce); box-shadow: 0 0 0 2px var(--wnb-realce); }
.wnb-servicio__nombre { font-size: 1.0625rem; margin: 0; }
.wnb-servicio__nombre a { display: inline-flex; align-items: center; min-height: var(--alto-tactil); text-decoration: none; }
.wnb-servicio__nombre a:hover { text-decoration: underline; }
.wnb-servicio__descripcion { margin: 0 0 var(--e2); color: var(--wnb-texto-suave); font-size: 0.9375rem; }
.wnb-servicio__cabecera { display: flex; align-items: flex-start; gap: var(--e3); }
.wnb-servicio__titulos { flex: 1; min-width: 0; }
.wnb-servicio__foto { flex: none; width: 4rem; height: 4rem; border-radius: 0.5rem; object-fit: cover; background: var(--wnb-fondo-suave); }
.wnb-servicio__galeria { margin: var(--e1) 0; }
.wnb-galeria { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); margin: 0; padding: 0; }
.wnb-galeria__item { margin: 0; min-width: 0; }
.wnb-galeria__item a { display: block; border-radius: 0.5rem; cursor: zoom-in; }
.wnb-galeria__foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0.5rem; background: var(--wnb-fondo-suave); }
.wnb-destacados { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.wnb-destacado { display: flex; flex-direction: column; gap: var(--e1); height: 100%; padding: var(--e3); border: 1px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-tarjeta); }
.wnb-destacado__nombre { margin: 0; font-size: 1rem; line-height: 1.25; }
.wnb-destacado__datos { margin: 0 0 var(--e2); color: var(--wnb-texto-suave); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.wnb-destacado .wnb-boton { margin-top: auto; width: 100%; }
.wnb-servicio__subtitulo { margin: var(--e2) 0 var(--e1); font-weight: 600; }
.wnb-variantes { list-style: none; display: grid; gap: var(--e2); margin-top: var(--e1); }
.wnb-variante { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); }
.wnb-variante__texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 8rem; }
.wnb-variante__nombre { font-weight: 600; }
.wnb-variante__datos { color: var(--wnb-texto-suave); font-variant-numeric: tabular-nums; }
.wnb-precio { color: var(--wnb-texto); font-weight: 700; }
.wnb-variante__elegir { flex: none; }

/* ---- reservar ---- */
.wnb-subtitulo { margin: -0.5rem 0 var(--e4); color: var(--wnb-texto-suave); }
.wnb-bloque { margin: 0 0 var(--e5); }
.wnb-politica { padding: var(--e3) var(--e4); background: var(--wnb-fondo-suave); border-radius: var(--radio); font-size: 0.9375rem; }
.wnb-politica h2 { margin: 0 0 var(--e1); font-size: 1rem; }
.wnb-politica p { margin: 0; }
/* «Dónde estamos» (dirección, cómo llegar, teléfono y WhatsApp) en la pantalla de elegir y en la de confirmar */
.wnb-lugar { padding: var(--e3) var(--e4); border: 1px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-tarjeta); }
.wnb-lugar h2 { margin: 0 0 var(--e1); font-size: 1rem; }
.wnb-lugar__direccion { margin: 0 0 var(--e1); }
#wnb-reservar { padding-bottom: var(--e2); }

.wnb-lineas { list-style: none; border-top: 1px solid var(--wnb-borde); }
.wnb-linea { padding: var(--e3) 0; border-bottom: 1px solid var(--wnb-borde); }
.wnb-linea__principal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--e3); align-items: center; }
.wnb-linea__nombre { grid-column: 1; font-weight: 700; }
.wnb-linea__datos { grid-column: 1; color: var(--wnb-texto-suave); font-variant-numeric: tabular-nums; }
.wnb-quitar { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-height: var(--alto-tactil); padding: 0 var(--e2); color: var(--wnb-error); font-weight: 600; }
.wnb-carrito__acciones { margin: var(--e2) 0 0; }

.wnb-complementos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); margin-top: var(--e2); }
.wnb-complemento { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e1); }
.wnb-complemento__alternar {
  display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--e2); flex: 1 1 100%; min-height: var(--alto-tactil); padding: var(--e1) var(--e3);
  border: 2px solid var(--wnb-borde); border-radius: var(--radio); color: var(--wnb-texto); text-decoration: none; background: var(--wnb-tarjeta); line-height: 1.25;
}
.wnb-complemento--elegido .wnb-complemento__alternar { border-color: var(--wnb-realce); background: var(--wnb-fondo-suave); }
.wnb-complemento__marca { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--wnb-realce); border-radius: 50%; font-weight: 800; line-height: 1; }
.wnb-complemento--elegido .wnb-complemento__marca { background: var(--wnb-realce); color: var(--wnb-sobre-realce); }
.wnb-complemento__nombre { font-weight: 600; }
.wnb-complemento__datos { display: flex; flex-wrap: wrap; column-gap: var(--e2); color: var(--wnb-texto-suave); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.wnb-cantidad { display: inline-flex; align-items: center; gap: var(--e1); }
.wnb-cantidad__paso { display: inline-flex; align-items: center; justify-content: center; width: var(--alto-tactil); height: var(--alto-tactil); border: 2px solid var(--wnb-tinta); border-radius: var(--radio); font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--wnb-tinta); }
.wnb-cantidad__valor { min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }

/* la tira de días: dos semanas de un vistazo, siete por fila, sin desplazarse */
.wnb-tira { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e1); }
.wnb-dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-width: 0; min-height: 3.75rem; padding: var(--e1) 0;
  border: 2px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-tarjeta); color: var(--wnb-texto); text-decoration: none; line-height: 1.1;
}
.wnb-dia__semana { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--wnb-texto-suave); }
.wnb-dia__numero { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wnb-dia__marca { width: 0.5rem; height: 0.5rem; border: 2px solid var(--wnb-realce); border-radius: 50%; }
.wnb-dia--con-huecos { border-color: var(--wnb-realce); }
.wnb-dia--con-huecos .wnb-dia__marca { background: var(--wnb-realce); }
a.wnb-dia:hover { background: var(--wnb-fondo-suave); }
.wnb-dia--sin-huecos, .wnb-dia--cerrado { background: var(--wnb-fondo-suave); border-style: dashed; color: var(--wnb-texto-suave); }
.wnb-dia--sin-huecos .wnb-dia__marca, .wnb-dia--cerrado .wnb-dia__marca { border-color: var(--wnb-texto-suave); width: 0.5rem; height: 0.125rem; border-radius: 0; background: var(--wnb-texto-suave); }
.wnb-dia--cerrado .wnb-dia__numero { text-decoration: line-through; }
.wnb-dia--hoy .wnb-dia__numero { text-decoration: underline; text-underline-offset: 0.2em; }
.wnb-dia--elegido { background: var(--wnb-realce); border-color: var(--wnb-realce); color: var(--wnb-sobre-realce); }
.wnb-dia--elegido .wnb-dia__semana { color: var(--wnb-sobre-realce); }
.wnb-dia--elegido .wnb-dia__marca { background: var(--wnb-sobre-realce); border-color: var(--wnb-sobre-realce); }
a.wnb-dia--elegido:hover { background: var(--wnb-realce); }
.wnb-leyenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e2) 0 0; font-size: 0.875rem; color: var(--wnb-texto-suave); }
.wnb-leyenda > span { display: inline-flex; align-items: center; gap: var(--e1); }
.wnb-punto { display: inline-block; width: 0.5rem; height: 0.5rem; border: 2px solid var(--wnb-realce); border-radius: 50%; }
.wnb-punto--con { background: var(--wnb-realce); }
.wnb-punto--sin { border-color: var(--wnb-texto-suave); background: var(--wnb-texto-suave); height: 0.125rem; border-radius: 0; }
.wnb-tira__nav { display: flex; justify-content: space-between; gap: var(--e3); margin: var(--e1) 0 0; }

/* profesionales */
.wnb-profesionales { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.wnb-profesional {
  display: flex; align-items: center; gap: var(--e2); height: 100%; min-height: 3.75rem; padding: var(--e2) var(--e3);
  border: 2px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-tarjeta); color: var(--wnb-texto); text-decoration: none;
}
a.wnb-profesional:hover { border-color: var(--wnb-realce); }
.wnb-profesional--elegido { border-color: var(--wnb-realce); box-shadow: inset 0 0 0 1px var(--wnb-realce); background: var(--wnb-fondo-suave); }
.wnb-profesional--sin { background: var(--wnb-fondo-suave); border-style: dashed; color: var(--wnb-texto-suave); }
.wnb-profesional__foto { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.wnb-profesional__textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wnb-profesional__nombre { font-weight: 700; }
.wnb-profesional__detalle { font-size: 0.8125rem; color: var(--wnb-texto-suave); }
.wnb-profesional__estado { font-size: 0.8125rem; color: var(--wnb-ok); font-weight: 600; }
.wnb-profesional--aparte .wnb-profesional__estado { color: var(--wnb-aviso); }
.wnb-profesional--sin .wnb-profesional__estado { color: var(--wnb-texto-suave); }

/* horas */
.wnb-dia-largo { margin: 0 0 var(--e2); font-weight: 600; }
.wnb-dia-largo::first-letter { text-transform: uppercase; }
.wnb-franjas { margin: 0 0 var(--e2); }
.wnb-franjas ul { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; }
.wnb-franja-enlace { display: inline-flex; align-items: center; gap: var(--e1); min-height: var(--alto-tactil); padding: 0 var(--e4); border: 2px solid var(--wnb-borde); border-radius: 999px; color: var(--wnb-texto); font-weight: 600; text-decoration: none; background: var(--wnb-tarjeta); }
.wnb-franja-enlace[aria-current="true"] { background: var(--wnb-realce); border-color: var(--wnb-realce); color: var(--wnb-sobre-realce); }
.wnb-franja-enlace[aria-current="true"] .wnb-suave { color: inherit; }
.wnb-franja { margin: 0 0 var(--e4); }
.wnb-franja__titulo { margin: 0 0 var(--e2); color: var(--wnb-texto-suave); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wnb-horas { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
.wnb-hora {
  display: flex; align-items: center; justify-content: center; min-height: var(--alto-tactil); padding: 0 0.125rem;
  border: 2px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-tarjeta); color: var(--wnb-texto);
  font-weight: 700; font-size: clamp(0.8125rem, 3.7vw, 0.9375rem); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
}
a.wnb-hora:hover { border-color: var(--wnb-realce); }
.wnb-hora--elegida { background: var(--wnb-acento); border-color: var(--wnb-acento); color: var(--wnb-sobre-acento); box-shadow: inset 0 0 0 2px var(--wnb-sobre-acento); }
@media (max-width: 21rem) { .wnb-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wnb-profesionales, .wnb-complementos, .wnb-destacados { grid-template-columns: minmax(0, 1fr); } }

.wnb-alternativas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e4); }

/* la barra de abajo: total en dinero y tiempo, siempre a la vista */
.wnb-barra {
  position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3);
  margin: var(--e4) calc(var(--e4) * -1) calc(var(--e4) * -1); padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: var(--wnb-fondo); border-top: 2px solid var(--wnb-realce); box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.1);
}
.wnb-barra__resumen { flex: 1 1 11rem; min-width: 0; }
.wnb-barra__total { margin: 0; font-variant-numeric: tabular-nums; }
.wnb-barra__etiqueta { color: var(--wnb-texto-suave); }
.wnb-barra__importe { font-size: 1.125rem; }
.wnb-barra__estado { margin: 0; font-size: 0.875rem; }
.wnb-barra__hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.wnb-barra__accion { margin: 0; flex: 0 0 auto; }

/* ---- M06 · el cierre de la reserva y la página de la reserva ---- */
.wnb-cuenta { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-fondo-suave); }
.wnb-cuenta__texto { margin: 0; }
.wnb-cuenta__tiempo { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.wnb-cuenta .wnb-aviso { margin: var(--e2) 0 0; }

.wnb-datos { margin: 0 0 var(--e3); }
.wnb-datos__fila { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--e2); padding: var(--e1) 0; }
.wnb-datos dt { color: var(--wnb-texto-suave); font-weight: 600; }
.wnb-datos dd { margin: 0; }
.wnb-linea__precio { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.wnb-linea__extras { margin: var(--e1) 0 0; padding-left: var(--e4); color: var(--wnb-texto-suave); }
.wnb-resumen__total { margin: var(--e3) 0 var(--e1); font-size: 1.125rem; font-variant-numeric: tabular-nums; }

.wnb-formulario { margin: 0 0 var(--e5); }
.wnb-formulario__titulo { margin-top: var(--e5); }
.wnb-grupo { margin: 0 0 var(--e4); }
.wnb-grupo--error .wnb-campo { border-color: var(--wnb-error); }
.wnb-ayuda { margin: var(--e1) 0 0; color: var(--wnb-texto-suave); font-size: 0.875rem; }
.wnb-error-campo { margin: var(--e1) 0 0; color: var(--wnb-error); font-weight: 600; }
.wnb-campo--area { min-height: 5.5rem; resize: vertical; }
.wnb-errores { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); border: 2px solid var(--wnb-error); border-radius: var(--radio); background: var(--wnb-error-fondo); color: var(--wnb-error); }
.wnb-errores__titulo { margin: 0 0 var(--e1); font-weight: 700; }
.wnb-errores ul { margin: 0; padding-left: var(--e4); }
.wnb-errores a { color: inherit; font-weight: 600; }
.wnb-nota { margin: 0 0 var(--e4); }
.wnb-nota summary { display: flex; align-items: center; min-height: var(--alto-tactil); cursor: pointer; font-weight: 600; }
.wnb-legal { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); border: 1px solid var(--wnb-borde); border-radius: var(--radio); }
.wnb-legal__titulo { padding: 0 var(--e1); font-weight: 700; }
.wnb-legal__texto { margin: 0 0 var(--e2); color: var(--wnb-texto-suave); font-size: 0.9375rem; }
.wnb-casilla { display: flex; gap: var(--e3); align-items: flex-start; min-height: var(--alto-tactil); padding: var(--e2) 0; cursor: pointer; }
.wnb-casilla input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0; accent-color: var(--wnb-tinta); }
.wnb-comprobacion { margin: 0 0 var(--e4); }
.wnb-formulario__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); }
.wnb-formulario__acciones .wnb-boton { flex: 1 1 14rem; }
.wnb-reconocido { margin: 0 0 var(--e4); padding: var(--e3) var(--e4); background: var(--wnb-fondo-suave); border-radius: var(--radio); }
.wnb-reconocido__saludo { margin: 0 0 var(--e1); font-size: 1.125rem; font-weight: 700; }

.wnb-codigo { margin: 0 0 var(--e5); padding: var(--e4); border: 2px solid var(--wnb-realce); border-radius: var(--radio); text-align: center; }
.wnb-codigo h2 { margin: 0; font-size: 1rem; color: var(--wnb-texto-suave); }
.wnb-codigo__valor { margin: var(--e1) 0; font-size: clamp(1.75rem, 9vw, 2.5rem); font-weight: 800; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.wnb-reserva__cuerpo { margin: 0 0 var(--e4); }
.wnb-reserva__acciones .wnb-acciones { flex-direction: column; }
.wnb-reserva--cancelada h1, .wnb-reserva--inasistencia h1 { color: var(--wnb-error); }

/* ---- M08 · cambiar o cancelar la cita ---- */
.wnb-boton--peligro { border-color: var(--wnb-error); color: var(--wnb-error); }
.wnb-boton--peligro:hover { background: var(--wnb-error-fondo); }
.wnb-politica .wnb-acciones { margin-top: var(--e3); }
.wnb-politica .wnb-acciones .wnb-boton { flex: 1 1 11rem; }
.wnb-gestion__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin: 0 0 var(--e4); }
.wnb-gestion__acciones .wnb-boton { flex: 1 1 14rem; }
.wnb-actual__hora { margin: 0 0 var(--e1); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wnb-actual .wnb-suave { margin: 0 0 var(--e1); }

/* ---- errores ---- */
.wnb-error { padding: var(--e5) 0; }
.wnb-error .wnb-acciones { margin-top: var(--e4); }

@media (min-width: 40rem) {
  main { padding-top: var(--e5); }
  .wnb-barra { margin-left: 0; margin-right: 0; border: 2px solid var(--wnb-realce); border-radius: var(--radio) var(--radio) 0 0; }
}

/* ---- mapa de la sede: aparece solo con JavaScript y carga Google únicamente al pulsar «Ver mapa» ---- */
.wnb-mapa { margin: var(--e2) 0 var(--e3); }
.wnb-mapa__marco {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e2); min-height: 9.5rem; padding: var(--e4);
  border: 1px solid var(--wnb-borde); border-radius: var(--radio); text-align: center; background-color: var(--wnb-fondo-suave);
  background-image: linear-gradient(var(--wnb-borde) 1px, transparent 1px), linear-gradient(90deg, var(--wnb-borde) 1px, transparent 1px); background-size: 2rem 2rem;
}
.wnb-mapa__pin { position: relative; display: block; width: 1.5rem; height: 1.5rem; margin-bottom: var(--e1); border-radius: 50% 50% 50% 0; background: var(--wnb-realce); transform: rotate(-45deg); }
.wnb-mapa__pin::after { content: ""; position: absolute; inset: 0.4rem; border-radius: 50%; background: var(--wnb-fondo-suave); }
.wnb-mapa__nota { margin: 0; padding: 0 var(--e2); border-radius: var(--e2); background: var(--wnb-fondo-suave); color: var(--wnb-texto-suave); font-size: 0.8125rem; }
.wnb-mapa__iframe { display: block; width: 100%; height: 16rem; border: 1px solid var(--wnb-borde); border-radius: var(--radio); background: var(--wnb-fondo-suave); }

/* ---- tema oscuro (WhyNot): negro, titulares Impact en mayúsculas, botones redondos y el acento como color de lo importante ---- */
.wnb-tema-oscuro {
  --radio: 1rem;
  --fuente-titulos: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Narrow Bold", "Roboto Condensed", sans-serif;
}
.wnb-tema-oscuro h1, .wnb-tema-oscuro h2, .wnb-tema-oscuro .wnb-marca, .wnb-tema-oscuro .wnb-codigo__valor {
  font-family: var(--fuente-titulos); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em;
}
.wnb-tema-oscuro h1 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.05; }
.wnb-tema-oscuro h2 { font-size: 1.375rem; line-height: 1.15; }
.wnb-tema-oscuro .wnb-politica h2, .wnb-tema-oscuro .wnb-codigo h2 { font-size: 1.125rem; }
.wnb-tema-oscuro .wnb-cabecera { border-bottom: 3px solid var(--wnb-realce); }
.wnb-tema-oscuro .wnb-cabecera__interior { min-height: 5rem; }
.wnb-tema-oscuro .wnb-logo { width: 4.5rem; height: 3.75rem; border-radius: 0; }
.wnb-tema-oscuro .wnb-marca { font-size: 1.5rem; letter-spacing: 0.04em; }
.wnb-tema-oscuro .wnb-pie { margin-top: var(--e5); border-top: 1px solid var(--wnb-borde); }
.wnb-tema-oscuro .wnb-boton { padding-inline: var(--e5); border-radius: 999px; }
.wnb-tema-oscuro .wnb-boton--principal { box-shadow: none; }
.wnb-tema-oscuro .wnb-boton--principal:hover { filter: brightness(1.12); box-shadow: 0 12px 28px -12px var(--wnb-acento); }
.wnb-tema-oscuro .wnb-cantidad__paso { border-radius: 999px; }
.wnb-tema-oscuro .wnb-dia, .wnb-tema-oscuro .wnb-hora { border-radius: 0.75rem; }
.wnb-tema-oscuro .wnb-dia--con-huecos { border-color: var(--wnb-borde-control); }
.wnb-tema-oscuro .wnb-codigo__valor { letter-spacing: 0.08em; }