/* ui-reservas.css — estilos del módulo "reservas" (perfiles Residente / Control de acceso). Prefijo de clases: cs-reservas-* */

/* texto sobre el color primario (en oscuro el primario es claro): lo usan también las pantallas de servicios */
:root { --cs-on-primary: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --cs-on-primary: #042F2E; } }
:root[data-tema="oscuro"] { --cs-on-primary: #042F2E; }

/* ---- Pestañas y filtros ---- */
.cs-reservas-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; background: var(--cs-line); border-radius: 16px; }
.cs-reservas-tab { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; border-radius: 12px; color: var(--cs-muted); font-weight: 700; font-size: .9rem; }
.cs-reservas-tab.active { background: var(--cs-surface); color: var(--cs-primary-dark); box-shadow: var(--cs-shadow); }
.cs-reservas-filtro { display: flex; gap: .5rem; }
.cs-reservas-pill { min-height: 40px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font-weight: 700; cursor: pointer; }
.cs-reservas-pill--sel { background: var(--cs-primary); border-color: var(--cs-primary); color: var(--cs-on-primary, #fff); }

/* ---- Avisos ---- */
.cs-reservas-aviso { display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: var(--cs-radius); align-items: flex-start; }
.cs-reservas-aviso p { font-size: .88rem; margin: .15rem 0 .5rem; }
.cs-reservas-aviso--alerta { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-reservas-nota { font-size: .86rem; color: var(--cs-muted); }
.cs-reservas-nota--alerta { color: var(--cs-warn); background: var(--cs-warn-bg); padding: .55rem .75rem; border-radius: 12px; }
.cs-reservas-sub { font-size: .8rem; color: var(--cs-muted); }
.cs-reservas-vacio { color: var(--cs-muted); padding: .5rem 0; }

/* ---- Lista de áreas ---- */
.cs-reservas-lista { display: flex; flex-direction: column; gap: .75rem; }
.cs-reservas-area { display: flex; align-items: center; gap: .85rem; padding: .8rem; border-radius: var(--cs-radius); background: var(--cs-surface); border: 1px solid color-mix(in srgb, var(--cs-line) 70%, transparent); box-shadow: var(--cs-shadow); color: inherit; transition: transform .15s; }
.cs-reservas-area:active { transform: scale(.985); }
.cs-reservas-area--bloq { opacity: .8; }
.cs-reservas-area-img { width: 76px; height: 76px; border-radius: 16px; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--cs-primary-soft), color-mix(in srgb, var(--cs-primary-soft) 60%, var(--cs-surface))); color: var(--cs-primary-dark); }
.cs-reservas-area-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-reservas-area-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.cs-reservas-area-tit { display: flex; flex-direction: column; }
.cs-reservas-area-tit strong { font-size: 1.02rem; color: var(--cs-ink); }
.cs-reservas-precio { font-size: .85rem; color: var(--cs-primary-dark); font-weight: 700; }
.cs-reservas-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }

/* ---- Reglas ---- */
.cs-reservas-reglas h2 { margin-bottom: .5rem; }
.cs-reservas-reglas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .9rem; }
.cs-reservas-reglas li { display: flex; gap: .55rem; align-items: flex-start; color: var(--cs-text); }
.cs-reservas-reglas li .cs-ico { margin-top: .2rem; color: var(--cs-primary); }

/* ---- Tira de días ---- */
.cs-reservas-dias { display: flex; gap: .5rem; overflow-x: auto; margin: 0 -1rem; padding: .15rem 1rem .5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cs-reservas-dias::-webkit-scrollbar { display: none; }
.cs-reservas-dia { flex: none; width: 58px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 18px; border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); cursor: pointer; scroll-snap-align: start; }
.cs-reservas-dia small { font-size: .68rem; color: var(--cs-muted); font-weight: 700; text-transform: uppercase; min-height: .9em; }
.cs-reservas-dia strong { font-size: 1.3rem; line-height: 1.1; color: var(--cs-ink); }
.cs-reservas-dia[disabled] { opacity: .4; cursor: not-allowed; }
.cs-reservas-dia--sel { background: var(--cs-primary); border-color: var(--cs-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--cs-primary) 35%, transparent); }
.cs-reservas-dia--sel small, .cs-reservas-dia--sel strong { color: var(--cs-on-primary, #fff); }
.cs-reservas-refrescar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--cs-muted); display: grid; place-items: center; cursor: pointer; }

