/* ===============================
   DESIGN TOKENS
   =============================== */
:root {
  /* ===============================
     Identidad: "Pizarra y tiza" — un cuaderno de estudio con
     correcciones a boli. El verde pizarra enmarca cabecera/pie,
     el amarillo rotulador es el único acento enérgico, y el rojo
     de corrección solo aparece en el momento de la nota.
     =============================== */
  --color-ink: #16261f;
  --color-board: #1f3b33;
  --color-board-hover: #16302a;
  --color-chalk: #faf8f1;
  --color-chalk-card: #ffffff;

  --color-marker: #ffc845;
  --color-marker-hover: #f0b72e;
  --color-marker-ink: #3a2a00;

  --color-flag: #e1502b;
  --color-board-line: rgba(250, 248, 241, .14);
  --color-chalk-soft: rgba(250, 248, 241, .78);

  /* Color de marca (nombres heredados, re-mapeados a la nueva paleta) */
  --color-primary: var(--color-board);
  --color-primary-hover: var(--color-board-hover);
  --color-primary-text: var(--color-board);
  --color-primary-soft: #edf2f0;
  --color-primary-border: #cfe0da;

  --color-accent: var(--color-marker);
  --color-accent-strong: var(--color-flag);

  /* Semánticos */
  --color-success-bg: #e7f7ee;
  --color-success-border: #a9e2c4;
  --color-success-text: #1d6b41;
  --color-danger-bg: #fdebe5;
  --color-danger-border: #f3b6a0;
  --color-danger-text: #9c3417;
  --color-warning-bg: #fff6de;
  --color-warning-border: #f2d48a;
  --color-warning-text: #7a5b06;
  --color-info-bg: #eaf1f0;
  --color-info-border: #bfd6d1;
  --color-info-text: #1f3b33;

  /* Neutrales */
  --color-bg-page: var(--color-chalk);
  --color-bg-card: var(--color-chalk-card);
  --color-border: #e4e0d3;
  --color-text: var(--color-ink);
  --color-text-muted: #5c6660;

  /* Tipografía */
  --font-display: "Space Grotesk", var(--font-sans);
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(22, 38, 31, .08);
  --shadow-md: 0 6px 16px rgba(22, 38, 31, .10);
  --shadow-lg: 0 16px 32px rgba(22, 38, 31, .18);

  /* Espaciado (escala de 8px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* Layout */
  --header-height: 72px;
  /* Ancho del sidebar/chatbot en escritorio (901px+; en móvil el sidebar
     usa su propio ancho fijo min(280px, 82vw), ver @media max-width:900px
     más abajo). clamp() en vez de un número fijo para que no se coma
     tanto sitio en portátiles pequeños (se queda en 260px cerca del
     breakpoint) ni se quede corto en monitores grandes (crece hasta
     320px), sin necesidad de más breakpoints intermedios. */
  --sidemenu-width: clamp(260px, 24vw, 320px);
  --container-max: 1200px;
  --container-md: 760px;

  /* z-index */
  --z-cookie-banner: 1200;
  --z-chatbot: 1100;
  --z-topbar: 1000;
  --z-sidemenu: 998;
  --z-backdrop: 997;

}

/* Reset básico */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--color-bg-page);
  color: var(--color-text);
}

h1, h2, h3, .card-title, .logo-center span {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--color-marker);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.topbar {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--color-board);
  border-bottom: 1px solid rgba(250, 248, 241, .08);
  z-index: var(--z-topbar);
}

.side-menu a {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-primary-text);
}

.side-menu a:hover {
  text-decoration: underline;
}

/* Contenedor interior centrado (contenido de la barra) */
.topbar-inner {
  width: 100%;
  height: 100%;
  position: relative;          /* 🔑 referencia para abs */
}

/* IZQUIERDA — el menú lateral es una continuación del mismo tablón oscuro
   que el topbar (mismo color, sin borde ni sombra entre ambos), para que
   lean como una única pizarra en L envolviendo la esquina, no como un panel
   de admin genérico separado por debajo de la cabecera. */
.side-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0; /* en vez de height: calc(100vh - header): con "bottom" el
                navegador calcula el alto real, sin el redondeo de subpíxel
                que "calc(100vh - Npx)" puede dejar con el escalado de
                pantalla de Windows (125%/150%), visible como una franja
                oscura entre el sidebar y el borde inferior al hacer scroll. */
  width: var(--sidemenu-width);
  background: var(--color-board);
  border-right: none;
  box-shadow: var(--shadow-md);
  z-index: var(--z-sidemenu);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-5);
  overflow-y: auto;
}

.side-menu-backdrop {
  display: none;
}

.menu-left {
  position: absolute;
  left: 20px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;   /* 🔑 centra verticalmente */
  gap: var(--space-2);
}

