/* ================================================================
   V65 - OS BOTOES DO SITE FALANDO A MESMA LINGUA

   O dono olhou o site e disse: "os botoes estao bem bagunçados".
   Estava certo. Cada tela foi feita numa epoca diferente e inventou o
   seu proprio botao. Medido no site no ar, antes desta folha:

     Gerar novamente ............. 40px de altura, letra 16px
     Copiar meus jogos ........... 54px,           letra 16px
     Marcar o que apostei ........ 46px,           letra 15,2px
     Baixar ...................... 42px,           letra 14px
     Copiar todos os jogos ....... 48px,           letra 14,5px
     Exportar CSV (11x14) ........ 36px,           letra 9px (!)
     pilulas da barra de cima .... 42px e 44px na mesma linha

   Tres alturas diferentes lado a lado na MESMA tela, e uma letra de 9px
   que ninguem le. Esta folha nao muda cor nenhuma e nao mexe no que os
   botoes fazem: ela so coloca todos na mesma REGUA.

     - Botao de acao ........... 48px de altura, letra 15px, canto 13px
     - Botao de linha/tabela ... 40px de altura, letra 13px, canto 12px
     - Pilula da barra de cima . 44px, sempre numa linha so

   A hierarquia passa a vir da COR (roxo = acao principal, branco =
   secundario, transparente = discreto), nao do tamanho. Botao maior que
   o vizinho na mesma linha e o que fazia a tela parecer desalinhada.

   Ela e carregada por ULTIMO, depois da mobile-v35.css, para poder
   vencer as regras antigas onde precisa vencer. Nada foi apagado das
   folhas antigas: se esta folha sair, o site volta exatamente ao que era.

   O CELULAR (ate 700px) NAO E MEXIDO AQUI. Lá a barra de cima ja e uma
   grade de colunas iguais, medida em 375px na V35, e ja esta organizada.
   ================================================================ */

:root {
  --btn-altura: 48px;
  --btn-altura-baixa: 40px;
  --btn-canto: 13px;
  --btn-letra: 15px;
  --btn-letra-baixa: 13px;
}

/* ---------- 1. BOTAO DE ACAO ----------
   Todos os que mandam alguma coisa acontecer, de qualquer tela. */
.btn,
.fe-refazer,
.fe-copiar,
.fe-baixar,
.repeat-feature-action,
.caixa-levar .btn {
  min-height: var(--btn-altura);
  padding: 0 20px;
  border-radius: var(--btn-canto);
  font-size: var(--btn-letra);
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
/* O "Refazer o fechamento" e de largura cheia por decisao da tela dele. */
.fe-refazer { width: 100%; }
.btn.full { width: 100%; }

/* No cartao "Seus jogos" as tres alturas viraram uma. O "Copiar" continua
   sendo o mais importante - agora por ser o unico roxo, nao por ser o
   mais alto. */
.caixa-levar .btn-primary,
.caixa-levar .btn-secondary,
.caixa-levar .btn-ghost {
  min-height: var(--btn-altura);
  font-size: var(--btn-letra);
}
.caixa-levar .btn-ghost { padding: 0 16px; }

/* ---------- 2. BOTAO DE LINHA ----------
   O que vive dentro de tabela ou ao lado de um titulo. Menor de
   proposito, mas nunca menor que isto: 9px de letra ninguem le. */
.cross-result-actions a,
.cross-result-actions button,
.table-action,
.data-action {
  min-height: var(--btn-altura-baixa);
  padding: 0 14px;
  border-radius: 12px;
  font-size: var(--btn-letra-baixa);
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cross-result-actions { gap: 8px; flex-wrap: wrap; }

/* ---------- 3. A LINHA DE ESCOLHA + BOTAO ----------
   "5 jogos [v] | Gerar novamente": a caixinha de escolher e o botao
   tinham 40px e 40px, mas com letras e cantos diferentes. Agora sao
   irmaos do mesmo tamanho. */
.multi-toolbar { align-items: center; gap: 10px; }
.multi-toolbar .game-select {
  min-height: var(--btn-altura);
  border-radius: var(--btn-canto);
  font-size: 14px;
}

/* ---------- 4. A BARRA DE CIMA (do tablet para cima) ----------
   Dois problemas medidos: as pilulas tinham 42px e 44px na mesma linha
   (as de nome comprido quebravam em duas linhas e cresciam), e a faixa
   toda tinha 862px dentro de uma tela de 802px - o ultimo botao ficava
   CORTADO, sem barra de rolagem, impossivel de clicar.

   Conserto: nome sempre numa linha so, todas com 44px, e a faixa pode
   passar para a linha de baixo em vez de sumir na borda. */
@media (min-width: 701px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 10px; }
  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
    overflow: visible;
    max-width: none;
  }
  .top-actions > * {
    flex: 0 0 auto;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
  }
  .top-actions .icon-btn small,
  .top-actions .repeat-nav small { white-space: nowrap; }
}

/* ----------------------------------------------------------------
   OS AVISOS (V68)

   Ficam nesta folha porque ela ja carrega em TODAS as telas - o aviso
   tambem precisa. Veja o comentario em base.html: ate agora o sistema
   chamava flash() e nada aparecia.
   ---------------------------------------------------------------- */
.avisos-v68 { margin: 16px auto 0; display: grid; gap: 10px; }
.aviso-v68 {
  margin: 0; padding: 14px 16px; border-radius: 14px;
  font-size: 15px; font-weight: 700; line-height: 1.55;
}
.aviso-v68.bom { background: #e9f7f0; border: 1px solid #c3e7d5; color: #17623f; }
.aviso-v68.ruim { background: #fdf0f2; border: 1px solid #f2d2d8; color: #97323f; }
/* V73: a faixa "seu plano vence em..." - atencao, nao erro. */
.aviso-v68.atencao { background: #fff8ec; border: 1px solid #f1dcb5; color: #6b4410; }
.aviso-v68.atencao a { color: #8a4b00; font-weight: 800; text-decoration: underline; }