/**
 * GymPlug Addon: Tracking Físico
 * Estilos de la sección "Mi Progreso" (portal del cliente y vista del entrenador).
 *
 * MIGRACIÓN A VANILLA JS (Parte 3/3 — completa): este archivo ya no
 * reimplementa componentes que el Design System compartido (gp-*) ya
 * resuelve (cards, botones, modales, tabla, formularios, badges,
 * estados vacíos, banners, galería). Solo queda aquí lo específico del
 * addon que el Design System no cubre: tabs internas propias, tarjetas
 * de gráfica, thumbs de fotos con overlay de metadatos, comparador
 * lado a lado y la transición `.is-visible`.
 *
 * Las clases `gymplug-tracking-*` se conservan como selectores/ganchos
 * de layout (y como espacio de nombres para no colisionar con otros
 * addons), pero la apariencia visual (color, tipografía, radios,
 * sombras) la aportan las clases `gp-*` que templates/tracking-section.php
 * añade junto a ellas.
 */

.gymplug-tracking-wrapper {
	--gpt-radio-thumb: var( --gp-radius-md, 10px );

	max-width: 100%;
}

/* ───────── Header ───────── */

.gymplug-tracking-header {
	margin-bottom: var( --gp-space-6, 20px );
}

.gymplug-tracking-titulo {
	display: flex;
	align-items: center;
	gap: var( --gp-space-2, 8px );
	margin: 0 0 4px;
}

.gymplug-tracking-subtitulo {
	margin: 0;
}

/* ───────── Tabs internas (Mediciones / Galería) ─────────
   Específicas del addon: no son la tabbar inferior fija del Design
   System (.gp-tabbar), sino una subnavegación local dentro de la
   sección, así que se mantienen con estilo propio ligero. */

.gymplug-tracking-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var( --gp-border-color, #e5e7eb );
	margin-bottom: var( --gp-space-6, 20px );
}

