/* Estilos compartidos por todas las páginas del frontend. Mobile-first:
   las reglas base son para pantallas angostas; @media (min-width) amplía
   el layout en pantallas más grandes.

   Tema: fondo negro con rojo de marca (Badbox Gym), igual que el logo. */

:root {
  --rojo: #E31E2D;
  --rojo-oscuro: #8C0F1F;
  --rojo-tenue: rgba(227, 30, 45, 0.16);
  --verde: #33B26B;
  --verde-tenue: rgba(51, 178, 113, 0.16);
  --admin: #E31E2D;
  --dark: #000000;
  --bg: #0B0B0C;
  --card: #17171A;
  --card-alt: #202023;
  --muted: #9C9C9F;
  --border: #2B2B2E;
  --texto: #F2F2F2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
}

header.topbar {
  background: var(--dark);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid var(--rojo);
}

header.topbar .marca {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
}
header.topbar .marca img { height: 48px; width: auto; display: block; }

header.topbar nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
}

header.topbar nav a, header.topbar nav button {
  color: #fff;
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  padding: 2px 0;
  white-space: nowrap;
}
header.topbar nav a:hover, header.topbar nav button:hover { color: var(--rojo); }

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 48px;
}

@media (min-width: 900px) {
  main.ancho { max-width: 1100px; }
}

/* El panel admin (admin.html) SIEMPRE es main.ancho, a cualquier ancho de
   pantalla — a diferencia del calendario de reservar.html, que solo se
   ensancha en pantallas grandes y vuelve a angosto (tipo app) en celular a
   propósito. Sin esta regla, entre 480px y 899px de ancho (una ventana de
   escritorio reducida, no un celular) el panel admin se apretaba al mismo
   ancho de 480px que un formulario móvil, con tablas y calendario
   ilegibles. max-width no obliga a ese ancho, solo pone un tope: en
   pantallas angostas de verdad, se sigue encogiendo con normalidad. */
main.panel-admin { max-width: 1100px; }

