/* ============================================================ DGV Tracker — Redesign Drop-in replacement for /pwa/styles.css - Inter typography - 3 themes: refined (default) · mono · warm - Light + dark mode (data-mode on ) - SVG icon system (see icons.js) - Preserves ALL existing class names from the original Theme switching (set on ): data-theme="refined" | "mono" | "warm" (default: refined) data-mode="light" | "dark" (default: light) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap'); /* ====================== TOKENS (REFINED — default) ====================== */ :root, :root[data-theme="refined"][data-mode="light"] { --bg: #f7f7f8; --surface: #ffffff; --surface-2: #fafafa; --surface-sunk: #f0f0f2; --border: #e6e6ea; --border-strong: #d2d2d8; --fg: #15151a; --fg-2: #38383f; --muted: #6e6e76; --muted-2: #9a9aa3; --accent: #2e5cff; --accent-fg: #ffffff; --accent-soft: #e8eeff; --accent-hover: #1f4ae6; --success: #0f9b6e; --success-soft: #e2f5ec; --warning: #d97706; --warning-soft: #fdf2e2; --danger: #d04545; --danger-soft: #fae5e5; --info: #5050d4; --info-soft: #ecebfb; --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.04), 0 1px 1px rgba(15, 15, 20, 0.02); --shadow: 0 1px 3px rgba(15, 15, 20, 0.06), 0 1px 2px rgba(15, 15, 20, 0.04); --shadow-md: 0 4px 12px rgba(15, 15, 20, 0.08), 0 2px 4px rgba(15, 15, 20, 0.04); --shadow-lg: 0 12px 32px rgba(15, 15, 20, 0.12), 0 4px 8px rgba(15, 15, 20, 0.06); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Legacy variables (kept so existing code paths keep working) */ --azul: var(--accent); --azul-oscuro: var(--accent-hover); --verde: var(--success); --rojo: var(--danger); --naranja: var(--warning); --gris-bg: var(--bg); --gris-borde: var(--border); --gris-texto: var(--muted); --texto: var(--fg); } :root[data-theme="refined"][data-mode="dark"] { --bg: #0d0d10; --surface: #18181c; --surface-2: #1e1e23; --surface-sunk: #0a0a0d; --border: #2a2a30; --border-strong: #3a3a42; --fg: #f4f4f6; --fg-2: #d0d0d6; --muted: #8a8a94; --muted-2: #5a5a64; --accent: #6f8aff; --accent-fg: #0d0d10; --accent-soft: #1c2342; --accent-hover: #8aa1ff; --success: #34c894; --success-soft: #0f3024; --warning: #f0a857; --warning-soft: #3a2810; --danger: #f06464; --danger-soft: #3a1818; --info: #8888ee; --info-soft: #1e1e3a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); } /* ====================== MONO — high-contrast minimal ====================== */ :root[data-theme="mono"][data-mode="light"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #fafafa; --surface-sunk: #f4f4f4; --border: #ececec; --border-strong: #1a1a1a; --fg: #0a0a0a; --fg-2: #1f1f1f; --muted: #6a6a6a; --muted-2: #a0a0a0; --accent: #0a0a0a; --accent-fg: #ffffff; --accent-soft: #f0f0f0; --accent-hover: #1a1a1a; --success: #1f7a4f; --success-soft: #ebf6f0; --warning: #b25e00; --warning-soft: #fbeed6; --danger: #b91c1c; --danger-soft: #f9e2e2; --info: #2e2e2e; --info-soft: #f0f0f0; --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-xl: 16px; --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); } :root[data-theme="mono"][data-mode="dark"] { --bg: #000000; --surface: #0a0a0a; --surface-2: #141414; --surface-sunk: #050505; --border: #1f1f1f; --border-strong: #f0f0f0; --fg: #fafafa; --fg-2: #e0e0e0; --muted: #8a8a8a; --muted-2: #5a5a5a; --accent: #ffffff; --accent-fg: #0a0a0a; --accent-soft: #1f1f1f; --accent-hover: #f0f0f0; --success: #4ade80; --success-soft: #102818; --warning: #f5a623; --warning-soft: #2c1f10; --danger: #ef4444; --danger-soft: #2a1212; --info: #c0c0c0; --info-soft: #1a1a1a; --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-xl: 16px; --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: none; } /* ====================== WARM — workshop / paper feel ====================== */ :root[data-theme="warm"][data-mode="light"] { --bg: #f5f1ea; --surface: #fcf9f3; --surface-2: #f8f4ec; --surface-sunk: #ede7db; --border: #e1d9c8; --border-strong: #c9bea7; --fg: #1d1812; --fg-2: #3d362b; --muted: #7a6f5e; --muted-2: #a09783; --accent: #b8552a; --accent-fg: #fffaf0; --accent-soft: #f6e6d8; --accent-hover: #9c4520; --success: #5a7a3a; --success-soft: #ecf0dc; --warning: #c87f00; --warning-soft: #fbeec8; --danger: #b04030; --danger-soft: #f5dcd6; --info: #5c5a8a; --info-soft: #ebeaf0; } :root[data-theme="warm"][data-mode="dark"] { --bg: #16110a; --surface: #211a10; --surface-2: #2a2117; --surface-sunk: #100b06; --border: #38301f; --border-strong: #4f4530; --fg: #f5ecd8; --fg-2: #d8ccb0; --muted: #948a72; --muted-2: #5e574a; --accent: #e08555; --accent-fg: #16110a; --accent-soft: #3a2218; --accent-hover: #f0a070; --success: #92c060; --success-soft: #1e2c10; --warning: #e8b558; --warning-soft: #3a2c10; --danger: #e07060; --danger-soft: #3a1c14; --info: #9c9adc; --info-soft: #1c1a3a; } /* ====================== RESET & BASE ====================== */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } html, body { margin: 0; padding: 0; height: 100vh; height: 100dvh; width: 100vw; overflow: hidden; font-family: var(--font-sans); background: var(--bg); color: var(--fg); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; font-feature-settings: "cv11", "ss01", "ss03"; } button, input, textarea, select { font-family: inherit; color: inherit; } ::selection { background: var(--accent); color: var(--accent-fg); } /* ====================== ICON SYSTEM ====================== */ .i, [data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; } .i svg, [data-icon] svg { display: block; } .icon { color: currentColor; } /* ====================== SCREENS / LAYOUT ====================== */ .screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .screen.hidden { display: none; } .content { flex: 1; padding: 20px 18px 28px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; box-sizing: border-box; } .content > * { max-width: 100%; } #repricer-list { max-width: 100%; overflow: hidden; } .content-home { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 12px 12px 24px; } .content-home > * { flex-shrink: 0; } #dashboard-cards { width: 100%; display: flex; flex-direction: column; gap: 12px; } #dashboard-cards > * { flex-shrink: 0; } /* ====================== APPBAR ====================== */ .appbar { display: flex; align-items: center; gap: 10px; background: var(--surface); padding: 10px 12px; border-bottom: 1px solid var(--border); min-height: 56px; position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(180%) blur(10px); } .appbar-title { flex: 1; font-size: 16px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; } .appbar-user { flex: 1; font-size: 13px; color: var(--muted); font-weight: 500; } .icon-btn { background: none; border: none; padding: 9px; cursor: pointer; color: var(--fg-2); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .icon-btn:hover { background: var(--surface-sunk); color: var(--fg); } .icon-btn:active { transform: scale(0.94); } /* ====================== TYPOGRAPHY ====================== */ h1 { font-size: 26px; font-weight: 700; margin: 0 0 6px; text-align: center; letter-spacing: -0.025em; color: var(--fg); } h2 { font-size: 19px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.015em; } h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; } .subtitle { color: var(--muted); text-align: center; margin: 0 0 22px; font-size: 14px; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .mono { font-family: var(--font-mono); } /* ====================== INPUTS ====================== */ label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--fg-2); font-weight: 500; } input[type="text"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], textarea, select { display: block; width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); margin-top: 6px; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; -webkit-appearance: none; appearance: none; } input::placeholder, textarea::placeholder { color: var(--muted-2); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .search-input { flex: 1; background: var(--surface-sunk); border: 1px solid transparent; border-radius: var(--radius); padding: 9px 14px; font-size: 14px; margin-top: 0; } /* ====================== BUTTONS ====================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; font-size: 15px; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; font-family: inherit; text-align: center; margin-top: 10px; transition: transform 0.06s, background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s; line-height: 1; letter-spacing: -0.005em; } .btn:active { transform: scale(0.985); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn [data-icon] { width: 18px; height: 18px; } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-sunk); } .btn-success { background: var(--success); color: white; border-color: var(--success); } .btn-danger { background: var(--danger); color: white; border-color: var(--danger); } .btn-ghost { background: transparent; color: var(--fg-2); border-color: transparent; } .btn-ghost:hover { background: var(--surface-sunk); } .btn-link { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 500; padding: 10px; text-align: center; margin-top: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; } .btn-link:hover { color: var(--accent-hover); } .btn-link-light { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); } /* ====================== BIG SCAN — the hero CTA ====================== */ .big-scan { width: 200px; height: 200px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 16px 40px -8px color-mix(in oklab, var(--accent), transparent 60%), 0 0 0 6px color-mix(in oklab, var(--accent), transparent 88%); font-family: inherit; transition: transform 0.15s, box-shadow 0.2s; position: relative; align-self: center; margin: 8px 0; } .big-scan::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--accent), transparent 75%); animation: pulse-ring 2.4s ease-out infinite; pointer-events: none; } @keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.18); opacity: 0; } } .big-scan:active { transform: scale(0.96); box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--accent), transparent 50%); } .big-scan-icon { display: inline-flex; } .big-scan-icon [data-icon] svg { width: 56px; height: 56px; stroke-width: 1.5; } .big-scan-icon { font-size: 56px; line-height: 1; } .big-scan-text { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; } .content-home .big-scan { width: 188px; height: 188px; } .content-home .big-scan-icon [data-icon] svg { width: 52px; height: 52px; } .content-home .big-scan-text { font-size: 14px; } .home-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .home-btns .btn { margin-top: 0; } /* ====================== LOGO / BRAND ====================== */ .logo { text-align: center; margin: 28px 0 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .logo-mark { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; color: var(--fg); line-height: 1; } .logo-mark .accent { color: var(--accent); } .logo-sub { font-size: 10px; letter-spacing: 0.4em; font-weight: 600; color: var(--muted); text-transform: uppercase; } /* ====================== LOGIN — PIN ====================== */ #screen-login .content { display: flex; flex-direction: column; justify-content: center; padding: 24px; max-width: 380px; margin: 0 auto; width: 100%; } .pin-display { display: flex; justify-content: center; gap: 16px; margin: 22px 0 30px; } .pin-display span { width: 14px; height: 14px; border-radius: 50%; background: transparent; border: 1.5px solid var(--border-strong); transition: background 0.15s, border-color 0.15s, transform 0.15s; } .pin-display span.filled { background: var(--accent); border-color: var(--accent); transform: scale(1.15); } .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 0 auto; } .num { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); aspect-ratio: 1; font-size: 24px; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--fg); transition: background 0.1s, transform 0.06s, border-color 0.1s; display: flex; align-items: center; justify-content: center; } .num:hover { background: var(--surface-sunk); } .num:active { transform: scale(0.94); background: var(--accent-soft); border-color: var(--accent); } .num-aux { background: transparent; border-color: transparent; color: var(--muted); font-size: 18px; } .num-aux:hover { background: var(--surface-sunk); } .error { color: var(--danger); text-align: center; margin-top: 12px; font-size: 13px; min-height: 18px; font-weight: 500; } /* ====================== DASHBOARD CARDS ====================== */ .dash-card { background: var(--surface); border-radius: var(--radius-lg); padding: 14px; border: 1px solid var(--border); transition: transform 0.06s; } .dash-skeleton { min-height: 100px; background: linear-gradient(90deg, var(--surface-sunk) 0%, var(--surface) 50%, var(--surface-sunk) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: 1px solid var(--border); } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* HOY hero card */ .dash-hoy { background: var(--fg); color: var(--bg); border-color: var(--fg); position: relative; overflow: hidden; } [data-theme="refined"][data-mode="light"] .dash-hoy { background: linear-gradient(135deg, var(--fg) 0%, var(--fg-2) 100%); } [data-theme="refined"][data-mode="dark"] .dash-hoy { background: linear-gradient(135deg, #1c2342 0%, #2e5cff 100%); color: #fff; border-color: transparent; } [data-theme="mono"][data-mode="dark"] .dash-hoy { background: #1a1a1a; color: #fff; border: 1px solid #2a2a2a; } [data-theme="warm"] .dash-hoy { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: var(--accent-fg); border-color: var(--accent); } [data-theme="warm"][data-mode="dark"] .dash-hoy { background: linear-gradient(135deg, #3a2218 0%, var(--accent) 100%); color: #fff; } .dash-hoy-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .dash-hoy-titulo { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } .dash-hoy-titulo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--success), transparent 70%); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .dash-hoy-fecha { font-size: 12px; opacity: 0.7; font-weight: 500; } .dash-hoy-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .dash-hoy-stat { background: rgba(255,255,255,0.08); border-radius: var(--radius); padding: 11px 8px; text-align: left; } .dash-hoy-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.02em; } .dash-hoy-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; margin-top: 5px; font-weight: 600; } .dash-ganancia-pos { background: color-mix(in oklab, var(--success), transparent 70%); } .dash-ganancia-neg { background: color-mix(in oklab, var(--danger), transparent 70%); } /* Legacy month card */ .dash-mes-titulo { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; margin-bottom: 10px; letter-spacing: 0.02em; } .dash-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; } .dash-label { font-size: 13px; color: var(--muted); } .dash-value { font-size: 16px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; } .dash-flujo { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); } .dash-flujo .dash-label { font-weight: 600; color: var(--fg); font-size: 14px; } .dash-flujo .dash-value { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .dash-flujo.positivo .dash-value { color: var(--success); } .dash-flujo.negativo .dash-value { color: var(--danger); } .dash-mini { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; } .dashboard-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dash-small { padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 4px; } .dash-small-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; } .dash-small-icon [data-icon] svg { width: 18px; height: 18px; } .dash-small-titulo { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .dash-small-num { font-size: 26px; font-weight: 700; color: var(--fg); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; } .dash-small-sub { font-size: 11px; color: var(--muted); } .dash-small-monto { font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--fg-2); font-variant-numeric: tabular-nums; } /* Alertas */ .dash-alertas { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning), transparent 60%); } .dash-alerta-titulo { font-size: 13px; font-weight: 700; color: var(--warning); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; } .dash-alerta-titulo-ok { color: var(--success); } .dash-alerta-grupo { margin-bottom: 10px; } .dash-alerta-grupo:last-child { margin-bottom: 0; } .dash-alerta-subtitulo { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .dash-alerta-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 4px; border-left: 3px solid var(--warning); transition: transform 0.1s, background 0.1s; cursor: pointer; } .dash-alerta-row:hover { background: var(--surface-2); } .dash-alerta-row:active { transform: scale(0.985); } .dash-alerta-row.alerta-rojo { border-left-color: var(--danger); background: var(--danger-soft); } .dash-alerta-img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-xs); flex-shrink: 0; } .dash-alerta-img-placeholder { width: 36px; height: 36px; background: var(--surface-sunk); border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; color: var(--muted-2); flex-shrink: 0; } .dash-alerta-img-placeholder [data-icon] svg { width: 16px; height: 16px; } .dash-alerta-info { flex: 1; min-width: 0; } .dash-alerta-nombre { font-size: 13px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-alerta-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .dash-alerta-mas { font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; font-style: italic; } .dash-alerta-ok-msg { font-size: 12px; color: var(--muted); } /* Top productos */ .dash-top { } .dash-top-titulo { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; } .dash-top-titulo [data-icon] { color: var(--warning); } .dash-top-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .dash-top-row:last-child { border-bottom: 0; } .dash-top-row:hover { background: var(--surface-2); } .dash-top-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sunk); color: var(--fg); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-top-row:first-child .dash-top-pos { background: var(--warning); color: white; } .dash-top-img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-xs); flex-shrink: 0; } .dash-top-img-placeholder { width: 36px; height: 36px; background: var(--surface-sunk); border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; color: var(--muted-2); flex-shrink: 0; } .dash-top-info { flex: 1; min-width: 0; } .dash-top-nombre { font-size: 13px; font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-top-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .dash-top-meta b { color: var(--fg); font-variant-numeric: tabular-nums; } /* Durmientes */ .dash-durmientes { background: var(--info-soft); border-color: color-mix(in oklab, var(--info), transparent 60%); } .dash-durmientes-titulo { font-size: 13px; font-weight: 700; color: var(--info); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; } .dash-durmientes-count { background: var(--info); color: white; border-radius: var(--radius-pill); padding: 1px 8px; font-size: 11px; } .dash-durmientes-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 4px; cursor: pointer; } .dash-durmientes-img, .dash-durmientes-img-placeholder { width: 36px; height: 36px; border-radius: var(--radius-xs); object-fit: cover; flex-shrink: 0; } .dash-durmientes-img-placeholder { background: var(--surface-sunk); display: flex; align-items: center; justify-content: center; color: var(--muted-2); } .dash-durmientes-info { flex: 1; min-width: 0; } .dash-durmientes-nombre { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-durmientes-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } /* Semana */ .dash-semana-titulo { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; } .dash-semana-row { display: flex; align-items: center; gap: 12px; } .dash-semana-stat { flex: 1; } .dash-semana-num { font-size: 22px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -0.02em; } .dash-semana-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; font-weight: 600; } .dash-semana-tendencia { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 4px; flex-direction: column; align-items: flex-end; background: var(--surface-sunk); flex-shrink: 0; min-width: 76px; } .dash-semana-tendencia.tendencia-up { background: var(--success-soft); color: var(--success); } .dash-semana-tendencia.tendencia-down { background: var(--danger-soft); color: var(--danger); } .dash-semana-tendencia.tendencia-flat { background: var(--surface-sunk); color: var(--muted); } .dash-semana-tendencia-sub { font-size: 9px; font-weight: 500; opacity: 0.7; margin-top: 1px; } /* ====================== HINTS ====================== */ .hint { color: var(--muted); font-size: 13px; text-align: center; margin-top: 14px; padding: 0 16px; } /* ====================== SCAN SCREEN ====================== */ #screen-scan { background: #000; } #reader { position: absolute; inset: 0; width: 100%; height: 100%; } #reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; } .scan-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .scan-frame { width: 80vw; max-width: 300px; height: 200px; border-radius: 18px; position: relative; box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); } .scan-frame::before, .scan-frame::after, .scan-frame > *::before, .scan-frame > *::after { display: none; } .scan-frame::before { display: block; content: ''; position: absolute; inset: 0; border-radius: 18px; } /* Corner brackets — drawn with box-shadow segments */ .scan-frame { background: linear-gradient(white, white) top left / 28px 3px no-repeat, linear-gradient(white, white) top left / 3px 28px no-repeat, linear-gradient(white, white) top right / 28px 3px no-repeat, linear-gradient(white, white) top right / 3px 28px no-repeat, linear-gradient(white, white) bottom left / 28px 3px no-repeat, linear-gradient(white, white) bottom left / 3px 28px no-repeat, linear-gradient(white, white) bottom right / 28px 3px no-repeat, linear-gradient(white, white) bottom right / 3px 28px no-repeat; } .scan-line { position: absolute; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent), white 20%), transparent); box-shadow: 0 0 12px var(--accent); animation: scan-sweep 2.2s ease-in-out infinite; } @keyframes scan-sweep { 0%, 100% { top: 12%; opacity: 0; } 10% { opacity: 1; } 50% { top: 88%; opacity: 1; } 90% { opacity: 1; } } .scan-hint { color: white; margin-top: 24px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .scan-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; } /* ====================== PRODUCT CARDS ====================== */ .product-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); margin-bottom: 14px; } .product-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-sunk); display: block; } .product-info { padding: 16px; } .product-name { font-size: 16px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.01em; } .product-qty { font-size: 30px; font-weight: 700; color: var(--fg); margin: 8px 0; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .product-qty small { font-size: 13px; color: var(--muted); font-weight: 500; } /* Meta lists */ .meta-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 4px 14px; margin-bottom: 14px; } .meta-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; gap: 12px; } .meta-row:last-child { border-bottom: none; } .meta-label { color: var(--muted); } .meta-value { font-weight: 500; text-align: right; word-break: break-all; color: var(--fg); } /* Tracking pill */ .tracking-pill { background: var(--fg); color: var(--bg); padding: 12px 16px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 14px; text-align: center; margin-bottom: 18px; font-weight: 600; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; gap: 8px; } .tracking-pill [data-icon] { opacity: 0.7; } .tracking-pill [data-icon] svg { width: 16px; height: 16px; } /* Status badges */ .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-sunk); color: var(--fg-2); } .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-en-camino, .status-enviado, .status-recogido-transportista { background: var(--warning-soft); color: var(--warning); } .status-transportista-local, .status-en-pais, .status-confirmado { background: var(--accent-soft); color: var(--accent); } .status-aduana { background: var(--info-soft); color: var(--info); } .status-listo-retiro, .status-entrega-hoy, .status-entregado, .status-recibido, .status-reembolsado { background: var(--success-soft); color: var(--success); } .status-fallo-entrega, .status-cancelado, .status-devuelto, .status-perdido { background: var(--danger-soft); color: var(--danger); } .status-actualizacion, .status-evento-paquete, .status-evento-pedido, .status-cerrado { background: var(--surface-sunk); color: var(--muted); } /* ====================== LIST CARDS (pedidos / stock / etc) ====================== */ .pedido-card, .stock-card { display: flex; gap: 12px; background: var(--surface); padding: 12px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.12s, transform 0.06s, background 0.12s; text-align: left; width: 100%; font-family: inherit; align-items: center; } .pedido-card:hover, .stock-card:hover { border-color: var(--border-strong); background: var(--surface-2); } .pedido-card:active, .stock-card:active { transform: scale(0.99); } .pedido-card.selectable:hover { border-color: var(--accent); } .pedido-card.alerta-naranja { border-left: 3px solid var(--warning); } .pedido-card.alerta-rojo { border-left: 3px solid var(--danger); background: var(--danger-soft); } .pedido-img, .stock-img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-sunk); flex-shrink: 0; } .pedido-detalle, .stock-detalle { flex: 1; min-width: 0; } .pedido-nombre, .stock-nombre { font-size: 14px; font-weight: 500; margin-bottom: 2px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.005em; } .pedido-meta, .stock-sku { font-size: 12px; color: var(--muted); } .stock-sku { font-family: var(--font-mono); } .stock-cantidad { font-size: 22px; font-weight: 700; color: var(--fg); flex-shrink: 0; text-align: right; min-width: 50px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stock-cantidad.zero { color: var(--danger); } .stock-cantidad small { display: block; font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } /* Empty states */ .empty-state { text-align: center; padding: 56px 20px; color: var(--muted); } .empty-state-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--surface-sunk); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .empty-state-icon [data-icon] svg { width: 26px; height: 26px; } .empty-state-title { font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 4px; } /* ====================== SECTIONS (collapsible) ====================== */ .section { margin-bottom: 10px; } .section-header { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.1s, border-color 0.1s; } .section-header:hover { background: var(--surface-2); border-color: var(--border-strong); } .section-chevron { color: var(--muted); transition: transform 0.2s; flex-shrink: 0; } .section.collapsed .section-chevron { transform: rotate(-90deg); } .section-text { flex: 1; min-width: 0; } .section-title { font-size: 14px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 8px; } .section-count { background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); min-width: 20px; text-align: center; } .section-desc { font-size: 12px; color: var(--muted); margin-top: 2px; } .section-content { overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; } .section.collapsed .section-content { max-height: 0 !important; opacity: 0; pointer-events: none; } /* ====================== PRODUCT EDIT ====================== */ .producto-header { text-align: center; margin-bottom: 18px; } .producto-header img { width: 140px; height: 140px; border-radius: var(--radius); object-fit: cover; background: var(--surface-sunk); border: 1px solid var(--border); } .producto-stock-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .producto-stock-num { font-size: 44px; font-weight: 700; color: var(--fg); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .producto-stock-actions { display: flex; gap: 8px; } .btn-circle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.1s, border-color 0.1s; } .btn-circle:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .btn-circle [data-icon] svg { width: 18px; height: 18px; } /* ====================== INVENTARIO VISUAL (Stock grid) ====================== */ .content-inventario { padding: 12px; } .iv-sticky-top { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 0 0 10px; margin: -2px 0 4px; } .iv-ml-actions { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; } .iv-ml-actions::-webkit-scrollbar { display: none; } .btn-ml-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--fg); cursor: pointer; white-space: nowrap; transition: background 0.1s, border-color 0.1s; } .btn-ml-action:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn-ml-action [data-icon] svg { width: 14px; height: 14px; } .btn-ml-secondary { color: var(--muted); } .iv-sort-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .iv-sort-label { font-size: 12px; color: var(--muted); font-weight: 500; } .iv-sort-select { flex: 1; margin-top: 0; padding: 8px 32px 8px 12px; font-size: 13px; background-color: var(--surface); } .iv-filtro-estado { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; } .iv-filtro-estado::-webkit-scrollbar { display: none; } .iv-filtro-label { font-size: 12px; color: var(--muted); font-weight: 500; flex-shrink: 0; } .chip-filtro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--fg-2); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: background 0.1s, border-color 0.1s, color 0.1s; } .chip-filtro:hover { background: var(--surface-2); } .chip-filtro.active { background: var(--fg); color: var(--bg); border-color: var(--fg); } .iv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 16px; margin-top: 8px; width: 100%; max-width: 100%; } @media (max-width: 480px) { /* En celulares muy chicos, 2 columnas */ .iv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } @media (min-width: 900px) { .iv-grid { gap: 14px; } } .iv-card-wrapper { position: relative; display: flex; min-width: 0; max-width: 100%; overflow: hidden; } .iv-card-wrapper > .iv-card { width: 100%; max-width: 100%; min-width: 0; } .iv-card-delete { position: absolute; top: 6px; left: 6px; background: var(--surface); border: 1px solid var(--danger); color: var(--danger); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: var(--shadow-sm); } .iv-card-delete:active { background: var(--danger-soft); transform: scale(0.92); } .iv-card-delete [data-icon] svg { width: 12px; height: 12px; } .iv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; font-family: inherit; } .iv-card:hover { border-color: var(--border-strong); } .iv-card:active { transform: scale(0.985); } .iv-card-imgwrap { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1 / 1; background: var(--surface-sunk); overflow: hidden; flex-shrink: 0; } .iv-card-img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; display: block; } .iv-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted-2); } .iv-card-noimg [data-icon] svg { width: 32px; height: 32px; } .iv-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: var(--radius-pill); } .iv-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; } .iv-card-nombre { font-size: 12.5px; font-weight: 500; color: var(--fg); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; letter-spacing: -0.005em; } .iv-card-stockrow { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .iv-card-stock-edit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent), transparent 70%); color: var(--accent); cursor: pointer; user-select: none; align-self: center; margin-left: auto; flex-shrink: 0; padding: 0; line-height: 1; transition: background 0.1s; } .iv-card-stock-edit [data-icon] svg { width: 11px; height: 11px; } .iv-card-stock-edit:hover { background: color-mix(in oklab, var(--accent), transparent 60%); } .iv-card-stock-edit:active { transform: scale(0.92); } .iv-card-stock { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .iv-card-stock-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .iv-stock-ok { color: var(--success); } .iv-stock-low { color: var(--warning); } .iv-stock-zero { color: var(--danger); } .iv-card-tipo { font-size: 11px; color: var(--muted); margin-top: 2px; } /* Selection mode chip on card */ .iv-card-wrapper.selected .iv-card { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .iv-card-checkbox { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border-strong); z-index: 6; display: flex; align-items: center; justify-content: center; } .iv-card-wrapper.selected .iv-card-checkbox { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .iv-card-wrapper.selected .iv-card-checkbox [data-icon] svg { width: 14px; height: 14px; } /* ====================== FLOATING ACTION BAR ====================== */ .floating-action-bar { position: fixed; bottom: 16px; left: 12px; right: 12px; background: var(--fg); color: var(--bg); border-radius: var(--radius-lg); padding: 10px 12px; display: flex; align-items: center; gap: 12px; z-index: 100; box-shadow: var(--shadow-lg); animation: slide-up 0.25s ease both; } .floating-action-bar.hidden { display: none; } @keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .sel-counter { font-size: 13px; font-weight: 600; flex-shrink: 0; } .sel-counter b { display: inline-block; min-width: 12px; text-align: center; } .sel-actions { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; } .sel-actions::-webkit-scrollbar { display: none; } .sel-btn { background: rgba(255,255,255,0.1); border: none; color: var(--bg); border-radius: var(--radius-sm); padding: 7px 10px; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: background 0.1s; } .sel-btn:hover { background: rgba(255,255,255,0.18); } .sel-btn [data-icon] svg { width: 14px; height: 14px; } .sel-btn-danger { color: var(--danger); background: rgba(255,80,80,0.15); } .sel-btn-danger:hover { background: rgba(255,80,80,0.25); } .sel-btn-cancel { background: transparent; opacity: 0.6; } /* ====================== MODAL ====================== */ .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; animation: fade-in 0.2s ease both; } .modal.hidden { display: none; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal-overlay { position: absolute; inset: 0; background: rgba(15, 15, 20, 0.5); backdrop-filter: blur(8px); cursor: pointer; } .modal-content { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 22px 18px 24px; margin: 0 auto; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; z-index: 1; animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } .modal-content::before { content: ''; display: block; width: 36px; height: 4px; background: var(--border-strong); border-radius: 2px; margin: -8px auto 16px; } @media (min-width: 720px) { .modal { align-items: center; } .modal-content { border-radius: var(--radius-xl); max-width: 460px; } .modal-content::before { display: none; } } .modal-content h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; } .modal-subtitle { color: var(--muted); margin-bottom: 16px; font-size: 13px; } .modal-stock-info { background: var(--surface-sunk); border-radius: var(--radius); padding: 10px 12px; font-size: 12px; color: var(--fg-2); margin-bottom: 14px; line-height: 1.4; } .modal-mult-hint { color: var(--muted); font-size: 11.5px; line-height: 1.45; margin: 6px 0 14px; } .modal-actions { display: flex; gap: 8px; margin-top: 14px; } .modal-actions .btn { margin-top: 0; } .checkbox-label { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-sunk); border-radius: var(--radius); font-size: 13px; color: var(--fg-2); cursor: pointer; margin-bottom: 12px; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; } /* ====================== TOAST ====================== */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; z-index: 1000; max-width: calc(100vw - 32px); box-shadow: var(--shadow-lg); text-align: center; animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; display: inline-flex; align-items: center; gap: 8px; } .toast.hidden { display: none; } .toast.error { background: var(--danger); color: white; } .toast.success { background: var(--success); color: white; } .toast.warning { background: var(--warning); color: white; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ====================== LOADING ====================== */ .loading-overlay { position: fixed; inset: 0; background: color-mix(in oklab, var(--bg), transparent 30%); display: flex; align-items: center; justify-content: center; z-index: 999; backdrop-filter: blur(6px); } .loading-overlay.hidden { display: none; } .spinner { width: 36px; height: 36px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } .loading { text-align: center; color: var(--muted); padding: 36px 20px; font-size: 13px; } @keyframes spin { to { transform: rotate(360deg); } } /* ====================== INFO BANNERS ====================== */ .aviso-multi, .stock-banner, .cupon-banner, .extras-section, .vincular-directo-section { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border); } .aviso-multi { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent), transparent 70%); color: var(--fg); } /* Recepción: advertencia persistente de faltante (control de estafa) */ .aviso-faltante { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger), transparent 60%); color: var(--fg); } .aviso-ok { background: var(--success-soft); border-color: color-mix(in oklab, var(--success), transparent 60%); color: var(--fg); } .aviso-faltante-sub { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger); } /* Badge de faltante en la tarjeta de pedido (lista de envíos) */ .pedido-faltante { display: inline-block; margin-top: 4px; background: var(--danger-soft); color: var(--danger); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); border: 1px solid color-mix(in oklab, var(--danger), transparent 60%); } .pedido-completo { display: inline-block; margin-top: 4px; color: var(--success); font-size: 12px; font-weight: 700; } /* Impuesto de importación */ .pedido-impuesto { display: inline-block; margin-top: 4px; background: var(--warning-soft, #fff4e5); color: var(--warning); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); border: 1px solid color-mix(in oklab, var(--warning), transparent 60%); } .impuesto-recibir { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 14px 0; background: var(--surface, #fff); } .impuesto-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; } .impuesto-check input { margin-top: 3px; } .impuesto-hint { margin-top: 6px; font-size: 12px; color: var(--gris-texto); line-height: 1.4; } .impuesto-buscar { margin-bottom: 12px; } .impuesto-buscar input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; background: var(--surface, #fff); color: var(--fg); } .impuesto-buscar-hint { margin-top: 4px; font-size: 11px; color: var(--gris-texto); } /* Valor del inventario (pantalla Stock) */ .valor-stock-banner { margin-bottom: 12px; } .valor-stock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--success-soft); border: 1px solid color-mix(in oklab, var(--success), transparent 70%); border-radius: var(--radius); padding: 12px 14px; } .valor-stock-label { font-size: 12px; color: var(--gris-texto); } .valor-stock-monto { font-size: 22px; font-weight: 800; color: var(--fg); line-height: 1.1; } .valor-stock-sub { font-size: 12px; color: var(--gris-texto); margin-top: 2px; } /* ================================================================== PULIDO MODERNO (claro y limpio) — capa global, no cambia estructura ================================================================== */ * { -webkit-tap-highlight-color: transparent; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { letter-spacing: -0.01em; } /* Transiciones suaves en lo interactivo */ button, .btn, a, input, select, textarea, .pedido-card, .product-card, .rep-card, .envio-card, .home-btn, .stat-card { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, color .18s ease; } /* Tarjetas: profundidad sutil + feedback táctil al tocar */ .pedido-card, .product-card, .rep-card { box-shadow: var(--shadow-sm); } .pedido-card:active, .product-card:active, .envio-card:active, .home-btn:active { transform: scale(0.99); } /* Foco accesible y moderno (teclado) */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Inputs más limpios al enfocar */ input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } /* Scrollbar discreta */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } ::-webkit-scrollbar-track { background: transparent; } .stock-banner { background: var(--success-soft); border-color: color-mix(in oklab, var(--success), transparent 70%); color: var(--fg); } .stock-banner-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; } .badge-new { background: var(--warning); color: white; font-size: 9px; padding: 2px 6px; border-radius: var(--radius-pill); font-weight: 700; letter-spacing: 0.06em; } .cupon-banner { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning), transparent 70%); } .cupon-titulo { font-weight: 700; font-size: 13px; color: var(--warning); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; } .cupon-row { padding: 8px 0; border-top: 1px solid color-mix(in oklab, var(--warning), transparent 80%); } .cupon-row:first-of-type { border-top: 0; padding-top: 0; } .cupon-desc { font-size: 13px; margin-bottom: 8px; color: var(--fg); } .cupon-actions { display: flex; gap: 8px; flex-wrap: wrap; } .cupon-link, .cupon-btn-claim { flex: 1; font-family: inherit; font-size: 12px; padding: 8px 12px; border-radius: var(--radius-sm); text-align: center; text-decoration: none; font-weight: 600; cursor: pointer; border: 1px solid var(--warning); } .cupon-link { background: var(--warning); color: white; } .cupon-btn-claim { background: var(--surface); color: var(--warning); } .extras-section { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning), transparent 70%); margin: 18px 0; } .extras-titulo { font-size: 14px; margin: 0 0 4px; color: var(--warning); font-weight: 700; } .extras-sub { font-size: 12px; color: var(--muted); margin: 0 0 10px; } .btn-link-add { background: var(--surface); border: 1px dashed var(--warning); border-radius: var(--radius-sm); color: var(--warning); font-weight: 600; font-size: 13px; padding: 10px; width: 100%; cursor: pointer; font-family: inherit; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-link-add:hover { background: var(--warning-soft); } .extras-search-box { margin-top: 10px; background: var(--surface); border-radius: var(--radius-sm); padding: 10px; border: 1px solid var(--border); } #extras-search-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 13px; margin-bottom: 8px; background: var(--surface-2); } .extras-search-header { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 8px 4px 6px; } .extras-search-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); margin-bottom: 4px; cursor: pointer; font-family: inherit; text-align: left; } .extras-search-item:hover { background: var(--warning-soft); } .extras-search-item img { width: 30px; height: 30px; border-radius: var(--radius-xs); object-fit: cover; flex-shrink: 0; } .extras-search-info { flex: 1; min-width: 0; } .extras-search-nombre { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .extras-search-meta { font-size: 11px; color: var(--muted); } .extras-add-icon { background: var(--warning); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .extras-add-icon [data-icon] svg { width: 14px; height: 14px; } .recibir-producto-extra { background: var(--warning-soft); border-left: 3px solid var(--warning); } .btn-remove-extra { background: transparent; border: none; color: var(--danger); cursor: pointer; padding: 0 8px; align-self: center; display: inline-flex; align-items: center; } .btn-remove-extra [data-icon] svg { width: 18px; height: 18px; } .vincular-directo-section { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent), transparent 70%); } .vincular-directo-title { font-size: 14px; margin: 0 0 8px; color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .vincular-directo-desc { font-size: 12px; color: var(--fg-2); margin-bottom: 10px; line-height: 1.45; } .vincular-directo-list { max-height: 200px; overflow-y: auto; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 6px 0 8px; } .vincular-directo-cant-label { margin-top: 4px; } .vincular-directo-hint { background: var(--warning-soft); border-left: 3px solid var(--warning); padding: 8px 10px; font-size: 12px; color: var(--fg-2); border-radius: var(--radius-xs); margin: 8px 0; } .vincular-divider { text-align: center; margin: 18px 0; position: relative; } .vincular-divider::before { content: ''; position: absolute; inset: 50% 0 50% 0; height: 1px; background: var(--border); } .vincular-divider span { position: relative; background: var(--bg); padding: 0 14px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* Vincular padres list */ .vincular-list { max-height: 240px; overflow-y: auto; background: var(--surface-sunk); border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 6px 0 12px; } .vincular-padre-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--surface); transition: background 0.1s; } .vincular-padre-item:last-child { border-bottom: 0; } .vincular-padre-item:hover { background: var(--accent-soft); } .vincular-padre-item.selected { background: var(--accent-soft); border-left: 3px solid var(--accent); } .vincular-padre-nombre { flex: 1; font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vincular-padre-stock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .btn-link-action { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--fg-2); width: 100%; cursor: pointer; font-family: inherit; margin-bottom: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-link-action:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); } .crear-padre-form { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; border: 1px solid color-mix(in oklab, var(--accent), transparent 70%); } .crear-padre-form.hidden { display: none; } .crear-padre-actions { display: flex; gap: 8px; margin-top: 8px; } .crear-padre-actions .btn { margin-top: 0; } /* ====================== REPORTES ====================== */ .rep-section-title { font-size: 15px; font-weight: 700; margin: 18px 4px 6px; color: var(--fg); letter-spacing: -0.01em; } .rep-section-title:first-child { margin-top: 0; } .rep-subtitle { font-size: 12px; color: var(--muted); margin: 0 4px 8px; } .rep-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .rep-card.empty { text-align: center; color: var(--muted); padding: 22px 12px; font-size: 13px; } .hist-row { display: flex; align-items: stretch; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .hist-row:last-child { border-bottom: 0; } .hist-mes { width: 64px; font-size: 12px; font-weight: 600; color: var(--fg); text-transform: capitalize; padding-top: 4px; flex-shrink: 0; } .hist-bars { flex: 1; min-width: 0; } .hist-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .hist-label { width: 60px; font-size: 11px; color: var(--muted); flex-shrink: 0; } .hist-bar { flex: 1; height: 8px; background: var(--surface-sunk); border-radius: var(--radius-pill); overflow: hidden; min-width: 30px; } .hist-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.4s ease; } .hist-bar-fill.rojo { background: var(--danger); } .hist-bar-fill.verde { background: var(--success); } .hist-val { font-size: 11px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; flex-shrink: 0; } .hist-flujo { font-size: 12px; font-weight: 600; margin-top: 4px; } .hist-flujo.positivo { color: var(--success); } .hist-flujo.negativo { color: var(--danger); } .rep-prod-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .rep-prod-row:last-child { border-bottom: 0; } .rep-prod-rank { font-size: 13px; font-weight: 700; color: var(--muted); width: 26px; text-align: center; flex-shrink: 0; } .rep-prod-img { width: 44px; height: 44px; border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-sunk); flex-shrink: 0; } .rep-prod-info { flex: 1; min-width: 0; } .rep-prod-nombre { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rep-prod-metric { font-size: 12px; color: var(--muted); margin-top: 2px; } .rep-prod-metric strong { color: var(--fg); font-weight: 600; } .rep-prod-metric .positivo { color: var(--success); font-weight: 600; } .rep-prod-metric .negativo { color: var(--danger); font-weight: 600; } .rep-prod-detail { font-size: 11px; color: var(--muted); margin-top: 2px; } .gmail-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .gmail-row:last-child { border-bottom: 0; } .gmail-name { font-size: 12px; width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } .gmail-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; flex-shrink: 0; } /* ====================== PROGRESS / PIPELINE ====================== */ .progress-bar { width: 100%; height: 6px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; margin-top: 8px; } .progress-fill { height: 100%; background: var(--success); transition: width 0.3s ease; } /* ====================== RECIBIR ====================== */ .recibir-producto { display: flex; gap: 12px; background: var(--surface); padding: 12px; border-radius: var(--radius); margin-bottom: 10px; border: 1px solid var(--border); } .recibir-img { width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-sunk); flex-shrink: 0; } .recibir-info { flex: 1; min-width: 0; } .recibir-nombre { font-size: 14px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recibir-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .recibir-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); margin-bottom: 0; font-weight: 500; } .recibir-input { width: 76px; padding: 6px 10px; font-size: 16px; font-weight: 600; text-align: center; margin-top: 0; } .recibir-pack-aviso { font-size: 11px; color: var(--warning); margin-top: 6px; } .recibir-pack-aviso.hidden { display: none; } /* ====================== ENVIOS LIST ====================== */ .envio-card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; text-align: left; font-family: inherit; cursor: pointer; transition: border-color 0.1s, background 0.1s; } .envio-card:hover { background: var(--surface-2); border-color: var(--border-strong); } .envio-row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .envio-tracking { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--fg); word-break: break-all; flex: 1; } .envio-check { color: var(--success); font-size: 18px; margin-left: 8px; display: inline-flex; } .envio-row2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; } .envio-carrier { background: var(--surface-sunk); padding: 2px 8px; border-radius: var(--radius-pill); color: var(--fg-2); font-weight: 500; } .envio-recibido { color: var(--muted); font-size: 11px; width: 100%; margin-top: 4px; } /* ====================== MARGEN PREVIEW ====================== */ .margen-preview { background: var(--success-soft); border-left: 3px solid var(--success); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-top: 6px; margin-bottom: 14px; color: var(--success); font-weight: 600; } /* ====================== EDITAR MASIVO ====================== */ .edit-masivo-actions { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin-top: 14px; } .edit-masivo-actions .btn { margin-top: 0; } .edit-masivo-item { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; align-items: center; } .edit-masivo-item img { width: 42px; height: 42px; border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-sunk); flex-shrink: 0; } .edit-masivo-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; } .edit-masivo-fields input { padding: 7px 10px; font-size: 13px; margin: 0; } /* ====================== IV DETALLE ====================== */ .iv-det-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; text-align: center; } .iv-det-img { width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 12px; } .iv-det-noimg { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; color: var(--muted-2); background: var(--surface-sunk); border-radius: var(--radius); margin-bottom: 12px; } .iv-det-titulo { font-size: 17px; font-weight: 600; margin: 6px 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; letter-spacing: -0.01em; } .iv-det-stocktotal { font-size: 13px; color: var(--muted); } .iv-det-stocktotal b { color: var(--fg); font-size: 17px; font-weight: 700; } .iv-det-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; } .iv-det-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; } .iv-det-stockedit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .iv-det-meta-info { font-size: 12px; color: var(--muted); margin: 4px 0 8px; line-height: 1.4; } .btn-edit-nombre, .btn-edit-costo, .btn-refrescar-ml, .btn-eliminar-detalle { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: all 0.1s; } .btn-edit-nombre:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .btn-edit-costo:hover { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); } .btn-refrescar-ml:hover { background: var(--success-soft); color: var(--success); border-color: var(--success); } .btn-eliminar-detalle:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .btn-edit-nombre [data-icon] svg, .btn-edit-costo [data-icon] svg, .btn-refrescar-ml [data-icon] svg, .btn-eliminar-detalle [data-icon] svg { width: 12px; height: 12px; } .btn-edit-nombre-grande { width: 32px; height: 32px; } .btn-edit-nombre-grande [data-icon] svg { width: 14px; height: 14px; } /* ====================== UTILS ====================== */ .hidden { display: none !important; } .divider { height: 1px; background: var(--border); margin: 14px 0; } .flex-row { display: flex; align-items: center; gap: 8px; } .flex-1 { flex: 1; } .text-muted { color: var(--muted); } .mono-text { font-family: var(--font-mono); } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } ::-webkit-scrollbar-track { background: transparent; } /* ====================== RESPONSIVE ====================== */ @media (min-width: 720px) { body { font-size: 15px; } .content { padding: 24px 28px 32px; max-width: 760px; margin: 0 auto; } .content-home { max-width: 480px; margin: 0 auto; } } /* ============================================================ V2 COMPONENTS — Designer pass ============================================================ */ /* ---------- Brand mark ---------- */ .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { width: 32px; height: 32px; display: inline-flex; flex-shrink: 0; } .brand-mark svg { width: 100%; height: 100%; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); } .brand-sub { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 2px; } /* ---------- Top bar v2 ---------- */ .topbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 6; min-height: 56px; } .topbar-spacer { flex: 1; } .topbar-action { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; color: var(--fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.1s, border-color 0.1s; } .topbar-action:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--fg); } .topbar-action .dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--surface); } .topbar-action .dot.alert { background: var(--danger); } /* ---------- Hero metric (home headline) ---------- */ .hero-metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 18px 16px; margin-bottom: 12px; position: relative; overflow: hidden; } [data-mode="dark"] .hero-metric { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); } .hero-metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .hero-metric-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .hero-metric-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse-dot 2s infinite; } .hero-metric-date { font-size: 11px; font-weight: 500; color: var(--muted); } .hero-metric-number { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; color: var(--fg); line-height: 1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; font-feature-settings: "ss01", "cv11"; } .hero-metric-number small { font-size: 19px; font-weight: 600; color: var(--muted); letter-spacing: -0.02em; margin-left: 2px; } .hero-metric-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); } .hero-metric-delta.down { background: var(--danger-soft); color: var(--danger); } .hero-metric-delta.flat { background: var(--surface-sunk); color: var(--muted); } .hero-metric-delta svg { width: 12px; height: 12px; } .hero-metric-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } .hero-metric-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .hero-metric-spark { flex-shrink: 0; color: var(--accent); align-self: flex-end; margin-bottom: 2px; } .hero-metric-pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .hero-metric-pillar { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; border-right: 1px solid var(--border); } .hero-metric-pillar:last-child { border-right: 0; padding-right: 0; } .hero-metric-pillar:not(:first-child) { padding-left: 12px; } .hero-metric-pillar-num { font-size: 17px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .hero-metric-pillar-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* ---------- Stat card v2 (with sparkline) ---------- */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.12s, transform 0.06s; cursor: pointer; } .stat-card:hover { border-color: var(--border-strong); } .stat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stat-card-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .stat-card-icon { color: var(--muted-2); } .stat-card-icon svg { width: 14px; height: 14px; } .stat-card-num { font-size: 22px; font-weight: 700; color: var(--fg); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .stat-card-sub { font-size: 11px; color: var(--muted); font-weight: 500; } .stat-card-spark { color: var(--accent); } .stat-card.tone-success .stat-card-num { color: var(--success); } .stat-card.tone-success .stat-card-spark { color: var(--success); } .stat-card.tone-warning .stat-card-num { color: var(--warning); } .stat-card.tone-warning .stat-card-spark { color: var(--warning); } .stat-card.tone-danger .stat-card-num { color: var(--danger); } .stat-card.tone-danger .stat-card-spark { color: var(--danger); } /* ---------- Activity feed ---------- */ .activity-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 0; } .activity-card-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid var(--border); } .activity-card-title { font-size: 12px; font-weight: 700; color: var(--fg); letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 6px; } .activity-card-title-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse-dot 2s infinite; } .activity-card-link { font-size: 11px; color: var(--muted); text-decoration: none; cursor: pointer; font-weight: 500; } .activity-card-link:hover { color: var(--fg); } .activity-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; } .activity-row:last-child { border-bottom: 0; } .activity-row:hover { background: var(--surface-2); } .activity-time { font-size: 11px; font-family: var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; } .activity-body { min-width: 0; } .activity-headline { font-size: 13px; color: var(--fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; } .activity-headline b { font-weight: 700; } .activity-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } .activity-amount { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); } .activity-amount.positive { color: var(--success); } .activity-amount.negative { color: var(--danger); } .activity-icon-dot { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunk); color: var(--muted); justify-self: center; } .activity-icon-dot.tone-success { background: var(--success-soft); color: var(--success); } .activity-icon-dot.tone-accent { background: var(--accent-soft); color: var(--accent); } .activity-icon-dot.tone-warning { background: var(--warning-soft); color: var(--warning); } .activity-icon-dot.tone-danger { background: var(--danger-soft); color: var(--danger); } .activity-icon-dot svg { width: 14px; height: 14px; } /* ---------- Bottom dock (tab bar) ---------- */ .bottom-dock { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 6px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 2px; box-shadow: var(--shadow-md); backdrop-filter: blur(12px); } [data-mode="dark"] .bottom-dock { background: color-mix(in oklab, var(--surface), transparent 6%); } .dock-btn { background: transparent; border: none; padding: 9px 4px 7px; cursor: pointer; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: var(--radius); font-family: inherit; font-size: 10px; font-weight: 600; transition: background 0.1s, color 0.1s; position: relative; } .dock-btn:hover { color: var(--fg); } .dock-btn.active { color: var(--accent); background: var(--accent-soft); } .dock-btn svg { width: 20px; height: 20px; stroke-width: 1.75; } .dock-btn.primary { background: var(--accent); color: var(--accent-fg); margin: -16px 0 -2px; height: 58px; border-radius: 50%; width: 58px; align-self: center; justify-self: center; box-shadow: 0 10px 24px -6px color-mix(in oklab, var(--accent), transparent 50%), 0 0 0 4px var(--surface); font-size: 0; } .dock-btn.primary:hover { background: var(--accent-hover); color: var(--accent-fg); } .dock-btn.primary svg { width: 26px; height: 26px; } .dock-btn .badge { position: absolute; top: 4px; right: 16%; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 7px; background: var(--danger); color: white; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* Make screens with dock have bottom padding so content doesn't hide under it */ .screen.has-dock .content { padding-bottom: 96px; } /* ---------- Stock card v2 (richer) ---------- */ .iv-card-v2 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; font-family: inherit; text-align: left; position: relative; } .iv-card-v2:hover { border-color: var(--border-strong); } .iv-card-v2:active { transform: scale(0.985); } .iv-card-v2-img { position: relative; aspect-ratio: 1; background: var(--surface-sunk); overflow: hidden; } .iv-card-v2-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .iv-card-v2-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted-2); } .iv-card-v2-noimg svg { width: 28px; height: 28px; } .iv-card-v2-stockchip { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; background: var(--surface); border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; border: 1px solid var(--border); letter-spacing: -0.005em; } .iv-card-v2-stockchip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .iv-card-v2-stockchip.low::before { background: var(--warning); } .iv-card-v2-stockchip.zero::before { background: var(--danger); } .iv-card-v2-stockchip.zero { color: var(--danger); } .iv-card-v2-body { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 6px; } .iv-card-v2-name { font-size: 12px; font-weight: 500; color: var(--fg); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; letter-spacing: -0.005em; } .iv-card-v2-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .iv-card-v2-price { font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .iv-card-v2-velocity { font-size: 10px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; } .iv-card-v2-velocity svg { width: 10px; height: 10px; } .iv-card-v2-bullet { width: 100%; } /* ---------- Pedido row v2 (with timeline pip + extra info) ---------- */ .pedido-row-v2 { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px; text-align: left; width: 100%; font-family: inherit; cursor: pointer; transition: border-color 0.1s, background 0.1s; } .pedido-row-v2:hover { background: var(--surface-2); border-color: var(--border-strong); } .pedido-row-v2.alerta-naranja { border-left: 3px solid var(--warning); } .pedido-row-v2.alerta-rojo { border-left: 3px solid var(--danger); } .pedido-row-v2 img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-sunk); flex-shrink: 0; } .pedido-row-v2-body { min-width: 0; } .pedido-row-v2-name { font-size: 13px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.005em; } .pedido-row-v2-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; } .pedido-row-v2-meta .mono { font-family: var(--font-mono); } .pedido-row-v2-meta strong { color: var(--fg-2); font-weight: 600; } .pedido-row-v2-meta .sep { color: var(--border-strong); } .pedido-row-v2-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .pedido-row-v2-amount { font-size: 13px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } /* ---------- Timeline (package journey) ---------- */ .timeline { display: flex; flex-direction: column; gap: 0; padding: 4px 0; } .timeline-step { display: grid; grid-template-columns: 24px 1fr auto; align-items: flex-start; gap: 12px; position: relative; padding: 6px 0; } .timeline-step::before { content: ''; position: absolute; left: 11px; top: 22px; width: 2px; bottom: -6px; background: var(--border); } .timeline-step:last-child::before { display: none; } .timeline-step.done::before { background: var(--success); } .timeline-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted-2); z-index: 1; flex-shrink: 0; } .timeline-step.done .timeline-dot { background: var(--success); border-color: var(--success); color: white; } .timeline-step.current .timeline-dot { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%); } .timeline-step.done .timeline-dot svg, .timeline-step.current .timeline-dot svg { width: 12px; height: 12px; } .timeline-body { padding-top: 2px; min-width: 0; } .timeline-title { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.005em; } .timeline-step.current .timeline-title { color: var(--accent); } .timeline-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .timeline-time { font-size: 11px; color: var(--muted); font-family: var(--font-mono); padding-top: 4px; flex-shrink: 0; } /* ---------- Product hero ---------- */ .product-hero { position: relative; margin: -20px -18px 14px; background: var(--surface-sunk); aspect-ratio: 1.35; overflow: hidden; } .product-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .product-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in oklab, var(--bg), transparent 0%) 100%); } .product-hero-overlay { position: absolute; inset: auto 14px 14px 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .product-hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; } .product-hero-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .product-hero-back { position: absolute; top: 14px; left: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.45); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); } .product-hero-actions { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; } .product-hero-action { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.45); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); } /* ---------- KPI grid v2 ---------- */ .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kpi-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .kpi-tile-lbl { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .kpi-tile-val { font-size: 18px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 2px; } .kpi-tile-delta { font-size: 11px; color: var(--success); font-weight: 600; margin-top: 2px; } .kpi-tile-delta.down { color: var(--danger); } /* ---------- Stepper / segmented quantity ---------- */ .qty-stepper { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; } .qty-stepper button { background: transparent; border: none; width: 42px; height: 42px; cursor: pointer; color: var(--fg); display: flex; align-items: center; justify-content: center; font-family: inherit; } .qty-stepper button:hover { background: var(--surface-sunk); } .qty-stepper button:active { transform: scale(0.92); } .qty-stepper-val { width: 56px; text-align: center; font-size: 18px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; } /* ---------- Scan viewfinder v2 ---------- */ .viewfinder { position: relative; width: 78vw; max-width: 280px; aspect-ratio: 1.4; border-radius: 20px; } .viewfinder .vf-corner { position: absolute; width: 28px; height: 28px; border: 3px solid white; } .viewfinder .vf-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; } .viewfinder .vf-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; } .viewfinder .vf-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; } .viewfinder .vf-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; } .viewfinder .vf-scanline { position: absolute; left: 8%; right: 8%; top: 50%; height: 1.5px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); filter: drop-shadow(0 0 6px var(--accent)); animation: vf-scan 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes vf-scan { 0%, 100% { top: 14%; opacity: 0.4; } 50% { top: 86%; opacity: 1; } } .scan-hint-v2 { margin-top: 28px; color: white; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .scan-hint-v2 .label { background: rgba(255,255,255,0.12); padding: 5px 12px; border-radius: var(--radius-pill); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; backdrop-filter: blur(6px); } /* ---------- Login v2 — atmospheric ---------- */ .login-v2 { height: 100%; display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; } .login-v2-bg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 20%, var(--accent-soft), transparent 70%), var(--bg); z-index: 0; pointer-events: none; } [data-mode="dark"] .login-v2-bg { background: radial-gradient(60% 50% at 50% 18%, color-mix(in oklab, var(--accent), transparent 70%), transparent 70%), var(--bg); } .login-v2 .content { position: relative; z-index: 1; padding: 24px; display: flex; flex-direction: column; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; margin-bottom: 28px; } .login-brand-mark { width: 56px; height: 56px; background: var(--fg); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--bg); } .login-brand-mark svg { width: 36px; height: 36px; } .login-brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.035em; color: var(--fg); } .login-brand-sub { font-size: 10px; letter-spacing: 0.3em; font-weight: 600; color: var(--muted); text-transform: uppercase; } .login-prompt { text-align: center; font-size: 14px; color: var(--muted); margin: 4px 0 12px; } .app-version { text-align: center; font-size: 11px; color: var(--muted-2, #9aa3af); margin-top: 10px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } /* ---------- Sticky action bar (inside screens like recibir) ---------- */ .sticky-bottom { position: sticky; bottom: 0; background: linear-gradient(180deg, transparent, var(--bg) 30%); padding: 22px 0 calc(8px + env(safe-area-inset-bottom)); margin-top: 16px; } /* ---------- Filter chip group (refined) ---------- */ .filter-group { display: flex; align-items: center; gap: 4px; background: var(--surface-sunk); border-radius: var(--radius-pill); padding: 3px; width: fit-content; } .filter-group button { background: transparent; border: none; padding: 6px 12px; border-radius: var(--radius-pill); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.1s, color 0.1s; display: inline-flex; align-items: center; gap: 4px; } .filter-group button:hover { color: var(--fg); } .filter-group button.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); } /* ---------- Section divider ---------- */ .section-divider { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 18px 4px 8px; display: flex; align-items: center; gap: 8px; } .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ---------- Chart cards (reportes v2) ---------- */ .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; } .chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; gap: 12px; } .chart-card-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .chart-card-value { font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.05; } .chart-card-delta { font-size: 11px; font-weight: 600; color: var(--success); margin-top: 2px; display: inline-flex; align-items: center; gap: 3px; } .chart-card-delta.down { color: var(--danger); } .chart-card-svg { color: var(--accent); display: block; } /* ---------- Comparison bar ---------- */ .comp-bar { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 12px; } .comp-bar-label { width: 56px; color: var(--muted); flex-shrink: 0; font-weight: 500; } .comp-bar-track { flex: 1; height: 8px; background: var(--surface-sunk); border-radius: var(--radius-pill); position: relative; overflow: hidden; } .comp-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.4s ease; } .comp-bar-fill.expense { background: var(--danger); opacity: 0.75; } .comp-bar-fill.income { background: var(--success); opacity: 0.85; } .comp-bar-val { font-size: 11px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; width: 60px; text-align: right; flex-shrink: 0; } /* ---------- Money display ---------- */ .money-big { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; color: var(--fg); font-variant-numeric: tabular-nums; font-feature-settings: "ss01"; line-height: 1; } .money-big-currency { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-right: 2px; } /* ---------- List header ---------- */ .list-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .list-header b { color: var(--fg); } /* ---------- Bullet stock indicator ---------- */ .stock-bar { width: 100%; height: 4px; background: var(--surface-sunk); border-radius: 2px; overflow: hidden; } .stock-bar-fill { height: 100%; background: var(--success); transition: width 0.4s ease; } .stock-bar-fill.warning { background: var(--warning); } .stock-bar-fill.danger { background: var(--danger); } /* ============================================================ === ADICIONES CUSTOM POST-REDISEÑO === Clases agregadas después del rediseño base. Mantener acá para que el próximo redeploy del diseño no las pise. ============================================================ */ /* === Editor Masivo: vincular/desvincular bulk + por fila === */ .edit-masivo-bulk { display: flex; flex-wrap: wrap; gap: 8px; background: #f0f7ff; border: 1px solid #c5d9f0; border-radius: 10px; padding: 10px; margin-bottom: 12px; } .edit-masivo-bulk-title { width: 100%; font-size: 12px; font-weight: 600; color: #0052cc; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; } .edit-masivo-bulk-vincular, .edit-masivo-bulk-desvincular { flex: 1; min-width: 140px; padding: 10px 12px; border-radius: 8px; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .edit-masivo-bulk-vincular { background: var(--azul); color: white; } .edit-masivo-bulk-vincular:active { background: var(--azul-oscuro); } .edit-masivo-bulk-desvincular { background: #fff3e0; color: #b65900; border: 1px solid #ffcc80; } .edit-masivo-bulk-desvincular:active { background: #ffe0b2; } .edit-masivo-padre-info { width: 100%; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .edit-masivo-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px; white-space: nowrap; } .edit-masivo-badge-padre { background: #e3f2fd; color: #0052cc; border: 1px solid #90caf9; } .edit-masivo-badge-stand { background: #fff3e0; color: #b65900; border: 1px solid #ffcc80; } .edit-masivo-badge-variante { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; } .edit-masivo-row-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .btn-mini-vincular, .btn-mini-desvincular { flex: 1; min-width: 110px; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .btn-mini-vincular { background: #e3f2fd; color: #0052cc; border: 1px solid #90caf9; } .btn-mini-vincular:active { background: #bbdefb; } .btn-mini-desvincular { background: #fff3e0; color: #b65900; border: 1px solid #ffcc80; } .btn-mini-desvincular:active { background: #ffe0b2; } @media (max-width: 500px) { .edit-masivo-bulk-vincular, .edit-masivo-bulk-desvincular { min-width: 0; font-size: 12px; padding: 9px 8px; } .btn-mini-vincular, .btn-mini-desvincular { min-width: 0; font-size: 11px; padding: 6px 8px; } } /* ===== Dashboard: estado OK + Top + Durmientes ===== */ .dash-alerta-titulo-ok { color: #1b5e20 !important; } .dash-alertas:has(.dash-alerta-titulo-ok) { background: #e8f5e9; border-color: #a5d6a7; } .dash-alerta-ok-msg { font-size: 13px; color: #2e7d32; text-align: center; padding: 6px 0 2px; } /* Top productos del mes */ .dash-top { background: #fffde7; border: 1px solid #fff59d; } .dash-top-titulo { font-size: 14px; font-weight: 700; color: #f57f17; margin-bottom: 10px; } .dash-top-row { display: flex; align-items: center; gap: 10px; background: white; border-radius: 8px; padding: 8px; margin-bottom: 6px; transition: transform 0.1s; } .dash-top-row:last-child { margin-bottom: 0; } .dash-top-row:active { transform: scale(0.98); } .dash-top-pos { width: 28px; font-weight: 700; font-size: 14px; color: #f57f17; text-align: center; flex-shrink: 0; } .dash-top-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .dash-top-img-placeholder { width: 40px; height: 40px; background: #f0f0f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .dash-top-info { flex: 1; min-width: 0; } .dash-top-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-top-meta { font-size: 11px; color: var(--gris-texto); margin-top: 2px; } /* Productos sin movimiento (durmientes) */ .dash-durmientes { background: #f3e5f5; border: 1px solid #ce93d8; } .dash-durmientes-titulo { font-size: 14px; font-weight: 700; color: #6a1b9a; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .dash-durmientes-count { background: #6a1b9a; color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 700; } .dash-durmientes-row { display: flex; align-items: center; gap: 10px; background: white; border-radius: 8px; padding: 8px; margin-bottom: 4px; border-left: 3px solid #ab47bc; transition: transform 0.1s; } .dash-durmientes-row:active { transform: scale(0.98); } .dash-durmientes-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .dash-durmientes-img-placeholder { width: 40px; height: 40px; background: #f0f0f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .dash-durmientes-info { flex: 1; min-width: 0; } .dash-durmientes-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-durmientes-meta { font-size: 11px; color: var(--gris-texto); margin-top: 2px; } /* ============================================================ Pantalla Pendientes de Despachar ============================================================ */ .btn-warning { background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%); color: white; border: 0; padding: 14px 18px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(255, 111, 0, 0.3); display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } .btn-warning:active { transform: scale(0.98); } .home-despachar-btn { margin-bottom: 12px; } .badge-despachar { background: white; color: #ff6f00; padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 800; min-width: 22px; display: inline-flex; align-items: center; justify-content: center; } .badge-despachar:empty { display: none; } .despachar-resumen { background: white; border-radius: 10px; padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow); } .despachar-resumen-titulo { font-size: 15px; font-weight: 700; color: var(--texto); margin-bottom: 8px; } .despachar-chips { display: flex; flex-wrap: wrap; gap: 6px; } .despachar-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; white-space: nowrap; } .despachar-chip-rojo { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; } .despachar-chip-naranja { background: #fff3e0; color: #ef6c00; border: 1px solid #ffcc80; } .despachar-chip-verde { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .despachar-card { background: white; border-radius: 12px; padding: 12px; margin-bottom: 12px; border-left: 4px solid #ccc; box-shadow: var(--shadow); transition: opacity 0.3s, transform 0.3s; } .despachar-rojo { border-left-color: #d32f2f; background: #fff5f5; } .despachar-naranja { border-left-color: #ef6c00; } .despachar-verde { border-left-color: #2e7d32; } .despachar-sin-stock { border-left-color: #d32f2f; background: #fff5f5; } .despachar-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .despachar-header-left { min-width: 0; flex: 1; } .despachar-orderid { font-size: 13px; font-weight: 700; color: var(--texto); } .despachar-fecha { font-size: 11px; color: var(--gris-texto); margin-top: 2px; } .despachar-monto { font-size: 16px; font-weight: 700; color: var(--verde); } .despachar-prods { margin-bottom: 10px; } .despachar-prod { display: flex; gap: 10px; align-items: center; padding: 8px; background: #fafafa; border-radius: 8px; margin-bottom: 6px; } .despachar-prod:last-child { margin-bottom: 0; } .despachar-prod-img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .despachar-prod-img-placeholder { width: 44px; height: 44px; background: #e0e0e0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .despachar-prod-info { flex: 1; min-width: 0; } .despachar-prod-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .despachar-prod-var { font-size: 9px; font-weight: 700; background: #e3f2fd; color: #0052cc; padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px; vertical-align: middle; } .despachar-prod-meta { font-size: 11px; color: var(--gris-texto); margin-top: 3px; } .despachar-prod-meta code { background: #eef; padding: 1px 4px; border-radius: 3px; font-size: 10px; font-family: monospace; color: #0052cc; } .stock-ok { color: #2e7d32; font-weight: 600; } .stock-bad { color: #c62828; font-weight: 700; } .despachar-actions { display: flex; gap: 8px; } .despachar-btn-done { flex: 2; font-size: 14px; padding: 10px; } .despachar-btn-ml { flex: 1; font-size: 13px; padding: 10px; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; } /* Badges Flex / Normal / Status */ .despachar-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .despachar-badge-flex { background: #fff8e1; color: #f57f17; border: 1px solid #ffd54f; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.5px; } .despachar-badge-normal { background: #e8eaf6; color: #3949ab; border: 1px solid #9fa8da; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.5px; } .despachar-status-ready, .despachar-status-handling, .despachar-status-pending { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; border: 1px solid; } .despachar-status-ready { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; } .despachar-status-handling { background: #fff3e0; color: #ef6c00; border-color: #ffcc80; } .despachar-status-pending { background: #f3e5f5; color: #6a1b9a; border-color: #ce93d8; } .despachar-chip-flex { background: #fff8e1; color: #f57f17; border: 1px solid #ffd54f; } .stock-unknown { color: #6a1b9a; font-weight: 600; } /* Botón "ver todos" en card sin movimiento */ .dash-durmientes-ver-todos { width: 100%; margin-top: 8px; padding: 10px; background: white; border: 1px solid #ce93d8; border-radius: 8px; color: #6a1b9a; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .dash-durmientes-ver-todos:active { background: #f3e5f5; } /* Pantalla sin movimiento (lista completa) */ .sin-mov-resumen { background: white; border-left: 4px solid #6a1b9a; border-radius: 10px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); } .sin-mov-resumen-num { font-size: 32px; font-weight: 800; color: #6a1b9a; line-height: 1; } .sin-mov-resumen-lbl { font-size: 13px; color: var(--gris-texto); margin-top: 4px; } .sin-mov-resumen-capital { font-size: 13px; color: #c62828; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; } .sin-mov-row { display: flex; gap: 12px; background: white; border-radius: 10px; padding: 10px; margin-bottom: 8px; border-left: 3px solid #ab47bc; align-items: center; } .sin-mov-img, .sin-mov-img-placeholder { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; object-fit: cover; } .sin-mov-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 20px; } .sin-mov-info { flex: 1; min-width: 0; } .sin-mov-nombre { font-size: 14px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sin-mov-meta { font-size: 12px; color: var(--gris-texto); margin-top: 3px; } .sin-mov-capital { font-size: 11px; color: #c62828; margin-top: 2px; font-weight: 600; } /* ============================================================ REPRICER COMPETITIVO ============================================================ */ .repricer-config { background: white; border-radius: 12px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); } .repricer-config-row { display: flex; gap: 10px; margin-bottom: 10px; } .repricer-config-row label { flex: 1; display: flex; flex-direction: column; gap: 4px; } .repricer-config-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .repricer-config select { padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: white; font-family: inherit; } .repricer-config-hint { font-size: 11px; color: var(--gris-texto); margin-top: 8px; margin-bottom: 0; text-align: center; } .repricer-resumen-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; } .repricer-resumen-stat { background: white; border-radius: 10px; padding: 10px 6px; text-align: center; box-shadow: var(--shadow); } .repricer-resumen-num { font-size: 22px; font-weight: 800; color: var(--texto); line-height: 1; } .repricer-resumen-lbl { font-size: 10px; color: var(--gris-texto); margin-top: 4px; letter-spacing: 0.2px; } .repricer-row { background: white; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); border-left: 4px solid #ccc; max-width: 100%; overflow: hidden; } .repricer-status-sugerencia { border-left-color: var(--azul, #0066ff); } .repricer-status-ya_optimo { border-left-color: var(--verde, #00a86b); opacity: 0.7; } .repricer-status-no_competitivo { border-left-color: var(--naranja, #ff6f00); } .repricer-status-sin_competencia { border-left-color: #ccc; opacity: 0.7; } .repricer-status-sin_costo { border-left-color: var(--rojo, #e53935); opacity: 0.6; } .repricer-row-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .repricer-check { width: 20px; height: 20px; margin-top: 4px; flex-shrink: 0; cursor: pointer; } .repricer-check:disabled { opacity: 0.3; cursor: not-allowed; } .repricer-img, .repricer-img-placeholder { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; object-fit: cover; } .repricer-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 18px; } .repricer-info { flex: 1; min-width: 0; } .repricer-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; } .repricer-razon { font-size: 11px; color: var(--gris-texto); margin-top: 4px; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } .repricer-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; } .repricer-badge-sugerencia { background: #e3f2fd; color: #0052cc; border: 1px solid #90caf9; } .repricer-badge-optimo { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .repricer-badge-warn { background: #fff3e0; color: #ef6c00; border: 1px solid #ffcc80; } .repricer-badge-neutro { background: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; } .repricer-badge-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; } .repricer-precios { display: flex; align-items: stretch; gap: 8px; background: #fafafa; border-radius: 8px; padding: 10px; margin-bottom: 8px; } .repricer-precio-col { flex: 1; text-align: center; } .repricer-precio-nuevo { background: #e3f2fd; border-radius: 6px; padding: 4px 0; } .repricer-precio-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .repricer-precio-val { font-size: 17px; font-weight: 800; color: var(--texto); margin-top: 2px; } .repricer-precio-sub { font-size: 10px; color: var(--gris-texto); margin-top: 2px; } .repricer-arrow { display: flex; align-items: center; color: var(--gris-texto); } .repricer-cambio { font-size: 12px; font-weight: 600; text-align: center; padding: 4px 0; } .cambio-up { color: #2e7d32; } .cambio-down { color: #c62828; } .cambio-flat { color: var(--gris-texto); } .repricer-competidor { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gris-texto); padding: 6px 8px; background: #f5f5f5; border-radius: 6px; margin-top: 6px; } .repricer-competidor b { color: var(--texto); } .repricer-comp-link { margin-left: auto; color: var(--azul, #0066ff); text-decoration: none; font-weight: 600; } .repricer-aplicar-bar { position: sticky; bottom: 12px; left: 12px; right: 12px; background: white; border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-top: 14px; z-index: 10; } .repricer-aplicar-bar.hidden { display: none; } .repricer-aplicar-bar #repricer-aplicar-info { font-size: 13px; font-weight: 600; color: var(--texto); } .repricer-aplicar-bar .btn { flex: 0 0 auto; padding: 10px 18px; } /* Repricer — leyenda de fórmula */ .repricer-formula { font-size: 11px; color: var(--gris-texto); text-align: center; padding: 8px 10px; background: #f5f5f5; border-radius: 8px; margin-bottom: 12px; line-height: 1.5; } .repricer-formula b { color: var(--texto); font-weight: 700; } /* Repricer — subtítulos más densos en cards */ .repricer-precio-sub { font-size: 10px !important; line-height: 1.5; color: var(--gris-texto); } .repricer-precio-sub b { font-weight: 700; } /* ============================================================ SUGERENCIAS DE REPOSICIÓN ============================================================ */ .home-full { width: 100%; } .repo-config { background: white; border-radius: 12px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); } .repo-config-row { display: flex; gap: 10px; margin-bottom: 10px; } .repo-config-row label { flex: 1; display: flex; flex-direction: column; gap: 4px; } .repo-config-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .repo-config select { padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; background: white; font-family: inherit; } .repo-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; } .repo-resumen { margin-bottom: 12px; } .repo-resumen-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .repo-resumen-stat { background: white; border-radius: 10px; padding: 10px 6px; text-align: center; box-shadow: var(--shadow); border-left: 3px solid #ccc; } .repo-resumen-stat.urgente { border-left-color: #d32f2f; background: #fff5f5; } .repo-resumen-stat.pedir { border-left-color: #f57c00; background: #fff8f0; } .repo-resumen-stat.considerar { border-left-color: #fbc02d; background: #fffde7; } .repo-resumen-stat.ok { border-left-color: #2e7d32; background: #f1f8f4; } .repo-resumen-num { font-size: 22px; font-weight: 800; color: var(--texto); line-height: 1; } .repo-resumen-lbl { font-size: 10px; color: var(--gris-texto); margin-top: 4px; letter-spacing: 0.2px; text-transform: uppercase; font-weight: 600; } .repo-inversion { background: #e3f2fd; color: #0052cc; border: 1px solid #90caf9; border-radius: 8px; padding: 10px; font-size: 13px; text-align: center; margin-bottom: 10px; } .repo-inversion b { font-weight: 800; } .repo-formula { font-size: 11px; color: var(--gris-texto); text-align: center; padding: 6px 10px; background: #f5f5f5; border-radius: 8px; } .repo-formula b { color: var(--texto); font-weight: 700; } .repo-row { background: white; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); border-left: 4px solid #ccc; transition: transform 0.1s; } .repo-row:active { transform: scale(0.99); } .repo-urgente { border-left-color: #d32f2f; background: #fffafa; } .repo-pedir { border-left-color: #f57c00; } .repo-considerar { border-left-color: #fbc02d; } .repo-ok { border-left-color: #2e7d32; opacity: 0.85; } .repo-sin_velocidad { border-left-color: #bdbdbd; opacity: 0.7; } .repo-row-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .repo-img, .repo-img-placeholder { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; object-fit: cover; } .repo-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 20px; } .repo-info { flex: 1; min-width: 0; } .repo-nombre { font-size: 14px; font-weight: 700; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; } .repo-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 10px; display: inline-block; letter-spacing: 0.4px; } .repo-badge-urgente { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; } .repo-badge-pedir { background: #fff3e0; color: #ef6c00; border: 1px solid #ffcc80; } .repo-badge-considerar { background: #fffde7; color: #f57f17; border: 1px solid #fff59d; } .repo-badge-ok { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .repo-badge-neutro { background: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; } .repo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; padding: 8px; background: #fafafa; border-radius: 8px; } .repo-stat { text-align: center; min-width: 0; } .repo-stat-num { font-size: 15px; font-weight: 800; color: var(--texto); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .repo-stat-lbl { font-size: 10px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; margin-top: 2px; } .repo-accion { padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; justify-content: center; } .repo-accion-pedir { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; } .repo-accion-considerar { background: #fffde7; color: #f57f17; border: 1px solid #fff59d; } .repo-accion-ok { background: #e8f5e9; color: #2e7d32; } .repo-accion-neutro { background: #f5f5f5; color: var(--gris-texto); font-weight: 500; font-size: 12px; } @media (max-width: 400px) { .repo-resumen-row { grid-template-columns: repeat(4, 1fr); gap: 4px; } .repo-resumen-num { font-size: 18px; } .repo-resumen-lbl { font-size: 9px; } .repo-stats { gap: 4px; padding: 6px; } .repo-stat-num { font-size: 13px; } } /* Repricer — query usada + editar keywords */ .repricer-query { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gris-texto); padding: 6px 8px; background: #fff8e1; border-radius: 6px; margin-top: 6px; border: 1px solid #ffe082; max-width: 100%; min-width: 0; overflow: hidden; } .repricer-query > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; overflow: hidden; } .repricer-query code { background: white; padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #6a4c00; border: 1px solid #ffd54f; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } .repricer-edit-keywords { background: white; border: 1px solid #ffd54f; color: #6a4c00; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-left: auto; } .repricer-edit-keywords:active { background: #fff3c4; } .repricer-diag-btn { margin-top: 6px; width: 100%; padding: 8px 10px; background: #fef3c7; border: 1px dashed #d97706; color: #92400e; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; } .repricer-diag-btn:hover { background: #fde68a; } .repricer-diag-btn:active { background: #fcd34d; } /* ===== MODAL DIAGNÓSTICO REPRICER ===== */ .diag-repricer-modal { max-width: 720px; width: 95%; max-height: 90vh; display: flex; flex-direction: column; padding: 0; background: #fff; border-radius: 14px; overflow: hidden; } .diag-modal-header { padding: 14px 18px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; background: #f9fafb; } .diag-modal-header h3 { margin: 0; font-size: 16px; } .diag-modal-close { background: transparent; border: none; font-size: 24px; cursor: pointer; color: #6b7280; padding: 0; width: 32px; height: 32px; border-radius: 6px; line-height: 1; } .diag-modal-close:hover { background: #e5e7eb; } .diag-modal-body { padding: 14px 18px 18px; overflow-y: auto; flex: 1; } .diag-resumen { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; line-height: 1.4; border-left: 4px solid; } .diag-resumen.diag-ok { background: #f0fdf4; border-left-color: #16a34a; } .diag-resumen.diag-warn { background: #fffbeb; border-left-color: #d97706; } .diag-resumen.diag-err { background: #fef2f2; border-left-color: #dc2626; } .diag-resumen-detalle { margin-top: 4px; font-size: 12px; color: #4b5563; font-weight: normal; } .diag-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 12px; padding: 10px 12px; background: #f3f4f6; border-radius: 8px; font-size: 12px; margin-bottom: 14px; word-break: break-word; } .diag-info-grid code { font-family: 'JetBrains Mono', monospace; font-size: 11px; } .diag-warn { color: #d97706; font-style: italic; } .diag-pasos { display: flex; flex-direction: column; gap: 10px; } .diag-paso { padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-size: 12px; } .diag-paso-ok { background: #f0fdf4; border-color: #86efac; } .diag-paso-warn { background: #fffbeb; border-color: #fcd34d; } .diag-paso-err { background: #fef2f2; border-color: #fca5a5; } .diag-paso-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .diag-pill { display: inline-block; padding: 2px 8px; background: #e5e7eb; color: #374151; border-radius: 12px; font-size: 10px; font-weight: 600; } .diag-pill-ok { background: #86efac; color: #14532d; } .diag-pill-fail { background: #fca5a5; color: #7f1d1d; } .diag-sub-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; font-weight: 700; margin: 8px 0 4px; } .diag-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .diag-li { padding: 6px 10px; border-radius: 6px; background: #f9fafb; font-size: 11px; border-left: 3px solid #d1d5db; word-break: break-word; } .diag-li-ok { border-left-color: #16a34a; } .diag-li-fail { border-left-color: #dc2626; } .diag-li-err { border-left-color: #f59e0b; } .diag-li code { font-family: 'JetBrains Mono', monospace; background: #fff; padding: 1px 5px; border-radius: 3px; font-size: 10px; } .diag-url { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #6b7280; margin-top: 2px; word-break: break-all; } .diag-keys { margin-top: 4px; font-size: 11px; color: #4b5563; } .diag-details { margin-top: 4px; cursor: pointer; } .diag-details summary { font-size: 11px; color: #2563eb; cursor: pointer; } .diag-details pre { background: #1f2937; color: #e5e7eb; padding: 8px; border-radius: 6px; font-size: 10px; overflow-x: auto; max-height: 200px; margin-top: 4px; white-space: pre-wrap; word-break: break-word; } .diag-err { background: #fef2f2; color: #991b1b; padding: 6px 8px; border-radius: 6px; margin-top: 4px; font-size: 11px; } .diag-info { background: #eff6ff; color: #1e3a8a; padding: 6px 8px; border-radius: 6px; margin-top: 4px; font-size: 11px; } .diag-recomendacion { margin-top: 12px; padding: 12px 14px; background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%); border: 1px solid #c7d2fe; border-radius: 10px; font-size: 12px; line-height: 1.5; } /* ===== Botón "agregar competidores manuales" ===== */ .repricer-comp-manual-btn { width: 100%; margin-top: 6px; padding: 8px 12px; background: #f0fdf4; border: 1px dashed #16a34a; color: #14532d; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; } .repricer-comp-manual-btn:hover { background: #dcfce7; } .repricer-comp-manual-btn:active { background: #bbf7d0; } /* ===== Modal competidores manuales ===== */ .comp-manual-modal { max-width: 560px; width: 95%; max-height: 88vh; overflow-y: auto; } .comp-manual-sub { font-size: 12px; color: var(--gris-texto); margin-bottom: 12px; } .comp-manual-explica { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; font-size: 11px; line-height: 1.4; margin-bottom: 10px; } .comp-manual-explica p { margin: 0 0 6px 0; } .comp-manual-explica ul { margin: 4px 0; padding-left: 18px; } .comp-manual-explica li { margin: 2px 0; } .comp-manual-explica code { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: #fff; padding: 1px 4px; border-radius: 3px; } #comp-manual-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; resize: vertical; min-height: 140px; margin-bottom: 10px; } #comp-manual-textarea:focus { border-color: #16a34a; outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); } .comp-manual-prev-ok { background: #f0fdf4; color: #14532d; padding: 8px 10px; border-radius: 6px; font-size: 11px; margin-bottom: 8px; word-break: break-all; } .comp-manual-prev-fail { background: #fef2f2; color: #991b1b; padding: 8px 10px; border-radius: 6px; font-size: 11px; margin-bottom: 8px; } /* ===== Acciones cuando no hay competencia ===== */ .repricer-acciones-no-comp { display: flex; gap: 6px; margin-top: 8px; } .repricer-url-busq-btn { flex: 1; padding: 8px 12px; background: #eff6ff; border: 1px dashed #2563eb; color: #1e3a8a; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; } .repricer-url-busq-btn:hover { background: #dbeafe; } .repricer-url-busq-btn:active { background: #bfdbfe; } .repricer-acciones-no-comp .repricer-comp-manual-btn { flex: 1; margin-top: 0; } /* ===== Modal URL búsqueda ===== */ .url-busq-modal { max-width: 560px; width: 95%; max-height: 88vh; overflow-y: auto; } .url-busq-modal a { color: #2563eb; text-decoration: underline; } #url-busq-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid #c7d2fe; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-bottom: 10px; } #url-busq-input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } #url-busq-resultado { margin-top: 10px; } .url-busq-status { background: #eff6ff; color: #1e3a8a; padding: 8px 10px; border-radius: 6px; font-size: 11px; } .url-busq-ok { background: #f0fdf4; color: #14532d; padding: 8px 10px; border-radius: 6px; font-size: 11px; } .url-busq-fail { background: #fef2f2; color: #991b1b; padding: 8px 10px; border-radius: 6px; font-size: 11px; } /* Repricer: botón "Agregar producto" arriba */ .repricer-btn-agregar { width: 100%; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #f0f7ff; border: 1px dashed #90caf9; color: #0052cc; font-weight: 600; } .repricer-btn-agregar:active { background: #e3f2fd; } /* Despachar — panel de diagnóstico cuando está vacío */ .despachar-debug { margin-top: 20px; padding: 14px; background: #fff8e1; border: 1px solid #ffd54f; border-radius: 10px; font-size: 12px; color: #5a4a00; line-height: 1.6; } .despachar-debug b { color: #2a2200; } /* ============================================================ ÚLTIMAS RECEPCIONES (paquetes Ali recibidos) ============================================================ */ .recepciones-config { background: white; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; box-shadow: var(--shadow); } .recepciones-config label { display: flex; align-items: center; gap: 10px; } .recepciones-config-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .recepciones-config select { flex: 1; padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; background: white; font-family: inherit; } .recepciones-resumen-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .recepciones-resumen-stat { background: white; border-radius: 10px; padding: 10px 6px; text-align: center; box-shadow: var(--shadow); border-left: 3px solid #ccc; } .recepciones-resumen-stat.huerfanos { border-left-color: #d32f2f; background: #fff5f5; } .recepciones-resumen-stat.vinculadas { border-left-color: #2e7d32; background: #f1f8f4; } .recepciones-resumen-stat.total { border-left-color: #1976d2; background: #f0f7ff; } .recepciones-resumen-num { font-size: 22px; font-weight: 800; color: var(--texto); line-height: 1; } .recepciones-resumen-lbl { font-size: 10px; color: var(--gris-texto); margin-top: 4px; letter-spacing: 0.2px; text-transform: uppercase; font-weight: 600; } .recepciones-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .recep-card { background: white; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); border-left: 4px solid #2e7d32; cursor: pointer; transition: transform 0.1s; } .recep-card:active { transform: scale(0.99); } .recep-card-huerfano { border-left-color: #d32f2f; background: #fffafa; } .recep-card-head { display: flex; gap: 10px; align-items: center; } .recep-img, .recep-img-placeholder { width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0; object-fit: cover; } .recep-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 20px; } .recep-info { flex: 1; min-width: 0; } .recep-nombre { font-size: 14px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recep-meta { font-size: 11px; color: var(--gris-texto); margin-top: 3px; } .recep-meta code { background: #eef; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #0052cc; } .recep-cant { font-size: 18px; font-weight: 800; padding: 6px 12px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; } .recep-cant.pos { background: #e8f5e9; color: #2e7d32; } .recep-cant.neg { background: #ffebee; color: #c62828; } .recep-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; } .recep-badge-huerfano { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; } .recep-badge-padre { background: #e3f2fd; color: #0052cc; border: 1px solid #90caf9; } .recep-badge-vinc { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .recep-actions { display: flex; gap: 6px; margin-top: 10px; } .recep-actions .btn-mini { flex: 1; } /* ============================================================ BÚSQUEDA GLOBAL — Modal full-screen ============================================================ */ #modal-busqueda .modal-content.busqueda-content { width: 100%; max-width: 600px; max-height: 85vh; display: flex; flex-direction: column; padding: 0; } .busqueda-input-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--gris-borde, #e0e0e0); } .busqueda-input-row > svg, .busqueda-input-row > i { color: var(--gris-texto); flex-shrink: 0; } .busqueda-input-row input { flex: 1; border: 0; outline: 0; font-size: 16px; padding: 6px 8px; background: transparent; font-family: inherit; color: var(--texto); } .busqueda-resultados { flex: 1; overflow-y: auto; padding: 8px 0; max-height: 60vh; min-height: 200px; } .busqueda-empty { text-align: center; padding: 40px 20px; color: var(--gris-texto); } .busqueda-loading { text-align: center; padding: 30px 20px; color: var(--gris-texto); font-size: 13px; } .busqueda-seccion-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; padding: 12px 14px 6px; } .busqueda-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.1s; } .busqueda-row:hover { background: #f5f7fb; } .busqueda-row:active { background: #eaeef5; } .busqueda-img, .busqueda-img-placeholder { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .busqueda-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 16px; } .busqueda-info { flex: 1; min-width: 0; } .busqueda-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .busqueda-meta { font-size: 11px; color: var(--gris-texto); margin-top: 3px; line-height: 1.4; } .busqueda-meta code { background: #eef; padding: 1px 4px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #0052cc; } .busqueda-stock { font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; } .busqueda-stock.stock-ok { background: #e8f5e9; color: #2e7d32; } .busqueda-stock.stock-warning { background: #fff3e0; color: #ef6c00; } .busqueda-stock.stock-bad { background: #ffebee; color: #c62828; } /* Chips dentro de búsqueda */ .bus-chip { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; letter-spacing: 0.3px; } .bus-chip-padre { background: #e3f2fd; color: #0052cc; } .bus-chip-var { background: #fff8e1; color: #6a4c00; } .bus-chip-stand { background: #f5f5f5; color: #757575; } .bus-chip-recibido { background: #e8f5e9; color: #2e7d32; } .bus-chip-transito { background: #e3f2fd; color: #0052cc; } .bus-chip-pendiente { background: #fff3e0; color: #ef6c00; } /* ============================================================ RENTABILIDAD POR PRODUCTO ============================================================ */ .rent-config { background: white; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow); display: flex; gap: 10px; } .rent-config label { flex: 1; display: flex; flex-direction: column; gap: 4px; } .rent-config-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .rent-config select { padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; background: white; font-family: inherit; } .rent-resumen-hero { background: linear-gradient(135deg, #00a86b 0%, #007a4d 100%); color: white; border-radius: 14px; padding: 16px; text-align: center; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(0,168,107,0.25); } .rent-resumen-hero.profit-neg { background: linear-gradient(135deg, #d32f2f 0%, #a01818 100%); box-shadow: 0 4px 14px rgba(211,47,47,0.25); } .rent-resumen-hero-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; } .rent-resumen-hero-num { font-size: 32px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; } .rent-resumen-hero-sub { font-size: 12px; margin-top: 4px; opacity: 0.9; } .rent-resumen-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; } .rent-resumen-stat { background: white; border-radius: 8px; padding: 8px 4px; text-align: center; box-shadow: var(--shadow); } .rent-resumen-stat.perdedores .rent-resumen-num { color: #c62828; } .rent-resumen-num { font-size: 16px; font-weight: 800; color: var(--texto); line-height: 1.1; } .rent-resumen-lbl { font-size: 9px; color: var(--gris-texto); margin-top: 3px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } .rent-highlight { font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; } .rent-highlight-mejor { background: #e8f5e9; color: #2e7d32; border-left: 3px solid #2e7d32; } .rent-highlight-peor { background: #ffebee; color: #c62828; border-left: 3px solid #c62828; } .rent-filtros { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .rent-row { background: white; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); transition: transform 0.1s; } .rent-row:active { transform: scale(0.99); } .rent-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .rent-pos { width: 32px; font-weight: 800; font-size: 13px; color: var(--gris-texto); text-align: center; flex-shrink: 0; } .rent-img, .rent-img-placeholder { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .rent-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 18px; } .rent-info { flex: 1; min-width: 0; } .rent-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rent-meta { font-size: 11px; color: var(--gris-texto); margin-top: 2px; } .rent-profit { font-size: 16px; font-weight: 800; white-space: nowrap; text-align: right; flex-shrink: 0; } .profit-pos { color: #2e7d32; } .profit-neg { color: #c62828; } .rent-bar-wrap { height: 4px; background: #f5f5f5; border-radius: 2px; overflow: hidden; margin-bottom: 8px; } .rent-bar { height: 100%; transition: width 0.3s; } .rent-bar.bar-pos { background: linear-gradient(90deg, #66bb6a, #2e7d32); } .rent-bar.bar-neg { background: linear-gradient(90deg, #ef5350, #c62828); } .rent-detalle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 8px; border-top: 1px solid #f0f0f0; } .rent-det-col { text-align: center; } .rent-det-lbl { font-size: 9px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; } .rent-det-val { font-size: 12px; font-weight: 700; color: var(--texto); margin-top: 2px; } .rent-warning { font-size: 10px; color: #ef6c00; margin-top: 8px; padding: 4px 8px; background: #fff8e1; border-radius: 6px; text-align: center; } /* ============================================================ TOP CLIENTES ============================================================ */ .tc-config { background: white; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow); display: flex; gap: 10px; } .tc-config label { flex: 1; display: flex; flex-direction: column; gap: 4px; } .tc-config-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .tc-config select { padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; background: white; font-family: inherit; } .tc-resumen-hero { background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%); color: white; border-radius: 14px; padding: 16px; text-align: center; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(106,27,154,0.25); } .tc-resumen-hero-lbl { font-size: 11px; letter-spacing: 0.4px; opacity: 0.9; } .tc-resumen-hero-num { font-size: 28px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; } .tc-resumen-hero-sub { font-size: 12px; margin-top: 4px; opacity: 0.9; } .tc-resumen-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .tc-resumen-stat { background: white; border-radius: 8px; padding: 8px 4px; text-align: center; box-shadow: var(--shadow); } .tc-resumen-num { font-size: 18px; font-weight: 800; color: var(--texto); } .tc-resumen-lbl { font-size: 9px; color: var(--gris-texto); margin-top: 3px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } .tc-highlight { font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; background: #f3e5f5; color: #6a1b9a; border-left: 3px solid #6a1b9a; } .tc-filtros { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .tc-card { background: white; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); } .tc-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .tc-pos { width: 28px; font-weight: 800; font-size: 13px; color: var(--gris-texto); text-align: center; flex-shrink: 0; } .tc-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #6a1b9a, #4a148c); color: white; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tc-info { flex: 1; min-width: 0; } .tc-nombre { font-size: 14px; font-weight: 700; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-meta { margin-top: 3px; display: flex; gap: 4px; flex-wrap: wrap; } .tc-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 8px; white-space: nowrap; letter-spacing: 0.3px; } .tc-badge-top { background: #fff8e1; color: #f57f17; border: 1px solid #ffd54f; } .tc-badge-recurrente { background: #e3f2fd; color: #0052cc; border: 1px solid #90caf9; } .tc-badge-activo { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .tc-badge-dormido { background: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; } .tc-gastado { font-size: 16px; font-weight: 800; color: #2e7d32; white-space: nowrap; flex-shrink: 0; } .tc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; background: #fafafa; border-radius: 8px; margin-bottom: 8px; } .tc-stat { text-align: center; } .tc-stat-num { font-size: 13px; font-weight: 800; color: var(--texto); } .tc-stat-lbl { font-size: 9px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; margin-top: 2px; } .tc-productos-titulo { font-size: 10px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; margin-bottom: 4px; } .tc-productos { display: flex; flex-direction: column; gap: 3px; } .tc-prod-fav { display: flex; gap: 6px; font-size: 11px; align-items: center; } .tc-prod-cant { background: #6a1b9a; color: white; padding: 1px 6px; border-radius: 8px; font-weight: 700; font-size: 10px; white-space: nowrap; } .tc-prod-nombre { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* ============================================================ AUDITORÍA ML ============================================================ */ .audit-hero { background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%); color: white; border-radius: 14px; padding: 20px; text-align: center; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(0,102,255,0.25); } .audit-hero.cobertura-ok { background: linear-gradient(135deg, #00a86b 0%, #007a4d 100%); } .audit-hero.cobertura-warning { background: linear-gradient(135deg, #ff9800 0%, #e65100 100%); } .audit-hero.cobertura-bad { background: linear-gradient(135deg, #d32f2f 0%, #a01818 100%); } .audit-hero-pct { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .audit-hero-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.9; margin-top: 4px; } .audit-hero-sub { font-size: 13px; margin-top: 6px; opacity: 0.95; } .audit-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; } .audit-stat { background: white; border-radius: 8px; padding: 10px 4px; text-align: center; box-shadow: var(--shadow); border-left: 3px solid #ccc; } .audit-stat.audit-stat-ok { border-left-color: #2e7d32; } .audit-stat.audit-stat-bad { border-left-color: #d32f2f; } .audit-stat.audit-stat-warn { border-left-color: #f57c00; } .audit-stat-num { font-size: 18px; font-weight: 800; color: var(--texto); } .audit-stat-lbl { font-size: 9px; color: var(--gris-texto); margin-top: 2px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } .audit-filtros { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .audit-toolbar { display: flex; gap: 6px; margin-bottom: 10px; } .audit-row { display: flex; align-items: center; gap: 10px; background: white; border-radius: 10px; padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow); } .audit-check { width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; } .audit-img, .audit-img-placeholder { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .audit-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 18px; } .audit-info { flex: 1; min-width: 0; } .audit-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audit-meta, .audit-meta2 { font-size: 10px; color: var(--gris-texto); margin-top: 3px; line-height: 1.4; } .audit-meta code, .audit-meta2 code { background: #eef; padding: 1px 4px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #0052cc; } .audit-meta2 a { color: var(--azul); text-decoration: none; } .audit-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; letter-spacing: 0.3px; text-transform: uppercase; } .audit-badge-active { background: #e8f5e9; color: #2e7d32; } .audit-badge-paused { background: #fff3e0; color: #ef6c00; } .audit-badge-closed { background: #f5f5f5; color: #757575; } .audit-badge-review { background: #f3e5f5; color: #6a1b9a; } .audit-badge-var { background: #e3f2fd; color: #0052cc; } .audit-badge-up { background: #fff8e1; color: #6a4c00; } .audit-badge-cat { background: #fce4ec; color: #ad1457; } .audit-import-one { flex-shrink: 0; white-space: nowrap; } .audit-aplicar-bar { position: sticky; bottom: 12px; background: white; border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-top: 14px; } .audit-aplicar-bar.hidden { display: none; } .audit-aplicar-bar #audit-aplicar-info { font-size: 13px; font-weight: 600; color: var(--texto); } .audit-aplicar-bar .btn { flex: 0 0 auto; padding: 10px 18px; } .audit-huer-titulo { font-size: 12px; color: var(--gris-texto); padding: 10px 14px; background: #fff8e1; border-radius: 8px; margin-bottom: 10px; } .audit-huer-row { display: flex; justify-content: space-between; align-items: center; background: white; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; box-shadow: var(--shadow); } .audit-huer-row code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c62828; } .audit-huer-link { font-size: 12px; color: var(--azul); text-decoration: none; } /* ============================================================ FIX: Pantallas viejas que el rediseño no pulió bien ============================================================ */ /* === Detalle de producto: header + título === */ .iv-det-header { background: white; border-radius: 16px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); text-align: center; } .iv-det-img, .iv-det-noimg { width: 140px !important; height: 140px !important; border-radius: 12px; object-fit: cover; margin: 0 auto 12px; display: block; } .iv-det-noimg { background: #f0f0f0; display: flex !important; align-items: center; justify-content: center; font-size: 40px; } .iv-det-titulo { font-size: 18px; font-weight: 700; color: var(--texto); line-height: 1.3; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .iv-det-stocktotal { font-size: 13px; color: var(--gris-texto); margin-top: 8px; } .iv-det-stocktotal b { font-size: 18px; color: var(--texto); font-weight: 800; } /* === Botones-icono al lado del titulo (editar nombre / costo / borrar) === */ .btn-edit-nombre, .btn-edit-costo, .btn-eliminar-detalle { background: #f5f7fb !important; border: 1px solid #e0e6f0 !important; width: 32px; height: 32px; border-radius: 50% !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; font-size: 14px !important; flex-shrink: 0; transition: all 0.15s; vertical-align: middle; } .btn-edit-nombre:active, .btn-edit-costo:active, .btn-eliminar-detalle:active { transform: scale(0.92); background: #e9eef7 !important; } .btn-edit-nombre.btn-edit-nombre-grande, .btn-edit-costo.btn-edit-nombre-grande, .btn-eliminar-detalle.btn-edit-nombre-grande { width: 34px; height: 34px; font-size: 15px !important; } .btn-eliminar-detalle.btn-edit-nombre-grande { background: #ffebee !important; border-color: #ffcdd2 !important; } /* === Seccion generica en el detalle === */ .iv-det-section { background: white; border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); } .iv-det-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-texto); font-weight: 700; margin-bottom: 10px; } .iv-det-meta { font-size: 13px; color: var(--gris-texto); margin-top: 6px; } .iv-det-meta code { background: #eef; padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #0052cc; } .iv-det-meta-info { font-size: 12px; color: var(--gris-texto); margin-bottom: 10px; margin-top: -4px; line-height: 1.4; } /* === Botones +/- (ajustar stock) === */ .iv-det-stockedit { display: flex; gap: 8px; align-items: center; } .btn-circle { width: 40px; height: 40px; border-radius: 50%; background: white; border: 2px solid var(--azul, #0066ff); color: var(--azul, #0066ff); font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: all 0.15s; } .btn-circle:active { transform: scale(0.92); background: var(--azul, #0066ff); color: white; } .btn-circle-sm { width: 30px; height: 30px; font-size: 16px; border-width: 1.5px; } .iv-det-stock-input { flex: 1; padding: 10px 12px; border: 1px solid #d0d7e0; border-radius: 10px; text-align: center; font-size: 16px; font-weight: 600; background: white; outline: none; transition: border 0.15s; } .iv-det-stock-input:focus { border-color: var(--azul, #0066ff); } .iv-btn-ajustar-padre, .iv-btn-guardar { width: 100%; margin-top: 12px; } .iv-btn-vender { width: 100%; margin-top: 10px; } .iv-btn-vincular, .iv-btn-crear-padre-auto { width: 100%; margin-top: 6px; font-size: 13px; } /* === Card de variante (Pack X4, etc.) === */ .iv-det-variante { background: white; border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); border-left: 4px solid #ce93d8; } .iv-det-variante-header { text-align: center; margin-bottom: 10px; } .iv-det-variante-img { width: 100px !important; height: 100px !important; border-radius: 10px; object-fit: cover; margin: 0 auto 8px; display: block; } .iv-det-variante-nombre { font-size: 14px; font-weight: 600; color: var(--texto); margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; } .iv-det-variante-sku, .iv-det-variante-id { font-size: 11px; color: var(--gris-texto); margin-top: 2px; font-family: 'JetBrains Mono', monospace; } .iv-det-variante-mult { font-size: 12px; background: #fff3e0; color: #b65900; padding: 2px 8px; border-radius: 12px; display: inline-block; margin: 4px 0; font-weight: 600; } .iv-det-variante-stock-calc { font-size: 18px; font-weight: 800; color: #f57f17; text-align: center; margin: 6px 0; } .iv-det-variante-stock-sub { font-size: 10px; color: var(--gris-texto); text-align: center; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; } .btn-mini-success { background: var(--verde, #00a86b) !important; color: white !important; border: 0 !important; } /* === Pantalla Sincronizacion ML (en reportes) === */ .ml-sync-card, .ml-diag-container, .ml-diag-resumen, .ml-diag-ventas { background: white; border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); } .ml-diag-titulo, .ml-sync-titulo { font-size: 15px; font-weight: 700; color: var(--texto); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .ml-diag-status-ok { color: var(--verde, #00a86b); } .ml-diag-status-warn { color: #ef6c00; } .ml-diag-status-error { color: var(--rojo, #e53935); } .ml-diag-stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; } .ml-diag-stat-row:last-child { border-bottom: 0; } .ml-diag-stat-num { font-weight: 800; font-size: 16px; color: var(--texto); } .ml-diag-venta { background: #fafbfd; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; border-left: 3px solid #c5d9f0; } .ml-diag-venta-titulo { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } .ml-diag-venta-meta { font-size: 11px; color: var(--gris-texto); margin-top: 4px; } .ml-diag-venta-meta b { color: var(--texto); } .ml-diag-venta-link { font-size: 11px; color: var(--azul, #0066ff); text-decoration: none; font-weight: 600; } .ml-diag-resync-btn, .ml-diag-fecha-btn, .ml-diag-horario-btn, .ml-diag-corregir-btn, .btn-ml-resincronizar { width: 100%; margin-top: 10px; padding: 11px 14px; border-radius: 10px; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .ml-diag-horario-input { width: 100%; padding: 10px; border: 1px solid #d0d7e0; border-radius: 8px; font-size: 14px; margin-bottom: 8px; } .ml-diag-horario-dias { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .ml-diag-horario-dias label { display: flex; align-items: center; gap: 4px; font-size: 13px; background: #f5f7fb; padding: 6px 12px; border-radius: 8px; cursor: pointer; } /* === Generales: mejorar legibilidad de listas planas que no tienen card === */ .content > p, .content > div:not([class]) { line-height: 1.5; color: var(--texto); } /* ============================================================ PACKS / VARIANTES — clases reales: .iv-variant-row ============================================================ */ .iv-variant-row { background: white; border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); display: grid; grid-template-columns: 80px 1fr 110px; gap: 12px; align-items: start; } .iv-variant-img, .iv-variant-noimg { width: 80px !important; height: 80px !important; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .iv-variant-noimg { background: #f0f0f0; display: flex !important; align-items: center; justify-content: center; font-size: 28px; } .iv-variant-info { min-width: 0; } .iv-variant-nombre { font-size: 14px; font-weight: 700; color: var(--texto); line-height: 1.3; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .iv-variant-nombre .btn-edit-nombre, .iv-variant-nombre .btn-edit-costo, .iv-variant-nombre .btn-refrescar-ml { background: #f5f7fb !important; border: 1px solid #e0e6f0 !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; font-size: 12px !important; flex-shrink: 0; vertical-align: middle; } .iv-variant-atributos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .iv-atributo { font-size: 10px; background: #f0f7ff; color: #0052cc; padding: 2px 7px; border-radius: 8px; white-space: nowrap; } .iv-variant-sku, .iv-variant-pid { font-size: 10px; color: var(--gris-texto); margin-top: 2px; line-height: 1.4; } .iv-variant-sku code, .iv-variant-pid code { background: #eef; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #0052cc; } .iv-variant-mult { font-size: 11px; background: #fff3e0; color: #b65900; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 4px; font-weight: 700; } .iv-ml-link { font-size: 10px; color: var(--azul, #0066ff); text-decoration: none; margin-left: 4px; } .iv-btn-desvincular { background: #fff3e0 !important; color: #b65900 !important; border: 1px solid #ffcc80 !important; font-size: 11px !important; padding: 6px 10px !important; border-radius: 8px !important; margin-top: 6px !important; display: inline-block; cursor: pointer; } /* === Columna derecha del variant: stock + vender === */ .iv-variant-stockwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .iv-variant-stock { font-size: 26px; font-weight: 800; line-height: 1; padding: 6px 14px; border-radius: 10px; } .iv-variant-stock.iv-stock-ok { background: #e8f5e9; color: #2e7d32; } .iv-variant-stock.iv-stock-low { background: #fff3e0; color: #ef6c00; } .iv-variant-stock.iv-stock-zero { background: #ffebee; color: #c62828; } .iv-variant-readonly { font-size: 10px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; } .iv-variant-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; } .iv-stock-input-inline { width: 50px; padding: 4px; border: 1px solid #d0d7e0; border-radius: 6px; text-align: center; font-size: 13px; font-weight: 600; } .iv-btn-guardar-inline { padding: 4px 8px !important; font-size: 11px !important; } .iv-btn-vender-variant { background: var(--verde, #00a86b) !important; color: white !important; border: 0 !important; padding: 7px 12px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap; } /* En móvil estrecho, columna derecha más chica */ @media (max-width: 420px) { .iv-variant-row { grid-template-columns: 64px 1fr 90px; gap: 8px; padding: 10px; } .iv-variant-img, .iv-variant-noimg { width: 64px !important; height: 64px !important; } .iv-variant-stock { font-size: 22px; padding: 4px 10px; } } /* ============================================================ SINCRONIZACIÓN ML — clases reales: .ml-diag-* ============================================================ */ .ml-diag-header { background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%); border: 1px solid #ffe082; border-radius: 14px; padding: 14px; margin-bottom: 12px; } .ml-diag-body { background: white; border-radius: 14px; padding: 14px; box-shadow: var(--shadow); } /* Filas de estado del sync */ .ml-diag-row { padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; font-size: 13px; line-height: 1.5; background: #fafbfd; } .ml-diag-row code { background: white; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #0052cc; } .ml-diag-row.ml-diag-ok { background: #e8f5e9; color: #1b5e20; border-left: 3px solid #2e7d32; } .ml-diag-row.ml-diag-warn { background: #fff8e1; color: #6a4c00; border-left: 3px solid #ef6c00; } .ml-diag-row.ml-diag-err { background: #ffebee; color: #b71c1c; border-left: 3px solid #c62828; } .ml-diag-hint { font-size: 11px; color: var(--gris-texto); display: block; margin-top: 4px; line-height: 1.4; } /* Stats grid */ .ml-diag-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; } .ml-diag-stat { background: #f5f7fb; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 3px solid #c5d9f0; } .ml-diag-stat b { font-size: 22px; font-weight: 800; color: var(--texto); line-height: 1; } .ml-diag-stat span { font-size: 11px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; } .ml-diag-stat.ml-diag-stat-ok { border-left-color: #2e7d32; } .ml-diag-stat.ml-diag-stat-ok b { color: #2e7d32; } .ml-diag-stat.ml-diag-stat-warn { border-left-color: #ef6c00; } .ml-diag-stat.ml-diag-stat-warn b { color: #ef6c00; } @media (min-width: 500px) { .ml-diag-stats { grid-template-columns: repeat(4, 1fr); } } /* Títulos de secciones */ .ml-diag-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-texto); font-weight: 700; margin: 16px 0 8px; } /* === Últimas ventas en sync ML === */ .ml-diag-ventas { display: flex; flex-direction: column; gap: 6px; background: transparent; padding: 0; box-shadow: none; } .ml-diag-venta-row, .ml-diag-venta { background: white; border-radius: 10px; padding: 10px 12px; border-left: 3px solid #c5d9f0; margin-bottom: 0; } .ml-diag-venta-titulo { font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 4px; line-height: 1.3; } .ml-diag-venta-meta { font-size: 11px; color: var(--gris-texto); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ml-diag-venta-meta b { color: var(--texto); } .ml-diag-venta-estado { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 8px; letter-spacing: 0.3px; text-transform: uppercase; } .ml-diag-venta-estado.ok { background: #e8f5e9; color: #2e7d32; } .ml-diag-venta-estado.warn { background: #fff3e0; color: #ef6c00; } .ml-diag-venta-link { color: var(--azul, #0066ff); text-decoration: none; font-size: 11px; font-weight: 600; } /* === Botones de acción del sync === */ .ml-diag-action-btn, .btn-ml-diag, .btn-ml-sync-now, .btn-ml-resincronizar, .ml-diag-fecha-btn, .ml-diag-horario-btn, .ml-diag-resync-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; margin-top: 10px; background: white; border: 1px solid #d0d7e0; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--texto); cursor: pointer; transition: all 0.15s; } .ml-diag-action-btn:active, .btn-ml-diag:active, .btn-ml-sync-now:active, .btn-ml-resincronizar:active { background: #f5f7fb; transform: scale(0.99); } /* === Publicaciones a corregir === */ .ml-diag-corregir-box { display: flex; flex-direction: column; gap: 8px; } .ml-diag-corregir-row { background: white; border-radius: 10px; padding: 10px 12px; border-left: 3px solid #ef6c00; display: flex; flex-direction: column; gap: 6px; } .ml-diag-corregir-titulo { font-size: 13px; font-weight: 600; color: var(--texto); line-height: 1.3; } .ml-diag-corregir-meta { font-size: 11px; color: var(--gris-texto); line-height: 1.4; } .ml-diag-corregir-motivo { background: #fff3e0; color: #ef6c00; padding: 1px 6px; border-radius: 6px; font-weight: 700; } .ml-diag-corregir-actions { display: flex; gap: 6px; flex-wrap: wrap; } .ml-diag-corregir-importar { background: var(--azul, #0066ff); color: white; border: 0; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; } .ml-diag-corregir-link { color: var(--azul, #0066ff); text-decoration: none; font-size: 12px; font-weight: 600; padding: 7px 0; } /* === HOY: warning de ganancia incompleta === */ .dash-hoy-warning { margin-top: 10px; padding: 8px 12px; background: rgba(255, 152, 0, 0.15); color: #ffb74d; border-left: 3px solid #ff9800; border-radius: 6px; font-size: 11px; line-height: 1.4; } .dash-ganancia-incompleto { opacity: 0.6; } .dash-ganancia-incompleto .dash-hoy-num { font-size: 36px; color: var(--gris-texto) !important; } /* ============================================================ LISTA DE PICKING DIARIA ============================================================ */ .picking-hero { background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); color: white; border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(25,118,210,0.25); } .picking-hero-num { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .picking-hero-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.9; margin-top: 6px; } .picking-hero-sub { font-size: 13px; margin-top: 6px; opacity: 0.85; } .picking-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; } .picking-stat { background: white; border-radius: 8px; padding: 10px 4px; text-align: center; box-shadow: var(--shadow); } .picking-stat-num { font-size: 18px; font-weight: 800; color: var(--texto); } .picking-stat-lbl { font-size: 9px; color: var(--gris-texto); margin-top: 2px; letter-spacing: 0.3px; text-transform: uppercase; font-weight: 600; } .picking-stat-bad .picking-stat-num { color: #c62828; } .picking-filtros { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .pick-row { background: white; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); border-left: 4px solid #e0e0e0; transition: all 0.2s; } .pick-row-flex { border-left-color: #ff9800; } .pick-row-sacado { opacity: 0.5; background: #f5f5f5; } .pick-row-sacado .pick-nombre { text-decoration: line-through; } .pick-row-head { display: grid; grid-template-columns: 36px 56px 1fr 64px; gap: 10px; align-items: center; } .pick-check { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #d0d7e0; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.15s; flex-shrink: 0; } .pick-check:active { transform: scale(0.92); } .pick-check.pick-check-on { background: var(--verde, #00a86b); border-color: var(--verde, #00a86b); color: white; } .pick-img, .pick-img-placeholder { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; } .pick-img-placeholder { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 22px; } .pick-info { min-width: 0; } .pick-nombre { font-size: 14px; font-weight: 700; color: var(--texto); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pick-flex-badge { background: #fff3e0; color: #ef6c00; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 8px; letter-spacing: 0.3px; margin-right: 4px; vertical-align: middle; } .pick-meta { font-size: 11px; color: var(--gris-texto); margin-top: 4px; } .pick-meta code { background: #eef; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #0052cc; } .pick-stock-ok { color: #2e7d32; font-weight: 700; } .pick-stock-bad { color: #c62828; font-weight: 700; } .pick-stock-unknown { color: #6a1b9a; font-weight: 700; } .pick-pedidos { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .pick-pedido-chip { font-size: 10px; background: #f5f7fb; color: var(--texto); padding: 2px 7px; border-radius: 8px; border: 1px solid #e0e6f0; white-space: nowrap; } .pick-pedido-mas { font-size: 10px; color: var(--gris-texto); font-style: italic; } .pick-cantidad { text-align: center; background: #f5f7fb; border-radius: 10px; padding: 8px 4px; flex-shrink: 0; } .pick-cant-num { font-size: 22px; font-weight: 800; line-height: 1; color: var(--texto); } .pick-cant-lbl { font-size: 10px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; margin-top: 2px; } @media (max-width: 420px) { .pick-row-head { grid-template-columns: 30px 48px 1fr 54px; gap: 8px; } .pick-img, .pick-img-placeholder { width: 48px; height: 48px; } .pick-cant-num { font-size: 18px; } } /* ============================================================ MODAL VINCULAR — Lista de padres compacta (filas horizontales) ============================================================ */ #vincular-padres-list, .vincular-directo-list, #vincular-directo-list { max-height: 300px; overflow-y: auto; border: 1px solid #e0e6f0; border-radius: 10px; background: #fafbfd; padding: 4px; margin-top: 8px; } .vincular-padre-row, .vincular-directo-row { display: grid !important; grid-template-columns: 44px 1fr 30px; gap: 10px; align-items: center; padding: 8px 10px !important; background: white; border-radius: 8px; margin-bottom: 4px; cursor: pointer; transition: background 0.15s; border: 1px solid transparent; width: 100%; box-sizing: border-box; } .vincular-padre-row:last-child, .vincular-directo-row:last-child { margin-bottom: 0; } .vincular-padre-row:hover, .vincular-directo-row:hover { background: #f0f7ff; } .vincular-padre-row.selected, .vincular-directo-row.selected { background: #e3f2fd; border-color: var(--azul, #0066ff); } .vincular-padre-row-nuevo { background: #fff8e1 !important; border-color: #ffd54f !important; animation: pulse-new 1.5s ease-out; } @keyframes pulse-new { 0% { background: #fff3c4; } 100% { background: #fff8e1; } } .vincular-padre-img, .vincular-padre-noimg, .vincular-directo-img, .vincular-directo-noimg { width: 44px !important; height: 44px !important; border-radius: 6px !important; object-fit: cover !important; flex-shrink: 0; } .vincular-padre-noimg, .vincular-directo-noimg { background: #f0f0f0; display: flex !important; align-items: center; justify-content: center; font-size: 16px; } /* El picker "Vincular directo" usa clases vd-* (sin esto la foto salía gigante) */ .vd-img, .vd-noimg { width: 44px !important; height: 44px !important; border-radius: 6px !important; object-fit: cover !important; flex-shrink: 0; } .vd-noimg { background: #f0f0f0; display: flex !important; align-items: center; justify-content: center; font-size: 18px; } .vd-info { min-width: 0; overflow: hidden; } .vd-nombre { font-size: 13px; font-weight: 600; color: var(--texto); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vd-meta { font-size: 11px; color: var(--gris-texto); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vd-radio { display: flex; align-items: center; justify-content: center; } .vd-badge { font-size: 10px; padding: 1px 5px; border-radius: 6px; font-weight: 700; margin-left: 4px; } .vd-badge-padre { background: var(--accent-soft); color: var(--accent); } .vd-badge-mult { background: var(--warning-soft); color: var(--warning); } .vd-more { font-size: 11px; color: var(--gris-texto); text-align: center; padding: 6px 4px; } .vincular-padre-info, .vincular-directo-info { min-width: 0; overflow: hidden; } .vincular-padre-nombre, .vincular-directo-nombre { font-size: 13px !important; font-weight: 600; color: var(--texto); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vincular-padre-meta, .vincular-directo-meta { font-size: 10px !important; color: var(--gris-texto); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vincular-padre-meta code, .vincular-directo-meta code { background: #eef; padding: 0 4px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #0052cc; } .vincular-padre-radio, .vincular-directo-radio { display: flex; align-items: center; justify-content: center; } .vincular-padre-radio input, .vincular-directo-radio input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--azul, #0066ff); } /* ============================================================ CALCULADORA DE PRECIO ============================================================ */ .calc-config-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; } .calc-config-row label { display: flex; flex-direction: column; gap: 3px; } .calc-config-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .calc-config-row select { padding: 8px 10px; border: 1px solid #d0d7e0; border-radius: 8px; font-size: 13px; font-family: inherit; } .calc-resultado { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .calc-empty { text-align: center; color: var(--gris-texto); padding: 30px 10px; font-size: 13px; } .calc-resultado-fila { padding: 12px 14px; border-radius: 10px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 12px; } .calc-resultado-target { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 1px solid #90caf9; } .calc-resultado-min { background: #fff3e0; border: 1px solid #ffcc80; } .calc-resultado-alto { background: #e8f5e9; border: 1px solid #a5d6a7; } .calc-resultado-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gris-texto); grid-column: 1; } .calc-resultado-precio { font-size: 22px; font-weight: 800; color: var(--texto); grid-column: 2; grid-row: 1 / 3; align-self: center; } .calc-resultado-meta { font-size: 11px; color: var(--gris-texto); grid-column: 1; } .calc-resultado-meta b { color: #2e7d32; font-weight: 700; } .calc-formula { font-size: 10px; color: var(--gris-texto); text-align: center; padding: 8px; background: #f5f7fb; border-radius: 6px; margin-top: 4px; } .calc-formula code { background: white; padding: 1px 4px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; } /* ============================================================ QUICK CAPTURE ============================================================ */ .quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ============================================================ REPRICER CRON (sección de cron en repricer) ============================================================ */ .repricer-cron-card { background: white; border-radius: 12px; padding: 14px; margin-top: 16px; border-left: 4px solid #6a1b9a; box-shadow: var(--shadow); } .repricer-cron-titulo { font-size: 14px; font-weight: 700; color: #6a1b9a; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .repricer-cron-on { background: #e8f5e9; color: #1b5e20; padding: 10px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; } .repricer-cron-off { background: #f5f5f5; color: var(--gris-texto); padding: 10px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; } .repricer-cron-info { font-size: 11px; font-weight: 400; margin-top: 4px; color: var(--texto); } .repricer-cron-info b { font-weight: 700; } .repricer-cron-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; font-size: 13px; } .repricer-cron-row select { padding: 8px 10px; border: 1px solid #d0d7e0; border-radius: 8px; font-size: 13px; font-family: inherit; } .repricer-cron-acciones { display: flex; gap: 8px; } .repricer-cron-acciones .btn { flex: 1; } .repricer-cron-hint { font-size: 11px; color: var(--gris-texto); margin-top: 10px; line-height: 1.4; } /* ============================================================ COMPARATIVA MES VS MES (dashboard) ============================================================ */ .dash-comp { background: linear-gradient(135deg, #f5f7fb 0%, #e8edf5 100%); border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); } .dash-comp-titulo { font-size: 13px; font-weight: 700; color: var(--texto); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dash-comp-sub { font-size: 10px; font-weight: 400; color: var(--gris-texto); } .dash-comp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .dash-comp-cell { background: white; border-radius: 10px; padding: 10px 8px; text-align: center; } .dash-comp-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gris-texto); font-weight: 700; } .dash-comp-num { font-size: 18px; font-weight: 800; color: var(--texto); margin: 4px 0 2px; } .dash-comp-prev { font-size: 10px; color: var(--gris-texto); } .dash-comp-diff { margin-top: 6px; font-size: 12px; } .comp-up { color: #2e7d32; font-weight: 700; } .comp-down { color: #c62828; font-weight: 700; } .comp-flat { color: var(--gris-texto); font-weight: 600; } @media (max-width: 420px) { .dash-comp-num { font-size: 15px; } } /* ============================================================ CALENDARIO DE VENTAS (heatmap + barras) ============================================================ */ .cal-card { background: white; border-radius: 14px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); } .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .cal-header h3 { margin: 0; font-size: 15px; color: var(--texto); } .cal-vista-toggle { display: flex; background: #f5f7fb; border-radius: 8px; padding: 3px; gap: 2px; } .cal-vista-btn { background: transparent; border: 0; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--gris-texto); cursor: pointer; border-radius: 6px; transition: all 0.15s; font-family: inherit; } .cal-vista-btn.active { background: white; color: var(--azul, #0066ff); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .cal-stats { display: flex; gap: 10px; justify-content: space-around; background: #fafbfd; padding: 10px; border-radius: 10px; margin-bottom: 12px; } .cal-stat { display: flex; flex-direction: column; align-items: center; text-align: center; } .cal-stat b { font-size: 18px; font-weight: 800; color: var(--texto); } .cal-stat span { font-size: 10px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; margin-top: 2px; } /* === Vista DÍAS — heatmap === */ .cal-grid-wrap { display: grid; grid-template-columns: 24px 1fr; gap: 4px; overflow-x: auto; padding-bottom: 6px; } .cal-grid-dias-sem { display: grid; grid-template-rows: repeat(7, 14px); gap: 2px; } .cal-dia-sem { font-size: 9px; color: var(--gris-texto); font-weight: 600; line-height: 14px; text-align: right; padding-right: 2px; } .cal-grid-celdas { display: flex; gap: 2px; min-width: max-content; } .cal-col { display: grid; grid-template-rows: repeat(7, 14px); gap: 2px; } .cal-celda { width: 14px; height: 14px; border-radius: 3px; cursor: pointer; transition: transform 0.1s; } .cal-celda-pad { visibility: hidden; } .cal-celda:active { transform: scale(0.85); } .cal-celda-sel { outline: 2px solid var(--azul, #0066ff); outline-offset: 1px; } .cal-nivel-0 { background: #ebedf0; } .cal-nivel-1 { background: #9be9a8; } .cal-nivel-2 { background: #40c463; } .cal-nivel-3 { background: #30a14e; } .cal-nivel-4 { background: #216e39; } .cal-leyenda { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 10px; color: var(--gris-texto); margin-top: 8px; } .cal-leyenda .cal-celda { cursor: default; } .cal-detalle { margin-top: 12px; padding: 12px; background: #f5f7fb; border-radius: 10px; } .cal-detalle-hint { color: var(--gris-texto); font-size: 12px; text-align: center; font-style: italic; } .cal-detalle-titulo { font-size: 14px; font-weight: 700; color: var(--texto); margin-bottom: 8px; text-transform: capitalize; } .cal-detalle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cal-detalle-stat { background: white; padding: 8px; border-radius: 8px; text-align: center; } .cal-detalle-stat b { display: block; font-size: 15px; font-weight: 800; color: var(--texto); } .cal-detalle-stat span { font-size: 10px; color: var(--gris-texto); text-transform: uppercase; font-weight: 600; } /* === Vista SEMANAS — barras verticales === */ .cal-bars-wrap { display: flex; align-items: flex-end; gap: 4px; height: 200px; padding: 10px 0; overflow-x: auto; } .cal-bar-col { flex: 0 0 auto; min-width: 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; } .cal-bar-num { font-size: 10px; font-weight: 800; color: var(--texto); height: 12px; } .cal-bar { width: 100%; flex: 1; background: #f0f0f0; border-radius: 4px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .cal-bar-fill { background: linear-gradient(180deg, #40c463, #216e39); border-radius: 4px 4px 0 0; min-height: 2px; } .cal-bar-lbl { font-size: 9px; color: var(--gris-texto); white-space: nowrap; text-align: center; font-weight: 600; } /* === Vista MESES — filas con barras === */ .cal-meses { display: flex; flex-direction: column; gap: 6px; } .cal-mes-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; } .cal-mes-label { font-size: 12px; font-weight: 600; color: var(--texto); text-transform: capitalize; } .cal-mes-bar { position: relative; background: #f0f0f0; border-radius: 8px; height: 28px; overflow: hidden; } .cal-mes-bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #9be9a8, #216e39); border-radius: 8px; min-width: 4px; } .cal-mes-bar-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--texto); text-shadow: 0 0 4px rgba(255,255,255,0.8); } @media (max-width: 420px) { .cal-mes-row { grid-template-columns: 90px 1fr; } .cal-mes-label { font-size: 11px; } } /* ============================================================ PAQUETES HUÉRFANOS (sin stock sumado) ============================================================ */ .paq-huer-hero { background: linear-gradient(135deg, #ef6c00 0%, #c62828 100%); color: white; border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(239,108,0,0.25); } .paq-huer-hero-num { font-size: 42px; font-weight: 800; line-height: 1; } .paq-huer-hero-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.9; margin-top: 6px; } .paq-huer-hero-sub { font-size: 13px; margin-top: 6px; opacity: 0.95; } .paq-huer-card { background: white; border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); border-left: 4px solid #ef6c00; } .paq-huer-head { display: grid; grid-template-columns: 1fr 70px; gap: 10px; margin-bottom: 10px; align-items: center; } .paq-huer-tracking { font-size: 13px; font-weight: 700; color: var(--texto); margin-bottom: 4px; } .paq-huer-tracking code { background: #eef; padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #0052cc; } .paq-huer-meta { font-size: 11px; color: var(--gris-texto); margin-top: 2px; } .paq-huer-meta code { background: #f5f5f5; padding: 1px 4px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; } .paq-huer-cant { text-align: center; background: #ffebee; border-radius: 10px; padding: 8px 4px; } .paq-huer-cant-num { font-size: 22px; font-weight: 800; color: #c62828; line-height: 1; } .paq-huer-cant-lbl { font-size: 9px; color: #c62828; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; margin-top: 2px; } .paq-huer-prods { background: #fafbfd; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; } .paq-huer-prod { font-size: 12px; color: var(--texto); line-height: 1.6; } .paq-huer-reproc { width: 100%; } .paq-huer-aplicar { position: sticky; bottom: 12px; margin-top: 14px; background: white; border-radius: 12px; padding: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .paq-huer-aplicar.hidden { display: none; } .paq-huer-aplicar .btn { width: 100%; } /* Sync por rango */ .ml-diag-fecha-rango { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ml-diag-fecha-rango input[type=date] { width: 100%; padding: 9px 12px; border: 1px solid #d0d7e0; border-radius: 8px; font-size: 13px; font-family: inherit; } /* === Categorías en stock === */ .iv-filtro-categorias { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .iv-categorias-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .iv-card-categoria { display: inline-block; background: #f3e5f5; color: #6a1b9a; border: 1px solid #ce93d8; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-top: 4px; cursor: pointer; transition: background 0.15s; } .iv-card-categoria:hover { background: #e1bee7; } .iv-card-categoria:active { transform: scale(0.95); } /* === Vista de carpetas === */ .iv-carpetas-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-texto); font-weight: 700; margin: 16px 4px 8px; } .iv-grid-carpetas { margin-bottom: 12px; } .iv-card-carpeta { background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%) !important; border: 2px dashed #ffd54f !important; position: relative; } .iv-card-carpeta:active { transform: scale(0.98); } .iv-carpeta-mosaico { position: relative; width: 100%; aspect-ratio: 1; background: #fffde7; border-radius: 8px 8px 0 0; overflow: hidden; } .iv-carpeta-img-uno { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; } .iv-carpeta-grid-mini { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; gap: 2px; } .iv-carpeta-img-mini { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .iv-carpeta-icono { position: absolute; bottom: 6px; right: 6px; background: rgba(245, 127, 23, 0.95); color: white; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .iv-carpeta-stock-total { font-size: 11px; color: #f57f17; font-weight: 700; margin-top: 4px; } /* === Breadcrumb cuando estás dentro de una carpeta === */ .iv-breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 12px; background: #fff8e1; border-radius: 10px; border: 1px solid #ffd54f; } .iv-breadcrumb-back { background: white; border: 1px solid #ffd54f; color: #6a4c00; font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .iv-breadcrumb-back:active { background: #fff3c4; } .iv-breadcrumb-titulo { font-size: 14px; font-weight: 700; color: #6a4c00; flex: 1; } /* === Modal Asignar Categoría === */ .cat-modal { max-width: 480px; } .cat-modal h3 { margin: 0 0 4px; font-size: 18px; } .cat-modal-sub { font-size: 13px; color: var(--gris-texto); margin: 0 0 16px; } .cat-modal-existentes { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin-bottom: 4px; } .cat-modal-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%); border: 2px dashed #ffd54f; border-radius: 12px; cursor: pointer; text-align: left; font-family: inherit; transition: all 0.15s; } .cat-modal-btn:hover { border-color: #ff9800; transform: translateY(-1px); } .cat-modal-btn:active { transform: scale(0.98); } .cat-modal-btn-icon { font-size: 22px; flex-shrink: 0; } .cat-modal-btn-nombre { flex: 1; font-size: 14px; font-weight: 700; color: #6a4c00; } .cat-modal-btn-count { background: #ff9800; color: white; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 10px; flex-shrink: 0; } .cat-modal-vacio { text-align: center; color: var(--gris-texto); padding: 20px; background: #fafafa; border-radius: 10px; font-size: 13px; font-style: italic; } .cat-modal-separador { display: flex; align-items: center; margin: 18px 0 14px; color: var(--gris-texto); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .cat-modal-separador::before, .cat-modal-separador::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; } .cat-modal-separador span { padding: 0 12px; } .cat-modal-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; margin-bottom: 6px; } .cat-modal-nueva-row { display: block; width: 100%; margin-bottom: 8px; } .cat-modal-nueva-row input { display: block; width: 100%; box-sizing: border-box; min-width: 0; padding: 14px 14px; border: 2px solid #c7d2fe; border-radius: 10px; font-size: 15px; font-family: inherit; background: #fff; } .cat-modal-nueva-row input:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); } .cat-modal-nueva-row input::placeholder { color: #9ca3af; } .cat-modal-crear-btn { width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 700; margin-bottom: 14px; } .cat-modal-quitar { width: 100%; padding: 10px; background: #ffebee; border: 1px solid #ffcdd2; color: #c62828; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 4px; font-family: inherit; } .cat-modal-quitar:hover { background: #ffcdd2; } /* === Modal Elegir producto del stock === */ .elegir-producto-modal { max-width: 540px; max-height: 85vh; display: flex; flex-direction: column; } .elegir-producto-input { width: 100%; padding: 10px 14px; font-size: 14px; border: 1px solid #d0d7e0; border-radius: 8px; margin: 10px 0; font-family: inherit; box-sizing: border-box; } .elegir-producto-input:focus { border-color: var(--azul, #0066ff); outline: none; } .elegir-producto-list { flex: 1; overflow-y: auto; max-height: 50vh; min-height: 200px; border: 1px solid #e0e6f0; border-radius: 10px; background: #fafbfd; padding: 4px; margin-bottom: 10px; } .elegir-producto-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 8px 10px; background: white; border-radius: 8px; margin-bottom: 4px; cursor: pointer; border: 1px solid transparent; transition: all 0.12s; } .elegir-producto-row:hover { background: #f0f7ff; border-color: #c5d9f0; } .elegir-producto-row:active { transform: scale(0.98); } .elegir-producto-img, .elegir-producto-noimg { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .elegir-producto-noimg { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 16px; } .elegir-producto-info { min-width: 0; overflow: hidden; } .elegir-producto-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .elegir-producto-meta { font-size: 11px; color: var(--gris-texto); margin-top: 3px; display: flex; gap: 6px; align-items: center; } .elegir-producto-badge-ml { background: #fff8e1; color: #f57f17; font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 8px; letter-spacing: 0.4px; } .elegir-producto-badge-sin { background: #f5f5f5; color: #757575; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; } /* === Botón "Vincular a padre" en cada card del stock === */ .iv-card-cambiar-padre { display: inline-flex; align-items: center; gap: 4px; background: #e3f2fd; color: #0052cc; border: 1px solid #90caf9; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 8px; margin-top: 6px; cursor: pointer; font-family: inherit; transition: all 0.12s; width: auto; } .iv-card-cambiar-padre:hover { background: #bbdefb; } .iv-card-cambiar-padre:active { transform: scale(0.95); } /* Modal Elegir: contexto del padre */ .elegir-producto-contexto { font-size: 10px; color: #6a4c00; background: #fff8e1; padding: 2px 6px; border-radius: 6px; margin-top: 3px; display: inline-block; } .elegir-producto-meta code { background: #eef; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #0052cc; } /* ============================================================ CONTEO DE INVENTARIO FÍSICO ============================================================ */ .conteo-landing { background: white; border-radius: 14px; padding: 24px; text-align: center; box-shadow: var(--shadow); } .conteo-landing-icon { font-size: 48px; margin-bottom: 8px; } .conteo-landing h2 { margin: 0 0 8px; font-size: 18px; } .conteo-landing p { color: var(--gris-texto); margin: 0 0 14px; font-size: 13px; } .conteo-landing-steps { text-align: left; background: #f5f7fb; border-radius: 10px; padding: 12px 12px 12px 32px; margin: 14px 0; font-size: 13px; line-height: 1.7; } .conteo-landing-steps b { color: var(--azul, #0066ff); } .conteo-btn-iniciar { width: 100%; margin-top: 8px; padding: 14px; font-size: 15px; font-weight: 700; } .conteo-progreso { background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); color: white; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(25,118,210,0.25); } .conteo-progreso-num { font-size: 22px; font-weight: 800; } .conteo-progreso-num b { font-size: 32px; } .conteo-progreso-lbl { font-size: 11px; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .conteo-progreso-bar { height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; margin-top: 8px; overflow: hidden; } .conteo-progreso-fill { height: 100%; background: white; border-radius: 3px; transition: width 0.3s; } .conteo-search-row { margin-bottom: 12px; } .conteo-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; background: white; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; border-left: 3px solid #ccc; box-shadow: var(--shadow); } .conteo-row-pendiente { border-left-color: #ccc; } .conteo-row-ok { border-left-color: #2e7d32; background: #f1f8f4; } .conteo-row-sobra { border-left-color: #1976d2; background: #f0f7ff; } .conteo-row-falta { border-left-color: #c62828; background: #fff5f5; } .conteo-row-img, .conteo-row-noimg { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; } .conteo-row-noimg { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 18px; } .conteo-row-info { min-width: 0; } .conteo-row-nombre { font-size: 13px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conteo-row-meta { font-size: 11px; color: var(--gris-texto); margin-top: 2px; } .conteo-row-meta b { color: var(--texto); } .conteo-row-input-wrap { display: flex; align-items: center; gap: 4px; } .conteo-row-input { width: 60px; padding: 8px; border: 1px solid #d0d7e0; border-radius: 8px; font-size: 16px; font-weight: 700; text-align: center; font-family: inherit; } .conteo-row-input:focus { border-color: var(--azul, #0066ff); outline: none; } .conteo-row-diff { font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 6px; } .conteo-row-diff.pos { background: #e3f2fd; color: #0052cc; } .conteo-row-diff.neg { background: #ffebee; color: #c62828; } .conteo-row-clear { background: #f5f5f5; border: 0; color: #999; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; } .conteo-row-clear:hover { background: #ffebee; color: #c62828; } .conteo-acciones { position: sticky; bottom: 12px; display: flex; gap: 8px; background: white; border-radius: 12px; padding: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-top: 14px; } .conteo-acciones .btn { flex: 1; padding: 11px; } .conteo-acciones.hidden { display: none; } /* === Modal Elegir producto: filtros y badges === */ .elegir-producto-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .elegir-producto-contador { font-size: 11px; color: var(--gris-texto); text-align: right; margin-bottom: 8px; font-weight: 600; } .elegir-producto-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .ep-status { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 8px; letter-spacing: 0.3px; } .ep-status-active { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .ep-status-paused { background: #fff3e0; color: #ef6c00; border: 1px solid #ffcc80; } .ep-status-closed { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; } .ep-status-review { background: #f3e5f5; color: #6a1b9a; border: 1px solid #ce93d8; } .ep-status-sin { background: #f5f5f5; color: #757575; border: 1px solid #e0e0e0; } /* === Header "Analizando este producto" === */ .repricer-elegido-header { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 1px solid #90caf9; border-radius: 14px; padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow); } .repricer-elegido-img, .repricer-elegido-noimg { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; } .repricer-elegido-noimg { background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 24px; } .repricer-elegido-info { min-width: 0; } .repricer-elegido-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #0052cc; font-weight: 700; } .repricer-elegido-nombre { font-size: 14px; font-weight: 700; color: var(--texto); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .repricer-elegido-meta { font-size: 11px; color: var(--gris-texto); margin-top: 2px; } .repricer-elegido-meta code { background: white; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #0052cc; } .repricer-elegido-volver { background: white; border: 1px solid #90caf9; color: #0052cc; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; white-space: nowrap; } .repricer-elegido-volver:hover { background: #e3f2fd; } /* === Botón "Aplicar este precio en ML" === */ .repricer-aplicar-uno { width: 100%; margin-top: 10px; } /* === Grilla de top competidores === */ .repricer-comp-titulo { font-size: 13px; font-weight: 700; color: var(--texto); margin: 16px 4px 8px; } .repricer-comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 600px) { .repricer-comp-grid { grid-template-columns: repeat(3, 1fr); } } .repricer-comp-card { display: flex; flex-direction: column; background: white; border-radius: 10px; padding: 8px; text-decoration: none; color: inherit; box-shadow: var(--shadow); border: 1px solid #e0e6f0; position: relative; transition: transform 0.12s, box-shadow 0.12s; } .repricer-comp-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .repricer-comp-rank { position: absolute; top: 4px; left: 4px; background: #1976d2; color: white; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; z-index: 2; } .repricer-comp-img, .repricer-comp-noimg { width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; background: #f0f0f0; } .repricer-comp-noimg { display: flex; align-items: center; justify-content: center; font-size: 24px; } .repricer-comp-precio { font-size: 16px; font-weight: 800; color: #2e7d32; margin-top: 6px; } .repricer-comp-titulo-txt { font-size: 11px; color: var(--texto); margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .repricer-comp-meta { font-size: 9px; color: var(--gris-texto); margin-top: 4px; } /* ====================== DASHBOARD RECOMENDACIONES ====================== */ .dash-recs { background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%); border: 1px solid #c7d2fe; margin-bottom: 12px; } .dash-recs-titulo { font-size: 13px; font-weight: 700; color: #1e3a8a; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .dash-recs-count { color: #6366f1; font-weight: 600; font-size: 11px; } .dash-recs-refresh { margin-left: auto; background: transparent; border: 1px solid #c7d2fe; border-radius: 6px; padding: 2px 6px; cursor: pointer; font-size: 11px; } .dash-recs-refresh:hover { background: #e0e7ff; } .dash-recs-list { display: flex; flex-direction: column; gap: 6px; } .dash-rec { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border-radius: 8px; border-left: 3px solid #6366f1; font-size: 12px; } .dash-rec.rec-sev-error { border-left-color: #dc2626; background: #fef2f2; } .dash-rec.rec-sev-warn { border-left-color: #f59e0b; background: #fffbeb; } .dash-rec.rec-sev-info { border-left-color: #2563eb; background: #eff6ff; } .dash-rec-icon { font-size: 18px; flex-shrink: 0; } .dash-rec-body { flex: 1; min-width: 0; } .dash-rec-titulo { font-weight: 600; color: #111827; font-size: 12px; margin-bottom: 2px; } .dash-rec-desc { font-size: 11px; color: #4b5563; line-height: 1.35; } .dash-rec-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .dash-rec-btn { border: none; cursor: pointer; border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 600; font-family: inherit; } .dash-rec-btn-primary { background: #4f46e5; color: #fff; } .dash-rec-btn-primary:hover { background: #4338ca; } .dash-rec-btn-snooze { background: transparent; color: #6b7280; border: 1px solid #d1d5db; font-size: 10px; padding: 2px 4px; } .dash-rec-btn-snooze:hover { background: #f3f4f6; } /* ====================== ML BULK + BACKUP + HIST PRECIOS ====================== */ .ml-bulk-opts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; font-size: 11px; align-items: center; } .ml-bulk-opts label { display: inline-flex; align-items: center; gap: 4px; } #ml-bulk-resultado, #hist-precios-resultado { word-break: break-word; } #backup-estado .ml-diag-row { display: inline-flex; margin-right: 6px; } /* ====================== ÚLTIMAS VENTAS ====================== */ .uv-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .uv-nueva-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .uv-filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; } .uv-chip { flex-shrink: 0; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--gris-texto); font-family: inherit; } .uv-chip.active { background: #111827; color: #fff; border-color: #111827; } .uv-resumen { margin-bottom: 12px; } .uv-resumen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .uv-resumen-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px; text-align: center; } .uv-resumen-num { font-size: 16px; font-weight: 700; color: var(--texto); line-height: 1.1; } .uv-resumen-sep { color: #9ca3af; font-weight: 400; margin: 0 2px; } .uv-resumen-lbl { font-size: 10px; color: var(--gris-texto); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; } .uv-profit-pos { color: #16a34a; } .uv-profit-neg { color: #dc2626; } .uv-list { display: flex; flex-direction: column; gap: 8px; } .uv-row { display: flex; align-items: stretch; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; max-width: 100%; overflow: hidden; } .uv-row-cancelada { opacity: 0.55; background: #fafafa; } .uv-img, .uv-img-placeholder { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; object-fit: cover; background: var(--surface-sunk); } .uv-img-placeholder { display: flex; align-items: center; justify-content: center; font-size: 22px; } .uv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .uv-info-top { display: flex; align-items: flex-start; gap: 6px; justify-content: space-between; } .uv-nombre { font-size: 13px; font-weight: 600; color: var(--texto); line-height: 1.3; flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .uv-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; } .uv-badge-ml { background: #fef3c7; color: #92400e; } .uv-badge-manual { background: #dbeafe; color: #1e3a8a; } .uv-badge-cancel { background: #fee2e2; color: #991b1b; } .uv-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gris-texto); flex-wrap: wrap; } .uv-cant { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-weight: 600; } .uv-precio { font-weight: 700; color: var(--texto); font-size: 13px; } .uv-profit { font-weight: 700; font-size: 11px; } .uv-fecha { margin-left: auto; } .uv-tracking code, .uv-notas { font-size: 10px; color: #6b7280; } .uv-tracking code { background: #f9fafb; padding: 1px 5px; border-radius: 3px; } .uv-acciones { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: center; justify-content: center; } .uv-btn-edit, .uv-btn-cancel { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; } .uv-btn-edit:hover { background: #eff6ff; border-color: #2563eb; } .uv-btn-cancel:hover { background: #fef2f2; border-color: #dc2626; } /* Modal editar/nueva venta */ .uv-edit-modal { max-width: 540px; width: 95%; max-height: 90vh; overflow-y: auto; } .uv-edit-sub { font-size: 12px; color: var(--gris-texto); margin-bottom: 12px; } .uv-edit-warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 8px; padding: 8px 10px; font-size: 11px; margin-bottom: 10px; } .uv-edit-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-texto); font-weight: 700; margin-top: 10px; margin-bottom: 4px; } .uv-edit-label input[type=number], .uv-edit-label input[type=text], .uv-edit-label textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: 13px; margin-top: 4px; } .uv-edit-label input[readonly] { background: #f3f4f6; cursor: not-allowed; color: #6b7280; } .uv-edit-label input:focus, .uv-edit-label textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .uv-edit-cambiar-producto { margin-top: 14px; padding: 10px; background: #f9fafb; border-radius: 8px; border: 1px dashed #d1d5db; } #uv-edit-prod-picker, #uv-nv-results, #uv-edit-prod-elegido, #uv-nv-elegido { margin-top: 8px; } #uv-edit-prod-picker input, #uv-nv-search { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; } .uv-edit-prod-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 12px; } .uv-edit-prod-row:hover { background: #f3f4f6; } .uv-edit-prod-row img, .uv-edit-prod-noimg { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; background: var(--surface-sunk); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .uv-edit-prod-row code { font-size: 10px; font-family: 'JetBrains Mono', monospace; background: #f3f4f6; padding: 1px 4px; border-radius: 3px; } .uv-edit-prod-empty { font-size: 11px; color: #6b7280; padding: 8px; text-align: center; } .uv-edit-prod-elegido-ok { background: #f0fdf4; border: 1px solid #86efac; color: #14532d; padding: 8px 10px; border-radius: 6px; font-size: 11px; margin-top: 6px; } .uv-edit-err { margin-top: 10px; background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; padding: 8px 10px; border-radius: 6px; font-size: 12px; } /* Profit sospechoso (costo mal cargado → loss absurdo) */ .uv-profit-warn { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; cursor: pointer; font-family: inherit; } .uv-profit-warn:hover { background: #fde68a; } /* Banner cuando hay ventas con profit excluido del total */ .uv-resumen-warn { margin-top: 8px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.4; } /* Desglose ML (bruto, com, env) bajo el meta */ .uv-desglose { margin-top: 4px; font-size: 10px; color: #6b7280; display: flex; flex-wrap: wrap; gap: 4px 8px; line-height: 1.4; } .uv-desg-item { background: #f9fafb; padding: 1px 6px; border-radius: 4px; } .uv-desg-item b { color: var(--texto); font-weight: 700; } .uv-desg-neto { background: #f0fdf4; color: #14532d; } /* ====================== PREDICTOR DE STOCK ====================== */ .pred-config { display: flex; flex-wrap: wrap; gap: 10px; background: var(--surface); padding: 12px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; align-items: end; } .pred-config-lbl { flex: 1; min-width: 160px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; } .pred-config-lbl input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; box-sizing: border-box; } .pred-resumen { margin-bottom: 12px; } .pred-resumen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .pred-resumen-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 6px; text-align: center; } .pred-resumen-stat.pred-quebrado { background: #fee2e2; border-color: #fca5a5; } .pred-resumen-stat.pred-critico { background: #fef2f2; border-color: #fca5a5; } .pred-resumen-stat.pred-alto { background: #fffbeb; border-color: #fcd34d; } .pred-resumen-stat.pred-ok { background: #f0fdf4; border-color: #86efac; } .pred-resumen-num { font-size: 22px; font-weight: 800; line-height: 1; } .pred-resumen-lbl { font-size: 10px; margin-top: 4px; color: var(--gris-texto); } .pred-resumen-hint { margin-top: 8px; font-size: 12px; color: var(--texto); padding: 8px 12px; background: #f9fafb; border-radius: 6px; } .pred-filtros { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 4px; } .pred-chip { flex-shrink: 0; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--gris-texto); } .pred-chip.active { background: #111827; color: #fff; border-color: #111827; } .pred-list { display: flex; flex-direction: column; gap: 6px; } .pred-row { display: flex; gap: 10px; padding: 10px; border-radius: 10px; background: var(--surface); border-left: 4px solid var(--border); align-items: center; } .pred-row.pred-urg-quebrado { border-left-color: #dc2626; background: #fef2f2; } .pred-row.pred-urg-critico { border-left-color: #ef4444; background: #fef2f2; } .pred-row.pred-urg-alto { border-left-color: #f59e0b; background: #fffbeb; } .pred-row.pred-urg-medio { border-left-color: #fbbf24; } .pred-row.pred-urg-ok { border-left-color: #16a34a; } .pred-row.pred-urg-sin_data { border-left-color: #9ca3af; opacity: 0.7; } .pred-img, .pred-img-placeholder { width: 50px; height: 50px; border-radius: 6px; flex-shrink: 0; object-fit: cover; background: var(--surface-sunk); display: flex; align-items: center; justify-content: center; font-size: 20px; } .pred-info { flex: 1; min-width: 0; } .pred-nombre { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pred-mensaje { font-size: 11px; color: var(--gris-texto); margin-bottom: 4px; } .pred-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; } .pred-stats span { color: var(--gris-texto); } .pred-stats b { color: var(--texto); } .pred-recompra { color: #dc2626 !important; font-weight: 700; } /* ====================== P&L ====================== */ .pl-config { display: flex; gap: 10px; align-items: end; background: var(--surface); padding: 12px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; } .pl-config label { display: flex; flex-direction: column; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; flex: 1; min-width: 100px; } .pl-config select, .pl-config input { margin-top: 4px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; } .pl-report { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid var(--border); } .pl-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #111827; } .pl-header h2 { margin: 0; font-size: 20px; } .pl-subtitle { font-size: 11px; color: var(--gris-texto); margin-top: 4px; } .pl-section { margin-bottom: 16px; } .pl-section h3 { margin: 0 0 8px 0; font-size: 14px; color: var(--texto); } .pl-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; } .pl-row.pl-row-main { font-weight: 700; padding: 6px 0; border-bottom: 1px solid #e5e7eb; } .pl-row.pl-sub { font-size: 11px; color: var(--gris-texto); padding-left: 14px; } .pl-row.pl-cancel { color: #dc2626; font-style: italic; } .pl-resultado-section .pl-row-resultado { background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-weight: 700; margin-bottom: 4px; } .pl-subtotal-list { background: #f9fafb; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; } .pl-subline { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; } .pl-no-gastos { background: #fffbeb; border: 1px dashed #fcd34d; color: #92400e; padding: 10px; border-radius: 6px; font-size: 12px; } .pl-final { padding-top: 14px; border-top: 2px solid #111827; margin-top: 16px; } .pl-row-final { font-size: 18px; font-weight: 800; padding: 14px; border-radius: 10px; } .pl-row-final.pl-profit-pos { background: #f0fdf4; color: #14532d; } .pl-row-final.pl-profit-neg { background: #fef2f2; color: #991b1b; } .pl-top { display: flex; flex-direction: column; gap: 4px; } .pl-top-row { display: grid; grid-template-columns: 28px 1fr 50px 90px; gap: 8px; padding: 6px 8px; background: #f9fafb; border-radius: 6px; font-size: 12px; align-items: center; } .pl-top-rank { background: #111827; color: #fff; border-radius: 50%; width: 22px; height: 22px; text-align: center; font-size: 11px; font-weight: 700; line-height: 22px; } .pl-top-cant { color: var(--gris-texto); } .pl-top-ingreso { font-weight: 700; text-align: right; } .pl-gastos-tabla { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .pl-gasto-row { display: grid; grid-template-columns: 60px 110px 1fr 90px 32px; gap: 8px; padding: 6px 8px; background: #f9fafb; border-radius: 6px; font-size: 12px; align-items: center; } .pl-gasto-cat { background: #e0e7ff; color: #312e81; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; text-align: center; } .pl-gasto-monto { font-weight: 700; text-align: right; } .pl-gasto-del { background: transparent; border: 1px solid #fca5a5; color: #dc2626; border-radius: 4px; cursor: pointer; padding: 2px 6px; font-size: 12px; } .pl-gastos-vacio { background: #f9fafb; padding: 12px; border-radius: 6px; font-size: 12px; color: var(--gris-texto); text-align: center; margin-top: 10px; } /* Print mode para imprimir solo el P&L */ @media print { body.pl-print-mode .screen, body.pl-print-mode .bottom-dock, body.pl-print-mode .appbar { display: none !important; } body.pl-print-mode #screen-pl { display: block !important; position: static !important; } body.pl-print-mode #screen-pl .appbar, body.pl-print-mode .pl-config, body.pl-print-mode #pl-gastos-lista, body.pl-print-mode #btn-pl-nuevo-gasto { display: none !important; } } /* ====================== ADS ML ANÁLISIS ====================== */ .ads-controls { display: flex; gap: 10px; align-items: end; background: var(--surface); padding: 10px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; } .ads-dias-lbl { display: flex; flex-direction: column; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-texto); font-weight: 700; flex: 1; } .ads-dias-lbl select { margin-top: 4px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; } .ads-resumen { margin-bottom: 12px; } .ads-resumen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; } .ads-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; text-align: center; } .ads-stat-num { font-size: 18px; font-weight: 800; line-height: 1.1; } .ads-stat-lbl { font-size: 10px; color: var(--gris-texto); margin-top: 4px; } .ads-stat.ads-profit-pos { background: #f0fdf4; border-color: #86efac; color: #14532d; } .ads-stat.ads-profit-neg { background: #fef2f2; border-color: #fca5a5; color: #991b1b; } .ads-profit-pos { color: #16a34a; } .ads-profit-neg { color: #dc2626; } .ads-warn { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 8px 12px; border-radius: 8px; font-size: 12px; margin-top: 8px; } .ads-filtros { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 4px; } .ads-chip { flex-shrink: 0; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--gris-texto); } .ads-chip.active { background: #111827; color: #fff; border-color: #111827; } .ads-list { display: flex; flex-direction: column; gap: 8px; } .ads-row { display: flex; gap: 10px; padding: 12px; background: var(--surface); border-radius: 10px; border-left: 4px solid var(--border); align-items: flex-start; } .ads-row.ads-dec-pausar_urgente { border-left-color: #dc2626; background: #fef2f2; } .ads-row.ads-dec-bajar_bid { border-left-color: #f59e0b; background: #fffbeb; } .ads-row.ads-dec-monitor { border-left-color: #eab308; } .ads-row.ads-dec-ok { border-left-color: #16a34a; } .ads-row.ads-dec-scale_up { border-left-color: #2563eb; background: #eff6ff; } .ads-row.ads-dec-sin_costo { border-left-color: #9ca3af; opacity: 0.7; } .ads-img, .ads-img-ph { width: 50px; height: 50px; border-radius: 6px; flex-shrink: 0; object-fit: cover; background: var(--surface-sunk); display: flex; align-items: center; justify-content: center; font-size: 20px; } .ads-info { flex: 1; min-width: 0; } .ads-nombre { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px; } .ads-razon { font-size: 11px; color: var(--gris-texto); margin-bottom: 6px; line-height: 1.3; } .ads-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--gris-texto); } .ads-meta span { white-space: nowrap; } .ads-meta b { color: var(--texto); } .ads-acos { background: #f3f4f6; padding: 1px 6px; border-radius: 4px; } .ads-breakeven { margin-top: 4px; font-size: 10px; color: #6b7280; background: #f9fafb; padding: 4px 8px; border-radius: 4px; } .ads-acciones { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .ads-btn-pausar, .ads-btn-bid { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; cursor: pointer; font-size: 14px; } .ads-btn-pausar:hover { background: #fef2f2; border-color: #dc2626; } .ads-btn-bid:hover { background: #eff6ff; border-color: #2563eb; } /* ====================== ADS — VISTA POR CAMPAÑA ====================== */ .ads-vista-toggle { display: flex; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 3px; margin-bottom: 10px; } .ads-vista-btn { flex: 1; padding: 8px 12px; border: none; background: transparent; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--gris-texto); } .ads-vista-btn.active { background: #111827; color: #fff; } .ads-rango-info { font-size: 11px; color: var(--gris-texto); margin-bottom: 8px; text-align: center; } .ads-rango-info small { opacity: 0.7; } /* Trend arrows (verde/rojo) */ .trend { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-left: 4px; } .trend-up { background: #f0fdf4; color: #16a34a; } .trend-down { background: #fef2f2; color: #dc2626; } .trend-igual { background: #f3f4f6; color: #6b7280; } .trend-nuevo { background: #eff6ff; color: #2563eb; font-style: italic; } /* Card de campaña */ .ads-campana-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; } .ads-campana-card.ads-dec-pausar_urgente { border-left-color: #dc2626; background: #fef2f2; } .ads-campana-card.ads-dec-bajar_bid { border-left-color: #f59e0b; background: #fffbeb; } .ads-campana-card.ads-dec-monitor { border-left-color: #eab308; } .ads-campana-card.ads-dec-ok { border-left-color: #16a34a; } .ads-campana-card.ads-dec-scale_up { border-left-color: #2563eb; background: #eff6ff; } .ads-campana-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 10px; } .ads-campana-nombre { font-size: 14px; color: var(--texto); flex: 1; min-width: 0; } .ads-campana-nombre b { display: inline; } .ads-campana-items { display: inline-block; background: #f3f4f6; color: var(--gris-texto); padding: 1px 6px; border-radius: 4px; font-size: 10px; margin-left: 6px; font-weight: 600; } .ads-cam-status-paused { display: inline-block; background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 4px; font-size: 10px; margin-left: 6px; font-weight: 600; } .ads-campana-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; background: #f3f4f6; white-space: nowrap; flex-shrink: 0; } .ads-campana-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; } @media (min-width: 640px) { .ads-campana-metrics { grid-template-columns: repeat(6, 1fr); } } .ads-cam-met { background: #fff; border-radius: 6px; padding: 6px 8px; border: 1px solid #f3f4f6; } .ads-cam-met.ads-profit-pos { background: #f0fdf4; } .ads-cam-met.ads-profit-neg { background: #fef2f2; } .ads-cam-met-lbl { display: block; font-size: 9px; text-transform: uppercase; color: var(--gris-texto); letter-spacing: 0.3px; margin-bottom: 2px; } .ads-cam-met-val { font-size: 12px; font-weight: 600; } .ads-campana-distri { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .ads-cam-distri-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #f3f4f6; } .ads-distri-pausar_urgente { background: #fee2e2; color: #991b1b; } .ads-distri-bajar_bid { background: #fef3c7; color: #92400e; } .ads-distri-monitor { background: #fef9c3; color: #854d0e; } .ads-distri-ok { background: #dcfce7; color: #14532d; } .ads-distri-scale_up { background: #dbeafe; color: #1e3a8a; } .ads-distri-sin_costo { background: #f3f4f6; color: #6b7280; } .ads-campana-ver-items { width: 100%; padding: 6px; background: transparent; border: 1px dashed var(--border); border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--gris-texto); cursor: pointer; font-family: inherit; } .ads-campana-ver-items:hover { background: #f9fafb; border-style: solid; } /* Banner cuando hay filtro de campaña activo en vista item */ .ads-banner-campana { background: #eff6ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ads-banner-quitar { background: transparent; border: 1px solid #c7d2fe; color: #1e3a8a; border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: inherit; } /* ====================== WHATSAPP DESPACHAR ====================== */ .despachar-btn-wa { background: #25D366; color: #fff; border: none; font-weight: 700; } .despachar-btn-wa:hover { background: #1ebe5d; } /* ============================================================ TEMA iOS — look de app iPhone (data-theme="ios") Tokens del sistema iOS + ajustes de componentes clave (tab bar pegada al borde, búsqueda iOS, botones con press). ============================================================ */ :root[data-theme="ios"][data-mode="light"] { --bg: #f2f2f7; --surface: #ffffff; --surface-2: #ffffff; --surface-sunk: #e9e9ef; --border: #d8d8de; --border-strong: #c6c6cb; --fg: #1c1c1e; --fg-2: #3a3a3c; --muted: #8e8e93; --muted-2: #aeaeb2; --accent: #007aff; --accent-fg: #ffffff; --accent-soft: #e1efff; --accent-hover: #0a6cf0; --success: #34c759; --success-soft: #e3f9ea; --warning: #ff9500; --warning-soft: #fff0db; --danger: #ff3b30; --danger-soft: #ffe5e3; --info: #5856d6; --info-soft: #ececfb; --radius-xs: 7px; --radius-sm: 9px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 34px rgba(0,0,0,0.12); --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif; } :root[data-theme="ios"][data-mode="dark"] { --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-sunk: #2c2c2e; --border: #38383a; --border-strong: #48484a; --fg: #ffffff; --fg-2: #d7d7dc; --muted: #8e8e93; --muted-2: #636366; --accent: #0a84ff; --accent-fg: #ffffff; --accent-soft: #112842; --accent-hover: #409cff; --success: #30d158; --success-soft: #0e2e18; --warning: #ff9f0a; --warning-soft: #3a2a08; --danger: #ff453a; --danger-soft: #3a1512; --info: #5e5ce6; --info-soft: #1c1c3a; --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow: 0 2px 6px rgba(0,0,0,0.5); --shadow-md: 0 4px 16px rgba(0,0,0,0.6); --shadow-lg: 0 12px 40px rgba(0,0,0,0.7); --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif; } /* ---- Ajustes de componentes para iOS ---- */ [data-theme="ios"] body { -webkit-font-smoothing: antialiased; } [data-theme="ios"] .appbar-title { font-size: 17px; font-weight: 600; } [data-theme="ios"] input[type="search"] { background: var(--surface-sunk); border: none; border-radius: 10px; } [data-theme="ios"] .btn { border-radius: var(--radius-lg); } [data-theme="ios"] .btn:active:not(:disabled) { transform: scale(0.97); } /* Tab bar estilo iOS: pegada al borde inferior, traslúcida, tabs uniformes */ [data-theme="ios"] .bottom-dock { left: 0; right: 0; bottom: 0; border-radius: 0; border: none; border-top: 0.5px solid var(--border); box-shadow: none; background: color-mix(in oklab, var(--surface), transparent 18%); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); padding: 7px 0 max(7px, env(safe-area-inset-bottom)); gap: 0; } [data-theme="ios"] .dock-btn { border-radius: 0; font-size: 10px; font-weight: 500; gap: 3px; padding: 2px 4px; } [data-theme="ios"] .dock-btn.active { background: transparent; color: var(--accent); } [data-theme="ios"] .dock-btn svg { width: 26px; height: 26px; stroke-width: 1.9; } /* El botón central (FAB) pasa a ser una pestaña normal */ [data-theme="ios"] .dock-btn.primary { background: transparent; color: var(--muted); margin: 0; height: auto; width: auto; border-radius: 0; box-shadow: none; font-size: 10px; align-self: stretch; justify-self: stretch; } [data-theme="ios"] .dock-btn.primary svg { width: 26px; height: 26px; } [data-theme="ios"] .dock-btn.primary.active { color: var(--accent); } [data-theme="ios"] .dock-btn.primary:hover { background: transparent; color: var(--accent); }