#tostada-contenedor {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.tostada {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background-color: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-superficie-alta, #E8E8E8);
  min-width: 300px;
  max-width: 400px;
  animation: tostada-entrar 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tostada.saliendo {
  animation: tostada-salir 0.25s ease-in forwards;
}

.tostada-icono {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tostada-icono .material-symbols-outlined {
  font-size: 20px;
}

.tostada-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tostada-titulo {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.tostada-mensaje {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.4;
}

.tostada-cerrar {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 2px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s, color 0.15s;
  align-self: flex-start;
}

.tostada-cerrar:hover {
  background-color: var(--color-superficie-alta, #E8E8E8);
  color: #374151;
}

.tostada-cerrar .material-symbols-outlined {
  font-size: 18px;
}

.tostada-progreso {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 14px 14px;
  animation: tostada-progreso linear forwards;
}

.tostada { position: relative; overflow: hidden; }

.tostada-exito {
  border-left: 4px solid #10b981;
}
.tostada-exito .tostada-icono {
  background-color: #ecfdf5;
  color: #10b981;
}
.tostada-exito .tostada-progreso {
  background-color: #10b981;
}

.tostada-error {
  border-left: 4px solid #ef4444;
}
.tostada-error .tostada-icono {
  background-color: #fef2f2;
  color: #ef4444;
}
.tostada-error .tostada-progreso {
  background-color: #ef4444;
}

.tostada-advertencia {
  border-left: 4px solid #f59e0b;
}
.tostada-advertencia .tostada-icono {
  background-color: #fffbeb;
  color: #f59e0b;
}
.tostada-advertencia .tostada-progreso {
  background-color: #f59e0b;
}

.tostada-info {
  border-left: 4px solid #3b82f6;
}
.tostada-info .tostada-icono {
  background-color: #eff6ff;
  color: #3b82f6;
}
.tostada-info .tostada-progreso {
  background-color: #3b82f6;
}

.tostada-primario {
  border-left: 4px solid var(--color-primario, #60003E);
}
.tostada-primario .tostada-icono {
  background-color: rgba(96, 0, 62, 0.08);
  color: var(--color-primario, #60003E);
}
.tostada-primario .tostada-progreso {
  background-color: var(--color-primario, #60003E);
}

@keyframes tostada-entrar {
  from {
    opacity: 0;
    transform: translateX(110%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes tostada-salir {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-height: 120px;
    margin-bottom: 0;
  }
  to {
    opacity: 0;
    transform: translateX(110%) scale(0.9);
    max-height: 0;
    margin-bottom: -10px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@keyframes tostada-progreso {
  from { width: 100%; }
  to   { width: 0%; }
}