/* ==========================================================================
   Calendario de disponibilidad de la casa rural.

   Enseña lo que dicen Booking y Airbnb (vía iCal) y deja elegir entrada y
   salida. NO cobra ni reserva: manda una solicitud y Sandra confirma.

   La regla que gobierna todo este componente: un día solo se pinta como libre
   cuando de verdad SABEMOS que lo está. Si el calendario no se pudo leer, no
   se pinta nada y se piden las fechas a pelo — ver el estado «desconocido».
   ========================================================================== */

.calendario {
  border: 1px solid var(--line);
  background: var(--paper);
}

.calendario__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

.calendario__mesnombre {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 400;   /* Instrument Serif solo tiene este peso; ver base.css */
}

/* Solo la PRIMERA letra, no `text-transform: capitalize`.
   Capitalize pone mayúscula en cada palabra y en español eso escribe «Julio De
   2026» y «Julio Y Agosto»: las preposiciones y conjunciones van en minúscula.
   Es un detalle pequeño que delata enseguida que el texto lo compuso una
   máquina y no alguien que escribe en este idioma. */
.calendario__mesnombre::first-letter { text-transform: uppercase; }

.calendario__paso {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-fuerte);
  border-radius: var(--radio);
  transition: background-color var(--t-micro) var(--entra);
}

.calendario__paso:hover:not([disabled]) { background: var(--acento-suave); }

.calendario__paso[disabled] { opacity: 0.35; cursor: not-allowed; }

.calendario__meses {
  display: grid;
  /* min(100%, 280px): en móviles estrechos el mínimo de 280 desbordaba el
     propio calendario una vez descontados sus paddings. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s6);
  padding: var(--s5);
}

/* La retícula de días. Se usa una tabla de verdad porque un calendario ES una
   tabla: así el lector de pantalla anuncia «lunes 14» al entrar en la celda
   sin que haya que repetir el día de la semana en cada aria-label. */
.calendario__tabla {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendario__tabla th {
  padding-bottom: var(--s3);
  font-size: var(--fs-etiqueta);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calendario__tabla td { padding: 1px; }

/* ==========================================================================
   El día
   ========================================================================== */

.dia {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: var(--fs-pequeno);
  font-variant-numeric: tabular-nums;  /* que no bailen los anchos del 1 y el 8 */
  transition:
    background-color var(--t-micro) var(--entra),
    color var(--t-micro) var(--entra);
}

.dia:hover:not([aria-disabled='true']) {
  background: var(--acento-suave);
  border-color: var(--acento);
}

/* Ocupado y pasado. IMPORTANTE: se usa aria-disabled y no el atributo
   `disabled` a secas — un botón `disabled` no recibe foco, así que quien
   navega con teclado no puede leer POR QUÉ ese día no está: se lo salta y
   parece que el calendario tiene agujeros. Con aria-disabled entra el foco,
   se anuncia «no disponible» y el guion ignora la pulsación. */
.dia[aria-disabled='true'] {
  color: var(--muted);
  cursor: not-allowed;
}

.dia[data-estado='ocupado'] {
  color: rgba(46, 53, 50, 0.38);
}

/* La raya del día ocupado. Es la marca que NO depende del color: quien no
   distingue tonos ve igualmente que ese día está tachado. */
.dia[data-estado='ocupado']::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: rotate(-18deg);
}

.dia[data-estado='pasado'] { color: rgba(46, 53, 50, 0.28); }

/* Los extremos elegidos. */
.dia[data-sel='entrada'],
.dia[data-sel='salida'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

/* Lo que queda en medio. */
.dia[data-sel='dentro'] {
  background: var(--acento-suave);
  border-radius: 0;
}

/* Hoy: solo un punto. Un recuadro compite con la selección y confunde. */
.dia[data-hoy]::before {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--acento-texto);
}

.dia[data-sel='entrada']::before,
.dia[data-sel='salida']::before { background: var(--paper); }

/* ==========================================================================
   Leyenda y estado
   ========================================================================== */

.calendario__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-etiqueta);
  color: var(--muted);
  list-style: none;
}

.calendario__leyenda li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.muestra {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-fuerte);
  border-radius: var(--radio);
}

.muestra[data-muestra='libre'] { background: var(--paper); }
.muestra[data-muestra='ocupado'] { background: rgba(46, 53, 50, 0.1); }
.muestra[data-muestra='elegido'] { background: var(--ink); border-color: var(--ink); }

/* El aviso de que el calendario no se ha podido leer. No es decoración: es la
   diferencia entre «no hay huecos» y «no lo sabemos», y el visitante tiene
   derecho a saber cuál de las dos está viendo. */
.calendario__estado {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-etiqueta);
  color: var(--muted);
}

.calendario__estado[data-tono='aviso'] {
  background: #F7EFE0;
  color: #6B4E22;
}

/* Mientras carga. Sin esqueleto animado ni ruedecilla: una frase. */
.calendario[data-cargando='si'] .calendario__meses { opacity: 0.45; }

/* Sin JavaScript el calendario no puede funcionar, así que no se enseña a
   medias: se esconde y queda el formulario de fechas, que sí funciona solo. */
html:not(.js) .calendario { display: none; }

/* ==========================================================================
   Resumen de la elección
   ========================================================================== */

.eleccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5);
  border-top: 1px solid var(--line);
  background: var(--acento-suave);
}

/* Ojo: esta caja lleva `hidden` en el marcado y `display:flex` aquí. Quien las
   reconcilia es la regla global de [hidden] en base.css — sin ella, esta barra
   se quedaba visible desde el primer momento con dos guiones. */

.eleccion__dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eleccion__rotulo {
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.eleccion__valor {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 400;
}

.eleccion__noches {
  margin-left: auto;
  font-size: var(--fs-pequeno);
  color: var(--muted);
}

@media (max-width: 560px) {
  .calendario__meses { padding: var(--s4); }
  .eleccion { gap: var(--s4); }
  .eleccion__noches { margin-left: 0; width: 100%; }
}