/* =====================================================================
   RUMBO -- shared client header                              2026-08-12
   =====================================================================
   One bar across every client page, so the logo and navigation stop
   drifting per page. Before this, mi-casa and tendencias each carried a
   near-identical hand-written `.top` and cliente.html had none at all --
   just a floating brand chip over the map.

   Colours are literal, not var(), on purpose: each page declares its own
   :root and cliente.html's differs. A shared component that inherits
   three different palettes is not shared.

   Ground is OBSIDIANA, so per the brand colour rule the lockup used is
   the light-on-dark one (rumbo-wordmark-azul-oscuro.svg) -- the same
   asset the vendor pack already puts on a dark bar.

   --rbo-hdr is exported so pages that pin things to the top of the
   viewport (cliente.html pins the search box, the chips and a toast)
   can offset by exactly the bar height instead of guessing.

   2026-08-24 -- TWO VARIABLES NOW, because the hero band exists:
     --rbo-bar  the BAR's own height. Override this to make the bar
                taller (app.html does, 84px).
     --rbo-hdr  the total offset a page should reserve at the top of
                the viewport = bar + hero. rumbo-header.js MEASURES the
                mounted header and sets this after mount, so pages that
                pin with calc(... + var(--rbo-hdr)) keep working without
                knowing the hero exists. Do not override --rbo-hdr by
                hand any more; override --rbo-bar.
   ===================================================================== */
:root{ --rbo-bar:56px; --rbo-hdr:56px; }

.rbo-top{
  background:#0B1A26;
  color:#fff;
  height:var(--rbo-bar);
  padding:0 20px;
  padding-top:env(safe-area-inset-top);
  box-sizing:content-box;
  display:flex;
  align-items:center;
  gap:22px;
  flex:0 0 auto;             /* never squashed by a flex-column body */
  position:relative;
  z-index:1000;              /* above Leaflet panes (400) and page chrome */
}
.rbo-top .rbo-logo{ display:flex; align-items:center; gap:10px;
  text-decoration:none }
.rbo-top .rbo-logo img{ height:34px; display:block }
/* the brand lockup: compass + RUMBO in the product serif (2026-08-25,
   same face/weight/tracking as the comparables page's .brand) */
