/* ===========================================================================
   Edmundo Ríos School — layout.css
   Navbar fixed, sidebar, footer, bottom nav móvil.

   Estrategia responsive: en celular la navegación vive ABAJO (bottomnav), donde
   llega el pulgar; el sidebar se convierte en cajón deslizable. En escritorio el
   sidebar es fijo y el bottomnav desaparece. Mismo HTML, sin duplicar vistas.
   =========================================================================== */

:root {
  --navbar-h: 60px;
  --sidebar-w: 252px;
  --bottomnav-h: 62px;
}

/* ── Estructura general ───────────────────────────────────────────────────── */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.shell-main {
  flex: 1 0 auto;
  padding: 1.25rem 0;
  /* Deja aire para navbar fijo arriba y bottomnav abajo (+ safe-area del iPhone) */
  margin-top: var(--navbar-h);
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}
@media (min-width: 900px) {
  .shell-main { padding-bottom: 1.5rem; }
  .has-sidebar .shell-main { margin-left: var(--sidebar-w); }
  .has-sidebar .footer      { margin-left: var(--sidebar-w); }
}

/* ── Navbar (fijo) ────────────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--navbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: var(--surface);
  border-bottom: var(--bw) solid var(--border);
}
@media (min-width: 900px) {
  .has-sidebar .navbar { left: var(--sidebar-w); }
  /* En escritorio el sidebar ya muestra la marca: repetirla en la barra la
     duplica en pantalla. En móvil el sidebar es un cajón oculto, así que ahí
     el logo de la barra SÍ se queda (es el único). */
  .has-sidebar .navbar > .navbar-brand { display: none; }
}

.navbar-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.0625rem; color: var(--text);
  letter-spacing: -.02em;
}
.navbar-brand:hover { text-decoration: none; }
.navbar-brand img { height: 30px; width: auto; }
/* Nombre de la escuela junto a la marca: en la serif de display y espaciado,
   como el logo. En noche va en blanco: el salvia sobre fondo oscuro se apaga. */
.navbar-logo-text {
  font-family: var(--font-display, var(--font));
  font-size: 1.15rem; font-weight: 500; letter-spacing: .06em;
  color: var(--brand);
}
[data-theme="dark"] .navbar-logo-text { color: #fff; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .navbar-logo-text { color: #fff; }
}
.navbar-logo-img { height: 34px; width: auto; }

/* Marca de respaldo mientras la escuela no sube su logo: el disco de la
   identidad de Edmundo Ríos, dibujado en CSS. Sin imágenes = sin request extra. */
/* Marca de respaldo (Ui::logo sin logo cargado): el monograma en trazo sobre el
   color de marca. El SVG hereda `currentColor`, así que basta con el color del
   contenedor — y por eso NO lleva fondo relleno: el aro del propio dibujo ya
   hace de contorno, y rellenarlo lo convertía en una mancha. */
.navbar-logo-mark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--brand); flex: 0 0 auto;
}
.navbar-logo-mark .ic { width: 34px; height: 34px; vertical-align: 0; }

.navbar-actions { display: flex; align-items: center; gap: .375rem; margin-left: auto; }

/* La sección "móvil" del menú de usuario (tema y escuela) solo se ve en celular:
   en la barra no caben, pero esconderlas del todo dejaría al usuario sin salida. */
.usermenu-mobile { display: none; }
.usermenu-subhead { padding: .5rem .75rem .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 680px) {
  /* Navbar compacto: las acciones se mudan al menú del avatar, pero la marca
     de la escuela SÍ se queda visible junto al menú. */
  .navbar { padding: 0 .625rem; gap: .5rem; }
  .navbar-actions > .school-switch { display: none; }   /* la luna (tema) SÍ se queda */
  .usermenu-name { display: none; }                                /* solo el avatar */
  .usermenu-mobile { display: block; }
}

/* Botón hamburguesa (solo móvil) */
.navbar-burger { display: inline-flex; }
@media (min-width: 900px) { .navbar-burger { display: none; } }

/* ── Menú de usuario ──────────────────────────────────────────────────────── */
.usermenu { position: relative; }
.usermenu-trigger {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem; border-radius: 999px;
  border: var(--bw) solid transparent;
}
.usermenu-trigger:hover { border-color: var(--border); }
.usermenu-name { font-weight: 600; font-size: .875rem; max-width: 130px; }
@media (max-width: 640px) { .usermenu-name { display: none; } }

