/* ==========================================================================
   PRISMA · button.css
   --------------------------------------------------------------------------
   HIERARQUIA É A REGRA PRINCIPAL.
   Uma tela tem UM botão primário. Se tem dois, um deles não é primário.
   Se tudo é primário, o usuário não sabe o que fazer e a tela virou menu.

   Ordem de peso: primário > secundário > vidro > fantasma > perigo (fora da fila).
   ========================================================================== */

.btn {
  /* estrutura */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--alvo-toque);
  padding: 0 var(--espaco-5);
  border-radius: var(--radius-full);
  border: 1px solid transparent;

  /* texto */
  font-size: var(--body-size);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;

  /* comportamento */
  cursor: pointer;
  user-select: none;
  position: relative;
  transition:
    background-color var(--motion-fast) var(--easing-standard),
    border-color     var(--motion-fast) var(--easing-standard),
    box-shadow       var(--motion-fast) var(--easing-standard),
    transform        var(--motion-fast) var(--easing-standard),
    color            var(--motion-fast) var(--easing-standard);
}

/* O afundar de 1px no active é o que dá sensação de botão físico.
   Não é enfeite: é a confirmação tátil de que o clique registrou. */
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;                 /* opacity global borra o texto; cor explícita é melhor */
  color: var(--text-disabled);
  background: var(--surface-2);
  border-color: var(--border-subtle);
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   PRIMÁRIO — a ação da tela
   -------------------------------------------------------------------------- */
.btn--primario {
  background-color: var(--accent-primary);
  /* Botão também é PLACA, não retângulo pintado. O véu dá lado de luz e lado
     de sombra; a aresta interna dá espessura. Cor chapada + raio arredondado
     é o que faz um botão parecer template. */
  background-image:
    linear-gradient(176deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%);
  color: var(--text-on-accent);       /* 5,3:1 - medido */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.10),
    var(--elev-raised);
}
.btn--primario:hover:not(:disabled) {
  background-color: var(--accent-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(255,255,255,.12),
    var(--elev-raised), var(--glow-subtle);
}
.btn--primario:active:not(:disabled) {
  background-color: var(--accent-active);
  /* Ao pressionar a luz do topo some: a placa afundou, então não recebe mais
     luz de cima. É este detalhe que faz a pressão parecer física. */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
}

/* --------------------------------------------------------------------------
   SECUNDÁRIO — ação alternativa, mesmo nível de importância da tarefa
   -------------------------------------------------------------------------- */
.btn--secundario {
  background-color: var(--surface-2);
  background-image: var(--surface-veu);
  color: var(--text-primary);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--border-default), var(--elev-raised);
}
.btn--secundario:hover:not(:disabled) {
  background-color: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--elev-raised);
}
.btn--secundario:active:not(:disabled) {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.14);
}

/* --------------------------------------------------------------------------
   VIDRO — para botão que flutua SOBRE conteúdo, foto ou vídeo
   Só use quando houver algo atrás para refratar. Sobre superfície sólida
   ele vira um secundário mais fraco, sem ganho nenhum.
   -------------------------------------------------------------------------- */
.btn--vidro {
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturacao));
  color: var(--text-primary);
  border-color: var(--border-glass);
  box-shadow: var(--elev-raised);
}
.btn--vidro:hover:not(:disabled) { background-color: var(--surface-glass-strong); }

/* --------------------------------------------------------------------------
   FANTASMA — ação terciária, cancelar, voltar
   -------------------------------------------------------------------------- */
.btn--fantasma {
  background: transparent;
  color: var(--text-secondary);
}
.btn--fantasma:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   DESTRUTIVO — apagar, remover, cancelar execução
   Fora da hierarquia: nunca é o primário visual da tela, mesmo sendo a ação
   principal do diálogo. Quem confirma destruição deve ter que mirar.
   -------------------------------------------------------------------------- */
