/**
 * Página pública de reserva. Hoja aparte de `estilos.css` a propósito: lo que
 * ve el cliente de la calle no tiene por qué cambiar cuando se retoca la
 * agenda interna, ni al revés.
 */

.publico {
  margin: 0;
  padding: 2rem 1rem 3rem;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.publico__caja {
  max-width: 620px;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem 1.8rem;
  box-shadow: var(--sombra);
}

.publico__titulo { margin: 0 0 0.4rem; font-size: 1.5rem; }

.publico__intro {
  margin: 0 0 1.4rem;
  color: var(--texto-tenue);
}

.publico__huecos {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 0.8rem 0.9rem;
  margin: 0 0 1rem;
}

.publico__huecos[disabled] { opacity: 0.6; }

.publico__lista { min-height: 7.5rem; }

/* ---------- El calendario, desplegable ----------

   Dibujado aquí y no con el del navegador, porque el del navegador no sabe
   decir «este día sí y este no» — y ver de un vistazo qué días atiende el
   despacho es la mitad de lo que se viene a hacer a esta página.

   Cerrado por defecto y de tamaño contenido: estuvo un rato siempre abierto y
   ocupando el ancho del formulario, con celdas de sesenta píxeles. Un
   calendario no es el contenido de la página, es una forma de elegir un día. */

/* Flecha, desplegable, flecha. Las flechas para el día de al lado —que es
   lo que más se busca— y el desplegable para ir lejos. */
.publico__navdia {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.publico__selector {
  position: relative;
  flex: 1;
  min-width: 0;
}

.publico__abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.8rem;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.publico__abrir:hover { border-color: var(--marca); }

.publico__flechita {
  color: var(--marca);
  font-size: 0.8rem;
}

.publico__abrir[aria-expanded="true"] .publico__flechita { transform: rotate(180deg); }

/* Flotando por encima: así abrirlo no empuja el formulario hacia abajo. */
.publico__calendario {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.3rem);
  /* Centrado bajo el desplegable, no pegado a su izquierda. */
  left: 50%;
  transform: translateX(-50%);
  width: 19rem;
  max-width: calc(100vw - 2.5rem);
  border: 1px solid var(--borde-fuerte, #d3c6dd);
  border-radius: 12px;
  padding: 0.6rem;
  background: var(--superficie);
  box-shadow: 0 8px 24px rgba(72, 28, 95, 0.15);
}

.publico__mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Sin `capitalize`: pone mayúscula a cada palabra y sale «Octubre De 2026».
   La primera letra la pone el propio texto. */
.publico__mes strong { font-size: 0.9rem; }

.publico__flecha {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--marca);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.publico__flecha:hover:not([disabled]) { border-color: var(--marca); }

.publico__flecha[disabled] {
  opacity: 0.35;
  cursor: default;
}

.publico__semana,
.publico__celdas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.publico__inicial {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--texto-tenue);
  padding-bottom: 0.15rem;
}

/* Alto fijo y no `aspect-ratio`: con proporción cuadrada, el ancho del
   formulario mandaba y salían celdas de sesenta píxeles. */
.publico__celda {
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.82rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 0;
}

/* Un día que se puede pedir: se ve que es un botón. */
.publico__celda--libre {
  color: var(--marca);
  font-weight: 600;
  border-color: var(--borde);
  background: var(--fondo, #f6f3f9);
  cursor: pointer;
}

.publico__celda--libre:hover { border-color: var(--marca); }

/* Un día sin huecos se sigue viendo —quitarlo dejaría agujeros en la rejilla y
   se leería peor— pero apagado y sin poder pulsarse. */
.publico__celda--sinhueco {
  color: var(--texto-tenue);
  opacity: 0.4;
}

.publico__celda--elegida {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

.publico__celda--vacia { visibility: hidden; }

/* El día que se está mirando, escrito con todas las letras: en el calendario
   es un número suelto y conviene confirmar cuál es. */
.publico__diaelegido {
  margin: 0.8rem 0 0.5rem;
  text-align: center;
  font-size: 1rem;
}

/* Hasta cuándo llega lo que ofrece el despacho. Se puede mirar cualquier mes,
   así que hay que decir dónde acaba lo que de verdad se puede pedir. Lo decide
   cada notaría en Ajustes, en «días de agenda que se ofrecen». */
.publico__hasta {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* Lo que se lleva elegido, dicho con todas las letras.
   Al cambiar de día la hora marcada deja de verse, y sin esto uno llega al
   botón de pedir sin saber qué está a punto de reservar. */
.publico__elegido {
  margin: 0.8rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--marca-suave, #f0e5f5);
  border-radius: 8px;
  font-size: 0.9rem;
}

/* La fecha, lo primero que se lee al terminar. */
.publico__cuando {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.publico__fecha {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-tenue);
}

/* Una hora ya cogida: se ve, para que el día tenga forma reconocible, pero
   apagada y tachada. Mismo criterio que los días del calendario — enseñar lo
   que no se puede es lo que hace entender lo que sí.

   Dice que no está disponible y nada más: ni quién la tiene ni por qué. */
.publico__hora--ocupada {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-tenue);
  opacity: 0.45;
  text-decoration: line-through;
  font-size: 0.9rem;
  cursor: default;
}

/* Con aire por arriba: pegadas al selector de día parecían parte de él. */
.publico__horas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

/* La hora es el control: el radio de verdad se esconde y la etiqueta entera
   es lo pulsable, que en un móvil es la diferencia entre acertar y no.
   Se oculta recortándolo a 1 px y no con `width: 0` ni `display: none`: a
   tamaño cero el navegador lo saca del árbol de accesibilidad y deja de
   existir para un lector de pantalla y para la navegación por teclado. */
.publico__hora input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.publico__hora span {
  display: inline-block;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.publico__hora input:checked + span {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* Foco visible: se navega con teclado más de lo que parece, y sin esto el
   radio oculto se lleva el foco sin que se note dónde está. */
.publico__hora input:focus-visible + span {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.publico__nota {
  margin: 0.9rem 0 0;
  color: var(--texto-tenue);
  font-size: 0.87rem;
}

.publico__aviso {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cancelada-borde);
  background: var(--cancelada-fondo);
  border-radius: var(--radio);
  font-size: 0.9rem;
}

.publico__gracias { text-align: center; padding: 1.5rem 0; }
.publico__gracias h2 { margin: 0 0 0.5rem; }

/*
 * La explicación de cada forma de cita, debajo de su nombre.
 *
 * En bloque y no a continuación: la frase que importa —«te llamamos
 * nosotros»— tiene que leerse entera de un vistazo, no perderse al final de
 * una línea que sigue.
 */
.publico__matiz {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--texto-tenue);
}