/* ============================================================================
   AprovAKI · aki_botoes.css
   Padrao unico de botao do site.

   REGRA CENTRAL
   -------------
   A FORMA nunca muda: pilula (border-radius 999px), mesma altura, mesmo peso.
   A COR e uma so: o lilas. A FUNCAO aparece no PESO visual, nao na cor.

   POR QUE NAO USAR VERDE E VERMELHO NOS BOTOES
   --------------------------------------------
   No AprovAKI verde e vermelho ja tem significado travado:
     aki_alternativas.css L112  .alternativa.correta -> verde  #3DBE8B
     aki_alternativas.css L116  .alternativa.errada  -> vermelho #E5484D
   E o botao "Responder" fica na MESMA tela que as alternativas
   (questao_template.php). Botao verde ali o aluno le como "acertei".
   Alem disso as patentes ocupam o espectro: esmeralda verde #059669,
   rubi vermelho #dc2626, diamante azul #0284c7.
   Por isso: cor unica lilas, funcao por peso.

   OS QUATRO PESOS
   ---------------
   1. cheio    (.aki-b1) acao da tela. UMA por tela.
   2. contorno (.aki-b2) alternativa de igual valor.
   3. texto    (.aki-b3) acao lateral.
   4. neutro   (.aki-b4) recuar, cancelar, desativar.
   Excecao: destrutivo (.aki-bd contorno / .aki-bdc confirmacao no modal).

   CONTRASTE (medido, texto branco sobre o fundo)
   ---------------------------------------------
     #5A5DF0 cheio normal ....... 4,93  passa
     #3E41ED cheio hover ........ 6,60  passa
     #4A4DEE texto/contorno ..... 5,85  passa (sobre branco)
     #5A5A72 neutro ............. 6,69  passa (sobre branco)
     #C9262C destrutivo ......... 5,53  passa
   Minimo exigido para texto de botao: 4,5.

   ORDEM DE CARGA
   --------------
   Este arquivo tem de ser o ULTIMO stylesheet da pagina. Ele usa !important
   porque as regras que ele substitui tambem usam (style.css L437-452,
   aki_ui_extra.css L385-397 etc). Sem !important nao ganha da cascata.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* lilas: matiz 239, a mesma do botao "Criar um perfil" (#6366f1),
     2% mais escuro para passar no contraste. */
  --aki-b-pri:        #5A5DF0;
  --aki-b-pri-hover:  #3E41ED;
  --aki-b-pri-ativo:  #2226EB;
  --aki-b-pri-texto:  #4A4DEE;
  --aki-b-pri-suave:  #EAEAFD;

  /* neutro: recuar, cancelar, desativar */
  --aki-b-neutro:        #5A5A72;
  --aki-b-neutro-borda:  #D7D7E0;
  --aki-b-neutro-suave:  #F1F1F5;

  /* destrutivo: unica excecao de cor */
  --aki-b-des:        #C9262C;
  --aki-b-des-hover:  #A81F24;
  --aki-b-des-borda:  #EFC3C5;
  --aki-b-des-suave:  #FBECEC;

  /* alvo de toque minimo no celular */
  --aki-b-altura:     48px;
  --aki-b-altura-md:  42px;
  --aki-b-altura-sm:  36px;
}

/* ---------------------------------------------------------------------------
   2. BASE COMPARTILHADA
   --------------------------------------------------------------------------- */
/* Vale para as classes proprias (.aki-b*) E para as classes que ja existem
   no site, listadas na secao 6. */
