/*
 * Sistema global de botões do Conecta PCSE.
 *
 * Esta folha é carregada depois do CSS específico de cada tela para que a
 * geometria mobile seja realmente uniforme. Ela não redefine a composição de
 * cada página: largura total, alinhamento e posição continuam sob controle do
 * componente que usa o botão.
 *
 * Escape hatch para controles especiais: `.pcse-btn-plain`.
 */

:root {
    --pcse-btn-radius: 13px;
    --pcse-btn-radius-sm: 10px;
    --pcse-btn-radius-lg: 15px;
    --pcse-btn-height: 44px;
    --pcse-btn-height-sm: 36px;
    --pcse-btn-height-lg: 50px;
    --pcse-btn-gap: 0.45rem;
    --pcse-btn-transition: 180ms ease;
}

@media (max-width: 767.98px) {
    /*
     * Além do `.btn` do Bootstrap, alcança submits e botões sem a classe
     * legada. Itens de navegação, fechar modal e controles que optarem por
     * `.pcse-btn-plain` preservam sua anatomia própria.
     */
    :is(.app-content, .modal) :is(
        .btn,
        button[type='button'],
        button[type='submit'],
        button[type='reset'],
        input[type='button'],
        input[type='submit'],
        input[type='reset'],
        a[role='button']
    ):not(.btn-close):not(.close):not(.dropdown-item):not(.nav-link):not(.page-link):not(.pcse-btn-plain) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--pcse-btn-height);
        gap: var(--pcse-btn-gap);
        padding: 0.68rem 1rem;
        border-radius: var(--pcse-btn-radius) !important;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        transition:
            color var(--pcse-btn-transition),
            background-color var(--pcse-btn-transition),
            border-color var(--pcse-btn-transition),
            box-shadow var(--pcse-btn-transition),
            transform var(--pcse-btn-transition);
        -webkit-tap-highlight-color: transparent;
    }

    :is(.app-content, .modal) :is(
        .btn,
        button[type='button'],
        button[type='submit'],
        button[type='reset'],
        a[role='button']
    ):not(.btn-close):not(.close):not(.dropdown-item):not(.nav-link):not(.page-link):not(.pcse-btn-plain) > :is(
        iconify-icon,
        i,
        svg
    ) {
        flex: 0 0 auto;
        font-size: 1.05em;
    }

    :is(.app-content, .modal) .btn-sm:not(.btn-close):not(.pcse-btn-plain) {
        min-height: var(--pcse-btn-height-sm);
        padding: 0.48rem 0.75rem;
        border-radius: var(--pcse-btn-radius-sm) !important;
        font-size: 0.75rem;
    }

    :is(.app-content, .modal) .btn-lg:not(.pcse-btn-plain) {
        min-height: var(--pcse-btn-height-lg);
        padding: 0.78rem 1.15rem;
        border-radius: var(--pcse-btn-radius-lg) !important;
    }

    /*
     * Ação principal aprovada: verde do tema com profundidade sutil, sem
     * perder contraste. As demais cores continuam semanticamente distintas.
     */
    :is(.app-content, .modal) .btn-theme:not(.pcse-btn-plain) {
        border-color: transparent !important;
        color: #00271c !important;
        background:
            linear-gradient(135deg, var(--bs-theme, #00ff9c) 0%, #1bd9b2 100%) !important;
        box-shadow:
            0 9px 24px rgba(var(--bs-theme-rgb, 0, 255, 156), 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    :is(.app-content, .modal) .btn-primary:not(.pcse-btn-plain) {
        border-color: transparent !important;
        color: #fff !important;
        background:
            linear-gradient(135deg, var(--bs-primary, #6c98ff) 0%, #7b85ff 100%) !important;
        box-shadow:
            0 9px 24px rgba(var(--bs-primary-rgb, 108, 152, 255), 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    :is(.app-content, .modal) .btn-success:not(.pcse-btn-plain) {
        border-color: transparent !important;
        color: #031c12 !important;
        background:
            linear-gradient(135deg, var(--bs-success, #18c97a) 0%, #20d3aa 100%) !important;
        box-shadow:
            0 9px 24px rgba(var(--bs-success-rgb, 24, 201, 122), 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    :is(.app-content, .modal) .btn-danger:not(.pcse-btn-plain) {
        border-color: transparent !important;
        color: #fff !important;
        background:
            linear-gradient(135deg, var(--bs-danger, #ff5454) 0%, #e83d65 100%) !important;
        box-shadow:
            0 9px 24px rgba(var(--bs-danger-rgb, 255, 84, 84), 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    :is(.app-content, .modal) .btn-warning:not(.pcse-btn-plain) {
        border-color: transparent !important;
        color: #241600 !important;
        background:
            linear-gradient(135deg, var(--bs-warning, #ffa926) 0%, #ffc247 100%) !important;
        box-shadow:
            0 9px 24px rgba(var(--bs-warning-rgb, 255, 169, 38), 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    :is(.app-content, .modal) .btn-secondary:not(.pcse-btn-plain),
    :is(.app-content, .modal) [class*='btn-outline-']:not(.pcse-btn-plain) {
        background: rgba(var(--bs-white-rgb, 255, 255, 255), 0.025);
        box-shadow:
            inset 0 1px 0 rgba(var(--bs-white-rgb, 255, 255, 255), 0.045),
            0 8px 20px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(6px) saturate(1.05);
        -webkit-backdrop-filter: blur(6px) saturate(1.05);
    }

    :is(.app-content, .modal) :is(
        .btn,
        button[type='button'],
        button[type='submit'],
        button[type='reset'],
        input[type='button'],
        input[type='submit'],
        input[type='reset'],
        a[role='button']
    ):not(.btn-close):not(.close):not(.dropdown-item):not(.nav-link):not(.page-link):not(.pcse-btn-plain):focus-visible {
        outline: 0;
        box-shadow:
            0 0 0 3px rgba(var(--bs-theme-rgb, 0, 255, 156), 0.2),
            0 9px 24px rgba(0, 0, 0, 0.14) !important;
    }

    :is(.app-content, .modal) :is(
        .btn,
        button[type='button'],
        button[type='submit'],
        button[type='reset'],
        input[type='button'],
        input[type='submit'],
        input[type='reset'],
        a[role='button']
    ):not(.btn-close):not(.close):not(.dropdown-item):not(.nav-link):not(.page-link):not(.pcse-btn-plain):active {
        transform: translateY(1px) scale(0.992);
    }

    :is(.app-content, .modal) :is(
        .btn,
        button[type='button'],
        button[type='submit'],
        button[type='reset'],
        input[type='button'],
        input[type='submit'],
        input[type='reset'],
        a[role='button']
    ):not(.btn-close):not(.close):not(.dropdown-item):not(.nav-link):not(.page-link):not(.pcse-btn-plain):disabled,
    :is(.app-content, .modal) .btn.disabled:not(.pcse-btn-plain),
    :is(.app-content, .modal) .btn[aria-disabled='true']:not(.pcse-btn-plain) {
        box-shadow: none !important;
        cursor: not-allowed;
        opacity: 0.52;
        transform: none;
    }

    /* Botões de ícone continuam compactos, mas recebem o mesmo acabamento. */
    :is(.app-content, .modal) :is(.btn-icon, .pcse-btn-icon),
    :is(.app-content, .modal) .card-header-btn .btn {
        width: var(--pcse-btn-height-sm);
        min-width: var(--pcse-btn-height-sm);
        min-height: var(--pcse-btn-height-sm);
        padding: 0;
        border-radius: var(--pcse-btn-radius-sm) !important;
    }

    /*
     * Grupos preservam a leitura de controle conectado. Um botão isolado
     * dentro de `.btn-group` recebe o raio completo.
     */
    :is(.app-content, .modal) .btn-group {
        border-radius: var(--pcse-btn-radius);
    }

    :is(.app-content, .modal) .btn-group > .btn {
        border-radius: 0 !important;
    }

    :is(.app-content, .modal) .btn-group > .btn:first-child {
        border-top-left-radius: var(--pcse-btn-radius) !important;
        border-bottom-left-radius: var(--pcse-btn-radius) !important;
    }

    :is(.app-content, .modal) .btn-group > .btn:last-child {
        border-top-right-radius: var(--pcse-btn-radius) !important;
        border-bottom-right-radius: var(--pcse-btn-radius) !important;
    }

    :is(.app-content, .modal) .btn-group > .btn:only-child {
        border-radius: var(--pcse-btn-radius) !important;
    }

    :is(.app-content, .modal) .btn-group-vertical > .btn {
        border-radius: 0 !important;
    }

    :is(.app-content, .modal) .btn-group-vertical > .btn:first-child {
        border-radius: var(--pcse-btn-radius) var(--pcse-btn-radius) 0 0 !important;
    }

    :is(.app-content, .modal) .btn-group-vertical > .btn:last-child {
        border-radius: 0 0 var(--pcse-btn-radius) var(--pcse-btn-radius) !important;
    }

    :is(.app-content, .modal) .btn-group-vertical > .btn:only-child {
        border-radius: var(--pcse-btn-radius) !important;
    }

    /* Botões anexados a campos acompanham o contorno do input. */
    :is(.app-content, .modal) .input-group > .btn {
        border-radius: 0 !important;
    }

    :is(.app-content, .modal) .input-group > .btn:first-child {
        border-top-left-radius: var(--pcse-btn-radius) !important;
        border-bottom-left-radius: var(--pcse-btn-radius) !important;
    }

    :is(.app-content, .modal) .input-group > .btn:last-child {
        border-top-right-radius: var(--pcse-btn-radius) !important;
        border-bottom-right-radius: var(--pcse-btn-radius) !important;
    }
}

@media (max-width: 767.98px) and (hover: hover) {
    :is(.app-content, .modal) :is(
        .btn,
        button[type='button'],
        button[type='submit'],
        button[type='reset'],
        input[type='button'],
        input[type='submit'],
        input[type='reset'],
        a[role='button']
    ):not(.btn-close):not(.close):not(.dropdown-item):not(.nav-link):not(.page-link):not(.pcse-btn-plain):not(:disabled):hover {
        filter: brightness(1.045);
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.app-content, .modal) :is(.btn, button, input[type='button'], input[type='submit'], input[type='reset'], a[role='button']) {
        transition: none !important;
    }
}