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

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



:root {

	&[data-theme='light'] {
		--color-bg-version: #EBEBEB;
    --color-bg-group: #EBEBEB;
	}
	&[data-theme='dark'] {
    --color-bg-version: #1F1F1F;
    --color-bg-group: #585858;
	}
}


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

.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: 100%;
  gap: var(--spacing-S360-2);
  grid-template-areas:
    "main";
  height: calc(100vh - var(--padding)* 2);
}

#masterInfo_container {
  width: 100%;
  height: 100%;

  & .table-wrapper {
    height: 100%;
  }
}

.btn__add {
  &.disabled {
    opacity: 0.4;
    cursor: not-allowed;        
  }
  #createNew {
    border-radius: 5px;
    gap: 4px;

    &:hover {
      color: #fff;
      background-color: #218838;
      border-color: #1e7e34;
    }
  }
}

#root {
  height: 100%;
}


#masterInfo_container {
  tbody {
    .actionsCell {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        cursor: pointer;
        font-size: 18px;

        &.icon--edit {
          color: #40A944;
          &.disabled {
            opacity: 0.4;
            cursor: not-allowed;
          }
        }
        &.icon--delete {
          color: var(--color-error-S360);
          &.disabled {
            opacity: 0.4;
            cursor: not-allowed;        
          }
        }
      }
    }
  }
  &.disabled {
    .actionsCell {
      .icon {
        opacity: 0.4;
        cursor: not-allowed;        
      }
    }
  }
}


.component-modal-alert{
  user-select: none;
}