.usermenu-panel {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70;
  min-width: 224px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: .375rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / .16);
}
.usermenu-panel[hidden] { display: none; }
.usermenu-head { padding: .625rem .75rem; border-bottom: 1px solid var(--border); margin-bottom: .375rem; }
.usermenu-head strong { display: block; font-size: .9375rem; }
.usermenu-head span { font-size: .8125rem; color: var(--muted); word-break: break-all; }

.menu-item {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; padding: .625rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 500; color: var(--text);
  text-align: left;
}
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item-icon { width: 18px; text-align: center; flex: 0 0 auto; opacity: .75; }
.menu-item-danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: .375rem 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: var(--bw) solid var(--border);
  /* En móvil arranca fuera de pantalla y entra como cajón */
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar.is-open { transform: translateX(0); }
@media (min-width: 900px) {
  .sidebar { transform: translateX(0); }
}

.sidebar-head {
  display: flex; align-items: center; gap: .5rem;
  height: var(--navbar-h); flex: 0 0 auto;
  padding: 0 1rem;
  border-bottom: var(--bw) solid var(--border);
}
.sidebar-close { margin-left: auto; }
@media (min-width: 900px) { .sidebar-close { display: none; } }

.sidebar-nav { padding: .75rem; flex: 1 1 auto; }
.sidebar-section {
  padding: .875rem .75rem .375rem;
  font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.sidebar-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .6875rem .75rem;
  margin-bottom: .125rem;
  border-radius: var(--radius-sm);
  border: var(--bw) solid transparent;
  font-weight: 600; font-size: .9375rem; color: var(--text);
  min-height: 44px;
}
.sidebar-link:hover { background: var(--surface-2); text-decoration: none; }
.sidebar-link.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.sidebar-icon { width: 20px; text-align: center; flex: 0 0 auto; font-size: 1.0625rem; }

/* Los huecos de icono se dimensionaron para EMOJI (ancho fijo + font-size). Un
   SVG se mide en `em`, así que sin esto se salía de esos 20 px y descuadraba la
   columna de etiquetas. Ya no queda un solo emoji en los menús —todos pasan por
   Ui::icon()—, pero la caja fija se queda: es la que garantiza que las
   etiquetas arranquen todas en la misma columna. */
