:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-label: 'Barlow', sans-serif;
  --text-label: #5A5A5A;

  --bg-app: #F5F7FB;
  --bg-surface: #FFFFFF;
  --bg-soft: #F4F6FA;
  --bg-softer: #ECEEF3;

  --border: #EAEDF3;
  --border-strong: #CBD5E1;

  --text-primary: #0B1220;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #474c54;

  --row-py: 14px;
  --row-px: 16px;

  --indigo-bg: #E0E7FF;
  --indigo-bg-soft: #EEF2FF;
  --indigo-text: #4338CA;
  --indigo-text-strong: #3730A3;

  --mint-bg: #D1FAE5;
  --mint-bg-soft: #ECFDF5;
  --mint-text: #047857;
  --mint-dot: #10B981;

  --amber-bg: #FEF3C7;
  --amber-text: #92400E;

  --peach-bg: #FFE4D6;
  --peach-text: #B45309;

  --lavender-bg: #EDE9FE;
  --lavender-text: #6D28D9;

  /* estados sólidos (pill colorido com texto branco) */
  --state-ok: #16A34A;
  --state-warn: #D97706;
  --state-rep: #DC2626;
  --on-state: #FFFFFF;

  --pink-bg: #FCE7F3;
  --pink-text: #BE185D;

  --blue-bg: #DBEAFE;
  --blue-text: #1D4ED8;

  --red-bg: #FEE2E2;
  --red-text: #B91C1C;

  /* ===== BIBLUE BRAND ===== */
  --brand: #2563EB;
  --brand-hover: #1D4ED8;
  --brand-dark: #1E3A8A;
  --brand-soft: #DBEAFE;
  --brand-tint: #EFF6FF;
  --brand-border-soft: #BFDBFE;
  --brand-amber: #FBBF24;
  --brand-amber-soft: #FEF3C7;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.shell {
  display: flex;
  min-height: 100vh;
}

/* ============ SIDEBAR ============ */
.side {
  width: 76px;
  background: #343946;
  border-right: 1px solid #EDEDED;
  padding: 14px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(37, 99, 235, 0.08);
  position: relative;
  overflow: hidden;
}

.side-menu-label {
  display: none;
}

.logo svg {
  display: block;
}

.logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
}

.nav-item {
  width: 58px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #C4C9D2;
  cursor: pointer;
  gap: 3px;
  transition: background .15s, color .15s;
  position: relative;
}

.nav-item i {
  font-size: 20px;
  line-height: 1;
}

.nav-item span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.nav-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nav-item.disabled:hover {
  background: transparent;
  color: #C4C9D2;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 26px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}

.nav-divider {
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin: 6px 0;
}

.nav-spacer {
  flex: 1;
}

/* ============ MAIN ============ */
/* Filho direto do shell: o template legado tem um `.main` do theme.css la dentro
   (o container bootstrap do conteudo) que nao pode virar coluna flex. */
.shell > .main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Conteudo das telas legadas: o `.container-fluid` do bootstrap tem margin
   lateral auto e, como item flex, encolheria ate o tamanho do conteudo em vez de
   ocupar a coluna inteira. Mantem o bloco, sem perder o `flex: 1` do shell. */
.shell > .main.main-legacy {
  display: block;
}

.topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* conteudo do topo alinhado a mesma coluna de 1180px do `.content` */
.topbar-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  font-size: 19px;
  font-weight: 700;
  color: var(--brand);
  font-style: italic;
  letter-spacing: -0.035em;
  margin-right: 4px;
}

.brand b {
  font-weight: 700;
  color: var(--brand-dark);
}

.search {
  flex: 1;
  max-width: 540px;
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px solid transparent;
  transition: all .15s;
}

.search:hover {
  background: var(--bg-softer);
}

.search i {
  font-size: 16px;
}

.search:focus-within {
  background: var(--bg-surface);
  border-color: var(--brand-border-soft);
}

/* o campo herda a caixa da barra: sem moldura propria, so o texto */
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-shortcut {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-surface);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.pill {
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: all .15s;
}

.pill i {
  font-size: 14px;
}

.pill.time {
  background: var(--bg-soft);
  color: var(--text-secondary);
}

.pill.news {
  background: var(--brand-amber-soft);
  color: var(--amber-text);
  border: 1px solid #FDE68A;
}

.pill.news:hover {
  filter: brightness(0.97);
}

.pill.user {
  background: var(--brand);
  color: white;
}

.pill.user:hover {
  background: var(--brand-hover);
}

/* ===== menu do usuario (topbar) ===== */
.pill-menu {
  position: relative;
}

.pill-menu button.pill.user {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.pill-caret {
  transition: transform .15s;
}

.pill-menu.open .pill-caret {
  transform: rotate(180deg);
}

.pill-pop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 236px;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(11, 18, 32, 0.14);
  z-index: 20;
}

.pill-menu.open .pill-pop {
  display: block;
}

.pop-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.pop-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.pop-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}

.pop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pop-item:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}

.pop-item i {
  font-size: 16px;
  color: var(--text-tertiary);
}

.pop-sep {
  display: block;
  height: 1px;
  margin: 6px 0;
  background: var(--border);
}

.pop-item.danger,
.pop-item.danger i {
  color: var(--red-text);
}

.pop-item.danger:hover {
  background: var(--red-bg);
}

.content {
  padding: 24px 28px 32px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  gap: 16px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.page-sub {
  font-size: 13px;
  color: var(--text-tertiary);
}

.tabs {
  background: #b1d9ff;
  border-radius: 10px;
  padding: 3px;
  display: inline-flex;
  gap: 2px;
}

.tabs a,
.tabs a:visited {
  text-decoration: none;
  color: inherit;
}

.nav-item,
.nav-item:visited {
  text-decoration: none;
}

.tab {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  font-weight: 500;
}

.tab i {
  font-size: 14px;
}

.tab:hover {
  color: var(--text-secondary);
}

.tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ============ STATS (compact default) ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.stat {
  background: #ECF2FF;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}

.stat:hover {
  border-color: #C7D2FE;
  box-shadow: 0 4px 12px -6px rgba(37, 99, 235, 0.18);
}

.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.stat-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
}

.icon-chip {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.icon-chip.indigo {
  background: var(--brand-soft);
  color: var(--brand-hover);
}

.icon-chip.mint {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.icon-chip.peach {
  background: var(--peach-bg);
  color: var(--peach-text);
}

.icon-chip.lavender {
  background: var(--lavender-bg);
  color: var(--lavender-text);
}

.stat-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-primary);
}

.stat-trend {
  font-size: 10.5px;
  color: var(--mint-text);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.stat-trend i {
  font-size: 11px;
}

.stat-trend.down {
  color: var(--peach-text);
}

.stat-trend.neutral {
  color: var(--text-muted);
}

/* ============================================================
   DASHBOARD — grid, charts, bars, integrations, heatmap
   ============================================================ */
.dash-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-grid.two {
  grid-template-columns: 1fr 1fr;
}

/*
  A serie diaria plota um ponto por dia: a coluna larga precisa do vao extra.
  minmax(0, ...) e obrigatorio — com `fr` puro o minimo e o min-content do card
  da direita, que rouba largura do grafico.
*/
.dash-grid.two-third {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}

@media (max-width: 1100px) {

  .dash-grid.two,
  .dash-grid.two-third {
    grid-template-columns: 1fr;
  }
}

/* legend */
.dash-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.legend-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.legend-dot.dot-brand {
  background: var(--brand);
}

.legend-dot.dot-brand-hover {
  background: var(--brand-hover);
}

.legend-dot.dot-mint {
  background: var(--mint-dot);
}

.legend-dot.dot-lavender {
  background: var(--lavender-text);
}

.legend-dot.dot-amber {
  background: var(--amber-text);
}

.legend-dot.dot-peach {
  background: #F59E0B;
}

.legend-dot.dot-muted {
  background: var(--text-muted);
}

.legend-name {
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.legend-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-tertiary);
}

/* chart area */
.chart-area {
  position: relative;
  padding: 4px 0 0;
}

.chart-area svg {
  display: block;
  width: 100%;
  height: 220px;
}

/*
  Hover do grafico. O SVG e esticado para a largura do card (preserveAspectRatio
  none), entao a faixa de cada ponto e posicionada em % — a mesma proporcao do x
  no viewBox. Mirar o circulo de 3px seria impraticavel: cada faixa cobre a
  fatia horizontal inteira em volta do seu ponto.
*/
.chart-points {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  /* so a area plotada: abaixo dela vem o eixo X e a legenda */
  height: 220px;
  pointer-events: none;
}

.chart-point {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: auto;
}

/* guia vertical do ponto sob o ponteiro */
.chart-point::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.chart-point:hover::before {
  opacity: 1;
}

.chart-tip {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  display: none;
  min-width: 168px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.12);
  z-index: 3;
}

