/*
 * Botões da área externa.
 *
 * O `@import` da fonte Impact saiu: `family=Impact` NÃO existe no Google Fonts
 * (a família é comercial, da Microsoft), então a requisição externa gastava um
 * round-trip antes de pintar o primeiro botão — em 3G é atraso visível num
 * elemento da primeira dobra — e não trazia fonte nenhuma. A pilha local
 * `'Impact', Arial, sans-serif` já resolve.
 */

/* Classe base para botões Bola da Vez */
.btn-bola-da-vez {
    font-family: 'Impact', Arial, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 10px 25px;
    font-size: 28px;
    line-height: 1.15;
    cursor: pointer;
    min-width: 250px;
    white-space: nowrap;
    position: relative;
    border: none;
}

.btn-bola-da-vez span {
    display: inline-block;
    /* 17/10/2026: era #fff sobre #f7a000 = 2,10:1 (WCAG AA pede 4,5).
       Texto escuro da marca = 8,81:1, e é o que o botão do cadastro
       (autenticacao.css) já usava — dois botões da mesma família com
       legibilidade diferente era o defeito de consistência. */
    color: #1b1200;
    /* O contorno preto existia só para "salvar" o texto branco (e contorno não
       conta para contraste na WCAG). Com o texto escuro ele sujaria a letra,
       então saiu junto. */
}

/* Botão Amarelo */
.btn-bola-da-vez.btn-yellow {
    background-color: #f7a000;
    color: #1b1200;
    box-shadow: 0 4px 0 #c07800;
}

.btn-bola-da-vez.btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #c07800;
    text-decoration: none;
    color: #1b1200;
}

.btn-bola-da-vez.btn-yellow:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c07800;
}

/* Botão Vermelho */
.btn-bola-da-vez.btn-red {
    background-color: #FF0000;
    color: #fff;
    box-shadow: 0 4px 0 #cc0000;
}

.btn-bola-da-vez.btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #cc0000;
    text-decoration: none;
    color: #fff;
}

.btn-bola-da-vez.btn-red:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #cc0000;
}

/* Estados comuns */
.btn-bola-da-vez:focus {
    outline: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn-bola-da-vez:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-bola-da-vez:disabled:hover {
    transform: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Variações de tamanho */
.btn-bola-da-vez.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-bola-da-vez.btn-lg {
    padding: 1.5rem 3rem;
    font-size: 1.5rem;
}

.btn-bola-da-vez.btn-xl {
    padding: 2rem 4rem;
    font-size: 2rem;
}

/*
 * Responsividade.
 *
 * O `min-width` cai a zero em tela estreita: 180px de largura mínima num
 * aparelho de 320px deixava só 70px de folga, e o botão estourava a linha
 * (a área externa empilha os botões no celular, então não há por que impor
 * mínimo). Os botões que devem ocupar a linha inteira recebem `w-full`.
 */
@media (max-width: 640px) {
    .btn-bola-da-vez {
        font-size: 22px;
        padding: 10px 18px;
        min-width: 0;
    }
    
    .btn-bola-da-vez.btn-lg {
        font-size: 22px;
        padding: 12px 20px;
    }
    
    .btn-bola-da-vez.btn-xl {
        font-size: 26px;
        padding: 14px 24px;
    }
}

@media (max-width: 480px) {
    .btn-bola-da-vez {
        font-size: 19px;
        padding: 11px 16px;
        min-width: 0;
        white-space: normal;
        line-height: 1.2;
    }
}

/* Botão full width */
.btn-bola-da-vez.btn-block {
    width: 100%;
    max-width: 400px;
}