.btn--perigo {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}
.btn--perigo:hover:not(:disabled) {
  background: var(--danger-surface);
  border-color: var(--danger);
}
/* Só dentro de diálogo de confirmação, onde já houve um passo de intenção. */
.btn--perigo-solido {
  background: var(--danger);
  color: var(--text-inverse);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Tamanhos
   -------------------------------------------------------------------------- */
.btn--sm { min-height: 36px; padding: 0 var(--espaco-4); font-size: var(--body-sm-size); }
.btn--lg { min-height: 52px; padding: 0 var(--espaco-7); font-size: var(--body-lg-size); }

/* Largura total: só em celular e em formulário de coluna única. */
.btn--bloco { width: 100%; }

/* --------------------------------------------------------------------------
   BOTÃO DE ÍCONE
   Sempre com aria-label. Ícone sozinho sem nome acessível é botão invisível
   para leitor de tela.
   -------------------------------------------------------------------------- */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing-standard),
              color var(--motion-fast) var(--easing-standard);
}
.btn-icone:hover:not(:disabled) { background: var(--surface-2); color: var(--text-primary); }
.btn-icone--vidro {
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturacao));
  border-color: var(--border-glass);
  color: var(--text-primary);
}
.btn-icone--sm { width: 36px; height: 36px; }

/* --------------------------------------------------------------------------
   FAB — ação flutuante (celular, sobretudo)
   -------------------------------------------------------------------------- */
.btn-fab {
  position: fixed;
  right: var(--espaco-5);
  bottom: calc(var(--espaco-5) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: var(--elev-floating), var(--glow-subtle);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   GRUPO e SPLIT
   -------------------------------------------------------------------------- */
.btn-grupo { display: inline-flex; }
.btn-grupo > .btn { border-radius: 0; }
.btn-grupo > .btn:first-child {
  border-start-start-radius: var(--radius-full);
  border-end-start-radius: var(--radius-full);
  padding-inline-start: var(--espaco-5);
}
.btn-grupo > .btn:last-child {
  border-start-end-radius: var(--radius-full);
  border-end-end-radius: var(--radius-full);
}
.btn-grupo > .btn + .btn { margin-inline-start: -1px; }
.btn-grupo > .btn:hover { z-index: 1; }

.btn-split { display: inline-flex; }
.btn-split > .btn--primario:first-child {
  border-start-end-radius: 0; border-end-end-radius: 0;
}
.btn-split > .btn--primario:last-child {
  border-start-start-radius: 0; border-end-start-radius: 0;
  padding-inline: var(--espaco-3);
  border-inline-start: 1px solid rgba(255, 255, 255, .22);
}

/* --------------------------------------------------------------------------
   ESTADO: CARREGANDO
   aria-busy="true" faz o trabalho semântico. O visual só acompanha.
   O texto NÃO some: botão que vira só um spinner perde a largura e o layout
   pula. Aqui o texto fica invisível mas ocupa o espaço.
   -------------------------------------------------------------------------- */
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn-rotulo { visibility: hidden; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: prisma-girar 620ms linear infinite;
}
@keyframes prisma-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* --------------------------------------------------------------------------
   Ícone dentro de botão
   -------------------------------------------------------------------------- */
.btn svg, .btn-icone svg, .btn-fab svg {
  width: var(--icone-md);
  height: var(--icone-md);
  flex: none;
  stroke-width: var(--icone-traco);
}


/* --------------------------------------------------------------------------
   CRISTAL — o botão principal SOBRE A CENA  (D-014 · pedido da autora, 19/09/2026 22h09:
   "o branco ficou chapado, era melhor um glass, um blur")
   Receita medida na Orbit: tinta clara baixa, blur 20px, aresta de luz a ~38%, brilho no alto.
   Só faz sentido com algo para refratar atrás: use dentro de .cena, de preferência com a
   lâmina de luz passando por trás dele. Sobre fundo liso, use .btn--primario.
   -------------------------------------------------------------------------- */
.btn--cristal {
  background-color: color-mix(in srgb, var(--text-on-destaque) 16%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  border-color: color-mix(in srgb, var(--text-on-destaque) 38%, transparent);
  color: var(--text-on-destaque);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-on-destaque) 46%, transparent),
              inset 0 -10px 18px -12px color-mix(in srgb, var(--text-on-destaque) 22%, transparent),
              var(--elev-floating);
}
.btn--cristal:hover:not(:disabled) { background-color: color-mix(in srgb, var(--text-on-destaque) 24%, transparent); }