/* =========================================================================
   pages.css — estilos específicos de telas
   ========================================================================= */

/* ------------------------------------------------------------- login */

.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
  position: relative;
  background: var(--bg);
}

.auth__card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
}

.auth__logo { height: 34px; width: auto; margin: 0 auto var(--sp-6); }

.auth__card h1 { font-size: var(--fs-2xl); margin-bottom: 4px; }
.auth__form-desc { color: var(--text-muted); font-size: var(--fs-md); margin-bottom: var(--sp-6); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.auth__legal { font-size: var(--fs-sm); color: var(--text-soft); text-align: center; }
.auth__lang { position: absolute; top: var(--sp-4); right: var(--sp-5); }

@media (max-width: 480px) {
  .auth__card { padding: var(--sp-6) var(--sp-5); border: 0; box-shadow: none; background: transparent; }
  .auth { background: var(--surface); }
}

/* ------------------------------------------------------------- dashboard */

.dash-list { display: flex; flex-direction: column; }
.dash-list__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  color: inherit;
}
.dash-list__item:last-child { border-bottom: 0; }
.dash-list__item:hover { background: var(--brand-50); text-decoration: none; color: inherit; }
.dash-list__main { flex: 1 1 auto; min-width: 0; }
.dash-list__title { font-weight: 600; font-size: var(--fs-md); }
.dash-list__sub { font-size: var(--fs-sm); color: var(--text-muted); }
.dash-list__value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.rank-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 0; }
.rank-row__pos {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: var(--r-sm);
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.rank-row:nth-child(1) .rank-row__pos { background: var(--brand-500); color: #fff; }
.rank-row:nth-child(2) .rank-row__pos { background: var(--brand-200); color: var(--brand-800); }
.rank-row:nth-child(3) .rank-row__pos { background: #f2f8e6; color: var(--lime-600); }
.rank-row__main { flex: 1 1 auto; min-width: 0; }
.rank-row__name { font-size: var(--fs-md); font-weight: 500; }
.rank-row__bar { margin-top: 4px; }
.rank-row__val { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* mini gráfico de barras (sem lib) */
.chart-bars {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  height: 160px; padding-top: var(--sp-4);
}
.chart-bars__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart-bars__bar {
  width: 100%; max-width: 34px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  min-height: 3px;
  position: relative;
  transition: filter var(--transition);
}
.chart-bars__col:hover .chart-bars__bar { filter: brightness(1.08); }
.chart-bars__bar[data-currency="PYG"] { background: linear-gradient(180deg, var(--lime-400), var(--lime-600)); }
.chart-bars__label { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.chart-legend { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.chart-legend__key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--brand-500); }
.chart-legend__swatch--lime { background: var(--lime-500); }

/* ------------------------------------------------------------- itens do orçamento */

.items-table { font-size: var(--fs-md); }
.items-table th { position: static; }
.items-table th.col-drag, .items-table td.col-drag { width: 28px; padding-left: var(--sp-3); padding-right: 0; }
.items-table th.col-img,  .items-table td.col-img  { width: 56px; }
.items-table th.col-cod,  .items-table td.col-cod  { width: 130px; }
.items-table th.col-marca,.items-table td.col-marca{ width: 120px; }
.items-table th.col-prazo,.items-table td.col-prazo{ width: 130px; }
.items-table th.col-qtd,  .items-table td.col-qtd  { width: 90px; }
.items-table th.col-un,   .items-table td.col-un   { width: 76px; }
.items-table th.col-vu,   .items-table td.col-vu   { width: 130px; }
.items-table th.col-dtipo,.items-table td.col-dtipo{ width: 74px; }
.items-table th.col-desc, .items-table td.col-desc { width: 110px; }
.items-table th.col-tot,  .items-table td.col-tot  { width: 140px; }
.items-table th.col-act,  .items-table td.col-act  { width: 76px; }
.items-table td { padding: 6px var(--sp-2); vertical-align: top; }
.items-table th { padding: 8px var(--sp-2); }
.items-table tbody tr:hover { background: var(--surface-muted); }
.items-table .input, .items-table .select, .items-table .textarea { min-height: 30px; padding: 4px 8px; font-size: var(--fs-base); }
.items-table .textarea { min-height: 30px; }
.items-table__total {
  display: flex; align-items: center; justify-content: flex-end;
  height: 30px; padding: 0 8px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  white-space: nowrap;
}
.items-table__drag {
  cursor: grab; color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; width: 20px;
}
.items-table__drag:active { cursor: grabbing; }
.items-table tr.is-dragging { opacity: .4; }
.items-table tr.is-drop-target td { box-shadow: inset 0 2px 0 var(--brand-500); }
.items-table__row-obs td { padding-top: 0; }
.item-thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border-strong);
  background: var(--surface-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; position: relative;
  color: var(--text-soft);
}
.item-thumb:hover { border-color: var(--brand-500); color: var(--brand-600); }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-thumb__remove {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--danger-500); color: #fff;
  border: 2px solid #fff;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font-size: 10px; line-height: 1;
}
.item-thumb.has-image:hover .item-thumb__remove { display: flex; }

.items-empty { padding: var(--sp-8) var(--sp-4); text-align: center; }

/* versão mobile: cartões */
.items-cards { display: none; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); }
.item-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  background: var(--surface);
}
.item-card__head { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.item-card__index {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: var(--r-sm); background: var(--gray-100);
  font-size: var(--fs-xs); font-weight: 700; color: var(--gray-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.item-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.item-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
}
.item-card__total { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .items-table { display: none; }
  .items-cards { display: flex; }
}

/* ------------------------------------------- imagens dos itens (etapa 2) */

.image-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-4);
}

