/* ════════════════════════════════════════════════════════════════════════════ 246 · OMNIA PDF LAB — PORTADA ---------------------------------------------------------------------------- SÓLO la portada del módulo (la rejilla de herramientas y el panel de soltar archivos). Las pantallas de cada herramienta —zona de subida, opciones, miniaturas, editor de marcado— siguen viviendo en `_css()` dentro de `public/js/246-powerpdf.js` y NO se tocan desde aquí: cambiarlas sería arriesgar funciones que ya trabajan bien por un asunto de aspecto. Por eso TODO lo de este archivo lleva el prefijo `pl246-`, que no existía antes en ninguna parte. Ni una sola regla pisa a `.ppdf-*`. ── DÍA Y NOCHE ──────────────────────────────────────────────────────────── Nada de colores del tema escritos a mano: fondo, bordes y texto salen de `--bg/--bg2/--bg3/--border/--text/--text2/--dim/--accent/--on-accent`, que es lo que conmuta `[data-mode]` en el ``. Lo ÚNICO con valor propio es la paleta por herramienta del bloque 1, y está declarada en un solo sitio. ── ALTO ─────────────────────────────────────────────────────────────────── NO hay ni un `calc(100vh - N)`. El alto se hereda de la página; calcularlo contra la ventana fue lo que recortó HUMANZ entero en 4.3.226. ════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────────────── 1 · PALETA POR HERRAMIENTA · PALETA:INICIO ------------------------------------------------------------------------ Cada tarjeta lleva su propio color en el cuadro del icono: es lo que permite reconocer «unir» o «comprimir» de un vistazo sin leer el título, y es lo que pedía el mockup. El tema de OMNIA no tiene siete acentos, así que estos SIETE valores son la única excepción del archivo, y viven aquí dentro para que se puedan revisar de un golpe. Se declaran como `--pl-c` (un solo nombre) por herramienta: las reglas de más abajo nunca vuelven a mencionar un color, sólo `var(--pl-c)`. El selector es `[data-tool="…"]` y no una clase: así vale igual para la tarjeta de la rejilla y para el renglón de «Comienza rápido», que son la misma herramienta y tienen que salir del mismo color. Los valores de DÍA están medidos contra el fondo claro (`--bg2:#ffffff`) y los de NOCHE contra el casi negro (`--bg2:#161b22`); ambos por encima de 3:1, que es el mínimo de un elemento gráfico. El rojo de `dividir` es el de la marca PDF Lab (`--mk-acc` de MOD-288), a propósito. */ /* Respaldo primero: si mañana se añade una herramienta y nadie le pone color, hereda el acento del tema en vez de quedarse sin nada. Especificidad menor que la de los siete de abajo, así que el orden no la vuelve un problema. */ .pl246-tool, .pl246-q{ --pl-c:var(--accent); } .pl246 [data-tool="unir"] { --pl-c:#7c5cfa; } .pl246 [data-tool="dividir"] { --pl-c:#d92c31; } .pl246 [data-tool="organizar"] { --pl-c:#b3760d; } .pl246 [data-tool="img2pdf"] { --pl-c:#128a58; } .pl246 [data-tool="pdf2img"] { --pl-c:#0b7f99; } .pl246 [data-tool="comprimir"] { --pl-c:#2563eb; } .pl246 [data-tool="editar"] { --pl-c:#b02594; } [data-mode="noche"] .pl246 [data-tool="unir"] { --pl-c:#a78bfa; } [data-mode="noche"] .pl246 [data-tool="dividir"] { --pl-c:#ff6369; } [data-mode="noche"] .pl246 [data-tool="organizar"] { --pl-c:#f5b23f; } [data-mode="noche"] .pl246 [data-tool="img2pdf"] { --pl-c:#4ade80; } [data-mode="noche"] .pl246 [data-tool="pdf2img"] { --pl-c:#38bdf8; } [data-mode="noche"] .pl246 [data-tool="comprimir"] { --pl-c:#60a5fa; } [data-mode="noche"] .pl246 [data-tool="editar"] { --pl-c:#f472b6; } /* · PALETA:FIN */ /* ──────────────────────────────────────────────────────────────────────── 2 · LIENZO ------------------------------------------------------------------------ Un ancho máximo generoso y centrado, como Notion o Linear: la rejilla de cuatro columnas en un monitor de 27" sin tope se vuelve ilegible. */ .pl246{ max-width:1180px; margin:0 auto; } /* ── 2.1 · Cabecera de marca ────────────────────────────────────────────── El matraz vectorial de MOD-288 (`data-marca="powerpdf"`) + la palabra, y debajo el «by OMNIA». El tamaño se fuerza con una especificidad mayor que la de `.mk-ico:not([class*="-ico-img"])`, que da 20 px por defecto. */ .pl246-brand{ display:flex; align-items:center; gap:10px; } .pl246-brand span.mk-ico{ width:30px; height:30px; } .pl246-brand .pl246-wm{ font-size:15px; font-weight:800; letter-spacing:.13em; line-height:1.05; color:var(--text); text-transform:uppercase; } .pl246-brand .pl246-by{ display:block; margin-top:3px; font-size:10px; font-weight:600; letter-spacing:.22em; color:var(--dim); text-transform:uppercase; } .pl246-h1{ margin:22px 0 6px; font-size:34px; font-weight:800; letter-spacing:-.015em; line-height:1.05; color:var(--text); } .pl246-lead{ margin:0 0 22px; max-width:62ch; font-size:14px; line-height:1.6; color:var(--text2); } /* ── 2.2 · Fila de arriba: soltar archivo + comienzo rápido ─────────────── Dos columnas asimétricas. `minmax(0,…)` en las dos para que un nombre de archivo largo no ensanche la rejilla. */ .pl246-top{ display:grid; gap:16px; align-items:stretch; grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr); } /* ── 2.3 · Panel de arrastrar y soltar ──────────────────────────────────── Es un