/* ============================================================
   MOLÉCULA — Alert / Flash / Toast
   Combina: ícono + texto + botón de cierre.
   ============================================================ */

/* [hidden] normalmente tiene display:none en el UA stylesheet, pero display:flex
   del autor lo sobrescribe. Esto lo restaura. */
.alert[hidden] { display: none !important; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  border: 1px solid transparent;
  animation: alert-in var(--transition-base) both;
}

@keyframes alert-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.alert i, .alert .icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }

.alert-success { background-color: var(--color-success-soft); color: #1A6644; border-color: rgba(63, 182, 139, 0.30); }
.alert-success i { color: var(--color-success); }
.alert-error   { background-color: var(--color-error-soft);   color: var(--color-error);  border-color: rgba(217, 83, 79, 0.30); }
.alert-error i { color: var(--color-error); }
.alert-warning { background-color: var(--color-warning-soft); color: #7A4F00;              border-color: rgba(230, 162, 60, 0.30); }
.alert-warning i { color: var(--color-warning); }
.alert-info    { background-color: var(--color-info-soft);    color: #1F5F7A;              border-color: rgba(95, 168, 211, 0.30); }
.alert-info i  { color: var(--color-info); }

[data-theme="dark"] .alert-success { color: var(--color-success); }
[data-theme="dark"] .alert-warning { color: var(--color-warning); }
[data-theme="dark"] .alert-info    { color: var(--color-info); }

.alert-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.5;
  padding: 0;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.alert-close:hover { opacity: 1; }

.alert-link { text-decoration: underline; font-weight: var(--font-medium); color: currentColor; }

.alert-mb    { margin-bottom: var(--space-4); }
.alert-mb-sm { margin-bottom: var(--space-3); }
.alert-mt    { margin-top: var(--space-3); }

.alert-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); list-style: disc; }
.alert-list li { font-size: var(--text-sm); }

.alert-row { align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.alert-flush { border-radius: 0; margin: 0; }

/* ============================================================
   TOAST — flash messages con auto-dismiss y glass redesign
   ============================================================ */

.flash-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* En desktop: posición fija bottom-right sobre el footer */
@media (min-width: 768px) {
  .flash-container {
    position: fixed;
    bottom: calc(44px + var(--space-5));
    right: var(--space-5);
    z-index: 300;
    width: 340px;
    margin-bottom: 0;
  }
}

/* Toast — override del .alert base cuando está dentro del flash-container */
.flash-container .alert {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-3-5) var(--space-4);
  /* Glass sólido — más legible, sin transparencia excesiva */
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(255, 255, 255, 0.70) inset;
  /* Sobrescribe la animación base con slide-in desde abajo */
  animation: toast-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

[data-theme="dark"] .flash-container .alert {
  background: rgba(22, 28, 54, 0.65);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Borde izquierdo de color por tipo */
.flash-container .alert-success { border-left: 3px solid var(--color-success); }
.flash-container .alert-error   { border-left: 3px solid var(--color-error); }
.flash-container .alert-warning { border-left: 3px solid var(--color-warning); }
.flash-container .alert-info    { border-left: 3px solid var(--color-info); }

/* Barra de progreso auto-dismiss */
.flash-container .alert::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  opacity: 0.45;
  animation: toast-progress 4.5s linear forwards;
}
.flash-container .alert-success::before { background: var(--color-success); }
.flash-container .alert-error::before   { background: var(--color-error); }
.flash-container .alert-warning::before { background: var(--color-warning); }
.flash-container .alert-info::before    { background: var(--color-info); }

/* Animación de salida — añadida por JS al dismiss */
.flash-container .alert.toast-dismissing {
  animation: toast-out 0.18s ease forwards !important;
}
.flash-container .alert.toast-dismissing::before {
  animation: none !important;
}

/* Keyframes */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.alert--mb { margin-bottom: var(--space-4); }

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0);    max-height: 120px; }
  to   { opacity: 0; transform: translateX(20px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; }
}

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}