/* ==========================================================================
   LMS – Página de Mis Cursos (/courses/)
   Basado en el diseño provisto. Edita las variables :root para cambiar colores.
   ========================================================================== */

/* --- Variables CSS --- */
:root {
    --primary: #013159 !important;
    --primary-hover: #012240 !important;
    --primary-light: #e6eff7 !important;
    --bg-body: #f8fafc !important;
    --bg-card: #ffffff !important;
    --text-dark: #0f172a !important;
    --text-muted: #64748b !important;
    --border: #e2e8f0 !important;
    --success: #7eb23b !important;
    --radius-md: 12px !important;
    --radius-lg: 20px !important;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1) !important;
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025) !important;
    --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    --transition: all 0.3s ease !important;
    --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* --- Reset y Base --- */
body.post-type-archive-sfwd-courses {
    font-family: var(--font-main) !important;
    background-color: var(--bg-body) !important;
    color: var(--text-dark) !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.post-type-archive-sfwd-courses #page,
body.post-type-archive-sfwd-courses .site,
body.post-type-archive-sfwd-courses .site-content,
body.post-type-archive-sfwd-courses .wp-site-blocks,
body.post-type-archive-sfwd-courses .site-main,
body.post-type-archive-sfwd-courses .content-area,
body.post-type-archive-sfwd-courses .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
}

body.post-type-archive-sfwd-courses h1,
body.post-type-archive-sfwd-courses h2,
body.post-type-archive-sfwd-courses h3,
body.post-type-archive-sfwd-courses p {
    margin-top: 0 !important;
}

body.post-type-archive-sfwd-courses a { text-decoration: none !important; color: inherit !important; }
body.post-type-archive-sfwd-courses ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
body.post-type-archive-sfwd-courses button { cursor: pointer !important; font-family: inherit !important; border: none !important; background: none !important; }

/* Ocultar elementos genéricos del tema que no necesitamos */
body.post-type-archive-sfwd-courses #wpadminbar,
body.post-type-archive-sfwd-courses .site-header,
body.post-type-archive-sfwd-courses .site-footer,
body.post-type-archive-sfwd-courses header.wp-block-template-part,
body.post-type-archive-sfwd-courses footer.wp-block-template-part {
    display: none !important;
}

body.post-type-archive-sfwd-courses .learndash-wrapper,
body.post-type-archive-sfwd-courses .learndash,
body.post-type-archive-sfwd-courses .ld-course-grid,
body.post-type-archive-sfwd-courses .ld-container,
body.post-type-archive-sfwd-courses .ld-content {
    display: none !important;
}

/* --- Navegación --- */
.lms-navbar {
    background-color: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1rem 2rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.lms-nav-brand {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
}

.lms-nav-brand svg {
    width: 20px !important;
    height: 20px !important;
}

/* Soporte para Logotipo de WordPress */
.lms-nav-logo-wrapper {
    display: flex !important;
    align-items: center !important;
}
.lms-nav-logo-wrapper .custom-logo-link {
    display: block !important;
    line-height: 0 !important;
}
.lms-nav-logo-wrapper img.custom-logo {
    max-height: 34px !important;
    width: auto !important;
    display: block !important;
}

.lms-nav-links {
    display: flex !important;
    gap: 2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lms-nav-links a {
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    transition: var(--transition) !important;
}

.lms-nav-links a:hover,
.lms-nav-links a.active {
    color: var(--primary) !important;
}

.lms-nav-profile {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.lms-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border: 2px solid var(--bg-card) !important;
    box-shadow: 0 0 0 2px var(--border) !important;
    text-transform: uppercase !important;
}

/* --- Contenedor Principal --- */
.lms-courses-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 3rem 2rem 2rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* --- Cabecera de la página --- */
.lms-page-header {
    margin-bottom: 2.5rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.lms-greeting h1 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.025em !important;
    color: var(--text-dark) !important;
}

.lms-greeting p {
    color: var(--text-muted) !important;
    font-size: 1.05rem !important;
}

/* --- Filtros / Tabs --- */
.lms-filters {
    display: flex !important;
    gap: 0.5rem !important;
    background: var(--bg-card) !important;
    padding: 0.5rem !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    flex-wrap: nowrap !important;
    min-width: 280px !important;
}

.lms-filter-btn {
    padding: 0.5rem 1.25rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
    border: none !important;
    background: none !important;
    font-family: var(--font-main) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
}

.lms-filter-btn:hover {
    background-color: var(--bg-body) !important;
    color: var(--text-dark) !important;
}

.lms-filter-btn.active {
    background-color: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(1, 49, 89, 0.3) !important;
}

.lms-filter-btn:not(.active) {
    color: #7e8ea5 !important;
}

/* --- Grid de Cursos --- */
.lms-course-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.75rem !important;
}

@media (max-width: 1100px) {
    .lms-course-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 720px) {
    body.post-type-archive-sfwd-courses {
        background: linear-gradient(180deg, #eff4f8 0%, #f8fafc 100%) !important;
    }

    .lms-navbar {
        padding: 1rem !important;
    }

    .lms-courses-container {
        padding: 1rem !important;
    }

    .lms-page-header {
        align-items: flex-start !important;
    }

    .lms-greeting h1 {
        font-size: 1.8rem !important;
    }

    .lms-course-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

/* Mensaje sin cursos */
.lms-no-courses {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 4rem 2rem !important;
    color: var(--text-muted) !important;
}

.lms-no-courses h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    color: var(--text-dark) !important;
}

/* --- Tarjeta de Curso --- */
.lms-course-card {
    background-color: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition) !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    min-height: 470px !important;
}

.lms-course-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--primary-light) !important;
    color: inherit !important;
}

