/* Barra lateral do sistema CENBRAP.
   Uma única fonte para as três páginas (esteira, plano de ação e documentação).
   Não depende das variáveis de cor de cada página: as cores dela moram aqui,
   para que a navegação seja idêntica em qualquer tela. */
:root{
  --sb-largura:248px;
  --sb-largura-min:76px;
  --sb-fundo:#0b241e;
  --sb-tinta:#ffffff;
  --sb-suave:#9ed0ba;
  --sb-marca:#c99828;
  --sb-borda:rgba(255,255,255,.12);
  --sb-fonte:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body{padding-left:var(--sb-largura)}
body.sidebar-collapsed{padding-left:var(--sb-largura-min)}

.app-sidebar{
  position:fixed; inset:0 auto 0 0; z-index:70;
  width:var(--sb-largura); padding:22px 14px;
  background:var(--sb-fundo); color:var(--sb-tinta);
  display:flex; flex-direction:column;
  border-right:1px solid var(--sb-borda);
  box-shadow:0 1px 3px rgba(11,36,30,.12), 0 10px 22px -14px rgba(11,36,30,.35);
  font-family:var(--sb-fonte);
}
.sidebar-brand{padding:0 10px 22px; border-bottom:1px solid rgba(255,255,255,.16); margin-bottom:18px}
.sidebar-brand strong{display:block; font-size:16px; line-height:1.15; letter-spacing:.01em}
.sidebar-brand small{display:block; margin-top:5px; color:var(--sb-suave); font-size:11.5px; line-height:1.35}
.sidebar-label{padding:0 10px 8px; color:var(--sb-suave); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.sidebar-nav{display:flex; flex-direction:column; gap:5px}
.sidebar-link{
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px;
  border:1px solid transparent; border-radius:7px;
  color:var(--sb-tinta); background:transparent; text-decoration:none;
  font-size:13.5px; font-weight:600; line-height:1.2;
}
.sidebar-link:hover,.sidebar-link.active{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2)}
.sidebar-link.active{box-shadow:inset 3px 0 var(--sb-marca)}
.sidebar-icon{
  width:18px; height:18px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.sidebar-icon svg{width:18px; height:18px; display:block; opacity:.9}
.sidebar-link.active .sidebar-icon svg{opacity:1}
/* Claro/escuro: o mesmo botão nas três telas, no pé da navegação. */
.sidebar-tema{
  margin-top:auto; display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px;
  border:1px solid var(--sb-borda); border-radius:7px;
  color:var(--sb-tinta); background:transparent; cursor:pointer;
  font-family:var(--sb-fonte); font-size:13.5px; font-weight:600; line-height:1.2; text-align:left;
}
.sidebar-tema:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28)}
.sidebar-footer{padding:12px 10px 0; color:var(--sb-suave); font-size:11px; line-height:1.4}

/* Recolher no desktop */
.sidebar-collapse{
  position:absolute; top:12px; right:10px; width:38px; height:38px;
  border:1px solid rgba(255,255,255,.32); border-radius:7px;
  background:rgba(255,255,255,.14); color:var(--sb-tinta);
  cursor:pointer; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.app-sidebar.collapsed{width:var(--sb-largura-min); padding-left:10px; padding-right:10px; padding-bottom:60px}
.app-sidebar.collapsed .sidebar-brand{padding-left:8px; padding-right:8px}
.app-sidebar.collapsed .sidebar-brand strong{font-size:0}
.app-sidebar.collapsed .sidebar-brand strong:after{content:'C'; font-size:16px}
.app-sidebar.collapsed .sidebar-brand small,
.app-sidebar.collapsed .sidebar-label,
.app-sidebar.collapsed .sidebar-link span:not(.sidebar-icon),
.app-sidebar.collapsed .sidebar-tema span:not(.sidebar-icon),
.app-sidebar.collapsed .sidebar-footer{display:none}
.app-sidebar.collapsed .sidebar-link,
.app-sidebar.collapsed .sidebar-tema{justify-content:center; padding-left:4px; padding-right:4px}
.app-sidebar.collapsed .sidebar-collapse{top:auto; bottom:14px; right:19px}

/* Gaveta no celular */
.sidebar-toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:90;
  width:42px; height:42px; border:1px solid rgba(255,255,255,.25); border-radius:8px;
  background:var(--sb-fundo); color:var(--sb-tinta); font-size:20px; cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(11,36,30,.12), 0 10px 22px -14px rgba(11,36,30,.35);
  font-family:var(--sb-fonte);
}
.sidebar-backdrop{display:none}

