/* Alertas tipo "toast" con la paleta de Pico.
   Se cierran a mano (botón ✕) o solas a los 2s (js/toast.js). */
.toast-stack{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%);
  z-index:6000; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  width:min(92vw,460px); pointer-events:none;
}
.toast{
  pointer-events:auto; box-sizing:border-box; width:100%; margin:0;
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.7rem .9rem; border-radius:10px;
  background:var(--pico-card-background-color,#fff); color:var(--pico-color,#373c44);
  border:1px solid var(--pico-muted-border-color,#e7eaef);
  border-left:5px solid #4F4F4D;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  font-size:.9rem; line-height:1.35;
  animation:toastIn .18s ease-out;
}
.toast__msg{ flex:1 1 auto; min-width:0; word-break:break-word }
/* Especificidad con id para ganarle a la regla global de botones (app.css) */
#picoToast button.toast__close{
  flex:0 0 auto; width:auto; margin:0; padding:0 .1rem;
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:inherit !important; font-size:.85rem; line-height:1.2; cursor:pointer; opacity:.55;
}
#picoToast button.toast__close:hover{ opacity:1 }
.toast--error{ border-left-color:var(--pico-del-color,#b3261e) }
.toast--success{ border-left-color:var(--pico-ins-color,#0f766e) }
.toast--out{ opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease }
@keyframes toastIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }