/** * Bruztrap - Componente: Modales * * MODAL: * - Base: .modal > .modal-dialogo > .modal-contenido * - Partes: .modal-cabecera, .modal-cuerpo, .modal-pie * - Tamaños: .modal-sm | .modal-lg | .modal-xl | .modal-pantalla | .modal-pantalla-sm * - Posición: .modal-centrado (vertical) * - Sin chrome: .modal-simple (sin cabecera/pie, cerrar flotante) * - Cuerpo con scroll: .modal-cuerpo-scroll * - Pie separado: .modal-pie-separado * - Confirmación: .modal-confirmacion * - Animaciones alternativas: .modal-animacion-zoom | .modal-animacion-slide | .modal-sin-animacion * * BACKDROP: * - Base: .backdrop * * Activación: JS añade .mostrar al .modal y .backdrop * Body: JS añade .modal-abierto al */ /* ======================================== BACKDROP (fondo oscuro) ======================================== */ .backdrop { position: fixed; top: 0; left: 0; z-index: var(--z-modal-fondo); width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; /* Sin .mostrar no intercepta clics */ transition: opacity var(--transicion-normal) ease-out; } .backdrop.mostrar { opacity: 1; pointer-events: auto; } /* ======================================== MODAL - BASE ======================================== */ .modal { position: fixed; top: 0; left: 0; z-index: var(--z-modal); display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } dialog.modal { padding: 0; border: 0; max-width: none; max-height: none; color: inherit; background: transparent; opacity: 0; transition: opacity var(--transicion-normal) ease-out, overlay var(--transicion-normal) allow-discrete, display var(--transicion-normal) allow-discrete; } dialog.modal::backdrop { background-color: transparent; transition: background-color var(--transicion-normal) ease-out, overlay var(--transicion-normal) allow-discrete, display var(--transicion-normal) allow-discrete; } dialog.modal:open, .modal.mostrar:not(dialog) { display: block; } dialog.modal:open { opacity: 1; } dialog.modal:open::backdrop { background-color: rgba(0, 0, 0, 0.5); } @starting-style { dialog.modal:open { opacity: 0; } dialog.modal:open::backdrop { background-color: transparent; } } /* Centrado vertical: el .modal actúa como contenedor flex */ .modal.modal-centrado { display: none; align-items: center; } dialog.modal.modal-centrado:open, .modal.modal-centrado.mostrar:not(dialog) { display: flex; } /* ======================================== MODAL - DIÁLOGO ======================================== */ .modal-dialogo { position: relative; width: auto; margin: 1.75rem auto; max-width: 500px; pointer-events: none; /* Animación de entrada: baja desde arriba y aparece */ transform: translateY(-50px); opacity: 0; transition: transform var(--transicion-normal) ease-out, opacity var(--transicion-normal) ease-out; } .modal.mostrar .modal-dialogo { transform: translateY(0); opacity: 1; } dialog.modal .modal-dialogo { transform: translateY(0); opacity: 1; } dialog.modal.bruzmodal-animando .modal-dialogo { transform: translateY(-50px); opacity: 0; } dialog.modal.bruzmodal-animando.mostrar .modal-dialogo { transform: translateY(0); opacity: 1; } /* Cuando el modal está centrado, el diálogo ocupa todo el ancho disponible */ .modal-centrado .modal-dialogo { margin: auto; width: 100%; } /* ======================================== MODAL - CONTENIDO ======================================== */ .modal-contenido { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: var(--color-blanco); background-clip: padding-box; border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-xl); outline: 0; } /* ======================================== MODAL - CABECERA ======================================== */ .modal-cabecera { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-borde); border-top-left-radius: calc(var(--radio-lg) - 1px); border-top-right-radius: calc(var(--radio-lg) - 1px); } .modal-titulo { margin: 0; font-size: var(--texto-lg); font-weight: var(--peso-semibold); line-height: 1.5; color: var(--color-texto); } .modal-cerrar { padding: 0.5rem; margin: -0.5rem -0.5rem -0.5rem auto; background: transparent; border: 0; border-radius: var(--radio-md); cursor: pointer; opacity: 0.5; transition: opacity var(--transicion-rapida); } .modal-cerrar:hover { opacity: 1; } .modal-cerrar svg { width: 1.25rem; height: 1.25rem; display: block; } /* ======================================== MODAL - CUERPO ======================================== */ .modal-cuerpo { position: relative; flex: 1 1 auto; padding: 1.25rem; font-size: var(--texto-sm); color: var(--color-texto-secundario); } /* Cuerpo con scroll interno */ .modal-cuerpo-scroll { max-height: 400px; overflow-y: auto; } /* ======================================== MODAL - PIE ======================================== */ .modal-pie { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--color-borde); border-bottom-left-radius: calc(var(--radio-lg) - 1px); border-bottom-right-radius: calc(var(--radio-lg) - 1px); } /* Pie con botones a los lados */ .modal-pie-separado { justify-content: space-between; } /* ======================================== MODAL - TAMAÑOS ======================================== */ .modal-sm .modal-dialogo { max-width: 320px; } .modal-lg .modal-dialogo { max-width: 800px; } .modal-xl .modal-dialogo { max-width: 1140px; } /* Pantalla completa */ .modal-pantalla .modal-dialogo { width: 100%; max-width: none; height: 100%; margin: 0; } .modal-pantalla .modal-contenido { height: 100%; border: 0; border-radius: 0; } .modal-pantalla .modal-cuerpo { overflow-y: auto; } /* Pantalla completa solo en móvil */ @media (max-width: 575px) { .modal-pantalla-sm .modal-dialogo { width: 100%; max-width: none; height: 100%; margin: 0; } .modal-pantalla-sm .modal-contenido { height: 100%; border: 0; border-radius: 0; } } /* ======================================== MODAL - SIN CABECERA/PIE (simple) ======================================== */ .modal-simple .modal-cuerpo { padding: 1.5rem; } .modal-simple .modal-cerrar { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; margin: 0; } /* ======================================== DIÁLOGO DE CONFIRMACIÓN ======================================== */ .modal-confirmacion .modal-dialogo { max-width: 400px; } .modal-confirmacion .modal-cuerpo { text-align: center; padding: 1.5rem; } .modal-confirmacion .modal-icono { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; } .modal-confirmacion .modal-icono svg { width: 2rem; height: 2rem; } .modal-confirmacion .modal-icono-exito { background-color: var(--color-exito-claro); color: var(--color-exito); } .modal-confirmacion .modal-icono-peligro { background-color: var(--color-peligro-claro); color: var(--color-peligro); } .modal-confirmacion .modal-icono-aviso { background-color: var(--color-aviso-claro); color: var(--color-aviso); } .modal-confirmacion .modal-icono-info { background-color: var(--color-primario-claro); color: var(--color-primario); } .modal-confirmacion .modal-titulo { font-size: var(--texto-lg); margin-bottom: 0.5rem; } .modal-confirmacion .modal-mensaje { color: var(--color-texto-secundario); font-size: var(--texto-sm); margin: 0; } .modal-confirmacion .modal-pie { justify-content: center; border-top: none; padding-top: 0.5rem; } /* ======================================== ANIMACIONES ALTERNATIVAS ======================================== */ .modal-animacion-zoom:not(dialog) .modal-dialogo, dialog.modal-animacion-zoom.bruzmodal-animando .modal-dialogo { transform: scale(0.8); opacity: 0; } .modal-animacion-zoom.mostrar .modal-dialogo, dialog.modal-animacion-zoom.bruzmodal-animando.mostrar .modal-dialogo { transform: scale(1); opacity: 1; } .modal-animacion-slide:not(dialog) .modal-dialogo, dialog.modal-animacion-slide.bruzmodal-animando .modal-dialogo { transform: translateY(100px); opacity: 0; } .modal-animacion-slide.mostrar .modal-dialogo, dialog.modal-animacion-slide.bruzmodal-animando.mostrar .modal-dialogo { transform: translateY(0); opacity: 1; } .modal-sin-animacion .modal-dialogo { transform: none; opacity: 1; transition: none; } /* ======================================== BODY CON MODAL ABIERTO ======================================== */ /* JS añade esta clase al para bloquear el scroll */ .modal-abierto, body:has(dialog.modal[open]) { overflow: hidden; padding-right: var(--bms-scrollbar, 0px); } /* ======================================== EFECTO ESTÁTICO (sacudida del diálogo) ======================================== */ @keyframes modal-sacudir { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .modal-dialogo.is-static { animation: modal-sacudir 0.18s ease-in-out; }