/* Header del menú */
.side-menu-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.menu-title {
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-lg);
}

/* Links — texto de tiza sobre la pizarra, sin cajas ni bordes. El estado
   activo/hover se marca con un trazo de tiza dibujado a mano (mismo
   lenguaje visual que el círculo de corrección de la nota), no con un
   fondo de "pill" — así el sidebar no se lee como un panel de admin
   genérico. */
.side-menu-links {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-1);
}

.side-menu-links a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  color: var(--color-chalk-soft);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + 4px);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.side-menu-links a::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.3 Q13 1.2 26 5 T51 4.4 T76 5.3 T99 4.6' stroke='%23ffc845' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left center;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.side-menu-links a:hover {
  color: var(--color-chalk);
}

.side-menu-links a:hover::after {
  opacity: .55;
  transform: scaleX(1);
}

.side-menu-links a.is-active {
  color: var(--color-marker);
}

.side-menu-links a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .side-menu-links a::after { transition: opacity 0.001ms; }
}

/* Hamburguesa */
.hamburger {
  font-size: 1.6rem;
  background: transparent;
  border: none;
  color: var(--color-chalk);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px;
}

.hamburger:hover {
  background: rgba(250, 248, 241, .1);
}

/* CENTRO */
.logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* 🔑 centrado perfecto */
  height: 90%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  text-decoration: none;
}

.logo-center img {
  height: 100%;
  width: auto;
}

.logo-center span {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-chalk);
  line-height: 1;
}

/* DERECHA */
.menu-buttons {
  position: absolute;
  right: 20px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-greeting {
  color: rgba(250, 248, 241, .85);
  font-weight: 600;
}

/* Widget de consumo de tokens IA en la topbar (todas las páginas privadas) */
.tokens-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease;
}

.tokens-topbar:hover {
  background: rgba(250, 248, 241, .08);
}

.tokens-topbar__label {
  color: rgba(250, 248, 241, .85);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.tokens-topbar__barra {
  width: 60px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(250, 248, 241, .18);
  overflow: hidden;
}

.tokens-topbar__relleno {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-success-text);
  transform-origin: left;
  transition: transform 200ms ease;
}

.tokens-topbar__relleno--aviso {
  background: var(--color-warning-text);
}

.tokens-topbar__relleno--critico {
  background: var(--color-danger-text);
}

.tokens-topbar__cifra {
  color: rgba(250, 248, 241, .85);
  font-size: var(--text-xs);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

/* Widget del Pomodoro en curso, visible en la topbar de todas las páginas
   privadas (no solo /alumno/pomodoro/) mientras esté iniciado -- ver
   pomodoro-engine.js/pomodoro-widget.js. Oculto (.hidden) en cuanto no hay
   ningún bloque corriendo, para no ocupar sitio de forma permanente. */
.pomodoro-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(250, 248, 241, .25);
  transition: background-color 150ms ease;
}

.pomodoro-topbar:hover {
  background: rgba(250, 248, 241, .08);
}

