/* Topbar compartida — 4° JFS (2026-08-03)
   Por qué existe: cada módulo traía su propio CSS de topbar embebido y
   divergieron con el tiempo — 5 alturas distintas, botón de inicio con dos
   nombres ("Inicio"/"Dashboard") y cuatro estilos, "Cerrar sesión" ausente en
   la mitad de los módulos. Ver docs/DECISIONES.md.
   Requiere que el módulo ya tenga declaradas las variables --navy/--navy2/
   --navy3/--dorado/--dorado2/--gray4/--rad/--font en su propio :root (todas
   ya existen en los 6 módulos que cargan este archivo). */

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px;height:56px;flex-shrink:0;
  background:radial-gradient(circle at 8% 50%,rgba(255,255,255,.08),transparent 32%),
    linear-gradient(135deg,var(--navy3) 0%,var(--navy) 60%,var(--navy2) 100%);
  color:#fff;box-shadow:0 2px 14px rgba(6,25,47,.22);
  position:sticky;top:0;z-index:200;
}
.tb-left{font-size:15px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.tb-clock{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;letter-spacing:.2px}
.tb-clock b{color:var(--dorado2);font-weight:800;margin-left:2px}
.tb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.tb-btn{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:var(--rad);padding:6px 13px;font-size:12px;font-weight:600;
  cursor:pointer;font-family:var(--font);transition:background .15s;white-space:nowrap;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
.tb-btn:hover{background:rgba(255,255,255,.26)}

/* Inicio — siempre el mismo texto, siempre dorado, siempre al final antes de
   Cerrar sesión. Un amarillo más claro que el "dorado" institucional para que
   se distinga de un vistazo del resto de los botones. */
.tb-home{
  background:rgba(255,196,64,.22);border:1px solid rgba(255,196,64,.55);
  color:#FFD976;font-weight:700;
}
.tb-home:hover{background:rgba(255,196,64,.34)}

/* Separador entre Inicio y Cerrar sesión: al ir uno al lado del otro, evita
   el clic accidental sobre el que cierra la sesión. */
.tb-sep{width:1px;align-self:stretch;margin:12px 2px;background:rgba(255,255,255,.18)}

/* Cerrar sesión — deliberadamente "apagado" (gris, no blanco) y más anguloso
   que el resto de los botones, para que no se confunda al tacto ni a la
   vista con una acción de navegación normal. */
.tb-logout{
  background:transparent;border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.6);border-radius:4px;padding:6px 13px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);
  transition:color .15s,border-color .15s;white-space:nowrap;
}
.tb-logout:hover{color:#fff;border-color:rgba(255,255,255,.4)}

@media(max-width:640px){
  .tb-clock{font-size:11px}
  .tb-left .lbl{display:none}
}