/* ================================================================ */
/* DESKTOP.CSS — Diseño para tablet (≥769px) y escritorio           */
/* No incluir reglas de móvil aquí.                                 */
/* Móvil: ver mobile.css   |   Estilos base: ver base.css           */
/* ================================================================ */

/* ================================================================ */
/* REDISEÑO DASHBOARD — Stat mini-cards y limpieza de secciones     */
/* ================================================================ */

/* Stat mini cards (TDV / Meta KPI / Actualización) */
.stat-mini-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.stat-mini-value {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-mini-value-sm {
  font-size: 20px !important;
  color: var(--text) !important;
}
.stat-mini-sub {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
}

.is-desktop #page-dashboard.active .card.dash-card.stat-mini-card {
  grid-column: span 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 16px 20px !important;
  min-height: 96px !important;
}

/* Hacer que el wrapper de sección inferior sea transparente al grid */
.is-desktop #page-dashboard.active .bottom-section-grid {
  display: contents !important;
}
.is-desktop #page-dashboard.active .shortcuts-grid-wrapper {
  display: contents !important;
}

/* Ocultar en escritorio: sección de objetivos XP y banner motivacional */
.is-desktop #page-dashboard.active .retos-card {
  display: none !important;
}
.is-desktop #page-dashboard.active .bottom-banner-card {
  display: none !important;
}

/* Ajuste KPI card tamaño y layout para is-desktop */
.is-desktop #page-dashboard.active .card.dash-card.kpi-main-score-panel {
  grid-column: span 2 !important;
  min-height: 175px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px !important;
}
.is-desktop #page-dashboard.active .card.dash-card.ranking-metric-panel {
  grid-column: span 1 !important;
  min-height: 175px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 20px !important;
}


/* ========================================================= */
/* TABLET (≥769px)                                           */
/* ========================================================= */
@media(min-width:769px){
  .app-content{max-width:720px;padding:24px 28px calc(96px + var(--safe-bottom))}
  .profile-name{font-size:20px}
  .profile-avatar{width:64px;height:64px;font-size:24px}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .scroll-section{max-height:75vh}
  .bottom-nav{max-width:720px;left:50%;transform:translateX(-50%);border-radius:16px 16px 0 0}
}