.image-item {
  display: flex;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--sp-4);
}

.image-item__drop {
  width: 120px;
  height: 120px;
  flex: 0 0 120px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.image-item__drop:hover,
.image-item__drop.is-dragover { border-color: var(--brand-500); background: var(--brand-50); }
.image-item__drop.has-image { border-style: solid; border-color: var(--border); background: var(--gray-100); }
.image-item__drop img { width: 100%; height: 100%; object-fit: cover; }

.image-item__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  text-align: center;
  line-height: 1.35;
}
.image-item__hint .icon { width: 22px; height: 22px; }

.image-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.image-item__name { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.image-item__meta { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .image-item { flex-direction: column; }
  .image-item__drop { width: 100%; height: 150px; flex-basis: 150px; }
}

/* ------------------------------------------------------------- totais */

.totals { display: flex; flex-direction: column; gap: var(--sp-2); }
.totals__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-md);
}
.totals__row .label { font-weight: 500; color: var(--text-muted); font-size: var(--fs-md); }
.totals__value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.totals__sep { height: 1px; background: var(--border); margin: var(--sp-2) 0; }
.totals__grand {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-2) calc(-1 * var(--sp-2)) 0;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff;
  border-radius: var(--r-lg);
}
.totals__grand-label { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.totals__grand-value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.totals__input { width: 128px; }
.totals__control { display: flex; gap: 4px; align-items: center; }

/* barra de ações fixa
   Em páginas curtas o `position: sticky` sozinho não desce a barra: ela fica
   logo abaixo do conteúdo, deixando um vazio embaixo. Fazendo a área de
   conteúdo virar uma coluna flex que ocupa a altura toda, o `margin-top: auto`
   empurra a barra para o rodapé; em páginas longas o sticky continua valendo. */
.content--with-actions {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
}
.content--with-actions .action-bar { margin-top: auto; }

.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(21,28,29,.06);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.action-bar__summary { display: flex; flex-direction: column; margin-right: auto; }
.action-bar__summary-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.action-bar__summary-value { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .action-bar { margin-left: calc(-1 * var(--sp-3)); margin-right: calc(-1 * var(--sp-3)); padding: var(--sp-3); }
  .action-bar .btn { flex: 1 1 44%; }
}

/* ------------------------------------------------------------- banners */

.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.banner-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-sm);
  position: relative;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.banner-card:hover { box-shadow: var(--sh-md); }
