/*============================================
    PERSONALIZAR EL LOGIN
==============================================*/

.login-page,
.register-page {
  background: linear-gradient(rgba(255, 193, 7, 0.85), rgba(0, 30, 50, 0.85)) !important;
}

/* ================================= */
/* FONDO DEL LOGIN */
/* ================================= */
#fondo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  background: url("../img/back.jpg") !important;
  background-size: cover !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

/* ================================= */
/* BOTÓN NUEVO SE USA EN DATATABLE  */
/* ================================= */
.addNewRecord {
  background: #28a745 !important;
  color: #FFFFFF !important;
  padding: 0px 15px !important;
  border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -ms-border-radius: 3px !important;
  -o-border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
}

/*TITULOS DE LOS FORMULARIOS*/
.cabecera {
  font-size: 16px;
  font-weight: 600;
  padding-top: -10px;
  color: #007bff;
}


/* ================================= */
/* APLICA PARA  PRODUCTO*/
/* ================================= */

.columna {
  text-align: left;
  /*border: 1px solid #8d8d8d;*/
  background: #FFC107;
}

.columnaRow {
  background: #17A2B8;
}

.columnaRow label.tituloWhile {
  color: #FFFFFF;
}

/* ================================= */
/* tabs empleado en Control de Fabricaciones */
/* ================================= */
.nav-pills li {
  margin: 3px;
}

/* ================================= */
/* STYLE PARA EL MODAL TABS*/
/* ================================= */
.nav-tabs .nav-link.active {
  background-color: #FFC107;
  color: #000;
  font-weight: 600;
  border: 2px solid #000;
}

.nav-tabs .nav-link {
  background-color: #FFFFFF;
  color: #000;
  border: 2px solid #FFC107;
  margin-right: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.nav-tabs .nav-link:hover {
  border: 2px solid #FFC107;
}

.nav-tabs {
  border-bottom: 1px solid #FFC107;
}

.tab-content {
  border: 1px solid #FFC107;
  padding: 20px;
}

.linea {
  border: 2px solid #0a8d20;
  margin: 46px 5px;
}


.unidadesbottom {
  margin: 36px -7px;
  font-weight: 600;
}

/* ================================= */
/* DAR E4STLO AL CHECKBOX DE DAR EFECTIVO EXACTO */
/* ================================= */

.btnCentrado {
  margin-top: 2.0rem !important;
}


.btnCentrado #chkEfectivoExacto {
  content: "";
  width: 30px !important;
  height: 21px !important;
  border: 4px solid #0fbf12 !important;
}


.btnCentrado #textoIzq {
  padding: 2px 18px !important;
}

.btnCentrado #textoIzq:hover {
  background: #0fbf12 !important;
  color: #FFFFFF;
}



/* ================================= */
/* SEARCH FILTRO DEL DATATABLE - APLICA A TODOS
/* ================================= */
/*Inicio-Trazabilidad*/
#tblProductosCargados_filter input,
#tblMaterialesCargados_filter input,
#tblPerfiles_filter input,
#tbl_orden_fabricaciones_filter input,
#tblPredictamen_filter input, /*es dinámico*/
#tblPredictamenProductos_filter input,  /*es dinámico*/
#tblRecepcionMateriales_trace_filter input, 
#tblDictamenMateriales_trace_filter input, 
#tblInstalacionesDespejeLinea_filter input,
#tblPersonalDespejeLinea_filter input,
#tblMaquinarialDespejeLinea_filter input,
#tblVerificacionPesada_filter input,
#tblRecepcionProducto_filter input,
#tblDictamenProducto_filter input,      
#tblControlCalidadDespacho_filter input,
#tblDespachoProductos_filter input,
/*Fin-Trazabilidad*/

