/* ============================================================ sistema.css — Sistema visual DC Eléctricos ============================================================ ARCHIVO COMPARTIDO E IDÉNTICO EN LAS CINCO PLATAFORMAS: inventariodcelectricos/css/sistema.css remisionesdcelectricos/css/sistema.css catalogodcelectricos/css/sistema.css archivosdcelectricos/css/sistema.css buzondcelectricos/css/sistema.css Si se modifica aquí, hay que copiarlo a las otras cuatro. Se carga desde el header de cada plataforma, así que aplica a todas las pantallas sin tocarlas una por una. EL TEMA es el que ya usaban las plataformas: atributo data-theme ("dark"/"light") y localStorage 'dc-theme'. No se crea uno paralelo, para que el sistema y el contenido de cada pantalla vayan siempre en el mismo tema. REGLAS DEL SISTEMA 1. Un solo juego de tokens, dos temas, un acento por plataforma. 2. El color solo cuando significa algo. El acento se reserva para la acción principal y para lo que está activo. 3. Ningún número se parte ni se recorta: si no cabe, se encoge. 4. Cómodo en el teléfono, denso en el computador. ============================================================ */ /* ─── 1. TOKENS ─────────────────────────────────────────── */ :root{ /* Neutros con sesgo cálido-verde */ --dc-0:#ffffff; --dc-1:#f7f8f5; --dc-2:#eef0ea; --dc-3:#e2e5db; --dc-tx:#14180f; --dc-tx2:#525a49; --dc-tx3:#858e79; --dc-li:rgba(20,24,15,.10); --dc-li2:rgba(20,24,15,.16); --dc-so:0 1px 2px rgba(20,24,15,.05), 0 6px 18px rgba(20,24,15,.06); --dc-so2:0 8px 30px rgba(20,24,15,.14); /* Semánticos: iguales en las cinco plataformas */ --dc-ok:#2f7d32; --dc-ok-s:rgba(47,125,50,.11); --dc-av:#a35b00; --dc-av-s:rgba(163,91,0,.11); --dc-mal:#b3261e; --dc-mal-s:rgba(179,38,30,.10); /* Acento (lo fija data-app en el ) */ --dc-ac:#5f7f16; --dc-ac-tx:#4a6410; --dc-ac-s:rgba(147,193,33,.14); --dc-ac-c:#ffffff; /* Medidas */ --dc-r:13px; --dc-r-btn:10px; --dc-tap:44px; --dc-t:180ms; --dc-bajo:0px; /* alto de la barra inferior, lo fija el JS */ /* Verde corporativo. El de marca es para superficies; el de texto va más oscuro porque el otro no se lee sobre fondo claro. */ --dc-marca:#93c121; --dc-marca-tx:#5f8410; --dc-fuente:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --dc-0:#0d100b; --dc-1:#141810; --dc-2:#1c2117; --dc-3:#262d20; --dc-tx:#e4e9dd; --dc-tx2:#9aa48d; --dc-tx3:#6b7562; --dc-li:rgba(255,255,255,.09); --dc-li2:rgba(255,255,255,.15); --dc-so:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); --dc-so2:0 10px 34px rgba(0,0,0,.5); --dc-ok:#69c46d; --dc-ok-s:rgba(105,196,109,.13); --dc-av:#e2a33f; --dc-av-s:rgba(226,163,63,.13); --dc-mal:#f2837b; --dc-mal-s:rgba(242,131,123,.13); --dc-ac:#9ecb2a; --dc-ac-tx:#b4dc4c; --dc-ac-s:rgba(158,203,42,.15); --dc-ac-c:#0d100b; --dc-marca-tx:#b6dc4a; } } :root[data-theme="dark"]{ --dc-0:#0d100b; --dc-1:#141810; --dc-2:#1c2117; --dc-3:#262d20; --dc-tx:#e4e9dd; --dc-tx2:#9aa48d; --dc-tx3:#6b7562; --dc-li:rgba(255,255,255,.09); --dc-li2:rgba(255,255,255,.15); --dc-so:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); --dc-so2:0 10px 34px rgba(0,0,0,.5); --dc-ok:#69c46d; --dc-ok-s:rgba(105,196,109,.13); --dc-av:#e2a33f; --dc-av-s:rgba(226,163,63,.13); --dc-mal:#f2837b; --dc-mal-s:rgba(242,131,123,.13); --dc-ac:#9ecb2a; --dc-ac-tx:#b4dc4c; --dc-ac-s:rgba(158,203,42,.15); --dc-ac-c:#0d100b; --dc-marca-tx:#b6dc4a; } /* Acento por plataforma — misma saturación, se ven familia */ [data-app="inventario"]{--dc-ac:#5f7f16;--dc-ac-tx:#4a6410;--dc-ac-s:rgba(147,193,33,.14);--dc-ac-c:#fff} [data-app="remisiones"]{--dc-ac:#1f6fb2;--dc-ac-tx:#175a92;--dc-ac-s:rgba(31,111,178,.13);--dc-ac-c:#fff} [data-app="catalogo"] {--dc-ac:#6d4bb5;--dc-ac-tx:#573a95;--dc-ac-s:rgba(109,75,181,.13);--dc-ac-c:#fff} [data-app="archivos"] {--dc-ac:#a3660a;--dc-ac-tx:#845307;--dc-ac-s:rgba(163,102,10,.13);--dc-ac-c:#fff} [data-app="buzon"] {--dc-ac:#0d7d8c;--dc-ac-tx:#0a6470;--dc-ac-s:rgba(13,125,140,.13);--dc-ac-c:#fff} /* Neutros por plataforma — TEMA CLARO Misma escala de luminancia en las cinco (por eso siguen siendo la misma familia) y el matiz del acento de cada una (por eso se reconoce en cuál estás sin leer el nombre). */ [data-app="inventario"]{--dc-1:#f7f8f5;--dc-2:#eef0ea;--dc-3:#e2e5db;--dc-tx:#14180f;--dc-tx2:#525a49;--dc-tx3:#858e79} [data-app="remisiones"]{--dc-1:#f5f7fa;--dc-2:#e9edf3;--dc-3:#dbe2ec;--dc-tx:#0f1419;--dc-tx2:#495363;--dc-tx3:#7b8798} [data-app="catalogo"] {--dc-1:#f8f6fb;--dc-2:#efebf6;--dc-3:#e3dcf0;--dc-tx:#120f18;--dc-tx2:#514a60;--dc-tx3:#847c94} [data-app="archivos"] {--dc-1:#faf8f4;--dc-2:#f2ede4;--dc-3:#e9e0d1;--dc-tx:#171208;--dc-tx2:#574d3c;--dc-tx3:#8b806c} [data-app="buzon"] {--dc-1:#f4f8f9;--dc-2:#e8eff1;--dc-3:#d9e6e9;--dc-tx:#0a1417;--dc-tx2:#455a5f;--dc-tx3:#77898e} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-app="inventario"]{--dc-ac:#9ecb2a;--dc-ac-tx:#b4dc4c;--dc-ac-c:#0d100b;--dc-ac-s:rgba(158,203,42,.15)} :root:not([data-theme="light"])[data-app="remisiones"]{--dc-ac:#5aaee8;--dc-ac-tx:#7ec1ef;--dc-ac-c:#0d100b;--dc-ac-s:rgba(90,174,232,.15)} :root:not([data-theme="light"])[data-app="catalogo"] {--dc-ac:#a98ce8;--dc-ac-tx:#bda4ef;--dc-ac-c:#0d100b;--dc-ac-s:rgba(169,140,232,.15)} :root:not([data-theme="light"])[data-app="archivos"] {--dc-ac:#e0a541;--dc-ac-tx:#ecbb68;--dc-ac-c:#0d100b;--dc-ac-s:rgba(224,165,65,.15)} :root:not([data-theme="light"])[data-app="buzon"] {--dc-ac:#4bc0d0;--dc-ac-tx:#72d0dd;--dc-ac-c:#0d100b;--dc-ac-s:rgba(75,192,208,.15)} } :root[data-theme="dark"][data-app="inventario"]{--dc-ac:#9ecb2a;--dc-ac-tx:#b4dc4c;--dc-ac-c:#0d100b;--dc-ac-s:rgba(158,203,42,.15)} :root[data-theme="dark"][data-app="remisiones"]{--dc-ac:#5aaee8;--dc-ac-tx:#7ec1ef;--dc-ac-c:#0d100b;--dc-ac-s:rgba(90,174,232,.15)} :root[data-theme="dark"][data-app="catalogo"] {--dc-ac:#a98ce8;--dc-ac-tx:#bda4ef;--dc-ac-c:#0d100b;--dc-ac-s:rgba(169,140,232,.15)} :root[data-theme="dark"][data-app="archivos"] {--dc-ac:#e0a541;--dc-ac-tx:#ecbb68;--dc-ac-c:#0d100b;--dc-ac-s:rgba(224,165,65,.15)} :root[data-theme="dark"][data-app="buzon"] {--dc-ac:#4bc0d0;--dc-ac-tx:#72d0dd;--dc-ac-c:#0d100b;--dc-ac-s:rgba(75,192,208,.15)} /* Neutros por plataforma — TEMA OSCURO (misma idea, mismos niveles) */ :root[data-theme="dark"][data-app="inventario"], :root:not([data-theme="light"])[data-app="inventario"]{--dc-0:#0d100b;--dc-1:#141810;--dc-2:#1c2117;--dc-3:#262d20;--dc-tx:#e4e9dd;--dc-tx2:#9aa48d;--dc-tx3:#6b7562;--dc-ac-s:rgba(158,203,42,.15)} :root[data-theme="dark"][data-app="remisiones"], :root:not([data-theme="light"])[data-app="remisiones"]{--dc-0:#0a0d12;--dc-1:#10151d;--dc-2:#171e29;--dc-3:#212a38;--dc-tx:#dde5ef;--dc-tx2:#8e9aab;--dc-tx3:#616d7d;--dc-ac-s:rgba(90,174,232,.15)} :root[data-theme="dark"][data-app="catalogo"], :root:not([data-theme="light"])[data-app="catalogo"]{--dc-0:#0c0a11;--dc-1:#13111b;--dc-2:#1a1826;--dc-3:#252134;--dc-tx:#e3ddf0;--dc-tx2:#9a92ad;--dc-tx3:#6c6580;--dc-ac-s:rgba(169,140,232,.15)} :root[data-theme="dark"][data-app="archivos"], :root:not([data-theme="light"])[data-app="archivos"]{--dc-0:#100e09;--dc-1:#17140e;--dc-2:#1f1b13;--dc-3:#2b251a;--dc-tx:#ece3d2;--dc-tx2:#a3987f;--dc-tx3:#756b56;--dc-ac-s:rgba(224,165,65,.15)} :root[data-theme="dark"][data-app="buzon"], :root:not([data-theme="light"])[data-app="buzon"]{--dc-0:#090f11;--dc-1:#0f1519;--dc-2:#151e22;--dc-3:#1e2a2f;--dc-tx:#daeaee;--dc-tx2:#8ba1a8;--dc-tx3:#5f7379;--dc-ac-s:rgba(75,192,208,.15)} /* ─── 2. LOS NÚMEROS NUNCA SE PARTEN ────────────────────── */ /* Contrapartida de nowrap: si no se puede partir, tiene que caber. El JS reduce el tamaño de los que se salgan (.dc-num-fit). */ .dc-num, .dc-num *, td.dc-der, th.dc-der, [data-num]{ font-variant-numeric:tabular-nums; white-space:nowrap; } .dc-num-fit{ font-size:var(--dc-tam-num, inherit); overflow:hidden; } .dc-der{ text-align:right; } /* ─── 3. BASE ───────────────────────────────────────────── */ /* Desde el PRIMER pintado. La clase la pone el script del , cuando todavía no existe el , así que el fondo, el color y la tipografía ya son los del sistema mientras llegan contenido.css y formularios.css, que van al final del documento. Sin esto se veía un destello de texto suelto sobre blanco que parecía un error de la página. */ html.dc-sistema{ background:var(--dc-1); color:var(--dc-tx); font-family:var(--dc-fuente); } body.dc-sistema{ font-family:var(--dc-fuente); background:var(--dc-1); color:var(--dc-tx); /* Espacio para la barra inferior: que nada quede tapado */ padding-bottom:calc(var(--dc-bajo) + env(safe-area-inset-bottom, 0px)) !important; } body.dc-sistema ::selection{background:var(--dc-ac-s);color:var(--dc-tx)} .dc-sistema :focus-visible{outline:2px solid var(--dc-ac);outline-offset:2px;border-radius:4px} /* ─── 4. CABECERA DE APLICACIÓN ─────────────────────────── */ .dc-top{ position:sticky; top:0; z-index:1200; background:var(--dc-0); border-bottom:1px solid var(--dc-li); padding:.55rem .85rem; display:flex; align-items:center; gap:.6rem; } .dc-top-marca{display:flex;align-items:center;gap:.55rem;min-width:0;text-decoration:none;color:inherit} .dc-top-logo{ width:30px;height:30px;border-radius:9px;background:var(--dc-ac);color:var(--dc-ac-c); display:grid;place-items:center;flex:none;font-weight:700;font-size:.78rem;letter-spacing:-.02em; } .dc-top-tx{min-width:0;display:flex;flex-direction:column;line-height:1.1} .dc-top-nom{font-weight:600;font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;color:var(--dc-tx)} .dc-top-sub{font-size:.62rem;color:var(--dc-tx3);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap} .dc-top-acc{margin-left:auto;display:flex;gap:.3rem;align-items:center} .dc-ic{ width:36px;height:36px;min-width:36px;border-radius:10px;border:1px solid var(--dc-li); background:transparent;color:var(--dc-tx2);display:grid;place-items:center;cursor:pointer; flex:none;padding:0;transition:background var(--dc-t),color var(--dc-t),border-color var(--dc-t); } .dc-ic:hover{background:var(--dc-2);color:var(--dc-tx);border-color:var(--dc-li2)} .dc-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* ─── 5. BARRA INFERIOR (móvil) ─────────────────────────── */ .dc-bajo{ position:fixed; left:0; right:0; bottom:0; z-index:1300; display:none; background:color-mix(in srgb, var(--dc-0) 92%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--dc-li); padding:.35rem .25rem calc(.4rem + env(safe-area-inset-bottom, 0px)); } .dc-bajo-i{ flex:1; min-width:0; background:none; border:none; cursor:pointer; font:inherit; font-size:.62rem; font-weight:600; color:var(--dc-tx3); display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.2rem .1rem; text-decoration:none; border-radius:9px; min-height:var(--dc-tap); } .dc-bajo-i span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .dc-bajo-ic{width:32px;height:24px;border-radius:8px;display:grid;place-items:center; transition:background var(--dc-t)} .dc-bajo-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round} .dc-bajo-i[aria-current="page"]{color:var(--dc-ac-tx)} .dc-bajo-i[aria-current="page"] .dc-bajo-ic{background:var(--dc-ac-s)} @media (max-width:900px){ .dc-bajo{display:flex} } /* El botón flotante viejo y su panel salen de escena en todas las resoluciones: en móvil lo sustituye la barra inferior y en escritorio el menú lateral. Era lo más invasivo de la interfaz. */ .dcs-fab, .cs-fab{display:none !important} /* los dos botones flotantes viejos */ /* Cada plataforma traía su propio menú; ahora manda el del sistema, así que los antiguos se retiran para no duplicar la navegación. */ .dc-sistema .navbar-main, .dc-sistema .side, .dc-sistema .side-ov, .dc-sistema .sidebar, .dc-sistema .cs-nav{ display:none !important; } /* Al retirar esos menús, sus layouts seguían reservando la columna y el contenido quedaba encajonado: la rejilla pasa a una sola. */ .dc-sistema .main, .dc-sistema .content, .dc-sistema .wrap, .dc-sistema .cs-main{ margin-left:0 !important; } .dc-sistema .app, .dc-sistema .shell, .dc-sistema .layout, .dc-sistema .cs-wrap{ grid-template-columns:1fr !important; display:block !important; } /* ─── 5b. MENÚ LATERAL (escritorio) ─────────────────────── */ :root{--dc-lat:214px;} .dc-lat{ position:fixed; left:0; top:0; bottom:0; z-index:1250; overflow:visible; width:var(--dc-lat); display:none; flex-direction:column; background:var(--dc-0); border-right:1px solid var(--dc-li); padding:.7rem .5rem; transition:width var(--dc-t); } /* El logo es identidad, no un control: se dejó de usar como botón porque nadie adivina que un logo pliega el menú. */ .dc-lat-marca-fila{ display:flex; align-items:center; gap:.55rem; width:100%; padding:.2rem .35rem .85rem; min-width:0; } /* El control de plegado es una pastilla montada sobre el borde derecho de la barra, a media altura: no le quita sitio al menú, no compite con el logo y queda donde la mano ya está. */ .dc-lat-plegar{ position:absolute; top:50%; right:-13px; z-index:3; width:26px; height:26px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:var(--dc-0); border:1px solid var(--dc-li); color:var(--dc-tx2); box-shadow:0 2px 6px rgba(0,0,0,.16); transform:translateY(-50%); transition:background var(--dc-t), color var(--dc-t), border-color var(--dc-t), box-shadow var(--dc-t); } .dc-lat-plegar:hover{ background:var(--dc-ac); border-color:var(--dc-ac); color:var(--dc-ac-c); box-shadow:0 3px 10px rgba(0,0,0,.24); } .dc-lat-plegar:focus-visible{outline:2px solid var(--dc-ac);outline-offset:2px} /* En pantallas sin ratón el menú lateral no existe: sobra el mando. */ @media (max-width:900px){ .dc-lat-plegar{display:none} } .dc-lat-marca{min-width:0;display:flex;flex-direction:column;line-height:1.1;overflow:hidden} .dc-lat-menu{display:flex;flex-direction:column;gap:.12rem;overflow-y:auto;flex:1} .dc-lat-i{ display:flex; align-items:center; gap:.65rem; padding:.46rem .6rem; border-radius:9px; color:var(--dc-tx2); text-decoration:none; font-size:.85rem; font-weight:500; white-space:nowrap; transition:background var(--dc-t),color var(--dc-t); } .dc-lat-i:hover{background:var(--dc-2);color:var(--dc-tx)} .dc-lat-i[aria-current="page"]{background:var(--dc-ac-s);color:var(--dc-ac-tx);font-weight:600} .dc-lat-i svg{flex:none} .dc-lat-pie{margin-top:auto;padding-top:.5rem;border-top:1px solid var(--dc-li)} /* Plegado: solo iconos */ .dc-lat.dc-mini{--dc-lat:62px;width:62px} .dc-lat.dc-mini .dc-lat-tx, .dc-lat.dc-mini .dc-lat-marca{display:none} .dc-lat.dc-mini .dc-lat-i{justify-content:center;padding:.46rem} .dc-lat.dc-mini .dc-lat-marca-fila{justify-content:center;padding:.2rem 0 .85rem} /* Etiqueta flotante del menú plegado: al pasar por un icono dice dónde lleva, sin tener que desplegar la barra. Va con posición fija —la coloca el JS— para que no la recorte el desplazamiento del menú ni el borde de la barra. */ .dc-lat-tip{ position:fixed; z-index:1600; pointer-events:none; padding:.36rem .6rem; border-radius:8px; background:var(--dc-tx); color:var(--dc-0); font:600 .78rem/1 var(--dc-fuente); white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.22); opacity:0; transform:translateX(-4px); transition:opacity 130ms, transform 130ms; } .dc-lat-tip.dc-ver{opacity:1; transform:translateX(0)} /* Pico hacia la barra */ .dc-lat-tip::before{ content:''; position:absolute; left:-4px; top:50%; width:8px; height:8px; margin-top:-4px; transform:rotate(45deg); background:var(--dc-tx); border-radius:1px; } @media (prefers-reduced-motion:reduce){ .dc-lat-tip{transition:none} } /* La flecha dice hacia dónde va: apunta a la derecha cuando el menú está plegado (se abre) y a la izquierda cuando está desplegado. */ .dc-lat-chevron{display:grid; place-items:center; transition:transform var(--dc-t)} .dc-lat:not(.dc-mini) .dc-lat-chevron{transform:rotate(180deg)} @media (min-width:901px){ .dc-lat{display:flex} /* El contenido se corre para dejarle sitio al menú */ body.dc-sistema{padding-left:var(--dc-lat) !important; transition:padding-left var(--dc-t)} body.dc-sistema.dc-lat-mini{--dc-lat:62px} .dc-top{margin-left:0} } /* ─── 6. ACCIÓN PRINCIPAL FLOTANTE (móvil) ──────────────── */ .dc-fab{ position:fixed; right:1rem; z-index:1290; bottom:calc(var(--dc-bajo) + .9rem + env(safe-area-inset-bottom, 0px)); width:54px; height:54px; border-radius:18px; border:none; background:var(--dc-ac); color:var(--dc-ac-c); box-shadow:0 6px 22px color-mix(in srgb, var(--dc-ac) 45%, transparent); display:none; place-items:center; cursor:pointer; transition:transform var(--dc-t); } .dc-fab:active{transform:scale(.94)} .dc-fab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} @media (max-width:900px){ .dc-fab.dc-hay{display:grid} } /* ─── 6 bis. HOJA DE "MÁS" (móvil) ────────────────────────── El resto del menú de la plataforma. Sube desde abajo, se lee de un vistazo y se cierra tocando fuera, la X o Escape. */ .dc-mas-fondo{ position:fixed; inset:0; z-index:1450; background:rgba(0,0,0,.45); display:none; align-items:flex-end; justify-content:center; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .dc-mas-fondo.dc-abierta{display:flex} .dc-mas{ background:var(--dc-0); width:100%; max-width:460px; border-radius:20px 20px 0 0; box-shadow:var(--dc-so2); padding:.5rem .9rem calc(.9rem + env(safe-area-inset-bottom, 0px)); max-height:82dvh; display:flex; flex-direction:column; animation:dc-sube .22s cubic-bezier(.2,.8,.3,1); } @media (min-width:560px){ .dc-mas-fondo{align-items:center} .dc-mas{border-radius:20px;max-height:76dvh} } .dc-mas-tirador{width:38px;height:4px;border-radius:99px;background:var(--dc-li2); margin:.15rem auto .55rem} .dc-mas-hd{display:flex;align-items:center;justify-content:space-between; padding-bottom:.6rem;border-bottom:1px solid var(--dc-li);margin-bottom:.35rem} .dc-mas-hd strong{font-size:.95rem;font-weight:600} .dc-mas-lista{overflow-y:auto;-webkit-overflow-scrolling:touch; margin:0 -.25rem;padding:.35rem .25rem} .dc-mas-i{ display:flex;align-items:center;gap:.7rem;min-height:var(--dc-tap); padding:.55rem .6rem;border-radius:11px;text-decoration:none; color:var(--dc-tx);font-size:.86rem;font-weight:500; transition:background var(--dc-t); } .dc-mas-i:active{background:var(--dc-2)} @media (hover:hover){ .dc-mas-i:hover{background:var(--dc-2)} } .dc-mas-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center; background:var(--dc-2);color:var(--dc-tx2);flex:0 0 auto} .dc-mas-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round} .dc-mas-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dc-mas-act{color:var(--dc-ac-tx);font-weight:600} .dc-mas-act .dc-mas-ic{background:var(--dc-ac-s);color:var(--dc-ac-tx)} .dc-mas-vacio{margin:.6rem .2rem;font-size:.8rem;color:var(--dc-tx3)} .dc-mas-pie{display:flex;gap:.5rem;padding-top:.6rem;margin-top:.35rem; border-top:1px solid var(--dc-li)} .dc-mas-b{ flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem; min-height:var(--dc-tap);padding:.5rem .6rem;border-radius:11px; border:1px solid var(--dc-li);background:var(--dc-1);color:var(--dc-tx); font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;text-decoration:none; transition:border-color var(--dc-t); } .dc-mas-b:hover{border-color:var(--dc-li2)} .dc-mas-b svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .dc-mas-salir{color:var(--dc-mal)} /* ─── 7. CUADRÍCULA DE PLATAFORMAS (solo administrador) ── */ .dc-apps-fondo{ position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,.45); display:none; align-items:flex-end; justify-content:center; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .dc-apps-fondo.dc-abierta{display:flex} .dc-apps{ background:var(--dc-0); width:100%; max-width:460px; border-radius:20px 20px 0 0; padding:1rem 1rem calc(1.3rem + env(safe-area-inset-bottom, 0px)); box-shadow:var(--dc-so2); animation:dc-sube .22s cubic-bezier(.2,.8,.3,1); } @media (min-width:560px){ .dc-apps-fondo{align-items:center} .dc-apps{border-radius:20px} } @keyframes dc-sube{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}} .dc-apps-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem} .dc-apps-hd strong{font-size:.95rem;font-weight:600} .dc-apps-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.5rem} .dc-app{ display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem .4rem; border-radius:14px;border:1px solid var(--dc-li);background:var(--dc-1); text-decoration:none;color:var(--dc-tx);font-size:.74rem;font-weight:600;text-align:center; transition:border-color var(--dc-t),transform var(--dc-t); } .dc-app:hover{border-color:var(--dc-li2);transform:translateY(-2px)} .dc-app-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff} .dc-app-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .dc-app[data-de="inventario"] .dc-app-ic{background:#5f7f16} .dc-app[data-de="remisiones"] .dc-app-ic{background:#1f6fb2} .dc-app[data-de="catalogo"] .dc-app-ic{background:#6d4bb5} .dc-app[data-de="archivos"] .dc-app-ic{background:#a3660a} .dc-app[data-de="buzon"] .dc-app-ic{background:#0d7d8c} .dc-app.dc-aqui{border-color:var(--dc-ac);background:var(--dc-ac-s)} /* ─── 8. AVISO FLOTANTE ─────────────────────────────────── */ .dc-toast{ position:fixed; left:50%; z-index:1500; bottom:calc(var(--dc-bajo) + 1.2rem + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(8px); background:var(--dc-tx); color:var(--dc-0); font-family:var(--dc-fuente); font-size:.85rem; font-weight:500; padding:.6rem 1rem; border-radius:12px; box-shadow:var(--dc-so2); display:flex; align-items:center; gap:.5rem; max-width:calc(100vw - 2rem); opacity:0; pointer-events:none; transition:opacity var(--dc-t), transform var(--dc-t); } .dc-toast.dc-ver{opacity:1;transform:translateX(-50%) translateY(0)} .dc-toast svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4; stroke-linecap:round;flex:none} /* ─── 9. TIRAR PARA ACTUALIZAR ──────────────────────────── */ .dc-refresco{ position:fixed; left:50%; top:0; z-index:1350; transform:translate(-50%, -46px); width:34px; height:34px; border-radius:50%; background:var(--dc-0); border:1px solid var(--dc-li); box-shadow:var(--dc-so); display:grid; place-items:center; color:var(--dc-ac-tx); pointer-events:none; } .dc-refresco svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .dc-refresco.dc-girando svg{animation:dc-gira .8s linear infinite} @keyframes dc-gira{to{transform:rotate(360deg)}} /* ─── 10. LA REGLA DE LOS NÚMEROS, SOBRE LO YA EXISTENTE ── Las pantallas actuales parten cifras largas en dos líneas ($12.540.000,00 se veía cortado en el teléfono). Aquí se les aplica la regla a las clases que ya usan, y el JS las encoge hasta que la cifra completa cabe. */ .dc-sistema .inv-kpi-num, .dc-sistema .inv-kpi-n, .dc-sistema .inv-card-pbase, .dc-sistema .inv-price-v, .dc-sistema .db-kpi-num, .dc-sistema .db-num, .dc-sistema .cot-card-num, .dc-sistema .stat-money, .dc-sistema .analysis-item-value, .dc-sistema .stat-number, .dc-sistema .sb-total, .dc-sistema .kpi-n, .dc-sistema [data-num]{ font-variant-numeric:tabular-nums !important; white-space:nowrap !important; overflow:hidden; word-break:normal !important; overflow-wrap:normal !important; font-size:var(--dc-tam-num, inherit); } /* Las tarjetas de cifras necesitan sitio: un importe de nueve dígitos no se lee encogido a 9 px. La rejilla se adapta sola y garantiza un ancho mínimo por tarjeta, en vez de repartir en columnas fijas que dejan la cifra sin espacio. minmax(0,...) evita que una tarjeta con número largo se lleve el ancho de las demás. */ @media (max-width:1100px){ .dc-sistema .inv-kpi-row, .dc-sistema .db-kpi-row, .dc-sistema .cot-kpi-row{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important; } } @media (max-width:560px){ .dc-sistema .inv-kpi{padding:.85rem 1rem !important} } /* Las celdas de importe de cualquier tabla tampoco se parten */ .dc-sistema td, .dc-sistema th{ word-break:normal; overflow-wrap:normal; } /* ─── 11. AJUSTES DE LO EXISTENTE ───────────────────────── */ /* Las tablas nunca desbordan la página: se desplazan en su caja */ .dc-sistema .table-responsive, .dc-sistema .tabla-env{overflow-x:auto;-webkit-overflow-scrolling:touch} @media (prefers-reduced-motion:reduce){ .dc-sistema *,.dc-apps{animation:none !important;transition:none !important} }