/**
 * GymPlug Addon: Entrenadores — estilos complementarios.
 *
 * PROBLEMA 3: este archivo YA NO redefine componentes que el Design System
 * ya provee (botones, inputs, cards, modales, tablas, badges, tabs,
 * sidebar). Solo contiene:
 *   1. Los pocos elementos verdaderamente específicos de este addon que no
 *      tienen equivalente en gymplug-design-system.css (galería de fotos,
 *      gráfica de barras simple, autocompletado, tarjetas de plan/tier).
 *   2. Todo usando las variables --gp-* del Design System para heredar el
 *      tema (colores, tipografía, espaciado) sin duplicar valores.
 *
 * Depende de gymplug-design-system.css (ver enqueue en
 * gymplug-addon-trainers.php) por las variables --gp-* usadas aquí.
 */

/* ── Foto de perfil ─────────────────────────────────────────────────── */
.gpt-profile-photo {
  display: flex;
  align-items: center;
  gap: var(--gp-space-4);
  margin-bottom: var(--gp-space-6);
}

/* ── Galería de fotos ───────────────────────────────────────────────── */
.gpt-gallery-section {
  margin-bottom: var(--gp-space-6);
}

.gpt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--gp-space-3);
  margin-top: var(--gp-space-3);
}

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

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

.gpt-gallery-item__badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--gp-radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: var(--gp-color-white);
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gpt-gallery-item__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--gp-radius-full);
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: var(--gp-color-white);
  font-size: var(--gp-text-sm);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gpt-gallery-add {
  aspect-ratio: 1;
  border-radius: var(--gp-radius-md);
  border: 2px dashed var(--gp-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gp-text-2xl);
  color: var(--gp-text-secondary);
  cursor: pointer;
  transition: border-color var(--gp-transition-fast), color var(--gp-transition-fast);
}

.gpt-gallery-add:hover {
  border-color: var(--gp-color-accent);
  color: var(--gp-color-accent);
}

/* ── Checkboxes en grupo (especialidades / métodos de pago) ───────────── */
.gpt-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-2);
}

.gpt-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  padding: var(--gp-space-2) var(--gp-space-3);
  border: 1px solid var(--gp-border-color);
  border-radius: var(--gp-radius-full);
  font-size: var(--gp-text-sm);
  color: var(--gp-text-secondary);
  cursor: pointer;
  user-select: none;
}

.gpt-checkbox input {
  accent-color: var(--gp-color-accent);
}

/* ── Redes sociales / secciones ────────────────────────────────────── */
.gpt-social-section,
.gpt-gallery-section {
  padding-top: var(--gp-space-4);
  border-top: 1px solid var(--gp-border-color);
}

/* ── Tags (beneficios de un plan) ──────────────────────────────────── */
.gpt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-2);
  margin-bottom: var(--gp-space-2);
}

.gpt-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-1);
  padding: var(--gp-space-1) var(--gp-space-3);
  background: rgba(var(--gp-accent-rgb), 0.1);
  color: var(--gp-color-accent);
  border-radius: var(--gp-radius-full);
  font-size: var(--gp-text-xs);
  font-weight: 600;
}

.gpt-tag button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: var(--gp-text-sm);
  line-height: 1;
  padding: 0;
}

.gpt-tags-input__row {
  display: flex;
  gap: var(--gp-space-2);
}

.gpt-tags-input__row .gp-input {
  flex: 1;
}

/* ── Tarjetas de plan (tier) ────────────────────────────────────────── */
.gpt-tiers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gp-space-4);
}

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

.gpt-feature-list {
  margin: 0;
  padding-left: var(--gp-space-5);
  font-size: var(--gp-text-sm);
  color: var(--gp-text-secondary);
}

.gpt-tier-card__actions {
  display: flex;
  gap: var(--gp-space-2);
  margin-top: auto;
  padding-top: var(--gp-space-3);
}

/* ── Autocompletado de cliente (registrar pago) ────────────────────── */
.gpt-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--gp-bg-card);
  border: 1px solid var(--gp-border-color);
  border-radius: var(--gp-radius-md);
  box-shadow: var(--gp-shadow-md);
  max-height: 240px;
  overflow-y: auto;
  margin-top: var(--gp-space-1);
}

.gpt-autocomplete-item {
  display: flex;
  flex-direction: column;
  padding: var(--gp-space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--gp-border-color);
}

.gpt-autocomplete-item:last-child {
  border-bottom: none;
}

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

