/* =========================================================
   Sesipa — Botões custom (sem Bootstrap)
   Usar em /vistoria e telas de auth. Não carregar com Bootstrap.
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--r-md);
    border: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background var(--t-base),
        opacity var(--t-base),
        box-shadow var(--t-base),
        transform var(--t-fast),
        border-color var(--t-base),
        color var(--t-base);
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(var(--sesipa-primary-rgb), 0.30);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--sesipa-primary-rgb), 0.35);
}

.btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-soft);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--surface-soft);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-danger {
    background: var(--bad-bg);
    border: 1px solid var(--bad-border);
    color: var(--bad);
}

.btn-danger:hover:not(:disabled) {
    background: #fee2e2;
    color: var(--bad);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 0.82rem;
    border-radius: var(--r-sm);
}

.btn-icon {
    min-height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: var(--r-sm);
}

a.btn:hover {
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    }

    .btn:active:not(:disabled) {
        transform: none;
    }
}