/* ════════════════════════════════════════════════════════════════════════════
   Avisos flotantes (ver assets/js/toast.js).
   Lo cargan el panel y la app de campo, así que no depende de las variables de
   admin.css ni de campo.css.
   ════════════════════════════════════════════════════════════════════════════ */

.toast-wrap {
  position: fixed;
  z-index: 1090;            /* por encima del modal de Bootstrap (1055) */
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;     /* no tapa lo que hay debajo */
}

.toast-aviso {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: .6rem;
  padding: .7rem .75rem .8rem;
  border-radius: 10px;
  border: 1px solid;
  border-left-width: 4px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .14);
  font-size: .85rem;
  line-height: 1.35;
  overflow: hidden;
  opacity: 0;
  transform: translateY(.6rem);
  transition: opacity .22s ease, transform .22s ease;
}
.toast-aviso.toast-visible { opacity: 1; transform: none; }
.toast-aviso.toast-saliendo { opacity: 0; transform: translateY(.4rem); }

.toast-ok {
  border-color: #badbcc;
  border-left-color: #198754;
  color: #0f5132;
  background: #f3faf6;
}
.toast-error {
  border-color: #f1aeb5;
  border-left-color: #dc3545;
  color: #842029;
  background: #fef6f6;
}

.toast-ico { font-size: 1rem; line-height: 1.35; }
.toast-ok .toast-ico    { color: #198754; }
.toast-error .toast-ico { color: #dc3545; }

.toast-texto { min-width: 0; overflow-wrap: anywhere; }

.toast-x {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .5;
  padding: 0 .1rem;
  font-size: .72rem;
  line-height: 1.35;
}
.toast-x:hover { opacity: 1; }

/* Barra de tiempo: muestra cuánto falta para que el aviso se vaya solo */
.toast-barra {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  opacity: .4;
}
.toast-ok .toast-barra    { background: #198754; }
.toast-error .toast-barra { background: #dc3545; }

@keyframes toast-progreso {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* En el celular ocupa el ancho y queda abajo, al alcance del pulgar */
@media (max-width: 575.98px) {
  .toast-wrap {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    max-width: none;
  }
  .toast-aviso { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .toast-aviso { transition: none; }
  .toast-barra { animation: none !important; opacity: 0; }
}

/* Confirmación (ver confirmar() en toast.js) */
.confirmar-cuerpo {
  white-space: pre-line;   /* el mensaje puede traer saltos de línea */
  font-size: .9rem;
}