/*** General View Styles That aren't in the CDN ***/
:root {
  /*** Fonts ***/
  --font-family-1: 'Inter', 'Arial', sans-serif;
	--font-family-2: 'Libre Franklin', 'Arial', sans-serif;
  --suite-padding: 4px;
  --suite-margin: 4px;
/*** Element Colors ***/
  --color-text-contrast-S360: #FFFFFF;
  --bg-tooltip:#1f1f1fe6;

  --blocked-table-cells: #c6c6c6;

  --color-disabled-value: #D9D9D9;


  /**? Notification vars **/
  --notification-back: #FAFAFA;
  --notification-content-back: #DBDBDB;
  --notification-success: #299534;
  --notification-error: #AB0505;
  --notification-warning: #D49C00;


/*** Predefined Settings ***/
/*
  /*? to remember
  --font-size-normal-S360: 12px;
  --font-size-small-S360: 10px;
  --font-size-large-S360: 14px;

  --font-weight-small-S360:600;
  --font-weight-large-S360:400;
*/
  --font-size-extra-large-S360: 16px;
  --font-size-giant-S360: 18px;

/*** General View Variables ***/
  /**? Notification vars **/
  --image-back: invert(0)

}

:root[data-theme="light"] {
  --color-text-contrast-S360: #FFFFFF;
  --color-line-VALOR: #320d0d;
  --color-text: #2E2E2E;
}

:root[data-theme="dark"] {
  --color-text-contrast-S360:#2E2E2E;
  --image-back: invert(1);
  --notification-back: #4E4E4E;
  --notification-content-back: #343434;
  --notification-success: #28A745;
  --notification-error: #FF8383;
  --notification-warning: #B1974E;
  --color-text: #FFFFFF;
  --blocked-table-cells: #4a4a4a;

  --color-disabled-value: #2D2D2D;
  --color-line-VALOR: #320d0d;
}

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


html {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
	background-color: var(--background-S360);
}

body {
	overflow: hidden;
	height: 100%;
}

/*** General Styles of this Menu ***/

/***? Container styles ***/
.mainContainer{
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto minmax(200px , 2.3fr) 100px;
  gap: 33px;
  grid-template-areas:
  "header"
  "body"
  "processes";
  height: 100vh;

  & .header-container{
    grid-area: header;

    & .filters-container{
      grid-area: filters;
    }

    & .turns-container{
      grid-area: turns;
    }

    & .limits-container{
      grid-area: limits;

      & #table-box-kpis{
        grid-area: kpis-box;
      }

      & #table-box-limits{
        grid-area: limits-box;
      }
    }

  }

  & .tracking-container{
    grid-area: body;
  }

  & .processes-container{
    grid-area: processes;
  }

  & .tracking-table-section{
    grid-area: tracking;
  }
}

.mainContainer.historic{
  & .header-container{
    & .return-historic-btn{
      background-color: #1B9FB6;
      color: white;
      position: fixed;
      top: 106px;
      left: 4px;
      border-radius: var(--border-radius-S360);
      border: unset;
      display: flex;
      align-items: center;
      padding: var(--suite-padding);
      height: 25px;
      cursor: pointer;
      gap: 4px;
      font-size: var(--font-size-large-S360);
      & span{
        font-size: var(--font-size-extra-large-S360);
      }
      &:hover{
        opacity: 0.75;
      }
    }

  }
}



/***? Global Components Style ***/

.fade-out{
  opacity: 0 !important;
}

.fade-in{
  opacity: 1 !important;
}

.d-hidden *{
  visibility: hidden;
  user-select: none;
}

.d-show-automatic{
  button{
    display: none !important;
  }
}

.d-show-automatic {
  .automaticos, .notRegistrated{
    display: flex !important;
    span {
      visibility: visible;
    }
  }
  .automaticos::before, .notRegistrated::before{
    display: none;
  }
  #botonExcel{
    display: flex !important;
  }
}

.d-hidden .automaticos,
.d-hidden .notRegistrated,
.d-hidden .v-info-title,
.d-hidden .automaticos *,
.d-hidden .divExcel * {
  visibility: visible;
}



.blocked{
  pointer-events: none;
  background-color: var(--blocked-table-cells) !important;
}

.father-locked{
  cursor: not-allowed;
  & > *{
    pointer-events: none;
  }
}

.lock-disabled{
  pointer-events: none;
  background-color: var(--color-disabled-value) !important;
  border: unset !important;
}

