/* RESERVAR PAGE REDESIGN */
/* RESERVAR PAGE REDESIGN */
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.calendar-day:hover:not(.empty):not(.disabled) {
  border-color: var(--color-gold-warm);
  background-color: var(--color-btn-ghost);
}
.calendar-day.selected {
  background: var(--color-gold-warm);
  color: var(--color-on-gold);
  font-weight: bold;
}
.calendar-day.disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.calendar-day.empty {
  cursor: default;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-border-light);
  border-radius: 3px;
}
.time-slot {
  border-radius: 9999px !important;
  border: 1px solid var(--color-border-light);
  padding: 0.5rem 1.5rem;
}
.time-slot.selected {
  background-color: var(--color-gold-warm);
  color: var(--color-on-gold);
  border-color: var(--color-gold-warm);
}
.time-slot.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-superficie-suave);
}
/* Hora cogida por otras clientas: se ve, pero tachada y sin poder pulsarse.
   Selector con tres clases a propósito: reservar.html lleva en su <style> un
   `.time-slot.disabled` pensado para fondo oscuro (#222), que en esta ventana
   clara dejaba un bloque casi negro con el número ilegible. Nunca se había
   notado porque hasta el 2026-09-11 las horas ocupadas no se pintaban. */
.time-slot.disabled.ocupada {
  opacity: 1;
  background: var(--color-superficie-suave);
  border-color: var(--color-linea-suave);
  color: var(--color-text-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Leyenda Libre / Ocupada: los puntos imitan a las propias horas */
.leyenda-punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  vertical-align: middle;
  margin-right: 6px;
}
.leyenda-libre { border: 1px solid var(--color-gold-warm); }
.leyenda-ocupada { background-color: var(--color-superficie-suave); border: 1px solid var(--color-linea-suave); }

/* Avisos dentro de la ventana de reserva (sustituyen a alert()) */
.booking-aviso {
  margin: 12px auto 0;
  max-width: 420px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  border: 1px solid var(--color-gold-warm);
  background-color: var(--color-btn-ghost);
  color: var(--color-text-light);
}
.booking-aviso.error {
  border-color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
  color: color-mix(in srgb, #e74c3c 75%, var(--color-text-light));
}


/* ══════════════════════════════════════════════════════════════
   PANTALLAS PEQUEÑAS — arreglos del 2026-09-21
   ══════════════════════════════════════════════════════════════
   Esta es la página que trae las reservas, y casi se usa desde el
   móvil. Medido a 375 px: 47 cosas que hay que pulsar eran más
   pequeñas que un dedo (se recomiendan 44x44 px), empezando por los
   38 botones "Reservar" y las flechas del calendario.
   Crece la zona que recoge el toque; el dibujo no cambia. */

/* `pointer: coarse` quiere decir "esto se maneja con el dedo": móvil o
   tablet, del tamaño que sea. Es más exacto que mirar el ancho, porque una
   tablet de 1024 px también se toca, y un portátil de 1024 px no.
   Se deja además el ancho como red de seguridad para navegadores viejos. */
@media (pointer: coarse), (max-width: 768px) {

  /* Los 38 botones "Reservar" de la carta */
  .btn-reservar,
  #btn-confirmar {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Flechas de mes del calendario: eran 22x26, lo más fácil de fallar.
     Ojo con el 56: el calendario entero se dibuja encogido al 80 %
     (transform: scale(0.8) escrito dentro de reservar.html), así que lo
     que se toca de verdad es el 80 % de lo que se pide aquí.
     56 x 0,8 = 45 px reales. */
  #prev-month,
  #next-month {
    min-width: 56px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* La X de cerrar la ventana */
  #close-modal {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ES / EN y el enlace "Volver" de la cabecera */
  .lang-switch__btn,
  header a[href="index.html"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lang-switch__btn {
    min-width: 44px;
  }

  /* "Ver más disponibilidad" (dentro de la ventana del calendario) y el
     enlace del pie */
  #booking-modal button:not(#close-modal):not(#prev-month):not(#next-month),
  main button,
  footer a {
    min-height: 44px;
  }
  footer a {
    display: inline-flex;
    align-items: center;
  }

  /* Las horas del calendario: ya eran cuadradas, pero justas */
  .time-slot {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Botones 📞 y 💬 con los colores de la marca ──────────────
   Círculo dorado/ámbar con el emoji dentro. Los pinta
   window.Citas.botonesDeContacto() (js/utilidades.js). Este mismo bloque
   está en css/reservas.css, porque esa página no carga este archivo. */
.contacto-emojis {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 10px;
}
.contacto-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--color-gold-warm, #C9A84C);
  background: var(--color-btn-ghost, rgba(201, 168, 76, 0.18));
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.contacto-emoji:hover,
.contacto-emoji:focus-visible {
  background: var(--color-gold-bright, #D4AF37);
  border-color: var(--color-gold-bright, #D4AF37);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25);
  transform: translateY(-1px);
}

/* ── ¿Para quién es la cita? y señal (ventana de reservar, fondo claro) ──
   Van en la parte que se desplaza, debajo de las horas: en el pie fijo
   ocupaban media pantalla del móvil y apenas dejaban ver el calendario. */
.reserva-extras {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-linea-suave);
}
.reserva-para {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-linea-suave);
}
.reserva-para__titulo {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-light);
  margin-bottom: 4px;
}
.reserva-para__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.reserva-para__opcion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--color-text-light);
  cursor: pointer;
}
.reserva-para__opcion[hidden] { display: none; }
.reserva-para__opcion input,
.reserva-senal__acepto input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold-warm);
  flex-shrink: 0;
}
.reserva-para__nombre {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--color-text-light);
  background: var(--color-dark-card);
}
.reserva-para__nombre[hidden] { display: none; }
.reserva-para__nombre:focus { outline: none; border-color: var(--color-gold-warm); }

