@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


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

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

* {
  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 {
    & .options {
      & .scroll {
        & .container-options {
          max-height: 145px;
        }
      }
    }
  }

  & .errorInput {
    border: solid 2px var(--color-danger-LimitPTS) !important;
  }

  & .errorLimit {
    background-color: var(--color-danger-LimitPTS) !important;
  }

  & .table__container[data-view="mobile"], & .table__container[data-view="desktop"] {

      & .options {
        /* width: 100%; */
        & .scroll {
          & .container-options {
            & .option {
              & .option-text {
                font-size: var(--font-size-normal-S360);
                font-family: var(--font-family-2);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                flex: 1;
                padding-right: 10px;
              }
            }
          }
        }
      }

  }
}

body[data-view = "mobile"] {
  overflow: scroll;
  scroll-behavior: smooth;

  &::-webkit-scrollbar-track{
    background-color: transparent;
  }

  &::-webkit-scrollbar{
      width: 5px;
  }

  &::-webkit-scrollbar-thumb
  {
      border-radius: 300px;
      background-color: #999;
  }
}
body[data-view = "desktop"] {
  overflow: hidden;
}


.container {
  display: grid;
  grid-template-columns: 100%;
  /* grid-template-rows: auto 2.3fr 73px;  */
  grid-template-rows: auto 2.3fr;
  gap: var(--spacing-S360-4);
  grid-template-areas:
    "header"
    "main";
  height: calc(100vh - var(--padding)*2);
  & .header {
    display: grid;
    grid-template-columns: 350px 300px 1fr; /* 264 244 1fr */
    grid-template-rows: 99px;
    grid-template-areas:
      "filtros turno kpis";
    grid-area: header;
    gap: var(--spacing-S360-2);

    & .header__section {
      height: var(--header-height);
    }
    & .filtros {
      display: grid;
      grid-template-columns: 50% calc(50% - 24px - 8px) 24px;
      grid-template-rows: repeat(3, 30px);
      grid-template-areas:
        "plant process process"
        "machine date date"
        "sku sku refresh";
      grid-area: filtros;
      gap: var(--spacing-S360-2);
      & .select-menu:nth-of-type(1) {
        grid-area: plant;
      }
      & .select-menu:nth-of-type(2) {
        grid-area: process;
      }
      & .select-menu:nth-of-type(3) {
        grid-area: machine;
      }
      & .select-menu:nth-of-type(4) {
        grid-area: sku;
      }
      & .refreshSKU {
        grid-area: refresh;
        padding-top: 3px;
        & span {
          cursor: pointer;
          color: #17A2B8;
          font-variation-settings:
          'FILL' 1,
          'wght' 400,
          'GRAD' 0,
          'opsz' 24
        }
      }
      & .headerDate {
        grid-area: date;
        &.basic-input--focus {
          border: 1px solid var(--color-border-S360);
        }
        & label {
          font-weight: var(--font-weight-large-S360);
        }
      }
    }
    & .turno {
      grid-area: turno;
    }
    & .kpis {
      grid-area: kpis;
    }
    .summary-container {
      & .container-boxBlock{
        height: 100%;
        & .boxBlock{
          height: 100%;
          overflow: hidden;
          /* border: 0.5px solid var(--color-border-S360); */
          & .boxBlock-header{
            height: 24px;
            border-radius: 4px 4px 0 0;
            background-color: var(--suite-primary-S360);
            & .icon {
              display: none;
            }
            & .boxBlock-title{
              display: flex;
              color: var(--color-light-S360);
              font-style: normal;
              width: 100%;
              align-items: center;
              gap: var(--spacing-S360-3);
              & .title__icon {
                font-size: 20px;
                font-variation-settings:
                'FILL' 1,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
              }
            }
          }
          & .boxBlock-body{
            padding: 0;
            height: calc(100% - 24px);
            /* & > div{
              height: 100%;
            } */
          }
        }
      }
      /* & .turns-section {
        & .boxBlock {
          & .boxBlock-body {
            padding: var(--spacing-S360-2);
          }
        }
      } */
      & .kpis-section {
        & .boxBlock-title{
          justify-content: center;
        }
      }
    }
  }

  & .main {
    grid-area: main;
    overflow: hidden;
    & .section__info {
      user-select: none;
      width: 100%;
      height: fit-content;
      /* background-color: var(--background-menu-S360); */
      background-color: var(--background-secundary-S360);
      display: flex;
      gap: var(--spacing-S360-3);
      padding: var(--spacing-S360-2) var(--spacing-S360-3);
      align-items: center;
      border-color: var(--color-border-S360);
      margin-bottom: var(--spacing-S360-4);
      justify-content: space-between;
      border-radius: var(--border-radius-S360);
      flex-wrap: wrap;

      & .opacityZero {
        & .info{
          display: none !important;
        }
      }

      & .opacityMedium {
        & .info{
          & .disabled {
            pointer-events: none;
            opacity: 0.5;
          }
        }
      }

      & .info {
        height: 100%;
        display: flex;
        align-items: center;
        gap: var(--spacing-S360-3);
        font-weight: var(--font-weight-large-S360);
        font-size: var(--font-size-normal-S360);
        flex-wrap: wrap;

        &.info__turn,
        &.info__user {
          flex-wrap: nowrap;

          & .userInfo,
          & .turnInfo{
            min-width: 100px;
            max-width: 231px;
          }

          & .turno {
            white-space: nowrap;
          }
        }

        & .input--disabled{
          border-color: var(--color-border-S360) !important;
          background-color: var(--background-disabled-secundary-S360) !important;
          cursor: default !important;
        }

        & .divCabidaPliego {
          width: 95px;
          color: var(--color-text-S360);
        }

        & .divCabidaTira {
          width: 80px;
          color: var(--color-text-S360);
        }

        & .unidadEmpaque {
          width: 115px;
          color: var(--color-text-S360);
        }

        & .infoMaestra {
          width: 80px !important;
          font-weight: bold;

          &:focus {
            border: 1px solid #007bff;
            outline: none;
          }
        }

        & .icon {
          font-size: 16px;
          color: var(--color-icon-turn-S360);
          & span {
            width: 16px;
            font-size: 20px;
            justify-content: center;
            color: var(--color-icon-turn-S360);
            align-items: center;
            display: flex;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
          }
        }
        & .turno {
          color: var(--color-text-S360);
        }
        & .body {
          height: 100%;
          width: 100%;
          background-color: var(--background-S360);
          padding: 0 var(--spacing-S360-3);
          text-align: center;
          justify-content: start;
          align-items: center;
          font-size: var(--font-size-normal-S360);
          color: var(--color-text-S360);
          display: inline-block;
          text-overflow: ellipsis;
          align-content: center;
          border-radius: 3px;
          border: var(--border-turn-name);
          overflow: hidden;
          white-space: nowrap;

          &.turnInfo {
            width: 180px;
            & .smaller {
              font-size: var(--font-size-small-S360);
            }
          }

          &.userInfo {
            width: 250px;
          }
        }
      }
    }
  }
  & .downBar {
    grid-area: downBar;
    position: unset;
    display: none;
  }
}