.aki-b1, .aki-b2, .aki-b3, .aki-b4, .aki-bd, .aki-bdc,
button.aki-btn-primario, .aki-btn-primario,
.aki-btn-secundario, .aki-btn-linha,
button.btn-action, .btn-action,
.btn-submit, .profile-action-row .btn-submit,
.btn-primario, .btn-secundario,
.caderno-empty-cta, .caderno-empty-cta--ghost,
.ranking-you-cta,
.desemp-drawer-cta, .desemp-review-action,
.freeq-primary, .freeq-secondary, .freeq-bottom-cta a, .freeq-submit,
.zona-risco__btn, .zona-risco__btn--warn, .zona-risco__btn--danger,
.banner-exclusao__cancelar,
.aki-confirm-modal__btn, .aki-confirm-modal__btn--ghost,
.aki-confirm-modal__btn--primary,
.aki-modal-btn, .aki-modal-btn.primario, .aki-modal-btn.secundario,
.aki-denunciar-modal__btn,
.aki-denunciar-modal__btn--cancelar, .aki-denunciar-modal__btn--enviar,
.btn-primary, .btn-secondary, .btn-danger, .btn-limpar,
.btn-ver-mais {
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;

  /* A FORMA. Nunca muda. */
  border-radius: 999px !important;
  border: 1.5px solid transparent !important;

  min-height: var(--aki-b-altura) !important;
  padding: 13px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;

  transition: background-color .16s ease, border-color .16s ease,
              transform .16s ease, box-shadow .16s ease !important;
}

.aki-b1:active, .aki-b2:active, .aki-b3:active, .aki-b4:active,
.aki-bd:active, .aki-bdc:active,
button.aki-btn-primario:active, button.btn-action:active,
.btn-submit:active {
  transform: scale(.985) !important;
}

/* Desabilitado: mesmo tratamento em qualquer peso. */
.aki-b1[disabled], .aki-b2[disabled], .aki-b3[disabled], .aki-b4[disabled],
.aki-bd[disabled], .aki-bdc[disabled],
button.aki-btn-primario[disabled], button.btn-action[disabled],
.btn-submit[disabled], .btn-primary[disabled],
.freeq-submit:disabled,
.aki-denunciar-modal__btn--enviar:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   3. OS QUATRO PESOS
   --------------------------------------------------------------------------- */
/* ===== PESO 1: CHEIO — a acao da tela. UMA por tela. ===== */
.aki-b1,
button.aki-btn-primario, .aki-btn-primario,
button.btn-action, .btn-action,
.btn-submit, .profile-action-row .btn-submit,
.btn-primario,
.caderno-empty-cta,
.ranking-you-cta,
.desemp-drawer-cta,
.freeq-primary, .freeq-bottom-cta a, .freeq-submit,
.aki-confirm-modal__btn--primary,
.aki-modal-btn.primario,
.aki-denunciar-modal__btn--enviar,
.btn-primary, .btn-limpar {
  background: var(--aki-b-pri) !important;
  background-color: var(--aki-b-pri) !important;
  background-image: none !important;   /* mata o linear-gradient do .btn-submit */
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(90, 93, 240, .24) !important;
}
.aki-b1:hover,
button.aki-btn-primario:hover, .aki-btn-primario:hover,
button.btn-action:hover, .btn-action:hover,
.btn-submit:hover, .profile-action-row .btn-submit:hover,
.btn-primario:hover,
.caderno-empty-cta:hover, .caderno-empty-cta:focus-visible,
.ranking-you-cta:hover,
.desemp-drawer-cta:hover, .desemp-drawer-cta:focus-visible,
.freeq-primary:hover, .freeq-bottom-cta a:hover, .freeq-submit:hover,
.aki-confirm-modal__btn--primary:hover,
.aki-modal-btn.primario:hover,
.aki-denunciar-modal__btn--enviar:hover,
.btn-primary:hover, .btn-limpar:hover {
  background: var(--aki-b-pri-hover) !important;
  background-color: var(--aki-b-pri-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  filter: none !important;             /* mata o filter:brightness do aki_modal */
  opacity: 1 !important;
}

/* ===== PESO 2: CONTORNO — alternativa de igual valor ===== */
.aki-b2,
.caderno-empty-cta--ghost,
.freeq-secondary,
.desemp-review-action,
.aki-btn-secundario, .aki-btn-linha {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--aki-b-pri-texto) !important;
  border-color: var(--aki-b-pri) !important;
  box-shadow: none !important;
}
.aki-b2:hover,
.caderno-empty-cta--ghost:hover, .caderno-empty-cta--ghost:focus-visible,
.freeq-secondary:hover,
.desemp-review-action:hover, .desemp-review-action:focus-visible,
.aki-btn-secundario:hover, .aki-btn-linha:hover {
  background: var(--aki-b-pri-suave) !important;
  background-color: var(--aki-b-pri-suave) !important;
  color: var(--aki-b-pri-texto) !important;
  transform: translateY(-1px) !important;
}