.gpt-autocomplete-item strong {
  font-size: var(--gp-text-sm);
  color: var(--gp-text-primary);
}

.gpt-autocomplete-item span {
  font-size: var(--gp-text-xs);
  color: var(--gp-text-secondary);
}

.gpt-autocomplete-item--empty {
  color: var(--gp-text-secondary);
  cursor: default;
  text-align: center;
}

.gpt-autocomplete-item--empty:hover {
  background: none;
}

/* ── Historial de pagos / renovación ───────────────────────────────── */
.gpt-payment-history {
  margin-top: var(--gp-space-8);
}

.gpt-renew-section {
  margin-top: var(--gp-space-6);
  padding-top: var(--gp-space-6);
  border-top: 1px solid var(--gp-border-color);
}

/* Gráfica de ingresos mensuales ahora se renderiza con JS (barras +
   tooltip), mismo patrón que dashboard-owner.php / gymplug-reports.js.
   Ya no requiere clases CSS propias — usa var(--gp-*) inline. */

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gpt-tiers-list {
    grid-template-columns: 1fr;
  }

  .gpt-profile-photo {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Modal de perfil del entrenador (Directorio): necesita más ancho en
   desktop para mostrar foto, bio, galería y planes sin quedar apretado.
   No toca el max-width por defecto de .gp-modal__content (560px) que
   aplica al resto de modales del ecosistema — mismo patrón documentado en
   gymplug-design-system.css para #gpo-modal-transactions. */
@media (min-width: 768px) {
  #gpt-dir-modal-perfil .gp-modal__content {
    max-width: 720px;
  }
}

/* ── Directorio: barra de búsqueda + filtros ───────────────────────── */
.gpt-directory-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-4);
  margin-bottom: var(--gp-space-6);
}

.gpt-directory-search {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}

.gpt-directory-tiers {
  margin-top: var(--gp-space-6);
  padding-top: var(--gp-space-6);
  border-top: 1px solid var(--gp-border-color);
}

/* ── Tarjeta de entrenador (grid del directorio) ───────────────────── */
.gpt-trainer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gp-space-2);
  text-align: left;
}

.gpt-trainer-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-space-1);
  margin: var(--gp-space-1) 0;
}

/* ── Resumen de precio (modal de suscripción) ──────────────────────── */
.gpt-price-summary {
  text-align: center;
  padding: var(--gp-space-4) 0;
  margin-bottom: var(--gp-space-4);
  border-bottom: 1px solid var(--gp-border-color);
}

/* ── Fix: foto de perfil desbordada en "Mi Perfil" ───────────────────
   .gp-avatar (Design System) está pensada para aplicarse directamente
   sobre un <img>. Aquí se usa como contenedor (#gpt-photo-preview) y
   trainer-dashboard.js inyecta un <img> hijo dentro de él, que no
   hereda el border-radius/object-fit/tamaño y se desborda del círculo.
   Se recorta el contenedor y se fuerza el <img> hijo a llenarlo. */
#gpt-photo-preview.gp-avatar {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gpt-photo-preview.gp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Rutinas: dos columnas (galería de ejercicios + grid de rutinas) ──── */
.gpt-routines-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .gpt-routines-columns {
    grid-template-columns: 1fr;
  }
}

.gpt-exercise-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--gp-space-3);
  margin-top: var(--gp-space-3);
}

/* CORRECCIÓN: .gpt-routines-list no tenía ninguna regla propia — un <div>
   desnudo donde renderRoutines() (trainer-dashboard.js) inyectaba cada
   rutina como .gp-card con margin-bottom puesto inline, sin gap
   uniforme ni padding-top consistente respecto al header "Mis rutinas"
   del .gp-card padre. Mismo patrón que .gpt-exercise-gallery, ya
   correcto: gap del contenedor en vez de márgenes inline sueltos por
   card. */
.gpt-routines-list {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
  margin-top: var(--gp-space-3);
}

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

.gpt-exercise-gallery__item img,
.gpt-exercise-gallery__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gpt-exercise-gallery__title {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--gp-space-1) var(--gp-space-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: var(--gp-color-white);
  font-size: var(--gp-text-xs);
  line-height: 1.2;
}

/* ── Selector de cliente para armar su agenda (sub-tab "Clientes") ────── */
.gpt-agenda-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gp-space-3);
  margin-top: var(--gp-space-4);
}

/* ── Calendario (agenda diaria) ────────────────────────────────────────── */
.gpt-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-3);
}

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

.gpt-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);
}

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

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

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

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