/**
 * CSS Modules — Tables
 * Data tables, Pagination, Status pills
 * Check Pro v12.44.782 — Minimalista Premium
 */

/* ═══ TABLE CONTAINER ═══ */
.table-container {
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-lg); overflow: hidden;
}
.table-scroll { overflow-x: auto; }

/* ═══ TABLE ═══ */
.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.05em; text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary); vertical-align: middle;
}
.table tbody tr { transition: background var(--duration-fast); }
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: none; }

/* Sortable columns */
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--text-primary); }
.table th.sorted::after { content: ' ↑'; color: var(--accent); }
.table th.sorted.desc::after { content: ' ↓'; }

/* ═══ TABLE CELL VARIANTS ═══ */
.cell-muted { color: var(--text-muted); }
.cell-secondary { color: var(--text-secondary); }
.cell-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.cell-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-nowrap { white-space: nowrap; }

/* ═══ TABLE ACTIONS ═══ */
.cell-actions {
  display: flex; align-items: center; gap: var(--space-1);
  justify-content: flex-end;
}
.cell-actions .btn-icon { opacity: 0; transition: opacity var(--duration-fast); }
.table tbody tr:hover .cell-actions .btn-icon { opacity: 1; }

/* ═══ TABLE SELECTION ═══ */
.table-select {
  width: 18px; height: 18px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  accent-color: var(--accent);
}
.table-selected { background: var(--accent-subtle) !important; }

/* ═══ TABLE TOOLBAR ═══ */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  gap: var(--space-3); flex-wrap: wrap;
}
.table-toolbar-left { display: flex; align-items: center; gap: var(--space-3); }
.table-toolbar-right { display: flex; align-items: center; gap: var(--space-2); }
.table-count { font-size: var(--text-xs); color: var(--text-muted); }

/* ═══ PAGINATION ═══ */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--text-muted);
}
.pagination-info { font-size: var(--text-xs); }
.pagination-controls { display: flex; align-items: center; gap: var(--space-1); }
.pagination-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 var(--space-2);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary); border-radius: var(--radius-md);
  transition: all var(--duration-fast); cursor: pointer;
}
.pagination-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.pagination-btn.active { background: var(--accent); color: var(--text-inverse); }
.pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ═══ EMPTY TABLE ═══ */
.table-empty {
  padding: var(--space-12) var(--space-4);
  text-align: center; color: var(--text-muted);
}

/* ═══ TABLE COMPACT ═══ */
.table-compact .table th { padding: var(--space-2) var(--space-3); }
.table-compact .table td { padding: var(--space-2) var(--space-3); }

/* ═══ TABLE STRIPED ═══ */
.table-striped tbody tr:nth-child(even) { background: var(--bg-hover); }

/* ═══ DATA-TABLE (app-shell) ═══ */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; text-align: left; border-bottom: 1px solid var(--border); background: var(--bg-card); white-space: nowrap; }
.data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--bg-hover); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .table-toolbar-left, .table-toolbar-right { width: 100%; }
  .pagination { flex-direction: column; gap: var(--space-3); text-align: center; }
  /* Tablas → Cards en móvil */
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr { display: block; width: 100%; }
  .data-table tr { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); padding: var(--space-3); background: var(--bg-card); }
  .data-table td { display: flex; justify-content: space-between; align-items: center; border: none; padding: var(--space-2) 0; }
  .data-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; }
  .data-table td:last-child { justify-content: flex-end; }
}