/* ===== PESO 3: TEXTO — acao lateral ===== */
.aki-b3,
.btn-ver-mais {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--aki-b-pri-texto) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.aki-b3:hover,
.btn-ver-mais:hover {
  background: var(--aki-b-pri-suave) !important;
  background-color: var(--aki-b-pri-suave) !important;
  color: var(--aki-b-pri-texto) !important;
}

/* ===== PESO 4: NEUTRO — recuar, cancelar, desativar =====
   Sem lilas: a acao nao leva a nada novo. */
.aki-b4,
.btn-secundario,
.zona-risco__btn,
.zona-risco__btn--warn,
.banner-exclusao__cancelar,
.aki-confirm-modal__btn--ghost,
.aki-modal-btn.secundario,
.aki-denunciar-modal__btn--cancelar,
.btn-secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--aki-b-neutro) !important;
  border-color: var(--aki-b-neutro-borda) !important;
  box-shadow: none !important;
}
.aki-b4:hover,
.btn-secundario:hover,
.zona-risco__btn:hover,
.zona-risco__btn--warn:hover,
.banner-exclusao__cancelar:hover,
.aki-confirm-modal__btn--ghost:hover,
.aki-modal-btn.secundario:hover,
.aki-denunciar-modal__btn--cancelar:hover,
.btn-secondary:hover {
  background: var(--aki-b-neutro-suave) !important;
  background-color: var(--aki-b-neutro-suave) !important;
  color: var(--aki-b-neutro) !important;
  border-color: #C2C2CE !important;
  filter: none !important;
}

/* ---------------------------------------------------------------------------
   4. EXCECAO: DESTRUTIVO
   --------------------------------------------------------------------------- */
/* Vermelho volta em UM lugar so: apagar de verdade.
   Nunca na tela de questao, onde vermelho ja significa "errou".

   .aki-bd  = contorno. E o botao que ABRE a confirmacao.
   .aki-bdc = cheio.    So DENTRO do modal, na confirmacao final. */
.aki-bd,
.zona-risco__btn--danger,
.btn-danger {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--aki-b-des) !important;
  border-color: var(--aki-b-des-borda) !important;
  box-shadow: none !important;
}
.aki-bd:hover,
.zona-risco__btn--danger:hover,
.btn-danger:hover {
  background: var(--aki-b-des-suave) !important;
  background-color: var(--aki-b-des-suave) !important;
  color: var(--aki-b-des) !important;
  border-color: var(--aki-b-des) !important;
}

