/*
 * GymPlug Design System — Componentes CSS
 * Versión: 2.0.0
 * Inspiración: Enterprise SaaS / Luxury Fintech (Linear, Stripe, Mercury, Notion)
 * ─────────────────────────────────────────────────────────────────────────────
 * IMPORTANTE: No se usan colores ni tamaños hardcodeados.
 * Todos los valores son variables CSS definidas por class-design-renderer.php
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ════════════════════════════════════════════════════════════════════════════
   1. RESET Y BASE
   ════════════════════════════════════════════════════════════════════════════ */

/* NOTA: ya no se necesitan hacks para ocultar .site-header/.site-footer/
   Elementor ni forzar min-width en sus contenedores. Desde que GymPlug Core
   controla el HTML completo vía GymPlug_Blank_Canvas (template_include +
   templates/shell.php), esas páginas nunca cargan header.php/footer.php de
   ningún tema ni markup de Elementor — el problema que estos selectores
   resolvían dejó de poder ocurrir. Tema activo: Blankslate (placeholder
   inerte, WordPress exige tener alguno instalado, pero sus archivos jamás
   se usan para renderizar páginas GymPlug). */

/* Reset base para el ecosistema */
.gp-portal *,
.gp-portal *::before,
.gp-portal *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gp-portal {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-base);
  color: var(--gp-text-primary);
  background-color: var(--gp-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gp-portal a {
  color: var(--gp-color-accent);
  text-decoration: none;
}

.gp-portal a:hover {
  text-decoration: underline;
}

.gp-portal img {
  max-width: 100%;
  display: block;
}

.gp-portal ul,
.gp-portal ol {
  list-style: none;
}

.gp-portal button {
  font-family: var(--gp-font-body);
}

/* Body en páginas fullscreen */
body.gymplug-fullscreen {
  background-color: var(--gp-bg-primary);
  color: var(--gp-text-primary);
  font-family: var(--gp-font-body);
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. LAYOUT DEL DASHBOARD
   ════════════════════════════════════════════════════════════════════════════ */

/* Alto total del header y la tabbar, usados para que el resto del layout
   nunca quede tapado por estos elementos fijos (incluyendo los "safe areas"
   de iOS Safari para notch / home indicator). */
:root {
  --gp-header-h: 64px;
  --gp-tabbar-h: 72px;
}

.gp-portal {
  height: 100vh;   /* fallback para navegadores sin soporte de dvh */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
}

/* Header fijo (con soporte de safe-area para notch de iOS) */
.gp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--gp-header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--gp-bg-card);
  border-bottom: 1px solid var(--gp-border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--gp-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--gp-space-4);
  padding-right: var(--gp-space-4);
}

.gp-header__left {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.gp-header__logo {
  height: 32px;
  width: auto;
}

.gp-header__logo-text {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-xl);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--gp-text-primary);
}

.gp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  flex-shrink: 0;
}

.gp-eyebrow {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-xl);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--gp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-header__user {
  font-size: var(--gp-text-sm);
  color: var(--gp-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

@media (max-width: 374px) {
  .gp-header__user {
    display: none;
  }
}

/* Botón hamburguesa — solo visible en mobile, ver sección de SIDEBAR */
.gp-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--gp-radius-md);
  color: var(--gp-text-primary);
  cursor: pointer;
}

.gp-header__menu-btn:hover {
  background: var(--gp-bg-secondary);
}

.gp-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
}

.gp-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 1px;
}

/* Contenedor de sidebar + contenido, debajo del header fijo */
.gp-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--gp-header-h) + env(safe-area-inset-top));
}

/* Contenido principal (scrollea internamente) */
.gp-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--gp-tabbar-h) + var(--gp-space-4) + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Paneles sin tab bar inferior (navegación 100% por sidebar/off-canvas,
   ej. Portal del Cliente): no reservar el espacio de abajo que
   .gp-main deja por defecto para la tabbar, ya que no existe aquí. */
.gp-portal--no-tabbar .gp-main {
  padding-bottom: var(--gp-space-6);
}

/* Tab bar fija inferior (con soporte de safe-area para el home indicator de iOS) */
.gp-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(var(--gp-tabbar-h) + env(safe-area-inset-bottom));
  background: var(--gp-bg-card);
  border-top: 1px solid var(--gp-border-color);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  z-index: var(--gp-z-tabbar);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Sección genérica */
.gp-section {
  padding: var(--gp-space-6) var(--gp-space-4);
}

/* Paneles de tabs: ocultos salvo el activo (usado por el helper initTabs de
   gymplug-core.js y por el panel "Apariencia" inyectado por este addon) */
.gp-tab-panel {
  display: none;
}

.gp-tab-panel.is-active {
  display: block;
}

/* Wrap del Dueño: una vez seleccionada la sede, ocupa el alto restante del
   portal para que el sidebar y el contenido puedan distribuirse igual que
   en el Webmaster (mismo patrón .gp-body / .gp-sidebar / .gp-main). */
.gp-owner-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. TIPOGRAFÍA
   ════════════════════════════════════════════════════════════════════════════ */

.gp-portal h1,
.gp-portal h2,
.gp-portal h3,
.gp-portal h4,
.gp-portal h5,
.gp-portal h6 {
  font-family: var(--gp-font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--gp-text-primary);
  margin-bottom: var(--gp-space-2);
}

.gp-portal p,
.gp-portal span,
.gp-portal input,
.gp-portal select,
.gp-portal textarea {
  font-family: var(--gp-font-body);
}

/* Ritmo vertical del patrón "título + descripción + acción" (encabezados
   de sección/página en todo el ecosistema). Selectores de hermano-adyacente
   a propósito: solo actúan cuando el patrón real ocurre, así no se agrega
   margin a párrafos o botones usados en otros contextos (dentro de cards,
   tablas, toolbars, etc.) donde ya tienen su propio espaciado. */
.gp-portal :is(h1, h2, h3, h4, h5, h6) + p {
  margin-top: calc(var(--gp-space-2) * -1);
  margin-bottom: var(--gp-space-5);
  color: var(--gp-text-secondary);
}

.gp-portal :is(h1, h2, h3, h4, h5, h6, p) + .gp-btn,
.gp-portal :is(h1, h2, h3, h4, h5, h6, p) + .gp-btn-group {
  margin-top: var(--gp-space-2);
}

.gp-kpi-number {
  /* Tamaño de fuente fluido en vez de fijo: un monto largo (ej.
     "$45,890.00") se desbordaba de la tarjeta en vez de adaptarse.
     overflow-wrap + word-break quedan como red de seguridad final. */
  font-size: clamp(1.5rem, 6vw, var(--gp-text-5xl));
  font-family: var(--gp-font-display);
  font-weight: 800;
  color: var(--gp-color-accent);
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.gp-kpi-label {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-family: var(--gp-font-body);
}

.gp-title-xl {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-4xl);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
}

