/* ============================================================ Conecta — Fretadão Design System (vendorizado) Fonte: claude.ai/design projeto "Fretadão DS - Slide Deck" (bbe4338e-d8ec-4ce2-a8f5-b1093f29420e). Tokens + classes de componente copiados dos arquivos tokens/(vários).css e components (vários) .jsx do projeto — sem @import entre arquivos (Propshaft não reescreve paths relativos de @import como o Sprockets fazia), então tudo fica num único arquivo. A fonte (Montserrat) é carregada via Google Fonts no do layout, não aqui. ============================================================ */ /* ---------- tokens/colors.css ---------- */ :root { --color-midnight-050: rgb(240, 244, 252); --color-midnight-100: rgb(176, 187, 204); --color-midnight-200: rgb(138, 154, 180); --color-midnight-300: rgb(84, 108, 145); --color-midnight-400: rgb(51, 80, 124); --color-midnight-500: rgb(0, 36, 91); --color-midnight-600: rgb(0, 33, 83); --color-midnight-700: rgb(0, 26, 65); --color-midnight-800: rgb(0, 20, 50); --color-midnight-900: rgb(0, 15, 38); --color-teal-050: rgb(233, 247, 245); --color-teal-100: rgb(186, 230, 225); --color-teal-200: rgb(153, 218, 210); --color-teal-300: rgb(107, 201, 190); --color-teal-400: rgb(78, 191, 177); --color-teal-500: rgb(34, 175, 158); --color-teal-600: rgb(31, 159, 144); --color-teal-700: rgb(24, 124, 112); --color-teal-800: rgb(19, 96, 87); --color-teal-900: rgb(14, 74, 66); --color-purple-050: rgb(247, 237, 245); --color-purple-100: rgb(229, 198, 224); --color-purple-200: rgb(216, 170, 209); --color-purple-300: rgb(199, 132, 188); --color-purple-400: rgb(188, 108, 175); --color-purple-500: rgb(171, 71, 155); --color-purple-600: rgb(156, 65, 141); --color-purple-700: rgb(121, 50, 110); --color-purple-800: rgb(94, 39, 85); --color-purple-900: rgb(72, 30, 65); --color-neutral-000: rgb(255, 255, 255); --color-neutral-050: rgb(244, 245, 247); --color-neutral-100: rgb(220, 223, 227); --color-neutral-200: rgb(202, 206, 213); --color-neutral-300: rgb(177, 184, 193); --color-neutral-400: rgb(162, 170, 181); --color-neutral-500: rgb(139, 149, 163); --color-neutral-600: rgb(126, 136, 148); --color-neutral-700: rgb(99, 106, 116); --color-neutral-800: rgb(76, 82, 90); --color-neutral-900: rgb(58, 63, 68); --color-neutral-950: rgb(25, 28, 31); --color-blue-050: rgb(230, 246, 251); --color-blue-100: rgb(177, 226, 243); --color-blue-200: rgb(139, 213, 237); --color-blue-300: rgb(85, 193, 229); --color-blue-400: rgb(53, 181, 224); --color-blue-500: rgb(2, 163, 216); --color-blue-600: rgb(2, 148, 197); --color-blue-700: rgb(1, 116, 153); --color-blue-800: rgb(1, 90, 119); --color-blue-900: rgb(1, 68, 91); --color-green-050: rgb(232, 243, 234); --color-green-100: rgb(185, 218, 190); --color-green-200: rgb(151, 200, 159); --color-green-300: rgb(103, 175, 115); --color-green-400: rgb(73, 159, 88); --color-green-500: rgb(28, 135, 46); --color-green-600: rgb(25, 123, 42); --color-green-700: rgb(20, 96, 33); --color-green-800: rgb(15, 74, 25); --color-green-900: rgb(12, 57, 19); --color-orange-050: rgb(250, 246, 230); --color-orange-100: rgb(240, 226, 178); --color-orange-200: rgb(232, 213, 141); --color-orange-300: rgb(222, 193, 89); --color-orange-400: rgb(216, 181, 57); --color-orange-500: rgb(206, 163, 7); --color-orange-600: rgb(187, 148, 6); --color-orange-700: rgb(146, 116, 5); --color-orange-800: rgb(113, 90, 4); --color-orange-900: rgb(87, 68, 3); --color-red-050: rgb(248, 235, 233); --color-red-100: rgb(234, 193, 185); --color-red-200: rgb(224, 163, 152); --color-red-300: rgb(210, 122, 104); --color-red-400: rgb(201, 96, 75); --color-red-500: rgb(188, 56, 30); --color-red-600: rgb(171, 51, 27); --color-red-700: rgb(133, 40, 21); --color-red-800: rgb(103, 31, 17); --color-red-900: rgb(79, 24, 13); --color-alpha-black-2: rgba(0, 0, 0, 0.02); --color-alpha-black-5: rgba(0, 0, 0, 0.04); --color-alpha-black-8: rgba(0, 0, 0, 0.07); --color-alpha-black-12: rgba(0, 0, 0, 0.11); --color-alpha-black-16: rgba(0, 0, 0, 0.16); --color-alpha-black-24: rgba(0, 0, 0, 0.24); --color-alpha-black-32: rgba(0, 0, 0, 0.36); --color-alpha-black-48: rgba(0, 0, 0, 0.52); --color-alpha-black-64: rgba(0, 0, 0, 0.70); --color-alpha-midnight-2: rgba(0, 36, 91, 0.03); --color-alpha-midnight-5: rgba(0, 36, 91, 0.04); --color-alpha-midnight-8: rgba(0, 36, 91, 0.07); --color-alpha-midnight-12: rgba(0, 36, 91, 0.11); --color-alpha-white-2: rgba(255, 255, 255, 0.03); --color-alpha-white-5: rgba(255, 255, 255, 0.04); --color-alpha-white-8: rgba(255, 255, 255, 0.07); --color-alpha-white-12: rgba(255, 255, 255, 0.11); --color-alpha-white-16: rgba(255, 255, 255, 0.16); --color-alpha-white-24: rgba(255, 255, 255, 0.24); --color-alpha-white-32: rgba(255, 255, 255, 0.36); --color-alpha-white-48: rgba(255, 255, 255, 0.52); --color-alpha-white-64: rgba(255, 255, 255, 0.70); } /* ---------- tokens/semantic.css (Light apenas — sem dark mode neste app) ---------- */ :root { --surface-app: var(--color-neutral-000); --surface-section: var(--color-neutral-050); --surface-overlay: var(--color-alpha-black-48); --surface-inverse: var(--color-neutral-950); --surface-default: var(--color-neutral-000); --surface-raised: var(--color-neutral-000); --surface-disabled: var(--color-neutral-100); --surface-brand: var(--color-midnight-500); --surface-brand-accent: var(--color-teal-500); --text-heading: var(--color-neutral-950); --text-body: var(--color-neutral-800); --text-muted: var(--color-neutral-500); --text-placeholder: var(--color-neutral-300); --text-brand: var(--color-midnight-500); --text-brand-secondary: var(--color-teal-600); --text-link: var(--color-blue-600); --text-on-brand: var(--color-neutral-000); --text-inverse: var(--color-neutral-000); --icon-primary: var(--color-neutral-800); --icon-secondary: var(--color-neutral-600); --icon-muted: var(--color-neutral-300); --icon-brand: var(--color-midnight-500); --icon-brand-secondary: var(--color-teal-500); --icon-on-brand: var(--color-neutral-000); --border-subtle: var(--color-neutral-100); --border-default: var(--color-neutral-200); --border-strong: var(--color-neutral-300); --border-brand: var(--color-midnight-500); --border-accent: var(--color-teal-500); --action-primary-bg: var(--color-midnight-500); --action-primary-hover: var(--color-midnight-400); --action-primary-active: var(--color-midnight-600); --action-primary-soft: var(--color-midnight-050); --action-accent-bg: var(--color-teal-500); --action-accent-hover: var(--color-teal-400); --action-accent-active: var(--color-teal-600); --action-accent-soft: var(--color-teal-050); --action-destructive-bg: var(--color-red-500); --action-destructive-hover: var(--color-red-400); --action-destructive-active: var(--color-red-600); --interaction-neutral-hover: var(--color-alpha-black-5); --interaction-neutral-active: var(--color-alpha-black-8); --interaction-brand-hover: var(--color-alpha-midnight-2); --interaction-brand-active: var(--color-alpha-midnight-5); --focus-ring: var(--color-blue-500); --focus-inner: var(--color-neutral-000); --feedback-error: var(--color-red-500); --feedback-error-hover: var(--color-red-400); --feedback-error-bg: var(--color-red-050); --feedback-error-text: var(--color-red-800); --feedback-error-border: var(--color-red-200); --feedback-success: var(--color-green-500); --feedback-success-hover: var(--color-green-400); --feedback-success-bg: var(--color-green-050); --feedback-success-text: var(--color-green-800); --feedback-success-border: var(--color-green-200); --feedback-warning: var(--color-orange-500); --feedback-warning-hover: var(--color-orange-400); --feedback-warning-bg: var(--color-orange-050); --feedback-warning-text: var(--color-orange-800); --feedback-warning-border: var(--color-orange-200); --feedback-info: var(--color-blue-500); --feedback-info-hover: var(--color-blue-400); --feedback-info-bg: var(--color-blue-050); --feedback-info-text: var(--color-blue-800); --feedback-info-border: var(--color-blue-200); } /* ---------- tokens/spacing.css ---------- */ :root { --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px; } /* ---------- tokens/radius.css ---------- */ :root { --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; --radius-control: var(--radius-md); --radius-card: var(--radius-lg); --radius-surface: var(--radius-2xl); --radius-pill: var(--radius-full); } /* ---------- tokens/typography.css ---------- */ :root { --font-family-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family: var(--font-family-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-display: var(--font-weight-bold); --font-weight-heading: var(--font-weight-semibold); --font-weight-title: var(--font-weight-semibold); --font-weight-body: var(--font-weight-regular); --font-weight-button: var(--font-weight-semibold); --font-size-12: 12px; --font-size-14: 14px; --font-size-16: 16px; --font-size-18: 18px; --font-size-20: 20px; --font-size-24: 24px; --font-size-28: 28px; --font-size-32: 32px; --line-height-16: 16px; --line-height-20: 20px; --line-height-24: 24px; --line-height-28: 28px; --line-height-32: 32px; --line-height-36: 36px; --line-height-40: 40px; --letter-spacing-tight: -0.01em; --letter-spacing-wide: 0.02em; --letter-spacing-wider: 0.04em; --type-display-lg: var(--font-weight-display) var(--font-size-28)/var(--line-height-40) var(--font-family); --type-heading-lg: var(--font-weight-heading) var(--font-size-28)/var(--line-height-36) var(--font-family); --type-heading-md: var(--font-weight-heading) var(--font-size-24)/var(--line-height-32) var(--font-family); --type-heading-sm: var(--font-weight-heading) var(--font-size-20)/var(--line-height-28) var(--font-family); --type-title-md: var(--font-weight-title) var(--font-size-16)/var(--line-height-24) var(--font-family); --type-body-md: var(--font-weight-body) var(--font-size-14)/var(--line-height-20) var(--font-family); --type-body-sm: var(--font-weight-body) var(--font-size-12)/var(--line-height-16) var(--font-family); } .t-display-lg { font: var(--type-display-lg); letter-spacing: var(--letter-spacing-tight); color: var(--text-heading); } .t-heading-lg { font: var(--type-heading-lg); color: var(--text-heading); } .t-heading-md { font: var(--type-heading-md); color: var(--text-heading); } .t-heading-sm { font: var(--type-heading-sm); color: var(--text-heading); } .t-title-md { font: var(--type-title-md); color: var(--text-heading); } .t-body-md { font: var(--type-body-md); color: var(--text-body); } .t-body-sm { font: var(--type-body-sm); color: var(--text-body); } /* ---------- tokens/elevation.css ---------- */ :root { --shadow-ink-4: rgba(25, 28, 31, 0.04); --shadow-ink-6: rgba(25, 28, 31, 0.06); --shadow-ink-8: rgba(25, 28, 31, 0.08); --shadow-ink-10: rgba(25, 28, 31, 0.10); --elevation-1: 0 1px 2px 0 var(--shadow-ink-6), 0 0 1px 0 var(--shadow-ink-4); --elevation-2: 0 1px 2px 0 var(--shadow-ink-6), 0 1px 2px 0 var(--shadow-ink-4); --elevation-3: 0 2px 4px 0 var(--shadow-ink-8), 0 2px 8px 0 var(--shadow-ink-4); --elevation-4: 0 4px 8px 0 var(--shadow-ink-8), 0 4px 16px 0 var(--shadow-ink-4); --elevation-5: 0 8px 16px 0 var(--shadow-ink-10), 0 8px 24px 0 var(--shadow-ink-4); --elevation-card: var(--elevation-1); --shadow-focus: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-ring); } /* ---------- tokens/base.css ---------- */ body { font-family: var(--font-family-base); color: var(--text-body); background: var(--surface-section); } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: var(--font-weight-heading); } a { color: var(--text-link); } ::selection { background: var(--color-purple-100); color: var(--color-purple-900); } /* ---------- components/buttons/Button.jsx ---------- */ .cnc-btn { --_h: 44px; --_px: 24px; --_gap: 8px; --_fs: 14px; display: inline-flex; align-items: center; justify-content: center; gap: var(--_gap); height: var(--_h); padding: 0 var(--_px); font-family: var(--font-family); font-weight: var(--font-weight-button); font-size: var(--_fs); line-height: 1; letter-spacing: 0; border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; user-select: none; box-sizing: border-box; } .cnc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .cnc-btn[disabled] { cursor: not-allowed; } .cnc-btn--full { width: 100%; } .cnc-btn--sm { --_h: 36px; --_px: 12px; --_gap: 4px; --_fs: 12px; } .cnc-btn--md { --_h: 44px; --_px: 24px; --_gap: 8px; --_fs: 14px; } .cnc-btn--lg { --_h: 52px; --_px: 24px; --_gap: 8px; --_fs: 16px; } .cnc-btn--xl { --_h: 60px; --_px: 24px; --_gap: 8px; --_fs: 18px; } .cnc-btn--primary { background: var(--action-primary-bg); color: var(--text-on-brand); } .cnc-btn--primary:hover { background: var(--action-primary-hover); } .cnc-btn--primary:active { background: var(--action-primary-active); } .cnc-btn--secondary { background: var(--action-accent-bg); color: var(--text-on-brand); } .cnc-btn--secondary:hover { background: var(--action-accent-hover); } .cnc-btn--secondary:active { background: var(--action-accent-active); } .cnc-btn--tertiary { background: transparent; color: var(--text-brand); border-color: var(--border-default); } .cnc-btn--tertiary:hover { background: var(--interaction-neutral-hover); border-color: var(--border-strong); } .cnc-btn--tertiary:active { background: var(--interaction-neutral-active); } .cnc-btn--ghost { background: transparent; color: var(--text-brand); } .cnc-btn--ghost:hover { background: var(--interaction-neutral-hover); } .cnc-btn--ghost:active { background: var(--interaction-neutral-active); } .cnc-btn--link { background: transparent; color: var(--text-link); height: auto; padding: 0; border-radius: var(--radius-sm); } .cnc-btn--link:hover { text-decoration: underline; } .cnc-btn--destructive { background: var(--action-destructive-bg); color: var(--text-on-brand); } .cnc-btn--destructive:hover { background: var(--action-destructive-hover); } .cnc-btn--destructive:active { background: var(--action-destructive-active); } .cnc-btn--inverse { background: var(--surface-default); color: var(--text-brand); } .cnc-btn--inverse:hover { background: var(--color-neutral-050); } .cnc-btn--google { background: var(--surface-default); color: var(--text-heading); border-color: var(--border-default); border-radius: var(--radius-md); } .cnc-btn--google:hover { background: var(--surface-section); border-color: var(--border-strong); } .cnc-btn[disabled]:not(.cnc-btn--link):not(.cnc-btn--ghost):not(.cnc-btn--tertiary) { background: var(--surface-disabled); color: var(--text-placeholder); border-color: transparent; } .cnc-btn--tertiary[disabled] { color: var(--text-placeholder); border-color: var(--border-subtle); background: transparent; } /* ---------- components/feedback/Badge.jsx ---------- */ .cnc-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; font-family: var(--font-family); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); border-radius: var(--radius-full); white-space: nowrap; } .cnc-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; } .cnc-badge--neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .cnc-badge--primary { background: var(--action-primary-soft); color: var(--color-midnight-600); } .cnc-badge--accent { background: var(--action-accent-soft); color: var(--color-teal-700); } .cnc-badge--success { background: var(--feedback-success-bg); color: var(--feedback-success-text); } .cnc-badge--warning { background: var(--feedback-warning-bg); color: var(--feedback-warning-text); } .cnc-badge--error { background: var(--feedback-error-bg); color: var(--feedback-error-text); } .cnc-badge--info { background: var(--feedback-info-bg); color: var(--feedback-info-text); } /* ---------- components/data-display/Card.jsx ---------- */ .cnc-card { background: var(--surface-default); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--elevation-1); font-family: var(--font-family); overflow: hidden; display: flex; flex-direction: column; } .cnc-card--interactive { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; } .cnc-card--interactive:hover { box-shadow: var(--elevation-3); border-color: var(--border-default); } .cnc-card__header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; } .cnc-card__header-text { flex: 1 1 auto; min-width: 0; } .cnc-card__title { font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--text-heading); } .cnc-card__title a { color: inherit; text-decoration: none; } .cnc-card__title a:hover { text-decoration: underline; } .cnc-card__subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .cnc-card__action { flex: 0 0 auto; } .cnc-card__body { padding: 0 20px 20px; color: var(--text-body); font-size: 14px; line-height: 21px; } .cnc-card__footer { padding: 14px 20px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; margin-top: auto; } /* ---------- components/forms/Input.jsx ---------- */ .cnc-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-family); } .cnc-field__label { font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-wide); color: var(--text-body); } .cnc-field__req { color: var(--feedback-error); margin-left: 2px; } .cnc-input { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease; } .cnc-input:hover { border-color: var(--border-strong); } .cnc-input:focus-within { border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--action-primary-soft); } .cnc-input input, .cnc-input textarea { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--text-heading); resize: vertical; } .cnc-input input::placeholder, .cnc-input textarea::placeholder { color: var(--text-placeholder); } .cnc-input--invalid { border-color: var(--feedback-error); } .cnc-field__help { font-size: 12px; color: var(--text-muted); } .cnc-field__help--error { color: var(--feedback-error-text); } .cnc-field__checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-body); } /* ---------- components/forms/FileUpload.jsx ---------- */ .cnc-fu { font-family: var(--font-family); box-sizing: border-box; width: 100%; position: relative; } .cnc-fu__zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 148px; padding: 24px; box-sizing: border-box; width: 100%; background: var(--surface-default); border: 2px dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-body); text-align: center; } .cnc-fu__zone:hover { border-color: var(--border-strong); background: var(--surface-section); } .cnc-fu__icon { flex: 0 0 auto; display: inline-flex; color: var(--icon-secondary); } .cnc-fu__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cnc-fu__primary { font-size: 13px; line-height: 18px; color: var(--text-body); } .cnc-fu__link { color: var(--text-brand); font-weight: var(--font-weight-semibold); } .cnc-fu__hint { font-size: 12px; line-height: 16px; color: var(--text-muted); } .cnc-fu__file { font-size: 13px; font-weight: var(--font-weight-medium); color: var(--text-body); } .cnc-fu input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* ---------- components/navigation/Header.jsx (adaptado: barra midnight, como o app bar do UI kit) ---------- */ .cnc-hdr { font-family: var(--font-family); box-sizing: border-box; width: 100%; } .cnc-hdr__bar { display: flex; align-items: center; gap: 16px; box-sizing: border-box; height: 64px; background: var(--surface-brand); padding: 0 24px; } .cnc-hdr__logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; color: var(--text-on-brand); } .cnc-hdr__spacer { flex: 1 1 auto; } .cnc-hdr__actions { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; } .cnc-hdr__email { font-size: 13px; color: var(--color-alpha-white-64); } /* ---------- components/feedback/Alert.jsx ---------- */ .cnc-alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid; font-family: var(--font-family); } .cnc-alert__icon { flex: 0 0 auto; margin-top: 1px; } .cnc-alert__body { flex: 1 1 auto; font-size: 13px; line-height: 19px; } .cnc-alert--success { background: var(--feedback-success-bg); border-color: var(--feedback-success-border); color: var(--feedback-success-text); } .cnc-alert--error { background: var(--feedback-error-bg); border-color: var(--feedback-error-border); color: var(--feedback-error-text); } /* ---------- Utilitário para a "zona de risco" ---------- */ .cnc-danger-zone { background: var(--feedback-error-bg); border: 1px solid var(--feedback-error-border); border-radius: var(--radius-lg); } .cnc-danger-zone__header { border-bottom: 1px solid var(--feedback-error-border); } /* ---------- components/navigation/Tabs.jsx ---------- */ .cnc-tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); } .cnc-tab { position: relative; appearance: none; background: none; border: none; cursor: pointer; padding: 10px 14px; font-family: var(--font-family); font-size: 14px; font-weight: var(--font-weight-medium); color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .15s ease; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .cnc-tab:hover { color: var(--text-body); } .cnc-tab--active { color: var(--text-brand); font-weight: var(--font-weight-semibold); } .cnc-tab__ink { position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2.5px; background: var(--action-primary-bg); border-radius: var(--radius-full); } .cnc-tab__count { font-size: 11px; font-weight: var(--font-weight-semibold); padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface-section); color: var(--text-muted); } .cnc-tab--active .cnc-tab__count { background: var(--action-primary-soft); color: var(--color-midnight-600); } /* ---------- Analytics — gráfico de barras (aberturas por período) ---------- */ .cnc-chart { display: flex; align-items: flex-end; gap: 4px; height: 200px; border-bottom: 1px solid var(--border-subtle); } .cnc-chart-bar { flex: 1 1 0; max-width: 24px; min-height: 2px; position: relative; cursor: pointer; background: var(--color-teal-500); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: opacity .15s ease; } .cnc-chart-bar:hover, .cnc-chart-bar:focus-visible { opacity: 0.75; outline: none; } .cnc-chart-bar:hover::after, .cnc-chart-bar:focus-visible::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-inverse); color: var(--text-inverse); font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; box-shadow: var(--elevation-2); pointer-events: none; z-index: 5; } .cnc-chart-axis { display: flex; gap: 4px; margin-top: 6px; } .cnc-chart-axis__label { flex: 1 1 0; max-width: 24px; text-align: center; font-size: 10px; color: var(--text-muted); white-space: nowrap; }