/* =============================
   RESET + VARIABLES
   ============================= */
:root{
  --bg:#ffffff;
  --text:#222;
  --border:#e2e8f0;
  --primary:#007bff;
  --primary-contrast:#fff;
  --radius:14px;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
*{ margin:0; padding:0; font-family:'Montserrat', system-ui, sans-serif }
body{
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
a:focus-visible,button:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }

/* =============================
   HEADER + NAV
   ============================= */
header{
  background:#f8f8f8; color:#222;
  padding:0.3rem 2rem;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid #ddd; box-shadow:0 2px 5px rgba(0,0,0,.05);
  position:sticky; top:0; z-index:1000; margin-bottom:0;
}

.logo-container{ display:flex; align-items:center }
.logo-container img{
  width:120px;
  height:auto;
  margin-right:1rem;
}

/* Nav escritorio */
nav.nav-desktop{
  display:flex; align-items:center;
  gap:0;
}
nav.nav-desktop a{
  color:#222;
  margin-left:3rem;
  text-decoration:none;
  font-weight:500;
  font-size:0.85rem;
  transition:color .3s;
}
nav.nav-desktop a:hover,
nav.nav-desktop a.active{ color:var(--primary) }

/* Botón hamburguesa */
.menu-toggle{
  display:none;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  border:0;
  background:transparent;
  padding:8px;
  border-radius:10px;
  color:var(--text);
}

/* Panel móvil */
.nav-mobile{
  position:absolute;
  top:60px; right:20px;
  z-index:9999;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:15px 20px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  min-width:220px;
}

/* Ocultar cuando tenga el atributo hidden */
.nav-mobile[hidden]{ display:none !important; }

.nav-mobile ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
  align-items:center;
  text-align:center;
}
.nav-mobile a{
  font-weight:700; color:var(--text); text-decoration:none;
}
.nav-mobile.show{ display:block }

/* =============================
   CONTENEDOR / MAIN
   ============================= */
main{ width:min(92vw, 900px); margin:3rem auto 5rem; padding:0 2rem }
@media (min-width:1024px){ main{ width:min(92vw, 960px) } }
@media (min-width:1300px){ main{ width:min(92vw, 1120px) } }
@media (min-width:1440px){ main{ width:min(92vw, 1240px) } }
@media (min-width:1600px){ main{ width:min(92vw, 1360px) } }

/* =============================
   TITULOS Y SECCIONES
   ============================= */
h2{
  font-size: clamp(28px, 4.2vw, 2.8rem);
  font-weight:700; margin-bottom:2rem; color:#222; text-align:center;
}
.category{
  margin-bottom:3rem; border-bottom:2px solid #222; padding-bottom:.5rem;
}
.category h3{
  font-size: clamp(20px, 3.4vw, 2rem);
  color:#222; margin-bottom:1rem;
}

/* =============================
   VIDEO RESPONSIVE (16:9)
   ============================= */
.video-container{
  position:relative; padding-bottom:56.25%; padding-top:25px;
  height:0; overflow:hidden; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1); margin-bottom:1.5rem;
}
.video-container iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:none; border-radius:12px;
}

/* =============================
   FOOTER
   ============================= */
footer{
  background:#f8f8f8; color:#222; text-align:center;
  padding:2rem 1rem; margin-top:4rem; border-top:1px solid #ddd;
}

/* =============================
   MEDIA QUERIES
   ============================= */
@media (max-width:768px){
  .menu-toggle{ display:inline-flex }
  nav.nav-desktop{ display:none }
  header{ padding:1rem 1.25rem }
  main{ margin:2rem auto 4rem; padding:0 1.25rem }
  .logo-container img{ width:100px }
}

@media (min-width:769px) and (max-width:1024px){
  nav.nav-desktop a{ font-size:1rem }
}

@media (min-width:1025px) and (max-width:1299px){
  nav.nav-desktop a{ font-size:1rem }
}

@media (min-width:1300px){
  nav.nav-desktop{ gap: clamp(18px, 3vw, 40px) }
}

@media (max-width:768px) and (orientation:landscape){
  h2{ font-size: clamp(22px, 3.6vw, 34px) }
  main{ margin:2rem auto 3rem }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important }
}

@media (min-width:1440px){
  .section{ max-width:1240px }
}

@media (min-width:1600px){
  .section{ max-width:1360px }
}

/* Redes sociales */
.redes-sociales{ text-align:center; margin-top:3rem; }
.iconos-redes{ display:flex; justify-content:center; gap:1.5rem; font-size:2rem; }
.iconos-redes a{ color:#3916e6; transition:color .3s; }
.iconos-redes a:hover{ color:var(--primary); }

/* Inputs login */
#loginUser, 
#loginPass {
  font-size: 16px;
}

/* Evitar zoom en móviles */
input, button, select, textarea {
  font-size: 16px !important;
}

/* Accesibilidad */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Filtros */
.filters {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
  margin: 1rem 0 1.5rem;
}

.filters .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filters button {
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.filters button[aria-pressed="true"] {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Select móvil */
.filters .select { display: none; }

@media (max-width: 600px) {
  .filters .buttons { display: none; }
  .filters .select { display: block; }
  .filters select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
  }
}

/* Animación categorías */
.category[hidden] { display: none !important; }
.category { transition: opacity 0.2s ease; }

/* ====== Estilos mínimos para comentarios (mover a entrenamineto.css) ====== */
.comments-wrap{margin-top:16px; border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05)}
.comments-title{margin:0 0 10px; font-size:1.05rem}
.comment-form{display:none; gap:8px; margin-bottom:12px} /* oculta si no logueado */
.logged-in .comment-form{display:grid}                  /* muestra si logueado */
.cf-text{width:100%; border:1px solid #d1d5db; border-radius:8px; padding:10px; font:inherit; resize:vertical; min-height:70px}
.cf-send{justify-self:end; border:0; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600}
.comments-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.comment-item{border-top:1px solid #eee; padding-top:10px}
.comment-item:first-child{border-top:0; padding-top:0}
.c-head{display:flex; gap:8px; align-items:baseline}
.c-time{font-size:.85rem; color:#6b7280}
.c-text{margin:.25rem 0 0; white-space:pre-wrap; word-wrap:break-word}

/* ====== Recuadro Clases en Vivo ====== */
.live-box{
  max-width: 880px;
  margin: 32px auto;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.live-box h2{
  font-family: 'Montserrat', system-ui, sans-serif;
  margin: 0 0 6px;
  letter-spacing: .2px;
}

.live-sub{
  margin: 0 0 16px;
  color: #6b7280;
}

/* Chips de días */
.day-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.day-chip{
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #1f2937;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.day-chip:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.06); }
.day-chip[aria-selected="true"]{
  background: #1e98d7;  /* azul marca */
  color: #ffffff;
  border-color: #1e98d7;
}

/* Lista de horarios */
.slots-list{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.slot-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #eef2f7;
  background: #fbfdff;
  border-radius: 12px;
}
.slot-time{
  font-weight: 700;
  letter-spacing: .2px;
}
.slot-btn{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1e98d7;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
}
.slot-btn:hover{ filter: brightness(1.06); }
.slot-btn[aria-disabled="true"]{
  pointer-events: none;
  background: #9ca3af;
  color: #fff;
}

.live-note{
  color: #6b7280;
  font-size: .92rem;
  margin-top: 12px;
}

/* Pequeños ajustes responsive */
@media (min-width: 640px){
  .slots-list{ grid-template-columns: 1fr; }
}