/**
 * CEUSJIC - Dashboard TutorLMS — Rediseño Moderno Institucional v2
 * Centro de Estudios Universitarios "Sor Juana Inés de la Cruz"
 */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --c-navy:        #1C2B4A;
  --c-navy-dark:   #111C31;
  --c-navy-mid:    #243659;
  --c-accent:      #2563EB;   /* Azul vibrante para acentos activos */
  --c-white:       #FFFFFF;
  --c-bg:          #F0F2F7;
  --c-surface:     #FFFFFF;
  --c-border:      #E2E6F0;
  --c-muted:       #8896B3;
  --c-text:        #1A2540;
  --c-text-light:  #4A5878;
  --c-radius-sm:   4px;
  --c-radius:      8px;
  --c-radius-lg:   12px;
  --c-shadow-sm:   0 1px 4px rgba(28,43,74,0.06);
  --c-shadow:      0 2px 12px rgba(28,43,74,0.08);
  --c-shadow-lg:   0 8px 32px rgba(28,43,74,0.12);
}

/* ============================================================
   BOTÓN DASHBOARD + BARRA DE PROGRESO — LECCIÓN TUTOR LMS
   ============================================================ */

/* Igual que .tutor-iconic-btn de TutorLMS: transparente, blanco */
#ceusjic-dashboard-btn,
a#ceusjic-dashboard-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 8px !important;
  height: 36px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.9) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  /* Separador derecho sutil */
  border-right: 1px solid rgba(255,255,255,0.2) !important;
  padding-right: 12px !important;
  margin-right: 4px !important;
}

#ceusjic-dashboard-btn:hover,
a#ceusjic-dashboard-btn:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
  text-decoration: none !important;
}

#ceusjic-dashboard-btn svg {
  opacity: 0.75;
}

/* Barra de progreso — línea delgada bajo el header */
#ceusjic-progress-strip {
  height: 12px;
  background: rgba(0,0,0,0.08);
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

#ceusjic-progress-strip-fill {
  height: 100%;
  background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
  transition: width 1s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: visible;
  border-radius: 0 2px 2px 0 !important;
}

/* Punto pulsante en el extremo derecho */
#ceusjic-progress-strip-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: ceusjic-pulse-dot 1.5s ease-in-out infinite;
}

