/* SweetAlert2 - Tema Portal UNIR (extraido de boceto-alertas.html) Requiere SweetAlert2 CSS base cargado antes. */ /* Animaciones usadas por el tema */ @keyframes swal-in { 0% { opacity: 0; transform: scale(0.85) translateY(-20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes swal-out { 0% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(0.85) translateY(-20px); } } /* Backdrop */ .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation { background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(4px) !important; } /* Popup base */ .swal2-popup.portal-popup { border-radius: 1rem !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; max-width: 420px !important; width: calc(100% - 2rem) !important; } /* Modo claro */ .swal2-popup.portal-popup { background: #ffffff !important; color: #1e293b !important; } /* Modo oscuro (usa .dark en como tailwind) */ .dark .swal2-popup.portal-popup { background: #1e293b !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Header */ .swal2-popup.portal-popup .swal2-header { padding: 1.5rem 1.5rem 1rem !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; } /* Separador bajo header */ .swal2-popup.portal-popup .swal2-header::after { content: ''; display: block; width: calc(100% + 3rem); margin-left: -1.5rem; height: 1px; background: rgba(0, 0, 0, 0.07); margin-top: 1rem; } .dark .swal2-popup.portal-popup .swal2-header::after { background: rgba(255, 255, 255, 0.07); } /* Icono base */ .swal2-popup.portal-popup .swal2-icon { margin: 0.5rem auto 0.5rem !important; transform: scale(0.85) !important; background: transparent !important; } /* Error (X) */ .swal2-popup.portal-popup .swal2-icon.swal2-error { border-color: #ef4444 !important; color: #ef4444 !important; } .swal2-popup.portal-popup .swal2-icon.swal2-error .swal2-x-mark-line-left, .swal2-popup.portal-popup .swal2-icon.swal2-error .swal2-x-mark-line-right { background-color: #ef4444 !important; } /* Info (i) */ .swal2-popup.portal-popup .swal2-icon.swal2-info { border-color: #0a369d !important; color: #0a369d !important; } .dark .swal2-popup.portal-popup .swal2-icon.swal2-info { border-color: #93c5fd !important; color: #93c5fd !important; } /* Success (✓) */ .swal2-popup.portal-popup .swal2-icon.swal2-success { border-color: #16a34a !important; color: #16a34a !important; } .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(22, 163, 74, 0.25) !important; background: transparent !important; } .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-line-tip, .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-line-long { background-color: #16a34a !important; } .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-circular-line-left, .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-circular-line-right, .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-fix { background-color: #ffffff !important; } .dark .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-circular-line-left, .dark .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-circular-line-right, .dark .swal2-popup.portal-popup .swal2-icon.swal2-success .swal2-success-fix { background-color: #1e293b !important; } /* Warning (!) */ .swal2-popup.portal-popup .swal2-icon.swal2-warning { border-color: #d97706 !important; color: #d97706 !important; } /* Question (?) */ .swal2-popup.portal-popup .swal2-icon.swal2-question { border-color: #d97706 !important; color: #d97706 !important; } /* Animaciones show/hide usando clases default de SweetAlert2 */ .swal2-popup.portal-popup.swal2-show { animation: swal-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; } .swal2-popup.portal-popup.swal2-hide { animation: swal-out 0.2s ease-in both !important; } /* Titulo */ .swal2-popup.portal-popup .swal2-title { font-size: 1.125rem !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; color: inherit !important; } /* Contenido */ .swal2-popup.portal-popup .swal2-html-container { font-size: 0.9rem !important; line-height: 1.65 !important; margin: 0 !important; padding: 1rem 1.5rem !important; color: #475569 !important; text-align: left !important; } .dark .swal2-popup.portal-popup .swal2-html-container { color: #94a3b8 !important; } /* Acciones */ .swal2-popup.portal-popup .swal2-actions { padding: 0 1.5rem 1.5rem !important; gap: 0.625rem !important; margin: 0 !important; flex-wrap: nowrap !important; } /* Botones base */ .swal2-popup.portal-popup .swal2-confirm:not([style*="display: none"]), .swal2-popup.portal-popup .swal2-cancel:not([style*="display: none"]), .swal2-popup.portal-popup .swal2-deny:not([style*="display: none"]) { border-radius: 0.625rem !important; font-size: 0.875rem !important; font-weight: 600 !important; padding: 0.6rem 1.4rem !important; transition: all 0.2s ease !important; box-shadow: none !important; display: flex !important; align-items: center !important; gap: 0.375rem !important; } /* Confirm */ .swal2-popup.portal-popup .swal2-confirm { background: #0a369d !important; color: #fff !important; } .swal2-popup.portal-popup .swal2-confirm:hover { background: #083080 !important; transform: translateY(-1px) !important; } .swal2-popup.portal-popup .swal2-confirm:active { transform: translateY(0) !important; } /* Cancel */ .swal2-popup.portal-popup .swal2-cancel { background: #f1f5f9 !important; color: #475569 !important; } .dark .swal2-popup.portal-popup .swal2-cancel { background: #334155 !important; color: #cbd5e1 !important; } .swal2-popup.portal-popup .swal2-cancel:hover { background: #e2e8f0 !important; transform: translateY(-1px) !important; } .dark .swal2-popup.portal-popup .swal2-cancel:hover { background: #475569 !important; } /* Variantes */ .swal2-popup.portal-popup.tipo-error .swal2-header { background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%) !important; } .dark .swal2-popup.portal-popup.tipo-error .swal2-header { background: linear-gradient(135deg, #2d1a1a 0%, #3b1f1f 100%) !important; } .swal2-popup.portal-popup.tipo-error .swal2-title { color: #b91c1c !important; } .dark .swal2-popup.portal-popup.tipo-error .swal2-title { color: #fca5a5 !important; } .swal2-popup.portal-popup.tipo-error .swal2-confirm { background: #dc2626 !important; } .swal2-popup.portal-popup.tipo-error .swal2-confirm:hover { background: #b91c1c !important; } .swal2-popup.portal-popup.tipo-info .swal2-header { background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important; } .dark .swal2-popup.portal-popup.tipo-info .swal2-header { background: linear-gradient(135deg, #1a2540 0%, #1e3050 100%) !important; } .swal2-popup.portal-popup.tipo-info .swal2-title { color: #0a369d !important; } .dark .swal2-popup.portal-popup.tipo-info .swal2-title { color: #93c5fd !important; } .swal2-popup.portal-popup.tipo-exito .swal2-header { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important; } .dark .swal2-popup.portal-popup.tipo-exito .swal2-header { background: linear-gradient(135deg, #14281e 0%, #1a3428 100%) !important; } .swal2-popup.portal-popup.tipo-exito .swal2-title { color: #15803d !important; } .dark .swal2-popup.portal-popup.tipo-exito .swal2-title { color: #86efac !important; } .swal2-popup.portal-popup.tipo-exito .swal2-confirm { background: #16a34a !important; } .swal2-popup.portal-popup.tipo-exito .swal2-confirm:hover { background: #15803d !important; } .swal2-popup.portal-popup.tipo-advertencia .swal2-header { background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%) !important; } .dark .swal2-popup.portal-popup.tipo-advertencia .swal2-header { background: linear-gradient(135deg, #2d2208 0%, #352a10 100%) !important; } .swal2-popup.portal-popup.tipo-advertencia .swal2-title { color: #b45309 !important; } .dark .swal2-popup.portal-popup.tipo-advertencia .swal2-title { color: #fcd34d !important; } .swal2-popup.portal-popup.tipo-advertencia .swal2-confirm { background: #d97706 !important; } .swal2-popup.portal-popup.tipo-advertencia .swal2-confirm:hover { background: #b45309 !important; } /* Focus */ .swal2-popup.portal-popup *:focus { outline: none !important; box-shadow: none !important; } /* Ocultar el X default */ .swal2-popup.portal-popup .swal2-close { display: none !important; }