/* ---- Bloques del día ---- */
.cs-reservas-bloques { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .6rem; }
@media (min-width: 480px) { .cs-reservas-bloques { grid-template-columns: repeat(4, 1fr); } }
.cs-reservas-bloque { min-height: 58px; border-radius: 14px; border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; padding: .2rem; transition: transform .1s; }
.cs-reservas-bloque:active { transform: scale(.96); }
.cs-reservas-bloque strong { font-size: 1.02rem; font-variant-numeric: tabular-nums; color: var(--cs-ink); }
.cs-reservas-bloque small { font-size: .68rem; color: var(--cs-muted); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-reservas-bloque--libre { border-color: color-mix(in srgb, var(--cs-primary) 45%, var(--cs-line)); background: color-mix(in srgb, var(--cs-primary-soft) 40%, var(--cs-surface)); }
.cs-reservas-bloque--libre small { color: var(--cs-primary-dark); }
.cs-reservas-bloque--ocupado, .cs-reservas-bloque--pasado, .cs-reservas-bloque--nodisponible { background: repeating-linear-gradient(135deg, var(--cs-surface-2), var(--cs-surface-2) 6px, var(--cs-line) 6px, var(--cs-line) 7px); border-style: dashed; cursor: not-allowed; }
.cs-reservas-bloque--ocupado strong, .cs-reservas-bloque--pasado strong, .cs-reservas-bloque--nodisponible strong { color: var(--cs-muted); text-decoration: line-through; }
.cs-reservas-bloque--bloqueado { background: var(--cs-warn-bg); border-color: color-mix(in srgb, var(--cs-warn) 40%, var(--cs-line)); cursor: not-allowed; }
.cs-reservas-bloque--bloqueado strong, .cs-reservas-bloque--bloqueado small { color: var(--cs-warn); }
.cs-reservas-bloque--mio { background: var(--cs-info-bg); border-color: var(--cs-info); cursor: default; }
.cs-reservas-bloque--mio strong, .cs-reservas-bloque--mio small { color: var(--cs-info); }
.cs-reservas-bloque--sel, .cs-reservas-bloque--sel.cs-reservas-bloque--libre { background: var(--cs-primary); border-color: var(--cs-primary); box-shadow: 0 6px 16px color-mix(in srgb, var(--cs-primary) 35%, transparent); }
.cs-reservas-bloque--sel strong, .cs-reservas-bloque--sel small, .cs-reservas-bloque--sel.cs-reservas-bloque--libre small { color: var(--cs-on-primary, #fff); text-decoration: none; }
.cs-reservas-leyenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .8rem; font-size: .74rem; color: var(--cs-muted); }
.cs-reservas-leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.cs-reservas-pt { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--cs-line); display: inline-block; }
.cs-reservas-pt--libre { border-color: var(--cs-primary); background: var(--cs-primary-soft); }
.cs-reservas-pt--ocupado { background: var(--cs-line); border-style: dashed; }
.cs-reservas-pt--mio { border-color: var(--cs-info); background: var(--cs-info-bg); }
.cs-reservas-pt--bloqueado { border-color: var(--cs-warn); background: var(--cs-warn-bg); }

/* ---- Barra de resumen (pegada sobre la barra de pestañas) ---- */
.cs-reservas-barra { position: sticky; bottom: calc(5.6rem + var(--cs-safe-bottom)); z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; border-radius: 20px; background: var(--cs-surface); border: 1px solid var(--cs-line); box-shadow: var(--cs-shadow-lg); }
.cs-reservas-barra--activa { border-color: var(--cs-primary); }
.cs-reservas-barra-txt { display: flex; flex-direction: column; font-size: .84rem; color: var(--cs-muted); min-width: 0; }
.cs-reservas-barra-txt strong { font-size: 1.05rem; color: var(--cs-ink); }

/* ---- Hoja de confirmación ---- */
.cs-reservas-resumen { display: flex; flex-direction: column; border: 1px solid var(--cs-line); border-radius: 16px; overflow: hidden; }
.cs-reservas-resumen > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .9rem; border-bottom: 1px solid var(--cs-line); font-size: .92rem; }
.cs-reservas-resumen > div:last-child { border-bottom: 0; }
.cs-reservas-resumen span { color: var(--cs-muted); }
.cs-reservas-resumen strong { color: var(--cs-ink); text-align: right; }
.cs-reservas-total { background: var(--cs-primary-soft); }
.cs-reservas-total strong { font-size: 1.2rem; color: var(--cs-primary-dark); }
.cs-reservas-reglamento { border: 1px solid var(--cs-line); border-radius: 14px; padding: .6rem .85rem; font-size: .88rem; }
.cs-reservas-reglamento summary { cursor: pointer; font-weight: 700; color: var(--cs-primary-dark); min-height: 32px; display: flex; align-items: center; }
.cs-reservas-reglamento p { margin-top: .4rem; color: var(--cs-text); white-space: pre-line; }
.cs-reservas-acepto { display: flex; gap: .6rem; align-items: center; min-height: 44px; font-weight: 600; font-size: .92rem; }
.cs-reservas-acepto input { width: 22px; height: 22px; accent-color: var(--cs-primary); }

/* ---- Mis reservaciones ---- */
.cs-reservas-res { display: flex; flex-direction: column; gap: .6rem; }
.cs-reservas-res header { display: flex; align-items: center; gap: .75rem; }
.cs-reservas-res-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-reservas-res-tit strong { color: var(--cs-ink); }
.cs-reservas-res-tit span { font-size: .84rem; color: var(--cs-muted); }
.cs-reservas-res-datos { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; color: var(--cs-text); }
.cs-reservas-res-datos span { display: inline-flex; align-items: center; gap: .35rem; }
.cs-reservas-res-motivo { font-size: .88rem; color: var(--cs-muted); font-style: italic; }
.cs-reservas-cargo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .75rem; border-radius: 12px; background: var(--cs-surface-2); font-size: .9rem; }
.cs-reservas-pagado { display: inline-flex; align-items: center; gap: .35rem; color: var(--cs-ok); font-weight: 700; }

/* La hoja inferior (CsHoja) vive dentro de .cs-contenido, que por su animación crea un contexto de apilamiento y deja a la
   hoja DEBAJO de la barra de pestañas. Con una hoja abierta se sube todo el contenido por encima de la barra. */
.cs-contenido:has(.cs-hoja) { position: relative; z-index: 70; animation: none; }
.cs-reservas-pista { text-align: center; padding: 0 .5rem; }