.text-40 { font-size: .4em !important } .text-50 { font-size: .5em !important } .text-60 { font-size: .6em !important } .text-70 { font-size: .7em !important } .text-80 { font-size: .8em !important } .text-90 { font-size: .9em !important } .text-100 { font-size: 1em !important }
.text-110 { font-size: 1.1em !important } .text-120 { font-size: 1.2em !important } .text-130 { font-size: 1.3em !important } .text-140 { font-size: 1.4em !important } .text-150 { font-size: 1.5em !important } .text-160 { font-size: 1.6em !important } .text-170 { font-size: 1.7em !important } .text-180 { font-size: 1.8em !important } .text-190 { font-size: 1.9em !important } .text-200 { font-size: 2em !important }
.text-95 { font-size: .95em !important } .text-85 { font-size: .85em !important } .text-65 { font-size: .65em !important } .text-55 { font-size: .65em !important } .text-45 { font-size: .65em !important } .text-105 { font-size: 1.05em !important }.text-115 { font-size: 1.15em !important } .text-125 { font-size: 1.25em !important }.text-135 { font-size: 1.35em !important }.text-145 { font-size: 1.45em !important }
.text-xs { font-size: .625rem !important } .text-sm { font-size: .875rem !important } .text-md { font-size: 1rem !important } .text-lg { font-size: 1.25rem !important } .text-xl { font-size: 1.5rem !important }
.font-bold, .text-700 { font-weight: 700 !important } .font-bolder, .text-600 { font-weight: 600 !important } .font-medium, .text-500 { font-weight: 500 !important } .font-normal, .text-400 { font-weight: 400 !important } .font-light, .font-lighter, .text-300 { font-weight: 300 !important }

