/* ============================================================================
MOD-277 · OMNIA XPLOD
----------------------------------------------------------------------------
TODO acotado a `#page-xplod` y a `#xp-tip` (el globo, que se posiciona con
`position:fixed` y por eso se lista aparte). Las clases van prefijadas con
`xp-` porque este módulo comparte pantalla con el resto de OMNIA y clases
genéricas como `.top` o `.item` chocarían con el CSS global.
El día/noche NO es propio: se hereda de `html[data-mode="noche"]`, igual que
FlexWall. La base es la noche —el tema por defecto de OMNIA— y el día se
pinta encima.
El módulo vive DENTRO de `#page-content`, que ya trae su scroll y su espacio
para el riel de FABs: nada de `position:fixed` ni `100vh` a secas, salvo el
velo del modal y el globo, que sí deben salirse del flujo.
========================================================================== */
/* ── Tema ─────────────────────────────────────────────────────────────────── */
#page-xplod, #xp-tip{
--bg:#0a0a0c; --bg2:#111116; --bg3:#17171e; --bg4:#1d1d26;
--bd:#26262f; --bd2:#33333f;
--tx:#e9e9f0; --tx2:#9b9bab; --tx3:#6a6a78;
--ac:#2dd4bf; --acTx:#06231f;
--er:#f87171; --erBg:rgba(248,113,113,.10);
--tipBg:#1e1e28; --tipBd:#3a3a48;
--velo:rgba(0,0,0,.66);
--r:12px; --rs:9px;
}
html:not([data-mode="noche"]) #page-xplod,
html:not([data-mode="noche"]) #xp-tip{
--bg:#f5f6f8; --bg2:#ffffff; --bg3:#f0f1f4; --bg4:#e7e9ed;
--bd:#e1e3e8; --bd2:#cccfd7;
--tx:#15171c; --tx2:#5a606c; --tx3:#8a90a0;
--ac:#0d9488; --acTx:#ffffff;
--er:#dc2626; --erBg:rgba(220,38,38,.08);
--tipBg:#22242c; --tipBd:#33353f;
--velo:rgba(20,25,40,.42);
}
#page-xplod *{box-sizing:border-box}
#page-xplod button, #page-xplod input, #page-xplod select, #page-xplod textarea{font:inherit}
/* El atributo `hidden` vale menos que cualquier `display` declarado, y aquí hay
varios (`#xp-foto{display:block}`, `.xp-sinimg{display:flex}`). Sin esto, la
imagen vacía y el estado "sube una imagen" se pintaban ENCIMADOS: se veía el
texto alternativo del `![]()
` roto junto al mensaje. Devolverle a `hidden` su
significado es más barato que recordar apagar cada `display` a mano. */
#page-xplod [hidden]{display:none !important}
/* ── Altura ───────────────────────────────────────────────────────────────
El módulo se estira al alto REAL de su contenedor. La cadena está completa
y es la misma que `app.css` ya usa para Cash Flow y Sourcer, que llevan
meses funcionando:
#app height:calc(100vh - banner) flex row
#main flex:1 flex column
#page-content flex:1 altura resuelta
.page.active height:100% ← esto
HISTORIA, para que nadie lo vuelva a "arreglar":
1º `height:calc(100vh - 118px)`, copiado de FlexWall. Ese 118 supone un
topbar y un padding concretos; con otra pantalla sobra o falta.
2º Esto mismo, `height:100%`, y pareció no funcionar.
3º Se midió desde JavaScript. Peor: la medida se tomaba antes de que el
navegador terminara de colocar todo y salía una caja aún más chica.
El 2º SÍ era correcto. Lo que fallaba era otra cosa: las hojas de estilo no
llevaban `?v=` y el navegador seguía sirviendo el CSS viejo de su caché
(`/css/**` tampoco tenía regla en Hosting). El arreglo estaba desplegado y
nunca llegaba. Se corrigió en `build.js`, que ahora estampa el hash del
build en cada `` — para TODA la aplicación, no sólo para este módulo.
Moraleja: si un cambio de CSS "no hace nada", comprueba primero que el
navegador lo esté leyendo. */
.page.active#page-xplod{display:flex; flex-direction:column; height:100%; min-height:520px}
#page-xplod .xp-wrap{
background:var(--bg); color:var(--tx);
border:1px solid var(--bd); border-radius:var(--r); overflow:hidden;
flex:1; min-height:0;
display:flex; flex-direction:column;
}
/* ── Cabecera ─────────────────────────────────────────────────────────────── */
#page-xplod .xp-top{
display:flex; align-items:center; gap:14px; padding:12px 16px;
background:var(--bg2); border-bottom:1px solid var(--bd);
}
#page-xplod .xp-marca{display:flex; align-items:center; gap:10px}
/* Identidad aprobada. Las dos versiones del símbolo están en el DOM y el tema
decide cuál se ve: así no hay parpadeo al cambiar de día a noche, y ninguna
se recolorea con CSS —cada archivo trae sus propios valores. Se reserva el
tamaño con `width`/`height` para que la cabecera no dé un salto al cargar. */
#page-xplod .xp-simbolo{display:block; width:26px; height:26px; flex:0 0 auto}
#page-xplod .xp-oscuro{display:none}
html[data-mode="noche"] #page-xplod .xp-claro{display:none}
html[data-mode="noche"] #page-xplod .xp-oscuro{display:block}
#page-xplod .xp-marca b{display:block; font-size:13px; line-height:1.15; letter-spacing:.04em}
#page-xplod .xp-marca small{display:block; font-size:10px; color:var(--tx3); letter-spacing:.02em}
#page-xplod .xp-sep{width:1px; height:26px; background:var(--bd)}
#page-xplod .xp-est{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--tx3)}
#page-xplod .xp-est i{width:7px; height:7px; border-radius:50%; background:var(--ac); flex:0 0 auto}
#page-xplod .xp-est.guardando i{background:#f59e0b; animation:xp-lat 1s ease-in-out infinite}
@keyframes xp-lat{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){#page-xplod .xp-est.guardando i{animation:none; opacity:.6}}
#page-xplod .xp-top-der{margin-left:auto; display:flex; align-items:center; gap:8px}
/* ── Botones ──────────────────────────────────────────────────────────────── */
#page-xplod .xp-b{
background:var(--bg3); border:1px solid var(--bd); color:var(--tx);
padding:7px 13px; border-radius:var(--rs); font-size:12.5px; cursor:pointer;
transition:background .15s, border-color .15s, color .15s; white-space:nowrap;
}
#page-xplod .xp-b:hover:not(:disabled){background:var(--bg4); border-color:var(--bd2)}
#page-xplod .xp-b:disabled{opacity:.45; cursor:not-allowed}
#page-xplod .xp-b-pri{background:var(--ac); border-color:var(--ac); color:var(--acTx); font-weight:600}
#page-xplod .xp-b-pri:hover:not(:disabled){filter:brightness(1.08); background:var(--ac)}
#page-xplod .xp-b-dan{color:var(--er); border-color:var(--bd)}
#page-xplod .xp-b-dan:hover:not(:disabled){background:var(--erBg); border-color:var(--er)}
#page-xplod .xp-b-dan .fa-skull{margin-right:5px; font-size:11.5px}
#page-xplod .xp-ancho{width:100%; margin-top:14px}
#page-xplod .xp-file{display:inline-flex; align-items:center; cursor:pointer}
#page-xplod .xp-ico{
width:28px; height:28px; border-radius:8px; background:var(--bg3);
border:1px solid var(--bd); color:var(--tx2); font-size:16px; line-height:1; cursor:pointer;
}
#page-xplod .xp-ico:hover{color:var(--ac); border-color:var(--ac)}
#page-xplod .xp-txtb{background:none; border:0; color:var(--tx3); font-size:12px; cursor:pointer; text-decoration:underline}
#page-xplod .xp-txtb:hover{color:var(--er)}
#page-xplod :focus-visible{outline:2px solid var(--ac); outline-offset:2px}
/* ── Estructura ───────────────────────────────────────────────────────────── */
/* `min-height:0` en cada eslabón: sin él, un hijo con contenido largo estira la
rejilla en vez de recortarse y aparecer su propio scroll. Es la trampa clásica
de flex/grid anidados. */
#page-xplod .xp-shell{display:grid; grid-template-columns:236px minmax(0,1fr); flex:1; min-height:0}
#page-xplod .xp-cat{border-right:1px solid var(--bd); background:var(--bg2); display:flex; flex-direction:column; min-height:0}
#page-xplod .xp-cab{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:12px 14px; border-bottom:1px solid var(--bd);
}
#page-xplod .xp-cab span{display:block; font-size:10px; letter-spacing:.14em; color:var(--tx3); font-weight:600}
#page-xplod .xp-cab b{display:block; font-size:14px; font-weight:600}
#page-xplod .xp-cat-lista{flex:1; overflow:auto; padding:6px; min-height:0}
#page-xplod .xp-cat-pie{padding:10px 14px; border-top:1px solid var(--bd); color:var(--tx3); font-size:11px}
#page-xplod .xp-mitem{
display:flex; align-items:center; gap:9px; width:100%; text-align:left;
background:none; border:1px solid transparent; border-radius:var(--rs);
padding:7px 8px; cursor:pointer; transition:background .12s, border-color .12s;
}
#page-xplod .xp-mitem:hover{background:var(--bg3)}
#page-xplod .xp-mitem.on{background:var(--bg3); border-color:var(--ac)}
#page-xplod .xp-thumb{
flex:0 0 32px; height:32px; border-radius:8px; background:var(--bg4) center/cover no-repeat;
display:flex; align-items:center; justify-content:center;
font-size:10px; font-weight:700; color:var(--tx3); letter-spacing:.04em;
}
#page-xplod .xp-mcopy{min-width:0; flex:1}
#page-xplod .xp-mcopy b{display:block; font-size:12.5px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#page-xplod .xp-mcopy small{display:block; font-size:10.5px; color:var(--tx3)}
#page-xplod .xp-pt{flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--bd2)}
#page-xplod .xp-pt.pub{background:var(--ac)}
/* ── Barra del modelo ─────────────────────────────────────────────────────── */
#page-xplod .xp-work{display:flex; flex-direction:column; min-width:0; min-height:0}
/* Catálogo vacío. No se siembra nada: la herramienta existe para armar cada
producto a mano, así que lo único que se ofrece es empezar. */
#page-xplod .xp-nada{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; padding:40px 24px; text-align:center;
}
/* Aquí sí cabe el logotipo completo; en el encabezado iría comprimido. */
#page-xplod .xp-logotipo{display:block; width:min(240px,54vw); height:auto; margin-bottom:6px; opacity:.92}
#page-xplod .xp-nada span{font-size:34px; color:var(--tx3); opacity:.5}
#page-xplod .xp-nada b{font-size:16px; font-weight:600}
#page-xplod .xp-nada p{margin:0 0 6px; color:var(--tx3); font-size:13px; max-width:44ch; line-height:1.55}
#page-xplod .xp-barra{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:12px 16px; border-bottom:1px solid var(--bd); background:var(--bg2);
}
#page-xplod .xp-tit{display:flex; align-items:center; gap:10px; min-width:0; flex:1}
#page-xplod .xp-badge{
background:var(--bg4); border:1px solid var(--bd); color:var(--tx2);
font-size:10px; letter-spacing:.1em; font-weight:700; padding:4px 8px; border-radius:6px; white-space:nowrap;
}
#page-xplod #xp-nombre{
background:none; border:1px solid transparent; color:var(--tx);
font-size:16px; font-weight:600; padding:5px 8px; border-radius:var(--rs); min-width:120px; flex:1;
}
#page-xplod #xp-nombre:hover:not(:disabled){border-color:var(--bd)}
#page-xplod #xp-nombre:focus{border-color:var(--ac); background:var(--bg3); outline:none}
#page-xplod .xp-slug{font-size:11.5px; color:var(--tx3); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap}
#page-xplod .xp-acc{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#page-xplod #xp-aplic-sel{
background:var(--bg3); border:1px solid var(--bd); color:var(--tx);
padding:7px 10px; border-radius:var(--rs); font-size:12.5px;
}
/* ── Rejilla de trabajo ───────────────────────────────────────────────────── */
#page-xplod .xp-grid{display:grid; grid-template-columns:224px minmax(0,1fr) 300px; gap:0; align-items:stretch; flex:1; min-height:0}
#page-xplod .xp-puntos{border-right:1px solid var(--bd); display:flex; flex-direction:column; min-width:0; min-height:0}
#page-xplod .xp-add{
background:var(--ac); border:0; color:var(--acTx); font-size:11.5px; font-weight:600;
padding:6px 10px; border-radius:7px; cursor:pointer; white-space:nowrap;
}
#page-xplod .xp-add.on{background:var(--er); color:#fff}
#page-xplod .xp-busca{
display:flex; align-items:center; gap:7px; margin:8px 10px;
background:var(--bg3); border:1px solid var(--bd); border-radius:var(--rs); padding:6px 9px;
}
#page-xplod .xp-busca span{color:var(--tx3); font-size:13px}
#page-xplod .xp-busca input{flex:1; background:none; border:0; color:var(--tx); font-size:12.5px; outline:none; min-width:0}
#page-xplod .xp-plista{flex:1; overflow:auto; padding:0 6px 8px; min-height:0}
#page-xplod .xp-pitem{
display:flex; align-items:center; gap:8px; width:100%; text-align:left;
background:none; border:1px solid transparent; border-radius:var(--rs);
padding:6px 7px; cursor:pointer;
}
#page-xplod .xp-pitem:hover{background:var(--bg3)}
#page-xplod .xp-pitem.on{background:var(--bg3); border-color:var(--ac)}
#page-xplod .xp-pitem.off{opacity:.5}
#page-xplod .xp-pn{
flex:0 0 24px; height:24px; border-radius:7px; background:var(--bg4);
color:var(--tx2); font-size:10.5px; font-weight:700;
display:flex; align-items:center; justify-content:center;
}
#page-xplod .xp-pitem.on .xp-pn{background:var(--ac); color:var(--acTx)}
#page-xplod .xp-pcopy{min-width:0}
#page-xplod .xp-pcopy b{display:block; font-size:12.5px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#page-xplod .xp-pcopy small{display:block; font-size:10.5px; color:var(--tx3)}
#page-xplod .xp-vacio{padding:18px 14px; color:var(--tx3); font-size:12px; text-align:center}
/* ── Arrastrar para reordenar ─────────────────────────────────────────────
`cursor:grab` sólo cuando el elemento es arrastrable de verdad: el atributo
`draggable` lo pone el JS únicamente si hay permiso de edición, así que quien
no puede reordenar tampoco ve el cursor que se lo promete. */
#page-xplod [draggable="true"]{cursor:grab}
#page-xplod [draggable="true"]:active{cursor:grabbing}
#page-xplod .arrastre{opacity:.4}
#page-xplod .encima{box-shadow:inset 0 2px 0 0 var(--ac)}
/* ── Escenario ────────────────────────────────────────────────────────────── */
#page-xplod .xp-escena-caja{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg)}
#page-xplod .xp-escena-barra{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:10px 14px; border-bottom:1px solid var(--bd);
}
#page-xplod .xp-escena-barra b{display:block; font-size:13px; font-weight:600}
#page-xplod .xp-escena-barra small{display:block; font-size:11px; color:var(--tx3)}
#page-xplod .xp-seg{display:flex; gap:2px; background:var(--bg3); border:1px solid var(--bd); border-radius:8px; padding:2px}
#page-xplod .xp-seg button{
background:none; border:0; color:var(--tx2); padding:5px 12px;
border-radius:6px; cursor:pointer; font-size:12px;
}
#page-xplod .xp-seg button.on{background:var(--ac); color:var(--acTx); font-weight:600}
#page-xplod .xp-escena{
position:relative; flex:1; min-height:0; display:flex;
align-items:center; justify-content:center; padding:16px; overflow:hidden;
}
#page-xplod .xp-escena.colocando{cursor:crosshair}
/* La foto se ajusta al hueco que quede, sin medidas fijas: así la puerta se ve
lo más grande posible en cualquier pantalla y los marcadores —que van en
porcentaje— siguen cayendo donde deben. */
#page-xplod #xp-foto{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
#page-xplod .xp-capa{position:absolute; pointer-events:none}
#page-xplod .xp-sinimg{
display:flex; flex-direction:column; align-items:center; gap:8px;
color:var(--tx3); text-align:center; padding:30px;
}
#page-xplod .xp-sinimg span{font-size:30px; opacity:.5}
#page-xplod .xp-sinimg b{color:var(--tx); font-size:14px; font-weight:600}
#page-xplod .xp-sinimg small{font-size:11.5px; max-width:36ch}
#page-xplod .xp-pin{
position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
width:26px; height:26px; border-radius:50%;
background:rgba(10,10,12,.82); border:2px solid var(--ac); color:#fff;
font-size:10.5px; font-weight:700; cursor:grab;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,.45);
transition:transform .12s, background .12s;
}
#page-xplod .xp-pin:hover,
#page-xplod .xp-pin:focus-visible{transform:translate(-50%,-50%) scale(1.16); background:var(--ac); color:var(--acTx)}
#page-xplod .xp-pin.on{background:var(--ac); color:var(--acTx); transform:translate(-50%,-50%) scale(1.16)}
#page-xplod .xp-pin.off{border-style:dashed; opacity:.55}
#page-xplod .xp-pin.mov{cursor:grabbing; transition:none}
#page-xplod .xp-escena.previsualizar .xp-pin{cursor:pointer}
#page-xplod .xp-hover{
position:absolute; right:18px; bottom:18px; width:262px; z-index:5;
background:var(--bg2); border:1px solid var(--bd2); border-radius:var(--r);
overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.4);
opacity:0; pointer-events:none; transform:translateY(8px); transition:.16s;
}
#page-xplod .xp-escena.previsualizar .xp-hover.on{opacity:1; transform:translateY(0)}
#page-xplod .xp-hover-img{
aspect-ratio:4/3; background:var(--bg4) center/cover no-repeat;
display:flex; align-items:center; justify-content:center;
color:var(--tx3); font-size:11.5px; border-bottom:1px solid var(--bd);
}
#page-xplod .xp-hover>div:last-child{padding:12px 13px}
#page-xplod .xp-hover span{font-size:9.5px; letter-spacing:.13em; color:var(--ac); font-weight:700}
#page-xplod .xp-hover h3{margin:4px 0 5px; font-size:14.5px; font-weight:600}
#page-xplod .xp-hover p{margin:0; font-size:12px; color:var(--tx2); line-height:1.5}
#page-xplod .xp-escena-pie{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:8px 14px; border-top:1px solid var(--bd); color:var(--tx3); font-size:11px;
}
#page-xplod #xp-coords{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* ── Inspector ────────────────────────────────────────────────────────────── */
#page-xplod .xp-insp{border-left:1px solid var(--bd); background:var(--bg2); min-width:0; min-height:0; display:flex; flex-direction:column}
#page-xplod .xp-insp-vacio{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:7px; padding:36px 20px; text-align:center; color:var(--tx3);
}
#page-xplod .xp-insp-vacio span{font-size:26px; opacity:.5}
#page-xplod .xp-insp-vacio b{color:var(--tx); font-size:13.5px}
#page-xplod .xp-insp-vacio p{margin:0; font-size:11.5px; max-width:28ch}
#page-xplod #xp-insp-form{padding:0 14px 16px; overflow:auto; flex:1; min-height:0}
#page-xplod #xp-insp-form .xp-cab{margin:0 -14px 12px; padding:12px 14px}
#page-xplod .xp-campo{display:block; margin-bottom:11px; font-size:10.5px; letter-spacing:.1em; color:var(--tx3); font-weight:600}
#page-xplod .xp-campo input, #page-xplod .xp-campo textarea{
display:block; width:100%; margin-top:5px;
background:var(--bg3); border:1px solid var(--bd); color:var(--tx);
border-radius:var(--rs); padding:8px 10px; font-size:13px; letter-spacing:0; font-weight:400;
}
#page-xplod .xp-campo textarea{resize:vertical; line-height:1.5}
#page-xplod .xp-campo input:focus, #page-xplod .xp-campo textarea:focus{border-color:var(--ac); outline:none}
#page-xplod .xp-campo small{display:block; text-align:right; margin-top:4px; color:var(--tx3); font-size:10.5px; letter-spacing:0}
#page-xplod .xp-coords{display:grid; grid-template-columns:1fr 1fr; gap:9px}
#page-xplod .xp-chk{display:flex; align-items:center; gap:7px; cursor:pointer; font-size:11.5px; color:var(--tx2)}
#page-xplod .xp-chk input{position:absolute; opacity:0; width:0; height:0}
#page-xplod .xp-chk span{
width:30px; height:17px; border-radius:9px; background:var(--bd2);
position:relative; transition:background .15s; flex:0 0 auto;
}
#page-xplod .xp-chk span::after{
content:''; position:absolute; left:2px; top:2px; width:13px; height:13px;
border-radius:50%; background:#fff; transition:transform .15s;
}
#page-xplod .xp-chk input:checked + span{background:var(--ac)}
#page-xplod .xp-chk input:checked + span::after{transform:translateX(13px)}
#page-xplod .xp-chk input:focus-visible + span{outline:2px solid var(--ac); outline-offset:2px}
#page-xplod .xp-campo-img{margin:14px 0 4px}
#page-xplod .xp-campo-img>span{display:block; font-size:10.5px; letter-spacing:.1em; color:var(--tx3); font-weight:600; margin-bottom:6px}
#page-xplod .xp-prev{
aspect-ratio:4/3; border-radius:var(--rs); border:1px dashed var(--bd2);
background:var(--bg3) center/cover no-repeat;
display:flex; align-items:center; justify-content:center;
color:var(--tx3); font-size:11.5px; margin-bottom:8px;
}
#page-xplod .xp-prev.hay{border-style:solid}
#page-xplod .xp-campo-img-acc{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* ── Deshacer ─────────────────────────────────────────────────────────────── */
#page-xplod .xp-undo{
position:absolute; left:50%; bottom:22px; transform:translateX(-50%) translateY(14px);
display:flex; align-items:center; gap:12px; z-index:60;
background:var(--bg4); border:1px solid var(--bd2); border-radius:var(--rs);
padding:9px 14px; font-size:12.5px; box-shadow:0 10px 30px rgba(0,0,0,.4);
opacity:0; transition:.2s;
}
#page-xplod .xp-undo.on{opacity:1; transform:translateX(-50%) translateY(0)}
#page-xplod .xp-undo button{background:none; border:0; color:var(--ac); font-weight:600; cursor:pointer; text-decoration:underline}
#page-xplod{position:relative}
/* ── Modal ────────────────────────────────────────────────────────────────── */
#page-xplod .xp-velo{
position:fixed; inset:0; z-index:900; background:var(--velo);
display:flex; align-items:center; justify-content:center; padding:20px;
}
#page-xplod .xp-modal{
width:min(560px,100%); max-height:82vh; overflow:auto;
background:var(--bg2); border:1px solid var(--bd2); border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.45);
}
#page-xplod .xp-modal>header{
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px; border-bottom:1px solid var(--bd);
}
#page-xplod .xp-modal>header b{font-size:13px; letter-spacing:.08em}
#page-xplod .xp-modal>header button{background:none; border:0; color:var(--tx3); font-size:15px; cursor:pointer}
#page-xplod .xp-modal>header button:hover{color:var(--tx)}
#page-xplod .xp-modal-cuerpo{padding:16px}
#page-xplod .xp-modal-cab b{display:block; font-size:15px; font-weight:600; margin-bottom:4px}
#page-xplod .xp-modal-cab span{display:block; font-size:12px; color:var(--tx3); line-height:1.5}
#page-xplod .xp-modal-acc{margin:14px 0}
#page-xplod .xp-aviso{
margin-top:12px; padding:10px 12px; border-radius:var(--rs);
background:var(--bg3); border:1px solid var(--bd2);
color:var(--tx2); font-size:12px; line-height:1.5;
}
#page-xplod .xp-aviso b{color:var(--tx); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px}
#page-xplod .xp-en{
display:flex; align-items:center; gap:12px; justify-content:space-between;
padding:10px 0; border-top:1px solid var(--bd);
}
#page-xplod .xp-en.off{opacity:.55}
#page-xplod .xp-en-c b{display:block; font-size:13px; font-weight:550}
#page-xplod .xp-en-c small{display:block; font-size:11px; color:var(--tx3)}
#page-xplod .xp-en-b{display:flex; gap:7px; flex:0 0 auto}
/* ── Globo ────────────────────────────────────────────────────────────────── */
/* `data-xptip`, NO `data-tip`: 200-leads-v2.js inyecta CSS global para
`[data-tip]:hover::after` y saldrían dos globos encimados. */
#xp-tip{
position:fixed; z-index:1200; max-width:270px; pointer-events:none;
background:var(--tipBg); border:1px solid var(--tipBd); color:#e9e9f0;
border-radius:8px; padding:7px 10px; font-size:11.5px; line-height:1.45;
box-shadow:0 8px 24px rgba(0,0,0,.4);
}
/* ── Estrecho ─────────────────────────────────────────────────────────────── */
@media(max-width:1280px){
#page-xplod .xp-grid{grid-template-columns:200px minmax(0,1fr) 272px}
}
@media(max-width:1080px){
#page-xplod .xp-shell{grid-template-columns:minmax(0,1fr)}
#page-xplod .xp-cat{border-right:0; border-bottom:1px solid var(--bd)}
#page-xplod .xp-cat-lista{max-height:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:4px}
#page-xplod .xp-grid{grid-template-columns:minmax(0,1fr)}
#page-xplod .xp-puntos{border-right:0; border-bottom:1px solid var(--bd)}
#page-xplod .xp-insp{border-left:0; border-top:1px solid var(--bd)}
#page-xplod #xp-insp-form{max-height:none}
#page-xplod .xp-plista{max-height:none}
#page-xplod .xp-hover{right:12px; bottom:12px; width:230px}
}
/* ── Loaders de la identidad ──────────────────────────────────────────────
Los SVG traen su propia animación y su propio `prefers-reduced-motion`: no
se les añade nada desde aquí ni desde JavaScript, para no acabar con dos
animaciones peleándose por el mismo dibujo. */
#page-xplod .xp-cargando{
position:absolute; inset:0; z-index:50;
display:flex; align-items:center; justify-content:center;
background:var(--bg);
}
#page-xplod .xp-cargando img{width:min(300px,62vw); height:auto}
#page-xplod .xp-girando{width:15px; height:15px; flex:0 0 auto}
#page-xplod .xp-b .xp-girando{margin-right:6px; vertical-align:-2px}
#page-xplod .xp-b:disabled .xp-girando{opacity:.9}