/* Reservas de salones — calendario público (mismos colores que el calendario original).
 *
 * Ocupa el ancho de la columna hasta 960 px, con letra de lectura cómoda.
 * En el celular llega casi de borde a borde, los días se nombran con dos
 * letras y cada día muestra solo el número: el color y la leyenda dicen si
 * está libre, y la etiqueta para lectores de pantalla sigue diciendo el estado.
 */
.rsv {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 32px;
  font-family: inherit;
  font-size: 16px;
  color: #555;
}
.rsv-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-bottom: 0;
  padding: 12px 16px;
}
.rsv-title { text-align: center; font-size: 24px; color: #444; }
.rsv-nav {
  background: none;
  border: 0;
  min-height: 44px;
  padding: 8px 6px;
  font: inherit;
  font-size: 17px;
  color: #333;
  cursor: pointer;
}
.rsv-nav:first-child { justify-self: start; }
.rsv-nav:last-child { justify-self: end; }
.rsv-nav:disabled { opacity: 0.3; cursor: default; }
.rsv-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #e3e3e3;
  background: #f7f7f7;
}
.rsv-dow {
  background: #ececec;
  color: #666;
  text-align: center;
  font-size: 15px;
  padding: 10px 2px;
  border: 1px solid #fff;
}
.rsv-dow-short { display: none; }
.rsv-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: 1px solid #fff;
  background: #f7f7f7;
  font: inherit;
  cursor: pointer;
  min-height: 84px;
  text-align: center;
}
.rsv-day:disabled { cursor: default; }
.rsv-day:focus-visible { outline: 3px solid #7d6740; outline-offset: -3px; }
.rsv-num {
  display: block;
  padding: 6px 0;
  font-size: 18px;
  color: #fff;
  background: #8bb819;
}
.rsv-state {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.2;
  color: #666;
}
.rsv-day.rsv-busy .rsv-num { background: #ff8aa0; }
.rsv-day.rsv-off .rsv-num { background: #dcdcdc; color: #8a8a8a; }
.rsv-day.rsv-off .rsv-state { color: #9a9a9a; }
.rsv-day.rsv-out { opacity: 0.75; }
.rsv-day.rsv-free:hover .rsv-num { background: #6f9412; }
.rsv-day.rsv-sel { background: #a68b5b; }
.rsv-day.rsv-sel .rsv-num { background: #7d6740; color: #fff; }
.rsv-day.rsv-sel .rsv-state { color: #fff; font-style: normal; }
.rsv-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
  font-size: 16px;
  font-style: italic;
}
.rsv-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.rsv-swatch { display: inline-block; width: 16px; height: 16px; }
.rsv-swatch.rsv-free { background: #8bb819; }
.rsv-swatch.rsv-busy { background: #ff8aa0; }
.rsv-swatch.rsv-off { background: #dcdcdc; }
.rsv-summary { margin-top: 12px; font-size: 18px; color: #444; }
.rsv-note { margin-top: 6px; min-height: 1.2em; font-size: 16px; color: #b3261e; }

@media (min-width: 1600px) {
  .rsv { max-width: 1040px; }
  .rsv-day { min-height: 96px; }
}

@media (max-width: 600px) {
  /* Casi de borde a borde: la columna del tema deja demasiado margen en el celular. */
  .rsv {
    width: calc(100vw - 16px);
    max-width: none;
    margin-left: calc(50% - 50vw + 8px);
    margin-right: 0;
  }
  .rsv-head { padding: 6px 8px; }
  .rsv-title { font-size: 20px; }
  .rsv-nav { font-size: 16px; }
  .rsv-dow { font-size: 14px; padding: 8px 0; }
  .rsv-dow-long { display: none; }
  .rsv-dow-short { display: inline; }
  .rsv-day { min-height: 0; }
  .rsv-num {
    display: flex;
    gap: 0.25em;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0;
    font-size: 17px;
  }
  .rsv-state { display: none; }
  .rsv-num-month { display: none; }
  .rsv-legend { gap: 14px; font-size: 15px; }
}