/* ════════════════════════════════════════════════════════════════════════════
   288 · MARCA DE MÓDULO  (4.3.256)
   ----------------------------------------------------------------------------
   Cinco módulos que ya tenían logotipo propio en `LOGOS/` y no lo estaban
   usando en ningún sitio: en el menú salían con un icono genérico de Font
   Awesome y al entrar no había nada que dijera de qué módulo se trataba.

     nav            marca          color        archivo del logotipo
     ─────────────  ─────────────  ───────────  ──────────────────────────
     powerpdf       OMNIA PDF Lab  rojo         LOGOS/OMNIA_PDF_Lab_Logo_Full
     intersim       OMNIA Intersim lila         LOGOS/omnia_intersim_full
     wiki           OMNIA Wiki     mango        LOGOS/omnia_wiki_full
     paneldoors     OMNIA Torsion  violeta      LOGOS/omnia_torsion_full
     portalp        OMNIA Slide    azul marino  LOGOS/omnia_slide_full

   Tres piezas, la misma lógica que se usó con PULSE en 4.3.255:

     1. EL ICONO DEL MENÚ sale del logotipo real, no de Font Awesome.
     2. EL COLOR DE LA MARCA es una variable, y cambia entre día y noche
        cuando el color original no contrasta en los dos fondos.
     3. EL LOADER es el oficial de `LOGOS/omnia_*_loader.html`, adaptado.

   ── POR QUÉ EL ICONO ES UN SVG INCRUSTADO Y NO EL PNG ──────────────────────
   PULSE recorta su PNG con `background-position`, y funciona porque su
   logotipo trae fondo propio opaco: en el menú oscuro se lee como plaquita.
   Estos cinco NO: su tinta es azul casi negro sobre blanco. De noche, sobre
   un menú oscuro, la silueta desaparecería; y cinco plaquitas blancas seguidas
   en el menú serían un despropósito.

   Por eso el icono se VECTORIZÓ (trazado sobre el PNG original a triple
   resolución) y se partió en DOS caminos:

       · la TINTA  → `fill="currentColor"`, así hereda el color del texto del
                     menú y es negra de día y clara de noche, sola.
       · el ACENTO → `fill="var(--mk-acc, <hex de marca>)"`, el rojo del
                     matraz, el lila del globo, el mango del libro… El
                     `var()` permite aclararlo de noche sin tocar el trazado;
                     el hex de respaldo es el color exacto del archivo, así
                     que aunque la variable no llegue, el icono sale bien.

   Un `background-image` no habría servido para nada de esto: `currentColor` y
   las variables CSS sólo llegan al SVG si el SVG está EN el documento.

   ── DÓNDE VIVE CADA COSA ───────────────────────────────────────────────────
   Aquí van los COLORES, el TAMAÑO y las ANIMACIONES. Los trazados y el texto
   están en `288-marca-modulos.js`, que es quien rellena cualquier nodo con
   `data-marca="<nav>"` con el SVG correspondiente.
   ════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   1 · PALETA POR MÓDULO
   ------------------------------------------------------------------------
   `--mk-acc`  color de marca (el del logotipo).
   `--mk-acc2` variante clara, para degradados y estados encendidos.

   Los valores de DÍA son los del archivo original y los del loader oficial.
   Los de NOCHE se aclaran SÓLO donde el original se hunde en el fondo casi
   negro (`--bg:#0d1117`): el violeta de Torsion y el azul marino de Slide
   quedaban por debajo de 3:1, que es el mínimo para un gráfico. El rojo, el
   lila y el mango pasan de sobra en los dos modos y NO se tocan: cambiar un
   color de marca sin necesidad es perder la marca.

   Estas clases se ponen en el CONTENEDOR (el nodo del icono, la tarjeta del
   loader, la página en construcción). Nada de esto es global. */
