/*
 * Etiqampus — Estilos Tutor LMS Frontend Dashboard
 * Selectores verificados con el HTML real del sitio.
 * Paleta: Azul #3b38f5 · Navy #1a1750 · Coral #ee4a62 · Blanco #fff
 * Las variables CSS se inyectan desde PHP (ver etiqampus-tutor-styles.php)
 * ─────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════
   1. SIDEBAR — MENÚ DE NAVEGACIÓN
   HTML: ul.tutor-dashboard-permalinks > li.tutor-dashboard-menu-item
   ══════════════════════════════════════════════════════════════════════ */

/* Contenedor del sidebar */
.tutor-dashboard-left-menu {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 6px rgba(26, 23, 80, 0.08) !important;
    overflow: hidden;
}

/* Todos los enlaces del menú */
.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link {
    color: #41454f !important;
    display: flex !important;
    align-items: center !important;
    padding: 11px 20px !important;
    transition: background 0.15s, color 0.15s !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
}

.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link:hover {
    background: #f0f1ff !important;
    color: #3b38f5 !important;
    border-left-color: #3b38f5 !important;
}

/* Iconos del menú en estado normal */
.tutor-dashboard-permalinks .tutor-dashboard-menu-item-icon {
    color: #757c8e !important;
    transition: color 0.15s !important;
}

.tutor-dashboard-permalinks .tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon {
    color: #3b38f5 !important;
}

/* ÍTEM ACTIVO — clase .active en el <li> */
.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link {
    background: #3b38f5 !important;
    color: #ffffff !important;
    border-left-color: #1a1750 !important;
}

.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon {
    color: #ffffff !important;
}

/* tutor-color-black dentro del menú activo */
.tutor-dashboard-permalinks .tutor-dashboard-menu-item.active .tutor-color-black {
    color: #ffffff !important;
}

/* Ocultar sección INSTRUCTOR y todo lo que viene después de
   "Pregunta y respuesta" (.tutor-dashboard-menu-question-answer) */
.tutor-dashboard-menu-question-answer ~ li {
    display: none !important;
}

/* Separador horizontal */
.tutor-dashboard-menu-divider {
    border-top: 1px solid #e8eaf0 !important;
    margin: 6px 0 !important;
    list-style: none !important;
}

