/**
 * Reestilizado de WooCommerce con los tokens de la Sección 7. Usa las
 * clases nativas del loop de productos (content-product.php) y de la
 * ficha — no se sobreescribió ninguna plantilla PHP para esto, solo CSS.
 */

/* -------------------- Tarjeta de producto (loop) -------------------- */

/*
 * flex-wrap + justify-content:center, NO grid — con grid, una fila
 * incompleta (ej. 5 productos en 4 columnas) deja el ítem sobrante
 * pegado a la izquierda, sin centrar (grid no centra filas parciales,
 * cada fila se auto-coloca de forma independiente). Flexbox sí centra
 * cada línea individualmente cuando el contenedor tiene
 * justify-content:center — bug real reportado por el cliente
 * ("productos destacados pegados a la izquierda y en 2 líneas").
 * flex-grow:0 es obligatorio: sin él, un ítem solo en la última fila se
 * estira a 100% del ancho en vez de mantener el mismo ancho que sus
 * hermanos.
 */
ul.products {
	--wc-cols: 4;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

/*
 * WooCommerce agrega esta clase según el contexto real, y varía DENTRO
 * del mismo sitio — verificado contra el sitio real, no asumido: Tienda/
 * categorías usan columns-3 (ajuste real del admin, `wp option get
 * woocommerce_catalog_columns`), "Productos relacionados" en la ficha
 * usa columns-4 (default distinto de WooCommerce para ese contexto).
 * --wc-cols de arriba es solo el fallback si por algún motivo no hay
 * clase columns-N — ver docs/ESTANDARES.md §3.
 */
ul.products.columns-1 { --wc-cols: 1; }
ul.products.columns-2 { --wc-cols: 2; }
ul.products.columns-3 { --wc-cols: 3; }
ul.products.columns-4 { --wc-cols: 4; }
ul.products.columns-5 { --wc-cols: 5; }
ul.products.columns-6 { --wc-cols: 6; }

/*
 * Estructura REAL verificada contra el HTML servido (no asumida):
 *
 * <li class="product ...">
 *   <a class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
 *     [sale flash] [img]
 *     [marca] [badge tipo comercial]   <- hooks propios, ver product-behavior.php
 *     <h2 class="woocommerce-loop-product__title">Título</h2>
 *     [rating] <span class="price">...</span>
 *   </a>
 *   <a class="button ...">Agregar al carro / Leer más</a>  <- hermano, FUERA del link de arriba
 * </li>
 *
 * Todo lo de texto vive DENTRO de un único <a>, por eso el padding lateral
 * se aplica a los elementos de texto directamente (no al <li> ni al <a>
 * completo, que también contiene la imagen).
 */

ul.products li.product {
	/*
	 * Historial real de este bug (3 fixes, cada uno confirmado en vivo
	 * contra el DOM antes de pasar al siguiente):
	 * 1. WooCommerce core agrega `margin: 0 3.8% 2.992em 0` cuando el
	 *    body tiene .woocommerce/.woocommerce-page (Tienda/categorías sí,
	 *    Home no) — se sumaba a nuestro `gap`. Reseteado acá a `margin:0`.
	 * 2. Ese `margin:0` no ganaba por especificidad contra la regla real
	 *    de WooCommerce core (`.woocommerce ul.products li.product`, 3
	 *    clases vs nuestras 2) — override con la misma especificidad más
	 *    abajo en este archivo.
	 * 3. Con el margin ya neutralizado, `flex-basis` en porcentaje
	 *    (`calc(33.3333% - Npx)`) seguía forzando wrap prematuro (3
	 *    productos reales en columns-3 renderizaban 2+1) incluso con la
	 *    matemática "exacta" — confirmado con pruebas binarias en vivo
	 *    (`element.style.flexBasis`) que un `flex-basis` en PORCENTAJE
	 *    necesita ~8px extra de margen de seguridad más allá del cálculo
	 *    exacto para no wrappear (conservadurismo real del algoritmo de
	 *    flex-wrap de Chromium con gap + porcentaje, no un error de
	 *    fórmula); un `flex-basis` en PÍXELES fijos no tiene este
	 *    problema. `0.625rem` (10px) de margen extra por ítem, más que
	 *    suficiente, confirmado con pruebas incrementales en vivo.
	 *
	 * Mobile: siempre 2 columnas, sin importar --wc-cols del desktop —
	 * un card de ficha angosto (columns-6, por ejemplo) sería ilegible
	 * en mobile si escalara proporcional al conteo de columnas real.
	 */
	margin: 0;
	flex: 0 1 calc(50% - 1.25rem);
	display: flex;
	flex-direction: column;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 0 0 1.1rem;
	overflow: hidden;
	transition: box-shadow 200ms ease-out, transform 200ms ease-out;
	animation: techsalud-fade-up 450ms ease-out both;
}

/*
 * Especificidad igualada a la regla real de WooCommerce core
 * (`.woocommerce ul.products li.product` / `.woocommerce-page ...`,
 * 3 clases) — gana por orden de carga (este archivo carga después,
 * ver dependencias en functions.php) en vez de perder por
 * especificidad como el `margin:0` de arriba. Sin esto, Tienda/
 * categorías (que sí tienen body.woocommerce/.woocommerce-page; Home
 * no) seguían con el margin legacy de WooCommerce sumado al gap.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	margin: 0;
}

@media (min-width: 768px) {
	ul.products li.product {
		/*
		 * Fórmula genérica gap-aware: (100% - (N-1)*gap) / N, N = --wc-cols
		 * de la clase columns-N real del contenedor. Un solo lugar de
		 * verdad para cualquier cantidad de columnas (ver ESTANDARES.md §3).
		 *
		 * "- 0.625rem" final: margen de seguridad, NO redondeo de
		 * subpíxeles (esa fue la hipótesis inicial, insuficiente).
		 * Confirmado en vivo con pruebas binarias (`element.style.
		 * flexBasis` incremental): un flex-basis en PORCENTAJE dentro de
		 * un contenedor con `gap` necesita ~8px extra más allá de la
		 * matemática exacta para que Chromium no wrappee prematuramente
		 * (columns-3 real en Tienda renderizaba 2+1 en vez de 3 parejas,
		 * incluso con la fórmula matemáticamente exacta). Un flex-basis
		 * en píxeles fijos no tiene este problema — pero necesitamos
		 * porcentaje para que N sea dinámico vía --wc-cols. 0.625rem
		 * (10px) por ítem es margen de sobra, verificado con pruebas
		 * incrementales (7px ya alcanzaba, 10px deja margen extra para
		 * otros navegadores).
		 */
		flex-basis: calc((100% - (var(--wc-cols) - 1) * 1.25rem) / var(--wc-cols) - 0.625rem);
	}
}

