/* ------------------------------------------------------------------------------------------------ Arquivo: ui-alert.css Descrição: - Estilos do sistema próprio de alertas, diálogos e notificações do VWS. - Substitui dependência visual do SweetAlert2. - Usa exclusivamente variáveis CSS dos temas do sistema. Funcionalidades específicas: - Modal de alerta/confirmação com overlay - Toasts de notificação rápida - Estado de loading transparente - Animações discretas de entrada/saída - Responsivo e acessível Cronologia: - 15/04/2026: Criação do módulo para substituição completa do SweetAlert2 (Autor: Marcelo A. Dias Amado - Vintage Words Studio) - 15/04/2026: Ajustes visuais — contraste do popup, ícone/título maiores, borda sutil adaptativa, transparência no fundo, ícones Lucide nos botões (Autor: Marcelo A. Dias Amado - Vintage Words Studio) ------------------------------------------------------------------------------------------------ */ /* ================================================================================================ VARIÁVEIS INTERNAS DO UI-ALERT Mapeadas a partir do sistema de temas do backoffice (--surface-*, --brand-*, etc.). Sobrescritas abaixo para o contexto do portal (.portal-body). ================================================================================================ */ :root { --vws-alert-panel: var(--surface-panel, #ffffff); --vws-alert-muted: var(--surface-muted, #f2f4f8); --vws-alert-contrast: var(--surface-contrast,#171d2a); --vws-alert-border: var(--border-strong, #d5dce6); --vws-alert-text: var(--text-primary, #343a4a); --vws-alert-sub: var(--text-secondary, #6d758b); --vws-brand-primary: var(--brand-primary, #afc9c9); --vws-brand-success: var(--brand-success, #51c498); --vws-brand-danger: var(--brand-danger, #a54f44); --vws-brand-warning: var(--brand-warning, #f5a524); --vws-brand-info: var(--brand-info, #B5C2D4); } /* ================================================================================================ MAPEAMENTO PARA O PORTAL DO CLIENTE O portal usa variáveis --portal-* completamente separadas do backoffice. O seletor .portal-body (aplicado no pelo portal_base.html) redireciona os tokens internos do ui-alert para a paleta do portal. ================================================================================================ */ .portal-body { --vws-alert-panel: var(--portal-surface-elevated, var(--portal-surface, #F5F7FB)); --vws-alert-muted: var(--portal-surface-soft, var(--portal-surface, #F5F7FB)); --vws-alert-contrast: var(--portal-secondary, #0F172A); --vws-alert-border: var(--portal-border, #d5dce6); --vws-alert-text: var(--portal-text, #0B1220); --vws-alert-sub: var(--portal-muted, #516079); --vws-brand-primary: var(--portal-primary, #1263D6); --vws-brand-success: var(--portal-success, #15803d); --vws-brand-danger: var(--portal-danger, #dc2626); --vws-brand-warning: #f59e0b; --vws-brand-info: var(--portal-primary, #1263D6); } /* ================================================================================================ OVERLAY / BACKDROP ================================================================================================ */ .vws-alert-overlay { position: fixed; inset: 0; z-index: 9998; /* Fundo escuro com leve mescla do contraste do tema */ background: color-mix(in srgb, rgba(0,0,0,0.55) 80%, var(--vws-alert-contrast) 20%); display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.2s ease; } .vws-alert-overlay.vws-visible { opacity: 1; } /* Variante transparente para loading */ .vws-alert-overlay.vws-overlay-transparent { background: rgba(0, 0, 0, 0.18); } /* ================================================================================================ CONTAINER DO MODAL ================================================================================================ */ .vws-alert-popup { /* * Fundo: panel com leve transparência para dar profundidade — * aparece ligeiramente diferente do fundo ao invés de fundir com ele. * Nos temas escuros fica com um glass sutil; nos claros mantém a limpeza. */ background: color-mix(in srgb, var(--vws-alert-panel) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* * Borda adaptativa: usa color-mix entre border-strong e o panel. * Em temas escuros fica um tom mais claro que o fundo; * em temas claros fica um tom discretamente mais escuro. */ border: 1px solid color-mix(in srgb, var(--vws-alert-border) 60%, var(--vws-alert-panel) 40%); border-radius: 0.85rem; /* Sombra profunda sem neon — usa a cor de contraste do tema, nunca cor fixa */ width: min(32em, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 2.25rem 2rem 1.75rem; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; transform: scale(0.93) translateY(-10px); opacity: 0; transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s ease; } .vws-alert-overlay.vws-visible .vws-alert-popup { transform: scale(1) translateY(0); opacity: 1; } /* Variante loading — menor, sem padding excessivo */ .vws-alert-popup.vws-popup-loading { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; min-width: auto !important; } /* ================================================================================================ ÍCONES DE STATUS — maiores, com fundo mais contrastante ================================================================================================ */ .vws-alert-icon { width: 4.25rem; height: 4.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 0.15rem; /* Anel externo sutil */ outline: 3px solid transparent; outline-offset: 2px; } .vws-alert-icon svg { width: 2.1rem; height: 2.1rem; stroke-width: 2.2; } .vws-alert-icon--success { background: color-mix(in srgb, var(--vws-brand-success) 18%, var(--vws-alert-muted) 82%); color: var(--vws-brand-success); outline-color: color-mix(in srgb, var(--vws-brand-success) 22%, transparent); } .vws-alert-icon--error { background: color-mix(in srgb, var(--vws-brand-danger) 18%, var(--vws-alert-muted) 82%); color: var(--vws-brand-danger); outline-color: color-mix(in srgb, var(--vws-brand-danger) 22%, transparent); } .vws-alert-icon--warning { background: color-mix(in srgb, var(--vws-brand-warning) 18%, var(--vws-alert-muted) 82%); color: var(--vws-brand-warning); outline-color: color-mix(in srgb, var(--vws-brand-warning) 22%, transparent); } .vws-alert-icon--info { background: color-mix(in srgb, var(--vws-brand-info) 22%, var(--vws-alert-muted) 78%); color: color-mix(in srgb, var(--vws-brand-info) 80%, var(--vws-alert-contrast) 20%); outline-color: color-mix(in srgb, var(--vws-brand-info) 22%, transparent); } .vws-alert-icon--question { background: color-mix(in srgb, var(--vws-brand-primary) 18%, var(--vws-alert-muted) 82%); color: color-mix(in srgb, var(--vws-brand-primary) 80%, var(--vws-alert-contrast) 20%); outline-color: color-mix(in srgb, var(--vws-brand-primary) 22%, transparent); } /* ================================================================================================ CONTEÚDO DO MODAL ================================================================================================ */ .vws-alert-title { font-size: 1.3rem; font-weight: 700; color: var(--vws-alert-text); text-align: center; margin: 0; line-height: 1.3; letter-spacing: -0.01em; } .vws-alert-content { font-size: 0.935rem; color: var(--vws-alert-sub); text-align: center; margin: 0; line-height: 1.6; width: 100%; } .vws-alert-content.text-body-emphasis { color: var(--vws-alert-text); } /* Separador sutil entre conteúdo e botões */ .vws-alert-divider { width: 100%; height: 1px; background: color-mix(in srgb, var(--vws-alert-border) 50%, transparent); margin: 0.1rem 0; } /* ================================================================================================ PROGRESS BAR (timer) ================================================================================================ */ .vws-alert-timer-bar { width: 100%; height: 3px; background: color-mix(in srgb, var(--vws-alert-border) 60%, transparent); border-radius: 2px; overflow: hidden; margin-top: 0.15rem; } .vws-alert-timer-bar-inner { height: 100%; background: var(--vws-brand-primary); border-radius: 2px; width: 100%; transform-origin: left center; animation: vwsTimerShrink linear forwards; } @keyframes vwsTimerShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ================================================================================================ BOTÕES ================================================================================================ */ .vws-alert-actions { display: flex; gap: 0.65rem; justify-content: center; flex-wrap: wrap; width: 100%; margin-top: 0.35rem; } /* Ordem visual: cancelar à esquerda, confirmar à direita (reverseButtons padrão do sistema) */ .vws-alert-actions.vws-reverse { flex-direction: row-reverse; } /* Garante que ícones dentro dos botões do alerta fiquem bem alinhados */ .vws-alert-actions .btn { display: inline-flex; align-items: center; gap: 0.4rem; } /* Anula o top: -2px do lucide-icon-sm dentro dos botões do alerta */ .vws-alert-actions .btn .lucide-icon-sm, .vws-alert-actions .btn .lucide-icon-md { top: 0; margin-right: 0; } .vws-alert-actions .btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* ================================================================================================ SPINNER DE LOADING ================================================================================================ */ .vws-alert-spinner { width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 0.7rem solid color-mix(in srgb, var(--vws-alert-border) 55%, transparent); border-top-color: var(--vws-brand-primary); border-right-color: var(--vws-brand-primary); border-bottom-color: transparent; border-left-color: color-mix(in srgb, var(--vws-alert-border) 30%, transparent); animation: vwsSpin 0.9s linear infinite; background: transparent; } @keyframes vwsSpin { to { transform: rotate(360deg); } } /* ================================================================================================ TOASTS ================================================================================================ */ .vws-toast-container { position: fixed; z-index: 10100; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } /* Posicionamentos */ .vws-toast-container.vws-pos-top-end { top: 1.25rem; right: 1.25rem; align-items: flex-end; } .vws-toast-container.vws-pos-top-start { top: 1.25rem; left: 1.25rem; align-items: flex-start; } .vws-toast-container.vws-pos-top-center { top: 1.25rem; left: 50%; transform: translateX(-50%); align-items: center; } .vws-toast-container.vws-pos-bottom-end { bottom: 1.25rem; right: 1.25rem; align-items: flex-end; } .vws-toast-container.vws-pos-bottom-start { bottom: 1.25rem; left: 1.25rem; align-items: flex-start; } .vws-toast-container.vws-pos-bottom-center { bottom: 1.25rem; left: 50%; transform: translateX(-50%); align-items: center; } .vws-toast { background: color-mix(in srgb, var(--vws-alert-panel) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--vws-alert-border) 55%, var(--vws-alert-panel) 45%); border-radius: 0.6rem; box-shadow: 0 1px 0 color-mix(in srgb, var(--vws-alert-border) 35%, transparent), 0 6px 24px color-mix(in srgb, var(--vws-alert-contrast) 18%, transparent); padding: 0.7rem 1rem; display: flex; align-items: flex-start; gap: 0.65rem; pointer-events: all; min-width: 240px; max-width: min(360px, calc(100vw - 2.5rem)); opacity: 0; transform: translateX(1.5rem); transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1); position: relative; overflow: hidden; } .vws-toast-container.vws-pos-top-start .vws-toast, .vws-toast-container.vws-pos-bottom-start .vws-toast { transform: translateX(-1.5rem); } .vws-toast-container.vws-pos-top-center .vws-toast, .vws-toast-container.vws-pos-bottom-center .vws-toast { transform: translateY(-0.75rem); } .vws-toast.vws-visible { opacity: 1; transform: translateX(0) translateY(0); } .vws-toast-icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; margin-top: 0.05rem; display: flex; align-items: center; justify-content: center; } .vws-toast-icon svg { width: 1.15rem; height: 1.15rem; stroke-width: 2.2; } .vws-toast-icon--success { color: var(--vws-brand-success); } .vws-toast-icon--error { color: var(--vws-brand-danger); } .vws-toast-icon--warning { color: var(--vws-brand-warning); } .vws-toast-icon--info { color: color-mix(in srgb, var(--vws-brand-info) 75%, var(--vws-alert-contrast) 25%); } .vws-toast-body { flex: 1; min-width: 0; } .vws-toast-title { font-size: 0.875rem; font-weight: 600; color: var(--vws-alert-text); line-height: 1.4; word-break: break-word; } /* Barra de progresso do toast */ .vws-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--vws-brand-primary); border-radius: 0 0 0 0.6rem; animation: vwsTimerShrink linear forwards; } .vws-toast-progress--success { background: var(--vws-brand-success); } .vws-toast-progress--error { background: var(--vws-brand-danger); } .vws-toast-progress--warning { background: var(--vws-brand-warning); } .vws-toast-progress--info { background: color-mix(in srgb, var(--vws-brand-info) 75%, var(--vws-alert-contrast) 25%); } /* ================================================================================================ COMPATIBILIDADE COM CHAMADAS LEGADAS ================================================================================================ */ /* Alias de compatibilidade para classes que o swal-handler.js ainda referencia */ .swal2-spacing { /* gap já resolvido pelo flex do .vws-alert-actions — classe mantida por compatibilidade */ } /* ================================================================================================ RESPONSIVIDADE ================================================================================================ */ @media (max-width: 480px) { .vws-alert-popup { padding: 1.75rem 1.25rem 1.5rem; border-radius: 0.7rem; } .vws-alert-title { font-size: 1.1rem; } .vws-alert-icon { width: 3.75rem; height: 3.75rem; } .vws-alert-icon svg { width: 1.85rem; height: 1.85rem; } .vws-alert-actions { flex-direction: column-reverse; } .vws-alert-actions.vws-reverse { flex-direction: column; } .vws-alert-actions .btn { width: 100%; justify-content: center; } .vws-toast { min-width: 0; max-width: calc(100vw - 2rem); } }