/* KPEE Courses Widget v2.8.0 — card-fix movido del inline a esta hoja (skin card incluido) + center-row tablet + img-bottom real + cap cols-1 + placeholder thumbnail */
/* Forzar herencia de fuente del tema (Tutor LMS hardcodea Helvetica que pisa al tema) */
.kpee-courses,.kpee-courses *:not(.tutor-icon-clock-line):not(.tutor-icon-book-line):not(.tutor-icon-layer):not([class*="tutor-icon-"]){font-family:inherit!important}
/* Paginacion: usa color del tema Astra/Elementor por defecto (no negro hardcoded) */
.kpee-pagination,.kpee-pagination *{color:var(--e-global-color-primary,var(--ast-global-color-0,inherit))}
.kpee-pagination--numbered a,.kpee-pagination--numbered span{border-color:var(--e-global-color-primary,var(--ast-global-color-0,currentColor))}
.kpee-pagination--numbered a:hover,.kpee-pagination--numbered .current,.kpee-pagination--numbered span.current,.kpee-pagination--numbered .page-numbers.current{background:var(--e-global-color-primary,var(--ast-global-color-0,#0C2134))!important;color:#fff!important;border-color:var(--e-global-color-primary,var(--ast-global-color-0,#0C2134))!important;opacity:1!important;visibility:visible!important}
.kpee-pagination__link{border-color:var(--e-global-color-primary,var(--ast-global-color-0,currentColor));color:var(--e-global-color-primary,var(--ast-global-color-0,inherit))}
.kpee-pagination__link:hover{background:var(--e-global-color-primary,var(--ast-global-color-0,currentColor));color:#fff}
.kpee-pagination__load-more-btn{background:var(--e-global-color-primary,var(--ast-global-color-0,currentColor));color:#fff}
/* Bundles deben verse igual que cursos (mismo tamano titulo, mismo layout) */
.kpee-courses .tutor-course-card[data-course-id] .tutor-course-name,
.kpee-courses .tutor-course-card[data-course-id] h3{font-size:inherit;font-weight:600;line-height:1.3}
.kpee-courses .tutor-card-body{padding:20px}
.kpee-courses .tutor-card-footer{padding:16px 20px;border-top:1px solid rgba(0,0,0,.08)}
.kpee-courses .tutor-course-loop-price{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.kpee-courses .tutor-course-loop-price>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kpee-courses .tutor-course-loop-price .price{font-size:1.1em;font-weight:700}
.kpee-courses .tutor-loop-cart-btn-wrap,.kpee-courses .list-item-button{margin-left:auto}
.kpee-courses .tutor-btn{font-family:inherit;white-space:nowrap}

.kpee-courses{--kpee-gap:24px;font-family:inherit}
.kpee-courses *,.kpee-courses .tutor-course-card,.kpee-courses .tutor-card,.kpee-courses .tutor-card *{font-family:inherit}
.kpee-courses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kpee-gap)}
.kpee-courses-single{max-width:600px;margin:0 auto}
/* v2.8.0: la version column-reverse invertia tambien body/footer y ademas moria por cascada — reemplazada por order:99 al thumbnail (ver bloque v2.8.0 abajo). */
/* Layout containers */
.kpee-courses .tutor-card{display:flex;flex-direction:column;height:100%}
.kpee-courses .tutor-card-body{flex:1}
/* Hover animation suave (Tutor ya tiene etlms-has-hover-animation) */
.kpee-courses--hover-anim .tutor-card{transition:transform .25s ease,box-shadow .25s ease}
.kpee-courses--hover-anim .tutor-card:hover{transform:translateY(-3px)}
/* Paginacion clasica (numerada) — usa los colores del tema via inherit */
.kpee-pagination{margin-top:32px}
.kpee-pagination--numbered{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.kpee-pagination--numbered a,.kpee-pagination--numbered span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid currentColor;color:inherit;text-decoration:none;font-size:14px;font-weight:500;background:transparent;transition:background .15s ease,color .15s ease;font-family:inherit}
.kpee-pagination--numbered a:hover{background:currentColor}
.kpee-pagination--numbered a:hover *{color:#fff}
.kpee-pagination--numbered .current,.kpee-pagination--numbered .page-numbers.current{background:var(--e-global-color-primary,var(--ast-global-color-0,#0C2134))!important;color:#fff!important;border-color:var(--e-global-color-primary,var(--ast-global-color-0,#0C2134))!important}
.kpee-pagination--numbered .dots{border:none;background:transparent}
/* Prev/Next */
.kpee-pagination--prev-next{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:20px 0;border-top:1px solid rgba(0,0,0,.1);font-family:inherit}
.kpee-pagination__counter{font-size:14px;opacity:.7}
.kpee-pagination__nav{display:flex;gap:12px;flex-wrap:wrap}
.kpee-pagination__link{padding:10px 20px;border:1px solid currentColor;color:inherit;text-decoration:none;font-size:14px;font-weight:500;background:transparent;transition:all .15s ease;font-family:inherit}
.kpee-pagination__link:hover{background:currentColor;color:#fff}
.kpee-pagination__link--disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
/* Load more */
.kpee-pagination--load-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:32px}
.kpee-pagination__load-more-btn{padding:14px 40px;background:currentColor;color:#fff;border:none;font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:opacity .2s ease;font-family:inherit}
.kpee-pagination__load-more-btn:hover{opacity:.85}
.kpee-pagination__load-more-btn:disabled{opacity:.6;cursor:not-allowed}
.kpee-pagination--load-more.kpee-no-more .kpee-pagination__load-more-btn{display:none}
/* Carousel — Swiper overrides minimos */
.kpee-courses-swiper{position:relative;padding:8px 0 40px}
.kpee-courses-swiper .swiper-slide{height:auto;display:flex}
.kpee-courses-swiper .swiper-slide>.tutor-card{width:100%}
.kpee-swiper-prev,.kpee-swiper-next{color:inherit!important;width:40px!important;height:40px!important;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .2s ease}
.kpee-swiper-prev:hover,.kpee-swiper-next:hover{background:currentColor;color:#fff!important}
.kpee-swiper-prev::after,.kpee-swiper-next::after{font-size:16px!important;font-weight:700}
.kpee-swiper-dots{position:relative;margin-top:16px}
.kpee-swiper-dots .swiper-pagination-bullet{background:currentColor;opacity:.3;width:10px;height:10px;transition:all .2s ease}
.kpee-swiper-dots .swiper-pagination-bullet-active{opacity:1;width:24px;border-radius:5px}
/* Fade-in para refresh dinamico */
.tutor-card.kpee-fade-in,.kpee-course-card.kpee-fade-in{animation:kpeeFadeIn .5s ease forwards}
@keyframes kpeeFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Empty state */
.kpee-courses-empty{padding:40px;text-align:center;opacity:.7;background:rgba(0,0,0,.02);border:1px dashed rgba(0,0,0,.15);font-family:inherit}
/* Responsive */
@media(max-width:1024px){.kpee-courses-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:640px){.kpee-courses-grid{grid-template-columns:1fr;gap:16px}.kpee-pagination--numbered a,.kpee-pagination--numbered span{min-width:36px;height:36px;font-size:13px;padding:0 10px}.kpee-pagination--prev-next{flex-direction:column;text-align:center}.kpee-pagination__nav{width:100%;justify-content:center}.kpee-pagination__link{flex:1;text-align:center;padding:12px 16px;font-size:13px}.kpee-pagination__load-more-btn{width:100%;padding:14px 24px}.kpee-courses-swiper{padding-bottom:32px}.kpee-swiper-prev,.kpee-swiper-next{display:none!important}}
/* v2.7.8 — centrar fila incompleta (menos cursos que columnas) solo en desktop. grid-auto-flow:column genera las columnas reales automaticamente; ancho = el del grid lleno; !important para ganar a Elementor/Tutor. No afecta el grid completo (solo aplica con la clase center-row). */
@media(min-width:1025px){.kpee-courses.kpee-courses--center-row .kpee-courses-grid{grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:calc((100% - (var(--kpee-fill-cols,3) - 1) * var(--kpee-gap-x,24px)) / var(--kpee-fill-cols,3))!important;justify-content:center!important}}
/* v2.8.0 — center-row tambien en tablet (641-1024px): antes 1 solo curso quedaba a media pantalla pegado a la izquierda (la clase solo aplicaba en desktop). En tablet el grid lleno es de 2 columnas. */
@media(min-width:641px) and (max-width:1024px){.kpee-courses.kpee-courses--center-row .kpee-courses-grid{grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:calc((100% - var(--kpee-gap-x,24px)) / 2)!important;justify-content:center!important}}
/* v2.8.0 — Card-fix (antes <style id=kpee-course-card-fix> inline dentro del grid: se duplicaba en cada payload AJAX con ids repetidos y el skin card nunca lo recibia). Badge "Paquete de N Cursos" sobre la imagen arriba-izq sin tapar/cortar. */
.kpee-course-card .tutor-course-thumbnail{position:relative}
.kpee-course-card .tutor-bundle-course-count-badge{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(12,33,52,.85);color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;line-height:1;white-space:nowrap;margin:0}
.kpee-course-card .tutor-bundle-course-count-badge .tutor-icon-layer{font-size:13px}
/* Precio viejo tachado del paquete: gris, un pelo menor, tachado. Hereda fuente del .price. */
.kpee-course-card .price .kpee-price-old{color:#9aa3ab;font-size:.85em;font-weight:400;text-decoration:line-through;margin-left:6px}
.kpee-course-card .price .kpee-price-old .woocommerce-Price-amount{color:#9aa3ab}
/* Body flex columna + ultimo meta pegado abajo: cursos y paquetes alinean igual. */
.kpee-course-card .tutor-card-body{display:flex;flex-direction:column}
.kpee-course-card .tutor-card-body .tutor-meta:last-of-type,.kpee-course-card__meta--info{margin-top:auto}
/* v2.8.0 — el meta autor trae tutor-mt-auto de Tutor: si le sigue el meta de duracion, ambos con margin-top:auto repartian el espacio 50/50 y el autor flotaba a media altura. El autor solo hereda auto cuando ES el ultimo meta (regla de arriba, mayor especificidad). */
.kpee-course-card .tutor-card-body .kpee-course-card__meta--author{margin-top:0}
/* v2.8.0 — thumbnail placeholder (curso sin imagen destacada): mantiene el box 16:9 para que el grid no quede desigual. */
.kpee-course-card .kpee-thumb-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,rgba(12,33,52,.08),rgba(12,33,52,.16))}
/* v2.8.0 — 'Posicion de la imagen: Abajo' estaba muerta por cascada (.kpee-courses .tutor-card{flex-direction:column} se declaraba despues y ganaba) y column-reverse ademas invertia body/footer. order:99 manda SOLO el thumbnail al fondo. */
.kpee-courses.kpee-courses--img-bottom .tutor-card{flex-direction:column}
.kpee-courses.kpee-courses--img-bottom .tutor-card .tutor-course-thumbnail{order:99}
/* v2.8.0 — grid a 1 columna: cap de ancho para que la card no quede gigante a ancho completo (mismo criterio que .kpee-courses-single). */
.kpee-courses--cols-1 .kpee-courses-grid{max-width:600px;margin-left:auto;margin-right:auto}
/* v2.8.0 — boton en cards angostas: permitir wrap del texto en mobile (nowrap desbordaba horizontal). */
@media(max-width:640px){.kpee-courses .tutor-btn{white-space:normal}}