.mk-pdflab    { --mk-acc:#e5252a; --mk-acc2:#ff5f63; }
.mk-intersim  { --mk-acc:#8b5cf6; --mk-acc2:#a78bfa; }
.mk-wiki      { --mk-acc:#f4b400; --mk-acc2:#ffc933; }
.mk-torsion   { --mk-acc:#7c3aed; --mk-acc2:#a78bfa; }
.mk-slide     { --mk-acc:#2f6ad0; --mk-acc2:#4f86e8; }
/* El verde selva del archivo (#1F6F4A) es muy oscuro para el menú, que ya es
   oscuro de noche. Se aclara en los dos modos lo justo para que el chevrón
   central —lo único en color del icono— se distinga del resto. */
.mk-flexwall  { --mk-acc:#1f6f4a; --mk-acc2:#34d399; }

[data-mode="noche"] .mk-torsion { --mk-acc:#a78bfa; --mk-acc2:#c4b5fd; }
[data-mode="noche"] .mk-slide   { --mk-acc:#6fa2f2; --mk-acc2:#9dc0f7; }
[data-mode="noche"] .mk-flexwall{ --mk-acc:#34d399; --mk-acc2:#6ee7b7; }

/* ────────────────────────────────────────────────────────────────────────
   2 · EL ICONO DEL MENÚ
   ------------------------------------------------------------------------
   El nodo que lleva `data-marca` puede ser el <span class="s-ico-img"> del
   menú viejo, el <span class="sb2-ico-img"> del menú v2 o cualquier otro: el
   tamaño lo pone SIEMPRE la clase de la casa, y aquí sólo se hace que el SVG
   llene la caja que le den. Igual que en `.pl287-mark`, hay una red por si
   el nodo se usara suelto en algún sitio sin caja: sin ella, un SVG en un
   contenedor de 0 px no se ve y el fallo es mudo. */
.mk-ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mk-ico > svg{ width:100%; height:100%; display:block; }
.mk-ico:not([class*="-ico-img"]){ width:20px; height:20px; }

/* ────────────────────────────────────────────────────────────────────────
   3 · EL LOADER
   ------------------------------------------------------------------------
   Va como CAPA ENCIMA de la página, no reemplazando su contenido. Es a
   propósito: `#page-intersim` trae su formulario escrito a mano en el
   index.html, y vaciarlo para meter un loader significaría reconstruirlo
   después. Una capa no toca el DOM de nadie y se quita sola.

   Los originales (`LOGOS/omnia_*_loader.html`) están cableados a fondo claro
   —`--bg:#f7f7fb`, tarjeta blanca, texto `#111827`—. De noche eso sería un
   cartel blanco en mitad de una pantalla negra. Aquí la tarjeta usa `--bg2`,
   `--border`, `--text` y `--dim`, o sea el mismo material que el resto de las
   tarjetas de OMNIA, y lo ÚNICO que no cambia entre día y noche es el color
   de marca. Es la misma decisión que se tomó con el loader de PULSE.

   NADA de `calc(100vh - N)`: la capa es `position:absolute; inset:0` sobre la
   página, que ya tiene su alto. */
/* Mientras hay capa puesta, la página es su contexto Y tiene alto propio. Lo
   segundo importa tanto como lo primero: sin `height:100%` la página mide lo
   que mida su contenido —a veces nada— y el loader se pegaba arriba en vez de
   quedar en el centro de la pantalla. El alto se HEREDA de `#page-content`,
   nunca se calcula con `100vh`. `min-height` es la red por si esa cadena de
   alturas se rompiera. La marca la pone y la quita MOD-288. */
.page[data-mk-load="1"]{
    position:relative; height:100%; min-height:420px;
}
.mk-load{
    position:absolute; inset:0; z-index:40;
    display:grid; place-items:center;
    padding:24px;
    background:var(--bg);
    animation:mk-in .18s ease-out;
}
.mk-load.mk-out{ animation:mk-out .28s ease-in forwards; pointer-events:none; }
@keyframes mk-in { from{opacity:0} to{opacity:1} }
@keyframes mk-out{ from{opacity:1} to{opacity:0} }

.mk-lbox{
    width:min(440px, calc(100% - 24px));
    padding:32px 30px 26px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--bg2);
    box-shadow:0 22px 70px rgba(0,0,0,.10);
    text-align:center;
}
[data-mode="noche"] .mk-lbox{ box-shadow:0 22px 70px rgba(0,0,0,.55); }

/* El logotipo va como ARCHIVO, no incrustado: los loaders de Torsion y Slide
   llevan el PNG en base64 y por eso pesan 363 KB y 299 KB. Aquí son 100 KB
   que además se cachean y se comparten con la página en construcción.

   4.3.257 · FONDO RECORTADO. Los archivos originales traen el fondo casi
   blanco METIDO en el pixel, no transparente. De noche eso salía como una
   plaquita clara —o, al invertirla, como un ladrillo negro— en mitad de la
   pantalla; se ve en las capturas que mandó el dueño. Las copias de
   `public/img/marcas/` llevan el fondo pasado a alfa y el color desmezclado,
   así que ahora se apoyan sobre el fondo de OMNIA, sea el que sea.

   De noche se invierte: la tinta es azul casi negro y sobre el fondo oscuro
   no se leería. `hue-rotate(180deg)` después del `invert` DEVUELVE el tono a
   los acentos —el rojo del matraz vuelve a ser rojo, el mango del libro
   vuelve a ser mango—; sin él saldrían en su complementario. Comprobado
   contra los cinco archivos. */
.mk-llogo{ display:block; margin:0 auto 20px; width:230px; max-width:78%; }
[data-mode="noche"] .mk-llogo{ filter:invert(1) hue-rotate(180deg); }

.mk-lstatus{
    margin:0 0 6px; font-size:13px; letter-spacing:.11em;
    text-transform:uppercase; color:var(--dim);
}
.mk-lhint{ font-size:12px; color:var(--dim); opacity:.78; }

/* Barra de avance: es INDETERMINADA a propósito (no hay porcentaje real que
   enseñar, y fingirlo sería mentir). Viaja de izquierda a derecha. */
.mk-lbar{
    height:5px; margin-top:20px; border-radius:999px;
    background:var(--bg3); overflow:hidden;
}
.mk-lbar > span{
    display:block; height:100%; width:38%; border-radius:inherit;
    background:linear-gradient(90deg, var(--mk-acc), var(--mk-acc2));
    animation:mk-scan 1.9s ease-in-out infinite;
}
@keyframes mk-scan{
    0%{ transform:translateX(-110%) }
    70%,100%{ transform:translateX(190%) }
}

/* ── 3.1 · ARTE: MATRAZ (PDF Lab) ──────────────────────────────────────── */
.mk-flask{ position:relative; width:150px; height:168px; margin:2px auto 16px; }
.mk-flask .fk{ position:absolute; left:50%; top:14px; transform:translateX(-50%); width:116px; height:142px; }
.mk-flask .neck{
    position:absolute; left:42px; top:0; width:32px; height:56px;
    border:7px solid var(--text); border-bottom:0; border-radius:8px 8px 0 0;
    background:var(--bg2); z-index:3;
}
.mk-flask .body{
    position:absolute; left:13px; bottom:0; width:90px; height:90px;
    border:7px solid var(--text); border-radius:50% 50% 46% 46%;
    background:var(--bg2); overflow:hidden;
}
.mk-flask .body:before{
    content:""; position:absolute; width:42px; height:28px; left:18px; top:-20px; background:var(--bg2);
}
.mk-flask .liq{
    position:absolute; left:-10%; bottom:-2px; width:120%; height:44%;
    background:var(--mk-acc); border-radius:48% 52% 0 0 / 14% 14% 0 0;
    animation:mk-slosh 2.2s ease-in-out infinite;
}
@keyframes mk-slosh{
    0%,100%{ transform:rotate(-2deg) translateY(0) }
    50%    { transform:rotate(2deg) translateY(-2px) }
}
.mk-flask .bub{
    position:absolute; bottom:18px; border-radius:50%;
    background:var(--mk-acc); opacity:.92;
    animation:mk-bubble 1.8s ease-in infinite;
}
.mk-flask .b1{ width:10px; height:10px; left:45px }
.mk-flask .b2{ width:7px;  height:7px;  left:67px; animation-delay:.55s }
.mk-flask .b3{ width:13px; height:13px; left:57px; animation-delay:1.05s }
.mk-flask .b4{ width:6px;  height:6px;  left:52px; animation-delay:1.35s }
@keyframes mk-bubble{
    0%  { transform:translateY(0) scale(.8); opacity:0 }
    15% { opacity:.95 }
    80% { opacity:.9 }
    100%{ transform:translateY(-112px) scale(1.15); opacity:0 }
}

/* ── 3.2 · ARTE: SIMULADOR (Intersim) ──────────────────────────────────── */
.mk-sim{ position:relative; width:220px; height:176px; margin:0 auto 16px; }
.mk-sim .orbit{
    position:absolute; left:17px; top:12px; width:186px; height:150px;
    border:2px dashed color-mix(in srgb, var(--mk-acc) 30%, transparent);
    border-radius:50%; transform:rotate(-12deg);
}
.mk-sim .globe{
    position:absolute; left:51px; top:24px; width:118px; height:118px;
    border:3px solid var(--mk-acc); border-radius:50%; opacity:.95;
}
.mk-sim .globe:before, .mk-sim .globe:after{
    content:""; position:absolute; inset:16px 34px;
    border-left:2px solid var(--mk-acc2); border-right:2px solid var(--mk-acc2);
    border-radius:50%; opacity:.75;
}
.mk-sim .globe:after{
    inset:34px 10px; border:0;
    border-top:2px solid var(--mk-acc2); border-bottom:2px solid var(--mk-acc2);
}
.mk-sim .pack{ position:absolute; left:82px; top:62px; width:58px; height:58px; transform:rotate(30deg) }
.mk-sim .pack:before{ content:""; position:absolute; inset:0; border:3px solid var(--text); background:var(--bg2) }
.mk-sim .pack:after{
    content:""; position:absolute; left:8px; right:8px; top:26px; height:3px;
    background:var(--mk-acc); box-shadow:0 -16px 0 -1px var(--mk-acc);
}
.mk-sim .dot{
    position:absolute; width:12px; height:12px; border-radius:50%;
    background:var(--mk-acc); animation:mk-travel 2.7s linear infinite;
}
@keyframes mk-travel{
    0%  { left:18px;  top:112px }
    25% { left:54px;  top:42px  }
    50% { left:150px; top:24px  }
    75% { left:190px; top:92px  }
    100%{ left:18px;  top:112px }
}
.mk-sim .chart{
    position:absolute; left:37px; right:37px; bottom:0; height:44px;
    display:flex; align-items:flex-end; justify-content:center; gap:8px;
}
.mk-sim .bar{
    width:14px; border-radius:4px 4px 0 0;
    background:color-mix(in srgb, var(--mk-acc) 22%, transparent);
    animation:mk-bars 1.6s ease-in-out infinite alternate;
}
.mk-sim .bar:nth-child(1){ height:14px }
.mk-sim .bar:nth-child(2){ height:24px; animation-delay:.15s }
.mk-sim .bar:nth-child(3){ height:34px; animation-delay:.3s }
.mk-sim .bar:nth-child(4){ height:22px; animation-delay:.45s }
.mk-sim .bar:nth-child(5){ height:42px; animation-delay:.6s }
@keyframes mk-bars{
    from{ transform:scaleY(.72) }
    to  { transform:scaleY(1); background:var(--mk-acc2) }
}

/* ── 3.3 · ARTE: LIBRO (Wiki) ──────────────────────────────────────────── */
.mk-wikiart{ position:relative; width:230px; height:186px; margin:0 auto 16px; }
.mk-wikiart .orbit{
    position:absolute; left:12px; top:19px; width:206px; height:138px;
    border:2px dashed color-mix(in srgb, var(--mk-acc) 34%, transparent);
    border-radius:50%; animation:mk-spin 9s linear infinite;
}
@keyframes mk-spin{ to{ transform:rotate(360deg) } }
.mk-wikiart .node{
    position:absolute; width:28px; height:28px; border-radius:9px;
    background:var(--bg2); border:2px solid var(--mk-acc);
    display:grid; place-items:center; color:var(--mk-acc);
    font-size:13px; font-weight:800;
}
.mk-wikiart .n1{ left:16px; top:70px }
.mk-wikiart .n2{ right:18px; top:34px }
.mk-wikiart .n3{ right:22px; bottom:20px }
.mk-wikiart .n4{ left:22px; bottom:18px }
.mk-wikiart .spark{
    position:absolute; left:50%; top:12px; width:9px; height:9px; border-radius:50%;
    background:var(--mk-acc2); transform:translateX(-50%);
    animation:mk-spark 1.5s ease-in-out infinite;
}
@keyframes mk-spark{
    0%,100%{ transform:translateX(-50%) scale(.75); opacity:.45 }
    50%    { transform:translateX(-50%) scale(1.25); opacity:1 }
}
.mk-wikiart .book{ position:absolute; left:50%; top:47px; width:108px; height:80px; transform:translateX(-50%) }
.mk-wikiart .pg{
    position:absolute; top:0; width:56px; height:76px;
    background:var(--bg2); border:3px solid var(--text);
}
.mk-wikiart .pg.l{
    left:0; border-radius:10px 3px 8px 12px;
    transform-origin:right center; animation:mk-page 1.9s ease-in-out infinite;
}
.mk-wikiart .pg.r{ right:0; border-radius:3px 10px 12px 8px }
.mk-wikiart .pg:before, .mk-wikiart .pg:after{
    content:""; position:absolute; height:3px; border-radius:3px;
    background:var(--border); left:11px; right:11px;
}
.mk-wikiart .pg:before{ top:24px }
.mk-wikiart .pg:after { top:38px }
.mk-wikiart .pg.l .w{ position:absolute; left:18px; top:11px; color:var(--mk-acc); font-weight:800; font-size:18px }
.mk-wikiart .pg.r .d{ position:absolute; right:11px; bottom:13px; width:6px; height:6px; border-radius:50%; background:var(--mk-acc) }
@keyframes mk-page{
    0%,100%{ transform:rotateY(0deg) }
    50%    { transform:rotateY(-18deg) }
}

/* ── 3.4 · ARTE: PUERTA SECCIONAL (Torsion) ────────────────────────────── */
.mk-door{
    position:relative; width:230px; height:164px; margin:0 auto 18px;
    border:6px solid var(--text); border-bottom-width:8px;
    border-radius:8px 8px 3px 3px; overflow:hidden;
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--mk-acc) 10%, transparent),
        color-mix(in srgb, var(--mk-acc) 20%, transparent)), var(--bg3);
}
.mk-door .msg{
    position:absolute; inset:0; display:grid; place-items:center; padding:20px;
    color:var(--mk-acc); font-size:15px; font-weight:650; line-height:1.25; text-align:center;
}
.mk-door .leafs{
    position:absolute; inset:0; display:flex; flex-direction:column;
    animation:mk-open 5.6s cubic-bezier(.65,0,.35,1) infinite;
}
.mk-door .pn{ flex:1; background:var(--bg2); border-bottom:2px solid var(--border); position:relative }
.mk-door .pn:last-child{ border-bottom:none }
.mk-door .pn:after{
    content:""; position:absolute; left:50%; top:50%; width:16px; height:4px;
    border-radius:999px; background:var(--border); transform:translate(-50%,-50%);
}
@keyframes mk-open{
    0%,12%  { transform:translateY(0) }
    62%,78% { transform:translateY(-100%) }
    100%    { transform:translateY(0) }
}

/* ── 3.5 · ARTE: PUERTA CORREDIZA (Slide) ──────────────────────────────── */
.mk-slidedoor{
    position:relative; width:250px; height:170px; margin:0 auto 18px;
    border:5px solid var(--text); border-top-width:12px; border-radius:6px; overflow:hidden;
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--mk-acc) 8%, transparent),
        color-mix(in srgb, var(--mk-acc) 18%, transparent)), var(--bg3);
}
.mk-slidedoor .sensor{
    position:absolute; left:50%; top:-9px; width:44px; height:16px; border-radius:999px;
    transform:translateX(-50%); background:var(--text); z-index:5;
}
.mk-slidedoor .sensor:after{
    content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
    background:var(--mk-acc2); transform:translate(-50%,-50%);
    animation:mk-pulse 1.5s ease-out infinite;
}
@keyframes mk-pulse{
    0%  { box-shadow:0 0 0 0 color-mix(in srgb, var(--mk-acc2) 40%, transparent) }
    70% { box-shadow:0 0 0 18px transparent }
    100%{ box-shadow:0 0 0 0 transparent }
}
.mk-slidedoor .msg{
    position:absolute; inset:0; display:grid; place-items:center; padding:26px;
    color:var(--mk-acc); font-size:15px; font-weight:650; line-height:1.25; text-align:center;
}
.mk-slidedoor .leaf{
    position:absolute; top:0; bottom:0; width:50%;
    background:var(--bg2); opacity:.92;
    border:2px solid color-mix(in srgb, var(--text) 24%, transparent);
}
.mk-slidedoor .leaf:after{
    content:""; position:absolute; left:0; right:0; top:50%; height:18px;
    transform:translateY(-50%); background:var(--bg3);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.mk-slidedoor .leaf.l{ left:0;  animation:mk-slide-l 3.8s cubic-bezier(.55,0,.25,1) infinite }
.mk-slidedoor .leaf.r{ right:0; animation:mk-slide-r 3.8s cubic-bezier(.55,0,.25,1) infinite }
@keyframes mk-slide-l{
    0%,14%  { transform:translateX(0) }
    48%,72% { transform:translateX(-82%) }
    100%    { transform:translateX(0) }
}
@keyframes mk-slide-r{
    0%,14%  { transform:translateX(0) }
    48%,72% { transform:translateX(82%) }
    100%    { transform:translateX(0) }
}

/* ────────────────────────────────────────────────────────────────────────
   4 · PÁGINA EN CONSTRUCCIÓN CON MARCA
   ------------------------------------------------------------------------
   Wiki, Torsion y Slide todavía no tienen módulo: sus páginas eran un cartel
   con tipografía de videojuego y un icono turquesa que no correspondía a
   ninguno de los tres. Ahora enseñan su logotipo real y su animación —la
   MISMA del loader oficial, porque una animación de puerta abriéndose dice
   «puertas seccionales» mucho mejor que un `fa-door-closed`—.

   No hay loader de entrada en estas tres, y es a propósito: un loader que no
   carga nada es teatro, y hacer esperar para acabar enseñando «en
   construcción» sería una burla. Aquí la animación ES el contenido. */
/* CENTRADO DE VERDAD, EN LOS DOS EJES.
   Antes era un bloque con `max-width` y `margin:0 auto`: eso centra a lo
   ancho, pero a lo alto lo deja pegado arriba, y en una pantalla grande el
   contenido quedaba arrinconado en la esquina superior. Ahora la PÁGINA es
   la caja que centra.

   `height:100%` —heredado, nunca `calc(100vh - N)`—: `#page-content` ya tiene
   alto propio, así que la página lo toma y el centrado tiene contra qué
   centrar. El `min-height` es la red para navegadores donde esa cadena de
   alturas se rompa: sin él, `height:100%` daría cero y el contenido se
   apelmazaría arriba otra vez. */
.page.active[data-marca-ph="1"]{
    display:flex; height:100%; min-height:420px;
}
.mk-ph{
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    width:100%; padding:32px 24px; box-sizing:border-box;
    text-align:center;
}
.mk-ph > *{ max-width:520px; width:100% }
.mk-ph .mk-llogo{ margin-bottom:26px }
.mk-ph-tag{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:4px; padding:6px 14px; border-radius:999px;
    border:1px solid color-mix(in srgb, var(--mk-acc) 45%, transparent);
    background:color-mix(in srgb, var(--mk-acc) 10%, transparent);
    color:var(--mk-acc); font-size:11px; font-weight:700; letter-spacing:.14em;
}
.mk-ph-txt{
    margin:18px auto 0; max-width:460px;
    color:var(--text2); font-size:13px; line-height:1.65; text-transform:none;
}

/* Pantallas cortas: el arte es lo primero que sobra. */
@media (max-height:640px){
    .mk-flask, .mk-sim, .mk-wikiart, .mk-door, .mk-slidedoor{ transform:scale(.82); margin-bottom:0 }
}

/* Quien pidió que no se muevan las cosas, manda. */
@media (prefers-reduced-motion:reduce){
    .mk-load *, .mk-ph *{ animation:none !important }
}