.sidebar-icon, .bottomnav-icon, .menu-item-icon, .sidebar-subicon {
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-icon .ic   { width: 20px; height: 20px; vertical-align: 0; }
.menu-item-icon .ic { width: 18px; height: 18px; vertical-align: 0; }
.bottomnav-icon .ic { width: 22px; height: 22px; vertical-align: 0; }
/* El icono del enlace activo toma el acento; el resto se queda discreto para
   que el activo se distinga sin depender solo del fondo. */
.sidebar-link.is-active .sidebar-icon { color: var(--accent); }

/* Grupo colapsable (p. ej. Configuración) */
.sidebar-group {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .6875rem .75rem; margin-bottom: .125rem;
  border-radius: var(--radius-sm); border: var(--bw) solid transparent;
  background: none; color: var(--text); font-family: inherit;
  font-weight: 600; font-size: .9375rem; min-height: 44px; cursor: pointer; text-align: left;
}
.sidebar-group:hover { background: var(--surface-2); }
.sidebar-caret { margin-left: auto; font-size: .7rem; color: var(--muted); transition: transform .15s; }
.sidebar-group.is-open .sidebar-caret { transform: rotate(180deg); }
.sidebar-subnav { display: flex; flex-direction: column; gap: .125rem; margin: 0 0 .25rem .9rem; padding-left: .6rem; border-left: 2px solid var(--border); }
.sidebar-subnav[hidden] { display: none; }
.sidebar-sublink {
  display: flex; align-items: center; gap: .6rem; padding: .5625rem .625rem;
  border-radius: var(--radius-sm); color: var(--muted); font-weight: 600; font-size: .875rem; min-height: 40px;
}
.sidebar-sublink:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar-sublink.is-active { background: var(--accent-soft); color: var(--accent); }
.sidebar-subicon { width: 18px; text-align: center; flex: 0 0 auto; font-size: .95rem; }
.sidebar-badge {
  margin-left: auto;
  background: var(--danger); color: #fff;
  border-radius: 999px; padding: .0625rem .375rem;
  font-size: .6875rem; font-weight: 700; min-width: 20px; text-align: center;
}
.sidebar-foot { padding: .75rem; border-top: 1px solid var(--border); flex: 0 0 auto; }

/* Bloque del panel al pie del menú (cómo llegar, a quién avisar).
   `margin-top:auto` lo empuja al fondo cuando el menú es corto, sin fijarlo:
   si algún día la lista de enlaces crece, este bloque baja con ella en vez de
   quedar montado encima. */
.sidebar-card {
  margin: auto .75rem .5rem;
  padding: .75rem;
  background: var(--surface-2);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.sidebar-card-t { margin: 0 0 .5rem; color: var(--muted); }
.sidebar-card-row {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 0 .375rem;
  font-size: .8125rem; line-height: 1.4;
  color: var(--text);
}
.sidebar-card-row:last-child { margin-bottom: 0; }
.sidebar-card-row .ic { color: var(--accent); margin-top: .15em; }
a.sidebar-card-row:hover { color: var(--accent); }

/* Fondo oscuro tras el cajón (solo móvil) */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgb(0 0 0 / .45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .sidebar-backdrop { display: none; } }

/* ── Bottom nav (móvil) ───────────────────────────────────────────────────── */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: var(--bw) solid var(--border);
}
@media (min-width: 900px) { .bottomnav { display: none; } }

.bottomnav-link {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1875rem;
  color: var(--muted); font-size: .6875rem; font-weight: 600;
  border-top: 3px solid transparent;
  margin-top: -3px;
}
.bottomnav-link:hover { text-decoration: none; }
.bottomnav-link.is-active { color: var(--accent); border-top-color: var(--accent); }
.bottomnav-icon { font-size: 1.25rem; line-height: 1; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  flex: 0 0 auto;
  background: var(--surface);
  border-top: var(--bw) solid var(--border);
  padding: 1.5rem 0;
  font-size: .875rem; color: var(--muted);
  /* En móvil el bottomnav tapa el pie: se le da aire */
  margin-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) { .footer { margin-bottom: 0; } }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--accent); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Layout de autenticación ──────────────────────────────────────────────── */
/* Centrado a prueba de pantallas chicas.
 *
 * Antes: `display:grid; place-items:center`. Dos problemas, ambos reales:
 *  1) La columna implícita es `auto`, o sea se dimensiona al max-content del
 *     hijo — los 520px de max-width de la tarjeta. Y `justify-items:center`
 *     impide que el hijo se estire al contenedor, así que su `width:100%`
 *     resolvía contra esos 520px, NO contra la pantalla: la tarjeta se salía
 *     por la derecha en cualquier celular de menos de 520px.
 *  2) `align-items:center` centra verticalmente, pero cuando la tarjeta es más
 *     alta que la pantalla el sobrante se reparte arriba y abajo y el borde
 *     superior queda INALCANZABLE: no se puede hacer scroll hacia arriba.
 *
 * Ahora: flex + `margin:auto` en la tarjeta. En horizontal, `width:100%` resuelve
 * contra el contenedor (pantalla − padding), así que no hay desbordamiento posible.
 * En vertical, los márgenes automáticos centran cuando sobra espacio y se
 * resuelven a 0 cuando falta — la tarjeta se pega arriba y la página scrollea.
 */
