/* Rause design system (M2 · Bento). Base para o painel parceiros e o sistema de Pix. */
:root {
  --ds-canvas: #f7f6f3; --ds-sf: #ffffff; --ds-sf-2: #fbfbfa; --ds-bd: #eaeaea; --ds-div: #f1f0ed;
  --ds-tx: #2f3437; --ds-mu: #6b6965; --ds-off: #b5b3ad;
  --ds-ok-bg: #EDF3EC; --ds-ok: #346538; --ds-wa-bg: #FBF3DB; --ds-wa: #956400;
  --ds-er-bg: #FDEBEC; --ds-er: #9F2F2D; --ds-in-bg: #E1F3FE; --ds-in: #1F6C9F;
  --ds-ne-bg: #f1f0ed; --ds-ne: #6b6965;
  --ds-marca: #a8a59d;
  --ds-r-s: 6px; --ds-r-m: 12px; --ds-r-p: 99px;
  --ds-f-tit: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --ds-f-txt: 'Geist', system-ui, sans-serif;
  --ds-f-mono: 'Geist Mono', ui-monospace, monospace;
  --bs-body-font-family: var(--ds-f-txt); --bs-body-color: var(--ds-tx); --bs-body-bg: var(--ds-canvas);
  --bs-border-color: var(--ds-bd); --bs-link-color: var(--ds-tx); --bs-link-hover-color: #000;
  --bs-border-radius: var(--ds-r-s); color-scheme: light;
}
body { background: var(--ds-canvas); color: var(--ds-tx); font-family: var(--ds-f-txt); font-size: 14px; line-height: 1.5; }
h1, h2, h3, h4, .ds-tit { text-wrap: balance; font-family: var(--ds-f-tit); letter-spacing: -.02em; color: var(--ds-tx); }
.ds-num, table td.num, .ds-kpi-num { font-variant-numeric: tabular-nums; }
.ds-mu { color: var(--ds-mu) !important; }
.ds-label { font-family: var(--ds-f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-mu); }
a { color: var(--ds-tx); text-underline-offset: 2px; }
:focus-visible:not(.modal):not(.offcanvas) { outline: 2px solid var(--ds-tx); outline-offset: 2px; }
.btn:focus-visible { box-shadow: none; }
[hidden] { display: none !important; }

/* Layout */
.ds-app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.ds-side { background: var(--ds-sf); border-right: 1px solid var(--ds-bd); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ds-marca-txt { font-family: var(--ds-f-tit); font-weight: 800; font-size: 15px; letter-spacing: -.02em; padding: 2px 9px 14px; display: block; text-decoration: none; }
.ds-ev { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--ds-bd); border-radius: 8px; padding: 7px 9px; background: var(--ds-sf); font-weight: 600; margin-bottom: 14px; text-align: left; }
.ds-ev i.ds-ev-cor { width: 18px; height: 18px; border-radius: 5px; background: var(--ds-marca); flex: none; }
.ds-nav a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--ds-r-s); color: var(--ds-tx); text-decoration: none; margin-bottom: 2px; position: relative; }
.ds-nav a:hover { background: var(--ds-sf-2); }
.ds-nav a.on { background: var(--ds-div); font-weight: 600; }
.ds-nav a.on::before { content: ''; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--ds-marca); }
.ds-nav a .ds-cont { margin-left: auto; }
.ds-nav-grupo { margin: 14px 9px 6px; }
.ds-main { padding: 18px 24px 40px; min-width: 0; }
.ds-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-top h1 { font-size: 22px; font-weight: 700; margin: 0; }
.ds-top-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.ds-menu-btn { display: none; }

/* Blocos */
.ds-bento { display: grid; gap: 10px; margin-bottom: 10px; }
.ds-tile { background: var(--ds-sf); border: 1px solid var(--ds-bd); border-radius: var(--ds-r-m); padding: 14px 16px; min-width: 0; }
.ds-tile-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: var(--ds-mu); }
.ds-kpi-num { font-family: var(--ds-f-tit); font-weight: 800; font-size: 34px; letter-spacing: -.03em; line-height: 1.1; }
.ds-kpi-num.md { font-size: 24px; }

