/* === ALERTAS PERSONALIZADAS === */
.alert {
  border-radius: .85rem;
  padding: 1rem 1.25rem 1rem 2.75rem; /* dejamos espacio al ícono */
  font-weight: 500;
  display: block;
  position: relative;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  border: none;
}

/* Texto */
.alert p, 
.alert div {
  margin: 0;
  line-height: 1.4;
}

/* ==== VARIANTES ==== */

/* Éxito */
.alert-success {
  background: #eaf6ef;
  color: var(--ok);
  border-left: 6px solid var(--ok);
}
.alert-success::before {
  content: "\f26e"; /* bi-check-circle-fill */
  font-family: "Bootstrap-icons";
  font-size: 1.2rem;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ok);
}

/* Error */
.alert-danger {
  background: #fbecea;
  color: var(--err);
  border-left: 6px solid var(--err);
}
.alert-danger::before {
  content: "\f623"; /* bi-exclamation-octagon-fill */
  font-family: "Bootstrap-icons";
  font-size: 1.2rem;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--err);
}

/* Advertencia */
.alert-warning {
  background: #fff9e6;
  color: #6c5700;
  border-left: 6px solid var(--warn);
}
.alert-warning::before {
  content: "\f33a"; /* bi-exclamation-triangle-fill */
  font-family: "Bootstrap-icons";
  font-size: 1.2rem;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--warn);
}

/* Info */
.alert-info {
  background: var(--color-bg);
  color: var(--color-textos);
  border-left: 6px solid var(--color-textos);
}
.alert-info::before {
  content: "\f431"; /* bi-info-circle-fill */
  font-family: "Bootstrap-icons";
  font-size: 1.2rem;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--amarillito);
}
/*alertas de mensajes*/
.custom-alert {  
  border-radius: 12px;
  background-color: #e6f4ea;  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 1);
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  animation: slideFadeIn 0.5s ease-out;
  margin-top: 1rem;
}



/* Animación */
@keyframes slideFadeIn {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/*Mensaje de bienvenida*/
.welcome-banner {
  background: linear-gradient(90deg, var(--color-principal), var(--color-footer));
  animation: fadeInSlide 0.6s ease-out;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}