#tblRequerimientoProductosSinFormula_filter input,
#tblExplosionMateriales_filter input,
#tblCargaProductos_filter input,
#tblAjusteProductos_filter input,
#tblAjusteMateriales_filter input,
#tblMaterialesInventario_filter input,
#tblMaterial_filter input,
#tblRecepcionMateriales_filter input,
#tblMedidasCorrectivas_filter input,
#tblDetallePedidoClienteDespacho_filter input,
#tblPedidoClientes_filter input,
#tbl_pedido_clientes_filter input,
#tbl_recepcion_productos_filter input,
#tblDictamenProductos_filter input,
#tblPreDictamenProductos_filter input,
#tblDictamenMateriales_filter input,
#tblPreDictamenMateriales_filter input,
#tblDetalleParametroPPTT_filter input,
#tblReporteFabricaciones_filter input,
#tblControlProceso_filter input,
#tblRepesada_mmpp_filter input,
#tblDetalleRepesada_mmpp_filter input,
#tblDespejeLinea_filter input,
#tblDetalleDespejeLinea_filter input,
#tbl_producto_filter input,
#tblIngresoDictamenAtendidos_filter input,
#tblRecepcionesyPrevioIngreso_filter input,
#tblRecepcionesyDictamen_filter input,
#tblDictamenAtendidos_filter input,
#tblRecepcionesyPreDictamen_filter input,
#tblParametroProductos_filter input,
#tbl_recepcion_materiales_filter input,
#tblPreDictamenAtendidos_filter input,
#tblPreDictamen_filter input,
#tblPruebasEnsayos_filter input,
#tblAnalisis_filter input,
#tblDetalleParametro_filter input,
#tblParametrosMateriales_filter input,
#tbl_of_filter input,
#tbl_perfiles_asignar_filter input,
#tblProductos_filter input,
#tblUsuarios_filter input,
#tbl_formula_filter input,
#tblRequerimientoMaterialesAutomatico_filter input,
#tblPedidosInternoAlmacen_filter input,
#tblOrdenFabricaciones_filter input,
#tblMovimientoMateriales_filter input,
#tbl_pedidoInterno_filter input {
  text-align: left !important;
  color: blue !important;
  border: 1px solid rgb(255, 120, 47) !important;
  font-size: 1.15em !important;
  width: auto !important;
  margin-top: 5px !important;
}


/* ================================= */
/* Para darle justificación al árbol de decisiones
   de la página de fórmula procedimientos */
/* ================================= */
.radioButton {
  padding: 0.5rem;
}

.bordePregunta {
  background: #FFA500;
  font-weight: 600;
  padding: 5px;
}

.inputProcedimiento {
  font-weight: 600;
  font-size: 20px;
  background: #C9FAB3;
  padding: 5px;
}


/* ================================= */
/* Se añadio está clase para poner encima del
	modal ya que no se podía hacer 
   (si se pone en jquery-ui.css funcionaria normal) */
/* ================================= */
#ui-datepicker-div {
  z-index: 2000 !important;
}

/* ================================= */
/* DROPDOWN PARA RECEPCIÓN DE MATERIALES
   Permite hacer que el dropdown no se ponga
   debajo del siguiente sección
*/
/* ================================= */
.dropdown-menu.desplegable.show {
  display: block !important;
  position: relative !important;
  inset: -46px auto auto 0px !important;
  margin: 0px !important;
  transform: translate3d(0px, 48px, 0px) !important;
  z-index: 2 !important;
  -webkit-transform: translate3d(0px, 48px, 0px) !important;
  -moz-transform: translate3d(0px, 48px, 0px) !important;
  -ms-transform: translate3d(0px, 48px, 0px) !important;
  -o-transform: translate3d(0px, 48px, 0px) !important;
}

/* ================================= */
/* DAR COLOR A PULSAR ENCIMA DE UN BOTON
   DE DROPDOWN (DET. RECP MATERIALES) */
/* ================================= */
.dropdown a:hover {
  background: hsla(310, 94%, 50%, 0.902);
  color: #FFFFFF;
}

/* ================================= */
/* RECTANGULOS EN LAS LEYENDAS PIE DE PAGINA */
/* ================================= */

span.rectanguloDictamen {
  width: 250px !important;
  height: 100px !important;
  border: 1px solid #555 !important;
  background: #ADFF2F !important;
  padding: 5px 40px 5px 20px !important;
}


span.rectanguloPendiente {
  width: 250px !important;
  height: 100px !important;
  border: 1px solid #555 !important;
  background: #FFFFFF !important;
  padding: 5px 40px 5px 20px !important;
}

span.rectanguloProcesandose {
  width: 250px !important;
  height: 100px !important;
  border: 1px solid #000 !important;
  background: #0ffdf9 !important;
  padding: 5px 40px 5px 20px !important;
}


span.rectanguloAnulado {
  width: 250px !important;
  height: 100px !important;
  border: 1px solid #555 !important;
  background: #FFB6C1 !important;
  padding: 5px 40px 5px 20px !important;
}


/* ================================= */
/* CENTRAR SEARCH DATA TABLE */
/* ================================= */

