.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }

/* =============================================
   Iconos raíz (/assets/icons/)
   ============================================= */

.icon--add {
  mask: url('./../assets/icons/add.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--arrow-dropdown {
  mask: url('./../assets/icons/arrow-dropdown.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--arrow-up {
  mask: url('./../assets/icons/arrow-up.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--avatar {
  mask: url('./../assets/icons/avatar.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--avatar-placeholder {
  mask: url('./../assets/icons/avatar-placeholder.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--chevron_down {
  mask: url('./../assets/icons/chevron_down.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--chevron_forward {
  mask: url('./../assets/icons/chevron_forward.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--company {
  mask: url('./../assets/icons/company.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--cross {
  mask: url('./../assets/icons/cross.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--delete {
  mask: url('./../assets/icons/delete.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--download {
  mask: url('./../assets/icons/download.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--edit {
  mask: url('./../assets/icons/edit.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--example {
  mask: url('./../assets/icons/example.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--eye {
  mask: url('./../assets/icons/eye.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--filter {
  mask: url('./../assets/icons/filter.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--filterremove {
  mask: url('./../assets/icons/filterremove.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--hamburger {
  mask: url('./../assets/icons/hamburger.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--info {
  mask: url('./../assets/icons/info.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--list {
  mask: url('./../assets/icons/list.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--menu {
  mask: url('./../assets/icons/menu.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--more {
  mask: url('./../assets/icons/more.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--quotemark {
  mask: url('./../assets/icons/quotemark.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--social-facebook {
  mask: url('./../assets/icons/social-facebook.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--social-instagram {
  mask: url('./../assets/icons/social-instagram.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--social-linkedin {
  mask: url('./../assets/icons/social-linkedin.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--social-x {
  mask: url('./../assets/icons/social-x.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--social-youtube {
  mask: url('./../assets/icons/social-youtube.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--star {
  mask: url('./../assets/icons/star.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--star-filled {
  mask: url('./../assets/icons/star-filled.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--tabler_slash {
  mask: url('./../assets/icons/tabler_slash.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--upload {
  mask: url('./../assets/icons/upload.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

/* =============================================
   Iconos PID (/assets/icons/PID/)
   ============================================= */

.icon--account-box-outline {
  mask: url('./../assets/icons/PID/account-box-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--account-hard-hat-outline {
  mask: url('./../assets/icons/PID/account-hard-hat-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--account-outline {
  mask: url('./../assets/icons/PID/account-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--arrow {
  mask: url('./../assets/icons/PID/arrow.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}
.icon--arrow-right {
  mask: url('./../assets/icons/arrow-right.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--bell-outline {
  mask: url('./../assets/icons/PID/bell-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--briefcase-outline {
  mask: url('./../assets/icons/PID/briefcase-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--bullhorn {
  mask: url('./../assets/icons/PID/bullhorn.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--campanas {
  mask: url('./../assets/icons/PID/campañas.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--close {
  mask: url('./../assets/icons/PID/close.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--cog-outline {
  mask: url('./../assets/icons/PID/cog-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--default {
  mask: url('./../assets/icons/PID/default.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--destin {
  mask: url('./../assets/icons/PID/destin.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--domain {
  mask: url('./../assets/icons/PID/domain.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--edit_ping {
  mask: url('./../assets/icons/PID/edit_ping.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--email-outline {
  mask: url('./../assets/icons/PID/email-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--enterprise_white {
  mask: url('./../assets/icons/PID/enterprise_white.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--grid_ping {
  mask: url('./../assets/icons/PID/grid_ping.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--grid_white {
  mask: url('./../assets/icons/PID/grid_white.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--heart {
  mask: url('./../assets/icons/PID/heart.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--hit {
  mask: url('./../assets/icons/PID/hit.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--home {
  mask: url('./../assets/icons/PID/home.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--home-outline {
  mask: url('./../assets/icons/PID/home-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--home_icon {
  mask: url('./../assets/icons/PID/home_icon.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--home_white {
  mask: url('./../assets/icons/PID/home_white.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--icon_hotel {
  mask: url('./../assets/icons/PID/icon_hotel.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--icon_service {
  mask: url('./../assets/icons/PID/icon_service.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--icon_user {
  mask: url('./../assets/icons/PID/icon_user.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--indicadores {
  mask: url('./../assets/icons/PID/indicadores.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--infor_enterprise_red {
  mask: url('./../assets/icons/PID/infor_enterprise_red.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--language {
  mask: url('./../assets/icons/PID/language.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--lenguage {
  mask: url('./../assets/icons/PID/lenguage.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--like {
  mask: url('./../assets/icons/PID/like.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--location {
  mask: url('./../assets/icons/PID/location.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--location_white {
  mask: url('./../assets/icons/PID/location_white.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--open {
  mask: url('./../assets/icons/PID/open.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--percepcion_ciudadana {
  mask: url('./../assets/icons/PID/percepcion_ciudadana.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--point_services {
  mask: url('./../assets/icons/PID/point_services.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--prestacion_servicios {
  mask: url('./../assets/icons/PID/prestacion_servicios.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--promociones {
  mask: url('./../assets/icons/PID/promociones.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--search {
  mask: url('./../assets/icons/PID/search.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--services_white {
  mask: url('./../assets/icons/PID/services_white.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--undraw_modern-design {
  mask: url('./../assets/icons/PID/undraw_modern-design_yur1.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--union {
  mask: url('./../assets/icons/PID/Union.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--union_white {
  mask: url('./../assets/icons/PID/Union_white.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--user {
  mask: url('./../assets/icons/PID/user.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--user_white {
  mask: url('./../assets/icons/PID/user_white.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--view-dashboard-outline {
  mask: url('./../assets/icons/PID/view-dashboard-outline.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}

.icon--folder{
  mask: url('./../assets/icons/folder.svg') no-repeat center;
  mask-size: contain;
  background-color: currentColor;
}