/* ========================================================= */
/* ESCRITORIO (≥1024px)                                      */
/* ========================================================= */
@media(min-width:1024px){

  /* ---- Layout ---- */
  .app-header{height:56px;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
  .app-logo{font-size:17px}
  .app-body{display:flex;height:calc(100dvh - 56px);overflow:hidden}

  /* ---- Sidebar ---- */
  .desk-sidebar{
    display:flex;flex-direction:column;
    width:220px;flex-shrink:0;
    background:var(--surface);border-right:1px solid var(--border);
    overflow-y:auto;padding:16px 10px 24px;
  }
  .desk-nav-section{display:flex;flex-direction:column;gap:2px}
  .desk-nav-label{
    display:block;font-size:10px;font-weight:700;color:var(--text-3);
    letter-spacing:.08em;text-transform:uppercase;padding:12px 14px 6px;
  }
  .desk-nav-link{
    display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;
    font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;
    border:none;background:none;font-family:inherit;width:100%;text-align:left;
    transition:background .15s,color .15s;
  }
  .desk-nav-link:hover{background:var(--surface-2);color:var(--text)}
  .desk-nav-link.active{background:var(--primary-light);color:var(--primary)}
  .desk-nav-icon{font-size:16px;flex-shrink:0}
  .desk-sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}

  /* ---- Área de contenido ---- */
  .app-content{flex:1;overflow-y:auto;padding:16px 28px 24px;max-width:none;margin:0;width:auto}

  /* ---- Navbar inferior oculta en escritorio ---- */
  .bottom-nav{display:none !important}

  /* ---- Dashboard: grilla 3 columnas fijas ---- */
  #page-dashboard.active{
    display:grid !important;
    grid-template-columns:2fr 1fr 1fr;
    gap:14px;
    align-content:start;
    max-width:1400px;
    margin:0 auto;
  }
  #page-dashboard.active > *{margin-bottom:0 !important;min-width:0}

  /* Saludo (sin delay class) y perfil → ancho completo */
  #page-dashboard.active > .fade-up:not(.delay-1):not(.delay-2):not(.delay-3){
    grid-column:1/-1;padding:0 2px !important;
  }
  #page-dashboard.active > .profile-card{grid-column:1/-1}
  #page-dashboard.active > .fade-up.delay-3{grid-column:1/-1}

  /* Wrapper de shortcuts: transparente al grid (expone hijos como celdas) */
  #page-dashboard.active > .fade-up.delay-2:not(.card){display:contents !important}

  /* ---- Perfil compacto ---- */
  #page-dashboard.active .profile-card{padding:14px 20px !important}
  #page-dashboard.active .profile-meta{margin-top:8px !important;padding-top:8px !important;gap:6px !important}
  #page-dashboard.active .profile-name{font-size:15px !important}
  #page-dashboard.active .profile-cargo{font-size:11px}
  #page-dashboard.active .profile-avatar{width:44px !important;height:44px !important;font-size:16px !important}

  /* Botones de acceso en columna vertical con ícono + texto + flecha */
  #page-dashboard.active .profile-card > div:last-child{
    flex-direction:column !important;gap:5px !important;
    margin-top:10px !important;padding-top:10px !important;
  }
  #page-dashboard.active .glass-btn{
    flex:none !important;width:100% !important;
    justify-content:flex-start !important;
    padding:9px 13px !important;border-radius:9px !important;
    font-size:12px !important;font-weight:600 !important;
  }
  #page-dashboard.active .glass-btn::after{
    content:'→';margin-left:auto;opacity:.55;font-size:14px;font-weight:300;
  }

  /* ---- KPI card compacta ---- */
  #page-dashboard.active .card.dash-card[onclick]{padding:16px 18px !important}
  #page-dashboard.active .card.dash-card[onclick] > div:first-child{margin-bottom:10px !important}

  /* ---- Tarjetas de acceso directo (anotaciones, FAQ, soporte) ---- */
  #page-dashboard.active .card.dash-card:not([onclick*="showPage('kpi')"]):not(.logro-banner-card){
    padding:18px 12px !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    min-height:130px !important;
  }

  /* ---- Hover en tarjetas ---- */
  .card{transition:box-shadow .2s,transform .2s}
  .dash-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.09);transform:translateY(-2px)}

  /* ---- Otras páginas: grilla auto-fit ---- */
  #page-kpi.active,
  #page-ranking.active,
  #page-historico.active,
  #page-logros.active,
  #page-anotaciones.active{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:16px;align-content:start;
    max-width:1400px;margin:0 auto;
  }
  #page-kpi.active > *,
  #page-ranking.active > *,
  #page-historico.active > *,
  #page-logros.active > *,
  #page-anotaciones.active > *{margin-bottom:0;min-width:0}

  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .scroll-section{max-height:80vh}
  #mapa-radar-admin{height:520px}
}

/* ========================================================= */
/* PANTALLAS MUY GRANDES (≥1600px)                           */
/* ========================================================= */
@media(min-width:1600px){
  .app-content{padding:20px 36px 28px}
  #page-dashboard.active{
    grid-template-columns:2fr 1fr 1fr;
    max-width:1440px;
  }
  #page-kpi.active,
  #page-ranking.active,
  #page-historico.active,
  #page-logros.active,
  #page-anotaciones.active{
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    max-width:1440px;
  }
}

/* ========================================================= */
/* IS-DESKTOP OVERRIDES — clase .is-desktop en <html>        */
/* Especificidad > estilos inyectados por JS (sin !important) */
/* ========================================================= */

.is-desktop .app-header {
  height: 42px !important;
  padding: 0 20px !important;
}
.is-desktop .app-content{padding:8px 24px 12px !important}

.is-desktop .desk-sidebar {
  display: none !important;
}

