/* ===============================
   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-board (#1f3b33) y --color-ink (#16261f) son ambos verdes casi
     negros con la misma luminosidad: un título en --color-primary-text =
     var(--color-board) apenas se distingue del texto normal (ver
     temas.css, mismo ajuste hecho ahí para Corporativo y Claro). Se usa
     el verde más vivo de --color-success-text en su lugar. */
  --color-primary-text: #1d6b41;
  --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;
  scrollbar-width: thin;
  scrollbar-color: var(--color-chalk-soft) transparent;
}

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

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

.side-menu::-webkit-scrollbar-thumb {
  background-color: var(--color-chalk-soft);
  border-radius: var(--radius-full, 999px);
}

.side-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-chalk);
}

.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;
}

/* Cabecera de cada bloque temático del menú lateral (Subir contenido,
   Transformar la información...), a modo de tiza más tenue sobre la
   pizarra para separar los grupos sin romper el estilo del sidebar. */
.side-menu-titulo {
  margin: var(--space-4) var(--space-3) var(--space-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-chalk-soft);
  opacity: .55;
}

.side-menu-titulo:first-child {
  margin-top: 0;
}

.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). */
/* !important: es una utilidad; reglas más específicas (p. ej. inputs a
   ancho completo en un formulario) no deben volver a darle tamaño, o el
   elemento oculto ensancha la página y provoca scroll horizontal. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.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) {
  .topbar .logo-center {
    display: none;
  }

  .topbar .menu-buttons {
    left: 60px;
    right: 8px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .topbar .menu-buttons::-webkit-scrollbar {
    display: none;
  }

  .topbar .menu-buttons > * {
    flex-shrink: 0;
  }

  .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) {
  /* Huecos reservados a cada lado del contenido. En pantallas anchas
     (>= 1600px) son simétricos, como se describe arriba. En portátiles
     (901-1599px) reservar también el hueco del chat dejaba el contenido en
     ~600px a 1366px y ~390px a 1024px: ahí solo se reserva el del menú
     (y nada si está colapsado), y el panel del chat flota sobre el
     contenido al abrirlo. */
  body:has(#side-menu) {
    --hueco-izq: calc(var(--sidemenu-width) + var(--space-6) + var(--space-5));
    --hueco-der: calc(var(--sidemenu-width) + var(--space-6) + var(--space-5));
  }

  body:has(#side-menu) .layout {
    margin-left: var(--hueco-izq);
    margin-right: var(--hueco-der);
  }

  /* .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(--hueco-izq));
    margin-right: calc(-1 * var(--hueco-der));
    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);
  }
}

@media (min-width: 901px) and (max-width: 1599px) {
  body:has(#side-menu) {
    --hueco-izq: calc(var(--sidemenu-width) + var(--space-3));
    --hueco-der: var(--space-3);
  }

  body:has(#side-menu.hidden) {
    --hueco-izq: var(--space-3);
  }

  /* Sin margen derecho el contenido quedaría bajo la burbuja del chat;
     con max-width y centrado no se estira en exceso. */
  body:has(#side-menu) .page-wrapper {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  /* El pie ocupa todo el ancho y el menú fijo tapaba su primer enlace. */
  body:has(#side-menu:not(.hidden)) .footer-inner {
    padding-left: calc(var(--sidemenu-width) + var(--space-5));
  }
}

/* Cabecera: el logo va centrado en absoluto y los botones de la derecha
   (idioma, tema, modelo, saludo, perfil, salir) lo pisaban en portátiles.
   Se recortan por orden de importancia según el ancho. */
@media (max-width: 1500px) {
  .topbar .user-greeting {
    display: none;
  }
}

@media (max-width: 1300px) {
  .topbar .logo-center span {
    display: none;
  }
}

@media (min-width: 481px) and (max-width: 1220px) {
  .topbar .logo-center {
    display: none;
  }
}

/* Móvil apaisado / tablet pequeña: si los botones no caben, se desplazan
   en horizontal (como en móvil) en vez de pisar la hamburguesa. El margen
   automático los mantiene a la derecha cuando sí caben. */
@media (min-width: 481px) and (max-width: 700px) {
  .topbar .menu-buttons {
    left: 60px;
    right: 8px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .topbar .menu-buttons::-webkit-scrollbar {
    display: none;
  }

  .topbar .menu-buttons > * {
    flex-shrink: 0;
  }

  .topbar .menu-buttons > :first-child {
    margin-left: auto;
  }
}

/* En tablet los botones de la derecha llegan hasta el contador de
   créditos de la izquierda: se oculta como en móvil (sigue en /perfil/). */
@media (min-width: 481px) and (max-width: 1000px) {
  .menu-left .tokens-topbar,
  .menu-left .pomodoro-topbar {
    display: none;
  }
}

/* Cerrar sesión dentro del menú lateral: oculto salvo en móvil. */
.side-menu-logout {
  display: none;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(250, 248, 241, .12);
}

.side-menu-logout button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-chalk-soft);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.side-menu-logout button:hover {
  color: var(--color-chalk);
  background: rgba(250, 248, 241, .06);
}

