/* Extraido desde la-estancia-black-v6.3.31.html (solo estilos del ) */ :root { /* WAGON Identity 2026 */ --parch: #f5efe6; --parch2: #ede4d7; --parch3: #d9ccba; --leather: #1a1410; --leather2: #2c2219; --leather-dark: #1f1914; --gold: #c8622a; --gold-lt: #e07a45; --gold-bg: rgba(200, 98, 42, 0.1); --gold-ln: rgba(200, 98, 42, 0.3); --char: #1a1410; --char2: rgba(26, 20, 16, 0.82); --char3: rgba(26, 20, 16, 0.70); --red: #b53a2a; --green: #2d7a4f; --amber: #a0620a; --blue: #2a5a8c; --grad-ember: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 50%, #C85A20 100%); --grad-dark: linear-gradient(160deg, var(--char) 0%, var(--leather2) 60%, var(--char) 100%); --shadow-warm: 0 4px 24px rgba(200, 98, 42, 0.18); --shadow-deep: 0 8px 32px rgba(26, 20, 16, 0.24); --sidebar: 232px; --topbar: 54px; --r: 8px; --r2: 14px; --sans: "Inter", system-ui, sans-serif; --serif: 'Fraunces', Georgia, serif; --mono: "IBM Plex Mono", monospace; /* ── Chrome (Sidebar + Topbar comparten la misma fuente) ── */ --chrome-bg: #0e0b08; --chrome-dark: #3d3028; --topbar-bg: #0e0b08; /* ── Cards / Paneles contenedores ── */ --card-bg: var(--parch); --card-bg-alt: var(--parch2); --card-border: 1px solid rgba(200, 98, 42, 0.16); --card-border-thin: 1px solid rgba(200, 98, 42, 0.10); --card-radius: var(--r2); --card-shadow: 0 2px 12px rgba(26, 20, 16, 0.07), 0 0 0 1px rgba(200, 98, 42, 0.05); --card-shadow-hover: 0 8px 32px rgba(26, 20, 16, 0.13), 0 0 0 1px rgba(200, 98, 42, 0.18); /* ── Texto sobre superficies oscuras ── */ --text-on-dark: #f0e6d6; /* ── Fondo de página (body + .page) ── */ --page: #f5efe6; /* ── Superficies (aliases semánticos) ── */ --surface-0: var(--parch); --surface-1: var(--parch2); --surface-2: var(--parch3); /* ── 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-mid: rgba(110, 83, 56, 0.28); --line-strong: rgba(110, 83, 56, 0.38); /* ── Ember (alias de --gold) ── */ --ember: var(--gold); --ember-lt: var(--gold-lt); --ember-bg: var(--gold-bg); --ember-ln: var(--gold-ln); /* ── Inputs ── */ --input-bg: rgba(255, 255, 255, 0.66); --input-border: rgba(200, 98, 42, 0.16); --input-border-focus: var(--gold); --input-radius: 10px; --input-h: 42px; --input-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 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); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { background: var(--page); color: var(--char); font-family: var(--sans); font-size: 13px; line-height: 1.5; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(200, 98, 42, 0.18); border-radius: 999px; border: 2px solid var(--page); } ::-webkit-scrollbar-thumb:hover { background: rgba(200, 98, 42, 0.38); } ::placeholder { color: var(--char3); } .lf input::placeholder { color: rgba(240, 230, 214, 0.28); } a { color: inherit; text-decoration: none; } .mono { font-family: var(--mono); font-weight: 400; } /* ══════════════════════════════════════════ LOGIN · v7.0 — Primera Impresión Editorial luxury · staggered ceremony ══════════════════════════════════════════ */ /* ── Keyframes de entrada ── */ @keyframes lpBrandIn { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes lpFormIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes lpWordRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes lpFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes loginLoadSweep { 0% { left: -35%; } 100% { left: 100%; } } @keyframes loginLoadDot { 0%, 100% { opacity: .45; transform: translateY(0) scale(.9); } 50% { opacity: 1; transform: translateY(-1px) scale(1.08); } } /* ── Pantalla ── */ #login-screen { position: fixed; inset: 0; display: flex; z-index: 9999; overflow: hidden; } /* ══ Panel izquierdo: identidad de marca ══ */ .lp-brand { flex: 0 0 42%; display: flex; flex-direction: column; justify-content: space-between; padding: 52px 50px; background-color: #0a0806; background-image: radial-gradient(ellipse 75% 55% at 48% 22%, rgba(200,98,42,0.20) 0%, transparent 68%), radial-gradient(circle, rgba(240,228,204,0.07) 1px, transparent 1px); background-size: auto, 22px 22px; position: relative; overflow: hidden; animation: lpBrandIn 0.90s cubic-bezier(0.16,1,0.3,1) 0s both; } .lp-brand::before { content: ''; position: absolute; bottom: -100px; left: -60px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(200,98,42,0.13) 0%, transparent 65%); pointer-events: none; } .lp-brand::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient( to bottom, transparent 0%, rgba(200,98,42,0.28) 25%, rgba(200,98,42,0.52) 52%, rgba(200,98,42,0.28) 76%, transparent 100% ); } .lp-brand-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; } .lp-eyebrow { font-family: var(--mono); font-size: 7px; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(200, 98, 42, 0.55); margin-bottom: 38px; animation: lpFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.28s both; } .lp-mark { margin-bottom: 32px; } .lp-la { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 300; font-style: italic; color: rgba(240, 228, 204, 0.40); letter-spacing: 0.02em; line-height: 1; margin-bottom: 2px; animation: lpWordRise 0.65s cubic-bezier(0.16,1,0.3,1) 0.38s both; } .lp-black { font-family: 'Fraunces', Georgia, serif; font-size: 122px; font-weight: 900; font-style: normal; color: rgba(240, 228, 204, 0.96); letter-spacing: -0.060em; line-height: 0.82; animation: lpWordRise 0.80s cubic-bezier(0.16,1,0.3,1) 0.50s both; } .lp-tagline { font-family: var(--mono); font-size: 7px; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(240, 230, 214, 0.20); animation: lpFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) 0.70s both; } .lp-credit { display: flex; flex-direction: column; gap: 9px; animation: lpFadeUp 0.55s ease 1.05s both; } .lp-credit-label { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(240, 230, 214, 0.22); } .lp-credit-logo { display: block; height: auto; width: auto; max-width: 72px; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 0.20s; } .lp-credit-logo:hover { opacity: 0.85; } .lp-credit-contact { display: flex; flex-direction: column; gap: 4px; } .lp-credit-contact a { font-family: var(--mono); font-size: 7.5px; color: rgba(240, 230, 214, 0.30); text-decoration: none; letter-spacing: 0.04em; transition: color 0.15s; } .lp-credit-contact a:hover { color: rgba(200, 98, 42, 0.90); } /* ══ Panel derecho: formulario ══ */ .lp-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 52px 64px; background: #f3ede2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); background-size: 200px 200px; animation: lpFormIn 0.90s cubic-bezier(0.16,1,0.3,1) 0.10s both; } .lp-form-inner { width: 100%; max-width: 348px; } .lp-form-head { margin-bottom: 52px; animation: lpFadeUp 0.60s cubic-bezier(0.16,1,0.3,1) 0.46s both; } .lp-form-title { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 700; font-style: normal; color: #1a1410; letter-spacing: -0.028em; line-height: 1.08; margin-bottom: 8px; } .lp-form-sub { font-family: var(--sans); font-size: 12.5px; color: rgba(26, 20, 16, 0.42); font-weight: 400; } .lp-form .lf { margin-bottom: 30px; } .lp-form .lf label { display: block; font-size: 7px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(200, 98, 42, 0.62); font-weight: 700; font-family: var(--mono); margin-bottom: 11px; } .lp-form .lf input, .lp-form .lf select { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(26, 20, 16, 0.14); color: #1a1410; padding: 10px 0; font-family: var(--sans); font-size: 15px; font-weight: 400; outline: none; border-radius: 0; transition: border-color 0.22s ease; appearance: none; -webkit-appearance: none; box-sizing: border-box; } .lp-form .lf input:focus, .lp-form .lf select:focus { border-bottom-color: rgba(200, 98, 42, 0.75); box-shadow: none; } .lp-form .lf input::placeholder { color: rgba(26, 20, 16, 0.22); } .lp-form .lf select option { background: #f3ede2; color: #1a1410; } .lp-form .lf select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8622a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; cursor: pointer; } /* Stagger de entrada — campos */ .lp-form-inner > .lf:nth-child(1) { animation: lpFadeUp 0.58s cubic-bezier(0.16,1,0.3,1) 0.68s both; } .lp-form-inner > .lf:nth-child(2) { animation: lpFadeUp 0.58s cubic-bezier(0.16,1,0.3,1) 0.82s both; } .lp-form-inner > .lf:nth-child(3) { animation: lpFadeUp 0.58s cubic-bezier(0.16,1,0.3,1) 0.96s both; } /* Legacy — keep for backward compat */ .login-form-panel { display: none; } /* ── Botón INGRESAR ── */ .btn-login { width: 100%; margin-top: 38px; padding: 18px 14px; background: #1a1410; color: rgba(240, 228, 204, 0.88); border: none; border-left: 2px solid rgba(200, 98, 42, 0.55); font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0.38em; text-transform: uppercase; cursor: pointer; border-radius: 4px; position: relative; overflow: hidden; transition: background 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; box-shadow: none; animation: lpFadeUp 0.58s cubic-bezier(0.16,1,0.3,1) 1.10s both; } .btn-login::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(200,98,42,0.22) 40%, rgba(200,98,42,0.10) 60%, transparent 100% ); transform: translateX(-160%); transition: transform 0.62s cubic-bezier(0.16,1,0.3,1); pointer-events: none; } .btn-login:hover { background: #120e0b; border-left-color: rgba(200, 98, 42, 0.92); box-shadow: 0 8px 28px rgba(26, 20, 16, 0.18), inset 0 0 0 0.5px rgba(200,98,42,0.08); } .btn-login:hover::before { transform: translateX(160%); } .btn-login:active { background: #0c0a07; box-shadow: none; } .btn-login.loading { pointer-events: none; cursor: wait; background: #231a15; border-left-color: rgba(200,98,42,0.25); box-shadow: none; } .btn-login.loading::before { display: none; } /* Loading indicator */ .btn-login .login-load-wrap { display: inline-flex; align-items: center; gap: 10px; } .btn-login .login-load-thread { position: relative; width: 34px; height: 1px; border-radius: 999px; background: rgba(240, 228, 204, 0.22); overflow: hidden; } .btn-login .login-load-thread::after { content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(240,228,204,0), rgba(240,228,204,.95), rgba(240,228,204,0)); animation: loginLoadSweep 1.08s cubic-bezier(.65,.05,.36,1) infinite; } .btn-login .login-load-dots { display: inline-flex; gap: 4px; align-items: center; } .btn-login .login-load-dots i { width: 4px; height: 4px; border-radius: 999px; background: rgba(240, 228, 204, 0.85); transform-origin: center; animation: loginLoadDot 1.2s ease-in-out infinite; } .btn-login .login-load-dots i:nth-child(2) { animation-delay: .15s; } .btn-login .login-load-dots i:nth-child(3) { animation-delay: .30s; } .btn-login .login-load-text { letter-spacing: .14em; } /* Error */ .login-err { margin-top: 16px; color: rgba(200, 70, 60, 0.90); font-size: 10px; display: none; text-align: left; font-family: var(--mono); letter-spacing: 0.04em; padding: 10px 14px; background: rgba(168, 50, 40, 0.07); border-left: 2px solid rgba(200, 70, 60, 0.38); } /* Responsive login */ @media (max-width: 820px) { .lp-brand { flex: 0 0 38%; padding: 40px 36px; } .lp-black { font-size: 90px; } .lp-form { padding: 40px 36px; } } @media (max-width: 640px) { #login-screen { flex-direction: column; } .lp-brand { flex: 0 0 auto; padding: 36px 28px 32px; border-right: none; border-bottom: 1px solid rgba(200,98,42,0.18); } .lp-brand::after { display: none; } .lp-black { font-size: 72px; line-height: 0.88; } .lp-la { font-size: 16px; } .lp-credit { display: none; } .lp-form { flex: 1; padding: 36px 28px; } .lp-form-inner { max-width: 100%; } } @media (max-width: 400px) { .lp-black { font-size: 58px; } .lp-form { padding: 28px 20px; } } /* APP */ #app { display: none; height: 100vh; overflow: hidden; } #sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar); background: var(--chrome-bg); display: flex; flex-direction: column; z-index: 200; } .sb-logo { padding: 24px 22px 20px; border-bottom: 1px solid rgba(200, 98, 42, 0.14); } .sb-logo .brand { font-family: var(--serif); font-size: 17px; font-weight: 600; color: #f0e6d6; letter-spacing: 0.02em; line-height: 1.25; } .sb-logo .sub { font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200, 98, 42, 0.75); font-weight: 500; font-family: var(--mono); display: block; margin-top: 5px; } .sb-local { padding: 9px 22px; font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(240, 230, 214, 0.30); border-bottom: 1px solid rgba(200, 98, 42, 0.10); font-family: var(--mono); } .sb-local strong { color: rgba(200, 98, 42, 0.80); font-weight: 500; } .sb-nav { flex: 1; padding: 8px 0; overflow-y: auto; } .sb-group { padding: 14px 22px 4px; font-size: 8px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240, 230, 214, 0.25); font-weight: 600; font-family: var(--mono); } .ni { display: flex; align-items: center; gap: 10px; margin: 1px 10px; padding: 7px 12px; color: rgba(240, 230, 214, 0.58); cursor: pointer; font-size: 12px; border-radius: 7px; transition: background 0.14s, color 0.14s; user-select: none; position: relative; } .ni svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; } .ni:hover { color: rgba(240, 230, 214, 0.90); background: rgba(200, 98, 42, 0.08); } /* Cancelar margen en ni dentro de collapsible body */ .sb-collapsible-body .ni:hover { margin: 1px 10px 1px 0; } .ni.active { color: #f0e6d6; background: rgba(200, 98, 42, 0.12); border-left: 2px solid rgba(200, 98, 42, 0.85); padding-left: 10px; } .ni.active svg { opacity: 1; color: rgba(200, 98, 42, 0.90); } /* ── Dot de alerta en sidebar ── */ .sb-venc-dot { display: none; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; } .sb-venc-dot.visible { display: block; } .sb-venc-dot.critico { background: #e05252; } .sb-venc-dot.atencion { background: #d97c2a; } /* Anillo expansivo tipo sonar */ .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; } @keyframes venc-sonar { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } } /* ── Dot en page header de Vencimientos ── */ .ph-venc-dot { display: none; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; position: relative; } .ph-venc-dot.visible { display: inline-block; } .ph-venc-dot.critico { background: #e05252; } .ph-venc-dot.atencion { background: #d97c2a; } .ph-venc-dot.critico::before { content:""; position:absolute; inset:0; border-radius:50%; background:#e05252; animation: venc-sonar 1.6s ease-out infinite; } .ph-venc-dot.critico::after { content:""; position:absolute; inset:0; border-radius:50%; background:#e05252; animation: venc-sonar 1.6s ease-out infinite .55s; } .ph-venc-dot.atencion::before { content:""; position:absolute; inset:0; border-radius:50%; background:#d97c2a; animation: venc-sonar 2s ease-out infinite; } .ph-venc-dot.atencion::after { content:""; position:absolute; inset:0; border-radius:50%; background:#d97c2a; animation: venc-sonar 2s ease-out infinite .7s; } .sb-foot { padding: 14px 22px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 10px; } .wagon-page-footer { margin-top: 48px; padding: 18px 0 28px; border-top: 1px solid var(--parch3); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wagon-page-footer-left { display: flex; flex-direction: column; gap: 2px; } .wagon-page-footer-label { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--char3); opacity: .5; } .wagon-page-footer-name { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--char3); opacity: .45; letter-spacing: .04em; } .wagon-page-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .wagon-page-footer-right a { font-size: 10px; color: var(--char3); opacity: .38; text-decoration: none; transition: opacity .15s; } .wagon-page-footer-right a:hover { opacity: .85; } .wagon-sig { display: flex; flex-direction: column; gap: 4px; } .wagon-label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(246, 239, 226, 0.55); } .wagon-logo { height: auto; width: auto; max-width: 117px; object-fit: contain; opacity: 0.85; transition: opacity 0.2s; } .wagon-logo:hover { opacity: 1; } .btn-out { width: 100%; padding: 8px 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(246, 239, 226, 0.45); font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; border-radius: var(--r); transition: all 0.15s; } .btn-out:hover { border-color: rgba(246, 239, 226, 0.3); color: var(--text-on-dark); } /* MAIN */ #main { margin-left: var(--sidebar); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .topbar { height: var(--topbar); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--topbar-bg); box-shadow: 0 2px 16px rgba(10, 7, 4, 0.28); } /* ── Topbar: título + contexto ── */ .topbar-title { font-family: var(--serif); font-size: 17px; font-weight: 500; color: rgba(240, 230, 214, 0.90); letter-spacing: -0.01em; } .topbar-right { display: flex; align-items: center; gap: 12px; } /* ── Nav chrome toggle switch — oculto, modo oscuro permanente ── */ .nav-chrome-switch, #nav-chrome-toggle { display: none !important; } .nav-chrome-switch { display: none; align-items: center; cursor: pointer; flex-shrink: 0; } .nav-chrome-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Alias para el input dentro del label */ #nav-chrome-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-chrome-switch-track { position: relative; display: inline-flex; align-items: center; width: 30px; height: 17px; border-radius: 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(200,98,42,0.22); transition: background 0.2s, border-color 0.2s; } .nav-chrome-switch-thumb { position: absolute; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: rgba(200,98,42,0.55); transition: left 0.2s, background 0.2s; } /* Cuando el input está checked (modo activo) — sibling dentro del label */ #nav-chrome-switch-input:checked ~ .nav-chrome-switch-track { background: rgba(200,98,42,0.18); border-color: rgba(200,98,42,0.50); } #nav-chrome-switch-input:checked ~ .nav-chrome-switch-track .nav-chrome-switch-thumb { left: calc(100% - 13px); background: rgba(200,98,42,0.90); } .rt-pill { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(200, 98, 42, 0.22); border-radius: 20px; padding: 4px 11px; font-family: var(--mono); font-size: 10px; color: rgba(240, 230, 214, 0.55); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 2.4s infinite; } .dot.off { background: var(--amber); animation: none; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .demo-pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--gold); border: 1px solid var(--gold-ln); background: var(--gold-bg); padding: 3px 9px; border-radius: 3px; } /* PAGES */ #pages { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--page); } .page { display: none; padding: 28px; background: var(--page); } .page.active { display: block; animation: page-enter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; } .page.leaving { display: block !important; animation: page-leave 0.15s ease forwards; pointer-events: none; } @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); } } /* STATS */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; } .stat-cell { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 18px 20px; position: relative; border-left-width: 3px; border-left-color: rgba(200, 98, 42, 0.45); box-shadow: var(--card-shadow); transition: box-shadow .2s, border-color .2s; overflow: hidden; } .stat-cell[onclick]:hover { box-shadow: var(--card-shadow-hover); border-left-color: rgba(200, 98, 42, 0.80); cursor: pointer; } .stat-label { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.48); font-weight: 600; font-family: var(--mono); margin-bottom: 10px; } .stat-num { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--char); line-height: 1; } .stat-sub { font-size: 10px; color: var(--char3); margin-top: 6px; } /* PAGE HEADER */ .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(200, 98, 42, 0.12); } .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(--gold) 0%, var(--gold-lt) 100%); border-radius: 99px; } .ph-sub { font-size: 10.5px; color: var(--char3); margin-top: 4px; font-family: var(--mono); padding-left: 14px; letter-spacing: 0.02em; } /* Contenedor de múltiples botones en el page header */ .ph-actions { display: flex; align-items: center; gap: 8px; } .section-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .section-rule .rule-title { font-family: var(--serif); font-size: 13px; font-weight: 500; color: var(--char2); white-space: nowrap; font-style: italic; } .section-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, rgba(200, 98, 42, 0.20), transparent); } /* ══════════════════════════════════════════ WAGON DESIGN SYSTEM v7.0 — Componentes ══════════════════════════════════════════ */ /* ── Botones ── */ .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(200, 98, 42, 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(200,98,42,0.16) 40%, rgba(200,98,42,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(200, 98, 42, 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-prime svg { flex-shrink: 0; } .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(200, 98, 42, 0.48); background: rgba(200, 98, 42, 0.04); color: rgba(26, 20, 16, 0.88); } .btn-ghost:active { background: rgba(200, 98, 42, 0.08); } .btn-ghost svg { flex-shrink: 0; } .btn-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-0); border: 1px solid var(--line-strong); color: var(--t3); cursor: pointer; border-radius: var(--r); flex-shrink: 0; transition: color var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui), transform var(--motion-fast) var(--ease-ui); } .btn-icon:hover { border-color: rgba(200, 98, 42, 0.45); color: var(--gold); background: var(--ember-bg); transform: scale(1.08); } .btn-icon:active { transform: scale(0.90); } .btn-icon svg { width: 13px; height: 13px; } .btn-wa { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; background: rgba(45, 122, 79, 0.08); color: var(--green); border: 1px solid rgba(45, 122, 79, 0.25); font-family: var(--sans); font-size: 10px; cursor: pointer; border-radius: var(--r); transition: all 0.15s; white-space: nowrap; } .btn-wa:hover { background: rgba(45, 122, 79, 0.15); } /* ── Tipografía — escala canónica ── */ /* Headline serif (Fraunces) — para KPIs, totales, títulos de sección */ .ds-display { font-family: var(--serif); font-size: 38px; font-weight: 700; font-style: italic; letter-spacing: -0.04em; line-height: 1; color: var(--t1); } .ds-h1 { font-family: var(--serif); font-size: 26px; font-weight: 300; font-style: italic; letter-spacing: -0.02em; line-height: 1.15; color: var(--t1); } .ds-h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--t1); } .ds-h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--t1); } /* Label monospace — para métricas, codes, timestamps */ .ds-label { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); } .ds-label-sm { font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t4); } /* Cuerpo muted */ .ds-muted { color: var(--t3); font-size: 12px; } .ds-meta { color: var(--t3); font-size: 11px; font-family: var(--mono); } /* ── Cabeceras de página / módulo ── */ .page-hd { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-hd-title { font-family: var(--serif); font-size: 22px; font-weight: 300; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } .page-hd-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t4); } .page-hd-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ── Formularios — inputs globales ── */ .fg { margin-bottom: 16px; } .fg label { display: block; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; } .fg input, .fg select, .fg textarea { width: 100%; color: var(--t1); font-family: var(--sans); font-size: 13px; outline: none; transition: border-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui); } .fg input, .fg select { min-height: var(--input-h); background: var(--input-bg); border: 1px solid var(--input-border); padding: 10px 13px; border-radius: var(--input-radius); box-shadow: var(--input-shadow); color-scheme: light; } .fg textarea { background: var(--input-bg); border: 1px solid var(--input-border); padding: 11px 13px; border-radius: var(--input-radius); box-shadow: var(--input-shadow); resize: vertical; min-height: 110px; color-scheme: light; } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--ember-bg), var(--input-shadow); } :where(input, select, textarea):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ember-bg); border-color: var(--gold); } /* TABLE */ .table-wrap { border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; background: var(--card-bg); box-shadow: var(--card-shadow); /* Fina línea ember en el top para anclar el header oscuro */ border-top: 2px solid rgba(200, 98, 42, 0.30); } .table-bar { padding: 12px 14px; border-bottom: 1px solid rgba(200, 98, 42, 0.12); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--parch2); } .table-bar input, .table-bar select { background: var(--parch); border: 1.5px solid var(--parch3); color: var(--char); padding: 7px 10px; font-size: 12px; font-family: var(--sans); outline: none; border-radius: var(--r); transition: border-color 0.15s; } .table-bar input { flex: 1; min-width: 140px; } .table-bar input:focus, .table-bar select:focus { border-color: var(--gold); } .table-bar select option { background: var(--parch); } table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 10px 14px; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200, 98, 42, 0.60); font-weight: 600; border-bottom: 1px solid rgba(200, 98, 42, 0.18); background: #1a1410; white-space: nowrap; font-family: var(--mono); } td { padding: 11px 14px; border-bottom: 1px solid rgba(200, 98, 42, 0.07); color: var(--char2); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(200, 98, 42, 0.03); } .empty { text-align: center; padding: 44px; color: var(--char2); font-size: 12px; } /* TAGS */ .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-ok { background: rgba(45, 122, 79, 0.1); color: var(--green); border: 1px solid rgba(45, 122, 79, 0.2); } .tag-lo { background: rgba(160, 98, 10, 0.1); color: var(--amber); border: 1px solid rgba(160, 98, 10, 0.22); } .tag-go { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-ln); } .tag-dim { background: var(--parch2); color: var(--char3); border: 1px solid var(--parch3); } .tag-l1 { background: rgba(42, 90, 140, 0.1); color: var(--blue); border: 1px solid rgba(42, 90, 140, 0.22); } .tag-l2 { background: rgba(120, 60, 140, 0.1); color: #7a3c8c; border: 1px solid rgba(120, 60, 140, 0.22); } /* WAGON Design System v7.0 — tokens consolidados en :root principal ↑ */ .ph-sub, .kpi-sub, .stock-filter-label { color: var(--text-meta); } /* :focus-visible, btn-prime/ghost/icon, tag overrides → consolidados en WAGON DS v7.0 ↑ */ .stock-panel, .stock-panel.stock-filter-panel, #page-movimientos .mov-filters, #page-movimientos .mov-inspector, .camada-card { background: var(--card-bg-alt); border-color: var(--parch3); } #page-movimientos .mov-list { background: var(--surface-0); border-color: var(--line-strong); } #page-movimientos .mov-row { border-bottom-color: var(--line-soft); transition: background var(--motion-fast) var(--ease-ui); } #page-movimientos .mov-row:hover { background: rgba(200, 98, 42, 0.06); } #page-movimientos .mov-carrito-wrap.is-selected > .mov-row { background: rgba(200, 98, 42, 0.12); box-shadow: inset 3px 0 0 rgba(200, 98, 42, 0.62); } #page-movimientos .mov-filter { transition: color var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui); } #page-movimientos .mov-filter.on { background: rgba(200, 98, 42, 0.14); border-color: rgba(200, 98, 42, 0.46); color: #603a1b; } #page-movimientos .mov-detail-panel { background: rgba(236, 223, 207, 0.58); } .camada-head { background: var(--surface-2); border-bottom-color: var(--line-strong); } .camada-prod-name { font-weight: 560; letter-spacing: 0.01em; } .camada-lote-row { border-bottom-color: var(--line-soft); transition: background var(--motion-fast) var(--ease-ui); } .camada-lote-row:hover { background: rgba(200, 98, 42, 0.06); } /* STOCK BAR */ .bar-wrap { display: flex; align-items: center; gap: 8px; } .bar { width: 50px; height: 3px; background: var(--parch3); border-radius: 2px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 2px; } .stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; } #page-stock .ph { margin-bottom: 14px; } /* ── STOCK · Identidad visual v7 ── */ .stock-shell { display: flex; flex-direction: column; gap: 16px; } .stock-hero { color: var(--char); } .stock-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .stock-kicker { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--char3); margin-bottom: 6px; font-weight: 500; } .stock-hero-title { font-family: var(--serif); font-size: 24px; line-height: 1.06; font-weight: 500; margin-bottom: 6px; color: var(--char); } .stock-hero-sub { max-width: 660px; color: var(--char2); font-size: 12px; } .stock-focus { min-width: 220px; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 12px 14px; } .stock-focus-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--char3); margin-bottom: 7px; font-weight: 500; } .stock-focus-value { font-family: var(--serif); font-size: 24px; line-height: 1; margin-bottom: 5px; color: var(--char); } .stock-focus-note { font-size: 10px; color: var(--char2); } .stock-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stock-stat { background: var(--parch); border: var(--card-border); border-left: 3px solid rgba(200, 98, 42, 0.45); border-radius: var(--r2); padding: 18px 20px; cursor: pointer; box-shadow: var(--card-shadow); transition: box-shadow 0.2s, border-left-color 0.2s; overflow: hidden; } .stock-stat:hover { box-shadow: var(--card-shadow-hover); border-left-color: rgba(200, 98, 42, 0.80); } .stock-stat-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(26, 20, 16, 0.48); margin-bottom: 10px; font-weight: 600; font-family: var(--mono); } .stock-stat-num { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 6px; color: var(--char); } .stock-stat-sub { font-size: 10px; color: var(--char2); } .stock-tools { display: block; } .stock-panel { background: var(--parch2); border: 1.5px solid var(--parch3); border-radius: var(--r2) var(--r2) 0 0; border-bottom: none; padding: 14px 16px; } .stock-panel.stock-filter-panel + .table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } .stock-panel-head { display: none; } .stock-panel-title { font-family: var(--serif); font-size: 18px; color: var(--char); } .stock-panel-sub { font-size: 11px; color: var(--char2); } .stock-filter-grid { display: grid; grid-template-columns: 2.15fr 0.78fr 0.78fr 0.78fr auto; gap: 10px; align-items: center; } .stock-filter-primary { min-width: 320px; } .stock-filter-field { display: flex; flex-direction: column; gap: 6px; } .stock-filter-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--char3); font-weight: 500; } .stock-filter-grid input, .stock-filter-grid select { width: 100%; min-height: 40px; background: var(--parch); border: 1.5px solid var(--parch3); border-radius: var(--r); padding: 9px 11px; color: var(--char); font-size: 12px; font-family: var(--sans); outline: none; box-shadow: none; transition: border-color 0.15s ease; } .stock-filter-grid input::placeholder { color: var(--char3); } .stock-filter-grid input:focus, .stock-filter-grid select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); } .stock-filter-count { font-size: 10px; color: var(--gold); white-space: nowrap; font-family: var(--mono); justify-self: end; align-self: end; padding: 10px 12px; border-radius: 999px; background: rgba(200, 98, 42, 0.08); border: 1.5px solid var(--gold-ln); } .stock-table-shell { display: flex; flex-direction: column; gap: 0; } .stock-table-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; } .stock-table-title { font-family: var(--serif); font-size: 20px; color: var(--char); } .stock-table-sub { font-size: 10px; color: var(--char2); margin-top: 3px; } .stock-view-toggle { display: none; gap: 4px; padding: 3px; border: 1.5px solid var(--parch3); border-radius: 999px; background: var(--parch2); } .stock-view-btn { border: none; background: transparent; color: var(--char2); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--sans); padding: 6px 10px; border-radius: 999px; cursor: pointer; } .stock-view-btn.active { background: var(--char); color: var(--text-on-dark); } .stock-table-shell .table-wrap { margin-top: 0; max-height: calc(100vh - 270px); overflow: auto; scroll-behavior: smooth; } #page-stock table thead { background: #1a1410; } #page-stock th { position: sticky; top: 0; z-index: 3; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-meta); font-weight: 700; padding-top: 13px; padding-bottom: 13px; } #page-stock th:first-child, #page-stock td:first-child { position: sticky; left: 0; z-index: 2; } #page-stock th:first-child { z-index: 4; background: var(--card-bg-alt); } #page-stock td:first-child { background: var(--card-bg); } #page-stock tbody tr:hover td:first-child { background: rgba(200, 98, 42, 0.04); } #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 .tag { border-radius: 999px; padding: 3px 9px; font-size: 9px; letter-spacing: 0.06em; } #page-stock .tag-cr { background: rgba(181, 58, 42, 0.1); color: var(--red); border: 1px solid rgba(181, 58, 42, 0.25); } #page-stock tbody tr:not(.stock-lotes-row) { border-bottom: 1px solid var(--parch3); } #page-stock tbody tr:not(.stock-lotes-row):hover td { background: rgba(200, 98, 42, 0.04); } #page-stock td { padding-top: 16px; padding-bottom: 16px; vertical-align: top; } .stock-prod { display: block; } .stock-prod-main { display: flex; align-items: flex-start; gap: 8px; } .stock-expand-spacer { width: 20px; min-width: 20px; display: inline-block; } .stock-prod-name { display: block; font-family: var(--sans); font-size: 14px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--char); margin-bottom: 5px; } .stock-prod-meta { display: flex; flex-wrap: wrap; gap: 8px; } .stock-mini-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--card-bg-alt); border: var(--card-border-thin); font-family: var(--mono); font-size: 9px; color: var(--text-meta); } .stock-notes { margin-top: 8px; font-size: 10px; color: var(--char2); border-left: 2px solid var(--gold-ln); padding: 5px 8px; background: rgba(245, 239, 230, 0.62); border-radius: 0 var(--r) var(--r) 0; } .stock-qty { font-family: var(--mono); font-size: 16px; font-weight: 700; line-height: 1.1; color: var(--char); } .stock-qty-sub { font-size: 10px; color: var(--char3); margin-top: 4px; } .stock-price { font-family: var(--mono); font-size: 16px; color: var(--char); } .stock-price-sub { font-size: 10px; color: var(--char3); margin-top: 4px; } .stock-next { font-family: var(--mono); font-size: 12px; font-weight: 600; } .stock-next-empty { color: var(--char3); font-size: 10px; } .stock-next-sub { font-size: 10px; color: var(--char3); margin-top: 4px; } .stock-level { display: flex; flex-direction: column; gap: 7px; min-width: 110px; } .stock-level-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stock-level-value { font-family: var(--mono); font-size: 10px; color: var(--char3); } .stock-level .bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(26, 20, 16, 0.08); } .stock-level .bar-fill { border-radius: 999px; } .stock-updated { font-family: var(--mono); font-size: 11px; color: var(--char2); } .stock-actions { display: flex; gap: 4px; justify-content: flex-end; } #page-stock .stock-actions .btn-icon { width: 27px; height: 27px; background: var(--parch2); } #page-stock .stock-actions .btn-icon:hover { background: rgba(200, 98, 42, 0.08); } /* STOCK · pass jerarquía + respiración */ #page-stock .stock-table-shell { border-color: var(--line-strong); } #page-stock .stock-panel.stock-filter-panel { background: var(--surface-1); border-color: var(--line-strong); } #page-stock .stock-filter-label { letter-spacing: 0.14em; color: var(--text-meta); } #page-stock .stock-filter-grid input, #page-stock .stock-filter-grid select { min-height: 42px; background: var(--surface-0); border-color: var(--line-strong); } #page-stock .stock-filter-count { background: rgba(200, 98, 42, 0.1); border-color: rgba(200, 98, 42, 0.34); } #page-stock .stock-table-title { font-size: 19px; letter-spacing: -0.01em; } #page-stock .stock-table-sub { color: var(--text-meta); } #page-stock .table-wrap { max-height: calc(100vh - 254px); } #page-stock table thead { background: #1a1410; } #page-stock th { font-size: 10px; letter-spacing: 0.12em; color: var(--text-meta); padding-top: 13px; padding-bottom: 13px; } #page-stock td { padding-top: 15px; padding-bottom: 15px; } #page-stock tbody tr:not(.stock-lotes-row) { border-bottom-color: var(--line-soft); } #page-stock tbody tr:not(.stock-lotes-row):hover td { background: rgba(200, 98, 42, 0.06); } #page-stock tbody tr:hover td:first-child { background: rgba(200, 98, 42, 0.06); } #page-stock .stock-prod-main { gap: 10px; } #page-stock .stock-prod-name { font-size: 17px; line-height: 1.18; font-weight: 730; letter-spacing: -0.012em; margin-bottom: 7px; } #page-stock .stock-prod-meta { gap: 7px; } #page-stock .stock-mini-pill { font-size: 9px; padding: 4px 9px; border-color: var(--line-strong); background: var(--surface-1); } #page-stock .stock-notes { margin-top: 9px; font-size: 10px; line-height: 1.45; } #page-stock .stock-qty { font-size: 19px; font-weight: 740; } #page-stock .stock-qty-sub, #page-stock .stock-price-sub, #page-stock .stock-next-sub, #page-stock .stock-updated, #page-stock .stock-level-value { color: var(--text-meta); } #page-stock .stock-price { font-size: 17px; font-weight: 620; } #page-stock .stock-next { font-size: 13px; } #page-stock .stock-level .bar { height: 7px; background: rgba(26, 20, 16, 0.1); } #page-stock .stock-actions { gap: 6px; } #page-stock .stock-actions .btn-icon { width: 29px; height: 29px; } #page-stock th:nth-child(6), #page-stock td:nth-child(6), #page-stock th:nth-child(8), #page-stock td:nth-child(8) { display: none; } #page-stock.stock-compact .stock-notes { display: none; } #page-stock.stock-compact .stock-mini-pill:nth-child(n+2) { display: none; } #page-stock.stock-compact .stock-prod-name { font-size: 15px; } #page-stock.stock-compact td { padding-top: 11px; padding-bottom: 11px; } @media (max-width: 960px) { .stock-hero { padding: 16px; border-radius: var(--card-radius); } .stock-hero-top, .stock-tools { display: grid; grid-template-columns: 1fr; } .stock-hero-title { font-size: 22px; } .stock-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stock-filter-grid { grid-template-columns: 1fr 1fr; } #page-stock:not(.stock-advanced-open) .stock-filter-grid { grid-template-columns: 1fr; } .stock-more-filters-btn { width: 100%; } .stock-filter-count { grid-column: 1 / -1; justify-self: start; } .stock-table-head { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .stock-stats, .stock-filter-grid { grid-template-columns: 1fr; } #page-stock .table-wrap { max-height: none; } #page-stock th:first-child, #page-stock td:first-child { position: static; } .stock-panel, .stock-table-shell { border-radius: var(--r); padding: 14px; } .stock-prod-name { font-size: 15px; } #page-stock .stock-prod-name { font-size: 15px; line-height: 1.2; } #page-stock .stock-qty { font-size: 17px; } #page-stock .stock-price { font-size: 15px; } } /* ══════════════════════════════════════════ STOCK · El Catálogo · v7.0 Dense, precise, editorial inventory ledger ══════════════════════════════════════════ */ /* ── Shell ── */ #page-stock .stock-shell { gap: 18px; } /* ── Hero: encabezado del módulo ── */ #page-stock .stock-hero { padding: 0; background: none; border: none; box-shadow: none; } #page-stock .stock-hero-top { align-items: flex-start; gap: 20px; margin-bottom: 18px; } #page-stock .stock-kicker { font-family: var(--mono); font-size: 8px; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(200, 98, 42, 0.65); font-weight: 500; margin-bottom: 8px; } #page-stock .stock-hero-title { font-family: var(--serif); font-size: 26px; font-weight: 300; font-style: italic; letter-spacing: -0.025em; line-height: 1.1; color: var(--t1); margin-bottom: 7px; } #page-stock .stock-hero-sub { font-size: 11.5px; color: var(--t3); line-height: 1.55; } /* Focus card (top-right KPI destacado) */ #page-stock .stock-focus { min-width: 200px; background: #fff; border: 1px solid rgba(26, 20, 16, 0.10); border-top: 2px solid var(--gold); border-radius: 0 0 8px 8px; padding: 14px 18px; box-shadow: 0 4px 20px rgba(26, 20, 16, 0.06); } #page-stock .stock-focus-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--t4); font-weight: 500; margin-bottom: 8px; } #page-stock .stock-focus-value { font-family: var(--serif); font-size: 28px; font-weight: 700; font-style: italic; letter-spacing: -0.04em; line-height: 1; color: var(--t1); margin-bottom: 5px; } #page-stock .stock-focus-note { font-family: var(--mono); font-size: 9.5px; color: var(--t3); letter-spacing: 0.04em; } /* ── Stats (4 KPI cards) ── */ #page-stock .stock-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #page-stock .stock-stat { background: #ffffff; border: 1px solid rgba(26, 20, 16, 0.08); border-top: 2px solid transparent; border-radius: 0 0 8px 8px; border-left: none; padding: 16px 20px; box-shadow: 0 2px 12px rgba(26, 20, 16, 0.04); transition: box-shadow var(--motion-fast) var(--ease-ui), border-top-color var(--motion-fast) var(--ease-ui), transform var(--motion-fast) var(--ease-ui); } #page-stock .stock-stat:hover { box-shadow: 0 6px 24px rgba(26, 20, 16, 0.10); border-top-color: rgba(200, 98, 42, 0.70); transform: translateY(-1px); } #page-stock .stock-stat-label { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t4); font-weight: 500; margin-bottom: 12px; } #page-stock .stock-stat-num { font-family: var(--serif); font-size: 30px; font-weight: 700; font-style: italic; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; color: var(--t1); } #page-stock .stock-stat-sub { font-family: var(--mono); font-size: 9.5px; color: var(--t3); letter-spacing: 0.02em; } /* ── Filter panel ── */ #page-stock .stock-panel.stock-filter-panel { background: rgba(255, 255, 255, 0.70); border: 1px solid rgba(26, 20, 16, 0.10); border-bottom: none; border-radius: 8px 8px 0 0; padding: 16px 20px; box-shadow: none; } #page-stock .stock-filter-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--t4); font-weight: 500; } #page-stock .stock-filter-grid { gap: 12px; } #page-stock .stock-filter-grid input, #page-stock .stock-filter-grid select { min-height: 40px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(26, 20, 16, 0.14); border-radius: 6px; padding: 9px 12px; font-size: 12px; color: var(--t1); box-shadow: inset 0 1px 2px rgba(26, 20, 16, 0.04); transition: border-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui); } #page-stock .stock-filter-grid input:focus, #page-stock .stock-filter-grid select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--ember-bg); outline: none; } #page-stock .stock-filter-grid input::placeholder { color: var(--t4); } #page-stock .stock-filter-count { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--gold); letter-spacing: 0.08em; background: var(--ember-bg); border: 1px solid var(--ember-ln); border-radius: 20px; padding: 8px 14px; white-space: nowrap; } /* ── Table shell ── */ #page-stock .stock-table-shell { gap: 0; } #page-stock .stock-table-head { margin-bottom: 14px; align-items: flex-end; } #page-stock .stock-table-title { font-family: var(--serif); font-size: 18px; font-weight: 300; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } #page-stock .stock-table-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; color: var(--t4); margin-top: 4px; text-transform: uppercase; } /* ── Table wrap ── */ #page-stock .table-wrap { border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 0 0 8px 8px; box-shadow: 0 4px 20px rgba(26, 20, 16, 0.05); max-height: calc(100vh - 258px); overflow: auto; background: #ffffff; } #page-stock .stock-panel.stock-filter-panel + .table-wrap { border-top: none; } /* ── Table header ── */ #page-stock table thead { background: #f0e8db; } #page-stock th { position: sticky; top: 0; z-index: 3; background: #f0e8db; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 16, 0.52); font-weight: 500; padding: 14px 14px; border-bottom: 1px solid rgba(200, 98, 42, 0.18); white-space: nowrap; } #page-stock th:first-child { z-index: 4; background: #f0e8db; } /* ── Table rows ── */ #page-stock td { 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 { background: rgba(245, 239, 230, 0.70); } #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: none; transition: background var(--motion-fast) var(--ease-ui); } /* ── Producto: nombre y meta ── */ #page-stock .stock-prod-main { gap: 10px; align-items: flex-start; } #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 { 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(200, 98, 42, 0.30); padding: 4px 9px; background: rgba(200, 98, 42, 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: rgba(181, 58, 42, 0.08); color: var(--red); border: 1px solid rgba(181, 58, 42, 0.20); } /* ── Columnas de datos ── */ #page-stock .stock-qty { font-family: var(--mono); font-size: 15px; font-weight: 600; font-style: normal; letter-spacing: -0.01em; line-height: 1; color: var(--t1); } #page-stock .stock-qty-sub { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 5px; letter-spacing: 0.06em; } #page-stock .stock-price { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; } #page-stock .stock-price-sub { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 5px; } #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; } /* ── Barra de nivel de stock ── */ #page-stock .stock-level { gap: 6px; min-width: 100px; } #page-stock .stock-level-top { gap: 6px; } #page-stock .stock-level-value { font-family: var(--mono); font-size: 9.5px; color: var(--t3); font-weight: 500; } #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); } /* ── Acciones por fila ── */ #page-stock .stock-actions { gap: 5px; justify-content: flex-end; } #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(--gold); transform: scale(1.08); } /* ── Vista compact ── */ #page-stock.stock-compact td { padding-top: 12px; padding-bottom: 12px; } #page-stock.stock-compact .stock-notes { display: none; } #page-stock.stock-compact .stock-mini-pill:nth-child(n+2) { display: none; } #page-stock.stock-compact .stock-prod-name { font-size: 13px; } #page-stock.stock-compact .stock-qty { font-size: 14px; } /* ── View toggle ── */ #page-stock .stock-view-toggle { display: flex; gap: 2px; padding: 3px; background: rgba(26, 20, 16, 0.05); border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 6px; } #page-stock .stock-view-btn { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); padding: 6px 10px; border-radius: 4px; cursor: pointer; border: none; background: transparent; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } #page-stock .stock-view-btn:hover { color: var(--t1); } #page-stock .stock-view-btn.active { background: #1a1410; color: rgba(240, 230, 214, 0.88); } /* ══════════════════════════════════════════════════════ STOCK · El Padrón · Layout A · v7.0 Two-column: dark KPI ledger + full-height table Left: coal panel with KPIs stacked vertically Right: filters + table in parch content area ══════════════════════════════════════════════════════ */ /* ── Page: strip default padding, own layout manages spacing ── */ #page-stock { padding: 0 !important; overflow: hidden; } /* ── Hide the standard .ph — context lives in the KPI panel ── */ #page-stock > .ph { display: none; } /* ── Two-column shell ── */ #page-stock > .stock-shell { display: grid !important; grid-template-columns: 220px 1fr !important; grid-template-rows: 1fr !important; gap: 0 20px !important; padding: 20px 24px 28px !important; box-sizing: border-box !important; height: calc(100vh - 56px) !important; overflow: clip !important; min-height: 0 !important; } /* ══════════════ LEFT PANEL ══════════════ */ #page-stock .stock-hero { grid-column: 1; grid-row: 1; background: linear-gradient(175deg, #0e0b08 0%, #1a1410 38%, #1d1711 68%, #160f0b 100% ); border: 1px solid rgba(200,98,42,0.10); border-radius: 8px; padding: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Ember vertical accent line on right edge */ #page-stock .stock-hero::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient( to bottom, transparent 0%, rgba(200,98,42,0.32) 18%, rgba(200,98,42,0.32) 82%, transparent 100% ); pointer-events: none; z-index: 1; } /* Panel title via pseudo-element */ #page-stock .stock-hero::before { content: 'Stock'; display: block; font-family: var(--serif); font-size: 20px; font-weight: 300; font-style: italic; color: rgba(240,230,214,0.80); letter-spacing: -0.025em; padding: 26px 22px 22px; border-bottom: 1px solid rgba(200,98,42,0.10); flex-shrink: 0; } /* Botones de acción dentro del panel oscuro */ #page-stock .stock-hero-actions { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; border-bottom: 1px solid rgba(200,98,42,0.09); flex-shrink: 0; } #page-stock .stock-hero-actions .btn-prime { width: 100%; justify-content: center; background: rgba(240,228,204,0.07); color: rgba(240,228,204,0.88); border-left-color: rgba(200,98,42,0.60); } #page-stock .stock-hero-actions .btn-prime:hover { background: rgba(240,228,204,0.12); border-left-color: rgba(200,98,42,0.95); box-shadow: none; } #page-stock .stock-hero-actions .btn-ghost { width: 100%; justify-content: center; color: rgba(240,228,204,0.40); border-color: rgba(240,228,204,0.12); } #page-stock .stock-hero-actions .btn-ghost:hover { border-color: rgba(200,98,42,0.40); background: rgba(200,98,42,0.08); color: rgba(240,228,204,0.72); } /* KPI stack — vertical list */ #page-stock .stock-stats { display: flex !important; flex-direction: column !important; gap: 0 !important; flex: 1; grid-template-columns: unset !important; } /* Each KPI card: transparent on coal */ #page-stock .stock-stat { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(200,98,42,0.09) !important; border-radius: 0 !important; border-left: none !important; border-top: none !important; padding: 20px 22px !important; box-shadow: none !important; transform: none !important; transition: background var(--motion-fast) var(--ease-ui) !important; cursor: pointer; position: relative; } #page-stock .stock-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background var(--motion-fast) var(--ease-ui); } #page-stock .stock-stat:hover { background: rgba(200,98,42,0.07) !important; transform: none !important; box-shadow: none !important; border-top-color: transparent !important; } #page-stock .stock-stat:hover::before { background: rgba(200,98,42,0.72); } /* KPI label — tiny mono uppercase, very dim */ #page-stock .stock-stat-label { font-family: var(--mono) !important; font-size: 7.5px !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: rgba(240,230,214,0.32) !important; font-weight: 500 !important; margin-bottom: 10px !important; } /* KPI number — large Fraunces bold italic, ivory */ #page-stock .stock-stat-num { font-family: var(--serif) !important; font-size: 38px !important; font-weight: 700 !important; font-style: italic !important; letter-spacing: -0.05em !important; line-height: 1 !important; color: rgba(240,230,214,0.88) !important; margin-bottom: 7px !important; } /* JS sets color:var(--red) inline on #sk-crit — that override stays */ /* KPI sub — mono, ember accent */ #page-stock .stock-stat-sub { font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: 0.06em !important; color: rgba(200,98,42,0.52) !important; margin-top: 0 !important; line-height: 1.4; } /* ══════════════ RIGHT PANEL (table) ══════════════ */ #page-stock .stock-table-shell { grid-column: 2; grid-row: 1; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; background: var(--page); overflow: clip !important; min-height: 0; } /* Filter panel — sits flush above the table */ #page-stock .stock-panel.stock-filter-panel { background: rgba(255,255,255,0.72) !important; border: 1px solid rgba(26,20,16,0.10) !important; border-bottom: none !important; border-radius: 8px 8px 0 0 !important; padding: 14px 18px !important; box-shadow: none !important; flex-shrink: 0; } /* Table wrap — flex:1 fills remaining height, scroll stays internal */ #page-stock .table-wrap { flex: 1 !important; min-height: 0 !important; max-height: none !important; background: #ffffff !important; border: 1px solid rgba(26,20,16,0.10) !important; border-top: none !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 4px 24px rgba(26,20,16,0.06) !important; overflow: auto !important; } /* ══════════════════════════════ COMPACT MODE — column hiding Removes Updated (8) only Leaves: Prod | Cat | Local | Qty | Price | Vence | Nivel | Actions ══════════════════════════════ */ #page-stock.stock-compact th:nth-child(8), #page-stock.stock-compact td:nth-child(8) { display: none !important; } /* Column widths for 6-column compact view */ #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(5), #page-stock.stock-compact td:nth-child(5) { width: 120px; } #page-stock.stock-compact th:nth-child(6), #page-stock.stock-compact td:nth-child(6) { width: 100px; } #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(9), #page-stock.stock-compact td:nth-child(9) { width: 100px; } /* Responsive: collapse panel on narrow viewport */ @media (max-width: 1100px) { #page-stock > .stock-shell { grid-template-columns: 190px 1fr !important; gap: 0 16px !important; padding: 16px 18px 22px !important; } #page-stock .stock-stat-num { font-size: 30px !important; } #page-stock .stock-hero::before { padding: 20px 18px 16px; font-size: 17px; } #page-stock .stock-stat { padding: 16px 18px !important; } } @media (max-width: 820px) { #page-stock > .stock-shell { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; height: auto !important; overflow: visible !important; padding: 14px 16px 20px !important; gap: 16px 0 !important; } #page-stock .stock-hero { grid-column: 1 !important; grid-row: 1 !important; flex-direction: row; overflow-x: auto; min-height: unset; } #page-stock .stock-table-shell { grid-column: 1 !important; grid-row: 2 !important; overflow: visible !important; } #page-stock .table-wrap { max-height: 60vh !important; } #page-stock .stock-hero::before { display: none; } #page-stock .stock-hero::after { display: none; } #page-stock .stock-stats { flex-direction: row !important; } #page-stock .stock-stat { border-right: 1px solid rgba(200,98,42,0.09) !important; border-bottom: none !important; min-width: 140px; } } /* DUAL */ .dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; } .local-box { border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; background: var(--card-bg); } .local-box-head { padding: 10px 14px; border-bottom: 1.5px solid var(--parch3); background: var(--parch2); display: flex; align-items: center; gap: 8px; } .local-box-head span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--char3); font-weight: 600; } /* WA BOX */ /* MOVIMIENTOS */ .mov-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .mov-filters-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .mov-search-bar { display:flex; align-items:center; gap:6px; } .mov-search-bar input { flex:1; background:var(--parch); border:1.5px solid var(--parch3); color:var(--char); padding:7px 10px 7px 32px; font-size:12px; font-family:var(--sans); border-radius:var(--r); outline:none; transition:border-color .15s; } .mov-search-bar input:focus { border-color:var(--gold); } .mov-search-bar .mov-search-wrap { position:relative; flex:1; } .mov-search-bar .mov-search-wrap::before { content:"🔍"; position:absolute; left:9px; top:50%; transform:translateY(-50%); font-size:12px; pointer-events:none; opacity:.5; } .mov-search-clr { background:none; border:none; cursor:pointer; font-size:13px; color:var(--char3); padding:5px 7px; border-radius:var(--r); transition:color .15s; line-height:1; display:none; } .mov-search-clr:hover { color:var(--char); } .mov-filters-sep { width:1px; height:16px; background:var(--parch3); align-self:center; flex-shrink:0; } .mov-filter { padding: 5px 13px; background: var(--parch); border: 1.5px solid var(--parch3); color: var(--char3); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border-radius: 20px; font-family: var(--sans); transition: all 0.15s; } .mov-filter:hover, .mov-filter.on { border-color: var(--gold-ln); color: var(--gold); background: var(--gold-bg); } .mov-filter.mov-lf:hover, .mov-filter.mov-lf.on { border-color:var(--leather); color:var(--leather); background:rgba(139,90,43,.09); } .mov-list { background: var(--parch); border: 1.5px solid var(--parch3); border-radius: var(--r2); overflow: hidden; box-shadow: 0 1px 6px rgba(44, 36, 24, 0.05); } .mov-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--parch3); transition: background 0.12s; } .mov-carrito-wrap { border-bottom: 1px solid var(--parch3); transition: background 0.12s; cursor: pointer; } .mov-carrito-wrap:last-child { border-bottom: none; } .mov-carrito-wrap:hover > .mov-row { background: var(--parch2); } .mov-row:last-child { border-bottom: none; } .mov-row:hover { background: var(--parch2); } .mov-del-btn { opacity: 0; background: none; border: none; cursor: pointer; color: var(--char3); font-size: 15px; padding: 4px 6px; border-radius: var(--r); transition: opacity 0.15s, color 0.15s, background 0.15s; flex-shrink: 0; line-height: 1; } .mov-row:hover .mov-del-btn, .mov-carrito-wrap:hover .mov-del-btn { opacity: 1; } .mov-del-btn:hover { color: var(--red); background: rgba(181,58,42,.1); } .mov-icon { font-size: 18px; text-align: center; line-height: 1; } .mov-info h4 { font-size: 13px; color: var(--char); margin-bottom: 3px; font-weight: 600; letter-spacing: -.01em; } .mov-info p { font-size: 10px; color: var(--char2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .mov-delta { font-size: 16px; font-weight: 700; text-align: right; letter-spacing: -.02em; } .mov-delta.neg { color: var(--red); } .mov-delta.pos { color: var(--green); } .mov-time { font-size: 10px; font-weight: 400; color: var(--char3); text-align: right; margin-top: 2px; } .mov-date-sep { display: flex; align-items: center; gap: 10px; padding: 7px 16px 5px; background: var(--parch2); border-bottom: 1px solid var(--parch3); } .mov-date-sep span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--char3); white-space: nowrap; } .mov-date-sep::after { content: ""; flex: 1; height: 1px; background: var(--parch3); } .mov-results { font-size: 11px; font-weight: 500; color: var(--char3); margin-bottom: 10px; min-height: 14px; } .mov-hl { background: rgba(200,98,42,.15); color: var(--gold); border-radius: 2px; padding: 0 2px; font-weight: 700; } .mov-filters { gap: 12px; margin-bottom: 20px; padding: 18px 20px; background: rgba(247, 242, 235, 0.92); border: 1px solid rgba(214, 199, 179, 0.88); border-radius: 26px; box-shadow: none; } .mov-filters-row { gap: 8px; } .mov-search-bar { gap: 8px; } .mov-search-bar input { min-height: 44px; background: rgba(255, 255, 255, 0.76); border: 1px solid rgba(200, 98, 42, 0.16); padding: 10px 14px 10px 38px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 22px rgba(26, 20, 16, 0.03); transition: border-color .15s, box-shadow .15s, background .15s; } .mov-search-bar input:focus { border-color: rgba(200, 98, 42, 0.42); background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 0 0 3px rgba(200, 98, 42, 0.08); } .mov-search-bar .mov-search-wrap::before { left: 12px; font-size: 13px; } .mov-search-clr { background: rgba(26, 20, 16, 0.04); border: 1px solid rgba(26, 20, 16, 0.08); padding: 8px 10px; border-radius: 12px; transition: color .15s, background .15s, border-color .15s; } .mov-search-clr:hover { background: rgba(200, 98, 42, 0.08); border-color: rgba(200, 98, 42, 0.16); } .mov-filters-sep { height: 18px; background: rgba(217, 204, 186, 0.96); } .mov-filter { padding: 8px 14px; background: rgba(255, 255, 255, 0.68); border: 1px solid rgba(217, 204, 186, 0.96); letter-spacing: 0.14em; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .mov-filter:hover, .mov-filter.on { border-color: rgba(26, 20, 16, 0.16); color: var(--char); background: rgba(26, 20, 16, 0.07); } .mov-list { position: relative; counter-reset: mov-ledger; background: var(--parch); border: 1px solid rgba(214, 199, 179, 0.84); border-radius: 28px; overflow: hidden; box-shadow: 0 18px 40px rgba(33, 25, 17, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.62); } .mov-list::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.16); pointer-events: none; } .mov-list::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(109, 85, 61, 0.08) 0, rgba(109, 85, 61, 0.08) 72px, transparent 72px), repeating-linear-gradient( 180deg, transparent 0, transparent 63px, rgba(109, 85, 61, 0.028) 63px, rgba(109, 85, 61, 0.028) 64px ); pointer-events: none; } .mov-row { position: relative; counter-increment: mov-ledger; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 18px; align-items: flex-start; padding: 22px 24px 20px 92px; margin: 0; border: none; border-bottom: 1px solid rgba(214, 199, 179, 0.58); border-radius: 0; background: transparent; box-shadow: none; transition: background .16s ease, border-color .16s ease; } .mov-row::before { content: ""; position: absolute; left: 72px; top: 16px; bottom: 16px; width: 2px; border-radius: 999px; background: rgba(26, 20, 16, 0.08); opacity: 0; transition: opacity .14s ease, background .14s ease; } .mov-row::after { content: counter(mov-ledger, decimal-leading-zero); position: absolute; left: 22px; top: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: rgba(92, 76, 58, 0.44); } .mov-row.mov-row-ingreso::before, .mov-row.mov-row-transferencia_entrada::before { background: rgba(58, 120, 74, 0.6); } .mov-row.mov-row-merma::before, .mov-row.mov-row-transferencia_salida::before { background: rgba(181, 58, 42, 0.65); } .mov-row.mov-row-ajuste::before { background: rgba(126, 92, 51, 0.55); } .mov-row.mov-row-venta::before, .mov-row.mov-row-venta-group::before { background: rgba(200, 98, 42, 0.62); } .mov-row:last-child { border-bottom: none; } .mov-carrito-wrap { border-bottom: 1px solid rgba(217, 204, 186, 0.72); } .mov-carrito-wrap:last-child { border-bottom: none; } .mov-carrito-wrap:last-child > .mov-row { border-bottom: none; } .mov-carrito-wrap:hover > .mov-row, .mov-row:hover { background: rgba(255, 255, 255, 0.42); } .mov-carrito-wrap:hover > .mov-row::before, .mov-row:hover::before { opacity: 1; } .mov-del-btn { background: rgba(255, 255, 255, 0.36); border: 1px solid rgba(26, 20, 16, 0.1); font-size: 12px; padding: 6px 8px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.42); } .mov-icon { width: 46px; min-width: 46px; height: auto; display: flex; align-items: center; justify-content: center; align-self: center; font-size: 18px; line-height: 1.1; border-radius: 0; background: transparent; border: none; box-shadow: none; text-align: center; } .mov-row-venta-group .mov-icon { background: rgba(42, 90, 140, 0.08); border: 1px solid rgba(42, 90, 140, 0.18); border-radius: 10px; min-height: 32px; } .mov-main { min-width: 0; } .mov-main-split { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; } .mov-main-col { min-width: 0; } .mov-products-side { min-width: 0; padding-left: 0; border-left: none; border-top: 1px solid rgba(186, 166, 142, 0.34); padding-top: 8px; } .mov-products-kicker { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(92, 76, 58, 0.56); } .mov-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; } .mov-info h4 { font-size: 13px; margin: 0; letter-spacing: -0.01em; line-height: 1.25; font-weight: 700; } .mov-ticket-link { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(92, 76, 58, 0.72); font-family: var(--mono); transition: color .14s ease, letter-spacing .14s ease; } .mov-carrito-wrap:hover .mov-ticket-link { color: rgba(44, 32, 20, 0.96); letter-spacing: .18em; } .mov-folio { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(92, 76, 58, 0.56); } .mov-meta { font-size: 10px; color: var(--char2); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .mov-meta .tag { border-radius: 999px; background: transparent; border-color: var(--parch3); box-shadow: none; } .mov-context { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 6px; } .mov-context-item { font-size: 11px; line-height: 1.2; color: var(--char); font-weight: 600; letter-spacing: -.01em; } .mov-context-item.muted { color: var(--char2); font-weight: 500; } .mov-context-item.key { color: var(--char); font-weight: 700; } .mov-context-item.discount { color: var(--green); font-weight: 700; } .mov-context-item.client { color: var(--blue); font-weight: 700; } .mov-note { margin-top: 11px; font-size: 12px; color: var(--char2); line-height: 1.5; max-width: 70ch; } .mov-products-list { font-family: var(--mono); font-size: 12px; line-height: 1.45; color: var(--char); font-weight: 500; letter-spacing: 0.01em; overflow-wrap: anywhere; } .mov-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 118px; } .mov-side-main { text-align: right; } .mov-delta { font-family: var(--mono); font-size: 17px; line-height: 1; letter-spacing: -0.03em; } .mov-time { margin-top: 7px; font-family: var(--mono); letter-spacing: .02em; opacity: .78; } .mov-actions { display: flex; align-items: center; gap: 6px; } .mov-date-sep { gap: 12px; position: sticky; top: 0; z-index: 2; padding: 16px 24px 10px 92px; background: rgba(245, 239, 231, 0.92); border-bottom: 1px solid rgba(186, 166, 142, 0.42); } .mov-date-sep span { letter-spacing: .16em; padding: 0 2px; color: rgba(92, 76, 58, 0.84); } .mov-date-sep::after { height: 1px; background: linear-gradient(90deg, rgba(186, 166, 142, 0.65), rgba(217, 204, 186, 0)); } .mov-results { color: var(--char2); margin-bottom: 14px; padding-left: 6px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; } .mov-detail-panel { display: none; margin: 0; padding: 0 24px 20px 140px; background: var(--card-bg-alt); border-top: var(--card-border-thin); border-radius: 0; box-shadow: none; } .mov-detail-item { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(26, 20, 16, 0.08); font-size: 12px; } .mov-detail-item:last-child { border-bottom: none; } .mov-detail-name { color: var(--char); font-weight: 700; font-size: 13px; } .mov-detail-meta { color: var(--char2); font-size: 11px; text-align: right; font-weight: 600; } .mov-detail-footer { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(26, 20, 16, 0.1); font-size: 11px; color: var(--char2); } .mov-detail-footer > span { font-size: 11px; color: var(--char); font-weight: 600; } .mov-detail-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════ MOVIMIENTOS · Libro Maestro · v7.0 Ledger editorial — filtros como tabs, amounts en Fraunces ═══════════════════════════════════════════════════════════ */ /* Layout */ #page-movimientos .mov-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; } /* ── Filtros: stripped down, tab-style ── */ #page-movimientos .mov-filters { display: flex; flex-direction: column; gap: 0; margin-bottom: 18px; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; } /* Search: underline style — consistente con login */ #page-movimientos .mov-search-bar { gap: 0; margin-bottom: 14px; } #page-movimientos .mov-search-bar input { width: 100%; background: transparent; border: none; border-bottom: 1.5px solid rgba(26, 20, 16, 0.15); border-radius: 0; color: #1a1410; padding: 9px 0 9px 24px; font-family: var(--sans); font-size: 13px; min-height: auto; box-shadow: none; transition: border-color 0.18s; } #page-movimientos .mov-search-bar input:focus { border-bottom-color: rgba(200, 98, 42, 0.58); background: transparent; box-shadow: none; } #page-movimientos .mov-search-bar input::placeholder { color: rgba(26, 20, 16, 0.28); font-size: 12px; } #page-movimientos .mov-search-bar .mov-search-wrap::before { content: ''; position: absolute; left: 1px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; opacity: 0.36; pointer-events: none; font-size: unset; font-family: unset; } #page-movimientos .mov-search-clr { background: transparent; border: none; color: rgba(26, 20, 16, 0.35); border-radius: 0; padding: 6px 8px; font-family: var(--mono); font-size: 11px; box-shadow: none; } #page-movimientos .mov-search-clr:hover { background: transparent; color: rgba(200, 98, 42, 0.70); border: none; } /* Filter row: tab underline */ #page-movimientos .mov-filters-row { display: flex; gap: 0; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(26, 20, 16, 0.09); } #page-movimientos .mov-filter { padding: 9px 14px; background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: rgba(26, 20, 16, 0.56); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; font-family: var(--mono); font-weight: 500; transition: color 0.14s, border-color 0.14s; margin-bottom: -1px; box-shadow: none; } #page-movimientos .mov-filter:hover { color: rgba(26, 20, 16, 0.78); background: transparent; border-bottom-color: rgba(26, 20, 16, 0.22); } #page-movimientos .mov-filter.on { color: rgba(200, 98, 42, 1); background: transparent; border-bottom: 2px solid rgba(200, 98, 42, 0.80); font-weight: 700; } #page-movimientos .mov-filter.mov-lf.on { color: #1a1410; border-bottom-color: rgba(26, 20, 16, 0.65); background: transparent; } #page-movimientos .mov-filter.mov-lf:hover { color: rgba(26, 20, 16, 0.78); border-bottom-color: rgba(26, 20, 16, 0.28); background: transparent; } #page-movimientos .mov-filters-sep { width: 1px; height: 14px; background: rgba(26, 20, 16, 0.12); margin: 0 4px 1px; align-self: center; flex-shrink: 0; } /* Results summary */ #page-movimientos .mov-results { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 20, 16, 0.35); margin-bottom: 12px; margin-top: 12px; padding-left: 0; } /* ── Lista principal ── */ #page-movimientos .mov-list { background: var(--parch); 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); } #page-movimientos .mov-list::before, #page-movimientos .mov-list::after { display: none; } /* Date separators: Fraunces italic */ #page-movimientos .mov-date-sep { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 10px 20px 8px; background: rgba(237, 228, 215, 0.95); border-bottom: 1px solid rgba(26, 20, 16, 0.08); } #page-movimientos .mov-date-sep span { font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 400; font-style: italic; letter-spacing: 0.01em; text-transform: none; color: rgba(26, 20, 16, 0.72); white-space: nowrap; } #page-movimientos .mov-date-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(26, 20, 16, 0.10), transparent); } /* ══ EL LIBRO MAYOR — ledger rows ══ */ #page-movimientos .mov-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 54px 28px; gap: 0 14px; align-items: center; padding: 13px 16px 13px 14px; border: none; border-left: 3px solid transparent; border-bottom: 1px solid rgba(26, 20, 16, 0.07); background: transparent; position: relative; transition: background 0.10s; box-shadow: none; cursor: default; } #page-movimientos .mov-row::before, #page-movimientos .mov-row::after { display: none; } /* Type accent via left border */ #page-movimientos .mov-row.mov-row-venta, #page-movimientos .mov-row.mov-row-venta-group { border-left-color: rgba(200, 98, 42, 0.72); } #page-movimientos .mov-row.mov-row-ingreso, #page-movimientos .mov-row.mov-row-transferencia_entrada { border-left-color: rgba(45, 122, 79, 0.68); } #page-movimientos .mov-row.mov-row-merma, #page-movimientos .mov-row.mov-row-transferencia_salida { border-left-color: rgba(181, 58, 42, 0.68); } #page-movimientos .mov-row.mov-row-ajuste { border-left-color: rgba(42, 90, 140, 0.62); } /* Type badge — icon block */ #page-movimientos .mov-ledger-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 46px; height: 46px; border-radius: 12px; background: rgba(26, 20, 16, 0.06); border: 1px solid rgba(26, 20, 16, 0.08); flex-shrink: 0; align-self: center; } #page-movimientos .mov-type-ico { font-size: 17px; line-height: 1; display: block; } #page-movimientos .mov-type-lbl { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; display: block; color: rgba(26, 20, 16, 0.50); } #page-movimientos .mov-row-venta .mov-ledger-type, #page-movimientos .mov-row-venta-group .mov-ledger-type { background: rgba(200, 98, 42, 0.10); border-color: rgba(200, 98, 42, 0.22); } #page-movimientos .mov-row-venta .mov-type-lbl, #page-movimientos .mov-row-venta-group .mov-type-lbl { color: rgba(170, 75, 18, 0.80); } #page-movimientos .mov-row-ingreso .mov-ledger-type, #page-movimientos .mov-row-transferencia_entrada .mov-ledger-type { background: rgba(45, 122, 79, 0.09); border-color: rgba(45, 122, 79, 0.20); } #page-movimientos .mov-row-ingreso .mov-type-lbl, #page-movimientos .mov-row-transferencia_entrada .mov-type-lbl { color: rgba(30, 105, 62, 0.82); } #page-movimientos .mov-row-merma .mov-ledger-type, #page-movimientos .mov-row-transferencia_salida .mov-ledger-type { background: rgba(181, 58, 42, 0.09); border-color: rgba(181, 58, 42, 0.20); } #page-movimientos .mov-row-merma .mov-type-lbl, #page-movimientos .mov-row-transferencia_salida .mov-type-lbl { color: rgba(160, 42, 28, 0.82); } #page-movimientos .mov-row-ajuste .mov-ledger-type { background: rgba(42, 90, 140, 0.09); border-color: rgba(42, 90, 140, 0.20); } #page-movimientos .mov-row-ajuste .mov-type-lbl { color: rgba(32, 72, 120, 0.82); } /* Center: name + meta */ #page-movimientos .mov-ledger-center { display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; } #page-movimientos .mov-ledger-name { font-size: 13px; font-weight: 600; color: #1a1410; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } #page-movimientos .mov-ledger-meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 1px; } /* Meta chips */ #page-movimientos .mov-mc { font-family: var(--mono); font-size: 9.5px; padding: 2px 7px; border-radius: 5px; background: rgba(26, 20, 16, 0.07); border: 1px solid rgba(26, 20, 16, 0.14); color: rgba(26, 20, 16, 0.72); line-height: 1.35; white-space: nowrap; letter-spacing: 0.02em; } #page-movimientos .mov-mc-l1 { background: rgba(200, 98, 42, 0.12); border-color: rgba(200, 98, 42, 0.30); color: rgba(145, 58, 8, 1); font-weight: 700; } #page-movimientos .mov-mc-l2 { background: rgba(42, 90, 140, 0.11); border-color: rgba(42, 90, 140, 0.28); color: rgba(24, 58, 102, 1); font-weight: 700; } #page-movimientos .mov-mc-emp { color: rgba(26, 20, 16, 0.76); font-weight: 600; } #page-movimientos .mov-mc-pago { background: rgba(45, 122, 79, 0.10); border-color: rgba(45, 122, 79, 0.26); color: rgba(22, 84, 46, 0.96); font-weight: 600; } #page-movimientos .mov-mc-client { background: rgba(42, 90, 140, 0.10); border-color: rgba(42, 90, 140, 0.26); color: rgba(24, 58, 102, 0.96); font-weight: 600; } /* Amount */ #page-movimientos .mov-ledger-amount { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: -0.02em; text-align: right; white-space: nowrap; line-height: 1; } #page-movimientos .mov-ledger-amount .mov-ledger-unit { font-weight: 500; font-size: 10px; opacity: 0.72; margin-left: 2px; } #page-movimientos .mov-ledger-amount.pos { color: rgba(30, 105, 62, 0.90); } #page-movimientos .mov-ledger-amount.neg { color: rgba(160, 42, 28, 0.90); } #page-movimientos .mov-ledger-amount.sale { color: #1a1410; } /* Time */ #page-movimientos .mov-ledger-time { font-family: var(--mono); font-size: 10.5px; color: rgba(26, 20, 16, 0.46); letter-spacing: 0.02em; text-align: right; white-space: nowrap; } /* Row actions (appear on hover) */ #page-movimientos .mov-ledger-actions { display: flex; gap: 2px; align-items: center; opacity: 0; transition: opacity 0.12s; justify-content: flex-end; } #page-movimientos .mov-row:hover .mov-ledger-actions { opacity: 1; } /* Carrito wrap */ #page-movimientos .mov-carrito-wrap { border-bottom: 1px solid rgba(26, 20, 16, 0.07); cursor: pointer; transition: background 0.10s; } #page-movimientos .mov-carrito-wrap > .mov-row { border-bottom: none; } #page-movimientos .mov-carrito-wrap:last-child { border-bottom: none; } #page-movimientos .mov-row:last-child { border-bottom: none; } #page-movimientos .mov-carrito-wrap:hover > .mov-row, #page-movimientos .mov-row:hover { background: rgba(240, 232, 219, 0.48); } #page-movimientos .mov-carrito-wrap.is-selected > .mov-row { background: rgba(200, 98, 42, 0.05); border-left-color: rgba(200, 98, 42, 0.82); } /* Delete btn */ #page-movimientos .mov-del-btn { background: transparent; border: none; border-radius: 3px; font-size: 10px; padding: 3px 5px; color: rgba(26, 20, 16, 0.28); box-shadow: none; cursor: pointer; transition: background 0.10s, color 0.10s; } #page-movimientos .mov-del-btn:hover { background: rgba(181, 58, 42, 0.08); color: var(--red); } /* Hide old card elements (not used in ledger) */ #page-movimientos .mov-icon, #page-movimientos .mov-main-split, #page-movimientos .mov-meta, #page-movimientos .mov-title-line, #page-movimientos .mov-products-side, #page-movimientos .mov-products-list, #page-movimientos .mov-side, #page-movimientos .mov-side-main, #page-movimientos .mov-delta, #page-movimientos .mov-time { display: none !important; } /* ── Detail panel (mobile inline) ── */ #page-movimientos .mov-detail-panel { padding: 0 16px 12px 66px; background: rgba(237, 228, 215, 0.35); border-top: 1px solid rgba(26, 20, 16, 0.07); } /* ── Highlight query match ── */ #page-movimientos .mov-hl { background: rgba(200, 98, 42, 0.14); border-radius: 2px; padding: 0 1px; color: inherit; opacity: 1 } /* Del button */ #page-movimientos .mov-del-btn { background: transparent; border: none; border-radius: 3px; font-size: 11px; padding: 4px 6px; box-shadow: none; } #page-movimientos .mov-del-btn:hover { background: rgba(181, 58, 42, 0.07); color: var(--red); } /* Detail panel (inline expand) */ #page-movimientos .mov-detail-panel { padding: 0 18px 14px 58px; background: rgba(237, 228, 215, 0.35); border-top: 1px solid rgba(26, 20, 16, 0.07); } /* ══ EL LIBRO MAYOR — inspector (documento de venta) ══ */ #page-movimientos .mov-inspector { background: #faf7f2; border: 1px solid rgba(26, 20, 16, 0.10); border-radius: 6px; min-height: 300px; max-height: 80vh; overflow: auto; position: sticky; top: 76px; padding: 26px 22px 22px; } .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; } /* Padding wrapper inside the drawer */ .mov-ins-doc-wrap { padding: 26px 22px 22px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* Document header */ .mov-ins-kicker { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(200, 98, 42, 0.72); margin-bottom: 6px; } .mov-ins-amount { font-family: 'Fraunces', Georgia, serif; font-size: 44px; font-weight: 700; font-style: italic; letter-spacing: -0.05em; color: #1a1410; line-height: 1; margin-bottom: 18px; } .mov-ins-rule { height: 1px; background: linear-gradient(90deg, rgba(200,98,42,0.18), rgba(26,20,16,0.07) 60%, transparent); margin: 14px 0; } /* Inspector key-value fields */ .mov-ins-fields { display: flex; flex-direction: column; gap: 9px; } .mov-ins-field { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .mov-ins-field > span:first-child { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 20, 16, 0.58); flex-shrink: 0; font-weight: 600; } .mov-ins-field > span:last-child { font-size: 12.5px; font-weight: 600; color: #1a1410; text-align: right; letter-spacing: -0.01em; } .mov-ins-field-client { color: var(--blue) !important; } .mov-ins-field-discount { color: var(--green) !important; } .mov-ins-field-key { color: var(--char) !important; } /* Items list */ .mov-ins-items { display: flex; flex-direction: column; gap: 0; } .mov-ins-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(26, 20, 16, 0.07); } .mov-ins-item:last-child { border-bottom: none; } .mov-ins-item-name { font-size: 12.5px; color: #1a1410; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .mov-ins-item-qty { font-family: var(--mono); font-size: 9.5px; color: rgba(26, 20, 16, 0.40); white-space: nowrap; } .mov-ins-item-price { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #1a1410; white-space: nowrap; } /* Total line */ .mov-ins-total-line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; margin-bottom: 2px; } .mov-ins-total-line > span:first-child { font-family: var(--mono); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26, 20, 16, 0.46); } .mov-ins-total-line > span:last-child { font-family: var(--mono); font-size: 17px; font-weight: 700; color: #1a1410; letter-spacing: -0.02em; } /* Action buttons */ .mov-ins-actions { display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(26, 20, 16, 0.08); } .mov-ins-btn { flex: 1; text-align: center; padding: 8px 6px; border-radius: 3px; border: 1px solid rgba(26, 20, 16, 0.11); background: rgba(26, 20, 16, 0.03); color: #1a1410; font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; cursor: pointer; transition: background 0.13s, border-color 0.13s; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mov-ins-btn:hover { background: rgba(26, 20, 16, 0.07); border-color: rgba(26, 20, 16, 0.18); } .mov-ins-btn.edit { border-color: rgba(42, 90, 140, 0.22); color: var(--blue); } .mov-ins-btn.edit:hover { background: rgba(42, 90, 140, 0.06); } .mov-ins-btn.del { border-color: rgba(181, 58, 42, 0.22); color: var(--red); } .mov-ins-btn.del:hover { background: rgba(181, 58, 42, 0.06); } /* Responsive */ @media (max-width: 960px) { #page-movimientos .mov-layout { grid-template-columns: 1fr; } #page-movimientos .mov-inspector { display: none; } } .mov-mobile-detail { display: none; } @media (max-width: 640px) { .mov-filters { padding: 14px; border-radius: 18px; } .mov-search-bar { align-items: stretch; } .mov-search-clr { align-self: stretch; } .mov-list { border-radius: 22px; } .mov-list::after { display: none; } #page-movimientos .mov-layout { grid-template-columns: 1fr; } #page-movimientos .mov-inspector { display: none; } .mov-row { grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 12px 12px; } .mov-main-split { grid-template-columns: 1fr; gap: 8px; } .mov-products-side { padding-left: 0; border-left: none; border-top: 1px solid rgba(186, 166, 142, 0.28); padding-top: 8px; } .mov-row::before { display: none; } .mov-row::after { display: none; } .mov-icon { width: 40px; min-width: 40px; height: auto; border-radius: 0; font-size: 16px; } .mov-title-line { margin-bottom: 8px; } .mov-info h4 { font-size: 15px; line-height: 1.18; } #page-movimientos .mov-info h4 { font-size: 16px; line-height: 1.2; } .mov-context-item { font-size: 10px; line-height: 1.25; } .mov-side { grid-column: 2; justify-content: space-between; align-items: flex-start; flex-direction: row; width: 100%; min-width: 0; margin-top: 2px; gap: 8px; } .mov-side-main { text-align: left; } .mov-actions { margin-left: auto; gap: 4px; } .mov-del-btn { padding: 5px 7px; font-size: 11px; } .mov-delta, .mov-time { text-align: left; } #page-movimientos .mov-delta { font-size: 24px; } .mov-detail-panel { padding: 0 12px 12px; border-radius: 0; } .mov-date-sep { position: static; top: auto; padding: 12px 12px 8px; backdrop-filter: none; } .mov-detail-item { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; } .mov-context { gap: 6px 8px; } .mov-note { margin-top: 8px; font-size: 11px; line-height: 1.4; } .mov-products-kicker { margin-bottom: 6px; letter-spacing: .12em; } .mov-products-list { font-size: 11px; line-height: 1.35; } #page-movimientos .mov-products-list { font-size: 11.5px; line-height: 1.42; } .mov-mobile-detail { display: block; padding: 0 12px 12px 52px; background: rgba(255, 255, 255, 0.34); border-top: 1px solid rgba(186, 166, 142, 0.3); } .mov-mobile-det-item { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(214, 199, 179, 0.52); } .mov-mobile-det-item:last-child { border-bottom: none; } .mov-mobile-det-name { font-size: 12px; font-weight: 700; color: var(--char); line-height: 1.3; } .mov-mobile-det-qty { font-family: var(--mono); font-size: 10px; color: var(--char3); white-space: nowrap; } .mov-mobile-det-price { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--char); white-space: nowrap; } .mov-mobile-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(214, 199, 179, 0.52); } .mov-mobile-btn { padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(186, 166, 142, 0.6); background: rgba(255, 255, 255, 0.58); color: var(--char); font-size: 10px; font-weight: 700; letter-spacing: .03em; cursor: pointer; } .mov-mobile-btn.edit { border-color: rgba(42, 90, 140, 0.34); color: var(--blue); } .mov-mobile-btn.del { border-color: rgba(181, 58, 42, 0.36); color: var(--red); } .mov-detail-meta, .mov-detail-actions { text-align: left; margin-left: 0; } .mov-detail-footer { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ══════════════════════════════════════════════════════ MOVIMIENTOS · La Bitácora · Layout A · v7.0 Full-width chronicle + fixed drawer inspector Single filter bar · list breathes · detail slides in ══════════════════════════════════════════════════════ */ /* ── Page header: editorial strip ── */ #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; } /* ── Unified filter bar: horizontal single row ── */ #page-movimientos .mov-filters { flex-direction: row !important; align-items: stretch !important; gap: 0 !important; margin-bottom: 12px !important; padding: 0 !important; background: #ffffff !important; border: 1px solid var(--line-soft) !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 1px 6px rgba(26,20,16,0.04) !important; min-height: 44px; } /* Search section: flexible */ #page-movimientos .mov-search-bar { flex: 1 1 auto !important; min-width: 0 !important; margin-bottom: 0 !important; gap: 0 !important; align-items: center !important; padding-left: 4px; } #page-movimientos .mov-search-wrap { flex: 1 !important; } #page-movimientos .mov-search-bar input { width: 100% !important; background: transparent !important; border: none !important; border-radius: 0 !important; border-bottom: none !important; padding: 11px 10px 11px 26px !important; font-size: 12px !important; min-height: auto !important; box-shadow: none !important; color: var(--t1) !important; font-family: var(--sans) !important; } #page-movimientos .mov-search-bar input:focus { border: none !important; box-shadow: none !important; background: transparent !important; outline: none !important; } #page-movimientos .mov-search-bar input::placeholder { color: var(--t4) !important; font-size: 12px !important; } #page-movimientos .mov-search-bar .mov-search-wrap::before { left: 1px; opacity: 0.28; } #page-movimientos .mov-search-clr { border: none !important; border-radius: 0 !important; padding: 0 10px !important; background: transparent !important; align-self: stretch !important; display: flex !important; align-items: center !important; } /* Filter pills row: separated by left border */ #page-movimientos .mov-filters-row { flex-shrink: 0 !important; border-left: 1px solid var(--line-soft) !important; padding: 7px 10px !important; gap: 3px !important; flex-wrap: nowrap !important; align-items: center !important; display: flex !important; } #page-movimientos .mov-filter { padding: 5px 9px !important; font-size: 9px !important; border-radius: 6px !important; letter-spacing: 0.10em !important; height: 28px !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; } #page-movimientos .mov-filters-sep { width: 1px !important; height: 18px !important; background: var(--line-soft) !important; align-self: center !important; margin: 0 3px !important; flex-shrink: 0 !important; display: block !important; } /* Results count: slim mono bar */ #page-movimientos + .mov-results, #page-movimientos .mov-results, #mov-results { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.10em; color: var(--t3); margin-bottom: 14px; padding: 0 2px; } /* ── Layout: single column ── */ /* Page: full-height flex column — nothing scrolls the page */ #page-movimientos { height: calc(100vh - 56px) !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; padding-bottom: 0 !important; } #page-movimientos .page-hd { flex-shrink: 0; } #page-movimientos .mov-filters { flex-shrink: 0; } #page-movimientos #mov-results { flex-shrink: 0; } #page-movimientos #mov-ver-mas-wrap { flex-shrink: 0 !important; margin-top: 10px !important; margin-bottom: 14px !important; } #page-movimientos .mov-layout { flex: 1 !important; min-height: 0 !important; display: block !important; gap: 0 !important; position: relative !important; overflow: hidden !important; /* clips inspector off-screen & during slide */ } /* List fills remaining height */ #page-movimientos .mov-list { transition: margin-right var(--motion-slow) var(--ease-spring) !important; height: 100% !important; max-height: none !important; overflow-y: auto !important; box-sizing: border-box !important; } /* When inspector is active: push list left so drawer doesn't overlap */ #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list { margin-right: 416px !important; } /* ── Inspector: absolute drawer from right, matches list height exactly ── */ #page-movimientos .mov-inspector { position: absolute !important; top: 0 !important; right: -420px !important; width: 400px !important; height: 100% !important; /* mismo alto que mov-layout */ max-height: none !important; overflow: hidden !important; z-index: 4 !important; border-radius: 0 !important; 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) !important; background: #faf7f2 !important; padding: 0 !important; transition: right var(--motion-slow) var(--ease-spring) !important; display: flex !important; flex-direction: column !important; } /* Slide in when populated */ #page-movimientos .mov-inspector:has(.mov-ins-kicker) { right: 0 !important; } /* ── Inspector content: document layout ── */ /* Empty state */ #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; } /* Header: coal document top */ #page-movimientos .mov-ins-head { background: linear-gradient(160deg, #1a1410 0%, #231912 100%); border-top: 3px solid rgba(200,98,42,0.72); padding: 22px 22px 20px; flex-shrink: 0; } #page-movimientos .mov-ins-title { font-family: var(--mono); font-size: 8px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240,230,214,0.38); margin-bottom: 10px; } #page-movimientos .mov-ins-total { font-family: var(--serif); font-size: 46px; font-weight: 700; font-style: normal; letter-spacing: -0.04em; line-height: 1; color: rgba(240,230,214,0.94); margin-bottom: 16px; } /* Meta pills: on dark background */ #page-movimientos .mov-ins-meta { display: flex; flex-wrap: wrap; gap: 5px 6px; padding: 0; margin: 0; background: none; border: none; } #page-movimientos .mov-inspector .venc-pill { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 4px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); color: rgba(240,230,214,0.60); white-space: nowrap; } #page-movimientos .mov-inspector .venc-pill.is-key { background: rgba(200,98,42,0.14); border-color: rgba(200,98,42,0.24); color: rgba(240,196,140,0.88); } #page-movimientos .mov-inspector .venc-pill.is-client { background: rgba(42,90,140,0.16); border-color: rgba(42,90,140,0.24); color: rgba(160,200,255,0.80); } #page-movimientos .mov-inspector .venc-pill.is-discount { background: rgba(45,122,79,0.14); border-color: rgba(45,122,79,0.22); color: rgba(120,200,140,0.88); } /* Item list: the actual products — no flex:1, actions stay close */ #page-movimientos .mov-ins-list { padding: 4px 0; flex: 0 0 auto; background: #ffffff; overflow-y: auto; max-height: calc(100vh - 320px); } #page-movimientos .mov-ins-item { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 12px; align-items: baseline; padding: 13px 22px; border-bottom: 1px solid rgba(26,20,16,0.07); } #page-movimientos .mov-ins-item:last-child { border-bottom: none; } #page-movimientos .mov-ins-item-name { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: normal; color: var(--t1); letter-spacing: -0.01em; line-height: 1.3; grid-column: 1; grid-row: 1; } #page-movimientos .mov-ins-item-qty { font-family: var(--mono); font-size: 10px; color: rgba(26, 20, 16, 0.52); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; grid-column: 1; grid-row: 2; padding-top: 3px; } #page-movimientos .mov-ins-item-price { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; grid-column: 3; grid-row: 1 / 3; align-self: center; text-align: right; } /* Actions: always at bottom — no sticky needed, flex column does the work */ #page-movimientos .mov-ins-actions { padding: 14px 22px; border-top: 1px solid var(--line-soft); background: var(--surface-1); display: flex; gap: 8px; flex-shrink: 0; } #page-movimientos .mov-ins-btn { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border-radius: 6px; flex: 1; text-align: center; cursor: pointer; border: 1px solid var(--line-strong); background: #ffffff; color: var(--t2); transition: all var(--motion-fast) var(--ease-ui); } #page-movimientos .mov-ins-btn:hover { background: var(--t1); color: rgba(240,230,214,0.88); border-color: var(--t1); } #page-movimientos .mov-ins-btn.edit { border-color: rgba(42,90,140,0.28); color: var(--blue); } #page-movimientos .mov-ins-btn.edit:hover { background: rgba(42,90,140,0.90); color: #fff; border-color: transparent; } #page-movimientos .mov-ins-btn.del { border-color: rgba(181,58,42,0.24); color: var(--red); } #page-movimientos .mov-ins-btn.del:hover { background: rgba(181,58,42,0.88); color: #fff; border-color: transparent; } /* Selected row: right indicator */ #page-movimientos .mov-carrito-wrap.is-selected > .mov-row { border-right: 3px solid rgba(200,98,42,0.72) !important; padding-right: calc(22px - 3px) !important; } /* ── Responsive ── */ @media (max-width: 1100px) { #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list { margin-right: 340px; } #page-movimientos .mov-inspector { width: 320px !important; right: -330px !important; } } @media (max-width: 860px) { #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list { margin-right: 0; } #page-movimientos .mov-inspector:has(.mov-ins-kicker) { right: 0 !important; } } @media (max-width: 640px) { #page-movimientos .mov-filters { flex-direction: column !important; min-height: auto !important; border-radius: 8px !important; } #page-movimientos .mov-filters-row { border-left: none !important; border-top: 1px solid var(--line-soft) !important; flex-wrap: wrap !important; padding: 8px 10px !important; } #page-movimientos .mov-inspector { display: none !important; } #page-movimientos:has(.mov-inspector .mov-ins-kicker) .mov-list { margin-right: 0 !important; } } /* ── CARRITO DETAIL PANEL ── */ .carrito-det { border-top: 1px solid rgba(200,98,42,.18); } .carrito-det-topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--parch2); border-bottom: 1px solid var(--parch3); } .carrito-det-topbar-count { font-family: var(--mono); font-size: 9px; letter-spacing:.16em; text-transform: uppercase; color: var(--char3); } .carrito-det-topbar-total { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--char); letter-spacing:-.02em; } .carrito-det-products { background: #fefcf9; padding: 2px 0; } .carrito-det-item { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 9px 18px; border-bottom: 1px solid rgba(26,20,16,.055); transition: background .1s; } .carrito-det-item:last-child { border-bottom: none; } .carrito-det-item:hover { background: rgba(200,98,42,.035); } .carrito-det-item-name { font-size: 12px; color: var(--char); font-weight: 500; } .carrito-det-item-qty { font-family: var(--mono); font-size: 10px; color: var(--char3); white-space: nowrap; } .carrito-det-item-price { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--char); white-space: nowrap; } .carrito-det-discount { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px; background: rgba(45,122,79,.05); border-top: 1px dashed rgba(45,122,79,.2); font-family: var(--mono); font-size: 11px; color: var(--green); } .carrito-det-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 18px 12px; background: var(--parch2); border-top: 1px solid rgba(26,20,16,.06); } .carrito-det-meta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:11px; color:var(--char2); } .carrito-det-actions { display:flex; gap:7px; flex-shrink:0; } .carrito-det-btn-del { padding: 5px 13px; background: none; border: 1.5px solid rgba(181,58,42,.25); color: var(--red); border-radius: 20px; font-family: var(--sans); font-size: 10px; font-weight: 500; cursor: pointer; letter-spacing:.04em; transition: border-color .15s, background .15s; } .carrito-det-btn-del:hover { border-color: var(--red); background: rgba(181,58,42,.06); } .carrito-det-btn-ticket { padding: 5px 15px; background: var(--leather); color: var(--text-on-dark); border: none; border-radius: 20px; font-family: var(--sans); font-size: 10px; font-weight: 600; cursor: pointer; letter-spacing:.04em; transition: background .15s; } .carrito-det-btn-ticket:hover { background: var(--leather2); } /* REVIEWS */ .rev-card { border: var(--card-border); border-radius: var(--card-radius); padding: 18px; margin-bottom: 10px; background: var(--card-bg); transition: box-shadow 0.15s; box-shadow: 0 1px 4px rgba(44, 36, 24, 0.04); } .rev-card:hover { box-shadow: var(--card-shadow-hover); } .rev-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .rev-meta h4 { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--char); } .rev-meta p { font-size: 10px; color: var(--char23); margin-top: 2px; font-family: var(--mono); } .rev-text { font-size: 13px; color: var(--char2); line-height: 1.7; font-style: italic; } /* LOYALTY */ .loyalty-legend { display: flex; margin-bottom: 20px; border: 1.5px solid var(--parch3); border-radius: var(--r2); overflow: hidden; background: var(--parch); box-shadow: 0 1px 4px rgba(44, 36, 24, 0.04); } .lv-cell { flex: 1; padding: 12px 14px; border-right: 1px solid var(--parch3); } .lv-cell:last-child { border-right: none; } .lv-cell-name { font-size: 11px; font-weight: 600; color: var(--char2); margin-bottom: 2px; } .lv-cell-range { font-family: var(--mono); font-size: 9px; color: var(--char3); } /* CHAT */ #page-chat { display: none; padding: 0 !important; } #page-chat.active { display: flex; flex-direction: column; height: 100%; } .chat-topbar { padding: 16px 28px; border-bottom: 1.5px solid var(--parch3); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--parch2); } .chat-topbar h2 { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--char); letter-spacing: -.01em; } .chat-topbar p { font-size: 11px; color: var(--char2); 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(--parch); } .chat-msg { max-width: 62%; display: flex; flex-direction: column; gap: 3px; } .chat-msg.mine { align-self: flex-end; align-items: flex-end; } .chat-msg.other { align-self: flex-start; align-items: flex-start; } .chat-bubble { padding: 10px 14px; border-radius: 12px; font-size: 13px; font-family: var(--sans); font-weight: 400; line-height: 1.55; word-break: break-word; } .chat-msg.mine .chat-bubble { background: var(--gold); color: #fff; border-radius: 12px 12px 3px 12px; } .chat-msg.other .chat-bubble { background: var(--parch2); border: 1.5px solid var(--parch3); color: var(--char); border-radius: 12px 12px 12px 3px; } .chat-meta { font-family: var(--sans); font-size: 10px; color: var(--char3); font-weight: 400; } .chat-sender { font-size: 11px; font-weight: 500; color: var(--char2); margin-bottom: 3px; font-family: var(--sans); letter-spacing: 0; text-transform: none; } .chat-sep { text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--char3); padding: 8px 0; display: flex; align-items: center; gap: 8px; } .chat-sep::before, .chat-sep::after { content: ""; flex: 1; height: 1px; background: var(--parch3); } .chat-footer { padding: 14px 28px; border-top: 1.5px solid var(--parch3); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; background: var(--parch2); } .chat-input { flex: 1; background: var(--parch); border: 1.5px solid var(--parch3); 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(--gold); box-shadow: 0 0 0 3px var(--gold-bg); } .chat-send { width: 40px; height: 40px; background: linear-gradient(135deg, var(--gold), #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(200, 98, 42, 0.3); } .chat-send:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(200, 98, 42, 0.4); } .chat-send svg { width: 16px; height: 16px; stroke: var(--parch); } /* TYPING */ #chat-typing{display:none;align-self:flex-start;align-items:center;gap:7px;padding:2px 0 6px} #chat-typing.visible{display:flex} .chat-typing-label{font-size:11px;color:var(--char3);font-family:var(--sans);font-style:italic} .chat-typing-dots{display:flex;gap:3px;align-items:center} .chat-typing-dots span{width:5px;height:5px;background:var(--char3);border-radius:50%;animation:td-bounce .9s ease-in-out infinite} .chat-typing-dots span:nth-child(2){animation-delay:.15s} .chat-typing-dots span:nth-child(3){animation-delay:.3s} @keyframes td-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}} /* READ */ .chat-read{font-size:11px;margin-left:3px} .chat-read.seen{color:var(--gold)} .chat-read.sent{color:var(--char3)} /* PINNED */ #chat-pinned-bar{display:none;padding:7px 20px;background:var(--gold-bg);border-bottom:1.5px solid var(--gold-ln);align-items:center;gap:10px;cursor:pointer;flex-shrink:0} #chat-pinned-bar.visible{display:flex} .cpb-icon{font-size:13px;flex-shrink:0} .cpb-label{font-size:10px;font-weight:600;color:var(--gold);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0} .cpb-text{flex:1;font-size:12px;color:var(--char2);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* MSG ACTIONS */ .chat-msg-actions{display:flex;gap:3px;align-items:center;opacity:0;transition:opacity .15s;margin-top:3px} .chat-msg:hover .chat-msg-actions{opacity:1} .chat-act-btn{background:var(--parch2);border:1px solid var(--parch3);border-radius:6px;padding:2px 7px;font-size:11px;cursor:pointer;color:var(--char2);font-family:var(--sans);transition:background .12s,color .12s} .chat-act-btn:hover{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-ln)} /* REPLY PREVIEW */ #chat-reply-preview{display:none;padding:8px 14px 6px;background:var(--parch2);border-top:1.5px solid var(--parch3);align-items:center;gap:8px} #chat-reply-preview.visible{display:flex} .crp-bar{width:3px;min-height:28px;align-self:stretch;background:var(--gold);border-radius:2px;flex-shrink:0} .crp-body{flex:1;min-width:0} .crp-autor{font-size:11px;font-weight:600;color:var(--gold);font-family:var(--sans);margin-bottom:1px} .crp-texto{font-size:11px;color:var(--char2);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(--char3);padding:0 4px;transition:color .15s;flex-shrink:0} .crp-close:hover{color:var(--char)} /* QUOTE */ .chat-quote{border-left:3px solid rgba(200,98,42,.4);border-radius:3px;padding:4px 8px;margin-bottom:6px;font-size:11px;font-family:var(--sans);background:rgba(200,98,42,.06)} .chat-msg.mine .chat-quote{background:rgba(255,255,255,.15);border-left-color:rgba(255,255,255,.5)} .chat-quote-autor{font-weight:600;color:var(--gold);margin-bottom:1px} .chat-msg.mine .chat-quote-autor{color:rgba(255,255,255,.9)} .chat-quote-texto{color:var(--char2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-msg.mine .chat-quote-texto{color:rgba(255,255,255,.75)} /* PRODUCT CARD */ .chat-prod-card{background:var(--parch);border:1.5px solid var(--parch3);border-radius:var(--r);padding:10px 12px;margin-top:4px;min-width:180px} .chat-msg.mine .chat-prod-card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)} .cpc-tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--char3);font-family:var(--sans);margin-bottom:4px} .chat-msg.mine .cpc-tag{color:rgba(255,255,255,.6)} .cpc-nombre{font-size:13px;font-weight:600;color:var(--char);font-family:var(--sans);margin-bottom:3px} .chat-msg.mine .cpc-nombre{color:#fff} .cpc-info{font-size:11px;color:var(--char2);font-family:var(--mono)} .chat-msg.mine .cpc-info{color:rgba(255,255,255,.7)} /* PRODUCT PICKER */ #chat-prod-picker{position:absolute;bottom:100%;left:0;right:0;z-index:200;background:var(--parch);border:1.5px solid var(--parch3);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.visible{display:block} #chat-prod-picker-search{width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--parch3);background:var(--parch2);color:var(--char);font-family:var(--sans);font-size:12px;outline:none} .cpp-item{padding:9px 14px;border-bottom:1px solid var(--parch3);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .1s} .cpp-item:hover{background:var(--parch2)} .cpp-item:last-child{border-bottom:none} .cpp-nombre{font-size:12px;font-weight:500;color:var(--char);font-family:var(--sans)} .cpp-meta{font-size:11px;color:var(--char3);font-family:var(--mono)} /* MODAL */ #modal-overlay { position: fixed; inset: 0; background: radial-gradient(120% 120% at 50% 50%, rgba(200, 98, 42, 0.08) 0%, rgba(200, 98, 42, 0) 58%), linear-gradient(180deg, rgba(24, 18, 14, 0.56), rgba(24, 18, 14, 0.48)); z-index: 9000; 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 !important; animation: overlay-out 0.18s ease forwards; pointer-events: none; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } } #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; } @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); } } #modal-overlay.stock-fullscreen { padding: clamp(12px, 2.2vw, 24px); } .modal { position: relative; background: linear-gradient(180deg, rgba(253, 249, 242, 0.98), rgba(245, 239, 230, 0.94)); border: 1px solid rgba(217, 204, 186, 0.9); width: 560px; max-width: 100%; max-height: min(88vh, 920px); overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; animation: pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 28px 80px rgba(28, 20, 16, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.45) inset; min-height: 0; } #m-stock { width: min(980px, 100%); max-width: 980px; max-height: min(92vh, 980px); } .modal-head { padding: 26px 24px 18px; border-bottom: 1px solid rgba(217, 204, 186, 0.88); display: flex; align-items: center; justify-content: center; position: sticky; top: 0; background: linear-gradient(180deg, rgba(253, 249, 242, 0.98), rgba(245, 239, 230, 0.95)); z-index: 2; } .modal-head::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(200, 98, 42, 0.36), rgba(245, 239, 230, 0.12), rgba(200, 98, 42, 0.24)); } .modal-head h3 { font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: 0.01em; color: var(--char); text-align: center; } .modal-close { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(200, 98, 42, 0.18); color: var(--char2); cursor: pointer; font-size: 18px; line-height: 1; border-radius: 999px; transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; } .modal-close:hover { color: var(--char); background: rgba(200, 98, 42, 0.16); border-color: rgba(200, 98, 42, 0.34); transform: translateY(-50%) rotate(90deg); } .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 20px; background: linear-gradient(180deg, rgba(245, 239, 230, 0.28), transparent 18%), transparent; scrollbar-width: thin; scrollbar-color: rgba(128, 103, 79, 0.45) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .modal-body::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track { background: transparent; } .modal-body::-webkit-scrollbar-thumb { background: rgba(128, 103, 79, 0.45); border-radius: 999px; } .modal-body::-webkit-scrollbar-thumb:hover { background: rgba(128, 103, 79, 0.62); } .modal-foot { padding: 14px 24px 18px; border-top: 1px solid rgba(217, 204, 186, 0.88); display: flex; gap: 9px; justify-content: flex-end; position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(245, 239, 230, 0.9), rgba(245, 239, 230, 0.98)); z-index: 2; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fg { margin-bottom: 14px; } .fg label { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--char3); font-weight: 600; margin-bottom: 7px; } .fg input, .fg select, .qty-row select, .modal-body select:not([size]), .modal-body input:not([type="hidden"]), .modal-body textarea { color-scheme: light; } .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 { min-height: 46px; background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(200, 98, 42, 0.16); padding: 10px 12px; border-radius: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(26, 20, 16, 0.03); } .fg textarea { background: rgba(255, 255, 255, 0.64); border: 1px solid rgba(200, 98, 42, 0.16); padding: 11px 12px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(26, 20, 16, 0.03); resize: vertical; min-height: 118px; } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: rgba(200, 98, 42, 0.42); background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 0 3px var(--gold-bg); } .fg select option { background: var(--parch); } .fg select option:checked { background: var(--gold); color: #fff; } .fg .hint { font-size: 10px; color: var(--char2); margin-top: 6px; font-family: var(--mono); line-height: 1.45; } .modal-body select[size] { width: 100%; border: 1px solid rgba(200, 98, 42, 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(200, 98, 42, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 0 3px var(--gold-bg) !important; } .modal-body select[size] option { padding: 8px 10px; border-radius: 9px; margin: 2px 0; } .modal-body select[size] option:checked { background: rgba(200, 98, 42, 0.16) linear-gradient(0deg, rgba(200, 98, 42, 0.16), rgba(200, 98, 42, 0.16)); color: var(--char); } .star-row { display: flex; gap: 5px; } .star-row span { font-size: 26px; cursor: pointer; color: var(--parch3); transition: color 0.1s; line-height: 1; } .star-row span.on { color: var(--gold); } .star-row span:hover { color: var(--gold-lt); } .qty-row { display: flex; gap: 8px; } .qty-row input { flex: 1; } .qty-row select { width: 112px; flex-shrink: 0; } /* TOAST */ #toast-c { position: fixed; bottom: 22px; right: 22px; z-index: 9999; display: flex; flex-direction: column; gap: 7px; } .tk { background: var(--parch); border: 1.5px solid var(--parch3); border-left: 3px solid var(--gold); padding: 11px 15px; min-width: 230px; font-size: 12px; color: var(--char2); border-radius: var(--r); animation: toast-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; box-shadow: 0 6px 24px rgba(26, 20, 16, 0.15); font-family: var(--mono); overflow: hidden; max-height: 80px; transition: max-height 0.2s ease, margin-bottom 0.2s ease, opacity 0.2s ease; } .tk.ok { border-left-color: var(--green); } .tk.er { border-left-color: var(--red); } .tk.removing { animation: toast-out 0.22s ease forwards; max-height: 0 !important; margin-bottom: -7px !important; padding-top: 0; padding-bottom: 0; } @keyframes toast-in { from { transform: translateX(18px) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(20px); opacity: 0; } } /* ── Stagger list items ── */ .stagger-item { animation: stagger-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes stagger-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* btn micro-interactions → consolidado en WAGON DS v7.0 ↑ */ /* ─── PEDIDO DE MERCADERÍA ─── */ .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-item { display: flex; flex-direction: column; gap: 3px; } .pedido-info-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--char3); font-weight: 500; } .pedido-info-val { font-family: var(--mono); font-size: 13px; color: var(--char); font-weight: 500; } .pedido-whatsapp-box { background: rgba(45, 122, 79, 0.06); border: 1.5px solid rgba(45, 122, 79, 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(--parch); border: 1.5px solid rgba(45, 122, 79, 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(45, 122, 79, 0.5); } .pedido-wa-sub { font-size: 10px; color: var(--char2); margin-top: 3px; } .pedido-table-wrap { border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; background: var(--card-bg); margin-bottom: 20px; } .pedido-table-wrap th { background: var(--parch2); } .pedido-qty-input { width: 80px; background: var(--parch2); border: 1.5px solid var(--parch3); color: var(--char); padding: 6px 8px; font-family: var(--mono); font-size: 12px; outline: none; border-radius: var(--r); text-align: right; } .pedido-qty-input:focus { border-color: var(--gold); } .pedido-notice { background: rgba(200, 98, 42, 0.08); border: 1.5px solid rgba(200, 98, 42, 0.28); border-radius: var(--r2); padding: 12px 16px; font-size: 12px; color: var(--char2); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .pedido-notice svg { flex-shrink: 0; } /* ─── NOTIFICACIÓN CHAT ─── */ .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(181, 58, 42, 0.6); } @keyframes badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(181, 58, 42, 0.7); } 60% { box-shadow: 0 0 0 7px rgba(181, 58, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(181, 58, 42, 0); } } .ni#nav-chat.has-notif { background: rgba(181, 58, 42, 0.1); box-shadow: inset 0 0 0 1.5px rgba(181, 58, 42, 0.5) !important; color: var(--text-on-dark) !important; animation: nav-shake 0.4s ease 0.2s; } @keyframes nav-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* Toast de nueva notificación */ @keyframes chat-toast-in { from { transform: translateX(20px) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } /* Toggle sonido en topbar del chat */ .sound-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--parch); border: 1.5px solid var(--parch3); border-radius: 20px; cursor: pointer; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--char3); font-family: var(--sans); transition: all 0.15s; user-select: none; } .sound-toggle:hover { border-color: var(--gold-ln); color: var(--char); } .sound-toggle.active { border-color: var(--gold-ln); color: var(--gold); background: var(--gold-bg); } .sound-toggle svg { width: 13px; height: 13px; } /* ─── TRANSFERENCIA ENTRE LOCALES ─── */ /* ─── TABLA DE ANUNCIOS ─── */ .anuncio-card { border: var(--card-border); border-radius: var(--card-radius); padding: 0; margin-bottom: 12px; background: var(--card-bg); overflow: hidden; box-shadow: 0 1px 4px rgba(44, 36, 24, 0.05); transition: box-shadow 0.15s; } .anuncio-card:hover { box-shadow: 0 3px 14px rgba(44, 36, 24, 0.09); } .anuncio-head { padding: 12px 16px; background: var(--parch2); border-bottom: 1.5px solid var(--parch3); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .anuncio-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .anuncio-prioridad { font-size: 16px; line-height: 1; } .anuncio-titulo { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--char); } .anuncio-body { padding: 14px 16px; } .anuncio-texto { font-size: 13px; color: var(--char2); line-height: 1.7; } .anuncio-meta { font-size: 10px; color: var(--char2); font-family: var(--mono); margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; } .anuncio-card.pinned { border-left: 3px solid var(--gold); } .anuncio-card.urgente { border-left: 3px solid var(--red); } .anuncios-empty { text-align: center; padding: 60px; color: var(--char3); font-size: 13px; } .pin-toggle { font-size: 14px; cursor: pointer; opacity: 0.5; transition: opacity 0.15s; } .pin-toggle:hover, .pin-toggle.on { opacity: 1; filter: drop-shadow(0 1px 3px rgba(200, 98, 42, 0.4)); } .kpi-sub { font-size: 10px; color: var(--char2); margin-top: 3px; font-family: var(--mono); } /* ─── BANNER ANUNCIOS URGENTES ─── */ /* ─── BANNER URGENTE ─── */ #urgente-banner { position: fixed; top: 0; left: var(--sidebar); right: 0; z-index: 1000; display: none; flex-direction: column; overflow: hidden; pointer-events: none; box-shadow: 0 4px 24px rgba(158, 26, 10, 0.35); } .urgente-item { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, #5a0a04 0%, #8a1a08 30%, #b02010 100%); color: #fff; padding: 0 20px; height: 0; overflow: hidden; pointer-events: all; border-bottom: 2px solid rgba(255,80,50,.4); transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; opacity: 0; position: relative; } .urgente-item.visible { height: 58px; opacity: 1; animation: urgente-shake-in .4s cubic-bezier(.36,.07,.19,.97) both; } .urgente-item.closing { height: 0 !important; opacity: 0; } @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); } } /* Shimmer animado */ .urgente-item::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.06), transparent ); animation: urgente-shimmer 3s ease infinite; pointer-events: none; } @keyframes urgente-shimmer { 0% { left: -60%; } 100% { left: 160%; } } @keyframes urgente-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .urgente-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff4422; flex-shrink: 0; animation: urgente-pulse .7s ease infinite; box-shadow: 0 0 0 0 rgba(255,68,34,.8); } @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); } } .urgente-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0.7; flex-shrink: 0; font-family: var(--mono); } .urgente-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; } .urgente-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .urgente-titulo { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--serif); text-shadow: 0 1px 4px rgba(0,0,0,.3); } .urgente-texto { font-size: 11px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .urgente-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .urgente-btn-done { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); padding: 5px 14px; border-radius: 20px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .urgente-btn-done:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.5); transform: scale(1.02); } .urgente-btn-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: rgba(255, 255, 255, 0.7); font-size: 14px; cursor: pointer; line-height: 1; transition: all 0.2s; flex-shrink: 0; } .urgente-btn-close:hover { background: rgba(255, 255, 255, 0.25); color: #fff; transform: scale(1.1); } /* ─── URGENTE PENDIENTE EN SIDEBAR ─── */ @keyframes pending-appear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .pending-row { display: flex; align-items: center; gap: 8px; } .pending-dot-sb { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; animation: urgente-pulse 1.4s ease infinite; box-shadow: 0 0 5px rgba(200, 98, 42, 0.5); } .pending-text { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); flex: 1; } .pending-count { font-family: var(--mono); font-size: 10px; background: var(--gold); color: var(--leather); padding: 1px 6px; border-radius: 10px; font-weight: 700; } .pending-sub { font-size: 9px; color: rgba(245, 239, 230, 0.35); margin-top: 3px; font-family: var(--mono); } /* ─── VENCIMIENTOS ─── */ .venc-shell { display: flex; flex-direction: column; gap: 18px; } .venc-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 26px 22px; background: radial-gradient(circle at top right, rgba(224, 122, 69, 0.18), transparent 28%), linear-gradient(145deg, var(--char) 0%, #241b15 42%, #32261d 100%); color: var(--text-on-dark); box-shadow: 0 18px 38px rgba(26, 20, 16, 0.18); } .venc-hero::after { content: ""; position: absolute; inset: auto -10% -55% 22%; height: 180px; background: radial-gradient(circle, rgba(245, 239, 230, 0.1), transparent 60%); pointer-events: none; } .venc-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; position: relative; z-index: 1; } .venc-kicker { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(245, 239, 230, 0.68); margin-bottom: 7px; } .venc-hero-title { font-family: var(--serif); font-size: 29px; line-height: 1.02; font-weight: 500; margin-bottom: 8px; } .venc-hero-sub { max-width: 620px; color: rgba(245, 239, 230, 0.76); font-size: 13px; } .venc-focus { min-width: 210px; background: rgba(245, 239, 230, 0.08); border: 1px solid rgba(245, 239, 230, 0.12); border-radius: 18px; padding: 14px 16px; } .venc-focus-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(245, 239, 230, 0.56); margin-bottom: 8px; } .venc-focus-value { font-family: var(--serif); font-size: 28px; line-height: 1; margin-bottom: 6px; } .venc-focus-note { font-size: 11px; color: rgba(245, 239, 230, 0.74); } .venc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; z-index: 1; } .venc-stat { background: rgba(245, 239, 230, 0.06); border: 1px solid rgba(245, 239, 230, 0.1); border-radius: 18px; padding: 14px 16px; } .venc-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(245, 239, 230, 0.58); margin-bottom: 8px; } .venc-stat-num { font-family: var(--serif); font-size: 28px; line-height: 1; margin-bottom: 5px; } .venc-stat-sub { font-size: 11px; color: rgba(245, 239, 230, 0.72); } /* ── Filter bar compacta ── */ .venc-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--card-bg); border: var(--card-border-thin); border-radius: var(--r2); } .venc-filter-group { display: flex; gap: 6px; flex-wrap: wrap; } .venc-filter-sep { width: 1px; height: 18px; background: var(--parch3); flex-shrink: 0; } .venc-filter-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 130px; color: var(--char3); } .venc-search-input { flex: 1; background: transparent; border: none; outline: none; font-size: 12px; font-family: var(--sans); color: var(--char); } .venc-search-input::placeholder { color: var(--char3); } .venc-chip { appearance: none; border: 1px solid var(--parch3); background: transparent; color: var(--char2); border-radius: 999px; padding: 5px 12px; font-family: var(--sans); font-size: 11.5px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .venc-chip:hover { border-color: var(--gold-ln); color: var(--char); } .venc-chip.active { background: var(--char); border-color: var(--char); color: #efe7d8; box-shadow: 0 4px 12px rgba(26, 20, 16, 0.12); } /* ── Lista de vencimientos ── */ .venc-board { display: flex; flex-direction: column; gap: 12px; } .venc-group { background: var(--card-bg); border: var(--card-border-thin); border-radius: var(--r2); overflow: hidden; } .venc-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: rgba(26,20,16,.025); border-bottom: 1px solid var(--parch3); } .venc-group-title-wrap { display: flex; align-items: center; gap: 8px; } .venc-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .venc-group-title { font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--char2); } .venc-group-count { font-family: var(--mono); font-size: 10.5px; color: var(--char3); background: rgba(26,20,16,.06); padding: 2px 9px; border-radius: 999px; } /* Filas de lista */ .venc-list { display: flex; flex-direction: column; } .venc-row { display: grid; grid-template-columns: 52px 1fr 140px 110px 56px; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--parch3); transition: background .12s; } .venc-row:last-child { border-bottom: none; } .venc-row:hover { background: rgba(26,20,16,.02); } /* Indicador de días */ .venc-dias { width: 50px; min-height: 48px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mono); padding: 5px 4px; } .venc-dias.critico { background: rgba(181,58,42,.1); color: var(--red); } .venc-dias.proximo { background: rgba(160,98,10,.1); color: var(--amber); } .venc-dias.ok { background: rgba(45,122,79,.1); color: var(--green); } .venc-dias-num { font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: -.02em; } .venc-dias-lbl { font-size: 8px; letter-spacing: .10em; text-transform: uppercase; margin-top: 3px; opacity: .7; } /* Cuerpo del producto */ .venc-row-body { min-width: 0; } .venc-row-nombre { font-size: 13px; font-weight: 600; color: var(--char); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .venc-row-lote { font-size: 10px; color: var(--char3); font-family: var(--mono); margin-top: 2px; } .venc-row-note { font-size: 10.5px; color: var(--char2); border-left: 2px solid var(--gold-ln); padding-left: 7px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Estado + fecha */ .venc-row-status { display: flex; flex-direction: column; gap: 3px; } .venc-row-badge { font-size: 11px; font-weight: 600; font-family: var(--mono); } .venc-row-badge.critico { color: var(--red); } .venc-row-badge.proximo { color: var(--amber); } .venc-row-badge.ok { color: var(--green); } .venc-row-fecha { font-size: 10.5px; color: var(--char3); font-family: var(--mono); } /* Meta (sucursal + cantidad) */ .venc-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .venc-row-qty { font-size: 11px; color: var(--char2); font-family: var(--mono); } /* Acciones */ .venc-row-actions { display: flex; gap: 4px; flex-shrink: 0; justify-content: flex-end; } /* ── Asistente de vencimientos ── */ #venc-asistente:empty { display: none; } .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(45,122,79,.06); border-color: rgba(45,122,79,.18); } .va-card.atencion{ background: rgba(200,98,42,.07); border-color: rgba(200,98,42,.22); } .va-card.critico { background: rgba(181,58,42,.07); border-color: rgba(181,58,42,.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(45,122,79,.12); color: var(--green); } .va-icon.atencion { background: rgba(200,98,42,.12); color: var(--amber); } .va-icon.critico { background: rgba(181,58,42,.12); color: var(--red); } .va-body { display: flex; flex-direction: column; gap: 4px; } .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(--char2); font-family: var(--sans); line-height: 1.5; } .va-prods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .va-prod-pill { font-size: 10px; font-weight: 600; font-family: var(--mono); padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; } .va-prod-pill.critico { background: rgba(181,58,42,.1); border-color: rgba(181,58,42,.28); color: var(--red); } .va-prod-pill.atencion{ background: rgba(200,98,42,.1); border-color: rgba(200,98,42,.28); color: var(--amber); } .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(--char3); font-family: var(--mono); } .va-btn-ok { font-size: 11px; font-weight: 600; font-family: var(--sans); padding: 5px 14px; border-radius: 999px; border: 1.5px solid; cursor: pointer; transition: background .12s, color .12s; background: transparent; } .va-card.ok .va-btn-ok { border-color: rgba(45,122,79,.4); color: var(--green); } .va-card.atencion .va-btn-ok { border-color: rgba(200,98,42,.4); color: var(--amber); } .va-card.critico .va-btn-ok { border-color: rgba(181,58,42,.4); color: var(--red); } .va-card.ok .va-btn-ok:hover { background: rgba(45,122,79,.1); } .va-card.atencion .va-btn-ok:hover { background: rgba(200,98,42,.1); } .va-card.critico .va-btn-ok:hover { background: rgba(181,58,42,.1); } /* ── Soft-delete overlay (razón de descarte / consumir) ── */ .venc-descartar-overlay { position: fixed; inset: 0; background: rgba(26,20,16,.48); display: flex; align-items: center; justify-content: center; z-index: 9300; animation: fadeIn .15s ease; } .venc-descartar-box { background: var(--parch); border-radius: 16px; padding: 24px 20px; width: 320px; max-width: 92vw; box-shadow: 0 8px 32px rgba(26,20,16,.22); display: flex; flex-direction: column; gap: 12px; } .venc-descartar-title { font-size: 15px; font-weight: 700; color: var(--char); font-family: var(--sans); } .venc-descartar-prod { font-size: 12px; color: var(--char3); font-family: var(--mono); background: rgba(26,20,16,.04); border-radius: 8px; padding: 7px 10px; } .venc-descartar-opts { display: flex; flex-direction: column; gap: 6px; } .venc-descartar-btn { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1.5px solid transparent; background: rgba(26,20,16,.04); font-size: 13px; font-weight: 500; font-family: var(--sans); color: var(--char); cursor: pointer; transition: background .12s, border-color .12s; text-align: left; } .venc-descartar-btn.critico:hover { background: rgba(181,58,42,.08); border-color: rgba(181,58,42,.3); color: var(--red); } .venc-descartar-btn.ok:hover { background: rgba(45,122,79,.08); border-color: rgba(45,122,79,.3); color: var(--green); } .venc-descartar-btn.error:hover { background: rgba(26,20,16,.08); border-color: rgba(26,20,16,.2); color: var(--char2); } .venc-descartar-cancel { background: none; border: none; color: var(--char3); font-size: 12px; cursor: pointer; padding: 4px 0; font-family: var(--sans); align-self: center; text-decoration: underline; } .venc-descartar-cancel:hover { color: var(--char); } /* pill reutilizada en inspector de movimientos */ .venc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(26, 20, 16, 0.04); border: 1px solid rgba(26, 20, 16, 0.07); font-family: var(--mono); font-size: 10px; color: var(--char2); } .venc-empty-mini { font-size: 12px; color: var(--char3); } .venc-inline-note { font-size: 11px; color: var(--char2); } @media (max-width: 960px) { .venc-hero { padding: 20px 18px 18px; border-radius: 18px; } .venc-hero-top { display: block; } .venc-hero-title { font-size: 24px; } .venc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .venc-row { grid-template-columns: 48px 1fr 110px auto auto; gap: 10px; } .venc-filter-bar { gap: 8px; } } @media (max-width: 640px) { .venc-stats { grid-template-columns: repeat(2, 1fr); } .venc-row { grid-template-columns: 44px 1fr auto auto; } .venc-row-status { display: none; } .venc-filter-sep { display: none; } .venc-filter-bar { flex-direction: column; align-items: flex-start; } } /* ─── PRECIOS ─── */ .precio-card { background: var(--parch); border: 1.5px solid var(--parch3); border-radius: var(--r2); overflow: hidden; margin-bottom: 8px; box-shadow: var(--card-shadow); } .precio-head { display: flex; align-items: center; padding: 12px 16px; gap: 12px; border-bottom: 1px solid var(--parch3); background: var(--parch2); cursor: pointer; } .precio-nombre { flex: 1; font-size: 13px; font-weight: 500; color: var(--char); } .precio-actual { font-family: var(--mono); font-size: 16px; font-weight: 400; color: var(--gold); } .precio-hist { padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; } .precio-hist.open { max-height: 300px; padding: 12px 16px; } .precio-hist-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--parch3); font-size: 11px; } .precio-hist-row:last-child { border-bottom: none; } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ /* ── Hamburger button ── */ #menu-toggle { display: none; width: 38px; height: 38px; background: none; border: 1.5px solid var(--parch3); 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; } #menu-toggle:hover { border-color: var(--gold); background: var(--gold-bg); } #menu-toggle span { display: block; width: 16px; height: 1.5px; background: var(--char); border-radius: 2px; transition: all 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); } /* ── Sidebar overlay backdrop ── */ #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: 190; } /* ══════════════════════════ TABLET (≤ 960px) ══════════════════════════ */ @media (max-width: 960px) { #menu-toggle { display: flex; } #sidebar { position: fixed; left: -270px; top: 0; bottom: 0; z-index: 200; 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; } #urgente-banner { left: 0; } .topbar { padding: 0 14px; gap: 10px; } .topbar-title { font-size: 17px; } .topbar-right { gap: 8px; } .page { padding: 20px 18px; } /* Page header */ .ph { flex-wrap: wrap; gap: 10px; } /* Stats row: 2 columnas */ .stat-cell:nth-child(odd) { border-right: 1.5px solid var(--parch3); } .stat-cell:nth-child(n + 3) { border-top: 1.5px solid var(--parch3); } /* KPI row: 2 columnas */ .kpi-row { grid-template-columns: repeat(2, 1fr) !important; } .kpi-cell + .kpi-cell { border-left: none; } .kpi-cell:nth-child(odd) { border-right: 1.5px solid var(--parch3); } .kpi-cell:nth-child(n + 3) { border-top: 1.5px solid var(--parch3); } /* Charts: una columna */ .chart-grid { grid-template-columns: 1fr; } .chart-card.span2 { grid-column: span 1; } /* Dual stock */ .dual { grid-template-columns: 1fr; } /* Forms */ .form-row { grid-template-columns: 1fr; } /* Tables: scroll horizontal */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table { min-width: 560px; } /* 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; } /* Transfer */ /* Chat */ .chat-topbar { padding: 12px 16px; flex-wrap: wrap; gap: 8px; } .chat-body { padding: 16px; } .chat-footer { padding: 10px 16px; } .chat-msg { max-width: 80%; } /* Stats period buttons */ .ph > div:last-child { flex-wrap: wrap; } /* ── DASHBOARD RESPONSIVE ── */ /* Header */ .dash-header { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px; padding: 6px 0 18px; } .dash-time { font-size: 26px; grid-row: 1; grid-column: 1; } .dash-status-pill { grid-row: 1; grid-column: 2; align-items: flex-end; } .dash-greeting { grid-row: 2; grid-column: 1 / -1; } .dash-greeting-name { font-size: 13px; } .dash-greeting-summary { text-align: left; max-width: 100%; white-space: normal; } .dash-local-name { display: none; } /* KPIs: 2 columnas */ .dash-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .dash-kpi { padding: 14px 14px 12px; } .dash-kpi-ventas { grid-column: 1 / -1; } .dash-kpi-ventas .dash-kpi-value { font-size: 28px; } .dash-kpi-ventas .dash-kpi-kg { font-size: 11px; } /* Acciones rápidas: 2×2 */ .dash-qa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .dash-qa-btn { padding: 10px 10px; font-size: 11px; } /* Body grid: 1 columna */ .dash-body-grid { grid-template-columns: 1fr; gap: 12px; } /* Tools grid: 1 columna */ .dash-tools-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 0; margin-bottom: 12px; } /* Panel heads: comprimir */ .dash-panel-head { padding: 10px 14px 8px; flex-wrap: wrap; gap: 6px; } .dash-panel-title { font-size: 10px; } .dash-panel-sub { font-size: 9px; } /* Tabla stock crítico */ .dash-stock-table .st-bar-wrap { display: none; } .dash-stock-table .st-qty { font-size: 11px; } .dash-stock-table td { padding: 9px 14px; } /* Sesión / ventas del día */ .dash-sesion-item { font-size: 11px; padding: 8px 14px; } /* Notas y tareas */ .nota-input-area { padding: 8px 12px; } .tarea-input-row { flex-wrap: wrap; gap: 6px; padding: 8px 12px; } .tarea-input-row input { min-width: 0; flex: 1 1 100%; } .tarea-input-row select, .tarea-input-row .tarea-add-btn { flex: 1; } } /* Extra pequeño: < 480px */ @media (max-width: 480px) { .dash-kpi-grid { grid-template-columns: 1fr 1fr; } .dash-kpi { padding: 11px 12px 10px; } .dash-kpi-value { font-size: 20px; } .dash-kpi-label { font-size: 8px; letter-spacing: .12em; margin-bottom: 6px; } .dash-kpi-ventas .dash-kpi-value { font-size: 24px; } .dash-kpi-sub { font-size: 9px; } .dash-time { font-size: 22px; } .dash-greeting-name { font-size: 12px; } .dash-greeting-summary { font-size: 10px; } .dash-status-dot { font-size: 9px; padding: 3px 7px; } .dash-panel-action { font-size: 9px; padding: 3px 8px; } .dash-qa-btn { font-size: 10px; padding: 9px 8px; gap: 5px; } .dash-qa-btn .qa-icon { font-size: 13px; } .dash-kpi-trend { font-size: 9px; padding: 1px 5px; } .dash-kpi-medio { font-size: 9px; padding: 1px 5px; } .nota-input-area textarea { font-size: 11px; } .nota-add-btn { font-size: 10px; padding: 6px 10px; } .tarea-input-row input, .tarea-input-row select { font-size: 11px; } } /* ══════════════════════════ MOBILE (≤ 600px) ══════════════════════════ */ @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; } .topbar-title { font-size: 15px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { gap: 6px; } /* Ocultar pill demo y RT en móvil para ganar espacio */ .demo-pill { display: none; } .rt-pill span { display: none; } .rt-pill { padding: 4px 6px; } .page { padding: 14px 12px; } /* Page header full width */ .ph { flex-direction: column; align-items: flex-start; } .ph .btn-prime, .ph .btn-ghost { width: 100%; justify-content: center; } /* Stats: 2 columnas compactas */ /* KPI */ .kpi-row { grid-template-columns: repeat(2, 1fr) !important; } .kpi-num { font-size: 20px; } /* Tables */ .table-bar { flex-direction: column; align-items: stretch; } .table-bar input, .table-bar select { width: 100%; } .table-wrap table { min-width: 480px; } /* Modal: slide desde abajo */ #modal-overlay { position: fixed; inset: 0; background: radial-gradient(120% 120% at 50% 50%, rgba(200, 98, 42, 0.08) 0%, rgba(200, 98, 42, 0) 58%), linear-gradient(180deg, rgba(24, 18, 14, 0.56), rgba(24, 18, 14, 0.48)); z-index: 9000; 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: min(92dvh, 920px); max-height: min(92dvh, 92vh); border-radius: 24px 24px 0 0; animation: slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .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: visible; min-height: auto; flex: 0 0 auto; } .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; } .qty-row select { width: 100%; } /* Mov filters: scroll horizontal */ .mov-filters-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .mov-filters-row::-webkit-scrollbar { display: none; } .mov-filter { flex-shrink: 0; } /* Chat */ .chat-topbar { padding: 10px 12px; } .chat-topbar h2 { font-size: 16px; } .chat-topbar > div:last-child { flex-wrap: wrap; gap: 6px; } .chat-body { padding: 12px; } .chat-footer { padding: 8px 12px; } .chat-msg { max-width: 88%; } /* Ocultar tags de locales en chat topbar */ .chat-topbar .tag { display: none; } /* WA box dashboard */ /* 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; } .pedido-wa-input { width: 100%; } /* Transfer */ /* Urgente banner */ .urgente-titulo { font-size: 11.5px; } .urgente-label { display: none; } .urgente-sep { display: none; } /* Vencimientos */ .venc-card { flex-wrap: wrap; } /* Precios */ .precio-head { flex-wrap: wrap; gap: 6px; } /* Login mobile — manejado por breakpoints en la sección login */ /* Mov row más compacto */ .mov-row { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 12px; } .mov-delta { font-size: 14px; } /* Rev card */ .rev-head { flex-direction: column; gap: 8px; } .rev-head > div:last-child { align-self: flex-start; } /* ph-actions en mobile: full width */ .ph-actions { width: 100%; justify-content: flex-end; } } /* ─── VENTA RÁPIDA ─── */ .vr-modal-overlay { position: fixed; inset: 0; z-index: 9300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(245, 239, 230, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .vr-modal-shell { width: min(1120px, 96vw); height: min(90vh, 740px); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid rgba(214, 199, 179, 0.8); background: #f7f1e7; box-shadow: 0 18px 56px rgba(26, 20, 16, 0.34); } .vr-modal-head { padding: 16px 22px; border-bottom: 1px solid rgba(214, 199, 179, 0.86); background: #f3ecdf; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .vr-modal-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--char); letter-spacing: -0.01em; line-height: 1.1; } .vr-modal-sub { font-size: 11px; color: var(--char3); margin-top: 5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .vr-modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(214, 199, 179, 0.86); background: #f7f1e7; color: var(--char2); font-size: 18px; cursor: pointer; } .vr-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; } .vr-left { flex: 0 0 min(46%, 500px); min-width: 320px; display: flex; flex-direction: column; border-right: 1px solid rgba(214, 199, 179, 0.86); background: #f6efe3; } .vr-right { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #f7f1e7; } .vr-search-block { padding: 12px 16px; border-bottom: 1px solid rgba(214, 199, 179, 0.86); } .vr-search-input { width: 100%; box-sizing: border-box; background: #fbf7f0; border: 1px solid rgba(214, 199, 179, 0.9); border-radius: 12px; color: var(--char); padding: 10px 12px; font-size: 13px; font-family: var(--sans); outline: none; } .vr-search-input:focus { border-color: rgba(200, 98, 42, 0.52); } .vr-scan-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .vr-scan-indicator { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(214, 199, 179, 0.88); background: #fbf7f0; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .vr-scan-hint { font-size: 10px; color: var(--char3); font-family: var(--mono); letter-spacing: 0.03em; } .vr-products-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; } .vr-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 2px; margin-bottom: 0; } .vr-prod-card { background: var(--card-bg); border: var(--card-border-thin); border-radius: var(--card-radius); padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; user-select: none; } .vr-prod-card:hover { border-color: rgba(200, 98, 42, 0.45); background: rgba(200, 98, 42, 0.06); } .vr-prod-card.agotado { opacity: 0.4; pointer-events: none; } .vr-prod-name { font-size: 14px; font-weight: 700; color: var(--char); margin-bottom: 4px; letter-spacing: -0.01em; } .vr-prod-precio { font-size: 13px; color: var(--gold); font-weight: 700; } .vr-prod-stock { font-size: 11px; color: var(--char2); margin-top: 2px; } .vr-cart-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 10px; } .vr-cart-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .vr-cart-title { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--char); } .vr-items-count { font-size: 12px; color: var(--gold); font-weight: 700; } .vr-carrito { border: 1px solid rgba(214, 199, 179, 0.86); border-radius: 14px; overflow: hidden; margin-bottom: 0; background: #fbf7f0; } .vr-carrito-empty { padding: 24px; text-align: center; font-size: 12px; color: var(--char3); } .vr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(214, 199, 179, 0.76); transition: background 0.12s; } .vr-item:last-child { border-bottom: none; } .vr-item:hover { background: rgba(200, 98, 42, 0.05); } .vr-item-name { font-size: 14px; font-weight: 700; color: var(--char); letter-spacing: -0.01em; } .vr-item-tag { font-size: 11px; color: var(--char2); margin-top: 3px; font-weight: 500; } .vr-qty-wrap { display: flex; align-items: center; gap: 6px; } .vr-qty-input { width: 70px; background: #fff; border: 1px solid rgba(214, 199, 179, 0.9); color: var(--char); padding: 5px 7px; font-size: 13px; font-weight: 600; outline: none; border-radius: 10px; text-align: right; transition: border-color 0.15s; } .vr-qty-input:focus { border-color: rgba(200, 98, 42, 0.52); } .vr-qty-unit { font-size: 12px; color: var(--char2); font-weight: 500; } .vr-uds-input { width: 48px !important; } .vr-qty-sep { font-size: 11px; color: var(--parch3); font-weight: 400; user-select: none; } .vr-item-subtotal { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--char); white-space: nowrap; min-width: 76px; text-align: right; letter-spacing: -0.02em; } .vr-item-del { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--char3); cursor: pointer; font-size: 16px; border-radius: 999px; transition: color 0.15s, border-color 0.15s, background 0.15s; flex-shrink: 0; } .vr-item-del:hover { color: var(--red); border-color: rgba(181, 58, 42, 0.3); background: rgba(181, 58, 42, 0.08); } .vr-total-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #2a241d; border-top: 1px solid #3a3026; border-bottom: 1px solid #3a3026; } .vr-total-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 239, 226, 0.78); font-weight: 700; margin-bottom: 4px; } .vr-total-num { font-family: var(--mono); font-size: 36px; font-weight: 500; color: #fff; letter-spacing: -0.03em; line-height: 1; display: inline-block; } @keyframes vrPriceBump { 0% { transform: translateY(6px); opacity: 0.4; } 100% { transform: translateY(0); opacity: 1; } } .vr-price-bump { animation: vrPriceBump .22s cubic-bezier(.25,.46,.45,.94); } .vr-total-pts { font-family: var(--mono); font-size: 11px; color: #dcbf9a; margin-top: 6px; font-weight: 500; } .vr-panel { padding: 10px 16px; border-top: var(--card-border-thin); background: var(--card-bg-alt); flex-shrink: 0; } .vr-panel-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--char2); font-weight: 700; margin-bottom: 7px; } .vr-panel-sub { font-weight: 400; opacity: 0.65; } .vr-cli-select { width: 100%; background: #fbf7f0; border: 1px solid rgba(214, 199, 179, 0.9); color: var(--char); font-family: var(--sans); font-size: 12px; padding: 4px; outline: none; border-radius: 10px; } .vr-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .vr-saldo-line { margin-top: 7px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--char2); font-family: var(--mono); } .vr-saldo-line strong { color: var(--green); font-size: 12px; letter-spacing: -0.01em; } .vr-caja-toggle { margin-top: 7px; display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--char2); user-select: none; } .vr-caja-toggle input { accent-color: var(--green); } .vr-caja-help { font-size: 10px; color: var(--char3); font-family: var(--mono); } .vr-money-wrap { display: flex; align-items: center; gap: 4px; margin-left: 4px; } .vr-money-symbol { font-size: 11px; color: var(--char3); } .vr-money-input { width: 82px; background: #fbf7f0; border: 1px solid rgba(214, 199, 179, 0.9); color: var(--char); padding: 4px 8px; font-family: var(--mono); font-size: 12px; outline: none; border-radius: 10px; text-align: right; } .vr-money-input:focus { border-color: rgba(200, 98, 42, 0.52); } .vr-actions { padding: 12px 16px; border-top: 1px solid rgba(214, 199, 179, 0.86); display: flex; gap: 8px; flex-shrink: 0; background: #f3ecdf; } .vr-actions .btn-prime { background: #2a241d; border: 1px solid #2a241d; box-shadow: none; } .vr-actions .btn-prime:hover { filter: none; background: #1f1a14; border-color: #1f1a14; } .vr-actions .btn-ghost { background: #fbf7f0; border-color: rgba(214, 199, 179, 0.9); box-shadow: none; } @media (max-width: 980px) { .vr-modal-overlay { padding: 8px; } .vr-modal-shell { width: 100%; height: min(94vh, 860px); } .vr-layout { flex-direction: column; } .vr-left { flex: 0 0 auto; width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid rgba(214, 199, 179, 0.86); } .vr-products-wrap { max-height: 240px; } } @media (max-width: 640px) { .vr-modal-overlay { padding: 0; align-items: stretch; } .vr-modal-shell { width: 100vw; height: 100vh; border-radius: 0; border: none; } .vr-modal-head { padding: 12px 14px; } .vr-modal-title { font-size: 19px; } .vr-layout { min-height: 0; } .vr-search-block, .vr-products-wrap, .vr-cart-wrap, .vr-panel, .vr-actions { padding-left: 12px; padding-right: 12px; } .vr-products-wrap { max-height: 200px; padding-top: 10px; padding-bottom: 10px; } .vr-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .vr-prod-card { padding: 10px 11px; } .vr-prod-name { font-size: 13px; } .vr-total-row { padding: 12px; } .vr-total-num { font-size: 30px; } .vr-item { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; } .vr-qty-wrap { grid-column: 1; } .vr-item-subtotal, .vr-item-del { grid-row: 1; } .vr-item-subtotal { grid-column: 2; font-size: 14px; min-width: 58px; } .vr-item-del { grid-column: 2; margin-top: 22px; justify-self: end; } } /* Botón flotante venta rápida en dashboard */ #btn-venta-rapida-float { position: fixed; bottom: 24px; right: 24px; z-index: 500; width: 56px; height: 56px; background: linear-gradient(135deg, var(--gold), #e8924a); border: none; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(200, 98, 42, 0.45); transition: all 0.2s; color: #fff; } #btn-venta-rapida-float:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(200, 98, 42, 0.55); } #btn-venta-rapida-float svg { width: 24px; height: 24px; } /* ── UPDATE BANNER ── */ .update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; 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); } @keyframes updateSlideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .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(45, 122, 79, 0.25); display: flex; align-items: center; justify-content: center; color: #5be88e; } .update-text { flex: 1; min-width: 0; } .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-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .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(--gold), #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); } @keyframes updatePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 98, 42, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(200, 98, 42, 0); } } .update-btn-close { background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 16px; 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; } /* Si hay update banner, empujar la topbar y el sidebar */ .update-banner ~ #app .topbar, .update-banner ~ #app #sidebar { transition: top 0.35s ease; } /* ─── SALUDO DASHBOARD ─── */ .dash-saludo-resumen { min-height: 44px; } /* Barra inferior persistente — activa mientras haya urgentes */ #urgente-flash { position: fixed; bottom: 0; left: var(--sidebar); right: 0; height: 0; z-index: 9790; pointer-events: none; background: linear-gradient(90deg, #8a0a04, #cc1a0a, #8a0a04); background-size: 200% 100%; opacity: 0; transition: height .35s ease, opacity .35s ease; } /* En mobile el sidebar está oculto — barra va de borde a borde */ @media (max-width: 960px) { #urgente-flash { left: 0; } } #urgente-flash.visible { height: 4px; opacity: 1; animation: urgente-bar-pulse 2s ease infinite, urgente-bar-slide 3s linear infinite; } @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%; } } /* ─── CHANGELOG / NOVEDADES ─── */ #changelog-overlay { position: fixed; inset: 0; background: rgba(10,8,7,.64); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 9600; display: none; align-items: center; justify-content: center; padding: 20px; } #changelog-overlay.open { display: flex; } #changelog-modal { background: var(--parch); border: 1.5px solid var(--parch3); 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; } .changelog-head { padding: 22px 24px 18px; border-bottom: 1.5px solid var(--parch3); background: linear-gradient(135deg, var(--leather) 0%, var(--leather2) 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(200,98,42,.2) 0%, transparent 65%); } .changelog-version { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); 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(--parch3); } .changelog-item:last-child { border-bottom: none; } .changelog-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .changelog-item-text { font-size: 13px; color: var(--char2); 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(--parch3); display: flex; justify-content: flex-end; gap: 8px; background: var(--parch2); } /* ─── STOCK EXPANDIBLE ─── */ .stock-lote-count-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; font-family: var(--mono); color: var(--gold); background: rgba(200,98,42,.1); border: 1px solid rgba(200,98,42,.28); flex-shrink: 0; cursor: default; user-select: none; } .stock-expand-btn { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--parch2); border: 1.5px solid var(--parch3); border-radius: 999px; cursor: pointer; color: var(--char3); 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(--gold-ln); color: var(--gold); } .stock-expand-btn.open { transform: rotate(90deg); color: var(--gold); border-color: var(--gold-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(200,98,42,.10); border: 1px solid rgba(200,98,42,.30); border-radius: 999px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; } .stock-lotes-row { display: none; } .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(--parch3); } .lote-sub-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(217, 204, 186, 0.74); font-size: 10px; } .lote-sub-row:last-child { border-bottom: none; } .lote-sub-icon { color: var(--char2); font-size: 10px; width: 12px; } .lote-sub-fecha { font-family: var(--mono); font-size: 9px; padding: 2px 8px; border-radius: 999px; border: 1px solid; } .lote-sub-dias { font-size: 9px; color: var(--char2); } .lote-sub-fifo { font-size: 8px; font-weight: 600; letter-spacing: .08em; color: var(--gold); font-family: var(--mono); background: rgba(200,98,42,.12); border: 1px solid rgba(200,98,42,.3); border-radius: 999px; padding: 2px 6px; } .lote-sub-qty { font-size: 10px; font-weight: 600; font-family: var(--mono); padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .lote-sub-qty-unknown { color: var(--char3); border-color: var(--parch3); } .lote-sub-recon { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; font-family: var(--mono); padding: 6px 12px; margin-top: 2px; border-top: 1px solid; opacity: 0.8; } /* ─── CAMADAS ─── */ .camada-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; } .camada-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--parch2); border-bottom: 1.5px solid var(--parch3); } .camada-prod-name { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--char); flex: 1; } .camada-prod-meta { font-size: 10px; color: var(--char2); font-family: var(--mono); display: flex; gap: 10px; align-items: center; } .camada-lotes { padding: 4px 0; } .camada-lote-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--parch3); transition: background .1s; } .camada-lote-row:last-child { border-bottom: none; } .camada-lote-row:hover { background: var(--parch2); } .camada-fifo-badge { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--gold); background: rgba(200,98,42,.12); border: 1px solid rgba(200,98,42,.3); border-radius: 6px; padding: 2px 6px; flex-shrink: 0; font-family: var(--mono); } .camada-fecha { font-family: var(--mono); font-size: 12px; font-weight: 500; min-width: 80px; } .camada-dias-badge { font-size: 10px; font-weight: 600; font-family: var(--mono); padding: 2px 9px; border-radius: 10px; border: 1px solid; } .camada-lote-ref { font-size: 10px; color: var(--char2); font-family: var(--mono); flex: 1; } .camada-semaforo { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Toast de nueva notificación */ /* ── CHAT TOAST — notificación mensaje entrante ── */ @keyframes ct-in { 0% { transform: translateX(110%); opacity: 0; } 60% { transform: translateX(-6px); opacity: 1; } 80% { transform: translateX(3px); } 100% { transform: translateX(0); } } @keyframes ct-pulse-btn { 0%, 100% { box-shadow: 0 4px 16px rgba(200,98,42,.4); } 50% { box-shadow: 0 4px 28px rgba(200,98,42,.9), 0 0 0 8px rgba(200,98,42,.18); } } .chat-toast { position: fixed; bottom: 88px; right: 24px; z-index: 8900; width: 316px; background: var(--parch); border-radius: var(--r2); box-shadow: 0 8px 32px rgba(26,20,16,.18), 0 2px 8px rgba(26,20,16,.08), 0 0 0 1.5px var(--parch3); animation: ct-in 0.4s cubic-bezier(.34,1.56,.64,1) forwards; cursor: pointer; border-left: 4px solid var(--gold); overflow: hidden; } .chat-toast:hover { box-shadow: 0 10px 36px rgba(26,20,16,.22), 0 0 0 1.5px var(--gold-ln); } .chat-toast-bar { display: none; /* reemplazada por border-left */ } .chat-toast-inner { padding: 14px 14px 12px 12px; display: flex; gap: 10px; align-items: flex-start; } .chat-toast-icon { width: 36px; height: 36px; background: var(--gold-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; margin-top: 1px; border: 1.5px solid var(--gold-ln); } .chat-toast-body { flex: 1; min-width: 0; } .chat-toast-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } .chat-toast-from { font-size: 11px; letter-spacing: 0.04em; color: var(--gold); font-weight: 600; font-family: var(--sans); } .chat-toast-time { font-size: 10px; color: var(--char3); font-family: var(--mono); } .chat-toast-autor { font-size: 11px; color: var(--char2); font-family: var(--sans); font-weight: 400; margin-bottom: 5px; } .chat-toast-msg { font-size: 13px; color: var(--char); font-family: var(--sans); font-weight: 400; line-height: 1.5; word-break: break-word; } .chat-toast-footer { padding: 8px 14px 8px 12px; border-top: 1px solid var(--parch3); background: var(--parch2); display: flex; align-items: center; justify-content: space-between; } .chat-toast-cta { font-size: 11px; font-weight: 600; color: var(--gold); font-family: var(--sans); } .chat-toast-close { font-size: 18px; color: var(--char3); cursor: pointer; line-height: 1; padding: 2px 4px; transition: color .15s; font-family: var(--sans); } .chat-toast-close:hover { color: var(--char); } /* ── PANEL ALERTAS VENCIMIENTO ── */ #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: 9500; display: none; align-items: center; justify-content: center; padding: 22px; } #alerta-venc-overlay.open { display: flex; } #alerta-venc-panel { background: var(--parch); 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; } @keyframes av-panel-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .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(200, 98, 42, 0.12); border: 1px solid rgba(200, 98, 42, 0.26); flex-shrink: 0; } .av-title { font-size: 16px; font-weight: 600; font-family: var(--serif); color: var(--char); line-height: 1.1; } .av-sub { font-size: 11px; color: var(--char2); margin-top: 4px; } .av-kpis { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .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(--char2); background: rgba(255, 255, 255, 0.62); } .av-kpi.crit { border-color: rgba(181, 58, 42, 0.34); color: #8a1a0f; background: rgba(181, 58, 42, 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-item:last-child { border-bottom: none; } .av-semaforo { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .av-main { min-width: 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(--char2); } .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; } @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; } } /* ── HISTORIAL DE SESIÓN en Dashboard ── */ .dash-sesion-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--parch3); font-size: 12px; } .dash-sesion-item:last-child { border-bottom: none; } .dash-sesion-icon { font-size: 14px; text-align: center; padding-top: 1px; } .dash-sesion-prod { font-weight: 500; color: var(--char); } .dash-sesion-meta { font-size: 10px; color: var(--char3); margin-top: 1px; } .dash-sesion-qty { font-family: var(--mono); font-size: 11px; white-space: nowrap; } .dash-sesion-pos { color: var(--green); } .dash-sesion-neg { color: var(--red); } /* ── TOOLTIPS DEL SIDEBAR ── */ .ni[data-tip] { position: relative; } /* Burbuja principal */ .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: 99999; box-shadow: 0 6px 24px rgba(20,12,8,.22); } /* Flechita lateral hacia el sidebar */ .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: 99999; } .ni[data-tip]:hover::after, .ni[data-tip]:hover::before { opacity: 1; transform: translateX(0); transition-delay: 0.4s; } /* ── TICKET MODAL ── */ .ticket-card { background: #fdfaf5; border: 1px dashed #c8b89a; border-radius: 4px; font-family: var(--mono); font-size: 11px; overflow: hidden; box-shadow: 0 8px 40px rgba(20,12,8,.22); } .ticket-card::before, .ticket-card::after { content: ""; display: block; height: 8px; background: repeating-linear-gradient(90deg, transparent 0, transparent 10px, #c8b89a 10px, #c8b89a 12px); opacity: .5; } .ticket-head { text-align: center; padding: 18px 22px 14px; border-bottom: 1px dashed #c8b89a; } .ticket-brand { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--char); letter-spacing: .05em; } .ticket-local { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--char3); margin-top: 5px; } .ticket-num { font-size: 9px; color: var(--char2); margin-top: 10px; } .ticket-body { padding: 18px 22px 16px; } .ticket-items { border-bottom: 1px dashed #c8b89a; padding-bottom: 14px; margin-bottom: 14px; } .ticket-item { display:flex; justify-content:space-between; gap:10px; padding:8px 0; line-height:1.4; border-bottom:1px solid rgba(200,184,154,.25); } .ticket-item:last-child { border-bottom:none; } .ticket-item-name { flex:1; color:var(--char); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; } .ticket-item-qty { color:var(--char3); white-space:nowrap; font-size:10px; align-self:center; } .ticket-item-price { white-space:nowrap; color:var(--char); font-weight:700; font-size:12px; } .ticket-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 700; color: var(--char); padding: 12px 0 6px; border-top: 1.5px solid #c8b89a; margin-top: 2px; } .ticket-total span:first-child { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--char3); font-weight:500; align-self:center; } .ticket-meta { display: flex; flex-direction: column; gap: 6px; font-size: 10px; padding: 12px 0 4px; border-top: 1px dashed #c8b89a; margin-top: 10px; } .ticket-meta-row { display:flex; justify-content:space-between; align-items:center; } .ticket-meta-label { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--char3); } .ticket-meta-value { color:var(--char); font-weight:500; text-align:right; } .ticket-pts { display: inline-block; background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-ln); padding: 1px 7px; border-radius: 10px; font-size: 9px; font-weight: 600; margin-top: 3px; } /* ══════════════════════════════════════ DASHBOARD v4 — Warm Precision SaaS ══════════════════════════════════════ */ /* ── Header / Saludo ── */ .dash-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 8px 0 26px; margin-bottom: 0; border-bottom: 1px solid var(--parch3); } .dash-time { font-family: var(--serif); font-size: 46px; font-weight: 300; font-style: italic; color: var(--char); letter-spacing: -.03em; line-height: 1; flex-shrink: 0; } .dash-time-sep { opacity: .28; font-style: normal; animation: blink-sep 1s step-end infinite; } @keyframes blink-sep { 0%,100%{opacity:.28} 50%{opacity:.06} } .dash-greeting { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .dash-greeting-name { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--char); line-height: 1.15; letter-spacing: -.01em; } .dash-greeting-name strong { font-weight: 600; } .dash-greeting-summary { font-size: 11px; color: var(--char2); line-height: 1.5; font-family: var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-greeting-summary b { color: var(--char); font-weight: 500; } .dash-greeting-summary a { color: var(--gold); cursor: pointer; } .dash-status-pill { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .dash-status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-family: var(--mono); letter-spacing: .06em; padding: 5px 12px; border-radius: 20px; font-weight: 500; } .dash-status-dot.open { background: rgba(45,122,79,.10); color: var(--green); border: 1px solid rgba(45,122,79,.25); } .dash-status-dot.closed { background: rgba(181,58,42,.09); color: var(--red); border: 1px solid rgba(181,58,42,.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(42,90,140,.09); color: var(--blue); border: 1px solid rgba(42,90,140,.22); } .dash-status-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .dash-status-dot.open::before { animation: pulse-green 2s ease-in-out infinite; } @keyframes pulse-green { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(1.5); } } .dash-local-name { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--char3); font-family: var(--mono); } /* ── KPI Grid ── */ .dash-kpi-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; } /* ── KPI base ── */ .dash-kpi { background: var(--card-bg); border: var(--card-border-thin); border-radius: var(--card-radius); padding: 22px 20px 20px 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: box-shadow .22s ease, transform .18s ease, border-color .2s ease; box-shadow: var(--card-shadow); } .dash-kpi::before { /* fondo decorativo sutil */ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0) 60%, rgba(217,204,186,.12) 100%); pointer-events: none; } .dash-kpi.clickable { cursor: pointer; } .dash-kpi.clickable:hover { box-shadow: 0 8px 32px rgba(26,20,16,.1), 0 2px 8px rgba(26,20,16,.05); transform: translateY(-2px); border-color: rgba(200,98,42,.28); } /* Accent: franja top con gradiente */ .dash-kpi-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; transition: opacity .2s; } /* Ícono decorativo grande en la esquina */ .dash-kpi-deco { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 52px; opacity: .045; line-height: 1; pointer-events: none; user-select: none; } .dash-kpi-label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--char3); font-weight: 600; margin-bottom: 12px; margin-top: 2px; font-family: var(--sans); } .dash-kpi-value { font-family: var(--serif); font-size: 38px; font-weight: 300; font-style: italic; color: var(--char); line-height: 1; letter-spacing: -.02em; transition: color .2s; } .dash-kpi-value.large { font-size: 38px; } .dash-kpi-sub { font-size: 10px; color: var(--char3); margin-top: 8px; line-height: 1.45; font-weight: 400; } /* ── KPI Ventas — hero card oscura ── */ .dash-kpi-ventas { background: var(--grad-dark); border-color: transparent; box-shadow: var(--shadow-deep); } .dash-kpi-ventas::before { background: radial-gradient(ellipse 80% 60% at 110% 0%, rgba(200,98,42,.22) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at -5% 105%, rgba(200,98,42,.15) 0%, transparent 55%); } .dash-kpi-ventas:hover { box-shadow: 0 12px 40px rgba(26,20,16,.30), 0 4px 16px rgba(26,20,16,.18); border-color: transparent; } .dash-kpi-ventas .dash-kpi-accent { background: var(--grad-ember); height: 2px; opacity: .85; } .dash-kpi-ventas .dash-kpi-label { color: rgba(246,239,226,.42); } .dash-kpi-ventas .dash-kpi-value { font-size: 52px; font-weight: 300; color: var(--text-on-dark); letter-spacing: -.03em; } .dash-kpi-ventas .dash-kpi-kg { font-family: var(--mono); font-size: 11px; color: rgba(246,239,226,.45); margin-top: 5px; letter-spacing: .03em; } .dash-kpi-ventas .dash-kpi-sub { color: rgba(246,239,226,.45); } .dash-kpi-ventas .dash-kpi-deco { opacity: .06; filter: brightness(10); } /* Trend badge */ .dash-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; font-family: var(--mono); letter-spacing: .02em; } .dash-kpi-trend.up { color: #5cb88a; background: rgba(45,122,79,.15); } .dash-kpi-trend.down { color: #e07a6a; background: rgba(181,58,42,.12); } .dash-kpi-trend.flat { color: rgba(246,239,226,.45); background: rgba(255,255,255,.06); } /* Medios de pago pills — dentro de la hero card */ .dash-kpi-medio { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: rgba(246,239,226,.55); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-radius: 6px; padding: 2px 8px; } .dash-kpi-medio .medio-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } /* ── Body grid (2 cols) ── */ .dash-body-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; align-items: start; } .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-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid rgba(217,204,186,.7); background: #fff; } .dash-panel-title { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--char); } .dash-panel-sub { font-size: 10px; color: var(--char3); margin-top: 2px; } .dash-panel-action { font-size: 10px; color: var(--gold); background: none; border: 1px solid rgba(200,98,42,.25); border-radius: 20px; padding: 4px 12px; cursor: pointer; font-family: var(--sans); font-weight: 500; transition: background .12s, border-color .12s; white-space: nowrap; flex-shrink: 0; } .dash-panel-action:hover { background: var(--gold-bg); border-color: var(--gold-ln); } /* Stock crítico table */ .dash-stock-table { width: 100%; border-collapse: collapse; font-size: 12px; } .dash-stock-table tr { border-bottom: 1px solid rgba(217,204,186,.5); } .dash-stock-table tr:last-child { border-bottom: none; } .dash-stock-table tr:hover td { background: #faf8f5; } .dash-stock-table td { padding: 10px 18px; vertical-align: middle; } .dash-stock-table td:first-child { padding-left: 18px; } .dash-stock-table .st-nombre { font-weight: 500; color: var(--char); } .dash-stock-table .st-cat { font-size: 10px; color: var(--char3); margin-top: 1px; } .dash-stock-table .st-qty { font-family: var(--mono); font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; } .dash-stock-table .st-bar-wrap { width: 56px; } .dash-stock-table .st-bar { height: 2px; background: rgba(217,204,186,.5); border-radius: 2px; overflow: hidden; margin-top: 5px; } .dash-stock-table .st-bar-fill { height: 100%; border-radius: 2px; transition: width .3s ease; } .dash-panel-empty { padding: 32px 18px; text-align: center; font-size: 12px; color: var(--char3); } /* Timeline actividad */ .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; } .dash-tl-item:last-child { border-bottom: none; } .dash-tl-item:hover { background: #faf8f5; } .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(45,122,79,.08); } .dash-tl-icon.ingreso { background: rgba(42,90,140,.08); } .dash-tl-icon.merma { background: rgba(181,58,42,.07); } .dash-tl-icon.ajuste { background: rgba(160,98,10,.07); } .dash-tl-icon.transferencia_salida { background: rgba(200,98,42,.07); } .dash-tl-icon.transferencia_entrada { background: rgba(45,122,79,.07); } .dash-tl-body { flex: 1; min-width: 0; } .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(--char3); margin-top: 1px; } .dash-tl-right { text-align: right; flex-shrink: 0; } .dash-tl-delta { font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; } .dash-tl-delta.pos { color: var(--green); } .dash-tl-delta.neg { color: var(--red); } .dash-tl-hora { font-size: 9px; color: var(--char3); font-family: var(--mono); margin-top: 3px; } /* ── Acciones rápidas ── */ .dash-qa-row { display: flex; gap: 8px; margin-bottom: 16px; } .dash-qa-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(217,204,186,.65); cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--char2); transition: all .15s ease; white-space: nowrap; box-shadow: 0 1px 3px rgba(26,20,16,.04); } .dash-qa-btn:hover { border-color: rgba(200,98,42,.3); background: rgba(200,98,42,.04); color: var(--gold); box-shadow: 0 4px 14px rgba(26,20,16,.08); transform: translateY(-1px); } .dash-qa-btn .qa-icon { font-size: 15px; line-height: 1; } /* ── Trend badge ── */ .dash-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; font-family: var(--mono); } .dash-kpi-trend.up { color: var(--green); background: rgba(45,122,79,.09); } .dash-kpi-trend.down { color: var(--red); background: rgba(181,58,42,.07); } .dash-kpi-trend.flat { color: var(--char3); background: rgba(217,204,186,.4); } /* ── Medios de pago pills ── */ .dash-kpi-medio { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--char3); background: rgba(217,204,186,.3); border-radius: 6px; padding: 2px 8px; } .dash-kpi-medio .medio-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } /* ── NOTAS & TAREAS ── */ .dash-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; margin-bottom: 20px; } /* --- Notas --- */ .nota-input-area { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(217,204,186,.6); align-items: center; } .nota-input-area textarea { flex: 1; background: #faf8f5; border: 1px solid rgba(217,204,186,.7); border-radius: 8px; padding: 7px 10px; font-family: var(--sans); font-size: 12px; color: var(--char); resize: none; outline: none; line-height: 1.4; transition: border-color .15s, box-shadow .15s; height: 34px; overflow: hidden; } .nota-input-area textarea:focus { border-color: var(--gold-lt); box-shadow: 0 0 0 3px var(--gold-bg); height: auto; min-height: 34px; max-height: 90px; overflow: auto; } .nota-add-btn { background: var(--grad-ember); color: #fff; border: none; border-radius: 100px; padding: 7px 14px; font-family: var(--sans); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: box-shadow .15s, transform .15s; flex-shrink: 0; display: flex; align-items: center; gap: 4px; box-shadow: var(--shadow-warm); } .nota-add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(200,98,42,.28); } .nota-list { max-height: 220px; overflow-y: auto; } .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-item:last-child { border-bottom: none; } .nota-item:hover { background: #faf8f5; } .nota-body { flex: 1; min-width: 0; } .nota-texto { font-size: 12px; color: var(--char); line-height: 1.45; word-break: break-word; } .nota-meta { font-size: 9px; color: var(--char3); font-family: var(--mono); margin-top: 2px; } .nota-del { background: none; border: none; color: var(--char3); cursor: pointer; padding: 2px 3px; border-radius: 4px; opacity: .35; transition: opacity .12s, color .12s; flex-shrink: 0; } .nota-del:hover { opacity: 1; color: var(--red); } /* --- Tareas --- */ .tarea-input-row { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(217,204,186,.6); align-items: center; } .tarea-input-row input[type="text"] { flex: 1; min-width: 0; background: #faf8f5; border: 1px solid rgba(217,204,186,.7); border-radius: 8px; padding: 7px 10px; font-family: var(--sans); font-size: 12px; color: var(--char); outline: none; transition: border-color .15s, box-shadow .15s; } .tarea-input-row input[type="text"]:focus { border-color: var(--gold-lt); box-shadow: 0 0 0 3px var(--gold-bg); } .tarea-tipo-sel { background: #faf8f5; border: 1px solid rgba(217,204,186,.7); border-radius: 8px; padding: 7px 8px; font-family: var(--sans); font-size: 11px; color: var(--char2); outline: none; cursor: pointer; flex-shrink: 0; } .tarea-add-btn { background: var(--grad-ember); color: #fff; border: none; border-radius: 100px; padding: 7px 14px; font-family: var(--sans); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: box-shadow .15s, transform .15s; flex-shrink: 0; box-shadow: var(--shadow-warm); } .tarea-add-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(200,98,42,.28); } .tarea-list { max-height: 220px; overflow-y: auto; } .tarea-section-label { padding: 5px 14px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--char3); font-weight: 600; background: #faf8f5; border-bottom: 1px solid rgba(217,204,186,.5); } .tarea-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid rgba(217,204,186,.5); transition: background .1s; } .tarea-item:last-child { border-bottom: none; } .tarea-item:hover { background: #faf8f5; } .tarea-item.completada .tarea-texto { text-decoration: line-through; opacity: .35; } .tarea-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(217,204,186,.9); background: #fff; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .12s; } .tarea-check:hover { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); } .tarea-check.checked { background: var(--green); border-color: var(--green); color: #fff; } .tarea-check.checked::after { content: "✓"; font-size: 9px; font-weight: 700; } .tarea-body { flex: 1; min-width: 0; } .tarea-texto { font-size: 12px; color: var(--char); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tarea-badge { font-size: 8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 6px; margin-left: 4px; vertical-align: middle; } .tarea-badge.fija { background: rgba(42,90,140,.08); color: var(--blue); border: 1px solid rgba(42,90,140,.15); } .tarea-del { background: none; border: none; color: var(--char3); cursor: pointer; padding: 2px 3px; border-radius: 4px; opacity: .35; transition: opacity .12s, color .12s; flex-shrink: 0; } .tarea-del:hover { opacity: 1; color: var(--red); } /* ══════════════════════════════════════════════════════ DASHBOARD — "Warm Precision" Light editorial theme, scoped to #page-dashboard Linen bg · Ember accents · Coal hero card ══════════════════════════════════════════════════════ */ #page-dashboard { background: var(--parch); min-height: calc(100vh - var(--topbar)); } /* KPI base — igual que stat-cell en Stock */ #page-dashboard .dash-kpi { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 18px 20px; box-shadow: none; } #page-dashboard .dash-kpi::before { background: none; } #page-dashboard .dash-kpi[onclick]:hover, #page-dashboard .dash-kpi.clickable:hover { box-shadow: 0 3px 14px rgba(26,20,16,.08); transform: translateY(-1px); border-color: var(--parch3); } #page-dashboard .dash-kpi-accent { display: none !important; } #page-dashboard .dash-kpi-deco { opacity: .07; filter: none; } #page-dashboard .dash-kpi-label { color: var(--char2); } #page-dashboard .dash-kpi-value { color: var(--char); font-weight: 400; } #page-dashboard .dash-kpi-sub { color: var(--char2); } /* KPI Ventas — mismo estilo base, diferenciada por ember border */ #page-dashboard .dash-kpi-ventas { background: var(--parch); border: 1.5px solid var(--parch3); box-shadow: none; } #page-dashboard .dash-kpi-ventas::before { background: none; } #page-dashboard .dash-kpi-ventas:hover { box-shadow: 0 3px 14px rgba(26,20,16,.08); transform: translateY(-1px); } #page-dashboard .dash-kpi-ventas .dash-kpi-accent { display: none !important; } #page-dashboard .dash-kpi-ventas .dash-kpi-label { color: var(--char2); } #page-dashboard .dash-kpi-ventas .dash-kpi-value { color: var(--char); font-weight: 400; } #page-dashboard .dash-kpi-ventas .dash-kpi-sub { color: var(--char2); } #page-dashboard .dash-kpi-ventas .dash-kpi-kg { color: var(--char3); } #page-dashboard .dash-kpi-ventas .dash-kpi-deco { opacity: .07; filter: none; } /* Trend badges — light */ #page-dashboard .dash-kpi-trend.up { color: var(--green); background: rgba(45,122,79,.10); } #page-dashboard .dash-kpi-trend.down { color: var(--red); background: rgba(181,58,42,.09); } #page-dashboard .dash-kpi-trend.flat { color: var(--char3); background: rgba(217,204,186,.45); } /* Medios pills */ #page-dashboard .dash-kpi-medio { color: var(--char3); background: var(--parch2); border: 1px solid var(--parch3); } /* Quick actions */ #page-dashboard .dash-qa-btn { background: #fff; border: 1px solid rgba(200,98,42,.15); color: var(--char2); box-shadow: 0 1px 4px rgba(26,20,16,.05); border-radius: 14px; } #page-dashboard .dash-qa-btn:hover { background: rgba(200,98,42,.05); border-color: rgba(200,98,42,.32); color: var(--gold); box-shadow: 0 4px 18px rgba(200,98,42,.12), 0 2px 8px rgba(26,20,16,.06); } /* Body panels — igual que stat-cell en Stock */ #page-dashboard .dash-panel { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: none; } #page-dashboard .dash-panel-head { background: var(--card-bg-alt); border-bottom: 1.5px solid var(--parch3); } #page-dashboard .dash-panel-title { color: var(--char); } #page-dashboard .dash-panel-sub { color: var(--char3); } #page-dashboard .dash-panel-action { color: var(--gold); background: rgba(200,98,42,.06); border: 1px solid rgba(200,98,42,.22); } #page-dashboard .dash-panel-action:hover { background: rgba(200,98,42,.12); border-color: rgba(200,98,42,.38); } #page-dashboard .dash-panel-empty { color: var(--char3); } /* Stock table */ #page-dashboard .dash-stock-table tr { border-bottom-color: rgba(200,98,42,.08); } #page-dashboard .dash-stock-table tr:hover td { background: rgba(200,98,42,.04); } #page-dashboard .dash-stock-table .st-nombre { color: var(--char); } #page-dashboard .dash-stock-table .st-cat { color: var(--char3); } #page-dashboard .dash-stock-table .st-bar { background: rgba(200,98,42,.12); } /* Timeline */ #page-dashboard .dash-tl-item { border-bottom-color: rgba(200,98,42,.08); } #page-dashboard .dash-tl-item:hover { background: rgba(200,98,42,.04); } #page-dashboard .dash-tl-prod { color: var(--char); } #page-dashboard .dash-tl-meta { color: var(--char3); } #page-dashboard .dash-tl-hora { color: var(--char3); } #page-dashboard .dash-tl-delta.pos { color: var(--green); } #page-dashboard .dash-tl-delta.neg { color: var(--red); } /* Sesión ventas */ #page-dashboard .dash-sesion-item { border-bottom-color: rgba(200,98,42,.08); } #page-dashboard .dash-sesion-item:hover { background: rgba(200,98,42,.04); } #page-dashboard .dash-sesion-prod { color: var(--char); } #page-dashboard .dash-sesion-meta { color: var(--char3); } #page-dashboard .dash-sesion-pos { color: var(--green); } #page-dashboard .dash-sesion-neg { color: var(--red); } /* Notes */ #page-dashboard .nota-input-area { border-bottom: 1.5px solid var(--parch3); } #page-dashboard .nota-input-area textarea { background: var(--parch2); border-color: var(--parch3); color: var(--char); } #page-dashboard .nota-input-area textarea:focus { border-color: var(--gold-lt); box-shadow: 0 0 0 3px var(--gold-bg); } #page-dashboard .nota-item { border-bottom-color: var(--parch3); } #page-dashboard .nota-item:hover { background: var(--parch2); } #page-dashboard .nota-texto { color: var(--char); } #page-dashboard .nota-meta { color: var(--char3); } #page-dashboard .nota-del { color: var(--char3); } #page-dashboard .nota-del:hover { color: var(--red); } /* Tasks */ #page-dashboard .tarea-input-row { border-bottom: 1.5px solid var(--parch3); } #page-dashboard .tarea-input-row input[type="text"] { background: var(--parch2); border-color: var(--parch3); color: var(--char); } #page-dashboard .tarea-input-row input[type="text"]:focus { border-color: var(--gold-lt); box-shadow: 0 0 0 3px var(--gold-bg); } #page-dashboard .tarea-tipo-sel { background: var(--parch2); border-color: var(--parch3); color: var(--char2); } #page-dashboard .tarea-section-label { color: var(--char3); background: var(--parch2); border-bottom-color: var(--parch3); } #page-dashboard .tarea-item { border-bottom-color: var(--parch3); } #page-dashboard .tarea-item:hover { background: var(--parch2); } #page-dashboard .tarea-texto { color: var(--char); } #page-dashboard .tarea-check { border-color: var(--parch3); background: var(--parch); } /* Vencimientos quick-list */ #page-dashboard .dash-venc-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; border-top: 1.5px solid var(--parch3); padding-top: 8px; } #page-dashboard .dash-venc-item { display: flex; align-items: center; gap: 6px; font-size: 11px; } #page-dashboard .dash-venc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } #page-dashboard .dash-venc-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--char2); font-weight: 500; } #page-dashboard .dash-venc-badge { font-size: 9px; font-family: var(--mono); font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap; border: 1px solid; flex-shrink: 0; } /* ── Header: tamaño y zonas ── */ #page-dashboard .dash-header { grid-template-columns: auto 1fr auto; gap: 28px; margin-bottom: 20px; } #page-dashboard .dash-time { font-size: 56px; } #page-dashboard .dash-greeting-name { font-size: 22px; } .dash-header-left { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex-shrink: 0; position: relative; z-index: 1; } .dash-header-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dash-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; } /* Botón primario: ember pill grande */ .dash-action-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--grad-ember); color: #fff; border: none; border-radius: 100px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; cursor: pointer; box-shadow: var(--shadow-warm); transition: box-shadow .15s, transform .15s; white-space: nowrap; } .dash-action-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(200,98,42,.35); } .dash-action-primary:active { transform: scale(.98); } /* Botones secundarios */ .dash-action-sec-row { display: flex; gap: 6px; } .dash-action-sec { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px; background: transparent; color: var(--char2); border: 1px solid var(--parch3); border-radius: 100px; font-family: var(--sans); font-size: 11px; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap; } .dash-action-sec:hover { background: var(--parch2); color: var(--char); border-color: var(--gold-ln); } /* KPI grid: 3 columnas */ #page-dashboard .dash-kpi-grid { grid-template-columns: 1.8fr 1fr 1fr; } /* Body grid: 3 columnas */ #page-dashboard .dash-body-grid { grid-template-columns: 1.15fr 1fr 0.82fr; margin-bottom: 20px; } /* Columna 3: notas + tareas apiladas */ .dash-tools-stack { display: flex; flex-direction: column; gap: 10px; } /* ══════════════════════════════════════════ DASHBOARD · La Pizarra del Día · v7.0 Editorial briefing — time as anchor, numbers growing in real time ══════════════════════════════════════════ */ /* ── Página base ── */ #page-dashboard { background: var(--page); min-height: calc(100vh - var(--topbar)); padding-bottom: 32px; } /* ── Header: reloj + saludo + estado ── */ #page-dashboard .dash-header { grid-template-columns: auto 1fr auto; gap: 28px; padding: 10px 0 24px; margin-bottom: 20px; border-bottom: 1px solid var(--line-soft); } /* El reloj — ancla del dashboard */ #page-dashboard .dash-time { font-family: var(--serif); font-size: 58px; font-weight: 700; font-style: italic; letter-spacing: -0.04em; line-height: 1; color: var(--t1); } #page-dashboard .dash-time-sep { opacity: 0.22; font-style: normal; animation: blink-sep 1s step-end infinite; } /* Saludo */ #page-dashboard .dash-greeting-name { font-family: var(--serif); font-size: 22px; font-weight: 300; font-style: italic; letter-spacing: -0.02em; color: var(--t1); line-height: 1.2; } #page-dashboard .dash-greeting-name strong { font-weight: 700; } #page-dashboard .dash-greeting-summary { font-size: 11px; color: var(--t3); font-family: var(--mono); letter-spacing: 0.02em; margin-top: 6px; } #page-dashboard .dash-greeting-summary b { color: var(--t2); font-weight: 500; } #page-dashboard .dash-greeting-summary a { color: var(--gold); } /* Status pill */ #page-dashboard .dash-local-name { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--t4); } /* ── KPI Grid ── */ #page-dashboard .dash-kpi-grid { grid-template-columns: 1.8fr 1fr 1fr; gap: 12px; margin-bottom: 18px; } /* KPI cards base */ #page-dashboard .dash-kpi { background: #ffffff; border: 1px solid rgba(26, 20, 16, 0.08); border-top: 2px solid transparent; border-radius: 0 0 8px 8px; padding: 18px 20px 16px; box-shadow: 0 2px 10px rgba(26, 20, 16, 0.04); transition: box-shadow var(--motion-fast) var(--ease-ui), border-top-color var(--motion-fast) var(--ease-ui), transform var(--motion-fast) var(--ease-ui); } #page-dashboard .dash-kpi::before { background: none; } #page-dashboard .dash-kpi-accent { display: none !important; } #page-dashboard .dash-kpi-deco { opacity: 0.05; filter: none; } #page-dashboard .dash-kpi.clickable:hover, #page-dashboard .dash-kpi[onclick]:hover { box-shadow: 0 6px 24px rgba(26, 20, 16, 0.09); border-top-color: rgba(200, 98, 42, 0.55); transform: translateY(-2px); } #page-dashboard .dash-kpi-label { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--t4); font-weight: 500; margin-bottom: 12px; } #page-dashboard .dash-kpi-value { font-family: var(--serif); font-size: 36px; font-weight: 700; font-style: italic; letter-spacing: -0.04em; line-height: 1; color: var(--t1); } #page-dashboard .dash-kpi-sub { font-family: var(--mono); font-size: 9.5px; color: var(--t3); margin-top: 8px; letter-spacing: 0.03em; } /* ── KPI Ventas: hero card oscura ── */ #page-dashboard .dash-kpi-ventas { background: radial-gradient(ellipse 110% 80% at 100% 0%, rgba(200,98,42,0.24) 0%, transparent 52%), radial-gradient(ellipse 60% 60% at 0% 110%, rgba(200,98,42,0.12) 0%, transparent 55%), linear-gradient(158deg, #1c1510 0%, #271d14 55%, #160f0b 100%); border: 1px solid rgba(200, 98, 42, 0.22); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 12px 36px rgba(26, 20, 16, 0.22), inset 0 1px 0 rgba(255,255,255,0.05); position: relative; overflow: hidden; } /* Línea ember superior de la hero card */ #page-dashboard .dash-kpi-ventas::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(232,146,74,0.70) 30%, rgba(232,146,74,0.90) 55%, rgba(232,146,74,0.70) 80%, transparent 100% ); pointer-events: none; } #page-dashboard .dash-kpi-ventas::after { display: none; } #page-dashboard .dash-kpi-ventas .dash-kpi-accent { display: none !important; } #page-dashboard .dash-kpi-ventas .dash-kpi-deco { opacity: 0.06; filter: brightness(10); } #page-dashboard .dash-kpi-ventas .dash-kpi-label { color: rgba(246, 239, 226, 0.40); font-family: var(--mono); } #page-dashboard .dash-kpi-ventas .dash-kpi-value { font-family: var(--serif); font-size: 54px; font-weight: 700; font-style: italic; letter-spacing: -0.05em; line-height: 1; color: #f5ede0; text-shadow: 0 2px 12px rgba(0,0,0,0.20); } #page-dashboard .dash-kpi-ventas .dash-kpi-kg { font-family: var(--mono); font-size: 10.5px; color: rgba(246, 239, 226, 0.40); margin-top: 6px; letter-spacing: 0.04em; } #page-dashboard .dash-kpi-ventas .dash-kpi-sub { color: rgba(246, 239, 226, 0.42); font-family: var(--mono); } #page-dashboard .dash-kpi-ventas:hover { box-shadow: 0 16px 44px rgba(26, 20, 16, 0.30), inset 0 1px 0 rgba(255,255,255,0.07); border-top: none; transform: translateY(-2px); } /* Trend badges */ #page-dashboard .dash-kpi-trend.up { color: var(--green); background: rgba(45,122,79,0.12); font-family: var(--mono); font-size: 9.5px; } #page-dashboard .dash-kpi-trend.down { color: var(--red); background: rgba(181,58,42,0.09); font-family: var(--mono); font-size: 9.5px; } #page-dashboard .dash-kpi-trend.flat { color: var(--t4); background: rgba(26,20,16,0.05); font-family: var(--mono); font-size: 9.5px; } /* Trend dentro de la hero card */ #page-dashboard .dash-kpi-ventas .dash-kpi-trend.up { color: rgba(100,200,140,0.90); background: rgba(45,122,79,0.18); } #page-dashboard .dash-kpi-ventas .dash-kpi-trend.down { color: rgba(220,120,100,0.90); background: rgba(181,58,42,0.18); } #page-dashboard .dash-kpi-ventas .dash-kpi-trend.flat { color: rgba(246,239,226,0.38); background: rgba(255,255,255,0.07); } /* Medios de pago pills — hero */ #page-dashboard .dash-kpi-ventas .dash-kpi-medio { color: rgba(246, 239, 226, 0.50); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); font-family: var(--mono); font-size: 9.5px; } /* Medios de pago pills — cards claras */ #page-dashboard .dash-kpi-medio { color: var(--t3); background: var(--surface-1); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 9.5px; border-radius: 4px; } /* ── Quick Actions ── */ #page-dashboard .dash-qa-row { gap: 8px; margin-bottom: 18px; } #page-dashboard .dash-qa-btn { background: #ffffff; border: 1px solid rgba(26,20,16,0.09); color: var(--t2); font-family: var(--sans); font-size: 12px; font-weight: 500; border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(26,20,16,0.04); transition: background var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui), transform var(--motion-fast) var(--ease-ui); } #page-dashboard .dash-qa-btn:hover { background: rgba(200,98,42,0.05); border-color: rgba(200,98,42,0.30); color: var(--gold); box-shadow: 0 4px 16px rgba(200,98,42,0.10); transform: translateY(-1px); } /* ── Body panels ── */ #page-dashboard .dash-body-grid { grid-template-columns: 1.15fr 1fr 0.82fr; gap: 14px; margin-bottom: 20px; } #page-dashboard .dash-panel { background: #ffffff; border: 1px solid rgba(26,20,16,0.08); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(26,20,16,0.04); } #page-dashboard .dash-panel-head { background: #faf7f2; border-bottom: 1px solid rgba(26,20,16,0.07); padding: 13px 18px 11px; } #page-dashboard .dash-panel-title { font-family: var(--mono); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t3); font-weight: 500; } #page-dashboard .dash-panel-sub { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 2px; } #page-dashboard .dash-panel-action { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); background: var(--ember-bg); border: 1px solid var(--ember-ln); border-radius: 4px; padding: 4px 10px; cursor: pointer; transition: background var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui); white-space: nowrap; flex-shrink: 0; } #page-dashboard .dash-panel-action:hover { background: rgba(200,98,42,0.12); border-color: rgba(200,98,42,0.38); } #page-dashboard .dash-panel-empty { font-family: var(--mono); font-size: 11px; color: var(--t4); letter-spacing: 0.06em; padding: 32px 18px; text-align: center; } /* ── Stock crítico table ── */ #page-dashboard .dash-stock-table tr { border-bottom: 1px solid rgba(26,20,16,0.05); } #page-dashboard .dash-stock-table tr:last-child { border-bottom: none; } #page-dashboard .dash-stock-table tr:hover td { background: rgba(245,239,230,0.60); } #page-dashboard .dash-stock-table td { padding: 10px 18px; } #page-dashboard .dash-stock-table .st-nombre { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--t1); } #page-dashboard .dash-stock-table .st-cat { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 2px; letter-spacing: 0.06em; } #page-dashboard .dash-stock-table .st-qty { font-family: var(--serif); font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: var(--t1); text-align: right; } #page-dashboard .dash-stock-table .st-bar { background: rgba(26,20,16,0.07); height: 3px; border-radius: 2px; margin-top: 4px; } /* ── Timeline de actividad ── */ #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); } #page-dashboard .dash-tl-item:last-child { border-bottom: none; } #page-dashboard .dash-tl-item:hover { background: rgba(245,239,230,0.55); } #page-dashboard .dash-tl-icon { width: 28px; height: 28px; border-radius: 6px; } #page-dashboard .dash-tl-prod { font-size: 12px; font-weight: 500; color: var(--t1); } #page-dashboard .dash-tl-meta { font-family: var(--mono); font-size: 9.5px; color: var(--t4); margin-top: 2px; letter-spacing: 0.03em; } #page-dashboard .dash-tl-delta { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; } #page-dashboard .dash-tl-delta.pos { color: var(--green); } #page-dashboard .dash-tl-delta.neg { color: var(--red); } #page-dashboard .dash-tl-hora { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 3px; letter-spacing: 0.04em; } /* ── Sesión de ventas ── */ #page-dashboard .dash-sesion-item { border-bottom: 1px solid rgba(26,20,16,0.05); padding: 9px 18px; transition: background var(--motion-fast) var(--ease-ui); } #page-dashboard .dash-sesion-item:hover { background: rgba(245,239,230,0.55); } #page-dashboard .dash-sesion-prod { font-weight: 500; font-size: 12px; color: var(--t1); } #page-dashboard .dash-sesion-meta { font-family: var(--mono); font-size: 9.5px; color: var(--t4); margin-top: 1px; } #page-dashboard .dash-sesion-qty { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; } #page-dashboard .dash-sesion-pos { color: var(--green); } #page-dashboard .dash-sesion-neg { color: var(--red); } /* ── Notas y tareas ── */ #page-dashboard .nota-input-area { border-bottom: 1px solid rgba(26,20,16,0.07); padding: 10px 14px; } #page-dashboard .nota-input-area textarea { background: rgba(245,239,230,0.60); border: 1px solid rgba(26,20,16,0.10); border-radius: 6px; color: var(--t1); font-family: var(--sans); font-size: 12px; } #page-dashboard .nota-input-area textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--ember-bg); } #page-dashboard .nota-item { border-bottom: 1px solid rgba(26,20,16,0.05); padding: 9px 14px; } #page-dashboard .nota-item:hover { background: rgba(245,239,230,0.55); } #page-dashboard .nota-texto { font-size: 12px; color: var(--t1); line-height: 1.45; } #page-dashboard .nota-meta { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 2px; } #page-dashboard .nota-del { color: var(--t4); opacity: 0.45; } #page-dashboard .nota-del:hover { color: var(--red); opacity: 1; } /* Tareas */ #page-dashboard .tarea-input-row { border-bottom: 1px solid rgba(26,20,16,0.07); padding: 10px 14px; } #page-dashboard .tarea-input-row input[type="text"] { background: rgba(245,239,230,0.60); border: 1px solid rgba(26,20,16,0.10); border-radius: 6px; color: var(--t1); font-family: var(--sans); font-size: 12px; } #page-dashboard .tarea-input-row input[type="text"]:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--ember-bg); } #page-dashboard .tarea-tipo-sel { background: rgba(245,239,230,0.60); border: 1px solid rgba(26,20,16,0.10); border-radius: 6px; color: var(--t2); font-family: var(--sans); } #page-dashboard .tarea-item { border-bottom: 1px solid rgba(26,20,16,0.05); } #page-dashboard .tarea-item:hover { background: rgba(245,239,230,0.55); } #page-dashboard .tarea-texto { color: var(--t1); font-size: 12px; } #page-dashboard .tarea-section-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.20em; color: var(--t4); background: rgba(26,20,16,0.03); border-bottom: 1px solid rgba(26,20,16,0.05); padding: 5px 14px; } #page-dashboard .tarea-check { border-color: rgba(26,20,16,0.15); background: #fff; border-radius: 3px; } /* Vencimientos quick list */ #page-dashboard .dash-venc-list { border-top: 1px solid rgba(26,20,16,0.06); padding-top: 10px; margin-top: 10px; } #page-dashboard .dash-venc-nombre { color: var(--t2); font-weight: 500; } #page-dashboard .dash-venc-badge { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; } /* ══════════════════════════════════════ DASHBOARD — RESPONSIVE OVERRIDES (deben estar DESPUÉS del CSS desktop para ganar la cascada correctamente) ══════════════════════════════════════ */ @media (max-width: 960px) { /* Header: colapsa acciones secundarias, reduce tiempo */ .dash-header { gap: 18px; } .dash-time { font-size: 36px; } .dash-action-sec-row { display: none; } .dash-action-primary { font-size: 12px; padding: 10px 18px; } /* KPI grid: ventas ancho completo + venc/ticket en 2 cols */ .dash-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .dash-kpi-ventas { grid-column: 1 / -1; } .dash-kpi { padding: 18px 18px 16px 18px; } .dash-kpi-ventas .dash-kpi-value { font-size: 38px; } /* Body: 1 columna */ #page-dashboard .dash-body-grid { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 600px) { /* Header: ocultar acciones, mostrar solo reloj + saludo */ .dash-header { grid-template-columns: auto 1fr; } .dash-header-actions { display: none; } .dash-time { font-size: 30px; } .dash-greeting-name { font-size: 16px; } /* KPIs */ .dash-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } ns: 1fr 1fr !important; gap: 8px; } .dash-kpi { padding: 14px 14px 12px; border-radius: 12px; } .dash-kpi-deco { display: none; } .dash-kpi-value { font-size: 22px; } .dash-kpi-ventas .dash-kpi-value { font-size: 28px; } .dash-kpi-label { font-size: 8px; letter-spacing: .12em; margin-bottom: 8px; } .dash-kpi-sub { font-size: 9px; } /* Body: 1 columna */ #page-dashboard .dash-body-grid { grid-template-columns: 1fr !important; } } /* ── Descuento: segmented control ── */ .vr-desc-seg { display: flex; background: rgba(214,199,179,0.28); border-radius: 11px; padding: 3px; gap: 2px; } .vr-desc-btn { flex: 1; background: transparent; border: none; border-radius: 8px; padding: 9px 4px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--char3); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; text-align: center; } .vr-desc-btn:hover { color: var(--char); background: rgba(255,255,255,0.55); } .vr-desc-btn.active { background: #fff; color: var(--char); font-weight: 700; box-shadow: 0 1px 6px rgba(26,20,16,0.13); } /* ── Medio de pago: cards con acento de color ── */ .vr-pago-grid { display: flex; gap: 8px; } .vr-pago-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px 8px; background: #fbf7f0; border: 1.5px solid rgba(214,199,179,0.9); border-radius: 12px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--char2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; white-space: nowrap; } .vr-pago-btn svg { opacity: .55; transition: opacity .15s, stroke .15s; } .vr-pago-btn:hover { border-color: rgba(200,98,42,0.35); background: rgba(200,98,42,0.05); color: var(--char); } .vr-pago-btn:hover svg { opacity: .8; } .vr-pago-btn.active[data-medio="efectivo"] { background: rgba(45,122,79,.1); border-color: rgba(45,122,79,.52); color: #1f6b38; font-weight: 700; } .vr-pago-btn.active[data-medio="efectivo"] svg { opacity: 1; stroke: #1f6b38; } .vr-pago-btn.active[data-medio="debito"] { background: rgba(42,90,140,.1); border-color: rgba(42,90,140,.52); color: #2a5a8c; font-weight: 700; } .vr-pago-btn.active[data-medio="debito"] svg { opacity: 1; stroke: #2a5a8c; } .vr-pago-btn.active[data-medio="transferencia"] { background: rgba(160,98,10,.1); border-color: rgba(160,98,10,.52); color: #a0620a; font-weight: 700; } .vr-pago-btn.active[data-medio="transferencia"] svg { opacity: 1; stroke: #a0620a; } /* ── Botones edit/delete en egresos de arqueo ── */ .cc-eg-actions { display: flex; gap: 3px; flex-shrink: 0; } .cc-eg-edit, .cc-eg-del { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; padding: 0; color: var(--char3); transition: background .12s, border-color .12s, color .12s; } .cc-eg-edit:hover { background: rgba(42,90,140,.08); border-color: rgba(42,90,140,.22); color: #2a5a8c; } .cc-eg-del:hover { background: rgba(181,58,42,.08); border-color: rgba(181,58,42,.22); color: var(--red); } /* ── Overlay de edición de egreso ── */ .cc-edit-egreso-overlay { position: fixed; inset: 0; background: rgba(26,20,16,.44); display: flex; align-items: center; justify-content: center; z-index: 9200; } .cc-edit-egreso-box { background: #fff8f2; border-radius: 14px; padding: 24px; width: 320px; box-shadow: 0 8px 40px rgba(0,0,0,.2); } .cc-edit-egreso-title { font-size: 14px; font-weight: 700; color: var(--char); margin-bottom: 4px; } .cc-edit-egreso-desc { font-size: 11px; color: var(--char3); margin-bottom: 12px; } .cc-edit-egreso-lbl { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--char3); margin: 10px 0 4px; } .cc-edit-egreso-input { width: 100%; background: #fbf7f0; border: 1px solid rgba(214,199,179,0.9); border-radius: 8px; padding: 9px 12px; font-size: 13px; font-family: var(--sans); color: var(--char); outline: none; box-sizing: border-box; } .cc-edit-egreso-input:focus { border-color: rgba(200,98,42,0.45); } .cc-edit-egreso-btns { display: flex; gap: 8px; margin-top: 18px; } /* ══════════════════════════════════════ CIERRE DE CAJA ══════════════════════════════════════ */ .cc-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } .cc-main { display: flex; flex-direction: column; gap: 16px; } .cc-side { display: flex; flex-direction: column; gap: 16px; } /* Hero total */ .cc-hero { background: var(--leather); border-radius: var(--r2); padding: 28px 28px 24px; position: relative; overflow: hidden; } .cc-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(200,98,42,.18) 0%, transparent 65%); pointer-events: none; } .cc-hero-label { font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: rgba(246,239,226,.4); font-family: var(--mono); margin-bottom: 8px; } .cc-hero-total { font-family: var(--mono); font-size: 52px; font-weight: 200; color: #fff; letter-spacing: -.02em; line-height: 1; margin-bottom: 6px; } .cc-hero-egresos { display: flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--mono); color: rgba(246,170,140,.88); margin-top: 5px; margin-bottom: 2px; } .cc-hero-sub { font-size: 12px; color: rgba(246,239,226,.5); font-family: var(--sans); } .cc-hero-meta { display: flex; gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); } .cc-hero-kpi { flex: 1; } .cc-hero-kpi-val { font-family: var(--mono); font-size: 20px; font-weight: 300; color: var(--text-on-dark); line-height: 1; } .cc-hero-kpi-lbl { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(246,239,226,.4); margin-top: 4px; } .cc-hero-kpi.ambos { border-left: 1px solid rgba(255,255,255,.12); padding-left: 16px; } .cc-hero-kpi.ambos .cc-hero-kpi-val { color: rgba(246,239,226,.65); font-size: 17px; } .cc-pago-filtro-btn { padding: 3px 9px; font-family: var(--sans); font-size: 10px; font-weight: 500; border: 1.5px solid var(--parch3); border-radius: 20px; background: var(--parch); color: var(--char3); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .cc-pago-filtro-btn.on { background: var(--leather); color: var(--text-on-dark); border-color: var(--leather); } .cc-det-ticket-row:hover td { background: var(--parch2); } /* Medios de pago */ .cc-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; } .cc-card-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--parch3); display: flex; align-items: center; justify-content: space-between; background: var(--card-bg-alt); } .cc-card-title { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--char2); } .cc-card-body { padding: 16px 18px; } .cc-pago-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cc-pago-item { background: var(--card-bg-alt); border: var(--card-border); border-radius: var(--card-radius); padding: 14px 16px; position: relative; overflow: hidden; } .cc-pago-icon { font-size: 18px; margin-bottom: 8px; } .cc-pago-label { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--char3); margin-bottom: 6px; font-weight: 600; } .cc-pago-monto { font-family: var(--mono); font-size: 20px; font-weight: 400; color: var(--char); line-height: 1; } .cc-pago-count { font-size: 10px; color: var(--char3); font-family: var(--mono); margin-top: 4px; } .cc-pago-bar { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 2px 0 0; transition: width .5s ease; } /* Donut chart SVG */ .cc-donut-wrap { display: flex; align-items: center; gap: 20px; padding: 4px 0; } .cc-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; } .cc-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cc-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .cc-legend-label { flex: 1; color: var(--char2); } .cc-legend-pct { font-family: var(--mono); font-size: 11px; color: var(--char3); font-weight: 600; } /* Top productos */ .cc-top-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--parch3); } .cc-top-item:last-child { border-bottom: none; } .cc-top-rank { font-family: var(--mono); font-size: 10px; color: var(--char3); width: 16px; text-align: center; flex-shrink: 0; } .cc-top-rank.gold { color: var(--gold); font-weight: 700; } .cc-top-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--char); } .cc-top-bar-wrap { width: 80px; height: 4px; background: var(--parch3); border-radius: 2px; overflow: hidden; } .cc-top-bar-fill { height: 100%; border-radius: 2px; background: var(--gold); } .cc-top-monto { font-family: var(--mono); font-size: 11px; color: var(--char2); text-align: right; min-width: 80px; } /* Arqueo de efectivo */ .cc-arqueo-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--parch3); font-size: 13px; } .cc-arqueo-row:last-child { border-bottom: none; } .cc-arqueo-label { color: var(--char2); } .cc-arqueo-val { font-family: var(--mono); font-weight: 500; color: var(--char); } .cc-arqueo-input { width: 140px; background: var(--parch2); border: 1.5px solid var(--parch3); border-radius: var(--r); padding: 7px 10px; font-family: var(--mono); font-size: 13px; color: var(--char); outline: none; text-align: right; transition: border-color .15s; } .cc-arqueo-input:focus { border-color: var(--gold); } .cc-dif-positivo { color: var(--green); } .cc-dif-negativo { color: var(--red); } .cc-dif-neutral { color: var(--char3); } /* ── Egresos itemizados en arqueo ── */ .cc-egreso-item { padding: 5px 0; border-bottom: none; align-items: flex-start; gap: 6px; } .cc-egreso-label { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--char2); flex: 1; min-width: 0; } .cc-egreso-tag { font-size: 8.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--red); background: rgba(181,58,42,.08); border: 1px solid rgba(181,58,42,.22); border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; } .cc-retiro-tag { color: var(--amber); background: rgba(160,98,10,.08); border-color: rgba(160,98,10,.22); } .cc-egreso-val { font-size: 12px; color: var(--red); flex-shrink: 0; } /* ── Form de retiro de efectivo ── */ .cc-retiro-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .cc-retiro-btns { display: flex; gap: 8px; justify-content: flex-end; } .cc-retiro-toggle-btn { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: 1.5px dashed var(--parch3); border-radius: var(--r2); color: var(--char3); font-size: 11.5px; font-weight: 600; padding: 9px 14px; cursor: pointer; transition: border-color .14s, color .14s, background .14s; letter-spacing: .02em; } .cc-retiro-toggle-btn:hover { border-color: var(--amber); color: var(--amber); background: rgba(160,98,10,.05); } /* Nota de cierre */ .cc-nota-input { width: 100%; background: var(--parch2); border: 1.5px solid var(--parch3); border-radius: var(--r); padding: 10px 12px; font-family: var(--sans); font-size: 12px; color: var(--char); outline: none; resize: vertical; min-height: 70px; line-height: 1.5; transition: border-color .15s; box-sizing: border-box; } .cc-nota-input:focus { border-color: var(--gold); } /* Botón cerrar caja */ .cc-btn-cerrar { width: 100%; background: var(--grad-dark); color: var(--text-on-dark); border: none; border-radius: var(--r2); padding: 15px 20px; font-family: var(--serif); font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: box-shadow .15s, transform .15s; letter-spacing: .02em; position: relative; overflow: hidden; box-shadow: var(--shadow-deep); } .cc-btn-cerrar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-ember); } .cc-btn-cerrar:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(26,20,16,.30); } .cc-btn-preview { width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: var(--r); border: 1.5px dashed var(--line-strong); background: var(--surface-0); color: var(--char2); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .cc-btn-preview:hover { background: var(--surface-1); border-color: rgba(200,98,42,.4); color: var(--char); } /* Historial de cierres */ .cc-hist-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--parch3); cursor: pointer; transition: background .1s; font-size: 12px; } .cc-hist-item:last-child { border-bottom: none; } .cc-hist-item:hover { background: var(--parch2); } .cc-hist-fecha { color: var(--char3); font-family: var(--mono); font-size: 10px; flex-shrink: 0; } .cc-hist-total { font-family: var(--mono); font-weight: 600; color: var(--char); margin-left: auto; } .cc-hist-empleado { color: var(--char3); font-size: 10px; } .cc-obs-btn { flex-shrink:0; background:none; border:none; cursor:pointer; padding:3px 5px; border-radius:6px; font-size:13px; opacity:.45; transition:opacity .15s, background .15s; line-height:1; } .cc-obs-btn:hover { opacity:1; background:var(--parch3); } .cc-obs-btn.has-obs { opacity:.8; } .cc-obs-editor { padding:10px 14px 12px; border-bottom:1px solid var(--parch3); background:var(--parch2); } .cc-obs-editor textarea { width:100%; box-sizing:border-box; border:1.5px solid var(--parch3); border-radius:8px; padding:8px 10px; font-family:var(--sans); font-size:11px; color:var(--char); background:var(--parch); resize:vertical; min-height:60px; outline:none; transition:border-color .15s; } .cc-obs-editor textarea:focus { border-color:var(--leather); } .cc-obs-actions { display:flex; gap:6px; margin-top:7px; justify-content:flex-end; } .cc-obs-save { padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:600; background:var(--leather); color: var(--text-on-dark); border:none; border-radius:20px; cursor:pointer; transition:opacity .15s; } .cc-obs-save:hover { opacity:.85; } .cc-obs-cancel { padding:4px 12px; font-family:var(--sans); font-size:11px; background:none; color:var(--char3); border:1.5px solid var(--parch3); border-radius:20px; cursor:pointer; transition:border-color .15s; } .cc-obs-cancel:hover { border-color:var(--char3); } /* Comparativa */ .cc-comp-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .cc-comp-label { font-size: 11px; color: var(--char2); flex: 1; } .cc-comp-val { font-family: var(--mono); font-size: 12px; color: var(--char); } .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(45,122,79,.1); color: var(--green); } .cc-comp-delta.down { background: rgba(181,58,42,.1); color: var(--red); } .cc-comp-delta.flat { background: var(--parch2); color: var(--char3); } /* ── Responsive Cierre de Caja ── */ /* Tablet (≤ 960px): pasa a 1 columna, KPIs hero se adaptan */ @media (max-width: 960px) { .cc-layout { grid-template-columns: 1fr; } .cc-hero { padding: 22px 20px 18px; } .cc-hero-total { font-size: 38px; } .cc-hero-meta { gap: 12px; flex-wrap: wrap; } .cc-hero-kpi { flex: 1 1 calc(50% - 6px); } .cc-pago-grid { grid-template-columns: 1fr 1fr; } } /* Mobile (≤ 600px): compactar todo */ @media (max-width: 600px) { .cc-hero { padding: 18px 16px 14px; } .cc-hero-label { font-size: 8px; letter-spacing: .16em; } .cc-hero-total { font-size: 30px; } .cc-hero-sub { font-size: 11px; } .cc-hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .cc-hero-kpi { flex: unset; min-width: unset; } .cc-hero-kpi.ambos { grid-column: 1 / -1; border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; } .cc-hero-kpi-val { font-size: 18px; } .cc-card-head { padding: 12px 14px 10px; } .cc-card-body { padding: 12px 14px; } .cc-pago-grid { gap: 8px; } .cc-pago-item { padding: 11px 12px; } .cc-pago-monto { font-size: 17px; } .cc-pago-icon { font-size: 15px; margin-bottom: 6px; } .cc-donut-wrap { gap: 12px; } .cc-donut-wrap svg { width: 80px !important; height: 80px !important; } .cc-top-bar-wrap { display: none; } .cc-top-monto { min-width: 60px; font-size: 10px; } .cc-top-name { font-size: 11px; } .cc-arqueo-row { font-size: 12px; } .cc-arqueo-input { width: 110px; font-size: 12px; padding: 6px 8px; } .cc-btn-cerrar { font-size: 14px; padding: 13px 16px; } .cc-hist-item { font-size: 11px; padding: 9px 12px; gap: 8px; } .cc-hist-fecha { font-size: 9px; } .cc-comp-label { font-size: 10px; } .cc-comp-val { font-size: 11px; } .cc-comp-delta { font-size: 9px; padding: 2px 5px; } .cc-nota-input { min-height: 60px; font-size: 11px; } .cc-pago-filtro-btn { font-size: 10px; padding: 3px 8px; } } /* Pequeño (≤ 480px): ajustes finales */ @media (max-width: 480px) { .cc-pago-grid { grid-template-columns: 1fr 1fr; } /* mantener 2 cols */ .cc-hero-total { font-size: 26px; } .cc-hero-kpi-val { font-size: 16px; } .cc-donut-wrap { flex-direction: column; align-items: flex-start; gap: 10px; } .cc-donut-legend { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; } .cc-timeline-wrap { height: 72px; gap: 3px; } .cc-tl-hora { font-size: 7px; } .cc-obs-editor textarea { font-size: 12px; } } /* ── Timeline por hora ── */ .cc-timeline-wrap { display: flex; align-items: flex-end; gap: 5px; height: 90px; padding-top: 8px; } .cc-tl-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; } .cc-tl-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; transition: height .4s cubic-bezier(.4,0,.2,1); position: relative; } .cc-tl-bar.activa { box-shadow: 0 0 0 2px var(--gold-ln); } .cc-tl-monto { font-family: var(--mono); font-size: 8px; color: var(--char3); white-space: nowrap; display: none; } .cc-tl-col:hover .cc-tl-monto { display: block; } .cc-tl-hora { font-family: var(--mono); font-size: 8px; color: var(--char3); margin-top: 4px; letter-spacing: -.02em; } .cc-tl-hora.activa { color: var(--gold); font-weight: 600; } /* ── Retoque donut: más grande ── */ .cc-donut-wrap svg { width: 100px; height: 100px; } /* ── Pago items: borde izquierdo de color ── */ .cc-pago-item { border-left-width: 3px !important; border-left-style: solid; } .cc-pago-item:nth-child(1) { border-left-color: var(--green) !important; } .cc-pago-item:nth-child(2) { border-left-color: var(--blue) !important; } .cc-pago-item:nth-child(3) { border-left-color: var(--amber) !important; } /* ── Hero: segunda línea más visible ── */ .cc-hero-sub { opacity: .7; } .cc-hero-kpi-val { font-size: 22px; } /* CIERRE DE CAJA · pass jerarquía + respiración */ #page-cierre .cc-layout { gap: 22px; grid-template-columns: minmax(0, 1fr) 356px; } #page-cierre .cc-main, #page-cierre .cc-side { gap: 18px; } #page-cierre .cc-hero { background: linear-gradient(165deg, #1f1813 0%, #2b2119 62%, var(--char) 100%); box-shadow: 0 12px 34px rgba(26, 20, 16, 0.24); } #page-cierre .cc-hero-label { color: rgba(246, 239, 226, 0.5); } #page-cierre .cc-hero-total { font-size: 50px; font-weight: 320; letter-spacing: -0.03em; } #page-cierre .cc-hero-sub { font-size: 12px; color: rgba(246, 239, 226, 0.62); } #page-cierre .cc-hero-meta { gap: 16px; margin-top: 18px; padding-top: 14px; border-top-color: rgba(255, 255, 255, 0.12); } #page-cierre .cc-hero-kpi-val { font-size: 21px; font-weight: 420; } #page-cierre .cc-hero-kpi-lbl { color: rgba(246, 239, 226, 0.52); } #page-cierre .cc-card { background: var(--surface-0); border-color: var(--line-strong); } #page-cierre .cc-card-head { background: var(--surface-1); border-bottom-color: var(--line-soft); padding: 13px 16px 10px; } #page-cierre .cc-card-title { color: var(--text-meta); letter-spacing: .12em; } #page-cierre .cc-card-body { padding: 15px 16px; } #page-cierre .cc-pago-item { background: var(--surface-1); border-color: var(--line-strong); border-radius: 12px; padding: 13px 14px; } #page-cierre .cc-pago-label { color: var(--text-meta); } #page-cierre .cc-pago-monto { font-size: 22px; font-weight: 500; } #page-cierre .cc-pago-count { color: var(--text-meta); } #page-cierre .cc-pago-filtro-btn { background: var(--surface-0); border-color: var(--line-strong); color: var(--char2); } #page-cierre .cc-pago-filtro-btn.on { background: rgba(200, 98, 42, 0.16); border-color: rgba(200, 98, 42, 0.42); color: #5f391d; } #page-cierre .cc-card table { width: 100%; border-collapse: collapse; background: transparent; } #page-cierre .cc-card table thead th { color: var(--text-meta); letter-spacing: .09em; font-size: 9px; } #page-cierre .cc-card table tbody td { border-bottom: 1px solid var(--line-soft); padding-top: 8px; padding-bottom: 8px; } #page-cierre .cc-det-ticket-row:hover td { background: rgba(200, 98, 42, 0.06); } #page-cierre .cc-top-item { border-bottom-color: var(--line-soft); padding: 10px 0; } #page-cierre .cc-top-name { font-size: 12px; font-weight: 600; } #page-cierre .cc-arqueo-row { border-bottom-color: var(--line-soft); } #page-cierre .cc-arqueo-label { color: var(--char2); } #page-cierre .cc-arqueo-val { font-weight: 600; } #page-cierre .cc-arqueo-input, #page-cierre .cc-nota-input { background: var(--surface-1); border-color: var(--line-strong); } #page-cierre .cc-btn-cerrar { background: var(--gold); color: #fff; box-shadow: 0 10px 24px rgba(200, 98, 42, 0.24); } #page-cierre .cc-btn-cerrar::before { display: none; } #page-cierre .cc-btn-cerrar:hover { box-shadow: 0 12px 28px rgba(200, 98, 42, 0.28); } #page-cierre .cc-btn-preview { border-color: var(--line-strong); background: var(--surface-0); } #page-cierre .cc-btn-cerrar.is-closing { pointer-events: none; opacity: .88; } #page-cierre .cc-btn-cerrar.is-closing .cc-close-spin { display: inline-flex; } #page-cierre .cc-btn-cerrar .cc-close-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: ccBtnSpin .8s linear infinite; } @keyframes ccBtnSpin { to { transform: rotate(360deg); } } .cc-close-fx { position: fixed; inset: 0; z-index: 9998; display: none; align-items: center; justify-content: center; background: rgba(20, 15, 11, 0.34); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .24s ease; pointer-events: none; } .cc-close-fx.show { display: flex; opacity: 1; } .cc-close-fx-card { width: min(420px, calc(100vw - 30px)); border-radius: 18px; border: 1px solid rgba(255,255,255,.24); background: linear-gradient(165deg, rgba(28,22,17,.96) 0%, rgba(37,29,23,.96) 100%); box-shadow: 0 26px 64px rgba(12,9,7,.46); padding: 20px 20px 18px; transform: translateY(10px) scale(.985); opacity: 0; animation: ccFxCardIn .52s cubic-bezier(.2,.9,.24,1) forwards; } @keyframes ccFxCardIn { to { transform: translateY(0) scale(1); opacity: 1; } } .cc-close-fx-top { display: flex; align-items: center; gap: 12px; } .cc-close-fx-seal { width: 56px; height: 56px; border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, rgba(237,143,84,.26), rgba(200,98,42,.08)); border: 1px solid rgba(237,143,84,.42); } .cc-close-fx-seal::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(237,143,84,.35); animation: ccFxPulse 1.3s ease-out infinite; } .cc-close-fx-seal::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); animation: ccFxSpin 8s linear infinite; } @keyframes ccFxPulse { 0% { transform: scale(.95); opacity: .82; } 70% { transform: scale(1.08); opacity: .12; } 100% { transform: scale(1.12); opacity: 0; } } @keyframes ccFxSpin { to { transform: rotate(360deg); } } .cc-close-fx-check { width: 24px; height: 24px; } .cc-close-fx-check path { stroke: #f7f1e7; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28; stroke-dashoffset: 28; animation: ccFxCheck .5s .12s ease forwards; } @keyframes ccFxCheck { to { stroke-dashoffset: 0; } } .cc-close-fx-title { font-family: var(--serif); font-size: 24px; color: #f7f1e7; line-height: 1.06; } .cc-close-fx-sub { margin-top: 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(247,241,231,.66); } .cc-close-fx-kpis { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cc-close-fx-kpi { border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); padding: 8px 9px; } .cc-close-fx-kpi-v { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #f7f1e7; line-height: 1.1; } .cc-close-fx-kpi-l { margin-top: 3px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,241,231,.62); } .cc-close-fx-line { margin-top: 12px; height: 2px; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(237,143,84,.0), rgba(237,143,84,.88), rgba(237,143,84,.0)); animation: ccFxSweep 1.05s .12s ease forwards; } @keyframes ccFxSweep { from { width: 0; opacity: 0; } to { width: 100%; opacity: 1; } } #page-cierre .cc-hist-item { border-bottom-color: var(--line-soft); } #page-cierre .cc-hist-item:hover { background: rgba(200, 98, 42, 0.06); } #page-cierre .cc-hist-fecha, #page-cierre .cc-hist-empleado { color: var(--text-meta); } @media (max-width: 960px) { #page-cierre .cc-layout { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════ CIERRE DE CAJA · El Corte Final · v7.0 Ceremonial end-of-day — dark hero, precise cards ══════════════════════════════════════════ */ /* ── Layout ── */ #page-cierre .cc-layout { gap: 22px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } #page-cierre .cc-main, #page-cierre .cc-side { gap: 16px; display: flex; flex-direction: column; } /* ── Hero — el número del día ── */ #page-cierre .cc-hero { background: radial-gradient(ellipse 120% 90% at 100% 0%, rgba(200,98,42,0.22) 0%, transparent 55%), radial-gradient(ellipse 80% 70% at 0% 100%, rgba(200,98,42,0.10) 0%, transparent 55%), linear-gradient(158deg, #1c1510 0%, #271d15 55%, #160f0b 100%); border: 1px solid rgba(200, 98, 42, 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; } /* Línea ember en el top */ #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-hero-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(246, 239, 226, 0.42); font-weight: 400; margin-bottom: 10px; position: relative; z-index: 1; } #page-cierre .cc-hero-total { font-family: var(--serif); font-size: 58px; font-weight: 700; font-style: italic; letter-spacing: -0.05em; line-height: 1; color: #f5ede0; position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.22); } #page-cierre .cc-hero-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; color: rgba(246, 239, 226, 0.46); margin-top: 8px; position: relative; z-index: 1; } #page-cierre .cc-hero-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.10); position: relative; z-index: 1; } #page-cierre .cc-hero-kpi-val { font-family: var(--serif); font-size: 22px; font-weight: 700; font-style: italic; letter-spacing: -0.03em; line-height: 1; color: #f0e6d4; } #page-cierre .cc-hero-kpi-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 239, 226, 0.44); margin-top: 5px; } /* ── Cards ── */ #page-cierre .cc-card { background: #ffffff; border: 1px solid rgba(26, 20, 16, 0.09); border-radius: 8px; box-shadow: 0 2px 12px rgba(26, 20, 16, 0.05); overflow: hidden; } #page-cierre .cc-card-head { background: #faf7f2; border-bottom: 1px solid rgba(26, 20, 16, 0.07); padding: 13px 18px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #page-cierre .cc-card-title { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t4); font-weight: 500; } #page-cierre .cc-card-body { padding: 18px 20px; } /* ── Medios de pago ── */ #page-cierre .cc-pago-item { background: #ffffff; border: 1px solid rgba(26, 20, 16, 0.09); border-radius: 8px; padding: 14px 16px; box-shadow: 0 1px 6px rgba(26, 20, 16, 0.04); transition: box-shadow var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui); } #page-cierre .cc-pago-item:hover { border-color: rgba(200, 98, 42, 0.22); box-shadow: 0 4px 16px rgba(26, 20, 16, 0.08); } #page-cierre .cc-pago-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t4); font-weight: 500; margin-bottom: 8px; } #page-cierre .cc-pago-monto { font-family: var(--serif); font-size: 24px; font-weight: 700; font-style: italic; letter-spacing: -0.03em; line-height: 1; color: var(--t1); } #page-cierre .cc-pago-count { font-family: var(--mono); font-size: 9.5px; color: var(--t4); margin-top: 5px; letter-spacing: 0.06em; } /* Filter pills de pagos */ #page-cierre .cc-pago-filtro-btn { 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(--gold); } /* ── Tablas internas ── */ #page-cierre .cc-card table { width: 100%; border-collapse: collapse; background: transparent; } #page-cierre .cc-card table thead th { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t4); font-weight: 500; padding: 10px 12px; background: #faf7f2; border-bottom: 1px solid rgba(26, 20, 16, 0.07); } #page-cierre .cc-card table tbody td { padding: 10px 12px; font-size: 12px; color: var(--t2); border-bottom: 1px solid rgba(26, 20, 16, 0.05); } #page-cierre .cc-det-ticket-row:hover td { background: rgba(245, 239, 230, 0.70); } /* ── Top productos ── */ #page-cierre .cc-top-item { 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; } /* ── Arqueo de caja ── */ #page-cierre .cc-arqueo-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(26, 20, 16, 0.06); } #page-cierre .cc-arqueo-label { font-size: 12px; color: var(--t2); flex: 1; } #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-arqueo-input, #page-cierre .cc-nota-input { background: rgba(255, 255, 255, 0.80); border: 1px solid rgba(26, 20, 16, 0.12); border-radius: 6px; padding: 8px 11px; font-family: var(--mono); font-size: 13px; color: var(--t1); transition: border-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui); } #page-cierre .cc-arqueo-input:focus, #page-cierre .cc-nota-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--ember-bg); outline: none; } /* ── Botón principal de cierre ── */ #page-cierre .cc-btn-cerrar { width: 100%; background: var(--gold); 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(200, 98, 42, 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::before { display: none; } #page-cierre .cc-btn-cerrar:hover { background: #b05422; box-shadow: 0 12px 30px rgba(200, 98, 42, 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(200, 98, 42, 0.22); } #page-cierre .cc-btn-cerrar.is-closing { pointer-events: none; opacity: 0.85; } #page-cierre .cc-btn-cerrar.is-closing .cc-close-spin { display: inline-flex; } #page-cierre .cc-btn-cerrar .cc-close-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: ccBtnSpin 0.8s linear infinite; flex-shrink: 0; } /* Botón preview */ #page-cierre .cc-btn-preview { 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(200, 98, 42, 0.30); color: var(--t1); background: rgba(200, 98, 42, 0.05); } /* ── Historial de cierres ── */ #page-cierre .cc-hist-item { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(26, 20, 16, 0.06); cursor: pointer; transition: background var(--motion-fast) var(--ease-ui); border-radius: 4px; } #page-cierre .cc-hist-item:hover { background: rgba(245, 239, 230, 0.70); padding-left: 6px; padding-right: 6px; } #page-cierre .cc-hist-fecha { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--t2); letter-spacing: 0.04em; } #page-cierre .cc-hist-empleado { font-family: var(--mono); font-size: 9.5px; color: var(--t4); letter-spacing: 0.04em; } /* ── Sidebar: grupo colapsable ── */ .sb-collapsible-head { display: flex; align-items: center; gap: 10px; margin: 1px 8px; padding: 8px 14px; border-radius: 8px; color: rgba(246, 239, 226, 0.72); cursor: pointer; font-size: 12.5px; border-left: 2px solid transparent; transition: all 0.15s; user-select: none; } .sb-collapsible-head:hover { color: var(--text-on-dark); background: rgba(255, 255, 255, 0.06); } .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); } /* Tiene uno de sus hijos activo → mostrar marcado */ .sb-collapsible-head.child-active { color: var(--text-on-dark); border-left-color: rgba(200, 98, 42, 0.5); } .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; } .sb-collapsible-body.intro-opening .ni:nth-child(3) { animation-delay: .18s; } .sb-collapsible-body.intro-opening .ni:nth-child(4) { animation-delay: .23s; } .sb-collapsible-body.intro-opening .ni:nth-child(5) { animation-delay: .28s; } @keyframes sbInvHeadBloom { 0% { transform: translateY(2px) scale(.992); background: rgba(200, 98, 42, 0.0); box-shadow: 0 0 0 0 rgba(200,98,42,0); } 55% { transform: translateY(0) scale(1); background: rgba(200, 98, 42, 0.09); box-shadow: 0 0 0 5px rgba(200,98,42,.08); } 100% { transform: translateY(0) scale(1); background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 0 rgba(200,98,42,0); } } @keyframes sbInvItemReveal { 0% { opacity: 0; transform: translateY(-4px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Items anidados: sangría extra */ .sb-collapsible-body .ni { padding-left: 36px; font-size: 12px; } /* ══════════════════════════════════════════ CHROME · Sidebar + Topbar · v7.0 "El Lomo del Libro" — dark, precise, structural ══════════════════════════════════════════ */ /* ── Sidebar base ── */ #sidebar { background: #0e0b08; border-right: 1px solid rgba(200, 98, 42, 0.10); box-shadow: 2px 0 24px rgba(0, 0, 0, 0.32); } #sidebar::after { display: none; } /* ── Brand mark ── */ .sb-logo { padding: 26px 22px 22px; border-bottom: 1px solid rgba(200, 98, 42, 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(200, 98, 42, 0.65); font-weight: 400; display: block; margin-top: 7px; } /* ── Local indicator ── */ .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(200, 98, 42, 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(200, 98, 42, 0.55); flex-shrink: 0; } .sb-local strong { color: rgba(200, 98, 42, 0.72); font-weight: 500; } /* ── Group labels ── */ .sb-group { padding: 18px 22px 5px; font-family: var(--mono); font-size: 7px; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(240, 230, 214, 0.18); font-weight: 500; } /* ── Nav items ── */ .ni { display: flex; align-items: center; gap: 10px; margin: 1px 10px; padding: 8px 13px; color: rgba(240, 230, 214, 0.52); font-size: 12px; border-radius: 6px; border-left: 2px solid transparent; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui), border-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 { color: #f2e8d8; background: rgba(200, 98, 42, 0.13); border-left-color: rgba(200, 98, 42, 0.90); padding-left: 11px; } .ni.active svg { opacity: 1; color: rgba(200, 98, 42, 0.85); } /* ── Collapsible head refinement ── */ .sb-collapsible-head { margin: 1px 8px; padding: 8px 13px; border-radius: 6px; color: rgba(246, 239, 226, 0.60); font-size: 12px; border-left: 2px solid transparent; 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); border-left-color: rgba(200, 98, 42, 0.55); background: rgba(200, 98, 42, 0.06); } .sb-collapsible-body .ni { padding-left: 36px; font-size: 11.5px; color: rgba(240, 230, 214, 0.44); border-radius: 5px; } .sb-collapsible-body .ni:hover { color: rgba(240, 230, 214, 0.80); margin: 1px 10px; } .sb-collapsible-body .ni.active { color: #f2e8d8; border-left-color: rgba(200, 98, 42, 0.90); } /* ── Sidebar footer ── */ .sb-foot { padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); gap: 12px; } .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 { max-width: 100px; opacity: 0.70; transition: opacity var(--motion-med) var(--ease-ui); filter: none; } .wagon-logo:hover { opacity: 1; } .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(200, 98, 42, 0.35); color: rgba(200, 98, 42, 0.80); background: rgba(200, 98, 42, 0.05); } /* ── Topbar ── */ .topbar { height: 56px; background: #0e0b08; border-bottom: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22); padding: 0 26px; position: relative; } .topbar::after { display: none; } .topbar-title { font-family: var(--serif); font-size: 17px; font-weight: 300; font-style: italic; color: rgba(242, 232, 216, 0.88); letter-spacing: -0.02em; } .rt-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(200, 98, 42, 0.16); border-radius: 20px; padding: 4px 11px; font-family: var(--mono); font-size: 9.5px; color: rgba(240, 230, 214, 0.45); letter-spacing: 0.04em; } .demo-pill { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; color: var(--gold); border: 1px solid rgba(200, 98, 42, 0.28); background: rgba(200, 98, 42, 0.07); padding: 3px 9px; border-radius: 4px; } /* ── Venta Rápida sidebar button ── */ .sb-vr-btn { display: flex; align-items: center; gap: 9px; margin: 8px 12px 4px; padding: 9px 14px; background: var(--gold); 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(200,98,42,.25); user-select: none; } .sb-vr-btn:hover { background: var(--gold-lt); box-shadow: 0 3px 12px rgba(200,98,42,.35); } .sb-vr-btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .95; } /* ── Jerarquía tipográfica en tablas ── */ th { text-align: left; padding: 9px 14px; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--char3); font-weight: 600; background: var(--parch2); border-bottom: 1.5px solid var(--parch3); 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:last-child td { border-bottom: none; } tbody tr { transition: background .1s; } tbody tr:hover td { background: var(--parch2); } td strong, td .row-primary { font-weight: 600; color: var(--char); font-size: 13px; } td .row-secondary { display: block; font-size: 10px; color: var(--char3); font-family: var(--mono); margin-top: 1px; letter-spacing: .02em; } td.mono, .td-mono { font-family: var(--mono); } /* ── Estados vacíos mejorados ── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 10px; } .empty-state-icon { font-size: 32px; opacity: .5; line-height: 1; margin-bottom: 2px; } .empty-state-title { font-size: 13px; font-weight: 600; color: var(--char2); font-family: var(--serif); } .empty-state-sub { font-size: 11px; color: var(--char3); line-height: 1.5; max-width: 220px; } /* ── CHAT FLOTANTE ── */ #chat-float { position: fixed; bottom: 24px; right: 24px; z-index: 8800; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } #chat-float-panel { width: 336px; max-height: 440px; background: var(--parch); border: 1.5px solid var(--parch3); border-radius: var(--r2); box-shadow: 0 12px 40px rgba(26,20,16,.18), 0 2px 8px rgba(26,20,16,.1); display: flex; flex-direction: column; overflow: hidden; pointer-events: all; transform-origin: bottom right; transition: opacity .2s, transform .2s; } #chat-float-panel.hidden { opacity: 0; transform: scale(.95) translateY(8px); pointer-events: none; } .cf-head { padding: 11px 14px; background: var(--leather); color: var(--text-on-dark); display: flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: default; } .cf-head-title { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; font-family: var(--serif); } .cf-head-tags { display: flex; gap: 5px; font-size: 10px; font-family: var(--mono); opacity: .84; } .cf-pres { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 2px 7px; line-height: 1; } .cf-pres.on { border-color: rgba(232,146,74,.5); color: #ffd9bb; background: rgba(232,146,74,.15); } .cf-pres.dim { opacity: .8; } .cf-head-close { background: none; border: none; color: var(--text-on-dark); opacity: .7; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; transition: opacity .15s; } .cf-head-close:hover { opacity: 1; } #cf-pinned-bar { display: none; align-items: center; gap: 7px; background: rgba(200,98,42,.1); border-bottom: 1px solid var(--parch3); padding: 6px 10px; cursor: pointer; } #cf-pinned-bar.visible { display: flex; } .cf-pin-ico { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--gold); border: 1px solid rgba(200,98,42,.35); border-radius: 999px; padding: 2px 6px; background: rgba(200,98,42,.12); } .cf-pin-txt { min-width: 0; flex: 1; font-size: 12px; color: var(--char2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-body { flex: 1; overflow-y: auto; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 12px; background: var(--parch); min-height: 160px; } .cf-msg { max-width: 84%; display: flex; flex-direction: column; gap: 4px; } .cf-msg.mine { align-self: flex-end; align-items: flex-end; } .cf-msg.other { align-self: flex-start; align-items: flex-start; } .cf-bubble { padding: 9px 12px; border-radius: 12px; font-size: 13px; font-family: var(--sans); font-weight: 500; line-height: 1.45; word-break: break-word; } .cf-msg.mine .cf-bubble { background: var(--gold); color: #fff; border-radius: 12px 12px 3px 12px; } .cf-msg.other .cf-bubble { background: var(--parch2); border: 1.5px solid var(--parch3); color: var(--char); border-radius: 12px 12px 12px 3px; } .cf-meta { font-size: 11px; color: #85705e; font-family: var(--sans); font-weight: 500; line-height: 1.2; } .cf-read { font-size: 10px; margin-left: 4px; } .cf-read.sent { color: var(--char3); } .cf-read.seen { color: var(--gold); } .cf-sender { font-size: 12px; color: #5f4d3e; font-family: var(--sans); font-weight: 700; margin-bottom: 1px; letter-spacing: 0; text-transform: none; line-height: 1.2; } .cf-sep { text-align: center; font-size: 10px; color: #95816f; font-family: var(--mono); padding: 2px 0; } .cf-msg-actions { margin-top: 2px; display: flex; justify-content: flex-end; gap: 5px; } .cf-msg-actions.other { justify-content: flex-start; } .cf-msg-actions.mine { justify-content: flex-end; } .cf-act-btn { background: #efe5d8; border: 1px solid #d8c6b2; border-radius: 7px; width: 30px; height: 24px; padding: 0; font-size: 10px; color: #6a5644; display: inline-flex; align-items: center; justify-content: center; transition: all .16s ease; } .cf-act-btn:hover { background: #e7dac9; border-color: #cdb59e; color: #4f3f31; } .cf-act-ico { width: 12px; height: 12px; stroke-linecap: round; stroke-linejoin: round; } .cf-msg-actions.mine .cf-act-btn { background: rgba(200,98,42,.14); border-color: rgba(200,98,42,.38); color: #9e4e24; } .cf-msg-actions.mine .cf-act-btn:hover { background: rgba(200,98,42,.22); border-color: rgba(200,98,42,.48); color: #7d3d1b; } .cf-quote { border-left: 2px solid var(--gold); background: rgba(200,98,42,.08); border-radius: 6px; padding: 5px 7px; margin-bottom: 6px; } .cf-quote-autor { font-size: 9px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; } .cf-quote-texto { font-size: 10px; color: var(--char2); margin-top: 2px; } .cf-prod-card { border: 1px solid rgba(200,98,42,.35); background: rgba(200,98,42,.08); border-radius: 8px; padding: 7px 8px; } .cf-prod-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; } .cf-prod-name { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--char); } .cf-prod-info { margin-top: 2px; font-size: 10px; color: var(--char2); } .cf-footer { padding: 0; border-top: 1.5px solid var(--parch3); display: flex; flex-direction: column; gap: 0; align-items: stretch; flex-shrink: 0; background: var(--parch2); position: relative; } .cf-footer-row { display:flex; gap:6px; align-items:flex-end; padding:10px 12px; } #cf-reply-preview { display:none; align-items:center; gap:7px; padding:7px 10px 6px; border-bottom:1px solid var(--parch3); background: var(--parch); } #cf-reply-preview.visible { display:flex; } .cf-rp-bar { width:3px; border-radius:2px; align-self:stretch; background: var(--gold); } .cf-rp-body { flex:1; min-width:0; } .cf-rp-autor { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold); font-weight:700; } .cf-rp-texto { margin-top:2px; font-size:10px; color: var(--char2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cf-rp-close { border:none; background:none; color:var(--char3); font-size:16px; line-height:1; padding:0 3px; } #cf-prod-picker { position:absolute; left:0; right:0; bottom:100%; z-index:20; background:var(--parch); border:1.5px solid var(--parch3); border-radius:var(--r2) var(--r2) 0 0; box-shadow:0 -10px 26px rgba(26,20,16,.16); display:none; max-height:220px; overflow-y:auto; } #cf-prod-picker.visible { display:block; } #cf-prod-picker-search { width:100%; border:none; border-bottom:1px solid var(--parch3); background:var(--parch2); color:var(--char); padding:9px 10px; font-size:11px; outline:none; } .cf-pick-item { padding:9px 10px; border-bottom:1px solid var(--parch3); display:flex; justify-content:space-between; gap:8px; cursor:pointer; } .cf-pick-item:hover { background: rgba(200,98,42,.09); } .cf-pick-name { font-size:11px; color:var(--char); font-weight:600; } .cf-pick-meta { font-size:10px; color:var(--char3); } .cf-add-prod { width:34px; height:34px; border-radius:var(--r); border:1.5px solid var(--parch3); background:var(--parch); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .cf-input { flex: 1; background: var(--parch); border: 1.5px solid var(--parch3); color: var(--char); padding: 7px 10px; font-family: var(--sans); font-size: 13px; outline: none; border-radius: var(--r); resize: none; max-height: 80px; transition: border-color .15s; } .cf-input:focus { border-color: var(--gold); } .cf-send { width: 34px; height: 34px; background: linear-gradient(135deg, var(--gold), #e8924a); border: none; border-radius: var(--r); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s; } .cf-send:hover { opacity: .88; } .cf-send svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.5; } /* Botón flotante (burbuja) */ #chat-float-btn { width: 48px; height: 48px; background: linear-gradient(135deg, var(--gold), #e8924a); border: none; border-radius: 50%; box-shadow: 0 4px 16px rgba(200,98,42,.4); cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: all; transition: transform .15s, box-shadow .15s; position: relative; } #chat-float-btn:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(200,98,42,.5); } #chat-float-btn svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none; } #cf-badge { position: absolute; top: -3px; right: -3px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; font-family: var(--mono); min-width: 18px; height: 18px; border-radius: 9px; display: none; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--parch); } #cf-badge.visible { display: flex; } /* Ocultar en pantalla pequeña */ @media (max-width: 600px) { #chat-float { bottom: 16px; right: 16px; } #chat-float-panel { width: calc(100vw - 32px); } } /* ══════════════════════════════════════════ COSTOS ══════════════════════════════════════════ */ #page-costos { padding-bottom: 32px; } .costo-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .costo-kpi { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 20px 22px; position: relative; overflow: hidden; } .costo-kpi-label { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--char3); font-weight: 600; margin-bottom: 10px; font-family: var(--mono); } .costo-kpi-val { font-family: var(--mono); font-size: 26px; font-weight: 400; color: var(--char); line-height: 1; } .costo-kpi-sub { font-size: 10px; color: var(--char3); margin-top: 6px; } .costo-kpi-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } /* Chart */ .costo-chart-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 20px 24px; margin-bottom: 20px; } .costo-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .costo-chart-title { font-size: 13px; font-weight: 600; color: var(--char); } .costo-chart-legend { display: flex; gap: 14px; font-size: 11px; color: var(--char3); align-items: center; } .costo-leg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; flex-shrink: 0; } .costo-chart-wrap { position: relative; height: 200px; } /* Tabla */ .costo-table-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; } .costo-table-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1.5px solid var(--parch3); background: var(--parch2); gap: 12px; flex-wrap: wrap; } .costo-table-title { font-size: 13px; font-weight: 600; color: var(--char); white-space: nowrap; } .costo-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .costo-fsel { background: var(--parch); border: 1px solid var(--parch3); border-radius: 6px; color: var(--char2); font-size: 11px; padding: 4px 8px; font-family: var(--mono); } .costo-table { width: 100%; border-collapse: collapse; font-size: 13px; } .costo-table th { padding: 9px 16px; text-align: left; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--char3); font-family: var(--mono); border-bottom: 1.5px solid var(--parch3); white-space: nowrap; } .costo-table td { padding: 11px 16px; border-bottom: 1px solid var(--parch2); color: var(--char2); vertical-align: middle; } .costo-table tr:last-child td { border-bottom: none; } .costo-table tr:hover td { background: var(--parch2); } .costo-cat-pill { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; font-family: var(--mono); border: 1px solid; } .costo-monto { font-family: var(--mono); font-weight: 600; color: var(--char); white-space: nowrap; } .costo-edit, .costo-del { background: none; border: none; cursor: pointer; color: var(--char3); font-size: 14px; padding: 4px 6px; border-radius: 4px; line-height: 1; transition: all .12s; vertical-align: middle; } .costo-edit { color: var(--char3); } .costo-edit:hover { color: var(--blue); background: rgba(42,90,140,.09); } .costo-del:hover { color: var(--red); background: rgba(181,58,42,.08); } .costo-empty { text-align: center; padding: 36px 20px; color: var(--char3); font-size: 13px; } /* Desglose + Ranking */ .costo-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; } .costo-cat-chart-wrap { position: relative; height: 150px; margin: 4px 0 8px; } .costo-cat-legend { display: flex; flex-direction: column; gap: 6px; } .costo-cat-leg-item { display: flex; align-items: center; gap: 8px; font-size: 12px; } .costo-cat-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .costo-cat-leg-name { flex: 1; color: var(--char2); } .costo-cat-leg-pct { font-family: var(--mono); font-size: 10px; color: var(--char3); } .costo-cat-leg-amt { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--char); } .costo-rank-list { display: flex; flex-direction: column; gap: 0; } .costo-rank-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--parch2); font-size: 12px; } .costo-rank-item:last-child { border-bottom: none; } .costo-rank-num { width: 18px; height: 18px; border-radius: 50%; background: var(--parch2); border: 1px solid var(--parch3); font-size: 9px; font-family: var(--mono); font-weight: 700; color: var(--char3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .costo-rank-info { flex: 1; min-width: 0; } .costo-rank-desc { color: var(--char2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .costo-rank-meta { font-size: 10px; color: var(--char3); margin-top: 1px; } .costo-rank-monto { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--char); flex-shrink: 0; } @media (max-width: 800px) { .costo-2col { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 640px) { .costo-kpi-row { grid-template-columns: repeat(2, 1fr); } .costo-chart-card { padding: 14px 16px; } /* Donut en mobile: chart pequeño + leyenda al lado */ .costo-cat-mobile-wrap { display: flex; align-items: flex-start; gap: 14px; } .costo-cat-chart-wrap { height: 120px; width: 120px; flex-shrink: 0; margin: 0; } .costo-cat-legend { flex: 1; min-width: 0; gap: 5px; } .costo-cat-leg-amt { font-size: 10px; } .costo-table th:nth-child(4), .costo-table td:nth-child(4), .costo-table th:nth-child(5), .costo-table td:nth-child(5) { display: none; } .costo-rank-item { padding: 7px 0; } .costo-rank-monto { font-size: 11px; } } @media (max-width: 400px) { .costo-kpi-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════ COSTOS — Features 6-10 ══════════════════════════════════════════════════════ */ /* Feature 6: Selector de período */ .costo-period-bar { display:flex; align-items:center; gap:5px; margin-bottom:14px; flex-wrap:wrap; } .costo-period-tab { font-size:11px; padding:5px 13px; border-radius:20px; border:1px solid rgba(26,20,16,.15); background:transparent; color:var(--char3); cursor:pointer; transition:all .15s; font-weight:500; } .costo-period-tab.active { background:var(--char); color: var(--text-on-dark); border-color:var(--char); } .costo-period-tab:hover:not(.active) { background:var(--parch2); color:var(--char2); } .costo-period-range { font-size:10px; color:var(--char3); margin-left:auto; font-family:var(--mono); } /* Feature 7: Alertas por categoría */ .costo-alert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .costo-alert-item { padding:10px 12px; border:1px solid rgba(26,20,16,.08); border-radius:8px; background:var(--parch); } .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(--char2); } .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(--char3); } .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(--char3); 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(--parch); 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; } /* Feature 8: Análisis proveedores */ .costo-prov-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(26,20,16,.07); } .costo-prov-item:last-child { border-bottom:none; } .costo-prov-rank { font-size:11px; font-weight:700; color:var(--char3); width:16px; text-align:center; flex-shrink:0; } .costo-prov-info { flex:1; min-width:0; } .costo-prov-name { font-size:11px; font-weight:600; color:var(--char); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .costo-prov-meta { font-size:9px; color:var(--char3); margin-top:1px; } .costo-prov-bar-wrap { width:60px; height:4px; background:rgba(26,20,16,.1); border-radius:2px; flex-shrink:0; overflow:hidden; } .costo-prov-bar-fill { height:100%; background:rgba(200,98,42,.7); border-radius:2px; } .costo-prov-monto { font-size:11px; font-weight:700; font-family:var(--mono); color:var(--char); flex-shrink:0; min-width:65px; text-align:right; } /* Feature 9: Duplicar + Quick-add */ .costo-dup { background:none; border:none; cursor:pointer; color:var(--char3); padding:2px 4px; border-radius:4px; font-size:12px; transition:all .12s; vertical-align:middle; } .costo-dup:hover { color:var(--blue); background:rgba(42,90,140,.1); } .costo-quick-section { background:rgba(42,90,140,.05); border:1px dashed rgba(42,90,140,.25); border-radius:8px; padding:10px 14px; margin-bottom:10px; } .costo-quick-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--blue); margin-bottom:8px; } .costo-quick-list { display:flex; flex-wrap:wrap; gap:5px; } .costo-quick-btn { font-size:11px; padding:4px 10px; border-radius:6px; border:1px solid rgba(42,90,140,.25); background:var(--parch); color:var(--char2); cursor:pointer; transition:all .12s; display:flex; align-items:center; gap:4px; } .costo-quick-btn:hover { background:var(--char); color: var(--text-on-dark); border-color:var(--char); } /* Feature 10: Vista Calendario */ .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(--char3); 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(--parch); 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(200,98,42,.07); border-color:rgba(200,98,42,.2); } .costo-cal-day.today { border-color:var(--gold) !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(--char3); font-weight:500; } .costo-cal-day.today .costo-cal-num { color:var(--gold); font-weight:700; } .costo-cal-amt { font-size:9px; font-family:var(--mono); font-weight:600; color:rgba(200,98,42,.85); margin-top:2px; line-height:1.2; word-break:break-all; } .costo-cal-clear { font-size:10px; color:var(--char3); margin-top:6px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; } @media (max-width:640px) { .costo-alert-grid { grid-template-columns:1fr 1fr; } .costo-period-range { display:none; } .costo-prov-bar-wrap { display:none; } .costo-cal-day { min-height:32px; } .costo-cal-amt { font-size:8px; } } @media (max-width:400px) { .costo-alert-grid { grid-template-columns:1fr; } } /* ══════════════════════════════════════════════════════ COSTOS — Features 1-5 ══════════════════════════════════════════════════════ */ /* Feature 1: Comparación mes */ .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-row:last-child { border-bottom:none; } .costo-comp-label { font-size:11px; color:var(--char3); flex:1; } .costo-comp-vals { display:flex; align-items:center; gap:10px; } .costo-comp-prev { font-size:11px; color:var(--char3); 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-up { background:rgba(45,122,79,.12); color:var(--green); } .costo-delta-down { background:rgba(181,58,42,.1); color:var(--red); } .costo-delta-neu { background:rgba(26,20,16,.07); color:var(--char3); } .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(--char3); } .costo-comp-month-lbl span { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; } /* Feature 2: Proyección */ .costo-proj-stat { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; } .costo-proj-stat-label { font-size:11px; color:var(--char3); } .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 { font-size:11px; padding:7px 10px; border-radius:7px; margin-top:6px; line-height:1.45; } .costo-proj-alert.ok { background:rgba(45,122,79,.1); color:var(--green); } .costo-proj-alert.warn { background:rgba(160,98,10,.1); color:var(--amber); } .costo-proj-alert.danger { background:rgba(181,58,42,.1); color:var(--red); } .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(--char3); 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(--parch); 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-proj-divider { margin:8px 0; border:none; border-top:1px solid rgba(26,20,16,.08); } /* Feature 3: Resumen por sucursal */ .costo-suc-table { width:100%; border-collapse:collapse; font-size:12px; } .costo-suc-table th { font-size:9px; font-weight:700; color:var(--char3); 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(--char2); 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(42,90,140,.12); color:rgba(42,90,140,.9); } .costo-suc-tag.l2 { background:rgba(200,98,42,.12); color:rgba(200,98,42,.9); } .costo-suc-pos { color:var(--green) !important; } .costo-suc-neg { color:var(--red) !important; } /* Feature 4: Recurrentes */ .costo-rec-badge { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:600; color:var(--blue); background:rgba(42,90,140,.1); border-radius:4px; padding:1px 5px; margin-left:4px; vertical-align:middle; } .costo-filter-tabs { display:flex; gap:4px; } .costo-filter-tab { font-size:11px; padding:4px 11px; border-radius:6px; border:1px solid rgba(26,20,16,.15); background:transparent; color:var(--char3); cursor:pointer; transition:all .15s; } .costo-filter-tab.active { background:var(--char); color: var(--text-on-dark); border-color:var(--char); } .costo-rec-check-row { display:flex; align-items:center; gap:8px; padding:8px 0 2px; } .costo-rec-check-row input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--char); } .costo-rec-check-row label { font-size:12px; color:var(--char2); cursor:pointer; } /* Feature 5: Export */ .costo-export-btn { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:5px 11px; border-radius:7px; border:1px solid rgba(26,20,16,.18); background:var(--parch2); color:var(--char2); cursor:pointer; transition:all .15s; white-space:nowrap; } .costo-export-btn:hover { background:var(--char); color: var(--text-on-dark); border-color:var(--char); } .costo-table-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* ══════════════════════════════════════════ COSTOS · El Libro de Cuentas · v7.0 Austere, precise — expenses as accounting ══════════════════════════════════════════ */ #page-costos { padding-bottom: 40px; } /* ── KPI Cards ── */ #page-costos .costo-kpi-row { gap: 10px; margin-bottom: 18px; } #page-costos .costo-kpi { background: #ffffff; border: 1px solid rgba(26,20,16,0.08); border-top: 2px solid transparent; border-radius: 0 0 8px 8px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(26,20,16,0.04); transition: border-top-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui), transform var(--motion-fast) var(--ease-ui); } #page-costos .costo-kpi:hover { border-top-color: rgba(200,98,42,0.55); box-shadow: 0 6px 20px rgba(26,20,16,0.08); transform: translateY(-1px); } /* Barra lateral de color por categoría */ #page-costos .costo-kpi-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 0; } #page-costos .costo-kpi-label { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--t4); font-weight: 500; margin-bottom: 11px; } #page-costos .costo-kpi-val { font-family: var(--serif); font-size: 28px; font-weight: 700; font-style: italic; letter-spacing: -0.04em; line-height: 1; color: var(--t1); } #page-costos .costo-kpi-sub { font-family: var(--mono); font-size: 9.5px; color: var(--t3); margin-top: 7px; letter-spacing: 0.02em; } /* ── Selector de período ── */ #page-costos .costo-period-bar { gap: 4px; margin-bottom: 16px; align-items: center; } #page-costos .costo-period-tab { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 14px; border-radius: 4px; border: 1px solid rgba(26,20,16,0.10); background: transparent; color: var(--t3); cursor: pointer; font-weight: 500; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui); } #page-costos .costo-period-tab:hover:not(.active) { background: rgba(26,20,16,0.04); color: var(--t2); } #page-costos .costo-period-tab.active { background: #1a1410; color: rgba(240,230,214,0.88); border-color: #1a1410; } #page-costos .costo-period-range { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-left: auto; letter-spacing: 0.06em; } /* ── Chart card ── */ #page-costos .costo-chart-card { background: #ffffff; border: 1px solid rgba(26,20,16,0.08); border-radius: 8px; padding: 18px 22px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(26,20,16,0.04); } #page-costos .costo-chart-head { margin-bottom: 18px; } #page-costos .costo-chart-title { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t3); font-weight: 500; } #page-costos .costo-chart-legend { font-family: var(--mono); font-size: 9.5px; color: var(--t4); gap: 16px; } /* ── 2-col (donut + ranking) ── */ #page-costos .costo-2col { gap: 12px; margin-bottom: 16px; } #page-costos .costo-cat-leg-name { font-size: 12px; color: var(--t2); } #page-costos .costo-cat-leg-pct { font-family: var(--mono); font-size: 9.5px; color: var(--t4); } #page-costos .costo-cat-leg-amt { font-family: var(--serif); font-size: 13px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } /* ── Ranking ── */ #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-rank-meta { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 2px; } #page-costos .costo-rank-monto { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } /* ── Tabla de gastos ── */ #page-costos .costo-table-card { background: #ffffff; border: 1px solid rgba(26,20,16,0.08); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(26,20,16,0.04); } #page-costos .costo-table-head { background: #faf7f2; border-bottom: 1px solid rgba(26,20,16,0.07); padding: 13px 18px 11px; } #page-costos .costo-table-title { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t3); font-weight: 500; } #page-costos .costo-fsel { background: rgba(255,255,255,0.80); border: 1px solid rgba(26,20,16,0.12); border-radius: 5px; color: var(--t2); font-family: var(--mono); font-size: 9.5px; padding: 5px 9px; transition: border-color var(--motion-fast) var(--ease-ui); } #page-costos .costo-fsel:focus { border-color: var(--gold); outline: none; } #page-costos .costo-table th { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; 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:last-child td { border-bottom: none; } #page-costos .costo-table tr:hover td { background: rgba(245,239,230,0.60); } #page-costos .costo-monto { font-family: var(--serif); font-size: 15px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } #page-costos .costo-cat-pill { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.10em; padding: 3px 8px; border-radius: 3px; } #page-costos .costo-edit, #page-costos .costo-del, #page-costos .costo-dup { border-radius: 4px; padding: 3px 6px; font-size: 13px; transition: 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; } /* ── Alertas de presupuesto ── */ #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: 16px; 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-bar-fill { 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(--gold); 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; } /* ── Proveedores ── */ #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-prov-meta { font-family: var(--mono); font-size: 9px; color: var(--t4); margin-top: 2px; } #page-costos .costo-prov-bar-fill { background: rgba(200,98,42,0.55); border-radius: 2px; } #page-costos .costo-prov-monto { font-family: var(--serif); font-size: 13px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } /* ── Comparación meses ── */ #page-costos .costo-comp-label { font-size: 12px; color: var(--t2); } #page-costos .costo-comp-prev { font-family: var(--mono); font-size: 11px; color: var(--t4); } #page-costos .costo-comp-curr { font-family: var(--serif); font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } #page-costos .costo-delta { font-family: var(--mono); font-size: 9px; font-weight: 700; border-radius: 3px; padding: 2px 6px; letter-spacing: 0.04em; } /* ── Proyección ── */ #page-costos .costo-proj-stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em; color: var(--t3); text-transform: uppercase; } #page-costos .costo-proj-stat-val { font-family: var(--serif); font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: -0.02em; color: var(--t1); } #page-costos .costo-proj-bar-wrap { height: 6px; background: rgba(26,20,16,0.08); border-radius: 2px; } #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; } /* ── Filtros tabs ── */ #page-costos .costo-filter-tabs { gap: 4px; } #page-costos .costo-filter-tab { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; border: 1px solid rgba(26,20,16,0.10); color: var(--t3); background: transparent; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } #page-costos .costo-filter-tab.active { background: #1a1410; color: rgba(240,230,214,0.88); border-color: #1a1410; } /* ── Export btn ── */ #page-costos .costo-export-btn { 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.12); color: var(--t3); border-radius: 5px; padding: 6px 12px; transition: background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui); } #page-costos .costo-export-btn:hover { background: #1a1410; color: rgba(240,230,214,0.88); border-color: #1a1410; } /* ── Calendario de gastos ── */ #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(200,98,42,0.06); border-color: rgba(200,98,42,0.18); } #page-costos .costo-cal-day.today { border-color: var(--gold) !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(--gold); font-weight: 700; } #page-costos .costo-cal-amt { font-family: var(--mono); font-size: 9px; font-weight: 600; color: rgba(200,98,42,0.80); margin-top: 2px; } /* ── Acciones rápidas (quick-add) ── */ #page-costos .costo-quick-section { background: rgba(42,90,140,0.04); border: 1px dashed rgba(42,90,140,0.20); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; } #page-costos .costo-quick-title { font-family: var(--mono); font-size: 8px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--blue); font-weight: 600; margin-bottom: 8px; } #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; } /* Dashboard v4.3.46 - Reestructura UX/UI */ #page-dashboard { background: linear-gradient(180deg, var(--parch) 0%, var(--parch2) 100%); } #page-dashboard .dash-time { font-size: 46px; font-style: normal; letter-spacing: -0.02em; } #page-dashboard .dash-greeting-summary { white-space: normal; overflow: visible; text-overflow: initial; max-width: 70ch; color: var(--char2); } #page-dashboard .dash-action-primary { border-radius: 10px; box-shadow: none; font-size: 12px; letter-spacing: 0.04em; } #page-dashboard .dash-action-primary:hover { box-shadow: none; } #page-dashboard .dash-action-sec { border-radius: 8px; font-size: 10px; } #page-dashboard .dash-mobile-actions { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; } #page-dashboard .dma-btn { border: 1px solid rgba(205, 188, 165, 0.9); background: var(--parch); color: var(--char2); border-radius: 8px; min-height: 34px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--sans); cursor: pointer; } #page-dashboard .dma-btn.dma-primary { background: #2a241d; color: #fff; border-color: #2a241d; } /* KPIs: ventas protagonista, secundarios a la derecha */ #page-dashboard .dash-kpi-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "ventas ventas ventas ventas ventas ventas ventas ventas ticket ticket ticket ticket" "ventas ventas ventas ventas ventas ventas ventas ventas venc venc venc venc"; gap: 10px; margin-bottom: 10px; } #page-dashboard .dash-kpi-grid > :nth-child(1) { grid-area: ventas; } #page-dashboard .dash-kpi-grid > :nth-child(2) { grid-area: venc; } #page-dashboard .dash-kpi-grid > :nth-child(3) { grid-area: ticket; } #page-dashboard .dash-kpi, #page-dashboard .dash-kpi-ventas { background: var(--parch); border: 1px solid rgba(205, 188, 165, 0.92); border-radius: 12px; box-shadow: none; padding: 14px 15px; } #page-dashboard .dash-kpi::before, #page-dashboard .dash-kpi-ventas::before, #page-dashboard .dash-kpi-accent, #page-dashboard .dash-kpi-deco { display: none !important; } #page-dashboard .dash-kpi[onclick]:hover, #page-dashboard .dash-kpi.clickable:hover, #page-dashboard .dash-kpi-ventas:hover { transform: none; box-shadow: none; border-color: rgba(200, 98, 42, 0.42); } /* ── Vencimientos KPI: borde estático según estado (sin animación) ─── */ #page-dashboard #ds-venc-cell.venc-alert-critical { --venc-edge: rgba(181, 58, 42, 0.55); box-shadow: inset 0 0 0 1px var(--venc-edge); } #page-dashboard #ds-venc-cell.venc-alert-warn { --venc-edge: rgba(200, 98, 42, 0.46); box-shadow: inset 0 0 0 1px var(--venc-edge); } #page-dashboard #ds-venc-cell.venc-alert-ok { --venc-edge: rgba(45, 122, 79, 0.36); box-shadow: inset 0 0 0 1px var(--venc-edge); } #page-dashboard .dash-kpi-label { font-size: 9px; letter-spacing: 0.12em; margin-bottom: 7px; } #page-dashboard .dash-kpi-value, #page-dashboard .dash-kpi-ventas .dash-kpi-value { font-size: 34px; font-style: normal; font-weight: 500; letter-spacing: -0.01em; } #page-dashboard .dash-kpi-sub, #page-dashboard .dash-kpi-ventas .dash-kpi-kg { font-size: 10px; color: var(--char2); } #page-dashboard #ds-sparkline { opacity: 0.42; } /* Cuerpo: secuencia operativa */ #page-dashboard .dash-body-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.85fr; grid-template-areas: "sesion stock tools"; gap: 10px; align-items: start; } #page-dashboard .dash-body-grid > .dash-panel:nth-child(1) { grid-area: stock; } #page-dashboard .dash-body-grid > .dash-panel:nth-child(2) { grid-area: sesion; } #page-dashboard .dash-body-grid > .dash-tools-stack { grid-area: tools; } #page-dashboard .dash-tools-stack { position: sticky; top: 10px; } #page-dashboard .dash-panel { background: var(--card-bg); border: 1px solid rgba(205, 188, 165, 0.92); border-radius: 12px; box-shadow: none; } #page-dashboard .dash-panel-head { background: var(--card-bg-alt); border-bottom: 1px solid rgba(205, 188, 165, 0.92); padding: 11px 14px 10px; } #page-dashboard .dash-panel-title { font-size: 10px; letter-spacing: 0.14em; } #page-dashboard .dash-panel-sub { font-size: 10px; } #page-dashboard .dash-stock-table td, #page-dashboard .dash-sesion-item { padding-top: 11px; padding-bottom: 11px; } #page-dashboard .dash-sesion-prod, #page-dashboard .dash-venc-nombre, #page-dashboard .nota-texto, #page-dashboard .tarea-texto { font-weight: 500; } @media (max-width: 1120px) { #page-dashboard .dash-body-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "sesion stock" "tools tools"; } #page-dashboard .dash-tools-stack { position: static; } } @media (max-width: 960px) { #page-dashboard .dash-header { gap: 14px; } #page-dashboard .dash-time { font-size: 34px; } #page-dashboard .dash-greeting-name { font-size: 16px; } #page-dashboard .dash-kpi-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "ventas ventas" "venc ticket"; } #page-dashboard .dash-kpi-value, #page-dashboard .dash-kpi-ventas .dash-kpi-value { font-size: 28px; } #page-dashboard .dash-body-grid { grid-template-columns: 1fr; grid-template-areas: "sesion" "stock" "tools"; } } @media (max-width: 600px) { #page-dashboard .dash-header-actions { display: none; } #page-dashboard .dash-header { gap: 10px; } #page-dashboard .dash-time { font-size: 28px; } #page-dashboard .dash-status-dot { font-size: 9px; padding: 3px 7px; } #page-dashboard .dash-greeting-name { font-size: 14px; } #page-dashboard .dash-greeting-summary { font-size: 10px; line-height: 1.35; } #page-dashboard .dash-mobile-actions { display: grid; } #page-dashboard .dash-kpi { padding: 10px 11px; border-radius: 10px; } #page-dashboard .dash-kpi-label { letter-spacing: 0.1em; margin-bottom: 5px; } #page-dashboard .dash-kpi-value, #page-dashboard .dash-kpi-ventas .dash-kpi-value { font-size: 24px; } #page-dashboard .dash-kpi-sub, #page-dashboard .dash-kpi-ventas .dash-kpi-kg, #page-dashboard .dash-kpi-trend { font-size: 9px; } #page-dashboard #ds-sparkline { display: none; } #page-dashboard #ds-medios { gap: 4px !important; margin-top: 7px !important; } #page-dashboard .dash-kpi-grid { display: flex !important; flex-direction: column; margin-left: 0; margin-right: 0; gap: 8px; } #page-dashboard .dash-kpi, #page-dashboard .dash-kpi-ventas { width: 100%; border-radius: 10px; border-left: 1px solid rgba(205, 188, 165, 0.92); border-right: 1px solid rgba(205, 188, 165, 0.92); padding-left: 11px; padding-right: 11px; } #page-dashboard .dash-body-grid { gap: 8px; } #page-dashboard .dash-panel { border-radius: 10px; } #page-dashboard .dash-panel-head { padding: 9px 10px 8px; } #page-dashboard .dash-panel-sub { font-size: 9px; } #page-dashboard .dash-stock-table td, #page-dashboard .dash-sesion-item, #page-dashboard .nota-item, #page-dashboard .tarea-item { padding-left: 10px; padding-right: 10px; } } @media (max-width: 420px) { #page-dashboard .dash-mobile-actions { grid-template-columns: 1fr 1fr; } } /* DASHBOARD · pass final de consistencia */ #page-dashboard { background: linear-gradient(180deg, var(--parch) 0%, var(--parch2) 100%); } #page-dashboard .dash-time { font-weight: 420; } #page-dashboard .dash-kpi-grid { gap: 12px; margin-bottom: 12px; } #page-dashboard .dash-kpi, #page-dashboard .dash-kpi-ventas { background: var(--surface-0); border-color: var(--line-strong); } #page-dashboard .dash-kpi-label { color: var(--text-meta); } #page-dashboard .dash-kpi-value, #page-dashboard .dash-kpi-ventas .dash-kpi-value { letter-spacing: -0.02em; } #page-dashboard .dash-kpi-sub, #page-dashboard .dash-kpi-ventas .dash-kpi-kg { color: var(--text-meta); } #page-dashboard .dash-body-grid { gap: 12px; } #page-dashboard .dash-panel { background: var(--surface-0); border-color: var(--line-strong); } #page-dashboard .dash-panel-head { background: var(--surface-1); border-bottom-color: var(--line-soft); } #page-dashboard .dash-panel-title { color: var(--char); } #page-dashboard .dash-panel-sub { color: var(--text-meta); } #page-dashboard .dash-panel-action { border-color: var(--line-strong); background: var(--surface-0); } #page-dashboard .dash-stock-table tr, #page-dashboard .dash-tl-item, #page-dashboard .dash-sesion-item, #page-dashboard .nota-item, #page-dashboard .tarea-item { border-bottom-color: var(--line-soft); } #page-dashboard .dash-stock-table tr:hover td, #page-dashboard .dash-tl-item:hover, #page-dashboard .dash-sesion-item:hover, #page-dashboard .nota-item:hover, #page-dashboard .tarea-item:hover { background: rgba(200, 98, 42, 0.06); } #page-dashboard .dash-sesion-meta, #page-dashboard .dash-tl-meta, #page-dashboard .dash-tl-hora, #page-dashboard .nota-meta { color: var(--text-meta); } #page-dashboard .nota-input-area, #page-dashboard .tarea-input-row { background: var(--surface-1); } #page-dashboard .nota-input-area textarea, #page-dashboard .tarea-input-row input[type="text"], #page-dashboard .tarea-tipo-sel { background: var(--surface-0); border-color: var(--line-strong); } @media (max-width: 960px) { #page-dashboard .dash-kpi-grid, #page-dashboard .dash-body-grid { gap: 10px; } } /* ══════════════════════════════════════════════ CARGA MASIVA · La Tolva · v7.0 Industrial precision — the stockroom manifest ══════════════════════════════════════════════ */ #page-carga { padding-bottom: 40px; } /* ── Page Header ── */ #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; } /* ── Filter Bar ── */ #page-carga > div:has(#carga-local) { background: #ffffff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px !important; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(26,20,16,0.04); } /* Labels inside filter bar */ #page-carga > div:has(#carga-local) > div > div:first-child { font-family: var(--mono) !important; font-size: 8.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--t3) !important; margin-bottom: 5px !important; } /* Inline label on checkbox */ #page-carga label { font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--t2) !important; } /* ── All inputs/selects (global) ── */ #page-carga select, #page-carga input[type="text"], #page-carga input[type="date"], #page-carga input[type="number"] { background: var(--input-bg) !important; border: 1px solid var(--input-border) !important; border-radius: var(--input-radius) !important; color: var(--t1) !important; font-family: var(--sans) !important; font-size: 13px !important; min-height: var(--input-h) !important; padding: 0 12px !important; box-shadow: var(--input-shadow) !important; outline: none !important; transition: border-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui); } #page-carga select:focus, #page-carga input[type="text"]:focus, #page-carga input[type="date"]:focus, #page-carga input[type="number"]:focus { border-color: var(--input-border-focus) !important; box-shadow: var(--input-shadow), 0 0 0 3px var(--ember-bg) !important; } #page-carga input[type="checkbox"] { min-height: unset !important; width: 15px !important; height: 15px !important; padding: 0 !important; box-shadow: none !important; border: none !important; accent-color: var(--ember); } /* ── Global Broadcast Panel ── */ #page-carga > div:has(#carga-base-global) { background: #1a1410 !important; border: 1px solid rgba(200,98,42,0.20) !important; border-top: 2px solid rgba(200,98,42,0.72) !important; border-radius: 10px !important; padding: 16px 20px !important; margin-bottom: 18px !important; 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(200,98,42,0.16) 0%, transparent 68%); pointer-events: none; } /* Broadcast label (first div child) */ #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 !important; text-transform: uppercase !important; color: rgba(200,98,42,0.90) !important; margin-bottom: 5px !important; } /* Broadcast subtitle */ #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 !important; } /* Inputs inside broadcast panel override the global rule */ #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(200,98,42,0.22) !important; border-radius: 8px !important; color: rgba(240,230,214,0.88) !important; min-height: 36px !important; 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(200,98,42,0.72) !important; box-shadow: 0 0 0 3px rgba(200,98,42,0.12) !important; } /* Sub-labels inside broadcast inputs */ #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 !important; text-transform: uppercase !important; color: rgba(240,230,214,0.38) !important; margin-bottom: 4px !important; } /* ── Table Wrap ── */ #page-carga #carga-tabla-wrap { border: 1px solid var(--line-soft) !important; border-radius: 10px !important; background: #ffffff !important; overflow: auto !important; 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% !important; border-collapse: collapse !important; font-size: 13px !important; } /* ── Table Head ── */ #page-carga #carga-tabla-content thead tr { border-bottom: 1.5px solid rgba(200,98,42,0.30) !important; } /* th: override inline style completely with !important */ #page-carga #carga-tabla-content th { background: #1a1410 !important; font-family: var(--mono) !important; font-size: 8.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(240,230,214,0.56) !important; font-weight: 500 !important; padding: 11px 14px !important; white-space: nowrap !important; border-bottom: none !important; } /* ── Table Rows ── */ #page-carga #carga-tabla-content tr { border-bottom: 1px solid var(--line-soft) !important; } #page-carga #carga-tabla-content tbody tr:last-child { border-bottom: none !important; } /* td: !important on background and padding to beat inline style="padding:10px" */ #page-carga #carga-tabla-content td { padding: 12px 14px !important; 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(200,98,42,0.04) !important; } /* Product name — serif bold italic (beats inline color:var(--char)) */ #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 !important; line-height: 1.2 !important; } /* Category · unit · PLU (beats inline color:var(--char3)) */ #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 !important; text-transform: uppercase !important; color: var(--t3) !important; margin-top: 2px !important; } /* Current qty column — mono, right-ish */ #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; } /* ── Row-level inputs (tighter than global) ── */ #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"]) { background: var(--surface-1) !important; border: 1px solid var(--input-border) !important; border-radius: 8px !important; color: var(--t1) !important; font-family: var(--mono) !important; font-size: 12px !important; min-height: 34px !important; padding: 0 8px !important; box-shadow: var(--input-shadow) !important; outline: none !important; transition: border-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui); } #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 { border-color: var(--input-border-focus) !important; box-shadow: var(--input-shadow), 0 0 0 3px var(--ember-bg) !important; } #page-carga #carga-tabla-content select { background: var(--surface-1) !important; border: 1px solid var(--input-border) !important; border-radius: 8px !important; color: var(--t1) !important; font-family: var(--sans) !important; font-size: 12px !important; min-height: 34px !important; padding: 0 8px !important; box-shadow: var(--input-shadow) !important; outline: none !important; transition: border-color var(--motion-fast) var(--ease-ui); } #page-carga #carga-tabla-content select:focus { border-color: var(--input-border-focus) !important; box-shadow: 0 0 0 3px var(--ember-bg) !important; } /* Preview expiry date */ #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; } /* Unit label next to qty input */ #page-carga #carga-tabla-content span { font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: var(--t3) !important; } /* ── Summary Bar ── */ #page-carga #carga-resumen { margin-top: 14px; padding: 13px 18px !important; background: #ffffff !important; border: 1px solid var(--line-soft) !important; border-radius: 10px !important; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--t2) !important; box-shadow: 0 2px 8px rgba(26,20,16,0.04); display: flex; align-items: center; gap: 8px; } #page-carga #carga-resumen strong { font-family: var(--serif); font-size: 16px; font-weight: 700; font-style: italic; color: var(--t1); letter-spacing: -0.02em; } /* ── Empty state ── */ #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; } /* ── Responsive ── */ @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; } } /* === CLIENTES / ESTILO PEDIDO SOBRIO === */ #page-clientes .ph { margin-bottom: 12px; padding: 14px 16px; border-radius: var(--r2); border: 1.5px solid var(--parch3); background: var(--parch2); } #page-clientes .ph-title { color: var(--char); letter-spacing: 0.01em; } #page-clientes .ph-sub { color: var(--char2); letter-spacing: 0.1em; } .cli-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .cli-stat { border-radius: var(--r2); border: 1.5px solid var(--parch3); padding: 11px 13px; background: var(--parch); transition: border-color .16s ease; } .cli-stat:hover { border-color: var(--gold-ln); } .cli-stat-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--char3); margin-bottom: 5px; font-weight: 500; } .cli-stat-value { font-family: var(--mono); font-size: 19px; color: var(--char); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-weight: 500; } .cli-table-wrap { border-radius: var(--r2); overflow: hidden; border: 1.5px solid var(--parch3); background: var(--parch); } .cli-table-wrap .table-bar { background: var(--parch2); border-bottom: 1px solid var(--parch3); } .cli-table-wrap .table-bar input { border: 1.5px solid var(--parch3); background: var(--parch); color: var(--char); font-family: var(--mono); font-size: 11px; } .cli-table-wrap .table-bar input:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); } .cli-table-wrap table thead th { background: var(--parch2); color: var(--char2); letter-spacing: 0.08em; } .cli-table-wrap table tbody td { border-bottom: 1px solid rgba(217, 204, 186, 0.75); } .cli-table-wrap table tbody tr:nth-child(odd) { background: rgba(245, 239, 230, 0.2); } .cli-table-wrap table tbody tr:nth-child(even) { background: rgba(245, 239, 230, 0.06); } .cli-table-wrap table tbody tr:hover td { background: rgba(237, 228, 215, 0.5) !important; } #page-clientes .row-primary { color: var(--char); } #page-clientes .row-secondary { color: var(--char3); } #page-clientes .btn-icon { border: 1.5px solid var(--parch3); background: var(--parch2); box-shadow: none; } #page-clientes .btn-icon:hover { border-color: var(--gold-ln); background: rgba(200, 98, 42, 0.08); } @media (prefers-reduced-motion: reduce) { #page-clientes .cli-stat, #page-clientes .btn-icon { transition: none; } } @media (max-width: 980px) { .cli-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } } @media (max-width: 640px) { #page-clientes .ph { padding: 11px 11px; border-radius: var(--r); } .cli-overview { grid-template-columns: 1fr; gap: 8px; } .cli-stat { padding: 10px 11px; border-radius: var(--r); } .cli-stat-value { font-size: 17px; } .cli-table-wrap { border-radius: var(--r); } .cli-table-wrap table { min-width: 940px; } } /* CLIENTES · pass jerarquía + respiración */ #page-clientes .ph, #page-clientes .cli-stat, #page-clientes .cli-table-wrap { border-color: var(--line-strong); } #page-clientes .ph { background: var(--surface-1); } #page-clientes .ph-sub { color: var(--text-meta); } #page-clientes .cli-overview { gap: 12px; margin-bottom: 16px; } #page-clientes .cli-stat { background: var(--surface-0); padding: 12px 14px; } #page-clientes .cli-stat-label { color: var(--text-meta); } #page-clientes .cli-stat-value { font-size: 21px; font-weight: 620; } #page-clientes .cli-table-wrap { background: var(--surface-0); } #page-clientes .cli-table-wrap .table-bar { background: var(--surface-1); border-bottom-color: var(--line-soft); padding: 10px 12px; } #page-clientes .cli-table-wrap .table-bar input { min-height: 40px; border-color: var(--line-strong); background: var(--surface-0); font-family: var(--sans); font-size: 12px; } #page-clientes .cli-table-wrap table thead th { background: rgba(236, 223, 207, 0.92); color: var(--text-meta); letter-spacing: 0.1em; font-size: 10px; padding-top: 12px; padding-bottom: 12px; } #page-clientes .cli-table-wrap table tbody td { border-bottom-color: var(--line-soft); padding-top: 13px; padding-bottom: 13px; } #page-clientes .cli-table-wrap table tbody tr:nth-child(odd), #page-clientes .cli-table-wrap table tbody tr:nth-child(even) { background: transparent; } #page-clientes .cli-table-wrap table tbody tr:hover td { background: rgba(200, 98, 42, 0.06) !important; } #page-clientes .cli-client-name { font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--char); } #page-clientes .cli-client-meta { margin-top: 4px; font-size: 11px; line-height: 1.38; color: var(--text-meta); } #page-clientes .cli-contact-stack { display: flex; flex-direction: column; gap: 4px; } #page-clientes .cli-whatsapp, #page-clientes .cli-email { font-size: 12px; color: var(--char); } #page-clientes .cli-contact-muted { font-size: 11px; color: var(--text-meta); } #page-clientes .cli-activity-main { font-size: 13px; font-weight: 620; color: var(--char); } #page-clientes .cli-activity-sub { margin-top: 3px; font-size: 11px; color: var(--text-meta); } #page-clientes .cli-points, #page-clientes .cli-caja { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--char); letter-spacing: -0.015em; } #page-clientes .cli-points-sub, #page-clientes .cli-caja-sub { margin-top: 3px; font-size: 10px; color: var(--text-meta); } #page-clientes .cli-gestion, #page-clientes .cli-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } #page-clientes .cli-gestion .btn-ghost { font-size: 10px !important; padding: 5px 10px !important; } #page-clientes .cli-actions .btn-icon { width: 29px; height: 29px; } @media (max-width: 640px) { #page-clientes .cli-stat-value { font-size: 18px; } #page-clientes .cli-client-name { font-size: 14px; } } /* === FIDELIZACION / SISTEMA PREMIUM === */ .fid-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .fid-kpi { background: #f3ecdf; border: 1px solid rgba(205, 188, 165, 0.84); border-radius: 12px; padding: 10px 12px; } .fid-kpi-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--char3); margin-bottom: 3px; } .fid-kpi-val { font-family: var(--mono); font-size: 20px; color: var(--char); } .fid-levels { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; } .fid-level-chip { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; background: #f2eadc; border: 1px solid rgba(205, 188, 165, 0.75); color: var(--char2); border-radius: 999px; padding: 4px 9px; } .fid-level-chip.muted { color: var(--char3); } .fid-table-wrap { border: 1px solid rgba(205, 188, 165, 0.84); border-radius: 14px; overflow: hidden; } .fid-table-wrap .table-bar { background: var(--parch); border-bottom: 1px solid rgba(205, 188, 165, 0.7); } .fid-table-wrap table thead th { background: #f2eadc; } .fid-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .fid-insight-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; margin-bottom: 10px; } .fid-card { background: #f7f1e7; border: 1px solid rgba(205, 188, 165, 0.86); border-radius: 12px; overflow: hidden; } .fid-card-head { padding: 10px 12px; border-bottom: 1px solid rgba(205, 188, 165, 0.75); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fid-card-title { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--char2); font-weight: 700; } .fid-card-body { padding: 9px 10px; } .fid-item { border-bottom: 1px solid rgba(205, 188, 165, 0.62); padding: 8px 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .fid-item:last-child { border-bottom: none; } .fid-item-title { color: var(--char); font-size: 12px; font-weight: 600; } .fid-item-sub { color: var(--char3); font-size: 10px; font-family: var(--mono); margin-top: 2px; } .fid-item-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .fid-chart-row { display: grid; grid-template-columns: 90px 1fr 62px; gap: 8px; align-items: center; margin-bottom: 7px; } .fid-chart-row:last-child { margin-bottom: 0; } .fid-chart-lbl { font-size: 10px; color: var(--char2); text-transform: uppercase; letter-spacing: 0.08em; } .fid-chart-track { position: relative; height: 10px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(205, 188, 165, 0.72); background: #efe7d8; } .fid-chart-fill { height: 100%; border-radius: 999px; min-width: 2px; transition: width .28s ease; } .fid-chart-fill.p1 { background: linear-gradient(90deg, #8f7a62, #b19a7f); } .fid-chart-fill.p2 { background: linear-gradient(90deg, #b38b43, #d6ab55); } .fid-chart-fill.p3 { background: linear-gradient(90deg, #b07a36, #d2a25f); } .fid-chart-fill.ok { background: linear-gradient(90deg, #617f54, #7f9f69); } .fid-chart-fill.warn { background: linear-gradient(90deg, #9f6842, #bc875a); } .fid-chart-fill.dim { background: linear-gradient(90deg, #8f8473, #aaa08f); } .fid-chart-val { text-align: right; color: var(--char3); font-size: 10px; font-family: var(--mono); } .fid-progress-list { display: grid; gap: 8px; } .fid-progress-item { border: 1px solid rgba(205, 188, 165, 0.64); border-radius: 10px; padding: 8px; background: #fcf8f2; } .fid-progress-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .fid-progress-name { font-size: 12px; color: var(--char); font-weight: 600; } .fid-progress-meta { font-size: 10px; color: var(--char3); font-family: var(--mono); } .fid-progress-track { margin-top: 6px; position: relative; height: 9px; border-radius: 999px; border: 1px solid rgba(205, 188, 165, 0.72); background: #eee6d8; overflow: hidden; } .fid-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ad844e, #cfab75); min-width: 2px; transition: width .26s ease; } .fid-progress-foot { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .fid-progress-next { font-size: 10px; color: var(--char2); } .fid-progress-next b { color: var(--char); } .fid-cat-row { display: grid; grid-template-columns: 26px 112px 1fr 116px 30px; gap: 8px; align-items: center; margin-bottom: 7px; padding: 7px; border: 1px solid rgba(205, 188, 165, 0.74); border-radius: 10px; background: #fbf6ee; } .fid-cat-row:last-child { margin-bottom: 0; } .fid-cat-row input[type="text"], .fid-cat-row input[type="number"] { width: 100%; box-sizing: border-box; border: 1px solid rgba(205, 188, 165, 0.8); background: #fff; border-radius: 8px; padding: 7px 8px; font-size: 11px; color: var(--char); } .fid-cat-row select { width: 100%; box-sizing: border-box; border: 1px solid rgba(205, 188, 165, 0.8); background: #fff; border-radius: 8px; padding: 7px 8px; font-size: 11px; color: var(--char); } .fid-cat-head { display: grid; grid-template-columns: 26px 112px 1fr 116px 30px; gap: 8px; margin-bottom: 8px; padding: 0 7px; } .fid-cat-h { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--char3); } .fid-cat-row input[type="checkbox"] { width: 15px; height: 15px; margin: 0 auto; } .fid-next-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; border: 1px solid rgba(205, 188, 165, 0.75); background: #f3ecdf; color: var(--char2); border-radius: 999px; padding: 3px 7px; } .fid-mini-track { width: 120px; max-width: 100%; height: 7px; border-radius: 999px; border: 1px solid rgba(205, 188, 165, 0.72); background: #eee6d8; overflow: hidden; } .fid-mini-fill { height: 100%; background: linear-gradient(90deg, #ad844e, #cfab75); min-width: 2px; } .fid-rank-actions { display: flex; gap: 4px; flex-wrap: wrap; } .fidx-shell { margin-top: 10px; display: grid; gap: 14px; } #page-fidelizacion, #page-fidelizacion * { box-shadow: none !important; text-shadow: none !important; } .fidx-hero { border: 1px solid rgba(205, 188, 165, 0.9); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0)), repeating-linear-gradient(-45deg, rgba(197,165,124,.08) 0 8px, rgba(197,165,124,.02) 8px 16px), #f4ecdf; padding: 14px; display: grid; gap: 12px; } .fidx-hero-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; } .fidx-mast-title { font-family: var(--serif); color: var(--char); font-size: 24px; line-height: 1; } .fidx-mast-sub { margin-top: 6px; color: var(--char3); font-size: 10px; font-family: var(--mono); letter-spacing: .04em; } .fidx-mast-flow { display: grid; gap: 6px; min-width: 210px; } .fidx-flow-chip { border: 1px solid rgba(205, 188, 165, 0.86); border-radius: 8px; padding: 6px 9px; font-size: 10px; color: var(--char2); background: rgba(255, 250, 242, 0.78); text-align: center; letter-spacing: .05em; } .fidx-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .fidx-kpi .fid-kpi { border: 1px solid rgba(205, 188, 165, 0.86); border-radius: 10px; background: #fbf6ee; } .fidx-stage { display: grid; grid-template-columns: 1.05fr 1.35fr; gap: 12px; } .fidx-ops { display: grid; gap: 12px; } .fidx-panel { background: #f8f2e8; border: 1px solid rgba(205, 188, 165, 0.86); border-radius: 14px; overflow: hidden; } .fidx-head { padding: 11px 12px; border-bottom: 1px solid rgba(205, 188, 165, 0.76); } .fidx-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--char2); font-weight: 700; } .fidx-sub { margin-top: 3px; font-size: 10px; color: var(--char3); font-family: var(--mono); } .fidx-body { padding: 10px; } .fidx-search { width: 100%; box-sizing: border-box; border: 1px solid rgba(205, 188, 165, 0.84); background: #fff; border-radius: 9px; padding: 10px 11px; font-size: 12px; color: var(--char); } .fidx-radar { margin-top: 8px; display: grid; gap: 7px; max-height: 420px; overflow-y: auto; padding-right: 2px; } .fidx-row { border: 1px solid rgba(205, 188, 165, 0.74); border-radius: 10px; background: #fff; padding: 9px; cursor: pointer; transition: background .16s ease, border-color .16s ease; } .fidx-row:hover { background: #fcf7ef; } .fidx-row.on { border-color: rgba(171, 132, 78, 0.75); background: #f5ecdf; } .fidx-row-name { font-size: 12px; color: var(--char); font-weight: 600; } .fidx-row-meta { margin-top: 3px; font-size: 10px; color: var(--char3); font-family: var(--mono); } .fidx-line { margin-top: 6px; height: 8px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(205, 188, 165, 0.72); background: #eee6d8; } .fidx-line > span { display: block; height: 100%; min-width: 2px; background: linear-gradient(90deg, #ad844e, #cfab75); } .fidx-panel-focus .fidx-body { min-height: 100%; } .fidx-focus-name { font-size: 22px; color: var(--char); font-family: var(--serif); line-height: 1; } .fidx-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; } .fidx-tag { border: 1px solid rgba(205, 188, 165, 0.78); background: #f3ecdf; border-radius: 999px; padding: 3px 8px; font-size: 10px; color: var(--char2); } .fidx-journey { margin-top: 11px; display: grid; gap: 8px; } .fidx-step { border: 1px solid rgba(205, 188, 165, 0.68); border-radius: 10px; background: #fff; padding: 8px; } .fidx-step b { color: var(--char); font-size: 11px; } .fidx-step div { color: var(--char3); font-size: 10px; font-family: var(--mono); margin-top: 2px; } .fidx-actions { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; } .fidx-lab .fid-card-head { border-bottom: 1px solid rgba(205, 188, 165, 0.74); } .fidx-lab .fid-card-body { background: #f9f3e9; } @media (max-width: 1080px) { .fidx-kpi { grid-template-columns: 1fr 1fr; } .fidx-stage { grid-template-columns: 1fr; } } @media (max-width: 720px) { .fidx-hero-top { grid-template-columns: 1fr; } .fidx-kpi { grid-template-columns: 1fr; } .fidx-mast-flow { min-width: 0; grid-template-columns: 1fr; } .fid-cat-head, .fid-cat-row { grid-template-columns: 24px 88px 1fr 74px 30px; } } /* ── Chrome layout cleanup ── */ #sidebar { border-right: 0; } #pages { border-top-left-radius: 16px; } @media (max-width: 1080px) { #pages { border-top-left-radius: 0; } } /* === DASHBOARD V6.2.2 · SINGLE SOURCE OF TRUTH === */ #page-dashboard.dashboard-core { --db-surface-0: var(--parch); --db-surface-1: var(--parch2); --db-line-soft: rgba(205, 188, 165, 0.56); --db-line-strong: rgba(205, 188, 165, 0.92); --db-text-meta: rgba(26, 20, 16, 0.68); --db-gap: 12px; background: linear-gradient(180deg, var(--parch) 0%, var(--parch2) 100%); } #page-dashboard.dashboard-core .dash-kpi-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "ventas ventas ventas ventas ventas ventas ventas ventas ticket ticket ticket ticket" "ventas ventas ventas ventas ventas ventas ventas ventas venc venc venc venc"; gap: var(--db-gap); margin-bottom: var(--db-gap); } #page-dashboard.dashboard-core .dash-kpi-grid > :nth-child(1) { grid-area: ventas; } #page-dashboard.dashboard-core .dash-kpi-grid > :nth-child(2) { grid-area: venc; } #page-dashboard.dashboard-core .dash-kpi-grid > :nth-child(3) { grid-area: ticket; } #page-dashboard.dashboard-core .dash-kpi, #page-dashboard.dashboard-core .dash-kpi-ventas, #page-dashboard.dashboard-core .dash-panel, #page-dashboard.dashboard-core #ds-venc-cell { background: var(--db-surface-0); border: 1px solid var(--db-line-strong); box-shadow: none; } #page-dashboard.dashboard-core .dash-panel { border-radius: 12px; } #page-dashboard.dashboard-core .dash-panel-head { background: var(--db-surface-1); border-bottom: 1px solid var(--db-line-strong); } #page-dashboard.dashboard-core .dash-panel-sub, #page-dashboard.dashboard-core .dash-kpi-sub, #page-dashboard.dashboard-core .dash-kpi-ventas .dash-kpi-kg, #page-dashboard.dashboard-core .dash-sesion-meta, #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-body-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.85fr; grid-template-areas: "sesion stock tools"; gap: var(--db-gap); align-items: start; } #page-dashboard.dashboard-core .dash-body-grid > .dash-panel:nth-child(1) { grid-area: stock; } #page-dashboard.dashboard-core .dash-body-grid > .dash-panel:nth-child(2) { grid-area: sesion; } #page-dashboard.dashboard-core .dash-body-grid > .dash-tools-stack { grid-area: tools; } #page-dashboard.dashboard-core .dash-tools-stack { position: sticky; top: 10px; gap: var(--db-gap); } #page-dashboard.dashboard-core .dash-stock-table tr, #page-dashboard.dashboard-core .dash-tl-item, #page-dashboard.dashboard-core .dash-sesion-item, #page-dashboard.dashboard-core .nota-item, #page-dashboard.dashboard-core .tarea-item { border-bottom-color: var(--db-line-soft); } #page-dashboard.dashboard-core .dash-stock-table tr:hover td, #page-dashboard.dashboard-core .dash-tl-item:hover, #page-dashboard.dashboard-core .dash-sesion-item:hover, #page-dashboard.dashboard-core .nota-item:hover, #page-dashboard.dashboard-core .tarea-item:hover { background: rgba(200, 98, 42, 0.06); } #page-dashboard.dashboard-core .dash-action-primary, #page-dashboard.dashboard-core .dash-action-sec, #page-dashboard.dashboard-core .dma-btn, #page-dashboard.dashboard-core .dash-panel-action, #page-dashboard.dashboard-core .dash-qa-btn { transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; } @media (max-width: 1120px) { #page-dashboard.dashboard-core .dash-body-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "sesion stock" "tools tools"; } #page-dashboard.dashboard-core .dash-tools-stack { position: static; } } @media (max-width: 960px) { #page-dashboard.dashboard-core .dash-header { padding: 16px 18px; gap: 14px; } #page-dashboard.dashboard-core .dash-time { font-size: 34px; } #page-dashboard.dashboard-core .dash-greeting-name { font-size: 16px; } #page-dashboard.dashboard-core .dash-kpi-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "ventas ventas" "venc ticket"; gap: 10px; } #page-dashboard.dashboard-core .dash-body-grid { grid-template-columns: 1fr; grid-template-areas: "sesion" "stock" "tools"; gap: 10px; } } @media (max-width: 600px) { #page-dashboard.dashboard-core .dash-header-actions { display: none; } #page-dashboard.dashboard-core .dash-mobile-actions { display: grid; } #page-dashboard.dashboard-core .dash-kpi-grid { display: flex; flex-direction: column; gap: 8px; } #page-dashboard.dashboard-core .dash-kpi, #page-dashboard.dashboard-core .dash-kpi-ventas { width: 100%; border-radius: 10px; padding: 10px 11px; } #page-dashboard.dashboard-core .dash-panel { border-radius: 10px; } } /* ── section-core: base compartida (Stock, Movimientos, Cierre) ── */ .section-core .ph { margin-bottom: 12px; } /* ── Stock: controles de filtro ── */ #page-stock.section-core .stock-filter-grid input, #page-stock.section-core .stock-filter-grid select { background: var(--card-bg); color: var(--char); border: var(--card-border); } #page-stock.section-core .stock-filter-grid input:focus, #page-stock.section-core .stock-filter-grid select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); outline: none; } #page-stock.section-core .stock-view-toggle { background: var(--card-bg-alt); border: var(--card-border-thin); border-radius: 999px; padding: 3px; } #page-stock.section-core .stock-view-btn { background: transparent; color: var(--text-meta); } #page-stock.section-core .stock-view-btn.active { background: var(--leather-dark); color: var(--text-on-dark); } /* ── Movimientos ─────────────────────────────────────── */ #page-movimientos.section-core .mov-filters, #page-movimientos.section-core .mov-detail-panel { background: transparent; border: none; box-shadow: none; } #page-movimientos.section-core .mov-list { background: var(--parch); border: var(--card-border); border-radius: var(--r2); box-shadow: none; padding: 0; overflow: hidden; } #page-movimientos.section-core .mov-inspector { background: var(--parch); border: var(--card-border); border-radius: var(--r2); box-shadow: none; } #page-movimientos.section-core .mov-carrito-wrap { background: transparent; border: none; border-bottom: 1px solid var(--parch3); border-radius: 0; margin: 0; overflow: visible; } #page-movimientos.section-core .mov-carrito-wrap:last-child { border-bottom: none; } #page-movimientos.section-core .mov-carrito-wrap > .mov-row { background: transparent; border-bottom: none; } #page-movimientos.section-core .mov-list > .mov-row { background: transparent; border: none; border-bottom: 1px solid var(--parch3); border-radius: 0; margin: 0; } #page-movimientos.section-core .mov-list > .mov-row:last-child { border-bottom: none; } #page-movimientos.section-core .mov-carrito-wrap:hover > .mov-row, #page-movimientos.section-core .mov-row:hover, #page-movimientos.section-core .mov-carrito-wrap.is-selected > .mov-row { background: rgba(200, 98, 42, 0.06); } #page-movimientos.section-core .mov-date-sep { position: sticky; top: 0; z-index: 3; margin: 0; padding: 8px 16px 7px; border-radius: 0; background: rgba(237, 228, 215, 0.97); border: none; border-bottom: 1px solid var(--parch3); } #page-movimientos.section-core .mov-date-sep span { color: var(--char2); letter-spacing: .14em; font-weight: 700; } #page-movimientos.section-core .mov-date-sep + .mov-carrito-wrap, #page-movimientos.section-core .mov-date-sep + .mov-row { margin-top: 0; } #page-movimientos.section-core .mov-search-bar input { background: var(--parch); border: var(--card-border); color: var(--char); box-shadow: none; } #page-movimientos.section-core .mov-search-bar input::placeholder { color: var(--char3); } #page-movimientos.section-core .mov-search-bar input:focus { border-color: rgba(200, 98, 42, 0.5); box-shadow: 0 0 0 3px rgba(200, 98, 42, 0.1); } #page-movimientos.section-core .mov-filter, #page-movimientos.section-core .mov-detail-actions .btn-ghost, #page-movimientos.section-core .mov-mobile-btn, #page-movimientos.section-core .mov-search-clr { background: var(--parch2); border: var(--card-border-thin); color: var(--char2); box-shadow: none; font-weight: 650; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; } #page-movimientos.section-core .mov-ins-btn { background: var(--parch2); border: var(--card-border-thin); color: var(--char2); box-shadow: none; font-weight: 650; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } #page-movimientos.section-core .mov-filter.on, #page-movimientos.section-core .mov-filter.mov-lf.on { background: var(--leather-dark); border-color: var(--leather-dark); color: var(--text-on-dark); font-weight: 700; } #page-movimientos.section-core .mov-search-clr:hover { color: var(--char); border-color: rgba(200, 98, 42, 0.42); background: rgba(200, 98, 42, 0.08); } #page-movimientos.section-core .mov-filters-sep { background: rgba(200, 98, 42, .24); height: 18px; } #page-movimientos.section-core .mov-row, #page-movimientos.section-core .mov-row.mov-row-venta-group { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; padding: 16px 18px; align-items: start; } #page-movimientos.section-core .mov-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--card-bg-alt); border: var(--card-border-thin); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-top: 2px; } #page-movimientos.section-core .mov-main, #page-movimientos.section-core .mov-info { min-width: 0; } #page-movimientos.section-core .mov-main-split { display: grid; grid-template-columns: 1fr; gap: 10px; } #page-movimientos.section-core .mov-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 2px; } #page-movimientos.section-core .mov-title-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; } #page-movimientos.section-core .mov-info h4, #page-movimientos.section-core .mov-title-line h4 { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--char); line-height: 1.1; margin: 0; } #page-movimientos.section-core .mov-context { display: flex; flex-wrap: wrap; gap: 6px 8px; } #page-movimientos.section-core .mov-products-side { margin-top: 2px; padding-top: 10px; border-top: var(--card-border-thin); } #page-movimientos.section-core .mov-products-list { font-size: 13.5px; line-height: 1.45; color: var(--char); white-space: normal; overflow: visible; text-overflow: clip; } #page-movimientos.section-core .mov-side { min-width: 170px; align-self: start; } #page-movimientos.section-core .mov-side-main { text-align: right; display: grid; gap: 6px; align-content: start; justify-items: end; } #page-movimientos.section-core .mov-delta { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; } #page-movimientos.section-core .mov-time { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 560; color: var(--char3); font-family: var(--mono); } @media (max-width: 900px) { #page-movimientos.section-core .mov-row, #page-movimientos.section-core .mov-row.mov-row-venta-group { grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 14px 14px; } #page-movimientos.section-core .mov-side { grid-column: 2; min-width: 0; } #page-movimientos.section-core .mov-side-main { text-align: left; justify-items: start; margin-top: 2px; } #page-movimientos.section-core .mov-delta { font-size: 20px; } #page-movimientos.section-core .mov-info h4, #page-movimientos.section-core .mov-title-line h4 { font-size: 13px; } #page-movimientos.section-core .mov-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; } } /* === MOVIMIENTOS · ph visible con botón en página === */ #page-movimientos.section-core > .ph { display: flex; } /* ── Cierre de Caja ─────────────────────────────────── */ body #page-cierre.section-core { background: var(--page); } #page-cierre.section-core .cc-layout { gap: 26px; } #page-cierre.section-core .cc-main, #page-cierre.section-core .cc-side { gap: 20px; } #page-cierre.section-core .cc-layout, #page-cierre.section-core .cc-main, #page-cierre.section-core .cc-side { background: transparent; } /* Hero premium oscuro (contraste deliberado) */ #page-cierre.section-core .cc-hero { background: linear-gradient(162deg, #1e1712 0%, #2a2018 62%, #18120e 100%); border: 1px solid rgba(200, 98, 42, 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(200,98,42,.22) 0%, transparent 58%), radial-gradient(90% 80% at 0% 100%, rgba(200,98,42,.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; } #page-cierre.section-core .cc-hero-label, #page-cierre.section-core .cc-hero-sub, #page-cierre.section-core .cc-hero-kpi-lbl { color: rgba(246, 239, 226, 0.76); position: relative; z-index: 1; } #page-cierre.section-core .cc-hero-total, #page-cierre.section-core .cc-hero-kpi-val, #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: var(--text-on-dark); position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(0,0,0,.18); } #page-cierre.section-core .cc-hero-meta { border-top-color: rgba(255, 255, 255, 0.13); position: relative; z-index: 1; } /* section-core: Cierre hereda estilos v7.0 del bloque principal ↑ */ #page-cierre.section-core .cc-pago-grid { gap: 12px; } #page-cierre.section-core .cc-obs-save { background: var(--leather-dark); color: var(--text-on-dark); border-color: var(--leather-dark); } /* === NAV V6.2.38 · fix hamburguesa a la izquierda en mobile === */ .topbar { justify-content: space-between !important; } .topbar-right { margin-left: auto; } @media (max-width: 960px) { .topbar { justify-content: space-between !important; } #menu-toggle { margin-right: 10px; } .topbar-right { margin-left: auto; } } @media (max-width: 600px) { #menu-toggle { margin-right: 8px; } } /* === MOBILE V6.2.44 · safe-area sincronizado con topbar real === */ @media (hover: none), (pointer: coarse) { .ni[data-tip]::before, .ni[data-tip]::after { content: none !important; display: none !important; } } :root { --ios-chrome-bg: var(--page); } html, body { background-color: var(--ios-chrome-bg); } @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-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); } } } /* === STOCK HEADER V7.0 · botones en página === */ @media (max-width: 640px) { .tb-stock-dup { display: none !important; } } /* === STOCK V6.3.7 ? sticky header + scroll shadow === */ #page-stock .table-wrap { position: relative; overflow: auto; } #page-stock table thead, #page-stock table thead tr { position: sticky; top: 0; z-index: 18; } #page-stock th { 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); } /* ── Dashboard ──────────────────────────────────────────── */ /* KPI grid principal (2 columnas: venc-pro + side-stack) */ #page-dashboard .dash-kpi-grid { display: grid; grid-template-columns: minmax(660px, 1.64fr) minmax(300px, .88fr); gap: 14px; align-items: start; } /* Cards premium del dashboard (venc + stock) */ #page-dashboard .dash-kpi-venc-pro, #page-dashboard .dash-kpi-stock-pro { border-radius: 14px; border: 1px solid rgba(200, 98, 42, 0.24); background: linear-gradient(180deg, #fbf8f3 0%, #f3ebdf 100%); box-shadow: 0 12px 28px rgba(26, 20, 16, 0.08); padding: 14px 14px 12px; } #page-dashboard .dash-kpi-venc-pro { min-height: 360px; } /* Números grandes dentro de las cards premium */ #page-dashboard .dash-kpi-venc-pro .dash-kpi-value, #page-dashboard .dash-kpi-stock-pro .dash-kpi-value { font-family: var(--serif); font-size: 52px; line-height: .95; letter-spacing: -0.02em; } #page-dashboard .dash-kpi-venc-pro .dash-kpi-label, #page-dashboard .dash-kpi-stock-pro .dash-kpi-label { margin-bottom: 9px; color: rgba(26, 20, 16, 0.56); } #page-dashboard .dash-kpi-venc-pro .dash-kpi-sub, #page-dashboard .dash-kpi-stock-pro .dash-kpi-sub { color: var(--text-meta); } /* Mini-título dentro de cards */ #page-dashboard .dash-mini-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--char2); margin: 8px 0 10px; } /* Grilla de charts de vencimiento */ #page-dashboard .dash-venc-chart-grid { display: grid; grid-template-columns: minmax(340px, 1.3fr) minmax(250px, .92fr); gap: 10px; } #page-dashboard .dash-venc-chart-card { background: rgba(255, 255, 255, 0.64); border: 1px solid rgba(200, 98, 42, 0.2); border-radius: 12px; padding: 10px 11px 10px; } #page-dashboard .dash-venc-canvas-wrap { height: 190px; } #page-dashboard .dash-stock-crit-wrap { height: 260px; } #page-dashboard .dash-venc-empty { margin-top: 10px; font-size: 11px; color: var(--char3); } /* Lista de vencimientos */ #page-dashboard .dash-venc-list { margin-top: 10px; padding: 0; background: transparent; border: none; } /* Tabla interna de vencimiento */ #page-dashboard .dash-venc-table { border: 1px solid rgba(200, 98, 42, 0.18); border-radius: 11px; overflow: hidden; background: rgba(255, 255, 255, 0.58); } #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-head { padding: 9px 11px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(26, 20, 16, 0.56); background: rgba(217, 204, 186, 0.28); border-bottom: 1px solid rgba(200, 98, 42, 0.15); } #page-dashboard .dash-venc-row { padding: 8px 11px; border-bottom: 1px solid rgba(200, 98, 42, 0.12); } #page-dashboard .dash-venc-row:last-child { border-bottom: none; } #page-dashboard .dash-venc-col { font-size: 12px; color: var(--char2); } #page-dashboard .dash-venc-prod { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #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 .dash-venc-more { margin-top: 6px; font-family: var(--mono); font-size: 10px; color: rgba(26, 20, 16, 0.54); } /* Notas (panel de ancho completo) */ #page-dashboard .dash-body-grid.dash-body-grid-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } #page-dashboard .dash-body-grid.dash-body-grid-notes .dash-panel { min-height: 220px; border: 1px solid rgba(200, 98, 42, 0.18); background: linear-gradient(180deg, #fbf8f3 0%, #f4ece1 100%); } #page-dashboard .dash-body-grid.dash-body-grid-notes .nota-input-area { border-bottom: 1px solid rgba(200, 98, 42, 0.18); padding: 11px 13px; } #page-dashboard .dash-body-grid.dash-body-grid-notes .nota-list { max-height: 178px; } /* Dashboard Tareas widget */ .dash-tareas-panel { display: flex; flex-direction: column; } .dash-tareas-panel .dash-panel-head { padding-bottom: 10px; border-bottom: 1px solid rgba(200,98,42,.12); margin-bottom: 0; } .dash-tareas-add { width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid var(--parch3); background: var(--parch2); color: var(--leather2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .13s; flex-shrink: 0; } .dash-tareas-add:hover { background: var(--char); color: var(--parch); border-color: var(--char); } .dash-tareas-list { flex: 1; overflow-y: auto; padding: 8px 0 4px; display: flex; flex-direction: column; gap: 1px; max-height: 180px; } .dash-tr-item { display: flex; align-items: center; gap: 8px; padding: 6px 13px; cursor: pointer; border-radius: 6px; transition: background .12s; border-left: 2px solid transparent; } .dash-tr-item:hover { background: var(--parch2); } .dash-tr-prio-alta { border-left-color: var(--red); } .dash-tr-prio-media { border-left-color: var(--gold); } .dash-tr-prio-baja { border-left-color: var(--green); } .dash-tr-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--parch3); background: var(--parch2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .13s; } .dash-tr-check svg { opacity: 0; transition: opacity .1s; } .dash-tr-item:hover .dash-tr-check { border-color: var(--green); } .dash-tr-item:hover .dash-tr-check svg { opacity: .5; stroke: var(--green); } .dash-tr-texto { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--char); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-tr-due { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; } .dash-tr-due.vencida { background: rgba(181,58,42,.12); color: var(--red); } .dash-tr-due.hoy { background: rgba(200,98,42,.15); color: var(--gold); } .dash-tr-more { padding: 6px 13px; font-size: 11px; font-weight: 600; color: var(--gold); cursor: pointer; text-align: center; border-top: 1px solid var(--parch3); margin-top: 4px; transition: color .12s; } .dash-tr-more:hover { color: var(--gold-lt); } .dash-tareas-foot { padding: 8px 13px 10px; border-top: 1px solid rgba(200,98,42,.12); } .dash-tareas-nueva { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; border: 1.5px solid var(--parch3); background: none; font-size: 11.5px; font-weight: 600; font-family: var(--sans); color: var(--leather2); cursor: pointer; transition: all .13s; } .dash-tareas-nueva:hover { background: var(--char); color: var(--parch); border-color: var(--char); } #page-dashboard .nota-list { max-height: 360px; } /* Header + saludo */ #page-dashboard { padding-bottom: 22px; } #page-dashboard .dash-header { margin-bottom: 16px; } #page-dashboard .dash-greeting-summary { font-size: 13px; color: var(--text-meta); } /* Responsive */ @media (max-width: 1360px) { #page-dashboard .dash-kpi-grid { grid-template-columns: minmax(0, 1fr) 320px; } } @media (max-width: 1220px) { #page-dashboard .dash-kpi-grid { grid-template-columns: 1fr; } #page-dashboard .dash-venc-chart-grid { grid-template-columns: 1fr; } #page-dashboard .dash-venc-canvas-wrap, #page-dashboard .dash-stock-crit-wrap { height: 210px; } } @media (max-width: 1160px) { #page-dashboard .dash-side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: stretch; } #page-dashboard .dash-kpi-prio, #page-dashboard .dash-kpi-stock-pro { min-height: 0; } } @media (max-width: 1080px) { #page-dashboard .dash-kpi-grid { grid-template-columns: 1fr; } #page-dashboard .dash-venc-chart-grid { grid-template-columns: 1fr; } #page-dashboard .dash-venc-canvas-wrap, #page-dashboard .dash-stock-crit-wrap { height: 190px; } } @media (max-width: 920px) { #page-dashboard { padding: 12px; } #page-dashboard .dash-venc-canvas-wrap { height: 176px; } #page-dashboard .dash-stock-crit-wrap { height: 210px; } } @media (max-width: 760px) { #page-dashboard .dash-side-stack { grid-template-columns: 1fr; } #page-dashboard .dash-kpi-prio .dash-kpi-value, #page-dashboard .dash-kpi-stock-pro .dash-kpi-value, #page-dashboard .dash-kpi-venc-pro .dash-kpi-value { font-size: 34px; } #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 (max-width: 720px) { #page-dashboard .dash-header { padding: 14px 14px 12px; } #page-dashboard .dash-kpi-venc-pro .dash-kpi-value, #page-dashboard .dash-kpi-stock-pro .dash-kpi-value { font-size: 40px; } #page-dashboard .dash-venc-head, #page-dashboard .dash-venc-row { grid-template-columns: 1.2fr .8fr .45fr; } } @media (max-width: 640px) { #page-dashboard .dash-kpi-venc-pro, #page-dashboard .dash-kpi-stock-pro { border-radius: 14px; padding: 14px; } #page-dashboard .dash-kpi-value { font-size: 30px; } #page-dashboard .dash-mini-title { font-size: 9px; } } /* v6.3.36 - KPI superior y responsive reforzado */ #page-dashboard .dash-side-stack { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: 100%; } #page-dashboard .dash-kpi-prio { min-height: 152px; padding: 12px 14px; } #page-dashboard .dash-kpi-prio .dash-kpi-value { font-size: 44px; } #page-dashboard .dash-prio-track { position: relative; margin-top: 8px; width: 100%; height: 8px; border-radius: 999px; background: rgba(217, 204, 186, 0.62); overflow: hidden; } #page-dashboard .dash-prio-track span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .35s ease; } #page-dashboard .dash-prio-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } #page-dashboard .dash-prio-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(200, 98, 42, 0.2); border-radius: 999px; padding: 3px 9px; font-size: 10px; color: var(--text-meta); background: rgba(255, 255, 255, 0.52); } #page-dashboard .dash-prio-chip b { font-family: var(--mono); font-size: 11px; color: var(--char); } @media (max-width: 1360px) { #page-dashboard .dash-kpi-grid { grid-template-columns: minmax(0, 1fr) 320px; } } @media (max-width: 1160px) { #page-dashboard .dash-kpi-grid { grid-template-columns: 1fr; } #page-dashboard .dash-side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: stretch; } #page-dashboard .dash-kpi-prio { min-height: 0; } #page-dashboard .dash-kpi-stock-pro { min-height: 0; } } @media (max-width: 920px) { #page-dashboard { padding: 12px; } #page-dashboard .dash-venc-canvas-wrap { height: 176px; } #page-dashboard .dash-stock-crit-wrap { height: 210px; } } @media (max-width: 760px) { #page-dashboard .dash-side-stack { grid-template-columns: 1fr; } #page-dashboard .dash-kpi-prio .dash-kpi-value, #page-dashboard .dash-kpi-stock-pro .dash-kpi-value, #page-dashboard .dash-kpi-venc-pro .dash-kpi-value { font-size: 34px; } #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; } } /* v6.3.37 - Saludo y reloj animados */ #page-dashboard .dash-time { transform-origin: left center; } #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; } #page-dashboard .dash-time-sep { animation: dashClockColon 1.2s steps(2, end) infinite !important; } #page-dashboard .dash-greeting-name.saludo-typing, #page-dashboard .dash-greeting-summary.saludo-typing { position: relative; } #page-dashboard .dash-greeting-name.saludo-typing::after, #page-dashboard .dash-greeting-summary.saludo-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 6px; vertical-align: -0.1em; border-radius: 2px; background: var(--gold); box-shadow: 0 0 0 1px rgba(255,255,255,.42), 0 0 10px rgba(200,98,42,.34); animation: dashTypeCursorBlink .72s step-end infinite; } #page-dashboard .dash-greeting-name { min-height: 1.3em; } #page-dashboard .dash-greeting-summary { min-height: 1.2em; } @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 dashClockColon { 0%, 46% { opacity: 1; } 47%, 100% { opacity: .2; } } @keyframes dashTypeCursorBlink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: .15; } } @media (prefers-reduced-motion: reduce) { #page-dashboard #dth.clock-digit-flip, #page-dashboard #dtm.clock-digit-flip, #page-dashboard .dash-greeting-name.saludo-typing::after, #page-dashboard .dash-greeting-summary.saludo-typing::after { animation: none !important; } } #page-dashboard .dash-local-name { display: inline-block; color: rgba(26, 20, 16, 0.66); font-weight: 600; letter-spacing: .16em; } /* v6.3.39 - Tooltip flotante para curva próxima */ #dash-venc-hover-card { position: absolute; z-index: 12000; 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; background: linear-gradient(180deg, #fffaf2 0%, #f3e7d7 100%); border: 1px solid rgba(200, 98, 42, 0.34); border-radius: 12px; box-shadow: 0 20px 48px rgba(26, 20, 16, 0.28); padding: 10px 10px 8px; } #dash-venc-hover-card.show { opacity: 1; transform: translateY(0) scale(1); } #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: 16px; color: var(--char); font-weight: 600; } #dash-venc-hover-card .dash-vh-total { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--char2); font-weight: 700; } #dash-venc-hover-card .dash-vh-list { border: 1px solid rgba(200, 98, 42, 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(200, 98, 42, 0.14); } #dash-venc-hover-card .dash-vh-row:last-child { border-bottom: none; } #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(--char3); padding: 10px 8px; } #dash-venc-hover-card .dash-vh-more { margin-top: 6px; font-size: 10px; font-family: var(--mono); color: var(--char3); } /* v6.3.41 - Entidad humanizada de turno (Brasa) */ #page-dashboard .dash-side-stack { grid-template-rows: auto 1fr; } #page-dashboard .dash-kpi-entity { border: 1px solid rgba(200, 98, 42, 0.22); background: linear-gradient(180deg, #fff9ef 0%, #f4e8d8 100%); min-height: 186px; } #page-dashboard .dash-entity-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; } #page-dashboard .dash-entity-name { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--char); } #page-dashboard .dash-entity-state { border: 1px solid rgba(200, 98, 42, 0.32); border-radius: 999px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 4px 9px; } #page-dashboard .dash-entity-msg { margin-top: 9px; font-size: 12px; color: var(--char2); line-height: 1.45; } #page-dashboard .dash-entity-memory { margin-top: 8px; font-size: 10px; color: rgba(26, 20, 16, 0.56); font-family: var(--mono); } #page-dashboard .dash-entity-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; } #page-dashboard .dash-entity-act { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(200, 98, 42, 0.26); border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--char2); transition: background .15s ease, border-color .15s ease, transform .12s ease; } #page-dashboard .dash-entity-act:hover { background: rgba(255, 255, 255, 0.96); border-color: rgba(200, 98, 42, 0.45); transform: translateY(-1px); } @media (max-width: 1160px) { #page-dashboard .dash-side-stack { grid-template-columns: 1fr; grid-template-rows: auto; } } /* ── Top productos card ── */ #page-dashboard .dash-side-stack { grid-template-rows: 1fr; display: flex; flex-direction: column; } #page-dashboard .dash-top-prod-card { flex: 1; display: flex; flex-direction: column; background: var(--parch); border: 1.5px solid var(--parch3); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05); min-height: 0; } #page-dashboard .dash-top-prod-header { padding: 14px 18px 10px; background: #1A1410; border-bottom: 1px solid rgba(200,98,42,.18); flex-shrink: 0; } #page-dashboard .dash-top-prod-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: rgba(200,98,42,.70); margin-bottom: 2px; } #page-dashboard .dash-top-prod-title { font-size: 14px; font-weight: 700; color: #F5EFE6; letter-spacing: -.01em; } #page-dashboard .dash-top-prod-chart-wrap { height: 248px; padding: 10px 14px 6px; box-sizing: border-box; } #page-dashboard .dash-top-prod-chart-wrap canvas { display: block; } #page-dashboard .dash-top-prod-footer { padding: 8px 18px 12px; font-size: 10.5px; color: var(--char3); font-family: var(--sans); border-top: 1px solid var(--parch3); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ DASHBOARD v7.0 — "Studio Blanc" Warm ivory ground · ember editorial accents · coal precision ═══════════════════════════════════════════════════════════════ */ /* ── Page background ──────────────────────────────────────── */ #page-dashboard { background: #f5f0ea !important; min-height: calc(100vh - var(--topbar)); padding-bottom: 36px; } /* ── Header zone ──────────────────────────────────────────── */ #page-dashboard .dash-header { border-bottom: 1px solid rgba(26,20,16,0.10) !important; margin-bottom: 22px; padding: 22px 0 26px; } #page-dashboard .dash-time { color: #1a1410 !important; font-size: 58px; } #page-dashboard .dash-time-sep { opacity: 0.22 !important; } #page-dashboard .dash-greeting-name { color: #1a1410 !important; font-size: 22px; } #page-dashboard .dash-greeting-name strong { color: #1a1410 !important; } #page-dashboard .dash-greeting-summary { color: rgba(26,20,16,0.46) !important; } #page-dashboard .dash-greeting-summary b { color: rgba(26,20,16,0.80) !important; font-weight: 500; } #page-dashboard .dash-greeting-summary a { color: var(--gold) !important; } #page-dashboard .dash-local-name { color: rgba(200,98,42,0.55) !important; letter-spacing: .20em; } /* Action buttons — coal (más refinado que ember) */ #page-dashboard .dash-action-primary { background: #1a1410 !important; color: #f0e4cc !important; box-shadow: 0 4px 18px rgba(26,20,16,0.20) !important; border-radius: 3px !important; font-family: var(--mono) !important; letter-spacing: .12em !important; } #page-dashboard .dash-action-primary:hover { background: #100d09 !important; box-shadow: 0 6px 24px rgba(26,20,16,0.28) !important; } #page-dashboard .dash-action-sec { border-color: rgba(26,20,16,0.16) !important; color: rgba(26,20,16,0.52) !important; border-radius: 3px !important; background: transparent !important; } #page-dashboard .dash-action-sec:hover { background: rgba(26,20,16,0.05) !important; color: #1a1410 !important; border-color: rgba(26,20,16,0.28) !important; } /* ── Mobile action bar ────────────────────────────────────── */ #page-dashboard .dma-btn { background: rgba(255,255,255,0.75) !important; border-color: rgba(26,20,16,0.12) !important; color: rgba(26,20,16,0.56) !important; border-radius: 3px !important; } #page-dashboard .dma-btn:hover { background: rgba(26,20,16,0.06) !important; color: #1a1410 !important; border-color: rgba(26,20,16,0.24) !important; } #page-dashboard .dma-primary { background: #1a1410 !important; color: #f0e4cc !important; border-color: transparent !important; } /* ── KPI base cards ───────────────────────────────────────── */ #page-dashboard .dash-kpi { background: #ffffff !important; border: 1px solid rgba(26,20,16,0.08) !important; border-top: 2px solid rgba(200,98,42,0.24) !important; box-shadow: 0 1px 4px rgba(26,20,16,0.05) !important; } #page-dashboard .dash-kpi::before { background: none !important; } #page-dashboard .dash-kpi[onclick]:hover, #page-dashboard .dash-kpi.clickable:hover { border-top-color: rgba(200,98,42,0.60) !important; box-shadow: 0 4px 20px rgba(26,20,16,0.08), 0 1px 4px rgba(26,20,16,0.04) !important; transform: translateY(-2px); } #page-dashboard .dash-kpi-label { color: rgba(200,98,42,0.58) !important; font-family: var(--mono); letter-spacing: .18em; } #page-dashboard .dash-kpi-value { color: #1a1410 !important; font-weight: 300; } #page-dashboard .dash-kpi-sub { color: rgba(26,20,16,0.42) !important; } #page-dashboard .dash-kpi-accent { display: none !important; } #page-dashboard .dash-kpi-deco { opacity: .04 !important; filter: none !important; } /* ── KPI Ventas hero card ─────────────────────────────────── */ #page-dashboard .dash-kpi-ventas { background: #ffffff !important; border: 1px solid rgba(26,20,16,0.08) !important; border-top: 2px solid rgba(200,98,42,0.55) !important; box-shadow: 0 2px 12px rgba(26,20,16,0.06) !important; } #page-dashboard .dash-kpi-ventas::before { background: none !important; } #page-dashboard .dash-kpi-ventas:hover { box-shadow: 0 6px 24px rgba(26,20,16,0.10) !important; } #page-dashboard .dash-kpi-ventas .dash-kpi-label { color: rgba(200,98,42,0.58) !important; } #page-dashboard .dash-kpi-ventas .dash-kpi-value { color: #1a1410 !important; font-size: 52px; } #page-dashboard .dash-kpi-ventas .dash-kpi-sub { color: rgba(26,20,16,0.42) !important; } #page-dashboard .dash-kpi-ventas .dash-kpi-kg { color: rgba(26,20,16,0.36) !important; } #page-dashboard .dash-kpi-ventas .dash-kpi-accent { display: none !important; } #page-dashboard .dash-kpi-ventas .dash-kpi-deco { opacity: .04 !important; filter: none !important; } /* ── Premium KPI cards (venc-pro + stock-pro) ─────────────── */ #page-dashboard .dash-kpi-venc-pro, #page-dashboard .dash-kpi-stock-pro { background: #ffffff !important; border: 1px solid rgba(26,20,16,0.08) !important; border-top: 2px solid rgba(200,98,42,0.30) !important; box-shadow: 0 2px 12px rgba(26,20,16,0.05) !important; } #page-dashboard .dash-kpi-venc-pro .dash-kpi-value, #page-dashboard .dash-kpi-stock-pro .dash-kpi-value { color: #1a1410 !important; } #page-dashboard .dash-kpi-venc-pro .dash-kpi-label, #page-dashboard .dash-kpi-stock-pro .dash-kpi-label { color: rgba(200,98,42,0.58) !important; } #page-dashboard .dash-kpi-venc-pro .dash-kpi-sub, #page-dashboard .dash-kpi-stock-pro .dash-kpi-sub { color: rgba(26,20,16,0.42) !important; } /* ── Trend + medio badges ─────────────────────────────────── */ #page-dashboard .dash-kpi-trend.up { color: var(--green) !important; background: rgba(45,122,79,.09) !important; } #page-dashboard .dash-kpi-trend.down { color: var(--red) !important; background: rgba(181,58,42,.08) !important; } #page-dashboard .dash-kpi-trend.flat { color: rgba(26,20,16,0.36) !important; background: rgba(26,20,16,.05) !important; } #page-dashboard .dash-kpi-medio { color: rgba(26,20,16,0.40) !important; background: rgba(26,20,16,0.05) !important; border-color: rgba(26,20,16,0.10) !important; } /* ── Quick actions bar ────────────────────────────────────── */ #page-dashboard .dash-qa-btn { background: #ffffff !important; border: 1px solid rgba(26,20,16,0.10) !important; color: rgba(26,20,16,0.50) !important; border-radius: 3px !important; box-shadow: 0 1px 3px rgba(26,20,16,0.04) !important; } #page-dashboard .dash-qa-btn:hover { border-color: rgba(200,98,42,0.30) !important; background: rgba(200,98,42,0.04) !important; color: var(--gold) !important; box-shadow: 0 3px 12px rgba(26,20,16,0.08) !important; } /* ── Body panels ──────────────────────────────────────────── */ #page-dashboard .dash-panel { background: #ffffff !important; border: 1px solid rgba(26,20,16,0.08) !important; border-top: 2px solid rgba(200,98,42,0.20) !important; box-shadow: 0 1px 4px rgba(26,20,16,0.04) !important; } #page-dashboard .dash-panel-head { background: #faf6f0 !important; border-bottom: 1px solid rgba(26,20,16,0.08) !important; } #page-dashboard .dash-panel-title { color: #1a1410 !important; } #page-dashboard .dash-panel-sub { color: rgba(26,20,16,0.38) !important; } #page-dashboard .dash-panel-action { color: var(--gold) !important; background: rgba(200,98,42,0.05) !important; border-color: rgba(200,98,42,0.18) !important; } #page-dashboard .dash-panel-action:hover { background: rgba(200,98,42,0.12) !important; border-color: rgba(200,98,42,0.38) !important; } #page-dashboard .dash-panel-empty { color: rgba(26,20,16,0.28) !important; } /* ── Stock table ──────────────────────────────────────────── */ #page-dashboard .dash-stock-table tr { border-bottom-color: rgba(26,20,16,0.07) !important; } #page-dashboard .dash-stock-table tr:hover td { background: rgba(200,98,42,0.03) !important; } #page-dashboard .dash-stock-table .st-nombre { color: #1a1410 !important; } #page-dashboard .dash-stock-table .st-cat { color: rgba(26,20,16,0.36) !important; } #page-dashboard .dash-stock-table .st-bar { background: rgba(26,20,16,0.10) !important; } /* ── Timeline ─────────────────────────────────────────────── */ #page-dashboard .dash-tl-item { border-bottom-color: rgba(26,20,16,0.07) !important; } #page-dashboard .dash-tl-item:hover { background: rgba(200,98,42,0.03) !important; } #page-dashboard .dash-tl-prod { color: #1a1410 !important; } #page-dashboard .dash-tl-meta { color: rgba(26,20,16,0.36) !important; } #page-dashboard .dash-tl-hora { color: rgba(26,20,16,0.28) !important; } /* ── Sesión ───────────────────────────────────────────────── */ #page-dashboard .dash-sesion-item { border-bottom-color: rgba(26,20,16,0.07) !important; } #page-dashboard .dash-sesion-item:hover { background: rgba(200,98,42,0.03) !important; } #page-dashboard .dash-sesion-prod { color: #1a1410 !important; } #page-dashboard .dash-sesion-meta { color: rgba(26,20,16,0.36) !important; } /* ── Vencimientos card ────────────────────────────────────── */ #page-dashboard .dash-mini-title { color: rgba(200,98,42,0.62) !important; } #page-dashboard .dash-venc-chart-card { background: rgba(245,241,235,0.65) !important; border-color: rgba(26,20,16,0.10) !important; } #page-dashboard .dash-venc-table { border-color: rgba(26,20,16,0.10) !important; background: #ffffff !important; } #page-dashboard .dash-venc-head { background: rgba(245,241,235,0.70) !important; border-bottom-color: rgba(26,20,16,0.08) !important; color: rgba(26,20,16,0.44) !important; } #page-dashboard .dash-venc-row { border-bottom-color: rgba(26,20,16,0.07) !important; } #page-dashboard .dash-venc-col { color: rgba(26,20,16,0.56) !important; } #page-dashboard .dash-venc-prod { color: #1a1410 !important; } #page-dashboard .dash-venc-more { color: rgba(26,20,16,0.36) !important; } #page-dashboard .dash-venc-list { border-top-color: rgba(26,20,16,0.10) !important; } #page-dashboard .dash-venc-nombre { color: rgba(26,20,16,0.68) !important; } /* ── Notes & Tasks ────────────────────────────────────────── */ #page-dashboard .dash-body-grid.dash-body-grid-notes .dash-panel { background: #ffffff !important; border: 1px solid rgba(26,20,16,0.08) !important; border-top: 2px solid rgba(200,98,42,0.20) !important; } #page-dashboard .nota-input-area { border-bottom-color: rgba(26,20,16,0.09) !important; } #page-dashboard .nota-input-area textarea { background: #faf7f2 !important; border-color: rgba(26,20,16,0.12) !important; color: #1a1410 !important; } #page-dashboard .nota-input-area textarea::placeholder { color: rgba(26,20,16,0.22) !important; } #page-dashboard .nota-input-area textarea:focus { border-color: rgba(200,98,42,0.50) !important; box-shadow: 0 0 0 3px rgba(200,98,42,0.07) !important; } #page-dashboard .nota-item { border-bottom-color: rgba(26,20,16,0.07) !important; } #page-dashboard .nota-item:hover { background: rgba(200,98,42,0.03) !important; } #page-dashboard .nota-texto { color: #1a1410 !important; } #page-dashboard .nota-meta { color: rgba(26,20,16,0.32) !important; } #page-dashboard .nota-del { color: rgba(26,20,16,0.26) !important; } #page-dashboard .nota-del:hover { color: var(--red) !important; } #page-dashboard .tarea-input-row { border-bottom-color: rgba(26,20,16,0.09) !important; } #page-dashboard .tarea-input-row input[type="text"] { background: #faf7f2 !important; border-color: rgba(26,20,16,0.12) !important; color: #1a1410 !important; } #page-dashboard .tarea-input-row input[type="text"]::placeholder { color: rgba(26,20,16,0.22) !important; } #page-dashboard .tarea-input-row input[type="text"]:focus { border-color: rgba(200,98,42,0.50) !important; box-shadow: 0 0 0 3px rgba(200,98,42,0.07) !important; } #page-dashboard .tarea-tipo-sel { background: #faf7f2 !important; border-color: rgba(26,20,16,0.12) !important; color: rgba(26,20,16,0.50) !important; } #page-dashboard .tarea-section-label { color: rgba(200,98,42,0.55) !important; background: #faf7f2 !important; border-bottom-color: rgba(26,20,16,0.08) !important; } #page-dashboard .tarea-item { border-bottom-color: rgba(26,20,16,0.07) !important; } #page-dashboard .tarea-item:hover { background: rgba(200,98,42,0.03) !important; } #page-dashboard .tarea-texto { color: #1a1410 !important; } #page-dashboard .tarea-check { border-color: rgba(26,20,16,0.18) !important; background: #ffffff !important; } #page-dashboard .tarea-del { color: rgba(26,20,16,0.26) !important; } #page-dashboard .tarea-del:hover { color: var(--red) !important; } /* ── Tareas widget ────────────────────────────────────────── */ #page-dashboard .dash-tareas-panel .dash-panel-head { border-bottom-color: rgba(26,20,16,0.09) !important; } #page-dashboard .dash-tareas-add { border-color: rgba(26,20,16,0.14) !important; background: #faf7f2 !important; color: rgba(26,20,16,0.42) !important; } #page-dashboard .dash-tareas-add:hover { background: #1a1410 !important; color: #f0e4cc !important; border-color: #1a1410 !important; } #page-dashboard .dash-tareas-list { background: transparent !important; } #page-dashboard .dash-tr-item:hover { background: rgba(200,98,42,0.03) !important; } #page-dashboard .dash-tr-texto { color: #1a1410 !important; } #page-dashboard .dash-tr-more { color: var(--gold) !important; border-top-color: rgba(26,20,16,0.08) !important; } #page-dashboard .dash-tareas-foot { border-top-color: rgba(26,20,16,0.09) !important; } #page-dashboard .dash-tareas-nueva { border-color: rgba(26,20,16,0.14) !important; color: rgba(26,20,16,0.48) !important; background: none !important; } #page-dashboard .dash-tareas-nueva:hover { background: #1a1410 !important; color: #f0e4cc !important; border-color: #1a1410 !important; } /* ── Top productos card ───────────────────────────────────── */ #page-dashboard .dash-top-prod-card { background: #ffffff !important; border: 1px solid rgba(26,20,16,0.08) !important; border-top: 2px solid rgba(200,98,42,0.24) !important; } /* Header stays dark — el detalle editorial que lo hace premium */ #page-dashboard .dash-top-prod-header { background: #1a1410 !important; border-bottom-color: rgba(200,98,42,0.20) !important; } #page-dashboard .dash-top-prod-eyebrow { color: rgba(200,98,42,0.65) !important; } #page-dashboard .dash-top-prod-title { color: #f0e4cc !important; } #page-dashboard .dash-top-prod-footer { border-top-color: rgba(26,20,16,0.08) !important; color: rgba(26,20,16,0.32) !important; } /* ── Typing cursor ────────────────────────────────────────── */ #page-dashboard .dash-greeting-name.saludo-typing::after, #page-dashboard .dash-greeting-summary.saludo-typing::after { background: rgba(200,98,42,0.75) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.80), 0 0 10px rgba(200,98,42,0.28) !important; } /* ── Entity card ──────────────────────────────────────────── */ #page-dashboard .dash-entity-name { color: #1a1410 !important; } #page-dashboard .dash-entity-msg { color: rgba(26,20,16,0.55) !important; } #page-dashboard .dash-entity-memory { color: rgba(200,98,42,0.50) !important; } #page-dashboard .dash-entity-act { background: rgba(255,255,255,0.80) !important; border-color: rgba(200,98,42,0.22) !important; color: rgba(26,20,16,0.56) !important; } #page-dashboard .dash-entity-act:hover { background: rgba(26,20,16,0.06) !important; border-color: rgba(200,98,42,0.40) !important; } /* ── Prio track ───────────────────────────────────────────── */ #page-dashboard .dash-prio-track { background: rgba(26,20,16,0.10) !important; } #page-dashboard .dash-prio-chip { background: rgba(245,241,235,0.80) !important; border-color: rgba(26,20,16,0.12) !important; color: rgba(26,20,16,0.50) !important; } #page-dashboard .dash-prio-chip b { color: #1a1410 !important; } /* ── Hover tooltip (venc) ─────────────────────────────────── */ #dash-venc-hover-card { background: linear-gradient(180deg, #fffaf4 0%, #f5ece0 100%) !important; border-color: rgba(200,98,42,0.28) !important; box-shadow: 0 20px 48px rgba(26,20,16,0.22) !important; } /* ── Costos ─────────────────────────────────────────────── */ body #page-costos.section-core { --cos-gap: 18px; --cos-pad-x: 24px; --cos-content-pad-y: 14px; } /* ── Contenedores principales ── */ body #page-costos.section-core .costo-kpi, body #page-costos.section-core .costo-chart-card, 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(--parch); border: var(--card-border); border-radius: var(--r2); box-shadow: none; margin-bottom: var(--cos-gap); } body #page-costos.section-core .costo-period-bar { background: transparent; border: none; border-radius: 0; box-shadow: none; margin-bottom: var(--cos-gap); padding-left: 0; padding-right: 0; } body #page-costos.section-core .costo-chart-card, 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); } /* ── KPI cards ── */ body #page-costos.section-core .costo-kpi { min-height: 0; padding: 22px 22px 20px 26px; border-left-width: 3px; } body #page-costos.section-core .costo-kpi-label { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--char3); margin-bottom: 10px; font-family: var(--mono); } body #page-costos.section-core .costo-kpi-val { font-family: var(--mono); font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: var(--char); } body #page-costos.section-core .costo-kpi-sub { font-size: 11px; color: var(--char3); margin-top: 8px; line-height: 1.4; } /* ── Gaps de grillas ── */ body #page-costos.section-core .costo-kpi-row, body #page-costos.section-core .costo-2col, body #page-costos.section-core .costo-alert-grid { gap: var(--cos-gap); } /* ── Cabeceras de card ── */ body #page-costos.section-core .costo-chart-card, 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-chart-head, body #page-costos.section-core .costo-table-head { background: var(--parch2); border-bottom: 1.5px solid var(--parch3); border-radius: var(--r2) var(--r2) 0 0; margin-left: calc(var(--cos-pad-x) * -1); margin-right: calc(var(--cos-pad-x) * -1); margin-bottom: 20px; padding: 14px var(--cos-pad-x); } body #page-costos.section-core .costo-chart-title, body #page-costos.section-core .costo-table-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--char2); } /* ── Tabla: filas conectadas (sin cards individuales) ── */ body #page-costos.section-core .costo-table { border-collapse: collapse; border-spacing: 0; margin-top: 0; } body #page-costos.section-core .costo-table thead th { border-bottom: 1.5px solid var(--parch3); padding: 0 16px 10px 16px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--char3); } body #page-costos.section-core .costo-table tbody td { background: transparent; border-top: none; border-bottom: 1px solid var(--parch3); border-left: 0; border-right: 0; border-radius: 0; padding-top: var(--cos-content-pad-y); padding-bottom: var(--cos-content-pad-y); font-size: 13px; color: var(--char); } 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-table tbody tr:last-child td { border-bottom: none; } body #page-costos.section-core .costo-table tbody tr:hover td { background: var(--parch2); } /* ── Rank list: conectada, sin cards por item ── */ body #page-costos.section-core .costo-rank-item { border-radius: 0; background: transparent; border: none; border-bottom: 1px solid var(--parch3); padding: 13px 0; } body #page-costos.section-core .costo-rank-item:last-child { border-bottom: none; padding-bottom: 0; } /* ── Alert items: pequeñas cards compactas ── */ body #page-costos.section-core .costo-alert-item { border-radius: var(--r2); background: var(--parch2); border: 1.5px solid var(--parch3); padding: 14px 16px; } /* ── Filas de comparación y proveedores ── */ body #page-costos.section-core .costo-comp-row { padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--parch3); } body #page-costos.section-core .costo-prov-item { padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--parch3); } /* ── Controles (selects, tabs, botones) ── */ body #page-costos.section-core .costo-fsel, body #page-costos.section-core .costo-period-tab, body #page-costos.section-core .costo-filter-tab, body #page-costos.section-core .costo-export-btn, 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(--parch2); border: var(--card-border-thin); color: var(--char2); } body #page-costos.section-core .costo-period-tab.active, body #page-costos.section-core .costo-filter-tab.active, body #page-costos.section-core .costo-export-btn:hover, body #page-costos.section-core .costo-proj-budget-btn, body #page-costos.section-core .costo-alert-lim-btn { background: var(--leather-dark); border-color: var(--leather-dark); color: var(--text-on-dark); } /* Numeric font for all monetary/numeric values */ body #page-costos.section-core .costo-kpi-val, 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; } @media (max-width: 900px) { body #page-costos.section-core { --cos-gap: 14px; --cos-pad-x: 18px; --cos-content-pad-y: 12px; } body #page-costos.section-core .costo-kpi { padding: 18px 16px 16px 20px; } body #page-costos.section-core .costo-kpi-val { font-size: 24px; } body #page-costos.section-core .costo-chart-head, body #page-costos.section-core .costo-table-head { padding: 12px var(--cos-pad-x); } body #page-costos.section-core .costo-period-bar, body #page-costos.section-core .costo-chart-card, 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: 600px) { body #page-costos.section-core .costo-kpi-val { font-size: clamp(18px, 6vw, 24px); line-height: 1.04; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body #page-costos.section-core .costo-kpi { padding: 16px 14px 14px 18px; } body #page-costos.section-core .costo-kpi-row { gap: 10px; } } /* ── Costos: jerarquía tipográfica y respiración ── */ /* Tabla: más aire en celdas */ body #page-costos.section-core .costo-table tbody td { padding-top: 16px; padding-bottom: 16px; font-size: 13px; color: var(--char2); } body #page-costos.section-core .costo-table thead th { padding-top: 4px; padding-bottom: 12px; font-size: 9px; letter-spacing: .12em; } body #page-costos.section-core .costo-monto { font-size: 14px; font-weight: 700; color: var(--char); } body #page-costos.section-core .costo-cat-pill { padding: 3px 10px; font-size: 10.5px; } /* Rank list: más escala y aire */ 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(--char3); margin-top: 3px; } body #page-costos.section-core .costo-rank-monto { font-size: 14px; font-weight: 700; color: var(--char); } /* Leyenda de categorías */ 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(--char2); } body #page-costos.section-core .costo-cat-leg-pct { font-size: 11px; color: var(--char3); } body #page-costos.section-core .costo-cat-leg-amt { font-size: 12px; font-weight: 700; color: var(--char); } /* Leyenda del gráfico */ body #page-costos.section-core .costo-chart-legend { font-size: 12px; gap: 18px; color: var(--char2); } /* Gráfico: un poco más alto */ body #page-costos.section-core .costo-chart-wrap { height: 220px; } /* Comparación mes: escala tipográfica */ body #page-costos.section-core .costo-comp-label { font-size: 12.5px; color: var(--char2); font-weight: 500; } body #page-costos.section-core .costo-comp-prev { font-size: 12px; color: var(--char3); } body #page-costos.section-core .costo-comp-curr { font-size: 13px; font-weight: 700; color: var(--char); } body #page-costos.section-core .costo-delta { font-size: 11px; } /* Proveedores */ 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; } /* ══════════════════════════════════════════════════════ TENDENCIAS — v7.0.0 (WAGON dark redesign) ══════════════════════════════════════════════════════ */ /* ── Header dark strip ── */ .tn-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 20px; margin: 20px 24px 0; background: #1A1410; border: 1px solid rgba(200,98,42,.20); border-radius: 16px; flex-wrap: wrap; position: relative; overflow: hidden; } .tn-header::before { content: ""; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(200,98,42,.10) 0%, transparent 70%); pointer-events: none; } .tn-header-left { display: flex; flex-direction: column; gap: 2px; } .tn-header-eyebrow { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(200,98,42,.75); } .tn-header-title { font-family: var(--serif, "Fraunces", serif); font-size: 22px; font-weight: 700; color: #F5EFE6; letter-spacing: -.01em; line-height: 1.1; } /* ── Location bar (inside header) ── */ .tn-local-bar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .tn-local-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-family: var(--sans); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,239,230,.45); white-space: nowrap; } /* Toggle groups — base (toolbar / light bg) */ .tn-toggle-group { display: flex; background: var(--parch); border: 1.5px solid var(--parch3); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.07); } .tn-toggle-btn { padding: 7px 14px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--char2); background: none; border: none; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; letter-spacing: .01em; } .tn-toggle-btn + .tn-toggle-btn { border-left: 1.5px solid var(--parch3); } .tn-toggle-btn:hover { background: var(--parch2); color: var(--char); } .tn-toggle-btn.active { background: #1A1410; color: #F5EFE6; font-weight: 600; } .tn-toolbar-hint { font-size: 10.5px; color: var(--char3); font-family: var(--sans); } /* Toggle groups — inside dark header */ .tn-header .tn-toggle-group { background: rgba(245,239,230,.07); border-color: rgba(200,98,42,.25); box-shadow: none; } .tn-header .tn-toggle-btn { color: rgba(245,239,230,.55); } .tn-header .tn-toggle-btn + .tn-toggle-btn { border-left-color: rgba(200,98,42,.20); } .tn-header .tn-toggle-btn:hover { background: rgba(245,239,230,.08); color: rgba(245,239,230,.80); } .tn-header .tn-toggle-btn.active { background: rgba(200,98,42,.22); color: #F5EFE6; } /* ── Pill Tabs ── */ .tn-tabs { display: flex; gap: 6px; padding: 14px 24px 12px; background: var(--parch); border-bottom: 1.5px solid var(--parch3); margin-bottom: 0; flex-shrink: 0; } .tn-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--char2); background: transparent; border: 1.5px solid transparent; border-radius: 999px; cursor: pointer; transition: color .14s, background .14s, border-color .14s; white-space: nowrap; } .tn-tab:hover { color: var(--char); background: var(--parch2); } .tn-tab.active { color: #1A1410; background: rgba(200,98,42,.13); border-color: rgba(200,98,42,.35); font-weight: 600; } .tn-tab svg { opacity: .6; } .tn-tab.active svg { opacity: 1; } /* ── Panels ── */ .tn-panel { display: none; padding-top: 4px; } .tn-panel.active { display: block; } /* ── Toolbar (inside panel) ── */ .tn-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px 12px; flex-wrap: wrap; width: 100%; box-sizing: border-box; } /* ── Empty state ── */ .tn-empty { padding: 40px 24px; text-align: center; color: var(--char3); font-size: 13px; font-family: var(--sans); } /* ══ TAB 1 — RANKING ══ */ .tn-rank-summary { display: flex; gap: 12px; padding: 20px 24px 16px; flex-wrap: wrap; } .tn-rank-sum-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #1A1410; border: 1px solid rgba(200,98,42,.20); border-radius: 12px; min-width: 120px; flex: 1; position: relative; overflow: hidden; } .tn-rank-sum-card::before { content: ""; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(200,98,42,.10) 0%, transparent 70%); pointer-events: none; } .tn-rank-sum-hint { background: transparent; border-color: transparent; justify-content: center; flex: 0 0 auto; min-width: unset; align-items: flex-end; padding-right: 0; } .tn-rank-sum-val { font-size: 22px; font-family: var(--serif, "Fraunces", serif); font-weight: 700; color: #F5EFE6; line-height: 1; } .tn-rank-sum-lbl { font-size: 9.5px; font-family: var(--sans); color: rgba(245,239,230,.45); text-transform: uppercase; letter-spacing: .08em; } .tn-rank-table-wrap { margin: 0 24px 24px; border: 1.5px solid var(--parch3); border-radius: 12px; overflow: hidden; overflow-x: auto; background: var(--parch); box-shadow: 0 1px 6px rgba(0,0,0,.05); } .tn-rank-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 12.5px; } .tn-rank-th { padding: 12px 16px; background: #1A1410; color: rgba(245,239,230,.55); font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-align: left; border-bottom: none; white-space: nowrap; } .tn-rank-th-r { text-align: right; } .tn-rank-th-share { text-align: left; min-width: 140px; } .tn-rank-tr { border-bottom: 1px solid rgba(26,20,16,.07); transition: background .1s; } .tn-rank-tr:last-child { border-bottom: none; } .tn-rank-tr:hover { background: rgba(200,98,42,.05); } .tn-rank-tr-top { background: rgba(200,98,42,.03); } .tn-rank-tr td { padding: 13px 16px; vertical-align: middle; } .tn-rank-pos { width: 36px; } .tn-rank-pos-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10.5px; font-family: var(--mono); font-weight: 700; background: var(--parch2); color: var(--char3); border: 1px solid var(--parch3); } .tn-rank-pos-1 { background: #C8622A; color: #fff; border-color: #C8622A; } .tn-rank-pos-2 { background: #6b7a8a; color: #fff; border-color: #6b7a8a; } .tn-rank-pos-3 { background: #8a6040; color: #fff; border-color: #8a6040; } .tn-rank-nombre { font-weight: 500; color: var(--char); white-space: nowrap; } .tn-rank-num { font-family: var(--mono); color: var(--char2); white-space: nowrap; } .tn-rank-td-r { text-align: right; } .tn-rank-dim { color: var(--char3) !important; } .tn-rank-share-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; } .tn-rank-share-track { flex: 1; height: 4px; background: var(--parch2); border-radius: 99px; overflow: hidden; } .tn-rank-share-fill { height: 100%; border-radius: 99px; background: var(--char3); transition: width .4s cubic-bezier(.16,1,.3,1); min-width: 2px; } .tn-rank-share-hi { background: #C8622A; } .tn-rank-share-pct { font-size: 10.5px; font-family: var(--mono); color: var(--char2); white-space: nowrap; min-width: 34px; text-align: right; } /* ══ TAB 2 — MEDIOS DE PAGO ══ */ .tn-medio-cards { display: flex; gap: 12px; padding: 20px 24px 16px; flex-wrap: wrap; } .tn-medio-card { flex: 1; min-width: 130px; background: #1A1410; border: 1px solid rgba(200,98,42,.18); border-radius: 12px; padding: 18px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; text-align: center; position: relative; overflow: hidden; } .tn-medio-card::before { content: ""; position: absolute; top: -18px; right: -18px; width: 70px; height: 70px; background: radial-gradient(circle, rgba(200,98,42,.09) 0%, transparent 70%); pointer-events: none; } .tn-medio-card:hover { border-color: rgba(200,98,42,.45); box-shadow: 0 2px 16px rgba(200,98,42,.14); } .tn-medio-selected { border-color: #C8622A !important; box-shadow: 0 0 0 1px rgba(200,98,42,.25), 0 4px 16px rgba(200,98,42,.18) !important; } .tn-medio-card-all.tn-medio-selected { border-color: rgba(245,239,230,.2) !important; box-shadow: none !important; } .tn-medio-icon { font-size: 22px; margin-bottom: 8px; } .tn-medio-name { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(245,239,230,.45); margin-bottom: 10px; } .tn-medio-monto { font-size: 18px; font-weight: 700; font-family: var(--serif, "Fraunces", serif); color: #F5EFE6; margin-bottom: 4px; line-height: 1; } .tn-medio-count { font-size: 10.5px; color: rgba(245,239,230,.40); font-family: var(--sans); } .tn-ops-header { padding: 0 24px 10px; border-bottom: 1.5px solid var(--parch3); margin: 0 24px 0; display: flex; align-items: center; justify-content: space-between; } .tn-ops-title { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--char2); } .tn-ops-list { padding: 0 24px 24px; max-height: 420px; overflow-y: auto; } .tn-op-row { display: grid; grid-template-columns: 80px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--parch3); font-size: 12px; font-family: var(--sans); } .tn-op-row:last-child { border-bottom: none; } .tn-op-fecha { color: var(--char3); font-size: 11px; white-space: nowrap; } .tn-op-prods { color: var(--char); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn-op-medio { color: var(--char2); font-size: 11px; white-space: nowrap; } .tn-op-medio-lbl { font-size: 10px; color: var(--char3); } .tn-op-total { font-family: var(--mono); font-weight: 600; color: var(--char); white-space: nowrap; text-align: right; } /* ══ TAB 3 — PROYECCIÓN ══ */ .tn-prox-pedido { display: flex; align-items: center; gap: 8px; margin: 20px 24px 14px; padding: 14px 18px; background: #1A1410; border: 1px solid rgba(200,98,42,.22); border-radius: 12px; font-size: 12px; font-family: var(--sans); color: rgba(245,239,230,.55); flex-wrap: wrap; } .tn-prox-pedido strong { color: #F5EFE6; font-weight: 600; } .tn-prox-sep { color: rgba(245,239,230,.3); } .tn-alertas { margin: 0 24px 14px; display: flex; flex-direction: column; gap: 6px; } .tn-alerta { padding: 9px 14px; border-radius: 8px; font-size: 12px; font-family: var(--sans); } .tn-alerta-critical { background: rgba(181,58,42,.08); border: 1.5px solid rgba(181,58,42,.3); color: var(--char); } .tn-alerta-warning { background: rgba(160,98,10,.08); border: 1.5px solid rgba(160,98,10,.3); color: var(--char); } .tn-proy-table-wrap { margin: 0 24px; border: 1.5px solid var(--parch3); border-radius: 12px; overflow: hidden; overflow-x: auto; background: var(--parch); box-shadow: 0 1px 6px rgba(0,0,0,.05); } .tn-proy-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 12.5px; } .tn-proy-table thead th { padding: 12px 16px; background: #1A1410; color: rgba(245,239,230,.55); font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-align: left; border-bottom: none; white-space: nowrap; } .tn-proy-table tbody tr { border-bottom: 1px solid rgba(26,20,16,.07); transition: background .1s; } .tn-proy-table tbody tr:last-child { border-bottom: none; } .tn-proy-table tbody tr:hover { background: rgba(200,98,42,.05); } .tn-proy-footer { border-top: 2px solid var(--parch3) !important; background: var(--parch2); } .tn-proy-footer td { font-weight: 600; color: var(--char); } .tn-proy-table td { padding: 11px 14px; vertical-align: middle; } .tn-proy-nombre { font-weight: 500; color: var(--char); } .tn-proy-num { font-family: var(--mono); color: var(--char2); white-space: nowrap; } .tn-proy-pedir { font-family: var(--mono); font-weight: 600; color: var(--char); white-space: nowrap; } .tn-dias-critical { color: var(--red) !important; font-weight: 700; } .tn-dias-warning { color: var(--amber) !important; font-weight: 600; } .tn-proy-critical td { background: rgba(181,58,42,.04); } .tn-proy-warning td { background: rgba(160,98,10,.03); } .tn-estado-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 600; white-space: nowrap; } .tn-estado-ok { background: rgba(45,122,79,.12); color: var(--green); border: 1px solid rgba(45,122,79,.25); } .tn-estado-warning { background: rgba(160,98,10,.12); color: var(--amber); border: 1px solid rgba(160,98,10,.25); } .tn-estado-critical { background: rgba(181,58,42,.12); color: var(--red); border: 1px solid rgba(181,58,42,.25); } .tn-estado-exceso { background: rgba(60,100,200,.10); color: #3a5abf; border: 1px solid rgba(60,100,200,.22); } .tn-estado-lento { background: var(--parch2); color: var(--char3); border: 1px solid var(--parch3); } .tn-proy-exceso td { opacity: .7; } .tn-proy-lento td { opacity: .8; } .tn-copy-wrap { display: flex; justify-content: flex-end; padding: 14px 24px 24px; } .tn-copy-btn { display: flex; align-items: center; gap: 7px; font-size: 12px; } /* ── Banner de pedido (dark coal) ── */ .tn-pedido-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 24px 16px; padding: 16px 20px; background: #1A1410; border: 1px solid rgba(200,98,42,.22); border-radius: 12px; position: relative; overflow: hidden; } .tn-pedido-banner::before { content: ""; position: absolute; bottom: -20px; left: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(200,98,42,.08) 0%, transparent 70%); pointer-events: none; } .tn-pedido-banner-urgent { border-color: rgba(181,58,42,.45); } .tn-pedido-banner-fechas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .tn-pedido-banner-bloque { display: flex; flex-direction: column; gap: 3px; } .tn-pedido-banner-lbl { font-size: 9.5px; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(245,239,230,.4); } .tn-pedido-banner-val { font-size: 15px; font-family: var(--serif, "Fraunces", serif); font-weight: 700; color: #F5EFE6; line-height: 1.1; } .tn-pedido-banner-sep { font-size: 18px; color: rgba(245,239,230,.2); font-weight: 200; } .tn-pedido-banner-countdown { font-size: 12px; font-family: var(--sans); color: rgba(245,239,230,.5); padding: 2px 0 2px 16px; border-left: 2px solid rgba(200,98,42,.30); } .tn-pedido-banner-countdown strong { color: #F5EFE6; font-weight: 700; } /* ── Tendencia inline ── */ .tn-trend-up { font-size: 10px; font-weight: 600; color: var(--green); background: rgba(45,122,79,.1); border-radius: 4px; padding: 1px 5px; margin-left: 2px; } .tn-trend-dn { font-size: 10px; font-weight: 600; color: var(--char3); background: var(--parch2); border-radius: 4px; padding: 1px 5px; margin-left: 2px; } /* ── Kg secundario en celda de pedido ── */ .tn-proy-kg { font-size: 10px; font-family: var(--mono); color: var(--char3); font-weight: 400; } /* ── Botón Saber más ── */ .tn-info-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 11px; font-size: 11px; font-family: var(--sans); font-weight: 500; color: var(--char2); background: transparent; border: 1px solid var(--parch3); border-radius: var(--r); cursor: pointer; transition: background .12s, color .12s; } .tn-info-btn:hover { background: var(--parch2); color: var(--char); } /* ── Modal Saber más ── */ .tn-info-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease; } .tn-info-overlay.tn-info-visible { opacity: 1; } .tn-info-modal { background: var(--parch); border: 1.5px solid var(--parch3); border-radius: var(--r2); width: min(520px, 92vw); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.18); transform: translateY(10px); transition: transform .18s ease; } .tn-info-overlay.tn-info-visible .tn-info-modal { transform: translateY(0); } .tn-info-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--parch3); flex-shrink: 0; } .tn-info-title { font-size: 13px; font-family: var(--sans); font-weight: 600; color: var(--char); } .tn-info-close { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--char3); cursor: pointer; transition: background .1s; } .tn-info-close:hover { background: var(--parch2); color: var(--char); } .tn-info-body { padding: 8px 0 16px; overflow-y: auto; } .tn-info-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 20px; border-bottom: 1px solid var(--parch3); } .tn-info-item:last-child { border-bottom: none; } .tn-info-item-t { font-size: 11px; font-family: var(--sans); font-weight: 700; color: var(--char); text-transform: uppercase; letter-spacing: .05em; } .tn-info-item-d { font-size: 12.5px; font-family: var(--sans); color: var(--char2); line-height: 1.55; } /* ── Exportar dropdown ── */ .tn-exp-wrap { position: relative; } .tn-exp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 11px; font-family: var(--sans); font-weight: 500; color: var(--char); background: var(--parch); border: 1.5px solid var(--parch3); border-radius: var(--r); cursor: pointer; transition: background .12s; } .tn-exp-btn:hover { background: var(--parch2); } .tn-exp-dd { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 110px; background: var(--parch); border: 1.5px solid var(--parch3); border-radius: var(--r); box-shadow: 0 4px 16px rgba(0,0,0,.10); z-index: 500; overflow: hidden; } .tn-exp-dd.tn-exp-open { display: block; } .tn-exp-dd-item { display: block; width: 100%; padding: 9px 14px; text-align: left; font-size: 12px; font-family: var(--sans); font-weight: 500; color: var(--char); background: none; border: none; cursor: pointer; transition: background .1s; } .tn-exp-dd-item + .tn-exp-dd-item { border-top: 1px solid var(--parch3); } .tn-exp-dd-item:hover { background: var(--parch2); } /* ══ PROYECCIÓN — Estado del stock ══ */ .pry-status-wrap { padding: 20px 24px 0; } .pry-status-card { display: flex; align-items: stretch; background: #1A1410; border: 1px solid rgba(200,98,42,.20); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.10); } /* Left: donut */ .pry-status-card-left { padding: 24px 28px 24px 28px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid rgba(200,98,42,.15); flex-shrink: 0; } .pry-status-eyebrow { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: rgba(200,98,42,.65); } .pry-status-card-title { font-family: var(--serif, "Fraunces", serif); font-size: 17px; font-weight: 700; color: #F5EFE6; line-height: 1.1; } .pry-status-donut-wrap { position: relative; width: 180px; height: 180px; margin-top: 8px; } .pry-status-donut-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .pry-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .pry-donut-big { font-family: var(--serif, "Fraunces", serif); font-size: 36px; font-weight: 700; color: #F5EFE6; line-height: 1; } .pry-donut-sub { font-family: var(--sans); font-size: 10px; color: rgba(245,239,230,.40); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; } /* Right: legend */ .pry-status-legend { padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; flex: 1; } .pry-leg-item { display: flex; align-items: center; gap: 12px; } .pry-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .pry-leg-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pry-leg-label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: rgba(245,239,230,.80); } .pry-leg-count { font-family: var(--serif, "Fraunces", serif); font-size: 14px; font-weight: 700; color: #F5EFE6; } .pry-leg-sub { font-family: var(--sans); font-size: 10.5px; color: rgba(245,239,230,.30); } /* Table section below chart */ .tn-proy-table-wrap { margin: 16px 24px 24px; } /* ── Tendencias responsive ── */ @media (max-width: 700px) { .pry-status-card { flex-direction: column; } .pry-status-card-left { border-right: none; border-bottom: 1px solid rgba(200,98,42,.15); padding-bottom: 20px; } .pry-status-donut-wrap { width: 150px; height: 150px; } .pry-status-legend { padding: 18px 24px; gap: 12px; } } @media (max-width: 680px) { .tn-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; margin: 14px 14px 0; } .tn-tabs { padding: 10px 16px 8px; gap: 4px; overflow-x: auto; } .tn-tab { padding: 6px 13px; font-size: 11px; } .tn-rank-summary, .tn-medio-cards { padding: 14px 16px 12px; } .tn-rank-table-wrap, .tn-proy-table-wrap { margin: 0 16px 20px; } .tn-prox-pedido, .tn-pedido-banner { margin-left: 16px; margin-right: 16px; } .pry-kpi-row { grid-template-columns: repeat(2, 1fr); padding: 14px 16px 0; } .pry-charts-grid { padding: 12px 16px 0; gap: 10px; } .pry-chart-body--stock { height: 300px; } .pry-chart-body--pedido { height: 260px; } } /* ═══════════════════════════════════════════════════ TAREAS PAGE */ /* ── Sidebar badge ── */ .tr-sb-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--parch); font-size: 10px; font-weight: 700; margin-left: auto; line-height: 1; } /* ── Wrap principal ── */ .tareas-wrap { max-width: 780px; margin: 0 auto; padding: 24px 20px 60px; display: flex; flex-direction: column; gap: 0; } /* ── Stats bar ── */ .tr-stats-bar { display: flex; align-items: center; background: var(--parch); border: var(--card-border); border-radius: var(--card-radius); padding: 14px 20px; margin-bottom: 16px; box-shadow: var(--card-shadow); } .tr-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; } .tr-stat-num { font-size: 26px; font-weight: 700; font-family: var(--serif); color: var(--char); line-height: 1; letter-spacing: -0.5px; } .tr-num-hoy { color: var(--gold); } .tr-num-done { color: var(--green); } .tr-stat-label { font-size: 10px; font-weight: 500; color: var(--leather2); opacity: .6; text-transform: uppercase; letter-spacing: .6px; } .tr-stat-sep { width: 1px; height: 32px; background: var(--parch3); margin: 0 16px; } .tr-add-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--grad-ember); color: var(--parch); border: none; border-radius: 8px; font-size: 12.5px; font-weight: 600; font-family: var(--sans); cursor: pointer; transition: opacity .15s, transform .15s; } .tr-add-btn:hover { opacity: .9; transform: translateY(-1px); } .tr-add-btn:active { transform: scale(.96); } .tr-add-btn.active { background: var(--leather2); } /* ── Form ── */ .tr-form-wrap { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .38s cubic-bezier(.16,1,.3,1), opacity .22s ease, margin-bottom .38s; margin-bottom: 0; } .tr-form-wrap.open { max-height: 520px; opacity: 1; margin-bottom: 16px; } .tr-form-box { background: var(--parch); border: var(--card-border); border-radius: var(--card-radius); padding: 18px 20px 16px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 12px; } .tr-form-input { width: 100%; background: var(--parch2); border: 1.5px solid var(--parch3); border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 500; font-family: var(--sans); color: var(--char); outline: none; transition: border-color .15s, box-shadow .15s; } .tr-form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,98,42,.12); } .tr-form-input::placeholder { color: var(--leather2); opacity: .45; } .tr-form-meta-row { display: flex; gap: 12px; flex-wrap: wrap; } .tr-meta-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; } .tr-meta-group--wide { flex: 2; min-width: 200px; } .tr-meta-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--leather2); opacity: .6; } .tr-prio-btns { display: flex; gap: 4px; } .tr-prio-btn { flex: 1; padding: 5px 8px; border-radius: 6px; border: 1.5px solid var(--parch3); background: var(--parch2); font-size: 11.5px; font-weight: 600; font-family: var(--sans); color: var(--leather2); cursor: pointer; transition: all .13s; } .tr-prio-btn:hover { border-color: var(--gold-lt); color: var(--gold); } .tr-prio-btn.active[data-p="baja"] { background: rgba(45,122,79,.12); border-color: var(--green); color: var(--green); } .tr-prio-btn.active[data-p="media"] { background: rgba(200,98,42,.12); border-color: var(--gold); color: var(--gold); } .tr-prio-btn.active[data-p="alta"] { background: rgba(181,58,42,.12); border-color: var(--red); color: var(--red); } .tr-meta-sel, .tr-meta-inp { background: var(--parch2); border: 1.5px solid var(--parch3); border-radius: 7px; padding: 6px 10px; font-size: 12px; font-family: var(--sans); color: var(--char); outline: none; transition: border-color .13s; width: 100%; } .tr-meta-sel:focus, .tr-meta-inp:focus { border-color: var(--gold); } .tr-form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--parch3); } .tr-form-cancel { padding: 8px 14px; border: 1.5px solid var(--parch3); border-radius: 8px; background: none; font-size: 12.5px; font-weight: 500; font-family: var(--sans); color: var(--leather2); cursor: pointer; transition: background .12s; } .tr-form-cancel:hover { background: var(--parch2); } .tr-form-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; } /* ── Filter chips ── */ .tr-filters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .tr-filter { padding: 5px 13px; border-radius: 999px; border: 1.5px solid var(--parch3); background: var(--parch); font-size: 12px; font-weight: 500; font-family: var(--sans); color: var(--leather2); cursor: pointer; transition: all .13s; } .tr-filter:hover { border-color: var(--gold-lt); color: var(--gold); } .tr-filter.active { background: var(--char); border-color: var(--char); color: var(--parch); } /* ── List & groups ── */ .tr-list { display: flex; flex-direction: column; gap: 0; } .tr-group { margin-bottom: 20px; } .tr-group-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--leather2); opacity: .55; margin-bottom: 8px; padding: 0 2px; } .tr-group-label.warn { color: var(--red); opacity: 1; } .tr-group-count { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--parch2); font-size: 10px; font-weight: 700; color: var(--char); } /* ── Task item ── */ .tr-item { display: flex; align-items: flex-start; gap: 10px; background: var(--parch); border: var(--card-border-thin); border-left: 3px solid transparent; border-radius: 10px; padding: 12px 14px 12px 12px; margin-bottom: 6px; transition: box-shadow .15s, transform .12s; animation: tr-item-in .28s cubic-bezier(.16,1,.3,1) both; position: relative; overflow: hidden; } @keyframes tr-item-in { from { opacity:0; transform: translateY(8px) scale(.99); } to { opacity:1; transform: none; } } .tr-item:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } .tr-item:hover .tr-item-actions { opacity: 1; } .tr-item.tr-prio-alta { border-left-color: var(--red); } .tr-item.tr-prio-media { border-left-color: var(--gold); } .tr-item.tr-prio-baja { border-left-color: var(--green); } .tr-item.completada { opacity: .5; border-left-color: var(--parch3) !important; } .tr-item.completada .tr-item-texto { text-decoration: line-through; color: var(--leather2); } .tr-item.tr-completing { animation: tr-complete .42s cubic-bezier(.16,1,.3,1) forwards; } @keyframes tr-complete { 0% { transform: none; } 30% { transform: scale(1.02); } 60% { transform: scale(.98); opacity: 1; } 100% { transform: scale(.96); opacity: 0; max-height: 0; padding: 0; margin: 0; border-width: 0; } } .tr-item.tr-new { animation: tr-new-pop .5s cubic-bezier(.16,1,.3,1) both; } @keyframes tr-new-pop { 0% { transform: translateY(-10px) scale(1.01); opacity:0; box-shadow: 0 0 0 4px rgba(200,98,42,.18); } 60% { transform: translateY(2px) scale(1); opacity:1; } 100% { transform: none; box-shadow: none; } } .tr-item.tr-removing { animation: tr-remove .26s ease forwards; } @keyframes tr-remove { to { opacity:0; transform: translateX(20px) scale(.97); max-height:0; padding:0; margin:0; border-width:0; } } /* ── Checkbox ── */ .tr-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--parch3); background: var(--parch2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s, transform .12s; margin-top: 1px; } .tr-check:hover { border-color: var(--gold); transform: scale(1.08); } .tr-item.completada .tr-check { background: var(--green); border-color: var(--green); } .tr-check-svg { display: block; } .tr-check-mark { stroke-dasharray: 28; stroke-dashoffset: 28; transition: stroke-dashoffset .25s cubic-bezier(.16,1,.3,1); } .tr-item.completada .tr-check-mark { stroke-dashoffset: 0; stroke: var(--parch); } /* ── Item body ── */ .tr-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .tr-item-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .tr-item-texto { font-size: 13.5px; font-weight: 500; color: var(--char); line-height: 1.4; transition: color .2s; } .tr-item-badges { display: flex; gap: 4px; align-items: center; } .tr-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; line-height: 1; } .tr-badge-fija { background: rgba(200,98,42,.12); color: var(--gold); } .tr-badge-rec { background: rgba(42,90,140,.12); color: var(--blue); padding: 3px 5px; border-radius: 5px; } .tr-cat-icon { font-size: 12px; line-height: 1; } .tr-item-nota { font-size: 11.5px; color: var(--leather2); opacity: .65; font-style: italic; line-height: 1.4; } .tr-item-foot { display: flex; align-items: center; gap: 8px; min-height: 14px; } .tr-due-label { display: inline-block; font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 1px 6px; } .tr-due-label.vencida { background: rgba(181,58,42,.12); color: var(--red); } .tr-due-label.hoy { background: rgba(200,98,42,.18); color: var(--gold); } .tr-due-label.manana { background: rgba(200,98,42,.10); color: var(--gold-lt); } .tr-due-label.pronto { background: rgba(26,20,16,.07); color: var(--leather2); } .tr-due-label.lejos { color: var(--leather2); opacity:.55; } .tr-item-autor { font-size: 10.5px; color: var(--leather2); opacity: .45; } /* ── Item actions ── */ .tr-item-actions { display: flex; flex-direction: column; gap: 3px; opacity: 0; transition: opacity .15s; flex-shrink: 0; } .tr-act-btn { width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid var(--parch3); background: var(--parch2); color: var(--leather2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .13s; } .tr-act-btn:hover { background: var(--parch3); color: var(--char); } .tr-act-btn.del:hover { background: rgba(181,58,42,.12); border-color: var(--red); color: var(--red); } /* ── Empty state ── */ .tr-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; color: var(--leather2); opacity: .5; } .tr-empty p { font-size: 13px; font-weight: 500; text-align: center; } /* ── Reminder banner ── */ .tr-reminder-banner { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 12px; background: var(--char); color: var(--parch); border-radius: 12px; padding: 14px 16px; max-width: 340px; box-shadow: 0 8px 32px rgba(26,20,16,.28); transform: translateY(20px) scale(.97); opacity: 0; transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .22s ease; border-left: 3px solid var(--gold); } .tr-reminder-banner.visible { transform: none; opacity: 1; } .tr-rem-icon { flex-shrink: 0; width: 34px; height: 34px; background: rgba(200,98,42,.18); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gold-lt); } .tr-rem-body { flex: 1; min-width: 0; } .tr-rem-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; opacity: .5; margin-bottom: 2px; } .tr-rem-texto { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-rem-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .tr-rem-actions button { padding: 4px 10px; border-radius: 5px; border: 1px solid rgba(245,239,230,.2); background: rgba(245,239,230,.08); color: var(--parch); font-size: 11px; font-weight: 600; font-family: var(--sans); cursor: pointer; transition: background .12s; white-space: nowrap; } .tr-rem-actions button:hover { background: rgba(245,239,230,.16); } .tr-rem-actions button:first-child { border-color: var(--gold); color: var(--gold-lt); } /* ═══════════════════════════════════════════════ COSTOS — REDISEÑO */ #page-costos { padding-bottom: 40px; } /* ── Header ── */ .ck-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .ck-header-left .ph-title { margin-bottom: 2px; } .ck-header-left .ph-sub { margin-top: 0; } /* ── Period bar ── */ .ck-period-bar { display: flex; gap: 3px; background: rgba(26,20,16,.07); border-radius: 10px; padding: 4px; } .ck-period-btn { padding: 5px 14px; border-radius: 7px; border: none; background: none; font-size: 12px; font-weight: 600; font-family: var(--sans); color: var(--leather2); cursor: pointer; transition: all .15s; letter-spacing: .02em; } .ck-period-btn:hover { color: var(--char); background: rgba(26,20,16,.06); } .ck-period-btn.active { background: var(--char); color: var(--parch); box-shadow: 0 2px 8px rgba(26,20,16,.18); } /* ── KPI Row (dark cards) ── */ .ck-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .ck-kpi { background: #1A1410; border-radius: 14px; padding: 20px 22px 18px; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(26,20,16,.16); } .ck-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,98,42,.3), transparent); } .ck-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ck-kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,239,230,.35); } .ck-kpi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background .3s; } .ck-kpi-val { font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 600; color: #F5EFE6; line-height: 1; letter-spacing: -0.5px; margin-bottom: 6px; } .ck-kpi-val.ck-val-red { color: #e07070; } .ck-kpi-sub { font-size: 10.5px; color: rgba(245,239,230,.28); font-weight: 400; } /* ── Main chart strip (dark) ── */ .ck-chart-strip { background: #1A1410; border-radius: 16px; padding: 22px 24px 18px; margin-bottom: 14px; box-shadow: 0 6px 32px rgba(26,20,16,.18); position: relative; overflow: hidden; } .ck-chart-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 0%, rgba(200,98,42,.09) 0%, transparent 55%); pointer-events: none; } .ck-chart-strip-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .ck-strip-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: rgba(245,239,230,.3); margin-bottom: 4px; } .ck-strip-title { font-size: 14px; font-weight: 600; color: rgba(245,239,230,.85); font-family: var(--sans); } .ck-leg { display: flex; gap: 14px; flex-shrink: 0; align-items: center; } .ck-leg-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(245,239,230,.4); font-weight: 500; } .ck-leg-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .ck-chart-canvas-wrap { position: relative; height: 200px; } .ck-chart-canvas-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* ── Analytics 3-col ── */ .ck-analytics-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; } .ck-acard { background: var(--parch); border: var(--card-border); border-radius: 14px; padding: 20px 20px 18px; box-shadow: var(--card-shadow); } .ck-acard-head { margin-bottom: 14px; } .ck-acard-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; } .ck-acard-title { font-size: 14px; font-weight: 600; color: var(--char); font-family: var(--sans); } .ck-donut-outer { height: 150px; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .ck-donut-outer canvas { max-height: 150px; } /* ── Table card ── */ .ck-table-card { background: var(--parch); border: var(--card-border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--card-shadow); } .ck-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid var(--parch3); gap: 12px; flex-wrap: wrap; } .ck-toolbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ck-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ck-table-title { font-size: 13px; font-weight: 700; color: var(--char); white-space: nowrap; } .ck-tabs { display: flex; gap: 2px; background: rgba(26,20,16,.06); border-radius: 8px; padding: 3px; } .ck-tab { padding: 4px 11px; border-radius: 5px; border: none; background: none; font-size: 11.5px; font-weight: 600; font-family: var(--sans); color: var(--leather2); cursor: pointer; transition: all .13s; } .ck-tab:hover { color: var(--char); } .ck-tab.active { background: var(--parch); color: var(--char); box-shadow: 0 1px 4px rgba(26,20,16,.1); } .ck-fsel { border: 1.5px solid var(--parch3); border-radius: 7px; background: var(--parch2); padding: 5px 10px; font-size: 11.5px; font-family: var(--sans); color: var(--char); outline: none; cursor: pointer; transition: border-color .13s; } .ck-fsel:focus { border-color: var(--gold); } .ck-export-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1.5px solid var(--parch3); border-radius: 7px; background: none; font-size: 11.5px; font-weight: 600; font-family: var(--sans); color: var(--leather2); cursor: pointer; transition: all .13s; white-space: nowrap; } .ck-export-btn:hover { background: var(--char); color: var(--parch); border-color: var(--char); } /* ── Proyección strip ── */ .ck-proj-strip { background: #1A1410; border-radius: 14px; padding: 20px 24px; margin-bottom: 14px; box-shadow: 0 4px 20px rgba(26,20,16,.14); } .ck-proj-head { margin-bottom: 14px; } .ck-proj-body .costo-proj-stat { color: rgba(245,239,230,.7); border-bottom-color: rgba(245,239,230,.07); } .ck-proj-body .costo-proj-stat strong { color: #F5EFE6; } .ck-proj-body .costo-proj-alert { background: rgba(200,98,42,.12); border-color: rgba(200,98,42,.3); color: rgba(245,239,230,.8); } .ck-proj-body .costo-proj-alert.danger { background: rgba(181,58,42,.15); border-color: rgba(181,58,42,.4); } .ck-proj-body label { color: rgba(245,239,230,.5); } .ck-proj-body input[type=number] { background: rgba(245,239,230,.07); border-color: rgba(245,239,230,.15); color: #F5EFE6; } .ck-proj-body .btn-ghost { border-color: rgba(200,98,42,.4); color: #E07A45; } /* ── Bottom grid (2×2) ── */ .ck-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ck-bottom-card { background: var(--parch); border: var(--card-border); border-radius: 14px; padding: 20px 20px 18px; box-shadow: var(--card-shadow); } /* ── Responsive ── */ @media (max-width: 900px) { .ck-kpi-row { grid-template-columns: repeat(2,1fr); } .ck-analytics-row { grid-template-columns: 1fr 1fr; } .ck-analytics-row .ck-acard:last-child { grid-column: 1 / -1; } .ck-bottom-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .ck-kpi-row { grid-template-columns: 1fr 1fr; } .ck-analytics-row { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════ DASHBOARD CHARTS STRIP */ .dcs-strip { display: grid; grid-template-columns: 1fr 220px 180px; gap: 0; background: #1A1410; border-radius: 16px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 8px 40px rgba(26,20,16,0.22), 0 2px 8px rgba(200,98,42,0.08); position: relative; } /* Ember glow backlight */ .dcs-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 0%, rgba(200,98,42,0.10) 0%, transparent 55%); pointer-events: none; border-radius: 16px; } /* Dividers entre bloques */ .dcs-block + .dcs-block { border-left: 1px solid rgba(245,239,230,0.06); } .dcs-block { padding: 20px 22px; display: flex; flex-direction: column; position: relative; } /* ── Head ── */ .dcs-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .dcs-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: rgba(245,239,230,0.35); margin-bottom: 6px; } .dcs-total { font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 600; color: #F5EFE6; letter-spacing: -0.5px; line-height: 1; margin-bottom: 3px; } .dcs-sub { font-size: 11px; color: rgba(245,239,230,0.35); font-weight: 400; } /* ── Period buttons ── */ .dcs-period-group { display: flex; gap: 3px; background: rgba(245,239,230,0.06); border-radius: 7px; padding: 3px; flex-shrink: 0; } .dcs-period-btn { padding: 3px 9px; border-radius: 5px; border: none; background: none; font-size: 11px; font-weight: 600; font-family: 'DM Sans', sans-serif; color: rgba(245,239,230,0.35); cursor: pointer; transition: all .15s; } .dcs-period-btn:hover { color: rgba(245,239,230,0.7); } .dcs-period-btn.active { background: #C8622A; color: #F5EFE6; box-shadow: 0 2px 8px rgba(200,98,42,0.4); } /* ── Line chart ── */ .dcs-block--line .dcs-chart-wrap { flex: 1; min-height: 110px; position: relative; } .dcs-block--line canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* ── Donut block ── */ .dcs-block--donut { gap: 0; } .dcs-donut-area { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1; justify-content: center; } .dcs-donut-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; } .dcs-donut-wrap canvas { width: 120px !important; height: 120px !important; } .dcs-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .dcs-donut-center-val { font-size: 11px; font-weight: 700; color: #F5EFE6; text-align: center; line-height: 1.2; } .dcs-donut-center-lbl { font-size: 9px; color: rgba(245,239,230,0.35); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; } .dcs-legend { display: flex; flex-direction: column; gap: 7px; width: 100%; } .dcs-legend-item { display: flex; align-items: center; gap: 7px; } .dcs-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .dcs-legend-name { flex: 1; font-size: 11px; font-weight: 500; color: rgba(245,239,230,0.55); } .dcs-legend-pct { font-size: 11px; font-weight: 700; color: rgba(245,239,230,0.8); } .dcs-legend-empty { font-size: 11px; color: rgba(245,239,230,0.25); text-align: center; padding: 12px 0; } /* ── Mini stats block ── */ .dcs-block--stats { background: rgba(245,239,230,0.025); justify-content: flex-start; } .dcs-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; } .dcs-mini-stat {} .dcs-mini-val { font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 600; color: #F5EFE6; line-height: 1; margin-bottom: 4px; letter-spacing: -0.3px; } .dcs-mini-lbl { font-size: 9.5px; font-weight: 500; color: rgba(245,239,230,0.3); text-transform: uppercase; letter-spacing: .5px; } /* ── Responsive ── */ @media (max-width: 860px) { .dcs-strip { grid-template-columns: 1fr; } .dcs-block + .dcs-block { border-left: none; border-top: 1px solid rgba(245,239,230,0.06); } .dcs-block--line .dcs-chart-wrap { min-height: 140px; } } /* ══════════════════════════════════════════ CLIENTES v2 — master-detail layout ══════════════════════════════════════════ */ #page-clientes.active { display: flex; flex-direction: column; padding: 0; height: calc(100vh - var(--topbar)); overflow: hidden; } .cli-layout { display: grid; grid-template-columns: 520px 1fr; flex: 1; min-height: 0; overflow: hidden; } /* ── Panel izquierdo ── */ .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; } .cli-master-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(26,20,16,.1); border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .cli-mkpi { padding: 8px 6px; text-align: center; border-right: 1px solid rgba(26,20,16,.1); } .cli-mkpi:last-of-type { border-right: none; } .cli-mkpi-val { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #1a1410; letter-spacing: -0.02em; } .cli-mkpi-lbl { display: block; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26,20,16,.45); margin-top: 2px; } .cli-master-bar { display: flex; gap: 8px; align-items: center; } .cli-master-bar input { flex: 1; min-height: 36px; padding: 0 10px; border: 1px solid rgba(26,20,16,.18); border-radius: 4px; background: #faf7f2; font-family: var(--sans); font-size: 12px; color: #1a1410; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .cli-master-bar input:focus { border-color: rgba(200,98,42,.5); box-shadow: 0 0 0 3px rgba(200,98,42,.08); } .cli-btn-new { white-space: nowrap; flex-shrink: 0; font-size: 10px !important; padding: 0 12px !important; height: 36px; } .cli-master-list { flex: 1; overflow-y: auto; padding: 4px 0; } .cli-list-item { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; border-left: 2px solid transparent; transition: background .12s ease, border-color .12s ease; } .cli-list-item:hover { background: rgba(200,98,42,.05); } .cli-list-item.is-selected { border-left-color: rgba(200,98,42,.8); background: rgba(200,98,42,.07); } .cli-list-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; } .dot-platino { background: #7c3aed; } .dot-oro { background: #b45309; } .dot-plata { background: #6b7280; } .dot-bronce { background: rgba(26,20,16,.28); } .cli-list-name { font-size: 13px; font-weight: 600; color: #1a1410; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cli-list-meta { font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,.45); margin-top: 2px; } .cli-list-saldo { font-family: var(--mono); font-size: 11px; font-weight: 600; color: #2d7a4f; white-space: nowrap; } .cli-list-empty { padding: 32px 14px; text-align: center; font-size: 12px; color: rgba(26,20,16,.4); } /* ── Panel derecho ── */ .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-icon { opacity: .6; } .cli-detail-empty-text { font-size: 13px; letter-spacing: 0.06em; font-family: var(--mono); } .cli-detail-inner { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 26px; max-width: 860px; } /* Hero */ .cli-detail-hero { display: flex; align-items: center; gap: 14px; } .cli-detail-avatar { width: 50px; height: 50px; border-radius: 50%; background: rgba(200,98,42,.14); color: rgba(200,98,42,1); font-family: var(--mono); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.04em; } .cli-detail-hero-info { flex: 1; min-width: 0; } .cli-detail-name { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #1a1410; line-height: 1.1; letter-spacing: -0.02em; } .cli-detail-since { font-size: 10.5px; color: rgba(26,20,16,.45); margin-top: 4px; font-family: var(--mono); } .cli-detail-nivel-tag { flex-shrink: 0; font-size: 9px !important; letter-spacing: 0.1em !important; } .cli-detail-hero-btns { display: flex; gap: 6px; flex-shrink: 0; } /* Stats */ .cli-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(26,20,16,.12); border-radius: 4px; overflow: hidden; background: rgba(250,247,242,.7); } .cli-dstat { padding: 16px; border-right: 1px solid rgba(26,20,16,.1); text-align: center; } .cli-dstat:last-child { border-right: none; } .cli-dstat-val { font-family: var(--mono); font-size: 20px; font-weight: 700; color: #1a1410; letter-spacing: -0.03em; } .cli-dstat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(26,20,16,.45); margin-top: 5px; } /* Progreso */ .cli-detail-prog-wrap { display: flex; flex-direction: column; gap: 7px; } .cli-detail-prog-label { display: flex; justify-content: space-between; font-size: 10px; color: rgba(26,20,16,.5); font-family: var(--mono); } .cli-detail-prog-track { height: 4px; background: rgba(26,20,16,.1); border-radius: 2px; overflow: hidden; } .cli-detail-prog-fill { height: 100%; background: rgba(200,98,42,.7); border-radius: 2px; transition: width .5s cubic-bezier(.16,1,.3,1); } /* Secciones */ .cli-detail-section { display: flex; flex-direction: column; gap: 9px; } .cli-detail-section-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(26,20,16,.45); border-bottom: 1px solid rgba(26,20,16,.1); padding-bottom: 7px; font-family: var(--mono); } .cli-detail-contact-item { display: block; font-size: 13px; color: #1a1410; font-family: var(--mono); text-decoration: none; transition: color .12s ease; } a.cli-detail-contact-item:hover { color: rgba(200,98,42,1); } .cli-detail-contact-muted { font-size: 12px; color: rgba(26,20,16,.35); font-family: var(--mono); } .cli-detail-notes { font-size: 13px; color: rgba(26,20,16,.7); line-height: 1.55; font-style: italic; } .cli-detail-gestion { display: flex; gap: 8px; flex-wrap: wrap; } /* ══════════════════════════════════════════ CAMADAS v2 ══════════════════════════════════════════ */ /* KPI strip */ .cam-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .cam-kpi { padding: 12px 16px; border-radius: 4px; border: 1px solid rgba(26,20,16,.1); background: #faf7f2; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .cam-kpi:last-child { cursor: default; } .cam-kpi:not(:last-child):hover { background: rgba(200,98,42,.05); border-color: rgba(200,98,42,.3); } .cam-kpi-val { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .cam-kpi-lbl { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(26,20,16,.45); margin-top: 5px; font-family: var(--mono); } .cam-kpi--critico .cam-kpi-val { color: var(--red); } .cam-kpi--proximo .cam-kpi-val { color: var(--amber); } .cam-kpi--ok .cam-kpi-val { color: var(--green); } .cam-kpi:last-child .cam-kpi-val { color: #1a1410; } .cam-kpi.is-active { border-color: rgba(200,98,42,.5); background: rgba(200,98,42,.06); } /* Filter bar */ .cam-filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; } .cam-filter-input, .cam-filter-select { height: 36px; padding: 0 10px; border: 1px solid rgba(26,20,16,.15); border-radius: 4px; background: #faf7f2; color: #1a1410; font-family: var(--sans); font-size: 12px; outline: none; transition: border-color .15s ease; } .cam-filter-input:focus, .cam-filter-select:focus { border-color: rgba(200,98,42,.5); box-shadow: 0 0 0 3px rgba(200,98,42,.07); } .cam-filter-search { width: 240px; } .cam-filter-date { width: 136px; } #camadas-list { display: flex; flex-direction: column; gap: 10px; } /* Card */ .cam-card { border-radius: 4px; border: 1px solid rgba(26,20,16,.11); border-left-width: 3px; overflow: hidden; background: #faf7f2; } .cam-card--ok { border-left-color: var(--green); } .cam-card--proximo { border-left-color: var(--amber); } .cam-card--critico { border-left-color: var(--red); } .cam-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(240,232,219,.55); border-bottom: 1px solid rgba(26,20,16,.08); } .cam-head-name { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #1a1410; flex: 1; letter-spacing: 0.02em; } .cam-head-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,.65); } /* Lote rows */ .cam-lotes { padding: 2px 0; } .cam-lote-row { display: grid; grid-template-columns: 10px 38px 90px auto auto 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid rgba(26,20,16,.06); transition: background .1s ease; } .cam-lote-row:last-child { border-bottom: none; } .cam-lote-row:hover { background: rgba(200,98,42,.04); } .cam-lote-row.is-vencido { opacity: .55; } .cam-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cam-dot--ok { background: var(--green); } .cam-dot--proximo { background: var(--amber); } .cam-dot--critico { background: var(--red); } .cam-fifo { font-size: 8px; font-weight: 700; letter-spacing: .1em; color: rgba(200,98,42,1); background: rgba(200,98,42,.1); border: 1px solid rgba(200,98,42,.25); border-radius: 3px; padding: 2px 5px; font-family: var(--mono); white-space: nowrap; text-align: center; } .cam-fecha { font-family: var(--mono); font-size: 11.5px; font-weight: 500; white-space: nowrap; } .cam-fecha--ok { color: var(--green); } .cam-fecha--proximo { color: var(--amber); } .cam-fecha--critico { color: var(--red); } .cam-badge { font-size: 10px; font-weight: 600; font-family: var(--mono); padding: 2px 8px; border-radius: 10px; border: 1px solid; white-space: nowrap; } .cam-badge--ok { color: var(--green); border-color: rgba(45,122,79,.28); background: rgba(45,122,79,.07); } .cam-badge--proximo { color: var(--amber); border-color: rgba(200,140,40,.28); background: rgba(200,140,40,.07); } .cam-badge--critico { color: var(--red); border-color: rgba(181,58,42,.28); background: rgba(181,58,42,.07); } .cam-qty { font-family: var(--mono); font-size: 11px; color: rgba(26,20,16,.7); white-space: nowrap; } .cam-ref { font-family: var(--mono); font-size: 10.5px; color: rgba(26,20,16,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cam-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .15s ease; } .cam-lote-row:hover .cam-actions { opacity: 1; } /* ══════════════════════════════════════════ VENCIMIENTOS v2 ══════════════════════════════════════════ */ /* ph-venc-dot */ #page-vencimientos .ph-title { display: flex; align-items: center; gap: 10px; } /* KPI strip */ .venc-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; } .venc-kpi { padding: 12px 16px; border-radius: 4px; border: 1px solid rgba(26,20,16,.1); background: #faf7f2; } .venc-kpi-val { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .venc-kpi-lbl { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(26,20,16,.45); margin-top: 5px; font-family: var(--mono); } .venc-kpi--critico .venc-kpi-val { color: var(--red); } .venc-kpi--proximo .venc-kpi-val { color: var(--amber); } .venc-kpi--semana .venc-kpi-val { color: var(--gold); } .venc-kpi--ok .venc-kpi-val { color: var(--green); } /* Shell */ #page-vencimientos .venc-shell { display: flex; flex-direction: column; gap: 14px; } /* Filter bar */ #page-vencimientos .venc-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: #f3ede2; border: 1px solid rgba(26,20,16,.1); border-radius: 4px; } #page-vencimientos .venc-filter-sep { width: 1px; height: 18px; background: rgba(26,20,16,.14); flex-shrink: 0; } #page-vencimientos .venc-chip { height: 28px; padding: 0 11px; border-radius: 4px; border: 1px solid rgba(26,20,16,.15); background: transparent; color: rgba(26,20,16,.65); font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; white-space: nowrap; } #page-vencimientos .venc-chip:hover { background: rgba(200,98,42,.07); border-color: rgba(200,98,42,.3); color: #1a1410; } #page-vencimientos .venc-chip.active { background: #1a1410; border-color: #1a1410; color: rgba(240,228,204,.9); } #page-vencimientos .venc-filter-search { display: flex; align-items: center; gap: 7px; margin-left: auto; color: rgba(26,20,16,.4); } #page-vencimientos .venc-search-input { height: 28px; padding: 0 10px; border: 1px solid rgba(26,20,16,.15); border-radius: 4px; background: #faf7f2; font-family: var(--sans); font-size: 12px; color: #1a1410; outline: none; width: 180px; transition: border-color .15s ease; } #page-vencimientos .venc-search-input:focus { border-color: rgba(200,98,42,.5); box-shadow: 0 0 0 3px rgba(200,98,42,.07); } /* Asistente */ #page-vencimientos #venc-asistente:empty { display: none; } #page-vencimientos .va-card { border-radius: 4px; } /* Board y grupos */ #page-vencimientos .venc-board { display: flex; flex-direction: column; gap: 10px; } #page-vencimientos .venc-group { background: #faf7f2; border: 1px solid rgba(26,20,16,.11); border-radius: 4px; overflow: hidden; } #page-vencimientos .venc-group-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(240,232,219,.55); border-bottom: 1px solid rgba(26,20,16,.08); } #page-vencimientos .venc-group-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1410; } #page-vencimientos .venc-group-count { font-family: var(--mono); font-size: 11px; font-weight: 600; color: rgba(26,20,16,.5); background: rgba(26,20,16,.07); padding: 2px 9px; border-radius: 99px; } /* Filas */ #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:last-child { border-bottom: none; } #page-vencimientos .venc-row:hover { background: rgba(200,98,42,.04); } #page-vencimientos .venc-dias { width: 50px; min-height: 46px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mono); padding: 5px 4px; } #page-vencimientos .venc-dias.critico { background: rgba(181,58,42,.1); color: var(--red); } #page-vencimientos .venc-dias.proximo { background: rgba(160,98,10,.1); color: var(--amber); } #page-vencimientos .venc-dias.semana { background: rgba(180,130,20,.08); color: var(--gold); } #page-vencimientos .venc-dias.ok { background: rgba(45,122,79,.08); color: var(--green); } #page-vencimientos .venc-dias-num { font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: -.02em; } #page-vencimientos .venc-dias-lbl { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; opacity: .65; } #page-vencimientos .venc-row-nombre { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #1a1410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; } #page-vencimientos .venc-row-lote { font-size: 10px; color: rgba(26,20,16,.5); font-family: var(--mono); margin-top: 2px; } #page-vencimientos .venc-row-note { font-size: 10.5px; color: rgba(26,20,16,.6); border-left: 2px solid rgba(200,98,42,.35); padding-left: 7px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-vencimientos .venc-row-badge { font-size: 11px; font-weight: 600; font-family: var(--mono); } #page-vencimientos .venc-row-badge.critico { color: var(--red); } #page-vencimientos .venc-row-badge.proximo { color: var(--amber); } #page-vencimientos .venc-row-badge.semana { color: var(--gold); } #page-vencimientos .venc-row-badge.ok { color: var(--green); } #page-vencimientos .venc-row-fecha { font-size: 10.5px; color: rgba(26,20,16,.5); font-family: var(--mono); } #page-vencimientos .venc-row-qty { font-size: 11px; color: rgba(26,20,16,.65); font-family: var(--mono); } #page-vencimientos .venc-row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .15s ease; } #page-vencimientos .venc-row:hover .venc-row-actions { opacity: 1; } /* ══════════════════════════════════════════ LISTA DE PRECIOS v2 ══════════════════════════════════════════ */ .pr-filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; } .pr-filter-input, .pr-filter-select { height: 36px; padding: 0 10px; border: 1px solid rgba(26,20,16,.15); border-radius: 4px; background: #faf7f2; color: #1a1410; font-family: var(--sans); font-size: 12px; outline: none; transition: border-color .15s ease; } .pr-filter-input:focus, .pr-filter-select:focus { border-color: rgba(200,98,42,.5); box-shadow: 0 0 0 3px rgba(200,98,42,.07); } .pr-filter-search { flex: 1; max-width: 300px; } /* Grupos por categoría */ .pr-group { margin-bottom: 14px; } .pr-group-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 2px; margin-bottom: 4px; border-bottom: 1px solid rgba(26,20,16,.1); } .pr-group-title { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,20,16,.45); } .pr-group-count { font-family: var(--mono); font-size: 9px; color: rgba(26,20,16,.3); } /* Filas de producto */ .pr-row { border-bottom: 1px solid rgba(26,20,16,.06); background: #faf7f2; } .pr-row:first-of-type { border-radius: 4px 4px 0 0; } .pr-row:last-of-type { border-bottom: none; border-radius: 0 0 4px 4px; } .pr-row-head { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 10px 14px; cursor: pointer; transition: background .1s ease; } .pr-row-head:hover { background: rgba(200,98,42,.04); } .pr-row.is-open .pr-row-head { background: rgba(200,98,42,.05); } .pr-row-nombre { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #1a1410; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pr-row-precio { font-family: var(--mono); font-size: 15px; font-weight: 700; color: rgba(200,98,42,1); letter-spacing: -0.02em; white-space: nowrap; } .pr-row-sin-precio { font-family: var(--mono); font-size: 12px; color: rgba(26,20,16,.3); } .pr-row-meta { font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,.4); white-space: nowrap; text-align: right; } .pr-row-toggle { font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,.35); white-space: nowrap; display: flex; align-items: center; gap: 5px; transition: color .12s ease; } .pr-row-head:hover .pr-row-toggle { color: rgba(200,98,42,.8); } .pr-row-chevron { display: inline-block; transition: transform .2s ease; } .pr-row.is-open .pr-row-chevron { transform: rotate(180deg); } /* Historial expandido */ .pr-hist { display: none; border-top: 1px solid rgba(26,20,16,.07); background: rgba(243,237,226,.5); } .pr-row.is-open .pr-hist { display: block; } .pr-hist-empty { padding: 12px 14px; font-size: 11px; color: rgba(26,20,16,.38); font-family: var(--mono); } .pr-hist-row { display: grid; grid-template-columns: 120px 1fr 130px; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid rgba(26,20,16,.05); } .pr-hist-row:last-child { border-bottom: none; } .pr-hist-precio { font-family: var(--mono); font-size: 13px; font-weight: 700; color: rgba(200,98,42,1); } .pr-hist-motivo { font-size: 12px; color: rgba(26,20,16,.65); } .pr-hist-fecha { font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,.4); text-align: right; } /* Últimas compras */ .cli-hist-list { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(26,20,16,.1); border-radius: 4px; overflow: hidden; } .cli-hist-row { display: grid; grid-template-columns: 58px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid rgba(26,20,16,.07); background: rgba(250,247,242,.6); transition: background .1s ease; } .cli-hist-row:last-child { border-bottom: none; } .cli-hist-row:hover { background: rgba(200,98,42,.05); } .cli-hist-fecha { font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,.42); white-space: nowrap; } .cli-hist-productos { font-size: 12.5px; font-weight: 500; color: #1a1410; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cli-hist-meta { font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,.4); white-space: nowrap; } .cli-hist-monto { font-family: var(--mono); font-size: 12px; font-weight: 700; color: #1a1410; white-space: nowrap; text-align: right; } /* ── GUARDAR PRECIOS — success animation ───────────────── */ #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; } /* Active (saving) — micro press */ #pr-save-btn.is-saving { transform: scale(.97); transition: transform .08s ease; } /* Success state */ #pr-save-btn.is-success { background: #142e1d; border-left-color: rgba(52,190,98,.75); box-shadow: 0 4px 28px rgba(30,110,58,.40), 0 0 0 1px rgba(52,190,98,.18), inset 0 1px 0 rgba(52,190,98,.12); transform: scale(1); transition: background .30s cubic-bezier(.16,1,.3,1), border-color .30s ease, 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; } /* Shimmer sweep on success */ #pr-save-btn.is-success::before { background: linear-gradient( 90deg, transparent 0%, rgba(52,190,98,.18) 40%, rgba(52,190,98,.09) 60%, transparent 100% ); transform: translateX(160%); transition: transform 0s; } /* Returning to normal */ #pr-save-btn.is-returning { transition: background .50s ease, border-color .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); } /* ── LISTA DE PRECIOS — inline edit ─────────────────────── */ .pr-precio-input { font-family: var(--mono); font-size: 15px; font-weight: 700; color: rgba(200,98,42,1); letter-spacing: -0.02em; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 2px 6px; width: 110px; 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: rgba(200,98,42,.35); background: rgba(200,98,42,.05); } .pr-precio-input.is-dirty { border-color: rgba(200,98,42,.7); background: rgba(200,98,42,.08); color: rgba(200,98,42,1); } /* ══════════════════════════════════════════ MOVIMIENTOS v2 — New UI ══════════════════════════════════════════ */ /* Page container */ #page-movimientos { background: #FAF8F5; min-height: calc(100vh - 56px); box-sizing: border-box; } /* Breadcrumb */ .mv-bc { display:flex; align-items:center; gap:6px; margin-bottom:20px; } .mv-bc-link { font-family:var(--mono); font-size:11px; color:rgba(26,20,16,0.45); letter-spacing:0.04em; cursor:pointer; } .mv-bc-link:hover { color:rgba(26,20,16,0.70); } .mv-bc-sep { font-size:11px; color:rgba(26,20,16,0.30); } .mv-bc-cur { font-family:var(--mono); font-size:11px; color:rgba(26,20,16,0.70); letter-spacing:0.04em; } /* Header */ .mv-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:20px; flex-wrap:wrap; } .mv-kicker { font-family:var(--mono); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(200,98,42,0.80); margin-bottom:6px; } .mv-title { font-family:var(--serif); font-size:42px; font-weight:700; font-style:normal; letter-spacing:-0.03em; line-height:1; color:#1a1410; margin:0 0 6px; } .mv-subtitle { font-size:13px; color:rgba(26,20,16,0.50); font-family:var(--sans); margin:0; } .mv-header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; } /* Search */ .mv-search-wrap { position:relative; display:flex; align-items:center; background:#fff; border:1px solid rgba(26,20,16,0.14); border-radius:8px; padding:0 10px; gap:8px; height:38px; width:260px; transition:border-color .15s,box-shadow .15s; } .mv-search-wrap:focus-within { border-color:rgba(200,98,42,0.45); box-shadow:0 0 0 3px rgba(200,98,42,0.08); } .mv-search-icon { color:rgba(26,20,16,0.38); flex-shrink:0; } .mv-search-input { border:none; outline:none; background:transparent; font-family:var(--sans); font-size:13px; color:#1a1410; flex:1; min-width:0; } .mv-search-input::placeholder { color:rgba(26,20,16,0.38); } .mv-search-clr { background:none; border:none; cursor:pointer; font-size:12px; color:rgba(26,20,16,0.38); padding:0; line-height:1; } .mv-search-clr:hover { color:rgba(26,20,16,0.70); } /* Filtros button */ .mv-filtros-btn { display:flex; align-items:center; gap:7px; height:38px; padding:0 16px; background:#fff; border:1px solid rgba(26,20,16,0.16); border-radius:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(26,20,16,0.65); cursor:pointer; transition:background .15s,border-color .15s,color .15s; } .mv-filtros-btn:hover,.mv-filtros-btn.active { background:rgba(200,98,42,0.08); border-color:rgba(200,98,42,0.35); color:rgba(160,70,14,0.92); } /* Filter card */ .mv-filter-card { background:#fff; border:1px solid rgba(26,20,16,0.10); border-radius:12px; padding:20px 22px; margin-bottom:16px; display:none; gap:0; } .mv-filter-card.open { display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; } .mv-filter-section { display:flex; flex-direction:column; gap:10px; flex:1; min-width:200px; padding:0 20px 0 0; } .mv-filter-section:last-child { padding-right:0; } .mv-filter-label { font-family:var(--mono); font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(26,20,16,0.50); font-weight:600; } .mv-filter-pills { display:flex; flex-wrap:wrap; gap:6px; } .mv-filter-divider { width:1px; background:rgba(26,20,16,0.08); margin:0 4px; align-self:stretch; flex-shrink:0; } /* Filter pills */ .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(200,98,42,0.07); border-color:rgba(200,98,42,0.32); color:rgba(160,70,14,0.90); } .mv-pill.on { background:rgba(200,98,42,0.88); border-color:rgba(200,98,42,0.88); color:#fff; font-weight:600; } /* Stats bar */ .mv-stats { background:#1a1410; border-radius:12px; padding:18px 24px; margin-bottom:16px; display:flex; align-items:center; gap:0; } .mv-stat { flex:1; text-align:center; padding:0 12px; } .mv-stat-label { font-family:var(--mono); font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(240,225,205,0.52); margin-bottom:6px; } .mv-stat-val { font-family:var(--serif); font-size:22px; font-weight:700; font-style:italic; letter-spacing:-0.03em; color:rgba(240,225,205,0.96); line-height:1; } .mv-stat-div { width:1px; background:rgba(255,255,255,0.10); align-self:stretch; flex-shrink:0; } /* Body layout */ .mv-body { display:flex; gap:0; position:relative; flex:1; min-height:0; } /* Table card — inspector overlays (no push) */ .mv-table-card { flex:1; background:#fff; border:1px solid rgba(26,20,16,0.09); border-radius:12px; overflow:hidden; transition:filter 0.38s cubic-bezier(0.16,1,0.3,1); } /* Blur page content when inspector is open — inspector is now in , use body:has */ body:has(#mov-inspector .mov2-ins-hd) #page-movimientos .mv-table-card { filter:blur(2.5px); } body:has(#mov-inspector .mov2-ins-hd) #page-movimientos .mv-header, body:has(#mov-inspector .mov2-ins-hd) #page-movimientos .mv-filter-card, body:has(#mov-inspector .mov2-ins-hd) #page-movimientos .mv-stats { filter:blur(2.5px); pointer-events:none; } /* Dim overlay — direct child of body, true position:fixed relative to viewport */ .mv-ins-overlay { position: fixed; inset: 0; top: var(--topbar, 54px); background: rgba(26,20,16,0.28); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1); } .mv-ins-overlay.open { opacity:1; pointer-events:auto; } /* Table */ .mv-table { width:100%; border-collapse:collapse; } .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:last-child td { border-bottom:none; } .mv-table tbody tr:hover td { background:rgba(200,98,42,0.04); } .mv-table tbody tr.mv-row-selected td { background:rgba(200,98,42,0.06); } /* Date separator row */ .mv-date-sep-row td { background:rgba(245,239,231,0.70) !important; border-bottom:1px solid rgba(26,20,16,0.06) !important; padding:8px 16px !important; } .mv-date-sep-text { font-family:var(--serif); font-size:13px; font-weight:400; font-style:italic; color:rgba(26,20,16,0.65); } /* Table cell styles */ .mv-td-ticket { font-family:var(--mono); font-size:11.5px; color:rgba(26,20,16,0.55); letter-spacing:0.04em; white-space:nowrap; } .mv-td-fecha { font-family:var(--mono); font-size:11px; color:rgba(26,20,16,0.46); white-space:nowrap; } .mv-td-cliente { font-family:var(--sans); font-size:14px; font-weight:600; color:#1a1410; letter-spacing:-0.01em; } .mv-td-arrow { color:rgba(26,20,16,0.25); font-size:16px; text-align:right; padding-right:14px !important; opacity:0; transition:opacity .12s; } .mv-table tbody tr:hover .mv-td-arrow { opacity:1; } .mv-table tbody tr.mv-row-selected .mv-td-arrow { opacity:1; color:rgba(200,98,42,0.72); } /* Type pills */ .mv-tipo-pill { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border-radius:5px; font-weight:600; white-space:nowrap; } .mv-tipo-pill.venta { background:rgba(200,98,42,0.11); color:rgba(155,65,10,0.95); } .mv-tipo-pill.ingreso { background:rgba(45,122,79,0.11); color:rgba(22,84,46,0.95); } .mv-tipo-pill.merma { background:rgba(181,58,42,0.11); color:rgba(140,35,20,0.95); } .mv-tipo-pill.ajuste { background:rgba(42,90,140,0.11); color:rgba(28,60,110,0.95); } .mv-tipo-pill.transferencia_salida { background:rgba(126,60,160,0.10); color:rgba(90,30,130,0.90); } .mv-tipo-pill.transferencia_entrada { background:rgba(45,122,79,0.11); color:rgba(22,84,46,0.95); } /* Payment pills */ .mv-pago-pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:6px; font-weight:600; white-space:nowrap; border:1px solid transparent; } .mv-pago-pill.efectivo { background:rgba(200,150,42,0.13); border-color:rgba(200,150,42,0.28); color:rgba(120,80,5,0.92); } .mv-pago-pill.debito { background:rgba(26,20,16,0.07); border-color:rgba(26,20,16,0.14); color:rgba(26,20,16,0.62); } .mv-pago-pill.transferencia { background:rgba(45,122,79,0.11); border-color:rgba(45,122,79,0.24); color:rgba(22,84,46,0.92); } /* Total cell */ .mv-td-total { font-family:var(--mono); font-size:14px; font-weight:700; color:#1a1410; letter-spacing:-0.02em; text-align:right; white-space:nowrap; } .mv-td-total.neg { color:rgba(181,58,42,0.90); } .mv-td-total.pos { color:rgba(30,100,58,0.90); } /* Inspector — direct child of , true viewport-fixed overlay */ .mv-inspector { position: fixed; top: var(--topbar, 54px); right: -460px; bottom: 0; width: 440px; background: #fff; border-left: 1px solid rgba(26,20,16,0.10); box-shadow: -12px 0 48px rgba(26,20,16,0.14); display: flex; flex-direction: column; overflow: hidden; transition: right 0.42s cubic-bezier(0.16,1,0.3,1); z-index: 100; } /* Solo se abre cuando Movimientos es la página activa */ body:has(#page-movimientos.active) .mv-inspector:has(.mov2-ins-hd) { right: 0; } /* Overlay también solo visible en Movimientos */ body:not(:has(#page-movimientos.active)) .mv-ins-overlay { opacity: 0 !important; pointer-events: none !important; } /* Inspector content */ .mov2-ins-doc { flex:1; overflow-y:auto; min-height:0; padding:24px 22px 16px; } .mov2-ins-hd { margin-bottom:16px; } .mov2-ins-kicker { font-family:var(--mono); font-size:8px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(26,20,16,0.42); margin-bottom:8px; } .mov2-ins-num { font-family:var(--serif); font-size:28px; font-weight:700; font-style:normal; letter-spacing:-0.02em; color:#1a1410; line-height:1.1; margin-bottom:4px; } .mov2-ins-date { font-family:var(--sans); font-size:13px; color:rgba(26,20,16,0.52); } .mov2-ins-close { position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:50%; background:rgba(26,20,16,0.06); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:rgba(26,20,16,0.50); transition:background .15s,color .15s; } .mov2-ins-close:hover { background:rgba(26,20,16,0.12); color:#1a1410; } .mov2-ins-divider { height:1px; background:rgba(26,20,16,0.08); margin:16px 0; border:none; } .mov2-ins-meta-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; } .mov2-ins-meta-card { background:rgba(245,240,232,0.60); border:1px solid rgba(26,20,16,0.08); border-radius:8px; padding:12px 14px; } .mov2-ins-meta-label { font-family:var(--mono); font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(26,20,16,0.48); margin-bottom:5px; font-weight:600; } .mov2-ins-meta-val { font-family:var(--sans); font-size:13.5px; font-weight:600; color:#1a1410; display:flex; align-items:center; gap:5px; } .mov2-ins-sec-label { font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(26,20,16,0.45); font-weight:600; margin-bottom:12px; } .mov2-ins-items { display:flex; flex-direction:column; } .mov2-ins-item { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid rgba(26,20,16,0.07); } .mov2-ins-item:last-child { border-bottom:none; } .mov2-ins-item-name { font-family:var(--sans); font-size:14px; font-weight:600; color:#1a1410; margin-bottom:3px; letter-spacing:-0.01em; } .mov2-ins-item-detail { font-family:var(--mono); font-size:10.5px; color:rgba(26,20,16,0.48); letter-spacing:0.02em; } .mov2-ins-item-price { font-family:var(--mono); font-size:14px; font-weight:700; color:#1a1410; letter-spacing:-0.02em; white-space:nowrap; flex-shrink:0; } .mov2-ins-footer { padding:16px 22px; border-top:1px solid rgba(26,20,16,0.08); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; } .mov2-ins-total-label { font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(26,20,16,0.48); margin-bottom:4px; font-weight:600; } .mov2-ins-total-val { font-family:var(--serif); font-size:32px; font-weight:700; font-style:italic; letter-spacing:-0.04em; color:#1a1410; line-height:1; } .mov2-ins-ticket-btn { width:38px; height:38px; border-radius:50%; background:rgba(200,98,42,0.10); border:1px solid rgba(200,98,42,0.28); color:rgba(160,70,14,0.90); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .15s; } .mov2-ins-ticket-btn:hover { background:rgba(200,98,42,0.20); } .mv-ins-actions { padding:12px 22px 16px; display:flex; gap:8px; flex-shrink:0; border-top:1px solid rgba(26,20,16,0.07); } .mv-ins-action-btn { flex:1; font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; padding:9px 12px; border-radius:7px; border:1px solid rgba(26,20,16,0.16); background:#fff; color:rgba(26,20,16,0.65); cursor:pointer; text-align:center; transition:background .14s,border-color .14s,color .14s; font-weight:600; } .mv-ins-action-btn:hover { background:rgba(26,20,16,0.06); color:#1a1410; } .mv-ins-action-btn.edit { border-color:rgba(42,90,140,0.28); color:rgba(30,60,110,0.85); } .mv-ins-action-btn.edit:hover { background:rgba(42,90,140,0.08); } .mv-ins-action-btn.del { border-color:rgba(181,58,42,0.24); color:rgba(150,40,25,0.85); } .mv-ins-action-btn.del:hover { background:rgba(181,58,42,0.08); } /* Load more */ .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); } /* Override old page height constraints for new layout */ #page-movimientos { height: auto !important; overflow: visible !important; padding-bottom: 28px !important; position: relative; } /* El layout v6 tenía display:flex !important — lo neutralizamos cuando la página no está activa */ #page-movimientos:not(.active):not(.leaving) { display: none !important; } #page-movimientos .mv-body { min-height: 400px; } /* Blur transitions */ #page-movimientos .mv-header, #page-movimientos .mv-filter-card, #page-movimientos .mv-stats, #page-movimientos .mv-table-card { transition: filter 0.38s cubic-bezier(0.16,1,0.3,1); } /* ══════════════════════════════════════════ DASHBOARD v2 — New UI (nd- prefix) ══════════════════════════════════════════ */ #page-dashboard { background: #FAF8F5; padding: 32px 32px 40px; box-sizing: border-box; } /* ── Header ─────────────────────────────── */ .nd-header { display: flex; align-items: center; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; } .nd-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; } .nd-brand-avatar { width: 42px; height: 42px; background: #6B1A1A; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 13px; font-weight: 700; color: rgba(255,245,235,0.92); letter-spacing: 0.04em; flex-shrink: 0; } .nd-brand-sup { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(26,20,16,0.45); line-height:1; margin-bottom: 3px; } .nd-brand-name { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #1a1410; line-height: 1; } .nd-header-center { flex: 1; min-width: 0; } .nd-greeting { font-family: var(--serif); font-size: 38px; font-weight: 700; letter-spacing: -0.03em; color: #1a1410; line-height: 1.05; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-greeting strong { font-weight: 700; } .nd-date { font-family: var(--sans); font-size: 13px; color: rgba(26,20,16,0.48); margin: 0; } .nd-header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; } /* Search */ .nd-search-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(26,20,16,0.14); border-radius: 9px; padding: 0 14px; height: 40px; width: 240px; transition: border-color .15s, box-shadow .15s; cursor: pointer; } .nd-search-wrap:hover { border-color: rgba(26,20,16,0.28); } .nd-search-ico { color: rgba(26,20,16,0.35); flex-shrink:0; } .nd-search-input { border: none; outline: none; background: transparent; font-family: var(--sans); font-size: 13px; color: #1a1410; flex: 1; min-width: 0; cursor: pointer; } .nd-search-input::placeholder { color: rgba(26,20,16,0.38); } /* Primary button */ .nd-btn-primary { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; background: #6B1A1A; border: none; border-radius: 9px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: rgba(255,245,235,0.96); cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s; box-shadow: 0 2px 12px rgba(107,26,26,0.28); } .nd-btn-primary:hover { background: #5a1515; box-shadow: 0 4px 18px rgba(107,26,26,0.36); } /* ── KPI Grid ────────────────────────────── */ .nd-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .nd-kpi-card { background: #fff; border: 1px solid rgba(26,20,16,0.09); border-radius: 14px; padding: 20px 22px 18px; transition: box-shadow .18s; } .nd-kpi-card:hover { box-shadow: 0 4px 20px rgba(26,20,16,0.07); } .nd-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; } .nd-kpi-icon { width: 36px; height: 36px; background: rgba(26,20,16,0.05); border: 1px solid rgba(26,20,16,0.10); border-radius: 8px; display:flex; align-items:center; justify-content:center; color: rgba(26,20,16,0.55); flex-shrink: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(30,130,70,0.10); color: rgba(20,110,55,0.92); } .nd-kpi-badge.down { background: rgba(181,58,42,0.10); color: rgba(150,40,25,0.90); } .nd-kpi-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,20,16,0.45); margin-bottom: 6px; font-weight:600; } .nd-kpi-val { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: #1a1410; line-height: 1; } /* ── Body layout ─────────────────────────── */ .nd-body { display: grid; grid-template-columns: 1fr 370px; gap: 20px; align-items: start; } .nd-col-main { display:flex; flex-direction:column; gap:20px; } .nd-col-side { display:flex; flex-direction:column; gap:20px; } /* ── Card base ───────────────────────────── */ .nd-card { background: #fff; border: 1px solid rgba(26,20,16,0.09); border-radius: 16px; padding: 22px 24px; box-sizing: border-box; } .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-head .nd-card-title { margin-bottom: 0; } .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-family: var(--mono); font-size: 11px; color: rgba(26,20,16,0.32); letter-spacing: 0.06em; padding: 20px 0; text-align: center; } /* ── Tendencia chart ─────────────────────── */ .nd-chart-wrap { position:relative; height:160px; } .nd-chart-wrap canvas { width:100% !important; height:100% !important; } /* ── Ventas recientes ────────────────────── */ .nd-ventas-list { display:flex; flex-direction:column; gap:0; } .nd-venta-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(26,20,16,0.06); } .nd-venta-row:last-child { border-bottom: none; } .nd-venta-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(26,20,16,0.07); border: 1px solid rgba(26,20,16,0.10); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; font-weight:700; color: rgba(26,20,16,0.45); flex-shrink:0; } .nd-venta-name { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #1a1410; letter-spacing: -0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nd-venta-meta { font-family: var(--mono); font-size: 10.5px; color: rgba(26,20,16,0.42); letter-spacing: 0.02em; margin-top: 2px; } .nd-pago-pill { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; white-space:nowrap; } .nd-pago-pill.efectivo { background: rgba(30,130,70,0.10); color: rgba(20,110,55,0.90); } .nd-pago-pill.debito { background: rgba(26,20,16,0.07); color: rgba(26,20,16,0.60); } .nd-pago-pill.transferencia { background: rgba(20,100,110,0.10); color: rgba(15,80,95,0.90); } .nd-venta-total { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #1a1410; letter-spacing: -0.02em; text-align:right; white-space: nowrap; } /* ── Mix donut ───────────────────────────── */ .nd-mix-wrap { display:flex; align-items:center; gap:20px; } .nd-mix-donut { flex-shrink:0; width:140px; height:140px; position:relative; } .nd-mix-donut canvas { width:100% !important; height:100% !important; } .nd-mix-legend { flex:1; display:flex; flex-direction:column; gap:8px; } .nd-mix-row { display: flex; align-items: center; justify-content: space-between; gap:8px; } .nd-mix-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink:0; } .nd-mix-lbl { flex:1; font-family: var(--sans); font-size: 13px; color: rgba(26,20,16,0.75); font-weight:500; } .nd-mix-pct { font-family: var(--mono); font-size: 11px; font-weight:700; color: rgba(26,20,16,0.60); letter-spacing:0.02em; } /* ── Ranking ─────────────────────────────── */ .nd-ranking-list { display:flex; flex-direction:column; gap:14px; } .nd-rank-row { display:flex; align-items:center; gap:12px; } .nd-rank-num { font-family: var(--mono); font-size: 11px; font-weight:700; color: rgba(26,20,16,0.30); letter-spacing:0.06em; width: 22px; flex-shrink:0; text-align:right; } .nd-rank-info { flex:1; min-width:0; } .nd-rank-name { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #1a1410; letter-spacing: -0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nd-rank-meta { font-family: var(--mono); font-size: 10.5px; color: rgba(26,20,16,0.42); margin-top: 3px; } .nd-rank-bar-wrap { height: 2px; background: rgba(26,20,16,0.08); border-radius: 2px; margin-top:6px; } .nd-rank-bar { height: 2px; background: #6B1A1A; border-radius: 2px; transition: width .4s cubic-bezier(.16,1,.3,1); } .nd-rank-price { font-family: var(--mono); font-size: 12px; font-weight:700; color: #1a1410; text-align:right; white-space:nowrap; flex-shrink:0; } /* ── Stock bajo ──────────────────────────── */ .nd-stockbajo-list { display:flex; flex-direction:column; gap:14px; } .nd-sb-row { display:flex; flex-direction:column; gap:4px; } .nd-sb-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .nd-sb-name { font-family: var(--sans); font-size: 14px; font-weight:600; color: #1a1410; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } .nd-sb-qty { font-family: var(--mono); font-size: 13px; font-weight:700; color: rgba(26,20,16,0.70); white-space:nowrap; } .nd-sb-meta { font-family: var(--mono); font-size: 10px; color: rgba(26,20,16,0.38); letter-spacing: 0.04em; } .nd-sb-bar-wrap { height: 2px; background: rgba(26,20,16,0.08); border-radius:2px; margin-top:2px; } .nd-sb-bar { height: 2px; background: #6B1A1A; border-radius:2px; transition: width .4s cubic-bezier(.16,1,.3,1); } /* ═══════════════════════════════════════════════════════════ COSTOS — nueva UI (prefix: co-) ══════════════════════════════════════════════════════════ */ #page-costos { background: #FAF8F5; padding: 36px 40px 60px; display: flex; flex-direction: column; gap: 0; min-height: 100%; box-sizing: border-box; } /* Header */ .co-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; } .co-header-left { display: flex; flex-direction: column; } .co-eyebrow { font-size: 11px; letter-spacing: 0.1em; color: #9A8F86; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; } .co-title { font-family: Fraunces, Georgia, serif; font-size: 42px; 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; } /* Top bar (subnav + período) */ .co-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .co-topbar .co-subnav { margin-bottom: 0; } /* Período */ .co-period-bar { display: flex; gap: 2px; background: #EDE9E2; border-radius: 10px; padding: 4px; flex-shrink: 0; } .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-period-btn.active { background: #fff; color: #1A1410; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .co-period-btn:not(.active):hover { color: #1A1410; background: rgba(255,255,255,0.45); } /* Sub-nav */ .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-subnav-btn.active { background: #fff; color: #1A1410; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .co-subnav-btn:not(.active):hover { color: #1A1410; background: rgba(255,255,255,0.45); } /* Sub-pages */ .co-subpage { display: flex; flex-direction: column; gap: 20px; } /* Card base */ .co-card { background: #fff; border-radius: 14px; padding: 24px 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); } .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: Fraunces, Georgia, serif; font-size: 22px; font-weight: 600; color: #1A1410; margin-bottom: 20px; } /* Evolution chart */ .co-chart-card { } .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; } /* 3-KPI row (Evolución bottom) */ .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: Fraunces, Georgia, serif; font-size: 32px; font-weight: 700; color: #1A1410; line-height: 1; } .co-kpi3-red { color: #C4522A !important; } /* 4-KPI row (Rentabilidad) */ .co-kpi-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .co-kpi4 { background: #fff; border-radius: 14px; padding: 20px 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); } .co-kpi4-label { font-size: 10px; letter-spacing: 0.09em; color: #9A8F86; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; } .co-kpi4-val { font-family: Fraunces, Georgia, serif; font-size: 26px; font-weight: 700; color: #1A1410; line-height: 1; margin-bottom: 8px; } .co-kpi4-red { color: #C4522A !important; } .co-kpi4-sub { font-size: 12px; display: flex; align-items: center; gap: 3px; } .co-sub-green { color: #2D6B4A; } .co-sub-red { color: #C4522A; } .co-sub-muted { color: #9A8F86; } /* Rentabilidad 2-col body */ .co-body-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Gauge */ .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: Fraunces, Georgia, 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; } /* Category donut (Rentabilidad) */ .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-cat-leg-item { display: flex; align-items: center; gap: 8px; font-size: 13px; } .co-cat-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .co-cat-leg-name { flex: 1; color: #1A1410; } .co-cat-leg-amt { color: #1A1410; font-weight: 600; font-size: 13px; } /* Registro de gastos */ .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-search-input::placeholder { color: #B5ADA6; } .co-table-card { padding: 0; overflow: hidden; } .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; } .co-table tbody tr:last-child { border-bottom: none; } .co-table tbody tr:hover { background: #FDFCFA; } .co-table tbody td { padding: 14px 20px; color: #1A1410; } .co-td-date { color: #7A6F66 !important; font-size: 13px !important; white-space: nowrap; } .co-td-monto { text-align: right !important; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 15px; } /* Category pills */ .co-cat-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 100px; text-transform: uppercase; white-space: nowrap; } .co-pill-alquiler { background: #EEF0FB; color: #3B52C4; } .co-pill-personal { background: #F3EEFF; color: #7B3FD1; } .co-pill-servicios { background: #EDFBF1; color: #1A8040; } .co-pill-mantenimiento { background: #E8F7FA; color: #0A6678; } .co-pill-impuestos { background: #FEF9EC; color: #8A6000; } .co-pill-proveedores { background: #FEF3EE; color: #9A3A10; } .co-pill-otros { background: #F0EEEC; color: #6A6460; } /* Por sucursal */ .co-suc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .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: Fraunces, Georgia, 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: Fraunces, Georgia, 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-breakdown { display: flex; flex-direction: column; gap: 8px; } .co-suc-breakdown-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .co-suc-breakdown-amt { color: #1A1410; font-weight: 500; } /* ═══════════════════════════════════════════════════ TOPBAR REDESIGN — v7.0.0 Sidebar eliminada; navegación integrada en topbar ═══════════════════════════════════════════════════ */ /* Override: sin sidebar, main ocupa todo el ancho */ #sidebar, #sidebar-backdrop { display: none !important; } #main { margin-left: 0 !important; width: 100% !important; } /* Topbar base */ .topbar { background: #FAF8F5 !important; box-shadow: none !important; border-bottom: 1px solid rgba(26,20,16,0.08) !important; height: 56px !important; padding: 0 20px !important; justify-content: flex-start !important; gap: 0 !important; position: relative; z-index: 200; } #menu-toggle { display: none !important; } .topbar-title { display: none !important; } /* Brand (left) */ .tb-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-right: 8px; } .tb-brand-mark { width: 32px; height: 32px; border-radius: 8px; background: #1A1410; color: #FAF8F5; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: 0.06em; flex-shrink: 0; } .tb-brand-name { font-size: 13px; font-weight: 700; color: #1A1410; letter-spacing: -0.01em; white-space: nowrap; } /* Center: section button */ .tb-nav-center { flex: 1; display: flex; justify-content: center; } .tb-section-btn { display: flex; align-items: center; gap: 6px; background: rgba(26,20,16,0.06); border: none; border-radius: 8px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: #1A1410; cursor: pointer; transition: background 0.15s; font-family: var(--sans, sans-serif); } .tb-section-btn:hover { background: rgba(26,20,16,0.1); } .tb-section-btn.open { background: rgba(26,20,16,0.1); } .tb-chevron { width: 14px; height: 14px; transition: transform 0.2s; opacity: 0.55; flex-shrink: 0; } .tb-section-btn.open .tb-chevron { transform: rotate(180deg); } /* Full-width dropdown */ .tb-nav-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #FAF8F5; border-bottom: 1px solid rgba(26,20,16,0.08); z-index: 199; padding: 20px 28px 24px; box-shadow: 0 8px 32px rgba(26,20,16,0.1); } .tb-nav-dropdown.open { display: block; } .tb-dropdown-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 24px; } .tb-dd-group { display: flex; flex-direction: column; gap: 1px; } .tb-dd-group-label { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26,20,16,0.38); padding: 0 10px; margin-bottom: 4px; } .tb-dd-item { display: flex; align-items: center; gap: 8px; background: none; border: none; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 500; color: #3D2E22; cursor: pointer; text-align: left; width: 100%; transition: background 0.12s, color 0.12s; font-family: var(--sans, sans-serif); } .tb-dd-item:hover { background: rgba(26,20,16,0.06); color: #1A1410; } .tb-dd-item.active { background: #1A1410; color: #FAF8F5; font-weight: 600; } .tb-vr-btn { background: rgba(181,58,42,0.07); color: #7A2A08; font-weight: 600; } .tb-vr-btn:hover { background: rgba(181,58,42,0.14); color: #5A1A02; } /* Right area */ .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .tb-local-pill { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: rgba(26,20,16,0.55); background: rgba(26,20,16,0.05); border-radius: 20px; padding: 4px 10px 4px 8px; white-space: nowrap; } .tb-local-pill svg { width: 11px; height: 11px; opacity: 0.55; flex-shrink: 0; } #loc-label { font-weight: 700; color: #1A1410; } .tb-user-label { font-size: 12px; font-weight: 600; color: rgba(26,20,16,0.65); padding: 4px 6px; white-space: nowrap; } .tb-logout-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(26,20,16,0.45); transition: background 0.15s, color 0.15s; flex-shrink: 0; } .tb-logout-btn:hover { background: rgba(181,58,42,0.1); color: #9A3A10; } .tb-logout-btn svg { width: 15px; height: 15px; } /* Vencimientos dot in dropdown */ #tb-ni-vencimientos { position: relative; } /* WAGON logo en topbar — wagon-oscuro.png es la versión para fondos claros */ .tb-brand { background: none; padding: 0; border-radius: 0; } .tb-wagon-logo { height: 22px; width: auto; display: block; opacity: 0.94; } /* rt-pill en topbar claro: texto oscuro */ .topbar .rt-pill { background: rgba(26,20,16,0.05); border-color: rgba(26,20,16,0.12); color: rgba(26,20,16,0.55) !important; } .topbar .rt-pill span { color: rgba(26,20,16,0.55) !important; } /* Botón Venta rápida en topbar */ .tb-venta-rapida-btn { display: flex; align-items: center; gap: 6px; background: #1A1410; color: #FAF8F5; border: none; border-radius: 8px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sans, sans-serif); transition: background 0.15s; white-space: nowrap; flex-shrink: 0; } .tb-venta-rapida-btn:hover { background: #2c2219; } .tb-venta-rapida-btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ FONDO GLOBAL UNIFICADO — v7.0.0 #FAF8F5 es el color base de todas las páginas. Se sobreescribe --page y se neutralizan los gradientes del dashboard sin tocar --parch (se usa también como color de texto claro sobre fondos oscuros en otros contextos). ════════════════════════════════════════════════════════════ */ :root { --page: #FAF8F5; } body, html, #pages, .page { background: #FAF8F5 !important; } /* Dashboard tenía gradientes parch→parch2; lo aplanamos */ #page-dashboard { background: #FAF8F5 !important; } /* ═══════════════════════════════════════════════════ STOCK REDESIGN — v7.0.0 (prefijo sk-) ═══════════════════════════════════════════════════ */ #page-stock { padding: 32px 40px 60px !important; overflow: visible !important; flex-direction: column !important; gap: 0 !important; min-height: 100% !important; box-sizing: border-box !important; } /* display solo cuando está activo — no interferir con display:none de páginas inactivas */ #page-stock.active { display: flex !important; } /* Breadcrumb */ .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-link:hover { color: #1A1410; } .sk-bc-sep { opacity: 0.4; } .sk-bc-cur { color: rgba(26,20,16,0.65); font-weight: 500; } /* Header */ .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-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .sk-btn-ghost { display: flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid rgba(26,20,16,0.15); border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 500; color: #1A1410; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--sans, sans-serif); white-space: nowrap; } .sk-btn-ghost:hover { border-color: rgba(26,20,16,0.3); box-shadow: 0 2px 8px rgba(26,20,16,0.07); } .sk-btn-primary { display: flex; align-items: center; gap: 7px; background: var(--gold, #c8622a); 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(--gold-lt, #e07a45); box-shadow: 0 4px 14px rgba(200,98,42,0.3); } /* KPI cards */ .sk-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .sk-kpi-card { background: #fff; border-radius: 14px; padding: 22px 24px; 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: 4px; } .sk-kpi-card-click { cursor: pointer; transition: box-shadow 0.15s; } .sk-kpi-card-click:hover { box-shadow: 0 2px 8px rgba(26,20,16,0.1), 0 6px 20px rgba(26,20,16,0.07); } .sk-kpi-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(26,20,16,0.05); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .sk-kpi-icon svg { width: 16px; height: 16px; color: rgba(26,20,16,0.55); } .sk-kpi-icon-warn { background: rgba(200,98,42,0.08); } .sk-kpi-icon-warn svg { color: var(--gold, #c8622a); } .sk-kpi-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: rgba(26,20,16,0.45); text-transform: uppercase; margin-bottom: 4px; } .sk-kpi-val { font-family: var(--serif, Georgia, serif); font-size: 30px; font-weight: 500; color: #1A1410; line-height: 1.1; letter-spacing: -0.02em; } .sk-kpi-val-sm { font-size: 22px; } .sk-kpi-val-warn { color: var(--gold, #c8622a); } .sk-kpi-sub { font-size: 12px; color: rgba(26,20,16,0.45); margin-top: 2px; } /* Filter bar */ .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-filter-top { display: flex; align-items: center; gap: 12px; } .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-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: #FAF8F5; outline: none; transition: border-color 0.15s; } .sk-search-input:focus { border-color: rgba(26,20,16,0.3); } .sk-search-input::placeholder { color: rgba(26,20,16,0.35); } .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: #FAF8F5; 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-row { display: flex; gap: 6px; 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:hover { border-color: rgba(26,20,16,0.3); color: #1A1410; } .sk-fpill.active { background: var(--gold, #c8622a); border-color: var(--gold, #c8622a); color: #fff; font-weight: 600; } /* Results bar */ .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; } /* Table */ .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 { width: 100%; border-collapse: collapse; font-size: 13px; } .sk-table thead tr { border-bottom: 1.5px solid rgba(26,20,16,0.07); } .sk-table th { padding: 13px 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(26,20,16,0.4); text-align: left; white-space: nowrap; background: #fff; } .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:last-child td { border-bottom: none; } .sk-table tbody tr:hover td { background: rgba(26,20,16,0.02); } /* Neutralizar clases viejas del stock-shell que ya no se usan */ #page-stock .stock-shell, #page-stock .stock-hero, #page-stock .stock-stats, #page-stock .stock-table-shell, #page-stock .stock-filter-panel, #page-stock .table-wrap, #page-stock .ph { display: none !important; } /* ───────────────────────────────────────────────────────── STOCK — overrides de clases antiguas dentro del sk-table Todas las reglas van prefijadas con #page-stock .sk-table-wrap para ganar especificidad sin tocar el resto del sistema ───────────────────────────────────────────────────────── */ /* Resetear thead heredado */ #page-stock .sk-table-wrap table, #page-stock .sk-table-wrap .sk-table { border-collapse: collapse; width: 100%; font-size: 13px; } #page-stock .sk-table-wrap thead tr { border-bottom: 1.5px solid rgba(26,20,16,0.07); background: #fff !important; } #page-stock .sk-table-wrap th { background: #fff !important; color: rgba(26,20,16,0.4) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; padding: 13px 16px !important; border: none !important; box-shadow: none !important; } #page-stock .sk-table-wrap td { padding: 14px 16px !important; border-bottom: 1px solid rgba(26,20,16,0.05) !important; border-top: none !important; background: transparent !important; vertical-align: middle !important; } #page-stock .sk-table-wrap tbody tr:last-child td { border-bottom: none !important; } #page-stock .sk-table-wrap tbody tr:hover td { background: rgba(26,20,16,0.018) !important; } #page-stock .sk-table-wrap tbody tr.stock-lotes-row td { background: rgba(26,20,16,0.02) !important; } /* Producto: nombre + meta */ #page-stock .sk-table-wrap .stock-prod-name { font-size: 13px !important; font-weight: 600 !important; color: #1A1410 !important; letter-spacing: -0.01em !important; } #page-stock .sk-table-wrap .stock-prod-meta { margin-top: 3px; } #page-stock .sk-table-wrap .stock-notes { font-size: 11px !important; color: rgba(26,20,16,0.45) !important; margin-top: 2px; } #page-stock .sk-table-wrap .stock-mini-pill { font-size: 10px !important; background: rgba(26,20,16,0.05) !important; color: rgba(26,20,16,0.55) !important; border: none !important; border-radius: 4px !important; padding: 1px 6px !important; font-weight: 500 !important; } #page-stock .sk-table-wrap .stock-warn-badge { font-size: 10px !important; background: rgba(200,98,42,0.08) !important; color: var(--gold, #c8622a) !important; border-radius: 4px !important; padding: 1px 6px !important; border: none !important; } /* Tags de categoría y sucursal */ #page-stock .sk-table-wrap .tag { font-size: 10px !important; font-weight: 600 !important; border-radius: 6px !important; padding: 3px 8px !important; border: 1.5px solid transparent !important; letter-spacing: 0.03em !important; white-space: nowrap !important; } #page-stock .sk-table-wrap .tag-dim { background: rgba(26,20,16,0.05) !important; color: rgba(26,20,16,0.65) !important; border-color: rgba(26,20,16,0.08) !important; } #page-stock .sk-table-wrap .tag-l1, #page-stock .sk-table-wrap .tag-l2 { background: rgba(26,20,16,0.06) !important; color: rgba(26,20,16,0.6) !important; border-color: rgba(26,20,16,0.1) !important; } #page-stock .sk-table-wrap .tag-ok { background: rgba(34,139,34,0.07) !important; color: #1A8040 !important; border-color: rgba(34,139,34,0.15) !important; } #page-stock .sk-table-wrap .tag-lo { background: rgba(200,98,42,0.08) !important; color: #9A4A00 !important; border-color: rgba(200,98,42,0.2) !important; } #page-stock .sk-table-wrap .tag-cr { background: rgba(181,58,42,0.08) !important; color: #9A2A10 !important; border-color: rgba(181,58,42,0.2) !important; } /* Cantidad */ #page-stock .sk-table-wrap .stock-qty { font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; } #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 !important; color: rgba(26,20,16,0.4) !important; margin-top: 2px !important; } /* Precio */ #page-stock .sk-table-wrap .stock-price { font-size: 13px !important; font-weight: 600 !important; color: #1A1410 !important; } /* Próx. vencimiento */ #page-stock .sk-table-wrap .stock-next { font-size: 13px !important; font-weight: 600 !important; } #page-stock .sk-table-wrap .stock-next-empty { color: rgba(26,20,16,0.3) !important; } /* Nivel / barra */ #page-stock .sk-table-wrap .stock-level { min-width: 120px; } #page-stock .sk-table-wrap .stock-level-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 5px !important; } #page-stock .sk-table-wrap .stock-level-value { font-size: 11px !important; color: rgba(26,20,16,0.45) !important; } #page-stock .sk-table-wrap .bar { height: 4px !important; background: rgba(26,20,16,0.07) !important; border-radius: 2px !important; overflow: hidden !important; } #page-stock .sk-table-wrap .bar-fill { height: 100% !important; border-radius: 2px !important; transition: width 0.4s ease !important; } /* Acciones */ #page-stock .sk-table-wrap .stock-actions { display: flex; gap: 4px; align-items: center; } #page-stock .sk-table-wrap .btn-icon { width: 28px !important; height: 28px !important; border-radius: 7px !important; border: 1.5px solid rgba(26,20,16,0.1) !important; background: #fff !important; color: rgba(26,20,16,0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: border-color 0.12s, color 0.12s !important; } #page-stock .sk-table-wrap .btn-icon:hover { border-color: rgba(26,20,16,0.3) !important; color: #1A1410 !important; } #page-stock .sk-table-wrap .btn-icon svg { width: 12px !important; height: 12px !important; } /* Expand button */ #page-stock .sk-table-wrap .stock-expand-btn { width: 20px !important; height: 20px !important; border-radius: 5px !important; border: 1.5px solid rgba(26,20,16,0.1) !important; background: #fff !important; color: rgba(26,20,16,0.45) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; flex-shrink: 0 !important; } /* ═══════════════════════════════════════════════════════════════════ CIERRE DE CAJA v2 — cc2- prefix ═══════════════════════════════════════════════════════════════════ */ /* Active display fix — ONLY on .active to avoid "all pages show" bug */ #page-cierre.active { display: flex !important; flex-direction: column; } /* Page container */ #page-cierre { padding: 28px 32px 48px; gap: 22px; background: var(--page); min-height: 100vh; box-sizing: border-box; } /* ── Breadcrumb ── */ .cc2-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--char3); font-family: var(--mono); letter-spacing: 0.04em; margin-bottom: 2px; } .cc2-bc-link { cursor: pointer; color: var(--char3); transition: color 0.15s; } .cc2-bc-link:hover { color: var(--leather); } .cc2-bc-sep { opacity: 0.5; } .cc2-bc-current { color: var(--char2); font-weight: 500; } /* ── Page Header ── */ .cc2-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; } .cc2-header-left { display: flex; flex-direction: column; gap: 4px; } .cc2-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leather); font-family: var(--mono); } .cc2-title { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--char); margin: 0; line-height: 1.1; } .cc2-subtitle { font-size: 12px; color: var(--char3); margin: 0; font-family: var(--sans); } .cc2-btn-cerrar { display: inline-flex; align-items: center; gap: 7px; background: #C8622A; color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s, box-shadow 0.15s, transform 0.1s; box-shadow: 0 2px 12px rgba(200,98,42,0.28); white-space: nowrap; } .cc2-btn-cerrar:hover { background: #b3571f; box-shadow: 0 4px 18px rgba(200,98,42,0.38); transform: translateY(-1px); } .cc2-btn-cerrar:active { transform: translateY(0); } /* ── Hero Card ── */ .cc2-hero { background: #C8622A; border-radius: 16px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 8px 32px rgba(200,98,42,0.22); position: relative; overflow: hidden; } .cc2-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 100% 0%, rgba(255,200,140,.18) 0%, transparent 55%), radial-gradient(80% 80% at 0% 100%, rgba(0,0,0,.12) 0%, transparent 55%); } .cc2-hero-left { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; } .cc2-hero-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); font-family: var(--mono); } .cc2-hero-total { font-family: var(--serif); font-size: 46px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 2px 4px rgba(0,0,0,0.12); } .cc2-hero-status { font-size: 11px; color: rgba(255,255,255,0.65); font-family: var(--mono); } .cc2-hero-egresos { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,220,180,0.9); font-family: var(--mono); margin-top: 2px; } .cc2-hero-kpis { display: flex; gap: 12px; position: relative; z-index: 1; } .cc2-hero-kpi { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; backdrop-filter: blur(4px); } .cc2-hero-kpi-icon { color: rgba(255,255,255,0.6); line-height: 1; } .cc2-hero-kpi-val { font-size: 17px; font-weight: 700; color: #fff; font-family: var(--mono); letter-spacing: -0.01em; } .cc2-hero-kpi-lbl { font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); white-space: nowrap; } /* ── Generic Cards ── */ .cc2-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(26,20,16,0.07), 0 4px 16px rgba(26,20,16,0.05); padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; } .cc2-card-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--leather); font-family: var(--mono); margin-bottom: -8px; } .cc2-card-title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--char); line-height: 1.2; } .cc2-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cc2-card-full { width: 100%; box-sizing: border-box; } /* ── 2-col and 3-col grids ── */ .cc2-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .cc2-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; } /* ── Donut layout ── */ .cc2-donut-layout { display: flex; align-items: center; gap: 20px; } .cc2-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 4px; } .cc2-legend-row { display: flex; align-items: center; gap: 7px; font-size: 12px; } .cc2-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cc2-legend-name { flex: 1; color: var(--char2); font-size: 12px; } .cc2-legend-amount { font-weight: 600; color: var(--char); font-family: var(--mono); font-size: 12px; } .cc2-legend-pct { font-size: 10px; color: var(--char3); font-family: var(--mono); min-width: 28px; text-align: right; } .cc2-legend-bar-wrap { width: 100%; height: 3px; background: var(--parch3); border-radius: 2px; overflow: hidden; margin-bottom: 6px; } .cc2-legend-bar { height: 100%; border-radius: 2px; width: 0%; transition: width 0.5s ease; } /* ── Detalle de ventas ── */ .cc2-det-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cc2-det-count { font-family: var(--mono); font-size: 10px; color: var(--char3); } .cc2-filtro-btns { display: flex; gap: 4px; } .cc2-table-wrap { overflow-x: auto; } .cc2-table { width: 100%; border-collapse: collapse; font-size: 11px; } .cc2-table thead th { padding: 7px 10px; text-align: left; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--char3); font-weight: 600; border-bottom: 1.5px solid var(--parch3); font-family: var(--mono); } .cc2-th-right { text-align: right !important; } .cc2-table tbody td { padding: 7px 10px; color: var(--char2); border-bottom: 1px solid var(--parch3); vertical-align: middle; } .cc2-table tfoot td { padding: 8px 10px; font-weight: 600; color: var(--char); border-top: 2px solid var(--parch3); } .cc2-empty-cell { padding: 20px; text-align: center; color: var(--char3); } /* ── Top productos ── */ .cc2-top-prod-body { display: flex; flex-direction: column; gap: 6px; } .cc2-empty { color: var(--char3); font-size: 12px; padding: 16px 0; } /* ── Comparativa ── */ .cc2-comp-body { display: flex; flex-direction: column; gap: 0; } .cc2-comp-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--parch3); } .cc2-comp-row:last-child { border-bottom: none; } .cc2-comp-label { flex: 1; font-size: 12px; color: var(--char2); } .cc2-comp-val { font-size: 13px; font-weight: 600; color: var(--char); font-family: var(--mono); } /* ── Historial list ── */ .cc2-hist-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; } .cc2-hist-item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 10px; cursor: pointer; transition: background 0.12s; } .cc2-hist-item:hover { background: var(--parch2); } .cc2-hist-avatar { width: 40px; height: 40px; border-radius: 8px; background: #C8622A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--mono); flex-shrink: 0; letter-spacing: 0.02em; } .cc2-hist-info { flex: 1; min-width: 0; } .cc2-hist-fecha { font-size: 12px; font-weight: 500; color: var(--char); } .cc2-hist-meta { font-size: 10px; color: var(--char3); margin-top: 2px; font-family: var(--mono); } .cc2-hist-amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .cc2-hist-total { font-size: 14px; font-weight: 700; color: var(--char); font-family: var(--mono); } .cc2-hist-breakdown { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .cc2-hist-bp { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-weight: 500; } .cc2-hist-bp-ef { background: rgba(45,122,79,0.10); color: var(--green); } .cc2-hist-bp-db { background: rgba(37,99,235,0.10); color: var(--blue); } .cc2-hist-bp-tr { background: rgba(180,120,0,0.10); color: var(--amber); } .cc2-hist-obs-btn { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid var(--parch3); background: #fff; color: var(--char3); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: border-color 0.12s, color 0.12s; flex-shrink: 0; } .cc2-hist-obs-btn:hover { border-color: var(--leather); color: var(--leather); } .cc2-hist-obs-btn.has-obs { border-color: var(--leather); color: var(--leather); background: rgba(200,98,42,0.06); } /* ── Operations cards body ── */ .cc2-op-body { display: flex; flex-direction: column; gap: 0; } /* ── Responsive ── */ @media (max-width: 900px) { .cc2-grid-2col, .cc2-grid-3col { grid-template-columns: 1fr; } .cc2-hero { flex-direction: column; align-items: flex-start; } .cc2-hero-kpis { width: 100%; justify-content: space-between; } .cc2-header { flex-direction: column; align-items: flex-start; } #page-cierre { padding: 16px 16px 40px; } .cc2-hero-total { font-size: 34px; } } @media (max-width: 600px) { .cc2-hero-kpis { flex-direction: column; gap: 8px; } .cc2-hero-kpi { flex-direction: row; min-width: unset; width: 100%; gap: 10px; } .cc2-card { padding: 18px 16px; } }