@keyframes ceusjic-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); }
  60%  { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ============================================================
   BASE
   ============================================================ */
.tutor-frontend-dashboard,
.tutor-wrap.tutor-dashboard {
  background-color: var(--c-bg) !important;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
}

.tutor-container { max-width: 1200px; }
.ast-container   { max-width: 1420px; }

/* ============================================================
   HEADER DEL USUARIO
   ============================================================ */
.tutor-frontend-dashboard-header {
  background: var(--c-navy) !important;
  border-radius: var(--c-radius-lg) !important;
  padding: 24px 32px !important;
  margin-bottom: 24px;
  box-shadow: var(--c-shadow-lg);
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Decoración geométrica sutil en el header */
.tutor-frontend-dashboard-header::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.tutor-frontend-dashboard-header::before {
  content: '';
  position: absolute;
  right: 60px;
  bottom: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}

/* Avatar */
.tutor-frontend-dashboard-header .tutor-avatar,
.tutor-frontend-dashboard-header .tutor-dashboard-header-avatar img {
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
}

.tutor-frontend-dashboard-header .tutor-avatar-letter {
  background: var(--c-accent) !important;
  color: var(--c-white) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Nombre */
.tutor-dashboard-header-username,
.tutor-frontend-dashboard-header .tutor-fw-medium {
  color: var(--c-white) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1.15rem !important;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Saludo */
.tutor-dashboard-header-greetings {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Inter', Arial, sans-serif;
}

/* Ocultar estrellas — no es plataforma comercial */
.tutor-dashboard-header-ratings,
.tutor-dashboard-header-stats { display: none !important; }

/* Botón Nueva Materia */
.tutor-frontend-dashboard-header .tutor-btn-outline-primary,
.tutor-frontend-dashboard-header .tutor-btn {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: var(--c-white) !important;
  border-radius: var(--c-radius-sm) !important;
  font-size: 0.78rem !important;
  font-family: 'Inter', Arial, sans-serif;
  letter-spacing: 0.5px;
  padding: 8px 18px !important;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.tutor-frontend-dashboard-header .tutor-btn-outline-primary:hover,
.tutor-frontend-dashboard-header .tutor-btn:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* ============================================================
   MENÚ LATERAL
   ============================================================ */
.tutor-dashboard-left-menu {
  background: var(--c-surface);
  border-radius: var(--c-radius-lg) !important;
  box-shadow: var(--c-shadow-sm);
  padding: 8px 0 !important;
  overflow: hidden;
  border: 1px solid var(--c-border);
  align-self: flex-start;
}

.tutor-dashboard-permalinks {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.tutor-dashboard-menu-divider {
  border-top: 1px solid var(--c-border) !important;
  margin: 4px 8px !important;
}

.tutor-dashboard-menu-divider-header {
  padding: 12px 16px 4px !important;
  color: var(--c-muted) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
}

/* Items */
.tutor-dashboard-menu-item a,
.tutor-dashboard-menu-item-link {
  color: var(--c-text-light) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.85rem !important;
  padding: 9px 16px !important;
  margin: 1px 8px !important;
  border-radius: var(--c-radius-sm) !important;
  display: flex !important;
  align-items: center;
  transition: all 0.15s ease;
  text-decoration: none !important;
  border-left: none !important;
}

.tutor-dashboard-menu-item a:hover,
.tutor-dashboard-menu-item-link:hover {
  background: var(--c-bg) !important;
  color: var(--c-navy) !important;
}

.tutor-dashboard-menu-item.active a,
.tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link {
  background: #EEF3FC !important;
  color: var(--c-accent) !important;
  font-weight: 600;
  border-left: none !important;
}

.tutor-dashboard-menu-item-icon,
.tutor-dashboard-menu-item a i,
.tutor-dashboard-menu-item-link span[class*="tutor-icon"] {
  color: var(--c-muted) !important;
  font-size: 1rem !important;
  margin-right: 10px;
  width: 18px;
  text-align: center;
}

.tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon,
.tutor-dashboard-menu-item.active i {
  color: var(--c-accent) !important;
}

/* ============================================================
   TÍTULO DE SECCIÓN
   ============================================================ */
.tutor-dashboard-title {
  color: var(--c-text) !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: -0.2px;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 20px !important;
}

.tutor-dashboard-title::before { display: none; }

/* ============================================================
   TARJETAS DE ESTADÍSTICAS
   ============================================================ */
.tutor-dashboard-content-inner .tutor-card,
.tutor-dashboard-content .tutor-card {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius-lg) !important;
  box-shadow: var(--c-shadow-sm) !important;
  background: var(--c-surface) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border-top: none !important;
}

.tutor-dashboard-content-inner .tutor-card:hover {
  box-shadow: var(--c-shadow) !important;
  transform: translateY(-2px);
}

/* Icono circular */
.tutor-round-box {
  background: #EEF3FC !important;
  color: var(--c-accent) !important;
  border-radius: 10px !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tutor-round-box i,
.tutor-round-box [class*="tutor-icon"] {
  color: var(--c-accent) !important;
  font-size: 1.2rem !important;
}

/* Número */
.tutor-dashboard-content-inner .tutor-fs-3 {
  color: var(--c-text) !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 1.9rem !important;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Label */
.tutor-dashboard-content-inner .tutor-fs-7.tutor-color-secondary,
.tutor-dashboard-content-inner .tutor-color-secondary {
  color: var(--c-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: 'Inter', Arial, sans-serif;
}

/* Ocultar ganancias */
.tutor-dashboard-content-inner .tutor-col-xl-4:has(.tutor-icon-coins) {
  display: none !important;
}

/* ============================================================
   ÁREA PRINCIPAL
   ============================================================ */
.tutor-col-12.tutor-col-md-8.tutor-col-lg-9 {
  padding-left: 20px !important;
}

.tutor-dashboard-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ============================================================
   TABLA DE CURSOS
   ============================================================ */
.popular-courses-heading-dashboard {
  margin-top: 28px !important;
}

.popular-courses-heading-dashboard span.tutor-fs-5 {
  color: var(--c-text) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.95rem !important;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.popular-courses-heading-dashboard a.tutor-btn-ghost {
  color: var(--c-muted) !important;
  font-size: 0.78rem !important;
  font-family: 'Inter', Arial, sans-serif;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-sm);
  padding: 4px 12px;
  transition: all 0.15s;
}

.popular-courses-heading-dashboard a.tutor-btn-ghost:hover {
  border-color: var(--c-accent);
  color: var(--c-accent) !important;
  background: #EEF3FC;
}

.tutor-table-responsive {
  border-radius: var(--c-radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: none !important;
}

table.tutor-table {
  background: var(--c-surface);
  border-collapse: collapse;
  width: 100%;
}

table.tutor-table thead tr {
  background: var(--c-bg) !important;
}

table.tutor-table thead th {
  color: var(--c-muted) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 16px !important;
  font-weight: 600;
  border-bottom: 1px solid var(--c-border) !important;
  border-top: none !important;
}

table.tutor-table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--c-border) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--c-text);
  vertical-align: middle;
}

table.tutor-table tbody tr:last-child td {
  border-bottom: none !important;
}

table.tutor-table tbody tr:hover {
  background: var(--c-bg) !important;
}

table.tutor-table tbody td a {
  color: var(--c-navy) !important;
  font-weight: 500;
  text-decoration: none;
}

table.tutor-table tbody td a:hover {
  color: var(--c-accent) !important;
}

/* Ocultar Rating */
table.table-popular-courses thead th:last-child,
table.table-popular-courses tbody td:last-child { display: none !important; }

/* ============================================================
   CURSOS EN PROGRESO
   ============================================================ */
.tutor-frontend-dashboard-course-progress .tutor-fs-5 {
  color: var(--c-text) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.95rem !important;
  font-weight: 700;
  margin-bottom: 16px !important;
}

.tutor-course-progress-item {
  border: 1px solid var(--c-border) !important;
  border-left: none !important;
  border-radius: var(--c-radius-lg) !important;
  box-shadow: var(--c-shadow-sm) !important;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.tutor-course-progress-item:hover {
  box-shadow: var(--c-shadow) !important;
}

.tutor-course-progress-item-title {
  color: var(--c-text) !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  line-height: 1.4;
}

/* Barra */
.tutor-progress-bar {
  background: var(--c-border) !important;
  border-radius: 10px;
  height: 6px !important;
}

.tutor-progress-value {
  background: var(--c-accent) !important;
  border-radius: 10px;
}

.progress-percentage .tutor-fw-medium {
  color: var(--c-text) !important;
}

.tutor-course-progress-item .tutor-ratings { display: none !important; }

/* ============================================================
   PERFIL DE COMPLETADO
   ============================================================ */
.tutor-profile-completion {
  border: 1px solid var(--c-border) !important;
  border-top: 3px solid var(--c-accent) !important;
  border-radius: var(--c-radius-lg) !important;
  box-shadow: var(--c-shadow-sm) !important;
  background: var(--c-surface) !important;
}

.tutor-profile-completion .tutor-progress-value {
  background: var(--c-accent) !important;
}

.tutor-profile-completion .tutor-round-box {
  background: #EEF3FC !important;
}

.tutor-profile-completion .tutor-round-box i {
  color: var(--c-accent) !important;
}

/* ============================================================
   BOTONES
   ============================================================ */
.tutor-btn-primary {
  background-color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  border-radius: var(--c-radius-sm) !important;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.85rem !important;
}

.tutor-btn-primary:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: white !important;
}

.tutor-btn-outline-primary {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  border-radius: var(--c-radius-sm) !important;
}

.tutor-btn-outline-primary:hover {
  background-color: var(--c-accent) !important;
  color: var(--c-white) !important;
}

/* ============================================================
   BANNER DE BIENVENIDA (desde tutor-customizations.php)
   ============================================================ */
.ceusjic-welcome-banner {
  background: var(--c-navy);
  border-radius: var(--c-radius-lg);
  padding: 20px 28px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ceusjic-welcome-institution {
  color: rgba(255,255,255,0.5);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Inter', Arial, sans-serif;
  margin-bottom: 4px;
}

.ceusjic-welcome-name {
  color: var(--c-white);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.ceusjic-welcome-role {
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.75rem;
  margin-top: 2px;
}

.ceusjic-welcome-date {
  color: rgba(255,255,255,0.4);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.75rem;
  text-align: right;
}

/* ============================================================
   MIS MATERIAS — tarjeta footer
   ============================================================ */

/* Botón Editar en tarjeta de materia */
.ceusjic-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
  padding: 4px 0;
}

.ceusjic-edit-btn i {
  font-size: 0.85rem;
  color: var(--c-muted);
  transition: color 0.15s ease;
}

.ceusjic-edit-btn:hover,
.ceusjic-edit-btn:hover i {
  color: var(--c-accent) !important;
}

/* ============================================================
   FOOTER MÓVIL
   ============================================================ */
#tutor-dashboard-footer-mobile {
  background: var(--c-navy) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

#tutor-dashboard-footer-mobile a { color: rgba(255,255,255,0.4) !important; }
#tutor-dashboard-footer-mobile a.active,
#tutor-dashboard-footer-mobile a:hover { color: var(--c-white) !important; }

/* ============================================================
   ALERTAS
   ============================================================ */
.tutor-alert.tutor-primary {
  background: #EEF3FC !important;
  border-color: var(--c-accent) !important;
  color: var(--c-navy) !important;
  border-radius: var(--c-radius) !important;
}

.tutor-alert.tutor-primary .tutor-alert-icon { color: var(--c-accent) !important; }
.tutor-alert.tutor-primary .tutor-btn {
  background: var(--c-accent) !important;
  color: var(--c-white) !important;
  border: none !important;
}

/* ============================================================
   STICKY SIDEBAR
   ============================================================ */
@media (min-width: 768px) {
  .tutor-dashboard-left-menu {
    position: sticky;
    top: 20px;
  }
}

/* ============================================================
   TIPOGRAFÍA GENERAL
   ============================================================ */
.tutor-frontend-dashboard h1,
.tutor-frontend-dashboard h2,
.tutor-frontend-dashboard h3,
.tutor-frontend-dashboard h4,
.tutor-frontend-dashboard h5 {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--c-text);
  font-weight: 700;
}

.tutor-frontend-dashboard p,
.tutor-frontend-dashboard span,
.tutor-frontend-dashboard a,
.tutor-frontend-dashboard li {
  font-family: 'Inter', Arial, sans-serif;
}

.tutor-color-black { color: var(--c-text) !important; }
.tutor-color-muted { color: var(--c-muted) !important; }