.swalOPC {
  & .swalOPC-header {
    & .swalOPC-title {
      align-items: center;
      display: flex;
      gap: 5px;
    }
  }
}

.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,
.descripcion-boolbtn .arrow::after, .descripcion-boolbtn .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;
}





.modal_confirm {
  .swalOPC {
    & .swalOPC-dialog-centered {
      margin: 0.5rem;
    }
  }
}

.content-button {
  & .button-opc--disabled {
    cursor: not-allowed;
    & span {
      cursor: not-allowed;
    }
  }
}

/* MEDIAS QUERIES PARA RESPONSIVE DE LA VISTA  */
@media (min-width: 720px) and (max-width: 1320px) {
  .container {
    & .header {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(2, 99px);
      grid-template-areas: "filtros filtros turno turno" 
                           "kpis kpis kpis kpis";
    }
  }
}

@media (min-width: 650px) and (max-width: 800px) {
  .container {
    & .header {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(2, 99px);
      grid-template-areas: "filtros turno" "kpis kpis";
      & .opc-table-container {
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: 1fr;
        grid-template-areas: "registro cuantitativo cualitativo";
        & #table-box-kpis {
          display: none;
        }
      }
    }
    & .tabPanel[data-id="100285"]{
      & .Box {
        & .container-boxBlock[data-subprocess^="Rollo"]{
          & .formBox {
            grid-template-columns: 1fr !important;
            grid-template-rows: repeat(5, auto) !important;
            grid-template-areas:
                "info"
                "slot1"
                "slot2" !important;
            gap: 1rem !important;
          }
        }
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            grid-template-columns: 1fr !important;
            grid-template-rows: repeat(6, auto) !important;
            grid-template-areas:
                "info"
                "slot1"
                "slot2"
                "slot3"
                "slot4"
                "table" !important;
            gap: 1rem !important;
          }
        }
      }
    }
  }
}