.gp-title-lg {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-3xl);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
}

.gp-title-md {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-2xl);
  font-weight: 700;
  text-transform: none;
}

/* Subtítulo: para encabezar bloques secundarios dentro de una sección o
   card (ej. el título de una gráfica), un escalón por debajo de
   .gp-title-md pero seguimos en la familia display para mantener
   coherencia con el resto de la jerarquía de títulos. No lleva
   text-transform uppercase para que se lea más como un rótulo de
   contenido que como un encabezado de sección. */
.gp-subtitle {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gp-text-primary);
  margin-bottom: var(--gp-space-3);
}

.gp-text-muted {
  color: var(--gp-text-secondary);
  font-size: var(--gp-text-sm);
}

.gp-label-uppercase {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. BOTONES
   ════════════════════════════════════════════════════════════════════════════ */

.gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-2);
  padding: var(--gp-space-3) var(--gp-space-6);
  border-radius: var(--gp-radius-md);
  font-family: var(--gp-font-display);
  font-weight: 600;
  font-size: var(--gp-text-sm);
  text-transform: none;
  letter-spacing: -0.005em;
  transition: transform var(--gp-transition-fast), box-shadow var(--gp-transition-fast), filter var(--gp-transition-fast), background var(--gp-transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  backdrop-filter: blur(var(--gp-glass-blur));
  -webkit-backdrop-filter: blur(var(--gp-glass-blur));
}

.gp-btn:focus-visible {
  outline: 2px solid var(--gp-color-accent);
  outline-offset: 2px;
}

.gp-btn--primary {
  background: color-mix(in srgb, var(--gp-color-accent) 82%, transparent);
  border-color: color-mix(in srgb, var(--gp-color-accent) 90%, white 10%);
  color: var(--gp-bg-primary);
  box-shadow: var(--gp-btn-shadow);
}

.gp-btn--primary:hover {
  background: color-mix(in srgb, var(--gp-color-accent) 92%, transparent);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--gp-bg-primary);
  box-shadow: var(--gp-btn-shadow-hover);
}

.gp-btn--primary:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--gp-color-accent) 92%, black 10%);
  box-shadow: var(--gp-btn-shadow-active);
}

.gp-btn--secondary {
  background: var(--gp-glass-bg);
  border: 2px solid var(--gp-color-accent);
  color: var(--gp-color-accent);
  box-shadow: var(--gp-btn-shadow);
}

.gp-btn--secondary:hover {
  background: color-mix(in srgb, var(--gp-color-accent) 10%, var(--gp-glass-bg));
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: var(--gp-btn-shadow-hover);
}

.gp-btn--secondary:active {
  transform: translateY(1px);
  box-shadow: var(--gp-btn-shadow-active);
}

.gp-btn--ghost {
  background: transparent;
  color: var(--gp-text-secondary);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.gp-btn--ghost:hover {
  color: var(--gp-text-primary);
  background: var(--gp-bg-secondary);
  text-decoration: none;
}

.gp-btn--danger {
  background: color-mix(in srgb, var(--gp-color-error) 82%, transparent);
  border-color: color-mix(in srgb, var(--gp-color-error) 90%, white 10%);
  color: var(--gp-color-white);
  box-shadow: var(--gp-btn-shadow);
}

.gp-btn--danger:hover {
  background: color-mix(in srgb, var(--gp-color-error) 92%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--gp-btn-shadow-hover);
}

.gp-btn--danger:active {
  transform: translateY(1px);
  box-shadow: var(--gp-btn-shadow-active);
}

.gp-btn--disabled,
.gp-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.gp-btn--full {
  width: 100%;
}

.gp-btn--sm {
  padding: var(--gp-space-2) var(--gp-space-4);
  font-size: var(--gp-text-sm);
}

/* Extra chica: para barras de utilidades densas (muchos botones juntos,
   p.ej. el header del POS) donde --sm sigue siendo demasiado grande. */
.gp-btn--xs {
  padding: var(--gp-space-1) var(--gp-space-3);
  font-size: var(--gp-text-xs);
  letter-spacing: 0.02em;
  gap: var(--gp-space-1);
  border-radius: var(--gp-radius-sm);
}

.gp-btn--lg {
  padding: var(--gp-space-4) var(--gp-space-8);
  font-size: var(--gp-text-lg);
}

.gp-btn--icon {
  padding: var(--gp-space-3);
  width: 44px;
  height: 44px;
  border-radius: var(--gp-radius-full);
}


/* ════════════════════════════════════════════════════════════════════════════
   5. TARJETAS
   ════════════════════════════════════════════════════════════════════════════ */

.gp-card {
  background: var(--gp-glass-bg);
  border-radius: var(--gp-radius-lg);
  padding: var(--gp-space-6);
  border: 1px solid var(--gp-glass-border);
  box-shadow: inset 0 1px 0 var(--gp-glass-highlight), var(--gp-shadow-md);
  backdrop-filter: blur(var(--gp-glass-blur));
  -webkit-backdrop-filter: blur(var(--gp-glass-blur));
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
  height: 100%;
  min-height: 0;
  min-width: 0; /* permite que los hijos con overflow-wrap se achiquen dentro de un grid/flex, en vez de forzar el desborde del padre */
  overflow: hidden; /* red de seguridad: ningún contenido hijo (texto largo, cards internas) debe salirse visualmente del padre */
}

.gp-card--accent {
  border-color: var(--gp-color-accent);
  box-shadow: inset 0 1px 0 var(--gp-glass-highlight), var(--gp-shadow-accent);
}

.gp-card--clickable {
  cursor: pointer;
  transition: transform var(--gp-transition-base), box-shadow var(--gp-transition-base);
}

.gp-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--gp-glass-highlight), var(--gp-shadow-lg);
}

.gp-card--clickable:active {
  transform: translateY(0);
}

.gp-card--flat {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--gp-bg-card);
}

.gp-card--sm {
  padding: var(--gp-space-4);
  border-radius: var(--gp-radius-md);
}

.gp-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gp-space-4);
}

.gp-card__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-lg);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Texto largo dentro de una card: nunca deforma la card, se recorta con
   elipsis (multilínea) en lugar de estirar la altura de la fila. */
.gp-card .gp-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Cualquier grid de cards (KPIs, productos, sedes, etc.): todas las cards
   de una misma fila quedan a la misma altura (CSS Grid ya estira por
   defecto, lo dejamos explícito para que no dependa de overrides externos). */