ul.products li.product:nth-child(1) { animation-delay: 0ms; }
ul.products li.product:nth-child(2) { animation-delay: 60ms; }
ul.products li.product:nth-child(3) { animation-delay: 120ms; }
ul.products li.product:nth-child(4) { animation-delay: 180ms; }
ul.products li.product:nth-child(n+5) { animation-delay: 220ms; }

ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	ul.products li.product {
		animation: none;
	}
}

/* El link grande: envuelve imagen + marca + badge + título + precio. */
ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	background: #fff;
	text-decoration: none;
	overflow: hidden;
}

ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 0.5rem;
	transition: transform 300ms ease-out;
}

ul.products li.product:hover img {
	transform: scale(1.04);
}

/* Todo lo de texto dentro del link comparte el mismo padding lateral. */
ul.products li.product .techsalud-product-brand,
ul.products li.product .techsalud-tipo-badge,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .star-rating,
ul.products li.product > a.woocommerce-loop-product__link > .price {
	display: block;
	margin-left: 1.1rem;
	margin-right: 1.1rem;
}

.techsalud-product-brand {
	margin-top: 0.85rem;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-disabled);
}

ul.products li.product .techsalud-tipo-badge {
	position: static;
	width: fit-content;
	margin-top: 0.4rem;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	line-height: 1.3;
	margin-top: 0.6rem;
	margin-bottom: 0.3rem;
}

