/* AJUSTES COMUNES BOTONES SIMPLES */

/* tamaño estandar, redondeado */
.btn-base{
    font-size: 1rem !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    border: 0 !important;
    border-radius: 3rem !important;
    padding: 0.5rem 1rem !important;
    box-shadow: 3px 4px 4px 0 #00000026;
    width: fit-content;
    height: fit-content;
    transition: transform 0.25s ease !important;
}

/* icono izquierdo dentro del btn */
.btn-base .ui-button-icon-left{
    font-size: 1.25rem;
    margin-left: .5rem;
}

/* icono derecho dentro del btn */
.btn-base .ui-button-icon-right{
    font-size: 1.25rem;
    margin-right: .5rem;
}

/* texto dentro del btn con icono izquierdo */
body .btn-base.ui-button-text-icon-left .ui-button-text{
    padding: .5rem 1rem .5rem 2.25rem !important;
}

/* texto dentro del btn con icono derecho */
body .btn-base.ui-button-text-icon-right .ui-button-text{
    padding: .5rem 2.25rem .5rem 1rem !important;
}

.btn-base:hover{
    transform: scale(1.03);
}

.btn-base:focus{
    outline: none !important;
    border: none !important;
}

/* AJUSTES COMUNES BOTONES GRANDES */

/* tamaño grande, redondeado */
.btn-large{
    font-size: 1.25rem !important;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.05rem;
    border: 0;
    border-radius: 2rem !important;
    padding: 0.5rem 2.5rem !important;
    box-shadow: 2px 4px 8px 1px #00000050;
    width: fit-content;
    height: fit-content;
    transition: transform .25s ease-in-out !important;
}

/* icono izquierdo dentro del btn */
.btn-large .ui-button-icon-left{
    font-size: 1.25rem;
    margin-left: .75rem;
}

/* icono derecho dentro del btn */
.btn-large .ui-button-icon-right{
    font-size: 1.25rem;
    margin-right: .75rem;
}

/* texto dentro del btn con icono izquierdo */
body .btn-large.ui-button-text-icon-left .ui-button-text{
    padding: .5rem 0 .5rem 1rem !important;
}

/* texto dentro del btn con icono derecho */
body .btn-large.ui-button-text-icon-right .ui-button-text{
    padding: .5rem 1rem .5rem 0 !important;
}

.btn-large:hover{
    transform: scale(1.02);
}

.btn-large:focus{
    border: none !important;
    outline: none !important;
}

/* AJUSTES COMUNES BOTONES CHICOS */

/* tamaño grande, redondeado */
.btn-small{
    font-size: .8rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    border: 0;
    border-radius: 2rem !important;
    padding: 0.25rem 1rem !important;
    box-shadow: 2px 4px 8px 1px #00000050;
    width: fit-content;
    height: fit-content;
    transition: transform .25s ease-in-out !important;
}

/* icono izquierdo dentro del btn */
.btn-small .ui-button-icon-left{
    font-size: 1rem;
    margin-left: .25rem;
}

/* icono derecho dentro del btn */
.btn-small .ui-button-icon-right{
    font-size: 1rem;
    margin-right: .25rem;
}

/* texto dentro del btn con icono izquierdo */
body .btn-small.ui-button-text-icon-left .ui-button-text{
    padding: .5rem 0 .5rem 1.5rem !important;
}

/* texto dentro del btn con icono derecho */
body .btn-small.ui-button-text-icon-right .ui-button-text{
    padding: .5rem 1.5rem .5rem 0 !important;
}

.btn-small:hover{
    transform: scale(1.02);
}

.btn-small:focus{
    border: none !important;
    outline: none !important;
}

/* AJUSTES ESPECIFICOS BOTONES SIMPLES Y GRANDES */

.btn-orange{
    background: var(--color-orange) !important;
    color: var(--color-white-bold) !important;
    border: none !important;
}

.btn-orange-orange-gradient{
    background: var(--color-orange-linear-gradient) !important;
    color: var(--color-white-bold) !important;
    border: none !important;
}

/* fondo azul, letra blanca */
.btn-blue-gradient{
    background: var(--color-blue-linear-gradient) !important;
    color: var(--color-white-bold) !important;
    border: none !important;
}

.btn-green{
    background: var(--color-strong-ok) !important;
    color: var(--color-white-bold) !important;
    border: none !important;
}

.btn-grey{
    background: var(--color-grey) !important;
    color: var(--color-white-bold) !important;
    border: none !important;
}

.btn-lightblue{
    background: var(--color-lightblue) !important;
    color: var(--color-white-bold) !important;
    border: none !important;
}

.btn-cian{
    background: var(--color-cian) !important;
    color:var(--color-white-bold) !important;
    border: none !important;
}

.btn-green{
    background: var(--color-strong-ok) !important;
    color:var(--color-white-bold) !important;
    border: none !important;
}

.btn-red{
    background: var(--color-strong-error) !important;
    color:var(--color-white-bold) !important;
    border: none !important;
}

