/* =============================================================
   Adsumus — shell.css
   Topbar, sidebar em acordeão, layout de página, aviso de demo.
   Idêntico em todas as telas. Nenhuma tela redefine estas regras.
   ============================================================= */

/* ---------- TOPBAR ------------------------------------------ */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:var(--s5);
  height:var(--topbar-h); padding-right:var(--s6);
  background:var(--surface); border-bottom:1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:11px;
  width:var(--rail); flex:0 0 var(--rail); height:100%;
  padding-left:var(--s6); border-right:1px solid var(--border);
  transition:width .16s, flex-basis .16s;
}
.brand img{ width:34px; height:34px; object-fit:contain; display:block; }
.brand-txt strong{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:14px; letter-spacing:.06em; color:var(--navy);
  text-transform:uppercase;
}
.brand-txt span{
  display:block; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.top-title{ display:flex; flex-direction:column; gap:1px; margin-right:auto; min-width:0; }
.top-title b{ font-family:var(--f-display); font-size:15px; font-weight:600; }
.top-title small{ color:var(--muted); font-size:var(--t-label); }
.clock{
  display:flex; flex-direction:column; align-items:flex-end;
  padding-right:var(--s4); border-right:1px solid var(--border);
}
.clock b{ font-family:var(--f-mono); font-size:14px; font-weight:600; }
.clock span{ font-size:11px; color:var(--muted); }

/* ---------- SHELL ------------------------------------------- */
.shell{ display:flex; align-items:stretch; min-height:calc(100vh - var(--topbar-h)); }

.sidebar{
  width:var(--rail); flex:0 0 var(--rail);
  background:var(--navy-nav); color:var(--nav-fg);
  padding:var(--s3) 0 var(--s4); display:flex; flex-direction:column;
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h));
  overflow-y:auto; overflow-x:hidden;
  transition:width .16s, flex-basis .16s;
}
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--navy-hi); border-radius:4px; }

/* grupo acordeão */
.nav-group{ padding:0 var(--s3); }
.group-btn{
  display:flex; align-items:center; gap:9px; width:100%;
  height:34px; padding:0 10px; margin-top:var(--s2);
  border:0; border-radius:var(--r-sm); background:transparent; cursor:pointer;
  font-family:var(--f-display); font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.10em; text-transform:uppercase; color:var(--nav-muted);
  text-align:left; transition:background .12s, color .12s;
}
.group-btn:hover{ background:var(--navy-hi); color:var(--nav-fg); }
.group-btn .caret{ margin-left:auto; transition:transform .16s; stroke:currentColor; }
.group-btn[aria-expanded="true"]{ color:var(--nav-fg); }
.group-btn[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.group-items{ display:none; padding-bottom:var(--s1); }
.group-btn[aria-expanded="true"] + .group-items{ display:block; }

/* rótulo de seção — não clicável */
.nav-section{
  display:block; padding:11px 10px 5px;
  font-family:var(--f-display); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--nav-section);
}

