… El JS agrega .abierto en un rAF tras render (para que la transición corra) y al cerrar la quita y re-renderiza tras ~300ms. */ .despliegue { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s var(--ease), opacity .22s var(--ease); } .despliegue.abierto { grid-template-rows: 1fr; opacity: 1; } .despliegue > .despliegue-inner { overflow: hidden; min-height: 0; } /* ── Menú de módulos (filas de opción) ────────────────────────────── NUEVO 2026-07-06 — rediseño aprobado por el usuario en el hub de Insumos y replicado a todos los hubs: las cards verticales de submódulos se leían igual que los KPIs del dashboard y todo se mezclaba. La navegación ahora son FILAS DE OPCIÓN — horizontales, superficie más sólida y radio menor que las cards de datos, icono en cápsula + chevron. Estructura: .menu-list > a.menu-item > .mi-icon(svg) + .mi-text(.mi-title + .mi-desc) + .mi-chev(svg chevron) — deshabilitado: div.menu-item .disabled con .coming-badge en lugar del chevron. */ .menu-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; } .menu-item { display: flex; align-items: center; gap: 16px; padding: 15px 18px; text-decoration: none; cursor: pointer; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; box-shadow: 0 1px 2px rgba(39, 39, 39, .04); transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); } .menu-item:hover { background: rgba(255, 255, 255, .94); border-color: rgba(39, 39, 39, .12); } .menu-item:hover .mi-chev svg { transform: translateX(3px); } .menu-item:hover .mi-icon { background: var(--ink); color: #fff; } .mi-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; /* contiene el destello */ background: rgba(39, 39, 39, .06); color: var(--ink-soft); transition: background .22s var(--ease), color .22s var(--ease); } .mi-icon svg { width: 21px; height: 21px; stroke-width: 1.6; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; position: relative; } /* Destello en la cápsula cuando se pone negra (pedido del usuario 2026-07-06): mismo timing del estándar de botones oscuros (btn-shine 0.9s ease-in-out en loop, aparición instantánea). FIX 2026-07-07 — la banda del gradiente es RELATIVA AL ANCHO del elemento: los stops de los botones (37%→63%) en una cápsula de 42px daban ~11px de banda — se seguía viendo delgada tras el primer ensanche. En elementos chicos los stops se abren mucho más (28%→72% ≈ 18px) para que el barrido se perciba igual de grueso. */ /* FIX 2026-07-07 (iteración 2, verificada con capturas cuadro a cuadro) — abrir los stops SOLO diluía la luz: banda ancha pero tenue, se seguía viendo "delgada". La percepción de grosor necesita un NÚCLEO brillante (.55) con hombros suaves — un brillo definido, no un velo. */ /* FIX 2026-07-07 (iteración 3) — el núcleo era un pico que tocaba el máximo solo en el 50%: seguía leyéndose delgado. Ahora es una MESETA (brillo pleno sostenido del 42% al 58% ≈ un tercio de la cápsula). */ .mi-icon::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, .20) 34%, rgba(255, 255, 255, .55) 42%, rgba(255, 255, 255, .55) 58%, rgba(255, 255, 255, .20) 66%, transparent 76%); transform: translateX(-130%); } .menu-item:not(.disabled):hover .mi-icon::after { animation: btn-shine 1.7s ease-in-out infinite; } .mi-text { min-width: 0; } .mi-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); } .mi-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; overflow: hidden; } .mi-chev { flex: none; margin-left: auto; line-height: 0; color: var(--muted-2); } .mi-chev svg { width: 16px; height: 16px; stroke-width: 2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s var(--ease); } .menu-item.disabled { opacity: .55; pointer-events: none; cursor: default; } .menu-item .coming-badge { flex: none; margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--muted-2); background: rgba(39, 39, 39, .06); padding: 3px 10px; border-radius: var(--r-pill); } /* ── Foco visible ──────────────────────────────────────────────────── */ button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(60, 145, 230, .55); outline-offset: 2px; } .form-input:focus-visible, .form-select:focus-visible { outline: none; } /* ── Revelado de entrada ─────────────────────────────────────────── Al final del stylesheet a propósito: mientras el elemento tiene la clase .reveal esta transición debe ganarle a la de .card (hover) — a igual especificidad decide el orden. GlassUI retira .reveal al terminar la entrada. */ /* FIX 2026-07-03 — coreografía de entrada acelerada para el día a día (pedido del usuario: "más fluido, tipo 60 fps"): duraciones .45/.5s (antes .8/.9s) y los retardos escalonados de TODAS las páginas se escalan a la mitad con calc() — una sola palanca, sin tocar los --d inline de cada página. */ .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .45s var(--ease), transform .5s var(--ease), filter .45s var(--ease); transition-delay: calc(var(--d, 0ms) * 0.5); } .reveal.in { opacity: 1; transform: none; filter: none; } /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 1020px) { .navpills { display: none; } .only-mobile { display: block; } .gtop .only-mobile { margin-left: auto; } .page-head { align-items: flex-start; flex-direction: column; } } @media (max-width: 700px) { main, .page, .page-wide { padding: 14px 18px 56px; } } /* ── Modo ligero (POS / hardware modesto) ────────────────────────── Mantiene el lenguaje (greige, radios, tipografía, acentos) pero elimina el costo GPU: sin blur real ni brillos animados. */ .glass-lite .ambient { display: none; } .glass-lite .card, .glass-lite .table-wrap, .glass-lite .empty-state, .glass-lite .navpills, .glass-lite .icirc, .glass-lite .btn, .glass-lite .qbtn, .glass-lite .pop, .glass-lite .modal-card, .glass-lite .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } .glass-lite .card, .glass-lite .table-wrap, .glass-lite .empty-state { background: rgba(255, 255, 255, .82); } .glass-lite .pop, .glass-lite .modal-card { background: #fdfdfc; } /* ── MODO OSCURO — fase 1: tokens duales (NUEVO 2026-07-23) ───────── Pedido del usuario: claro/oscuro en todo el sitio. El atributo [data-theme="dark"] en (lo pone GlassUI leyendo la MISMA clave localStorage del POS, ttpos_pos_theme) redefine la paleta y ajusta las superficies con blancos quemados. Fase 2 pendiente: barrer los estilos inline de las páginas hacia tokens. Los impresos (PDF) no cambian. */ [data-theme="dark"] { color-scheme: dark; --canvas: #0d0d0d; --ink: #f4f4f2; --ink-soft: #cfcfca; --muted: #8f8f88; --muted-2: #6a6a63; --hairline: rgba(255, 255, 255, .09); --glass: rgba(26, 26, 26, .92); --glass-strong: rgba(32, 32, 32, .96); --glass-border: rgba(255, 255, 255, .10); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .5); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 22px 48px rgba(0, 0, 0, .6); --shadow-pop: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 64px rgba(0, 0, 0, .7); --color-focus-ring: rgba(96, 165, 235, .5); --color-bg-alt: rgba(255, 255, 255, .06); --color-border: rgba(255, 255, 255, .14); --color-border-light: var(--hairline); } /* Superficies con blanco quemado (se llevan a tokens en la fase 2). */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="dark"] textarea.form-input, [data-theme="dark"] .filter-select, [data-theme="dark"] .filter-input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); } [data-theme="dark"] .form-input:hover, [data-theme="dark"] .form-select:hover { background: rgba(255, 255, 255, .10); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .field textarea:focus { background: #242422; } [data-theme="dark"] .modal-card { background: rgba(34, 34, 32, .96); } [data-theme="dark"] .pop { background: rgba(34, 34, 32, .97); } [data-theme="dark"] .notif:hover, [data-theme="dark"] .mitem:hover { background: rgba(255, 255, 255, .07); } /* FIX 2026-07-23 — badges de estado apagados en dark: los tonos -deep (pensados para fondo claro) no contrastan sobre las superficies oscuras. En dark el texto usa el tono brillante de la paleta. */ [data-theme="dark"] .badge.ok, [data-theme="dark"] .badge-produccion { color: var(--green); } [data-theme="dark"] .badge.proc, [data-theme="dark"] .badge-proceso { color: var(--blue); } [data-theme="dark"] .badge.no, [data-theme="dark"] .badge-pendiente { color: var(--red); } [data-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, .04); } [data-theme="dark"] .toggle .tthumb { background: #3c3c3a; } [data-theme="dark"] .gside-toggle { background: rgba(255, 255, 255, .08); } [data-theme="dark"] .icirc .dot { border-color: #222; } [data-theme="dark"] .menu-item { background: rgba(34, 34, 32, .85); border-color: rgba(255, 255, 255, .08); } [data-theme="dark"] .menu-item:hover { background: rgba(48, 48, 46, .95); border-color: rgba(255, 255, 255, .16); } /* Elementos "tinta sólida": en oscuro --ink es claro → el texto blanco fijo se invierte a oscuro para mantener el contraste. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .qbtn.dark, [data-theme="dark"] .menu-item:hover .mi-icon { color: #141414; } /* FIX 2026-07-23 (pedido del usuario) — los iconos LIMA de los botones tinta casi no se ven en oscuro (el botón se invierte a superficie clara): pasan al par oscuro del lima (--lime-deep). */ [data-theme="dark"] .btn-primary svg, [data-theme="dark"] .qbtn.dark svg { stroke: var(--lime-deep); } [data-theme="dark"] .navpills a.active, [data-theme="dark"] .gside .sitem.active { color: #141414; } /* Patrón "tinta sólida" repetido en las páginas (background: var(--ink) + color #fff): en oscuro --ink es claro → el texto pasa a tinta oscura. Clases por página: filter-pill/badge-dark (usuarios), sec-pill/filter-tab (finanzas), tipo-dte-btn/btn-dark (emisión), fam-item (maestra). */ [data-theme="dark"] .filter-pill.active, [data-theme="dark"] .badge-dark, [data-theme="dark"] .sec-pill.active, [data-theme="dark"] .filter-tab.active, [data-theme="dark"] .tipo-dte-btn.active, [data-theme="dark"] .btn-dark, [data-theme="dark"] .fam-item.active { color: #141414; } [data-theme="dark"] .rol-chip { background: rgba(255, 255, 255, .09); } [data-theme="dark"] .avatar { color: #5a6414; } /* Logos Nanuc/Crumb (tinta negra) → blanco. Provisional con invert(); cuando exista la variante blanca del asset se reemplaza. */ [data-theme="dark"] img[src$="nanuc.svg"], [data-theme="dark"] img[src$="nanuc-iso.svg"], [data-theme="dark"] img[src$="club-full.svg"], [data-theme="dark"] img[src$="club-n.svg"], [data-theme="dark"] img[src$="logocrumbpos.svg"] { filter: invert(1); } /* Los IMPRESOS no conocen el modo oscuro (regla del usuario 2026-07-23): ante cualquier window.print(), los tokens vuelven a la paleta clara y los logos dejan de invertirse. Los PDFs generados en el servidor nunca se ven afectados por el theme. */ @media print { [data-theme="dark"] { --canvas: #ffffff; --ink: #272727; --ink-soft: #4a4a46; --muted: #82827c; --muted-2: #a6a69f; --hairline: rgba(39, 39, 39, .08); --glass: rgba(255, 255, 255, .55); --glass-strong: rgba(255, 255, 255, .78); --glass-border: rgba(255, 255, 255, .65); } [data-theme="dark"] img[src$="nanuc.svg"], [data-theme="dark"] img[src$="nanuc-iso.svg"], [data-theme="dark"] img[src$="club-full.svg"], [data-theme="dark"] img[src$="club-n.svg"], [data-theme="dark"] img[src$="logocrumbpos.svg"] { filter: none; } } /* ── Movimiento reducido ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; filter: none; } .ambient i { animation: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }