* {
  text-decoration: none !important;
}


/* Letra */

body {
  font-family: "Tagesschrift", system-ui;
}




/*=============================================
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);
}