/* ══════════════════════════════════════════════════════════════
   MÓDULO · DIESEL · v0.5.0
   ──────────────────────────────────────────────────────────────
   v0.5.0: tokens tipográficos semânticos (--ts-*, --fw-*), barra
   de filtros compacta (padding 14→8), KPI strip dedicada da tela
   Postos com flags de gap (sem geocod / sem match) e highlight
   nas linhas correspondentes.

   Paridade visual com Gestor de Jornada, escopada no `.diesel`.
   Não toca em tokens.css/shell.css/main.js — todos os deltas
   ficam dentro deste arquivo.

   Estratégia: re-declarar as classes-padrão do Gestor com seus
   valores exatos (paddings, sizes, line-heights, cores). Como o
   shell.css genérico tem dash-hero/portal-card com valores um
   pouco diferentes, este arquivo SOBREPÕE quando entra em `.diesel`.
   ══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. Container + override de tokens semafóricos
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel {
  /* Override escopado: --warn do Gestor é dourado (gold-dark),
     não o âmbar do shell genérico. Vale só para descendentes. */
  --warn:     #b8923f;
  --warn-bg:  #fdf6e3;

  /* ── Escala tipográfica (v0.5.0) ─────────────────────────────
     Tokens semânticos. Use sempre as variáveis abaixo em vez de
     literais. Cobre headers, body, KPIs, labels, micro-textos.
     ─────────────────────────────────────────────────────────── */
  --ts-h1:      22px;   /* hero/section principal              */
  --ts-h2:      17px;   /* sub-headers de seção                */
  --ts-h3:      14px;   /* títulos de painel/card              */
  --ts-body:    13px;   /* texto corrente, tabelas, dropdowns  */
  --ts-small:   12px;   /* secundário, hints, meta             */
  --ts-micro:   11px;   /* labels uppercase, badges            */
  --ts-kpi:     24px;   /* números grandes de KPI              */
  --ts-kpi-sm:  17px;   /* KPI compacto inline                 */

  --fw-bold:    700;
  --fw-semi:    600;
  --fw-reg:     400;

  --lh-tight:   1.2;
  --lh-base:    1.45;

  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 28px 48px;  /* Gestor usa 22 28 no .content */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. DASH-HERO (valores EXATOS do Gestor)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .dash-hero {
  background: linear-gradient(135deg, var(--primary) 0%, #2a5957 100%);
  color: #fff;
  border-radius: 12px;
  padding: 18px 28px 20px;      /* Gestor: 18 28 20 */
  margin-bottom: 14px;          /* Gestor: 14 */
  box-shadow: var(--shadow-md);
}
.diesel .dash-hero .eyebrow {
  font-size: var(--fs-xs);            /* Gestor: 10.5 */
  color: #a7c4c3;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: var(--fw-semibold);
}
.diesel .dash-hero h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);              /* Gestor: 22 (eu tava 26) */
  font-weight: var(--fw-bold);
  margin: 0 0 6px 0;
  color: #fff;
  line-height: 1.2;             /* Gestor: 1.2 */
  letter-spacing: -.3px;
}
.diesel .dash-hero .sub {
  font-size: var(--fs-base);            /* Gestor: 12.5 (eu tava 13) */
  color: #c8dbda;
  margin: 0;
  max-width: 840px;
  line-height: 1.5;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. PORTAL-GRID + PORTAL-CARD (valores EXATOS do Gestor)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;          /* Gestor: 22 */
}
.diesel .portal-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.diesel .portal-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.diesel .portal-card .pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.diesel .portal-card .pc-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);              /* Gestor: 15px — emoji nesse tamanho */
  background: var(--bg);
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}
.diesel .portal-card.crit  .pc-ico { background: #fee2e2; color: #dc2626; }
.diesel .portal-card.warn  .pc-ico { background: #fef3c7; color: #d97706; }
.diesel .portal-card.alert .pc-ico { background: #f3f4f6; color: #6b7280; }
.diesel .portal-card.ok    .pc-ico { background: #d1fae5; color: #059669; }
.diesel .portal-card.info  .pc-ico { background: #e0f2fe; color: #0369a1; }

.diesel .portal-card .pc-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sub);
  font-weight: var(--fw-semibold);
}
.diesel .portal-card .pc-valor {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--txt);
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.diesel .portal-card.crit  .pc-valor { color: #dc2626; }
.diesel .portal-card.warn  .pc-valor { color: #d97706; }
.diesel .portal-card.alert .pc-valor { color: #374151; }
.diesel .portal-card.ok    .pc-valor { color: #059669; }
.diesel .portal-card.info  .pc-valor { color: var(--primary); }
.diesel .portal-card .pc-desc {
  font-size: var(--fs-sm);
  color: var(--sub);
  line-height: 1.4;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. FONTE-SECTION (estilo "Espelho de Ponto · Protheus")
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .fonte-section {
  margin-bottom: 22px;
}
.diesel .fonte-section__head {
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--primary);
  border-radius: 10px 10px 0 0;
  padding: 14px 18px 12px;
  border-bottom: 0;
}
.diesel .fonte-section__head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--txt);
  margin: 0 0 4px;
  letter-spacing: -.2px;
  line-height: 1.2;
}
.diesel .fonte-section__head .sub {
  font-size: var(--fs-sm);
  color: var(--sub);
  margin: 0;
  line-height: 1.5;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. DROPZONE (placeholder em-breve)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 38px 24px;
  background: var(--card);
  border: 2px dashed var(--borda);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.diesel .dropzone:hover:not(.is-disabled) {
  border-color: var(--accent);
  background: #fafefb;
}
.diesel .dropzone.is-drag {
  border-color: var(--accent);
  background: #f0fdf4;
  border-style: solid;
}
.diesel .dropzone.is-disabled {
  cursor: not-allowed;
  opacity: .65;
  background: var(--bg-soft);
}
.diesel .dropzone__ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--sub);
  margin-bottom: 4px;
  line-height: 1;
}
.diesel .dropzone__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--txt);
}
.diesel .dropzone__sub {
  font-size: var(--fs-sm);
  color: var(--sub);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. FRENTES (lista compacta — não card grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .frentes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--borda);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.diesel .frente-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--borda-soft);
  transition: background .12s;
}
.diesel .frente-row:first-child { border-top: 0; }
.diesel .frente-row:hover { background: var(--bg-soft); }
.diesel .frente-row.is-next {
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 60%);
}

.diesel .frente-row__ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  line-height: 1;
}
.diesel .frente-row.is-next .frente-row__ico {
  background: var(--accent-soft);
}

.diesel .frente-row__titulo {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--txt);
  margin-bottom: 2px;
}
.diesel .frente-row__sub {
  font-size: var(--fs-sm);
  color: var(--sub);
  line-height: 1.4;
}
.diesel .frente-row__badge {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sub);
  background: var(--bg);
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.diesel .frente-row__badge.is-next {
  color: #fff;
  background: var(--accent);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Responsivo
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 720px) {
  .diesel { padding: 16px 16px 48px; }
  .diesel .dash-hero { padding: 16px 20px 18px; }
  .diesel .dash-hero h2 { font-size: var(--fs-xl); }
  .diesel .frente-row { grid-template-columns: 32px 1fr; }
  .diesel .frente-row__badge { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. PROGRESSO DE UPLOAD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .diesel-progress {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.diesel .diesel-progress__msg {
  font-size: var(--fs-base);
  color: var(--txt);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.diesel .diesel-progress__bar {
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.diesel .diesel-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s ease, background .15s;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. RESULTADO DA IMPORTAÇÃO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .diesel-resultado {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
}
.diesel .diesel-resultado__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.diesel .diesel-resultado__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.diesel .diesel-resultado__head strong {
  font-size: var(--fs-md);
  color: var(--txt);
  display: block;
}
.diesel .diesel-resultado__meta {
  font-size: var(--fs-sm);
  color: var(--sub);
  margin-top: 2px;
}
.diesel .diesel-resultado__header {
  font-size: var(--fs-base);
  color: var(--sub);
  padding: 8px 10px;
  background: var(--bg-soft);
  border-radius: 6px;
  margin: 8px 0;
}
.diesel .diesel-resultado__flags {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fdf6e3;
  border: 1px solid #f3e8b5;
  border-radius: 6px;
}
.diesel .diesel-resultado__flags-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #92400e;
  margin-bottom: 6px;
}
.diesel .diesel-resultado__flags ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-base);
  color: var(--txt);
}
.diesel .diesel-resultado__flags li {
  padding: 2px 0;
}
.diesel .diesel-resultado__flags li b {
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
  color: #92400e;
}
.diesel .diesel-resultado__warn {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  font-size: var(--fs-base);
  color: #78350f;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. HISTÓRICO DE IMPORTAÇÕES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .diesel-imports {
  background: var(--card);
  border: 1px solid var(--borda);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.diesel .diesel-import-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--borda-soft);
}
.diesel .diesel-import-row:first-child { border-top: 0; }
.diesel .diesel-import-row__ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
}
.diesel .diesel-import-row__nome {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--txt);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diesel .diesel-import-row__meta {
  font-size: var(--fs-sm);
  color: var(--sub);
}
.diesel .diesel-import-row--skel {
  height: 56px;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg) 100%);
  background-size: 200% 100%;
  animation: skel 1.2s ease-in-out infinite;
}
@keyframes skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.diesel .diesel-empty {
  padding: 24px 20px;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--sub);
}

/* ui-vazio (sem cliente) */
.diesel .ui-vazio {
  max-width: 480px;
  margin: 60px auto;
  padding: 32px 24px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.diesel .ui-vazio__ico { font-size: var(--fs-4xl); margin-bottom: 12px; }
.diesel .ui-vazio h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0 0 6px; color: var(--txt); }
.diesel .ui-vazio p  { font-size: var(--fs-base); color: var(--sub); margin: 0; line-height: 1.5; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. GESTÃO DE MÉDIAS — FILTROS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .diesel-filtros {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.diesel .diesel-filtros__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.diesel .diesel-filtros__linha--sec {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borda-soft);
}
.diesel .diesel-filtros__campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diesel .diesel-filtros__campo > span {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sub);
  font-weight: var(--fw-semibold);
}
.diesel .diesel-filtros__campo input {
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: var(--fs-base);
  background: var(--card);
  color: var(--txt);
  font-family: var(--font-ui);
}
.diesel .diesel-filtros__campo input:focus {
  outline: none;
  border-color: var(--accent);
}
.diesel .diesel-filtros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.diesel .diesel-filtros__multi {
  width: 100%;
}
.diesel .diesel-filtros__label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sub);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}

/* Chips */
.diesel .chip {
  background: var(--card);
  border: 1px solid var(--borda);
  color: var(--txt);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.diesel .chip:hover:not(.is-on) {
  background: var(--bg-soft);
  border-color: var(--sub);
}
.diesel .chip.is-on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.diesel .chip.is-on.is-warn {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}
.diesel .chip--sm { padding: 4px 10px; font-size: var(--fs-sm); }
.diesel .chip--solo {
  background: var(--bg);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  font-weight: var(--fw-semibold);
}
.diesel .chip--ghost {
  background: transparent;
  border-style: dashed;
  color: var(--sub);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. GESTÃO DE MÉDIAS — CHARTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .diesel-charts {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 800px) {
  .diesel .diesel-charts { grid-template-columns: 1fr; }
}
.diesel .chart-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.diesel .chart-card__head {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--txt);
  letter-spacing: -.1px;
  margin-bottom: 8px;
}
.diesel .chart-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Donut */
.diesel .donut {
  width: 100%;
  max-width: 160px;
  height: auto;
}
.diesel .donut__valor {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  fill: var(--primary);
}
.diesel .donut__label {
  font-size: var(--fs-2xs);
  fill: var(--sub);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Bar chart */
.diesel .bar-chart {
  width: 100%;
  height: auto;
}
.diesel .bar__label {
  font-size: var(--fs-2xs);
  fill: var(--txt);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.diesel .bar__mes {
  font-size: var(--fs-2xs);
  fill: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.diesel .bar__tick {
  font-size: var(--fs-2xs);
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
.diesel .chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--sub);
}
.diesel .chart-legend .ll-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.diesel .ll-dot--accent { background: var(--accent); }
.diesel .ll-dot--gold   { background: var(--gold); }

.diesel .chart-empty {
  padding: 30px 0;
  color: var(--sub);
  font-size: var(--fs-sm);
  text-align: center;
}

/* Sparkline */
.diesel .sparkline {
  width: 88px;
  height: 24px;
  display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. TABELAS DE MÉDIAS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diesel .diesel-tabela,
.diesel .diesel-ciclos {
  background: var(--card);
  border: 1px solid var(--borda);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow-x: auto;
}
.diesel .diesel-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.diesel .diesel-tab thead {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--borda);
}
.diesel .diesel-tab th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sub);
  padding: 9px 10px;
  white-space: nowrap;
}
.diesel .diesel-tab th.num { text-align: right; }
.diesel .diesel-tab th.spark { width: 96px; text-align: center; }
.diesel .diesel-tab td {
  padding: 8px 10px;
  border-top: 1px solid var(--borda-soft);
  vertical-align: middle;
}
.diesel .diesel-tab td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.diesel .diesel-tab td.spark { text-align: center; }
.diesel .diesel-tab__nome {
  font-weight: var(--fw-medium);
  color: var(--txt);
}

/* Linhas hierárquicas */
.diesel .row-tipo {
  background: linear-gradient(90deg, var(--bg-soft) 0%, transparent 60%);
  font-weight: var(--fw-semibold);
}
.diesel .row-tipo td { padding-top: 12px; padding-bottom: 12px; }
.diesel .row-motor {
  cursor: pointer;
  transition: background .12s;
}
.diesel .row-motor:hover { background: var(--bg-soft); }
.diesel .row-motor__nome { font-weight: var(--fw-semibold); }
.diesel .row-placa { color: var(--sub); }
.diesel .row-placa td { padding-left: 16px; font-size: var(--fs-sm); }

.diesel .is-neg { color: var(--err); font-weight: var(--fw-semibold); }
.diesel .is-pos { color: var(--accent-dark); font-weight: var(--fw-semibold); }

/* Tabela de ciclos detalhada */
.diesel .row-ciclo {
  cursor: pointer;
  transition: background .12s;
}
.diesel .row-ciclo:hover { background: var(--bg-soft); }
.diesel .row-ciclo.is-expanded { background: var(--bg-soft); }
.diesel .row-ciclo-detalhe td {
  padding: 12px 14px;
  background: var(--bg);
  border-top: 0;
}

/* Badge */
.diesel .badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.diesel .badge--ok    { background: var(--ok-bg);   color: var(--accent-dark); }
.diesel .badge--err   { background: var(--err-bg);  color: var(--err); }
.diesel .badge--alert { background: var(--bg);      color: var(--sub); }

/* Detalhe do ciclo */
.diesel .diesel-ciclo-detalhe__meta {
  font-size: var(--fs-sm);
  color: var(--sub);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borda-soft);
}
.diesel .diesel-tab--abast th {
  font-size: var(--fs-2xs);
}
.diesel .diesel-tab--abast td {
  padding: 6px 10px;
  font-size: var(--fs-sm);
}
.diesel .diesel-tab--abast tr.is-distorcao {
  background: var(--err-bg);
}

/* ════════════════════════════════════════════════════════════
   §14 · TELA DISTORÇÕES (v0.8.1)
   ════════════════════════════════════════════════════════════ */

/* --- Perfil compacto (2 cards densos) --- */
.diesel .dist-perfil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
@media (max-width: 720px) {
  .diesel .dist-perfil { grid-template-columns: 1fr; }
}
.diesel .dist-perfil__card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px 16px;
}
.diesel .dist-perfil__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.diesel .dist-perfil__head h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  margin: 0;
  letter-spacing: .2px;
}
.diesel .dist-perfil__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: var(--fw-semibold);
}
.diesel .dist-perfil__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.diesel .dist-perfil__row {
  display: grid;
  grid-template-columns: 26px 1fr minmax(70px, 110px) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .14s;
}
.diesel .dist-perfil__row:hover { background: var(--bg-soft); }
.diesel .dist-perfil__row.is-on {
  background: rgba(5, 171, 52,.08);
  outline: 1px solid var(--accent);
}
.diesel .dist-perfil__ico {
  font-size: var(--fs-md);
  color: var(--sub);
  text-align: center;
  font-weight: var(--fw-semibold);
}
.diesel .dist-perfil__row--crit  .dist-perfil__ico { color: var(--err); }
.diesel .dist-perfil__row--warn  .dist-perfil__ico { color: var(--gold-dark, #b8860b); }
.diesel .dist-perfil__row--alert .dist-perfil__ico { color: var(--sub); }
.diesel .dist-perfil__lbl {
  font-size: var(--fs-base);
  color: var(--txt);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diesel .dist-perfil__bar {
  height: 6px;
  background: var(--borda-soft);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.diesel .dist-perfil__bar::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--gold-dark, #b8860b), var(--gold));
  border-radius: 3px;
  transition: width .35s ease-out;
}
.diesel .dist-perfil__row--crit .dist-perfil__bar::before {
  background: linear-gradient(90deg, var(--err), #d97706);
}
.diesel .dist-perfil__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  text-align: right;
  min-width: 32px;
}

/* --- Tabela de distorções --- */
.diesel .diesel-tab--dist th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.diesel .diesel-tab--dist th[data-sort]:hover {
  color: var(--primary);
}
.diesel .row-dist {
  cursor: pointer;
  transition: background .12s;
}
.diesel .row-dist:hover {
  background: var(--bg-soft);
}
.diesel .diesel-tab__post {
  max-width: 200px;
}
.diesel .diesel-tab__post small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* --- Chips de flag (badge inline na tabela) --- */
.diesel .dist-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  line-height: 1.4;
}
.diesel .dist-flag--crit  { background: var(--err-bg); color: var(--err); }
.diesel .dist-flag--warn  { background: rgba(184,134,11,.15); color: var(--gold-dark, #b8860b); }
.diesel .dist-flag--alert { background: rgba(209, 169, 80,.18); color: var(--gold-dark, #b8860b); }

.diesel .dist-flag-plus {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: var(--fs-2xs);
  background: var(--bg-soft);
  border: 1px solid var(--borda);
  border-radius: 3px;
  color: var(--sub);
  font-weight: var(--fw-semibold);
}

/* --- Tabelas dentro do drawer (sequência + outras) --- */
.diesel-tab--seq tr.is-atual {
  background: rgba(209, 169, 80,.16);
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}
.diesel-tab--seq tr.is-atual td {
  font-weight: var(--fw-semibold);
}
.diesel-tab--seq tr.is-distorcao {
  background: rgba(220,38,38,.04);
}

/* --- Drawer · conteúdo das tabs --- */
.dist-tab { padding: 4px 0; }
.dist-tab__hint {
  font-size: var(--fs-base);
  color: var(--sub);
  margin: 0 0 14px 0;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 6px;
  border-left: 3px solid var(--gold);
}

/* Diagnóstico narrativo */
.dist-diag {
  background: linear-gradient(135deg, var(--primary) 0%, #122827 100%);
  color: #fff;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.dist-diag__head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.dist-diag__body {
  font-size: var(--fs-md);
  line-height: 1.55;
  margin: 0;
  color: rgba(255,255,255,.92);
}
.dist-diag__body b { color: var(--gold); font-weight: var(--fw-semibold); }

/* Grid de blocos com definition lists */
.dist-tab__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.dist-tab__bloco {
  background: var(--bg-soft);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px 16px;
}
.dist-tab__bloco h5 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borda-soft);
  letter-spacing: .3px;
}
.dist-dl {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: var(--fs-base);
}
.dist-dl dt {
  color: var(--sub);
  font-weight: var(--fw-medium);
}
.dist-dl dd {
  margin: 0;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dist-dl dd.is-neg { color: var(--err); font-weight: var(--fw-semibold); }

/* Lista de todas as flags na linha */
.dist-flags-all h5 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  margin: 8px 0 10px 0;
}
.dist-flag-item {
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-left: 3px solid var(--gold);
}
.dist-flag-item--crit  { border-left-color: var(--err); }
.dist-flag-item--warn  { border-left-color: var(--gold-dark, #b8860b); }
.dist-flag-item--alert { border-left-color: var(--gold); }
.dist-flag-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dist-flag-item__sev {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--sub);
}
.dist-flag-item p {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--txt);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   §15 · GESTÃO DE MÉDIAS · padrão de painel canônico (v0.8.3)
   Portado do gestor-jornada · paineis + line chart + rk-list
   ════════════════════════════════════════════════════════════ */

/* --- Painel base --- */
.diesel .painel {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 14px;
}
.diesel .painel--evolucao { padding-bottom: 10px; }
.diesel .painel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.diesel .painel-row .painel { margin-top: 0; }

.diesel .painel__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.diesel .painel__title h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  letter-spacing: .2px;
}
.diesel .painel__title .sub {
  font-size: var(--fs-sm);
  color: var(--sub);
  margin: 4px 0 0 0;
  line-height: 1.4;
}
.diesel .painel__sub-h {
  margin: 0 0 10px 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.diesel .painel__ctrls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Segmented control (D/S/M) --- */
.diesel .seg {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
.diesel .seg button {
  background: transparent;
  border: 0;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--sub);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .4px;
  transition: all .12s;
  font-family: var(--font-ui);
}
.diesel .seg button:hover { color: var(--txt); }
.diesel .seg button.is-active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* --- chart-wrap reaproveitável (SVG container) --- */
.diesel .chart-wrap {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid var(--borda-soft);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 240px;
}
.diesel .chart-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.diesel .chart-wrap .axis-line { stroke: var(--borda); stroke-width: 1; }
.diesel .chart-wrap .grid-line { stroke: #f0f0f0; stroke-width: 1; }
.diesel .chart-wrap .axis-label {
  font-family: var(--font-ui);
  font-size: 13.5px;   /* antes var(--fs-xs): título de eixo maior (pedido 31/07) */
  fill: #475569;
  font-weight: var(--fw-bold);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.diesel .chart-wrap .axis-text {
  font-family: var(--font-ui);
  font-size: 13px;   /* antes var(--fs-xs): rótulos maiores (pedido 31/07) */
  fill: var(--sub);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
.diesel .chart-wrap .line-stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(5, 171, 52,.18));
}
.diesel .chart-wrap .dot {
  fill: var(--fb-accent, #05AB34);
  stroke: #fff;
  stroke-width: 1.5;
  cursor: pointer;
  transition: r .14s, stroke-width .14s, filter .14s;
  filter: drop-shadow(0 1px 2px rgba(5, 171, 52,.4));
}
.diesel .chart-wrap .dot:hover {
  r: 5.5;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(5, 171, 52,.7));
}
.diesel .chart-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-base);
}

/* --- Tooltip flutuante (singleton) --- */
.fb-chart-tt {
  position: fixed;
  background: rgba(17, 24, 39, 0.95);
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .12s;
  max-width: 240px;
}
.fb-chart-tt.is-visible { opacity: 1; }
.fb-chart-tt b { color: #d1a950; font-weight: var(--fw-semibold); }
.fb-chart-tt .tt-meta {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.7);
}

/* --- Ranking horizontal (rk-list) --- */
.diesel .rk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .diesel .rk-grid { grid-template-columns: 1fr; }
}
.diesel .rk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diesel .rk-row {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 12px;
  align-items: center;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background .12s;
}
.diesel .rk-row:hover { background: var(--bg-soft); }
.diesel .rk-row__lbl {
  color: var(--txt);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diesel .rk-row__sub {
  color: var(--muted);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
}
.diesel .rk-row__track {
  height: 18px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.diesel .rk-row__bar {
  height: 100%;
  border-radius: 4px;
  transition: width .35s ease-out;
  min-width: 2px;
}
.diesel .rk-row__bar--pos {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark, #15803D));
}
.diesel .rk-row__bar--neg {
  background: linear-gradient(90deg, var(--err), #b91c1c);
}
.diesel .rk-row__val {
  color: var(--sub);
  font-weight: var(--fw-bold);
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-md);
}
.diesel .rk-row__val.is-pos { color: var(--accent-dark, #15803D); }
.diesel .rk-row__val.is-neg { color: var(--err); }
.diesel .rk-block { min-width: 0; }

/* --- Caret + count na tabela hierárquica (preservado da v0.8.2) --- */
.diesel .row-motor__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--borda);
  border-radius: 4px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--sub);
  cursor: pointer;
  vertical-align: middle;
  transition: background .12s, color .12s, border-color .12s;
  padding: 0;
  font-family: var(--font-ui);
}
.diesel .row-motor__caret:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.diesel .row-motor.is-expanded .row-motor__caret {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.diesel .row-motor__nome {
  cursor: pointer;
  transition: color .12s;
}
.diesel .row-motor__nome:hover {
  color: var(--accent);
  text-decoration: underline;
}
.diesel .row-motor__count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--bg-soft);
  border-radius: 3px;
  color: var(--sub);
  vertical-align: middle;
}
.diesel .row-motor { cursor: default; }
.diesel .row-motor:hover { background: var(--bg-soft); }

/* ════════════════════════════════════════════════════════════
   §16 · FILTROS RICOS · padrão ctrls + filtro-multi (v0.8.4)
   Portado do gestor-jornada
   ════════════════════════════════════════════════════════════ */

/* --- Barra sticky de controles --- */
.diesel .diesel-ctrls {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  padding: 14px 0;
  margin: 14px 0;
  border-bottom: 1px solid var(--borda-soft);
}

.diesel .ctrls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
}

.diesel .ctrl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diesel .ctrl-lbl {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.diesel .ctrl-sel,
.diesel .ctrl-inp {
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  color: var(--txt);
  min-width: 150px;
  height: 36px;
  cursor: pointer;
}
.diesel .ctrl-sel:focus,
.diesel .ctrl-inp:focus {
  outline: none;
  border-color: var(--primary);
}

.diesel .ctrl-spacer { flex: 1; }

/* --- Filtro multi-select (botão + dropdown) --- */
.diesel .filtro-multi-wrap {
  position: relative;
}
.diesel .filtro-multi-btn {
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--txt);
  outline: none;
  min-width: 180px;
  max-width: 240px;
  height: 36px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  position: relative;
  cursor: pointer;
}
.diesel .filtro-multi-btn::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-2xs);
  color: var(--sub);
}
.diesel .filtro-multi-btn:hover {
  border-color: var(--primary);
}
.diesel .filtro-multi-btn.is-active {
  border-color: var(--accent);
  color: var(--accent-dark, var(--accent));
  font-weight: var(--fw-semibold);
  background: rgba(5, 171, 52,.04);
}

.diesel .filtro-multi-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  z-index: 500;
}
.diesel .filtro-multi-dropdown.is-open {
  display: block;
}

.diesel .filtro-multi-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda-soft);
}
.diesel .filtro-multi-search input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  outline: none;
}
.diesel .filtro-multi-search input:focus {
  border-color: var(--accent);
}

.diesel .filtro-multi-list {
  max-height: 260px;
  overflow-y: auto;
}

.diesel .filtro-multi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background .12s;
}
.diesel .filtro-multi-item:hover {
  background: var(--bg-soft);
}
.diesel .filtro-multi-item input[type=checkbox] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.diesel .filtro-multi-item__lbl {
  flex: 1;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diesel .filtro-multi-item__cnt {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

.diesel .filtro-multi-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--borda-soft);
  display: flex;
  justify-content: space-between;
  background: var(--bg-soft);
  border-radius: 0 0 10px 10px;
}
.diesel .filtro-multi-clear,
.diesel .filtro-multi-all {
  font-size: var(--fs-sm);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
}
.diesel .filtro-multi-clear {
  color: var(--sub);
}
.diesel .filtro-multi-clear:hover { color: var(--err); }
.diesel .filtro-multi-all { color: var(--accent); }
.diesel .filtro-multi-all:hover { color: var(--accent-dark, var(--primary)); }

/* --- Switch (toggle "Só ofensores") --- */
.diesel .switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px 0 4px;
  border: 1px solid var(--borda);
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.diesel .switch:hover {
  border-color: var(--primary);
}
.diesel .switch.is-on {
  border-color: var(--gold);
  background: rgba(209, 169, 80,.10);
}
.diesel .switch__track {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--borda);
  border-radius: 9px;
  transition: background .18s;
  flex-shrink: 0;
}
.diesel .switch.is-on .switch__track {
  background: var(--gold);
}
.diesel .switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: left .18s;
}
.diesel .switch.is-on .switch__thumb {
  left: 16px;
}
.diesel .switch__lbl {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  white-space: nowrap;
}
.diesel .switch.is-on .switch__lbl {
  color: var(--gold-dark, #b8860b);
}

/* --- Botão ghost (Limpar) --- */
.diesel .btn {
  padding: 0 14px;
  height: 36px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  font-family: var(--font-ui);
  cursor: pointer;
}
.diesel .btn-ghost {
  background: #fff;
  color: var(--txt);
  border: 1px solid var(--borda);
}
.diesel .btn-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--err);
  color: var(--err);
}

/* ════════════════════════════════════════════════════════════
   §17 · AUDITORIA TAMARA (R2 + R3 + Postos) · v0.9.0
   ════════════════════════════════════════════════════════════ */