@media (max-width:1023px){
  body,body.sidebar-collapsed{padding-left:0}
  .app-sidebar{transform:translateX(-102%); transition:transform .2s ease; width:var(--sb-largura)}
  .app-sidebar.open{transform:none}
  .app-sidebar.collapsed{width:var(--sb-largura); padding-left:14px; padding-right:14px}
  .app-sidebar.collapsed .sidebar-brand strong{font-size:16px}
  .app-sidebar.collapsed .sidebar-brand strong:after{content:''}
  .app-sidebar.collapsed .sidebar-brand small,
  .app-sidebar.collapsed .sidebar-label,
  .app-sidebar.collapsed .sidebar-link span:not(.sidebar-icon),
  .app-sidebar.collapsed .sidebar-tema span:not(.sidebar-icon),
  .app-sidebar.collapsed .sidebar-footer{display:block}
  .app-sidebar.collapsed .sidebar-link,
  .app-sidebar.collapsed .sidebar-tema{justify-content:flex-start; padding-left:10px; padding-right:10px}
  .app-sidebar.collapsed{padding-bottom:22px}
    .sidebar-toggle{display:inline-flex}
  .sidebar-collapse{display:none}
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:65;
    background:rgba(11,36,30,.48); opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  body.sidebar-open .sidebar-backdrop{opacity:1; pointer-events:auto}
  /* com a gaveta aberta o × sai de cima da marca */
  body.sidebar-open .sidebar-toggle{left:auto; right:12px; background:rgba(255,255,255,.14)}
}

/* ---------- quem está logado, e a saída ---------- */
.sidebar-conta{
  margin-top:var(--esp-2,8px); padding-top:12px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column; gap:8px;
}
.conta-quem{
  display:flex; align-items:center; gap:9px; width:100%; padding:6px 5px; min-width:0;
  background:transparent; border:1px solid transparent; border-radius:7px;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.conta-quem:hover{background:rgba(255,255,255,.1); border-color:var(--sb-borda)}
.conta-chave{margin-left:auto; color:var(--sb-suave); font-size:15px; flex:none}
.app-sidebar.collapsed .conta-chave{display:none}
.conta-avatar{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--sb-marca); color:#19332b; font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.conta-txt{min-width:0; display:flex; flex-direction:column; line-height:1.25}
.conta-txt strong{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conta-txt small{color:var(--sb-suave); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sidebar-sair{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px;
  border:1px solid var(--sb-borda); border-radius:7px;
  color:var(--sb-tinta); background:transparent; cursor:pointer;
  font-family:var(--sb-fonte); font-size:13.5px; font-weight:600; line-height:1.2; text-align:left;
}
.sidebar-sair:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32)}
/* Recolhida, a caixa vira só o avatar e o ícone de sair. Vale apenas onde a
   barra é fixa: na gaveta do celular e do tablet ela abre inteira. */
@media (min-width:1024px){
  .app-sidebar.collapsed .conta-txt,
  .app-sidebar.collapsed .sidebar-sair span:not(.sidebar-icon){display:none}
  .app-sidebar.collapsed .conta-quem,
  .app-sidebar.collapsed .sidebar-sair{justify-content:center; padding-left:4px; padding-right:4px}
}