/* ---- Dashboard: grilla 3 columnas uniformes ---- */
.is-desktop #page-dashboard.active{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  align-content:start;
  max-width:1540px;
  margin:0 auto;
}
.is-desktop #page-dashboard.active > *{margin-bottom:0 !important;min-width:0}

/* Saludo: oculto en desktop */
.is-desktop #page-dashboard.active > .fade-up:not(.delay-1):not(.delay-2):not(.delay-3){
  display:none !important;
}

/* ---- Perfil: banner horizontal full-width ---- */
.is-desktop #page-dashboard.active > .profile-card{
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 20px !important;
  min-height: 100px !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(10, 37, 64, 0.15) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.is-desktop #page-dashboard.active > .profile-card::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/sfe noche.jpeg") center / cover no-repeat !important;
  z-index: 0;
}
.is-desktop #page-dashboard.active > .profile-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9, 19, 37, 0.95) 0%, rgba(9, 19, 37, 0.8) 40%, rgba(9, 19, 37, 0.4) 100%) !important;
  z-index: 1;
}
.is-desktop #page-dashboard.active > .profile-card > * {
  position: relative; z-index: 2;
}
.is-desktop #page-dashboard.active .profile-row{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.is-desktop #page-dashboard.active .profile-avatar{
  width: 52px !important;
  height: 52px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3) !important;
  flex-shrink: 0 !important;
}
.is-desktop #page-dashboard.active .profile-name{
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
}
.is-desktop #page-dashboard.active .profile-cargo{
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 2px !important;
  font-weight: 500 !important;
}
.is-desktop #page-dashboard.active .profile-meta{
  flex: 1 1 auto !important;
  margin-top: 6px !important;
  padding-top: 0 !important;
  border-top: none !important;
  gap: 6px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
.is-desktop #page-dashboard.active .profile-meta-item{
  font-size: 10px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.is-desktop #page-dashboard.active .profile-meta-item.tag-rut {
  background: rgba(37, 99, 235, 0.2) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}
.is-desktop #page-dashboard.active .profile-meta-item.tag-loc {
  background: rgba(236, 72, 153, 0.2) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}
.is-desktop #page-dashboard.active .profile-meta-item.tag-role {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

/* Botones de acceso: fila horizontal, cada uno como mini-card con texto + subtexto */
.is-desktop #page-dashboard.active .profile-shortcuts-label {
  display: block !important;
  width: 100% !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
}

.is-desktop #page-dashboard.active .profile-card > div:last-child{
  flex: 1 1 100% !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-top: 4px !important;
  padding-top: 0 !important;
  border-top: none !important;
}
.is-desktop #page-dashboard.active .glass-btn{
  flex: 1 !important;
  min-width: 120px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
  color: #0f172a !important;
  transition: all 0.22s ease !important;
}
.is-desktop #page-dashboard.active .glass-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important;
}
.is-desktop #page-dashboard.active .glass-btn-icon {
  color: #1a56db !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: #eff6ff !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  transition: transform 0.2s !important;
}
.is-desktop #page-dashboard.active .glass-btn-icon svg {
  width: 14px !important;
  height: 14px !important;
}
.is-desktop #page-dashboard.active .glass-btn:hover .glass-btn-icon {
  transform: scale(1.08) !important;
}
.is-desktop #page-dashboard.active .glass-btn-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0px !important;
  flex: 1 !important;
  text-align: left !important;
}
.is-desktop #page-dashboard.active .glass-btn-title {
  display: block !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}
.is-desktop #page-dashboard.active .glass-btn-sub {
  display: block !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.1 !important;
}
.is-desktop #page-dashboard.active .glass-btn::after{
  content: '→' !important;
  margin-left: auto !important;
  opacity: 0.6 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}
.is-desktop #page-dashboard.active .glass-btn:hover::after {
  transform: translateX(3px) !important;
  color: #1a56db !important;
}

