@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?i74ylb');
  src:
    url('fonts/icomoon.eot?i74ylb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?i74ylb') format('truetype'),
    url('fonts/icomoon.woff?i74ylb') format('woff'),
    url('fonts/icomoon.svg?i74ylb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.mat-card-header-text {
  width: 100%;
}

.icon-verde,
.icon-rojo,
.icon-azul {
  opacity: 0;
  animation: fadeInIcon 0.3s ease forwards;
  animation-delay: 0.1s; /* Pequeño delay para asegurar que la fuente esté lista */
  margin-left: 4px;
}

/* Animación para hacer aparecer los iconos suavemente */
@keyframes fadeInIcon {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Asegurar que los contenedores mantengan su espacio */
[class^='icon-'],
[class*=' icon-'] {
  display: inline-flex;
  align-items: center;
  min-width: 1em;
  min-height: 1em;
}

/* Opcional: Placeholder mientras carga */
[class^='icon-']::before,
[class*=' icon-']::before {
  opacity: 0;
  animation: fadeInIcon 0.3s ease forwards;
  animation-delay: 0.1s;
}

/* Ajustes específicos para cada tipo de icono */
.icon-verde .path1,
.icon-verde .path2,
.icon-verde .path3,
.icon-verde .path4,
.icon-rojo .path1,
.icon-rojo .path2,
.icon-rojo .path3,
.icon-azul .path1,
.icon-azul .path2 {
  opacity: 0;
  animation: fadeInIcon 0.3s ease forwards;
  animation-delay: 0.1s;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-verde .path1:before {
  content: '\e900';
  color: rgb(222, 205, 41);
}
.icon-verde .path2:before {
  content: '\e901';
  margin-left: -1em;
  color: rgb(67, 113, 101);
}
.icon-verde .path3:before {
  content: '\e902';
  margin-left: -1em;
  color: rgb(210, 10, 11);
}
.icon-verde .path4:before {
  content: '\e903';
  margin-left: -1em;
  color: rgb(134, 174, 68);
}
.icon-azul .path1:before {
  content: '\e904';
  color: rgb(236, 211, 73);
}
.icon-azul .path2:before {
  content: '\e905';
  margin-left: -1em;
  color: rgb(12, 155, 159);
}
.icon-rojo .path1:before {
  content: '\e906';
  color: rgb(76, 124, 113);
}
.icon-rojo .path2:before {
  content: '\e907';
  margin-left: -1em;
  color: rgb(228, 212, 86);
}
.icon-rojo .path3:before {
  content: '\e908';
  margin-left: -1em;
  color: rgb(170, 40, 41);
}
.icon-MeddyLogo .path1:before {
  content: '\e909';
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path2:before {
  content: '\e90a';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path3:before {
  content: '\e90b';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path4:before {
  content: '\e90c';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path5:before {
  content: '\e90d';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path6:before {
  content: '\e90e';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path7:before {
  content: '\e90f';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path8:before {
  content: '\e910';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path9:before {
  content: '\e911';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path10:before {
  content: '\e912';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path11:before {
  content: '\e913';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path12:before {
  content: '\e914';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path13:before {
  content: '\e915';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path14:before {
  content: '\e916';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path15:before {
  content: '\e917';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path16:before {
  content: '\e918';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path17:before {
  content: '\e919';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path18:before {
  content: '\e91a';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path19:before {
  content: '\e91b';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path20:before {
  content: '\e91c';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path21:before {
  content: '\e91d';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path22:before {
  content: '\e91e';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path23:before {
  content: '\e91f';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path24:before {
  content: '\e920';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path25:before {
  content: '\e921';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path26:before {
  content: '\e922';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path27:before {
  content: '\e923';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path28:before {
  content: '\e924';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path29:before {
  content: '\e925';
  margin-left: -1em;
  color: rgb(115, 115, 115);
}
.icon-MeddyLogo .path30:before {
  content: '\e926';
  margin-left: -1em;
  color: rgb(200, 212, 230);
}
.icon-MeddyLogo .path31:before {
  content: '\e927';
  margin-left: -1em;
  color: rgb(28, 86, 127);
}
.icon-MeddyLogo .path32:before {
  content: '\e928';
  margin-left: -1em;
  color: rgb(28, 86, 127);
}
.icon-MeddyLogo .path33:before {
  content: '\e929';
  margin-left: -1em;
  color: rgb(28, 86, 127);
}
.icon-MeddyLogo .path34:before {
  content: '\e92a';
  margin-left: -1em;
  color: rgb(28, 86, 127);
}
.icon-MeddyLogo .path35:before {
  content: '\e92b';
  margin-left: -1em;
  color: rgb(28, 86, 127);
}
.icon-MeddyLogo .path36:before {
  content: '\e92c';
  margin-left: -1em;
  color: rgb(28, 86, 127);
}
.icon-camera:before {
  content: '\e92d';
}
.icon-books:before {
  content: '\e92e';
}
.icon-file-picture:before {
  content: '\e92f';
}
.icon-qrcode:before {
  content: '\e938';
}
.icon-location:before {
  content: '\e947';
}
.icon-keyboard:before {
  content: '\e955';
}
.icon-mobile:before {
  content: '\e958';
}
.icon-undo2:before {
  content: '\e967';
}
.icon-user-tie:before {
  content: '\e976';
}
.icon-pie-chart:before {
  content: '\e99a';
}
.icon-stats-dots:before {
  content: '\e99b';
}
.icon-leaf:before {
  content: '\e9a4';
}
.icon-fire:before {
  content: '\e9a9';
}
.icon-bin:before {
  content: '\e9ac';
}
.icon-enter:before {
  content: '\ea13';
}
.icon-filter:before {
  content: '\ea5b';
}
.icon-file-pdf:before {
  content: '\eadf';
}