/* fondo naranja, letra blanca, borde blanco */
.btn-orange-border-white{
    background: var(--color-orange-hover) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

.btn-orange-gradient-border-white{
    background: var(--color-orange-linear-gradient) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

/* fondo azul, letra blanca, borde blanco */
.btn-blue-gradient-border-white{
    background: var(--color-blue-linear-gradient) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

.btn-grey-border-white{
    background: var(--color-grey) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

.btn-green-border-white{
    background: var(--color-strong-ok) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

.btn-red-border-white{
    background: var(--color-strong-error) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

.btn-lightblue-border-white{
    background: var(--color-lightblue) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

.btn-cian-border-white{
    background: var(--color-cian) !important;
    color: var(--color-white-bold) !important;
    border: 2px solid var(--color-white-bold) !important;
}

.btn-orange-border-white:focus,
.btn-orange-gradient-border-white:focus,
.btn-blue-gradient-border-white:focus,
.btn-grey-border-white:focus,
.btn-green-border-white:focus,
.btn-lightblue-border-white:focus,
.btn-cian-border-white:focus {
    border: 2px solid var(--color-white-bold) !important;
}

/*----------- BOTONES DE PAGO CON FONDOS IMG ---------*/

/*-- AJUSTES GENERALES --*/
.btn-pago{
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    width: 12rem;
    min-height: 4rem;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 2rem !important;
    padding: 0;
    box-shadow: 0 4px 4px 2px #00000070;
    transition: transform .25s ease-in-out !important;
}

.btn-pago:hover{
    transform: scale(1.05);
    opacity: .9;
}

.btn-pago:focus{
    border: none !important;
    outline: none !important;
}

/*-- AJUSTES ESPECIFICOS --*/

/* img fondo boton mp */
.btn-pago-fondo-mp{
    background-image: url('../../views/images/icono-mercadopago.png') !important;
}

/* img fondo boton macro click */
.btn-pago-fondo-macro{
    background-image: url('../../views/images/icono-macro-click.png') !important;
}

/*-------- BTN SOLO ICONO DE FONTAWESOME -----------*/

/*-- AJUSTES GENERALES --*/

.btn-icon-only-base{
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform .25s ease-in-out !important;
}

.btn-icon-only-base:focus{
    border: none !important;
    outline: none !important;
}

/*-- AJUSTES ESPECIFICOS --*/

/*-- FONDOS --*/

/* RED */
.btn-icon-only-bg-red{
    background-color: var(--color-strong-error) !important;
}

.btn-icon-only-bg-red:hover{
    transform: scale(1.05);
    opacity: .9;
}

/* BLUE */
.btn-icon-only-bg-blue{
    background-color: var(--color-blue-title) !important;
}

.btn-icon-only-bg-blue:hover{
    background-color: var(--color-blue-title-hover) !important;
    transform: scale(1.05);
}

/* GREEN */
.btn-icon-only-bg-green{
    background-color: var(--color-strong-ok) !important;
}

.btn-icon-only-bg-green:hover{
    transform: scale(1.05);
    opacity: .9;
}

/* ORANGE */
.btn-icon-only-bg-orange{
    background-color: var(--color-orange) !important;
}

.btn-icon-only-bg-orange:hover{
    background-color: var(--color-orange-hover) !important;
    transform: scale(1.05);
}

/* LIGHTBLUE */
.btn-icon-only-bg-lightblue{
    background-color: var(--color-lightblue) !important;
}

.btn-icon-only-bg-lightblue:hover{
    transform: scale(1.05);
    opacity: .9;
}

/*-- COLOR DEL ICONO --*/

/* ORANGE */

.btn-icon-only-orange{
    color: var(--color-orange) !important;
}

.btn-icon-only-orange:hover{
    transform: scale(1.05);
    color: var(--color-orange-hover) !important;
}

/* WHITE */

.btn-icon-only-white{
    color: var(--color-white-bold) !important;
}

.btn-icon-only-white:hover{
    transform: scale(1.05);
    opacity: .8;
}

/* RED */

.btn-icon-only-red{
    color: var(--color-strong-error) !important;
}

.btn-icon-only-red:hover{
    transform: scale(1.05);
    opacity: .9;
}

/* BLUE */

.btn-icon-only-blue{
    color: var(--color-blue-title) !important;
}

.btn-icon-only-blue:hover{
    color: var(--color-blue-title-hover) !important;
    transform: scale(1.05);
}

/* LIGHTBLUE */

.btn-icon-only-lightblue{
    color: var(--color-lightblue) !important;
}

.btn-icon-only-lightblue:hover{
    transform: scale(1.05);
    opacity: .9;
}

/* CIAN */

.btn-icon-only-cian{
    color: var(--color-cian) !important;
}

.btn-icon-only-cian:hover{
    transform: scale(1.05);
    opacity: .9;
}

/*--------- img icons -----------*/

/* NOTA: todas las img son de 64 x 64 */

/*-- AJUSTES GENERALES --*/

/* boton icono de una img */
.btn-img-icon{
    background-color: transparent !important;
    border: none !important;
    color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.25s ease-in-out !important;
}

.btn-img-icon:hover{
    transform: scale(1.1);
    cursor: pointer;
}

.btn-img-icon:focus{
    border: none !important;
    outline: none !important;
}

/*--------- img icons -----------*/

/* NOTA: todas las img son de 64 x 64 */

/*-- AJUSTES ESPECIFICOS --*/

/* url de las imagenes de fondo para los iconos */

.btn-power-off-icon{
    background-image: url("../../views/images/power-off.png");
}

.btn-refresh-captcha{
    background-image: url("../../views/images/captcha-refresh.png");
}

.btn-actualizar-clave-icon{
    background-image: url("../../views/images/actualizar-clave.png");
}

.btn-cambiar-contrasena-icon{
    background-image: url("../../views/images/cambiar-contrasena.png");
}

.btn-campana-icon{
    background-image: url("../../views/images/campana.png");
}

.btn-campana-notificacion-icon{
    background-image: url("../../views/images/campana-notificacion.png");
}

.btn-wp-icon{
    background-image: url("../../views/images/whatsapp-icon.png");
}

.btn-fb-icon{
    background-image: url("../../views/images/facebook.png");
}

.btn-ig-icon{
    background-image: url("../../views/images/instagram.png");
}

.btn-youtube-icon{
    background-image: url("../../views/images/you-tube.png");
}

.btn-x-icon{
    background-image: url("../../views/images/x.png");
}