.gp-products-grid,
.gp-stats-grid {
  align-items: stretch;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. FORMULARIOS
   ════════════════════════════════════════════════════════════════════════════ */

.gp-form {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
}

.gp-field {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.gp-field > span:first-child,
.gp-field > label {
  font-size: var(--gp-text-sm);
  color: var(--gp-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--gp-font-body);
}

.gp-input,
.gp-select,
.gp-textarea {
  background: var(--gp-bg-secondary);
  border: 1px solid var(--gp-border-color);
  border-radius: var(--gp-radius-md);
  padding: var(--gp-space-3) var(--gp-space-4);
  color: var(--gp-text-primary);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-base);
  width: 100%;
  transition: border-color var(--gp-transition-fast), box-shadow var(--gp-transition-fast);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.gp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A8A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gp-space-4) center;
  padding-right: calc(var(--gp-space-4) * 2.5);
  cursor: pointer;
}

.gp-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.gp-input:focus,
.gp-select:focus,
.gp-textarea:focus {
  outline: none;
  border-color: var(--gp-color-accent);
  box-shadow: 0 0 0 3px rgba(var(--gp-accent-rgb), 0.1);
}

.gp-input::placeholder,
.gp-textarea::placeholder {
  color: var(--gp-text-secondary);
  opacity: 0.6;
}

.gp-input--readonly,
.gp-input[readonly] {
  opacity: 0.5;
  cursor: not-allowed;
}

.gp-input--error,
.gp-input.error {
  border-color: var(--gp-color-error);
}

.gp-input--error:focus {
  box-shadow: 0 0 0 3px rgba(var(--gp-error-rgb), 0.15);
}

.gp-error {
  color: var(--gp-color-error);
  font-size: var(--gp-text-sm);
  font-family: var(--gp-font-body);
}

.gp-success {
  color: var(--gp-color-success);
  font-size: var(--gp-text-sm);
  font-family: var(--gp-font-body);
}

.gp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-4);
}

@media (min-width: 560px) {
  .gp-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.gp-search-wrap {
  position: relative;
}

.gp-search-wrap .gp-input {
  padding-left: calc(var(--gp-space-4) * 2.5);
}

.gp-search-icon {
  position: absolute;
  left: var(--gp-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gp-text-secondary);
  pointer-events: none;
}

/* Variante de una sola clase para campos de búsqueda en vivo (modales,
   listas filtrables) cuando no se quiere envolver el input en
   .gp-search-wrap + .gp-search-icon por separado: el ícono de lupa va
   inline como background-image sobre el propio .gp-input, reutilizando
   los mismos tokens de espaciado y color que el resto de inputs. */
.gp-search-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--gp-space-4) center;
  padding-left: calc(var(--gp-space-4) * 2.5);
}


/* ════════════════════════════════════════════════════════════════════════════
   7. MODALES
   ════════════════════════════════════════════════════════════════════════════ */

.gp-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--gp-z-modal);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gp-modal__content {
  position: relative;
  z-index: 1;
  background: var(--gp-bg-card);
  border-radius: var(--gp-radius-xl) var(--gp-radius-xl) 0 0;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--gp-space-8) var(--gp-space-6);
  animation: gp-slide-up var(--gp-transition-base) ease;
}

.gp-modal__handle {
  width: 40px;
  height: 4px;
  background: var(--gp-border-color);
  border-radius: 2px;
  margin: 0 auto var(--gp-space-6);
}

.gp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gp-space-6);
}

.gp-modal__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-2xl);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
}

.gp-modal__close {
  background: var(--gp-bg-secondary);
  border: none;
  color: var(--gp-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: var(--gp-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--gp-text-lg);
  transition: color var(--gp-transition-fast), background var(--gp-transition-fast);
}

.gp-modal__close:hover {
  color: var(--gp-text-primary);
  background: var(--gp-border-color);
}

.gp-modal__footer {
  display: flex;
  gap: var(--gp-space-3);
  margin-top: var(--gp-space-8);
  padding-top: var(--gp-space-6);
  border-top: 1px solid var(--gp-border-color);
}

@keyframes gp-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Overlay para cierre */
.gp-modal__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* ─── Modal en desktop ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .gp-modal {
    align-items: center;
  }

  .gp-modal__content {
    border-radius: var(--gp-radius-xl);
    max-width: 560px;
    margin: auto;
    animation: gp-fade-in var(--gp-transition-base) ease;
  }

  /* Ficha tipo producto (perfil de entrenador): un poco más ancha para
     que el slider de galería tenga espacio de sobra, igual que en una
     página de producto de WooCommerce en desktop. */
  .gp-modal__content--product {
    max-width: 640px;
  }

  .gp-modal__handle {
    display: none;
  }

  @keyframes gp-fade-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   7B. SIDEBAR (off-canvas en mobile, fijo/colapsable en desktop)
   ════════════════════════════════════════════════════════════════════════════ */

/* Overlay que cierra el menú al hacer click afuera (solo mobile) */
.gp-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--gp-z-header);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gp-transition-base) ease;
}

.gp-sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile: panel deslizable desde la izquierda, por encima del contenido */
.gp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  background: var(--gp-bg-card);
  border-right: 1px solid var(--gp-border-color);
  z-index: calc(var(--gp-z-header) + 1);
  padding-top: calc(var(--gp-header-h) + env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(-100%);
  transition: transform var(--gp-transition-base) ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gp-sidebar.is-open {
  transform: translateX(0);
}

.gp-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gp-space-4) var(--gp-space-6) var(--gp-space-2);
  border-bottom: 1px solid var(--gp-border-color);
  margin-bottom: var(--gp-space-2);
}

.gp-sidebar__logo-img {
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
}

.gp-sidebar__logo-text {
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: var(--gp-text-lg);
  color: var(--gp-text-primary);
  text-align: center;
}

.gp-sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: var(--gp-space-4) 0;
}

.gp-sidebar__badge {
  margin-left: auto;
  background: var(--gp-color-error);
  color: var(--gp-color-white);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--gp-radius-full);
  padding: 2px 6px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}

.gp-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  width: 100%;
  padding: var(--gp-space-3) var(--gp-space-6);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--gp-text-secondary);
  font-size: var(--gp-text-sm);
  font-weight: 500;
  font-family: var(--gp-font-body);
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
  transition: color var(--gp-transition-fast), background var(--gp-transition-fast);
}

.gp-sidebar__link:hover {
  color: var(--gp-text-primary);
  background: var(--gp-bg-secondary);
}

.gp-sidebar__link.is-active {
  color: var(--gp-color-accent);
  border-left-color: var(--gp-color-accent);
  background: rgba(var(--gp-accent-rgb), 0.05);
}

