/* Tabela de dados, no estilo dos sistemas operacionais: densa, com linhas finas.
   Uso: <div class="tabela-rolagem"><table class="tabela">...</table></div>.
   Coluna de número: <td class="tabela__numero">. A rolagem lateral evita estourar no celular. */

.tabela-rolagem {
  width: 100%;
  overflow-x: auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabela th,
.tabela td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cor-borda);
}

.tabela th {
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  font-weight: 500;
  letter-spacing: var(--tracado-rotulo);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cor-texto-suave);
  background: var(--cor-superficie-suave);
}

.tabela tbody tr {
  transition: background-color var(--duracao-1);
}

.tabela tbody tr:hover {
  background: var(--cor-superficie-suave);
}

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

.tabela__numero {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tabela__principal {
  font-weight: 620;
  color: var(--cor-texto);
}

.tabela td {
  color: var(--cor-texto-secundario);
}

/* Tabela que vira fichas no celular: cada linha um bloco, cada célula com o seu rótulo.
   Uso: <table class="tabela tabela--empilhavel"> e <td data-rotulo="Ocupante">. */
@media (max-width: 600px) {
  .tabela--empilhavel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabela--empilhavel tr {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cor-borda);
  }

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

  .tabela--empilhavel td {
    display: grid;
    grid-template-columns: 96px 1fr;
    justify-items: start;
    gap: var(--espaco-3);
    padding: 0;
    border: 0;
  }

  .tabela--empilhavel td::before {
    content: attr(data-rotulo);
    font-family: var(--fonte-mono);
    font-size: var(--texto-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
  }

  .tabela--empilhavel td.tabela__principal {
    display: block;
    font-size: var(--texto-md);
  }

  .tabela--empilhavel td.tabela__principal::before {
    content: none;
  }
}