.lms-course-image {
    width: 100% !important;
    height: 205px !important;
    object-fit: cover !important;
    display: block !important;
    background-color: var(--border) !important;
}

/* Gradientes de fallback para las imágenes */
.lms-course-image.img-gradient-0 { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%) !important; }
.lms-course-image.img-gradient-1 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important; }
.lms-course-image.img-gradient-2 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%) !important; }
.lms-course-image.img-gradient-3 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important; }
.lms-course-image.img-gradient-4 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; }
.lms-course-image.img-gradient-5 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; }
.lms-course-image.img-gradient-6 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important; }
.lms-course-image.img-gradient-7 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important; }

.lms-course-content {
    padding: 1.3rem 1.5rem 1.2rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.lms-course-tag {
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 0.5rem !important;
}

.lms-course-content .lms-course-title,
body.post-type-archive-sfwd-courses .lms-course-content h2.lms-course-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin: 0 0 1rem 0 !important;
    color: var(--text-dark) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    min-height: 3.2em !important;
}

/* --- Progreso --- */
.lms-progress-wrapper {
    margin-top: auto !important;
    margin-bottom: 1.5rem !important;
}

.lms-progress-info {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
    margin-bottom: 0.5rem !important;
    font-weight: 500 !important;
}

.lms-progress-bar-bg {
    width: 100% !important;
    height: 8px !important;
    background-color: var(--bg-body) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
}

.lms-progress-bar-fill {
    height: 100% !important;
    background-color: var(--primary) !important;
    border-radius: 999px !important;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lms-progress-bar-fill.completed {
    background-color: var(--success) !important;
}

/* --- Footer de la Tarjeta --- */
.lms-course-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--border) !important;
    margin-top: auto !important;
}

.lms-lessons-count {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
}

.lms-btn-continue {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    padding: 0.7rem 1.15rem !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    border: none !important;
    text-decoration: none !important;
    font-family: var(--font-main) !important;
}

.lms-btn-continue:hover {
    background-color: var(--primary) !important;
    color: white !important;
}

.lms-btn-continue.completed {
    background-color: rgba(126, 178, 59, 0.1) !important;
    color: var(--success) !important;
}

.lms-course-footer .lms-btn-continue {
    min-width: 124px !important;
    justify-content: center !important;
}

.lms-btn-continue.completed:hover {
    background-color: var(--success) !important;
    color: white !important;
}

/* Estado oculto para filtrado JS */
.lms-course-card[data-status="en-progreso"],
.lms-course-card[data-status="completado"],
.lms-course-card[data-status="sin-empezar"] {
    display: flex !important;
}

.lms-course-card.hidden {
    display: none !important;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .lms-course-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .lms-navbar { padding: 1rem !important; }
    .lms-nav-links { display: none !important; }
    .lms-nav-logo-wrapper img.custom-logo { max-height: 28px !important; }
    .lms-courses-container { padding: 1.25rem 1rem 1rem !important; }
    .lms-page-header { flex-direction: column !important; align-items: flex-start !important; }
    .lms-filters { width: 100% !important; overflow-x: auto !important; }
    .lms-filter-btn { white-space: nowrap !important; font-size: 0.82rem !important; padding: 0.5rem 1rem !important; }
    .lms-greeting h1 { font-size: 2rem !important; }
    .lms-course-grid {
        grid-template-columns: 1fr !important;
    }
}