:root{
    --background-head: #e1e1e1;
    --background-contrast: #d2d2d2;
    --border-contrast: #4d4d4d;
    --color-borderT: #b1b1b1;
    --background-scroll: #e1e1e1;
    --color-casillaSinValor: var(--color-band-TG);
}

&[data-theme='light'] {
  --background-head: #e1e1e1;
  --background-contrast: #d2d2d2;
  --border-contrast: #4d4d4d;
  --color-borderT: #b1b1b1;
  --background-scroll: #e1e1e1;
  --color-casillaSinValor: var(--color-band-TG);
}

&[data-theme='dark'] {
  --background-head: #767676;
  --background-contrast: #303030;
  --border-contrast: #ffffff;
  --color-borderT: #494949;
  --background-scroll: #454545;
  --color-casillaSinValor: #375c0a;
}

#ContainerTableTraking {

  overflow: auto;
  max-height: 453px;
  padding-bottom: 2px !important;

  /* Centrar visualmente la barra de scroll */
  &::-webkit-scrollbar {
    height: 8px; /* Altura de la barra de desplazamiento */
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--background-scroll);
    margin-left: 600px;
    margin-right: 352px;
    border-radius: 30px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 30px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #818080; /* Color cuando se pasa el cursor */
  }



  & table {
    color:  var(--color-text-S360);
    width: 100%;
    border-collapse: collapse;
    border-top: #d1a33c solid 4px;
    font-size: var(--font-size-normal-S360);
    table-layout: fixed;
    border-spacing: 0; /* Asegura que no haya espacios entre bordes */
    border-collapse: separate; /* Separa los bordes de las celdas para mejor control */

    .headPrimario{
      & th {
        padding: 2px;
        background: var(--background-head);
        color: var(--color-text-S360);
      }
    }

    .headPrincipal{
      & th {
        background: #e1e1e1;
        padding: 0;
        border: none;

        &:nth-child(1){
          width: 75px;
        }

        &:nth-child(2){
          width: 181px;
        }

        &:nth-child(3){
          width: 279px;
        }

        &:nth-child(4){
          width: 65px;
        }

        &.tUno, &.tDos{
          width: 34px;
        }

        &.tTres {
          width: 53px;
        }

        &.tCuarto, &.tCinco{
          width: 59px;
        }

        &.tSeix{
          width: 50px;
        }

        &.tSiete{
          width: 64px;
        }
      }
    }

    .headSegundario{
      & th{
        background: #494949;
        padding: 0px;
        color: white;
      }
      th:first-child {
        user-select: none; /* Para la mayoría de los navegadores */
        -webkit-user-select: none; /* Para Safari */
        -moz-user-select: none; /* Para Firefox */
        -ms-user-select: none; /* Para Internet Explorer y Edge */
      }
    }

    & .headTerciario{
      background: #1f1f1f !important;
      color: #d1a33c !important;
      padding: 3px !important;
    }

    & .headCuaternario{
        & th {
          background: #d1a33c;
          padding: 0px;
          font-size: 11px;

          &.thTotal{
            background: #b87f00;
          }

          &.thSpec {
            background: #a9a9a9;
          }
      }
    }

    & tbody {

      .iconViewParams{
        cursor: pointer;
        font-size: 14px;
        margin-top: 2px;
      }

      & .tdTotal{
        background: var(--background-contrast)
      }

      .conSinvalor{
        background-color: var(--color-casillaSinValor);
      }

      .borderNewTotalAll{
        border-left: 2px solid var(--border-contrast) !important;
      }
      & #codigoValue{
        display: block;
        max-height: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }


    & .frozen-column {
      position: sticky;
      left: 0; /* Congela la columna a la izquierda */
      z-index: 1; /* Asegura que esté por encima de las otras celdas */

      &:nth-child(2) {
        left: 75px; /* Ajusta la posición de la segunda columna congelada */
      }
      &:nth-child(3) {
          left: 256px; /* Ajusta la posición de la tercera columna congelada */
      }
      &:nth-child(4) {
        left: 535px; /* Ajusta la posición de la tercera columna congelada */
      }
    }

    & .frozenT{
      position: sticky;
      right: 0;
      z-index: 1;

      &.frozenTUno {
        right: 319px;
      }
      &.frozenTDos {
        right: 285px;
      }
      &.frozenTTres {
        right: 232px;
      }
      &.fronzenTCuatro {
        right: 173px;
      }
      &.frozenTCinco {
        right: 114px;
      }
      &.frozenTSeis {
        right: 64px;
      }
    }

    & .borderHidel{
      border-left: transparent;
    }

    & .borderHider{
      border-right: transparent;
    }

    & .borderRR{
      border-right: 1px solid var(--border-contrast) !important;
    }

    & .borderRL{
      border-left: 1px solid var(--border-contrast) !important;
    }

    & .TableFotter{
      border: transparent;

      & td {
        background: var(--background-head);
        padding: 2px;
        color: var(--color-text-S360);
        font-weight: bold;
        border: transparent;

        &.title {
          background: var(--background-contrast);
          border: transparent;
        }
        &.titleT {
          background: #d1a33c;
          border: transparent;
        }
        &.kpiSucces{
          border: 1px solid #2da14e;
          background: #2da14e;
          color: white !important;
        }
        &.kpiDanger{
          border: 1px solid #cb1111;
          background: #cb1111;
          color: white !important;
        }

        &.frozenTCuatro{
          right: 173px;
        }

      }
    }

    & th, & td {
      border: 1px solid var( --color-borderT);
      padding: 3px;
      text-align: center;
      vertical-align: middle;
    }
    & th {
      background-color: #f2f2f2;
      color: black;
    }

    & td {
      background-color: var(--background-S360);
      & .fa-eye {
        cursor: pointer;
      }
    }

    & img {
      width: 20px;
      height: 20px;
    }

    & tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    & tfoot td {
      background-color: #f2f2f2;
    }

  }
}

.titleTableTracking {
  border-top: solid 1px #b8b8b8;
  color: #d1a33c;
  font-weight: bold;
  padding: 8px;
  font-size: var(--font-size-large-S360);
  position: sticky;
  left: 0;
}


@media (max-width: 1200px) {
  /* Ajustes para pantallas pequeñas */
  .fixed {
    width: 100px;
  }
}

@media (max-width: 450px) {
  #ContainerTableTraking {
    & table {
        & .frozen-column {
            position: static;
        }
        & .frozenT{
          position: static;
        }
    }
  }
}