#tblDetalleParametro_filter {
  padding-top: 5px !important;
  padding-right: 15px !important;
  /*text-align: left !important;*/
}

/* ================================= */
/* COLLAPSE PARA PARÁMETRO DE CALIDAD */
/* ================================= */
#accordionTab2 .panel,
#accordionTab1 .panel {
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 5px;
}

#accordionTab4 .panel-heading,
#accordionTab3 .panel-heading,
#accordionTab2 .panel-heading,
#accordionTab1 .panel-heading {
  padding: 0;
  border-radius: 0;
  border: none;
}

#accordionTab4 .panel-title a,
#accordionTab3 .panel-title a,
#accordionTab2 .panel-title a,
#accordionTab1 .panel-title a {
  display: block;
  padding: 10px 2px 10px 30px !important;
  background: #ffffff;
  font-size: 20px;
  font-weight: 500;
  color: #20457c;
  position: relative;
  transition: all 0.5s ease 0s;
  border: 1px solid #20457c;
  border-radius: 5px;
  text-align: left;
}


#accordionTab4 .panel-title a.collapsed,
#accordionTab3 .panel-title a.collapsed,
#accordionTab2 .panel-title a.collapsed,
#accordionTab1 .panel-title a.collapsed {
  /*background: #fff;*/
  background: #FFCD39 !important;
  color: #696969;
  border: 1px solid #20457c;
  border-radius: 5px;
}



#accordionTab4 .panel-title a:after,
#accordionTab4 .panel-title a.collapsed:after,

#accordionTab3 .panel-title a:after,
#accordionTab3 .panel-title a.collapsed:after,

#accordionTab2 .panel-title a:after,
#accordionTab2 .panel-title a.collapsed:after,

#accordionTab1 .panel-title a:after,
#accordionTab1 .panel-title a.collapsed:after {
  content: "\002D";
  font-family: "Impact";
  /*Font Awesome 5 Free*/
  font-weight: 900;
  width: 30px;
  height: 20px;
  line-height: 25px;
  border-radius: 5px;
  font-size: 22px;
  color: #007bff;
  text-align: center;
  position: absolute;
  top: 20%;
  margin-top: -2px;
  /*left: -5px;*/
  left: 5px;
  background: transparent !important;
  font-weight: bold;
}

#accordionTab4 .panel-title a.collapsed:after,
#accordionTab3 .panel-title a.collapsed:after,
#accordionTab2 .panel-title a.collapsed:after,
#accordionTab1 .panel-title a.collapsed:after {
  content: "\002B";
  /* 2192   f107*/
  background: transparent;
  font-weight: bold;
  font-family: "Impact";
}


#accordionTab4 .panel-title a.collapsed:hover,
#accordionTab3 .panel-title a.collapsed:hover,
#accordionTab2 .panel-title a.collapsed:hover,
#accordionTab1 .panel-title a.collapsed:hover {
  background: #f1f1f1;
  color: #20457c;
}

#accordionTab4 .panel-body,
#accordionTab3 .panel-body,
#accordionTab2 .panel-body,
#accordionTab1 .panel-body {
  font-size: 16px;
  color: #000;
  line-height: 25px;
  background: #fff;
  /*#E94C6F*/
  padding: 0px;
  /* top right bottom left*/
  /*auto */
  transition: all 0.5s ease 0s;
}


/* ================================= */
/*  BORDER DEL DATARANGE PARA BUSQUEDA POR FECHAS 
    (aplica para pre-dictamen)
*/
/* ================================= */
#daterange-btn {
  border: 1px solid #000 !important;
}


/* ================================= */
/* TITULOS */
/*usado en http://trace.com/control-fabricacion 
    contro calidad de despachos pptt
    */

/* ================================= */
.titulosCabeceras {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  padding: 0;
  font-family: "Verdana";
}

.tiluloResponsive {
  font-size: 16px;
  /* Tamaño de texto para pantallas grandes (lg) y medianas (xl) */
}

@media (max-width: 767.98px) {
  .tiluloResponsive {
    font-size: 14px;
    /* Tamaño de texto para pantallas pequeñas (sm) */
  }
}

@media (max-width: 1023.98px) {
  .tiluloResponsive {
    font-size: 14px;
    /* Tamaño de texto para pantallas pequeñas (md) */
  }
}

/* ================================= */
/* SUBTITULOS */
/* ================================= */
.subTitulos {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  font-family: "Verdana";
}

