/*
 * Cortex — casca de navegação compartilhada
 * ------------------------------------------
 * Prefixo `cx-` em tudo, de propósito: as páginas já têm CSS próprio (a Central
 * tem 400 linhas) e nada aqui pode vazar para lá. As cores e a tipografia são as
 * mesmas do index.html; se as variáveis já existirem na página, estas caem por
 * cima sem mudar nada.
 */

:root{
  --cx-bg:#f6f7f9; --cx-card:#fff; --cx-card2:#f9fafb; --cx-line:#e5e8ee;
  --cx-txt:#1a2233; --cx-mut:#5f6b83; --cx-dim:#98a1b3;
  --cx-brand:#4f46e5; --cx-brand-soft:#eef0fd; --cx-chip:#f0f2f6;
  --cx-topo-h:56px; --cx-lado-w:212px;
}

/* a página recebe esta classe quando o nav monta */
body.cx-app{ padding-top:var(--cx-topo-h); padding-left:var(--cx-lado-w); }

/* ---------------- barra superior ---------------- */

.cx-top{
  position:fixed; top:0; left:0; right:0; height:var(--cx-topo-h); z-index:60;
  display:flex; align-items:center; gap:26px; padding:0 22px;
  background:var(--cx-card); border-bottom:1px solid var(--cx-line);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
}
.cx-marca{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:14.5px; color:var(--cx-txt); text-decoration:none; flex:none }
.cx-marca img{ height:22px; display:block }
.cx-marca span{ color:var(--cx-dim); font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase }

.cx-topnav{ display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1 }
.cx-topnav::-webkit-scrollbar{ display:none }
.cx-topnav a{
  display:block; padding:7px 12px; border-radius:8px; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--cx-mut); text-decoration:none;
}
.cx-topnav a:hover{ background:var(--cx-card2); color:var(--cx-txt) }
.cx-topnav a.on{ background:var(--cx-brand-soft); color:var(--cx-brand) }

.cx-sair{
  flex:none; background:var(--cx-card); border:1px solid var(--cx-line); color:var(--cx-mut);
  border-radius:8px; padding:7px 13px; font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.cx-sair:hover{ color:var(--cx-txt) }

/* ---------------- lateral ---------------- */

.cx-side{
  position:fixed; top:var(--cx-topo-h); left:0; bottom:0; width:var(--cx-lado-w); z-index:55;
  background:var(--cx-card); border-right:1px solid var(--cx-line);
  padding:16px 12px; overflow-y:auto;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
}
.cx-side .cx-area{
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cx-dim); padding:0 10px 10px;
}
.cx-side button{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; margin-bottom:2px;
  background:none; border:none; border-radius:8px; padding:9px 10px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--cx-mut); cursor:pointer;
}
.cx-side button:hover{ background:var(--cx-card2); color:var(--cx-txt) }
.cx-side button.on{ background:var(--cx-brand-soft); color:var(--cx-brand) }
.cx-side button.cx-futuro{ color:var(--cx-dim) }
.cx-side .cx-tag{
  font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:var(--cx-chip); color:var(--cx-dim); border-radius:20px; padding:2px 7px; flex:none;
}

/* ---------------- "em breve" (um só, em todo lugar) ---------------- */

.cx-breve{
  background:var(--cx-card); border:1px dashed var(--cx-line); border-radius:14px;
  padding:44px 32px; text-align:center; color:var(--cx-mut);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
}
.cx-breve .cx-ic{
  width:44px; height:44px; border-radius:12px; margin:0 auto 14px;
  background:var(--cx-brand-soft); color:var(--cx-brand);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.cx-breve h3{ font-size:15px; font-weight:800; color:var(--cx-txt); margin-bottom:6px }
.cx-breve p{ font-size:12.5px; max-width:440px; margin:0 auto; line-height:1.6 }
.cx-breve .cx-tag{ display:inline-block; margin-top:14px; font-size:9.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; background:var(--cx-chip); color:var(--cx-dim);
  border-radius:20px; padding:3px 10px }

/* ---------------- telas estreitas: a lateral vira uma faixa ---------------- */

@media (max-width:900px){
  body.cx-app{ padding-left:0; padding-top:calc(var(--cx-topo-h) + 46px) }
  .cx-side{
    top:var(--cx-topo-h); bottom:auto; width:100%; height:46px;
    display:flex; align-items:center; gap:4px; padding:0 12px;
    border-right:none; border-bottom:1px solid var(--cx-line); overflow-x:auto; overflow-y:hidden;
  }
  .cx-side .cx-area{ display:none }
  .cx-side button{ width:auto; margin:0; padding:6px 11px; white-space:nowrap; flex:none }
  .cx-marca span{ display:none }
}
@media (max-width:620px){
  .cx-top{ gap:12px; padding:0 12px }
  .cx-marca{ font-size:0 }
}