.chart-point:hover .chart-tip {
  display: block;
}

/* nos extremos o balao vazaria o card: cresce para dentro, a partir do ponto */
.chart-point:first-child .chart-tip {
  transform: none;
}

.chart-point:last-child .chart-tip {
  transform: translateX(-100%);
}

/* sem uppercase: o rotulo da janela de horas viraria "08H" */
.tip-head {
  display: block;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-label);
}

.tip-total {
  display: block;
  margin: 2px 0 8px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.tip-total b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.9;
}

.chart-xaxis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* donut — grafico em cima, legenda embaixo: a coluna do card fica estreita */
.donut-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.donut {
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
}

/* justify-items: center encolheria a lista para o texto mais longo */
.donut-wrap .donut-legend {
  width: 100%;
}

/*
  Legendas abaixo do donut ocupam a linha inteira e empurram o valor para a
  direita. Sem isto o `.legend-name` (flex:1) encolhe dentro do `inline-flex`
  e o nome encosta no numero.
*/
.donut-wrap .legend-row {
  display: flex;
  width: 100%;
  padding: 0;
}

/* nome longo corta no fim: quebrar empurraria a lista para fora do card */
.donut-wrap .legend-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.donut-wrap .legend-val {
  margin-left: auto;
  padding-left: 10px;
  white-space: nowrap;
}

.donut text {
  transform: rotate(90deg);
  transform-origin: center;
}

.donut-num {
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 700;
  fill: var(--text-primary);
  letter-spacing: -0.04em;
}

.donut-lbl {
  font-family: var(--font-label);
  font-size: 2.6px;
  fill: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* lista curta: cabe mais registradora sem o card crescer */
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.donut-legend .legend-row {
  font-size: 12.5px;
  gap: 8px;
}

/* bar list */
.bar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.bar-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-name .rec-logo {
  width: 26px;
  height: 26px;
  font-size: 11px;
  border-radius: 7px;
  flex-shrink: 0;
}

.bar-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

.bar-track {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 3px;
  overflow: hidden;
}

.bar-track.tight {
  height: 4px;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}

.bar-fill.brand {
  background: var(--brand);
}

.bar-fill.mint {
  background: var(--mint-dot);
}

.bar-fill.peach {
  background: #F59E0B;
}

.bar-fill.amber {
  background: #FBBF24;
}

.bar-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* integrations grid */
.int-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.int-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.int-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.int-head .rec-logo {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: 7px;
}

.int-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.int-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.int-stats>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.int-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.int-val.mint {
  color: var(--mint-text);
}

.int-val.peach {
  color: var(--peach-text);
}

@media (max-width: 720px) {
  .int-grid {
    grid-template-columns: 1fr;
  }
}

/* heatmap */
.heat-wrap {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: stretch;
}

.heat-yaxis {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  align-items: center;
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  text-align: right;
}

.heat-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
}

.heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  min-height: 14px;
}

.heat-xaxis {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0 40px;
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  letter-spacing: 0.04em;
}

.heat-scale {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

.heat-scale .heat-cell {
  width: 14px;
  height: 14px;
  min-height: 0;
  aspect-ratio: auto;
}

.heat-cell.lv-0 {
  background: #F4F6FA;
}

.heat-cell.lv-1 {
  background: #EEF2FF;
}

.heat-cell.lv-2 {
  background: #C7D2FE;
}

.heat-cell.lv-3 {
  background: #818CF8;
}

.heat-cell.lv-4 {
  background: #4338CA;
}

.heat-cell.lv-5 {
  background: #1E3A8A;
}

.heat-scale-lbl {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  padding: 0 4px;
}

/* status compact */
.status.compact {
  padding: 3px 7px;
  font-size: 10px;
}

/* mini list (atividade recente) */
.list.mini {
  gap: 6px;
}

.list.mini .rec {
  padding: 10px 14px;
  cursor: default;
}

.list.mini .rec-row1 {
  margin-bottom: 0;
}

/* ============ FILTERS ============ */
.filters {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.chip {
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--bg-soft);
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  font-weight: 500;
  cursor: pointer;
}

.chip:hover {
  background: var(--bg-softer);
}

.chip i {
  font-size: 14px;
  color: var(--text-muted);
}

.chip.active {
  background: var(--brand-tint);
  color: var(--brand);
  border-color: var(--brand-border-soft);
}

.chip.active i {
  color: var(--brand);
}

.chip-more {
  margin-left: auto;
  background: var(--text-primary);
  color: white;
}

.chip-more i {
  color: white;
}

.chip-more:hover {
  background: #1E293B;
}

/* ============ LIST / RECORDS ============ */
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rec {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--row-py) var(--row-px);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative;
  cursor: pointer;
}

.rec:hover {
  border-color: #C7D2FE;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -8px rgba(37, 99, 235, 0.18);
}

.rec::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background .15s;
}

.rec.is-error::before {
  background: #EF4444;
}

.rec.is-warn::before {
  background: #F59E0B;
}

