/*=================================
        ArenaOS
        BUTTONS.CSS
=================================*/


/*=================================
        BOTÓN BASE
=================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:var(--btn-height);

    padding:var(--btn-padding);

    border:none;

    border-radius:var(--radius-md);

    cursor:pointer;

    font-size:1rem;

    font-weight:var(--font-semibold);

    line-height:1;

    white-space:nowrap;

    transition:var(--transition);

}


/*=================================
        BOTÓN PRIMARIO
=================================*/

.btn-primary{

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    box-shadow:var(--shadow-primary);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 30px 70px rgba(25,19,184,.35);

}

.btn-primary:active{

    transform:translateY(-1px);

}


/*=================================
        BOTÓN SECUNDARIO
=================================*/

.btn-secondary{

    color:var(--text);

    background:rgba(255,255,255,.03);

    border:1px solid var(--border);

    backdrop-filter:blur(18px);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.08);

    border-color:var(--border-light);

    transform:translateY(-4px);

}


/*=================================
        BOTÓN OUTLINE
=================================*/

.btn-outline{

    color:var(--primary-light);

    background:transparent;

    border:2px solid var(--primary);

}

.btn-outline:hover{

    color:#ffffff;

    background:var(--primary);

}


/*=================================
        TAMAÑOS
=================================*/

.btn-sm{

    min-height:42px;

    padding:0 20px;

    font-size:.9rem;

}

.btn-lg{

    min-height:62px;

    padding:0 40px;

    font-size:1.05rem;

}


/*=================================
        BOTÓN FULL
=================================*/

.btn-full{

    width:100%;

}


/*=================================
        BADGE
=================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:var(--radius-full);

    background:rgba(25,19,184,.12);

    border:1px solid rgba(59,54,232,.25);

    color:var(--primary-light);

    font-size:.95rem;

    font-weight:700;

}


/*=================================
        BADGE SUCCESS
=================================*/

.badge-success{

    background:rgba(34,197,94,.12);

    border-color:rgba(34,197,94,.25);

    color:#4ADE80;

}


/*=================================
        BADGE WARNING
=================================*/

.badge-warning{

    background:rgba(245,158,11,.12);

    border-color:rgba(245,158,11,.25);

    color:#FBBF24;

}


/*=================================
        EFECTOS
=================================*/

.btn:hover{

    text-decoration:none;

}

.btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

}


/*=================================
        GRUPO DE BOTONES
=================================*/

.button-group{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}