Scss não aplicado

Olá! Na parte de exibir o extrato no navegador as linhas decorativas da tabela que deveriam aparecer embaixo de data, valor e destino não aparecem no meu. Já comparei meu código com o do instrutor e parecem estar iguais mas o dele funciona e o meu não. Alguém consegue me ajudar?

extrato.component.html do instrutor:

<table class="tabela">
    <thead class="tabela__cabecalho">
      <th class="tabela__cabecalho__conteudo">Data</th>
      <th class="tabela__cabecalho__conteudo">Valor</th>
      <th class="tabela__cabecalho__conteudo">Destino</th>
    </thead>
    <tbody>
      <tr class="tabela__linha" *ngFor="let transferencia of transferencias">
        <td class="tabela__conteudo">
          {{ transferencia.data | date: "short" }}
        </td>
        <td class="tabela__conteudo">{{ transferencia.valor | currency }}</td>
        <td class="tabela__conteudo">{{ transferencia.destino }}</td>
      </tr>
    </tbody>
  </table>

Meu extrato.component.html:

<table class="tabela">
  <thead class="tabela__cabecalho">
    <th class="tabela__cabelhaco__conteudo">Data</th>
    <th class="tabela__cabelhaco__conteudo">Valor</th>
    <th class="tabela__cabelhaco__conteudo">Destino</th>
  </thead>
  <tbody *ngIf="transferencias?.length; else listaVazia">
    <tr class="tabela__linha" *ngFor="let transferencia of transferencias">
      <td class="tabela__conteudo">{{transferencia.data | date:'short'}}</td>
      <td class="tabela__conteudo">{{transferencia.valor | currency}}</td>
      <td class="tabela__conteudo">{{transferencia.destino}}</td>
    </tr>
  </tbody>
</table>

Código extrato.component.scss:

.titulo {
  text-align: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.tabela {
  text-align: center;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

  &__cabecalho {
    color: var(--primary);

    &__conteudo {
      padding: 10px;
      border-bottom: 2px solid green;
    }
  }

  &__linha {
    margin-bottom: 10px;
    border-radius: 4px;

    &:last-child {
      .tabela__conteudo {
        border-bottom: none;
      }
    }
  }

  &__conteudo {
    padding: 10px;
    border-bottom: 1px solid var(--cinza-claro);
  }
}

Meu extrato.component.scss:

.titulo {
  text-align: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.tabela {
  text-align: center;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

  &__cabecalho {
    color: var(--primary);

    &__conteudo {
      padding: 10px;
      border-bottom: 2px solid green;
    }
  }

  &__linha {
    margin-bottom: 10px;
    border-radius: 4px;

    &:last-child {
      .tabela__conteudo {
        border-bottom: none;
      }
    }
  }

  &__conteudo {
    padding: 10px;
    border-bottom: 1px solid var(--cinza-claro);
  }
}