.gymplug-tracking-tab {
	padding: 10px 18px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	font-weight: 600;
	font-size: var( --gp-text-sm, 14px );
	color: var( --gp-text-secondary, #6b7280 );
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.gymplug-tracking-tab:hover {
	color: var( --gp-text-primary, #1f2937 );
}

.gymplug-tracking-tab.is-active {
	color: var( --gp-color-accent, #2563eb );
	border-bottom-color: var( --gp-color-accent, #2563eb );
}

/* ───────── Cards genéricas (delegadas a .gp-card) ─────────
   Solo el espaciado entre cards, que .gp-card no asume por sí sola. */

.gymplug-tracking-card {
	margin-bottom: var( --gp-space-6, 20px );
}

.gymplug-tracking-card h3 {
	margin: 0 0 var( --gp-space-4, 14px );
}

/* ───────── Formularios (inputs/selects/textarea delegados a
   .gp-input/.gp-select/.gp-textarea; layout específico del addon) ───────── */

.gymplug-tracking-form-row {
	margin-bottom: var( --gp-space-4, 14px );
	display: flex;
	flex-direction: column;
	gap: var( --gp-space-2, 6px );
}

.gymplug-tracking-form-row label,
.gymplug-tracking-form-field label {
	font-weight: 600;
	font-size: var( --gp-text-sm, 13px );
	color: var( --gp-text-secondary, #6b7280 );
}

.gymplug-tracking-form-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: var( --gp-space-3, 12px );
	margin-bottom: var( --gp-space-4, 14px );
}

.gymplug-tracking-form-field {
	display: flex;
	flex-direction: column;
	gap: var( --gp-space-2, 6px );
}

.gymplug-tracking-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: var( --gp-space-3, 10px );
	margin-top: var( --gp-space-2, 8px );
	flex-wrap: wrap;
}

/* Mensaje de confirmación: sin equivalente directo en el Design System
   (gp-banner es para avisos permanentes, este es efímero con transición
   propia vía .is-visible), así que se mantiene local. */
.gymplug-tracking-confirmacion {
	display: flex;
	align-items: center;
	gap: var( --gp-space-2, 6px );
	background: rgba( var( --gp-success-rgb, 22, 163, 74 ), 0.1 );
	color: var( --gp-color-success, #16a34a );
	border: 1px solid var( --gp-color-success, #16a34a );
	border-radius: var( --gp-radius-md, 8px );
	padding: var( --gp-space-3, 10px ) var( --gp-space-4, 14px );
	margin-top: var( --gp-space-3, 12px );
	font-weight: 600;
	font-size: var( --gp-text-sm, 14px );
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.2s ease, max-height 0.2s ease;
}

.gymplug-tracking-confirmacion.is-visible {
	opacity: 1;
	max-height: 60px;
}

/* ───────── Botones de ícono (acciones de fila en tabla) ─────────
   Sin equivalente en el Design System (que solo define .gp-btn--icon,
   pensado para botones grandes de 44px, no para acciones inline de
   tabla), así que se mantienen locales. */

.gymplug-btn-icono {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	border-radius: var( --gp-radius-sm, 6px );
	color: var( --gp-text-secondary, #6b7280 );
}

.gymplug-btn-icono:hover {
	background: var( --gp-bg-secondary, #f9fafb );
	color: var( --gp-text-primary, #1f2937 );
}

.gymplug-btn-icono--peligro:hover {
	color: var( --gp-color-error, #dc2626 );
}

/* ───────── Estados vacíos / dato único ───────── */

.gymplug-tracking-vacio {
	text-align: center;
	padding: var( --gp-space-8, 30px ) var( --gp-space-3, 10px );
}

.gymplug-tracking-dato-unico {
	display: flex;
	flex-wrap: wrap;
	gap: var( --gp-space-3, 12px );
	margin-top: var( --gp-space-3, 12px );
}

/* ───────── Gráficas (específico del addon: Chart.js) ───────── */

.gymplug-tracking-graficas-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var( --gp-space-3, 10px );
	margin-bottom: var( --gp-space-5, 16px );
}

.gymplug-tracking-selector-rango {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.gymplug-tracking-selector-rango button {
	padding: 6px 12px;
	border-radius: var( --gp-radius-full, 20px );
	border: 1px solid var( --gp-border-color, #e5e7eb );
	background: var( --gp-bg-card, #fff );
	font-size: 12.5px;
	font-weight: 600;
	color: var( --gp-text-secondary, #6b7280 );
	cursor: pointer;
}

.gymplug-tracking-selector-rango button.is-active {
	background: var( --gp-color-accent, #2563eb );
	border-color: var( --gp-color-accent, #2563eb );
	color: #fff;
}

.gymplug-tracking-graficas-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: var( --gp-space-5, 18px );
}

.gymplug-tracking-grafica-card {
	border: 1px solid var( --gp-border-color, #e5e7eb );
	border-radius: var( --gp-radius-md, 10px );
	padding: var( --gp-space-4, 14px );
	background: var( --gp-bg-secondary, #f9fafb );
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gymplug-tracking-grafica-card.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.gymplug-tracking-grafica-card h4 {
	margin: 0 0 var( --gp-space-2, 8px );
	font-size: 13.5px;
	font-weight: 700;
	color: var( --gp-text-secondary, #6b7280 );
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.gymplug-tracking-grafica-card canvas {
	max-height: 220px;
}

/* ───────── Tabla de historial (delegada a .gp-table/.gp-table-wrap) ───────── */

.gymplug-tracking-th-acciones,
.gymplug-tracking-td-acciones {
	text-align: right;
	white-space: nowrap;
}

.gymplug-tracking-tabla tr.is-clickable {
	cursor: pointer;
}

/* ───────── Galería (delegada a .gp-gallery-grid; thumbs específicos) ───────── */

.gymplug-tracking-galeria-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var( --gp-space-3, 10px );
	margin-bottom: var( --gp-space-5, 16px );
}

.gymplug-tracking-galeria-acciones {
	display: flex;
	gap: var( --gp-space-2, 8px );
	flex-wrap: wrap;
}

/* Thumb de foto: sin equivalente en .gp-gallery-item (que es de solo
   lectura, sin overlay de metadatos ni estado seleccionable), así que
   se mantiene local reutilizando el radio y color de fondo del DS. */
.gymplug-tracking-foto-thumb {
	position: relative;
	border-radius: var( --gpt-radio-thumb );
	overflow: hidden;
	cursor: pointer;
	border: 3px solid transparent;
	aspect-ratio: 3 / 4;
	background: var( --gp-bg-secondary, #f9fafb );
	transition: border-color 0.15s ease;
}

.gymplug-tracking-foto-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gymplug-tracking-foto-thumb.is-seleccionada {
	border-color: var( --gp-color-accent, #2563eb );
}

.gymplug-tracking-foto-meta {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.75 ), transparent );
	color: #fff;
	font-size: 11px;
	padding: 16px 8px 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ───────── Modales (delegados a .gp-modal / .gp-modal__content) ─────────
   Solo variantes de ancho específicas del addon (visor de imagen y
   comparador necesitan más espacio que el modal por defecto de 560px). */

.gymplug-modal--imagen .gp-modal__content,
.gymplug-modal--comparador .gp-modal__content,
.gymplug-modal--imagen.gp-modal__content,
.gymplug-modal--comparador.gp-modal__content {
	max-width: 720px;
}

.gymplug-tracking-preview-foto {
	margin-top: var( --gp-space-3, 10px );
	max-height: 220px;
	overflow: hidden;
	border-radius: var( --gp-radius-md, 8px );
}

.gymplug-tracking-preview-foto img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.gymplug-tracking-visor-img {
	width: 100%;
	max-height: 60vh;
	object-fit: contain;
	border-radius: var( --gp-radius-md, 10px );
	background: #000;
}

.gymplug-tracking-visor-meta {
	margin-top: var( --gp-space-4, 14px );
	font-size: var( --gp-text-sm, 14px );
}

.gymplug-tracking-visor-meta p {
	margin: 4px 0;
}

/* ───────── Comparador lado a lado (específico del addon) ───────── */

.gymplug-tracking-comparador-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --gp-space-4, 16px );
}

.gymplug-tracking-comparador-item img {
	width: 100%;
	border-radius: var( --gp-radius-md, 10px );
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: #000;
}

.gymplug-tracking-comparador-item p {
	text-align: center;
	margin: var( --gp-space-2, 6px ) 0 0;
	font-size: var( --gp-text-sm, 13px );
}

/* ───────── Responsive ───────── */

@media ( max-width: 640px ) {
	.gymplug-tracking-comparador-grid {
		grid-template-columns: 1fr;
	}

	.gymplug-tracking-form-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ───────── Hints de campo (específico del addon) ─────────
   Texto de ayuda pequeño bajo un input/select. No existe un equivalente
   gp-* en el Design System compartido, así que se define aquí igual que
   el resto de piezas propias del addon (ver cabecera del archivo). */

.gymplug-tracking-hint {
	display: block;
	margin-top: 4px;
	font-size: var( --gp-text-sm, 12px );
	color: var( --gp-text-secondary, #6b7280 );
}

/* ───────── Vista: Análisis (específico del addon) ─────────
   Tarjetas gp-card con cada métrica calculada + su badge de
   clasificación, y un bloque de recomendaciones simple. */

.gymplug-tracking-analisis-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --gp-space-4, 16px );
	margin-bottom: var( --gp-space-6, 20px );
}

.gymplug-tracking-metrica-card .gymplug-tracking-metrica-label {
	display: block;
	font-size: var( --gp-text-sm, 13px );
	color: var( --gp-text-secondary, #6b7280 );
	margin-bottom: 4px;
}

.gymplug-tracking-metrica-card .gymplug-tracking-metrica-valor {
	display: block;
	font-size: var( --gp-text-xl, 24px );
	font-weight: 700;
	margin-bottom: 8px;
}

.gymplug-tracking-metrica-card .gymplug-tracking-metrica-detalle {
	display: block;
	margin-top: 6px;
	font-size: var( --gp-text-sm, 12px );
	color: var( --gp-text-secondary, #6b7280 );
}

.gymplug-tracking-somatotipo-barras {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.gymplug-tracking-somatotipo-barra {
	display: grid;
	grid-template-columns: 90px 1fr 32px;
	align-items: center;
	gap: 8px;
	font-size: var( --gp-text-sm, 12px );
}

.gymplug-tracking-somatotipo-barra-track {
	background: var( --gp-bg-secondary, #f3f4f6 );
	border-radius: var( --gp-radius-sm, 6px );
	overflow: hidden;
	height: 8px;
}

.gymplug-tracking-somatotipo-barra-fill {
	height: 100%;
	background: var( --gp-color-accent, #6366f1 );
}

.gymplug-tracking-recomendaciones-lista {
	margin: 0;
	padding-left: 20px;
}

.gymplug-tracking-recomendaciones-lista li {
	margin-bottom: 8px;
}

.gymplug-tracking-recomendaciones-lista li:last-child {
	margin-bottom: 0;
}

.gymplug-tracking-analisis-aviso {
	margin-top: var( --gp-space-4, 16px );
}