/* ══════════════════════════════════════════════════════════════
   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(88, 200, 220,.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: var(--fs-xs);
  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: var(--fs-xs);
  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(88, 200, 220,.18));
}
.diesel .chart-wrap .dot {
  fill: #58c8dc;
  stroke: #fff;
  stroke-width: 1.5;
  cursor: pointer;
  transition: r .14s, stroke-width .14s, filter .14s;
  filter: drop-shadow(0 1px 2px rgba(88, 200, 220,.4));
}
.diesel .chart-wrap .dot:hover {
  r: 5.5;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(88, 200, 220,.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, #3a9fb3));
}
.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, #3a9fb3); }
.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(88, 200, 220,.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(88, 200, 220,.12);   color: var(--accent-dark, #3a9fb3); 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(88, 200, 220,.12);   color: var(--accent-dark, #3a9fb3); }
.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(88, 200, 220,.08);  border-left-color: var(--accent); color: var(--accent-dark, #3a9fb3); }
.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, #3a9fb3);
  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, #3a9fb3); }
.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, #3a9fb3));
  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(88, 200, 220,.12);   color: var(--accent-dark, #3a9fb3); }
.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(56, 29, 84,.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, #3a9fb3); }
.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(88, 200, 220,.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 #381d54; }
.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, #3a9fb3); }
.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(88, 200, 220, .25);
}
.btn-cta:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(88, 200, 220, .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: #381d54 primary, #58c8dc 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: #381d54;
  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: #381d54;
  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(56, 29, 84, 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: #381d54;
  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: #381d54;
}

.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(56, 29, 84, .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(56, 29, 84, .08); color: var(--primary); }
.diesel .abast-badge--ext { background: rgba(88, 200, 220, .12); color: #3a9fb3; }

/* ─── 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: #381d54;
  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(56, 29, 84, .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: #58c8dc; }
.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(88, 200, 220, .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(88, 200, 220, .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(88, 200, 220, .07); transform: translateX(2px); }
.cx-rank__row:focus { outline: none; box-shadow: 0 0 0 2px #58c8dc; }
.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: #381d54;
  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: #58c8dc;
  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 #58c8dc;
}
.nf-section:nth-child(2) { border-left-color: #381d54; }
.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: #381d54;
  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(56, 29, 84, .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: #381d54;
  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: #3a9fb3; }

/* ─── 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 #58c8dc; }
.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: #58c8dc;
}

/* 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: #381d54;
  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: #3a9fb3; 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: #3a9fb3; }
.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: #381d54;
  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 #381d54: 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: #381d54; }

/* 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: #58c8dc;
  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: #381d54;
  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: #58c8dc; color: #3a9fb3; }
.cx-rank2__btn.is-active {
  background: #58c8dc;
  border-color: #58c8dc;
  color: #fff;
  box-shadow: 0 1px 3px rgba(88, 200, 220,.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: #3a9fb3; }
.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: #3a9fb3; 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: #58c8dc; color: #3a9fb3; }
.cx-evol__btn.is-active {
  background: #58c8dc;
  border-color: #58c8dc;
  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: #3a9fb3;
  letter-spacing: .02em;
}
.cx-chart__meta-val {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #3a9fb3;
  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,
    #3a9fb3 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 #3a9fb3;
  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 #3a9fb3;
  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: #381d54;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.diesel-old .cx-ms__trigger:hover { border-color: #58c8dc; }
.diesel-old .cx-ms__trigger[aria-expanded="true"] {
  border-color: #58c8dc;
  box-shadow: 0 0 0 3px rgba(88, 200, 220, .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: #58c8dc;
  box-shadow: 0 0 0 2px rgba(88, 200, 220, .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: #381d54;
}
.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(88, 200, 220, .07); }
.diesel-old .cx-ms__item input { margin: 0; cursor: pointer; accent-color: #58c8dc; }
.diesel-old .cx-ms__chip {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .04em;
  background: #381d54; 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: #58c8dc; 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: #3a9fb3; }

/* ─── 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: #381d54;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.diesel .cx-mapa__toolbar button:hover { background: rgba(88, 200, 220, .12); }
.diesel .cx-mapa__toolbar button:active { background: rgba(88, 200, 220, .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: #381d54;
  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: #3a9fb3; }
.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: #381d54;
  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: #381d54; }
.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: #58c8dc;
  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: #3a9fb3; }

/* Leaflet zoom controls — alinhar com paleta */
.diesel .leaflet-control-zoom a {
  background: #fff;
  color: #381d54;
  border: 1px solid #d4dada;
}
.diesel .leaflet-control-zoom a:hover { background: #f7f8f8; color: #58c8dc; }

/* ─── 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(56, 29, 84, .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: #58c8dc;
  box-shadow: 0 0 0 2px rgba(88, 200, 220, .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: #381d54;
}
.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(88, 200, 220, .07); }
.cx-ms__item input { margin: 0; cursor: pointer; accent-color: #58c8dc; }
.cx-ms__chip {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .04em;
  background: #381d54; 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: #58c8dc; color: #fff;
  border: 0; border-radius: 4px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}
.cx-ms__close:hover { background: #3a9fb3; }

/* ─── Botão "expandir" no header do chart ───────────────────── */
.diesel .cx-chart__expand {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(88, 200, 220, .1);
  color: #58c8dc;
  border: 1px solid rgba(88, 200, 220, .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: #58c8dc; 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(56, 29, 84, .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: #381d54;
}

/* 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: #381d54;
  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: #58c8dc;
}
.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: #381d54;
  letter-spacing: .02em;
}
.diesel .cx-toggle input:focus-visible + .cx-toggle__slider {
  box-shadow: 0 0 0 2px rgba(88, 200, 220, .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 #58c8dc;
}
.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: #3a9fb3; }
.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(88, 200, 220, .04);
}
.diesel .cx-pareto__t tbody tr.cx-pareto__row--80:last-of-type td {
  border-bottom: 2px solid #58c8dc;
}
.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: #381d54;
  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: #381d54;
  cursor: pointer;
  transition: all .12s;
}
.cx-ufs-btn:hover {
  background: #f1f4f3;
  border-color: #58c8dc;
  color: #58c8dc;
}

.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: #58c8dc;
  background: #f0fdf4;
  transform: translateY(-1px);
}
.cx-ufchip__sigla {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: #381d54;
}
.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: #381d54;
  border-color: #381d54;
  box-shadow: 0 2px 6px rgba(56, 29, 84, .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: #58c8dc;
  border-color: #58c8dc;
}

/* ══════════════════════════════════════════════════════════════
   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: #58c8dc;
  color: #58c8dc;
}

.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: #58c8dc;
}
.cx-personalizar__ico { font-size: var(--fs-lg); }
.cx-personalizar__lbl {
  font-weight: var(--fw-semibold);
  color: #381d54;
  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: #58c8dc;
  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: #3a9fb3;
  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: #381d54;
  margin-bottom: 8px;
}
.cx-oport__slider-out {
  display: inline-block;
  min-width: 50px;
  padding: 2px 8px;
  background: #58c8dc;
  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, #58c8dc);
  border-radius: 3px;
  outline: none;
}
.cx-oport__slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: #381d54;
  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: #381d54;
  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: #3a9fb3;
  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: #381d54;
}

/* Popover de Personalizar subtabs */
.cx-pers-pop {
  width: 260px;
  background: #fff;
  border: 1px solid #d4dada;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(56, 29, 84, .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: #381d54;
  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: #381d54; }
.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 #58c8dc;
  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: #381d54;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all .14s;
}
.diesel .cx-mapa__metric-btn:hover {
  background: rgba(88, 200, 220, .08);
  color: #3a9fb3;
}
.diesel .cx-mapa__metric-btn.is-active {
  background: #381d54;
  color: #fff;
  border-color: #381d54;
}
.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(56, 29, 84, .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: #381d54;
}
.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(88, 200, 220, .08);
}
.diesel .cx-mapa__lateral-item.is-hover {
  box-shadow: inset 0 0 0 1px rgba(88, 200, 220, .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(88, 200, 220, .12);
  color: #3a9fb3;
  border-color: rgba(88, 200, 220, .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(56, 29, 84, .14);
  cursor: pointer;
  font-family: var(--font-ui);
  color: #381d54;
  transition: all .14s;
  opacity: 1;
}
.diesel .cx-mapa__lateral-reopen:hover {
  background: #fff;
  border-color: #58c8dc;
  box-shadow: 0 4px 14px rgba(88, 200, 220, .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: #381d54;
}

/* 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: #381d54;
}
.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(88, 200, 220, .04); }
.fb-drawer .cx-tabela--drw .is-pos { color: #3a9fb3; }
.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: #381d54;
  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, #3a9fb3, #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: #381d54;
  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: #381d54; }