.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  padding: 1.25rem;
  background: var(--bg);
}
.auth-card {
  width: 100%; max-width: 430px;
  margin: auto;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
@media (min-width: 480px) { .auth-card { padding: 2.25rem; } }
.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-head h1 { margin-bottom: .25rem; }
.auth-logo { margin: 0 auto .875rem; }
.auth-foot { margin-top: 1.25rem; text-align: center; font-size: .9375rem; color: var(--muted); }

/* ── Cabecera de página ───────────────────────────────────────────────────── */
.page-head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-head h1 { margin: 0; }
.page-head-actions { margin-left: auto; display: flex; gap: .5rem; }

/* ── Contextos de color por rol ───────────────────────────────────────────── */
/* La clase va en <body> y todo el árbol hereda el acento correcto. Así el
   usuario SABE dónde está parado sin leer un título: salvia = su panel de
   alumno, arena = instructor, verde profundo = negocio, carbón = plataforma. */
.ctx-member { --accent: var(--member); --accent-soft: var(--member-soft); --accent-ink: var(--member-ink); }
.ctx-coach  { --accent: var(--coach);  --accent-soft: var(--coach-soft);  --accent-ink: var(--coach-ink); }
.ctx-school { --accent: var(--school); --accent-soft: var(--school-soft); --accent-ink: var(--school-ink); }
.ctx-super  { --accent: var(--super);  --accent-soft: var(--super-soft);  --accent-ink: var(--super-ink); }

/* ── Selector de escuela (navbar) ───────────────────────────────────────── */
/* Solo aparece cuando la persona pertenece a más de una escuela. */
.school-switch { position: relative; }
.school-switch-trigger {
  display: flex; align-items: center; gap: .5rem; padding: .3125rem .5rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: var(--bw) solid var(--border); color: var(--text); font-weight: 600; cursor: pointer; max-width: 200px;
}
.school-switch-trigger:hover { border-color: var(--accent); }
.school-switch-logo { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--surface); font-size: .95rem; }
.school-switch-logo img { width: 100%; height: 100%; object-fit: cover; }
.school-switch-name { font-size: .875rem; }
.school-switch-panel { right: 0; left: auto; min-width: 250px; }
.school-pick { display: flex; align-items: center; gap: .625rem; width: 100%; text-align: left; }
.school-pick.is-active { background: var(--accent-soft); color: var(--accent); }
.school-pick-logo { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 1rem; }
.school-pick-logo img { width: 100%; height: 100%; object-fit: cover; }
.school-pick-check { margin-left: auto; color: var(--accent); font-weight: 800; }


/* ── Pestañas de sección ──────────────────────────────────────────────────── */
/* Son enlaces reales, no un conmutador de JS: cada pestaña es su propia URL.
   En celular la fila scrollea en horizontal en vez de partirse en dos renglones,
   que es lo que hace que se pierda la noción de "estas son hermanas". */
.tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--bw) solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .625rem .875rem;
  color: var(--muted);
  font-size: .9375rem; font-weight: 600;
  white-space: nowrap;
  /* El subrayado se dibuja SIEMPRE, transparente cuando no está activa: así la
     pestaña no brinca 2px al seleccionarse. */
  border-bottom: 2px solid transparent;
  margin-bottom: calc(-1 * var(--bw));
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-icon { font-size: 1rem; line-height: 1; }
.tab-badge {
  min-width: 18px; height: 18px; padding: 0 .3125rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .6875rem; font-weight: 700;
}

/* ===========================================================================
   LA BARRA LATERAL, OSCURA
   ---------------------------------------------------------------------------
   Va oscura SIEMPRE, también con el tema claro. No es un capricho: el escudo
   de la escuela está dibujado sobre negro, y el sitio público es oscuro — una
   barra blanca rompía la continuidad justo en lo primero que se ve al entrar.

   Por eso los colores se declaran aquí dentro y no cuelgan de las variables
   del tema: si colgaran, con el tema claro la barra se volvería blanca otra
   vez y el escudo desaparecería.
   =========================================================================== */
.sidebar {
  --sb-bg:   #0b1006;
  --sb-bg2:  #121a0c;
  --sb-tx:   #e8efe0;
  --sb-mut:  #8d9a80;
  --sb-line: rgba(255, 255, 255, .09);

  background: var(--sb-bg);
  border-right: 0;
  color: var(--sb-tx);
}

/* ── La marca ─────────────────────────────────────────────────────────── */
.sidebar .sidebar-head {
  height: auto; flex-direction: column; align-items: stretch;
  padding: 1.375rem 1rem 1.125rem;
  border-bottom: 1px solid var(--sb-line);
  position: relative;
}
.sidebar-marca {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--sb-tx); text-align: center;
}
.sidebar-marca:hover { text-decoration: none; }
.sidebar-escudo { width: 62px; height: 62px; object-fit: contain; }
.sidebar-marca-n {
  font-family: var(--font-display, inherit);
  font-size: .9375rem; line-height: 1.15; letter-spacing: .04em;
  text-transform: uppercase;
}
.sidebar-marca-l {
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sb-mut);
}
/* La ✕ del cajón se posa sobre la marca: en móvil, en su propia fila robaría
   una altura que hace falta para los enlaces. */
