:root {
	--font-family: 'Libre Franklin';
  --suite-padding: 10px;
  --suite-margin: 10px;
  --color-text-contrast-S360: #FFFFFF;
  --header-height: 99px;
  --color-text-white-S360: #FFFFFF;

  --padding: 10px;
  
  --background-option-menu-S360: #C1C1C1;
  
  --spacing-S360-1: 2px;
  --spacing-S360-2: 4px;
  --spacing-S360-3: 8px;
  --spacing-S360-4: 10px;
  --spacing-S360-5: 16px;
  
  
  /* Colores btn Paginado */
  --color-primary: white;
  --color-text-no-cont: #575757;
  --color-page-button: #f1f3f4;
  ---animation-delay: .3s;
  --color-line-VALOR: #785300;

    
  &[data-theme='light'] {

    /* componente turn */
    --bg-color-item: #EBEBEB;
    --bg-color-second-item: #A6A6A6;
    --bg-color-subprocess: #C1C1C1;
    --background-turn-S360: #ffffff;
    --color-icon-turn-S360: #414141;

    /* componente downBar */
    --background-downbar-S360: #E5E5E5;
    --downbar-option-hover: #B9B9B9;
    --downbar-option-icon: invert(0);

    /* componente tabla */
    --color-text-tabla-S360: #505050;
    --bg-contrast-table-1: #efefef;
    --bg-contrast-table-2: #ffffff;

    /* tabcomponent */
    --background-menu-S360: #EEEEEE;

    /* Comment */
    --color-containMessage: #016275;

    /* Swal */
    --color-primary: #FFFFFF;

    --bg-header-turn:#edecec;

    /* componente tabla muestreo */
    --color-text-group: #5A5A5A;
    --bg-group: #D9D9D9;
  }

  &[data-theme='dark'] {

    /* componente turn */
    --bg-color-item: #464646;
    --bg-color-second-item: #313131;
    --bg-color-subprocess: #464646;
    --background-turn-S360: #4f4f4f;
    --border-turn-name: 0.5px solid var(--color-border-S360);
    --color-icon-turn-S360: #ffffff;

    /* componente downBar */
    --background-downbar-S360: #111111;
    --downbar-option-hover: var(--bg-color-item);
    --downbar-option-icon: invert(1);

    /* componente tabla */
    --color-text-tabla-S360: #FFFFFF;
    --bg-contrast-table-1: var(--color-suite-tertiary-S360);
    --bg-contrast-table-2: var(--color-suite-tertiary-S360);

    /* tabcomponent */
    --background-menu-S360: #1f1f1f;

    /* Comment */
    --color-containMessage: #17A2B8;

    /* Swal */
    --color-primary: #1F1F1F;

    --bg-header-turn:#8a8a8a;

    /* componente tabla muestreo */
    --color-text-group: #FFFFFF;
    --bg-group: #676767;

    /* Colores btn Paginado */
    --color-primary: #1F1F1F;
    --color-text: #FFFFFF;
    --color-text-no-cont: #d3d3d3;
    --color-page-button: #484848;
    --color-line-VALOR: #69422a;
  }

}

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

.basic-input {
  & label {
    font-family: var(--font-family-2);
    white-space: inherit !important;
  }
}

html {
	width: 100%;
	height: 100%;
	/* padding: 10px; */
	scroll-behavior: smooth;
	background-color: var(--background-S360);
  transition: background-color var(--time-transition-S360);
}

body {
	overflow: hidden;
	/* height: 100%; */
  padding: var(--padding);

  & .select-menu {
    & .sBtn-title {
      cursor: pointer;
    }
    & .options {
      & .scroll {
        & .container-options {
          max-height: 250px;
        }
      }
    }
  }

}

.Evolución{
  --tipo : 4;
}

.Comparación{
  --tipo : 5;
}

.swalOPC {
  & .swalOPC-header {
    & .swalOPC-title {
      align-items: center;
      display: flex;
      gap: var(--spacing-S360-2);
    }
  }
}

.popover-opc {
  & .popover-body {
    color: var(--color-text-S360);
  }
}

/* Estilos para poner la flecha en los popover */
.popoverLimits .arrow::after, .popoverLimits .arrow::before,
.popoverCantidad .arrow::after, .popoverCantidad .arrow::before {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.bs-popover-auto[x-placement^=left], .bs-popover-left {
  margin-right: .5rem;
}
.bs-popover-auto[x-placement^=left]>.arrow, .bs-popover-left>.arrow {
  right: calc(-.5rem - 1px);
  width: .5rem;
  height: 1rem;
  margin: .3rem 0;
}
.bs-popover-auto[x-placement^=right]>.arrow::before, .bs-popover-right>.arrow::before {
  left: 0;
  border-width: .5rem .5rem .5rem 0;
  border-right-color: rgba(0, 0, 0, .25);
}
.bs-popover-auto[x-placement^=left]>.arrow::before, .bs-popover-left>.arrow::before {
  right: 0;
  border-width: .5rem 0 .5rem .5rem;
  border-left-color: rgba(0, 0, 0, .25);
}
.bs-popover-auto[x-placement^=right]>.arrow::after, .bs-popover-right>.arrow::after {
  left: 1px;
  border-width: .5rem .5rem .5rem 0;
  border-right-color: #fff;
}
.bs-popover-auto[x-placement^=left]>.arrow::after, .bs-popover-left>.arrow::after {
  right: 1px;
  border-width: .5rem 0 .5rem .5rem;
  border-left-color: #fff;
}

/* Estilos para poner la flecha en los tooltip */
.bs-tooltip-auto[x-placement^=right], .bs-tooltip-right {
  padding: 0 .4rem;
}
.bs-tooltip-auto[x-placement^=left], .bs-tooltip-left {
  padding: 0 .4rem;
}
.bs-tooltip-auto[x-placement^=right] .arrow, .bs-tooltip-right .arrow {
  left: 0;
  width: .4rem;
  height: .8rem;
}
.bs-tooltip-auto[x-placement^=left] .arrow, .bs-tooltip-left .arrow {
  right: 0;
  width: .4rem;
  height: .8rem;
}
.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
  right: 0;
  border-width: .4rem .4rem .4rem 0;
  border-right-color: #000;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
  left: 0;
  border-width: .4rem 0 .4rem .4rem;
  border-left-color: #000;
}

.container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto calc(100% - 33px);
  gap: var(--spacing-S360-2);
  grid-template-areas:
      "header"
      "main";
  height: calc(100vh - var(--padding)* 2);

  & .separator {
    width: 100%;
    height: 0.1px;
    background: var(--color-border-S360);
  }
}