/* calendario-reserva — mes con navegación, un día o un rango de fechas.
   Citas de dentista/fisio/peluquería (un día) o estancias de alojamiento
   rural (rango con entrada y salida). Portado de react-day-picker / react-aria:
   aquí no hay dependencias, es sólo CSS grid + botones. */
[data-lui~="calendario-reserva"]{
  --lui-hoy:var(--lui-acento,#c8a24a);
  --lui-radio:10px;
  display:inline-block;
  width:100%;
  max-width:22em;
  box-sizing:border-box;
  padding:1.1em;
  border:1px solid var(--lui-linea,#e6e6e0);
  border-radius:calc(var(--lui-radio) + 4px);
  background:var(--lui-superficie,#fff);
  color:var(--lui-texto,#1a1a18);
  font:14px/1.4 system-ui,sans-serif;
  box-sizing:border-box;
}
[data-lui~="calendario-reserva"] *{box-sizing:border-box}

/* Cabecera: mes/año + navegación. El tamaño del rótulo es clamp para que un
   nombre de mes largo ("septiembre") no rompa la cabecera en un widget de
   ancho fijo. */
[data-lui~="calendario-reserva"] .lui-cab{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.9em;
}
[data-lui~="calendario-reserva"] .lui-mes{
  font-weight:600;text-transform:capitalize;
  font-size:clamp(.95em,.85em + .3vw,1.05em);
}
[data-lui~="calendario-reserva"] .lui-nav{
  display:inline-flex;align-items:center;justify-content:center;
  width:2em;height:2em;border-radius:50%;
  border:1px solid var(--lui-linea,#e6e6e0);
  background:transparent;color:var(--lui-texto,#1a1a18);
  cursor:pointer;font-size:1em;line-height:1;
  transition:background .15s,border-color .15s;
}
[data-lui~="calendario-reserva"] .lui-nav:hover{background:var(--lui-linea,#e6e6e0)}
[data-lui~="calendario-reserva"] .lui-nav:disabled{opacity:.3;cursor:not-allowed;background:none}
[data-lui~="calendario-reserva"] .lui-nav:focus-visible{outline:2px solid var(--lui-hoy);outline-offset:2px}

/* Cabecera de días de la semana y rejilla: siempre 7 columnas iguales,
   nunca px fijos, así el widget respira igual en una tarjeta estrecha. */
[data-lui~="calendario-reserva"] .lui-semana,
[data-lui~="calendario-reserva"] .lui-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
}
[data-lui~="calendario-reserva"] .lui-semana{margin-bottom:.35em}
[data-lui~="calendario-reserva"] .lui-semana span{
  text-align:center;font-size:.78em;color:var(--lui-atenuado,#75756c);
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:.2em 0;
}

/* La rejilla se desvanece muy suave al cambiar de mes: sólo opacidad, nunca
   layout, así no hay salto ni parpadeo aunque el mes tenga una fila menos. */
[data-lui~="calendario-reserva"] .lui-grid{
  animation:lui-cal-aparece .18s ease-out;
}
@keyframes lui-cal-aparece{from{opacity:0}to{opacity:1}}

[data-lui~="calendario-reserva"] .lui-dia{
  position:relative;
  appearance:none;border:none;background:none;
  aspect-ratio:1/1;width:100%;
  display:grid;place-items:center;
  font:inherit;color:var(--lui-texto,#1a1a18);
  cursor:pointer;border-radius:var(--lui-radio);
  transition:background .15s,color .15s;
}
[data-lui~="calendario-reserva"] .lui-dia:hover{background:var(--lui-linea,#e6e6e0)}
[data-lui~="calendario-reserva"] .lui-dia:focus-visible{outline:2px solid var(--lui-hoy);outline-offset:1px}

[data-lui~="calendario-reserva"] .lui-dia:disabled{
  cursor:not-allowed;color:var(--lui-atenuado,#75756c);opacity:.4;
}
[data-lui~="calendario-reserva"] .lui-dia.lui-hoy::after{
  content:"";position:absolute;bottom:.2em;width:.28em;height:.28em;
  border-radius:50%;background:var(--lui-hoy);
}
[data-lui~="calendario-reserva"] .lui-dia.lui-hoy:disabled::after{background:var(--lui-atenuado,#75756c)}

/* Día único elegido, o extremos del rango: pastilla sólida del acento. */
[data-lui~="calendario-reserva"] .lui-dia.lui-elegido,
[data-lui~="calendario-reserva"] .lui-dia.lui-inicio,
[data-lui~="calendario-reserva"] .lui-dia.lui-fin{
  background:var(--lui-acento,#c8a24a);color:#fff;
}
[data-lui~="calendario-reserva"] .lui-dia.lui-elegido:hover,
[data-lui~="calendario-reserva"] .lui-dia.lui-inicio:hover,
[data-lui~="calendario-reserva"] .lui-dia.lui-fin:hover{background:var(--lui-acento,#c8a24a)}

/* Días intermedios del rango: franja continua de color suave. Los extremos
   redondean sólo su lado exterior para que la franja se vea de una pieza,
   no como pastillas sueltas. */
[data-lui~="calendario-reserva"] .lui-dia.lui-en-rango{
  background:color-mix(in srgb, var(--lui-acento,#c8a24a) 16%, transparent);
  border-radius:0;
}
[data-lui~="calendario-reserva"] .lui-dia.lui-inicio{border-radius:var(--lui-radio) 0 0 var(--lui-radio)}
[data-lui~="calendario-reserva"] .lui-dia.lui-fin{border-radius:0 var(--lui-radio) var(--lui-radio) 0}
[data-lui~="calendario-reserva"] .lui-dia.lui-inicio.lui-fin{border-radius:var(--lui-radio)}

[data-lui~="calendario-reserva"] .lui-vacio{visibility:hidden}

/* Resumen opcional (lo rellena la página al escuchar el evento lui-reserva). */
[data-lui~="calendario-reserva"] + .lui-resumen{
  margin-top:.75em;font-size:.9em;color:var(--lui-atenuado,#75756c);
}

/* En pantallas sin puntero fino (móvil/tablet) el hover se queda "pegado"
   tras tocar: se anula para que un día no parezca elegido sin estarlo. */
@media (hover:none){
  [data-lui~="calendario-reserva"] .lui-dia:hover{background:none}
  [data-lui~="calendario-reserva"] .lui-dia.lui-elegido:hover,
  [data-lui~="calendario-reserva"] .lui-dia.lui-inicio:hover,
  [data-lui~="calendario-reserva"] .lui-dia.lui-fin:hover{background:var(--lui-acento,#c8a24a)}
  [data-lui~="calendario-reserva"] .lui-nav:hover{background:transparent}
}

@media (prefers-reduced-motion:reduce){
  [data-lui~="calendario-reserva"] .lui-grid{animation:none}
  [data-lui~="calendario-reserva"] .lui-dia,
  [data-lui~="calendario-reserva"] .lui-nav{transition:none}
}