@layer components {
  /* ------------------ Tablas ------------------------------- */
  .table-responsive {
    width: 100%;
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface);
    font-size: 0.94rem;
  }

  th,
  td {
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--color-border-soft);
    text-align: left;
    vertical-align: middle;
  }

  th {
    background: var(--color-primary-soft);
    color: var(--table-header-text-color);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
  }







  /* Espaciado adaptable de celdas */
  @media (max-width: 768px) {
    th,
    td {
      padding: 12px;
    }
  }
}

/* Compatibilidad de esquinas y hover durante la migración de las páginas. */
th:first-child {
  border-top-left-radius: var(--radius-md);
}

th:last-child {
  border-top-right-radius: var(--radius-md);
}

tr:hover td {
  background: var(--table-row-hover-background);
}