/* =====================================================================
   AprovAKI — aki_tooltip_pos_fix.css  (2026-08-02)
   ---------------------------------------------------------------------
   Complemento do aki_ui_extra.css. O tooltip padrão [data-aki-tooltip]
   atualmente aparece SEMPRE acima do elemento. Em elementos colados no
   topo (avatar do userchip no cabeçalho, ícones do topo da página) o
   balão sai do viewport e fica atrás da barra do navegador.

   Este arquivo:
     - Deixa o tooltip do avatar do userchip (barra superior) descer
       para BAIXO do elemento, com seta apontando pra cima.
     - Reajusta a posição horizontal para não vazar em telas médias
       (<= 720 px) e pequenas (<= 430 px), grudando o balão no topo
       do userchip e deslocando a seta.
     - Vale só para os elementos do header. Não muda o tooltip do
       resto do site (ranking, cards de questão, estrelas, salvar,
       avisar erro).

   Carregar DEPOIS de aki_ui_extra.css.
   ===================================================================== */

/* Avatar do userchip: tooltip abaixo do elemento. Sobrescreve a
   regra de bottom:calc(100% + 8px) do aki_ui_extra.css. */
.aki-userchip__avatar[data-aki-tooltip]::after {
  bottom: auto !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) translateY(-4px) !important;
}
.aki-userchip__avatar[data-aki-tooltip]::before {
  bottom: auto !important;
  top: calc(100% + 3px) !important;
  transform: translateX(-50%) translateY(-4px) !important;
  border-top-color: transparent !important;
  border-bottom-color: #1e1b36 !important;
}
.aki-userchip__avatar[data-aki-tooltip]:hover::after,
.aki-userchip__avatar[data-aki-tooltip]:focus-visible::after,
.aki-userchip__avatar[data-aki-tooltip]:hover::before,
.aki-userchip__avatar[data-aki-tooltip]:focus-visible::before {
  transform: translateX(-50%) translateY(0) !important;
}

/* Em telas médias (tablet/notebook pequeno), o userchip fica bem
   colado à borda direita. O balão pode vazar pela direita porque
   está centrado no avatar. Desloca a origem para a direita, com
   seta apontando pra cima ainda alinhada com o avatar. */
@media (max-width: 720px) {
  .aki-userchip__avatar[data-aki-tooltip]::after {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(-4px) !important;
    max-width: calc(100vw - 24px);
    white-space: normal !important;
    text-align: left;
  }
  .aki-userchip__avatar[data-aki-tooltip]:hover::after,
  .aki-userchip__avatar[data-aki-tooltip]:focus-visible::after {
    transform: translateX(0) translateY(0) !important;
  }
  /* Seta continua alinhada ao centro do avatar (não move). */
}

/* Telas pequenas (celular): balão ainda menor e mais próximo. */
@media (max-width: 430px) {
  .aki-userchip__avatar[data-aki-tooltip]::after {
    font-size: 11.5px !important;
    padding: 5px 9px !important;
    max-width: calc(100vw - 20px);
  }
}

/* Reforço geral: para qualquer elemento marcado como
   data-tooltip-pos="baixo", força o balão a descer. Utilitário
   opcional para futuras necessidades. Sem efeito se o atributo
   não existir. */
[data-aki-tooltip][data-tooltip-pos="baixo"]::after {
  bottom: auto !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) translateY(-4px) !important;
}
[data-aki-tooltip][data-tooltip-pos="baixo"]::before {
  bottom: auto !important;
  top: calc(100% + 3px) !important;
  transform: translateX(-50%) translateY(-4px) !important;
  border-top-color: transparent !important;
  border-bottom-color: #1e1b36 !important;
}
[data-aki-tooltip][data-tooltip-pos="baixo"]:hover::after,
[data-aki-tooltip][data-tooltip-pos="baixo"]:focus-visible::after,
[data-aki-tooltip][data-tooltip-pos="baixo"]:hover::before,
[data-aki-tooltip][data-tooltip-pos="baixo"]:focus-visible::before {
  transform: translateX(-50%) translateY(0) !important;
}