:root {
  color-scheme: light;
  --ink: #172638;
  --ink-2: #34465a;
  --muted: #778697;
  --muted-2: #a2adba;
  --line: #e5ebf1;
  --line-strong: #d7e0e9;
  --canvas: #f4f7fb;
  --paper: #fff;
  --blue: #1768d2;
  --blue-deep: #1257b3;
  --blue-soft: #eaf2ff;
  --green: #16815c;
  --green-soft: #e7f6ef;
  --amber: #a96a0b;
  --amber-soft: #fff3d9;
  --red: #c14d47;
  --red-soft: #fff0ef;
  --sidebar: #15293e;
  --sidebar-muted: #95a9bc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #79adf5; outline-offset: 2px; }
.app-shell { min-height: 100vh; }
.sidebar { width: 236px; position: fixed; z-index: 10; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 27px 15px 18px; background: var(--sidebar); color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 8px 47px; color: inherit; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border: 1px solid #42617d; border-radius: 10px; display: flex; align-items: end; gap: 3px; padding: 8px 7px; background: linear-gradient(145deg,#1e4568,#16324e); }
.brand-mark i { width: 4px; border-radius: 4px 4px 1px 1px; background: #78afff; display: block; }
.brand-mark i:nth-child(1) { height: 9px; opacity: .7; }.brand-mark i:nth-child(2) { height: 15px; }.brand-mark i:nth-child(3) { height: 11px; opacity: .86; }
.brand-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }.brand-name { display: flex; flex-direction: column; color: #fff; font-size: 13px; line-height: 1.12; letter-spacing: -.015em; }.brand-name strong:first-child { font-weight: 560; }.brand-name strong:last-child { color: #a9cfff; font-weight: 760; }.brand-copy small { color: #a9bbc9; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.sidebar-label { margin: 0 10px 12px; color: #7790a5; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.primary-nav { display: grid; gap: 5px; }
.nav-link { min-height: 40px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; padding: 0 11px; text-align: left; color: #bdcbd7; background: transparent; font-size: 12px; transition: background .18s,color .18s,transform .18s; }
.nav-link:hover { color: #fff; background: #203a53; }.nav-link.active { color: #fff; background: #244968; box-shadow: inset 2px 0 #6eabff; }.nav-icon { width: 17px; color: #96b6d1; font-size: 16px; text-align: center; }
.nav-label-spaced { margin-top: 35px; }.category-list { display: grid; gap: 3px; }
.category-link { display: flex; gap: 10px; align-items: center; min-height: 31px; border: 0; border-radius: 6px; padding: 0 11px; background: transparent; color: #aebecd; text-align: left; font-size: 11px; }
.category-link:hover,.category-link.active { background: #203a53; color: #fff; }.category-dot { width: 6px; height: 6px; border-radius: 50%; background: #6796c4; }.category-link:nth-child(2) .category-dot { background: #56b9a5; }.category-link:nth-child(3) .category-dot { background: #55a4df; }.category-link:nth-child(4) .category-dot { background: #c2a7ef; }.category-link:nth-child(5) .category-dot { background: #e4b65f; }.category-link:nth-child(6) .category-dot { background: #dc857f; }.category-link:nth-child(7) .category-dot { background: #70b28e; }
.sidebar-bottom { margin-top: auto; }.privacy-note { display: flex; gap: 9px; align-items: center; padding: 12px 9px; border: 1px solid #2d465b; border-radius: 8px; background: #192f45; }.privacy-note strong,.privacy-note small { display: block; }.privacy-note strong { font-size: 10px; font-weight: 650; }.privacy-note small { margin-top: 4px; color: #91a7bb; font-size: 9px; }.privacy-dot { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #49bc8b; box-shadow: 0 0 0 3px rgba(73,188,139,.12); }.sidebar-foot { margin: 15px 9px 0; color: #6f879c; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.main-content { margin-left: 236px; min-height: 100vh; padding: 0 39px 25px; max-width: 1700px; }
.topbar { height: 68px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.breadcrumbs { display: flex; gap: 11px; align-items: center; color: #8b98a7; font-size: 11px; }.breadcrumbs b { color: #bdc7d1; font-weight: 400; }.breadcrumbs strong { color: #3b4b5e; font-weight: 650; }.topbar-actions { display: flex; align-items: center; gap: 14px; }.location-chip { display: flex; align-items: center; gap: 7px; margin-right: 3px; color: #526276; font-size: 10px; }.location-pulse { width: 6px; height: 6px; border-radius: 50%; background: #69ad8c; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 35px; padding: 0 13px; border: 1px solid transparent; border-radius: 7px; font-size: 10px; font-weight: 700; transition: background .15s,border-color .15s,transform .15s; }.button:active { transform: translateY(1px); }.button-primary { color: #fff; background: var(--blue); box-shadow: 0 2px 5px rgba(23,104,210,.15); }.button-primary:hover { background: var(--blue-deep); }.button-primary > span { font-size: 15px; font-weight: 400; }.button-quiet { color: #617186; background: #fff; border-color: var(--line-strong); }.button-quiet:hover { color: var(--ink); border-color: #b5c4d3; background: #f9fbfd; }.button-small { min-height: 31px; padding: 0 10px; font-size: 9px; }
.avatar { width: 30px; height: 30px; border: 1px solid #d6e1ec; border-radius: 50%; color: #45617c; background: #edf3f9; font-size: 9px; font-weight: 800; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 31px 0 22px; }.eyebrow { display: flex; align-items: center; gap: 7px; color: #75869a; font-size: 8px; letter-spacing: .16em; font-weight: 800; }.eyebrow-line { width: 14px; height: 2px; background: #3680dc; }.page-heading h1 { margin: 9px 0 5px; color: #182b3f; font-size: clamp(22px,2vw,29px); letter-spacing: -.045em; line-height: 1.1; font-weight: 700; }.page-heading p { margin: 0; color: #8190a0; font-size: 11px; }.period-control { flex: 0 0 auto; display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.period-mode { min-width: 65px; height: 28px; border: 0; border-radius: 6px; color: #8190a0; background: transparent; font-size: 9px; font-weight: 650; }.period-mode.active { color: #1a5eb5; background: #edf4ff; box-shadow: 0 1px 3px rgba(16,50,80,.08); }
.filter-bar { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.filter-control { display: flex; flex-direction: column; gap: 4px; min-width: 112px; padding: 0 9px; border-right: 1px solid #edf0f4; }.filter-control span { color: #98a4b1; font-size: 7px; letter-spacing: .13em; font-weight: 800; }.filter-control select { width: 100%; border: 0; outline: 0; padding: 0 14px 0 0; color: #36485a; background: transparent; font-size: 10px; font-weight: 650; }.filter-spacer { flex: 1; }.search-control { width: min(228px,27%); display: flex; gap: 7px; align-items: center; padding: 0 9px; border: 1px solid #e9eef3; border-radius: 6px; background: #fbfcfd; }.search-icon { color: #8e9cac; font-size: 17px; transform: rotate(-20deg); }.search-control input { min-width: 0; width: 100%; height: 30px; outline: 0; border: 0; color: #3b4c5d; background: transparent; font-size: 9px; }.search-control input::placeholder { color: #a1acb8; }.search-control kbd { flex: 0 0 auto; padding: 2px 4px; border: 1px solid #e1e8ef; border-radius: 3px; color: #a1acb8; background: #fff; font-size: 8px; }
.summary-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 16px 0; }.summary-card { min-width: 0; padding: 15px 16px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 2px 5px rgba(30,54,80,.015); }.summary-card-featured { border-color: #d7e6f8; background: linear-gradient(115deg,#fff 70%,#f5f9ff 100%); }.summary-label { display: flex; align-items: center; gap: 7px; color: #8290a0; font-size: 8px; letter-spacing: .08em; font-weight: 800; white-space: nowrap; overflow: hidden; }.summary-icon { display: inline-flex; flex: 0 0 21px; width: 21px; height: 21px; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; font-weight: 600; }.icon-blue { color: #2d75ce; background: #eaf2ff; }.icon-mint { color: #218668; background: #e7f5ef; }.icon-violet { color: #765db4; background: #f0edfa; }.icon-amber { color: #a27120; background: #fcf2df; }.info-dot { display: inline-flex; width: 12px; height: 12px; align-items: center; justify-content: center; border: 1px solid #c6d2de; border-radius: 50%; color: #8290a0; font-size: 8px; font-weight: 500; text-transform: lowercase; }.summary-main { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; }.summary-main strong { color: #1e3348; font-size: 25px; font-weight: 650; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }.summary-period { color: #a1acb7; font-size: 8px; white-space: nowrap; }.summary-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #94a0ae; font-size: 8px; }.mini-bar { width: 37px; height: 4px; overflow: hidden; border-radius: 3px; background: #e7eff8; }.mini-bar i { display: block; height: 100%; border-radius: inherit; background: #4d91df; }.mini-bar.mint { background: #e4f2ed; }.mini-bar.mint i { background: #57ad8d; }.mini-bar.violet { background: #efedf7; }.mini-bar.violet i { background: #a090ce; }.status-legend { display: inline-flex; align-items: center; gap: 4px; color: #8e9aa7; font-size: 8px; }.status-legend i { width: 5px; height: 5px; border-radius: 50%; margin-left: 4px; }.legend-good { background: #37a57b; }.legend-near { background: #e0a53e; }.legend-bad { background: #d77872; }
.focus-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(260px,.95fr); gap: 13px; }.panel { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 2px 5px rgba(30,54,80,.015); }.chart-panel { padding: 18px 19px 13px; }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; }.panel-eyebrow { margin-bottom: 5px; font-size: 7px; color: #99a5b1; }.panel-heading h2,.insight-panel h2 { margin: 0; color: #1b3044; font-size: 15px; letter-spacing: -.025em; font-weight: 680; }.panel-heading p { margin: 5px 0 0; color: #96a2af; font-size: 9px; }.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #edf0f4; border-radius: 6px; color: #8291a1; background: #fff; font-size: 12px; }.icon-button:hover { color: #334a62; background: #f7f9fb; }.chart-legend { display: flex; align-items: center; gap: 14px; margin-top: 20px; color: #8290a0; font-size: 8px; }.chart-legend > span { display: inline-flex; gap: 5px; align-items: center; }.legend-line { width: 12px; height: 2px; border-radius: 2px; background: var(--blue); }.legend-dash { width: 12px; border-top: 1px dashed #dba24a; }.chart-unit { margin-left: auto; color: #a0abb6; }.chart-wrap { position: relative; height: 197px; margin: 5px -3px 0; }.chart-wrap canvas { width: 100%; height: 100%; }.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #99a6b4; font-size: 10px; }.chart-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid #f0f3f6; color: #a1acb7; font-size: 8px; }.text-link { border: 0; padding: 3px; color: #3e7fc7; background: none; font-size: 8px; font-weight: 650; }.text-link span { margin-left: 4px; }
.insight-panel { position: relative; display: flex; flex-direction: column; padding: 18px 19px 14px; overflow: hidden; }.insight-panel::after { position: absolute; right: -47px; top: 95px; width: 125px; height: 125px; border: 1px solid #f0f4f8; border-radius: 50%; content: ""; pointer-events: none; }.insight-top { display: flex; justify-content: space-between; gap: 7px; align-items: center; }.insight-kicker { color: #99a5b1; font-size: 7px; font-weight: 800; letter-spacing: .12em; }.status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 5px 8px; font-size: 8px; font-weight: 650; white-space: nowrap; }.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status-good { color: var(--green); background: var(--green-soft); }.status-near { color: var(--amber); background: var(--amber-soft); }.status-bad { color: var(--red); background: var(--red-soft); }.status-neutral { color: #748395; background: #f0f3f6; }.insight-panel h2 { margin-top: 16px; font-size: 13px; }.metric-readout { display: flex; align-items: baseline; gap: 5px; margin: 7px 0 15px; }.metric-readout strong { color: #192f46; font-size: 35px; line-height: 1; letter-spacing: -.06em; font-weight: 650; font-variant-numeric: tabular-nums; }.metric-readout span { color: #8190a0; font-size: 11px; }.target-block > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; color: #8f9dab; font-size: 8px; }.target-block > div:first-child strong { color: #506277; font-size: 9px; font-weight: 650; }.target-track { position: relative; height: 6px; border-radius: 9px; background: #eaf0f5; }.target-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .35s ease; }.target-track b { position: absolute; top: 50%; left: 70%; width: 2px; height: 12px; border-radius: 2px; background: #e4a63c; transform: translate(-50%,-50%); }.target-hints { display: flex; justify-content: space-between; margin-top: 5px; color: #abb5bf; font-size: 7px; }.insight-divider { height: 1px; margin: 14px 0 11px; background: #eef1f4; }.insight-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.insight-stats div { display: flex; flex-direction: column; gap: 5px; }.insight-stats span { color: #98a4b0; font-size: 8px; }.insight-stats strong { color: #354a5e; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }.insight-note { display: flex; gap: 7px; align-items: start; min-height: 34px; margin-top: auto; padding: 9px 9px 0; color: #8191a1; font-size: 8px; line-height: 1.45; }.note-spark { color: #4f8fd8; font-size: 11px; }
.table-panel { margin-top: 13px; padding: 17px 0 0; }.table-heading { padding: 0 18px 14px; }.table-meta { display: flex; align-items: center; gap: 12px; }.table-count { color: #99a5b1; font-size: 9px; }.table-scroll { overflow-x: auto; border-top: 1px solid #edf1f4; }.table-scroll table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; }.table-scroll th { height: 35px; padding: 0 15px; color: #9ba7b3; background: #fbfcfd; font-size: 7px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }.table-scroll td { height: 44px; padding: 0 15px; border-top: 1px solid #f0f3f6; color: #607184; font-size: 9px; white-space: nowrap; }.table-scroll tbody tr { transition: background .12s; cursor: pointer; }.table-scroll tbody tr:hover { background: #f7faff; }.table-scroll tbody tr.selected { background: #f0f6ff; }.table-scroll tbody tr.selected td:first-child { box-shadow: inset 2px 0 #4587d2; }.metric-name-cell { display: flex; align-items: center; gap: 9px; color: #35485c; font-weight: 650; }.metric-mark { width: 22px; height: 22px; flex: 0 0 22px; display: inline-grid; place-items: center; border-radius: 6px; color: #4c87c8; background: #edf4fc; font-size: 10px; font-weight: 600; }.numeric { text-align: right; font-variant-numeric: tabular-nums; }.table-scroll td.numeric { color: #465b70; font-weight: 650; }.target-cell { color: #9aa6b2 !important; font-weight: 500 !important; }.trend-cell { width: 90px; }.sparkline { display: block; width: 72px; height: 22px; }.table-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 17px 12px; color: #a0abb5; font-size: 8px; }.table-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }.demo-mark { width: 5px; height: 5px; border-radius: 50%; background: #8ba7c4; }.table-empty { padding: 42px 10px; text-align: center; color: #8392a2; }.table-empty > * { display: block; }.table-empty span { margin-bottom: 8px; font-size: 22px; }.table-empty strong { color: #566a7d; font-size: 11px; }.table-empty small { margin-top: 5px; font-size: 9px; }
.page-footer { display: flex; justify-content: space-between; gap: 15px; padding: 18px 2px 0; color: #a1acb7; font-size: 7px; letter-spacing: .06em; }.page-footer b { color: #d0d7de; }.page-footer > span:last-child { display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0; font-size: 8px; }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(11,27,43,.45); backdrop-filter: blur(3px); }.modal-backdrop[hidden] { display: none; }.import-modal { width: min(480px,100%); max-height: min(90vh,720px); overflow: auto; padding: 22px; border: 1px solid #e2e9f0; border-radius: 13px; background: #fff; box-shadow: 0 22px 70px rgba(12,35,59,.25); animation: modal-in .18s ease-out; }.modal-top { display: flex; align-items: start; justify-content: space-between; }.modal-top h2 { margin: 6px 0 0; color: #1c3146; font-size: 19px; letter-spacing: -.04em; }.modal-top .icon-button { font-size: 19px; }.modal-intro { margin: 12px 0 18px; color: #77899a; font-size: 10px; line-height: 1.6; }.dropzone { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 25px 12px 21px; border: 1px dashed #b6cadf; border-radius: 9px; color: #708196; background: #f8fbff; cursor: pointer; transition: border-color .16s,background .16s; }.dropzone:hover,.dropzone.dragover { border-color: #4d8cda; background: #f0f6ff; }.upload-glyph { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #3576c6; background: #e7f1ff; font-size: 18px; }.dropzone strong { color: #3a4f63; font-size: 10px; }.dropzone span { font-size: 9px; }.dropzone u { color: #2871c5; text-underline-offset: 2px; }.dropzone small { color: #a0aab5; font-size: 8px; }.dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.import-message { margin-top: 13px; padding: 9px 10px; border-radius: 6px; color: #526980; background: #f1f6fb; font-size: 9px; line-height: 1.5; }.import-message.error { color: #a84842; background: #fff1ef; }.import-result { margin-top: 13px; border: 1px solid #e7edf3; border-radius: 7px; overflow: hidden; }.import-result[hidden] { display: none; }.result-header { display: flex; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid #edf1f5; color: #53677c; background: #fbfcfd; font-size: 9px; }.result-header strong { color: #226a4f; }.result-lines { max-height: 140px; overflow: auto; padding: 8px 10px; color: #738295; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; line-height: 1.6; white-space: pre-wrap; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }.modal-actions .button { min-height: 34px; }.modal-actions .button:disabled { cursor: not-allowed; opacity: .45; }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 1500px) { .main-content { padding-right: 55px; padding-left: 55px; }.summary-card { padding-right: 20px; padding-left: 20px; }.chart-wrap { height: 225px; } }
@media (max-width: 1100px) { .sidebar { width: 205px; }.main-content { margin-left: 205px; padding-right: 24px; padding-left: 24px; }.summary-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }.focus-grid { grid-template-columns: minmax(0,1.45fr) minmax(240px,.95fr); }.filter-control { min-width: 100px; }.search-control { width: 190px; } }
@media (max-width: 800px) { .sidebar { position: sticky; inset: 0 0 auto; width: 100%; height: auto; min-height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 15px; }.brand { margin: 0; }.brand-mark { width: 30px; height: 30px; }.sidebar-label,.primary-nav,.category-list,.sidebar-bottom { display: none; }.main-content { margin-left: 0; padding: 0 17px 24px; }.topbar { height: 54px; }.topbar-actions { gap: 8px; }.location-chip { display: none; }.page-heading { padding: 24px 0 17px; }.focus-grid { grid-template-columns: minmax(0,1fr); }.chart-wrap { height: 220px; }.insight-panel { min-height: 260px; }.filter-bar { flex-wrap: wrap; }.filter-control { flex: 1; min-width: 115px; }.filter-spacer { display: none; }.search-control { flex: 1 1 100%; order: 5; width: auto; }.filter-bar > .button { margin-left: auto; }.page-footer { flex-direction: column; } }
@media (max-width: 520px) { .main-content { padding-right: 12px; padding-left: 12px; }.topbar-actions { gap: 7px; }.import-trigger { min-height: 31px; padding: 0 9px; font-size: 9px; }.avatar { width: 27px; height: 27px; }.page-heading { align-items: start; flex-direction: column; gap: 14px; }.period-control { align-self: flex-start; }.page-heading h1 { font-size: 23px; }.summary-strip { gap: 8px; }.summary-card { padding: 11px 10px 9px; }.summary-label { gap: 5px; font-size: 7px; }.summary-main strong { font-size: 21px; }.summary-foot { font-size: 7px; }.summary-period { font-size: 7px; }.status-legend { font-size: 7px; }.filter-bar { gap: 7px; padding: 9px; }.filter-control { min-width: 88px; }.filter-control select { font-size: 9px; }.resetButton { font-size: 8px; }.chart-panel,.insight-panel { padding-right: 13px; padding-left: 13px; }.table-heading { padding-right: 12px; padding-left: 12px; }.table-meta { flex-direction: column; align-items: end; gap: 5px; }.table-foot { align-items: start; flex-direction: column; }.page-footer > span:last-child { align-items: flex-start; }.modal-backdrop { padding: 10px; }.import-modal { padding: 17px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.chart-empty[hidden] { display: none; }


/* Classificação visual das linhas de produto. */
.product-pill { display: inline-flex; min-width: 29px; justify-content: center; padding: 4px 7px; border-radius: 99px; color: #2865a8; background: #edf4fc; font-size: 8px; font-weight: 750; letter-spacing: .03em; }
.product-vd { color: #247360; background: #e8f5f0; }
.product-da { color: #765bb0; background: #f1edfa; }
.product-geral { color: #68788a; background: #f0f3f6; }
.product-shared { color: #795c20; background: #fbf2df; }
.table-scroll table { min-width: 770px; }