.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.data-table thead{background:var(--bg)}
.data-table thead th{padding:10px 14px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;text-align:left;border-bottom:2px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1}
.data-table tbody tr{transition:var(--transition)}
.data-table tbody tr:hover{background:#f8fafc}
.data-table tbody td{padding:12px 14px;border-bottom:1px solid var(--border-light);color:var(--text);vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table td .flex{display:flex;align-items:center;gap:8px}
.data-table td .thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--bg)}
.data-table .cell-actions{display:flex;gap:4px}
.data-table .cell-actions a,.data-table .cell-actions button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-xs);border:none;cursor:pointer;transition:var(--transition);font-size:13px;background:transparent;color:var(--text-muted)}
.data-table .cell-actions a:hover,.data-table .cell-actions button:hover{background:var(--bg);color:var(--text)}
.data-table .cell-actions .btn-edit:hover{background:var(--primary-light);color:var(--primary)}
.data-table .cell-actions .btn-delete:hover{background:var(--danger-light);color:var(--danger)}
.data-table .cell-actions .btn-view:hover{background:var(--info-light);color:var(--info)}

.table-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}
.table-empty i{font-size:32px;display:block;margin-bottom:10px;color:var(--border)}

@media(max-width:768px){
  .data-table thead{display:none}
  .data-table tbody tr{display:block;padding:14px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;background:#fff}
  .data-table tbody td{display:flex;padding:6px 0;border:none;font-size:13px;gap:8px}
  .data-table tbody td:before{content:attr(data-label);font-weight:600;color:var(--text-muted);width:100px;flex-shrink:0;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
  .data-table .cell-actions:before{content:'Acciones'}
  .data-table .cell-actions{gap:4px;padding-top:6px;flex-wrap:wrap}
  .table-wrap{border:none;border-radius:0}
}