: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 {

  user-select: none;
  overflow: auto;
  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: 478px;
    border-radius: 30px;
  }

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

  &::-webkit-scrollbar-corner {
    background-color: transparent; /* Elimina el cuadro blanco */
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #818080; /* Color cuando se pasa el cursor */
  }
  &::-webkit-scrollbar-thumb:active {
    background: #b4b0b0; /* 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: 150px;
        }

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

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

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

        &.tTres {
          width: 100px;
        }

        &.tCuarto, &.tCinco, &.tSeis{
          width: 80px;
        }
      }
    }

    .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: #a9a9a9;
          }

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

    & tbody {

      .iconViewParams{
        cursor: pointer;
        font-size: 14px;
        margin-top: 2px;
        &:hover{
          color: opacity(0.8);
          font-size: 15px;
          box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
      }

      & .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;
      }

      td[contenteditable="true"] {
        background-color: var(--background-S360);
        cursor: pointer;
      }
    }


    & .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: 150px; /* Ajusta la posición de la segunda columna congelada */
      }
      &:nth-child(3) {
          left: 537px; /* Ajusta la posición de la tercera columna congelada */
      }
    }

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

      &.frozenTUno {
        right: 410px;
      }
      &.frozenTDos {
        right: 340px;
      }
      &.frozenTTres {
        right: 240px;
      }
      &.fronzenTCuatro {
        right: 160px;
      }
      &.frozenTCinco {
        right: 80px;
      }
      &.frozenTSeis {
        right: 80px;
      }
    }

    & .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: 340px;
        }

      }
    }

    & 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;
    }

  }
}

#ContainerTableTotalSite .titleTableTracking{
    border-top: solid 1px #b8b8b8;
}

#ContainerTableTraking, #ContainerTableTrakingPack{
  .titleTableTracking{
    font-size: 9px;
  }
}

.titleTableTracking {
  color: #d1a33c;
  font-weight: bold;
  padding: 8px;
  font-size: var(--font-size-large-S360);
  position: sticky;
  left: 0;
  display: flex;
}

.divLoadContainer {
  position: absolute;
  right: 0;
  &.loader-container {
    display: flex;
    .loader {
      border: 6px solid #f3f3f3;
      border-top: 6px solid #d1a33c;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      animation: spin 1s linear infinite;
    }
    .text {
      font-size: var(--font-size-large-S360);
      animation: blink 1.5s infinite;
    }
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
  }
}

.opacityDataSave {
  opacity: 0.5;
}

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