@charset "UTF-8";


/* ----------------- alerts */
/*
#alerts,
#alerts *,
#alerts *::before,
#alerts *::after {
   box-sizing: border-box;
} */

#alert-list {
   height: var(--space-wide);
   overflow: hidden;
   position: relative;
   align-items: center;
   /* No permite que mida más del 75% que le da .col-9 */
   max-width: 100%;
   /* Rompe el mínimo intrínseco que imponen los hijos Flex */
   min-width: 0;
   /* (Opcional) Aísla el cálculo de tamaño del contenido */
   contain: inline-size;
}

/*
#alerts .col-9 {
   max-width: 75%;
}*/

.alert-container-danger {
   border-color: var(--color-danger);
}

.alert-container-alert {
   border-color: var(--color-alert);
}

.alert-container-warning {
   border-color: var(--color-warning);
}

.alert-container-success {
   border-color: var(--color-success);
}

/* Contenedor interno que se moverá */
.alert-track {
   display: flex;
   flex-wrap: nowrap;
   width: max-content;
   animation: scrollAlert 20s linear infinite;
}

.alert-item {
   /* min-width: calc(10 * var(--space-base));
    height: var(--space-large); */
   border: var(--space-xnano) var(--color-darkgray) solid;
   border-radius: var(--space-small);
   padding: var(--space-small) var(--space-medium);
   margin: var(--space-small) var(--space-medium);
   display: flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   flex-shrink: 0;
}

/* Pausar la animación al pasar el mouse */
#alert-list:hover .alert-track {
   animation-play-state: paused;
}

/* Animación infinita fluida */
@keyframes scrollAlert {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
      /* Desplaza exactamente la primera mitad duplicada */
   }
}