/* ============================================================
   AlertasUrmeneta.css — Componente CANÓNICO de alertas / notificaciones
   ------------------------------------------------------------
   Consolidación del CSS de toast / overlay de carga / banner que hoy
   vive copy-paste en ~30 forms (plan COM001OperacionesMonitor-rediseño).
   Un form linkea este archivo y usa las clases .uc-* — sin redefinir.

   Clases PREFIJADAS (.uc-*) para NO colisionar con Bootstrap (.toast, .alert).
   Colores por token global con FALLBACK literal: funciona aunque la página
   no cargue EstiloUrmeneta.css (varias páginas standalone no lo hacen).
   ============================================================ */

/* ---- Toast (feedback efímero, esquina inferior derecha) ---- */
.uc-toast {
    position: fixed; right: var(--space-5, 24px); bottom: var(--space-5, 24px);
    z-index: 10500; max-width: 380px;
    background: #ffffff;
    border: 1px solid var(--color-neutral-200, #E5E5E5);
    border-left: 4px solid var(--color-primary, #004C32);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 13px 18px;
    font-size: var(--fs-sm, 13px); line-height: 1.4;
    color: var(--color-neutral-900, #1A1A1A);
    opacity: 0; transform: translateY(8px);
    transition: opacity .18s ease-out, transform .18s ease-out;
    pointer-events: none;
    display: none;
}
.uc-toast.show { display: block; opacity: 1; transform: none; pointer-events: auto; }
.uc-toast.error { border-left-color: var(--pill-bad-dot, #c62828); }
.uc-toast.ok    { border-left-color: var(--pill-ok-dot, #2e7d32); }
.uc-toast.warn  { border-left-color: var(--pill-wrn-dot, #ef6c00); }

/* ---- Overlay de carga (bloqueo puntual con spinner) ---- */
.uc-overlay {
    position: fixed; inset: 0; z-index: 11000;
    background: rgba(255, 255, 255, .6);
    display: none; align-items: center; justify-content: center;
}
.uc-overlay.show { display: flex; }
.uc-spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 4px solid var(--color-neutral-200, #E5E5E5);
    border-top-color: var(--color-primary, #004C32);
    animation: uc-spin .8s linear infinite;
}
@keyframes uc-spin { to { transform: rotate(360deg); } }

/* ---- Banner inline (mensaje persistente en la superficie, p.ej. "guardado") ----
   Usa la paleta semántica pill (certificada AA). Variante por estado. */
.uc-alert {
    display: flex; align-items: center; gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid transparent; border-radius: var(--radius-sm, 6px);
    font-size: var(--fs-sm, 13px); line-height: 1.4;
}
.uc-alert.ok   { background: var(--pill-ok-bg, #eef8f2);  border-color: var(--pill-ok-bd, #cfe8d9);  color: var(--pill-ok-tx, #256548); }
.uc-alert.warn { background: var(--pill-wrn-bg, #fff4e5); border-color: var(--pill-wrn-bd, #ffd59a); color: var(--pill-wrn-tx, #855400); }
.uc-alert.error{ background: var(--pill-bad-bg, #fdecea); border-color: var(--pill-bad-bd, #f5b7b1); color: var(--pill-bad-tx, #9f2f25); }
.uc-alert.info { background: var(--pill-cat-bg, #f3f6fb); border-color: var(--pill-cat-bd, #d6e0ef); color: var(--pill-cat-tx, #355b8c); }

/* ---- Accesibilidad: respetar reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .uc-toast { transition: none; }
    .uc-spinner { animation-duration: 1.2s; }
}