.rec-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rec-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.rec-logo.alias {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.rec-logo.b3 {
  background: var(--blue-bg);
  color: var(--blue-text);
}

.rec-logo.tecno {
  background: var(--pink-bg);
  color: var(--pink-text);
}

.rec-logo.serasa {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.rec-logo.detran {
  background: var(--lavender-bg);
  color: var(--lavender-text);
}

.rec-logo.lavender {
  background: var(--lavender-bg);
  color: var(--lavender-text);
}

.rec-logo.credito {
  background: var(--lavender-bg);
  color: var(--lavender-text);
}

/* variante para logo vindo de imagem (produto/registradora cadastrada no banco) */
.rec-logo.img {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 3px;
}

.rec-logo.img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.rec-id {
  background: var(--brand-tint);
  color: var(--brand-hover);
  font-size: 11px;
  font-weight: 500;
  padding: 0 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 26px;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}

.rec-int {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.rec-end {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  background: var(--bg-soft);
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 26px;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* badge data/hora preto com texto branco (Análise) */
.rec-end.rec-end-dark {
  background: var(--text-primary);
  color: var(--on-state);
  border-color: transparent;
}

/* Pill de agência na listagem de Análise (§12.10) */
.rec-ag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--lavender-bg);
  color: var(--lavender-text);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
}

.rec-ag i {
  font-size: 13px;
}

.rec-time {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rec-time i {
  font-size: 13px;
}

.status {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status.success {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.status.success::before {
  background: var(--mint-dot);
}

.status.error {
  background: var(--red-bg);
  color: var(--red-text);
}

.status.error::before {
  background: #EF4444;
}

.status.warn {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.status.warn::before {
  background: #F59E0B;
}

.rec-row2 {
  /* gap fixo (era 12%): com `.content` em 1180px + painel lateral, o gap
     percentual estourava a largura e jogava `.plate`/`.rec-acts` para fora. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-left: 50px;
}

.rec-cust {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  min-width: 200px;
}

.rec-cust-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rec-name {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 700;
}

.rec-cpf {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.rec-vehicle {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.rec-vname {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

.rec-vid {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ROW2 EM GRID — alinha a coluna Veículo entre as linhas.
   Com flex, `.rec-cust` crescia junto com o nome do cliente e empurrava
   `.rec-vehicle` pra um x diferente em cada card. O grid fixa as 4 colunas
   (cliente | veículo | placa | ações). A placa é opcional (ui:fragment), por
   isso cada filho declara `grid-column`: linha sem placa deixa o slot vazio
   em vez de puxar as ações pra coluna 3.
   Escopo: só linhas com `.rec-cust` seguido de `.rec-vehicle` (listagem de
   registros) — não afeta o row2 de visualizacao.xhtml (2x .rec-vehicle) nem
   as linhas da Análise (`.rec-scorecol`). */
.rec-row2:has(> .rec-cust + .rec-vehicle) {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr) 96px auto;
  align-items: center;
  gap: 12px 24px;
}

.rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-cust {
  grid-column: 1;
  min-width: 0;
}

.rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-cust .rec-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-cust .rec-cpf {
  flex-shrink: 0;
}

.rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-vehicle {
  grid-column: 2;
}

.rec-row2:has(> .rec-cust + .rec-vehicle) > .plate {
  grid-column: 3;
}

.rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-acts {
  grid-column: 4;
  margin-left: 0;
}

/* Badges de bureau na listagem de Análise (§12.10) */
.rec-bureaus {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 1px 0 2px;
}

.bbdg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.bbdg i {
  font-size: 11px;
}

/* estados do bureau na consulta: aprovado / reprovado / não executado */
.bbdg.ok {
  background: var(--mint-bg);
  color: var(--mint-text);
  border-color: transparent;
}

.bbdg.rep {
  background: var(--peach-bg);
  color: var(--state-rep);
  border-color: transparent;
}

.bbdg.no {
  background: var(--amber-bg);
  color: var(--amber-text);
  border-color: transparent;
}

.rec-financial {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 140px;
  flex-shrink: 0;
}

/* coluna Score (entre Cliente e Consulta) — número no tamanho do renda */
.rec-scorecol {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 90px;
  flex-shrink: 0;
}

/* 4 colunas (com Score) — reduz o gap pra Consulta não espremer e os bureaus
   não quebrarem em várias linhas. Só afeta linhas da Análise (têm .rec-scorecol) */
.rec-row2:has(.rec-scorecol) {
  gap: 5%;
}

.rec-finance-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.rec-fid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex-shrink: 0;
}

.rec-fid-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-flags {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 4px 10px;
  flex-shrink: 0;
}

.rec-flag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rec-flag .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.rec-flag .badge.no {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FCA5A5;
}

.rec-flag .badge.yes {
  background: #D1FAE5;
  color: var(--mint-text);
  border-color: #A7F3D0;
}

.rec-flag .badge.warn {
  background: #FEF3C7;
  color: var(--amber-text);
  border-color: #FCD34D;
}

.plate {
  width: 96px;
  height: 32px;
  border-radius: 5px;
  background: white;
  border: 1.5px solid #1E293B;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/*
  Slot da placa quando o veiculo nao tem placa emitida. Ocupa a mesma caixa da
  placa (o card conta com ela para alinhar), mas com a linguagem dos pills: fundo
  tint, borda suave, rotulo curto. Escrever "0 km" dentro do formato Mercosul
  faria ler como se a placa fosse esse texto.
*/
.plate.is-new,
.plate.is-none {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plate.is-new {
  background: var(--brand-tint);
  border: 1px solid var(--brand-border-soft);
  color: var(--brand-hover);
}

.plate.is-new i {
  font-size: 13px;
}

/* sem indicador de novo/usado nao da para afirmar 0km: fica neutro */
.plate.is-none {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/*
  Aba "Reg. Veiculos" do detalhe: card de uma linha. Com .rec-row1/.rec-row2 o id
  e a placa ficavam numa linha e os dados noutra, deixando metade do card vazia.
*/
.rec.rec-veic {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) 96px;
  align-items: center;
  gap: 18px;
}

.rec-veic-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rec-vempty {
  color: var(--text-muted);
  font-style: italic;
}

.plate-top {
  background: var(--brand-hover);
  color: white;
  font-size: 7px;
  height: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-family: var(--font-sans);
}

.plate-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  letter-spacing: 0.04em;
}

.rec-acts {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.act {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 14px;
  transition: all .15s;
}

.act:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* ============ FOOTER / PAGES ============ */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 0 4px;
}

.foot-info {
  font-size: 12px;
  color: var(--text-muted);
}

.pages {
  display: inline-flex;
  gap: 4px;
}

.page {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  transition: all .15s;
}

.page:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}

.page.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

/* ============ DETAIL VIEW ============ */
.detail-view {
  display: none;
}

.detail-view.active {
  display: block;
}

.list-view {
  display: block;
}

.list-view.hidden {
  display: none;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 14px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* variante compacta usada em modal-head / fdr-head (documentada no design-system) */
.card-icon.sm {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 15px;
}

.card-icon.indigo {
  background: var(--brand-soft);
  color: var(--brand-hover);
}

.card-icon.lavender {
  background: var(--lavender-bg);
  color: var(--lavender-text);
}

/* variante peach — usada nos cards de historico (documentada no design-system) */
.card-icon.peach {
  background: var(--peach-bg);
  color: var(--peach-text);
}

.card-icon.mint {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 16px;
}

.field-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.field-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.field-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.field-value.mono {
  font-family: var(--font-mono);
  font-weight: 400;
}

.financial-highlight {
  background: var(--mint-bg-soft);
  border: 1px solid #BBF7D0;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  margin-top: 14px;
}

.fh-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--mint-text);
  font-weight: 500;
  opacity: 0.85;
}

.fh-value {
  font-size: 13px;
  color: var(--mint-text);
  font-weight: 600;
  font-family: var(--font-mono);
}

.history-side .card {
  padding: 18px;
}

.history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.hs-item {
  text-align: center;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--bg-soft);
}

.hs-num {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hs-num.success {
  color: var(--mint-text);
}

.hs-num.warn {
  color: var(--peach-text);
}

.hs-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  margin-top: 2px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tl-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-soft);
}

.tl-time {
  background: var(--text-primary);
  color: white;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  font-size: 10px;
  flex-shrink: 0;
  min-width: 48px;
  font-family: var(--font-mono);
}

.tl-time .day {
  font-weight: 600;
  font-size: 11px;
}

.tl-content {
  flex: 1;
  min-width: 0;
}

.tl-status {
  font-size: 11px;
  font-weight: 500;
  color: var(--mint-text);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tl-url {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  word-break: break-all;
}

.subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.subtab {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
}

.subtab:hover {
  color: var(--text-secondary);
}

.subtab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ============ FILTER DRAWER ============ */
.fdr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 110;
  display: none;
  justify-content: flex-end;
}

.fdr-backdrop.open {
  display: flex;
  animation: fade .15s ease;
}

.fdr {
  width: 460px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 48px -16px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  animation: slideInRight .22s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.fdr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.fdr-head .icon-chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.fdr-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.fdr-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.fdr-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.fdr-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.fdr-close:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}

.fdr-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fdr-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fdr-group-title {
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-label);
  margin: 0;
}

.fdr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fdr-segmented {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  display: flex;
  gap: 2px;
}

.fdr-seg {
  flex: 1;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all .15s;
}

.fdr-seg:hover {
  color: var(--text-secondary);
}

.fdr-seg.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.fdr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fdr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.fdr-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
}

.fdr-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  transition: border-color .15s, box-shadow .15s;
}

.fdr-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.fdr-input i {
  font-size: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.fdr-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--text-primary);
}

.fdr-input input::placeholder {
  color: var(--text-muted);
}

.fdr-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fdr-quick-btn {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}

.fdr-quick-btn:hover {
  background: var(--bg-softer);
  color: var(--text-primary);
}

.fdr-quick-btn.active {
  background: var(--brand-tint);
  border-color: var(--brand-border-soft);
  color: var(--brand-hover);
}

.fdr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.fdr-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}

.fdr-btn-ghost:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.fdr-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.fdr-btn-primary:hover {
  background: var(--brand-hover);
}

.fdr-btn-primary:active {
  transform: translateY(1px);
}

.fdr-count {
  background: rgba(255, 255, 255, 0.22);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
}

@media (max-width: 540px) {
  .fdr {
    width: 100vw;
  }

  .fdr-row {
    grid-template-columns: 1fr;
  }
}

/* ============ REQUISIÇÃO MODAL ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
}

.modal-backdrop.open {
  display: flex;
  animation: fade .15s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.modal {
  width: min(880px, 100%);
  background: var(--bg-surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.30), 0 0 0 1px var(--border);
  overflow: hidden;
  animation: pop .2s cubic-bezier(.2, .8, .2, 1);
}

/* Variantes de largura. O teto acompanha o .content (1180px) para o dialogo nao
   ficar mais largo que a propria pagina. */
.modal-sm {
  width: min(460px, 100%);
}

.modal-lg {
  width: min(1024px, 100%);
}

.modal-xl {
  width: min(1180px, 100%);
}

.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.modal-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 16px;
  border: 1px solid transparent;
  transition: all .15s;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--bg-softer);
  color: var(--text-primary);
}

.modal-tabs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 0;
  border-bottom: 1px solid var(--border);
}

.modal-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-softer);
  border-radius: 9px;
}

.modal-tab {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
}

.modal-tab i {
  font-size: 13px;
}