/* Etiquetas, avatar */
.ds-pill { display: inline-block; border-radius: var(--ds-r-p); padding: 1px 8px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ds-ok { background: var(--ds-ok-bg); color: var(--ds-ok); } .ds-wa { background: var(--ds-wa-bg); color: var(--ds-wa); }
.ds-er { background: var(--ds-er-bg); color: var(--ds-er); } .ds-in { background: var(--ds-in-bg); color: var(--ds-in); }
.ds-ne { background: var(--ds-ne-bg); color: var(--ds-ne); }
.ds-av { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; }
.ds-chip { display: inline-block; border: 1px solid var(--ds-bd); border-radius: var(--ds-r-s); padding: 0 6px; margin: 1px 2px 1px 0; font-size: 12px; background: var(--ds-sf); white-space: nowrap; }
.ds-ck { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 0; }
.ds-ck.sim { background: var(--ds-ok-bg); color: var(--ds-ok); } .ds-ck.nao { background: var(--ds-div); color: var(--ds-off); }

/* Botões e campos */
.btn, .ds-filtros button, .ds-ck { touch-action: manipulation; }
.btn { font-size: 13px; font-weight: 500; border-radius: var(--ds-r-s); }
.btn-ds, .btn-ds-pr, .btn-ds-perigo { min-height: 32px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn-ds { background: var(--ds-sf); border: 1px solid var(--ds-bd); color: var(--ds-tx); }
.btn-ds:hover { background: var(--ds-sf-2); border-color: #d9d7d1; color: var(--ds-tx); }
.btn-ds-pr { background: var(--ds-tx); border: 1px solid var(--ds-tx); color: #fff; }
.btn-ds-pr:hover { background: #1f2326; color: #fff; }
.btn-ds-perigo { background: var(--ds-sf); border: 1px solid var(--ds-bd); color: var(--ds-er); }
.btn-ds-sm { min-height: 26px; padding: 2px 8px; font-size: 12px; }
.btn-ds:disabled, .btn-ds-pr:disabled { border-color: var(--ds-bd); background: var(--ds-sf-2); color: var(--ds-off); }
.form-control, .form-select { border-color: var(--ds-bd); border-radius: var(--ds-r-s); font-size: 14px; }
.form-control:focus, .form-select:focus { border-color: var(--ds-tx); box-shadow: none; }
.ds-kbd { font-family: var(--ds-f-mono); font-size: 10px; border: 1px solid var(--ds-bd); background: var(--ds-canvas); border-radius: 4px; padding: 1px 5px; }
.ds-seg { display: inline-flex; border: 1px solid var(--ds-bd); border-radius: 8px; background: var(--ds-sf); padding: 2px; }
.ds-seg a { padding: 3px 10px; border-radius: var(--ds-r-s); color: var(--ds-mu); text-decoration: none; font-weight: 500; }
.ds-seg a.on { background: var(--ds-tx); color: #fff; }

/* Filtros */
.ds-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-filtros button, .ds-filtros a { display: inline-flex; align-items: center; border: 1px solid var(--ds-bd); border-radius: var(--ds-r-p); padding: 3px 11px; background: var(--ds-sf); color: var(--ds-mu); font-weight: 500; font-size: 13px; text-decoration: none; }
.ds-filtros .on, .ds-filtros .active { background: var(--ds-tx); color: #fff; border-color: var(--ds-tx); }

/* Tabela */
.ds-tabela-wrap { border: 1px solid var(--ds-bd); border-radius: var(--ds-r-m); overflow-x: auto; background: var(--ds-sf); }
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; }
.ds-table th { font-family: var(--ds-f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-mu); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--ds-bd); background: var(--ds-sf-2); white-space: nowrap; text-align: left; }
.ds-table td { padding: 10px 12px; border-bottom: 1px solid var(--ds-div); vertical-align: middle; background: var(--ds-sf); }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--ds-sf-2); }
.ds-table th:first-child, .ds-table td:first-child { position: sticky; left: 0; z-index: 1; }
.ds-table th[data-ordenar] button { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ds-table th[aria-sort="ascending"] button::after { content: " ▲"; }
.ds-table th[aria-sort="descending"] button::after { content: " ▼"; }
.ds-table .col-num { width: 52px; min-width: 52px; }
.ds-table .col-nome { position: sticky; left: 52px; min-width: 170px; z-index: 1; box-shadow: 1px 0 0 var(--ds-div); }
.ds-table th.col-nome { z-index: 2; }
@media (max-width: 575px) { .ds-table .col-nome { min-width: 130px; left: 0; } .ds-table th.col-num, .ds-table td.col-num { position: static; } }
.ds-acoes { opacity: 0; transition: opacity .15s; }
.ds-table tr:hover .ds-acoes, .ds-acoes:focus-within, .ds-acoes .show { opacity: 1; }
@media (hover: none) { .ds-acoes { opacity: 1; } }
.ds-cartao .ds-acoes { opacity: 1; }
.dropdown-menu { border: 1px solid var(--ds-bd); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.06); font-size: 13px; }
.dropdown-item { padding: 6px 12px; }
.dropdown-item.ds-perigo { color: var(--ds-er); }

/* Avisos, modal, lateral, vazio */
.ds-avisos { position: fixed; right: 16px; bottom: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; }
.ds-aviso { background: var(--ds-tx); color: #fff; border-radius: 10px; padding: 10px 14px; max-width: 380px; display: flex; gap: 10px; align-items: flex-start; }
.ds-aviso.erro { background: var(--ds-er); }
.ds-aviso button { background: none; border: 0; color: inherit; opacity: .7; margin-left: auto; }
.modal-content, .offcanvas { border: 1px solid var(--ds-bd); border-radius: var(--ds-r-m); }
.offcanvas { border-radius: 0; --bs-offcanvas-width: min(300px, 86vw); }
.ds-vazio { text-align: center; color: var(--ds-mu); padding: 40px 16px; }
.ds-vazio i { font-size: 28px; display: block; margin-bottom: 8px; }
.ds-busca-res a { display: flex; justify-content: space-between; gap: 12px; color: var(--ds-tx); padding: 8px 10px; border-radius: var(--ds-r-s); text-decoration: none; }
.ds-busca-res a span:last-child { text-align: right; }
.ds-busca-res a.ativo, .ds-busca-res a:hover { background: var(--ds-div); }

/* Cartões em lista (aprovados/pendentes no celular) */
.ds-cartao { background: var(--ds-sf); border: 1px solid var(--ds-bd); border-radius: var(--ds-r-m); padding: 12px 14px; display: block; text-decoration: none; color: var(--ds-tx); }
.ds-cartao:hover { border-color: #d9d7d1; }
.ds-barra-fixa { position: sticky; bottom: 0; background: var(--ds-sf); border-top: 1px solid var(--ds-bd); padding: 10px 16px; display: flex; gap: 8px; justify-content: flex-end; margin: 16px -24px -40px; }

/* Celular */
@media (max-width: 991.98px) {
  .ds-app { grid-template-columns: 1fr; }
  .ds-side { display: none; }
  .btn.ds-menu-btn { display: inline-flex; }
  .ds-main { padding: 14px 16px 32px; }
  .btn, .ds-filtros button, .ds-filtros a, .ds-nav a, .ds-table th[data-ordenar] button { min-height: 40px; }
  .ds-barra-fixa { margin: 16px -16px -32px; }
  .ds-ck { position: relative; }
  .ds-ck::after { content: ''; position: absolute; inset: -9px; }
}
@media (max-width: 767.98px) { .ds-so-desktop { display: none !important; } }
@media (min-width: 768px) { .ds-so-celular { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Top 10 cidades (vendas por cidade) */
.ds-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ds-top-item { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: 13px; color: var(--ds-tx); }
.ds-top-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-top-barra { height: 12px; background: var(--ds-div); border-radius: 6px; overflow: hidden; }
.ds-top-barra i { display: block; height: 100%; background: var(--ds-marca); border-radius: 6px; }
.ds-top-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.btn .bi-chevron-down { transition: transform .15s; }
.btn[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* Visão geral */
.ds-vg-1 { grid-template-columns: 1.4fr 1fr 1fr; }
.ds-vg-2 { grid-template-columns: 1.4fr 1fr; }
.ds-vg-dobra { grid-row: span 2; }
.ds-vg-lin { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ds-graf { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 10px; }
.ds-graf rect { fill: #d9d7d1; }
.ds-graf rect.on { fill: var(--ds-tx); }
.ds-graf text { font-family: var(--ds-f-txt); font-variant-numeric: tabular-nums; font-size: 11px; fill: var(--ds-mu); }
.ds-graf text.val { fill: var(--ds-tx); font-weight: 500; }
.ds-agir { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ds-div); color: var(--ds-tx); text-decoration: none; }
.ds-agir:hover span:first-child { text-decoration: underline; }
.ds-pilha { display: flex; height: 6px; border-radius: var(--ds-r-p); overflow: hidden; margin: 10px 0 6px; background: var(--ds-div); }
.ds-pilha i:nth-child(1) { background: var(--ds-tx); }
.ds-pilha i:nth-child(2) { background: var(--ds-marca); }
.ds-pilha i:nth-child(3) { background: #d9d7d1; }
.ds-top5 { list-style: none; margin: 0; padding: 0; }
.ds-top5 li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ds-div); }
.ds-top5 li:last-child { border-bottom: 0; }
.ds-top5 .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-top5 .sub { font-size: 12px; color: var(--ds-mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-top5 .n { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.ds-cc { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ds-cc-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ds-cc-cab .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-cc-barra { height: 8px; background: var(--ds-div); border-radius: 4px; overflow: hidden; margin: 4px 0 2px; }
.ds-cc-barra i { display: block; height: 100%; border-radius: 4px; background: #00b894; }
.ds-cc-barra i.cai { background: #e57373; }
.ds-cc-det { font-size: 12px; color: var(--ds-mu); }
.ds-info { background: none; border: 0; padding: 0 2px; color: var(--ds-mu); }
@media (max-width: 991.98px) {
  .ds-vg-1, .ds-vg-2 { grid-template-columns: minmax(0, 1fr); }
  .ds-vg-dobra { grid-row: auto; }
  .ds-agir, .ds-info { min-height: 40px; }
  .ds-info { min-width: 40px; }
}
.ds-tx { color: var(--ds-tx); }