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

.login-page,
.register-page {
  background: linear-gradient(rgba(255, 193, 7, 0.45), rgba(0, 30, 50, 0.85)) !important;
   width: 100% !important; /*esto lo agregue último*/
}

/* ================================= */
/* 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
/* ================================= */
#tblDevolucionesMateriales_filter input,
#tbl_devolucionMateriales_filter input,
#tblListadoCriterioDespacho_filter input,
#tblListadoCriterioInstalaciones_filter input,
#tblPoliticaPrecios_filter input,
#tblCostoUnitario_filter input,
#tblActividades_filter input,
#tblCMP_filter input,
#tblCMOD_filter input,
#tblConfiguracionCostosGastos_filter input,
#tblGFinancieros_filter input,
#tblGVentas_filter input,
#tblGAdmin_filter input,
#tblCif_filter input,
#tblConfiguracionCostos_filter input,
#tblListadoCriterioPersonal_filter input,
#tblMaquinas_filter input,
#tblProductosCargados_filter input,
#tblMaterialesCargados_filter input,
#tblPerfiles_filter input,
#tbl_orden_fabricaciones_filter input,
#tblPredictamen_filter input, 
#tblPredictamenProductos_filter input,  
#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,

#tblTrabajadores_filter input,
#tblProveedores_filter input,
#tblAreas_filter input,
#tblCargos_filter input,
#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: 16px; /* antes 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 */
/* NOTA.- SE DIO DE BAJA 26-12-2025 */
/* ================================= */
/*
#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: #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-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;
  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";  
  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;
  padding: 0px;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-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)); */

  background: linear-gradient(135deg, rgba(242, 246, 50, 0.7), rgba(255, 193, 7, 0.50));
}

.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(166, 226, 46, 0.7), rgba(40, 167, 69, 0.50));
}


/* ================================= */
/* 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 */
}


/* ================================= */
/* ESTILO PARA LOS CRITERIS DE BUSQUEDA 
   Se usó en materiales y productos*/
/* ================================= */
.card-header {
  cursor: pointer;
}

#btnCerrarBusqueda{
  background-color: #ffffff;
  color: #17a2b8;
  /*colorinfo*/border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

#btnCerrarBusqueda:hover {
  background-color:#FF0000;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}


/* ================================= */
/* Icomo que muestra el 'v' doble y aqui 
   lo haremos que se muestre uno solo,  
   ejem,lo puedes verlo en el listado de formulas
   es un icono desplegable */
/* ================================= */
.dropdown-toggle::after {
  display: none !important;
}



/* ================================= */
/* INCIO.-  ESTILO PARA ACORDEÓN
   Se aplico para::
   - orden-fabricaciones
 */
/* ================================= */
 /* Contenedor principal */
.acordeon-contenedor {
    max-width: 100%;
    margin: 20px auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    
}

.acordeon-item {
    background: #ffffff;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Ocultamos el checkbox real */
.acordeon-check { 
    display: none;
}

/* El Label actúa como el botón del encabezado */
.acordeon-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    /* background: #f8f9fa; */
    background: rgb(205, 235, 243);
    color: #333;
    /* font-weight: bold; */
    font-weight: 600 !important;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;    
}

.acordeon-titulo:hover {
    background: #eeeeee;
}

/* Estilo del contenido (Oculto por defecto) */
.acordeon-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fff;
}

/* Padding interno para que no se pegue el texto al borde */
.contenido-pad {
    padding: 20px;
    border-top: 1px solid #eee;
}

/* LOGICA: Cuando el checkbox está MARCADO, mostramos el contenido */
.acordeon-check:checked ~ .acordeon-contenido {
    max-height: 1000px; /* Un valor lo suficientemente alto */
}

/* LOGICA: Cambio de color del título cuando está abierto */
.acordeon-check:checked ~ .acordeon-titulo {
    background: #ffc107; /* Color warning de tu diseño */
    color: #000;
}

/* Animación de la flecha */
.flecha {
    width: 10px;
    height: 10px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

.acordeon-check:checked ~ .acordeon-titulo .flecha {
    transform: rotate(-135deg);
}

/* FIN.-  ESTILO PARA ACORDEÓN */


/* ================================= */
/*  ESTILO DE HEADER PARA ENCABEZADOS
    usados en:
    - trazabilidad
    - simulador
    - configuracion-procesos
    - configuracion-contabilidad-costos
*/
/* ================================= */

:root {
        --trace-blue: #1a4884;
        --trace-gradient: linear-gradient(145deg, #1a4884 0%, #3b82f6 100%);
        --trace-accent: #FFC107;
    }

    /* Fondo general */
    .bg-header {
        background: #f4f7f6;
        border-radius: 20px;
        padding: 10px;
    }

    /* Header con padding extra inferior para evitar solapamiento */
    .header-impact {
        background: var(--trace-gradient);
        color: white;
        padding: 60px 40px 110px 40px;
        /* Mucho espacio abajo */
        border-radius: 20px;
        position: relative;
        box-shadow: 0 10px 30px rgba(26, 72, 132, 0.2);
    }

    /* Buscador que sube pero no tapa el texto */
    .search-container-premium {
        background: white;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
        position: relative;
        z-index: 10;
        margin-top: -70px;
        /* Margen negativo controlado */
        margin-left: 25px;
        margin-right: 25px;
    }