/* ============================================================================
   oci-ui.css — base compartilhada do Módulo OCI (Onda 1 · redesenho)
   ESCOPO LOTE 1: tokens oficiais (PROJETO.md §7.1) + componente de navegação.
   Tudo prefixado com .oci-* para NÃO colidir com o CSS próprio de cada tela.
   A unificação dos demais componentes (.card/.btn/.stat) é do Lote 4.
   ========================================================================== */
:root{
  --primary:#1f564f; --primary-2:#2d8b7e; --bg:#f8fafc; --surface:#fff;
  --border:#cbd5e1; --text:#1a2332; --text-2:#475569;
  --success:#15803d; --warning:#d97706; --error:#b91c1c; --info:#0369a1;
  --oci-topbar-h:56px;
}

/* ---- barra superior teal (56px) ---- */
.oci-topbar{
  height:var(--oci-topbar-h); background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; position:sticky; top:0; z-index:1000;
  box-shadow:0 1px 4px rgba(0,0,0,.15); font-family:'Inter Tight',system-ui,sans-serif;
}
.oci-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.oci-logo{
  width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; letter-spacing:-.5px;
}
.oci-brand .t{font-weight:700; font-size:15px; line-height:1}
.oci-brand .s{font-size:11px; opacity:.8; margin-top:1px}
.oci-right{display:flex; align-items:center; gap:14px}
.oci-muni{
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  background:rgba(255,255,255,.12); padding:6px 10px; border-radius:8px;
}
.oci-perfil{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  background:rgba(255,255,255,.12); padding:6px 10px; border-radius:8px;
}
.oci-perfil .pl{opacity:.8; font-weight:500}
.oci-sair{
  display:flex; align-items:center; gap:6px; color:#fff; opacity:.85;
  font-size:12px; font-weight:600; cursor:pointer; background:none; border:0;
  font-family:inherit;
}
.oci-sair:hover{opacity:1}
.oci-entrar{
  color:#fff; font-size:12px; font-weight:700; text-decoration:none;
  background:rgba(255,255,255,.18); padding:6px 12px; border-radius:8px;
}

/* ---- barra de abas (sticky logo abaixo da topbar) ---- */
.oci-tabs{
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:stretch; gap:2px; padding:0 12px;
  position:sticky; top:var(--oci-topbar-h); z-index:999; overflow-x:auto;
  font-family:'Inter Tight',system-ui,sans-serif;
}
.oci-tab{
  display:flex; align-items:center; gap:7px; height:48px; padding:0 14px;
  font-size:13px; font-weight:600; color:var(--text-2); text-decoration:none;
  border-bottom:3px solid transparent; white-space:nowrap;
}
.oci-tab:hover{color:var(--text)}
.oci-tab.active{color:var(--primary); border-bottom-color:var(--primary-2)}

/* ---- ícones ---- */
.oci-ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.oci-tab .oci-ic{width:16px; height:16px}

/* ---- integração com as telas existentes (Lote 2) ----
   Quando o nav é injetado, o body recebe a classe .oci-nav-on.
   Encaixa a barra teal no topo (zera só o padding-top) e dá respiro abaixo das abas. */
body.oci-nav-on{padding-top:0 !important}
.oci-tabs{margin-bottom:16px}
/* O logo "OCI" e os breadcrumbs/“← Voltar” internos viram redundância com a barra+abas: escondê-los. */
body.oci-nav-on .logo-mark{display:none}
body.oci-nav-on .breadcrumb{display:none}
/* resíduo de desenvolvimento (campo "cole o token JWT") — fora da visão do usuário */
body.oci-nav-on .auth-banner{display:none}