/**
 * Moldura de navegação — a pintura da sidebar (a posição vive em layout.css).
 *
 * Faixa da marca, wordmark, itens e grupos de navegação, rodapé com o resumo do
 * WhatsApp, bloco de sessão do usuário logado e o hambúrguer (que só existe
 * abaixo do breakpoint da sidebar).
 *
 * O SVG da marca já É o wordmark SPENT — o .marca em CSS fica como reserva
 * técnica e está hidden no HTML. O alter ego do painel troca a faixa por grafite
 * profundo quando [data-tema="serio"], mesma paleta do alterego.css usado no
 * login e na landing.
 *
 * Também mora aqui, por posição na cascata original, o bloco de saúde/acessos da
 * planilha (.planilha__subtitulo, .acesso-form, .campo) e a foto de perfil
 * sobreposta ao azulejo: .campo é a base de todos os inputs do painel e precisa
 * vir antes dos formulários mais específicos.
 */

.lateral__marca {
  background: var(--marca-azul);
  padding: var(--e5) var(--e5) var(--e4);
  transition: background var(--transicao);
}

.marca-simbolo {
  display: block;
  width: 132px;
  height: auto;
  margin: calc(-1 * var(--e2)) auto 0;
}

.marca {
  display: block;
  font-size: 30px;
  font-weight: var(--peso-brutal);
  letter-spacing: -.01em;
  color: var(--marca-amarelo);
  text-shadow: .075em .075em 0 var(--marca-tinta);
  line-height: 1;
  user-select: none;
}

[data-tema="serio"] .lateral__marca { background: #1c2430; }

[data-tema="serio"] .marca {
  color: #8fa6b8;
  text-shadow: .075em .075em 0 #10131a;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e4) var(--e3);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 9px var(--e3);
  border-radius: var(--raio-pequeno);
  border-left: 3px solid transparent;
  color: var(--tinta-inversa);
  opacity: .72;
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  text-decoration: none;
  transition: opacity var(--transicao), background var(--transicao);
}

.nav__item:hover { opacity: 1; background: rgba(247, 247, 248, .07); }

.nav__item--ativo {
  opacity: 1;
  border-left-color: var(--marca-amarelo);
  background: rgba(247, 247, 248, .09);
}

.nav__item--filho {
  margin-left: var(--e4);
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: var(--t-meta);
  opacity: .6;
}

.nav__item--filho .sr-marca { width: 15px; height: 15px; }

.nav__meta {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid rgba(247, 247, 248, .12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__whats {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px var(--e3);
  font-size: var(--t-meta);
  color: var(--tinta-inversa);
  opacity: .6;
}

.nav__whats-ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sem-critico);
  flex: none;
}

.nav__whats-ponto--ok { background: #34c759; }

.sessao {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e4);
  border-top: 1px solid rgba(247, 247, 248, .12);
}

.sessao__miolo { flex: 1; min-width: 0; }

.sessao__nome {
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  color: var(--tinta-inversa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sessao__papel {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-inversa);
  opacity: .55;
}

.sessao__sair {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--tinta-inversa);
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--transicao), background var(--transicao);
}

.sessao__sair:hover { opacity: 1; background: rgba(247, 247, 248, .09); }

.hamburguer {
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-medio);
  background: var(--sup-cartao);
  color: var(--tinta-1);
  cursor: pointer;
  flex: none;
}

.planilha__subtitulo {
  padding: var(--e4) var(--e5) var(--e2);
  border-top: 1px solid var(--separador);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.planilha__mais { padding: 0 var(--e5) var(--e4) 68px; text-align: left; }

.acesso-form {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  padding: var(--e3) var(--e5) var(--e5);
}

.campo {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px var(--e3);
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-pequeno);
  background: var(--sup-elevada);
  font: inherit;
  font-size: var(--t-apoio);
  color: var(--tinta-1);
}

.campo--curto { flex: 0 1 110px; }

.azulejo__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav__grupo {
  margin-top: var(--e4);
  padding: 0 var(--e3) var(--e1);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-inversa);
  opacity: .45;
}

.nav__rotulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moeda {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  padding: 6px var(--e2);
  border: 0;
  border-radius: var(--raio-pequeno);
  background: none;
  color: var(--tinta-inversa);
  opacity: .6;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-etiqueta);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: opacity var(--transicao), background var(--transicao);
}

.moeda:hover { opacity: 1; background: rgba(247, 247, 248, .07); }
.moeda:focus-visible { outline: none; box-shadow: var(--foco); }

.moeda__trilho {
  position: relative;
  flex: none;
  width: 46px;
  height: 24px;
  border: 2px solid rgba(247, 247, 248, .22);
  border-radius: 999px;
  background: rgba(247, 247, 248, .07);
}

.moeda__disco {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform-style: preserve-3d;
  transition: transform var(--transicao);
  transform: translateX(0) rotateY(0deg);
}

.moeda[data-tema="serio"] .moeda__disco { transform: translateX(24px) rotateY(180deg); }

.moeda__disco--arremesso { animation: moeda-arremesso .34s ease-in-out; }

@keyframes moeda-arremesso {
  50% { margin-top: -7px; }
}

.moeda__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
}

.moeda__face--vivo {
  background: var(--marca-amarelo);
  color: var(--marca-tinta);
}

.moeda__face--serio {
  background: #8fa6b8;
  color: #10131a;
  transform: rotateY(180deg);
}

.moeda__rotulo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lateral--recolhida .moeda { justify-content: center; padding: 6px 0; }
.lateral--recolhida .moeda__rotulo { display: none; }

/* Contas vinculadas: as portas alternativas de entrada de quem está logado.
   Fica na sidebar escura, então a tinta é a inversa e o glifo do provedor
   aparece em pastilha clara — a cor de marca do Google e do Facebook não
   sobrevive sobre grafite em 15px, e um losango branco resolve sem inventar
   paleta. A ação é texto, não botão cheio: é gesto raro, não deve competir
   com o "sair" nem com as preferências. */
.contas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--e3) var(--e4) 0;
}

.contas__titulo {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-inversa);
  opacity: .45;
}

.contas__linha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-etiqueta);
  min-height: 22px;
}

.contas__glifo {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--raio-pequeno);
  background: rgba(247, 247, 248, .1);
}

.contas__glifo--facebook { color: #6aa8f7; }

.contas__estado {
  flex: 1;
  min-width: 0;
  color: var(--tinta-inversa);
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contas__estado--vazio { opacity: .45; font-style: italic; }

.contas__acao {
  flex: none;
  border: 0;
  padding: 2px 4px;
  background: none;
  color: var(--marca-amarelo);
  font: inherit;
  font-weight: var(--peso-negro);
  cursor: pointer;
}

.contas__acao:hover { text-decoration: underline; }

.preferencias {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4) var(--e4);
}

.preferencias .moeda { width: auto; flex: 1; min-width: 0; }
.preferencias .idiomas { padding: 0; gap: 0; flex: none; }
.preferencias .idiomas__bandeira { padding: 4px 3px; }
.preferencias .moeda__rotulo { font-size: var(--t-etiqueta); }