#relacaoMateriaisContainer {
  width: 100%;
  padding: var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  box-sizing: border-box;
}

/* ============================================================
   Cabeçalho
   ============================================================ */

.rel-mat-cabecalho {
  margin-bottom: var(--sp-4);
  text-align: center;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.rel-mat-linha1,
.rel-mat-linha2,
.rel-mat-linha3 {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: .3px;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}

.rel-mat-linha3 {
  background: var(--c-surface-alt);
  border-bottom: none;
}

/* ============================================================
   Tabela
   ============================================================ */

.rel-mat-tabela {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--c-text);
  background: var(--c-surface);
}

.rel-mat-tabela th,
.rel-mat-tabela td {
  padding: 5px var(--sp-2);
  vertical-align: middle;
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  overflow-wrap: break-word;
  line-height: 1.3;
}

.rel-mat-tabela thead th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  color: var(--c-text);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border-strong);
}

/* ============================================================
   Grupo (tipo de rede)
   ============================================================ */

.rel-mat-grupo td {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .4px;
  text-align: left;
  color: var(--c-text);
  background: var(--c-border);
}

/* ============================================================
   Linhas de itens
   ============================================================ */

.rel-mat-linha td { background: var(--c-surface); }

.rel-mat-linha:nth-child(even) td {
  background: var(--c-surface-alt);
}

.rel-mat-linha:hover td {
  background: var(--c-accent-soft);
}

/* ============================================================
   Células específicas
   ============================================================ */

.rel-mat-tabela .col-center    { text-align: center; }
.rel-mat-tabela .col-num       {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rel-mat-tabela .col-descricao { text-align: left; }

/* ============================================================
   Estado vazio
   ============================================================ */

.rel-mat-vazio {
  padding: var(--sp-6) var(--sp-4);
  font-size: var(--fs-base);
  font-style: italic;
  text-align: center;
  color: var(--c-text-muted);
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 768px) {
  #relacaoMateriaisContainer { padding: var(--sp-3); }

  .rel-mat-tabela { font-size: var(--fs-2xs); }

  .rel-mat-tabela th,
  .rel-mat-tabela td { padding: var(--sp-1) var(--sp-2); }

  .rel-mat-grupo td {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-2xs);
  }
}