/* Responsivo para perfil en resoluciones de escritorio ajustadas */
@media (max-width: 1240px) {
  .is-desktop #page-dashboard.active > .profile-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
}

/* ---- Admin zone: full-width ---- */
.is-desktop #page-dashboard.active > .fade-up.delay-3{grid-column:1/-1}

/* ---- Shortcuts wrapper → transparent al grid ---- */
.is-desktop #page-dashboard.active > .fade-up.delay-2:not(.card){
  display:contents !important;
}

/* ---- Extra cards (Ranking, Histórico, Logros) → transparent al grid ---- */
.is-desktop #desk-extra-cards{display:contents}

/* ---- KPI card: Estilos generales para métricas ---- */
.is-desktop #page-dashboard.active .card.dash-card.metric-card {
  grid-column: span 1 !important;
}
.is-desktop #page-dashboard.active .card.dash-card.kpi-main-score-panel {
  grid-column: span 2 !important;
  min-height: 190px !important;
}
.is-desktop #page-dashboard.active .card.dash-card.ranking-metric-panel {
  grid-column: span 1 !important;
  min-height: 190px !important;
}
.is-desktop #page-dashboard.active .card.dash-card.tdv-metric-panel {
  grid-column: span 1 !important;
  min-height: 190px !important;
}


/* ---- Todas las tarjetas pequeñas: uniforme, centradas, misma altura, hover y flecha indicadora ---- */
.is-desktop #page-dashboard.active .card.dash-card.shortcut-card {
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 72px !important;
  gap: 10px !important;
  position: relative !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

/* Banner de próximo logro (delgada franja horizontal) */
.is-desktop #page-dashboard.active .logro-banner-card {
  grid-column: 1 / -1 !important;
}

/* Banner inferior full-width */
.is-desktop #page-dashboard.active .bottom-banner-card {
  grid-column: 1 / -1 !important;
}

.is-desktop #page-dashboard.active .dash-card-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.is-desktop #page-dashboard.active .dash-card-icon {
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.is-desktop #page-dashboard.active .dash-card-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.is-desktop #page-dashboard.active .dash-card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0px !important;
  padding-right: 20px !important;
  flex: 1 !important;
}
.is-desktop #page-dashboard.active .dash-card-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 0 !important;
}
.is-desktop #page-dashboard.active .dash-card-desc {
  display: block !important;
  font-size: 9.5px !important;
  color: var(--text-2) !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
}
.is-desktop #page-dashboard.active .dash-card-desc-2 {
  display: block !important;
  font-size: 8.5px !important;
  color: var(--text-3) !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* Indicador de acción (círculo con flecha) en tarjetas pequeñas */
.is-desktop #page-dashboard.active .dash-card-arrow-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-3) !important;
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  font-weight: bold !important;
  transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.is-desktop #page-dashboard.active .card.dash-card:hover .dash-card-arrow-circle {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  transform: translateY(-50%) scale(1.08) !important;
}
body.dark-mode.is-desktop #page-dashboard.active .card.dash-card:hover .dash-card-arrow-circle {
  background: #60a5fa !important;
  border-color: #60a5fa !important;
  color: #0f172a !important;
}

/* Evitar el ::before antiguo de flechita */
.is-desktop #page-dashboard.active .card.dash-card:not([onclick*="showPage('kpi')"])::before {
  display: none !important;
}

/* Paleta de colores para los fondos de los iconos en tarjetas pequeñas (Light Mode) */
.is-desktop #page-dashboard.active .card.dash-card[onclick*="anotaciones"] .dash-card-icon-wrapper {
  background: #ffe9d6 !important;
  color: #f76c1b !important;
}
.is-desktop #page-dashboard.active .card.dash-card[onclick*="abrirFAQ"] .dash-card-icon-wrapper {
  background: #e1f5fe !important;
  color: #0288d1 !important;
}
.is-desktop #page-dashboard.active .card.dash-card[onclick*="enviarDudas"] .dash-card-icon-wrapper {
  background: #f3e5f5 !important;
  color: #8e24aa !important;
}
.is-desktop #page-dashboard.active .card.dash-card[onclick*="ranking"] .dash-card-icon-wrapper {
  background: #e8eaf6 !important;
  color: #3f51b5 !important;
}
.is-desktop #page-dashboard.active .card.dash-card[onclick*="logros"] .dash-card-icon-wrapper {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}
.is-desktop #page-dashboard.active .card.dash-card[onclick*="historico"] .dash-card-icon-wrapper {
  background: #fffde7 !important;
  color: #fbc02d !important;
}

