/* ==========================================================================
   TUTOR LMS DASHBOARD & PERFIL — BESPOKE ED ROYAL BLUE LUXURY UX/UI
   ========================================================================== */

/* Fondo general respirable */
.tutor-wrap.tutor-dashboard {
  background-color: #F8FAFC !important;
  max-width: 80rem !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* 1. Header de Bienvenida & Topbar Ejecutivo */
.tutor-dashboard-header,
.ed-dashboard-topbar {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.25rem !important;
  padding: 1.25rem 2rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 4px 20px -2px rgba(0, 36, 154, 0.04) !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  position: static !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.tutor-dashboard-header-inner,
.ed-topbar-inner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "greeting actions"
    "meta     actions" !important;
  align-items: center !important;
  row-gap: 0.35rem !important;
  column-gap: 1.5rem !important;
  box-sizing: border-box !important;
  height: auto !important;
}

/* Left Greeting & Meta */
.ed-topbar-user-greeting {
  grid-area: greeting !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  min-width: 0 !important;
}

.ed-greeting-salute {
  font-weight: 500 !important;
  color: #64748B !important;
  font-size: 1.125rem !important;
  line-height: 1.2 !important;
}

.ed-greeting-name {
  font-weight: 800 !important;
  color: #00249A !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
}

.ed-badge-role {
  background: rgba(0, 36, 154, 0.08) !important;
  color: #00249A !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 9999px !important;
  font-size: 0.725rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border: 1px solid rgba(0, 36, 154, 0.16) !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.ed-badge-sm {
  font-size: 0.675rem !important;
  padding: 0.15rem 0.5rem !important;
  margin-top: 0.25rem !important;
}

.ed-topbar-meta {
  grid-area: meta !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  font-size: 0.8125rem !important;
  color: #64748B !important;
  min-width: 0 !important;
}

.ed-meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 0.375rem !important;
  color: #475569 !important;
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
}

.ed-meta-pill strong {
  color: #00249A !important;
  font-weight: 700 !important;
}

.ed-meta-icon {
  width: 14px !important;
  height: 14px !important;
  color: #00249A !important;
  flex-shrink: 0 !important;
}

.ed-meta-divider {
  color: #CBD5E1 !important;
  font-size: 0.75rem !important;
}

/* Right Actions & Popover */
.tutor-dashboard-header-right,
.ed-topbar-right {
  grid-area: actions !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex-shrink: 0 !important;
  justify-self: end !important;
  align-self: center !important;
}

.ed-topbar-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.55rem 1rem !important;
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 0.625rem !important;
  color: #00249A !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.ed-topbar-action-btn:hover {
  background: #00249A !important;
  color: #FFFFFF !important;
  border-color: #00249A !important;
  box-shadow: 0 4px 12px -2px rgba(0, 36, 154, 0.25) !important;
  transform: translateY(-1px) !important;
}

.ed-topbar-action-btn:hover .ed-btn-icon {
  color: #FFFFFF !important;
}

.ed-btn-icon {
  width: 16px !important;
  height: 16px !important;
  color: #00249A !important;
  transition: color 0.2s ease !important;
}

.ed-topbar-divider {
  width: 1px !important;
  height: 28px !important;
  background: #E2E8F0 !important;
}

.ed-topbar-notifications .tutor-btn-ghost,
.ed-topbar-notifications button {
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  border-radius: 0.625rem !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  color: #475569 !important;
}

.ed-topbar-notifications button:hover {
  background: #F8FAFC !important;
  border-color: #00249A !important;
  color: #00249A !important;
}

.tutor-dashboard-header .tutor-dashboard-header-user-avatar.ed-avatar-trigger,
.ed-avatar-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 3px !important;
  background: #FFFFFF !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: 38px !important;
  box-sizing: border-box !important;
}

/* Avatar Circular de Usuario e Iniciales (Alto Contraste Institucional) */
.tutor-avatar,
.tutor-dashboard-header-user-avatar .tutor-avatar,
.ed-avatar-trigger .tutor-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background-color: #00249A !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  overflow: hidden !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  position: relative !important;
}

