/* Menu Por área aprovado: estilos restritos à navegação e à tela. */
#sidebar-archive[hidden], #menu [data-sidebar-group][hidden] { display:none!important; }
/* Novidades de cobrança: sinal de leitura, independente de saldo/pagamento. */
[data-collection-badge][hidden], #collection-read-note[hidden] { display:none!important; }
@media print {
  .collection-badge, #collection-notice-live, #collection-read-note, .collection-new { display:none!important; }
}
@media screen {
  body #side.sidebar-areas .collection-badge {
    display:inline-flex; flex:none; align-items:center; justify-content:center;
    margin-left:auto; min-width:20px; min-height:20px; padding:1px 5px;
    border-radius:12px; background:#ead5a9; color:#422431;
    font:600 11px/18px system-ui,sans-serif; font-variant-numeric:tabular-nums;
  }
  body #side.sidebar-areas #menu-toggle .collection-badge { margin-left:7px; }
  body .collection-read-note {
    margin:12px 18px 0; padding:9px 12px; color:#551d32;
    background:#f1e6d4; border-left:3px solid #99753b;
    font:400 14px/1.45 system-ui,sans-serif;
  }
  body .collection-new {
    display:inline-block; width:max-content; margin-left:6px; padding:0 5px; border-radius:4px;
    color:#551d32; background:#ead5a9; font:600 11px/14px system-ui,sans-serif;
  }
  body aside#side.sidebar-areas {
    width:224px; gap:0; padding:0; align-self:flex-start;
    height:auto; min-height:100dvh; max-height:none; overflow:visible;
    background:#551d32; border-right:1px solid #80596a; color:#fff8ec;
  }
  body #side.sidebar-areas .sidebar-brand {
    display:flex; align-items:center; gap:10px; flex:none;
    min-height:64px; padding:12px 14px; border-bottom:1px solid #80596a;
  }
  body #side.sidebar-areas .brand { min-width:0; padding:0; border:0; }
  body #side.sidebar-areas .brand svg { width:25px; height:30px; }
  body #side.sidebar-areas .brand h1 {
    margin:0; color:#fff8ec; font:600 19px/1.1 Georgia,serif; letter-spacing:.04em;
  }
  body #side.sidebar-areas .brand h1 small {
    margin-top:4px; color:#fff1d5; opacity:1; font:400 9px/1.4 Arial,sans-serif; letter-spacing:.06em;
  }
  #sidebar-navigation { display:flex; flex-direction:column; flex:1; min-height:0; }
  #sidebar-areas { display:grid; grid-template-columns:1fr; gap:4px; padding:8px 12px; }
  body #side.sidebar-areas #sidebar-areas button {
    display:flex; align-items:center; gap:9px; text-align:left;
    min-height:36px; padding:6px 10px; border:1px solid #946675; border-radius:6px;
    background:transparent; color:#f2e4dc; font:400 14px/1.45 system-ui,sans-serif;
  }
  #sidebar-areas svg { width:18px; height:18px; flex:none; }
  body #side.sidebar-areas #sidebar-areas button[aria-pressed=true] {
    background:#f5ede1; color:#551d32; border-color:#f5ede1; font-weight:600;
  }
  body #side.sidebar-areas #sidebar-areas button:hover { background:#73364e; color:#fff8ec; }
  body #side.sidebar-areas #sidebar-areas button[aria-pressed=true]:hover { background:#f5ede1; color:#551d32; }
  #sidebar-area-title { padding:5px 12px 6px; color:#e0c88f; font:400 12px/15px system-ui,sans-serif; text-transform:uppercase; letter-spacing:.05em; }
  body #side.sidebar-areas #menu { display:block; flex:1; padding:0 10px 8px; overflow:visible; }
  #menu [data-sidebar-group] { display:flex; flex-direction:column; gap:2px; }
  body #side.sidebar-areas #menu .mi {
    display:flex; align-items:center; gap:10px; width:100%; min-height:34px;
    padding:6px 11px; border:0; border-radius:7px; text-align:left;
    background:transparent; color:#fff5e8; font:500 14px/1.25 system-ui,sans-serif;
    letter-spacing:0; white-space:normal;
  }
  #menu .mi svg { width:19px; height:19px; flex:none; }
  body #side.sidebar-areas #menu .mi:hover { background:#6c3348; color:#fff5e8; }
  body #side.sidebar-areas #menu .mi.active { background:#73364e; color:#fff6e8; box-shadow:inset 3px 0 #d2b277; }
  .sidebar-footer { flex:none; margin-top:auto; padding:6px 12px 8px; border-top:1px solid #80596a; }
  body #side.sidebar-areas #btn-archive {
    display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:36px;
    padding:7px 10px; border:1px solid #a47788; border-radius:7px;
    background:transparent; color:#fff5e8; font:400 14px/1.25 system-ui,sans-serif;
  }
  #btn-archive svg { width:18px; height:18px; }
  body #side.sidebar-areas #user-mail {
    padding:0; margin-top:4px; color:#dfc7cf; opacity:1;
    font:400 11px/15px system-ui,sans-serif; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal;
  }
  body #side.sidebar-areas #menu-toggle { display:none; }
  body #sidebar-archive {
    position:fixed; z-index:40; width:232px; max-width:calc(100vw - 16px);
    display:flex; flex-direction:column; gap:0; margin:0; padding:5px;
    max-height:none; overflow:visible; color:#551d32; background:#fffdf8;
    border:1px solid #d9cfc2; border-radius:8px; box-shadow:0 8px 30px #2a0b2050;
  }
  body #sidebar-archive button, body #sidebar-archive button.primary {
    flex:none; text-align:left; min-height:41px; width:100%; padding:10px 12px;
    border:0; border-radius:5px; background:#fffdf8; color:#551d32;
    font:400 14px/1.25 system-ui,sans-serif;
  }
  body #sidebar-archive button:hover, body #sidebar-archive button.primary:hover { background:#eee8de; color:#551d32; filter:none; }
  /* Ícones desenhados no mesmo traço do menu (desenharIconesArquivo no index.html).
     Espaço pela margem, não por flex: "Sair" é exibido com display:block pelo script. */
  body #sidebar-archive .ico { width:18px; height:18px; margin-right:10px; vertical-align:-4px; }
  body #side.sidebar-areas :focus-visible { outline:3px solid #d7b25b; outline-offset:2px; }
  body #sidebar-archive :focus-visible { outline:3px solid #86621e; outline-offset:-3px; }
  @media(min-width:901px) {
    body aside#side.sidebar-areas { position:fixed; inset:0 auto 0 0; height:100dvh; }
    body .shell > .content { margin-left:224px; }
  }
  @media(max-width:900px) {
    body .shell { flex-direction:column; }
    body aside#side.sidebar-areas { width:100%; position:static; min-height:0; border-right:0; border-bottom:1px solid #80596a; }
    body #side.sidebar-areas .sidebar-brand { padding:10px 14px; }
    body #side.sidebar-areas .brand h1 { font-size:18px; }
    body #side.sidebar-areas #menu-toggle {
      display:block; flex:none; margin:0 0 0 auto; align-self:auto; min-height:44px;
      padding:9px 12px; border:1px solid #a47788; border-radius:7px;
      background:transparent; color:#fff5e8; font:400 14px/1.25 system-ui,sans-serif;
    }
    body #side.sidebar-areas:not(.menu-open) #sidebar-navigation { display:none; }
    body #side.sidebar-areas.menu-open #menu { display:block; }
    #sidebar-areas { grid-template-columns:repeat(3,minmax(0,1fr)); padding:6px 12px; }
    body #side.sidebar-areas #sidebar-areas button { min-height:44px; justify-content:center; gap:4px; padding:8px 6px; font-size:12px; }
    #sidebar-areas svg { display:none; }
    body #side.sidebar-areas #menu .mi { min-height:44px; padding:10px 11px; }
    body #side.sidebar-areas #btn-archive { min-height:44px; }
    body #side.sidebar-areas #user-mail { text-align:left; }
    body #sidebar-archive button, body #sidebar-archive button.primary { min-height:44px; }
  }
}