propio —#napseReusableModalBody
de napse.html— deja ese div con alto automático, o sea el alto de la tarjeta:
el `min-height: 100%` del gate se resuelve contra `auto`, no hace nada, y la
tarjeta queda pegada arriba con medio panel vacío abajo.
Va acá y no en lp-config.css porque depende del modal: el cuerpo del
es lo que tiene alto definido, y los hijos ranurados son hijos
directos del . */
.lp-modal > :has(> .lp-gate) {
height: 100%;
}
html.sl-scroll-lock {
overflow: hidden;
padding-right: var(--sl-scroll-lock-size, 0px);
}
/* ── ANTES DE QUE SHOELACE CARGUE ─────────────────────────────────────────
Los modales se montan en el ni bien arranca la pagina, pero el
autoloader de Shoelace registra `sl-dialog` recien cuando lo VE en el DOM y
trae el modulo por red. En ese rato el navegador lo trata como una etiqueta
desconocida —un `display: inline` cualquiera— y PINTA SUS HIJOS: el contenido
del modal aparece suelto al final de la pagina, abajo del footer.
Se veia clarito en e3StoresOmni.html: al recargar, la tarjeta de "Acceso
restringido — Ingresá la clave" quedaba colgada abajo de todo hasta que
terminaba de bajar Shoelace.
`:not(:defined)` matchea solo mientras el custom element no esta registrado,
y deja de aplicar solo. No hace falta JS ni una clase que alguien tenga que
sacar. Va sin `.lp-modal` a proposito: el problema es de CUALQUIER dialogo,
incluidos los que arma LogiAvisos. */
sl-dialog:not(:defined),
sl-drawer:not(:defined),
sl-alert:not(:defined) {
display: none;
}
/* Shoelace trae el ancho por defecto en 31rem (~496px), que queda chico para
tablas y formularios. --width es la custom property oficial del componente. */
.lp-modal {
--width: min(1100px, 92vw);
}
/* Shoelace oscurece con --sl-overlay-background-color, que por defecto es muy
suave (~43% de negro) y no trae blur. Se oscurece mas y se desenfoca el fondo
para que el modal despegue de la pagina. */
.lp-modal::part(overlay) {
background-color: rgba(15, 23, 42, 0.62);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
.sl-theme-dark .lp-modal::part(overlay) {
background-color: rgba(2, 6, 23, 0.72);
}
/* Alto fijo, tambien con el modal vacio: asi no salta de tamaño cada vez que
carga o cambia el contenido. Va height y max-height con el mismo valor porque
Shoelace ya trae su propio max-height y si no, gana el suyo. */
.lp-modal::part(panel) {
height: min(80vh, 820px);
max-height: min(80vh, 820px);
}
/* El header y el footer quedan fijos; scrollea solo el contenido.
El `color` NO es decorativo: todo lo que va adentro del modal es light DOM y
hereda del de la pagina, que en este sitio lo pinta Bootstrap 4.5
(`body{color:#212529}`). En modo oscuro eso daba texto casi negro sobre panel
negro —medido 1.12:1— en cualquier elemento que no declarara su propio color.
Con esto quedan blindados todos los modales del sistema de una. */
/* `position: relative` NO es decorativo: hace del cuerpo el marco de referencia
de todo lo que adentro este posicionado en absoluto.
Un modal de este sitio suele traer una capa de "cargando" con
`position: absolute; inset: 0` y un `backdrop-filter` — la
`.napse-modal-loader`, por ejemplo—. En los modales de Bootstrap esa capa se
media contra el `div.modal-body`, que era su ancestro posicionado. Al pasar a
sl-dialog ese div desaparece, y sin nadie posicionado en el medio el `inset:
0` se resuelve contra el VIEWPORT: la capa tapa la pantalla entera y el blur
se come tambien el modal y la pagina. Se ve como si el overlay estuviera roto.
Con esto la capa queda encerrada en el cuerpo del modal, que es donde va. */
.lp-modal::part(body) {
position: relative;
overflow-y: auto;
color: var(--sl-color-neutral-900);
}
/* ── mientras carga, el cuerpo no scrollea ni muestra su barra ────────────
La capa de "cargando" tapa el cuerpo entero, pero el cuerpo SEGUIA siendo
scrolleable: quedaba la barra vertical del modal a la derecha, con las
flechitas del sistema, al lado de un contenido borroso que no se puede ni
leer ni tocar. Se ve como un error.
Mientras la capa este visible el cuerpo va en `overflow: hidden`. Al
ocultarse la capa —le sacan el atributo `hidden`— la barra vuelve sola.
Los nombres de clase son los que ya existen en el markup de las paginas.
`napse-modal-loader` esta tanto en napse.html como en producteca.html: el
prefijo dice de donde salio, no de quien es, igual que `e3cfg-*`. Si
aparece una tercera, se suma a esta lista.
`:has()` pide Chrome 105. Si hiciera falta soportar mas atras, la
alternativa es que el JS que muestra la capa ponga una clase en el dialogo. */
.lp-modal:has(> .lp-gate:not([hidden])),
.lp-modal:has(> .napse-modal-loader:not([hidden]))::part(body),
.lp-modal:has(> .producteca-detail-modal-loader:not([hidden]))::part(body),
.lp-modal:has(> .cmeli-stats-overlay:not([hidden]))::part(body) {
overflow: hidden;
}
/* ── cabecera ──────────────────────────────────────────────────────────────
El titulo NO se leia en modo oscuro. Son dos cosas distintas y hacen falta
las dos:
1. `::part(title)` es el del shadow DOM. Sin color propio hereda el que
trae el panel y, con una pagina que pinta su propio color de texto, salia
negro sobre panel negro. Es el mismo arreglo que ya estaba en
css/avisos.css para `.lp-dialog::part(title)`, que nunca llego aca porque
el modal del sistema es `.lp-modal`, no `.lp-dialog`.
2. El texto del titulo suele venir en un ``, que es LIGHT
DOM: no hereda del panel sino del de la pagina. Por eso hay que
pintarlo aparte — con arreglar solo el ::part() se seguia sin ver. */
.lp-modal::part(title) {
color: var(--sl-color-neutral-900);
font-size: var(--sl-font-size-large);
font-weight: var(--sl-font-weight-semibold);
}
.lp-modal > [slot="label"],
.lp-modal > [slot="label"] * {
color: var(--sl-color-neutral-900);
}
.lp-modal::part(header) {
border-bottom: 1px solid var(--sl-color-neutral-200);
}
/* La cruz de cerrar y los botones de la cabecera: el gris neutro del tema, no
el color heredado de la pagina. */
.lp-modal::part(close-button__base) {
color: var(--sl-color-neutral-500);
}
.lp-modal::part(close-button__base):hover {
color: var(--sl-color-neutral-900);
}
/* Un formulario corto crece con el contenido en vez de usar el alto fijo de
arriba: con tres campos, 820px de alto es todo aire. */
.lp-modal--form {
--width: min(560px, 92vw);
}
.lp-modal--form::part(panel) {
height: auto;
max-height: 88vh;
}
/* Contenido corto que SÍ necesita el ancho del modal estándar (una grilla de
dos columnas, por ejemplo) pero no su alto fijo: crece con el contenido
con el MISMO tope que el default de arriba, min(80vh, 820px), así nunca
se pasa de alto en una pantalla chica. A diferencia de .lp-modal--form,
ÉSTA NO TOCA EL ANCHO — --form además angosta el modal a 560px, que le
queda chico a una grilla de dos columnas. Ejemplo real: el modal de
"Detalle de la venta" de meliAr.html (js/meliAr/meliArTarjetaVista.js),
cuyos paneles miden menos que el alto fijo y dejaban medio modal de aire
abajo. napse.html y e3StoresOmni.html no usan esta clase y siguen con el
alto fijo de siempre — no se les toca el comportamiento por defecto. */
.lp-modal--auto-height::part(panel) {
height: auto;
max-height: min(80vh, 820px);
}
/* Modal ANGOSTO. El ancho por defecto, min(1100px, 92vw), está pensado para una
tabla; un modal de una sola columna —una lista de opciones, un formulario
corto, un paso de asistente— a 1100 px deja tres palabras por renglón
perdidas en el ancho.
Va ACÁ y no en el CSS de la página a propósito: css/ui/ carga ÚLTIMO y le
gana a las hojas de página, así que una regla suelta en styles.css que
intente pisar `--width` no tiene efecto. La forma de pedir algo distinto es
un modificador del componente compartido. */
.lp-modal--angosto {
--width: min(620px, 92vw);
}
/* Modificador: a PANTALLA COMPLETA (24-09-2026). La segunda excepción al alto fijo, después de la
consulta SQL de napse.html (.napse-sql-fs-modal): «Devoluciones Novogar» de posventaOmni.html abre
así y un botón de la cabecera lo achica al tamaño normal (se recuerda por PC). Sin el modificador,
el modal es el de siempre. */
.lp-modal.lp-modal--pantalla {
--width: 100vw;
}
.lp-modal.lp-modal--pantalla::part(base) {
padding: 0;
}
.lp-modal.lp-modal--pantalla::part(panel) {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
/* En mobile ocupa la pantalla entera. --width sola no alcanza: solo controla el
ancho, y el alto, el padding del overlay y los bordes redondeados viven en el
shadow DOM del componente, al que solo se llega por ::part(). */
@media (max-width: 768px) {
.lp-modal {
--width: 100%;
}
/* Sin esto queda el margen del overlay alrededor del panel. */
.lp-modal::part(base) {
padding: 0;
}
.lp-modal::part(panel) {
width: 100%;
max-width: 100%;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
}
/* ── El modal ES el contenedor: nada adentro vuelve a ser tarjeta ──────────
(21-08-2026)
`css/theme.css:119` le pone la "tarjeta de vidrio" iOS —fondo translúcido,
borde, sombra de 60 px, radio 22, margen automático y padding— a TODO
`