/* GENERATED by tools/build_css.sh from tokens.css + base.css + components.css — edit those, not this. */ /* =========================================================================== tokens.css — the ONLY file allowed to hold literal colours, sizes, radii, shadows and durations. Everything else references these by name. Colour is OKLCH: one warm neutral ramp (hue 70, chroma ≤ .012), one accent ramp on the existing brand hue (154), four semantic families, twelve branch swatches at one lightness so any two of them sit well together. Every text/surface pair below is measured in DESIGN_SYSTEM.md. =========================================================================== */ :root { color-scheme: light; /* ---- type ---------------------------------------------------------- */ --font-sans: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Fraunces", Georgia, "Times New Roman", serif; /* public page only */ --t-display-size: 2.75rem; --t-display-lh: 1.05; --t-display-w: 700; --t-display-ls: -0.022em; --t-title1-size: 2.125rem; --t-title1-lh: 1.10; --t-title1-w: 700; --t-title1-ls: -0.020em; --t-title2-size: 1.75rem; --t-title2-lh: 1.15; --t-title2-w: 600; --t-title2-ls: -0.016em; --t-title3-size: 1.375rem; --t-title3-lh: 1.25; --t-title3-w: 600; --t-title3-ls: -0.012em; --t-headline-size: 1.0625rem; --t-headline-lh: 1.35; --t-headline-w: 600; --t-headline-ls: -0.006em; --t-body-size: 1rem; --t-body-lh: 1.55; --t-body-w: 400; --t-body-ls: 0; --t-subhead-size: 0.9375rem; --t-subhead-lh: 1.45; --t-subhead-w: 400; --t-subhead-ls: 0; --t-footnote-size: 0.8125rem; --t-footnote-lh: 1.40; --t-footnote-w: 400; --t-footnote-ls: 0.004em; --t-caption-size: 0.75rem; --t-caption-lh: 1.35; --t-caption-w: 500; --t-caption-ls: 0.010em; --measure: 68ch; /* prose line length cap */ /* ---- warm neutrals (hue 70) ---------------------------------------- */ --surface-canvas: oklch(98.4% 0.005 70); --surface-raised: oklch(99.6% 0.002 70); --surface-sunken: oklch(96.2% 0.006 70); --surface-overlay: oklch(99.6% 0.002 70 / 0.86); /* + backdrop-filter */ --surface-nav: oklch(21% 0.012 70); /* the one dark surface in light mode */ --surface-nav-hover: oklch(100% 0 0 / 0.06); --surface-nav-active: oklch(100% 0 0 / 0.10); --text-1: oklch(24% 0.012 70); /* 15.8:1 on canvas */ --text-2: oklch(46% 0.010 70); /* 6.8:1 */ --text-3: oklch(54% 0.008 70); /* 4.8:1 — the floor for body text */ --text-4: oklch(72% 0.007 70); /* 2.4:1 — placeholders, disabled; never for content */ --text-on-nav: oklch(93% 0.006 70); --text-on-nav-2: oklch(72% 0.008 70); --hairline: oklch(24% 0.012 70 / 0.10); /* dividers: decorative, not a boundary */ --hairline-2: oklch(24% 0.012 70 / 0.16); /* card edges when a shadow is not earned */ --border-input: oklch(62% 0.008 70); /* 3.5:1 — a boundary the user must find */ /* ---- accent: brand hue 154, lightness stops fixed ------------------ */ --accent-50: oklch(97.5% 0.038 154); --accent-100: oklch(94.0% 0.077 154); --accent-200: oklch(89.0% 0.116 154); --accent-300: oklch(82.0% 0.146 154); --accent-400: oklch(74.0% 0.154 154); --accent-500: oklch(66.0% 0.154 154); /* = the historical #0ea15a, identity only */ --accent-600: oklch(57.0% 0.136 154); --accent-700: oklch(49.0% 0.122 154); /* 5.9:1 with white — the working accent */ --accent-800: oklch(41.0% 0.102 154); --accent-900: oklch(34.0% 0.084 154); --accent-950: oklch(26.0% 0.066 154); --accent: var(--accent-700); /* fills, active nav, primary actions */ --accent-hover: var(--accent-800); --accent-fg: oklch(99.6% 0.002 70); /* text on --accent */ --accent-text: var(--accent-700); /* accent used AS text: 5.8:1 on raised */ --accent-subtle: var(--accent-100); /* tinted buttons, selected rows */ --accent-subtle-fg: var(--accent-900); --accent-ring: var(--accent-700); /* focus ring: ≥3:1 on every surface */ /* ---- semantic (text / solid / subtle) ------------------------------ */ --success-text: oklch(45% 0.14 150); --success-solid: oklch(50% 0.15 150); --success-subtle: oklch(95% 0.03 150); --warning-text: oklch(45% 0.14 70); --warning-solid: oklch(50% 0.15 70); --warning-subtle: oklch(95% 0.03 70); --danger-text: oklch(45% 0.14 25); --danger-solid: oklch(50% 0.15 25); --danger-subtle: oklch(95% 0.03 25); --info-text: oklch(45% 0.14 250); --info-solid: oklch(50% 0.15 250); --info-subtle: oklch(95% 0.03 250); /* Chart series. Categorical, not semantic: they only have to stay apart from each other and clear 3:1 against the card they sit on, which is why none of them is a hairline grey. -1 green, -2 amber, -3 the neutral for "everything else", -4 blue, -5 magenta, -6 teal. */ --chart-1: oklch(58% 0.150 154); --chart-2: oklch(58% 0.150 65); --chart-3: oklch(56% 0.015 70); --chart-4: oklch(55% 0.160 255); --chart-5: oklch(56% 0.170 330); --chart-6: oklch(58% 0.110 195); --on-solid: oklch(99.6% 0.002 70); /* ---- branch palette: one lightness, one chroma, twelve hues --------- */ --branch-1: oklch(72% 0.12 15); --branch-2: oklch(72% 0.12 45); --branch-3: oklch(72% 0.12 75); --branch-4: oklch(72% 0.12 105); --branch-5: oklch(72% 0.12 135); --branch-6: oklch(72% 0.12 165); --branch-7: oklch(72% 0.12 195); --branch-8: oklch(72% 0.12 225); --branch-9: oklch(72% 0.12 255); --branch-10: oklch(72% 0.12 285); --branch-11: oklch(72% 0.12 315); --branch-12: oklch(72% 0.12 345); --branch-fg: var(--text-1); /* deterministic: every swatch is L 72, so dark text always reads */ --branch-tint-mix: 82%; /* how much surface to mix into a branch fill */ /* ---- space (4px base, 8px rhythm) ---------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ---- radius --------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px; /* ---- elevation: four levels, tinted with the neutral hue ----------- */ --shadow-flat: none; --shadow-raised: 0 1px 2px oklch(24% 0.012 70 / 0.06), 0 4px 12px -4px oklch(24% 0.012 70 / 0.08); --shadow-overlay: 0 2px 6px oklch(24% 0.012 70 / 0.08), 0 12px 32px -8px oklch(24% 0.012 70 / 0.18); --shadow-modal: 0 4px 12px oklch(24% 0.012 70 / 0.10), 0 32px 80px -16px oklch(24% 0.012 70 / 0.28); /* ---- motion --------------------------------------------------------- */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-page: 420ms; --ease-standard: cubic-bezier(0.32, 0.72, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---- sizes ---------------------------------------------------------- */ --control-sm: 2rem; --control-md: 2.75rem; --control-lg: 3rem; /* md = 44px: the touch floor */ --icon-16: 1rem; --icon-20: 1.25rem; --icon-24: 1.5rem; --sidebar-w: 15.5rem; --sidebar-rail: 4.25rem; --content-max: 70rem; /* ---- z ---------------------------------------------------------------- */ --z-nav: 40; --z-overlay: 55; --z-modal: 60; --z-toast: 70; } /* Dark is a designed counterpart, not an inversion: surfaces lift by lightness, chroma rises a little, text backs off from full contrast so it does not vibrate. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-canvas: oklch(17% 0.010 70); --surface-raised: oklch(21% 0.010 70); --surface-sunken: oklch(14% 0.010 70); --surface-overlay: oklch(21% 0.010 70 / 0.86); --surface-nav: oklch(14% 0.010 70); --surface-nav-hover: oklch(100% 0 0 / 0.05); --surface-nav-active: oklch(100% 0 0 / 0.09); --text-1: oklch(93% 0.006 70); --text-2: oklch(74% 0.008 70); --text-3: oklch(62% 0.008 70); --text-4: oklch(46% 0.008 70); --text-on-nav: oklch(93% 0.006 70); --text-on-nav-2: oklch(66% 0.008 70); --hairline: oklch(93% 0.006 70 / 0.10); --hairline-2: oklch(93% 0.006 70 / 0.16); --border-input: oklch(52% 0.008 70); --accent: var(--accent-400); --accent-hover: var(--accent-300); --accent-fg: oklch(17% 0.010 70); --accent-text: var(--accent-300); --accent-subtle: oklch(30% 0.06 154); --accent-subtle-fg: var(--accent-200); --accent-ring: var(--accent-300); --success-text: oklch(78% 0.14 150); --success-subtle: oklch(26% 0.05 150); --warning-text: oklch(80% 0.13 70); --warning-subtle: oklch(26% 0.05 70); --danger-text: oklch(78% 0.13 25); --danger-subtle: oklch(26% 0.05 25); --info-text: oklch(78% 0.12 250); --info-subtle: oklch(26% 0.05 250); --chart-1: oklch(74% 0.160 154); --chart-2: oklch(78% 0.150 70); --chart-3: oklch(68% 0.015 70); --chart-4: oklch(72% 0.140 255); --chart-5: oklch(74% 0.160 330); --chart-6: oklch(76% 0.110 195); --branch-fg: oklch(17% 0.010 70); --branch-tint-mix: 78%; --shadow-raised: 0 1px 2px oklch(0% 0 0 / 0.30), 0 4px 12px -4px oklch(0% 0 0 / 0.35); --shadow-overlay: 0 2px 6px oklch(0% 0 0 / 0.35), 0 12px 32px -8px oklch(0% 0 0 / 0.55); --shadow-modal: 0 4px 12px oklch(0% 0 0 / 0.40), 0 32px 80px -16px oklch(0% 0 0 / 0.70); } } :root[data-theme="dark"] { color-scheme: dark; --surface-canvas: oklch(17% 0.010 70); --surface-raised: oklch(21% 0.010 70); --surface-sunken: oklch(14% 0.010 70); --surface-overlay: oklch(21% 0.010 70 / 0.86); --surface-nav: oklch(14% 0.010 70); --surface-nav-hover: oklch(100% 0 0 / 0.05); --surface-nav-active: oklch(100% 0 0 / 0.09); --text-1: oklch(93% 0.006 70); --text-2: oklch(74% 0.008 70); --text-3: oklch(62% 0.008 70); --text-4: oklch(46% 0.008 70); --text-on-nav: oklch(93% 0.006 70); --text-on-nav-2: oklch(66% 0.008 70); --hairline: oklch(93% 0.006 70 / 0.10); --hairline-2: oklch(93% 0.006 70 / 0.16); --border-input: oklch(52% 0.008 70); --accent: var(--accent-400); --accent-hover: var(--accent-300); --accent-fg: oklch(17% 0.010 70); --accent-text: var(--accent-300); --accent-subtle: oklch(30% 0.06 154); --accent-subtle-fg: var(--accent-200); --accent-ring: var(--accent-300); --success-text: oklch(78% 0.14 150); --success-subtle: oklch(26% 0.05 150); --warning-text: oklch(80% 0.13 70); --warning-subtle: oklch(26% 0.05 70); --danger-text: oklch(78% 0.13 25); --danger-subtle: oklch(26% 0.05 25); --info-text: oklch(78% 0.12 250); --info-subtle: oklch(26% 0.05 250); --chart-1: oklch(74% 0.160 154); --chart-2: oklch(78% 0.150 70); --chart-3: oklch(68% 0.015 70); --chart-4: oklch(72% 0.140 255); --chart-5: oklch(74% 0.160 330); --chart-6: oklch(76% 0.110 195); --branch-fg: oklch(17% 0.010 70); --branch-tint-mix: 78%; --shadow-raised: 0 1px 2px oklch(0% 0 0 / 0.30), 0 4px 12px -4px oklch(0% 0 0 / 0.35); --shadow-overlay: 0 2px 6px oklch(0% 0 0 / 0.35), 0 12px 32px -8px oklch(0% 0 0 / 0.55); --shadow-modal: 0 4px 12px oklch(0% 0 0 / 0.40), 0 32px 80px -16px oklch(0% 0 0 / 0.70); } /* =========================================================================== base.css — reset, fonts, document defaults, type ramp, focus, motion preferences, accessibility utilities. No component here, no literal colour or size: everything comes from tokens.css. =========================================================================== */ /* ---- fonts: Figtree, self-hosted, split by script so a Spanish/English session downloads ~20 KB. Fallback is Arial with metric overrides so the swap does not reflow (values tuned against Figtree's vertical metrics). */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/static/fonts/figtree-roman-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/static/fonts/figtree-roman-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/static/fonts/figtree-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/static/fonts/figtree-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 103%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; } /* ---- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font: var(--t-body-w) var(--t-body-size) / var(--t-body-lh) var(--font-sans); letter-spacing: var(--t-body-ls); color: var(--text-1); background: var(--surface-canvas); -webkit-font-smoothing: antialiased; min-height: 100dvh; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: var(--accent-text); text-underline-offset: 0.15em; } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { font-weight: var(--t-headline-w); overflow-wrap: anywhere; } p, li, dd { overflow-wrap: anywhere; } [hidden] { display: none !important; } /* the single documented !important: `hidden` must win */ ::selection { background: var(--accent-200); color: var(--accent-950); } /* ---- type ramp: one class per role, the only sizes the app may use ------- */ .t-display { font-size: var(--t-display-size); line-height: var(--t-display-lh); font-weight: var(--t-display-w); letter-spacing: var(--t-display-ls); } .t-title-1 { font-size: var(--t-title1-size); line-height: var(--t-title1-lh); font-weight: var(--t-title1-w); letter-spacing: var(--t-title1-ls); } .t-title-2 { font-size: var(--t-title2-size); line-height: var(--t-title2-lh); font-weight: var(--t-title2-w); letter-spacing: var(--t-title2-ls); } .t-title-3 { font-size: var(--t-title3-size); line-height: var(--t-title3-lh); font-weight: var(--t-title3-w); letter-spacing: var(--t-title3-ls); } .t-headline { font-size: var(--t-headline-size); line-height: var(--t-headline-lh); font-weight: var(--t-headline-w); letter-spacing: var(--t-headline-ls); } .t-body { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--t-body-w); letter-spacing: var(--t-body-ls); } .t-subhead { font-size: var(--t-subhead-size); line-height: var(--t-subhead-lh); font-weight: var(--t-subhead-w); letter-spacing: var(--t-subhead-ls); } .t-footnote { font-size: var(--t-footnote-size); line-height: var(--t-footnote-lh); font-weight: var(--t-footnote-w); letter-spacing: var(--t-footnote-ls); } .t-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-weight: var(--t-caption-w); letter-spacing: var(--t-caption-ls); } .t-caption.upper { text-transform: uppercase; letter-spacing: 0.08em; } /* uppercase never at default tracking */ .t-2 { color: var(--text-2); } .t-3 { color: var(--text-3); } .num { font-variant-numeric: tabular-nums lining-nums; } /* every count, price, time, date */ .prose { max-width: var(--measure); } .strong { font-weight: 600; } /* ---- focus: one ring, drawn from a token, visible on every surface ---------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--radius-xs); } .on-nav :focus-visible { outline-color: var(--accent-300); } /* ---- icons: one family, one geometry, stroke scales with size --------------- */ .icon { display: inline-block; width: var(--icon-20); height: var(--icon-20); --icon-stroke: 1.6; stroke-width: var(--icon-stroke); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.2em; } /* inline-block, not the reset's block: an icon in a run of text must not break the line */ /* optical: sits on the cap height next to text */ .icon.sm { width: var(--icon-16); height: var(--icon-16); --icon-stroke: 1.5; } .icon.lg { width: var(--icon-24); height: var(--icon-24); --icon-stroke: 1.75; } /* ---- accessibility utilities ---------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -100%; z-index: var(--z-toast); padding: var(--space-2) var(--space-4); background: var(--surface-raised); color: var(--text-1); border-radius: var(--radius-sm); box-shadow: var(--shadow-overlay); } .skip-link:focus-visible { top: var(--space-4); } /* ---- motion preferences ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 80ms !important; scroll-behavior: auto !important; } /* the second documented !important block: a user preference must beat every component rule */ } @media (forced-colors: active) { .icon { forced-color-adjust: auto; } :focus-visible { outline: 2px solid Highlight; } } @media (prefers-contrast: more) { :root { --hairline: oklch(24% 0.012 70 / 0.24); --hairline-2: oklch(24% 0.012 70 / 0.34); --text-3: var(--text-2); } } /* =========================================================================== components.css — every primitive once, in CSS, driven by classes and custom properties. Part A is the new primitive set. Part B holds the screen components (the migration bridge it once was is gone): the class names the views use TODAY, restyled on tokens so nothing breaks while screens are moved to the primitives one by one (then Part B shrinks). No literal colour, size, radius or shadow lives here. =========================================================================== */ /* ============================ A · PRIMITIVES ============================= */ /* ---- buttons: filled / tinted / plain / danger · sm / md / lg ------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--t-subhead-size); line-height: 1; white-space: nowrap; text-decoration: none; /* 40 of these are : a download is still a button */ transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); } .btn, .btn.filled { background: var(--accent); color: var(--accent-fg); } .btn:hover, .btn.filled:hover { background: var(--accent-hover); } .btn.tinted { background: var(--accent-subtle); color: var(--accent-subtle-fg); } .btn.tinted:hover { background: color-mix(in oklab, var(--accent-subtle) 80%, var(--accent)); } .btn.plain { background: transparent; color: var(--accent-text); } .btn.plain:hover { background: var(--surface-sunken); } .btn.danger { background: transparent; color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--hairline-2); } .btn.danger:hover { background: var(--danger-subtle); } .btn.sm { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--t-footnote-size); border-radius: var(--radius-xs); } .btn.lg { min-height: var(--control-lg); padding: 0 var(--space-6); font-size: var(--t-body-size); } .btn.icon-only { padding: 0; width: var(--control-md); } .btn.icon-only.sm { width: var(--control-sm); } .btn.block { width: 100%; } .btn.block + .btn.block { margin-top: var(--space-2); } .btn:disabled, .btn[aria-busy="true"] { opacity: 0.5; cursor: default; } .btn[aria-busy="true"] .icon { animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- segmented control ------------------------------------------------- */ .segmented { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-full); padding: 3px; gap: 2px; } .segmented > button { display: inline-grid; grid-auto-flow: column; place-items: center; gap: var(--space-1); min-height: calc(var(--control-sm) - 6px); padding: 0 var(--space-4); border-radius: var(--radius-full); font-weight: 600; font-size: var(--t-footnote-size); color: var(--text-2); } .segmented > button.on, .segmented > button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-raised); } /* A filter with more choices than a phone is wide scrolls sideways instead of pushing the page wider. */ .segmented.scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .segmented.scroll::-webkit-scrollbar { display: none; } .segmented.scroll > button { flex: none; } /* the customer simulator (static/views/simulator.js): a chat tall enough to read a conversation in */ .sim-thread { min-height: 16rem; margin-bottom: var(--space-3); } .sim-compose { flex-wrap: nowrap; } .sim-compose input { min-width: 0; } /* ---- fields ------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--space-1); margin-block: var(--space-3); } .field-label, label { display: block; font-size: var(--t-footnote-size); font-weight: 600; color: var(--text-2); } label { margin: var(--space-3) 0 var(--space-1); } .field-help { font-size: var(--t-footnote-size); color: var(--text-3); } .field-error { font-size: var(--t-footnote-size); color: var(--danger-text); font-weight: 500; } .field-error:empty { display: none; } .check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--t-subhead-size); color: var(--text-1); cursor: pointer; } .check input { margin-top: 0.2em; width: 1rem; height: 1rem; accent-color: var(--accent); flex: 0 0 auto; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { width: 100%; min-height: var(--control-md); padding: var(--space-2) var(--space-3); background: var(--surface-raised); color: var(--text-1); border: 1px solid var(--border-input); border-radius: var(--radius-sm); transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); } textarea { min-height: calc(var(--control-md) * 2); resize: vertical; line-height: var(--t-body-lh); } input::placeholder, textarea::placeholder { color: var(--text-3); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 0; border-color: var(--accent-ring); } .has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] { border-color: var(--danger-solid); } input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); margin: 0; flex: none; } select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - var(--space-4)) 50%, calc(100% - var(--space-4) + 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .switch { position: relative; width: 2.75rem; height: 1.625rem; border-radius: var(--radius-full); background: var(--border-input); flex: none; transition: background var(--motion-fast) var(--ease-standard); } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--shadow-raised); transition: transform var(--motion-fast) var(--ease-standard); } .switch[aria-checked="true"] { background: var(--accent); } .switch[aria-checked="true"]::after { transform: translateX(1.125rem); } /* ---- surfaces ------------------------------------------------------------ */ .card { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: var(--space-5); } .card > h3:first-child, .card > .card-head:first-child { margin-bottom: var(--space-3); } .card-head { display: flex; align-items: center; gap: var(--space-3); } .card-head > h3 { flex: 1; } .well { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-4); } .divider { height: 1px; background: var(--hairline); margin-block: var(--space-4); } .section { margin-top: var(--space-5); } .section > h3 { margin-bottom: var(--space-3); } .cap::first-letter { text-transform: uppercase; } .perm-group { border: 0; padding: 0; margin: 0 0 var(--space-2); min-width: 0; } .perm-group > legend { padding: 0; } .check span small { display: block; color: var(--text-2); font-size: var(--t-footnote-size); font-weight: 400; } .dot.branch { width: 0.75rem; height: 0.75rem; background: var(--branch-color, var(--text-3)); flex: none; } .eyebrow { font-size: var(--t-caption-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); font-weight: 600; margin: var(--space-4) 0 var(--space-2); } .mono-box { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); padding: var(--space-3); border-radius: var(--radius-sm); font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size: var(--t-footnote-size); line-height: 1.5; margin: var(--space-3) 0; } /* the non-fiscal invoice inside the receipt sheet: the document as it prints and as the patient gets it */ /* a supplier's invoice beside what was read from it (Gastos, 02.10.2026): side by side where there is room */ .exp-grid.has-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .modal-panel:has(.exp-grid.has-view) { width: min(64rem, 100%); } .exp-view { position: sticky; top: 0; background: var(--surface-sunken); border-radius: var(--radius-sm); overflow: hidden; } .exp-view img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; } .exp-view iframe { display: block; width: 100%; height: 70vh; border: 0; } .exp-view p { padding: var(--space-4); margin: 0; } @media (max-width: 47.5rem) { .exp-grid.has-view { display: block; } .exp-view { position: static; margin-bottom: var(--space-3); } .exp-view img { max-height: 40vh; } .exp-view iframe { height: 50vh; } } .doc-frame { display: block; width: 100%; height: min(70vh, 760px); border: 1px solid var(--hairline-2); border-radius: var(--radius-sm); } .card.warning { border-color: color-mix(in oklab, var(--warning-solid) 40%, var(--hairline-2)); background: var(--warning-subtle); } .card-foot { margin-top: var(--space-3); } /* Accordion: a card that folds. Native
, so keyboard and screen readers work without script. */ .card.acc > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; margin: calc(-1 * var(--space-2)) 0; padding: var(--space-2) 0; } .card.acc > summary::-webkit-details-marker { display: none; } .card.acc > summary > h3 { flex: 1; margin: 0; } .card.acc > summary > .icon { transition: transform var(--motion-base) var(--ease-standard); color: var(--text-2); } .card.acc:not([open]) > summary > .icon { transform: rotate(-90deg); } .card.acc > .acc-body { margin-top: var(--space-4); display: grid; gap: var(--space-3); } /* ---- inset grouped list rows --------------------------------------------- */ .rows { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: hidden; } .row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); text-align: left; width: 100%; color: inherit; } .row:first-child { border-top: 0; } .row.link { cursor: pointer; } .row.link:hover { background: var(--surface-sunken); } .row .chev { margin-left: auto; color: var(--text-3); } .row .primary { font-weight: 600; } .row .secondary { color: var(--text-2); font-size: var(--t-footnote-size); } .row .grow { flex: 1; min-width: 0; } .row.wrap { flex-wrap: wrap; } /* actions that need a line of their own under the row's text (a package session: Completar, No vino, Mover) */ .row.wrap > .row-actions { flex-basis: 100%; } .row-group + .row-group { border-top: 1px solid var(--hairline); } .rows .editor { padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface-sunken); border-top: 1px solid var(--hairline); } .hours-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--hairline); } .hours-row:last-of-type { border-bottom: 0; } .hours-row .check { padding: 0; } .hours-row input[type="time"] { width: 100%; min-width: 0; } .faq-row { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); margin-bottom: var(--space-2); } .logo-box { display: flex; align-items: center; min-height: 4.5rem; padding: var(--space-3); margin: var(--space-2) 0; background: var(--surface-sunken); border-radius: var(--radius-sm); } .logo-prev { display: block; max-height: 4rem; max-width: 100%; width: auto; object-fit: contain; } @media (max-width: 35rem) { .row.wrap > .cluster { flex-basis: 100%; } .hours-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .hours-row .check { grid-column: 1 / -1; padding-top: var(--space-2); } } /* ---- data table ------------------------------------------------------------ */ .table { width: 100%; border-collapse: collapse; font-size: var(--t-subhead-size); } .table th, .table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; } .table th { position: sticky; top: 0; background: var(--surface-sunken); color: var(--text-2); font-size: var(--t-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; z-index: 1; } .table th[aria-sort] { cursor: pointer; } .table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; } .table tr:hover > td { background: color-mix(in oklab, var(--surface-sunken) 60%, var(--surface-raised)); } /* The cash report (Caja → Reporte, 03.10.2026): a wide table that has to stay readable on a phone and print as a clean sheet, with nothing of the panel around it. */ .rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: var(--space-4) 0 var(--space-3); } .rp-head h2 { margin: 0; font-size: var(--t-title-3-size); } .rp { font-size: var(--t-caption-size); } .rp th, .rp td { padding: var(--space-1) var(--space-2); white-space: nowrap; } .rp td.n, .rp th.n { text-align: right; font-variant-numeric: tabular-nums lining-nums; } .rp td small { display: block; color: var(--text-3); } .rp tr.neg td { color: var(--danger); } .rp tfoot th { background: var(--surface-sunken); font-weight: 700; border-top: 2px solid var(--hairline-2); position: static; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline-2); border-radius: var(--radius-md); } /* Productos as a table (11.10.2026): a figure the owner may change in place looks like text with a dashed underline, and becomes a small input on a tap; the totals row stays put under the rows. */ .table .cell-edit { background: none; border: 0; border-bottom: 1px dashed var(--hairline-2); padding: 2px var(--space-1); color: inherit; font: inherit; border-radius: var(--radius-xs); cursor: text; } .table .cell-edit:hover, .table .cell-edit:focus-visible { background: var(--accent-subtle); } .table .cell-input { width: 6.5rem; min-height: var(--control-sm, 2rem); padding: 0 var(--space-2); text-align: right; } .table td .sub { display: block; color: var(--text-3); font-size: var(--t-caption-size); } .table td.acts { white-space: nowrap; text-align: right; } .table tfoot th { position: static; background: var(--surface-sunken); color: var(--text-1); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--t-subhead-size); border-top: 2px solid var(--hairline-2); } .ct-tools { margin: var(--space-3) 0 var(--space-2); } /* a product's photo (20.10.2026): a small square in its own column, and the picker in the form */ .table.ct .ct-img { width: 3.25rem; padding-inline-end: 0; } .ct-thumb { display: block; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); object-fit: cover; background: var(--surface-sunken); } .ct-nothumb { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-3); } .ct-photo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ct-photo .ct-thumb, .ct-photo .ct-nothumb { width: 4.5rem; height: 4.5rem; } .ct-tools input[type="search"] { flex: 1 1 16rem; width: auto; } .ct-tools select { flex: 0 1 14rem; width: auto; } /* any list shown as a table (static/views/datatable.js) */ .table.dtable tr.dtable-click { cursor: pointer; } .table.dtable th[data-dt-sort]:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: -2px; } .table.dtable td.num, .table.dtable th.num, .table.dtable .pill { white-space: nowrap; } .table.dtable .dtable-clip { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .dtable-switch { flex: none; } .table .nowrap { white-space: nowrap; } .t-danger { color: var(--danger-text); } /* Tratos (static/views/deals.js, 12.10.2026): the board scrolls sideways, a column per stage */ .dl-board { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); align-items: flex-start; -webkit-overflow-scrolling: touch; } .dl-col { flex: 0 0 16.5rem; background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-2); min-height: 10rem; } .dl-col.over { outline: 2px dashed var(--accent); outline-offset: -2px; } .dl-col-head { display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-2) var(--space-2); } .dl-col-body { display: flex; flex-direction: column; gap: var(--space-2); } .dl-card { display: flex; flex-direction: column; gap: var(--space-1); background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; box-shadow: var(--shadow-raised); } .dl-card:hover, .dl-card:focus-visible { border-color: var(--accent); } .dl-card.dragging { opacity: .5; } .dl-card.rotten { border-left: 3px solid var(--danger-solid); } .dl-card-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .dl-empty { padding: var(--space-3) var(--space-2); } .dl-drops { position: sticky; bottom: var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); z-index: 2; } .dl-drop { padding: var(--space-4); border-radius: var(--radius-md); text-align: center; font-weight: 600; border: 2px dashed currentColor; background: var(--surface-raised); } .dl-drop.won { color: var(--success-text); } .dl-drop.lost { color: var(--danger-text); } .dl-drop.over { background: var(--surface-sunken); } .dl-steps { margin: var(--space-2) 0 var(--space-3); } .dl-steps button.pill { cursor: pointer; border: 0; } .dl-note { white-space: pre-wrap; } .dl-task.done .primary { text-decoration: line-through; color: var(--text-3); } .dl-addtask { margin-top: var(--space-2); } .dl-addtask select { width: auto; flex: none; } .dl-addtask .field { margin-bottom: var(--space-2); } .dl-task .primary, .dl-task .secondary { display: block; } .dl-strow input[type="number"] { width: 5.5rem; flex: none; } .dl-strow select { width: auto; flex: none; } /* ---- tabs -------------------------------------------------------------------- */ .tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--hairline); } .tabs > button { min-height: var(--control-md); padding: 0 var(--space-3); color: var(--text-2); font-weight: 500; font-size: var(--t-subhead-size); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs > button.on, .tabs > button[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--accent); font-weight: 600; } /* ---- modal / bottom sheet ---------------------------------------------------- */ .modal-root { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-5); } /* dims in both themes: --text-1 is near-white in dark, and the backdrop brightened the page behind (UX audit 25.10.2026) */ .modal-backdrop { position: absolute; inset: 0; background: color-mix(in oklab, black 45%, transparent); opacity: 0; transition: opacity var(--motion-base) var(--ease-standard); } .modal-panel { position: relative; width: min(30rem, 100%); max-height: 90dvh; overflow: auto; background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); padding: var(--space-6); opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard); } .modal-root.on .modal-backdrop { opacity: 1; } .modal-root.on .modal-panel { opacity: 1; transform: none; } .modal-root.leaving .modal-backdrop, .modal-root.leaving .modal-panel { transition-timing-function: var(--ease-exit); transition-duration: var(--motion-base); } .modal-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .modal-head > h2 { flex: 1; } .modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-5); flex-wrap: wrap; } body.scroll-locked { overflow: hidden; } @media (max-width: 34.99rem) { .modal-root.as-sheet { place-items: end stretch; padding: 0; } .modal-root.as-sheet .modal-panel { width: 100%; max-height: 88dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); } .modal-root.as-sheet.on .modal-panel { transform: none; } } /* ---- dropdown menu ------------------------------------------------------------ */ .menu { position: absolute; z-index: var(--z-overlay); min-width: 12rem; padding: var(--space-1); background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); border: 1px solid var(--hairline-2); } .menu > button, .menu > a { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-xs); text-align: left; color: var(--text-1); text-decoration: none; } .menu > button:hover, .menu > a:hover { background: var(--surface-sunken); } .menu > .danger { color: var(--danger-text); } /* ---- toast --------------------------------------------------------------------- */ .toast-region { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; width: min(26rem, calc(100% - var(--space-8))); } .toast { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-overlay); border: 1px solid var(--hairline-2); font-size: var(--t-subhead-size); pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); } .toast.on { opacity: 1; transform: none; } .toast.success .icon { color: var(--success-text); } .toast.warning .icon { color: var(--warning-text); } .toast.danger .icon { color: var(--danger-text); } .toast.info .icon { color: var(--info-text); } /* ---- badge / status pill (never colour alone: icon or text carries it too) --- */ .pill { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--t-caption-size); font-weight: 600; letter-spacing: 0.01em; background: var(--surface-sunken); color: var(--text-2); white-space: nowrap; } .pill.success { background: var(--success-subtle); color: var(--success-text); } .pill.warning { background: var(--warning-subtle); color: var(--warning-text); } .pill.danger { background: var(--danger-subtle); color: var(--danger-text); } .pill.info { background: var(--info-subtle); color: var(--info-text); } .pill.accent { background: var(--accent-subtle); color: var(--accent-subtle-fg); } .count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--accent); color: var(--accent-fg); font-size: var(--t-caption-size); font-weight: 700; } /* ---- avatar ------------------------------------------------------------------- */ .avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none; background: var(--accent-subtle); color: var(--accent-subtle-fg); font-weight: 700; font-size: var(--t-footnote-size); letter-spacing: 0.02em; } .avatar.sm { width: 2rem; height: 2rem; font-size: var(--t-caption-size); } .avatar.web { background: var(--info-subtle); color: var(--info-text); } .avatar .icon { width: 1.25rem; height: 1.25rem; } .avatar.square { border-radius: var(--radius-sm); } /* ---- tooltip (pure CSS, on data-tip) ------------------------------------------- */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--text-1); color: var(--surface-raised); font-size: var(--t-caption-size); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); z-index: var(--z-overlay); } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; } /* ---- skeleton ------------------------------------------------------------------ */ .skeleton { display: grid; gap: var(--space-2); } .skeleton-line { height: 0.875rem; width: var(--w, 100%); border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--surface-sunken) 25%, color-mix(in oklab, var(--surface-sunken) 50%, var(--surface-raised)) 50%, var(--surface-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---- empty / error state --------------------------------------------------------- */ .empty { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-12) var(--space-5); color: var(--text-2); } .empty > .icon { color: var(--text-3); width: 2.5rem; height: 2.5rem; --icon-stroke: 1.5; } .empty > .btn { margin-top: var(--space-2); } .empty.error > .icon { color: var(--danger-text); } .empty.compact { padding: var(--space-6) var(--space-4); } /* ---- pagination -------------------------------------------------------------------- */ .pager { display: flex; align-items: center; gap: var(--space-1); justify-content: flex-end; } .pager > .btn { min-width: var(--control-sm); } .pager > .btn[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-subtle-fg); } /* ---- layout helpers ------------------------------------------------------------------ */ .stack { display: flex; flex-direction: column; gap: var(--space-3); } .grid-2 > *, .grid-4 > * { min-width: 0; } /* date/time inputs have a wide intrinsic size; let columns shrink them */ .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .cluster > .grow { flex: 1; min-width: 0; } /* A group that moves as one when its row runs out: the report's Ver · PDF · Excel used to split, Ver staying up and the two downloads dropping alone (06.10.2026). */ .cluster.nowrap { flex-wrap: nowrap; } .fx-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0; } .fx-offer p { flex: 1 1 16rem; margin: 0; } /* a spacer or a caption that pushes the action to the end */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } @media (max-width: 68.75rem) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 56.25rem) { .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 35rem) { .grid-4 { grid-template-columns: 1fr 1fr; } } /* ======================= B · MIGRATION BRIDGE (shrinks in Phase 4) ======================= */ .btn.chico { width: auto; min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--t-footnote-size); border-radius: var(--radius-xs); margin-top: 0; } .btn.sec { background: var(--surface-raised); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--hairline-2); } .btn.sec:hover { background: var(--surface-sunken); color: var(--text-1); } .btn.peligro { background: transparent; color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--hairline-2); } .btn.peligro:hover { background: var(--danger-subtle); } /* -- text roles -- */ .error { color: var(--danger-text); font-size: var(--t-footnote-size); margin-top: var(--space-2); } .ok { color: var(--success-text); font-size: var(--t-footnote-size); margin-top: var(--space-2); } h2 { font-size: var(--t-title3-size); line-height: var(--t-title3-lh); font-weight: var(--t-title3-w); letter-spacing: var(--t-title3-ls); margin: 0 0 var(--space-4); } h3 { font-size: var(--t-headline-size); line-height: var(--t-headline-lh); font-weight: var(--t-headline-w); letter-spacing: var(--t-headline-ls); } .saludo { font-size: var(--t-title2-size); line-height: var(--t-title2-lh); font-weight: var(--t-title2-w); letter-spacing: var(--t-title2-ls); margin-bottom: 2px; } .fila { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; } .fila > * { min-width: 0; } .lista { display: flex; flex-direction: column; gap: var(--space-3); } .item { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } .item .t { font-weight: 600; } .item .s { color: var(--text-2); font-size: var(--t-footnote-size); } .etiqueta.owner, .etiqueta.dueno, .etiqueta.ok { background: var(--success-subtle); color: var(--success-text); } /* -- KPI tiles: numbers are content, not decoration → text-1, tabular; semantic tints keep meaning -- */ .metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .metricas:not(:last-child) { margin-bottom: var(--space-4); } .metricas > * { min-width: 0; } .metricas .m { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: var(--space-4); } .metricas .m b { display: block; font-size: var(--t-title2-size); line-height: 1.1; font-weight: 700; letter-spacing: var(--t-title2-ls); color: var(--text-1); font-variant-numeric: tabular-nums lining-nums; } .metricas .m span { display: block; font-size: var(--t-footnote-size); color: var(--text-1); font-weight: 600; margin-top: var(--space-2); } .metricas .m i { display: block; font-style: normal; font-size: var(--t-footnote-size); color: var(--text-2); margin-top: 2px; } .metricas.chicas .m b { font-size: var(--t-headline-size); } .metricas .m.ok b { color: var(--success-text); } .metricas .m.bad b { color: var(--danger-text); } .metricas .m.warn b { color: var(--warning-text); } @media (max-width: 68.75rem) { .metricas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 35rem) { .metricas { grid-template-columns: 1fr 1fr; } } /* -- login -- */ .centro { position: fixed; inset: 0; background: var(--surface-canvas); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-5); overflow: auto; } .acceso { width: min(26rem, 100%); min-width: 0; } .acceso .card { border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); padding: var(--space-8); text-align: left; } .acceso .mark { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; font-size: var(--t-title3-size); margin: 0 auto var(--space-4); } .acceso h1 { font-size: var(--t-title3-size); line-height: var(--t-title3-lh); font-weight: var(--t-title3-w); letter-spacing: var(--t-title3-ls); margin-bottom: var(--space-1); text-align: center; } .acceso p.sub { color: var(--text-2); font-size: var(--t-subhead-size); margin: 0 0 var(--space-5); text-align: center; } .acceso .cluster.center { justify-content: center; margin-top: var(--space-4); } .acceso .btn.block { margin-top: var(--space-4); } .acceso .btn.plain.block { margin-top: var(--space-2); } input.codigo { font-size: var(--t-title1-size); letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; } .idioma { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-full); padding: 3px; gap: 2px; } .idioma button { min-height: calc(var(--control-sm) - 6px); padding: 0 var(--space-3); border-radius: var(--radius-full); font-size: var(--t-caption-size); font-weight: 600; color: var(--text-2); } .idioma button.activo { background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-raised); } /* -- shell -- */ .shell { min-height: 100dvh; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: var(--surface-nav); color: var(--text-on-nav-2); display: flex; flex-direction: column; z-index: var(--z-modal); overflow: hidden; transition: width var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard), visibility 0s; } /* -- the menu toggle: one state on the shell (data-nav), read differently by each breakpoint. Wide: the menu collapses to a rail of icons and the toggle lives in the sidebar's own header — a chevron pointing left to contract, right to expand. Narrow: it is closed unless opened, rides over the content with a backdrop, and the topbar hamburger drives it; `visibility` (delayed until the slide finishes) is what keeps that closed menu out of the tab order. -- */ .sb-toggle { display: none; margin-left: auto; place-items: center; flex: none; border-radius: var(--radius-sm); min-width: var(--control-sm); min-height: var(--control-sm); color: var(--text-on-nav-2); } .sb-toggle:hover { background: var(--surface-nav-hover); color: var(--text-on-nav); } .sb-toggle > span { display: inline-grid; place-items: center; } .shell[data-nav="open"] .sb-toggle .when-closed, .shell[data-nav="closed"] .sb-toggle .when-open { display: none; } @media (min-width: 55.0625rem) { .sb-toggle { display: inline-grid; } .shell[data-nav="closed"] .sidebar { width: var(--sidebar-rail); } .shell[data-nav="closed"] .main { margin-left: var(--sidebar-rail); } .shell[data-nav="closed"] .content { margin-inline: auto; } /* reclaimed space is shared, not dumped on the right */ .shell[data-nav="closed"] .sb-brand { flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-2); } .shell[data-nav="closed"] .sb-toggle { margin-left: 0; } .shell[data-nav="closed"] .sb-brand > div, .shell[data-nav="closed"] .sb-ws .nm, .shell[data-nav="closed"] .sb-me-btn .nm, .shell[data-nav="closed"] .sb-me-btn > .icon { display: none; } .shell[data-nav="closed"] .sb-ws { justify-content: center; padding: var(--space-3) var(--space-2); } .shell[data-nav="closed"] .nav { padding: var(--space-2); } .shell[data-nav="closed"] .nav a { justify-content: center; padding: 0; } /* the label still names the link for assistive tech; on the rail it also becomes the hover tooltip */ .shell[data-nav="closed"] .nav a > span:not(.badge), .shell[data-nav="closed"] .sb-cfg > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .shell[data-nav="closed"] .nav a .badge { position: absolute; top: 2px; right: 2px; margin: 0; padding: 0 4px; } .shell[data-nav="closed"] .nav .sep { height: 1px; padding: 0; margin: var(--space-3) var(--space-2); background: var(--hairline); font-size: 0; line-height: 0; color: transparent; } .shell[data-nav="closed"] .sb-foot { padding: var(--space-2); } .shell[data-nav="closed"] .sb-cfg, .shell[data-nav="closed"] .sb-me-btn { justify-content: center; padding: 0; } /* the rail is too narrow for the menu: it opens beside it (fixed escapes the sidebar's overflow) */ .shell[data-nav="closed"] .sb-me-pop { position: fixed; left: calc(var(--sidebar-rail) + var(--space-2)); right: auto; bottom: var(--space-3); width: 15rem; } .content[data-view="calendar"] { display: flex; flex-direction: column; height: calc(100dvh - 3.875rem); } .content[data-view="calendar"] .ag-cal { flex: 1; min-height: 18rem; } } .sidebar :focus-visible { outline-color: var(--accent-300); } .sb-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--hairline); } .sb-brand .mark { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-sm); background: var(--accent-400); color: var(--accent-950); display: grid; place-items: center; font-weight: 800; } .sb-brand b { color: var(--text-on-nav); font-size: var(--t-headline-size); font-weight: 700; } .sb-brand small { display: block; font-size: var(--t-caption-size); color: var(--text-on-nav-2); letter-spacing: 0.08em; text-transform: uppercase; } .sb-brand .sb-ver { all: unset; cursor: pointer; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; color: inherit; border-radius: var(--radius-sm); } /* "v1.10.1", not "V1.10.1" */ .sb-brand .sb-ver:hover { text-decoration: underline; color: var(--text-on-nav); } .sb-brand .sb-ver:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; } .changelog h3 { margin: var(--space-5) 0 var(--space-2); } .changelog h3:first-child { margin-top: 0; } .changelog h4 { margin: var(--space-3) 0 var(--space-1); } .changelog ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); } .changelog li { margin: var(--space-1) 0; } .changelog hr { border: 0; border-top: 1px solid var(--hairline-2); margin: var(--space-4) 0; } .changelog code { font-size: 0.92em; } .sb-ws { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: var(--space-3); } .sb-ws .av { width: 2.125rem; height: 2.125rem; border-radius: var(--radius-sm); flex: none; background: var(--accent-subtle); color: var(--accent-subtle-fg); display: grid; place-items: center; font-weight: 700; font-size: var(--t-footnote-size); } .sb-ws .nm { font-size: var(--t-subhead-size); font-weight: 600; color: var(--text-on-nav); line-height: 1.2; min-width: 0; } .sb-ws .nm small { display: block; color: var(--text-on-nav-2); font-weight: 400; font-size: var(--t-caption-size); } /* The account switcher keeps its chevron: without it the name read as a label, and Ivan could not find how to reach the Tienda Demo from the Clínica Demo (11.10.2026). */ .sb-ws select { background-color: transparent; border: 0; color: var(--text-on-nav); font-weight: 600; font-size: var(--t-subhead-size); padding: 0 var(--space-6) 0 0; min-height: 0; width: 100%; cursor: pointer; text-overflow: ellipsis; background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; } .sb-ws select:hover, .sb-ws select:focus-visible { color: var(--text-on-nav); text-decoration: underline; text-underline-offset: 3px; } .nav { flex: 1; overflow-y: auto; padding: var(--space-2); } .sidebar .nav[data-more] { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent); } /* a short desk screen (a 768-px laptop): the entries sit closer, so more of the menu fits before it scrolls */ @media (min-width: 55.0625rem) and (max-height: 50rem) { .nav a { min-height: 2.25rem; } .nav .sep { padding-top: var(--space-3); } } /* The menu scrolls when the screen is short. With a mouse attached macOS shows classic scrollbars and Chrome paints a light one across the dark sidebar (Safari overlays it); keep it thin and in the sidebar's own colours (02.10.2026). */ .sidebar .nav { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-on-nav-2) 35%, transparent) transparent; } .sidebar .nav::-webkit-scrollbar { width: 6px; } .sidebar .nav::-webkit-scrollbar-track { background: transparent; } .sidebar .nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-on-nav-2) 35%, transparent); border-radius: 3px; } .nav a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-on-nav-2); font-size: var(--t-subhead-size); font-weight: 500; margin-bottom: 2px; cursor: pointer; text-decoration: none; position: relative; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .nav a:hover { background: var(--surface-nav-hover); color: var(--text-on-nav); } .nav a.on { background: var(--surface-nav-active); color: var(--text-on-nav); font-weight: 600; } .nav a.on::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 3px; border-radius: var(--radius-full); background: var(--accent-300); } .nav a .badge { margin-left: auto; background: var(--danger-solid); color: var(--on-solid); font-size: var(--t-caption-size); font-weight: 700; border-radius: var(--radius-full); padding: 1px var(--space-2); } .nav .sep { font-size: var(--t-caption-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-on-nav-2); opacity: 0.7; padding: var(--space-4) var(--space-3) var(--space-1); } /* The foot: Configuración and the person -- their profile, help, theme, plan and sign-out open from their name (step 2 of "que se sienta como una aplicación", 25.10.2026). */ .sb-foot { padding: var(--space-2); border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; } .sb-cfg, .sb-me-btn { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-on-nav-2); font-size: var(--t-subhead-size); font-weight: 500; text-decoration: none; position: relative; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .sb-cfg:hover, .sb-me-btn:hover, .sb-me-btn[aria-expanded="true"] { background: var(--surface-nav-hover); color: var(--text-on-nav); } .sb-cfg.on { background: var(--surface-nav-active); color: var(--text-on-nav); font-weight: 600; } .sb-cfg.on::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 3px; border-radius: var(--radius-full); background: var(--accent-300); } .sb-me { position: relative; } .sb-me-btn { width: 100%; min-height: var(--control-lg); background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: var(--t-subhead-size); } .sb-me-btn .av { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); flex: none; background: var(--accent-subtle); color: var(--accent-subtle-fg); display: grid; place-items: center; font-weight: 700; font-size: var(--t-caption-size); } .sb-me-btn .nm { flex: 1; min-width: 0; color: var(--text-on-nav); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-me-btn .nm small { display: block; color: var(--text-on-nav-2); font-weight: 400; font-size: var(--t-caption-size); overflow: hidden; text-overflow: ellipsis; } .sb-me-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-1)); z-index: 1; background: var(--surface-raised); color: var(--text-1); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); padding: var(--space-1); display: flex; flex-direction: column; gap: 2px; } .sb-me-pop[hidden] { display: none; } .sb-me-pop :focus-visible { outline-color: var(--accent); } .sb-me-pop > a, .sb-me-pop > .out { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-1); font-size: var(--t-subhead-size); text-decoration: none; background: none; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; } .sb-me-pop > a:hover, .sb-me-pop > .out:hover { background: var(--surface-sunken); } .sb-me-pop > a.on { font-weight: 600; } .sb-me-pop > .out { color: var(--danger-text); border-top: 1px solid var(--hairline); border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .sb-me-pop .plan { padding: var(--space-2) var(--space-3); font-size: var(--t-footnote-size); color: var(--text-2); } .sb-me-pop .plan b { color: var(--text-1); } .sb-me-pop .segmented { display: flex; margin: 0 var(--space-2) var(--space-2); } .sb-me-pop .segmented > button { flex: 1; padding: 0; } .main { margin-left: var(--sidebar-w); min-height: 100dvh; transition: margin-left var(--motion-slow) var(--ease-standard); } .topbar { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); min-height: 3.875rem; } .topbar .ham { display: none; place-items: center; min-width: var(--control-md); min-height: var(--control-md); flex: none; } .topbar h2 { font-size: var(--t-headline-size); line-height: var(--t-headline-lh); font-weight: var(--t-headline-w); letter-spacing: var(--t-headline-ls); margin: 0; } .topbar .right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .topbar .sede { width: auto; min-height: var(--control-sm); padding: 0 var(--space-8) 0 var(--space-3); font-size: var(--t-footnote-size); max-width: 12rem; border-radius: var(--radius-full); } .content { padding: var(--space-6); max-width: var(--content-max); } .content[data-wide] { max-width: none; } /* tables, agenda, dashboards: the data wants the room */ /* Vertical rhythm of a screen: every top-level block after another gets one step of air. Views used to get it only from `.section` or inline margins, so cards, grids and empty states sat at 0 px on each other (measured on overview, plan, settings, profile, billing). A caption right under a heading stays tight. */ .content > * + * { margin-top: var(--space-5); } .content > :is(h1, h2, h3) + p { margin-top: var(--space-1); } .sb-backdrop { display: none; position: fixed; inset: 0; background: color-mix(in oklab, black 45%, transparent); z-index: var(--z-overlay); } /* -- legacy #sheet: centred dialog on desktop, bottom sheet on phones -- */ #sheet { position: fixed; inset: 0; background: color-mix(in oklab, var(--text-1) 45%, transparent); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); } @media (max-width: 55rem) { :root { --sidebar-w: 0px; } .sidebar { transform: translateX(-100%); visibility: hidden; width: 15.5rem; box-shadow: var(--shadow-modal); transition: transform var(--motion-slow) var(--ease-standard), visibility 0s linear var(--motion-slow); } .shell[data-nav="open"] .sidebar { transform: none; visibility: visible; transition-delay: 0s; } .shell[data-nav="open"] .sb-backdrop { display: block; } .topbar .ham { display: inline-grid; } .main, .shell[data-nav="open"] .main { margin-left: 0; } .topbar { padding: 0 var(--space-3); gap: var(--space-2); } .topbar .right { gap: var(--space-2); } .topbar .sede { max-width: 7.5rem; } .idioma button { padding: 0 var(--space-2); } .topbar h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content { padding: var(--space-4); } #sheet { align-items: flex-end; padding: 0; } } @media (max-width: 35rem) { .acceso .tarjeta { padding: var(--space-6); } } /* -- agenda component (migrated 2026-09-05): the branch colour is ONE custom property; everything else derives in CSS -- */ .ag-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3); } .ag-nav { display: flex; gap: var(--space-1); } .ag-label::first-letter { text-transform: uppercase; } /* "sábado, 5 de septiembre" → only the first letter */ .ag-label { margin: 0; flex: 1; min-width: 7.5rem; text-align: center; font-size: var(--t-headline-size); font-weight: 600; font-variant-numeric: tabular-nums; } .ag-right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* a phone gives the activity's long date its own line instead of half the row */ .rows.feed .grow { min-width: 0; } .rows.feed .secondary { overflow-wrap: anywhere; } /* a long code wraps instead of running under the date */ @media (max-width: 35rem) { .rows.feed .row { flex-wrap: wrap; row-gap: var(--space-1); } .rows.feed .row > time { flex-basis: 100%; font-size: var(--t-footnote-size); } } /* Ayuda: topics beside the page on a desktop, a dropdown above it on a phone */ .help { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: var(--space-6); align-items: start; } .help-nav { position: sticky; top: var(--space-4); } .help-nav select { display: none; } .help-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .help-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: var(--t-subhead-size); } .help-nav a:hover { background: var(--surface-sunken); color: var(--text-1); } .help-nav a.on { background: var(--accent-subtle); color: var(--accent-subtle-fg); font-weight: 600; } .help-page { max-width: 46rem; } .help-page h3 { margin-top: var(--space-6); } .help-page h4 { margin-top: var(--space-4); } .help-page ol, .help-page ul { padding-left: var(--space-5); } .help-page li { margin: var(--space-1) 0; } .help-shot { margin: var(--space-4) 0; } .help-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline-2); border-radius: var(--radius-md); } .help-shot figcaption { font-size: var(--t-footnote-size); color: var(--text-2); margin-top: var(--space-2); } .help-tip { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-sunken); border-radius: var(--radius-sm); } @media (max-width: 55rem) { .help { grid-template-columns: 1fr; gap: var(--space-4); } .help-nav { position: static; } .help-nav ul { display: none; } .help-nav select { display: block; width: 100%; } } .disc-row { display: flex; gap: var(--space-2); } .disc-row input { flex: 1; min-width: 0; } .disc-row select { width: auto; flex: none; } .ag-right .ag-pro { width: auto; min-height: var(--control-sm); padding: 0 var(--space-8) 0 var(--space-3); font-size: var(--t-footnote-size); max-width: 14rem; border-radius: var(--radius-full); } .segm button.on { background: var(--surface-raised); color: var(--text-1); box-shadow: var(--shadow-raised); } .ag-cal { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: auto; } /* The day as a ruler: an hour is a fixed height and everything is placed against it. A 45-minute visit is taller than a 30-minute one, and the quarter of an hour between two of them is a visible gap -- which is the thing a receptionist is actually being asked for on the telephone. */ .ag-head, .ag-body { display: grid; grid-template-columns: 3.5rem var(--tracks, 1fr); } .ag-head { position: sticky; top: 0; z-index: 2; background: var(--surface-raised); border-bottom: 1px solid var(--hairline); } .ag-time { padding: var(--space-1) var(--space-2); font-size: var(--t-caption-size); color: var(--text-3); text-align: right; border-right: 1px solid var(--hairline); background: var(--surface-raised); font-variant-numeric: tabular-nums; } .ag-dh { padding: var(--space-2) var(--space-1); text-align: center; border-left: 1px solid var(--hairline); } .ag-dh b { display: block; font-size: var(--t-caption-size); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .ag-dh span { font-size: var(--t-headline-size); font-weight: 700; font-variant-numeric: tabular-nums; } .ag-dh.td span { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); } .ag-dh.shut { color: var(--text-3); } /* a day the clinic does not open: half a track, and quieter */ .ag-dh.shut span { font-size: var(--t-subhead-size); font-weight: 600; } .ag-gut { border-right: 1px solid var(--hairline); background: var(--surface-raised); } .ag-h { height: var(--h); position: relative; } .ag-h span { position: absolute; top: -0.55em; right: var(--space-2); font-size: var(--t-caption-size); color: var(--text-3); background: var(--surface-raised); padding: 0 2px; font-variant-numeric: tabular-nums; } .ag-h:first-child span { top: 0; } .ag-day { position: relative; height: var(--dh); border-left: 1px solid var(--hairline); } .ag-day[data-open="1"] { cursor: copy; } .ag-day.td { background: color-mix(in oklab, var(--accent) 4%, transparent); } .ag-lines { position: absolute; inset: 0; } .ag-lines > i { display: block; height: var(--h); border-top: 1px solid var(--hairline); } .ag-lines > i:first-child { border-top: 0; } .ag-band { position: absolute; left: 0; right: 0; top: var(--t); height: var(--h); overflow: hidden; font-size: var(--t-caption-size); padding: 2px var(--space-2); } .ag-band.off { background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 5px, var(--surface-raised) 5px, var(--surface-raised) 10px); color: var(--text-3); } .ag-band.lunch { background: repeating-linear-gradient(45deg, var(--warning-subtle), var(--warning-subtle) 5px, var(--surface-raised) 5px, var(--surface-raised) 10px); color: var(--warning-text); } .ag-band.blk { background: var(--danger-subtle); color: var(--danger-text); font-weight: 600; } .ag-band.blk[data-block] { cursor: pointer; } .ag-band.blk[data-block]:hover { filter: brightness(0.97); } .ag-band.blk[data-block]:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: -2px; } /* one professional's block on everybody's diary: hatched and quiet, clicks go through to book with the others; only its label is a button (Ivan, 08.10.2026: the demo week was all red for one holiday) */ .ag-band.blk.pro { background: repeating-linear-gradient(135deg, var(--danger-subtle) 0 3px, transparent 3px 9px); font-weight: 500; pointer-events: none; } .ag-band.blk.pro > span { pointer-events: auto; cursor: pointer; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--surface-raised); border: 1px solid var(--danger-subtle); border-radius: var(--radius-xs); padding: 0 var(--space-1); } .ag-band.blk.pro > span:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 1px; } .ag-appt { --branch-color: var(--accent-400); --lane: 0; --lanes: 1; position: absolute; top: var(--t); height: var(--h); left: calc(var(--lane) / var(--lanes) * 100% + 2px); width: calc(100% / var(--lanes) - 4px); background: color-mix(in oklab, var(--branch-color) calc(100% - var(--branch-tint-mix)), var(--surface-raised)); color: var(--text-1); border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2) 0 calc(var(--space-2) - 1px); cursor: pointer; font-size: var(--t-footnote-size); line-height: 1.3; overflow: hidden; border: 1px solid color-mix(in oklab, var(--branch-color) 35%, var(--hairline-2)); border-left: 3px solid var(--branch-color); } /* Too short to hold two lines: the service name steps out rather than being clipped mid-word. */ .ag-appt.tight { padding-top: 1px; } .ag-appt.tight small { display: none; } /* Booked by hand: the whole outline is dashed, not just the left edge. Where the eye lands on the card should not decide whether it can tell. The left edge keeps the branch colour and its 3px. */ .ag-appt.man { border-style: dashed; } .ag-appt.done { opacity: 0.7; } /* Its hour passed and nobody closed it. A hard ring shouted at a week that is otherwise calm; this breathes instead -- a warm wash over the card, fading in and out, so the eye finds it while scanning without the diary looking alarmed. The wash is an overlay whose OPACITY animates: opacity interpolates the same in every engine and costs the compositor nothing, where animating a colour-mix does neither. The clock stays, because colour alone is never the whole signal. */ .ag-appt.late::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--warning-solid); opacity: 0.12; animation: late-pulse 2.6s ease-in-out infinite; } .ag-appt.late .hd, .ag-appt.late small { position: relative; z-index: 1; } /* text above the wash */ @keyframes late-pulse { 0%, 100% { opacity: 0.07; } 50% { opacity: 0.26; } } /* Reduced motion keeps the signal and drops the movement: a steady wash, not a missing warning. */ @media (prefers-reduced-motion: reduce) { .ag-appt.late::after { animation: none; opacity: 0.18; } } .ag-appt .ag-ok.late { color: var(--warning-solid); } /* Unfinished appointments are a standing note, not an alarm: one quiet line under the legend, in the warning colour so it is findable, at footnote size so it does not compete with the week itself. */ .ag-late { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0 0; font-size: var(--t-footnote-size); color: var(--warning-text); } .ag-late .lnk { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .ag-late .lnk:hover { text-decoration-thickness: 2px; } .ag-legend .sep { width: 1px; height: 1em; background: var(--hairline-2); margin: 0 var(--space-1); } .ag-legend .lg { display: inline-flex; align-items: center; gap: 0.25rem; } .ag-legend .lg.late { color: var(--warning-text); } /* Full screen: the calendar alone. The shell keeps its grid, the sidebar and the header step out. */ .shell[data-focus="calendar"] .sidebar, .shell[data-focus="calendar"] .topbar { display: none; } .shell[data-focus="calendar"] .main { margin-left: 0; } /* the sidebar is fixed: the margin is what holds the room */ /* Full screen is for the week itself: the column fills the viewport and the grid takes what is left, scrolling inside its own box instead of pushing the page. The standing note and the hint step out — the point of asking for full screen is to see appointments, not prose. */ .shell[data-focus="calendar"] .content { padding: var(--space-4); max-width: none; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .shell[data-focus="calendar"] .content > * + * { margin-top: var(--space-3); } .shell[data-focus="calendar"] .ag-cal { flex: 1 1 auto; min-height: 0; } .shell[data-focus="calendar"] .ag-late, .shell[data-focus="calendar"] .content > p.t-footnote { display: none; } .shell[data-focus="calendar"] .ag-legend { flex: 0 0 auto; margin-bottom: 0; } /* A card is exactly two lines tall, in every engine. It used to depend on whether the customer's name happened to fit beside the time: it did in Chrome and often did not in Safari, whose text measures wider, so the card grew a third line, the hour did not grow with it, and the next hour painted over the overflow -- the card lost its service line. Height is no longer the font's decision: the first line is a flex row that cannot wrap, and a long name ellipsises like the service line already did. */ .ag-appt .hd { display: flex; align-items: center; gap: var(--space-1); min-width: 0; } .ag-appt .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-appt b { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; } .ag-appt span { display: inline; font-weight: 600; } .ag-appt small { display: block; color: var(--text-2); font-size: var(--t-caption-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-appt .ag-ok { display: inline-flex; vertical-align: -0.125em; color: var(--text-2); flex: 0 0 auto; } /* beats `.ag-appt span` */ .ag-ok .icon { width: 0.875rem; height: 0.875rem; } .ag-legend { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-1); font-size: var(--t-footnote-size); color: var(--text-2); } .ag-legend .k { width: 0.75rem; height: 0.75rem; border-radius: 3px; display: inline-block; margin-left: var(--space-3); border: 1px solid var(--hairline-2); } .ag-legend .k:first-child { margin-left: 0; } .ag-legend .k.ai { background: var(--accent-400); border-left: 3px solid var(--accent-600); } /* the swatch shows what a card shows: a dashed LEFT edge, not a dashed box */ .ag-legend .k.man { background: var(--surface-raised); border: 1px dashed var(--text-3); border-left-width: 3px; } .ag-legend .k.blkk { background: var(--danger-subtle); } .ag-legend .k.offk { background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 3px, var(--surface-raised) 3px, var(--surface-raised) 6px); } .sede-row { display: flex; align-items: center; gap: var(--space-3); } .sede-row .estado { font-size: var(--t-footnote-size); color: var(--text-2); min-width: 4.5rem; text-align: right; } /* The branch's fiscal code sits ON the branch, because that is what it belongs to. Narrow on purpose: it holds four digits and nothing else. */ .sede-row .fiscal-code { width: 5rem; text-align: center; font-variant-numeric: tabular-nums; } .sede-swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-1) 0; } .sede-swatches button { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid transparent; background: var(--branch-color, var(--surface-sunken)); } .sede-swatches button.on { border-color: var(--text-1); } /* -- caja -- */ .cperiod { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); } .cperiod .mes { display: flex; align-items: center; gap: var(--space-1); } .cperiod h3 { min-width: 9.5em; text-align: center; margin: 0; } .cperiod h3::first-letter { text-transform: uppercase; } /* -- day chart: a scale on the left, a readout that follows the pointer, and a strip that scrolls on a phone without clipping either of them -- */ .chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: stretch; max-width: 56rem; } .chart-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: var(--space-6) 0 1.15rem; font-size: var(--t-caption-size); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .chart-plot { position: relative; min-width: 0; padding-top: var(--space-6); } .chart-plot::before, .chart-plot::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; } .chart-plot::after { bottom: 1.15rem; background: var(--hairline-2); } .chart-plot::before { bottom: calc(1.15rem + (100% - 1.15rem - var(--space-6)) / 2); background: var(--hairline); } .chart-tip { position: absolute; top: 0; left: var(--tip-x, 50%); transform: translateX(-50%); z-index: var(--z-overlay); display: grid; grid-template-columns: auto auto; gap: 1px var(--space-3); align-items: baseline; background: var(--text-1); color: var(--surface-raised); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); font-size: var(--t-caption-size); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; max-width: 100%; } .chart-tip b { justify-self: end; font-weight: 600; } .cbars { display: flex; align-items: flex-end; gap: var(--space-1); height: 9rem; overflow-x: auto; padding-bottom: 2px; } /* taller and wider bars read better (02.10.2026) */ .cbar { flex: 1 1 0; min-width: 0.875rem; max-width: 2.25rem; height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 3px; border-radius: var(--radius-xs); } .cbar:hover, .cbar:focus-visible { background: var(--surface-sunken); } .cbar > span { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; width: 100%; } .cbar i, .cbar u { display: block; flex: 1 1 0; max-width: 0.625rem; height: var(--h, 0%); border-radius: 3px 3px 0 0; min-height: 2px; } .cbar i { background: var(--chart-1); } .cbar u { background: var(--chart-2); } .cbar b { font-size: var(--t-caption-size); color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; } .cbar:nth-child(even) b { visibility: hidden; } /* every other day is enough of a ruler */ @media (min-width: 55.0625rem) { .cbar:nth-child(even) b { visibility: visible; } } .cmt { font-weight: 600; white-space: nowrap; margin-left: var(--space-3); font-variant-numeric: tabular-nums; } .cmt.pos { color: var(--success-text); } .cmt.neg { color: var(--danger-text); } /* -- list rows and bubbles, shared: Pacientes lists its people with .wa-row, and a patient file, the simulator, the assistant's test and Soporte show their messages as .wa-b -- */ .wa-search { width: 100%; margin: 0 0 var(--space-3); border-radius: var(--radius-full); padding: 0 var(--space-4); } .wa-row { display: flex; gap: var(--space-3); align-items: center; width: 100%; text-align: left; color: inherit; padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--hairline); } .wa-row:last-child { border-bottom: 0; } .wa-row[hidden] { display: none; } .wa-row:hover { background: var(--surface-sunken); } .wa-nm .pill { margin-left: var(--space-2); } .wa-rt { flex: 1; min-width: 0; } .wa-nm { display: flex; align-items: baseline; gap: var(--space-3); } .wa-nm b { font-weight: 600; font-size: var(--t-subhead-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-nm span { margin-left: auto; font-size: var(--t-caption-size); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; } .wa-lm { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--t-footnote-size); margin-top: 2px; } .wa-lm .p { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-lm .p .icon { width: 0.875rem; height: 0.875rem; vertical-align: -0.125em; } .content.wa-host { padding: 0; max-width: none; } /* the same thread, read inside a patient file: a panel instead of a whole screen */ .wa-thread { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); max-height: 26rem; overflow-y: auto; } .wa-thread .wa-b { max-width: 84%; } .wa-day { text-align: center; margin: var(--space-4) 0 var(--space-3); } .wa-day span { display: inline-block; background: var(--surface-raised); color: var(--text-2); font-size: var(--t-caption-size); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--hairline); max-width: 80%; } /* Theirs on a quiet surface, ours in the accent (card #226): who said what reads from across the room. The time -- and on our side who wrote it -- sits on its own line under the text, small. */ .wa-b { position: relative; width: fit-content; max-width: 76%; margin: var(--space-1) 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--hairline-2); font-size: var(--t-subhead-size); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .wa-b.out { margin-left: auto; background: var(--accent); color: var(--accent-fg); border-color: transparent; } .wa-b.out a { color: inherit; text-decoration: underline; } .wa-b.in.tail { border-top-left-radius: var(--radius-xs); } .wa-b.out.tail { border-top-right-radius: var(--radius-xs); } .wa-b > .who { display: block; font-size: var(--t-caption-size); font-weight: 700; margin-bottom: 2px; color: var(--accent-text); } .wa-meta { display: flex; align-items: center; gap: var(--space-1); margin-top: 2px; white-space: nowrap; font-size: var(--t-caption-size); color: var(--text-3); line-height: 1.3; font-variant-numeric: tabular-nums; } .wa-meta .who { font-weight: 600; } .wa-b.out .wa-meta { justify-content: flex-end; color: color-mix(in oklch, var(--accent-fg) 80%, transparent); } .wa-tick { display: inline-flex; } .wa-tick .icon { width: 0.875rem; height: 0.875rem; } .wa-b.in .wa-tick.read { color: var(--info-text); } .wa-tick.bad { color: var(--danger-text); } .wa-b.out .wa-tick.read { color: var(--accent-fg); } .wa-b.out .wa-tick.bad { color: var(--accent-fg); } .wa-b.out .pill, .wa-b.out .btn { background: var(--surface-raised); } .wa-send { flex: 0 0 auto; width: var(--control-md); height: var(--control-md); border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: var(--t-body-size); } .wa-send:hover { background: var(--accent-hover); } /* -- Chats (card #226): the list and the open conversation as two cards side by side; one at a time on a phone -- */ .cx { display: grid; grid-template-columns: minmax(20rem, 34%) minmax(0, 1fr); gap: var(--space-5); height: calc(100dvh - 3.875rem - 2 * var(--space-6)); } .content.wa-host > .cx { height: calc(100dvh - 3.875rem); padding: var(--space-6); } body.chat-open { overflow: hidden; } /* the thread is the screen; nothing behind it scrolls */ .cx-list, .cx-pane { min-height: 0; display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); overflow: hidden; } .cx-pane > .empty { margin: auto; } .cx-top { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--hairline); } .cx-search { flex: 1 1 12rem; position: relative; display: flex; align-items: center; } .cx-search > .icon { position: absolute; left: var(--space-3); color: var(--text-3); pointer-events: none; } .content .cx-search input[type="search"] { width: 100%; padding-left: var(--space-8); border-radius: var(--radius-md); } .cx-chips { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .cx-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.25rem; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--hairline-2); background: var(--surface-raised); color: var(--text-1); font-size: var(--t-subhead-size); font-weight: 500; cursor: pointer; white-space: nowrap; } .cx-chip:hover { background: var(--surface-sunken); } .cx-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; } .cx-chip .n { font-variant-numeric: tabular-nums; } .cx-chip.ghost { color: var(--text-2); border-style: dashed; } .cx-numpick select { min-height: 2.25rem; width: auto; min-width: 9rem; font-size: var(--t-footnote-size); border-radius: var(--radius-sm); } .cx-rows { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2); } .cx-rows > .empty { padding-block: var(--space-10); } .cx-none { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-2); font-size: var(--t-footnote-size); } .cx-none[hidden] { display: none; } .cx-row { display: flex; gap: var(--space-3); align-items: flex-start; width: 100%; text-align: left; color: inherit; padding: var(--space-3); border-radius: var(--radius-md); cursor: pointer; } .cx-row + .cx-row { margin-top: 2px; } .cx-row[hidden] { display: none; } .cx-row:hover { background: var(--surface-sunken); } .cx-row.on { background: var(--accent-subtle); } .cx-av { position: relative; flex: none; } .cx-av .avatar { width: 2.75rem; height: 2.75rem; } .cx-av.lg .avatar { width: 2.75rem; height: 2.75rem; } .cx-ch { position: absolute; right: -0.25rem; bottom: -0.25rem; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--surface-raised); color: var(--accent-text); border: 1px solid var(--hairline-2); } .cx-ch .icon { width: 0.75rem; height: 0.75rem; } .cx-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cx-l1 { display: flex; align-items: baseline; gap: var(--space-2); } .cx-l1 b { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-subhead-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-l1 time { flex: none; font-size: var(--t-footnote-size); color: var(--text-3); font-variant-numeric: tabular-nums; } .cx-l2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--t-footnote-size); color: var(--text-2); } .cx-l2 .p { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-l2 .p .icon { width: 0.875rem; height: 0.875rem; vertical-align: -0.125em; } .cx-l2 .who { color: var(--text-3); } .cx-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); } /* waiting for us: the name in bold, the last line in full colour, the time in the accent -- and the dot */ .cx-row.unread .cx-l1 b { font-weight: 700; } .cx-row.unread .cx-l2 { color: var(--text-1); } .cx-row.unread .cx-l1 time { color: var(--accent-text); font-weight: 600; } .cx-l3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 2px; font-size: var(--t-caption-size); color: var(--text-2); } .cx-starred { display: inline-flex; color: var(--warning-solid); } .cx-starred .icon { fill: currentColor; width: 0.875rem; height: 0.875rem; } .cx-branch { display: inline-flex; align-items: center; gap: var(--space-1); } .cx-branch i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--branch-color, var(--text-4)); } .cx-num { display: inline-flex; align-items: center; gap: 2px; } .cx-num .icon { width: 0.75rem; height: 0.75rem; } .cx-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; } .cx-thread .wa-head { flex: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--hairline); } .cx-back { display: none; } .cx-who { flex: 1; min-width: 0; } .cx-who .nm { font-weight: 600; font-size: var(--t-headline-size); letter-spacing: var(--t-headline-ls); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-who .st { display: flex; align-items: center; gap: var(--space-1); font-size: var(--t-footnote-size); color: var(--text-2); min-width: 0; } .cx-who .st span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .cx-acts { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; } .cx-acts .segmented { margin-right: var(--space-2); } .cx-acts .btn.icon-only { color: var(--text-2); } .cx-star[aria-pressed="true"] { color: var(--warning-solid); } .cx-star[aria-pressed="true"] .icon { fill: currentColor; } .cx-ctxs { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-5) 0; } .cx-ctx { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; text-align: left; color: var(--text-1); padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); cursor: pointer; } .cx-ctx:hover { border-color: var(--border-input); } .cx-ctx > .icon { color: var(--text-2); flex: none; } .cx-ctx .t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-3); white-space: nowrap; overflow: hidden; } .cx-ctx .t b { font-weight: 600; } .cx-ctx .t span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; } .cx-ctx > .icon.sm { color: var(--text-3); } .cx-thread .wa-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3) var(--space-5) var(--space-5); background: var(--surface-raised); } .cx-thread .wa-b { max-width: min(36rem, 72%); } .cx-thread .wa-b.in { background: var(--surface-sunken); } .cx-comp { flex: none; display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); } .cx-hint { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--t-footnote-size); color: var(--text-2); } .cx-hint .icon { flex: none; color: var(--info-text); } .cx-quick { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; } .cx-quick::-webkit-scrollbar { display: none; } .cx-quick .cx-chip { flex: none; } .cx-write { display: flex; align-items: flex-end; gap: var(--space-3); } .content .cx-write textarea { flex: 1; min-height: 4.5rem; max-height: 10rem; height: var(--h, auto); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); resize: none; line-height: 1.45; } .cx-send { flex: none; display: grid; place-items: center; width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg); cursor: pointer; } .cx-send:hover:not(:disabled) { background: var(--accent-hover); } .cx-send:disabled { opacity: 0.45; cursor: default; } .cx-comp .field-error:empty { display: none; } .cx-qed .cx-qrow { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); } .cx-qed .cx-qrow > .btn { margin-top: var(--space-6); } .cx-qed .cx-qrow textarea { min-height: 4.5rem; } @media (max-width: 56.25rem) { /* a phone: the list is the page, and an open conversation is the whole screen */ .cx { display: block; height: auto; } .cx[data-open="1"] .cx-list, .cx[data-open="0"] .cx-pane { display: none; } .cx-rows { overflow: visible; } body.chat-open .topbar { display: none; } .content.wa-host > .cx { height: var(--vvh, 100dvh); padding: 0; overflow: hidden; } /* the chat sliding in never widens the page: a phone would zoom out */ .content.wa-host .cx-pane { height: 100%; border: 0; border-radius: 0; } .cx-back { display: inline-grid; margin-left: calc(-1 * var(--space-2)); } .cx-thread .wa-head { padding: var(--space-2) var(--space-4); } .cx-ctxs { padding: var(--space-3) var(--space-4) 0; } .cx-thread .wa-body { padding: var(--space-3) var(--space-4) var(--space-4); } .cx-thread .wa-b { max-width: 86%; } .cx-comp { padding: var(--space-2) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)); gap: var(--space-2); } .content .cx-write textarea { min-height: var(--control-lg); } .cx-acts .segmented > button { padding: 0 var(--space-3); font-size: var(--t-footnote-size); } } @media (max-width: 35rem) { /* the name of the person you are writing to comes first; the controls take the row below */ .cx-thread .wa-head { flex-wrap: wrap; gap: var(--space-2); } .cx-acts { flex-basis: 100%; justify-content: space-between; } .cx-acts .segmented { flex: 1; margin-right: var(--space-1); } .cx-acts .segmented > button { flex: 1; white-space: nowrap; } .cx-acts #c_deal > span { display: none; } /* the handshake says it; the title names it */ .cx-ctx .t { flex-direction: column; gap: 0; align-items: flex-start; } .cx-qed .cx-qrow { grid-template-columns: minmax(0, 1fr) auto; } .cx-qed .cx-qrow > .field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .cx-qed .cx-qrow > .btn { grid-column: 2; grid-row: 1; } } /* A datetime-local writes its own text and the browser decides how wide that is: "09/16/2026, 05:52 PM" needs noticeably more room than a two-digit duration, and half and half clipped the PM off the end. */ .grid-when { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-3); } .grid-when input[type="datetime-local"] { min-width: 0; } @media (max-width: 26rem) { .grid-when { grid-template-columns: 1fr; } } .ov-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ov-head > p { margin: 0; flex: 1 1 auto; } .ov-when select { min-height: var(--control-sm, 2rem); font-size: var(--t-footnote-size); padding: 0 var(--space-6) 0 var(--space-3); } .ws-note { margin: calc(var(--space-2) * -1) 0 var(--space-3); } /* Visitas web (card #94): who is on the page now, the period, the filters as chips, every list row a filter. The screen is one wrapper inside .content, so it spaces its own blocks the way .content spaces a screen's. */ .v-wrap > * + * { margin-top: var(--space-5); } .ws-section > .card { margin-bottom: var(--space-4); } .metricas .m b small { font-size: 0.6em; font-weight: 600; letter-spacing: 0; } /* "1 min 35 s": the units, not the figure, give way /* Reportes: the website section's cards apart */ .v-wrap > .v-bar + *, .v-wrap > .v-range + * { margin-top: var(--space-3); } /* the period and its filters belong together */ .v-wrap > .metricas { margin-bottom: 0; } .v-wrap > .metricas + p { margin-top: var(--space-2); } .v-live { display: flex; align-items: flex-start; gap: var(--space-3); } .v-live-h { display: block; font-size: var(--t-headline-size); color: var(--text-1); } .v-live-l { display: block; font-size: var(--t-footnote-size); color: var(--text-2); margin-top: var(--space-1); overflow-wrap: anywhere; } .v-live-l b { color: var(--text-1); font-weight: 600; margin-right: var(--space-1); } .v-dot { flex: none; width: 0.625rem; height: 0.625rem; margin-top: 0.45rem; border-radius: var(--radius-full); background: var(--text-3, var(--text-2)); } .v-live.on .v-dot { background: var(--success-text); animation: late-pulse-dot 2s ease-in-out infinite; } @keyframes late-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 var(--success-subtle); } 50% { box-shadow: 0 0 0 6px var(--success-subtle); } } @media (prefers-reduced-motion: reduce) { .v-live.on .v-dot { animation: none; } } .v-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); } .v-range label { display: grid; gap: var(--space-1); font-size: var(--t-footnote-size); color: var(--text-2); } .v-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .v-chip { border: 0; cursor: pointer; min-height: 2.25rem; padding: 0 var(--space-3); } .v-chip b { font-weight: 700; } .v-hint { margin: 0; } /* a phone: all five periods visible at once, each big enough for a thumb */ @media (max-width: 47.99rem), (pointer: coarse) { .v-bar .segmented { display: flex; width: 100%; } .v-bar .segmented > button { flex: 1 1 0; min-width: 0; min-height: 2.5rem; padding: 0 var(--space-1); white-space: nowrap; } .v-range > * { flex: 1 1 8rem; } .v-range input { width: 100%; min-height: 2.5rem; } .v-range .btn { min-height: 2.5rem; } } .funnel .m.as-filter { text-align: left; font: inherit; color: inherit; cursor: pointer; } .funnel .m.as-filter:hover, .funnel .m.as-filter:focus-visible { border-color: var(--chart-6); } .v-wrap .trend.days .tr-col.as-filter { cursor: pointer; } .v-live-f { background: none; border: 0; padding: var(--space-1) 0; font: inherit; color: var(--text-1); text-decoration: underline; text-decoration-color: var(--hairline-2); text-underline-offset: 3px; cursor: pointer; min-height: 2rem; } .v-live-f:hover, .v-live-f:focus-visible { text-decoration-color: currentColor; } .catbar.as-filter { display: block; text-align: left; background: none; border: 0; padding: var(--space-1) var(--space-2); margin: 0 calc(var(--space-2) * -1) var(--space-2); width: calc(100% + var(--space-2) * 2); border-radius: var(--radius-sm); cursor: pointer; color: inherit; font: inherit; } .catbar.as-filter:hover, .catbar.as-filter:focus-visible { background: var(--surface-sunken); } .legend-min { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-3) 0 0; } .legend-min .icon { color: var(--success-text, var(--text-2)); } /* -- picking a patient who is already on file --------------------------------------------------- */ .pick { border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-sunken); padding: var(--space-2); margin: calc(var(--space-3) * -1) 0 var(--space-4); } .pick > p { margin: 0 var(--space-2) var(--space-1); } .pick-it { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit; padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; } .pick-it:hover, .pick-it:focus-visible { background: var(--surface-raised); outline: none; } .pick-it:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); } .pick-it span { color: var(--text-2); font-size: var(--t-footnote-size); } .picked-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-sunken); } .picked-row > div { flex: 1 1 auto; min-width: 0; } .picked-row .secondary { color: var(--text-2); font-size: var(--t-footnote-size); } /* -- a sheet's facts: one per line, label left, value right ------------------------------------- */ .dl { margin: 0 0 var(--space-4); } .dl-row { display: grid; grid-template-columns: minmax(6rem, 8rem) 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; } .dl-row:last-child { border-bottom: 0; } .dl-row dt { color: var(--text-2); font-size: var(--t-footnote-size); } .dl-row dd { margin: 0; } @media (max-width: 26rem) { .dl-row { grid-template-columns: 1fr; gap: 0; } } .card.soft { background: var(--surface-sunken); border: 1px solid var(--hairline-2); box-shadow: none; padding: var(--space-3) var(--space-4); } .card.soft .dl { margin-bottom: 0; } .card.minor { margin-bottom: var(--space-4); } /* -- cash: the toolbar over a section, the invoice drop zone, a tighter preview list -- */ .section-head { margin: var(--space-4) 0 var(--space-3); align-items: center; } .drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-4); border: 1px dashed var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-sunken); } .drop p { flex-basis: 100%; margin: 0; } /* a file being dragged over a drop target (N.dropFile): a dashed frame over it, saying where to let go */ .drop-over { position: relative; } .drop-over::after { content: attr(data-drop-label); position: absolute; inset: var(--space-2); z-index: 5; pointer-events: none; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); border: 2px dashed var(--accent); border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--accent-subtle-fg); font-weight: 600; } .rows.compact .row { padding: var(--space-2) var(--space-3); } /* -- overview / reports -- */ .dn-wrap { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } /* 8rem left a hole too small for a Spanish word: "Confirmadas" had to be shortened to fit, and a truncated label is worse than no label. The card had the room. */ .dn { position: relative; width: 9.5rem; height: 9.5rem; flex: 0 0 auto; } .dn svg { width: 100%; height: 100%; overflow: visible; } .dn-seg, .dn-empty { fill: none; stroke-width: 16; stroke-linecap: butt; transition: stroke-width var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard); } .dn-seg { stroke: var(--c); cursor: pointer; } .dn-empty { stroke: var(--surface-sunken); } .dn.picking .dn-seg { opacity: 0.55; } /* everything recedes so one can stand out */ .dn .dn-seg.hot { opacity: 1; stroke-width: 21; transform: translate(var(--tx), var(--ty)); } /* Whatever goes in the middle has to fit the HOLE, not the ring. The hole is about 4.6rem across, so the label is capped there and wraps inside it -- "Confirmadas" used to run out over the arcs and read as a rendering fault. Two lines is the most it gets; beyond that the name is shortened. */ .dn-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .dn-c { padding: 0 var(--space-6); } .dn-c b { font-size: var(--t-headline-size); line-height: 1.15; font-variant-numeric: tabular-nums; } /* The hole is a CIRCLE: at the height where the label sits, a couple of lines below the middle, the usable width is the chord there (~4.3rem), not the diameter. So the cap is narrower than the hole looks, the type is a step smaller, and a word too long is shortened instead of broken mid-syllable. */ .dn-c small { display: block; max-width: 5.2rem; margin: 0.2rem auto 0; color: var(--text-3); font-size: var(--t-caption-size); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dn-leg { flex: 1; min-width: 8rem; font-size: var(--t-footnote-size); } .dn-leg > div { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); margin: 0 calc(var(--space-2) * -1); border-radius: var(--radius-sm); cursor: default; transition: background var(--motion-fast) var(--ease-standard); } .dn-leg > div:hover { background: var(--surface-sunken); } .dn-leg > div:focus-visible { background: var(--surface-sunken); outline: 2px solid var(--accent-ring); outline-offset: -2px; } .dn-leg b { margin-left: auto; font-variant-numeric: tabular-nums; } .dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; display: inline-block; background: var(--dot, var(--text-3)); } .feed { max-height: 21rem; overflow: auto; } .feed .it { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-footnote-size); } .feed .it:last-child { border-bottom: 0; } .feed .it b { font-weight: 600; } .feed .it span { color: var(--text-2); margin-left: var(--space-2); } .feed .it time { margin-left: auto; color: var(--text-3); font-size: var(--t-caption-size); white-space: nowrap; font-variant-numeric: tabular-nums; } .qbar { position: relative; height: 0.625rem; background: var(--surface-sunken); border-radius: var(--radius-full); overflow: hidden; } /* The goal is a line ON the bar, not a number beside it: "38% of a 70% target" is arithmetic the reader should not have to do. It sits above the fill so it stays visible once the fill passes it. */ .qbar + * { margin-top: var(--space-4); } /* a bar is never flush with what follows it */ .metricas.occ-tiles { grid-template-columns: repeat(3, 1fr); } /* three figures, three columns: no empty fourth for the bar to run past */ .qbar .goal { position: absolute; top: 0; bottom: 0; left: var(--g, 70%); width: 2px; background: var(--text-2); opacity: .55; } .qbar i { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); transition: width var(--motion-base) var(--ease-standard); } .qbar i.hot { background: var(--danger-solid); } /* The mark that opens "what is this number?". It has to be quiet enough to ignore and big enough to hit with a thumb, so it borrows the label's font size and pads out to a touch target. */ .xpl { display: inline-flex; align-items: center; justify-content: center; margin-left: var(--space-1); padding: 0; width: 1.5rem; height: 1.5rem; vertical-align: -0.3em; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-3); cursor: pointer; } .xpl:hover, .xpl:focus-visible { background: var(--surface-sunken); color: var(--text-1); } .xpl .icon { width: 0.9375rem; height: 0.9375rem; } /* The occupancy headline: one number big enough to be the answer, and the sentence that says what to do about it. Both live in the card, above the bar, so the eye lands on the percentage first. */ .occ-pct { font-size: var(--t-title1-size); line-height: 1.1; font-weight: 700; margin: var(--space-2) 0 var(--space-2); } .occ-say { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0 var(--space-2); padding: var(--space-3); background: var(--accent-subtle); color: var(--accent-subtle-fg); border-radius: var(--radius-md); font-size: var(--t-footnote-size); } .occ-say .icon { flex: none; margin-top: 1px; } .trend { display: flex; align-items: flex-end; gap: var(--space-1); padding: 0 2px; min-height: 8rem; } .tr-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); border-radius: var(--radius-xs); } .tr-col:hover, .tr-col:focus-visible { background: var(--surface-sunken); } .tr-b { display: flex; align-items: flex-end; gap: 3px; height: 6.875rem; } .tr-b i, .tr-b u { display: block; width: 0.6875rem; height: var(--h, 0%); border-radius: 3px 3px 0 0; } .tr-b i { background: var(--chart-1); } .tr-b u { background: var(--chart-2); } /* A column is a thirtieth of the chart, so "10 ago" wrapped onto two lines and shoved its own bar sideways. Only one label in five is shown, so it may spill over its neighbours: there is room. */ .tr-col small { color: var(--text-3); font-size: var(--t-caption-size); white-space: nowrap; overflow: visible; } .legend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--t-footnote-size); color: var(--text-2); } .legend .k { width: 0.5625rem; height: 0.5625rem; border-radius: 2px; display: inline-block; margin: 0 0 0 var(--space-3); flex: none; } .legend .k:first-child { margin-left: 0; } .legend .k.income { background: var(--chart-1); } .legend .k.expense { background: var(--chart-2); } .catbar { margin-bottom: var(--space-3); } .catbar > div { display: flex; justify-content: space-between; font-size: var(--t-footnote-size); margin-bottom: var(--space-1); } .catbar .track { height: 0.5rem; background: var(--surface-sunken); border-radius: var(--radius-xs); overflow: hidden; } .catbar .track i { display: block; height: 100%; width: var(--w, 0%); background: var(--chart-2); } /* -- website figures (views/analytics.js): one series, the website colour of the whole panel -- */ .tr-b i.web, .catbar .track i.web { background: var(--chart-6); } .trend.days { gap: 2px; } /* 30 bars: a 2px surface gap between fills */ .trend.days .tr-col { gap: 2px; } .trend.days .tr-b { width: 100%; height: 6.875rem; } .trend.days .tr-b i { width: 100%; min-width: 3px; } .trend.days .tr-col small { visibility: hidden; } /* every fifth day is labelled; the readout names the rest */ .trend.days .tr-col:nth-child(5n+1) small, .trend.days .tr-col:last-child small { visibility: visible; } .site-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .site-head b { font-size: var(--t-title2-size); font-weight: 700; letter-spacing: var(--t-title2-ls); color: var(--text-1); } .site-head > span { font-size: var(--t-footnote-size); color: var(--text-2); margin-right: var(--space-2); } .site-card .chart { margin-bottom: var(--space-4); } .metricas.funnel .m i { color: var(--text-2); } @media (max-width: 56.25rem) { .metricas.funnel { grid-template-columns: repeat(2, 1fr); } } .yoy { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-footnote-size); } .yoy span { flex: 1; color: var(--text-2); } .yoy em { font-style: normal; color: var(--text-3); font-size: var(--t-caption-size); } .yoy i { font-style: normal; font-weight: 700; min-width: 3.75rem; text-align: right; font-variant-numeric: tabular-nums; } .yoy i { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; } .yoy i.up { color: var(--success-text); } .yoy i.down { color: var(--danger-text); } /* -- assistant + website -- */ .featrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); } .featrow:last-of-type { border-bottom: 0; } .featrow b { display: block; font-size: var(--t-subhead-size); font-weight: 600; } .featrow small { display: block; color: var(--text-2); font-size: var(--t-footnote-size); } .featrow > div { flex: 1; min-width: 0; } .featrow .ok { color: var(--success-text); display: inline-flex; } .featrow .off { color: var(--text-3); display: inline-flex; } .site-prev { width: 100%; height: 18.75rem; border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-raised); margin: var(--space-3) 0; } .probe { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); min-height: 11rem; max-height: 20rem; overflow: auto; margin-bottom: var(--space-3); } .probe .wa-b { max-width: 88%; } .probe-in { display: flex; gap: var(--space-2); align-items: flex-end; } .probe-in textarea { flex: 1; min-height: var(--control-md); max-height: 7rem; border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4); resize: none; } .wa-b.dots { opacity: 0.6; letter-spacing: 3px; } /* -- master/detail (customers) -- */ .mdet { display: grid; grid-template-columns: 19.5rem 1fr; gap: var(--space-4); align-items: start; } .md-list { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: hidden; } .md-top { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--hairline); } .md-top .wa-search { margin: 0; } .md-rows { max-height: calc(100dvh - 12rem); overflow: auto; } .md-rows .wa-row.on, .md-rows .wa-row[aria-current="true"] { background: var(--accent-subtle); } .md-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .md-head h3 { margin: 0; flex: 1; min-width: 0; } /* the patient's acudiente and siblings on the same number, right under the name (02.10.2026) */ .fam-line { margin: calc(-1 * var(--space-2)) 0 var(--space-3); gap: var(--space-2); align-items: center; } .md-content { margin-top: var(--space-3); } /* A patient's Datos in columns where the room allows (Ivan, 25.10.2026), measured on the box it sits in -- the detail pane, the new-patient sheet -- not on the window: two columns in a narrow pane, one on a phone. */ .cu-wrap { container-type: inline-size; } .cu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); align-items: start; } .cu-grid > * { min-width: 0; } .cu-grid .span-2 { grid-column: span 2; } .cu-grid .span-all { grid-column: 1 / -1; } .cu-grid [hidden] { display: none; } @container (max-width: 34rem) { .cu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cu-grid .span-2 { grid-column: 1 / -1; } } @container (max-width: 22rem) { .cu-grid { grid-template-columns: minmax(0, 1fr); } .cu-grid > * { grid-column: 1 / -1; } } .cu-bill { margin-top: var(--space-3); } .cu-bill-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .cu-bill-head .grow { flex: 1 1 14rem; min-width: 0; } .cu-bill-head .primary { font-weight: 600; } .cu-deliv, .cu-rec, .cu-locker { margin-top: var(--space-2); } .cu-locker-code { font-size: var(--t-title3-size); letter-spacing: .02em; } .pre-lines { white-space: pre-line; margin: var(--space-1) 0 var(--space-2); } .cu-ins { margin-block: var(--space-3); } .cu-ins > summary { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; cursor: pointer; } .cu-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; align-self: end; padding-bottom: var(--space-3); } .cu-nav[hidden], .cu-nav > [hidden] { display: none; } /* a date in a column of Datos: the field takes the column, its calendar button stays beside it */ .cu-grid .dt { display: flex; flex-wrap: nowrap; width: 100%; } .cu-grid .dt input.dt-face[type="text"] { flex: 1 1 auto; width: auto; } /* a phone shows six tabs of a patient by scrolling them, never by widening the page (17.10.2026) */ .mdet > * { min-width: 0; } .mdet .tabs { overflow-x: auto; scrollbar-width: none; } .mdet .tabs > button { flex: none; white-space: nowrap; } .md-head #cu_back { display: none; } @media (max-width: 56.25rem) { .mdet { grid-template-columns: 1fr; } .mdet .md-body { display: none; } .mdet.showdetail .md-list { display: none; } .mdet.showdetail .md-body { display: block; } .md-head #cu_back { display: inline-flex; } .md-rows { max-height: none; } } /* ---- first steps (/start) ---------------------------------------------------------------------- */ .ob-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); } .ob-progress { min-width: 12rem; flex: 0 1 18rem; } .ob-progress .qbar { margin-top: var(--space-2); } .ob-card { margin-bottom: var(--space-4); } .ob-card.is-done { opacity: 0.82; } .ob-n { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; margin-right: var(--space-2); border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-text); font-size: var(--t-footnote-size); font-weight: 700; } .ob-fields { display: grid; gap: var(--space-3); } .ob-field { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; cursor: pointer; } .ob-field > input[type=checkbox] { margin-top: 0.35em; width: 1rem; height: 1rem; accent-color: var(--accent); } .ob-field > span { display: grid; gap: var(--space-1); min-width: 0; } .ob-field > span > b { font-size: var(--t-footnote-size); color: var(--text-2); font-weight: 600; } .ob-field input:not([type=checkbox]), .ob-field textarea { width: 100%; } .ob-svcs { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); } .ob-svc { display: grid; grid-template-columns: auto minmax(8rem, 2fr) 5.5rem 4.5rem minmax(6rem, 1fr); gap: var(--space-2); align-items: center; } .ob-svc input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--accent); } .ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; } .ob-tile { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-1); font: inherit; font-weight: 600; cursor: pointer; } .ob-tile:hover { border-color: var(--accent); } .ob-url { display: block; margin: var(--space-2) 0 var(--space-3); word-break: break-all; } .ob-domain { margin-top: var(--space-4); } .ob-foot { margin-top: var(--space-5); } @media (max-width: 40rem) { .ob-svc { grid-template-columns: auto 1fr; } .ob-svc input[type=number] { grid-column: 2; } } /* ---- support assistant (static/views/support.js) ----------------------------- */ .sup-root .modal-panel { width: min(36rem, 100%); height: min(46rem, 90dvh); display: flex; flex-direction: column; } .sup-root .modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .sup { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); } .sup-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); } .sup-log { flex: 1; min-height: 8rem; overflow: auto; background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); } .sup-log .wa-b { max-width: 92%; } .sup-a p, .sup-a ol, .sup-a ul { margin: 0 0 var(--space-2); } .sup-a ol, .sup-a ul { padding-left: var(--space-5); } .sup-a > :last-child { margin-bottom: 0; } .sup-a .help-shot { margin: var(--space-2) 0; } .sup-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 var(--space-3); } .sup-meta:empty { display: none; } .sup-rate { color: var(--text-3); } .sup-rate[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-subtle); } .sup-note { display: flex; width: fit-content; align-items: center; gap: var(--space-1); margin: var(--space-2) auto; padding: var(--space-1) var(--space-3); font-size: var(--t-caption-size); color: var(--success-text); background: var(--success-subtle); border-radius: var(--radius-full); } .sup-hello { color: var(--text-2); font-size: var(--t-subhead-size); } .sup-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .sup-chips .btn { max-width: 100%; white-space: normal; line-height: 1.3; text-align: left; padding-block: var(--space-1); } .sup-foot { display: flex; flex-wrap: wrap; gap: var(--space-1); } .sup-tickets { list-style: none; margin: 0; padding: 0; overflow: auto; } .sup-tickets li { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); } .sup-tickets li:last-child { border-bottom: 0; } .sup-tickets .row { display: flex; align-items: center; gap: var(--space-2); } .sup-tickets .row b { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-subhead-size); } .sup-tickets small { display: block; margin-top: var(--space-1); color: var(--text-3); font-size: var(--t-footnote-size); } .sup-tickets .help-tip { margin: var(--space-2) 0 0; } .sup-fab { display: none; } @media (max-width: 55rem) { .sup-btn { display: none; } .sup-fab { display: inline-grid; place-items: center; position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); width: var(--control-lg); height: var(--control-lg); border-radius: 50%; background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-overlay); z-index: var(--z-nav); } .sup-fab:hover { background: var(--accent-hover); } body.chat-open .sup-fab, .shell[data-focus="calendar"] .sup-fab { display: none; } .shell:has(.sup-fab) .content:not(.wa-host) { padding-bottom: calc(var(--control-lg) + var(--space-8)); } /* the last row scrolls clear of it */ } @media (max-width: 34.99rem) { .sup-root.as-sheet .modal-panel { height: 88dvh; } } /* ---- the phone's tab bar (step 3 of "que se sienta como una aplicación", 25.10.2026) ---------------------------- Five places at the thumb and «Más» for the whole menu, which replaces the ☰. Everything that sat on the bottom edge -- the assistant's button, toasts, Configuración's Guardar, the download drops, the last line -- moves up by its height. It steps aside for an open chat thread, the agenda's full screen, and while typing: on a phone the keyboard takes half the screen, and a bar riding on top of it would take most of the rest. */ .tabbar { display: none; } @media (max-width: 55rem) { body:has(#tabbar) { --tabbar-h: calc(3.5rem + env(safe-area-inset-bottom, 0px)); } /* body: the toasts live outside the shell */ .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface-raised); border-top: 1px solid var(--hairline); } /* solid: see-through, a chart or a line of text under the labels made them hard to read */ .tabbar > a, .tabbar > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: var(--control-md); padding: 0 2px; background: none; border: 0; color: var(--text-2); font-family: inherit; font-size: 0.6875rem; font-weight: 500; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tabbar > * > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar > .on { color: var(--accent-text); } /* colour, not weight: bold made "Pacientes" wider than its tab */ .tabbar .icon { width: var(--icon-24); height: var(--icon-24); } .topbar .ham { display: none; } .content:not(.wa-host) { padding-bottom: calc(var(--tabbar-h) + var(--space-6)); } .shell:has(.sup-fab) .content:not(.wa-host) { padding-bottom: calc(var(--tabbar-h) + var(--control-lg) + var(--space-8)); } .sup-fab { bottom: calc(var(--tabbar-h) + var(--space-3)); } body:has(#tabbar) .toast-region { bottom: calc(var(--tabbar-h) + var(--space-3)); } .content .cfg-save, .content .dl-drops { bottom: calc(var(--tabbar-h) + var(--space-2)); } /* .content: outweighs their own rules further down */ body:has(.cfg-save:not([hidden])) .sup-fab { display: none; } /* changes to save: the round button would sit on Guardar */ body.chat-open .tabbar, .shell[data-focus="calendar"] .tabbar, body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), textarea):focus) .tabbar { display: none; } body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), textarea):focus) .sup-fab { bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); } } /* Printing the cash report: the sheet alone, nothing of the panel around it. Last in the file so it overrides the rules above without !important (03.10.2026). */ /* --- the date field (ui.js dateField): month in letters, our own calendar ------------------------ The native input stays in the DOM carrying the ISO value and is only taken out of the layout, so nothing that reads it changes. Everything visible here is ours. */ .dt { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; flex: 0 1 auto; } .dt-native { display: none; } /* kept for its ISO value and its id, never shown or reachable */ /* The face must hold "03/Oct/2026" whole: a year cut in half is the very confusion this replaced. The time may shrink and the pair may wrap onto two lines, but the date itself never gives ground. */ /* The base input rule is input:not([type=checkbox]):not([type=radio]):not([type=range]) -- three attribute selectors, specificity (0,3,1) -- and sets width:100%. A plain `.dt .dt-face` (0,2,0) lost to it, so every date field stretched to fill its row and pushed the calendar button underneath (Ivan, 06.10.2026). These match it and sit later in the file, so they win by order. */ .dt input.dt-face[type="text"] { flex: 0 0 auto; width: 10.5rem; min-width: 0; font-variant-numeric: tabular-nums; } /* When the three do not fit on one line it is the TIME that drops, never the button that opens the calendar: a date with an orphaned icon under it reads like a mistake. */ .dt input.dt-time[type="time"] { order: 2; flex: 0 0 auto; width: 7.5rem; min-width: 0; } .dt-open { order: 1; flex: 0 0 auto; } .dt-warn { order: 3; } .dt-warn { flex: 1 0 100%; margin: var(--space-1) 0 0; font-size: var(--t-footnote-size); color: var(--warning-text); } .dt-warn:not(:empty) { order: 3; } .dt-warn:empty { display: none; } .dt.is-past .dt-face { border-color: var(--warning-solid); } .dt-pop { position: fixed; z-index: var(--z-overlay); top: var(--pop-top, 0); left: var(--pop-left, 0); max-height: min(24rem, 60vh); overflow: auto; width: min(21rem, calc(100vw - 2rem)); background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); padding: var(--space-3); } .dt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); } .dt-head b { font-size: var(--t-headline-size); } .dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dt-w { display: flex; align-items: center; justify-content: center; height: 1.75rem; font-size: var(--t-caption-size); color: var(--text-3); } .dt-d { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); } .dt-d:hover { background: var(--surface-sunken); } .dt-d.past { color: var(--text-3); } .dt-d.now { box-shadow: inset 0 0 0 1px var(--accent); } .dt-d.on { background: var(--accent); color: var(--accent-fg); } .dt-d:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .dt-foot { display: flex; justify-content: flex-end; margin: var(--space-3) 0 0; } /* Opened near the foot of a sheet, the calendar hangs upwards instead of off the end of it. */ /* a package's sessions, one date each (card #174): two columns where they fit */ .pkg-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--space-4); } /* a whole row that opens something reads as a row, not as an underlined link (Paquetes, Resumen) */ a.row { text-decoration: none; color: inherit; } a.row:hover { background: var(--surface-sunken); } /* moving one session of a package, right under its row (Ivan, 09.10.2026) */ .pk-move { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); background: var(--surface-sunken); } /* ---- Cotizaciones: the quote editor (Tratos, 16.10.2026) ------------------------------------- */ .modal-panel:has(.qe) { width: min(52rem, 100%); } .qe-lines { display: grid; gap: var(--space-3); } .qe-line { border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--surface-raised); } .qe-line .field { margin-block: var(--space-2); } .qe-row1 { display: flex; align-items: end; gap: var(--space-2); } .qe-row1 > .field { flex: 1; min-width: 0; } .qe-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: end; } .qe-amt { display: block; padding-block: var(--space-2); text-align: right; } .qe-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .qe-grid3 > [hidden] { display: none; } .qe-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: var(--space-4); align-items: start; margin-top: var(--space-3); } .qe-sums { margin: 0; } @media (max-width: 40rem) { .qe-nums, .qe-grid3 { grid-template-columns: 1fr 1fr; } .qe-foot { grid-template-columns: 1fr; } } /* ---- Materiales: a product's recipe (17.10.2026) ---------------------------------------------- */ /* the specificity beats the global input rule, which makes every input as wide as its field */ .rc-line > input.rc-qty:not([type="checkbox"]):not([type="radio"]) { width: 6rem; flex: 0 0 6rem; text-align: right; } .rc-line > .grow { flex: 1 1 9rem; min-width: 9rem; } .rc-sums input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { width: 8rem; text-align: right; } .rc-sums .dl-row { align-items: center; } /* Mi sitio → design gallery (card #184): each tile is drawn from the design's own colours, passed as data (--d-*), so the panel's stylesheet carries no page colours of its own */ .design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); margin-top: var(--space-3); } .design-tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--surface-raised); } .design-tile.on { box-shadow: 0 0 0 2px var(--accent-ring); border-color: transparent; } .design-tile .cluster { margin-top: auto; } .ds-name { font-weight: 600; font-size: var(--t-subhead-size); } .ds-mock { display: flex; flex-direction: column; gap: var(--space-2); aspect-ratio: 16 / 10; padding: var(--space-3); overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--d-bg); color: var(--d-ink); } .ds-mock b { font-family: var(--d-font); font-weight: var(--d-w); text-transform: var(--d-tt); font-size: var(--t-headline-size); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-mock i { display: block; width: 80%; height: 0.375rem; border-radius: 3px; background: currentColor; opacity: 0.22; } .ds-mock i + i { width: 55%; } .ds-mock span { margin-top: auto; width: 45%; height: 0.875rem; border-radius: var(--d-radius); background: var(--d-accent); } /* Casillero (static/views/parcels.js): a parcel row is a tick box in front of the link to its sheet, and the three sides of a box sit on one line */ .pc-row > a { flex: 1; min-width: 0; text-decoration: none; color: inherit; } .pc-row > a:hover .primary { text-decoration: underline; } /* a parcel on the road carries its Google Maps / Waze buttons; on a narrow screen they take a line of their own under the parcel, or they squeeze its words into a column one word wide */ .pc-row .pc-nav { flex: none; } @media (max-width: 40rem) { .pc-row:has(.pc-nav) { flex-wrap: wrap; } .pc-row:has(.pc-nav) > a { flex-basis: calc(100% - 2.5rem); } .pc-row .pc-nav { order: 3; flex-basis: 100%; padding-left: 2.25rem; } } .pc-dims { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--space-2); align-items: center; } .pc-dims > input { min-width: 0; } /* -- the Resumen of a locker (views/parcels.js N.parcelsOverview): tiles that open their list, five steps of the way -- */ .metricas a.m { display: block; color: inherit; text-decoration: none; } .metricas a.m:hover, .metricas a.m:focus-visible { border-color: var(--accent); } .metricas.pc-flow { grid-template-columns: repeat(5, 1fr); } @media (max-width: 56.25rem) { .metricas.pc-flow { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 35rem) { .metricas.pc-flow { grid-template-columns: repeat(2, 1fr); } } /* -- Configuración as an app's settings (views/settings.js, 25.10.2026): the list and the page side by side on a desk, one after the other on a phone; a row says how its subject stands; switches save at once, the rest with the page's Guardar, which appears only when something changed -- */ .cfg { display: grid; grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); gap: var(--space-6); align-items: start; } .cfg-list { position: sticky; top: var(--space-2); max-height: calc(100vh - 6rem); overflow: auto; padding-bottom: var(--space-4); } .cfg-search { display: flex; align-items: center; gap: var(--space-2); background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); padding: 0 var(--space-3); margin-bottom: var(--space-2); color: var(--text-2); } /* .cfg-list in front: the general input rule (input:not(…):not(…):not(…)) outweighs a two-part selector */ .cfg-list .cfg-search input[type="search"] { border: 0; background: none; outline: 0; box-shadow: none; padding: var(--space-3) 0; width: 100%; min-width: 0; color: var(--text-1); min-height: 0; } .cfg-search:focus-within { border-color: var(--accent-ring); } .cfg-grp { font-size: var(--t-footnote-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin: var(--space-4) var(--space-2) var(--space-2); } .cfg-rows { background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); overflow: hidden; } .cfg-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); color: inherit; text-decoration: none; border-top: 1px solid var(--hairline); } .cfg-row:first-child { border-top: 0; } .cfg-row:hover, .cfg-row:focus-visible { background: var(--surface-sunken); } .cfg-row[aria-current="page"] { background: var(--accent-subtle); } .cfg-row .grow { flex: 1; min-width: 0; } .cfg-row .primary { display: block; font-weight: 600; color: var(--text-1); } .cfg-row .secondary { display: block; font-size: var(--t-footnote-size); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfg-row .secondary .ok { color: var(--success-text); font-weight: 600; } .cfg-row .secondary .warn { color: var(--warning-text); font-weight: 600; } .cfg-row > .icon:last-child { color: var(--text-3); flex: none; } .cfg-ic { width: 2rem; height: 2rem; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--accent-fg); flex: none; background: var(--chart-3); } .cfg-ic[data-tone="1"] { background: var(--chart-1); } .cfg-ic[data-tone="4"] { background: var(--chart-4); } .cfg-ic[data-tone="5"] { background: var(--chart-5); } .cfg-page { min-width: 0; padding-bottom: var(--space-4); } #cfg_body > * + * { margin-top: var(--space-4); } .cfg-title { margin: 0 0 var(--space-1); } .cfg-page > .t-footnote { margin-bottom: var(--space-4); } .cfg-back { display: none; align-items: center; gap: var(--space-1); color: var(--accent-text); font-weight: 600; text-decoration: none; margin-bottom: var(--space-2); } .cfg-save { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); } .cfg-save[hidden] { display: none; } .cfg-save .grow { font-weight: 600; } .cfg-save .field-error { margin: 0; } .cfg-flash { animation: cfg-flash 1.8s ease-out; border-radius: var(--radius-sm); } @keyframes cfg-flash { 0%, 40% { box-shadow: 0 0 0 4px var(--accent-subtle); } 100% { box-shadow: 0 0 0 4px transparent; } } @media (prefers-reduced-motion: reduce) { .cfg-flash { animation: none; box-shadow: 0 0 0 4px var(--accent-subtle); } } /* a choice that is on or off by touching it (the ways of paying in Caja y recibos) */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--hairline-2); background: var(--surface-raised); color: var(--text-1); cursor: pointer; min-height: 2.25rem; } .chip[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent-subtle-fg); border-color: transparent; font-weight: 600; } .chip:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } @media (max-width: 56.25rem) { .cfg { grid-template-columns: minmax(0, 1fr); } .cfg-list { position: static; max-height: none; overflow: visible; } .cfg[data-open="1"] .cfg-list, .cfg[data-open="0"] .cfg-page { display: none; } .cfg-back { display: inline-flex; } } /* ---- moving between sections (card #226) ------------------------------------------------------------ The way the reference Ivan chose moves (29.10.2026), measured and rebuilt on our tokens: the content slides a little out to one side while it fades, the next section comes in from the other side, and the side follows the menu (html[data-nav-dir], app.js mover()). The topbar, the menu and the tab bar do not move. The names exist only while the move runs (html.nav-moving), so #main is no stacking context the rest of the time. */ html.nav-moving #main { view-transition-name: section; } html.nav-moving .topbar { view-transition-name: topbar; } html.nav-moving #sidebar { view-transition-name: sidebar; } html.nav-moving #tabbar { view-transition-name: tabbar; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-group(section) { animation: none; } ::view-transition-group(topbar), ::view-transition-group(sidebar), ::view-transition-group(tabbar) { animation: none; z-index: 1; } ::view-transition-old(topbar), ::view-transition-old(sidebar), ::view-transition-old(tabbar) { display: none; } ::view-transition-new(topbar), ::view-transition-new(sidebar), ::view-transition-new(tabbar) { animation: none; } ::view-transition-old(section) { mix-blend-mode: normal; animation: nav-out-fwd var(--motion-base) var(--ease-exit) both; } ::view-transition-new(section) { mix-blend-mode: normal; animation: nav-in-fwd var(--motion-page) var(--ease-standard) 60ms both; } html[data-nav-dir="back"]::view-transition-old(section) { animation-name: nav-out-back; } html[data-nav-dir="back"]::view-transition-new(section) { animation-name: nav-in-back; } @keyframes nav-out-fwd { to { opacity: 0; transform: translateX(calc(-1 * var(--space-4))); } } @keyframes nav-out-back { to { opacity: 0; transform: translateX(var(--space-4)); } } @keyframes nav-in-fwd { from { opacity: 0; transform: translateX(var(--space-6)); } } @keyframes nav-in-back { from { opacity: 0; transform: translateX(calc(-1 * var(--space-6))); } } @keyframes nav-rise { from { opacity: 0; transform: translateY(var(--space-3)) scale(0.985); } } @keyframes nav-row { from { opacity: 0; transform: translateY(var(--space-2)); } } /* A section arriving: its blocks rise into place one after another, then its first rows, a beat apart. Only for about a second after the arrival (data-enter, app.js): a list refreshed later just changes. Nothing of this for somebody who asked for less motion -- not even the delays, which would only hide the page for a moment. */ @media (prefers-reduced-motion: no-preference) { .content[data-enter] > :not(.cx), .content[data-enter] .cx > * { animation: nav-rise var(--motion-page) var(--ease-standard) both; } .content[data-enter] > :nth-child(2), .content[data-enter] .cx > :nth-child(2) { animation-delay: 60ms; } .content[data-enter] > :nth-child(3) { animation-delay: 120ms; } .content[data-enter] > :nth-child(4) { animation-delay: 180ms; } .content[data-enter] > :nth-child(n+5) { animation-delay: 240ms; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(-n+12) { animation: nav-row var(--motion-slow) var(--ease-standard) both; animation-delay: calc(var(--motion-fast) + var(--k, 0) * 35ms); } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(2) { --k: 1; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(3) { --k: 2; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(4) { --k: 3; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(5) { --k: 4; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(6) { --k: 5; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(7) { --k: 6; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(8) { --k: 7; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(9) { --k: 8; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(10) { --k: 9; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(11) { --k: 10; } .content[data-enter] :is(.cx-row, .wa-row, .rows > .row, .table tbody tr):nth-child(12) { --k: 11; } } /* on a phone an opened chat comes in like a new screen, from the right */ @media (max-width: 56.25rem) and (prefers-reduced-motion: no-preference) { .cx[data-open="1"] .cx-pane { animation: nav-in-fwd var(--motion-slow) var(--ease-standard) both; } }