ul.products li.product > a.woocommerce-loop-product__link > .price {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-lg);
	margin-bottom: 0.85rem;
}

ul.products li.product .onsale {
	background: var(--color-cta);
	border-radius: var(--radius-pill);
	font-weight: var(--font-weight-medium);
}

ul.products li.product .star-rating {
	color: var(--color-warning);
	margin-top: 0.4rem;
}

/* El botón "Agregar al carro"/"Leer más" es HERMANO del link grande, no
   descendiente — se empuja al final de la tarjeta con margin-top:auto,
   y la altura de fila la da el grid (align-items:stretch por defecto). */
ul.products li.product > a.button {
	display: block;
	margin: 0.85rem 1.1rem 0;
	margin-top: auto;
	text-align: center;
	border-radius: var(--radius-pill);
	background: var(--color-cta);
	color: #fff;
	font-weight: var(--font-weight-semibold);
	padding: 0.6rem 1.25rem;
}

/* color se redeclara en :hover a propósito — ver el comentario
   equivalente en components.css junto a .button-primary:hover. */
ul.products li.product > a.button:hover {
	background: var(--color-cta-hover);
	color: #fff;
}

/* -------------------- Listado: orden, conteo, paginación -------------------- */

.woocommerce-result-count,
.woocommerce-ordering {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.woocommerce-ordering select {
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	padding: 0.4rem 0.75rem;
}

nav.woocommerce-pagination ul {
	border-color: var(--color-border);
}

nav.woocommerce-pagination .page-numbers.current {
	background: var(--color-cta);
}

/* -------------------- Filtros (widgets nativos de WooCommerce) -------------------- */

.widget_price_filter .price_slider_amount .button,
.widget_layered_nav_filters a {
	border-radius: var(--radius-pill);
}

.widget_layered_nav ul,
.widget_product_categories ul {
	list-style: none;
	padding: 0;
}

.widget_layered_nav li a,
.widget_product_categories li a {
	color: var(--color-text);
}

.woocommerce-widget-layered-nav-list__item--chosen a {
	color: var(--color-cta);
	font-weight: var(--font-weight-semibold);
}

/*
 * -------------------- Ficha de producto: bloques propios de TechSalud --------------------
 * Prefijo `techsalud-ficha-*` obligatorio en las 4 clases (antes 2 de
 * ellas eran genéricas: `.techsalud-recursos`, `.techsalud-faqs`) — bug
 * real detectado en vivo (2026-08-01): esas mismas 2 clases genéricas
 * también las usan secciones del Home (Recursos para el especialista,
 * FAQ), y esta regla (cargada sitewide) les agregaba `margin: 2rem 0`
 * sin que nadie lo pidiera — se veía como una línea blanca entre
 * secciones con el mismo fondo. Namespacing bajo `techsalud-ficha-`
 * (coincide con el comentario de esta sección: "bloques propios de
 * TechSalud" de la FICHA de producto) para que una clase de un
 * componente nunca vuelva a colisionar por casualidad con una clase de
 * otro.
 */

.techsalud-ficha-tecnica,
.techsalud-ficha-patologias,
.techsalud-ficha-recursos,
.techsalud-ficha-faqs {
	margin: 2rem 0;
}

.techsalud-ficha-tecnica dt {
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	margin-top: 0.75rem;
}

.techsalud-ficha-tecnica dd {
	margin: 0.25rem 0 0;
	color: var(--color-text-muted);
}

.techsalud-ficha-recursos ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.techsalud-ficha-recursos li {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 1rem;
}

.techsalud-cta-cotizacion {
	display: inline-block;
	margin: 0.75rem 0;
}