/* ============================================================================ VENFLY — F1 · "SEÑAL VIBRANTE" · SHARED DESIGN SYSTEM Faithful to Direction C (the look the owner approved): bright white + electric violet + amber, bold geometric type, bento, connection-network motif. Every F1 screen s this file. Craft bar: Linear / Stripe / Attio. Spanish UI · "tú" never "vos" · currency Q (Quetzales). Fonts to load in each screen's : ============================================================================ */ /* --------------------------------------------------------------------------- 1 · TOKENS --------------------------------------------------------------------------- */ :root{ /* — Surfaces (tinted neutrals, never pure #000/#fff) — */ --paper:#FCFCFD; /* app background */ --white:#FFFFFF; /* raised surfaces / cards */ --panel:#F8F7FB; /* second neutral layer: sidebars, toolbars */ --ink:#16131F; /* primary text (violet-tinted near-black) */ --ink-2:#2C2838; /* strong secondary text */ --graphite:#5B5766; /* muted text / icons */ --graphite-2:#8B8794; /* faint text / placeholders */ --hairline:rgba(20,18,30,.10); --hairline-strong:rgba(20,18,30,.16); /* — Brand: electric violet — */ --violet:#6E3BFF; --violet-700:#5A29E6; /* hover / pressed */ --violet-300:#A98CFF; /* light-on-dark accents */ --violet-100:#EFE9FF; /* tint fills (active nav, badges) */ --violet-050:#F6F3FF; /* faintest tint (selected rows) */ /* — Accent: amber — */ --amber:#FF9D2E; --amber-700:#D9760A; /* amber text on light */ --amber-100:#FFEFD9; --amber-050:#FFF7EC; /* — Channels — */ --wa:#1FA855; --wa-100:#E9F7EF; --ig:#C13584; --ig-100:#FBECF5; --fb:#1877F2; --fb-100:#E8F1FE; /* — Semantic state — */ --success:#1FA855; --success-100:#E9F7EF; --warning:#D9760A; --warning-100:#FFEFD9; --danger:#D9434E; --danger-100:#FCE9EA; --danger-700:#B92F39; --info:#1877F2; --info-100:#E8F1FE; /* — Tinted neutrals for chat / chips — */ --bubble-in:#F1F0F4; --chip:#F4F3F7; --shimmer-a:#EEEDF3; --shimmer-b:#E4E2EC; /* — Type families — */ --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; --serif:"Fraunces",Georgia,"Times New Roman",serif; /* editorial accent (F2) */ /* — Type scale (fixed rem, product-appropriate, ratio ~1.2) — */ --fs-11:.6875rem; /* 11px micro labels */ --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; /* base UI text */ --fs-15:.9375rem; --fs-16:1rem; --fs-18:1.125rem; --fs-21:1.3125rem; --fs-24:1.5rem; --fs-30:1.875rem; --fs-38:2.375rem; --fs-48:3rem; --fs-56:3.5rem; /* — Spacing scale (4px base) — */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; /* — Radius — */ --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-pill:999px; /* — Elevation (violet-tinted, never flat black) — */ --sh-1:0 1px 2px rgba(20,18,30,.05), 0 1px 0 rgba(20,18,30,.02); --sh-2:0 4px 14px rgba(20,18,30,.07), 0 1px 3px rgba(20,18,30,.05); --sh-3:0 18px 48px rgba(38,22,92,.13), 0 4px 14px rgba(20,18,30,.07); --sh-4:0 30px 70px rgba(38,22,92,.18), 0 8px 24px rgba(20,18,30,.10); --sh-violet:0 14px 36px rgba(110,59,255,.28); --sh-violet-sm:0 6px 18px rgba(110,59,255,.22); --focus-ring:0 0 0 3px var(--violet-100); /* — Motion (ease-out, exponential; no bounce/elastic) — */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out-quint:cubic-bezier(.22,1,.36,1); /* entrances, transform hover */ --ease-move:cubic-bezier(.25,1,.5,1); /* slides, panels, drawers */ --ease-drawer:cubic-bezier(.32,.72,0,1); /* iOS-like bottom sheet */ --ease-in-out:cubic-bezier(.65,.05,.36,1); --t-fast:.15s; --t-base:.22s; --t-slow:.32s; --t-collapse:.34s; /* sidebar collapse: deliberate, occasional, never snappy */ /* — Layout — */ --maxw:1200px; --sidebar-w:248px; --sidebar-w-collapsed:76px; --topbar-h:68px; --tabbar-h:60px; } /* --------------------------------------------------------------------------- 1b · THEMES · blanco (default/light) · negro · rojo · azul Only the COLOR layer is re-mapped per theme; every screen keeps reading the same token names. The switcher JS sets data-theme on . No attribute = blanco, because :root above is already the light look the owner approved. OKLCH thinking: neutrals stay tinted toward each theme's hue, chroma kept low so darks never look muddy; accents brightened a step so they survive on dark. --------------------------------------------------------------------------- */ /* blanco — re-asserts the light source of truth so a stored "blanco" choice is explicit and survives if a future theme ever leaks via inheritance. */ [data-theme="blanco"]{ color-scheme:light; --paper:#FCFCFD; --white:#FFFFFF; --panel:#F8F7FB; --ink:#16131F; --ink-2:#2C2838; --graphite:#5B5766; --graphite-2:#8B8794; --hairline:rgba(20,18,30,.10); --hairline-strong:rgba(20,18,30,.16); --violet:#6E3BFF; --violet-700:#5A29E6; --violet-300:#A98CFF; --violet-100:#EFE9FF; --violet-050:#F6F3FF; --amber:#FF9D2E; --amber-700:#D9760A; --amber-100:#FFEFD9; --amber-050:#FFF7EC; --bubble-in:#F1F0F4; --chip:#F4F3F7; --shimmer-a:#EEEDF3; --shimmer-b:#E4E2EC; } /* negro — violet identity carried onto a violet-black base (the live "negro"). bg #0B0A12 / surfaces step up; accent brightened to #8B6BFF for dark contrast. */ [data-theme="negro"]{ color-scheme:dark; /* surfaces */ --paper:#0B0A12; /* darkest base, violet-tinted, not pure black */ --white:#16151F; /* raised cards (one step up) */ --panel:#121120; /* sidebar / toolbar layer */ --chip:#1F1E30; /* subtle fill */ --bubble-in:#1B1A26; /* incoming chat bubble */ --shimmer-a:#1A1926; --shimmer-b:#23223A; /* skeleton sweep on dark */ /* text (descending, violet-tinted light grays) */ --ink:#ECEAF6; /* primary text, near-white */ --ink-2:#C7C4DA; /* strong secondary */ --graphite:#8E8AA6; /* muted text / icons */ --graphite-2:#5C5878; /* faint / placeholders */ /* hairlines: light-on-dark */ --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.14); /* accent: violet brightened for dark */ --violet:#8B6BFF; --violet-700:#7857F2; --violet-300:#B6A2FF; --violet-100:rgba(139,107,255,.16); /* tint fill: active nav / badges */ --violet-050:rgba(139,107,255,.08); /* faint fill: selected rows */ /* amber kept as warm secondary, nudged brighter */ --amber:#FFB155; --amber-700:#FFC178; --amber-100:rgba(255,177,85,.16); --amber-050:rgba(255,177,85,.09); /* channel/semantic tint fills re-darkened (bases read fine on dark) */ --wa-100:rgba(31,168,85,.16); --ig-100:rgba(193,53,132,.16); --fb-100:rgba(24,119,242,.16); --success:#34C26B; --success-100:rgba(31,168,85,.16); --warning:#FFB155; --warning-100:rgba(255,177,85,.16); --danger:#F2606B; --danger-100:rgba(232,67,78,.18); --danger-700:#FF7C86; --info:#4DA0FF; --info-100:rgba(24,119,242,.16); /* elevation: deep, plus an accent glow on the violet shadows */ --sh-1:0 1px 2px rgba(0,0,0,.40), 0 1px 0 rgba(0,0,0,.30); --sh-2:0 4px 14px rgba(0,0,0,.46), 0 1px 3px rgba(0,0,0,.40); --sh-3:0 18px 48px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.42); --sh-4:0 30px 70px rgba(0,0,0,.62), 0 8px 24px rgba(0,0,0,.48); --sh-violet:0 14px 36px rgba(139,107,255,.40); --sh-violet-sm:0 6px 18px rgba(139,107,255,.34); --focus-ring:0 0 0 3px rgba(139,107,255,.36); } /* rojo — carmín on a warm near-black (the live "rojo"). Violet tokens become the carmín accent, so all the violet UI reads as red. */ [data-theme="rojo"]{ color-scheme:dark; --paper:#100709; /* warm near-black, carmín-tinted */ --white:#1C0E11; /* raised cards */ --panel:#170A0D; /* sidebar / toolbar */ --chip:#271217; /* subtle fill */ --bubble-in:#221013; /* incoming bubble */ --shimmer-a:#200F13; --shimmer-b:#2C151B; --ink:#F4EBEC; /* near-white, warm */ --ink-2:#DCC8CC; --graphite:#A78289; --graphite-2:#6E4F56; --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.14); /* accent: carmín family mapped onto the violet tokens */ --violet:#E8455A; --violet-700:#C0304A; --violet-300:#F58A99; --violet-100:rgba(232,69,90,.16); --violet-050:rgba(232,69,90,.08); --amber:#FFB155; --amber-700:#FFC178; --amber-100:rgba(255,177,85,.16); --amber-050:rgba(255,177,85,.09); --wa-100:rgba(31,168,85,.16); --ig-100:rgba(193,53,132,.16); --fb-100:rgba(24,119,242,.16); --success:#34C26B; --success-100:rgba(31,168,85,.16); --warning:#FFB155; --warning-100:rgba(255,177,85,.16); --danger:#FF6675; --danger-100:rgba(232,69,90,.20); --danger-700:#FF8A95; --info:#5AA9FF; --info-100:rgba(24,119,242,.16); --sh-1:0 1px 2px rgba(0,0,0,.42), 0 1px 0 rgba(0,0,0,.30); --sh-2:0 4px 14px rgba(0,0,0,.48), 0 1px 3px rgba(0,0,0,.40); --sh-3:0 18px 48px rgba(0,0,0,.56), 0 4px 14px rgba(0,0,0,.42); --sh-4:0 30px 70px rgba(0,0,0,.64), 0 8px 24px rgba(0,0,0,.48); --sh-violet:0 14px 36px rgba(232,69,90,.40); --sh-violet-sm:0 6px 18px rgba(232,69,90,.34); --focus-ring:0 0 0 3px rgba(232,69,90,.36); } /* azul — cian on a cold near-black (the live "azul"). Violet tokens become cian. */ [data-theme="azul"]{ color-scheme:dark; --paper:#060B12; /* cold near-black, cyan-tinted */ --white:#0E1722; /* raised cards */ --panel:#0A111B; /* sidebar / toolbar */ --chip:#13202F; /* subtle fill */ --bubble-in:#101D2A; /* incoming bubble */ --shimmer-a:#0F1B28; --shimmer-b:#172838; --ink:#E6F1F9; /* near-white, cool */ --ink-2:#C2D4E2; --graphite:#7E97AB; --graphite-2:#516577; --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.14); /* accent: cian family mapped onto the violet tokens */ --violet:#2EB8FF; --violet-700:#1E97DB; --violet-300:#7FD2FF; --violet-100:rgba(46,184,255,.16); --violet-050:rgba(46,184,255,.08); --amber:#FFB155; --amber-700:#FFC178; --amber-100:rgba(255,177,85,.16); --amber-050:rgba(255,177,85,.09); --wa-100:rgba(31,168,85,.16); --ig-100:rgba(193,53,132,.16); --fb-100:rgba(46,184,255,.16); --success:#34C26B; --success-100:rgba(31,168,85,.16); --warning:#FFB155; --warning-100:rgba(255,177,85,.16); --danger:#F2606B; --danger-100:rgba(232,67,78,.18); --danger-700:#FF7C86; --info:#5CCAFF; --info-100:rgba(46,184,255,.16); --sh-1:0 1px 2px rgba(0,0,0,.44), 0 1px 0 rgba(0,0,0,.32); --sh-2:0 4px 14px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.42); --sh-3:0 18px 48px rgba(0,0,0,.58), 0 4px 14px rgba(0,0,0,.44); --sh-4:0 30px 70px rgba(0,0,0,.66), 0 8px 24px rgba(0,0,0,.50); --sh-violet:0 14px 36px rgba(46,184,255,.38); --sh-violet-sm:0 6px 18px rgba(46,184,255,.32); --focus-ring:0 0 0 3px rgba(46,184,255,.36); } /* Smooth cross-theme fade. Color only, never layout, so switching themes does not jank. Excludes anything mid-transition for collapse/drawer motion. */ @media (prefers-reduced-motion:no-preference){ body, .sidebar, .topbar, .app, .chip, [class*="card"], [class*="panel"]{ transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } } /* === ICON DATA URIS (file://-safe) === */ :root{ --ic-ajustes:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%200%201-4%200v-.1a1.7%201.7%200%200%200-1.1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%200%201%200-4h.1a1.7%201.7%200%200%200%201.5-1.1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3H9a1.7%201.7%200%200%200%201-1.5V3a2%202%200%200%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8V9a1.7%201.7%200%200%200%201.5%201H21a2%202%200%200%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%20%3C%2Fsvg%3E"); --ic-bell:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M10%205a2%202%200%200%201%204%200%207%207%200%200%201%204%206v3a4%204%200%200%200%202%203H4a4%204%200%200%200%202-3v-3a7%207%200%200%201%204-6%22%2F%3E%20%3Cpath%20d%3D%22M9%2017v1a3%203%200%200%200%206%200v-1%22%2F%3E%20%3C%2Fsvg%3E"); --ic-camera:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M3%208a2%202%200%200%201%202-2h2.5l1.7-2.4a1%201%200%200%201%20.8-.6h4a1%201%200%200%201%20.8.6L16.5%206H19a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223.5%22%2F%3E%20%3C%2Fsvg%3E"); --ic-cart:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%221.4%22%2F%3E%20%3Cpath%20d%3D%22M2%203h2.5l2.6%2012.2a2%202%200%200%200%202%201.6h9a2%202%200%200%200%202-1.5L22%207H6%22%2F%3E%20%3C%2Fsvg%3E"); --ic-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpolyline%20points%3D%224%2012%2010%2018%2020%206%22%2F%3E%20%3C%2Fsvg%3E"); --ic-comments:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%20%3Cline%20x1%3D%227.5%22%20y1%3D%229%22%20x2%3D%2216.5%22%20y2%3D%229%22%2F%3E%20%3Cline%20x1%3D%227.5%22%20y1%3D%2212.5%22%20x2%3D%2213%22%20y2%3D%2212.5%22%2F%3E%20%3C%2Fsvg%3E"); --ic-dashboard:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%20%3Crect%20x%3D%2213%22%20y%3D%224%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%2213%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%20%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.6%22%2F%3E%20%3C%2Fsvg%3E"); --ic-download:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%20%3Cpolyline%20points%3D%227%2011%2012%2016%2017%2011%22%2F%3E%20%3Cline%20x1%3D%2212%22%20y1%3D%2216%22%20x2%3D%2212%22%20y2%3D%223%22%2F%3E%20%3C%2Fsvg%3E"); --ic-edit:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M17%203%2021%207%208%2020%204%2020%204%2016z%22%2F%3E%20%3Cpath%20d%3D%22M14%206%2018%2010%22%2F%3E%20%3C%2Fsvg%3E"); --ic-eye:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012z%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%20%3C%2Fsvg%3E"); --ic-ia:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M10.5%203.8%20Q11.6%2011%2018.7%2012%20Q11.6%2013%2010.5%2020.2%20Q9.4%2013%202.3%2012%20Q9.4%2011%2010.5%203.8%20Z%22%2F%3E%20%3Cpath%20d%3D%22M18.2%203%20Q18.6%205.4%2021%205.8%20Q18.6%206.2%2018.2%208.6%20Q17.8%206.2%2015.4%205.8%20Q17.8%205.4%2018.2%203%20Z%22%2F%3E%20%3C%2Fsvg%3E"); --ic-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%20%3Cpolyline%20points%3D%2221%2015%2016%2010%205%2021%22%2F%3E%20%3C%2Fsvg%3E"); --ic-inbox:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M21%2011.5a8.5%208.5%200%200%201-9.1%208.5%208.4%208.4%200%200%201-3.3-.7L3%2021l1.7-5.6A8.4%208.4%200%200%201%204%2012%208.5%208.5%200%200%201%2012.5%203a8.5%208.5%200%200%201%208.5%208.5z%22%2F%3E%20%3C%2Fsvg%3E"); --ic-info:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%20%3Cline%20x1%3D%2212%22%20y1%3D%2211%22%20x2%3D%2212%22%20y2%3D%2216.5%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%220.9%22%20fill%3D%22%23000%22%2F%3E%20%3C%2Fsvg%3E"); --ic-integrations:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M9%202.5v7.5%22%2F%3E%20%3Cpath%20d%3D%22M15%202.5v7.5%22%2F%3E%20%3Cpath%20d%3D%22M6%2010h12v3a6%206%200%200%201-12%200z%22%2F%3E%20%3Cpath%20d%3D%22M12%2019v3%22%2F%3E%20%3C%2Fsvg%3E"); --ic-internal-ai:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cline%20x1%3D%223.5%22%20y1%3D%226.5%22%20x2%3D%2214.5%22%20y2%3D%226.5%22%2F%3E%20%3Cline%20x1%3D%223.5%22%20y1%3D%2211.5%22%20x2%3D%2211%22%20y2%3D%2211.5%22%2F%3E%20%3Cline%20x1%3D%223.5%22%20y1%3D%2216.5%22%20x2%3D%2213%22%20y2%3D%2216.5%22%2F%3E%20%3Cpath%20d%3D%22M18.6%2012.4%20Q19.1%2015.9%2022%2016.4%20Q19.1%2016.9%2018.6%2020.4%20Q18.1%2016.9%2015.2%2016.4%20Q18.1%2015.9%2018.6%2012.4%20Z%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%20%3C%2Fsvg%3E"); --ic-key:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%20%3Cpath%20d%3D%22M10.85%2012.15%2021%202%22%2F%3E%20%3Cpath%20d%3D%22m18%205%203%203%22%2F%3E%20%3Cpath%20d%3D%22m15%208%203%203%22%2F%3E%20%3C%2Fsvg%3E"); --ic-leads:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%20%3Cpath%20d%3D%22M2.5%2020.5v-1.5a4%204%200%200%201%204-4h5a4%204%200%200%201%204%204v1.5%22%2F%3E%20%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%20%3Cpath%20d%3D%22M21.5%2018.5v-1a3%203%200%200%200-3-3%22%2F%3E%20%3C%2Fsvg%3E"); --ic-lightning:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%3E%20%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%20%3C%2Fsvg%3E"); --ic-location:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M12%2021s-7-6.5-7-12a7%207%200%200%201%2014%200c0%205.5-7%2012-7%2012z%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%229.5%22%20r%3D%222.5%22%2F%3E%20%3C%2Fsvg%3E"); --ic-lock:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22%2F%3E%20%3C%2Fsvg%3E"); --ic-message:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%20%3Cpolyline%20points%3D%223%207%2012%2013%2021%207%22%2F%3E%20%3C%2Fsvg%3E"); --ic-mic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2212%22%20rx%3D%223%22%2F%3E%20%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2014%200%22%2F%3E%20%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%2222%22%2F%3E%20%3C%2Fsvg%3E"); --ic-more:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%3E%20%3Ccircle%20cx%3D%225%22%20cy%3D%2212%22%20r%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%2219%22%20cy%3D%2212%22%20r%3D%221.6%22%2F%3E%20%3C%2Fsvg%3E"); --ic-notepad:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M9%202h6a1%201%200%200%201%201%201v2H8V3a1%201%200%200%201%201-1z%22%2F%3E%20%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%20%3Cline%20x1%3D%229%22%20y1%3D%2211%22%20x2%3D%2215%22%20y2%3D%2211%22%2F%3E%20%3Cline%20x1%3D%229%22%20y1%3D%2215%22%20x2%3D%2213%22%20y2%3D%2215%22%2F%3E%20%3C%2Fsvg%3E"); --ic-owner:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%20%3Cline%20x1%3D%224%22%20y1%3D%229%22%20x2%3D%2220%22%20y2%3D%229%22%2F%3E%20%3Cline%20x1%3D%224%22%20y1%3D%2215%22%20x2%3D%2220%22%20y2%3D%2215%22%2F%3E%20%3Cline%20x1%3D%229%22%20y1%3D%223%22%20x2%3D%229%22%20y2%3D%2221%22%2F%3E%20%3Cline%20x1%3D%2215%22%20y1%3D%223%22%20x2%3D%2215%22%20y2%3D%2221%22%2F%3E%20%3C%2Fsvg%3E"); --ic-palette:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M12%203a9%209%200%200%200%200%2018c1%200%201.6-.7%201.6-1.6v-.8c0-.9.7-1.6%201.6-1.6h2.3a3.5%203.5%200%200%200%203.5-3.5C21%208.5%2016.97%203%2012%203z%22%2F%3E%20%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212%22%20r%3D%221.3%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%227.5%22%20r%3D%221.3%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2214%22%20cy%3D%226.5%22%20r%3D%221.3%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2217.5%22%20cy%3D%229.5%22%20r%3D%221.3%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%20%3C%2Fsvg%3E"); --ic-paperclip:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M21%2011.5%2012.5%2020a5.5%205.5%200%200%201-7.78-7.78L13%204a3.5%203.5%200%200%201%205%205l-8.5%208.5a1.5%201.5%200%200%201-2-2L15%208%22%2F%3E%20%3C%2Fsvg%3E"); --ic-pipeline:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M21%204H3l7%208.5V19l4%202v-8.5L21%204z%22%2F%3E%20%3C%2Fsvg%3E"); --ic-products:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22%2F%3E%20%3Cpolyline%20points%3D%223.27%206.96%2012%2012%2020.73%206.96%22%2F%3E%20%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2212%22%2F%3E%20%3C%2Fsvg%3E"); --ic-quotes:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%20%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%20%3Cline%20x1%3D%228%22%20y1%3D%2213%22%20x2%3D%2216%22%20y2%3D%2213%22%2F%3E%20%3Cline%20x1%3D%228%22%20y1%3D%2217%22%20x2%3D%2213%22%20y2%3D%2217%22%2F%3E%20%3C%2Fsvg%3E"); --ic-reports:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cline%20x1%3D%224%22%20y1%3D%2220%22%20x2%3D%224%22%20y2%3D%224%22%2F%3E%20%3Cline%20x1%3D%224%22%20y1%3D%2220%22%20x2%3D%2220%22%20y2%3D%2220%22%2F%3E%20%3Cpolyline%20points%3D%227%2016%2011%2012%2014%2014%2019%207%22%2F%3E%20%3C%2Fsvg%3E"); --ic-save:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202z%22%2F%3E%20%3Cpolyline%20points%3D%2217%2021%2017%2013%207%2013%207%2021%22%2F%3E%20%3Cpolyline%20points%3D%227%203%207%208%2015%208%22%2F%3E%20%3C%2Fsvg%3E"); --ic-search:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%20%3Cline%20x1%3D%2220%22%20y1%3D%2220%22%20x2%3D%2216%22%20y2%3D%2216%22%2F%3E%20%3C%2Fsvg%3E"); --ic-sound-off:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M11%205L6%209H3v6h3l5%204z%22%20fill%3D%22%23000%22%2F%3E%20%3Cline%20x1%3D%2222%22%20y1%3D%229%22%20x2%3D%2216%22%20y2%3D%2215%22%2F%3E%20%3Cline%20x1%3D%2216%22%20y1%3D%229%22%20x2%3D%2222%22%20y2%3D%2215%22%2F%3E%20%3C%2Fsvg%3E"); --ic-sound-on:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M11%205L6%209H3v6h3l5%204z%22%20fill%3D%22%23000%22%2F%3E%20%3Cpath%20d%3D%22M16%209a4%204%200%200%201%200%206%22%2F%3E%20%3C%2Fsvg%3E"); --ic-tour:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M2%209%20L12%204%20L22%209%20L12%2014%20Z%22%2F%3E%20%3Cpath%20d%3D%22M6%2011%20V16%20a6%206%200%200%200%2012%200%20V11%22%2F%3E%20%3Cline%20x1%3D%2222%22%20y1%3D%229%22%20x2%3D%2222%22%20y2%3D%2214%22%2F%3E%20%3C%2Fsvg%3E"); --ic-trash:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpolyline%20points%3D%223%206%205%206%2021%206%22%2F%3E%20%3Cpath%20d%3D%22M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22%2F%3E%20%3Cpath%20d%3D%22M19%206%2018%2020a2%202%200%200%201-2%202H8a2%202%200%200%201-2-2L5%206%22%2F%3E%20%3Cline%20x1%3D%2210%22%20y1%3D%2211%22%20x2%3D%2210%22%20y2%3D%2217%22%2F%3E%20%3Cline%20x1%3D%2214%22%20y1%3D%2211%22%20x2%3D%2214%22%20y2%3D%2217%22%2F%3E%20%3C%2Fsvg%3E"); --ic-upload:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%20%3Cpolyline%20points%3D%2217%208%2012%203%207%208%22%2F%3E%20%3Cline%20x1%3D%2212%22%20y1%3D%223%22%20x2%3D%2212%22%20y2%3D%2215%22%2F%3E%20%3C%2Fsvg%3E"); --ic-user:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%20%3Cpath%20d%3D%22M4%2021v-1a6%206%200%200%201%206-6h4a6%206%200%200%201%206%206v1%22%2F%3E%20%3C%2Fsvg%3E"); --ic-warning:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200z%22%2F%3E%20%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213.5%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%220.9%22%20fill%3D%22%23000%22%2F%3E%20%3C%2Fsvg%3E"); --ic-x-circle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%20%3Cline%20x1%3D%229%22%20y1%3D%229%22%20x2%3D%2215%22%20y2%3D%2215%22%2F%3E%20%3Cline%20x1%3D%2215%22%20y1%3D%229%22%20x2%3D%229%22%20y2%3D%2215%22%2F%3E%20%3C%2Fsvg%3E"); --ic-x:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M205.66%2C194.34a8%2C8%2C0%2C0%2C1-11.32%2C11.32L128%2C139.31%2C61.66%2C205.66a8%2C8%2C0%2C0%2C1-11.32-11.32L116.69%2C128%2C50.34%2C61.66A8%2C8%2C0%2C0%2C1%2C61.66%2C50.34L128%2C116.69l66.34-66.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32L139.31%2C128Z%22%2F%3E%3C%2Fsvg%3E"); --logo-glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201135%20839%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M1132.1%2C0%20C1137.666%2C0%201129.334%2C0%201134%2C0%20C1130.207%2C31.314%201101.585%2C60.422%201083%2C78.1%20C1054.202%2C107.787%201022.251%2C133.692%20982%2C151%20C931.563%2C172.688%20861.839%2C176.137%20803.1%2C188%20C759.005%2C194.999%20713.995%2C202.001%20669%2C208.1%20C655.347%2C215.756%20624.576%2C275.238%20615%2C291%20C615.333%2C291.667%20614.667%2C290.333%20615%2C291%20C688.993%2C279.001%20764.007%2C267.999%20838%2C255.1%20C871.742%2C249.986%20873.551%2C249.61%20942%2C239.1%20C942%2C240.333%20942%2C239.667%20942%2C239.1%20C911.739%2C324.47%20831.913%2C385.433%20738%2C406%20C659.29%2C423.238%20573.881%2C423.385%20519%2C462.1%20C484.071%2C488.212%20461.395%2C530.206%20438.1%2C568%20C400.67%2C627.327%20362.33%2C686.673%20324%2C746%20C304.335%2C776.997%20283.665%2C808.003%20264%2C839%20C263.333%2C839%20264.667%2C839%20264%2C839%20C201.006%2C738.01%20136.994%2C636.99%2074%2C536%20C55.335%2C506.003%2036.665%2C475.997%2017.1%2C446%20C12.095%2C436.895%205.706%2C426.082%200.1%2C415%20C1.021%2C414.027%200%2C415.333%200.1%2C415%20C54.995%2C415%20112.005%2C415%20165.1%2C415%20C198.663%2C466.661%20232.337%2C520.339%20264.1%2C571.1%20C585.261%2C78.136%20546.305%2C96.505%20743.1%2C61.1%20C818.659%2C49.335%20893.341%2C37.665%20967.1%2C24.1%20C1030.447%2C14.691%201035.675%2C14.5%201068%2C7.1%20C1085.332%2C5.334%201111.546%2C1.573%201132.1%2C0%20Z%22%2F%3E%20%3C%2Fsvg%3E"); } /* === /ICON DATA URIS === */ /* --------------------------------------------------------------------------- 2 · RESET + BASE --------------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.5; font-size:var(--fs-16); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.022em;color:var(--ink)} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea,select{font-family:inherit} ul,ol{list-style:none} :focus-visible{outline:2px solid var(--violet);outline-offset:2px} ::selection{background:var(--violet);color:#fff} /* Numeric / tabular helper — pair with --mono where tabular figures matter */ .mono-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* Editorial serif accent (Fraunces) — for ONE word inside a big heading/greeting, e.g. "Buenas, Roca". Soft optical settings, italic, a touch of warmth. Never on labels, buttons, or body. Inherits color & size from its heading so it sits in line; opsz high for display-grade curves. */ .serif-accent{ font-family:var(--serif); font-style:italic; font-weight:500; font-optical-sizing:auto; font-variation-settings:"opsz" 60,"SOFT" 30,"WONK" 0; letter-spacing:-.01em; /* nudge baseline so the italic serif optically aligns with the grotesque caps */ padding-right:.02em; } /* Scrollbar (subtle, not reinvented) */ *{scrollbar-width:thin;scrollbar-color:var(--hairline-strong) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:999px;border:3px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-track{background:transparent} /* 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} /* ============================================================================ 3 · BRAND LOCKUP (constellation glyph + wordmark) ============================================================================ */ .brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:var(--fs-21);letter-spacing:-.03em;color:var(--ink)} .brand .glyph{width:30px;height:30px;flex:0 0 auto} .brand-sub{font-size:var(--fs-13);font-weight:500;color:var(--graphite);letter-spacing:.01em} /* ============================================================================ 4 · APP SHELL (.app grid · .sidebar · .topbar · .mobile-tabbar) ============================================================================ */ .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;min-height:100dvh;transition:grid-template-columns var(--t-collapse) var(--ease-move)} .app.app--collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr} /* During first paint (restoring saved collapse) the transition is suppressed so there's never a visible expand→collapse flash. */ .app[data-booting],.app[data-booting] *{transition-duration:0s !important} /* — SIDEBAR — */ .sidebar{ background:var(--panel); border-right:1px solid var(--hairline); display:flex;flex-direction:column; padding:18px 14px; position:sticky;top:0;height:100vh;height:100dvh; overflow:hidden; transition:padding var(--t-collapse) var(--ease-move); } /* Brand lockup: real Venfly glyph (logo.svg as mask) in a violet plate + wordmark + locale */ .sidebar__brand{display:flex;align-items:center;gap:11px;padding:4px 8px 16px;min-height:48px} .sidebar__brand .mark{ width:34px;height:34px;flex:0 0 auto;border-radius:10px; background:linear-gradient(150deg,var(--violet-300) 0%,var(--violet) 60%,var(--violet-700) 100%); box-shadow:var(--sh-violet-sm); display:grid;place-items:center; transition:transform var(--t-base) var(--ease-out-quint),box-shadow var(--t-base) var(--ease-out-quint); } .sidebar__brand .mark::after{ content:"";width:21px;height:21px;background:#fff; -webkit-mask:var(--logo-glyph) center/contain no-repeat; mask:var(--logo-glyph) center/contain no-repeat; } .sidebar__brand:hover .mark{transform:translateY(-1px) rotate(-3deg);box-shadow:var(--sh-violet)} .sidebar__brand .wm{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden;transition:opacity calc(var(--t-collapse) * .6) var(--ease),max-width var(--t-collapse) var(--ease-move),margin var(--t-collapse) var(--ease-move);max-width:160px} .sidebar__brand .label{font-family:var(--display);font-weight:800;font-size:var(--fs-21);letter-spacing:-.03em;white-space:nowrap;line-height:1} .sidebar__brand .loc{font-size:var(--fs-12);font-weight:500;color:var(--graphite);white-space:nowrap;letter-spacing:.005em} .sidebar__scroll{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:2px 4px} .nav-section{display:flex;flex-direction:column;gap:3px} .nav-section + .nav-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)} .nav-section__title{font-size:var(--fs-11);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite-2);padding:4px 12px 5px;white-space:nowrap;overflow:hidden;transition:opacity calc(var(--t-collapse) * .55) var(--ease),max-height var(--t-collapse) var(--ease-move),padding var(--t-collapse) var(--ease-move),margin var(--t-collapse) var(--ease-move);max-height:24px} /* nav item — ACTIVE state is tint + weight, never a left side-stripe. Icons are REAL svgs recolored via CSS mask: .nav-ic takes currentColor, each item sets --ic inline (style="--ic:var(--ic-NAME)"), where the --ic-NAME tokens are the inline data: URIs generated by _build-icons.mjs (file://-safe; external .svg masks fail under file://). */ .nav-item{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);font-size:var(--fs-14);font-weight:600;color:var(--graphite);transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast) var(--ease);white-space:nowrap;min-height:40px} .nav-ic{flex:0 0 auto;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:transform var(--t-base) var(--ease-out-quint),opacity var(--t-fast) var(--ease)} .nav-item .nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis;transition:opacity calc(var(--t-collapse) * .55) var(--ease)} .nav-item:hover{background:var(--chip);color:var(--ink)} .nav-item:hover .nav-ic{transform:scale(1.08)} .nav-item:active{background:var(--hairline);transform:scale(.985)} .nav-item.active{background:var(--violet-100);color:var(--violet);font-weight:700} .nav-item.active .nav-ic{transform:scale(1.04)} /* active accent dot at the trailing edge — no side-stripe */ .nav-item.active::after{content:"";position:absolute;right:11px;width:5px;height:5px;border-radius:50%;background:var(--violet);opacity:0;transform:scale(.4);animation:navDotIn var(--t-slow) var(--ease-out-quint) forwards} .nav-item.active:has(.badge)::after{display:none} @keyframes navDotIn{to{opacity:1;transform:scale(1)}} .nav-item .badge{margin-left:auto} .sidebar__foot{padding-top:10px;margin:0 -4px;padding-left:4px;padding-right:4px} .user-card{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--white);cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast)} .user-card:hover{border-color:var(--hairline-strong);box-shadow:var(--sh-1)} .user-card .meta{min-width:0;flex:1;overflow:hidden;transition:opacity calc(var(--t-collapse) * .55) var(--ease),max-width var(--t-collapse) var(--ease-move),margin var(--t-collapse) var(--ease-move);max-width:140px} .user-card .meta b{display:block;font-size:var(--fs-13);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-card .meta small{font-size:var(--fs-12);color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .user-card .chev{color:var(--graphite-2);flex:0 0 auto} /* — COLLAPSE CONTROL — the topbar button (#menuBtn, .collapse-btn added by app.js) is the desktop collapse toggle. It turns violet when collapsed (via the shared .icon-btn[aria-pressed="true"] rule in §5) so its state is legible. — */ /* ---- COLLAPSED STATE: 76px rail, icon-only, centered ---- */ /* Inner text fades + shrinks (transition lives on each element above), so the collapse reads as fluid, not a hard cut. */ .app--collapsed .sidebar__brand .wm, .app--collapsed .nav-item__label, .app--collapsed .nav-section__title, .app--collapsed .user-card .meta{opacity:0;max-width:0;max-height:0;margin:0;pointer-events:none} .app--collapsed .user-card .chev, .app--collapsed .nav-item .badge{opacity:0;width:0;overflow:hidden;pointer-events:none} /* navRise's forwards-fill pins the section title at opacity:1; author !important outranks the animation in the cascade, so the collapsed rail shows no clipped text sliver. The base transition on .nav-section__title keeps the fade smooth in both directions. */ .app--collapsed .nav-section__title{opacity:0 !important;padding:0} .app--collapsed .nav-item{justify-content:center;padding:9px 0;gap:0} .app--collapsed .nav-item.active::after{display:none} .app--collapsed .user-card{justify-content:center;padding:9px 0;gap:0} .app--collapsed .sidebar__brand{justify-content:center;padding:6px 0 18px;gap:0} .app--collapsed .sidebar__brand:hover .mark{transform:none} /* no jiggle on the rail */ /* ---- COLLAPSED TOOLTIPS (pure CSS; label sourced from data-tip, set by app.js) ---- High-frequency hover surface → instant in, quick fade out. Fine pointers only. Let tooltips escape the rail: the expanded sidebar clips (overflow:hidden) so labels shrink cleanly, but collapsed we need overflow visible + the rail lifted above the main column so the tooltip paints over content, not under it. */ .app--collapsed .sidebar{overflow:visible;z-index:45} .app--collapsed .sidebar__scroll{overflow:visible} .app--collapsed .nav-item, .app--collapsed .user-card, .app--collapsed .sidebar__brand{position:relative} @media (hover:hover) and (pointer:fine){ .app--collapsed .nav-item[data-tip]::before, .app--collapsed .user-card[data-tip]::before, .app--collapsed .sidebar__brand[data-tip]::before{ content:attr(data-tip); position:absolute;left:calc(100% + 12px);top:50%; transform:translateY(-50%) scale(.96);transform-origin:left center; background:var(--ink);color:#fff;font-family:var(--body);font-size:var(--fs-13);font-weight:600; letter-spacing:-.005em;line-height:1;white-space:nowrap; padding:8px 11px;border-radius:var(--r-sm);box-shadow:var(--sh-3); opacity:0;pointer-events:none;z-index:80; transition:opacity .12s var(--ease); } /* little arrow */ .app--collapsed .nav-item[data-tip]::after, .app--collapsed .user-card[data-tip]::after{ content:"";position:absolute;left:calc(100% + 6px);top:50%; width:7px;height:7px;background:var(--ink);transform:translateY(-50%) rotate(45deg); opacity:0;pointer-events:none;z-index:80;transition:opacity .12s var(--ease); } .app--collapsed .nav-item[data-tip]:hover::before, .app--collapsed .user-card[data-tip]:hover::before, .app--collapsed .sidebar__brand[data-tip]:hover::before{opacity:1;transform:translateY(-50%) scale(1)} .app--collapsed .nav-item[data-tip]:hover::after, .app--collapsed .user-card[data-tip]:hover::after{opacity:1} } /* — MAIN — */ .main{display:flex;flex-direction:column;min-width:0} /* — TOPBAR — */ .topbar{ position:sticky;top:0;z-index:30; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--hairline); padding:0 var(--sp-8);min-height:var(--topbar-h); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4); } .topbar__lead{display:flex;align-items:center;gap:14px;min-width:0} .topbar__title h1{font-size:var(--fs-21);font-weight:800;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar__title p{font-size:var(--fs-13);color:var(--graphite);margin-top:1px} .topbar__actions{display:flex;align-items:center;gap:10px} /* topbar search */ .topbar-search{display:flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:8px 16px;width:260px;color:var(--graphite);transition:border-color var(--t-fast),box-shadow var(--t-fast)} .topbar-search:focus-within{border-color:var(--violet);box-shadow:var(--focus-ring)} .topbar-search svg{flex:0 0 auto} .topbar-search input{border:none;background:none;outline:none;font-size:var(--fs-14);color:var(--ink);width:100%} .topbar-search input::placeholder{color:var(--graphite)} /* hamburger / collapse toggle (hidden on desktop by default; screens reveal as needed) */ .menu-btn{display:none} /* — MOBILE TABBAR (5 items, ≤768px, 44px+ targets) — */ .mobile-tabbar{display:none} /* — CONTENT — */ .content{padding:var(--sp-8) var(--sp-8) var(--sp-16);flex:1;min-width:0} .content--narrow{max-width:920px;margin:0 auto;width:100%} /* ============================================================================ 5 · BUTTONS (primary / ghost / danger / sm + states) ============================================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--body);font-weight:600;font-size:var(--fs-14);line-height:1; padding:11px 18px;border-radius:var(--r-pill); border:1px solid transparent;white-space:nowrap; transition:background var(--t-base),box-shadow var(--t-base),border-color var(--t-base),transform var(--t-fast),color var(--t-base); } .btn svg{width:16px;height:16px;flex:0 0 auto} .btn:active{transform:scale(.97)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none} .btn--primary{background:var(--violet);color:#fff;box-shadow:var(--sh-1)} .btn--primary:hover{background:var(--violet-700);box-shadow:var(--sh-violet-sm)} .btn--primary:focus-visible{box-shadow:var(--focus-ring),var(--sh-violet-sm);outline:none} .btn--ghost{background:var(--white);color:var(--ink);border-color:var(--hairline)} .btn--ghost:hover{background:var(--chip);border-color:var(--hairline-strong)} .btn--ghost:focus-visible{box-shadow:var(--focus-ring);outline:none} .btn--subtle{background:transparent;color:var(--graphite)} .btn--subtle:hover{background:var(--chip);color:var(--ink)} .btn--danger{background:var(--danger);color:#fff} .btn--danger:hover{background:var(--danger-700)} .btn--danger-ghost{background:var(--white);color:var(--danger);border-color:var(--danger-100)} .btn--danger-ghost:hover{background:var(--danger-100)} .btn--amber{background:var(--amber);color:#3A2400} .btn--amber:hover{background:var(--amber-700);color:#fff} .btn--sm{padding:7px 13px;font-size:var(--fs-13);gap:6px} .btn--sm svg{width:14px;height:14px} .btn--lg{padding:14px 26px;font-size:var(--fs-16)} .btn--block{width:100%} .btn--icon{padding:0;width:40px;height:40px;border-radius:var(--r-md)} .btn--icon.btn--sm{width:34px;height:34px} /* square icon button (topbar sound/notif/user) */ .icon-btn{width:40px;height:40px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--ink);position:relative;transition:background var(--t-fast),border-color var(--t-fast)} .icon-btn:hover{background:var(--chip);border-color:var(--hairline-strong)} .icon-btn:focus-visible{box-shadow:var(--focus-ring);outline:none} .icon-btn svg{width:19px;height:19px} .icon-btn .ind{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px var(--paper)} .icon-btn[aria-pressed="true"]{background:var(--violet-100);border-color:transparent;color:var(--violet)} /* ============================================================================ 6 · CARD (single source — no nested cards) ============================================================================ */ .card{ background:var(--white);border:1px solid var(--hairline); border-radius:var(--r-lg);padding:var(--sp-6); box-shadow:var(--sh-1);position:relative; } .card--hover{transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-slow)} .card--hover:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--hairline-strong)} .card--flush{padding:0;overflow:hidden} .card--violet{background:linear-gradient(160deg,var(--violet) 0%,var(--violet-700) 100%);color:#fff;border-color:transparent} .card--violet h1,.card--violet h2,.card--violet h3,.card--violet h4{color:#fff} .card--amber{background:linear-gradient(160deg,var(--amber-050),var(--amber-100));border-color:rgba(255,157,46,.28)} .card--ink{background:var(--ink);color:#fff;border-color:transparent} .card--ink h1,.card--ink h2,.card--ink h3,.card--ink h4{color:#fff} .card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:var(--sp-4)} .card__title{font-size:var(--fs-16);font-weight:700;letter-spacing:-.01em} .card__sub{font-size:var(--fs-13);color:var(--graphite);margin-top:2px} .card--violet .card__sub,.card--ink .card__sub{color:rgba(255,255,255,.72)} /* small icon plate used inside cards / tiles */ .ic-plate{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto} .ic-plate svg{width:18px;height:18px} .ic-plate--violet{background:var(--violet-100);color:var(--violet)} .ic-plate--amber{background:var(--amber-100);color:var(--amber-700)} .ic-plate--wa{background:var(--wa-100);color:var(--wa)} .ic-plate--ink{background:rgba(255,255,255,.16);color:#fff} /* ============================================================================ 7 · STAT TILE (metric tiles — varied, never the hero-metric cliché row) ============================================================================ */ .stat-tile{background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease),border-color var(--t-slow)} .stat-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--hairline-strong)} .stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:10px} .stat-tile__label{font-size:var(--fs-13);font-weight:600;color:var(--graphite)} .stat-tile__val{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:12px;font-size:var(--fs-38)} .stat-tile__val.xl{font-size:var(--fs-48)} .stat-tile__val.lg{font-size:var(--fs-38)} .stat-tile__val.md{font-size:var(--fs-30)} .stat-tile__sub{font-size:var(--fs-13);color:var(--graphite);margin-top:6px} .stat-tile--violet{background:linear-gradient(160deg,var(--violet),var(--violet-700));color:#fff;border-color:transparent} .stat-tile--violet .stat-tile__label{color:rgba(255,255,255,.8)} .stat-tile--violet .stat-tile__val{color:#fff} /* delta chip */ .delta{margin-top:8px;font-size:var(--fs-13);font-weight:600;display:inline-flex;align-items:center;gap:5px;align-self:flex-start} .delta svg{width:13px;height:13px} .delta--up{color:var(--success)} .delta--down{color:var(--danger)} .delta--flat{color:var(--graphite)} .delta--on-violet{color:#fff;background:rgba(255,255,255,.18);padding:4px 9px;border-radius:var(--r-pill)} /* ============================================================================ 8 · FORM CONTROLS (.input .select .textarea .label .form-row + states) ============================================================================ */ .label{display:block;font-size:var(--fs-13);font-weight:600;color:var(--ink-2);margin-bottom:7px} .label--upper{font-size:var(--fs-11);letter-spacing:.07em;text-transform:uppercase;color:var(--graphite);font-weight:700} .label .req{color:var(--violet);margin-left:2px} .input,.textarea,.select{ /* P3: borde de reposo un paso menos tenue que --hairline (.10) para que el campo se lea como editable; hover sigue subiendo a --hairline-strong (.16), así el delta de hover se conserva. Scope solo a controles de form, no al token global. */ width:100%;background:var(--white);border:1px solid rgba(20,18,30,.14); border-radius:var(--r-md);color:var(--ink);font-size:var(--fs-14); padding:11px 14px;line-height:1.4; transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast); outline:none; } .input::placeholder,.textarea::placeholder{color:var(--graphite)} /* P3: placeholders un paso más legibles (graphite, no graphite-2) — sin volverse texto real. Cubre el compose del chat y cualquier input/textarea suelto que no use .input. */ input::placeholder,textarea::placeholder{color:var(--graphite)} .input:hover,.textarea:hover,.select:hover{border-color:var(--hairline-strong)} .input:focus,.textarea:focus,.select:focus{border-color:var(--violet);box-shadow:var(--focus-ring)} .input:disabled,.textarea:disabled,.select:disabled{background:var(--chip);color:var(--graphite-2);cursor:not-allowed} .input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-100)} .textarea{resize:vertical;min-height:96px} .select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B5766' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px} /* input with leading icon */ .input-wrap{position:relative;display:flex;align-items:center} .input-wrap svg.lead{position:absolute;left:13px;color:var(--graphite-2);pointer-events:none;width:17px;height:17px} .input-wrap .input{padding-left:38px} .form-row{margin-bottom:var(--sp-4)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)} .field-hint{font-size:var(--fs-12);color:var(--graphite);margin-top:6px} .field-error{font-size:var(--fs-12);color:var(--danger);margin-top:6px;display:flex;align-items:center;gap:5px} /* checkbox / radio / switch */ .switch{position:relative;display:inline-flex;align-items:center;cursor:pointer} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .track{width:42px;height:24px;border-radius:var(--r-pill);background:var(--hairline-strong);transition:background var(--t-base);position:relative} .switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--t-base) var(--ease)} .switch input:checked + .track{background:var(--violet)} .switch input:checked + .track::after{transform:translateX(18px)} .switch input:focus-visible + .track{box-shadow:var(--focus-ring)} /* ============================================================================ 9 · TABLE (responsive → cards via data-label on mobile) ============================================================================ */ .table-wrap{background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)} .table{width:100%;border-collapse:collapse;font-size:var(--fs-14)} .table thead th{ text-align:left;font-size:var(--fs-12);font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:var(--graphite);padding:13px 18px;background:var(--panel);border-bottom:1px solid var(--hairline);white-space:nowrap; } .table tbody td{padding:14px 18px;border-bottom:1px solid var(--hairline);color:var(--ink-2);vertical-align:middle} .table tbody tr{transition:background var(--t-fast)} .table tbody tr:hover{background:var(--violet-050)} .table tbody tr:last-child td{border-bottom:none} .table .t-num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .table .t-right{text-align:right} .table .t-strong{font-weight:700;color:var(--ink)} @media (max-width:768px){ .table thead{display:none} .table,.table tbody,.table tr,.table td{display:block;width:100%} .table tbody tr{border:1px solid var(--hairline);border-radius:var(--r-md);margin:10px;padding:6px 4px;background:var(--white)} .table-wrap{border:none;background:transparent;box-shadow:none;overflow:visible} .table tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--hairline);padding:11px 16px;text-align:right} .table tbody tr td:last-child{border-bottom:none} .table tbody td::before{content:attr(data-label);font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--graphite);text-align:left;flex:0 0 auto} .table .t-num,.table .t-right{text-align:right} } /* ============================================================================ 10 · BADGES / CHIPS / TAGS / PILLS (+ channel tags wa/ig/fb) ============================================================================ */ .badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--violet);color:#fff;font-size:var(--fs-11);font-weight:700;font-variant-numeric:tabular-nums} .badge--amber{background:var(--amber);color:#3A2400} .badge--danger{background:var(--danger);color:#fff} .badge--neutral{background:var(--chip);color:var(--graphite)} .badge--dot{min-width:8px;width:8px;height:8px;padding:0} /* status badge (text) */ .tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);font-weight:700;padding:3px 10px;border-radius:var(--r-pill);letter-spacing:.01em} .tag svg{width:12px;height:12px} .tag--violet{background:var(--violet-100);color:var(--violet)} .tag--amber{background:var(--amber-100);color:var(--amber-700)} .tag--success{background:var(--success-100);color:var(--success)} .tag--danger{background:var(--danger-100);color:var(--danger-700)} .tag--neutral{background:var(--chip);color:var(--graphite)} .tag--hot{background:var(--amber-100);color:var(--amber-700)} /* channel tags */ .tag--wa{background:var(--wa-100);color:var(--wa)} .tag--ig{background:var(--ig-100);color:var(--ig)} .tag--fb{background:var(--fb-100);color:var(--fb)} /* interactive chip (filters / segmented options) */ .chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:7px 14px;border-radius:var(--r-pill);font-size:var(--fs-13);font-weight:600;color:var(--graphite);background:var(--chip);border:1px solid transparent;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)} .chip:hover{background:var(--hairline)} .chip .chip__n{font-variant-numeric:tabular-nums;color:var(--violet)} .chip.on{background:var(--ink);color:#fff} .chip.on .chip__n{color:#fff} .chip--violet.on{background:var(--violet);color:#fff} /* pill (static label) */ .pill{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-13);font-weight:600;color:var(--graphite);background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:6px 14px} .pill--live{color:var(--ink)} .pill--live .live-dot{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(31,168,85,.15);animation:pulseDot 2.6s var(--ease) infinite} @keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(31,168,85,.15)}50%{box-shadow:0 0 0 7px rgba(31,168,85,.04)}} /* ============================================================================ 11 · TABS / SEGMENTED CONTROL ============================================================================ */ .segmented{display:inline-flex;background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px;gap:2px} .segmented button{padding:7px 15px;border-radius:var(--r-pill);font-size:var(--fs-13);font-weight:600;color:var(--graphite);transition:background var(--t-fast),color var(--t-fast);white-space:nowrap} .segmented button:hover{color:var(--ink)} .segmented button.on{background:var(--violet);color:#fff} /* underline tabs (scrollable) */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--hairline);overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs button{position:relative;padding:11px 14px;font-size:var(--fs-14);font-weight:600;color:var(--graphite);white-space:nowrap;transition:color var(--t-fast)} .tabs button:hover{color:var(--ink)} .tabs button.on{color:var(--violet)} .tabs button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--violet)} .tabs button .tabs__n{font-size:var(--fs-12);color:var(--violet);font-variant-numeric:tabular-nums;margin-left:5px} /* ============================================================================ 12 · AVATARS ============================================================================ */ .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--chip)} .avatar--sm{width:32px;height:32px} .avatar--lg{width:56px;height:56px} .avatar--xl{width:72px;height:72px} .avatar--initials{display:grid;place-items:center;color:#fff;font-weight:700;font-size:var(--fs-14);background:linear-gradient(135deg,var(--violet),var(--violet-700))} /* avatar with channel ring + channel badge */ .avatar-ring{position:relative;flex:0 0 auto;width:46px;height:46px} .avatar-ring .ph{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--white);box-shadow:0 0 0 2px var(--ring,var(--hairline))} .avatar-ring .ch{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--white)} .avatar-ring .ch svg{width:10px;height:10px} /* ============================================================================ 13 · MODAL + OVERLAY ============================================================================ */ .overlay{position:fixed;inset:0;z-index:100;background:rgba(22,19,31,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;animation:overlayIn var(--t-base) var(--ease) forwards} @keyframes overlayIn{to{opacity:1}} .modal{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-4);width:100%;max-width:520px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;transform-origin:center;transform:translateY(10px) scale(.97);opacity:0;animation:modalIn var(--t-slow) var(--ease-out-quint) forwards} @keyframes modalIn{to{transform:none;opacity:1}} .modal--lg{max-width:780px} .modal--sm{max-width:420px} .modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:var(--sp-6) var(--sp-6) var(--sp-4)} .modal__head h2{font-size:var(--fs-21);font-weight:800;letter-spacing:-.02em} .modal__head p{font-size:var(--fs-13);color:var(--graphite);margin-top:3px} .modal__close{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--graphite);transition:background var(--t-fast),color var(--t-fast);flex:0 0 auto} .modal__close:hover{background:var(--chip);color:var(--ink)} .modal__body{padding:0 var(--sp-6);overflow-y:auto;flex:1} .modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:var(--sp-5) var(--sp-6) var(--sp-6);margin-top:var(--sp-4)} /* ============================================================================ 14 · SHEET (mobile bottom-sheet) ============================================================================ */ .sheet-overlay{position:fixed;inset:0;z-index:100;background:rgba(22,19,31,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-end;opacity:0;animation:overlayIn var(--t-base) var(--ease) forwards} .sheet{background:var(--white);border-radius:var(--r-2xl) var(--r-2xl) 0 0;width:100%;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-4);padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);animation:sheetIn var(--t-slow) var(--ease-drawer) forwards} @keyframes sheetIn{to{transform:none}} .sheet__grip{width:40px;height:4px;border-radius:99px;background:var(--hairline-strong);margin:10px auto 4px} .sheet__head{padding:8px var(--sp-6) var(--sp-4);display:flex;align-items:center;justify-content:space-between} .sheet__head h3{font-size:var(--fs-18);font-weight:800} .sheet__body{padding:0 var(--sp-6) var(--sp-6);overflow-y:auto} .sheet__item{display:flex;align-items:center;gap:13px;padding:14px 4px;font-size:var(--fs-15);font-weight:600;color:var(--ink);width:100%;text-align:left;border-bottom:1px solid var(--hairline)} .sheet__item:last-child{border-bottom:none} .sheet__item svg{width:20px;height:20px;color:var(--graphite);flex:0 0 auto} .sheet__item.danger{color:var(--danger)} .sheet__item.danger svg{color:var(--danger)} /* ============================================================================ 15 · CHAT BUBBLES (in / out) + AI suggestion strip + compose ============================================================================ */ .bubble-row{max-width:72%;display:flex;flex-direction:column;gap:3px} .bubble{padding:11px 15px;font-size:var(--fs-14);line-height:1.46;word-wrap:break-word;position:relative} .bubble-row.in{align-self:flex-start} .bubble-row.in .bubble{background:var(--bubble-in);color:var(--ink);border-radius:18px 18px 18px 5px} .bubble-row.out{align-self:flex-end;align-items:flex-end} .bubble-row.out .bubble{background:var(--violet);color:#fff;border-radius:18px 18px 5px 18px;box-shadow:0 2px 8px rgba(110,59,255,.22)} .bubble-meta{font-size:var(--fs-11);color:var(--graphite);padding:0 6px;display:flex;align-items:center;gap:5px} .bubble-row.out .bubble-meta svg{color:var(--violet);width:14px;height:14px} .day-divider{align-self:center;font-size:var(--fs-12);font-weight:600;color:var(--graphite);background:var(--white);border:1px solid var(--hairline);padding:5px 14px;border-radius:var(--r-pill)} /* AI suggestion strip — the "Venfly IA sugiere" component */ .ai-strip{background:linear-gradient(135deg,var(--violet-050),var(--white));border:1px solid var(--violet-100);border-radius:var(--r-md);padding:13px 15px} .ai-strip__head{display:flex;align-items:center;gap:8px;margin-bottom:9px} .ai-strip__tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:700;color:var(--violet)} .ai-strip__tag svg{width:14px;height:14px} .ai-strip__by{margin-left:auto;font-size:var(--fs-11);color:var(--graphite)} .ai-strip__text{font-size:var(--fs-14);color:var(--ink);line-height:1.5;margin-bottom:11px} .ai-strip__acts{display:flex;gap:9px;flex-wrap:wrap} /* compose pill */ .compose-pill{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:7px 8px 7px 16px;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)} .compose-pill:focus-within{border-color:var(--violet);box-shadow:var(--focus-ring);background:var(--white)} .compose-pill input{flex:1;border:none;background:none;outline:none;font-size:var(--fs-15);color:var(--ink)} .compose-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--graphite);flex:0 0 auto;transition:background var(--t-fast),color var(--t-fast)} .compose-btn:hover{background:var(--chip);color:var(--ink)} .compose-btn svg{width:20px;height:20px} .compose-btn.send{background:var(--violet);color:#fff} .compose-btn.send:hover{background:var(--violet-700)} .compose-btn.send:active{transform:scale(.94)} /* ============================================================================ 16 · KANBAN (.kanban-col / .kanban-card) ============================================================================ */ .kanban{display:flex;gap:var(--sp-4);overflow-x:auto;padding-bottom:6px;align-items:flex-start} .kanban-col{flex:0 0 288px;background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);display:flex;flex-direction:column;max-height:100%} .kanban-col__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px} .kanban-col__head .name{font-size:var(--fs-14);font-weight:700;display:flex;align-items:center;gap:8px} .kanban-col__head .name .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .kanban-col__head .sum{font-size:var(--fs-12);font-weight:700;color:var(--graphite);font-variant-numeric:tabular-nums} .kanban-col__body{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto} .kanban-card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-md);padding:13px;box-shadow:var(--sh-1);cursor:grab;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)} .kanban-card:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--hairline-strong)} .kanban-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .kanban-card__name{font-size:var(--fs-14);font-weight:700} .kanban-card__val{font-family:var(--mono);font-weight:600;font-size:var(--fs-14);color:var(--violet)} .kanban-card__foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:var(--fs-12);color:var(--graphite)} /* ============================================================================ 17 · EMPTY STATE (network motif, teaches the interface) ============================================================================ */ .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-12) var(--sp-6);flex:1} .empty-state__art{width:180px;height:140px;margin-bottom:var(--sp-2);color:var(--violet)} .empty-state h2{font-size:var(--fs-24);font-weight:800;letter-spacing:-.03em;margin-bottom:8px} .empty-state p{font-size:var(--fs-15);color:var(--graphite);max-width:36ch;line-height:1.5} .empty-state__cta{margin-top:var(--sp-6)} /* constellation node pulse (for empty-state / hero art) */ .node-pulse{animation:nodeP 3s var(--ease) infinite} .node-pulse-2{animation:nodeP 3s var(--ease) .8s infinite} .node-pulse-3{animation:nodeP 3s var(--ease) 1.6s infinite} @keyframes nodeP{0%,100%{opacity:.5}50%{opacity:1}} /* ============================================================================ 18 · SKELETON (shimmer, not spinners) ============================================================================ */ .skeleton{background:linear-gradient(100deg,var(--shimmer-a) 30%,var(--shimmer-b) 50%,var(--shimmer-a) 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-sm)} @keyframes shimmer{to{background-position:-200% 0}} .skeleton--text{height:11px;border-radius:6px} .skeleton--circle{border-radius:50%} .skeleton-row{display:flex;gap:13px;padding:13px 12px;align-items:center} .skeleton-row .skeleton--circle{width:46px;height:46px;flex:0 0 auto} .skeleton-row .lines{flex:1;display:flex;flex-direction:column;gap:8px} /* ============================================================================ 19 · TOAST ============================================================================ */ .toast-stack{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:380px} .toast{display:flex;align-items:flex-start;gap:11px;background:var(--ink);color:#fff;border-radius:var(--r-md);padding:13px 16px;box-shadow:var(--sh-3);font-size:var(--fs-14);transform:translateY(10px);opacity:0;animation:toastIn var(--t-slow) var(--ease) forwards} @keyframes toastIn{to{transform:none;opacity:1}} .toast__ic{width:20px;height:20px;flex:0 0 auto;margin-top:1px} .toast--success .toast__ic{color:#5BE39A} .toast--danger .toast__ic{color:#FF8A92} .toast--info .toast__ic{color:var(--violet-300)} .toast b{font-weight:700;display:block;margin-bottom:1px} .toast small{color:rgba(255,255,255,.7);font-size:var(--fs-13)} @media (max-width:560px){.toast-stack{left:14px;right:14px;bottom:calc(var(--tabbar-h) + 14px);max-width:none}} /* ============================================================================ 20 · CHART HELPERS (donut · bars · funnel · sparkline) ============================================================================ */ /* donut */ .donut-wrap{display:flex;align-items:center;gap:26px} .donut{flex:0 0 auto;position:relative;width:144px;height:144px} .donut svg{transform:rotate(-90deg)} .donut__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center} .donut__center b{font-family:var(--display);font-size:var(--fs-24);font-weight:800;line-height:1} .donut__center small{font-size:var(--fs-11);color:var(--graphite);font-weight:600} .donut-legend{flex:1;display:flex;flex-direction:column;gap:13px;min-width:0} .donut-legend .row{display:flex;align-items:center;gap:11px} .donut-legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto} .donut-legend .nm{font-size:var(--fs-14);font-weight:600;flex:1} .donut-legend .pct{font-family:var(--display);font-weight:800;font-size:var(--fs-16);font-variant-numeric:tabular-nums} /* bar / funnel rows */ .bars{display:flex;flex-direction:column;gap:11px} .bar-row{display:grid;grid-template-columns:88px 1fr 36px;align-items:center;gap:12px} .bar-row .name{font-size:var(--fs-14);font-weight:600} .bar-track{height:30px;background:var(--violet-050);border-radius:9px;overflow:hidden;position:relative} .bar-fill{height:100%;border-radius:9px;background:linear-gradient(90deg,var(--violet),var(--violet-300));transition:width 1s var(--ease)} .bar-fill--amber{background:linear-gradient(90deg,var(--amber),#FFB45E)} .bar-row .n{font-family:var(--display);font-weight:800;font-size:var(--fs-16);text-align:right;font-variant-numeric:tabular-nums} /* chart legend + axis */ .chart-legend{display:flex;gap:16px} .chart-legend span{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-12);font-weight:600;color:var(--graphite)} .chart-legend i{width:11px;height:11px;border-radius:3px;flex:0 0 auto} .chart-svg{width:100%;height:200px;overflow:visible} .chart-x{display:flex;justify-content:space-between;margin-top:8px;font-size:var(--fs-12);color:var(--graphite);font-weight:500} .spark{width:100%;height:90px} /* mini pipeline columns (for landing/dashboard tiles) */ .pipe-mini{display:flex;align-items:flex-end;gap:9px;height:74px} .pipe-mini .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px} .pipe-mini .bar{width:100%;border-radius:7px 7px 4px 4px;background:var(--violet-100)} .pipe-mini .col.peak .bar{background:var(--violet)} .pipe-mini small{font-size:var(--fs-11);color:var(--graphite);font-weight:600} /* ============================================================================ 21 · BENTO GRID (asymmetric — for dashboard / landing) ============================================================================ */ .bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(96px,auto);gap:var(--sp-5)} .span-3{grid-column:span 3} .span-4{grid-column:span 4} .span-5{grid-column:span 5} .span-6{grid-column:span 6} .span-7{grid-column:span 7} .span-8{grid-column:span 8} .span-12{grid-column:span 12} .row-2{grid-row:span 2} /* ============================================================================ 22 · UTILITIES ============================================================================ */ .flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .wrap{flex-wrap:wrap} .mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)} .text-muted{color:var(--graphite)} .text-violet{color:var(--violet)} .text-amber{color:var(--amber-700)} .fw-700{font-weight:700} .fw-800{font-weight:800} /* section header (content blocks) */ .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:var(--sp-6)} .section-head h2{font-size:var(--fs-24);font-weight:800;letter-spacing:-.03em} .section-head p{font-size:var(--fs-14);color:var(--graphite);margin-top:3px} /* ============================================================================ 23 · REVEAL ANIMATIONS (staggered entrance — REDUCED-MOTION SAFE) ============================================================================ */ .reveal{opacity:0;transform:translateY(16px);animation:revealRise .6s var(--ease) forwards} .reveal-stagger > *{opacity:0;transform:translateY(16px);animation:revealRise .55s var(--ease) forwards} @keyframes revealRise{to{opacity:1;transform:none}} .d1{animation-delay:.04s}.d2{animation-delay:.10s}.d3{animation-delay:.16s} .d4{animation-delay:.22s}.d5{animation-delay:.28s}.d6{animation-delay:.34s} .d7{animation-delay:.40s}.d8{animation-delay:.46s} .reveal-stagger > *:nth-child(1){animation-delay:.04s} .reveal-stagger > *:nth-child(2){animation-delay:.10s} .reveal-stagger > *:nth-child(3){animation-delay:.16s} .reveal-stagger > *:nth-child(4){animation-delay:.22s} .reveal-stagger > *:nth-child(5){animation-delay:.28s} .reveal-stagger > *:nth-child(6){animation-delay:.34s} .reveal-stagger > *:nth-child(7){animation-delay:.40s} .reveal-stagger > *:nth-child(8){animation-delay:.46s} /* ============================================================================ 24 · RESPONSIVE SHELL (sidebar → tabbar at ≤768px) ============================================================================ */ @media (max-width:1080px){ .topbar-search{width:200px} } @media (max-width:768px){ :root{--topbar-h:60px} .app,.app.app--collapsed{grid-template-columns:1fr} .sidebar{display:none} .topbar{padding:0 var(--sp-4)} .topbar-search{display:none} .menu-btn{display:none} /* P0: hamburguesa muerta fuera en móvil; la nav va por la tab bar + "Más" */ .topbar__title p{display:none} /* P0: oculta subtítulo en móvil para que no choque con título/acciones a 390px */ /* P0: el título debe poder encogerse y truncar — sin min-width:0 el ellipsis nunca dispara y el CTA a tamaño completo se le encima. lead crece, title trunca, actions no se aplastan. */ .topbar__lead{min-width:0;flex:1} .topbar__title{min-width:0;overflow:hidden} .topbar__title h1{max-width:100%} .topbar__actions{flex:0 0 auto} .content{padding:var(--sp-5) var(--sp-4) calc(var(--tabbar-h) + var(--sp-6))} /* bento collapses to 2-up then accepts per-screen overrides */ .bento{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)} .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 2} .row-2{grid-row:auto} /* MOBILE TABBAR (5 items, 44px+ targets) */ .mobile-tabbar{ display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60; background:color-mix(in srgb, var(--white) 95%, transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--hairline); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; } .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border-radius:var(--r-md);color:var(--graphite);font-size:var(--fs-11);font-weight:600;position:relative} .tab svg{width:22px;height:22px;stroke-width:1.8} /* Iconos del tab-bar recoloreables (mismos data-URI que el sidebar) */ .tab .tab-ic{width:24px;height:24px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:transform var(--t-base) var(--ease-out-quint)} .tab.on .tab-ic{transform:scale(1.05)} .tab.on{color:var(--violet)} .tab.on svg{stroke-width:2} .tab .badge{position:absolute;top:2px;right:calc(50% - 22px)} /* ── P0: anti-zoom-on-focus en iOS ── iOS hace zoom cuando un campo de texto enfocado mide <16px. Forzamos 16px en todos los campos de TEXTO a ≤768px. No tocamos checkbox/radio/range/color/file (no disparan zoom y no queremos romper su layout). Cubre .input/.select/.textarea porque son estos mismos elementos. */ .topbar-search input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select{font-size:16px} } /* ── P0: a ≤420px (iPhone angosto) el título nunca debe chocar con las acciones ── Liberamos espacio: ocultamos los íconos secundarios (sonido/notificaciones) del topbar y colapsamos el CTA primario del topbar a solo-ícono. Como el texto del CTA es un nodo de texto suelto (no un ), lo ocultamos con font-size:0 — el SVG conserva su tamaño porque .btn svg lleva width/height fijos. */ @media (max-width:420px){ .topbar__actions .icon-btn{display:none} .topbar__actions .btn--primary{ font-size:0; width:40px;height:40px;min-width:40px; padding:0;gap:0;border-radius:var(--r-md); } .topbar__actions .btn--primary svg{margin:0} } @media (max-width:560px){ .form-grid{grid-template-columns:1fr} .bento{grid-template-columns:1fr} .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:span 1} .donut-wrap{flex-direction:column;align-items:flex-start} .donut-legend{width:100%} } /* ============================================================================ 24b · TOUCH TARGETS (P1 — ≥44px en controles de toque) Chips, tabs y segmentos quedaban en 31-36px. En punteros gruesos (dedo) los subimos a 44px de alto mínimo, centrando el contenido. Solo (pointer:coarse): el desktop con mouse conserva su densidad compacta. Sin cambios de layout animados, reduced-motion safe. ============================================================================ */ @media (pointer:coarse){ /* Repetimos la clase para subir especificidad por encima de overrides de página que viven también en (pointer:coarse) — ej. dashboard .gallery__cats .chip{min-height:40px} (0-2-0) y pipeline .segmented button{min-height:40px} (0-1-1). Sin ancestro porque algunos widgets (la galería del dashboard) viven fuera de .app. El mínimo táctil del sistema es un contrato global; 44px es el piso de Apple HIG. */ .chip.chip.chip, .tabs.tabs button, .segmented.segmented button, .pill.pill.pill{min-height:44px;display:inline-flex;align-items:center} /* el contenedor del segmented crece con sus botones */ .segmented.segmented{align-items:stretch} .segmented.segmented button{justify-content:center} /* P2: controles que la regla anterior no cubría (viven en