.state-locked{
  & .cb-table{
    cursor: not-allowed !important;
    &  tbody tr:not(.filters){
      & td[data-name="turn"], td[data-name="record"]{
        pointer-events: none;
      }

      & td[data-name="validation"], td[data-name="status"]{
        pointer-events: none;

        & .tab-table-comment, .tab-table-btns-comment-container{
          pointer-events: none !important;
        }

        & .tab-table-comment {
          pointer-events: initial;
        }
      }

      & td[data-name="record"]{
        pointer-events: none;
        & .grafic-modal-btn{
          pointer-events: initial;

        }
      }
    }
  }
}

.state-locked-cell{
  background-color: var(--blocked-table-cells) !important;
}

.avoid{
  background-color: var(--blocked-table-cells) !important;
  & .tab-table-limit-icons .eye-button{
    cursor: pointer;
  }
}


iframe {
  width: 100%;
  height: 100%;
  border-width: inherit;
}

.iframe-container-handler {
  height: 100vh;
}

/** BoxBlock **/
.container-boxBlock .boxBlock {
  & .boxBlock-header {
    & .boxBlock-title {
      font-size: var(--font-size-large-S360);
    }
  }
}

/** DateRangePicker**/
.daterangepicker{
  font-size: var(--font-size-normal-S360);
  & .ranges li{
    font-size: var(--font-size-normal-S360);
  }

  & .calendar-table th, .calendar-table td {
    font-size: var(--font-size-normal-S360);
  }

  & select.monthselect, select.yearselect {
    font-size: var(--font-size-normal-S360);
  }

}

/** Dropdown **/
.select-menu{
  font-size: var(--font-size-normal-S360);
  & .options, .select-btn, .sBtn-title, .sBtn-text{
    font-size: var(--font-size-normal-S360);
  }

  & .sBtn-title.smaller{
    font-size: var(--font-size-small-S360);
  }

  & .option .option-text{
    font-size: var(--font-size-normal-S360);
  }
}