/* ================================= */
/* EMPLEADO EN TABS DE CONTROL DE FABRICACIONES */
/* ================================= */
.circle {
  margin-right: 5px;
  /* Ajustar el margen entre el círculo y el texto */
  border: 1px solid #000;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #007bff;
  /* Cambiar el color del círculo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.circle-number {
  color: #fff;
  /* Cambiar el color del número dentro del círculo */
}



/* ================================= */
/* APLICA PARA TABS CONTROL-FABRICACION */
/* ================================= */
.tab-container-css .nav-link.active {
  background-color: #27D548;
  color: #000;
}

.tab-container-css .nav-link:not(.active) {
  background-color: #f8f9fa;
  color: #000;
}

/* ================================= */
/* USADO EN MODALES DE REPESADA */
/* ================================= */
.cuadro {
  border: 1px solid #3c3b3b;
  border-radius: 5%;
  -webkit-border-radius: 5%;
  -moz-border-radius: 5%;
  -ms-border-radius: 5%;
  -o-border-radius: 5%;
}


/* ================================= */
/* CSS PARA CONTROL DE PROCESOS */
/* ================================= */
.boton-fase {
  border: 2px solid #007BFF;
  border-radius: 10px;
  padding: 10px;
  margin: 5px 0;
  text-align: center;
  font-size: 16px;
  background-color: #FFFFFF;
  color: #007BFF;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 100%;
  position: relative;
  /* Para agregar círculo */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.boton-fase:hover {
  background-color: #d0ff00;
  color: #070707;
}

/* Estilos para hacer scroll vertical */
.contenedor-botones-vertical {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  /* Ajusta el tamaño máximo para que el scroll aparezca cuando se necesite */
  max-height: 420px;
  /* Puedes ajustar esta altura según tus necesidades */
  scrollbar-width: thin;
  /* Grosor del scrollbar vertical */
  scrollbar-color: #007BFF #f0f0f0;
  /* Color del scrollbar vertical */
}

.contenedor-botones-vertical::-webkit-scrollbar {
  width: 9px;
  /* Aumentar el tamaño del scrollbar vertical */
  background-color: #f0f0f0;
}

.contenedor-botones-vertical::-webkit-scrollbar-thumb {
  background-color: #007BFF;
  border-radius: 3px;
}

/* Estilos para hacer scroll horizontal en versión móvil */
@media (max-width: 767px) {
  .contenedor-botones-vertical {
    display: flex;
    flex-wrap: nowrap;
  }

  .boton-fase {
    padding: 10px 15px;
    /* Ajuste en el padding para reducir el tamaño horizontal */
    margin-right: 5px;
  }

  .col-md-8 {
    order: -1;
  }
}

/* Estilos para el contenedor paralelo al scroll vertical */
.contenedor-contenido {
  flex: 1;
  padding-left: 15px;
}

/* Mejoras estéticas */
/*
  h2 {
    color: #007BFF;
    margin-bottom: 20px;
  }

  p {
    color: #444;
  }
  */

/* Estilos para los círculos */
.numero-fase {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #007BFF;
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

/* Estilos para el estado de verificación rojo */
.estado-fase-rojo {
  background-color: red;
  /*aplica para atencion_mc = 1 y 3*/
  color: white;
}

/* Estilos para el estado de verificación verde */
.estado-fase-verde {
  background-color: green;
  color: white;
}

/*Estilo para atencion_mc = 2 (warning)*/
.estado-fase-naranja {
  background-color: #FFC107;
  color: #000;
}


/* Estilos para el botón seleccionado al presionar cualquier botón */
.boton-fase.seleccionado {
  background-color: #d0ff00;
  color: #070707;
}



/* ================================= */
/* Círculo Label - CONTROL DE PROCESOS 
    APLICA PARA PCC */
/* ================================= */

.circle-label {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circle-text {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
}


.circle-no {
  background-color: blue;
  /* Fondo azul si el texto es "No" */
}

.circle-si {
  background-color: red;
  /* Fondo azul si el texto es "No" */
}

/* ================================= */
/* EMPLEADO PARA DAR FORMA DE CÍRCULO A LA FASE U 
     OPERACIÓN EN control de proceso */
/* ================================= */
.circle-titulo {
  display: inline-block;
  flex-direction: column;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #000;
  border: 2px solid #000;
  background-color: #d0ff00;
}

/* ================================= */
/* HR PARA CONTROL DE PROCESO  */
/* se genera un círculo central */
/* ================================= */

.circle-with-line {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hr-green {
  border: none;
  width: 100%;
  height: 3px;
  /* Grosor de la línea */
  background-color: #00a859;
  /* Color verde */
  margin: 20px 0;
}

.hr-green::before {
  content: attr(data-number);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d0ff00;
  font-weight: bold;
  color: #000;
  border: 3px solid #00a859;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 24px;
  font-size: 22px;
}

/* ================================= */
/* EMPLEADO EN REPORTE DE FABRICACION */
/* ================================= */
.hr-raya {
  width: 100%;
  height: 2px;
  /* Grosor de la línea */
  background-color: #00a859;
  /* Color verde */
  margin: 20px 0;
  border: 1px solid #00a859;
}

/* ================================= */
/* CLASE PERSONALIZADA PARA LOS TEAD
   DE REPORTE DE PRODUCCION */
/* ================================= */
.warningThead {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.8), rgba(255, 193, 7, 0.60));
}

.primaryThead {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.85), rgba(13, 110, 253, 0.75));
  color: #fff;
}