/* Móvil: Perfil y Cerrar sesión se quitan de la barra superior (están
   en el menú lateral) para que idioma, tema y modelo quepan sin tener
   que deslizar la barra. */
@media (max-width: 600px) {
  .topbar .topbar-perfil,
  .topbar .topbar-logout {
    display: none;
  }

  .side-menu-logout {
    display: block;
  }
}

/* Sin sesión en móviles pequeños: botones más compactos para que
   "Registrarse" no quede cortado. */
@media (max-width: 400px) {
  .topbar .menu-buttons .btn {
    padding: 6px 8px;
  }

  .topbar .idioma-selector__trigger {
    padding-inline: 8px;
  }
}

/* Textos cortos de la barra superior para móvil (ocultos por defecto). */
.idioma-selector__code,
.btn-texto-corto {
  display: none;
}

@media (max-width: 600px) {
  .topbar .idioma-selector-form .idioma-selector__current {
    display: none;
  }

  .topbar .idioma-selector-form .idioma-selector__code {
    display: inline;
  }
}

@media (max-width: 389px) {
  .topbar .btn-texto-largo {
    display: none;
  }

  .topbar .btn-texto-corto {
    display: inline;
  }

  .topbar .menu-buttons {
    left: 52px;
  }
}

/* Móviles muy estrechos (320px, iPhone SE de 1ª gen.): sin aire entre botones. */
@media (max-width: 340px) {
  .topbar .menu-buttons {
    gap: 2px;
    right: 4px;
  }

  .topbar .menu-buttons .btn {
    padding: 6px 6px;
  }
}

/* Grupos de la derecha de la barra: en escritorio no existen a efectos de
   maquetación (sus hijos se reparten como antes dentro de .menu-buttons). */
.topbar-ajustes,
.topbar-cuenta {
  display: contents;
}

/* Móvil y móvil apaisado: barra en tres zonas con el logo centrado, como en
   escritorio. Sin sesión: idioma y tema | logo | entrar y registrarse.
   Con sesión: menú | logo | idioma y tema (perfil y salir están en el menú). */
@media (max-width: 700px) {
  .topbar .topbar-inner {
    display: grid;
    /* minmax(0, 1fr): los dos lados miden lo mismo aunque su contenido no,
       y el logo queda en el centro exacto. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    padding: 0 var(--space-3);
  }

  .topbar .menu-left,
  .topbar .logo-center,
  .topbar .menu-buttons {
    position: static;
    transform: none;
    height: auto;
    overflow: visible;
  }

  .topbar .menu-left {
    grid-column: 1;
    justify-self: start;
  }

  .topbar .logo-center {
    display: flex;
    grid-column: 2;
    width: auto;
    height: 38px;
    gap: 0;
  }

  .topbar .logo-center span {
    display: none;
  }

  .topbar .menu-buttons {
    grid-column: 3;
    justify-self: end;
    gap: var(--space-2);
  }

  .topbar .menu-buttons > :first-child {
    margin-left: 0;
  }

  .topbar .topbar-ajustes,
  .topbar .topbar-cuenta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* "Entrar" en vez de "Iniciar sesión": el largo se partía en dos líneas. */
  .topbar .btn-texto-largo {
    display: none;
  }

  .topbar .btn-texto-corto {
    display: inline;
  }

  /* Sin sesión no hay hamburguesa: los ajustes ocupan la zona izquierda. */
  .topbar-inner:not(:has(#menu-toggle)) .menu-left {
    display: none;
  }

  .topbar-inner:not(:has(#menu-toggle)) .menu-buttons {
    display: contents;
  }

  .topbar-inner:not(:has(#menu-toggle)) .topbar-ajustes {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .topbar-inner:not(:has(#menu-toggle)) .topbar-cuenta {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* El menú público cabe en una línea: letra algo menor y reparto a lo ancho. */
  .public-nav__inner {
    flex-wrap: nowrap;
    justify-content: space-evenly;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .public-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .public-nav a {
    flex-shrink: 0;
    font-size: var(--text-sm);
    white-space: nowrap;
  }
}

/* Teléfonos estrechos: logo algo menor para que los dos lados quepan. */
@media (max-width: 400px) {
  .topbar .logo-center {
    height: 32px;
  }

  .topbar .topbar-ajustes,
  .topbar .topbar-cuenta,
  .topbar .menu-buttons {
    gap: var(--space-1);
  }
}

/* Móviles muy estrechos (320px): todo un punto más compacto. */
@media (max-width: 340px) {
  .topbar .topbar-inner {
    column-gap: var(--space-1);
    padding: 0 var(--space-2);
  }

  .topbar .logo-center {
    height: 26px;
  }

  .topbar .idioma-selector__trigger {
    padding-inline: 6px;
  }

  .public-nav a {
    font-size: var(--text-xs);
    padding-inline: var(--space-1);
  }
}