/* ══════════════════════════════════════════════════════════════════════
   SHELL: layout.css
   Layout esqueleto compartido por todas las páginas autenticadas.

   Elementos:
   - .dashboard-layout (flex container global)
   - .main-content (flex: 1 max-width: 1200px, content area)
   - .shell-side-col (right column with widgets, 360px)
   - .shell-stats-row, .shell-side-col scrollbar styling
   - .dashboard-layout:has() variants — modifica layout cuando hay
     shell-side-col, profile-page, settings-page-wrapper
   - body[data-route="profile|settings|achievements"] variants

   Usado por: js/utils/shell.js (.dashboard-layout)

   Extraído de learning.css en Round 10.2.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Dashboard Layout (from learning.css 4-10) ─────────────────── */
/* ── Dashboard Layout ───────────────────────────────────────────────── */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-white);
}


/* ─── 2. Main Content + Shell Side Col (from learning.css 423-561) ── */
.main-content {
  flex: 1;
  padding: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-layout:has(.shell-side-col) {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  align-items: stretch;
}

.dashboard-layout:has(.shell-side-col) .main-content {
  min-width: 0;
  max-width: none;
  height: 100vh;
  margin: 0;
  padding: 48px 28px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Sin barra visible: quedaba una franja gris entre el contenido y la
     columna derecha. El scroll sigue igual (rueda, trackpad, teclado, táctil). */
  scrollbar-width: none;
}

.dashboard-layout:has(.shell-side-col) .main-content::-webkit-scrollbar {
  display: none;
}

.shell-side-col {
  flex: 0 0 360px;
  width: 360px;
  height: 100vh;
  max-height: none;
  padding: 48px 28px 24px 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.shell-side-col::-webkit-scrollbar {
  width: 6px;
}

.shell-side-col::-webkit-scrollbar-track {
  background: transparent;
}

.shell-side-col::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

.shell-stats-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Premium "Súper" running icon — el elemento solo se renderiza en DOM
   cuando profile.plan === 'premium' (ver shell.js renderShellSideWidgets).
   No necesita display:none por default — si está en el DOM, debe verse. */
.stat-premium-run-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 2px 6px rgba(108, 43, 255, 0.18));
}

.stat-premium-run-btn img {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
}

.stat-premium-run-btn:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(108, 43, 255, 0.28));
}

.stat-premium-run-btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}

#view-outlet .learn-topbar .learn-stats-group {
  display: none;
}

#view-outlet .learn-topbar {
  justify-content: flex-start;
}

.dashboard-layout:has(.shell-side-col) #view-outlet .learn-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ─── Páginas de dos columnas propias (sin la columna del shell) ──────
   Perfil, Logros y las seis pantallas del área de Configuración traen su
   propia rejilla, así que la columna derecha del shell (.shell-side-col, la
   de Skora Súper / Ligas / Desafíos) sobra en ellas.

   ⚠️ El criterio es `body[data-route]` y NO `:has(.settings-page-wrapper)`.
   Parece equivalente y no lo es: js/router.js fija data-route ANTES del guard
   de autenticación y del fetch de la vista, mientras que el contenido no entra
   al DOM hasta después. Con `:has()` hay un instante en que la vista vieja ya
   no está y la nueva todavía no, la regla deja de aplicar, y la columna de
   Aprender asoma de golpe. Ese era el parpadeo al cambiar de página.

   Una ruta nueva con rejilla propia se añade AQUÍ, a las cuatro listas. */

/* La columna vive OCULTA y sólo se enciende donde toca (lista blanca).
   Al revés no funciona, y esto costó encontrarlo: el router fija data-route
   antes del guard de autenticación, pero `hideShell()` sólo corre después. Al
   salir hacia una ruta sin shell (Soporte → Planes) el shell sigue montado con
   el data-route nuevo, y con una lista negra la columna reaparecía durante todo
   el viaje de red — un parpadeo largo y muy visible. Con lista blanca eso no
   puede pasar: si la ruta no está aquí, no se enciende.

   Estas nueve son las que la tenían antes de invertir la regla, comprobado
   ruta por ruta contra el CSS anterior.

   Y el criterio es data-shell-view, no data-route: data-route cambia al pedir
   la ruta, y yendo a una pantalla SIN shell (una lección) Aprender seguía
   visible mientras cargaba, ya sin columna, con el árbol estirado. El router
   fija data-shell-view justo cuando vacía el outlet para la vista nueva. */
body:not([data-shell-view="learn"]):not([data-shell-view="quizzes"]):not([data-shell-view="simulacros"]):not([data-shell-view="progress"]):not([data-shell-view="store"]):not([data-shell-view="challenges"]):not([data-shell-view="leagues"]):not([data-shell-view="friends"]):not([data-shell-view="maintenance"]) .shell-side-col {
  display: none !important;
}

body[data-route="profile"] .dashboard-layout,
body[data-route="achievements"] .dashboard-layout,
body[data-route="settings"] .dashboard-layout,
body[data-route="settings_account"] .dashboard-layout,
body[data-route="settings_appearance"] .dashboard-layout,
body[data-route="subscription"] .dashboard-layout,
body[data-route="soporte"] .dashboard-layout,
body[data-route="soporte_detalle"] .dashboard-layout {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  align-items: flex-start;
}

body[data-route="profile"] .main-content,
body[data-route="achievements"] .main-content,
body[data-route="settings"] .main-content,
body[data-route="settings_account"] .main-content,
body[data-route="settings_appearance"] .main-content,
body[data-route="subscription"] .main-content,
body[data-route="soporte"] .main-content,
body[data-route="soporte_detalle"] .main-content {
  width: 100%;
  max-width: 1180px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

[data-theme="dark"] body[data-route="profile"] .dashboard-layout,
[data-theme="dark"] body[data-route="achievements"] .dashboard-layout,
[data-theme="dark"] body[data-route="settings"] .dashboard-layout,
[data-theme="dark"] body[data-route="settings_account"] .dashboard-layout,
[data-theme="dark"] body[data-route="settings_appearance"] .dashboard-layout,
[data-theme="dark"] body[data-route="subscription"] .dashboard-layout,
[data-theme="dark"] body[data-route="soporte"] .dashboard-layout,
[data-theme="dark"] body[data-route="soporte_detalle"] .dashboard-layout {
  background: var(--bg-primary);
}


/* ─── Mobile sidebar hide + main-content padding (Round 12) ─────────── */
@media (max-width: 1024px) {
  .sidebar,
  #canonical-sidebar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 8px var(--m-pad) calc(var(--m-bottomnav-h) + var(--m-pad) + env(safe-area-inset-bottom, 0px)) var(--m-pad) !important;
    max-width: 100% !important;
    /* Nada puede desplazar el contenido horizontalmente (ni gestos ni JS). */
    overflow-x: clip;
  }

  /* Cadena completa: el corte-por-la-izquierda en device real venía de
     scrollLeft > 0 en algún ancestro con overflow horizontal. clip lo
     prohíbe incluso programáticamente (a diferencia de hidden). */
  body[data-route="learn"] {
    overflow-x: clip;
  }

  /* /learn: el árbol pasa POR DEBAJO de la barra glass inferior, así el
     corte visual ocurre exactamente en su hairline (antes el área de scroll
     terminaba arriba y quedaba una franja blanca — el "marco" de abajo).
     El propio .skill-tree-container ya trae padding-bottom con safe-area. */
  body[data-route="learn"] .main-content {
    padding-bottom: 0 !important;
  }
}