/* sidebar.css — barra lateral: marca, navegacao e rodape do usuario.
 *
 * ESTA E A MUDANCA ESTRUTURAL DA MARCA. A barra passou a ser PETROLEO,
 * enquanto o resto da aplicacao ficou branco.
 *
 * Nao e concessao ao tema escuro antigo. A secao 4.4 do manual atribui a
 * petroleo justamente "texto, header, bordas, icones, botao primario",
 * dentro dos ~25% da tela, com branco em ~70%. Com a barra em petroleo e o
 * conteudo em branco, essa proporcao se cumpre sozinha.
 *
 * Por isso este arquivo NAO usa os tokens de superficie (--bg, --text): ali
 * dentro o fundo e escuro e as cores se invertem. Ele usa a sub-paleta
 * --barra-*, definida em tokens.css e medida contra #00484E:
 *
 *   branco    10,31:1     #B8CCCD    6,16:1
 *   item ativo (branco a 12% sobre petroleo = #1f5e63): branco por cima 7,40:1
 */

#sidebar {
  width: 230px; min-width: 230px;
  background: var(--barra-bg);
  border-right: 1px solid var(--barra-bg);
  display: flex; flex-direction: column; padding: 0 0 16px;
}

.brand {
  padding: 16px 20px; border-bottom: 1px solid var(--barra-borda);
  display: flex; align-items: center; gap: 11px; justify-content: center;
}

/* Aqui vai o logo NEGATIVO, cujo fundo e exatamente #00484E -- o mesmo
 * petroleo da barra. Encaixa sem emenda visivel, e por isso nao precisa da
 * versao com transparencia, que tem 2,56% dos pixels de borda fora.
 * O filter:brightness(0) invert(1) do original saiu na tarefa 1.3. */
.brand-img { height: 26px; width: auto; object-fit: contain }

.brand-icon {
  width: 34px; height: 34px;
  background: var(--barra-ativo);
  border-radius: 10px; display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0;
}
.brand-name { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 700; color: var(--barra-texto) }
.brand-sub { font-size: 10px; color: var(--barra-texto2); letter-spacing: .5px; text-transform: uppercase }

.nav { padding: 14px 12px; flex: 1 }

/* TAREFA 1.13 — os 5 itens eram <div> e o arquivo tinha zero tabindex, entao
 * o Tab pulava a navegacao inteira, em qualquer largura de tela (WCAG 2.1.1).
 * Agora sao <button>. As quatro primeiras declaracoes sao o que um <button>
 * precisa para parecer identico a <div> que era: sem fundo, sem borda, sem
 * aparencia nativa, com a fonte e o alinhamento herdados.
 * appearance:none importa no Safari, onde o botao nativo ignora parte do CSS. */
.nav-item {
  background: transparent; border: none; width: 100%; text-align: left;
  appearance: none; -webkit-appearance: none;
  font-family: inherit;

  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--rsm); cursor: pointer;
  color: var(--barra-texto2); font-size: 13.5px; font-weight: 500;
  margin-bottom: 2px; transition: all .15s; position: relative; user-select: none;
}
.nav-item:hover { background: var(--barra-hover); color: var(--barra-texto) }

/* O item ativo era o texto MENOS legivel da barra inteira: 2,81:1. Agora e o
 * MAIS legivel -- branco cheio sobre o realce translucido da 7,40:1, contra
 * 6,16:1 dos itens inativos. O ativo passou a ser o mais forte, que e o que
 * "ativo" deveria significar desde o inicio.
 *
 * A borda de 1px continua, para a caixa nao mudar de tamanho ao ativar. */
.nav-item.active {
  background: var(--barra-ativo);
  color: var(--barra-texto);
  border: 1px solid var(--barra-borda);
}

.nav-item .icon { font-size: 16px; width: 20px; text-align: center }

/* O selo de alertas e #C22233 com texto branco: 5,88:1 no texto.
 * Mas o selo CONTRA a barra da so 1,75:1, abaixo dos 3:1 que a WCAG 1.4.11
 * pede para componente de interface. O contorno claro resolve o limite sem
 * mexer na cor do manual. */
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; display: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}

