:root {
	--font-family: 'Libre Franklin', 'Arial', sans-serif;
  ---animation-delay: .3s;
  --color-td-Table: #828282;
  --color-first-head:  #dbdbdb;
  --background-headModal: #d3a32b;
  --color-textHeadModal:black;

  &[data-theme="dark"]{
    --color-primary: #1F1F1F;
    --color-td-Table: var(--color-text-S360);
    --color-first-head: #494949;
    --background-headModal:#1f1f1f;
    --color-textHeadModal: #d1a33c ;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

html {
	width: 100%;
	height: 100%;
	padding: 10px;
	scroll-behavior: smooth;
	background-color: var(--background-S360);
  transition: background-color var(---animation-delay);
  overflow-x: hidden;
}

body {
	overflow-x: hidden;
	height: 100%;

  /* 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);
    border-radius: 30px;
  }

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

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

}

.basic-input--disabled .block-icon{
  display: none;
}

.basic-input--filled {
  #I_Fecha {
    cursor: pointer;
  }
  & label {
    cursor: pointer !important;
  }
}

.DisplayNone{
  display: none !important;
}

button:disabled {
  opacity: 0.3;
  cursor: not-allowed;

  & span {
    cursor: not-allowed !important;
  }
}

#root{
  height: 100%;
  overflow: hidden;
}

.mainContainer {
  height: 100%;
}

#containerTableCalculos {
  & table {
      table-layout: fixed;
      border-spacing: 0;
      border-collapse: separate;
      border: 0.5px solid #ccc;
    & th {
      background-color:  var(--background-headModal);
      color:  var(--color-text-S360);
      font-size: var(--font-size-normal-S360);
      text-align: center;
    }

    & thead {
      & tr {
        & th:first-child{
          color: var(--color-textHeadModal);
        }
      }
    }

    & tbody {
      & .tdVariable{
        font-weight: bold;
      }
    }

    & td {
      font-size: var(--font-size-normal-S360);
      color: #828282;
    }

    & td, & th {
      border-bottom: 0.5px solid #ccc;
      padding: 2px;
      text-align: center;
      color: var(--color-td-Table);
    }

    & th:first-child {
      border-bottom: none;
    }

    &.estadistica{
      min-width: 200px !important;
    }
  }

  &.tableParametros{
    max-height: 400px;
    overflow-y: auto;
    padding-right: 2px;

    table {
      thead tr{
        position: sticky;
        top: 0;
      }
    }

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

    &::-webkit-scrollbar-track {
      background-color: var(--background-scroll);
      border-radius: 30px;
    }

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

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

  }
}

.content-button:has(#B_excel){
  width: 8%;
  font-size: 10px;
  position: absolute;
  right: 32px;
  /* Estilo para el botón */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.divExcel{
    /* Estilo para el spinner */
    .loading-spinner {
      border: 4px solid #f3f3f3; /* Fondo del círculo */
      border-top: 4px solid #3498db; /* Color de la parte superior */
      border-radius: 50%;
      width: 20px;
      height: 20px;
      animation: spin 2s linear infinite;
      right: 190px;
      position: absolute;
    }

  /* Animación del spinner */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

}