/* =========================================================================
   ESEP — Cards de cursos (reemplazo del loop-item de Elementor)
   Reutiliza --esep-azul de esep-header.css (con fallback).
   ========================================================================= */

:root {
	--esep-card-azul:    var(--esep-azul, #2159D6);
	--esep-card-turq:    #00FFD2;
	--esep-card-gap:     20px;
}

/* ---- Card ---- */
.esep-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #FEFEFE;
	border: 1px solid var(--esep-card-azul);          /* bordecito azul (turquesa en diplomaturas) */
	border-radius: 5px;
	box-shadow: 0 4px 14px rgba(20, 40, 90, .10);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease, border-color .2s ease;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.esep-card:hover {
	box-shadow: 0 12px 28px rgba(20, 40, 90, .18);
	transform: translateY(-4px);
}
.esep-card--diploma { border-color: var(--esep-card-turq); }

/* Card clickeable entera (reemplaza el JS .custom-wrapper-link): el <a> del
   título estira un overlay sobre toda la card. Como no hay otros enlaces
   dentro, alcanza con que quede por encima de todo. */
.esep-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---- Banda de descuento ---- */
.esep-card__banner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 5px 20px;
	background: var(--esep-card-azul);
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
}
.esep-card--diploma .esep-card__banner { background: var(--esep-card-turq); color: #000; }

/* ---- Cuerpo ---- */
.esep-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}
.esep-card__accent {
	display: block;
	width: 34px; height: 6px;
	border-radius: 2px;
	background: var(--esep-card-azul);
}
.esep-card--diploma .esep-card__accent { background: var(--esep-card-turq); }

.esep-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.22;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.esep-card__title a { color: #242424; text-decoration: none; }

.esep-card__desc {
	font-size: 15px;
	line-height: 1.5;
	color: #5D5D5D;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Meta (Formato / Duración) — pegada abajo para alinear cards ---- */
.esep-card__meta {
	list-style: none;
	margin: 6px 0 0;
	margin-top: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.esep-card__meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--esep-card-azul);
}
.esep-card__ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--esep-card-azul); }

