/* Formularios en ventana (modal.js): botón en la página y ventana centrada sobre todo el contenido. */
.maew-modal-open { overflow: hidden; }

#maew-app .mx-modal-launch { display: flex; justify-content: flex-start; margin: 0 0 16px; }
#maew-app .mx-modal-launch.is-panel { margin: 0 0 22px; }
#maew-app .maew-process-record .mx-modal-launch { display: inline-flex; margin: 0 8px 8px 0; }

/* Cerrada, la ventana no ocupa lugar. El navegador ya la oculta, pero el tema (Hello Elementor, reset.css: details{display:block})
   y cualquier estilo de módulo que defina display ganarían a esa regla interna; por eso se fuerza aquí. */
#maew-app .mx-modal:not(:popover-open) { display: none !important; }
/* La ventana: el mismo elemento de siempre, mostrado en la capa superior. */
#maew-app .mx-modal:popover-open {
	position: fixed; inset: 0; margin: auto;
	width: min(680px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 48px);
	overflow: auto; overscroll-behavior: contain;
	padding: 24px 26px 26px; border: 0; border-radius: 24px;
	background: #fff; color: #202322; box-shadow: 0 30px 80px rgba(20, 24, 22, .28), 0 4px 14px rgba(20, 24, 22, .08);
	animation: none; transform: none; opacity: 1;
}
#maew-app .mx-modal::backdrop { background: rgba(20, 24, 22, .46); backdrop-filter: blur(2px); }
#maew-app.maew-motion .mx-modal:popover-open { animation: mx-modal-in .34s cubic-bezier(.34, 1.56, .64, 1); }
#maew-app.maew-motion .mx-modal:popover-open::backdrop { animation: mx-modal-fade .25s ease; }
@keyframes mx-modal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mx-modal-fade { from { opacity: 0; } }

/* Dentro de la ventana el título del desplegable lo pone el encabezado. */
#maew-app details.mx-modal:popover-open > summary { display: none; }
#maew-app .mx-modal:popover-open > .mx-modal__head { display: flex; }
#maew-app .mx-modal__head { display: none; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #ecefe9; }
#maew-app .mx-modal__head .maew-eyebrow { margin: 0 0 4px; color: #6b746c; font-size: 10px; letter-spacing: .08em; }
#maew-app .mx-modal__head .maew-eyebrow:empty { display: none; }
#maew-app .mx-modal__head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
#maew-app .mx-modal__head.is-compact { position: absolute; top: 14px; right: 14px; margin: 0; padding: 0; border: 0; }
#maew-app .mx-modal__head.is-compact > div { display: none; }
#maew-app .mx-modal__close { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e1e5df; border-radius: 50%; background: #fff; color: #202322; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
#maew-app .mx-modal__close:hover { background: #f2f2f0; }
#maew-app .mx-modal__title { margin-top: 0; padding-right: 48px; }

/* Formularios dentro de la ventana: dos columnas cómodas y acciones al final. */
#maew-app .mx-modal:popover-open > form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: end; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
/* Cuando el formulario mismo es la ventana conserva el fondo, el margen y el centrado de la ventana. */
#maew-app form.mx-modal:popover-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
#maew-app .mx-modal:popover-open > form > :is(h2, h3, h4, p, fieldset, textarea, .maew-process-materials, .maew-field-help, .maew-process-check),
#maew-app form.mx-modal:popover-open > :is(.mx-modal__head, h2, h3, h4, p, fieldset, .maew-process-materials, .maew-field-help),
#maew-app .mx-modal:popover-open > form label:has(textarea),
#maew-app .mx-modal:popover-open > form > :is(button, .maew-btn):last-child { grid-column: 1 / -1; }
/* Guardar y Cancelar quedan lado a lado al final de la ventana. */
#maew-app form.mx-modal:popover-open > :is(button, .maew-btn) { grid-column: auto; justify-self: start; width: auto; min-width: 140px; }
#maew-app .mx-modal:popover-open > form label,
#maew-app form.mx-modal:popover-open label { display: grid; gap: 5px; min-width: 0; font-size: 12px; font-weight: 600; }
#maew-app .mx-modal:popover-open :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { width: 100%; box-sizing: border-box; }
#maew-app .mx-modal:popover-open > p { margin: 0 0 14px; color: #626967; font-size: 13px; }
#maew-app .mx-modal:popover-open :is(button[type=submit], button:not([type])) { justify-self: start; }

@media (max-width: 640px) {
	#maew-app .mx-modal:popover-open { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 20px 16px; border-radius: 20px; }
	#maew-app .mx-modal:popover-open > form,
	#maew-app form.mx-modal:popover-open { grid-template-columns: 1fr; }
}
@media print { #maew-app .mx-modal-launch { display: none; } }

/* El tema (reset.css) pinta de rosado #c36 todo botón en :hover y :focus. */
#maew-app .mx-modal__close:is(:hover, :focus) { background: #f2f2f0; color: #202322; }

/* Ventanas amplias para fichas con tablas (por ejemplo, el detalle de un pedido). */
#maew-app .mx-modal--wide:popover-open { width: min(1180px, calc(100vw - 32px)); }