.tabela-responsiva--operacional {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--borda);
  background: var(--painel);
  scrollbar-gutter: stable;
}

.tabela-operacional {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: auto;
}

.tabela-operacional th,
.tabela-operacional td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: middle;
}

.tabela-operacional th {
  background: var(--painel-2);
  color: var(--texto-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela-operacional tbody tr:hover,
.tabela-operacional tbody tr:focus-within {
  background: var(--painel-2);
}

.tabela-operacional tbody tr:last-child td {
  border-bottom: 0;
}

.tabela-operacional__principal {
  min-width: 180px;
  display: grid;
  gap: 4px;
}

.tabela-operacional__principal strong {
  font-size: 13px;
}

.tabela-operacional__secundario,
.tabela-operacional code {
  display: block;
  max-width: 300px;
  overflow: hidden;
  color: var(--texto-2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabela-operacional__status,
.tabela-operacional__numero,
.tabela-operacional__acoes {
  width: 1%;
  white-space: nowrap;
}

.tabela-operacional__acoes {
  text-align: right !important;
}

.tabela-operacional__acoes .botao {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 11px;
}

.tabela-operacional__detalhes td {
  padding: 0;
  background: #0b100e;
}

.tabela-operacional__detalhes[hidden] {
  display: none;
}

.tabela-operacional__painel-detalhes {
  padding: 16px;
  display: grid;
  gap: 16px;
}

.tabela-operacional__grade-detalhes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tabela-operacional__grade-detalhes h3 {
  margin: 0 0 8px;
  color: var(--texto-2);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tabela-operacional__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tabela-operacional__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tabela-operacional__pesquisa {
  width: min(520px, 100%);
  margin: 0;
}

.tabela-operacional__contagem {
  color: var(--texto-2);
  font-size: 11px;
  white-space: nowrap;
}

.tabela-operacional__linha-atual {
  background: var(--painel-3);
  box-shadow: inset 2px 0 var(--destaque);
}

.painel-saude > .tabela-responsiva--operacional,
.integracao-painel > .tabela-responsiva--operacional {
  border: 0;
}

.tabela-operacional--saude {
  min-width: 760px;
}

.tabela-operacional--saude .status-chip.critico {
  border-color: #6d3d3d;
  color: #ef9a9a;
}

.tabela-operacional--saude .status-chip.atencao {
  border-color: #6c5b36;
  color: #d3b67b;
}

.integracao-painel > .tabela-operacional__barra {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda);
}

.tabela-operacional--integracao {
  min-width: 760px;
}

.tabela-operacional--integracao .tabela-operacional__metodo {
  width: 1%;
  white-space: nowrap;
}

.tabela-operacional--integracao .tabela-operacional__metodo span {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid #3f554c;
  color: var(--destaque-forte);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.tabela-operacional--integracao code.tabela-operacional__endpoint {
  max-width: 560px;
  color: var(--texto);
}

@media (max-width: 760px) {
  .tabela-operacional {
    min-width: 680px;
  }

  .tabela-operacional--saude,
  .tabela-operacional--integracao {
    min-width: 720px;
  }

  .tabela-operacional__grade-detalhes {
    grid-template-columns: 1fr;
  }

  .tabela-operacional__barra {
    align-items: stretch;
    flex-direction: column;
  }

  .tabela-operacional__contagem {
    align-self: flex-end;
  }
}