/* --- Status badge na tabela de distorções --- */
.diesel .dist-chip-status--pendente.is-on { background: rgba(184,134,11,.16); color: var(--gold-dark, #b8860b); border-color: var(--gold-dark, #b8860b); }
.diesel .dist-chip-status--aprovado.is-on { background: rgba(5, 171, 52,.12);   color: var(--accent-dark, #15803D); border-color: var(--accent); }
.diesel .dist-chip-status--recusado.is-on { background: var(--err-bg);        color: var(--err); border-color: var(--err); }

.diesel .dist-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.diesel .dist-status-badge--pendente { background: rgba(184,134,11,.15); color: var(--gold-dark, #b8860b); }
.diesel .dist-status-badge--aprovado { background: rgba(5, 171, 52,.12);   color: var(--accent-dark, #15803D); }
.diesel .dist-status-badge--recusado { background: var(--err-bg);        color: var(--err); }

/* Linhas aprovadas/recusadas ficam visualmente atenuadas */
.diesel .row-dist--aprovado td { opacity: .68; }
.diesel .row-dist--recusado td { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(220,38,38,.4); }
.diesel .row-dist--aprovado:hover td,
.diesel .row-dist--recusado:hover td { opacity: 1; text-decoration: none; }

/* Info de status já aplicado dentro do drawer (caso já revisado) */
.dist-status-info {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: var(--fs-base);
  border-left: 4px solid;
}
.dist-status-info--aprovado { background: rgba(5, 171, 52,.08);  border-left-color: var(--accent); color: var(--accent-dark, #15803D); }
.dist-status-info--recusado { background: rgba(220,38,38,.06); border-left-color: var(--err);    color: var(--err); }
.dist-status-info__obs { font-size: var(--fs-sm); opacity: .85; margin-top: 4px; font-style: italic; }

/* --- R3 · Painel de sugestão de correção --- */
.dist-r3 {
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.dist-r3__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184,134,11,.2);
}
.dist-r3__icone { font-size: var(--fs-2xl); }
.dist-r3__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--gold-dark, #92400e);
  letter-spacing: .3px;
}
.dist-r3__sub {
  font-size: var(--fs-sm);
  color: var(--gold-dark, #92400e);
  opacity: .85;
}

.dist-r3__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.dist-r3__pair-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: rgba(255,255,255,.65);
  border-radius: 8px;
  font-size: var(--fs-sm);
}
.dist-r3__pair-item .l { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--gold-dark, #92400e); text-transform: uppercase; letter-spacing: .5px; }
.dist-r3__pair-item b { font-size: var(--fs-base); color: var(--txt); font-weight: var(--fw-semibold); }
.dist-r3__pair-item .d { font-size: var(--fs-sm); color: var(--sub); }
.dist-r3__pair-sep { font-size: var(--fs-2xl); color: var(--gold-dark, #92400e); font-weight: var(--fw-bold); text-align: center; }

.dist-r3__sugestao {
  background: rgba(255,255,255,.85);
  border: 1px dashed var(--gold-dark, #b8860b);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}
.dist-r3__sugestao-num {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  letter-spacing: -.5px;
}
.dist-r3__sugestao-delta {
  font-size: var(--fs-lg);
  color: var(--accent-dark, #15803D);
  font-weight: var(--fw-semibold);
  margin-left: 8px;
}
.dist-r3__sugestao-lbl {
  font-size: var(--fs-sm);
  color: var(--sub);
  margin: 6px 0 14px 0;
}
.dist-r3__sugestao-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.dist-r3__no-geo {
  text-align: center;
  padding: 12px 16px;
  font-size: var(--fs-base);
  color: var(--gold-dark, #92400e);
  background: rgba(255,255,255,.5);
  border-radius: 6px;
  font-style: italic;
}

/* --- Botões padrão pro drawer (R3 actions) --- */
.dist-r3 .btn,
.postos-actions .btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  font-family: var(--font-ui);
  cursor: pointer;
  border: 1px solid transparent;
}
.dist-r3 .btn:disabled,
.postos-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.dist-r3 .btn-primary,
.postos-actions .btn-primary { background: var(--accent); color: #fff; }
.dist-r3 .btn-primary:hover:not(:disabled),
.postos-actions .btn-primary:hover:not(:disabled) { background: var(--accent-dark, #15803D); }
.dist-r3 .btn-ghost,
.postos-actions .btn-ghost { background: #fff; color: var(--txt); border-color: var(--borda); }
.dist-r3 .btn-ghost:hover:not(:disabled),
.postos-actions .btn-ghost:hover:not(:disabled) { background: var(--bg-soft); }

/* --- TELA POSTOS · ações e progresso --- */
.postos-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.postos-progress {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.postos-progress__bar {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.postos-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark, #15803D));
  border-radius: 4px;
  transition: width .25s ease-out;
}
.postos-progress__txt {
  font-size: var(--fs-xs);
  color: var(--sub);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

/* --- Tabela de postos · status colors --- */
.diesel .diesel-tab--postos .row-posto { cursor: pointer; transition: background .12s; }
.diesel .diesel-tab--postos .row-posto:hover { background: var(--bg-soft); }
.diesel .diesel-tab--postos .row-posto--pendente td:first-child { border-left: 3px solid var(--gold-dark, #b8860b); }
.diesel .diesel-tab--postos .row-posto--ok       td:first-child { border-left: 3px solid var(--accent); }
.diesel .diesel-tab--postos .row-posto--ambiguo  td:first-child { border-left: 3px solid var(--gold); }
.diesel .diesel-tab--postos .row-posto--falha    td:first-child { border-left: 3px solid var(--err); }
.diesel .diesel-tab--postos .row-posto--manual   td:first-child { border-left: 3px solid var(--primary); }

.posto-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .4px;
  white-space: nowrap;
}
.posto-status--pendente { background: rgba(184,134,11,.15); color: var(--gold-dark, #b8860b); }
.posto-status--ok       { background: rgba(5, 171, 52,.12);   color: var(--accent-dark, #15803D); }
.posto-status--ambiguo  { background: rgba(209, 169, 80,.18); color: var(--gold-dark, #b8860b); }
.posto-status--falha    { background: var(--err-bg);        color: var(--err); }
.posto-status--manual   { background: rgba(29, 59, 58,.10);   color: var(--primary); }

/* Botões de ação no drawer (footer do criarDrawer já adiciona acoes) */
.fb-drawer .btn-primary,
.fb-drawer__footer .btn-primary { background: var(--accent); color: #fff; }
.fb-drawer .btn-primary:hover,
.fb-drawer__footer .btn-primary:hover { background: var(--accent-dark, #15803D); }
.fb-drawer .btn-danger,
.fb-drawer__footer .btn-danger { background: #fff; color: var(--err); border: 1px solid var(--err); }
.fb-drawer .btn-danger:hover,
.fb-drawer__footer .btn-danger:hover { background: var(--err-bg); }

/* ════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════
   §18 · COMPARATIVO · Frente a frente até 4 motoristas (v0.10.0)
   Portado do gestor-jornada (.fef-*)
   ════════════════════════════════════════════════════════════ */

.diesel .fef-panel {
  padding: 14px 18px;
  position: relative;
  margin-top: 14px;
}

.diesel .fef-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}
.diesel .fef-toolbar__filtros {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.diesel .fef-toolbar__search {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.diesel .fef-sug-btn {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  font-family: var(--font-ui);
}
.diesel .fef-sug-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-dark, #a8861b);
}
.diesel .fef-sug-btn.is-on {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.diesel .fef-sug-btn:disabled { opacity: .5; cursor: not-allowed; }

.diesel .fef-toolbar__search input {
  width: 100%;
  padding: 9px 14px;
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #fff;
  outline: none;
}
.diesel .fef-toolbar__search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(5, 171, 52,.15);
}

.diesel .fef-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.diesel .fef-search-hint {
  padding: 6px 14px;
  font-size: var(--fs-2xs);
  color: var(--sub);
  background: var(--bg-soft);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: var(--fw-bold);
}
.diesel .fef-search-result {
  padding: 9px 14px;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px dashed var(--borda-soft);
}
.diesel .fef-search-result:hover { background: #f0fdf4; }
.diesel .fef-search-result:last-child { border-bottom: none; }
.diesel .fef-search-result .nm { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--txt); }
.diesel .fef-search-result .meta { font-size: var(--fs-xs); color: var(--sub); font-family: var(--font-mono); margin-top: 2px; }
.diesel .fef-search-empty {
  padding: 16px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--sub);
  font-style: italic;
}

/* Roster · 4 colunas iguais; cai pra 2×2 ou 1×4 em mobile */
.diesel .fef-roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) { .diesel .fef-roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .diesel .fef-roster { grid-template-columns: 1fr; } }

/* Card base · cor por slot via classes --slot0..3 (border-top accent) */
.diesel .fef-card {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  opacity: 0;
  animation: fefIn .35s cubic-bezier(.4, 0, .2, 1) forwards;
  transition: transform .18s, box-shadow .18s;
}
@keyframes fefIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.diesel .fef-card--slot0 { border-top: 3px solid var(--fb-primary, #1D3B3A); }
.diesel .fef-card--slot1 { border-top: 3px solid #b8923f; }
.diesel .fef-card--slot2 { border-top: 3px solid #0ea5e9; }
.diesel .fef-card--slot3 { border-top: 3px solid #a855f7; }
.diesel .fef-card--slot0 .fef-card__avatar { background: linear-gradient(135deg, var(--primary), #2d5957); color: #fff; }
.diesel .fef-card--slot1 .fef-card__avatar { background: linear-gradient(135deg, #b8923f, #a8861b); color: #fff; }
.diesel .fef-card--slot2 .fef-card__avatar { background: linear-gradient(135deg, #0ea5e9, #0369a1); color: #fff; }
.diesel .fef-card--slot3 .fef-card__avatar { background: linear-gradient(135deg, #a855f7, #6b21a8); color: #fff; }

.diesel .fef-card.is-alvo {
  border-color: #b8923f;
  box-shadow: 0 0 0 2px rgba(201,168,69,.25), 0 6px 20px rgba(201,168,69,.18);
  background: linear-gradient(180deg, #fffdf5 0%, #fefbed 100%);
}
.diesel .fef-card.is-fora-ciclo {
  background: #fef2f2;
  border-color: #fecaca;
}

.diesel .fef-card__halo {
  position: absolute;
  top: -1px; right: 14px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #b8923f, #a8861b);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(201,168,69,.4);
  z-index: 1;
}

.diesel .fef-card__close {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent;
  border: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--sub);
  font-size: var(--fs-xl);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
  z-index: 2;
}
.diesel .fef-card__close:hover { background: #fee2e2; color: #dc2626; }

.diesel .fef-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 6px;
}
.diesel .fef-card__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.5px;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.12);
}

.diesel .fef-card__nm {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--txt);
  text-align: center;
  line-height: 1.2;
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diesel .fef-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 6px 0 8px;
}
.diesel .fef-tag {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .2px;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diesel .fef-tag--func { background: #e0f2fe; color: #075985; }
.diesel .fef-tag--fil  { background: #ecfdf5; color: #065f46; }

/* Bloco de atributos */
.diesel .fef-card__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda-soft);
  flex: 1;
}
.diesel .fef-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diesel .fef-stat__row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.diesel .fef-stat__lbl {
  font-size: var(--fs-xs);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diesel .fef-stat__val {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  letter-spacing: -.2px;
  white-space: nowrap;
}
.diesel .fef-stat__val .un {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-left: 2px;
  font-family: var(--font-ui);
}
.diesel .fef-stat__naoaplica {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}

.diesel .fef-stat__bar {
  height: 5px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.diesel .fef-stat__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  width: 0;
  background: linear-gradient(90deg, #cbd5e1, #64748b);
  animation: fefBar .85s cubic-bezier(.4, 0, .2, 1) forwards;
}
.diesel .fef-card--slot0 .fef-stat__bar i { background: linear-gradient(90deg, #86efac, #15803d); }
.diesel .fef-card--slot1 .fef-stat__bar i { background: linear-gradient(90deg, #fde68a, #a8861b); }
.diesel .fef-card--slot2 .fef-stat__bar i { background: linear-gradient(90deg, #67e8f9, #0e7490); }
.diesel .fef-card--slot3 .fef-stat__bar i { background: linear-gradient(90deg, #c4b5fd, #7c3aed); }
@keyframes fefBar { from { width: 0; } to { width: var(--bar-w, 100%); } }

.diesel .fef-stat__row3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 14px;
}
.diesel .fef-stat__delta {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.diesel .fef-stat__delta--alvo { color: #a8861b; font-weight: var(--fw-bold); }
.diesel .fef-stat__delta--good { color: var(--accent-dark, #15803D); }
.diesel .fef-stat__delta--bad  { color: var(--err); }
.diesel .fef-stat__delta--neut { color: var(--muted); font-weight: var(--fw-medium); }

.diesel .fef-card__foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--borda-soft);
  display: flex;
  justify-content: center;
}
.diesel .fef-card__alvo-btn {
  background: var(--bg-soft);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 6px 16px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font-ui);
  letter-spacing: .2px;
}
.diesel .fef-card__alvo-btn:hover {
  background: #fffbeb;
  border-color: #b8923f;
  color: #a8861b;
}
.diesel .fef-card__alvo-on {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #a8861b;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  padding: 6px 16px;
  border-radius: 18px;
  letter-spacing: .4px;
}

.diesel .fef-card__warn {
  font-size: var(--fs-sm);
  color: var(--err);
  font-style: italic;
  text-align: center;
  padding: 14px 10px;
}

/* Slot vazio */
.diesel .fef-card--empty {
  background: #fafafb;
  border: 2px dashed var(--borda);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 14px;
  min-height: 200px;
  opacity: 1;
  animation: none;
}
.diesel .fef-card--empty .fef-card__empty-ico {
  font-size: var(--fs-3xl);
  opacity: .4;
  margin-bottom: 8px;
}
.diesel .fef-card--empty .fef-card__empty-lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--sub);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.diesel .fef-card--empty .fef-card__empty-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   §19 · AUDITORIA TAMARA — refinos pós-revisão (v0.11.0)
   1. Linha amarela na tabela pra preco_inconsistente pendente
   2. Caixa de alerta amarelo no drawer (texto literal Tamara)
   ════════════════════════════════════════════════════════════ */

/* Linha inteira em amarelo quando R2 pendente — pedido literal
   "Destaque em amarelo" do documento da Tamara. */
.diesel .row-dist--preco-alerta td {
  background: #fef9c3 !important;
  border-bottom-color: #fde68a !important;
}
.diesel .row-dist--preco-alerta:hover td {
  background: #fef08a !important;
}
.diesel .row-dist--preco-alerta td:first-child {
  border-left: 3px solid #ca8a04;
  padding-left: 9px;
}

/* Caixa de alerta amarelo dentro do drawer · texto literal Tamara */
.dist-alerta-amarelo {
  background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
  border: 1px solid #ca8a04;
  border-left: 4px solid #a16207;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: var(--fs-base);
  color: #713f12;
}
.dist-alerta-amarelo__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dist-alerta-amarelo__row + .dist-alerta-amarelo__row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(161,98,7,.2);
}
.dist-alerta-amarelo__ico {
  font-size: var(--fs-xl);
  flex-shrink: 0;
  margin-top: -2px;
}
.dist-alerta-amarelo b {
  color: #713f12;
  font-weight: var(--fw-bold);
}
.dist-alerta-amarelo__sub {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: #854d0e;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   §20 · CICLOS DE BORDA · badge + tooltip pure-CSS (v0.12.0)
   ============================================================
   Marca visual pros ciclos com primeiro_no_periodo = true.
   Antes da v0.12.0 esses ciclos eram filtrados fora do recorte;
   agora entram e ganham aviso visual nas tabelas + tags do
   comparativo + hint contextual no hero da Gestão de Médias.
   ============================================================ */

/* Badge inline (tabela Últimos ciclos · coluna Placa) */
.diesel .badge-borda {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fef9c3;        /* amarelo claro */
  color: #713f12;
  border: 1px solid #fde047;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  white-space: nowrap;
  margin-left: 6px;
  position: relative;
  cursor: help;
  vertical-align: middle;
}
.diesel .row-ciclo--borda > td {
  background: rgba(254, 249, 195, .35);
}
.diesel .row-ciclo--borda:hover > td {
  background: rgba(253, 224, 71, .25);
}

/* Marca compacta na tabela hierárquica (ao lado do count de placas) */
.diesel .row-motor__borda {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fef9c3;
  color: #713f12;
  border: 1px solid #fde047;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  cursor: help;
  position: relative;
}

/* Tag de borda nos cards do comparativo */
.diesel .fef-tag--borda {
  background: #fef9c3 !important;
  color: #713f12 !important;
  border: 1px solid #fde047 !important;
  cursor: help;
  position: relative;
}

/* Hint contextual no hero da Gestão de Médias */
.diesel .hero-borda-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  margin-left: 4px;
  border-radius: 999px;
  background: #fef9c3;
  color: #713f12;
  border: 1px solid #fde047;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: help;
  vertical-align: 1px;
}
.diesel .hero-borda-ico {
  font-size: var(--fs-sm);
  line-height: 1;
}

/* ── Tooltip pure-CSS via data-tip ───────────────────────────
   Qualquer elemento com [data-tip] mostra balão custom no hover.
   Vem do mesmo padrão do gestor; coexiste com title nativo
   (data-tip prevalece visualmente). */
.diesel [data-tip] {
  position: relative;
}
.diesel [data-tip]:hover::after,
.diesel [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #1f2937;
  color: #f9fafb;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.diesel [data-tip]:hover::before,
.diesel [data-tip]:focus-visible::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  border: 6px solid transparent;
  border-top-color: #1f2937;
  pointer-events: none;
}

/* ============================================================
   §21 · POSTOS ANP · tile na Central + modal de upload + match (v0.13.0)
   ============================================================
   Tile shared na Central de Dados pra subir CSV mensal da ANP,
   modal de pre-flight com confirmação, e estilos novos da tela
   Postos (badge bandeira, status match, status geocoder).
   ============================================================ */

/* ── Seção shared (na Central) ──────────────────────────────── */
.diesel .fonte-section--shared {
  background: linear-gradient(135deg, rgba(99,102,241,.04) 0%, rgba(99,102,241,.01) 100%);
  border-left: 3px solid #6366f1;
  padding-left: 16px;
  border-radius: 4px;
}
.diesel .badge-shared {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 4px;
}

/* ── Tile ANP (status + ação) ──────────────────────────────── */
.diesel .anp-tile {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  margin-top: 14px;
}
.diesel .anp-tile__status {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  flex: 1 1 auto;
  min-width: 280px;
}
.diesel .anp-tile__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.diesel .anp-tile__metric-lbl {
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}
.diesel .anp-tile__metric-val {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--fg, #111827);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.diesel .anp-tile__metric-totalpct {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--sub, #6b7280);
  margin-left: 4px;
}
.diesel .anp-tile__metric-sub {
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
}
.diesel .anp-tile__empty {
  color: var(--sub, #9ca3af);
  font-weight: var(--fw-medium);
}
.diesel .anp-tile__actions {
  flex-shrink: 0;
}

/* ── Modal ANP ─────────────────────────────────────────────── */
.diesel .anp-modal-wrap[hidden] {
  display: none !important;
}
.diesel .anp-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diesel .anp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.diesel .anp-modal {
  position: relative;
  background: #fff;
  border-radius: 10px;
  width: min(620px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden;
}
.diesel .anp-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #e5e7eb;
}
.diesel .anp-modal__head h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.diesel .anp-modal__close {
  background: none;
  border: none;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}
.diesel .anp-modal__close:hover { color: #111827; }
.diesel .anp-modal__body {
  padding: 22px;
  overflow-y: auto;
}
.diesel .anp-modal__loading {
  text-align: center;
  padding: 30px 0;
  color: var(--sub, #6b7280);
}
.diesel .anp-modal__spinner {
  font-size: var(--fs-3xl);
  margin-bottom: 8px;
}

/* preview rows */
.diesel .anp-modal__preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.diesel .anp-modal__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed #e5e7eb;
}
.diesel .anp-modal__row:last-child {
  border-bottom: none;
}
.diesel .anp-modal__lbl {
  font-size: var(--fs-sm);
  color: var(--sub, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: var(--fw-semibold);
}
.diesel .anp-modal__val {
  font-size: var(--fs-md);
  color: var(--fg, #111827);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.diesel .anp-modal__val--big {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
.diesel .anp-modal__competencia-hint {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--sub, #6b7280);
}

/* alertas */
.diesel .anp-modal__alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: var(--fs-base);
  line-height: 1.55;
  margin-top: 4px;
}
.diesel .anp-modal__alert--warn {
  background: #fef9c3;
  border: 1px solid #fde047;
  color: #713f12;
}
.diesel .anp-modal__alert--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
}
.diesel .anp-modal__alert-ico {
  font-size: var(--fs-xl);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}

/* details com amostra */
.diesel .anp-modal__detalhes {
  margin-top: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0;
}
.diesel .anp-modal__detalhes summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--sub, #6b7280);
  user-select: none;
}
.diesel .anp-modal__detalhes summary:hover {
  background: #f9fafb;
}
.diesel .anp-modal__amostra {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
  table-layout: fixed;
}
.diesel .anp-modal__amostra th,
.diesel .anp-modal__amostra td {
  padding: 6px 10px;
  text-align: left;
  border-top: 1px solid #f3f4f6;
  word-break: break-word;
}
.diesel .anp-modal__amostra th {
  background: #f9fafb;
  font-weight: var(--fw-semibold);
  color: #374151;
}
.diesel .anp-modal__amostra code {
  font-size: var(--fs-xs);
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
}

/* progress */
.diesel .anp-modal__progress {
  margin-top: 16px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 6px;
}
.diesel .anp-modal__progress-msg {
  font-size: var(--fs-base);
  color: var(--fg, #111827);
  margin-bottom: 8px;
}
.diesel .anp-modal__progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.diesel .anp-modal__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  width: 0%;
  transition: width .3s ease;
}

/* footer */
.diesel .anp-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}
.diesel .anp-modal__footer .btn { font-size: var(--fs-base); padding: 8px 16px; }

/* resultado / erro */
.diesel .anp-modal__sucesso,
.diesel .anp-modal__erro {
  padding: 22px;
  text-align: center;
}
.diesel .anp-modal__sucesso-ico,
.diesel .anp-modal__erro-ico {
  font-size: var(--fs-4xl);
  margin-bottom: 8px;
}
.diesel .anp-modal__sucesso-ico { color: #059669; }
.diesel .anp-modal__erro-ico    { color: #dc2626; }
.diesel .anp-modal__sucesso h4,
.diesel .anp-modal__erro h4 {
  margin: 4px 0 14px;
  font-size: var(--fs-lg);
}
.diesel .anp-modal__sucesso-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
}
.diesel .anp-modal__sucesso-stats li {
  font-size: var(--fs-base);
  padding: 6px 10px;
  background: #f9fafb;
  border-radius: 4px;
}
.diesel .anp-modal__sucesso-stats b {
  font-size: var(--fs-lg);
  color: var(--fg, #111827);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.diesel .anp-modal__erro p {
  color: var(--sub, #6b7280);
  font-size: var(--fs-base);
  margin: 0 0 8px;
}
.diesel .anp-modal__erro code {
  font-size: var(--fs-sm);
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Tela Postos · novos elementos ──────────────────────────── */
.diesel .row-posto__cnpj {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  font-weight: var(--fw-regular);
  margin-top: 2px;
  letter-spacing: -.01em;
}
.diesel .row-posto__bandeira {
  display: inline-block;
  padding: 2px 8px;
  background: #f3f4f6;
  color: #374151;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
}
.diesel .row-posto__dim {
  color: var(--sub, #9ca3af);
  font-size: var(--fs-sm);
}

/* status badges adicionais (sem CEP, indeterminado) */
.diesel .posto-status--alert {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
}

/* ─────────────────────────────────────────────────────────────
 * MATCH MANUAL — modal (v0.14.0)
 * Reaproveita .anp-modal-wrap / .anp-modal / .anp-modal__head
 * etc., adicionando layout específico do conteúdo.
 * ───────────────────────────────────────────────────────────── */

.diesel .anp-modal--match-manual {
  max-width: 760px;
  width: 92vw;
}

.diesel .match-manual__alvo {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.diesel .match-manual__alvo-lbl {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 4px;
}
.diesel .match-manual__alvo-nome {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #0f172a;
  line-height: 1.3;
}
.diesel .match-manual__alvo-loc {
  font-size: var(--fs-base);
  color: #475569;
  margin-top: 2px;
}
.diesel .match-manual__motivo {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 6px 10px;
}

.diesel .match-manual__lista-lbl {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 8px;
}
.diesel .match-manual__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}
.diesel .match-manual__cand {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.diesel .match-manual__cand:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.diesel .match-manual__cand input[type="radio"] {
  margin-top: 3px;
  accent-color: #16a34a;
  flex-shrink: 0;
}
.diesel .match-manual__cand:has(input:checked) {
  background: #f0fdf4;
  border-color: #86efac;
}
.diesel .match-manual__cand-body { flex: 1; min-width: 0; }
.diesel .match-manual__cand-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.diesel .match-manual__cand-head b {
  font-size: var(--fs-md);
  color: #0f172a;
  line-height: 1.2;
}
.diesel .match-manual__cand-score {
  font-size: var(--fs-xs);
  color: #15803d;
  background: #dcfce7;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.diesel .match-manual__cand-meta {
  font-size: var(--fs-sm);
  color: #475569;
  margin-bottom: 3px;
}
.diesel .match-manual__cand-meta code {
  font-size: var(--fs-xs);
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
}
.diesel .match-manual__cand-end {
  font-size: var(--fs-sm);
  color: #64748b;
  font-style: italic;
}

.diesel .match-manual__vazio {
  padding: 24px 16px;
  text-align: center;
  color: #64748b;
  font-size: var(--fs-base);
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

.diesel .match-manual__footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.diesel .match-manual__footer .btn:nth-last-child(2) {
  margin-left: auto;       /* empurra "Casar" e "Próximo" pra direita */
}

/* ═════════════════════════════════════════════════════════════
 * v0.5.0 · Padronização tipográfica + ajustes de UX
 * ═════════════════════════════════════════════════════════════
 * Este bloco fica AO FINAL do arquivo de propósito: sobrescreve
 * valores literais espalhados pelas seções anteriores, aplicando
 * os tokens --ts-* / --fw-* / --lh-* declarados em .diesel.
 * ───────────────────────────────────────────────────────────── */

/* ── Headers de seção ─────────────────────────────────────── */
.diesel section > .fonte-section__head h3,
.diesel section > h2,
.diesel .postos-head h3,
.diesel .distorcoes-head h3,
.diesel .medias-head h3 {
  font-size: var(--ts-h2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--txt);
  margin: 0 0 4px;
}
.diesel .fonte-section__head .sub,
.diesel .postos-head .sub,
.diesel .distorcoes-head .sub,
.diesel .medias-head .sub {
  font-size: var(--ts-small);
  color: var(--sub);
  line-height: var(--lh-base);
  margin: 0;
  font-weight: var(--fw-reg);
}

/* ── Tabelas (postos/distorções/etc) ───────────────────────── */
.diesel .diesel-tab,
.diesel .diesel-tab th,
.diesel .diesel-tab td {
  font-size: var(--ts-body);
  line-height: var(--lh-base);
}
.diesel .diesel-tab thead th {
  font-size: var(--ts-micro);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sub);
}
.diesel .diesel-tab tbody td b,
.diesel .diesel-tab tbody td strong {
  font-weight: var(--fw-semi);   /* era 700, fica mais leve */
}

/* Linha de posto: bold só no nome, restante em peso normal */
.diesel .row-posto b { font-size: var(--ts-body); font-weight: var(--fw-semi); }
.diesel .row-posto__cnpj {
  font-size: var(--ts-micro);
  color: var(--sub);
  font-weight: var(--fw-reg);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.diesel .row-posto__bandeira {
  font-size: var(--ts-micro);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
}
.diesel .row-posto__dim {
  font-size: var(--ts-small);
  color: var(--sub);
  font-weight: var(--fw-reg);
}

/* Badges de status (match anp / geocoder) — padronizar */
.diesel .posto-status {
  font-size: var(--ts-micro);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

/* ── Barra de ações de postos ──────────────────────────────── */
.diesel .postos-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.diesel .postos-actions .btn {
  font-size: var(--ts-body);
  font-weight: var(--fw-semi);
}

/* ── KPI strip de postos (novo na v0.5.0) ──────────────────── */
.diesel .postos-kpi {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.diesel .postos-kpi__cel {
  background: #fff;
  border: 1px solid var(--borda-soft);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diesel .postos-kpi__lbl {
  font-size: var(--ts-micro);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sub);
}
.diesel .postos-kpi__val {
  font-size: var(--ts-kpi);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  line-height: 1;
}
.diesel .postos-kpi__sub {
  font-size: var(--ts-micro);
  color: var(--sub);
  font-weight: var(--fw-reg);
}
/* Variações coloridas por estado */
.diesel .postos-kpi__cel--ok    { background: #f0fdf4; border-color: #bbf7d0; }
.diesel .postos-kpi__cel--ok    .postos-kpi__val { color: #15803d; }
.diesel .postos-kpi__cel--warn  { background: #fffbeb; border-color: #fde68a; }
.diesel .postos-kpi__cel--warn  .postos-kpi__val { color: #b45309; }
.diesel .postos-kpi__cel--alert { background: #fef2f2; border-color: #fecaca; }
.diesel .postos-kpi__cel--alert .postos-kpi__val { color: #b91c1c; }

/* ── Flag de linha pendente (geocod faltando) ─────────────── */
.diesel .row-posto--gap-geocod {
  background: linear-gradient(90deg, rgba(251,191,36,0.06) 0%, transparent 60%);
}
.diesel .row-posto--gap-geocod:hover {
  background: linear-gradient(90deg, rgba(251,191,36,0.12) 0%, rgba(0,0,0,0.02) 60%);
}
.diesel .row-posto--no-match {
  background: linear-gradient(90deg, rgba(220,38,38,0.05) 0%, transparent 60%);
}
.diesel .row-posto--no-match:hover {
  background: linear-gradient(90deg, rgba(220,38,38,0.1) 0%, rgba(0,0,0,0.02) 60%);
}

/* ── Barra de filtros compacta (--ctrls) ──────────────────── */
.diesel .diesel-ctrls {
  padding: 8px 0;          /* era 14px → 8px (menos grosso) */
  margin: 10px 0;          /* era 14px */
}
.diesel .ctrls {
  align-items: center;     /* era flex-end — labels e botões na mesma linha base */
  gap: 10px;
}
.diesel .ctrl {
  gap: 3px;
}
.diesel .ctrl-lbl {
  font-size: var(--ts-micro);
  font-weight: var(--fw-semi);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.diesel .ctrl-sel,
.diesel .ctrl-inp {
  font-size: var(--ts-body);
  height: 32px;            /* era 36 */
  padding: 6px 10px;
  min-width: 130px;
}
.diesel .ctrl--action {
  align-self: flex-end;    /* alinha o botão com base dos inputs */
}
.diesel .ctrl--action .ctrl-lbl {
  /* esconde o   do botão Limpar — não precisa do espaço falso */
  display: none;
}
.diesel .ctrl--action .btn {
  height: 32px;
  padding: 0 12px;
  font-size: var(--ts-small);
  font-weight: var(--fw-semi);
}

/* Multi-select dropdown — texto */
.diesel .filtro-multi-btn {
  font-size: var(--ts-body);
  font-weight: var(--fw-reg);
  height: 32px;
}

/* ── Section padding/margin ────────────────────────────────── */
.diesel .fonte-section {
  margin-bottom: 18px;
}
.diesel .fonte-section__head {
  margin-bottom: 10px;
}

/* ═════════════════════════════════════════════════════════════
   v0.6.0 — Charts redesign + filtros refinados
   ═════════════════════════════════════════════════════════════ */

/* ── Filtros: barra ainda mais fina + Limpar alinhado ─────── */
.diesel .diesel-ctrls {
  padding: 8px 14px;
  margin-bottom: 14px;
}
.diesel .ctrls {
  gap: 12px 14px;
  align-items: flex-end;
}
.diesel .ctrl-lbl {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  margin-bottom: 3px;
  font-weight: var(--fw-bold);
  color: var(--sub, #6b7280);
}
.diesel .ctrl-sel,
.diesel .ctrl-inp,
.diesel .filtro-multi-btn {
  height: 30px;
  padding: 5px 10px;
  min-width: 110px;
  font-size: var(--ts-body);
}
.diesel .ctrl--action .btn {
  height: 30px;
  padding: 0 14px;
}

/* O botão Limpar agora não tem mais o label fake — flutua à direita */
.diesel .ctrl--reset {
  margin-left: auto;     /* empurra pro lado direito sem precisar de spacer */
  align-self: flex-end;
}

/* ── DONUT v2 — "% Atingimento" redesign ──────────────────── */
.diesel .donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 8px 12px 4px;
}
.diesel .donut-v2 {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.diesel .donut-v2__num {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.diesel .donut-v2__lbl {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--sub, #6b7280);
}
.diesel .donut-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}
.diesel .donut-legend__item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 7px;
  background: #f9fafb;
}
.diesel .donut-legend__item--ok    { background: rgba(22,163,74,.06); }
.diesel .donut-legend__item--bad   { background: rgba(220,38,38,.06); }
.diesel .donut-legend__item--total { background: #f3f4f6; border-top: 1px dashed #e5e7eb; margin-top: 4px; padding-top: 8px; padding-bottom: 8px; }
.diesel .donut-legend__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #9ca3af;
}
.diesel .donut-legend__item--ok  .donut-legend__dot { background: #16a34a; }
.diesel .donut-legend__item--bad .donut-legend__dot { background: #dc2626; }
.diesel .donut-legend__item--total .donut-legend__dot { display: none; }
.diesel .donut-legend__item--total { grid-template-columns: 1fr auto; }
.diesel .donut-legend__lbl {
  font-size: var(--ts-small);
  color: var(--text, #111827);
  font-weight: var(--fw-medium);
}
.diesel .donut-legend__val {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
  letter-spacing: 0.5px;
}

/* ── BAR v2 — "Média vs Meta" redesign ───────────────────── */
.diesel .bar-v2-wrap {
  padding: 6px 10px 2px;
}
.diesel .bar-v2 {
  width: 100%;
  height: auto;
  display: block;
}
.diesel .bar-v2__tick {
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  fill: var(--sub, #6b7280);
}
.diesel .bar-v2__val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  fill: var(--text, #111827);
}
.diesel .bar-v2__diff {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.diesel .bar-v2__mes {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--text, #111827);
}
.diesel .bar-v2-legend {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: var(--ts-small);
  color: var(--sub, #6b7280);
}
.diesel .bar-v2-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.diesel .bar-v2-legend__sw {
  width: 14px; height: 14px; border-radius: 2px;
  display: inline-block;
}
.diesel .bar-v2-legend__sw--bar.bar-v2-legend__sw--ok  { background: #16a34a; }
.diesel .bar-v2-legend__sw--bar.bar-v2-legend__sw--bad { background: #dc2626; }
.diesel .bar-v2-legend__sw--line {
  height: 3px;
  border-radius: 2px;
  background: #f59e0b;
  align-self: center;
}

/* Painéis empilhados (não mais lado-a-lado) */
.diesel .painel--donut-full,
.diesel .painel--bar-full,
.diesel .painel--hist-full {
  margin-bottom: 18px;
}
.diesel .painel--donut-full .chart-card__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

/* ── HISTOGRAMA — Distribuição de km/L ───────────────────── */
.diesel .hist-wrap {
  padding: 8px 12px 4px;
}
.diesel .hist-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--borda, #e5e7eb);
}
.diesel .hist-stat__lbl {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
  margin-bottom: 2px;
}
.diesel .hist-stat__val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  color: var(--text, #111827);
  line-height: 1;
}
.diesel .hist-stat__val small {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--sub, #6b7280);
  margin-left: 2px;
}
.diesel .hist-stat__val--ok { color: #15803d; }
.diesel .hist-svg {
  width: 100%;
  height: auto;
  display: block;
}
.diesel .hist__tick {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sub, #6b7280);
}
.diesel .hist__count {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  fill: var(--text, #111827);
  font-variant-numeric: tabular-nums;
}
.diesel .hist__xlbl {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sub, #6b7280);
}
.diesel .hist__axislbl {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
}
.diesel .hist-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: var(--ts-small);
  color: var(--sub, #6b7280);
}
.diesel .hist-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.diesel .hist-legend__sw {
  width: 14px; height: 14px; border-radius: 2px; display: inline-block;
}
.diesel .hist-legend__sw--ok    { background: rgba(22,163,74,.55); border: 1px solid #16a34a; }
.diesel .hist-legend__sw--bad   { background: rgba(220,38,38,.55); border: 1px solid #dc2626; }
.diesel .hist-legend__sw--meta  { height: 3px; align-self: center; background: #f59e0b; border-top: 1px dashed #f59e0b; }
.diesel .hist-legend__sw--media { height: 3px; align-self: center; background: #1e40af; opacity: 0.6; }

/* ── Rótulo numérico do line chart (showValues) ─────────── */
.diesel .lc-value {
  /* estilos inline já no JS — esse hook serve só pra customizar via tema */
}

/* Responsivo: empilha hist-stats em mobile */
@media (max-width: 720px) {
  .diesel .hist-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .diesel .donut-wrap {
    flex-direction: column;
    gap: 16px;
  }
}

/* ═════════════════════════════════════════════════════════════
   v0.8.1 — Reorganização layout + Top 5 Ofensores
   ═════════════════════════════════════════════════════════════ */

/* Linha donut + Top 5 (lado a lado em desktop, empilhado em mobile) */
.diesel .painel-row--donut-of {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .diesel .painel-row--donut-of { grid-template-columns: 1fr; }
}
.diesel .painel--donut-side,
.diesel .painel--ofensores-side {
  margin-bottom: 0;
}
.diesel .painel--donut-side .chart-card__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.diesel .painel--donut-side .donut-wrap {
  flex-direction: column;
  gap: 12px;
  padding: 4px 8px;
}
.diesel .painel--donut-side .donut-legend {
  flex-direction: row;
  gap: 8px;
  min-width: 0;
  width: 100%;
  justify-content: center;
}
.diesel .painel--donut-side .donut-legend__item {
  padding: 5px 10px;
  grid-template-columns: 8px 1fr auto;
  gap: 6px;
}
.diesel .painel--donut-side .donut-legend__lbl { font-size: var(--fs-xs); }
.diesel .painel--donut-side .donut-legend__val { font-size: var(--fs-lg); }
.diesel .painel--donut-side .donut-legend__dot { width: 8px; height: 8px; }
.diesel .painel--donut-side .donut-legend__item--total { padding: 5px 10px; margin-top: 0; border-top: none; border-left: 2px solid #e5e7eb; }

/* ── TOP 5 OFENSORES ─────────────────────────────────────── */
.diesel .top-of-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6px 8px 4px;
}
.diesel .top-of-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.diesel .top-of-row {
  all: unset;
  display: grid;
  grid-template-columns: 28px 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 120ms, transform 120ms, box-shadow 120ms;
}
.diesel .top-of-row:hover {
  background: #f9fafb;
  transform: translateX(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.diesel .top-of-row:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.diesel .top-of-row__pos {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: #fff;
}
.diesel .top-of-row__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #3730a3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
}
.diesel .top-of-row__main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.diesel .top-of-row__nome {
  font-size: var(--ts-small);
  font-weight: var(--fw-semi);
  color: var(--text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}
.diesel .top-of-row__bar-wrap {
  height: 5px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.diesel .top-of-row__bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
  transition: width 420ms ease-out;
}
.diesel .top-of-row__right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diesel .top-of-row__valor {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  color: var(--text, #111827);
  line-height: 1;
}
.diesel .top-of-row__meta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--sub, #6b7280);
}
.diesel .top-of-row__delta {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: #b91c1c;
  background: rgba(220,38,38,.10);
  padding: 1px 6px;
  border-radius: 9px;
  align-self: flex-end;
  letter-spacing: 0.3px;
}
.diesel .top-of-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  letter-spacing: 0.02em;
}

/* Empty state — todos atingiram */
.diesel .top-of-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px;
  background: linear-gradient(135deg, rgba(22,163,74,.06), rgba(22,163,74,.02));
  border-radius: 10px;
  border: 1px dashed rgba(22,163,74,.25);
}
.diesel .top-of-empty__ico { font-size: var(--fs-4xl); line-height: 1; }
.diesel .top-of-empty__txt { font-size: var(--ts-body); color: var(--text, #111827); }
.diesel .top-of-empty__txt b { color: #15803d; }
.diesel .top-of-empty__txt .sub { font-size: var(--ts-small); color: var(--sub, #6b7280); margin-top: 2px; }

/* ═════════════════════════════════════════════════════════════
   v0.8.1 — Layout: Donut + Gauge lado-a-lado, demais full-width
   ═════════════════════════════════════════════════════════════ */

/* Linha 1: donut + gauge lado a lado (50/50) */
.diesel .painel-row--donut-gauge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .diesel .painel-row--donut-gauge {
    grid-template-columns: 1fr;
  }
}
.diesel .painel--donut-side,
.diesel .painel--gauge-side {
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.diesel .painel--donut-side .chart-card__body,
.diesel .painel--gauge-side .chart-card__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Linhas 2-5: full-width forçado (reseta qualquer container flex/grid herdado) */
.diesel .painel--evolucao,
.diesel .painel--bar-full,
.diesel .painel--hist-full,
.diesel .painel--ofensores-full {
  display: block !important;
  width: 100% !important;
  margin-bottom: 18px;
}

/* ── GAUGE Performance vs Meta ─────────────────────────────── */
.diesel .gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 12px 12px;
}
.diesel .gauge-v2 {
  width: 280px;
  height: 220px;
  flex-shrink: 0;
}
.diesel .gauge-v2__num {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.diesel .gauge-v2__lbl {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--sub, #6b7280);
}
.diesel .gauge-v2__tick {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  fill: var(--sub, #6b7280);
}
.diesel .gauge-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 240px;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 8px;
}
.diesel .gauge-legend__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 6px;
}
.diesel .gauge-legend__row--meta {
  border-top: 1px dashed #e5e7eb;
  padding-top: 6px;
}
.diesel .gauge-legend__lbl {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
}
.diesel .gauge-legend__val {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
}
.diesel .gauge-legend__unit {
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  font-weight: var(--fw-semibold);
}

/* ── TOP OFENSORES (lista) ────────────────────────────────── */
.diesel .top-of-list {
  list-style: none;
  margin: 0; padding: 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diesel .top-of-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 10px 14px;
  background: #fff7f7;
  border-left: 3px solid #dc2626;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease;
}
.diesel .top-of-row:hover {
  background: #fee2e2;
}
.diesel .top-of-name {
  grid-column: 1;
  grid-row: 1;
  font-weight: var(--fw-semi);
  font-size: var(--ts-body);
  color: var(--text, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diesel .top-of-vals {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.diesel .top-of-realiz { color: #b91c1c; }
.diesel .top-of-vs     { color: var(--sub, #9ca3af); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.diesel .top-of-meta   { color: var(--sub, #6b7280); }
.diesel .top-of-gap    {
  color: #fff;
  background: #dc2626;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  letter-spacing: 0.3px;
  margin-left: 4px;
}
.diesel .top-of-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 4px;
  background: #fee2e2;
  border-radius: 2px;
  overflow: hidden;
}
.diesel .top-of-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #f87171);
  border-radius: 2px;
  transition: width 600ms ease-out;
}

/* ═════════════════════════════════════════════════════════════
   v0.9.0 — Mapa Top + Drawer + animações + reset layout legado
   ═════════════════════════════════════════════════════════════ */

/* ── RESET das classes legadas que insistem em ficar lado-a-lado ── */
.diesel .painel-row--donut-of {
  /* classe antiga ainda presente em alguns paths — neutraliza */
  display: block !important;
  grid-template-columns: none !important;
}
.diesel .painel-row--donut-of > .painel {
  width: 100% !important;
  margin-bottom: 16px;
}
.diesel .painel--ofensores-side {
  /* esse painel não existe mais como side — vira full quando aparece */
  width: 100% !important;
}

/* ── ANIMAÇÕES de entrada (stagger) ───────────────────────── */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.diesel .painel,
.diesel .fonte-section {
  animation: panel-in 380ms cubic-bezier(.4,.2,.2,1) both;
}
.diesel .painel:nth-child(1)         { animation-delay:  0ms; }
.diesel .painel:nth-child(2)         { animation-delay: 50ms; }
.diesel .painel:nth-child(3)         { animation-delay:100ms; }
.diesel .painel:nth-child(4)         { animation-delay:150ms; }
.diesel .painel:nth-child(5)         { animation-delay:200ms; }
.diesel .fonte-section:nth-of-type(n+2) { animation-delay: 240ms; }

@keyframes gauge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.diesel .gauge-v2 {
  animation: gauge-pulse 1.4s ease-in-out 1;
}

/* ── ABAS Tabela | Mapa em Postos ─────────────────────────── */
.diesel .fonte-section__head--withtabs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.diesel .postos-tabs {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.diesel .postos-tab {
  background: transparent;
  border: 0;
  padding: 8px 16px;
  font-size: var(--ts-body);
  font-weight: var(--fw-semi);
  color: var(--sub, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  transition: all 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.diesel .postos-tab small {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  opacity: 0.75;
}
.diesel .postos-tab:hover  { color: var(--text, #111827); }
.diesel .postos-tab.is-active {
  background: #fff;
  color: var(--text, #111827);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── MAPA host ─────────────────────────────────────────────── */
.diesel .postos-mapa-host {
  position: relative;
  margin-top: 14px;
  border-radius: 10px;
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid var(--borda, #e5e7eb);
  height: 640px;
}
.diesel .mapa-postos-host {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
}
.diesel .mapa-canvas {
  flex: 1;
  min-height: 480px;
  background: #f3f4f6;
}
.diesel .mapa-loading {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--sub, #6b7280);
}
.diesel .mapa-loading__spinner {
  width: 32px; height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--accent, #16a34a);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.diesel .mapa-erro {
  padding: 32px;
  text-align: center;
  color: #b91c1c;
}

/* Toolbar do mapa */
.diesel .mapa-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--borda, #e5e7eb);
  flex-wrap: wrap;
}
.diesel .mapa-toolbar__stats {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: var(--ts-small);
  color: var(--sub, #6b7280);
}
.diesel .mapa-toolbar__stats b {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text, #111827);
  font-variant-numeric: tabular-nums;
}
.diesel .mapa-toolbar__stats .sep { color: var(--borda, #d1d5db); }
.diesel .mapa-toolbar__ctrls {
  display: flex;
  gap: 14px;
  align-items: center;
}
.diesel .mapa-mode-seg {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 2px;
}
.diesel .mapa-mode-seg button {
  background: transparent;
  border: 0;
  padding: 4px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--sub, #6b7280);
  border-radius: 4px;
  cursor: pointer;
}
.diesel .mapa-mode-seg button.is-active {
  background: #fff;
  color: var(--text, #111827);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Cluster custom */
.diesel .mapa-cluster {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,163,74,.92);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Legenda flutuante */
.diesel .mapa-legend {
  position: absolute;
  bottom: 18px; right: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--borda, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--fs-xs);
  z-index: 500;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.diesel .mapa-legend__title {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sub, #6b7280);
  margin-bottom: 6px;
}
.diesel .mapa-legend__row {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 3px;
  color: var(--text, #111827);
}
.diesel .mapa-legend__pin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid #1f2937;
}
.diesel .mapa-legend__pin--good { background: #16a34a; }
.diesel .mapa-legend__pin--mid  { background: #f59e0b; }
.diesel .mapa-legend__pin--bad  { background: #dc2626; }
.diesel .mapa-legend__pin--none { background: #9ca3af; }
.diesel .mapa-legend__hint {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--borda, #e5e7eb);
  font-size: var(--fs-2xs);
  color: var(--sub, #6b7280);
  font-style: italic;
}

/* Tooltip Leaflet customizado */
.leaflet-tooltip.mapa-tooltip {
  background: rgba(17,24,39,.96);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.leaflet-tooltip.mapa-tooltip::before { border-top-color: rgba(17,24,39,.96); }
.diesel .mapa-tt__title { font-weight: var(--fw-bold); font-size: var(--fs-base); margin-bottom: 2px; }
.diesel .mapa-tt__sub   { font-size: var(--fs-xs); opacity: 0.78; margin-bottom: 6px; }
.diesel .mapa-tt__stats {
  display: flex; gap: 5px;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.diesel .mapa-tt__stats b { color: #fbbf24; }
.diesel .mapa-tt__stats .sep { opacity: 0.4; }
.diesel .mapa-tt__warn  { font-size: var(--fs-2xs); color: #fbbf24; margin-top: 5px; }
.diesel .mapa-tt__cta   { font-size: var(--fs-2xs); opacity: 0.65; margin-top: 6px; font-style: italic; }

/* ═════════════════════════════════════════════════════════════
   DRAWER · Sistema reutilizável
   ═════════════════════════════════════════════════════════════ */
.drawer-root {
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
}
.drawer-root.is-open {
  pointer-events: auto;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 240ms ease;
}
.drawer-root.is-open .drawer-backdrop {
  opacity: 1;
}
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  transform: translateX(110%);
  transition: transform 240ms cubic-bezier(.32,.72,.0,1);
  width: 460px;
  max-width: 92vw;
}
.drawer--sm { width: 380px; }
.drawer--md { width: 460px; }
.drawer--lg { width: 640px; }
.drawer--full { width: 92vw; }
.drawer--left {
  left: 0; right: auto;
  transform: translateX(-110%);
  box-shadow: 8px 0 32px rgba(0,0,0,0.18);
}
.drawer--bottom {
  left: 0; right: 0; top: auto;
  height: 70vh;
  transform: translateY(110%);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
.drawer.is-open { transform: translateX(0) translateY(0); }

/* Depth offset: drawer com depth > 0 fica afastado pra mostrar contexto */
.drawer[data-depth="1"] { transform: translateX(0) translateY(0); }
.drawer[data-depth="2"] { transform: translateX(-50px) translateY(0); box-shadow: -4px 0 16px rgba(0,0,0,0.12); }
.drawer[data-depth="3"] { transform: translateX(-90px) translateY(0); box-shadow: -3px 0 12px rgba(0,0,0,0.10); }

.drawer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda, #e5e7eb);
  flex-shrink: 0;
}
.drawer__back, .drawer__close {
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl);
  cursor: pointer;
  color: var(--sub, #6b7280);
  border-radius: 6px;
  transition: all 120ms;
}
.drawer__back:hover, .drawer__close:hover {
  background: #f3f4f6;
  color: var(--text, #111827);
}
.drawer__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  color: var(--text, #111827);
}
.drawer__crumbs {
  position: absolute;
  bottom: -22px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--sub, #9ca3af);
}
.drawer__crumb.is-active { color: var(--text, #111827); font-weight: var(--fw-semibold); }
.drawer__sep { opacity: 0.5; }
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

/* Drawer content helpers */
.dr-section { margin-bottom: 18px; }
.dr-section:last-child { margin-bottom: 0; }
.dr-h {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dr-h small { font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; opacity: 0.75; }
.dr-id-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--borda, #f3f4f6);
  font-size: var(--ts-small);
}
.dr-id-row:last-child { border-bottom: 0; }
.dr-id-lbl {
  color: var(--sub, #6b7280);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-2xs);
}
.dr-id-val { color: var(--text, #111827); font-weight: var(--fw-medium); word-break: break-word; }
.dr-id-val.mono { font-family: var(--font-mono); }
.dr-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.dr-kpi {
  background: #f9fafb;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--accent, #16a34a);
}
.dr-kpi__lbl {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
}
.dr-kpi__val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text, #111827);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  line-height: 1.1;
  margin-top: 2px;
}
.dr-top-list {
  list-style: none; padding: 0; margin: 0;
}
.dr-top-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 5px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 120ms;
}
.dr-top-item:hover { background: #f3f4f6; }
.dr-top-item__name { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.dr-top-item__val  {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--accent, #16a34a);
  font-variant-numeric: tabular-nums;
}
.dr-tab-wrap { overflow-x: auto; }
.dr-ultimos-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.dr-ultimos-tab th, .dr-ultimos-tab td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--borda, #f3f4f6);
}
.dr-ultimos-tab th {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
  background: #f9fafb;
}
.dr-ultimos-tab td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dr-ultimos-tab td.mono { font-family: var(--font-mono); }
.dr-empty {
  padding: 16px;
  text-align: center;
  color: var(--sub, #6b7280);
  font-size: var(--fs-sm);
  background: #f9fafb;
  border-radius: 6px;
}

@media (max-width: 720px) {
  .drawer { width: 100vw; max-width: 100vw; }
  .drawer[data-depth="2"], .drawer[data-depth="3"] { transform: translateX(0); }
}

/* ═════════════════════════════════════════════════════════════
   v0.9.1 — Saldo unificado + tabela scroll + bar full-width
   ═════════════════════════════════════════════════════════════ */

/* Bar chart: forçar SVG ocupar 100% da largura sem max-width */
.diesel .painel--bar-full .chart-card__body {
  display: block !important;
  text-align: initial !important;
}
.diesel .bar-v2-wrap {
  width: 100%;
  padding: 8px 12px 4px;
}
.diesel .bar-v2 {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block;
}

/* ── SALDO unificado · 2 colunas side-by-side ─────────────── */
.diesel .painel--saldo-unificado {
  margin-bottom: 18px;
}
.diesel .saldo-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 6px 4px 4px;
}
@media (max-width: 720px) {
  .diesel .saldo-cols { grid-template-columns: 1fr; }
}
.diesel .saldo-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diesel .saldo-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: 2px solid var(--borda, #e5e7eb);
  margin-bottom: 4px;
}
.diesel .saldo-col--pos .saldo-col__head { border-bottom-color: #16a34a; }
.diesel .saldo-col--neg .saldo-col__head { border-bottom-color: #dc2626; }
.diesel .saldo-col__ico {
  font-size: var(--fs-md);
}
.diesel .saldo-col__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text, #111827);
  flex: 1;
}
.diesel .saldo-col__count {
  font-size: var(--fs-2xs);
  color: var(--sub, #6b7280);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diesel .saldo-col__empty {
  padding: 18px;
  background: #f9fafb;
  text-align: center;
  color: var(--sub, #6b7280);
  font-size: var(--fs-sm);
  border-radius: 6px;
  border: 1px dashed var(--borda, #e5e7eb);
}

.diesel .saldo-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 140ms ease;
  border-left: 4px solid;
}
.diesel .saldo-card:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.diesel .saldo-card--pos {
  background: rgba(22,163,74,0.04);
  border-left-color: #16a34a;
}
.diesel .saldo-card--neg {
  background: rgba(220,38,38,0.04);
  border-left-color: #dc2626;
}

.diesel .saldo-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.diesel .saldo-card__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.diesel .saldo-card__val {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.diesel .saldo-card--pos .saldo-card__val { color: #15803d; }
.diesel .saldo-card--neg .saldo-card__val { color: #b91c1c; }

.diesel .saldo-card__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diesel .saldo-card__kml {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}
.diesel .saldo-card__realiz { color: var(--text, #111827); }
.diesel .saldo-card--pos .saldo-card__realiz { color: #15803d; }
.diesel .saldo-card--neg .saldo-card__realiz { color: #b91c1c; }
.diesel .saldo-card__vs {
  color: var(--sub, #9ca3af);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}
.diesel .saldo-card__meta { color: var(--sub, #6b7280); }
.diesel .saldo-card__unit {
  font-size: var(--fs-2xs);
  color: var(--sub, #9ca3af);
  margin-left: 2px;
}
.diesel .saldo-card__gap {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: 3px;
  color: #fff;
  letter-spacing: 0.3px;
}
.diesel .saldo-card--pos .saldo-card__gap { background: #16a34a; }
.diesel .saldo-card--neg .saldo-card__gap { background: #dc2626; }

.diesel .saldo-card__bar {
  height: 4px;
  background: rgba(0,0,0,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.diesel .saldo-card__bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 600ms ease-out;
}
.diesel .saldo-card--pos .saldo-card__bar > span {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.diesel .saldo-card--neg .saldo-card__bar > span {
  background: linear-gradient(90deg, #dc2626, #f87171);
}
.diesel .saldo-card__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  font-variant-numeric: tabular-nums;
}
.diesel .saldo-card__foot .sep { opacity: 0.5; }

/* ── TABELA Detalhamento por motorista · placa: scroll + cores ── */
.diesel .diesel-tabela--scroll {
  max-height: 540px;
  overflow-y: auto;
  border: 1px solid var(--borda, #e5e7eb);
  border-radius: 8px;
  position: relative;
  background: #fff;
}
.diesel .diesel-tabela--scroll table { margin: 0; }
.diesel .diesel-tabela--scroll thead {
  position: sticky;
  top: 0;
  background: #f9fafb;
  z-index: 5;
  box-shadow: 0 1px 0 var(--borda, #e5e7eb);
}
.diesel .diesel-tabela--scroll thead th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sub, #6b7280);
  padding: 10px 8px;
}

/* Cores por desempenho (% atingimento) */
.diesel .row-motor--top { background: rgba(22,163,74,0.10); }
.diesel .row-motor--top:hover { background: rgba(22,163,74,0.16); }
.diesel .row-motor--top td.diesel-tab__nome { border-left: 3px solid #16a34a; }

.diesel .row-motor--ok  { background: rgba(132,204,22,0.07); }
.diesel .row-motor--ok:hover  { background: rgba(132,204,22,0.13); }
.diesel .row-motor--ok td.diesel-tab__nome { border-left: 3px solid #84cc16; }

.diesel .row-motor--warn { background: rgba(245,158,11,0.07); }
.diesel .row-motor--warn:hover { background: rgba(245,158,11,0.13); }
.diesel .row-motor--warn td.diesel-tab__nome { border-left: 3px solid #f59e0b; }

.diesel .row-motor--bad { background: rgba(220,38,38,0.07); }
.diesel .row-motor--bad:hover { background: rgba(220,38,38,0.13); }
.diesel .row-motor--bad td.diesel-tab__nome { border-left: 3px solid #dc2626; }

.diesel .row-motor td {
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background 120ms;
}

/* Row-tipo (header de tipo) destacado */
.diesel .row-tipo {
  background: #f3f4f6 !important;
  position: sticky;
  top: 38px;  /* abaixo do thead */
  z-index: 3;
}
.diesel .row-tipo td {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text, #111827);
  padding: 8px 10px;
  border-top: 2px solid var(--borda, #e5e7eb);
}

/* Row-placa sub-linha (quando expandido) */
.diesel .row-placa {
  background: rgba(0,0,0,0.015);
}
.diesel .row-placa td {
  padding-left: 24px;
  font-size: var(--fs-sm);
  color: var(--sub, #6b7280);
}
.diesel .row-placa td.diesel-tab__nome {
  font-family: var(--font-mono);
}

/* Scrollbar customizada */
.diesel .diesel-tabela--scroll::-webkit-scrollbar { width: 10px; }
.diesel .diesel-tabela--scroll::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 0 8px 8px 0; }
.diesel .diesel-tabela--scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 5px; border: 2px solid #f3f4f6; }
.diesel .diesel-tabela--scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ═════════════════════════════════════════════════════════════
   v0.9.4 — Redesign Tabela "Sequência da placa" no drawer
   ═════════════════════════════════════════════════════════════ */

/* Wrapper com overflow controlado e borda */
.diesel .dist-seq-wrap {
  border: 1px solid var(--borda, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Tabela base */
.diesel .diesel-tab--seq {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

/* Header */
.diesel .diesel-tab--seq thead th {
  background: #f9fafb;
  padding: 11px 12px;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub, #6b7280);
  border-bottom: 1px solid var(--borda, #e5e7eb);
  white-space: nowrap;
}
.diesel .diesel-tab--seq thead th.num,
.diesel .diesel-tab--seq thead th.th-status { text-align: right; }
.diesel .diesel-tab--seq thead th.th-status { text-align: center; }

/* Body cells - reset agressivo do legacy */
.diesel .diesel-tab--seq tbody td {
  padding: 12px 12px !important;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: var(--fs-base);
  color: var(--text, #111827);
}
.diesel .diesel-tab--seq tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-ui);
}
.diesel .diesel-tab--seq tbody tr:last-child td { border-bottom: 0; }
.diesel .diesel-tab--seq tbody tr:hover td { background: rgba(0,0,0,0.018); }

/* Data: monospace + hora sub */
.diesel .cel-data {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text, #111827);
  white-space: nowrap;
}
.diesel .cel-data small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--sub, #9ca3af);
  letter-spacing: 0.05em;
  margin-top: 1px;
}
.diesel .cel-num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--sub, #6b7280);
}

/* Hodômetro: destaque numérico tabular */
.diesel .cel-hodo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  color: var(--text, #111827);
}
.diesel .cel-hodo b { font-weight: var(--fw-bold); }

/* Δ km: badge colorido */
.diesel .diesel-tab--seq td.num.is-neg {
  color: #b91c1c;
  font-weight: var(--fw-semibold);
}
.diesel .diesel-tab--seq td.num.is-zero {
  color: #b45309;
  font-weight: var(--fw-semibold);
}
.diesel .diesel-tab--seq tbody td.num:nth-child(5):not(.is-neg):not(.is-zero) {
  /* Δ km positivo normal */
  color: var(--text, #111827);
}

/* R$/L destacado quando baixo */
.diesel .cel-rlit {
  font-weight: var(--fw-medium);
}
.diesel .cel-rlit.is-rlit-baixo {
  color: #b91c1c;
  font-weight: var(--fw-bold);
  background: rgba(220,38,38,0.06);
  border-radius: 4px;
  padding: 4px 8px !important;
  position: relative;
}
.diesel .cel-rlit.is-rlit-baixo::after {
  content: '⚠';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translate(50%, -50%);
  background: #b91c1c;
  color: #fff;
  width: 14px; height: 14px;
  border-radius: 50%;
  font-size: var(--fs-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
}

/* Posto: nome em uma linha, município sub */
.diesel .cel-posto {
  min-width: 200px;
  max-width: 280px;
}
.diesel .cel-posto__nome {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--text, #111827);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diesel .cel-posto__mun {
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Motorista: title case clean */
.diesel .diesel-tab--seq td.diesel-tab__nome {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--text, #111827);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status: pills sólidas */
.diesel .cel-status {
  text-align: center;
  min-width: 80px;
}
.diesel .dist-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diesel .dist-pill--ok {
  background: rgba(22,163,74,0.12);
  color: #15803d;
}
.diesel .dist-pill--crit {
  background: rgba(220,38,38,0.15);
  color: #b91c1c;
}
.diesel .dist-pill--warn {
  background: rgba(245,158,11,0.18);
  color: #b45309;
}
.diesel .dist-pill--alert {
  background: rgba(209, 169, 80,.22);
  color: #92400e;
}

/* Linha atual (a distorção em análise) — destaque dourado forte */
.diesel .diesel-tab--seq tbody tr.is-atual {
  background: linear-gradient(90deg, rgba(209, 169, 80,.18) 0%, rgba(209, 169, 80,.10) 100%) !important;
  position: relative;
  box-shadow: inset 4px 0 0 #b8860b;
}
.diesel .diesel-tab--seq tbody tr.is-atual td {
  border-bottom-color: rgba(184,134,11,0.2);
}
.diesel .diesel-tab--seq tbody tr.is-atual:hover td {
  background: rgba(209, 169, 80,.10) !important;
}
.diesel .diesel-tab--seq tbody tr.is-atual td:first-child {
  position: relative;
}

/* Outras linhas com distorção: tint sutil + borda lateral */
.diesel .diesel-tab--seq tbody tr.is-distorcao {
  background: rgba(220,38,38,.035);
  box-shadow: inset 3px 0 0 rgba(220,38,38,.45);
}
.diesel .diesel-tab--seq tbody tr.is-distorcao:hover td {
  background: rgba(220,38,38,.06) !important;
}

/* Banner do hint */
.diesel .dist-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(209, 169, 80,.10), rgba(209, 169, 80,.04));
  border-left: 3px solid #b8860b;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: var(--fs-base);
  color: var(--text, #111827);
  line-height: 1.45;
}
.diesel .dist-banner__ico {
  font-size: var(--fs-lg);
  flex-shrink: 0;
}
.diesel .dist-banner b { color: #92400e; }

/* ═════════════════════════════════════════════════════════════
   v0.10.0 — Sugestão de hodômetro (Regra 3 Tamara · haversine)
   ═════════════════════════════════════════════════════════════ */

/* Skeleton de loading */
.diesel .dist-sug-skel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  color: var(--sub, #6b7280);
}
.diesel .dist-sug-skel__spinner {
  width: 32px; height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #b8860b;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

/* Banner Haversine (variante do dist-banner) */
.diesel .dist-banner--haversine {
  background: linear-gradient(90deg, rgba(220,38,38,.12), rgba(220,38,38,.04));
  border-left-color: #b91c1c;
}
.diesel .dist-banner--haversine b { color: #7f1d1d; }

/* Sections do drawer */
.diesel .dist-sug-section {
  margin: 18px 0;
}
.diesel .dist-sug-h {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.diesel .dist-sug-h small {
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.78;
}

/* Postos envolvidos: cards horizontais com seta entre */
.diesel .dist-sug-postos {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.diesel .dist-sug-posto {
  flex: 1;
  min-width: 220px;
  display: grid;
  grid-template-columns: 6px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  position: relative;
}
.diesel .dist-sug-posto.is-atual {
  background: rgba(209, 169, 80,.12);
  border-color: rgba(184,134,11,.45);
  box-shadow: 0 0 0 1px rgba(184,134,11,.2);
}
.diesel .dist-sug-posto__bandeira {
  background: #94a3b8;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  min-height: 32px;
}
.diesel .dist-sug-posto.is-atual .dist-sug-posto__bandeira { background: #b8860b; }
.diesel .dist-sug-posto__nome {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--text, #111827);
  line-height: 1.3;
}
.diesel .dist-sug-posto__mun {
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.diesel .dist-sug-posto__litros {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text, #111827);
}
.diesel .dist-sug-posto__tag {
  position: absolute;
  top: -8px;
  right: 10px;
  background: #b8860b;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 9px;
}
.diesel .dist-sug-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--sub, #9ca3af);
  padding: 0 4px;
}

/* KPIs da sugestão */
.diesel .dist-sug-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 820px) {
  .diesel .dist-sug-kpis { grid-template-columns: repeat(2, 1fr); }
}
.diesel .dist-sug-kpi {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
}
.diesel .dist-sug-kpi--accent {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.02));
  border-color: rgba(245,158,11,.35);
}
.diesel .dist-sug-kpi--sugestao.is-valida {
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(22,163,74,.02));
  border-color: rgba(22,163,74,.4);
}
.diesel .dist-sug-kpi--sugestao.is-invalida,
.diesel .dist-sug-kpi--sugestao.is-sem-dist {
  background: linear-gradient(135deg, rgba(220,38,38,.10), rgba(220,38,38,.02));
  border-color: rgba(220,38,38,.4);
}
.diesel .dist-sug-kpi__lbl {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
}
.diesel .dist-sug-kpi__val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  color: var(--text, #111827);
  line-height: 1.1;
  margin-top: 4px;
}
.diesel .dist-sug-kpi__sub {
  font-size: var(--fs-xs);
  color: var(--sub, #6b7280);
  margin-top: 2px;
}
.diesel .dist-sug-kpi--sugestao.is-valida   .dist-sug-kpi__val { color: #15803d; }
.diesel .dist-sug-kpi--sugestao.is-invalida .dist-sug-kpi__val,
.diesel .dist-sug-kpi--sugestao.is-sem-dist .dist-sug-kpi__val { color: #b91c1c; }

/* Motivo */
.diesel .dist-sug-motivo {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 12px 0 20px;
}
.diesel .dist-sug-motivo--ok {
  background: rgba(22,163,74,.08);
  color: #14532d;
  border-left: 3px solid #16a34a;
}
.diesel .dist-sug-motivo--warn {
  background: rgba(220,38,38,.06);
  color: #7f1d1d;
  border-left: 3px solid #dc2626;
}

/* Comparativo */
.diesel .dist-sug-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px 16px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px dashed #d1d5db;
}
.diesel .dist-sug-compare__item {
  text-align: center;
  flex: 0 0 auto;
}
.diesel .dist-sug-compare__lbl {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub, #6b7280);
  font-weight: var(--fw-bold);
}
.diesel .dist-sug-compare__val {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 4px;
}
.diesel .dist-sug-compare__val--ruim { color: #b91c1c; text-decoration: line-through; opacity: 0.85; }
.diesel .dist-sug-compare__val--bom  { color: #15803d; }
.diesel .dist-sug-compare__delta {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--sub, #6b7280);
  margin-top: 4px;
}
.diesel .dist-sug-compare__arrow {
  font-size: var(--fs-3xl);
  color: #b8860b;
  font-weight: var(--fw-bold);
}
.diesel .dist-sug-input {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  text-align: center;
  width: 160px;
  padding: 4px 8px;
  border: 2px solid #b8860b;
  border-radius: 6px;
  color: #15803d;
  background: #fff;
}

/* Botões de ação */
.diesel .dist-sug-acoes,
.diesel .dist-sug-edit-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.diesel .btn-sug {
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all 140ms ease;
  letter-spacing: 0.02em;
}
.diesel .btn-sug:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.diesel .btn-sug--apply {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
}
.diesel .btn-sug--apply:hover:not(:disabled) {
  background: #15803d;
  box-shadow: 0 2px 8px rgba(22,163,74,.35);
}
.diesel .btn-sug--edit {
  background: #fff;
  color: #b8860b;
  border-color: #b8860b;
}
.diesel .btn-sug--edit:hover { background: #fef3c7; }
.diesel .btn-sug--reject {
  background: #fff;
  color: #b91c1c;
  border-color: #fca5a5;
}
.diesel .btn-sug--reject:hover { background: #fee2e2; }
.diesel .btn-sug--save {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
}
.diesel .btn-sug--save:hover { background: #15803d; }
.diesel .btn-sug--cancel {
  background: #fff;
  color: var(--sub, #6b7280);
  border-color: #d1d5db;
}
.diesel .btn-sug--cancel:hover { background: #f3f4f6; }

/* Feedback pós-save */
.diesel .dist-sug-feedback {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.diesel .dist-sug-feedback--ok {
  background: rgba(22,163,74,.10);
  color: #14532d;
  border-left: 4px solid #16a34a;
}
.diesel .dist-sug-feedback b { color: #15803d; }

/* ══════════════════════════════════════════════════════════════
   3ª AUDITORIA · v0.12.0 (Tamara · 14/05/2026)
   ────────────────────────────────────────────────────────────── 
   1. Topbar do módulo (chip de filtro de período sempre visível)
   2. Chip + dropdown (.dchip*)
   3. Badge dupla (regra D: dois motoristas no mesmo ciclo)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Topbar do módulo ──────────────────────────────────────── */
.diesel-topbar {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--borda);
  padding: 10px 0;
  margin-bottom: 16px;
}
.diesel-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px;
}
.diesel-topbar__hint {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.diesel-topbar__chip { position: relative; }

/* ── 2. Chip + dropdown ───────────────────────────────────────── */
.dchip { position: relative; display: inline-block; }
.dchip__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 999px;
  font: 500 13px/1 inherit;
  color: var(--txt);
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.dchip__btn:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.dchip.is-open .dchip__btn {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dchip__ico { font-size: var(--fs-md); line-height: 1; }
.dchip__label {
  font-weight: var(--fw-semibold);
  color: var(--primary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dchip__caret {
  font-size: var(--fs-2xs);
  color: var(--sub);
  margin-left: 2px;
  transition: transform .15s ease;
}
.dchip.is-open .dchip__caret { transform: rotate(180deg); }

.dchip__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 320px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  padding: 14px;
  animation: dchip-pop-in .15s ease-out;
}
@keyframes dchip-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dchip__pop-titulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.dchip__presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dchip__preset {
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  font: 500 12px/1.2 inherit;
  color: var(--txt);
  cursor: pointer;
  text-align: left;
  transition: all .12s ease;
}
.dchip__preset:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.dchip__preset.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--primary);
  font-weight: var(--fw-semibold);
}
.dchip__sep {
  height: 1px;
  background: var(--borda-soft);
  margin: 12px -14px;
}
.dchip__custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dchip__custom label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--sub);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dchip__custom input[type="date"] {
  padding: 7px 8px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font: 13px inherit;
  color: var(--txt);
  background: var(--card);
}
.dchip__custom input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dchip__acoes {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.dchip__limpar,
.dchip__aplicar {
  padding: 8px 14px;
  border-radius: 6px;
  font: 600 12px/1 inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .12s ease;
}
.dchip__limpar {
  background: transparent;
  color: var(--sub);
  border-color: var(--borda);
}
.dchip__limpar:hover {
  background: var(--bg-soft);
  color: var(--txt);
}
.dchip__aplicar {
  background: var(--primary);
  color: #fff;
}
.dchip__aplicar:hover { background: var(--primary-dark); }
.dchip__nota {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--borda-soft);
  font-size: var(--fs-xs);
  color: var(--sub);
  line-height: 1.45;
}

/* ── 3. Badge dupla de motoristas (regra D) ───────────────────── */
.diesel .badge-dupla {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gold-dark);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 4px;
  vertical-align: middle;
  cursor: help;
}

/* ══════════════════════════════════════════════════════════════
   POSITIVAÇÃO DE MÉDIA · v0.13.0 (Tamara · 14/05/2026)
   ──────────────────────────────────────────────────────────────
   Estudo dinâmico de positivação com 5 blocos:
   ① Banner com gauge   ② 4 cards diagnóstico   ③ Histograma com bandas
   ④ Calibrador de meta (slider)   ⑤ Plano top-N
   Memória de cálculo inline em todos os blocos (padrão Dimensionamento).
   ══════════════════════════════════════════════════════════════ */

/* Tokens locais — bandas semânticas (paleta semafórica) */
.diesel {
  --banda-crit:  #dc2626;
  --banda-warn:  #ea580c;
  --banda-ok:    #10b981;
  --banda-star:  #047857;
  --banda-crit-soft: rgba(220, 38, 38, .08);
  --banda-warn-soft: rgba(234, 88, 12, .08);
  --banda-ok-soft:   rgba(16, 185, 129, .08);
  --banda-star-soft: rgba(4, 120, 87, .10);
}

/* Container raiz */
.pmd { display: flex; flex-direction: column; gap: 18px; padding: 0 24px 24px; }

/* Skeletons */
.pmd-skel {
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--borda-soft) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%;
  animation: pmd-shimmer 1.4s ease-in-out infinite;
  border-radius: 12px;
  height: 80px;
}
.pmd--loading .pmd-hero    { height: 100px; }
.pmd--loading .pmd-banner  { height: 160px; }
.pmd--loading .pmd-cards   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pmd--loading .pmd-cards .pmd-card { height: 110px; }
.pmd--loading .pmd-distrib { height: 360px; }
.pmd--loading .pmd-calib   { height: 380px; }
@keyframes pmd-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── HERO ─────────────────────────────────────────────────── */
.pmd-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-radius: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pmd-hero h1 {
  margin: 0 0 6px;
  font: 700 22px/1.2 inherit;
  color: #fff;
  letter-spacing: -0.01em;
}
.pmd-hero__sub {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  max-width: 600px;
}

/* Toggle de granularidade */
.pmd-toggle {
  display: inline-flex;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.pmd-toggle button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  font: 600 12px/1 inherit;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.pmd-toggle button:hover { color: #fff; background: rgba(255,255,255,.08); }
.pmd-toggle button.is-active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ── HEADER DE SECTION (padrão das seções) ───────────────── */
.pmd-section__head { margin-bottom: 14px; }
.pmd-section__head h2 {
  margin: 0 0 4px;
  font: 700 16px/1.3 inherit;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.pmd-section__head p.muted { margin: 0; font-size: var(--fs-base); color: var(--sub); line-height: 1.5; }

/* ── ① BANNER + GAUGE ────────────────────────────────────── */
.pmd-banner {
  display: flex;
  gap: 28px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 22px 28px;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pmd-banner__gauge { flex: 0 0 200px; }
.pmd-banner__txt   { flex: 1; min-width: 0; }
.pmd-banner__pct {
  font: 800 56px/1 inherit;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.pmd-banner__legenda {
  margin-top: 4px;
  font-size: var(--fs-lg);
  color: var(--txt);
  font-weight: var(--fw-medium);
}
.pmd-banner__legenda b { color: var(--accent-dark); font-weight: var(--fw-bold); }
.pmd-banner__sub {
  margin-top: 8px;
  font-size: var(--fs-base);
  color: var(--sub);
  line-height: 1.5;
}
.pmd-banner__sub b { color: var(--txt); font-weight: var(--fw-semibold); }

.pmd-gauge { display: block; }

/* ── ② 4 CARDS DE DIAGNÓSTICO ────────────────────────────── */
.pmd-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pmd-card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.pmd-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.pmd-card--media::before   { background: var(--primary); }
.pmd-card--mediana::before { background: #6366f1; }
.pmd-card--top::before     { background: var(--banda-star); }
.pmd-card--bot::before     { background: var(--banda-crit); }
.pmd-card__lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pmd-card__big {
  margin-top: 8px;
  font: 700 30px/1 inherit;
  color: var(--txt);
  letter-spacing: -0.02em;
}
.pmd-card__sub {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--sub);
  line-height: 1.4;
}

/* ── SEÇÕES COMUNS (distrib/calib/plano) ─────────────────── */
.pmd-distrib,
.pmd-calib,
.pmd-plano {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ── ③ DISTRIBUIÇÃO ──────────────────────────────────────── */
.pmd-bandas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.pmd-banda {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.pmd-banda .dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  grid-row: span 2;
}
.pmd-banda .cnt {
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.pmd-banda--crit { background: var(--banda-crit-soft); border-color: var(--banda-crit); color: var(--banda-crit); }
.pmd-banda--crit .dot { background: var(--banda-crit); }
.pmd-banda--warn { background: var(--banda-warn-soft); border-color: var(--banda-warn); color: var(--banda-warn); }
.pmd-banda--warn .dot { background: var(--banda-warn); }
.pmd-banda--ok   { background: var(--banda-ok-soft);   border-color: var(--banda-ok);   color: var(--banda-ok); }
.pmd-banda--ok .dot   { background: var(--banda-ok); }
.pmd-banda--star { background: var(--banda-star-soft); border-color: var(--banda-star); color: var(--banda-star); }
.pmd-banda--star .dot { background: var(--banda-star); }

/* Sliders de banda */
.pmd-controles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 10px;
  margin-bottom: 16px;
}
.pmd-ctl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.pmd-ctl__lbl { font-size: var(--fs-sm); color: var(--sub); font-weight: var(--fw-medium); }
.pmd-ctl__lbl b { color: var(--txt); font-weight: var(--fw-bold); }
.pmd-ctl__val {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--primary);
  min-width: 38px;
  text-align: right;
  font-size: var(--fs-base);
}

/* Slider style — webkit + moz */
input[type="range"].pmd-input,
.pmd-ctl input[type="range"],
.pmd-slider-meta input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 24px;
  cursor: pointer;
}
.pmd-ctl input[type="range"]::-webkit-slider-runnable-track,
.pmd-slider-meta input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--pmd-fill, 50%), var(--borda) var(--pmd-fill, 50%), var(--borda) 100%);
  border-radius: 999px;
}
.pmd-ctl input[type="range"]::-moz-range-track,
.pmd-slider-meta input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--borda);
  border-radius: 999px;
}
.pmd-ctl input[type="range"]::-moz-range-progress,
.pmd-slider-meta input[type="range"]::-moz-range-progress {
  height: 6px;
  background: var(--accent);
  border-radius: 999px;
}
.pmd-ctl input[type="range"]::-webkit-slider-thumb,
.pmd-slider-meta input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .12s ease;
}
.pmd-ctl input[type="range"]::-webkit-slider-thumb:hover,
.pmd-slider-meta input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.pmd-ctl input[type="range"]::-moz-range-thumb,
.pmd-slider-meta input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Histograma */
.pmd-histo { margin: 14px 0; }
.pmd-histo__svg .pmd-bar:hover { opacity: .8; cursor: help; }

/* ── ④ CALIBRADOR ────────────────────────────────────────── */
.pmd-slider-meta {
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--card) 100%);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.pmd-slider-cabec {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.pmd-slider-lbl {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pmd-slider-val {
  font: 700 26px/1 inherit;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pmd-slider-meta input[type="range"] { width: 100%; }

/* Botões-âncora */
.pmd-anchors {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pmd-anchors button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 999px;
  font: 500 12px/1 inherit;
  color: var(--txt);
  cursor: pointer;
  transition: all .12s ease;
}
.pmd-anchors button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pmd-anchors .anch-val {
  font-weight: var(--fw-bold);
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

/* Cards de cenário */
.pmd-cenarios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.pmd-cenario {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px 18px;
}
.pmd-cenario--atual { background: var(--bg-soft); }
.pmd-cenario--sim   { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pmd-cenario__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.pmd-cenario__head h3 {
  margin: 0;
  font: 600 14px/1 inherit;
  color: var(--primary);
}
.pmd-cenario__badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--borda);
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.pmd-cenario--sim .pmd-cenario__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pmd-cenario__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--borda-soft);
}
.pmd-cenario__row:last-child { border-bottom: 0; }
.pmd-cenario__row .lbl { font-size: var(--fs-base); color: var(--sub); }
.pmd-cenario__row .val { font: 600 14px/1 inherit; font-variant-numeric: tabular-nums; color: var(--txt); }
.pmd-cenario__row .delta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.delta--pos { color: var(--ok); background: var(--ok-soft); }
.delta--neg { color: var(--crit); background: var(--crit-soft); }

/* Mudança de bônus */
.pmd-mudanca { margin-bottom: 16px; }
.pmd-mudanca h4 {
  margin: 0 0 10px;
  font: 600 13px/1 inherit;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pmd-mudanca__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pmd-mudanca__bloco {
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid;
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.pmd-mudanca__bloco strong { display: block; margin-bottom: 6px; font-size: var(--fs-base); }
.pmd-mudanca__bloco--sai   { border-left-color: var(--crit); }
.pmd-mudanca__bloco--sai strong { color: var(--crit); }
.pmd-mudanca__bloco--entra { border-left-color: var(--ok); }
.pmd-mudanca__bloco--entra strong { color: var(--ok); }
.chip-mot {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--txt);
}
.chip-more {
  display: inline-block;
  padding: 2px 8px;
  background: var(--sub);
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* Orientação automática */
.pmd-orient {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 4px solid;
  font-size: var(--fs-base);
  line-height: 1.55;
}
.pmd-orient__ico { font-size: var(--fs-2xl); flex-shrink: 0; }
.pmd-orient--crit { background: var(--crit-soft); border-left-color: var(--crit); color: #7f1d1d; }
.pmd-orient--warn { background: var(--warn-soft); border-left-color: var(--warn); color: #78350f; }
.pmd-orient--info { background: var(--info-soft); border-left-color: var(--info); color: var(--info); }
.pmd-orient--ok   { background: var(--ok-soft);   border-left-color: var(--ok);   color: #14532d; }
.pmd-orient__txt b { font-weight: var(--fw-bold); }

/* ── ⑤ PLANO ─────────────────────────────────────────────── */
.pmd-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.pmd-tabela thead th {
  background: var(--bg-soft);
  color: var(--sub);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
}
.pmd-tabela thead th.num { text-align: right; }
.pmd-tabela tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--borda-soft);
  vertical-align: middle;
}
.pmd-tabela tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pmd-tabela tbody tr:hover { background: var(--bg-soft); }
.pos-crit { color: var(--banda-crit); font-weight: var(--fw-bold); }
.pos-warn { color: var(--banda-warn); font-weight: var(--fw-bold); }
.pos-ok   { color: var(--banda-star); font-weight: var(--fw-bold); }

/* Badges de ação */
.acao {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: help;
}
.acao--treino  { background: rgba(220, 38, 38, .10);  color: #991b1b; border: 1px solid rgba(220,38,38,.2); }
.acao--rota    { background: rgba(234, 88, 12, .10);  color: #9a3412; border: 1px solid rgba(234,88,12,.2); }
.acao--equip   { background: rgba(217, 119, 6, .10);  color: #92400e; border: 1px solid rgba(217,119,6,.2); }
.acao--manut   { background: rgba(99, 102, 241, .10); color: #3730a3; border: 1px solid rgba(99,102,241,.2); }
.acao--ok      { background: var(--ok-soft);          color: #14532d; border: 1px solid var(--ok); }
.acao--amostra { background: var(--bg-soft);          color: var(--sub); border: 1px solid var(--borda); }

/* ── MEMÓRIA DE CÁLCULO (toggle inline) ──────────────────── */
.pmd-mem {
  margin-top: 14px;
  border-top: 1px dashed var(--borda-soft);
  padding-top: 10px;
}
.pmd-mem__btn {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font: 500 12px/1 inherit;
  color: var(--accent-dark);
  cursor: pointer;
  border-radius: 4px;
  transition: background .12s ease;
}
.pmd-mem__btn:hover { background: var(--accent-soft); }
.pmd-mem__box {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--txt);
}
.pmd-mem__linha { margin: 4px 0; }
.pmd-mem__linha b { color: var(--primary); font-weight: var(--fw-bold); }
.pmd-mem__linha code {
  display: inline-block;
  padding: 1px 6px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 4px;
  font: 11px monospace;
  color: #374151;
}
.pmd-mem__nota {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda-soft);
  color: var(--sub);
  font-size: var(--fs-sm);
}

/* ── CTA TEASER PRA POSITIVAÇÃO NA GESTÃO DE MÉDIAS ──────── */
.painel--positivacao-teaser .painel__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font: 600 13px/1 inherit;
  white-space: nowrap;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(5, 171, 52, .25);
}
.btn-cta:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(5, 171, 52, .35);
}

/* Responsivo mobile (< 768px) */
@media (max-width: 768px) {
  .pmd { padding: 0 12px 16px; }
  .pmd-banner { flex-direction: column; text-align: center; }
  .pmd-banner__gauge { margin: 0 auto; }
  .pmd-cards { grid-template-columns: repeat(2, 1fr); }
  .pmd-bandas { grid-template-columns: 1fr 1fr; }
  .pmd-controles { grid-template-columns: 1fr; }
  .pmd-cenarios { grid-template-columns: 1fr; }
  .pmd-mudanca__lista { grid-template-columns: 1fr; }
  .pmd-hero { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   POSITIVAÇÃO · v0.13.1 — 7 fixes pós-deploy
   ────────────────────────────────────────────────────────────── */

/* ── HERO: sem o toggle, fica só título + sub ──────────────── */
.pmd-hero {
  /* override: hero agora é justify-start (toggle saiu pra toolbar) */
  justify-content: flex-start;
}

/* ── TOOLBAR STICKY — abriga o toggle de granularidade ─────── */
.pmd-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin: -4px 0 4px;
}
.pmd-toolbar__lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-left: 6px;
  flex-shrink: 0;
}

/* Toggle dentro da toolbar: tema claro (antes era em fundo verde do hero) */
.pmd-toolbar .pmd-toggle {
  background: var(--bg-soft);
  padding: 3px;
}
.pmd-toolbar .pmd-toggle button {
  color: var(--sub);
  padding: 7px 14px;
  font-size: var(--fs-sm);
}
.pmd-toolbar .pmd-toggle button:hover {
  color: var(--txt);
  background: rgba(0,0,0,.04);
}
.pmd-toolbar .pmd-toggle button.is-active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* Quando a toolbar gruda no topo, sombra mais forte indica "presa" */
.pmd-toolbar.is-stuck { box-shadow: 0 4px 14px rgba(0,0,0,.10); }

/* ── BANNER · linha alternativa (positivação simulada) ─────── */
.pmd-banner__alt {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--txt);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pmd-banner__alt-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.pmd-banner__alt b { color: var(--accent-dark); font-weight: var(--fw-bold); }
.pmd-banner__alt .muted { color: var(--sub); font-size: var(--fs-sm); }

/* ── CENÁRIO ATUAL · asterisco + nota ──────────────────────── */
.pmd-cenario__ast {
  color: var(--sub);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  cursor: help;
  margin-left: 2px;
}
.pmd-cenario__nota {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda-soft);
  font-size: var(--fs-xs);
  color: var(--sub);
  line-height: 1.5;
  font-style: italic;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * TELA · Real × ANP                                  · v0.1.0
 * Comparativo do preço pago (abastecimentos_diesel) contra a
 * referência ANP-R (vw_anp_diesel_mensal_uf). Prefixo dz-anp-*
 * — escopo isolado, não colide com outras telas do módulo.
 * Paleta segue o DS: var(--fb-primary, #1D3B3A) primary, var(--fb-accent, #05AB34) accent, #d1a950 gold.
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.diesel .dz-anp-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fb-primary, #1D3B3A);
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.diesel .dz-anp-hint {
  font-size: var(--fs-sm);
  color: var(--sub);
  margin: -4px 0 12px;
  line-height: 1.5;
}

/* ── Filtros ────────────────────────────────────────────── */
.diesel .dz-anp-filtros {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: #f7f8f8;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  margin-bottom: 14px;
}

.diesel .dz-anp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
}

.diesel .dz-anp-field > span {
  font-weight: var(--fw-semibold);
  color: #5a6f6e;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.diesel .dz-anp-field select {
  padding: 6px 8px;
  border: 1px solid #c8d0cf;
  border-radius: 4px;
  background: #fff;
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  color: var(--fb-primary, #1D3B3A);
  min-width: 180px;
}

.diesel .dz-anp-field select[multiple] {
  min-height: 96px;
}

/* ── KPIs ───────────────────────────────────────────────── */
.diesel .dz-anp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.diesel .dz-anp-kpi {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(29, 59, 58, 0.04);
}

.diesel .dz-anp-kpi__lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.diesel .dz-anp-kpi__val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--fb-primary, #1D3B3A);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.diesel .dz-anp-kpi__val.is-pos { color: #05AB34; }
.diesel .dz-anp-kpi__val.is-neg { color: #c0392b; }

/* ── Chart SVG ──────────────────────────────────────────── */
.diesel .dz-anp-chart-wrap {
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.diesel .dz-anp-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-ui);
}

/* ── Tabela ─────────────────────────────────────────────── */
.diesel .dz-anp-table-wrap {
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  overflow: auto;
  max-height: 480px;
}

.diesel .dz-anp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.diesel .dz-anp-tbl thead th {
  position: sticky;
  top: 0;
  background: #f0f3f3;
  text-align: right;
  padding: 8px 12px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a6f6e;
  border-bottom: 1px solid #d4dada;
  z-index: 1;
}

.diesel .dz-anp-tbl th:first-child,
.diesel .dz-anp-tbl th:nth-child(2),
.diesel .dz-anp-tbl td:first-child,
.diesel .dz-anp-tbl td:nth-child(2) {
  text-align: left;
}

.diesel .dz-anp-tbl td {
  padding: 7px 12px;
  text-align: right;
  border-bottom: 1px solid #f0f2f2;
  font-variant-numeric: tabular-nums;
  color: var(--fb-primary, #1D3B3A);
}

.diesel .dz-anp-tbl tbody tr:hover { background: #fafbfb; }
.diesel .dz-anp-tbl td.num.is-pos { color: #05AB34; font-weight: var(--fw-semibold); }
.diesel .dz-anp-tbl td.num.is-neg { color: #c0392b; font-weight: var(--fw-semibold); }

/* ── Empty state ────────────────────────────────────────── */
.diesel .dz-anp-empty {
  padding: 32px;
  text-align: center;
  color: var(--sub);
  font-size: var(--fs-base);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · subárea do módulo Diesel · v0.14.0 (17/05/2026)
   ──────────────────────────────────────────────────────────────
   Estilos da tela Operacional > Abastecimentos e da tela
   Gerencial > Gestão de Compras (3 subtabs: Geral/Interno/Externo).
   Prefixos:
     • .abast-*  → tela Operacional Abastecimentos
     • .cx-*     → telas/subtabs de Compras (compras-*)
     • .compras-placeholder-* → subtab Interno (em construção)
   Tudo escopado em `.diesel` pra continuar isolado do resto.
   ══════════════════════════════════════════════════════════════ */

/* ─── Toolbar da tela Abastecimentos ────────────────────────── */
.diesel .abast-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: #f7f8f8;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  margin-bottom: 14px;
}
.diesel .abast-toolbar__seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid #c8d0cf;
  border-radius: 999px;
  padding: 2px;
}
.diesel .abast-segbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font: 600 12px/1 var(--font-ui);
  color: var(--sub);
  cursor: pointer;
  transition: all .15s ease;
}
.diesel .abast-segbtn:hover { color: var(--primary); }
.diesel .abast-segbtn.is-active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(29, 59, 58, .25);
}
.diesel .abast-toolbar__sel,
.diesel .abast-toolbar__busca {
  padding: 7px 9px;
  border: 1px solid #c8d0cf;
  border-radius: 4px;
  background: #fff;
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  color: var(--primary);
}
.diesel .abast-toolbar__busca { min-width: 240px; flex: 1; }
.diesel .abast-toolbar__sel:focus,
.diesel .abast-toolbar__busca:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.diesel .abast-toolbar__hint {
  font-size: var(--fs-xs);
  color: var(--sub);
  margin-left: auto;
}

/* ─── Badge Interno/Externo (na tabela) ─────────────────────── */
.diesel .abast-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.diesel .abast-badge--int { background: rgba(29, 59, 58, .08); color: var(--primary); }
.diesel .abast-badge--ext { background: rgba(5, 171, 52, .12); color: #15803D; }

/* ─── Definition list do drawer da NF ───────────────────────── */
.diesel .abast-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: var(--fs-base);
}
.diesel .abast-dl dt {
  color: var(--sub);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-xs);
  align-self: center;
}
.diesel .abast-dl dd {
  margin: 0;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}

/* ─── Subtabs da Gestão de Compras ──────────────────────────── */
.diesel .cx-subtabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 16px;
  border-bottom: 2px solid var(--borda-soft);
}
.diesel .cx-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font: 600 13px/1 var(--font-ui);
  color: var(--sub);
  cursor: pointer;
  transition: all .15s ease;
}
.diesel .cx-subtab:hover { color: var(--primary); }
.diesel .cx-subtab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.diesel .cx-subtab__ico { font-size: var(--fs-md); }
.diesel .cx-subtab-host { min-height: 200px; }

/* ─── Filtros (Externo, com UF multi + produto + busca) ─────── */
.diesel .cx-filtros {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: #f7f8f8;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  margin-bottom: 14px;
}
.diesel .cx-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
}
.diesel .cx-field--grow { flex: 1; min-width: 180px; }
.diesel .cx-field > span {
  font-weight: var(--fw-semibold);
  color: #5a6f6e;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.diesel .cx-field select,
.diesel .cx-field input[type="search"] {
  padding: 7px 9px;
  border: 1px solid #c8d0cf;
  border-radius: 4px;
  background: #fff;
  font-size: var(--fs-base);
  color: var(--fb-primary, #1D3B3A);
  min-width: 180px;
  font-family: var(--font-ui);
}
.diesel .cx-field input[type="search"]:focus,
.diesel .cx-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.diesel .cx-field select[multiple] { min-height: 96px; }
.diesel .cx-filtros__hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--sub);
  align-self: center;
  max-width: 240px;
  line-height: 1.4;
}
.diesel .cx-warn { color: #b45309; font-weight: var(--fw-semibold); }

/* ─── KPIs Compras (5 cards · diff card destacado em gold) ──── */
.diesel .cx-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.diesel .cx-kpi {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(29, 59, 58, .04);
}
.diesel .cx-kpi__lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.diesel .cx-kpi__val {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.diesel .cx-kpi__val small {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--sub);
}
.diesel .cx-kpi__hint {
  font-size: var(--fs-xs);
  color: var(--sub);
  margin-top: 4px;
  line-height: 1.4;
}
.diesel .cx-kpi__val.is-pos,
.diesel .cx-kpi__val small.is-pos { color: #05AB34; }
.diesel .cx-kpi__val.is-neg,
.diesel .cx-kpi__val small.is-neg { color: #c0392b; }
.diesel .cx-kpi--dif { border-left: 3px solid var(--gold); }

/* ─── Linha Mapa + Ranking ──────────────────────────────────── */
.diesel .cx-row-mapa {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1.1fr);
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 980px) {
  .diesel .cx-row-mapa { grid-template-columns: 1fr; }
}
.diesel .cx-panel {
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.diesel .cx-panel--tabela { padding: 14px 0 0; overflow: hidden; }
.diesel .cx-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--primary);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.diesel .cx-panel--tabela .cx-h3 { padding: 0 16px; }
.diesel .cx-h3-sub {
  font-size: var(--fs-xs);
  color: var(--sub);
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}

/* ─── Mapa UF · SVG ─────────────────────────────────────────── */
.diesel .cx-mapa__legenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  font-size: var(--fs-xs);
  color: var(--sub);
  margin-bottom: 10px;
}
.diesel .cx-mapa__leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.diesel .cx-mapa__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.diesel .cx-mapa__dot--neg { background: #dc2626; }
.diesel .cx-mapa__dot--pos { background: var(--fb-accent, #05AB34); }
.diesel .cx-mapa__dot--neu { background: #9ca3af; }
.diesel .cx-mapa__leg-tam { margin-left: auto; font-style: italic; }
.diesel .cx-mapa__svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-ui);
}
.diesel .cx-mapa__bolha {
  cursor: pointer;
  transition: filter .15s ease;
}
.diesel .cx-mapa__bolha:hover circle { filter: brightness(1.1); }
.diesel .cx-mapa__bolha:focus { outline: none; }
.diesel .cx-mapa__bolha:focus circle {
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(5, 171, 52, .5));
}

/* ─── Ranking de Postos ─────────────────────────────────────── */
.diesel .cx-rank {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.diesel .cx-rank__row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-soft);
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.diesel .cx-rank__row:hover {
  background: var(--accent-soft);
  transform: translateX(2px);
}
.diesel .cx-rank__row:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}
.diesel .cx-rank__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--sub);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.diesel .cx-rank__row:nth-child(1) .cx-rank__num { color: var(--gold-dark); }
.diesel .cx-rank__row:nth-child(2) .cx-rank__num { color: #6b7280; }
.diesel .cx-rank__row:nth-child(3) .cx-rank__num { color: #a16207; }
.diesel .cx-rank__corpo { min-width: 0; }
.diesel .cx-rank__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.diesel .cx-rank__posto {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.diesel .cx-rank__uf {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--primary);
  background: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--borda);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.diesel .cx-rank__bar {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.diesel .cx-rank__bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width .25s ease;
}
.diesel .cx-rank__meta {
  display: flex;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--sub);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.diesel .cx-rank__spread { font-weight: var(--fw-semibold); margin-left: auto; }
.diesel .cx-rank__spread.is-pos { color: #05AB34; }
.diesel .cx-rank__spread.is-neg { color: #c0392b; }
.diesel .cx-rank--drawer { gap: 8px; }
.diesel .cx-rank--drawer .cx-rank__row {
  background: #fff;
  border: 1px solid var(--borda-soft);
}

/* ─── Chart SVG geral ───────────────────────────────────────── */
.diesel .cx-chart__svg {
  width: 100%;
  height: auto;
  min-height: 280px;          /* garante que SVG nunca colapse pra 0 */
  display: block;
  font-family: var(--font-ui);
}

/* ─── Donut (Geral) ─────────────────────────────────────────── */
.diesel .cx-donut {
  display: flex;
  align-items: center;
  gap: 16px;
}
.diesel .cx-donut__svg { width: 200px; flex-shrink: 0; }
.diesel .cx-donut__legenda {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-base);
}
.diesel .cx-donut__legenda li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--txt);
}
.diesel .cx-donut__legenda small {
  color: var(--sub);
  margin-left: 4px;
}
.diesel .cx-donut__sw {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* ─── Insights (Geral) ──────────────────────────────────────── */
.diesel .cx-insights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diesel .cx-insight {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--txt);
}
.diesel .cx-insight__ico { font-size: var(--fs-2xl); }
.diesel .cx-insight__txt b { color: var(--primary); }

/* ─── Tabela detalhamento ───────────────────────────────────── */
.diesel .cx-tabela-wrap {
  overflow: auto;
  max-height: 560px;
  border-top: 1px solid var(--borda-soft);
}
.diesel .cx-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.diesel .cx-tabela thead th {
  position: sticky;
  top: 0;
  background: #f0f3f3;
  text-align: right;
  padding: 8px 12px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #5a6f6e;
  border-bottom: 1px solid #d4dada;
  z-index: 1;
}
.diesel .cx-tabela th:nth-child(1),
.diesel .cx-tabela th:nth-child(2),
.diesel .cx-tabela th:nth-child(3),
.diesel .cx-tabela th:nth-child(4),
.diesel .cx-tabela th:nth-child(5),
.diesel .cx-tabela td:nth-child(1),
.diesel .cx-tabela td:nth-child(2),
.diesel .cx-tabela td:nth-child(3),
.diesel .cx-tabela td:nth-child(4),
.diesel .cx-tabela td:nth-child(5) {
  text-align: left;
}
.diesel .cx-tabela td {
  padding: 7px 12px;
  text-align: right;
  border-bottom: 1px solid #f0f2f2;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}
.diesel .cx-tabela tbody tr {
  cursor: pointer;
  transition: background .1s ease;
}
.diesel .cx-tabela tbody tr:hover { background: #fafbfb; }
.diesel .cx-tabela tbody tr:focus {
  outline: none;
  background: var(--accent-soft);
}
.diesel .cx-tabela td.num.is-pos { color: #05AB34; font-weight: var(--fw-semibold); }
.diesel .cx-tabela td.num.is-neg { color: #c0392b; font-weight: var(--fw-semibold); }
.diesel .cx-placa-sint {
  color: var(--sub);
  font-style: italic;
  font-size: var(--fs-xs);
}
.diesel .cx-tabela--drawer { font-size: var(--fs-sm); }
.diesel .cx-tabela--drawer thead th { background: var(--bg-soft); }
.diesel .cx-tabela__rodape {
  padding: 10px 16px;
  font-size: var(--fs-sm);
  color: var(--sub);
  background: var(--bg-soft);
  border-top: 1px solid var(--borda-soft);
}

/* ─── Empty + drawer sub-texto ──────────────────────────────── */
.diesel .cx-empty {
  padding: 32px;
  text-align: center;
  color: var(--sub);
  font-size: var(--fs-base);
  font-style: italic;
}
.diesel .cx-drawer__sub {
  font-size: var(--fs-sm);
  color: var(--sub);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* ─── Placeholder Interno ───────────────────────────────────── */
.diesel .compras-placeholder {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 36px 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.diesel .compras-placeholder__ico {
  font-size: var(--fs-4xl);
  margin-bottom: 12px;
}
.diesel .compras-placeholder h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  margin: 0 0 12px;
}
.diesel .compras-placeholder p {
  font-size: var(--fs-base);
  color: var(--txt);
  line-height: 1.6;
  margin: 0 0 12px;
  text-align: left;
}
.diesel .compras-placeholder__roadmap {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  text-align: left;
  border-top: 1px solid var(--borda-soft);
  padding-top: 16px;
}
.diesel .compras-placeholder__roadmap li {
  font-size: var(--fs-base);
  color: var(--txt);
  padding: 6px 0;
  line-height: 1.5;
}

/* ─── Responsivo Compras ────────────────────────────────────── */
@media (max-width: 720px) {
  .diesel .cx-kpis { grid-template-columns: 1fr 1fr; }
  .diesel .cx-filtros__hint { margin-left: 0; max-width: 100%; }
  .diesel .cx-tabela th:nth-child(7),
  .diesel .cx-tabela td:nth-child(7),
  .diesel .cx-tabela th:nth-child(8),
  .diesel .cx-tabela td:nth-child(8) { display: none; }
  .diesel .abast-toolbar__hint { margin-left: 0; }
  .diesel .cx-donut { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.2.0 (18/05/2026)
   ──────────────────────────────────────────────────────────────
   Os blocos abaixo NÃO levam o prefixo `.diesel` porque também
   aparecem dentro do drawer (que vive em <body>, fora do escopo).
   Sobrescrevem definições anteriores quando colidem.
   ══════════════════════════════════════════════════════════════ */

/* ─── Tabelas (incl. drawer) ─────────────────────────────────── */
.cx-tabela-wrap {
  overflow: auto;
  max-height: 560px;
  border-top: 1px solid #e3e6e6;
}
.cx-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.cx-tabela thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f0f3f3;
  text-align: right;
  padding: 8px 12px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #5a6f6e;
  border-bottom: 1px solid #d4dada;
}
.cx-tabela th:nth-child(1),
.cx-tabela td:nth-child(1),
.cx-tabela th:nth-child(2),
.cx-tabela td:nth-child(2),
.cx-tabela th:nth-child(3),
.cx-tabela td:nth-child(3) {
  text-align: left;
}
.cx-tabela td {
  padding: 7px 12px;
  text-align: right;
  border-bottom: 1px solid #f0f2f2;
  font-variant-numeric: tabular-nums;
  color: #1f2937;
}
.cx-tabela tbody tr {
  cursor: pointer;
  transition: background .1s ease;
}
.cx-tabela tbody tr:hover { background: #fafbfb; }
.cx-tabela tbody tr:focus { outline: none; background: rgba(5, 171, 52, .07); }
.cx-tabela td.num.is-pos { color: #05AB34; font-weight: var(--fw-semibold); }
.cx-tabela td.num.is-neg { color: #c0392b; font-weight: var(--fw-semibold); }
.cx-tabela--drawer { font-size: var(--fs-sm); }
.cx-tabela--drawer thead th { background: #f7f8f8; position: static; }
.cx-tabela__rodape {
  padding: 10px 16px;
  font-size: var(--fs-sm);
  color: #6b7280;
  background: #f7f8f8;
  border-top: 1px solid #e3e6e6;
}
.cx-placa-sint { color: #6b7280; font-style: italic; font-size: var(--fs-xs); }
.cx-uf-nome { color: #6b7280; font-weight: var(--fw-regular); font-size: var(--fs-xs); }

/* ─── Ranking (também usado dentro do drawer) ────────────────── */
.cx-rank {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cx-rank__row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f7f8f8;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.cx-rank__row:hover { background: rgba(5, 171, 52, .07); transform: translateX(2px); }
.cx-rank__row:focus { outline: none; box-shadow: 0 0 0 2px var(--fb-accent, #05AB34); }
.cx-rank__num {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: #6b7280;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cx-rank__row:nth-child(1) .cx-rank__num { color: #b45309; }
.cx-rank__row:nth-child(2) .cx-rank__num { color: #6b7280; }
.cx-rank__row:nth-child(3) .cx-rank__num { color: #a16207; }
.cx-rank__corpo { min-width: 0; }
.cx-rank__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.cx-rank__posto {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1; min-width: 0;
}
.cx-rank__uf {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--fb-primary, #1D3B3A);
  background: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #d4dada;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.cx-rank__bar {
  height: 4px;
  background: #e3e6e6;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.cx-rank__bar-fill {
  height: 100%;
  background: var(--fb-accent, #05AB34);
  transition: width .25s ease;
}
.cx-rank__meta {
  display: flex; gap: 12px;
  font-size: var(--fs-xs);
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.cx-rank__spread { font-weight: var(--fw-semibold); margin-left: auto; }
.cx-rank__spread.is-pos { color: #05AB34; }
.cx-rank__spread.is-neg { color: #c0392b; }
.cx-rank--drawer { gap: 8px; }
.cx-rank--drawer .cx-rank__row {
  background: #fff;
  border: 1px solid #e3e6e6;
}

/* ─── Empty / drawer sub-texto ───────────────────────────────── */
.cx-empty {
  padding: 32px;
  text-align: center;
  color: #6b7280;
  font-size: var(--fs-base);
  font-style: italic;
}
.cx-drawer__sub {
  font-size: var(--fs-sm);
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* ─── NF sections (drawer NF) · NOVO ─────────────────────────── */
.nf-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .nf-sections { grid-template-columns: 1fr; } }
.nf-section {
  background: #f7f8f8;
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 3px solid var(--fb-accent, #05AB34);
}
.nf-section:nth-child(2) { border-left-color: var(--fb-primary, #1D3B3A); }
.nf-section:nth-child(3) { border-left-color: #b45309; }
.nf-section:nth-child(4) { border-left-color: #6b7280; }
.nf-section__title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fb-primary, #1D3B3A);
  margin-bottom: 10px;
}
.nf-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: var(--fs-base);
}
.nf-grid dt {
  color: #6b7280;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-xs);
  align-self: center;
}
.nf-grid dd {
  margin: 0;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.nf-grid__erp {
  font-size: var(--fs-2xs);
  color: #6b7280;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  margin-left: 4px;
}

/* ─── Saúde (Geral) · cards de diagnóstico · NOVO ────────────── */
.diesel .cx-saude {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.diesel .cx-saude__card {
  background: #fff;
  border: 1px solid #e3e6e6;
  border-left: 4px solid #6b7280;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(29, 59, 58, .04);
}
.diesel .cx-saude__card.is-ok   { border-left-color: #05AB34; }
.diesel .cx-saude__card.is-warn { border-left-color: #c0392b; }
.diesel .cx-saude__card.is-neu  { border-left-color: #b45309; }
.diesel .cx-saude__lbl {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.diesel .cx-saude__val {
  font-family: var(--font-ui);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--fb-primary, #1D3B3A);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.diesel .cx-saude__val small { font-size: var(--fs-base); color: #6b7280; font-weight: var(--fw-semibold); }
.diesel .cx-saude__hint {
  font-size: var(--fs-xs);
  color: #4b5563;
  margin-top: 6px;
  line-height: 1.4;
}
.diesel .cx-saude__card.is-warn .cx-saude__val { color: #c0392b; }
.diesel .cx-saude__card.is-ok   .cx-saude__val { color: #15803D; }

/* ─── Donut: legenda enriquecida ─────────────────────────────── */
.diesel .cx-donut__legenda li { padding: 6px 0; }
.diesel .cx-donut__sub {
  font-size: var(--fs-xs);
  color: #6b7280;
  margin-left: 20px;
}

/* ─── Outliers · NOVO ────────────────────────────────────────── */
.diesel .cx-outliers__sub,
.cx-outliers__sub {
  font-size: var(--fs-sm);
  color: #6b7280;
  margin: 0 0 12px;
  line-height: 1.4;
}
.diesel .cx-outliers,
.cx-outliers {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-outlier {
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all .12s ease;
}
.cx-outlier:hover { transform: translateX(2px); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.cx-outlier:focus { outline: none; box-shadow: 0 0 0 2px var(--fb-accent, #05AB34); }
.cx-outlier.is-neg { border-left: 4px solid #c0392b; }
.cx-outlier.is-pos { border-left: 4px solid #05AB34; }
.cx-outlier__top {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 4px;
}
.cx-outlier__rsl {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.cx-outlier__rsl small { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #6b7280; }
.cx-outlier__z {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #c0392b;
  margin-left: auto;
}
.cx-outlier.is-pos .cx-outlier__z { color: #05AB34; }
.cx-outlier__meta {
  font-size: var(--fs-sm);
  color: #4b5563;
  margin-bottom: 2px;
}
.cx-outlier__sub {
  font-size: var(--fs-xs);
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* ─── KPIs dentro do drawer · força a 4 colunas ──────────────── */
.fb-drawer .fb-drawer__kpis .kp.is-pos { color: #05AB34; }
.fb-drawer .fb-drawer__kpis .kp.is-neg { color: #c0392b; }

/* ─── is-pos / is-neg globais (sobrescreve scope) ────────────── */
.is-pos { color: #05AB34; }
.is-neg { color: #c0392b; }

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.2.1 (18/05/2026)
   Min ANP + contorno Brasil + chart de gaps mensais
   ══════════════════════════════════════════════════════════════ */

/* KPI variante "referência" (Médio / Mínimo) — bordinha à esquerda */
.diesel .cx-kpi--ref {
  border-left: 3px solid #c0392b;
}
.diesel .cx-kpi--ref + .cx-kpi--ref {
  border-left-color: var(--fb-accent, #05AB34);
}

/* Subtítulo h4 dentro dos panels (gap chart) */
.diesel .cx-h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--fb-primary, #1D3B3A);
  margin: 16px 0 6px;
  padding-top: 12px;
  border-top: 1px solid #e3e6e6;
}

/* Mapa UF · marca cinza pras UFs sem volume */
.diesel .cx-mapa__marca text { font-family: var(--font-ui); }
.diesel .cx-mapa__marcas { opacity: .55; pointer-events: none; }

/* Bolha do mapa: stroke mais forte no hover/focus pra dar feedback */
.diesel .cx-mapa__bolha circle {
  transition: stroke-width .15s ease, filter .15s ease;
}
.diesel .cx-mapa__bolha:hover circle,
.diesel .cx-mapa__bolha:focus circle {
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.3.0 (18/05/2026) · Meta + Gradient + Tabela Tamara
   ══════════════════════════════════════════════════════════════ */

/* ─── Mapa · legenda gradient ───────────────────────────────── */
.diesel .cx-mapa__leg-grad {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.diesel .cx-mapa__leg-titulo {
  font-weight: var(--fw-semibold); color: #1f2937; margin-right: 6px; font-size: var(--fs-xs);
}
.diesel .cx-mapa__leg-chip {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(0,0,0,.1);
}
.diesel .cx-mapa__leg-lbl {
  font-size: var(--fs-2xs); color: #6b7280; margin-right: 2px;
  font-variant-numeric: tabular-nums;
}

/* ─── Saúde · variantes de status ───────────────────────────── */
.diesel .cx-saude__card.is-bad  { border-left-color: #c0392b; }
.diesel .cx-saude__card.is-bad  .cx-saude__val { color: #c0392b; }
.diesel .cx-saude__card--headline {
  grid-column: span 2;
  background: linear-gradient(135deg, #fff 0%, #f7f9f9 100%);
  border-left-width: 6px;
  position: relative;
}
.diesel .cx-saude__card--headline .cx-saude__val {
  font-size: var(--fs-xl);
  line-height: 1.25;
}
.diesel .cx-saude__sub {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .diesel .cx-saude__card--headline { grid-column: span 1; }
}

/* ─── Tabela Tamara · pesos + status + total ────────────────── */
.cx-peso--high { color: #15803D; font-weight: var(--fw-bold); }
.cx-peso--med  { color: #15803d; font-weight: var(--fw-semibold); }

.cx-meta-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.cx-meta-badge.is-ok   { background: #dcfce7; color: #15803D; }
.cx-meta-badge.is-neu  { background: #fef3c7; color: #92400e; }
.cx-meta-badge.is-warn { background: #fed7aa; color: #9a3412; }
.cx-meta-badge.is-bad  { background: #fee2e2; color: #991b1b; }

.cx-tabela__outros td { background: #f9fafb; font-style: italic; color: #6b7280; }
/* v0.3.1 · Anexo 2 — Total bar com contraste correto. Antes a regra
   `.diesel .cx-tabela td { color: var(--txt); }` (especificidade maior)
   sobrescrevia o `color: #fff`. Aumentei a especificidade aqui e
   relaxei um pouco a saturação do fundo pra dar mais leveza. */
.diesel .cx-tabela__total td {
  background: var(--fb-primary, #1D3B3A);
  color: #fff;
  font-weight: var(--fw-bold);
  border-bottom: 0;
  font-size: var(--fs-base);
  letter-spacing: .02em;
  padding-top: 11px;
  padding-bottom: 11px;
}
.diesel .cx-tabela__total td b { color: #fff; font-weight: var(--fw-bold); }
/* Cores semânticas no impacto continuam, mas com tons que se destacam
   bem no var(--fb-primary, #1D3B3A): amber pra impacto negativo, mint pra "no alvo". */
.diesel .cx-tabela__total td.is-neg { color: #fbbf24; font-weight: var(--fw-bold); }
.diesel .cx-tabela__total td.is-neg b { color: #fbbf24; }
.diesel .cx-tabela__total td.is-pos { color: #6ee7b7; font-weight: var(--fw-bold); }
.diesel .cx-tabela__total td.is-pos b { color: #6ee7b7; }
.cx-tabela__rodape b { color: var(--fb-primary, #1D3B3A); }

/* v0.3.1 · Anexo 2 — Linha drillable com affordance VISÍVEL (sem
   precisar passar o mouse). Adiciona um chevron sutil fixo na ponta
   direita da primeira coluna, e o hover deixa ele mais intenso. */
.cx-tabela__drill {
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.cx-tabela__drill td:first-child {
  position: relative;
  padding-right: 26px;
}
.cx-tabela__drill td:first-child::after {
  content: '▸';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #cbd5e0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  transition: color .15s, transform .15s, right .15s;
}
.cx-tabela__drill:hover { background: #f0fdf4; }
.cx-tabela__drill:hover td:first-child::after {
  color: var(--fb-accent, #05AB34);
  right: 4px;
}

/* v0.3.0 · Drawer de cidades */
.cx-cidades-drawer { padding: 4px 0; }
.cx-cidades-drawer__head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.cx-cidades-drawer__uf {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--fb-primary, #1D3B3A);
  letter-spacing: .02em;
}
.cx-cidades-drawer__stats {
  font-size: var(--fs-sm);
  color: #6b7280;
  margin-top: 2px;
}
.cx-tabela--compact th,
.cx-tabela--compact td {
  padding: 6px 10px;
  font-size: var(--fs-sm);
}

/* v0.3.1 · Anexo 3 — Painel Ranking de Fornecedores (unificado).
   Consolidou os antigos Maiores & Menores + Top 5 num só painel
   full-width com 2 colunas (TOP em verde / BOT em vermelho) e barras
   proporcionais ao maior do próprio grupo. */
.cx-rank2 { padding: 4px 0; }
.cx-rank2__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}
.cx-rank2__btn {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  color: #4b5563;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font-ui);
}
.cx-rank2__btn:hover { border-color: var(--fb-accent, #05AB34); color: #15803D; }
.cx-rank2__btn.is-active {
  background: var(--fb-accent, #05AB34);
  border-color: var(--fb-accent, #05AB34);
  color: #fff;
  box-shadow: 0 1px 3px rgba(5, 171, 52,.25);
}

.cx-rank2__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 880px) {
  .cx-rank2__cols { grid-template-columns: 1fr; }
}

.cx-rank2__col {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
}
.cx-rank2__col-titulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}
.cx-rank2__col-titulo--top { color: #15803D; }
.cx-rank2__col-titulo--bot { color: #b91c1c; }

.cx-rank2__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cx-rank2__row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.cx-rank2__rank {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  padding-top: 1px;
}
.cx-rank2__rank--top { color: #9ca3af; }
.cx-rank2__rank--top:first-letter { /* sem efeito — manter consistência */ }
.cx-rank2__row:nth-child(1) .cx-rank2__rank--top { color: var(--gold-dark, #b45309); }
.cx-rank2__row:nth-child(2) .cx-rank2__rank--top { color: #6b7280; }
.cx-rank2__row:nth-child(3) .cx-rank2__rank--top { color: #a16207; }
.cx-rank2__rank--bot { color: #fca5a5; }

.cx-rank2__corpo { min-width: 0; }
.cx-rank2__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.cx-rank2__posto {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cx-rank2__uf {
  background: #f3f4f6;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: #374151;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.cx-rank2__bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cx-rank2__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .35s ease;
}
.cx-rank2__bar-fill--top {
  background: linear-gradient(90deg, #16a34a 0%, #05AB34 100%);
}
.cx-rank2__bar-fill--bot {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
}
.cx-rank2__meta {
  display: flex;
  gap: 10px;
  font-size: var(--fs-xs);
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  align-items: center;
}
.cx-rank2__valor {
  font-weight: var(--fw-bold);
  color: #111827;
  font-size: var(--fs-sm);
}
.cx-rank2__spread {
  margin-left: auto;
  font-weight: var(--fw-semibold);
  padding: 1px 5px;
  border-radius: 3px;
}
.cx-rank2__spread.is-pos { color: #15803D; background: #ecfdf5; }
.cx-rank2__spread.is-neg { color: #991b1b; background: #fef2f2; }

/* v0.3.0 · Anexo 3: Evolução mensal */
.cx-evol { padding: 4px 0; }
.cx-evol__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cx-evol__btn {
  padding: 5px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  color: #4b5563;
  cursor: pointer;
  transition: all .12s;
}
.cx-evol__btn:hover { border-color: var(--fb-accent, #05AB34); color: #15803D; }
.cx-evol__btn.is-active {
  background: var(--fb-accent, #05AB34);
  border-color: var(--fb-accent, #05AB34);
  color: #fff;
}
.cx-evol__svg { width: 100%; height: auto; max-height: 340px; }
.cx-evol__chart { padding: 4px 0; }

/* v0.7.9 · Anexo 4: Slider de meta no chart Real × ANP */
.cx-chart__meta {
  margin: 4px 0 12px;
  padding: 10px 14px;
  background: linear-gradient(to right, #f0fdf4 0%, #fff 70%);
  border: 1px solid #d1fae5;
  border-radius: 6px;
}
.cx-chart__meta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cx-chart__meta-lbl {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #15803D;
  letter-spacing: .02em;
}
.cx-chart__meta-val {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #15803D;
  font-variant-numeric: tabular-nums;
  background: #fff;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid #d1fae5;
}
.cx-chart__meta-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(to right,
    #15803D 0%,
    #84cc16 50%,
    #fbbf24 70%,
    #c0392b 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.cx-chart__meta-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #15803D;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: grab;
  transition: transform .1s;
}
.cx-chart__meta-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cx-chart__meta-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.cx-chart__meta-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #15803D;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: grab;
}
.cx-chart__meta-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-2xs);
  color: #6b7280;
  margin-top: 2px;
}
.cx-chart__meta-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d1fae5;
  font-size: var(--fs-xs);
  color: #4b5563;
}
.cx-chart__meta-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cx-chart__meta-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.4.0 (18/05/2026) · UX/UI substancial
   Multiselect bonito · Mapa interativo · Chart com tooltip
   ══════════════════════════════════════════════════════════════ */

/* ─── Multiselect UF ────────────────────────────────────────── */
.cx-ms { position: relative; }
.diesel-old .cx-ms__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 220px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #c8d0cf;
  border-radius: 6px;
  font: 600 12.5px/1.2 var(--font-ui);
  color: var(--fb-primary, #1D3B3A);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.diesel-old .cx-ms__trigger:hover { border-color: var(--fb-accent, #05AB34); }
.diesel-old .cx-ms__trigger[aria-expanded="true"] {
  border-color: var(--fb-accent, #05AB34);
  box-shadow: 0 0 0 3px rgba(5, 171, 52, .15);
}
.diesel-old .cx-ms__summary { flex: 1; }
.diesel-old .cx-ms__arrow { color: #6b7280; transition: transform .2s; }
.diesel-old .cx-ms__trigger[aria-expanded="true"] .cx-ms__arrow { transform: rotate(180deg); }

/* v0.7.0: removida regra .diesel-old .cx-ms__pop antiga · ver regra global .cx-ms__pop no fim do arquivo */
.diesel-old .cx-ms__pop_removida_v07 { display: none; }
@keyframes cxMsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.diesel-old .cx-ms__head {
  padding: 10px;
  border-bottom: 1px solid #e3e6e6;
  display: flex; gap: 8px; align-items: center;
}
.diesel-old .cx-ms__search {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #c8d0cf;
  border-radius: 4px;
  font-size: var(--fs-base);
}
.diesel-old .cx-ms__search:focus {
  outline: none; border-color: var(--fb-accent, #05AB34);
  box-shadow: 0 0 0 2px rgba(5, 171, 52, .15);
}
.diesel-old .cx-ms__acts { display: flex; gap: 4px; }
.diesel-old .cx-ms__acts button {
  padding: 5px 10px;
  background: #f7f8f8;
  border: 1px solid #d4dada;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  color: var(--fb-primary, #1D3B3A);
}
.diesel-old .cx-ms__acts button:hover { background: #eef2f1; }

.diesel-old .cx-ms__list {
  list-style: none; padding: 4px 0; margin: 0;
  flex: 1; overflow-y: auto;
}
.diesel-old .cx-ms__item label {
  display: grid;
  grid-template-columns: 16px 28px 1fr max-content;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background .1s;
}
.diesel-old .cx-ms__item:hover label { background: rgba(5, 171, 52, .07); }
.diesel-old .cx-ms__item input { margin: 0; cursor: pointer; accent-color: var(--fb-accent, #05AB34); }
.diesel-old .cx-ms__chip {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .04em;
  background: var(--fb-primary, #1D3B3A); color: #fff;
  padding: 2px 5px; border-radius: 3px;
  text-align: center;
}
.diesel-old .cx-ms__lbl { color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diesel-old .cx-ms__peso {
  font-size: var(--fs-xs); color: #6b7280; font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

.diesel-old .cx-ms__foot {
  padding: 8px 10px; border-top: 1px solid #e3e6e6;
  display: flex; justify-content: space-between; align-items: center;
}
.diesel-old .cx-ms__counter { font-size: var(--fs-xs); color: #6b7280; }
.diesel-old .cx-ms__close {
  padding: 6px 14px;
  background: var(--fb-accent, #05AB34); color: #fff;
  border: 0; border-radius: 4px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  cursor: pointer;
}
.diesel-old .cx-ms__close:hover { background: #15803D; }

/* ─── Mapa container · com toolbar ─────────────────────────── */
.diesel .cx-mapa {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #fafbfb 0%, #f3f6f5 100%);
  border-radius: 8px;
  padding: 12px;
  position: relative;
}
.diesel .cx-mapa__topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.diesel .cx-mapa__toolbar {
  display: inline-flex; gap: 2px;
  background: #fff; border: 1px solid #d4dada;
  border-radius: 6px; padding: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.diesel .cx-mapa__toolbar button {
  width: 30px; height: 30px;
  background: transparent; border: 0; border-radius: 4px;
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  cursor: pointer;
  color: var(--fb-primary, #1D3B3A);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.diesel .cx-mapa__toolbar button:hover { background: rgba(5, 171, 52, .12); }
.diesel .cx-mapa__toolbar button:active { background: rgba(5, 171, 52, .22); }

.diesel .cx-mapa__viewport {
  position: relative;
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 6px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.diesel .cx-mapa__viewport:active { cursor: grabbing; }
.diesel .cx-mapa__svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-ui);
}
.diesel .cx-mapa__pan { transform-origin: 0 0; transition: transform .2s ease-out; }
.diesel .cx-mapa__hint {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: #6b7280;
  font-style: italic;
  text-align: center;
}

/* Bolhas com animação de entrada */
.diesel .cx-mapa__bolha {
  cursor: pointer;
  animation: cxBolhaIn .45s cubic-bezier(.4, 0, .2, 1) backwards;
}
@keyframes cxBolhaIn {
  from { opacity: 0; transform: scale(.5); transform-origin: center; }
  to   { opacity: 1; transform: scale(1); }
}
.diesel .cx-mapa__bolha circle {
  transition: stroke-width .15s, filter .15s, fill-opacity .15s;
}
.diesel .cx-mapa__bolha:hover circle,
.diesel .cx-mapa__bolha:focus circle {
  stroke-width: 2.5;
  fill-opacity: 0.95;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.22));
}

/* Tooltip do mapa */
.diesel .cx-mapa__tooltip {
  position: absolute;
  background: var(--fb-primary, #1D3B3A);
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.32);
  font-size: var(--fs-sm);
  min-width: 240px;
  max-width: 300px;
  z-index: 50;
  pointer-events: none;
  animation: cxTipIn .12s ease-out;
}
@keyframes cxTipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.diesel .cx-mapa-tip__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.diesel .cx-mapa-tip__sigla {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: .04em;
  background: rgba(255,255,255,.15);
  padding: 2px 8px; border-radius: 4px;
}
.diesel .cx-mapa-tip__nome {
  font-size: var(--fs-xs); color: #cbd5e1;
  text-transform: uppercase; letter-spacing: .04em;
  flex: 1;
}
.diesel .cx-mapa-tip__badge {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  padding: 2px 6px; border-radius: 8px;
}
.diesel .cx-mapa-tip__badge.is-ok   { background: #16a34a; color: #fff; }
.diesel .cx-mapa-tip__badge.is-neu  { background: #f59e0b; color: #fff; }
.diesel .cx-mapa-tip__badge.is-warn { background: #ea580c; color: #fff; }
.diesel .cx-mapa-tip__badge.is-bad  { background: #dc2626; color: #fff; }

.diesel .cx-mapa-tip__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.diesel .cx-mapa-tip__dl dt {
  color: #cbd5e1;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  align-self: center;
}
.diesel .cx-mapa-tip__dl dd {
  margin: 0;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: right;
}
.diesel .cx-mapa-tip__dl dd small {
  font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: #94a3b8;
}
.diesel .cx-mapa-tip__pct {
  display: block; font-size: var(--fs-2xs); color: #94a3b8;
  font-weight: var(--fw-regular); margin-top: 2px;
}
.diesel .cx-mapa-tip__dif {
  padding-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 4px !important;
}
.diesel .cx-mapa-tip__dif dt { color: #fff !important; }
.diesel .cx-mapa-tip__cta {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: var(--fs-xs); color: #94a3b8;
  text-align: center; font-style: italic;
}

/* Fullscreen overrides */
.diesel .cx-mapa:fullscreen,
.diesel .cx-mapa.cx-mapa--full {
  background: #fff;
  padding: 24px;
  display: flex; flex-direction: column;
}
.diesel .cx-mapa:fullscreen .cx-mapa__viewport,
.diesel .cx-mapa.cx-mapa--full .cx-mapa__viewport {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.diesel .cx-mapa:fullscreen .cx-mapa__svg,
.diesel .cx-mapa.cx-mapa--full .cx-mapa__svg {
  max-height: calc(100vh - 200px);
  width: auto;
}

/* ─── Chart wrapper · tooltip + animação stroke ────────────── */
.diesel .cx-chart {
  position: relative;
  margin-bottom: 18px;
}
.diesel .cx-chart__line {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: cxDrawLine 1.1s ease-out forwards;
}
.diesel .cx-chart__line--main { animation-duration: 1.4s; }
@keyframes cxDrawLine {
  to { stroke-dashoffset: 0; }
}
.diesel .cx-chart__bar {
  animation: cxBarUp .55s ease-out backwards;
  transform-origin: bottom;
}
@keyframes cxBarUp {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.diesel .cx-chart__lbl {
  animation: cxFadeIn .8s ease-out backwards .9s;
}
@keyframes cxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.diesel .cx-chart__tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #d4dada;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  font-size: var(--fs-sm);
  min-width: 200px;
  z-index: 30;
  pointer-events: none;
  animation: cxTipIn .12s ease-out;
}
.diesel .cx-chart-tip__mes {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .8px;
  color: #6b7280;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid #e3e6e6;
}
.diesel .cx-chart-tip__t {
  width: 100%; font-variant-numeric: tabular-nums;
  border-collapse: collapse;
}
.diesel .cx-chart-tip__t td {
  padding: 3px 0; font-size: var(--fs-sm);
}
.diesel .cx-chart-tip__t td:first-child { color: #4b5563; }
.diesel .cx-chart-tip__t td:last-child  { text-align: right; color: #1f2937; }
.diesel .cx-chart-tip__main td { padding-top: 6px; border-top: 1px solid #f0f2f2; }
.diesel .cx-chart-tip__main td:last-child { font-size: var(--fs-base); }
.diesel .cx-chart-tip__t b.is-pos { color: #15803D; }
.diesel .cx-chart-tip__t b.is-neg { color: #c0392b; }
.diesel .cx-chart-tip__sw {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.5.0 (18/05/2026)
   Mapa Leaflet (substitui SVG inline) · Multiselect position:fixed
   ══════════════════════════════════════════════════════════════ */

/* ─── Mapa Leaflet container ────────────────────────────────── */
.diesel .cx-mapa__leaflet {
  width: 100%;
  height: 480px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #f3f6f5;
  border: 1px solid #e3e6e6;
}
.diesel .cx-mapa--full .cx-mapa__leaflet { height: calc(100vh - 160px); }

/* Label sobre as bolhas (UF) */
.diesel .cx-mapa__marker-icon {
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
}
.diesel .cx-mapa__marker-lbl {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.35);
  line-height: 20px;
  letter-spacing: .03em;
}

/* Popup Leaflet · sobrescreve o estilo padrão */
.diesel .cx-mapa-popup-wrap .leaflet-popup-content-wrapper {
  background: var(--fb-primary, #1D3B3A);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.32);
  padding: 0;
}
.diesel .cx-mapa-popup-wrap .leaflet-popup-content {
  margin: 0;
  width: auto !important;
  min-width: 240px;
}
.diesel .cx-mapa-popup-wrap .leaflet-popup-tip { background: var(--fb-primary, #1D3B3A); }
.diesel .cx-mapa-popup-wrap .leaflet-popup-close-button {
  color: #94a3b8 !important;
  padding: 6px 8px 0 0 !important;
}
.diesel .cx-mapa-popup-wrap .leaflet-popup-close-button:hover { color: #fff !important; }

.diesel .cx-mapa-pop { padding: 12px 14px; font-family: var(--font-ui); }
.diesel .cx-mapa-pop__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.diesel .cx-mapa-pop__sigla {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: .04em;
  background: rgba(255,255,255,.15);
  padding: 2px 8px; border-radius: 4px;
}
.diesel .cx-mapa-pop__nome {
  font-size: var(--fs-xs); color: #cbd5e1;
  text-transform: uppercase; letter-spacing: .04em;
  flex: 1;
}
.diesel .cx-mapa-pop__badge {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  padding: 2px 6px; border-radius: 8px;
}
.diesel .cx-mapa-pop__badge.is-ok   { background: #16a34a; color: #fff; }
.diesel .cx-mapa-pop__badge.is-neu  { background: #f59e0b; color: #fff; }
.diesel .cx-mapa-pop__badge.is-warn { background: #ea580c; color: #fff; }
.diesel .cx-mapa-pop__badge.is-bad  { background: #dc2626; color: #fff; }

.diesel .cx-mapa-pop__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.diesel .cx-mapa-pop__dl dt {
  color: #cbd5e1; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  align-self: center;
}
.diesel .cx-mapa-pop__dl dd {
  margin: 0; color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-align: right;
}
.diesel .cx-mapa-pop__dl dd small {
  font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: #94a3b8;
}
.diesel .cx-mapa-pop__pct {
  font-size: var(--fs-2xs); color: #94a3b8; font-weight: var(--fw-regular);
}
.diesel .cx-mapa-pop__dif {
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 4px;
}
.diesel .cx-mapa-pop__dif dt,
.diesel .cx-mapa-pop__dif { color: #fff !important; }
.diesel .cx-mapa-pop__cta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--fb-accent, #05AB34);
  color: #fff;
  border: 0; border-radius: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background .15s;
}
.diesel .cx-mapa-pop__cta:hover { background: #15803D; }

/* Leaflet zoom controls — alinhar com paleta */
.diesel .leaflet-control-zoom a {
  background: #fff;
  color: var(--fb-primary, #1D3B3A);
  border: 1px solid #d4dada;
}
.diesel .leaflet-control-zoom a:hover { background: #f7f8f8; color: var(--fb-accent, #05AB34); }

/* ─── Fix do multiselect: position:fixed (sem clipping) ─────── */
.diesel-old .cx-ms__pop {
  position: fixed !important;
  top: auto;
  left: auto;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.6.0 (18/05/2026)
   ANP ponderado por volume · Multiselect portal · Chart fullscreen
   ══════════════════════════════════════════════════════════════ */

/* ─── Multiselect popover · agora vive em document.body ────── */
/* Removo o scope .diesel pra funcionar quando portalizado */
.cx-ms__pop {
  position: fixed !important;
  z-index: 99999;
  background: #fff;
  border: 1px solid #d4dada;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(29, 59, 58, .35);
  display: flex; flex-direction: column;
  width: 320px;
  overflow: hidden;
  animation: cxMsPopIn .14s ease-out;
  font-family: var(--font-ui);
}
@keyframes cxMsPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cx-ms__head {
  padding: 10px;
  border-bottom: 1px solid #e3e6e6;
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
}
.cx-ms__search {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #c8d0cf;
  border-radius: 4px;
  font-size: var(--fs-base);
}
.cx-ms__search:focus {
  outline: none; border-color: var(--fb-accent, #05AB34);
  box-shadow: 0 0 0 2px rgba(5, 171, 52, .15);
}
.cx-ms__acts { display: flex; gap: 4px; }
.cx-ms__acts button {
  padding: 5px 10px; background: #f7f8f8;
  border: 1px solid #d4dada; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer;
  color: var(--fb-primary, #1D3B3A);
}
.cx-ms__acts button:hover { background: #eef2f1; }
.cx-ms__list {
  list-style: none; padding: 4px 0; margin: 0;
  flex: 1; overflow-y: auto; min-height: 0;
}
.cx-ms__item label {
  display: grid;
  grid-template-columns: 16px 30px 1fr max-content;
  gap: 8px; align-items: center;
  padding: 6px 12px; cursor: pointer; font-size: var(--fs-sm);
  transition: background .1s;
}
.cx-ms__item:hover label { background: rgba(5, 171, 52, .07); }
.cx-ms__item input { margin: 0; cursor: pointer; accent-color: var(--fb-accent, #05AB34); }
.cx-ms__chip {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .04em;
  background: var(--fb-primary, #1D3B3A); color: #fff;
  padding: 2px 5px; border-radius: 3px;
  text-align: center;
}
.cx-ms__lbl { color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-ms__peso {
  font-size: var(--fs-xs); color: #6b7280;
  font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold);
}
.cx-ms__foot {
  padding: 8px 10px; border-top: 1px solid #e3e6e6;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.cx-ms__counter { font-size: var(--fs-xs); color: #6b7280; }
.cx-ms__close {
  padding: 6px 14px;
  background: var(--fb-accent, #05AB34); color: #fff;
  border: 0; border-radius: 4px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}
.cx-ms__close:hover { background: #15803D; }

/* ─── Botão "expandir" no header do chart ───────────────────── */
.diesel .cx-chart__expand {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(5, 171, 52, .1);
  color: var(--fb-accent, #05AB34);
  border: 1px solid rgba(5, 171, 52, .25);
  border-radius: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-ui);
}
.diesel .cx-chart__expand:hover {
  background: var(--fb-accent, #05AB34); color: #fff;
}
.diesel .cx-h4 { display: flex; align-items: center; gap: 8px; }

/* ─── Chart fullscreen modal ────────────────────────────────── */
.cx-chart-fs {
  position: fixed; inset: 0; z-index: 9999;
  font-family: var(--font-ui);
  animation: cxFsIn .2s ease-out;
}
@keyframes cxFsIn { from { opacity: 0; } to { opacity: 1; } }
.cx-chart-fs__bg {
  position: absolute; inset: 0;
  background: rgba(29, 59, 58, .55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.cx-chart-fs__modal {
  position: absolute; inset: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cx-chart-fs__head {
  padding: 18px 24px;
  border-bottom: 1px solid #e3e6e6;
  background: linear-gradient(135deg, var(--primary) 0%, #2a504e 100%);
  color: #fff;
  position: relative;
}
.cx-chart-fs__head h2 {
  margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold);
}
.cx-chart-fs__sub {
  margin-top: 4px; font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .7);
}
.cx-chart-fs__close {
  position: absolute; top: 16px; right: 18px;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, .15);
  color: #fff; border: 0; border-radius: 50%;
  font-size: var(--fs-lg); cursor: pointer;
  transition: background .15s;
}
.cx-chart-fs__close:hover { background: rgba(255, 255, 255, .3); }
.cx-chart-fs__body {
  flex: 1; display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0; overflow: hidden;
}
.cx-chart-fs__chart {
  padding: 24px; overflow-y: auto;
  background: #fafbfb;
}
.cx-chart-fs__chart .cx-chart__expand { display: none; }
.cx-chart-fs__side {
  padding: 20px 22px; overflow-y: auto;
  background: #fff; border-left: 1px solid #e3e6e6;
}
.cx-chart-fs__side h3 {
  margin: 0 0 14px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fb-primary, #1D3B3A);
}

/* Insight cards laterais */
.cx-insight-card {
  display: flex; gap: 12px;
  padding: 12px 14px;
  background: #fafbfb;
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  margin-bottom: 10px;
}
.cx-insight-card.is-ok   { border-left-color: #05AB34; background: #f0fdf4; }
.cx-insight-card.is-neu  { border-left-color: #f59e0b; background: #fffbeb; }
.cx-insight-card.is-warn { border-left-color: #ea580c; background: #fff7ed; }
.cx-insight-card.is-bad  { border-left-color: #dc2626; background: #fef2f2; }
.cx-insight-card__ico { font-size: var(--fs-2xl); flex-shrink: 0; }
.cx-insight-card__corpo { flex: 1; min-width: 0; }
.cx-insight-card__lbl {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .06em;
  color: #6b7280;
  margin-bottom: 2px;
}
.cx-insight-card__val {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--fb-primary, #1D3B3A);
  font-variant-numeric: tabular-nums;
}
.cx-insight-card.is-bad  .cx-insight-card__val { color: #991b1b; }
.cx-insight-card.is-warn .cx-insight-card__val { color: #9a3412; }
.cx-insight-card__hint {
  font-size: var(--fs-xs); color: #4b5563;
  line-height: 1.45; margin-top: 4px;
}

@media (max-width: 980px) {
  .cx-chart-fs__body { grid-template-columns: 1fr; }
  .cx-chart-fs__side { border-left: 0; border-top: 1px solid #e3e6e6; }
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.7.0 (18/05/2026)
   Toggle Mínimo · Pareto · Drilldown cidade · CSS conflitante removido
   ══════════════════════════════════════════════════════════════ */

/* ─── Toggle Mínimo ANP ─────────────────────────────────────── */
.diesel .cx-field--toggle {
  display: flex; align-items: center;
  padding: 0 4px;
}
.diesel .cx-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.diesel .cx-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.diesel .cx-toggle__slider {
  position: relative;
  width: 36px; height: 20px;
  background: #c8d0cf;
  border-radius: 10px;
  transition: background .15s;
  flex-shrink: 0;
}
.diesel .cx-toggle__slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s;
}
.diesel .cx-toggle input:checked + .cx-toggle__slider {
  background: var(--fb-accent, #05AB34);
}
.diesel .cx-toggle input:checked + .cx-toggle__slider::after {
  transform: translateX(16px);
}
.diesel .cx-toggle__lbl {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fb-primary, #1D3B3A);
  letter-spacing: .02em;
}
.diesel .cx-toggle input:focus-visible + .cx-toggle__slider {
  box-shadow: 0 0 0 2px rgba(5, 171, 52, .3);
}

/* ─── Pareto de fornecedores ────────────────────────────────── */
.diesel .cx-pareto { padding: 4px 0; }

.diesel .cx-pareto__resumo {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f7f8f8 0%, #eef2f1 100%);
  border-radius: 8px;
  border-left: 4px solid var(--fb-accent, #05AB34);
}
.diesel .cx-pareto__chip {
  display: flex; flex-direction: column;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-ui);
}
.diesel .cx-pareto__chip--ok   { background: #dcfce7; color: #15803D; }
.diesel .cx-pareto__chip--warn { background: #fed7aa; color: #9a3412; }
.diesel .cx-pareto__chip-lbl {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .06em;
  opacity: .85;
}
.diesel .cx-pareto__chip-val {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.diesel .cx-pareto__chip-val small {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); opacity: .8;
  margin-left: 2px;
}
.diesel .cx-pareto__chip-igual {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: #6b7280;
}
.diesel .cx-pareto__chip-total {
  margin-left: auto;
  font-size: var(--fs-sm); color: #4b5563;
  font-variant-numeric: tabular-nums;
}

.diesel .cx-pareto__t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.diesel .cx-pareto__t thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  border-bottom: 1px solid #e3e6e6;
  background: #f7f8f8;
  position: sticky; top: 0;
}
.diesel .cx-pareto__t thead th.num { text-align: right; }
.diesel .cx-pareto__t tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f2f2;
}
.diesel .cx-pareto__t tbody td.num { text-align: right; }
.diesel .cx-pareto__t tbody tr.cx-pareto__row--80 td {
  background: rgba(5, 171, 52, .04);
}
.diesel .cx-pareto__t tbody tr.cx-pareto__row--80:last-of-type td {
  border-bottom: 2px solid var(--fb-accent, #05AB34);
}
.diesel .cx-pareto__pos {
  font-weight: var(--fw-bold);
  color: #6b7280;
  width: 36px;
}
.diesel .cx-pareto__bar {
  position: relative;
  display: inline-block;
  width: 120px; height: 18px;
  background: #f0f2f2;
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  text-align: right;
}
.diesel .cx-pareto__bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: #c8d0cf;
  transition: width .3s;
}
.diesel .cx-pareto__bar-fill.is-ok  { background: #86efac; }
.diesel .cx-pareto__bar-fill.is-neu { background: #fcd34d; }
.diesel .cx-pareto__bar span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 6px;
  line-height: 18px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #1f2937;
}

/* ─── Mapa popup: 2 CTAs lado a lado ────────────────────────── */
.cx-mapa-pop__ctas {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.cx-mapa-pop__cta--alt {
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
}
.cx-mapa-pop__cta--alt:hover {
  background: rgba(255, 255, 255, .25) !important;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.7.1 (18/05/2026)
   Botão ✕ no popover UF · Aviso de cobertura no drawer cidades
   ══════════════════════════════════════════════════════════════ */

/* Botão ✕ de fechar manual no header do popover UF */
.cx-ms__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid #d4dada;
  border-radius: 4px;
  font-size: var(--fs-sm);
  color: #6b7280;
  cursor: pointer;
  transition: all .12s;
  flex-shrink: 0;
}
.cx-ms__x:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Aviso no drawer "Ver cidades" quando município faltando */
.cx-cidades-aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.cx-cidades-aviso--erro {
  background: #fef2f2;
  border-left: 3px solid #dc2626;
  color: #7f1d1d;
}
.cx-cidades-aviso--warn {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  color: #78350f;
}
.cx-cidades-aviso code {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(0,0,0,.06);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.7.3 (18/05/2026)
   Chips UF inline · substitui popover flutuante (sem mais bugs
   de portal / scroll / órfão). Todas as UFs visíveis ao mesmo
   tempo, click direto pra toggle.
   ══════════════════════════════════════════════════════════════ */

.cx-field--ufs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 100%;
  min-width: 0;
}

.cx-ufs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cx-ufs-lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fb-primary, #1D3B3A);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cx-ufs-counter {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #6b7280;
  background: #f1f4f3;
  padding: 2px 7px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}
.cx-ufs-actions { display: flex; gap: 6px; }
.cx-ufs-btn {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #d4dada;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fb-primary, #1D3B3A);
  cursor: pointer;
  transition: all .12s;
}
.cx-ufs-btn:hover {
  background: #f1f4f3;
  border-color: var(--fb-accent, #05AB34);
  color: var(--fb-accent, #05AB34);
}

.cx-ufchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: #f7f8f8;
  border: 1px solid #e3e6e6;
  border-radius: 6px;
}

.cx-ufchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #d4dada;
  border-radius: 16px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}
.cx-ufchip:hover {
  border-color: var(--fb-accent, #05AB34);
  background: #f0fdf4;
  transform: translateY(-1px);
}
.cx-ufchip__sigla {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--fb-primary, #1D3B3A);
}
.cx-ufchip__peso {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.cx-ufchip.is-on {
  background: var(--fb-primary, #1D3B3A);
  border-color: var(--fb-primary, #1D3B3A);
  box-shadow: 0 2px 6px rgba(29, 59, 58, .25);
}
.cx-ufchip.is-on .cx-ufchip__sigla { color: #fff; }
.cx-ufchip.is-on .cx-ufchip__peso { color: #95dfa7; }
.cx-ufchip.is-on:hover {
  background: var(--fb-accent, #05AB34);
  border-color: var(--fb-accent, #05AB34);
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.7.5 (18/05/2026)
   • Card "Médio Praticado · mês" (Anexo 2)
   • Banner de Anomalias z-score (Anexo 7)
   • Coluna NF na tabela (Anexo 1)
   ══════════════════════════════════════════════════════════════ */

/* Card do mês corrente — destaque dourado discreto */
.cx-kpi.cx-kpi--mes {
  background: linear-gradient(180deg, #fffef7 0%, #fff 100%);
  border-left: 3px solid #d4a017;
}
.cx-kpi.cx-kpi--mes .cx-kpi__lbl { color: #8a6914; }

/* Coluna NF (monoespaçada, pequena) */
.cx-tabela__nf {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: #4b5563;
  letter-spacing: -.02em;
}

/* ── Banner de Anomalias ─────────────────────────────────────── */
.cx-anomalias {
  background: #fef2f2;
  border: 1px solid #fecaca;
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
}
.cx-anomalias.is-open {
  background: #fff;
  border-color: #dc2626;
}

.cx-anomalias__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  transition: background .12s;
}
.cx-anomalias__head:hover { background: rgba(220, 38, 38, .05); }

.cx-anomalias__ico {
  font-size: var(--fs-xl);
  color: #dc2626;
}
.cx-anomalias__titulo {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: #7f1d1d;
  letter-spacing: .01em;
}
.cx-anomalias__badges {
  display: inline-flex;
  gap: 6px;
  margin-left: 4px;
}
.cx-anom-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cx-anom-badge--alta {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.cx-anom-badge--baixa {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}
/* v0.7.7 · Badge crítica (fora banda ANP: abaixo do mín ou acima do máx) */
.cx-anom-badge--critica {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
}
/* Inline (dentro do texto explicativo) — menor */
.cx-anom-badge-inline {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  border-radius: 8px;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.cx-anomalias__hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: #9ca3af;
  font-style: italic;
}
.cx-anomalias__arrow {
  font-size: var(--fs-md);
  color: #6b7280;
  margin-left: 6px;
  transition: transform .15s;
}
.cx-anomalias.is-open .cx-anomalias__arrow { transform: rotate(180deg); }

.cx-anomalias__body {
  padding: 4px 16px 16px;
  border-top: 1px solid #fecaca;
  background: #fff;
}
.cx-anomalias.is-open .cx-anomalias__body { border-top-color: #f3f4f6; }
.cx-anomalias__expl {
  margin: 12px 0;
  padding: 10px 12px;
  background: #f9fafb;
  border-left: 3px solid #6b7280;
  font-size: var(--fs-sm);
  color: #4b5563;
  line-height: 1.55;
  border-radius: 4px;
}
.cx-anomalias__tab tbody tr {
  cursor: pointer;
  transition: background .12s;
}
.cx-anomalias__tab tbody tr:hover { background: #fef2f2; }
/* v0.7.7 · Detalhe das anomalias: contexto ANP por linha.
   v0.7.8: simplificado pra apenas ANP médio + Δ (sem média interna,
   sem banda mín/máx). */
.cx-anom-detalhe {
  font-size: var(--fs-sm);
  color: #4b5563;
  line-height: 1.5;
  padding: 6px 8px;
}
.cx-anom-ctx {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  white-space: nowrap;
}
.cx-anom-ctx--interno { color: #374151; }
.cx-anom-ctx--anp     {
  color: #374151;
  font-size: var(--fs-sm);
}
.cx-anom-ctx__lbl {
  font-weight: var(--fw-semibold);
  color: inherit;
}
.cx-anom-ctx__sep { color: #cbd5e1; }
.cx-anom-ctx__n {
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
  font-size: var(--fs-xs);
}
.cx-anom-ctx__val {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: #111827;
}
/* v0.7.8 · Δ vs ANP médio — destacado, com cor por sinal */
.cx-anom-ctx__delta {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--fs-xs);
}
.cx-anom-ctx__delta.is-neg {
  /* preço acima do ANP — ruim */
  background: #fef2f2;
  color: #991b1b;
}
.cx-anom-ctx__delta.is-pos {
  /* preço abaixo do ANP — bom (ou suspeito) */
  background: #ecfdf5;
  color: #065f46;
}
.cx-anom-ctx__banda {
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
  font-size: var(--fs-xs);
}
.cx-anom-ctx__obs {
  font-style: italic;
  color: #9ca3af;
  font-size: var(--fs-xs);
}
.cx-anom-ctx__badges {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.7.6 (18/05/2026)
   • Botão ⚙ subtabs + modal personalizar (Anexo 4)
   • Layer cidades no mapa por zoom (Anexo 3)
   • Painel Oportunidades por cidade + slider (Anexo 6)
   ══════════════════════════════════════════════════════════════ */

/* ── Botão ⚙ no header de subtabs (Anexo 4) ───────────────────── */
.cx-subtab__config {
  margin-left: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid #d4dada;
  border-radius: 4px;
  font-size: var(--fs-md);
  color: #6b7280;
  cursor: pointer;
  transition: all .12s;
  align-self: center;
}
.cx-subtab__config:hover {
  background: #f1f4f3;
  border-color: var(--fb-accent, #05AB34);
  color: var(--fb-accent, #05AB34);
}

.cx-personalizar__lead {
  margin: 0 0 14px;
  font-size: var(--fs-base);
  color: #4b5563;
  line-height: 1.55;
}
.cx-personalizar__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cx-personalizar__lista li label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e3e6e6;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.cx-personalizar__lista li label:hover {
  background: #f0fdf4;
  border-color: var(--fb-accent, #05AB34);
}
.cx-personalizar__ico { font-size: var(--fs-lg); }
.cx-personalizar__lbl {
  font-weight: var(--fw-semibold);
  color: var(--fb-primary, #1D3B3A);
  font-size: var(--fs-base);
}
.cx-personalizar__hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: #9ca3af;
  font-style: italic;
  line-height: 1.5;
}

/* ── Layer cidades no mapa (Anexo 3) ─────────────────────────── */
.cx-mapa__marker--cidade {
  /* Bolha menor, mais transparente, contorno fino */
}
/* v0.3.1 · Labels de cidade: padrão visual das labels de UF (texto
   branco com text-shadow escuro pra contraste sem precisar de fundo
   sólido). Levemente maior e em negrito pra diferenciar das UF. */
.cx-mapa__marker-lbl--cidade {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.65),
    0 0 4px rgba(0,0,0,.45),
    -1px 0 0 rgba(0,0,0,.35),
     1px 0 0 rgba(0,0,0,.35),
     0 -1px 0 rgba(0,0,0,.35),
     0  1px 0 rgba(0,0,0,.35);
  letter-spacing: .02em;
  white-space: nowrap;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Quando em zoom de cidade, esmaece as bolhas UF maiores */
.cx-mapa--zoom-cidade .cx-mapa__marker:not(.cx-mapa__marker--cidade) {
  opacity: 0.25;
}

/* ── Painel Oportunidades por Cidade (Anexo 6) ───────────────── */
.cx-oport {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cx-oport__resumo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
}
.cx-oport__resumo-card {
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e3e6e6;
  border-radius: 6px;
}
.cx-oport__resumo-card--destaque {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: var(--fb-accent, #05AB34);
  border-left-width: 3px;
}
.cx-oport__resumo-lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #6b7280;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cx-oport__resumo-val {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: #15803D;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.cx-oport__resumo-hint {
  font-size: var(--fs-xs);
  color: #6b7280;
  font-style: italic;
}

.cx-oport__slider-box {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 6px;
}
.cx-oport__slider-lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fb-primary, #1D3B3A);
  margin-bottom: 8px;
}
.cx-oport__slider-out {
  display: inline-block;
  min-width: 50px;
  padding: 2px 8px;
  background: var(--fb-accent, #05AB34);
  color: #fff;
  border-radius: 12px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cx-oport__slider {
  width: 100%;
  height: 6px;
  appearance: none;
  background: linear-gradient(90deg, #f1f4f3, var(--fb-accent, #05AB34));
  border-radius: 3px;
  outline: none;
}
.cx-oport__slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--fb-primary, #1D3B3A);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  cursor: pointer;
}
.cx-oport__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--fb-primary, #1D3B3A);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}
.cx-oport__slider-hint {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: #9ca3af;
  font-style: italic;
}

.cx-oport__tab {
  font-size: var(--fs-sm);
}
.cx-oport__tab thead th {
  background: #fafbfa;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
}
.cx-oport__potencial.is-dim {
  opacity: 0.55;
  font-style: italic;
}
.cx-oport__total {
  font-size: var(--fs-md);
  color: #15803D;
  font-variant-numeric: tabular-nums;
}
.cx-oport__hint {
  margin: 0;
  padding: 10px 12px;
  background: #f9fafb;
  border-left: 3px solid #6b7280;
  border-radius: 4px;
  font-size: var(--fs-sm);
  color: #4b5563;
  line-height: 1.55;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.7.6 (18/05/2026) · CSS faltante
   • Botão ⚙ na nav de subtabs + popover Personalizar (Anexo 4)
   • Marcador "m" e legenda ANP semanal vs mensal na tabela (Anexo 1)
   ══════════════════════════════════════════════════════════════ */

/* Botão ⚙ no canto direito da nav de subtabs */
.cx-subtabs__spacer { flex: 1 1 auto; }
.cx-subtabs__pers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: var(--fs-lg);
  color: #6b7280;
  cursor: pointer;
  transition: all .12s;
  margin-left: auto;
}
.cx-subtabs__pers:hover {
  background: #f1f4f3;
  border-color: #d4dada;
  color: var(--fb-primary, #1D3B3A);
}

/* Popover de Personalizar subtabs */
.cx-pers-pop {
  width: 260px;
  background: #fff;
  border: 1px solid #d4dada;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(29, 59, 58, .18);
  overflow: hidden;
  font-family: var(--font-ui);
}
.cx-pers-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f7f8f8;
  border-bottom: 1px solid #e3e6e6;
}
.cx-pers-pop__titulo {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--fb-primary, #1D3B3A);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cx-pers-pop__x {
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: var(--fs-sm);
  color: #6b7280;
  cursor: pointer;
  border-radius: 4px;
}
.cx-pers-pop__x:hover { background: #fef2f2; color: #dc2626; }
.cx-pers-pop__expl {
  margin: 0;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: #6b7280;
  line-height: 1.5;
  background: #fffef5;
  border-bottom: 1px solid #f3f4f6;
}
.cx-pers-pop__lista { padding: 6px; }
.cx-pers-pop__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .1s;
  font-size: var(--fs-base);
}
.cx-pers-pop__item:hover { background: #f7f8f8; }
.cx-pers-pop__item.is-fixo {
  cursor: default;
  opacity: .85;
}
.cx-pers-pop__item.is-fixo:hover { background: transparent; }
.cx-pers-pop__ico { font-size: var(--fs-md); }
.cx-pers-pop__lbl { font-weight: var(--fw-semibold); color: var(--fb-primary, #1D3B3A); }
.cx-pers-pop__tag {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: #9ca3af;
  font-style: italic;
}

/* Tabela: legenda ANP semanal + marcador m */
.cx-tabela__legenda-anp {
  margin: 0 0 8px;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: #6b7280;
  background: #f0fdf4;
  border-left: 3px solid var(--fb-accent, #05AB34);
  border-radius: 3px;
}
.cx-tabela__fonte-m {
  display: inline-block;
  margin-left: 2px;
  padding: 0 4px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: #92400e;
  background: #fef3c7;
  border-radius: 3px;
  vertical-align: super;
  cursor: help;
}

/* ══════════════════════════════════════════════════════════════
   COMPRAS · v0.8.0 (18/05/2026) — Mapa premium full-width
   ══════════════════════════════════════════════════════════════
   • Ranking removido desta linha → mapa ocupa tudo
   • Toolbar de métrica · painel lateral · mini-KPIs flutuantes
   ══════════════════════════════════════════════════════════════ */

/* v0.8.0.1 · Single column quando linha é full · specificity reforçada.
   A mesma regra também vive em compras.css (que carrega depois) — esta
   aqui é redundância defensiva: se a ordem do cascade mudar no futuro,
   o full-width continua sendo respeitado. */
.compras .cx-row-mapa.cx-row-mapa--full,
.diesel  .cx-row-mapa.cx-row-mapa--full {
  grid-template-columns: 1fr;
}

/* O painel que contém o mapa precisa "espalhar" mesmo sendo grid item.
   Sem isso, em alguns layouts pais o item fica com largura do conteúdo
   mínimo, não preenchendo a coluna. */
.compras .cx-row-mapa--full > .cx-panel--mapa,
.diesel  .cx-row-mapa--full > .cx-panel--mapa {
  min-width: 0;
  width: 100%;
}

/* Container do mapa premium */
.diesel .cx-mapa--v8 {
  background: linear-gradient(180deg, #fafbfb 0%, #f3f6f5 100%);
}
/* Garantir que o mapa--v8 ocupe a largura disponível do painel
   (header h3, legenda, toolbar e centro). Em alguns layouts pais flex
   o filho pode encolher ao conteúdo. */
.diesel .cx-mapa--v8 { width: 100%; }

/* Topo (legenda + botão tela cheia) — quando tem espaço, fica em linha
   única; quando aperta, quebra com graça */
.diesel .cx-mapa--v8 .cx-mapa__topo {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* ─── Toolbar de métrica (toggle tamanho das bolhas) ───────── */
.diesel .cx-mapa__metric {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e3e6e6;
  border-radius: 6px;
  padding: 5px 8px;
  margin: 4px 0 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.diesel .cx-mapa__metric-lbl {
  font-size: var(--fs-xs);
  color: #6b7280;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 4px;
  font-family: var(--font-ui);
}
.diesel .cx-mapa__metric-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fb-primary, #1D3B3A);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all .14s;
}
.diesel .cx-mapa__metric-btn:hover {
  background: rgba(5, 171, 52, .08);
  color: #15803D;
}
.diesel .cx-mapa__metric-btn.is-active {
  background: var(--fb-primary, #1D3B3A);
  color: #fff;
  border-color: var(--fb-primary, #1D3B3A);
}
.diesel .cx-mapa__metric-btn.is-active:hover {
  background: #143030;
}
.diesel .cx-mapa__metric-ico {
  font-size: var(--fs-base);
  line-height: 1;
}

/* ─── Container central (mapa + termômetro lateral) ─────────── */
.diesel .cx-mapa__centro {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e3e6e6;
}
/* Mapa Leaflet full-width: altura 600px (era 480) */
.diesel .cx-mapa--v8 .cx-mapa__centro .cx-mapa__leaflet {
  height: 600px;
  border: 0;
  border-radius: 0;
}
.diesel .cx-mapa--v8.cx-mapa--full .cx-mapa__centro .cx-mapa__leaflet {
  height: calc(100vh - 200px);
}

/* ─── Painel lateral "Termômetro de UFs" (overlay esquerdo) ── */
.diesel .cx-mapa__lateral {
  position: absolute;
  top: 12px; left: 12px;
  width: 264px;
  max-height: calc(100% - 24px);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #d4dada;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(29, 59, 58, .12);
  font-family: var(--font-ui);
  z-index: 600;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.diesel .cx-mapa__lateral-head {
  padding: 10px 12px 4px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
}
.diesel .cx-mapa__lateral-titulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fb-primary, #1D3B3A);
}
.diesel .cx-mapa__lateral-count {
  font-size: var(--fs-xs);
  color: #6b7280;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.diesel .cx-mapa__lateral-sub {
  padding: 0 12px 8px;
  font-size: var(--fs-xs);
  color: #6b7280;
  font-style: italic;
  border-bottom: 1px solid #e5e7eb;
}
.diesel .cx-mapa__lateral-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.diesel .cx-mapa__lateral-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s;
  outline: none;
}
.diesel .cx-mapa__lateral-item:hover,
.diesel .cx-mapa__lateral-item:focus,
.diesel .cx-mapa__lateral-item.is-hover {
  background: rgba(5, 171, 52, .08);
}
.diesel .cx-mapa__lateral-item.is-hover {
  box-shadow: inset 0 0 0 1px rgba(5, 171, 52, .35);
}
.diesel .cx-mapa__lateral-sigla {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  font-family: var(--font-ui);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.diesel .cx-mapa__lateral-mid {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 3px;
}
.diesel .cx-mapa__lateral-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px;
}
.diesel .cx-mapa__lateral-nome {
  font-size: var(--fs-sm);
  color: #1f2937;
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diesel .cx-mapa__lateral-val {
  font-size: var(--fs-xs);
  color: #6b7280;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.diesel .cx-mapa__lateral-bar {
  height: 4px;
  background: #eef2f1;
  border-radius: 2px;
  overflow: hidden;
}
.diesel .cx-mapa__lateral-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .25s ease;
}
.diesel .cx-mapa__lateral-chip {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 3px 7px;
  border-radius: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* ─── Botão de colapso no header do termômetro (v0.8.1) ────── */
.diesel .cx-mapa__lateral-toggle {
  margin-left: 4px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #6b7280;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all .14s;
  font-family: var(--font-ui);
}
.diesel .cx-mapa__lateral-toggle:hover {
  background: rgba(5, 171, 52, .12);
  color: #15803D;
  border-color: rgba(5, 171, 52, .25);
}

/* Painel colapsado: anima largura→0 + opacity. Não esconde com display
   pra animação ficar fluida. pointer-events: none cobre só o painel
   colapsado, a aba de reabrir continua clicável. */
.diesel .cx-mapa__lateral {
  transform-origin: left center;
  transition: transform .25s ease, opacity .2s ease;
}
.diesel .cx-mapa__lateral.is-collapsed {
  transform: translateX(calc(-100% - 16px));
  opacity: 0;
  pointer-events: none;
}

/* Aba estreita pra reabrir o termômetro quando colapsado */
.diesel .cx-mapa__lateral-reopen {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 600;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  width: 36px;
  padding: 12px 0;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #d4dada;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(29, 59, 58, .14);
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--fb-primary, #1D3B3A);
  transition: all .14s;
  opacity: 1;
}
.diesel .cx-mapa__lateral-reopen:hover {
  background: #fff;
  border-color: var(--fb-accent, #05AB34);
  box-shadow: 0 4px 14px rgba(5, 171, 52, .22);
  transform: translateX(2px);
}
.diesel .cx-mapa__lateral-reopen.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
}
.diesel .cx-mapa__lateral-reopen-ico {
  font-size: var(--fs-lg);
  line-height: 1;
}
.diesel .cx-mapa__lateral-reopen-txt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--fb-primary, #1D3B3A);
}

/* Responsivo */
@media (max-width: 1100px) {
  .diesel .cx-mapa__lateral { width: 220px; }
}
@media (max-width: 720px) {
  /* Em mobile o lateral atrapalha — começa colapsado por padrão.
     O botão de reabrir continua acessível. */
  .diesel .cx-mapa__lateral { display: none; }
  .diesel .cx-mapa__lateral-reopen { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   GERAL · v0.4.0 (18/05/2026) — Drawer UF→Cidades rico
   ══════════════════════════════════════════════════════════════
   • API FB Drawer v4 (eyebrow, kpis, tabs)
   • Mini-barras inline · spread chips · insights cards
   ══════════════════════════════════════════════════════════════ */

/* Tabela do drawer — variação compacta com mini-barras */
.fb-drawer .cx-tabela--drw {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
}
.fb-drawer .cx-tabela--drw thead th {
  position: sticky; top: 0;
  background: #f7f8f8;
  border-bottom: 1px solid #d4dada;
  padding: 8px 10px;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fb-primary, #1D3B3A);
}
.fb-drawer .cx-tabela--drw thead th.num { text-align: right; }
.fb-drawer .cx-tabela--drw tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f1;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.fb-drawer .cx-tabela--drw tbody td.num { text-align: right; }
.fb-drawer .cx-tabela--drw tbody tr:hover td { background: rgba(5, 171, 52, .04); }
.fb-drawer .cx-tabela--drw .is-pos { color: #15803D; }
.fb-drawer .cx-tabela--drw .is-neg { color: #c0392b; }
.fb-drawer .cx-drw-pos {
  font-weight: var(--fw-bold);
  color: #6b7280;
  font-size: var(--fs-xs);
  text-align: center;
  width: 28px;
}

/* Intro do tab (resumo curto) */
.fb-drawer .cx-drw-cid__intro {
  padding: 8px 16px 10px;
  font-size: var(--fs-sm);
  color: #6b7280;
  font-family: var(--font-ui);
}
.fb-drawer .cx-drw-cid__intro b {
  color: var(--fb-primary, #1D3B3A);
  font-variant-numeric: tabular-nums;
}
.fb-drawer .cx-drw-cid__warn {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
}

/* Mini-barra inline na célula de volume */
.fb-drawer .cx-drw-bar {
  position: relative;
  height: 18px;
  background: #eef2f1;
  border-radius: 3px;
  overflow: hidden;
  min-width: 90px;
}
.fb-drawer .cx-drw-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #15803D, #22c55e);
  border-radius: 3px;
  opacity: .25;
}
.fb-drawer .cx-drw-bar__lbl {
  position: relative;
  z-index: 1;
  display: block;
  text-align: right;
  padding: 0 6px;
  line-height: 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fb-primary, #1D3B3A);
  font-variant-numeric: tabular-nums;
}

/* Tab Evolução · SVG mini-chart */
.fb-drawer .cx-drw-evol { padding: 12px 16px 8px; }
.fb-drawer .cx-drw-evol__legenda {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  color: #4b5563;
  font-family: var(--font-ui);
}
.fb-drawer .cx-drw-evol__leg {
  display: inline-flex; align-items: center; gap: 6px;
}
.fb-drawer .cx-drw-evol__leg-line {
  width: 20px; height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.fb-drawer .cx-drw-evol__leg-line--dash {
  background: repeating-linear-gradient(90deg, #05AB34 0 5px, transparent 5px 9px) !important;
  height: 3px;
}
.fb-drawer .cx-drw-evol__svg {
  width: 100%; height: auto; display: block;
  background: #fafbfb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px;
}

/* Tab Insights · cards */
.fb-drawer .cx-drw-insights {
  padding: 12px 16px 8px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.fb-drawer .cx-drw-insight {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fafbfb 0%, #f3f6f5 100%);
  border: 1px solid #e3e6e6;
  border-radius: 8px;
  font-family: var(--font-ui);
}
.fb-drawer .cx-drw-insight__ico {
  font-size: var(--fs-2xl);
  line-height: 1;
  text-align: center;
}
.fb-drawer .cx-drw-insight__txt {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: #1f2937;
}
.fb-drawer .cx-drw-insight__txt b { color: var(--fb-primary, #1D3B3A); }

/* ════════════════════════════════════════════════════════════════
   ABASTECIMENTOS · TRATAMENTO DE DUPLICIDADE ENTRE FONTES
   ════════════════════════════════════════════════════════════════
   Painel só renderiza pra cliente que tem grupo duplicado, então
   cliente de fonte única (SE Transportes) não vê nada disso. */

.diesel .abast-dup {
  border-left: 3px solid var(--warn, #C99A2E);
  background: rgba(201, 154, 46, .05);
}
.diesel .abast-dup__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.diesel .abast-dup__contagem {
  font-size: var(--fs-sm);
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.diesel .abast-dup__expl {
  margin: 6px 0 14px;
  font-size: var(--fs-sm);
  color: var(--sub);
  line-height: 1.5;
  max-width: 76ch;
}
.diesel .abast-dup__acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.diesel .abast-dup__spacer { flex: 1 1 auto; }
.diesel .abast-dup__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
.diesel .abast-dup__toggle input { cursor: pointer; }
.diesel .abast-dup__ok {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #2E7D46;
}
.diesel .abast-dup__regra {
  margin: 12px 0 0;
  font-size: var(--fs-xs, .78rem);
  color: var(--sub);
  line-height: 1.5;
}

/* Badge da linha duplicada, ao lado do nome do posto */
.diesel .abast-badge--dup {
  background: rgba(201, 154, 46, .16);
  color: #8a6a1a;
  margin-left: 6px;
}

/* Linha já excluída da análise: legível, mas claramente fora */
.diesel .cx-tabela tbody tr.is-excluida {
  opacity: .45;
}
.diesel .cx-tabela tbody tr.is-excluida td {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, .35);
}
.diesel .cx-tabela tbody tr.is-excluida .abast-td-act {
  text-decoration: none;
  opacity: 1;
}

/* Botão de excluir/restaurar da própria linha */
.diesel .abast-td-act {
  width: 34px;
  text-align: center;
  padding-right: 4px;
}
.diesel .abast-linha-act {
  border: 1px solid var(--div, #E4EAE9);
  background: #fff;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--sub);
  font-size: 12px;
  transition: background .12s, color .12s, border-color .12s;
}
.diesel .abast-linha-act:hover {
  background: rgba(192, 73, 46, .1);
  border-color: rgba(192, 73, 46, .35);
  color: #C0492E;
}

.diesel .cx-btn--danger {
  background: #C0492E;
  border-color: #C0492E;
  color: #fff;
}
.diesel .cx-btn--danger:hover:not(:disabled) { background: #a53d26; }
.diesel .cx-btn--danger:disabled { opacity: .6; cursor: default; }

/* Dropzone com as fontes agrupadas por finalidade (Abastecimentos /
   Referência de preço / Cadastro) — precisa respirar entre as linhas,
   senão vira um parágrafo corrido difícil de varrer. */
.diesel .dropzone__sub {
  line-height: 1.7;
  max-width: 78ch;
  margin: 0 auto;
}
.diesel .dropzone__sub b {
  color: var(--ink, #12242B);
  font-weight: var(--fw-semibold);
}

/* ════════════════════════════════════════════════════════════════
   PALETA FB CONSULT NO MÓDULO DIESEL
   ════════════════════════════════════════════════════════════════
   O módulo nasceu com os tokens do Perito (var(--fb-primary, #1D3B3A) roxo / var(--fb-accent, #05AB34)
   ciano) chumbados em ~130 pontos. GH Logistica e SE Transportes sao
   clientes FB Consult, e a regra da casa e que cliente da consultoria
   leva paleta FB, nao Perito. Aqui ficam as sobreposicoes dos
   componentes onde o roxo aparecia grande e chamava atencao.
   Nao mexe no tokens.css global: quem for cliente Perito direto
   continua com o roxo. */

/* Tokens da marca no escopo do modulo.
   Lidos de --brand-* (que o core/marca.js publica por cliente quando o
   cliente tem cor propria cadastrada) com FALLBACK na paleta FB.
   Hoje todos os clientes do diesel sao clientes FB Consult e tem
   cor_primaria nula, entao caem no fallback. Cliente Perito direto ou
   cliente com marca propria passa a ser respeitado sem tocar aqui.

   Tambem em :root porque drawer, popover de mapa e modal renderizam
   FORA de .diesel — sem isso eles perderiam o token e cairiam so no
   fallback literal. */
/* Tokens da marca no escopo do modulo.
   Lidos de --brand-* (que o core/marca.js publica por cliente quando o
   cliente tem cor propria cadastrada) com FALLBACK na paleta FB.
   Hoje todos os clientes do diesel sao clientes FB Consult e tem
   cor_primaria nula, entao caem no fallback. Cliente com marca propria
   passa a ser respeitado sem precisar tocar aqui de novo. */
:root,
.diesel {
  --fb-primary: var(--brand-primary, #1D3B3A);
  --fb-accent:  var(--brand-accent,  #05AB34);
  --fb-gold:    var(--brand-aux,     #E0BE4F);
}

/* ─── A RAIZ DO ROXO ────────────────────────────────────────────
   Trocar os hex chumbados resolvia so metade do problema: sobravam
   139 usos de var(--primary) e var(--accent) dentro deste arquivo, e
   esses tokens sao definidos no tokens.css global como #381D54 (roxo
   Perito) e #58C8DC (ciano Perito). Todo botao ativo, borda, foco e
   chip que usava o token continuava roxo.

   Em vez de reescrever 139 linhas, o token e redefinido AQUI, no
   escopo do modulo. Nao vaza pra outros modulos e nao mexe no
   tokens.css global — cliente Perito direto em outro modulo continua
   com a identidade dele.

   A lista inclui drawer, modal e popover porque eles renderizam FORA
   de .diesel (append no body): sem estarem aqui, herdariam o roxo do
   :root e ficariam destoando do resto da tela. */
.diesel,
.cx-cidades-drawer,
.cx-chart-fs__modal,
.cx-modal,
.cx-mapa-popup-wrap,
.cx-tabela--drawer,
.cx-rank--drawer,
.drawer {
  --primary:      var(--brand-primary, #1D3B3A);
  --primary-dark: var(--brand-primary-dark, #122726);
  --accent:       var(--brand-accent,  #05AB34);
  --accent-dark:  var(--brand-accent-dark, #048F2B);
}

/* ─── Anexo 1 · Popover de UF no mapa ───────────────────────────
   Era um bloco roxo opaco cobrindo o mapa. Vira vidro claro: o mapa
   continua legivel por tras e o painel deixa de competir com ele. */
.diesel .cx-mapa-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, .93) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--ink, #12242B) !important;
  border: 1px solid rgba(29, 59, 58, .14);
  box-shadow: 0 10px 34px rgba(18, 36, 43, .17);
}
.diesel .cx-mapa-popup-wrap .leaflet-popup-tip {
  background: rgba(255, 255, 255, .93) !important;
  box-shadow: none;
}
.diesel .cx-mapa-popup-wrap .leaflet-popup-content { color: var(--ink, #12242B) !important; }
.diesel .cx-mapa-popup-wrap .leaflet-popup-content b,
.diesel .cx-mapa-popup-wrap .leaflet-popup-content strong { color: var(--fb-primary); }
.diesel .cx-mapa-popup-wrap .leaflet-popup-close-button { color: rgba(18, 36, 43, .5) !important; }
.diesel .cx-mapa-popup-wrap .leaflet-popup-close-button:hover { color: var(--fb-primary) !important; }
/* O conteudo interno do popover foi todo desenhado pra fundo escuro:
   dd em #fff, dt em #cbd5e1, small em #94a3b8, sigla em branco 15% e
   `.cx-mapa-pop__dif { color:#fff !important }`. Trocar so o fundo pra
   claro apagava os valores (branco sobre branco). Cada regra abaixo
   desfaz uma dessas. */

/* Valores da lista — eram #fff */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__dl dd {
  color: var(--ink, #12242B) !important;
}
/* Rotulos — eram #cbd5e1 */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__dl dt {
  color: rgba(18, 36, 43, .58) !important;
}
/* Unidades e percentual — eram #94a3b8 */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__dl dd small,
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__pct {
  color: rgba(18, 36, 43, .48) !important;
}
/* Diferenca e Impacto: tinham !important em #fff. Ficam com o peso
   maximo do popover, agora em tinta escura. */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__dif,
.diesel .cx-mapa-popup-wrap dt.cx-mapa-pop__dif,
.diesel .cx-mapa-popup-wrap dd.cx-mapa-pop__dif,
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__dif b {
  color: var(--fb-primary) !important;
}
/* Sigla da UF: pilula translucida sobre escuro -> chip solido FB */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__sigla {
  background: var(--fb-primary) !important;
  color: #fff !important;
}
/* Nome da UF — era #cbd5e1 */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__nome {
  color: rgba(18, 36, 43, .55) !important;
}
/* Separadores internos, se houver borda herdada de tema escuro */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__dl,
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__ctas {
  border-color: rgba(29, 59, 58, .12) !important;
}
/* CTAs: o primario era var(--fb-accent, #05AB34) (ciano Perito) */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__cta {
  background: var(--fb-accent) !important;
  color: #fff !important;
  border: 1px solid var(--fb-accent) !important;
}
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__cta:hover {
  background: #048f2b !important;
  border-color: #048f2b !important;
}
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__cta--alt {
  background: rgba(29, 59, 58, .07) !important;
  color: var(--fb-primary) !important;
  border: 1px solid rgba(29, 59, 58, .18) !important;
}
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__cta--alt:hover {
  background: rgba(29, 59, 58, .13) !important;
  border-color: rgba(29, 59, 58, .28) !important;
}
/* Badge de status ja tem fundo solido proprio (verde/ambar/laranja/
   vermelho) e continua legivel — so garante o texto branco em cima. */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop__badge { color: #fff !important; }

/* Rede de seguranca: qualquer descendente que ainda tenha sido pintado
   de branco pra tema escuro herda a tinta do popover. Vem por ultimo,
   com seletor fraco, pra nao passar por cima das regras acima. */
.diesel .cx-mapa-popup-wrap .cx-mapa-pop [style*="#fff"],
.diesel .cx-mapa-popup-wrap .cx-mapa-pop [style*="#FFF"] { color: inherit !important; }

/* ─── Anexo 2 · Chips de UF do filtro ───────────────────────────
   Eram 15 pilulas roxas escuras em bloco. Ficam claras por padrao e
   so o estado ativo ganha peso de cor. */
.diesel .cx-ufchip {
  background: rgba(29, 59, 58, .06);
  color: var(--fb-primary);
  border: 1px solid rgba(29, 59, 58, .14);
}
.diesel .cx-ufchip:hover { background: rgba(29, 59, 58, .11); }
.diesel .cx-ufchip.is-on {
  background: var(--fb-primary);
  border-color: var(--fb-primary);
  color: #fff;
}
.diesel .cx-ufchip.is-on .cx-ufchip__peso { color: rgba(255, 255, 255, .72); }
.diesel .cx-ufchip__peso { color: rgba(29, 59, 58, .55); }

/* ─── Anexo 4 · Linha TOTAL da tabela por UF ────────────────────
   Barra roxa cheia virava o elemento mais pesado da tela, disputando
   com os numeros. Vira verde FB. */
.diesel .cx-tabela__total,
.diesel .cx-tabela__total td {
  background: var(--fb-primary) !important;
  color: #fff !important;
}
.diesel .cx-tabela__total td b { color: #fff; }
.diesel .cx-tabela__total .is-neg { color: var(--fb-gold) !important; }
.diesel .cx-tabela__total .is-pos { color: #7BE8A0 !important; }

/* ─── Anexo 5 · Heads-up do chart no hover ──────────────────────
   Substitui o rotulo fixo em cima de cada ponto. Aparece so no hover,
   embaixo do grafico, com a variacao vs mes anterior e vs inicio. */
.diesel .cx-evol__readout {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(29, 59, 58, .045);
  border: 1px solid rgba(29, 59, 58, .1);
  border-left: 3px solid var(--fb-accent);
  font-size: var(--fs-sm);
  animation: fbReadoutIn .14s ease-out;
}
@keyframes fbReadoutIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.diesel .cx-evol__ro-mes {
  font-weight: var(--fw-bold, 700);
  color: var(--fb-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.diesel .cx-evol__ro-val {
  font-weight: var(--fw-semibold);
  color: var(--ink, #12242B);
  font-variant-numeric: tabular-nums;
}
.diesel .cx-evol__ro-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(29, 59, 58, .16);
}
.diesel .cx-evol__ro-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.diesel .cx-evol__ro-item i { font-style: normal; color: var(--sub); font-size: .92em; }
.diesel .cx-evol__ro-item.is-down b { color: var(--fb-accent); }
.diesel .cx-evol__ro-item.is-up   b { color: #C0492E; }
.diesel .cx-evol__ro-item.is-flat b { color: var(--sub); }

/* Rotulo fixo do ponto so aparece no ponto sob o cursor */
.diesel .cx-evol__rot { opacity: 0; transition: opacity .12s; }
.diesel .cx-evol__pt.is-on .cx-evol__rot { opacity: 1; }
.diesel .cx-evol__pt.is-on circle:first-child { r: 6.5; }
.diesel .cx-evol__hit { cursor: crosshair; }

.diesel .cx-evol__legenda {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--sub);
}
.diesel .cx-evol__legenda i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 5px;
}
.diesel .cx-evol__legenda-eixo { margin-left: auto; font-style: italic; opacity: .8; }

/* ─── Anexo 6 · Insights no topo, retrateis ─────────────────────── */
.diesel .cx-insights-top { padding: 0; overflow: hidden; }
.diesel .cx-insights-top__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.diesel .cx-insights-top__head:hover { background: rgba(29, 59, 58, .04); }
.diesel .cx-insights-top__head .cx-h3 { margin: 0; }
.diesel .cx-insights-top__chev { color: var(--sub); font-size: .8rem; }
.diesel .cx-insights-top__corpo { padding: 0 18px 16px; }

/* ─── Nota de metodologia (subtab Interno) ─────────────────────── */
.diesel .cx-nota-metodo {
  margin: 14px 2px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(29, 59, 58, .2);
  background: rgba(29, 59, 58, .035);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
  color: var(--sub);
  line-height: 1.6;
  max-width: 86ch;
}
.diesel .cx-nota-metodo b { color: var(--fb-primary); }

/* ════════════════════════════════════════════════════════════════
   AUDITORIA TAMARA · PONTO 1
   Filtro de período do módulo x filtros operacionais da tela
   ════════════════════════════════════════════════════════════════
   O popover do chip tinha z-index 50; os dropdowns dos filtros da tela
   (.filtro-multi-dropdown) tem 500. Resultado: um controle de MODULO
   perdia empilhamento pra um controle de TELA que fica abaixo dele, e
   os dois se sobrepunham na area de filtros de Distorcoes.

   Correcao em quatro frentes, cobrindo os cinco itens do "ajuste
   esperado" da auditoria. */

/* 1 · Empilhamento. O chip e controle de modulo: fica acima de
   qualquer dropdown de tela, mas abaixo de drawer (9000) e toast. */
.diesel .dchip__pop {
  z-index: 1200;
}

/* 2 · Limites da viewport. Trava a altura no espaco que sobra abaixo
   do chip e rola por dentro, em vez de vazar pra fora da tela em
   resolucao baixa ou zoom alto. */
.diesel .dchip__pop {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 3 · Nada de conteudo coberto. Com o popover aberto, o corpo do
   modulo ganha um respiro do tamanho REAL do painel (--dchip-h,
   medido em runtime pelo periodo.js). Os filtros descem em vez de
   ficarem embaixo do painel. */
.diesel.dchip-aberto .cx-filtros {
  margin-top: calc(var(--dchip-h, 0px) + 10px);
  transition: margin-top .16s ease-out;
}
.diesel .cx-filtros { transition: margin-top .16s ease-out; }

/* 4 · Nenhum ancestral pode recortar o popover. `overflow:hidden` num
   pai anula tudo acima, e o painel aparece cortado pela metade. */
.diesel .dchip,
.diesel .dchip__wrap,
.diesel #dieselChipHost {
  overflow: visible;
}

/* Em tela estreita o popover ancorado a direita estourava a borda.
   Passa a ocupar a largura util com folga nas duas laterais. */
@media (max-width: 720px) {
  .diesel .dchip__pop {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    min-width: 0;
    width: auto;
    max-height: calc(100vh - 180px);
  }
}

/* ════════════════════════════════════════════════════════════════
   REVISAO VISUAL · 28/07/2026
   ════════════════════════════════════════════════════════════════ */

/* ─── Anexo 2 · Badge de duplicidade ────────────────────────────
   Era "⧉ 2x" em ambar. O icone com contador nao dizia QUAL era o
   problema. Agora escreve "possivel duplicata" e usa vermelho, que
   e a cor de pendencia na escala do modulo. */
.diesel .abast-badge--dup {
  background: rgba(220, 38, 38, .1);
  color: #B91C1C;
  border: 1px solid rgba(220, 38, 38, .22);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-semibold);
}

/* ─── Anexo 3 · Cards da Central de Dados ───────────────────────
   O valor estava em --fs-4xl, que em card de 4 colunas estourava:
   "27/07/2026, 18:34" quebrava em duas linhas e desalinhava a
   fileira inteira. Desce dois degraus e o card fica mais compacto. */
.diesel .portal-card {
  padding: 13px 16px;
  gap: 7px;
  border-radius: 10px;
}
.diesel .portal-card .pc-valor {
  font-size: var(--fs-2xl);
  letter-spacing: -.3px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.diesel .portal-card .pc-ico {
  width: 26px;
  height: 26px;
  font-size: var(--fs-sm);
}
.diesel .portal-card .pc-label {
  font-size: var(--fs-2xs, .68rem);
  letter-spacing: .4px;
}
.diesel .portal-card .pc-desc {
  font-size: var(--fs-xs);
  line-height: 1.35;
}
/* (24/08/2026 · retorno da Tamara) A regra que vivia aqui descia o
   valor da variante `.info` um degrau (18px contra 22px). O comentario
   dizia mirar a "data e hora da ultima importacao", mas aquele card e
   `.alert` — quem levava a reducao eram Abastecimentos e Placas unicas,
   os dois `.info` da fileira. Resultado: quatro cards lado a lado com
   dois tamanhos de fonte. Medido no print: 13px de altura de glifo nos
   `.info` contra 16px nos demais.
   O valor longo cabe em 22px (esta assim em producao), entao a regra
   nao tem mais razao de existir e sai. Tamanho unico fica declarado no
   bloco de padronizacao, no fim do arquivo. */

/* ─── Anexos 5 e 6 · Altura dos graficos ────────────────────────
   O chart de evolucao nao cabia na tela junto com a barra de meta e
   a legenda, obrigando a rolar pra ver o fim da serie. */
.cx-evol__svg { max-height: 260px; }
.cx-evol__chart { padding: 2px 0; }
/* No modal de tela cheia sobra altura, mas nao tanta quanto o
   componente pedia: trava no espaco util real da viewport. */
.diesel .cx-drw-evol .cx-evol__svg,
.cx-modal .cx-evol__svg { max-height: min(300px, calc(100vh - 420px)); }

/* ─── Anexo 7 · Leaflet colado no painel lateral ────────────────
   O termometro de UFs ia ate 12px do fundo do mapa e encostava no
   creditos do Leaflet/OpenStreetMap, que fica no canto inferior
   esquerdo. Os dois disputavam o mesmo pixel.
   O painel para acima do creditos e o creditos ganha respiro. */
.diesel .cx-mapa__lateral {
  max-height: calc(100% - 52px);
  box-shadow: 0 4px 16px rgba(18, 36, 43, .14);
}
.diesel .cx-mapa__leaflet .leaflet-control-attribution {
  background: rgba(255, 255, 255, .88);
  padding: 2px 8px;
  border-radius: 4px 0 0 0;
  font-size: 10.5px;
  line-height: 1.5;
}
/* O atribuicao fica ABAIXO do painel no empilhamento: se por algum
   motivo eles se cruzarem, quem some e o creditos, nao o dado. */
.diesel .cx-mapa__leaflet .leaflet-bottom.leaflet-left { z-index: 400; }

/* ════════════════════════════════════════════════════════════════
   DISTORCOES · ABA CORRIGIR (auditoria Tamara, passo 3)
   ════════════════════════════════════════════════════════════════
   Renderiza DENTRO do drawer, que fica fora de .diesel — por isso os
   seletores sao globais e os tokens de marca ja foram publicados nas
   classes de drawer mais acima. */

.dist-corr { font-family: var(--font-ui); }
.dist-corr__loading,
.dist-corr__erro { padding: 22px; color: var(--sub); text-align: center; }
.dist-corr__erro { color: #B91C1C; }

.dist-corr__aviso {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-left: 3px solid var(--fb-accent, #05AB34);
  background: rgba(5, 171, 52, .06);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #374151;
}
.dist-corr__aviso b { color: var(--fb-primary, #1D3B3A); }

.dist-corr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1024px) {
  .dist-corr__grid { grid-template-columns: 1fr; }
}

.dist-corr__grupo {
  border: 1px solid #e3e6e6;
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
}
.dist-corr__grupo legend {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fb-primary, #1D3B3A);
  padding: 0 4px;
}
.dist-corr__campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dist-corr__campo label {
  font-size: 11px;
  color: var(--sub);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dist-corr__campo input,
.dist-corr__campo select {
  border: 1px solid #d4dada;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.dist-corr__campo input:focus,
.dist-corr__campo select:focus {
  outline: none;
  border-color: var(--fb-accent, #05AB34);
  box-shadow: 0 0 0 3px rgba(5, 171, 52, .14);
}
/* Litros e R$/L sao os dois campos que resolvem o caso do galao */
.dist-corr__campo.is-destaque input {
  border-color: var(--fb-accent, #05AB34);
  font-weight: 600;
}
/* Valor total: calculado, nao digitavel */
.dist-corr__campo.is-calc input {
  background: #f3f5f5;
  color: #4b5563;
  cursor: not-allowed;
  font-weight: 700;
}
.dist-corr__lock {
  font-size: 9.5px;
  font-weight: 700;
  color: #6b7280;
  background: #eef1f1;
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: .02em;
}

.dist-corr__ancora {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px dashed #c8d2d2;
  border-radius: 8px;
  background: #fafbfb;
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
  cursor: pointer;
}
.dist-corr__ancora input { margin-top: 2px; flex-shrink: 0; }

/* Painel original x corrigido */
.dist-corr__diff {
  border: 1px solid #e3e6e6;
  border-radius: 10px;
  padding: 14px;
  background: #fbfcfc;
  position: sticky;
  top: 8px;
}
.dist-corr__diff h4 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fb-primary, #1D3B3A);
}
.dist-corr__semdiff { color: var(--sub); font-size: 12.5px; margin: 0; }
.dist-corr__difftab { width: 100%; border-collapse: collapse; font-size: 12px; }
.dist-corr__difftab th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sub);
  border-bottom: 1px solid #e3e6e6;
  padding: 0 6px 5px 0;
}
.dist-corr__difftab td {
  padding: 5px 6px 5px 0;
  border-bottom: 1px solid #f0f2f2;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.dist-corr__difftab .is-antes  { color: #9CA3AF; text-decoration: line-through; }
.dist-corr__difftab .is-depois { color: #15803D; font-weight: 700; }

.dist-corr__acoes {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.dist-corr__acoes .btn-sug { flex: 1 1 auto; }
.dist-corr__acoes .btn-sug--save:disabled { opacity: .45; cursor: default; }

.dist-corr__hist { margin-top: 18px; }
.dist-corr__hist summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--fb-primary, #1D3B3A);
  padding: 8px 0;
}
.dist-corr__hist[open] summary { margin-bottom: 8px; }

/* ════════════════════════════════════════════════════════════════
   AUDITORIA v2 (04/08) · TELA DE ABASTECIMENTOS
   ════════════════════════════════════════════════════════════════ */

/* Painel de duplicidade em 3 grupos: Indicadores | Filtros | Acoes */
.diesel .abast-dup__grupos {
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) minmax(210px, 1fr) minmax(230px, 1.1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 980px) { .diesel .abast-dup__grupos { grid-template-columns: 1fr; } }
.diesel .abast-dup__bloco {
  border: 1px solid rgba(29, 59, 58, .12);
  border-radius: 10px;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, .55);
  display: flex; flex-direction: column; gap: 8px;
}
.diesel .abast-dup__bloco-titulo {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--sub);
}
.diesel .abast-dup__inds { display: flex; gap: 14px; flex-wrap: wrap; }
.diesel .abast-dup__ind b {
  display: block; font-size: var(--fs-xl);
  color: var(--fb-primary, #064d57);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.diesel .abast-dup__ind span { font-size: var(--fs-2xs, 10px); color: var(--sub); }
.diesel .abast-dup__ind.is-pend b { color: #B91C1C; }
.diesel .abast-dup__ind.is-ok b { color: #15803D; }
.diesel .abast-dup__botoes { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.diesel .abast-dup__botoes .cx-btn { justify-content: center; }
.diesel .abast-dup__botoes .cx-btn small { font-weight: 400; opacity: .85; margin-left: 4px; }

/* Linhas: saida suave, aprovada, destaque do fluxo continuo */
.diesel .cx-tabela tbody tr.is-saindo {
  opacity: 0; transition: opacity .22s ease-out;
}
.diesel .cx-tabela tbody tr.is-aprovada td { background: rgba(21, 128, 61, .045); }
.diesel .cx-tabela tbody tr.is-destaque td {
  background: rgba(224, 190, 79, .28);
  transition: background 1.2s ease;
}
.diesel .abast-sit {
  font-size: 10.5px; font-weight: 600; border-radius: 4px;
  padding: 2px 7px; white-space: nowrap;
}
.diesel .abast-sit--exc  { background: rgba(220, 38, 38, .1);  color: #B91C1C; }
.diesel .abast-sit--ok   { background: rgba(21, 128, 61, .12); color: #15803D; }
.diesel .abast-sit--pend { background: rgba(201, 154, 46, .16); color: #8a6a1a; }

/* Header filtravel (ajuste 2) */
.diesel .abast-th { position: relative; padding: 0; }
.diesel .abast-th__btn {
  width: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: inherit; color: inherit;
  padding: 8px 10px; text-align: inherit; white-space: nowrap;
  border-radius: 4px;
}
.diesel .abast-th__btn:hover { background: rgba(29, 59, 58, .07); }
.diesel .abast-th.is-filtrada .abast-th__btn,
.diesel .abast-th.is-ordenada .abast-th__btn { color: var(--fb-primary, #064d57); font-weight: 700; }
.diesel .abast-th__dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fb-accent, #029d66); margin-left: 4px; vertical-align: middle;
}
.diesel .abast-colmenu {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 900;
  min-width: 230px; max-width: 300px;
  background: #fff; border: 1px solid var(--borda, #d4dada);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  padding: 8px; font-weight: 400; text-align: left;
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm);
}
.diesel th.num .abast-colmenu { left: auto; right: 0; }
.diesel .abast-colmenu__ord { display: flex; gap: 4px; margin-bottom: 8px; }
.diesel .abast-colmenu__ord button {
  flex: 1; border: 1px solid #e3e6e6; background: #fff; border-radius: 6px;
  padding: 5px 4px; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.diesel .abast-colmenu__ord button:hover { background: rgba(29, 59, 58, .06); }
.diesel .abast-colmenu__busca {
  width: 100%; border: 1px solid #d4dada; border-radius: 6px;
  padding: 6px 8px; font-size: 12px; margin-bottom: 6px;
}
.diesel .abast-colmenu__lista { max-height: 240px; overflow-y: auto; }
.diesel .abast-colmenu__item {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 4px; border-radius: 5px; cursor: pointer; font-size: 12px;
}
.diesel .abast-colmenu__item:hover { background: rgba(29, 59, 58, .05); }
.diesel .abast-colmenu__lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diesel .abast-colmenu__cnt { color: var(--sub); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.diesel .abast-colmenu__faixa { display: flex; gap: 8px; margin-bottom: 6px; }
.diesel .abast-colmenu__faixa label { flex: 1; font-size: 11px; color: var(--sub); display: flex; flex-direction: column; gap: 3px; }
.diesel .abast-colmenu__faixa input { border: 1px solid #d4dada; border-radius: 6px; padding: 5px 7px; font-size: 12px; width: 100%; }
.diesel .abast-colmenu__acoes { display: flex; gap: 6px; margin-top: 6px; }
.diesel .abast-colmenu__acoes button {
  flex: 1; border: 1px solid #e3e6e6; border-radius: 6px; background: #fff;
  padding: 6px 4px; font-size: 11.5px; cursor: pointer;
}
.diesel .abast-colmenu__acoes [data-menu-act="aplicar"] {
  background: var(--fb-accent, #029d66); border-color: var(--fb-accent, #029d66);
  color: #fff; font-weight: 600;
}

/* Drawer de revisao do sobrevivente (fluxo continuo, ajuste 4) */
.abast-rev__intro { font-size: 13px; line-height: 1.55; color: #374151; margin: 0 0 12px; }
.abast-rev__tab td.is-exc { color: #9CA3AF; text-decoration: line-through; }

/* ════════════════════════════════════════════════════════════════
   GESTAO DE NEGOCIACOES (tela diesel:negociacoes)
   ════════════════════════════════════════════════════════════════
   Reusa a familia visual existente: fieldsets .dist-corr__grupo do
   drawer de correcao, .cx-kpis, .cx-tabela, cx-evol. Nada de
   linguagem nova. */

.diesel .neg-abas {
  display: flex; gap: 4px; margin: 0 0 14px;
  border-bottom: 2px solid rgba(29, 59, 58, .1);
}
.diesel .neg-aba {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-base); font-weight: 600;
  color: var(--sub); padding: 9px 16px 10px;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.diesel .neg-aba:hover { color: var(--fb-primary, #064d57); }
.diesel .neg-aba.is-active {
  color: var(--fb-accent, #029d66);
  border-bottom-color: var(--fb-accent, #029d66);
}

.diesel .neg-filtros { align-items: flex-end; }
.diesel .neg-filtros__busca { min-width: 180px; }
.diesel .neg-filtros__limpar { margin-left: auto; }

.diesel .neg-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; gap: 8px; }

.diesel .neg-form fieldset.dist-corr__grupo { margin-bottom: 12px; }
.diesel .neg-form__obs { grid-column: span 2; }
.diesel .neg-auto { font-size: 10px; color: var(--fb-accent, #029d66); font-weight: 600; }
.diesel .neg-calc {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(29, 59, 58, .045);
  border-left: 3px solid var(--fb-accent, #029d66);
  margin: 4px 0 12px;
}
.diesel .neg-calc__item span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--sub); }
.diesel .neg-calc__item b { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.diesel .neg-calc__anp { border-left: 1px solid rgba(29, 59, 58, .14); padding-left: 18px; }

.diesel .is-eco  { color: #15803D !important; }
.diesel .is-alta { color: #C0392B !important; }
.diesel .neg-mesmo { color: var(--sub); font-size: 11.5px; font-style: italic; }

.diesel .neg-st {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px;
  border-radius: 5px; white-space: nowrap;
}
.diesel .neg-st--and { background: rgba(201, 154, 46, .16); color: #8a6a1a; }
.diesel .neg-st--neg { background: rgba(6, 77, 87, .12);  color: var(--fb-primary, #064d57); }
.diesel .neg-st--imp { background: rgba(2, 157, 102, .14); color: #067a52; }
.diesel .neg-st--enc { background: rgba(107, 114, 128, .14); color: #4b5563; }

.diesel .neg-kpis5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.diesel .neg-linha2 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: -6px; }
.diesel .neg-mini .cx-kpi__val { font-size: var(--fs-xl); }
.diesel .neg-mini.is-ok { border-left: 3px solid var(--fb-accent, #029d66); }
.diesel .cx-kpi--ok { border-left: 3px solid var(--fb-accent, #029d66); }
.diesel .cx-kpi--crit { border-left: 3px solid #C0392B; }

.diesel .neg-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 980px) { .diesel .neg-2col { grid-template-columns: 1fr; } }

.diesel .neg-barras { display: flex; flex-direction: column; gap: 8px; }
.diesel .neg-barra { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; }
.diesel .neg-barra__lbl { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diesel .neg-barra__trilha { background: rgba(29, 59, 58, .07); border-radius: 5px; height: 14px; overflow: hidden; }
.diesel .neg-barra__trilha i { display: block; height: 100%; background: var(--fb-accent, #029d66); border-radius: 5px; }
.diesel .neg-barra__trilha i.is-alta { background: #C0392B; }
.diesel .neg-barra__val { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.diesel .neg-barra__val small { color: var(--sub); }

.diesel .neg-chart__acum { font-size: var(--fs-sm); color: var(--sub); margin-bottom: 6px; }
.diesel .neg-chart__acum b { color: var(--fb-primary, #064d57); font-size: var(--fs-base); }

.diesel .neg-mercado { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.diesel .neg-mercado__card {
  border: 1px solid #e3e6e6; border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: box-shadow .12s;
}
.diesel .neg-mercado__card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.diesel .neg-mercado__posto { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; color: var(--fb-primary, #064d57); }
.diesel .neg-mercado__linha { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.diesel .neg-mercado__linha span { color: var(--sub); }
.diesel .neg-mercado__linha.is-final { border-top: 1px dashed rgba(29, 59, 58, .18); margin-top: 4px; padding-top: 7px; }
.diesel .neg-mercado__linha small { font-weight: 400; color: var(--sub); }

.diesel .neg-insight p { font-size: var(--fs-base); line-height: 1.65; margin: 0; max-width: 90ch; }

/* Pipeline — refeito em 03/09. Antes: rótulo e contagem espremidos na
   mesma linha, barra grossa com toco colorido mesmo em estágio zerado e
   três cores brigando. Agora a contagem é o número que salta, a barra é
   um traço fino de apoio e estágio vazio não pinta nada. */
.diesel .neg-funil { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.diesel .neg-funil__etapa {
  display: grid; grid-template-columns: 190px 44px 1fr 132px;
  gap: 14px; align-items: center; padding: 7px 10px; border-radius: 8px;
  transition: background .18s ease;
}
.diesel .neg-funil__etapa:hover { background: rgba(29, 59, 58, .035); }
@media (max-width: 720px) {
  .diesel .neg-funil__etapa { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .diesel .neg-funil__barra { grid-column: 1 / -1; }
}
.diesel .neg-funil__topo { display: block; font-size: var(--fs-sm, 13px); min-width: 0; }
.diesel .neg-funil__topo b {
  font-weight: var(--fw-semibold, 600); color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.diesel .neg-funil__qtd {
  font-family: var(--font-display); font-size: var(--fs-lg, 18px); font-weight: var(--fw-bold, 700);
  font-variant-numeric: tabular-nums; text-align: right; display: block; line-height: 1;
  color: var(--fb-primary, #064d57);
}
.diesel .neg-funil__barra { background: rgba(29, 59, 58, .06); border-radius: 999px; height: 8px; overflow: hidden; }
.diesel .neg-funil__barra i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--fb-accent, #029d66);
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.diesel .neg-funil__valor {
  font-size: var(--fs-sm, 13px); font-weight: var(--fw-semibold, 600);
  font-variant-numeric: tabular-nums; text-align: right; color: var(--txt);
}
.diesel .neg-funil__valor small { font-weight: 400; color: var(--sub); font-size: var(--fs-2xs, 10.5px); }
/* semântica pela cor do traço e do número, nunca por bloco chapado */
.diesel .neg-funil__etapa.neg-st--and .neg-funil__barra i { background: #C99A2E; }
.diesel .neg-funil__etapa.neg-st--and .neg-funil__qtd { color: #9a7420; }
.diesel .neg-funil__etapa.neg-st--neg .neg-funil__barra i { background: var(--fb-primary, #064d57); }
/* estágio sem nenhuma negociação: presente na leitura, apagado na tela */
.diesel .neg-funil__etapa.is-vazio { opacity: .45; }
.diesel .neg-funil__etapa.is-vazio .neg-funil__qtd { color: var(--sub); }
/* `.neg-st--and` / `.neg-st--neg` são pílulas de status usadas na tabela
   e trazem FUNDO chapado. No funil elas marcam a linha inteira, e o
   bloco colorido atrás da etapa era boa parte do "fora do padrão".
   Aqui a linha é neutra — a cor vive só no traço e no número. */
.diesel .neg-funil__etapa.neg-st--and,
.diesel .neg-funil__etapa.neg-st--neg { background: transparent; color: inherit; }
.diesel .neg-funil__etapa.neg-st--and:hover,
.diesel .neg-funil__etapa.neg-st--neg:hover { background: rgba(29, 59, 58, .035); }

.diesel .neg-det .abast-dl dd small { color: var(--sub); }

/* ─── Revisao pos-subida 05/08: lacunas dos docs da Tamara ─── */
.diesel .abast-td-motor { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diesel .neg-th { cursor: pointer; user-select: none; white-space: nowrap; }
.diesel .neg-th:hover { background: rgba(29, 59, 58, .06); }
.diesel .neg-th.is-ordenada { color: var(--fb-primary, #064d57); font-weight: 700; }
.diesel .neg-barra.is-clicavel { cursor: pointer; border-radius: 6px; }
.diesel .neg-barra.is-clicavel:hover { background: rgba(29, 59, 58, .05); }

/* ════════════════════════════════════════════════════════════════
   AUDITORIA v3 · EDICAO AUDITAVEL DE NEGOCIACOES
   ════════════════════════════════════════════════════════════════
   Renderiza dentro do drawer (fora de .diesel) — seletores globais,
   como no dist-corr da tela de Distorcoes. */

.neg-edit__aviso {
  margin: 0 0 14px; padding: 10px 13px;
  border-left: 3px solid #C99A2E;
  background: rgba(201, 154, 46, .08);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px; line-height: 1.55; color: #374151;
}
.neg-edit__aviso.is-forte {
  border-left-color: #C0392B;
  background: rgba(192, 57, 43, .07);
}
.neg-edit__grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
  gap: 18px; align-items: start;
}
@media (max-width: 1080px) { .neg-edit__grid { grid-template-columns: 1fr; } }
.neg-edit__largo { grid-column: 1 / -1; }

.neg-edit__lado { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 14px; }
.neg-edit__calc, .neg-edit__diff {
  border: 1px solid #e3e6e6; border-radius: 10px; padding: 12px 14px; background: #fbfcfc;
}
.neg-edit__calc h4, .neg-edit__diff h4 {
  margin: 0 0 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fb-primary, #064d57);
}
.neg-edit__calc dl {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 12px; margin: 0; font-size: 12.5px;
}
.neg-edit__calc dt { color: var(--sub); }
.neg-edit__calc dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.neg-edit__calc dd small { font-weight: 400; color: var(--sub); }

.neg-edit__diff .is-derivado td:first-child { color: var(--sub); font-style: italic; }
.neg-edit__diff .is-derivado small {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em;
  background: #eef1f1; border-radius: 3px; padding: 1px 4px; margin-left: 4px;
}
.neg-edit__obrig {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(192, 57, 43, .12); color: #C0392B;
  border-radius: 3px; padding: 1px 5px;
}
.neg-edit__nota { font-size: 11px; color: var(--sub); margin: 8px 0 0; line-height: 1.45; }

/* Modal de confirmacao Antes x Depois */
.neg-conf {
  position: fixed; inset: 0;
  /* Acima do drawer (9000) e ABAIXO do --z-toast (9500) do tokens.css:
     o modal emite toast de erro e ele precisa aparecer por cima. */
  z-index: 9400;
  background: rgba(18, 36, 43, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: negConfIn .14s ease-out;
}
@keyframes negConfIn { from { opacity: 0 } to { opacity: 1 } }
.neg-conf__cx {
  background: #fff; border-radius: 14px; padding: 22px 24px;
  max-width: 620px; width: 100%; max-height: calc(100vh - 60px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28); font-family: var(--font-ui);
}
.neg-conf__cx h3 { margin: 0 0 4px; font-size: 17px; color: var(--fb-primary, #064d57); }
.neg-conf__sub { margin: 0 0 14px; font-size: 12.5px; color: var(--sub); }
.neg-conf__tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.neg-conf__tab th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sub); border-bottom: 1px solid #e3e6e6; padding: 0 8px 6px 0;
}
.neg-conf__tab td { padding: 6px 8px 6px 0; border-bottom: 1px solid #f0f2f2; font-variant-numeric: tabular-nums; }
.neg-conf__tab tr.is-mudou td { background: rgba(224, 190, 79, .1); }
.neg-conf__tab .is-antes { color: #9CA3AF; }
.neg-conf__tab tr.is-mudou .is-antes { text-decoration: line-through; }
.neg-conf__tab .is-depois { font-weight: 700; }
.neg-conf__tab tr.is-mudou .is-depois { color: var(--fb-primary, #064d57); }
.neg-conf__impacto {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 8px;
  background: rgba(29, 59, 58, .05); font-size: 13px;
}
.neg-conf__motivo { margin: 12px 0 0; font-size: 12.5px; color: #374151; }
.neg-conf__check {
  display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0;
  padding: 11px 13px; border: 1px dashed #C0392B; border-radius: 8px;
  background: rgba(192, 57, 43, .04); font-size: 12.5px; line-height: 1.5; cursor: pointer;
}
.neg-conf__check input { margin-top: 2px; flex-shrink: 0; }
.neg-conf__acoes { display: flex; gap: 10px; margin-top: 18px; }
.neg-conf__acoes .btn-sug { flex: 1; }
.neg-conf__acoes .btn-sug--save:disabled { opacity: .45; cursor: default; }

/* Marca de registro editado na tabela */
.diesel .neg-vtag {
  display: inline-block; margin-left: 5px;
  font-size: 9.5px; font-weight: 700;
  background: rgba(29, 59, 58, .1); color: var(--fb-primary, #064d57);
  border-radius: 3px; padding: 1px 4px; vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   AUDITORIA GH v4 · 12/08/2026
   ════════════════════════════════════════════════════════════════
   O bloco da v3 (neg-edit__*, neg-conf*) já está acima; aqui vai só
   o que a v4 acrescenta. Premissas, ajuda e status renderizam DENTRO
   do drawer, que fica fora de .diesel — por isso seletores globais. */

/* ─── Premissas em cards (v4 · item c) ─── */
.neg-foto {
  margin: 0 0 14px; font-size: 11.5px; color: var(--sub); line-height: 1.5;
  padding: 8px 12px; background: #f7f8f8; border-radius: 8px;
}
.neg-foto b { color: var(--fb-primary, #064d57); }
.neg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.neg-card { border: 1px solid #e3e6e6; border-radius: 12px; padding: 14px 16px; background: #fff; }
.neg-card--destaque {
  border-color: var(--fb-accent, #029d66); border-width: 2px;
  box-shadow: 0 4px 16px rgba(2,157,102,.09);
}
.neg-card h4 {
  margin: 0 0 10px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fb-primary, #064d57);
}
.neg-card dl { display: grid; gap: 8px 0; margin: 0; font-size: 13px; }
.neg-card dt { font-size: 10.5px; color: var(--sub); text-transform: uppercase; letter-spacing: .03em; }
.neg-card dd { margin: 0 0 2px; color: #12242B; font-variant-numeric: tabular-nums; }
.neg-card dd small { color: var(--sub); font-size: 11px; }
.neg-seta { color: var(--fb-accent, #029d66); font-weight: 700; margin: 0 4px; }
.neg-manual {
  display: block; margin-top: 3px; font-size: 10px; color: #8a6a1a;
  background: rgba(201,154,46,.14); border-radius: 3px; padding: 1px 5px; width: fit-content;
}

/* Faixa de evolução: o bloco de maior peso visual da aba, porque é o
   que a diretoria lê primeiro. */
.neg-evolucao {
  margin-top: 16px; padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(2,157,102,.07), rgba(6,77,87,.05));
  border: 1px solid rgba(2,157,102,.2);
}
.neg-evolucao h4 {
  margin: 0 0 12px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fb-primary, #064d57);
}
.neg-evolucao__linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 8px 0;
}
.neg-evolucao__linha + .neg-evolucao__linha { border-top: 1px dashed rgba(6,77,87,.18); }
.neg-evolucao__par { display: flex; align-items: center; gap: 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.neg-evolucao__de { color: var(--sub); }
.neg-evolucao__para { font-weight: 700; color: var(--fb-primary, #064d57); }
.neg-evolucao__ganho { font-size: 14px; font-weight: 700; white-space: nowrap; }
.neg-det__extra { margin-top: 16px; }
.neg-det__extra td:first-child { color: var(--sub); width: 200px; }

/* ─── Legendas dos ícones "i" (v4 · itens b e e) ─── */
.neg-ajuda { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 6px 0 0; font-size: 13px; }
.neg-ajuda dt { font-weight: 700; color: var(--fb-primary, #064d57); }
.neg-ajuda dd { margin: 0; color: #374151; line-height: 1.5; }
.diesel .neg-info {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--fb-primary, #064d57);
  background: none; color: var(--fb-primary, #064d57); font-size: 11px; font-weight: 700;
  line-height: 1; cursor: pointer; margin-left: 6px; flex-shrink: 0; align-self: flex-start;
}
.diesel .neg-info:hover { background: var(--fb-primary, #064d57); color: #fff; }
.diesel .dist-corr__campo label { flex-wrap: wrap; }

/* ─── Dias no status / última movimentação (v4 · item e) ─── */
.neg-dias {
  display: inline-block; margin-left: 6px; font-size: 10px;
  color: var(--sub); background: #eef1f1; border-radius: 3px; padding: 1px 5px;
}
.neg-dias.is-alerta { background: rgba(192,57,43,.12); color: #C0392B; font-weight: 600; }

/* ─── Status novos do funil (v4 · item e) ─── */
.diesel .neg-st--agu { background: rgba(201,154,46,.16); color: #8a6a1a; }
.diesel .neg-st--sem { background: rgba(192,57,43,.12); color: #C0392B; }
.diesel .neg-st--can { background: rgba(107,114,128,.14); color: #4b5563; }
.diesel .neg-funil__etapa.neg-st--agu .neg-funil__barra i { background: #C99A2E; }
.diesel .neg-funil__etapa.neg-st--sem .neg-funil__barra i { background: #C0392B; }
.diesel .neg-funil__etapa.neg-st--can .neg-funil__barra i { background: #9CA3AF; }

/* ─── Card de importação: lote que falhou precisa APARECER ───────
   O card mostrava só "X/Y linhas salvas" e engolia o motivo, o que
   fez a Tamara reportar "acho que não está lendo todas as linhas"
   sem ter como saber que era erro de gravação. */
.diesel .diesel-resultado__erros {
  margin-top: 10px;
  padding: 10px 13px;
  border-left: 3px solid #C0392B;
  background: rgba(192, 57, 43, .06);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #7f1d1d;
}
.diesel .diesel-resultado__erros b { color: #C0392B; }
.diesel .diesel-resultado__erros ul {
  margin: 6px 0 0; padding-left: 18px;
}
.diesel .diesel-resultado__erros li {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs, 11px);
  color: #991b1b;
  overflow-wrap: anywhere;
}

/* ─── ANP · a etapa de confirmação precisa gritar ────────────────
   Todo outro arquivo do dropzone importa direto. Só a série da ANP
   tem confirmação, porque a tabela é compartilhada entre clientes.
   Essa diferença custou uma carga: a pessoa arrastou, viu o preview
   e saiu achando que tinha gravado. */
.diesel .anp-sem-preview.is-pendente {
  border: 2px solid #C99A2E;
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(201, 154, 46, .05);
}
.diesel .anp-sem-preview__acao {
  margin: 8px 0 12px;
  padding: 10px 13px;
  border-radius: 8px;
  background: rgba(201, 154, 46, .16);
  color: #6b4e10;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.diesel .anp-sem-preview.is-pendente .cx-btn--primary {
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   AUDITORIA v5 · MOTIVO DA PENDÊNCIA E SEQUÊNCIA DA PLACA
   ════════════════════════════════════════════════════════════════
   Renderiza dentro do drawer, que fica fora de .diesel — seletores
   globais, como no dist-corr. */

/* Aviso de paginação truncada (era silencioso; escondia 200 linhas) */
.diesel .dist-truncado {
  margin: 10px 0 0; padding: 10px 13px;
  border-left: 3px solid #C0392B; background: rgba(192, 57, 43, .06);
  border-radius: 0 8px 8px 0; font-size: var(--fs-sm);
  line-height: 1.55; color: #7f1d1d;
}
.diesel .dist-truncado b { color: #C0392B; }

/* ─── Bloco "Motivo da pendência" ─── */
.dist-motivo {
  margin: 0 0 14px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid #e3e6e6;
  background: #fbfcfc; font-family: var(--font-ui);
}
.dist-motivo--crit  { border-left: 4px solid #C0392B; background: rgba(192,57,43,.04); }
.dist-motivo--warn  { border-left: 4px solid #C99A2E; background: rgba(201,154,46,.05); }
.dist-motivo--alert { border-left: 4px solid var(--fb-primary, #064d57); background: rgba(6,77,87,.04); }

.dist-motivo__cab { display: flex; align-items: flex-start; gap: 11px; }
.dist-motivo__ico { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.dist-motivo__rot {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sub); font-weight: 700;
}
.dist-motivo__titulo {
  margin: 2px 0 0; font-size: 16px; line-height: 1.25;
  color: var(--fb-primary, #064d57);
}
.dist-motivo__cod {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono, monospace); font-size: 10px;
  color: #9CA3AF; background: #f3f5f5;
  border-radius: 4px; padding: 2px 6px;
}
.dist-motivo__ev {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 5px 16px; margin: 12px 0 0; font-size: 13px;
}
.dist-motivo__ev dt { color: var(--sub); }
.dist-motivo__ev dd { margin: 0; font-variant-numeric: tabular-nums; color: #12242B; }
.dist-motivo__ev dd small { color: var(--sub); }
.dist-motivo__ev dd.is-neg b { color: #C0392B; }
.dist-motivo__txt {
  margin: 12px 0 0; font-size: 13px; line-height: 1.6;
  color: #374151; max-width: 80ch;
}
.dist-motivo__mais {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.1);
  font-size: 12px; color: var(--sub);
}

/* ─── Sequência da placa: colunas com respiro (auditoria v5) ─── */
.diesel-tab--seq { border-collapse: separate; border-spacing: 0; }
.diesel-tab--seq th,
.diesel-tab--seq td { padding: 8px 12px; white-space: nowrap; }
.diesel-tab--seq th:first-child,
.diesel-tab--seq td:first-child { padding-left: 14px; }
.diesel-tab--seq th:last-child,
.diesel-tab--seq td:last-child { padding-right: 14px; }
.diesel-tab--seq td.num,
.diesel-tab--seq th.num { text-align: right; font-variant-numeric: tabular-nums; }
.diesel-tab--seq .cel-prod {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; color: #374151;
}
.diesel-tab--seq .diesel-tab__nome,
.diesel-tab--seq .cel-posto { max-width: 170px; white-space: normal; line-height: 1.35; }
.diesel-tab--seq .cel-posto__mun { font-size: 11px; color: var(--sub); }
/* Hodômetro é a coluna da comparação: ganha peso e cor própria */
.diesel-tab--seq .cel-hodo { color: var(--fb-primary, #064d57); }
.diesel-tab--seq tr.is-atual .cel-hodo { background: rgba(6,77,87,.08); border-radius: 4px; }

/* ─── Auditoria v6 · condições substituídas ─── */
.diesel .neg-subst__nota {
  margin: 12px 0 0; font-size: var(--fs-sm); color: var(--sub); line-height: 1.55;
}
.diesel .neg-subst__nota b { color: var(--fb-primary, #064d57); }
.diesel .neg-subst s { color: #9CA3AF; }
.neg-subst__link {
  margin-top: 5px; font-size: 12px; line-height: 1.5; color: #6b4e10;
  background: rgba(201, 154, 46, .12); border-radius: 6px; padding: 7px 10px;
}

/* ─── Auditoria v6 · granularidade, drilldown e volume base ─── */
.diesel .neg-gran {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px;
}
.diesel .neg-gran__lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 700;
}
.diesel .neg-gran__nota { font-size: 11px; color: var(--sub); font-style: italic; margin-left: auto; }
.diesel .neg-drill__volta {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--fb-accent, #029d66); font-weight: 600; text-decoration: underline;
}
.diesel .neg-drill__volta:hover { color: var(--fb-primary, #064d57); }
.diesel .neg-volbase s { color: #9CA3AF; }
.diesel .neg-volbase b { color: var(--fb-primary, #064d57); }
.neg-volbase__alerta {
  margin-top: 4px; font-size: 11px; color: #6b4e10;
  background: rgba(201, 154, 46, .14); border-radius: 5px; padding: 5px 8px;
}

/* ─── Retorno GH 18/08 · validação de volume e rede ─── */
.diesel .cx-btn--mini { padding: 4px 9px; font-size: 11px; }
.diesel .neg-volbase__acoes { display: flex; gap: 5px; white-space: nowrap; }
.diesel .neg-volbase__org {
  display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fb-accent, #029d66); font-weight: 700;
}
.diesel .neg-volbase td small { display: block; color: var(--sub); font-size: 10.5px; }

.diesel .neg-rede label { cursor: pointer; }
.diesel .neg-rede__lista {
  margin-top: 8px; max-height: 260px; overflow-y: auto;
  border: 1px solid #e3e6e6; border-radius: 8px;
}
.diesel .neg-rede__item {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center; padding: 7px 11px;
  border-bottom: 1px solid #f0f2f2; font-size: 12.5px;
}
.diesel .neg-rede__item:last-child { border-bottom: 0; }
.diesel .neg-rede__item:hover { background: rgba(29, 59, 58, .04); }
.diesel .neg-rede__nome { font-weight: 600; }
.diesel .neg-rede__mun { color: var(--sub); font-size: 11px; }
.diesel .neg-rede__vol { font-variant-numeric: tabular-nums; color: var(--fb-primary, #064d57); }
.diesel .neg-rede__vol i { color: var(--sub); font-size: 11px; }
/* Com rede ligada, o posto individual sai de cena sem sumir da tela */
.diesel .dist-corr__campo.is-off { opacity: .4; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════
   AUDITORIA v7 · 18/08/2026
   ════════════════════════════════════════════════════════════════ */

/* ─── Seletor de posto com busca (item 4) ─── */
.diesel .neg-psel { position: relative; }
.diesel .neg-psel__input {
  border: 1px solid #d4dada; border-radius: 6px; padding: 7px 9px;
  font-size: 13px; font-family: inherit; width: 100%;
}
.diesel .neg-psel__input:focus {
  outline: none; border-color: var(--fb-accent, #029d66);
  box-shadow: 0 0 0 3px rgba(2, 157, 102, .14);
}
.diesel .neg-psel__lista {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 400;
  max-height: 280px; overflow-y: auto; background: #fff;
  border: 1px solid #d4dada; border-radius: 8px; margin-top: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.diesel .neg-psel__grupo {
  padding: 6px 11px 4px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--sub);
  background: #f7f8f8; position: sticky; top: 0;
}
.diesel .neg-psel__item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 7px 11px; border: 0; background: none; cursor: pointer;
  text-align: left; font: inherit; font-size: 12.5px;
  border-bottom: 1px solid #f4f6f6;
}
.diesel .neg-psel__item:hover { background: rgba(2, 157, 102, .08); }
.diesel .neg-psel__item.is-sel { background: rgba(6, 77, 87, .07); font-weight: 600; }
.diesel .neg-psel__nome { flex: 1; }
.diesel .neg-psel__mun { color: var(--sub); font-size: 11px; white-space: nowrap; }
.diesel .neg-psel__outro { color: var(--fb-accent, #029d66); font-weight: 600; }
.diesel .neg-psel__vazio { padding: 14px; text-align: center; color: var(--sub); font-size: 12.5px; }

/* ─── Cadastro de redes (item 5) ─── */
.neg-rede-cad { max-width: 640px; }
.neg-rede-cad__lista {
  max-height: 320px; overflow-y: auto; border: 1px solid #e3e6e6;
  border-radius: 8px; margin-top: 8px;
}
.diesel .neg-rede__escolha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.diesel .neg-rede__escolha select { flex: 1; min-width: 180px; }

/* ─── Conciliação do gráfico (item 3) ─── */
.diesel .neg-chart__ok { color: #15803D; font-weight: 700; margin-left: 6px; }
.diesel .neg-chart__dif { color: #C0392B; font-weight: 700; margin-left: 6px; }

/* ─── Drilldown UF → Cidade → Posto (Gestão de Compras item 3) ─── */
.cx-drill-cidade { cursor: pointer; }
.cx-drill-cidade:hover td { background: rgba(6, 77, 87, .05); }
.cx-drill-seta { display: inline-block; width: 12px; color: var(--fb-accent, #029d66); font-size: 10px; }
.cx-drill-qtd {
  font-size: 11px; color: var(--sub); background: #eef1f1;
  border-radius: 4px; padding: 1px 6px;
}
.cx-drill-posto td { background: #fafbfb; font-size: 12px; }
.cx-drill-posto__nome { padding-left: 18px !important; color: #374151; }

/* ─── Postos no card do mapa (Gestão de Compras item 2) ─── */
.cx-mapa-pop__postos summary {
  cursor: pointer; color: var(--fb-accent, #029d66); font-weight: 600; font-size: 12px;
}
.cx-mapa-pop__postos table { width: 100%; margin-top: 6px; font-size: 11px; border-collapse: collapse; }
.cx-mapa-pop__postos td { padding: 3px 4px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.cx-mapa-pop__postos td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════
   CORE tabela-filtros.js NO MÓDULO DIESEL (auditoria v6 · item b)
   ════════════════════════════════════════════════════════════════
   A tabela de Negociações passou a usar o componente compartilhado
   core/tabela-filtros.js, o mesmo de gmedia, caixa, viagens,
   produtividade e prod-motorista. Filtro por coluna, ordenação e
   busca interna passam a ter UM comportamento no sistema inteiro.

   NOTA DE DÍVIDA TÉCNICA: o CSS deste componente é copiado em cada
   módulo que o adota, reescopado no prefixo do módulo (.cxa no caixa,
   .diesel aqui). São 12 regras idênticas em 6 arquivos. O certo seria
   um css/core/tabela-filtros.css carregado uma vez e sem prefixo —
   fica anotado, mas mudar isso agora mexeria em todos os módulos de
   uma vez, o que não cabe nesta entrega. */
.diesel .gmed-aud-th {
  display: flex; align-items: center; gap: 2px; padding: 5px 8px;
}
.diesel .gmed-aud-tab th.num .gmed-aud-th {
  justify-content: flex-end;
}
.diesel .gmed-aud-th__lbl {
  border: none; background: none; cursor: pointer; padding: 3px 2px;
  font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-2, #6b7280); white-space: nowrap;
}
.diesel .gmed-aud-th__lbl:hover {
  color: var(--accent, #029d66);
}
.diesel .gmed-aud-th__lbl i {
  font-style: normal; font-size: 8.5px; color: var(--accent, #029d66);
}
.diesel .gmed-aud-th__f {
  border: none; background: none; cursor: pointer; padding: 3px;
  border-radius: 5px; color: #c3c9cf; display: inline-flex; line-height: 0;
}
.diesel .gmed-aud-th__f:hover {
  color: var(--accent, #029d66); background: rgba(2,157,102,.1);
}
.diesel .gmed-aud-th__f.is-on {
  color: #fff; background: var(--accent, #029d66);
}
.diesel .gm-tab--ciclos th:nth-child(4) .gmed-aud-th {
  justify-content: flex-start;
}
.diesel .gmed-aud-tab th:nth-child(15) .gmed-aud-th {
  justify-content: flex-start;
}
.diesel .cxa-cr__tab th.num .gmed-aud-th { justify-content: flex-end; }
.diesel .cxa-cr__thnome .gmed-aud-th { justify-content: flex-start; }

/* ══════════════════════════════════════════════════════════════
   AUDITORIA GH · 24/08/2026
   1) Ganho vs meta na faixa abaixo do gráfico de evolução
   2) Colunas "último negociado" e "praticado após" no Pareto
   Segue a paleta do módulo: verde bom, âmbar intermediário,
   vermelho ruim. Sem cor de marca chumbada.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Faixa-resumo do ganho vs meta ───────────────────────── */
.diesel .cx-chart__ganho {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1px solid var(--borda, #d4dada);
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfdfc, #f6f9f8);
  font-family: var(--font-ui);
}
.diesel .cx-chart__ganho-tit {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--sub, #6b7280);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.diesel .cx-chart__ganho-tit small {
  font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  text-transform: none; letter-spacing: 0; font-style: italic; opacity: .9;
}
.diesel .cx-chart__ganho-itens {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin-top: 8px;
}
.diesel .cx-chart__ganho-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; border-radius: 8px;
  background: #fff; border: 1px solid #e8ecec;
  border-left-width: 3px;
}
.diesel .cx-chart__ganho-item.is-ok  { border-left-color: #15803D; }
.diesel .cx-chart__ganho-item.is-bad { border-left-color: #c0392b; }
.diesel .cx-chart__ganho-item.is-neu { border-left-color: #cbd5d5; }
.diesel .cx-chart__ganho-lbl {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .05em; color: var(--sub, #6b7280);
}
.diesel .cx-chart__ganho-item b {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.diesel .cx-chart__ganho-item.is-ok  b { color: #15803D; }
.diesel .cx-chart__ganho-item.is-bad b { color: #c0392b; }
.diesel .cx-chart__ganho-item small {
  font-size: var(--fs-2xs); color: var(--sub, #6b7280);
}

/* ── 2 · Pareto: negociado × praticado ───────────────────────── */
.diesel .cx-pareto__chip--neg { background: #e8f1fb; color: #1e4b7a; }
.diesel .cx-pareto__neg-dt {
  display: block; font-size: var(--fs-2xs);
  color: var(--sub, #6b7280); font-weight: var(--fw-medium);
}
.diesel .cx-pareto__sem-neg {
  font-size: var(--fs-2xs); color: #9a3412;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.diesel .cx-pareto__vazio { color: #9ca3af; }
.diesel .cx-pareto__ader {
  display: block; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.diesel .cx-pareto__ader.is-ok   { color: #15803D; }
.diesel .cx-pareto__ader.is-warn { color: #b8923f; }
.diesel .cx-pareto__ader.is-bad  { color: #c0392b; }

/* ══════════════════════════════════════════════════════════════
   PADRONIZAÇÃO DOS CARDS · 24/08/2026 (retorno da Tamara)
   Referência: os portal-cards do módulo de Produtividade da Aperam.

   DIAGNÓSTICO — por que os cards da GH destoavam:
   o uplift-refino.css é carregado DEPOIS dos módulos no index.html e
   marca as variantes com filete lateral:
       .portal-card.info { border-left: 3px solid var(--primary) }
   Como `.diesel .portal-card` tem a MESMA especificidade (0,2,0), quem
   está por último vence — o filete entrava. A Aperam escapa por
   acidente de ordem: o produtividade.css é injetado em runtime pelo
   módulo, então cai depois do refino e ganha o desempate.
   Corrigir mudando a ordem do <link> mexeria no módulo inteiro; aqui a
   correção é por ESPECIFICIDADE (0,3,0), cirúrgica e à prova de ordem.

   O PADRÃO, agora um só para todo o módulo:
     · fundo branco, borda neutra de 1px, raio 10, sombra sutil
     · a semântica vive no CHIP DO ÍCONE e na COR DO VALOR,
       nunca em filete colorido no corpo do card
     · rótulo 2xs bold caixa-alta · valor display 2xl · dica xs
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens do card, num lugar só ─────────────────────────────── */
.diesel {
  --card-pad:    13px 16px;
  --card-raio:   10px;
  --card-borda:  var(--borda-soft, #e8ecec);
  --card-gap:    7px;
}

/* ── 1 · portal-card: fim do filete lateral ───────────────────── */
/* (0,3,0) — vence o uplift-refino sem depender da ordem de carga */
.diesel .portal-card.crit,
.diesel .portal-card.alert,
.diesel .portal-card.warn,
.diesel .portal-card.ok,
.diesel .portal-card.info {
  border-left: 1px solid var(--card-borda);
}

/* ── 2 · cx-kpi fala a mesma língua do portal-card ────────────── */
.diesel .cx-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-pad);
  border: 1px solid var(--card-borda);
  border-radius: var(--card-raio);
  background: var(--card, #fff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(29, 59, 58, .04));
  transition: box-shadow .15s ease, transform .15s ease;
  min-width: 0;
}
.diesel .cx-kpi:hover { box-shadow: var(--shadow, 0 4px 12px rgba(29, 59, 58, .08)); }
.diesel .cx-kpi__lbl {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sub);
}
.diesel .cx-kpi__val {
  margin-top: 0;                      /* o gap do flex já espaça */
  font-size: var(--fs-2xl);
  line-height: 1.08;
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
}
.diesel .cx-kpi__hint {
  margin-top: 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
}

/* Variantes: sem filete no corpo — a cor vai para o VALOR, do mesmo
   jeito que o portal-card faz. Mantém o sinal e devolve a unidade. */
.diesel .cx-kpi--ok,
.diesel .cx-kpi--crit,
.diesel .cx-kpi--dif,
.diesel .cx-kpi--ref { border-left: 1px solid var(--card-borda); }
.diesel .cx-kpi--ok   .cx-kpi__val { color: #059669; }
.diesel .cx-kpi--crit .cx-kpi__val { color: #c0392b; }

/* ── 3 · Chip de ícone, igual ao do portal-card ───────────────── */
.diesel .cx-kpi__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.diesel .cx-kpi__ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
  background: var(--bg);
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}
.diesel .cx-kpi--ok   .cx-kpi__ico { background: #d1fae5; color: #059669; }
.diesel .cx-kpi--crit .cx-kpi__ico { background: #fee2e2; color: #dc2626; }
.diesel .cx-kpi--dif  .cx-kpi__ico { background: #fef3c7; color: #d97706; }
.diesel .cx-kpi__head .cx-kpi__lbl { margin: 0; }

/* ── 4 · Tiles secundários no mesmo padrão ────────────────────── */
.diesel .dist-sug-kpi {
  padding: var(--card-pad);
  border-radius: var(--card-raio);
  border: 1px solid var(--card-borda);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(29, 59, 58, .04));
}
/* O destaque da sugestão vira um véu suave, não um bloco amarelo */
.diesel .dist-sug-kpi--accent {
  background: #fffdf7;
  border-color: #f1e3c4;
}
.diesel .dist-sug-kpi--sugestao.is-valida {
  background: #f7fdf9;
  border-color: #cfe9da;
}
.diesel .dr-kpi {
  background: var(--card, #fff);
  padding: 11px 14px;
  border: 1px solid var(--card-borda);
  border-left: 1px solid var(--card-borda);   /* tira o filete verde */
  border-radius: var(--card-raio);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(29, 59, 58, .04));
}
.diesel .dr-kpi__lbl { letter-spacing: .06em; }
.diesel .pmd-card,
.diesel .cx-oport__resumo-card,
.diesel .postos-kpi {
  border-radius: var(--card-raio);
  border-color: var(--card-borda);
}
.diesel .pmd-card { padding: var(--card-pad); }

/* Grades: mesmo respiro em toda seção */
.diesel .cx-kpis { gap: 12px; }
.diesel .portal-grid { gap: 12px; }

/* ── Tamanho único do valor (24/08 · retorno da Tamara) ────────
   Especificidade (0,3,0) de propósito: alcança as variantes que
   carregam classe própria (.info/.warn/.ok/.alert/.crit) e impede
   que qualquer regra de variante volte a dessincronizar a fileira.
   Uma única exceção, deliberada: os mini-cards da 2ª linha de
   Negociações, que são hierarquia, não inconsistência. */
.diesel .portal-card.info  .pc-valor,
.diesel .portal-card.warn  .pc-valor,
.diesel .portal-card.ok    .pc-valor,
.diesel .portal-card.alert .pc-valor,
.diesel .portal-card.crit  .pc-valor,
.diesel .cx-kpi .cx-kpi__val {
  font-size: var(--fs-2xl);
  line-height: 1.08;
}
.diesel .cx-kpi.neg-mini .cx-kpi__val { font-size: var(--fs-xl); }

/* ══════════════════════════════════════════════════════════════
   MODAL "CADASTRAR NOVA REDE" · 03/09/2026 (pedido da Tamara)
   O modal nasce em document.body, FORA do container `.diesel` — e as
   regras do item estavam escopadas em `.diesel .neg-rede__item`, então
   nenhuma pegava: a lista virava texto corrido, com os postos
   emendados uns nos outros em vez de uma linha cada.
   Aqui as regras vão SEM o escopo, que é o que vale pra drawer, modal
   e popover deste módulo.
   ══════════════════════════════════════════════════════════════ */
.neg-rede-cad__lista { max-height: 340px; }
.neg-rede__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px; align-items: center;
  padding: 7px 11px;
  border-bottom: 1px solid #f0f2f2;
  font-size: 12.5px; cursor: pointer;
}
.neg-rede__item:last-child { border-bottom: 0; }
.neg-rede__item:hover { background: rgba(29, 59, 58, .05); }
.neg-rede__item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.neg-rede__nome {
  font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.neg-rede__mun { color: var(--sub, #6b7280); font-size: 11px; white-space: nowrap; }
.neg-rede__vol { font-variant-numeric: tabular-nums; white-space: nowrap; }
.neg-rede__vol i { font-style: normal; font-size: 10.5px; }
.neg-rede__livre { color: #15803D; }
.neg-rede__trava { color: #b45309; }

/* Posto que já é de outra rede: visível, legível, mas fora de alcance */
.neg-rede__item.is-travado { cursor: not-allowed; background: #fcfcfb; }
.neg-rede__item.is-travado:hover { background: #f7f6f3; }
.neg-rede__item.is-travado .neg-rede__nome { color: var(--sub, #6b7280); font-weight: 500; }
.neg-rede__item.is-travado input[type="checkbox"] { cursor: not-allowed; }

.neg-psel__grupo {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 11px; background: #f4f7f6;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sub, #6b7280);
  border-bottom: 1px solid #e8ecec;
}

/* ══════════════════════════════════════════════════════════════
   BOTÕES DO MÓDULO · 03/09/2026
   `.cx-btn` é usado em 11 lugares do diesel, mas NUNCA teve regra
   base — só as variantes (--danger, --mini). Sem ela o navegador
   desenhava o botão nativo, e "+ Nova negociação" e "Limpar filtros"
   saíam como texto solto. Esta é a base que faltava.
   Vai SEM o escopo `.diesel` de propósito: parte destes botões vive
   em modal, que renderiza em document.body, fora do container.
   ══════════════════════════════════════════════════════════════ */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px;
  font-family: var(--font-ui); font-size: var(--fs-sm, 13px); font-weight: var(--fw-bold, 700);
  line-height: 1.1; white-space: nowrap;
  color: var(--fb-primary, #064d57);
  background: var(--card, #fff);
  border: 1px solid var(--borda, #d4dada);
  border-radius: 9px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.cx-btn:hover:not(:disabled) {
  background: #f4f8f7; border-color: var(--fb-primary, #064d57);
  box-shadow: 0 2px 8px -4px rgba(6, 77, 87, .4);
}
.cx-btn:active:not(:disabled) { transform: translateY(1px); }
.cx-btn:disabled { opacity: .5; cursor: not-allowed; }
.cx-btn:focus-visible { outline: 2px solid var(--fb-accent, #029d66); outline-offset: 2px; }

.cx-btn--primary {
  color: #fff;
  background: var(--fb-primary, #064d57);
  border-color: var(--fb-primary, #064d57);
}
.cx-btn--primary:hover:not(:disabled) {
  background: #08606d; border-color: #08606d; color: #fff;
  box-shadow: 0 4px 12px -4px rgba(6, 77, 87, .55);
}
.cx-btn--mini { padding: 5px 10px; font-size: var(--fs-xs, 12px); border-radius: 7px; gap: 5px; }
.cx-btn--ghost { background: transparent; border-color: transparent; color: var(--sub, #6b7280); }
.cx-btn--ghost:hover:not(:disabled) { background: #f1f5f4; border-color: var(--borda, #d4dada); color: var(--fb-primary, #064d57); }

/* "Limpar filtros" é ação secundária: fantasma até a pessoa mirar nele */
.neg-filtros__limpar { background: transparent; border-color: transparent; color: var(--sub, #6b7280); }
.neg-filtros__limpar:hover:not(:disabled) { background: #f1f5f4; border-color: var(--borda, #d4dada); color: var(--fb-primary, #064d57); }

/* ── Setas de rolagem da tabela (03/09) ─────────────────────────
   A barra de rolagem horizontal nasce no RODAPÉ da tabela; quem lê o
   cabeçalho tinha que descer a página só pra puxar de lado. Estas
   setas ficam no canto superior direito do título e só existem
   quando a tabela realmente transborda. */
.cx-h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-h3 .cx-h3-sub { margin-left: auto; }
.cx-tabnav { display: inline-flex; gap: 4px; margin-left: 10px; flex-shrink: 0; }
.cx-h3 .cx-h3-sub + .cx-tabnav { margin-left: 10px; }
/* O navHorizontal esconde o par de setas com o atributo `hidden` quando
   a tabela cabe na tela. `hidden` (0,0,1) perde para `.cx-tabnav`
   (0,1,0), que declara inline-flex: sem esta regra as setas continuam
   na tela apagadas, sugerindo uma rolagem que não existe. */
.cx-tabnav[hidden] { display: none !important; }
/* Marcação vem do NAV_SETAS_HTML do core: <button data-dir="-1|1">. */
.cx-tabnav button {
  width: 26px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--borda, #d4dada); border-radius: 7px;
  background: var(--card, #fff); color: var(--fb-primary, #064d57);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}
.cx-tabnav button:hover:not(:disabled) { background: #f0f5f4; border-color: var(--fb-primary, #064d57); }
.cx-tabnav button:disabled { opacity: .3; cursor: default; }
.cx-tabnav button:focus-visible { outline: 2px solid var(--fb-accent, #029d66); outline-offset: 1px; }

/* ─── Interno × Externo no layout da casa (24/09/2026) ──────────
   Botões de métrica no topo, legenda logo abaixo, gráfico na largura
   do painel com a régua da Evolução mensal e a tabela comparativa
   embaixo, com linha de TOTAL. */
.diesel .cx-ixe__leg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  font-size: var(--fs-sm); color: var(--sub); margin: 0 0 6px;
}
.diesel .cx-ixe__leg > span { display: inline-flex; align-items: center; }
.diesel .cx-ixe__dif { margin-left: auto; }
.diesel .cx-ixe__dif b { color: var(--txt); margin-left: 4px; }
.diesel .cx-ixe__sw {
  display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle;
  border-top: 2.5px solid #05AB34;
}
.diesel .cx-ixe__sw--int { border-top: 2px dashed #1f2937; }
.diesel .cx-ixe__pt { cursor: pointer; }
.diesel .cx-ixe__pt:hover circle:nth-child(3) { r: 6.5; }
.diesel .cx-ixe__mes { cursor: pointer; }
.diesel .cx-ixe__mes:hover { fill: var(--fb-accent, #05AB34); font-weight: 700; }
.diesel .cx-ixe__tabwrap { margin-top: 12px; max-height: none; }
.diesel .cx-ixe__tab tbody tr { cursor: default; }
.diesel table.cx-tabela.cx-ixe__tab th:nth-child(n),
.diesel table.cx-tabela.cx-ixe__tab td:nth-child(n) { text-align: right; }
.diesel table.cx-tabela.cx-ixe__tab th:first-child,
.diesel table.cx-tabela.cx-ixe__tab td:first-child { text-align: left; }

/* ─── [hidden] tem que esconder (28/09/2026) ────────────────────
   `.dist-corr__campo { display:flex }` (0,1,0) vence o `[hidden]`
   (0,0,1) da folha do navegador, então bloco marcado como oculto no
   JS continuava na tela. Foi assim que o campo manual "Fornecedor /
   posto" aparecia no formulário de negociação. */
.diesel [hidden] { display: none !important; }

/* ━━━ 12/10/2026 · Central: lote de arquivos + conferência com o banco ━━━ */
.diesel .diesel-resultado__item + .diesel-resultado__item,
.diesel .diesel-resultado__item + .diesel-conf,
.diesel .diesel-resultado__erros + .diesel-conf {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.diesel .diesel-conf { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.diesel .diesel-conf__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.diesel .diesel-conf__head strong { font-size: var(--fs-md); color: var(--txt); display: block; }
.diesel .diesel-conf__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft); color: var(--primary);
}
.diesel .diesel-conf__tab { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.diesel .diesel-conf__tab th {
  text-align: left; font-size: var(--fs-xs, 11px); text-transform: uppercase; letter-spacing: .04em;
  color: var(--sub); font-weight: var(--fw-semibold); padding: 6px 8px; border-bottom: 1px solid var(--borda);
}
.diesel .diesel-conf__tab td { padding: 6px 8px; border-bottom: 1px solid var(--borda-soft, var(--borda)); color: var(--txt); }
.diesel .diesel-conf__tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.diesel .diesel-conf__ex { margin: 10px 0 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--txt); line-height: 1.6; }
.diesel .diesel-conf__versao { color: var(--sub); margin-left: 6px; }
.diesel .diesel-conf__nota { margin-top: 8px; font-size: var(--fs-xs, 11px); color: var(--sub); }

/* Distorções · lançamento ausente no arquivo: versão atual e exclusão */
.dist-ausencia__comp { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 12.5px); margin-top: 6px; }
.dist-ausencia__comp th, .dist-ausencia__comp td { padding: 6px 8px; border-bottom: 1px solid var(--borda, #e5e7eb); text-align: left; }
.dist-ausencia__comp th { font-size: var(--fs-xs, 11px); text-transform: uppercase; letter-spacing: .04em; color: var(--sub, #6b7280); }
.dist-ausencia__comp .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ━━━ 13/10/2026 · ícone "i" e balão (padrão de interface). Sem escopo:
   os drawers nascem fora da tela do módulo. ━━━ */
.dsl-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin: 0 0 0 4px;
  border: 0; background: transparent; color: var(--sub, #6b7280);
  vertical-align: -3px; cursor: help; position: relative; border-radius: 50%;
  font: inherit; line-height: 0; text-transform: none; letter-spacing: 0;
}
.dsl-info svg { width: 14px; height: 14px; }
.dsl-info:hover, .dsl-info:focus-visible, .dsl-info.is-open { color: var(--primary); outline: none; }
.dsl-info::after {
  content: attr(data-info);
  position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%);
  width: max-content; max-width: 340px; padding: 8px 11px; border-radius: 8px;
  background: var(--txt, #1C1F26); color: #fff;
  font-family: var(--font, inherit); font-size: 12px; font-weight: 400;
  line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left;
  white-space: normal; box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: var(--z-tooltip, 10000);
}
.dsl-info::before {
  content: ''; position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--txt, #1C1F26);
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: var(--z-tooltip, 10000);
}
.dsl-info:hover::after, .dsl-info:focus-visible::after, .dsl-info.is-open::after,
.dsl-info:hover::before, .dsl-info:focus-visible::before, .dsl-info.is-open::before { opacity: 1; }
.dsl-info.is-left::after { left: auto; right: -6px; transform: none; }
.dsl-info.is-left::before { left: auto; right: 0; transform: none; }

/* ━━━ 13/10/2026 · Distorções no padrão de interface ━━━
   Drawer de investigação claro: sem bloco escuro com degradê, sem faixa
   lateral colorida, sem prosa repetida (a regra de cada flag está no "i"
   do título). A severidade fica no ícone e no selo. */
.dist-diag {
  background: var(--card, #fff);
  color: var(--txt, #1C1F26);
  border: 1px solid var(--borda, #E3E5EA);
  border-radius: 10px;
  padding: 14px 16px;
}
.dist-diag__head { color: var(--sub, #6b7280); }
.dist-diag__body { color: var(--txt, #1C1F26); font-size: var(--fs-base, 14px); }
.dist-diag__body b { color: var(--txt, #1C1F26); }
.dist-motivo--crit, .dist-motivo--warn, .dist-motivo--alert {
  border-left: 1px solid var(--borda, #E3E5EA);
  background: var(--card, #fff);
}
.dist-alerta-amarelo {
  background: rgba(233, 185, 73, .10);
  border: 1px solid rgba(202, 138, 4, .35);
  border-left-width: 1px;
}
.dist-flag-item, .dist-flag-item--crit, .dist-flag-item--warn, .dist-flag-item--alert {
  border-left: 1px solid var(--borda, #E3E5EA);
}
.dist-flag-item__head { display: flex; align-items: center; gap: 6px; }
.dist-flag-item__head .dist-flag-item__sev { margin-left: auto; }
.dist-motivo__titulo { display: inline-flex; align-items: center; gap: 2px; }
.dist-ausencia__comp { margin: 10px 0 6px; }
.dist-ausencia__comp .num { text-align: center; }
.dist-ausencia__comp td[colspan] { color: var(--sub, #6b7280); }

/* ━━━ 13/10/2026 · Central de Dados no padrão de interface ━━━ */
.diesel .diesel-resultado { border-left: 1px solid var(--borda, #E3E5EA); }
.diesel .diesel-resultado__erros { border-left: 1px solid rgba(192, 57, 43, .35); border-radius: 8px; }
.diesel .diesel-conf__ico.is-warn { color: var(--warn, #b45309); }
.diesel .diesel-conf__ico.is-ok { color: var(--ok, #15803d); }
.diesel .diesel-conf__head strong { display: inline-flex; align-items: center; gap: 2px; }
.diesel .diesel-conf__tab .num { text-align: center; }
.diesel .diesel-conf__tab th.num { text-align: center; }
.diesel .diesel-conf__tab--ex { margin-top: 12px; }
.diesel .diesel-conf__tab td { vertical-align: middle; }
.diesel .fonte-section__head h3 { display: inline-flex; align-items: center; gap: 2px; }

/* 13/10/2026 · Abastecimentos: nome do motorista quebra linha
   em vez de cortar com reticência (padrão de interface). */
.diesel .cx-tabela td.abast-td-motor {
  white-space: normal; overflow: visible; text-overflow: clip; max-width: 200px; min-width: 140px;
}
/* 13/10/2026 · cabeçalho de seção sem faixa lateral na cor da marca */
.diesel .fonte-section__head { border-left: 1px solid var(--borda, #E3E5EA); }

/* ─── Balão do "i" e do [data-tip] (13/10/2026) ──────────────────────────
   O balão saiu do pseudo-elemento (que o overflow do cartão cortava) e
   passou a ser um elemento no <body>, com posição fixa, desenhado por
   wireInfo() em icones.js. Sem escopo de módulo: ele vive fora dele. */
.dsl-info::after, .dsl-info::before,
.diesel [data-tip]:hover::after, .diesel [data-tip]:focus-visible::after,
.diesel [data-tip]:hover::before, .diesel [data-tip]:focus-visible::before { content: none !important; display: none !important; }
.dsl-balao {
  position: fixed; z-index: 10050; left: 0; top: 0;
  width: max-content; max-width: 360px;
  padding: 8px 11px; border-radius: 8px;
  background: var(--txt, #1f2937); color: #fff;
  font-family: var(--font-ui, inherit); font-size: 12px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
.dsl-balao.on { opacity: 1; visibility: visible; }
.dsl-balao::before {
  content: ''; position: absolute; left: var(--seta, 50%); top: -5px; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--txt, #1f2937);
}
.dsl-balao.cima::before { top: auto; bottom: -5px; border-bottom: 0; border-top: 5px solid var(--txt, #1f2937); }

/* ─── 14/10/2026 · Volume a validar abre a negociação; Distorções com
   cabeçalho que ordena e filtra (números centralizados) ─── */
.diesel tr[data-neg-abrir] { cursor: pointer; }
.diesel tr[data-neg-abrir]:hover td { background: rgba(29, 59, 58, .04); }
.diesel .diesel-tab--dist th.num .gmed-aud-th { justify-content: center; }
.diesel .diesel-tab--dist td.num { text-align: center; }
.diesel .diesel-tab--dist th .gmed-aud-th { padding: 5px 4px; }
.diesel .diesel-tabela .fb-pag { margin-top: 10px; }
/* Rede no destino da transferência (14/10/2026): linha própria, largura
   inteira, unidades em colunas; o nome da unidade quebra linha. */
.diesel .neg-rede--dest { grid-column: 1 / -1; }
.diesel .neg-rede--dest .neg-rede__escolha { max-width: 640px; }
.diesel .neg-rede--dest .neg-rede__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 18px; max-height: 280px; }
.diesel .neg-rede--dest .neg-rede__item { border-bottom: 1px solid var(--borda-soft, #eef0f2); }
.diesel .neg-rede--dest .neg-rede__nome { white-space: normal; overflow: visible; text-overflow: clip; }
.diesel .neg-rede--dest .neg-rede__lista { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.diesel .neg-rede--dest .neg-rede__item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 1px; column-gap: 10px; }
.diesel .neg-rede--dest .neg-rede__item input[type="checkbox"] { grid-column: 1; grid-row: 1 / span 2; }
.diesel .neg-rede--dest .neg-rede__nome { grid-column: 2; grid-row: 1; }
.diesel .neg-rede--dest .neg-rede__mun { grid-column: 2; grid-row: 2; }
.diesel .neg-rede--dest .neg-rede__vol { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
/* rótulo das barras de Negociações quebra linha em vez de cortar (14/10/2026) */
.diesel .neg-barra__lbl { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* KPI de Negociações: número não quebra; abaixo de 1360px a fileira de 6
   vira duas de 3, para o valor caber inteiro (14/10/2026) */
.diesel .neg-kpis5 .cx-kpi__val { white-space: nowrap; }
@media (max-width: 1360px) {
  .diesel .cx-kpis.neg-kpis5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ═══ RELIFT 21/10/2026 ═══════════════════════════════════════════
   Gráficos no padrão (core/grafico.js), tabelas com cabeçalho inteligente,
   total claro, termômetro sem corte, Oportunidades numa linha só. */
.diesel .diesel-vis { width: 100%; display: block; }
.diesel .diesel-vis + .pd-legenda, .diesel .diesel-vis .pd-legenda { margin-top: 6px; }
.diesel .diesel-tabhost { width: 100%; }

/* tabela inteligente: cabeçalho congelado, 1ª coluna fixa, números ao centro */
.diesel .diesel-tabela--int {
  border: 1px solid var(--borda); border-radius: 10px; background: var(--card, #fff);
  overflow: auto; max-height: 72vh;
}
.diesel .diesel-tab--int { border-collapse: separate; border-spacing: 0; width: 100%; }
.diesel .diesel-tab--int thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-soft);
  border-bottom: 1px solid var(--borda); text-align: center; vertical-align: middle;
}
.diesel .diesel-tab--int th:first-child, .diesel .diesel-tab--int td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--card, #fff); text-align: left;
}
.diesel .diesel-tab--int thead th:first-child { z-index: 3; background: var(--bg-soft); }
.diesel .diesel-tab--int th.num, .diesel .diesel-tab--int td.num,
.diesel .diesel-tab--int th.num:first-child, .diesel .diesel-tab--int td.num:first-child { text-align: center; }
.diesel .diesel-tab--int td { white-space: normal; overflow-wrap: break-word; border-top: 1px solid var(--borda-soft); }
.diesel .diesel-tab--int td.num { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.diesel .diesel-tab--int tbody tr:first-child td { border-top: 0; }
.diesel .diesel-tab--int tbody tr.is-clicavel { cursor: pointer; }
.diesel .diesel-tab--int tbody tr:hover td { background: #F8F9FA; }
.diesel .diesel-tab--int tfoot td {
  position: sticky; bottom: 0; background: var(--bg-soft); color: var(--txt);
  font-weight: 600; border-top: 1px solid var(--borda);
}
.diesel .diesel-tabela--int + .fb-pag { margin-top: 10px; }

/* linha de total clara (era faixa escura na cor da marca) */
.diesel .cx-tabela__total, .diesel .cx-tabela__total td {
  background: var(--bg-soft) !important; color: var(--txt) !important;
}
.diesel .cx-tabela__total td b { color: var(--txt) !important; }
.diesel .cx-tabela__total .is-neg, .diesel .cx-tabela__total .is-neg b { color: var(--neg, #DB5A4B) !important; }
.diesel .cx-tabela__total .is-pos, .diesel .cx-tabela__total .is-pos b { color: var(--pos, #34A853) !important; }

/* Interno × Externo: números ao centro, amostra cheia na cor da linha do gráfico */
.diesel table.cx-tabela.cx-ixe__tab th:nth-child(n),
.diesel table.cx-tabela.cx-ixe__tab td:nth-child(n) { text-align: center; }
.diesel table.cx-tabela.cx-ixe__tab th:first-child,
.diesel table.cx-tabela.cx-ixe__tab td:first-child { text-align: left; }
.diesel .cx-ixe__sw { width: 14px; height: 4px; border: 0 !important; border-radius: 2px; background: var(--accent); }
.diesel .cx-ixe__sw--int { background: var(--primary); }
.diesel .cx-ixe__sw--ext { background: var(--accent); }

/* termômetro de UFs: o nome quebra, não corta */
/* o termômetro fica acima do mapa (que empilha isolado), mas abaixo do menu lateral do shell (z 80):
   com 600 ele passava por cima do menu quando o menu abria ao passar o mouse */
.diesel .cx-mapa__lateral, .diesel .cx-mapa__lateral-reopen { z-index: 5; }
.diesel .cx-mapa__lateral-row { flex-wrap: wrap; align-items: baseline; }
.diesel .cx-mapa__lateral-nome { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; flex: 1 1 auto; }
.diesel .cx-mapa__lateral-val { margin-left: auto; }

/* gráfico mensal do Externo */
.diesel .cx-chart__sub { font-size: var(--fs-sm); color: var(--sub); margin: 14px 0 2px; }
.diesel .cx-chart__meta { background: var(--card, #fff) !important; border: 1px solid var(--borda) !important; }
.diesel .cx-chart__meta-legend i { border-radius: 2px; }
.diesel .cx-chart__tooltip { z-index: 5; pointer-events: none; }
.diesel .cx-toggle input[type="checkbox"] { width: 1px !important; height: 1px; min-width: 0; margin: 0; overflow: hidden; }

/* Pareto: sem borda lateral colorida */
.diesel .diesel-tab--int tbody tr.cx-pareto__row--80 td { background: #F6FBF8; }
.diesel .cx-pareto__resumo { border-left: 0 !important; background: var(--bg-soft) !important; }

/* Oportunidades: dois números e a simulação numa linha só */
.diesel .cx-oport { display: flex; flex-direction: column; gap: 14px; }
.diesel .cx-oport__topo {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.2fr) minmax(300px, 2fr);
}
.diesel .cx-oport__topo .cx-oport__resumo-card,
.diesel .cx-oport__topo .cx-oport__slider-box {
  background: var(--card, #fff); border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; margin: 0;
}
.diesel .cx-oport__topo .cx-oport__resumo-lbl { display: inline-flex; align-items: center; gap: 4px; }
.diesel .cx-oport__topo .cx-oport__resumo-val { font-size: 24px; margin: 4px 0 0; color: var(--txt); white-space: nowrap; }
.diesel .cx-oport__topo .cx-oport__resumo-val.is-pos { color: var(--pos, #15803D); }
.diesel .cx-oport__slider-lbl { margin-bottom: 6px; gap: 10px; }
.diesel .cx-oport__slider { height: 4px; }
.diesel .cx-oport__slider-escala { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--sub); margin-top: 4px; }
.diesel .cx-oport__sub { font-size: var(--fs-xs); color: var(--sub); font-weight: 400; }
.diesel .cx-oport__sub--linha { display: block; margin-top: 2px; }
@media (max-width: 1100px) {
  .diesel .cx-oport__topo { grid-template-columns: 1fr 1fr; }
  .diesel .cx-oport__topo .cx-oport__slider-box { grid-column: 1 / -1; }
}

/* Positivação (só GH): cabeçalho claro como o resto do sistema, cartão liso */
.pmd .pmd-hero { background: transparent !important; color: var(--txt) !important; padding: 0 0 4px !important; border-radius: 0 !important; }
.pmd .pmd-hero h1 { color: var(--txt) !important; }
.pmd .pmd-hero__sub { color: var(--sub) !important; }
.pmd .pmd-card::before { display: none !important; }