.gp-sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-sidebar__icon svg {
  width: 100%;
  height: 100%;
}

.gp-sidebar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón de colapso — solo se muestra en desktop */
.gp-sidebar__collapse-btn {
  display: none !important; /* !important necesario: Elementor puede forzar display:flex en contenedores padres */
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-2);
  margin: auto var(--gp-space-4) var(--gp-space-4);
  padding: var(--gp-space-2) var(--gp-space-3);
  background: var(--gp-bg-secondary);
  border: 1px solid var(--gp-border-color);
  border-radius: var(--gp-radius-md);
  color: var(--gp-text-secondary);
  font-size: var(--gp-text-xs);
  cursor: pointer;
  flex-shrink: 0;
}

.gp-sidebar__collapse-btn:hover {
  color: var(--gp-text-primary);
  background: var(--gp-border-color);
}

/* ─── Sidebar en desktop: fija a la izquierda, colapsable a iconos ─────────── */
@media (min-width: 768px) {
  .gp-header__menu-btn {
    display: none;
  }

  .gp-sidebar-overlay {
    display: none !important;
  }

  .gp-sidebar {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 240px;
    min-width: 240px;
    max-width: none;
    height: 100%;
    transform: none;
    padding-top: var(--gp-space-6);
  }

  .gp-sidebar__collapse-btn {
    display: flex;
  }

  /* Colapsada: solo iconos */
  .gp-sidebar.is-collapsed {
    width: 72px;
    min-width: 72px;
  }

  .gp-sidebar.is-collapsed .gp-sidebar__label,
  .gp-sidebar.is-collapsed .gp-sidebar__collapse-label {
    display: none;
  }

  .gp-sidebar.is-collapsed .gp-sidebar__link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gp-sidebar.is-collapsed .gp-sidebar__collapse-btn {
    margin-left: var(--gp-space-2);
    margin-right: var(--gp-space-2);
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   8. TABBAR
   ════════════════════════════════════════════════════════════════════════════ */

.gp-tabbar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--gp-text-secondary);
  font-size: var(--gp-text-xs);
  font-family: var(--gp-font-body);
  cursor: pointer;
  transition: color var(--gp-transition-fast);
  padding: var(--gp-space-2);
  position: relative;
  width: 100%;
  height: 100%;
}

.gp-tabbar__btn--active {
  color: var(--gp-color-accent);
}

.gp-tabbar__btn:hover:not(.gp-tabbar__btn--active) {
  color: var(--gp-text-primary);
}

.gp-tabbar__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.gp-tabbar__label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.gp-tabbar__badge {
  position: absolute;
  top: 4px;
  right: 8px;
  background: var(--gp-color-error);
  color: var(--gp-color-white);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--gp-radius-full);
  padding: 2px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. TABLAS
   ════════════════════════════════════════════════════════════════════════════ */

.gp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* pan-x + pan-y (no solo pan-x): antes esto bloqueaba el scroll
     vertical del modal en cuanto el dedo tocaba la tabla, obligando al
     usuario a deslizar por fuera de ella para poder bajar. Con ambos
     ejes permitidos, el navegador decide según hacia dónde se mueve el
     dedo — sigue habiendo scroll horizontal cuando la tabla es más
     ancha que la pantalla, pero ya no secuestra el gesto vertical. */
  touch-action: pan-x pan-y;
  border-radius: var(--gp-radius-lg);
  border: 1px solid var(--gp-border-color);
}

/* Red de seguridad: si una tabla queda sin envolver en .gp-table-wrap por
   error humano futuro, que haga scroll horizontal en su propio contenedor
   en vez de desbordar y recortarse silenciosamente fuera del viewport. */
.gp-section > .gp-table,
.gp-tab-panel > .gp-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  border-radius: var(--gp-radius-lg);
  border: 1px solid var(--gp-border-color);
}

.gp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gp-text-sm);
  min-width: 480px;
}

.gp-table th {
  text-align: left;
  padding: var(--gp-space-3) var(--gp-space-4);
  color: var(--gp-text-secondary);
  font-family: var(--gp-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--gp-border-color);
  white-space: nowrap;
  background: var(--gp-bg-card);
}

.gp-table td {
  padding: var(--gp-space-3) var(--gp-space-4);
  border-bottom: 1px solid var(--gp-border-color);
  color: var(--gp-text-primary);
  vertical-align: middle;
}

.gp-table tr:last-child td {
  border-bottom: none;
}

.gp-table__row {
  cursor: pointer;
  transition: background var(--gp-transition-fast);
}

.gp-table__row:hover {
  background: var(--gp-bg-secondary);
}

.gp-table__row--selected {
  background: rgba(var(--gp-accent-rgb), 0.06);
}

.gp-table__empty {
  text-align: center;
  color: var(--gp-text-secondary);
  padding: var(--gp-space-12) var(--gp-space-4);
}

.gp-link {
  color: var(--gp-color-accent);
  text-decoration: underline;
  font-size: var(--gp-text-sm);
}

.gp-link:hover {
  opacity: 0.85;
}


/* ════════════════════════════════════════════════════════════════════════════
   10. BARRA DE PROGRESO — MEMBRESÍA
   ════════════════════════════════════════════════════════════════════════════ */

.gp-membership {
  padding: var(--gp-space-4);
  background: var(--gp-bg-secondary);
  border-radius: var(--gp-radius-lg);
}

.gpc-memberships-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-space-4);
}

@media (max-width: 560px) {
  .gpc-memberships-row {
    grid-template-columns: 1fr;
  }
}

.gpc-membership-card--gym,
.gpc-membership-card--trainer {
  position: relative;
  border-left: 3px solid var(--gp-color-accent);
}

.gpc-membership-card--trainer {
  border-left-color: var(--gp-color-success, #2DC653);
}

.gpc-membership-card__tag {
  display: inline-block;
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: var(--gp-space-1);
}

.gpc-summary-card {
  position: relative;
}

.gpc-summary-card--progress {
  border-left: 3px solid var(--gp-color-accent);
}

.gpc-summary-card--routine {
  border-left: 3px solid var(--gp-color-success, #2DC653);
}

.gpc-summary-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--gp-space-2);
}

.gpc-summary-card__icon {
  font-size: var(--gp-text-xl);
  line-height: 1;
}

.gp-membership__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--gp-space-3);
}

.gp-membership__days {
  font-size: var(--gp-text-3xl);
  font-family: var(--gp-font-display);
  font-weight: 800;
  color: var(--gp-color-accent);
  line-height: 1;
}