.successThead {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.85), rgba(169, 169, 169, 0.75));
}

/* ================================= */
/* ESTO LO USO EN http://trace.com/reporte-fabricacion */
/* ================================= */
.ui-autocomplete {
  z-index: 9999;
  /* Un valor alto para asegurar que esté por encima del modal */
}


/* ================================= */
/* ESTILO PARA LOS RADIO BUTTONS PARA PEDIDO CLIENTE*/
/* ================================= */
/* Estilo predeterminado para todos los radio buttons */


.form-check-input.radio-height {
  opacity: 0;
  position: absolute;
}


.form-check-input.radio-height+label {
  position: relative;
  padding-left: 1.8em;
  cursor: pointer;
  line-height: 2em;
  display: inline-block;
  vertical-align: middle;
}

.form-check-input.radio-height+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  background-color: #fff;
  border: 2px solid #007bff;
  border-radius: 50%;
  display: inline-block;
}


/* Estilo al hacer clic en un radio button */
.form-check-input.radio-height:checked+label:before {
  background-color: #007bff;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 0.05rem;
}


/* ================================= */
/*  ESTILO  PARA CHECK EN PEDIDO DE CLIENTES */
/* ================================= */
.custom-form-group {
  margin-bottom: 15px;
  /* Ajusta el espaciado entre los elementos */
}

#inputEfectivoRecibido {
  width: 80%;
  /* Ajusta el ancho del campo numérico */
  display: inline-block;
}

.form-check {
  display: flex;
  align-items: center;
}

#chkEfectivoExacto {
  margin-right: 8px;
  /* Ajusta el espacio entre el checkbox y el texto */
}

/* ================================= */
/* ESTILO PARA EL SWITCH, apica en 
   configuración de controld e calida de
   pedido de clientes*/
/* ================================= */

.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 40px;
  background-color: #FF0000;
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  cursor: pointer;
}

.switch::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  background-color: #FFFFFF;
  left: 5px;
  top: 5px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}

input[type='checkbox']:checked+.switch::after {
  transform: translateX(40px);
  background-color: #FFFFFF;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
}

/**/
input[type='checkbox']:checked+.switch {
  background-color: #2aa40b;
}


.offscreen {
  position: absolute;
  left: -999999px;
}


.wrap-toggle {
  display: flex;
  align-items: center;
}

#switchActive {
  margin-left: 10px;
  /* Ajusta el margen izquierdo según sea necesario */
  font-size: 24px;
}


/* ================================= */
/* PERSONALIZACIÓN DEL CHECKBOX 
 (aplicado en control de calidad despachos) 
 (aplicado: simulacion-fabricacion)*/
/* ================================= */
/* Estilo personalizado para el checkbox */
.custom-checkbox input[type="checkbox"] {
  display: none;
  /* Ocultar el checkbox nativo */
}

.custom-checkbox label {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: #fff;
  /* Color de fondo cuando no está marcado */
  border: 1px solid #ccc;
  /* Borde del checkbox */
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"]:checked+label {
  background-color: #007bff;
  /* Cambiar al color primario cuando está marcado */
  border: 1px solid #007bff;
  /* Cambiar el color del borde cuando está marcado */
}

