.alerta {
  padding: 16px 20px;
  margin: 20px auto;
  max-width: 600px;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.alerta-exito {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.2);
}

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

.alerta-error {
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #f87171;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.5s ease, fadeOut 0.5s ease 3s forwards;
}

.alerta {
  padding:16px 20px;
  margin:20px auto;
  max-width:900px;
  border-radius:10px;
  font-weight:600;
  text-align:center;
  animation:fadeIn .35s ease,fadeOut .5s ease 3s forwards}
.alerta-exito {
  background:#d1fae5;
  color:#065f46;
  border:1px solid #10b981;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.2)}
.alerta-error {
  background:#fee2e2;
  color:#b91c1c;
  border:1px solid #f87171;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.2)}

  @keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-6px);visibility:hidden}}