/* Paleta y componentes compartidos de JLD — fuente de verdad: static/app.css
   (el panel de Operaciones que ya se usa a diario). Cualquier pantalla nueva
   (login, portal, administración, Cuadro de Mando) debe reutilizar estos
   mismos valores en vez de inventar los suyos. */
:root{
  --jld-navy:#102a3a;
  --jld-blue:#176f8d;
  --jld-cyan:#1ca4b9;
  --jld-ink:#182730;
  --jld-muted:#687b84;
  --jld-line:#dce6e9;
  --jld-bg:#f3f7f8;
  --jld-red:#b44038;
  --jld-amber:#b66d10;
  --jld-green:#287b62;
}

/* Insignia de marca "JLD": cuadrado redondeado con degradado cian→azul.
   Es el logo hasta que el cliente aporte uno propio. Mismo marcado en
   todas las pantallas: <div class="jld-badge">JLD</div> */
.jld-badge{
  width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(145deg,var(--jld-cyan),var(--jld-blue));
  color:#fff;font-weight:900;font-size:.8rem;letter-spacing:.02em;
}

/* Cabecera compartida de todas las pantallas de Operaciones/portal/
   administración (plantilla templates/_topbar.html), incluido el propio
   panel de Operaciones. */
.jld-topbar{
  height:76px;background:var(--jld-navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(24px,calc((100% - 1240px)/2));
  box-shadow:0 4px 18px #102a3a22;
}
.jld-topbar .jld-brand{display:flex;align-items:center;gap:12px}
.jld-topbar .jld-brand strong{display:block;font-size:1rem}
.jld-topbar .jld-brand small{display:block;color:#b9ced7;margin-top:3px;font-size:12px}
.jld-topbar nav{display:flex;gap:18px;align-items:center}
.jld-topbar nav a{color:#dce9ec;font-weight:700;text-decoration:none;font-size:.85rem}
.jld-topbar nav a:hover{color:#fff;text-decoration:underline}
.jld-topbar .jld-user{color:#b9ced7;font-size:.8rem;font-weight:600;white-space:nowrap}
.jld-topbar form{margin:0}
.jld-topbar button.jld-logout{border:0;background:transparent;color:#f2b6ae;font-weight:700;cursor:pointer;font:inherit}