/*
 * S.I.N. Design System - Buttons
 * Guia de Interface S.I.N.
 * Botões Primários, Secundários, Terciários e Links
 */

/* ========================================
   BASE BUTTON STYLES
   ======================================== */

.btn-sin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--border-width-thick) solid transparent;
    border-radius: var(--radius-pill);
    transition: all var(--transition-normal);
    white-space: nowrap;

    /* Default: Medium size */
    padding: var(--btn-md-padding-y) var(--btn-md-padding-x);
    font-size: var(--btn-md-font-size);
}

.btn-sin:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--sin-azul-rgb), 0.25);
}

.btn-sin:disabled,
.btn-sin.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   BUTTON SIZES
   ======================================== */

/* Large */
.btn-sin-lg {
    padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
    font-size: var(--btn-lg-font-size);
}

/* Small */
.btn-sin-sm {
    padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
    font-size: var(--btn-sm-font-size);
}

/* Extra Small */
.btn-sin-xs {
    padding: var(--btn-xs-padding-y) var(--btn-xs-padding-x);
    font-size: var(--btn-xs-font-size);
}

/* ========================================
   PRIMARY BUTTONS (Filled)
   ======================================== */

/* Vermelho S.I.N. - Primary Action */
.btn-sin-vermelho {
    background-color: var(--sin-vermelho);
    border-color: var(--sin-vermelho);
    color: var(--color-white);
}

.btn-sin-vermelho:hover,
.btn-sin-vermelho:focus {
    background-color: var(--sin-vermelho-hover);
    border-color: var(--sin-vermelho-hover);
    color: var(--color-white);
}

.btn-sin-vermelho:active {
    background-color: #8a0011;
    border-color: #8a0011;
}

.btn-sin-vermelho:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-vermelho-rgb), 0.3);
}

/* Laranja S.I.N. - Secondary Action */
.btn-sin-laranja {
    background-color: var(--sin-laranja);
    border-color: var(--sin-laranja);
    color: var(--color-white);
}

.btn-sin-laranja:hover,
.btn-sin-laranja:focus {
    background-color: var(--sin-laranja-hover);
    border-color: var(--sin-laranja-hover);
    color: var(--color-white);
}

.btn-sin-laranja:active {
    background-color: #b86d00;
    border-color: #b86d00;
}

.btn-sin-laranja:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-laranja-rgb), 0.3);
}

/* Azul S.I.N. - Info/Scientific */
.btn-sin-azul {
    background-color: var(--sin-azul);
    border-color: var(--sin-azul);
    color: var(--color-white);
}

.btn-sin-azul:hover,
.btn-sin-azul:focus {
    background-color: var(--sin-azul-hover);
    border-color: var(--sin-azul-hover);
    color: var(--color-white);
}

.btn-sin-azul:active {
    background-color: #003a5c;
    border-color: #003a5c;
}

.btn-sin-azul:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-azul-rgb), 0.3);
}

/* Cinza Chumbo S.I.N. - Neutral */
.btn-sin-cinza {
    background-color: var(--sin-cinza-chumbo);
    border-color: var(--sin-cinza-chumbo);
    color: var(--color-white);
}

.btn-sin-cinza:hover,
.btn-sin-cinza:focus {
    background-color: var(--sin-cinza-chumbo-hover);
    border-color: var(--sin-cinza-chumbo-hover);
    color: var(--color-white);
}

.btn-sin-cinza:active {
    background-color: #35383d;
    border-color: #35383d;
}

.btn-sin-cinza:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-cinza-chumbo-rgb), 0.3);
}

/* ========================================
   SECONDARY BUTTONS (Outline)
   ======================================== */

/* Vermelho Outline */
.btn-sin-outline-vermelho {
    background-color: transparent;
    border-color: var(--sin-vermelho);
    color: var(--sin-vermelho);
}

.btn-sin-outline-vermelho:hover,
.btn-sin-outline-vermelho:focus {
    background-color: var(--sin-vermelho);
    border-color: var(--sin-vermelho);
    color: var(--color-white);
}

.btn-sin-outline-vermelho:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-vermelho-rgb), 0.2);
}

/* Laranja Outline */
.btn-sin-outline-laranja {
    background-color: transparent;
    border-color: var(--sin-laranja);
    color: var(--sin-laranja);
}

.btn-sin-outline-laranja:hover,
.btn-sin-outline-laranja:focus {
    background-color: var(--sin-laranja);
    border-color: var(--sin-laranja);
    color: var(--color-white);
}

.btn-sin-outline-laranja:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-laranja-rgb), 0.2);
}

/* Azul Outline */
.btn-sin-outline-azul {
    background-color: transparent;
    border-color: var(--sin-azul);
    color: var(--sin-azul);
}

.btn-sin-outline-azul:hover,
.btn-sin-outline-azul:focus {
    background-color: var(--sin-azul);
    border-color: var(--sin-azul);
    color: var(--color-white);
}

.btn-sin-outline-azul:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-azul-rgb), 0.2);
}

/* Cinza Outline */
.btn-sin-outline-cinza {
    background-color: transparent;
    border-color: var(--sin-cinza-chumbo);
    color: var(--sin-cinza-chumbo);
}

