/**
 * Identidade — idioma, cabeçalho do cliente, avatares e o flip do logo.
 *
 * O seletor de idioma na sidebar e as bandeirinhas discretas abaixo da sessão
 * compartilham a mesma tinta inversa do resto da navegação.
 *
 * O cartão-cabeçalho do cliente ganha um tom próprio (mistura do azul da marca
 * com a superfície) para separar identidade de dados sem virar outro componente.
 *
 * Os tons de avatar são fixos e escolhidos por hash do e-mail no JS: a mesma
 * pessoa fica sempre da mesma cor. A conta de serviço na lista do Drive mostra a
 * marca em vez de um e-mail gigante.
 *
 * O logo do cliente É o botão de troca: hover ou foco gira o cartão em 3D e
 * revela o lápis no verso. A animação respeita prefers-reduced-motion.
 */

.nav__idioma {
  width: 100%;
  padding: 7px var(--e3);
  border: 1px solid rgba(247, 247, 248, .18);
  border-radius: var(--raio-pequeno);
  background: rgba(247, 247, 248, .06);
  color: var(--tinta-inversa);
  font: inherit;
  font-size: var(--t-meta);
  cursor: pointer;
}

.nav__idioma option { color: var(--tinta-1); background: var(--sup-cartao); }

.idiomas {
  display: flex;
  gap: var(--e1);
  justify-content: center;
  padding: var(--e2) 0 var(--e3);
}

.idiomas__bandeira { padding: 4px 4px; }

.idiomas__bandeira {
  display: grid;
  place-items: center;
  padding: 4px 5px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: none;
  cursor: pointer;
  opacity: .3;
  transition: opacity var(--transicao);
}

.idiomas__bandeira svg { border-radius: 2px; }

.idiomas__bandeira:hover { opacity: .75; }

.idiomas__bandeira--ativa {
  opacity: .95;
  box-shadow: 0 0 0 1px rgba(247, 247, 248, .35);
}

#cliente {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.cliente__cabecalho {
  background: color-mix(in srgb, var(--marca-azul) 5%, var(--sup-cartao));
  border-color: color-mix(in srgb, var(--marca-azul) 16%, var(--borda-cartao));
  margin-bottom: var(--e2);
}

.cliente__cabecalho .abas {
  background: color-mix(in srgb, var(--marca-azul) 8%, var(--sup-afundada));
}

.azulejo--tom-0 { background: #0e7490; }
.azulejo--tom-1 { background: #7c3aed; }
.azulejo--tom-2 { background: #be185d; }
.azulejo--tom-3 { background: #b45309; }
.azulejo--tom-4 { background: #15803d; }
.azulejo--tom-5 { background: #4338ca; }

.acesso__bot { background: var(--marca-azul); }

.acesso__bot-logo { width: 82%; height: auto; }

.marca-flip {
  border: 0;
  padding: 0;
  cursor: pointer;
  perspective: 240px;
  overflow: visible;
  background: none;
}

.marca-flip:disabled { cursor: default; }

.marca-flip__caras {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.marca-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--raio-azulejo);
  background: var(--marca-azul);
  color: var(--marca-tinta);
  overflow: hidden;
  backface-visibility: hidden;
}

.marca-face--verso {
  transform: rotateY(180deg);
  background: var(--marca-tinta);
  color: var(--marca-amarelo);
}

.marca-flip:not(:disabled):hover .marca-flip__caras,
.marca-flip:not(:disabled):focus-visible .marca-flip__caras {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .marca-flip__caras { transition: none; }
}