/* =============================================================================
   TOPBAR UNIFICADO IST — plantilla para replicar en CUALQUIER módulo IST.
   Fuente única de verdad. Referencia viva: Bitácora / Reuniones.
   Pégalo tal cual en el CSS del módulo y usa el markup de abajo. NO lo reescribas:
   si algo no encaja, ajusta el markup del módulo, no esta hoja.

   ── MARKUP (HTML / JSX) DE REFERENCIA ───────────────────────────────────────
   <div class="app">
     <div class="topbar">
       <button class="topbar__logobtn" aria-label="Inicio">
         <img class="topbar__logoimg" src="/logo-ist-oficial.png" alt="IST">
       </button>
       <!-- opcional (solo donde se vuelve al portal) -->
       <!-- <button class="topbar__btn topbar__btn--volver">◄ Portal</button> -->
       <div class="topbar__modtitle">NOMBRE DEL MÓDULO</div>
       <div class="topbar__spacer"></div>
       <div class="pt__user">
         <div class="pt__uname">Nombre Usuario<div class="pt__urol">Rol</div></div>
         <div class="pt__avatar">N</div>
       </div>
       <button class="topbar__btn"><svg …logout…/> <span class="topbar__lbl">Salir</span></button>
     </div>
     <div class="app__body">
       <nav class="sidebar"> …ítems del menú… </nav>
       <main class="content"> …contenido… </main>
     </div>
   </div>

   ── NOTAS ────────────────────────────────────────────────────────────────────
   • Alto de la barra: 58px en móvil/tablet, 62px en escritorio (≥900px).
   • Logo: 38px de alto (32px en móviles muy chicos). En escritorio se CENTRA a lo
     ancho del sidebar (columna izquierda), alineado con el menú.
   • Título del módulo: 24px peso 800, centrado sobre el CONTENIDO (no sobre toda la
     ventana): left = 50% + mitad del sidebar. Si cambias --sidebar-w, se reajusta solo.
   • El botón "◄ Portal" va FUERA de la franja del logo, con su texto completo.
     Reducirlo a una flecha sola fue rechazado: no se hace.
   • En móvil (<900px) el sidebar se oculta; usa una barra inferior (.nav) aparte.
   ============================================================================= */

:root {
  /* Tokens que usa el topbar (sub-conjunto del sistema IST) */
  --card: #ffffff;          /* fondo de la barra */
  --sh-ink:  #1d211a;       /* título del módulo */
  --sh-ink2: #5a6152;       /* nombre de usuario / texto de botón */
  --sh-ink3: #8a927e;       /* rol / textos muted */
  --sh-line:  #e7ebe0;      /* bordes / separador inferior */
  --sh-line2: #dbe6c9;      /* borde en hover */
  --sh-tint:  #edf6e0;      /* fondo hover (verde pastel) */
  --sh-brandink: #3f6a17;   /* texto/acento en hover */
  --sh-deep:   #123f1c;     /* fondo del avatar */
  --sh-ondeep: #c6e6a8;     /* texto del avatar */
  --line: #e3e7e2;          /* borde derecho del sidebar */

  --topbar-h: 58px;         /* 62px en escritorio (ver @media 900px) */
  --sidebar-w: 244px;
  --safe-top: env(safe-area-inset-top, 0px);   /* notch en móvil */
}

/* ── Barra superior ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background: var(--card);
  color: var(--sh-ink);
  border-bottom: 1px solid var(--sh-line);
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px; padding-right: 14px;
  box-shadow: 0 1px 4px rgba(20, 50, 20, 0.05);
}

/* Botón que envuelve el logo. inline-flex + line-height:0 evita que el baseline del
   <img> añada alto extra; flex-shrink:0 protege su ancho. */
.topbar__logobtn { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0; margin: 0; background: none; border: 0; line-height: 0; cursor: pointer; }
.topbar__logoimg { height: 38px; width: auto; display: block; max-height: calc(var(--topbar-h) - 16px); }

/* Título del módulo, centrado (posición absoluta respecto a la barra). */
.topbar__modtitle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 800; font-size: 24px; letter-spacing: .2px; color: var(--sh-ink); white-space: nowrap; pointer-events: none; }

.topbar__spacer { flex: 1; }

/* Botones de la barra (Salir, Portal, …). */
.topbar__btn {
  color: var(--sh-ink2); background: transparent;
  border: 1px solid var(--sh-line);
  border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.topbar__btn:hover { background: var(--sh-tint); color: var(--sh-brandink); border-color: var(--sh-line2); }
.topbar__btn svg { width: 16px; height: 16px; }

/* Bloque de usuario (derecha). */
.pt__user { display: flex; align-items: center; gap: 9px; }
.pt__uname { font-weight: 600; font-size: .82rem; color: var(--sh-ink2); text-align: right; }
.pt__urol { font-size: .72rem; color: var(--sh-ink3); margin-top: -2px; }
.pt__avatar { width: 32px; height: 32px; border-radius: 9px; background: var(--sh-deep); color: var(--sh-ondeep); display: grid; place-items: center; font-weight: 700; font-size: .7rem; flex-shrink: 0; }

/* ── Móvil: la barra se compacta ── */
@media (max-width: 640px) {
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .topbar__btn { padding: 8px 9px; }
  .topbar__modtitle { font-size: 16px; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
  .pt__uname, .pt__urol { display: none; }   /* en móvil queda solo el avatar */
  .topbar__lbl { display: none; }            /* los botones quedan solo con icono */
}
@media (max-width: 480px) {
  .topbar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .topbar__logoimg { height: 32px; }
  .topbar__btn { padding: 7px 8px; }
  .topbar__modtitle { font-size: 14.5px; max-width: 44vw; }
}

/* ── Escritorio (≥900px): logo centrado al ancho del sidebar; título sobre el contenido ── */
@media (min-width: 900px) {
  :root { --topbar-h: 62px; --sidebar-w: 244px; }
  .topbar { padding-left: 0; padding-right: 24px; }
  .topbar__logobtn { width: var(--sidebar-w); justify-content: center; }
  /* El título se centra sobre el ÁREA DE CONTENIDO (a la derecha del sidebar):
     centro = 50% + mitad del ancho del sidebar. */
  .topbar__modtitle { left: calc(50% + var(--sidebar-w) / 2); }
  /* El botón "◄ Portal" arranca justo donde nace la línea del sidebar. El -10px
     cancela el `gap` del topbar; sin él queda separado y se ve descuadrado.
     NO meter este botón dentro de la franja del logo: se encima (rechazado). */
  .topbar__btn--volver { margin-left: -10px; }
}