/*
*	ESTE ARCHIVO FUE CREADO PARA INCORPORAR ESTILOS PERSONALIZADOS 
*	SE DEBEN INCORPORAR REGLAS DE ESTILO SOBRE LOS BOTONES
*/

.btn-bold{
	font-weight: 600;
}

/* ==================== */
/* == COMMAND BUTTON == */
/* ==================== */

/* ===================== BOTON BASE (AMARILLO) Y FILEUPLOAD SIMPLE ===================== */
.btn-base.ui-button,
.btn-base.ui-fileupload-simple .ui-button{
	background: var(--color-principal);
	border-radius: 4px;
	border: none;
	color: var(--white);
}
.btn-base.ui-button.ui-state-active,
.btn-base.ui-button.ui-state-hover,
.btn-base.ui-fileupload-simple .ui-button.ui-state-active,
.btn-base.ui-fileupload-simple .ui-button.ui-state-hover {
	background: var(--color-principal-darker);
    border: none;
    color: var(--white);
}
.btn-base.ui-button.ui-state-focus,
.btn-base.ui-fileupload-simple .ui-button.ui-state-focus {
	border-color: var(--color-principal);
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(--color-principal-lighter);
}

.w-100.ui-fileupload-simple .ui-button{
	width: 100%;
}

/* ===================== BOTON GRIS OSCURO ===================== */
.btn-gris-oscuro.ui-button {
	background: var(--gris);
	border-radius: 4px;
	border: none;
	color: var(--white);
}
.btn-gris-oscuro.ui-button.ui-state-active,
.btn-gris-oscuro.ui-button.ui-state-hover {
	background: var(--gris-darker);
    border: none;
    color: var(--white);
}
.btn-gris-oscuro.ui-button.ui-state-focus {
	border-color: var(--gris);
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(--gris-lighter);
}

/* ===================== BOTON GRIS CLARO ===================== */
.btn-gris-claro.ui-button {
	background: var(--gris-inactivo);
	border-radius: 4px;
	border: none;
	color: var(--gris-texto);
}
.btn-gris-claro.ui-button.ui-state-active,
.btn-gris-claro.ui-button.ui-state-hover {
	background: var(--gris-inactivo-darker);
    border: none;
    color: var(--gris-texto);
}
.btn-gris-claro.ui-button.ui-state-focus {
	border-color: var(--gris-inactivo);
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(--gris-inactivo-lighter);
}

/* ===================== BOTON BLANCO ===================== */
.btn-blanco.ui-button,
button.btn-blanco {
	background: var(--white);
	border-radius: 4px;
	border: 1px solid var(--color-principal);
	color: var(--gris-texto);
}
.btn-blanco.ui-button.ui-state-active,
.btn-blanco.ui-button.ui-state-hover, 
button.btn-blanco:hover {
	background: var(--gris-inactivo);
    border: 1px solid var(--color-principal);
    color: var(--gris-texto);
}
.btn-blanco.ui-button.ui-state-focus, 
button.btn-blanco:focus {
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(--white);
}

/* ===================== BOTON BLANCO ===================== */
.btn-transparent.ui-button,
button.btn-transparent {
	background: transparent;
	border-radius: 4px;
	border: none;
	color: var(--gris-texto);
}
.btn-transparent.ui-button.ui-state-active,
.btn-transparent.ui-button.ui-state-hover, 
button.btn-transparent:hover {
	background: var(--gris-inactivo);
    border: none;
    color: var(--gris-texto);
}
.btn-transparent.ui-button.ui-state-focus, 
button.btn-transparent:focus {
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(--white);
}

/* ===================== BOTON ROJO ===================== */
.btn-rojo.ui-button,
button.btn-rojo {
	background: var(--rojo);
	border-radius: 4px;
	border: none;
	color: var(--white);
}
.btn-rojo.ui-button.ui-state-active,
.btn-rojo.ui-button.ui-state-hover, 
button.btn-rojo:hover {
	background: var(--rojo-darker);
    border: none;
    color: var(--white);
}
.btn-rojo.ui-button.ui-state-focus, 
button.btn-rojo:focus {
    border-color: var(--rojo);
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(-rojo-lighter);
}

/* ===================== BOTON BOOLEANO ===================== */
.btn-boolean.ui-selectbooleanbutton{
	background: var(--white);
	border-radius: 4px;
	border: 1px solid var(--color-principal);
	color: var(--gris-texto);
}
.btn-boolean.ui-selectbooleanbutton.ui-state-hover{
	background: var(--gris-inactivo);
    border: 1px solid var(--color-principal);
    color: var(--gris-texto);
}
.btn-boolean.ui-selectbooleanbutton.ui-state-focus{
	border-color: var(--color-principal);
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(--color-principal-lighter);
}
.btn-boolean.ui-selectbooleanbutton.ui-state-active{
	background: var(--color-principal);
	border-radius: 4px;
	border: none;
	color: var(--gris-texto);
}
.btn-boolean.ui-selectbooleanbutton.ui-state-active:not(.ui-state-disabled):hover{
	background: var(--color-principal-darker);
    border: none;
    color: var(--gris-texto);
}
.btn-boolean.ui-selectbooleanbutton.ui-state-active.ui-state-focus{
    border-color: var(--color-principal);
    outline: 0 none;
    box-shadow: 0 0 0 0.2em var(--color-principal-lighter);
}

/* ================== */
/* == COMMAND LINK == */
/* ================== */
.clk-base.ui-commandlink,
.clk-base.ui-link,
a.clk-base{
	color: var(--gris-texto-2);
}
.clk-base.ui-commandlink:hover,
.clk-base.ui-link:hover,
a.clk-base:hover,
a.clk-base:focus {
    color: var(--gris-texto-2);
}

/* ============================== */
/* == SELECT ONE / MANY BUTTON == */
/* ============================== */
.select-button-base.ui-selectbooleanbutton.ui-state-active,
.select-button-base.ui-selectonebutton>.ui-button.ui-state-active,
.select-button-base.ui-selectmanybutton>.ui-button.ui-state-active{
	background: var(--color-principal);
	border-radius: 0;
	border: 1px solid var(--color-principal);
	color: var(--white);
}

.select-button-base.ui-selectbooleanbutton.ui-state-active:not(.ui-state-disabled):hover, 
.select-button-base.ui-selectonebutton>.ui-button.ui-state-active:not(.ui-state-disabled):hover, 
.select-button-base.ui-selectmanybutton>.ui-button.ui-state-active:not(.ui-state-disabled):hover{
	background: var(--color-principal-darker);
    border: 1px solid var(--color-principal-darker);
    color: var(--white);
}

.select-button-base>.ui-button.ui-state-focus {
	border-color: var(--color-principal);
    outline: 0 none;
    box-shadow: none;
}

.select-button-base.ui-selectbooleanbutton.ui-state-hover,
.select-button-base.ui-selectonebutton>.ui-button.ui-state-hover,
.select-button-base.ui-selectmanybutton>.ui-button.ui-state-hover{
	background: var(--gris-fondos);
	border: 1px solid var(--color-principal);
    color: var(--gris-texto);
}

.select-button-base.ui-selectonebutton>.ui-button,
.select-button-base.ui-selectmanybutton>.ui-button{
	border-color: var(--gris-inactivo);
}

.select-button-base.ui-selectonebutton>.ui-button:first-child,
.select-button-base.ui-selectmanybutton>.ui-button:first-child{
	border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.select-button-base.ui-selectonebutton>.ui-button:last-child,
.select-button-base.ui-selectmanybutton>.ui-button:last-child{
	border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}