/* Sistema de design: casca (janela, cabeçalho, botão, interruptor, campo, atalho, dica).
   Só consome var(--au-*) de ui-tokens.css. Variante por data-*, estado por ARIA ou atributo nativo.
   Convenção de uso (não é regra de CSS): um só botão data-tom="acao" por visão; a seleção é ciano (--au-sistema).
   Os botões e campos declaram tudo que o button{}/input{} global de app.css pinta, para não herdar o metal. */

/* ---------- Janela ---------- */
.au-janela {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(1060px, 100%);
  max-height: calc(100vh - 24px);
  color: var(--au-texto);
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-3);
  border: 1px solid transparent;
  border-radius: var(--au-raio-4);
  /* Borda de luz em duas camadas (sem border-image): o vidro no padding-box, a luz no border-box.
     O vidro é quase opaco; a luz vaza ~5% por baixo (conferir no navegador). */
  background:
    linear-gradient(var(--au-vidro), var(--au-vidro)) padding-box,
    var(--au-luz) border-box;
  box-shadow: var(--au-sombra-janela);
  /* Sem backdrop-filter por padrão: medir no menor dispositivo antes de ligar. */
}
.au-janela[data-largura="estreita"] {
  width: min(560px, 100%);
}
.au-janela[data-largura="media"] {
  width: min(940px, 100%);
}
.au-janela[data-largura="larga"] {
  width: min(1060px, 100%);
}
.au-janela[data-largura="total"] {
  width: min(1180px, 100%);
}
.au-janela[data-largura="grande"] {
  width: min(1100px, 100%);
}

.au-janela__cab {
  display: flex;
  align-items: center;
  gap: var(--au-esp-3);
  flex: none;
  padding: var(--au-esp-3) var(--au-esp-4);
  border-bottom: 1px solid var(--au-borda);
  font-family: var(--au-fonte-titulo);
  font-size: var(--au-t-4);
  color: var(--au-texto);
}
.au-janela__cab[data-variante="heroi"] {
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--au-esp-4) var(--au-esp-5);
  background: linear-gradient(var(--au-superficie-2), var(--au-superficie));
}
.au-janela__cab[data-variante="heroi"] .au-janela__rotulo {
  display: block;
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--au-texto-suave);
}
.au-janela__cab[data-variante="heroi"] .au-janela__saldo {
  margin-left: auto;
  font-family: var(--au-fonte-num);
  font-size: var(--au-t-5);
  color: var(--au-valor);
}
.au-janela__cab .au-janela__contagem {
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-2);
  color: var(--au-texto-suave);
}
.au-janela__cab .au-janela__acoes {
  display: flex;
  align-items: center;
  gap: var(--au-esp-2);
  margin-left: auto;
}

.au-janela__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--au-esp-4);
}

.au-janela__rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--au-esp-2);
  flex: none;
  padding: var(--au-esp-3) var(--au-esp-4);
  border-top: 1px solid var(--au-borda);
}

