/* ==========================================================================
   BAUKO SHELL — estrutura compartilhada do Hub (header, footer, scrollbar)
   --------------------------------------------------------------------------
   Fonte única do "casco" visual dos módulos do Hub. Antes cada HTML recopiava
   este CSS no próprio <style> (mesma fragilidade dos tokens). Agora:
     <link rel="stylesheet" href="/_DESIGN_SYSTEM/colors_and_type.css">
     <link rel="stylesheet" href="/bauko-shell.css">
   e o módulo NÃO redeclara header/.htitle/.hbtn-sm/.footer/scrollbar.

   Markup canônico do header:
     <header>
       <img class="hlogo" src="..." alt="Bauko">
       <span class="htitle">Título do Módulo</span>
       <div class="hright">
         <span class="h-user" id="h-user"></span>
         <span class="hbadge">...</span>
         <button class="hbtn-sm">⚙️</button>
       </div>
     </header>

   Depende dos tokens do Design System (var(--grn), var(--dp), var(--mo)…).
   ========================================================================== */

/* ── Scrollbar fina hover-reveal (some em repouso) ───────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
*:hover::-webkit-scrollbar-thumb{background:var(--bd2,rgba(120,120,120,.4))}
::-webkit-scrollbar-thumb:hover{background:var(--grn,#007c44)}

/* ── Header ──────────────────────────────────────────────────────────────── */
header{
  background:var(--grn);height:52px;padding:0 16px;display:flex;align-items:center;
  gap:10px;position:sticky;top:0;z-index:300;box-shadow:0 2px 10px rgba(0,0,0,.25);
  overflow:hidden;
}
.hlogo{height:32px;filter:brightness(0) invert(1);object-fit:contain;flex-shrink:0}
.htitle{
  font-family:var(--dp);font-size:22px;color:rgba(255,255,255,.85);letter-spacing:.07em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.hright{margin-left:auto;display:flex;align-items:center;gap:10px}
.hbadge{
  font-family:var(--mo);font-size:10px;color:rgba(255,255,255,.5);
  background:rgba(0,0,0,.2);padding:3px 10px;border-radius:20px;
}
.h-user{
  font-family:var(--mo);font-size:10px;color:rgba(255,255,255,.7);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hbtn-sm{
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:20px;padding:4px 12px;cursor:pointer;font-family:var(--fn);
  font-size:11px;font-weight:500;line-height:1.3;color:rgba(255,255,255,.8);transition:background .15s;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
.hbtn-sm:hover,.hbtn-sm:focus-visible{background:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
/* <a> e <button> com a mesma classe devem renderizar IDÊNTICOS (sem isso, o <button> herda
   estilos nativos do navegador — cor de texto/fonte um pouco diferentes do <a> — ver caso
   pmp_contratos.html 12/07: "Agenda"/"Config" (<a>) pareciam mais apagados que "Novidades" (<button>). */
button.hbtn-sm{font:inherit;color:rgba(255,255,255,.8)}
a.hbtn-sm:visited{color:rgba(255,255,255,.8)}
/* botão de header maior (usado em telas de config) */
.hbtn{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  border-radius:20px;padding:5px 14px;cursor:pointer;font-family:var(--fn);
  font-size:12px;font-weight:500;color:#fff;transition:background .15s;
}
.hbtn:hover{background:rgba(255,255,255,.25)}
/* link "voltar" no header */
.hback{
  color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;font-weight:500;
  padding:4px 10px;border-radius:6px;transition:background .15s;white-space:nowrap;
}
.hback:hover{background:rgba(255,255,255,.15);color:#fff}
/* divisória vertical opcional entre botões do header */
.hdiv{width:1px;height:24px;background:rgba(255,255,255,.2);flex-shrink:0}

@media(max-width:580px){.htitle{font-size:16px}}
@media(max-width:380px){.htitle{display:none}}

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* Cobre tanto <div class="footer"> quanto o elemento <footer> (telas de config). */
.footer, footer{
  text-align:center;padding:18px;font-family:var(--mo);font-size:10px;
  color:var(--mu);border-top:1px solid var(--bd);
}

/* ── Botões (kit canônico — usado nas telas de config) ───────────────────────
   Variantes: primary (verde), ghost (outline), warn (amarelo), danger (vermelho).
   Modificador de tamanho: .btn-sm. Markup: <button class="btn btn-primary">. */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:none;
  white-space:nowrap;font-family:var(--fn);
}
.btn-primary{background:var(--grn);color:#fff}
.btn-primary:hover{background:var(--grn2)}
.btn-ghost{background:transparent;border:1px solid var(--bd);color:var(--mu2)}
.btn-ghost:hover{border-color:var(--grn);color:var(--grn)}
.btn-warn{background:transparent;border:1px solid #e8c578;color:var(--ylw)}
.btn-warn:hover{background:var(--ylw2)}
.btn-danger{background:transparent;border:1px solid #f3c5c0;color:var(--neg)}
.btn-danger:hover{background:#fef0ee}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:6px}