/* Contenedor con scroll horizontal */
  .sg-att-wrap { overflow:auto; background:#fff; border:1px solid #dcdcde; border-radius:8px; }

  /* Tabla */
  .sg-att-table { border-collapse: separate; border-spacing: 0; }

  /* Columna # (opcional fija también) */
  .sg-att-table th.sg-sticky-idx,
  .sg-att-table td.sg-sticky-idx{
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
  }

  /* Columna Nombre fija */
  .sg-att-table th.sg-sticky-name,
  .sg-att-table td.sg-sticky-name{
    position: sticky;
    left: 60px; /* debe coincidir con el ancho de la col # */
    z-index: 4;
    background: #fff;
  }

  /* Encabezados por encima */
  .sg-att-table thead th{
    position: sticky;
    top: 0;
    z-index: 10;
    background: #4b4b4b;
    color: #fff;
  }

  /* Que los sticky de la izquierda queden por encima del header normal */
  .sg-att-table thead th.sg-sticky-idx,
  .sg-att-table thead th.sg-sticky-name{
    z-index: 12;
  }

  /* Separador visual */
  .sg-att-table td.sg-sticky-name,
  .sg-att-table th.sg-sticky-name{
    box-shadow: 2px 0 0 rgba(0,0,0,.08);
  }