/* ---------- Botão ---------- */
.au-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--au-esp-2);
  box-sizing: border-box;
  min-height: var(--au-toque);
  padding: 0 var(--au-esp-4);
  background: var(--au-superficie);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-2);
  box-shadow: none;
  color: var(--au-texto);
  font: 600 var(--au-t-2) / 1 var(--au-fonte-texto);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    transform 0.08s;
}
.au-botao:hover {
  background: var(--au-superficie-2);
  border-color: var(--au-sistema);
}
.au-botao:active {
  transform: translateY(1px);
}
.au-botao[data-tom="acao"] {
  background: linear-gradient(var(--au-acao-b), var(--au-acao-a));
  border: 1px solid var(--au-acao-b);
  color: var(--au-texto-sobre-acao);
}
.au-botao[data-tom="acao"]:hover {
  background: linear-gradient(var(--au-acao-b), var(--au-acao-b));
  border-color: var(--au-texto-sobre-acao);
}
.au-botao[data-tom="secundario"] {
  background: var(--au-superficie);
  border: 1px solid var(--au-borda-forte);
  color: var(--au-texto);
}
.au-botao[data-tom="perigo"] {
  background: var(--au-superficie);
  border: 1px solid var(--au-perigo);
  color: var(--au-perigo);
}
.au-botao[data-tom="perigo"]:hover {
  background: var(--au-perigo);
  border-color: var(--au-perigo);
  color: var(--au-texto-sobre-acao);
}
.au-botao[data-tom="fantasma"] {
  background: transparent;
  border: 1px solid transparent;
  color: var(--au-texto-suave);
}
.au-botao[data-tom="fantasma"]:hover {
  background: var(--au-superficie-2);
  border-color: var(--au-borda);
  color: var(--au-texto);
}
.au-botao[data-tamanho="p"] {
  min-height: 32px;
  padding: 0 var(--au-esp-3);
  font-size: var(--au-t-1);
}
.au-botao[data-tamanho="m"] {
  min-height: var(--au-toque);
}
.au-botao[data-tamanho="g"] {
  min-height: 48px;
  padding: 0 var(--au-esp-5);
  font-size: var(--au-t-3);
}
.au-botao[data-tamanho="icone"] {
  width: var(--au-toque);
  padding: 0;
}
.au-botao:disabled,
.au-botao[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.au-botao[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
  opacity: 0.75;
}

/* ---------- Interruptor (role="switch") ---------- */
.au-interruptor {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 24px;
  padding: 0;
  background: var(--au-poco);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-pilula);
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s;
}
.au-interruptor::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--au-texto-suave);
  border-radius: 50%;
  transition:
    transform 0.12s,
    background-color 0.12s;
}
.au-interruptor[aria-checked="true"] {
  background: var(--au-sistema);
  border-color: var(--au-sistema);
}
.au-interruptor[aria-checked="true"]::after {
  background: var(--au-fundo);
  transform: translateX(20px);
}
.au-interruptor:disabled,
.au-interruptor[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Campo ---------- */
.au-campo {
  display: flex;
  flex-direction: column;
  gap: var(--au-esp-1);
  font-family: var(--au-fonte-texto);
}
.au-campo__rotulo {
  font-size: var(--au-t-1);
  letter-spacing: 0.04em;
  color: var(--au-texto-suave);
}
.au-campo input,
.au-campo select,
.au-campo textarea {
  box-sizing: border-box;
  min-height: var(--au-toque);
  padding: 0 var(--au-esp-3);
  /* background-color e background-image separados: app.css desenha a moldura em background-image. */
  background-color: var(--au-poco);
  background-image: none;
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-2);
  box-shadow: none;
  color: var(--au-texto);
  font: 400 var(--au-t-3) / 1.2 var(--au-fonte-texto);
  letter-spacing: normal;
  transition: border-color 0.12s;
}
.au-campo textarea {
  padding: var(--au-esp-2) var(--au-esp-3);
}
.au-campo input:hover,
.au-campo select:hover,
.au-campo textarea:hover {
  border-color: var(--au-sistema);
}
.au-campo input:disabled,
.au-campo select:disabled,
.au-campo textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.au-campo__ajuda {
  font-size: var(--au-t-1);
  color: var(--au-texto-fraco);
}
.au-campo__erro {
  font-size: var(--au-t-1);
  color: var(--au-perigo);
}
.au-campo[data-estado="valido"] input,
.au-campo[data-estado="valido"] select,
.au-campo[data-estado="valido"] textarea {
  border-color: var(--au-ok);
}
.au-campo[data-estado="invalido"] input,
.au-campo[data-estado="invalido"] select,
.au-campo[data-estado="invalido"] textarea {
  border-color: var(--au-perigo);
}
.au-campo--busca input {
  padding-left: var(--au-esp-5);
  border-radius: var(--au-raio-pilula);
}
.au-campo--busca[data-icone] {
  position: relative;
}
.au-campo__icone {
  position: absolute;
  bottom: 0;
  left: var(--au-esp-3);
  display: inline-flex;
  align-items: center;
  height: var(--au-toque);
  color: var(--au-texto-suave);
  pointer-events: none;
}
.au-campo__icone svg {
  width: 1em;
  height: 1em;
}
.au-quantidade {
  display: inline-flex;
  align-items: center;
  gap: var(--au-esp-2);
}
.au-quantidade__passo {
  min-width: var(--au-toque);
  padding: 0;
  font-size: var(--au-t-4, var(--au-t-3));
}
.au-quantidade .au-campo--quantidade input {
  width: 72px;
}
.au-campo--quantidade input {
  width: 96px;
  text-align: center;
  font-family: var(--au-fonte-num);
}

/* ---------- Atalho (kbd) ---------- */
.au-atalho {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px var(--au-esp-1);
  box-sizing: border-box;
  background: var(--au-poco);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-1);
  color: var(--au-texto-suave);
  font: 600 var(--au-t-1) / 1.4 var(--au-fonte-texto);
  text-align: center;
}
.au-atalho[data-posicao="canto"] {
  position: absolute;
  top: var(--au-esp-1);
  right: var(--au-esp-1);
}

/* ---------- Dica ---------- */
.au-dica {
  position: relative;
  display: inline-flex;
}
.au-dica--balao {
  position: absolute;
  bottom: calc(100% + var(--au-esp-2));
  left: 50%;
  z-index: 5;
  box-sizing: border-box;
  width: max-content;
  max-width: min(260px, 90vw);
  padding: var(--au-esp-2) var(--au-esp-3);
  background: var(--au-superficie-2);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-2);
  box-shadow: var(--au-sombra-cartao);
  color: var(--au-texto);
  font: 400 var(--au-t-1) / 1.4 var(--au-fonte-texto);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    opacity 0.12s,
    visibility 0s 0.12s;
}
.au-dica:hover .au-dica--balao,
.au-dica:focus-within .au-dica--balao {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.12s 0.25s,
    visibility 0s 0.25s;
}