/* Cambiar el color de la palomita cuando está marcado */
.custom-checkbox input[type="checkbox"]:checked+label::before {
  content: "\2713";
  /* Caracter Unicode para la palomita */
  color: #fff;
  /* Cambiar el color de la palomita al blanco */
  font-size: 18px;
  /* Tamaño de fuente de la palomita */
  text-align: center;
  /* Alinear la palomita al centro del checkbox */
  line-height: 28px;
  /* Alinear verticalmente la palomita al centro del checkbox */
}

/* ================================= */
/* PARA OCULTAR DIV O ELEMENTOS */
/* ================================= */
.oculto {
  display: none;
}

.visibilidad {
  display: none;
}

/* ================================= */
/* CÍRCULO PARA ENGLOBA CANTIDA DE PDTO
  PARA GESTIÓN LOGÍSTICA DE ENVÍO */
/* ================================= */
.circleCelda {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: hsl(66, 100%, 60%);
  /* Color de fondo del círculo */
  color: #000;
  /* Color de la fuente */
  text-align: center;
  line-height: 30px;
  font-weight: bold;
}


/* ================================= */
/* TRAZABILIDAD */
/* ================================= */
.acordeon-header {
  color: #020202;
  background: #ffc800 !important;
  opacity: 0.7;
  border: 1px solid #20457c;
  border-radius: 5px;
  line-height: 35px;
  cursor: pointer;
}


.acordeon-nodo-body {
  /* color: #020202;  
  background: #ffc800 !important;
  opacity: 0.8;    
  border: 1px solid #20457c;
  border-radius: 5px;
  line-height:50px; */
  cursor: pointer;
}

.text-uno-acordeon {
  text-transform: capitalize;
  font-weight: 640px;
  font-size: 20px;
}

.text-dos-acordeon {
  text-transform: capitalize;
  font-weight: 630;
  font-size: 19px;
}

.text-tres-acordeon {
  text-transform: capitalize;
  font-weight: 620;
  font-size: 18px;
}

.text-cuatro-acordeon {
  text-transform: capitalize;
  font-weight: 610;
  font-size: 17px;
}

.text-cinco-acordeon {
  text-transform: capitalize;
  font-weight: 600;
  font-size: 16px;
}


.acordeon-icon img {
  width: 36px;
  height: 36px;
  margin-top: 0;
}

/* ================================= */
/*  ESTILO HR empleado para Inventario 
    de Productos*/
/* ================================= */
.miHr {
  height: 8px;
  background-image: linear-gradient(90deg, red, transparent);
  border: 0;
  height: 1px;
}

/* ================================= */
/* SIMULACION */
/* ================================= */
.dropdown_select {
  position: relative;
  height: 2.5rem; /*3*/
  font-size: 1.1rem;
  padding: 0.5rem;
  background-color: #f0ede6;
  cursor: pointer;
  border-radius: 5px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 1rem;
}

.dropdown_select::before {
  content: "\25BC";
  /* Triángulo hacia abajo */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);

  /* Invertimos la rotación para que apunte hacia arriba por defecto */
  transition: transform 0.3s ease;
}

.dropdown_select.dropdown_open::before {
  transform: translateY(-50%) rotate(180deg);
  /* Rotamos el triángulo hacia arriba cuando el menú está abierto */
}

#options {
  margin: 0.5rem 0;
  width: auto;
  background-color: lightgrey;
  display: none;
  flex-direction: column;
  border-radius: 12px;
}

#options:hover {
  cursor: pointer;
}

.labelSimulation {
  padding: 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.labelSimulation:hover {
  background-color: aqua;
  cursor: pointer;
}


button.btnVerPedidoCliente{    
    margin-left: auto;
}

input[type="checkbox"].chkSimulation {
  transform: scale(1.5);
  margin-right: 0.3rem;
  margin-left: 0.8rem;
  cursor: pointer;
}

/* ================================= */
/*  Ocultar o mostrar columnas, aplica para
    simulacion-fabricacion */
/* ================================= */
.columnaOculta {
  display: none;
}

.segundaColumna {
  transition: margin-left 0.5s ease;
  -webkit-transition: margin-left 0.5s ease;
  -moz-transition: margin-left 0.5s ease;
  -ms-transition: margin-left 0.5s ease;
  -o-transition: margin-left 0.5s ease;
}

.btnControles{
  display: none;
  margin: 0.5rem 0;  
}
  
/* ================================= */
/*  RADIO BUTTONS empleado en simulacion-fabricacion*/
/* ================================= */
/* Estilos para los radio buttons */
.form-check-input[type="radio"] {
  display: none; /* Oculta el input original */ 
}

/* Estilos para el contenedor del radio button */
.form-check-inline {
  position: relative; /* Posición relativa para permitir el uso de ::before */
  padding-left: 30px; /* Espacio para el botón personalizado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el contenedor */
 
}

/* Estilos para el pseudo-elemento ::before */
.form-check-inline input[type="radio"] + .form-check-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s ease;  
}

