/* ============================================================
   components/table.css — tabla de datos
   Par de resources/views/components/table.blade.php

   La tabla se desplaza sola dentro de .table-wrap en pantallas
   angostas; la página nunca. El contenedor es enfocable por teclado.
   ============================================================ */

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--color-surface);
}

.table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.table caption {
  text-align: left;
  caption-side: top;
  padding: .75rem 1rem;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
}

.table th,
.table td {
  text-align: left;
  padding: .7rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

/* Encabezados como en una ficha técnica: rótulo mono, en versales. */
.table thead th {
  background: var(--color-surface-tint);
  font-family: var(--font-label);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.table tbody th {
  font-weight: 700;
  color: var(--color-ink);
  background: none;
}

.table tbody td { color: var(--color-text-body); }

.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }

/* Primera columna con nombres científicos */
.table--species tbody th { font-style: italic; font-weight: 400; }

/* Tabla angosta (dos columnas cortas): sin ancho mínimo, para que no se
   desplace dentro de una columna de media página. */
.table-wrap--compact .table { min-width: 0; }