/* ============================================================
   RUOT · Calendario de reserva de un tour (08-nov-2026 · v2)
   ------------------------------------------------------------
   Un campo «Cuándo» que abre un desplegable con UN mes, flechas y los días en verde cuando
   hay salida. Al elegir el día salen sus horas debajo.

   Antes la casilla llevaba «1 salida · ES» y se rompía en columnas estrechas. Ahora: número,
   verde y un punto. El punto no es adorno: el color solo no puede ser el único canal (WCAG
   1.4.1), y la leyenda lo dice con palabras.

   Solo tokens: ningún color ni medida escrito a mano.
   ============================================================ */

.cal-bloque { margin: 0; }

/* ---------- campo ---------- */
/* `min(26rem, 100%)`: con la letra al 200 % un 26rem fijo se sale de la pantalla. */
.cal-campo { position: relative; max-width: min(26rem, 100%); }
.cal-campo-btn {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--tactil-cta); padding: 0 var(--sp-4);
  background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio);
  font: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.cal-campo-btn:hover { border-color: var(--borde-fuerte); }
/* Anillo de foco en :focus y no solo en :focus-visible: hay navegadores y lectores que mueven el
   foco por código y no activan :focus-visible; el foco tiene que verse siempre. */
.cal-campo-btn:focus,
.cal-campo-btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.cal-campo-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cal-campo-etq { font-size: var(--fs-caption); color: var(--texto-suave); line-height: 1.2; }
.cal-campo-val { font-size: var(--fs-base); font-weight: 800; line-height: 1.3; }
.cal-campo-ico { color: var(--texto-suave); font-size: var(--fs-base); line-height: 1; }
.cal-abierto .cal-campo-btn { border-color: var(--borde-fuerte); }
.cal-abierto .cal-campo-ico { transform: rotate(180deg); }

/* ---------- desplegable ---------- */
.cal-panel {
  position: absolute; z-index: 30; left: 0; top: calc(100% + var(--sp-2));
  width: 100%; padding: var(--sp-4);
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-m); box-shadow: var(--sombra-media);
}
.cal-panel[hidden] { display: none; }

.cal-barra { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cal-mes {
  flex: 1; min-width: 0; margin: 0; text-align: center;
  /* Un solo renglón: con --fs-titulo «noviembre de 2026» partía en dos y empujaba las flechas. */
  font-size: var(--fs-base); font-weight: 800; line-height: var(--lh-apretado);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-flecha, .cal-cerrar {
  min-height: var(--tactil); min-width: var(--tactil);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie); color: var(--texto); font: inherit; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.cal-flecha:hover, .cal-cerrar:hover { border-color: var(--borde-fuerte); }
.cal-flecha:focus, .cal-cerrar:focus,
.cal-dia:focus, .cal-reservar:focus { outline: 3px solid var(--foco); outline-offset: 2px; }
.cal-flecha:disabled { opacity: .5; cursor: default; border-color: var(--separador); }
.cal-cerrar { font-size: var(--fs-small); }

/* El anuncio del mes nuevo es para lectores de pantalla: el mes ya se ve en .cal-mes. */
.cal-anuncio {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- rejilla de días ---------- */
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.cal-dia-cab {
  text-align: center; font-size: var(--fs-caption); font-weight: 700;
  color: var(--texto-suave); padding-bottom: var(--sp-1);
}
.cal-hueco { min-height: var(--tactil); }

.cal-dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tactil); min-width: 0; padding: 0;
  border: 1px solid transparent; border-radius: var(--radio-s);
  background: transparent; color: var(--texto); font: inherit; cursor: pointer;
}
.cal-num { font-size: var(--fs-base); font-weight: 700; line-height: 1; }

/* día con salida: verde + punto (dos señales) */
.cal-dia-con { background: var(--tinte-exito); border-color: var(--tinte-exito); color: var(--c-exito); }
.cal-dia-con .cal-num { font-weight: 800; }
.cal-dia-con:hover { border-color: var(--c-exito); }
.cal-punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: block;
}

/* día elegido: verde lleno, blanco encima (5,9:1) */
.cal-dia-elegido { background: var(--c-exito); border-color: var(--c-exito); color: var(--c-blanco); }
.cal-dia-elegido:hover { border-color: var(--c-exito); }

/* día sin salida: apagado y desactivado */
.cal-dia-sin { color: var(--texto-suave); cursor: default; }
.cal-dia:disabled { opacity: .75; }

.cal-leyenda { margin: var(--sp-3) 0 0; font-size: var(--fs-caption); color: var(--texto-suave); }

/* ---------- horas del día elegido ---------- */
.cal-detalle { margin-top: var(--sp-5); }
.cal-detalle:empty { margin-top: 0; }
.cal-detalle-titulo {
  margin: 0 0 var(--sp-3); font-size: var(--fs-titulo); font-weight: 800;
  line-height: var(--lh-apretado);
}
.cal-detalle-titulo:focus, .cal-detalle-titulo:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.cal-horas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.cal-hora {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
}
.cal-hora strong { font-size: var(--fs-titulo); font-weight: 800; }
.cal-hora-meta { flex: 1; min-width: 0; color: var(--texto-suave); font-size: var(--fs-small); }
.cal-reservar { margin-left: auto; }

/* Avisos del calendario: la fecha del enlace sin salida y qué significa «En formación». */
.cal-aviso { margin: var(--sp-3) 0 0; }
.cal-aviso-fecha { margin: 0 0 var(--sp-4); }

@media (max-width: 719px) {
  .cal-campo { max-width: none; }
  /* En estrecho el mes no cabe junto a tres botones: pasa a su propio renglón y debajo van
     las dos flechas y el cerrar. */
  .cal-barra { flex-wrap: wrap; row-gap: var(--sp-2); }
  .cal-mes { order: -1; flex: 1 0 100%; text-align: left; white-space: normal; }
  .cal-cerrar { margin-left: auto; }
  .cal-rejilla { gap: 2px; }
  .cal-dia { padding: 0; }
  .cal-reservar { width: 100%; margin-left: 0; }
}