/* Estilos para el pseudo-elemento ::before cuando el radio button está seleccionado */
.form-check-inline input[type="radio"]:checked + .form-check-label::before {
  background-color: #007bff; /* Cambia el color de fondo a azul cuando está seleccionado */
  border-color: #007bff; /* Cambia el color del borde a azul cuando está seleccionado */
  border: 2px solid #000; /* Borde negro */  
}

/* Estilos para el texto del radio button */
.form-check-label {
  margin-left: 5px; /* Espacio entre el botón personalizado y el texto */
  font-size: 16px;
  font-weight: 600;  
}

/* Estilos para cambiar el cursor al pasar sobre el texto */
.form-check-label:hover {
  cursor: pointer;  
}

/* ================================= */
/* OCULTAR VIEW PARA simuladores */
/* ================================= */

.viewBotones, .viewPedidoCliente,.viewProducto,.btnControles{
  display: none;
}

/* ================================= */
/* FILTRO 1 BUSQUEDA */
/* ================================= */
.dropdown label input[type="checkbox"] {
  margin-right: 8px; 
}

  
/* ================================= */
/* Filtro de selección de batch a fabricar 
   simulación de fabricaciones
*/
/* ================================= */
/* Aplica el estilo cursor pointer solo al elemento select con el ID selectBatchFabricar */
#selectBatchFabricar {
  cursor: pointer;
}


/* ================================= */
/* Son los filtros desplegables empleados
  en simulacion-fabricacion */
/* ================================= */
.dropdown-menu label {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  max-height: 200px; /* Define la altura máxima de la caja desplegable */
  overflow-y: auto; /* Agrega scroll vertical cuando el contenido excede la altura máxima */
}

/* ================================= */
/* SIMULACION - Acordeon*/
/* ================================= */
.acordeon-simulador {
  color: #fff000;
  background: #000 !important;
  opacity: 0.7;
  border: 1px solid #20457c;
  border-radius: 5px;
  line-height: 35px;
  cursor: pointer;
}
/* ================================= */
/* Botones de Tab Salida Node 1  */
/* ================================= */
.btnTabSalidaNode_1, 
.btnTabSalidaNode_2,
.btnTabSalidaNode_3{
  font-size: 20px;
  background:#000000;
  color:#FFF000
}

.btnTabSalidaNode_1:hover,
.btnTabSalidaNode_2:hover,
.btnTabSalidaNode_3:hover{
  color: #ffffff;
}

/* ================================= */
/* CALENDARIO O EVENTOS */
/* ================================= */
/*Personalizar al calendar botones */
.fc-button.fc-button-primary {
  padding: 4px 16px; /* Original: 8px 16px*/  
  border: 1px solid #007bff;
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  margin: 2px;
}

/* hover a los botones*/
.fc-button.fc-button-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* ================================= */
/* FONDO DE BIENVENIDA PAG INICIO */
/* ================================= */
  .imgBienvenida {    
      background-image: url('../img/bienvenidos_trace365.jpg');/* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen de fondo */
      background-size: cover; /* Ajusta la imagen para cubrir todo el fondo */
      background-repeat: no-repeat; /* Evita que la imagen se repita */
      background-position: center; /* Centra la imagen en el fondo */
      min-height: 100vh; /* Establece la altura mínima al 100% del viewport */
      padding: 20px; /* Añade espacio de relleno interior para el contenido */
  }

  /* ================================= */
  /* ESTILO PARA PROCEDIMIENTO DE FABRICACION */
  /* ================================= */
  #tblProcedimiento li {
    margin-bottom: 10px;  /* Espacio entre los elementos de la lista */
  }

.fila-par {
    background-color: rgba(156, 173, 164, 0.5);
    padding: 10px;  /* Espacio interno dentro de cada fila */
    border-radius: 5px;  /* Opcional: esquinas redondeadas para mayor estética */
}