.btn-sin-outline-cinza:hover,
.btn-sin-outline-cinza:focus {
    background-color: var(--sin-cinza-chumbo);
    border-color: var(--sin-cinza-chumbo);
    color: var(--color-white);
}

.btn-sin-outline-cinza:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-cinza-chumbo-rgb), 0.2);
}

/* ========================================
   SEMANTIC BUTTONS (Status)
   ======================================== */

/* Sucesso (Verde) */
.btn-sin-sucesso {
    background-color: var(--sin-sucesso);
    border-color: var(--sin-sucesso);
    color: var(--color-white);
}

.btn-sin-sucesso:hover,
.btn-sin-sucesso:focus {
    background-color: #006600;
    border-color: #006600;
    color: var(--color-white);
}

.btn-sin-sucesso:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-sucesso-rgb), 0.3);
}

/* Aviso (Amarelo) */
.btn-sin-aviso {
    background-color: var(--sin-aviso);
    border-color: var(--sin-aviso);
    color: var(--color-black);
}

.btn-sin-aviso:hover,
.btn-sin-aviso:focus {
    background-color: #e6ad00;
    border-color: #e6ad00;
    color: var(--color-black);
}

.btn-sin-aviso:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-aviso-rgb), 0.3);
}

/* Erro (Vermelho) */
.btn-sin-erro {
    background-color: var(--sin-erro);
    border-color: var(--sin-erro);
    color: var(--color-white);
}

.btn-sin-erro:hover,
.btn-sin-erro:focus {
    background-color: #cc0000;
    border-color: #cc0000;
    color: var(--color-white);
}

.btn-sin-erro:focus {
    box-shadow: 0 0 0 3px rgba(var(--sin-erro-rgb), 0.3);
}

/* ========================================
   LINK BUTTONS (Text Only)
   ======================================== */

.btn-sin-link {
    background-color: transparent;
    border-color: transparent;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.btn-sin-link-vermelho {
    color: var(--sin-vermelho);
}

.btn-sin-link-vermelho:hover {
    color: var(--sin-vermelho-hover);
    text-decoration: underline;
}

.btn-sin-link-laranja {
    color: var(--sin-laranja);
}

.btn-sin-link-laranja:hover {
    color: var(--sin-laranja-hover);
    text-decoration: underline;
}

.btn-sin-link-azul {
    color: var(--sin-azul);
}

.btn-sin-link-azul:hover {
    color: var(--sin-azul-hover);
    text-decoration: underline;
}

.btn-sin-link-cinza {
    color: var(--sin-cinza-chumbo);
}

.btn-sin-link-cinza:hover {
    color: var(--sin-cinza-chumbo-hover);
    text-decoration: underline;
}

/* ========================================
   STATUS BADGES
   ======================================== */

.badge-sin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: var(--font-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status: Vencida (Erro) */
.badge-sin-vencida,
.badge-sin-erro {
    background-color: var(--sin-erro-bg);
    color: var(--sin-erro);
    border: 1px solid var(--sin-erro);
}

/* Status: Aberta (Aviso) */
.badge-sin-aberta,
.badge-sin-aviso {
    background-color: var(--sin-aviso-bg);
    color: #996600;
    border: 1px solid var(--sin-aviso);
}

/* Status: Paga (Sucesso) */
.badge-sin-paga,
.badge-sin-sucesso {
    background-color: var(--sin-sucesso-bg);
    color: var(--sin-sucesso);
    border: 1px solid var(--sin-sucesso);
}

/* Status: Pendente (Neutral) */
.badge-sin-pendente {
    background-color: var(--sin-cinza-claro);
    color: var(--sin-cinza-chumbo);
    border: 1px solid var(--sin-cinza-chumbo);
}

/* ========================================
   BUTTON WITH ICON
   ======================================== */

.btn-sin-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-sin-icon i,
.btn-sin-icon svg {
    font-size: 1.1em;
}

/* Icon only button (square) */
.btn-sin-icon-only {
    padding: var(--btn-md-padding-y);
    border-radius: var(--radius-md);
}

.btn-sin-icon-only.btn-sin-lg {
    padding: var(--btn-lg-padding-y);
}

.btn-sin-icon-only.btn-sin-sm {
    padding: var(--btn-sm-padding-y);
}

.btn-sin-icon-only.btn-sin-xs {
    padding: var(--btn-xs-padding-y);
}

/* ========================================
   FULL WIDTH BUTTON
   ======================================== */

.btn-sin-block {
    display: flex;
    width: 100%;
}

/* ========================================
   BUTTON GROUP
   ======================================== */

.btn-sin-group {
    display: inline-flex;
}

.btn-sin-group .btn-sin {
    border-radius: 0;
}

.btn-sin-group .btn-sin:first-child {
    border-top-left-radius: var(--radius-pill);
    border-bottom-left-radius: var(--radius-pill);
}

.btn-sin-group .btn-sin:last-child {
    border-top-right-radius: var(--radius-pill);
    border-bottom-right-radius: var(--radius-pill);
}

.btn-sin-group .btn-sin:not(:last-child) {
    border-right-width: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */

.btn-sin-loading {
    position: relative;
    pointer-events: none;
}

.btn-sin-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.75s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}