/* =========================================================
   BUTTONS — BASE
   Estrutura compartilhada por todos os botões

   ARQUITETURA:
   Usamos APENAS box-shadow para efeitos visuais da borda e
   do relevo. Nunca border + box-shadow juntos, porque a borda
   CSS fica por cima do box-shadow inset e cria o artefato
   visual de "borda passando da sombra" nos cantos arredondados.

   - Botões sólidos:  border: none + box-shadow inset duplo
                      (relevo embaixo + faixa fina de contorno no topo se necessário)
   - Botões outline:  border: none + box-shadow inset simulando a borda
   - Ambos respeitam o border-radius sem artefatos
========================================================= */

.btn,
.btn-secondary,
.btn-link,
.auth-submit-button,
.profile-button,
.home-button,
.botao-whatsapp,
.botao-voluntario,
.botao-participar-mutirao,
.botao-participar,
.public-announcement-back,
.comunicado-modal-mais-tarde {
    --button-height: 44px;
    --button-padding: 20px;
    --button-relief-size: 4px;   /* altura do relevo (base escura embaixo) */
    --button-border-size: 0px;   /* espessura da borda simulada via box-shadow */
    --button-background: transparent;
    --button-color: var(--azul-profundo, #00306b);
    --button-border-color: transparent;
    --button-relief: transparent;

    display: inline-flex;
    position: relative;
    isolation: isolate;

    box-sizing: border-box;
    min-width: 44px;
    min-height: var(--button-height);
    align-items: center;
    justify-content: center;
    gap: 8px;

    /*
     * padding-bottom = relevo: desloca o conteúdo pra cima,
     * centralizando visualmente o texto mesmo com a sombra embaixo.
     * padding-top = borda-topo: compensa a borda simulada por box-shadow inset.
     */
    padding: var(--button-border-size) var(--button-padding) var(--button-relief-size);

    border: none;           /* sem border CSS — borda fica no box-shadow */
    border-radius: 999px;

    background: var(--button-background);

    /*
     * box-shadow duplo:
     *   1) inset 0 0 0 N  → borda simulada (uniforme ao redor)
     *   2) inset 0 -N 0   → relevo embaixo
     * Ambos ficam dentro do border-radius, sem artefatos.
     */
    box-shadow:
        inset 0 0 0 var(--button-border-size) var(--button-border-color),
        inset 0 calc(-1 * var(--button-relief-size)) 0 0 var(--button-relief);

    /* !important para sobrepor regras globais como a { color: ... } do template */
    color: var(--button-color) !important;

    font-family: var(--fonte-corpo, "Quicksand", system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease,
        transform 0.18s ease;
}

/* Botões outline: sem relevo, mas com borda de 2px via box-shadow */
.btn--contorno,
.btn--contorno-branco,
.btn-outline,
.btn-link,
.home-button--secondary,
.public-announcement-back {
    --button-relief-size: 0px;
    --button-border-size: 2px;
}

/* =========================================================
   BUTTONS — SIZES
========================================================= */

.btn-small,
.btn--compact {
    --button-padding: 12px;

    min-height: 36px;
    font-size: 0.875rem;
}

/* =========================================================
   BUTTONS — STATES
========================================================= */

/* Focus */

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-link:focus-visible,
.auth-submit-button:focus-visible,
.profile-button:focus-visible,
.home-button:focus-visible,
.botao-whatsapp:focus-visible,
.botao-voluntario:focus-visible,
.botao-participar-mutirao:focus-visible,
.botao-participar:focus-visible,
.public-announcement-back:focus-visible,
.comunicado-modal-mais-tarde:focus-visible {
    outline: 3px solid rgba(0, 88, 185, 0.32);
    outline-offset: 3px;
}

/* Disabled */

.btn:disabled,
.btn-secondary:disabled,
.btn-link:disabled,
.auth-submit-button:disabled,
.profile-button:disabled,
.home-button:disabled,
.botao-whatsapp:disabled,
.botao-voluntario:disabled,
.botao-participar-mutirao:disabled,
.botao-participar:disabled,
.public-announcement-back:disabled,
.comunicado-modal-mais-tarde:disabled,
.btn[aria-disabled="true"],
.btn-secondary[aria-disabled="true"],
.btn-link[aria-disabled="true"],
.auth-submit-button[aria-disabled="true"],
.profile-button[aria-disabled="true"],
.home-button[aria-disabled="true"],
.botao-whatsapp[aria-disabled="true"],
.botao-voluntario[aria-disabled="true"],
.botao-participar-mutirao[aria-disabled="true"],
.botao-participar[aria-disabled="true"],
.public-announcement-back[aria-disabled="true"],
.comunicado-modal-mais-tarde[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Active — botões sólidos: descem e somem o relevo */

.btn:not(.btn--contorno):not(.btn--contorno-branco):not(.btn-outline):not(.btn-link):active,
.auth-submit-button:active,
.profile-button:not(.profile-button--cancel):active,
.home-button--primary:active,
.botao-whatsapp:active,
.botao-voluntario:active,
.botao-participar-mutirao:active,
.botao-participar:active,
.comunicado-modal-mais-tarde:active {
    transform: translateY(var(--button-relief-size, 4px));
    box-shadow:
        inset 0 0 0 var(--button-border-size) var(--button-border-color),
        inset 0 0 0 0 transparent;
}

/* =========================================================
   BUTTONS — PUBLIC PAGES
========================================================= */

/* Primary yellow buttons
   Exclui os modificadores de cor para não sobrescrever */

body:not(.system-page) .btn:not(.btn--azul):not(.btn--roxo):not(.btn--contorno):not(.btn--contorno-branco),
body:not(.system-page) .botao-whatsapp,
body:not(.system-page) .botao-voluntario,
body:not(.system-page) .botao-participar-mutirao,
body:not(.system-page) .botao-participar,
body:not(.system-page) .comunicado-modal-mais-tarde {
    --button-background: var(--amarelo, #f4e01e);
    --button-color: var(--azul-profundo, #00306b);
    --button-relief: var(--amarelo-botao-base, #c9920a);
}

/* Blue buttons */

body:not(.system-page) .btn--azul {
    --button-background: var(--azul, #0058b9);
    --button-color: #fff;
    --button-relief: var(--azul-profundo, #00306b);
}

/* Purple buttons */

body:not(.system-page) .btn--roxo {
    --button-background: var(--roxo, #7657cb);
    --button-color: #fff;
    --button-relief: var(--roxo-botao-base, #5934be);
}

/* Outline buttons — borda via box-shadow */

body:not(.system-page) .btn--contorno,
body:not(.system-page) .public-announcement-back.btn--contorno {
    --button-background: transparent;
    --button-color: var(--azul, #0058b9);
    --button-border-color: var(--azul, #0058b9);
}

body:not(.system-page) .btn--contorno-branco {
    --button-background: transparent;
    --button-color: #fff;
    --button-border-color: #fff;
}

/* Public hover — botões sólidos: leve brilho */

body:not(.system-page) .btn:not(.btn--contorno):not(.btn--contorno-branco):not(.btn--azul):not(.btn--roxo):not(:disabled):not([aria-disabled="true"]):hover,
body:not(.system-page) .botao-whatsapp:not(:disabled):not([aria-disabled="true"]):hover,
body:not(.system-page) .botao-voluntario:not(:disabled):not([aria-disabled="true"]):hover,
body:not(.system-page) .botao-participar-mutirao:not(:disabled):not([aria-disabled="true"]):hover,
body:not(.system-page) .botao-participar:not(:disabled):not([aria-disabled="true"]):hover,
body:not(.system-page) .comunicado-modal-mais-tarde:not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.07);
}

/* Public hover — botão azul sólido */

body:not(.system-page) .btn--azul:not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.12);
}

/* Public hover — botão roxo sólido */

body:not(.system-page) .btn--roxo:not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.1);
}

/* Public hover — botão outline azul */

body:not(.system-page) .btn--contorno:not(:disabled):not([aria-disabled="true"]):hover,
body:not(.system-page) .public-announcement-back.btn--contorno:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: #f0f6ff;
    --button-border-color: var(--azul-profundo, #00306b);
    --button-color: var(--azul-profundo, #00306b);
}

/* Public hover — botão outline branco: leve véu branco */

body:not(.system-page) .btn--contorno-branco:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: rgb(255 255 255 / 15%);
    --button-border-color: #fff;
    --button-color: #fff;
}

/* Header: outline com texto e borda brancos */

body:not(.system-page) header .acoes-cabecalho .btn--contorno,
body:not(.system-page) header .acoes-cabecalho-mobile .btn--contorno {
    --button-color: #fff;
    --button-border-color: #fff;
}

body:not(.system-page) header .acoes-cabecalho .btn--contorno:hover,
body:not(.system-page) header .acoes-cabecalho-mobile .btn--contorno:hover {
    --button-background: rgb(255 255 255 / 12%);
    --button-color: #fff;
    --button-border-color: #fff;
}

body:not(.system-page) header .acoes-cabecalho .btn--contorno:hover,
body:not(.system-page) header .acoes-cabecalho .btn--contorno:focus-visible,
body:not(.system-page) header .acoes-cabecalho-mobile .btn--contorno:hover,
body:not(.system-page) header .acoes-cabecalho-mobile .btn--contorno:focus-visible {
    --button-background: rgb(255 255 255 / 12%) !important;
    --button-color: #fff !important;
    --button-border-color: #fff !important;
    background: rgb(255 255 255 / 12%) !important;
    color: #fff !important;
    filter: none;
    transform: none;
}

/* Active — outline: sem movimento */

body:not(.system-page) :where(.btn--contorno, .btn--contorno-branco):active {
    transform: none;
}

/* =========================================================
   BUTTONS — SYSTEM PAGES
========================================================= */

/* Primary */

body.system-page .btn-primary,
body.system-page .auth-submit-button {
    --button-background: var(--azul, #0058b9);
    --button-color: #fff;
    --button-relief: var(--azul-profundo, #00306b);
}

/* Home primary */

body.system-page .home-button--primary {
    --button-background: var(--amarelo, #f4e01e);
    --button-color: var(--azul-profundo, #00306b);
    --button-relief: var(--amarelo-botao-base, #c9920a);
}

/* Home secondary */

body.system-page .home-button--secondary {
    --button-background: transparent;
    --button-color: #fff;
    --button-border-color: #fff;
}

/* Outline */

body.system-page .btn-outline,
body.system-page .profile-button--cancel {
    --button-background: transparent;
    --button-color: var(--azul, #0058b9);
    --button-border-color: var(--azul, #0058b9);
}

body.system-page .btn--contorno,
body.system-page .auth-site-link {
    --button-background: transparent;
    --button-color: var(--azul-profundo, #00306b);
    --button-border-color: var(--azul-profundo, #00306b);
}

/* Secondary */

body.system-page .btn-secondary {
    --button-background: #eaf6ef;
    --button-color: #176146;
    --button-border-color: #a4c5b3;
    --button-border-size: 2px;
}

/* Link */

body.system-page .btn-link {
    --button-background: transparent;
    --button-color: #176146;
    --button-border-color: transparent;
}

/* Danger */

body.system-page .btn-danger {
    --button-background: #b42318;
    --button-color: #fff;
    --button-relief: #7f1d16;
}

/* =========================================================
   BUTTONS — SYSTEM SPECIAL ACTIONS
========================================================= */

/* Form submissions */

body.system-page .form-actions .btn-primary,
body.system-page .donation-form-actions .btn-primary,
body.system-page .communication-form .btn-primary,
body.system-page .communication-topic-form .btn-primary,
body.system-page .form-actions button[type="submit"],
body.system-page .donation-form-actions button[type="submit"],
body.system-page .communication-form button[type="submit"],
body.system-page .communication-topic-form button[type="submit"] {
    --button-background: var(--amarelo, #f4e01e);
    --button-color: var(--azul-profundo, #00306b);
    --button-relief: var(--amarelo-botao-base, #c9920a);
}

/* Profile */

body.system-page .profile-button--save {
    --button-background: var(--amarelo, #f4e01e);
    --button-color: var(--azul-profundo, #00306b);
    --button-relief: var(--amarelo-botao-base, #c9920a);
}

body.system-page .profile-button--password {
    --button-background: var(--azul, #0058b9);
    --button-color: #fff;
    --button-relief: var(--azul-profundo, #00306b);
}

/* =========================================================
   BUTTONS — SYSTEM HOVER
========================================================= */

body.system-page .btn-primary:not(:disabled):not([aria-disabled="true"]):hover,
body.system-page .auth-submit-button:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: var(--azul-profundo, #00306b);
    --button-relief: #001f45;
}

body.system-page .home-button--primary:not(:disabled):not([aria-disabled="true"]):hover,
body.system-page .profile-button--save:not(:disabled):not([aria-disabled="true"]):hover,
body.system-page .form-actions .btn-primary:not(:disabled):hover,
body.system-page .donation-form-actions .btn-primary:not(:disabled):hover,
body.system-page .communication-form .btn-primary:not(:disabled):hover,
body.system-page .communication-topic-form .btn-primary:not(:disabled):hover,
body.system-page .form-actions button[type="submit"]:not(:disabled):hover,
body.system-page .donation-form-actions button[type="submit"]:not(:disabled):hover,
body.system-page .communication-form button[type="submit"]:not(:disabled):hover,
body.system-page .communication-topic-form button[type="submit"]:not(:disabled):hover {
    --button-background: #f7e949;
    --button-relief: #b88000;
}

body.system-page .home-button--secondary:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: rgb(255 255 255 / 12%);
}

body.system-page .btn-secondary:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: #dcefe4;
}

body.system-page .btn-link:not(:disabled):not([aria-disabled="true"]):hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

body.system-page .btn-outline:not(:disabled):not([aria-disabled="true"]):hover,
body.system-page .profile-button--cancel:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: #f0f6ff;
    --button-border-color: var(--azul-profundo, #00306b);
    --button-color: var(--azul-profundo, #00306b);
}

body.system-page .btn--contorno:not(:disabled):not([aria-disabled="true"]):hover,
body.system-page .auth-site-link:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: #f0f6ff;
    --button-border-color: var(--azul-profundo, #00306b);
    --button-color: var(--azul-profundo, #00306b);
}

body.system-page .btn-outline.home-button--secondary {
    --button-background: transparent;
    --button-color: #fff;
    --button-border-color: #fff;
}

body.system-page .btn-outline.home-button--secondary:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: rgb(255 255 255 / 12%);
    --button-color: #fff;
    --button-border-color: #fff;
}

body.system-page .btn-danger:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: #8f1c13;
    --button-relief: #5c1209;
}

body.system-page .profile-button--password:not(:disabled):not([aria-disabled="true"]):hover {
    --button-background: #004b9f;
    --button-relief: #002f66;
}

/* =========================================================
   BUTTONS — SPECIAL ACTIVE STATES
========================================================= */

/* Outline e link: sem movimento no clique */

.btn--contorno:active,
.btn--contorno-branco:active,
.btn-outline:active,
.btn-link:active,
.home-button--secondary:active {
    transform: none;
}

/* =========================================================
   BUTTONS — ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-secondary,
    .btn-link,
    .auth-submit-button,
    .profile-button,
    .home-button,
    .botao-whatsapp,
    .botao-voluntario,
    .botao-participar-mutirao,
    .botao-participar,
    .public-announcement-back,
    .comunicado-modal-mais-tarde {
        transition: none;
    }

    .btn:not(.btn--contorno):not(.btn--contorno-branco):not(.btn-outline):active,
    .profile-button:not(.profile-button--cancel):active,
    .home-button--primary:active,
    .botao-whatsapp:active,
    .botao-voluntario:active,
    .botao-participar-mutirao:active,
    .botao-participar:active,
    .comunicado-modal-mais-tarde:active {
        transform: none;
    }
}