/* ============================================================================== CRM-GREU — Components: Modal Extraído de components.css — ver ese archivo para las reglas realmente comunes/transversales que no encajan en ninguna estructura concreta. ============================================================================== */ /* --- Modal ----------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(7, 20, 38, 0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 700; opacity: 1; transition: opacity 0.15s ease-out; } .modal-overlay.hidden { display: none; } /* Segunda capa apilada (ver #modal-overlay-2 en layouts/app.php) — mismo fondo/centrado que .modal-overlay, solo por encima del primero. */ #modal-overlay-2 { z-index: 750; } .modal-container { background: var(--color-surface-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet); width: 90%; max-width: 70vh; max-height: 85vh; display: flex; flex-direction: column; animation: modalScaleIn 0.36s cubic-bezier(.16, 1, .3, 1); } /* Trayectoria "scale" (default, ver [data-motion] en , layouts/app.php) — crece mientras asciende, una sola curva de frenado, sin overshoot: la curva (.16,1,.3,1) no pasa de y=1 en ningún punto. */ @keyframes modalScaleIn { from { transform: translateY(64px) scale(.65); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Trayectoria "genie" — aproximación CSS al efecto de macOS (Dock → ventana): no es un warp real (eso requeriría deformar geometría por debajo del nivel de `clip-path`), pero recorta el contenedor en una silueta irregular que nace de un punto abajo y se despliega hasta el rectángulo completo. Asimetría deliberada en los pasos intermedios (nunca un trapecio perfecto) para que se lea como algo orgánico, no como una figura geométrica con nombre — ver arbitraje en docs/history/ (se descartó explícitamente ir hacia humo/mask-image: decoración sin función y coste de render no cerrado en .sheet-container, contra motion-dynamics/ AGENT.md). Sin overshoot en ningún eje. */ html[data-motion="genie"] .modal-container { animation: modalGenieIn 0.36s cubic-bezier(.22, 1, .36, 1); } @keyframes modalGenieIn { 0% { clip-path: polygon(44% 100%, 49% 99%, 53% 100%, 50% 98%); transform: translateY(20px); opacity: 0; } 30% { clip-path: polygon(22% 62%, 38% 48%, 58% 52%, 74% 44%, 84% 70%, 70% 100%, 40% 97%, 18% 100%); transform: translateY(12px); opacity: .8; } 60% { clip-path: polygon(3% 22%, 40% 10%, 97% 18%, 100% 55%, 100% 100%, 0% 100%, 0% 60%); transform: translateY(4px); opacity: 1; } 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: translateY(0); opacity: 1; } } /* Reduced-motion del modal GENÉRICO (fade del overlay + slide del container) — antes solo existía para la variante .doc-alert-modal, más abajo en este archivo; esto cubre todos los demás modales de la app, que se quedaban sin cubrir. Debe aparecer en su posición final sin fade ni slide, misma información sin trayectoria. */ @media (prefers-reduced-motion: reduce) { .modal-overlay { transition: none; } .modal-container { animation: none; transform: none; } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--color-border-soft); } .modal-header h3 { font-size: 16px; font-weight: 600; } .modal-close { background: none; border: none; font-size: 20px; color: var(--color-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-xs); transition: background 0.15s; } .modal-close:hover { background: var(--color-bg); color: var(--color-text); } .modal-body { padding: 24px; overflow-y: auto; flex: 1; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--color-border-soft); } /* --- Modal overrides for schedule modals / file preview --- */ .modal-container.modal-lg { max-width: 900px; } /* Modal ancho tipo "hoja de cálculo" (p.ej. oferta con tabla de líneas, ver offers.php) — porcentaje del viewport en vez de un px fijo, para que aproveche pantallas grandes sin quedar innecesariamente ancho en las pequeñas. */ .modal-container.modal-xl { max-width: 80%; } /* Overlay genérico para formularios de modal cuyos