.sidebar .sidebar-close {
  position: absolute; top: .5rem; right: .5rem; color: var(--sb-mut);
}
@media (min-width: 900px) { .sidebar .sidebar-close { display: none; } }

/* ── Los enlaces ──────────────────────────────────────────────────────── */
.sidebar .sidebar-nav { padding: .875rem .75rem; gap: .125rem; flex: 0 0 auto; }
.sidebar .sidebar-link,
.sidebar .sidebar-group {
  color: var(--sb-tx); border-radius: 10px;
  padding: .6875rem .875rem; font-size: .9375rem; font-weight: 500;
}
.sidebar .sidebar-link:hover,
.sidebar .sidebar-group:hover { background: var(--sb-bg2); color: #fff; }
.sidebar .sidebar-icon,
.sidebar .sidebar-subicon { color: var(--sb-mut); }

/* La pastilla verde del activo: rellena, no un borde. Un contorno sobre negro
   apenas se distingue del hover y se pierde de reojo. */
.sidebar .sidebar-link.is-active {
  background: var(--accent);
  color: var(--accent-ink, #0b1408);
  font-weight: 700;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 38%, transparent);
}
.sidebar .sidebar-link.is-active .sidebar-icon { color: inherit; }

.sidebar .sidebar-section {
  color: var(--sb-mut); padding: 1rem .875rem .375rem;
  font-size: .625rem; letter-spacing: .12em;
}
.sidebar .sidebar-subnav { border-left-color: var(--sb-line); }
.sidebar .sidebar-sublink { color: var(--sb-mut); }
.sidebar .sidebar-sublink:hover { color: var(--sb-tx); background: var(--sb-bg2); }
.sidebar .sidebar-sublink.is-active { color: var(--accent); }

/* El contador conserva su rojo: es una alerta, y en verde se confundiría con
   la pastilla del enlace activo. */
.sidebar .sidebar-badge { border: 0; }

/* ── La tarjeta de contacto y el pie ──────────────────────────────────── */
.sidebar .sidebar-card {
  background: var(--sb-bg2); border-color: var(--sb-line); color: var(--sb-tx);
}
.sidebar .sidebar-card-t, .sidebar .sidebar-card-row { color: var(--sb-mut); }
.sidebar .sidebar-card-row:hover { color: var(--sb-tx); }

.sidebar .sidebar-foot {
  border-top: 1px solid var(--sb-line);
  padding: .75rem .75rem 1rem;
}
.sidebar .menu-item { color: var(--sb-tx); border-radius: 10px; }
.sidebar .menu-item:hover { background: var(--sb-bg2); }
.sidebar .menu-item-icon { color: var(--sb-mut); }

/* ── La lámina del fondo ──────────────────────────────────────────────────
   Ocupa el hueco entre el menú y el pie. `flex: 1` con `min-height: 0` le deja
   estirarse en una pantalla alta y encogerse hasta desaparecer en una baja,
   sin empujar los enlaces del pie fuera de la vista — que es lo que pasaría
   con una altura fija.

   `overflow: hidden` es obligatorio: sin él, la foto recortada por `cover`
   se desborda sobre el menú. */
.sidebar-lamina {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow: hidden; display: flex; align-items: flex-end;
}
.sidebar-lamina img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
/* Se funde con el negro por arriba y por abajo: recortada a secas, la foto
   deja dos líneas rectas que delatan el pegote. */
.sidebar-lamina::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sb-bg) 0%, rgba(11,16,6,.15) 34%,
              rgba(11,16,6,.55) 72%, var(--sb-bg) 100%);
}

/* El lema, encima de la foto. Separado se leía como un pie de página y perdía
   la fuerza que tiene sobre la imagen. */
.sidebar-lema {
  position: relative; z-index: 1; margin: 0; padding: 1rem .875rem 1.25rem;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 1.0625rem; line-height: 1.25; text-align: center; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.sidebar { position: fixed; isolation: isolate; }