/* ============================================================
   LAYOUT — Estructura principal, sidebar, header, contenido
   ============================================================ */

/* ---- APP SHELL ---- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-layout {
  display: flex;
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

/* ---- SIDEBAR ---- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--transition-base), width var(--transition-base);
  z-index: 100;
  position: relative;
}

.sidebar-header {
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--role-rector), var(--role-coord));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.sidebar-brand {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.sidebar-brand span {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-normal);
  color: var(--text-tertiary);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-section-label {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-4) var(--space-3) var(--space-2);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-section-label:first-of-type {
  margin-top: 0;
  border-top: none;
  padding-top: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
  border: 1px solid transparent;
  margin: 1px 0;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  transform: translateX(3px);
  border-color: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(6, 182, 212, 0.08));
  color: var(--text-primary);
  border-color: rgba(79, 70, 229, 0.35);
  font-weight: var(--fw-semibold);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3.5px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  box-shadow: 0 0 8px var(--color-primary);
}

.nav-item-icon {
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: white;
  font-size: 11px;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
}

.sidebar-footer {
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.15);
}

/* ---- MAIN CONTENT ---- */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-header {
  height: var(--header-height);
  background: rgba(17, 24, 39, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 var(--content-padding);
  gap: var(--space-4);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--content-padding);
}

/* ---- PAGE CONTAINER ---- */
.page {
  max-width: var(--max-content);
  margin: 0 auto;
  display: none;
  animation: fadeSlideIn var(--transition-base) ease;
}

.page.active {
  display: block;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: var(--space-8);
}

.page-header h1 {
  margin-bottom: var(--space-2);
}

.page-header p {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* ---- GRID LAYOUTS ---- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* ---- MOBILE TOGGLE ---- */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  border: 1px solid var(--border-default);
}

/* ---- FULL-SCREEN MODE (para flashcards, simulacro) ---- */
.screen-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-base);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.screen-fullscreen-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.screen-fullscreen-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

/* ---- OVERLAY ---- */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: var(--shadow-xl);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: var(--space-4);
  }

  .screen-fullscreen-body {
    padding: var(--space-4);
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  :root {
    --content-padding: var(--space-4);
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Navegación plana
   ───────────────────────────────────────────────────────────────────────────

   Antes había cinco rótulos en versalitas, cada uno con su línea divisoria.
   Pesaban más en la pantalla que los destinos a los que servían: el ojo
   tropezaba cinco veces antes de llegar a lo que buscaba. El orden de la ruta
   de estudio se conserva —es el mismo, de arriba abajo— pero ahora lo marca
   un filete que no pide atención.
   ─────────────────────────────────────────────────────────────────────────── */

.nav-separador {
  height: 1px;
  margin: var(--space-3) var(--space-3);
  background: var(--border-subtle);
  opacity: 0.55;
}

/* El destino activo.
   Dieciocho destinos y ninguno marcado obligaba a leer las migas de pan para
   saber dónde se estaba. La barra vertical a la izquierda ancla la vista sin
   añadir color de fondo a toda la fila, que a esta densidad satura. */
.sidebar-nav .nav-item.activo {
  color: var(--text-primary);
  background: var(--bg-surface-2);
  box-shadow: inset 3px 0 0 var(--color-primary-light);
  font-weight: var(--fw-semibold);
}

.sidebar-nav .nav-item.activo .nav-item-icon {
  filter: none;
  opacity: 1;
}

.nav-inicio { font-weight: var(--fw-semibold); }

/* ───────────────────────────────────────────────────────────────────────────
   Zona de estado de la cabecera
   ───────────────────────────────────────────────────────────────────────────

   Racha, XP, cargo, tema y salir llevaban cinco tratamientos distintos
   escritos a mano en el marcado: fondos, bordes y tamaños de letra que no
   coincidían. Cinco piezas del mismo rango pidiendo atención de cinco formas
   distintas es lo que hace que una cabecera se sienta cargada, más aún que
   el número de piezas.

   Ahora comparten forma y solo se diferencian por lo que significan: el color
   del cargo identifica, el ámbar de la racha alienta, y lo demás es neutro.
   ─────────────────────────────────────────────────────────────────────────── */

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.estado-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* Las que son botones se comportan como botones. */
.estado-accion { cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.estado-accion:hover { border-color: var(--color-primary-light); color: var(--text-primary); }
.estado-accion:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* La racha se apaga cuando no hay ninguna: el estilo acompaña al texto
   «Sin racha» en vez de contradecirlo con un ámbar encendido. */
#header-racha { color: #F59E0B; border-color: rgba(245, 158, 11, .3); }

/* El cargo es lo único que identifica, así que es lo único con color propio. */
.estado-cargo {
  color: var(--acento, var(--text-secondary));
  border-color: color-mix(in srgb, var(--acento, var(--border-subtle)) 45%, transparent);
  background: color-mix(in srgb, var(--acento, var(--bg-surface-2)) 12%, transparent);
  font-weight: var(--fw-bold);
}

/* Cuenta de administrador. Comparte la pieza de la zona de estado y solo
   cambia el color, igual que hace el cargo: es la misma jerarquía visual,
   dice otra cosa. Va aquí y no escrito a mano en la cabecera para que la
   regla siga siendo «una sola pieza repetida». */
.estado-admin {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-weight: var(--fw-bold);
}

/* Identidad del panel: logotipo y título de la cabecera del administrador. */
.admin-identidad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-marca { display: flex; flex-direction: column; min-width: 0; }
.admin-titulo { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.admin-correo {
  font-size: 11.5px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-logo {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), #818CF8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, .35);
}

@media (max-width: 720px) {
  .estado-chip { padding: 0 8px; font-size: 11px; }
}