/* Rodapé do menu lateral: cartão do usuário + menu de conta (abre ao clicar no nome). Só visual: os botões e seus eventos são os do Index.html. */
.side .usuario { position: relative; }
.side .usuario .me { gap: 8px; padding: 8px; border: 1px solid var(--bd); background: var(--card); border-radius: 14px; }
.side .usuario .me .av { width: 36px; height: 36px; font-size: 12px; letter-spacing: .02em; }
.side .usuario .me [data-menu-conta] { display: block; position: relative; min-width: 0; flex: 1; cursor: pointer; border-radius: 10px; padding: 3px 24px 3px 4px; margin: -3px -4px; }
.side .usuario .me [data-menu-conta]:hover { background: var(--soft); }
.side .usuario .me [data-menu-conta]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.side .usuario .me [data-menu-conta] b { font-size: 13px; }
.side .usuario .me [data-menu-conta] span { display: block; font-size: 11.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .usuario .me [data-menu-conta]::after { content: ""; position: absolute; right: 5px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--mut); transition: transform .15s;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6"/></svg>') center / contain no-repeat; }
.side .usuario.aberto .me [data-menu-conta]::after { transform: rotate(180deg); }
.side .usuario .me .tema-btn { width: 30px; height: 30px; background: var(--soft); border-color: transparent; }
.side .usuario .me .tema-btn:hover { border-color: var(--brand); color: var(--brand); }

/* menu de conta: lista vertical que abre para cima */
.side .usuario .usuario-btn { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 80; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--shadow); }
.side .usuario.aberto .usuario-btn { display: flex; }
.side .usuario .usuario-btn button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--tx);
  font: 500 13px/1.2 var(--body); text-align: left; cursor: pointer; box-shadow: none; }
.side .usuario .usuario-btn button[hidden] { display: none; }
.side .usuario .usuario-btn button:hover, .side .usuario .usuario-btn button:focus-visible { background: var(--soft); }
.side .usuario .usuario-btn button::before { content: ""; flex: none; width: 17px; height: 17px; background: var(--mut); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.side .usuario .usuario-btn button:hover::before { background: var(--brand); }
#b-usuarios { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3 19c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5"/><circle cx="17.2" cy="9" r="2.4"/><path d="M17 14c2.6 0 4.2 1.8 4.2 4.6"/></svg>'); }
#b-senha { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10.5" width="16" height="10" rx="2.5"/><path d="M8 10.5V8a4 4 0 018 0v2.5M12 15v2"/></svg>'); }
#b-aparencia { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a9 9 0 100 18c1.4 0 2-.9 2-1.8 0-1.2-1-1.5-1-2.7 0-1 .8-1.5 1.8-1.5H17a4 4 0 004-4c0-4.4-4-8-9-8z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10.5" cy="7" r="1"/><circle cx="15" cy="7.5" r="1"/></svg>'); }
#b-seguranca { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5.5c0 4.4-3 8-7 9.5-4-1.5-7-5.1-7-9.5V6z"/><path d="M9 12l2.2 2.2L15.5 10"/></svg>'); }
#b-sair { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4H6a2 2 0 00-2 2v12a2 2 0 002 2h3M16 8l4 4-4 4M20 12H9"/></svg>'); }
.side .usuario .usuario-btn #b-sair { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--bd); border-radius: 0 0 9px 9px; color: var(--err); }
.side .usuario .usuario-btn #b-sair::before { background: var(--err); }
.side .usuario .usuario-btn #b-sair:hover { background: var(--crit-bg); }
.side .usuario .usuario-btn #b-sair:hover::before { background: var(--err); }

/* telas estreitas: o menu lateral vira barra no topo, então o menu de conta abre para baixo */
@media (max-width: 860px) {
  .side .usuario .usuario-btn { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; min-width: 220px; }
  .side .usuario .me [data-menu-conta]::after { display: none; }
}