.gp-membership__label {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.gp-membership__bar-wrap {
  height: 6px;
  background: var(--gp-border-color);
  border-radius: var(--gp-radius-full);
  overflow: hidden;
  margin-bottom: var(--gp-space-3);
}

.gp-membership__bar {
  height: 100%;
  border-radius: var(--gp-radius-full);
  transition: width var(--gp-transition-slow);
}

.gp-membership__bar--green {
  background: var(--gp-color-success);
}

.gp-membership__bar--yellow {
  background: var(--gp-color-warning);
}

.gp-membership__bar--red {
  background: var(--gp-color-error);
}

.gp-membership__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
}


/* ════════════════════════════════════════════════════════════════════════════
   11. BANNERS Y ALERTAS
   ════════════════════════════════════════════════════════════════════════════ */

.gp-banner {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  padding: var(--gp-space-4) var(--gp-space-5);
  border-radius: var(--gp-radius-lg);
  font-size: var(--gp-text-sm);
  font-family: var(--gp-font-body);
  line-height: 1.4;
}

.gp-banner--alert {
  background: rgba(var(--gp-error-rgb), 0.1);
  border: 1px solid var(--gp-color-error);
  color: var(--gp-color-error);
}

.gp-banner--success {
  background: rgba(var(--gp-success-rgb), 0.1);
  border: 1px solid var(--gp-color-success);
  color: var(--gp-color-success);
}

.gp-banner--info {
  background: rgba(var(--gp-accent-rgb), 0.08);
  border: 1px solid var(--gp-color-accent);
  color: var(--gp-color-accent);
}

.gp-banner__icon {
  font-size: var(--gp-text-lg);
  flex-shrink: 0;
}

.gp-banner__text {
  flex: 1;
}


/* ════════════════════════════════════════════════════════════════════════════
   12. GRILLA DE PRODUCTOS
   ════════════════════════════════════════════════════════════════════════════ */

.gp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--gp-space-4);
}

.gp-product-card {
  background: var(--gp-bg-card);
  border-radius: var(--gp-radius-lg);
  overflow: hidden;
  border: 1px solid var(--gp-border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--gp-transition-base), box-shadow var(--gp-transition-base);
}

.gp-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gp-shadow-lg);
}

.gp-product-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--gp-bg-secondary);
  display: block;
}

/* Placeholder cuadrado para cuando no hay foto (ej. entrenador sin foto de
   perfil). Mismo lenguaje visual que .gp-avatar-placeholder pero cuadrado,
   para encajar en el hueco de .gp-product-card__img sin deformar el grid. */
.gp-product-card__img-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--gp-bg-secondary);
  color: var(--gp-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gp-font-display);
  font-weight: 800;
  font-size: var(--gp-text-3xl);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.gp-product-card__body {
  padding: var(--gp-space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--gp-space-2);
}

.gp-product-card h3,
.gp-product-card__name {
  padding: var(--gp-space-3) var(--gp-space-3) 0;
  font-size: var(--gp-text-sm);
  font-family: var(--gp-font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--gp-text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtítulo opcional bajo el nombre (ej. título profesional del entrenador,
   categoría del producto). Una sola línea, se recorta con elipsis. */
.gp-product-card__meta {
  padding: 0 var(--gp-space-3);
  margin-top: var(--gp-space-1);
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fila compacta de chips (especialidades, categorías) bajo el subtítulo. */
.gp-product-card__tags {
  padding: 0 var(--gp-space-3);
  margin-top: var(--gp-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-space-1);
}

.gp-product-card__price {
  padding: var(--gp-space-2) var(--gp-space-3) 0;
  color: var(--gp-color-accent);
  font-weight: 700;
  font-size: var(--gp-text-lg);
  font-family: var(--gp-font-display);
  margin-top: auto;
}

.gp-product-card__price-label {
  color: var(--gp-text-secondary);
  font-weight: 400;
  font-size: var(--gp-text-xs);
  font-family: var(--gp-font-body);
  text-transform: none;
  letter-spacing: normal;
  margin-right: var(--gp-space-1);
}

.gp-product-card__price-old {
  color: var(--gp-text-secondary);
  text-decoration: line-through;
  font-size: var(--gp-text-sm);
  font-weight: 400;
  margin-left: var(--gp-space-2);
}

.gp-product-card .gp-btn {
  margin: var(--gp-space-3);
  margin-top: var(--gp-space-2);
  width: calc(100% - (var(--gp-space-3) * 2));
}


.gp-product-card__badge {
  position: absolute;
  top: var(--gp-space-2);
  right: var(--gp-space-2);
  background: var(--gp-color-accent);
  color: var(--gp-bg-primary);
  font-size: var(--gp-text-xs);
  font-weight: 700;
  font-family: var(--gp-font-display);
  text-transform: uppercase;
  padding: var(--gp-space-1) var(--gp-space-2);
  border-radius: var(--gp-radius-sm);
}

.gp-product-card__wrap {
  position: relative;
}


/* ════════════════════════════════════════════════════════════════════════════
   12.1 CARRITO (Tienda in-app del Portal del Cliente)
   ════════════════════════════════════════════════════════════════════════════ */

.gp-cart {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
}

.gp-cart-item {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  padding: var(--gp-space-3) 0;
  border-bottom: 1px solid var(--gp-border-color);
}

.gp-cart-item:last-child {
  border-bottom: none;
}

.gp-cart-item__info {
  flex: 1;
  min-width: 0;
}

.gp-cart-item__name {
  font-size: var(--gp-text-sm);
  font-weight: 600;
  color: var(--gp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-cart-item__price {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  margin-top: 2px;
}

.gp-cart-item__controls {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  flex-shrink: 0;
}

.gp-qty-stepper {
  display: flex;
  align-items: center;
  gap: var(--gp-space-2);
  background: var(--gp-bg-secondary);
  border-radius: var(--gp-radius-full);
  padding: var(--gp-space-1);
}

.gp-qty-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--gp-radius-full);
  background: var(--gp-bg-card);
  color: var(--gp-text-primary);
  font-size: var(--gp-text-base);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--gp-transition-fast), color var(--gp-transition-fast);
}

.gp-qty-stepper__btn:hover {
  background: var(--gp-color-accent);
  color: var(--gp-bg-primary);
}

.gp-qty-stepper__value {
  min-width: 20px;
  text-align: center;
  font-size: var(--gp-text-sm);
  font-weight: 700;
  color: var(--gp-text-primary);
}

.gp-cart-item__subtotal {
  min-width: 64px;
  text-align: right;
  font-size: var(--gp-text-sm);
  font-weight: 700;
  color: var(--gp-text-primary);
}

.gp-cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--gp-text-secondary);
  font-size: var(--gp-text-lg);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--gp-radius-full);
  transition: background var(--gp-transition-fast), color var(--gp-transition-fast);
}

