/* ==========================================================
   EMFORSOL
   BOTON.CSS
   ----------------------------------------------------------
   Componente Botón
   Versión: 1.0.0
   ========================================================== */


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

.boton{

    display:inline-flex;

    justify-content:center;

    align-items:center;
    gap:12px;

    min-width:180px;
    height:var(--boton-alto);

    padding:0 24px;

    border-radius:var(--boton-radio);

    border:1px solid transparent;

    background:var(--color-primario);

    color:#FFFFFF;

    font-size:var(--texto-md);
    font-weight:var(--peso-semibold);

    cursor:pointer;

    user-select:none;

    transition:var(--transicion);

}


/* ==========================================================
   HOVER
========================================================== */

.boton:hover{

    background:var(--color-primario-hover);

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}


/* ==========================================================
   ACTIVE
========================================================== */

.boton:active{

    transform:scale(.98);

}


/* ==========================================================
   DESHABILITADO
========================================================== */

.boton:disabled,
.boton--deshabilitado{

    opacity:.50;

    cursor:not-allowed;

    pointer-events:none;

}


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

.boton--secundario{

    background:transparent;

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

    color:var(--color-texto);

}

.boton--secundario:hover{

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

    color:var(--color-primario);

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

}


/* ==========================================================
   BOTÓN ÉXITO
========================================================== */

.boton--success{

    background:var(--color-success);

}


/* ==========================================================
   BOTÓN ERROR
========================================================== */

.boton--danger{

    background:var(--color-error);

}


/* ==========================================================
   BOTÓN AVISO
========================================================== */

.boton--warning{

    background:var(--color-warning);

}


/* ==========================================================
   BOTÓN INFORMACIÓN
========================================================== */

.boton--info{

    background:var(--color-info);

}


/* ==========================================================
   BOTÓN SOLO ICONO
========================================================== */

.boton--icono{

    width:52px;

    min-width:52px;

    padding:0;

}


/* ==========================================================
   BOTÓN GRANDE
========================================================== */

.boton--grande{

    min-width:260px;

    height:60px;

    font-size:var(--texto-lg);

}


/* ==========================================================
   BOTÓN PEQUEÑO
========================================================== */

.boton--pequeno{

    min-width:120px;

    height:40px;

    font-size:var(--texto-sm);

}


/* ==========================================================
   ANCHO COMPLETO
========================================================== */

.boton--full{

    width:100%;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .boton{

        width:100%;

    }

}