.nav-item{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  min-height:38px; padding:0 10px 0 11px; margin-bottom:2px;
  border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--nav-fg); text-decoration:none; text-align:left;
  font-size:var(--t-dense); font-weight:500; cursor:pointer;
  transition:background .12s, color .12s;
}
.nav-item .ico{ opacity:.9; }
.nav-item:hover{ background:var(--navy-hi); color:#fff; }
.nav-item[aria-current="page"]{ background:var(--navy-hi); color:#fff; font-weight:600; }
.nav-item[aria-current="page"]::before{
  content:""; position:absolute; left:-11px; top:7px; bottom:7px;
  width:3px; border-radius:0 3px 3px 0; background:var(--cyan);
}
.nav-item[aria-current="page"] .ico{ stroke:var(--cyan); opacity:1; }
.nav-item[aria-disabled="true"]{ color:var(--nav-muted); cursor:not-allowed; }
.nav-item[aria-disabled="true"]:hover{ background:transparent; color:var(--nav-muted); }
.nav-item .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-badge{
  margin-left:auto; font-family:var(--f-mono); font-size:11px; font-weight:600;
  padding:1px 7px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink);
}
.nav-soon{
  margin-left:auto; font-family:var(--f-display); font-size:9.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:var(--r-sm);
  background:var(--navy-hi); color:var(--nav-muted); border:1px solid var(--navy-line);
}
.side-foot{
  margin-top:auto; padding:var(--s3) var(--s6) 0; border-top:1px solid var(--navy-line);
  font-size:11.5px; color:var(--nav-muted); line-height:1.55;
}
.side-foot b{ color:var(--nav-fg); font-weight:600; }
.side-collapse{
  margin:var(--s3) var(--s3) 0; height:32px;
  display:flex; align-items:center; gap:9px; padding:0 10px;
  border:1px solid var(--navy-line); border-radius:var(--r-sm);
  background:transparent; color:var(--nav-muted); cursor:pointer;
  font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.side-collapse:hover{ background:var(--navy-hi); color:var(--nav-fg); }

/* modo ícone */
body.rail-collapsed .brand{ width:var(--rail-collapsed); flex-basis:var(--rail-collapsed); padding-left:var(--s3); }
body.rail-collapsed .brand-txt{ display:none; }
body.rail-collapsed .sidebar{ width:var(--rail-collapsed); flex-basis:var(--rail-collapsed); }
body.rail-collapsed .sidebar .lbl,
body.rail-collapsed .sidebar .nav-badge,
body.rail-collapsed .sidebar .nav-soon,
body.rail-collapsed .sidebar .nav-section,
body.rail-collapsed .sidebar .side-foot,
body.rail-collapsed .group-btn span,
body.rail-collapsed .group-btn .caret,
body.rail-collapsed .side-collapse span{ display:none; }
body.rail-collapsed .group-items{ display:block; }
body.rail-collapsed .nav-item{ justify-content:center; padding:0; }
body.rail-collapsed .group-btn{ justify-content:center; padding:0; }
body.rail-collapsed .group-btn::after{
  content:""; display:block; width:18px; height:1px; background:var(--navy-line);
}

/* ---------- PÁGINA ------------------------------------------ */
main.page{ flex:1; min-width:0; padding:var(--s5) var(--s6) var(--s10); }
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap;
}
.page-head h1{ font-size:var(--t-page); font-weight:700; }
.page-head .source{
  margin:3px 0 0; color:var(--muted); font-size:var(--t-label);
}
.page-head .crumb{ margin-bottom:6px; }
.head-actions{ display:flex; align-items:center; gap:var(--s2); }

.seg{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
}
.seg button{
  height:30px; padding:0 13px; border:0; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--muted-strong);
  font-family:var(--f-display); font-weight:600; font-size:var(--t-label);
}
.seg button:hover{ background:var(--surface-3); color:var(--fg); }
.seg button[aria-pressed="true"]{ background:var(--navy); color:#fff; }
.seg button[aria-pressed="true"]:hover{ background:var(--navy-hi); color:#fff; }

.demo-flag{
  display:flex; align-items:center; gap:9px; margin:var(--s3) 0 var(--s4);
  padding:9px 13px; border:1px dashed var(--border-strong); border-radius:var(--r);
  background:var(--surface); color:var(--muted); font-size:var(--t-label);
  flex-wrap:wrap;   /* o texto do aviso é longo: o botão desce em vez de espremer */
}
.demo-flag > span{ flex:1 1 240px; min-width:0; }
.demo-flag .ico{ stroke:var(--cyan); }
.demo-flag b{ color:var(--fg-soft); }
.demo-flag .restore{ margin-left:auto; }

.grid-kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-bottom:var(--s3); }
.grid-kpi.six{ grid-template-columns:repeat(6,1fr); }
.grid-2{ display:grid; grid-template-columns:1.55fr 1fr; gap:var(--s3); margin-bottom:var(--s3); }

/* ---------- RESPONSIVO -------------------------------------- */
@media (max-width:1180px){
  .grid-kpi, .grid-kpi.six{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}
/* ---------- link de pulo -----------------------------------
   Fora da tela até receber foco. Quando aparece, obedece aos
   mesmos tokens de botão primário: não é um enxerto.          */
.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  transform:translateY(-200%); transition:transform .15s ease;
  display:inline-flex; align-items:center; height:36px; padding:0 var(--s4);
  background:var(--accent); color:var(--accent-ink);
  border-radius:var(--r); font-family:var(--f-display);
  font-weight:600; font-size:var(--t-dense); text-decoration:none;
}
.skip:focus{ transform:none; }

@media (max-width:1024px){
  /* tablet: sidebar em modo ícone por padrão */
  .brand{ width:var(--rail-collapsed); flex-basis:var(--rail-collapsed); padding-left:var(--s3); }
  .brand-txt{ display:none; }
  .sidebar{ width:var(--rail-collapsed); flex-basis:var(--rail-collapsed); }
  .sidebar .lbl, .sidebar .nav-badge, .sidebar .nav-soon,
  .sidebar .nav-section, .sidebar .side-foot,
  .group-btn span, .group-btn .caret, .side-collapse span{ display:none; }
  .group-items{ display:block; }
  .nav-item, .group-btn{ justify-content:center; padding:0; }
}
@media (max-width:640px){
  .sidebar{ display:none; }
  .top-title, .clock{ display:none; }
  main.page{ padding:var(--s4) var(--s3) var(--s8); }
  .grid-kpi, .grid-kpi.six{ grid-template-columns:1fr; }
}