/*=============================================
Global
=============================================*/
* {
  text-decoration: none !important;
}

body{

font-family: 'Open Sans', sans-serif;

}
/*=============================================
Backgrounds
=============================================*/
.bg-primario                    {background-color: var(--color-primario);}
.bg-secundario                  {background-color: var(--color-secundario);}
.bg-auxiliar                    {background-color: var(--color-auxiliar);}
.bg-acento                      {background-color: var(--color-acento);}
.bg-alerta                      {background-color: var(--color-alerta);}
.bg-exito                       {background-color: var(--color-exito);}
.bg-resaltado                   {background-color: var(--color-resaltado);}
.bg-informativo                 {background-color: var(--color-informativo);}

.bg-primario-hover              {background-color: var(--color-primario-hover);}
.bg-secundario-hover            {background-color: var(--color-secundario-hover);}
.bg-auxiliar-hover              {background-color: var(--color-auxiliar-hover);}
.bg-acento-hover                {background-color: var(--color-acento-hover);}
.bg-alerta-hover                {background-color: var(--color-alerta-hover);}
.bg-exito-hover                 {background-color: var(--color-exito-hover);}
.bg-resaltado-hover             {background-color: var(--color-resaltado-hover);}
.bg-informativo-hover           {background-color: var(--color-informativo-hover);}

.bg-primario-subtle             {background-color: var(--color-primario-subtle);}
.bg-secundario-subtle           {background-color: var(--color-secundario-subtle);}
.bg-auxiliar-subtle             {background-color: var(--color-auxiliar-subtle);}
.bg-acento-subtle               {background-color: var(--color-acento-subtle );}
.bg-alerta-subtle               {background-color: var(--color-alerta-subtle );}
.bg-exito-subtle                {background-color: var(--color-exito-subtle );}
.bg-resaltado-subtle            {background-color: var(--color-resaltado-subtle );}
.bg-informativo-subtle          {background-color: var(--color-informativo-subtle );}

.bg-primario-focus              {background-color: var(--color-primario-focus);}
.bg-secundario-focus            {background-color: var(--color-secundario-focus);}
.bg-auxiliar-focus              {background-color: var(--color-auxiliar-focus);}
.bg-acento-focus                {background-color: var(--color-acento-focus);}
.bg-alerta-focus                {background-color: var(--color-alerta-focus);}
.bg-exito-focus                 {background-color: var(--color-exito-focus);}
.bg-resaltado-focus             {background-color: var(--color-resaltado-focus);}
.bg-informativo-focus           {background-color: var(--color-informativo-focus);}

/*=============================================
Textos
=============================================*/
.text-primario                  {color: var(--color-primario) !important;}
.text-secundario                {color: var(--color-secundario) !important;}
.text-auxiliar                  {color: var(--color-auxiliar) !important;}
.text-acento                    {color: var(--color-acento) !important;}
.text-alerta                    {color: var(--color-alerta) !important;}
.text-exito                     {color: var(--color-exito) !important;}
.text-resaltado                 {color: var(--color-resaltado) !important;}
.text-informativo               {color: var(--color-informativo) !important;}



.text-primario-subtle           {color: var(--color-primario-subtle) !important;}
.text-secundario-subtle         {color: var(--color-secundario-subtle) !important;}
.text-auxiliar-subtle           {color: var(--color-auxiliar-subtle) !important;}


/*=============================================
Botones
=============================================*/

/* Botón Primario */
.btn-primario {
    background-color: var(--color-primario); /* Color base */
    color: #ffffff; /* Texto blanco */
    border: 1px solid var(--color-primario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-primario:hover {
    background-color: var(--color-primario-hover); /* Hover */
    border-color: var(--color-primario-hover);
    color: #ffffff;
    transform: scale(1.05); /* Efecto sutil de zoom */
}

.btn-primario:active {
    background-color: var(--color-primario-active)!important; /* Active */
    border-color: var(--color-primario-active);
}

.btn-primario:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primario-focus);; /* Focus */
}

.btn-primario-subtle {
    background-color: var(--color-primario-subtle);
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-primario-subtle:hover {
    background-color: var(--color-primario-subtle); /* Hover */
    border-color: var(--color-primario-subtle);
    transform: scale(1.05); /* Efecto sutil de zoom */
}

.btn-primario-subtle:active {
    background-color: #A1B2C1 !important; /* Active */
    border-color: #A1B2C1;
}

.btn-primario-subtle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primario-subtle-focus); /* Focus */
}

/* Botón Secundario */
.btn-secundario {
    background-color: var(--color-secundario);
    color: #ffffff;
    border: 1px solid var(--color-secundario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-secundario:hover {
    background-color: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
    color: #ffffff;
    transform: scale(1.05);
}

.btn-secundario:active {
    background-color: var(--color-secundario-active)!important;
    border-color: var(--color-secundario-active);
}

.btn-secundario:focus {
    box-shadow: 0 0 0 0.2rem var(--color-secundario-focus);
}

.btn-secundario-subtle {
    background-color: var(--color-secundario-subtle);
    color: var(--color-secundario);
    border: 1px solid var(--color-secundario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-secundario-subtle:hover {
    background-color: var(--color-secundario-subtle);
    color: var(--color-secundario);
    border-color: var(--color-secundario-subtle);
    transform: scale(1.05);
}

.btn-secundario-subtle:active {
    background-color: var(--color-secundario-subtle) !important;
    border-color: var(--color-secundario-subtle);
}

.btn-secundario-subtle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-secundario-subtle-focus);
}

/* Botón Auxiliar */
.btn-auxiliar {
    background-color: var(--color-auxiliar);
    color: #ffffff;
    border: 1px solid var(--color-auxiliar);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-auxiliar:hover {
    background-color: var(--color-auxiliar-hover);
    border-color: var(--color-auxiliar-hover);
    color: #ffffff;
    transform: scale(1.05);
}

.btn-auxiliar:active {
    background-color: var(--color-auxiliar-active)!important;
    border-color: var(--color-auxiliar-active);
}

.btn-auxiliar:focus {
    box-shadow: 0 0 0 0.2rem var(--color-auxiliar-focus);
}

.btn-auxiliar-subtle {
    background-color: var(--color-auxiliar-subtle);
    color: var(--color-auxiliar);
    border: 1px solid var(--color-auxiliar);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-auxiliar-subtle:hover {
    background-color: var(--color-auxiliar-subtle);
    color: var(--color-auxiliar);
    border-color: var(--color-auxiliar-subtle);
    transform: scale(1.05);
}

.btn-auxiliar-subtle:active {
    background-color: var(--color-auxiliar) !important;
    border-color: var(--color-auxiliar);
}

.btn-auxiliar-subtle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-auxiliar-subtle-focus);
}