.modal-tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.modal-tabs-right {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}

.section-tab {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all .15s;
}

.section-tab.active {
  background: var(--brand-tint);
  color: var(--brand);
  border-color: var(--brand-border-soft);
}

.section-tab:hover:not(.active) {
  background: var(--bg-soft);
  color: var(--text-primary);
}

.modal-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.modal-summary .rec-row2 {
  padding-left: 0;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}

.modal-summary .rec-row2 .rec-vehicle {
  flex: 0 1 auto;
}

.modal-summary .rec-row2 .plate {
  margin-left: 0;
}

/* Dentro de modal/drawer o grid de 4 colunas não se aplica: há um card só
   (nada pra alinhar entre linhas), não existem placa/ações e a largura é
   ~680px — a coluna fixa de 460px esmagava o Endpoint. Volta pro fluxo flex. */
.modal .rec-row2:has(> .rec-cust + .rec-vehicle) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

/* Cliente e Endpoint ocupam uma linha cada. Sem a base de 100% o flex encaixa
   o Endpoint ao lado de um nome curto e a hora quebra em tres linhas. */
.modal .rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-cust,
.modal .rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-vehicle {
  flex: 0 0 100%;
  min-width: 0;
}

/* Endpoint numa linha unica: rotulo, pill do endpoint e — empurrados pra
   direita pelo `margin-left: auto` do `.rec-time` — hora e status. */
.modal .rec-row2 > .rec-vehicle {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* sem o icone do veiculo nao ha o que alinhar: a indentacao de 50px da
   listagem sairia como recuo solto nas linhas de cliente e endpoint */
.modal .ui-tabs-panel .rec-row1,
.modal .ui-tabs-panel .rec-row2 {
  padding-left: 0;
}

.modal .ui-tabs-panel .rec-row1 > .plate {
  margin-left: auto;
}

.modal .rec-row2 > .rec-vehicle > .rec-time {
  white-space: nowrap;
}

/* Card de resumo dentro do modal/drawer: fundo cinza e sem borda. Na listagem
   o `.rec` e branco pra destacar do fundo da pagina; aqui o drawer ja e branco,
   entao o cinza e o que separa o resumo do payload. Nao e clicavel, por isso o
   hover da listagem tambem sai. */
.modal .ui-tabs-panel > .rec,
.modal .ui-tabs-panel > .rec:hover {
  background: var(--bg-soft);
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}

.modal-summary .rec-row1 {
  margin-bottom: 0;
}

.modal-body {
  padding: 18px 22px 22px;
  max-height: 65vh;
  overflow-y: auto;
}

.code-section {
  margin-bottom: 18px;
}

.code-section:last-child {
  margin-bottom: 0;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.code-label {
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-label);
  text-transform: uppercase;
}

.code-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.copy-btn {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  background: none;
  border: none;
}

.copy-btn:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}

.copy-btn.copied {
  color: var(--mint-text);
}

.code-block {
  background: var(--text-primary);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: #E2E8F0;
  overflow-x: auto;
  white-space: pre;
  border: 1px solid #1E293B;
}

.code-block .key {
  color: #93C5FD;
}

.code-block .str {
  color: #BBF7D0;
}

.code-block .num {
  color: #FCD34D;
}

.code-block .punct {
  color: #64748B;
}

/* ============ MODAL → DRAWER VARIANT (right side) ============ */
.modal-backdrop.drawer-mode {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

/* Drawer largo: o detalhe do registro tem duas colunas (dados + timeline) e
   nao cabe nos 760px do drawer de requisicao. */
.modal-backdrop.drawer-mode .modal.modal-wide {
  width: min(1180px, 100vw);
}

.modal-backdrop.drawer-mode .modal {
  width: min(760px, 100vw);
  height: 100vh;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 48px -16px rgba(15, 23, 42, 0.30);
  border-left: 1px solid var(--border);
  animation: slideInRight .22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* `.modal-body` vem dentro de um <h:form>, então o filho flex de `.modal` é o
   form, não o body: sem repassar o flex, o body ficava com a altura natural do
   conteúdo e o `overflow:hidden` do `.modal` cortava o fim do payload. */
.modal-backdrop.drawer-mode .modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.modal-backdrop.drawer-mode .modal-body {
  max-height: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .modal-backdrop.drawer-mode .modal {
    width: 100vw;
  }

  .modal-backdrop.drawer-mode .modal-tabs-row {
    flex-wrap: wrap;
  }

  .modal-backdrop.drawer-mode .modal-tabs-right {
    margin-left: 0;
  }
}

/* ============ PLUGIN PAGE (kanban 3-col) ============ */
.plugin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.plg-col {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 560px;
}

.plg-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.plg-col-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  order: 2;
}

.plg-add,
.plg-edit {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: filter .15s, transform .15s;
  border: none;
  color: white;
}

.plg-add {
  background: var(--mint-dot);
}

.plg-edit {
  background: #FBBF24;
  color: var(--amber-text);
}

.plg-add:hover,
.plg-edit:hover {
  filter: brightness(0.95);
}

.plg-add:active,
.plg-edit:active {
  transform: translateY(1px);
}

.plg-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  order: 1;
}

.plg-cta {
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.plg-cta:hover {
  background: var(--brand-hover);
}

.plg-cta:active {
  transform: translateY(1px);
}

.plg-cta.green,
.plg-cta.mint {
  background: var(--state-ok);
  color: #FFFFFF;
}

.plg-cta.green:hover,
.plg-cta.mint:hover {
  background: #15803D;
}

.plg-search {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.plg-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
}

.plg-search input::placeholder {
  color: var(--text-muted);
}

.plg-search-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
}

.plg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.plg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.plg-item:hover {
  border-color: #C7D2FE;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -8px rgba(37, 99, 235, 0.18);
}

.plg-item.active {
  background: #DCEBFB;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.plg-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.plg-icon.gear {
  background: #ECEEF3;
  color: var(--text-tertiary);
}

.plg-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
}