.nav-section {
  font-size: 10px; color: var(--barra-texto2); text-transform: uppercase;
  letter-spacing: 1.2px; padding: 14px 12px 6px; font-weight: 600;
  opacity: .8;
}

.nav-user {
  padding: 14px 16px; border-top: 1px solid var(--barra-borda);
  display: flex; align-items: center; gap: 10px;
}
.nav-avatar {
  width: 32px; height: 32px;
  background: var(--barra-ativo);
  border: 1px solid var(--barra-borda); border-radius: 8px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--barra-texto); flex-shrink: 0;
}
.nav-user-info { flex: 1; min-width: 0 }
.nav-user-name {
  font-size: 12.5px; font-weight: 600; color: var(--barra-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-user-role { font-size: 10px; color: var(--barra-texto2); text-transform: uppercase; letter-spacing: .5px }

/* Sair fica em tom de apoio e so ganha cor no hover. Vermelho permanente
 * aqui gastaria o "unico destaque por tela" da secao 4.4 num botao
 * secundario.
 *
 * CONSERTADO em 19/08/2026. Este comentario dizia antes: "E #F22B40, nao
 * #C22233: sobre petroleo o mais claro enxerga melhor (2,55:1 contra 1,75:1),
 * e aqui ele e icone, nao texto corrido, entao a regra dos 24px nao se
 * aplica."
 *
 * Os dois numeros estavam certos e a conclusao estava errada. Comparei os
 * candidatos ENTRE SI e nunca com o minimo: 2,55:1 reprova os 4,5:1 de texto
 * e reprova tambem os 3:1 que a WCAG 1.4.11 exige justamente de icone -- que
 * era a norma invocada para dispensar a exigencia. O argumento derrubava a si
 * mesmo.
 *
 * Pior: e um estado de HOVER. O repouso usa --barra-texto2, com 6,16:1. Passar
 * o mouse deixava o botao MENOS legivel do que estava parado.
 *
 * Agora usa --barra-perigo, 5,00:1 sobre a barra -- passa como texto, entao a
 * duvida "icone ou texto?" deixa de precisar de resposta.
 *
 * https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast */
.logout-btn {
  background: transparent; border: none; color: var(--barra-texto2);
  cursor: pointer; font-size: 16px; padding: 4px; transition: .15s; flex-shrink: 0;
}
.logout-btn:hover { color: var(--barra-perigo) }

/* ------------------------------------------------------------------- mobile */

/* CONSERTADO. Antes esta media query era so `#sidebar { display: none }`, sem
 * nada no lugar. Como a barra guarda os 5 itens de navegacao, o nome do usuario
 * e o BOTAO DE SAIR, o portal no celular virava um painel de leitura sem troca
 * de tela e sem logout.
 *
 * O defeito era herdado, nao criado no recorte: a linha 161 do
 * input/index.html traz exatamente a mesma regra. Conferido antes de mexer.
 *
 * A barra agora vira gaveta. Nao ha desenho novo: e a MESMA barra, o mesmo
 * petroleo, os mesmos itens -- so muda de posicao. Menos coisa para conferir
 * e nada de aparencia nova para aprovar. */
@media (max-width: 768px) {
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 54, 59, .38);
  }
  #app.menu-aberto #sidebar { transform: none }

  /* a marca reaparece na gaveta, ja que sai da barra do topo no celular */
  .brand { justify-content: flex-start }
}

/* Quem pediu menos animacao recebe a gaveta sem deslizar -- ela aparece e
 * some. O estado continua o mesmo; so o caminho ate ele e instantaneo.
 * WCAG 2.3.3 e a media feature prefers-reduced-motion. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #sidebar { transition: none }
}

/* ------------------------------------------------------- cortina da gaveta */

/* Fora do celular a cortina nao existe. display:none no lugar de opacidade
 * para que ela nao capture clique nenhum no desktop. */
#menu-overlay { display: none }

@media (max-width: 768px) {
  #menu-overlay {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 54, 59, .45);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
    border: none; padding: 0;
  }
  #app.menu-aberto #menu-overlay { opacity: 1; pointer-events: auto }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #menu-overlay { transition: none }
}