@media (min-width: 800px) and (max-width: 950px) {
  .container {
    & .tabPanel[data-id="100285"] {
      .Box {
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            grid-template-columns: 1fr 1fr !important;
            grid-template-rows: repeat(6, auto) !important;
            grid-template-areas:
                "info info"
                "slot1 slot1"
                "slot2 slot2"
                "slot3 slot3"
                "slot4 slot4"
                "table table" !important;
            gap: 1rem !important;

            & .boxContainer[data-order-freq="0"] {
              grid-row: 1 !important;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-column: 1 !important;
              grid-row: 2 !important;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-column: 2 !important;
              grid-row: 2 !important;
            }

            & .boxContainer[data-order-freq="3"] {
              grid-column: 2 !important;
              grid-row: 3 !important;
            }

            & .boxContainer[data-order-freq="20"] {
              grid-column: 1 !important;
              grid-row: 3 !important;
            }
            & .boxContainer[data-order-freq="29"] {
              grid-column: 1 / span 2 !important;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 501px) and  (max-width: 650px) {
  .container {
    & .header {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(2, 99px);
      grid-template-areas: "filtros turno" "kpis kpis";
      & .opc-table-container {
        grid-template-columns: 60% 40%;
        grid-template-rows: 1fr;
        grid-template-areas: "cuantitativo cualitativo";
        & #table-box-infoReg, #table-box-kpis {
          display: none;
        }
      }
    }
    & .tabPanel[data-id="100285"]{
      .Box {
        & .container-boxBlock[data-subprocess^="Rollo"]{
          & .formBox {
            grid-template-columns: 1fr !important;
            grid-template-rows: repeat(5, auto) !important;
            grid-template-areas:
                "info"
                "slot1"
                "slot2" !important;
            gap: 1rem !important;
          }
        }
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            grid-template-columns: 1fr !important;
            grid-template-rows: repeat(6, auto) !important;
            grid-template-areas:
                "info"
                "slot1"
                "slot2"
                "slot3"
                "slot4"
                "table" !important;
            gap: 1rem !important;
          }
        }
      }
    }
    & .tabPanel[data-id="100296"]{ /*Corte Flexo*/
      .Box{
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "info"
              "inicio"
              "mitad"
              "final";
            gap: 1rem;

            & .boxContainer[data-order-freq="0"] {
              grid-area: info;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-area: inicio;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: mitad;
            }

            & .boxContainer[data-order-freq="32"] {
              grid-area: final;
            }
          }
        }

        /* & .boxBody {
          display: grid;
          grid-template-columns: 1fr;
          grid-auto-rows: auto;
          grid-template-areas:
            "table";

          & .table__container[data-order-freq="1"],
          & .table__container[data-order-freq="2"],
          & .table__container[data-order-freq="16"],
          & .table__container[data-order-freq="25"],
          & .table__container[data-order-freq="32"] {
            grid-area: table;
          }
        } */
      }
    }
    & .tabPanel[data-id="100287"]{ /*Impresion Offset*/
      .Box{
        & .container-boxBlock[data-subprocess^="Turno"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "turno"
              "inicio"
              "mitad"
              "fin";
            gap: 1rem;
            & .boxContainer[data-order-freq="53"] {
              grid-area: turno;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-area: inicio;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: mitad;
            }

            & .boxContainer[data-order-freq="31"] {
              grid-area: fin;
            }
          }
        }
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "plataforma"
              "inicio"
              "mitad"
              "cambio"
              "cada2"
              "cada5";
            gap: 1rem;
            & .boxContainer[data-order-freq="49"] {
              grid-area: plataforma;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-area: inicio;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: mitad;
            }

            & .boxContainer[data-order-freq="14"] {
              grid-area: cambio;
              & .boxBody {
                display: grid;
                grid-template-columns: 1fr;
                grid-auto-rows: auto;
                grid-template-areas:
                  "table1 ";
                gap: 1rem;

                & .table__container[data-order-freq="14"] {
                  grid-area: table1;
                }
              }
            }

            & .boxContainer[data-order-freq="5"] {
              grid-area: cada2;
              & .boxBody {
                display: grid;
                grid-template-columns: 1fr;
                grid-auto-rows: auto;
                grid-template-areas:
                  "table1"
                  "table2";
                gap: 1rem;

                & .table__container[data-order-freq="5"]:nth-of-type(1) {
                  grid-area: table1;
                }

                & .table__container[data-order-freq="5"]:nth-of-type(2) {
                  grid-area: table2;
                }
              }
            }

            & .boxContainer[data-order-freq="8"] {
              grid-area: cada5;
              & .boxBody {
                display: grid;
                grid-template-columns: 1fr;
                grid-auto-rows: auto;
                grid-template-areas:
                  "table1"
                  "table2";
                gap: 1rem;

                & .table__container[data-order-freq="8"]:nth-of-type(1) {
                  grid-area: table1;
                }

                & .table__container[data-order-freq="8"]:nth-of-type(2) {
                  grid-area: table2;
                }
              }
            }
          }
        }
      }
    }
    & .tabPanel[data-id="100294"]{ /*Impresion Flexo*/
      .Box{
        & .container-boxBlock[data-subprocess^="Turno"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "info1"
              "info2";
            gap: 1rem;
            & .boxContainer[data-order-freq="1"] {
              grid-area: info1;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: info2;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 500px) {
  .container {
    & .header {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, 99px);
      grid-template-areas: "filtros" "turno" "kpis";
      & .opc-table-container {
        grid-template-columns: 100%;
        grid-template-rows: 1fr;
        grid-template-areas: "cuantitativo";
        & #table-box-infoReg, #table-box-kpis, #table-box-limCual {
          display: none;
        }
      }
    }
    /* .tabPanel {
      & .tabPanel__body {
        & .content-button {
          width: 100%;
        }
        & .boxContainer__sombreado {
          & .boxBlock {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-template-areas:
            "header"
            "boton"
            "info";
            & .boxBlock-header {
              border-top-right-radius: var(--border-radius-S360);
            }
            & .disable-button {
              border-radius: 0;
            }
          }
        }
      }
    } */

    & .tabPanel[data-id="100285"]{
      & .Box {
        & .container-boxBlock[data-subprocess^="Rollo"]{
          & .formBox {
            grid-template-columns: 1fr !important;
            grid-template-areas:
                "info"
                "slot1"
                "slot2" !important;
            gap: 1rem !important;
          }
        }
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            grid-template-columns: 1fr !important;
            grid-template-rows: repeat(6, auto) !important;
            grid-template-areas:
                "info"
                "slot1"
                "slot2"
                "slot3"
                "slot4"
                "table" !important;
            gap: 1rem !important;

            & .boxContainer[data-order-freq="0"] {
              grid-row: 1 !important;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-column: 1 !important;
              grid-row: 2 !important;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-column: 1 !important;
              grid-row: 3 !important;
            }

            & .boxContainer[data-order-freq="3"] {
              grid-column: 1 !important;
              grid-row: 4 !important;
            }

            & .boxContainer[data-order-freq="20"] {
              grid-column: 1 !important;
              grid-row: 5 !important;
            }

            & .boxContainer[data-order-freq="7"] {
              grid-column: 1 / 2 !important;
              grid-row: 6 !important;
            }
          }
        }
      }
    }
    & .tabPanel[data-id="100296"]{ /*Corte Flexo*/
      & .Box{
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "info"
              "inicio"
              "mitad"
              "final";
            gap: 1rem;

            & .boxContainer[data-order-freq="0"] {
              grid-area: info;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-area: inicio;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: mitad;
            }

            & .boxContainer[data-order-freq="32"] {
              grid-area: final;
            }
          }
        }

        /* & .boxBody {
          display: grid;
          grid-template-columns: 1fr;
          grid-auto-rows: auto;
          grid-template-areas:
            "table";

          & .table__container[data-order-freq="1"],
          & .table__container[data-order-freq="2"],
          & .table__container[data-order-freq="16"],
          & .table__container[data-order-freq="25"],
          & .table__container[data-order-freq="32"] {
            grid-area: table;
          }
        } */
      }
    }
    & .tabPanel[data-id="100287"]{ /*Impresion Offset*/
      .Box{
        & .container-boxBlock[data-subprocess^="Turno"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "turno"
              "inicio"
              "mitad"
              "fin";
            gap: 1rem;
            & .boxContainer[data-order-freq="53"] {
              grid-area: turno;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-area: inicio;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: mitad;
            }

            & .boxContainer[data-order-freq="31"] {
              grid-area: fin;
            }
          }
        }
        & .container-boxBlock[data-subprocess^="Plataforma"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "plataforma"
              "inicio"
              "mitad"
              "cambio"
              "cada2"
              "cada5";
            gap: 1rem;
            & .boxContainer[data-order-freq="49"] {
              grid-area: plataforma;
            }

            & .boxContainer[data-order-freq="1"] {
              grid-area: inicio;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: mitad;
            }

            & .boxContainer[data-order-freq="14"] {
              grid-area: cambio;
              & .boxBody {
                display: grid;
                grid-template-columns: 1fr;
                grid-auto-rows: auto;
                grid-template-areas:
                  "table1 ";
                gap: 1rem;

                & .table__container[data-order-freq="14"] {
                  grid-area: table1;
                }
              }
            }

            & .boxContainer[data-order-freq="5"] {
              grid-area: cada2;
              & .boxBody {
                display: grid;
                grid-template-columns: 1fr;
                grid-auto-rows: auto;
                grid-template-areas:
                  "table1"
                  "table2";
                gap: 1rem;

                & .table__container[data-order-freq="5"]:nth-of-type(1) {
                  grid-area: table1;
                }

                & .table__container[data-order-freq="5"]:nth-of-type(2) {
                  grid-area: table2;
                }
              }
            }

            & .boxContainer[data-order-freq="8"] {
              grid-area: cada5;
              & .boxBody {
                display: grid;
                grid-template-columns: 1fr;
                grid-auto-rows: auto;
                grid-template-areas:
                  "table1"
                  "table2";
                gap: 1rem;

                & .table__container[data-order-freq="8"]:nth-of-type(1) {
                  grid-area: table1;
                }

                & .table__container[data-order-freq="8"]:nth-of-type(2) {
                  grid-area: table2;
                }
              }
            }
          }
        }
      }
    }
    .tabPanel[data-id="100294"]{ /*Impresion Flexo*/
      .Box{
        & .container-boxBlock[data-subprocess^="Turno"]{
          & .formBox {
            /* padding: 17px; */
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: auto;
            grid-template-areas:
              "info1"
              "info2";
            gap: 1rem;
            & .boxContainer[data-order-freq="1"] {
              grid-area: info1;
            }

            & .boxContainer[data-order-freq="2"] {
              grid-area: info2;
            }
          }
        }
      }
    }
  }

  & .table__container[data-view="mobile"] {
    & .basic-input {
      & .select-btn {
        & .sBtn-text {
          max-width: calc(100vw - 240px);
        }
      }
    }
  }
}

.tooltip-opc
{
  &.top-opc{
    top: -5px !important;
  }

  &.bottom-opc{
    top: 5px !important;
  }
}


.swal2-popup.swal2-loading {
  color: var(--color-text-S360);
  padding: 20px !important;
  background-color: var(--color-primary) !important;

  & .swal2-loading {
    background-color: var(--color-primary) !important;
  }

	& .swal2-contentwrapper {
		& h2 {
			color: var(--color-text);
		}
		& div {
			color: var(--color-text);
		}
	}

  & .swal2-buttonswrapper {
    background: var(--color-primary);
  }
}

.displayNone {
  display: none;
}

.basic-input {
  /* transition: border-color 0.3s; */
  & .cuerpo {
    & label {
      -webkit-transition: 0.1s ease all;
    }
  }
}

.swal2-container {
  user-select: none;
}

& .Box{
  &:has(.select-menu.active) {
    z-index: 1000;
  }
}