/* ═══════════════════════════════════════════════════════════════ La Estancia Black — Stylesheet WAGON Engine · Sistema de gestión TABLE OF CONTENTS ═══════════════════════════════════════════════════════════════ FOUNDATION L66 :ROOT VARIABLES L242 RESETS GLOBALES L372 @KEYFRAMES L682 COMPONENTES/UTILIDADES COMUNES LAYOUT L2884 SIDEBAR + TOPBAR L3933 v7.14.0 — LXTopbar Fase 2: Movimientos L4053 v7.15.0 — LXTopbar Fase 2: Vencimientos L4195 v7.16.0 — LXTopbar Fase 2: Clientes L4197 v7.17.0 — LXTopbar Fase 2: Precios COMPONENTS L6549 NOTIFICACIONES L6939 CHAT FLOAT L7659 MODALES/CHANGELOG L7872 UPDATE BANNER L17132 TOTAL / SUBTOTAL number animations L24687 v7.29.0 — Filter pills junto al título + action-zone a la derecha PAGES L7985 DASHBOARD L8496 STOCK L9227 MOVIMIENTOS L9834 TRANSFERENCIAS L10787 CARGA MASIVA L11159 VENCIMIENTOS L11813 CLIENTES L12856 v7.27.0 — VENCIMIENTOS 2-COLUMN LAYOUT L13448 COSTOS L14973 PRECIOS L15143 CIERRE DE CAJA L16564 VENTA RAPIDA L18932 PEDIDO L24869 v7.30.0 — Dashboard dark chart cards with inner glow L27334 GRID 40/60 — col izq (search + historial) · col der (carrito) L27404 PREP STRIP colapsable L27477 COLLAPSE TOGGLE (chevron — prep form / historial) L27532 HISTORIAL L27690 Cart empty state inteligente (con last cargas) L28652 v7.53.0 — BANNER BORRADOR (info blue) L28718 v7.60.0 — Suggest header + close button styling L28762 v7.60.0 — Fix número visible cuando stage está "done" L28767 v7.60.0 — Stage dots de "active" se ven como "pending" (neutral, no oscuro) L28948 v7.64.0 — Overlay edición gasto/retiro de caja (cc-edit-egreso-*) L29065 v7.65.0 — Historial del cliente: edit/delete actions L29133 v7.68.0 — Nueva Venta del drawer · input qty + unidad inline L30185 KPI strip (compacto, debajo del hero) L34729 DRAWER REDISEÑADO con TABS internos OVERRIDES L19027 @MEDIA QUERIES ═══════════════════════════════════════════════════════════════ */ /* ═══ 01. :ROOT VARIABLES ═══ */ :root { /* WAGON Identity 2026 — v7.31.0 Color System */ --char: #1a1410; /* Variables semánticas v7.12 — reemplazan legacy parch/leather/gold/char */ --paper: #f5efe6; --paper-2: #ede4d7; --border-warm: #d9ccba; --ink: #1a1410; --ink-2: #2c2219; --ink-dark: #1f1914; --accent-warm: #E8663A; --accent-warm-lt: #F0764A; --accent-warm-bg: rgba(232, 102, 58, 0.10); --accent-warm-ln: rgba(232, 102, 58, 0.30); /* v8.5.19 · Ember del sistema nuevo (promovido a global desde .vr2) — es el ACCENT principal del sistema (reemplaza el azul #2563EB). */ --vr2-ember: #F0531E; --vr2-ember-2: #D8431A; --vr2-ember-soft: rgba(240,83,30,.10); --vr2-ember-line: rgba(240,83,30,.30); --vr2-ember-50: #FDEEE8; --vr2-ember-100: #FAD9CC; --ink-82: rgba(26, 20, 16, 0.82); --ink-70: rgba(26, 20, 16, 0.70); /* ── v7.31.0 · Semantic Color System ── */ /* Ember — Brand accent (WAGON) */ --c-ember: #E8663A; --c-ember-hover: #F0764A; --c-ember-soft: rgba(232,102,58,.10); --c-ember-line: rgba(232,102,58,.28); --c-ember-ink: #B84420; /* Green — Success / Al día / Activo */ --c-green: #22A55A; --c-green-soft: rgba(34,165,90,.10); --c-green-line: rgba(34,165,90,.25); --c-green-ink: #1A7A45; /* Red — Error / Vencido / Danger */ --c-red: #E05252; --c-red-soft: rgba(224,82,82,.10); --c-red-line: rgba(224,82,82,.25); --c-red-ink: #A83030; /* Amber — Warning / Pendiente */ --c-amber: #D4882A; --c-amber-soft: rgba(212,136,42,.10); --c-amber-line: rgba(212,136,42,.25); --c-amber-ink: #9A6200; /* Blue — Info / Neutro / Local tags */ --c-blue: #3B82C4; --c-blue-soft: rgba(59,130,196,.10); --c-blue-line: rgba(59,130,196,.25); --c-blue-ink: #3B82C4; /* Info Blue — Apple iOS system blue · alertas informativas vibrantes (v7.53.0) */ --c-info: #0A84FF; --c-info-soft: rgba(10,132,255,.10); --c-info-line: rgba(10,132,255,.28); --c-info-ink: #0058B5; /* Plum — Secondary / Categoría / Local 2 */ --c-plum-soft: rgba(139,92,184,.10); --c-plum-line: rgba(139,92,184,.25); --c-plum-ink: #6B3C98; /* Legacy aliases */ --red: #E05252; --green: #22A55A; --amber: #D4882A; --blue: #3B82C4; --sidebar: 232px; --topbar: 54px; --r: 8px; --r2: 14px; /* ── v7.26.0 · Escala de radios unificada ── */ --radius-xs: 6px; /* tags, badges, pills pequeños */ --radius-sm: 10px; /* inputs, botones, pills */ --radius-md: 14px; /* sub-cards, items internos, mini-panels */ --radius-lg: 18px; /* cards principales, panels, KPIs */ --radius-xl: 22px; /* modales, shells, contenedores grandes */ --radius-full: 999px; /* avatares, dots, pills circulares */ --r-ctrl: 9px; /* radius unificado inputs+selects+botones */ --sh-r1: 2px 3px 6px rgba(26,20,16,.10); /* sombra principal (peso) */ --sh-r2: 0 1px 2px rgba(26,20,16,.06); /* sombra base suave */ --sh-hl: -1px -1.5px 3px rgba(255,252,248,.80); /* highlight arriba-izq */ --sh-it: inset 0 1px 0 rgba(255,255,255,.65); /* filo interno superior */ --sh-bd: 0 0 0 1px rgba(191,180,170,.28); /* hairline border */ var(--sh-r1), var(--sh-r2), var(--sh-hl), var(--sh-it), var(--sh-bd); 3px 4px 8px rgba(26,20,16,.13), 0 1px 2px rgba(26,20,16,.07), var(--sh-hl), var(--sh-it), 0 0 0 1px rgba(191,180,170,.35); 3px 4px 10px rgba(26,20,16,.14), 0 1px 2px rgba(26,20,16,.07), var(--sh-hl), var(--sh-it), 0 0 0 1px rgba(26,20,16,.22); --sans: "Inter", system-ui, sans-serif; --serif: "Inter", system-ui, sans-serif; --display: "Inter", system-ui, sans-serif; --sans-struct: "Inter", system-ui, sans-serif; --mono: "Inter", system-ui, sans-serif; /* ── v7.99.18 · Escala semántica de z-index ── Capas de apilado nombradas. Valores preservan el orden actual. Para apilados intencionales (ej. panel sobre su backdrop) se usa calc(var(--z-X) + offset) en el sitio de uso. */ --z-nav-backdrop: 190; /* backdrop del sidebar */ --z-nav: 200; /* sidebar, topbar, pickers de chrome */ --z-nav-menu: 250; /* nav-dropdown, inspector de movimientos */ --z-banner: 1000; /* banners de notificación (urgente, panel) */ --z-float: 8800; /* botón flotante de chat */ --z-chat-toast: 8900; /* toast de chat */ --z-modal: 9000; /* overlays de modal (modal-overlay, vr) */ --z-panel: 9500; /* paneles altos: alerta-venc, changelog, ticket, fp-drawer, flash */ --z-sheet: 9900; /* bottom-sheet de filtros, fx de cierre */ --z-overlay: 9999; /* login, modal de caja, edit-egreso */ --z-hovercard: 12000; /* hover card de vencimientos del dashboard */ --z-overlay-top: 99980; /* overlays tope: pdv, lxg-modal */ --z-toast: 99999; /* toasts, update-banner, confirm, tooltips de sidebar */ /* ── Cards / Paneles contenedores ── */ --card-bg: #FFFFFF; --card-bg-alt: var(--paper-2); --card-border: 1px solid rgba(26, 20, 16, 0.06); --card-border-thin: 1px solid rgba(26, 20, 16, 0.05); --card-radius: var(--radius-lg); /* v7.26.0 — Premium layered shadows */ --card-shadow: 0 0 0 1px rgba(26, 20, 16, 0.04), 0 1px 2px rgba(26, 20, 16, 0.04), 0 4px 12px rgba(26, 20, 16, 0.04), 0 8px 28px rgba(26, 20, 16, 0.03); --card-shadow-hover: 0 0 0 1px rgba(26, 20, 16, 0.06), 0 2px 4px rgba(26, 20, 16, 0.05), 0 8px 24px rgba(26, 20, 16, 0.07), 0 16px 48px rgba(26, 20, 16, 0.05); 0 0 0 1px rgba(26, 20, 16, 0.03), 0 1px 2px rgba(26, 20, 16, 0.03), 0 2px 8px rgba(26, 20, 16, 0.02); /* ── Texto sobre superficies oscuras ── */ --text-on-dark: #f0e6d6; /* ── Fondo de página (body + .page) ── */ --surface-1: var(--paper-2); /* ── Escala de texto ── */ --t1: #1a1410; --t2: rgba(26, 20, 16, 0.72); --t3: rgba(26, 20, 16, 0.52); --t4: rgba(26, 20, 16, 0.34); --text-meta: rgba(26, 20, 16, 0.72); /* ── Líneas / separadores ── */ --line-soft: rgba(110, 83, 56, 0.18); --line-strong: rgba(110, 83, 56, 0.38); /* ── Ember (alias) ── */ --ember: var(--c-ember); --ember-bg: var(--c-ember-soft); --ember-ln: var(--c-ember-line); 0 2px 8px rgba(26,20,16,0.03); /* ── Motion ── */ --motion-fast: 0.14s; --motion-med: 0.22s; --motion-slow: 0.38s; --ease-ui: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.16, 1, 0.30, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); /* ── LXMotion · Sistema de animación v7.9.0 ── */ /* Curvas — 4 intenciones */ --lx-curve-enter: cubic-bezier(0.16, 1, 0.3, 1); --lx-curve-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --lx-d-fast: 180ms; --lx-d-normal: 280ms; --lx-d-slow: 420ms; --lx-d-deliberate: 640ms; /* Stagger — 3 ritmos */ --lx-stagger-tight: 30ms; --lx-lift-md: 8px; /* ← consolidado desde :root línea 242 */ --ios-chrome-bg: var(--page); /* ← consolidado desde :root línea 245 */ --page: #fbfbfb; /* ← consolidado desde :root línea 20030 */ /* ── Radius scale ── */ --lxg-r-sm: 7px; /* pills, mini badges */ --lxg-r-md: 9px; /* controls (search/select/buttons) */ --lxg-r-lg: 12px; /* card chica, items list */ --lxg-r-xl: 16px; /* card grande, modal */ --lxg-r-pill: 999px; /* pills, dots */ /* ── Shadows ── */ --lxg-shadow-modal: 0 0 0 1px rgba(38,38,38,.06), 0 12px 40px rgba(26,20,16,.18), 0 28px 60px rgba(26,20,16,.10); 0 1px 2px rgba(26,20,16,.06), 0 0 0 1px rgba(26,20,16,.05); /* ── Surfaces ── */ --lxg-surface-card: #fff; --lxg-surface-tinted: rgba(38,38,38,.025); /* totales blocks, soft sections */ --lxg-surface-hover-soft: rgba(26,20,16,.025); /* ── Borders ── */ --lxg-border-faint: 1px solid rgba(38,38,38,.06); /* ── Ink ── */ --lxg-ink: #262626; --lxg-ink-80: rgba(38,38,38,.80); --lxg-ink-60: rgba(38,38,38,.60); --lxg-ink-45: rgba(38,38,38,.45); --lxg-ink-30: rgba(38,38,38,.30); /* ── Motion ── */ --lxg-ease-out: cubic-bezier(.16,1,.3,1); --lxg-dur-fast: .15s; --lxg-dur: .22s; /* ← consolidado desde :root línea 21873 */ --cm2-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --cm2-ease-snap: cubic-bezier(0.32, 0.72, 0, 1); --cm2-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); --cm2-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --cm2-ease-exit: cubic-bezier(0.55, 0, 0.65, 0.2); --cm2-d-instant: 120ms; --cm2-d-micro: 220ms; --cm2-d-normal: 320ms; --cm2-d-medium: 420ms; } /* ═══ 02. RESETS GLOBALES ═══ */ body { background: var(--page); color: var(--char); font-family: var(--sans); font-size: 13px; line-height: 1.5; font-feature-settings: "ss01" 1, "cv11" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* v7.99.2 · Scrollbars con hover zone expandido Channel total 14px (zona de detección), thumb visualmente 6px. Al entrar el mouse en el channel, el thumb se expande a 10px suave. Truco: border:solid transparent + background-clip:padding-box. */ ::-webkit-scrollbar-thumb { background-color: rgba(232,102,58, 0.20); border-radius: 999px; border: 4px solid transparent; background-clip: padding-box; transition: background-color 0.18s ease, border-width 0.18s ease; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(232,102,58, 0.50); border-width: 2px; } /* Cuando el mouse está sobre el channel completo (no solo el thumb), también ensanchamos: padre :hover dispara reglas en hijos via selector descendente que sí funciona en webkit scrollbars. */ ::-webkit-scrollbar:hover { background: rgba(232,102,58, 0.02); } ::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb, *:hover > ::-webkit-scrollbar > ::-webkit-scrollbar-thumb { border-width: 2px; background-color: rgba(232,102,58, 0.40); } /* Firefox: scrollbar-color (Chromium también lo respeta pero lo deja convivir con ::-webkit-scrollbar). NO setear scrollbar-width porque Chromium lo prioriza sobre el width del ::-webkit-scrollbar. */ @supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: rgba(232, 102, 58, 0.30) transparent; } } .lf input::placeholder { color: rgba(240, 230, 214, 0.28); } .mono { font-family: var(--mono); font-weight: 400; font-feature-settings: "tnum" 1, "zero" 1; font-variant-numeric: tabular-nums; } /* v7.99.2 · Modal/inner scrollbars con hover zone (channel 12, thumb 5→8) */ .modal-body::-webkit-scrollbar-thumb { background-color: rgba(128, 103, 79, 0.45); border-radius: 999px; border: 3.5px solid transparent; background-clip: padding-box; transition: background-color 0.18s ease, border-width 0.18s ease; } .modal-body::-webkit-scrollbar-thumb:hover { background-color: rgba(128, 103, 79, 0.70); border-width: 2px; } .modal-body::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb { border-width: 2px; background-color: rgba(128, 103, 79, 0.60); } .cf-body::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 20, 16, 0.32); border-width: 2px; } .cf-input::placeholder { color: rgba(26, 20, 16, 0.36); } html, body{ height: 100%; overflow: hidden; background-color: var(--ios-chrome-bg); } .pr-search-input::placeholder { color:#766960; } .co-search-input::placeholder { color: #B5ADA6; } .sk-search-input::placeholder { color: rgba(26,20,16,0.35); } .modal-body::-webkit-scrollbar, .cf-body::-webkit-scrollbar, .trf-prod-list::-webkit-scrollbar, .trf-history::-webkit-scrollbar { width: 12px; } .cf-body::-webkit-scrollbar-thumb, .trf-prod-list::-webkit-scrollbar-thumb, .trf-history::-webkit-scrollbar-thumb { background-clip: padding-box; background-color: rgba(26, 20, 16, 0.18); border-radius: 999px; border: 3.5px solid transparent; transition: background-color 0.18s ease, border-width 0.18s ease; } #page-cierre .cc3-nota-input::placeholder { color: rgba(26, 20, 16, 0.32); font-style: italic; } #page-cierre .cc3-ventas-scroll::-webkit-scrollbar-thumb:hover { background: rgba(26, 20, 16, 0.22); } #page-cierre .cc3-ventas-scroll::-webkit-scrollbar-thumb, #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body::-webkit-scrollbar-thumb { background: rgba(26, 20, 16, 0.10); border-radius: 999px; border: 2px solid #FFFFFF; } #mov-inspector .mvd-doc::-webkit-scrollbar-thumb { background: rgba(26,20,16,.14); border-radius: 999px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .tb-action-zone .sk-search-input::placeholder, .tb-action-zone .mv2-search-input::placeholder { color: rgba(26,20,16,.38); } /* ═══ 04. @KEYFRAMES ═══ */ @keyframes venc-sonar { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } } @keyframes page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes page-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-5px); } } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: scale(0.95) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes modal-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.96) translateY(8px); } } @keyframes tk-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,82,82, 0.7); } 60% { box-shadow: 0 0 0 7px rgba(224,82,82, 0); } 100% { box-shadow: 0 0 0 0 rgba(224,82,82, 0); } } @keyframes nav-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } @keyframes chat-toast-in { from { transform: translateX(20px) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes urgente-shake-in { 0% { transform: translateX(-4px); } 20% { transform: translateX(4px); } 40% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-1px); } 100%{ transform: translateX(0); } } @keyframes urgente-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } @keyframes urgente-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,68,34,.9); transform: scale(1); } 50% { box-shadow: 0 0 0 8px rgba(255,68,34,0); transform: scale(1.2); } 100% { box-shadow: 0 0 0 0 rgba(255,68,34,0); transform: scale(1); } } @keyframes updateSlideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes updatePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,102,58, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(232,102,58, 0); } } @keyframes urgente-bar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes urgente-bar-slide { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } @keyframes ct-emerge { 0% { transform: translateY(20px) scale(0.92); opacity: 0; filter: blur(2px); } 50% { opacity: 1; filter: blur(0); } 100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); } } @keyframes ct-out { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(8px) scale(0.96); opacity: 0; } } @keyframes ct-pulse-btn { 0%, 100% { box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10), 0 8px 24px rgba(26, 20, 16, 0.20); } 50% { box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10), 0 12px 36px rgba(232,102,58, 0.45), 0 0 0 6px rgba(232,102,58, 0.16); } } @keyframes ct-avatar-ping { 0% { box-shadow: 0 0 0 0 rgba(232,102,58, 0.45); } 100% { box-shadow: 0 0 0 8px rgba(232,102,58, 0); } } @keyframes av-panel-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulse-green { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(1.5); } } @keyframes ccFxCheck { to { stroke-dashoffset: 0; } } @keyframes sbInvHeadBloom { 0% { transform: translateY(2px) scale(.992); background: rgba(232,102,58, 0.0); box-shadow: 0 0 0 0 rgba(232,102,58,0); } 55% { transform: translateY(0) scale(1); background: rgba(232,102,58, 0.09); box-shadow: 0 0 0 5px rgba(232,102,58,.08); } 100% { transform: translateY(0) scale(1); background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 0 rgba(232,102,58,0); } } @keyframes sbInvItemReveal { 0% { opacity: 0; transform: translateY(-4px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes cf-badge-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes nuevo-pop { from { transform: scale(0) translateY(4px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } @keyframes dashClockDigitFlip { 0% { opacity: .2; transform: translateY(7px) rotateX(-62deg); filter: blur(1px); } 54% { opacity: .95; transform: translateY(-1px) rotateX(12deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); } } @keyframes vncPulseRed { 0% { box-shadow: 0 0 0 0 rgba(224,82,82, 0.7); } 70% { box-shadow: 0 0 0 7px rgba(224,82,82, 0); } 100% { box-shadow: 0 0 0 0 rgba(224,82,82, 0); } } @keyframes vncPulseAmber { 0% { box-shadow: 0 0 0 0 rgba(200, 158, 42, 0.7); } 70% { box-shadow: 0 0 0 7px rgba(200, 158, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 158, 42, 0); } } @keyframes vncPulseBoth { 0% { background: #E05252; box-shadow: 0 0 0 0 rgba(224,82,82, 0.75); } 25% { background: #E05252; box-shadow: 0 0 0 7px rgba(224,82,82, 0); } 50% { background: #C89E2A; box-shadow: 0 0 0 0 rgba(200, 158, 42, 0.75); } 75% { background: #C89E2A; box-shadow: 0 0 0 7px rgba(200, 158, 42, 0); } 100% { background: #E05252; box-shadow: 0 0 0 0 rgba(224,82,82, 0); } } @keyframes engine-shimmer { 0% { background-position: 200% center; } 50% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes trfDelBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @keyframes cc3CompBarIn { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @keyframes cc3CompValIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes cc3CompTooltipIn { from { opacity: 0; transform: translate(-50%, -98%); } to { opacity: 1; transform: translate(-50%, -100%); } } @keyframes v3-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes v3-dd-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lx-fade-up { from { opacity: 0; transform: translateY(var(--lx-lift-md)); } to { opacity: 1; transform: translateY(0); } } @keyframes lx-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes lx-bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes lx-stroke-draw { from { stroke-dashoffset: 100; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes lx-bell-ring { 0% { transform: rotate(0deg); } 10% { transform: rotate(12deg); } 25% { transform: rotate(-10deg); } 40% { transform: rotate(8deg); } 55% { transform: rotate(-5deg); } 70% { transform: rotate(3deg); } 85% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @keyframes lx-notif-drop { from { opacity: 0; transform: translateY(-10px) scale(.97); transform-origin: top right; } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lx-tb-actions-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ═══ 05. COMPONENTES/UTILIDADES COMUNES ═══ */ #app { display: none; height: 100vh; overflow: hidden; } #nav-chrome-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .page { display: none !important; padding: 40px 50px 80px !important; background: var(--page); } .page.active { display: block !important; /* v7.99.27 · fade pulido 140ms (de 280ms anterior). Solo opacity — sin transform para evitar layout shift y blur de rasterizado. La keyframe se redefine al final del CSS (v7.99.25 → v7.99.27). */ animation: page-enter 140ms cubic-bezier(.16, 1, .3, 1) both; } .page.leaving { display: block !important; /* v7.99.26 · page-leave keyframe es no-op desde v7.99.25. La página vieja desaparece sincrónicamente (display:none) cuando se le quita .active. La nueva fade-in encima. */ animation: page-leave 0.15s ease forwards; pointer-events: none; } .ph { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid rgba(232,102,58, 0.12); } .btn-prime { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; background: #1a1410; color: rgba(240, 228, 204, 0.88); border: none; border-left: 2px solid rgba(232,102,58, 0.50); font-family: var(--mono); font-size: 8.5px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; cursor: pointer; border-radius: 4px; white-space: nowrap; position: relative; overflow: hidden; transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .btn-prime::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(232,102,58,0.16) 40%, rgba(232,102,58,0.08) 60%, transparent 100% ); transform: translateX(-160%); transition: transform 0.55s cubic-bezier(0.16,1,0.3,1); pointer-events: none; } .btn-prime:hover { background: #120e0b; border-left-color: rgba(232,102,58, 0.88); box-shadow: 0 6px 22px rgba(26, 20, 16, 0.16); } .btn-prime:hover::before { transform: translateX(160%); } .btn-prime:active { background: #0c0a07; box-shadow: none; } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; background: transparent; color: rgba(26, 20, 16, 0.58); border: 1px solid rgba(26, 20, 16, 0.16); font-family: var(--mono); font-size: 8.5px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; border-radius: 4px; white-space: nowrap; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .btn-ghost:hover { border-color: rgba(232,102,58, 0.48); background: rgba(232,102,58, 0.04); color: rgba(26, 20, 16, 0.88); } :where(input, select, textarea):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ember-bg); border-color: var(--accent-warm); } td { padding: 11px 14px; border-bottom: 1px solid rgba(232,102,58, 0.07); color: var(--ink-82); vertical-align: middle; } tr:hover td { background: rgba(232,102,58, 0.03); } .empty { text-align: center; padding: 44px; color: var(--ink-82); font-size: 12px; } .tag { display: inline-block; padding: 2px 8px; font-size: 9px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; border-radius: 3px; font-family: var(--mono); } .tag-l1 { background: var(--c-blue-soft); color: var(--c-blue-ink); border: 1px solid var(--c-blue-line); } .tag-l2 { background: var(--c-plum-soft); color: var(--c-plum-ink); border: 1px solid var(--c-plum-line); } #page-chat { display: none; padding: 0; } #page-chat.active { display: flex; flex-direction: column; height: 100%; } #chat-typing {display:none;align-self:flex-start;align-items:center;gap:7px;padding:2px 0 6px} #chat-pinned-bar {display:none;padding:7px 20px;background:var(--accent-warm-bg);border-bottom:1.5px solid var(--accent-warm-ln);align-items:center;gap:10px;cursor:pointer;flex-shrink:0} #chat-reply-preview {display:none;padding:8px 14px 6px;background:var(--paper-2);border-top:1.5px solid var(--border-warm);align-items:center;gap:8px} #chat-typing.visible, #chat-pinned-bar.visible, #chat-reply-preview.visible { display:flex; } #chat-prod-picker {position:absolute;bottom:100%;left:0;right:0;z-index: var(--z-nav);background:var(--paper);border:1.5px solid var(--border-warm);border-radius:var(--r2) var(--r2) 0 0;box-shadow:0 -8px 24px rgba(26,20,16,.12);max-height:240px;overflow-y:auto;display:none} #chat-prod-picker-search {width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--border-warm);background:var(--paper-2);color:var(--char);font-family:var(--sans);font-size:12px;outline:none} #modal-overlay { position: fixed; inset: 0; background: rgba(35, 29, 26, 0.52); backdrop-filter: blur(2px); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 24px; } #modal-overlay.open { display: flex; animation: overlay-in 0.15s ease both; } #modal-overlay.closing { display: flex; animation: overlay-out 0.18s ease forwards; pointer-events: none; } #modal-overlay.open .modal-entering { animation: modal-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both; } #modal-overlay.closing .modal { animation: modal-out 0.16s ease forwards; } #modal-overlay.stock-fullscreen { padding: clamp(12px, 2.2vw, 24px); } #m-stock:not(.lx-modal) { width: min(980px, 100%); max-width: 980px; max-height: min(92vh, 980px); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fg label { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #766960; font-weight: 500; font-family: var(--sans); margin-bottom: 6px; } .fg input, .fg select, .fg textarea { width: 100%; color: var(--char); font-family: var(--sans); font-size: 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .fg input, .fg select{ color-scheme: light; min-height: 44px; background: #fff; border: 1.5px solid #E5E0DC; padding: 10px 12px; border-radius: 10px; box-shadow: none; } .fg textarea{ color-scheme: light; background: #fff; border: 1.5px solid #E5E0DC; padding: 11px 12px; border-radius: 10px; box-shadow: none; resize: vertical; min-height: 118px; } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: #E8663A; background: #fff; box-shadow: 0 0 0 3px rgba(232,102,58, 0.12); } .fg select option { background: var(--paper); } .fg select option:checked { background: var(--accent-warm); color: #fff; } .fg .hint { font-size: 10px; color: var(--ink-82); margin-top: 6px; font-family: var(--mono); line-height: 1.45; } .qty-row select { width: 112px; flex-shrink: 0; } /* ─── KEYFRAMES GLOBALES ─── */ /* Toast container: spring desde arriba-derecha */ @keyframes tk-in { 0% { opacity: 0; transform: translateX(28px) translateY(-6px) scale(.94); } 60% { opacity: 1; transform: translateX(-3px) translateY(1px) scale(1.01); } 80% { transform: translateX(1px) translateY(0) scale(.995); } 100% { opacity: 1; transform: none; } } /* Toast salida: colapsa hacia arriba */ @keyframes tk-out { 0% { opacity: 1; transform: none; max-height: 120px; margin-bottom: 0; padding-top: 13px; padding-bottom: 13px; } 40% { opacity: 0; transform: translateX(18px) scale(.95); } 100% { opacity: 0; transform: translateX(20px); max-height: 0; margin-bottom: -8px; padding-top: 0; padding-bottom: 0; } } /* Acento izquierdo: dibuja de arriba a abajo */ @keyframes tk-accent-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } } /* Ícono: pop con rebote */ @keyframes tk-icon-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); } 55% { opacity: 1; transform: scale(1.18) rotate(3deg); } 75% { transform: scale(0.94) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } } /* Flash de brillo en el ícono */ @keyframes tk-icon-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } /* Label: sube y aparece */ @keyframes tk-label-in { from { opacity: 0; transform: translateY(5px); letter-spacing: .35em; } to { opacity: 1; transform: none; letter-spacing: .2em; } } /* Mensaje: sube y aparece */ @keyframes tk-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Botón cerrar: fade */ @keyframes tk-close-in { from { opacity: 0; transform: scale(.6) rotate(-45deg); } to { opacity: 1; transform: none; } } /* Barra de progreso: shrink desde izq */ @keyframes tk-progress-run { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Barra shimmer */ @keyframes tk-progress-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* Backdrop: fade */ @keyframes np-backdrop-in { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(3px); } } /* Panel header: baja desde arriba */ /* Título Fraunces: fade + ligero scale */ @keyframes np-title-in { from { opacity: 0; transform: translateX(-8px) scale(.97); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } } /* Badge count: pop */ @keyframes np-badge-pop { 0% { opacity: 0; transform: scale(0) translateY(4px); } 65% { transform: scale(1.2) translateY(-1px); } 100% { opacity: 1; transform: none; } } /* Filter pills: cada pill entra desde abajo */ @keyframes np-pill-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } } /* Item: entra desde la derecha con rebote */ @keyframes np-item-in { 0% { opacity: 0; transform: translateX(16px); } 60% { opacity: 1; transform: translateX(-2px); } 100% { opacity: 1; transform: none; } } /* Dot interno del item: pop */ @keyframes np-dot-pop { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } } /* Eyebrow del item */ @keyframes np-eyebrow-in { from { opacity: 0; transform: translateX(10px); letter-spacing: .32em; } to { opacity: 1; transform: none; letter-spacing: .2em; } } /* Título del item */ @keyframes np-item-title-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Detalle del item */ @keyframes np-item-detail-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Footer del item (time + CTA) */ @keyframes np-item-footer-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } /* Unread dot: pulso continuo */ @keyframes np-unread-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(232,102,58,.20); transform: scale(1); } 50% { box-shadow: 0 0 0 5px rgba(232,102,58,.0); transform: scale(1.1); } } /* Badge topbar: pop al recibir */ @keyframes badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 70% { transform: scale(.88); } 100% { transform: scale(1); } } /* Bell ring mejorado */ @keyframes bell-ring { 0% { transform: rotate(0) scale(1); } 8% { transform: rotate(-18deg) scale(1.08); } 18% { transform: rotate(14deg) scale(1.06); } 28% { transform: rotate(-10deg) scale(1.04); } 38% { transform: rotate(7deg) scale(1.02); } 48% { transform: rotate(-4deg) scale(1.01); } 60% { transform: rotate(2deg); } 100% { transform: rotate(0) scale(1); } } /* Empty state: flota suavemente */ @keyframes np-empty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ── TOAST CONTAINER ── */ /* ── TOAST BASE ── */ /* ── TOAST ICON ── */ .tk-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); margin-top: 1px; position: relative; overflow: hidden; animation: tk-icon-pop .5s .06s cubic-bezier(.16,1,.3,1) both; } .tk-icon svg { width: 14px; height: 14px; position: relative; z-index: 1; } /* Shimmer de brillo post-pop */ .tk-icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 200% 100%; animation: tk-icon-flash .5s .2s ease forwards; opacity: 0; } /* ── TOAST BODY ── */ .tk-label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.30); line-height: 1; animation: tk-label-in .4s .12s cubic-bezier(.16,1,.3,1) both; } .tk-msg { font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.88); line-height: 1.4; word-break: break-word; animation: tk-msg-in .42s .18s cubic-bezier(.16,1,.3,1) both; } /* ── TOAST CLOSE ── */ .tk-close { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; color: rgba(255,255,255,.20); border-radius: 7px; margin-top: 2px; transition: color .15s, background .15s, transform .15s; animation: tk-close-in .35s .26s cubic-bezier(.16,1,.3,1) both; } .tk-close:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.09); transform: scale(1.1) rotate(90deg); } /* ── PROGRESS BAR ── */ .tk-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2.5px; background: rgba(255,255,255,.04); } .tk-progress-bar { height: 100%; width: 100%; transform-origin: left; background: rgba(255,255,255,.22); background-image: linear-gradient( 90deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.1) 100% ); background-size: 200% 100%; animation: tk-progress-run var(--tk-life, 3500ms) .3s linear forwards, tk-progress-shimmer 2.5s 1s ease-in-out infinite; } /* ── TOAST TYPES ── */ .tk.ok .tk-icon::after { background-image: linear-gradient(130deg, transparent 30%, rgba(34,165,90,.45) 50%, transparent 70%); } .tk.er .tk-icon::after { background-image: linear-gradient(130deg, transparent 30%, rgba(224,82,82,.45) 50%, transparent 70%); } .tk.wn .tk-icon::after { background-image: linear-gradient(130deg, transparent 30%, rgba(212,136,42,.45) 50%, transparent 70%); } /* ── TOPBAR NOTIF BUTTON ── */ .tb-notif-btn.ringing { animation: bell-ring .65s cubic-bezier(.36,.07,.19,.97); } /* ── BADGE ── */ /* ── NOTIF BACKDROP ── */ /* ── NOTIF PANEL ── */ .notif-filter-pill:nth-child(1) { animation-delay: .14s; } .notif-filter-pill:nth-child(4) { animation-delay: .26s; } .notif-filter-pill.on { background: #1A1410; color: rgba(255,255,255,.90); border-color: #1A1410; transform: none; } /* ── NOTIF LIST ── */ /* ── GROUP LABEL ── */ .notif-group-label { display: block; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(26,20,16,.28); padding: 14px 20px 6px; pointer-events: none; } /* ── NOTIF ITEM ── */ .notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px 13px 20px; cursor: pointer; position: relative; border-left: 2.5px solid transparent; transition: background .16s ease; /* stagger por índice --i */ animation: np-item-in .44s cubic-bezier(.16,1,.3,1) calc(.28s + var(--i, 0) * 0.05s) both; } .notif-item:hover { background: rgba(26,20,16,.03); } .notif-item.unread { background: rgba(232,102,58,.025); border-left-color: #E8663A; } .notif-item.unread:hover { background: rgba(232,102,58,.045); } /* ── ITEM: DOT ICONO ── */ .notif-item-dot { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: rgba(26,20,16,.05); display: flex; align-items: center; justify-content: center; margin-top: 1px; font-size: 13px; line-height: 1; transition: transform .2s cubic-bezier(.16,1,.3,1); animation: np-dot-pop .45s cubic-bezier(.16,1,.3,1) calc(.32s + var(--i, 0) * 0.05s) both; } .notif-item:hover .notif-item-dot { transform: scale(1.08) rotate(-3deg); } .notif-item[data-tipo="vencimiento"] .notif-item-dot { background: rgba(224,82,82,.10); } .notif-item[data-tipo="sistema"] .notif-item-dot { background: rgba(26,20,16,.07); } .notif-item[data-tipo="transferencia"].notif-item-dot { background: rgba(26,20,16,.06); } .notif-item[data-tipo="vencimiento"] .notif-item-dot::before { content: "⚠"; font-size: 12px; } .notif-item[data-tipo="stock"] .notif-item-dot::before { content: "📦"; font-size: 11px; } .notif-item[data-tipo="fidelizacion"] .notif-item-dot::before { content: "★"; font-size: 12px; color: #22A55A; } .notif-item[data-tipo="transferencia"].notif-item-dot::before { content: "↗"; font-size: 14px; color: #766960; font-weight: 700; } .notif-item[data-tipo="sistema"] .notif-item-dot::before { content: "⚙"; font-size: 12px; color: #766960; } .notif-item[data-tipo="stock"] .notif-item-dot, .notif-item[data-tipo="cobranza"] .notif-item-dot { background: rgba(212,136,42,.10); } .notif-item[data-tipo="cobranza"] .notif-item-dot::before { content: "🏦"; font-size: 11px; } /* ── ITEM BODY ── */ .notif-item-eyebrow { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #766960; line-height: 1; margin-bottom: 3px; animation: np-eyebrow-in .38s cubic-bezier(.16,1,.3,1) calc(.34s + var(--i, 0) * 0.05s) both; } .notif-item-title { font-family: var(--sans); font-size: 13px; font-weight: 600; color: #1A1410; line-height: 1.35; animation: np-item-title-in .38s cubic-bezier(.16,1,.3,1) calc(.38s + var(--i, 0) * 0.05s) both; } .notif-item.read .notif-item-title { font-weight: 500; color: #3a3128; } .notif-item-detail { font-family: var(--sans); font-size: 12px; font-weight: 400; color: #766960; line-height: 1.4; margin-top: 2px; animation: np-item-detail-in .38s cubic-bezier(.16,1,.3,1) calc(.42s + var(--i, 0) * 0.05s) both; } .notif-item-footer { display: flex; align-items: center; gap: 10px; margin-top: 6px; animation: np-item-footer-in .38s cubic-bezier(.16,1,.3,1) calc(.46s + var(--i, 0) * 0.05s) both; } .notif-item-time { font-family: var(--mono); font-size: 9px; color: rgba(26,20,16,.28); letter-spacing: .06em; } .notif-item-cta { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #E8663A; background: transparent; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color .14s, gap .2s; } .notif-item-cta:hover { color: #a04e22; gap: 8px; } .notif-item-cta svg { width: 9px; height: 9px; flex-shrink: 0; } /* ── UNREAD DOT ── */ .notif-item-unread-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #E8663A; margin-top: 8px; animation: np-badge-pop .4s cubic-bezier(.16,1,.3,1) calc(.32s + var(--i, 0) * 0.05s) both, np-unread-pulse 2.4s 1s ease-in-out infinite; } /* ── EMPTY STATE ── */ .notif-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 24px 40px; text-align: center; } .notif-empty-ico { color: rgba(26,20,16,.15); display: block; animation: np-empty-float 3.5s ease-in-out infinite; } .notif-empty-title { font-family: var(--serif); font-size: 16px; font-weight: 500; color: #3a3128; letter-spacing: -.005em; animation: np-item-title-in .5s .1s both; } .notif-empty-sub { font-family: var(--sans); font-size: 12px; color: #766960; animation: np-item-detail-in .5s .18s both; } .ni#nav-chat.has-notif { background: rgba(224,82,82, 0.1); box-shadow: inset 0 0 0 1.5px rgba(224,82,82, 0.5); color: var(--text-on-dark); animation: nav-shake 0.4s ease 0.2s; } .sound-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--paper); border: 1.5px solid var(--border-warm); border-radius: 20px; cursor: pointer; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-70); font-family: var(--sans); transition: all 0.15s; user-select: none; } .sound-toggle:hover { border-color: var(--accent-warm-ln); color: var(--char); } .sound-toggle.active { border-color: var(--accent-warm-ln); color: var(--accent-warm); background: var(--accent-warm-bg); } .pin-toggle:hover, .pin-toggle.on { opacity: 1; filter: drop-shadow(0 1px 3px rgba(232,102,58, 0.4)); } #urgente-banner { position: fixed; top: 0; left: var(--sidebar); right: 0; z-index: var(--z-banner); display: none; flex-direction: column; overflow: hidden; pointer-events: none; box-shadow: 0 4px 24px rgba(158, 26, 10, 0.35); } #menu-toggle:hover { border-color: var(--accent-warm); background: var(--accent-warm-bg); } #menu-toggle span { display: block; width: 16px; height: 1.5px; background: var(--char); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } #menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } #menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } #menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } #btn-venta-rapida-float { position: fixed; bottom: 24px; right: 24px; z-index: 500; width: 56px; height: 56px; background: linear-gradient(135deg, var(--accent-warm), #e8924a); border: none; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(232,102,58, 0.45); transition: transform 0.2s, box-shadow 0.2s; color: #fff; } #btn-venta-rapida-float:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(232,102,58, 0.55); } #btn-venta-rapida-float svg { width: 24px; height: 24px; } #urgente-flash { position: fixed; bottom: 0; left: var(--sidebar); right: 0; height: 0; z-index: calc(var(--z-panel) + 290); pointer-events: none; background: linear-gradient(90deg, #8a0a04, #cc1a0a, #8a0a04); background-size: 200% 100%; opacity: 0; transition: height .35s ease, opacity .35s ease; } #urgente-flash.visible { height: 4px; opacity: 1; animation: urgente-bar-pulse 2s ease infinite, urgente-bar-slide 3s linear infinite; } #changelog-overlay { position: fixed; inset: 0; background: rgba(10,8,7,.64); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: calc(var(--z-panel) + 100); display: none; align-items: center; justify-content: center; padding: 20px; } #changelog-modal { background: var(--paper); border: 1.5px solid var(--border-warm); border-radius: var(--r2); width: 480px; max-width: 100%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(26,20,16,.35); animation: pop .2s ease; } .stock-expand-btn { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-2); border: 1.5px solid var(--border-warm); border-radius: 999px; cursor: pointer; color: var(--ink-70); padding: 0; transition: transform .2s, border-color .15s, color .15s, background .15s; line-height: 1; flex-shrink: 0; } .stock-expand-btn:hover { border-color: var(--accent-warm-ln); color: var(--accent-warm); } .stock-expand-btn.open { transform: rotate(90deg); color: var(--accent-warm); border-color: var(--accent-warm-ln); } .stock-prod-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .stock-warn-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--amber); background: rgba(232,102,58,.10); border: 1px solid rgba(232,102,58,.30); border-radius: 999px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; } .stock-lotes-row.open { display: table-row; } .stock-lotes-cell { padding: 8px 14px 10px 38px !important; background: rgba(237, 228, 215, 0.48); border-bottom: 1px solid var(--border-warm); } #alerta-venc-overlay { position: fixed; top: max(0px, env(safe-area-inset-top, 0px)); right: 0; bottom: max(0px, env(safe-area-inset-bottom, 0px)); left: 0; background: rgba(245, 239, 230, 0.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: var(--z-panel); display: none; align-items: center; justify-content: center; padding: 22px; } #alerta-venc-panel { background: var(--paper); border-radius: 20px; border: 1px solid rgba(205, 188, 165, 0.95); box-shadow: 0 24px 52px rgba(14, 10, 8, 0.34); width: min(620px, 100%); max-height: min(84vh, 780px); display: flex; flex-direction: column; overflow: hidden; animation: av-panel-in 0.22s ease-out; } #alerta-venc-overlay.open #alerta-venc-panel { animation: av-panel-in 0.22s ease-out; } .ni[data-tip]::after { content: attr(data-tip); position: fixed; left: 192px; background: var(--char); color: var(--text-on-dark); font-size: 11.5px; font-family: var(--sans); font-weight: 400; line-height: 1.5; padding: 9px 13px; border-radius: 10px; white-space: normal; width: 200px; pointer-events: none; opacity: 0; transform: translateX(-6px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: var(--z-toast); box-shadow: 0 6px 24px rgba(20,12,8,.22); } .ni[data-tip]::before { content: ""; position: fixed; left: 185px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 7px solid var(--char); pointer-events: none; opacity: 0; transform: translateX(-6px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: var(--z-toast); } .ni[data-tip]:hover::after, .ni[data-tip]:hover::before { opacity: 1; transform: translateX(0); transition-delay: 0.4s; } .ticket-card::before, .nota-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 14px; border-bottom: 1px solid rgba(217,204,186,.5); transition: background .1s; } .nota-texto { font-size: 12px; color: var(--char); line-height: 1.45; word-break: break-word; } .nota-meta { font-size: 9px; color: var(--ink-70); font-family: var(--mono); margin-top: 2px; } .nota-del { background: none; border: none; color: var(--ink-70); cursor: pointer; padding: 2px 3px; border-radius: 4px; opacity: .35; transition: opacity .12s, color .12s; flex-shrink: 0; } /* v7.92.0 · Sidebar items refinement - Más respiro vertical (1px → 3px) entre items - Active sin border-left (el "rectángulo de color" que no gustaba) - Active state limpio: solo background ember + color text + font-weight realzado - Border-radius más generoso (6 → 8px) */ .ni{ cursor: pointer; user-select: none; position: relative; display: flex; align-items: center; gap: 10px; margin: 3px 10px; padding: 8px 13px; color: rgba(240, 230, 214, 0.52); font-size: 12px; border-radius: 8px; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } .ni svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.55; transition: opacity var(--motion-fast) var(--ease-ui); } .ni:hover { color: rgba(240, 230, 214, 0.86); background: rgba(255, 255, 255, 0.05); } .ni:hover svg { opacity: 0.80; } .ni.active svg { opacity: 1; color: rgba(232,102,58, 0.92); } .wagon-label { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246, 239, 226, 0.16); margin-bottom: 5px; display: block; } .wagon-logo{ height: auto; width: auto; object-fit: contain; max-width: 100px; opacity: 0.70; transition: opacity var(--motion-med) var(--ease-ui); filter: none; } .btn-out { width: 100%; padding: 8px 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(246, 239, 226, 0.34); font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; border-radius: 5px; transition: border-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui); } .btn-out:hover { border-color: rgba(232,102,58, 0.35); color: rgba(232,102,58, 0.80); background: rgba(232,102,58, 0.05); } .demo-pill { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; color: var(--accent-warm); border: 1px solid rgba(232,102,58, 0.28); background: rgba(232,102,58, 0.07); padding: 3px 9px; border-radius: 4px; } th{ font-family: var(--mono); text-align: left; padding: 9px 14px; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-70); font-weight: 600; background: var(--paper-2); border-bottom: 1.5px solid var(--border-warm); white-space: nowrap; } table td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid rgba(217,204,186,.5); font-size: 12.5px; color: var(--char); } tbody tr { transition: background .1s; } td.mono { font-family: var(--mono); } #chat-float { position: fixed; inset: 0; z-index: var(--z-float); pointer-events: none; } #chat-float-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; background: #fdfcfb; border-left: 1px solid rgba(26, 20, 16, 0.08); box-shadow: -1px 0 0 rgba(26, 20, 16, 0.04), -12px 0 32px rgba(26, 20, 16, 0.06), -32px 0 80px rgba(26, 20, 16, 0.08); display: flex; flex-direction: column; overflow: hidden; pointer-events: all; transform: translateX(0); transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } #chat-float-panel.hidden { transform: translateX(100%); pointer-events: none; } #cf-pinned-bar { display: none; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(232,102,58, 0.05); border-bottom: 1px solid rgba(232,102,58, 0.16); cursor: pointer; flex-shrink: 0; transition: background 0.14s; } .btn-ghost:active, #cf-pinned-bar:hover { background: rgba(232,102,58, 0.08); } #cf-reply-preview { display: none; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(26, 20, 16, 0.06); background: rgba(232,102,58, 0.04); } #cf-prod-picker { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 20; background: #FFFFFF; border-top: 1px solid rgba(26, 20, 16, 0.06); box-shadow: 0 -8px 24px rgba(26, 20, 16, 0.08); display: none; max-height: 240px; overflow-y: auto; } #cf-prod-picker-search { width: 100%; border: none; border-bottom: 1px solid rgba(26, 20, 16, 0.06); background: rgba(26, 20, 16, 0.025); color: #1A1410; padding: 11px 14px; font-size: 12px; font-family: var(--sans); outline: none; } #chat-float-btn { position: fixed; right: 24px; bottom: 24px; width: 52px; height: 52px; background: #1A1410; border: none; border-radius: 50%; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10), 0 8px 24px rgba(26, 20, 16, 0.20); cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: all; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s, box-shadow 0.18s, opacity 0.24s; z-index: calc(var(--z-float) + 1); } body:has(#mov-inspector .mvd-hd) #chat-float-btn, body:has(#mov-inspector .mvd-doc) #chat-float-btn { opacity: 0; pointer-events: none; transform: scale(0.7); transition: opacity 0.18s ease, transform 0.18s ease; } #chat-float-btn:hover { transform: scale(1.06); background: #2A1F18; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10), 0 12px 32px rgba(26, 20, 16, 0.28); } #chat-float-btn svg { width: 22px; height: 22px; stroke: #F5EFE6; stroke-width: 2; fill: none; } #cf-badge { position: absolute; top: -2px; right: -2px; background: #C0392B; color: #FFF; font-size: 9.5px; font-weight: 800; font-family: var(--mono); min-width: 18px; height: 18px; border-radius: 999px; display: none; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fdfcfb; letter-spacing: 0; } #cf-badge.visible { display: flex; animation: cf-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } #nuevo-chat-fab { position: absolute; top: -5px; left: -5px; margin-left: 0; padding: 2px 4px; font-size: 7px; border: 2px solid #fdfcfb; border-radius: 4px; z-index: 1; } @supports (padding: max(0px)) { @media (max-width: 960px) { body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background-color: var(--ios-chrome-bg); } .topbar{ padding: 0 14px; gap: 10px; justify-content: space-between !important; padding-top: max(0px, env(safe-area-inset-top, 0px)); height: calc(var(--topbar) + max(0px, env(safe-area-inset-top, 0px))); } #app, #main { background-color: var(--page); } } } #dash-venc-hover-card{ position: absolute; z-index: var(--z-hovercard); width: min(360px, 84vw); max-height: 340px; overflow: auto; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.985); transition: opacity .16s ease, transform .16s ease; border: 1px solid rgba(232,102,58, 0.34); border-radius: 12px; padding: 10px 10px 8px; background: linear-gradient(180deg, #fffaf4 0%, #f5ece0 100%); border-color: rgba(232,102,58,0.28); box-shadow: 0 20px 48px rgba(26,20,16,0.22); } #menu-toggle{ width: 38px; height: 38px; background: none; border: 1.5px solid var(--border-warm); border-radius: var(--r); color: var(--char); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; transition: border-color 0.15s, background 0.15s; display: none; } #tb-ni-vencimientos.has-alert::after { content: ""; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; pointer-events: none; } #tb-ni-vencimientos.has-vencidos:not(.has-sincontrolar)::after { background: #E05252; animation: vncPulseRed 1.6s ease-out infinite; } #tb-ni-vencimientos.has-sincontrolar:not(.has-vencidos)::after { background: #C89E2A; animation: vncPulseAmber 2s ease-out infinite; } #tb-ni-vencimientos.has-vencidos.has-sincontrolar::after { animation: vncPulseBoth 2.8s ease-in-out infinite; } #tb-ni-vencimientos.active.has-alert::after { box-shadow: none; } /* v7.83.0: action-zone se empuja a la derecha — todo el bloque (search + selects + primary CTA + indicators) queda agrupado a la derecha, junto al título sólo por la izquierda hay espacio. */ #cc-donut-svg text { pointer-events: none; } #pages > .page, #pages > .page.section-core { padding: 40px 50px 80px; box-sizing: border-box; } #trf-obs { width: 100%; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 10px; padding: 10px 12px; font-family: var(--sans); font-size: 13px; color: #1A1410; resize: vertical; min-height: 60px; outline: none; transition: border-color 0.16s, background 0.16s; } body, input, select, textarea, button { font-family: var(--sans); font-feature-settings: "kern" 1, "liga" 1, "calt" 1; letter-spacing: -0.005em; } /* v7.83.0: removido margin-left:auto de topbar-right — ahora action-zone usa auto y empuja TODO el bloque (search + selects + primary CTA) junto a la derecha, sin dejar gap entre ellos. */ .topbar .topbar-right { margin-left: 0; } #tb-primary-zone { display: flex; align-items: center; margin-right: 4px; } /* ════════════════════════════════════════════════════ DRAWER DETALLE DE MOVIMIENTO — v7.25.0 Premium ════════════════════════════════════════════════════ */ /* ── Keyframes ── */ @keyframes mvdSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes mvdFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes mvdPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.35); } } @keyframes mvdTotalReveal { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mvdBtnIn { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } } #mov-inspector { background: linear-gradient(168deg, #FAFAF9 0%, #FFFFFF 38%, #FEFDFB 100%) !important; display: flex; flex-direction: column; border-left: 1px solid rgba(26,20,16,.06); } #mov-inspector .mvd-doc { flex: 1; overflow-y: auto; min-height: 0; padding: 0; scrollbar-width: thin; scrollbar-color: rgba(26,20,16,.18) transparent; animation: mvdSlideIn .44s cubic-bezier(.16,1,.3,1) both; } /* ── Header ── */ .mvd-hd { padding: 22px 26px 18px; border-bottom: 1px solid rgba(26,20,16,.06); flex-shrink: 0; background: linear-gradient(180deg, #F3F2F0 0%, #F8F7F6 100%); animation: mvdFadeUp .4s cubic-bezier(.16,1,.3,1) .06s both; } .mvd-hd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } /* Status badge */ .mvd-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-full); background: rgba(34,165,90,.10); color: rgba(22,84,46,.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; } .mvd-status:hover { transform: scale(1.04); box-shadow: 0 2px 8px rgba(34,165,90,.12); } .mvd-st-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .mvd-st-completada .mvd-st-dot { animation: mvdPulse 2.2s ease-in-out infinite; } /* Back button */ .mvd-esc { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(26,20,16,.10); border-radius: var(--radius-xs); padding: 5px 11px 5px 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.58); cursor: pointer; transition: all .18s cubic-bezier(.16,1,.3,1); } .mvd-esc:hover { background: rgba(26,20,16,.05); border-color: rgba(26,20,16,.18); color: #1A1410; transform: translateX(-2px); } .mvd-esc:active { transform: translateX(-1px) scale(.97); } .mvd-esc svg { color: rgba(26,20,16,.40); transition: color .18s, transform .18s; } .mvd-esc:hover svg { color: #1A1410; transform: translateX(-1px); } .mvd-esc-txt { font-size: 11.5px; } .mvd-esc-key { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; background: rgba(26,20,16,.06); border-radius: 4px; padding: 2px 5px; color: rgba(26,20,16,.42); margin-left: 3px; transition: background .15s; } .mvd-esc:hover .mvd-esc-key { background: rgba(26,20,16,.10); } /* Ticket eyebrow + number */ .mvd-eyebrow { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(26,20,16,.35); margin-bottom: 5px; } .mvd-num-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .mvd-num { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: #1A1410; line-height: 1; background: linear-gradient(135deg, #1A1410 60%, rgba(232,102,58,.7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mvd-copy { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: rgba(255,255,255,.6); border: 1px solid rgba(26,20,16,.10); border-radius: var(--radius-xs); color: rgba(26,20,16,.40); cursor: pointer; transition: all .18s cubic-bezier(.16,1,.3,1); flex-shrink: 0; } .mvd-copy:hover { background: rgba(26,20,16,.05); border-color: rgba(26,20,16,.18); color: #1A1410; transform: scale(1.08); } .mvd-copy-ok { color: rgba(22,84,46,.85); border-color: rgba(22,84,46,.30); background: rgba(34,165,90,.06); } .mvd-meta { font-family: var(--mono); font-size: 12px; font-weight: 500; color: rgba(26,20,16,.42); letter-spacing: 0.01em; } /* ── Sections ── */ .mvd-sec { padding: 20px 26px; border-bottom: 1px solid rgba(26,20,16,.05); animation: mvdFadeUp .42s cubic-bezier(.16,1,.3,1) both; } .mvd-sec:nth-child(1) { animation-delay: .1s; } .notif-filter-pill:nth-child(3), .mvd-sec:nth-child(3) { animation-delay: .22s; } .mvd-sec-title { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(26,20,16,.34); margin-bottom: 14px; position: relative; padding-left: 12px; } .mvd-sec-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #E8663A, rgba(232,102,58,.4)); } /* ── Rows (Resumen / Cobro) ── */ .mvd-rows { display: flex; flex-direction: column; gap: 0; } .mvd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 8px; margin: 0 -8px; border-bottom: 1px solid rgba(26,20,16,.04); border-radius: var(--radius-xs); transition: background .18s cubic-bezier(.16,1,.3,1); } .mvd-rows .mvd-row:last-child { border-bottom: none; padding-bottom: 8px; } .mvd-row-l { font-family: var(--sans); font-size: 13.5px; font-weight: 450; color: rgba(26,20,16,.50); flex-shrink: 0; } .mvd-row-v { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: #1A1410; text-align: right; display: flex; align-items: center; gap: 6px; } .mvd-row-v-mono { font-family: var(--mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .mvd-row-disc .mvd-row-l, .mvd-row-disc .mvd-row-v { color: rgba(34,165,90,.85); } /* Payment dot */ .mvd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; box-shadow: 0 0 0 2px rgba(255,255,255,.8); } /* ── Items ── */ .mvd-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 12px; margin: 0 -10px; border-bottom: none; border-radius: var(--radius-sm); background: transparent; transition: background .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; } .mvd-item:hover { background: rgba(26,20,16,.028); box-shadow: 0 1px 4px rgba(26,20,16,.04); } .mvd-item:last-child { border-bottom: none; padding-bottom: 10px; } .mvd-item-name { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.012em; color: #1A1410; margin-bottom: 3px; transition: color .15s; } .mvd-item-meta { font-family: var(--mono); font-size: 11px; font-weight: 500; color: rgba(26,20,16,.44); letter-spacing: 0.01em; margin-bottom: 6px; } .mvd-item-lote { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; font-weight: 600; color: rgba(26,20,16,.52); background: rgba(26,20,16,.04); border: 1px solid rgba(26,20,16,.08); border-radius: 5px; padding: 2px 7px 2px 5px; transition: background .15s, border-color .15s; } .mvd-item:hover .mvd-item-lote { background: rgba(26,20,16,.06); border-color: rgba(26,20,16,.12); } .mvd-item-price { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: #1A1410; letter-spacing: -0.01em; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .mvd-item-del { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: none; border-radius: var(--radius-xs); color: rgba(26,20,16,.25); cursor: pointer; padding: 0; transition: all .18s cubic-bezier(.16,1,.3,1); opacity: 0; } .mvd-item-del:hover { background: rgba(224,82,82,.08); color: rgba(224,82,82,.80); transform: scale(1.1); } /* ── Footer ── */ .mvd-foot { flex-shrink: 0; border-top: 1px solid rgba(26,20,16,.06); padding: 20px 26px 22px; background: linear-gradient(0deg, #ECEAE7 0%, #F3F2F0 100%); animation: mvdFadeUp .44s cubic-bezier(.16,1,.3,1) .32s both; } /* Total: label izquierda, número derecha */ .mvd-total-block { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; animation: mvdTotalReveal .5s cubic-bezier(.16,1,.3,1) .38s both; } .mvd-total-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(26,20,16,.34); flex-shrink: 0; } .mvd-total-val { font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: #1A1410; line-height: 1.05; text-align: right; background: linear-gradient(135deg, #1A1410 50%, #E8663A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .qty-row, .mvd-actions { display: flex; gap: 8px; } .mvd-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; background: rgba(255,255,255,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(26,20,16,.10); border-radius: var(--radius-sm); font-family: var(--sans); font-size: 12px; font-weight: 600; color: rgba(26,20,16,.68); cursor: pointer; transition: all .2s cubic-bezier(.16,1,.3,1); white-space: nowrap; animation: mvdBtnIn .38s cubic-bezier(.16,1,.3,1) both; } .mvd-act:nth-child(1) { animation-delay: .4s; } .mvd-act:nth-child(2) { animation-delay: .46s; } .mvd-act:nth-child(3) { animation-delay: .52s; } .mvd-act svg { flex-shrink: 0; color: rgba(26,20,16,.40); transition: color .18s; } .mvd-act:hover { background: rgba(26,20,16,.05); border-color: rgba(26,20,16,.18); color: #1A1410; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,20,16,.06); } .mvd-act:hover svg { color: rgba(26,20,16,.65); } .mvd-act:active { transform: translateY(0) scale(.97); box-shadow: none; } .mvd-act-del:hover { background: rgba(224,82,82,.05); border-color: rgba(224,82,82,.22); color: rgba(224,82,82,.85); box-shadow: 0 4px 12px rgba(224,82,82,.08); } .mvd-act-del:hover svg { color: rgba(224,82,82,.70); } /* v7.29.0 — action-zone alineado a la derecha, junto al CTA primario */ #tb-action-zone { margin-left: auto !important; flex: none; position: static; transform: none; } /* ═══ 07. SIDEBAR + TOPBAR ═══ */ .sb-nav { flex: 1; padding: 8px 0; overflow-y: auto; } .sb-venc-dot { display: none; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; } .sb-venc-dot.critico { background: #e05252; } .sb-venc-dot.atencion { background: #d97c2a; } .sb-venc-dot::before, .sb-venc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } .sb-venc-dot.critico::before { background: #e05252; animation: venc-sonar 1.6s ease-out infinite; } .sb-venc-dot.critico::after { background: #e05252; animation: venc-sonar 1.6s ease-out infinite .55s; } .sb-venc-dot.atencion::before { background: #d97c2a; animation: venc-sonar 2s ease-out infinite; } .sb-venc-dot.atencion::after { background: #d97c2a; animation: venc-sonar 2s ease-out infinite .7s; } /* v7.95.1 · Toggle dark/light visible siempre */ #nav-chrome-toggle { display: inline-flex !important; align-items: center; cursor: pointer; flex-shrink: 0; padding: 0; margin: 0; } #sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(26, 20, 16, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: var(--z-nav-backdrop); } .update-banner ~ #app .topbar, .update-banner ~ #app #sidebar { transition: top 0.35s ease; } .sb-collapsible-head svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; } .sb-collapsible-head .sb-chevron { margin-left: auto; width: 10px; height: 10px; opacity: .4; transition: transform 0.2s ease; flex-shrink: 0; } .sb-collapsible-head.open .sb-chevron { transform: rotate(180deg); opacity: .7; } .sb-collapsible-head.open { color: var(--text-on-dark); background: rgba(255, 255, 255, 0.04); } .sb-collapsible-head.intro-opening { animation: sbInvHeadBloom .62s cubic-bezier(.2,.9,.25,1); } .sb-collapsible-body { overflow: hidden; max-height: 0; transition: max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .sb-collapsible-body.open { max-height: 200px; } .sb-collapsible-body.intro-opening .ni { opacity: 0; transform: translateY(-4px) scale(.985); animation: sbInvItemReveal .42s cubic-bezier(.2,.9,.25,1) forwards; } .sb-collapsible-body.intro-opening .ni:nth-child(1) { animation-delay: .08s; } .sb-collapsible-body.intro-opening .ni:nth-child(2) { animation-delay: .13s; } .notif-filter-pill:nth-child(2), .sb-collapsible-body.intro-opening .ni:nth-child(3) { animation-delay: .18s; } .sb-collapsible-body.intro-opening .ni:nth-child(4) { animation-delay: .23s; } .mvd-sec:nth-child(4), .sb-collapsible-body.intro-opening .ni:nth-child(5) { animation-delay: .28s; } .sb-logo { padding: 26px 22px 22px; border-bottom: 1px solid rgba(232,102,58, 0.12); position: relative; } .sb-logo .brand { font-family: var(--serif); font-size: 21px; font-weight: 300; font-style: italic; color: #f2e8d8; letter-spacing: -0.025em; line-height: 1.2; display: block; } .sb-logo .sub { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.36em; text-transform: uppercase; color: rgba(232,102,58, 0.65); font-weight: 400; display: block; margin-top: 7px; } .sb-local { padding: 8px 22px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240, 230, 214, 0.24); border-bottom: 1px solid rgba(232,102,58, 0.08); font-family: var(--mono); display: flex; align-items: center; gap: 7px; } .sb-local::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(232,102,58, 0.55); flex-shrink: 0; } .sb-local strong { color: rgba(232,102,58, 0.72); font-weight: 500; } .sb-collapsible-head{ display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; margin: 3px 10px; padding: 8px 13px; border-radius: 8px; color: rgba(246, 239, 226, 0.60); font-size: 12px; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } .sb-collapsible-head:hover { color: rgba(246, 239, 226, 0.88); background: rgba(255, 255, 255, 0.05); } .sb-collapsible-head.child-active { color: rgba(246, 239, 226, 0.90); background: rgba(232,102,58, 0.07); } .sb-collapsible-body .ni { padding-left: 36px; font-size: 11.5px; color: rgba(240, 230, 214, 0.44); border-radius: 7px; } .sb-collapsible-body .ni:hover { color: rgba(240, 230, 214, 0.80); } .ni.active, .sb-collapsible-body .ni.active { background: rgba(232,102,58, 0.14); color: #f2e8d8; font-weight: 600; } .sb-foot{ display: flex; flex-direction: column; padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); gap: 12px; } .sb-vr-btn { display: flex; align-items: center; gap: 9px; margin: 8px 12px 4px; padding: 9px 14px; background: var(--accent-warm); color: #fff; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: var(--sans); letter-spacing: .01em; transition: background .15s, box-shadow .15s; border: none; width: calc(100% - 24px); box-shadow: 0 2px 8px rgba(232,102,58,.25); user-select: none; } .sb-vr-btn:hover { background: var(--accent-warm-lt); box-shadow: 0 3px 12px rgba(232,102,58,.35); } .sb-vr-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .95; } .sb-nuevo-badge { display: none; align-items: center; justify-content: center; background: var(--c-green, #22A55A); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; margin-left: auto; flex-shrink: 0; font-family: var(--mono, monospace); animation: nuevo-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; } #sidebar{ position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar); display: flex; flex-direction: column; z-index: var(--z-nav-menu); background: #0e0b08; box-shadow: 2px 0 24px rgba(0, 0, 0, 0.32); border-right: 0; } .tb-mobile-menu { display: none; background: transparent; border: 1px solid rgba(26,20,16,0.1); border-radius: 8px; width: 34px; height: 34px; align-items: center; justify-content: center; cursor: pointer; color: #1A1410; padding: 0; } .tb-mobile-menu:hover { background: rgba(26,20,16,0.05); } .tb-section-title { display: flex; align-items: center; font-size: 15px; font-weight: 700; color: #1A1410; letter-spacing: -0.005em; font-family: var(--sans, sans-serif); padding: 4px 0; } .nav-wrap { display: contents; } .tb-dropdown-inner { display: flex; flex-direction: column; gap: 6px; min-height: 100%; } .sb-org-db-dot { width: 6px; height: 6px; border-radius: 50%; background: #22A55A; box-shadow: 0 0 0 2px rgba(34,165,90, 0.16); flex-shrink: 0; transition: background 0.2s ease, box-shadow 0.2s ease; } .sb-org-db-dot.offline, .sb-org-db-dot.off { background: #C0392B; box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.16); } .sb-org-db-dot.warning, .sb-org-db-dot.warn { background: #E67E22; box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.16); } .sb-brand .tb-wagon-logo { height: 19px; } .sb-brand .tb-engine-sep { height: 16px; } #main{ height: 100vh; display: flex; flex-direction: column; overflow: hidden; margin-left: 240px !important; width: calc(100% - 240px); } .tb-dd-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-warm, #E8663A); } .tb-dd-icon { width: 18px; height: 18px; flex-shrink: 0; color: rgba(26,20,16,.35); transition: color .12s; } /* ═══════════════════════════════════════════ SIDEBAR v2 (sb2-*) — White card + accent bar ═══════════════════════════════════════════ */ /* ── Header: Brand ── */ .sb2-header { padding: 20px 20px 0; flex-shrink: 0; } .sb2-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .sb2-brand-logo { width: 28px; height: 28px; background: #1A1410; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sb2-brand-text { display: flex; flex-direction: column; gap: 0; line-height: 1; } .sb2-brand-name { font-family: var(--sans, 'Inter', sans-serif); font-size: 14px; font-weight: 600; color: #1A1410; letter-spacing: -.02em; } .sb2-brand-sub { font-family: var(--sans, 'Inter', sans-serif); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,20,16,.35); margin-top: 2px; } /* ── CTA Button ── */ .sb2-cta svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; } /* ── Scrollable nav area ── */ .sb2-scroll { flex: 1; overflow-y: auto; padding: 6px 10px 10px; min-height: 0; /* v7.99.3 · Fade mask en bottom para indicar "hay más contenido" */ mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - 20px), transparent 100% ); -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 calc(100% - 20px), transparent 100% ); } /* v7.99.3 · Scrollbar sidebar visible con hover zone expandido */ .sb2-scroll::-webkit-scrollbar { width: 10px; } .sb2-scroll::-webkit-scrollbar-thumb { background-color: rgba(26, 20, 16, 0.16); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; transition: background-color 0.18s ease, border-width 0.18s ease; } .trf-prod-list::-webkit-scrollbar-thumb:hover, .trf-history::-webkit-scrollbar-thumb:hover, .sb2-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 20, 16, 0.34); border-width: 2px; } /* ── Section groups ── */ .sb2-section { margin-bottom: 4px; } .sb2-section-label { font-family: var(--sans, 'Inter', sans-serif); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(26,20,16,.35); padding: 12px 10px 6px; user-select: none; } /* ── Badges ── */ .sb2-badge { margin-left: auto; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 999px; font-family: var(--sans, 'Inter', sans-serif); font-size: 9px; font-weight: 700; line-height: 1; flex-shrink: 0; } /* ── Footer: User pill ── */ .sb2-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: default; transition: background .12s; } .sb2-avatar { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #d4a574, #b8825a); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; } .sb2-avatar-letter { font-family: var(--sans, 'Inter', sans-serif); font-size: 14px; font-weight: 600; color: #fff; } .sb2-user-name { font-size: 12.5px; font-weight: 600; color: #1A1410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb2-user-loc { font-family: var(--sans, 'Inter', sans-serif); font-size: 9.5px; font-weight: 500; color: rgba(26,20,16,.40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb2-logout { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 7px; cursor: pointer; color: rgba(26,20,16,.30); transition: all .12s; flex-shrink: 0; } .sb2-logout:hover { background: rgba(224,82,82,.08); color: #a83030; } .sb2-logout svg { width: 15px; height: 15px; } /* v7.99.36 · Toggle de tema dentro del dropdown — SOLO visible en mobile (ver @media 600px). La .topbar-right (que aloja el switch de tema) se oculta <600px; este lo reemplaza. Especificidad .sb2-footer .sb2-theme-item (0,2,0) para ganarle a .tb-dd-item{display:flex}. */ .tb-brand{ display: none; align-items: center; gap: 10px; flex-shrink: 0; margin-right: 8px; background: none; padding: 0; border-radius: 0; } .tb-wagon-logo { height: 22px; width: auto; display: block; opacity: 0.94; } .tb-engine-sep { width: 1px; height: 18px; background: rgba(26,20,16,0.14); flex-shrink: 0; } .tb-engine { font-family: var(--serif); font-size: 17px; font-weight: 600; font-style: italic; letter-spacing: -0.03em; color: transparent; background: linear-gradient( 100deg, #1A1410 0%, #1A1410 30%, #E8663A 50%, #1A1410 70%, #1A1410 100% ); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: engine-shimmer 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; line-height: 1; padding-bottom: 3px; user-select: none; } .tb-notif-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 9px; cursor: pointer; color: rgba(26,20,16,.52); transition: background .14s ease, color .14s ease; flex-shrink: 0; outline: none; margin-right: 2px; } .tb-notif-btn:hover { border-color: rgba(26,20,16,.18); transform: translateY(-1px); background: rgba(26,20,16,.06); color: #1A1410; } .tb-notif-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; background: #C0392B; color: #FFFFFF; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0; border-radius: 999px; padding: 0 4px; display: flex; align-items: center; justify-content: center; line-height: 1; border: 1.5px solid #fdfcfb; animation: lx-scale-in var(--lx-d-slow) var(--lx-curve-spring) both; } .tb-notif-btn.ringing svg { animation: lx-bell-ring 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97); } .tb-action-zone { display: flex; align-items: center; gap: 5px; min-width: 0; height: 100%; padding: 0; overflow: visible; flex-shrink: 1; } .tb-action-zone .sk-search-wrap, .tb-action-zone .mv2-search-wrap { flex: 0 1 200px; max-width: 200px; min-width: 145px; position: relative; } .tb-action-zone .sk-search-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: rgba(26,20,16,.45); pointer-events: none; width: 12px !important; height: 12px !important; } .tb-action-zone .sk-fpill-row { display: inline-flex; align-items: center; gap: 2px; height: 30px; background: rgba(26,20,16,.04); border-radius: 7px; padding: 2px; flex-shrink: 0; } .tb-action-zone .sk-fpill { height: 26px; padding: 0 9px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; color: rgba(26,20,16,.58); background: transparent; border: none; border-radius: 5px; cursor: pointer; transition: background .13s, color .13s; white-space: nowrap; display: inline-flex; align-items: center; } .tb-action-zone .sk-fpill:hover { background: rgba(26,20,16,.04); color: #1A1410; } .tb-action-zone .sk-fpill.active { background: #FFFFFF; color: #1A1410; font-weight: 600; box-shadow: 0 1px 2px rgba(26,20,16,.06), 0 0 0 1px rgba(26,20,16,.05); } .tb-action-zone .sk-sucursal-wrap { display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(191,180,170,.50); border-radius: 7px; flex-shrink: 0; color: rgba(26,20,16,.72); transition: background .13s, border-color .13s; cursor: pointer; } .tb-action-zone .sk-sucursal-wrap:hover { background: #FFFFFF; border-color: rgba(191,180,170,.70); } .tb-action-zone .sk-locf-sel { background: transparent; border: none; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; color: rgba(26,20,16,.72); outline: none; cursor: pointer; padding: 0; padding-right: 18px; height: 100%; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(26,20,16,0.50)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 10px 10px; } .tb-action-zone .sk-btn-primary svg { width: 11px !important; height: 11px !important; } .tb-action-zone > * { animation: lx-tb-actions-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; } .tb-action-zone > *:nth-child(5) { animation-delay: 160ms; } #tb-primary-zone .sk-btn-primary, #tb-primary-zone .tb-relocated { height: 32px; padding: 0 13px; font-size: 12px; font-weight: 600; letter-spacing: -0.005em; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: none; cursor: pointer; transition: background .14s, opacity .14s; /* Color coral/naranja WAGON */ background: #E8663A; color: #FFFFFF; } #tb-primary-zone .sk-btn-primary:hover, #tb-primary-zone .tb-relocated:hover { background: #B5551F; } .tb-collapse-toggle { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; background: #E7E5E6; border: none; border-radius: 9px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; color: rgba(26,20,16,.72); cursor: pointer; white-space: nowrap; transition: background .15s; outline: none; } .tb-collapse-toggle:hover, .tb-cat-wrapper.is-open .tb-collapse-toggle { background: #dfdcdd; color: #1A1410; } .tb-collapse-toggle .tb-ct-chev { transition: transform .22s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0; } .tb-cat-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 500; background: #FFFFFF; border: 1px solid rgba(26,20,16,.09); border-radius: 10px; box-shadow: 0 4px 16px rgba(26,20,16,.10), 0 1px 3px rgba(26,20,16,.06); padding: 4px; min-width: 160px; animation: lx-dd-in .16s cubic-bezier(0.16,1,0.3,1); } .tb-cat-panel #sk-fpill-cat-row { display: flex; flex-direction: column; gap: 1px; background: transparent; border-radius: 0; padding: 0; height: auto; } .tb-cat-panel .sk-fpill { width: 100%; height: 32px !important; padding: 0 10px !important; border-radius: 7px !important; justify-content: flex-start; font-size: 12.5px !important; font-weight: 500 !important; color: rgba(26,20,16,.65) !important; background: transparent !important; box-shadow: none !important; } .tb-cat-panel .sk-fpill:hover { background: rgba(26,20,16,.045) !important; color: #1A1410 !important; } .tb-cat-panel .sk-fpill.active { background: rgba(26,20,16,.06) !important; color: #1A1410 !important; font-weight: 600 !important; box-shadow: none !important; } .tb-sd-panel .tb-sd-item { display: flex; align-items: center; width: 100%; height: 32px; padding: 0 10px; background: transparent; border: none; border-radius: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; color: rgba(26,20,16,.65); cursor: pointer; text-align: left; transition: background .12s, color .12s; white-space: nowrap; } .tb-sd-panel .tb-sd-item:hover { background: rgba(26,20,16,.045); color: #1A1410; } .tb-sd-panel .tb-sd-item.active { background: rgba(26,20,16,.06); color: #1A1410; font-weight: 600; } .tb-section-title, #tb-section-btn, #top-title { color: rgba(26,20,16,.75) !important; font-weight: 600 !important; } .tb-action-zone.has-content::before{ content: ""; display: none !important; width: 1px; height: 20px; background: rgba(191,180,170,.45) !important; margin: 0 12px 0 14px; flex-shrink: 0; } .tb-action-zone .sk-sucursal-wrap:has(.tb-sd-wrapper) { border: none !important; background: transparent !important; padding: 0 !important; } .tb-action-zone .sk-search-input, .tb-action-zone .mv2-search-input, .tb-action-zone .v3-tb-search-input{ height: 30px; font-size: 12px; padding-left: 28px; padding-right: 10px; background: #E7E5E6 !important; border: none !important; border-radius: 9px !important; width: 100%; font-family: var(--sans); letter-spacing: -0.005em; color: rgba(26,20,16,.80); outline: none; transition: background .15s; } .tb-action-zone select { background: #f2f1ef !important; border-color: rgba(191,180,170,.45) !important; } /* ═══ v7.14.0 — LXTopbar Fase 2: Movimientos ═══ */ /* Filtros (.mv2-filters) en el action-zone — quedan en linea con el resto */ .tb-action-zone .mv2-filters { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; flex-shrink: 0; } /* Dropdowns compactos en topbar — altura 30px, padding reducido */ .tb-action-zone .mv2-dd-btn { height: 30px !important; padding: 0 8px !important; gap: 5px !important; background: rgba(255,255,255,.72) !important; border: 1px solid rgba(191,180,170,.50) !important; border-radius: 7px !important; font-family: var(--sans); font-size: 11.5px !important; font-weight: 500; letter-spacing: -0.005em; color: rgba(26,20,16,.78); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; transition: background .13s, border-color .13s, color .13s; } .tb-action-zone .mv2-dd-btn:hover { background: #FFFFFF !important; border-color: rgba(191,180,170,.70) !important; color: #1A1410; } .tb-action-zone .mv2-dropdown.open .mv2-dd-btn { background: #FFFFFF !important; border-color: rgba(191,180,170,.85) !important; color: #1A1410; } .tb-action-zone .mv2-dd-btn .mv2-dd-value { font-weight: 500; color: inherit; font-size: 11.5px; letter-spacing: -0.005em; } .tb-action-zone .mv2-dd-btn .mv2-dd-chev { width: 10px !important; height: 10px !important; stroke-width: 2.4 !important; opacity: .55; } /* Menu del dropdown anclado al boton en topbar (lista vertical, igual que en la pagina) */ .tb-action-zone .mv2-dd-menu { margin-top: 6px; z-index: calc(var(--z-modal) + 50); } /* Boton Exportar en primary-zone (junto a la campana) */ #tb-primary-zone .mv2-export-btn { height: 30px; padding: 0 12px; gap: 6px; background: rgba(26,20,16,.04); border: 1px solid rgba(26,20,16,.08); border-radius: 7px; color: rgba(26,20,16,.78); font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; display: inline-flex; align-items: center; transition: background .13s, color .13s, border-color .13s; } #tb-primary-zone .mv2-export-btn svg { width: 13px; height: 13px; stroke-width: 1.9; } /* v7.18.0 — Espacio entre search y primer filtro/select en topbar Solo este gap es mayor (16px). Entre filtros el gap normal se mantiene. */ .tb-action-zone .sk-search-wrap + .sk-sucursal-wrap, .tb-action-zone .sk-search-wrap + .tb-cat-wrapper, .tb-action-zone .mv2-search-wrap + .mv2-filters, .tb-action-zone .v3-tb-search + .v3-dropdown, .tb-action-zone .cli-master-bar + .cli-tier-filters, .tb-action-zone .pr-search-wrap + .pr-filter-select { margin-left: 16px !important; } /* Vencimientos: export después del último dropdown */ .tb-action-zone .sk-sucursal-wrap + .tb-cat-wrapper, .tb-action-zone .v3-dropdown + .v3-dropdown, .tb-action-zone .v3-dropdown + .v3-tb-export, .tb-action-zone .v3-tb-export { margin-left: 8px !important; } /* ═══ v7.15.0 — LXTopbar Fase 2: Vencimientos ═══ */ /* Duplicar las CSS vars de v3 en las zonas del topbar (originalmente estan scopeadas a #page-vencimientos y los elementos relocados las pierden) */ .tb-action-zone, #tb-primary-zone { --v3-card: #FFFFFF; --v3-ink: #1A1410; --v3-ink-2: rgba(26,20,16,.62); --v3-ink-3: rgba(26,20,16,.42); --v3-hair: rgba(26,20,16,.10); --v3-orange: #E8663A; --v3-red: #C0392B; --v3-amber: #E67E22; --v3-green: #22A55A; } /* Search wrap en topbar — compacto */ .tb-action-zone .v3-tb-search { flex: 0 1 220px; max-width: 220px; min-width: 160px; position: relative; } .tb-action-zone .v3-tb-search-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 12px !important; height: 12px !important; color: rgba(26,20,16,.42); } .tb-action-zone .v3-tb-search-input { width: 100%; height: 30px; padding: 0 28px 0 26px; background: rgba(255,255,255,.72); border: 1px solid rgba(191,180,170,.50); border-radius: 7px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; color: #1A1410; outline: none; transition: background .13s, border-color .13s; } .tb-action-zone .v3-tb-search-input:focus { background: #FFFFFF; border-color: rgba(191,180,170,.85); } .tb-action-zone .v3-tb-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; } /* Dropdowns en topbar — compactos, 30px */ .tb-action-zone .v3-dd-btn { height: 30px !important; padding: 0 9px !important; gap: 6px !important; background: rgba(255,255,255,.72) !important; border: 1px solid rgba(191,180,170,.50) !important; border-radius: 7px !important; transition: background .13s, border-color .13s !important; } .tb-action-zone .v3-dd-btn:hover { background: #FFFFFF !important; border-color: rgba(191,180,170,.70) !important; } .tb-action-zone .v3-dropdown.is-open .v3-dd-btn { background: #FFFFFF !important; border-color: rgba(191,180,170,.85) !important; } .tb-action-zone .v3-dd-value { font-size: 11.5px; color: #1A1410; letter-spacing: -0.005em; } .tb-action-zone .v3-dd-chevron { width: 10px !important; height: 10px !important; opacity: .55; } /* Panel del dropdown anclado al boton en topbar */ .tb-action-zone .v3-dd-panel { top: calc(100% + 6px); z-index: calc(var(--z-modal) + 50); } /* Boton Exportar en topbar — secundario, compacto */ .tb-action-zone .v3-tb-export { height: 30px; padding: 0 11px; gap: 6px; background: rgba(26,20,16,.04); border: 1px solid rgba(26,20,16,.08); border-radius: 7px; color: rgba(26,20,16,.72); font-size: 11.5px; font-weight: 600; } #tb-primary-zone .mv2-export-btn:hover, .tb-action-zone .v3-tb-export:hover { background: rgba(26,20,16,.07); border-color: rgba(26,20,16,.14); color: #1A1410; } /* Boton Agregar lote en primary-zone (junto a la campana) */ #tb-primary-zone .v3-btn-add { height: 32px; padding: 0 14px; gap: 6px; font-size: 11.5px; border-radius: 999px; background: var(--v3-ink); color: #F5EFE6; animation: none; /* anula el lx-fade-in interno */ } #tb-primary-zone .v3-btn-add:hover { background: #2a221c; } /* ═══ v7.16.0 — LXTopbar Fase 2: Clientes ═══ */ /* ═══ v7.17.0 — LXTopbar Fase 2: Precios ═══ */ /* Search wrap compacto */ .tb-action-zone .pr-search-wrap { display: flex; align-items: center; gap: 6px; flex: 0 1 210px; max-width: 210px; min-width: 150px; height: 30px !important; background: rgba(255,255,255,.72) !important; border: 1px solid rgba(191,180,170,.50) !important; border-radius: 7px !important; padding: 0 10px !important; transition: background .13s, border-color .13s; box-shadow: none !important; } .tb-action-zone .pr-search-wrap svg { width: 12px !important; height: 12px !important; flex-shrink: 0; color: rgba(26,20,16,.42); } .tb-action-zone .pr-search-input { font-size: 11.5px; color: #1A1410; } /* Select categoria compacto — hereda .tb-action-zone select global */ .tb-action-zone .pr-filter-select { height: 30px !important; padding: 0 9px !important; border: 1px solid rgba(191,180,170,.50) !important; border-radius: 7px !important; background: rgba(255,255,255,.72) !important; font-size: 11.5px !important; color: rgba(26,20,16,.78) !important; outline: none; cursor: pointer; transition: border-color .13s, background .13s; } .tb-action-zone .pr-search-wrap:focus-within, .tb-action-zone .pr-filter-select:focus { background: #FFFFFF !important; border-color: rgba(191,180,170,.85) !important; box-shadow: none !important; } /* Boton Guardar en primary-zone — preserva la animacion de exito */ #tb-primary-zone .pr-save-btn { height: 32px; padding: 0 14px; font-size: 11.5px !important; border-radius: 999px; gap: 6px; animation: none !important; } #tb-primary-zone .pr-save-btn .pr-btn-label svg { width: 10px; height: 10px; } /* Search bar compacto en topbar */ .tb-action-zone .cli-master-bar { flex: 0 1 220px; max-width: 220px; min-width: 150px; display: flex; align-items: center; gap: 0; margin: 0; } .tb-action-zone .cli-master-bar input { width: 100%; height: 30px; min-height: 0 !important; padding: 0 10px; background: rgba(255,255,255,.72) !important; border: 1px solid rgba(191,180,170,.50) !important; border-radius: 7px !important; font-family: var(--sans); font-size: 11.5px; color: #1A1410; outline: none; transition: background .13s, border-color .13s; } .tb-action-zone .cli-master-bar input:focus { background: #FFFFFF !important; border-color: rgba(191,180,170,.85) !important; box-shadow: none; } .tb-action-zone .v3-tb-search-input::placeholder, .tb-action-zone .pr-search-input::placeholder, .tb-action-zone .cli-master-bar input::placeholder { color: rgba(26,20,16,.40); } /* Tier-pills compactas en topbar */ .tb-action-zone .cli-tier-filters { display: inline-flex; gap: 2px; background: rgba(26,20,16,.05); border-radius: 999px; padding: 3px; flex-shrink: 0; } .tb-action-zone .cli-tier-btn { height: 24px; padding: 0 10px !important; font-size: 11px !important; font-weight: 600; border-radius: 999px; color: rgba(26,20,16,.60); background: transparent; border: none; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; } .tb-action-zone .cli-tier-btn:hover { color: #1A1410; background: rgba(255,255,255,.70); } .tb-action-zone .cli-tier-btn.active { background: #FFFFFF !important; color: #1A1410 !important; box-shadow: 0 1px 2px rgba(26,20,16,.08); } /* CTA Nuevo cliente en primary-zone */ /* v7.18.0: Lacca Nera style (override del orange legacy) */ #tb-primary-zone .cli-btn-new { height: 32px; padding: 0 14px; font-size: 11.5px !important; border-radius: 9px; background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%) !important; border: none !important; color: rgba(245,235,215,.90) !important; margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; letter-spacing: -0.01em; position: relative; overflow: hidden; animation: none !important; } /* ══════════════════════════════════════════════════════════════════ v7.18.0 — SISTEMA 3D EMBOSSED Inputs, selects, botones y sidebar activo emergen del papel. Gris sidebar #f2f1ef · border-radius: 9px · focus sin naranja. ══════════════════════════════════════════════════════════════════ */ /* ── 1 & 2. INPUTS Y SELECTS IN-PAGE: mismo estilo que btn Exportar ── */ .sk-search-input, .mv2-search-input, .v3-tb-search-input, .pr-search-input, .cli-master-bar input, .pr-filter-select { background: #E7E5E6 !important; border: none !important; border-radius: 9px !important; box-shadow: none !important; color: rgba(26,20,16,.78) !important; font-family: "Inter", system-ui, sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; transition: background .15s !important; } /* Wrappers: transparentes */ .pr-search-wrap:hover { background: rgba(26,20,16,.07) !important; border-color: rgba(26,20,16,.14) !important; } .pr-search-wrap:focus-within { background: rgba(26,20,16,.06) !important; border-color: rgba(26,20,16,.20) !important; } /* ── 3. BOTONES: radius 9px en todos los CTAs de módulos ────────── */ .sk-btn-primary, .v3-btn-add, .cli-btn-new, .pr-save-btn, .mv2-export-btn, .v3-tb-export, #tb-primary-zone .sk-btn-primary, #tb-primary-zone .v3-btn-add, #tb-primary-zone .cli-btn-new, #tb-primary-zone .pr-save-btn, #tb-primary-zone .mv2-export-btn { border-radius: var(--r-ctrl); } /* Ghost/export buttons en topbar también */ .tb-action-zone .mv2-export-btn, .tb-action-zone .v3-tb-export { border-radius: var(--r-ctrl) !important; } /* ── 4. MISMO ESTILO QUE BOTON EXPORTAR: flat, hairline, semi-bold ─── */ /* v7.18.0: inputs, selects y dropdowns custom = exactamente el estilo del btn Exportar bg: rgba(26,20,16,.04) · border: 1px rgba(26,20,16,.08) · r:9px · no shadow */ .tb-action-zone input, .tb-action-zone select, .tb-action-zone .tb-collapse-toggle, .tb-action-zone .mv2-dd-btn, .tb-action-zone .v3-dd-btn, .tb-action-zone .pr-search-wrap { background: #E7E5E6 !important; border: none !important; border-radius: 9px !important; box-shadow: none !important; color: rgba(26,20,16,.78) !important; font-family: "Inter", system-ui, sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; height: 32px !important; } /* Placeholder — mismo tono que el btn Exportar */ .tb-action-zone input::placeholder { color: rgba(26,20,16,.42) !important; font-weight: 400 !important; } /* Search wrappers — transparentes, solo el input tiene el estilo */ .tb-action-zone .mv2-search-wrap, .tb-action-zone .v3-tb-search, .tb-action-zone .sk-search-wrap { background: transparent !important; border: none !important; box-shadow: none !important; height: 32px !important; } /* Search inputs en topbar — estilo unificado v7.28.0 */ .sk-search-input:focus, .mv2-search-input:focus, .v3-tb-search-input:focus, .pr-search-input:focus, .cli-master-bar input:focus, .pr-filter-select:focus, .tb-action-zone input:hover, .tb-action-zone select:hover, .tb-action-zone .tb-collapse-toggle:hover, .tb-action-zone .mv2-dd-btn:hover, .tb-action-zone input:focus, .tb-action-zone .mv2-search-input:focus, .tb-action-zone .v3-tb-search-input:focus, .tb-action-zone .cli-master-bar input:focus, .tb-action-zone .pr-search-input:focus { background: #dfdcdd !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── 5. TITLE-ONLY + ICONS — todos los selects muestran solo el título ── */ /* mv2-dd-label: de mono-uppercase a texto normal legible */ .tb-action-zone .mv2-dd-btn .mv2-dd-label { display: inline !important; font-family: var(--sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: rgba(26,20,16,.78) !important; margin-right: 0 !important; } /* v3-dd-content: apilar en fila ya que solo hay un elemento */ .tb-action-zone .v3-dd-content { flex-direction: row !important; align-items: center !important; gap: 0 !important; } .tb-action-zone .v3-dd-eyebrow { font-family: var(--sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: rgba(26,20,16,.78) !important; } /* ── Iconos via ::before para dropdowns de Movimientos ── */ .tb-action-zone .mv2-dd-btn::before { content: ''; display: inline-block; width: 13px; height: 13px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 5px; opacity: .55; } /* Rango → calendario */ .tb-action-zone .mv2-dropdown[data-name="rango"] .mv2-dd-btn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); } /* Tipo → filtro */ .tb-action-zone .mv2-dropdown[data-name="tipo"] .mv2-dd-btn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E"); } /* Pago → tarjeta */ .tb-action-zone .mv2-dropdown[data-name="pago"] .mv2-dd-btn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); } /* ── Iconos para dropdowns de Vencimientos ── */ .tb-action-zone .v3-dd-btn::before { content: ''; display: inline-block; width: 13px; height: 13px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 6px; opacity: .55; } /* Estado → círculo con punto */ .tb-action-zone #v3-dd-estado .v3-dd-btn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%231A1410' stroke='none'/%3E%3C/svg%3E"); } /* Local (v3) → pin */ .tb-action-zone .mv2-dropdown[data-name="local"] .mv2-dd-btn::before, .tb-action-zone #v3-dd-local .v3-dd-btn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } /* ── Icono en tb-ct-label (Stock: Sucursal + Categoría — inyectado por JS) ── */ .tb-action-zone .tb-collapse-toggle svg:first-child { flex-shrink: 0; opacity: .55; } /* ── 5. CUSTOM DROPDOWN BUTTONS en topbar ────────────────────────── */ /* .tb-collapse-toggle = Categoría y Sucursal custom (botones, no select) — v7.28.0 unificado */ .tb-action-zone .tb-collapse-toggle, .tb-action-zone .mv2-dd-btn, .tb-action-zone .v3-dd-btn { background: #E7E5E6 !important; border: none !important; border-radius: 9px !important; height: 32px !important; font-size: 11.5px !important; font-weight: 600 !important; box-shadow: none !important; transition: background .15s !important; } .tb-action-zone .tb-collapse-toggle:hover, .tb-action-zone .mv2-dd-btn:hover, .tb-action-zone .v3-dd-btn:hover, .tb-action-zone .mv2-dropdown.open .mv2-dd-btn, .tb-action-zone .v3-dropdown.is-open .v3-dd-btn, .tb-action-zone .tb-cat-wrapper.is-open .tb-collapse-toggle { background: #dfdcdd !important; box-shadow: none !important; } /* ── 6. BOTÓN PRINCIPAL "LACCA NERA" — mismo estilo todos los módulos ── */ /* Targets: topbar primary zone + todos los CTAs in-page */ #tb-primary-zone button, .sk-btn-primary, .v3-btn-add, .cli-btn-new, .pr-save-btn, .mv2-export-btn { background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%) !important; color: rgba(245,235,215,.90) !important; border: none !important; border-radius: 9px !important; font-family: var(--sans) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30), 0 2px 8px rgba(26,20,16,.28), 0 1px 2px rgba(26,20,16,.15) !important; transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .20s ease !important; animation: none !important; } /* Glow naranja/ocre que asoma desde la derecha — no cubre todo el botón */ #tb-primary-zone button::before, .sk-btn-primary::before, .v3-btn-add::before, .cli-btn-new::before, .pr-save-btn::before, .mv2-export-btn::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to right, rgba(232,102,58,.35) 0%, rgba(232,102,58,.14) 30%, rgba(232,102,58,.04) 52%, transparent 68% ) !important; opacity: 0 !important; transform: none !important; pointer-events: none !important; transition: opacity .28s ease !important; } /* Hover: glow aparece + elevación */ #tb-primary-zone button:hover::before, .sk-btn-primary:hover::before, .v3-btn-add:hover::before, .cli-btn-new:hover::before, .pr-save-btn:hover::before, .mv2-export-btn:hover::before { opacity: 1 !important; animation: none !important; } #tb-primary-zone button:hover, .sk-btn-primary:hover, .v3-btn-add:hover, .cli-btn-new:hover, .pr-save-btn:hover, .mv2-export-btn:hover { transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.40), 0 8px 24px rgba(26,20,16,.38), 0 3px 8px rgba(26,20,16,.20) !important; } /* Active: press */ #tb-primary-zone button:active, .sk-btn-primary:active, .v3-btn-add:active, .cli-btn-new:active, .pr-save-btn:active, .mv2-export-btn:active { transform: translateY(1px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 3px 6px rgba(0,0,0,.22), 0 1px 3px rgba(26,20,16,.15) !important; } #tb-primary-zone button:active::before, .sk-btn-primary:active::before, .v3-btn-add:active::before, .cli-btn-new:active::before, .pr-save-btn:active::before, .mv2-export-btn:active::before { opacity: 0 !important; } /* SVG icons heredan color del botón */ #tb-primary-zone button svg, .sk-btn-primary svg, .v3-btn-add svg, .cli-btn-new svg, .pr-save-btn .pr-btn-label svg, .mv2-export-btn svg { color: rgba(245,235,215,.80) !important; stroke: rgba(245,235,215,.80) !important; } /* ── 7. DASHBOARD CARDS — v7.26.0 premium shadow system ────── */ /* Especificidad con ID para ganar a la consolidated rule (0,1,0 → 1,1,0) */ #page-dashboard .nd-card { border: 1px solid rgba(26,20,16,.05) !important; box-shadow: var(--card-shadow) !important; background: #FFFFFF !important; } #page-dashboard .nd-card:hover { border-color: rgba(26,20,16,.07) !important; box-shadow: var(--card-shadow-hover) !important; transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════════════ v7.18.0 — KPI CARDS REDISEÑO EDITORIAL ══════════════════════════════════════════════════════════════════ */ /* Card shell — mantiene el estilo flat blanco con border ink */ #page-stock .sk-kpi-card { background: #FFFFFF !important; border: 1px solid rgba(26,20,16,.08) !important; border-radius: var(--radius-lg); padding: 18px 20px 14px; display: flex !important; flex-direction: column; gap: 14px; position: relative; cursor: pointer; transition: border-color .18s, transform .18s !important; overflow: hidden; box-shadow: none !important; } /* Variantes de color por tipo */ #page-stock .sk-kpi-card.k-lotes { --kpi-accent: #22A55A; } /* ── 1. TOP: eyebrow + delta chip ── */ .sk-kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.03em; background: rgba(34,165,90,.10); color: rgba(22,84,46,.92); white-space: nowrap; } .sk-kpi-delta svg { width: 9px; height: 9px; stroke-width: 2.8; } /* ── 2. CORE: número héroe + subtítulo ── */ #page-stock .sk-kpi-num { font-family: var(--serif) !important; font-size: 44px !important; font-weight: 600 !important; letter-spacing: -0.035em; color: #1A1410 !important; line-height: 1; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; font-optical-sizing: auto !important; margin: 0; background: none !important; -webkit-text-fill-color: initial !important; } #page-stock .sk-kpi-num .cur { font-weight: 400; font-size: 28px; letter-spacing: 0; color: rgba(26,20,16,.60); margin-right: 2px; vertical-align: 5px; } /* ── 3. FOOT: hairline + meta + link hover ── */ .sk-kpi-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: rgba(26,20,16,.60); letter-spacing: 0.02em; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s, color .15s; white-space: nowrap; } #page-stock .sk-kpi-card:hover .sk-kpi-link { opacity: 1; transform: translateX(0); color: #1A1410; } /* Reset/hide elementos viejos por si quedan */ #page-stock .sk-kpi-body, /* Pero ojo: los #sk-total, #sk-kg-total, #sk-crit { display: grid !important; grid-template-columns: 38px 1fr auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(26,20,16,.06); } /* Número de puesto — Fraunces editorial */ .nd-rank-num { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: rgba(26,20,16,.30); line-height: 1; text-align: center; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .nd-rank-row:nth-child(1) .nd-rank-num { color: #C8962A; } /* oro */ .nd-rank-row:nth-child(2) .nd-rank-num { color: #8A99A8; } /* plata */ .nd-rank-row:nth-child(3) .nd-rank-num { color: #A87047; } /* bronce */ /* Info: name + meta + bar */ .nd-rank-name { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #1A1410; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nd-rank-meta { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: rgba(26,20,16,.42); letter-spacing: 0.02em; } .nd-rank-bar-wrap { height: 3px; background: rgba(26,20,16,.06); border-radius: 2px; overflow: hidden; margin-top: 2px; } .nd-rank-bar { height: 100%; /* v7.95.2 · Vibrant Linear paleta azul → naranja */ background: linear-gradient(90deg, #0A84FF 0%, #FF6B35 100%); border-radius: 2px; transition: width .4s cubic-bezier(.16,1,.3,1); } /* v7.95.2 · Stock bajo bar — semántico (rojo indica criticidad) */ .nd-sb-bar-wrap { height: 3px; background: rgba(26,20,16,.06); border-radius: 2px; overflow: hidden; margin-top: 4px; } .nd-sb-bar { height: 100%; background: linear-gradient(90deg, #E05252 0%, #F86969 100%); border-radius: 2px; transition: width .4s cubic-bezier(.16,1,.3,1); } /* ══════════════════════════════════════════════════════════════════ v7.18.0 — VENTAS ROWS EDITORIAL Usadas en: Dashboard "Ventas recientes" (.nd-venta-row) Cierre de caja "Detalle del día" (.cc2-row) ══════════════════════════════════════════════════════════════════ */ .nd-venta-row, .cc2-row { display: grid !important; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(26,20,16,.06); transition: background .12s; } .cc2-row-clickable { cursor: pointer; } /* Avatar circular con iniciales */ .nd-venta-avatar, .cc2-row-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(26,20,16,.06); color: rgba(26,20,16,.62); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; } /* Info: name + meta */ .nd-venta-name, .cc2-row-name { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #1A1410; line-height: 1.15; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nd-venta-meta, .cc2-row-meta { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: rgba(26,20,16,.42); letter-spacing: 0.02em; line-height: 1.1; display: inline-flex; align-items: center; gap: 4px; } /* Chevron expansible */ .cc2-row-chevron { font-size: 9px; color: rgba(26,20,16,.30); margin-left: 4px; transition: transform .15s; } /* Pago: dot + label */ .nd-pago-pill, .cc2-pago-pill { display: inline-flex !important; align-items: center; gap: 6px; font-family: var(--sans) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: rgba(26,20,16,.78) !important; background: transparent !important; border: none !important; padding: 0 !important; text-transform: none !important; white-space: nowrap; } .nd-pago-pill::before, .cc2-pago-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(26,20,16,.30); flex-shrink: 0; } /* v7.19.0: stack de pills para ventas con múltiples medios */ .cc2-pago-stack { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cc2-pago-pill.cc2-pago-pill-mini { font-size: 10px !important; opacity: .88; } .cc2-pago-pill.cc2-pago-pill-mini::before { width: 5px; height: 5px; } /* Desglose de pago en el ticket expandido */ .cc2-detail-desglose { margin-top: 10px; padding: 10px 12px; background: rgba(26,20,16,.025); border: 1px solid rgba(26,20,16,.06); border-radius: 9px; } .cc2-detail-desglose-lbl { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-bottom: 7px; } .cc2-detail-desglose-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--sans); font-size: 12px; color: rgba(26,20,16,.78); } .cc2-detail-desglose-amt { margin-left: auto; font-family: var(--mono); font-weight: 600; color: #1A1410; font-variant-numeric: tabular-nums; } /* Total: Fraunces hero (specificity arriba para vencer al [class*="-total"]) */ .nd-rank-row .nd-rank-price, #page-dashboard .nd-rank-price, .nd-venta-row .nd-venta-total, .cc2-row .cc2-row-total, #page-dashboard .nd-venta-total, #page-cierre .cc2-row-total { color: #1A1410 !important; font-family: var(--serif) !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; font-optical-sizing: auto !important; font-size: 15px !important; font-variant-numeric: tabular-nums !important; font-weight: 600 !important; letter-spacing: -0.018em; line-height: 1; text-align: right; white-space: nowrap; } /* Expandable detail (cc2 only) */ .cc2-row-detail { background: rgba(26,20,16,.02); border-bottom: 1px solid rgba(26,20,16,.06); padding: 10px 16px 12px 52px; display: flex; flex-direction: column; gap: 6px; } .cc2-detail-item { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; font-size: 11.5px; } .cc2-detail-prod { font-family: var(--sans); font-weight: 500; color: rgba(26,20,16,.78); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc2-detail-qty { font-family: var(--mono); font-size: 10.5px; color: rgba(26,20,16,.42); letter-spacing: 0.02em; } .cc2-detail-sub { font-family: var(--mono); font-size: 11px; font-weight: 600; color: rgba(26,20,16,.62); font-variant-numeric: tabular-nums; text-align: right; min-width: 60px; } .cc2-detail-desc { font-family: var(--sans); font-size: 11px; font-style: italic; color: #22A55A; padding: 4px 0 0; border-top: 1px dashed rgba(26,20,16,.08); margin-top: 4px; } .cc2-detail-total { font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: -0.012em; color: #1A1410; text-align: right; padding-top: 6px; border-top: 1px solid rgba(26,20,16,.08); margin-top: 4px; } /* ══════════════════════════════════════════════════════════════════ v7.18.0 — CLIENTES DRAWER: rediseño editorial ══════════════════════════════════════════════════════════════════ */ /* Cuando el drawer está abierto, neutralizar el transform de la page (`page-enter` deja una matrix identity que crea containing block para `position: fixed` y rompe el anclaje al viewport) */ #page-clientes.cli-drawer-open { transform: none; animation: none !important; } /* SHELL — contenedor transparente, sin mask (el mask iría al drawer hijo) */ #page-clientes.cli-drawer-open .cli-drawer-shell { position: fixed; inset: 0 !important; top: var(--topbar, 54px); background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; z-index: 99; display: block !important; pointer-events: auto; } /* OVERLAY masked — vía ::before del shell, NO afecta al drawer (es sibling) */ #page-clientes.cli-drawer-open .cli-drawer-shell::before { content: ''; position: absolute; inset: 0; background: rgba(250,246,241,.35); backdrop-filter: blur(12px) saturate(0.85); -webkit-backdrop-filter: blur(12px) saturate(0.85); -webkit-mask-image: linear-gradient( to right, transparent 0%, transparent 44%, rgba(0,0,0,.15) 57%, rgba(0,0,0,.72) 70%, black 80%, black 93%, rgba(0,0,0,.10) 97%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, transparent 44%, rgba(0,0,0,.15) 57%, rgba(0,0,0,.72) 70%, black 80%, black 93%, rgba(0,0,0,.10) 97%, transparent 100% ); pointer-events: none; z-index: 0; } /* Drawer flotante — mismo patrón que Movimientos (.mv-inspector) */ #page-clientes .cli-drawer.cd-v2 { position: fixed; top: calc(var(--topbar, 54px) + 12px); right: 12px; bottom: 12px; left: auto; width: 440px; max-width: 94vw; /* Altura calculada explícita — top + bottom solos no constraina con height:auto */ height: calc(100vh - var(--topbar, 54px) - 24px); max-height: calc(100vh - var(--topbar, 54px) - 24px); background: #FFFFFF !important; border-radius: 14px; border: 1px solid rgba(26,20,16,.08) !important; overflow: hidden; display: flex !important; flex-direction: column; box-shadow: 0 12px 40px rgba(26,20,16,.18), 0 4px 12px rgba(26,20,16,.08) !important; padding: 0; grid-template-rows: none; z-index: 100; } /* ── HEADER ── */ /* ── BODY scrollable ── */ #page-clientes .cd-body { flex: 1 1 auto; min-height: 0; /* clave: permite que flex item shrink y active overflow */ overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(26,20,16,.18) transparent; } #page-clientes .cd-body::-webkit-scrollbar-thumb { background: rgba(26,20,16,.18); border-radius: 999px; } #page-clientes .cd-head { padding: 22px 24px 18px; border-bottom: 1px solid rgba(26,20,16,.08); position: relative; flex-shrink: 0 !important; } /* ── SECTIONS ── */ #page-clientes .cd-sec { padding: 18px 24px; border-bottom: 1px solid rgba(26,20,16,.06); } #page-clientes .cd-sec-kpis { padding: 16px 20px; } #page-clientes .cd-sec-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-bottom: 14px; } /* ── PUNTOS / NIVEL ── */ #page-clientes .cd-pts-wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } #page-clientes .cd-pts-num { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; color: #1A1410; font-variant-numeric: tabular-nums; line-height: 1; } #page-clientes .cd-pts-star { font-family: var(--sans); font-size: 22px; color: #C8962A; line-height: 1; } #page-clientes .cd-pts-next { font-size: 11px; color: rgba(26,20,16,.40); letter-spacing: -0.005em; text-align: right; font-style: italic; } #page-clientes .cd-prog-track { height: 4px; background: rgba(26,20,16,.05); border-radius: 2px; overflow: hidden; } #page-clientes .cd-prog-fill { height: 100%; background: linear-gradient(90deg, #A87047 0%, #C8962A 50%, #7B5C9E 100%); border-radius: 2px; transition: width .4s; } #page-clientes .cd-prog-marks { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.10em; color: rgba(26,20,16,.25); } #page-clientes .cd-prog-marks span.active { color: rgba(26,20,16,.60); } /* ── 4 KPIs ── */ #page-clientes .cd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } #page-clientes .cd-kpi { padding: 8px 4px; text-align: center; } #page-clientes .cd-kpi-val { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.025em; color: #1A1410; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 3px; white-space: nowrap; } #page-clientes .cd-kpi-lbl { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,20,16,.40); } /* ── CONTACTO ── */ #page-clientes .cd-contact { display: flex; flex-direction: column; gap: 9px; } #page-clientes .cd-cline { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(26,20,16,.78); } #page-clientes .cd-cline-ico { width: 14px; height: 14px; color: rgba(26,20,16,.40); flex-shrink: 0; } a, #page-clientes .cd-cline a { color: inherit; text-decoration: none; } /* ── NOTAS ── */ #page-clientes .cd-note { font-size: 12.5px; font-style: italic; color: rgba(26,20,16,.78); background: rgba(26,20,16,.03); padding: 10px 12px; border-left: 2px solid rgba(26,20,16,.25); border-radius: 4px; line-height: 1.5; } /* ── HISTORIAL ── */ #page-clientes .cd-hist-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(26,20,16,.05); } #page-clientes .cd-hist-row:first-child { padding-top: 0; } #page-clientes .cd-hist-date { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: rgba(26,20,16,.40); letter-spacing: 0.02em; } #page-clientes .cd-hist-desc { font-family: var(--sans); font-size: 12px; font-weight: 500; color: rgba(26,20,16,.78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.005em; } #page-clientes .cd-hist-amt { font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #1A1410; font-variant-numeric: tabular-nums; text-align: right; } #page-clientes .cd-hist-empty { font-size: 12px; color: rgba(26,20,16,.40); font-style: italic; text-align: center; padding: 20px 0; } /* ── FOOTER ── */ #page-clientes .cd-foot { flex-shrink: 0; padding: 14px 18px; border-top: 1px solid rgba(26,20,16,.08); background: #FFFFFF; display: flex; gap: 8px; align-items: center; } #page-clientes .cd-prime { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border: none !important; border-radius: 9px; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%) !important; color: rgba(245,235,215,.90) !important; font-family: var(--sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: -0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30), 0 2px 8px rgba(26,20,16,.25) !important; transition: transform .18s, box-shadow .20s !important; } #page-clientes .cd-prime::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(232,102,58,.35) 0%, rgba(232,102,58,.14) 30%, rgba(232,102,58,.04) 52%, transparent 68%); opacity: 0; transition: opacity .28s; pointer-events: none; } #page-clientes .cd-prime svg { width: 12px; height: 12px; color: rgba(245,235,215,.85); } #page-clientes .cd-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; background: transparent; border: 1px solid rgba(26,20,16,.12); border-radius: 9px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: rgba(26,20,16,.78); cursor: pointer; white-space: nowrap; transition: background .13s, border-color .13s, color .13s; } #page-clientes .cd-ghost:hover { background: rgba(26,20,16,.04); border-color: rgba(26,20,16,.18); color: #1A1410; } /* Reset legacy drawer styles that interfere */ /* ══════════════════════════════════════════════════════════════════ v7.18.0 — CLIENTES TABLE: rediseño editorial (de cards a tabla) ══════════════════════════════════════════════════════════════════ */ #page-clientes .cli-master-list { padding: 0 !important; max-width: none !important; } #page-clientes .cli-tbl { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid rgba(26,20,16,.08); border-radius: 9px; overflow: hidden; } #page-clientes .cli-tbl thead th { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26,20,16,.40); padding: 11px 14px; text-align: left; background: transparent; white-space: nowrap; } /* Row */ #page-clientes .cli-tbl tbody tr.cli-row { border-bottom: 1px solid rgba(26,20,16,.08); transition: background .12s; cursor: pointer; } #page-clientes .cli-tbl tbody tr.cli-row.is-selected { background: rgba(232,102,58,.05); box-shadow: inset 3px 0 0 0 #E8663A; } #page-clientes .cli-tbl td { padding: 10px 14px; vertical-align: middle; font-size: 13px; } /* CLIENTE: avatar + name + tier */ #page-clientes .cli-name-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; } #page-clientes .cli-avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #1A1410; } /* v7.93.1 · Tiers FID v3 — SELECTO bronce champagne / PRIVADO noir / LEGADO gold */ #page-clientes .cli-avatar.t-selecto { background: linear-gradient(135deg, rgba(181,167,147,.18), rgba(156,142,127,.14)); color: #6B5F50; } #page-clientes .cli-avatar.t-privado { background: linear-gradient(135deg, rgba(58,58,58,.10), rgba(26,26,26,.16)); color: #1A1A1A; } #page-clientes .cli-avatar.t-legado { background: linear-gradient(135deg, rgba(216,184,114,.20), rgba(201,169,97,.18)); color: #8C6F2E; box-shadow: 0 0 0 1px rgba(201,169,97,.22); } /* Backcompat legacy */ #page-clientes .cli-avatar.t-bronce, #page-clientes .cli-avatar.t-plata { background: rgba(156,142,127,.14); color: #6B5F50; } #page-clientes .cli-avatar.t-oro { background: rgba(26,26,26,.10); color: #1A1A1A; } #page-clientes .cli-avatar.t-platino { background: rgba(201,169,97,.16); color: #8C6F2E; } #page-clientes .cli-name { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.012em; color: #1A1410; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .cli-tier { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: rgba(26,20,16,.40); letter-spacing: 0.01em; } /* v7.93.1 · Dot color identitario por nivel v3 */ .cli-tier.t-legado .cli-tier-dot { background: #C9A961; box-shadow: 0 0 6px rgba(201,169,97,.4); } /* WHATSAPP */ .cli-wa { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.78); letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; } #page-clientes .cd-kpi-val.green, #page-clientes .cd-cline-wa a:hover, .cli-wa:hover { color: #22A55A; } .cli-wa-ico { display: inline-flex; width: 12px; height: 12px; color: #22A55A; flex-shrink: 0; } /* EMAIL */ .cli-email { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.60); letter-spacing: -0.005em; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } /* COMPRAS */ .cli-compras-val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: #1A1410; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 2px; } /* CAJA — saldo monetario */ .cli-caja { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #22A55A; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; white-space: nowrap; } .cli-caja.is-empty { color: rgba(26,20,16,.25); font-weight: 500; } /* PUNTOS — héroe Fraunces */ .cli-pts { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #1A1410; font-variant-numeric: tabular-nums; line-height: 1; } .cli-pts-star { font-family: var(--sans); font-size: 13px; color: #C8962A; line-height: 1; } /* ALTA */ .cli-alta { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: rgba(26,20,16,.40); letter-spacing: 0.02em; white-space: nowrap; } /* ACTIONS — hover only */ .cli-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; opacity: 0; transition: opacity .15s; } #page-clientes .cli-act-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent !important; border: none !important; border-radius: 8px; color: rgba(26,20,16,.42) !important; cursor: pointer; padding: 0; margin: 0; transition: background .14s, color .14s; } #page-clientes .cli-act-btn svg { width: 14px !important; height: 14px !important; } #page-clientes .cli-act-btn:hover { background: rgba(26,20,16,.08) !important; color: #1A1410 !important; } /* ══════════════════════════════════════════════════════════════════ v7.18.0 — VENCIMIENTOS TABLE: rediseño editorial ══════════════════════════════════════════════════════════════════ */ /* Header gris unificado */ .vc-dias.d-vencido, .vc-dias.d-hoy { background: rgba(192,57,43,.12); color: #C0392B; } .vc-dias.d-urgente { background: rgba(230,126,34,.12); color: #E67E22; } .vc-dias.d-semana { background: rgba(232,102,58,.10); color: #E8663A; } .vc-dias.d-bien { background: rgba(26,20,16,.05); color: rgba(26,20,16,.60); } /* ACTIONS — override legacy td:last-child display:flex */ #page-vencimientos .vc2-table tbody td:last-child { display: table-cell !important; vertical-align: middle !important; white-space: nowrap; text-align: right; } #page-clientes .cli-act-btn.del, #page-vencimientos .vc-act-btn.del { color: rgba(192,57,43,.55) !important; } #page-clientes .cli-act-btn.del:hover, #page-vencimientos .vc-act-btn.del:hover { background: rgba(192,57,43,.10) !important; color: #C0392B !important; } /* ══════════════════════════════════════════════════════════════════ v7.18.0 — MOVIMIENTOS KPI Cards (editorial, 4 cards) ══════════════════════════════════════════════════════════════════ */ /* Card shell */ #page-stock .sk-kpi-card:hover, #page-movimientos .mv2-kpi:hover { border-color: rgba(26,20,16,.16) !important; transform: translateY(-1px); } /* Accent line en hover */ #page-stock .sk-kpi-card::before, #page-movimientos .mv2-kpi::before { background: var(--kpi-accent, transparent); bottom: 22%; content: ''; left: 0; opacity: 0; position: absolute; top: 22%; transition: opacity .25s; width: 2px; } /* Variantes */ #page-stock .sk-kpi-card.k-activos, #page-movimientos .mv2-kpi.k-activos { --kpi-accent: rgba(26,20,16,.45); } #page-stock .sk-kpi-card.k-valor, #page-movimientos .mv2-kpi.k-valor { --kpi-accent: #E8663A; } #page-stock .sk-kpi-card.k-critico, #page-movimientos .mv2-kpi.k-critico { --kpi-accent: #C0392B; } /* Top: eyebrow + delta chip */ .sk-kpi-eyebrow, .mv2-kpi-eyebrow { color: rgba(26,20,16,.40); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .mv2-kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.03em; background: rgba(26,20,16,.06); color: rgba(26,20,16,.50); white-space: nowrap; } .mv2-kpi-delta.up { background: rgba(34,165,90,.10); color: rgba(22,84,46,.92); } .sk-kpi-delta.down, .mv2-kpi-delta.down { background: rgba(192,57,43,.10); color: rgba(140,30,20,.92); } .sk-kpi-delta.flat, .mv2-kpi-delta.flat { background: rgba(26,20,16,.06); color: rgba(26,20,16,.50); } /* Core: número héroe + sub */ #page-movimientos .mv2-kpi-num { font-family: var(--serif) !important; font-size: 38px !important; font-weight: 600 !important; letter-spacing: -0.035em; color: #1A1410 !important; line-height: 1; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; font-optical-sizing: auto !important; margin: 0; text-align: left !important; background: none !important; -webkit-text-fill-color: initial !important; } .sk-kpi-num-sub, .mv2-kpi-num-sub { color: rgba(26,20,16,.40); font-size: 11.5px; font-weight: 500; letter-spacing: -0.005em; } /* Card crítica: underline decorativo bajo el número */ #page-stock .sk-kpi-card.k-critico .sk-kpi-num::after, #page-movimientos .mv2-kpi.k-critico .mv2-kpi-num::after { background: #C0392B; border-radius: 1px; bottom: -4px; content: ''; height: 2px; left: 0; opacity: .35; position: absolute; width: 24px; } /* Foot: hairline + meta */ .sk-kpi-foot, #page-movimientos .mv2-kpi-foot { align-items: center; border-top: 1px solid rgba(26,20,16,.08); display: flex; gap: 8px; justify-content: space-between; padding-top: 12px; } .sk-kpi-meta, .mv2-kpi-meta { align-items: center; color: rgba(26,20,16,.60); display: flex; font-size: 11px; font-weight: 500; gap: 6px; letter-spacing: -0.005em; } .mv2-kpi-meta b { font-weight: 700; color: #1A1410; font-variant-numeric: tabular-nums; } .sk-kpi-meta-dot, .mv2-kpi-meta-dot { background: var(--kpi-accent, rgba(26,20,16,.25)); border-radius: 50%; flex-shrink: 0; height: 5px; width: 5px; } /* Hide legacy elements */ /* ══════════════════════════════════════════════════════════════════ v7.18.0 — MOVIMIENTOS TABLE: rediseño editorial ══════════════════════════════════════════════════════════════════ */ /* Header gris + thead → unifica con Stock */ #page-vencimientos .vc2-table thead tr, #page-movimientos .mv-table thead tr { background: #f2f1ef !important; border-bottom: 1.5px solid rgba(26,20,16,.08) !important; } #page-movimientos .mv-table thead th { font-family: var(--mono) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase !important; color: rgba(26,20,16,.40) !important; padding: 11px 14px; text-align: left !important; background: transparent !important; white-space: nowrap !important; } /* Row base */ #page-movimientos .mv-table tbody tr.mv-row { border-bottom: 1px solid rgba(26,20,16,.08) !important; transition: background .12s; cursor: pointer; } #page-movimientos .mv-table td { padding: 8px 14px !important; vertical-align: middle; } /* Row selected highlight (drawer abierto) */ #page-movimientos .mv-row-selected { background: rgba(232,102,58,.045) !important; } #page-movimientos .mv-row-selected:hover { background: rgba(232,102,58,.07) !important; } /* ── Date separator editorial (con stats) ── */ #page-movimientos .mv-day-sep { background: rgba(26,20,16,.02) !important; border-top: 1px solid rgba(26,20,16,.08) !important; border-bottom: 1px solid rgba(26,20,16,.08) !important; } #page-movimientos .mv-day-sep td { padding: 8px 14px !important; } .mv-day-content { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,20,16,.60); } .mv-day-date { font-weight: 500; color: rgba(26,20,16,.45); letter-spacing: 0.14em; } .mv-day-sep-divider { width: 14px; height: 1px; background: rgba(26,20,16,.25); } .mv-day-stat { font-weight: 500; color: rgba(26,20,16,.45); letter-spacing: 0.10em; } .mv-day-total { margin-left: auto; font-family: var(--mono); font-weight: 700; color: #1A1410; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* ── TIPO: dot + label (override del viejo pill) ── */ .mv-tipo { display: inline-flex !important; align-items: center; gap: 7px; font-family: var(--sans) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; text-transform: none !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; } .mv-tipo.t-ingreso { color: #2563EB; } .mv-tipo.t-ingreso .mv-tipo-dot { background: #2563EB; } .mv-tipo.t-merma { color: #C0392B; font-weight: 600 !important; } .mv-tipo.t-ajuste { color: #E8663A; font-weight: 600 !important; } .mv-tipo.t-transferencia .mv-tipo-dot { background: #1A1410; } /* ── FECHA: stack date + hora ── */ .mv-fecha { font-family: var(--mono); font-size: 11px; font-weight: 500; color: rgba(26,20,16,.65); letter-spacing: 0.01em; white-space: nowrap; } .mv-fecha-hora { font-family: var(--mono); font-size: 10px; font-weight: 500; color: rgba(26,20,16,.40); margin-top: 1px; letter-spacing: 0.02em; } /* ── CLIENTE ── */ .mv-cliente { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: #1A1410; letter-spacing: -0.005em; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-cliente.is-empty { color: rgba(26,20,16,.25); font-weight: 400; } /* ── PRODUCTO con ellipsis + chip "+N" ── */ .mv-producto-cell { max-width: 320px; } .mv-producto { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: rgba(26,20,16,.78); letter-spacing: -0.005em; display: flex; align-items: center; gap: 6px; } .mv-producto-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .mv-producto-more { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; background: #f2f1ef; border: 1px solid rgba(26,20,16,.08); border-radius: 4px; padding: 1px 5px; color: rgba(26,20,16,.60); flex-shrink: 0; } /* ── LOCAL compact chip ── */ #page-movimientos .mv-local { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; background: rgba(26,20,16,.05); border: 1px solid rgba(26,20,16,.08); border-radius: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: rgba(26,20,16,.60); letter-spacing: 0.04em; } /* ── PAGO: dot + label (override del viejo pill) ── */ .mv-pago { display: inline-flex !important; align-items: center; gap: 6px; font-family: var(--sans) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: rgba(26,20,16,.78) !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; text-transform: none !important; } .nd-pago-pill.efectivo::before, .cc2-pago-pill.efectivo::before, .mv-pago.efectivo .mv-pago-dot { background: #C8962A; } .nd-pago-pill.debito::before, .cc2-pago-pill.debito::before, .mv-pago.debito .mv-pago-dot { background: rgba(26,20,16,.55); } .mv-pago.caja { color: #7a4a16; } /* v7.19.0 — MODO ELIMINACIÓN de movimientos (comando oculto Ctrl+Shift+M) */ #page-movimientos.is-mv-delete-mode::before { content: "⚠ MODO ELIMINACIÓN · Ctrl+Shift+M para salir"; position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100; padding: 7px 16px; background: linear-gradient(158deg, #7a1c1c 0%, #3d0d0d 100%); color: #fff; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 8px 24px rgba(100,20,20,.35), 0 0 0 1px rgba(255,255,255,.08) inset; animation: mv-del-pulse 2s ease-in-out infinite; pointer-events: none; } @keyframes mv-del-pulse { 0%,100% { box-shadow: 0 8px 24px rgba(100,20,20,.35), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 0 rgba(224,82,82,.4); } 50% { box-shadow: 0 8px 24px rgba(100,20,20,.35), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 10px rgba(224,82,82,0); } } /* Las filas en modo delete: borde sutil rojo a la izquierda */ #page-movimientos.is-mv-delete-mode .mv-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(224,82,82,.25); pointer-events: none; } /* Botón de eliminar individual */ .mv-td-delete { width: 44px; text-align: right; padding-right: 10px; } .mv-del-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(224,82,82,.20); background: rgba(224,82,82,.05); color: #c43a3a; cursor: pointer; transition: all .15s ease; } .mv-del-btn:hover { background: rgba(224,82,82,.12); border-color: rgba(224,82,82,.45); color: #a83030; transform: scale(1.06); } .mv-pago.is-empty { color: rgba(26,20,16,.25) !important; } .vc-dias.d-bien .vc-dias-dot, .mv-pago.is-empty .mv-pago-dot { background: rgba(26,20,16,.25); } /* v7.19.0 — Caja como medio de pago dedicado */ .nd-pago-pill.caja::before, .cc2-pago-pill.caja::before, .mv-pago.caja .mv-pago-dot, .mvd-dot-caja { background: #7a4a16; } .cc2-pago-pill.caja { background: rgba(122,74,22,.10); color: #7a4a16; border-color: rgba(122,74,22,.20); } /* ── TOTAL (héroe) ── */ #page-movimientos .mv-td-total { text-align: right !important; } #page-movimientos .mv-row .mv-total, #page-movimientos td .mv-total { font-family: var(--serif) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.018em; color: #1A1410; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "lnum" 1 !important; font-optical-sizing: auto; white-space: nowrap; line-height: 1.1; } /* ── Hover chevron arrow ── */ .mv-row-arrow { display: flex; align-items: center; justify-content: center; width: 24px; color: rgba(26,20,16,.25); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s, color .15s; } #page-movimientos tr.mv-row:hover .mv-row-arrow { opacity: 1; transform: translateX(0); color: rgba(26,20,16,.60); } /* ── Override viejos estilos (legacy) ── */ /* ── 8. STOCK TABLE — simplificación visual (v7.18.0) ─────────────── */ /* Categoría: solo texto muted (sin pill) */ .sk-cat { font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.60); white-space: nowrap; } /* Sucursal: chip compacto */ .sk-loc { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; background: rgba(26,20,16,.05); border: 1px solid rgba(26,20,16,.08); border-radius: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: rgba(26,20,16,.60); letter-spacing: 0.04em; } /* v7.31.0 — Local tags con color */ .sk-loc.tag-l2, #page-movimientos .mv-local.tag-l2 { background: var(--c-plum-soft); color: var(--c-plum-ink); border-color: var(--c-plum-line); white-space: nowrap; } /* Cantidad: número grande mono + subtítulo "mín. X u." */ .sk-qty-val { font-family: var(--mono); font-size: 14px; font-weight: 600; color: #1A1410; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 2px; } .vc-group.g-vencido .vc-group-label, #page-movimientos .mv-row .mv-total.is-neg, .sk-qty-val.is-critical { color: #C0392B; } .cli-compras-sub, .sk-qty-sub { color: rgba(26,20,16,.40); font-size: 10.5px; font-weight: 500; } /* Precio: valor mono + subtítulo "por kg" */ .sk-price-val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: #1A1410; font-variant-numeric: tabular-nums; white-space: nowrap; } .sk-price-sub { font-size: 10.5px; color: rgba(26,20,16,.40); } /* Acciones: hidden por default, aparecen al hover de la fila */ #stock-tbody tr .sk-row-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; opacity: 0; transition: opacity .15s; } .sk-act-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: 7px; color: rgba(26,20,16,.40); cursor: pointer; padding: 0; transition: background .12s, color .12s; } .sk-act-btn:hover { background: rgba(26,20,16,.07); color: #1A1410; } .sk-act-btn.del:hover { background: rgba(192,57,43,.08); color: #C0392B; } /* ── 9. NIVEL — Segmented Bar System (v7.18.0) ────────────────────── */ /* Cada barra = 1 unidad en stock · MAX 20 barras · degradado reactivo */ .sk-seg-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; min-width: 96px; } .sk-seg-bar { width: 4px; border-radius: 2px; flex-shrink: 0; transition: opacity .15s; } .sk-seg-filled { height: 14px; } .sk-seg-empty { height: 9px; background: rgba(26,20,16,.09); } tr:hover .sk-seg-empty { background: rgba(26,20,16,.16); } /* ── 9. SIDEBAR: item activo v7.25.0 ───────────────────── */ /* ═══ 08. NOTIFICACIONES ═══ */ .ph-venc-dot.visible { display: inline-block; } .ph-title { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--char); letter-spacing: -0.02em; line-height: 1.1; position: relative; padding-left: 14px; } .ph-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: linear-gradient(180deg, var(--accent-warm) 0%, var(--accent-warm-lt) 100%); border-radius: 99px; } .ph-sub { font-size: 10.5px; color: var(--ink-70); margin-top: 4px; font-family: var(--mono); padding-left: 14px; letter-spacing: 0.02em; } .ph-sub, .kpi-sub { color: var(--text-meta); } .urgente-item.visible { height: 58px; opacity: 1; animation: urgente-shake-in .4s cubic-bezier(.36,.07,.19,.97) both; } .va-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 0 14px; border-radius: var(--r2); border: 1.5px solid transparent; padding: 16px 18px; position: relative; overflow: hidden; } .va-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; } .va-card.ok { background: rgba(34,165,90,.06); border-color: rgba(34,165,90,.18); } .va-card.atencion { background: rgba(232,102,58,.07); border-color: rgba(232,102,58,.22); } .va-card.critico { background: rgba(224,82,82,.07); border-color: rgba(224,82,82,.22); } .va-card.ok::before { background: var(--green); } .va-card.atencion::before { background: var(--amber); } .va-card.critico::before { background: var(--red); } .va-icon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; } .va-icon.ok { background: rgba(34,165,90,.12); color: var(--green); } .va-icon.atencion { background: rgba(232,102,58,.12); color: var(--amber); } .va-icon.critico { background: rgba(224,82,82,.12); color: var(--red); } .va-titulo { font-size: 13px; font-weight: 700; color: var(--char); font-family: var(--sans); line-height: 1.3; } .va-cuerpo { font-size: 12px; color: var(--ink-82); font-family: var(--sans); line-height: 1.5; } .va-foot { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .va-ts { font-size: 10px; color: var(--ink-70); font-family: var(--mono); } .va-card.ok .va-btn-ok { border-color: rgba(34,165,90,.4); color: var(--green); } .va-card.atencion .va-btn-ok { border-color: rgba(232,102,58,.4); color: var(--amber); } .va-card.critico .va-btn-ok { border-color: rgba(224,82,82,.4); color: var(--red); } .va-card.ok .va-btn-ok:hover { background: rgba(34,165,90,.1); } .va-card.atencion .va-btn-ok:hover { background: rgba(232,102,58,.1); } .va-card.critico .va-btn-ok:hover { background: rgba(224,82,82,.1); } .va-btn-ok { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 6px 14px; border-radius: 6px; border: 1.5px solid; background: none; cursor: pointer; transition: background .14s, transform .12s; white-space: nowrap; } .va-prods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; grid-column: 2; } .va-prod-pill { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 5px; letter-spacing: .02em; line-height: 1.3; } .va-prod-pill.critico { background: rgba(224,82,82,.10); color: #E05252; border: 1px solid rgba(224,82,82,.18); } .va-prod-pill.atencion { background: rgba(232,102,58,.10); color: #E8663A; border: 1px solid rgba(232,102,58,.18); } /* ── v7.26.0 Asistente posicionado entre tríptico y toolbar ── */ #page-vencimientos #venc-asistente { margin: 0 0 6px; } .av-head { padding: 18px 20px 14px; border-bottom: 1px solid rgba(205, 188, 165, 0.9); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: #f2eadd; } .av-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(232,102,58, 0.12); border: 1px solid rgba(232,102,58, 0.26); flex-shrink: 0; } .av-title { font-size: 15px; font-weight: 600; font-family: var(--serif); color: var(--char); line-height: 1.1; } .av-sub { font-size: 11px; color: var(--ink-82); margin-top: 4px; } .av-kpi { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; border: 1px solid rgba(26, 20, 16, 0.14); color: var(--ink-82); background: rgba(255, 255, 255, 0.62); } .av-kpi.crit { border-color: rgba(224,82,82, 0.34); color: #8a1a0f; background: rgba(224,82,82, 0.1); } .av-kpi.warn { border-color: rgba(160, 98, 10, 0.34); color: #7f4c00; background: rgba(160, 98, 10, 0.1); } .av-body { overflow-y: auto; padding: 10px 20px 12px; flex: 1; } .av-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(217, 204, 186, 0.82); } .av-semaforo { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .av-nombre { font-size: 13px; font-weight: 600; color: var(--char); line-height: 1.18; } .av-meta { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-82); } .av-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid; } .av-item.critico .av-nombre { color: #5a0a04; } .av-item.proximo .av-nombre { color: #6f4310; } .av-foot { padding: 13px 20px; border-top: 1px solid rgba(205, 188, 165, 0.88); display: flex; gap: 8px; justify-content: flex-end; background: #f2eadd; } .notif-backdrop { background: rgba(26,20,16,.20); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: default; animation: np-backdrop-in .28s ease both; position: fixed; inset: 0; z-index: calc(var(--z-banner) + 199); } .notif-panel { bottom: 0; max-width: calc(100vw - 16px); border-left: 1px solid rgba(26,20,16,.08); position: fixed; top: calc(var(--topbar, 54px) + 8px); right: 12px; width: 380px; max-height: calc(100vh - var(--topbar, 54px) - 24px); background: #FFFFFF; border: none; border-radius: 16px; box-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 1px #fdfcfb, 0 4px 12px rgba(26,20,16,.06), 0 12px 32px rgba(26,20,16,.10), 0 32px 64px rgba(26,20,16,.08); display: flex; flex-direction: column; overflow: hidden; z-index: calc(var(--z-banner) + 200); animation: lx-notif-drop var(--lx-d-slow) var(--lx-curve-spring) both; } .notif-mark-all-btn { letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; animation: np-badge-pop .4s .22s cubic-bezier(.16,1,.3,1) both; font-family: var(--sans); font-size: 12px; font-weight: 500; color: rgba(26,20,16,.50); background: transparent; border: 1px solid rgba(26,20,16,.10); border-radius: 7px; padding: 5px 10px; cursor: pointer; transition: background .13s, color .13s, border-color .13s; outline: none; } .notif-mark-all-btn:hover { transform: translateY(-1px); background: rgba(26,20,16,.05); color: #1A1410; border-color: rgba(26,20,16,.18); } .notif-filter-pill { letter-spacing: .18em; text-transform: uppercase; animation: np-pill-in .38s cubic-bezier(.16,1,.3,1) both; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(26,20,16,.05); border: none; border-radius: 999px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.55); cursor: pointer; white-space: nowrap; transition: background .13s, color .13s; outline: none; flex-shrink: 0; } .notif-filter-pill:hover { border-color: rgba(26,20,16,.14); transform: translateY(-1px); background: rgba(26,20,16,.09); color: #1A1410; } .tb-action-zone .sk-btn-primary, .notif-filter-pill.on { background: #1A1410; color: #F5EFE6; } .notif-panel::after { content: ''; display: none; /* solo para referencia */ } .notif-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 10px; scrollbar-width: thin; scrollbar-color: rgba(26,20,16,.12) transparent; } [class*="-eyebrow"], [class*="-kicker"], [class*="-label"][class*="kpi"], .notif-item-eyebrow, .mvd-eyebrow, .mvd-total-label, .v3-c-eyebrow, [class*="-fecha"], [class*="-time"], [class*="-meta"], .mv-td-fecha, .notif-item-time, .mvd-meta, .mvd-item-meta, .mvd-item-lote { font-family: var(--mono) !important; letter-spacing: 0.03em !important; font-weight: 500 !important; } [class*="-item-name"], [class*="-prod-name"], .vc2-prod-name, .mvd-item-name, .notif-item-title, [class*="-prod-prov"], [class*="-detail"], .vc2-prod-prov, .notif-item-detail, .mvd-row-l { font-family: var(--sans) !important; font-weight: 400 !important; letter-spacing: -0.005em !important; } .mvd-act, .mv2-dd-value, .notif-filter-pill, .notif-mark-all-btn { font-family: var(--sans) !important; letter-spacing: -0.005em !important; } /* ═══ 09. CHAT FLOAT ═══ */ .chat-topbar { padding: 16px 28px; border-bottom: 1.5px solid var(--border-warm); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--paper-2); } .chat-topbar h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--char); letter-spacing: -.01em; } .chat-topbar p { font-size: 11px; color: var(--ink-82); font-family: var(--sans); font-weight: 400; margin-top: 2px; } .chat-body { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); } .chat-msg.mine .chat-bubble { background: var(--accent-warm); color: #fff; border-radius: 12px 12px 3px 12px; } .chat-msg.other .chat-bubble { background: var(--paper-2); border: 1.5px solid var(--border-warm); color: var(--char); border-radius: 12px 12px 12px 3px; } .chat-footer { padding: 14px 28px; border-top: 1.5px solid var(--border-warm); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; background: var(--paper-2); } .chat-input { flex: 1; background: var(--paper); border: 1.5px solid var(--border-warm); color: var(--char); padding: 10px 14px; font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.5; outline: none; border-radius: 20px; resize: none; transition: border-color 0.15s, box-shadow 0.15s; max-height: 100px; } .chat-input:focus { border-color: var(--accent-warm); box-shadow: 0 0 0 3px var(--accent-warm-bg); } .chat-send { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent-warm), #e8924a); border: none; border-radius: var(--r); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; box-shadow: 0 3px 10px rgba(232,102,58, 0.3); } .chat-send:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(232,102,58, 0.4); } .chat-send svg { width: 16px; height: 16px; stroke: var(--paper); } .chat-read.seen {color:var(--accent-warm)} .chat-msg.mine .chat-quote {background:rgba(255,255,255,.15);border-left-color:rgba(255,255,255,.5)} .chat-msg.mine .chat-quote-autor {color:rgba(255,255,255,.9)} .chat-msg.mine .chat-quote-texto {color:rgba(255,255,255,.75)} .chat-msg.mine .chat-prod-card {background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)} .chat-msg.mine .cpc-tag {color:rgba(255,255,255,.6)} .chat-msg.mine .cpc-nombre {color:#fff} .chat-msg.mine .cpc-info {color:rgba(255,255,255,.7)} .chat-badge { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: var(--red); color: #fff; font-size: 10px; font-family: var(--mono); font-weight: 700; padding: 2px 7px; border-radius: 10px; display: none; animation: badge-pulse 1.4s ease infinite; box-shadow: 0 0 0 0 rgba(224,82,82, 0.6); } .chat-toast { position: fixed; bottom: 92px; right: 24px; z-index: var(--z-chat-toast); width: 320px; max-width: calc(100vw - 32px); background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 14px; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.04), 0 8px 28px rgba(26, 20, 16, 0.10), 0 24px 60px rgba(26, 20, 16, 0.06); animation: ct-emerge 0.42s cubic-bezier(0.32, 0.72, 0, 1) forwards; cursor: pointer; overflow: hidden; /* v7.25.0 perf: blur removido — background .96 ya es casi opaco, blur imperceptible */ transform-origin: bottom right; will-change: transform, opacity; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .chat-toast:hover { border-color: rgba(26, 20, 16, 0.14); box-shadow: 0 1px 2px rgba(26, 20, 16, 0.04), 0 12px 36px rgba(26, 20, 16, 0.14), 0 32px 72px rgba(26, 20, 16, 0.08); } .chat-toast.removing { animation: ct-out 0.26s cubic-bezier(0.55, 0, 0.65, 0.2) forwards; pointer-events: none; } .chat-toast-inner { padding: 12px 14px; display: flex; gap: 11px; align-items: center; } .chat-toast-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #2A1F18 0%, #1A1410 100%); color: #F5EFE6; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 14px; font-weight: 600; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(26, 20, 16, 0.10), 0 1px 2px rgba(26, 20, 16, 0.10); text-transform: uppercase; user-select: none; animation: ct-avatar-ping 1.4s ease-out; } .chat-toast-icon::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #E8663A; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(26, 20, 16, 0.06); } .chat-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; } .chat-toast-from { font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #1A1410; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-toast-msg { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: rgba(26, 20, 16, 0.65); line-height: 1.35; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .chat-toast-close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px; background: transparent; border: none; color: rgba(26, 20, 16, 0.40); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0; opacity: 0; transform: scale(0.85); transition: opacity 0.16s ease, color 0.14s ease, background 0.14s ease, transform 0.16s ease; padding: 0; } .chat-toast:hover .chat-toast-close { opacity: 1; transform: scale(1); } .chat-toast-close:hover { background: rgba(26, 20, 16, 0.08); color: #1A1410; } .chat-toast-close::before, .chat-toast-close::after { content: ""; position: absolute; width: 11px; height: 1.6px; background: currentColor; border-radius: 2px; } .chat-toast-close::before { transform: rotate(45deg); } .chat-toast-close::after { transform: rotate(-45deg); } .cf-head { padding: 18px 20px 16px; background: #FFFFFF; border-bottom: 1px solid rgba(26, 20, 16, 0.06); display: flex; align-items: center; gap: 12px; flex-shrink: 0; position: relative; } .cf-head > svg:first-child { width: 18px; height: 18px; color: #E8663A; flex-shrink: 0; opacity: 1; } .cf-peer-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2A1F18 0%, #1A1410 100%); color: #F5EFE6; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(26, 20, 16, 0.10), 0 1px 2px rgba(26, 20, 16, 0.10); text-transform: uppercase; user-select: none; } .cf-peer-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22A55A; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(26, 20, 16, 0.06); } .sb-org-status.offline, .sb-org-status.off, .vc-group.g-vencido .vc-group-dot, .vc-group.g-hoy .vc-group-dot, .vc-dias.d-vencido .vc-dias-dot, .vc-dias.d-hoy .vc-dias-dot, .mv-tipo.t-merma .mv-tipo-dot, .cf-peer-avatar.offline::after { background: #C0392B; } .sb-org-status.warning, .sb-org-status.warn, .tb-notif-badge.warn, .vc-dias.d-urgente .vc-dias-dot { background: #E67E22; } .cf-peer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.15; } .cf-head-title { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #1A1410; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-peer-sub { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 20, 16, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-pres { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1F7A42; line-height: 1; white-space: nowrap; padding: 4px 8px; background: rgba(34,165,90, 0.08); border: 1px solid rgba(34,165,90, 0.18); border-radius: 999px; } .cf-pres.dim { background: rgba(26, 20, 16, 0.04); border-color: rgba(26, 20, 16, 0.10); color: rgba(26, 20, 16, 0.50); } .cf-head-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: rgba(26, 20, 16, 0.45); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0; padding: 0; flex-shrink: 0; transition: background 0.14s ease, color 0.14s ease; } .cf-head-close::before { content: ""; width: 14px; height: 2px; background: currentColor; border-radius: 2px; } .cf-pin-ico { font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: 0.16em; color: #E8663A; background: rgba(232,102,58, 0.14); border: 1px solid rgba(232,102,58, 0.28); border-radius: 999px; padding: 3px 8px; flex-shrink: 0; } .cf-pin-txt { min-width: 0; flex: 1; font-size: 12.5px; color: rgba(26, 20, 16, 0.70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: #fdfcfb; scrollbar-width: thin; scrollbar-color: rgba(26, 20, 16, 0.18) transparent; } .cf-msg { max-width: 82%; display: flex; flex-direction: column; gap: 4px; } .chat-msg.mine, .cf-msg.mine { align-items: flex-end; align-self: flex-end; } .chat-msg.other, .cf-msg.other { align-items: flex-start; align-self: flex-start; } .cf-sender { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42); line-height: 1; margin-bottom: 2px; padding: 0 4px; } .cf-bubble { padding: 10px 14px; font-size: 13.5px; font-family: var(--sans); font-weight: 500; line-height: 1.45; word-break: break-word; letter-spacing: -0.005em; } .cf-msg.mine .cf-bubble { background: #1A1410; color: #F5EFE6; border-radius: 14px 14px 4px 14px; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10); } .cf-msg.other .cf-bubble { background: #FFFFFF; color: #1A1410; border: 1px solid rgba(26, 20, 16, 0.07); border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.03); } .cf-meta { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: rgba(26, 20, 16, 0.42); line-height: 1; padding: 0 4px; } .cf-read { font-size: 10px; margin-left: 4px; } .trf-search input::placeholder, .trf-filter-search input::placeholder, #trf-obs::placeholder, #page-cierre .cc3-arqueo-input::placeholder, .mv2-search-input::placeholder, .cf-read.sent { color: rgba(26, 20, 16, 0.32); } .cf-sep { align-self: center; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.32); padding: 6px 12px; background: rgba(26, 20, 16, 0.04); border-radius: 999px; } .cf-msg-actions { margin-top: 2px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.16s ease; } .cf-msg-actions.other { justify-content: flex-start; } .cf-msg-actions.mine { justify-content: flex-end; } .cf-act-btn { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(26, 20, 16, 0.08); color: rgba(26, 20, 16, 0.55); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.14s, color 0.14s, border-color 0.14s; } .cf-act-btn:hover { background: #FFFFFF; border-color: rgba(26, 20, 16, 0.16); color: #1A1410; } .cf-act-ico { width: 12px; height: 12px; stroke-linecap: round; stroke-linejoin: round; } .cf-msg-actions.mine .cf-act-btn { color: rgba(26, 20, 16, 0.50); } .cf-footer { padding: 0; border-top: 1px solid rgba(26, 20, 16, 0.06); background: #FFFFFF; display: flex; flex-direction: column; flex-shrink: 0; position: relative; } .cf-footer-row { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px 14px; } .cf-rp-bar { width: 3px; align-self: stretch; background: #E8663A; border-radius: 2px; } .cf-rp-texto { margin-top: 2px; font-size: 11px; color: rgba(26, 20, 16, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-rp-close { width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: rgba(26, 20, 16, 0.40); font-size: 14px; line-height: 1; cursor: pointer; transition: background 0.14s, color 0.14s; } .cf-add-prod { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(26, 20, 16, 0.10); background: rgba(26, 20, 16, 0.025); color: rgba(26, 20, 16, 0.55); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.14s, border-color 0.14s, color 0.14s; } .cf-add-prod:hover { background: #FFFFFF; border-color: rgba(26, 20, 16, 0.18); color: #1A1410; } .cf-input { flex: 1; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.10); color: #1A1410; padding: 9px 12px; font-family: var(--sans); font-size: 13.5px; line-height: 1.4; outline: none; border-radius: 10px; resize: none; max-height: 120px; min-height: 38px; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .cf-input:focus { border-color: rgba(232,102,58, 0.45); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(232,102,58, 0.10); } .cf-send { width: 38px; height: 38px; background: #1A1410; border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.16s, transform 0.10s; } .tb-action-zone .sk-btn-primary:hover, .cf-send:hover { background: #2A1F18; } #chat-float-btn:active, .cf-send:active { transform: scale(0.96); } .cf-send svg { width: 14px; height: 14px; stroke: #F5EFE6; stroke-width: 2.4; fill: none; } body.cf-open #chat-float-btn { opacity: 0; transform: scale(0.8) translateX(20px); pointer-events: none; } .cf-quote { border-left: 2px solid #E8663A; background: rgba(232,102,58, 0.06); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; } .cf-rp-autor, .cf-quote-autor { color: #E8663A; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .cf-quote-texto { font-size: 11px; color: rgba(26, 20, 16, 0.65); margin-top: 2px; } .cf-prod-card { border: 1px solid rgba(232,102,58, 0.22); background: rgba(232,102,58, 0.05); border-radius: 10px; padding: 9px 11px; } .cf-prod-tag { font-family: var(--mono); font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #E8663A; } .cf-prod-name { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #1A1410; } .cf-prod-info { margin-top: 2px; font-family: var(--mono); font-size: 10px; color: rgba(26, 20, 16, 0.55); } .cf-pick-item { padding: 10px 14px; border-bottom: 1px solid rgba(26, 20, 16, 0.05); display: flex; justify-content: space-between; gap: 10px; cursor: pointer; transition: background 0.12s; } .cf-pick-name { font-size: 12.5px; color: #1A1410; font-weight: 500; } .cf-pick-meta { font-family: var(--mono); font-size: 10px; color: rgba(26, 20, 16, 0.45); white-space: nowrap; } /* ═══ 10. MODALES/CHANGELOG ═══ */ .modal { position: relative; background: #fff; border: 1px solid #E5E0DC; width: 560px; max-width: 100%; max-height: min(88vh, 920px); overflow: hidden; contain: layout; display: flex; flex-direction: column; border-radius: 20px; animation: pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 20px 60px rgba(35, 29, 26, 0.16), 0 4px 16px rgba(35, 29, 26, 0.08); min-height: 0; } #modal-overlay .modal[style*="display: block"], #modal-overlay .modal[style*="display:block"], #modal-overlay .modal[style*="display: flex"], #modal-overlay .modal[style*="display:flex"] { display: flex !important; flex-direction: column; } .modal-head { padding: 24px 28px 20px; border-bottom: 1px solid #E5E0DC; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; z-index: 2; } .modal-head h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #231D1A; text-align: left; letter-spacing: -0.01em; } .modal-close { position: static; transform: none; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid #E5E0DC; color: #766960; cursor: pointer; font-size: 12px; line-height: 1; border-radius: 50%; transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; } .modal-close:hover { color: #231D1A; background: #F2F0ED; border-color: #E8663A; transform: rotate(90deg); } .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 20px; background: #fdfcfb; scrollbar-width: thin; scrollbar-color: #E5E0DC transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .modal-foot { padding: 16px 28px 20px; border-top: 1px solid #E5E0DC; display: flex; gap: 9px; justify-content: flex-end; position: sticky; bottom: 0; background: #fff; z-index: 2; } .fg input, .fg select, .qty-row select, .modal-body select:not([size]), .modal-body input:not([type="hidden"]), .modal-body textarea { color-scheme: light; } .modal-body select[size] { width: 100%; border: 1px solid rgba(232,102,58, 0.16) !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.62) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(26, 20, 16, 0.03); padding: 8px !important; } .modal-body select[size]:focus { border-color: rgba(232,102,58, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 0 3px var(--accent-warm-bg) !important; } .modal-body select[size] option { padding: 8px 10px; border-radius: 9px; margin: 2px 0; } .modal-body select[size] option:checked { background: rgba(232,102,58, 0.16) linear-gradient(0deg, rgba(232,102,58, 0.16), rgba(232,102,58, 0.16)); color: var(--char); } .modal-foot .btn-prime { background: #E8663A; color: #fff; border: none; border-radius: 10px; padding: 11px 22px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; } .modal-foot .btn-prime:hover { background: #b35525; box-shadow: 0 4px 14px rgba(232,102,58, 0.32); border-left: none; } .modal-foot .btn-ghost { background: transparent; color: #766960; border: 1.5px solid #E5E0DC; border-radius: 10px; padding: 10px 18px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .modal-foot .btn-ghost:hover { border-color: #E8663A; color: #231D1A; background: rgba(232,102,58, 0.04); } .changelog-head { padding: 22px 24px 18px; border-bottom: 1.5px solid var(--border-warm); background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); position: relative; overflow: hidden; } .changelog-head::after { content: ''; position: absolute; top: 0; right: 0; width: 160px; height: 100%; background: radial-gradient(ellipse at right, rgba(232,102,58,.2) 0%, transparent 65%); } .changelog-version { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-warm); font-weight: 600; margin-bottom: 6px; } .changelog-title { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--text-on-dark); line-height: 1.2; } .changelog-date { font-family: var(--mono); font-size: 10px; color: rgba(246,239,226,.4); margin-top: 4px; } .changelog-body { padding: 20px 24px; overflow-y: auto; flex: 1; } .changelog-item { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border-warm); } .changelog-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; } .changelog-item-text { font-size: 13px; color: var(--ink-82); line-height: 1.5; } .changelog-item-text b { color: var(--char); font-weight: 500; } .changelog-foot { padding: 14px 24px; border-top: 1.5px solid var(--border-warm); display: flex; justify-content: flex-end; gap: 8px; background: var(--paper-2); } /* ═══ 11. UPDATE BANNER ═══ */ .update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast); background: linear-gradient( 135deg, #1a2a1a 0%, #1a3320 50%, #1a2a1a 100% ); border-bottom: 2px solid var(--green); padding: 0; animation: updateSlideDown 0.35s ease-out; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .update-banner-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 20px; } .update-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(34,165,90, 0.25); display: flex; align-items: center; justify-content: center; color: #5be88e; } .update-text span { color: #d0f0d8; font-family: var(--sans); font-size: 13px; font-weight: 500; } .update-progress-bar { margin-top: 6px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; } .update-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), #5be88e); border-radius: 3px; transition: width 0.3s ease; } .update-btn-primary { background: var(--green); color: #fff; border: none; padding: 7px 18px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: var(--sans); cursor: pointer; transition: all 0.15s; } .update-btn-primary:hover { background: #38975f; transform: scale(1.03); } .update-btn-install { background: linear-gradient(135deg, var(--accent-warm), #e8924a); color: #fff; border: none; padding: 7px 18px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: var(--sans); cursor: pointer; animation: updatePulse 2s infinite; transition: all 0.15s; } .update-btn-install:hover { transform: scale(1.05); } .update-btn-close { background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.15s; } .update-btn-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } /* ═══ 12. DASHBOARD ═══ */ .dash-status-dot.open { background: rgba(34,165,90,.10); color: var(--green); border: 1px solid rgba(34,165,90,.25); } .dash-status-dot.closed { background: rgba(224,82,82,.09); color: var(--red); border: 1px solid rgba(224,82,82,.22); } .dash-status-dot.break { background: rgba(160,98,10,.09); color: var(--amber); border: 1px solid rgba(160,98,10,.22); } .dash-status-dot.rest { background: rgba(59,130,196,.09); color: var(--blue); border: 1px solid rgba(59,130,196,.22); } .dash-status-dot.open::before { animation: pulse-green 2s ease-in-out infinite; } .dash-panel { background: var(--card-bg); border: var(--card-border-thin); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); } .dash-panel-empty { padding: 32px 18px; text-align: center; font-size: 12px; color: var(--ink-70); } .dash-timeline { padding: 4px 0; } .dash-tl-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 18px; border-bottom: 1px solid rgba(217,204,186,.5); transition: background .1s; } .nota-item:hover, .dash-tl-item:hover { background: #fdfcfb; } .dash-tl-icon { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 1px; } .dash-tl-icon.venta { background: rgba(34,165,90,.08); } .dash-tl-icon.ingreso { background: rgba(59,130,196,.08); } .dash-tl-icon.merma { background: rgba(224,82,82,.07); } .dash-tl-icon.ajuste { background: rgba(160,98,10,.07); } .dash-tl-icon.transferencia_salida { background: rgba(232,102,58,.07); } .dash-tl-icon.transferencia_entrada { background: rgba(34,165,90,.07); } .dash-tl-prod { font-size: 12px; font-weight: 500; color: var(--char); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-tl-meta { font-size: 10px; color: var(--ink-70); margin-top: 1px; } .dash-tl-delta { font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; } .dash-tl-hora { font-size: 9px; color: var(--ink-70); font-family: var(--mono); margin-top: 3px; } #page-dashboard .dash-tl-icon { width: 28px; height: 28px; border-radius: 6px; } #page-dashboard .dash-tl-delta { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; } .dash-tl-delta.pos, #page-dashboard .dash-tl-delta.pos { color: var(--green); } .dash-tl-delta.neg, #page-dashboard .dash-tl-delta.neg { color: var(--red); } #page-dashboard #ds-venc-cell.venc-alert-critical { --venc-edge: rgba(224,82,82, 0.55); box-shadow: inset 0 0 0 1px var(--venc-edge); } #page-dashboard #ds-venc-cell.venc-alert-warn { --venc-edge: rgba(232,102,58, 0.46); box-shadow: inset 0 0 0 1px var(--venc-edge); } #page-dashboard #ds-venc-cell.venc-alert-ok { --venc-edge: rgba(34,165,90, 0.36); box-shadow: inset 0 0 0 1px var(--venc-edge); } #page-dashboard #ds-sparkline { opacity: 0.42; } #page-dashboard .dash-tl-item, #page-dashboard .dash-tl-item:hover, #page-dashboard .dash-tl-meta, #page-dashboard .dash-tl-hora, #page-dashboard.dashboard-core { --db-surface-0: var(--paper); --db-line-soft: rgba(205, 188, 165, 0.56); --db-text-meta: rgba(26, 20, 16, 0.68); background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); } #page-dashboard.dashboard-core .dash-panel, #page-dashboard.dashboard-core #ds-venc-cell { background: var(--db-surface-0); border: 1px solid rgba(26,20,16,.05); box-shadow: var(--card-shadow); } #page-dashboard.dashboard-core .dash-tl-meta, #page-dashboard.dashboard-core .dash-tl-hora, #page-dashboard.dashboard-core .nota-meta { color: var(--db-text-meta); } #page-dashboard.dashboard-core .dash-tl-item, #page-dashboard.dashboard-core .nota-item { border-bottom-color: var(--db-line-soft); } .cf-pick-item:hover, #page-dashboard.dashboard-core .dash-tl-item:hover, #page-dashboard.dashboard-core .nota-item:hover { background: rgba(232,102,58, 0.06); } #page-dashboard .dash-venc-empty { margin-top: 10px; font-size: 11px; color: var(--ink-70); } #page-dashboard .dash-venc-head, #page-dashboard .dash-venc-row { display: grid; grid-template-columns: 1.5fr .76fr .44fr; gap: 8px; align-items: center; } #page-dashboard .dash-venc-state { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; } #page-dashboard .dash-venc-days { font-family: var(--mono); font-weight: 700; text-align: right; } #page-dashboard .nota-list { max-height: 360px; } #page-dashboard #dth.clock-digit-flip, #page-dashboard #dtm.clock-digit-flip { display: inline-block; animation: dashClockDigitFlip .46s cubic-bezier(.16,.84,.28,1); will-change: transform, opacity, filter; } #dash-venc-hover-card .dash-vh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } #dash-venc-hover-card .dash-vh-date { font-family: var(--serif); font-size: 15px; color: var(--char); font-weight: 600; } #dash-venc-hover-card .dash-vh-total { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-82); font-weight: 700; } #dash-venc-hover-card .dash-vh-list { border: 1px solid rgba(232,102,58, 0.2); border-radius: 9px; background: rgba(255, 255, 255, 0.62); overflow: hidden; } #dash-venc-hover-card .dash-vh-row { display: grid; grid-template-columns: 1.4fr .7fr .35fr; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid rgba(232,102,58, 0.14); } #dash-venc-hover-card .dash-vh-prod { font-size: 12px; color: var(--char); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #dash-venc-hover-card .dash-vh-state { justify-self: start; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 2px 7px; } #dash-venc-hover-card .dash-vh-days { justify-self: end; font-family: var(--mono); font-size: 11px; font-weight: 700; } #dash-venc-hover-card .dash-vh-empty { font-size: 11px; color: var(--ink-70); padding: 10px 8px; } #dash-venc-hover-card .dash-vh-more { margin-top: 6px; font-size: 10px; font-family: var(--mono); color: var(--ink-70); } #page-dashboard .dash-time{ font-family: var(--serif); line-height: 1; font-style: normal; letter-spacing: -0.02em; font-weight: 420; transform-origin: left center; color: #1a1410; font-size: 58px; } #page-dashboard .dash-local-name{ font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; display: inline-block; font-weight: 600; color: rgba(232,102,58,0.55); letter-spacing: .20em; } #page-dashboard .dash-panel{ overflow: hidden; border-radius: var(--radius-lg); background: #ffffff; border: 1px solid rgba(26,20,16,0.05) !important; border-top: 2px solid rgba(232,102,58,0.16) !important; box-shadow: var(--card-shadow); transition: box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); } #page-dashboard .dash-panel-empty{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 32px 18px; text-align: center; color: rgba(26,20,16,0.28); } #page-dashboard .dash-tl-item{ padding: 11px 18px; border-bottom: 1px solid rgba(26,20,16,0.05); transition: background var(--motion-fast) var(--ease-ui); border-bottom-color: rgba(26,20,16,0.07); } #page-dashboard .dash-tl-prod{ font-size: 12px; font-weight: 500; color: #1a1410; } #page-dashboard .dash-tl-meta{ font-family: var(--mono); font-size: 9.5px; margin-top: 2px; letter-spacing: 0.03em; color: rgba(26,20,16,0.36); } #page-dashboard .dash-tl-hora{ font-family: var(--mono); font-size: 9px; margin-top: 3px; letter-spacing: 0.04em; color: rgba(26,20,16,0.28); } #page-dashboard .dash-venc-table{ border: 1px solid rgba(232,102,58, 0.18); border-radius: 11px; overflow: hidden; border-color: rgba(26,20,16,0.10); background: #ffffff; } #page-dashboard .dash-venc-head{ padding: 9px 11px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(232,102,58, 0.15); background: rgba(245,241,235,0.70); border-bottom-color: rgba(26,20,16,0.08); color: rgba(26,20,16,0.44); } #page-dashboard .dash-venc-row{ padding: 8px 11px; border-bottom: 1px solid rgba(232,102,58, 0.12); border-bottom-color: rgba(26,20,16,0.07); } #page-dashboard .dash-venc-col{ font-size: 12px; color: rgba(26,20,16,0.56); } #page-dashboard .dash-venc-prod{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1a1410; } #page-dashboard .dash-venc-more{ margin-top: 6px; font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,0.36); } #page-dashboard .nota-item{ border-bottom: 1px solid rgba(26,20,16,0.05); padding: 9px 14px; border-bottom-color: rgba(26,20,16,0.07); } #page-dashboard .dash-tl-item:hover, #page-dashboard .nota-item:hover { background: rgba(232,102,58,0.03); } #page-dashboard .nota-texto{ font-size: 12px; line-height: 1.45; font-weight: 500; color: #1a1410; } #page-dashboard .nota-meta{ font-family: var(--mono); font-size: 9px; margin-top: 2px; color: rgba(26,20,16,0.32); } #page-dashboard .nota-del{ opacity: 0.45; color: rgba(26,20,16,0.26); } .nota-del:hover, #page-dashboard .nota-del:hover { color: var(--red); opacity: 1; } .nd-date { font-family: var(--sans); font-size: 13px; color: rgba(26,20,16,0.48); margin: 0; } .nd-kpi-badge { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px; background: rgba(26,20,16,0.06); color: rgba(26,20,16,0.50); } .nd-kpi-badge.up { background: rgba(34,165,90,0.10); color: rgba(20,110,55,0.92); } .nd-kpi-badge.down { background: rgba(224,82,82,0.10); color: rgba(150,40,25,0.90); } .nd-body { display: grid; grid-template-columns: 1fr 370px; gap: 20px; align-items: start; } .nd-col-main, .nd-col-side { display:flex; flex-direction:column; gap:20px; } .nd-card { background: #fff; border: 1px solid rgba(26,20,16,0.05); border-radius: var(--radius-lg); padding: 22px 24px; box-sizing: border-box; box-shadow: var(--card-shadow); transition: box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .22s ease, transform .28s cubic-bezier(.16,1,.3,1); } .nd-card:hover { box-shadow: var(--card-shadow-hover); border-color: rgba(26,20,16,.07); transform: translateY(-1px); } .nd-card-kicker { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(26,20,16,0.42); margin-bottom: 4px; font-weight:600; } .nd-card-title { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #1a1410; margin: 0 0 18px; line-height: 1.1; } .nd-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .nd-card-link { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(26,20,16,0.42); background: none; border: none; cursor: pointer; padding: 0; transition: color .12s; white-space: nowrap; align-self:flex-end; } .nd-card-link:hover { color: rgba(107,26,26,0.85); } .nd-empty { font-style: italic; font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,0.32); letter-spacing: 0.06em; padding: 20px 0; text-align: center; } .nd-chart-wrap { position:relative; height:160px; } /* ═══════════════════════════════════════════════════════════════════ v7.96.0 · Dashboard "Ventas del mes" — pulsing dot + value pill DOM-overlay sobre el canvas. Performance friendly (CSS keyframes). ═══════════════════════════════════════════════════════════════════ */ .nd-trend-wrap { position: relative; height: 160px; overflow: visible; } .nd-trend-pulse { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 4; transform: translate(-50%, -50%); transition: left .42s cubic-bezier(.16, 1, .3, 1), top .42s cubic-bezier(.16, 1, .3, 1); } .nd-trend-pulse-core { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin-left: -4.5px; margin-top: -4.5px; border-radius: 50%; background: #FF6B35; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(255, 107, 53, .35), 0 2px 6px rgba(255, 107, 53, .35); animation: ndTrendCorePulse 1.8s ease-in-out infinite; } .nd-trend-pulse-halo { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin-left: -4.5px; margin-top: -4.5px; border-radius: 50%; background: rgba(255, 107, 53, .42); animation: ndTrendHaloPulse 1.8s ease-out infinite; } @keyframes ndTrendCorePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes ndTrendHaloPulse { 0% { opacity: .65; transform: scale(1); } 70% { opacity: 0; transform: scale(3.6); } 100% { opacity: 0; transform: scale(3.6); } } .nd-trend-vlabel { position: absolute; pointer-events: none; z-index: 5; transform: translate(8px, -50%); display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 8px 4px 9px; background: #FFFFFF; border-radius: 7px; box-shadow: 0 0 0 1px rgba(26, 20, 16, .055), 0 4px 12px rgba(26, 20, 16, .10); font-family: var(--sans, "Inter Tight", sans-serif); font-size: 11px; line-height: 1.1; white-space: nowrap; opacity: 0; animation: ndTrendVlabelIn .42s cubic-bezier(.16, 1, .3, 1) .35s forwards; transition: left .42s cubic-bezier(.16, 1, .3, 1), top .42s cubic-bezier(.16, 1, .3, 1); } @keyframes ndTrendVlabelIn { from { opacity: 0; transform: translate(0, -50%) scale(.94); } to { opacity: 1; transform: translate(8px, -50%) scale(1); } } .nd-trend-vlabel-day { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FF6B35; } .nd-trend-vlabel-amt { font-weight: 700; letter-spacing: -.01em; color: #262626; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .nd-trend-pulse-halo { opacity: .42; } .nd-trend-vlabel { animation: none !important; opacity: 1; } } .nd-ventas-list { display:flex; flex-direction:column; gap:0; } .nd-mix-wrap { display:flex; align-items:center; gap:28px; } .nd-mix-donut { flex-shrink:0; width:168px; height:168px; position:relative; } .nd-chart-wrap canvas, .nd-mix-donut canvas { height:100% !important; width:100% !important; } .nd-mix-legend { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; } .nd-ranking-list, .nd-stockbajo-list { display:flex; flex-direction:column; gap:14px; } #page-dashboard{ min-height: calc(100vh - var(--topbar)); padding-bottom: 36px; padding: 32px 32px 40px; box-sizing: border-box; background: #fdfcfb; } #page-dashboard > [aria-hidden="true"] { display: none !important; visibility: hidden !important; height: 0; overflow: hidden; position: absolute; pointer-events: none !important; } .mv2-page-head-title, .v3-title, .sk-title, .vc2-title, .pr-title, .co-title, .trf-title, .nd-card, .mv-table-card, #page-movimientos .mv2-kpi, .v3-card, .v3-card.v3-card-critico, .v3-card.v3-card-hero, .v3-card.v3-card-control, .co-card, .trf-card, .cc3-hero, .mvd-foot, #mov-inspector { background: #FFFFFF !important; border: 1px solid rgba(26,20,16,.05) !important; border-radius: var(--radius-lg); box-shadow: var(--card-shadow) !important; transition: box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .22s ease, transform .28s cubic-bezier(.16,1,.3,1) !important; } #page-stock th:first-child, #page-stock th:nth-child(3), #page-stock td:nth-child(3) { width: 90px; text-align: center; } #page-stock th:nth-child(4), #page-stock td:nth-child(4) { width: 122px; } #page-stock th:nth-child(5), #page-stock td:nth-child(5) { width: 132px; } #page-stock th:nth-child(7), #page-stock td:nth-child(7) { width: 150px; } #page-stock th:nth-child(9), #page-stock td:nth-child(9) { width: 108px; } #page-stock table thead { background: #f0e8db; } #page-stock th:first-child { z-index: 4; background: #f0e8db; } #page-stock td{ padding-top: 15px; padding-bottom: 15px; padding: 18px 14px; vertical-align: top; border-bottom: 1px solid rgba(26, 20, 16, 0.06); background: #ffffff; } #page-stock td:first-child { position: sticky; left: 0; z-index: 2; background: #ffffff; } #page-stock tbody tr:not(.stock-lotes-row):hover td, #page-stock tbody tr:hover td:first-child { background: rgba(245, 239, 230, 0.70); } #page-stock tbody tr:not(.stock-lotes-row){ border-bottom-color: var(--line-soft); border-bottom: none; transition: background var(--motion-fast) var(--ease-ui); } #page-stock .stock-prod-main { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; } #page-stock .stock-prod-name { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--t1); margin-bottom: 6px; } #page-stock .stock-prod-meta { gap: 6px; } #page-stock .stock-mini-pill{ border-color: var(--line-strong); font-family: var(--mono); font-size: 8.5px; padding: 3px 8px; border-radius: 3px; background: var(--surface-1); border: 1px solid var(--line-soft); color: var(--t3); letter-spacing: 0.06em; } #page-stock .stock-notes { margin-top: 8px; font-size: 10px; line-height: 1.50; color: var(--t3); border-left: 2px solid rgba(232,102,58, 0.30); padding: 4px 9px; background: rgba(232,102,58, 0.04); border-radius: 0 4px 4px 0; } #page-stock .tag { border-radius: 3px; padding: 3px 7px; font-size: 8.5px; letter-spacing: 0.10em; } #page-stock .tag-cr { background: var(--c-red-soft); color: var(--c-red-ink); border: 1px solid var(--c-red-line); } #page-stock .stock-next { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--t2); letter-spacing: -0.01em; } #page-stock .stock-next-empty { color: var(--t4); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; } #page-stock .stock-next-sub { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 5px; } #page-stock .stock-updated { font-family: var(--mono); font-size: 10.5px; color: var(--t3); letter-spacing: 0.02em; } #page-stock .stock-level .bar { width: 100%; height: 5px; border-radius: 2px; background: rgba(26, 20, 16, 0.08); overflow: hidden; } #page-stock .stock-level .bar-fill { height: 100%; border-radius: 2px; transition: width var(--motion-med) var(--ease-out); } #page-stock .stock-actions .btn-icon { width: 28px; height: 28px; border-radius: 5px; background: transparent; border-color: rgba(26, 20, 16, 0.10); color: var(--t3); } #page-stock .stock-actions .btn-icon:hover { background: var(--ember-bg); border-color: var(--ember-ln); color: var(--accent-warm); transform: scale(1.08); } #page-stock.stock-compact td { padding-top: 12px; padding-bottom: 12px; } #page-stock.stock-compact .stock-prod-name { font-size: 13px; } #page-stock.stock-compact th:nth-child(4), #page-stock.stock-compact td:nth-child(4) { width: 110px; } #page-stock.stock-compact th:nth-child(7), #page-stock.stock-compact td:nth-child(7) { width: 148px; } #page-stock.stock-compact th:nth-child(6), #page-stock.stock-compact td:nth-child(6), #page-stock.stock-compact th:nth-child(9), #page-stock.stock-compact td:nth-child(9) { width: 100px; } #page-stock .table-wrap{ flex: 1; min-height: 0; max-height: none; background: #ffffff; border: 1px solid rgba(26,20,16,0.10) !important; border-top: none !important; border-radius: 0 0 8px 8px; box-shadow: 0 4px 24px rgba(26,20,16,0.06); overflow: auto; position: relative; } #page-stock table thead, #page-stock table thead tr { position: sticky; top: 0; z-index: 18; } #page-stock th{ padding-top: 13px; padding-bottom: 13px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; padding: 14px 14px; border-bottom: 1px solid rgba(232,102,58, 0.18); white-space: nowrap; position: sticky; top: 0; z-index: 20; background: #f0e8db; color: rgba(26, 20, 16, 0.52); backdrop-filter: blur(3px); } #page-stock .table-wrap.stock-scrolled th { box-shadow: inset 0 -1px 0 rgba(196, 164, 126, 0.28), 0 8px 14px -12px rgba(28, 20, 14, 0.34); } #page-stock { padding: 46px 46px 60px; overflow: visible; flex-direction: column; gap: 0; min-height: 100%; box-sizing: border-box; } .sk-bc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(26,20,16,0.45); margin-bottom: 20px; } .sk-bc-link { cursor: pointer; transition: color 0.12s; } .sk-bc-sep { opacity: 0.4; } .sk-bc-cur { color: rgba(26,20,16,0.65); font-weight: 500; } .sk-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .sk-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: rgba(26,20,16,0.4); text-transform: uppercase; margin-bottom: 6px; } .sk-title { font-family: var(--serif, Georgia, serif); font-size: 40px; font-weight: 500; color: #1A1410; line-height: 1; margin: 0 0 8px; letter-spacing: -0.02em; } .sk-subtitle { font-size: 13px; color: rgba(26,20,16,0.5); margin: 0; } .sk-btn-primary { display: flex; align-items: center; gap: 7px; background: var(--accent-warm, #E8663A); border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; font-family: var(--sans, sans-serif); white-space: nowrap; } .sk-btn-primary:hover { background: var(--accent-warm-lt, #F0764A); box-shadow: 0 4px 14px rgba(232,102,58,0.3); } .sk-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .sk-filter-bar { background: #fff; border-radius: 14px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04); margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px; } .sk-search-wrap { flex: 1; position: relative; } .sk-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: rgba(26,20,16,0.35); pointer-events: none; } .sk-sucursal-wrap { display: flex; align-items: center; gap: 6px; color: rgba(26,20,16,0.5); flex-shrink: 0; } .sk-locf-sel { border: 1.5px solid rgba(26,20,16,0.1); border-radius: 8px; padding: 8px 10px; font-size: 12px; font-family: var(--sans, sans-serif); color: #1A1410; background: #fdfcfb; outline: none; cursor: pointer; transition: border-color 0.15s; } .sk-locf-sel:focus { border-color: rgba(26,20,16,0.3); } .sk-filter-divider { height: 1px; background: rgba(26,20,16,0.07); } .sk-filter-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sk-fpill { border: 1.5px solid rgba(26,20,16,0.12); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 500; color: rgba(26,20,16,0.6); background: none; cursor: pointer; transition: all 0.12s; font-family: var(--sans, sans-serif); white-space: nowrap; } .sk-fpill.active { background: var(--accent-warm, #E8663A); border-color: var(--accent-warm, #E8663A); color: #fff; font-weight: 600; } .sk-results-bar { margin-bottom: 10px; padding: 0 2px; } .sk-results-count { font-size: 12px; color: rgba(26,20,16,0.45); font-weight: 500; } .sk-table-wrap { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04); overflow: hidden; overflow-x: auto; } .sk-table th { padding: 10px 14px; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26,20,16,.40); text-align: left; white-space: nowrap; background: transparent; } .sk-table td { padding: 14px 16px; border-bottom: 1px solid rgba(26,20,16,0.05); vertical-align: middle; color: #1A1410; } .sk-table tbody tr:hover td { background: rgba(26,20,16,0.02); } .sk-table, #page-stock .sk-table-wrap table, #page-stock .sk-table-wrap .sk-table { border-collapse: collapse; font-size: 13px; width: 100%; } #page-stock .sk-table-wrap th { background: transparent !important; color: rgba(26,20,16,.40); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 14px; border: none !important; box-shadow: none; } #page-stock .sk-table-wrap td { padding: 14px 16px; border-bottom: 1px solid rgba(26,20,16,0.05) !important; border-top: none !important; background: transparent; vertical-align: middle !important; } #page-stock .sk-table-wrap .stock-prod-name { font-size: 13px; font-weight: 600; color: #1A1410; letter-spacing: -0.01em; } #page-stock .sk-table-wrap .stock-prod-meta { margin-top: 3px; } #page-stock .sk-table-wrap .stock-notes { font-size: 11px; color: rgba(26,20,16,0.45); margin-top: 2px; } #page-stock .sk-table-wrap .stock-mini-pill { font-size: 10px; background: rgba(26,20,16,0.05); color: rgba(26,20,16,0.55); border: none !important; border-radius: 4px; padding: 1px 6px; font-weight: 500; } #page-stock .sk-table-wrap .stock-warn-badge { font-size: 10px; background: rgba(232,102,58,0.08); color: var(--accent-warm, #E8663A); border-radius: 4px; padding: 1px 6px; border: none !important; } #page-stock .sk-table-wrap .tag { font-size: 10px; font-weight: 600; border-radius: 6px; padding: 3px 8px; border: 1.5px solid transparent !important; letter-spacing: 0.03em; white-space: nowrap !important; } #page-stock .sk-table-wrap .tag-dim { background: rgba(26,20,16,0.05); color: rgba(26,20,16,0.65); border-color: rgba(26,20,16,0.08); } #page-stock .sk-table-wrap .tag-ok { background: var(--c-green-soft); color: var(--c-green-ink); border-color: var(--c-green-line); } #page-stock .sk-table-wrap .tag-lo { background: var(--c-amber-soft); color: var(--c-amber-ink); border-color: var(--c-amber-line); } #page-stock .sk-table-wrap .tag-cr { background: var(--c-red-soft); color: var(--c-red-ink); border-color: var(--c-red-line); } #page-stock .sk-table-wrap .stock-qty { font-size: 14px; font-weight: 600; line-height: 1.2; } #page-stock .sk-table-wrap .stock-qty-sub, #page-stock .sk-table-wrap .stock-price-sub, #page-stock .sk-table-wrap .stock-next-sub, #page-stock .sk-table-wrap .stock-updated { font-size: 11px; color: rgba(26,20,16,0.4); margin-top: 2px; } #page-stock .sk-table-wrap .stock-next { font-size: 13px; font-weight: 600; } #page-stock .sk-table-wrap .stock-next-empty { color: rgba(26,20,16,0.3); } #page-stock .sk-table-wrap .bar { height: 4px; background: rgba(26,20,16,0.07); border-radius: 2px; overflow: hidden; } #page-stock .sk-table-wrap .bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease !important; } #page-stock .sk-table-wrap .btn-icon { width: 28px !important; height: 28px; border-radius: 7px; border: 1.5px solid rgba(26,20,16,0.1) !important; background: #fff; color: rgba(26,20,16,0.5); display: flex !important; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.12s, color 0.12s !important; } .sk-fpill:hover, #page-stock .sk-table-wrap .btn-icon:hover { border-color: rgba(26,20,16,0.3); color: #1A1410; } #page-stock .sk-table-wrap .stock-expand-btn { width: 18px !important; height: 18px; border-radius: 5px; border: 1px solid rgba(26,20,16,.12) !important; background: transparent !important; color: rgba(26,20,16,.40); display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-top: 1px; /* alinea con la primera línea del nombre */ } .mv2-page-head-title, .v3-title, .sk-title, .vc2-title, .pr-title, .co-title, .trf-title, [class*="-page-head-sub"], [class*="-subtitle"], .v3-subtitle, .sk-subtitle, .pr-subtitle, .co-subtitle { font-family: var(--sans-struct) !important; font-weight: 400 !important; letter-spacing: -0.003em !important; } #page-vencimientos .v3-c-num, #page-vencimientos .v3-hero-num, #page-stock [class*="kpi-value"], #mov-inspector .mvd-total-val, #mov-inspector .mvd-num, .mvd-total-val, .mvd-num { font-family: var(--display) !important; font-style: normal !important; font-weight: 700 !important; font-optical-sizing: auto !important; } .sk-kpi-card, .sk-filter-bar, .sk-table-wrap { background: #FFFFFF !important; border-radius: var(--radius-lg) !important; border: 1px solid rgba(26,20,16,.05) !important; box-shadow: var(--card-shadow) !important; transition: box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .22s ease, transform .28s cubic-bezier(.16,1,.3,1); } .sk-kpi-card:hover { box-shadow: var(--card-shadow-hover) !important; border-color: rgba(26,20,16,.07) !important; transform: translateY(-2px); } #page-stock .sk-table thead tr { background: #f2f1ef !important; } #page-clientes .cli-tbl thead tr, #page-stock .sk-table-wrap thead tr { background: #f2f1ef !important; border-bottom: 1.5px solid rgba(26,20,16,.08); } #page-stock .sk-table th { color: rgba(26,20,16,.62) !important; } .sk-kpi-card::after { content: ""; display: block; height: 1px; background: rgba(191, 180, 170, 0.25); margin: 12px 0 10px; } .sk-kpi-card{ background: #fff; border-radius: var(--radius-lg); position: relative; overflow: hidden; padding: 16px 20px !important; box-shadow: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04); display: flex; flex-direction: column; gap: 0 !important; } .sk-search-input{ width: 100%; box-sizing: border-box; padding: 9px 12px 9px 36px; border: 1.5px solid rgba(26,20,16,0.1); border-radius: 8px; font-size: 13px; font-family: var(--sans, sans-serif); color: #1A1410; background: #f2f1ef !important; outline: none; transition: border-color 0.15s; } .sk-search-input:focus{ border-color: rgba(26,20,16,0.3); background: #f8f6f3 !important; } /* ═══ 14. MOVIMIENTOS ═══ */ #page-movimientos .mov-inspector { border-color: rgba(26, 20, 16, 0.16); color: var(--char); background: rgba(26, 20, 16, 0.07); } #page-movimientos .mov-search-clr:hover { background: transparent; color: rgba(232,102,58, 0.70); border: none; } #page-movimientos .mov-hl { background: rgba(232,102,58, 0.14); border-radius: 2px; padding: 0 1px; color: inherit; opacity: 1 } .mov-ins-empty { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.24); padding: 36px 0; text-align: center; line-height: 1.8; } #page-movimientos > .ph { padding: 0 0 18px; margin-bottom: 18px; background: none; border: none; border-radius: 0; border-bottom: 1px solid var(--line-soft); } #page-movimientos .ph-title { font-family: var(--serif); font-size: 24px; font-weight: 300; font-style: italic; color: var(--t1); letter-spacing: -0.02em; line-height: 1.1; } #page-movimientos .ph-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); margin-top: 5px; } #page-movimientos .mov-search-clr{ color: rgba(26, 20, 16, 0.35); font-family: var(--mono); font-size: 11px; box-shadow: none; border: none !important; border-radius: 0; padding: 0 10px; background: transparent; align-self: stretch; display: flex !important; align-items: center; } #page-movimientos #mov-ver-mas-wrap { flex-shrink: 0; margin-top: 10px; margin-bottom: 14px; } #page-movimientos .mov-list{ border-color: var(--line-strong); background: var(--paper); border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 16px rgba(26, 20, 16, 0.05); transition: margin-right var(--motion-slow) var(--ease-spring) !important; height: 100%; max-height: none; overflow-y: auto; box-sizing: border-box; } #page-movimientos .mov-inspector{ min-height: 300px; position: absolute; top: 0; right: -420px; width: 400px; height: 100%; max-height: none; overflow: hidden; z-index: 4; border-radius: 0; border: none !important; border-left: 1px solid rgba(26,20,16,0.10) !important; box-shadow: -12px 0 48px rgba(26,20,16,0.10); background: #faf7f2; padding: 0; transition: right var(--motion-slow) var(--ease-spring) !important; display: flex !important; flex-direction: column; } #page-movimientos .mov-ins-empty { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t4); padding: 40px 22px; text-align: center; line-height: 1.7; } #page-movimientos.section-core .mov-list { background: var(--paper); border: var(--card-border); border-radius: var(--r2); box-shadow: none; padding: 0; overflow: hidden; } #page-movimientos.section-core .mov-inspector { background: var(--paper); border: var(--card-border); border-radius: var(--r2); box-shadow: none; } #page-movimientos.section-core .mov-search-clr { background: var(--paper-2); border: var(--card-border-thin); color: var(--ink-82); box-shadow: none; font-weight: 650; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; } #page-movimientos.section-core .mov-search-clr:hover { color: var(--char); border-color: rgba(232,102,58, 0.42); background: rgba(232,102,58, 0.08); } .mv-pill { font-family:var(--sans); font-size:12.5px; padding:6px 14px; border-radius:999px; border:1px solid rgba(26,20,16,0.18); background:transparent; color:rgba(26,20,16,0.68); cursor:pointer; transition:background .15s,border-color .15s,color .15s; font-weight:500; } .mv-pill:hover { background:rgba(232,102,58,0.07); border-color:rgba(232,102,58,0.32); color:rgba(160,70,14,0.90); } .mv-pill.on { background:rgba(232,102,58,0.88); border-color:rgba(232,102,58,0.88); color:#fff; font-weight:600; } .mv-body { display:flex; gap:0; position:relative; flex:1; min-height:0; } .mv-table-card { flex:1; background:#fff; border:1px solid rgba(26,20,16,0.05); border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--card-shadow); transition:filter 0.38s cubic-bezier(0.16,1,0.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); } /* v7.25.0 — Scrim Gradiente lateral + blur progresivo Gradiente lateral: transparente → scrim cálido cerca del drawer. Backdrop-blur progresivo via mask: nítido izq → borroso der. Cubre toda la pantalla; sidebar (z-index: 250) lo tapa naturalmente. */ /* v8.4.2 · Overlay igualado al del drawer de Cliente (.cli-drawer-shell): scrim oscuro uniforme + blur sobre todo, clickeable para cerrar. */ .mv-ins-overlay { position: fixed; inset: 0; background: rgba(35, 29, 26, 0.48); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 201; opacity: 0; pointer-events: none; transition: opacity .42s cubic-bezier(.16,1,.3,1); } .mv-ins-overlay.open { opacity: 1; pointer-events: auto; } .mv-table thead tr { border-bottom:1px solid rgba(26,20,16,0.08); } .mv-table th { font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(26,20,16,0.42); font-weight:600; padding:13px 16px; text-align:left; white-space:nowrap; background:#fff; position:sticky; top:0; z-index:2; } .mv-table th:last-child { width:28px; } .mv-table td { padding:14px 16px; border-bottom:1px solid rgba(26,20,16,0.06); vertical-align:middle; } .mv-table tbody tr:hover td { background:rgba(232,102,58,0.04); } .mv-table tbody tr.mv-row-selected td { background:rgba(232,102,58,0.06); } .mv2-tipo-ico { flex-shrink:0; display:block; } .mv-inspector { position: fixed; /* v7.25.0: flotante — gap simétrico arriba y abajo */ top: 12px; right: -460px; bottom: 12px; width: 440px; background: #FFFFFF; border: none; border-radius: 16px; box-shadow: /* Definición: solo inset blanco — sin outline exterior que genere sombra superior */ inset 0 0 0 1px #FFFFFF, /* Profundidad direccional hacia la izquierda — escala de opacidad del STYLE-GUIDE */ -2px 2px 8px rgba(26,20,16,.06), -8px 4px 24px rgba(26,20,16,.08), -20px 8px 48px rgba(26,20,16,.06); display: flex; flex-direction: column; overflow: hidden; contain: layout; transition: right 0.42s cubic-bezier(0.16,1,0.3,1); z-index: 210; } body:not(:has(#page-movimientos.active)) .mv-ins-overlay { opacity: 0; pointer-events: none !important; } .mv-load-more-btn { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:10px 20px; border-radius:8px; border:1px solid rgba(26,20,16,0.16); background:#fff; color:rgba(26,20,16,0.58); cursor:pointer; transition:background .14s; font-weight:600; } .mv-load-more-btn:hover { background:rgba(26,20,16,0.05); } #page-movimientos{ display: flex !important; flex-direction: column; box-sizing: border-box; background: #fdfcfb; min-height: calc(100vh - 56px); height: auto; overflow: visible; padding-bottom: 28px; position: relative; } #page-movimientos .mv-body { min-height: 400px; } #page-movimientos .mv-table-card { transition: filter 0.38s cubic-bezier(0.16,1,0.3,1); } #page-movimientos .mv2-page-head { margin-bottom: 22px; } #page-movimientos .mv2-page-head-eyebrow { font-family: var(--mono, "Inter", "IBM Plex Mono", monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42); margin-bottom: 12px; } #page-movimientos .mv2-page-head-title { font-family: var(--serif); font-size: 32px; font-weight: 700; letter-spacing: -0.025em; color: #1A1410; line-height: 1.1; margin: 0 0 10px 0; } #page-movimientos .mv2-page-head-sub { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 14px; font-weight: 400; letter-spacing: -0.005em; color: rgba(26, 20, 16, 0.55); margin: 0; } #page-movimientos .mv2-kpi-strip { display: grid !important; gap: 14px; margin-bottom: 22px !important; grid-template-columns: repeat(4, 1fr); background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; } #page-movimientos .mv2-kpi { background: #FFFFFF !important; border: 1px solid rgba(26,20,16,.08) !important; border-radius: 9px; display: flex !important; position: relative; cursor: default; transition: border-color .18s, transform .18s !important; overflow: hidden; box-shadow: none !important; padding: 16px 22px; flex-direction: column; gap: 6px; border-right: 1px solid rgba(26, 20, 16, 0.06); } #page-movimientos .mv2-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .mv2-search-icon { position: absolute; left: 14px; width: 14px; height: 14px; color: rgba(26, 20, 16, 0.42); pointer-events: none; } .mv2-search-clr { position: absolute; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: rgba(26, 20, 16, 0.55); cursor: pointer; transition: background 0.14s ease, color 0.14s ease; } .cf-head-close:hover, .cf-rp-close:hover, .mv2-search-clr:hover { background: rgba(26, 20, 16, 0.06); color: #1A1410; } .mv2-dropdown.open .mv2-dd-btn { border-color: rgba(26, 20, 16, 0.32); box-shadow: 0 0 0 3px rgba(26, 20, 16, 0.04); } .mv2-dd-chev { width: 13px; height: 13px; color: rgba(26, 20, 16, 0.42); transition: transform 0.18s ease; } .mv2-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 12px; box-shadow: 0 12px 32px rgba(26, 20, 16, 0.14), 0 4px 10px rgba(26, 20, 16, 0.06); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.16s; } .mv2-dropdown.open .mv2-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); } .mv2-dd-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; color: rgba(26, 20, 16, 0.75); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .mv2-dd-item:hover { background: rgba(26, 20, 16, 0.04); color: #1A1410; } .mv2-dd-item.on { background: rgba(232,102,58, 0.08); color: #1A1410; font-weight: 600; } .mv2-dd-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-dot-color, #1A1410); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-dot-color, #1A1410) 14%, transparent); flex-shrink: 0; } .mv2-dd-item-dot-none { background: transparent; border: 1px dashed rgba(26, 20, 16, 0.30); box-shadow: none; } .mv2-export-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; background: transparent; border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 11px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: rgba(26, 20, 16, 0.65); cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease; } .mv2-export-btn:hover { background: rgba(26, 20, 16, 0.04); border-color: rgba(26, 20, 16, 0.20); color: #1A1410; } #page-movimientos .mv2-active-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } #page-movimientos .mv2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; background: rgba(232,102,58, 0.08); border: 1px solid rgba(232,102,58, 0.20); border-radius: 999px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; color: #8C4517; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease; } #page-movimientos .mv2-chip:hover { background: rgba(232,102,58, 0.14); border-color: rgba(232,102,58, 0.35); } #page-movimientos .mv2-chip svg { width: 10px; height: 10px; margin-left: 2px; margin-right: 2px; } #page-movimientos .mv2-chip-clear { display: inline-flex; align-items: center; padding: 5px 11px; background: transparent; border: none; border-radius: 999px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; color: rgba(26, 20, 16, 0.55); cursor: pointer; transition: color 0.14s ease; } #page-movimientos .mv2-chip-clear:hover { color: #1A1410; text-decoration: underline; } #page-movimientos .mv-pill[data-group] { position: absolute; left: -9999px; } [class*="kpi-value"], [class*="-total-val"], [class*="-hero-num"], [class*="-num"][class*="critico"], [class*="-num"][class*="proximo"], [class*="-num"][class*="sc-num"], [class*="nd-val"], [class*="cc3-hero-total"], [class*="cc3-histo-monto"], .mvd-total-val, .v3-c-num, .v3-hero-num { font-family: var(--display) !important; font-style: normal !important; font-weight: 700 !important; font-optical-sizing: auto !important; letter-spacing: -0.025em !important; font-feature-settings: "tnum" 1, "kern" 1 !important; font-variant-numeric: tabular-nums !important; } [class*="-qty"], [class*="-price"], [class*="-monto"], [class*="-total"]:not([class*="-total-val"]):not([class*="-total-num"]), .vc2-qty, .mvd-item-price, .mv-td-total { font-family: var(--mono) !important; letter-spacing: -0.01em !important; font-feature-settings: "tnum" 1, "kern" 1 !important; font-variant-numeric: tabular-nums !important; } .mv2-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 240px; background: #E7E5E6 !important; border: none !important; border-radius: 9px !important; } .mv2-search-input{ width: 100%; padding: 11px 38px 11px 38px; background: #E7E5E6 !important; border: none !important; border-radius: 9px !important; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; color: #1A1410; transition: background 0.15s ease; } .mv2-search-input:focus{ outline: none; border: none !important; box-shadow: none !important; background: #dfdcdd !important; } .mv2-dd-btn{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f2f1ef !important; border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 11px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: #1A1410; cursor: pointer; transition: border-color 0.16s ease, background 0.14s ease, box-shadow 0.18s ease; border-color: rgba(191,180,170,.45) !important; } .mv2-dd-btn:hover{ border-color: rgba(191,180,170,.65) !important; background: #ece9e5 !important; } /* ═══ 15. TRANSFERENCIAS ═══ */ .trf-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 24px; } .trf-kicker { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42); margin-bottom: 10px; } .trf-title { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: #1A1410; margin: 0 0 8px; } .trf-subtitle { font-size: 14px; font-weight: 400; color: rgba(26, 20, 16, 0.55); margin: 0; line-height: 1.5; } .trf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; } .trf-card { background: #FFFFFF; border: 1px solid rgba(26, 20, 16, 0.07); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.02); } .trf-card-head { padding: 22px 26px 16px; border-bottom: 1px solid rgba(26, 20, 16, 0.06); } .trf-card-eyebrow { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.40); margin-bottom: 6px; } .trf-card-title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #1A1410; margin: 0; } .trf-card-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 22px; } .trf-card-foot { padding: 16px 26px 20px; border-top: 1px solid rgba(26, 20, 16, 0.06); background: rgba(250, 246, 241, 0.5); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .trf-label { display: block; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.45); margin-bottom: 8px; } .trf-label-opt { font-family: var(--sans); font-weight: 400; font-size: 10px; text-transform: none; letter-spacing: 0; color: rgba(26, 20, 16, 0.32); margin-left: 6px; } .trf-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 14px; } .trf-route-arrow { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #E8663A; padding: 0 4px 14px; line-height: 1; } .trf-pill-input { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 10px; transition: border-color 0.16s ease, background 0.16s ease; } .trf-pill-input select { flex: 1; border: none; background: transparent; outline: none; font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1A1410; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 18px; } .sk-kpi-top, #page-movimientos .mv2-kpi-top, .trf-section-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; } .trf-section-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.45); } .trf-section-count { font-family: var(--mono); font-size: 10px; font-weight: 700; color: rgba(26, 20, 16, 0.55); background: rgba(26, 20, 16, 0.05); padding: 2px 8px; border-radius: 999px; } .trf-search, .trf-filter-search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 10px; transition: border-color 0.16s, background 0.16s; } #trf-obs:focus, .trf-pill-input:focus-within, .trf-search:focus-within, .trf-filter-search:focus-within { background: #FFFFFF; border-color: rgba(232,102,58, 0.45); } .trf-pill-input svg, .trf-search svg, .trf-filter-search svg { color: rgba(26, 20, 16, 0.40); flex-shrink: 0; height: 14px; width: 14px; } .trf-search input, .trf-filter-search input { flex: 1; border: none; background: transparent; outline: none; font-family: var(--sans); font-size: 13px; color: #1A1410; } .trf-prod-list { max-height: 280px; overflow-y: auto; border: 1px solid rgba(26, 20, 16, 0.06); border-radius: 10px; background: rgba(250, 246, 241, 0.5); display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(26, 20, 16, 0.18) transparent; } .trf-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: transparent; border: none; border-bottom: 1px solid rgba(26, 20, 16, 0.05); text-align: left; cursor: pointer; transition: background 0.14s ease; font-family: var(--sans); } .trf-prod-row.added { background: rgba(34,165,90, 0.04); cursor: default; } .trf-prod-row:disabled { opacity: 0.6; } .trf-prod-name { font-size: 13px; font-weight: 500; color: #1A1410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trf-prod-stock { font-family: var(--mono); font-size: 10px; font-weight: 600; color: rgba(26, 20, 16, 0.50); letter-spacing: 0.04em; } .trf-prod-cta { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #E8663A; white-space: nowrap; flex-shrink: 0; } .trf-prod-dest-hint { color: rgba(26,20,16,.32); font-weight: 500; margin-left: 4px; } .trf-cart { display: flex; flex-direction: column; gap: 8px; min-height: 60px; } /* ── Cart row ── */ .trf-cart-row { background: #FFFFFF; border: 1px solid rgba(26,20,16,.08); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .16s; } .trf-cart-main { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .trf-cart-name { font-size: 13px; font-weight: 600; color: #1A1410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trf-cart-meta { font-family: var(--mono); font-size: 10px; font-weight: 600; color: rgba(26,20,16,.50); letter-spacing: .02em; } /* Stock destino badge */ .trf-cart-dest { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: rgba(26,20,16,.40); letter-spacing: .02em; margin-top: 1px; } .trf-cart-dest .trf-dest-arrow { color: rgba(26,20,16,.22); font-size: 9px; } .trf-cart-dest .trf-dest-val { color: #1F7A42; background: rgba(34,165,90,.08); padding: 1px 5px; border-radius: 4px; } .trf-cart-dest .trf-dest-val.is-zero { color: #E8663A; background: rgba(232,102,58,.08); } /* Qty input */ .trf-cart-qty { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .trf-cart-qty input { width: 60px; padding: 6px 8px; border: 1px solid rgba(26,20,16,.12); border-radius: 6px; font-family: var(--mono); font-size: 13px; font-weight: 600; text-align: center; color: #1A1410; background: rgba(26,20,16,.02); transition: border-color .14s; } .trf-cart-qty input:focus { outline: none; border-color: #E8663A; box-shadow: 0 0 0 3px rgba(232,102,58,.08); } .trf-cart-unit { font-family: var(--mono); font-size: 10px; font-weight: 600; color: rgba(26,20,16,.45); } /* Remove btn */ .trf-cart-remove { background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 12px; color: rgba(26,20,16,.30); transition: color .12s, background .12s; flex-shrink: 0; line-height: 1; } .trf-cart-remove:hover { color: var(--red); background: rgba(192,57,43,.06); } /* Lote selector */ .trf-cart-lote { display: flex; align-items: center; gap: 6px; padding: 6px 12px 8px; border-top: 1px solid rgba(26,20,16,.05); background: rgba(26,20,16,.015); } .trf-cart-lote svg { width: 13px; height: 13px; color: rgba(26,20,16,.32); flex-shrink: 0; } .trf-cart-lote select { flex: 1; font-family: var(--sans); font-size: 11px; color: #1A1410; border: none; background: transparent; cursor: pointer; padding: 2px 0; } /* ── FIFO preview (desglose de lotes) ── */ .trf-fifo-preview { display: flex; flex-direction: column; gap: 2px; padding: 5px 12px 8px; border-top: 1px solid rgba(26,20,16,.05); background: rgba(26,20,16,.015); } .trf-fifo-label { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(26,20,16,.35); margin-bottom: 1px; } .trf-fifo-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(26,20,16,.65); line-height: 1.4; } .trf-fifo-icon { font-size: 9px; color: rgba(26,20,16,.28); width: 10px; text-align: center; flex-shrink: 0; } .trf-fifo-qty { font-family: var(--mono); font-size: 10px; font-weight: 600; color: #E8663A; background: rgba(232,102,58,.06); padding: 1px 5px; border-radius: 4px; } .trf-fifo-venc { font-family: var(--mono); font-size: 9.5px; color: rgba(26,20,16,.40); } .trf-fifo-rest { font-size: 10px; color: rgba(26,20,16,.38); font-style: italic; } .trf-cart-empty { padding: 20px 16px; text-align: center; font-size: 12px; color: rgba(26, 20, 16, 0.42); background: rgba(26, 20, 16, 0.025); border: 1px dashed rgba(26, 20, 16, 0.10); border-radius: 10px; line-height: 1.5; } .trf-btn-confirm { display: inline-flex; align-items: center; gap: 8px; } .trf-btn-clear { font-size: 12px; } .trf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(26, 20, 16, 0.06); border-bottom: 1px solid rgba(26, 20, 16, 0.06); } .trf-kpis.trf-kpis-4 { grid-template-columns: repeat(4, 1fr); } .trf-kpi { background: #FFFFFF; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } .trf-kpi-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42); } .trf-kpi-value { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1; color: #1A1410; letter-spacing: -0.02em; } .trf-kpi-value-sm { font-size: 14px; font-family: var(--mono); font-weight: 600; } .trf-filters { padding: 16px 22px; border-bottom: 1px solid rgba(26, 20, 16, 0.06); display: flex; flex-direction: column; gap: 12px; } .trf-filter-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42); flex-shrink: 0; min-width: 56px; } .trf-filter-pills { display: inline-flex; gap: 4px; background: rgba(26, 20, 16, 0.04); padding: 3px; border-radius: 8px; } .trf-pill { background: transparent; border: none; padding: 5px 10px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: rgba(26, 20, 16, 0.55); border-radius: 6px; cursor: pointer; transition: background 0.14s, color 0.14s; } .trf-pill.on { background: #FFFFFF; color: #1A1410; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.06); } .trf-history { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 6px; max-height: 540px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(26, 20, 16, 0.18) transparent; } .trf-empty { padding: 30px 16px; text-align: center; font-size: 12px; color: rgba(26, 20, 16, 0.42); } /* ── Historial: filas ── */ .trf-history-row { background: #FFFFFF; border: 1px solid rgba(26,20,16,.07); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; transition: border-color .14s, box-shadow .14s; } .trf-history-row:hover { border-color: rgba(26,20,16,.12); box-shadow: 0 1px 4px rgba(26,20,16,.04); } .trf-history-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; } .trf-history-prod { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #1A1410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trf-history-qty { flex-shrink: 0; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #E8663A; background: rgba(232,102,58,.06); padding: 2px 8px; border-radius: 5px; letter-spacing: .02em; } .trf-history-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px 10px; } .trf-history-route { display: inline-flex; align-items: center; gap: 5px; } .trf-history-loc { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: rgba(26,20,16,.50); } .trf-history-arrow { font-size: 10px; color: rgba(26,20,16,.22); } .trf-history-meta { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: rgba(26,20,16,.35); letter-spacing: .02em; white-space: nowrap; } /* Delete btn inside row */ .trf-history-del { background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 5px; color: rgba(26,20,16,.22); transition: color .12s, background .12s; flex-shrink: 0; line-height: 1; display: none; } .sb-nuevo-badge.visible, #page-transferencia.trf-delete-mode .trf-history-del { display: inline-flex; } .trf-history-del:hover { color: #C0392B; background: rgba(192,57,43,.06); } #page-transferencia.trf-delete-mode .trf-col-history .trf-card { border-color: rgba(192, 57, 43, 0.32); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08); } #page-transferencia.trf-delete-mode .trf-col-history .trf-card-head::before { content: "MODO ELIMINACIÓN ACTIVO"; display: inline-block; font-family: var(--mono); font-size: 8.5px; font-weight: 800; letter-spacing: 0.20em; color: #C0392B; background: rgba(192, 57, 43, 0.10); border: 1px solid rgba(192, 57, 43, 0.22); border-radius: 999px; padding: 3px 9px; margin-bottom: 8px; animation: trfDelBlink 1.6s ease-in-out infinite; } #page-transferencia.trf-delete-mode .trf-history-row { transition: background 0.14s ease; } #page-transferencia.trf-delete-mode .trf-history-row:hover { background: rgba(192, 57, 43, 0.04); } /* ── Lotes en historial ── */ .trf-history-lotes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 4px; } .trf-history-lote-pill { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .02em; color: rgba(26,20,16,.55); background: rgba(26,20,16,.04); padding: 2px 7px; border-radius: 4px; line-height: 1.4; } /* ── Recepción badge/botón ── */ .trf-recep-badge { display: flex; align-items: center; gap: 5px; padding: 5px 12px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .03em; border-radius: 0; line-height: 1.3; } .trf-recep-badge svg { width: 11px; height: 11px; flex-shrink: 0; } .trf-recep-badge.confirmed { color: #1F7A42; background: rgba(34,165,90,.04); border-top: 1px solid rgba(34,165,90,.08); cursor: default; } .trf-recep-badge.pending { color: #E8663A; background: rgba(232,102,58,.03); border: none; border-top: 1px dashed rgba(232,102,58,.18); cursor: pointer; width: 100%; transition: background .12s, color .12s; } .trf-recep-badge.pending:hover { background: rgba(232,102,58,.08); color: #a14520; } /* ── Botón devolver ── */ .trf-history-dev { background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 5px; color: rgba(26,20,16,.28); transition: color .12s, background .12s; flex-shrink: 0; line-height: 1; } /* ── Resumen/comprobante overlay ── */ .trf-resumen-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(26,20,16,.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .trf-resumen-card { background: #FFFFFF; border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(26,20,16,.18), 0 2px 8px rgba(26,20,16,.06); width: 380px; max-width: 92vw; max-height: 85vh; overflow-y: auto; transform: translateY(12px); transition: transform .22s cubic-bezier(.16,1,.3,1); } .trf-resumen-head { padding: 28px 24px 16px; text-align: center; border-bottom: 1px solid rgba(26,20,16,.06); } .trf-resumen-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(34,165,90,.10); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .trf-resumen-icon svg { width: 20px; height: 20px; color: #1F7A42; } .trf-resumen-title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: #1A1410; letter-spacing: -.02em; } .trf-resumen-sub { font-family: var(--mono); font-size: 10px; font-weight: 600; color: rgba(26,20,16,.40); letter-spacing: .08em; margin-top: 4px; } .trf-resumen-route { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid rgba(26,20,16,.06); } .trf-resumen-loc { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(26,20,16,.55); background: rgba(26,20,16,.04); padding: 4px 10px; border-radius: 6px; } .trf-resumen-loc.dest { color: #1F7A42; background: rgba(34,165,90,.08); } .trf-resumen-arrow { font-size: 14px; color: rgba(26,20,16,.22); } .trf-resumen-items { padding: 12px 24px; display: flex; flex-direction: column; gap: 6px; } .trf-res-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(26,20,16,.04); } .trf-res-item-name { font-size: 13px; font-weight: 500; color: #1A1410; } .trf-res-item-qty { font-family: var(--mono); font-size: 12px; font-weight: 700; color: #E8663A; flex-shrink: 0; } .trf-resumen-total { display: flex; justify-content: space-between; padding: 10px 24px; border-top: 1px solid rgba(26,20,16,.08); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(26,20,16,.45); } .trf-resumen-obs { padding: 8px 24px; font-size: 11px; color: rgba(26,20,16,.50); background: rgba(26,20,16,.02); border-top: 1px solid rgba(26,20,16,.04); } .trf-resumen-emp { padding: 8px 24px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: rgba(26,20,16,.35); letter-spacing: .04em; } .trf-resumen-actions { padding: 12px 24px 20px; display: flex; justify-content: center; gap: 10px; } .trf-resumen-btn-close { padding: 8px 28px; border: 1px solid rgba(26,20,16,.12); border-radius: var(--radius-sm); background: #FFFFFF; font-family: var(--sans); font-size: 13px; font-weight: 600; color: #1A1410; cursor: pointer; transition: background .12s, border-color .12s; } .trf-resumen-btn-close:hover { background: rgba(26,20,16,.03); border-color: rgba(26,20,16,.20); } /* ═══ 16. CARGA MASIVA ═══ */ #page-carga { padding-bottom: 40px; } #page-carga .ph { padding: 0 0 20px 0; margin-bottom: 22px; background: none; border: none; border-radius: 0; border-bottom: 1px solid var(--line-soft); } #page-carga .ph-title { font-family: var(--serif); font-size: 26px; font-weight: 300; font-style: italic; color: var(--t1); letter-spacing: -0.02em; line-height: 1.1; } #page-carga .ph-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); margin-top: 5px; } #page-carga > div:has(#carga-local) { background: #ffffff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(26,20,16,0.04); } #page-carga > div:has(#carga-local) > div > div:first-child { font-family: var(--mono) !important; font-size: 8.5px !important; letter-spacing: 0.16em; text-transform: uppercase !important; color: var(--t3) !important; margin-bottom: 5px !important; } #page-carga label { font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: 0.12em; text-transform: uppercase !important; color: var(--t2) !important; } #page-carga select, #page-carga input[type="text"], #page-carga input[type="date"], #page-carga input[type="number"] { background: #fdfcfb !important; border: 1px solid rgba(26,20,16,0.16) !important; border-radius: 8px; color: #1a1410 !important; font-family: var(--sans) !important; font-size: 13px !important; height: 36px; min-height: unset; padding: 0 10px; box-shadow: none !important; outline: none !important; transition: border-color 0.15s, box-shadow 0.15s; } #page-carga input[type="checkbox"] { min-height: unset; width: 15px; height: 15px; padding: 0; box-shadow: none !important; border: none !important; accent-color: var(--ember); } #page-carga > div:has(#carga-base-global) { background: #1a1410 !important; border: 1px solid rgba(232,102,58,0.20) !important; border-top: 2px solid rgba(232,102,58,0.72); border-radius: 10px; padding: 16px 20px; margin-bottom: 18px; position: relative; overflow: hidden; } #page-carga > div:has(#carga-base-global)::before { content: ''; position: absolute; top: -24px; right: -24px; width: 110px; height: 110px; background: radial-gradient(circle, rgba(232,102,58,0.16) 0%, transparent 68%); pointer-events: none; } #page-carga > div:has(#carga-base-global) > div:first-child { font-family: var(--mono) !important; font-size: 8.5px !important; font-weight: 600 !important; letter-spacing: 0.22em; text-transform: uppercase !important; color: rgba(232,102,58,0.90) !important; margin-bottom: 5px !important; } #page-carga > div:has(#carga-base-global) > div:nth-child(2) { font-family: var(--sans) !important; font-size: 11px !important; color: rgba(240,230,214,0.48) !important; margin-bottom: 14px !important; letter-spacing: 0.01em; } #page-carga > div:has(#carga-base-global) select, #page-carga > div:has(#carga-base-global) input[type="date"] { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(232,102,58,0.22) !important; border-radius: 8px; color: rgba(240,230,214,0.88) !important; min-height: 36px; font-size: 12px !important; box-shadow: none !important; } #page-carga > div:has(#carga-base-global) select:focus, #page-carga > div:has(#carga-base-global) input[type="date"]:focus { border-color: rgba(232,102,58,0.72) !important; box-shadow: 0 0 0 3px rgba(232,102,58,0.12) !important; } #page-carga > div:has(#carga-base-global) > div:last-child > div > div:first-child { font-family: var(--mono) !important; font-size: 8.5px !important; letter-spacing: 0.12em; text-transform: uppercase !important; color: rgba(240,230,214,0.38) !important; margin-bottom: 4px !important; } #page-carga #carga-tabla-wrap { border: 1px solid var(--line-soft) !important; border-radius: 10px; background: #ffffff !important; overflow: auto; box-shadow: 0 2px 12px rgba(26,20,16,0.05) !important; } #page-carga #carga-tabla-content { background: #ffffff; } #page-carga #carga-tabla-content table { background: #ffffff !important; width: 100%; border-collapse: collapse; font-size: 13px !important; } #page-carga #carga-tabla-content thead tr { border-bottom: 1.5px solid rgba(232,102,58,0.30) !important; } #page-carga #carga-tabla-content th { background: #1a1410 !important; font-family: var(--mono) !important; font-size: 8.5px !important; letter-spacing: 0.16em; text-transform: uppercase !important; color: rgba(240,230,214,0.56) !important; font-weight: 500 !important; padding: 11px 14px; white-space: nowrap !important; border-bottom: none !important; } #page-carga #carga-tabla-content td { padding: 12px 14px; background: #ffffff !important; vertical-align: middle !important; transition: background var(--motion-fast) var(--ease-ui); color: var(--t1) !important; } #page-carga #carga-tabla-content tbody tr:hover td { background: rgba(232,102,58,0.04) !important; } #page-carga #carga-tabla-content td > div[style*="font-weight:500"], #page-carga #carga-tabla-content td > div[style*="font-weight: 500"] { font-family: var(--serif) !important; font-size: 14px !important; font-weight: 700 !important; font-style: italic !important; color: var(--t1) !important; letter-spacing: -0.01em; line-height: 1.2; } #page-carga #carga-tabla-content td > div[style*="font-size:10px"], #page-carga #carga-tabla-content td > div[style*="font-size: 10px"] { font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: 0.10em; text-transform: uppercase !important; color: var(--t3) !important; margin-top: 2px !important; } #page-carga #carga-tabla-content td:nth-child(2) { font-family: var(--mono) !important; font-size: 13px !important; color: var(--t2) !important; white-space: nowrap !important; } #page-carga #carga-tabla-content input[type="number"], #page-carga #carga-tabla-content input[type="date"], #page-carga #carga-tabla-content input:not([type="checkbox"]), #page-carga #carga-tabla-content select { background: #fdfcfb !important; border: 1px solid rgba(26,20,16,0.16) !important; border-radius: 8px; color: #1a1410 !important; font-family: var(--mono) !important; font-size: 12px !important; height: 32px; min-height: unset; padding: 0 8px; box-shadow: none !important; outline: none !important; transition: border-color 0.15s, box-shadow 0.15s; } #page-carga select:focus, #page-carga input[type="text"]:focus, #page-carga input[type="date"]:focus, #page-carga input[type="number"]:focus, #page-carga #carga-tabla-content input[type="number"]:focus, #page-carga #carga-tabla-content input[type="date"]:focus, #page-carga #carga-tabla-content input:not([type="checkbox"]):focus, #page-carga #carga-tabla-content select:focus { border-color: rgba(232,102,58,0.60) !important; box-shadow: 0 0 0 3px rgba(232,102,58,0.10) !important; } #page-carga #carga-tabla-content [id^="carga-preview-"] { font-family: var(--mono) !important; font-size: 10px !important; color: #3a7d44 !important; letter-spacing: 0.06em; margin-top: 4px !important; } #page-carga #carga-tabla-content span { font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: 0.10em; text-transform: uppercase !important; color: var(--t3) !important; } #page-carga #carga-resumen { margin-top: 14px; padding: 13px 18px; background: #ffffff; border: 1px solid var(--line-soft); border-radius: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--t2); box-shadow: 0 2px 8px rgba(26,20,16,0.04); display: flex; align-items: center; gap: 8px; } #page-carga .empty { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t4); padding: 52px 24px; text-align: center; } /* Lote input */ #page-stock.stock-compact th:nth-child(5), #page-stock.stock-compact td:nth-child(5) { width: 120px; } /* ═══ 17. VENCIMIENTOS ═══ */ .venc-chip.active { background: var(--char); border-color: var(--char); color: #efe7d8; box-shadow: 0 4px 12px rgba(26, 20, 16, 0.12); } #page-vencimientos .va-card { border-radius: 4px; } #page-vencimientos .venc-row { display: grid; grid-template-columns: 52px 1fr 150px 110px 56px; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(26,20,16,.06); transition: background .1s ease; } #page-vencimientos .venc-row:hover { background: rgba(232,102,58,.04); } .vc2-chip.active { background: var(--accent-warm, #E8663A); border-color: var(--accent-warm, #E8663A); color: #fff; font-weight: 600; box-shadow: none; } .vc2-table-meta { font-size:12px; color:var(--ink-70); margin-bottom:10px; } .mv-table, .vc2-table { border-collapse:collapse; width:100%; } .vc2-table thead tr { border-bottom:1.5px solid var(--border-warm); } .vc2-table thead th { padding:11px 14px; font-size:9px; font-weight:700; letter-spacing:0.1em; color:var(--ink-70); text-transform:uppercase; font-family:var(--mono); text-align:left; background:#f2f1ef; white-space:nowrap; position:sticky; top:0; z-index:2; } .vc2-table tbody tr { border-bottom:1px solid var(--border-warm); transition:background 0.1s; } .mvd-row:hover, .cc2-row-clickable:hover, #page-clientes .cli-tbl tbody tr.cli-row:hover, #page-movimientos .mv-table tbody tr.mv-row:hover, .vc2-table tbody tr:hover { background: rgba(26,20,16,.025); } .vc2-table tbody td { padding:12px 14px; font-size:12px; vertical-align:middle; } .vc2-empty-cell { text-align:center; padding:32px 14px !important; color:var(--ink-70); font-size:13px; } .vc2-venc-date.ok { color:var(--ink-82); } .vc2-table tbody td:last-child { white-space:nowrap; display:flex; align-items:center; gap:2px; } .vc2-table tbody tr:hover .vc2-row-edit, .vc2-table tbody tr:hover .vc2-row-del { opacity:1; } #page-vencimientos { --v3-card: #FFFFFF; --v3-ink: #1A1410; --v3-ink-2: rgba(26,20,16,.62); --v3-ink-3: rgba(26,20,16,.42); --v3-hair: rgba(26,20,16,.10); --v3-orange: #E8663A; --v3-red: #C0392B; --v3-amber: #E67E22; --v3-green: #22A55A; --v3-paper-2: #F5EFE6; } #page-vencimientos .v3-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 0 24px; margin-bottom: 28px; border-bottom: 1px solid var(--v3-hair); } .v3-btn-add:hover { background: #2a221c; transform: translateY(-1px); } .v3-btn-add svg { stroke: currentColor; } #page-vencimientos .v3-triptico { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 16px; margin-bottom: 28px; } #page-vencimientos .v3-card { position: relative; background: var(--v3-card); border: 1px solid var(--v3-hair); border-radius: 14px; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; box-shadow: 0 1px 0 rgba(26,20,16,.02); transition: box-shadow .2s ease, border-color .2s ease; animation: v3-fade-in .5s ease both; } #page-vencimientos .v3-card:hover { box-shadow: 0 6px 24px -12px rgba(26,20,16,.12); } #page-vencimientos .v3-card-critico::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--v3-red); border-radius: 2px 0 0 2px; opacity: .9; transition: opacity .2s ease; } #page-vencimientos .v3-card-critico[data-state="empty"]::before { background: var(--v3-green); opacity: .55; } #page-vencimientos .v3-card-control{ animation-delay: .08s; background: var(--v3-paper-2); border-color: rgba(26,20,16,.08); } #page-vencimientos .v3-card-critico[data-state="empty"] .v3-dot-critico { background: var(--v3-green); box-shadow: none; animation: none; } #page-vencimientos .v3-card-critico[data-state="empty"] .v3-c-num-critico { color: var(--v3-green); } #page-vencimientos .v3-card-control .v3-c-empty { background: var(--v3-paper-2); } #page-vencimientos .v3-card[data-state="empty"] .v3-c-cta, #page-vencimientos .v3-card[data-state="empty"] .v3-sc-list, #page-vencimientos .v3-card[data-state="empty"] .v3-c-eyebrow-r { visibility: hidden; } #page-vencimientos .v3-card-hero{ animation-delay: .04s; background: var(--v3-card); } #page-vencimientos .v3-timeline { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 86px; padding-top: 12px; border-top: 1px solid var(--v3-hair); } #page-vencimientos .v3-sc-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; text-transform: capitalize; } #page-vencimientos .v3-card-control .v3-c-cta { background: var(--v3-card); } .v3-tb-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; gap: 0; } .v3-tb-search-ico { position: absolute; left: 10px; color: rgba(26,20,16,.38); pointer-events: none; flex-shrink: 0; } .v3-tb-search-clear { position: absolute; right: 8px; display: none; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; background: rgba(26,20,16,.10); border-radius: 50%; color: rgba(26,20,16,.55); cursor: pointer; padding: 0; transition: background .14s; } .v3-tb-search-clear:hover { background: rgba(26,20,16,.18); } #page-vencimientos .v3-tb-divider { width: 1px; height: 24px; background: rgba(26,20,16,.08); flex-shrink: 0; margin: 0 2px; } #page-vencimientos .v3-tb-spacer { flex: 1 1 0; } .tb-cat-wrapper, .tb-action-zone .mv2-dropdown, .tb-action-zone .v3-dropdown, .v3-dropdown { flex-shrink: 0; position: relative; } .v3-dd-btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: transparent; border: 1px solid rgba(26,20,16,.08); border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap; outline: none; } .v3-dd-btn:hover { background: rgba(26,20,16,.035); border-color: rgba(26,20,16,.14); } .v3-dropdown.is-open .v3-dd-btn { background: rgba(26,20,16,.05); border-color: rgba(26,20,16,.16); } .v3-dd-content { display: flex; flex-direction: column; gap: 1px; text-align: left; } .v3-dd-eyebrow { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,20,16,.40); line-height: 1; } .v3-dd-value { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--v3-ink); line-height: 1.2; } .v3-dd-chevron { color: rgba(26,20,16,.38); transition: transform .2s cubic-bezier(.16,1,.3,1); flex-shrink: 0; } .v3-dd-panel { display: none; position: absolute; top: calc(100% + 5px); left: 0; z-index: 120; background: #FFFFFF; border: 1px solid rgba(26,20,16,.10); border-radius: 10px; box-shadow: 0 4px 16px rgba(26,20,16,.10), 0 1px 3px rgba(26,20,16,.06); padding: 4px; min-width: 180px; animation: v3-dd-in .16s cubic-bezier(.16,1,.3,1); } .v3-dd-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: 7px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: rgba(26,20,16,.72); cursor: pointer; text-align: left; transition: background .12s, color .12s; outline: none; } .v3-dd-opt:hover { background: rgba(26,20,16,.045); color: var(--v3-ink); } .v3-dd-opt.is-active { background: rgba(26,20,16,.06); color: var(--v3-ink); font-weight: 600; } .v3-dod-neutral { background: rgba(26,20,16,.28); } .v3-tb-export { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: transparent; border: 1px solid rgba(26,20,16,.10); border-radius: 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: rgba(26,20,16,.60); cursor: pointer; white-space: nowrap; transition: background .14s, border-color .14s, color .14s; outline: none; flex-shrink: 0; } .v3-tb-export:hover { background: rgba(26,20,16,.04); border-color: rgba(26,20,16,.18); color: var(--v3-ink); } #page-vencimientos .v3-tb-chips { display: flex; align-items: center; gap: 6px; padding: 8px 2px 2px; flex-wrap: wrap; } #page-vencimientos .v3-af-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 10px; background: rgba(26,20,16,.06); border: 1px solid rgba(26,20,16,.10); border-radius: 999px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: -0.005em; color: var(--v3-ink); } #page-vencimientos .v3-af-chip-label { font-family: var(--mono); font-size: 7.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,20,16,.42); margin-right: 1px; } #page-vencimientos .v3-af-chip-remove { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: none; background: rgba(26,20,16,.12); border-radius: 50%; color: rgba(26,20,16,.50); cursor: pointer; padding: 0; transition: background .12s, color .12s; flex-shrink: 0; line-height: 1; } #page-vencimientos .v3-af-chip-remove:hover { background: rgba(26,20,16,.22); color: var(--v3-ink); } #page-vencimientos .v3-af-clear-all { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(26,20,16,.40); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: color .12s, background .12s; outline: none; margin-left: 2px; } #page-vencimientos .v3-af-clear-all:hover { color: var(--v3-ink); background: rgba(26,20,16,.06); } #page-vencimientos .vc2-table thead tr { border-bottom: 1px solid rgba(26,20,16,.07); } #page-vencimientos .vc2-table thead th { padding: 12px 16px; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26,20,16,.36); background: #FFFFFF; text-align: left; white-space: nowrap; } #page-vencimientos .vc2-table .v3-group-header td { padding: 7px 16px 6px; background: rgba(26,20,16,.022); border-top: 1px solid rgba(26,20,16,.06); border-bottom: 1px solid rgba(26,20,16,.06); } #page-vencimientos .vc2-table .v3-group-header:first-child td { border-top: none; } #page-vencimientos .vc2-table tbody tr.v3-tr { border-bottom: 1px solid rgba(26,20,16,.05); transition: background .13s ease; } #page-vencimientos .vc2-table tbody tr.v3-tr:hover { background: rgba(26,20,16,.022); } #page-vencimientos .vc2-table tbody tr.v3-tr[data-state="vencido"], #page-vencimientos .vc2-table tbody tr.v3-tr[data-state="hoy"] { box-shadow: inset 3px 0 0 var(--v3-red); } #page-vencimientos .vc2-table tbody tr.v3-tr[data-state="urgente"] { box-shadow: inset 3px 0 0 var(--v3-amber); } #page-vencimientos .vc2-table tbody tr.v3-tr[data-state="semana"] { box-shadow: inset 3px 0 0 var(--v3-orange); } #page-vencimientos .vc2-table tbody tr.v3-tr[data-state="bien"] { box-shadow: inset 3px 0 0 rgba(26,20,16,.10); } #page-vencimientos .vc2-table tbody td { padding: 13px 16px; vertical-align: middle; } #page-vencimientos .v3-db-red { color: var(--v3-red); } #page-vencimientos .v3-db-amber { color: var(--v3-amber); } #page-vencimientos .v3-db-orange { color: var(--v3-orange); } .v3-tb-search-input::placeholder, #page-vencimientos .v3-db-muted { color: rgba(26,20,16,.32); } #page-vencimientos .vc2-estado.vencido, #page-vencimientos .vc2-estado.hoy { background: rgba(192,57,43,.10); border-color: rgba(192,57,43,.18); color: var(--v3-red); } .v3-dod-red, #page-vencimientos .vc2-estado.vencido::before, #page-vencimientos .vc2-estado.hoy::before { background: var(--v3-red); } #page-vencimientos .vc2-estado.urgente { background: rgba(230,126,34,.10); color: var(--v3-amber); border-color: rgba(230,126,34,.18); } .v3-dod-amber, #page-vencimientos .vc2-estado.urgente::before { background: var(--v3-amber); } #page-vencimientos .vc2-estado.pronto { background: rgba(232,102,58,.08); color: var(--v3-orange); border-color: rgba(232,102,58,.16); } .v3-dod-orange, #page-vencimientos .vc2-estado.pronto::before { background: var(--v3-orange); } #page-vencimientos .vc2-estado.bien { background: rgba(34,165,90,.08); color: var(--v3-green); border-color: rgba(34,165,90,.16); } .v3-dod-green, #page-vencimientos .vc2-estado.bien::before { background: var(--v3-green); } #page-vencimientos .vc2-cat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: -0.005em; background: rgba(26,20,16,.055); color: rgba(26,20,16,.58); border: 1px solid rgba(26,20,16,.08); } #page-vencimientos .vc2-table tbody td.v3-td-actions { white-space: nowrap; padding: 0 10px; width: 1px; /* colapsa al mínimo */ } #page-vencimientos .vc2-empty-cell { text-align: center; padding: 60px 24px; color: inherit; background: transparent; } #page-vencimientos .v3-eyebrow{ font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--v3-ink-3); margin-bottom: 12px; animation: lx-fade-in var(--lx-d-normal) var(--lx-curve-enter) 0ms both; } #page-vencimientos .v3-title{ font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; color: var(--v3-ink); margin: 0 0 8px; animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 80ms both; } #page-vencimientos .v3-subtitle{ font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: var(--v3-ink-2); margin: 0; animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 160ms both; } .v3-btn-add{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--v3-ink); color: #F5EFE6; border: none; border-radius: 999px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: transform .16s ease, background .16s ease; white-space: nowrap; animation: lx-fade-in var(--lx-d-normal) var(--lx-curve-enter) 200ms both; } #page-vencimientos .v3-triptico .v3-card:nth-child(1) { animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 280ms both; } #page-vencimientos .v3-triptico .v3-card:nth-child(2) { animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 360ms both; } #page-vencimientos .v3-triptico .v3-card:nth-child(3) { animation: lx-fade-up var(--lx-d-slow) var(--lx-curve-enter) 440ms both; } #page-vencimientos .v3-toolbar{ margin-bottom: 4px; display: flex; flex-direction: column; gap: 0; position: relative; z-index: 30; animation: lx-fade-up var(--lx-d-normal) var(--lx-curve-enter) 520ms both; } #page-vencimientos .vc2-table-meta{ font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,20,16,.38); padding: 10px 2px 8px; animation: lx-fade-in var(--lx-d-fast) var(--lx-curve-enter) 560ms both; } #page-vencimientos .v3-card[data-state="empty"] .v3-c-empty svg polyline { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lx-stroke-draw var(--lx-d-deliberate) var(--lx-curve-enter) 300ms forwards; } #page-vencimientos .v3-tr { animation: lx-fade-up var(--lx-d-normal) var(--lx-curve-enter) both; animation-delay: calc(var(--lx-stagger-tight) * var(--i, 0)); } #page-vencimientos .vc2-row-edit, #page-vencimientos .v3-tb-row{ display: flex; align-items: center; gap: 6px; background: #f2f1ef !important; border: 1px solid rgba(26,20,16,.08); border-radius: 12px; padding: 6px 8px; border-color: rgba(191,180,170,.32) !important; } .v3-tb-search-input{ width: 100%; background: transparent !important; border: 1px solid rgba(26,20,16,.08); border-radius: 8px; padding: 8px 32px 8px 32px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--v3-ink); outline: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .v3-tb-search-input:focus{ background: rgba(255,255,255,.55) !important; border-color: rgba(232,102,58,.40); box-shadow: 0 0 0 3px rgba(232,102,58,.10); } /* ═══ 18. CLIENTES ═══ */ .cpb-icon {font-size:13px;flex-shrink:0} .cpb-label {font-size:10px;font-weight:600;color:var(--accent-warm);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0} .cpb-text {flex:1;font-size:12px;color:var(--ink-82);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crp-bar {width:3px;min-height:28px;align-self:stretch;background:var(--accent-warm);border-radius:2px;flex-shrink:0} .crp-autor {font-size:11px;font-weight:600;color:var(--accent-warm);font-family:var(--sans);margin-bottom:1px} .crp-texto {font-size:11px;color:var(--ink-82);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crp-close {background:none;border:none;cursor:pointer;font-size:18px;color:var(--ink-70);padding:0 4px;transition:color .15s;flex-shrink:0} .crp-close:hover {color:var(--char)} #page-clientes .ph-title { color: var(--char); letter-spacing: 0.01em; } #page-clientes .btn-icon { border: 1.5px solid var(--border-warm); background: var(--paper-2); box-shadow: none; } #page-clientes .btn-icon:hover { border-color: var(--accent-warm-ln); background: rgba(232,102,58, 0.08); } #page-clientes .ph{ margin-bottom: 12px; padding: 14px 16px; border-radius: var(--r2); border: 1.5px solid var(--border-warm); border-color: var(--line-strong); background: var(--surface-1); } #page-clientes .ph-sub{ letter-spacing: 0.1em; color: var(--text-meta); } #page-clientes .cli-email { font-size: 12px; color: var(--char); } #page-clientes .cli-caja { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--char); letter-spacing: -0.015em; } .cli-layout { display: grid; grid-template-columns: 520px 1fr; flex: 1; min-height: 0; overflow: hidden; } .cli-master { display: flex; flex-direction: column; border-right: 1px solid rgba(26,20,16,.12); background: #faf7f2; overflow: hidden; } .cli-master-head { padding: 16px 14px 14px; border-bottom: 1px solid rgba(26,20,16,.1); background: #f3ede2; flex-shrink: 0; } #page-movimientos .mv2-kpi:last-child { border-right: none; } .cli-master-list { flex: 1; overflow-y: auto; padding: 4px 0; } .cli-detail { background: #f5ede0; overflow-y: auto; display: flex; flex-direction: column; } .cli-detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(26,20,16,.35); } .cli-detail-empty-text { font-size: 13px; letter-spacing: 0.06em; font-family: var(--mono); } #page-clientes { background:#fdfcfb; padding:28px 24px 36px; } #page-clientes .cli-master { display:block; background:transparent; border:0; } .cli-btn-new:hover { background:#b75823; } .cli-tier-btn.active { background:#fff; color:#231d1a; box-shadow:0 1px 3px rgba(26,20,16,.08); } #page-clientes .cli-master-list { max-height:none; overflow:visible; padding:0; } #page-clientes .cli-drw-hist-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #efe8e1; } #page-clientes .cli-drw-hist-date { color:rgba(35,29,26,.55); font-size:13px; } #page-clientes .cli-drw-hist-desc { color:#231d1a; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-clientes .cli-master-head{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; background: transparent; border: 0; padding: 0; } .cli-btn-new { white-space: nowrap; flex-shrink: 0; font-size: 10px !important; padding: 0 12px !important; height: 36px; margin-left: 0; border-radius: 999px; background: #E8663A; border-color: #E8663A; color: #fff; margin-top: 12px; } .cli-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .cli-master-bar{ display: flex; align-items: center; gap: 12px; margin: 0; } .cli-tier-filters{ display: inline-flex; gap: 8px; background: #f1edea; border-radius: 999px; padding: 4px; width: fit-content; margin: 0; } .cli-tier-btn{ border: 0; background: transparent; color: rgba(35,29,26,.64); font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 12px; } #page-clientes .cli-list-count{ margin: 2px 0 10px; color: rgba(35,29,26,.64); font-size: 13px; } #page-clientes .cli-drw-hist-amt{ color: #231d1a; font-family: var(--serif); font-size: 15px; } #page-clientes.active{ display: flex; flex-direction: column; padding: 0; height: auto; overflow: hidden; min-height: 0; overflow-y: auto; } #page-clientes .cli-layout, #page-clientes .cli-master, #page-clientes .cli-master-list { overflow: visible; min-height: 0; } /* ── Clientes en MOBILE: 1 columna + tabla compacta (Cliente · Compras · Puntos). El detalle completo (WhatsApp, email, caja, alta, acciones) está en el drawer al tocar. Sin desborde horizontal → la tabla entra completa y el tap abre el drawer sin "comerse" el gesto. ── */ @media (max-width: 640px) { #page-clientes.active { overflow-x: hidden; } #page-clientes .cli-layout { grid-template-columns: 1fr; } #page-clientes .cli-tbl th:nth-child(2), #page-clientes .cli-tbl td:nth-child(2), #page-clientes .cli-tbl th:nth-child(3), #page-clientes .cli-tbl td:nth-child(3), #page-clientes .cli-tbl th:nth-child(5), #page-clientes .cli-tbl td:nth-child(5), #page-clientes .cli-tbl th:nth-child(7), #page-clientes .cli-tbl td:nth-child(7), #page-clientes .cli-tbl th:nth-child(8), #page-clientes .cli-tbl td:nth-child(8) { display: none; } #page-clientes .cli-name-cell { min-width: 0; } #page-clientes .cli-name { max-width: 52vw; } #page-clientes .cli-row { touch-action: manipulation; } } #page-clientes .cli-detail{ position: fixed; inset: 0 !important; z-index: calc(var(--z-modal) + 100); pointer-events: none; display: none; background: transparent !important; overflow: visible; } #page-clientes.cli-drawer-open .cli-detail{ display: block !important; } #page-clientes .cli-drawer{ height: 100dvh; max-height: 100dvh; overflow: hidden; display: grid !important; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); position: fixed; right: 0; top: 0; bottom: 0; width: min(430px, 94vw); background: #fff !important; border-left: 1px solid #e2dbd3 !important; } #page-clientes .cli-drawer-shell{ position: fixed; inset: 0 !important; background: rgba(35, 29, 26, 0.48) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex !important; justify-content: flex-end; pointer-events: auto; } .cli-master-bar input { min-height: 36px; font-family: var(--sans); outline: none; transition: border-color .15s ease, box-shadow .15s ease; flex: 0 0 390px; max-width: 100%; border: 1px solid #dfd7cd; border-radius: 999px; background: #f2f1ef !important; height: 38px; padding: 0 16px; color: #231d1a; font-size: 13px; border-color: rgba(191,180,170,.50) !important; } .cli-master-bar input:focus { box-shadow: 0 0 0 3px rgba(232,102,58,.08); background: #f8f6f3 !important; border-color: rgba(232,102,58,.40) !important; } /* ═══ 20. COSTOS ═══ */ .costo-empty { text-align: center; padding: 36px 20px; color: var(--ink-70); font-size: 13px; } .costo-alert-item { padding:10px 12px; border:1px solid rgba(26,20,16,.08); border-radius:8px; background:var(--paper); } .costo-alert-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; } .costo-alert-cat { font-size:11px; font-weight:600; color:var(--ink-82); } .costo-alert-pct { font-size:10px; font-weight:700; font-family:var(--mono); } .costo-alert-pct.ok { color:var(--green); } .costo-alert-pct.warn { color:var(--amber); } .costo-alert-pct.danger { color:var(--red); } .costo-alert-bar-wrap { height:5px; background:rgba(26,20,16,.1); border-radius:3px; margin-bottom:5px; overflow:hidden; } .costo-alert-bar-fill { height:100%; border-radius:3px; transition:width .4s; } .costo-alert-amounts { display:flex; justify-content:space-between; font-size:9px; font-family:var(--mono); color:var(--ink-70); } .costo-alert-lim-row { display:flex; align-items:center; gap:4px; margin-top:6px; padding-top:5px; border-top:1px solid rgba(26,20,16,.07); } .costo-alert-lim-row label { font-size:9px; color:var(--ink-70); white-space:nowrap; } .costo-alert-lim-inp { font-size:10px; font-family:var(--mono); border:1px solid rgba(26,20,16,.15); border-radius:5px; padding:2px 5px; width:68px; background:var(--paper); color:var(--char); outline:none; } .costo-alert-lim-btn { font-size:9px; padding:2px 7px; border-radius:5px; background:var(--char); color: var(--text-on-dark); border:none; cursor:pointer; flex-shrink:0; } .costo-cal-header-row { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; } .costo-cal-hdr { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-70); text-align:center; padding:2px 0; } .costo-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .costo-cal-day { min-height:40px; border-radius:5px; padding:3px 4px; background:var(--paper); border:1px solid rgba(26,20,16,.06); cursor:pointer; transition:all .12s; } .costo-cal-day:hover { border-color:rgba(26,20,16,.2); } .costo-cal-day.has-data { background:rgba(232,102,58,.07); border-color:rgba(232,102,58,.2); } .costo-cal-day.today { border-color:var(--accent-warm) !important; } .costo-cal-day.selected { background:rgba(26,20,16,.07) !important; border-color:var(--char) !important; } .costo-cal-day.empty { background:transparent; border-color:transparent; cursor:default; pointer-events:none; } .costo-cal-num { font-size:9px; color:var(--ink-70); font-weight:500; } .costo-cal-day.today .costo-cal-num { color:var(--accent-warm); font-weight:700; } .costo-comp-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(26,20,16,.07); } .costo-comp-label { font-size:11px; color:var(--ink-70); flex:1; } .costo-comp-prev { font-size:11px; color:var(--ink-70); font-family:var(--mono); min-width:70px; text-align:right; } .costo-comp-curr { font-size:12px; font-weight:600; color:var(--char); font-family:var(--mono); min-width:80px; text-align:right; } .costo-delta { font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; font-family:var(--mono); min-width:40px; text-align:center; } .costo-delta-neu { background:rgba(26,20,16,.07); color:var(--ink-70); } .costo-comp-month-labels { display:flex; justify-content:flex-end; gap:10px; padding-bottom:6px; margin-bottom:2px; border-bottom:1px solid rgba(26,20,16,.1); } .costo-comp-month-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-70); } .costo-comp-month-lbl span { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; } .costo-proj-stat { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; } .costo-proj-stat-label { font-size:11px; color:var(--ink-70); } .costo-proj-stat-val { font-size:13px; font-weight:700; font-family:var(--mono); color:var(--char); } .costo-proj-bar-wrap { height:8px; background:rgba(26,20,16,.1); border-radius:4px; margin:4px 0 8px; overflow:hidden; } .costo-proj-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; } .costo-proj-alert.ok { background:rgba(34,165,90,.1); color:var(--green); } .costo-proj-budget-row { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(26,20,16,.08); } .costo-proj-budget-row label { font-size:10px; color:var(--ink-70); white-space:nowrap; } .costo-proj-budget-inp { font-size:11px; font-family:var(--mono); border:1px solid rgba(26,20,16,.15); border-radius:6px; padding:4px 8px; width:100px; background:var(--paper); color:var(--char); outline:none; } .costo-proj-budget-btn { font-size:10px; padding:4px 9px; border-radius:6px; background:var(--char); color: var(--text-on-dark); border:none; cursor:pointer; white-space:nowrap; } .costo-proj-budget-btn:hover { opacity:.85; } .costo-suc-table { width:100%; border-collapse:collapse; font-size:12px; } .costo-suc-table th { font-size:9px; font-weight:700; color:var(--ink-70); text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-bottom:1px solid rgba(26,20,16,.12); text-align:right; } .costo-suc-table th:first-child { text-align:left; } .costo-suc-table td { padding:8px 10px; border-bottom:1px solid rgba(26,20,16,.06); font-family:var(--mono); font-size:11px; text-align:right; color:var(--char); } .costo-suc-table td:first-child { font-family:inherit; font-size:11px; font-weight:500; color:var(--ink-82); text-align:left; } .costo-suc-table tr:last-child td { border-bottom:none; font-weight:700; background:rgba(26,20,16,.025); } .costo-suc-tag { display:inline-block; padding:2px 7px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .costo-suc-tag.l1 { background:rgba(59,130,196,.12); color:rgba(59,130,196,.9); } .costo-suc-tag.l2 { background:rgba(232,102,58,.12); color:rgba(232,102,58,.9); } #page-costos .costo-period-range { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-left: auto; letter-spacing: 0.06em; } #page-costos .costo-cat-leg-pct { font-family: var(--mono); font-size: 9.5px; color: var(--t4); } #page-costos .costo-rank-item { padding: 10px 0; border-bottom: 1px solid rgba(26,20,16,0.05); } #page-costos .costo-rank-num { width: 18px; height: 18px; border-radius: 50%; background: rgba(26,20,16,0.05); border: 1px solid rgba(26,20,16,0.10); font-family: var(--mono); font-size: 8.5px; font-weight: 700; color: var(--t4); } #page-costos .costo-rank-desc { font-size: 12px; font-weight: 500; color: var(--t1); } #page-costos .costo-table-card { background: #ffffff; border: 1px solid rgba(26,20,16,0.08); border-radius: 8px; overflow: hidden; overflow-x: auto; box-shadow: 0 2px 10px rgba(26,20,16,0.04); } #page-costos .costo-table th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t4); font-weight: 500; padding: 11px 16px; border-bottom: 1px solid rgba(26,20,16,0.07); background: #faf7f2; white-space: nowrap; } #page-costos .costo-table td { padding: 12px 16px; border-bottom: 1px solid rgba(26,20,16,0.05); color: var(--t2); vertical-align: middle; } #page-costos .costo-table tr:hover td { background: rgba(245,239,230,0.55); } #page-costos .costo-cat-pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; padding: 3px 9px; border-radius: var(--radius-xs, 6px); } #page-costos .costo-edit, #page-costos .costo-del, #page-costos .costo-dup { border-radius: 4px; padding: 3px 6px; font-size: 13px; opacity: 0; transition: opacity .18s var(--ease-ui), color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui); } #page-costos .costo-empty { font-family: var(--mono); font-size: 11px; color: var(--t4); letter-spacing: 0.08em; padding: 40px 20px; } #page-costos .costo-alert-grid { gap: 10px; } #page-costos .costo-alert-item { background: #ffffff; border: 1px solid rgba(26,20,16,0.08); border-radius: 8px; padding: 13px 14px; box-shadow: 0 1px 6px rgba(26,20,16,0.03); transition: box-shadow var(--motion-fast) var(--ease-ui); } #page-costos .costo-alert-item:hover { box-shadow: 0 4px 16px rgba(26,20,16,0.08); } #page-costos .costo-alert-cat { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); } #page-costos .costo-alert-pct { font-family: var(--serif); font-size: 15px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; } #page-costos .costo-alert-bar-wrap { height: 4px; background: rgba(26,20,16,0.08); border-radius: 2px; } #page-costos .costo-alert-amounts { font-family: var(--mono); font-size: 8.5px; color: var(--t4); letter-spacing: 0.04em; } #page-costos .costo-alert-lim-inp { font-family: var(--mono); font-size: 10px; border: 1px solid rgba(26,20,16,0.12); border-radius: 4px; background: rgba(245,239,230,0.60); color: var(--t1); padding: 3px 6px; } #page-costos .costo-alert-lim-inp:focus { border-color: var(--accent-warm); outline: none; } #page-costos .costo-alert-lim-btn { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.10em; background: #1a1410; color: rgba(240,230,214,0.88); border: none; border-radius: 4px; padding: 3px 9px; cursor: pointer; } #page-costos .costo-prov-item { padding: 9px 0; border-bottom: 1px solid rgba(26,20,16,0.05); } #page-costos .costo-prov-rank { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--t4); } #page-costos .costo-prov-name { font-size: 12px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; } #page-costos .costo-rank-meta, #page-costos .costo-prov-meta { color: var(--t4); font-family: var(--mono); font-size: 9px; margin-top: 2px; } #page-costos .costo-prov-bar-fill { background: rgba(232,102,58,0.55); border-radius: 2px; } #page-costos .costo-cat-leg-amt, #page-costos .costo-prov-monto { color: var(--t1); font-family: var(--serif); font-size: 13px; font-style: italic; font-weight: 700; letter-spacing: -0.02em; } #page-costos .costo-cat-leg-name, #page-costos .costo-comp-label { color: var(--t2); font-size: 12px; } #page-costos .costo-comp-prev { font-family: var(--mono); font-size: 11px; color: var(--t4); } #page-costos .costo-rank-monto, #page-costos .costo-comp-curr { color: var(--t1); font-family: var(--serif); font-size: 14px; font-style: italic; font-weight: 700; letter-spacing: -0.02em; } #page-costos .costo-delta { font-family: var(--mono); font-size: 9px; font-weight: 700; border-radius: 3px; padding: 2px 6px; letter-spacing: 0.04em; } #page-costos .costo-proj-stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; color: var(--t3); text-transform: uppercase; } #page-carga #carga-resumen strong, #page-costos .costo-monto, #page-costos .costo-proj-stat-val { color: var(--t1); font-family: var(--serif); font-size: 15px; font-style: italic; font-weight: 700; letter-spacing: -0.02em; } #page-costos .costo-proj-bar-wrap { height: 6px; background: rgba(26,20,16,0.08); border-radius: 2px; } #page-costos .costo-alert-bar-fill, #page-costos .costo-proj-bar-fill { border-radius: 2px; } #page-costos .costo-proj-budget-inp { font-family: var(--mono); font-size: 11px; border: 1px solid rgba(26,20,16,0.12); border-radius: 5px; background: rgba(245,239,230,0.60); color: var(--t1); padding: 5px 9px; } #page-costos .costo-proj-budget-btn { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; background: #1a1410; color: rgba(240,230,214,0.88); border-radius: 5px; padding: 5px 10px; } #page-costos .costo-cal-hdr { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; color: var(--t4); text-transform: uppercase; } #page-costos .costo-cal-day { background: rgba(255,255,255,0.70); border: 1px solid rgba(26,20,16,0.06); border-radius: 5px; min-height: 42px; transition: border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui); } #page-costos .costo-cal-day:hover { border-color: rgba(26,20,16,0.18); background: #ffffff; } #page-costos .costo-cal-day.has-data { background: rgba(232,102,58,0.06); border-color: rgba(232,102,58,0.18); } #page-costos .costo-cal-day.today { border-color: var(--accent-warm) !important; } #page-costos .costo-cal-num { font-family: var(--mono); font-size: 9px; color: var(--t4); font-weight: 500; } #page-costos .costo-cal-day.today .costo-cal-num { color: var(--accent-warm); font-weight: 700; } #page-costos .costo-cal-amt { font-family: var(--mono); font-size: 9px; font-weight: 600; color: rgba(232,102,58,0.80); margin-top: 2px; } #page-costos .costo-quick-section { background: rgba(59,130,196,0.04); border: 1px dashed rgba(59,130,196,0.20); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; } #page-costos .costo-quick-btn { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; border: 1px solid rgba(26,20,16,0.10); background: #ffffff; color: var(--t2); border-radius: 4px; padding: 5px 10px; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } #page-costos .costo-quick-btn:hover { background: #1a1410; color: rgba(240,230,214,0.88); border-color: #1a1410; } body #page-costos.section-core { --cos-gap: 18px; --cos-pad-x: 24px; } body #page-costos.section-core .costo-table-card, body #page-costos.section-core #costo-quick-section, body #page-costos.section-core .costo-quick-section{ background: var(--paper); border: var(--card-border); border-radius: var(--r2); box-shadow: none; margin-bottom: var(--cos-gap); padding-left: var(--cos-pad-x); padding-right: var(--cos-pad-x); } body #page-costos.section-core .costo-alert-grid { gap: var(--cos-gap); } body #page-costos.section-core .costo-table-card { padding-top: 0; padding-bottom: 22px; } body #page-costos.section-core .costo-quick-section, body #page-costos.section-core #costo-quick-section { padding-top: 14px; padding-bottom: 14px; } body #page-costos.section-core .costo-table { border-collapse: collapse; border-spacing: 0; margin-top: 0; } body #page-costos.section-core .costo-table tbody td:first-child { border-left: 0; border-radius: 0; } body #page-costos.section-core .costo-table tbody td:last-child { border-right: 0; border-radius: 0; } body #page-costos.section-core .costo-rank-item { border-radius: 0; background: transparent; border: none; border-bottom: 1px solid var(--border-warm); padding: 13px 0; } body #page-costos.section-core .costo-rank-item:last-child { border-bottom: none; padding-bottom: 0; } body #page-costos.section-core .costo-alert-item { border-radius: var(--r2); background: var(--paper-2); border: 1.5px solid var(--border-warm); padding: 14px 16px; } body #page-costos.section-core .costo-comp-row, body #page-costos.section-core .costo-prov-item { border-bottom-color: var(--border-warm); padding-bottom: 11px; padding-top: 11px; } body #page-costos.section-core .costo-alert-lim-inp, body #page-costos.section-core .costo-proj-budget-inp, body #page-costos.section-core .costo-quick-btn { background: var(--paper-2); border: var(--card-border-thin); color: var(--ink-82); } body #page-costos.section-core .costo-monto, body #page-costos.section-core .costo-rank-monto, body #page-costos.section-core .costo-table td, body #page-costos.section-core .costo-table th, body #page-costos.section-core .costo-period-range, body #page-costos.section-core .costo-comp-prev, body #page-costos.section-core .costo-comp-curr, body #page-costos.section-core .costo-prov-monto, body #page-costos.section-core .costo-cat-leg-pct, body #page-costos.section-core .costo-cat-leg-amt { font-family: var(--mono); font-variant-numeric: tabular-nums; } body #page-costos.section-core .costo-table tbody td{ background: transparent; border-top: none; border-bottom: 1px solid var(--border-warm); border-left: 0; border-right: 0; border-radius: 0; padding-top: 16px; padding-bottom: 16px; font-size: 13px; color: var(--ink-82); } body #page-costos.section-core .costo-table thead th{ border-bottom: 1.5px solid var(--border-warm); padding: 0 16px 10px 16px; font-weight: 600; text-transform: uppercase; color: var(--ink-70); padding-top: 4px; padding-bottom: 12px; font-size: 9px; letter-spacing: .12em; } body #page-costos.section-core .costo-cat-pill { padding: 3px 10px; font-size: 10.5px; } body #page-costos.section-core .costo-rank-num { width: 22px; height: 22px; font-size: 10px; flex-shrink: 0; } body #page-costos.section-core .costo-rank-desc { font-size: 13px; font-weight: 600; color: var(--char); margin-bottom: 2px; } body #page-costos.section-core .costo-rank-meta { font-size: 11px; color: var(--ink-70); margin-top: 3px; } body #page-costos.section-core .costo-monto, body #page-costos.section-core .costo-rank-monto { color: var(--char); font-size: 14px; font-weight: 700; } body #page-costos.section-core .costo-cat-leg-item { font-size: 12.5px; gap: 10px; padding: 3px 0; } body #page-costos.section-core .costo-cat-leg-name { font-size: 12.5px; color: var(--ink-82); } body #page-costos.section-core .costo-cat-leg-pct { font-size: 11px; color: var(--ink-70); } body #page-costos.section-core .costo-cat-leg-amt { font-size: 12px; font-weight: 700; color: var(--char); } body #page-costos.section-core .costo-comp-label { font-size: 12.5px; color: var(--ink-82); font-weight: 500; } body #page-costos.section-core .costo-comp-prev { font-size: 12px; color: var(--ink-70); } body #page-costos.section-core .costo-comp-curr { font-size: 13px; font-weight: 700; color: var(--char); } body #page-costos.section-core .costo-prov-name { font-size: 12.5px; font-weight: 600; } body #page-costos.section-core .costo-prov-meta { font-size: 10.5px; margin-top: 2px; } body #page-costos.section-core .costo-prov-monto { font-size: 13px; font-weight: 700; } #page-costos{ padding-bottom: 40px; background: #fdfcfb; padding: 36px 40px 60px; gap: 0; min-height: 100%; box-sizing: border-box; } .co-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; } .co-eyebrow { font-size: 11px; letter-spacing: 0.1em; color: #9A8F86; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; } .co-title { font-family: var(--serif); font-size: 28px; font-weight: 700; color: #1A1410; line-height: 1.1; margin: 0 0 4px; } .co-subtitle { font-size: 13px; color: #9A8F86; margin: 0; } .co-btn-primary { display: flex; align-items: center; gap: 7px; background: #C4522A; color: #fff; border: none; border-radius: 100px; padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.18s; margin-top: 8px; flex-shrink: 0; } .co-btn-primary:hover { background: #A84220; } .co-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .co-period-bar { display: flex; gap: 2px; background: #EDE9E2; border-radius: 10px; padding: 4px; flex-shrink: 0; } .co-filters-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } .co-period-btn { background: none; border: none; padding: 7px 16px; font-size: 13px; font-weight: 500; color: #7A6F66; cursor: pointer; border-radius: 7px; transition: all 0.18s; white-space: nowrap; font-family: inherit; } .co-subnav { display: flex; gap: 2px; background: #EDE9E2; border-radius: 10px; padding: 4px; width: fit-content; } .co-subnav-btn { background: none; border: none; padding: 8px 18px; font-size: 14px; font-weight: 500; color: #7A6F66; cursor: pointer; border-radius: 7px; transition: all 0.18s; white-space: nowrap; font-family: inherit; } .co-period-btn.active, .co-subnav-btn.active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); color: #1A1410; font-weight: 600; } .co-period-btn:not(.active):hover, .co-subnav-btn:not(.active):hover { background: rgba(255,255,255,0.45); color: #1A1410; } .co-subpage { display: flex; flex-direction: column; gap: 20px; } .co-card { background: #fff; border: 1px solid rgba(26,20,16,.05); border-radius: var(--radius-lg); padding: 24px 28px; box-shadow: var(--card-shadow); transition: box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); } #page-dashboard .dash-panel:hover, .co-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } .co-card-eyebrow { font-size: 10px; letter-spacing: 0.1em; color: #9A8F86; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; } .co-card-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #1A1410; margin-bottom: 20px; } .co-chart-wrap { height: 300px; position: relative; } .co-chart-suc-wrap { height: 240px; } .co-chart-legend { display: flex; gap: 20px; justify-content: center; margin-top: 16px; flex-wrap: wrap; } .co-leg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7A6F66; } .co-leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .co-leg-dash { width: 18px; height: 2.5px; border-radius: 2px; flex-shrink: 0; } .co-kpi-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .co-kpi3 { background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); text-align: center; } .co-kpi3-label { font-size: 10px; letter-spacing: 0.1em; color: #9A8F86; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; } .co-kpi3-val { font-family: var(--serif); font-size: 32px; font-weight: 700; color: #1A1410; line-height: 1; } .co-kpi3-delta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; margin-top: 8px; font-weight: 600; } .co-delta-green { color: #2D6B4A; } .co-delta-red { color: #C4522A; } .co-kpi3-sub { font-size: 11px; color: #9A8F86; margin-top: 8px; line-height: 1.3; } /* ── Alerta de tendencia ── */ .co-alert-trend { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); } .co-alert-trend.co-alert-warning { border-left: 4px solid #D4A017; background: linear-gradient(135deg, #FFFDF5 0%, #fff 100%); } .co-alert-trend.co-alert-danger { border-left: 4px solid #C4522A; background: linear-gradient(135deg, #FFF8F6 0%, #fff 100%); } .co-alert-trend.co-alert-success { border-left: 4px solid #2D6B4A; background: linear-gradient(135deg, #F5FFF9 0%, #fff 100%); } .co-alert-trend-icon { font-size: 20px; flex-shrink: 0; line-height: 1; } .co-alert-trend-title { font-size: 14px; font-weight: 700; color: #1A1410; margin-bottom: 4px; } .co-alert-trend-desc { font-size: 13px; color: #5A4F47; line-height: 1.5; } /* ── Top categorías ── */ .co-top-cat-rank { font-family: var(--serif); font-size: 16px; font-weight: 700; color: #9A8F86; width: 20px; text-align: center; flex-shrink: 0; } .co-top-cat-pct { font-family: var(--mono); font-size: 11px; color: #7A6F66; margin-left: auto; letter-spacing: 0.02em; } .co-top-cat-monto { font-family: var(--serif); font-size: 15px; font-weight: 700; font-style: italic; color: #1A1410; min-width: 80px; text-align: right; } .co-top-cat-bar { height: 6px; background: rgba(26,20,16,0.06); border-radius: 3px; overflow: hidden; } .co-top-cat-bar-fill { height: 100%; background: linear-gradient(90deg, #C4522A, #D4956A); border-radius: 3px; transition: width .4s cubic-bezier(.16,1,.3,1); } /* ── Breakdown por categoría ── */ #co-suc-ranking, .co-breakdown-list { margin-top: 16px; } .co-bd-header { display: grid; grid-template-columns: 1fr 100px 80px 90px; gap: 8px; padding: 0 0 10px; border-bottom: 1px solid #F0EDE8; margin-bottom: 4px; } .co-bd-th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: #9A8F86; font-weight: 700; text-transform: uppercase; } .co-bd-row { display: grid; grid-template-columns: 1fr 100px 80px 90px; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid #F8F6F3; } .co-bd-cat { display: flex; align-items: center; } .co-bd-monto { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: italic; color: #1A1410; text-align: right; } .co-bd-pct { font-family: var(--mono); font-size: 11px; color: #7A6F66; text-align: right; } .co-bd-delta { font-family: var(--mono); font-size: 10px; font-weight: 600; text-align: right; } /* ── Punto de equilibrio ── */ .co-equil-val { font-family: var(--serif); font-size: 28px; font-weight: 700; color: #1A1410; margin: 12px 0 6px; } .co-equil-sub { font-size: 12px; color: #7A6F66; line-height: 1.4; margin-bottom: 16px; } .co-equil-bar-wrap { height: 8px; background: #F0EDE8; border-radius: 4px; overflow: hidden; margin-bottom: 10px; } .co-equil-bar-fill { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.16,1,.3,1); } .co-equil-legend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: #9A8F86; letter-spacing: 0.04em; } /* ── Proyección utilidad ── */ .co-proy-util-val { font-family: var(--serif); font-size: 28px; font-weight: 700; margin: 12px 0 6px; } .co-proy-util-label { font-size: 12px; color: #7A6F66; margin-bottom: 12px; } .co-proy-util-detail { font-size: 12px; color: #9A8F86; line-height: 1.4; } .co-proy-util-detail strong { color: #5A4F47; font-weight: 600; } /* ── Fijos vs Variables ── */ .co-fv-row { display: flex; align-items: center; gap: 0; margin-top: 16px; } .co-fv-block { flex: 1; text-align: center; } .co-fv-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: #9A8F86; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; } .co-fv-val { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #1A1410; line-height: 1; } .co-fv-pct { font-family: var(--mono); font-size: 10px; color: #9A8F86; margin-top: 4px; } .co-fv-divider { width: 1px; height: 48px; background: #F0EDE8; flex-shrink: 0; } .co-fv-bar-wrap { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 16px 0 12px; background: #F0EDE8; } .co-fv-bar-fijos { height: 100%; background: #C4522A; transition: width .5s cubic-bezier(.16,1,.3,1); } .co-fv-bar-vars { height: 100%; background: #D4956A; transition: width .5s cubic-bezier(.16,1,.3,1); } .co-fv-items { margin-top: 4px; } .co-fv-items-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: #9A8F86; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; } .co-fv-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #F8F6F3; } .co-fv-item-val { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: italic; color: #1A1410; } /* ── Margen por sucursal ── */ .co-suc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .co-suc-cmp-item { background: #FDFCFA; border-radius: 12px; padding: 18px 20px; border: 1px solid #F0EDE8; } .co-suc-cmp-name { font-family: var(--serif); font-size: 15px; font-weight: 700; color: #1A1410; margin-bottom: 14px; } .co-suc-cmp-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; color: #9A8F86; font-weight: 700; text-transform: uppercase; } .co-suc-cmp-val { font-family: var(--serif); font-size: 16px; font-weight: 700; color: #1A1410; } .co-gauge-wrap { position: relative; width: 200px; height: 112px; margin: 20px auto 4px; } .co-gauge-center { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; } .co-gauge-pct { font-family: var(--serif); font-size: 28px; font-weight: 700; color: #1A1410; line-height: 1; } .co-gauge-unit { font-size: 11px; color: #9A8F86; margin-top: 2px; } .co-gauge-status { text-align: center; margin-top: 16px; font-size: 13px; font-weight: 600; } .co-cat-inner { display: flex; align-items: center; gap: 20px; margin-top: 12px; } .co-cat-donut-wrap { width: 130px; height: 130px; flex-shrink: 0; } .co-cat-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; } .co-search-wrap { display: flex; align-items: center; background: #fff; border-radius: 100px; padding: 10px 18px; gap: 10px; width: 340px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.07); } .co-search-icon { color: #9A8F86; flex-shrink: 0; } .co-search-input { border: none; outline: none; background: transparent; font-size: 14px; color: #1A1410; flex: 1; font-family: inherit; } .co-table-card { padding: 0; overflow: hidden; overflow-x: auto; } .co-table { width: 100%; border-collapse: collapse; font-size: 14px; } .co-table thead th { font-size: 10px; letter-spacing: 0.08em; color: #9A8F86; font-weight: 700; text-transform: uppercase; padding: 14px 20px; text-align: left; border-bottom: 1px solid #F0EDE8; background: #FDFCFA; } .co-table tbody tr { border-bottom: 1px solid #F5F2EC; transition: background 0.12s; } #page-stock .sk-table-wrap tbody tr:hover td, #page-costos .costo-table tbody tr:nth-child(even) td, .co-table tbody tr:nth-child(even) { background: rgba(26,20,16,0.018); } .co-table tbody tr:hover { background: #F8F6F3; } .co-table tbody td { padding: 14px 20px; color: #1A1410; } .co-td-date { font-family: var(--mono); font-size: 12px; color: #7A6F66; white-space: nowrap; } .co-td-monto { font-family: var(--serif); font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: #1A1410; text-align: right; white-space: nowrap; } .co-cat-pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-xs, 6px); font-weight: 600; white-space: nowrap; } .co-td-acciones-wrap { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .18s ease; } .co-row-edit, .co-row-del { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 5px; color: #9A8F86; transition: color .15s, background .15s; } .co-row-edit:hover { color: #1A1410; background: rgba(26,20,16,.05); } .co-row-del:hover { color: #C4522A; background: rgba(196,82,42,.08); } .co-suc-card { background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); } .co-suc-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; } .co-suc-card-name { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 18px; font-weight: 700; color: #1A1410; } .co-suc-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .co-suc-total { font-family: var(--serif); font-size: 22px; font-weight: 700; color: #1A1410; text-align: right; } .co-suc-pct { font-size: 12px; color: #9A8F86; text-align: right; } .co-suc-meta { font-size: 12px; color: #9A8F86; margin-bottom: 10px; } .co-suc-bar { height: 3px; border-radius: 2px; margin-bottom: 14px; transition: width 0.5s ease; } .co-suc-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 16px; padding: 14px; background: #FBF8F4; border: 1px solid #EEE8DF; border-radius: 10px; } .co-suc-kpi-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: #9A8F86; text-transform: uppercase; margin-bottom: 4px; } .co-suc-kpi-val { font-family: var(--serif); font-size: 17px; font-weight: 700; color: #1A1410; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-util-pos { color: #2D6B4A !important; } .co-kpi3-red, .co-util-neg { color: #C4522A !important; } .co-suc-breakdown-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #9A8F86; text-transform: uppercase; margin-bottom: 8px; } .co-suc-breakdown-empty { font-size: 12px; color: #9A8F86; padding: 8px 0; font-style: italic; } .co-rank-card { padding: 22px 24px; } .co-rank-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .co-rank-row { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 16px; padding: 14px 16px; background: #FBF8F4; border: 1px solid #EEE8DF; border-radius: 12px; } .co-rank-row:first-child { background: linear-gradient(135deg, #FDF6E9 0%, #FBF8F4 100%); border-color: #E5D4A8; } .co-rank-pos { display: flex; align-items: center; gap: 6px; color: #9A8F86; font-family: var(--sans, 'Inter', sans-serif); font-size: 13px; font-weight: 600; } .co-rank-medal { display: inline-flex; align-items: center; } .co-rank-name-top { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-rank-name-sub { font-size: 11.5px; color: #9A8F86; margin-top: 3px; } .co-rank-metric { text-align: right; min-width: 0; } .co-rank-metric-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: #9A8F86; text-transform: uppercase; margin-bottom: 3px; } .co-rank-metric-val { font-family: var(--serif); font-size: 15px; font-weight: 700; color: #1A1410; line-height: 1; white-space: nowrap; } .co-rank-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid #EEE8DF; font-size: 12px; color: #7A6F66; text-align: center; } /* ═══ 21. PRECIOS ═══ */ .pr-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; } .pr-header-left { display:flex; flex-direction:column; gap:2px; } .pr-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.12em; color:#766960; text-transform:uppercase; font-family:var(--mono); } .pr-title { font-family:var(--serif); font-size:36px; font-weight:700; color:#231D1A; line-height:1.05; margin:0; } .pr-subtitle { font-size:12px; color:#766960; margin:0; margin-top:2px; } .pr-save-btn { display: inline-flex; align-items: center; gap: 7px; background: #E8663A; color: #fff; border: none; border-radius: 22px; padding: 11px 20px; font-size: 13px; font-weight: 600; font-family: var(--sans); cursor: pointer; position: relative; overflow: hidden; transition: background .2s, box-shadow .2s; } .pr-save-btn:hover { background: #b35525; box-shadow: 0 4px 14px rgba(232,102,58,.32); } .pr-filter-bar { display:flex; gap:8px; align-items:center; margin-bottom:20px; } .pr-search-wrap { display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #E5E0DC; border-radius:10px; padding:0 12px; height:40px; width:280px; transition:border-color .15s; } .pr-search-wrap svg { color:#766960; flex-shrink:0; } .pr-search-input { border:none; background:transparent; flex:1; font-size:13px; color:#231D1A; outline:none; font-family:var(--sans); } .pr-filter-select { height:40px; padding:0 12px; border:1.5px solid #E5E0DC; border-radius:10px; background:#fff; color:#231D1A; font-family:var(--sans); font-size:13px; outline:none; cursor:pointer; transition:border-color .15s; } .pr-search-wrap:focus-within, .pr-filter-select:focus { border-color:#E8663A; box-shadow:0 0 0 3px rgba(232,102,58,.10); } .pr-group { margin-bottom:20px; } .pr-group-head { display:flex; align-items:center; gap:8px; padding:0 0 10px 0; margin-bottom:0; border-bottom:1.5px solid #E5E0DC; } .pr-group-title { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#766960; } .pr-group-count { font-family:var(--mono); font-size:10px; color:#E8663A; background:rgba(232,102,58,.1); border-radius:20px; padding:1px 7px; font-weight:600; } .pr-rows-wrap { border: 1.5px solid #E5E0DC; border-radius: 14px; overflow: hidden; background: #fff; } .pr-row { border-bottom: 1px solid #F2F0ED; background: #fff; } .pr-row-head { display:grid; grid-template-columns:1fr auto auto auto; gap:16px; align-items:center; padding:12px 16px; cursor:pointer; transition:background .1s; } .pr-row-head:hover, .pr-row.is-open .pr-row-head { background:#fdfcfb; } .pr-row-nombre { font-family:var(--sans); font-size:13px; font-weight:600; color:#231D1A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pr-row-meta { font-family:var(--sans); font-size:11px; color:#766960; white-space:nowrap; text-align:right; } .pr-row-toggle { font-family:var(--sans); font-size:11px; color:#766960; white-space:nowrap; display:flex; align-items:center; gap:5px; transition:color .12s; } .pr-row-head:hover .pr-row-toggle { color:#E8663A; } .pr-row-chevron { display:inline-block; transition:transform .2s; } .pr-row.is-open .pr-row-chevron { transform:rotate(180deg); } .pr-hist { display:none; border-top:1px solid #F2F0ED; background:#fdfcfb; } #chat-prod-picker.visible, #page-clientes .cli-layout, .pr-row.is-open .pr-hist { display:block; } .pr-hist-empty { padding:14px 16px; font-size:12px; color:#766960; font-family:var(--sans); } .pr-save-btn .pr-btn-label { display: inline-flex; align-items: center; gap: 7px; transition: opacity .22s ease, transform .30s cubic-bezier(.4,0,.2,1); will-change: transform, opacity; } .pr-save-btn .pr-btn-success { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mono); font-size: 8.5px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(210,240,220,.92); opacity: 0; transform: translateY(12px); transition: opacity .28s ease .08s, transform .34s cubic-bezier(.16,1,.3,1) .08s; pointer-events: none; will-change: transform, opacity; } .pr-save-btn .pr-btn-check { width: 17px; height: 17px; flex-shrink: 0; } .pr-btn-check-circle { transition: stroke-dashoffset .5s cubic-bezier(.16,1,.3,1); } .pr-btn-check-mark { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 0s; } .pr-save-btn.is-saving { transform: scale(.97); transition: transform .08s ease; } .pr-save-btn.is-success { background: var(--c-green, #22A55A); box-shadow: 0 4px 20px rgba(34,165,90,.35); transform: scale(1); transition: background .30s cubic-bezier(.16,1,.3,1), box-shadow .38s cubic-bezier(.16,1,.3,1), transform .18s ease; } .pr-save-btn.is-success .pr-btn-label { opacity:0; transform:translateY(-9px); } .pr-save-btn.is-success .pr-btn-success { opacity:1; transform:translateY(0); } .pr-save-btn.is-success .pr-btn-check-mark { stroke-dashoffset: 0; transition: stroke-dashoffset .38s cubic-bezier(.16,1,.3,1) .20s; } .pr-save-btn.is-returning { transition: background .50s ease, box-shadow .50s ease; } .pr-save-btn.is-returning .pr-btn-label { opacity:1; transform:translateY(0); transition: opacity .32s ease .12s, transform .38s cubic-bezier(.16,1,.3,1) .12s; } .pr-save-btn.is-returning .pr-btn-success { opacity:0; transform:translateY(12px); transition: opacity .18s ease, transform .26s cubic-bezier(.4,0,.6,1); } .pr-precio-input { font-family: var(--mono); font-size:15px; font-weight:700; color:#E8663A; background:transparent; border:1.5px solid transparent; border-radius:8px; padding:4px 8px; width:120px; text-align:right; outline:none; transition:border-color .15s, background .15s; -moz-appearance: textfield; } .pr-precio-input::-webkit-outer-spin-button, .pr-precio-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .pr-precio-input:focus { border-color:#E5E0DC; background:#fdfcfb; } .pr-precio-input.is-dirty { border-color:#E8663A; background:rgba(232,102,58,.06); color:#E8663A; } /* ═══ 22. CIERRE DE CAJA ═══ */ .cc-pago-filtro-btn { padding: 3px 9px; font-family: var(--sans); font-size: 10px; font-weight: 500; border: 1.5px solid var(--border-warm); border-radius: 20px; background: var(--paper); color: var(--ink-70); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .cc-pago-filtro-btn.on { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); } .cc-arqueo-val { font-family: var(--mono); font-weight: 500; color: var(--char); } ::placeholder, .cc-dif-neutral { color: var(--ink-70); } .cc-retiro-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .cc-comp-delta { font-size: 10px; font-family: var(--mono); padding: 2px 6px; border-radius: 6px; font-weight: 600; } .cc-comp-delta.up { background: rgba(34,165,90,.1); color: var(--green); } .cc-comp-delta.down { background: rgba(224,82,82,.1); color: var(--red); } .cc-comp-delta.flat { background: var(--paper-2); color: var(--ink-70); } /* ═══════════════════════════════════════════════════════════════ v7.70.0 · CIERRE DE CAJA — Confirmación operativa light (Legacy ceremonial eliminado — ver backup v7.69.0) ═══════════════════════════════════════════════════════════════ */ #page-cierre .cc-hero { background: radial-gradient(ellipse 120% 90% at 100% 0%, rgba(232,102,58,0.22) 0%, transparent 55%), radial-gradient(ellipse 80% 70% at 0% 100%, rgba(232,102,58,0.10) 0%, transparent 55%), linear-gradient(158deg, #1c1510 0%, #271d15 55%, #160f0b 100%); border: 1px solid rgba(232,102,58, 0.24); border-radius: 10px; box-shadow: 0 16px 40px rgba(26, 20, 16, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06); padding: 28px 28px 24px; position: relative; overflow: hidden; } #page-cierre .cc-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(232, 146, 74, 0.70) 35%, rgba(232, 146, 74, 0.90) 55%, rgba(232, 146, 74, 0.70) 75%, transparent 100% ); pointer-events: none; } #page-cierre .cc-pago-filtro-btn{ border-color: var(--line-strong); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(26, 20, 16, 0.04); border: 1px solid rgba(26, 20, 16, 0.10); color: var(--t3); border-radius: 4px; padding: 5px 10px; cursor: pointer; transition: background var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } #page-cierre .cc-pago-filtro-btn.on { background: var(--ember-bg); border-color: var(--ember-ln); color: var(--accent-warm); } #page-cierre .cc-top-item{ border-bottom-color: var(--line-soft); display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(26, 20, 16, 0.06); } #page-cierre .cc-top-name { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--t1); flex: 1; } #page-cierre .cc-arqueo-row{ border-bottom-color: var(--line-soft); display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(26, 20, 16, 0.06); } #page-cierre .cc-arqueo-val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; } #page-cierre .cc-btn-cerrar { width: 100%; background: var(--accent-warm); color: #fff; border: none; border-radius: 8px; padding: 15px 20px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 24px rgba(232,102,58, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.16); transition: background var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui), transform var(--motion-fast) var(--ease-ui); display: flex; align-items: center; justify-content: center; gap: 10px; } #page-cierre .cc-btn-cerrar:hover { background: #b05422; box-shadow: 0 12px 30px rgba(232,102,58, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18); transform: translateY(-1px); } #page-cierre .cc-btn-cerrar:active { transform: translateY(0) scale(0.98); box-shadow: 0 4px 12px rgba(232,102,58, 0.22); } #page-cierre .cc-btn-cerrar.is-closing { pointer-events: none; opacity: 0.85; } #page-cierre .cc-btn-preview{ border-color: var(--line-strong); font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(26, 20, 16, 0.04); border: 1px solid rgba(26, 20, 16, 0.12); color: var(--t3); border-radius: 6px; padding: 8px 14px; cursor: pointer; transition: background var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } #page-cierre .cc-btn-preview:hover { border-color: rgba(232,102,58, 0.30); color: var(--t1); background: rgba(232,102,58, 0.05); } body #page-cierre.section-core { background: var(--page); } #page-cierre.section-core .cc-hero { background: linear-gradient(162deg, #1e1712 0%, #2a2018 62%, #18120e 100%); border: 1px solid rgba(232,102,58, 0.28); box-shadow: 0 14px 34px rgba(26, 20, 16, 0.22); position: relative; overflow: hidden; } #page-cierre.section-core .cc-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 100% 0%, rgba(232,102,58,.22) 0%, transparent 58%), radial-gradient(90% 80% at 0% 100%, rgba(232,102,58,.12) 0%, transparent 55%); } #page-cierre.section-core .cc-hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,146,74,.65), transparent); pointer-events: none; } body #page-costos.section-core .costo-proj-budget-btn, body #page-costos.section-core .costo-alert-lim-btn, #page-cierre.section-core .cc-obs-save { background: var(--ink-dark); border-color: var(--ink-dark); color: var(--text-on-dark); } #page-cierre { padding: 28px 32px 48px; gap: 22px; background: var(--page); min-height: 100vh; box-sizing: border-box; } .cc2-empty-state { padding: 24px 0; text-align: center; color: var(--ink-70); font-size: 13px; } .cc2-hist-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; } #page-cierre .cc-obs-editor { margin: -2px 0 10px; padding: 14px 16px; background: #fdfcfb; border: 1px solid rgba(26, 20, 16, 0.07); border-radius: 12px; } #page-cierre .cc-obs-editor textarea { width: 100%; box-sizing: border-box; min-height: 72px; padding: 10px 12px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 10px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: #1A1410; resize: vertical; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } #page-cierre .cc-obs-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } #page-cierre .cc-obs-cancel, #page-cierre .cc-obs-save { padding: 8px 16px; border-radius: 10px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; border: 1px solid; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease; } #page-cierre .cc-obs-cancel { background: transparent; border-color: rgba(26, 20, 16, 0.10); color: rgba(26, 20, 16, 0.55); } #page-cierre .cc-obs-save { background: #1A1410; border-color: #1A1410; color: #F5EFE6; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10); } #page-cierre .cc-obs-save:hover { background: #2A1F18; box-shadow: 0 4px 14px rgba(26, 20, 16, 0.18); transform: translateY(-1px); } #page-cierre .cc3-page-head { margin-bottom: 36px; } #page-cierre .cc3-hero { position: relative; background: #FFFFFF; border: 1px solid rgba(26, 20, 16, 0.05); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); padding: 28px 30px 26px; overflow: hidden; isolation: isolate; } #page-cierre .cc3-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 18%, rgba(232,102,58, 0.04) 0%, transparent 38%), radial-gradient(circle at 92% 10%, rgba(26, 20, 16, 0.025) 0%, transparent 42%); pointer-events: none; z-index: 0; } #page-cierre .cc3-hero-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(34,165,90, 0.08); border: 1px solid rgba(34,165,90, 0.20); margin-bottom: 22px; font-family: var(--mono, "Inter", monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } #page-cierre .cc3-hero-status-meta { color: rgba(31, 122, 66, 0.65); font-weight: 600; letter-spacing: 0.10em; } #page-cierre .cc3-hero-status[data-state="cerrada"] { background: rgba(26, 20, 16, 0.04); border-color: rgba(26, 20, 16, 0.10); } #page-cierre .cc3-hero-status[data-state="cerrada"] .cc3-hero-status-label, #page-cierre .cc3-hero-status[data-state="cerrada"] .cc3-hero-status-meta { color: rgba(26, 20, 16, 0.55); } #page-cierre .cc3-hero-status[data-state="pendiente"] { background: rgba(230, 126, 34, 0.08); border-color: rgba(230, 126, 34, 0.25); } #page-cierre .cc3-hero-status[data-state="pendiente"] .cc3-hero-status-label { color: #B85F12; } #page-cierre .cc3-hero-status[data-state="pendiente"] .cc3-hero-status-meta { color: rgba(184, 95, 18, 0.7); } #page-cierre .cc3-hero-delta { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(34,165,90, 0.08); border: 1px solid rgba(34,165,90, 0.18); color: #1F7A42; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; transform: translateY(-3px); } #page-cierre .cc3-hero-delta svg { width: 12px; height: 12px; flex-shrink: 0; } #page-cierre .cc3-hero-delta[data-state="negative"] { background: rgba(192, 57, 43, 0.07); border-color: rgba(192, 57, 43, 0.18); color: #B33323; } #page-cierre .cc3-hero-delta[data-state="neutral"] { background: rgba(26, 20, 16, 0.04); border-color: rgba(26, 20, 16, 0.08); color: rgba(26, 20, 16, 0.55); } #page-cierre .cc3-hero-stat { position: relative; padding-left: 14px; } #page-cierre .cc3-hero-stat::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(26, 20, 16, 0.10); } #page-cierre .cc3-hero-stat:first-child { padding-left: 0; } #page-cierre .cc3-action { position: relative; background: #1A1410; color: #F5EFE6; border: 1px solid #1A1410; border-radius: var(--radius-lg); padding: 24px 26px 22px; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10), 0 8px 24px rgba(26, 20, 16, 0.10); overflow: hidden; isolation: isolate; } #page-cierre .cc3-action::before { content: ""; position: absolute; top: -40%; right: -20%; width: 60%; height: 80%; background: radial-gradient(ellipse, rgba(232,102,58, 0.18) 0%, transparent 60%); pointer-events: none; z-index: 0; } #page-cierre .cc3-action-sub { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: rgba(245, 239, 230, 0.55); line-height: 1.5; margin: 0 0 18px 0; } #page-cierre .cc3-action-sub strong { color: #F5EFE6; font-weight: 600; } #page-cierre .cc3-action-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px; background: #F5EFE6; color: #1A1410; border: 1px solid #F5EFE6; border-radius: 11px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.20), 0 0 0 0 rgba(245, 239, 230, 0); transition: background 0.16s ease, box-shadow 0.20s ease, transform 0.14s ease; } #page-cierre .cc3-action-cta:hover { background: #FFFFFF; box-shadow: 0 4px 14px rgba(26, 20, 16, 0.35), 0 0 0 4px rgba(245, 239, 230, 0.08); transform: translateY(-1px); } #page-cierre .cc3-action-cta:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } #page-cierre .cc3-action-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(245, 239, 230, 0.08); } #page-cierre .cc3-action-foot-meta { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; color: rgba(245, 239, 230, 0.75); text-transform: capitalize; font-variant-numeric: tabular-nums; } #page-cierre .cc3-anatomy-row { display: grid; gap: 16px; margin-bottom: 16px; } #page-cierre .cc3-anatomy-head { padding: 24px 28px 18px; border-bottom: 1px solid rgba(26, 20, 16, 0.06); } #page-cierre .cc3-anatomy-head-tight { padding: 20px 24px 14px; } #page-cierre .cc3-anatomy-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } #page-cierre .cc3-anatomy-eyebrow { font-family: var(--mono, "Inter", "IBM Plex Mono", monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42); margin-bottom: 8px; } #page-cierre .cc3-anatomy-title { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -0.018em; color: #1A1410; margin: 0 0 4px 0; line-height: 1.18; } #page-cierre .cc3-anatomy-title-sm { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: #1A1410; margin: 0; line-height: 1.2; } #page-cierre .cc3-anatomy-sub { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 13px; font-weight: 400; color: rgba(26, 20, 16, 0.55); margin: 0; letter-spacing: -0.005em; } #page-cierre .cc3-anatomy-sub-sm { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12px; font-weight: 400; color: rgba(26, 20, 16, 0.55); margin: 4px 0 0 0; letter-spacing: -0.005em; } #page-cierre .cc3-sub-eyebrow { font-family: var(--mono, "Inter", monospace); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42); margin-bottom: 14px; } #page-cierre .cc3-sub-eyebrow-spaced { margin-top: 22px; } #page-cierre .cc3-arqueo-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; } #page-cierre .cc3-arqueo-grid > section { padding: 22px 28px 26px; } #page-cierre .cc3-medios-body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } #page-cierre .cc3-donut-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } #page-cierre .cc3-medios-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; display: flex; flex-direction: column; } #page-cierre .cc3-medios-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(26, 20, 16, 0.06); } #page-cierre .cc3-medios-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc-dot-color, #1A1410); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-dot-color, #1A1410) 14%, transparent); flex-shrink: 0; } #page-cierre .cc3-medios-amount { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: #1A1410; font-variant-numeric: tabular-nums; } #page-cierre .cc3-arqueo-val, #page-cierre .cc3-arqueo .cc-arqueo-val { font-family: var(--serif); font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; color: #1A1410; font-variant-numeric: tabular-nums; } #page-cierre .cc3-arqueo-row-strong .cc3-arqueo-val { font-size: 16.5px; } #page-cierre .cc3-arqueo-row-diff .cc3-arqueo-label { color: #1A1410 !important; font-weight: 600 !important; } #page-cierre .cc3-arqueo-row-diff .cc3-arqueo-val, #page-cierre .cc3-arqueo-row-diff #cc-arq-dif { font-size: 17px; transition: color 0.18s ease; } #page-cierre .cc-dif-neutral { color: rgba(26, 20, 16, 0.42) !important; } #page-cierre .cc-dif-positivo { color: #B47800 !important; } #page-stock .sk-kpi-num.is-crit, #page-movimientos .mv2-kpi-num.is-crit, #page-cierre .cc-dif-negativo { color: #C0392B !important; } #page-cierre .cc3-arqueo-row-input { align-items: center; } #page-cierre .cc3-arqueo-input-prefix { position: absolute; left: 12px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 13px; font-weight: 500; color: rgba(26, 20, 16, 0.42); pointer-events: none; } #page-cierre .cc3-arqueo-input-text { padding-left: 12px; text-align: left; width: auto; flex: 1; } #page-cierre .cc3-arq-retiros { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(26, 20, 16, 0.08); } #page-cierre .cc3-arq-retiros-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .cc-retiro-btns, #page-cierre .cc3-arq-retiros-form .cc-retiro-btns { display: flex; gap: 8px; justify-content: flex-end; } #page-cierre .cc3-retiro-toggle-btn svg { width: 13px; height: 13px; flex-shrink: 0; } #page-cierre .cc3-btn-ghost { padding: 8px 14px; background: transparent; border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 8px; color: rgba(26, 20, 16, 0.65); font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease; } #page-cierre .cc-obs-cancel:hover, #page-cierre .cc3-btn-ghost:hover { background: rgba(26, 20, 16, 0.04); border-color: rgba(26, 20, 16, 0.18); color: #1A1410; } #page-cierre .cc3-btn-prime { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: #1A1410; color: #F5EFE6; border: 1px solid #1A1410; border-radius: 8px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; box-shadow: 0 1px 2px rgba(26, 20, 16, 0.10); transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.18s ease; } #page-cierre .cc3-btn-prime:hover { background: #2A1F18; box-shadow: 0 4px 14px rgba(26, 20, 16, 0.22); transform: translateY(-1px); } #page-cierre .cc-obs-save:active, #page-cierre .cc3-action-cta:active, #page-cierre .cc3-btn-prime:active { transform: scale(0.98); } #page-cierre .cc3-anatomy-count { font-family: var(--mono, "Inter", monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; color: rgba(26, 20, 16, 0.42); text-transform: uppercase; white-space: nowrap; } #page-cierre .cc3-ventas-body > [class*="-row"]:hover { background: rgba(26, 20, 16, 0.02); } #page-cierre .cc3-ventas-foot { padding: 14px 24px; border-top: 1px solid rgba(26, 20, 16, 0.06); background: rgba(26, 20, 16, 0.015); } #page-cierre .cc3-ranking-body { padding: 12px 24px 20px; display: flex; flex-direction: column; } #page-cierre .cc3-ranking-body > .cc2-empty { padding: 24px 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 13px; color: rgba(26, 20, 16, 0.42); } #page-cierre .cc3-nota-input { width: calc(100% - 48px); margin: 4px 24px 24px; padding: 14px 16px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 12px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 13.5px; font-weight: 400; letter-spacing: -0.005em; color: #1A1410; line-height: 1.55; resize: vertical; min-height: 92px; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.18s ease; } #page-cierre .cc3-comp-stats { display: flex; gap: 14px; align-items: flex-start; } #page-cierre .cc3-comp-stat { display: flex; flex-direction: column; gap: 5px; min-width: 120px; padding: 12px 16px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.06); border-radius: 11px; } .mv2-dd-label, #page-cierre .cc3-comp-stat-label { color: rgba(26, 20, 16, 0.42); font-family: var(--mono, "Inter", monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .trf-prod-row.added .trf-prod-cta, .trf-history-loc.dest, #page-cierre .cc3-hero-status-label, #page-cierre .cc3-comp-stat-val[data-state="positive"] { color: #1F7A42; } #page-cierre .cc3-comp-stat-val[data-state="negative"] { color: #B33323; } #page-cierre .cc3-comp-stat-val[data-state="neutral"] { color: rgba(26, 20, 16, 0.42); } #page-cierre .cc3-comp-body { position: relative; padding: 22px 24px 26px; } #page-cierre .cc3-comp-chart { width: 100%; display: flex; justify-content: center; } #page-cierre .cc3-comp-svg { width: 100%; max-width: 880px; height: auto; overflow: visible; } #page-cierre .cc3-comp-empty { padding: 60px 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: rgba(26, 20, 16, 0.42); } #page-cierre .cc3-comp-col { cursor: pointer; transition: opacity 0.18s ease; } #page-cierre .cc3-comp-col:hover .cc3-comp-rect { opacity: 0.85; } #page-cierre .cc3-comp-tooltip { position: absolute; z-index: 20; pointer-events: none; transform: translate(-50%, -100%); background: #1A1410; color: #F5EFE6; border: 1px solid rgba(245, 239, 230, 0.10); border-radius: 10px; padding: 10px 14px; min-width: 160px; box-shadow: 0 12px 32px rgba(26, 20, 16, 0.30), 0 4px 10px rgba(26, 20, 16, 0.18); font-family: var(--sans, "Inter", system-ui, sans-serif); animation: cc3CompTooltipIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); } #page-cierre .cc3-comp-tooltip::after { content: ""; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; width: 10px; height: 10px; background: #1A1410; transform: rotate(45deg); border-right: 1px solid rgba(245, 239, 230, 0.10); border-bottom: 1px solid rgba(245, 239, 230, 0.10); } #page-cierre .cc3-comp-tooltip-day { font-family: var(--mono, "Inter", monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 239, 230, 0.55); margin-bottom: 4px; } #page-cierre .cc3-comp-tooltip-monto { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.018em; color: #F5EFE6; font-variant-numeric: tabular-nums; margin-bottom: 2px; } #page-cierre .cc3-comp-tooltip-meta { font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11.5px; font-weight: 500; color: rgba(245, 239, 230, 0.70); } #page-cierre .cc3-context-comp, #page-cierre .cc3-context-hist { margin-bottom: 16px; } #page-cierre .cc3-hist-search svg { position: absolute; left: 12px; width: 14px; height: 14px; color: rgba(26, 20, 16, 0.42); pointer-events: none; } #page-cierre .cc-obs-editor textarea:focus, #page-cierre .cc3-arqueo-input:focus, #page-cierre .cc3-nota-input:focus, #page-cierre .cc3-hist-search input:focus { background: #FFFFFF; border-color: rgba(232,102,58, 0.45); box-shadow: 0 0 0 3px rgba(232,102,58, 0.10); outline: none; } #page-cierre .cc3-hist-empty { padding: 48px 24px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: rgba(26, 20, 16, 0.42); } #page-cierre .cc3-hist-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 14px 24px; border-bottom: 1px solid rgba(26, 20, 16, 0.04); cursor: pointer; transition: background 0.14s ease; } #page-cierre .cc3-hist-row:hover { background: rgba(26, 20, 16, 0.025); } #page-cierre .cc3-hist-date-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 60px; flex-shrink: 0; background: rgba(26, 20, 16, 0.04); border: 1px solid rgba(26, 20, 16, 0.06); border-radius: 11px; padding: 6px 4px; transition: background 0.14s ease, border-color 0.14s ease; } #page-cierre .cc3-hist-row:hover .cc3-hist-date-pill { background: #FFFFFF; border-color: rgba(26, 20, 16, 0.12); } #page-cierre .cc3-hist-date-day { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.020em; color: #1A1410; line-height: 1; } #page-cierre .cc3-hist-date-mon { font-family: var(--mono, "Inter", monospace); font-size: 8px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.55); margin-top: 1px; } #page-cierre .cc3-hist-date-week { font-family: var(--mono, "Inter", monospace); font-size: 7.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 20, 16, 0.32); margin-top: 4px; } #page-cierre .cc3-hist-title { font-family: var(--serif); font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; color: #1A1410; line-height: 1.25; text-transform: capitalize; } #page-cierre .cc3-hist-year { color: rgba(26, 20, 16, 0.42); font-weight: 400; } #page-cierre .cc3-hist-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12px; font-weight: 500; color: rgba(26, 20, 16, 0.55); letter-spacing: -0.005em; } #page-cierre .cc3-hist-meta-item { white-space: nowrap; } #page-cierre .cc3-hist-sep { color: rgba(26, 20, 16, 0.24); } #page-cierre .cc3-hist-meta-tag { display: inline-flex; align-items: center; font-family: var(--mono, "Inter", monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,102,58, 0.85); } #page-cierre .cc3-hist-medios { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; } #page-cierre .cc3-hist-medio-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-dot-color, #1A1410); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-dot-color, #1A1410) 14%, transparent); flex-shrink: 0; } #page-cierre .cc3-hist-medio-amt { font-family: var(--mono, "Inter", monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgba(26, 20, 16, 0.65); font-variant-numeric: tabular-nums; } .mvd-item-right, #page-cierre .cc3-hist-amounts { align-items: flex-end; display: flex; flex-direction: column; flex-shrink: 0; gap: 4px; } #page-cierre .cc3-hist-total { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.018em; color: #1A1410; font-variant-numeric: tabular-nums; } #page-cierre .cc3-hist-diff { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-family: var(--mono, "Inter", monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } #page-cierre .cc3-hist-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; opacity: 0; transform: translateX(6px); transition: opacity 0.18s ease, transform 0.18s ease; } #page-cierre .cc3-hist-row:hover .cc3-hist-actions, #page-cierre .cc3-hist-row:focus-within .cc3-hist-actions, #page-cierre .cc3-hist-actions:has(.has-obs) { opacity: 1; transform: translateX(0); } #page-cierre .cc3-hist-act { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 8px; color: rgba(26, 20, 16, 0.55); cursor: pointer; padding: 0; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease; } #page-cierre .cc3-hist-act:hover { background: #FFFFFF; transform: translateY(-1px); } #page-cierre .cc3-hist-act-edit:hover { border-color: rgba(26, 20, 16, 0.32); color: #1A1410; } #page-cierre .cc3-hist-act-del:hover { border-color: #C0392B; color: #C0392B; } #page-cierre .cc3-hist-act-obs:hover { border-color: rgba(232,102,58, 0.55); color: #E8663A; } #page-cierre .cc3-hist-act-obs.has-obs { border-color: rgba(232,102,58, 0.45); color: #E8663A; background: rgba(232,102,58, 0.06); } #page-cierre .cc3-hist-obs-editor { margin: 0 24px 12px 92px; padding: 14px 16px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 11px; } #page-cierre .cc3-hist-obs-editor textarea { width: 100%; min-height: 64px; padding: 10px 12px; background: #FFFFFF; border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 8px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 13px; color: #1A1410; resize: vertical; margin-bottom: 10px; } #page-cierre .cc3-hist-obs-editor textarea:focus { outline: none; border-color: rgba(232,102,58, 0.45); box-shadow: 0 0 0 3px rgba(232,102,58, 0.10); } #page-cierre.section-core #cc-total-dia, #page-cierre.section-core #cc-ticket-prom, #page-cierre.section-core #cc-desc-dia, #page-cierre.section-core #cc-clientes-dia, #page-cierre.section-core #cc-total-ambos{ color: #1A1410; position: relative; z-index: 1; text-shadow: none; } #page-cierre .cc3-anatomy-ventas { display: flex; flex-direction: column; height: 560px; } #page-cierre .cc3-ventas-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 6px 0 8px; } #page-cierre .cc3-ventas-body{ display: flex; flex-direction: column; padding: 0; } #page-cierre .cc3-ventas-body > .cc2-row, #page-cierre .cc3-ventas-body > .cc2-row-wrap > .cc2-row { padding: 14px 24px; border-radius: 0; border-bottom: 1px solid rgba(26, 20, 16, 0.05) !important; } #page-cierre .cc3-ventas-body > .cc2-row-wrap > .cc2-row-detail { padding: 14px 24px 16px 76px; background: rgba(26, 20, 16, 0.02) !important; border-bottom: 1px solid rgba(26, 20, 16, 0.05) !important; border-radius: 0; margin: 0; } #page-cierre .cc3-ventas-body .cc2-row-clickable:hover, #page-cierre .cc3-ventas-body .cc2-row-clickable.is-open { background: rgba(26, 20, 16, 0.025) !important; border-radius: 0; } #page-cierre .cc3-ventas-body > .cc2-empty-state, #page-cierre .cc3-ventas-body > .cc3-anatomy-empty { padding: 64px 24px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: rgba(26, 20, 16, 0.42); } #page-cierre .cc3-ventas-foot-fixed { flex-shrink: 0; padding: 16px 24px; background: #FFFFFF; border-top: 1px solid rgba(26, 20, 16, 0.08); box-shadow: 0 -1px 0 rgba(26, 20, 16, 0.02); border-radius: 0 0 18px 18px; } #page-cierre .cc3-ventas-foot-fixed .cc2-list-foot { display: flex; justify-content: space-between; align-items: center; padding: 0; border-top: none !important; margin: 0; } #page-cierre .cc3-ventas-foot-fixed .cc2-list-foot-label { font-family: var(--mono, "Inter", monospace) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.42) !important; } #page-cierre .cc3-ventas-foot-fixed .cc2-list-foot-total { font-family: var(--serif) !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.018em; color: #1A1410 !important; font-variant-numeric: tabular-nums; } #page-cierre .cc3-anatomy-row-2col{ grid-template-columns: 1.15fr 1fr; align-items: stretch; } #page-clientes .cd-hist-list, .trf-route-field, #page-costos.active, .co-header-left, #page-cierre.active, #page-cierre .cc3-arqueo-rows, #page-cierre .cc3-anatomy-nota, #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking { display: flex; flex-direction: column; } #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body { flex: 1; overflow-y: auto; min-height: 0; } /* ── 4. Category pills ── */ /* ── 5. Product cards ── */ /* ── 6. Cart rows ── */ /* ── 7. Cart badge (item count) ── */ /* ── 8. Stepper buttons ── */ /* ── 9. Delete button ── */ /* ── 10. Vaciar carrito button ── */ #page-clientes .cd-prime:hover { transform: translateY(-1px); } /* ── Subtotal: sutil, profesional ── */ /* ── Total principal (columna carrito): grande, dramático ── */ /* ── Total resumen (panel derecho): elegante ── */ /* ── Glow ring debajo del total al cambiar ── */ /* ── 20. Confirmar button ── */ /* ── 21. Obs toggle ── */ /* ── 22. Tipocliente toggle ── */ /* ── 23. Scrollbar fade ── */ /* ── 24. Cart empty state ── */ /* ── 25. Location chip ── */ .mv-table tbody tr:last-child td, .vc2-table tbody tr:last-child, .costo-comp-row:last-child { border-bottom:none; } .costo-comp-vals { align-items:center; display:flex; gap:10px; } .crp-body { flex:1; min-width:0; } /* v7.19.0: hover sobre pill activo = previsualizar deselección */ /* Mismo patrón para los botones de medio de pago */ /* Hint pulse when no payment method selected */ /* v7.19.0: cuando el pago está 100% cubierto por caja del cliente */ /* (grid-template moved to VR Redesign block below) */ /* Active pago btn inherits per-method colored styles — no crude override needed */ .dash-tl-right { flex-shrink: 0; text-align: right; } /* (vr-rpanel, vr-cols, vr-right-scroll moved to VR Redesign block below) */ /* ── Split toggle button ── */ /* ── Split section — redesigned card ── */ /* ── Split block (each medio) ── */ /* ── Monto stack (label above input) ── */ /* ── Monto auto (segundo medio — read-only) ── */ /* ── Divider ── */ /* ── Grid 2 ── */ .tb-relocated { margin: 0 !important; } /* ── Warning ── */ /* (product card overrides moved to VR Redesign block below) */ /* ── VR Redesign: 3-column compact layout ── */ /* ── Products: slim left panel, list view ── */ .tb-action-zone .v3-tb-export svg, #page-stock .sk-table-wrap .btn-icon svg { height: 12px !important; width: 12px !important; } /* ── Cart: center column, flex col ── */ /* Cart headers + rows: flexible columns that stretch with available space */ .tb-action-zone .mv2-filters { gap: 8px !important; } /* ── Totals compact ── */ /* ── Confirmar button ── */ /* ── Right panel: client, discounts, payment ── */ /* ═══ 24. PEDIDO ═══ */ .pedido-header-box { background: var(--card-bg-alt); border: var(--card-border); border-radius: var(--card-radius); padding: 16px 20px; margin-bottom: 20px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .pedido-info-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-70); font-weight: 500; } .pedido-info-val { font-family: var(--mono); font-size: 13px; color: var(--char); font-weight: 500; } .pedido-whatsapp-box { background: rgba(34,165,90, 0.06); border: 1.5px solid rgba(34,165,90, 0.2); border-radius: var(--r2); padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pedido-wa-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); font-weight: 600; margin-bottom: 4px; } .pedido-wa-input { background: var(--paper); border: 1.5px solid rgba(34,165,90, 0.25); color: var(--char); padding: 8px 10px; font-family: var(--mono); font-size: 12px; outline: none; border-radius: var(--r); transition: border-color 0.15s; width: 220px; } .pedido-wa-input:focus { border-color: rgba(34,165,90, 0.5); } .pedido-wa-sub { font-size: 10px; color: var(--ink-82); margin-top: 3px; } .pedido-table-wrap { border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; background: var(--card-bg); margin-bottom: 20px; } tbody tr:hover td, body #page-costos.section-core .costo-table tbody tr:hover td, .pedido-table-wrap th { background: var(--paper-2); } .pedido-notice { background: rgba(232,102,58, 0.08); border: 1.5px solid rgba(232,102,58, 0.28); border-radius: var(--r2); padding: 12px 16px; font-size: 12px; color: var(--ink-82); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } /* ═══ 25. @MEDIA QUERIES ═══ */ @media (max-width: 640px) { #page-stock .table-wrap { max-height: none; } #page-stock th:first-child, #page-stock td:first-child { position: static; } #page-stock .stock-prod-name { font-size: 15px; line-height: 1.2; } } @media (max-width: 820px) { #page-stock .table-wrap { max-height: 60vh !important; } } @media (max-width: 960px) { } @media (max-width: 1100px) { #page-movimientos .mov-inspector { width: 320px !important; right: -330px !important; } } @media (max-width: 900px) { } @media (max-width: 640px) { #page-movimientos .mov-inspector { display: none !important; } } @media (max-width: 600px) { #toast-c { top: 12px; gap: 8px; } } @media (max-width: 960px) { #sidebar { position: fixed; left: -270px; top: 0; bottom: 0; z-index: var(--z-nav); width: 260px !important; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; } #sidebar.open { left: 0; box-shadow: 4px 0 32px rgba(26, 20, 16, 0.35); } #sidebar-backdrop.open { display: block; } #main { margin-left: 0 !important; } .page { padding: 36px 18px 80px !important; } /* Page header */ .ph { flex-wrap: wrap; gap: 10px; } /* Forms */ .form-row { grid-template-columns: 1fr; } /* Pedido table */ .pedido-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pedido-table-wrap table { min-width: 560px; } /* Modal */ .modal { width: 94vw; max-width: 94vw; } /* Chat */ .chat-topbar { padding: 12px 16px; flex-wrap: wrap; gap: 8px; } .chat-body { padding: 16px; } .chat-footer { padding: 10px 16px; } /* Stats period buttons */ .ph > div:last-child { flex-wrap: wrap; } /* ── DASHBOARD RESPONSIVE ── */ } @media (max-width: 600px) { /* Nota + Tareas: apilar en mobile */ #page-dashboard > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } .topbar { padding: 0 10px; gap: 8px; } /* Mobile: en la topbar solo se ve logo WAGON/Engine + dropdown del menú. Todas las acciones de la derecha (Venta rápida, local, usuario, chrome switch, rt-pill, logout) quedan accesibles desde el dropdown de secciones. !important necesario porque .topbar-right { display:flex } está declarado sin media query más adelante en el archivo (línea ~11806) y gana por orden. */ .topbar-right { display: none !important; } /* v7.99.36 · El switch de tema (oculto con .topbar-right) reaparece en el dropdown footer */ /* Menú de secciones alineado a la derecha (topbar-right oculto en mobile) */ .tb-nav-center { justify-content: flex-end !important; } .page { padding: 32px 12px 72px !important; } /* Page header full width */ .ph { flex-direction: column; align-items: flex-start; } .ph .btn-prime, .ph .btn-ghost { width: 100%; justify-content: center; } /* Modal: slide desde abajo */ #modal-overlay { position: fixed; inset: 0; background: radial-gradient(120% 120% at 50% 50%, rgba(232,102,58, 0.08) 0%, rgba(232,102,58, 0) 58%), linear-gradient(180deg, rgba(24, 18, 14, 0.56), rgba(24, 18, 14, 0.48)); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal { width: 100vw; max-width: 100vw; height: auto; min-height: 0; max-height: 92dvh; border-radius: 24px 24px 0 0; animation: slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; /* hidden para que el body sea quien scrollee */ display: flex; flex-direction: column; } .modal-head { padding: 22px 18px 16px; } .modal-head h3 { font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: 0.01em; color: var(--char); text-align: center; } .modal-body { padding: 18px; overflow-y: auto; /* scroll real en mobile */ min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .modal-foot { padding: 12px 18px 16px; } @keyframes slide-up { from { transform: translateY(100%); opacity: 0.5; } to { transform: none; opacity: 1; } } /* Forms */ .form-row { grid-template-columns: 1fr; } .qty-row { flex-wrap: wrap; } /* Chat */ .chat-topbar { padding: 10px 12px; } .chat-topbar h2 { font-size: 15px; } .chat-topbar > div:last-child { flex-wrap: wrap; gap: 6px; } .chat-body { padding: 12px; } .chat-footer { padding: 8px 12px; } /* Pedido */ .pedido-header-box { grid-template-columns: 1fr 1fr; gap: 12px; } .pedido-whatsapp-box { flex-direction: column; align-items: stretch; } .pedido-whatsapp-box > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; } .pedido-whatsapp-box .btn-ghost, .pedido-whatsapp-box .btn-prime { flex: 1; justify-content: center; font-size: 10px; } .qty-row select, .pedido-wa-input { width: 100%; } /* Precios */ } @media (max-width: 960px) { #urgente-banner, #urgente-flash { left: 0; } } @media (max-width: 600px) { .chat-toast { right: 16px; bottom: 80px; width: calc(100vw - 32px); } } @media (prefers-reduced-motion: reduce) { .chat-toast { animation: none; opacity: 1; transform: none; } } @media (max-width: 640px) { #alerta-venc-overlay { padding-left: 12px; padding-right: 12px; padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); align-items: flex-end; } #alerta-venc-panel { width: 100%; max-height: calc(100vh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))); border-radius: 18px 18px 0 0; } .av-head, .av-body, .av-foot { padding-left: 14px; padding-right: 14px; } .av-item { grid-template-columns: 10px 1fr; gap: 10px; align-items: start; } .av-badge { margin-top: 6px; justify-self: start; } } @media (max-width: 600px) { .cc-comp-delta { font-size: 9px; padding: 2px 5px; } .cc-pago-filtro-btn { font-size: 10px; padding: 3px 8px; } #chat-float-panel { width: 100vw; } .cf-head { padding: 14px 16px 12px; } .cf-head-title { font-size: 16px; } .cf-body { padding: 14px 14px; gap: 12px; } #chat-float-btn { right: 16px; bottom: 16px; width: 48px; height: 48px; } #chat-float-btn svg { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { #chat-float-panel { transition: opacity 0.18s ease; } #chat-float-panel.hidden { transform: translateX(0); opacity: 0; } } @media (max-width:640px) { .costo-cal-day { min-height:32px; } } @media (max-width: 960px) { } @media (max-width: 600px) { #page-dashboard .dash-time { font-size: 28px; } #page-dashboard .dash-status-dot { font-size: 9px; padding: 3px 7px; } .chat-topbar .tag, #page-dashboard #ds-sparkline { display: none; } #page-dashboard #ds-medios { gap: 4px; margin-top: 7px; } #page-dashboard .nota-item { padding-left: 10px; padding-right: 10px; } } @media (max-width: 640px) { #page-carga .ph { padding: 0 0 16px 0; } #page-carga #carga-tabla-wrap { border-radius: 8px; } #page-carga #carga-tabla-content table { min-width: 920px; } #page-carga > div:has(#carga-local) { padding: 12px !important; border-radius: 8px; } #page-carga > div:has(#carga-base-global) { padding: 13px 14px !important; border-radius: 8px !important; } } @media (prefers-reduced-motion: reduce) { #page-clientes .btn-icon { transition: none; } } @media (max-width: 640px) { #page-clientes .ph { padding: 11px 11px; border-radius: var(--r); } } @media (max-width: 1100px) { #pages { border-top-left-radius: 0; } } @media (max-width: 960px) { #page-dashboard .dash-time, #page-dashboard.dashboard-core .dash-time { font-size: 34px; } } @media (max-width: 600px) { #page-dashboard .dash-panel, #page-dashboard.dashboard-core .dash-panel { border-radius: var(--radius-md); } } @media (max-width: 960px) { #menu-toggle{ display: flex; margin-right: 10px; } .topbar-right{ gap: 8px; margin-left: auto; } } @media (max-width: 600px) { #menu-toggle { margin-right: 8px; } } @media (hover: none), (pointer: coarse) { .ni[data-tip]::before, .ni[data-tip]::after { content: none; display: none !important; } } @media (max-width: 720px) { #page-dashboard .dash-venc-head, #page-dashboard .dash-venc-row { grid-template-columns: 1.2fr .8fr .45fr; } } @media (max-width: 900px) { #page-dashboard { padding: 12px; } } @media (max-width: 760px) { #page-dashboard .dash-venc-head { display: none; } #page-dashboard .dash-venc-row { grid-template-columns: 1fr; gap: 5px; padding: 8px 10px; } #page-dashboard .dash-venc-days { text-align: left; } } @media (prefers-reduced-motion: reduce) { } @media (max-width: 900px) { body #page-costos.section-core { --cos-gap: 14px; --cos-pad-x: 18px; } body #page-costos.section-core .costo-table-card, body #page-costos.section-core #costo-quick-section, body #page-costos.section-core .costo-quick-section { padding-left: var(--cos-pad-x); padding-right: var(--cos-pad-x); } } @media (max-width: 1200px) { #page-dashboard.page, .page#page-dashboard{ padding: 48px 48px 48px !important; } .nd-body{ grid-template-columns: 1fr 290px; } .nd-mix-donut { width: 110px; height: 110px; } } @media (max-width: 960px) { #page-dashboard.page, .page#page-dashboard { padding: 32px 24px 40px !important; } .nd-date { font-size: 12px; } /* Body: una sola columna */ .nd-body { grid-template-columns: 1fr; gap: 16px; } /* Columna lateral pasa a grilla 2 cols */ .nd-col-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } /* El primer card (mix) ocupa ancho completo */ .nd-col-side > .nd-card:first-child { grid-column: 1 / -1; } /* Donut mix más pequeño */ .nd-mix-donut { width: 100px; height: 100px; } } @media (max-width: 640px) { #page-dashboard.page, .page#page-dashboard { padding: 20px 16px 32px !important; } /* Cards */ .nd-card { padding: 16px; } .nd-card-title { font-size: 15px; } /* Ventas recientes: avatar más pequeño + grid reducido para evitar overflow */ } @media (max-width: 768px) { /* v7.24.0 · Topbar mobile limpio: solo hamburguesa + controles de sección + campana. Ocultar logo WAGON, separador y "Engine" SOLO dentro de .topbar > .tb-brand. Los mismos elementos dentro del sidebar (.tb-nav-dropdown .sb-brand) NO se tocan. */ /* tb-brand queda solo con el hamburger — reducir gap y margin */ .tb-brand { gap: 0; margin-right: 6px; } /* tb-action-zone: overflow VISIBLE para que los dropdowns no se corten */ /* tb-action-scroll-inner: scroll horizontal sin mask-image. mask-image crearía un stacking context que convierte position:fixed hijos en relativos al inner — los dropdown menus quedarían mal posicionados. */ .tb-action-scroll-inner { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; } /* Fade de affordance: div hermano inyectado por JS (.tb-action-fade). Está en #tb-action-zone (overflow: visible) → no recorta ni crea stacking context. pointer-events: none para no bloquear clicks en los controles. */ #tb-action-zone { flex: 1 !important; max-width: none !important; overflow: visible !important; position: relative; } .tb-action-fade { position: absolute; right: 0; top: 0; bottom: 0; width: 32px; background: linear-gradient(to right, transparent 0%, #fdfcfb 100%); pointer-events: none; z-index: 2; flex-shrink: 0; } /* Los items del inner no se encogen */ .tb-action-scroll-inner > * { flex-shrink: 0; } /* Buscadores: tamaño fijo razonable para dejar controles visibles al lado */ .tb-action-scroll-inner .sk-search-wrap, .tb-action-scroll-inner .mv2-search-wrap, .tb-action-scroll-inner .v3-tb-search, .tb-action-scroll-inner .pr-search-wrap, .tb-action-scroll-inner .cli-master-bar { flex: 0 0 160px !important; min-width: 0 !important; } /* Topbar más compacto horizontalmente */ .topbar { gap: 8px; padding: 0 14px; } .tb-nav-dropdown.open { transform: translateX(0); } #main { margin-left: 0 !important; width: 100% !important; } .tb-brand, .tb-mobile-menu, .nav-handle { display: flex; } } @media (max-width:800px) { .vc2-table { min-width:700px; } } @media (max-width: 760px) { .cli-master-bar { flex-wrap:wrap; } .cli-master-bar input { flex:1 1 100%; } .cli-btn-new { margin-left:0; } } @media (max-width: 900px) { .cli-btn-new { margin-top: 0; } .cli-controls { flex-direction: column; align-items: stretch; } .cli-master-bar input { flex: 1 1 auto; width: 100%; } } @media (max-width: 820px) { } @media (max-width: 960px) { #page-stock { padding: 48px 32px 40px !important; } .sk-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sk-title { font-size: 32px; } } @media (max-width: 640px) { #page-stock { padding: 32px 14px 72px !important; } .sk-header { margin-bottom: 18px; } .sk-header-right .sk-btn-primary { flex: 1; justify-content: center; white-space: nowrap; padding: 9px 10px; font-size: 12px; } .sk-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; margin-bottom: 16px; } .sk-kpi-card { padding: 14px 14px; border-radius: var(--radius-md); min-width: 0; } .sk-filter-bar { padding: 12px 12px; border-radius: 12px; } .sk-filter-top { flex-wrap: wrap; gap: 8px; } .sk-search-wrap, .sk-sucursal-wrap { flex: 1 1 100%; min-width: 0; } .sk-filter-bottom { gap: 10px; } .sk-fpill { padding: 5px 10px; font-size: 11px; } .sk-table-wrap { border-radius: 10px; } /* Primera columna (PRODUCTO) sticky: fondo opaco + sombra para no superponerse */ #page-stock .sk-table-wrap th:first-child, #page-stock .sk-table-wrap td:first-child, #page-stock th:first-child, #page-stock td:first-child { background: #fff !important; z-index: 3; box-shadow: 2px 0 6px rgba(26,20,16,0.06); } #page-stock .sk-table-wrap thead th:first-child { background: #fff !important; z-index: 4; } #page-stock .sk-table-wrap tbody tr:hover td:first-child { background: #fdfcfa !important; } #page-stock .sk-table-wrap tbody tr.stock-lotes-row td:first-child { background: #fafaf7 !important; } /* Filters: apilados verticales */ .mv-pill { font-size: 11.5px; padding: 5px 10px; } /* Tabla: scroll horizontal dentro del card */ .mv-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } .mv-table { min-width: 640px; } /* fuerza scroll horizontal si viewport < 640 */ .mv-table th { padding: 11px 12px; font-size: 8.5px; } .mv-table td { padding: 12px 12px; } /* Inspector drawer: full-screen en mobile (sin floating) */ .mv-inspector { width: 100vw !important; right: -100vw; top: var(--topbar, 54px) !important; bottom: 0; border-radius: 0 !important; border: none !important; box-shadow: none !important; } /* Botón "Registrar gasto" reducido */ #page-costos .co-btn-primary { padding: 9px 14px; font-size: 12.5px; gap: 6px; margin-top: 4px; } /* Header compacto */ #page-costos .co-header { margin-bottom: 16px; gap: 10px; } .sk-title, #page-costos .co-title { font-size: 26px; } /* Sub-nav: scroll horizontal (4 tabs no entran en 375px) */ #page-costos .co-topbar { gap: 10px; margin-bottom: 18px; } #page-costos .co-subnav { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; } #page-costos .co-subnav::-webkit-scrollbar { display: none; } #page-costos .co-subnav-btn { padding: 7px 14px; font-size: 12.5px; flex-shrink: 0; } /* Período bar: misma lógica, compact */ #page-costos .co-period-bar { flex-wrap: nowrap; } #page-costos .co-period-btn { padding: 7px 12px; font-size: 12px; } /* Cards de chart */ #page-costos .co-card { padding: 16px 14px; border-radius: var(--radius-md); } #page-costos .co-card-title { font-size: 18px; margin-bottom: 12px; } #page-costos .co-chart-wrap { height: 240px; } /* KPI row 3 (Evolución): 3 cols compactas, sin overflow */ #page-costos .co-kpi-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #page-costos .co-kpi3 { padding: 12px 8px; border-radius: 12px; min-width: 0; overflow: hidden; } #page-costos .co-kpi3-label { font-size: 8.5px; letter-spacing: 0.08em; margin-bottom: 6px; line-height: 1.2; } #page-costos .co-kpi3-val { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-costos .co-kpi3-delta { font-size: 9px; margin-top: 5px; } #page-costos .co-kpi3-sub { font-size: 10px; margin-top: 5px; } #page-costos .co-alert-trend { padding: 14px 16px; gap: 10px; border-radius: 12px; } #page-costos .co-top-cat-monto { font-size: 13px; min-width: 60px; } #page-costos .co-top-cat-head { gap: 6px; } /* --- RENTABILIDAD: responsive --- */ #page-costos .co-bd-header, #page-costos .co-bd-row { grid-template-columns: 1fr 80px 60px 70px; gap: 4px; } #page-costos .co-bd-pct { font-size: 10px; } #page-costos .co-equil-val, #page-costos .co-proy-util-val { font-size: 22px; } #page-costos .co-fv-val { font-size: 18px; } #page-costos .co-suc-cmp-item { padding: 14px 16px; } /* Gauge: escala al ancho disponible */ #page-costos .co-gauge-wrap { width: 100%; max-width: 220px; margin: 16px auto 4px; } /* Gastos por categoría: donut arriba + leyenda abajo */ #page-costos .co-cat-inner { flex-direction: column; align-items: stretch; gap: 14px; } #page-costos .co-cat-donut-wrap { width: 140px; height: 140px; margin: 0 auto; } .sk-subtitle, #page-costos .co-subtitle, #page-costos .co-alert-trend-desc, #page-costos .co-bd-monto, #page-costos .co-cat-leg-item { font-size: 12px; } /* --- REGISTRO DE GASTOS: search + tabla con scroll horizontal --- */ #page-costos .co-search-wrap { width: 100%; padding: 9px 14px; } #page-costos .co-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; } #page-costos .co-table { min-width: 720px; font-size: 13px; } #page-costos .co-table thead th { padding: 11px 14px; font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; } #page-costos .co-table tbody td { padding: 12px 14px; } #page-costos .co-td-date { font-size: 12px !important; } #page-costos .co-td-acciones-wrap { opacity: 1; } /* --- POR SUCURSAL: grid 2-col → 1 col apilado --- */ #page-costos .co-body-2col, #page-costos .co-suc-compare, #page-costos .co-suc-grid { gap: 12px; grid-template-columns: 1fr; } #page-costos .co-suc-card { padding: 16px 16px; border-radius: 12px; min-width: 0; overflow: hidden; } #page-costos .co-suc-card-head { gap: 10px; flex-wrap: wrap; } #page-costos .co-suc-card-name { font-size: 16px; gap: 7px; min-width: 0; } #page-costos .co-suc-icon { width: 26px; height: 26px; } #page-costos .co-suc-total { font-size: 20px; } #page-costos .co-suc-meta { font-size: 11px; margin-bottom: 8px; } #page-costos .co-suc-breakdown-row { font-size: 12.5px; gap: 10px; min-width: 0; } #page-costos .co-suc-breakdown-amt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* KPI grid dentro de card de sucursal: 2 columnas compactas */ #page-costos .co-suc-kpi-grid { gap: 8px; padding: 10px; margin: 12px 0 12px; } #page-costos .co-suc-kpi-lbl { font-size: 8.5px; letter-spacing: 0.08em; } #page-costos .co-suc-cmp-val, #page-costos .co-td-monto, #page-costos .co-suc-kpi-val { font-size: 14px; } #page-costos .co-bd-delta, #page-costos .co-suc-breakdown-title { font-size: 9px; } /* Ranking: filas más compactas */ #page-costos .co-rank-card { padding: 16px 14px; } #page-costos .co-rank-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px 12px; row-gap: 6px; } #page-costos .co-rank-row .co-rank-metric:nth-child(4) { grid-column: 2 / 4; text-align: left; display: flex; align-items: center; gap: 8px; } #page-costos .co-rank-row .co-rank-metric:nth-child(4) .co-rank-metric-lbl { margin-bottom: 0; } #page-costos .co-rank-pos { font-size: 11px; gap: 4px; } #page-costos .co-rank-medal svg { width: 14px; height: 14px; } #page-costos .co-rank-name-top { font-size: 14.5px; } #page-costos .co-rank-name-sub { font-size: 10.5px; } #page-costos .co-rank-metric-lbl { font-size: 8.5px; } #page-costos .co-alert-trend-title, #page-costos .co-search-input, #page-costos .co-rank-metric-val { font-size: 13px; } #page-costos .co-rank-footer { font-size: 11px; line-height: 1.5; } #page-precios .pr-header { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 16px; } .sk-locf-sel, #page-precios .pr-header-left { flex: 1; min-width: 0; } #page-precios .pr-eyebrow { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 3px; } #page-precios .pr-title { font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; } #page-precios .pr-subtitle { font-size: 11.5px; line-height: 1.35; margin-top: 3px; } .pr-save-btn { padding: 9px 14px !important; font-size: 12px !important; border-radius: 100px; flex-shrink: 0; } .pr-save-btn .pr-btn-label { gap: 5px; } #page-costos .co-btn-primary svg, .pr-save-btn svg { height: 11px; width: 11px; } /* Filtros: search + select en fila, compactos */ .pr-filter-bar { gap: 8px; margin-bottom: 14px; } .pr-search-wrap { width: auto; flex: 1 1 60%; height: 38px; min-width: 0; } .pr-search-input { font-size: 12.5px; } .pr-filter-select { flex: 1 1 40%; height: 38px; font-size: 12.5px; padding: 0 10px; min-width: 0; } } @media (max-width: 1399px) { #pages > .page, #pages > .page.section-core { padding: 46px 36px 60px !important; } } @media (max-width: 1100px) { #pages > .page, #pages > .page.section-core { padding: 40px 28px 64px !important; } } @media (max-width: 768px) { #pages > .page, } @media (max-width: 1100px) { } @media (max-width: 768px) { .trf-card-body { padding: 18px; gap: 18px; } .trf-card-foot { padding: 14px 18px 16px; } .trf-kpis { grid-template-columns: 1fr 1fr; } .trf-kpis .trf-kpi:last-child { grid-column: 1 / -1; } .trf-filter-group { flex-direction: column; align-items: stretch; gap: 6px; } .trf-history { padding: 6px 8px 12px; } } @media (max-width: 1100px) { #page-cierre .cc3-hero { padding: 24px 24px 22px; } } @media (max-width: 768px) { #page-cierre .cc3-page-head { margin-bottom: 26px; } #page-cierre .cc3-hero { padding: 22px 20px 20px; border-radius: var(--radius-md); } #page-cierre .cc3-hero-stat { padding-left: 0; padding-top: 12px; } #page-cierre .cc3-hero-stat::before { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 1px; } #page-cierre .cc3-hero-stat:first-child { padding-top: 0; } #page-cierre .cc3-action { padding: 20px 20px 18px; border-radius: var(--radius-md); } } @media (max-width: 1100px) { #page-cierre .cc3-arqueo-grid > section + section { border-left: none; border-top: 1px solid rgba(26, 20, 16, 0.06); } } @media (max-width: 768px) { #page-cierre .cc3-pago-filtro { padding: 6px 9px; } .trf-card-head, #page-cierre .cc3-anatomy-head { padding: 18px 18px 14px; } #page-cierre .cc3-anatomy-head-tight { padding: 16px 18px 12px; } #page-cierre .cc3-anatomy-title { font-size: 19px; } #page-cierre .cc3-arqueo-grid > section { padding: 18px 18px 22px; } #page-cierre .cc3-medios-body { gap: 16px; } #page-cierre .cc3-arqueo-input { width: 130px; } #page-cierre .cc3-nota-input { width: calc(100% - 36px); margin: 4px 18px 18px; } } @media (max-width: 900px) { #page-cierre .cc3-hist-row { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 12px; } #page-cierre .cc3-hist-actions { grid-column: 1 / -1; opacity: 1; transform: none; justify-content: flex-end; } #page-cierre .cc3-comp-stat { padding: 10px 12px; min-width: 100px; } #page-cierre .cc3-comp-stat-val { font-size: 16px; } #page-cierre .cc3-hist-search { width: 100%; } } @media (max-width: 768px) { #page-cierre .cc3-comp-body { padding: 16px 12px 18px; } #page-cierre .cc3-hist-row { padding: 12px 16px; } #page-cierre .cc3-hist-date-pill { width: 48px; height: 54px; } #page-cierre .cc3-hist-date-day { font-size: 17px; } #page-cierre .cc3-hist-medios { gap: 10px; } #page-cierre .cc3-hist-obs-editor { margin: 0 16px 12px; } } @media (max-width: 1100px) { #page-cierre .cc3-anatomy-ventas { height: 520px; } #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking { display: block; } #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body { overflow: visible; max-height: none; } #page-movimientos .mv2-kpi-strip { grid-template-columns: repeat(3, 1fr); } #page-movimientos .mv2-kpi:nth-child(3) { border-right: none; } #page-movimientos .mv2-kpi:nth-child(n+4) { border-top: 1px solid rgba(26, 20, 16, 0.06); } } @media (max-width: 640px) { #page-movimientos .mv2-kpi-strip { grid-template-columns: repeat(2, 1fr); } #page-movimientos .mv2-kpi { border-right: none !important; } #page-movimientos .mv2-kpi:nth-child(odd) { border-right: 1px solid rgba(26, 20, 16, 0.06) !important; } #page-movimientos .mv2-kpi:nth-child(n+3) { border-top: 1px solid rgba(26, 20, 16, 0.06); } } @media (max-width: 920px) { #page-vencimientos .v3-triptico { grid-template-columns: 1fr 1fr; } #page-vencimientos .v3-card-hero { grid-column: 1 / -1; } } @media (max-width: 640px) { .nd-col-side, #page-vencimientos .v3-triptico { grid-template-columns: 1fr; } .nd-col-side > .nd-card:first-child, #page-vencimientos .v3-card-hero { grid-column: auto; } } @media (max-width: 768px) { #page-vencimientos .v3-tb-row { flex-wrap: wrap; gap: 6px; } .v3-tb-search { flex-basis: 100%; } } @media (max-width: 800px) { #page-vencimientos .vc2-table { min-width: 640px; } #page-vencimientos .vc2-table tbody td, #page-vencimientos .vc2-table thead th { padding: 10px 12px; } } @media (max-width: 768px) { #mov-inspector .mvd-doc { padding: 18px 16px 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; animation-iteration-count: 1 !important; } } @media (max-width: 480px) { .notif-panel { width: calc(100vw - 16px); right: 8px; } } @media (max-width: 1300px) { .tb-action-zone .sk-fpill-row .sk-fpill[data-val="Otros"], .tb-action-zone .sk-fpill-row .sk-fpill[data-val="Condimentos"] { display: none; } } @media (max-width: 1100px) { .tb-action-zone { gap: 4px; } .tb-action-zone .sk-search-wrap { flex-basis: 180px; } .tb-action-zone .sk-fpill-row .sk-fpill[data-val="Especiales"] { display: none; } } @media (max-width: 900px) { .tb-action-zone .sk-fpill-row { display: none; } } @media (max-width: 768px) { .tb-action-zone .sk-search-wrap { flex-basis: 130px; } } @media (max-width: 960px) { #tb-action-zone { position: static; transform: none; flex: 1 !important; max-width: none; justify-content: flex-start; } .tb-action-zone.has-content::before { display: block !important; } } /* ═══════════════════════════════════════════════════════════════ v7.19.0 — MODAL EDITORIAL (Lacca Nera redesign) Aplica a .modal.lx-modal y derivados (.lx-*). ═══════════════════════════════════════════════════════════════ */ .modal.lx-modal{ width: 480px; max-width: calc(100vw - 32px); max-height: min(90vh, 940px); background: #fff; border: 1px solid rgba(26,20,16,.08); border-radius: 22px; box-shadow: 0 32px 80px rgba(26,20,16,.22), 0 8px 24px rgba(26,20,16,.10), 0 1px 0 rgba(255,255,255,.6) inset; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } /* HEAD */ .lx-modal .lx-modal-head{ padding: 22px 24px 18px; border-bottom: 1px solid rgba(26,20,16,.08); background: #fff; position: relative; } .lx-modal .lx-modal-head-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .lx-modal .lx-modal-eyebrow{ font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #E8663A; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .lx-modal .lx-modal-eyebrow::before{ content: ""; width: 18px; height: 1px; background: #E8663A; } .lx-modal .lx-modal-title{ font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.08; color: #1A1410; margin: 0 0 6px; text-align: left; } .lx-modal .lx-modal-sub{ font-size: 13px; line-height: 1.5; color: #766960; max-width: 50ch; margin: 0; } .lx-modal .lx-modal-close{ flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(26,20,16,.14); color: #766960; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; transition: .18s ease; } .lx-modal .lx-modal-close:hover{ background: #f6f4f1; border-color: #1A1410; color: #1A1410; transform: rotate(90deg); } /* BODY */ .lx-modal .lx-modal-body{ flex: 1; min-height: 0; overflow-y: auto; padding: 6px 24px 20px; background: #fdfcfb; scrollbar-width: thin; scrollbar-color: rgba(26,20,16,.14) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lx-modal .lx-modal-body::-webkit-scrollbar-thumb{ background: rgba(26,20,16,.14); border-radius: 8px; } /* SECTIONS */ .lx-modal .lx-section{ padding: 20px 0 2px; } .lx-modal .lx-section + .lx-section{ border-top: 1px solid rgba(26,20,16,.08); margin-top: 6px; } .lx-modal .lx-section-label{ font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #766960; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; } .lx-modal .lx-section-label .lx-dot{ width: 5px; height: 5px; border-radius: 50%; background: #1A1410; } /* GRID */ .lx-modal .lx-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; } .lx-modal .lx-fg{ display: flex; flex-direction: column; gap: 7px; min-width: 0; } .lx-modal .lx-fg > label{ font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #3a3128; display: flex; align-items: center; gap: 6px; margin: 0; } .lx-modal .lx-fg > label .lx-opt{ font-family: var(--sans); font-weight: 500; font-size: 9px; letter-spacing: .06em; text-transform: none; color: #766960; padding: 2px 7px; background: #f6f4f1; border-radius: 999px; } .lx-modal .lx-fg input, .lx-modal .lx-fg select{ width: 100%; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: #1A1410; background: rgba(26,20,16,.035); border: 1px solid rgba(26,20,16,.08); border-radius: 11px; padding: 11px 14px; margin: 0; transition: .16s ease; -webkit-appearance: none; appearance: none; box-shadow: none; height: auto; letter-spacing: 0; text-transform: none; } .lx-modal .lx-fg select{ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 38px; cursor: pointer; } .lx-modal .lx-fg input.mono{ font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; } .lx-modal .lx-hint{ font-size: 11px; color: #766960; line-height: 1.45; padding-left: 2px; } /* SUB-GRID (peso min/max) */ .lx-modal .lx-sf-lbl{ font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #766960; } /* FOOT */ .lx-modal .lx-modal-foot{ border-top: 1px solid rgba(26,20,16,.08); padding: 14px 24px 16px; background: #fff; display: flex; flex-direction: column; gap: 12px; position: sticky; bottom: 0; z-index: 2; } .lx-modal .lx-switch-row{ display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #f6f4f1; border: 1px solid rgba(26,20,16,.08); border-radius: 12px; font-size: 12.5px; color: #3a3128; cursor: pointer; transition: .16s; } .trf-cart-row:hover, .lx-modal .lx-switch-row:hover { border-color: rgba(26,20,16,.14); } .lx-modal .lx-switch-row input[type="checkbox"]{ width: 15px; height: 15px; accent-color: #1A1410; margin: 0; } .trf-fifo-lote, .co-rank-footer b, #page-cierre .cc3-hist-meta strong, .lx-modal .lx-switch-row strong { color: #1A1410; font-weight: 600; } .lx-modal .lx-switch-row .lx-switch-tag{ margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #5a4f47; background: rgba(26,20,16,.05); padding: 3px 8px; border-radius: var(--radius-xs, 6px); } /* ── Error states para validación ── */ .lx-modal .lx-fg.has-error input, .lx-modal .lx-fg.has-error select { border-color: #d44a2c !important; box-shadow: 0 0 0 3px rgba(212,74,44,.08); } .lx-modal .lx-fg.has-error label { color: #d44a2c; } .lx-modal .lx-fg .lx-error-msg { display: none; font-family: var(--sans); font-size: 11px; color: #d44a2c; margin-top: 4px; letter-spacing: 0; } .lx-modal .lx-modal-actions{ display: flex; gap: 9px; justify-content: flex-end; } /* GHOST BUTTON (scoped) */ .lx-modal .lx-btn-ghost{ background: transparent; border: 1px solid rgba(26,20,16,.14); color: #3a3128; border-radius: 11px; padding: 11px 20px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: .18s ease; } .lx-modal .lx-btn-ghost:hover{ background: #f6f4f1; border-color: #1A1410; color: #1A1410; } /* LACCA NERA PRIMARY BUTTON (scoped al modal) */ .lx-modal .lx-btn-prime{ position: relative; overflow: hidden; background: linear-gradient(158deg, #261d15 0%, #0d0a07 100%); color: #fff; border: 1px solid rgba(0,0,0,.4); border-radius: 11px; padding: 11px 22px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .005em; text-transform: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 8px 20px rgba(13,10,7,.30); transition: transform .15s, box-shadow .25s; } .lx-modal .lx-btn-prime::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(232,102,58,.55) 0%, rgba(232,102,58,.18) 30%, transparent 70%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .lx-modal .lx-btn-prime:hover{ box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.4) inset, 0 12px 28px rgba(13,10,7,.42), 0 0 24px rgba(232,102,58,.25); } /* Neutralizar reglas legacy del .modal-head dentro de .lx-modal */ /* ── MODAL DE CONFIRMACIÓN EDITORIAL (lx-confirm) ── */ @keyframes lx-confirm-overlay-in { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(10px); } } @keyframes lx-confirm-in { 0% { opacity: 0; transform: scale(.92) translateY(10px); } 60% { opacity: 1; transform: scale(1.02) translateY(-2px); } 100% { opacity: 1; transform: none; } } @keyframes lx-confirm-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.94) translateY(6px); } } @keyframes lx-confirm-icon-in { 0% { transform: scale(0) rotate(-15deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } } .lx-confirm-overlay { position: fixed; inset: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(14,10,7,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: lx-confirm-overlay-in .22s ease both; } .lx-confirm-overlay-out { animation: lx-confirm-overlay-in .22s ease reverse both; } .lx-confirm-box { background: #fff; border: 1px solid rgba(26,20,16,.08); border-radius: 20px; width: 380px; max-width: calc(100vw - 32px); box-shadow: 0 32px 80px rgba(14,10,7,.40), 0 8px 24px rgba(14,10,7,.20), 0 1px 0 rgba(255,255,255,.8) inset; overflow: hidden; animation: lx-confirm-in .38s cubic-bezier(.16,1,.3,1) both; display: flex; flex-direction: column; } .lx-confirm-box.lx-confirm-out { animation: lx-confirm-out .24s cubic-bezier(.4,0,1,1) both; } /* Ícono de advertencia */ .lx-confirm-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(224,82,82,.10); color: #C94040; margin: 28px auto 0; animation: lx-confirm-icon-in .45s .06s cubic-bezier(.16,1,.3,1) both; flex-shrink: 0; } /* Contenido */ .lx-confirm-content { padding: 16px 28px 22px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .lx-confirm-eyebrow { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #C94040; animation: np-eyebrow-in .34s .10s cubic-bezier(.16,1,.3,1) both; } .lx-confirm-title { font-family: var(--serif); font-size: 20px; font-weight: 600; color: #1A1410; letter-spacing: -.012em; line-height: 1.1; animation: np-title-in .38s .14s cubic-bezier(.16,1,.3,1) both; } .lx-confirm-msg { font-family: var(--sans); font-size: 13px; font-weight: 400; color: #766960; line-height: 1.55; max-width: 30ch; margin: 0 auto; animation: np-item-detail-in .38s .18s cubic-bezier(.16,1,.3,1) both; } /* Footer de acciones */ .lx-confirm-actions { display: flex; gap: 8px; padding: 0 20px 22px; animation: np-item-footer-in .36s .22s cubic-bezier(.16,1,.3,1) both; } /* Cancelar */ .lx-confirm-cancel { flex: 1; background: transparent; border: 1px solid rgba(26,20,16,.12); color: #3a3128; border-radius: 11px; padding: 11px 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .16s, border-color .16s, color .16s; } .lx-confirm-cancel:hover { background: #f6f4f1; border-color: rgba(26,20,16,.22); color: #1A1410; } /* Eliminar — rojo Lacca */ .lx-confirm-ok { flex: 1; position: relative; overflow: hidden; background: linear-gradient(158deg, #7a1c1c 0%, #3d0d0d 100%); color: #fff; border: 1px solid rgba(0,0,0,.35); border-radius: 11px; padding: 11px 16px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.30) inset, 0 6px 18px rgba(100,20,20,.35); transition: box-shadow .22s, transform .15s; } .lx-confirm-ok::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(224,82,82,.55) 0%, rgba(224,82,82,.18) 35%, transparent 70%); opacity: 0; transition: opacity .32s ease; } .lx-confirm-ok:hover { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 10px 28px rgba(100,20,20,.50), 0 0 22px rgba(224,82,82,.22); } .lx-modal .lx-btn-prime svg, .lx-confirm-ok svg { flex-shrink: 0; position: relative; z-index: 1; } /* ── EDITAR VENTA — venta context card ── */ .ev-venta-card { background: linear-gradient(158deg, #201810 0%, #0e0b07 100%); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px rgba(10,7,4,.22), 0 2px 6px rgba(10,7,4,.14), 0 1px 0 rgba(255,255,255,.04) inset; } .ev-card-count { font-family: var(--serif); font-size: 18px; font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: -.01em; line-height: 1.1; } .ev-card-nombres { font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.50); line-height: 1.4; } .ev-card-more { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.30); letter-spacing: .06em; } .ev-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .ev-card-fecha { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.35); letter-spacing: .04em; } .ev-card-cli { font-family: var(--sans); font-size: 11px; font-weight: 500; color: rgba(255,255,255,.45); } .ev-card-cli-empty { color: rgba(255,255,255,.22); font-style: italic; } /* ── AJUSTE DE INVENTARIO — product card ── */ .aj-product-card { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; background: linear-gradient(158deg, #201810 0%, #0e0b07 100%); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 16px 18px; box-shadow: 0 8px 24px rgba(10,7,4,.22), 0 2px 6px rgba(10,7,4,.14), 0 1px 0 rgba(255,255,255,.04) inset; } .aj-product-card-inner { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; } .aj-product-name { font-family: var(--serif); font-size: 17px; font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aj-product-stats { display: flex; align-items: center; gap: 14px; } .sk-kpi-core, #page-movimientos .mv2-kpi-core, .co-suc-cmp-cell, .pedido-info-item, .aj-stat { display: flex; flex-direction: column; gap: 3px; } .aj-stat-label { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.30); line-height: 1; } .aj-stat-value { font-family: var(--mono); font-size: 20px; font-weight: 500; color: rgba(255,255,255,.90); letter-spacing: -.01em; line-height: 1; } .aj-stat-unit { font-size: 14px; color: rgba(255,255,255,.55); } .aj-stat-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.10); margin: 2px 0; } .aj-product-icon { display: flex; align-items: center; justify-content: center; width: 36px; flex-shrink: 0; color: rgba(255,255,255,.18); align-self: center; } /* Qty input sin prefijo $ */ .lx-modal .aj-qty-input { padding-left: 14px; font-size: 28px; } /* ── MODAL CAJA CLIENTE ── */ #modal-caja-cli-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(14,10,7,.52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: lx-confirm-overlay-in .22s ease both; } #modal-caja-cli-overlay .modal.lx-modal { width: 440px; max-width: calc(100vw - 32px); display: flex !important; flex-direction: column; } .mcj-saldo-card { background: linear-gradient(158deg, #201810 0%, #0e0b07 100%); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 8px 24px rgba(10,7,4,.22), 0 1px 0 rgba(255,255,255,.04) inset; } .mcj-saldo-label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.30); } .mcj-saldo-value { font-family: var(--mono); font-size: 26px; font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: -.01em; line-height: 1; } .lx-modal .lx-sub-grid, .mcj-op-toggle { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; } .mcj-op-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 11px; border: 1.5px solid rgba(26,20,16,.10); background: rgba(26,20,16,.03); font-family: var(--sans); font-size: 13px; font-weight: 600; color: rgba(26,20,16,.45); cursor: pointer; transition: all .18s ease; } .mcj-op-btn:hover { border-color: rgba(26,20,16,.20); color: rgba(26,20,16,.70); background: rgba(26,20,16,.05); } .mcj-op-btn.mcj-op-sumar.active { background: rgba(34,169,106,.10); border-color: rgba(34,169,106,.35); color: #1a7a45; } .mcj-op-btn.mcj-op-restar.active { background: rgba(224,82,82,.10); border-color: rgba(224,82,82,.30); color: #a83030; } .aj-delta-hint, .mcj-preview { animation: tk-msg-in .25s cubic-bezier(.16,1,.3,1) both; background: rgba(26,20,16,.04); border-radius: 8px; border: 1px solid rgba(26,20,16,.07); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .03em; margin-top: 2px; padding: 7px 12px; } .mcj-preview.sumar { color: #1a7a45; border-color: rgba(34,169,106,.20); background: rgba(34,169,106,.06); } .mcj-preview.restar { color: #a83030; border-color: rgba(224,82,82,.20); background: rgba(224,82,82,.06); } #mcj-btn-confirm.op-restar { background: linear-gradient(158deg, #7a1c1c 0%, #3d0d0d 100%); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 8px 20px rgba(100,20,20,.30); } #mcj-btn-confirm.op-restar::before { background: linear-gradient(90deg, rgba(224,82,82,.55) 0%, rgba(224,82,82,.18) 30%, transparent 70%); } /* MONTO HERO INPUT */ .lx-modal .lx-monto-prefix{ position: absolute; left: 16px; font-family: var(--mono); font-size: 22px; font-weight: 400; color: rgba(26,20,16,.35); pointer-events: none; z-index: 1; line-height: 1; } .lx-modal .lx-monto-input{ width: 100%; font-family: var(--mono); font-size: 28px; font-weight: 500; color: #1A1410; background: rgba(26,20,16,.035); border: 1px solid rgba(26,20,16,.08); border-radius: 11px; padding: 14px 16px 14px 38px; letter-spacing: -.01em; transition: .16s ease; -webkit-appearance: none; appearance: none; } .lx-modal .lx-monto-input::placeholder{ color: rgba(26,20,16,.20); font-weight: 300; } /* TEXTAREA editorial */ .lx-modal .lx-textarea{ width: 100%; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: #1A1410; background: rgba(26,20,16,.035); border: 1px solid rgba(26,20,16,.08); border-radius: 11px; padding: 11px 14px; resize: vertical; min-height: 76px; line-height: 1.5; transition: .16s ease; -webkit-appearance: none; appearance: none; } .lx-modal .lx-fg input::placeholder, .lx-modal .lx-textarea::placeholder { color: rgba(26,20,16,.30); font-weight: 400; } .lx-modal .lx-fg input:hover, .lx-modal .lx-fg select:hover, .lx-modal .lx-monto-input:hover, .lx-modal .lx-textarea:hover { background: rgba(26,20,16,.05); border-color: rgba(26,20,16,.14); } .lx-modal .lx-fg input:focus, .lx-modal .lx-fg select:focus, .lx-modal .lx-monto-input:focus, .lx-modal .lx-textarea:focus { background: #fff; border-color: #1A1410; box-shadow: 0 0 0 3px rgba(26,20,16,.06); outline: none; } /* INPUT READONLY */ .lx-modal .lx-input-readonly{ color: #766960 !important; background: rgba(26,20,16,.025) !important; border-color: rgba(26,20,16,.05) !important; cursor: default; } /* LISTBOX editorial (select[size]) */ .lx-modal .lx-listbox{ width: 100%; height: auto; min-height: 96px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1A1410; background: rgba(26,20,16,.035) !important; border: 1px solid rgba(26,20,16,.08) !important; border-radius: 11px !important; padding: 6px !important; outline: none; box-shadow: none !important; cursor: pointer; -webkit-appearance: none; appearance: none; } .lx-modal .lx-listbox:focus{ border-color: #1A1410 !important; box-shadow: 0 0 0 3px rgba(26,20,16,.06) !important; background: #fff !important; } .lx-modal .lx-listbox option{ padding: 7px 10px; border-radius: 8px; margin: 2px 0; font-size: 13px; } .lx-modal .lx-listbox option:checked{ background: rgba(26,20,16,.08) linear-gradient(0deg, rgba(26,20,16,.08), rgba(26,20,16,.08)); color: #1A1410; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ v7.20.0 — MODAL PEDIDO EMPRESA B2B ═══════════════════════════════════════════════════════════════ */ /* Modal ancho para el carrito */ .lx-modal.lx-modal-wide { width: 700px; max-width: calc(100vw - 32px); } /* Empresa selector */ .pe-emp-search-wrap input, .lx-fg .pe-emp-search-wrap + input { width: 100%; height: 38px; padding: 0 12px 0 34px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: #1A1410; background: rgba(26,20,16,.035); border: 1px solid rgba(26,20,16,.08); border-radius: 11px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; } /* Dropdown empresas */ .pe-emp-dropdown, .pe-prod-dropdown { position: absolute; left: 0; right: 0; background: #fff; border: 1px solid rgba(26,20,16,.12); border-radius: 12px; box-shadow: 0 12px 36px rgba(26,20,16,.14), 0 4px 12px rgba(26,20,16,.08); z-index: 10; overflow: hidden; margin-top: 6px; } .pe-dd-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid rgba(26,20,16,.06); padding: 10px 14px; cursor: pointer; transition: background .13s; } .pe-dd-item:hover { background: rgba(26,20,16,.035); } .pe-dd-razon { font-family: var(--serif); font-size: 13.5px; font-weight: 600; color: #1A1410; letter-spacing: -.005em; } .pe-dd-meta { font-family: var(--mono); font-size: 9.5px; color: rgba(26,20,16,.45); letter-spacing: .04em; } /* Empresa seleccionada */ .pe-emp-selected { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: linear-gradient(158deg, rgba(122,74,22,.08) 0%, rgba(122,74,22,.03) 100%); border: 1px solid rgba(122,74,22,.22); border-radius: 11px; } .pe-emp-sel-razon { font-family: var(--serif); font-size: 15px; font-weight: 600; color: #1A1410; letter-spacing: -.01em; } .pe-emp-sel-meta { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: rgba(26,20,16,.50); letter-spacing: .04em; margin-top: 3px; } .pe-emp-sel-change { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7a4a16; background: transparent; border: 1px solid rgba(122,74,22,.25); border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; transition: .15s; } .pe-emp-sel-change:hover { background: rgba(122,74,22,.08); border-color: rgba(122,74,22,.45); } /* Buscador de productos */ .pe-prod-search-wrap { position: relative; display: flex; align-items: center; margin-bottom: 10px; } .pe-emp-search-wrap svg, .pe-prod-search-wrap svg { color: rgba(26,20,16,.35); left: 12px; pointer-events: none; position: absolute; } .pe-prod-search-wrap input { width: 100%; height: 38px; padding: 0 12px 0 34px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1A1410; background: rgba(26,20,16,.035); border: 1px solid rgba(26,20,16,.08); border-radius: 11px; outline: none; transition: border-color .15s, background .15s; } .pe-prod-dropdown { position: relative; margin-bottom: 8px; } /* Carrito */ .pe-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; text-align: center; color: rgba(26,20,16,.35); font-family: var(--sans); font-size: 12.5px; background: rgba(26,20,16,.025); border-radius: 11px; border: 1.5px dashed rgba(26,20,16,.10); } .pe-cart-empty svg { opacity: .35; } .pe-cart-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; border-radius: 11px; overflow: hidden; border: 1px solid rgba(26,20,16,.08); } .pe-cart-table thead tr { background: #f6f4f1; border-bottom: 1px solid rgba(26,20,16,.08); } .pe-cart-table th { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(26,20,16,.40); padding: 10px 12px; text-align: left; } .pe-cart-table td { padding: 10px 12px; border-bottom: 1px solid rgba(26,20,16,.05); vertical-align: middle; } .pe-cart-prod { font-family: var(--sans); font-size: 13px; font-weight: 600; color: #1A1410; } .pe-cart-unit { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-top: 2px; } .pe-cart-stock { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.55); } .pe-cart-subtotal { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: #1A1410; font-variant-numeric: tabular-nums; text-align: right; } .pe-qty-input { width: 80px; height: 32px; font-family: var(--mono); font-size: 12px; font-weight: 500; text-align: right; color: #1A1410; background: rgba(26,20,16,.04); border: 1px solid rgba(26,20,16,.09); border-radius: 8px; padding: 0 8px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s; } .pe-emp-search-wrap input:focus, .pe-prod-search-wrap input:focus, .pe-qty-input:focus { background: #fff; border-color: #1A1410; box-shadow: 0 0 0 3px rgba(26,20,16,.06); } .pe-qty-input.pe-qty-warn { border-color: rgba(232,102,58,.45); color: #E8663A; } .pe-price-sym { position: absolute; left: 9px; font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,.40); pointer-events: none; } .pe-price-input { width: 90px; height: 32px; padding: 0 8px 0 20px; font-family: var(--mono); font-size: 12px; font-weight: 500; text-align: right; color: #1A1410; background: rgba(26,20,16,.04); border: 1px solid rgba(26,20,16,.09); border-radius: 8px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s; } .pe-price-input:focus { border-color: #1A1410; background: #fff; } .pe-remove-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(26,20,16,.10); border-radius: 7px; color: rgba(26,20,16,.38); cursor: pointer; transition: .15s; } .pe-remove-btn:hover { background: rgba(224,82,82,.08); border-color: rgba(224,82,82,.30); color: #a83030; } /* Footer pedido con totales */ .pe-totales { display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .pe-total-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--sans); font-size: 12px; color: rgba(26,20,16,.60); } .pe-total-amt { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: #1A1410; } .pe-total-row.pe-total-final { font-size: 13px; font-weight: 600; color: #1A1410; padding-top: 6px; border-top: 1px solid rgba(26,20,16,.08); margin-top: 2px; } .pe-total-hero { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: #1A1410; font-variant-numeric: tabular-nums; } /* Tabla de pedidos dentro del detalle de empresa */ .emp-pedidos-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .emp-pedidos-table th { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(26,20,16,.40); padding: 10px 14px; text-align: left; background: #fafaf9; } .emp-pedidos-table td { padding: 10px 14px; border-bottom: 1px solid rgba(26,20,16,.05); } .emp-pedido-num { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: #1A1410; letter-spacing: .04em; } .emp-pedido-fecha { color: #a83030; font-weight: 700; } /* Badges de estado */ .emp-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } .sb2-badge--warn, /* ═══════════════════════════════════════════════════════════════ v7.20.0 — MODAL PAGO EMPRESA B2B (Fase 3) ═══════════════════════════════════════════════════════════════ */ /* Card empresa en modal pago */ .pp-emp-card { background: linear-gradient(158deg, #201810 0%, #0e0b07 100%); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: 0 8px 24px rgba(10,7,4,.22), 0 1px 0 rgba(255,255,255,.04) inset; } .pp-emp-info { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pp-emp-razon { font-family: var(--serif); font-size: 17px; font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: -.01em; } .pp-emp-deuda { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .pp-emp-deuda-lbl { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.30); } .pp-emp-deuda-val { font-family: var(--mono); font-size: 22px; font-weight: 700; color: #D4882A; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } /* Toggle modo de aplicación */ .pp-modo-btn em { font-style: normal; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: rgba(26,20,16,.30); } .pp-modo-btn.active { background: rgba(26,122,69,.07); border-color: rgba(26,122,69,.35); color: #1a7a45; } .pp-modo-btn.active em { color: rgba(26,122,69,.55); } /* Preview de distribución */ .pp-preview-wrap { background: rgba(26,20,16,.025); border: 1px solid rgba(26,20,16,.07); border-radius: 11px; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .pp-preview-empty { font-family: var(--sans); font-size: 12.5px; color: rgba(26,20,16,.42); text-align: center; padding: 8px 0; } .pp-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #fff; border-radius: 8px; border: 1px solid rgba(26,20,16,.06); } .pp-preview-row-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 12px; } .pp-preview-num { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: #1A1410; letter-spacing: .04em; white-space: nowrap; } .pp-preview-saldo-prev { font-family: var(--mono); font-size: 11.5px; color: rgba(26,20,16,.55); font-variant-numeric: tabular-nums; white-space: nowrap; } .pp-preview-saldo-new { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: #D4882A; font-variant-numeric: tabular-nums; white-space: nowrap; } .pe-total-disc, .pp-preview-saldo-new.pp-saldo-zero { color: #1a7a45; } .pp-preview-badge-ok { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1a7a45; background: rgba(26,122,69,.10); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .pp-preview-aplicar { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: #1A1410; font-variant-numeric: tabular-nums; white-space: nowrap; } .pp-preview-hint { font-family: var(--sans); font-size: 11.5px; color: rgba(26,20,16,.55); padding: 0 4px; line-height: 1.4; } .pp-preview-sobrante { color: var(--emp-warn, #D4882A); } .pp-preview-cuenta { padding: 10px 12px; background: rgba(26,122,69,.07); border-radius: 8px; border: 1px solid rgba(26,122,69,.15); } .pp-preview-lbl { font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1a7a45; } .pp-preview-amt { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #1a7a45; } /* ── AGING v2 (Fase 4) — barras horizontales proporcionales ── */ /* ── TIMELINE SVG (Fase 4) ── */ #page-empresas .emp-timeline-svg-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(26,20,16,.10) transparent; padding: 4px 0 6px; } #page-empresas .emp-timeline-svg-wrap::-webkit-scrollbar { height: 5px; } .notif-list::-webkit-scrollbar-thumb, #page-empresas .emp-timeline-svg-wrap::-webkit-scrollbar-thumb { background: rgba(26,20,16,.10); border-radius: 5px; } #page-empresas .emp-timeline-svg { display: block; min-width: 100%; } /* ═══════════════════════════════════════════════════════════════ v7.20.0 — FASE 6: Sello SALDADO + KPI B2B + Botón Remito ═══════════════════════════════════════════════════════════════ */ /* Sello SALDADO en filas de pedidos pagados */ @keyframes sello-stamp-in { 0% { opacity: 0; transform: rotate(-2deg) scale(1.4); } 60% { opacity: 1; transform: rotate(-2deg) scale(.96); } 100% { opacity: 1; transform: rotate(-2deg) scale(1); } } /* ═══════════════════════════════════════════════════════════════ v7.20.0 — TOGGLE Individual / Empresa (modal cliente) ═══════════════════════════════════════════════════════════════ */ .cli-tipo-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cli-tipo-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 14px; background: rgba(26,20,16,.03); border: 1.5px solid rgba(26,20,16,.10); border-radius: 11px; color: rgba(26,20,16,.50); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: all .18s ease; } .cli-tipo-btn svg { color: currentColor; opacity: .65; } .cli-tipo-btn span { display: block; font-size: 13.5px; line-height: 1; } .cli-tipo-btn em { font-style: normal; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,20,16,.32); } .cli-tipo-btn:hover { background: rgba(26,20,16,.06); border-color: rgba(26,20,16,.20); color: rgba(26,20,16,.75); } .cli-tipo-btn.active[data-tipo="individual"] { background: rgba(34,169,106,.07); border-color: rgba(34,169,106,.35); color: #1a7a45; box-shadow: 0 0 0 1px rgba(34,169,106,.18) inset; } .cli-tipo-btn.active[data-tipo="empresa"] { background: linear-gradient(158deg, rgba(122,74,22,.10) 0%, rgba(122,74,22,.04) 100%); border-color: rgba(122,74,22,.40); color: #6b3d12; box-shadow: 0 0 0 1px rgba(122,74,22,.20) inset; } .cli-tipo-btn.active em { color: inherit; opacity: .55; } /* ═══════════════════════════════════════════════════════════════ v7.25.0 — PÁGINA EMPRESAS (B2B · Card Grid + Inline Expand) ═══════════════════════════════════════════════════════════════ */ #page-empresas.emp { --emp-ok: #1a7a45; --emp-warn: #D4882A; --emp-amber: #b86c1c; --emp-bad: #a83030; --emp-ink: #1A1410; --emp-line: rgba(26,20,16,.08); } /* v7.25.0 Header */ #page-empresas .emp-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } #page-empresas .emp-header-eyebrow { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-bottom: 6px; } #page-empresas .emp-header-title { font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--emp-ink); line-height: 1.1; } #page-empresas .emp-btn-new { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff; background: var(--emp-ink); border: none; border-radius: 10px; padding: 10px 18px; cursor: pointer; transition: .15s; } #page-empresas .emp-btn-new:hover { background: #2d2520; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,20,16,.18); } /* v7.25.0 KPI Strip */ #page-empresas .emp-kpi-strip { display: flex; gap: 14px; margin-bottom: 24px; } #page-empresas .emp-kpi-card { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #fff; border: 1px solid rgba(26,20,16,.05); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); transition: box-shadow .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); } #page-empresas .emp-kpi-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } #page-empresas .emp-kpi-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-empresas .emp-kpi-icon--warn { background: rgba(212,136,42,.10); color: var(--emp-warn); } #page-empresas .emp-kpi-label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(26,20,16,.45); margin-bottom: 2px; } #page-empresas .emp-kpi-value { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; } /* v7.25.0 Toolbar */ #page-empresas .emp-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } #page-empresas .emp-search-wrap { position: relative; flex: 1; max-width: 320px; } #page-empresas .emp-search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: rgba(26,20,16,.32); pointer-events: none; } #page-empresas .emp-search-input { width: 100%; height: 40px; padding: 0 14px 0 38px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--emp-ink); background: #f2f1ef; border: 1px solid transparent; border-radius: 11px; outline: none; transition: .15s; } #page-empresas .emp-search-input::placeholder { color: rgba(26,20,16,.35); } #page-empresas .emp-search-input:focus { background: #fff; border-color: var(--emp-ink); box-shadow: 0 0 0 3px rgba(26,20,16,.05); } #page-empresas .emp-filters { display: flex; gap: 6px; } #page-empresas .emp-filter-btn { font-family: var(--sans); font-size: 12px; font-weight: 500; color: rgba(26,20,16,.55); background: transparent; border: 1px solid rgba(26,20,16,.10); border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: .15s; } #page-empresas .emp-filter-btn:hover { border-color: rgba(26,20,16,.25); color: var(--emp-ink); } /* v7.25.0 Card Grid */ #page-empresas .emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } /* Cards fade-in on first render */ #page-empresas .emp-grid > .emp-card { animation: empCardIn .32s cubic-bezier(.16,1,.3,1) both; } .tb-action-zone > *:nth-child(2), #page-empresas .emp-grid > .emp-card:nth-child(2) { animation-delay: 40ms; } .tb-action-zone > *:nth-child(3), #page-empresas .emp-grid > .emp-card:nth-child(3) { animation-delay: 80ms; } #page-empresas .emp-grid > .emp-card:nth-child(5) { animation-delay: 135ms; } #page-empresas .emp-grid > .emp-card:nth-child(6) { animation-delay: 155ms; } #page-empresas .emp-grid > .emp-card:nth-child(n+7) { animation-delay: 170ms; } @keyframes empCardIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } #page-empresas .emp-card { background: #fff; border: 1px solid rgba(26,20,16,.05); border-radius: var(--radius-lg); padding: 20px 22px; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--card-shadow); transition: border-color .22s ease, box-shadow .28s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), opacity .2s ease; will-change: transform, box-shadow; } #page-empresas .emp-card:hover { border-color: rgba(26,20,16,.08); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } #page-empresas .emp-card:active { transform: scale(.985); transition-duration: .08s; } #page-empresas .emp-card.is-expanded { grid-column: 1 / -1; cursor: default; transform: none; border-color: rgba(26,20,16,.18); box-shadow: 0 8px 32px rgba(32,24,18,.08); animation: empCardExpand .35s cubic-bezier(.16,1,.3,1) both; } #page-empresas .emp-card.is-expanded:active { transform: none; } @keyframes empCardExpand { from { opacity: .7; box-shadow: 0 1px 2px rgba(32,24,18,.02); } to { opacity: 1; box-shadow: 0 8px 32px rgba(32,24,18,.08); } } #page-empresas .emp-card-name { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--emp-ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-empresas .emp-card-meta { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .04em; color: rgba(26,20,16,.45); } #page-empresas .emp-card-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } #page-empresas .emp-card-amount { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -.01em; } #page-empresas .emp-kpi-value--warn, #page-empresas .emp-card-amount--warn { color: var(--emp-warn); } #page-empresas .emp-kpi-value--danger, #page-empresas .emp-card-amount--danger { color: var(--emp-bad); } #page-empresas .emp-card-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } #page-empresas .emp-kpi-icon--ok, #page-empresas .emp-card-badge--ok { background: rgba(26,122,69,.08); color: var(--emp-ok); } #page-empresas .emp-card-badge--warn { background: rgba(212,136,42,.10); color: #b86c1c; } #page-empresas .emp-kpi-icon--danger, #page-empresas .emp-card-badge--danger { background: rgba(224,82,82,.08); color: var(--emp-bad); } .emp-badge-neutral, #page-empresas .emp-card-badge--neutral { background: rgba(26,20,16,.07); color: rgba(26,20,16,.55); } #page-empresas .emp-card-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(26,20,16,.06); } #page-empresas .emp-card-stat-label { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,20,16,.35); } #page-empresas .emp-card-stat-value { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--emp-ink); } #page-empresas .emp-card-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; display: none; align-items: center; justify-content: center; background: rgba(26,20,16,.05); border: none; border-radius: 8px; cursor: pointer; color: rgba(26,20,16,.50); transition: .15s; } #page-empresas .emp-card-close:hover { background: rgba(26,20,16,.10); color: var(--emp-ink); } #page-empresas .emp-card-quick { position: absolute; top: 14px; right: 14px; display: flex; gap: 5px; opacity: 0; transition: opacity .15s; } #page-empresas .emp-card-quick-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: none; cursor: pointer; transition: .15s; } #page-empresas .emp-card-quick-btn--pedido:hover { background: #2d2520; box-shadow: 0 3px 8px rgba(26,20,16,.25); } #page-empresas .emp-card-quick-btn--pago { background: rgba(26,20,16,.06); color: rgba(26,20,16,.60); } #page-empresas .emp-card-quick-btn--pago:hover { background: rgba(26,20,16,.12); color: var(--emp-ink); } /* v7.25.0 Expanded */ #page-empresas .emp-expanded { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(26,20,16,.08); animation: empExpandReveal .4s cubic-bezier(.16,1,.3,1) both; } @keyframes empExpandReveal { from { opacity: 0; transform: translateY(-12px); } 40% { opacity: .4; } to { opacity: 1; transform: translateY(0); } } /* Close button entrance */ #page-empresas .emp-card.is-expanded .emp-card-close { animation: empBtnPop .3s cubic-bezier(.34,1.56,.64,1) .15s both; } @keyframes empBtnPop { from { opacity: 0; transform: scale(.5) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* Aging bars shimmer on expand */ #page-empresas .emp-exp-actions { display: flex; gap: 8px; margin-bottom: 20px; } #page-empresas .emp-exp-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px; cursor: pointer; transition: .15s; border: none; } #page-empresas .emp-card-quick-btn--pedido, #page-empresas .emp-exp-btn--primary { background: var(--emp-ink); color: #fff; } #page-empresas .emp-exp-btn--primary:hover { background: #2d2520; } #page-empresas .emp-exp-btn--ghost { background: transparent; color: var(--emp-ink); border: 1px solid rgba(26,20,16,.14); } #page-empresas .emp-exp-btn--ghost:hover { border-color: rgba(26,20,16,.30); background: rgba(26,20,16,.03); } #page-empresas .emp-exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } #page-empresas .emp-exp-section { background: #f2f1ef; border-radius: 11px; padding: 16px 18px; } #page-empresas .emp-exp-section-title { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(26,20,16,.40); margin-bottom: 10px; } #page-empresas .emp-aging-mini-label { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.60); width: 70px; flex-shrink: 0; } #page-empresas .emp-aging-mini-bar { flex: 1; height: 6px; background: rgba(26,20,16,.06); border-radius: 3px; overflow: hidden; } #page-empresas .emp-aging-mini-fill { transform-origin: left center; height: 100%; border-radius: 3px; transition: width .4s ease; } #page-empresas .emp-aging-mini-fill--ok { background: rgba(26,122,69,.45); } #page-empresas .emp-aging-mini-fill--warn { background: rgba(212,136,42,.55); } #page-empresas .emp-aging-mini-fill--danger { background: rgba(224,82,82,.55); } #page-empresas .emp-aging-mini-amount { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--emp-ink); width: 70px; text-align: right; } #page-empresas .emp-contact-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } #page-empresas .emp-contact-row svg { color: rgba(26,20,16,.35); flex-shrink: 0; } #page-empresas .emp-contact-row span { font-family: var(--sans); font-size: 12.5px; color: rgba(26,20,16,.70); } #page-empresas .emp-kpi-value--ok, #page-empresas .emp-card-amount--ok { color: var(--emp-ok); } #page-empresas .emp-empty-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 80px 24px; text-align: center; color: rgba(26,20,16,.32); min-height: 300px; } @media (max-width: 768px) { #page-empresas .emp-kpi-strip { flex-direction: column; } .trf-route, #page-empresas .emp-grid, #page-empresas .emp-exp-grid { grid-template-columns: 1fr; } #page-empresas .emp-toolbar { flex-direction: column; align-items: stretch; } #page-empresas .emp-search-wrap { max-width: none; } #page-empresas .emp-header { flex-direction: column; align-items: flex-start; gap: 12px; } } /* HEAD (sin título, solo compatibilidad) */ #page-empresas .emp-kpi { position: relative; background: #fff; border: 1px solid var(--emp-line); border-radius: 14px; padding: 16px 18px 14px; box-shadow: 0 1px 4px rgba(26,20,16,.03); overflow: hidden; } #page-empresas .emp-kpi::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1.5px; background: linear-gradient(90deg, var(--emp-amber), transparent); } #page-empresas .emp-kpi-sub { margin-top: 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; color: rgba(26,20,16,.42); } #page-empresas .emp-filter-btn.active { background: var(--emp-ink); border-color: var(--emp-ink); color: #fff; } /* ── HEADER DEL DETALLE ── */ #page-clientes .cd-kpi-val.zero, #page-clientes .cd-cline.is-empty, #page-clientes .cd-cline.is-empty .cd-cline-ico, .cli-wa.is-empty, .cli-wa.is-empty .cli-wa-ico, .cli-email.is-empty, .cli-pts.zero, .cli-pts.zero .cli-pts-star { color: rgba(26,20,16,.25); } /* Acciones del header */ .topbar-right, .update-actions { align-items: center; display: flex; flex-shrink: 0; gap: 8px; } /* Botón hero primario (Nuevo pedido) — Lacca Nera */ .lx-modal .lx-btn-prime:active, .lx-confirm-ok:active { transform: translateY(1px); } /* Mono eyebrow reutilizable */ #page-empresas .emp-mono-eyebrow { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(26,20,16,.42); } /* Timeline card */ .section-core .ph { margin-bottom: 12px; } /* Empty states */ #page-empresas .emp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 80px 24px; text-align: center; color: rgba(26,20,16,.32); min-height: 380px; } #page-empresas .emp-empty-state-small { min-height: 200px; padding: 40px 24px; } #page-empresas .emp-empty-title { font-family: var(--serif); font-size: 18px; font-weight: 500; color: rgba(26,20,16,.55); margin-top: 4px; } #page-empresas .emp-empty-sub { font-family: var(--sans); font-size: 12.5px; color: rgba(26,20,16,.42); max-width: 38ch; line-height: 1.5; } /* Table cards (placeholders fase 2-5) */ #page-empresas .emp-table-card { background: #fff; border: 1px solid var(--emp-line); border-radius: 14px; overflow: hidden; } /* ═════════════════════════════════════════════════════════════════════════ v7.21.0 · EMPRESAS EN VENTA RÁPIDA Toggle CF/Empresa, card empresa, método cuenta corriente ═════════════════════════════════════════════════════════════════════════ */ /* Toggle Consumidor final / Empresa */ .mv-tipo.t-venta, .mv-tipo.t-transferencia { color: rgba(26,20,16,.78); } /* v7.21.0 · fix: anclar dropdown empresa */ /* ═══════════════════════════════════════════════════════════════════ v7.22.0 — VR · MODO EMPRESA (form Pedido B2B en columna derecha) Estilos del bloque .vr-emp-pedido-block + gating .vr-mode-empresa ═══════════════════════════════════════════════════════════════════ */ /* En modo empresa: el saldo-a-favor + reward banner del CF no aplican */ /* ═══════════════════════════════════════════════════════════════ VR EMPRESA — DARK PREMIUM THEME Transforma todo el modal en una estética oscura y sofisticada ═══════════════════════════════════════════════════════════════ */ /* ── Acento sutil en el borde del shell ── */ /* ── B2B tag sutil en el header ── */ /* ── Entrada animada al modo empresa ── */ /* Totales del pedido — mismo look que pe-foot del modal Empresas */ @media (max-width: 1100px) { } /* ═══════════════════════════════════════════════════════════════════ v7.23.0 — Edición / Anulación de pedidos B2B ═══════════════════════════════════════════════════════════════════ */ /* Modal m-pedido-empresa en modo parcial: bloquear items + descuento + empresa */ .lx-modal.pe-modo-parcial .pe-prod-search-wrap, .lx-modal.pe-modo-parcial .pe-prod-dropdown, .lx-modal.pe-modo-parcial #pe-descuento, .lx-modal.pe-modo-parcial .pe-emp-search-wrap { opacity: .48; pointer-events: none; } .lx-modal.pe-modo-parcial .pe-cart-table tbody tr { opacity: .65; pointer-events: none; } .lx-modal.pe-modo-parcial #pe-descuento { background: rgba(191,180,170,.10); } /* ═══════════════════════════════════════════════════════════════════════════ v7.24.0 — FEATURE GATE: Empresas B2B en desarrollo ═══════════════════════════════════════════════════════════════════════════ */ /* Overlay de acceso bloqueado sobre la página */ .feat-blocked-overlay { position: absolute; inset: 0; z-index: 10; background: #fdfcfb; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .feat-blocked-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 380px; text-align: center; } .feat-blocked-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(26,20,16,.04); border: 1px solid rgba(26,20,16,.08); display: flex; align-items: center; justify-content: center; color: rgba(26,20,16,.35); margin-bottom: 4px; } .feat-blocked-eyebrow { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: rgba(26,20,16,.40); text-transform: uppercase; } .feat-blocked-title { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: #1A1410; margin: 0; line-height: 1.1; } .feat-blocked-sub { font-family: var(--sans); font-size: 14px; color: rgba(26,20,16,.55); line-height: 1.55; margin: 0; max-width: 300px; } .feat-blocked-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 20px; background: rgba(26,20,16,.05); border: 1px solid rgba(26,20,16,.10); border-radius: 9px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(26,20,16,.70); cursor: pointer; transition: background .14s, border-color .14s, color .14s; } .feat-blocked-btn:hover { background: rgba(26,20,16,.08); border-color: rgba(26,20,16,.18); color: #1A1410; } /* ── 1. GLOBAL: section-core padding ─────────────────────────────────────── */ @media (max-width: 1024px) { #pages > .page.section-core { padding: 36px 32px 56px !important; } } @media (max-width: 768px) { #pages > .page.section-core { padding: 24px 18px 44px !important; } } @media (max-width: 480px) { #pages > .page.section-core { padding: 16px 12px 36px !important; } } /* ── 2. SIDEBAR / MAIN lateral ────────────────────────────────────────────── */ /* Usamos rangos min-max para NO interferir con el breakpoint ≤768px donde el sidebar desaparece y main ocupa el 100%. */ @media (min-width: 769px) and (max-width: 1050px) { .tb-nav-dropdown { width: 200px; } #main { margin-left: 200px !important; width: calc(100% - 200px) !important; } } @media (min-width: 769px) and (max-width: 900px) { .tb-nav-dropdown { width: 180px; } #main { margin-left: 180px !important; width: calc(100% - 180px) !important; } } /* ── 3. DASHBOARD ─────────────────────────────────────────────────────────── */ /* 480px: KPI más compactos, charts apilados */ @media (max-width: 480px) { #page-dashboard .nd-body { grid-template-columns: 1fr; gap: 12px; } #page-dashboard .nd-col-side { grid-template-columns: 1fr; } #page-dashboard .nd-col-side > .nd-card:first-child { grid-column: auto; } } /* ── 4. MOVIMIENTOS ──────────────────────────────────────────────────────── */ /* Page header: reducir tipografía en tablet */ @media (max-width: 1024px) { #page-movimientos .mv2-page-head-title { font-size: 28px; } #page-movimientos .mv2-page-head { margin-bottom: 18px; } } @media (max-width: 768px) { #page-movimientos .mv2-page-head-title { font-size: 26px; } #page-movimientos .mv2-page-head-sub { font-size: 13px; } #page-movimientos .mv2-page-head { margin-bottom: 14px; } } @media (max-width: 480px) { } /* KPI strip: el 4-col default colapsa demasiado tarde. Salto: 4-col → 2-col a 960px (antes de llegar al 3-col legacy de 1100px que se pisa) */ @media (max-width: 960px) { #page-movimientos .mv2-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 0; } #page-movimientos .mv2-kpi:nth-child(2) { border-right: none; } #page-movimientos .mv2-kpi:nth-child(n+3){ border-top: 1px solid rgba(26,20,16,.06); } } @media (max-width: 480px) { #page-movimientos .mv2-kpi-strip { grid-template-columns: 1fr !important; } #page-movimientos .mv2-kpi { border-right: none !important; border-top: 1px solid rgba(26,20,16,.06) !important; padding: 12px 14px; } #page-movimientos .mv2-kpi:first-child { border-top: none !important; } } /* Toolbar: búsqueda ocupa toda la fila en mobile */ @media (max-width: 640px) { #page-movimientos .mv2-toolbar { flex-direction: column; align-items: stretch; gap: 8px; } .mv2-search-wrap { flex-basis: 100%; min-width: 0; } #page-movimientos .mv2-filters { flex-wrap: wrap; gap: 6px; width: 100%; } } /* Pills de filtro: scroll horizontal en tablet/mobile */ @media (max-width: 960px) { #page-movimientos .mv2-pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } #page-movimientos .mov-inspector, #page-movimientos .mv2-pills::-webkit-scrollbar { display: none; } #page-movimientos .mv2-pill { white-space: nowrap; flex-shrink: 0; } } /* KPI numbers en 768px */ @media (max-width: 768px) { #page-movimientos .mv2-kpi-num { font-size: 24px; } #page-movimientos .mv2-kpi-num-sub { font-size: 11px; } .trf-filters, #page-movimientos .mv2-kpi { padding: 14px 16px; } } /* ── STOCK: refinamientos mobile ──────────────────────────────────────────── */ /* 960px: header stack cuando el botón está en la página (sin topbar) */ @media (max-width: 960px) { #page-stock .sk-header { align-items: flex-start; gap: 12px; } #page-stock .sk-kpi-card { padding: 14px 16px 12px !important; } #page-stock .sk-kpi-num { font-size: 36px !important; } } /* 640px: ya existen reglas — complementamos */ @media (max-width: 640px) { /* Header columna */ #page-stock .sk-header { flex-direction: column; align-items: flex-start; gap: 8px; } .sk-header-right, #page-costos .co-cat-legend, #page-stock .sk-header-right { width: 100%; } /* Eyebrow: reducir letter-spacing para que quepan en 1 línea */ #page-stock .sk-kpi-eyebrow { letter-spacing: 0.06em !important; } #page-stock .sk-kpi-num { font-size: 30px !important; } #page-costos .co-suc-pct, #page-stock .sk-kpi-num-sub { font-size: 11px; } #page-stock .sk-kpi-card { padding: 12px !important; gap: 10px !important; } /* Tabla: sticky primera columna para que el scroll sea usable */ #page-stock .sk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* 375px: versión más compacta */ @media (max-width: 420px) { #page-stock .sk-kpi-eyebrow { font-size: 8px !important; letter-spacing: 0.04em !important; } #page-stock .sk-kpi-delta { font-size: 8.5px; padding: 2px 5px; } #page-stock .sk-kpi-num { font-size: 28px !important; } #page-stock .sk-kpi-card { padding: 10px !important; gap: 8px !important; } } /* ═══════════════════════════════════════════════════════════════════ VR EMPRESA DARK — FINAL OVERRIDES (debe ir último para ganar cascada) ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ v7.26.0 — UNIFIED CARD SYSTEM (Radius + Premium Shadows) Escala: xs(6) · sm(10) · md(14) · lg(18) · xl(22) · full(999) ═══════════════════════════════════════════════════════════════════════════ */ /* ── SHADOW ENFORCEMENT — overrides all legacy "box-shadow: none" ── */ #page-dashboard .dash-panel, #page-dashboard.dashboard-core .dash-panel, #page-dashboard .nd-card, #page-stock .sk-kpi-card, .sk-table-wrap, .mv-table-card, .vc2-table-container, .co-card, #page-cierre .cc3-hero, #page-empresas .emp-card, #page-empresas .emp-kpi-card, .v3-card, .trf-card, .mvd-foot, #mov-inspector { box-shadow: var(--card-shadow) !important; border-color: rgba(26,20,16,.05) !important; } /* ── TIER 1: Cards principales (--radius-lg: 18px) ── */ /* Dashboard */ /* Empresas */ #page-dashboard.dashboard-core .dash-panel, #page-dashboard .dash-panel, #page-dashboard .nd-card, #page-stock .sk-kpi-card, #page-empresas .emp-card, #page-empresas .emp-kpi-card { border-radius: var(--radius-lg); } /* VR — right panels */ .mv-table-card, .co-card, .fid-panel { border-radius: var(--radius-lg) !important; } /* ── TIER 2: Contenedores grandes / Modales (--radius-xl: 22px) ── */ /* ── TIER 3: Sub-cards / Items internos (--radius-md: 14px) ── */ .pp-emp-card { border-radius: var(--radius-md) !important; } /* ── TIER 4: Controles / Botones / Inputs (--radius-sm: 10px) ── */ /* ── TIER 5: Tags / Badges (--radius-xs: 6px) ── */ .dash-status-dot { border-radius: var(--radius-xs) !important; } /* ── Mobile overrides — slightly smaller radii ── */ @media (max-width: 768px) { #page-dashboard .dash-panel, #page-dashboard.dashboard-core .dash-panel, #page-dashboard .nd-card, #page-stock .sk-kpi-card, .mv-table-card, .co-card { border-radius: var(--radius-md) !important; } } /* ═══════════════════════════════════════════════════════════════ v7.28.0 — BODY-AS-CARD LAYOUT Inverted visual model: content floats as white card, sidebar + topbar are the flat gray background surface. Reference: Amplitude-style — seamless gray floor, content card with rounded corners + margin, no hard edges between areas. ═══════════════════════════════════════════════════════════════ */ /* ── Background surface — cool gray floor ── */ body, #main { background: #FAFAFA !important; } /* ── Topbar: flat, seamless with sidebar ── */ .topbar { flex-shrink: 0; display: flex; align-items: center; height: 56px !important; padding: 0 20px !important; justify-content: flex-start !important; gap: 0 !important; position: relative; z-index: var(--z-nav); background: #FFFFFF !important; border-bottom: 1px solid #E5E7EB !important; box-shadow: none !important; } /* ── Sidebar: flat, no card — seamless ── */ .tb-nav-dropdown { scrollbar-width: none; position: fixed; width: 240px; padding: 0; z-index: var(--z-nav-menu); overflow: hidden; display: flex !important; flex-direction: column; background: #FFFFFF !important; border: none !important; border-right: 1px solid #E5E7EB !important; border-radius: 0 !important; box-shadow: none !important; top: 0 !important; left: 0 !important; height: 100vh !important; } /* Sidebar footer border — very subtle on gray */ .sb2-footer { flex-shrink: 0; padding: 10px 10px 14px; border-top: 1px solid #F3F4F6 !important; } /* Nav item hover adapts to gray bg */ .tb-dd-item:hover { color: #111827 !important; box-shadow: none !important; background: #F9FAFB !important; } /* Active item — subtle neutral pill on white sidebar */ .tb-dd-item.active { color: #111827 !important; font-weight: 600 !important; background: #F3F4F6 !important; box-shadow: none !important; } /* Org-status dot border → match new bg */ .sb-org-status { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #22A55A; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); transition: background 0.2s ease; border-color: #FFFFFF !important; } /* ── Pages container: floating card ── */ #pages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #FAFAFA !important; border-radius: 0; box-shadow: none !important; margin: 0; } /* ── Global ink color override — #262626 ── */ /* Sidebar text */ .tb-dd-item { display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: 9px; padding: 9px 10px; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; width: 100%; transition: all .12s ease; font-family: var(--sans, sans-serif); line-height: 1; position: relative; color: rgba(38,38,38,.6) !important; } .tb-dd-item:hover .tb-dd-icon { color: rgba(38,38,38,.55) !important; } .sb2-brand-sub, .sb2-user-loc { color: rgba(38,38,38,.5) !important; } /* Primary buttons — #262626 */ .sb2-cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 10px; margin: 0 0 6px; border: none; border-radius: 10px; font-family: var(--sans, 'Inter', sans-serif); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; line-height: 1; background: #262626 !important; color: #fff !important; } .sb2-cta:hover { box-shadow: 0 4px 14px rgba(26,20,16,.2); transform: translateY(-1px); background: #333 !important; } /* Lacca Nera buttons → #262626 base */ .v3-btn-add, .pr-save-btn, .btn-prime { background: linear-gradient(158deg, #333 0%, #262626 100%) !important; color: #fff !important; } /* v7.28.0 — Topbar controls: unified style (Movimientos reference) All search inputs, dropdown buttons, selects, and export buttons across every page match the mv2 pattern exactly. bg: rgba(26,20,16,.04) border: 1px solid rgba(26,20,16,.08) border-radius: 9px height: 32px font-size: 11.5px font-weight: 600 */ /* ── Universal topbar inputs ── */ .tb-action-zone .mv2-search-wrap .mv2-search-input, .tb-action-zone .mv2-search-input, .tb-action-zone .v3-tb-search-input, .tb-action-zone .cli-master-bar input, .tb-action-zone .pr-search-input, .tb-action-zone input[type="text"], .tb-action-zone input[type="search"], .tb-action-zone .sk-search-input { background: #E7E5E6 !important; border-radius: 9px !important; border: none !important; box-shadow: none !important; font-size: 11.5px !important; font-weight: 600 !important; height: 32px !important; } .tb-action-zone .sk-search-input:focus, .tb-action-zone .mv2-search-input:focus, .tb-action-zone .v3-tb-search-input:focus, .tb-action-zone input:focus { background: #dfdcdd !important; border: none !important; box-shadow: none !important; } /* ── Universal topbar dropdown buttons ── */ /* ── Universal topbar export / action buttons ── */ .tb-action-zone .v3-tb-export, .tb-action-zone .mv2-export-btn { background: #E7E5E6 !important; border: none !important; border-radius: 9px !important; height: 32px !important; font-size: 11.5px !important; font-weight: 600 !important; } /* v7.28.0 — Notificaciones eliminadas */ /* ═══ v7.29.0 — Filter pills junto al título + action-zone a la derecha ═══ */ /* Nav center: flex row para título + pills */ .tb-nav-center { justify-content: flex-start; padding-left: 8px; display: flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; } /* Contenedor de pills */ .tb-filter-pills { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; } /* Cada pill individual */ .tb-fpill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; background: #E7E5E6; border: none; border-radius: 7px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11px; font-weight: 600; color: rgba(38,38,38,.72); white-space: nowrap; cursor: default; transition: background .15s; } .tb-fpill-clear-all { height: 24px; padding: 0 8px; background: none; border: none; border-radius: 7px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 10.5px; font-weight: 600; color: rgba(38,38,38,.40); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; } .tb-fpill-clear-all:hover { background: rgba(38,38,38,.06); color: rgba(38,38,38,.65); } /* ── Chips relocados dentro del topbar pills zone ── */ .tb-filter-pills .mv2-active-chips, .tb-filter-pills .v3-tb-chips { display: flex !important; align-items: center; gap: 6px; flex-wrap: nowrap; margin: 0 !important; padding: 0 !important; } /* Movimientos chips → topbar pill style */ .tb-filter-pills .mv2-chip { display: inline-flex !important; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 9px !important; background: #E7E5E6 !important; border: none !important; border-radius: 7px !important; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11px !important; font-weight: 600 !important; color: rgba(38,38,38,.72) !important; cursor: pointer; } .sk-search-input:hover, .mv2-search-input:hover, .v3-tb-search-input:hover, .pr-search-input:hover, .cli-master-bar input:hover, .pr-filter-select:hover, .tb-action-zone .v3-dd-btn, .tb-action-zone .mv2-dd-btn, .tb-action-zone select, .tb-action-zone .v3-dd-btn:hover, .tb-action-zone .mv2-dd-btn:hover, .tb-action-zone select:hover, .tb-action-zone .v3-dropdown.is-open .v3-dd-btn, .tb-action-zone .v3-tb-export:hover, .tb-action-zone .mv2-export-btn:hover, .tb-filter-pills .mv2-chip:hover { background: #dfdcdd !important; } .tb-filter-pills .mv2-chip svg { width: 9px !important; height: 9px !important; color: rgba(38,38,38,.40); } /* Vencimientos chips → topbar pill style */ .tb-filter-pills .v3-af-chip { display: inline-flex !important; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 9px !important; background: #E7E5E6 !important; border: none !important; border-radius: 7px !important; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 11px !important; font-weight: 600 !important; color: rgba(38,38,38,.72) !important; } .tb-filter-pills .v3-af-chip-label { font-family: var(--sans) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: none !important; color: rgba(38,38,38,.42) !important; margin-right: 2px; } .tb-filter-pills .v3-af-chip-remove { width: 14px; height: 14px; border: none !important; background: rgba(38,38,38,.08) !important; border-radius: 50%; color: rgba(38,38,38,.45) !important; cursor: pointer; padding: 0; } .tb-filter-pills .v3-af-chip-remove:hover { background: rgba(38,38,38,.16) !important; color: rgba(38,38,38,.70) !important; } .tb-filter-pills .mv2-chip-clear, .tb-filter-pills .v3-af-clear-all { background: none !important; border-radius: 7px; border: none !important; color: rgba(38,38,38,.40) !important; cursor: pointer; font-size: 10.5px !important; font-weight: 600; height: 24px; padding: 0 8px !important; } .tb-filter-pills .mv2-chip-clear:hover, .tb-filter-pills .v3-af-clear-all:hover { background: rgba(38,38,38,.06) !important; color: rgba(38,38,38,.65) !important; } /* ── Responsive mobile sidebar ── */ /* ── Responsive ── */ @media (max-width: 768px) { .tb-nav-dropdown { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.26, 1); width: min(280px, 84vw); background: #FFFFFF !important; border-radius: 0 16px 16px 0 !important; box-shadow: 6px 0 24px rgba(26,20,16,.12) !important; } } @media (min-width: 769px) and (max-width: 960px) { #pages { margin-right: 8px !important; } } /* ═══ v7.30.0 — Dashboard dark chart cards with inner glow ═══ */ /* ── Trend hero number ── */ .nd-trend-hero { display: flex; align-items: baseline; gap: 10px; position: relative; z-index: 1; margin-bottom: 2px; } #page-dashboard .nd-trend-total { font-family: var(--sans, "Inter Tight", sans-serif) !important; font-size: 36px !important; font-weight: 700 !important; letter-spacing: -0.025em; color: #262626 !important; line-height: 1; } .nd-trend-badge { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 7px; border-radius: 6px; line-height: 1; } .sb2-badge--new, .nd-trend-badge.up { background: rgba(34,165,90,.10); color: #1a7a45; } .sb2-badge--danger, .nd-trend-badge.down { background: rgba(224,82,82,.10); color: #a83030; } .nd-trend-badge.neutral { color: rgba(26,20,16,.40); background: rgba(26,20,16,.05); } #page-dashboard .nd-trend-sub { font-family: var(--sans, "Inter Tight", sans-serif) !important; font-size: 12px !important; font-weight: 500; color: rgba(26,20,16,.38) !important; position: relative; z-index: 1; margin-bottom: 16px; } /* ── Mix on chart card ── */ /* ═══════════════════════════════════════════════════════════════ v7.31.0 — UNIFIED COLOR SYSTEM Pills · Badges · Alerts · Tags · Status dots ═══════════════════════════════════════════════════════════════ */ /* ── LX-DOT — Status indicator dot ── */ .lx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ v7.32.0 — NUEVA VENTA (drawer view) ═══════════════════════════════════════════════════════════════ */ /* ── Header ── */ .cd-nv-head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 18px 20px !important; } .cd-nv-back { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: rgba(26,20,16,.55); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; } .cd-nv-back:hover { background: rgba(26,20,16,.06); color: #262626; } .tb-mobile-menu svg, .cd-nv-back svg { height: 18px; width: 18px; } .cd-nv-head-title { font-family: var(--serif, 'Fraunces', serif); font-size: 18px; font-weight: 600; color: #262626; letter-spacing: -0.02em; } .cd-nv-head-sub { font-size: 11px; font-weight: 500; color: rgba(38,38,38,.5); margin-top: 2px; } /* ── Search ── */ .cd-nv-search { width: 100%; background: #E7E5E6; border: none; border-radius: 9px; height: 34px; padding: 0 12px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12px; font-weight: 500; color: #262626; outline: none; margin-bottom: 10px; box-sizing: border-box; transition: background .15s; } .cd-nv-search::placeholder { color: rgba(38,38,38,.38); } /* ── Section spacing ── */ .cd-nv-sec { padding: 14px 20px !important; } /* ── Product list ── */ .cd-nv-prods { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(26,20,16,.15) transparent; } .cd-nv-prods::-webkit-scrollbar-thumb { background: rgba(26,20,16,.15); border-radius: 999px; } .cd-nv-prod { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; } .sb2-user:hover, .cd-nv-prod:hover { background: rgba(26,20,16,.04); } .cd-nv-prod.in-cart .cd-nv-prod-add { background: #E8663A; color: #fff; } .cd-nv-prod-name { font-size: 12.5px; font-weight: 600; color: #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-nv-prod-meta { font-size: 10px; font-weight: 500; color: rgba(38,38,38,.45); } .cd-nv-prod-price { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; color: rgba(38,38,38,.6); white-space: nowrap; flex-shrink: 0; } .cd-nv-prod-add { width: 26px; height: 26px; border-radius: 7px; background: rgba(26,20,16,.05); color: rgba(26,20,16,.45); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; transition: background .15s, color .15s; } .cd-nv-prod:hover .cd-nv-prod-add { background: rgba(26,20,16,.10); color: #262626; } .cd-nv-empty { text-align: center; padding: 16px; font-size: 11px; color: rgba(38,38,38,.4); } /* ── Cart ── */ .cd-nv-cart { display: flex; flex-direction: column; gap: 1px; background: rgba(26,20,16,.03); border-radius: 10px; overflow: hidden; } .cd-nv-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #fff; } .sb2-user-info, .cd-nv-prod-info, .cd-nv-item-info { display: flex; flex-direction: column; flex: 1; gap: 1px; min-width: 0; } .cd-nv-item-name { font-size: 12px; font-weight: 600; color: #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-nv-item-price { font-size: 9.5px; font-weight: 500; color: rgba(38,38,38,.4); font-family: var(--mono, monospace); } .cd-nv-item-qty { width: 52px; height: 28px; border: 1px solid rgba(26,20,16,.10); border-radius: 7px; text-align: center; font-family: var(--mono, monospace); font-size: 12px; font-weight: 600; color: #262626; background: #fafafa; outline: none; flex-shrink: 0; transition: border-color .15s; } .cd-nv-item-qty:focus { border-color: #E8663A; } .cd-nv-item-sub { font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; color: #262626; white-space: nowrap; min-width: 56px; text-align: right; flex-shrink: 0; } .cd-nv-item-del { width: 24px; height: 24px; border: none; background: transparent; color: rgba(26,20,16,.3); font-size: 16px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s; } .cd-nv-item-del:hover { background: rgba(224,82,82,.08); color: #E05252; } /* ── Total ── */ .cd-nv-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 0; margin-top: 8px; } .cd-nv-total-lbl { font-family: var(--mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(38,38,38,.45); } .cd-nv-total-num { font-family: var(--serif, serif); font-size: 24px; font-weight: 600; color: #E8663A; letter-spacing: -0.02em; } /* ── Payment method ── */ .sk-fpill-row, .cd-nv-pago { display: flex; flex-wrap: wrap; gap: 6px; } .cd-nv-pago-btn { flex: 1; min-width: 0; height: 32px; border: 1px solid rgba(26,20,16,.10); border-radius: 8px; background: #fff; font-family: var(--sans, sans-serif); font-size: 11px; font-weight: 600; color: rgba(38,38,38,.6); cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; padding: 0 6px; white-space: nowrap; } .cd-nv-pago-btn:hover { border-color: rgba(26,20,16,.20); color: #262626; } .cd-nv-pago-btn.active { background: #E8663A; border-color: #E8663A; color: #fff; box-shadow: 0 2px 8px rgba(232,102,58,.25); } /* ── Caja info ── */ .cd-nv-caja-info { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .cd-nv-caja-saldo { font-size: 11.5px; color: rgba(38,38,38,.6); } .cd-nv-caja-saldo strong { color: #22A55A; font-weight: 700; } .cd-nv-caja-warn { font-size: 11px; font-weight: 600; color: #E05252; } /* ── Stock toggle ── */ .sk-filter-top, .trf-filter-group, .cd-nv-toggle-row { align-items: center; display: flex; gap: 12px; } .cd-nv-toggle-label { font-size: 12px; font-weight: 600; color: #262626; display: block; } .cd-nv-toggle-hint { font-size: 10px; color: rgba(38,38,38,.42); display: block; margin-top: 2px; } .cd-nv-toggle { width: 40px; height: 22px; border-radius: 11px; border: none; background: rgba(26,20,16,.12); cursor: pointer; position: relative; flex-shrink: 0; transition: background .2s; padding: 0; } .cd-nv-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .2s cubic-bezier(.16,1,.3,1); } .cd-nv-toggle.active .cd-nv-toggle-knob { transform: translateX(18px); } /* ── Footer override for nv ── */ .cd-nv-view .cd-foot { gap: 8px; } /* ═══════════════════════════════════════════════════════════════ v7.32.0 — VENCIMIENTOS: Modal Resolver (venc-descartar) ═══════════════════════════════════════════════════════════════ */ .venc-descartar-box { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(38,38,38,.06), 0 8px 32px rgba(26,20,16,.16), 0 24px 56px rgba(26,20,16,.10); padding: 28px 28px 22px; width: 380px; max-width: 92vw; animation: vdSlideIn .28s cubic-bezier(.16,1,.3,1) both; } @keyframes vdSlideIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .venc-descartar-title { font-family: var(--serif, 'Fraunces', serif); font-size: 17px; font-weight: 600; color: #262626; letter-spacing: -0.02em; margin-bottom: 6px; } .venc-descartar-prod { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; color: rgba(38,38,38,.50); letter-spacing: 0.02em; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(38,38,38,.07); } .venc-descartar-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 1px solid rgba(38,38,38,.10); border-radius: 10px; background: #fff; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 600; color: #262626; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; text-align: left; line-height: 1.2; } .venc-descartar-btn svg { flex-shrink: 0; opacity: .55; transition: opacity .15s; } .venc-descartar-btn:hover svg { opacity: .85; } /* Critico (descartado) */ .venc-descartar-btn.critico:hover { background: rgba(224,82,82,.05); border-color: rgba(224,82,82,.30); color: var(--c-red-ink, #A83030); box-shadow: 0 0 0 3px rgba(224,82,82,.06); } .venc-descartar-btn.critico:hover svg { stroke: var(--c-red, #E05252); opacity: 1; } /* OK (vendido) */ .venc-descartar-btn.ok:hover { background: rgba(34,165,90,.05); border-color: rgba(34,165,90,.30); color: var(--c-green-ink, #1A7A45); box-shadow: 0 0 0 3px rgba(34,165,90,.06); } .venc-descartar-btn.ok:hover svg { stroke: var(--c-green, #22A55A); opacity: 1; } /* Error (eliminar) */ .venc-descartar-btn.error:hover { background: rgba(38,38,38,.03); border-color: rgba(38,38,38,.18); box-shadow: 0 0 0 3px rgba(38,38,38,.04); } /* Separator */ .venc-descartar-sep { height: 1px; background: rgba(38,38,38,.07); margin: 10px 0; } /* Transformar (disabled) */ .venc-descartar-btn.transformar { opacity: .45; cursor: not-allowed; position: relative; border-style: dashed; } .venc-descartar-btn.transformar:hover { background: transparent; border-color: rgba(38,38,38,.10); box-shadow: none; transform: none; } .venc-descartar-soon { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(38,38,38,.35); font-family: var(--mono, monospace); } /* Cancel */ .venc-descartar-cancel { display: block; width: 100%; margin-top: 12px; padding: 9px 0; border: none; background: transparent; font-family: var(--sans, sans-serif); font-size: 12px; font-weight: 600; color: rgba(38,38,38,.45); cursor: pointer; border-radius: 8px; transition: background .12s, color .12s; text-align: center; } /* ═══════════════════════════════════════════════════════════════ v7.32.0 — Pago Empresa: Toggle "Impactar en caja del día" ═══════════════════════════════════════════════════════════════ */ .pp-modo-btn, .pp-caja-btn { align-items: flex-start; background: rgba(26,20,16,.03); border-radius: 11px; border: 1.5px solid rgba(26,20,16,.10); color: rgba(26,20,16,.45); cursor: pointer; display: flex; flex-direction: column; font-family: var(--sans); font-size: 12.5px; font-weight: 600; gap: 4px; padding: 11px 13px; text-align: left; transition: all .18s ease; } .pp-modo-btn svg, .pp-caja-btn svg { color: currentColor; margin-bottom: 2px; opacity: .65; } .pp-caja-btn em { font-style: normal; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: rgba(26,20,16,.30); line-height: 1.4; } .pp-modo-btn:hover, .pp-caja-btn:hover { background: rgba(26,20,16,.06); border-color: rgba(26,20,16,.18); color: rgba(26,20,16,.75); } /* Sí activo → verde (suma a caja) */ .pp-caja-btn.active[data-caja="si"] { background: rgba(34,165,90,.07); border-color: rgba(34,165,90,.35); color: #1A7A45; } .pp-caja-btn.active[data-caja="si"] em { color: rgba(34,165,90,.6); } /* No activo → neutro slate */ .pp-caja-btn.active[data-caja="no"] { background: rgba(38,38,38,.06); border-color: rgba(38,38,38,.30); color: #262626; } .pp-caja-btn.active[data-caja="no"] em { color: rgba(38,38,38,.5); } /* ═══════════════════════════════════════════════════════════════ v7.32.0 — Empresas UX improvements ═══════════════════════════════════════════════════════════════ */ /* Search input wrap — relative for absolute clear button */ .emp-search-clr { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(26,20,16,.08); color: rgba(26,20,16,.55); cursor: pointer; align-items: center; justify-content: center; padding: 0; transition: background .15s, color .15s; } .emp-search-clr:hover { background: rgba(26,20,16,.18); color: #262626; } /* Toolbar actions zone (export, etc.) */ .emp-toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; } .emp-toolbar-export { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #E7E5E6; border: none; border-radius: 9px; font-family: var(--sans, sans-serif); font-size: 11.5px; font-weight: 600; color: #262626; cursor: pointer; transition: background .15s; } .emp-toolbar-export svg { opacity: .65; } .emp-toolbar-export:hover svg { opacity: .9; } /* Card focus visible (accesibilidad) */ .emp-card:focus-visible { outline: 2px solid #262626; outline-offset: -2px; } /* Mini stats grid (v7.32.0) */ .emp-exp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; padding: 16px; background: rgba(26,20,16,.025); border-radius: 12px; border: 1px solid rgba(26,20,16,.06); } .emp-exp-stat-value { font-family: var(--serif, serif); font-size: 19px; font-weight: 600; color: #262626; letter-spacing: -0.02em; line-height: 1.1; } .emp-exp-stat-sub { font-size: 10.5px; font-weight: 500; color: rgba(38,38,38,.45); } /* ═══════════════════════════════════════════════════════════════ v7.32.0 — Modal detalle de pedido (pdv-) ═══════════════════════════════════════════════════════════════ */ .pdv-overlay { position: fixed; inset: 0; z-index: var(--z-overlay-top); background: rgba(26,20,16,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: pdvFadeIn .22s ease both; } @keyframes pdvFadeIn { from { opacity: 0; } to { opacity: 1; } } .pdv-modal { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(38,38,38,.06), 0 12px 40px rgba(26,20,16,.18), 0 28px 60px rgba(26,20,16,.10); width: 560px; max-width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; animation: pdvScaleIn .28s cubic-bezier(.16,1,.3,1) both; } @keyframes pdvScaleIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* HEADER */ .pdv-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(38,38,38,.06); flex-shrink: 0; } .pdv-eyebrow { font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(38,38,38,.45); margin-bottom: 6px; } .pdv-title { font-family: var(--serif, 'Fraunces', serif); font-size: 22px; font-weight: 600; color: #262626; letter-spacing: -0.02em; margin: 0; } .pdv-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: rgba(38,38,38,.45); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s; } /* Badges */ .pdv-badge { display: inline-flex; align-items: center; font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap; } .pdv-badge--warn, .pdv-badge--amber { background: rgba(212,136,42,.12); color: #9A6200; } .pdv-badge--neutral { background: rgba(38,38,38,.08); color: rgba(38,38,38,.6); } /* Meta grid (fecha, vencimiento, items) */ .pdv-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; background: rgba(26,20,16,.025); border-radius: 10px; } .trf-prod-info, .pdv-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pdv-meta-lbl { font-family: var(--mono, monospace); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(38,38,38,.45); } .pdv-meta-val { font-size: 12.5px; font-weight: 600; color: #262626; } /* Sections */ .pdv-sec-lbl { font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(38,38,38,.55); } /* Items list */ .pdv-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; } .notif-item-body, .pdv-item-main { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; } .pdv-item-name { font-size: 13px; font-weight: 600; color: #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdv-item-meta { font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 500; color: rgba(38,38,38,.50); letter-spacing: 0.01em; } .pdv-item-sub { font-family: var(--mono, monospace); font-size: 13px; font-weight: 700; color: #262626; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } .pdv-empty { padding: 18px; background: rgba(38,38,38,.03); border-radius: 10px; text-align: center; font-size: 12px; color: rgba(38,38,38,.45); } /* Totales */ .pdv-totales { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: rgba(38,38,38,.025); border-radius: 10px; } .pdv-tot-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; } .pdv-tot-lbl { font-weight: 500; color: rgba(38,38,38,.62); } .pdv-tot-val { font-family: var(--mono, monospace); font-weight: 700; color: #262626; font-variant-numeric: tabular-nums; } .pdv-tot-final { padding-top: 8px; margin-top: 4px; border-top: 1px solid rgba(38,38,38,.08); } .pdv-tot-final .pdv-tot-lbl { font-family: var(--serif, serif); font-size: 14px; font-weight: 600; color: #262626; } .pdv-tot-final .pdv-tot-val { font-family: var(--serif, serif); font-size: 18px; letter-spacing: -0.02em; color: #E8663A; } /* Pagos aplicados */ .pdv-items, .pdv-pagos { background: rgba(38,38,38,.06); border-radius: 10px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; } .pdv-pago-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff; font-size: 12px; } .pdv-pago-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pdv-pago-medio { font-family: var(--mono, monospace); font-size: 10px; font-weight: 500; color: rgba(38,38,38,.5); letter-spacing: 0.02em; } .pdv-caja-tag { display: inline-block; padding: 1px 5px; background: rgba(34,165,90,.12); color: #1A7A45; border-radius: 4px; font-size: 9px; font-weight: 700; margin-left: 4px; } .pdv-pago-monto { font-family: var(--mono, monospace); font-weight: 700; color: #1A7A45; font-variant-numeric: tabular-nums; } /* Observaciones */ .pdv-obs { padding: 12px 14px; background: rgba(38,38,38,.025); border-radius: 10px; font-size: 12.5px; color: rgba(38,38,38,.75); line-height: 1.5; white-space: pre-wrap; } /* FOOTER */ .pdv-foot { display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-top: 1px solid rgba(38,38,38,.06); background: rgba(38,38,38,.015); flex-shrink: 0; } .pdv-btn-ghost, .pdv-btn-prime { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9px; font-family: var(--sans, sans-serif); font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; } .pdv-btn-ghost { background: transparent; color: rgba(38,38,38,.65); border: 1px solid rgba(38,38,38,.12); } .pdv-btn-ghost:hover { background: rgba(38,38,38,.04); color: #262626; border-color: rgba(38,38,38,.22); } .pdv-btn-prime { margin-left: auto; background: #262626; color: #fff; box-shadow: 0 2px 8px rgba(26,20,16,.18); } .pdv-btn-prime:hover { background: #333; box-shadow: 0 4px 14px rgba(26,20,16,.24); } /* ═══════════════════════════════════════════════════════════════ v7.32.0 — Empresa: Lista de Pedidos rediseñada (empd-) ═══════════════════════════════════════════════════════════════ */ .co-top-cats-list, .empd-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } /* HEAD: title + count + stats */ .lx-modal-foot.pe-foot, .empd-head { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; } .empd-head-left { display: flex; align-items: baseline; gap: 10px; } .empd-head-title { font-family: var(--serif, 'Fraunces', serif); font-size: 16px; font-weight: 600; color: #262626; letter-spacing: -0.02em; } .empd-head-count { font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(38,38,38,.40); } .empd-head-stats { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; } .empd-stat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: rgba(38,38,38,.04); color: rgba(38,38,38,.60); } .empd-stat-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } .empd-stat--warn { background: rgba(212,136,42,.10); color: #9A6200; } .empd-stat--neutral { background: rgba(38,38,38,.06); color: rgba(38,38,38,.55); } /* CARD */ .empd-card { position: relative; display: grid; grid-template-columns: 130px 1fr 180px auto; gap: 18px; align-items: stretch; padding: 14px 16px 14px 22px; background: #fff; border: 1px solid rgba(38,38,38,.07); border-radius: 12px; transition: border-color .15s, box-shadow .15s, transform .15s; overflow: hidden; } .empd-card:hover { border-color: rgba(38,38,38,.14); box-shadow: 0 4px 16px rgba(26,20,16,.06), 0 1px 3px rgba(26,20,16,.04); } /* Color rail (border-left visual) */ .empd-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--empd-rail, rgba(38,38,38,.20)); border-radius: 4px 0 0 4px; } /* Paid variant: subtle desaturation */ .empd-card.is-pagado { background: rgba(34,165,90,.025); border-color: rgba(34,165,90,.18); } .empd-card.is-pagado .empd-num, .empd-card.is-pagado .empd-monto-val { color: rgba(38,38,38,.55); } .empd-card.is-anulado { opacity: .55; } .empd-card.is-anulado .empd-num { text-decoration: line-through; color: rgba(38,38,38,.40); } /* Vencido: subtle red glow */ .empd-card.is-vencido { background: linear-gradient(90deg, rgba(224,82,82,.04) 0%, transparent 30%); border-color: rgba(224,82,82,.22); } /* ID column */ .empd-id { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; } .empd-num { font-family: var(--mono, monospace); font-size: 15px; font-weight: 700; color: #262626; letter-spacing: 0.02em; line-height: 1; } .empd-date { font-size: 10.5px; font-weight: 600; color: rgba(38,38,38,.50); } .empd-badge { display: inline-flex; align-items: center; font-family: var(--mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; width: fit-content; margin-top: 2px; } /* ITEMS preview column */ .empd-items { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-left: 1px solid rgba(38,38,38,.06); padding-left: 18px; } .empd-items-head { display: flex; align-items: baseline; gap: 8px; } .emp-exp-stat-label, .empd-items-count { color: rgba(38,38,38,.45); font-family: var(--mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .empd-items-qty { font-family: var(--mono, monospace); font-size: 10px; font-weight: 600; color: rgba(38,38,38,.45); } .empd-items-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .empd-item { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; font-weight: 500; color: #262626; line-height: 1.3; } .empd-item-qty { font-family: var(--mono, monospace); font-weight: 700; color: rgba(38,38,38,.85); font-variant-numeric: tabular-nums; flex-shrink: 0; } .empd-item-unit { font-size: 9px; font-weight: 500; margin-left: 2px; color: rgba(38,38,38,.40); } .empd-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(38,38,38,.78); } .empd-item-more { font-family: var(--mono, monospace); font-size: 10px; font-weight: 600; color: rgba(232,102,58,.85); letter-spacing: 0.02em; padding-top: 1px; } .empd-items-empty { font-size: 11px; font-style: italic; color: rgba(38,38,38,.40); } /* META column (total + saldo + venc) */ .empd-meta { display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: right; border-left: 1px solid rgba(38,38,38,.06); padding-left: 18px; } .empd-monto-lbl { font-family: var(--mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(38,38,38,.45); } .empd-monto-val { font-family: var(--serif, serif); font-size: 19px; font-weight: 600; color: #262626; letter-spacing: -0.02em; line-height: 1; } .empd-saldo { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 4px; font-size: 11px; color: rgba(38,38,38,.50); } .empd-saldo strong { font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; color: #A83030; } .empd-progress { height: 3px; background: rgba(38,38,38,.08); border-radius: 999px; overflow: hidden; margin-top: 4px; } .empd-progress-fill { height: 100%; background: linear-gradient(90deg, #22A55A, #2EBD68); border-radius: 999px; transition: width .4s cubic-bezier(.16,1,.3,1); } .empd-saldado-stamp { display: inline-flex; align-items: center; gap: 4px; align-self: flex-end; padding: 3px 9px; background: rgba(34,165,90,.10); border: 1px solid rgba(34,165,90,.25); border-radius: 5px; font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1A7A45; margin-top: 4px; } /* Vencimiento tags */ .empd-venc-tag { display: inline-flex; align-items: center; align-self: flex-end; padding: 3px 8px; border-radius: 5px; font-family: var(--mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .empd-venc-tag--ok { background: rgba(38,38,38,.05); color: rgba(38,38,38,.55); } .empd-venc-plain { font-size: 10.5px; color: rgba(38,38,38,.45); align-self: flex-end; } /* ACTIONS column */ .empd-actions { display: flex; align-items: center; gap: 4px; border-left: 1px solid rgba(38,38,38,.06); padding-left: 12px; } .empd-act { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: none; background: transparent; border-radius: 7px; color: rgba(38,38,38,.55); font-family: var(--sans, sans-serif); font-size: 11px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; } .empd-act svg { opacity: .8; } .pdv-close:hover, .empd-act:hover { background: rgba(38,38,38,.06); color: #262626; } .empd-act--primary span { display: inline; } /* Responsive: stack on narrow */ @media (max-width: 980px) { .empd-card { grid-template-columns: 100px 1fr; gap: 12px; } .empd-meta, .empd-actions { grid-column: 1 / -1; border-left: none; padding-left: 0; border-top: 1px solid rgba(38,38,38,.06); padding-top: 10px; margin-top: 4px; text-align: left; flex-direction: row; justify-content: space-between; } .empd-actions { justify-content: flex-end; } .empd-items { border-left: none; padding-left: 0; } } /* ═══════════════════════════════════════════════════════════════════ v7.32.0 — GLOBAL DESIGN SYSTEM (lxg-*) Sistema unificado extraído de Stock/Movimientos/Dashboard/Modales/Pedido. Reemplaza patrones legacy (ej. tabla vencimientos). ═══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── TYPOGRAPHY UTILITIES ───────────────────────────────────────────────────────────────── */ /* Eyebrow: mono uppercase tracker — para labels de sección y stats */ .lxg-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lxg-ink-45); } /* Section label: eyebrow con punto opcional */ .lxg-sec-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lxg-ink-60); } /* Hero number serif — KPIs principales */ .lxg-hero { font-family: var(--serif, 'Fraunces', serif); font-size: 30px; font-weight: 600; letter-spacing: -0.025em; color: var(--lxg-ink); line-height: 1; } .lxg-hero--sm { font-size: 22px; } /* Section title — Fraunces medio */ .lxg-title { font-family: var(--serif, serif); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--lxg-ink); } .lxg-title--lg { font-size: 19px; } /* Mono utility — fechas/montos/IDs con tabular nums */ .lxg-mono { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; } /* ───────────────────────────────────────────────────────────────── TABLE COMPONENT (canonical) ───────────────────────────────────────────────────────────────── */ .lxg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: var(--lxg-ink); } .sk-table thead tr, .lxg-table thead tr { background: #f2f1ef; border-bottom: 1.5px solid rgba(26,20,16,.08); } .lxg-table th { text-align: left; padding: 10px 14px; font-family: var(--mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lxg-ink-45); border-bottom: 1px solid rgba(38,38,38,.08); background: rgba(38,38,38,.02); } .lxg-table td { padding: 13px 14px; border-bottom: 1px solid rgba(38,38,38,.06); vertical-align: middle; } .lxg-table tbody tr { transition: background var(--lxg-dur-fast); } .lxg-table tbody tr:hover td { background: var(--lxg-surface-hover-soft); } .co-equil-card, .co-proy-util-card, .lxg-table .lxg-td-center { text-align: center; } /* ───────────────────────────────────────────────────────────────── BUTTONS — canonical (prime / ghost / icon) ───────────────────────────────────────────────────────────────── */ .lxg-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--lxg-r-md); font-family: var(--sans, sans-serif); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--lxg-dur-fast), color var(--lxg-dur-fast), border-color var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast); white-space: nowrap; line-height: 1; } .lxg-btn--prime { background: linear-gradient(158deg, #333 0%, #262626 100%); color: #fff !important; box-shadow: 0 2px 8px rgba(26,20,16,.18); } .lxg-btn--prime svg { color: #fff !important; stroke: #fff !important; } .lxg-btn--prime:hover { background: linear-gradient(158deg, #3a3a3a 0%, #2d2d2d 100%); box-shadow: 0 4px 14px rgba(26,20,16,.24); color: #fff !important; } .lxg-btn--prime:disabled { color: rgba(255,255,255,.4) !important; } .lxg-btn--ghost { background: transparent; color: var(--lxg-ink-60); border-color: rgba(38,38,38,.12); } .lxg-btn--ghost:hover { background: rgba(38,38,38,.04); color: var(--lxg-ink); border-color: rgba(38,38,38,.22); } .lxg-btn--ember { background: #E8663A; color: #fff; box-shadow: 0 2px 8px rgba(232,102,58,.28); } .lxg-btn--ember:hover { background: #F0764A; box-shadow: 0 4px 14px rgba(232,102,58,.38); } .lxg-btn--sm { height: 28px; padding: 0 10px; font-size: 11px; } .lxg-btn--lg { height: 40px; padding: 0 18px; font-size: 13px; } .cd-nv-view .cd-prime:disabled, .lxg-btn:disabled { opacity: .4; pointer-events: none; } /* Icon-only button */ .lxg-icon-btn { width: 30px; height: 30px; border-radius: 7px; border: none; background: transparent; color: var(--lxg-ink-60); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--lxg-dur-fast), color var(--lxg-dur-fast); padding: 0; } .lxg-icon-btn:hover { background: rgba(38,38,38,.06); color: var(--lxg-ink); } /* ───────────────────────────────────────────────────────────────── MODAL — canonical (síntesis lx-modal + pdv-) ───────────────────────────────────────────────────────────────── */ .lxg-modal-overlay { position: fixed; inset: 0; z-index: var(--z-overlay-top); background: rgba(26,20,16,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: lxgFadeIn .22s ease both; } @keyframes lxgFadeIn { from { opacity: 0; } to { opacity: 1; } } .lxg-modal { background: var(--lxg-surface-card); border-radius: var(--lxg-r-xl); box-shadow: var(--lxg-shadow-modal); width: 520px; max-width: calc(100vw - 32px); max-height: min(90vh, 940px); display: flex; flex-direction: column; overflow: hidden; animation: lxgScaleIn .26s var(--lxg-ease-out) both; } @keyframes lxgScaleIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .lxg-modal--sm { width: 420px; } .lxg-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 18px; border-bottom: var(--lxg-border-faint); flex-shrink: 0; } .pdv-body, .lxg-modal-body { display: flex; flex-direction: column; flex: 1; gap: 20px; overflow-y: auto; padding: 18px 24px 24px; scrollbar-color: rgba(38,38,38,.18) transparent; scrollbar-width: thin; } .lxg-modal-foot { display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-top: var(--lxg-border-faint); background: rgba(38,38,38,.015); flex-shrink: 0; } .topbar #tb-action-zone.tb-action-zone, .lxg-modal-foot > .lxg-btn--prime { margin-left: auto; } .lxg-modal-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(38,38,38,.12); background: transparent; color: var(--lxg-ink-45); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--lxg-dur-fast), border-color var(--lxg-dur-fast), color var(--lxg-dur-fast), transform .25s var(--lxg-ease-out); } .lxg-modal-close:hover { background: rgba(38,38,38,.04); border-color: var(--lxg-ink); color: var(--lxg-ink); transform: rotate(90deg); } /* ───────────────────────────────────────────────────────────────── SECTION header (used in modals, drawers, page cards) ───────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ v7.32.0 — Reconciliar Lotes (Vencimientos KPI "Sin Controlar") Prefijo: rl- · Reusa tokens LXG donde es posible ═══════════════════════════════════════════════════════════════ */ /* SR-only utility (a11y) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .rl-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--lxg-ink-45); margin-top: 4px; } .rl-verified-tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--lxg-r-sm); background: rgba(34,165,90,.10); color: #1A7A45; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Status banner — usa LXG semantic colors */ .rl-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--lxg-r-lg); font-size: 12.5px; font-weight: 600; border: 1px solid transparent; } .rl-status-icon { flex-shrink: 0; opacity: .9; } /* Comparison: stock vs lotes */ .rl-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 16px 18px; background: var(--lxg-surface-tinted); border-radius: var(--lxg-r-lg); } .rl-compare-side { display: flex; flex-direction: column; gap: 4px; text-align: center; align-items: center; } .rl-compare-arrow { color: var(--lxg-ink-30); display: flex; align-items: center; justify-content: center; } .rl-num-unit { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--lxg-ink-45); margin-left: 4px; } .rl-modif-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--lxg-ink-30); letter-spacing: .04em; margin-top: 3px; } /* ─── Acciones con jerarquía (P0/E1) ─── */ .rl-action { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: var(--lxg-r-lg); background: #fff; border: 1px solid rgba(38,38,38,.10); cursor: pointer; text-align: left; font-family: var(--sans); transition: border-color var(--lxg-dur-fast), background var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast), transform .1s; margin-bottom: 6px; } .rl-action:hover { border-color: rgba(38,38,38,.18); background: rgba(38,38,38,.015); } .rl-action:disabled { opacity: .45; pointer-events: none; } .rl-action-icon { width: 38px; height: 38px; border-radius: var(--lxg-r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rl-action-sub { font-size: 11px; font-weight: 500; color: var(--lxg-ink-45); margin-top: 3px; line-height: 1.35; } .rl-text-danger, .rl-text-danger strong { color: var(--c-red-ink); } /* Primary action — ember filled */ .rl-action--primary { background: #E8663A; border-color: #E8663A; color: #fff; box-shadow: 0 2px 10px rgba(232,102,58,.28); } .rl-action--primary:hover { background: #F0764A; border-color: #F0764A; box-shadow: 0 4px 16px rgba(232,102,58,.38); transform: translateY(-1px); } .rl-action--primary .rl-action-sub { color: rgba(255,255,255,.85); } .rl-action--primary .rl-action-title, .rl-action--primary .rl-action-sub strong { color: #fff; } .rl-action--primary .rl-action-icon { background: rgba(255,255,255,.18); color: #fff; } /* Secondary action — outline ember */ .rl-action--secondary:hover:not(:disabled) { border-color: rgba(232,102,58,.35); background: rgba(232,102,58,.03); } /* Tertiary — link discreto */ .rl-action-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 10px; background: transparent; border: none; border-radius: var(--lxg-r-sm); color: var(--lxg-ink-60); font-family: var(--sans); font-size: 11.5px; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(38,38,38,.15); text-underline-offset: 3px; transition: color var(--lxg-dur-fast), background var(--lxg-dur-fast); } .rl-action-link:hover { color: var(--lxg-ink); background: rgba(38,38,38,.04); text-decoration-color: var(--lxg-ink-45); } /* ─── Empty state (P1/C3) ─── */ .rl-empty-state { text-align: center; padding: 28px 20px; background: var(--lxg-surface-tinted); border-radius: var(--lxg-r-lg); } .rl-empty-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: rgba(212,136,42,.12); color: #9A6200; align-items: center; justify-content: center; margin-bottom: 12px; } .rl-empty-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--lxg-ink); letter-spacing: -0.01em; } .rl-empty-sub { font-size: 12px; color: var(--lxg-ink-60); margin-top: 6px; margin-bottom: 16px; } .rl-empty-actions { display: inline-flex; flex-direction: column; gap: 8px; align-items: center; } /* ─── Edición manual colapsable (P0/E2) ─── */ .rl-manual { border: 1px solid rgba(38,38,38,.08); border-radius: var(--lxg-r-lg); background: rgba(38,38,38,.015); overflow: hidden; } .rl-manual[open] { background: #fff; border-color: rgba(38,38,38,.14); } .rl-manual-summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; list-style: none; transition: background var(--lxg-dur-fast); } .rl-manual-summary:hover { background: rgba(38,38,38,.03); } .rl-manual-summary-text { flex: 1; font-size: 12px; font-weight: 600; color: var(--lxg-ink); } .rl-manual-summary-count { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lxg-ink-45); padding: 2px 7px; background: rgba(38,38,38,.06); border-radius: var(--lxg-r-sm); } .rl-manual-chevron { color: var(--lxg-ink-45); transition: transform var(--lxg-dur); } .rl-manual-body { padding: 4px 14px 14px; border-top: 1px solid rgba(38,38,38,.06); margin-top: 0; display: flex; flex-direction: column; gap: 10px; } /* ─── Lotes list ─── */ .rl-lotes { display: flex; flex-direction: column; gap: 1px; background: rgba(38,38,38,.06); border-radius: var(--lxg-r-md); overflow: hidden; } .rl-lote { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fff; } .rl-lote-empty { background: var(--c-amber-soft); } .rl-lote-codigo { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--lxg-ink); letter-spacing: 0.02em; } .rl-lote-venc { font-size: 10px; font-weight: 500; color: var(--lxg-ink-45); } .rl-lote-input { width: 72px; height: 28px; text-align: right; border: 1px solid rgba(38,38,38,.12); border-radius: var(--lxg-r-md); font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--lxg-ink); background: #fafafa; padding: 0 8px; outline: none; font-variant-numeric: tabular-nums; transition: border-color var(--lxg-dur-fast), background var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast); } .rl-lote-input:focus { border-color: #E8663A; background: #fff; box-shadow: 0 0 0 3px var(--c-ember-soft); } .rl-lote-input::placeholder { color: var(--lxg-ink-30); font-weight: 500; font-style: italic; } .rl-lote-unit { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--lxg-ink-45); min-width: 22px; } /* Total bar inside manual */ .rl-lotes-total { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: rgba(38,38,38,.04); border-radius: var(--lxg-r-md); } .rl-lotes-total-val { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--lxg-ink); font-variant-numeric: tabular-nums; transition: color var(--lxg-dur-fast); } .rl-lotes-total-val.rl-total-ok { color: var(--c-green-ink); } .rl-lotes-total-val.rl-total-ok::after { content: " ✓"; font-family: var(--sans); } .rl-manual-foot { display: flex; justify-content: flex-end; } /* v7.32.0 — Confirm modal body */ .lxg-confirm-body { font-size: 13px; line-height: 1.5; color: var(--lxg-ink-80); margin: 0; } .lxg-confirm-body strong { font-family: var(--mono, monospace); font-weight: 700; color: var(--lxg-ink); } /* ═══════════════════════════════════════════════════════════════ v7.32.0 — CARGA MASIVA v2 (cart-style cm2-) v7.33.0 — Spacing fix pass (gap/padding/breathing) ═══════════════════════════════════════════════════════════════ */ #page-carga.cm2 { flex-direction: column; gap: 24px; padding: 32px 32px 100px 32px; width: 100%; box-sizing: border-box; } #page-carga.cm2.active { display: flex !important; } /* HEAD — minimal context line */ .cm2-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 4px; } .cm2-head-context-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Icono persistente: flecha bajando en loop · check al confirmar */ .cm2-head-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--lxg-r-md); background: var(--c-ember-soft); color: var(--c-ember-ink); overflow: hidden; transition: background .28s ease, color .28s ease; } .cm2-head-icon-svg { position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin: -8px 0 0 -8px; } /* Default: flecha bajando — movimiento lineal constante + fade ease-in-out en bordes */ .cm2-head-icon--default { animation: cm2ArrowSlide 1.8s linear infinite, cm2ArrowFade 1.8s ease-in-out infinite; } @keyframes cm2ArrowSlide { from { transform: translateY(-16px); } to { transform: translateY(16px); } } @keyframes cm2ArrowFade { 0%, 100% { opacity: 0; } 22%, 78% { opacity: 1; } } /* Check: oculto por default */ .cm2-head-icon--check { opacity: 0; transform: scale(.6); stroke-dasharray: 24; stroke-dashoffset: 24; transition: opacity .28s ease, transform .35s cubic-bezier(.16,1,.3,1); } /* Estado: éxito — pausa la flecha y dibuja el check verde */ .cm2-head-icon.is-success { background: rgba(34,165,90,.14); color: #1A7A45; } .cm2-head-icon.is-success .cm2-head-icon--default { opacity: 0; animation: none; } .cm2-head-icon.is-success .cm2-head-icon--check { opacity: 1; transform: scale(1); animation: cm2HeadCheckDraw .42s cubic-bezier(.16,1,.3,1) forwards; } @keyframes cm2HeadCheckDraw { to { stroke-dashoffset: 0; } } .cm2-head-context { margin: 0; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--lxg-ink-60); letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cm2-head-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; background: var(--c-ember-soft); color: var(--c-ember-ink); border: 1px solid var(--c-ember-line); border-radius: var(--lxg-r-pill); font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; } .cm2-head-empty { font-style: italic; color: var(--lxg-ink-45); } .cm2-head-actions { display: flex; gap: 8px; flex-shrink: 0; } /* ═══ GRID 40/60 — col izq (search + historial) · col der (carrito) ═══ */ .cm2-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 20px; align-items: start; } .cm2-col-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Col-right: sticky, altura limitada para terminar justo arriba del footer. Cálculo: 100vh - top(14) - footer_height(~62) - bottom_offset(14) - gap(20) ≈ 110px → uso 160 para buffer */ .cm2-col-right { position: sticky; top: 14px; min-width: 0; height: calc(100vh - 160px); display: flex; flex-direction: column; } .cm2-col-right .cm2-stage--cart { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 0; } .cm2-col-right .cm2-stage--cart .cm2-cart-head-sticky { padding: 18px 22px 14px; background: var(--lxg-surface-card); border-bottom: 1px solid rgba(38,38,38,.06); margin-bottom: 0; flex-shrink: 0; z-index: 2; border-top-left-radius: var(--lxg-r-lg); border-top-right-radius: var(--lxg-r-lg); } .cm2-col-right .cm2-cart-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 18px 18px; scrollbar-width: thin; scrollbar-color: rgba(38,38,38,.25) transparent; } #page-cierre .cc3-ventas-scroll::-webkit-scrollbar, #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-ranking-body::-webkit-scrollbar, .lx-modal .lx-modal-body::-webkit-scrollbar, .cm2-col-right .cm2-cart-list::-webkit-scrollbar { width: 8px; } .cm2-col-right .cm2-cart-list::-webkit-scrollbar-thumb { background: rgba(38,38,38,.18); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .cm2-col-right .cm2-cart-list::-webkit-scrollbar-thumb:hover { background: rgba(38,38,38,.30); background-clip: padding-box; } /* Responsive: < 1100px colapsa a 1 columna con carrito arriba */ @media (max-width: 1100px) { .cm2-col-right { position: static; max-height: none; } .cm2-col-right .cm2-stage--cart { max-height: none; } } /* ═══ PREP STRIP colapsable ═══ */ .cm2-prep-strip { display: none; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background var(--lxg-dur-fast); } #changelog-overlay.open, #alerta-venc-overlay.open, #cf-pinned-bar.visible, #cf-reply-preview.visible, #page-stock.active, #page-movimientos.section-core > .ph, #page-vencimientos .v3-card[data-state="empty"] .v3-c-empty, .v3-tb-search-input:not(:placeholder-shown) ~ .v3-tb-search-clear, .v3-tb-search.has-value .v3-tb-search-clear, #page-empresas .emp-card.is-expanded .emp-card-close, .cm2-stage--prep[data-collapsed="true"] .cm2-prep-strip { display: flex; } .cm2-prep-strip-content { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--lxg-ink-60); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; } .cm2-prep-strip-local { font-weight: 700; color: var(--lxg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; } .cm2-prep-strip-sep { color: var(--lxg-ink-30); flex-shrink: 0; } .cm2-prep-strip-meta { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--lxg-ink-60); letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; } /* ═══ COLLAPSE TOGGLE (chevron — prep form / historial) ═══ */ .cm2-collapse-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid rgba(38,38,38,.10); border-radius: var(--lxg-r-sm); color: var(--lxg-ink-60); cursor: pointer; flex-shrink: 0; transition: background var(--lxg-dur-fast), border-color var(--lxg-dur-fast), color var(--lxg-dur-fast); } .cm2-prep-strip-edit:hover, .cm2-collapse-toggle:hover { background: rgba(38,38,38,.04); border-color: rgba(38,38,38,.20); color: var(--lxg-ink); } .cm2-collapse-toggle svg { transition: transform .28s cubic-bezier(.16,1,.3,1); } /* Hist head clickable feedback */ .cm2-hist-head-clickable { cursor: pointer; user-select: none; } .cm2-hist-head-clickable:hover .cm2-stage-title { color: var(--c-ember-ink); transition: color var(--lxg-dur-fast); } /* Cuando historial está colapsado: ocultar el body completo */ .cm2-stage--hist[data-collapsed="true"] { padding-bottom: 18px; } /* ═══ HISTORIAL ═══ */ .cm2-stage--hist .cm2-stage-num--hist { background: rgba(38,38,38,.08); color: var(--lxg-ink-60); font-family: var(--sans); font-size: 13px; font-weight: 700; } /* Filters bar */ .cm2-hist-filters { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-bottom: 12px; } .cm2-hist-filter-search svg { position: absolute; left: 10px; color: var(--lxg-ink-45); pointer-events: none; } .cm2-hist-filter-search input { width: 100%; height: 30px; padding: 0 10px 0 30px; border: 1px solid rgba(38,38,38,.10); border-radius: var(--lxg-r-sm); background: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--lxg-ink); outline: none; box-sizing: border-box; transition: border-color var(--lxg-dur-fast); } .cm2-hist-select { height: 30px; padding: 0 26px 0 10px; border: 1px solid rgba(38,38,38,.10); border-radius: var(--lxg-r-sm); background: #fff; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--lxg-ink); cursor: pointer; outline: none; } .cm2-hist-filter-search input:focus, .cm2-hist-select:focus { border-color: var(--c-ember); } /* List of cargas */ .cm2-hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(38,38,38,.18) transparent; margin-right: -4px; padding-right: 4px; } .cm2-hist-empty { padding: 20px 14px; background: rgba(38,38,38,.02); border: 1px dashed rgba(38,38,38,.10); border-radius: var(--lxg-r-md); text-align: center; font-size: 11.5px; font-weight: 500; color: var(--lxg-ink-45); font-style: italic; } /* Row de carga */ .cm2-hist-row:hover { border-color: rgba(232,102,58,.30); background: rgba(232,102,58,.025); } .cm2-hist-row-meta { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lxg-ink-45); } .cm2-hist-row-emp { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--lxg-ink-60); text-transform: none; letter-spacing: 0; } .cm2-hist-row-summary { font-size: 12.5px; font-weight: 600; color: var(--lxg-ink); margin-top: 2px; letter-spacing: -0.005em; } .cm2-hist-row-summary .cm2-hist-units { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--lxg-ink-60); margin-left: 4px; letter-spacing: 0.02em; } .cm2-hist-row-repeat:hover { background: var(--c-ember); border-color: var(--c-ember); color: #fff; } /* ═══ Cart empty state inteligente (con last cargas) ═══ */ .cm2-cart-empty-smart { padding: 24px 18px; display: flex; flex-direction: column; gap: 14px; } .cm2-cart-empty-smart-head { text-align: center; font-size: 12.5px; font-weight: 500; color: var(--lxg-ink-60); letter-spacing: -0.005em; } .cm2-cart-empty-smart-head strong { display: block; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--lxg-ink); letter-spacing: -0.015em; margin-bottom: 4px; } .cm2-cart-empty-smart-sub { text-align: center; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lxg-ink-45); margin-top: 4px; } /* ETAPAS (stages) */ .cm2-stage { background: var(--lxg-surface-card); border: var(--lxg-border-faint); border-radius: var(--lxg-r-lg); padding: 22px 24px; box-shadow: 0 1px 2px rgba(26,20,16,.03); } /* Énfasis sutil en "Agregar productos" — card protagónica de la sesión */ .cm2-stage--add { border-color: rgba(232,102,58,.18); box-shadow: 0 1px 2px rgba(26,20,16,.03), 0 6px 18px rgba(232,102,58,.06), 0 18px 38px rgba(232,102,58,.04); } .cm2-stage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .cm2-stage-title { font-family: var(--serif, serif); font-size: 14px; font-weight: 600; color: var(--lxg-ink); letter-spacing: -0.01em; line-height: 1.25; } .cm2-stage-sub { font-size: 11px; font-weight: 500; color: var(--lxg-ink-45); margin-top: 1px; line-height: 1.4; } /* ETAPA 1 — Prep grid */ .co-body-2col, .co-suc-grid, .cm2-prep-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } /* Sucursal ocupa toda la fila — es el campo maestro */ .lx-modal .lx-fg.span-2, .cm2-prep-field:first-child { grid-column: 1 / -1; } .cm2-prep-field:first-child select { height: 38px; font-size: 13px; font-weight: 600; } .cm2-prep-label { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lxg-ink-45); } /* Label de Sucursal con acento */ .cm2-prep-field:first-child .cm2-prep-label { color: var(--c-ember-ink); } .cm2-prep-field select, .cm2-prep-field input { height: 32px; padding: 0 11px; border: 1px solid rgba(38,38,38,.10); border-radius: var(--lxg-r-md); background: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--lxg-ink); outline: none; transition: border-color var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast); } /* ETAPA 2 — Search */ .lx-modal .lx-monto-wrap, .pe-emp-search-wrap, .pe-price-wrap, .cm2-hist-filter-search, .cm2-search-wrap { align-items: center; display: flex; position: relative; } .cm2-search-icon { position: absolute; left: 12px; color: var(--lxg-ink-45); pointer-events: none; } #cm2-search::placeholder { color: var(--lxg-ink-30); } .cm2-search-clear:hover { background: rgba(26,20,16,.18); color: var(--lxg-ink); } /* Search results */ .cm2-search-results { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(38,38,38,.18) transparent; } .co-insights-row, .co-top-cats-card, .cm2-search-results:empty { margin-top: 0; } .notif-list::-webkit-scrollbar, .cd-nv-prods::-webkit-scrollbar, .pdv-body::-webkit-scrollbar, .lxg-modal-body::-webkit-scrollbar, .cm2-hist-list::-webkit-scrollbar, .cm2-search-results::-webkit-scrollbar { width: 5px; } .pdv-body::-webkit-scrollbar-thumb, .lxg-modal-body::-webkit-scrollbar-thumb, .cm2-hist-list::-webkit-scrollbar-thumb, .cm2-search-results::-webkit-scrollbar-thumb { background: rgba(38,38,38,.18); border-radius: 999px; } .cm2-search-empty { padding: 16px; background: rgba(38,38,38,.025); border-radius: var(--lxg-r-md); text-align: center; font-size: 12px; color: var(--lxg-ink-45); } .cm2-search-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: none; background: #fff; border-radius: var(--lxg-r-sm); cursor: pointer; text-align: left; transition: background var(--lxg-dur-fast); font-family: var(--sans); } .cd-nv-prod.in-cart, .cm2-search-item:hover { background: rgba(232,102,58,.06); } .cm2-search-item.is-incart { background: rgba(34,165,90,.05); } .notif-item[data-tipo="fidelizacion"] .notif-item-dot, .cm2-search-item.is-incart:hover { background: rgba(34,165,90,.10); } .cm2-search-item-name { font-size: 12.5px; font-weight: 600; color: var(--lxg-ink); } .cm2-search-item-meta { font-size: 10.5px; font-weight: 500; color: var(--lxg-ink-45); margin-top: 2px; } .cm2-search-item-add { width: 28px; height: 28px; border-radius: var(--lxg-r-sm); background: rgba(232,102,58,.12); color: #B84420; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cm2-search-item.is-incart .cm2-search-item-add { background: transparent; width: auto; } .cm2-search-item-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1A7A45; padding: 3px 8px; background: rgba(34,165,90,.12); border-radius: var(--lxg-r-sm); } /* ETAPA 3 — Carrito */ .cm2-cart-empty { padding: 20px 16px; background: rgba(38,38,38,.025); border-radius: var(--lxg-r-md); text-align: center; color: var(--lxg-ink-45); font-size: 12px; font-weight: 500; } /* Item card — flat gris, sin tints por estado (solo el pill cambia de color) */ .cm2-item:hover { background: rgba(38,38,38,.06); } .cm2-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cm2-item-name { font-size: 13px; font-weight: 600; color: var(--lxg-ink); letter-spacing: -0.01em; } .cm2-item-meta { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--lxg-ink-45); margin-top: 2px; letter-spacing: 0.04em; } .sk-header-right, .cm2-item-right { align-items: center; display: flex; flex-shrink: 0; gap: 10px; } .cm2-item-stockprev strong { color: var(--lxg-ink); font-weight: 700; } /* Primary row: qty + venc derivado + expand toggle */ .cm2-item-primary { display: flex; align-items: flex-end; gap: 16px; } .cm2-item-primary .cm2-field { flex-shrink: 0; width: 160px; display: flex; flex-direction: column; gap: 6px; } /* Venc pill — tag semántico de vencimiento con código de color por urgencia */ .cm2-venc-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 8px; border-radius: 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em; background: rgba(38,38,38,.07); color: var(--lxg-ink-60); margin-bottom: 9px; margin-right: auto; white-space: nowrap; transition: background var(--lxg-dur) var(--cm2-ease-out), color var(--lxg-dur) var(--cm2-ease-out); } .cm2-venc-pill-icon { display: inline-flex; align-items: center; justify-content: center; } .cm2-venc-pill-icon svg { width: 12px; height: 12px; opacity: .75; } .tb-section-title #top-title, .cm2-venc-pill-text { line-height: 1; } .cm2-venc-pill-days { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; background: rgba(255,255,255,.55); border-radius: 999px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; margin-left: 2px; } /* Urgency variants */ .pdv-badge--ok, .cm2-venc-pill[data-urgency="ok"] { background: rgba(34,165,90,.12); color: #1A7A45; } .cm2-venc-pill[data-urgency="ok"] .cm2-venc-pill-days { background: rgba(34,165,90,.18); } .empd-venc-tag--warn, .cm2-venc-pill[data-urgency="warn"] { background: rgba(212,136,42,.14); color: #9A6200; } .cm2-venc-pill[data-urgency="warn"] .cm2-venc-pill-days { background: rgba(212,136,42,.22); } .pdv-badge--danger, .cm2-venc-pill[data-urgency="danger"] { background: rgba(224,82,82,.12); color: #A83030; } .cm2-venc-pill[data-urgency="danger"] .cm2-venc-pill-days { background: rgba(224,82,82,.20); } .rl-action--secondary .rl-action-icon, .cm2-venc-pill[data-urgency="alert"] { background: var(--c-ember-soft); color: var(--c-ember-ink); } .cm2-venc-pill[data-urgency="alert"] .cm2-venc-pill-icon svg { opacity: 1; animation: cm2VencAlertPulse 1.6s ease-in-out infinite; } .cm2-venc-pill[data-urgency="neutral"] { background: rgba(38,38,38,.06); color: var(--lxg-ink-60); } /* Animación de morph al cambiar de urgencia */ .cm2-venc-pill.is-morph { animation: cm2VencMorph 380ms cubic-bezier(.34,1.2,.64,1); } @keyframes cm2VencMorph { 0% { transform: scale(.92); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes cm2VencAlertPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } /* Secondary row: fecha + dias + custom + lote — 2 filas para ancho menor */ .cm2-item-secondary .cm2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cm2-field-lbl { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lxg-ink-45); } .cm2-item-primary input, .cm2-item-primary select, .cm2-item-secondary input, .cm2-item-secondary select { height: 32px; padding: 0 10px; border: 1px solid rgba(38,38,38,.12); border-radius: var(--lxg-r-md); background: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--lxg-ink); outline: none; transition: border-color var(--lxg-dur-fast), box-shadow var(--lxg-dur-fast); width: 100%; box-sizing: border-box; } .cm2-prep-field input:focus, .cm2-prep-field select:focus, #cm2-search:focus, .cm2-item-primary input:focus, .cm2-item-primary select:focus, .cm2-item-secondary input:focus, .cm2-item-secondary select:focus { border-color: #E8663A; box-shadow: 0 0 0 3px var(--c-ember-soft); } .cm2-field-unit { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--lxg-ink-45); } /* ─── Stage state indicators ─── */ .cm2-stage-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lxg-ink); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 2px; align-self: flex-start; transition: background var(--lxg-dur), color var(--lxg-dur); } /* Pending: muted */ .cm2-stage[data-state="pending"] .cm2-stage-num { background: rgba(38,38,38,.12); color: rgba(38,38,38,.30); } .lxg-muted, .cm2-stage[data-state="pending"] .cm2-stage-title { color: var(--lxg-ink-45); } .cli-detail-empty-icon, .cm2-stage[data-state="pending"] .cm2-stage-sub { opacity: .6; } /* Cart status line dots */ #page-cierre .cc3-hist-medio, .cm2-status-line { align-items: center; display: inline-flex; gap: 6px; } .cm2-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; } /* Confirm modal extras */ .cm2-confirm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; background: rgba(38,38,38,.025); border-radius: var(--lxg-r-lg); margin-bottom: 12px; } .cm2-confirm-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; } .cm2-confirm-stat-v { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--lxg-ink); letter-spacing: -0.02em; } .cm2-confirm-info { font-size: 12px; color: var(--lxg-ink-60); line-height: 1.5; margin-bottom: 8px; } .cm2-confirm-info strong { font-family: var(--mono); color: var(--lxg-ink); } .cm2-confirm-warn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--c-amber-soft); border: 1px solid var(--c-amber-line); color: var(--c-amber-ink); border-radius: var(--lxg-r-md); font-size: 12px; margin-top: 8px; } .cm2-confirm-warn--info { background: rgba(59,130,196,.08); border-color: rgba(59,130,196,.22); color: #2A5A8C; } .cm2-confirm-warn svg { flex-shrink: 0; margin-top: 1px; } /* "Ver todos" (legacy) */ .cm2-vertodos { background: rgba(38,38,38,.02); border: 1px dashed rgba(38,38,38,.18); border-radius: var(--lxg-r-xl); padding: 20px 22px; margin-top: 4px; } .cm2-vertodos-tools { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; } .cm2-check { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12px; color: var(--lxg-ink-60); cursor: pointer; } .cm2-empty { padding: 24px; text-align: center; color: var(--lxg-ink-45); font-size: 12px; } .cm2-resumen-legacy { margin-top: 12px; padding: 10px; font-size: 12px; color: var(--lxg-ink-60); } .cm2-vertodos-info .cm2-stage-sub strong { color: var(--lxg-ink); font-weight: 600; } .cm2-vertodos-note { margin-top: 8px; padding: 8px 12px; background: var(--c-amber-soft); border-radius: var(--lxg-r-md); font-size: 11px; font-weight: 500; color: var(--c-amber-ink); } /* Responsive */ @media (max-width: 880px) { .cm2-prep-grid { grid-template-columns: 1fr; } .cm2-item-head { flex-direction: column; } .cm2-item-right { flex-wrap: wrap; } } /* ─── v7.32.0 — Sugerencias inteligentes (chips) ─── */ .cm2-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .cm2-chip svg { opacity: .65; flex-shrink: 0; } .cm2-chip.is-active, .cm2-chip.is-active .cm2-chip-label { background: var(--lxg-ink); color: #fff !important; border-color: var(--lxg-ink); } .cm2-chip.is-active svg { opacity: 1; color: #fff !important; stroke: #fff !important; } .cm2-chip.is-active .cm2-chip-count { background: rgba(255,255,255,.20); color: #fff !important; } .cm2-chip--danger:hover:not(:disabled):not(.is-empty) { border-color: rgba(224,82,82,.40); background: var(--c-red-soft); color: var(--c-red-ink); } /* ═══════════════════════════════════════════════════════════════ v7.41.0 (re-restaurado v7.51.0) — CARGA MASIVA · Animations pass ═══════════════════════════════════════════════════════════════ */ @keyframes cm2FadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cm2FadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes cm2FadeRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } @keyframes cm2TagPop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes cm2ItemSpringIn { 0% { opacity: 0; transform: translateY(-10px) scale(.96); } 60% { opacity: 1; transform: translateY(0) scale(1.012); } 100% { transform: translateY(0) scale(1); } } @keyframes cm2ItemGlow { 0% { box-shadow: 0 0 0 0 rgba(232,102,58,0); } 20% { box-shadow: 0 0 0 4px rgba(232,102,58,.22); } 100% { box-shadow: 0 0 0 0 rgba(232,102,58,0); } } @keyframes cm2ChipPop { 0% { transform: scale(.92); opacity: .6; } 100% { transform: scale(1); opacity: 1; } } @keyframes cm2BadgeMorph { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes cm2BannerSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes cm2ResultFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes cm2Spin { to { transform: rotate(360deg); } } @keyframes cm2ItemExitStamp { 0% { opacity: 1; transform: translateX(0) scale(1); } 40% { opacity: 1; transform: translateX(0) scale(1.01); box-shadow: 0 0 0 3px rgba(34,165,90,.25); } 100% { opacity: 0; transform: translateX(20px) scale(.96); } } @keyframes cm2CheckDraw { 0% { opacity: 0; transform: rotate(45deg) translateY(-1px) scale(.4); } 60% { opacity: 1; transform: rotate(45deg) translateY(-1px) scale(1.1); } 100% { opacity: 1; transform: rotate(45deg) translateY(-1px) scale(1); } } @keyframes cm2EmptyPulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } } /* PAGE ENTER — stagger por capas */ #page-carga.cm2.is-entering .cm2-head-tag { animation: cm2TagPop var(--cm2-d-micro) var(--cm2-ease-spring) 60ms both; transform-origin: center; } #page-carga.cm2.is-entering .cm2-stage--prep { animation: cm2FadeUp var(--cm2-d-normal) var(--cm2-ease-out) 100ms both; } #page-carga.cm2.is-entering .cm2-stage--add { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) 180ms both; } #page-carga.cm2.is-entering .cm2-stage--hist { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) 300ms both; } #page-carga.cm2.is-entering .cm2-col-right { animation: cm2FadeRight var(--cm2-d-medium) var(--cm2-ease-snap) 220ms both; } #page-carga.cm2.is-entering .cm2-foot { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) 420ms both; } /* PREP collapse/expand */ .cm2-stage--prep { transition: padding var(--cm2-d-normal) var(--cm2-ease-snap); } .cm2-prep-form, .cm2-prep-strip { transition: opacity var(--cm2-d-normal) var(--cm2-ease-out); } #page-carga.cm2.is-entering .cm2-head, .cm2-stage--prep[data-collapsed="true"] .cm2-prep-strip { animation: cm2FadeDown var(--cm2-d-normal) var(--cm2-ease-out) both; } .cm2-stage--prep[data-collapsed="false"] .cm2-prep-form { animation: cm2FadeUp var(--cm2-d-normal) var(--cm2-ease-out) both; } .cm2-prep-strip-edit { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid rgba(38,38,38,.10); border-radius: var(--lxg-r-sm); padding: 5px 10px; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--lxg-ink-60); cursor: pointer; transition: background var(--cm2-d-instant), border-color var(--cm2-d-instant), color var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring); } /* SEARCH */ #cm2-search { width: 100%; height: 38px; padding: 0 36px 0 36px; border: 1px solid rgba(38,38,38,.12); border-radius: var(--lxg-r-md); background: #fff; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--lxg-ink); outline: none; box-sizing: border-box; transition: border-color var(--cm2-d-micro), box-shadow var(--cm2-d-micro), background var(--cm2-d-micro); } .cm2-search-clear { position: absolute; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(26,20,16,.08); color: var(--lxg-ink-60); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring), opacity var(--cm2-d-instant); } .mvd-item-del:active, .cm2-search-clear:active { transform: scale(.9); } .cm2-search-results > .cm2-search-item { animation: cm2ResultFadeUp var(--cm2-d-micro) var(--cm2-ease-out) both; } .cm2-search-results > .cm2-search-item:nth-child(6) { animation-delay: 150ms; } .cm2-search-item, .cm2-search-item-add { transition: background var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring); } /* CHIPS */ .cm2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; height: 30px; border: 1px solid rgba(38,38,38,.10); border-radius: var(--lxg-r-pill); background: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--lxg-ink-60); cursor: pointer; animation: cm2ChipPop var(--cm2-d-micro) var(--cm2-ease-spring) both; transition: background var(--cm2-d-micro), border-color var(--cm2-d-micro), color var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring), box-shadow var(--cm2-d-instant); } .cm2-chips .cm2-chip:nth-child(2) { animation-delay: 50ms; } .cm2-chips .cm2-chip:nth-child(3) { animation-delay: 100ms; } .cm2-chip:hover:not(:disabled):not(.is-empty) { border-color: rgba(232,102,58,.40); background: var(--c-ember-soft); color: var(--c-ember-ink); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(38,38,38,.06); } .cm2-chip:active:not(:disabled):not(.is-empty) { transform: translateY(0) scale(.97); } .cm2-chip-count { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 1px 6px; background: rgba(38,38,38,.08); color: var(--lxg-ink-60); border-radius: var(--lxg-r-pill); min-width: 16px; text-align: center; transition: background var(--cm2-d-micro), color var(--cm2-d-micro); } /* CART ITEM add/remove/hover */ .cm2-item { background: rgba(38,38,38,.04); border: 1px solid transparent; border-radius: var(--lxg-r-md); padding: 14px 18px; position: relative; animation: cm2ItemSpringIn var(--cm2-d-medium) var(--cm2-ease-spring) both; transition: border-color var(--cm2-d-micro), background var(--cm2-d-micro), box-shadow var(--cm2-d-micro); } .cm2-item.is-new { animation: cm2ItemSpringIn var(--cm2-d-medium) var(--cm2-ease-spring) both, cm2ItemGlow 900ms var(--cm2-ease-out) both; } .cm2-item.is-removing { animation: none !important; overflow: hidden; transition: opacity 240ms var(--cm2-ease-exit), transform 240ms var(--cm2-ease-exit), max-height 280ms var(--cm2-ease-exit) 40ms, padding 280ms var(--cm2-ease-exit) 40ms, margin 280ms var(--cm2-ease-exit) 40ms, border-width 280ms var(--cm2-ease-exit) 40ms; opacity: 0; transform: translateX(28px) scale(.97); max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-width: 0 !important; pointer-events: none; } .cm2-item-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--lxg-r-sm); font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; animation: cm2BadgeMorph 280ms var(--cm2-ease-spring) both; } .cm2-item-stockprev { font-family: var(--mono); font-size: 10.5px; color: var(--lxg-ink-45); white-space: nowrap; transition: opacity var(--cm2-d-micro); } .cm2-item-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(38,38,38,.10); transition: opacity var(--cm2-d-normal); } .cm2-item-expand-btn { background: none; border: none; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--lxg-ink-45); cursor: pointer; padding: 0 0 9px 0; white-space: nowrap; flex-shrink: 0; transition: color var(--cm2-d-instant), transform var(--cm2-d-instant) var(--cm2-ease-spring); } .cm2-field-qty-wrap input { flex: 1; text-align: right; font-family: var(--mono); font-weight: 700; transition: border-color var(--cm2-d-micro), box-shadow var(--cm2-d-micro); } .cm2-item .lxg-icon-btn--danger { transition: transform var(--cm2-d-instant) var(--cm2-ease-spring), background var(--cm2-d-instant), color var(--cm2-d-instant); } .cm2-item .lxg-icon-btn--danger:active { transform: rotate(90deg) scale(.92); } /* HISTORIAL rows */ .cm2-hist-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(38,38,38,.08); border-radius: var(--lxg-r-md); background: #fff; animation: cm2FadeUp var(--cm2-d-normal) var(--cm2-ease-out) both; transition: border-color var(--cm2-d-micro), background var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring); } .cm2-search-results > .cm2-search-item:nth-child(2), .cm2-hist-list > .cm2-hist-row:nth-child(2) { animation-delay: 30ms; } .cm2-search-results > .cm2-search-item:nth-child(4), .cm2-hist-list > .cm2-hist-row:nth-child(4) { animation-delay: 90ms; } .cm2-hist-row-repeat { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; background: transparent; border: 1px solid rgba(38,38,38,.10); border-radius: var(--lxg-r-sm); font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--lxg-ink-60); cursor: pointer; flex-shrink: 0; transition: background var(--cm2-d-micro), border-color var(--cm2-d-micro), color var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring); } .cm2-hist-row.is-pulse { animation: cm2ItemGlow 900ms var(--cm2-ease-out) both; } /* FOOTER + CONFIRM */ .cm2-foot { position: sticky; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; background: #fff; border: 1px solid rgba(38,38,38,.08); border-radius: var(--lxg-r-lg); box-shadow: 0 4px 20px rgba(26,20,16,.10), 0 1px 3px rgba(26,20,16,.06); margin-top: 8px; z-index: 10; transition: box-shadow var(--cm2-d-micro); } .cm2-foot-total { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--lxg-ink); letter-spacing: -0.025em; line-height: 1.1; transition: color var(--cm2-d-micro); } #cm2-confirm { transition: background var(--cm2-d-micro), transform var(--cm2-d-instant) var(--cm2-ease-spring), box-shadow var(--cm2-d-micro), opacity var(--cm2-d-normal); } #cm2-confirm:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,20,16,.20); } #cm2-confirm.is-loading { pointer-events: none; opacity: .85; } #cm2-confirm.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.32); border-top-color: #fff; border-radius: 50%; animation: cm2Spin .8s linear infinite; } /* CONFIRM SUCCESS — cards fade-out stagger */ .cm2-cart-list.is-success > .cm2-item { animation: cm2ItemExitStamp 480ms var(--cm2-ease-exit) both; } .tb-action-zone > *:nth-child(4), .cm2-search-results > .cm2-search-item:nth-child(5), .cm2-hist-list > .cm2-hist-row:nth-child(n+5), .cm2-cart-list.is-success > .cm2-item:nth-child(3) { animation-delay: 120ms; } .cm2-search-results > .cm2-search-item:nth-child(n+7), .cm2-cart-list.is-success > .cm2-item:nth-child(4) { animation-delay: 180ms; } .cm2-cart-list.is-success > .cm2-item:nth-child(5) { animation-delay: 240ms; } .cm2-cart-list.is-success > .cm2-item:nth-child(n+6) { animation-delay: 300ms; } /* BANNER BORRADOR entrance */ .cm2-draft-banner:not([hidden]) { animation: cm2BannerSlide var(--cm2-d-medium) var(--cm2-ease-spring) both; } /* STAGE NUMBER state transitions */ .cm2-stage-num, .cm2-stage[data-state="done"] .cm2-stage-num, .cm2-stage[data-state="pending"] .cm2-stage-num { transition: background var(--cm2-d-normal), color var(--cm2-d-normal); } .cm2-stage[data-state="done"] .cm2-stage-num::after { content: ""; position: absolute; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-1px); left: 50%; top: 50%; margin-left: -3px; margin-top: -5px; animation: cm2CheckDraw var(--cm2-d-medium) var(--cm2-ease-out) both; transform-origin: center; } /* EMPTY STATES */ .cm2-cart-empty, .cm2-cart-empty-smart, .cm2-hist-empty { animation: cm2FadeUp var(--cm2-d-medium) var(--cm2-ease-out) both; } .cm2-cart-empty svg { display: block; margin: 0 auto 8px; color: var(--lxg-ink-30); animation: cm2EmptyPulse 2.4s var(--cm2-ease-in-out) infinite; transform-origin: center; } /* REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { #page-carga.cm2 *, #page-carga.cm2 *::before, #page-carga.cm2 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ═══ v7.53.0 — BANNER BORRADOR (info blue) ═══ */ .cm2-draft-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--c-info-soft); border: 1px solid var(--c-info-line); border-left: 3px solid var(--c-info); border-radius: var(--lxg-r-md); box-shadow: 0 2px 8px rgba(10,132,255,.10); } .cm2-draft-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(10,132,255,.18); color: var(--c-info); flex-shrink: 0; } .rl-action-title, .cm2-draft-title { color: var(--lxg-ink); font-size: 13px; font-weight: 600; line-height: 1.2; } .cm2-draft-sub { font-size: 11px; color: var(--lxg-ink-60); margin-top: 1px; } .rl-action-sub strong, .cm2-draft-sub strong { color: var(--lxg-ink); font-family: var(--mono); font-weight: 700; } /* v7.56.0 — Item placeholder mientras carga stockData */ .cm2-item--loading { opacity: .55; background: rgba(38,38,38,.02) !important; border-style: dashed !important; } .cm2-item--loading .cm2-item-name::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(38,38,38,.20); border-top-color: var(--c-info, #0A84FF); border-radius: 50%; margin-right: 6px; vertical-align: -1px; animation: cm2Spin .8s linear infinite; } /* ═══ v7.60.0 — Suggest header + close button styling ═══ */ .cm2-suggest-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(38,38,38,.06); } .cm2-suggest-close { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 8px; background: rgba(38,38,38,.06); border: 1px solid transparent; border-radius: var(--lxg-r-sm, 6px); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--lxg-ink-60); cursor: pointer; flex-shrink: 0; /* Alinear con la columna del + (que está a 12px del borde derecho) */ margin-right: 0; transition: background var(--lxg-dur-fast, .14s) ease, color var(--lxg-dur-fast, .14s) ease, transform var(--lxg-dur-fast, .14s) ease; } .vc-group.collapsed .vc-group-content, .cm2-suggest-close svg { opacity: .7; } .cm2-suggest-close:hover { background: rgba(38,38,38,.12); color: var(--lxg-ink); } /* ═══ v7.60.0 — Fix número visible cuando stage está "done" ═══ */ .cm2-stage[data-state="done"] .cm2-stage-num { background: var(--c-ember); color: transparent; position: relative; font-size: 0 !important; } /* ═══ v7.60.0 — Stage dots de "active" se ven como "pending" (neutral, no oscuro) ═══ */ .cm2-stage[data-state="active"] .cm2-stage-num { background: rgba(38,38,38,.12); color: rgba(38,38,38,.55); } .cm2-item-expand-btn:hover, .cm2-stage[data-state="active"] .cm2-stage-title { color: var(--lxg-ink); } /* v7.61.0 — Badge "× N entradas" cuando hay items duplicados del mismo prodId */ .cm2-item-group-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 8px; background: var(--c-info-soft, rgba(10,132,255,.10)); color: var(--c-info-ink, #0058B5); border: 1px solid var(--c-info-line, rgba(10,132,255,.28)); border-radius: 999px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: lowercase; vertical-align: middle; } /* ─── ≤1280px: padding más compacto, gap interno ─── */ @media (max-width: 1280px) { #page-carga.cm2 { padding: 24px 22px 80px !important; gap: 18px; } .cm2-grid, .cm2-col-left { gap: 16px; } } /* ─── ≤1024px: grid colapsa a 1 columna · orden: prep → add → cart → hist ─── */ @media (max-width: 1024px) { .cm2-grid { display: flex !important; flex-direction: column; gap: 16px; } /* display:contents "aplana" las columnas para que los stages sean children directos del grid y se les pueda asignar order */ .cm2-col-left, .cm2-col-right { display: contents; position: static; height: auto; max-height: none; } /* Forzar full width — display:contents puede dejar los stages con su width intrínseco */ .cm2-grid > .cm2-col-left > .cm2-stage, .cm2-grid > .cm2-col-right > .cm2-stage, .cm2-grid .cm2-stage { width: 100% !important; max-width: 100% !important; flex: initial !important; align-self: stretch !important; box-sizing: border-box; } .cm2-stage--prep { order: 1; } .cm2-stage--add { order: 2; } .cm2-stage--cart { order: 3; } .cm2-stage--hist { order: 4; } /* Carrito sin sticky/scroll interno en este viewport */ .cm2-col-right .cm2-stage--cart { flex: initial !important; max-height: none; overflow: visible; padding: 22px 24px; } .cm2-col-right .cm2-cart-list { overflow-y: visible; max-height: none; padding: 0; } .cm2-col-right .cm2-stage--cart .cm2-cart-head-sticky { position: static; padding: 0 0 14px 0; border-radius: 0; } } /* ─── ≤768px: head compacto, strip mono, cards más densas ─── */ @media (max-width: 768px) { #page-carga.cm2 { padding: 18px 14px 90px !important; gap: 14px; } /* Header */ .cm2-head { flex-direction: column; align-items: stretch; gap: 10px; } .cm2-head-context-wrap { flex-wrap: wrap; } .cm2-head-actions .lxg-btn { padding: 0 10px; font-size: 11px; } /* Banner borrador */ .cm2-draft-banner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; } .cm2-head-actions, .cm2-draft-actions { justify-content: flex-end; } /* Stage cards */ .cm2-stage { padding: 16px 14px; } .cm2-stage-head { margin-bottom: 12px; gap: 8px; } .cm2-stage-title { font-size: 13.5px; } .cm2-stage-sub { font-size: 10.5px; } .cm2-prep-grid { grid-template-columns: 1fr; gap: 10px; } .cm2-prep-strip { padding: 10px 12px; flex-wrap: nowrap; } .cm2-prep-strip-content { font-size: 11.5px; } .cm2-prep-strip-meta { font-size: 10px; } /* Search results */ #cm2-search { height: 36px !important; padding: 0 32px 0 32px !important; font-size: 12px !important; } .cm2-search-results { max-height: 240px; } /* Chips wrap mejor */ .cm2-chips { gap: 6px; margin-top: 10px; } .cm2-chip { padding: 5px 9px; font-size: 10.5px; } /* Carrito item card — primary stack */ .cm2-item { padding: 12px 14px; } .cm2-item-head { flex-wrap: wrap; gap: 8px; } .cm2-item-right { gap: 6px; width: 100%; justify-content: space-between; } .cm2-head-context, .cm2-item-name { font-size: 12.5px; } .cm2-item-primary { flex-wrap: wrap; gap: 10px; } .cm2-item-primary .cm2-field { width: 100%; max-width: 100%; } .cm2-item-venc-derived, .cm2-venc-pill { margin: 0; align-self: flex-start; } .v3-tb-export, .cm2-item-expand-btn { margin-left: auto; } /* Secondary fields stack vertical */ .cm2-item-secondary { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; } /* Hist filters stack */ .cm2-hist-filters { grid-template-columns: 1fr; gap: 6px; } /* Footer compacto */ .cm2-foot-summary { flex: 1; min-width: 0; } #page-cierre .cc3-hist-total, .cm2-foot-total { font-size: 16px; } #cm2-confirm { padding: 0 14px; font-size: 12.5px; } } /* ─── ≤560px: full mobile, mínimo padding ─── */ @media (max-width: 560px) { .cm2-stage { padding: 14px 12px; border-radius: 12px; } .cm2-head-tag { font-size: 11.5px; padding: 0 9px; height: 24px; } .cm2-item { padding: 11px 12px; } .cm2-item-status { font-size: 9px; padding: 2px 6px; } .cm2-item-stockprev { font-size: 10px; } .cm2-item-group-badge { font-size: 9px; } /* Modal confirm — overflow safer en mobile */ .lxg-modal { max-width: calc(100vw - 20px); } } /* v7.62.0 — Mobile fix: footer no se solape con chat FAB */ @media (max-width: 768px) { .cm2-foot { padding: 12px 16px; gap: 10px; flex-wrap: wrap; padding-right: 78px !important; } } @media (max-width: 560px) { .cm2-foot { /* En pantallas muy pequeñas, mejor sticky bottom: 76px (encima del FAB) */ bottom: 76px !important; padding-right: 16px !important; } /* Padding extra al fondo del page para compensar el footer movido + FAB */ #page-carga.cm2 { padding: 14px 10px 90px !important; gap: 12px; padding-bottom: 140px !important; } } /* ═══ v7.64.0 — Overlay edición gasto/retiro de caja (cc-edit-egreso-*) ═══ */ .cc-edit-egreso-overlay { position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 1); display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(26, 20, 16, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ccEgresoOvIn .22s cubic-bezier(.16,1,.3,1) both; } @keyframes ccEgresoOvIn { from { opacity: 0; } to { opacity: 1; } } .cc-edit-egreso-box { width: 100%; max-width: 420px; background: #fff; border: 1px solid rgba(38,38,38,.10); border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 4px 12px rgba(26,20,16,.10), 0 24px 60px rgba(26,20,16,.20); animation: ccEgresoBoxIn .28s cubic-bezier(.34,1.2,.64,1) both; box-sizing: border-box; } @keyframes ccEgresoBoxIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .cc-edit-egreso-title { font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 600; color: #1A1410; letter-spacing: -0.015em; margin-bottom: 4px; } .cc-edit-egreso-desc { font-family: var(--sans); font-size: 12px; font-weight: 500; color: rgba(26,20,16,.60); margin-bottom: 16px; } .cc-edit-egreso-lbl { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(26,20,16,.50); margin-top: 12px; margin-bottom: 6px; } .cc-edit-egreso-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid rgba(38,38,38,.12); border-radius: 10px; background: rgba(38,38,38,.025); font-family: var(--sans); font-size: 13px; font-weight: 500; color: #1A1410; outline: none; box-sizing: border-box; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; } .cc-edit-egreso-input:focus { background: #fff; border-color: #E8663A; box-shadow: 0 0 0 3px rgba(232,102,58,.12); } .cc-edit-egreso-btns { display: flex; gap: 8px; margin-top: 20px; } .cc-edit-egreso-btns .btn-ghost, .cc-edit-egreso-btns .btn-prime { height: 38px; border-radius: 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s cubic-bezier(.34,1.2,.64,1); } .cc-edit-egreso-btns .btn-ghost { background: transparent; border: 1px solid rgba(38,38,38,.14); color: rgba(26,20,16,.70); } .cc-edit-egreso-btns .btn-ghost:hover { background: rgba(38,38,38,.04); color: #1A1410; } .cc-edit-egreso-btns .btn-prime { background: linear-gradient(158deg, #333 0%, #262626 100%); border: 1px solid rgba(0,0,0,.4); color: #fff; box-shadow: 0 2px 8px rgba(26,20,16,.18); } .cc-edit-egreso-btns .btn-prime:hover { background: linear-gradient(158deg, #404040 0%, #2e2e2e 100%); box-shadow: 0 4px 14px rgba(26,20,16,.24); } /* ═══ v7.65.0 — Historial del cliente: edit/delete actions ═══ */ .cd-hist-row { position: relative; transition: background .14s ease; } .cm2-prep-strip:hover, .cd-hist-row:hover { background: rgba(38,38,38,.025); } .cd-hist-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .16s ease; background: linear-gradient(to right, transparent 0%, #fff 30%); padding-left: 24px; padding-right: 6px; border-radius: 8px; } .cd-hist-action { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(38,38,38,.10); background: #fff; color: rgba(26,20,16,.55); border-radius: 6px; cursor: pointer; padding: 0; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s cubic-bezier(.34,1.2,.64,1); } .cd-hist-action:hover { background: rgba(38,38,38,.06); color: #1A1410; border-color: rgba(38,38,38,.20); } .cd-hist-edit:hover { background: var(--c-info-soft, rgba(10,132,255,.10)); color: var(--c-info, #0A84FF); border-color: var(--c-info-line, rgba(10,132,255,.28)); } .cd-hist-del:hover { background: rgba(224,82,82,.10); color: #A83030; border-color: rgba(224,82,82,.28); } /* Touch / mobile: actions siempre visibles (no hay hover) */ @media (hover: none) { .cd-hist-actions { opacity: 1; pointer-events: auto; background: transparent; padding-left: 0; } } /* ═══ v7.68.0 — Nueva Venta del drawer · input qty + unidad inline ═══ */ .cd-nv-item-qty-wrap { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; background: #fafafa; border: 1px solid rgba(26,20,16,.10); border-radius: 7px; padding: 0 8px 0 0; transition: border-color .15s ease, background .15s ease; } .cd-nv-item-qty-wrap:focus-within { border-color: #E8663A; background: #fff; box-shadow: 0 0 0 3px rgba(232,102,58,.10); } .cd-nv-item-qty-wrap .cd-nv-item-qty { width: 60px !important; border: none !important; background: transparent !important; text-align: right !important; box-shadow: none !important; padding: 0 0 0 8px; } .cd-nv-item-qty-wrap .cd-nv-item-qty::placeholder { color: rgba(26,20,16,.30); } .cd-nv-item-unit { font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: rgba(26,20,16,.50); text-transform: lowercase; } /* Sutil indicador visual cuando hay item con qty=0 (todavía sin peso) */ .cd-nv-item:has(.cd-nv-item-qty[value=""]) .cd-nv-item-sub, .cd-nv-item:has(.cd-nv-item-qty:placeholder-shown) .cd-nv-item-sub { color: rgba(26,20,16,.35); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════ v7.70.0 · CIERRE DE CAJA — Confirmación operativa light Card blanca, backdrop blur sutil, checkmark stroke-draw, ~1.1s ═══════════════════════════════════════════════════════════════ */ /* Preserved keyframe — used by .emp-more-menu */ @keyframes ccfx-card-in { 0% { opacity: 0; transform: translateY(40px) scale(.94); filter: blur(8px); } 50% { opacity: 1; transform: translateY(-4px) scale(1.01); filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } } .cc-close-fx-card { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(38,38,38,.045), 0 4px 16px rgba(38,38,38,.06), 0 16px 48px rgba(38,38,38,.08); width: 420px; max-width: calc(100vw - 32px); padding: 24px 28px 20px; display: flex; flex-direction: column; gap: 20px; opacity: 0; transform: scale(.97) translateY(6px); transition: opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); } /* Close button */ .cc-close-fx-x { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(38,38,38,.10); background: transparent; color: rgba(38,38,38,.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .18s ease; z-index: 2; } .cc-close-fx-x:hover { background: rgba(38,38,38,.04); color: #262626; transform: rotate(90deg); } .cc-close-fx.show .cc-close-fx-check path { stroke-dashoffset: 0; } /* Eyebrow */ .cc-close-fx-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(38,38,38,.32); margin-top: -8px; } /* KPI strip */ .cc-close-fx-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; background: #F6F6F6; border-radius: 10px; padding: 18px 20px; } .cc-close-fx-kpi { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; } .cc-close-fx-kpi + .cc-close-fx-kpi { border-left: 1px solid rgba(38,38,38,.06); } .cc-close-fx-kpi-l { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 11px; font-weight: 500; color: rgba(38,38,38,.38); letter-spacing: .01em; } .cc-close-fx-kpi-v { font-family: var(--serif, 'Fraunces', serif); font-size: 22px; font-weight: 600; color: #262626; letter-spacing: -.015em; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Diferencia color states */ .tb-dd-icon, .ccfx-dif-zero { color: rgba(38,38,38,.35) !important; } .ccfx-dif-pos { color: #22A55A !important; } .cc-close-fx-sub { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12px; color: rgba(38,38,38,.32); flex: 1; margin: 0; } /* ─── Responsive ─── */ @media (max-width: 480px) { .cc-close-fx-card { padding: 20px; width: 100%; } .cc-close-fx-kpis { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; } .cc-close-fx-kpi { text-align: left; align-items: flex-start; } .cc-close-fx-kpi + .cc-close-fx-kpi { border-left: none; border-top: 1px solid rgba(38,38,38,.06); padding-top: 12px; } .cc-close-fx-kpi-v { font-size: 20px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { } /* ═══════════════════════════════════════════════════════════════ v7.71.0 · LOGIN — Identity-First (Mac OS style) Floor #F0EEEF · 2 modos: pick (avatares) → auth (password) ═══════════════════════════════════════════════════════════════ */ #login-screen.lp2 { position: fixed; inset: 0; z-index: var(--z-overlay); background: #F0EEEF; display: grid; grid-template-rows: auto 1fr auto; padding: 24px 32px; overflow: hidden; font-family: var(--sans, 'Inter Tight', sans-serif); color: #262626; } /* ── Identity bar ── */ .lp2-identity { display: flex; align-items: center; justify-content: space-between; gap: 16px; opacity: 0; animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .05s both; } #page-vencimientos .ph-title, .co-top-cat-head, #page-empresas .emp-aging-mini-row, .lp2-brand { align-items: center; display: flex; gap: 10px; } .lp2-brand-mark { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(38,38,38,.10); } .lp2-brand-name { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13px; font-weight: 600; color: #262626; letter-spacing: -.005em; } .lp2-brand-name em { font-style: italic; font-weight: 400; color: rgba(38,38,38,.5); letter-spacing: .005em; } .lp2-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.2; } .lp2-clock { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 13px; font-weight: 600; color: #262626; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .lp2-date { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 500; color: rgba(38,38,38,.4); text-transform: uppercase; letter-spacing: .14em; } /* ── Stage ── */ .lp2-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 0; } /* ───── MODO 1: PICK ───── */ .lp2-pick { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: 520px; } .lp2-greeting { font-family: var(--serif, 'Fraunces', serif); font-size: 32px; font-weight: 500; letter-spacing: -.025em; color: #262626; margin: 0 0 6px; text-align: center; opacity: 0; animation: lp2FadeUp .6s cubic-bezier(.16,1,.3,1) .14s both; } .lp2-greeting-sub { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13px; font-weight: 400; color: rgba(38,38,38,.45); margin: 0 0 36px; text-align: center; opacity: 0; animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .22s both; } .lp2-avatars { display: flex; gap: 16px; justify-content: center; } /* Avatar card */ .lp2-avatar-card { width: 148px; height: 172px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #fff; border: 1px solid transparent; border-radius: 16px; cursor: pointer; padding: 20px; box-shadow: 0 0 0 1px rgba(38,38,38,.045), 0 2px 8px rgba(38,38,38,.04), 0 8px 24px rgba(38,38,38,.05); transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .18s ease, box-shadow .22s ease; opacity: 0; font-family: inherit; } .lp2-avatar-card:nth-child(1) { animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .32s both; } .lp2-avatar-card:nth-child(2) { animation: lp2FadeUp .55s cubic-bezier(.16,1,.3,1) .40s both; } .lp2-avatar-card:hover { transform: translateY(-4px); border-color: rgba(232,102,58,.32); box-shadow: 0 0 0 1px rgba(232,102,58,.18), 0 6px 16px rgba(38,38,38,.06), 0 16px 40px rgba(232,102,58,.08); } .lp2-avatar-card:hover .lp2-avatar-circle { background: linear-gradient(158deg, #E8663A, #C84F1F); color: #fff; box-shadow: 0 4px 12px rgba(232,102,58,.28); } .lp2-avatar-card:active { transform: translateY(-2px) scale(.98); } .lp2-avatar-card:focus-visible { outline: 2px solid #E8663A; outline-offset: 4px; } /* Avatar circle */ .lp2-avatar-circle { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #F6F6F6; color: #262626; font-family: var(--serif, 'Fraunces', serif); font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1; transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.16,1,.3,1); flex-shrink: 0; user-select: none; } .lp2-avatar-circle--lg { width: 84px; height: 84px; font-size: 38px; background: linear-gradient(158deg, #E8663A, #C84F1F); color: #fff; box-shadow: 0 4px 14px rgba(232,102,58,.30), inset 0 1px 0 rgba(255,255,255,.18); } .lp2-avatar-name { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 14px; font-weight: 600; color: #262626; letter-spacing: -.005em; text-align: center; } /* Exit anim para card no seleccionado */ [data-mode="auth"] .lp2-avatar-card:not(.is-picked) { animation: lp2AvatarFadeOut .2s cubic-bezier(.4,0,1,1) both; } [data-mode="auth"] .lp2-avatar-card.is-picked { animation: lp2AvatarPickedExit .24s cubic-bezier(.4,0,1,1) both; } /* ───── MODO 2: AUTH ───── */ .lp2-auth { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; opacity: 0; transform: translateY(8px); transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1); } .lp2-auth.is-in { opacity: 1; transform: translateY(0); } /* Back button */ .lp2-back { position: absolute; top: -42px; left: 0; display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: rgba(38,38,38,.5); font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .005em; cursor: pointer; padding: 6px 8px; border-radius: 7px; transition: color .15s, background .15s, transform .15s; } .lp2-back:hover svg { transform: translateX(-2px); } .lp2-auth-avatar { margin-bottom: 18px; animation: lp2AvatarLand .42s cubic-bezier(.34,1.56,.64,1) both; } .lp2-auth-hello { font-family: var(--serif, 'Fraunces', serif); font-size: 26px; font-weight: 500; letter-spacing: -.025em; color: #262626; margin: 0 0 4px; text-align: center; } .notif-item[data-tipo="vencimiento"] .notif-item-eyebrow, .mvd-item:hover .mvd-item-name, .cf-read.seen, .lp2-auth-hello span { color: #E8663A; } .lp2-auth-sub { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 400; color: rgba(38,38,38,.45); margin: 0 0 22px; text-align: center; } /* Local chips */ .lp2-locals { display: flex; gap: 8px; margin-bottom: 18px; background: rgba(38,38,38,.04); padding: 4px; border-radius: 10px; } .lp2-local-chip { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; border-radius: 7px; padding: 8px 14px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; color: rgba(38,38,38,.55); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .lp2-local-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(38,38,38,.25); transition: background .15s, box-shadow .15s; } .lp2-local-chip:hover { color: #262626; background: rgba(38,38,38,.03); } .lp2-local-chip.is-active { background: #fff; color: #262626; box-shadow: 0 1px 3px rgba(38,38,38,.08); } .lp2-local-chip.is-active .lp2-local-dot { background: #22A55A; box-shadow: 0 0 0 3px rgba(34,165,90,.18); } .emp-filter-btn:focus-visible, .rl-action:focus-visible, .lp2-local-chip:focus-visible { outline-offset: 2px; outline: 2px solid #E8663A; } /* Password form */ .lp2-pass-form { width: 100%; display: flex; flex-direction: column; gap: 10px; } .lp2-pass-wrap { display: flex; align-items: center; gap: 8px; background: #E7E5E6; border: 1px solid transparent; border-radius: 9px; padding: 0 14px; height: 46px; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } /* v7.92.2 · Focus state limpio Antes: border gris .10 + box-shadow ember .10 3px → el halo ember se veía como un "rectángulo ember dentro del input" (bug visual reportado). Ahora: border ember sutil + sin halo → indicador limpio. */ .lp2-pass-wrap:focus-within { background: #fff; border-color: rgba(232,102,58,.42); box-shadow: none; } /* Password field: input + dots overlay */ .lp2-pass-field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; } .lp2-pass-field input { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: transparent; outline: none; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 14px; font-weight: 500; color: transparent; caret-color: transparent; /* v7.75.1: ocultar caret titilante detrás de los dots */ letter-spacing: .04em; padding: 0; } .lp2-pass-field input::placeholder { color: rgba(38,38,38,.32); font-weight: 400; letter-spacing: -.005em; } /* Cuando se revela la contraseña: texto visible + caret visible + dots ocultos */ .lp2-pass-wrap.lp2-pass-revealed .lp2-pass-field input { color: #262626; caret-color: #262626; } /* Dots overlay */ .lp2-dots { position: relative; display: flex; align-items: center; gap: 8px; pointer-events: none; height: 100%; } .lp2-dot { width: 8px; height: 8px; border-radius: 50%; background: #262626; flex-shrink: 0; display: inline-block; animation: lp2DotIn .42s cubic-bezier(.34,1.56,.64,1) both; transform-origin: center; } .lp2-dot.exit { animation: lp2DotOut .24s cubic-bezier(.4,0,1,1) both; } @keyframes lp2DotIn { 0% { opacity: 0; transform: scale(.2) translateY(-4px); } 55% { opacity: 1; transform: scale(1.22) translateY(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes lp2DotOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.3); } } .lp2-eye { background: transparent; border: none; cursor: pointer; color: rgba(38,38,38,.32); padding: 4px; display: flex; align-items: center; transition: color .15s; } .lp2-caps { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #D4882A; align-self: flex-start; padding: 0 2px; } .lp2-err { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12px; font-weight: 500; color: #C62828; text-align: center; padding: 8px 12px; background: rgba(224,82,82,.08); border-radius: 8px; margin: 2px 0 0; } /* CTA Lacca Nera (sobreescribe estilos legacy de .btn-login) */ .btn-login.lp2-cta { width: 100%; height: 46px; background: linear-gradient(158deg, #333 0%, #262626 100%); color: #fff; border: none; border-radius: 9px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13.5px; font-weight: 600; letter-spacing: .005em; cursor: pointer; margin-top: 6px; box-shadow: 0 2px 8px rgba(26,20,16,.18); transition: opacity .15s ease, transform .1s ease, box-shadow .18s ease; overflow: hidden; position: relative; } .btn-login.lp2-cta:hover { opacity: .92; box-shadow: 0 4px 14px rgba(26,20,16,.24); } .btn-login.lp2-cta.loading { pointer-events: none; cursor: wait; background: linear-gradient(158deg, #2a2a2a 0%, #1d1d1d 100%); } /* ── CTA loading state (v7.72.0) — label + wave dots + scan bar ── */ .mvd-sec:nth-child(2) { animation-delay: .16s; } @keyframes lp2CtaWave { 0%, 70%, 100% { opacity: .35; transform: translateY(0) scale(.85); } 35% { opacity: 1; transform: translateY(-2px) scale(1.18); background: #E8663A; } } @keyframes lp2CtaLabelIn { from { opacity: 0; transform: translateY(2px); letter-spacing: .04em; } to { opacity: 1; transform: translateY(0); letter-spacing: -.005em; } } /* Scan bar inferior ember */ .btn-login.lp2-cta.loading::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient( 90deg, transparent 0%, rgba(232,102,58,.0) 20%, rgba(232,102,58,.85) 50%, rgba(232,102,58,.0) 80%, transparent 100% ); background-size: 200% 100%; background-position: -100% 0; animation: lp2CtaScan 1.4s cubic-bezier(.4,0,.6,1) infinite; border-radius: 0 0 9px 9px; } @keyframes lp2CtaScan { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* Shake animation en error */ .lp2-pass-wrap.lp2-shake { animation: lp2Shake .5s cubic-bezier(.36,.07,.19,.97) both; border-color: rgba(224,82,82,.45); box-shadow: 0 0 0 3px rgba(224,82,82,.10); } /* ── Footer ── */ .lp2-foot { display: flex; align-items: center; justify-content: flex-end; opacity: 0; animation: lp2FadeUp .5s cubic-bezier(.16,1,.3,1) .6s both; } .lp2-version { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.28); } /* ── Keyframes ── */ @keyframes lp2FadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes lp2AvatarFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.92); } } @keyframes lp2AvatarPickedExit { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.08); } } @keyframes lp2AvatarLand { 0% { opacity: 0; transform: translateY(-12px) scale(.85); } 60% { opacity: 1; transform: translateY(2px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lp2Shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } /* ── Responsive ── */ @media (max-width: 560px) { #login-screen.lp2 { padding: 16px 18px; } .lp2-greeting-sub { margin-bottom: 28px; font-size: 12px; } .lp2-avatars { flex-direction: column; gap: 12px; width: 100%; max-width: 280px; } .lp2-avatar-card { width: 100%; height: 84px; flex-direction: row; gap: 14px; padding: 14px 18px; justify-content: flex-start; } .lp2-avatar-circle { width: 56px; height: 56px; font-size: 24px; } .cm2-foot-total, .lp2-avatar-name { font-size: 15px; } .lp2-auth-avatar { margin-bottom: 14px; } .lp2-avatar-circle--lg { width: 68px; height: 68px; font-size: 30px; } .lp2-back { top: -36px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { } /* ═══════════════════════════════════════════════════════════════ v7.73.0 · DASHBOARD HERO — Identity-First Pattern Hero protagonista con reloj live + saludo personalizado + status ═══════════════════════════════════════════════════════════════ */ #page-dashboard .nd-hero { display: flex; align-items: stretch; gap: 48px; padding: 24px 0 36px; margin-bottom: 28px; border-bottom: 1px solid rgba(38,38,38,.06); position: relative; } /* ── Reloj live ── */ .nd-hero-clock { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex-shrink: 0; opacity: 0; animation: ndHeroFadeIn .55s cubic-bezier(.16,1,.3,1) .05s both; } .nd-hero-time { font-family: var(--serif, 'Fraunces', serif); font-size: 56px; font-weight: 500; letter-spacing: -.03em; color: #262626; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; display: flex; align-items: baseline; } .nd-hero-time-sep { margin: 0 -2px; opacity: .45; animation: ndHeroBlink 1.4s ease-in-out infinite; } @keyframes ndHeroBlink { 0%, 100% { opacity: .45; } 50% { opacity: .9; } } .nd-hero-date { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.40); padding-left: 4px; } /* ── Meta: identidad + saludo + summary ── */ .nd-hero-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; } /* Status pill (renderSaludo aplica clases .open/.break/.closed/.rest) */ .nd-hero-status { display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(38,38,38,.55) !important; align-self: flex-start; padding: 0 0 0 14px !important; position: relative; opacity: 0; animation: ndHeroFadeUp .6s cubic-bezier(.16,1,.3,1) .15s both; } .nd-hero-status::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: rgba(38,38,38,.32); box-shadow: 0 0 0 3px rgba(38,38,38,.06); } .nd-hero-status.open::before { background: #22A55A; box-shadow: 0 0 0 3px rgba(34,165,90,.18); animation: ndHeroPulse 2.4s ease-in-out infinite; } .nd-hero-status.break::before { background: #D4882A; box-shadow: 0 0 0 3px rgba(212,136,42,.20); } .nd-hero-status.closed::before { background: rgba(38,38,38,.32); box-shadow: 0 0 0 3px rgba(38,38,38,.08); } .nd-hero-status.rest::before { background: #8B5CB8; box-shadow: 0 0 0 3px rgba(139,92,184,.20); } @keyframes ndHeroPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34,165,90,.18); } 50% { box-shadow: 0 0 0 5px rgba(34,165,90,.10); } } .nd-hero-local-tag { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.32); align-self: flex-start; padding-left: 14px; position: relative; opacity: 0; animation: ndHeroFadeUp .6s cubic-bezier(.16,1,.3,1) .22s both; margin-top: -2px; } /* Greeting hero — typewriter animado por renderSaludo */ .nd-hero-greeting { font-family: var(--serif, 'Fraunces', serif); font-size: 38px; font-weight: 500; letter-spacing: -.025em; color: #262626; line-height: 1.1; margin: 8px 0 4px; white-space: nowrap; overflow: hidden; opacity: 0; animation: ndHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .3s both; } .nd-hero-greeting strong { font-weight: 600; color: #E8663A; } .nd-hero-greeting.saludo-typing::after { content: "|"; display: inline-block; margin-left: 2px; color: #E8663A; animation: ndHeroCaret .9s steps(1) infinite; } @keyframes ndHeroCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Summary: conteos del día con highlights */ .nd-hero-summary { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 14px; font-weight: 400; color: rgba(38,38,38,.55); line-height: 1.55; margin: 0; opacity: 0; animation: ndHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .55s both; } .nd-hero-summary a { color: #E8663A; cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .nd-hero-summary a:hover { border-bottom-color: #E8663A; } @keyframes ndHeroFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ndHeroFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ═══ KPI strip (compacto, debajo del hero) ═══ */ #page-dashboard .nd-kpi-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; background: #fff; border: 1px solid rgba(38,38,38,.045); border-radius: 12px; padding: 16px 24px; margin-bottom: 28px; box-shadow: 0 0 0 1px rgba(38,38,38,.02), 0 2px 8px rgba(38,38,38,.03); opacity: 0; animation: ndHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .7s both; } .nd-kpi-stat { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; } .nd-kpi-stat-l { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(38,38,38,.42); } .nd-kpi-stat-val { font-family: var(--serif, 'Fraunces', serif); font-size: 22px; font-weight: 600; color: #262626; letter-spacing: -.015em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; line-height: 1.1; } .nd-kpi-stat-delta { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: rgba(38,38,38,.42); margin-top: 1px; } /* Reset legacy nd-kpi-badge background/padding cuando se combina con stat-delta */ .nd-kpi-stat-delta.nd-kpi-badge { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; letter-spacing: .04em; display: inline-block; width: auto; } .nd-kpi-stat-sep { width: 1px; height: 32px; background: rgba(38,38,38,.06); margin: 0 8px; align-self: center; } /* Responsive */ @media (max-width: 980px) { #page-dashboard .nd-hero { flex-direction: column; gap: 20px; padding: 20px 0 28px; } .nd-hero-time { font-size: 44px; } .nd-hero-greeting { font-size: 30px; white-space: normal; } #page-dashboard .nd-kpi-strip { grid-template-columns: 1fr 1fr; gap: 16px 0; padding: 14px 18px; } .nd-kpi-stat-sep { display: none; } .nd-kpi-stat { padding: 8px 12px; border-bottom: 1px solid rgba(38,38,38,.06); } .nd-kpi-stat:nth-child(odd) { border-right: 1px solid rgba(38,38,38,.06); } .nd-kpi-stat:nth-last-child(-n+2) { border-bottom: none; } } @media (max-width: 560px) { .nd-hero-time { font-size: 38px; } .nd-hero-greeting { font-size: 24px; } #page-dashboard .nd-kpi-strip { grid-template-columns: 1fr; } .nd-kpi-stat { border-right: none !important; } .nd-kpi-stat:not(:last-child) { border-bottom: 1px solid rgba(38,38,38,.06); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .nd-hero-time-sep { animation: none !important; opacity: .7; } } /* ═══════════════════════════════════════════════════════════════ v7.74.0 · CIERRE DE CAJA · HERO Identity-First (unificado) Reloj live + saludo + total protagonista + CTA Lacca Nera ═══════════════════════════════════════════════════════════════ */ #page-cierre .cc4-hero { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: flex-start; padding: 24px 0 36px; margin-bottom: 32px; border-bottom: 1px solid rgba(38,38,38,.06); position: relative; } /* ── Columna izquierda: reloj live ── */ .cc4-hero-clock { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; flex-shrink: 0; opacity: 0; animation: ccHeroFadeIn .55s cubic-bezier(.16,1,.3,1) .05s both; } .cc4-hero-time { font-family: var(--serif, 'Fraunces', serif); font-size: 64px; font-weight: 500; letter-spacing: -.035em; color: #262626; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; display: flex; align-items: baseline; } .cc4-hero-time-sep { margin: 0 -2px; opacity: .45; animation: ccHeroBlink 1.4s ease-in-out infinite; } @keyframes ccHeroBlink { 0%, 100% { opacity: .45; } 50% { opacity: .9; } } .cc4-hero-date { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.40); padding-left: 4px; } /* ── Columna derecha: identidad + acción ── */ .cc4-hero-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 560px; } /* Status pill */ .cc4-hero-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(38,38,38,.55); padding-left: 14px; position: relative; opacity: 0; animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .15s both; } .cc4-hero-status-dot { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: rgba(38,38,38,.32); box-shadow: 0 0 0 3px rgba(38,38,38,.06); transition: background .2s, box-shadow .2s; } .cc4-hero-status[data-state="abierta"] .cc4-hero-status-dot { background: #22A55A; box-shadow: 0 0 0 3px rgba(34,165,90,.18); animation: ccHeroPulse 2.4s ease-in-out infinite; } .cc4-hero-status[data-state="pendiente"] .cc4-hero-status-dot { background: #D4882A; box-shadow: 0 0 0 3px rgba(212,136,42,.20); animation: ccHeroPulseWarn 1.6s ease-in-out infinite; } .cc4-hero-status[data-state="cerrada"] .cc4-hero-status-dot { background: rgba(38,38,38,.32); box-shadow: 0 0 0 3px rgba(38,38,38,.06); } @keyframes ccHeroPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34,165,90,.18); } 50% { box-shadow: 0 0 0 5px rgba(34,165,90,.10); } } @keyframes ccHeroPulseWarn { 0%, 100% { box-shadow: 0 0 0 3px rgba(212,136,42,.20); } 50% { box-shadow: 0 0 0 5px rgba(212,136,42,.12); } } .cc4-hero-status-sep { color: rgba(38,38,38,.28); } .cc4-hero-local-tag { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.32); padding-left: 14px; position: relative; margin-top: 8px; opacity: 0; animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .22s both; } .nd-hero-local-tag::before, .cc4-hero-local-tag::before { background: rgba(38,38,38,.28); content: ""; height: 1px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 8px; } /* Saludo */ .cc4-hero-greeting { font-family: var(--serif, 'Fraunces', serif); font-size: 28px; font-weight: 500; letter-spacing: -.022em; color: #262626; line-height: 1.1; margin: 14px 0 22px; opacity: 0; animation: ccHeroFadeUp .6s cubic-bezier(.16,1,.3,1) .3s both; } .pe-dd-meta em, .cc4-hero-greeting em { color: #E8663A; font-style: normal; } /* Total protagonista */ .cc4-hero-total-block { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; opacity: 0; animation: ccHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .4s both; } .cc4-hero-total { font-family: var(--serif, 'Fraunces', serif); font-size: 64px; font-weight: 500; letter-spacing: -.035em; color: #262626; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .cc4-hero-delta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: rgba(38,38,38,.05); color: rgba(38,38,38,.5); } .cc4-hero-delta-suffix { opacity: .65; font-weight: 500; } .cc4-hero-total-label { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13px; font-weight: 400; color: rgba(38,38,38,.45); margin-top: 8px; opacity: 0; animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .48s both; } /* Stats inline */ .cc4-hero-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 16px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13px; color: rgba(38,38,38,.55); opacity: 0; animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .56s both; } .cc4-hero-stat { display: inline-flex; align-items: baseline; gap: 5px; } .cc4-hero-stat b { font-family: var(--serif, 'Fraunces', serif); font-weight: 600; font-size: 14px; color: #262626; font-variant-numeric: tabular-nums; letter-spacing: -.005em; } .nd-kpi-stat-delta.down, .cc4-hero-stat-egresos b { color: #C62828; } /* CTA Lacca Nera (override .cc3-action-cta legacy) */ .cc4-hero-cta, #page-cierre .cc4-hero-cta.cc3-action-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; min-height: 54px; margin-top: 28px; padding: 0 24px; background: linear-gradient(158deg, #333 0%, #262626 100%) !important; color: #fff !important; border: 1px solid rgba(0,0,0,.4) !important; border-radius: 11px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 14.5px; font-weight: 600; letter-spacing: .005em; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 4px 14px rgba(26,20,16,.24); transition: opacity .15s ease, transform .12s ease, box-shadow .22s ease; opacity: 0; animation: ccHeroFadeUp .65s cubic-bezier(.16,1,.3,1) .68s both; } .cc4-hero-cta:hover { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 8px 22px rgba(232,102,58,.30); } .cc4-hero-cta:disabled, .cc4-hero-cta[disabled] { opacity: .42; pointer-events: none; cursor: not-allowed; } .cc4-hero-cta-arrow { width: 16px; height: 16px; position: relative; z-index: 1; transition: transform .2s cubic-bezier(.16,1,.3,1); } .cc4-hero-cta:hover .cc4-hero-cta-arrow { transform: translateX(3px); } /* Sub texto contextual */ .cc4-hero-sub { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 400; color: rgba(38,38,38,.5); line-height: 1.55; margin: 14px 0 0; max-width: 480px; opacity: 0; animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .76s both; } /* Foot · último cierre */ .cc4-hero-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(38,38,38,.06); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; animation: ccHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .85s both; width: 100%; max-width: 420px; } .cc4-hero-foot-label { color: rgba(38,38,38,.42); font-weight: 600; } .cc4-hero-foot-meta { color: rgba(38,38,38,.65); font-weight: 500; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 11.5px; letter-spacing: 0; text-transform: none; } @keyframes ccHeroFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ccHeroFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 1100px) { #page-cierre .cc4-hero { gap: 36px; } .cc4-hero-time { font-size: 52px; } .cc4-hero-total { font-size: 54px; } } @media (max-width: 768px) { #page-cierre .cc4-hero { grid-template-columns: 1fr; gap: 20px; padding: 18px 0 28px; } .cc4-hero-clock { padding-top: 0; flex-direction: row; gap: 14px; align-items: baseline; } .cc4-hero-time { font-size: 44px; } .cc4-hero-total { font-size: 48px; } .cc4-hero-greeting { font-size: 24px; margin: 10px 0 18px; } .cc4-hero-cta, .cc4-hero-foot { max-width: 100%; } } @media (max-width: 480px) { .cc4-hero-time { font-size: 38px; } .cc4-hero-total { font-size: 40px; } #page-movimientos .mv2-page-head-title, #page-movimientos .mv2-kpi-num, .cc4-hero-greeting { font-size: 22px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .cc4-hero-time-sep { opacity: .7 !important; animation: none !important; } } /* ─── MASTER HEAD v2 ─── */ #page-clientes .cli-master-head-v2 { padding: 4px 0 18px; border-bottom: 1px solid rgba(38,38,38,.06); margin-bottom: 14px; } .cli-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .cli-head-title { font-family: var(--serif, 'Fraunces', serif); font-size: 32px; font-weight: 500; letter-spacing: -.025em; color: #262626; line-height: 1.1; margin: 2px 0 6px; } .cli-head-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13px; color: rgba(38,38,38,.55); margin: 0; } /* CTA nuevo cliente — Lacca Nera mini */ .cli-btn-new-v2 { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: linear-gradient(158deg, #333 0%, #262626 100%); color: #fff; border: 1px solid rgba(0,0,0,.32); border-radius: 9px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 600; letter-spacing: 0; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 6px rgba(26,20,16,.18); transition: opacity .15s, transform .1s, box-shadow .2s; } .cli-btn-new-v2:hover { opacity: .92; box-shadow: 0 4px 12px rgba(26,20,16,.24); } /* Controls v2: search input estilo LXG */ #page-cierre .cc3-anatomy-controls, #page-cierre .cc3-hist-controls, .cli-controls-v2 { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; } #page-clientes .cli-controls-v2 .cli-master-bar { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; background: #E7E5E6; border: none; border-radius: 9px; padding: 0 12px; height: 36px; transition: background .15s; } .cd-nv-search:focus, .emp-toolbar-export:hover, #page-clientes .cli-controls-v2 .cli-master-bar:focus-within { background: #dfdcdd; } .cli-controls-v2 .cli-search-ico { color: rgba(38,38,38,.42); flex-shrink: 0; margin-right: 6px; } #page-clientes .cli-controls-v2 .cli-master-bar input { flex: 1; border: none; background: transparent; outline: none; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 500; color: #262626; letter-spacing: -.005em; } #page-clientes .cli-controls-v2 .cli-master-bar input::placeholder { color: rgba(38,38,38,.32); font-weight: 400; } /* Tier filters v2 */ #page-clientes .cli-controls-v2 .cli-tier-filters { display: inline-flex; gap: 3px; background: rgba(38,38,38,.04); padding: 3px; border-radius: 8px; } #page-clientes .cli-controls-v2 .cli-tier-btn { background: transparent; border: none; padding: 5px 11px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 11.5px; font-weight: 600; letter-spacing: -.005em; color: rgba(38,38,38,.55); border-radius: 6px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; } #page-clientes .cli-controls-v2 .cli-tier-btn.active { background: #fff; color: #262626; box-shadow: 0 1px 2px rgba(38,38,38,.08); } /* ─── DRAWER HERO v7.75.0 ─── */ #page-clientes .cd-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 28px 24px; background: #fff; border-bottom: 1px solid rgba(38,38,38,.06); text-align: center; } /* Actions arriba a la derecha */ .cd-hero-actions { position: absolute; top: 14px; right: 14px; display: inline-flex; gap: 6px; } .cd-hero-act { width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px solid rgba(38,38,38,.10); color: rgba(38,38,38,.45); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .18s; } .venc-descartar-cancel:hover, .lp2-back:hover, .cd-hero-act:hover { background: rgba(38,38,38,.04); color: #262626; } .vc-group-chevron.expanded, #page-cierre .cc3-hero-delta[data-state="negative"] svg, .cm2-item .lxg-icon-btn--danger:hover, .cc4-hero-delta[data-state="negative"] svg, .cd-hero-act-close:hover { transform: rotate(90deg); } /* Avatar grande con gradient por tier */ .cd-hero-avatar { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif, 'Fraunces', serif); font-size: 36px; font-weight: 500; letter-spacing: -.025em; color: #fff; line-height: 1; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 20px rgba(38,38,38,.18); user-select: none; animation: cdHeroAvatarIn .55s cubic-bezier(.34,1.56,.64,1) .05s both; } /* Tier gradients */ .cd-hero-avatar.t-bronce { background: linear-gradient(158deg, #b78554 0%, #7e5634 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 20px rgba(183,133,84,.30); } .cd-hero-avatar.t-plata { background: linear-gradient(158deg, #b8b8b8 0%, #7d7d7d 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 20px rgba(140,140,140,.28); } .cd-hero-avatar.t-oro { background: linear-gradient(158deg, #d4a544 0%, #9a7320 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 20px rgba(212,165,68,.32); } .cd-hero-avatar.t-platino { background: linear-gradient(158deg, #E8663A 0%, #C84F1F 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 20px rgba(232,102,58,.34); } @keyframes cdHeroAvatarIn { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } /* Name hero */ .cd-hero-name { font-family: var(--serif, 'Fraunces', serif); font-size: 26px; font-weight: 500; letter-spacing: -.022em; color: #262626; line-height: 1.15; margin: 4px 0 0; opacity: 0; animation: cdHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .25s both; } /* Tier row */ .cd-hero-tier-row { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12px; color: rgba(38,38,38,.55); opacity: 0; animation: cdHeroFadeUp .55s cubic-bezier(.16,1,.3,1) .38s both; } .cd-hero-tier { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .cd-hero-tier.t-bronce { background: rgba(183,133,84,.10); color: #8b6230; } .cd-hero-tier.t-bronce .cd-hero-tier-dot { background: #b78554; } .cd-hero-tier.t-plata { background: rgba(140,140,140,.10); color: #565656; } .cd-hero-tier.t-plata .cd-hero-tier-dot { background: #8c8c8c; } .cd-hero-tier.t-oro { background: rgba(212,165,68,.12); color: #8a5e10; } .cd-hero-tier.t-oro .cd-hero-tier-dot { background: #d4a544; } .empd-stat--amber, .empd-venc-tag--amber, .empd-act--primary:hover, .cd-hero-tier.t-platino { background: rgba(232,102,58,.10); color: #B84420; } .vc-dias.d-semana .vc-dias-dot, .mv-tipo.t-ajuste .mv-tipo-dot, .cd-hero-tier.t-platino .cd-hero-tier-dot { background: #E8663A; } .cd-hero-meta { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12px; color: rgba(38,38,38,.5); font-weight: 400; } @keyframes cdHeroFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 560px) { .lp2-greeting, .cli-head-title { font-size: 26px; } #page-clientes .cd-hero { padding: 28px 20px 20px; } .cd-hero-avatar { width: 72px; height: 72px; font-size: 30px; } .lp2-auth-hello, .cd-hero-name { font-size: 22px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { } /* ─── Header v2: sub-stats inline ─── */ .wagon-sig, .va-body, .lx-modal .lx-sf, .cli-head-meta, #page-empresas .emp-header-v2 .emp-header-left { display: flex; flex-direction: column; gap: 4px; } .emp-header-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13px; color: rgba(38,38,38,.55); margin: 4px 0 0; } .cli-head-stat, .emp-header-stat { align-items: baseline; display: inline-flex; gap: 4px; } .cli-head-stat b, .emp-header-stat b { color: #262626; font-family: var(--serif, 'Fraunces', serif); font-size: 14.5px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.005em; } .cc4-hero-stat-sep, .cli-head-stat-sep, .cd-hero-tier-sep, .emp-header-stat-sep { color: rgba(38,38,38,.25); } /* ─── Card avatar (initials con color semántico) ─── */ .emp-card-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #fff; flex-shrink: 0; user-select: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 8px rgba(38,38,38,.10); } /* Responsive */ @media (max-width: 480px) { .emp-card-avatar { width: 36px; height: 36px; font-size: 12px; } .emp-header-stats { font-size: 12px; } .emp-header-stat b { font-size: 13px; } } /* ═══════════════════════════════════════════════════════════════ v7.77.0 · VENCIMIENTOS — Asistente Identity-First Avatar empleado + saludo + insight contextual, arriba del panel ═══════════════════════════════════════════════════════════════ */ #page-vencimientos .va-card-v2 { position: relative; background: #fff; border: 1px solid rgba(38,38,38,.06); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 0 0 1px rgba(38,38,38,.02), 0 2px 8px rgba(38,38,38,.04); display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, box-shadow .2s; } /* Borde lateral semántico por nivel */ .va-card-v2::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: rgba(38,38,38,.18); } /* HERO row: avatar + eyebrow + titulo + icon mini */ #page-empresas .emp-card .emp-card-top, .va-card-v2 .va-hero { align-items: flex-start; display: flex; gap: 12px; } .va-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif, 'Fraunces', serif); font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: #fff; flex-shrink: 0; user-select: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(38,38,38,.18); } .va-hero-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .va-card-v2 .va-hero-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.45); } .pdv-tot-discount, .pdv-tot-pagado .pdv-tot-val, .cm2-stockprev-new, .nd-kpi-stat-delta.up, .va-card-v2.ok .va-hero-eyebrow { color: #1A7A45; } .va-card-v2.atencion .va-hero-eyebrow { color: #8B5C18; } .pdv-meta-danger, .pdv-tot-saldo .pdv-tot-val, .va-card-v2.critico .va-hero-eyebrow { color: #A83030; } .va-card-v2 .va-titulo { font-family: var(--serif, 'Fraunces', serif); font-size: 16px; font-weight: 500; letter-spacing: -.015em; color: #262626; line-height: 1.25; } .va-card-v2 .va-icon-mini { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: rgba(38,38,38,.04); } ::-webkit-scrollbar, .sb2-brand-logo svg, .trf-btn-confirm svg, .va-card-v2 .va-icon-mini svg { height: 14px; width: 14px; } .va-card-v2.atencion .va-icon-mini { background: rgba(212,136,42,.10); color: #8B5C18; } .empd-venc-tag--danger, .empd-act--danger:hover, .lxg-icon-btn--danger:hover, .cc4-hero-delta[data-state="negative"], .va-card-v2.critico .va-icon-mini { background: rgba(224,82,82,.10); color: #A83030; } /* BODY: cuerpo + product pills */ .va-card-v2 .va-body { display: flex; flex-direction: column; gap: 10px; padding-left: 56px; /* alineado con la columna del avatar */ } .va-card-v2 .va-cuerpo { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 400; color: rgba(38,38,38,.65); line-height: 1.5; } /* FOOT */ .va-card-v2 .va-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 56px; padding-top: 6px; border-top: 1px solid rgba(38,38,38,.06); margin-top: 4px; } /* Responsive */ @media (max-width: 900px) { .va-card-v2 .va-body, .va-card-v2 .va-foot { padding-left: 0; } } /* ═══════════════════════════════════════════════════════════════ v7.78.0 · TICKET Identity-First — card blanca Mac OS Overlay limpio, animación entrada, botones consistentes con sistema ═══════════════════════════════════════════════════════════════ */ .ticket-v2-overlay { position: fixed; inset: 0; z-index: calc(var(--z-panel) + 100); background: rgba(38, 38, 38, .26); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .22s ease; } .ticket-v2-shell { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 360px; max-width: 100%; transform: scale(.96) translateY(8px); opacity: 0; transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .24s ease; } .ticket-v2-overlay.is-in .ticket-v2-shell { transform: scale(1) translateY(0); opacity: 1; } /* ─── Card blanca Identity-First ─── */ .ticket-v2-card { background: #FFFFFF; border-radius: 16px; padding: 24px 22px 20px; box-shadow: 0 0 0 1px rgba(38,38,38,.045), 0 8px 28px rgba(38,38,38,.10), 0 24px 60px rgba(38,38,38,.14); font-family: var(--sans, 'Inter Tight', sans-serif); color: #262626; cursor: default; } /* HEAD */ .fg, .nd-card:hover, .mv-table-card:hover, #page-movimientos .mv2-kpi:hover, .v3-card:hover, .co-card:hover, .trf-card:hover, .nd-card, .mv-table-card, #page-movimientos .mv2-kpi, .v3-card, .v3-card.v3-card-critico, .v3-card.v3-card-hero, .v3-card.v3-card-control, .co-card, .trf-card, .cc3-hero, .sk-kpi-card, .sk-filter-bar, #page-stock .ph, .ticket-v2-head { margin-bottom: 14px; } .ticket-v2-brand { font-family: var(--serif, 'Fraunces', serif); font-size: 22px; font-weight: 500; letter-spacing: -.022em; color: #262626; line-height: 1.1; margin-bottom: 4px; } .ticket-v2-local { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.42); margin-bottom: 8px; } .ticket-v2-num { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 12px; font-weight: 600; color: #E8663A; letter-spacing: .04em; margin-bottom: 4px; } .ticket-v2-date { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 400; color: rgba(38,38,38,.40); letter-spacing: .02em; } /* DIVIDERS */ .ticket-v2-divider { border-top: 1px dashed rgba(38,38,38,.16); margin: 14px 0; } /* ITEMS */ #page-empresas .emp-card-top, .ticket-v2-item { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; } .tk-body, .trf-cart-info, .ticket-v2-item-main { display: flex; flex-direction: column; flex: 1; gap: 3px; min-width: 0; } .ticket-v2-item-name { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 600; color: #262626; letter-spacing: -.005em; line-height: 1.3; } .ticket-v2-item-qty { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 500; color: rgba(38,38,38,.50); letter-spacing: .02em; } .ticket-v2-item-price { font-family: var(--serif, 'Fraunces', serif); font-size: 13.5px; font-weight: 600; color: #262626; letter-spacing: -.01em; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* DESCUENTO */ .ticket-v2-desc { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 11.5px; font-weight: 500; color: #1A7A45; margin-bottom: 4px; } .ticket-v2-desc span:last-child { font-variant-numeric: tabular-nums; } /* TOTAL */ .ticket-v2-total { align-items: baseline; display: flex; justify-content: space-between; } .ticket-v2-total-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.55); } .ticket-v2-total-value { font-family: var(--serif, 'Fraunces', serif); font-size: 26px; font-weight: 600; color: #262626; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1; } /* META */ .ticket-v2-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ticket-v2-meta-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.42); flex-shrink: 0; } .ticket-v2-meta-value { font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 11.5px; font-weight: 500; color: #262626; letter-spacing: -.005em; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── ACTIONS (botones Cerrar + Descargar) ─── */ .ticket-v2-actions { display: flex; justify-content: center; gap: 8px; } .ticket-v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; height: 42px; padding: 0 18px; border-radius: 11px; font-family: var(--sans, 'Inter Tight', sans-serif); font-size: 12.5px; font-weight: 600; letter-spacing: 0; cursor: pointer; transition: background .15s, color .15s, opacity .15s, transform .1s, box-shadow .18s, border-color .15s; user-select: none; } .ticket-v2-btn-ghost { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.32); color: rgba(255,255,255,.92); backdrop-filter: blur(8px); } .ticket-v2-btn-ghost:hover { background: rgba(255,255,255,.85); color: #262626; border-color: rgba(255,255,255,.7); } .ticket-v2-btn-prime { background: linear-gradient(158deg, #333 0%, #262626 100%); border: 1px solid rgba(0,0,0,.4); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 4px 14px rgba(26,20,16,.30); position: relative; overflow: hidden; } .cc4-hero-cta::before, .ticket-v2-btn-prime::before { background: linear-gradient(90deg, rgba(232,102,58,.55) 0%, rgba(232,102,58,.18) 30%, transparent 70%); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .22s ease; } .ticket-v2-btn-prime:hover { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 8px 22px rgba(232,102,58,.32); } /* Responsive */ @media (max-width: 420px) { .ticket-v2-shell { width: 100%; } .ticket-v2-card { padding: 20px 18px 18px; } .ticket-v2-brand { font-size: 20px; } .ticket-v2-total-value { font-size: 22px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { } /* ─── Cards anatomy: radius + shadow del sistema ─── */ #page-cierre .cc3-anatomy-card { background: #FFFFFF; margin-bottom: 16px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(38,38,38,.045) !important; box-shadow: 0 0 0 1px rgba(38,38,38,.02), 0 2px 8px rgba(38,38,38,.04) !important; transition: border-color .18s ease, box-shadow .22s ease !important; } #page-cierre .cc3-anatomy-card:hover { border-color: rgba(38,38,38,.10) !important; box-shadow: 0 0 0 1px rgba(38,38,38,.045), 0 4px 16px rgba(38,38,38,.06) !important; } /* ─── Tipografía editorial unificada ─── */ #page-cierre .cc3-anatomy-eyebrow, #page-cierre .cc3-sub-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace) !important; font-weight: 600 !important; letter-spacing: .18em; color: rgba(38,38,38,.42) !important; } #page-cierre .cc3-anatomy-title, #page-cierre .cc3-anatomy-title-sm { font-family: var(--serif, 'Fraunces', Georgia, serif) !important; color: #262626 !important; font-weight: 500 !important; letter-spacing: -.022em; } #page-cierre .cc3-anatomy-sub, #page-cierre .cc3-anatomy-sub-sm { font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; color: rgba(38,38,38,.55) !important; } /* ─── Anatomy head separator: 1px hairline en lugar de bolder ─── */ #page-cierre .cc3-arqueo-grid > section + section { border-left: 1px solid rgba(38,38,38,.06) !important; } /* ─── Medios de pago: items refinement ─── */ #page-cierre .cc3-medios-name { font-size: 13px; font-weight: 500; flex: 1; letter-spacing: -0.005em; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; color: rgba(38,38,38,.75) !important; } #page-cierre .cc3-anatomy-head, #page-cierre .cc3-medios-item { border-bottom: 1px solid rgba(38,38,38,.06) !important; } /* ─── Arqueo: rows refinement ─── */ #page-cierre .cc3-arqueo-row, #page-cierre .cc3-arqueo .cc-arqueo-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; margin-top: 0 !important; border-top: none !important; border-bottom: 1px solid rgba(38,38,38,.05) !important; } #page-cierre .cc3-arqueo-label { font-size: 13px; font-weight: 500 !important; letter-spacing: -0.005em; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; color: rgba(38,38,38,.65) !important; } #page-cierre .cc3-medios-amount, #page-cierre .cc3-arqueo-val, #page-cierre .cc3-arqueo .cc-arqueo-val { color: #262626 !important; font-family: var(--serif, 'Fraunces', Georgia, serif) !important; font-weight: 600 !important; letter-spacing: -.012em; } #page-cierre .cc3-arqueo-row-strong .cc3-arqueo-label { color: #262626 !important; font-weight: 600 !important; } #page-cierre .cc3-arqueo-row-strong, #page-cierre .cc3-arqueo-row-diff { margin-top: 4px !important; padding-top: 14px !important; border-top: 1px solid rgba(38,38,38,.10) !important; } #page-cierre .cc3-arqueo-row-egresos .cc3-arqueo-label, #page-cierre .cc3-arqueo-val-neg, #page-cierre .cc3-arqueo .cc-egreso-val { font-weight: 600 !important; color: #C62828 !important; } /* ─── Arqueo input field ─── */ #page-cierre .cc3-arqueo-input-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; background: #E7E5E6 !important; border-radius: 9px; border: 1px solid transparent !important; transition: background .15s, border-color .15s, box-shadow .15s !important; } #page-cierre .cc3-arqueo-input { width: 160px; padding: 9px 12px 9px 24px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 10px; font-size: 14px; letter-spacing: -0.005em; text-align: right; font-variant-numeric: tabular-nums; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.18s ease; font-family: var(--serif, 'Fraunces', Georgia, serif) !important; color: #262626 !important; font-weight: 500 !important; } .sb2-section-label, #page-cierre .cc3-arqueo-input-prefix { color: rgba(38,38,38,.45) !important; } /* ─── Retiro toggle btn (consistent ghost) ─── */ #page-cierre .cc3-retiro-toggle-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 14px; font-family: var(--sans, "Inter", system-ui, sans-serif); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; border: 1px dashed rgba(38,38,38,.18) !important; background: transparent !important; color: rgba(38,38,38,.55) !important; border-radius: 10px; transition: border-color .15s, background .15s, color .15s !important; } #page-cierre .cc3-retiro-toggle-btn:hover { border-style: solid; border-color: rgba(38,38,38,.32) !important; background: rgba(38,38,38,.025) !important; color: #262626 !important; } /* ─── Filter pills detalle ventas ─── */ #page-cierre .cc3-pago-filtro { display: inline-flex; align-items: center; gap: 5px; background: transparent !important; border: none !important; border-radius: 7px; color: rgba(38,38,38,.55) !important; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: -.005em; padding: 5px 11px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s !important; } /* ─── Empty states (Sin ventas hoy) ─── */ #page-cierre .cc3-anatomy-empty { padding: 32px 20px; text-align: center; font-size: 14px; font-weight: 400; font-family: var(--serif, 'Fraunces', Georgia, serif) !important; color: rgba(38,38,38,.42) !important; font-style: italic; } /* ─── Nota del turno textarea ─── */ #page-cierre .cc3-nota-input, #page-cierre textarea#cc-nota { background: rgba(38,38,38,.025) !important; border: 1px solid rgba(38,38,38,.08) !important; border-radius: 10px; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; color: #262626 !important; font-size: 13px !important; transition: background .15s, border-color .15s, box-shadow .15s !important; } #page-cierre .cc3-nota-input::placeholder, #page-cierre textarea#cc-nota::placeholder { color: rgba(38,38,38,.42) !important; font-style: italic; } #page-cierre .cc3-nota-input:focus, #page-cierre textarea#cc-nota:focus { background: #fff !important; border-color: rgba(38,38,38,.16) !important; box-shadow: 0 0 0 3px rgba(232,102,58,.08) !important; outline: none !important; } /* ─── Comparativa: chart bars con ink correcto ─── */ .sb2-brand-logo, #page-cierre .cc3-comp-bar { background: #262626 !important; } #page-cierre .cc3-comp-bar-val { font-family: var(--mono, 'JetBrains Mono', monospace) !important; color: rgba(38,38,38,.65) !important; font-weight: 600 !important; letter-spacing: .02em; font-variant-numeric: tabular-nums; } #page-cierre .cc3-comp-stat-label { font-family: var(--mono, 'JetBrains Mono', monospace) !important; color: rgba(38,38,38,.42) !important; letter-spacing: .14em; } #page-cierre .cc3-comp-stat-val { font-size: 18px; letter-spacing: -0.014em; font-variant-numeric: tabular-nums; font-family: var(--serif, 'Fraunces', Georgia, serif) !important; color: #262626 !important; font-weight: 600 !important; } /* ─── Historial: filter pills + search ─── */ #page-cierre .cc3-pago-filtros, #page-cierre .cc3-hist-filters { background: rgba(38,38,38,.04); border-radius: 9px; display: inline-flex; gap: 3px; padding: 3px; } #page-cierre .cc3-hist-filter { letter-spacing: -0.005em; background: transparent !important; border: none !important; border-radius: 7px; color: rgba(38,38,38,.55) !important; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 5px 11px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s !important; } #page-cierre .cc3-pago-filtro.on, #page-cierre .cc3-hist-filter.on { background: #fff !important; box-shadow: 0 1px 2px rgba(38,38,38,.08) !important; color: #262626 !important; } #page-cierre .cc3-hist-search { position: relative; display: flex; align-items: center; width: 260px; max-width: 100%; background: #E7E5E6 !important; border: 1px solid transparent !important; border-radius: 9px; transition: background .15s !important; } #page-cierre .cc3-arqueo-input-wrap:focus-within, #page-cierre .cc3-hist-search:focus-within { background: #fff !important; border-color: rgba(38,38,38,.10) !important; box-shadow: 0 0 0 3px rgba(232,102,58,.10) !important; } #page-cierre .cc3-hist-search input { width: 100%; padding: 9px 12px 9px 34px; background: rgba(26, 20, 16, 0.025); border: 1px solid rgba(26, 20, 16, 0.08); border-radius: 10px; font-weight: 500; letter-spacing: -0.005em; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.18s ease; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; color: #262626 !important; font-size: 12.5px !important; } #page-cierre .cc3-hist-search input::placeholder, #page-cierre .cc3-hist-search svg { color: rgba(38,38,38,.40) !important; } /* ─── Historial: rows refinement (date col + total + delta) ─── */ .cm2-stage--prep[data-collapsed="true"], #page-cierre .cc2-hist-list, #page-cierre .cc3-hist-list { padding: 0; } /* ─── Cell container (override del background paper crema legacy) ─── */ /* v7.82.1: container subtle white-ish para que las cards grises destaquen sobre él */ #page-stock .stock-lotes-cell { background: #F6F6F6 !important; padding: 14px 24px 16px 50px; border-bottom: 1px solid rgba(38,38,38,.06) !important; } #page-stock .sk-table-wrap tbody tr.stock-lotes-row td { background: #F6F6F6 !important; } /* ─── Expand button refinado (estilo sistema) ─── */ #page-stock .stock-expand-btn, #page-stock .sk-table-wrap .stock-expand-btn { width: 22px; height: 22px; background: #fff !important; border: 1px solid rgba(38,38,38,.10) !important; border-radius: 50%; color: rgba(38,38,38,.55) !important; transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .15s, color .15s, background .15s !important; } #page-stock .stock-expand-btn:hover { border-color: rgba(232,102,58,.40) !important; color: #E8663A !important; background: rgba(232,102,58,.04) !important; } #page-stock .stock-expand-btn.open { transform: rotate(90deg); background: linear-gradient(158deg, #E8663A, #C84F1F) !important; border-color: rgba(232,102,58,.30) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(232,102,58,.32) !important; } /* ─── Wrap principal ─── */ .stk-lotes-wrap { display: flex; flex-direction: column; gap: 10px; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); color: #262626; } /* v7.82.0: head con eyebrow + recon pill inline */ .stk-lotes-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; } .cli-head-eyebrow, .stk-lotes-eyebrow { color: rgba(38,38,38,.42); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .stk-lotes-empty { font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; font-style: italic; color: rgba(38,38,38,.42); padding: 4px 0; } /* ─── Row individual (Mac OS clean tile) ─── */ /* v7.82.1: card más oscura que el container (sino blanco se pierde con filas del Stock) */ .stk-lote-row { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; background: #EAE8E9; border: 1px solid rgba(38,38,38,.06); border-radius: 10px; padding: 11px 14px 11px 18px; transition: background .15s ease, border-color .15s ease, box-shadow .18s ease, transform .14s ease; } .stk-lote-row:hover { background: #E2E0E1; border-color: rgba(38,38,38,.10); box-shadow: 0 2px 8px rgba(38,38,38,.05); } /* Left rail semántico */ .stk-lote-rail { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: rgba(38,38,38,.12); } .tk.ok::before, .nd-pago-pill.transferencia::before, .cc2-pago-pill.transferencia::before, .mv-tipo.t-venta .mv-tipo-dot, .mv-pago.transferencia .mv-pago-dot, .cd-nv-toggle.active, .cm2-dot--ok, .va-card-v2.ok::before, .stk-lote--ok .stk-lote-rail { background: #22A55A; } /* Index column (número + FIFO) */ .stk-lote-index { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; } .stk-lote-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; color: rgba(38,38,38,.55); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgba(38,38,38,.08); } .stk-lote-row.is-fifo .stk-lote-num { background: linear-gradient(158deg, #E8663A, #C84F1F); color: #fff; box-shadow: 0 2px 6px rgba(232,102,58,.28); } .stk-lote-fifo-tag { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 7.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E8663A; margin-top: 1px; } /* Main content (date + days + meta) */ .nd-rank-info, #page-cierre .cc3-hist-info, .emp-exp-stat, .stk-lote-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .stk-lote-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .stk-lote-date { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #262626; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; } /* v7.82.1: pills más opacos para que destaquen sobre el card gris */ .stk-lote--ok .stk-lote-date { background: rgba(34,165,90,.15); color: #1A7A45; border-color: rgba(34,165,90,.28); } .stk-lote--proximo .stk-lote-date { background: rgba(212,136,42,.16); color: #8B5C18; border-color: rgba(212,136,42,.30); } .stk-lote--critico .stk-lote-date { background: rgba(224,82,82,.15); color: #A83030; border-color: rgba(224,82,82,.28); } .stk-lote-dias { font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 11.5px; font-weight: 500; color: rgba(38,38,38,.55); letter-spacing: -.005em; } .stk-lote--critico .stk-lote-dias { color: #A83030; font-weight: 600; } .stk-lote-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; } .stk-lote-qty { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: rgba(38,38,38,.72); font-variant-numeric: tabular-nums; } .stk-lote-qty.is-unknown { color: rgba(38,38,38,.38); font-style: italic; } .stk-lote-codigo { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: .04em; color: rgba(38,38,38,.50); } .stk-lote-codigo strong { color: #262626; font-weight: 600; letter-spacing: 0; } .stk-lote-notas { font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 11px; color: rgba(38,38,38,.50); font-style: italic; letter-spacing: -.005em; position: relative; padding-left: 10px; } .stk-lote-notas::before { content: "·"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: rgba(38,38,38,.3); } /* v7.82.0: Action group (edit + delete) */ .sb-org-db, .stk-lote-actions { align-items: center; display: inline-flex; flex-shrink: 0; gap: 4px; } .stk-lote-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: rgba(38,38,38,.35); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s, transform .12s; } .stk-lote-edit:hover { background: rgba(38,38,38,.05); border-color: rgba(38,38,38,.10); color: #262626; } .stk-lote-del:hover { background: rgba(224,82,82,.08); border-color: rgba(224,82,82,.20); color: #C62828; } /* ─── Reconciliación pill (v7.82.0 ahora en la head row, signal alta primero) ─── */ .stk-lotes-recon { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 11.5px; font-weight: 500; letter-spacing: -.005em; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(38,38,38,.04); flex-shrink: 0; } .stk-lotes-recon-icon { display: inline-flex; align-items: center; flex-shrink: 0; } .stk-lotes-recon strong { font-weight: 600; font-variant-numeric: tabular-nums; } .empd-stat--ok, .cc4-hero-delta[data-state="positive"], .va-card-v2.ok .va-icon-mini, .stk-lotes-recon.is-ok { background: rgba(34,165,90,.10); color: #1A7A45; } .stk-lotes-recon.is-warn { background: rgba(212,136,42,.12); color: #8B5C18; } /* v7.82.0: cross-link a Vencimientos */ .stk-lotes-foot { display: flex; justify-content: flex-end; margin-top: 2px; } .stk-lotes-xlink { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,102,58,.75); transition: background .12s, color .12s, transform .12s; } .trf-history-dev:hover, .stk-lotes-xlink:hover { background: rgba(232,102,58,.06); color: #E8663A; } .stk-lotes-xlink:hover svg { transform: translateX(2px); } .lp2-back svg, .stk-lotes-xlink svg { transition: transform .15s ease; } /* Responsive: mobile stack */ @media (max-width: 720px) { #page-stock .stock-lotes-cell { padding: 12px 16px 14px 16px !important; } .stk-lote-row { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 12px; } .stk-lote-meta { gap: 8px; } } /* ═══════════════════════════════════════════════════════════════ v7.85.0 · Filter Pills · System Blue Cuando se elige un filtro en un select de la topbar, aparece una pill azul (color sistema --c-info #0A84FF) al lado del nombre de la página. ═══════════════════════════════════════════════════════════════ */ /* ── Container (junto al título) ── */ .topbar .tb-nav-center { flex: 0 0 auto !important; display: flex; align-items: center; gap: 10px; min-width: 0; } /* ── Pill base (azul del sistema) ── */ .topbar .tb-filter-pills .tb-fpill, .topbar .tb-filter-pills .mv2-chip, .topbar .tb-filter-pills .v3-af-chip { display: inline-flex !important; align-items: center; gap: 5px; height: 24px; padding: 0 6px 0 10px !important; background: rgba(10, 132, 255, .10) !important; border: 1px solid rgba(10, 132, 255, .22) !important; border-radius: 7px !important; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 11px !important; font-weight: 600 !important; color: #0058B5 !important; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .topbar .tb-filter-pills .tb-fpill:hover, .topbar .tb-filter-pills .mv2-chip:hover, .topbar .tb-filter-pills .v3-af-chip:hover { background: rgba(10, 132, 255, .16) !important; border-color: rgba(10, 132, 255, .32) !important; } /* Label prefijo (ej: "Pago:", "Estado:") */ .topbar .tb-filter-pills .v3-af-chip-label { font-family: var(--mono, 'JetBrains Mono', monospace) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: rgba(10, 132, 255, .65) !important; margin-right: 0 !important; } /* Botón remove (X) interno del pill */ .topbar .tb-filter-pills .mv2-chip svg, .topbar .tb-filter-pills .v3-af-chip-remove { display: inline-flex !important; align-items: center; justify-content: center; width: 16px !important; height: 16px !important; padding: 0 !important; margin-left: 3px !important; background: rgba(10, 132, 255, .14) !important; border: none !important; border-radius: 50% !important; color: #0058B5 !important; cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s, transform .12s; } .topbar .tb-filter-pills .v3-af-chip-remove:hover { background: rgba(10, 132, 255, .28) !important; color: #003C7A !important; transform: scale(1.08); } .topbar .tb-filter-pills .mv2-chip svg { width: 10px !important; height: 10px !important; padding: 3px !important; } /* "Limpiar" / clear-all link */ .topbar .tb-filter-pills .tb-fpill-clear-all, .topbar .tb-filter-pills .mv2-chip-clear, .topbar .tb-filter-pills .v3-af-clear-all { height: 22px !important; padding: 0 9px !important; background: transparent !important; border: none !important; border-radius: 6px !important; font-family: var(--mono, 'JetBrains Mono', monospace) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: rgba(10, 132, 255, .65) !important; cursor: pointer; transition: background .12s, color .12s; } .topbar .tb-filter-pills .tb-fpill-clear-all:hover, .topbar .tb-filter-pills .mv2-chip-clear:hover, .topbar .tb-filter-pills .v3-af-clear-all:hover { background: rgba(10, 132, 255, .10) !important; color: #0058B5 !important; } /* v7.87.0: overflow visible — JS gestiona el collapse de pills cuando no entran */ .topbar .tb-filter-pills { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; max-width: 100%; position: relative; overflow: visible; } /* ── Animación smooth de shrink/expand para pills ── */ .topbar .tb-filter-pills .v3-af-chip, .topbar .tb-filter-pills .mv2-chip, .topbar .tb-filter-pills .tb-fpill { max-width: 280px; overflow: hidden; transition: max-width .28s cubic-bezier(.16,1,.3,1), opacity .22s ease, padding .28s cubic-bezier(.16,1,.3,1), margin .28s cubic-bezier(.16,1,.3,1), border-width .28s ease, transform .22s ease, background .15s ease, border-color .15s ease; } /* Pill colapsado (animación smooth) */ .topbar .tb-filter-pills .is-collapsed { max-width: 0 !important; opacity: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: -5px !important; border-width: 0 !important; transform: scale(.8) !important; pointer-events: none !important; } /* Counter pill "+N" */ .topbar .tb-filter-pills .tb-pills-counter { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 34px; padding: 0 9px; background: rgba(10, 132, 255, .18); border: 1px solid rgba(10, 132, 255, .32); border-radius: 7px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #0058B5; cursor: pointer; flex-shrink: 0; transition: background .15s, transform .12s, border-color .15s; animation: tbCounterIn .32s cubic-bezier(.34,1.56,.64,1); } .topbar .tb-filter-pills .tb-pills-counter:hover { background: rgba(10, 132, 255, .28); border-color: rgba(10, 132, 255, .45); transform: scale(1.06); } .cm2-prep-strip-edit:active, .cm2-hist-row-repeat:active, .topbar .tb-filter-pills .tb-pills-counter:active { transform: scale(.96); } @keyframes tbCounterIn { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } } /* Popover de pills colapsados */ .topbar .tb-pills-overflow-pop { position: absolute; top: calc(100% + 10px); left: 0; background: #FFFFFF; border: 1px solid rgba(38,38,38,.06); border-radius: 12px; padding: 8px; box-shadow: 0 0 0 1px rgba(38,38,38,.045), 0 8px 32px rgba(38,38,38,.14); display: flex; flex-direction: column; gap: 6px; min-width: 200px; max-width: 360px; z-index: var(--z-panel); animation: tbPopIn .24s cubic-bezier(.16,1,.3,1); } @keyframes tbPopIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Pills dentro del popover: full width, stack vertical */ .topbar .tb-pills-overflow-pop .v3-af-chip, .topbar .tb-pills-overflow-pop .mv2-chip, .topbar .tb-pills-overflow-pop .tb-fpill { height: 28px !important; max-width: none !important; padding: 0 8px 0 10px !important; align-self: stretch; justify-content: space-between; } /* Header del popover */ .topbar .tb-pills-overflow-pop-head { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.42); padding: 4px 8px 2px; border-bottom: 1px solid rgba(38,38,38,.05); margin-bottom: 4px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { } /* ════════════════════════════════════════════════════════════════════ v7.88.0 · Compact filter sheet (tablet / móvil / desktop angosto) Breakpoint: ≤ 1200px ════════════════════════════════════════════════════════════════════ */ /* ── Botón "Filtros (N)" en topbar ── */ .topbar .tb-filters-btn { display: none; /* visible solo en compact mode */ align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .10); border-radius: 10px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; font-weight: 600; color: #262626; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; flex-shrink: 0; } .topbar .tb-filters-btn:hover { background: #F7F6F5; border-color: rgba(38, 38, 38, .18); } .topbar .tb-filters-btn svg { color: rgba(38, 38, 38, .55); flex-shrink: 0; } .topbar .tb-filters-btn-label { letter-spacing: -.005em; } .topbar .tb-filters-btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; background: rgba(10, 132, 255, .18); border: 1px solid rgba(10, 132, 255, .32); border-radius: 5px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; color: #0058B5; animation: tbCounterIn .32s cubic-bezier(.34,1.56,.64,1); } /* ── Sheet container (fixed overlay) ── */ .tb-filters-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; /* mobile: panel desde abajo */ justify-content: stretch; pointer-events: none; } .tb-filters-sheet-backdrop { position: absolute; inset: 0; background: rgba(38, 38, 38, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s cubic-bezier(.16,1,.3,1); pointer-events: auto; } .tb-filters-sheet-panel { position: relative; width: 100%; max-height: 88vh; background: #FFFFFF; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(38, 38, 38, .18), 0 0 0 1px rgba(38, 38, 38, .04); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .32s cubic-bezier(.16,1,.3,1); pointer-events: auto; overflow: hidden; } .trf-resumen-overlay.open .trf-resumen-card, .tb-filters-sheet.is-open .tb-filters-sheet-panel { transform: translateY(0); } .tb-filters-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(38, 38, 38, .14); margin: 8px auto 0; } .tb-filters-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; gap: 12px; border-bottom: 1px solid rgba(38, 38, 38, .06); } .rl-lote-info, .tb-filters-sheet-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tb-filters-sheet-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(38, 38, 38, .42); } .tb-filters-sheet-title { margin: 0; font-family: var(--display, 'Fraunces', serif); font-size: 22px; font-weight: 500; letter-spacing: -.015em; color: #262626; } .tb-filters-sheet-close { width: 36px; height: 36px; border-radius: 10px; background: #F4F2F0; border: 1px solid rgba(38, 38, 38, .06); color: rgba(38, 38, 38, .65); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .12s; flex-shrink: 0; } .tb-notif-btn:active, .mv-del-btn:active, .cm2-suggest-close:active, .stk-lote-act:active, .tb-filters-sheet-close:active { transform: scale(.94); } /* Body: action-zone clonado se mueve acá ── orientación vertical stack */ .tb-filters-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; } /* Cuando #tb-action-zone está dentro del sheet, sus hijos se stackean full-width */ .tb-filters-sheet-body #tb-action-zone { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin: 0; } .tb-filters-sheet-body #tb-action-zone > * { width: 100%; max-width: none; min-width: 0; margin: 0; height: 42px; } .tb-filters-sheet-body #tb-action-zone input[type="text"], .tb-filters-sheet-body #tb-action-zone input[type="search"], .tb-filters-sheet-body #tb-action-zone select, .tb-filters-sheet-body #tb-action-zone button { height: 42px; font-size: 14px !important; width: 100%; border-radius: 10px; } .tb-filters-sheet-body #tb-action-zone .v3-af-search, .tb-filters-sheet-body #tb-action-zone .mv2-search, .tb-filters-sheet-body #tb-action-zone .sk-search-wrap { width: 100%; } /* Sub-contenedores de filtros (.mv2-filters, .v3-af-filters, .sk-filters) → stack vertical */ .tb-filters-sheet-body #tb-action-zone .mv2-filters, .tb-filters-sheet-body #tb-action-zone .v3-af-filters, .tb-filters-sheet-body #tb-action-zone [class*="-filters"] { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; height: auto; } .tb-filters-sheet-body #tb-action-zone .mv2-filters > *, .tb-filters-sheet-body #tb-action-zone .v3-af-filters > *, .tb-filters-sheet-body #tb-action-zone [class*="-filters"] > * { width: 100%; max-width: none; height: 42px; } /* Dropdowns custom (.mv2-dropdown) — botón full width dentro del sheet */ .tb-filters-sheet-body #tb-action-zone .mv2-dd-btn { width: 100%; height: 42px; justify-content: space-between; font-size: 14px !important; border-radius: 10px; } .tb-filters-sheet-body #tb-action-zone .mv2-dd-menu { width: 100%; left: 0; right: 0; } /* Footer con clear + apply */ .tb-filters-sheet-foot { display: flex; gap: 10px; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(38, 38, 38, .06); background: #FAFAFA; } .tb-filters-sheet-clear { flex: 0 0 auto; height: 46px; padding: 0 18px; background: transparent; border: 1px solid rgba(38, 38, 38, .12); border-radius: 12px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(38, 38, 38, .65); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .tb-filters-sheet-clear:hover { background: #F4F2F0; color: #262626; border-color: rgba(38, 38, 38, .18); } .tb-filters-sheet-apply { flex: 1 1 auto; height: 46px; padding: 0 20px; background: #262626; border: none; border-radius: 12px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: #FFFFFF; cursor: pointer; transition: background .15s, transform .12s; position: relative; overflow: hidden; } .cm2-search-item:active, .tb-filters-sheet-apply:active { transform: scale(.985); } .tb-filters-sheet-apply::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(232, 102, 58, .35), transparent); transition: left .6s cubic-bezier(.16,1,.3,1); } .tb-filters-sheet-apply:hover::before { left: 100%; } /* ════════════════════════════════════════════════════════════════════ v7.89.0 · Container-Adaptive Progressive Collapse JS aplica clase .tb-compact a la topbar cuando detecta overflow real (no usa breakpoints viewport — reacciona al contenido). ════════════════════════════════════════════════════════════════════ */ /* Action-zone con transición suave para shrink/expand. v7.90.1 · overflow: visible (era hidden) — los dropdowns de selects necesitan escapar del container para mostrarse. Antes recortaba el panel de Sucursal/Categoría. v7.90.1 · gap quitado — los wraps legacy ya tienen sus propios margin-left (líneas 4614-4626). Si pongo gap aquí, se suma al margin y deja huecos extra. */ .topbar #tb-action-zone { display: flex; align-items: center; min-width: 0; transition: max-width .25s cubic-bezier(.16,1,.3,1), opacity .18s ease; overflow: visible; } /* Stage 2: Search se contrae (cuando hay pills muchas pero todavía no urgente) */ .topbar.tb-stage-search-narrow #tb-action-zone .v3-af-search, .topbar.tb-stage-search-narrow #tb-action-zone .mv2-search, .topbar.tb-stage-search-narrow #tb-action-zone .sk-search-wrap { max-width: 200px; transition: max-width .25s cubic-bezier(.16,1,.3,1); } /* Stage 3 (compact): action-zone hidden en topbar, mostrar botón */ .topbar.tb-compact .tb-filters-btn { display: inline-flex; animation: tbFiltersBtnIn .28s cubic-bezier(.34,1.56,.64,1); } @keyframes tbFiltersBtnIn { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } /* Pills container en compact: máximo ancho relativo */ .topbar.tb-compact .tb-filter-pills { max-width: calc(100vw - 380px); } /* ── Geometría del sheet por viewport (mantenida) ── */ /* Tablet/desktop angosto (≥720px): sheet como drawer lateral derecho */ @media (min-width: 720px) { .tb-filters-sheet { align-items: stretch; justify-content: flex-end; } .tb-filters-sheet-panel { width: 420px; max-width: 90vw; max-height: 100vh; height: 100vh; border-radius: 18px 0 0 18px; transform: translateX(100%); box-shadow: -8px 0 32px rgba(38, 38, 38, .18), 0 0 0 1px rgba(38, 38, 38, .04); } .tb-filters-sheet.is-open .tb-filters-sheet-panel { transform: translateX(0); } .tb-filters-sheet-handle { display: none; } } /* Móvil (<720px): bottom-sheet (default ya configurado al inicio del bloque) + label oculto */ @media (max-width: 720px) { .topbar.tb-compact .tb-filter-pills { max-width: calc(100vw - 200px); } .topbar .tb-filters-btn-label { display: none; /* solo ícono + count en móvil chico */ } .topbar .tb-filters-btn { padding: 0 10px; gap: 5px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { } /* ════════════════════════════════════════════════════════════════════ v7.90.0 · Page Pills Strip Las pills de filtros viven arriba del body de cada página (no en topbar). Animación slide-down cuando hay contenido, colapso suave cuando vacío. La topbar queda libre de morfismo. ════════════════════════════════════════════════════════════════════ */ /* v7.90.7 · Container ABSOLUTE — out of flow. Las pills NO mueven el body. El espacio (~52px arriba del page) se reserva con padding-top en #page-X y el strip flota ahí, alineado horizontalmente con el contenido (left/right = 46px para respetar el padding-x del page). */ .page-pills-strip, .sk-active-chips, .mv2-active-chips { position: absolute !important; top: 14px; left: 46px; right: 46px; display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; overflow: visible; padding: 0; margin: 0; border: none; background: transparent; opacity: 1; pointer-events: auto; z-index: 5; transition: opacity .28s ease; } /* Vencimientos: queda en su lugar normal en .v-main (layout grid no se mueve igual) */ .v3-tb-chips { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; overflow: hidden; max-height: 0; opacity: 0; padding: 0; margin: 0; transition: max-height .52s cubic-bezier(.32, .72, 0, 1), opacity .38s cubic-bezier(.32, .72, 0, 1), margin .48s cubic-bezier(.32, .72, 0, 1); pointer-events: none; } .v3-tb-chips:not(:empty) { max-height: 200px; opacity: 1; margin: 0 0 14px; pointer-events: auto; } /* Cuando el strip absolute está vacío: opacity 0 — pero sigue en el lugar */ #page-empresas .emp-card.is-expanded .emp-card-quick, .page-pills-strip:empty, .sk-active-chips:empty, .mv2-active-chips:empty { opacity: 0; pointer-events: none; } /* Reservar espacio fijo arriba del page para que las pills floten ahí. v7.90.7 · La regla legacy #pages > .page.section-core { padding: 46px 46px 80px !important } tiene especificidad 120. Usamos #pages > #page-X.section-core (= 220) para ganar el cascade. */ #pages > #page-movimientos.section-core, #pages > #page-stock.section-core { position: relative; padding: 70px 46px 80px; } /* v7.90.3 · Pills full pill-shape + azul reforzado del sistema (--c-info #0A84FF) !important necesario porque reglas legacy (#page-movimientos .mv2-chip línea 11156) tienen mayor especificidad y aplicaban color ember por default. */ .page-pills-strip .v3-af-chip, .page-pills-strip .mv2-chip, .page-pills-strip .tb-fpill, .sk-active-chips .v3-af-chip, .sk-active-chips .mv2-chip, .sk-active-chips .tb-fpill, .mv2-active-chips .v3-af-chip, .mv2-active-chips .mv2-chip, .mv2-active-chips .tb-fpill, .v3-tb-chips .v3-af-chip, .v3-tb-chips .mv2-chip, .v3-tb-chips .tb-fpill { display: inline-flex !important; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 12px !important; background: rgba(10, 132, 255, .14) !important; border: 1px solid rgba(10, 132, 255, .32) !important; border-radius: 9999px !important; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important; font-size: 12px !important; font-weight: 600 !important; color: #0058B5 !important; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .14s; /* v7.90.5 · Spring elegante con duración generosa (540ms) — overshoot suave cubic-bezier(.34, 1.36, .64, 1) — menos agresivo que el clásico (.34, 1.56) */ animation: pillStripIn .54s cubic-bezier(.34, 1.36, .64, 1) both; } .page-pills-strip .v3-af-chip:hover, .page-pills-strip .mv2-chip:hover, .sk-active-chips .v3-af-chip:hover, .mv2-active-chips .mv2-chip:hover, .v3-tb-chips .v3-af-chip:hover { background: rgba(10, 132, 255, .22) !important; border-color: rgba(10, 132, 255, .48) !important; } /* v7.90.4 · Stagger sutil para que las pills entren en secuencia en lugar de todas al mismo tiempo. ~55ms entre cada una. */ #page-empresas .emp-grid > .emp-card:nth-child(1), .cm2-search-results > .cm2-search-item:nth-child(1), .cm2-chips .cm2-chip:nth-child(1), .cm2-hist-list > .cm2-hist-row:nth-child(1), .cm2-cart-list.is-success > .cm2-item:nth-child(1), .page-pills-strip > *:nth-child(1), .sk-active-chips > *:nth-child(1), .mv2-active-chips > *:nth-child(1), .v3-tb-chips > *:nth-child(1) { animation-delay: 0ms; } .page-pills-strip > *:nth-child(2), .sk-active-chips > *:nth-child(2), .mv2-active-chips > *:nth-child(2), .v3-tb-chips > *:nth-child(2) { animation-delay: 55ms; } #page-empresas .emp-grid > .emp-card:nth-child(4), .page-pills-strip > *:nth-child(3), .sk-active-chips > *:nth-child(3), .mv2-active-chips > *:nth-child(3), .v3-tb-chips > *:nth-child(3) { animation-delay: 110ms; } .page-pills-strip > *:nth-child(4), .sk-active-chips > *:nth-child(4), .mv2-active-chips > *:nth-child(4), .v3-tb-chips > *:nth-child(4) { animation-delay: 165ms; } .page-pills-strip > *:nth-child(5), .sk-active-chips > *:nth-child(5), .mv2-active-chips > *:nth-child(5), .v3-tb-chips > *:nth-child(5) { animation-delay: 220ms; } .page-pills-strip > *:nth-child(6), .sk-active-chips > *:nth-child(6), .mv2-active-chips > *:nth-child(6), .v3-tb-chips > *:nth-child(6) { animation-delay: 275ms; } .page-pills-strip > *:nth-child(n+7), .sk-active-chips > *:nth-child(n+7), .mv2-active-chips > *:nth-child(n+7), .v3-tb-chips > *:nth-child(n+7) { animation-delay: 320ms; } /* Forzar el color azul también en el icono X (svg) heredado */ .mv2-active-chips .mv2-chip svg, .page-pills-strip .mv2-chip svg { color: #0058B5 !important; stroke: #0058B5 !important; } /* v7.90.5 · Spring suave y pulido — overshoot sutil (3% en lugar de 6%) con duración generosa para que el rebote se sienta elegante, no brusco. */ @keyframes pillStripIn { 0% { opacity: 0; transform: scale(.86) translateY(-1px); } 55% { opacity: 1; transform: scale(1.03) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Label prefijo dentro del pill (ej: "PAGO:", "ESTADO:") */ .page-pills-strip .v3-af-chip-label, .sk-active-chips .v3-af-chip-label, .v3-tb-chips .v3-af-chip-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(10, 132, 255, .65); } /* Botón remove (X) dentro del pill */ .page-pills-strip .v3-af-chip-remove, .page-pills-strip .mv2-chip svg, .sk-active-chips .v3-af-chip-remove, .mv2-active-chips .mv2-chip svg, .v3-tb-chips .v3-af-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; margin-left: 3px; background: rgba(10, 132, 255, .14); border: none; border-radius: 50%; color: #0058B5; cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s, transform .12s; } .page-pills-strip .v3-af-chip-remove:hover, .sk-active-chips .v3-af-chip-remove:hover, .v3-tb-chips .v3-af-chip-remove:hover { background: rgba(10, 132, 255, .28); color: #003C7A; transform: scale(1.08); } .mv2-active-chips .mv2-chip svg { width: 10px; height: 10px; padding: 3px; } /* "Limpiar todo" link dentro del strip */ .page-pills-strip .v3-af-clear-all, .page-pills-strip .mv2-chip-clear, .page-pills-strip .tb-fpill-clear-all, .sk-active-chips .v3-af-clear-all, .mv2-active-chips .mv2-chip-clear, .v3-tb-chips .v3-af-clear-all { height: 22px; padding: 0 9px; background: transparent; border: none; border-radius: 6px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(38, 38, 38, .50); cursor: pointer; transition: background .15s, color .15s; margin-left: 4px; } .page-pills-strip .v3-af-clear-all:hover, .sk-active-chips .v3-af-clear-all:hover, .v3-tb-chips .v3-af-clear-all:hover { background: rgba(38, 38, 38, .05); color: #262626; } /* Topbar pills container queda OCULTO — la topbar ya no muta */ /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .cc-close-fx, .cc-close-fx-card, .ticket-v2-overlay, .ticket-v2-shell, .tb-filters-sheet-backdrop, .tb-filters-sheet-panel, .page-pills-strip, .sk-active-chips, .mv2-active-chips, .v3-tb-chips { transition-duration: 0.01ms !important; } #page-dashboard .nd-hero *, #page-dashboard .nd-kpi-strip *, .page-pills-strip .v3-af-chip, .page-pills-strip .mv2-chip, .page-pills-strip .tb-fpill { animation-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════════════ v7.91.0 · Modal de cierre de caja — rediseño Identity-First - Status badge circular grande con checkmark stroke-draw - Eyebrow mono + título Fraunces + date sub - HERO total facturado (Fraunces 56px) - KPI strip 3 cards (Operaciones / Ticket / Diferencia) - Botón primario "Descargar PDF" Lacca Nera con sweep ember - Stagger animations por componente ════════════════════════════════════════════════════════════════════ */ .cc-close-fx { padding: 24px; position: fixed !important; inset: 0; z-index: calc(var(--z-sheet) + 90); display: flex !important; align-items: center; justify-content: center; background: rgba(38, 38, 38, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); opacity: 0; pointer-events: none; transition: background .32s cubic-bezier(.32, .72, 0, 1), backdrop-filter .32s cubic-bezier(.32, .72, 0, 1), opacity .32s ease; } .cc-close-fx.show { opacity: 1; pointer-events: auto; background: rgba(38, 38, 38, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cc-close-fx .cc-close-fx-card { position: relative; width: min(440px, 92vw); background: #FFFFFF; border-radius: 20px; box-shadow: 0 0 0 1px rgba(38,38,38,.06), 0 12px 48px rgba(38,38,38,.22); padding: 30px 28px 22px; text-align: center; transform: translateY(20px) scale(.94); opacity: 0; transition: transform .52s cubic-bezier(.34, 1.36, .64, 1), opacity .42s cubic-bezier(.32, .72, 0, 1); } #dash-venc-hover-card.show, .cc-close-fx.show .cc-close-fx-card { opacity: 1; transform: translateY(0) scale(1); } .cc-close-fx .cc-close-fx-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 9px; background: #F4F2F0; border: 1px solid rgba(38,38,38,.05); color: rgba(38,38,38,.55); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .12s; opacity: 0; animation: ccFxFadeIn .4s cubic-bezier(.32, .72, 0, 1) 600ms forwards; } .tb-filters-sheet-close:hover, .cc-close-fx .cc-close-fx-x:hover { background: #EBE8E6; color: #262626; } .cc-close-fx .cc-fx-badge { position: relative; width: 68px; height: 68px; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(140deg, #34C759 0%, #28A745 100%); color: #FFFFFF !important; box-shadow: 0 6px 18px rgba(52, 199, 89, .35); transform: scale(0); opacity: 0; animation: ccFxBadgeIn .58s cubic-bezier(.34, 1.56, .64, 1) 180ms forwards, ccFxBadgePulse 1.6s ease-out 740ms; } .cc-close-fx .cc-fx-badge-ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(52, 199, 89, .25); opacity: 0; animation: ccFxRingIn .8s cubic-bezier(.32, .72, 0, 1) 360ms forwards; } .cc-close-fx .cc-fx-badge-check { z-index: 2; color: #FFFFFF !important; stroke: #FFFFFF !important; } .cc-close-fx .cc-fx-badge-check path { stroke: #FFFFFF !important; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ccFxCheckDraw .52s cubic-bezier(.32, .72, 0, 1) 420ms forwards; } @keyframes ccFxBadgeIn { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @keyframes ccFxBadgePulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .35), 0 6px 18px rgba(52, 199, 89, .35); } 70% { box-shadow: 0 0 0 14px rgba(52, 199, 89, 0), 0 6px 18px rgba(52, 199, 89, .35); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0), 0 6px 18px rgba(52, 199, 89, .35); } } @keyframes ccFxRingIn { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } } @keyframes ccFxCheckDraw { to { stroke-dashoffset: 0; } } .cc-close-fx .cc-fx-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(38,38,38,.5); margin: 0; opacity: 0; transform: translateY(8px); animation: ccFxFadeUp .48s cubic-bezier(.32, .72, 0, 1) 380ms forwards; } .cc-close-fx .cc-fx-title { margin: 6px 0 4px; font-family: var(--display, 'Fraunces', serif); font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: #262626; line-height: 1.1; opacity: 0; transform: translateY(8px); animation: ccFxFadeUp .52s cubic-bezier(.32, .72, 0, 1) 460ms forwards; } .cc-close-fx .cc-fx-date { font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; font-weight: 500; color: rgba(38,38,38,.55); margin-bottom: 22px; opacity: 0; transform: translateY(6px); animation: ccFxFadeUp .48s cubic-bezier(.32, .72, 0, 1) 540ms forwards; } .cc-close-fx .cc-fx-hero { margin: 6px 0 22px; padding: 18px 0 16px; border-top: 1px solid rgba(38,38,38,.06); border-bottom: 1px solid rgba(38,38,38,.06); opacity: 0; transform: translateY(10px); animation: ccFxFadeUp .56s cubic-bezier(.32, .72, 0, 1) 620ms forwards; } .cc-close-fx .cc-fx-hero-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38,38,38,.45); margin-bottom: 6px; } .cc-close-fx .cc-fx-hero-amount { font-family: var(--display, 'Fraunces', serif); font-size: 56px; font-weight: 500; letter-spacing: -.025em; color: #262626; line-height: 1; font-variant-numeric: tabular-nums; } .cc-close-fx .cc-close-fx-kpis { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin: 0 0 22px; opacity: 0; transform: translateY(10px); animation: ccFxFadeUp .56s cubic-bezier(.32, .72, 0, 1) 720ms forwards; } .cc-close-fx .cc-close-fx-kpi { padding: 8px 6px; text-align: center; position: relative; } .cc-close-fx .cc-close-fx-kpi:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(38,38,38,.08); } .cc-close-fx .cc-close-fx-kpi-l { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(38,38,38,.48); margin-bottom: 5px; } .cc-close-fx .cc-close-fx-kpi-v { font-family: var(--display, 'Fraunces', serif); font-size: 19px; font-weight: 500; letter-spacing: -.012em; color: #262626; font-variant-numeric: tabular-nums; } .cc-close-fx .cc-close-fx-kpi-v.ccfx-dif-pos { color: #28A745; } .cc-close-fx .cc-close-fx-kpi-v.ccfx-dif-neg { color: #DC3545; } .cc-close-fx .cc-close-fx-kpi-v.ccfx-dif-zero { color: rgba(38,38,38,.65); } .cc-close-fx .cc-fx-confirm { font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 13px; font-weight: 500; color: rgba(38,38,38,.62); margin-bottom: 16px; opacity: 0; transform: translateY(6px); animation: ccFxFadeUp .48s cubic-bezier(.32, .72, 0, 1) 820ms forwards; } .cc-close-fx .cc-fx-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .cc-close-fx .cc-fx-cta-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; background: #262626; border: none; border-radius: 12px; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; /* !important porque regla legacy "#pages * { color: inherit }" tiene mayor especificidad */ color: #FFFFFF !important; cursor: pointer; overflow: hidden; opacity: 0; transform: translateY(8px); animation: ccFxFadeUp .5s cubic-bezier(.32, .72, 0, 1) 900ms forwards; transition: background .18s, transform .14s, box-shadow .18s; box-shadow: 0 4px 14px rgba(38,38,38,.18); } /* SVG del icono download también blanco */ .cc-close-fx .cc-fx-cta-primary svg { color: #FFFFFF !important; stroke: #FFFFFF !important; flex-shrink: 0; } .cc-close-fx .cc-fx-cta-primary:hover { background: #1A1A1A; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(38,38,38,.26); } #cm2-confirm:not(:disabled):active, .cc-close-fx .cc-fx-cta-primary:active { transform: translateY(0) scale(.98); } .cc-close-fx .cc-fx-cta-primary::before { content: ''; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(232, 102, 58, .42), transparent); transition: left .65s cubic-bezier(.32, .72, 0, 1); pointer-events: none; } .cc-close-fx .cc-fx-cta-primary:hover::before { left: 120%; } .btn-prime svg, .btn-ghost svg, #page-movimientos #mov-results, #page-cierre .cc3-anatomy-ventas > .cc3-anatomy-head, #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-ranking > .cc3-anatomy-head, .pedido-notice svg, .cc-close-fx .cc-fx-cta-primary svg { flex-shrink: 0; } .cc-close-fx .cc-fx-cta-ghost { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; background: transparent; border: 1px solid rgba(38,38,38,.10); border-radius: 10px; font-family: var(--sans, 'Inter Tight', system-ui, sans-serif); font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: rgba(38,38,38,.72); cursor: pointer; opacity: 0; transform: translateY(8px); animation: ccFxFadeUp .5s cubic-bezier(.32, .72, 0, 1) 980ms forwards; transition: background .15s, border-color .15s, color .15s, transform .12s; } .cc-close-fx .cc-fx-cta-ghost:hover { background: #F7F6F5; border-color: rgba(38,38,38,.18); color: #262626; } @keyframes ccFxFadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes ccFxFadeIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #login-screen.lp2 *, #login-screen.lp2 *::before, #login-screen.lp2 *::after, #page-cierre .cc4-hero *, #page-cierre .cc4-hero *::before, #page-cierre .cc4-hero *::after, #page-clientes .cd-hero *, #page-clientes .cli-master-head-v2 *, .topbar .tb-filter-pills .v3-af-chip, .topbar .tb-filter-pills .mv2-chip, .topbar .tb-filter-pills .tb-fpill, .topbar .tb-filter-pills .tb-pills-counter, .topbar .tb-pills-overflow-pop, .cc-close-fx, .cc-close-fx .cc-close-fx-card, .cc-close-fx * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════════════ v7.92.0 · Sidebar v2 (sb2) refinement - Más respiro vertical entre items (margin) - Padding interior más generoso - Eliminado el rail ember ::before del active state (era el "rectángulo") ════════════════════════════════════════════════════════════════════ */ /* Más respiro vertical + padding interior más generoso */ .sb2-section .tb-dd-item, .tb-dropdown-inner .tb-dd-item { margin: 2px 0 !important; padding: 11px 12px !important; border-radius: 10px !important; } /* Eliminar el rail ember vertical de 3px que tenía el active state */ .sb2-section .tb-dd-item.active::before, .tb-dropdown-inner .tb-dd-item.active::before, .tb-dd-item.active::before { display: none !important; content: none !important; } /* Active state limpio: pill blanca elevada (sin rail) */ .sb2-section .tb-dd-item.active, .tb-dropdown-inner .tb-dd-item.active { background: #FFFFFF !important; box-shadow: 0 0 0 1px rgba(38,38,38,.04), 0 2px 6px rgba(38,38,38,.06) !important; font-weight: 600 !important; } /* Icon ember vibrante en active */ .tb-dd-item.active .tb-dd-icon, .sb2-section .tb-dd-item.active .tb-dd-icon, .tb-dropdown-inner .tb-dd-item.active .tb-dd-icon { color: var(--accent-warm, #E8663A) !important; } /* ════════════════════════════════════════════════════════════════════ v7.93.0 · FIDELIZACIÓN — Página profesional Identity-First Luxe Diferenciada con hero oscuro warm + niveles con identidad cromática propia. SELECTO: bronce champagne #9C8E7F PRIVADO: noir #1A1A1A LEGADO: gold signature #C9A961 ════════════════════════════════════════════════════════════════════ */ #page-fidelizacion.fp { padding: 0; background: transparent; min-height: 100%; } /* ─── HERO LUXE ─── */ .fp-hero { position: relative; margin: -46px -46px 0; padding: 46px 46px 36px; background: linear-gradient(135deg, #1A1410 0%, #2B1F18 45%, #1F1813 100%); color: #F5EFE0; overflow: hidden; border-radius: 20px 20px 0 0; } /* KPI STRIP en hero */ .fp-kpi-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0; padding: 22px 0 4px; border-top: 1px solid rgba(245, 239, 224, .08); } .fp-kpi { padding: 0 6px; } .fp-kpi-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 239, 224, .42) !important; margin-bottom: 6px; } /* ─── FILTERS (tabs + alerts) ─── */ .fp-filters { padding: 22px 0 0; display: flex; flex-direction: column; gap: 14px; } .fp-tabs { display: flex; gap: 0; background: rgba(38, 38, 38, .04); border: 1px solid rgba(38, 38, 38, .06); border-radius: 11px; padding: 4px; width: fit-content; } .fp-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: transparent; border: none; border-radius: 8px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; color: rgba(38, 38, 38, .58) !important; cursor: pointer; transition: background .15s ease, color .15s ease; } .fp-tab:hover { background: rgba(38, 38, 38, .04); color: #262626 !important; } .fp-tab.active { background: #FFFFFF; color: #262626 !important; font-weight: 600; box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .06); } .mv-tipo-dot, .fp-tab-dot { border-radius: 50%; flex-shrink: 0; height: 7px; width: 7px; } .fp-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: rgba(38, 38, 38, .08); border-radius: 5px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: .02em; color: rgba(38, 38, 38, .65) !important; } .fp-tab.active .fp-tab-count { background: rgba(38, 38, 38, .12); color: #262626 !important; } /* Alert chips horizontales */ .fp-alerts { display: flex; flex-wrap: wrap; gap: 8px; } .fp-alert { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; background: rgba(232, 102, 58, .06); border: 1px solid rgba(232, 102, 58, .14); border-radius: 9999px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: -.005em; color: rgba(140, 69, 23, .82) !important; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .14s; } .fp-alert:hover { background: rgba(232, 102, 58, .12); border-color: rgba(232, 102, 58, .26); } .fp-alert.active { background: #262626; border-color: #262626; color: #F5EFE0 !important; } #page-stock.stock-compact .stock-qty, .fp-alert-ico { font-size: 14px; } .fp-alert-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: rgba(232, 102, 58, .18); border-radius: 5px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; color: rgba(140, 69, 23, .92) !important; } /* ─── TOOLBAR (search + sort) ─── */ .fp-search-wrap { position: relative; flex: 1 1 auto; display: flex; align-items: center; } .fp-search-ico { position: absolute; left: 12px; color: rgba(38, 38, 38, .42); pointer-events: none; } .fp-search-input { flex: 1; height: 36px; padding: 0 36px 0 36px; background: rgba(38, 38, 38, .04); border: 1px solid transparent; border-radius: 9px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13px; color: #262626 !important; outline: none; transition: background .15s ease, border-color .15s ease; width: 100%; } .fp-search-input:focus { background: #FFFFFF; border-color: rgba(232, 102, 58, .42); } .fp-search-input::placeholder { color: rgba(38, 38, 38, .42); } .fp-search-clr { position: absolute; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(38, 38, 38, .08); border: none; color: rgba(38, 38, 38, .65); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .12s; } .fp-search-clr:hover { background: rgba(38, 38, 38, .16); } .fp-sort-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(38, 38, 38, .48) !important; } .fp-sort-select { height: 32px; padding: 0 28px 0 10px; background: rgba(38, 38, 38, .04); border: 1px solid rgba(38, 38, 38, .08); border-radius: 8px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; color: #262626 !important; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; } .fp-toolbar-meta { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: rgba(38, 38, 38, .58) !important; flex-shrink: 0; } /* ─── LISTA DE CLIENTES ─── */ .fp-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 40px; } .fp-list:empty::after { content: "Sin clientes en este filtro"; display: block; text-align: center; padding: 60px 0; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13.5px; color: rgba(38, 38, 38, .48) !important; } .fp-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .055); border-radius: 14px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease; animation: fpCardIn .42s cubic-bezier(.32, .72, 0, 1) both; } .fp-card:hover { border-color: rgba(38, 38, 38, .12); box-shadow: 0 4px 18px rgba(38, 38, 38, .06); transform: translateY(-1px); } .fp-card-rail { position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: rgba(38, 38, 38, .14); } .fp-card[data-nivel="legado"] .fp-card-rail { background: linear-gradient(180deg, #D8B872, #C9A961); box-shadow: 0 0 12px rgba(201, 169, 97, .35); } @keyframes fpCardIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } /* Avatar de cliente */ .fp-card-avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display, 'Fraunces', serif); font-size: 17px; font-weight: 500; color: #F5EFE0 !important; letter-spacing: -.01em; flex-shrink: 0; background: linear-gradient(135deg, #4A3F35, #2A1F18); box-shadow: 0 2px 8px rgba(38, 38, 38, .12); } .fp-card[data-nivel="selecto"] .fp-card-avatar { background: linear-gradient(135deg, #B5A793, #9C8E7F); } .fp-card[data-nivel="privado"] .fp-card-avatar { background: linear-gradient(135deg, #3A3A3A, #1A1A1A); } /* Cuerpo del card */ .fp-card-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .fp-card-name { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; color: #262626 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-card-nivel { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 8px; border-radius: 9999px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; flex-shrink: 0; } .fp-card-meta { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 500; letter-spacing: .02em; color: rgba(38, 38, 38, .55) !important; } /* Progress bar al siguiente nivel */ .fp-card-progress-fill { height: 100%; border-radius: 2px; transition: width .6s cubic-bezier(.32, .72, 0, 1); } .fp-card[data-nivel="legado"] .fp-card-progress-fill { background: linear-gradient(90deg, #D8B872, #C9A961); } /* Flags icons en la card */ .fp-card-flags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; } .fp-card-flag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; background: rgba(38, 38, 38, .04); border-radius: 5px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 10.5px; font-weight: 500; color: rgba(38, 38, 38, .65) !important; } .fp-card-flag--cumple { background: rgba(232, 102, 58, .08); color: rgba(140, 69, 23, .82) !important; } .fp-card-flag--gift { background: rgba(52, 199, 89, .10); color: #1C6A37 !important; } /* Actions del card (derecha) */ .cm2-draft-actions, .fp-card-actions { display: flex; flex-shrink: 0; gap: 6px; } .fp-card-action { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(38, 38, 38, .04); border: 1px solid rgba(38, 38, 38, .055); border-radius: 9px; color: rgba(38, 38, 38, .65) !important; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s; } .fp-card-action:hover { background: #FFFFFF; border-color: rgba(38, 38, 38, .14); color: #262626 !important; } .fp-card-action--wa:hover { background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .35); color: #128C7E !important; } .mvd-copy:active, .cd-hist-action:active, .cc-close-fx .cc-close-fx-x:active, .fp-card-action:active { transform: scale(.92); } /* ─── DRAWER DETALLE ─── */ /* v7.93.12 · Drawer Fidelización — patrón unificado con drawer de Movimientos Floating drawer con altura fija, scroll propio, overlay gradient hacia la derecha. */ .fp-drawer { /* Contenedor lógico (no usado visualmente — overlay + panel son hijos directos) */ position: fixed; inset: 0; pointer-events: none; z-index: calc(var(--z-panel) + 200); } .fp-drawer-backdrop { position: fixed; inset: 0; background: linear-gradient( to right, transparent 0%, transparent 30%, rgba(26,20,16,.012) 44%, rgba(26,20,16,.04) 55%, rgba(26,20,16,.08) 65%, rgba(26,20,16,.13) 75%, rgba(26,20,16,.17) 85%, rgba(26,20,16,.20) 94%, rgba(26,20,16,.22) 100% ); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient( to right, transparent 0%, transparent 30%, rgba(0,0,0,.05) 44%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.38) 65%, rgba(0,0,0,.58) 75%, rgba(0,0,0,.78) 85%, rgba(0,0,0,.92) 94%, black 100% ); mask-image: linear-gradient( to right, transparent 0%, transparent 30%, rgba(0,0,0,.05) 44%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.38) 65%, rgba(0,0,0,.58) 75%, rgba(0,0,0,.78) 85%, rgba(0,0,0,.92) 94%, black 100% ); z-index: calc(var(--z-panel) + 200); opacity: 0; pointer-events: none; transition: opacity .42s cubic-bezier(.16,1,.3,1); } .cd-hist-row:hover .cd-hist-actions, .fp-drawer.is-open .fp-drawer-backdrop { opacity: 1; pointer-events: auto; } .fp-drawer-panel { position: fixed; top: 12px; bottom: 12px; right: -460px; width: 440px; max-width: 92vw; background: #FFFFFF; border: none; border-radius: 16px; box-shadow: inset 0 0 0 1px #FFFFFF, -2px 2px 8px rgba(26,20,16,.06), -8px 4px 24px rgba(26,20,16,.08), -20px 8px 48px rgba(26,20,16,.06); display: flex; flex-direction: column; overflow: hidden; contain: layout; transition: right 0.42s cubic-bezier(0.16,1,0.3,1); z-index: calc(var(--z-panel) + 210); pointer-events: auto; transform: none; } body:has(#page-movimientos.active) .mv-inspector:has(.mvd-hd, .mvd-doc), .fp-drawer.is-open .fp-drawer-panel { right: 12px; } /* Scroll interno del contenido */ .fp-drawer-content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; } #page-clientes.cli-drawer-open, body.tb-sheet-open, body.fp-drawer-open { overflow: hidden; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .fp-card, .fp-drawer, .fp-drawer-panel, .fp-card-progress-fill { animation: none !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════════════ v7.93.2 · SPRINT 1 — Action-first redesign - STRIP TEMPORAL slim (reemplaza hero gigante) - DASHBOARD 2 columnas 40/60 - Panel ACCIONES PARA HOY (action cards) ════════════════════════════════════════════════════════════════════ */ .fp-section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(38, 38, 38, .55) !important; } .trf-section, .ticket-v2-items, .fp-actions-list { display: flex; flex-direction: column; gap: 10px; } /* Card de acción individual */ .fp-action-card { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 14px 14px 16px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .055); border-radius: 12px; transition: border-color .18s ease, box-shadow .18s ease, transform .12s; animation: fpActionIn .42s cubic-bezier(.32, .72, 0, 1) both; } .fp-action-card:hover { border-color: rgba(38, 38, 38, .12); box-shadow: 0 4px 14px rgba(38, 38, 38, .05); } .trf-history-row.is-pending, .fp-action-card[data-urgency="high"] { border-left: 3px solid #E8663A; } .fp-action-card[data-urgency="medium"] { border-left: 3px solid #C9A961; } .fp-action-card[data-urgency="risk"] { border-left: 3px solid #DC3545; background: linear-gradient(135deg, rgba(220, 53, 69, .025), #FFFFFF 60%); } @keyframes fpActionIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } .fp-action-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: rgba(38, 38, 38, .04); border: 1px solid rgba(38, 38, 38, .045); } .fp-action-card[data-urgency="high"] .fp-action-ico { background: rgba(232, 102, 58, .10); border-color: rgba(232, 102, 58, .22); } .fp-action-card[data-urgency="medium"] .fp-action-ico { background: rgba(201, 169, 97, .12); border-color: rgba(201, 169, 97, .28); } .fp-action-card[data-urgency="risk"] .fp-action-ico { background: rgba(220, 53, 69, .10); border-color: rgba(220, 53, 69, .22); } .fp-action-title { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; color: #262626 !important; margin-bottom: 2px; } .fp-action-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: -.005em; color: rgba(38, 38, 38, .58) !important; line-height: 1.4; margin-bottom: 10px; } .fp-action-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #262626; border: none; border-radius: 8px; color: #FFFFFF !important; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: -.005em; cursor: pointer; transition: background .15s ease, transform .12s; } .cli-tier.t-privado .cli-tier-dot, .cli-tier.t-oro .cli-tier-dot, .tb-filters-sheet-apply:hover, .fp-tab--privado .fp-tab-dot, .fp-card[data-nivel="privado"] .fp-card-rail, .fp-action-cta:hover { background: #1A1A1A; } .fp-action-cta--accent { background: linear-gradient(135deg, #E8663A, #D4552A); } .fp-action-cta--accent:hover { background: linear-gradient(135deg, #DA5A30, #C44C24); } .fp-action-cta--gold { background: linear-gradient(135deg, #D8B872, #C9A961); color: #4A3E22 !important; } .fp-action-cta--gold:hover { background: linear-gradient(135deg, #C9A961, #B89651); } .fp-action-cta--gold svg { color: #4A3E22 !important; } .fp-action-cta--ghost { background: rgba(38, 38, 38, .04); border: 1px solid rgba(38, 38, 38, .10); color: rgba(38, 38, 38, .82) !important; } .fp-action-cta--ghost:hover { background: rgba(38, 38, 38, .08); border-color: rgba(38, 38, 38, .18); } .fp-action-cta--ghost svg { color: rgba(38, 38, 38, .65) !important; } /* Estado vacío celebratorio */ .fp-actions-empty { padding: 36px 22px; text-align: center; background: linear-gradient(135deg, rgba(52, 199, 89, .04), #FFFFFF 70%); border: 1px solid rgba(52, 199, 89, .18); border-radius: 14px; } .fp-actions-empty-ico { font-size: 32px; margin-bottom: 8px; display: block; } .fp-actions-empty-title { font-family: var(--display, 'Fraunces', serif); font-size: 17px; font-weight: 500; letter-spacing: -.015em; color: #1C6A37 !important; margin-bottom: 4px; } .fp-actions-empty-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; color: rgba(28, 106, 55, .72) !important; } /* ════════════════════════════════════════════════════════════════════ v7.93.3 · SPRINT 2 — Widgets Vista General (columna derecha) - Membros del programa (3 cards niveles con LEGADO gold) - Leaderboard top 5 - Próximos cumples (7 días) - Momentum del mes ════════════════════════════════════════════════════════════════════ */ .fp-widget { background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .055); border-radius: 14px; padding: 16px 18px 14px; } .fp-widget-period-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(38, 38, 38, .42) !important; } .fp-trend { margin-left: 6px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; color: rgba(38, 38, 38, .45) !important; } /* ─── WIDGET: MEMBROS ─── */ .fp-membros-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; } /* ─── WIDGET: LEADERBOARD ─── */ .fp-leaderboard-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(38, 38, 38, .045); cursor: pointer; transition: background .15s ease; border-radius: 8px; margin: 0 -4px; padding-left: 8px; padding-right: 8px; } .fp-leaderboard-row:hover { background: rgba(38, 38, 38, .03); } .fp-leaderboard-rank { font-family: var(--display, 'Fraunces', serif); font-size: 17px; font-weight: 500; color: rgba(38, 38, 38, .42) !important; text-align: center; font-variant-numeric: tabular-nums; } .fp-leaderboard-row[data-rank="1"] .fp-leaderboard-rank { color: #C9A961 !important; } .fp-leaderboard-row[data-rank="2"] .fp-leaderboard-rank { color: #9C8E7F !important; } .fp-leaderboard-row[data-rank="3"] .fp-leaderboard-rank { color: #B0764A !important; } .fp-leaderboard-name { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: #262626 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; } .fp-leaderboard-name-star { color: #C9A961; font-size: 11px; text-shadow: 0 0 6px rgba(201, 169, 97, .45); } .fp-leaderboard-meta { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 500; color: rgba(38, 38, 38, .48) !important; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; } .fp-leaderboard-pts { font-family: var(--display, 'Fraunces', serif); font-size: 16px; font-weight: 500; color: #262626 !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .fp-leaderboard-pts-star { color: #E8663A; font-size: 11px; margin-right: 2px; } .fp-leaderboard-empty { padding: 22px 0; text-align: center; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; color: rgba(38, 38, 38, .48) !important; } /* ─── WIDGET: PRÓXIMOS CUMPLES ─── */ .fp-leaderboard, .fp-cumples-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .fp-cumple-row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(38, 38, 38, .045); cursor: pointer; transition: background .15s ease; margin: 0 -4px; padding-left: 8px; padding-right: 8px; border-radius: 6px; } .fp-cumple-row:hover { background: rgba(232, 102, 58, .04); } .fp-cumple-date { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(232, 102, 58, .08); border: 1px solid rgba(232, 102, 58, .18); border-radius: 8px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; color: rgba(140, 69, 23, .82) !important; flex-direction: column; line-height: 1.1; letter-spacing: .02em; } body #page-costos.section-core .costo-delta, .fp-cumple-date-day { font-size: 11px; } .fp-cumple-date-mon { font-size: 7.5px; opacity: .75; } .fp-cumple-name { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: -.005em; color: #262626 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-cumple-countdown { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(140, 69, 23, .82) !important; } .fp-cumple-wa { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(37, 211, 102, .08); border: 1px solid rgba(37, 211, 102, .22); color: #128C7E !important; cursor: pointer; transition: background .15s ease, transform .12s; } .fp-cumple-wa:hover { background: rgba(37, 211, 102, .16); transform: scale(1.06); } .fp-cumples-empty { padding: 18px 0; text-align: center; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; color: rgba(38, 38, 38, .48) !important; } /* ─── WIDGET: MOMENTUM ─── */ .fp-momentum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .fp-momentum-item { padding: 12px 10px; background: rgba(38, 38, 38, .025); border: 1px solid rgba(38, 38, 38, .06); border-radius: 10px; text-align: center; } .fp-momentum-item--up { background: rgba(52, 199, 89, .06); border-color: rgba(52, 199, 89, .18); } .fp-momentum-item--down { background: rgba(220, 53, 69, .04); border-color: rgba(220, 53, 69, .12); } .fp-momentum-arrow { font-family: var(--display, 'Fraunces', serif); font-size: 20px; font-weight: 500; line-height: 1; color: rgba(38, 38, 38, .55) !important; margin-bottom: 2px; } .fp-momentum-value { font-family: var(--display, 'Fraunces', serif); font-size: 22px; font-weight: 500; letter-spacing: -.012em; color: #262626 !important; font-variant-numeric: tabular-nums; line-height: 1.05; margin-bottom: 4px; } .fp-momentum-item--up .fp-momentum-arrow, .fp-momentum-item--up .fp-momentum-value { color: #1C6A37 !important; } .fp-momentum-item--down .fp-momentum-arrow, .fp-momentum-item--down .fp-momentum-value { color: #B33A45 !important; } .fp-momentum-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(38, 38, 38, .55) !important; } /* Responsive: stack vertical bajo 1100px */ @media (max-width: 720px) { } /* ─── Toolbar más compacto ─── */ .fp-toolbar { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; padding: 14px 16px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .055); border-radius: 12px; margin-top: 20px; margin-bottom: 14px; } /* Esconder tabs viejas + alerts (reemplazados por widgets de SPRINT 2) */ /* ─── GRUPO con header de nivel ─── */ .fp-group { margin-bottom: 20px; animation: fpGroupIn .42s cubic-bezier(.32, .72, 0, 1) both; } .nd-card-head .nd-card-title, .co-topbar .co-subnav, #page-cierre .cc3-anatomy-row-2col .cc3-anatomy-card, .cm2-stage--hist[data-collapsed="true"] .cm2-stage-head, .cm2-stage--cart[data-state="pending"] .cm2-stage-head, .fp-group:last-child { margin-bottom: 0; } @keyframes fpGroupIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } .fp-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 0 2px; } .fp-sort, .fp-group-head-left { align-items: center; display: inline-flex; flex-shrink: 0; gap: 8px; } .fp-group-ico { font-family: var(--display, 'Fraunces', serif); font-size: 14px; line-height: 1; } .fp-group[data-nivel="privado"] .fp-group-ico { color: #1A1A1A; } .fp-group[data-nivel="legado"] .fp-group-ico { color: #C9A961; text-shadow: 0 0 8px rgba(201, 169, 97, .5); } .fp-group-name { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: rgba(38, 38, 38, .72) !important; } .fp-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; background: rgba(38, 38, 38, .06); border-radius: 9999px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; color: rgba(38, 38, 38, .55) !important; } .fp-card-flag--kit, .fp-group[data-nivel="legado"] .fp-group-count { background: rgba(201, 169, 97, .14); color: #8C6F2E !important; } .fp-group-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(38, 38, 38, .12), transparent 60%); } .fp-group[data-nivel="legado"] .fp-group-line { background: linear-gradient(90deg, rgba(201, 169, 97, .35), transparent 60%); } /* ─── Cards refinadas y compactas ─── */ .fp-list .fp-card { padding: 12px 16px; gap: 14px; background: #FFFFFF; border-radius: 12px; /* v8.2.11 · virtualización: saltea layout+paint de las cards fuera de viewport (lista ~60). El keyword `auto` recuerda el alto real medido → sin saltos de scroll. */ content-visibility: auto; contain-intrinsic-size: auto 90px; } /* Quitar la rail card antigua para usar border-left semántico más sutil */ .fp-action-card[data-urgency="low"], .fp-card[data-nivel="selecto"] { border-left: 3px solid #9C8E7F; } .fp-card[data-nivel="privado"] { border-left: 3px solid #1A1A1A; } /* LEGADO premium card: dark glass + gold accents */ .fp-card[data-nivel="legado"] { background: linear-gradient(135deg, #1F1813 0%, #2B1F18 50%, #1F1813 100%); border: 1px solid rgba(201, 169, 97, .28); border-left: 3px solid #C9A961; position: relative; overflow: hidden; } .fp-card[data-nivel="legado"]::before { content: ''; position: absolute; top: -50%; right: -10%; width: 280px; height: 200%; background: radial-gradient(circle, rgba(201, 169, 97, .14) 0%, transparent 60%); pointer-events: none; z-index: 0; } .fp-card[data-nivel="legado"]:hover { border-color: rgba(201, 169, 97, .48); box-shadow: 0 6px 22px rgba(201, 169, 97, .18); } .fp-card[data-nivel="legado"] .fp-card-meta { color: rgba(245, 239, 224, .65) !important; } .fp-card[data-nivel="legado"] .fp-card-flag { background: rgba(245, 239, 224, .08); color: rgba(245, 239, 224, .82) !important; } .fp-card[data-nivel="legado"] .fp-card-flag--cumple { background: rgba(232, 102, 58, .22); color: #FFB89A !important; } .fp-card[data-nivel="legado"] .fp-card-flag--gift { background: rgba(52, 199, 89, .22); color: #5BD27A !important; } .fp-card[data-nivel="legado"] .fp-card-action { background: rgba(245, 239, 224, .08); border-color: rgba(245, 239, 224, .14); color: rgba(245, 239, 224, .65) !important; } .fp-alert.active .fp-alert-count, .fp-card[data-nivel="legado"] .fp-card-action:hover { background: rgba(245, 239, 224, .14); color: #F5EFE0 !important; } .fp-card[data-nivel="legado"] .fp-card-action--wa:hover { background: rgba(37, 211, 102, .22); border-color: rgba(37, 211, 102, .42); color: #5BFFA0 !important; } /* Avatar refinado en cards */ .fp-list .fp-card-avatar { width: 38px; height: 38px; font-size: 14px; } .fp-card[data-nivel="legado"] .fp-card-avatar { background: linear-gradient(135deg, #E5C988, #C9A961); box-shadow: 0 0 0 2px rgba(201, 169, 97, .35), 0 4px 14px rgba(201, 169, 97, .26); animation: fpLegadoAvatarGlow 3s ease-in-out infinite; } @keyframes fpLegadoAvatarGlow { 0%, 100% { box-shadow: 0 0 0 2px rgba(201, 169, 97, .35), 0 4px 14px rgba(201, 169, 97, .26); } 50% { box-shadow: 0 0 0 3px rgba(201, 169, 97, .5), 0 6px 20px rgba(201, 169, 97, .38); } } /* Progress bar más compacta en cards */ .fp-card-progress { background: rgba(38, 38, 38, .06); border-radius: 2px; overflow: hidden; height: 3px; margin-top: 5px; } /* ═══ DRAWER REDISEÑADO con TABS internos ═══ */ /* v7.93.12 · Background del drawer — override del antiguo gris (FAFAFA) por blanco */ .trf-prod-row:hover:not(:disabled), .fp-drawer-panel { background: #FFFFFF; } .fp-dr-tabs { display: flex; gap: 0; padding: 0 24px; background: #FFFFFF; border-bottom: 1px solid rgba(38, 38, 38, .06); position: sticky; top: 0; z-index: 4; } .fp-dr-tab { flex: 1; height: 42px; background: transparent; border: none; border-bottom: 2px solid transparent; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; color: rgba(38, 38, 38, .55) !important; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .fp-dr-tab.active { color: #262626 !important; border-bottom-color: #262626; font-weight: 600; } .fp-dr-tab-content { padding: 20px 24px; display: none; } .fp-dr-tab-content.active { display: block; animation: fpTabIn .26s ease; } @keyframes fpTabIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } /* Hero del drawer */ .fp-dr-hero { padding: 24px 24px 18px; background: #FFFFFF; border-bottom: 1px solid rgba(38, 38, 38, .06); position: relative; } .fp-dr-hero-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .fp-dr-hero .fp-card-avatar { width: 60px; height: 60px; font-size: 22px; } .fp-dr-hero-name { font-family: var(--display, 'Fraunces', serif); font-size: 24px; font-weight: 500; letter-spacing: -.018em; color: #262626 !important; line-height: 1.1; margin-bottom: 6px; } .mv2-filters, .pdv-title-row, .fp-dr-hero-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .fp-dr-hero-since { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(38, 38, 38, .48) !important; } /* LEGADO membership card style en hero */ .fp-dr-hero[data-nivel="legado"] { background: linear-gradient(135deg, #1A1410 0%, #2B1F18 60%, #1F1813 100%); border-bottom-color: rgba(201, 169, 97, .22); overflow: hidden; } .fp-dr-hero[data-nivel="legado"]::before { content: ''; position: absolute; top: -50px; right: -50px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(201, 169, 97, .25) 0%, transparent 60%); pointer-events: none; } #page-cierre .cc3-hero > *, #page-cierre .cc3-action > *, .lx-modal .lx-btn-prime span, .lx-confirm-ok span, .lx-confirm-ok, .cc4-hero-cta-label, .ticket-v2-btn-prime span, .ticket-v2-btn-prime svg, .fp-card[data-nivel="legado"] .fp-card-body, .fp-card[data-nivel="legado"] .fp-card-actions, .fp-dr-hero[data-nivel="legado"] .fp-dr-hero-row, .fp-dr-hero[data-nivel="legado"] .fp-dr-hero-info { position: relative; z-index: 1; } .fp-card[data-nivel="legado"] .fp-card-name, .fp-card[data-nivel="legado"] .fp-card-meta b, .fp-dr-hero[data-nivel="legado"] .fp-dr-hero-name { color: #F5EFE0 !important; } .fp-dr-hero[data-nivel="legado"] .fp-dr-hero-since { color: rgba(245, 239, 224, .55) !important; } .fp-dr-hero[data-nivel="legado"] .fp-card-avatar { box-shadow: 0 0 0 3px rgba(201, 169, 97, .42), 0 6px 20px rgba(201, 169, 97, .35); animation: fpLegadoAvatarGlow 3s ease-in-out infinite; } .fp-dr-hero-watermark { position: absolute; bottom: -8px; right: 18px; font-family: var(--display, 'Fraunces', serif); font-size: 64px; font-weight: 400; letter-spacing: -.02em; color: rgba(201, 169, 97, .08) !important; line-height: 1; pointer-events: none; user-select: none; } .fp-dr-close-v2 { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 9px; background: rgba(38, 38, 38, .04); border: 1px solid rgba(38, 38, 38, .05); color: rgba(38, 38, 38, .65) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; z-index: 5; } .fp-dr-hero[data-nivel="legado"] .fp-dr-close-v2 { background: rgba(245, 239, 224, .12); border-color: rgba(245, 239, 224, .18); color: rgba(245, 239, 224, .82) !important; } .fp-dr-hero[data-nivel="legado"] .fp-dr-close-v2:hover { background: rgba(245, 239, 224, .22); } /* Stats grid en tab General */ .fp-dr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .fp-dr-stat { padding: 12px 14px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .06); border-radius: 11px; } .fp-dr-stat-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 8.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(38, 38, 38, .45) !important; margin-bottom: 4px; } .fp-dr-stat-value { font-family: var(--display, 'Fraunces', serif); font-size: 22px; font-weight: 500; letter-spacing: -.014em; color: #262626 !important; font-variant-numeric: tabular-nums; line-height: 1.05; } .fp-dr-stat-sub { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; color: rgba(38, 38, 38, .55) !important; margin-top: 4px; } /* Progress card del drawer */ .fp-dr-progress-card { padding: 14px 16px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .06); border-radius: 12px; margin-bottom: 18px; } .fp-dr-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .fp-dr-progress-pct { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 600; color: #262626 !important; } .fp-dr-progress-track { height: 6px; background: rgba(38, 38, 38, .06); border-radius: 3px; overflow: hidden; } .fp-dr-progress-fill { height: 100%; border-radius: 3px; transition: width .8s cubic-bezier(.32, .72, 0, 1); } .fp-card[data-nivel="selecto"] .fp-card-progress-fill, .fp-dr-progress-fill[data-nivel="selecto"] { background: linear-gradient(90deg, #B5A793, #9C8E7F); } .fp-card[data-nivel="privado"] .fp-card-progress-fill, .fp-dr-progress-fill[data-nivel="privado"] { background: linear-gradient(90deg, #3A3A3A, #1A1A1A); } .fp-dr-progress-fill[data-nivel="legado"] { background: linear-gradient(90deg, #D8B872, #C9A961); box-shadow: 0 0 8px rgba(201, 169, 97, .35); } .fp-dr-progress-meta { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; color: rgba(38, 38, 38, .58) !important; margin-top: 8px; } .fp-card-meta b, .fp-action-sub strong, .fp-dr-progress-meta b { color: #262626 !important; font-weight: 600; } /* Card de nivel máximo (LEGADO max) */ .fp-dr-max-card { padding: 16px 18px; background: linear-gradient(135deg, rgba(201, 169, 97, .10), rgba(201, 169, 97, .04)); border: 1px solid rgba(201, 169, 97, .28); border-radius: 12px; text-align: center; margin-bottom: 18px; } .fp-dr-max-title { font-family: var(--display, 'Fraunces', serif); font-size: 18px; font-weight: 500; color: #8C6F2E !important; margin-bottom: 4px; } .fp-dr-max-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; color: rgba(140, 111, 46, .8) !important; } /* Sección checklist (beneficios HOY / activos) */ .fp-dr-section { margin-bottom: 18px; } .fp-dr-section-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(38, 38, 38, .55) !important; margin-bottom: 10px; } .fp-dr-check { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .06); border-radius: 10px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13px; font-weight: 500; color: #262626 !important; } .fp-dr-check--active { background: rgba(52, 199, 89, .06); border-color: rgba(52, 199, 89, .22); color: #1C6A37 !important; } .fp-dr-check--inactive { color: rgba(38, 38, 38, .48) !important; background: rgba(38, 38, 38, .025); } .fp-dr-check--cumple { background: rgba(232, 102, 58, .08); border-color: rgba(232, 102, 58, .22); color: rgba(140, 69, 23, .92) !important; font-weight: 600; } .fp-dr-check-ico { flex-shrink: 0; font-size: 13px; } /* Sparkline (tab Histórico) */ .fp-dr-spark-card { padding: 16px 18px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .06); border-radius: 12px; margin-bottom: 18px; } .fp-dr-spark-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .fp-dr-progress-label, .fp-dr-spark-title { color: rgba(38, 38, 38, .55) !important; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; } .fp-dr-spark-total { font-family: var(--display, 'Fraunces', serif); font-size: 18px; font-weight: 500; color: #262626 !important; font-variant-numeric: tabular-nums; } .fp-dr-spark { position: relative; height: 90px; display: block; } .fp-dr-spark-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .fp-dr-spark-grid-line { height: 1px; background: rgba(38, 38, 38, .04); } .cli-wa-ico svg, .fp-dr-spark svg { height: 100%; width: 100%; } .fp-dr-spark-bar { fill: rgba(38, 38, 38, .12); transition: fill .2s ease; } .fp-dr-spark-bar.is-current { fill: #E8663A; } .fp-dr-spark-bar.is-legado { fill: #C9A961; } .fp-dr-spark-bar:hover { fill: #262626; } .fp-dr-spark-labels { display: flex; justify-content: space-between; margin-top: 8px; } .fp-dr-spark-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 8.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(38, 38, 38, .42) !important; flex: 1; text-align: center; } .fp-dr-spark-label.is-current { color: #E8663A !important; font-weight: 700; } /* Tab Beneficios — sección externos refinada */ .co-top-cat-item, .co-suc-breakdown, #page-empresas .emp-aging-mini, .pdv-section, .empd-list, .lxg-section, .fp-group-cards, .fp-dr-ben-list { display: flex; flex-direction: column; gap: 8px; } .fp-dr-ben-card { padding: 13px 16px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, .06); border-radius: 11px; } .fp-dr-ben-card-gold { background: linear-gradient(135deg, rgba(201, 169, 97, .08), rgba(201, 169, 97, .03)); border-color: rgba(201, 169, 97, .28); } .fp-dr-ben-title { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13px; font-weight: 600; color: #262626 !important; margin-bottom: 3px; } .fp-leaderboard-row[data-nivel="legado"] .fp-leaderboard-pts, .fp-group[data-nivel="legado"] .fp-group-name, .fp-dr-ben-card-gold .fp-dr-ben-title { color: #8C6F2E !important; } .fp-dr-ben-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 11.5px; color: rgba(38, 38, 38, .58) !important; line-height: 1.4; } .fp-dr-ben-card-gold .fp-dr-ben-sub { color: rgba(140, 111, 46, .82) !important; } .fp-dr-ben-cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: linear-gradient(135deg, #D8B872, #C9A961); border: none; border-radius: 7px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 11px; font-weight: 600; color: #4A3E22 !important; cursor: pointer; } /* Footer drawer (acciones sticky bottom) */ .fp-dr-footer { position: sticky; bottom: 0; margin-top: 20px; padding: 14px 24px; background: #FFFFFF; border-top: 1px solid rgba(38, 38, 38, .06); display: grid; gap: 8px; } .fp-dr-cta-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; background: #25D366; border: none; border-radius: 11px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13.5px; font-weight: 600; color: #FFFFFF !important; cursor: pointer; transition: background .15s ease, transform .12s; } .fp-dr-cta-wa:hover { background: #1FBD5C; } .btn-login.lp2-cta:active, .cc4-hero-cta:active, .cc-close-fx .cc-fx-cta-ghost:active, .fp-dr-cta-wa:active { transform: scale(.98); } .cc-close-fx .cc-fx-cta-primary span, .fp-dr-cta-wa svg { color: #FFFFFF !important; } .cm2-chip.is-empty, .cm2-chip:disabled, .fp-dr-cta-wa:disabled { cursor: not-allowed; opacity: .45; } .fp-dr-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; background: rgba(38, 38, 38, .04); border: 1px solid rgba(38, 38, 38, .10); border-radius: 10px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; font-weight: 500; color: #262626 !important; cursor: pointer; transition: background .15s ease; } .fp-dr-close-v2:hover, .fp-dr-cta-secondary:hover { background: rgba(38, 38, 38, .08); } /* Card cliente en venta — chip de nivel FID v3 */ .fp-card-nivel[data-nivel="selecto"] { background: rgba(156, 142, 127, .14); border: 1px solid rgba(156, 142, 127, .26); color: #6B5F50 !important; } .fp-card-nivel[data-nivel="privado"] { background: rgba(38, 38, 38, .08); border: 1px solid rgba(38, 38, 38, .18); color: #1A1A1A !important; } .fp-card-nivel[data-nivel="legado"] { background: rgba(201, 169, 97, .14); border: 1px solid rgba(201, 169, 97, .35); color: #8C6F2E !important; } /* ════════════════════════════════════════════════════════════════════ v7.93.11 · FIDELIZACIÓN — REFACTOR AL SISTEMA VISUAL ESTABLECIDO Identity-First Light alineado a Movimientos/Stock/Cierre de Caja ════════════════════════════════════════════════════════════════════ */ /* Ocultar componentes legacy del refactor anterior */ #page-fidelizacion .fp-hero, /* Sub-header simple estilo Movimientos */ #page-fidelizacion .fp-page-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13px; font-weight: 500; color: rgba(38, 38, 38, .55); letter-spacing: -.005em; margin: 4px 0 22px; } #page-fidelizacion .fp-page-sub-sep { margin: 0 8px; color: rgba(38, 38, 38, .25); } /* KPI STRIP — replica del patrón Movimientos/Stock */ #page-fidelizacion .fp-kpi-strip { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; } #page-fidelizacion .fp-kpi { background: #FFFFFF; border-radius: 14px; box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .035); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } #page-fidelizacion .fp-kpi-top { display: flex; justify-content: space-between; align-items: center; height: 18px; } #page-fidelizacion .fp-kpi-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(38, 38, 38, .58) !important; } #page-fidelizacion .fp-kpi-toggle { width: 22px; height: 22px; border-radius: 50%; background: rgba(38, 38, 38, .045); border: none; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 15px; font-weight: 500; line-height: 1; color: rgba(38, 38, 38, .42); cursor: default; } .empd-monto, #page-fidelizacion .fp-kpi-core { display: flex; flex-direction: column; gap: 2px; } #page-fidelizacion .fp-kpi-num { font-family: var(--display, 'Fraunces', serif); font-size: 38px; font-weight: 500; letter-spacing: -.022em; color: #262626 !important; line-height: 1.02; font-variant-numeric: tabular-nums; } #page-fidelizacion .fp-kpi-num-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; font-weight: 500; color: rgba(38, 38, 38, .55) !important; letter-spacing: -.005em; } #page-fidelizacion .fp-kpi-foot { display: flex; align-items: center; gap: 7px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 11.5px; font-weight: 500; color: rgba(38, 38, 38, .48) !important; padding-top: 10px; border-top: 1px solid rgba(38, 38, 38, .055); } .cli-tier.t-platino .cli-tier-dot, .fp-tab--legado .fp-tab-dot, #page-fidelizacion .fp-kpi-meta-dot--cumple { background: #C9A961; } /* SECCIÓN editorial con titlebar */ #page-fidelizacion .fp-section { margin-bottom: 28px; } #page-fidelizacion .fp-section-titlebar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; gap: 14px; } #page-fidelizacion .fp-section-titlebar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } #page-fidelizacion .fp-section-eyebrow { display: block; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(38, 38, 38, .48); margin-bottom: 4px; } #page-fidelizacion .fp-section-title { margin: 0; font-family: var(--display, 'Fraunces', serif); font-size: 22px; font-weight: 500; letter-spacing: -.018em; color: #262626; line-height: 1.15; } #page-fidelizacion .fp-section-meta { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(38, 38, 38, .55); } .lp2-eye:hover, #page-clientes .cli-controls-v2 .cli-tier-btn:hover, #page-fidelizacion .fp-section-meta span { color: #262626; } #page-fidelizacion .fp-section-action { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; background: rgba(38, 38, 38, .045); border: 1px solid rgba(38, 38, 38, .06); border-radius: 9px; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 11.5px; font-weight: 500; letter-spacing: -.005em; color: rgba(38, 38, 38, .82); cursor: pointer; transition: background .15s ease, border-color .15s ease; } #page-fidelizacion .fp-section-action:hover { background: rgba(38, 38, 38, .08); border-color: rgba(38, 38, 38, .12); } #page-fidelizacion .fp-section-action svg { color: rgba(38, 38, 38, .55); } /* ACCIONES HOY como tabla editorial limpia */ #page-fidelizacion .fp-actions-list { background: #FFFFFF; border-radius: 14px; box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .035); overflow: hidden; display: block; flex-direction: initial; gap: 0; } #page-fidelizacion .fp-action-card { display: grid !important; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border: none !important; border-bottom: 1px solid rgba(38, 38, 38, .055) !important; background: transparent !important; border-radius: 0; animation: fpRowIn .32s cubic-bezier(.32, .72, 0, 1) both; } #page-fidelizacion .fp-action-card:hover { background: rgba(38, 38, 38, .02) !important; box-shadow: none !important; transform: none; } @keyframes fpRowIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } /* Dot semántico (en lugar de border-left ruidoso) */ #page-fidelizacion .fp-action-ico { width: 8px; height: 8px; border-radius: 50%; background: #C9A961 !important; margin: 0 auto; font-size: 0 !important; padding: 0; border: none !important; } #page-fidelizacion .fp-action-card[data-urgency="high"] .fp-action-ico { background: #E8663A !important; } #page-fidelizacion .fp-action-card[data-urgency="medium"] .fp-action-ico { background: #C9A961 !important; } #page-fidelizacion .fp-action-card[data-urgency="low"] .fp-action-ico { background: rgba(38, 38, 38, .25) !important; } #page-fidelizacion .fp-action-card[data-urgency="risk"] .fp-action-ico { background: #E05252 !important; } #page-fidelizacion .fp-action-title { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; color: #262626; margin-bottom: 2px; } #page-fidelizacion .fp-action-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: -.005em; color: rgba(38, 38, 38, .55); line-height: 1.4; margin-bottom: 0; } .pdv-pago-fecha, .nd-hero-summary b, .cc4-hero-sub strong, #page-fidelizacion .fp-action-sub strong { color: #262626; font-weight: 600; } #page-fidelizacion .fp-action-cta { display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 13px; background: linear-gradient(158deg, #333 0%, #262626 100%) !important; border: none !important; border-radius: 9px; color: #FFFFFF !important; font-family: var(--ui, 'Inter Tight', system-ui, sans-serif) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: -.005em; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 6px rgba(26, 20, 16, .14) !important; transition: transform .12s, box-shadow .18s !important; } #page-fidelizacion .fp-action-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26, 20, 16, .18) !important; } .sb2-cta:active, #tb-primary-zone .sk-btn-primary:active, #tb-primary-zone .tb-relocated:active, .va-btn-ok:active, .v3-tb-export:active, .cm2-item-expand-btn:active, .cc-edit-egreso-btns .btn-ghost:active, .cc-edit-egreso-btns .btn-prime:active, .cli-btn-new-v2:active, .ticket-v2-btn-ghost:active, .ticket-v2-btn-prime:active, .stk-lotes-xlink:active, .topbar .tb-filters-btn:active, .fp-action-cta:active, #page-fidelizacion .fp-action-cta:active { transform: scale(.97); } .fp-action-cta svg, #page-fidelizacion .fp-action-cta svg { color: #FFFFFF !important; flex-shrink: 0; } #page-fidelizacion .fp-action-cta--ghost { background: rgba(38, 38, 38, .045) !important; border: 1px solid rgba(38, 38, 38, .08) !important; color: rgba(38, 38, 38, .82) !important; box-shadow: none !important; } #page-fidelizacion .fp-action-cta--accent, #page-fidelizacion .fp-action-cta--gold { background: linear-gradient(158deg, #333 0%, #262626 100%) !important; color: #FFFFFF !important; } /* Estado vacío editorial */ #page-fidelizacion .fp-actions-empty { padding: 32px 22px; text-align: center; background: transparent !important; border: none !important; } #page-fidelizacion .fp-actions-empty-ico { font-size: 22px; margin-bottom: 6px; display: block; color: #2EAD5C; } #page-fidelizacion .fp-actions-empty-title { font-family: var(--display, 'Fraunces', serif); font-size: 17px; font-weight: 500; letter-spacing: -.015em; color: #262626 !important; margin-bottom: 3px; } #page-fidelizacion .fp-actions-empty-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; color: rgba(38, 38, 38, .55) !important; } /* VISTA GENERAL grid 2x2 widgets editoriales */ .co-suc-cmp-grid, #page-fidelizacion .fp-overview-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } #page-fidelizacion .fp-widget { background: #FFFFFF !important; border-radius: 14px; box-shadow: 0 0 0 1px rgba(38, 38, 38, .045), 0 2px 6px rgba(38, 38, 38, .035) !important; padding: 16px 18px; border: none !important; margin-bottom: 0 !important; display: block !important; } #page-fidelizacion .fp-widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } #page-fidelizacion .fp-widget-eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(38, 38, 38, .58); } #page-fidelizacion .fp-widget-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; background: rgba(38, 38, 38, .055); border-radius: 4px; font-size: 8px; } #page-fidelizacion .fp-widget-count { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgba(38, 38, 38, .55); } #page-fidelizacion .fp-widget-period-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(38, 38, 38, .42); } /* MEMBROS rows — sin gradientes oscuros */ #page-fidelizacion .fp-membros-grid { display: flex !important; flex-direction: column; gap: 0; grid-template-columns: initial; } #page-fidelizacion .fp-membro-row { display: grid !important; grid-template-columns: 10px 80px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border: none !important; background: transparent !important; text-align: left; cursor: pointer; border-bottom: 1px solid rgba(38, 38, 38, .055) !important; transition: background .15s ease; border-radius: 0; } #page-fidelizacion .fp-membro-row:hover { background: rgba(38, 38, 38, .02) !important; transform: none !important; box-shadow: none !important; } #page-fidelizacion .fp-membro-row-dot { width: 8px; height: 8px; border-radius: 50%; } .cli-tier.t-selecto .cli-tier-dot, .cli-tier.t-bronce .cli-tier-dot, .cli-tier.t-plata .cli-tier-dot, .fp-tab--selecto .fp-tab-dot, .fp-card[data-nivel="selecto"] .fp-card-rail, #page-fidelizacion .fp-membro-row--selecto .fp-membro-row-dot { background: #9C8E7F; } #page-fidelizacion .fp-membro-row--privado .fp-membro-row-dot { background: #262626; } #page-fidelizacion .fp-membro-row--legado .fp-membro-row-dot { background: #C9A961; box-shadow: 0 0 6px rgba(201, 169, 97, .5); } #page-fidelizacion .fp-membro-row-name { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: rgba(38, 38, 38, .68); } #page-fidelizacion .fp-membro-row-value { font-family: var(--display, 'Fraunces', serif); font-size: 22px; font-weight: 500; letter-spacing: -.018em; color: #262626; font-variant-numeric: tabular-nums; text-align: right; background: transparent !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; } #page-fidelizacion .fp-membro-row--legado .fp-membro-row-name, #page-fidelizacion .fp-membro-row--legado .fp-membro-row-value { color: #8C6F2E; } #page-fidelizacion .fp-membro-row-sub { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 11.5px; font-weight: 500; color: rgba(38, 38, 38, .55); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* LEADERBOARD editorial */ #page-fidelizacion .fp-leaderboard { margin: 0; padding: 0; list-style: none; } #page-fidelizacion .fp-leaderboard-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(38, 38, 38, .055); cursor: pointer; transition: background .15s ease; margin: 0; } #page-fidelizacion .fp-leaderboard-rank { font-family: var(--display, 'Fraunces', serif); font-size: 14px; font-weight: 500; color: rgba(38, 38, 38, .45); text-align: center; font-variant-numeric: tabular-nums; } #page-fidelizacion .fp-leaderboard-row[data-rank="3"] .fp-leaderboard-rank { color: #B0764A; } #page-fidelizacion .fp-leaderboard-name { font-family: var(--ui, 'Inter Tight', system-ui, sans-serif); font-size: 12.5px; font-weight: 600; } #page-fidelizacion .fp-leaderboard-pts { font-family: var(--display, 'Fraunces', serif); font-size: 15px; font-weight: 500; color: #262626; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } /* CUMPLES editorial */ #page-fidelizacion .fp-cumple-row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(38, 38, 38, .055); cursor: pointer; margin: 0; padding-left: 0; padding-right: 0; } tr:last-child td, .nota-item:last-child, tbody tr:last-child td, .nd-rank-row:last-child, .nd-venta-row:last-child, .cc2-row-wrap:last-child .cc2-row, #page-clientes .cd-sec:last-child, #page-clientes .cd-hist-row:last-child, #page-clientes .cli-tbl tbody tr.cli-row:last-child, .av-item:last-child, .changelog-item:last-child, .dash-tl-item:last-child, #page-dashboard .dash-tl-item:last-child, #page-dashboard .dash-venc-row:last-child, #dash-venc-hover-card .dash-vh-row:last-child, .sk-table tbody tr:last-child td, .trf-prod-row:last-child, .trf-res-item:last-child, #page-vencimientos .venc-row:last-child, #page-vencimientos .vc2-table tbody tr.v3-tr:last-child, #page-costos .costo-table tr:last-child td, body #page-costos.section-core .costo-table tbody tr:last-child td, .co-bd-row:last-child, .co-fv-item:last-child, .co-table tbody tr:last-child, .pr-row:last-child, #page-cierre .cc3-medios-item:last-child, #page-cierre .cc3-arqueo-rows > *:last-child, #page-cierre .cc3-hist-row:last-child, .pe-dd-item:last-child, .pe-cart-table tbody tr:last-child td, .emp-pedidos-table tbody tr:last-child td, .lxg-table tbody tr:last-child td, .fp-leaderboard-row:last-child, .fp-cumple-row:last-child, #page-fidelizacion .fp-leaderboard-row:last-child, #page-fidelizacion .fp-cumple-row:last-child { border-bottom: none; } #page-fidelizacion .fp-leaderboard-row:hover, #page-fidelizacion .fp-cumple-row:hover { background: rgba(38, 38, 38, .02); } #page-fidelizacion .fp-cumple-date { width: 28px; height: 28px; background: rgba(232, 102, 58, .07); border: none; } /* MOMENTUM editorial */ #page-fidelizacion .fp-momentum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid rgba(38, 38, 38, .06); border-radius: 9px; overflow: hidden; } #page-fidelizacion .fp-momentum-item { padding: 12px 8px; text-align: center; background: transparent !important; border: none !important; border-right: 1px solid rgba(38, 38, 38, .055) !important; border-radius: 0; } #page-fidelizacion .fp-momentum-item:last-child { border-right: none !important; } #page-fidelizacion .fp-momentum-arrow { font-family: var(--display, 'Fraunces', serif); font-size: 16px; font-weight: 500; line-height: 1; color: rgba(38, 38, 38, .35); margin-bottom: 4px; } #page-fidelizacion .fp-momentum-item--up .fp-momentum-arrow { color: #2EAD5C; } #page-fidelizacion .fp-momentum-value { font-family: var(--display, 'Fraunces', serif); font-size: 22px; font-weight: 500; letter-spacing: -.014em; color: #262626 !important; font-variant-numeric: tabular-nums; line-height: 1.05; margin-bottom: 3px; } #page-fidelizacion .fp-momentum-item--up .fp-momentum-value { color: #2EAD5C !important; } .ccfx-dif-neg, #page-fidelizacion .fp-momentum-item--down .fp-momentum-value { color: #E05252 !important; } #page-fidelizacion .fp-momentum-label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(38, 38, 38, .55); } /* LISTA inferior — LEGADO con accent dorado SUTIL (no dark) */ #page-fidelizacion .fp-card[data-nivel="legado"] { background: #FFFFFF !important; border: 1px solid rgba(201, 169, 97, .35) !important; border-left: 3px solid #C9A961 !important; } #page-fidelizacion .fp-card[data-nivel="legado"]:hover { border-color: rgba(201, 169, 97, .55) !important; box-shadow: 0 4px 14px rgba(201, 169, 97, .12) !important; } #page-fidelizacion .fp-action-cta--ghost svg, #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-meta { color: rgba(38, 38, 38, .55) !important; } #app, .sb2-brand-name, .tb-dd-item:hover, .tb-dd-item.active, .sb2-user-name, .tb-section-title, #top-title, #page-cierre .cc3-pago-filtro:hover, #page-cierre .cc3-hist-filter:hover, .fp-dr-tab:hover, #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-name, #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-meta b { color: #262626 !important; } #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-action { background: rgba(38, 38, 38, .04) !important; border-color: rgba(38, 38, 38, .055) !important; color: rgba(38, 38, 38, .65) !important; } /* Override del color blanco crema legacy en pill LEGADO (era para dark gradient antiguo) */ #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-nivel, .fp-card[data-nivel="legado"] .fp-card-nivel { background: rgba(201, 169, 97, .14) !important; border-color: rgba(201, 169, 97, .42) !important; color: #8C6F2E !important; } /* Flags en cards LEGADO también recuperan colores normales */ #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag { background: rgba(38, 38, 38, .04) !important; color: rgba(38, 38, 38, .65) !important; } #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag--cumple { background: rgba(232, 102, 58, .08) !important; color: rgba(140, 69, 23, .82) !important; } #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag--gift { background: rgba(52, 199, 89, .10) !important; color: #1C6A37 !important; } #page-fidelizacion .fp-card[data-nivel="legado"] .fp-card-flag--kit { background: rgba(201, 169, 97, .14) !important; color: #8C6F2E !important; } /* Responsive */ @media (max-width: 1100px) { #page-fidelizacion .fp-kpi-strip { grid-template-columns: repeat(2, 1fr); } .trf-grid, #page-cierre .cc3-anatomy-row-2col, #page-cierre .cc3-arqueo-grid, .cm2-grid, #page-fidelizacion .fp-overview-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .fp-membros-grid, .fp-momentum-grid, #page-fidelizacion .fp-kpi-strip { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ v7.94.5 · SOMBRA OSCURA SOLO EN BOTTOM (muy sutil) Sombra oscura apenas perceptible con blur en el borde inferior del #pages — indica que hay más contenido al scrollear hacia abajo. Specs: - Solo bottom (no top) - Opacity ultra baja (~4%) — apenas se nota - Blur intenso (28px) — el blur es el protagonista ═══════════════════════════════════════════════════════════════ */ /* #main necesita position relative para anclar el pseudo-elemento */ .ni[data-tip], #tb-ni-vencimientos, #page-movimientos.is-mv-delete-mode, #page-movimientos.is-mv-delete-mode .mv-row, .mv2-dropdown, .lx-fg, .pe-prod-search-wrap, #page-empresas, .emp-search-wrap, .tb-filters-sheet-body #tb-action-zone .mv2-dropdown, #main { position: relative; } /* v8.5.7 · ELIMINADO POR COMPLETO — el efecto `#main::after` era un strip inferior con `backdrop-filter: blur(28px)` que difuminaba el contenido al scrollear ("glow" del scroll). Removido a pedido del usuario (base + media queries mobile/reduced-motion). */ /* ═══════════════════════════════════════════════════════════════ v7.95.0 · VR EMPRESA DARK — Migración del marrón legacy Override del .vr-shell.vr-mode-empresa al sistema dark profesional. Test case del nuevo Dark Mode Architecture (variables definidas arriba). ═══════════════════════════════════════════════════════════════ */ /* ─── SHELL & OVERLAY ─── */ /* ─── HEADER ─── */ #page-cierre .cc3-comp-day.today { color: #E8663A !important; } /* CTA "Venta rápida" en sidebar (mantiene Lacca Nera en dark — funciona perfecto) */ /* Cards principales del dashboard — alta especificidad para override de #page-dashboard .nd-card legacy */ /* ── SEGMENTED BARS (nivel de stock) ── Solo override las empty bars (track) — las filled mantienen su inline style="background:rgba(R,G,B,a)" del JS que indica el nivel semánticamente. */ /* sk-seg-filled NO se toca — el inline RGB preserva el nivel verde/amber/rojo */ /* ── BOTÓN "Agregar producto" (mantiene Lacca Sepia) ── */ /* Card wrapper de la tabla (la real es .mv-table-card con background:#fff) */ /* ── LOCAL chip — preserva semántica (L1/L2 con tintes) ── */ /* Filter pills historial (30d/7d/90d/Todo) */ /* ── DESGLOSE MEDIOS (clase correcta es cc3-medios-amount) ── */ /* Input prefix "$" */ /* Medios por fila historial ($X.XXX por medio) */ /* ── BADGES VENCIMIENTO (preserva semántica rojo/amber/verde) ── */ /* "Resolver todos" (header de grupo) */ /* ── LOCAL chips (preserva semántica L1/L2) ── */ /* ── Modales: fix inputs sin type explícito (default = text) ── */ /* Botones inline (no en foot) */ /* Document body (.mvd-doc, .mvd-hd) override del v7.95.4 — más específico ahora */ /* ── Fix v7.95.11: numero ticket y total invisibles por background-clip:text legacy ── */ /* ── Drawer Movimientos v7.95.12: eliminar bordes/líneas residuales ── */ /* "VER TODOS" sección */ /* ── RESUMEN legacy ── */ /* ── Carga Masiva v7.95.14: fix prep-field radius + cart items dark ── */ /* Vence pill dentro del item (mantiene semántica amber/red/green) */ /* Empty state legacy */ /* ── Categorías pill (preserva semántica si las hay) ── */ /* ── Header in-body (visible solo si LXTopbar no relocó) ── */ /* ── Save button en topbar primary zone (mantiene identidad ember) ── */ /* Save button in-body (mismo tratamiento si LXTopbar no relocó) */ /* ── Search/filter in-body (fallback si LXTopbar no relocó) ── */ /* Search bar legacy fallback (sin v2) */ /* ── Avatar tiers (FID v3) — preservar identidad cromática pero dark-aware ── */ /* Backcompat legacy tiers */ /* Tier dots — preservar identidad (señalética) */ /* ══ DRAWER SHELL + OVERLAY ══ */ /* Legacy drawer (sin cd-v2) */ /* ── HERO (v7.75.0) ── */ /* Hero avatar — preservamos gradients de tier (identidad) pero ajustamos sombra */ /* Hero tier pills — preservar identidad cromática warm */ /* Progress fill mantiene su gradient identitario (bronce → oro → privado) */ /* Legacy drw hist rows */ /* Lacca Sepia (reemplaza Lacca Nera marrón legacy) */ /* ══ NUEVA VENTA DRAWER VIEW (v7.32.0) ══ */ /* Back button */ /* meta dots preservan identidad (ember + gold) */ /* Action dots preservan semántica (ember/gold/slate/red) — solo "low" pasa a ink */ /* Estado vacío celebratorio "Todo al día" */ /* Top 3 ranks preservan oro/plata/bronce (identidad) */ /* Drawer hero LEGADO (premium dark — preservar identidad warm gold pero con tonos correctos) */ /* ── Beneficios cards (tab Beneficios) ── */ /* ── Drawer footer (sticky) ── */ /* WhatsApp CTA mantiene verde brand */ /* ── Filters legacy (display:none por código, pero por si acaso) ── */ /* ═════════════════════════════════════════════════════════════════ v7.95.19 · DARK MODE — Página EMPRESAS (B2B · Ledger Editorial) - Header v2 (eyebrow + título + stats + CTA Nueva empresa) - KPI strip 3 cards semánticas (Por cobrar · Vencido · Al día) - Toolbar (search + export + filters) - Card grid + expanded card (aging mini, info, table pedidos) - Empd cards (lista pedidos rediseñada con rail + items + meta + actions) - PDV modal (detalle pedido — qué compró, totales, pagos, observaciones) - PE modal (Pedido Empresa: search empresa + search producto + cart + dropdowns) - PP modal (Pago empresa: emp-card + modo-toggle + preview + caja toggle) Empresas mantiene paleta semántica Ledger (verde esmeralda / ámbar / bordeaux) pero adaptada a warm-dark del sistema. ═════════════════════════════════════════════════════════════════ */ /* ── Page shell + emp tokens override ── */ #page-clientes.cli-drawer-open, #page-clientes.cli-drawer-open .cli-layout, #page-clientes.cli-drawer-open .cli-master, .page { background: transparent !important; } /* ══ DETALLE (legacy split layout) ══ */ /* ── Pedidos table (legacy) ── */ /* ══ EMPD — Lista pedidos rediseñada (v7.32.0) ══ */ /* ══ PP MODAL (Pago Empresa) ══ */ /* ═══════════════════════════════════════════════════════════════════ v7.95.21 · TOPBAR UNIFIED SEARCH + SELECTS Replica del estilo de Vencimientos (.v3-tb-search) en TODAS las barras de búsqueda y selects del topbar. Override por encima de todos los estilos legacy. Specs (canónica Vencimientos): - Search/select height: 30px - Background: rgba(255,255,255,.72) (semi-transparente blanco) - Border: 1px solid rgba(191,180,170,.50) (warm tan) - Border-radius: 7px - Font: var(--sans) 11.5px 500 letter-spacing -0.005em - Color: #1A1410 (ink) - Focus: bg #FFFFFF, border-color rgba(191,180,170,.85) - Placeholder: rgba(26,20,16,.40) ═══════════════════════════════════════════════════════════════════ */ /* ── WRAPPERS (containers de search + icon) ── */ .topbar .tb-action-zone .sk-search-wrap, .topbar .tb-action-zone .mv2-search-wrap, .topbar .tb-action-zone .v3-tb-search, .topbar .tb-action-zone .pr-search-wrap, .topbar .tb-action-zone .cli-master-bar { position: relative !important; flex: 0 1 220px !important; max-width: 220px !important; min-width: 160px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; height: auto !important; } /* ── INPUTS de search ── */ .topbar .tb-action-zone .sk-search-input, .topbar .tb-action-zone .mv2-search-input, .topbar .tb-action-zone .v3-tb-search-input, .topbar .tb-action-zone .pr-search-input, .topbar .tb-action-zone .cli-master-bar input, .topbar .tb-action-zone input[type="text"], .topbar .tb-action-zone input[type="search"] { width: 100% !important; height: 30px !important; padding: 0 28px 0 26px !important; background: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(191, 180, 170, .50) !important; border-radius: 7px !important; font-family: var(--sans, "Inter Tight", sans-serif) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: #1A1410 !important; outline: none !important; box-shadow: none !important; transition: background .13s, border-color .13s !important; margin: 0 !important; } /* Inputs sin icon dentro del wrap → ajustar padding */ .topbar .tb-action-zone .cli-master-bar input { padding: 0 12px !important; } /* Focus state — blanco puro + border más visible */ .topbar .tb-action-zone .sk-search-input:focus, .topbar .tb-action-zone .mv2-search-input:focus, .topbar .tb-action-zone .v3-tb-search-input:focus, .topbar .tb-action-zone .pr-search-input:focus, .topbar .tb-action-zone .cli-master-bar input:focus, .topbar .tb-action-zone input[type="text"]:focus, .topbar .tb-action-zone input[type="search"]:focus { background: #FFFFFF !important; border-color: rgba(191, 180, 170, .85) !important; box-shadow: none !important; } /* Focus-within del wrap (reset — los focus visibles están en el input, no en el wrap) */ .sk-search-wrap, .mv2-search-wrap, .v3-tb-search, .pr-search-wrap, .topbar .tb-action-zone .sk-search-wrap:focus-within, .topbar .tb-action-zone .mv2-search-wrap:focus-within, .topbar .tb-action-zone .v3-tb-search:focus-within, .topbar .tb-action-zone .pr-search-wrap:focus-within, .topbar .tb-action-zone .cli-master-bar:focus-within { background: transparent !important; border: none !important; box-shadow: none !important; } /* Placeholder */ .topbar .tb-action-zone .sk-search-input::placeholder, .topbar .tb-action-zone .mv2-search-input::placeholder, .topbar .tb-action-zone .v3-tb-search-input::placeholder, .topbar .tb-action-zone .pr-search-input::placeholder, .topbar .tb-action-zone .cli-master-bar input::placeholder, .topbar .tb-action-zone input[type="text"]::placeholder, .topbar .tb-action-zone input[type="search"]::placeholder { color: rgba(26, 20, 16, .40) !important; } /* ── ICONS de search (lupa) ── */ .topbar .tb-action-zone .sk-search-ico, .topbar .tb-action-zone .mv2-search-ico, .topbar .tb-action-zone .v3-tb-search-ico, .topbar .tb-action-zone .pr-search-wrap > svg, .topbar .tb-action-zone .cli-master-bar > svg { position: absolute !important; left: 9px !important; top: 50% !important; transform: translateY(-50%) !important; width: 12px !important; height: 12px !important; color: rgba(26, 20, 16, .42) !important; pointer-events: none !important; } /* ── CLEAR BUTTON (botón ✕) ── */ .topbar .tb-action-zone .mv2-search-clr, .topbar .tb-action-zone .v3-tb-search-clear, .topbar .tb-action-zone .emp-search-clr { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; background: transparent !important; border: none !important; border-radius: 50% !important; color: rgba(26, 20, 16, .50) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; pointer-events: auto !important; transition: background .14s, color .14s !important; } .topbar .tb-action-zone .mv2-search-clr:hover, .topbar .tb-action-zone .v3-tb-search-clear:hover, .topbar .tb-action-zone .emp-search-clr:hover { background: rgba(26, 20, 16, .08) !important; color: #1A1410 !important; } /* ── SELECTS NATIVOS — chevron custom via background-image ── */ .topbar .tb-action-zone select, .topbar .tb-action-zone .pr-filter-select, .topbar .tb-action-zone .sk-locf-sel { height: 30px !important; padding: 0 28px 0 10px !important; background-color: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(191, 180, 170, .50) !important; border-radius: 7px !important; font-family: var(--sans, "Inter Tight", sans-serif) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: #1A1410 !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color .13s, border-color .13s !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 9px center !important; } .topbar .tb-action-zone select:hover, .topbar .tb-action-zone .pr-filter-select:hover, .topbar .tb-action-zone .sk-locf-sel:hover { background-color: #FFFFFF !important; border-color: rgba(191, 180, 170, .70) !important; } .topbar .tb-action-zone select:focus, .topbar .tb-action-zone .pr-filter-select:focus { background-color: #FFFFFF !important; border-color: rgba(191, 180, 170, .85) !important; } /* ── DROPDOWN BUTTONS CUSTOM (con SVG chevron interno propio) ── .mv2-dd-btn / .v3-dd-btn / .tb-collapse-toggle (Stock) IMPORTANTE: NO usar background-image chevron — ya tienen SVG interno. NO usar padding extra a la derecha — el chevron interno ocupa su lugar. Preservar el ::before icon de mv2-dd-btn (no pisar background). */ .topbar .tb-action-zone .mv2-dd-btn, .topbar .tb-action-zone .v3-dd-btn, .topbar .tb-action-zone .tb-collapse-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 30px !important; padding: 0 10px !important; background-color: rgba(255, 255, 255, .72) !important; background-image: none !important; border: 1px solid rgba(191, 180, 170, .50) !important; border-radius: 7px !important; font-family: var(--sans, "Inter Tight", sans-serif) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: #1A1410 !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; white-space: nowrap !important; transition: background-color .13s, border-color .13s, color .13s !important; } .topbar .tb-action-zone .mv2-dd-btn:hover, .topbar .tb-action-zone .v3-dd-btn:hover, .topbar .tb-action-zone .tb-collapse-toggle:hover { background-color: #FFFFFF !important; border-color: rgba(191, 180, 170, .70) !important; color: #1A1410 !important; } /* Estado open/active del custom dropdown button */ .topbar .tb-action-zone .mv2-dropdown.open .mv2-dd-btn, .topbar .tb-action-zone .v3-dropdown.is-open .v3-dd-btn, .topbar .tb-action-zone .tb-cat-wrapper.is-open .tb-collapse-toggle { background-color: #FFFFFF !important; border-color: rgba(191, 180, 170, .85) !important; color: #1A1410 !important; } /* Text/labels INSIDE the custom dropdown buttons — asegurar visibilidad */ .topbar .tb-action-zone .mv2-dd-btn .mv2-dd-label, .topbar .tb-action-zone .mv2-dd-btn .mv2-dd-value, .topbar .tb-action-zone .v3-dd-btn .v3-dd-value, .topbar .tb-action-zone .v3-dd-btn .v3-dd-eyebrow, .topbar .tb-action-zone .tb-collapse-toggle .tb-ct-label { color: inherit !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; } /* SVG chevron interno de dropdowns custom — pequeño, ink soft */ .topbar .tb-action-zone .mv2-dd-btn .mv2-dd-chev, .topbar .tb-action-zone .v3-dd-btn .v3-dd-chevron, .topbar .tb-action-zone .tb-collapse-toggle .tb-ct-chev { width: 10px !important; height: 10px !important; opacity: .55 !important; flex-shrink: 0 !important; transition: transform .2s cubic-bezier(.16, 1, .3, 1) !important; } .topbar .tb-action-zone .mv2-dropdown.open .mv2-dd-chev, .topbar .tb-action-zone .v3-dropdown.is-open .v3-dd-chevron, .topbar .tb-action-zone .tb-cat-wrapper.is-open .tb-ct-chev { transform: rotate(180deg) !important; } /* SVG icons (no chevron) dentro de los dropdown buttons — primer SVG hijo */ .topbar .tb-action-zone .tb-collapse-toggle > svg:not(.tb-ct-chev) { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; color: rgba(26, 20, 16, .55) !important; opacity: 1 !important; } /* Wrapper sk-sucursal-wrap (Stock local filter — wrapper que tiene un select interno) */ .topbar .tb-action-zone .sk-sucursal-wrap { height: 30px !important; padding: 0 10px !important; background: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(191, 180, 170, .50) !important; border-radius: 7px !important; transition: background .13s, border-color .13s !important; } .topbar .tb-action-zone .sk-sucursal-wrap:hover { background: #FFFFFF !important; border-color: rgba(191, 180, 170, .70) !important; } /* Cuando el wrap envuelve a un tb-sd-wrapper (custom dropdown construido por LXTopbar), reset */ .topbar .tb-action-zone .sk-sucursal-wrap:has(.tb-sd-wrapper) { background: transparent !important; border: none !important; padding: 0 !important; height: auto !important; } /* ═══════════════════════════════════════════════════════════════════ v7.95.22 · DROPDOWN PANELS (menús que se despliegan) .mv2-dd-menu / .v3-dd-panel / .tb-cat-panel (Stock) / .tb-sd-panel ═══════════════════════════════════════════════════════════════════ */ .topbar .tb-action-zone .mv2-dd-menu, .topbar .tb-action-zone .v3-dd-panel, .tb-cat-wrapper .tb-cat-panel, .tb-sd-wrapper .tb-sd-panel { background: #FFFFFF !important; border: 1px solid rgba(191, 180, 170, .50) !important; border-radius: 9px !important; box-shadow: 0 0 0 1px rgba(26, 20, 16, .02), 0 8px 24px rgba(26, 20, 16, .10), 0 2px 6px rgba(26, 20, 16, .05) !important; padding: 5px !important; min-width: 180px !important; } /* Items dentro de los paneles — soft override: solo colores + radius unificados. No fuerzo height/width/padding agresivo para no romper layout de items con dots semánticos internos (v3-dd-opt-dot, mv2-dd-item-dot, etc). */ .topbar .tb-action-zone .mv2-dd-item, .topbar .tb-action-zone .v3-dd-opt, .tb-cat-wrapper .tb-cat-panel .sk-fpill, .tb-sd-wrapper .tb-sd-panel .tb-sd-item { background: transparent !important; border-radius: 6px !important; color: rgba(26, 20, 16, .72) !important; text-transform: none !important; box-shadow: none !important; transition: background .12s, color .12s !important; } .topbar .tb-action-zone .mv2-dd-item:hover, .topbar .tb-action-zone .v3-dd-opt:hover, .tb-cat-wrapper .tb-cat-panel .sk-fpill:hover, .tb-sd-wrapper .tb-sd-panel .tb-sd-item:hover { background: rgba(26, 20, 16, .045) !important; color: #1A1410 !important; } .topbar .tb-action-zone .mv2-dd-item.on, .topbar .tb-action-zone .v3-dd-opt.is-active, .tb-cat-wrapper .tb-cat-panel .sk-fpill.active, .tb-sd-wrapper .tb-sd-panel .tb-sd-item.active { background: rgba(26, 20, 16, .06) !important; color: #1A1410 !important; font-weight: 600 !important; } /* ─── DROPDOWN PANELS (menús) — dark ─── */ /* ═══════════════════════════════════════════════════════════════════ v7.96.2 · RESTAURACIÓN VENCIMIENTOS 2-COL LAYOUT (originalmente v7.27.0) Bloque base que se borró accidentalmente en v7.95.20. Restaurado desde la-estancia-black-v7.25.0.css.v7.95.19.bak. ═══════════════════════════════════════════════════════════════════ */ /* ═══ v7.27.0 — VENCIMIENTOS 2-COLUMN LAYOUT ═══ */ /* ── 2-Column Layout ── */ #page-vencimientos .v-layout { display: flex; gap: 20px; align-items: flex-start; } #page-vencimientos .v-panel { width: 280px; min-width: 280px; position: sticky; top: 16px; align-self: flex-start; display: flex; flex-direction: column; gap: 12px; } #page-vencimientos .v-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ── KPI Cards (stacked in panel) ── */ .cm2-cart-list, #page-vencimientos .v-kpis { display: flex; flex-direction: column; gap: 12px; } #page-vencimientos .v-kpi { background: #FFFFFF; border: 1px solid rgba(191,180,170,.22); border-radius: 9px; padding: 16px 18px 14px; box-shadow: 0 1px 2px rgba(32,24,18,.02), 0 8px 24px rgba(32,24,18,.04); } #page-vencimientos .v-kpi:nth-child(1) { animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 280ms both; } #page-vencimientos .v-kpi:nth-child(2) { animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 360ms both; } #page-vencimientos .v-kpi:nth-child(3) { animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 440ms both; } #page-vencimientos .v-kpi-eyebrow { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(26,20,16,.42); margin-bottom: 8px; } #page-vencimientos .v-kpi-num { font-family: var(--serif); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; line-height: 1; margin-bottom: 6px; color: #1A1410; } #page-vencimientos .v-kpi-num-lg { font-size: 30px; } #page-fidelizacion .fp-momentum-item--down .fp-momentum-arrow, #page-vencimientos .v-num-danger { color: #E05252; } #page-vencimientos .v-kpi-sub { font-family: var(--sans); font-size: 11.5px; font-weight: 400; color: rgba(26,20,16,.42); margin-bottom: 6px; } /* ── Stacked Bar (Crítico) ── */ #page-vencimientos .v-stacked-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 10px 0 8px; background: rgba(26,20,16,.04); } #page-vencimientos .v-stacked-seg { height: 100%; transition: width .6s cubic-bezier(.16,1,.3,1); } #page-vencimientos .v-seg-danger { background: #E05252; border-radius: 4px 0 0 4px; } #page-vencimientos .v-seg-amber { background: #D4882A; border-radius: 0 4px 4px 0; } #page-vencimientos .v-stacked-legend { display: flex; gap: 10px; margin-top: 2px; flex-wrap: wrap; } #page-vencimientos .v-stacked-legend-item { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; color: rgba(26,20,16,.55); } #page-vencimientos .v-stacked-legend-item::before { content: ""; width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; } .tk.er::before, #page-movimientos.is-mv-delete-mode .mv-row:hover::before, .va-card-v2.critico::before, .stk-lote--critico .stk-lote-rail, #page-vencimientos .seg-danger::before { background: #E05252; } .tk.wn::before, .cm2-dot--warn, .va-card-v2.atencion::before, .stk-lote--proximo .stk-lote-rail, #page-vencimientos .seg-amber::before { background: #D4882A; } /* ── Day Chart (Próximos 7 días) ── */ #page-vencimientos .v-day-chart { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin-top: 8px; } #page-vencimientos .v-day-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; } #page-vencimientos .v-day-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } #page-vencimientos .v-day-bar { width: 100%; max-width: 28px; border-radius: 3px 3px 0 0; min-height: 2px; transform-origin: bottom; animation: lx-bar-rise var(--lx-d-slow,420ms) var(--lx-curve-spring,cubic-bezier(.34,1.56,.64,1)) both; transform: scaleY(0); position: relative; } #page-vencimientos .v-day-bar-count { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; font-weight: 700; color: rgba(26,20,16,.55); opacity: 0; animation: lx-fade-in .28s ease forwards; } #page-vencimientos .v-day-label { font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,20,16,.32); white-space: nowrap; } .lx-modal .lx-fg > label .lx-req, .pe-cart-stock.pe-stock-warn, #page-vencimientos .v-day-label.v-today { color: #E8663A; font-weight: 700; } /* day-bar stagger */ #page-vencimientos .v-day-col:nth-child(1) .v-day-bar { animation-delay: 720ms; } #page-vencimientos .v-day-col:nth-child(2) .v-day-bar { animation-delay: 750ms; } #page-vencimientos .v-day-col:nth-child(3) .v-day-bar { animation-delay: 780ms; } #page-vencimientos .v-day-col:nth-child(4) .v-day-bar { animation-delay: 810ms; } #page-vencimientos .v-day-col:nth-child(5) .v-day-bar { animation-delay: 840ms; } #page-vencimientos .v-day-col:nth-child(6) .v-day-bar { animation-delay: 870ms; } #page-vencimientos .v-day-col:nth-child(7) .v-day-bar { animation-delay: 900ms; } #page-vencimientos .v-day-col:nth-child(1) .v-day-bar-count { animation-delay: 920ms; } #page-vencimientos .v-day-col:nth-child(2) .v-day-bar-count { animation-delay: 950ms; } #page-vencimientos .v-day-col:nth-child(3) .v-day-bar-count { animation-delay: 980ms; } #page-vencimientos .v-day-col:nth-child(4) .v-day-bar-count { animation-delay: 1010ms; } #page-vencimientos .v-day-col:nth-child(5) .v-day-bar-count { animation-delay: 1040ms; } #page-vencimientos .v-day-col:nth-child(6) .v-day-bar-count { animation-delay: 1070ms; } #page-vencimientos .v-day-col:nth-child(7) .v-day-bar-count { animation-delay: 1100ms; } /* ── Progress Ring (Sin Controlar) ── */ #page-vencimientos .v-control-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; } #page-vencimientos .v-ring-wrap { position: relative; width: 52px; height: 52px; flex-shrink: 0; } #page-vencimientos .v-ring-wrap svg { width: 52px; height: 52px; transform: rotate(-90deg); } #page-vencimientos .v-ring-bg { fill: none; stroke: rgba(26,20,16,.06); stroke-width: 5; } #page-vencimientos .v-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 138.23; stroke-dashoffset: 138.23; transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1); } #page-vencimientos .v-ring-ok { stroke: #22A55A; } #page-vencimientos .v-ring-amber { stroke: #D4882A; } #page-vencimientos .v-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #1A1410; } #page-vencimientos .v-control-detail { flex: 1; display: flex; flex-direction: column; gap: 3px; } #page-vencimientos .v-control-label { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: rgba(26,20,16,.55); } #loc-label, #page-vencimientos .v-control-label strong { color: #1A1410; font-weight: 700; } .notif-item[data-tipo="cobranza"] .notif-item-eyebrow, .notif-item[data-tipo="stock"] .notif-item-eyebrow, .lp2-caps svg, #page-vencimientos .v-ctrl-warn strong { color: #D4882A; } /* ── Sin Controlar Chips ── */ .av-kpis, #page-vencimientos .v-nocontrol-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } #page-vencimientos .v3-sc-chip { letter-spacing: 0.005em; max-width: 100%; animation: lx-fade-in var(--lx-d-normal) var(--lx-curve-enter) both; animation-delay: calc(900ms + var(--lx-stagger-tight) * var(--i, 0)); display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(212,136,42,.06); border: 1px solid rgba(212,136,42,.16); border-radius: 6px; font-family: var(--sans); font-size: 11px; font-weight: 500; color: #9a6520; cursor: pointer; transition: all .14s ease; } #page-vencimientos .v3-sc-chip:hover { transform: translateY(-1px); background: rgba(212,136,42,.12); border-color: rgba(212,136,42,.28); } #page-vencimientos .v3-sc-chip-diff { letter-spacing: 0.02em; padding: 2px 6px; border-radius: 4px; background: rgba(26,20,16,.06); color: var(--v3-ink-2); font-family: var(--mono); font-size: 10px; font-weight: 700; } /* ── Table Meta ── */ #page-vencimientos .v-table-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 560ms both; } #page-vencimientos .v-table-count { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(26,20,16,.42); } /* ── Table Container ── */ #page-vencimientos .v-table-container { background: #FFFFFF; border: 1px solid rgba(191,180,170,.22); border-radius: 9px; box-shadow: 0 1px 2px rgba(32,24,18,.02), 0 8px 24px rgba(32,24,18,.04); overflow: hidden; animation: lx-fade-up var(--lx-d-slow,420ms) var(--lx-curve-enter,cubic-bezier(.16,1,.3,1)) 560ms both; } #page-vencimientos .v-table-scroll { max-height: calc(100vh - 180px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(26,20,16,.12) transparent; } #mov-inspector .mvd-doc::-webkit-scrollbar, #page-clientes .cd-body::-webkit-scrollbar, #page-vencimientos .v-table-scroll::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track, #page-cierre .cc3-ventas-scroll::-webkit-scrollbar-track, .sb2-scroll::-webkit-scrollbar-track, .cm2-col-right .cm2-cart-list::-webkit-scrollbar-track, #page-vencimientos .v-table-scroll::-webkit-scrollbar-track { background: transparent; } #page-vencimientos .v-table-scroll::-webkit-scrollbar-thumb { background: rgba(26,20,16,.12); border-radius: 3px; } /* ── Table ── */ table, #page-vencimientos .vc2-table, #page-vencimientos .v-table { border-collapse: collapse; width: 100%; } #page-vencimientos .v-table thead th { background: #f6f4f1; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(26,20,16,.42); padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(26,20,16,.06); position: sticky; top: 0; z-index: 2; } /* ── Group Rows ── */ #page-vencimientos .v-group-row td { padding: 10px 16px 8px; border-bottom: 1px solid rgba(26,20,16,.06); background: #fdfcfb; } #page-cierre .cc3-arq-retiros-form .cc-retiro-row, #page-vencimientos .v-group-label { align-items: center; display: flex; gap: 8px; } .cc2-detail-desglose-row .cc2-dot, .cli-tier-dot, .mv-pago-dot, .v3-dd-opt-dot, .cd-hero-tier-dot, #page-vencimientos .v-group-dot { border-radius: 50%; flex-shrink: 0; height: 6px; width: 6px; } #page-vencimientos .v-gdot-danger { background: #E05252; box-shadow: 0 0 0 3px rgba(224,82,82,.12); } #page-vencimientos .v-gdot-amber { background: #D4882A; box-shadow: 0 0 0 3px rgba(212,136,42,.12); } #page-vencimientos .v-gdot-blue { background: #5B7FD6; box-shadow: 0 0 0 3px rgba(91,127,214,.12); } #page-vencimientos .v-gdot-neutral { background: rgba(26,20,16,.22); box-shadow: 0 0 0 3px rgba(26,20,16,.06); } #page-vencimientos .v-gdot-green { background: #22A55A; box-shadow: 0 0 0 3px rgba(34,165,90,.12); } #page-vencimientos .v-group-name { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(26,20,16,.55); } #page-vencimientos .v-group-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } #page-vencimientos .v-resolve-all { display: inline-flex; align-items: center; gap: 5px; background: rgba(224,82,82,.06); border: 1px solid rgba(224,82,82,.18); border-radius: 6px; padding: 4px 10px; font-family: var(--sans); font-size: 11px; font-weight: 600; color: #E05252; cursor: pointer; transition: all .14s ease; } #page-vencimientos .v-resolve-all:hover { background: rgba(224,82,82,.12); border-color: rgba(224,82,82,.30); } #page-vencimientos .v-group-chevron { color: rgba(26,20,16,.32); cursor: pointer; transition: transform .28s cubic-bezier(.16,1,.3,1); display: flex; } /* ── Data Rows ── */ #page-vencimientos .v-table tbody tr.v-row { transition: background .14s ease; } #page-vencimientos .v-table td { padding: 13px 16px; border-bottom: 1px solid rgba(26,20,16,.05); font-family: var(--sans); font-size: 13px; font-weight: 500; vertical-align: middle; } #page-clientes .cli-tbl thead th.right, #page-clientes .cli-pts-cell, #page-movimientos .mv-table thead th:nth-last-child(2), .co-bd-right, .lxg-table .lxg-td-right, #page-vencimientos .v-table thead th:last-child, #page-vencimientos .v-table td:last-child { text-align: right; } /* Product cell */ #page-empresas .emp-card-stat, .cm2-foot-summary, #page-vencimientos .v-prod { display: flex; flex-direction: column; gap: 1px; } #page-stock .sk-table-wrap .stock-price, #page-vencimientos .v-prod-name { color: #1A1410; font-size: 13px; font-weight: 600; } #page-vencimientos .v-prod-cat { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .06em; color: rgba(26,20,16,.42); } /* Lote */ #page-vencimientos .v-lote { font-family: var(--mono); font-size: 12px; font-weight: 600; color: rgba(26,20,16,.55); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* Quantity */ #page-vencimientos .v-qty { font-family: var(--serif); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; } /* Date */ #page-vencimientos .v-date { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .03em; color: rgba(26,20,16,.55); } /* Status badge */ #page-vencimientos .v-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } #page-vencimientos .v-badge-danger { background: rgba(224,82,82,.08); border: 1px solid rgba(224,82,82,.20); color: #a83030; } #page-vencimientos .v-badge-danger::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #E05252; } #page-vencimientos .v-badge-amber { background: rgba(212,136,42,.08); border: 1px solid rgba(212,136,42,.20); color: #9a6520; } #page-vencimientos .v-badge-amber::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #D4882A; } #page-vencimientos .v-badge-blue { background: rgba(91,127,214,.08); border: 1px solid rgba(91,127,214,.20); color: #4a6ab8; } /* Local */ #page-vencimientos .v-local { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 5px; border: 1px solid rgba(26,20,16,.08); background: rgba(26,20,16,.05); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: rgba(26,20,16,.55); } .sk-loc.tag-l1, #page-movimientos .mv-local.tag-l1, #page-stock .sk-table-wrap .tag-l1, #page-vencimientos .v-local.tag-l1 { background: var(--c-blue-soft); border-color: var(--c-blue-line); color: var(--c-blue-ink); } #page-stock .sk-table-wrap .tag-l2, #page-vencimientos .v-local.tag-l2 { background: var(--c-plum-soft); border-color: var(--c-plum-line); color: var(--c-plum-ink); } /* ── Hover-only Actions ── */ #page-vencimientos .v-row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity .14s ease; } /* ── "En buen estado" collapsed hint ── */ #page-vencimientos .v-bien-hint { padding: 14px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background .14s ease; border-top: 1px solid rgba(26,20,16,.06); } .pe-cart-table tbody tr:hover td, .emp-pedidos-table tbody tr:hover td, #page-vencimientos .v-table tbody tr.v-row:hover, #page-vencimientos .v-bien-hint:hover { background: rgba(26,20,16,.018); } #page-vencimientos .v-bien-dot { width: 6px; height: 6px; border-radius: 50%; background: #22A55A; box-shadow: 0 0 0 3px rgba(34,165,90,.12); } #page-vencimientos .v-bien-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #1a7a45; } #page-vencimientos .v-group-count, #page-vencimientos .v-bien-count { color: rgba(26,20,16,.32); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .06em; } #page-vencimientos .v-bien-expand { margin-left: auto; font-family: var(--sans); font-size: 11px; color: rgba(26,20,16,.32); display: flex; align-items: center; gap: 4px; } /* ── Empty cell ── */ #page-vencimientos .v-empty-cell { text-align: center; padding: 32px 14px; color: rgba(26,20,16,.42); font-size: 13px; } /* ── v7.27.0 — 2-col → stacked fallback for narrow viewports ── */ @media (max-width: 1100px) { #page-vencimientos .v-layout { flex-direction: column; } #page-vencimientos .v-panel { width: 100%; min-width: 0; position: static; } #page-vencimientos .v-kpis { flex-direction: row; flex-wrap: wrap; } #page-vencimientos .v-kpis .v-kpi { flex: 1 1 220px; min-width: 220px; } } /* ═══════════════════════════════════════════════════════════════════ v7.96.3 · BODY PAGE TITLES — OCULTOS La topbar ya muestra el nombre de cada página (top-title) — los headers editoriales del body son redundantes. Se ocultan eyebrow + h1 + subtitle de cada sección. CTAs y stats inline se preservan. ═══════════════════════════════════════════════════════════════════ */ /* Stock */ [hidden], #sidebar, #sidebar-backdrop, .lx-tb-hidden, .tb-action-zone .mv2-dd-value, .tb-action-zone .v3-dd-value, #page-stock.stock-compact th:nth-child(8), #page-stock.stock-compact td:nth-child(8), #page-stock .table-wrap, #page-stock .ph, .sk-bc, .vc2-breadcrumb, nav.sk-bc, .sk-eyebrow, .vc2-eyebrow, .pr-eyebrow, .co-eyebrow, .sk-title, .vc2-title, .pr-title, .co-title, .sk-subtitle, .vc2-subtitle, .pr-subtitle, .co-subtitle, .mv2-page-head-eyebrow, .v3-eyebrow, .trf-kicker, #page-stock .sk-filter-bar, #page-movimientos:not(.active):not(.leaving), #page-clientes .cli-detail-empty, .tb-notif-btn, .notif-backdrop, .notif-panel, .tb-filter-pills .mv2-active-chips[hidden], .cm2-draft-banner[hidden], .tb-filters-sheet[hidden], .topbar.tb-compact #tb-action-zone:not(.in-sheet), .topbar #tb-filter-pills, .topbar.tb-compact #tb-filter-pills, .topbar.tb-stage-search-narrow #tb-filter-pills, .fp-filters, #page-fidelizacion .fp-card[data-nivel="legado"]::before, #page-stock .sk-eyebrow, #page-stock .sk-title, #page-stock .sk-subtitle, #page-movimientos .mv2-page-head, #page-transferencia .trf-kicker, #page-transferencia .trf-title, #page-transferencia .trf-subtitle, #page-clientes .cli-head-eyebrow, #page-clientes .cli-head-title, #page-vencimientos .v3-eyebrow, #page-vencimientos .v3-title, #page-vencimientos .v3-subtitle, #page-precios .pr-eyebrow, #page-precios .pr-title, #page-precios .pr-subtitle, #page-chat .chat-topbar > div:first-child > h2, #page-chat .chat-topbar > div:first-child > p, #page-empresas .emp-header-eyebrow, #page-empresas .emp-header-title, #page-costos .co-eyebrow, #page-costos .co-title, #page-costos .co-subtitle { display: none !important; } /* Nota: Dashboard `.nd-hero-greeting` (saludo "Buenas noches") y Cierre `.cc4-hero-greeting` ("Cerrando tu turno.") NO son títulos de página sino momentos Identity-First contextuales — se preservan. */ /* ── 1. Meter próximo nivel ── */ .fp-group[data-nivel="selecto"] .fp-group-ico, #page-fidelizacion .fp-leaderboard-row[data-rank="2"] .fp-leaderboard-rank { color: #9C8E7F; } #page-fidelizacion .fp-leaderboard-row[data-rank="1"] .fp-leaderboard-rank { color: #C9A961; } .tb-action-zone .sk-sucursal-wrap:hover .sk-locf-sel, #page-clientes .cd-cline a:hover, .mv-day-label, .sk-bc-link:hover, .mv2-dd-value, .trf-pill:hover { color: #1A1410; } /* ── Section header genérico (eyebrow estilo Identity) ── */ .cf-head-tags, .rl-lote-qty, .cm2-field-qty-wrap { align-items: center; display: flex; gap: 6px; } #page-fidelizacion .fp-kpi-meta-dot { background: #E8663A; border-radius: 50%; flex-shrink: 0; height: 5px; width: 5px; } /* ── 2. Beneficios ACTIVOS hoy ── */ .mvd-items, .venc-descartar-opts, .cm2-cart-empty-smart-list, .cm2-prep-field, .ticket-v2-meta, .stk-lotes-list, .fp-dr-checklist { display: flex; flex-direction: column; gap: 6px; } .cm2-search-results > .cm2-search-item:nth-child(3), .cm2-hist-list > .cm2-hist-row:nth-child(3), .cm2-cart-list.is-success > .cm2-item:nth-child(2) { animation-delay: 60ms; } .sound-toggle svg, .sk-act-btn svg, .mv2-search-clr svg, .mv2-export-btn svg, .trf-history-del svg, .trf-history-dev svg, #page-cierre .cc3-pago-filtro svg, #page-cierre .cc3-hist-act svg { height: 13px; width: 13px; } .nota-body, .mvd-item-info, .cli-name-info, .cf-rp-body, .update-text, .dash-tl-body, .pe-emp-sel-info, #page-empresas .emp-card-info, .cd-nv-head-info, .cd-nv-toggle-info, .pdv-head-info, .lxg-modal-head-info, .rl-action-info, .cm2-stage-head-info, .cm2-hist-head-info, .cm2-hist-row-info, .cm2-search-item-info, .cm2-cart-head-info, .cm2-item-id, .cm2-vertodos-info, .cm2-draft-info, .cm2-suggest-head .lxg-eyebrow, #page-empresas .emp-card .emp-card-info, .fp-dr-hero-info { flex: 1; min-width: 0; } /* ── 3. Beneficios DEL NIVEL (colapsable) ── */ .tk-close svg, #tb-primary-zone .v3-btn-add svg, .cm2-hist-row-repeat svg { height: 11px; width: 11px; } .tb-cat-wrapper.is-open .tb-ct-chev, .cc2-row-clickable.is-open .cc2-row-chevron, .mv2-dropdown.open .mv2-dd-chev, .v3-dropdown.is-open .v3-dd-chevron, .rl-manual[open] .rl-manual-chevron, .cm2-stage[data-collapsed="true"] .cm2-collapse-toggle svg, #page-vencimientos .v-group-chevron.v-chev-open { transform: rotate(180deg); } .mv-row-arrow svg, .cc4-hero-delta svg { height: 12px; width: 12px; } .qty-row input, .rl-status-text { flex: 1; } /* ── Variantes por nivel — coloración sutil de la card ── */ /* ── A · Preview de descuento en cada vr-pago-btn ── */ /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .nd-trend-pulse-core, .nd-trend-pulse-halo, .nd-hero-status.open::before, .cc4-hero-status-dot { animation: none !important; } } /* ── Modal "Consumir del lote" — inputs con var(--char) que en dark se mapea a --surface-3 (invisible). Forzar legibles. ── */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.6 — MOBILE CONSOLIDATION BLOCK (≤768px) Fix focal: cierra los bugs responsive detectados en el audit de mobile. No remueve los ~120 @media legacy; los pisa por especificidad/orden. Cobertura: Stock · Movimientos · Costos · Transferencia · Carga Masiva + transversales (body-as-card gutter, tablas con scroll horizontal, tab rows desbordadas, chips wrap). ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Body-as-card: eliminar gutter lateral que dejaba ver el floor ── */ #pages { margin: 4px 4px 8px 4px !important; border-radius: 14px !important; } /* ── Page padding interno más ajustado en mobile ── */ /* ── Tablas con scroll horizontal: hacer el scroll obvio + min-width consistente para que el usuario entienda que hay más columnas ── */ #page-stock .sk-table-wrap, #page-movimientos .mv-table-card, #page-costos .co-table-card, #page-stock .sk-table, #page-movimientos .mv-table, #page-costos .co-table { min-width: 560px; font-size: 12.5px !important; } /* ── COSTOS: los 3 grupos de filtros (sucursal/período/extras) se apilaban en una sola fila y desbordaban con "Mes pas..." cortado. Forzar columna y wrap interno de cada grupo. ── */ #page-costos .co-topbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } #page-costos .co-subnav { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } #page-costos .co-filters-group { width: 100% !important; flex-wrap: wrap !important; gap: 8px !important; } #page-costos .co-filters-group > * { flex-wrap: wrap !important; } #page-costos .co-header { flex-wrap: wrap !important; gap: 12px !important; } /* ── MOVIMIENTOS: la toolbar con filtros sticky abajo encimaba con el chat flotante. Subir el toolbar para que no quede tapado y permitir wrap correcto. ── */ #page-movimientos .mv2-toolbar { flex-wrap: wrap !important; gap: 8px !important; padding-bottom: 12px !important; } #page-movimientos .mv2-toolbar > * { flex-wrap: wrap !important; width: 100% !important; } /* ── STOCK: filter bar y header con wrap; CTA full width ── */ #page-stock .sk-header > * { min-width: 0 !important; } /* ── TRANSFERENCIA: el botón "Confirmar transferencia" se cortaba. Permitir que el texto haga wrap, igualar anchos, full-width row. ── */ #page-transferencia .trf-btn-clear, #page-transferencia .trf-btn-confirm { flex: 1 1 140px !important; min-width: 0 !important; white-space: normal !important; padding-left: 12px !important; padding-right: 12px !important; font-size: 12.5px !important; letter-spacing: .04em !important; } /* ── CARGA MASIVA: el sticky footer "Confirmar carga" tapaba el Historial. Dar safe-area inferior al body para que el último card no quede oculto bajo el footer fixed. Especificidad bumpeada para ganarle al legacy "#pages > .page.section-core". ── */ #pages > #page-carga.cm2.section-core { padding-bottom: 140px !important; } #page-carga .cm2-foot { flex-wrap: wrap !important; gap: 10px !important; padding: 12px 14px !important; } #page-carga .cm2-foot-summary { flex: 1 1 100% !important; min-width: 0 !important; } #page-carga .cm2-foot button[type="submit"], #page-carga .cm2-foot .lxg-btn--prime { flex: 1 1 100% !important; min-width: 0 !important; white-space: normal !important; } /* ── VENCIMIENTOS: filtros sticky abajo no queden tapados por chat ── */ #page-vencimientos .v3-toolbar, #page-vencimientos .v-toolbar { padding-bottom: 12px !important; } /* ── EMPRESAS: filter pills row con wrap ── */ #page-stock .sk-header, #page-stock .sk-filter-bar, #page-empresas .emp-header-stats { flex-wrap: wrap !important; gap: 8px !important; } /* ── Cualquier chip group / pill row del sistema: wrap por defecto ── */ #page-movimientos .mv2-filters, .page-pills-strip, .tb-filter-pills { flex-wrap: wrap !important; gap: 6px !important; } /* ── Hero clocks: bajar tamaño un escalón en phones (≤480) ── */ @media (max-width: 480px) { .nd-hero-clock, .cc4-hero-clock, #pages > .page.active { padding-left: 10px !important; padding-right: 10px !important; } /* Tablas todavía más compactas en phones */ #page-stock .sk-table, #page-movimientos .mv-table, #page-costos .co-table { font-size: 11.5px !important; } } } /* ═══════════════════ END v7.96.6 MOBILE BLOCK ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.7 — DASHBOARD CARDS OVERFLOW FIX - .nd-venta-row tenía un
sin clase wrapeando name+meta, sin min-width:0 → en mobile el nombre con white-space:nowrap NO podía hacer ellipsis y desbordaba. - .nd-mix-row NUNCA tuvo estilos base (solo dark overrides) → los porcentajes se pegaban al texto del nombre de la categoría. - .nd-sb-row / stock-bajo necesita misma protección min-width:0. ═══════════════════════════════════════════════════════════════════════ */ /* ── BASE (todos los viewports) ─────────────────────────────────────── */ /* Wrapper sin clase del .nd-venta-row: forzar contención para que el ellipsis del .nd-venta-name funcione */ .nd-venta-row > div:not([class]), .nd-venta-row > div:nth-child(2) { min-width: 0; overflow: hidden; } /* Base de la legend de categorías — antes no existía */ .nd-mix-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.2; } .nd-mix-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .nd-mix-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(26,20,16,.78); font-weight: 500; } .nd-mix-pct { flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #1A1410; font-variant-numeric: tabular-nums; margin-left: auto; } /* Stock bajo: filas con misma estructura que ranking necesitan min-width */ .nd-sb-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(26,20,16,.06); } .cc2-row-info, .av-main, .trf-col, #page-vencimientos .v3-header-left, .co-suc-kpi, .co-rank-name, .fp-card-body, .fp-action-body, .fp-leaderboard-info, #page-fidelizacion .fp-section-titlebar-left, #page-fidelizacion .fp-action-body, .nd-sb-row > *:first-child { min-width: 0; } .nd-sb-name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: #1A1410; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; } .nd-sb-meta { font-family: var(--mono); font-size: 10.5px; color: rgba(26,20,16,.42); letter-spacing: .02em; margin-top: 2px; } /* ── MOBILE (≤768): ajustes adicionales por espacio ───────────────── */ @media (max-width: 768px) { /* En venta-row: 3-col grid con info expandiendo 2 filas. Pago pill cae debajo del info (col 2). Total queda alineado a la derecha (col 3) ocupando ambas filas para verticalmente centrar. */ .nd-venta-row { grid-template-columns: 32px 1fr auto !important; grid-template-rows: auto auto !important; gap: 4px 10px !important; align-items: start !important; } .nd-venta-row > .nd-venta-avatar { grid-column: 1; grid-row: 1 / span 2; align-self: center; } .nd-venta-row > div:nth-child(2) { grid-column: 2; grid-row: 1; } .nd-venta-row > .nd-pago-pill, .nd-venta-row > .cc2-pago-stack { grid-column: 2; grid-row: 2; margin-top: 2px; font-size: 10.5px !important; justify-self: start; } .nd-venta-row > .nd-venta-total { grid-column: 3; grid-row: 1 / span 2; align-self: center; } .nd-venta-meta { font-size: 10px !important; } /* Mix donut + legend: en mobile apilar (donut arriba, legend abajo) */ .nd-mix-wrap { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } .nd-mix-donut { width: 130px !important; height: 130px !important; align-self: center; } .nd-mix-legend { width: 100%; } /* Ranking: bajar columna num + comprimir spacing */ .nd-rank-row { grid-template-columns: 28px 1fr auto !important; gap: 10px !important; } .nd-rank-num { font-size: 18px !important; } .nd-venta-name, .nd-rank-name { font-size: 12.5px !important; } .nd-venta-row .nd-venta-total, #page-dashboard .nd-venta-total, .nd-rank-row .nd-rank-price, #page-dashboard .nd-rank-price { font-size: 13.5px !important; } /* Chart Ventas del mes: dejar canvas ocupar todo + bajar padding del wrap interno */ #page-dashboard .nd-chart-wrap { padding: 0 !important; margin: 0 -4px !important; } #page-dashboard .nd-chart-wrap canvas { max-width: 100% !important; } } /* ═══════════════════ END v7.96.7 DASHBOARD FIX ═══════════════════ */ /* Bordes inferiores que en legacy son rgba(26,20,16,.06) (línea oscura sobre fondo claro) → en dark deben ser line-soft del sistema */ /* Filas de lotes expandidos (.stock-lotes-row) */ /* ═══════════════════ END v7.96.8 STOCK DARK FIX ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.9 — Mobile body mode para topbar En ≤768 el action-zone (search + selects + CTAs por página) migra a #tb-body-strip dentro de #pages. La topbar queda limpia con solo burger + título. El funnel button queda oculto siempre en mobile porque ya no hace falta (sin sheet). ═══════════════════════════════════════════════════════════════════════ */ /* Strip por defecto invisible (vacío en desktop, contenido en mobile) */ .tb-nav-dropdown::-webkit-scrollbar, #venc-asistente:empty, .stock-lotes-row, .topbar::after, #sidebar::after, .nav-handle, .tb-action-zone:empty, .tb-action-zone .sk-sucursal-wrap > svg:first-child, .modal-head::after, .modal-foot .btn-prime::before, #page-stock .stock-qty-sub, #page-stock .stock-price-sub, #page-stock .stock-next-sub, #page-stock .stock-updated, #page-stock th:nth-child(6), #page-stock td:nth-child(6), #page-stock th:nth-child(8), #page-stock td:nth-child(8), #page-stock.stock-compact .stock-notes, #page-stock.stock-compact .stock-mini-pill:nth-child(n+2), #page-stock > .ph, #page-movimientos .mov-list::before, #page-movimientos .mov-list::after, #page-movimientos .mv2-active-chips[hidden], #page-vencimientos #venc-asistente:empty, #page-cierre .cc-btn-cerrar::before, #page-cierre .cc3-hero-stat:first-child::before, #page-cierre .cc3-action-foot[hidden], #page-cierre .cc3-ventas-foot-fixed:empty, .lx-modal .lx-modal-head::after, #page-empresas .emp-head, .tb-filter-pills:empty, .nd-trend-badge:empty, .empd-act:not(.empd-act--primary):not(:hover) span, .rl-manual-summary::-webkit-details-marker, .cm2-stage--prep[data-collapsed="true"] .cm2-prep-form, .cm2-stage--hist[data-collapsed="true"] .cm2-hist-body, .cm2-stage--cart[data-state="pending"] .cm2-cart-list, #cm2-confirm.is-loading svg, .lp2-pass-wrap.lp2-pass-revealed .lp2-dots, .topbar .tb-filter-pills:empty, .topbar .tb-pills-overflow-pop[hidden], .topbar .tb-filters-btn-count[hidden], .fp-alert[hidden], .fp-card-rail, #page-vencimientos .vc2-table-meta, .tb-body-strip { display: none; } #cf-prod-picker.visible, .sb-venc-dot.visible, .tb-cat-wrapper.is-open .tb-cat-panel, .v3-dropdown.is-open .v3-dd-panel, .lx-modal .lx-fg.has-error .lx-error-msg, #page-fidelizacion.fp.active, .tb-body-strip:not(.is-empty) { display: block; } /* v7.99.37 · ::-ms-reveal / ::-ms-clear (botones de Edge legacy) AISLADOS en su propia regla. Agrupados con otros selectores, Blink invalida toda la lista (un selector inválido descarta la regla entera) y se pierde el display:none de ~22 selectores — entre ellos .vr-emp-pedido-block (cards de Empresa en VR). */ .lp2-pass-field input::-ms-reveal, .lp2-pass-field input::-ms-clear { display: none; } @media (max-width: 768px) { /* Ocultar funnel button siempre — en mobile ya no se usa el sheet */ /* Strip que recibe el action-zone: barra horizontal scrollable al tope de #pages, dentro del padding lateral de cada página. */ .tb-body-strip { display: block; padding: 10px 12px 6px; position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(246, 246, 246, 0.78); border-bottom: 1px solid rgba(38, 38, 38, 0.06); } .tb-action-scroll-inner::-webkit-scrollbar, .trf-route-arrow, #page-cierre .cc3-pago-filtro span:not(:only-child), #page-vencimientos .v3-tb-divider, #page-vencimientos .v3-tb-spacer, .tb-action-zone .sk-sucursal-wrap, .tb-body-strip.is-empty { display: none; } /* Action-zone dentro del strip: layout horizontal con wrap, controles ocupan ancho razonable. */ .tb-body-strip > #tb-action-zone { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 0; position: static !important; transform: none !important; max-width: none !important; } /* El inner scroll legacy: en el strip dejar fluir como flex wrap */ .tb-body-strip #tb-action-scroll-inner, .tb-body-strip .tb-action-scroll-inner { display: flex !important; flex-wrap: wrap !important; width: 100% !important; overflow: visible !important; gap: 8px !important; align-items: center !important; } /* En el strip queremos ver TODOS los filtros (sucursal, categoría, etc.) — la regla legacy line 19355 los ocultaba en mobile cuando vivían en la topbar. En el strip hay espacio sobrado. */ .tb-body-strip .sk-sucursal-wrap, .tb-body-strip .tb-cat-wrapper, .tb-body-strip .tb-sd-wrapper { display: block !important; width: auto !important; } .tb-body-strip .sk-search-wrap { flex: 1 1 100% !important; flex-basis: 100% !important; min-width: 0 !important; } .tb-body-strip .sk-sucursal-wrap, .tb-body-strip .tb-cat-wrapper { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; } /* Search inputs full-width */ .tb-body-strip #tb-action-zone .tb-search, .tb-body-strip #tb-action-zone input[type="search"], .tb-body-strip #tb-action-zone input[type="text"] { flex: 1 1 100%; min-width: 0; width: 100%; } /* Selects y dropdowns: flex 1 con min para legibilidad, wrap a fila */ .tb-body-strip #tb-action-zone select, /* CTAs primarios: full-width o auto según presencia */ .tb-body-strip #tb-action-zone .lxg-btn--prime, .tb-body-strip #tb-action-zone button[type="submit"] { flex: 1 1 auto; } /* Topbar en mobile body mode: limpio, solo burger + título */ .topbar.tb-mobile-body { /* asegurar que no quede el botón filters ocupando espacio */ } .topbar .tb-brand .tb-wagon-logo, .topbar .tb-brand .tb-engine-sep, .topbar .tb-brand .tb-engine, .tb-nav-center, #tb-filters-btn, .tb-filters-btn, .topbar.tb-mobile-body .tb-action-zone { display: none !important; } /* Padding del page activo: el strip ya tiene su padding, dejar room debajo del strip pero sin doble padding-top */ #pages > .page.active { padding-left: 12px !important; padding-right: 12px !important; padding-top: 12px !important; } } /* ═══════════════════ END v7.96.9 MOBILE BODY MODE ═══════════════════ */ /* Rail por defecto (slate) cuando no hay variante */ /* ── Date pill: la base usa rgba semánticos sobre fondo claro. En dark necesitan más opacidad para resaltar sobre surface-3. ── */ /* ── Texto secundario: "Vence en X días" + meta + qty + código + notas ── */ /* ── Acciones (edit/delete) ── */ /* ── Reconciliación pill (.stk-lotes-recon — clase real) ── */ /* ── Footer cross-link "VER EN VENCIMIENTOS →" ── */ /* ═══════════════════ END v7.96.10 STOCK LOTES DARK ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.11 — STOCK · Lotes expandidos: limpiar bordes contenedores Solo el border del .stk-lote-row (la caja del lote) debe verse. - td default tiene border-bottom (línea 8720) - .stock-lotes-cell tiene border-bottom propio (línea 30829) - El td de la fila producto previa tiene border-bottom que pinta como "borde superior" del bloque expandido ═══════════════════════════════════════════════════════════════════════ */ #page-movimientos .mv-table tbody tr.mv-row:last-child, #page-stock .sk-table-wrap tbody tr:last-child td, #page-carga #carga-tabla-content tbody tr:last-child, #page-cierre .cc3-ventas-body > .cc2-row-wrap:last-child > .cc2-row-detail, #page-cierre .cc3-ventas-body > .cc2-row-wrap:last-child > .cc2-row, #page-cierre .cc3-ventas-body > .cc2-row:last-child, #page-fidelizacion .fp-action-card:last-child, #page-fidelizacion .fp-membro-row:last-child, #page-stock tr.stock-lotes-row.open td, #page-stock tr.stock-lotes-row.open .stock-lotes-cell, #page-stock .sk-table-wrap tbody tr.stock-lotes-row.open td, #page-stock tbody tr:not(.stock-lotes-row):has(+ tr.stock-lotes-row.open) td { border-bottom: none !important; } /* ═══════════════════ END v7.96.11 ═══════════════════ */ /* ═══════════════════ END v7.96.12 ═══════════════════ */ /* ═══════════════════ END v7.96.13 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.14 — CLIENTES · Drawer Nueva Venta · qty input wrap (dark) .cd-nv-item-qty-wrap (base bg #fafafa) quedaba blanco en dark. El input interior tiene rule legacy `background: transparent !important` que ganaba al dark override del input — hay que stylear el wrap. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════ END v7.96.14 ═══════════════════ */ /* ─── FEATURE GATE · Acceso bloqueado ─── */ /* ─── TICKET v2 (Identity-First) ─── */ /* ─── CHANGELOG modal ─── */ /* ─── ALERTA VENCIMIENTOS panel ─── */ /* ═══════════════════ END v7.96.15 ═══════════════════ */ .topbar, .topbar *, .tb-nav-dropdown, .tb-nav-dropdown *, #pages, #pages *, .cm2-chip-label { color: inherit; } /* Inputs/selects/textareas dentro del .modal legacy */ /* Changelog modal head/body interior */ /* ═══════════════════ END v7.96.16 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.17 — Overlays backdrop: neutro frío + blur fuerte (dark) Stock / Vencimientos / Clientes / Costos. El token --surface-overlay (rgba(25,25,24,.72)) tenía sutil sesgo cálido. Override a negro neutro con más opacidad + blur 14px. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════ END v7.96.17 ═══════════════════ */ /* ─── SHELL ─── */ /* ─── HEAD ─── */ /* ─── COLUMN dividers ─── */ /* ─── COLUMNA PRODUCTOS (izq) ─── */ /* ─── COLUMNA CARRITO (centro) ─── */ #page-carga #carga-tabla-content tr { border-bottom: 1px solid var(--line-soft) !important; } /* Confirmar venta */ /* ═══════════════════ END v7.96.18 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.19 — VR Dark · Patch: prod names + resumen pago + Dividir medios Faltaban: nombres de productos, .vr-prod-precio, .vr-prod-sku, .vr-resumen-* y todo el bloque .vr-split-* (toggle + section + blocks). ═══════════════════════════════════════════════════════════════════════ */ /* ─── Dividir medios de pago — toggle ─── */ /* ─── Dividir medios de pago — section card ─── */ /* ═══════════════════ END v7.96.19 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.20 — VR Dark · Patch 2: cart qty-field + cliente dropdown .vr-qty-field tenía bg #FFFFFF (cajas blancas alrededor de inputs cart). .vr-cli-dd-name color #1A1410 (invisible en dark). ═══════════════════════════════════════════════════════════════════════ */ /* Cliente search dropdown items */ /* ═══════════════════ END v7.96.20 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.21 — VR Dark · Card cliente con fidelización + saldo en caja Bloques .vr-fid-meter, .vr-fid-active, .vr-fid-level y .vr-fid-section-label sin overrides → ilegible en dark. ═══════════════════════════════════════════════════════════════════════ */ /* Section header (eyebrow + dot) — BENEFICIOS DE NIVEL · SELECTO */ /* Beneficios ACTIVOS hoy */ /* Beneficios DEL NIVEL (colapsable) */ /* ═══════════════════ END v7.96.21 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.22 — VR Dark · Saldo en caja Las reglas en lín 17597-17626 usan .vr-overlay .vr-saldo-line con !important + color #1A1410. Hay que pisarlas con misma especificidad. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════ END v7.96.22 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.23 — VR Dark · Totales visibles + animaciones vibrantes #vr-total y #vr-resumen-total tienen color #1A1410 hardcodeado en base (líns 2932 y 2937) y en .vr-num-done (16273). Overrides + amp animaciones. ═══════════════════════════════════════════════════════════════════════ */ /* Glow ring debajo del total — saturación amp en dark */ /* ═══════════════════ END v7.96.23 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.24 — Cierre de caja · animación de cierre (.cc-close-fx) en dark Toda la card del modal seguía en light: card blanca + textos #262626. El check verde se mantiene (semántico). Hero amount + KPIs + botones adaptados. Backdrop neutro frío + blur amp. ═══════════════════════════════════════════════════════════════════════ */ /* CTA ghost "Continuar" */ /* ═══════════════════ END v7.96.24 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.25 — Cierre de Caja · hero stats + foot último cierre (dark) .cc4-hero-stat-sep ("·") y border-top de .cc4-hero-foot tenían rgba sobre fondo claro → invisibles en dark. Faltaban tb stat b, sub y foot label/meta. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════ END v7.96.25 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.26 — Dashboard · Ventas recientes + Cortes más vendidos (dark) Las reglas legacy (líns 5219 y 5024) usan #page-dashboard .nd-venta-total con `color:#1A1410 !important` → ganaban al dark override. Pills medios pago: el override metió surface-3 bg sin padding/radius → "rectángulo". Volvemos a transparent + solo color de texto + dot. ═══════════════════════════════════════════════════════════════════════ */ /* Pills medio de pago — back to transparent, just text + dot semántico */ /* ═══════════════════ END v7.96.26 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.99.0 — Toggle de tema reactivado Bloque v7.96.27 (display:none !important) removido. El toggle vuelve a ser visible en la topbar y respeta light/dark según localStorage. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.99.1 — Animación intro del toggle (one-shot por máquina) Cuando el usuario entra por primera vez después de la reactivación, el toggle se anuncia con glow ring ember (3 pulsos) + chip flotante "CAMBIÁ EL TEMA →" durante 4s. Se ejecuta una sola vez: localStorage.wagon_theme_intro_seen_v1 = "1" lo desactiva. ═══════════════════════════════════════════════════════════════════════ */ /* Glow ring ember pulsante alrededor del toggle */ @keyframes themeIntroGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); } } /* Chip flotante a la izquierda del toggle */ @keyframes themeIntroChipIn { from { opacity: 0; transform: translateY(-50%) translateX(10px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } @keyframes themeIntroChipOut { from { opacity: 1; transform: translateY(-50%) translateX(0); } to { opacity: 0; transform: translateY(-50%) translateX(10px); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .chat-toast-icon, #page-dashboard #dth.clock-digit-flip, #page-dashboard #dtm.clock-digit-flip { animation: none; opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════════ v7.96.28 — Notificaciones (toasts .tk) · Rediseño dark + nuevas animaciones Filosofía: glassmorphism sutil sobre dark + acento semántico + spring entrance Apple-style. Reemplaza el gradient warm-dark legacy. ═══════════════════════════════════════════════════════════════════════ */ #toast-c { position: fixed; left: auto; transform: none; z-index: var(--z-toast); display: flex; flex-direction: column; pointer-events: none; max-width: calc(100vw - 24px); align-items: stretch; top: 18px !important; right: 18px !important; width: 360px !important; gap: 10px !important; perspective: 1000px; } /* ── BASE TOAST ── */ .tk { gap: 12px; pointer-events: auto !important; position: relative !important; display: grid !important; grid-template-columns: 36px 1fr 26px !important; grid-template-rows: auto auto !important; grid-template-areas: "icon label close" "icon msg msg" !important; align-items: start !important; column-gap: 12px !important; row-gap: 2px !important; padding: 14px 14px 14px 18px !important; background: linear-gradient(158deg, rgba(45, 45, 42, .92) 0%, rgba(31, 31, 30, .94) 100%) !important; border: 1px solid rgba(255, 250, 240, .08) !important; border-radius: 14px !important; backdrop-filter: blur(18px) saturate(1.2) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2) !important; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 -1px 0 rgba(0,0,0,.30) inset, 0 12px 32px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.30) !important; overflow: hidden !important; cursor: default !important; transform-origin: top right; animation: tkInDrop .42s cubic-bezier(.22, .9, .32, 1) both !important; transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease !important; isolation: isolate; } /* Hover: elevación sutil + reveal del rail */ .tk:hover { transform: translateY(-2px) scale(1.012) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.30) inset, 0 20px 44px rgba(0,0,0,.65), 0 8px 20px rgba(0,0,0,.40) !important; border-color: rgba(255, 250, 240, .14) !important; } /* Removing animation */ .tk.removing { animation: tkOutSweep .38s cubic-bezier(.4, 0, .7, 0) forwards !important; pointer-events: none !important; } /* Rail acento izquierdo (semantic) — draw-in vertical */ .tk::before { content: "" !important; position: absolute !important; left: 0; top: 8px; bottom: 8px !important; width: 3px !important; border-radius: 0 3px 3px 0 !important; background: rgba(255, 255, 255, .15) !important; transform-origin: top !important; transform: scaleY(0) !important; animation: tkRailIn .48s .14s cubic-bezier(.16, 1, .3, 1) forwards !important; clip-path: none !important; height: auto !important; z-index: 2; } /* Halo glow del color semántico — sutil aura sobre el borde */ .tk::after { content: "" !important; position: absolute !important; inset: -1px !important; border-radius: 14px !important; pointer-events: none !important; opacity: 0; transition: opacity .3s ease; z-index: 0; } .wagon-logo:hover, .mvd-item:hover .mvd-item-del, #page-stock .sk-kpi-card:hover::before, #page-clientes .cd-prime:hover::before, #page-clientes .cli-row:hover .cli-acts, #page-movimientos .mv2-kpi:hover::before, #stock-tbody tr:hover .sk-row-acts, .cf-msg:hover .cf-msg-actions, .trf-resumen-overlay.open, #page-vencimientos .vc2-table tbody tr.v3-tr:hover .vc2-row-edit, #page-vencimientos .vc2-table tbody tr.v3-tr:hover .vc2-row-del, #page-costos .costo-table tr:hover .costo-edit, #page-costos .costo-table tr:hover .costo-del, #page-costos .costo-table tr:hover .costo-dup, .co-table tbody tr:hover .co-td-acciones-wrap, .lx-modal .lx-btn-prime:hover::before, .lx-confirm-ok:hover::before, .pp-modo-btn.active svg, .cli-tipo-btn.active svg, #page-empresas .emp-card:hover .emp-card-quick, .pp-caja-btn.active[data-caja="si"] svg, .pp-caja-btn.active[data-caja="no"] svg, .empd-act:hover svg, .cm2-chip:hover svg, .cm2-suggest-close:hover svg, .cc4-hero-cta:hover::before, .ticket-v2-overlay.is-in, .ticket-v2-btn-prime:hover::before, .tb-filters-sheet.is-open .tb-filters-sheet-backdrop, #page-vencimientos .v-row:hover .v-row-actions, .tk:hover::after { opacity: 1; } /* ── ICON 36px con halo radial semántico ── */ .tk .tk-icon { grid-area: icon !important; width: 36px !important; height: 36px !important; border-radius: 11px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; background: rgba(255, 255, 255, .04) !important; margin-top: 0 !important; animation: tkIconPop .38s .08s cubic-bezier(.22, .9, .32, 1) both !important; } .tk .tk-icon svg { width: 16px !important; height: 16px !important; position: relative !important; z-index: 2 !important; filter: drop-shadow(0 0 6px currentColor); } /* Icon shimmer wave — más sutil */ .tk .tk-icon::after { content: "" !important; position: absolute !important; inset: 0 !important; background-image: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%) !important; background-size: 220% 100% !important; animation: tkIconShimmer .85s .28s ease-out forwards !important; opacity: 0 !important; } /* ── LABEL (eyebrow mono) ── */ .tk .tk-label { grid-area: label !important; font-family: var(--mono) !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, .42) !important; line-height: 1 !important; margin-top: 4px !important; animation: tkLabelIn .42s .18s cubic-bezier(.16, 1, .3, 1) both !important; } /* ── MSG ── */ .tk .tk-msg { grid-area: msg !important; font-family: var(--sans) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: -.005em !important; color: rgba(255, 255, 255, .94) !important; line-height: 1.4 !important; word-break: break-word !important; animation: tkMsgIn .48s .24s cubic-bezier(.16, 1, .3, 1) both !important; } /* ── CLOSE ── */ .tk .tk-close { grid-area: close !important; width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, .06) !important; border-radius: 8px !important; padding: 0 !important; cursor: pointer !important; color: rgba(255, 255, 255, .35) !important; margin-top: 2px !important; transition: color .15s, background .15s, border-color .15s, transform .18s cubic-bezier(.16,1,.3,1) !important; animation: tkCloseIn .4s .30s cubic-bezier(.16, 1, .3, 1) both !important; } .tk .tk-close:hover { color: rgba(255, 255, 255, .95) !important; background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .14) !important; transform: rotate(90deg) scale(1.06) !important; } .tk .tk-close:active { transform: rotate(90deg) scale(.92) !important; } #tb-primary-zone .cli-btn-new svg, .tk .tk-close svg { height: 10px !important; width: 10px !important; } /* ── PROGRESS BAR — más fina + glow sutil ── */ .tk .tk-progress { position: absolute !important; bottom: 0; left: 0; right: 0 !important; height: 2px !important; background: rgba(255, 255, 255, .04) !important; } .tk .tk-progress-bar { height: 100% !important; width: 100% !important; transform-origin: left !important; background: rgba(255, 255, 255, .25) !important; background-image: linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.08) 100%) !important; background-size: 200% 100% !important; animation: tk-progress-run var(--tk-life, 3500ms) .35s linear forwards, tkProgressShimmer 2.2s .8s ease-in-out infinite !important; box-shadow: 0 0 8px currentColor; opacity: .9; } /* ── TIPOS SEMÁNTICOS — colores vibrantes adaptados a dark ── */ .tk.ok::before { background: #34D399 !important; } .tk.ok::after { box-shadow: 0 0 24px rgba(52, 211, 153, .18) inset; } .tk.ok .tk-icon { background: radial-gradient(circle at 30% 30%, rgba(52,211,153,.30) 0%, rgba(52,211,153,.10) 60%, transparent 100%) !important; color: #34D399 !important; } .tk.ok .tk-label { color: rgba(52, 211, 153, .75) !important; } .tk.ok .tk-progress-bar { background: #34D399 !important; background-image: linear-gradient(90deg, #1FAA75 0%, #34D399 50%, #1FAA75 100%) !important; color: #34D399; } .tk.er::before { background: #FF6464 !important; } .tk.er::after { box-shadow: 0 0 24px rgba(255, 100, 100, .20) inset; } .tk.er .tk-icon { background: radial-gradient(circle at 30% 30%, rgba(255,100,100,.30) 0%, rgba(255,100,100,.10) 60%, transparent 100%) !important; color: #FF6464 !important; } .tk.er .tk-label { color: rgba(255, 100, 100, .80) !important; } .tk.er .tk-progress-bar { background: #FF6464 !important; background-image: linear-gradient(90deg, #C84343 0%, #FF6464 50%, #C84343 100%) !important; color: #FF6464; } .tk.wn::before { background: #F0B84A !important; } .tk.wn::after { box-shadow: 0 0 24px rgba(240, 184, 74, .18) inset; } .tk.wn .tk-icon { background: radial-gradient(circle at 30% 30%, rgba(240,184,74,.32) 0%, rgba(240,184,74,.10) 60%, transparent 100%) !important; color: #F0B84A !important; } .tk.wn .tk-label { color: rgba(240, 184, 74, .80) !important; } .tk.wn .tk-progress-bar { background: #F0B84A !important; background-image: linear-gradient(90deg, #B68530 0%, #F0B84A 50%, #B68530 100%) !important; color: #F0B84A; } .tk.inf::before { background: #6DB5FF !important; } .tk.inf::after { box-shadow: 0 0 24px rgba(109, 181, 255, .18) inset; } .tk.inf .tk-icon { background: radial-gradient(circle at 30% 30%, rgba(109,181,255,.30) 0%, rgba(109,181,255,.10) 60%, transparent 100%) !important; color: #6DB5FF !important; } .tk.inf .tk-label { color: rgba(109, 181, 255, .75) !important; } .tk.inf .tk-progress-bar { background: #6DB5FF !important; background-image: linear-gradient(90deg, #4A8AC8 0%, #6DB5FF 50%, #4A8AC8 100%) !important; color: #6DB5FF; } /* ── KEYFRAMES NUEVOS ── */ @keyframes tkInDrop { 0% { opacity: 0; transform: translateY(-10px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes tkOutSweep { 0% { opacity: 1; transform: translateX(0) scale(1); max-height: 200px; margin-bottom: 10px; } 60% { opacity: 0; transform: translateX(80px) scale(.92); } 100% { opacity: 0; transform: translateX(80px) scale(.88); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } } @keyframes tkRailIn { 0% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } } @keyframes tkIconPop { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } } @keyframes tkIconShimmer { 0% { opacity: 0; background-position: -50% 0; } 30% { opacity: 1; } 100% { opacity: 0; background-position: 150% 0; } } @keyframes tkLabelIn { 0% { opacity: 0; transform: translateY(-2px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes tkMsgIn { 0% { opacity: 0; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes tkCloseIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tkProgressShimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 200% 0; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .tk, .tk *, .tk::before, .tk::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ═══════════════════ END v7.96.28 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.29 — Login · dots de password visibles en dark .lp2-dot tenía bg #262626 hardcoded → invisible sobre surface-2. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════ END v7.96.29 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.30 — Login · focus password sin halo ember La regla base (lín 28721) cambia bg a #fff + border ember al hacer focus. En dark eso flasheaba la card a blanco y dibujaba un rect ember interno. Override: focus mantiene surface-2 + border transparente (sin highlight). ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════ END v7.96.30 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ v7.96.31 — Cierre de Caja · Card "Nota del turno" (dark) .cc3-anatomy-sub-sm color rgba(26,20,16,.55) → invisible. .cc3-nota-input texto + fondo + border en light tones → invisible. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════ END v7.96.31 ═══════════════════ */ /* ═══════════════════ v7.98.0 · Foto producto (Firebase Storage) ═══════════════════ */ .s-foto-zone { border: 1px dashed var(--line-strong, rgba(38,38,38,.15)); background: rgba(38,38,38,.025); border-radius: 11px; padding: 18px; text-align: center; cursor: pointer; transition: border-color .22s ease, background .22s ease; min-height: 90px; display: flex; align-items: center; justify-content: center; } .s-foto-zone.is-dragover { border-color: var(--c-ember, #E8663A); background: var(--c-ember-soft, rgba(232,102,58,.10)); } .s-foto-empty { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .s-foto-hint { font-size: 13px; color: rgba(38,38,38,.55); } .s-foto-btn { background: transparent; border: 1px solid rgba(38,38,38,.18); padding: 7px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink, #262626); cursor: pointer; transition: border-color .18s ease, background .18s ease; } .s-foto-btn:hover { border-color: var(--c-ember, #E8663A); background: var(--c-ember-soft, rgba(232,102,58,.08)); } #page-stock .sk-kpi-card.k-critico .sk-kpi-num, #page-movimientos .mv2-kpi.k-critico .mv2-kpi-num, .s-foto-preview { display: inline-block; position: relative; } .s-foto-preview img { max-width: 180px; max-height: 180px; border-radius: 8px; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .s-foto-remove { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-red, #E05252); color: #fff; border: 2px solid #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .cm2-search-item:hover .cm2-search-item-add, .s-foto-remove:hover { transform: scale(1.08); } /* v7.99.21 · Switch inline dentro de .lx-fg — variante compacta. El .lx-switch-row base está diseñado para footer ancho. Cuando vive dentro de un .lx-fg de un grid de modal, .lx-modal .lx-fg > label le pisa font/uppercase/letter-spacing. Esta variante neutraliza eso y reduce padding/typescale para integrarse al campo padre. */ .lx-modal .lx-fg > .lx-switch-row.lx-switch-row--inline { margin-top: 8px; padding: 8px 11px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #3a3128; gap: 8px; } .lx-modal .lx-fg > .lx-switch-row.lx-switch-row--inline .lx-switch-tag { font-size: 8.5px; padding: 2px 6px; } /* v7.99.22 · Modal body layout 2 cols (main + aside). Aprovecha el ancho de .lx-modal-wide para no apilar contenido en una columna larga. El aside queda sticky relativo al body scrollable, manteniendo la foto/preview a la vista mientras scrolleás los datos. */ .lx-modal .lx-modal-body.lx-modal-body--2col { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 0 24px; align-items: start; } .lx-modal .sk-modal-main { min-width: 0; } .lx-modal .sk-modal-aside { position: sticky; top: 6px; align-self: start; padding-top: 26px; padding-left: 22px; border-left: 1px solid rgba(26,20,16,.08); display: flex; flex-direction: column; gap: 10px; } .lx-modal .sk-aside-label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #766960; } .lx-modal .sk-aside-hint { font-family: var(--sans); font-size: 11px; color: rgba(38,38,38,.55); line-height: 1.4; } /* v8.5.17 · Botón "Sincronizar fotos entre locales" + su sub-hint */ .lx-modal .sk-aside-hint--sub { font-size: 10.5px; color: rgba(38,38,38,.42); } .lx-modal .sk-foto-sync { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0; padding: 8px 12px; border: 1px solid rgba(38,38,38,.14); border-radius: 9px; background: transparent; color: rgba(38,38,38,.72); font-family: var(--sans); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .lx-modal .sk-foto-sync:hover { background: rgba(240,83,30,.06); border-color: rgba(240,83,30,.32); color: var(--vr2-ember); } .lx-modal .sk-foto-sync svg { flex-shrink: 0; } .lx-modal .s-foto-zone--hero { min-height: 220px; flex-direction: column; gap: 12px; padding: 22px 14px; } .lx-modal .s-foto-zone--hero .s-foto-preview img { max-width: 100%; max-height: 200px; } .lx-modal .s-foto-zone--hero .s-foto-empty { flex-direction: column; gap: 12px; text-align: center; } /* Mobile/tablet: stack vertical, aside abajo */ @media (max-width: 720px) { .lx-modal .lx-modal-body.lx-modal-body--2col { grid-template-columns: 1fr; } .lx-modal .sk-modal-aside { position: static; border-left: none; border-top: 1px solid rgba(26,20,16,.08); padding-left: 0; padding-top: 18px; margin-top: 8px; } } /* v7.99.22 ·
colapsable dentro de modales (.lx-collapse). Usado en m-cliente Empresa para esconder los 7 campos opcionales (Fantasía, Contacto, Dirección, Descuento, Límite) hasta que el usuario los necesite. Auto-abre en edit si tienen valores. */ .lx-modal .lx-collapse { margin-top: 16px; border-top: 1px solid rgba(26,20,16,.06); padding-top: 6px; } .lx-modal .lx-collapse-sum { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #3a3128; user-select: none; padding: 10px 4px; border-radius: 6px; transition: background .16s ease; } .lx-modal .lx-collapse-sum:hover { background: rgba(26,20,16,.03); } .lx-modal .lx-collapse-sum::-webkit-details-marker { display: none; } .lx-modal .lx-collapse-sum > svg { transition: transform .22s ease; color: #766960; flex-shrink: 0; } .lx-modal .lx-collapse[open] > .lx-collapse-sum > svg { transform: rotate(-180deg); } .lx-modal .lx-collapse-sum > em { margin-left: auto; font-style: normal; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(38,38,38,.5); } .lx-modal .lx-collapse-grid { margin-top: 14px; animation: lxCollapseIn .26s cubic-bezier(.16,1,.3,1); } @keyframes lxCollapseIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* v7.99.23 · m-pago-empresa — tabs horizontales compactos para modo de aplicación. Reemplaza los 3 botones grandes apilados verticalmente (.pp-modo-toggle) por un row segmentado que ocupa menos altura y es más fácil de escanear. */ .lx-modal .pp-mode-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(26,20,16,.04); border-radius: 10px; } .lx-modal .pp-mode-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; background: transparent; border: none; border-radius: 7px; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 500; color: rgba(38,38,38,.62); transition: background .14s ease, color .14s ease, box-shadow .14s ease; min-width: 0; } .lx-modal .pp-mode-tab svg { flex-shrink: 0; color: currentColor; opacity: .8; } .lx-modal .pp-mode-tab > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lx-modal .pp-mode-tab:hover { background: rgba(26,20,16,.04); color: #262626; } .lx-modal .pp-mode-tab.active { background: #fff; color: #262626; font-weight: 600; box-shadow: 0 1px 3px rgba(26,20,16,.10), 0 0 0 1px rgba(26,20,16,.06); } .lx-modal .pp-mode-tab.active svg { opacity: 1; } .lx-modal .pp-mode-hint { margin-top: 10px; font-family: var(--sans); font-size: 11.5px; color: rgba(38,38,38,.55); line-height: 1.4; } /* v7.99.23 · m-pedido-empresa — hint contextual del descuento heredado. Cuando el valor es el estándar de la empresa: hint ember sutil. Cuando difiere (modificado manual): hint ámbar para destacar el cambio. */ .lx-modal .pe-desc-hint--inherited { color: var(--c-ember-ink, #B84420); font-weight: 500; } .lx-modal .pe-desc-hint--inherited::before { content: "● "; color: var(--c-ember, #E8663A); font-size: 9px; vertical-align: middle; margin-right: 2px; } .lx-modal .pe-desc-hint--modificado { color: var(--c-amber-ink, #9A6200); font-weight: 500; } .lx-modal .pe-desc-hint--modificado::before { content: "✎ "; color: var(--c-amber, #D4882A); margin-right: 4px; } /* v7.99.23 · m-vencimiento — panel inline con lotes activos del producto. Evita que el empleado duplique lotes accidentalmente. Se muestra al seleccionar producto/local; auto-oculta si no hay lotes activos. */ .lx-modal .ve-lotes-warn { margin-top: 10px; padding: 10px 12px; background: var(--c-amber-soft, rgba(212,136,42,.10)); border: 1px solid var(--c-amber-line, rgba(212,136,42,.25)); border-radius: 9px; animation: lxCollapseIn .22s cubic-bezier(.16,1,.3,1); } .lx-modal .ve-lotes-warn .ve-lotes-head { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; color: var(--c-amber-ink, #9A6200); font-weight: 500; line-height: 1.4; } .lx-modal .ve-lotes-warn .ve-lotes-head svg { flex-shrink: 0; color: var(--c-amber, #D4882A); } .lx-modal .ve-lotes-warn .ve-lotes-head strong { font-weight: 700; } .lx-modal .ve-lotes-warn .ve-lotes-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .lx-modal .ve-lotes-warn .ve-lotes-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--mono); font-size: 11px; color: rgba(38,38,38,.72); border-top: 1px dashed rgba(212,136,42,.18); } .lx-modal .ve-lotes-warn .ve-lotes-list li:first-child { border-top: none; } .lx-modal .ve-lotes-warn .ve-lotes-list strong { font-weight: 700; color: #262626; text-transform: uppercase; letter-spacing: .04em; } .lx-modal .ve-lotes-warn .ve-lotes-list em { font-style: normal; font-weight: 500; color: rgba(38,38,38,.55); } .lx-modal .ve-lotes-warn .ve-lotes-list .ve-lote-warn { color: var(--c-red, #E05252); font-weight: 600; } .lx-modal .ve-lotes-warn .ve-lotes-list .ve-lote-soon { color: var(--c-amber, #D4882A); font-weight: 600; } .lx-modal .ve-lotes-warn .ve-lotes-list .ve-lote-qty { margin-left: auto; color: #262626; font-weight: 600; } /* v7.99.25 perf · Categoría A — Animaciones de navegación neutralizadas. En lugar de tocar cada selector que las usa (40+), redefinimos las keyframes problemáticas para que sean instantáneas (from/to = estado final). El selector original mantiene su `animation: ...` declarada pero ya no hay diferencia visible entre el primer y último frame. No afecta keyframes funcionales (blink, pulse, sweep, glow) ni del sistema (modal-in/out, badge-pulse, etc.) — esas mantienen su nombre. Beneficio: page switch ~16ms vs ~500ms percepción anterior. */ /* v7.99.27 · Switch de página: page-enter restaurado a fade real (opacity 0→1, 140ms). page-leave se mantiene no-op (la página vieja desaparece sincrónicamente sin animar). */ @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes page-leave { from, to { opacity: 1; transform: none; } } /* Reduced motion: desactivar fade de página (respeta preferencia del usuario) */ @media (prefers-reduced-motion: reduce) { .page.active { animation: none !important; } } /* lx-fade-in / lx-fade-up: stagger de hijos en Vencimientos y otros */ @keyframes lx-fade-in { from, to { opacity: 1; } } @keyframes lx-fade-up { from, to { opacity: 1; transform: none; } } /* Dashboard hero: fade-in/up del reloj/saludo/status (mantiene blink/pulse/caret) */ @keyframes ndHeroFadeIn { from, to { opacity: 1; } } @keyframes ndHeroFadeUp { from, to { opacity: 1; transform: none; } } /* Cierre hero: fade-in/up (mantiene blink/pulse/pulseWarn) */ @keyframes ccHeroFadeIn { from, to { opacity: 1; } } @keyframes ccHeroFadeUp { from, to { opacity: 1; transform: none; } } /* Carga masiva: fade-up del stage on enter (mantiene cm2TagPop spring del tag) */ @keyframes cm2FadeUp { from, to { opacity: 1; transform: none; } } @keyframes cm2FadeDown { from, to { opacity: 1; transform: none; } } @keyframes cm2FadeRight { from, to { opacity: 1; transform: none; } } /* v7.99.31 · Banner offline visible cuando se pierde conexión a Firestore. Antes solo cambiaba un dot interno (#rt-dot). El sistema sigue funcionando gracias a persistentLocalCache (v7.99.10) pero el empleado no se enteraba. Tono ámbar canónico (--c-amber-*). Slide-down desde el top con easing oficial del sistema. Pointer-events: none en estado oculto para no bloquear. No se muestra en modo "demo" — solo cuando setRT(false, "offline"). */ .lx-offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; background: linear-gradient(180deg, #FBF4E8 0%, #F8EBD2 100%); border-bottom: 1px solid var(--c-amber-line, rgba(212, 136, 42, .28)); color: var(--c-amber-ink, #9A6200); box-shadow: 0 2px 12px rgba(212, 136, 42, .14); transform: translateY(-100%); opacity: 0; transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .2s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .lx-offline-banner[hidden] { display: none; } .lx-offline-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .lx-offline-banner-inner { max-width: 1200px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 12px; } .lx-offline-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(212, 136, 42, .14); border-radius: 9px; flex-shrink: 0; color: var(--c-amber, #D4882A); } .lx-offline-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lx-offline-title { font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; color: var(--c-amber-ink, #9A6200); } .lx-offline-sub { font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11.5px; font-weight: 400; line-height: 1.3; color: rgba(154, 98, 0, .82); } @media (prefers-reduced-motion: reduce) { .lx-offline-banner { transition: none; } } /* v7.99.32 · Login Identity Focus animation Reemplaza la animación legacy "Ingresando" + dots wave dentro del botón por una pantalla focus: avatar protagonista al centro, ring de progreso REAL (no spinner infinito) que se llena en stages, flash verde + checkmark al éxito, cross-fade al app. Coherente con el patrón Identity-First del sistema. */ /* Al hacer is-loading: identity bar, secciones del stage (pick + auth) y footer se desvanecen con un lift mínimo. El overlay queda como única superficie visible. */ #login-screen.lp2.is-loading .lp2-identity, #login-screen.lp2.is-loading .lp2-stage > section, #login-screen.lp2.is-loading .lp2-foot { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 220ms cubic-bezier(.16, 1, .3, 1), transform 220ms cubic-bezier(.16, 1, .3, 1); } .lp2-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 5; transition: opacity 260ms cubic-bezier(.16, 1, .3, 1), transform 360ms cubic-bezier(.16, 1, .3, 1); } .lp2-loading-overlay[hidden] { display: none; } .lp2-loading-overlay.is-active { opacity: 1; pointer-events: auto; } .lp2-loading-overlay.is-leaving { opacity: 0; transform: translateY(-22px); } .lp2-loading-stage { display: flex; flex-direction: column; align-items: center; gap: 28px; } .lp2-loading-avatar-wrap { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; } /* SVG ring posicionado absoluto sobre el avatar */ .lp2-loading-ring { position: absolute; inset: 0; width: 140px; height: 140px; transform: rotate(-90deg); transform-origin: 50% 50%; } .lp2-loading-ring-track { fill: none; stroke: rgba(38, 38, 38, .06); stroke-width: 3; } .lp2-loading-ring-bar { fill: none; stroke: var(--c-ember, #E8663A); stroke-width: 3; stroke-linecap: round; /* Perímetro = 2 * π * r (r=46) ≈ 289.03 */ stroke-dasharray: 289.03; stroke-dashoffset: 289.03; transition: stroke-dashoffset 360ms cubic-bezier(.16, 1, .3, 1), stroke 240ms ease-out, filter 240ms ease-out; } /* Stage 1: 0 → 30% rápido (220ms) — feedback inmediato */ .lp2-loading-overlay.is-stage-1 .lp2-loading-ring-bar { stroke-dashoffset: 202.32; transition-duration: 220ms; } /* Stage 2: 30 → 70% más despacio (700ms) — esperando Firestore */ .lp2-loading-overlay.is-stage-2 .lp2-loading-ring-bar { stroke-dashoffset: 86.71; transition-duration: 700ms; } /* Stage 3: 70 → 100% (360ms) — tryFB() resolvió */ .lp2-loading-overlay.is-stage-3 .lp2-loading-ring-bar { stroke-dashoffset: 0; transition-duration: 360ms; } .lp2-loading-overlay.is-success .lp2-loading-ring-bar { stroke: var(--c-green, #22A55A); filter: drop-shadow(0 0 4px rgba(34, 165, 90, .35)); } .lp2-loading-overlay.is-error .lp2-loading-ring-bar { stroke: var(--c-red, #E05252); stroke-dashoffset: 0; } /* Avatar grande dentro del overlay: hereda el gradient ember + shadow, pero añade transición coordinada con el estado de éxito (sombra cambia a verde, inicial se desvanece para dar paso al checkmark). */ .lp2-loading-avatar.lp2-avatar-circle--lg { position: relative; transition: color 200ms ease-out, box-shadow 360ms cubic-bezier(.16, 1, .3, 1), transform 380ms cubic-bezier(.34, 1.56, .64, 1); will-change: transform; } .lp2-loading-overlay.is-success .lp2-loading-avatar { color: transparent; box-shadow: 0 4px 18px rgba(34, 165, 90, .38), inset 0 1px 0 rgba(255, 255, 255, .18); transform: scale(1.04); } .lp2-loading-overlay.is-error .lp2-loading-avatar { animation: lp2LoadingShake .36s cubic-bezier(.4, 0, .6, 1); } /* Checkmark superpuesto al avatar — aparece solo en is-success. Stroke blanco para contrastar con el gradient verde de la sombra. */ .lp2-loading-check { position: absolute; width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.55); transition: opacity 260ms cubic-bezier(.34, 1.56, .64, 1), transform 360ms cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; } .lp2-loading-overlay.is-success .lp2-loading-check { opacity: 1; transform: scale(1); } /* Caption mono uppercase — fade-in con delay 700ms (después de stage-1). Cambia de tono cuando entra is-slow (Firestore demora >800ms) o is-error (red ink). */ .lp2-loading-caption { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(38, 38, 38, .50); opacity: 0; transform: translateY(4px); transition: opacity 320ms cubic-bezier(.16, 1, .3, 1) 700ms, transform 320ms cubic-bezier(.16, 1, .3, 1) 700ms, color 220ms ease-out; text-align: center; max-width: 280px; line-height: 1.4; } .lp2-loading-overlay.is-active .lp2-loading-caption { opacity: 1; transform: translateY(0); } .lp2-loading-overlay.is-slow .lp2-loading-caption { color: rgba(38, 38, 38, .72); } .lp2-loading-overlay.is-success .lp2-loading-caption { color: var(--c-green-ink, #1A7A45); } .lp2-loading-overlay.is-error .lp2-loading-caption { color: var(--c-red-ink, #A83030); } @keyframes lp2LoadingShake { 0%, 100% { transform: translateX(0) scale(1); } 20% { transform: translateX(-5px) scale(1); } 40% { transform: translateX(5px) scale(1); } 60% { transform: translateX(-3px) scale(1); } 80% { transform: translateX(3px) scale(1); } } /* Cross-fade del app al revelar (acompaña la salida del login) */ #app.is-fading-in { animation: lp2AppFadeIn 320ms cubic-bezier(.16, 1, .3, 1) both; } @keyframes lp2AppFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #login-screen.lp2.is-loading .lp2-identity, #login-screen.lp2.is-loading .lp2-stage > section, #login-screen.lp2.is-loading .lp2-foot, .lp2-loading-overlay, .lp2-loading-ring-bar, .lp2-loading-check, .lp2-loading-caption, .lp2-loading-avatar, #app.is-fading-in { transition: none !important; animation: none !important; } } /* v7.99.33 · Sidebar header — logo WAGON Engine Variante modifier --img del .sb2-brand-logo: el PNG ya viene con su propio fondo gradient ember + hexágono blanco, así que el cuadrado dark #1A1410 sobra (chocaría visualmente con el ember del logo). Neutralizamos el background (incluido el override !important de L29793-29796 que compartía con cc3-comp-bar) y el background dark theme override de L41282. Mantenemos el radius 7px para que el recorte visual sea consistente con el resto de los squares chicos. */ .sb2-brand-logo.sb2-brand-logo--img { background: transparent !important; border-radius: 7px; overflow: hidden; /* Levantar un toque el logo: el PNG tiene un borde transparente de ~10% que de otro modo deja al hexágono blanco más chico. */ padding: 0; } .sb2-brand-img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; } /* v7.99.34 · Editorial Reveal — cascade sutil al ingresar a una página. Sucesora curada de las animaciones de v7.99.25 (lx-fade-in, lx-fade-up, ndHeroFadeUp, ccHeroFadeUp...) que se neutralizaron porque animaban 33 elementos simultáneamente y causaban "sacudida". Esta versión aprende del error con 3 reglas: 1. CAPAS, NO ELEMENTOS. Cada página tiene 3-5 capas visuales (hero, KPI strip, filtros, tabla/lista). Cada capa anima al unísono. 2. STAGGER INTERNO LIMITADO. Strips de 3-4 KPI cards: stagger 40ms entre cada card. Listas/tablas grandes: ANIMAN COMO BLOQUE ÚNICO (no row por row — eso era el problema de v7.99.25). 3. CAP DEL TOTAL. Último delay máximo 340ms + 360ms duration = 700ms hasta "todo asentado". Más allá se siente lento. Mecánica: - Clase TEMPORAL .is-entering (goTo la agrega, la quita a 900ms). - Keyframe DEDICADA lxEditorialReveal — no toca las 9 neutralizadas. - translateY 8px máx (GPU, cero layout reflow). - Easing oficial cubic-bezier(.16, 1, .3, 1). NO scale, rotate ni spring overshoot (anti-pattern del sistema). - prefers-reduced-motion: cero animación. */ @keyframes lxEditorialReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* === Declaración global: TODOS los elementos que animan === */ #page-dashboard.is-entering .nd-hero-clock, #page-dashboard.is-entering .nd-hero-status, #page-dashboard.is-entering .nd-hero-greeting, #page-dashboard.is-entering .nd-hero-summary, #page-dashboard.is-entering .nd-kpi-strip, #page-cierre.is-entering .cc4-hero-clock, #page-cierre.is-entering .cc4-hero-status, #page-cierre.is-entering .cc4-hero-greeting, #page-cierre.is-entering .cc4-hero-total-block, #page-carga.is-entering .cm2-head, #page-carga.is-entering .cm2-grid, #page-fidelizacion.is-entering .fp-page-sub, #page-fidelizacion.is-entering .fp-actions-list, #page-empresas.is-entering .emp-header-eyebrow, #page-empresas.is-entering .emp-header-title, #page-empresas.is-entering .emp-header-stats, #page-stock.is-entering .sk-header, #page-stock.is-entering .sk-kpi-row > .sk-kpi-card, #page-stock.is-entering .sk-results-bar, #page-stock.is-entering .sk-table-wrap, #page-movimientos.is-entering .mv2-page-head, #page-movimientos.is-entering .mv2-kpi-strip > .mv2-kpi, #page-movimientos.is-entering .mv-table-card, #page-vencimientos.is-entering .v3-header, #page-vencimientos.is-entering .v-panel, #page-vencimientos.is-entering .v-main, #page-clientes.is-entering .cli-master-head, #page-clientes.is-entering .cli-list-count, #page-clientes.is-entering .cli-master-list, #page-precios.is-entering .pr-header, #page-precios.is-entering .pr-filter-bar, #page-precios.is-entering #precios-list, #page-costos.is-entering .co-header, #page-costos.is-entering .co-kpi-row-3:not(.co-insights-row) > .co-kpi3, #page-costos.is-entering .co-kpi-row-3.co-insights-row, #page-costos.is-entering .co-card.co-table-card { animation: lxEditorialReveal 360ms cubic-bezier(.16, 1, .3, 1) both; will-change: opacity, transform; } /* === Delays por capa === */ /* 60ms — Capa 1: head/eyebrow/primer elemento del hero */ #page-dashboard.is-entering .nd-hero-clock, #page-cierre.is-entering .cc4-hero-clock, #page-carga.is-entering .cm2-head, #page-fidelizacion.is-entering .fp-page-sub, #page-empresas.is-entering .emp-header-eyebrow, #page-stock.is-entering .sk-header, #page-movimientos.is-entering .mv2-page-head, #page-vencimientos.is-entering .v3-header, #page-clientes.is-entering .cli-master-head, #page-precios.is-entering .pr-header, #page-costos.is-entering .co-header { animation-delay: 60ms; } /* 120ms — Capa 2: status/title + primer card de KPI strip */ #page-dashboard.is-entering .nd-hero-status, #page-cierre.is-entering .cc4-hero-status, #page-empresas.is-entering .emp-header-title, #page-stock.is-entering .sk-kpi-row > .sk-kpi-card:nth-child(1), #page-movimientos.is-entering .mv2-kpi-strip > .mv2-kpi:nth-child(1), #page-costos.is-entering .co-kpi-row-3:not(.co-insights-row) > .co-kpi3:nth-child(1) { animation-delay: 120ms; } /* 160ms — stagger interno (2do card) */ #page-stock.is-entering .sk-kpi-row > .sk-kpi-card:nth-child(2), #page-movimientos.is-entering .mv2-kpi-strip > .mv2-kpi:nth-child(2), #page-costos.is-entering .co-kpi-row-3:not(.co-insights-row) > .co-kpi3:nth-child(2) { animation-delay: 160ms; } /* 180ms — Capa 3: greeting + filtros + 3er card + v-panel + cm2-grid */ #page-dashboard.is-entering .nd-hero-greeting, #page-cierre.is-entering .cc4-hero-greeting, #page-empresas.is-entering .emp-header-stats, #page-carga.is-entering .cm2-grid, #page-vencimientos.is-entering .v-panel, #page-clientes.is-entering .cli-list-count, #page-precios.is-entering .pr-filter-bar, #page-costos.is-entering .co-kpi-row-3:not(.co-insights-row) > .co-kpi3:nth-child(3) { animation-delay: 180ms; } /* 200ms — stagger interno (3er card Stock/Mov) */ #page-stock.is-entering .sk-kpi-row > .sk-kpi-card:nth-child(3), #page-movimientos.is-entering .mv2-kpi-strip > .mv2-kpi:nth-child(3) { animation-delay: 200ms; } /* 240ms — Capa 4: summary, total, 4ta card, v-main, listas como bloque */ #page-dashboard.is-entering .nd-hero-summary, #page-cierre.is-entering .cc4-hero-total-block, #page-fidelizacion.is-entering .fp-actions-list, #page-stock.is-entering .sk-kpi-row > .sk-kpi-card:nth-child(4), #page-movimientos.is-entering .mv2-kpi-strip > .mv2-kpi:nth-child(4), #page-vencimientos.is-entering .v-main, #page-clientes.is-entering .cli-master-list { animation-delay: 240ms; } /* 280ms — Capa 5: insights row Costos + sk-results-bar */ #page-stock.is-entering .sk-results-bar, #page-costos.is-entering .co-kpi-row-3.co-insights-row { animation-delay: 280ms; } /* 300ms — Capa 5: KPI strip Dashboard (bloque) + filtros Stock + lista Precios */ #page-dashboard.is-entering .nd-kpi-strip, #page-precios.is-entering #precios-list { animation-delay: 300ms; } /* 340ms — Capa 6: tablas como bloque único (NO row por row · evita sacudida) */ #page-stock.is-entering .sk-table-wrap, #page-movimientos.is-entering .mv-table-card, #page-costos.is-entering .co-card.co-table-card { animation-delay: 340ms; } @media (prefers-reduced-motion: reduce) { #page-dashboard.is-entering .nd-hero-clock, #page-dashboard.is-entering .nd-hero-status, #page-dashboard.is-entering .nd-hero-greeting, #page-dashboard.is-entering .nd-hero-summary, #page-dashboard.is-entering .nd-kpi-strip, #page-cierre.is-entering .cc4-hero-clock, #page-cierre.is-entering .cc4-hero-status, #page-cierre.is-entering .cc4-hero-greeting, #page-cierre.is-entering .cc4-hero-total-block, #page-carga.is-entering .cm2-head, #page-carga.is-entering .cm2-grid, #page-fidelizacion.is-entering .fp-page-sub, #page-fidelizacion.is-entering .fp-actions-list, #page-empresas.is-entering .emp-header-eyebrow, #page-empresas.is-entering .emp-header-title, #page-empresas.is-entering .emp-header-stats, #page-stock.is-entering .sk-header, #page-stock.is-entering .sk-kpi-row > .sk-kpi-card, #page-stock.is-entering .sk-results-bar, #page-stock.is-entering .sk-table-wrap, #page-movimientos.is-entering .mv2-page-head, #page-movimientos.is-entering .mv2-kpi-strip > .mv2-kpi, #page-movimientos.is-entering .mv-table-card, #page-vencimientos.is-entering .v3-header, #page-vencimientos.is-entering .v-panel, #page-vencimientos.is-entering .v-main, #page-clientes.is-entering .cli-master-head, #page-clientes.is-entering .cli-list-count, #page-clientes.is-entering .cli-master-list, #page-precios.is-entering .pr-header, #page-precios.is-entering .pr-filter-bar, #page-precios.is-entering #precios-list, #page-costos.is-entering .co-header, #page-costos.is-entering .co-kpi-row-3:not(.co-insights-row) > .co-kpi3, #page-costos.is-entering .co-kpi-row-3.co-insights-row, #page-costos.is-entering .co-card.co-table-card { animation: none !important; will-change: auto; } } /* ═══════════════════════════════════════════════════════════════════ v7.99.39 · VENTA RÁPIDA — Panel derecho: UX + contraste + ancho Objetivo: panel más legible y ordenado sin sacar funciones. - Columna un poco más ancha (366px). - Descuentos + Resumen + Método se leen como UN bloque "Pago". - El total grande vive en el centro; el del panel pasa a referencia. - Sube el contraste de labels/placeholders/botones (light y dark). ═══════════════════════════════════════════════════════════════════ */ /* ── Unificar Descuentos + Resumen/Método en una sola tarjeta "Pago" ── */ /* El título "Resumen de pago" es redundante dentro del bloque Pago → se oculta */ /* ── Desglose de descuento aplicado (incluye "PROGRAMA FIDELIZACIÓN") ── */ /* ═══════════════════ END v7.99.39 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════ v7.99.40 · VENTA RÁPIDA — modal a pantalla completa + fidelización compacta - El modal ocupa toda la ventana (sin chrome del sistema detrás). - Puntos y progreso del cliente con menos protagonismo. - "Cliente sin saldo en caja" pasa a texto plano (sin caja). ═══════════════════════════════════════════════════════════════════ */ /* ── 4. "Cliente sin saldo en caja" → texto plano (la caja queda solo si hay saldo) ── */ /* ═══════════════════ END v7.99.40 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════ v7.99.41 · VENTA RÁPIDA — columnas rebalanceadas + cards con contraste + tarjeta de cliente / fidelización compacta y legible ═══════════════════════════════════════════════════════════════════ */ /* ── 3. Fidelización compacta: puntos + progreso en UNA línea + barra fina ── */ /* ═══════════════════ END v7.99.41 ═══════════════════ */ /* ███████████████████████████████████████████████████████████████████ v8.0.0 · VENTA RÁPIDA 2.0 — rediseño completo (2 paneles · clean) Capa nueva vr2-* (markup nuevo, mismos IDs). Dark-first + light. Estética: Stripe/Linear — jerarquía fuerte, aire, ember puntual. ███████████████████████████████████████████████████████████████████ */ /* ── Tokens locales (light por defecto, dark override abajo) ── */ /* ── Overlay + shell (modal flotante, gana al legacy) ── */ /* ════ PANEL DER · CHECKOUT RAIL ════ */ /* Cards padre del rail (Descuento · Método de pago) */ /* Método de pago */ /* Checkout foot (sticky) */ /* Override de la regla base legacy #vr-resumen-total (ID 1,0,0 — Fraunces 26px) que le ganaba a la clase */ /* Hidden helper (legacy class kept by markup) */ /* Scrollbars sutiles (webkit) */ /* ═══════════════════════════════════════════════════════════════════════ v8.1.0 · VENTA RÁPIDA — rediseño desde mock (clean · 2 columnas · ember saturado) Capa fresca tras la purga. Acento ember vibrante. Light + dark. ═══════════════════════════════════════════════════════════════════════ */ .vr2 { --vr2-ember: #F0531E; --vr2-ember-2: #D8431A; --vr2-ember-soft: rgba(240,83,30,.10); --vr2-ember-line: rgba(240,83,30,.30); --vr2-ember-ink: #C2400F; --vr2-floor: #EEF0F3; --vr2-panel: #FFFFFF; --vr2-panel-2: #F7F8FA; --vr2-line: #E6E8EC; --vr2-line-2: #EEF0F3; --vr2-ink: #1F2430; --vr2-ink-2: #5B6472; --vr2-ink-3: #99A1AE; --vr2-green: #16A34A; --vr2-red: #DC2626; --vr2-amber: #D97706; --vr2-control: #F2F4F7; --vr2-control-2: #E9ECF1; --vr2-radius: 18px; --vr2-shadow: 0 24px 64px rgba(20,24,33,.22), 0 6px 16px rgba(20,24,33,.10); --vr2-ease: cubic-bezier(.16,1,.3,1); } /* Overlay flotante + shell */ .vr-overlay.vr2 { position: fixed !important; inset: 0 !important; z-index: 9000; padding: 0 !important; margin: 0 !important; background: rgba(17,20,28,.46) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .vr2 .vr2-shell { width: calc(100% - 64px) !important; height: auto !important; max-width: 1180px !important; max-height: calc(100% - 56px) !important; background: var(--vr2-panel) !important; border-radius: var(--vr2-radius) !important; box-shadow: var(--vr2-shadow) !important; display: flex; flex-direction: column; overflow: hidden; color: var(--vr2-ink); font-family: var(--sans); animation: vr2In .42s var(--vr2-ease) both; } @keyframes vr2In { from { opacity:0; transform: scale(.975) translateY(10px) } to { opacity:1; transform: none } } .vr2 *, .vr2 *::before, .vr2 *::after { box-sizing: border-box; } /* Header */ .vr2 .vr2-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--vr2-line); } .vr2 .vr2-head-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--vr2-ink); margin: 0; } .vr2 .vr2-head-r { display: flex; align-items: center; gap: 14px; } .vr2 .vr2-clock { font-size: 12.5px; font-weight: 500; color: var(--vr2-ink-3); font-variant-numeric: tabular-nums; } .vr2 .vr2-head-close { width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--vr2-ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .vr2 .vr2-head-close:hover { background: var(--vr2-control); color: var(--vr2-ink); } /* Body 2 columnas */ .vr2 .vr2-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .vr2 .vr2-left { min-width: 0; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 26px; border-right: 1px solid var(--vr2-line); scrollbar-width: thin; } .vr2 .vr2-right { min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .vr2 .vr2-right-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 24px; scrollbar-width: thin; } /* Bloques + labels */ .vr2 .vr2-block { display: flex; flex-direction: column; gap: 12px; } .vr2 .vr2-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .vr2 .vr2-label { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--vr2-ink); display: inline-flex; align-items: center; gap: 6px; } .vr2 .vr2-label--ember { color: var(--vr2-ember-ink); } /* Search + select categoría */ .vr2 .vr2-search { position: relative; flex: 1; display: flex; align-items: center; } .vr2 .vr2-search-ico { position: absolute; left: 13px; color: var(--vr2-ink-3); pointer-events: none; } .vr2 .vr2-search-input { width: 100%; height: 42px; box-sizing: border-box; padding: 0 14px 0 38px; border: 1px solid var(--vr2-line); border-radius: 10px; background: var(--vr2-panel); font-family: var(--sans); font-size: 13.5px; color: var(--vr2-ink); outline: none; transition: border-color .15s, box-shadow .15s; } .vr2 .vr2-search-input::placeholder { color: var(--vr2-ink-3); } .vr2 .vr2-search-input:focus { border-color: var(--vr2-ember); box-shadow: 0 0 0 3px var(--vr2-ember-soft); } .vr2 .vr2-prod-controls { display: flex; gap: 10px; align-items: stretch; } .vr2 .vr2-cat-wrap { position: relative; flex-shrink: 0; } .vr2 .vr2-cat-select { height: 42px; box-sizing: border-box; padding: 0 34px 0 14px; border: 1px solid var(--vr2-line); border-radius: 10px; background: var(--vr2-panel); font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--vr2-ink); cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; max-width: 200px; transition: border-color .15s; } .vr2 .vr2-cat-select:focus { border-color: var(--vr2-ember); } .vr2 .vr2-cat-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--vr2-ink-3); pointer-events: none; } .vr2 .vr2-scan { font-size: 12px; color: var(--vr2-ember-ink); font-weight: 600; } /* Toggle CF/Empresa */ .vr2 .vr2-tipo { display: inline-flex; background: var(--vr2-control); border-radius: 9px; padding: 3px; gap: 2px; } .vr2 .vr2-tipo-btn { border: none; background: transparent; padding: 6px 12px; border-radius: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--vr2-ink-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .vr2 .vr2-tipo-btn.is-active { background: var(--vr2-panel); color: var(--vr2-ink); box-shadow: 0 1px 2px rgba(20,24,33,.12); } /* Cliente: pick row + add */ .vr2 .vr2-cli-pick { display: flex; gap: 10px; align-items: stretch; } .vr2 .vr2-cli-search-area { flex: 1; position: relative; min-width: 0; } /* Modo empresa: contenedor de anclaje para que #vr-emp-dropdown (position:absolute, top:100%) caiga bajo el input y no respecto al viewport (bug: aparecía en y~924). */ .vr2 .vr2-emp-search-area { position: relative; min-width: 0; } .vr2 .vr2-cli-add { flex-shrink: 0; width: 46px; border: 1px solid var(--vr2-line); border-radius: 10px; background: var(--vr2-panel); color: var(--vr2-ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; } .vr2 .vr2-cli-add:hover { background: var(--vr2-ember-soft); color: var(--vr2-ember); border-color: var(--vr2-ember-line); } .vr2 .vr-cli-select-hidden { display: none; } /* Dropdown (cliente/empresa) */ .vr2 .vr2-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--vr2-panel); border: 1px solid var(--vr2-line); border-radius: 12px; box-shadow: var(--vr2-shadow); max-height: 280px; overflow-y: auto; } .vr2 .vr2-dd-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 13px; border: none; background: transparent; cursor: pointer; text-align: left; transition: background .12s; } .vr2 .vr2-dd-item:hover { background: var(--vr2-control); } .vr2 .vr2-dd-av { width: 34px; height: 34px; border-radius: 50%; background: var(--vr2-control-2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--vr2-ink-2); flex-shrink: 0; } .vr2 .vr2-dd-av--emp { border-radius: 9px; background: linear-gradient(158deg,#41505f,#232b34); color: #fff; } .vr2 .vr2-dd-info { min-width: 0; flex: 1; } .vr2 .vr2-dd-name { font-size: 13.5px; font-weight: 600; color: var(--vr2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr2 .vr2-dd-meta { font-size: 11.5px; color: var(--vr2-ink-3); margin-top: 1px; } .vr2 .vr2-dd-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--vr2-ink-3); } /* Cliente / Empresa card (selected) */ .vr2 .vr2-cli-card, .vr2 .vr2-emp-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--vr2-line); border-radius: 12px; background: var(--vr2-panel-2); } .vr2 .vr2-cli-top { display: flex; align-items: center; gap: 11px; } .vr2 .vr2-cli-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(158deg,#8a8178,#5f574e); } .vr2 .vr2-cli-avatar[data-nivel="legado"] { background: linear-gradient(158deg,#D9BE73,#B8923F); } .vr2 .vr2-cli-avatar[data-nivel="privado"] { background: linear-gradient(158deg,#3a3a3a,#1a1410); } .vr2 .vr2-cli-avatar[data-nivel="selecto"] { background: linear-gradient(158deg,#a99b87,#7d7060); } .vr2 .vr2-cli-meta { flex: 1; min-width: 0; } .vr2 .vr2-cli-name { font-size: 14px; font-weight: 700; color: var(--vr2-ink); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; } .vr2 .vr2-cli-sub { font-size: 12px; color: var(--vr2-ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr2 .vr2-cli-chip { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; background: var(--vr2-control-2); color: var(--vr2-ink-2); } .vr2 .vr2-cli-chip[data-nivel="legado"] { background: rgba(201,169,97,.18); color: #9A7B2E; } .vr2 .vr2-cli-x { width: 28px; height: 28px; border: none; background: var(--vr2-control); color: var(--vr2-ink-3); border-radius: 8px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s; } .vr2 .vr2-cli-x:hover { background: var(--vr2-control-2); color: var(--vr2-ink); } .vr2 .vr2-fid { display: flex; flex-direction: column; gap: 7px; } .vr2 .vr2-fid-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .vr2 .vr2-fid-pts { font-size: 12px; color: var(--vr2-ink-2); } .vr2 .vr2-fid-pts strong { font-size: 15px; font-weight: 800; color: var(--vr2-ember); } .vr2 .vr2-fid-next { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vr2-ink-3); } .vr2 .vr2-fid-bar { height: 5px; background: var(--vr2-control-2); border-radius: 3px; overflow: hidden; } .vr2 .vr2-fid-fill { height: 100%; border-radius: 3px; background: var(--vr2-ember); transition: width .5s var(--vr2-ease); } .vr2 .vr2-fid[data-to="legado"] .vr2-fid-fill { background: linear-gradient(90deg,#C9A961,#B8923F); } .vr2 .vr2-fid-panel { display: flex; flex-direction: column; gap: 8px; } .vr2 .vr2-fid-active { display: flex; flex-direction: column; gap: 6px; } .vr2 .vr2-fid-active-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--vr2-ember-soft); border-radius: 9px; } .vr2 .vr2-fid-active-item svg { color: var(--vr2-ember); flex-shrink: 0; width: 15px; height: 15px; } .vr2 .vr2-fid-active-meta { min-width: 0; } .vr2 .vr2-fid-active-lbl { font-size: 12px; font-weight: 600; color: var(--vr2-ink); } .vr2 .vr2-fid-active-sub { font-size: 11px; color: var(--vr2-ink-2); } .vr2 .vr2-fid-benefits .vr2-fid-list { display: none; flex-direction: column; gap: 6px; padding: 4px 0 2px 8px; margin: 0; list-style: none; } .vr2 .vr2-fid-benefits.is-open .vr2-fid-list { display: flex; } .vr2 .vr2-fid-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; background: none; border: none; cursor: pointer; } .vr2 .vr2-fid-toggle .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--vr2-ember); flex-shrink: 0; } .vr2 .vr2-fid-toggle-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vr2-ink-2); flex: 1; text-align: left; } .vr2 .vr2-fid-toggle .chev { color: var(--vr2-ink-3); transition: transform .2s; } .vr2 .vr2-fid-benefits.is-open .vr2-fid-toggle .chev { transform: rotate(180deg); } .vr2 .vr2-fid-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vr2-ink-2); } .vr2 .vr2-fid-item svg { color: var(--vr2-ember); flex-shrink: 0; width: 14px; height: 14px; } .vr2 .vr2-prodgratis-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; border: 1px solid rgba(22,163,74,.3); border-radius: 9px; background: rgba(22,163,74,.08); color: var(--vr2-green); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .14s; } .vr2 .vr2-prodgratis-cta:hover { background: rgba(22,163,74,.14); } /* Reward banner */ .vr2 .vr2-reward-body { display: flex; align-items: flex-start; gap: 9px; } .vr2 .vr2-reward-body > svg { color: var(--vr2-ember); flex-shrink: 0; margin-top: 1px; } .vr2 .vr2-reward-title { font-size: 12.5px; font-weight: 700; color: var(--vr2-ink); } .vr2 .vr2-reward-desc { font-size: 11.5px; color: var(--vr2-ink-2); margin-top: 2px; } .vr2 .vr2-reward-btn { margin-top: 9px; width: 100%; height: 32px; border: none; border-radius: 8px; background: var(--vr2-ember); color: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 600; cursor: pointer; } /* Empresa card */ .vr2 .vr2-empc-head { display: flex; align-items: center; gap: 11px; } .vr2 .vr2-empc-av { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(158deg,#41505f,#232b34); } .vr2 .vr2-empc-id { flex: 1; min-width: 0; } .vr2 .vr2-empc-rs { font-size: 14px; font-weight: 700; color: var(--vr2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr2 .vr2-empc-meta { font-size: 11px; color: var(--vr2-ink-3); margin-top: 2px; display: flex; gap: 5px; flex-wrap: wrap; } .vr2 .vr2-empc-stats { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vr2-line); display: flex; flex-direction: column; gap: 8px; } .vr2 .vr2-empc-stat { display: flex; align-items: center; justify-content: space-between; } .vr2 .vr2-empc-stat-lbl { font-size: 12px; color: var(--vr2-ink-2); } .vr2 .vr2-empc-stat-val { font-size: 13px; font-weight: 700; color: var(--vr2-ink); font-variant-numeric: tabular-nums; } .vr2 .vr2-empc-stat-val.is-warn { color: var(--vr2-amber); } .vr2 .vr2-empc-stat-val.is-danger { color: var(--vr2-red); } /* Producto: lista 1-col con foto */ .vr2 .vr2-prod-list { display: flex; flex-direction: column; border: 1px solid var(--vr2-line); border-radius: 12px; overflow: hidden; } .vr2 .vr2-prod-card { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-bottom: 1px solid var(--vr2-line-2); cursor: pointer; transition: background .12s; } .vr2 .vr2-prod-card:last-child { border-bottom: none; } .vr2 .vr2-prod-card:hover { background: var(--vr2-panel-2); } .vr2 .vr2-prod-card.agotado { opacity: .5; } .vr2 .vr2-prod-thumb { width: 46px; height: 46px; border-radius: 9px; flex-shrink: 0; overflow: hidden; background: var(--vr2-control); display: flex; align-items: center; justify-content: center; } .vr2 .vr2-prod-thumb img { width: 100%; height: 100%; object-fit: cover; } .vr2 .vr2-av { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: #fff; overflow: hidden; } /* v8.5.16 · Foto del producto superpuesta sobre la inicial (object-fit:cover) */ .vr2 .vr2-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .vr2 .vr2-prod-info { flex: 1; min-width: 0; } .vr2 .vr2-prod-name { font-size: 13.5px; font-weight: 600; color: var(--vr2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr2 .vr2-prod-meta { font-size: 11.5px; color: var(--vr2-ink-3); margin-top: 2px; } .vr2 .vr2-prod-stock { font-weight: 500; } .vr2 .vr2-prod-stock[data-state="out"] { color: var(--vr2-red); } .vr2 .vr2-prod-stock[data-state="low"] { color: var(--vr2-amber); } .vr2 .vr2-prod-price { font-size: 13.5px; font-weight: 700; color: var(--vr2-ink); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; } .vr2 .vr2-prod-price small { font-size: 10px; font-weight: 600; color: var(--vr2-ink-3); } .vr2 .vr2-prod-add { flex-shrink: 0; height: 34px; padding: 0 16px; border: 1px solid var(--vr2-ember-line); border-radius: 8px; background: var(--vr2-panel); color: var(--vr2-ember); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .vr2 .vr2-prod-add:hover { background: var(--vr2-ember); color: #fff; } .vr2 .vr2-prod-add:disabled { opacity: .4; pointer-events: none; } .vr2 .vr2-prod-empty { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--vr2-ink-3); } /* Paginación */ .vr2 .vr2-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; } .vr2 .vr2-pg { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--vr2-line); border-radius: 8px; background: var(--vr2-panel); color: var(--vr2-ink-2); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .14s, color .14s, border-color .14s; } .vr2 .vr2-pg:hover:not(:disabled) { background: var(--vr2-control); color: var(--vr2-ink); } .vr2 .vr2-pg.active { background: var(--vr2-ember); border-color: var(--vr2-ember); color: #fff; } .vr2 .vr2-pg:disabled { opacity: .4; cursor: default; } /* Carrito */ .vr2 .vr2-clear { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--vr2-ink-2); font-family: var(--sans); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 4px 6px; border-radius: 7px; transition: background .14s, color .14s; } .vr2 .vr2-clear:hover { background: var(--vr2-control); color: var(--vr2-red); } .vr2 .vr2-cart-body { display: flex; flex-direction: column; } .vr2 .vr2-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 36px 16px; color: var(--vr2-ink-3); text-align: center; font-size: 13px; line-height: 1.5; } .vr2 .vr2-cart-empty svg { color: var(--vr2-line); } .vr2 .vr2-cart-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--vr2-line-2); } .vr2 .vr2-cart-row:last-child { border-bottom: none; } .vr2 .vr2-cart-row.vr-removing { animation: vr2RowOut .24s var(--vr2-ease) forwards; } @keyframes vr2RowOut { to { opacity: 0; transform: translateX(14px); } } .vr2 .vr2-obs-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--vr2-ember); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 8px 0 0; } .vr2 .vr2-obs-input { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--vr2-line); border-radius: 9px; background: var(--vr2-panel); font-family: var(--sans); font-size: 13px; color: var(--vr2-ink); resize: vertical; outline: none; } /* Carrito · filas */ .vr2 .vr2-cr-thumb { width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0; overflow: hidden; background: var(--vr2-control); display: flex; align-items: center; justify-content: center; } .vr2 .vr2-cr-thumb img { width: 100%; height: 100%; object-fit: cover; } .vr2 .vr2-cr-thumb .vr2-av { width: 100%; height: 100%; font-size: 16px; } .vr2 .vr2-cr-info { flex: 1; min-width: 0; } .vr2 .vr2-cr-name { font-size: 13.5px; font-weight: 600; color: var(--vr2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr2 .vr2-cr-gift { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vr2-green); background: rgba(22,163,74,.12); padding: 1px 6px; border-radius: 5px; margin-left: 4px; } .vr2 .vr2-cr-unit { font-size: 11.5px; color: var(--vr2-ink-3); margin-top: 2px; } .vr2 .vr2-cr-qtybox { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .vr2 .vr2-cr-stepper { display: inline-flex; align-items: center; border: 1px solid var(--vr2-line); border-radius: 9px; background: var(--vr2-panel); height: 34px; overflow: hidden; } .vr2 .vr2-step { width: 30px; height: 100%; border: none; background: transparent; color: var(--vr2-ink-2); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .vr2 .vr2-step:hover { background: var(--vr2-control); color: var(--vr2-ember); } .vr2 .vr2-step-input { width: 42px; height: 100%; box-sizing: border-box; border: none; border-left: 1px solid var(--vr2-line); border-right: 1px solid var(--vr2-line); background: transparent; text-align: center; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--vr2-ink); outline: none; -moz-appearance: textfield; } .vr2 .vr2-cr-stepper--kg .vr2-step-input { width: 56px; } .vr2 .vr2-step-input::-webkit-outer-spin-button, .vr2 .vr2-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .vr2 .vr2-cr-ulbl { padding: 0 9px 0 7px; font-size: 11px; color: var(--vr2-ink-3); } .vr2 .vr2-cr-uds { width: 38px; height: 34px; box-sizing: border-box; border: 1px solid var(--vr2-line); border-radius: 8px; background: var(--vr2-panel); text-align: center; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--vr2-ink-2); outline: none; -moz-appearance: textfield; } .vr2 .vr2-cr-uds::-webkit-outer-spin-button, .vr2 .vr2-cr-uds::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .vr2 .vr2-cr-uval { font-size: 12.5px; color: var(--vr2-ink-2); } .vr2 .vr2-cr-sub { min-width: 74px; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--vr2-ink); font-variant-numeric: tabular-nums; flex-shrink: 0; } .vr2 .vr2-cr-sub--gift { color: var(--vr2-green); } .vr2 .vr2-cr-del { width: 28px; height: 28px; border: none; background: transparent; color: var(--vr2-ink-3); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 7px; flex-shrink: 0; transition: background .12s, color .12s; } .vr2 .vr2-cr-del:hover { background: rgba(220,38,38,.1); color: var(--vr2-red); } .vr2 .vr2-cart-row.gratis { background: rgba(22,163,74,.05); border-radius: 8px; padding-left: 8px; padding-right: 8px; } /* Descuentos · pago — selects (mock) */ .vr2 .vr2-select-wrap { position: relative; width: 100%; } .vr2 .vr2-select { width: 100%; height: 42px; box-sizing: border-box; padding: 0 36px 0 14px; border: 1px solid var(--vr2-line); border-radius: 10px; background: var(--vr2-panel); font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--vr2-ink); cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; } .vr2 .vr2-select:hover { border-color: var(--vr2-ember-line); } .vr2 .vr2-select:focus { border-color: var(--vr2-ember); box-shadow: 0 0 0 3px var(--vr2-ember-soft); } .vr2 .vr2-select-chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--vr2-ink-3); pointer-events: none; } .vr2 .vr2-desc-row { display: flex; gap: 9px; align-items: stretch; } .vr2 .vr2-desc-row .vr2-select-wrap { flex: 1; min-width: 0; } .vr2 .vr2-desc-monto { flex: 1; min-width: 0; margin: 0; } .vr2 .vr2-money { position: relative; display: flex; align-items: center; height: 100%; } .vr2 .vr2-money-sym { position: absolute; left: 12px; font-size: 13px; color: var(--vr2-ink-3); } .vr2 .vr2-money-input { width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px 0 24px; border: 1px solid var(--vr2-line); border-radius: 10px; background: var(--vr2-panel); font-family: var(--sans); font-size: 13.5px; color: var(--vr2-ink); outline: none; } .vr2 .vr2-money-input:focus { border-color: var(--vr2-ember); box-shadow: 0 0 0 3px var(--vr2-ember-soft); } .vr2 .vr2-money-help { position: absolute; right: 12px; font-size: 11px; color: var(--vr2-ink-3); } .vr2 .vr2-desc-applied { margin-top: 10px; font-size: 12.5px; color: var(--vr2-ink-2); } #vr-pago-grid-2 .vr2-select { height: 40px; font-size: 13px; } .vr2 .vr2-split-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--vr2-ember); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 0; } .vr2 .vr2-split { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 12px; border: 1px solid var(--vr2-line); border-radius: 11px; background: var(--vr2-panel-2); } .vr2 .vr2-split-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .vr2 .vr2-split-num { width: 20px; height: 20px; border-radius: 50%; background: var(--vr2-ember); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .vr2 .vr2-split-title { font-size: 12.5px; font-weight: 600; color: var(--vr2-ink); } .vr2 .vr2-split-div { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--vr2-ink-3); } .vr2 .vr2-split-auto { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--vr2-ink-2); } .vr2 .vr2-split-auto-num { font-weight: 700; color: var(--vr2-ink); font-variant-numeric: tabular-nums; } .vr2 .vr2-split-warn { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--vr2-red); } /* Empresa form */ .vr2 .vr2-emp-block { display: none; } .vr2-shell.vr2-mode-empresa .vr2-emp-block { display: flex; } .vr2-shell.vr2-mode-empresa .vr2-panel-pago { display: none !important; } .vr2 .vr2-emp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .vr2 .vr2-fg { display: flex; flex-direction: column; gap: 5px; } .vr2 .vr2-fg-full { grid-column: 1 / -1; } .vr2 .vr2-fg label { font-size: 12px; font-weight: 500; color: var(--vr2-ink-2); } .vr2 .vr2-opt { font-size: 10.5px; color: var(--vr2-ink-3); font-weight: 400; } .vr2 .vr2-input, .vr2 .vr2-textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--vr2-line); border-radius: 9px; background: var(--vr2-panel); font-family: var(--sans); font-size: 13px; color: var(--vr2-ink); outline: none; } .vr2 .vr2-input:focus, .vr2 .vr2-textarea:focus { border-color: var(--vr2-ember); box-shadow: 0 0 0 3px var(--vr2-ember-soft); } .vr2 .vr2-hint { font-size: 11px; color: var(--vr2-ink-3); } .vr2 .vr2-emp-totales { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vr2-line); display: flex; flex-direction: column; gap: 5px; } .vr2 .vr2-emp-total-final { padding-top: 8px; border-top: 1px solid var(--vr2-line); } .vr2 .vr2-emp-total-hero { font-size: 18px; font-weight: 800; color: var(--vr2-ink); font-variant-numeric: tabular-nums; } .vr2 .vr2-emp-note { font-size: 11px; color: var(--vr2-ink-3); } /* Footer · resumen + total + acciones */ .vr2 .vr2-foot { flex-shrink: 0; border-top: 1px solid var(--vr2-line); padding: 16px 24px; background: var(--vr2-panel); } .vr2 .vr2-resumen { display: flex; flex-direction: column; gap: 5px; } .vr2 .vr2-resumen-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--vr2-ink-2); } .vr2 .vr2-resumen-row > span:last-child { font-variant-numeric: tabular-nums; color: var(--vr2-ink); } .vr2 .vr2-resumen-desc { color: var(--vr2-ember) !important; font-weight: 600; } .vr2 .vr2-resumen-caja { color: var(--vr2-green) !important; font-weight: 600; } .vr2 .vr2-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--vr2-line); } .vr2 .vr2-total-lbl { font-size: 16px; font-weight: 700; color: var(--vr2-ink); } .vr2 .vr2-total-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--vr2-ink); font-variant-numeric: tabular-nums; } .vr2 .vr2-pts { display: block; margin-top: 4px; font-size: 11.5px; color: var(--vr2-ember-ink); font-weight: 600; } .vr2 .vr2-foot-actions { display: flex; gap: 12px; margin-top: 16px; } .vr2 .vr2-cancel { flex-shrink: 0; height: 46px; padding: 0 24px; border: 1px solid var(--vr2-line); border-radius: 11px; background: var(--vr2-panel); color: var(--vr2-ink); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; } .vr2 .vr2-cancel:hover { background: var(--vr2-control); } .vr2 .vr2-confirm { flex: 1; height: 46px; border: none; border-radius: 11px; background: var(--vr2-ember); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, box-shadow .2s, transform .12s; box-shadow: 0 6px 18px var(--vr2-ember-soft); } .vr2 .vr2-confirm:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); } .vr2 .vr2-confirm:disabled { opacity: .45; cursor: not-allowed; } /* Saldo + reward (placeholders Fase 4) */ .vr2 .vr2-saldo { border: 1px solid var(--vr2-line); border-radius: 11px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .vr2 .vr2-saldo.vr-hidden { display: none; } .vr2 .vr2-saldo-line { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--vr2-ink-2); } .vr2 .vr2-saldo-line strong { font-size: 14px; font-weight: 700; color: var(--vr2-ink); font-variant-numeric: tabular-nums; } .vr2 .vr2-saldo-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vr2-ink-2); cursor: pointer; } .vr2 .vr-saldo-empty-msg { font-size: 12px; font-style: italic; color: var(--vr2-ink-3); } .vr2 .vr2-reward { border: 1px solid var(--vr2-ember-line); border-radius: 11px; padding: 12px 14px; background: var(--vr2-ember-soft); font-size: 12.5px; color: var(--vr2-ember-ink); } /* Count-up del total (clases que setea vrAnimateNumber) */ .vr2 #vr-resumen-total.vr-num-up, .vr2 #vr-resumen-total.vr-num-done { color: var(--vr2-green); } .vr2 #vr-resumen-total.vr-total-counting { animation: vr2Pulse .48s ease infinite alternate; } @keyframes vr2Pulse { from { opacity: 1 } to { opacity: .82 } } /* Scrollbars */ .vr2 .vr2-left::-webkit-scrollbar, .vr2 .vr2-right-scroll::-webkit-scrollbar, .vr2 .vr2-dropdown::-webkit-scrollbar { width: 8px; } .vr2 .vr2-left::-webkit-scrollbar-thumb, .vr2 .vr2-right-scroll::-webkit-scrollbar-thumb, .vr2 .vr2-dropdown::-webkit-scrollbar-thumb { background: var(--vr2-line); border-radius: 4px; } /* Stock state (gana al color inline de vrRefreshProductStock → theme-safe) + sku + dots */ .vr2 .vr2-prod-sku { font-weight: 500; } .vr2 .vr2-prod-stock { color: var(--vr2-ink-3) !important; font-weight: 500; } .vr2 .vr2-prod-stock[data-state="low"] { color: var(--vr2-amber) !important; } .vr2 .vr2-prod-stock[data-state="out"] { color: var(--vr2-red) !important; } .vr2 .vr2-pg-dots { padding: 0 4px; color: var(--vr2-ink-3); font-size: 12.5px; } /* ─────────── Responsive ─────────── Desktop · desktop chico · tablet landscape (>960px): 2 columnas (sin cambios). Tablet portrait y menos (≤960px): 1 columna con SCROLL ÚNICO en .vr2-body (se desactivan los overflow internos de left/right/right-scroll para no apilar 3 scrolls) + footer de cobro sticky. iPad Pro 12.9 portrait (1024) queda en 2-col; iPad chico portrait (768–834) cae a 1-col. Mobile no se optimiza. */ @media (max-width: 960px) { .vr2 .vr2-shell { width: calc(100% - 28px) !important; max-height: calc(100% - 28px) !important; } .vr2 .vr2-body { display: flex; flex-direction: column; overflow-y: auto; } .vr2 .vr2-left { flex: 0 0 auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--vr2-line); } .vr2 .vr2-right { flex: 0 0 auto; overflow: visible; } .vr2 .vr2-right-scroll { flex: 0 0 auto; overflow: visible; } } /* Tablet landscape / desktop chico (961–1100px): la columna de cobro se angosta y el nombre del producto en el carrito se truncaba ("AS…"). Pasamos la fila a 2 líneas (nombre arriba ocupando todo el ancho · controles + subtotal abajo) para que el nombre se lea completo. Importante en carnicería: casi todo es por kg. */ @media (min-width: 961px) and (max-width: 1100px) { .vr2 .vr2-cart-row { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "thumb info del" "thumb qty sub"; align-items: center; column-gap: 11px; row-gap: 9px; } .vr2 .vr2-cr-thumb { grid-area: thumb; align-self: center; } .vr2 .vr2-cr-info { grid-area: info; } .vr2 .vr2-cr-del { grid-area: del; align-self: start; } .vr2 .vr2-cr-qtybox { grid-area: qty; justify-self: start; } .vr2 .vr2-cr-sub { grid-area: sub; align-self: center; } } /* ═══════════════════ END v8.1.0 ═══════════════════ */ /* ═══════════════════ v8.2.16 · CAPA 3 — Empty-states faltantes ═══════════════════ */ /* .empty-state* (helper emptyState con icono, usado en Stock/Chat) y .cli-list-empty (Clientes) no tenían CSS → texto plano sin estilo. Modelado sobre .emp-empty-* (Empresas). */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 64px 24px; text-align: center; color: rgba(26, 20, 16, .32); min-height: 240px; } .empty-state-icon { font-size: 30px; line-height: 1; opacity: .35; margin-bottom: 2px; } .empty-state-title { font-family: var(--serif); font-size: 18px; font-weight: 500; color: rgba(26, 20, 16, .55); } .empty-state-sub { font-family: var(--sans); font-size: 12.5px; color: rgba(26, 20, 16, .42); max-width: 38ch; line-height: 1.5; } .cli-list-empty { padding: 56px 24px; text-align: center; font-family: var(--serif); font-size: 16px; font-weight: 500; color: rgba(26, 20, 16, .42); } /* ═══════════════════ END v8.2.16 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════ v8.3.0 · REDISEÑO DASHBOARD (página testigo del nuevo lenguaje) Tokens --rd-* globales (reutilizables al rediseñar cada página), aplicados SCOPED a #page-dashboard para no tocar el resto todavía. Dirección: SaaS limpio · hairlines · un solo acento · números tabulares. ═══════════════════════════════════════════════════════════════ */ :root { --rd-ink: #1C1B19; --rd-ink-2: #6E6A64; --rd-ink-3: #A8A39C; --rd-line: #ECEAE5; --rd-line-soft: #F2F0EC; --rd-surface: #FFFFFF; --rd-hover: #F7F6F4; --rd-accent: #E8663A; --rd-accent-soft: #FBEEE8; --rd-pos: #1F9D63; --rd-warn: #C8841F; --rd-neg: #D14343; --rd-info: #3B82C4; --rd-sans: 'Inter', system-ui, -apple-system, sans-serif; } /* ── Hero compacto: el saludo manda, el reloj es referencia ── */ #page-dashboard .nd-hero { align-items: flex-start; gap: 24px; padding: 16px 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rd-line); } #page-dashboard .nd-hero-meta { order: 1; gap: 7px; } #page-dashboard .nd-hero-clock { order: 2; margin-left: auto; align-items: flex-end; text-align: right; gap: 5px; } #page-dashboard .nd-hero-time { font-family: var(--rd-sans); font-size: 30px; font-weight: 500; letter-spacing: -.02em; color: var(--rd-ink-2); font-variant-numeric: tabular-nums; } #page-dashboard .nd-hero-time-sep { opacity: .35; margin: 0 1px; } #page-dashboard .nd-hero-date { font-size: 10.5px; letter-spacing: .1em; color: var(--rd-ink-3); padding: 0; } #page-dashboard .nd-hero-status { font-size: 10.5px !important; letter-spacing: .08em; color: var(--rd-ink-2) !important; padding: 0 0 0 14px !important; } #page-dashboard .nd-hero-local-tag { font-size: 10px; letter-spacing: .1em; color: var(--rd-ink-3); } #page-dashboard .nd-hero-greeting { font-family: var(--rd-sans); font-size: 22px; font-weight: 600; letter-spacing: -.015em; color: var(--rd-ink); margin: 6px 0 4px; } #page-dashboard .nd-hero-greeting strong { color: var(--rd-ink); font-weight: 600; } #page-dashboard .nd-hero-greeting.saludo-typing::after { color: var(--rd-accent); } #page-dashboard .nd-hero-summary { font-family: var(--rd-sans); font-size: 13px; color: var(--rd-ink-2); } #page-dashboard .nd-hero-summary b { color: var(--rd-ink); font-weight: 600; } #page-dashboard .nd-hero-summary a { color: var(--rd-accent); } /* ── KPI strip: 4 columnas, hairline, sparkline 7d + delta ── */ #page-dashboard .nd-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 14px; padding: 0; box-shadow: none; overflow: hidden; margin-bottom: 20px; } #page-dashboard .nd-kpi-stat { padding: 16px 18px; gap: 9px; } #page-dashboard .nd-kpi-stat + .nd-kpi-stat { border-left: 1px solid var(--rd-line-soft); } #page-dashboard .nd-kpi-stat-l { font-family: var(--rd-sans); font-size: 10.5px; letter-spacing: .08em; color: var(--rd-ink-3); font-weight: 500; } #page-dashboard .nd-kpi-stat-val { font-family: var(--rd-sans); font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--rd-ink); font-variant-numeric: tabular-nums; } #page-dashboard .nd-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 1px; } #page-dashboard .nd-kpi-stat-delta, #page-dashboard .nd-kpi-stat-delta.nd-kpi-badge { font-family: var(--rd-sans) !important; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--rd-ink-3); } #page-dashboard .nd-kpi-stat-delta.up { color: var(--rd-pos); } #page-dashboard .nd-kpi-stat-delta.down { color: var(--rd-neg); } #page-dashboard .nd-kpi-spark { display: inline-flex; align-items: center; line-height: 0; opacity: .9; } /* ── Cards: superficie limpia, hairline, sin sombra pesada ── */ #page-dashboard .nd-card { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 14px; box-shadow: none; padding: 18px 20px; } #page-dashboard .nd-card-kicker { font-family: var(--rd-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; color: var(--rd-ink-3); text-transform: uppercase; } #page-dashboard .nd-card-title { font-family: var(--rd-sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--rd-ink); margin: 4px 0 0; } #page-dashboard .nd-card-link { font-family: var(--rd-sans); font-size: 12px; font-weight: 500; color: var(--rd-accent); background: transparent; border: none; cursor: pointer; } #page-dashboard .nd-body { gap: 16px; align-items: start; } #page-dashboard .nd-col-main, #page-dashboard .nd-col-side { gap: 16px; } /* ── Tendencia ── */ #page-dashboard .nd-trend-total { font-family: var(--rd-sans); font-size: 25px; font-weight: 600; letter-spacing: -.015em; color: var(--rd-ink); font-variant-numeric: tabular-nums; } #page-dashboard .nd-trend-badge { font-family: var(--rd-sans); font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; } #page-dashboard .nd-trend-badge.up { color: var(--rd-pos); background: #E9F4ED; } #page-dashboard .nd-trend-badge.down { color: var(--rd-neg); background: #FBECEC; } #page-dashboard .nd-trend-sub { font-size: 12px; color: var(--rd-ink-3); } /* ── Mix donut + leyenda ── */ #page-dashboard .nd-mix-row { gap: 8px; } #page-dashboard .nd-mix-lbl { font-size: 12px; color: var(--rd-ink-2); } #page-dashboard .nd-mix-pct { font-size: 12px; font-weight: 600; color: var(--rd-ink); font-variant-numeric: tabular-nums; } #page-dashboard .nd-mix-dot { border-radius: 2px; } /* ── Ventas recientes ── */ #page-dashboard .nd-venta-row { align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rd-line-soft); } #page-dashboard .nd-venta-row:last-child { border-bottom: none; } #page-dashboard .nd-venta-avatar { background: var(--rd-hover); color: var(--rd-ink-2); border-radius: 8px; font-size: 11px; font-weight: 600; } #page-dashboard .nd-venta-name { font-size: 13px; font-weight: 500; color: var(--rd-ink); } #page-dashboard .nd-venta-meta { font-size: 11.5px; color: var(--rd-ink-3); } #page-dashboard .nd-venta-total { font-size: 13px; font-weight: 600; color: var(--rd-ink); font-variant-numeric: tabular-nums; } #page-dashboard .nd-pago-pill { display: inline-flex; align-items: center; gap: 5px; background: transparent !important; padding: 0 !important; border: none !important; font-size: 11px; font-weight: 500; color: var(--rd-ink-2) !important; } #page-dashboard .nd-pago-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rd-ink-3); flex-shrink: 0; } #page-dashboard .nd-pago-pill.efectivo::before { background: var(--rd-pos); } #page-dashboard .nd-pago-pill.transferencia::before { background: var(--rd-info); } #page-dashboard .nd-pago-pill.debito::before { background: var(--rd-warn); } /* ── Ranking ── */ #page-dashboard .nd-rank-num { font-family: var(--rd-sans); font-size: 16px; font-weight: 600; color: var(--rd-ink-3); font-variant-numeric: tabular-nums; } #page-dashboard .nd-rank-name { font-size: 13px; font-weight: 500; color: var(--rd-ink); } #page-dashboard .nd-rank-meta { font-size: 11.5px; color: var(--rd-ink-3); } #page-dashboard .nd-rank-bar-wrap { background: var(--rd-line-soft); border-radius: 999px; } #page-dashboard .nd-rank-bar { background: var(--rd-accent); border-radius: 999px; } #page-dashboard .nd-rank-price { font-size: 13px; font-weight: 600; color: var(--rd-ink); font-variant-numeric: tabular-nums; } /* ── Stock bajo (incl. fix del "0 u." pegado) ── */ #page-dashboard .nd-sb-row { display: block; padding: 9px 0; border-bottom: 1px solid var(--rd-line-soft); } #page-dashboard .nd-sb-row:last-child { border-bottom: none; } #page-dashboard .nd-sb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } #page-dashboard .nd-sb-name { font-size: 13px; font-weight: 500; color: var(--rd-ink); } #page-dashboard .nd-sb-qty { font-size: 12px; font-weight: 600; color: var(--rd-neg); font-variant-numeric: tabular-nums; white-space: nowrap; } #page-dashboard .nd-sb-meta { font-size: 11px; color: var(--rd-ink-3); margin-top: 2px; } #page-dashboard .nd-sb-bar-wrap { background: var(--rd-line-soft); border-radius: 999px; margin-top: 6px; } #page-dashboard .nd-sb-bar { background: var(--rd-neg); border-radius: 999px; } /* ── Empty states ── */ #page-dashboard .nd-empty { font-size: 12.5px; color: var(--rd-ink-3); padding: 14px 0; } /* ── Responsive ── */ @media (max-width: 980px) { #page-dashboard .nd-kpi-strip { grid-template-columns: 1fr 1fr; } #page-dashboard .nd-kpi-stat + .nd-kpi-stat { border-left: none; } #page-dashboard .nd-kpi-stat:nth-child(2n) { border-left: 1px solid var(--rd-line-soft); } #page-dashboard .nd-kpi-stat:nth-child(-n+2) { border-bottom: 1px solid var(--rd-line-soft); } #page-dashboard .nd-hero-clock { margin-left: 0; } } /* ═══════════════════ END v8.3.0 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════ v8.3.1 · REDISEÑO STOCK — mismo lenguaje que Dashboard, reusando los tokens --rd-* (scoped a #page-stock). Solo CSS: la tabla la renderiza renderStock en clases conocidas, no se toca JS/HTML. ═══════════════════════════════════════════════════════════════ */ /* NOTA: el CSS legacy de Stock usa !important en bg/border/box-shadow/font/color, así que las overrides de abajo lo replican para ganar la cascada (scoped). */ /* ── Header / breadcrumb (si LXTopbar no los reubica) ── */ #page-stock .sk-bc { display: none !important; } #page-stock .sk-eyebrow { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--rd-ink-3) !important; } #page-stock .sk-title { font-family: var(--rd-sans) !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.015em !important; color: var(--rd-ink) !important; margin: 4px 0 2px; } #page-stock .sk-subtitle { font-family: var(--rd-sans) !important; font-size: 13px !important; color: var(--rd-ink-2) !important; } #page-stock .sk-btn-primary { background: #1C1B19 !important; color: #fff !important; border: none !important; border-radius: 9px !important; font-family: var(--rd-sans) !important; font-size: 12.5px !important; font-weight: 500 !important; padding: 9px 15px !important; } #page-stock .sk-btn-primary:hover { background: #2C2A27 !important; } /* ── KPI cards: hairline, sin sombra, números tabulares, sin delta "—" ── */ #page-stock .sk-kpi-row { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 12px !important; margin-bottom: 18px; } #page-stock .sk-kpi-card { background: var(--rd-surface) !important; border: 1px solid var(--rd-line) !important; border-radius: 14px !important; box-shadow: none !important; padding: 16px 18px !important; transition: border-color .15s ease !important; } #page-stock .sk-kpi-card:hover { border-color: var(--rd-ink-3) !important; transform: none !important; } #page-stock .sk-kpi-delta { display: none !important; } #page-stock .sk-kpi-eyebrow { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--rd-ink-3) !important; } #page-stock .sk-kpi-num { font-family: var(--rd-sans) !important; font-size: 28px !important; font-weight: 600 !important; letter-spacing: -.015em !important; color: var(--rd-ink) !important; font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.05; } #page-stock .sk-kpi-num.is-crit { color: var(--rd-neg) !important; } #page-stock .sk-kpi-num-sub { font-family: var(--rd-sans) !important; font-size: 11.5px !important; color: var(--rd-ink-3) !important; margin-top: 4px; } #page-stock .sk-kpi-foot { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rd-line-soft) !important; } #page-stock .sk-kpi-meta { display: inline-flex !important; align-items: center; gap: 6px; font-size: 11.5px !important; color: var(--rd-ink-2) !important; } #page-stock .sk-kpi-meta-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--rd-ink-3) !important; } #page-stock .k-critico .sk-kpi-meta-dot { background: var(--rd-neg) !important; } #page-stock .sk-kpi-link { display: inline-flex !important; align-items: center; gap: 3px; font-family: var(--rd-sans) !important; font-size: 11.5px !important; font-weight: 500 !important; color: var(--rd-accent) !important; } /* ── Results bar ── */ #page-stock .sk-results-bar { padding: 4px 2px 12px; } #page-stock .sk-results-count { font-family: var(--rd-sans) !important; font-size: 11.5px !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--rd-ink-3) !important; font-weight: 500 !important; } /* ── Tabla: hairlines, headers limpios, números tabulares ── */ #page-stock .sk-table-wrap { background: var(--rd-surface) !important; border: 1px solid var(--rd-line) !important; border-radius: 14px !important; box-shadow: none !important; overflow: hidden; } #page-stock .sk-table { width: 100%; border-collapse: collapse !important; } #page-stock .sk-table thead th { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--rd-ink-3) !important; text-align: left; padding: 14px 14px 12px !important; background: transparent !important; border-bottom: 1px solid var(--rd-line) !important; } #page-stock .sk-table tbody td { padding: 12px 14px !important; border-bottom: 1px solid var(--rd-line-soft) !important; vertical-align: middle; font-size: 13px; color: var(--rd-ink); } #page-stock .sk-table tbody tr:last-child td { border-bottom: none !important; } #page-stock .sk-table tbody tr { transition: background .12s ease; } #page-stock .sk-table tbody tr:hover { background: var(--rd-hover) !important; } /* Producto */ #page-stock .stock-prod-name { font-family: var(--rd-sans) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--rd-ink) !important; } #page-stock .stock-mini-pill { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; color: var(--rd-ink-3) !important; background: var(--rd-hover) !important; border: none !important; border-radius: 5px !important; padding: 2px 7px !important; } #page-stock .stock-notes { font-size: 11.5px !important; color: var(--rd-ink-3) !important; margin-top: 3px; } #page-stock .stock-warn-badge { display: inline-flex !important; align-items: center; gap: 4px; font-size: 10px !important; font-weight: 600 !important; color: var(--rd-warn) !important; background: #FBF2E2 !important; border: none !important; border-radius: 5px !important; padding: 2px 6px !important; } #page-stock .stock-expand-btn { width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 1px solid var(--rd-line) !important; border-radius: 6px !important; color: var(--rd-ink-3) !important; cursor: pointer; transition: all .12s ease; } #page-stock .stock-expand-btn:hover { background: var(--rd-hover) !important; color: var(--rd-ink) !important; } /* Categoría */ #page-stock .sk-cat { font-size: 12.5px !important; color: var(--rd-ink-2) !important; background: transparent !important; } /* Sucursal L1/L2 — chip neutro (antes azul info) */ #page-stock .sk-loc, #page-stock .sk-loc.tag-l1, #page-stock .sk-loc.tag-l2 { display: inline-flex !important; align-items: center; font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .02em !important; color: var(--rd-ink-2) !important; background: var(--rd-hover) !important; border: none !important; border-radius: 5px !important; padding: 3px 8px !important; } /* Cantidad / Precio */ #page-stock .sk-qty-val { font-family: var(--rd-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--rd-ink) !important; font-variant-numeric: tabular-nums; } #page-stock .sk-qty-val.is-critical { color: var(--rd-neg) !important; } #page-stock .sk-qty-sub { font-size: 11px !important; color: var(--rd-ink-3) !important; margin-top: 2px; } #page-stock .sk-price-val { font-family: var(--rd-sans) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--rd-ink) !important; font-variant-numeric: tabular-nums; } #page-stock .sk-price-sub { font-size: 11px !important; color: var(--rd-ink-3) !important; margin-top: 2px; } /* Próx. venc. (color inline de colorDias se mantiene) */ #page-stock .stock-next { font-family: var(--rd-sans) !important; font-size: 13px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; } #page-stock .stock-next-sub { font-size: 11px !important; font-weight: 500 !important; margin-top: 2px; } #page-stock .stock-next-empty { color: var(--rd-ink-3) !important; } /* Nivel — segment bars */ #page-stock .sk-seg-bars { display: flex !important; gap: 2px !important; align-items: flex-end; } #page-stock .sk-seg-bar { width: 3px !important; height: 15px !important; border-radius: 1px !important; } #page-stock .sk-seg-empty { background: var(--rd-line) !important; } /* Actualizado */ #page-stock .stock-updated { font-size: 11.5px !important; color: var(--rd-ink-3) !important; } /* Acciones */ #page-stock .sk-row-acts { display: inline-flex !important; gap: 4px; } #page-stock .sk-act-btn { width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 1px solid transparent !important; border-radius: 7px !important; color: var(--rd-ink-3) !important; cursor: pointer; transition: all .12s ease; } #page-stock .sk-act-btn svg { width: 14px !important; height: 14px !important; } #page-stock .sk-act-btn:hover { background: var(--rd-hover) !important; color: var(--rd-ink) !important; border-color: var(--rd-line) !important; } #page-stock .sk-act-btn.del:hover { color: var(--rd-neg) !important; background: #FBECEC !important; } /* ── Responsive ── */ @media (max-width: 980px) { #page-stock .sk-kpi-row { grid-template-columns: 1fr 1fr; } } /* ═══════════════════ END v8.3.1 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════ v8.3.2 · REDISEÑO MOVIMIENTOS — tokens --rd-* (scoped + !important porque el CSS legacy mv-* usa section-core/!important como Stock). Declutter: −columna CLIENTE (va bajo el producto), FECHA→solo hora, más espacio negativo. JS: template de filas de renderMov (7 cols). ═══════════════════════════════════════════════════════════════ */ /* ── KPI strip (mismo lenguaje que Stock) ── */ #page-movimientos.section-core .mv2-kpi-strip { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 12px !important; margin-bottom: 18px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } #page-movimientos.section-core .mv2-kpi { background: var(--rd-surface) !important; border: 1px solid var(--rd-line) !important; border-radius: 14px !important; box-shadow: none !important; padding: 16px 18px !important; transition: border-color .15s ease !important; } #page-movimientos.section-core .mv2-kpi:hover { border-color: var(--rd-ink-3) !important; transform: none !important; } #page-movimientos.section-core .mv2-kpi-delta { display: none !important; } #page-movimientos.section-core .mv2-kpi-eyebrow { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--rd-ink-3) !important; } #page-movimientos.section-core .mv2-kpi-num { font-family: var(--rd-sans) !important; font-size: 27px !important; font-weight: 600 !important; letter-spacing: -.015em !important; color: var(--rd-ink) !important; font-variant-numeric: tabular-nums; margin-top: 6px !important; line-height: 1.05 !important; } #page-movimientos.section-core .mv2-kpi-num.is-crit { color: var(--rd-neg) !important; } #page-movimientos.section-core .mv2-kpi-num-sub { font-family: var(--rd-sans) !important; font-size: 11.5px !important; color: var(--rd-ink-3) !important; margin-top: 4px !important; } #page-movimientos.section-core .mv2-kpi-foot { display: flex !important; align-items: center; gap: 8px; margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid var(--rd-line-soft) !important; } #page-movimientos.section-core .mv2-kpi-meta { display: inline-flex !important; align-items: center; gap: 6px; font-size: 11.5px !important; color: var(--rd-ink-2) !important; } #page-movimientos.section-core .mv2-kpi-meta b { color: var(--rd-ink) !important; font-weight: 600 !important; } #page-movimientos.section-core .mv2-kpi-meta-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--rd-ink-3) !important; } #page-movimientos.section-core .k-critico .mv2-kpi-meta-dot { background: var(--rd-neg) !important; } /* ── Header editorial (si se muestra) ── */ #page-movimientos.section-core .mv2-page-head-eyebrow { font-family: var(--rd-sans) !important; font-size: 10.5px !important; letter-spacing: .08em !important; color: var(--rd-ink-3) !important; } #page-movimientos.section-core .mv2-page-head-title { font-family: var(--rd-sans) !important; font-size: 22px !important; font-weight: 600 !important; color: var(--rd-ink) !important; letter-spacing: -.015em !important; } #page-movimientos.section-core .mv2-page-head-sub { font-family: var(--rd-sans) !important; font-size: 13px !important; color: var(--rd-ink-2) !important; } /* ── Tabla card ── */ #page-movimientos.section-core .mv-table-card { background: var(--rd-surface) !important; border: 1px solid var(--rd-line) !important; border-radius: 14px !important; box-shadow: none !important; overflow: hidden !important; } #page-movimientos.section-core .mv-table { width: 100% !important; border-collapse: collapse !important; } #page-movimientos.section-core .mv-table thead th { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--rd-ink-3) !important; text-align: left; padding: 15px 16px 13px !important; background: transparent !important; border-bottom: 1px solid var(--rd-line) !important; } #page-movimientos.section-core .mv-table thead th:last-child, #page-movimientos.section-core .mv-td-total { text-align: right !important; } #page-movimientos.section-core .mv-table tbody td { padding: 13px 16px !important; border-bottom: 1px solid var(--rd-line-soft) !important; vertical-align: middle !important; font-size: 13px !important; color: var(--rd-ink) !important; background: transparent !important; } #page-movimientos.section-core .mv-row { transition: background .12s ease !important; } #page-movimientos.section-core .mv-row:hover td { background: var(--rd-hover) !important; } #page-movimientos.section-core .mv-row-selected td { background: var(--rd-accent-soft) !important; } /* Día separador — aire arriba, hairline limpio */ #page-movimientos.section-core .mv-day-sep td { padding: 22px 16px 8px !important; border-bottom: none !important; background: transparent !important; } #page-movimientos.section-core .mv-day-content { display: flex !important; align-items: center; gap: 10px !important; } #page-movimientos.section-core .mv-day-label { font-family: var(--rd-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--rd-ink-2) !important; } #page-movimientos.section-core .mv-day-date { font-family: var(--rd-sans) !important; font-size: 10.5px !important; letter-spacing: .04em !important; color: var(--rd-ink-3) !important; } #page-movimientos.section-core .mv-day-sep-divider { flex: 1 !important; height: 1px !important; background: var(--rd-line) !important; } #page-movimientos.section-core .mv-day-stat { font-size: 11px !important; color: var(--rd-ink-3) !important; } #page-movimientos.section-core .mv-day-total { font-family: var(--rd-sans) !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--rd-ink) !important; font-variant-numeric: tabular-nums; margin-left: 4px !important; } /* Tipo — dot semántico + label */ #page-movimientos.section-core .mv-tipo { display: inline-flex !important; align-items: center; gap: 7px !important; font-family: var(--rd-sans) !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--rd-ink-2) !important; } #page-movimientos.section-core .mv-tipo-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--rd-ink-3) !important; flex-shrink: 0; } #page-movimientos.section-core .t-venta .mv-tipo-dot { background: var(--rd-pos) !important; } #page-movimientos.section-core .t-ingreso .mv-tipo-dot { background: var(--rd-info) !important; } #page-movimientos.section-core .t-merma .mv-tipo-dot { background: var(--rd-neg) !important; } #page-movimientos.section-core .t-ajuste .mv-tipo-dot { background: var(--rd-warn) !important; } #page-movimientos.section-core .t-transferencia .mv-tipo-dot { background: var(--rd-ink-2) !important; } /* Hora (antes fecha+hora) */ #page-movimientos.section-core .mv-td-fecha { white-space: nowrap !important; } #page-movimientos.section-core .mv-fecha-hora { font-family: var(--rd-sans) !important; font-size: 12.5px !important; color: var(--rd-ink-2) !important; font-variant-numeric: tabular-nums; } /* Producto + cliente como sub-línea */ #page-movimientos.section-core .mv-producto-txt { font-family: var(--rd-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--rd-ink) !important; } #page-movimientos.section-core .mv-producto-more { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; color: var(--rd-ink-3) !important; background: var(--rd-hover) !important; border-radius: 5px !important; padding: 1px 6px !important; margin-left: 7px !important; } #page-movimientos.section-core .mv-producto-cli { display: inline-flex !important; align-items: center; gap: 5px; font-family: var(--rd-sans) !important; font-size: 11.5px !important; color: var(--rd-ink-3) !important; margin-top: 3px !important; } #page-movimientos.section-core .mv-producto-cli::before { content: "" !important; width: 5px; height: 5px; border-radius: 50%; background: var(--rd-accent) !important; flex-shrink: 0; } /* Local L1/L2 — chip neutro */ #page-movimientos.section-core .mv-local, #page-movimientos.section-core .mv-local.tag-l1, #page-movimientos.section-core .mv-local.tag-l2 { display: inline-flex !important; align-items: center; font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .02em !important; color: var(--rd-ink-2) !important; background: var(--rd-hover) !important; border: none !important; border-radius: 5px !important; padding: 3px 8px !important; } /* Pago — dot semántico + label */ #page-movimientos.section-core .mv-pago { display: inline-flex !important; align-items: center; gap: 7px !important; font-family: var(--rd-sans) !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--rd-ink-2) !important; } #page-movimientos.section-core .mv-pago-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--rd-ink-3) !important; flex-shrink: 0; } #page-movimientos.section-core .mv-pago.efectivo .mv-pago-dot { background: var(--rd-pos) !important; } #page-movimientos.section-core .mv-pago.transferencia .mv-pago-dot { background: var(--rd-info) !important; } #page-movimientos.section-core .mv-pago.debito .mv-pago-dot { background: var(--rd-warn) !important; } #page-movimientos.section-core .mv-pago.caja .mv-pago-dot { background: #8C6A4A !important; } #page-movimientos.section-core .mv-pago.is-empty { color: var(--rd-ink-3) !important; } /* Total */ #page-movimientos.section-core .mv-total { font-family: var(--rd-sans) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--rd-ink) !important; font-variant-numeric: tabular-nums; } #page-movimientos.section-core .mv-total.is-neg { color: var(--rd-neg) !important; } /* Flecha de fila */ #page-movimientos.section-core .mv-row-arrow { color: var(--rd-ink-3) !important; opacity: 0; transition: opacity .12s ease; } #page-movimientos.section-core .mv-row:hover .mv-row-arrow { opacity: 1; } #page-movimientos.section-core .mv-row-arrow svg { width: 13px !important; height: 13px !important; } /* Ver más */ #page-movimientos.section-core .mv-load-more-btn { font-family: var(--rd-sans) !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--rd-ink-2) !important; background: var(--rd-surface) !important; border: 1px solid var(--rd-line) !important; border-radius: 9px !important; padding: 9px 16px !important; } #page-movimientos.section-core .mv-load-more-btn:hover { background: var(--rd-hover) !important; border-color: var(--rd-ink-3) !important; } /* ── Responsive ── */ @media (max-width: 980px) { #page-movimientos.section-core .mv2-kpi-strip { grid-template-columns: 1fr 1fr !important; } } /* ═══════════════════ END v8.3.2 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════ v8.3.3 · REDISEÑO DETALLE DE VENTA (drawer #mov-inspector .mvd-*) Minimalista/plano: aplana gradientes (fondo/header/footer/número/ total con gradient-text), saca el tick ember de los títulos, números tabulares, botones planos. + JS: COBRO solo si hay desglose. ═══════════════════════════════════════════════════════════════ */ #mov-inspector { background: var(--rd-surface) !important; border-left: 1px solid var(--rd-line) !important; } /* Header */ #mov-inspector .mvd-hd { background: var(--rd-surface) !important; border-bottom: 1px solid var(--rd-line) !important; padding: 20px 24px 18px !important; } #mov-inspector .mvd-status { font-family: var(--rd-sans) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .1em !important; padding: 4px 10px !important; border-radius: 999px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #mov-inspector .mvd-status:hover { transform: none !important; box-shadow: none !important; } #mov-inspector .mvd-st-completada { background: #E9F4ED !important; color: #1F7A47 !important; } #mov-inspector .mvd-st-dot { box-shadow: none !important; } #mov-inspector .mvd-esc { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--rd-line) !important; border-radius: 8px !important; color: var(--rd-ink-2) !important; font-family: var(--rd-sans) !important; } #mov-inspector .mvd-esc:hover { background: var(--rd-hover) !important; border-color: var(--rd-ink-3) !important; color: var(--rd-ink) !important; transform: none !important; } #mov-inspector .mvd-esc svg { color: var(--rd-ink-3) !important; } #mov-inspector .mvd-esc:hover svg { color: var(--rd-ink) !important; transform: none !important; } #mov-inspector .mvd-esc-key { background: var(--rd-line-soft) !important; color: var(--rd-ink-3) !important; font-family: var(--rd-sans) !important; } #mov-inspector .mvd-eyebrow { font-family: var(--rd-sans) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .1em !important; color: var(--rd-ink-3) !important; } #mov-inspector .mvd-num { font-family: var(--rd-sans) !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--rd-ink) !important; background: none !important; -webkit-text-fill-color: var(--rd-ink) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; font-variant-numeric: tabular-nums; } #mov-inspector .mvd-copy { background: transparent !important; border: 1px solid var(--rd-line) !important; border-radius: 7px !important; color: var(--rd-ink-3) !important; } #mov-inspector .mvd-copy:hover { background: var(--rd-hover) !important; border-color: var(--rd-ink-3) !important; color: var(--rd-ink) !important; transform: none !important; } #mov-inspector .mvd-meta { font-family: var(--rd-sans) !important; font-size: 12px !important; font-weight: 400 !important; color: var(--rd-ink-3) !important; } /* Secciones — label limpio, sin tick ember */ #mov-inspector .mvd-sec { padding: 18px 24px !important; border-bottom: 1px solid var(--rd-line-soft) !important; } #mov-inspector .mvd-sec-title { font-family: var(--rd-sans) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .08em !important; color: var(--rd-ink-3) !important; padding-left: 0 !important; margin-bottom: 12px !important; } #mov-inspector .mvd-sec-title::before { display: none !important; } /* Filas */ #mov-inspector .mvd-row { padding: 10px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--rd-line-soft) !important; border-radius: 0 !important; } #mov-inspector .mvd-row:hover { background: transparent !important; } #mov-inspector .mvd-rows .mvd-row:last-child { border-bottom: none !important; padding-bottom: 0 !important; } #mov-inspector .mvd-row-l { font-family: var(--rd-sans) !important; font-size: 13px !important; font-weight: 400 !important; color: var(--rd-ink-2) !important; } #mov-inspector .mvd-row-v { font-family: var(--rd-sans) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--rd-ink) !important; } #mov-inspector .mvd-row-v-mono { font-family: var(--rd-sans) !important; font-variant-numeric: tabular-nums; } #mov-inspector .mvd-row-disc .mvd-row-l, #mov-inspector .mvd-row-disc .mvd-row-v { color: var(--rd-pos) !important; } #mov-inspector .mvd-dot { box-shadow: none !important; } /* Ítems */ #mov-inspector .mvd-item { padding: 11px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--rd-line-soft) !important; border-radius: 0 !important; } #mov-inspector .mvd-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; } #mov-inspector .mvd-item:hover { background: transparent !important; box-shadow: none !important; } #mov-inspector .mvd-item-name { font-family: var(--rd-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--rd-ink) !important; letter-spacing: -.005em !important; } #mov-inspector .mvd-item-meta { font-family: var(--rd-sans) !important; font-size: 11.5px !important; font-weight: 400 !important; color: var(--rd-ink-3) !important; } #mov-inspector .mvd-item-lote { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; color: var(--rd-ink-3) !important; background: var(--rd-hover) !important; border: none !important; border-radius: 5px !important; } #mov-inspector .mvd-item:hover .mvd-item-lote { background: var(--rd-hover) !important; } #mov-inspector .mvd-item-price { font-family: var(--rd-sans) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--rd-ink) !important; font-variant-numeric: tabular-nums; } #mov-inspector .mvd-item-del { color: var(--rd-ink-3) !important; } #mov-inspector .mvd-item-del:hover { background: #FBECEC !important; color: var(--rd-neg) !important; transform: none !important; } /* Footer */ #mov-inspector .mvd-foot { background: var(--rd-surface) !important; border-top: 1px solid var(--rd-line) !important; padding: 18px 24px 20px !important; } #mov-inspector .mvd-total-label { font-family: var(--rd-sans) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .08em !important; color: var(--rd-ink-3) !important; } #mov-inspector .mvd-total-val { font-family: var(--rd-sans) !important; font-size: 30px !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--rd-ink) !important; background: none !important; -webkit-text-fill-color: var(--rd-ink) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; font-variant-numeric: tabular-nums; } #mov-inspector .mvd-act { background: var(--rd-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--rd-line) !important; border-radius: 9px !important; font-family: var(--rd-sans) !important; font-size: 12px !important; font-weight: 500 !important; color: var(--rd-ink-2) !important; height: 38px !important; } #mov-inspector .mvd-act svg { color: var(--rd-ink-3) !important; } #mov-inspector .mvd-act:hover { background: var(--rd-hover) !important; border-color: var(--rd-ink-3) !important; color: var(--rd-ink) !important; transform: none !important; box-shadow: none !important; } #mov-inspector .mvd-act:hover svg { color: var(--rd-ink) !important; } #mov-inspector .mvd-act-del:hover { background: #FBECEC !important; border-color: #F0C9C9 !important; color: var(--rd-neg) !important; box-shadow: none !important; } #mov-inspector .mvd-act-del:hover svg { color: var(--rd-neg) !important; } /* ═══════════════════ END v8.3.3 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════ v8.4.0 · CAMBIOS GLOBALES 1) Floor: #F0EEEF (REVERTIDO en v8.4.2 — el usuario no quiso #F2F4F7). 2) #pages: #F6F6F6 (REVERTIDO en v8.4.2 — el usuario no quiso blanco puro). 3) Padding body 46px 46px 80px → 46px 80px 80px (editado en fuente). 4) Tipografía: 2 typefaces SaaS — Geist + Geist Mono (Vercel). + sombra profesional en cards (se mantiene, queda bien sobre #F6F6F6). ═══════════════════════════════════════════════════════════════ */ :root { --sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --serif: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --sans-struct: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; --rd-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --rd-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; /* Sombra profesional (cool, estilo shadcn/Linear) para cards sobre blanco */ --rd-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --rd-shadow-md: 0 2px 4px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.07); } /* Cards de las páginas rediseñadas: hairline + sombra sutil para separarse del page blanco */ #page-dashboard .nd-card, #page-dashboard .nd-kpi-strip, #page-stock.section-core .sk-kpi-card, #page-stock.section-core .sk-table-wrap, #page-movimientos.section-core .mv2-kpi, #page-movimientos.section-core .mv-table-card { box-shadow: var(--rd-shadow) !important; } #page-stock.section-core .sk-kpi-card:hover, #page-movimientos.section-core .mv2-kpi:hover { box-shadow: var(--rd-shadow-md) !important; } /* Labels/eyebrows en mono — hace visible la 2da typeface en las páginas rediseñadas */ #page-dashboard .nd-kpi-stat-l, #page-dashboard .nd-card-kicker, #page-stock.section-core .sk-eyebrow, #page-stock.section-core .sk-kpi-eyebrow, #page-stock.section-core .sk-results-count, #page-stock.section-core .sk-table thead th, #page-movimientos.section-core .mv2-kpi-eyebrow, #page-movimientos.section-core .mv2-page-head-eyebrow, #page-movimientos.section-core .mv-table thead th, #page-movimientos.section-core .mv-day-label, #mov-inspector .mvd-eyebrow, #mov-inspector .mvd-sec-title, #mov-inspector .mvd-total-label { font-family: var(--rd-mono) !important; } /* ═══════════════════ END v8.4.0 ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════ v8.5.0 · REDISEÑO FULL — SISTEMA NUEVO (Linear / Stripe / ERP premium 2026) Paleta neutra premium + accent ember `--vr2-ember` #F0531E (era azul #2563EB hasta v8.5.18; cambiado a ember global en v8.5.19). Se aplica PÁGINA POR PÁGINA vía override SCOPED de los tokens --rd-* en cada #page-X → nada flippea global hasta que cada página tiene su turno. PALETA CANÓNICA (reusable en cada página): --rd-bg #FAFAFA · --rd-surface #FFFFFF · --rd-line #E5E7EB --rd-ink #111827 · --rd-ink-2 #6B7280 · --rd-ink-3 #9CA3AF --rd-accent var(--vr2-ember) · ok #16A34A · warn #D97706 · err #DC2626 · info #0284C7 Tipografía: Geist + Geist Mono (ya global). ═══════════════════════════════════════════════════════════════ */ /* ── PÁGINA 1 · STOCK (la más fácil — token-based, solo cambia la paleta) ── */ #pages:has(#page-stock.active) { background: #FAFAFA !important; } #page-stock.section-core { --rd-ink: #111827; --rd-ink-2: #6B7280; --rd-ink-3: #9CA3AF; --rd-line: #E5E7EB; --rd-line-soft: #F3F4F6; --rd-surface: #FFFFFF; --rd-hover: #F9FAFB; --rd-accent: var(--vr2-ember); --rd-accent-soft: var(--vr2-ember-50); --rd-pos: #16A34A; --rd-warn: #D97706; --rd-neg: #DC2626; --rd-info: #0284C7; --rd-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.07); --rd-shadow-md: 0 2px 4px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.08); } /* ═══════════════════ END v8.5.0 (Stock) ═══════════════════ */ /* ── PÁGINA 2 · MOVIMIENTOS + drawer detalle de venta (v8.5.1, token-based) ── */ #pages:has(#page-movimientos.active) { background: #FAFAFA !important; } #page-movimientos.section-core, #mov-inspector { --rd-ink: #111827; --rd-ink-2: #6B7280; --rd-ink-3: #9CA3AF; --rd-line: #E5E7EB; --rd-line-soft: #F3F4F6; --rd-surface: #FFFFFF; --rd-hover: #F9FAFB; --rd-accent: var(--vr2-ember); --rd-accent-soft: var(--vr2-ember-50); --rd-pos: #16A34A; --rd-warn: #D97706; --rd-neg: #DC2626; --rd-info: #0284C7; --rd-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.07); --rd-shadow-md: 0 2px 4px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.08); } /* Status "completada" del drawer al verde nuevo */ #mov-inspector .mvd-st-completada { background: #DCFCE7 !important; color: #15803D !important; } /* ═══════════════════ END v8.5.1 (Movimientos) ═══════════════════ */ /* ── PÁGINA 3 · DASHBOARD — Bento Grid + paleta nueva (v8.5.2) ── */ #pages:has(#page-dashboard.active) { background: #FAFAFA !important; } #page-dashboard { --rd-ink: #111827; --rd-ink-2: #6B7280; --rd-ink-3: #9CA3AF; --rd-line: #E5E7EB; --rd-line-soft: #F3F4F6; --rd-surface: #FFFFFF; --rd-hover: #F9FAFB; --rd-accent: var(--vr2-ember); --rd-accent-soft: var(--vr2-ember-50); --rd-pos: #16A34A; --rd-warn: #D97706; --rd-neg: #DC2626; --rd-info: #0284C7; --rd-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.07); --rd-shadow-md: 0 2px 4px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.08); } /* Bento grid v8.5.14: Tendencia(2) Mix(2) / Ventas(2) Stock(2) — 2×2 balanceado */ #page-dashboard .nd-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; } #page-dashboard .nd-tile-trend { grid-column: span 2; } #page-dashboard .nd-tile-mix { grid-column: span 2; } #page-dashboard .nd-tile-ventas { grid-column: span 2; } #page-dashboard .nd-tile-stock { grid-column: span 2; } #page-dashboard .nd-card { box-shadow: var(--rd-shadow) !important; } @media (max-width: 1180px) { #page-dashboard .nd-bento { grid-template-columns: repeat(2, minmax(0,1fr)); } #page-dashboard .nd-tile-trend, #page-dashboard .nd-tile-mix, #page-dashboard .nd-tile-ventas, #page-dashboard .nd-tile-stock { grid-column: span 2; } } /* Charts / pulse / badges al azul-frío */ #page-dashboard .nd-trend-pulse-core { background: var(--vr2-ember) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(240,83,30,.35), 0 2px 6px rgba(240,83,30,.35) !important; } #page-dashboard .nd-trend-pulse-halo { background: rgba(240,83,30,.42) !important; } #page-dashboard .nd-trend-vlabel-day { color: var(--vr2-ember) !important; } #page-dashboard .nd-trend-vlabel-amt { color: var(--rd-ink) !important; } #page-dashboard .nd-trend-badge.up { color: var(--rd-pos) !important; background: #DCFCE7 !important; } #page-dashboard .nd-trend-badge.down { color: var(--rd-neg) !important; background: #FEE2E2 !important; } /* Forzar la paleta exacta donde el CSS legacy del dashboard hardcodea warm */ #page-dashboard .nd-card { border-color: var(--rd-line) !important; } #page-dashboard .nd-venta-row, #page-dashboard .nd-sb-row, #page-dashboard .nd-rank-bar-wrap, #page-dashboard .nd-sb-bar-wrap { border-color: var(--rd-line-soft) !important; } #page-dashboard .nd-card-title, #page-dashboard .nd-trend-total, #page-dashboard .nd-kpi-stat-val, #page-dashboard .nd-rank-name, #page-dashboard .nd-rank-price, #page-dashboard .nd-venta-name, #page-dashboard .nd-venta-total, #page-dashboard .nd-sb-name, #page-dashboard .nd-mix-pct, #page-dashboard .nd-hero-greeting, #page-dashboard .nd-hero-greeting strong { color: var(--rd-ink) !important; } #page-dashboard .nd-hero-summary { color: var(--rd-ink-2) !important; } #page-dashboard .nd-card-kicker, #page-dashboard .nd-kpi-stat-l, #page-dashboard .nd-trend-sub, #page-dashboard .nd-venta-meta, #page-dashboard .nd-rank-meta, #page-dashboard .nd-rank-num, #page-dashboard .nd-sb-meta, #page-dashboard .nd-mix-lbl, #page-dashboard .nd-hero-date, #page-dashboard .nd-hero-local-tag, #page-dashboard .nd-hero-status, #page-dashboard .nd-empty { color: var(--rd-ink-3) !important; } /* ═══════════════════ END v8.5.2 (Dashboard Bento) ═══════════════════ */ /* ── PÁGINA 4 · LISTA DE PRECIOS — paleta nueva (v8.5.3, legacy warm → azul/frío) ── El body es la lista agrupada (#precios-list); header/búsqueda/botón viven en la topbar (chrome compartido warm-neutral → se deja). `.pr-*` NO usa tokens --rd-* y el legacy `#pages *{color:inherit}` (1,0,0) + reglas warm ganan a las clases base → overrides EXPLÍCITOS con !important. */ #pages:has(#page-precios.active) { background: #FAFAFA !important; } /* Grupo (categoría) */ #page-precios .pr-group-head { border-bottom-color: #E5E7EB !important; } #page-precios .pr-group-title { color: #6B7280 !important; } #page-precios .pr-group-count { color: var(--vr2-ember) !important; background: var(--vr2-ember-50) !important; } /* Card de filas */ #page-precios .pr-rows-wrap { border-color: #E5E7EB !important; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06) !important; } #page-precios .pr-row { border-bottom-color: #F3F4F6 !important; } #page-precios .pr-row-head:hover, #page-precios .pr-row.is-open .pr-row-head { background: #F9FAFB !important; } #page-precios .pr-row-nombre { color: #111827 !important; } #page-precios .pr-row-meta { color: #9CA3AF !important; } #page-precios .pr-row-toggle { color: #6B7280 !important; } #page-precios .pr-row-head:hover .pr-row-toggle { color: var(--vr2-ember) !important; } /* Input de precio (editable) */ #page-precios .pr-precio-input { color: #111827 !important; } #page-precios .pr-precio-input::placeholder { color: #9CA3AF !important; } #page-precios .pr-precio-input:focus { border-color: var(--vr2-ember) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(240,83,30,.12) !important; } #page-precios .pr-precio-input.is-dirty { border-color: var(--vr2-ember) !important; background: var(--vr2-ember-50) !important; color: var(--vr2-ember) !important; } /* Historial expandido */ #page-precios .pr-hist { border-top-color: #F3F4F6 !important; background: #F9FAFB !important; } #page-precios .pr-hist-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 16px; border-top: 1px solid rgba(17,24,39,.05); } #page-precios .pr-hist-row:first-child { border-top: none; } #page-precios .pr-hist-precio { color: #111827 !important; font-family: var(--mono); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; } #page-precios .pr-hist-motivo { flex: 1; color: #6B7280 !important; font-size: 11.5px; } #page-precios .pr-hist-fecha { color: #9CA3AF !important; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; } #page-precios .pr-hist-empty { color: #9CA3AF !important; } /* Botón primario "Actualizar precio" (relocado a la topbar) → azul sólido (Stripe/Linear). `.pr-save-btn` es único de precios → seguro overridearlo sin tocar otras páginas. */ .pr-save-btn, #tb-primary-zone .pr-save-btn { background: var(--vr2-ember) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(17,24,39,.10), 0 2px 6px rgba(240,83,30,.28) !important; } .pr-save-btn:hover, #tb-primary-zone .pr-save-btn:hover { background: #1D4ED8 !important; box-shadow: 0 4px 12px rgba(240,83,30,.36) !important; } .pr-save-btn::before, #tb-primary-zone .pr-save-btn::before { background: linear-gradient(to right, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 40%, transparent 66%) !important; } .pr-save-btn .pr-btn-label svg, #tb-primary-zone .pr-save-btn .pr-btn-label svg { color: #fff !important; stroke: #fff !important; } /* Estado "guardado" → verde nuevo */ .pr-save-btn.is-success, #tb-primary-zone .pr-save-btn.is-success { background: #16A34A !important; box-shadow: 0 4px 14px rgba(22,163,74,.32) !important; } /* ═══════════════════ END v8.5.3 (Lista de precios) ═══════════════════ */ /* ── PÁGINA · MOVIMIENTOS SPLIT VIEW (v8.5.6) — full-height, sin scroll del body ── Izquierda: filtros (fijo) + tabla (scroll interno, MISMA tabla) + "Ver más". Derecha: el #mov-inspector (antes drawer fixed) ahora es panel estático persistente. KPIs eliminados de la vista. */ #page-movimientos.section-core .mv2-kpi-strip { display: none !important; } /* Body sin scroll en esta página; el split llena el alto disponible */ #pages:has(#page-movimientos.active) { overflow: hidden !important; } #page-movimientos.section-core { height: 100% !important; min-height: 0 !important; overflow: hidden !important; padding: 26px 38px 26px !important; } #page-movimientos.section-core .mv2-active-chips { flex-shrink: 0 !important; } /* Split row */ #page-movimientos.section-core .mv-split { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; gap: 18px !important; overflow: hidden !important; } /* Izquierda */ #page-movimientos.section-core .mv-split-left { flex: 0 0 56% !important; max-width: 56% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; } #page-movimientos.section-core .mv-split-left .mv2-toolbar { flex-shrink: 0 !important; margin-bottom: 12px !important; } #page-movimientos.section-core .mv-split-left .mv-body { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; } #page-movimientos.section-core .mv-split-left .mv-table-card { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Tabla compactada para entrar completa (table-layout fixed + anchos + truncado). Mantiene columnas, datos, fuentes, colores y dots; solo ajusta anchos y trunca PRODUCTO. */ #page-movimientos.section-core .mv-split-left .mv-table { table-layout: fixed !important; } #page-movimientos.section-core .mv-split-left .mv-table thead th, #page-movimientos.section-core .mv-split-left .mv-table tbody td { padding-left: 11px !important; padding-right: 11px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #page-movimientos.section-core .mv-split-left .mv-table th:nth-child(1), #page-movimientos.section-core .mv-split-left .mv-table td:nth-child(1) { width: 106px !important; } #page-movimientos.section-core .mv-split-left .mv-table th:nth-child(2), #page-movimientos.section-core .mv-split-left .mv-table td:nth-child(2) { width: 84px !important; } #page-movimientos.section-core .mv-split-left .mv-table th:nth-child(4), #page-movimientos.section-core .mv-split-left .mv-table td:nth-child(4) { width: 60px !important; } #page-movimientos.section-core .mv-split-left .mv-table th:nth-child(5), #page-movimientos.section-core .mv-split-left .mv-table td:nth-child(5) { width: 110px !important; } #page-movimientos.section-core .mv-split-left .mv-table th:nth-child(6), #page-movimientos.section-core .mv-split-left .mv-table td:nth-child(6) { width: 94px !important; } #page-movimientos.section-core .mv-split-left .mv-table th:nth-child(7), #page-movimientos.section-core .mv-split-left .mv-table td:nth-child(7) { width: 32px !important; } /* PRODUCTO (3ª) toma el resto; nombre + sub-línea cliente truncan con … */ #page-movimientos.section-core .mv-split-left .mv-producto-txt, #page-movimientos.section-core .mv-split-left .mv-producto-cli { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* header sólido (al scrollear, las filas no se transparentan bajo el thead) */ #page-movimientos.section-core .mv-split-left .mv-table thead th { background: var(--rd-surface) !important; } /* "Ver más" ahora vive DENTRO de la card, al final de la lista (scrollea con las filas) */ /* Derecha — inspector de drawer fixed → panel estático que llena la columna */ #page-movimientos.section-core .mv-split-right { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; display: flex !important; overflow: hidden !important; } #page-movimientos.section-core #mov-inspector { position: static !important; inset: auto !important; right: auto !important; top: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; height: 100% !important; border: 1px solid var(--rd-line) !important; border-radius: 14px !important; box-shadow: none !important; transition: none !important; z-index: auto !important; contain: layout !important; background: var(--rd-surface) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #page-movimientos.section-core #mov-inspector .mov-ins-empty { margin: auto !important; text-align: center !important; font-family: var(--rd-sans) !important; font-size: 13px !important; color: var(--rd-ink-3) !important; line-height: 1.6 !important; } /* contenido del detalle scrollea internamente */ #page-movimientos.section-core #mov-inspector .mvd-doc { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; } #page-movimientos.section-core #mov-inspector .mvd-foot { flex-shrink: 0 !important; } /* ── Detalle de venta redesign (mvd2) — estilo mock, paleta nueva ── */ #mov-inspector .mvd2 { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; font-family: var(--rd-sans); } /* Header */ #mov-inspector .mvd2-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--rd-line); } #mov-inspector .mvd2-head-l { display: flex; align-items: center; gap: 9px; min-width: 0; } #mov-inspector .mvd2-title { font-size: 16px; font-weight: 600; color: var(--rd-ink); margin: 0; letter-spacing: -.01em; white-space: nowrap; } #mov-inspector .mvd2-title-num { font-family: var(--rd-mono); font-weight: 600; } #mov-inspector .mvd2-copy { width: 24px; height: 24px; border: none; background: transparent; color: var(--rd-ink-3); cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #mov-inspector .mvd2-copy:hover { background: var(--rd-hover); color: var(--rd-ink-2); } #mov-inspector .mvd2-copy.mvd-copy-ok { color: var(--rd-pos); } #mov-inspector .mvd2-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } #mov-inspector .mvd2-st-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } #mov-inspector .mvd2-st-ok { color: #15803D; background: #DCFCE7; } #mov-inspector .mvd2-st-info { color: var(--rd-info); background: #E0F2FE; } #mov-inspector .mvd2-st-warn { color: #B45309; background: #FEF3C7; } #mov-inspector .mvd2-st-anulada { color: var(--rd-neg); background: #FEE2E2; } #mov-inspector .mvd2-head-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } #mov-inspector .mvd2-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--rd-line); border-radius: 8px; background: var(--rd-surface); color: var(--rd-ink-2); font-family: var(--rd-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .14s, border-color .14s; white-space: nowrap; } #mov-inspector .mvd2-btn:hover { background: var(--rd-hover); color: var(--rd-ink); } #mov-inspector .mvd2-btn svg { color: var(--rd-ink-3); } #mov-inspector .mvd2-dd { position: relative; } #mov-inspector .mvd2-dd-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); min-width: 152px; background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 10px; box-shadow: var(--rd-shadow-md); padding: 5px; z-index: 5; } #mov-inspector .mvd2-dd.open .mvd2-dd-menu { display: block; } #mov-inspector .mvd2-dd-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--rd-ink); font-family: var(--rd-sans); font-size: 13px; cursor: pointer; border-radius: 7px; text-align: left; } #mov-inspector .mvd2-dd-menu button:hover { background: var(--rd-hover); } #mov-inspector .mvd2-dd-menu button svg { color: var(--rd-ink-3); flex-shrink: 0; } #mov-inspector .mvd2-dd-danger { color: var(--rd-neg) !important; } #mov-inspector .mvd2-dd-danger:hover { background: #FEE2E2 !important; } #mov-inspector .mvd2-dd-danger svg { color: var(--rd-neg) !important; } /* Body — altura fija: Info general (arriba) + Productos (scroll interno) + Notas/Total (abajo, siempre visibles) */ #mov-inspector .mvd2-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--rd-bg, #FAFAFA); } #mov-inspector .mvd2-body > * { flex-shrink: 0; } #mov-inspector .mvd2-prod-card { flex: 1 1 auto; min-height: 90px; display: flex; flex-direction: column; overflow: hidden; } #mov-inspector .mvd2-prod-card .mvd2-card-title { flex-shrink: 0; } #mov-inspector .mvd2-prod-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; } #mov-inspector .mvd2-prod thead th { position: sticky; top: 0; background: var(--rd-surface); z-index: 1; } #mov-inspector .mvd2-card { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 12px; padding: 15px 16px; } #mov-inspector .mvd2-card-title { font-size: 13px; font-weight: 600; color: var(--rd-ink); margin: 0 0 13px; display: flex; align-items: center; gap: 8px; } #mov-inspector .mvd2-count { font-family: var(--rd-mono); font-size: 11px; font-weight: 600; color: var(--rd-ink-3); background: var(--rd-hover); border-radius: 20px; padding: 1px 8px; } /* Info grid */ #mov-inspector .mvd2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; } #mov-inspector .mvd2-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #mov-inspector .mvd2-fl { font-size: 11px; color: var(--rd-ink-3); font-weight: 500; } #mov-inspector .mvd2-fv { font-size: 13.5px; color: var(--rd-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mov-inspector .mvd2-fv-pago { display: flex; align-items: center; gap: 7px; } #mov-inspector .mvd2-pago-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-ink-3); flex-shrink: 0; } #mov-inspector .mvd2-pago-dot.mvd-dot-cash { background: var(--rd-pos); } #mov-inspector .mvd2-pago-dot.mvd-dot-tx { background: var(--rd-info); } #mov-inspector .mvd2-pago-dot.mvd-dot-card { background: var(--rd-warn); } #mov-inspector .mvd2-pago-dot.mvd-dot-caja { background: #8C6A4A; } /* Products table */ #mov-inspector .mvd2-prod { width: 100%; border-collapse: collapse; } #mov-inspector .mvd2-prod thead th { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-ink-3); text-align: left; padding: 0 8px 9px; border-bottom: 1px solid var(--rd-line); } #mov-inspector .mvd2-prod th.mvd2-r, #mov-inspector .mvd2-prod td.mvd2-pc-unit, #mov-inspector .mvd2-prod td.mvd2-pc-total { text-align: right; } #mov-inspector .mvd2-prod th.mvd2-c, #mov-inspector .mvd2-prod td.mvd2-pc-cant { text-align: center; } #mov-inspector .mvd2-prow td { padding: 10px 8px; border-bottom: 1px solid var(--rd-line-soft); font-size: 13px; color: var(--rd-ink); vertical-align: middle; } #mov-inspector .mvd2-prow:last-child td { border-bottom: none; } #mov-inspector .mvd2-pname { font-weight: 500; } /* v8.5.18 · Thumb con foto del producto en cada fila del detalle */ #mov-inspector .mvd2-pname-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; } #mov-inspector .mvd2-pthumb { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 7px; background: var(--rd-hover); color: var(--rd-ink-3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; overflow: hidden; } #mov-inspector .mvd2-pthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #mov-inspector .mvd2-pname-txt { min-width: 0; } #mov-inspector .mvd2-plote { display: block; font-size: 10.5px; color: var(--rd-ink-3); margin-top: 2px; } #mov-inspector .mvd2-gift { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #15803D; background: #DCFCE7; padding: 1px 5px; border-radius: 4px; margin-left: 6px; } #mov-inspector .mvd2-pc-cant, #mov-inspector .mvd2-pc-unit { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-ink-2); white-space: nowrap; } #mov-inspector .mvd2-pc-total { font-family: var(--rd-mono); font-weight: 600; white-space: nowrap; color: var(--rd-ink); } #mov-inspector .mvd2-gift-txt { color: var(--rd-pos); } #mov-inspector .mvd2-pdel { opacity: 0; margin-left: 8px; width: 22px; height: 22px; border: none; background: transparent; color: var(--rd-ink-3); cursor: pointer; border-radius: 5px; vertical-align: middle; transition: opacity .12s; } #mov-inspector .mvd2-prow:hover .mvd2-pdel { opacity: 1; } #mov-inspector .mvd2-pdel:hover { background: #FEE2E2; color: var(--rd-neg); } /* Bottom: notas + totales */ #mov-inspector .mvd2-bottom { display: flex; flex-wrap: wrap; gap: 15px; } #mov-inspector .mvd2-notas-card { flex: 1 1 190px; min-width: 0; } #mov-inspector .mvd2-notas { font-size: 12.5px; color: var(--rd-ink-2); line-height: 1.5; margin: 0; } #mov-inspector .mvd2-tot-card { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 9px; } #mov-inspector .mvd2-tot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--rd-ink-2); } #mov-inspector .mvd2-mono { font-family: var(--rd-mono); font-variant-numeric: tabular-nums; color: var(--rd-ink); } #mov-inspector .mvd2-tot-disc, #mov-inspector .mvd2-tot-disc .mvd2-mono { color: var(--rd-neg); } #mov-inspector .mvd2-tot-final { margin-top: 3px; padding-top: 11px; border-top: 1px solid var(--rd-line); font-size: 15px; font-weight: 700; color: var(--rd-ink); } #mov-inspector .mvd2-tot-final .mvd2-mono { font-weight: 700; font-size: 16px; } /* ── v8.5.18 · Backdrop del detalle (solo visible en modo drawer + .open) ── */ #page-movimientos .mv-ins-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 250; border: none; margin: 0; padding: 0; } /* ── v8.5.18 · Responsive: desktop chico / tablet → lista full-width + detalle como DRAWER ── */ @media (max-width: 1200px) { /* La lista de movimientos pasa a ocupar todo el ancho */ #page-movimientos.section-core .mv-split-left { flex: 1 1 100% !important; max-width: 100% !important; } /* El panel derecho se vuelve un drawer flotante desde la derecha (mismo ancho que el split). v8.5.20 · top 68px → arranca DEBAJO de la topbar (56px) para que la cabecera no quede tapada. */ #page-movimientos.section-core .mv-split-right { position: fixed !important; top: 68px !important; right: 12px !important; bottom: 12px !important; left: auto !important; width: 440px !important; max-width: calc(100vw - 24px) !important; flex: none !important; z-index: 260 !important; overflow: visible !important; transform: translateX(calc(100% + 20px)); transition: transform .42s cubic-bezier(.16,1,.3,1) !important; pointer-events: none; } /* Drawer abierto cuando hay una venta seleccionada (el inspector renderiza .mvd2) */ #page-movimientos.section-core .mv-split-right:has(.mvd2) { transform: translateX(0); pointer-events: auto; } /* El inspector recupera la sombra de drawer flotante */ #page-movimientos.section-core #mov-inspector { border-radius: 16px !important; box-shadow: -8px 4px 24px rgba(17,24,39,.10), -20px 8px 48px rgba(17,24,39,.10) !important; } #page-movimientos .mv-ins-overlay.open { opacity: 1; pointer-events: auto; } /* v8.5.20 · En el drawer el detalle scrollea COMPLETO: el footer (notas + total) deja de ser fijo y la lista de productos no scrollea aparte → todo en un solo scroll, menos apretado. */ #page-movimientos.section-core #mov-inspector .mvd2-body { overflow-y: auto !important; } #page-movimientos.section-core #mov-inspector .mvd2-prod-card { flex: 0 0 auto !important; min-height: 0 !important; overflow: visible !important; } #page-movimientos.section-core #mov-inspector .mvd2-prod-wrap { overflow: visible !important; } } /* ═══════════════════ END v8.5.6 (Movimientos Split — layout) ═══════════════════ */ /* ── PÁGINA · VENCIMIENTOS — rediseño layout como mock (v8.5.8) · ETAPA A: reflow ── 2-columnas (panel 280px + tabla) → apilado: asistente + 3 cards en fila arriba + tabla full-width abajo + page bg #FAFAFA. CSS-only (arquitectura intacta). Paleta nueva + cards mock-style + columna Estado → etapas siguientes. */ #pages:has(#page-vencimientos.active) { background: #FAFAFA !important; } #page-vencimientos .v-layout { flex-direction: column !important; gap: 16px !important; align-items: stretch !important; } #page-vencimientos .v-panel { width: 100% !important; min-width: 0 !important; max-width: none !important; position: static !important; top: auto !important; } #page-vencimientos .v-kpis { flex-direction: row !important; flex-wrap: wrap !important; gap: 14px !important; align-items: stretch !important; } #page-vencimientos .v-kpi { flex: 1 1 220px !important; min-width: 0 !important; } #page-vencimientos .v-main { width: 100% !important; } /* ── ETAPA C: cards mock-style (vk-*) en paleta nueva ── */ #page-vencimientos .v-kpi.vk-card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06) !important; padding: 16px 18px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } #page-vencimientos .vk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #page-vencimientos .vk-head-txt { min-width: 0; } #page-vencimientos .vk-title { font-family: var(--rd-sans); font-size: 14px; font-weight: 600; color: #111827; letter-spacing: -.01em; } #page-vencimientos .vk-sub { font-family: var(--rd-sans); font-size: 11.5px; color: #6B7280; margin-top: 3px; line-height: 1.4; } #page-vencimientos .vk-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #page-vencimientos .vk-ico--blue { background: var(--vr2-ember-50); color: var(--vr2-ember); } #page-vencimientos .vk-ico--red { background: #FEE2E2; color: #DC2626; } #page-vencimientos .vk-ico--amber { background: #FEF3C7; color: #D97706; } #page-vencimientos .vk-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex: 1 1 auto; min-height: 54px; } #page-vencimientos .vk-mid--list { align-items: flex-start; } #page-vencimientos .vk-num-wrap { flex-shrink: 0; } #page-vencimientos .vk-num { font-family: var(--rd-sans); font-size: 36px; font-weight: 700; line-height: 1; color: var(--vr2-ember); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } #page-vencimientos .vk-num--red { color: #DC2626; } #page-vencimientos .vk-num--amber { color: #D97706; } #page-vencimientos .vk-num-lbl { font-family: var(--rd-sans); font-size: 11.5px; color: #6B7280; margin-top: 5px; } #page-vencimientos .vk-viz { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: flex-end; } #page-vencimientos .vk-spark { width: 100%; height: 42px; display: block; } #page-vencimientos .vk-cta { align-self: flex-start; font-family: var(--rd-sans); font-size: 12.5px; font-weight: 500; color: var(--vr2-ember); background: transparent; border: none; padding: 2px 0 0; cursor: pointer; } #page-vencimientos .vk-cta--red { color: #DC2626; } #page-vencimientos .vk-cta--amber { color: #D97706; } #page-vencimientos .vk-cta:hover { text-decoration: underline; } /* Card 3 · lista de "sin controlar" (reusa #vc2-sc-cards) restyle a mini-lista */ #page-vencimientos .vk-sclist { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: column !important; gap: 0 !important; max-height: 96px; overflow: hidden; } #page-vencimientos .vk-sclist .v3-sc-chip { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 3px 0 !important; margin: 0 !important; cursor: pointer; font-family: var(--rd-sans) !important; animation: none !important; } #page-vencimientos .vk-sclist .v3-sc-chip:hover { background: transparent !important; } #page-vencimientos .vk-sclist .v3-sc-chip-name { font-size: 12px !important; color: #374151 !important; font-weight: 500 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-vencimientos .vk-sclist .v3-sc-chip-diff { font-family: var(--rd-mono) !important; font-size: 11px !important; font-weight: 600 !important; color: #9CA3AF !important; background: transparent !important; flex-shrink: 0; padding: 0 !important; } /* ── ETAPA D+B: tabla en paleta nueva + columna Estado (pills) ── */ #page-vencimientos .v-table-container { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06) !important; overflow: hidden; } #page-vencimientos .v-table-meta { padding: 15px 18px 2px !important; } #page-vencimientos .v-table-count { font-family: var(--rd-sans) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .04em !important; color: #9CA3AF !important; text-transform: uppercase; } #page-vencimientos .v-table { width: 100% !important; border-collapse: collapse !important; } #page-vencimientos .v-table thead th { font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .04em !important; text-transform: uppercase; color: #9CA3AF !important; text-align: left; padding: 13px 16px 11px !important; background: #FFFFFF !important; border-bottom: 1px solid #E5E7EB !important; } #page-vencimientos .v-table thead th.lxg-td-right { text-align: right !important; } #page-vencimientos .v-table thead th.lxg-td-center { text-align: center !important; } #page-vencimientos .v-table tbody td { padding: 12px 16px !important; border-bottom: 1px solid #F3F4F6 !important; vertical-align: middle !important; font-size: 13px !important; color: #111827 !important; background: transparent !important; } #page-vencimientos .v-row:hover td { background: #F9FAFB !important; } #page-vencimientos .v-prod-name { font-family: var(--rd-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: #111827 !important; display: block; } #page-vencimientos .v-prod-cat { font-family: var(--rd-sans) !important; font-size: 11px !important; color: #9CA3AF !important; display: block; margin-top: 2px; } #page-vencimientos .v-table .lxg-mono { font-family: var(--rd-mono) !important; font-size: 12px !important; } #page-vencimientos .v-table .lxg-muted { color: #6B7280 !important; } /* Vencimiento — fecha + días */ #page-vencimientos .v-venc-cell { display: flex; flex-direction: column; gap: 2px; } #page-vencimientos .v-venc-date { font-family: var(--rd-sans) !important; font-size: 12.5px; color: #111827; font-weight: 500; white-space: nowrap; } #page-vencimientos .v-venc-days { font-family: var(--rd-sans) !important; font-size: 11px; white-space: nowrap; } #page-vencimientos .v-vd-red { color: #DC2626; } #page-vencimientos .v-vd-amber { color: #D97706; } #page-vencimientos .v-vd-muted { color: #9CA3AF; } /* Local chip */ #page-vencimientos .v-table .v-local { display: inline-flex !important; align-items: center; font-family: var(--rd-sans) !important; font-size: 10.5px !important; font-weight: 600 !important; color: #6B7280 !important; background: #F3F4F6 !important; border: none !important; border-radius: 5px !important; padding: 3px 8px !important; } /* Estado — pills */ #page-vencimientos .vest { display: inline-flex; align-items: center; font-family: var(--rd-sans); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } #page-vencimientos .vest-vencido, #page-vencimientos .vest-critico { color: #DC2626; background: #FEE2E2; } #page-vencimientos .vest-pv { color: #B45309; background: #FEF3C7; } #page-vencimientos .vest-proximo { color: #A16207; background: #FEF9C3; } #page-vencimientos .vest-ok { color: #15803D; background: #DCFCE7; } /* Group header row */ #page-vencimientos .v-group-row td { padding: 18px 16px 8px !important; border-bottom: none !important; background: transparent !important; } #page-vencimientos .v-group-label { display: flex !important; align-items: center; gap: 9px !important; } #page-vencimientos .v-group-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } #page-vencimientos .v-gdot-danger { background: #DC2626 !important; } #page-vencimientos .v-gdot-amber { background: #D97706 !important; } #page-vencimientos .v-gdot-blue { background: var(--vr2-ember) !important; } #page-vencimientos .v-gdot-neutral { background: #9CA3AF !important; } #page-vencimientos .v-gdot-green { background: #16A34A !important; } #page-vencimientos .v-group-name { font-family: var(--rd-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase; color: #6B7280 !important; } #page-vencimientos .v-group-count { font-family: var(--rd-sans) !important; font-size: 11px !important; color: #9CA3AF !important; } #page-vencimientos .v-group-actions { margin-left: auto !important; display: flex; align-items: center; gap: 8px; } #page-vencimientos .v-resolve-all { font-family: var(--rd-sans) !important; font-size: 11.5px !important; font-weight: 500 !important; color: #DC2626 !important; background: #FEE2E2 !important; border: none !important; border-radius: 7px !important; padding: 5px 11px !important; cursor: pointer; } #page-vencimientos .v-resolve-all:hover { background: #FECACA !important; } #page-vencimientos .v-group-chevron { color: #9CA3AF !important; cursor: pointer; display: inline-flex; } /* Acciones */ #page-vencimientos .v-row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } #page-vencimientos .v-row-actions .lxg-btn--ember { background: var(--vr2-ember-50) !important; color: var(--vr2-ember) !important; border: none !important; box-shadow: none !important; font-weight: 500 !important; } #page-vencimientos .v-row-actions .lxg-btn--ember:hover { background: var(--vr2-ember-100) !important; } #page-vencimientos .v-row-actions .lxg-icon-btn { color: #9CA3AF !important; background: transparent !important; border: none !important; } #page-vencimientos .v-row-actions .lxg-icon-btn:hover { color: var(--vr2-ember) !important; background: #F3F4F6 !important; } /* "En buen estado" hint */ #page-vencimientos .v-bien-hint { margin: 4px 16px 12px !important; background: #F9FAFB !important; border: 1px solid #F3F4F6 !important; border-radius: 9px !important; } #page-vencimientos .v-bien-label { color: #6B7280 !important; font-family: var(--rd-sans) !important; } #page-vencimientos .v-bien-count, #page-vencimientos .v-bien-expand { color: #9CA3AF !important; font-family: var(--rd-sans) !important; } #page-vencimientos .v-bien-dot { background: #16A34A !important; } /* ── ETAPA B: asistente Identity-First → paleta nueva ── */ #page-vencimientos #venc-asistente .va-card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06) !important; } #page-vencimientos #venc-asistente .va-card.critico { border-left: 3px solid #DC2626 !important; } #page-vencimientos #venc-asistente .va-card.atencion { border-left: 3px solid #D97706 !important; } #page-vencimientos #venc-asistente .va-card.ok { border-left: 3px solid #16A34A !important; } #page-vencimientos #venc-asistente .va-avatar { background: #F3F4F6 !important; color: #6B7280 !important; } #page-vencimientos #venc-asistente .va-avatar-critico { background: #FEE2E2 !important; color: #DC2626 !important; } #page-vencimientos #venc-asistente .va-avatar-atencion { background: #FEF3C7 !important; color: #D97706 !important; } #page-vencimientos #venc-asistente .va-avatar-ok { background: #DCFCE7 !important; color: #16A34A !important; } #page-vencimientos #venc-asistente .va-hero-eyebrow { color: #9CA3AF !important; font-family: var(--rd-mono) !important; } #page-vencimientos #venc-asistente .va-titulo { color: #111827 !important; font-family: var(--rd-sans) !important; } #page-vencimientos #venc-asistente .va-cuerpo { color: #6B7280 !important; font-family: var(--rd-sans) !important; } #page-vencimientos #venc-asistente .va-ts { color: #9CA3AF !important; font-family: var(--rd-sans) !important; } #page-vencimientos #venc-asistente .va-prod-pill { font-family: var(--rd-mono) !important; border: none !important; } #page-vencimientos #venc-asistente .va-prod-pill.critico { background: #FEE2E2 !important; color: #DC2626 !important; } #page-vencimientos #venc-asistente .va-prod-pill.atencion { background: #FEF3C7 !important; color: #B45309 !important; } #page-vencimientos #venc-asistente .va-icon-critico, #page-vencimientos #venc-asistente .va-icon-mini.va-icon-critico { color: #DC2626 !important; } #page-vencimientos #venc-asistente .va-icon-atencion { color: #D97706 !important; } #page-vencimientos #venc-asistente .va-icon-ok { color: #16A34A !important; } #page-vencimientos #venc-asistente .va-btn-ok { background: var(--vr2-ember) !important; color: #fff !important; border: none !important; } #page-vencimientos #venc-asistente .va-btn-ok:hover { background: #1D4ED8 !important; } /* ── v8.5.9 · ajustes: sin asistente, charts reales (Chart.js), sin-controlar scroll + expand ── */ /* Eliminar el asistente + el header vacío (línea + espacio) de arriba */ #page-vencimientos #venc-asistente { display: none !important; } #page-vencimientos .v3-header { display: none !important; } /* Charts reales (canvas Chart.js) en las cards KPI */ #page-vencimientos .vk-viz { flex: 1 1 auto !important; min-width: 0 !important; height: 48px !important; align-self: center !important; display: block !important; position: relative; } #page-vencimientos .vk-viz canvas { width: 100% !important; height: 100% !important; display: block; } /* Sin controlar — quick view scrollable + meta stock/lotes */ #page-vencimientos .vk-sclist { max-height: 104px !important; overflow-y: auto !important; padding-right: 2px; } #page-vencimientos .vk-sclist .v3-sc-chip { padding: 4px 0 !important; } #page-vencimientos .vk-sclist .v3-sc-chip-meta { font-family: var(--rd-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; color: #9CA3AF !important; flex-shrink: 0; white-space: nowrap; } #page-vencimientos .vk-sclist::-webkit-scrollbar { width: 5px; } #page-vencimientos .vk-sclist::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 3px; } /* Card flotante "Ver detalle" (Sin controlar) */ #vk-ctrl-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(17,24,39,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } #vk-ctrl-overlay.open { opacity: 1; pointer-events: auto; } #vk-ctrl-overlay .vkx-card { width: 100%; max-width: 540px; max-height: 80vh; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; box-shadow: 0 24px 60px rgba(17,24,39,.22); display: flex; flex-direction: column; overflow: hidden; font-family: var(--rd-sans); transform: scale(.97); transition: transform .22s cubic-bezier(.16,1,.3,1); } #vk-ctrl-overlay.open .vkx-card { transform: scale(1); } #vk-ctrl-overlay .vkx-head { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #E5E7EB; } #vk-ctrl-overlay .vkx-title { font-size: 15px; font-weight: 600; color: #111827; } #vk-ctrl-overlay .vkx-sub { font-size: 12px; color: #6B7280; margin-top: 3px; } #vk-ctrl-overlay .vkx-close { width: 30px; height: 30px; border: none; background: transparent; color: #9CA3AF; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; flex-shrink: 0; } #vk-ctrl-overlay .vkx-close:hover { background: #F3F4F6; color: #111827; } #vk-ctrl-overlay .vkx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; } #vk-ctrl-overlay .vkx-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 11px 12px; border: none; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--rd-sans); } #vk-ctrl-overlay .vkx-row:hover { background: #F9FAFB; } #vk-ctrl-overlay .vkx-name { font-size: 13.5px; font-weight: 500; color: #111827; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #vk-ctrl-overlay .vkx-nums { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } #vk-ctrl-overlay .vkx-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; min-width: 30px; } #vk-ctrl-overlay .vkx-stat-v { font-family: var(--rd-mono); font-size: 13px; font-weight: 700; color: #111827; } #vk-ctrl-overlay .vkx-stat-l { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #9CA3AF; margin-top: 2px; } #vk-ctrl-overlay .vkx-diff { font-family: var(--rd-mono); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; } #vk-ctrl-overlay .vkx-miss { background: #FEF3C7; color: #B45309; } #vk-ctrl-overlay .vkx-neg { background: #FEE2E2; color: #DC2626; } #vk-ctrl-overlay .vkx-pos { background: #DBEAFE; color: #2563EB; } #vk-ctrl-overlay .vkx-zero { background: #DCFCE7; color: #15803D; } #vk-ctrl-overlay .vkx-empty { padding: 40px; text-align: center; color: #9CA3AF; font-size: 13px; } /* ═══════════════════ END v8.5.8+9 (Vencimientos: reflow + cards charts + tabla Estado) ═══════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ v8.5.29 · ASISTENTE IA — "Preguntá a tus datos" (prototipo) Widget flotante global (abajo-izquierda, no choca con el chat-float). z-index 880 → tapado por el login (z 9000+) y debajo de los modales. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ v8.5.31 · WAGON INTELLIGENCE — sistema visual de IA (pill + card anclada) Reemplaza el shell del asistente (FAB + panel). Identidad Híbrido WAGON: ember de marca + acento violeta/cian. El motor del Copilot no cambia. ═══════════════════════════════════════════════════════════════════════════ */ @property --wi-angle { syntax: ''; inherits: false; initial-value: 0deg; } #aia-root { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 900; font-family: 'Geist', system-ui, sans-serif; --wi-ember: #F0531E; --wi-violet: #9333EA; --wi-cyan: #22D3EE; --wi-surface: #17131F; --wi-ink: #F4F2F7; display: flex; flex-direction: column; align-items: center; } .wi-hex { flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(147,51,234,.55)); animation: wiHexPulse 3s ease-in-out infinite; } /* ── PILL (showpiece) ── */ #wi-pill { position: relative; border: none; cursor: pointer; padding: 0; height: 40px; border-radius: 999px; background: transparent; isolation: isolate; transition: transform .2s cubic-bezier(.34,1.56,.64,1); } #wi-pill .wi-pill-bg { position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: #FFFFFF; box-shadow: 0 4px 18px rgba(17,24,39,.10), 0 1px 4px rgba(17,24,39,.06); } #wi-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; z-index: -1; background: conic-gradient(from var(--wi-angle), var(--wi-ember), var(--wi-violet), var(--wi-cyan), var(--wi-violet), var(--wi-ember)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: wiBorderRotate 7s linear infinite; } #wi-pill::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; z-index: -2; background: radial-gradient(60% 130% at 50% 50%, rgba(147,51,234,.30), rgba(240,83,30,.16) 55%, transparent 78%); filter: blur(9px); animation: wiGlowBreathe 4.5s ease-in-out infinite; } #wi-pill .wi-pill-content { display: flex; align-items: center; gap: 8px; padding: 0 15px 0 11px; height: 100%; } #wi-pill .wi-pill-label { font-size: 13px; font-weight: 600; letter-spacing: .01em; background: linear-gradient(92deg, var(--wi-ember), var(--wi-violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wi-pill .wi-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wi-cyan); box-shadow: 0 0 7px var(--wi-cyan); animation: wiDot 2s ease-in-out infinite; } #wi-pill:hover { transform: translateY(-2px) scale(1.03); } #wi-pill:active { transform: scale(.97); } @keyframes wiBorderRotate { to { --wi-angle: 360deg; } } @keyframes wiGlowBreathe { 0%,100% { opacity: .28; transform: scale(.97); } 50% { opacity: .52; transform: scale(1.04); } } @keyframes wiHexPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } } @keyframes wiDot { 0%,100% { opacity: .45; } 50% { opacity: 1; } } @supports not (background: conic-gradient(from var(--wi-angle), red, blue)) { #wi-pill::before { animation: none; background: linear-gradient(120deg, var(--wi-ember), var(--wi-violet), var(--wi-cyan)); } } /* ── CARD (dropdown anclado bajo la pill) ── */ #aia-panel.wi-card { margin-top: 12px; width: 420px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100vh - 150px); background: #fff; border: 1px solid #ECECEC; border-radius: 18px; box-shadow: 0 20px 60px rgba(17,24,39,.16), 0 0 0 1px rgba(17,24,39,.05); display: none; flex-direction: column; overflow: hidden; transform-origin: top center; } #aia-panel.wi-card.open { display: flex; animation: wiExpand .34s cubic-bezier(.16,1,.3,1); } @keyframes wiExpand { from { opacity: 0; transform: translateY(-8px) scaleY(.85) scaleX(.96); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } /* header glass oscuro con gradiente WI */ #aia-panel .wi-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 14px; background: #fff; border-bottom: 1px solid #ECECEC; } #aia-panel .wi-head-t { display: flex; align-items: center; gap: 9px; } #aia-panel .wi-head-titles { display: flex; flex-direction: column; line-height: 1.1; } #aia-panel .wi-head-name { font-size: 13.5px; font-weight: 600; color: #1F1F1F; letter-spacing: .01em; } #aia-panel .wi-head-sub { font-size: 10.5px; color: #9CA3AF; margin-top: 2px; } #aia-panel .wi-head-r { display: flex; align-items: center; gap: 4px; } #aia-panel #aia-cfg, #aia-panel #aia-x { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: #8E8E93; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s ease, color .15s ease; } #aia-panel #aia-cfg:hover, #aia-panel #aia-x:hover { background: #F4F4F5; color: #1F1F1F; } #aia-panel .aia-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: #fff; } #aia-panel .aia-welcome { margin: auto 0; } #aia-panel .aia-welcome-t { font-size: 15px; font-weight: 600; color: #17131F; } #aia-panel .aia-welcome-s { font-size: 12.5px; color: #6B7280; margin-top: 4px; line-height: 1.5; } #aia-panel .aia-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } #aia-panel .aia-chip { border: 1px solid #E5E7EB; background: #fff; color: #374151; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; padding: 7px 11px; border-radius: 10px; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease; animation: wiChipIn .4s cubic-bezier(.16,1,.3,1) backwards; } #aia-panel .aia-chip:nth-child(2) { animation-delay: .05s; } #aia-panel .aia-chip:nth-child(3) { animation-delay: .1s; } #aia-panel .aia-chip:nth-child(4) { animation-delay: .15s; } #aia-panel .aia-chip:hover { border-color: #D4D4D8; color: #1F1F1F; background: #F4F4F5; transform: translateY(-1px); } @keyframes wiChipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #aia-panel .aia-msg { font-size: 13.5px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; animation: wiMsgIn .3s cubic-bezier(.16,1,.3,1); } #aia-panel .aia-msg--user { align-self: flex-end; max-width: 85%; padding: 9px 13px; border-radius: 16px; background: #F4F4F5; color: #1F1F1F; } #aia-panel .aia-msg--ai { align-self: stretch; max-width: 100%; padding: 2px 1px 6px; color: #1F1F1F; } #aia-panel .aia-msg--ai strong { font-weight: 600; color: #111; } #aia-panel .aia-li { display: block; margin: 1px 0; } @keyframes wiMsgIn { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } } #aia-panel .aia-typing { display: inline-flex; gap: 4px; align-items: center; } #aia-panel .aia-typing span { width: 7px; height: 7px; border-radius: 50%; background: #C7C7CC; animation: wiThinking 1.1s infinite ease-in-out both; } #aia-panel .aia-typing span:nth-child(2) { animation-delay: .15s; } #aia-panel .aia-typing span:nth-child(3) { animation-delay: .3s; } @keyframes wiThinking { 0%, 80%, 100% { opacity: .3; transform: translateY(0) scale(.8); } 40% { opacity: 1; transform: translateY(-3px) scale(1); } } #aia-panel .wi-foot { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid #F0F0F3; background: #fff; } #aia-panel .aia-input { flex: 1; height: 40px; border: 1px solid #E5E7EB; border-radius: 11px; padding: 0 13px; font-family: inherit; font-size: 13px; color: #17131F; background: #F9FAFB; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } #aia-panel .aia-input:focus { border-color: #A1A1AA; background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.04); } #aia-panel .aia-input::placeholder { color: #9CA3AF; } #aia-panel .aia-send { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 11px; cursor: pointer; background: #1F1F1F; color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .12s ease, background .15s ease; } #aia-panel .aia-send:hover { background: #000; transform: translateY(-1px); } #aia-panel .aia-send:active { transform: scale(.94); } #aia-panel .aia-keycard { margin: auto 0; } #aia-panel .aia-provs { display: flex; gap: 6px; margin: 10px 0 12px; } #aia-panel .aia-prov { flex: 1; height: 32px; border: 1px solid #E5E7EB; background: #fff; color: #6B7280; border-radius: 9px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } #aia-panel .aia-prov.active { background: #F4F4F5; border-color: #1F1F1F; color: #1F1F1F; } #aia-panel .aia-key-t { font-size: 14.5px; font-weight: 600; color: #17131F; } #aia-panel .aia-key-s { font-size: 12.5px; color: #6B7280; margin: 5px 0 12px; line-height: 1.5; } #aia-panel .aia-key-in { width: 100%; height: 38px; border: 1px solid #E5E7EB; border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 13px; color: #17131F; outline: none; box-sizing: border-box; } #aia-panel .aia-key-in:focus { border-color: #A1A1AA; } #aia-panel .aia-key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } #aia-panel .aia-key-link { font-size: 12px; font-weight: 500; color: #1F1F1F; text-decoration: none; } #aia-panel .aia-key-link:hover { text-decoration: underline; } #aia-panel .aia-key-save { height: 34px; padding: 0 16px; border: none; border-radius: 9px; background: #1F1F1F; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; } #aia-panel .aia-key-clear { margin-top: 14px; background: none; border: none; color: #9CA3AF; font-family: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; padding: 0; } @media (max-width: 720px) { #aia-root { top: 60px; } #wi-pill .wi-pill-label { display: none; } #wi-pill .wi-pill-content { padding: 0 12px; } #aia-panel.wi-card { width: calc(100vw - 20px); height: calc(100dvh - 130px); } } @media (prefers-reduced-motion: reduce) { #wi-pill::before, #wi-pill::after, .wi-hex, #wi-pill .wi-dot, #aia-panel .aia-chip, #aia-panel .aia-msg, #aia-panel .aia-typing span, #aia-panel.wi-card.open { animation: none !important; } } /* ═══════════════════ END v8.5.31 (WAGON Intelligence) ═══════════════════ */