.gp-cart-item__remove:hover {
  background: rgba(var(--gp-error-rgb), 0.12);
  color: var(--gp-color-error);
}

.gp-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gp-space-4);
  padding-top: var(--gp-space-4);
  border-top: 1px solid var(--gp-border-color);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-lg);
  font-weight: 700;
  color: var(--gp-text-primary);
  text-transform: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   13. ESTADO VACÍO
   ════════════════════════════════════════════════════════════════════════════ */

.gp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gp-space-16) var(--gp-space-8);
  text-align: center;
  gap: var(--gp-space-4);
}

.gp-empty__icon {
  font-size: 3rem;
  opacity: 0.3;
  line-height: 1;
}

.gp-empty__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-2xl);
  font-weight: 700;
  text-transform: none;
  color: var(--gp-text-secondary);
}

.gp-empty__desc {
  color: var(--gp-text-secondary);
  font-size: var(--gp-text-sm);
  max-width: 280px;
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════════
   14. AVATAR Y FOTO DE PERFIL
   ════════════════════════════════════════════════════════════════════════════ */

.gp-header__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gp-color-accent);
  flex-shrink: 0;
}

.gp-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gp-color-accent);
  flex-shrink: 0;
}

.gp-avatar--sm  { width: 32px;  height: 32px; }
.gp-avatar--md  { width: 48px;  height: 48px; }
.gp-avatar--lg  { width: 64px;  height: 64px; }
.gp-avatar--xl  { width: 96px;  height: 96px; }

.gp-profile-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gp-space-4);
  margin-bottom: var(--gp-space-6);
}

.gp-profile-photo__img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gp-color-accent);
}

.gp-profile-photo__name {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-2xl);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
}

.gp-profile-photo__role {
  font-size: var(--gp-text-sm);
  color: var(--gp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gp-avatar-placeholder {
  border-radius: 50%;
  background: var(--gp-bg-secondary);
  border: 2px solid var(--gp-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gp-text-secondary);
  font-family: var(--gp-font-display);
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Galería de fotos de solo lectura (perfiles públicos: entrenadores, etc.).
   Grid responsivo de miniaturas cuadradas, sin controles de edición. */
.gp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--gp-space-3);
  margin-top: var(--gp-space-3);
}

.gp-gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--gp-radius-md);
  overflow: hidden;
  border: 1px solid var(--gp-border-color);
}

.gp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ════════════════════════════════════════════════════════════════════════════
   14b. SLIDER DE FICHA "PRODUCTO" (perfil de entrenador estilo WooCommerce)
   Slide grande con swipe + click-to-zoom, dots, y tira de thumbnails.
   Reutilizable para cualquier entidad con foto + galería de imagen/video.
   ════════════════════════════════════════════════════════════════════════════ */

.gp-modal__content--product {
  padding-top: var(--gp-space-4);
}

/* Modal "checkout": embebe el flujo de pago estándar de WooCommerce
   (dirección + selector de gateway + tarjeta) dentro de un iframe, con la
   estética del ecosistema alrededor. Necesita más alto que un modal de
   formulario normal porque el checkout de WooCommerce suele traer bastante
   contenido vertical (no lo controlamos, es de los plugins de gateway). */
.gp-modal__content--checkout {
  padding: var(--gp-space-4) 0 0;
  display: flex;
  flex-direction: column;
  height: 92dvh;
  max-height: 92dvh;
}

.gp-modal__content--checkout .gp-modal__handle,
.gp-modal__content--checkout .gp-modal__title {
  padding: 0 var(--gp-space-6);
}

.gp-checkout-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--gp-bg-primary);
}

.gp-checkout-frame-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  margin-top: var(--gp-space-4);
}

.gp-checkout-frame-wrap__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-bg-card);
}

.gp-slider {
  margin: 0 calc(var(--gp-space-6) * -1) var(--gp-space-5);
}

@media (min-width: 768px) {
  .gp-slider {
    margin: 0 0 var(--gp-space-5);
    border-radius: var(--gp-radius-lg);
    overflow: hidden;
  }
}

.gp-slider__viewport {
  position: relative;
  overflow: hidden;
  background: var(--gp-bg-secondary);
}

.gp-slider__track {
  display: flex;
  transition: transform var(--gp-transition-base) ease;
  touch-action: pan-y;
}

.gp-slider__slide {
  flex: 0 0 100%;
  aspect-ratio: 1;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-bg-secondary);
}

.gp-slider__slide img,
.gp-slider__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.gp-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--gp-radius-full);
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: var(--gp-color-white);
  font-size: var(--gp-text-xl);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.gp-slider__nav--prev { left: var(--gp-space-3); }
.gp-slider__nav--next { right: var(--gp-space-3); }

.gp-slider__dots {
  position: absolute;
  bottom: var(--gp-space-3);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--gp-space-2);
  z-index: 2;
}

.gp-slider__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--gp-radius-full);
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}

.gp-slider__dot.is-active {
  background: var(--gp-color-white);
  width: 18px;
  border-radius: 4px;
  transition: width var(--gp-transition-fast) ease;
}

.gp-slider__thumbs {
  display: flex;
  gap: var(--gp-space-2);
  overflow-x: auto;
  padding: var(--gp-space-3) var(--gp-space-6) 0;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .gp-slider__thumbs {
    padding: var(--gp-space-3) 0 0;
  }
}

.gp-slider__thumb {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--gp-radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--gp-transition-fast), border-color var(--gp-transition-fast);
}

.gp-slider__thumb img,
.gp-slider__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.gp-slider__thumb.is-active {
  opacity: 1;
  border-color: var(--gp-color-accent);
}

.gp-slider__thumb-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  color: var(--gp-color-white);
  font-size: 10px;
  pointer-events: none;
}

/* ── Bloque de info tipo "producto": título, subtítulo, tags, descripción ── */
.gp-product-info__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-2xl);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: var(--gp-space-1);
}

.gp-product-info__subtitle {
  font-size: var(--gp-text-sm);
  color: var(--gp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--gp-space-3);
}

.gp-product-info .gp-product-card__tags {
  margin-bottom: var(--gp-space-2);
}


/* ════════════════════════════════════════════════════════════════════════════
   14c. LIGHTBOX (zoom a pantalla completa desde el slider de producto)
   ════════════════════════════════════════════════════════════════════════════ */

.gp-lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--gp-z-modal) + 10);
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-lightbox__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.gp-lightbox__track {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--gp-transition-base) ease;
  touch-action: pan-y;
}