/* Paleta de colores para los fondos de los iconos (Dark Mode) */
body.dark-mode.is-desktop #page-dashboard.active .card.dash-card[onclick*="anotaciones"] .dash-card-icon-wrapper {
  background: rgba(247, 108, 27, 0.15) !important;
  color: #ff8f5a !important;
}
body.dark-mode.is-desktop #page-dashboard.active .card.dash-card[onclick*="abrirFAQ"] .dash-card-icon-wrapper {
  background: rgba(2, 136, 209, 0.15) !important;
  color: #4fc3f7 !important;
}
body.dark-mode.is-desktop #page-dashboard.active .card.dash-card[onclick*="enviarDudas"] .dash-card-icon-wrapper {
  background: rgba(142, 36, 170, 0.15) !important;
  color: #e040fb !important;
}
body.dark-mode.is-desktop #page-dashboard.active .card.dash-card[onclick*="ranking"] .dash-card-icon-wrapper {
  background: rgba(63, 81, 181, 0.15) !important;
  color: #7986cb !important;
}
body.dark-mode.is-desktop #page-dashboard.active .card.dash-card[onclick*="logros"] .dash-card-icon-wrapper {
  background: rgba(46, 125, 50, 0.15) !important;
  color: #81c784 !important;
}
body.dark-mode.is-desktop #page-dashboard.active .card.dash-card[onclick*="historico"] .dash-card-icon-wrapper {
  background: rgba(251, 192, 45, 0.15) !important;
  color: #fff176 !important;
}

/* ---- Hover premium en tarjetas ---- */
.is-desktop .dash-card{
  transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.22s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.is-desktop .dash-card:hover{
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(26, 86, 219, 0.03) !important;
  border-color: rgba(26, 86, 219, 0.18) !important;
}
body.dark-mode.is-desktop .dash-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(26, 86, 219, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

/* ---- Suavizar Tarjeta de Soporte en Modo Oscuro ---- */
body.dark-mode .card.dash-card[onclick*="enviarDudas"] {
  background: var(--surface) !important;
  border: 1px solid rgba(96, 165, 250, 0.15) !important;
}
body.dark-mode .card.dash-card[onclick*="enviarDudas"] .dash-card-title {
  color: var(--text) !important;
}
body.dark-mode .card.dash-card[onclick*="enviarDudas"] .dash-card-desc {
  color: var(--text-2) !important;
}
body.dark-mode .card.dash-card[onclick*="enviarDudas"] .dash-card-desc-2 {
  color: var(--text-3) !important;
}

/* ---- Otras páginas ---- */
.is-desktop #page-kpi.active,
.is-desktop #page-ranking.active,
.is-desktop #page-historico.active,
.is-desktop #page-logros.active,
.is-desktop #page-anotaciones.active{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;align-content:start;
  max-width:1540px;margin:0 auto;
}
.is-desktop #page-kpi.active > *,
.is-desktop #page-ranking.active > *,
.is-desktop #page-historico.active > *,
.is-desktop #page-logros.active > *,
.is-desktop #page-anotaciones.active > *{margin-bottom:0;min-width:0}

/* ESTILOS DE ESCRITORIO PARA EL BOTÓN VOLVER AL INICIO */
.is-desktop .page-header-wrap {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  gap: 16px !important;
  grid-column: 1 / -1 !important;
}
.is-desktop .back-to-start-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 8px 16px !important;
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  transition: all 0.2s ease !important;
}
.is-desktop .back-to-start-btn:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}