/** Notification **/
.notificationSection{
  z-index: 1984;
  position: fixed;
  bottom: 93px;
  right: 0;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px;
  max-height: 700px;
  display: flex;
  gap: 8px;


  &::-webkit-scrollbar-track{
    background-color: transparent;
    margin-left: var(--scrollbar-track-margin);
  }

  &::-webkit-scrollbar{
    width: 6px;
    height: 6px;
  }

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

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

.notification{
  position: relative;
  width: 400px;
  min-height: 130px;
  height: fit-content;
  background: var(--notification-back);
  color: var(--color-text-S360);
  font-size: var(--font-size-normal-S360);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;


  & .notification-header{
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    padding-left: 10px;
    min-height: 30px;

    &::after{
      content: "";
      position: absolute;
      left: 5px;
      bottom: 3px;
      width: calc(100% - 10px);
      height: 2px;
      background-color: var(--color-border-S360);
    }

    & .notification-icon{
      font-size: var(--font-size-large-S360);
    }

    & .notification-text{
    }
  }

  & .notification-body{
    display: grid;
    grid-template-rows: 1fr 3fr;
    grid-template-columns: 1fr 5fr;
    grid-template-areas:
    "image title title"
    "image content content";
    padding-bottom: 10px;

    & .notification-img{
      grid-area: image;
      display: flex;
      align-items: center;
      justify-content: center;
      & .notification-img-element{
        width: 50px;
        filter: var(--image-back);
      }
    }

    & .notification-title{
      grid-area: title;
    }

    & .notification-content{
      /* cursor: pointer; */
      grid-area: content;
      margin: 5px 5px 0 0;
      border-radius: 4px;
      background-color: var(--notification-content-back);
      padding: 5px;
    }
  }

  & .notification-x{
    cursor: pointer;
    user-select: none;
    position: absolute;
    z-index: 1;
    top: 6px;
    right: 8px;
    font-weight: bold;
  }

  &.success{
    & .notification-icon{
      color: var(--notification-success);
    }

    & strong{
      color: var(--notification-success);
    }
  }

  &.error,
  &.delete{
    & .notification-icon{
      color: var(--notification-error);
    }

    & strong{
      color: var(--notification-error);
    }
  }

  &.warning{
    & .notification-icon{
      color: var(--notification-warning);
    }

    & strong{
      color: var(--notification-warning);
    }
  }

}


/** Spinner V2 **/
.graphCenter{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.2s ease-in-out;

  & .loader {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    display: block;
    margin: 20px auto;
    position: relative;
    background: currentColor;
    color: var(--suite-primary-S360);
    box-sizing: border-box;
    animation: animloader 0.3s 0.3s linear infinite alternate;
  }

  & .loader::after, .loader::before {
    content: '';
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background: currentColor;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    box-sizing: border-box;
    animation: animloader 0.3s  0.45s  linear infinite alternate;
  }
  & .loader::before {
    left: -20px;
    animation-delay: 0s;
  }

}


/*** Tooltip OPC***/
.tooltipOPC{
  display: flex;
  position: absolute;
  max-width: 260px;
  width: fit-content;
  padding: 5px;
  background-color: var(--bg-tooltip);
  z-index: 2006;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-radius: var(--border-radius-S360);
  transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
  font-size: var(--font-size-large-S360);

  & .contenido-tooltipOPC{
      display: flex;
      flex-direction: column;
      width: fit-content;
      max-width: 100%;

    & .titulo-tooltipOPC{
      color: white;
      text-align: center;
      width: max-content;
      max-width: 100%;
    }
  }

}

.tooltipOPC::before {
  content: '';
  position: absolute;
  z-index: 2002;
  top:calc(50% + var(--desp-y-flecha));
  right: 100%;
  margin-top: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent;
  border-right-color: var(--bg-tooltip);
}

/*** MODAL COnfirm ***/
.component-modal-alert{
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 105px 50px 1.5fr 1fr;

  & .component-modal-info-icon{
    font-size: 100px;
    justify-self: center;
    align-self: center;
    margin-top: -25px;

    &.success{
      color: #28a745;
    }
    &.warning{
      color: #FFC000;
    }
    &.error{
      color: #dc3545;
    }
    &.info{
      color: #3fc3ee;
    }
  }

  & .component-modal-title-text{
    justify-self: center;
    width: 370px;
    height: 30px;
    text-align: center;
    font-weight: bolder;
    font-size: x-large;
    color:  var(--color-text-S360);
  }

  & .component-modal-content-text{
    justify-self: center;
    text-align: center;
    color:  var(--color-text-S360);
    font-size: var(--font-size-large-S360);
    word-wrap: break-word;
    max-width: 370px;
  }
}

.offHead{
  & .swalOPC-header {
      border-bottom: none !important;
      height: 0px !important;
  }
  & .swalOPC-body {
      padding-top: 0px;
  }
}

.component-modal-btn-group{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
}

.component-modal-btn{
  height: 35px;
  width: fit-content;
  min-width: 100px;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: white;
  text-align: center;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: var(--border-radius-S360);
  user-select: none;
  cursor: pointer;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out, opacity .15s ease-in-out;
  overflow: hidden;

  &.success {
      background-color: var(--color-success-S360);
      &:hover {
          background-color: var(--color-success-hover-S360);
      }
      &:active {
          background-color: var(--color-success-active-S360);
      }
  }

  &.warning {
      background-color: var(--color-warning-S360);
      &:hover {
          background-color: var(--color-warning-hover-S360);
      }
      &:active {
          background-color: var(--color-warning-active-S360);
      }
  }

  &.error{
      background-color: var(--color-danger-S360);
      &:hover {
          background-color: var(--color-danger-hover-S360);
      }
      &:active {
          background-color: var(--color-danger-active-S360);
      }
  }
}

/***? Tooltip Styles ***/
.lock-popover{
  left: -71px !important;
  background-color: var(--bg-tooltip);
  border-radius: 1px solid var(--color-border-S360);
  overflow: hidden;
  color: white;
  padding: 4px;
  border-radius: 8px;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
  z-index: 99;

  &.show{
    opacity: 1;
  }

}

.tab-table-comment{
  display: flex;
  flex-direction: row;
  gap: 16px;

  .user-icon{
    cursor: default;
    font-size: 19px !important;
  }
}

.user-popover{
  width: fit-content !important;
}

/* Estilos del Modal de Confirmación de modalSwalOpc */
.modalopc {
  border: var(--color-border-rows) .5px solid !important;
  & .modalopc-icon {
    & .fa-triangle-exclamation {
      font-size: 20px;
      color: var(--color-warning-S360) !important;
      background-color: color-mix(in srgb, var(--color-warning-S360) 30%, transparent) !important;
    }
  }
}

/***? Global KeyFrames ***/

@keyframes animloader {
0%   { height: 48px}
100% { height: 4px}
}

@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}