.reserva-senal {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--color-btn-ghost);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
}
.reserva-senal[hidden] { display: none; }
.reserva-senal__texto {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-suave);
  margin-bottom: 6px;
}
.reserva-senal__acepto {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-light);
  cursor: pointer;
}

/* ── Web en un solo idioma (panel → botón DUO / MONO) ──────────
   js/i18n-loader.js pone html[data-idiomas="mono"]: fuera los selectores
   ES/EN, en el ordenador y en el menú del móvil. */
html[data-idiomas="mono"] .lang-switch__btn,
html[data-idiomas="mono"] [role="group"]:has(> .lang-switch__btn),
html[data-idiomas="mono"] .idiomas-caja {
  display: none !important;
}

/* El aviso de la cuenta, encima de la carta (2026-09-30): restringida,
   comprobándose o sin poder comprobarla. Lo pinta js/reservar.js. */
.reserva-aviso-cuenta {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-gold-warm, #C9A84C);
  background: var(--color-btn-ghost);
  color: var(--color-text-light, #ffffff);
  font-size: 0.9rem;
  line-height: 1.5;
}
/* El rojo, mezclado con el color de la letra: en Noche se aclara y en Lino
   se oscurece, como en la página del equipo */
.reserva-aviso-cuenta.is-error {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  color: color-mix(in srgb, #e74c3c 75%, var(--color-text-light, #ffffff));
}
.reserva-aviso-cuenta[hidden] { display: none; }

/* La ventana «Confirma tu correo» (2026-10-02). Va sobre el negro de las
   ventanas de aviso (#111) en los dos temas. El correo puede ser muy largo:
   se parte por donde haga falta en vez de salirse de la caja. */
.reserva-correo {
  color: var(--color-text-light);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}
.reserva-aviso-correo {
  border-left: 3px solid var(--color-gold-warm);
  color: var(--color-gold-text);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0 0 16px;
  padding: 8px 12px;
  text-align: left;
}
.reserva-aviso-correo.is-error {
  border-color: #e74c3c;
  color: color-mix(in srgb, #e74c3c 75%, var(--color-text-light));
}
.reserva-aviso-correo[hidden] { display: none; }

/* Contraste (2026-10-04, al preparar la agenda propia; desde el 2026-10-06
   con las fichas del tema, para que valga en claro y en oscuro): el oro sobre la
   etiqueta crema de cada categoría («38 servicios») se quedaba en 2,17:1, y
   el enlace del pie en 3,82:1. El bronce del panel claro y un blanco un
   punto más fuerte. Llevan el id / la etiqueta delante para ganar a las
   clases de Tailwind, que se cargan después. */
#services-container .reserva-chip { color: var(--color-gold-text); }
footer.reserva-pie { color: var(--color-text-suave); }
/* «Cancelar» de las ventanas de aviso (acceso, teléfono, privacidad, correo,
   llámanos): el gris de Tailwind sobre el negro de la ventana se quedaba en
   3,91:1. Un gris más claro (7:1 o más). La «×» de la ventana de reservar
   no: esa ventana es clara. */
:is([data-ventana], #phone-prompt-modal) button.text-gray-500:not(#close-modal) { color: var(--color-text-suave); }

/* La ventana de elegir día y hora es CLARA (beige y blanco) aunque la página
   sea oscura, y llevaba los colores pensados para el fondo negro (2026-10-04,
   medido al traer la agenda de Elegance): el oro como letra sobre beige daba
   2,16:1, el blanco sobre la barra dorada del mes 2,29:1 y el aviso «Selecciona
   un día» 2,40:1 (y casi invisible cuando lo repinta js/reservar.js, que lo
   escribe en blanco). El oro que es letra pasa al bronce del panel claro y lo
   que va encima del oro, a negro. */
#booking-modal .text-\[\#C9A84C\] { color: var(--color-gold-text); }
/* …salvo el botón de oro claro («Ver más disponibilidad»), que va con la letra
   normal: en oro, sobre el tinte del oro de Lino, se quedaba en 4,3:1 */
#booking-modal .bg-\[\#C9A84C\]\/20.text-\[\#C9A84C\] { color: var(--color-text-light); }
#booking-modal .bg-\[\#C9A84C\].text-white { color: var(--color-on-gold); }
#booking-modal #time-slots > :is(.text-gray-400, .text-white\/40) { color: var(--color-text-suave); }

/* ══════════════════════════════════════════════════════════════
   LA PÁGINA DE RESERVAS SIGUE AL TEMA: CLARA U OSCURA (2026-10-06)
   ══════════════════════════════════════════════════════════════
   Lo pidió el propietario: «dos temas, claro y oscuro, para la página de
   reservar», en las dos webs. Hasta ese día esta página iba siempre en
   Noche (data-solo-noche), con la ventana del calendario en blanco.

   Ahora la página carga css/base.css (las fichas de color de Noche y de
   Lino) y css/temas.css (las de los temas extra), igual que la portada, y
   aquí se pasan a esas fichas las clases de Tailwind que llevaban el color
   escrito. Así cada tema la pinta con sus colores:
   - temas claros (Lino, Avellana, Perla, Salvia): página, tarjetas,
     ventana del calendario y ventanas de aviso, claras;
   - temas oscuros (Noche, Esmeralda): todo oscuro, también la ventana
     del calendario, que antes era blanca.
   Todas las reglas llevan `html[data-tema]` delante para ganar a las de
   Tailwind, que se cargan después y pesan menos. Sin `data-tema` (si el
   script del <head> fallara) la página se queda como era. */

/* base.css pone 1,6 de interlineado; esta página iba con el 1,5 de Tailwind */
html[data-tema] body { line-height: 1.5; }

/* La página y sus textos */
html[data-tema] .bg-\[\#111111\] { background-color: var(--color-dark-main); }
html[data-tema] .text-white { color: var(--color-text-light); }
html[data-tema] .text-white\/60,
html[data-tema] .text-white\/50,
html[data-tema] .text-white\/40 { color: var(--color-text-suave); }
html[data-tema] .text-gold-warm,
html[data-tema] .text-\[\#C9A84C\],
html[data-tema] .hover\:text-gold-warm:hover,
html[data-tema] .hover\:text-\[\#C9A84C\]:hover { color: var(--color-gold-text); }
html[data-tema] .text-gray-800,
html[data-tema] .text-gray-700,
html[data-tema] .text-black,
html[data-tema] .hover\:text-black:hover,
html[data-tema] .hover\:text-white:hover { color: var(--color-text-light); }
html[data-tema] .text-gray-500,
html[data-tema] .text-gray-400 { color: var(--color-text-suave); }

/* Las tarjetas de la carta, la ventana del calendario y su barra de abajo */
html[data-tema] .bg-\[\#FAF8F5\] { background-color: var(--color-dark-bg); }
html[data-tema] .bg-white { background-color: var(--color-dark-card); }
html[data-tema] .hover\:bg-gray-50:hover { background-color: var(--color-superficie-suave); }
html[data-tema] .bg-\[\#fcf9f2\],
html[data-tema] .bg-\[\#C9A84C\]\/10,
html[data-tema] .bg-\[\#C9A84C\]\/20 { background-color: var(--color-btn-ghost); }
html[data-tema] .hover\:bg-\[\#C9A84C\]\/30:hover { background-color: var(--color-btn-ghost-hover); }
/* El botón de oro claro («Ver más disponibilidad»): su letra en oro se
   quedaba en 4,3:1 sobre el tinte del oro en Lino; va con la letra normal */
html[data-tema] .bg-\[\#C9A84C\]\/20.text-\[\#C9A84C\] { color: var(--color-text-light); }
html[data-tema] .border-gray-100,
html[data-tema] .border-gray-200 { border-color: var(--color-linea-suave); }
html[data-tema] .border-gray-500,
html[data-tema] .border-gray-700,
html[data-tema] .hover\:border-gray-500:hover,
html[data-tema] .border-\[\#C9A84C\]\/20,
html[data-tema] .border-\[\#C9A84C\]\/30 { border-color: var(--color-border-light); }
html[data-tema] .border-\[\#C9A84C\],
html[data-tema] .hover\:border-\[\#C9A84C\]:hover { border-color: var(--color-gold-warm); }
/* Cerrada, la tarjeta de una categoría lleva una raya fina; abierta, la
   del acento (js/reservar.js le pone y le quita border-[#C9A84C]) */
html[data-tema] .service-category-card { border-color: var(--color-linea-suave); }
html[data-tema] .service-category-card.border-\[\#C9A84C\] { border-color: var(--color-gold-warm); }

/* Las ventanas de aviso (falta entrar, falta el teléfono, la privacidad, el
   correo, «llámanos»): la tarjeta del tema, clara u oscura */
html[data-tema] .bg-\[\#111\] { background-color: var(--color-dark-card); }

/* Los botones de oro: el acento del tema con su letra. La barra de arriba
   del calendario llevaba letra blanca sobre el oro (2,1:1): ahora, la de
   encima del acento. */
html[data-tema] .bg-\[\#C9A84C\],
html[data-tema] .bg-\[\#C9A84C\].text-black,
html[data-tema] .bg-\[\#C9A84C\].text-white { background-color: var(--color-gold-warm); color: var(--color-on-gold); }
html[data-tema] .hover\:bg-white:hover,
html[data-tema] .hover\:bg-\[\#b09341\]:hover { background-color: var(--color-gold-bright); color: var(--color-on-gold); }
/* «Confirmar» era negro sobre la ventana blanca: ahora, el acento */
html[data-tema] #btn-confirmar { background-color: var(--color-gold-warm); color: var(--color-on-gold); }
html[data-tema] #btn-confirmar:hover:not(:disabled) { background-color: var(--color-gold-bright); }

/* Las horas: el borde y el relleno del acento */
html[data-tema] .time-slot { color: var(--color-text-light); border-color: var(--color-gold-warm); }
html[data-tema] .time-slot:hover:not(.disabled),
html[data-tema] .time-slot.selected { background-color: var(--color-gold-warm); border-color: var(--color-gold-warm); color: var(--color-on-gold); }
html[data-tema] .time-slot.disabled.ocupada { border-color: var(--color-linea-suave); color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-text-light)); }
/* Los días que no se pueden elegir (pasados o de cierre): más apagados que
   los demás, pero que se lean. Con el gris tal cual se quedaban en 4,4:1
   sobre la tarjeta oscura de Noche: el gris, mezclado con la letra. */
html[data-tema] .calendar-day.disabled { color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-text-light)); }

/* «¡Reserva confirmada!» y los errores: el verde y el rojo, mezclados con el
   color de la letra para que se lean en claro y en oscuro */
html[data-tema] .text-green-400 { color: color-mix(in srgb, #2ecc71 55%, var(--color-text-light)); }
html[data-tema] .text-red-500 { color: color-mix(in srgb, #e74c3c 75%, var(--color-text-light)); }

/* Las letras de los temas extra (Avellana, Perla, Salvia, Esmeralda) */
html[data-paleta] body.font-sans { font-family: var(--font-body); }
html[data-paleta] .font-serif { font-family: var(--font-display); }