.rbo-top .rbo-nombre{ font:600 21px/1 'Source Serif 4',Georgia,serif;
  color:#fff; letter-spacing:.5px }

.rbo-nav{ display:flex; align-items:center; gap:20px; margin-left:auto }
.rbo-nav a{
  color:#9FB4C7;
  font:600 13px/1 Inter,system-ui,sans-serif;
  text-decoration:none;
  padding:7px 2px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.rbo-nav a:hover{ color:#fff }
.rbo-nav a.on{ color:#fff; border-bottom-color:#5FB0FF }

/* the owner lane answers a different person's question, so it reads
   quieter and sits behind a rule rather than beside the three journeys */
.rbo-sep{ width:1px; height:20px; background:#24384A; flex:0 0 auto }
.rbo-nav a.alt{ color:#6E8399; font-weight:500 }
.rbo-nav a.alt:hover{ color:#9FB4C7 }
.rbo-nav a.alt.on{ color:#fff }

/* optional identity, only on the perito-facing pages */
.rbo-who{ font-size:12px; color:#8CA6BC; border-left:1px solid #24384A;
          padding-left:18px; margin-left:18px; white-space:nowrap;
          flex:0 0 auto }

/* =====================================================================
   HERO -- identical on every page                            2026-08-24
   =====================================================================
   Jorge: "hero the same on all pages." One band, one sentence, rendered
   by rumbo-header.js directly under the bar so no page can drift its
   own version. It continues the obsidiana ground so bar + hero read as
   one brand area instead of two stacked strips. Embedded views never
   render it (the shell shows it once for every tab). */
.rbo-hero{
  display:flex; align-items:center; gap:15px;
  background:#0B1A26; color:#fff;
  padding:11px 22px 13px;
  border-top:1px solid #16324A;
  box-shadow:inset 0 6px 12px -8px rgba(0,0,0,.55);
  flex:0 0 auto; position:relative; z-index:999;
}
.rbo-hero img{ height:40px; flex:0 0 auto; display:block }
.rbo-hero .rh-t{
  font:700 19px/1.15 'Source Serif 4',Georgia,serif;
  letter-spacing:-.01em; color:#fff }
.rbo-hero .rh-s{ font-size:12px; line-height:1.35; color:#9FB4C7;
  margin-top:2px; max-width:78ch }
.rbo-hero .rh-s b{ color:#D8E3EC; font-weight:600 }
.rbo-hero .rh-d{ font:500 10.5px/1.3 'IBM Plex Mono',monospace;
  color:#7E93A5; margin-top:4px; letter-spacing:.02em }

/* =====================================================================
   LOGIN -- top right, every page                             2026-08-24
   =====================================================================
   Jorge: "log in at the top right." The session is an ACCESS KEY
   (rumbo_auth.py) -- machine-to-machine keys, hashed at rest. The
   control stores the key in localStorage (this browser only), shows
   who is signed in and the month's remaining quota via /api/v1/uso,
   and rumbo-header.js attaches the key to every /api/ fetch so the
   pages themselves need no wiring. From the PC itself (loopback) no
   key is required and the control says so instead of demanding one. */
/* IDIOMA ES/EN (2026-08-25, Jorge: "I want to toggle from english to
   spanish and have this on the top right corner"). Two words in one
   pill, beside the session control -- small enough to be furniture,
   legible enough to find. It rides with the login into the hero when
   the shell adopts them. */
.rbo-idioma{ display:inline-flex; flex:0 0 auto; align-items:stretch;
  border:1px solid #2A4256; border-radius:99px; overflow:hidden;
  background:#0E2032 }
.rbo-idioma .ri-b{
  background:none; border:0; cursor:pointer; color:#7E93A5;
  padding:6px 11px; font:700 11px/1 Inter,system-ui,sans-serif;
  letter-spacing:.06em }
.rbo-idioma .ri-b:hover{ color:#C6D6E4 }
.rbo-idioma .ri-b.on{ background:#1463B4; color:#fff }

.rbo-login{ position:relative; flex:0 0 auto }
.rbo-login .rl-open{
  background:#12283A; color:#C6D6E4; border:1px solid #2A4256;
  border-radius:99px; padding:7px 14px; cursor:pointer;
  font:600 12.5px/1 Inter,system-ui,sans-serif; white-space:nowrap }
.rbo-login .rl-open:hover{ background:#18324A; color:#fff }
.rbo-login .rl-open.rl-in{ border-color:#2F6B4F; color:#9FD9B8 }
.rbo-login .rl-panel{
  display:none; position:absolute; right:0; top:calc(100% + 9px);
  width:284px; background:#fff; color:#0B1A26;
  border:1px solid #E4EAEF; border-radius:13px; padding:15px 16px;
  box-shadow:0 14px 38px rgba(11,26,38,.22); z-index:1300;
  font:13px/1.5 Inter,system-ui,sans-serif; text-align:left }
.rbo-login .rl-panel.on{ display:block }
.rl-panel h4{ margin:0 0 9px; font:700 14px 'Source Serif 4',Georgia,serif }
.rl-panel label{ display:block; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#6B7A87; font-weight:700; margin-bottom:5px }
.rl-panel input{ width:100%; box-sizing:border-box; padding:8px 10px;
  border:1px solid #E4EAEF; border-radius:8px;
  font:12.5px 'IBM Plex Mono',monospace }
.rl-panel input:focus{ outline:2px solid #5FB0FF; border-color:#5FB0FF }
.rl-panel .rl-go{ margin-top:10px; width:100%; border:0; cursor:pointer;
  background:#1463B4; color:#fff; border-radius:9px; padding:9px 0;
  font:600 13px Inter,system-ui,sans-serif }
.rl-panel .rl-go:hover{ background:#1E90FF }
.rl-panel .rl-msg{ font-size:11.5px; margin-top:8px; color:#6B7A87 }
.rl-panel .rl-msg.err{ color:#A31621 }
.rl-panel .rl-msg.ok{ color:#2F7A6A }
.rl-panel .rl-note{ font-size:11px; color:#8CA0AF; margin-top:9px;
  line-height:1.45 }
.rl-panel .rl-row{ display:flex; justify-content:space-between; gap:10px;
  font-size:12.5px; padding:3px 0 }
.rl-panel .rl-row b{ font-weight:600 }
.rl-panel .rl-out{ margin-top:11px; width:100%; border:1px solid #E4EAEF;
  cursor:pointer; background:#fff; color:#A31621; border-radius:9px;
  padding:8px 0; font:600 12.5px Inter,system-ui,sans-serif }
.rl-panel .rl-out:hover{ background:#FBE9EB }

/* a second row of page-internal modes, directly under the bar. Same
   shape as the tabs tendencias.html already uses, so a page with modes
   and a page with tabs look like the same product. */
.rbo-modos{ display:flex; background:#fff; border-bottom:1px solid #E4EAEF;
            flex:0 0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch }
.rbo-modos a{ padding:13px 18px; font:500 13.5px/1 Inter,system-ui,sans-serif;
              color:#6B7A87; text-decoration:none; white-space:nowrap;
              border-bottom:3px solid transparent; display:flex;
              align-items:center; min-height:46px }
.rbo-modos a.on{ color:#0B1A26; border-bottom-color:#1E90FF; font-weight:600 }
.rbo-modos a:hover{ color:#0B1A26 }

/* phone: shorter bar, tighter gaps, and the nav is allowed to scroll
   sideways rather than wrap and double the bar height */
@media(max-width:860px){
  :root{ --rbo-bar:48px; --rbo-hdr:48px; }
  .rbo-top{ padding:0 13px; padding-top:env(safe-area-inset-top); gap:12px }
  .rbo-top .rbo-logo img{ height:26px }
  .rbo-top .rbo-nombre{ font-size:17px }
  .rbo-nav{ gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .rbo-nav a{ font-size:12.5px }
  .rbo-who{ display:none }          /* the identity is the first thing to go */
  .rbo-modos a{ padding:12px 13px; font-size:13px }
  .rbo-hero{ padding:9px 13px 10px; gap:11px }
  .rbo-hero img{ height:30px }
  .rbo-hero .rh-t{ font-size:15.5px }
  .rbo-hero .rh-s{ display:none }   /* one sentence is the phone hero */
  .rbo-hero .rh-d{ font-size:9.5px; margin-top:2px }
  .rbo-idioma .ri-b{ padding:5px 9px; font-size:10.5px }
  .rbo-login .rl-open{ padding:6px 11px; font-size:11.5px }
  .rbo-login .rl-panel{ width:min(284px, calc(100vw - 26px)) }
}