.pomodoro-topbar__fase {
  color: rgba(250, 248, 241, .85);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.pomodoro-topbar__reloj {
  color: rgba(250, 248, 241, .85);
  font-size: var(--text-xs);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Menú de navegación público — segunda franja bajo el topbar, solo para
   visitantes sin sesión iniciada (Home, Método de estudio, Precios, FAQ). */
.public-nav {
  position: sticky;
  top: var(--header-height);
  width: 100%;
  background: var(--color-board-hover);
  border-bottom: 1px solid rgba(250, 248, 241, .08);
  z-index: calc(var(--z-topbar) - 1);
}

.public-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.public-nav a {
  color: var(--color-chalk-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color .15s ease;
}

.public-nav a:hover {
  color: var(--color-chalk);
}

.public-nav a.is-active {
  color: var(--color-marker);
}

/* Contenedor principal del contenido de la página (centra y limita ancho) */
.page-wrapper {
  max-width: var(--container-max);
  width: 100%;
  margin: var(--space-5) auto;
  padding: 0 var(--space-5); /* padding lateral para pantallas pequeñas */
  flex: 1; /* 🔑 CLAVE para empujar el footer */
}

/* utilidades */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }

/* Oculta visualmente pero mantiene accesible a lectores de pantalla
   (a diferencia de .hidden, que también lo saca del árbol de accesibilidad). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-footer {
  width: 100%;
  background: var(--color-board);
  border-top: 1px solid rgba(250, 248, 241, .08);
  margin-top: var(--space-8);
  color: rgba(250, 248, 241, .75);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-chalk);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-left strong {
  color: var(--color-chalk);
}

.footer-center {
  text-align: center;
  flex: 1;
}

.footer-right a,
.footer-right .footer-label {
  color: var(--color-marker);
  text-decoration: none;
  font-weight: 500;
}

.footer-right a:hover {
  text-decoration: underline;
}

.footer-right .footer-sep {
  margin: 0 6px;
  color: rgba(250, 248, 241, .35);
}

.layout {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

/* Responsive: menú lateral con overlay en pantallas estrechas */
@media (max-width: 900px) {
  .side-menu {
    width: min(280px, 82vw);
  }

  .side-menu-backdrop {
    display: block;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: rgba(15, 23, 42, .4);
    z-index: var(--z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  body:has(#side-menu:not(.hidden)) .side-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Responsive: evita que el logo/título centrado se solape con los botones
   de la derecha (login/registro o usuario) en viewports muy estrechos */
@media (max-width: 480px) {
  .logo-center {
    width: 60%;
    gap: var(--space-2);
  }

  .logo-center span {
    display: none;
  }

  .menu-buttons {
    right: 8px;
    gap: var(--space-1);
  }

  .menu-buttons .btn {
    padding: 6px 10px;
    font-size: var(--text-xs);
  }

  .user-greeting {
    display: none;
  }

  /* En teléfonos muy estrechos, el widget de tokens (ahora junto a la
     hamburguesa) se solaparía con el logo centrado -- se oculta y queda
     disponible en /perfil/. Mismo problema y misma solución para el
     widget del Pomodoro en curso: sigue visible en /alumno/pomodoro/. */
  .menu-left .tokens-topbar,
  .menu-left .pomodoro-topbar {
    display: none;
  }
}

/* Escritorio: el menú lateral y el chatbot (ambos solo existen para
   usuarios autenticados, ver base.html) reservan siempre su hueco a los
   lados del contenido -- esté el menú colapsado o el chat cerrado, ese
   hueco se queda vacío en vez de que el contenido lo ocupe. El contenido
   no se reajusta según esos estados: siempre vive en el hueco fijo de en
   medio. Los dos huecos miden lo mismo (--sidemenu-width + separación) y
   el panel del chatbot usa ese mismo ancho (ver chatbot.css) en vez de
   uno propio, para que el aire entre cada caja y el contenido se vea
   igual a los dos lados, además de quedar el contenido centrado en la
   página y alineado con el logo del header, que sí está centrado. En
   páginas públicas (sin #side-menu) no se reserva nada. */
@media (min-width: 901px) {
  body:has(#side-menu) .layout {
    margin-left: calc(var(--sidemenu-width) + var(--space-6) + var(--space-5));
    margin-right: calc(var(--sidemenu-width) + var(--space-6) + var(--space-5));
  }

  /* .site-footer es hijo de .layout y hereda su ancho de contenido, ya
     reducido por los márgenes de arriba -- pero el footer (fondo de
     pizarra a todo lo ancho, ver width:100% en su regla base) no debe
     regirse por el hueco reservado al menú/chatbot como el contenido.
     Un margin negativo igual y opuesto lo saca de vuelta a los bordes
     reales de la pantalla. */
  body:has(#side-menu) .site-footer {
    margin-left: calc(-1 * (var(--sidemenu-width) + var(--space-6) + var(--space-5)));
    margin-right: calc(-1 * (var(--sidemenu-width) + var(--space-6) + var(--space-5)));
    width: auto;
  }

  /* Con el menú colapsado, unas barras verdes a ambos lados mantienen la
     sensación de marco de pizarra en vez de dejar el borde plano. */
  body:has(#side-menu.hidden)::before,
  body:has(#side-menu.hidden)::after {
    content: "";
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    width: var(--space-3);
    background: var(--color-board);
    box-shadow: var(--shadow-md);
    z-index: var(--z-sidemenu);
    pointer-events: none;
  }

  body:has(#side-menu.hidden)::before {
    left: 0;
  }

  body:has(#side-menu.hidden)::after {
    right: 0;
  }

  /* .page-wrapper se centra con --container-max (1200px) pensando en
     páginas públicas sin menú lateral. Con el menú y el chatbot ya
     reservando su hueco en .layout de arriba (fijo, no depende de si
     están abiertos o colapsados), aquí solo hace falta que el contenido
     llene ese hueco de en medio en vez de centrarse de nuevo con su
     propio max-width. El espacio lateral se da con padding, no con
     margin: el ancho sigue siendo 100% (box-sizing: border-box lo
     absorbe), mientras que un margin horizontal se suma por fuera de ese
     100% y desbordaba el contenedor, provocando scroll lateral. */
  body:has(#side-menu) .page-wrapper {
    max-width: none;
    margin: var(--space-5) 0;
    padding: 0 var(--space-6);
  }
}