/* ==========================================================================
   AREA UNITED · Página «Horarios» (horarios.html)
   Rejilla semanal de la Sala 1 (escritorio), vista por día (móvil), filtro
   por clase, Sala 2 y horario de Fight Club por columnas.
   Reutiliza p2-schedule.css (días, filas, Open Box), p2-fightclub.css
   (leyenda, franjas) y p2-class-detail.css (hero corto). Prefijo p2-hp-.
   ========================================================================== */

:root {
  --p2-hp-dim: .22;                 /* opacidad de lo que no pasa el filtro */
  --p2-hp-today-bg: rgba(255, 203, 0, .12);
  --p2-hp-free-bg: rgba(0, 0, 0, .025);
}

/* --- Enlace activo en cabecera y menú --- */
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.mm-link[aria-current="page"] { color: var(--yellow); }

/* --- Titulares de sección fuera de #part2: escala de la parte 2 --- */
.p2-hp .section-head h2 { font-size: var(--p2-fs-h2); max-width: 16ch; }
.p2-hp .section-head { margin-bottom: clamp(32px, 4.5vw, 56px); }
.p2-hp { scroll-margin-top: var(--header-h); }
@media (min-width: 1024px) {
  /* Con dato a la derecha, el margen lo pone .p2-head-row (p2-base.css) */
  .p2-hp .p2-head-row .section-head { margin-bottom: 0; }
}

/* Estado del filtro («WOD: 38 sesiones a la semana») a la derecha del titular */
.p2-hp-status { margin: 0; min-height: 1.4em; }
.p2-hp-status:empty { display: none; }

/* ==========================================================================
   SALA 1 · filtro
   ========================================================================== */
.p2-hp-filter { margin-bottom: clamp(24px, 3vw, 40px); }
.p2-light .p2-hp-filter .p2-chip .dot { box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* Atenuado por filtro: opciones, celdas y filas que no coinciden */
.p2-hp [data-key], .p2-hp [data-cell] { transition: opacity var(--t-base) var(--ease-out); }
.p2-hp[data-filtering] .is-dim { opacity: var(--p2-hp-dim); }
.p2-hp[data-filtering] [data-cell].is-dim [data-key] { opacity: 1; }   /* no se acumula */

/* ==========================================================================
   SALA 1 · rejilla semanal (solo escritorio)
   ========================================================================== */
.p2-hp-grid-wrap { display: none; }
.p2-hp-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--black-pure);
}
.p2-hp-grid th, .p2-hp-grid td {
  border: 1px solid var(--gray-line-light);
  text-align: left;
  vertical-align: middle;
}
.p2-hp-grid thead th {
  padding: 14px 12px;
  border-bottom: 1px solid var(--black-pure);
  background: var(--white);
}
.p2-hp-th { position: relative; }
.p2-hp-th .display { font-size: 24px; line-height: 1; }
.p2-hp-th .p2-day-today { position: absolute; top: 8px; right: 8px; }
.p2-hp-th.is-today { background: var(--black-pure); color: var(--white); }
.p2-hp-th-time { width: 104px; color: var(--gray-text-light); }

/* Columna de horas: hora de inicio grande, la de fin debajo */
.p2-hp-grid tbody th {
  padding: 12px;
  font-weight: 400;
  background: var(--white);
}
.p2-hp-grid tbody th.p2-row-time { display: table-cell; font-size: 26px; }
.p2-hp-grid tbody th.p2-row-time small { display: block; margin-top: 4px; font-size: 12px; }

/* Celdas: una o dos opciones apiladas con «o» entre ellas */
.p2-hp-cell { position: relative; padding: 10px 12px; height: 64px; }
.p2-hp-cell-in { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.p2-hp-grid .p2-cname { font-size: 19px; gap: 8px; }
.p2-hp-grid .p2-cname .dot { width: 8px; height: 8px; }
.p2-hp-grid .p2-or { font-size: 11px; line-height: 1; padding-left: 16px; }
.p2-hp-cell.is-free { background: var(--p2-hp-free-bg); }
.p2-hp-cell.is-free .p2-cname { color: var(--gray-text-light); font-size: 15px; }
.p2-hp-cell.is-empty { color: var(--gray-line-light); text-align: center; }
.p2-hp-cell.is-today { background: var(--p2-hp-today-bg); }
.p2-hp-cell.is-free.is-today { background: var(--p2-hp-today-bg); }
.p2-hp-cell.is-now { box-shadow: inset 0 0 0 2px var(--black-pure); }
.p2-hp-cell .p2-row-now { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 3px 6px; }

/* ==========================================================================
   SALA 1 · vista por día (móvil y tablet)
   ========================================================================== */
.p2-hp-dayview { display: block; }

@media (min-width: 1024px) {
  .p2-hp-grid-wrap { display: block; }
  .p2-hp-dayview { display: none; }
}

/* ==========================================================================
   SALA 2 · Open Box (lista reutilizada de p2-schedule.css)
   ========================================================================== */
.p2-hp-room2-box { max-width: 720px; }
.p2-hp-room2 .p2-sched-foot { margin-top: clamp(40px, 5vw, 64px); }

/* ==========================================================================
   FIGHT CLUB · un bloque por día; en escritorio, columnas como en el cartel
   ========================================================================== */
.p2-hp-fc .section-head .label { color: var(--yellow); }
.p2-hp-fc .p2-fc-legend { align-self: end; flex-wrap: wrap; gap: 16px 24px; }
.p2-hp-fc-days { gap: 12px; }
.p2-hp-fc-days .p2-fc-day {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--surface-2);
  align-content: start;
}
.p2-hp-fc-days .p2-fc-day:last-child { border-bottom: 1px solid var(--surface-2); }
.p2-hp-fc-days .p2-fc-day.is-today { border-color: var(--yellow); }
.p2-hp-fc-days dt { display: flex; align-items: center; gap: 10px; font-size: 26px; }
.p2-hp-fc-days dd { flex-direction: column; align-items: stretch; gap: 6px; }
.p2-hp-fc-days .p2-fc-slot { height: 44px; padding-inline: 12px; gap: 10px; }
.p2-hp-fc-days .p2-fc-slot b { min-width: 5.2ch; font-size: 20px; }
.p2-hp-fc-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gray-text);
}
.p2-hp-fc .p2-fc-actions { margin-top: clamp(32px, 4vw, 48px); }

@media (min-width: 768px) {
  .p2-hp-fc-days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .p2-hp-fc-days .p2-fc-day { grid-template-columns: 1fr; align-items: start; }
}
@media (min-width: 1024px) {
  .p2-hp-fc-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Reduced motion: sin transiciones de atenuado --- */
@media (prefers-reduced-motion: reduce) {
  .p2-hp [data-key], .p2-hp [data-cell] { transition: none; }
}