.aki-bdc,
.aki-confirm-modal__btn--primary.is-danger,
.aki-modal-btn.primario.perigo {
  background: var(--aki-b-des) !important;
  background-color: var(--aki-b-des) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--aki-b-des) !important;
  box-shadow: 0 6px 16px rgba(201, 38, 44, .20) !important;
}
.aki-bdc:hover,
.aki-confirm-modal__btn--primary.is-danger:hover,
.aki-modal-btn.primario.perigo:hover {
  background: var(--aki-b-des-hover) !important;
  background-color: var(--aki-b-des-hover) !important;
  color: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   5. TAMANHOS
   --------------------------------------------------------------------------- */
/* Tres tamanhos. A forma e a cor nao mudam, so a escala. */
.aki-b-md {
  min-height: var(--aki-b-altura-md) !important;
  padding: 10px 20px !important;
  font-size: .9rem !important;
}
.aki-b-sm {
  min-height: var(--aki-b-altura-sm) !important;
  padding: 8px 16px !important;
  font-size: .82rem !important;
  box-shadow: none !important;
}
.aki-b-cheio {
  width: 100% !important;
  display: flex !important;
}

/* Botoes que JA sao pequenos no site continuam pequenos. */
.desemp-drawer-cta,
.desemp-review-action,
.btn-limpar,
.aki-denunciar-modal__btn--cancelar,
.aki-denunciar-modal__btn--enviar {
  min-height: var(--aki-b-altura-sm) !important;
  padding: 8px 16px !important;
  font-size: .8rem !important;
  box-shadow: none !important;
}

.caderno-empty-cta,
.caderno-empty-cta--ghost,
.ranking-you-cta,
.zona-risco__btn,
.zona-risco__btn--warn,
.zona-risco__btn--danger,
.banner-exclusao__cancelar,
.btn-primary, .btn-secondary, .btn-danger,
.aki-modal-btn,
.aki-confirm-modal__btn {
  min-height: var(--aki-b-altura-md) !important;
  padding: 10px 20px !important;
  font-size: .88rem !important;
}
.caderno-empty-cta {
  box-shadow: 0 6px 14px -8px rgba(90, 93, 240, .55) !important;
}

/* Largura total onde a tela pede: cadastro e telas de uma acao so. */
button.aki-btn-primario, .aki-btn-primario,
.aki-btn-secundario, .aki-btn-linha,
button.btn-action, .btn-action,
.btn-submit,
.btn-primario, .btn-secundario,
.freeq-submit {
  width: 100% !important;
  display: flex !important;
}
/* ...menos quando o botao esta numa fileira com o "voltar". */
.profile-action-row .btn-submit {
  width: auto !important;
  flex: 1.9 1 0 !important;
  display: inline-flex !important;
}

/* ---------------------------------------------------------------------------
   6. MAPEAMENTO DAS CLASSES QUE JA EXISTEM NO SITE
   --------------------------------------------------------------------------- */
/* Tabela do que virou o que. Serve de documentacao e de conferencia.

   CLASSE NO SEU SITE                  ARQUIVO/LINHA ORIGINAL      COR ANTES   PESO AGORA
   ----------------------------------  --------------------------  ----------  -----------
   .aki-btn-primario                   aki_ui_extra.css L385       #6366f1     1 cheio
   .btn-action                         style.css L435              #6366f1     1 cheio
   .btn-submit                         style_cadastro.css L161     gradiente   1 cheio
   .btn-primario                       escolher_avatar.php         #7E5BEF     1 cheio
   .caderno-empty-cta                  style_user.css L2469        #4B3CB8     1 cheio
   .ranking-you-cta                    style_user.css L1217        #7c3aed     1 cheio
   .desemp-drawer-cta                  desempenho.css L495         #6d28d9     1 cheio
   .freeq-primary                      questoes_comentadas.css L81 #6366f1     1 cheio
   .aki-modal-btn.primario             aki_modal.css L150          #7E5BEF     1 cheio
   .btn-primary                        admin.css L181              #4b3bff     1 cheio
   .btn-limpar                         admin.css L66               #4b3bff     1 cheio
   .aki-confirm-modal__btn--primary    style_cadastro.css L614     #6366f1     1 cheio
   .aki-denunciar-modal__btn--enviar   aki_uiux_v4.css L205        #4B3CB8     1 cheio

   .caderno-empty-cta--ghost           style_user.css L2497        contorno    2 contorno
   .freeq-secondary                    questoes_comentadas.css L88 contorno    2 contorno
   .desemp-review-action               desempenho.css L1116        contorno    2 contorno
   .aki-btn-secundario                 aguardando_responsavel.php  contorno    2 contorno

   .btn-ver-mais                       style.css L496              contorno    3 texto

   .btn-secundario                     escolher_avatar.php         branco      4 neutro
   .zona-risco__btn                    style_cadastro.css L663     branco      4 neutro
   .zona-risco__btn--warn              style_cadastro.css L678     AMARELO     4 neutro
   .banner-exclusao__cancelar          style_cadastro.css L708     amarelo     4 neutro
   .aki-confirm-modal__btn--ghost      style_cadastro.css L609     branco      4 neutro
   .aki-modal-btn.secundario           aki_modal.css L142          cinza       4 neutro
   .aki-denunciar-modal__btn--cancelar aki_uiux_v4.css L201        #f1eef9     4 neutro
   .btn-secondary                      admin.css L183              #eef0f5     4 neutro

   .zona-risco__btn--danger            style_cadastro.css L684     vermelho    destrutivo contorno
   .btn-danger                         admin.css L184              vermelho    destrutivo contorno
   .aki-confirm-modal__btn--primary
     .is-danger                        style_cadastro.css L621     #dc2626     destrutivo cheio
   .aki-modal-btn.primario.perigo      aki_modal.css L159          #E5484D     destrutivo cheio

   MUDANCA DE SIGNIFICADO QUE VALE NOTAR
   -------------------------------------
   .zona-risco__btn--warn era AMARELO. Virou neutro cinza. Motivo: amarelo
   com texto branco da contraste 1,66 (ilegivel) e, escurecido o bastante
   para passar, vira marrom e perde a identidade da marca. "Desativar" nao
   perde dado nenhum, entao cinza comunica melhor que amarelo.

   TOKENS ANTIGOS: o --aki-purple estava definido DUAS vezes com valores
   diferentes (#6d28d9 em desempenho.css L8, #7c3aed em style_user.css L917).
   Este arquivo nao altera esses tokens — eles continuam valendo para os
   graficos e aneis de patente. Ele so tira os botoes de cima deles.  */

/* Botao dentro de fileira de acoes: nao esticar. */
.zona-risco__acoes .zona-risco__btn,
.zona-risco__acoes .zona-risco__btn--warn,
.zona-risco__acoes .zona-risco__btn--danger {
  flex: 1 1 160px !important;
  width: auto !important;
}
.caderno-empty-actions .caderno-empty-cta,
.caderno-empty-actions .caderno-empty-cta--ghost {
  width: auto !important;
  display: inline-flex !important;
}

/* ---------------------------------------------------------------------------
   7. O QUE ESTE ARQUIVO NAO TOCA
   --------------------------------------------------------------------------- */
/* Estes NAO sao botoes de acao, e por isso ficam de fora de proposito.
   Se algum dia voce quiser incluir um, e so acrescentar o seletor na
   secao 2 e no peso certo — mas leia o motivo primeiro.

   .alternativa, .freeq-alt        As alternativas da questao. Verde = acertou,
                                   vermelho = errou. Nao mexer NUNCA.
   .btn-coment                     Abre/fecha comentario. E um interruptor,
                                   nao uma acao.
   .btn-salvar-questao             Icone de salvar. Nao tem rotulo de texto.
   .aki-notif__btn                 Sino de notificacao. Icone no cabecalho.
   .aki-userchip__btn              Foto do usuario no cabecalho.
   .aki-denunciar-btn              Icone de denuncia na linha do ranking.
                                   Discreto de proposito.
   .aki-capa-btn                   Editar capa. Fica SOBRE a imagem da capa,
                                   precisa do fundo translucido.
   .desemp-range-btn               Abas de periodo (7/30/90 dias). Sao abas,
                                   nao botoes.
   .caderno-pager-btn              Paginacao do caderno.
   .caderno-pager-btn--ghost       Idem.
   .freeq-toggle                   "Ver comentario". Interruptor, nao acao.
   .btn-add-bloco                  "+" de adicionar bloco no formulario do
                                   admin. Nao tem CSS proprio hoje.
   .btn-salvar-questao--phi        Variante do icone de salvar.
   .btn-mini, .btn-mini-erro       Acoes minusculas da tabela do admin.
   .btn-remover-bloco              "x" de remover bloco no formulario.
   .btn-ghost                      Link sublinhado do admin.
   .aki-dif__btn                   Selecao de dificuldade.
   .aki-aviso__btn                 Botao do aviso de questao.
   .rich-btn                       Barra de formatacao do editor do admin.
   .admin-paginacao a              Paginacao do admin.  */

/* ---------------------------------------------------------------------------
   8. FOCO VISIVEL E MOVIMENTO REDUZIDO
   --------------------------------------------------------------------------- */
/* Anel de foco visivel para quem navega pelo teclado. Fica FORA do botao,
   entao nao empurra o texto nem muda a altura. */
.aki-b1:focus-visible, .aki-b2:focus-visible, .aki-b3:focus-visible,
.aki-b4:focus-visible, .aki-bd:focus-visible, .aki-bdc:focus-visible,
button.aki-btn-primario:focus-visible, .aki-btn-primario:focus-visible,
.aki-btn-secundario:focus-visible, .aki-btn-linha:focus-visible,
button.btn-action:focus-visible, .btn-action:focus-visible,
.btn-submit:focus-visible,
.btn-primario:focus-visible, .btn-secundario:focus-visible,
.caderno-empty-cta:focus-visible, .caderno-empty-cta--ghost:focus-visible,
.ranking-you-cta:focus-visible,
.desemp-drawer-cta:focus-visible, .desemp-review-action:focus-visible,
.freeq-primary:focus-visible, .freeq-secondary:focus-visible,
.zona-risco__btn:focus-visible,
.zona-risco__btn--warn:focus-visible,
.zona-risco__btn--danger:focus-visible,
.banner-exclusao__cancelar:focus-visible,
.aki-confirm-modal__btn:focus-visible,
.aki-modal-btn:focus-visible,
.aki-denunciar-modal__btn:focus-visible,
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-danger:focus-visible, .btn-limpar:focus-visible,
.btn-ver-mais:focus-visible {
  outline: 2px solid var(--aki-b-pri) !important;
  outline-offset: 2px !important;
}
.aki-bd:focus-visible, .aki-bdc:focus-visible,
.zona-risco__btn--danger:focus-visible, .btn-danger:focus-visible {
  outline-color: var(--aki-b-des) !important;
}

/* Respeita quem desligou animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  .aki-b1, .aki-b2, .aki-b3, .aki-b4, .aki-bd, .aki-bdc,
  button.aki-btn-primario, .aki-btn-primario,
  button.btn-action, .btn-action, .btn-submit,
  .btn-primario, .btn-secundario,
  .caderno-empty-cta, .caderno-empty-cta--ghost,
  .ranking-you-cta, .desemp-drawer-cta, .desemp-review-action,
  .freeq-primary, .freeq-secondary,
  .zona-risco__btn, .zona-risco__btn--warn, .zona-risco__btn--danger,
  .aki-confirm-modal__btn, .aki-modal-btn, .aki-denunciar-modal__btn,
  .btn-primary, .btn-secondary, .btn-danger, .btn-limpar, .btn-ver-mais {
    transition: none !important;
  }
  .aki-b1:hover, .aki-b2:hover, .aki-b4:hover,
  button.aki-btn-primario:hover, button.btn-action:hover,
  .btn-submit:hover, .caderno-empty-cta:hover, .desemp-review-action:hover {
    transform: none !important;
  }
}

/* Celular estreito: os botoes em fileira passam a empilhar,
   para nao virarem tres pilulas apertadas de 90px. */
@media (max-width: 420px) {
  .caderno-empty-actions {
    flex-direction: column !important;
  }
  .caderno-empty-actions .caderno-empty-cta,
  .caderno-empty-actions .caderno-empty-cta--ghost {
    width: 100% !important;
    display: flex !important;
  }
}