/* ==========================================================================
   CONCRETO · concreto-toasts.css
   Look UNIFICADO de notificaciones/toast (referencia Marketplace): superficie
   navy TRANSLÚCIDA con desenfoque (glass) + acento de color por severidad.

   Excepción consciente a 00-SISTEMA-DISENO §6 (que pasó el glass a superficies
   sólidas): SOLO las notificaciones efímeras (toasts) usan translucidez+blur,
   porque flotan sobre el contenido y la decisión de diseño lo pidió. El resto del
   sistema (cards, modales, popups de confirmación) sigue SÓLIDO.

   Unifica el ASPECTO de los 3 mecanismos que conviven hoy sin tocar las llamadas:
   - SweetAlert toast  → .swal2-popup.swal2-toast  (todos los Swal toast lo llevan)
   - Toastify          → .toastify
   - Bootstrap toast   → .toast
   La severidad del SweetAlert se detecta por el icono con :has() (error/success/
   warning/info), igual que el toast rojo de Marketplace (borde+título rojos).
   ========================================================================== */

/* ---- Base translúcida común ---- */
.swal2-popup.swal2-toast,
.toastify,
.toast {
  background: color-mix(in srgb, var(--c-navy-black) 76%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  color: var(--c-ink) !important;
  border: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* SweetAlert toast: título e iconos legibles sobre el glass */
.swal2-popup.swal2-toast .swal2-title { color: var(--c-ink) !important; font-weight: var(--fw-demi); }
.swal2-popup.swal2-toast .swal2-html-container { color: var(--c-ink-soft) !important; }

/* ---- Acento por severidad (SweetAlert) — borde + título del color del estado,
   con un tinte translúcido del mismo color sobre el navy. ---- */
.swal2-popup.swal2-toast:has(.swal2-error) {
  border-color: var(--c-danger) !important;
  background: color-mix(in srgb, var(--c-danger) 16%, color-mix(in srgb, var(--c-navy-black) 76%, transparent)) !important;
}
.swal2-popup.swal2-toast:has(.swal2-error) .swal2-title { color: var(--c-danger) !important; }

.swal2-popup.swal2-toast:has(.swal2-success) {
  border-color: var(--c-success) !important;
  background: color-mix(in srgb, var(--c-success) 16%, color-mix(in srgb, var(--c-navy-black) 76%, transparent)) !important;
}
.swal2-popup.swal2-toast:has(.swal2-success) .swal2-title { color: var(--c-success) !important; }

.swal2-popup.swal2-toast:has(.swal2-warning) {
  border-color: var(--c-warning) !important;
  background: color-mix(in srgb, var(--c-warning) 16%, color-mix(in srgb, var(--c-navy-black) 76%, transparent)) !important;
}
.swal2-popup.swal2-toast:has(.swal2-warning) .swal2-title { color: var(--c-warning) !important; }

.swal2-popup.swal2-toast:has(.swal2-info),
.swal2-popup.swal2-toast:has(.swal2-question) {
  border-color: var(--c-teal) !important;
  background: color-mix(in srgb, var(--c-teal) 16%, color-mix(in srgb, var(--c-navy-black) 76%, transparent)) !important;
}
.swal2-popup.swal2-toast:has(.swal2-info) .swal2-title,
.swal2-popup.swal2-toast:has(.swal2-question) .swal2-title { color: var(--c-teal) !important; }

/* ---- Bootstrap toast: el acento usa las utilidades .text-bg-* ya existentes;
   solo aseguramos el glass + un borde de color cuando traen severidad. ---- */
.toast.text-bg-danger,  .toast.border-danger  { border-color: var(--c-danger)  !important; }
.toast.text-bg-success, .toast.border-success { border-color: var(--c-success) !important; }
.toast.text-bg-warning, .toast.border-warning { border-color: var(--c-warning) !important; }
.toast .toast-header { background: transparent !important; color: var(--c-ink) !important; border-bottom-color: color-mix(in srgb, var(--c-white) 12%, transparent) !important; }

/* Accesibilidad: si el usuario pide menos transparencia, caer a sólido. */
@media (prefers-reduced-transparency: reduce) {
  .swal2-popup.swal2-toast, .toastify, .toast {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--c-navy-black) !important;
  }
}