/* ---- Banda de precio ---- */
.esep-card__price {
	padding: 8px 20px 12px;
	background: var(--esep-card-azul);
	color: #fff;
	border-radius: 0 30px 0 0;   /* curva grande arriba-derecha; abajo lo recorta la card */
}
.esep-card--diploma .esep-card__price { background: var(--esep-card-turq); color: #000; }

/* Precio generado por el filtro de WooCommerce (we_*_product_price):
   en la card solo mostramos las cuotas / pago único. */
.esep-card__price br { display: none; }
.esep-card__price .custom-total-payment,
.esep-card__price .custom-price-container,
.esep-card__price .custom-cuotas-description { display: none; }
.esep-card__price .custom-cuotas-payment,
.esep-card__price .custom-single-payment { display: flex; flex-direction: column; }
.esep-card__price .custom-cuotas-text,
.esep-card__price .custom-payment-text { font-size: 16px; font-weight: 400; line-height: 1.2; }
.esep-card__price .custom-cuotas-price,
.esep-card__price .custom-payment-price { font-size: 28px; font-weight: 700; line-height: 1.15; }
@media (max-width: 768px) {
	.esep-card__price .custom-cuotas-price,
	.esep-card__price .custom-payment-price { font-size: 24px; }
}

/* =========================================================================
   BARRA DE FILTROS POR CATEGORÍA ([esep_cursos filters="yes"])
   ========================================================================= */
.esep-cursos-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}
.esep-cursos-filtros:last-of-type { margin-bottom: 24px; }
.esep-cursos-filtros__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--esep-texto, #20242B);
	margin-right: 2px;
}
.esep-cursos-filtro {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--esep-borde, #E7E9EE);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--esep-texto, #20242B);
	background: #fff;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.esep-cursos-filtro:hover { border-color: var(--esep-card-azul); color: var(--esep-card-azul); }
.esep-cursos-filtro.is-active { background: var(--esep-card-azul); border-color: var(--esep-card-azul); color: #fff; }

/* ---- Layout: filtros a la izquierda (desktop) / desplegable (mobile) ---- */
.esep-cursos-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}
.esep-cursos-aside { flex: 0 0 230px; }
.esep-cursos-main  { flex: 1 1 auto; min-width: 0; }   /* min-width:0 → la grilla puede achicarse */

/* Toggle mobile con checkbox (CSS puro, sin <details>: fiable en desktop) */
.esep-cursos-filters__cb { display: none; }
.esep-cursos-filters__toggle {
	display: none;                 /* desktop: oculto (los filtros van abiertos) */
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	padding: 12px 16px;
	border: 1px solid var(--esep-borde, #E7E9EE);
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: var(--esep-texto, #20242B);
}
.esep-cursos-filters__toggle::after {
	content: "";
	width: 9px; height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}
.esep-cursos-filters__cb:checked ~ .esep-cursos-filters__toggle::after { transform: rotate(-135deg) translateY(2px); }

/* En el sidebar / panel, los filtros van en columna (lista) */
.esep-cursos-aside .esep-cursos-filtros {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 20px;
}
.esep-cursos-aside .esep-cursos-filtros__label { display: block; margin-bottom: 4px; }
.esep-cursos-aside .esep-cursos-filtro { justify-content: flex-start; }

@media (max-width: 991px) {
	.esep-cursos-layout { display: block; }
	.esep-cursos-aside { margin-bottom: 20px; }
	.esep-cursos-filters__toggle { display: flex; }                          /* botón "Filtros" */
	.esep-cursos-filters__body { display: none; }                            /* colapsado */
	.esep-cursos-filters__cb:checked ~ .esep-cursos-filters__body { display: block; margin-top: 14px; }
}

/* ---- Botón "Ver más" ---- */
.esep-cursos-mas { display: flex; justify-content: center; margin-top: 28px; }
.esep-cursos-mas__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	border: 2px solid var(--esep-card-azul);
	border-radius: 8px;
	background: #fff;
	color: var(--esep-card-azul);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.esep-cursos-mas__btn:hover { background: var(--esep-card-azul); color: #fff; }
.esep-cursos-mas__btn.is-loading { opacity: .6; cursor: default; }

/* ---- Paginación nativa (source="current") ---- */
.esep-cursos-pager { margin-top: 28px; }
.esep-cursos-pager ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.esep-cursos-pager a,
.esep-cursos-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--esep-borde, #E7E9EE);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--esep-texto, #20242B);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.esep-cursos-pager a:hover { border-color: var(--esep-card-azul); color: var(--esep-card-azul); }
.esep-cursos-pager .current { background: var(--esep-card-azul); border-color: var(--esep-card-azul); color: #fff; }
.esep-cursos-pager .dots { border: 0; }

/* =========================================================================
   GRILLA (shortcode [esep_cursos])
   ========================================================================= */
.esep-cursos--grid {
	display: grid;
	grid-template-columns: repeat(var(--esep-cols, 4), minmax(0, 1fr));
	gap: var(--esep-card-gap);
}
@media (max-width: 1200px) { .esep-cursos--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .esep-cursos--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .esep-cursos--grid { grid-template-columns: 1fr; } }

/* =========================================================================
   GRILLA NATIVA DE WOOCOMMERCE (archivos / categorías)
   ========================================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--esep-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }   /* mata el clearfix de Woo */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;                 /* la card llena el alto de la celda → alturas parejas */
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
}
.woocommerce ul.products li.product > .esep-card { width: 100%; }
@media (max-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* =========================================================================
   CARRUSEL (shortcode [esep_cursos_carousel]) — CSS scroll-snap + flechas
   ========================================================================= */
.esep-cursos--carousel { position: relative; }
.esep-cursos__track {
	display: flex;
	gap: var(--esep-card-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 10px 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;                       /* señal de "arrastrable" en desktop */
}
.esep-cursos__track::-webkit-scrollbar { display: none; }
.esep-cursos__track.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.esep-cursos__track.is-dragging .esep-card { pointer-events: none; }   /* no navegar mientras se arrastra */
.esep-cursos__track > .esep-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: calc((100% - (var(--esep-perview, 4) - 1) * var(--esep-card-gap)) / var(--esep-perview, 4));
}
@media (max-width: 1200px) { .esep-cursos__track > .esep-card { width: calc((100% - 2 * var(--esep-card-gap)) / 3); } }
@media (max-width: 900px)  { .esep-cursos__track > .esep-card { width: calc((100% - var(--esep-card-gap)) / 2); } }
/* En mobile: una card completa por vista (sin recorte) y sin flechas (swipe + autoplay). */
@media (max-width: 560px)  {
	.esep-cursos__track > .esep-card { width: 100%; }
	.esep-cursos__nav { display: none; }
}

.esep-cursos__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px; height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* !important para anular el fondo rojo que el tema padre pone en :hover/:active */
	border: 1px solid var(--esep-borde, #E7E9EE) !important;
	border-radius: 50%;
	background: #fff !important;
	color: var(--esep-card-azul) !important;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 6px 16px rgba(20, 40, 90, .16);
	-webkit-tap-highlight-color: transparent;
	outline: none;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.esep-cursos__nav:hover,
.esep-cursos__nav:focus-visible {
	background: var(--esep-azul-claro, #EAF1FD) !important;
	color: var(--esep-card-azul) !important;
	box-shadow: 0 8px 22px rgba(20, 40, 90, .22);
}
.esep-cursos__nav:active { transform: translateY(-50%) scale(.94); }
.esep-cursos__nav--prev { left: -8px; }
.esep-cursos__nav--next { right: -8px; }
.esep-cursos__nav[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.esep-card, .esep-cursos__track, .esep-cursos__nav { transition: none; scroll-behavior: auto; }
	.esep-card:hover { transform: none; }
}