/* ======================================================== EFECTO 3D FLOTANTE GLOBAL - MODALES Y SWEETALERT Archivo: modal-3d-effects.css Versión: 1.2.0 Fecha: 2025-12-08 ======================================================== */ /* =========================================== TARJETAS DEL PANEL CON EFECTO 3D =========================================== */ /* Tarjetas de estadísticas y acciones rápidas - shadow normal */ .shadow.rounded-lg, .shadow-md.rounded-lg, a.shadow.rounded-lg, div.shadow.rounded-lg, .bg-white.shadow.rounded-lg, .bg-white.overflow-hidden.shadow.rounded-lg { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 24px -4px rgba(0, 0, 0, 0.1), 0 20px 40px -8px rgba(0, 0, 0, 0.08) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Tarjetas con shadow-xl (como "Trae un amigo") - sombra más pronunciada */ .shadow-xl.rounded-lg, div.shadow-xl.rounded-lg, [class*="shadow-xl"][class*="rounded-lg"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.1), 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 35px 70px -15px rgba(0, 0, 0, 0.12) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Efecto hover para tarjetas con shadow-xl */ .shadow-xl.rounded-lg:hover, div.shadow-xl.rounded-lg:hover, [class*="shadow-xl"][class*="rounded-lg"]:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.12), 0 28px 56px -10px rgba(0, 0, 0, 0.18), 0 45px 90px -18px rgba(0, 0, 0, 0.15) !important; transform: translateY(-3px) !important; } /* Efecto hover más pronunciado para tarjetas clickeables */ a.shadow.rounded-lg:hover, a.bg-white.shadow.rounded-lg:hover, a.bg-white.overflow-hidden.shadow.rounded-lg:hover, .shadow.rounded-lg:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.1), 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 30px 60px -12px rgba(0, 0, 0, 0.12) !important; transform: translateY(-2px) !important; } /* =========================================== SOMBRA 3D PRINCIPAL PARA SWEETALERT2 =========================================== */ .swal2-popup, .swal2-popup.swal2-modal, .swal2-mobile-popup, div.swal2-popup, .swal2-popup.swal2-show { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; border-radius: 16px !important; border: none !important; } /* =========================================== CLASES ESPECÍFICAS DE MODALES =========================================== */ /* Modal de política de privacidad */ .privacy-policy-modal, .privacy-policy-modal.swal2-popup { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; } /* Modal de instrucciones de escaneo */ .scan-instructions-modal, .scan-instructions-modal.swal2-popup, .scan-modal-popup { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; } /* Modal de reservas */ .reserva-swal-popup, .reserva-swal-popup.swal2-popup { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; } /* Modal mobile friendly */ .swal-mobile-friendly, .swal-mobile-friendly.swal2-popup { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; } /* =========================================== MODALES BOOTSTRAP Y DIV PERSONALIZADOS =========================================== */ .modal-content, .modal-dialog .modal-content { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; border-radius: 16px !important; border: none !important; } /* Contenedores blancos con sombra (modales personalizados) */ div.bg-white.rounded-lg.shadow-xl, div.bg-white.rounded-xl.shadow-xl, div[class*="bg-white"][class*="rounded"][class*="shadow"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; } /* Modal de escaneo específico */ #scanModal .bg-white, #scanModal > div { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; border-radius: 16px !important; } /* =========================================== ANIMACIONES DE ENTRADA Y SALIDA =========================================== */ /* Animación de entrada flotante */ .swal2-show { animation: modal3DFloatIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @keyframes modal3DFloatIn { 0% { transform: scale(0.85) translateY(40px); opacity: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 100% { transform: scale(1) translateY(0); opacity: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22); } } /* Animación de salida */ .swal2-hide { animation: modal3DFloatOut 0.2s ease-in !important; } @keyframes modal3DFloatOut { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.9) translateY(20px); opacity: 0; } } /* =========================================== SWEETALERT TOAST (NOTIFICACIONES) =========================================== */ .swal2-toast, .swal2-toast.swal2-show { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 20px 40px rgba(0, 0, 0, 0.1) !important; border-radius: 12px !important; } /* =========================================== BACKDROP CON BLUR =========================================== */ .swal2-container.swal2-backdrop-show, .swal2-container, .swal2-shown > .swal2-container { background-color: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } /* Backdrop para modales Bootstrap */ .modal-backdrop.show, .modal-backdrop { background-color: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } /* Backdrop para modales personalizados con fixed */ div.fixed.inset-0[class*="bg-black"], div.fixed.inset-0[class*="bg-gray"] { backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } /* =========================================== SOPORTE PARA MODO OSCURO =========================================== */ @media (prefers-color-scheme: dark) { .swal2-popup, .swal2-popup.swal2-modal, .modal-content { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.3), 0 30px 60px -10px rgba(0, 0, 0, 0.35), 0 50px 100px -20px rgba(0, 0, 0, 0.4) !important; } } /* =========================================== CLASES UTILITARIAS PARA APLICAR MANUALMENTE =========================================== */ .floating-modal, .modal-floating, .shadow-3d { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; border-radius: 16px !important; } /* =========================================== CORRECCIONES DE ESPECIFICIDAD =========================================== */ /* Asegurar que las sombras se apliquen sobre cualquier otro estilo */ html body .swal2-popup, html body .swal2-popup.swal2-modal, html body .swal2-popup.swal2-show, html body div.swal2-popup { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; } /* Sobrescribir sombras pequeñas existentes */ .swal2-popup[style*="box-shadow"], .modal-content[style*="box-shadow"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 0, 0, 0.12), 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 50px 100px -20px rgba(0, 0, 0, 0.22) !important; }