/******************************************************
    I M P O R T A N T E
    Modificar cualquier cosa dentro de este archivo puede hacer que los botones dejen de funcionar
******************************************************/

/******************
botones
*******************/
a, a:hover{
    color:inherit;
}
/************************
    Enlaces 
*************************/
.link{color: var(--primary-color);}
.link:hover{color: var(--primary-hover-color);}
/* btn base --------------------------------------------*/ 

.btn{
    border-radius:var(--btn-border-radius);
    padding: var(--btn-padding , 0.375rem 0.75rem );
    background:var(--btn-bg);
    color:var(--btn-color);
}
.btn:hover, .btn:active, .btn.active,.btn:focus,.btn:not(:disabled):not(.disabled).active:focus,.btn:not(:disabled):not(.disabled):active:focus,.show>.btn.dropdown-toggle:focus.btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active, .show>.btn.dropdown-toggle{
    box-shadow: none;
    background:var(--btn-hover-bg);
    color:var(--btn-hover-color);
}
.btn-primary,.btn-secondary,.btn-danger,.btn-success{
    border: var(--btn-border);
}

/* btn primary --------------------------------------*/

.btn-primary, .badge-primary{
    background: var(--primary-color);
    border-color: var(--primary-color);
    color:var(--primary-contrast);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
    background: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color:var(--primary-hover-contrast);
}
.btn-primary.disabled, .btn-primary:disabled, .btn-primary:disabled:hover{
    cursor: not-allowed;
    background: var(--primary-color);
    border-color: var(--primary-color);
    color:var(--primary-contrast);
    opacity:0.9;
}

/* btn secondary ------------------------------------*/

.btn-secondary,.badge-secondary{
    background: var(--secondary-color);
    border-color: var(--secondary-border);
    color:var(--secondary-contrast);
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active,.btn-secondary:focus,.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle{
    background: var(--secondary-hover-color);
    border-color: var(--secondary-hover-border);
    color:var(--secondary-hover-contrast);
}

/* btn danger --------------------------------------*/

.btn-danger, .badge-danger{
    background: var(--danger-color);
    border-color: var(--danger-color);
    color:var(--danger-contrast)
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active,.btn-danger:focus,.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle{
    background: var(--danger-hover-color);
    border-color: var(--danger-hover-color);
    color:var(--danger-hover-contrast);
}

/* btn success -------------------------------------*/

.btn-success, .badge-success{
    background: var(--success-color);
    border-color: var(--success-color);
    color:var(--success-contrast)
}
.btn-success:hover, .btn-success:active, .btn-success.active,.btn-success:focus,.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle{
    background: var(--success-hover-color);
    border-color: var(--success-hover-color);
    color:var(--success-hover-contrast);
}

/* btn link ---------------------------------------*/
.btn-link{
    color:var(--primary-color)
}
.btn-link:hover, .btn-link:active, .btn-link.active,.btn-link:focus,.btn-link:not(:disabled):not(.disabled).active:focus,.btn-link:not(:disabled):not(.disabled):active:focus,.show>.btn-link.dropdown-toggle:focus.btn-link:not(:disabled):not(.disabled).active, .btn-link:not(:disabled):not(.disabled):active, .show>.btn-link.dropdown-toggle{
    color:var(--primary-hover-color);
}

/* btn share -------------------------------------*/

.btn-share{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    height:2em;
    width:2em;
    border: 1px solid var(--primary-contrast);
    background: var(--primary-contrast);
    border-radius:2em;
    color:var(--primary-color);
}
.btn-share:hover{
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color:var(--primary-contrast);
}

/* check buttios general*/

.custom-control-input:checked~.custom-control-label::before{
    background:var(--primary-color);
    color:var(--primary-contrast);
    border-color:var(--primary-color);
}


/* efecto hover articulos boton -------------------------------------*/

.efecto-hover {
  background: #fff; /* color de fondo */
  color: var(--secondary-contrast); /* color de fuente */
  border: 2px solid var(--secondary-color); /* tamaño y color de borde */
  background-color: var(--secondary-color);
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
  padding-top: 0;
  margin-left: 30%;
  margin-right: 30%;
}
.efecto-hover:hover {
  color: #fff; /* color de fuente hover */
}
.efecto-hover::after {
  content: "";
  background: var(--secondary-hover-color); /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100%;
  -webkit-transition: all 0.50s;
  transition: all 0.50s;
  color:white;
}
.efecto-hover:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.50s;
  transition: all 0.50s;
}