/* ---------- Foco: o mesmo anel em todo componente interativo ---------- */
.au-botao:focus-visible,
.au-interruptor:focus-visible,
.au-campo input:focus-visible,
.au-campo select:focus-visible,
.au-campo textarea:focus-visible {
  outline: 2px solid var(--au-sistema);
  outline-offset: 2px;
}

/* ---------- Toque e movimento ---------- */
@media (pointer: coarse) {
  .au-atalho {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .au-botao,
  .au-interruptor,
  .au-interruptor::after,
  .au-campo input,
  .au-campo select,
  .au-campo textarea,
  .au-dica--balao,
  .au-dica:hover .au-dica--balao,
  .au-dica:focus-within .au-dica--balao {
    animation: none;
    transition: none;
  }
  .au-botao:active {
    transform: none;
  }
}

/* ---------- Task 8: botão de largura total, motivo, rótulo e saldos do cabeçalho ---------- */
.au-botao[data-largura="total"] {
  display: flex;
  width: 100%;
}
.au-botao__motivo {
  display: none;
}
.au-janela__cab .au-janela__rotulo {
  display: block;
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--au-texto-suave);
}
.au-janela__cab[data-variante="heroi"] .au-janela__titulo {
  font-size: var(--au-t-5);
  font-weight: 500;
}
.au-janela__saldos {
  display: flex;
  gap: var(--au-esp-5);
  margin-left: auto;
}
.au-janela__saldos > div {
  display: flex;
  flex-direction: column;
  gap: var(--au-esp-1);
  min-width: 62px;
  text-align: center;
}
.au-janela__saldos .au-janela__saldo {
  margin-left: 0;
  font-family: var(--au-fonte-num);
  font-size: var(--au-t-5);
  color: var(--au-valor);
}
.au-janela__saldos span {
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-1);
  color: var(--au-texto-suave);
}
/* Moedas no cabeçalho: cada saldo e sua sigla levam a cor da moeda (mesmas do HUD) */
.au-janela__abrev {
  display: none;
  text-transform: uppercase;
}
.au-janela__saldos [data-tom="coin"] .au-janela__saldo {
  color: var(--au-coin);
}
.au-janela__saldos [data-tom="ticket"] .au-janela__saldo,
.au-janela__saldos [data-tom="ticket"] .au-janela__abrev {
  color: var(--au-ticket);
}
.au-janela__saldos [data-tom="ticket-aura"] .au-janela__saldo,
.au-janela__saldos [data-tom="ticket-aura"] .au-janela__abrev {
  color: var(--au-aura-2);
}
.au-janela__saldos [data-tom="aura"] .au-janela__saldo,
.au-janela__saldos [data-tom="aura"] .au-janela__abrev {
  background: linear-gradient(100deg, var(--au-aura-1), var(--au-aura-2), var(--au-aura-3), var(--au-aura-1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .au-janela__saldos [data-tom="aura"] .au-janela__saldo,
  .au-janela__saldos [data-tom="aura"] .au-janela__abrev {
    animation: au-aura-brilho 3.2s linear infinite;
  }
}
@media (max-width: 650px) {
  .au-janela__longo {
    display: none;
  }
  .au-janela__abrev {
    display: inline;
  }
  .au-janela__saldos {
    gap: var(--au-esp-3);
  }
  .au-janela__saldos > div {
    min-width: 42px;
  }
}

/* ---------- Modal (confirmação sobre a janela) ---------- */
.au-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--au-esp-4);
  border-radius: var(--au-raio-4);
}
.au-modal__fundo {
  position: absolute;
  inset: 0;
  padding: 0;
  background: var(--au-fundo-modal);
  border: 0;
  border-radius: var(--au-raio-4);
  cursor: default;
}
.au-modal__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--au-esp-3);
  box-sizing: border-box;
  width: min(420px, 100%);
  padding: var(--au-esp-5);
  background: var(--au-superficie);
  border: 1px solid var(--au-borda-forte);
  border-radius: var(--au-raio-3);
  box-shadow: var(--au-sombra-janela);
  font-family: var(--au-fonte-texto);
  font-size: var(--au-t-3);
  color: var(--au-texto);
}
.au-modal__titulo {
  margin: 0;
  font-family: var(--au-fonte-titulo);
  font-size: var(--au-t-4);
  font-weight: 500;
}
.au-modal__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--au-esp-2);
}
.au-modal__corpo p {
  margin: 0;
  font-size: var(--au-t-2);
  color: var(--au-texto-suave);
}
.au-modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--au-esp-2);
}