/* vistad subir fotos */
.imagen-ver-privew {
    width: 190px;
    height: 200px;
    border: 0.12rem dashed #ccc;
    margin-top: 10px;
    position: relative;
      display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .imagen-ver-privew img {
    max-width: 100%;
    max-height: 100%;
  }
  
  .imagen-ver-privew .btn-eliminar {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff00008d;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border: 0.12rem solid #9900008d;
    border-radius: 5px;
  }
  
  .imagen-ver-privew .btn-eliminar:hover {
    background-color: #ff0000;
  }
    /* Fin */
    /* scrool ajax  */
    .GoScroolAjax {
        height: calc(100vh - 91px); /* Ajusta 91px según la altura real de tu footer */
        /* overflow-y: auto; */
    }
    .GoScroolAjax_NO {
        flex: 1;
        overflow-y: auto;
        min-height: auto;
        max-height: calc(100vh - 91px);
    }

    /* Sin footer */
    .GoScroolAjax_No {
        height: calc(100vh - 40px);  /* Ocupa toda la altura de la ventana */
        /* overflow-y: auto; */
    }
    /* Media query para dispositivos en orientación horizontal */
    /* @media only screen and (max-width: 610px) {
      .GoScroolAjax_No {
          height: calc(100vh - 90px); 
      }
    } */
    
    /* FIN scrool ajax  */
    /* ERROR FORM */
    .form-control.is-valid:focus,
    .was-validated :valid.form-control,
    .form-select.is-valid:focus,
    .was-validated :valid.form-select {
    border-color: #D7D7D7 !important;
    background-image: inherit !important;
    box-shadow: inherit !important;
    padding-right: 0.4em !important;
    }
/* Estilo para campos de entrada de tipo 'date' y 'number' que están validados */
.form-control.is-valid:focus input[type="date"].is-valid,
.was-validated input[type="date"].form-control:valid {
    padding-right: 0.5em !important;
}

        /* Estilo para los radios seleccionados cuando se valida */
        .form-check-input.is-valid,
        .was-validated .form-check-input:valid {
            border-color: var(--vz-vertical-menu-title-color-dark)!important;
            color: #810d47!important;
        }
        .form-check-input.is-valid:checked,
        .was-validated .form-check-input:valid:checked {
            background-color: var(--vz-header-bg-dark)!important;
            /* color: #810d47!important; */
        }

        /* .was-validated .form-check-input:valid + .form-check-label {
          color: #687cfe !important;  
        } */
        .was-validated .form-check-input:valid + .form-check-label {
          color: inherit !important; /* Color del texto cuando el radio es válido */
        }

/* 🔹 Opcional: cambiar el color del label si radio inválido */
.was-validated .fsc-radio .form-check-input:invalid + .form-check-label {
    color: #dc3545 !important;
    border: 1px solid #dc3545; /* borde normal */
    transition: border-color 0.3s, background-color 0.3s;
}

    /* Fin */
  .select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
    }
    .select select {
        font-family: 'Arial';
        display: inline-block;
        width: 100%;
        cursor: pointer;
        padding: 5px 10px;
        outline: 0;
        border: 0.03rem solid #54109d;
        border-radius: 8px;
        background: #e8dfee9d;
        color: #8351c6;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
        .select select::-ms-expand {
            display: none;
        }
        .select select:hover,
        .select select:focus {
            color: #620a8e;
            background: #f2e8f69d;
        }
        .select select:disabled {
            opacity: 0.6;
            pointer-events: none;
        }
    .select_arrow {
        position: absolute;
        top: 7px;
        right: 13px;
        width: 12px;
        height: 12px;
        border: solid #61008d;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        opacity: 0.3;
    }
    .select select:hover ~ .select_arrow,
    .select select:focus ~ .select_arrow {
        border-color: #8023be;
        font-weight: bold;
        opacity: 0.9;
    }
    .select select:disabled ~ .select_arrow {
        border-top-color: #cccccc;
    }
/* RADIO SELECION OPK */
    .fsc-radio {
      padding: 0
  }
  :root {
    --fsc-radio-bg: #0b3eca90;
    --fsc-radio-border: #687cfe !important;
    --fsc-radio-hover: #7667c927;
  }
  [data-layout-mode=dark] {
    --fsc-radio-bg: #9ca8c790;
    --fsc-radio-border: #9ca8c790 !important;
    --fsc-radio-hover: #e2c7f313;
  }
  .fsc-radio .form-check-label {
      background-color: var(--vz-card-bg-custom);
      border: 1px solid var(--vz-input-check-border);
      border-radius: .25rem;
      padding: 1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      position: relative;
      padding-right: 32px
  }

  .fsc-radio .form-check-label:hover {
      cursor: pointer;
      background: var(--fsc-radio-hover);
  }

  .fsc-radio .form-check-input {
      display: none
  }

  .fsc-radio .form-check-input:checked+.form-check-label {
      border-color: var(--fsc-radio-border);
      background: var(--fsc-radio-hover);
  }
  /* .fsc-radio .form-check-input:checked+.form-check-label:before {
      content: '';
      position: absolute;
      top: -0em;
      right: -0em;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 2.7em 2.7em 0;
      border-color: transparent var(--fsc-radio-bg) transparent transparent;
      pointer-events: none;
      z-index: 0;
  } */
  .fsc-radio .form-check-input:checked+.form-check-label:before {
    content: '';
    position: absolute;
    bottom: 0em; /* Coloca el triángulo en la parte inferior */
    right: 0em; /* Ajusta la posición desde el lado derecho */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2.5em 2.5em; /* Ajusta el ancho y alto del triángulo */
    border-color: transparent transparent var(--fsc-radio-bg) transparent; /* Cambia la dirección del triángulo */
    pointer-events: none;
    z-index: 0; /* Establece el z-index en 0 para que esté detrás del contenido */
}

  /* .fsc-radio.dark .form-check-input:checked+.form-check-label:before {
      color: #b3116f
  } */

  .fsc-radio .form-check-label .Gochecked {
  position: absolute;
  right: 0.2em;
  bottom: -0.16em;
  z-index: 3; /* Ajusta el z-index para que esté encima de todo */
  padding-right: 0;
  transition: right 0.3s ease;
  display: none; /* Oculta el contenido por defecto */
  }

  .fsc-radio .form-check-input:checked+.form-check-label .Gochecked {
      display: block; /* Muestra el contenido cuando la radio está chequeada */
  }
  /* RADIO SELECION FIN */
    /* Estilos para ocultar mostar el elemento */
    .ocultarshow {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
      }
      .vershow {
        max-height: 9999px; /* Altura máxima ajustada automáticamente */
        overflow: hidden;
        transition: max-height 2.7s ease;
      }
      /* Fin */
    td.td-truncate {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* width: 20%; */
      max-width: 0;
    }
    .div-truncate {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%; 
    }
    .z-index-0 {
      z-index: 0!important;
  }
  #Buscar_Stock,.VerQuepasoX {
    position: absolute; /* Posición absoluta en relación con el contenedor actual */
    bottom: 3.8em; /* Colocar el div en la parte inferior del contenedor */
    left: 0; /* Colocar el div en el borde izquierdo del contenedor */
    z-index: 9999; /* Capa z para que esté por encima de otros elementos */
    width: 100%; /* Ancho completo del contenedor */
}
/* Simula is-invalid con estilo Bootstrap */
.choices.is-invalid .choices__inner {
  border-color: #e74e5d !important;
  /* box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important; */
}
.bg-opacity-5 { --vz-bg-opacity: 0.05; } .bg-opacity-1 { --vz-bg-opacity: 0.03; }
@media (max-width: 450px) {
  .container-fluijd{
      width: 99%;
      margin: 0.2em !important;
      padding: 0.2em !important;
      background-color: #1abb2f;
  }
}