/* Cabecera de sección (ej: "Instructor") */
.tutor-dashboard-menu-divider-header {
    padding: 10px 20px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #757c8e !important;
    list-style: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   2. TARJETAS DE ESTADÍSTICAS (Escritorio)
   HTML: div.tutor-card > div > span.tutor-round-box + div.tutor-fs-3
   ══════════════════════════════════════════════════════════════════════ */

.tutor-card {
    border-radius: 12px !important;
    border: 1px solid #e8eaf0 !important;
    box-shadow: 0 1px 6px rgba(26, 23, 80, 0.06) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}

.tutor-card:hover {
    box-shadow: 0 4px 18px rgba(59, 56, 245, 0.11) !important;
    transform: translateY(-2px) !important;
}

/* Círculo de icono — actualmente verde/teal */
.tutor-round-box {
    background-color: #eef0fe !important;
    border-radius: 50% !important;
}

.tutor-round-box i,
.tutor-round-box [class*="tutor-icon"] {
    color: #3b38f5 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   3. BARRA DE PROGRESO
   HTML: div.tutor-progress-bar[style="--tutor-progress-value:7%"]
         > span.tutor-progress-value
   ══════════════════════════════════════════════════════════════════════ */

.tutor-progress-bar {
    background-color: #e3e5eb !important;
    border-radius: 99px !important;
    overflow: hidden !important;
}

.tutor-progress-value {
    background-color: #3b38f5 !important;
    display: block !important;
    height: 100% !important;
    width: var(--tutor-progress-value, 0%) !important;
    border-radius: 99px !important;
    transition: width 0.4s ease !important;
}

/* Porcentaje de progreso ej: "7% Completar" */
.progress-percentage .tutor-color-black {
    color: #3b38f5 !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   3b. TARJETA DE CURSO EN PROGRESO — compactar y corregir overflow
   HTML confirmado: .tutor-course-progress-item.tutor-card
   ══════════════════════════════════════════════════════════════════════ */

/* Imagen: altura fija, anula el padding-bottom del ratio */
.tutor-course-progress-item .tutor-ratio.tutor-ratio-3x2 {
    padding-bottom: 0 !important;
    height: 160px !important;
    position: relative !important;
    overflow: hidden !important;
}

.tutor-course-progress-item .tutor-card-image-left {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/*
 * CRÍTICO: min-width:0 en la columna derecha evita que un flex-item
 * ignore su flex-basis y desborde el contenedor padre.
 */
.tutor-course-progress-item .tutor-col-lg-8 {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
}

/* Card body: bloque estándar, sin flex lateral */
.tutor-course-progress-item .tutor-card-body {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
}

/* Título: una sola línea con ellipsis si es muy largo */
.tutor-course-progress-item .tutor-course-progress-item-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/*
 * "Lecciones completadas: 1 de 14 lección"
 * flex-wrap: wrap para que pase a la segunda línea si no cabe en una sola.
 */
.tutor-course-progress-item .tutor-d-flex.tutor-fs-7 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Cada span dentro del flex puede encogerse */
.tutor-course-progress-item .tutor-d-flex.tutor-fs-7 > span {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

/* Reducir márgenes excesivos */
.tutor-course-progress-item .tutor-mb-32 {
    margin-bottom: 10px !important;
}

.tutor-course-progress-item .tutor-mb-12 {
    margin-bottom: 6px !important;
}

.tutor-course-progress-item .tutor-mb-4 {
    margin-bottom: 4px !important;
}

/* Móvil: imagen encima */
@media (max-width: 767px) {
    .tutor-course-progress-item .tutor-ratio.tutor-ratio-3x2 {
        height: 200px !important;
    }
    .tutor-course-progress-item .tutor-col-lg-8 {
        max-width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   4. TARJETAS DE CURSOS EN PROGRESO
   HTML: div.tutor-course-progress-item.tutor-card
   ══════════════════════════════════════════════════════════════════════ */

.tutor-frontend-dashboard-course-progress .tutor-fs-5.tutor-fw-medium {
    color: #1a1750 !important;
    font-weight: 700 !important;
}

.tutor-course-progress-item {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.tutor-course-progress-item-title {
    color: #1a1750 !important;
    font-weight: 600 !important;
}

.tutor-course-progress-item .tutor-color-muted {
    color: #757c8e !important;
}

/* ══════════════════════════════════════════════════════════════════════
   5. ESTRELLAS DE VALORACIÓN
   HTML: div.tutor-ratings-stars > i.tutor-icon-star-bold / tutor-icon-star-line
   ══════════════════════════════════════════════════════════════════════ */

/* Ocultar estrellas SOLO dentro del dashboard (no en catálogo de cursos) */
.tutor-dashboard-content .tutor-ratings-stars,
.tutor-frontend-dashboard-course-progress .tutor-ratings-stars {
    display: none !important;
}

/* También ocultar el bloque padre .tutor-ratings si queda vacío */
.tutor-dashboard-content .tutor-ratings,
.tutor-frontend-dashboard-course-progress .tutor-ratings {
    display: none !important;
}

/* Estrellas en el resto del sitio (catálogo, detalle de curso, etc.) */
.tutor-ratings-stars .tutor-icon-star-bold {
    color: #f59e0b !important;
}

.tutor-ratings-stars .tutor-icon-star-line {
    color: #d1d5db !important;
}

.tutor-ratings-count {
    color: #41454f !important;
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ASIDE MENÚ CUENTA (etiqampus-cuenta-menu) — oculto en el dashboard
   ══════════════════════════════════════════════════════════════════════ */

/* Alerta azul del escritorio — oculta */
.tutor-alert.tutor-primary.tutor-mb-20 {
    display: none !important;
}

aside.etiqampus-cuenta-menu {
    display: none !important;
}

.etiqampus-cuenta-contenido {
    padding: 20px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   6. WIDGET "COMPLETA TU PERFIL" — oculto
   ══════════════════════════════════════════════════════════════════════ */

.tutor-profile-completion.tutor-card.tutor-px-32.tutor-py-24.tutor-mb-40 {
    display: none !important;
}

.tutor-profile-completion {
    border-radius: 12px !important;
    border: 1px solid #e8eaf0 !important;
}

.tutor-profile-completion .tutor-fs-5 {
    color: #1a1750 !important;
    font-weight: 700 !important;
}

.tutor-profile-completion .tutor-icon-circle-mark-line {
    color: #3b38f5 !important;
}

.tutor-profile-completion .tutor-icon-circle-times-line {
    color: #ee4a62 !important;
}

.tutor-profile-completion .tutor-btn-ghost {
    color: #3b38f5 !important;
}

.tutor-profile-completion .tutor-btn-ghost:hover {
    color: #1a1750 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   6b. PESTAÑAS DE NAVEGACIÓN INTERNA (enrolled-courses, my-courses, etc.)
   HTML: ul.tutor-nav > li > a.tutor-nav-link
         a.tutor-nav-more-item + ul.tutor-nav-more-list.tutor-dropdown
   ══════════════════════════════════════════════════════════════════════ */

/* Pestaña normal */
.tutor-dashboard-content .tutor-nav-link {
    color: #757c8e !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 500 !important;
    transition: color 0.15s, border-color 0.15s !important;
}

.tutor-dashboard-content .tutor-nav-link:hover {
    color: #3b38f5 !important;
    border-bottom-color: #3b38f5 !important;
}

/* Pestaña activa */
.tutor-dashboard-content .tutor-nav-link.is-active {
    color: #3b38f5 !important;
    border-bottom-color: #3b38f5 !important;
    font-weight: 700 !important;
}

/* Botón "Más ×" */
.tutor-dashboard-content .tutor-nav-more-item {
    color: #3b38f5 !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
}

.tutor-dashboard-content .tutor-nav-more-item.is-active {
    color: #3b38f5 !important;
}

/* Dropdown de "Más" */
.tutor-dashboard-content .tutor-nav-more-list.tutor-dropdown {
    border-radius: 10px !important;
    border: 1px solid #e3e5eb !important;
    box-shadow: 0 6px 20px rgba(26, 23, 80, 0.10) !important;
    overflow: hidden !important;
    padding: 4px 0 !important;
    background: #ffffff !important;
}

/* Ítems del dropdown */
.tutor-dashboard-content .tutor-nav-more-list .tutor-dropdown-item {
    color: #41454f !important;
    padding: 10px 18px !important;
    display: block !important;
    font-size: 14px !important;
    transition: background 0.12s, color 0.12s !important;
}

.tutor-dashboard-content .tutor-nav-more-list .tutor-dropdown-item:hover {
    background: #f0f1ff !important;
    color: #3b38f5 !important;
}

/* Ítem activo del dropdown */
.tutor-dashboard-content .tutor-nav-more-list .tutor-dropdown-item.is-active {
    background: #eef0fe !important;
    color: #3b38f5 !important;
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   7. BOTONES GENERALES
   ══════════════════════════════════════════════════════════════════════ */

/* Outline primary (ej: Nuevo Curso) */
.tutor-btn-outline-primary {
    color: #3b38f5 !important;
    border-color: #3b38f5 !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.tutor-btn-outline-primary:hover {
    background: #3b38f5 !important;
    color: #ffffff !important;
}

/* Ghost button (ej: Ver más, Ver todo) */
.tutor-dashboard-content .tutor-btn-ghost {
    color: #3b38f5 !important;
    font-weight: 600 !important;
}

.tutor-dashboard-content .tutor-btn-ghost:hover {
    color: #1a1750 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   8. HEADER DE PERFIL (avatar + nombre)
   ══════════════════════════════════════════════════════════════════════ */

.tutor-frontend-dashboard-header {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(26, 23, 80, 0.07) !important;
    margin-bottom: 24px !important;
}

.tutor-dashboard-header-username {
    color: #1a1750 !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   9. PÁGINA MI PERFIL — tabla
   ══════════════════════════════════════════════════════════════════════ */

.tutor-dashboard-content .tutor-my-profile th,
.tutor-dashboard-content table th {
    color: #757c8e !important;
    font-weight: 500 !important;
}

.tutor-dashboard-content .tutor-my-profile td,
.tutor-dashboard-content table td {
    color: #1a1750 !important;
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   10. TÍTULO DE SECCIÓN (ej: "Escritorio", "Cursos en curso")
   ══════════════════════════════════════════════════════════════════════ */

.tutor-dashboard-title,
.tutor-frontend-dashboard-course-progress > .tutor-color-black {
    color: #1a1750 !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   11. FOOTER MÓVIL
   ══════════════════════════════════════════════════════════════════════ */

#tutor-dashboard-footer-mobile {
    background: #ffffff !important;
    border-top: 1px solid #e3e5eb !important;
}

#tutor-dashboard-footer-mobile a {
    color: #757c8e !important;
}

#tutor-dashboard-footer-mobile a.active,
#tutor-dashboard-footer-mobile a:hover {
    color: #3b38f5 !important;
}