.gp-lightbox__slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gp-space-6);
}

.gp-lightbox__slide img,
.gp-lightbox__slide video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gp-lightbox__close {
  position: absolute;
  top: var(--gp-space-4);
  right: var(--gp-space-4);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: var(--gp-radius-full);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--gp-color-white);
  font-size: var(--gp-text-xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: var(--gp-radius-full);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--gp-color-white);
  font-size: var(--gp-text-2xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-lightbox__nav--prev { left: var(--gp-space-3); }
.gp-lightbox__nav--next { right: var(--gp-space-3); }

@media (min-width: 768px) {
  .gp-lightbox__nav--prev { left: var(--gp-space-6); }
  .gp-lightbox__nav--next { right: var(--gp-space-6); }
}


/* ════════════════════════════════════════════════════════════════════════════
   15. INDICADOR DE CONEXIÓN
   ════════════════════════════════════════════════════════════════════════════ */

.gp-connection-indicator {
  display: flex;
  align-items: center;
  gap: var(--gp-space-2);
  font-size: var(--gp-text-xs);
  font-family: var(--gp-font-body);
  color: var(--gp-text-secondary);
}

.gp-connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gp-connection-dot--online {
  background: var(--gp-color-success);
  box-shadow: 0 0 6px var(--gp-color-success);
  animation: gp-pulse-green 2s infinite;
}

.gp-connection-dot--offline {
  background: var(--gp-color-error);
  box-shadow: 0 0 6px var(--gp-color-error);
}

.gp-connection-dot--syncing {
  background: var(--gp-color-warning);
  box-shadow: 0 0 6px var(--gp-color-warning);
  animation: gp-pulse-yellow 1s infinite;
}

@keyframes gp-pulse-green {
  0%, 100% { box-shadow: 0 0 4px var(--gp-color-success); }
  50%       { box-shadow: 0 0 10px var(--gp-color-success); }
}

@keyframes gp-pulse-yellow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}


/* ════════════════════════════════════════════════════════════════════════════
   16. NOTIFICACIONES
   ════════════════════════════════════════════════════════════════════════════ */

.gp-notifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.gp-notification {
  display: flex;
  align-items: center;
  gap: var(--gp-space-4);
  padding: var(--gp-space-4);
  background: var(--gp-bg-card);
  border-radius: var(--gp-radius-md);
  border: 1px solid var(--gp-border-color);
  cursor: pointer;
  transition: background var(--gp-transition-fast);
}

.gp-notification--unread {
  border-color: var(--gp-color-accent);
  background: rgba(var(--gp-accent-rgb), 0.04);
}

.gp-notification:hover {
  background: var(--gp-bg-secondary);
}

.gp-notification__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--gp-radius-md);
  background: var(--gp-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gp-text-lg);
  flex-shrink: 0;
}

.gp-notification__body {
  flex: 1;
  min-width: 0;
}

.gp-notification__title {
  font-size: var(--gp-text-sm);
  font-weight: 600;
  color: var(--gp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.gp-notification__desc {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-notification__time {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

.gp-notification__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gp-color-accent);
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   17. FILTROS
   ════════════════════════════════════════════════════════════════════════════ */

.gp-filters {
  display: flex;
  gap: var(--gp-space-3);
  margin-bottom: var(--gp-space-4);
  flex-wrap: wrap;
  align-items: center;
}

.gp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  padding: var(--gp-space-2) var(--gp-space-4);
  border-radius: var(--gp-radius-full);
  font-size: var(--gp-text-sm);
  font-family: var(--gp-font-body);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--gp-border-color);
  background: var(--gp-bg-secondary);
  color: var(--gp-text-secondary);
  transition: all var(--gp-transition-fast);
  user-select: none;
}

.gp-filter-chip:hover {
  border-color: var(--gp-color-accent);
  color: var(--gp-color-accent);
}

.gp-filter-chip--active {
  background: var(--gp-color-accent);
  color: var(--gp-bg-primary);
  border-color: var(--gp-color-accent);
  font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════════════════
   18. UTILIDADES Y MISCELÁNEOS
   ════════════════════════════════════════════════════════════════════════════ */

/* Divider */
.gp-divider {
  height: 1px;
  background: var(--gp-border-color);
  margin: var(--gp-space-4) 0;
}

/* Badge de estado */
.gp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-1);
  padding: var(--gp-space-1) var(--gp-space-2);
  border-radius: var(--gp-radius-sm);
  font-size: var(--gp-text-xs);
  font-weight: 700;
  font-family: var(--gp-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gp-badge--success { background: rgba(var(--gp-success-rgb), 0.15); color: var(--gp-color-success); }
.gp-badge--error   { background: rgba(var(--gp-error-rgb),   0.15); color: var(--gp-color-error); }
.gp-badge--warning { background: rgba(232,229,0,0.15);               color: var(--gp-color-warning); }
.gp-badge--accent  { background: rgba(var(--gp-accent-rgb),  0.12); color: var(--gp-color-accent); }
.gp-badge--neutral { background: var(--gp-bg-secondary);            color: var(--gp-text-secondary); }

/* Skeleton loader */
.gp-skeleton {
  background: linear-gradient(90deg, var(--gp-bg-secondary) 25%, var(--gp-border-color) 50%, var(--gp-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: gp-shimmer 1.5s infinite;
  border-radius: var(--gp-radius-md);
}

@keyframes gp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
.gp-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gp-border-color);
  border-top-color: var(--gp-color-accent);
  border-radius: 50%;
  animation: gp-spin 0.7s linear infinite;
}

@keyframes gp-spin {
  to { transform: rotate(360deg); }
}

/* Ítem de lista */
.gp-list-item {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  padding: var(--gp-space-3) var(--gp-space-4);
  border-bottom: 1px solid var(--gp-border-color);
  cursor: pointer;
  transition: background var(--gp-transition-fast);
  color: var(--gp-text-primary);
  font-family: var(--gp-font-body);
}

.gp-list-item:hover {
  background: var(--gp-bg-secondary);
}

.gp-list-item:last-child {
  border-bottom: none;
}

/* Toggle switch */
.gp-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.gp-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.gp-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--gp-border-color);
  border-radius: var(--gp-radius-full);
  cursor: pointer;
  transition: background var(--gp-transition-fast);
}

.gp-toggle__thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  background: var(--gp-color-white);
  border-radius: 50%;
  transition: transform var(--gp-transition-fast);
  pointer-events: none;
}

.gp-toggle input:checked ~ .gp-toggle__track {
  background: var(--gp-color-accent);
}

.gp-toggle input:checked ~ .gp-toggle__thumb {
  transform: translateX(20px);
  background: var(--gp-bg-primary);
}

