/* ===========================================================================
   public/css/tables.css
   Tabla de datos y utilidades de tabla.

   Parte 8 de 12 de la hoja de estilos. El orden de carga IMPORTA:
   se enlazan en este mismo orden desde index.html y dashboard.html.
   =========================================================================== */
/* ===== 15. DATA TABLE ===== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.data-table thead th {
  background: var(--bg-raised);
  padding: .5rem 1rem;
  text-align: left;
  font-size: .73rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover); }

.data-table tbody td {
  padding: .5rem 1rem;
  color: var(--text-primary);
  vertical-align: middle;

  /* ── Que un texto largo no rompa la tabla ─────────────────────────────────
     Las descripciones de repuestos traen codigos de fabrica sin espacios que
     pasan holgados los treinta caracteres. Sin esta regla el navegador se
     niega a cortarlos —una "palabra" no se parte— y la celda empuja la tabla
     a lo ancho hasta que aparece la barra horizontal: las columnas de la
     derecha (los montos, el estado) se van fuera de la vista por culpa de UNA
     fila.

     `break-word` y no `anywhere` a proposito: los dos cortan cuando hace
     falta, pero `anywhere` ademas le dice al navegador que la celda puede
     achicarse hasta una letra, y entonces reparte los anchos como si todas
     las columnas fueran igual de flexibles. El resultado es una tabla que se
     redibuja distinto segun el contenido de la peor fila.

     Aca estuvo tambien `text-wrap: pretty`, que evita el renglon terminado en
     una sola palabra colgada. Se saco: hoy solo lo entiende Chrome — ni
     Firefox ni Safari — asi que la mayoria no lo veria nunca, y a cambio deja
     un aviso permanente en el editor. Es un retoque, no la solucion; la
     solucion es la linea de abajo. */
  overflow-wrap: break-word;
}

/* ── Cifras que se comparan entre filas ──────────────────────────────────────
   `tabular-nums` fuerza que todos los digitos ocupen lo mismo, asi que las
   unidades quedan bajo las unidades y las decenas bajo las decenas. Sin esto,
   en una fuente proporcional el 1 es mas angosto que el 8 y las columnas de
   numeros salen dentadas: comparar 1.248 con 96 de un vistazo se vuelve
   imposible y hay que leerlos uno por uno.

   Se aplica a .text-right porque en estas tablas la alineacion a la derecha ya
   significa "esto es una cantidad o un monto". */
.data-table td.text-right,
.data-table th.text-right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.table-actions {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: nowrap;
}

/* ===== 28. TABLE utilities ===== */
.text-right { text-align: right; }

/* Celda del estado vacío de una tabla: reemplaza al style="" que estaba
   repetido en cada tabla con el mismo texto centrado y gris. */
.empty-cell {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
}

/* Columna del número de ranking. Sólo aparece en la vista de empresa: en «mis
   clientes» ordenar por volumen no es una competencia, y numerar la propia
   cartera del 1 al 40 no aporta nada. */
.rank-cell {
  color: var(--text-secondary);
  width: 2.5rem;
}


/* ── Densidad ────────────────────────────────────────────────────────────────
   El relleno de las celdas bajo de .7rem a .5rem. Parece poco y son cuatro
   filas mas por pantalla en un listado de veinte: la diferencia entre ver una
   pagina entera de cotizaciones sin scrollear y no verla.

   La app es una herramienta de trabajo, no una pagina para leer de corrido.
   El aire generoso ayuda a un texto largo; en una tabla que se recorre decenas
   de veces por dia, obliga a scrollear de mas. */

/* La primera columna suele ser el identificador (correlativo, codigo): que
   aguante el ancho evita que se parta en dos lineas y descuadre la fila. */
.data-table tbody td:first-child { white-space: nowrap; }

/* Franjas alternadas MUY sutiles. Con filas apretadas el ojo se pierde de
   renglon; el tinte guia sin competir con el hover, que es el que indica
   donde esta el cursor. */
.data-table tbody tr:nth-child(even) { background: rgba(127, 141, 166, .045); }
.data-table tbody tr:nth-child(even):hover { background: var(--bg-hover); }