.banner-card.is-selected { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-200); }
.banner-card__img {
  aspect-ratio: 16 / 7;
  background: var(--gray-100);
  object-fit: cover;
  width: 100%;
  display: block;
}
.banner-card__body { padding: var(--sp-3); }
.banner-card__title { font-size: var(--fs-md); font-weight: 600; margin-bottom: 2px; }
.banner-card__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.banner-card__check {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
}
.banner-card.is-selected .banner-card__check { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.banner-card__order {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  background: rgba(21,28,29,.75); color: #fff;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-full);
}

/* ------------------------------------------------------------- produtos (grid) */

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.product-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
}
.product-card.is-clickable { cursor: pointer; transition: box-shadow var(--transition), border-color var(--transition); }
.product-card.is-clickable:hover { box-shadow: var(--sh-md); border-color: var(--brand-300); }
.product-card__img { aspect-ratio: 4 / 3; object-fit: cover; background: var(--gray-100); width: 100%; }
.product-card__body { padding: var(--sp-3); flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.product-card__code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.product-card__name { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.product-card__prices { margin-top: auto; padding-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ------------------------------------------------------------- documento (preview PDF) */

.doc-toolbar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* O documento ocupa toda a largura da coluna: na tela vale mais o espaço para
   ler os itens do que imitar a proporção da folha. Na impressão e no PDF a
   página A4 continua mandando. */
.doc-page {
  background: #fff;
  width: 100%;
  padding: 34px 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  color: #1b2223;
  font-size: 12px;
  line-height: 1.5;
}
.doc-head { display: flex; gap: var(--sp-5); align-items: flex-start; padding-bottom: 14px; border-bottom: 2px solid var(--brand-500); }
.doc-head__logo { height: 40px; width: auto; }
.doc-head__company { flex: 1 1 auto; min-width: 0; }
.doc-head__company-name { font-size: 15px; font-weight: 700; color: var(--brand-700); }
.doc-head__company-info { font-size: 10.5px; color: #55605f; line-height: 1.45; }
.doc-head__meta { text-align: right; flex: 0 0 auto; }
.doc-head__doc-type { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #7a8584; }
.doc-head__number { font-size: 16px; font-weight: 700; color: #151c1d; font-family: var(--font-mono); }
.doc-head__meta-row { font-size: 10.5px; color: #55605f; }

.doc-section { margin-top: 16px; }
.doc-section__title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-700); padding-bottom: 3px; margin-bottom: 7px;
  border-bottom: 1px solid #dfe4e4;
}
.doc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.doc-kv { display: grid; grid-template-columns: 92px 1fr; gap: 2px 8px; font-size: 11px; }
.doc-kv dt { color: #7a8584; }
.doc-kv dd { margin: 0; font-weight: 500; }

.doc-table { width: 100%; font-size: 11px; }
.doc-table th {
  background: var(--brand-700); color: #fff;
  text-align: left; padding: 6px 7px; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.doc-table td { padding: 6px 7px; border-bottom: 1px solid #eceff0; vertical-align: top; }
.doc-table tbody tr:nth-child(even) { background: #fafbfa; }
.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-table img { width: 42px; height: 42px; object-fit: cover; border-radius: 3px; border: 1px solid #eceff0; }

.doc-totals { margin-left: auto; width: 280px; font-size: 11.5px; }
.doc-totals__row { display: flex; justify-content: space-between; padding: 3px 0; }
.doc-totals__row--grand {
  margin-top: 5px; padding: 7px 10px;
  background: var(--brand-700); color: #fff;
  border-radius: 4px; font-size: 13px; font-weight: 700;
}
.doc-note {
  background: #fafbfa; border-left: 3px solid var(--lime-500);
  padding: 8px 11px; border-radius: 0 4px 4px 0;
  font-size: 11px; white-space: pre-wrap;
}
.doc-banner { width: 100%; border-radius: 4px; margin-top: 10px; }
.doc-foot {
  margin-top: 22px; padding-top: 10px; border-top: 1px solid #dfe4e4;
  font-size: 9.5px; color: #7a8584; text-align: center; line-height: 1.5;
}
.doc-conversion-note {
  margin-top: 12px; padding: 8px 11px;
  background: var(--warning-50); border: 1px solid #f3ddab; border-radius: 4px;
  font-size: 10.5px; color: var(--warning-700);
}

@media (max-width: 820px) {
  .doc-page { padding: 20px 16px; font-size: 11px; }
  .doc-head { flex-direction: column; gap: var(--sp-3); }
  .doc-head__meta { text-align: left; }
  .doc-cols { grid-template-columns: minmax(0, 1fr); }
  .doc-totals { width: 100%; }
}

@media print {
  .doc-page { border: 0; box-shadow: none; max-width: none; padding: 0; border-radius: 0; }
  .content { padding: 0; }
}

/* ------------------------------------------------------------- conversão */

.conv-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: center; }
.conv-side {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: var(--surface-muted);
}
.conv-side--target { border-color: var(--brand-300); background: var(--brand-50); }
.conv-side__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.conv-side__currency { font-size: var(--fs-lg); font-weight: 700; margin: 2px 0 var(--sp-3); }
.conv-side__value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.conv-arrow { color: var(--brand-500); }
.conv-arrow .icon { width: 26px; height: 26px; }

@media (max-width: 700px) {
  .conv-compare { grid-template-columns: minmax(0, 1fr); }
  .conv-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* ------------------------------------------------------------- configurações */

.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + var(--sp-5)); }
.settings-nav button {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border: 0; background: transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 500;
  color: var(--gray-600); cursor: pointer; text-align: left;
}
.settings-nav button:hover { background: var(--gray-100); color: var(--gray-900); }
.settings-nav button.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.settings-nav .icon { width: 17px; height: 17px; flex: 0 0 17px; }

.color-input { display: flex; align-items: center; gap: var(--sp-2); }
.color-input input[type="color"] {
  width: 38px; height: 34px; padding: 2px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
}

.logo-preview {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: var(--sidebar-bg);
  border-radius: var(--r-lg);
  min-height: 96px;
}
.logo-preview img { max-height: 48px; width: auto; }

/* ------------------------------------------------- concluir venda / retorno */

.conclude-table td { vertical-align: middle; }
.conclude-table th.col-qtd-orcada,   .conclude-table td.col-qtd-orcada   { width: 96px; }
.conclude-table th.col-qtd-aprovada, .conclude-table td.col-qtd-aprovada { width: 96px; }
/* largura fixa na justificativa para a descrição ficar com o que sobra —
   em percentual ela comia a coluna do produto e o nome quebrava em 3 linhas */
.conclude-table th.col-reason,       .conclude-table td.col-reason       { width: 230px; }
.conclude-table th.col-aprovado,     .conclude-table td.col-aprovado     { width: 110px; }
/* item recusado por inteiro fica apagado, sem sumir da lista */
.conclude__row--out { color: var(--text-soft); }
.conclude__row--out .table__cell-main { text-decoration: line-through; }

.conclude__summary {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.conclude__summary-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.conclude__summary-line + .conclude__summary-line { margin-top: var(--sp-2); }
.conclude__summary-line--result { color: var(--text-muted); font-size: var(--fs-sm); }

/* alerta do painel: amarelo enquanto está no prazo, vermelho quando passa */
.pending-return { border-left: 3px solid var(--warning-500); }
.pending-return--late { border-left-color: var(--danger-500); }
.pending-return .card__title { display: flex; align-items: center; gap: var(--sp-2); }
/* .icon não tem tamanho próprio — quem dimensiona é sempre o contexto.
   Sem esta regra o alerta saía com um ícone do tamanho do cartão. */
.pending-return .card__title .icon {
  width: 18px; height: 18px; flex: 0 0 18px;
  color: var(--warning-500);
}
.pending-return--late .card__title .icon { color: var(--danger-500); }

/* ------------------------------------------------- resultado da venda */

.sale-result { border-left: 3px solid var(--brand-500); }
.sale-result--partial { border-left-color: var(--warning-500); }
.sale-result__count { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }

.sale-item {
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--border);
  margin-bottom: var(--sp-2);
  background: var(--surface-muted);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.sale-item--success { border-left-color: var(--brand-500); }
.sale-item--warning { border-left-color: var(--warning-500); }
.sale-item--danger  { border-left-color: var(--danger-500); }

.sale-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.sale-item__name { font-size: var(--fs-md); font-weight: 500; }
.sale-item__value { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.sale-item__meta {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted);
}
/* o motivo é o que explica a linha: fica logo abaixo, em itálico */
.sale-item__reason {
  margin-top: 4px;
  font-size: var(--fs-sm); font-style: italic; color: var(--text-muted);
}

.sale-result__note {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--brand-50); border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.sale-result__note-label {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  color: var(--brand-700); margin-bottom: 2px;
}
.sale-result__diff {
  margin-top: var(--sp-2); text-align: right;
  font-size: var(--fs-sm); color: var(--text-muted);
}