/* Separador de sección con título */
.gp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gp-space-2) var(--gp-space-3);
  margin-bottom: var(--gp-space-4);
}

.gp-section-title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-xl);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* Precio destacado */
.gp-price {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-3xl);
  font-weight: 800;
  color: var(--gp-color-accent);
  line-height: 1;
}

.gp-price__currency {
  font-size: var(--gp-text-lg);
  font-weight: 600;
  vertical-align: super;
}

/* Variante chica: para cards secundarias/densas (varias en fila) donde el
   tamaño de .gp-price por defecto es demasiado protagonista. */
.gp-price--sm {
  font-size: var(--gp-text-xl);
}

/* Quick stat */
.gp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-1);
}

.gp-stat__value {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-3xl);
  font-weight: 800;
  color: var(--gp-color-accent);
  line-height: 1;
}

.gp-stat__label {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Scrollbar personalizada */
.gp-portal ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.gp-portal ::-webkit-scrollbar-track {
  background: transparent;
}

.gp-portal ::-webkit-scrollbar-thumb {
  background: var(--gp-border-color);
  border-radius: var(--gp-radius-full);
}

.gp-portal ::-webkit-scrollbar-thumb:hover {
  background: var(--gp-text-secondary);
}


/* ════════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE — DESKTOP
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* Grilla de productos: 3 columnas en desktop */
  .gp-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Ocultar tabbar en desktop */
  .gp-tabbar {
    display: none;
  }

  /* .gp-main no necesita el espacio reservado para la tabbar en desktop */
  .gp-main {
    padding-bottom: var(--gp-space-8);
  }

  /* Sidebar lateral en desktop: ver sección 7B (SIDEBAR) para sus reglas */

  /* Contenedor principal con sidebar */
  .gp-layout-with-sidebar {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .gp-layout-with-sidebar .gp-content {
    flex: 1;
    overflow-y: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--gp-space-8) var(--gp-space-6);
    width: 100%;
  }

  /* Dashboards de Dueño y Webmaster: max-width 1200px */
  .gp-dashboard-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--gp-space-8) var(--gp-space-6);
  }

  /* Formulario en dos columnas */
  .gp-form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Padding de secciones */
  .gp-section {
    padding: var(--gp-space-8) var(--gp-space-6);
  }

  /* Modal centrado (ya definido arriba) */

  /* Grid de stats */
  .gp-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Solo mobile */
@media (max-width: 767px) {
  .gp-form-row {
    grid-template-columns: 1fr;
  }

  .gp-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gp-dashboard-content {
    padding: var(--gp-space-4);
  }
}

/* Grid de estadísticas */
.gp-stats-grid {
  display: grid;
  gap: var(--gp-space-4);
}


/* Barra de guardado del panel "Apariencia": queda pegada abajo del área
   visible mientras se hace scroll por el formulario, con fondo sólido. */
.gp-ds-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--gp-bg-primary);
  border-top: 1px solid var(--gp-border-color);
  margin-top: var(--gp-space-6);
  padding: var(--gp-space-4) 0 calc(var(--gp-space-4) + env(safe-area-inset-bottom));
}


/* ════════════════════════════════════════════════════════════════════════════
   19. PANEL "APARIENCIA" — GRIDS RESPONSIVE (reemplazan los inline-style
   grids de 2 columnas que nunca colapsaban en mobile real)
   ════════════════════════════════════════════════════════════════════════════ */

.gp-ds-mode-row {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
}

.gp-ds-mode-btn {
  flex-direction: column;
  gap: var(--gp-space-2);
  padding: var(--gp-space-5);
}

.gp-ds-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gp-space-3);
  margin-bottom: var(--gp-space-6);
}

.gp-ds-restore-row {
  display: flex;
  gap: var(--gp-space-2);
  flex-wrap: wrap;
  width: 100%;
}

.gp-ds-restore-row .gp-btn {
  flex: 1;
  white-space: nowrap;
}

.gp-ds-color-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-4);
}

.gp-ds-logos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-6);
}

.gp-ds-media-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
}

@media (min-width: 560px) {
  .gp-ds-mode-row {
    flex-direction: row;
    gap: var(--gp-space-4);
  }

  .gp-ds-mode-btn {
    flex: 1;
    padding: var(--gp-space-6);
  }

  .gp-ds-section-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .gp-ds-restore-row {
    width: auto;
  }

  .gp-ds-restore-row .gp-btn {
    flex: 0 0 auto;
  }

  .gp-ds-color-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gp-ds-logos-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   19. OVERRIDES ESPECÍFICOS POR CONTEXTO
   ════════════════════════════════════════════════════════════════════════════ */

/* Modal de transacciones del Panel del Dueño: necesita más ancho en desktop
   para mostrar la tabla (Fecha/Tipo/Miembro/Monto/Método/Estado) sin scroll
   horizontal. No toca el max-width por defecto de .gp-modal__content (560px)
   que aplica al resto de modales del ecosistema. */
@media (min-width: 768px) {
  #gpo-modal-transactions .gp-modal__content {
    max-width: 960px;
  }

  /* El modal de miembros activos también se beneficia de un poco más de ancho
     ahora que tiene tabs de filtro adicionales. */
  #gpo-modal-active-members .gp-modal__content {
    max-width: 680px;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   CALENDARIO (agenda diaria) — compartido entre Panel del Cliente y Panel
   del Entrenador. El Panel del Entrenador ya tenía su propia copia local en
   gymplug-addon-trainers/assets/css/trainer.css (.gpt-calendar-*) antes de
   que este componente se generalizara aquí; se deja tal cual para no
   romper nada existente, y el cliente usa este equivalente .gp-calendar-*.
   ════════════════════════════════════════════════════════════════════════════ */
.gp-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-3);
}

.gp-calendar-day-label {
  text-align: center;
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
  font-weight: 700;
  text-transform: uppercase;
}

.gp-calendar-cell {
  aspect-ratio: 1;
  border-radius: var(--gp-radius-md);
  border: 1px solid var(--gp-border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: background var(--gp-transition-fast), border-color var(--gp-transition-fast);
  background: var(--gp-bg-secondary);
}

.gp-calendar-cell:hover {
  border-color: var(--gp-color-accent);
}

.gp-calendar-cell--empty {
  visibility: hidden;
  cursor: default;
}

.gp-calendar-cell--has-agenda {
  border-color: var(--gp-color-accent);
  background: rgba(var(--gp-accent-rgb), 0.08);
}

.gp-calendar-cell__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gp-color-accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   FIN DEL ARCHIVO
   ════════════════════════════════════════════════════════════════════════════ */