/* =====================================================================
   Ruta en GitHub : frontend/css/componentes/tabla.css
   Proyecto       : DR ORGANICS - Sistema Administrativo y Financiero
   Descripción    : Tablas tipo Excel.

   Reglas que cumple:
     - Encabezado fijo cuando hay desplazamiento.
     - Importes alineados a la derecha.
     - Totales alineados con su columna.
     - En celular NO se convierte en tarjetas: la tabla se mantiene y
       se desplaza horizontalmente.
   ===================================================================== */





/* Contenedor con desplazamiento vertical y horizontal. */
.tabla-contenedor {
  overflow: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
}





.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}





.tabla th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  padding: 0 12px;
  background: var(--encabezado-tabla);
  border-bottom: 1px solid #D5DACB;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--texto-suave);
  white-space: nowrap;
}





.tabla td {
  height: 36px;
  padding: 0 12px;
  background: var(--superficie);
  border-bottom: 1px solid #E8EBE2;
  white-space: nowrap;
}





/* Fila resaltada al pasar el cursor. */
.tabla tbody tr:hover td {
  background: var(--fila-hover);
}





/* Importes y cantidades: alineados a la derecha, cifras de ancho fijo. */
.tabla .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}





.tabla tfoot td {
  height: 34px;
  background: #F7F8F4;
  font-weight: 700;
}





/* Columna de acciones: iconos en una sola línea. */
.tabla__acciones {
  display: inline-flex;
  gap: 2px;
  opacity: 0.6;
  transition: opacity var(--transicion);
}





.tabla tbody tr:hover .tabla__acciones {
  opacity: 1;
}





/* Registro anulado. */
.tabla tr.anulada td {
  color: #8A9284;
}





/* Mensaje cuando no hay resultados. */
.tabla__vacia {
  padding: 32px 16px;
  text-align: center;
  color: var(--texto-tenue);
}





/* En pantallas táctiles no existe el cursor: las acciones se ven siempre. */
@media (hover: none) {

  .tabla__acciones {
    opacity: 1;
  }

}