/* ========================================================================== EscalioX UI — design system Sprint 9: tokens, dark/light, motion, responsive, accessibility Sprint 24F-13: redesign — OKLCH brand (indigo, matching logo), elevation shadows with offset+blur (no halo), motion durations aligned with impeccable (100/200/400/600ms), color-mix tints throughout, removed AI-slop patterns. ========================================================================== */ /* -------------------------------------------------------------------------- 1) Design tokens -------------------------------------------------------------------------- */ :root { /* Color — neutral, tinted toward brand (deep blue-slate, not pure black) */ --c-bg-0: #0a0c10; /* page background — never pure black */ --c-bg-1: #0f1218; /* card */ --c-bg-2: #151a22; /* card hover / input */ --c-bg-3: #1d2330; /* elevated */ --c-line: #232a36; /* borders */ --c-line-2: #2e3645; /* hover borders */ --c-fg: #e8eaee; /* body text — 13.6:1 contrast on --c-bg-0 */ --c-fg-2: #a8afbb; /* secondary text — 7.1:1 */ --c-fg-3: #7c8593; /* tertiary / muted — 4.7:1 (WCAG AA) */ /* Brand — indigo (Sprint 24F-13) — matches logo SVG. Why indigo over emerald: matches the X mark, reads more "premium" on dark surfaces, less "blockchain 2021". Emerald was the default SaaS cliché; we want to feel more like Linear / Vercel / Stripe Dashboard. */ --c-brand: #818cf8; /* primary accent (indigo-400) */ --c-brand-2: #6366f1; /* brand hover (indigo-500) */ --c-brand-3: #a78bfa; /* brand highlight (violet-400) */ --c-brand-soft: rgba(129, 140, 248, 0.12); --c-brand-glow: rgba(129, 140, 248, 0.32); /* Status — kept the same, but with better tints */ --c-success: #34d399; --c-success-soft: rgba(52, 211, 153, 0.12); --c-warn: #f59e0b; --c-warn-soft: rgba(245, 158, 11, 0.12); --c-danger: #f87171; --c-danger-soft: rgba(248, 113, 113, 0.12); /* Typography */ --ff-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --ff-display: 'Plus Jakarta Sans', system-ui, sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Fluid type scale (impeccable: body 65-75ch measure, display max 6rem, tracking floor -0.04em on display sizes) */ --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem); /* 11.2-12 */ --text-sm: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem); /* 12.8-14 */ --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); /* 14.4-16 */ --text-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16-18 */ --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18-20 */ --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20-24 */ --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); /* 24-32 */ --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem); /* 30-40 */ --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem); /* 36-48 */ --text-display: clamp(2.5rem, 2rem + 3vw, 4rem); /* 40-64, max 6rem */ /* Letter-spacing — impeccable: tracking floor -0.04em on display */ --tr-tight: -0.04em; --tr-snug: -0.025em; --tr-base: -0.01em; /* Line-height */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-base: 1.55; --lh-loose: 1.7; /* Fluid spacing — generous separation (impeccable: tight groups, generous separation, more space above heading than below). Sprint 24F-18: anchored to the 3-rule system (4/8/16/24/32 with two exception tokens for details). */ --sp-0_5: 0.125rem; /* 2 — dots, hairlines, micro separators only */ --sp-1: 0.25rem; /* 4 */ --sp-1_5: 0.375rem; /* 6 — badges, pills, chip padding only */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 — only when 8 is too tight and 16 too loose */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ /* Radii — generous on cards, tight on inputs */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* Shadows — impeccable: offset + blur, never zero-offset halo. The 4-level elevation system: each step adds 4-8px Y offset and proportionally more blur. */ --sh-0: none; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.24); --sh-2: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.22); --sh-3: 0 4px 8px rgba(0, 0, 0, 0.28), 0 12px 24px rgba(0, 0, 0, 0.20); --sh-4: 0 8px 16px rgba(0, 0, 0, 0.28), 0 24px 48px rgba(0, 0, 0, 0.18); --sh-5: 0 16px 32px rgba(0, 0, 0, 0.30), 0 32px 64px rgba(0, 0, 0, 0.16); /* Brand glow — used sparingly (CTAs, active states) */ --sh-glow: 0 0 0 1px var(--c-brand), 0 0 0 4px var(--c-brand-glow); /* Motion — impeccable's scale: 100-150ms feedback inmediato (hover, click, ripple) 150-300ms state change rutinario (tab switch, dropdown) 300-500ms layout/overlay/view transition (drawer, modal, page) 500-800ms focal entrance autoral (hero, first-load) Exit < entrance. Exponential ease-out (no bounce). */ --d-immediate: 100ms; --d-fast: 180ms; --d-base: 280ms; --d-slow: 420ms; --d-focal: 620ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --stagger-base: 30ms; /* delay between items in a list */ --stagger-tile: 50ms; /* delay between cards in a grid */ /* Layout */ --header-h: 56px; --tabs-h: 48px; --max-w: 1280px; --max-w-prose: 72ch; /* body 65-75ch */ --radius-card: var(--r-lg); } [data-theme="light"] { --c-bg-0: #fafaf9; /* page — warm off-white */ --c-bg-1: #ffffff; /* card */ --c-bg-2: #f4f4f3; /* card hover / input */ --c-bg-3: #e9e9e7; /* elevated */ --c-line: #e4e4e1; --c-line-2: #d1d1cc; --c-fg: #18181b; /* near-black, 16:1 contrast */ --c-fg-2: #52525b; /* 7.4:1 */ --c-fg-3: #71717a; /* 5.3:1 (WCAG AA) */ --c-brand: #6366f1; /* slightly darker for AA on light */ --c-brand-2: #4f46e5; --c-brand-3: #7c3aed; --c-brand-soft: rgba(99, 102, 241, 0.10); --c-brand-glow: rgba(99, 102, 241, 0.24); --c-warn-soft: rgba(245, 158, 11, 0.14); --c-danger-soft: rgba(248, 113, 113, 0.12); --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --sh-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 6px 14px rgba(15, 23, 42, 0.06); --sh-3: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.08); --sh-4: 0 8px 16px rgba(15, 23, 42, 0.08), 0 28px 56px rgba(15, 23, 42, 0.10); --sh-5: 0 16px 32px rgba(15, 23, 42, 0.10), 0 40px 80px rgba(15, 23, 42, 0.12); } /* -------------------------------------------------------------------------- 2) Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--ff-body); font-size: var(--text-base); line-height: 1.5; color: var(--c-fg); background: var(--c-bg-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Sprint 11B.2: smooth in-page scroll for anchor links */ scroll-behavior: smooth; font-feature-settings: 'cv11', 'ss01'; transition: background var(--d-slow) var(--ease-out), color var(--d-slow) var(--ease-out); } body { min-height: 100dvh; /* Sprint 24F-13: removed the green radial gradient (AI-slop cliché). Solid surface + the brand ambient gradient lives in the hero only. */ background: var(--c-bg-0); } [data-theme="light"] body { background: var(--c-bg-0); } ::selection { background: var(--c-brand); color: var(--c-bg-0); } /* Custom scrollbar (subtle) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: var(--r-pill); border: 2px solid var(--c-bg-0); } ::-webkit-scrollbar-thumb:hover { background: var(--c-line-2); } a { color: var(--c-brand); text-decoration: none; transition: opacity var(--d-fast) var(--ease-out); } a:hover { opacity: 0.85; } a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; } button { font-family: inherit; } input, select, textarea { font-family: inherit; color: var(--c-fg); } input::placeholder, textarea::placeholder { color: var(--c-fg-3); } :focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; } /* Tabular numerals for prices/IDs */ .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* -------------------------------------------------------------------------- 3) Layout -------------------------------------------------------------------------- */ .app { min-height: 100dvh; display: flex; flex-direction: column; } /* Sprint 11B.3: Sticky tabs under the header (mobile + desktop). The container has the same background as the page so content scrolling underneath doesn't bleed through. */ .tabs-container { position: sticky; top: var(--header-h); z-index: 25; background: var(--c-bg-0); padding-top: var(--sp-2); padding-bottom: var(--sp-1); /* Soft fade at the top edge so tabs look "floating" when scrolled */ box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.3); } .app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; /* Sprint 24F-18: safe-area-inset-top so the header clears the iPhone notch / Dynamic Island. Without this, the brand mark sits behind the system cutout on notched devices. */ padding: env(safe-area-inset-top, 0px) var(--sp-4) 0; min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--c-line); /* Sprint 24F-13: solid surface (no glassmorphism by default). Sticky headers in modern apps (Linear, Vercel, Notion) use a solid color-mix tone, not a blur. Glassmorphism reads "AI slop 2023". Sprint 52F-34: FULLY opaque — the 92% color-mix let the big metric numbers (ACEPTADAS/RECHAZADAS/ERRORES) ghost through the header on scroll (reported by Juan 2026-08-10). A sticky bar must be a solid layer, never a tinted window. */ background: var(--c-bg-0); /* Subtle inner highlight (impeccable: depth without skeuomorphism) */ box-shadow: inset 0 1px 0 color-mix(in oklch, white 4%, transparent); } [data-theme="light"] .app-header { background: var(--c-bg-1); box-shadow: inset 0 1px 0 color-mix(in oklch, white 60%, transparent); } .app-header__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--text-md); letter-spacing: var(--tr-snug); color: var(--c-fg); } .app-header__brand-mark { width: 28px; height: 28px; display: block; border-radius: var(--r-md); /* The brand mark is now an (logo-mark.svg) — no need for the gradient emoji-placeholder. Sizing/positioning handled by the img. */ object-fit: contain; flex-shrink: 0; } .app-header__brand-name { font-weight: 800; } .app-header__brand-name .x { color: var(--c-brand-3); } .app-header__user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--c-fg-2); } .app-main { flex: 1; padding: var(--sp-4); max-width: var(--max-w); width: 100%; margin: 0 auto; min-height: 0; } @media (min-width: 768px) { .app-main { padding: var(--sp-5) var(--sp-5); } } /* Sprint 11B.3: Desktop (>= 1024px) — viewport-locked layout so the header + tabs stay sticky and ONLY the main content scrolls. This is what every modern operations dashboard does. Mobile/tablet keep full-page scroll because the panels are short enough to fit. */ @media (min-width: 1024px) { body { overflow: hidden; } .app { height: 100dvh; overflow: hidden; } .app-main { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Account for sticky header + sticky tabs in scroll padding */ scroll-padding-top: var(--sp-4); } .tab-panel { /* let content size itself; the .app-main scrolls */ } } /* Auth (login/signup) */ .auth-shell { min-height: 100dvh; display: grid; place-items: center; /* Sprint 24F-18: safe-area-inset so the login card clears the iPhone notch and home indicator on real devices. */ padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); } .auth-card { width: 100%; max-width: 420px; background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--sh-2); } .auth-card__brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); font-weight: 700; font-size: var(--text-lg); } .auth-card__title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--sp-1); } .auth-card__subtitle { color: var(--c-fg-2); font-size: var(--text-sm); margin-bottom: var(--sp-4); } /* -------------------------------------------------------------------------- 4) Connection banner -------------------------------------------------------------------------- */ .connection-banner { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4); background: linear-gradient(135deg, var(--c-bg-1) 0%, var(--c-bg-2) 100%); border: 1px solid var(--c-line); border-radius: var(--radius-card); margin-bottom: var(--sp-4); transition: border-color var(--d-base) var(--ease-out); } .connection-banner.is-connected { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand-soft); } @media (min-width: 768px) { .connection-banner { grid-template-columns: 1fr auto; align-items: center; } } .connection-banner__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-fg-3); margin-bottom: 4px; } .connection-banner__status { font-size: var(--text-md); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .connection-banner__meta { font-size: var(--text-xs); color: var(--c-fg-3); margin-top: 4px; } .connection-banner__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } /* -------------------------------------------------------------------------- 5) Tabs (animated indicator) -------------------------------------------------------------------------- */ .tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-4); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { position: relative; flex-shrink: 0; padding: var(--sp-3) var(--sp-3); font-size: var(--text-sm); font-weight: 500; color: var(--c-fg-2); background: transparent; border: 0; cursor: pointer; white-space: nowrap; scroll-snap-align: start; transition: color var(--d-base) var(--ease-out); -webkit-tap-highlight-color: transparent; } .tab-btn:hover { color: var(--c-fg); } .tab-btn:focus-visible { outline-offset: -2px; } .tab-btn[aria-selected="true"] { color: var(--c-brand); font-weight: 600; } .tab-btn__badge { display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; background: var(--c-brand-soft); color: var(--c-brand); border-radius: var(--r-pill); } .tab-indicator { position: absolute; bottom: -1px; height: 2px; background: var(--c-brand); border-radius: var(--r-pill); transition: transform var(--d-base) var(--ease-out), width var(--d-base) var(--ease-out); pointer-events: none; } /* Sprint 24F-18: aggressive specificity to hide non-active tab panels. The original `.tab-panel { display: none }` was being overridden somehow — most likely a stale browser cache, an extension, or a UA stylesheet on certain mobile browsers. We use `body section.tab-panel` (specificity 0,1,1+1) which beats any plain `.tab-panel` (0,1,0), and `!important` to make sure no other rule can override. The `is-active` class still wins because of the !important + higher specificity match `body section.tab-panel.is-active` (0,2,1+1). */ body section.tab-panel { display: none !important; } body section.tab-panel.is-active { display: block !important; } .tab-panel.is-entering { animation: tab-fade-in var(--d-base) var(--ease-out); } @keyframes tab-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Sprint 11B.4: List item enter animation (stagger via inline delay in JS, or by using :nth-child fallback in CSS). Makes lists feel "alive". */ @keyframes list-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .list-item-enter { animation: list-enter var(--d-base) var(--ease-out) both; } /* nth-child stagger fallback for static lists (up to 8 visible) */ .list-item-enter:nth-child(1) { animation-delay: 0ms; } .list-item-enter:nth-child(2) { animation-delay: 30ms; } .list-item-enter:nth-child(3) { animation-delay: 60ms; } .list-item-enter:nth-child(4) { animation-delay: 90ms; } .list-item-enter:nth-child(5) { animation-delay: 120ms; } .list-item-enter:nth-child(6) { animation-delay: 150ms; } .list-item-enter:nth-child(7) { animation-delay: 180ms; } .list-item-enter:nth-child(8) { animation-delay: 210ms; } /* Tab button hover/focus states — makes the nav feel responsive */ .tab-btn { position: relative; transition: color var(--d-fast) var(--ease-out); } .tab-btn:hover { color: var(--c-fg); } .tab-btn[aria-selected="true"] { color: var(--c-fg); } .tab-btn::after { content: ''; position: absolute; inset: auto 0 -2px 0; height: 2px; background: transparent; transition: background var(--d-fast) var(--ease-out); } .tab-btn:hover::after { background: var(--c-line-2, rgba(255,255,255,0.15)); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .tab-panel.is-entering { animation: none; } .tab-btn { transition: none; } .tab-btn::after { transition: none; } } /* -------------------------------------------------------------------------- 6) Cards / surfaces -------------------------------------------------------------------------- */ .card { background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--sp-4); /* .card--hoverable transitions defined in section 22 (motion utils) */ } .card--interactive { cursor: pointer; } .card--interactive:active { transform: translateY(0); } .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } .card__title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; } .card__subtitle { font-size: var(--text-xs); color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.06em; } /* -------------------------------------------------------------------------- 6b) Callout — Sprint 24F-13 -------------------------------------------------------------------------- A prominent inline region (vs a generic card). Used for "Connect an agent", "Try this workflow", "Limited time offer" — things that need the user's attention but aren't alerts/banners. - Solid surface + 1px border (NO gradient background — AI-slop). - Brand-soft left-edge tint (a 3px bar via box-shadow inset, NOT a `border-left: 3px` colored stripe). - The icon is a 36px tinted square (NOT a glowy gradient circle). */ .callout { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-bottom: var(--sp-4); position: relative; overflow: hidden; } .callout::before { /* Subtle 3px brand-tint on the inside-left, communicated as inner highlight (impeccable: depth without a colored side stripe). */ content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--c-brand-2), var(--c-brand-3)); /* Note: this 3px gradient is a TINY accent (3px wide, full height, 1 element). The "no gradient bg" rule applies to card surfaces (~hundreds of px) not to micro-accents like this. */ } @media (prefers-reduced-motion: no-preference) { .callout { transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); } .callout:hover { border-color: var(--c-line-2); box-shadow: var(--sh-2); } } .callout__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--c-brand) 14%, transparent); color: var(--c-brand); border-radius: var(--r-md); } .callout__icon svg { width: 20px; height: 20px; } .callout__body { flex: 1; min-width: 0; } .callout__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-md); font-weight: 700; letter-spacing: var(--tr-base); color: var(--c-fg); margin-bottom: 2px; } .callout__desc { font-size: var(--text-sm); color: var(--c-fg-2); line-height: var(--lh-snug); margin: 0; max-width: 56ch; } .callout__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex-shrink: 0; } @media (max-width: 640px) { .callout { flex-direction: column; align-items: flex-start; padding: var(--sp-3) var(--sp-4); } .callout__actions { width: 100%; } .callout__actions .btn { flex: 1; } } /* -------------------------------------------------------------------------- 6c) Badges — Sprint 24F-13 -------------------------------------------------------------------------- Replaces emoji-prefixed labels (🔥 Trending, 🎉 New) with semantic badges. Variants: brand, success, warn, danger, info, neutral. */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; border-radius: var(--r-pill); background: var(--c-bg-3); color: var(--c-fg-2); border: 1px solid transparent; white-space: nowrap; } .badge--brand { background: color-mix(in oklch, var(--c-brand) 14%, transparent); color: var(--c-brand); } .badge--success { background: color-mix(in oklch, var(--c-success) 14%, transparent); color: var(--c-success); } .badge--warn { background: color-mix(in oklch, var(--c-warn) 14%, transparent); color: var(--c-warn); } .badge--danger { background: color-mix(in oklch, var(--c-danger) 14%, transparent); color: var(--c-danger); } /* KPI cards (dashboard metrics) */ .kpi { display: flex; flex-direction: column; gap: var(--sp-1); } .kpi__label { font-size: var(--text-xs); color: var(--c-fg-2); text-transform: uppercase; letter-spacing: 0.06em; } .kpi__value { font-family: var(--ff-num); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi__delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); color: var(--c-fg-3); margin-top: 4px; } .kpi__delta--up { color: var(--c-brand); } .kpi__delta--down { color: var(--c-danger); } .kpi__spark { margin-top: var(--sp-2); height: 36px; width: 100%; } .kpi__spark path { fill: none; stroke: var(--c-brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .kpi__spark .area { fill: var(--c-brand-soft); stroke: none; } /* Grid of KPIs */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } /* -------------------------------------------------------------------------- 7) Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 10px 16px; font-size: var(--text-sm); font-weight: 600; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; user-select: none; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn--primary { background: var(--c-brand); color: #052e16; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn--primary:hover { background: var(--c-brand-2); box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3); } .btn--secondary { background: var(--c-bg-2); color: var(--c-fg); border-color: var(--c-line); } .btn--secondary:hover { border-color: var(--c-line-2); background: var(--c-bg-3); } .btn--ghost { background: transparent; color: var(--c-fg-2); } .btn--ghost:hover { color: var(--c-fg); background: var(--c-bg-2); } .btn--danger { background: transparent; color: var(--c-danger); border-color: var(--c-line); } .btn--danger:hover { background: var(--c-danger-soft); border-color: var(--c-danger); } .btn--sm { padding: 6px 10px; font-size: var(--text-xs); } .btn--lg { padding: 12px 20px; font-size: var(--text-base); } .btn--block { width: 100%; } /* -------------------------------------------------------------------------- 8) Form fields -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); } .field__label { font-size: var(--text-xs); font-weight: 600; color: var(--c-fg-2); text-transform: uppercase; letter-spacing: 0.06em; } .field__hint { font-size: var(--text-xs); color: var(--c-fg-3); margin-top: 4px; } .input, .select, .textarea { width: 100%; padding: 10px 12px; font-size: var(--text-sm); background: var(--c-bg-2); color: var(--c-fg); border: 1px solid var(--c-line); border-radius: var(--r-md); transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); font-variant-numeric: tabular-nums; } .input:hover, .select:hover, .textarea:hover { border-color: var(--c-line-2); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); } .checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--c-fg-2); cursor: pointer; user-select: none; } .checkbox input { width: 16px; height: 16px; accent-color: var(--c-brand); cursor: pointer; } /* -------------------------------------------------------------------------- 9) Badges / status pills -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 8px; font-size: var(--text-xs); font-weight: 600; border-radius: var(--r-pill); background: var(--c-bg-3); color: var(--c-fg-2); white-space: nowrap; } .badge--connected { background: var(--c-brand-soft); color: var(--c-brand); } .badge--disconnected { background: var(--c-danger-soft); color: var(--c-danger); } .badge--pending { background: var(--c-warn-soft); color: var(--c-warn); } .badge--info { background: var(--c-info-soft); color: var(--c-info); } .badge--mono { font-family: var(--ff-mono); font-size: 11px; } .badge__dot { /* Sprint 24F-18: removed the pulse-glow animation (impeccable: "no pulse animation — static dot communicates the same status without 2017 shine"). Solid dot, currentColor. */ width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* -------------------------------------------------------------------------- 10) Tables / lists (responsive) -------------------------------------------------------------------------- */ .list { display: flex; flex-direction: column; gap: var(--sp-2); } .list-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-md); transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out); } .list-row:hover { border-color: var(--c-line-2); background: var(--c-bg-2); } .list-row__main { min-width: 0; } .list-row__title { font-size: var(--text-sm); font-weight: 500; } .list-row__meta { font-size: var(--text-xs); color: var(--c-fg-3); margin-top: 2px; } .list-row__aside { text-align: right; font-size: var(--text-sm); } .list-row__price { font-family: var(--ff-num); font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .list-row--responsive { grid-template-columns: 1fr; text-align: left; } .list-row__aside { text-align: left; } } /* -------------------------------------------------------------------------- 11) Empty state -------------------------------------------------------------------------- */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-3); color: var(--c-fg-2); } .empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--c-bg-2); border: 1px solid var(--c-line); color: var(--c-fg-3); font-size: 28px; margin-bottom: var(--sp-1); } .empty__title { font-size: var(--text-md); font-weight: 600; color: var(--c-fg); } .empty__msg { font-size: var(--text-sm); max-width: 36ch; } .empty__action { margin-top: var(--sp-3); } /* -------------------------------------------------------------------------- 12) Toast -------------------------------------------------------------------------- */ .toast-host { position: fixed; top: calc(var(--header-h) + var(--sp-2)); right: var(--sp-3); z-index: 60; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; max-width: calc(100vw - var(--sp-4)); } .toast { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3); min-width: 240px; max-width: 380px; background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-3); color: var(--c-fg); font-size: var(--text-sm); pointer-events: auto; animation: toast-in var(--d-base) var(--ease-out); } .toast.is-leaving { animation: toast-out var(--d-base) var(--ease-out) forwards; } .toast--success { border-color: var(--c-brand); } .toast--error { border-color: var(--c-danger); } .toast--info { border-color: var(--c-info); } .toast__icon { font-size: 18px; line-height: 1; } .toast__icon--success { color: var(--c-brand); } .toast__icon--error { color: var(--c-danger); } .toast__icon--info { color: var(--c-info); } @keyframes toast-in { from { opacity: 0; transform: translateX(20px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toast-out { to { opacity: 0; transform: translateX(20px) scale(0.95); } } /* -------------------------------------------------------------------------- 13) Modal -------------------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--sp-3); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: backdrop-in var(--d-base) var(--ease-out); } [data-theme="light"] .modal-backdrop { background: rgba(20, 24, 32, 0.4); } .modal-backdrop.is-leaving { animation: backdrop-out var(--d-base) var(--ease-out) forwards; } .modal { width: 100%; max-width: 480px; max-height: calc(100dvh - var(--sp-5)); overflow: auto; background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--sh-3); animation: modal-in var(--d-slow) var(--ease-out); } .modal-backdrop.is-leaving .modal { animation: modal-out var(--d-base) var(--ease-out) forwards; } .modal__title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--sp-1); } .modal__subtitle { color: var(--c-fg-2); font-size: var(--text-sm); margin-bottom: var(--sp-4); } .modal__footer { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes backdrop-out { to { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes modal-out { to { opacity: 0; transform: translateY(20px) scale(0.95); } } /* -------------------------------------------------------------------------- 14) Skeleton (loading state) -------------------------------------------------------------------------- */ .skeleton { position: relative; overflow: hidden; background: var(--c-bg-2); border-radius: var(--r-sm); } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100% ); background-size: 200% 100%; animation: shimmer 1.6s var(--ease-in-out) infinite; } [data-theme="light"] .skeleton::after { background: linear-gradient( 90deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 100% ); background-size: 200% 100%; animation: shimmer 1.6s var(--ease-in-out) infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton-specific dimensions */ .sk-line { height: 12px; margin: 6px 0; } .sk-line--lg { height: 18px; } .sk-line--xl { height: 28px; } .sk-circle { width: 40px; height: 40px; border-radius: 50%; } .sk-block { height: 80px; border-radius: var(--r-md); } /* -------------------------------------------------------------------------- 15) Spinner -------------------------------------------------------------------------- */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--c-line); border-top-color: var(--c-brand); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner--lg { width: 28px; height: 28px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 16) Hero / auth screen -------------------------------------------------------------------------- */ .hero { display: grid; place-items: center; min-height: 60vh; text-align: center; padding: var(--sp-5) var(--sp-3); } .hero__eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-brand); margin-bottom: var(--sp-2); } .hero__title { font-family: var(--ff-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: var(--sp-3); /* Sprint 24F-18: solid fg color (removed gradient text — impeccable: "no gradient text" + Juan's 1-accent + 5-grays rule). The hierarchy is achieved through size + weight + tracking, not color mixing. */ color: var(--c-fg); } .hero__subtitle { color: var(--c-fg-2); font-size: var(--text-md); max-width: 50ch; margin: 0 auto var(--sp-4); } /* -------------------------------------------------------------------------- 17) Theme toggle -------------------------------------------------------------------------- */ .theme-toggle { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-fg-2); cursor: pointer; transition: all var(--d-fast) var(--ease-out); } .theme-toggle:hover { color: var(--c-fg); border-color: var(--c-line-2); } .theme-toggle svg { width: 16px; height: 16px; } /* -------------------------------------------------------------------------- 18) Severity (alerts) -------------------------------------------------------------------------- */ .sev-info { border-left: 3px solid var(--c-info); } .sev-warn { border-left: 3px solid var(--c-warn); } .sev-critical { border-left: 3px solid var(--c-danger); } /* -------------------------------------------------------------------------- 19) Utility: visually hidden (a11y) -------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 20) Notifications -------------------------------------------------------------------------- */ .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-danger); color: white; font-size: 10px; font-weight: 700; border-radius: var(--r-pill); border: 2px solid var(--c-bg-0); animation: pulse-dot 2s var(--ease-in-out) infinite; } .notif-badge[hidden] { display: none; } .notif-dropdown { position: fixed; top: calc(var(--header-h) + 4px); right: var(--sp-3); z-index: 50; width: min(380px, calc(100vw - var(--sp-4))); max-height: min(60vh, 480px); background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: modal-in var(--d-base) var(--ease-out); overflow: hidden; } .notif-dropdown[hidden] { display: none; } .notif-dropdown__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--c-line); } .notif-dropdown__title { font-size: var(--text-sm); font-weight: 600; } .notif-dropdown__sub { font-size: var(--text-xs); color: var(--c-fg-3); } .notif-dropdown__list { flex: 1; overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); } .notif-dropdown__footer { padding: var(--sp-2); border-top: 1px solid var(--c-line); } .notif-item { display: grid; grid-template-columns: 8px 1fr auto; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); transition: background var(--d-fast) var(--ease-out); cursor: pointer; } .notif-item:hover { background: var(--c-bg-2); } .notif-item__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--c-fg-3); flex-shrink: 0; } .notif-item--info .notif-item__dot { background: var(--c-info); } .notif-item--warning .notif-item__dot { background: var(--c-warn); } .notif-item--critical .notif-item__dot { background: var(--c-danger); } .notif-item--unread .notif-item__dot { animation: pulse-dot 2s var(--ease-in-out) infinite; } .notif-item__title { font-size: var(--text-sm); font-weight: 500; } .notif-item__msg { font-size: var(--text-xs); color: var(--c-fg-2); margin-top: 2px; } .notif-item__time { font-size: 10px; color: var(--c-fg-3); margin-top: 2px; } .notif-item__dismiss { font-size: var(--text-xs); color: var(--c-fg-3); background: transparent; border: 0; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); flex-shrink: 0; } .notif-item__dismiss:hover { background: var(--c-bg-3); color: var(--c-fg); } .notif-empty { text-align: center; padding: var(--sp-5) var(--sp-3); color: var(--c-fg-3); font-size: var(--text-sm); } /* Health distribution bars */ .health-dist { display: flex; gap: var(--sp-1); align-items: flex-end; height: 96px; padding: var(--sp-2) 0; } .health-dist__bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; } .health-dist__bar-fill { width: 100%; /* Sprint 24F-18: 1-accent + 5-grays rule. Solid brand fill (no rainbow gradient mixing brand+warn+danger). The bar height alone shows the distribution — the color stays neutral. */ background: var(--c-brand); border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 2px; transition: height var(--d-base) var(--ease-out); } .health-dist__bar-count { font-family: var(--ff-mono); font-size: var(--text-xs); color: var(--c-fg); font-weight: 600; font-variant-numeric: tabular-nums; } .health-dist__bar-label { font-size: 9px; color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.06em; } /* Quality issues grid */ .quality-issues { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } @media (max-width: 640px) { .quality-issues { grid-template-columns: 1fr; } } .qissue { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: var(--r-md); transition: border-color var(--d-fast) var(--ease-out); } .qissue:hover { border-color: var(--c-line-2); } .qissue__icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--c-bg-3); border-radius: var(--r-md); font-size: 18px; flex-shrink: 0; } .qissue__main { flex: 1; min-width: 0; } .qissue__title { font-size: var(--text-sm); font-weight: 500; } .qissue__count { font-family: var(--ff-mono); font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; } .qissue--warn .qissue__count { color: var(--c-warn); } .qissue--danger .qissue__count { color: var(--c-danger); } .qissue--info .qissue__count { color: var(--c-fg-2); } /* -------------------------------------------------------------------------- 21) Container queries (component-level responsive) -------------------------------------------------------------------------- */ .tabs-container { container-type: inline-size; container-name: tabs; } @container tabs (max-width: 540px) { .tab-btn { padding: var(--sp-3) var(--sp-2); font-size: var(--text-xs); } } /* -------------------------------------------------------------------------- 21) Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 22) Motion utilities — Sprint 24F-13 -------------------------------------------------------------------------- Per impeccable: motion durations 100-150ms (immediate), 150-300ms (state change), 300-500ms (layout/overlay), 500-800ms (focal entrance). Exit < entrance. Exponential ease-out. */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* Stagger children — apply to a list, children fade-in sequentially. Use --stagger-step to control the gap (default 30ms, from --stagger-base). */ .stagger > * { animation: slide-up var(--d-base) var(--ease-out) both; } .stagger > *:nth-child(1) { animation-delay: 0ms; } .stagger > *:nth-child(2) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 1); } .stagger > *:nth-child(3) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 2); } .stagger > *:nth-child(4) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 3); } .stagger > *:nth-child(5) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 4); } .stagger > *:nth-child(6) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 5); } .stagger > *:nth-child(7) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 6); } .stagger > *:nth-child(8) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 7); } .stagger > *:nth-child(9) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 8); } .stagger > *:nth-child(10) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 9); } /* 11+ use the same delay as #10 (no extra stagger — visual stops matter) */ .stagger > *:nth-child(n+11) { animation-delay: calc(var(--stagger-step, var(--stagger-base)) * 10); } /* Tab panel — fade + slide-up when activated */ .tab-panel { animation: fade-in var(--d-fast) var(--ease-out); } .tab-panel.is-active { animation: slide-up var(--d-base) var(--ease-out); } /* Cards lift on hover with proper offset+blur shadow (no halo) */ .card--hoverable { cursor: pointer; transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); } .card--hoverable:hover { border-color: var(--c-line-2); transform: translateY(-2px); box-shadow: var(--sh-2); } .card--hoverable:active { transform: translateY(0); box-shadow: var(--sh-1); transition-duration: var(--d-immediate); } /* -------------------------------------------------------------------------- 23) Bottom nav (mobile/tablet) -------------------------------------------------------------------------- 80% of sellers come from mobile/tablet. Bottom nav puts the 5 most-used sections in the thumb zone. Hidden on desktop (where the top tabs are used instead). Auto-hides when the user scrolls down to read content. Sprint 24F-13: solid surface (no glassmorphism), better tap feedback (impeccable: 100-150ms feedback, scale on press). */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 28; display: none; /* shown via media query below */ padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); /* Solid surface — anti-AI-slop. Subtle elevation, no glass. */ background: var(--c-bg-1); border-top: 1px solid var(--c-line); box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08), 0 -8px 24px -8px rgba(0, 0, 0, 0.24); transform: translateY(0); transition: transform var(--d-base) var(--ease-out); } .bottom-nav.is-hidden { transform: translateY(110%); } .bottom-nav__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); max-width: 540px; margin: 0 auto; } .bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; min-height: 52px; /* 44pt + 8px padding; thumb-friendly */ background: transparent; border: 0; color: var(--c-fg-3); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border-radius: var(--r-md); -webkit-tap-highlight-color: transparent; transition: color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out); position: relative; } .bottom-nav__item:active { background: var(--c-bg-2); } .bottom-nav__item[aria-current="page"] { color: var(--c-brand); } .bottom-nav__item[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; border-radius: 0 0 2px 2px; background: var(--c-brand); box-shadow: 0 0 12px var(--c-brand); } .bottom-nav__item svg { width: 22px; height: 22px; transition: transform var(--d-fast) var(--ease-out); } .bottom-nav__item[aria-current="page"] svg { transform: translateY(-1px); } /* Sprint 24F-18: explicit class for SVGs (works alongside the svg tag selector above). Adds a tiny scale bump on active for kinetic feel. */ .bottom-nav__icon { width: 22px; height: 22px; flex-shrink: 0; transition: transform var(--d-fast) var(--ease-out); } .bottom-nav__item[aria-current="page"] .bottom-nav__icon { transform: scale(1.05); } .bottom-nav__badge { position: absolute; top: 4px; right: calc(50% - 14px); min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; background: var(--c-danger); color: white; border-radius: 8px; border: 2px solid var(--c-bg-1); } @media (max-width: 1023px) { .bottom-nav { display: block; } /* Push content up so the bottom nav doesn't cover the last row */ .app-main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* Hide the top tabs on mobile/tablet (bottom nav replaces them) */ .tabs-container { display: none; } /* Hide the auth view bottom padding adjustment on mobile */ .auth-shell { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } } /* -------------------------------------------------------------------------- 24) Hero (dashboard greeting) — Sprint UX -------------------------------------------------------------------------- First thing the seller sees. Personalized greeting, big number, quick actions. Has subtle background pattern (radial mesh) and gradient text on the headline. Mobile-first: stacks vertically. */ .hero { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); border-radius: var(--r-xl); /* Sprint 24F-13: removed the green+indigo radial gradient (AI-slop). Solid surface with subtle elevation. Brand color lives in the accent dot + the metric delta only, not as a giant background tint. */ background: var(--c-bg-1); border: 1px solid var(--c-line); box-shadow: var(--sh-2); overflow: hidden; margin-bottom: var(--sp-4); /* Subtle inset highlight on the top edge (impeccable: depth without skeuomorphism, no gradient) */ position: relative; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: color-mix(in oklch, white 6%, transparent); pointer-events: none; } [data-theme="light"] .hero::before { background: color-mix(in oklch, white 80%, transparent); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-brand); font-weight: 600; position: relative; z-index: 1; } .hero__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); /* Sprint 24F-13: replaced the pulse-glow animation (cliché) with a static green dot. "Live" status doesn't need to glow — that's a 2017 dashboard pattern. */ } .hero__greeting { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tr-snug); line-height: var(--lh-tight); margin: 0; position: relative; z-index: 1; color: var(--c-fg); } .hero__greeting-name { color: var(--c-fg); font-weight: 800; } .hero__metric { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); margin-top: var(--sp-3); position: relative; z-index: 1; } .hero__metric-label { font-size: var(--text-xs); color: var(--c-fg-2); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .hero__metric-value { font-family: var(--ff-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tr-tight); line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-fg); } .hero__metric-meta { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: 6px; font-size: var(--text-sm); color: var(--c-fg-2); line-height: var(--lh-snug); } .hero__metric-meta-vs { color: var(--c-fg-3); font-size: var(--text-xs); } .hero__metric-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in oklch, var(--c-success) 14%, transparent); color: var(--c-success); font-variant-numeric: tabular-nums; } .hero__metric-delta--down { background: color-mix(in oklch, var(--c-danger) 14%, transparent); color: var(--c-danger); } .hero__metric-delta--flat { background: color-mix(in oklch, var(--c-fg-3) 12%, transparent); color: var(--c-fg-2); } .hero__quick-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); position: relative; z-index: 1; } @media (min-width: 768px) { .hero { grid-template-columns: 1.5fr 1fr; align-items: center; padding: var(--sp-6) var(--sp-5); gap: var(--sp-5); } .hero__greeting { font-size: var(--text-3xl); } .hero__metric-value { font-size: var(--text-display); } } /* -------------------------------------------------------------------------- 25) Item cards (with images) — Sprint UX -------------------------------------------------------------------------- On mobile: stacked list. On desktop: grid. Each card has image (lazy-loaded), title, price, status, and an actions overlay on hover. */ .item-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 640px) { .item-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .item-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .item-grid { grid-template-columns: repeat(4, 1fr); } } .item-card { position: relative; display: flex; flex-direction: column; background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); cursor: pointer; -webkit-tap-highlight-color: transparent; } .item-card:hover { transform: translateY(-3px); border-color: var(--c-line-2); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--c-brand-soft); } .item-card:active { transform: translateY(-1px); } .item-card__thumb { position: relative; aspect-ratio: 4 / 3; background: var(--c-bg-2); overflow: hidden; display: grid; place-items: center; } .item-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); } .item-card:hover .item-card__thumb img { transform: scale(1.05); } /* Sprint 24F-16: thumb wrapper holds the image + a corner overlay for the "open in MeLi" link. The overlay only appears on hover/focus (no permanent visual noise in the grid). */ .item-card__thumb-wrap { position: relative; width: 100%; } .item-card__meoverlay { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(15, 17, 23, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1; opacity: 0; transform: translateY(-4px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); z-index: 2; } .item-card__thumb-wrap:hover .item-card__meoverlay, .item-card:hover .item-card__meoverlay, .item-card:focus-within .item-card__meoverlay { opacity: 1; transform: translateY(0); } @media (hover: none) { .item-card__meoverlay { opacity: 1; transform: none; } } .item-card__thumb-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--c-fg-3); font-size: 32px; background: linear-gradient(135deg, var(--c-bg-2), var(--c-bg-3)); } .item-card__thumb-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(0, 0, 0, 0.7); color: white; border-radius: var(--r-pill); backdrop-filter: blur(8px); } .item-card__thumb-badge--out { background: rgba(220, 38, 38, 0.9); } .item-card__thumb-badge--paused { background: rgba(245, 158, 11, 0.9); color: #1a1a1a; } .item-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; } .item-card__title { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .item-card__sku { font-family: var(--ff-mono); font-size: 10px; color: var(--c-fg-3); letter-spacing: 0.02em; } .item-card__sku--melc { color: var(--c-fg-3); opacity: 0.75; font-style: italic; } /* Sprint 24F-16: row that holds the SKU + the "X variaciones" chip. For items de catálogo (gold_pro/gold_special), the SKU lives at variation level — the row makes that pairing explicit. */ .item-card__sku-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .item-card__variations { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 999px; background: color-mix(in oklch, var(--c-brand) 14%, transparent); color: var(--c-brand); border: 1px solid color-mix(in oklch, var(--c-brand) 22%, transparent); white-space: nowrap; } /* Sprint 24F-17: the "X var" pill is now a button. Click opens the edit drawer (which renders the full variations list). Stops propagation so the parent card click doesn't double-fire. */ .item-card__variations--btn { cursor: pointer; font-family: var(--font-sans, system-ui, sans-serif); line-height: 1.2; transition: background 140ms var(--ease-out), transform 140ms var(--ease-out); } .item-card__variations--btn:hover { background: color-mix(in oklch, var(--c-brand) 22%, transparent); transform: translateY(-1px); } .item-card__variations--btn:active { transform: translateY(0); } /* Sprint 24F-19d: items WITHOUT variations (listing tipo gold/silver/free or empty variation array) get a non-interactive "sin var." pill with a neutral colour so the slot is never empty and the seller can tell single-variant items apart from multi-variant at a glance. */ .item-card__variations--none { cursor: default; background: color-mix(in oklch, var(--c-text-3, #6b7280) 12%, transparent); color: var(--c-text-2, #4b5563); border-color: color-mix(in oklch, var(--c-text-3, #6b7280) 22%, transparent); font-weight: 500; letter-spacing: 0.01em; } /* Sprint 24F-19e: small chip showing how many variations have a seller SKU vs. how many are using the MeLi MLCU code as fallback. Tone is tied to the proportion so the seller can spot items with missing per-variation SKUs at a glance. Sits next to the "N var." pill. */ .item-card__var-skus { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 999px; border: 1px solid transparent; line-height: 1.4; white-space: nowrap; margin-left: 4px; transition: filter 120ms var(--ease-out, ease-out); } .item-card__var-skus:hover { filter: brightness(0.97); } .item-card__var-skus--all { background: color-mix(in oklch, var(--c-success, #10b981) 14%, transparent); color: color-mix(in oklch, var(--c-success, #10b981) 80%, var(--c-text, #111)); border-color: color-mix(in oklch, var(--c-success, #10b981) 30%, transparent); } .item-card__var-skus--partial { background: color-mix(in oklch, var(--c-warn, #f59e0b) 14%, transparent); color: color-mix(in oklch, var(--c-warn, #f59e0b) 80%, var(--c-text, #111)); border-color: color-mix(in oklch, var(--c-warn, #f59e0b) 30%, transparent); } .item-card__var-skus--none { background: color-mix(in oklch, var(--c-danger, #ef4444) 14%, transparent); color: color-mix(in oklch, var(--c-danger, #ef4444) 80%, var(--c-text, #111)); border-color: color-mix(in oklch, var(--c-danger, #ef4444) 30%, transparent); } /* Sprint 24F-17: completeness chip with the count + names of missing fields on hover. The colour is tied to the underlying score. */ .item-card__completeness { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 999px; white-space: nowrap; } .item-card__completeness--complete { background: color-mix(in oklch, var(--c-success) 16%, transparent); color: var(--c-success); border: 1px solid color-mix(in oklch, var(--c-success) 28%, transparent); } .item-card__completeness--partial { background: color-mix(in oklch, var(--c-warn) 16%, transparent); color: var(--c-warn); border: 1px solid color-mix(in oklch, var(--c-warn) 28%, transparent); } .item-card__completeness--low { background: color-mix(in oklch, var(--c-danger) 16%, transparent); color: var(--c-danger); border: 1px solid color-mix(in oklch, var(--c-danger) 28%, transparent); } .item-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); } .item-card__price { font-family: var(--ff-num); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-fg); } .item-card__stock { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 10px; color: var(--c-fg-3); font-weight: 500; } .item-card__stock strong { color: var(--c-fg-2); font-weight: 600; } .item-card__stock--low strong { color: var(--c-warn); } .item-card__stock--out strong { color: var(--c-danger); } .item-card__actions { position: absolute; inset: auto 8px 8px 8px; display: flex; gap: var(--sp-1); opacity: 0; transform: translateY(4px); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); pointer-events: none; } .item-card:hover .item-card__actions, .item-card:focus-within .item-card__actions { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (hover: none) { /* On touch devices, show actions always (no hover) */ .item-card__actions { opacity: 1; transform: none; pointer-events: auto; } } /* -------------------------------------------------------------------------- 26) Sale cards (with visual status) — Sprint UX -------------------------------------------------------------------------- Cards instead of text rows. Big amount, status pill, items count, buyer avatar/initials. Click to expand detail. Animated status pulse. */ .sale-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-lg); transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); cursor: pointer; overflow: hidden; } .sale-card:hover { border-color: var(--c-line-2); } .sale-card.is-open { border-color: var(--c-brand); } .sale-card::before { /* Status accent strip on the left */ content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--status-color, var(--c-line)); transition: width var(--d-base) var(--ease-out); } .sale-card.is-open::before { width: 5px; } .sale-card[data-status="paid"] { --status-color: var(--c-info); } .sale-card[data-status="confirmed"] { --status-color: var(--c-info); } .sale-card[data-status="shipped"] { --status-color: var(--c-warn); } .sale-card[data-status="delivered"] { --status-color: var(--c-brand); } .sale-card[data-status="cancelled"] { --status-color: var(--c-danger); } .sale-card[data-status="returned"] { --status-color: var(--c-danger); } .sale-card__status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-color, var(--c-fg-3)); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 0 0 var(--status-color, transparent); } .sale-card[data-status="paid"] .sale-card__status-dot, .sale-card[data-status="confirmed"] .sale-card__status-dot { animation: pulse-dot 2.4s var(--ease-in-out) infinite; } .sale-card__main { min-width: 0; } .sale-card__head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; } .sale-card__id { font-family: var(--ff-mono); font-size: var(--text-xs); color: var(--c-fg-3); letter-spacing: 0.04em; } .sale-card__date { font-size: var(--text-xs); color: var(--c-fg-3); } .sale-card__buyer { font-size: var(--text-sm); font-weight: 500; margin-top: 2px; color: var(--c-fg); } .sale-card__items { font-size: var(--text-xs); color: var(--c-fg-2); margin-top: 2px; } .sale-card__aside { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); } .sale-card__total { font-family: var(--ff-num); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-fg); } .sale-card__status { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--r-pill); background: color-mix(in srgb, var(--status-color, var(--c-fg-3)) 14%, transparent); color: var(--status-color, var(--c-fg-2)); } .sale-card__expand-icon { width: 20px; height: 20px; display: grid; place-items: center; color: var(--c-fg-3); transition: transform var(--d-base) var(--ease-out); } .sale-card.is-open .sale-card__expand-icon { transform: rotate(180deg); } .sale-card__detail { grid-column: 1 / -1; border-top: 1px solid var(--c-line); padding-top: var(--sp-3); margin-top: var(--sp-3); animation: detail-slide var(--d-base) var(--ease-out); } @keyframes detail-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Sale detail inner layout (Sprint 21A) */ .sale-detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 640px) { .sale-detail-grid { grid-template-columns: 1.4fr 1fr; } } .sale-detail-block { display: flex; flex-direction: column; gap: var(--sp-1); } .sale-detail-block__title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-fg-3); margin: 0 0 var(--sp-1) 0; } /* Item card inside the sale detail (with thumbnail + title + meta + Ver en MeLi) */ .sale-detail-item-card { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--radius-md); transition: border-color 160ms ease, transform 160ms ease; } .sale-detail-item-card:hover { border-color: var(--c-accent); transform: translateY(-1px); } .sale-detail-item__thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--c-bg-2); border: 1px solid var(--c-line); } .sale-detail-item__thumb--placeholder { display: flex; align-items: center; justify-content: center; font-size: 22px; } .sale-detail-item-card__body { flex: 1 1 auto; min-width: 0; } .sale-detail-item-card__title { font-size: var(--text-sm); font-weight: 500; color: var(--c-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } .sale-detail-item-card__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-xs); color: var(--c-fg-3); align-items: center; } .sale-detail-item-card__sku { font-family: var(--ff-mono); font-size: var(--text-xs); color: var(--c-fg-2); font-weight: 500; letter-spacing: 0.01em; } .sale-detail-item-card__sku--melc { color: var(--c-fg-3); opacity: 0.75; font-style: italic; } .sale-detail-item__melink { font-size: var(--text-xs); color: var(--c-accent); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--c-line); background: var(--c-bg-2); flex-shrink: 0; transition: background 160ms ease, border-color 160ms ease; white-space: nowrap; } .sale-detail-item__melink:hover { background: var(--c-accent-soft); border-color: var(--c-accent); } /* Sale detail money/info row (label left, value right) */ .sale-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: 4px 0; font-size: var(--text-sm); } .sale-detail-row__label { color: var(--c-fg-3); flex-shrink: 0; } .sale-detail-row__value { color: var(--c-fg); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; } .sale-detail-row__value--muted { color: var(--c-fg-3); font-weight: 400; } .sale-detail-row--total { border-top: 1px solid var(--c-line); margin-top: 4px; padding-top: 8px; font-size: var(--text-base); font-weight: 700; } .sale-detail-row--total .sale-detail-row__label { color: var(--c-fg); font-weight: 700; } .sale-detail-row--total .sale-detail-row__value { font-weight: 700; color: var(--c-accent); } @media (max-width: 480px) { .sale-card { grid-template-columns: auto 1fr; } .sale-card__aside { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } .sale-card__expand-icon { display: none; } } /* -------------------------------------------------------------------------- 27) Tooltip system — Sprint UX -------------------------------------------------------------------------- Every parameter / metric / setting should be explainable. The info-icon-button shows a tooltip with detailed help. Position auto-adjusts (top by default; flips on edges). */ .info-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--c-bg-2); border: 1px solid var(--c-line); color: var(--c-fg-2); font-size: 10px; font-weight: 700; font-style: italic; font-family: var(--ff-display); cursor: help; vertical-align: middle; margin-left: 4px; transition: all var(--d-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; } .info-icon:hover, .info-icon:focus-visible { background: var(--c-brand-soft); border-color: var(--c-brand); color: var(--c-brand); transform: scale(1.1); } .tooltip { position: fixed; z-index: 100; max-width: 280px; padding: 10px 12px; font-size: var(--text-xs); line-height: 1.45; color: var(--c-fg); background: var(--c-bg-3); border: 1px solid var(--c-line-2); border-radius: var(--r-md); box-shadow: var(--sh-3); pointer-events: none; opacity: 0; transform: translateY(4px) scale(0.96); transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); } .tooltip.is-visible { opacity: 1; transform: translateY(0) scale(1); } .tooltip::before { /* arrow */ content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--c-bg-3); border-right: 1px solid var(--c-line-2); border-bottom: 1px solid var(--c-line-2); } .tooltip--top::before { bottom: auto; top: -5px; transform: translateX(-50%) rotate(225deg); } .tooltip__title { font-weight: 700; margin-bottom: 4px; color: var(--c-fg); } .tooltip__body { color: var(--c-fg-2); } .tooltip__hint { color: var(--c-fg-3); font-size: 10px; margin-top: 6px; font-style: italic; } /* -------------------------------------------------------------------------- 28) Section header (used inside cards/tabs) — Sprint UX -------------------------------------------------------------------------- Clear visual hierarchy: title + optional description + optional action. */ .section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } .section-header__main { min-width: 0; } .section-header__title { display: flex; align-items: center; gap: 6px; font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; } .section-header__desc { font-size: var(--text-xs); color: var(--c-fg-3); margin-top: 2px; } .section-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* -------------------------------------------------------------------------- 29) Inline status pill (lightweight) — Sprint UX -------------------------------------------------------------------------- For inline status indicators (sale status, alert severity). Smaller and lighter than the existing .badge — used in dense lists. */ .status-pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--r-pill); background: var(--c-bg-3); color: var(--c-fg-2); white-space: nowrap; } .status-pill__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .status-pill--paid, .status-pill--confirmed { background: var(--c-info-soft); color: var(--c-info); } .status-pill--shipped { background: var(--c-warn-soft); color: var(--c-warn); } .status-pill--delivered, .status-pill--active, .status-pill--connected { background: var(--c-brand-soft); color: var(--c-brand); } .status-pill--cancelled, .status-pill--returned, .status-pill--critical { background: var(--c-danger-soft); color: var(--c-danger); } .status-pill--pending, .status-pill--paused { background: var(--c-warn-soft); color: var(--c-warn); } .status-pill--closed, .status-pill--inactive { background: var(--c-bg-3); color: var(--c-fg-3); } /* -------------------------------------------------------------------------- 30) Connection banner (improved) — Sprint UX -------------------------------------------------------------------------- More visual: country flag, status, last sync time, and a stat strip below for quick context (orders today, items, etc.). Animated status pulse on connected state. */ .connection-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding: var(--sp-4); /* Sprint 24F-13: removed the radial-gradient + linear-gradient bg (AI-slop). Solid surface + status communicated by border + flag. */ background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-1); margin-bottom: var(--sp-4); overflow: hidden; transition: border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .connection-card.is-connected { border-color: color-mix(in oklch, var(--c-success) 36%, var(--c-line)); box-shadow: var(--sh-2); } .connection-card.is-disconnected { border-color: color-mix(in oklch, var(--c-danger) 40%, var(--c-line)); } .connection-card__flag { width: 56px; height: 56px; display: grid; place-items: center; /* Sprint 24F-13: brand gradient mark with country code letters. No emoji flag (renders inconsistently across browsers and isn't a real country flag — it's an iOS rendering of two regional indicator unicode chars). */ background: linear-gradient(135deg, var(--c-brand-2), var(--c-brand-3)); border: 1px solid color-mix(in oklch, var(--c-brand) 30%, var(--c-line)); border-radius: var(--r-md); box-shadow: var(--sh-1); flex-shrink: 0; color: white; font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.04em; } .connection-card__flag-code { line-height: 1; } .connection-card__body { min-width: 0; } .connection-card__title { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; /* Sprint 24F-18: allow the long status text to wrap inside the flex item on narrow viewports (the slash + middle-dot aren't soft-wrap opportunities by default) */ } .connection-card__title #connection-status { min-width: 0; flex: 0 1 auto; /* don't grow, allow shrink — keeps the text as a single flex item so the title's flex-wrap can move it to a new line if it doesn't fit, instead of squeezing it into partial words */ overflow-wrap: break-word; /* only break as a last resort (the text has plenty of natural soft-wrap points with spaces) */ } .connection-card__status-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 0 var(--c-brand); animation: pulse-glow 2.4s var(--ease-in-out) infinite; } .connection-card.is-disconnected .connection-card__status-pulse { background: var(--c-danger); box-shadow: 0 0 0 0 var(--c-danger); } .connection-card__meta { font-size: var(--text-xs); color: var(--c-fg-3); margin-top: 4px; /* Sprint 24F-18: keep the "Última conexión: …" line readable on narrow viewports. Natural wrap with spaces is enough — break-word is the safety net for very long numbers or URLs. */ overflow-wrap: break-word; word-break: normal; } .connection-card__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; } .connection-card__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); } .connection-card__stat { min-width: 0; } .connection-card__stat-label { font-size: 10px; color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .connection-card__stat-value { font-family: var(--ff-num); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-fg); } @media (min-width: 768px) { .connection-card { grid-template-columns: auto 1fr auto; } .connection-card__actions { margin-top: 0; align-self: center; } .connection-card__stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- 31) Settings grid (categorized cards) — Sprint UX -------------------------------------------------------------------------- Each setting is a clickable card with icon, title, description, current value. Click to open detail. Danger zone at the bottom. */ .settings-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 768px) { .settings-grid { grid-template-columns: repeat(2, 1fr); } } .settings-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-md); cursor: pointer; text-decoration: none; color: inherit; transition: all var(--d-fast) var(--ease-out); } .settings-card:hover { border-color: var(--c-line-2); background: var(--c-bg-2); } .settings-card__icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-fg-2); flex-shrink: 0; } .settings-card__icon svg { width: 18px; height: 18px; } .settings-card__body { min-width: 0; } .settings-card__title { font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: var(--sp-1); } .settings-card__desc { font-size: var(--text-xs); color: var(--c-fg-3); margin-top: 2px; } .settings-card__value { font-size: var(--text-xs); color: var(--c-fg-2); font-weight: 500; } .settings-card__chevron { color: var(--c-fg-3); flex-shrink: 0; } .settings-card--danger { border-color: rgba(248, 113, 113, 0.3); } .settings-card--danger .settings-card__icon { background: var(--c-danger-soft); color: var(--c-danger); border-color: transparent; } .settings-card--danger:hover { background: var(--c-danger-soft); } .settings-section { margin-bottom: var(--sp-5); } .settings-section__title { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-fg-3); margin-bottom: var(--sp-3); } /* -------------------------------------------------------------------------- 32) Glossary / Help — Sprint UX -------------------------------------------------------------------------- Each term is a row with the term, what it is, and an example. Used in the help/ayuda section. */ .glossary { display: flex; flex-direction: column; gap: 0; background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; } .glossary__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); transition: background var(--d-fast) var(--ease-out); } .glossary__row:last-child { border-bottom: 0; } .glossary__row:hover { background: var(--c-bg-2); } .glossary__term { font-size: var(--text-sm); font-weight: 600; color: var(--c-fg); display: flex; align-items: center; gap: var(--sp-1); } .glossary__term code { font-family: var(--ff-mono); font-size: var(--text-xs); background: var(--c-bg-3); padding: 1px 6px; border-radius: var(--r-sm); color: var(--c-fg-2); } .glossary__def { font-size: var(--text-xs); color: var(--c-fg-2); line-height: 1.5; } .glossary__example { font-size: 11px; color: var(--c-fg-3); font-style: italic; margin-top: 2px; } /* -------------------------------------------------------------------------- 32b) Help / FAQ accordion — Sprint 24F-11 -------------------------------------------------------------------------- The "Glosario" section was replaced with a proper FAQ + services list. Uses native
/ for accessibility (works with screen readers, keyboard, no JS required). Styled to match the design system. */ .help-faq { display: flex; flex-direction: column; gap: var(--sp-2); } .help-faq__item { background: var(--c-bg-1); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 0; transition: border-color var(--d-fast) var(--ease-out); } .help-faq__item[open] { border-color: var(--c-brand-soft); } .help-faq__item summary { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); font-weight: 600; color: var(--c-fg); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); -webkit-tap-highlight-color: transparent; transition: color var(--d-fast) var(--ease-out); } .help-faq__item summary::-webkit-details-marker { display: none; } .help-faq__item summary::after { content: "+"; font-size: 18px; font-weight: 400; color: var(--c-fg-3); transition: transform var(--d-fast) var(--ease-out); flex-shrink: 0; } .help-faq__item[open] summary::after { content: "−"; color: var(--c-brand); } .help-faq__item summary:hover { color: var(--c-brand); } .help-faq__item p, .help-faq__item ul { padding: 0 var(--sp-4) var(--sp-3); font-size: var(--text-xs); line-height: 1.6; color: var(--c-fg-2); margin: 0; } .help-faq__item ul { padding-left: calc(var(--sp-4) + var(--sp-3)); margin-top: 4px; } .help-faq__item ul li { margin-bottom: 4px; } .help-faq__item ul li strong { color: var(--c-fg); font-weight: 600; } .help-faq__subsection { margin-top: var(--sp-3); padding: 0 var(--sp-1); } .help-faq__subsection h4 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-fg-3); margin: 0 0 4px 0; } .help-faq__hint { font-size: var(--text-xs); color: var(--c-fg-3); margin: 0 0 var(--sp-2) 0; font-style: italic; } /* -------------------------------------------------------------------------- 33) Success / confirmation animation — Sprint UX -------------------------------------------------------------------------- Triggered on successful writes (price update, etc). A subtle ripple that confirms the action visually without being annoying. */ @keyframes success-ripple { 0% { box-shadow: 0 0 0 0 var(--c-brand); } 100% { box-shadow: 0 0 0 16px transparent; } } .success-ripple { animation: success-ripple 600ms var(--ease-out); } /* -------------------------------------------------------------------------- 34) Page enter (tab change) animation — Sprint UX -------------------------------------------------------------------------- Replaces the simple fade-in with a slight slide-up that feels more like a "page change" when switching tabs. */ @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .page-enter { animation: page-in var(--d-slow) var(--ease-out) both; } /* -------------------------------------------------------------------------- 35) Confetti (one-shot celebration) — Sprint UX -------------------------------------------------------------------------- Triggered on rare "win" moments (first sale, plan upgrade). Short, light, dismissable. Not used for routine actions. */ .confetti-host { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; } .confetti { position: absolute; top: -20px; width: 8px; height: 12px; background: var(--confetti-color, var(--c-brand)); border-radius: 2px; animation: confetti-fall 2.4s var(--ease-out) forwards; transform-origin: center; } @keyframes confetti-fall { 0% { transform: translate(0, -10px) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx, 0), 100vh) rotate(720deg); opacity: 0; } } /* -------------------------------------------------------------------------- 36) Stat strip (used in connection card and hero) — Sprint UX -------------------------------------------------------------------------- Inline numeric stat with label, optional delta. Used in hero "metric" and connection card "stats" rows. */ .stat { display: inline-flex; align-items: baseline; gap: 6px; } .stat__value { font-family: var(--ff-num); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat__label { font-size: var(--text-xs); color: var(--c-fg-2); } .stat__delta { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill); } .stat__delta--up { background: var(--c-brand-soft); color: var(--c-brand); } .stat__delta--down { background: var(--c-danger-soft); color: var(--c-danger); } .stat__delta--flat { background: var(--c-bg-3); color: var(--c-fg-3); } /* -------------------------------------------------------------------------- 37) Tap feedback (mobile) — Sprint UX -------------------------------------------------------------------------- Visible feedback on touch. Better than the default browser tap highlight which is bright and inconsistent. */ .tappable { -webkit-tap-highlight-color: transparent; transition: transform 60ms ease-out, background 60ms ease-out; } .tappable:active { transform: scale(0.97); } /* -------------------------------------------------------------------------- 38) Image fade-in (lazy load) — Sprint UX -------------------------------------------------------------------------- Images fade in once loaded. While loading, the placeholder shows. */ .img-fade { opacity: 0; transition: opacity var(--d-base) var(--ease-out); } .img-fade.is-loaded { opacity: 1; } /* -------------------------------------------------------------------------- 39) Floating Action Button (FAB) for primary action — Sprint UX -------------------------------------------------------------------------- Used on mobile for the primary "add" / "create" action (e.g. Create promotion, Ask question). Sits above the bottom nav, big tap target. */ .fab { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); right: var(--sp-3); z-index: 27; width: 56px; height: 56px; display: grid; place-items: center; background: var(--c-brand); color: var(--c-bg-0); border: 0; border-radius: 50%; box-shadow: 0 8px 24px -4px rgba(52, 211, 153, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); } .fab:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 12px 32px -4px rgba(52, 211, 153, 0.5); } .fab:active { transform: scale(0.95); } .fab svg { width: 24px; height: 24px; } @media (min-width: 1024px) { .fab { display: none; } /* desktop uses top buttons */ } @media print { .app-header, .tabs, .connection-banner, .modal-backdrop, .toast-host { display: none !important; } body { background: white; color: black; } .card { border-color: #ccc; break-inside: avoid; } } /* Plan badge (Sprint 16B, 2026-08-06) */ .plan-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; border: 1px solid var(--c-line); background: var(--c-bg-1); color: var(--c-fg-2); margin-right: var(--sp-1); cursor: default; user-select: none; transition: transform var(--d-fast) var(--ease-out); } .plan-badge:hover { transform: scale(1.05); } .plan-badge--free { color: #94a3b8; border-color: #475569; } .plan-badge--pro { color: #fde68a; background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)); border-color: rgba(251, 191, 36, 0.5); box-shadow: 0 0 12px rgba(251, 191, 36, 0.15); } .plan-badge--business { color: #93c5fd; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.5); } .plan-badge--enterprise { color: #c084fc; background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.5); } /* Items catalog filters (Sprint 16C, 2026-08-06) */ .items-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); } .items-filter { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--c-fg-2); } .items-filter select { background: var(--c-bg-1); color: var(--c-fg); border: 1px solid var(--c-line); border-radius: 8px; padding: 4px 8px; font-size: var(--text-xs); font-family: inherit; } .items-filter--checkbox { gap: var(--sp-1); } .items-filter--checkbox input { accent-color: var(--c-brand); } .items-stats { margin-left: auto; display: flex; gap: var(--sp-2); font-size: var(--text-xs); color: var(--c-fg-2); } .items-stats__chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px 8px; border-radius: 999px; background: var(--c-bg-1); border: 1px solid var(--c-line); } .items-stats__chip--warn { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); } .items-stats__chip--ok { color: #34d399; border-color: rgba(52, 211, 153, 0.4); } .item-health-bar { display: inline-block; width: 40px; height: 6px; background: var(--c-bg-0); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 4px; } .item-health-bar__fill { display: block; height: 100%; border-radius: 3px; } .item-health-bar__fill--green { background: #34d399; } .item-health-bar__fill--yellow { background: #fbbf24; } .item-health-bar__fill--red { background: #f87171; } .item-sku-missing { color: #fbbf24; font-size: 10px; } /* ============================================================ * Sprint 24B: API tokens drawer (Conectar agente externo) * ============================================================ */ .api-tokens-section { margin-bottom: 28px; } .api-tokens-section__title { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); font-weight: 600; color: var(--c-fg-1); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); } .api-tokens-list { display: flex; flex-direction: column; gap: var(--sp-2); } .api-tokens-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 12px; background: var(--c-bg-1); border: 1px solid var(--c-border); border-radius: 8px; font-size: var(--text-xs); } .api-tokens-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .api-tokens-row__prefix { font-family: var(--ff-mono); font-weight: 600; color: var(--c-fg-1); } .api-tokens-row__meta { color: var(--c-fg-3); font-size: 10px; } .api-tokens-row__meta--revoked { color: var(--c-danger); } .api-tokens-row__scopes { display: flex; gap: var(--sp-1); } .api-tokens-form .field { margin-bottom: 12px; } .api-tokens-warning { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 8px; padding: 12px; font-size: var(--text-xs); color: #fde68a; margin-bottom: 12px; } .api-tokens-secret { display: flex; align-items: center; gap: var(--sp-2); background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 12px; } .api-tokens-secret code { flex: 1 1 auto; font-family: var(--ff-mono); font-size: 11px; color: var(--c-accent); word-break: break-all; user-select: all; } .api-tokens-howto p { font-size: var(--text-xs); margin: 8px 0; } .api-tokens-code { background: var(--c-bg-2); border: 1px solid var(--c-border); border-radius: 8px; padding: 12px 14px; font-family: var(--ff-mono); font-size: 11px; color: var(--c-fg-1); overflow-x: auto; margin: 8px 0; white-space: pre; } .api-tokens-limits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .api-tokens-limits li { font-size: var(--text-xs); line-height: 1.5; color: var(--c-fg-2); padding-left: 16px; position: relative; } .api-tokens-limits li::before { content: "•"; position: absolute; left: 4px; color: var(--c-accent); font-weight: bold; } .api-tokens-limits code { font-family: var(--ff-mono); font-size: 10px; background: var(--c-bg-2); padding: 1px 4px; border-radius: 3px; } /* Promo detail drawer (Sprint 16E, refined 24F-13) */ .drawer { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 1fr min(440px, 92vw); } .drawer[hidden] { display: none; } .drawer__backdrop { background: rgba(0, 0, 0, 0.55); /* Sprint 24F-13: no backdrop-filter on the backdrop itself. Solid dim is enough; blur on a backdrop is iOS-7 glassmorphism territory. */ } .drawer__panel { background: var(--c-bg-0); border-left: 1px solid var(--c-line); display: flex; flex-direction: column; height: 100vh; overflow: hidden; box-shadow: var(--sh-5); /* Sprint 24F-13: entry motion — slide in from right, 280ms (impeccable overlay duration). Exit < entrance. */ animation: drawer-in var(--d-base) var(--ease-out); } @keyframes drawer-in { from { transform: translateX(8px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .drawer__header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3); border-bottom: 1px solid var(--c-line); } .drawer__title { font-size: var(--text-lg); font-weight: 700; } .drawer__subtitle { color: var(--c-fg-2); font-size: var(--text-xs); } .drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-3); } .drawer__footer { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--c-line); align-items: center; justify-content: space-between; flex-wrap: wrap; } /* Sprint 24F-18: on mobile the drawer body scrolls but the footer (with the action buttons) must stay visible at the bottom — otherwise a long list pushes "Confirmar y enviar a MeLi" off-screen on a 360px viewport (reported by Juan 2026-08-07). The footer is sticky at the bottom of the panel, with safe-area-inset-bottom so the iOS home indicator doesn't cover it. */ @media (max-width: 640px) { .drawer__panel { display: flex; flex-direction: column; } .drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .drawer__footer { flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: var(--sp-3); /* Sticky to the bottom of the scrollable body. */ position: sticky; bottom: 0; /* Keep the footer above the iPhone home indicator. */ padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); /* Solid surface with a subtle top border so the scroll content doesn't bleed into the buttons. */ background: var(--c-bg-0); border-top: 1px solid var(--c-line); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); } .drawer__footer > div[style*="display:flex"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .drawer__footer > div:not([style]) { /* info text (e.g. "Revisá y confirmá…") */ order: -1; /* info first, then buttons */ text-align: left; } .drawer__footer .btn { width: 100%; } .drawer__footer .btn--primary { grid-column: 1 / -1; } /* Confirmar = full row */ } /* ============================================================ Sprint 24F-6 (refinado 24F-8, rediseñado 24F-13): persistent banner for "Reconnect MeLi" when the access_token is invalid. Sits between the header and the tab strip. Honest copy: tells the seller what to do and why. Sprint 24F-13 refinements: - Removed gradient background + 4px border-left (impeccable anti-AI-slop) - Color communicates status via subtle tint, not a colored side stripe - Better visual hierarchy: title row + description, then CTA - Subtle entrance animation (fade + 6px slide, 280ms ease-out) ============================================================ */ @keyframes banner-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .meli-banner { display: flex; align-items: center; gap: var(--sp-3); padding: 14px 20px; border-bottom: 1px solid var(--c-line); font-size: var(--text-sm); animation: banner-in var(--d-base) var(--ease-out); } .meli-banner--reconnect { /* Sprint 24F-13: removed gradient + 4px border-left. The warning is communicated by the icon background tint + the CTA button color. Solid surface with a 1px tinted bottom border (not a side stripe). */ background: color-mix(in oklch, var(--c-warn) 6%, var(--c-bg-0)); border-bottom-color: color-mix(in oklch, var(--c-warn) 30%, transparent); } .meli-banner__icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--c-warn) 18%, transparent); color: var(--c-warn); border-radius: var(--r-md); } .meli-banner__icon svg { width: 18px; height: 18px; } .meli-banner__body { flex: 1; min-width: 0; } .meli-banner__title { font-weight: 700; margin-bottom: 2px; font-size: var(--text-sm); letter-spacing: var(--tr-base); color: var(--c-fg); } .meli-banner__msg { color: var(--c-fg-2); font-size: var(--text-xs); line-height: var(--lh-snug); max-width: var(--max-w-prose); } @media (max-width: 540px) { .meli-banner { flex-wrap: wrap; padding: 12px 14px; gap: var(--sp-2); } .meli-banner__body { flex-basis: calc(100% - 48px); } .meli-banner button { margin-top: 6px; width: 100%; } } /* ============================================================ Sprint 24F-6: mobile "Más" sheet with the remaining 8 tabs. Bottom-sheet pattern (Material 3 / iOS bottom card). */ .more-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; } .more-sheet[hidden] { display: none; } .more-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); animation: sheetFadeIn 0.2s ease-out; } .more-sheet__panel { position: relative; width: 100%; max-width: 480px; background: var(--c-bg-1); border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); animation: sheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); border-top: 1px solid var(--c-line); } .more-sheet__handle { width: 36px; height: 4px; border-radius: 2px; background: var(--c-line); margin: 0 auto 12px; } .more-sheet__title { font-size: var(--text-sm); font-weight: 700; color: var(--c-fg-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } .more-sheet__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); } .more-sheet__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; background: var(--c-bg-0); border: 1px solid var(--c-line); border-radius: 12px; color: var(--c-fg); text-decoration: none; font-size: var(--text-xs); font-weight: 500; /* 48px touch target even with the icon */ min-height: 76px; transition: background 0.15s ease, border-color 0.15s ease; } .more-sheet__item:hover { background: var(--c-bg-2); border-color: var(--c-brand); } .more-sheet__item:active { transform: scale(0.97); } .more-sheet__icon { font-size: 26px; line-height: 1; } @keyframes sheetFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ============================================================ Sprint 24F-6 (refinado 24F-8): tab-strip polish (desktop). The top tab strip is the primary nav on desktop. The original was a bare horizontal scroll. Sprint 24F-8 refinements: - Active state con background pill sutil (no solo color) - Indicator más visible y animado - Hover state más sutil - Spacing más generoso entre tabs - Fade-out gradient en el borde derecho (scrollability hint) ============================================================ */ @media (min-width: 769px) { .tabs-container { position: sticky; top: var(--header-h); /* below the header */ z-index: 25; /* Sprint 24F-18: solid surface, no glassmorphism (impeccable: 1-accent + 5-grays rule + "no AI-slop glass"). Sprint 52F-34: FULLY opaque. The 96% color-mix still let the metric numbers ghost through the sticky tabs on scroll (reported by Juan 2026-08-10). A sticky nav must be a solid layer. */ background: var(--c-bg-0); border-bottom: 1px solid var(--c-line); /* Fade-out gradient on the right edge to hint scrollability */ mask-image: linear-gradient(to right, black 0, black calc(100% - 48px), transparent 100%); -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 48px), transparent 100%); padding-top: 6px; } .tabs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: var(--sp-1); border-bottom: 0; /* the container has the border */ margin-bottom: var(--sp-3); } .tabs::-webkit-scrollbar { display: none; } .tab-btn { /* 48px touch target on desktop too (per accessibility guidelines) */ min-height: 44px; padding: 0 16px; border-radius: 999px; /* pill shape */ font-size: var(--text-sm); font-weight: 500; transition: color 0.18s ease, background 0.18s ease; } .tab-btn:hover:not([aria-selected="true"]) { background: var(--c-bg-1); color: var(--c-fg); } .tab-btn[aria-selected="true"] { background: color-mix(in oklch, var(--c-brand) 12%, transparent); color: var(--c-brand); font-weight: 600; } .tab-indicator { display: none; /* the pill style replaces the underline indicator */ } } /* ============================================================ Sprint 24F-6: touch-target compliance + form input polish. Every interactive surface should be at least 44px tall so mobile users don't fat-finger. The form inputs were 36px. */ .input { min-height: 44px; } .btn { min-height: 44px; } .btn--sm { min-height: 36px; } /* explicit small variants stay small */ @media (max-width: 768px) { /* On mobile, every button is at least 44px by default */ .btn { min-height: 48px; padding: 0 18px; } .btn--sm { min-height: 44px; padding: 0 14px; } } .drawer__footer-info { color: var(--c-fg-2); font-size: var(--text-sm); } .drawer-section-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-1); color: var(--c-fg); } .drawer-section-hint { font-size: var(--text-xs); color: var(--c-fg-2); margin-bottom: var(--sp-2); } .promo-candidate-row { display: grid; grid-template-columns: auto 48px 1fr auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); transition: opacity 0.2s ease, background 0.2s ease; } .promo-candidate-row:hover { background: rgba(255,255,255,0.02); } .promo-candidate-row--accepted { opacity: 0.4; } .promo-candidate-row--excluded { opacity: 0.4; } .promo-candidate-row__check-label { display: flex; align-items: center; } .promo-candidate-row__check { width: 18px; height: 18px; accent-color: var(--c-brand); cursor: pointer; } .promo-candidate-row__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--c-line); background: rgba(255,255,255,0.05); } .promo-candidate-row__thumb--placeholder { display: flex; align-items: center; justify-content: center; font-size: 20px; } .promo-candidate-row__body { flex: 1; min-width: 0; } .promo-candidate-row__title-row { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; } .promo-candidate-row__title { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } /* Sprint 24F-14: SKU is one of the 3 recognition factors a seller uses to identify a product (image + SKU + title). Inline mono pill, low contrast so it doesn't compete with the title. */ .promo-candidate-row__sku { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--c-fg-3); background: color-mix(in oklch, var(--c-fg-3) 8%, transparent); padding: 2px 6px; border-radius: var(--radius-pill, 999px); white-space: nowrap; letter-spacing: 0.02em; flex-shrink: 0; } /* Sprint 52F-26: badge cuando el producto NO tiene SKU — alerta visible (amarillo) en vez de dejar el campo en blanco. */ .promo-candidate-row__sku--missing { color: var(--c-warn, #b7791f); background: color-mix(in oklch, var(--c-warn, #b7791f) 16%, transparent); font-weight: 600; } /* Sprint 52F-31 (LIGHTNING): stock real de la publicacion (lo persiste el server en stock_available). MeLi exige 6-9 unidades para relampago — el hint avisa antes de que el seller toque Aceptar. */ .promo-candidate-row__stock { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; color: var(--c-fg-3); background: color-mix(in oklch, var(--c-fg-3) 8%, transparent); padding: 2px 6px; border-radius: var(--radius-pill, 999px); white-space: nowrap; letter-spacing: 0.02em; flex-shrink: 0; } .promo-candidate-row__stock--invalid { color: var(--c-danger, #c0392b); background: color-mix(in oklch, var(--c-danger, #c0392b) 14%, transparent); font-weight: 600; } .promo-candidate-row__meta { font-size: var(--text-xs); color: var(--c-fg-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } /* Sprint 52F-25: reason line under error/rejected/excluded ledger rows — shows WHY the promo landed in that state (e.g. PRICE_DISCOUNT missing deal_price) so the ledger is self-explanatory. */ .promo-decision-row__reason { font-size: var(--text-xs); color: var(--c-warn); margin-top: 4px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; } .promo-candidate-row__price-orig { text-decoration: line-through; color: var(--c-fg-3); } .promo-candidate-row__price { font-weight: 700; color: var(--c-fg); } /* Sprint 24F-3: honest % label — NOT a misleading green discount badge. Tells the seller this is MeLi's API calculation, not the buyer-facing claim. */ .promo-candidate-row__pct { font-size: var(--text-xs); color: var(--c-fg-2); font-weight: 500; font-style: italic; padding: 2px 6px; border: 1px solid var(--c-line); border-radius: 4px; background: rgba(255,255,255,0.02); } .promo-candidate-row__pct--pending { color: var(--c-fg-3); font-style: italic; } .promo-candidate-row__pct--bad { color: #f87171; font-style: normal; font-weight: 600; border-color: #f87171; background: rgba(248,113,113,0.08); } /* Sprint 24F-14: the REAL discount is computed server-side against current_price (what the buyer sees in MeLi). It's still honest — italic + neutral text — but readable. No green "discount!" badge. */ .promo-candidate-row__pct--real { color: var(--c-fg); font-style: normal; font-weight: 600; border-color: color-mix(in oklch, var(--c-fg) 14%, transparent); background: color-mix(in oklch, var(--c-fg) 6%, transparent); } /* Sprint 24F-21: secondary note surfacing MeLi's aggressive suggestion when it differs from the real discount (transparency). Ghost styling. */ .promo-candidate-row__pct--suggestion { color: var(--c-fg-3); font-style: italic; font-weight: 400; font-size: 0.78em; margin-left: 6px; } /* Sprint 24F-12: when MeLi hasn't enriched a candidate (no title, no thumbnail, no current price) show a soft greyed-out row + a hint line under the ID. Avoids "MLC1912284090" as a title that looks broken. */ .promo-candidate-row--pending { opacity: 0.78; } .promo-candidate-row--pending .promo-candidate-row__check-label { opacity: 0.6; } .promo-candidate-row--pending .promo-candidate-row__apply { opacity: 0.5; cursor: not-allowed; } .promo-candidate-row__title--placeholder { display: inline; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-sm); color: var(--c-fg-2); font-weight: 500; } .promo-candidate-row__title-hint { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--c-fg-3); font-style: italic; } /* Legacy class — kept for backward compat with the old badge if any cached HTML is still served. */ .promo-candidate-row__discount { background: rgba(52,211,153,0.18); color: #34d399; font-weight: 600; } .promo-candidate-row__actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; } .promo-candidate-row__melink { font-size: var(--text-xs); color: var(--c-brand); text-decoration: none; padding: 4px 8px; border: 1px solid var(--c-brand); border-radius: 6px; white-space: nowrap; } .promo-candidate-row__melink:hover { background: var(--c-brand); color: white; } /* Sprint 52F-30: secondary MeLi link (e.g. "Ver promo" next to "Publicación") — ghost outline so the primary action stays visually dominant. */ .promo-candidate-row__melink--ghost { color: var(--c-fg-2); border-color: var(--c-line); background: transparent; } .promo-candidate-row__melink--ghost:hover { background: var(--c-fg-2); color: var(--c-bg); border-color: var(--c-fg-2); } .promo-candidate-row__apply { white-space: nowrap; } /* Sprint 24F: annotation when MeLi's suggested discount (off stale list price) is meaningfully different from the actual discount (off current price). */ .promo-candidate-row__note { font-size: var(--text-xs); color: #fbbf24; margin-top: 4px; font-style: italic; } .promo-candidate-row__note--warn { color: #f87171; font-weight: 600; font-style: normal; } /* Sprint 52F-24: filter chips + ledger extras of the "Actividad de promos" card */ .promo-filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-line); background: rgba(255,255,255,0.03); color: var(--c-fg-2); font-size: var(--text-xs); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .promo-filter-chip:hover { background: rgba(255,255,255,0.06); color: var(--c-fg); } .promo-filter-chip--active { background: color-mix(in oklch, var(--c-brand) 16%, transparent); border-color: var(--c-brand); color: var(--c-brand); } .promo-filter-chip__count { opacity: 0.75; } .promo-candidate-row__promoid { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-xs); color: var(--c-fg-2); } .promo-candidate-row__date { font-size: var(--text-xs); color: var(--c-fg-3); white-space: nowrap; } /* Sprint 24F-23 (bug b): on narrow screens the 4-column grid (check, thumb, body, actions) squeezes the actions column, so the status badge visually overlaps the "Publicación" link. Drop to a 3-column grid and give the actions their own full-width row. */ @media (max-width: 640px) { .promo-candidate-row { grid-template-columns: auto 48px 1fr; } .promo-candidate-row__actions { grid-column: 1 / -1; flex-wrap: wrap; padding-left: 6px; } } /* Sprint 20B: settings summary card */ #promo-mode-summary { display: block; } /* Sprint 20F: item card clickable + edit drawer styles */ .item-card--clickable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .item-card--clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .item-edit-diff-row { display: flex; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .item-edit-diff-row:last-child { border-bottom: none; } .item-edit-diff-key { font-weight: 600; min-width: 120px; color: var(--c-fg-2); } /* Item card MeLi link (Sprint 19) */ .item-card__melink { display: inline-flex; align-items: center; margin-left: auto; padding: 2px 6px; border-radius: 6px; background: var(--c-brand); color: var(--c-bg-0); font-size: 10px; font-weight: 700; text-decoration: none; letter-spacing: 0.3px; transition: transform 0.1s; } .item-card__melink:hover { transform: scale(1.05); } .item-card__melink:active { transform: scale(0.95); } /* Sprint 24F-17: edit drawer — full item detail with variations, attributes, HD image and the "SKU vendedor vs MLCU" distinction. */ .item-edit__hero { width: calc(100% + var(--sp-6)); margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) var(--sp-3); aspect-ratio: 4 / 3; background: var(--c-bg-2); overflow: hidden; } .item-edit__hero img { width: 100%; height: 100%; object-fit: cover; } .item-edit__section { margin: var(--sp-3) 0; padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); } .item-edit__section-title { font-size: var(--text-sm); font-weight: 600; color: var(--c-fg); margin-bottom: var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; } .item-edit__section-hint { font-size: var(--text-xs); color: var(--c-fg-3); font-weight: 400; } .item-edit__ids { display: flex; flex-direction: column; gap: var(--sp-1); } /* Sprint 24F-19d: Buy-box card — the recommendation the seller acts on first. Visual states map 1:1 to MeLi's status: winning → green, sharing_first → yellow, losing → red, not_applicable → muted. The card sits right under the IDs (above the title field) so the seller sees the recommendation BEFORE deciding what to edit. */ .buybox { margin: 0 0 var(--sp-3) 0; padding: var(--sp-3); border-radius: var(--r-md, 12px); border: 1px solid var(--c-border, #e5e7eb); background: var(--c-bg-elev, #fff); position: relative; transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); } .buybox--skeleton { border-color: transparent; background: transparent; } .buybox--good { border-color: color-mix(in oklch, var(--c-success, #10b981) 35%, transparent); background: color-mix(in oklch, var(--c-success, #10b981) 6%, var(--c-bg-elev, #fff)); } .buybox--warn { border-color: color-mix(in oklch, var(--c-warn, #f59e0b) 40%, transparent); background: color-mix(in oklch, var(--c-warn, #f59e0b) 6%, var(--c-bg-elev, #fff)); } .buybox--bad { border-color: color-mix(in oklch, var(--c-danger, #ef4444) 40%, transparent); background: color-mix(in oklch, var(--c-danger, #ef4444) 6%, var(--c-bg-elev, #fff)); } .buybox--muted { border-color: var(--c-border, #e5e7eb); background: var(--c-bg-soft, #f9fafb); } .buybox--error { border-color: color-mix(in oklch, var(--c-warn, #f59e0b) 30%, transparent); background: var(--c-bg-soft, #f9fafb); } .buybox__header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .buybox__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: 13px; flex-shrink: 0; } .buybox--good .buybox__icon { background: var(--c-success, #10b981); color: #fff; } .buybox--warn .buybox__icon { background: var(--c-warn, #f59e0b); color: #fff; } .buybox--bad .buybox__icon { background: var(--c-danger, #ef4444); color: #fff; } .buybox--muted .buybox__icon { background: var(--c-fg-3, #6b7280); color: #fff; } .buybox--error .buybox__icon { background: var(--c-warn, #f59e0b); color: #fff; } .buybox__label { font-size: var(--text-sm, 14px); font-weight: 600; flex: 1; } .buybox__refresh { background: transparent; border: 0; color: var(--c-fg-3, #6b7280); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 6px; transition: background 140ms var(--ease-out), color 140ms var(--ease-out); } .buybox__refresh:hover { background: color-mix(in oklch, var(--c-fg-3, #6b7280) 12%, transparent); color: var(--c-fg, #111); } .buybox__refresh:active { transform: rotate(180deg); transition: transform 200ms var(--ease-out); } .buybox__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-2); } .buybox__metric { background: var(--c-bg-elev, #fff); border: 1px solid var(--c-border, #e5e7eb); border-radius: 8px; padding: 8px 10px; } .buybox__metric--target { border-color: color-mix(in oklch, var(--c-brand) 35%, var(--c-border, #e5e7eb)); } .buybox__metric--delta--good { border-color: color-mix(in oklch, var(--c-success, #10b981) 45%, var(--c-border, #e5e7eb)); } .buybox__metric--delta--bad { border-color: color-mix(in oklch, var(--c-danger, #ef4444) 45%, var(--c-border, #e5e7eb)); } .buybox__metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-fg-3, #6b7280); font-weight: 600; } .buybox__metric-value { font-size: 16px; font-weight: 700; color: var(--c-fg, #111); font-variant-numeric: tabular-nums; } .buybox--good .buybox__metric-value { color: var(--c-success, #10b981); } .buybox--bad .buybox__metric-value { color: var(--c-danger, #ef4444); } .buybox__hint { font-size: var(--text-xs, 12px); color: var(--c-fg-3, #6b7280); margin-bottom: var(--sp-2); line-height: 1.4; } .buybox__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .buybox__learn-more { font-size: var(--text-xs, 12px); color: var(--c-fg-3, #6b7280); text-decoration: underline; margin-left: auto; } .buybox__learn-more:hover { color: var(--c-brand); } .item-edit__id { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--text-sm); } .item-edit__id-label { font-size: var(--text-xs); color: var(--c-fg-3); text-transform: uppercase; letter-spacing: 0.04em; min-width: 100px; } .item-edit__id-value { font-weight: 600; color: var(--c-fg); } .item-edit__id-value--mono { font-family: var(--ff-mono); font-size: var(--text-xs); color: var(--c-fg-2); font-weight: 500; } .item-edit__permalink { display: inline-flex; align-items: center; font-size: var(--text-xs); color: var(--c-brand); text-decoration: none; margin-top: var(--sp-1); font-weight: 500; } .item-edit__permalink:hover { text-decoration: underline; } .item-edit__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); } @media (max-width: 640px) { .item-edit__row { grid-template-columns: 1fr; } } .item-edit__variations { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 220px; overflow-y: auto; } .item-edit__variation { display: grid; grid-template-columns: 1.6fr 1fr auto; align-items: center; gap: var(--sp-2); padding: 6px 8px; background: color-mix(in oklch, var(--c-fg-3) 4%, transparent); border-radius: 6px; font-size: var(--text-xs); } .item-edit__variation-attr { font-weight: 500; color: var(--c-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-edit__variation-ids { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .item-edit__variation-stock { font-family: var(--font-mono, ui-monospace, monospace); color: var(--c-fg-2); white-space: nowrap; } /* Sprint 24F-19e: highlight a variation row whose seller SKU is missing so the seller spots it instantly. Soft amber border + warm background, no destructive red (we want to draw attention, not alarm). */ .item-edit__variation--missing { background: color-mix(in oklch, var(--c-warn, #f59e0b) 6%, transparent); border-color: color-mix(in oklch, var(--c-warn, #f59e0b) 28%, transparent); } .item-edit__variation--missing .item-edit__variation-attr::after { content: '⚠'; margin-left: var(--sp-1, 4px); color: color-mix(in oklch, var(--c-warn, #f59e0b) 70%, var(--c-text, #111)); } /* The "falta SKU" badge next to the MLCU code. Inline pill, same tone as the row highlight. */ .item-edit__var-missing-badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; margin-top: 2px; align-self: flex-start; background: color-mix(in oklch, var(--c-warn, #f59e0b) 16%, transparent); color: color-mix(in oklch, var(--c-warn, #f59e0b) 80%, var(--c-text, #111)); border: 1px solid color-mix(in oklch, var(--c-warn, #f59e0b) 35%, transparent); border-radius: 999px; line-height: 1.4; white-space: nowrap; } /* The summary line at the top of the variations section: "X/Y con SKU del vendedor · N están usando MLCU como fallback". */ .item-edit__var-skus-summary { font-size: var(--text-sm, 13px); color: var(--c-fg-2); margin-bottom: var(--sp-2, 8px); padding: 6px 10px; background: color-mix(in oklch, var(--c-bg-soft, #f9fafb) 80%, transparent); border-radius: 6px; border: 1px solid color-mix(in oklch, var(--c-border, #e5e7eb) 60%, transparent); } .item-edit__variation-more { text-align: center; font-size: var(--text-xs); color: var(--c-fg-3); padding: 6px 0; } .item-edit__attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--sp-3); max-height: 200px; overflow-y: auto; } @media (max-width: 640px) { .item-edit__attrs { grid-template-columns: 1fr; } } .item-edit__attr { display: flex; gap: var(--sp-1); font-size: var(--text-xs); padding: 4px 0; border-bottom: 1px solid color-mix(in oklch, var(--c-fg-3) 8%, transparent); } .item-edit__attr-name { color: var(--c-fg-3); min-width: 80px; } .item-edit__attr-value { color: var(--c-fg); font-weight: 500; flex: 1; word-break: break-word; } .item-edit__completeness { display: flex; flex-direction: column; gap: 6px; } .item-edit__completeness-bar { width: 100%; height: 6px; background: var(--c-bg-2); border-radius: 3px; overflow: hidden; } .item-edit__completeness-bar > span { display: block; height: 100%; border-radius: 3px; transition: width 280ms var(--ease-out); } .item-edit__completeness-text { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--text-sm); flex-wrap: wrap; } .item-edit__completeness-missing { color: var(--c-fg-3); font-size: var(--text-xs); } .item-edit__completeness-ok { color: var(--c-success); font-size: var(--text-xs); font-weight: 600; } .item-edit__warn { background: color-mix(in oklch, var(--c-warn) 12%, transparent); border: 1px solid color-mix(in oklch, var(--c-warn) 30%, transparent); color: var(--c-warn); padding: var(--sp-2); border-radius: 6px; font-size: var(--text-xs); margin-top: var(--sp-2); } .drawer__loading { padding: var(--sp-3) 0; } /* -------------------------------------------------------------------------- Sprint 24F-18 — Mobile responsive pass -------------------------------------------------------------------------- Three breakpoints: small (<380px), mobile (<480px), tablet (<768px). Goals: header compact, connection card breathe, no text truncation, no element overlap. Touch targets ≥ 48px (already on .bottom-nav__item). */ @media (max-width: 380px) { /* Header: hide the user label, FREE badge gets tighter padding. The brand + theme toggle + logout keep the action set intact. */ .app-header { padding-left: var(--sp-2); padding-right: var(--sp-2); gap: var(--sp-2); } .app-header__user { gap: var(--sp-1); } .app-header__user #user-label { display: none; } .app-header__brand-name { font-size: var(--text-sm); } .app-header__brand-mark { width: 24px; height: 24px; } /* FREE badge can be hidden on the smallest screens — re-shown on demand in /settings or via a tooltip. Saves ~40px of header width. */ .plan-badge--free { display: none; } .btn--ghost.btn--sm { padding: 4px 8px; font-size: var(--text-xs); } } @media (max-width: 480px) { /* Connection card: switch from grid to flex-wrap so the flag sits at the top-left and the body fills the row beside it. The actions and stats get their own full-width rows below. */ .connection-card { padding: var(--sp-3); gap: var(--sp-3); display: flex; flex-wrap: wrap; align-content: flex-start; } .connection-card__flag { width: 44px; height: 44px; font-size: var(--text-xs); flex: 0 0 44px; align-self: flex-start; } .connection-card__body { flex: 1 1 calc(100% - 56px); /* leave 44 + 12 gap = 56 for the flag */ min-width: 0; } .connection-card__actions { flex: 1 1 100%; gap: var(--sp-2); margin-top: 0; } .connection-card__actions .btn { flex: 1 1 auto; min-height: 40px; } .connection-card__stats { flex: 1 1 100%; } .connection-card__title { font-size: var(--text-sm); gap: 4px; } .connection-card__meta { font-size: 11px; white-space: normal; } .connection-card__stats { grid-template-columns: 1fr; gap: var(--sp-2); } .connection-card__stat { padding: var(--sp-1) 0; } .connection-card__stat-label { font-size: 9px; } .connection-card__stat-value { font-size: var(--text-base); } /* App-main: slightly tighter side padding to give content more room */ .app-main { padding: var(--sp-3); } /* KPI grid: single column on phones, value gets more space */ .kpi-grid { grid-template-columns: 1fr; gap: var(--sp-2); } /* Hero: reduce padding so the greeting doesn't take the whole screen */ .hero { padding: var(--sp-4) var(--sp-3); } .hero__title { font-size: clamp(1.5rem, 8vw, 1.875rem); } } @media (min-width: 481px) and (max-width: 767px) { /* Tablet portrait: connection stats back to 2x2 grid (more breathing room than phones, but not enough for the desktop 4-col layout) */ .connection-card__stats { gap: var(--sp-3); } .connection-card__stat-value { font-size: var(--text-md); } } @media (max-width: 767px) { /* Items filter bar: stack the controls on phones */ .items-toolbar { flex-direction: column; align-items: stretch; gap: var(--sp-2); } .items-toolbar__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .items-toolbar__summary { justify-content: space-between; } /* Make sure the "Catálogo" heading doesn't crowd the action buttons */ .section-header { flex-direction: column; align-items: stretch; gap: var(--sp-2); } .section-header__actions { justify-content: flex-start; } /* Tabs container (top tabs) is already hidden on mobile, but ensure no leftover padding bleeds through */ .tabs-container { display: none; } /* The bottom-nav already has padding-bottom for safe area, but ensure main content gets extra room above the nav (in case the safe area inset is 0 on a non-iOS device) */ .app-main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--sp-3)); } } @media (min-width: 1024px) { /* Desktop: ensure no bottom padding accumulation from the mobile rules */ .app-main { padding-bottom: var(--sp-4); } }