h1 { font-size: 20px; margin: 4px 0 16px; color: #fff; }
h2 { font-size: 16px; margin: 0 0 10px; color: #fff; }
p.subt { color: var(--muted); font-size: 13px; margin-top: -8px; margin-bottom: 16px; }

.oculto { display: none !important; }

.tarjeta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.tarjeta.destacada { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }

/* Contenedor de cada sección del panel admin: separa visualmente el
   calendario, las sesiones, los paquetes, las cuentas, etc. — antes todo
   fluía junto y no se distinguía a qué parte pertenecía cada campo. */
.panel-seccion {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.panel-seccion h2, .panel-seccion h3 { margin-top: 0; }
.panel-seccion h3 {
  font-size: 14px;
  padding-top: 18px;
  margin-bottom: 10px;
  border-top: 1px solid var(--border);
}

.fila-dia {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fila-asistente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.fila-asistente:last-child { border-bottom: none; }
.fila-asistente input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.fila-asistente span:first-of-type { flex: 1; }

.sesion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
}
.sesion:active { border-color: var(--rojo); }
.sesion .info b { display: block; font-size: 14px; color: #fff; }
.sesion .info span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.sesion .punto { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-left: 10px; }
.punto.disp { background: var(--verde); }
.punto.llena { background: var(--rojo); }

.selector-semana {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--rojo);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.selector-semana button {
  background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0 8px;
}
.selector-semana .rango { font-weight: 600; font-size: 14px; }

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  background: var(--card);
  color: var(--texto);
}
input::placeholder { color: #6E6E71; }
input:focus, select:focus { outline: none; border-color: var(--rojo); }
label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }

.btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: var(--rojo);
}
.btn:hover { background: #c81926; }
.btn.secundario { background: transparent; color: var(--texto); border: 1.5px solid var(--border); }
.btn.secundario:hover { border-color: var(--rojo); color: #fff; }
.btn.admin { background: var(--admin); }
.btn.peligro { background: var(--rojo-oscuro); }
.btn.chico { width: auto; padding: 8px 14px; font-size: 13px; }

.chips { display: flex; gap: 10px; margin-bottom: 14px; }
.chip {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 999px;
  background: var(--card-alt);
  color: var(--texto);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
}
.chip.activo { background: var(--rojo); color: #fff; border-color: var(--rojo); }

/* Barra de pestañas del panel admin (Sesiones/Paquetes/Socios/Reportes/
   Cuentas/Config): son 6 chips con texto que no se puede encoger más que
   su propia palabra, así que en pantallas angostas de escritorio (no solo
   celular) empujaban TODA la página a un ancho mayor al de la ventana,
   con scroll horizontal general — no solo el del calendario, que ese sí es
   intencional. flex-wrap deja que pasen a una segunda fila en vez de
   forzar el ancho de la página. */
#tabs-admin { flex-wrap: wrap; }
#tabs-admin .chip { flex: 1 1 auto; }

.aviso {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.aviso.ok { background: var(--verde-tenue); color: #6BE0A0; border-color: transparent; }
.aviso.error { background: var(--rojo-tenue); color: #FF8B93; border-color: transparent; }
.aviso.info { background: var(--card-alt); color: var(--texto); }

.enlace-simple {
  background: none;
  border: none;
  color: var(--rojo);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
table th, table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); color: var(--texto); }
table th { color: var(--muted); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge.activa { background: var(--verde-tenue); color: #6BE0A0; }
.badge.llena { background: var(--rojo-tenue); color: #FF8B93; }
.badge.cancelada { background: var(--card-alt); color: var(--muted); }

/* Calendario semanal del panel admin: estilo agenda/hoja de cálculo. */
table.calendario-grid { table-layout: fixed; border-collapse: separate; border-spacing: 3px; min-width: 780px; }
table.calendario-grid th { font-size: 11px; color: var(--muted); font-weight: 600; text-align: center; padding: 4px; }
table.calendario-grid th.hora-col, table.calendario-grid td.hora-col { width: 54px; }
td.hora-col { font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; vertical-align: middle; }
table.calendario-grid td { padding: 0; vertical-align: top; }

/* Aviso grande de Open/Pro sobre las columnas de Sábado y Domingo (ver
   HYROX_LOGICA_SIMULACIONES.md, sección 7 — todo el fin de semana usa el
   mismo nivel). Se ve como una insignia dentro del encabezado del día para
   destacar sobre el resto de la fila, que es texto pequeño. */
.banner-nivel {
  display: block;
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: normal;
}
.banner-nivel.open { background: var(--verde-tenue); color: #6BE0A0; }
.banner-nivel.pro { background: var(--rojo-tenue); color: #FF8B93; }

.cal-celda {
  min-height: 44px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px dashed var(--border);
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
}
.cal-celda:hover { border-color: var(--rojo); color: #fff; }
.cal-celda.seleccionada { background: var(--rojo-tenue); border: 2px solid var(--rojo); color: #fff; font-weight: 700; }
.cal-celda.ocupada {
  background: var(--card-alt);
  border: 1px solid var(--border);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.cal-celda.ocupada:hover { border-color: var(--rojo); }
.cal-celda .cal-nombre { font-weight: 700; color: #fff; display: block; line-height: 1.25; }
.cal-celda .cal-cupo { color: var(--muted); font-size: 10px; display: block; margin-top: 1px; }
.cal-acciones { display: flex; gap: 4px; margin-top: 5px; }
.cal-acciones button {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background: #2E2E31;
  color: #fff;
}
.cal-acciones button:hover { background: var(--rojo); }

/* Celda llena en el calendario de la app de reservas: se ve, pero se
   distingue de un vistazo que ya no tiene lugar. */
.cal-celda.ocupada.llena { opacity: 0.55; }
.cal-celda.ocupada.llena .cal-cupo { color: #FF8B93; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(4, 1fr); }
}

/* Lista de asistencia: pensada para tomarse como captura de pantalla,
   por eso usa letra un poco más grande de lo normal y fondo claro para
   que se lea bien impresa/enviada por WhatsApp. */
.asistencia-header {
  background: var(--dark);
  color: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--rojo);
}
.asistencia-header .titulo { font-size: 17px; font-weight: 700; }
.asistencia-header .sub { font-size: 13px; color: #cfcfcf; margin-top: 4px; }
.asistencia-tabla th, .asistencia-tabla td { font-size: 14px; padding: 10px 8px; }
.asistencia-vacio { color: var(--muted); font-size: 13px; padding: 10px 0; }

footer.pie {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 20px;
}

/* ======================================================================
   Landing page (index.html)
   ====================================================================== */

.landing-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero {
  background: radial-gradient(ellipse at top, #1a0508 0%, #000000 65%);
  padding: 56px 20px 64px;
  text-align: center;
  border-bottom: 3px solid var(--rojo);
}
.hero img.hero-logo { width: 100%; max-width: 360px; height: auto; margin-bottom: 18px; }
.hero h1 {
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  line-height: 1.25;
}
.hero h1 span { color: var(--rojo); }
.hero p {
  color: #C9C9C9;
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto 26px;
  line-height: 1.5;
}
.hero .btn { display: inline-block; width: auto; padding: 15px 34px; font-size: 15px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.4px; }

.landing-section { padding: 48px 0; }
.landing-section.alt { background: #0000; }
.landing-section h2 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  margin: 0 0 6px;
}
.landing-section p.intro {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  max-width: 560px;
  margin: 0 auto 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
.gallery-grid figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
}
.gallery-grid img { display: block; width: 100%; height: 220px; object-fit: cover; }
.gallery-grid figcaption { padding: 10px 12px; font-size: 12px; color: var(--muted); }

.hyrox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 700px) {
  .hyrox-grid { grid-template-columns: repeat(4, 1fr); }
}
.hyrox-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
}
.hyrox-card .icono {
  width: 54px; height: 54px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--rojo-tenue);
  display: flex; align-items: center; justify-content: center;
}
.hyrox-card .icono svg { width: 28px; height: 28px; }
.hyrox-card b { display: block; font-size: 13px; color: #fff; margin-bottom: 4px; }
.hyrox-card span { font-size: 12px; color: var(--muted); }

.paquetes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .paquetes-grid { grid-template-columns: repeat(3, 1fr); }
}
.paquete-card b { font-size: 17px; margin-bottom: 8px; }
.paquete-card span { display: block; margin-bottom: 10px; }
.paquete-card .paquete-precio { font-size: 24px; font-weight: 700; color: var(--rojo); margin-bottom: 14px; }
.paquete-card .btn { text-decoration: none; }

.cta-banda {
  background: linear-gradient(135deg, var(--rojo-oscuro), var(--rojo));
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  margin: 0 20px;
}
.cta-banda h2 { color: #fff; margin-bottom: 8px; }
.cta-banda p { color: #FFD9DC; font-size: 14px; margin: 0 0 22px; }
.cta-banda .btn { width: auto; display: inline-block; padding: 15px 34px; background: #fff; color: var(--rojo); font-size: 15px; text-transform: uppercase; text-decoration: none; letter-spacing: 0.4px; }
.cta-banda .btn:hover { background: #f0f0f0; }

.info-franja {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding: 26px 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.info-franja b { color: #fff; display: block; font-size: 13px; }