/*
 * Padrão de botões do SoulClinic (regra do dono, 07/11/2026; CLAUDE.md, seção 2.1).
 *
 * Botão azul segue a cor que o dono definiu para a SoulClinic (#4f98cf), não o tema: primary
 * (marinho), secondary (azul forte) e info (azul-claro) do Velzon, com as variantes de contorno,
 * suave e fantasma, e a página ativa da paginação. Só os botões: o --vz-primary do resto do tema
 * continua como está.
 */
:root {
    --sc-azul: #4f98cf;
    --sc-azul-hover: #4381b0;
    --sc-azul-ativo: #3f7aa6;
    --sc-azul-rgb: 79, 152, 207;
    /* Texto azul sobre fundo claro: mesmo tom, mais escuro, para ler bem (5,3:1 no branco) */
    --sc-azul-texto: #2b70a3;
}

[data-layout-mode="dark"] {
    --sc-azul-texto: #4f98cf;
}

.btn-primary,
.btn-secondary,
.btn-info {
    --vz-btn-color: #fff;
    --vz-btn-bg: var(--sc-azul);
    --vz-btn-border-color: var(--sc-azul);
    --vz-btn-hover-color: #fff;
    --vz-btn-hover-bg: var(--sc-azul-hover);
    --vz-btn-hover-border-color: var(--sc-azul-hover);
    --vz-btn-focus-shadow-rgb: var(--sc-azul-rgb);
    --vz-btn-active-color: #fff;
    --vz-btn-active-bg: var(--sc-azul-ativo);
    --vz-btn-active-border-color: var(--sc-azul-ativo);
    --vz-btn-disabled-color: #fff;
    --vz-btn-disabled-bg: var(--sc-azul);
    --vz-btn-disabled-border-color: var(--sc-azul);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info {
    --vz-btn-color: var(--sc-azul-texto);
    --vz-btn-border-color: var(--sc-azul);
    --vz-btn-hover-color: #fff;
    --vz-btn-hover-bg: var(--sc-azul);
    --vz-btn-hover-border-color: var(--sc-azul);
    --vz-btn-focus-shadow-rgb: var(--sc-azul-rgb);
    --vz-btn-active-color: #fff;
    --vz-btn-active-bg: var(--sc-azul-ativo);
    --vz-btn-active-border-color: var(--sc-azul-ativo);
    --vz-btn-disabled-color: var(--sc-azul-texto);
    --vz-btn-disabled-border-color: var(--sc-azul);
}

.btn-soft-primary,
.btn-soft-secondary,
.btn-soft-info {
    --vz-btn-color: var(--sc-azul-texto);
    --vz-btn-bg: rgba(var(--sc-azul-rgb), 0.1);
    --vz-btn-hover-color: #fff;
    --vz-btn-hover-bg: var(--sc-azul);
    --vz-btn-focus-shadow-rgb: var(--sc-azul-rgb);
    --vz-btn-active-color: #fff;
    --vz-btn-active-bg: var(--sc-azul-ativo);
}

.btn-ghost-primary,
.btn-ghost-secondary,
.btn-ghost-info {
    --vz-btn-color: var(--sc-azul-texto);
    --vz-btn-hover-color: var(--sc-azul-texto);
    --vz-btn-hover-bg: rgba(var(--sc-azul-rgb), 0.1);
    --vz-btn-focus-shadow-rgb: var(--sc-azul-rgb);
    --vz-btn-active-color: var(--sc-azul-texto);
    --vz-btn-active-bg: rgba(var(--sc-azul-rgb), 0.1);
}

.pagination {
    --vz-pagination-active-bg: var(--sc-azul);
    --vz-pagination-active-border-color: var(--sc-azul);
}

/*
 * CRM e páginas soltas usam o Bootstrap 5.3 da CDN: o mesmo azul, com o prefixo de lá. O
 * btn-secondary de lá é cinza, não azul, e por isso fica como está.
 */
.btn-primary,
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sc-azul);
    --bs-btn-border-color: var(--sc-azul);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sc-azul-hover);
    --bs-btn-hover-border-color: var(--sc-azul-hover);
    --bs-btn-focus-shadow-rgb: var(--sc-azul-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sc-azul-ativo);
    --bs-btn-active-border-color: var(--sc-azul-ativo);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sc-azul);
    --bs-btn-disabled-border-color: var(--sc-azul);
}

.btn-outline-primary,
.btn-outline-info {
    --bs-btn-color: var(--sc-azul-texto);
    --bs-btn-border-color: var(--sc-azul);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sc-azul);
    --bs-btn-hover-border-color: var(--sc-azul);
    --bs-btn-focus-shadow-rgb: var(--sc-azul-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sc-azul-ativo);
    --bs-btn-active-border-color: var(--sc-azul-ativo);
    --bs-btn-disabled-color: var(--sc-azul-texto);
    --bs-btn-disabled-border-color: var(--sc-azul);
}

.pagination {
    --bs-pagination-active-bg: var(--sc-azul);
    --bs-pagination-active-border-color: var(--sc-azul);
}

/*
 * Alerta do SweetAlert: confirmar azul e cancelar vermelho, em todo alerta, inclusive
 * exclusão. Cada chamada ainda pode passar confirmButtonColor, cancelButtonColor ou
 * customClass: o !important vence os três de propósito, para o padrão valer nas mais de
 * 400 chamadas e nas que vierem. Fora do estado de carregamento, que tem spinner próprio.
 *
 * O Portal tem vermelho próprio: define --sc-alerta-cancelar no portal.css.
 */
.swal2-actions:not(.swal2-loading) .swal2-confirm {
    border-color: var(--sc-alerta-confirmar, var(--sc-azul)) !important;
    background-color: var(--sc-alerta-confirmar, var(--sc-azul)) !important;
    color: #fff !important;
}

.swal2-actions:not(.swal2-loading) .swal2-cancel {
    border-color: var(--sc-alerta-cancelar, var(--vz-danger, var(--bs-danger, #f06548))) !important;
    background-color: var(--sc-alerta-cancelar, var(--vz-danger, var(--bs-danger, #f06548))) !important;
    color: #fff !important;
}

/* Com customClass o botão perde o hover do SweetAlert, e o fundo acima é fixo */
.swal2-actions:not(.swal2-loading) .swal2-confirm:not(.swal2-styled):hover,
.swal2-actions:not(.swal2-loading) .swal2-cancel:not(.swal2-styled):hover {
    filter: brightness(0.92);
}