.plg-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.plg-foot {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.plg-log {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.plg-log:hover {
  border-color: #C7D2FE;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -8px rgba(37, 99, 235, 0.18);
}

.plg-log-time {
  background: var(--text-primary);
  color: white;
  font-family: var(--font-mono);
  text-align: center;
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.plg-log-url {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plg-log-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.plg-log-code {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #BE185D;
  font-weight: 600;
}

.plg-log-method {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mint-text);
  font-weight: 600;
}

.plg-log-method::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-dot);
}

@media (max-width: 1100px) {
  .plugin-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONFIGURAÇÕES (cards de produto, plugin, usuário)
   ============================================================ */
.cfg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cfg-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  min-width: 0;
}

.cfg-item:hover {
  border-color: var(--brand-border-soft);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px -10px rgba(37, 99, 235, 0.20);
}

.cfg-item.active {
  background: var(--brand-tint);
  border-color: var(--brand-border-soft);
}

.cfg-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.cfg-avatar i {
  font-size: 22px;
}

.cfg-avatar.neutral {
  background: var(--bg-softer);
  color: var(--text-tertiary);
}

.cfg-avatar.brand {
  background: var(--brand-soft);
  color: var(--brand-hover);
}

.cfg-avatar.mint {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.cfg-avatar.amber {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.cfg-avatar.lavender {
  background: var(--lavender-bg);
  color: var(--lavender-text);
}

.cfg-avatar.tecno {
  background: var(--pink-bg);
  color: var(--pink-text);
}

.cfg-avatar-letter {
  font-family: var(--font-sans);
}

.cfg-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cfg-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfg-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfg-cap {
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.cfg-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  text-align: right;
  /* valores longos (token, UUID) nao podem esmagar o nome do item:
     o bloco encolhe ate 45% e o `.cfg-value` corta com ellipsis */
  flex-shrink: 1;
  min-width: 0;
  max-width: 45%;
  min-width: 0;
  max-width: 220px;
}

.cfg-meta .cfg-cap {
  align-self: flex-end;
}

.cfg-value {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cfg-value.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.cfg-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.cfg-badge.active {
  background: var(--mint-dot);
  color: #fff;
}

.cfg-badge.inactive {
  background: var(--bg-softer);
  color: var(--text-muted);
}

.plg-pages {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* ============ TWEAKS — DENSITY ============ */
body[data-density="compact"] {
  --row-py: 10px;
  --row-px: 14px;
}

body[data-density="comfy"] {
  --row-py: 18px;
  --row-px: 18px;
}

body[data-density="compact"] .rec-row1 {
  margin-bottom: 6px;
}

body[data-density="compact"] .rec-row2 {
  padding-left: 50px;
}

body[data-density="compact"] .stats {
  margin-bottom: 12px;
}

body[data-density="compact"] .filters {
  padding: 8px;
  margin-bottom: 12px;
}

/* ============ TWEAKS — TABLE LAYOUT ============ */
body[data-layout="table"] .rec {
  padding: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

body[data-layout="table"] .rec:hover {
  background: var(--bg-soft);
  box-shadow: none;
}

body[data-layout="table"] .list {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  gap: 0;
}

body[data-layout="table"] .rec-row1,
body[data-layout="table"] .rec-row2 {
  padding: 10px 16px;
  margin: 0;
}

body[data-layout="table"] .rec-row2 {
  padding-top: 0;
  padding-bottom: 12px;
}

/* ============ ROW CAPTIONS (.rec-cap) ============ */
.rec-cap {
  display: block;
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-label);
  line-height: 1;
  margin-bottom: 4px;
}

.rec-vehicle {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============ ROW REVERSE — opt-in via .list.reverse ============ */
.list.reverse .rec {
  display: flex;
  flex-direction: column-reverse;
}

.list.reverse .rec-row1 {
  margin-bottom: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.list.reverse .rec-row2 {
  padding-left: 0;
}

/* Cliente com o rotulo acima do nome, igual a coluna Veiculo. Escopo na
   listagem: o `.rec-cust` do modal nao tem rotulo e segue em linha. */
.list.reverse .rec-row2 > .rec-cust {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.list.reverse .rec-row2 > .rec-cust > .rec-name {
  max-width: 100%;
}

body[data-density="compact"] .list.reverse .rec-row1 {
  margin-bottom: 0;
  margin-top: 6px;
  padding-top: 6px;
}

body[data-density="compact"] .list.reverse .rec-row2 {
  padding-left: 0;
}

body[data-layout="table"] .list.reverse .rec-row2 {
  padding-top: 12px;
  padding-bottom: 0;
}

/* ============ RESPONSIVE — breakpoints padrão ============ */
@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .field-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .side {
    display: none;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .rec-row2 {
    padding-left: 0;
    flex-wrap: wrap;
  }

  /* grid de 4 colunas nao cabe: cliente/veiculo empilham, placa e acoes
     seguem lado a lado na segunda linha */
  .rec-row2:has(> .rec-cust + .rec-vehicle) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-cust {
    grid-column: 1 / -1;
  }

  .rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-vehicle {
    grid-column: 1;
  }

  .rec-row2:has(> .rec-cust + .rec-vehicle) > .plate {
    grid-column: 2;
  }

  .rec-row2:has(> .rec-cust + .rec-vehicle) > .rec-acts {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MODULE: CONCILIAÇÃO BANCÁRIA  (.dir, .file-meta, .recon-*)
   ============================================================ */
.dir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}

.dir i {
  font-size: 13px;
}

.dir.in {
  background: #DBEAFE;
  color: var(--brand-hover);
}

.dir.out {
  background: #FEF3C7;
  color: var(--amber-text);
}

.file-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.file-meta .name {
  color: var(--text-primary);
  font-weight: 500;
}

.file-meta i {
  font-size: 13px;
  color: var(--text-muted);
}

.recon-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.recon-amount.in {
  color: var(--mint-text);
}

.recon-amount.out {
  color: var(--peach-text);
}

.recon-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ============================================================
   MODULE: SEGUROS — multi-insurer cluster  (.insurers, .ins-*)
   ============================================================ */
.insurers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-left: 2px;
}

.ins-stack {
  display: inline-flex;
}

.ins-stack>span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border: 2px solid var(--bg-surface);
  margin-left: -6px;
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

.ins-stack>span:first-child {
  margin-left: 0;
}

.ins-bg-1 {
  background: #DBEAFE;
  color: var(--brand-hover);
}

.ins-bg-2 {
  background: #D1FAE5;
  color: var(--mint-text);
}

.ins-bg-3 {
  background: #FCE7F3;
  color: #BE185D;
}

.ins-bg-4 {
  background: #FEF3C7;
  color: var(--amber-text);
}

.ins-bg-5 {
  background: #EDE9FE;
  color: #6D28D9;
}

.ins-bg-more {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  border: 2px solid var(--bg-surface);
  margin-left: -6px;
}

.ins-count {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: 2px;
  white-space: nowrap;
}

.ins-count b {
  color: var(--text-primary);
  font-weight: 600;
}

.ins-selected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--mint-text);
  font-weight: 500;
  background: var(--mint-bg-soft);
  border: 1px solid #BBF7D0;
  padding: 3px 9px;
  border-radius: 999px;
}

.ins-selected i {
  font-size: 13px;
}

/* ============================================================
   MODULE: NOTAS FISCAIS  (.nf-*)
   ============================================================ */
.nf-filterbar {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 12px;
  align-items: end;
}

.nf-filterbar .spacer {
  background: transparent;
}

.nf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nf-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
}

.nf-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.nf-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 0;
}

.nf-input input::placeholder {
  color: var(--text-muted);
}

.nf-input.empty {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.nf-pages {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .nf-filterbar {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   MODULE: AUTOCORP — consulta veicular  (.au-*)
   ============================================================ */
.au-layout {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 16px;
  align-items: start;
}

.au-filterbar {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1fr 1.4fr;
  gap: 12px;
  align-items: end;
}

.au-filterbar .au-input {
  min-height: 38px;
}

.au-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.au-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
}

.au-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.au-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 0;
}

.au-input input::placeholder {
  color: var(--text-muted);
}

.au-input.empty {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.au-input.select {
  justify-content: space-between;
}

.au-input.select .val {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  font-size: 12px;
}

.au-side {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 16px 20px;
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.au-side-title {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.au-pm-card {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 14px 14px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.au-pm-rank {
  position: absolute;
  left: -10px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mint-dot);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 3px solid var(--bg-surface);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.au-pm-rank.r2 {
  background: #6BA9F3;
  box-shadow: 0 2px 6px rgba(107, 169, 243, 0.35);
}

.au-pm-rank.r3 {
  background: #94A3B8;
  box-shadow: 0 2px 6px rgba(148, 163, 184, 0.35);
}

.au-pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 10px;
}

.au-pm-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.au-pm-cell.full {
  grid-column: 1 / -1;
}

.au-pm-cell .lbl {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
}

.au-pm-cell .val {
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-mono);
}

.au-pm-cell .val.sans {
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.au-pm-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.au-pm-bottom .au-pm-cell {
  flex: 0 0 auto;
}

.au-pm-bottom .au-pm-cell.right {
  text-align: right;
}

.au-pages {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 980px) {
  .au-layout {
    grid-template-columns: 1fr;
  }

  .au-side {
    position: static;
  }
}

@media (max-width: 1100px) {
  .au-filterbar {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   MODULE: DOC VALIDAÇÃO  (.doc-*, .df-*, .dp-*)
   ============================================================ */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.doc-filterbar {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 220px 240px 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.df-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.df-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
}

.df-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.df-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
}

.df-input input::placeholder {
  color: var(--text-muted);
}

.df-input.empty {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.df-segmented {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  display: inline-flex;
  gap: 2px;
  min-height: 38px;
}

.df-seg {
  flex: 1;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all .15s;
}

.df-seg.active {
  background: var(--text-primary);
  color: white;
}

.doc-fid-bar {
  flex: 1;
  height: 6px;
  min-width: 0;
  background: #E2E8F0;
  border-radius: 4px;
  overflow: hidden;
}

.doc-fid-fill {
  height: 100%;
  background: #60A5FA;
  border-radius: 4px;
}

.doc-fid-pct {
  font-size: 13px;
  font-weight: 700;
  color: #DC2626;
  font-family: var(--font-mono);
}

.doc-pages {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.doc-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 84px;
}

.dp-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 18px;
  border-bottom: 1px solid var(--border);
}

.dp-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.dp-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dp-head-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.dp-head-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.dp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dp-grid--full {
  grid-column: 1 / -1;
}

.dp-field {
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: border-color .15s;
}

.dp-field:hover {
  border-color: var(--border-strong);
}

.dp-field .lbl {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.dp-field .val {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: break-word;
}

.dp-field .val-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dp-field--ok .val {
  color: var(--mint-text);
}

.dp-cta {
  background: #6BA9F3;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  transition: filter .15s, transform .15s;
}

.dp-cta:hover {
  filter: brightness(0.96);
}

.dp-cta:active {
  transform: translateY(1px);
}

.dp-doc {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dp-doc-head {
  text-align: center;
  padding: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}

.dp-doc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px 8px;
  font-size: 7.5px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}

.dp-doc-meta b {
  display: block;
  color: var(--text-primary);
  font-size: 7px;
  font-weight: 600;
  margin-bottom: 1px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dp-doc-photo {
  background: linear-gradient(180deg, #4A5563 0%, #1F2937 100%);
  aspect-ratio: 1.05/1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.dp-doc-photo svg {
  width: 75%;
}

@media (max-width: 1180px) {
  .doc-layout {
    grid-template-columns: 1fr;
  }

  .doc-panel {
    position: static;
  }

  .doc-filterbar {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   MODULE: CRÉDITO + ANTIFRAUDE  (.cred-*, .drawer-*, .detail-card-*, scores)
   ============================================================ */
.credit-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}

.cred-left,
.cred-center,
.cred-right {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.cred-left {
  padding: 14px;
}

.cred-center {
  padding: 22px 24px;
}

.cred-right {
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cred-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.cred-input {
  position: relative;
}

.cred-input label {
  position: absolute;
  top: 6px;
  left: 12px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.cred-input input {
  width: 100%;
  padding: 22px 12px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-surface);
  font: 13px var(--font-sans);
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
}

.cred-input input:focus {
  border-color: var(--brand);
}

.cred-input i {
  position: absolute;
  right: 10px;
  bottom: 9px;
  color: var(--text-muted);
  font-size: 16px;
}

.cred-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--brand-tint);
  color: var(--brand-hover);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 10px;
}

.cred-section-head i {
  font-size: 15px;
}

.cred-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cred-item {
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cred-item:hover {
  border-color: var(--border-strong);
  background: var(--bg-surface);
}

.cred-item.active {
  background: var(--brand-tint);
  border-color: var(--brand-border-soft);
}

.cred-item-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.cred-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cred-when {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: rgba(15, 23, 42, 0.06);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  align-self: flex-start;
}

.cred-doc {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.cred-pages {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 14px;
}

.cred-doc-line {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-bottom: 2px;
}

.cred-customer {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.cred-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
  margin-bottom: 22px;
}

.cred-fields>div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.fv {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.fv.strong {
  font-weight: 600;
}

.fv.mono {
  font-family: var(--font-mono);
  font-weight: 400;
}

/* Card de informação do cadastro — formato grid de células (§12.12) */
.info-card {
  grid-column: 1 / -1;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}

.info-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.info-card-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lavender-bg);
  color: var(--lavender-text);
  font-size: 19px;
}

.info-card-tt-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.info-card-tt {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.info-card-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.info-status {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-softer);
  color: var(--text-secondary);
}

.info-status.success {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.info-status.warn {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.info-status.error {
  background: var(--peach-bg);
  color: var(--peach-text);
}

.info-status.simulated {
  background: var(--mint-bg-soft);
  color: var(--mint-text);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.info-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-soft);
}

.info-cell-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.info-cell-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.info-cell-val.pos {
  color: var(--mint-text);
}

.info-cell-val.accent {
  color: var(--lavender-text);
}

.info-card-foot {
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Participações em empresas — lista de cards com pills de bureau (§12.13) */
.part-legend {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.part-legend-bdg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--on-state);
}

.part-legend-bdg.ok {
  background: var(--state-ok);
}

.part-legend-bdg.reprovado {
  background: var(--state-rep);
}

.part-legend-bdg.nao {
  background: var(--state-warn);
}

.part-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.part-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.part-bureaus {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.part-bdg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid transparent;
}

.part-bdg.ok {
  background: var(--state-ok);
  color: var(--on-state);
}

.part-bdg.nao {
  background: var(--amber-bg);
  color: var(--amber-text);
  border-color: var(--amber-text);
}

.part-bdg.reprovado {
  background: var(--peach-bg);
  color: var(--state-rep);
  border-color: var(--state-rep);
}

.part-ent {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.part-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.part-cnpj {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.part-perc-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.part-perc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.part-perc {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.part-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.part-status.ativa {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.part-status.inativa {
  background: var(--bg-softer);
  color: var(--text-tertiary);
}

.part-status.recusado {
  background: var(--peach-bg);
  color: var(--state-rep);
}

/* Panes das abas de Demais informações (§12.13) */
.cred-tabpane {
  display: none;
}

.cred-tabpane.active {
  display: block;
}

@media (max-width: 1100px) {
  .part-row {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Fluxograma horizontal estático do trajeto na política (§12.14) */
.flow-h-result {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mint-bg);
  color: var(--mint-text);
}

.flow-h {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: 8px 2px 12px;
  gap: 0;
}

.flow-h-node {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 10px 14px;
  background: var(--brand-tint);
  border: 1.5px solid var(--brand-border-soft);
  border-radius: 12px;
}

.flow-h-node.done {
  border-color: var(--state-ok);
}

.flow-h-ic {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--state-ok);
  color: var(--on-state);
  font-size: 14px;
}

.flow-h-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.flow-h-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.flow-h-type {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.flow-h-edge {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 2px;
  background: var(--state-ok);
}

.flow-h-edge::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--state-ok);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.flow-h-end {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 11px 18px;
  background: var(--mint-bg);
  color: var(--mint-text);
  border: 1.5px solid var(--state-ok);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.cred-block-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  padding: 14px 0 10px;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}

.cred-block-meta {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 6px 0;
}

.cred-block-meta.strong {
  color: var(--text-secondary);
  font-weight: 600;
  padding-bottom: 10px;
}

.cred-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}

.cred-th {
  display: grid;
  grid-template-columns: 70px 60px 60px 110px 1fr 110px 80px;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-soft);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.cred-table-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.cred-tr {
  display: grid;
  grid-template-columns: 70px 60px 60px 110px 1fr 110px 90px;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  align-items: center;
}

.cred-tr .mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-primary);
}

.cred-tr .sc-badge {
  font-size: 10px;
  padding: 3px 8px;
}

.cred-tr .sc-badge.warn {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.cred-tr .cred-status {
  font-size: 10.5px;
  padding: 3px 8px;
}

.cred-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 8px 0 0;
}

.cred-subtabs .subtab {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.cred-subtabs .subtab:hover {
  color: var(--text-secondary);
}

.cred-subtabs .subtab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.subtab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand-tint);
  color: var(--brand-hover);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.cred-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  margin-top: 8px;
}

.cred-result-icon {
  width: 56px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  position: relative;
  background: var(--brand-tint);
  color: var(--brand);
}

/* variante documento (PDF): cartão vermelho com rótulo, esconde o glyph */
.cred-result-icon.pdf {
  background: linear-gradient(180deg, #FECACA, #FCA5A5);
  color: #991B1B;
}

.cred-result-icon.pdf::after {
  content: 'PDF';
  position: absolute;
  bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
}

.cred-result-icon.pdf i {
  display: none;
}

.cred-result-grid {
  display: grid;
  grid-template-columns: 140px 180px 1fr;
  gap: 6px 24px;
  align-items: center;
}

.cred-result-grid>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cred-cta {
  width: 100%;
  background: linear-gradient(180deg, #34D399, var(--mint-dot));
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: filter .15s, transform .05s;
}

.cred-cta:hover {
  filter: brightness(1.04);
}

.cred-cta:active {
  transform: translateY(1px);
}

.cred-cta .mono {
  font-family: var(--font-mono);
  font-weight: 600;
}

.cred-cta i {
  font-size: 18px;
}

.cred-participations {
  background: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
  color: white;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px -4px rgba(129, 140, 248, 0.45);
}

.part-num {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.part-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.cred-scores {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  transition: border-color .15s;
}

.score-card:hover {
  border-color: var(--border-strong);
}

.sc-label {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sc-val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
}

.sc-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}

.sc-badge.ok {
  background: var(--mint-bg);
  color: var(--mint-text);
}

@media (max-width: 1280px) {
  .credit-grid {
    grid-template-columns: 260px minmax(0, 1fr) 260px;
  }

  .cred-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  .credit-grid {
    grid-template-columns: 1fr;
  }

  .cred-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* row active state (used in credito list) */
.rec.active {
  background: var(--brand-tint);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.rec-score {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  min-width: 64px;
}

.rec-score .sv {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* DETAIL DRAWER (credito) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 90;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(960px, 92vw);
  background: var(--bg-app);
  box-shadow: -16px 0 40px -12px rgba(15, 23, 42, 0.18);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 91;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-head .icon-chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.drawer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.drawer-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.drawer-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.drawer-close:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}

.drawer-body {
  flex: 1;
  overflow: auto;
  padding: 18px 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}

.drawer-body .detail-card.full {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .drawer-body {
    grid-template-columns: 1fr;
  }
}

.drawer-body .cred-center,
.drawer-body .cred-right {
  margin: 0;
}

.drawer-body .cred-center {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* CREDITO — tokens compartilhados com pattern .rec-row1/.rec-row2 */
.cred-hash {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.cred-src {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.cred-when {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cred-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}

.cred-model {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.cred-brand {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cred-year {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cred-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--mint-bg);
  color: var(--mint-text);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.cred-kind i {
  font-size: 13px;
}

.cred-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.cred-parcels {
  font-size: 12px;
  color: var(--text-tertiary);
}

.cred-parcel {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.cred-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.cred-status .cred-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.cred-status.simulated {
  color: var(--brand-hover);
  background: var(--brand-tint);
  border-color: var(--brand-border-soft);
}

.cred-status.simulated .cred-status-dot {
  background: var(--brand);
}

.cred-status.success {
  color: var(--mint-text);
  background: #D1FAE5;
  border-color: #A7F3D0;
}

.cred-status.success .cred-status-dot {
  background: var(--mint-dot);
}

.cred-status.error {
  color: #B91C1C;
  background: #FEE2E2;
  border-color: #FECACA;
}

.cred-status.error .cred-status-dot {
  background: #EF4444;
}

.cred-status.warn {
  color: var(--amber-text);
  background: #FEF3C7;
  border-color: #FDE68A;
}

.cred-status.warn .cred-status-dot {
  background: #F59E0B;
}

.cred-closed {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* política badge */
.cred-politica {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--brand-hover);
  background: var(--brand-tint);
  border: 1px solid var(--brand-border-soft);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* DETAIL CARDS (credito) */
.detail-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
}

.detail-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.detail-card-head .icon-chip {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 15px;
}

.detail-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-card .cred-block-head {
  border-top: none;
  padding: 0 0 10px 0;
  margin-bottom: 0;
}

.detail-card .cred-fields {
  margin-bottom: 0;
}

.detail-card .cred-result {
  margin-top: 12px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.u-ml-auto {
  margin-left: auto;
}

.u-mr-auto {
  margin-right: auto;
}

.u-ml-0 {
  margin-left: 0;
}

.u-mb-1 {
  margin-bottom: 6px;
}

.u-mb-2 {
  margin-bottom: 10px;
}

.u-mb-3 {
  margin-bottom: 14px;
}

.u-mb-4 {
  margin-bottom: 18px;
}

.u-mt-px {
  margin-top: 4px;
}

.u-mt-1 {
  margin-top: 6px;
}

.u-mt-2 {
  margin-top: 10px;
}

.u-no-deco {
  text-decoration: none;
}

.u-pointer {
  cursor: pointer;
}

.u-hidden {
  display: none;
}

.u-col-span-2 {
  grid-column: span 2;
}

.u-col-span-3 {
  grid-column: span 3;
}

.u-col-span-full {
  grid-column: 1 / -1;
}

.u-flex {
  display: flex;
}

.u-flex-1 {
  flex: 1;
}

.u-flex-col {
  display: flex;
  flex-direction: column;
}

.u-items-center {
  align-items: center;
}

.u-justify-center {
  justify-content: center;
}

.u-justify-between {
  justify-content: space-between;
}

.u-text-right {
  text-align: right;
}

.u-w-full {
  width: 100%;
}

.u-gap-1 {
  gap: 6px;
}

.u-gap-2 {
  gap: 10px;
}

.u-gap-8 {
  gap: 8px;
}

.u-gap-12 {
  gap: 12px;
}

.u-gap-3 {
  gap: 14px;
}

.u-mono {
  font-family: var(--font-mono);
}

.u-text-center {
  text-align: center;
}

.u-text-muted {
  color: var(--text-muted);
}

.u-text-tertiary {
  color: var(--text-tertiary);
}

.u-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

.chip.full-start {
  width: 100%;
  justify-content: flex-start;
}

.icon-chip.sm {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 16px;
}

/* ============ shared panel/grid helpers ============ */
.panel-pad {
  padding: 18px;
}

.panel-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.card-head.sep {
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.subtabs.inset {
  margin: 0;
  padding: 0 18px;
}

.grid-cols-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.grid-cols-5.head {
  font-size: 12px;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.grid-cols-5.body {
  font-size: 13px;
  padding: 10px 0;
}

.plg-add.lg {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

/* modal cross-file patterns */
.ms-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* card variants */
.card.flush {
  padding: 0;
}

.card.flush-x {
  padding-left: 0;
  padding-right: 0;
}

/* plate large */
.plate.lg {
  width: 110px;
  height: 36px;
}

.plate.lg .plate-body {
  font-size: 16px;
}

/* ============ CRÉDITO — MODAL NOVA VALIDAÇÃO (.nv-*) ============ */
.nv-modal {
  width: min(520px, 100%);
}

.nv-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-field {
  margin: 0;
}

.nv-field-label {
  margin-bottom: -6px;
}

.nv-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.nv-dropzone:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.nv-dz-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--mint-bg);
  color: var(--mint-text);
  font-size: 20px;
}

.nv-dz-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.nv-dz-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.nv-dz-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.nv-dz-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.nv-dz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}

.nv-dz-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.nv-section-label {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-label);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.nv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.nv-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.nv-check:hover {
  border-color: var(--brand-border-soft);
}

.nv-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}

.nv-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

@media (max-width: 540px) {
  .nv-grid {
    grid-template-columns: 1fr;
  }
  .nv-dropzone {
    flex-wrap: wrap;
  }
}

/* ============ CRÉDITO — FLUXO DE POLÍTICA (.flow-*) ============ */
/* Re-skin do Mermaid: cores dos nós/arestas vêm do classDef/linkStyle gerados
   em JS (a lib renderiza o próprio SVG e não consome tokens CSS). Aqui só o
   container, tipografia, legenda, toolbar e o drawer/dialog de edição. */
.flow-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow-tool-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
}

.flow-tool-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-tint);
}

.flow-zoom-lbl {
  min-width: 46px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 4px 14px;
}

.flow-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.flow-legend-line {
  width: 22px;
  height: 0;
  border-top-width: 2.5px;
  border-top-style: solid;
}

.flow-legend-line.aprovado {
  border-top-color: #16a34a;
}

.flow-legend-line.recusado {
  border-top-style: dashed;
  border-top-color: #dc2626;
}

.flow-legend-dot.entry {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--brand);
}

.flow-canvas {
  margin: 0;
  text-align: center;
  background-color: var(--bg-soft);
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 18px 56px;
  height: 62vh;
  min-height: 320px;
  overflow: auto;
  resize: vertical;
}

#flow svg {
  max-width: none;
  height: auto;
  overflow: visible;
  display: inline-block;
}

#flow .nodeLabel {
  font-family: var(--font-sans);
  font-weight: 600;
}

#flow .flow-node-sub {
  display: inline-block;
  margin-top: 2px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  opacity: 0.78;
}

#flow .edgeLabel {
  font-family: var(--font-label);
  font-size: 11px;
}

#flow .node {
  transition: filter .12s;
}

#flow .node:hover {
  filter: drop-shadow(0 3px 10px rgba(37, 99, 235, 0.35));
}

/* drawer de edição da etapa (single-col, sobrescreve o grid 2-col do .drawer-body) */
.flow-edit-body {
  flex: 1;
  overflow: auto;
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.flow-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flow-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-label);
}

.flow-field input,
.flow-field select,
.flow-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-surface);
  font: 13px var(--font-sans);
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
}

.flow-field input:focus,
.flow-field select:focus,
.flow-field textarea:focus {
  border-color: var(--brand);
}

.flow-field textarea {
  resize: vertical;
}

/* Tabela de variáveis disponíveis no critério da etapa (§12.11) */
.flow-var-hint {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}

.var-table {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.var-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-surface);
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.var-row:last-child {
  border-bottom: none;
}

.var-row:hover {
  background: var(--brand-tint);
}

.var-tok {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 2px 7px;
  border-radius: 5px;
}

.var-row:hover .var-tok {
  background: var(--brand-soft);
}

.var-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.flow-ramo-ico.aprovado {
  color: #16a34a;
}

.flow-ramo-ico.recusado {
  color: #dc2626;
}

.flow-edit-foot {
  justify-content: space-between;
}

.flow-del-btn {
  color: #dc2626;
  border-color: var(--border);
}

.flow-del-btn:hover {
  background: var(--red-bg);
  border-color: var(--red-text);
  color: var(--red-text);
}

.fim-modal {
  width: min(460px, 100%);
}

.fim-body {
  padding: 20px 22px 22px;
}

.fim-desc {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.fim-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ============ CRÉDITO — DASHBOARD DARK (.dash-dark, .kpi-*, .rk-*) ============ */
/* Tela dark dedicada: redefine os tokens semânticos em escopo, então .card/.stat/
   .legend-row etc. herdam o tema escuro automaticamente. Cores de risco/charts são
   literais (mesma exceção dos gráficos SVG/conic e do mermaid). */
.dash-dark {
  --bg-app: #0b1220;
  --bg-surface: #111a2e;
  --bg-soft: #0e1730;
  --bg-softer: #1e293b;
  --border: #1f2a44;
  --border-strong: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-muted: #64748b;
  --text-label: #94a3b8;
  --brand-tint: #172554;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.dash-body {
  padding: 20px 24px 24px;
}

/* search / filter bar */
.dash-search {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dash-search-input {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
}

.dash-search-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: 13px var(--font-sans);
  color: var(--text-primary);
}

.dash-search-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.dash-chip:hover {
  border-color: var(--brand);
  color: var(--text-primary);
}

.dash-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 9px;
  gap: 2px;
}

.dash-seg-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--text-tertiary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.dash-seg-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.dash-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 9px;
  background: #16a34a;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}

.dash-go:hover {
  background: #15803d;
}

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 12px;
  padding: 14px 16px;
}

.kpi.green {
  border-left-color: #22c55e;
}

.kpi.amber {
  border-left-color: #f59e0b;
}

.kpi.red {
  border-left-color: #ef4444;
}

.kpi.blue {
  border-left-color: var(--brand);
}

.kpi-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.kpi-val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.kpi-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.kpi-badge.pos {
  background: rgba(34, 197, 94, .16);
  color: #4ade80;
}

.kpi-badge.warn {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}

.kpi-badge.neg {
  background: rgba(239, 68, 68, .16);
  color: #f87171;
}

.kpi-badge.info {
  background: rgba(148, 163, 184, .16);
  color: #94a3b8;
}

.kpi-label {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* risk split: tabela + sinais IA */
.rk-split {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 300px;
  gap: 20px;
  align-items: start;
}

.rk-legend {
  display: flex;
  gap: 14px;
}

/* tabela de risco (grid, sem <table>) */
.rk-table {
  display: flex;
  flex-direction: column;
}

.rk-thead,
.rk-row {
  display: grid;
  grid-template-columns: 1.6fr .9fr .9fr .8fr 1fr 1.2fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
}

.rk-table.detail .rk-thead,
.rk-table.detail .rk-row {
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr;
}

.rk-thead {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.rk-row {
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.rk-row:last-of-type {
  border-bottom: none;
}

.rk-ag {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rk-ag b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.rk-ag small {
  font-size: 11px;
  color: var(--text-muted);
}

.rk-num {
  font-weight: 700;
}

.rk-num.red {
  color: #f87171;
}

.rk-num.amber {
  color: #fbbf24;
}

.rk-num.mint {
  color: #4ade80;
}

.rk-score {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.rk-bar {
  display: inline-block;
  width: 40px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-softer);
  overflow: hidden;
}

.rk-bar.wide {
  width: 100%;
  max-width: 90px;
}

.rk-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.rk-fill.amber {
  background: #f59e0b;
}

.rk-fill.mint {
  background: #22c55e;
}

.rk-fill.red {
  background: #ef4444;
}

.rk-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.rk-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.rk-pill.atencao {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}

.rk-pill.ok {
  background: rgba(34, 197, 94, .16);
  color: #4ade80;
}

.rk-tlegend {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 14px 0 2px;
}

/* lado: distribuição de sinais IA */
.rk-side {
  border-left: 1px solid var(--border);
  padding-left: 20px;
}

.rk-side-title,
.rk-bars-title {
  display: block;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.rk-pie {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 auto 18px;
}

.rk-pie.sm {
  width: 110px;
  height: 110px;
}

.rk-sig {
  display: flex;
  flex-direction: column;
}

.rk-sig-head {
  display: grid;
  grid-template-columns: 1fr 44px 44px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.rk-sig-row {
  display: grid;
  grid-template-columns: 1fr 44px 44px;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.rk-sig-row:last-child {
  border-bottom: none;
}

.rk-sig-row span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rk-sig-row b {
  color: var(--text-primary);
  text-align: right;
}

/* distribuição de risco e sinais (bars + pie) */
.rk-dist {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 1fr;
  gap: 20px;
  align-items: center;
}

.rk-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rk-bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rk-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.rk-bar-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.rk-bar-row .rk-bar.wide {
  max-width: none;
}

.rk-dist-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rk-pie-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rk-split,
  .rk-dist {
    grid-template-columns: 1fr;
  }
  .rk-side {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
  }
}

/* TOAST NOTIFICATION (§Global Feedback) */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--text-primary);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
  font-size: 13px;
  font-weight: 500;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast i {
  font-size: 18px;
}

.toast.success i {
  color: var(--mint-dot);
}

.toast.info i {
  color: var(--brand-border-soft);
}

/* ==========================================================================
   REPORT DATA TABLE (Dense layout for audits, reports and verification)
   ========================================================================== */
.rep-table-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  margin-bottom: 18px;
}

.rep-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.rep-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
}

.rep-table thead {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.rep-table th {
  padding: 10px 14px;
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-label);
  border-right: 1px solid var(--border-soft);
  user-select: none;
}

.rep-table th:last-child {
  border-right: none;
}

.rep-table tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background .12s;
  cursor: pointer;
}

.rep-table tbody tr:hover {
  background: var(--bg-soft);
}

.rep-table tbody tr.active {
  background: var(--brand-tint);
}

.rep-table tbody tr.is-error {
  background: #FFF7F7;
}

.rep-table tbody tr.is-error:hover {
  background: #FEECEC;
}

.rep-table td {
  padding: 9px 14px;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-soft);
  vertical-align: middle;
}

.rep-table td:last-child {
  border-right: none;
}

/*
  Relatorio: a rep-table e um p:dataTable, e `.ui-datatable tbody td` do tema
  vence `.rep-table td` por especificidade — a linha fica com 4px e as duas
  linhas de texto da celula colam. Aqui a regra so alcanca a tabela que tem as
  duas classes, entao a rep-table das outras telas segue com a densidade padrao.
*/
.ui-datatable.rep-table thead th {
  padding: 12px 10px;
}

/* horizontal segue em 10px: com 14px a coluna Codigo sai do card */
.ui-datatable.rep-table tbody td {
  padding: 12px 10px;
}

.rep-table td.strong,
.rep-table .td-strong {
  font-weight: 600;
  color: var(--text-primary);
}

.rep-table .td-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-primary);
}

.rep-table .td-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.rep-table .partner-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--text-primary);
}

.rep-table .partner-cell .rec-logo {
  width: 22px;
  height: 22px;
  font-size: 10px;
  border-radius: 5px;
}

.rep-table .plate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: #FFFFFF;
  border: 1.5px solid #1E293B;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #0F172A;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.rep-table .plate-badge span.flag {
  font-size: 7.5px;
  background: #003399;
  color: #FFFFFF;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.rep-table .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.rep-table .status-pill.success {
  background: var(--mint-bg);
  color: var(--mint-text);
}

.rep-table .status-pill.error {
  background: var(--coral-bg);
  color: var(--coral-text);
}

.rep-table .acts-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rep-table .acts-cell .act {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all .12s;
}

.rep-table .acts-cell .act:hover {
  background: var(--brand-tint);
  border-color: var(--brand-border-soft);
  color: var(--brand);
}
/* ============ UTILITIES — SCROLL E TEXTO ============ */
/* substituem `style="height:NNNpx; overflow:scroll"` e `text-transform` inline */

.u-scroll-y {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.u-max-h-sm { max-height: 280px; }
.u-max-h-md { max-height: 425px; }
.u-max-h-lg { max-height: 620px; }

.u-uppercase { text-transform: uppercase; }