/* AVISOS Y ESPERA del portal (la piden TODAS las pantallas, tambien las de acceso y las publicas). NOTIFICACIONES EMERGENTES: el toast de Bootstrap tal como lo usa Color Admin (cabecera con icono, titulo, hora y cerrar; cuerpo con el mensaje), apilados arriba a la derecha.
   Las arma alert_msg() (Assets/js/functions.js); las piden el portal (head.php) y las pantallas de acceso. Es la misma pieza y el mismo aspecto que usa el panel de gestion (backend/Assets/css/wf-toast.css). */
.wf-toasts{position:fixed;top:66px;right:16px;z-index:2000;width:350px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:12px;pointer-events:none;}
.wf-toasts .toast{pointer-events:auto;width:100%;max-width:none;font-size:13px;background:#fff;color:#2d353c;border:1px solid #d5dbe0;border-radius:4px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.08);backdrop-filter:none;}
.wf-toasts .toast-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;color:#2d353c;border-bottom:1px solid #e4e7ea;}
.wf-toasts .toast-header strong{flex:1;min-width:0;font-size:13px;font-weight:600;}
.wf-toasts .toast-header small{flex:none;font-size:11.5px;font-weight:500;color:#6f8293;}
.wf-toasts .toast-header .wf-toast-ic{flex:none;font-size:15px;}
.wf-toasts .toast-header .close{flex:none;margin:0;padding:0;font-size:14px;line-height:1;color:#6f8293;opacity:1;text-shadow:none;background:none;border:0;cursor:pointer;}
.wf-toasts .toast-header .close:hover{color:#2d353c;}
.wf-toasts .toast-body{padding:12px;white-space:pre-line;overflow-wrap:anywhere;line-height:1.45;}
.wf-toast-success .wf-toast-ic{color:#32A932;}
.wf-toast-error .wf-toast-ic{color:#FF5B57;}
.wf-toast-warning .wf-toast-ic{color:#F49C1A;}
.wf-toast-info .wf-toast-ic{color:#0D84EF;}
.wf-toast-loader .wf-toast-ic{color:#00ACAC;}
@media (max-width:575.98px){
    .wf-toasts{left:16px;right:16px;width:auto;max-width:none;}
}
/* VELO DE "PROCESANDO" (wfLoadingVeil en functions.js): cubre el contenedor con el circulo de puntos mientras se carga o se ejecuta una accion. Mismo efecto y mismas reglas que el panel de gestion; la clase del contenedor posiciona el velo (nunca en linea). */
.wf-veil-host{ position:relative; }
.wf-loading-overlay{ position:absolute; inset:0; background:rgba(255,255,255,.72); z-index:5; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#4e5c68; border-radius:4px; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.wf-loading-overlay.is-visible{ opacity:1; pointer-events:auto; }