.tutor-avatar .tutor-avatar-initials,
.tutor-avatar span,
.ed-avatar-trigger .tutor-avatar-initials,
.ed-popover-user-info .tutor-avatar-initials {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tamaño 32 (Botón Trigger de Cabecera) */
.tutor-avatar.tutor-avatar-32,
.ed-avatar-trigger .tutor-avatar {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 0.75rem !important;
  background-color: #00249A !important;
}

.tutor-avatar.tutor-avatar-32 .tutor-avatar-initials,
.ed-avatar-trigger .tutor-avatar .tutor-avatar-initials {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

/* Tamaño 48 (Cabecera del Popover de Cuenta) */
.tutor-avatar.tutor-avatar-48,
.ed-popover-user-info .tutor-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  background-color: #00249A !important;
  border: 2px solid #FFFFFF !important;
  outline: 2px solid rgba(0, 36, 154, 0.2) !important;
  box-shadow: 0 4px 14px -2px rgba(0, 36, 154, 0.25) !important;
}

.tutor-avatar.tutor-avatar-48 .tutor-avatar-initials,
.ed-popover-user-info .tutor-avatar .tutor-avatar-initials {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

.tutor-avatar img.tutor-avatar-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 9999px !important;
  display: block !important;
}

.ed-avatar-trigger:hover,
.ed-avatar-trigger.active {
  border-color: #00249A !important;
  box-shadow: 0 0 0 3px rgba(0, 36, 154, 0.12) !important;
}

.ed-avatar-chevron {
  width: 14px !important;
  height: 14px !important;
  color: #64748B !important;
  margin-right: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ed-avatar-chevron svg {
  width: 12px !important;
  height: 12px !important;
}

/* User Popover Refinements */
.ed-user-popover-panel {
  border-radius: 1rem !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 16px 36px -8px rgba(0, 36, 154, 0.12) !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

.ed-popover-user-info {
  padding: 1.25rem !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.ed-popover-name {
  color: #00249A !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.ed-popover-email {
  color: #64748B !important;
  font-size: 0.8125rem !important;
}

.ed-popover-menu li a.ed-menu-link {
  border-radius: 0.5rem !important;
  padding: 0.6rem 0.85rem !important;
  transition: all 0.15s ease !important;
}

.ed-popover-menu li a.ed-menu-link:hover {
  background-color: rgba(0, 36, 154, 0.06) !important;
  color: #00249A !important;
}

/* Responsive & Mobile Layout */
@media (max-width: 768px) {
  .tutor-wrap.tutor-dashboard {
    padding: 1rem 0.75rem calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .tutor-dashboard-header,
  .ed-dashboard-topbar {
    padding: 1rem 1.125rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 1rem !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
  }

  .tutor-dashboard-header-inner,
  .ed-topbar-inner {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "greeting actions"
      "meta     meta" !important;
    row-gap: 0.75rem !important;
    column-gap: 0.5rem !important;
    align-items: center !important;
    height: auto !important;
  }

  /* Hide desktop action button and divider on mobile (bottom nav already has Explorar & Cursos) */
  .ed-topbar-action-btn,
  .ed-topbar-divider {
    display: none !important;
  }

  .ed-topbar-user-greeting {
    gap: 0.35rem 0.5rem !important;
  }

  .ed-greeting-salute {
    font-size: 0.95rem !important;
  }

  .ed-greeting-name {
    font-size: 1.15rem !important;
  }

  .ed-badge-role {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.45rem !important;
  }

  .tutor-dashboard-header-right,
  .ed-topbar-right {
    gap: 0.5rem !important;
    align-self: center !important;
  }

  .ed-topbar-notifications .tutor-btn-ghost,
  .ed-topbar-notifications button {
    width: 36px !important;
    height: 36px !important;
  }

  .tutor-dashboard-header .tutor-dashboard-header-user-avatar.ed-avatar-trigger,
  .ed-avatar-trigger {
    padding: 2px !important;
    height: 36px !important;
  }

  .ed-topbar-meta {
    width: 100% !important;
    gap: 0.35rem !important;
  }

  .ed-meta-pill {
    font-size: 0.725rem !important;
    padding: 0.2rem 0.45rem !important;
  }

  .ed-meta-divider {
    display: inline-block !important;
  }
}


/* 2. Sidebar Lateral de Navegación (Tutor LMS 4.0 & Legacy) */
.tutor-dashboard-sidebar,
.tutor-dashboard-left-menu {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.25rem !important;
  padding: 0 0 1.5rem 0 !important;
  box-shadow: 0 4px 14px -2px rgba(0, 36, 154, 0.04) !important;
  overflow: hidden !important;
}

/* Logo Oficial en el Encabezado del Sidebar */
.tutor-dashboard-sidebar-logo {
  padding: 1.5rem 1.5rem 1.25rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-bottom: 1px solid #F1F5F9 !important;
  margin-bottom: 1rem !important;
  text-decoration: none !important;
  background-color: #FFFFFF !important;
}

.tutor-dashboard-sidebar-logo .tutor-brand-logo,
.tutor-dashboard-sidebar-logo .ed-sidebar-logo-img,
.tutor-dashboard-sidebar-logo img {
  max-height: 44px !important;
  max-width: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.tutor-dashboard-sidebar-nav ul,
.tutor-dashboard-permalinks {
  list-style: none !important;
  padding: 0 0.85rem !important;
  margin: 0 !important;
}

.tutor-dashboard-sidebar-nav ul li,
.tutor-dashboard-permalinks li {
  margin-bottom: 0.35rem !important;
}

.tutor-dashboard-sidebar-nav ul li a,
.tutor-dashboard-permalinks li a {
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  text-decoration: none !important;
}

.tutor-dashboard-sidebar-nav ul li a svg,
.tutor-dashboard-sidebar-nav ul li a [class^="tutor-icon-"],
.tutor-dashboard-permalinks li a [class^="tutor-icon-"] {
  color: #64748B !important;
  transition: color 0.2s ease !important;
}

/* Hover en Elementos del Sidebar */
.tutor-dashboard-sidebar-nav ul li a:hover,
.tutor-dashboard-permalinks li a:hover {
  background-color: rgba(0, 36, 154, 0.06) !important;
  color: #00249A !important;
  transform: translateX(2px) !important;
}

.tutor-dashboard-sidebar-nav ul li a:hover svg,
.tutor-dashboard-sidebar-nav ul li a:hover [class^="tutor-icon-"],
.tutor-dashboard-permalinks li a:hover [class^="tutor-icon-"] {
  color: #00249A !important;
}

/* Elemento Activo del Sidebar (ED Royal Blue) */
.tutor-dashboard-sidebar-nav ul li a.active,
.tutor-dashboard-permalinks li.active a {
  background-color: #00249A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -2px rgba(0, 36, 154, 0.25) !important;
  transform: translateX(2px) !important;
}

.tutor-dashboard-sidebar-nav ul li a.active span,
.tutor-dashboard-sidebar-nav ul li a.active svg,
.tutor-dashboard-sidebar-nav ul li a.active svg path,
.tutor-dashboard-permalinks li.active a span,
.tutor-dashboard-permalinks li.active a [class^="tutor-icon-"] {
  color: #FFFFFF !important;
  fill: currentColor !important;
}

/* Botón Destacado: Catálogo de Cursos en Sidebar */
.ed-sidebar-catalog-action {
  padding: 1.25rem 0.85rem 0.5rem 0.85rem !important;
  margin-top: 1rem !important;
  border-top: 1px solid #F1F5F9 !important;
}

.ed-sidebar-catalog-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 0.85rem !important;
  padding: 0.85rem 1rem !important;
  color: #00249A !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 36, 154, 0.04) !important;
}

.ed-catalog-btn-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.ed-catalog-icon {
  color: #00249A !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

.ed-catalog-arrow {
  color: #94A3B8 !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.ed-sidebar-catalog-btn:hover {
  background: #00249A !important;
  border-color: #00249A !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px -2px rgba(0, 36, 154, 0.28) !important;
}

.ed-sidebar-catalog-btn:hover .ed-catalog-icon {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  transform: rotate(45deg) !important;
}

.ed-sidebar-catalog-btn:hover span {
  color: #FFFFFF !important;
}

.ed-sidebar-catalog-btn:hover .ed-catalog-arrow {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  transform: translateX(3px) !important;
}

/* 3. Tarjetas de Métricas & KPIs */
.tutor-dashboard-content .tutor-card,
.tutor-analytics-card,
.tutor-stat-box {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.25rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 14px -2px rgba(0, 36, 154, 0.04) !important;
  transition: all 0.2s ease !important;
}

.tutor-dashboard-content .tutor-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -4px rgba(0, 36, 154, 0.1) !important;
  border-color: #005BC1 !important;
}

/* Cifras Numéricas de Alto Impacto */
.tutor-dashboard-content .tutor-fs-3,
.tutor-stat-value,
.tutor-card-body .tutor-fs-3 {
  color: #00249A !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  font-size: 1.875rem !important;
  letter-spacing: -0.025em !important;
}

/* 4. Barra de Completar Perfil */
.tutor-dashboard-profile-completion {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 4px solid #00249A !important;
  border-radius: 1rem !important;
  box-shadow: 0 2px 8px -2px rgba(0, 36, 154, 0.04) !important;
}

/* 5. Gráficos y Tablas */
.tutor-dashboard-content table {
  border-radius: 1rem !important;
  overflow: hidden !important;
  border: 1px solid #E2E8F0 !important;
}

.tutor-dashboard-content table th {
  background: #F8FAFC !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #00249A !important;
}

/* Pestañas de Analytics y Reportes */
.tutor-nav-tabs-container .tutor-nav-link.is-active,
.tutor-nav-tabs .tutor-nav-link.is-active,
.tutor-nav-admin .tutor-nav-link.is-active {
  color: #00249A !important;
  border-bottom: 2px solid #00249A !important;
  font-weight: 700 !important;
}

.tutor-nav-tabs-container .tutor-nav-link:hover,
.tutor-nav-tabs .tutor-nav-link:hover {
  color: #00249A !important;
}

/* ==========================================================================
   6. AJUSTES DE CUENTA Y PERFIL (/mi-perfil/account/settings/) — BESPOKE ED ZIU
   ========================================================================== */

/* Fondo general de la página de ajustes */
.tutor-account-page-wrapper {
  background-color: #F8FAFC !important;
  min-height: 100vh !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Barra superior de Ajustes */
.tutor-profile-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 36, 154, 0.03) !important;
  padding: 0.85rem 0 !important;
}

.tutor-profile-header-title {
  color: #00249A !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.015em !important;
}

/* Contenedor Ergonómico Centralizado (Evita desborde ultra-ancho) */
.tutor-account-container {
  max-width: 72rem !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

.tutor-profile-settings-section {
  padding-bottom: 3.5rem !important;
}

/* Menú Lateral de Pestañas de Ajustes */
.tutor-profile-settings-tab {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 4px 14px -2px rgba(0, 36, 154, 0.04) !important;
  padding: 1rem !important;
  width: 260px !important;
  min-width: 260px !important;
  flex-shrink: 0 !important;
}

.tutor-profile-settings-tab button {
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  margin-bottom: 0.35rem !important;
  text-align: left !important;
}

.tutor-profile-settings-tab button:hover {
  background-color: rgba(0, 36, 154, 0.06) !important;
  color: #00249A !important;
  transform: translateX(2px) !important;
}

.tutor-profile-settings-tab button:hover svg,
.tutor-profile-settings-tab button:hover [class^="tutor-icon-"] {
  color: #00249A !important;
}

/* Pestaña Activa de Ajustes (Azul Royal Institucional) */
.tutor-profile-settings-tab button[aria-selected="true"],
.tutor-profile-settings-tab button.is-active,
.tutor-profile-settings-tab button.active {
  background-color: #00249A !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -2px rgba(0, 36, 154, 0.25) !important;
  transform: translateX(2px) !important;
}

.tutor-profile-settings-tab button[aria-selected="true"] span,
.tutor-profile-settings-tab button[aria-selected="true"] svg,
.tutor-profile-settings-tab button[aria-selected="true"] svg path,
.tutor-profile-settings-tab button.is-active span,
.tutor-profile-settings-tab button.is-active svg,
.tutor-profile-settings-tab button.active span,
.tutor-profile-settings-tab button.active svg {
  color: #FFFFFF !important;
  fill: currentColor !important;
}

.tutor-profile-settings-tab button[aria-selected="true"] .tutor-text-subdued,
.tutor-profile-settings-tab button.is-active .tutor-text-subdued,
.tutor-profile-settings-tab button.active .tutor-text-subdued {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Tarjeta Principal del Formulario de Ajustes */
.tutor-profile-settings-tab-content .tutor-card,
.tutor-profile-settings-tab-content .tutor-card-rounded-2xl {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 4px 14px -2px rgba(0, 36, 154, 0.04) !important;
  overflow: hidden !important;
  padding: 1.75rem !important;
}

/* Portada de Perfil (Cover Photo) — Reemplazo del stock amarillo/azul por degradado corporativo */
.tutor-account-cover-photo {
  border-radius: 1rem !important;
  min-height: 180px !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.tutor-account-cover-photo[style*="cover-photo.webp"],
.tutor-account-cover-photo[style*="cover-placeholder"] {
  background-image: linear-gradient(135deg, #0A173B 0%, #00249A 60%, #005BC1 100%) !important;
}

/* Avatar de Perfil Superpuesto */
.tutor-account-avatar-wrapper {
  margin-top: -3.5rem !important;
  margin-bottom: 1.5rem !important;
  padding-left: 1rem !important;
  display: flex !important;
  align-items: flex-end !important;
}

.tutor-account-avatar {
  border: 4px solid #FFFFFF !important;
  border-radius: 9999px !important;
  box-shadow: 0 6px 20px -4px rgba(0, 36, 154, 0.2) !important;
  width: 90px !important;
  height: 90px !important;
  background-color: #FFFFFF !important;
  overflow: hidden !important;
}

.tutor-account-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Campos de Formulario (Inputs, Selects, Labels) */
.tutor-profile-settings-tab-content label {
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}

.tutor-profile-settings-tab-content .tutor-form-control,
.tutor-profile-settings-tab-content .tutor-form-select,
.tutor-profile-settings-tab-content input[type="text"],
.tutor-profile-settings-tab-content input[type="email"],
.tutor-profile-settings-tab-content input[type="password"],
.tutor-profile-settings-tab-content input[type="tel"],
.tutor-profile-settings-tab-content select,
.tutor-profile-settings-tab-content textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 0.75rem !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.875rem !important;
  color: #0F172A !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}

.tutor-profile-settings-tab-content input:disabled,
.tutor-profile-settings-tab-content input[readonly] {
  background-color: #F8FAFC !important;
  color: #64748B !important;
  border-color: #E2E8F0 !important;
  cursor: not-allowed !important;
}

.tutor-profile-settings-tab-content .tutor-form-control:focus,
.tutor-profile-settings-tab-content input:focus,
.tutor-profile-settings-tab-content select:focus,
.tutor-profile-settings-tab-content textarea:focus {
  border-color: #00249A !important;
  box-shadow: 0 0 0 3px rgba(0, 36, 154, 0.12) !important;
  outline: none !important;
}

/* Botones de Acción (Guardar / Descartar) */
.tutor-profile-header-right button[type="submit"],
.tutor-profile-settings-tab-content button[type="submit"] {
  background-color: #00249A !important;
  border-color: #00249A !important;
  color: #FFFFFF !important;
  border-radius: 0.625rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 1.25rem !important;
  transition: all 0.2s ease !important;
}

.tutor-profile-header-right button[type="submit"]:hover,
.tutor-profile-settings-tab-content button[type="submit"]:hover {
  background-color: #005BC1 !important;
  border-color: #005BC1 !important;
  box-shadow: 0 4px 12px -2px rgba(0, 36, 154, 0.25) !important;
}

/* ==========================================================================
   7. SECCIÓN CONTINUAR APRENDIENDO & TARJETAS DE PROGRESO (DASHBOARD)
   ========================================================================== */

/* Cabecera de la sección */
.tutor-student-dashboard-courses {
  margin-top: 2rem !important;
}

.tutor-student-dashboard-courses .tutor-flex.tutor-items-center.tutor-justify-between {
  margin-bottom: 1.25rem !important;
  align-items: center !important;
}

.tutor-student-dashboard-courses .tutor-small.tutor-font-medium {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0B2545 !important;
  letter-spacing: -0.015em !important;
}

.tutor-student-dashboard-courses .tutor-btn-link {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #00249A !important;
  background-color: rgba(0, 36, 154, 0.06) !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.tutor-student-dashboard-courses .tutor-btn-link:hover {
  background-color: #00249A !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px -2px rgba(0, 36, 154, 0.25) !important;
}

/* Tarjeta Principal de Curso en Progreso */
.tutor-progress-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.25rem !important;
  padding: 1.15rem 1.35rem !important;
  box-shadow: 0 4px 14px -2px rgba(0, 36, 154, 0.04) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
  margin-bottom: 0.25rem !important;
}

.tutor-progress-card:hover,
.tutor-progress-card:focus-within {
  background: #FFFFFF !important;
  border-color: #00249A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -6px rgba(0, 36, 154, 0.12) !important;
}

/* Interior de la tarjeta */
.tutor-progress-card .tutor-progress-card-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.35rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Miniatura (Thumbnail) */
.tutor-progress-card .tutor-progress-card-thumbnail {
  flex: 0 0 160px !important;
  width: 160px !important;
  height: 98px !important;
  aspect-ratio: 16/10 !important;
  border-radius: 0.85rem !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #0A173B !important;
  box-shadow: 0 3px 8px -1px rgba(0, 0, 0, 0.08) !important;
  margin: 0 !important;
}

.tutor-progress-card .tutor-progress-card-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
}

.tutor-progress-card:hover .tutor-progress-card-thumbnail img {
  transform: scale(1.05) !important;
}

/* Bloque Central de Contenido */
.tutor-progress-card .tutor-progress-card-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 !important;
  gap: 0.35rem !important;
}

.tutor-progress-card .tutor-progress-card-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Etiqueta / Badge de Categoría */
.tutor-progress-card .tutor-progress-card-category {
  display: inline-block !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #00249A !important;
  background-color: rgba(0, 36, 154, 0.07) !important;
  padding: 0.22rem 0.65rem !important;
  border-radius: 9999px !important;
  max-width: 420px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  margin: 0 0 0.15rem 0 !important;
}

/* Título del Curso */
.tutor-progress-card .tutor-progress-card-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0B2545 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

.tutor-progress-card:hover .tutor-progress-card-title {
  color: #00249A !important;
}

/* Barra y Datos de Avance */
.tutor-progress-card .tutor-progress-card-progress {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  margin-top: 0.25rem !important;
  max-width: 320px !important;
}

.tutor-progress-card .tutor-progress-card-details {
  font-family: 'JetBrains Mono', monospace, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #64748B !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  line-height: 1 !important;
}

.tutor-progress-card .tutor-progress-card-separator {
  color: #CBD5E1 !important;
  font-size: 0.75rem !important;
}

.tutor-progress-card .tutor-progress-card-bar {
  width: 100% !important;
  max-width: 260px !important;
  margin: 0 !important;
}

.tutor-progress-card .tutor-progress-card-bar .tutor-progress-bar {
  height: 6px !important;
  background-color: #E2E8F0 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  position: relative !important;
}

.tutor-progress-card .tutor-progress-card-bar .tutor-progress-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #00249A 0%, #005BC1 100%) !important;
  border-radius: 9999px !important;
  transition: width 0.4s ease !important;
}

/* Botón de Acción — SIEMPRE VISIBLE Y ALINEADO A LA DERECHA */
.tutor-progress-card .tutor-progress-card-actions {
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
  margin-left: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.tutor-progress-card .tutor-progress-card-actions .tutor-btn,
.tutor-progress-card .tutor-progress-card-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: #00249A !important;
  color: #FFFFFF !important;
  border: 1px solid #00249A !important;
  border-radius: 0.625rem !important;
  padding: 0.6rem 1.25rem !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 3px 10px -2px rgba(0, 36, 154, 0.25) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.tutor-progress-card .tutor-progress-card-actions .tutor-btn:hover,
.tutor-progress-card .tutor-progress-card-actions a:hover,
.tutor-progress-card:hover .tutor-progress-card-actions .tutor-btn,
.tutor-progress-card:hover .tutor-progress-card-actions a {
  background: #005BC1 !important;
  border-color: #005BC1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px -2px rgba(0, 36, 154, 0.35) !important;
  color: #FFFFFF !important;
}

.tutor-progress-card .tutor-progress-card-actions svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
  color: #FFFFFF !important;
}

/* Responsividad */
@media (max-width: 860px) {
  .tutor-progress-card {
    padding: 1rem !important;
    gap: 1rem !important;
  }
  
  .tutor-progress-card .tutor-progress-card-thumbnail {
    flex: 0 0 130px !important;
    width: 130px !important;
    height: 80px !important;
  }

  .tutor-progress-card .tutor-progress-card-title {
    font-size: 0.9375rem !important;
  }

  .tutor-progress-card .tutor-progress-card-actions {
    margin-left: 1rem !important;
  }

  .tutor-progress-card .tutor-progress-card-actions .tutor-btn,
  .tutor-progress-card .tutor-progress-card-actions a {
    padding: 0.5rem 0.95rem !important;
    font-size: 0.75rem !important;
  }
}

@media (max-width: 640px) {
  .tutor-progress-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  .tutor-progress-card .tutor-progress-card-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }

  .tutor-progress-card .tutor-progress-card-thumbnail {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 165px !important;
    aspect-ratio: 16/9 !important;
  }

  .tutor-progress-card .tutor-progress-card-progress {
    max-width: 100% !important;
  }

  .tutor-progress-card .tutor-progress-card-bar {
    max-width: 100% !important;
  }

  .tutor-progress-card .tutor-progress-card-actions {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 0.25rem !important;
  }

  .tutor-progress-card .tutor-progress-card-actions .tutor-btn,
  .tutor-progress-card .tutor-progress-card-actions a {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* ==========================================================================
   8. MEJORAS RESPONSIVAS GLOBALES PARA MÓVILES (DASHBOARD & AJUSTES)
   ========================================================================== */

/* Grid de Tarjetas KPI de Métricas en Móviles */
@media (max-width: 640px) {
  .tutor-student-dashboard-stats .tutor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .tutor-dashboard-content .tutor-card,
  .tutor-analytics-card,
  .tutor-stat-box {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  .tutor-dashboard-content .tutor-fs-3,
  .tutor-stat-value,
  .tutor-card-body .tutor-fs-3 {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 400px) {
  .tutor-student-dashboard-stats .tutor-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Barra de Navegación Inferior Móvil (Dock / Bottom Bar) */
.tutor-dashboard-nav-mobile {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid #E2E8F0 !important;
  box-shadow: 0 -4px 20px rgba(0, 36, 154, 0.08) !important;
  z-index: 9999 !important;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
}

.tutor-dashboard-nav-mobile-list > li > a,
.tutor-dashboard-nav-mobile-list > li > button {
  color: #64748B !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  transition: all 0.15s ease !important;
}

.tutor-dashboard-nav-mobile-list > li > a.active,
.tutor-dashboard-nav-mobile-list > li > a.active span,
.tutor-dashboard-nav-mobile-list > li > button.active,
.tutor-dashboard-nav-mobile-list > li > button.active span {
  color: #00249A !important;
  font-weight: 700 !important;
}

.tutor-dashboard-nav-mobile-list > li > a.active svg,
.tutor-dashboard-nav-mobile-list > li > button.active svg {
  color: #00249A !important;
  stroke: #00249A !important;
}

/* Popover More en la barra inferior móvil */
.tutor-dashboard-nav-mobile-more-popover {
  border-radius: 1rem !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 -8px 24px -4px rgba(0, 36, 154, 0.15) !important;
  background: #FFFFFF !important;
  padding: 0.5rem !important;
  z-index: 10000 !important;
}

.tutor-dashboard-nav-mobile-more-popover ul li a {
  border-radius: 0.5rem !important;
  padding: 0.6rem 0.85rem !important;
  font-size: 0.8125rem !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

.tutor-dashboard-nav-mobile-more-popover ul li a:hover,
.tutor-dashboard-nav-mobile-more-popover ul li a.active {
  background-color: rgba(0, 36, 154, 0.06) !important;
  color: #00249A !important;
}

/* Ajustes de Cuenta y Perfil en Móviles */
@media (max-width: 768px) {
  .tutor-account-container {
    padding: 0 1rem !important;
  }

  .tutor-account-container .tutor-flex {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .tutor-profile-settings-tab {
    width: 100% !important;
    min-width: 100% !important;
    padding: 0.75rem !important;
  }

  .tutor-profile-settings-tab-content .tutor-card,
  .tutor-profile-settings-tab-content .tutor-card-rounded-2xl {
    padding: 1.25rem !important;
  }
}

@media (max-width: 640px) {
  .tutor-account-cover-photo {
    min-height: 130px !important;
  }

  .tutor-account-avatar-wrapper {
    margin-top: -2.5rem !important;
    padding-left: 0.5rem !important;
  }

  .tutor-account-avatar {
    width: 72px !important;
    height: 72px !important;
    border-width: 3px !important;
  }
}