:root{
  --cl-red:#c51d1d;
  --cl-silver:#e5e5e5;
}
.main.container{
  padding-top: 20px;
}
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: calc(100vw - 100px);
  }
}

.btn-burger{
  height: 46px;
}
form .form-button-group{
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;

}
form .form-button-group .btn{
  margin-right: 15px;
  margin-left: 15px;
}
.card-header,.card-tabs{
  background-color: var(--cl-silver);
  display: flex;
  align-content:flex-end;
  justify-content: space-between;
  border-bottom: 0px;
  padding-bottom: 9px;
}
.card-tabs .card-header-tabs{
  margin-left: 1px;
  margin-top: 4px;

}
.card.card-warning > .card-header{
  background-color: var(--bs-warning);
}
.card.card-danger > .card-header{
  background-color: var(--bs-danger);
}
.card.card-primary > .card-header{
  background-color: var(--bs-primary);
}
.card.card-success > .card-header{
  background-color: var(--bs-success);
}

.card-header .card-title{
  margin: 0px 0px;
  line-height: 34px;
  max-width: max-content;
}
.card-header .card-tools{
  align-self: end;
  xdisplay: inline-flex;
  text-align: right;
}
.card-body.card-scroll,
.card-body .cnt-scroll{
  max-height: calc(100vh - 160px);
  height: 100%;
  overflow: auto;
}
@media all and (max-width: 500px) and (min-height: 501px) {
  .card-body.card-scroll,
  .card-body .cnt-scroll{
    max-height: calc(100vh - 100px) ;
  }
}



.modal .modal-body .form-button-group .option-btn{
  margin: 15px 10px;
  font-size: 16px;
  width: 90%;
}
.card{
  box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}
.card .card-tools{
  min-width: 40%;
}
.card .card-tools>table{
  width: 100%;
  min-width: 200px;
}

.card .card-tools .form-control{
  margin-bottom:0px;
  margin-top:-4px;
  min-height: 35px;
}
.card .card-tools table td.form-group .btn{
  margin-top:-4px;
}

@media all and (max-width: 900px) {
  .card-header{
    display: inline-block !important;
    width: 100% !important
  }
  .card .card-tools{
    float: right !important;
    width: 100% !important;
  }
}

.table.table-options tbody tr{
  cursor: pointer;
}
.table.table-options tbody tr:hover{
  background-color: rgba(0, 46, 246, 0.2);
}

.table.table-options tbody tr:active,
.table.table-options tbody tr:focus{
  background-color: #baead6;
}


table.table{
  border-collapse: collapse;
}
table.table tr th{
  background-color: #f8f8f8;
}
table.table tr th,
table.table tr td{
  border: 1px solid #e2e2e2;
  padding: 4px 6px;
  vertical-align: top;
}
.table-status tbody tr[st=Enviado] td.col0{
  background-color: #aef2ba;
  cursor: pointer;
}
.table-status tbody tr[st=Entregado] td.col0{
  background-color: var(--bs-green);
  cursor: pointer;
  color: white;
}
.table-status tbody tr[st=Impreso] td.col0{
  background-color: #cfdef2;
  cursor: pointer;
}
.table-status tbody tr[st=Cancelado] td.col0{
  background-color: var(--bs-red);
  color: white;
}
tr[st=Cerrado] td.col0{
  background-color: var(--bs-green);
  color: white;
}

tr[st=Abierto] td.col0{
  background-color: var(--bs-red);
  color: white;
}

.table-status tbody td.col0:hover,
.table-status tbody td.col0:active{
  opacity:0.8;
}


#BTOptionDialog .modal-dialog{
  max-width: 300px;
  margin: 0 auto;
  margin-top: 50px;
}
.modal-body #OrdServDet,
.modal-body #OrdServArt,
.modal-body #ManoDeObra{
  min-width: 1200px;
}
.atertas{
  text-align: center;
}
.alertas .alert{
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  margin-top: 20px;
}
a.text-light,
.text-light a{
  color: #d6ddff !important;
}
.card-tools>.input-group>.form-control,
.card-tools>.input-group>.btn{
  height: 34px !important;
  margin: 0px 4px !important;
  padding: 8px 10px !important;

}
.card .card-tools select.form-control,
.card .card-tools .form-control{
  height: 35px !important;
  min-height: 35px !important;
  border-right: 1px;

}
.card-header .input-group .form-control,
.card-tools .input-group .input-group .form-control,
.card-tools .input-group .form-control{
  margin-top: 0px !important;
  margin-bottom: 0px !important;

}

.card-tools .input-group{
  justify-content: flex-end;
  gap: 5px;
}
.card-tools .input-group .btn{
  height: 34px;
  padding: 10px 18px;
}
.tools-bar{
  width: 100%;

}
.right{
  text-align: right;
}
.w100{
  width: 100%
}
@media all and (max-width: 600px){
  .card-header{
    display: block;
  }
  .card-header .card-title{
    width: 100%;
  }
  .card-header .card-tools{
    width: 100%;
    display: block;
  }
}
.container .form-control,.container-fluid .form-control{
  font-size: 14px;
}
.cols{
  min-width: 100px;
}
.cols.col-fecha{
  min-width: 100px;
}

.repo-tools{
  text-align: center;
  margin-bottom: 6px;
}
.repo-tools select.form-control,.repo-tools input.form-control{
  width: 140px;
  display: inline-block;
  margin-right: 10px;
}
.repo-tools .row>div .form-control{
  width: 100%;
}

tr[autosuma="0"]{
background-color: rgba(255, 0, 0, 0.1);
}

td.cols small{
  display: block;
  color: #999999;
}
#BTAlerDialog{
  xpadding-left:17px;
}

.modal .modal-dialog.modal-xl{
  width: 94vw;
  max-width: 1300px;
  max-height: calc(100vh - 50px);
  margin:20px auto;
}

.modal{
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);

}
.modal-backdrop{
  background-color: rgba(0, 0, 0, 0.2);

}

.modal-body.modal-scroll{
  overflow:auto;
}
.modal-dialog.modal-xl .modal-body{
  overflow: auto;
  max-height: calc(100vh - 180px);
}
.modal-dialog.modal-xl h2{
  font-size: 15px;
}
body:has(.modal.show){
  overflow: hidden;
}

.info-card .info-box .info-box-icon{
  width: 50px !important;
}
.info-card .info-box-number{
  font-size: 12px;
  font-weight: normal !important;
}
.info-card .progress-description{
  font-size: 12px;
  font-weight: normal !important;
}


select.form-control{
  background-color: white;
  background-image: url("/res/imgs/arrow-down.svg");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: center;
  border-right-width: 2px !important;
  position: relative;
  padding-right: 22px;
  min-width: 50px;
}

.table tr[data-type=suma] td.cols{
  color: #4f4f4f;
  border-color: transparent;
}



.card-header:has(>.row){
  display: inline-block;
}

/** TABLEFILTERS **/


#filterList{
  background-color: #f4f4f4;
  max-height: 200px;
  overflow:auto;
  text-align: left;
  list-style: none;
  padding-left: 4px;

}
#filterList li{
  border-bottom: 1px solid #9f9f9f;
  font-size: 12px;
  line-height: 12px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #3b3b3b;
  position: relative;
}
#filterList li:hover{
  background-color: #e1e1e1;
}
#filterList li input{
  position: absolute;
  top: 6px;
  left:4px;
  height: 16px;
  width: 16px;
}
#filterList li label{
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 22px;
  width: 100%;
  cursor: default;
  user-select: none;

}


table.table tr:has(th.cols.filterCol){
  max-height: 20px !important;
  height: 20px !important;
}
table.table tr th.cols.filterCol{
  line-height: 10px;
  overflow: hidden;
  vertical-align: middle;
  max-height: 30px !important;
  height: 30px;
}
th.cols.filterCol{
  position: relative;
}
th.cols.filterCol:hover{
  cursor:pointer;
  background-color: rgba(0, 40, 140, 0.1);
}
.cols.filterCol:after {
  content: "\25BC"; /* Código Unicode para la flecha hacia abajo */
  display: inline-block;
  margin-left: 5px; /* Ajusta el margen según sea necesario */
  color: rgba(0, 0, 0, 0.3);
  position: absolute;
  right: 4px;
  top:10px;
  font-size: 14px;
}
.cols.filterCol.fltrd:after{
  color: rgba(0, 47, 192, 0.9);
}
td.nowrap,div.nowrap,
.overflow-nowrap,
.overflow-hidden,
table.table .cols.overflow-nowrap,
table.table .cols.overflow-hidden,
table.table .cols.nowrap,
table.table .cols.col-articulo,
table.table .cols.col-cliente,
table.table .cols.col-ruta,
table.table .cols.col-repartidor,
table.table .cols.col-proveedor{
  text-overflow:ellipsis ;
  overflow: hidden;
  white-space: nowrap;
  vertical-align:top;
  max-width: 170px;
  font-size: 12px;
}
#OrdServArt .cols.col-articulo,
#ManoDeObra .cols.col-articulo{
  overflow: visible !important;
  text-overflow:clip;
  white-space:normal;
}
.table tbody tr td:focus {
  outline: 2px solid rgba(0, 0, 159, 0.38); /* Borde azul al enfocar */
  background-color: rgba(240, 240, 240, 0.34); /* Fondo gris claro */
}
.table.estadodc{
  min-width: 500px;

}
@media all and (max-width: 900px), (orientation: portrait) {
  .table.estadodc{
    min-width: 600px;

  }
  .table.estadodc .cols{
    font-size: 11pt;
    font-weight: bold;
  }
}
/** TABLEFILTERS **/


@media (max-height: 500px), (max-width: 900px) {
  .modal-header,.modal-body,.modal-footer{
    padding: 5pt;
    font-size: 13pt;
  }
  .modal-title{
    font-size: 13pt;
  }
  .modal .modal-dialog.modal-xl{
    width: 97vw;
    height: 97vh;
    margin: 8pt auto;
    margin-left:8pt;
  }
  .modal-dialog.modal-xl .modal-body{
    max-height: calc(100vh - 130px);
  }
  #BTOptionDialog .modal-dialog{
    height: 95vh;
    max-height: 500px;
  }
}


.card-header.w100 {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0; /* Opcional: eliminar padding si necesitas máximo espacio */
}

.card-header.w100 .card-title,
.card-header.w100 .card-tools {
  width: 100%;
  min-width: 100%;
  padding: 0.75rem 1.25rem; /* Mantener el padding original o ajustar */
}

.card-header.w100 .card-title {
  order: 1; /* Coloca el título primero */
  border-bottom: 1px solid rgba(0,0,0,.125); /* Opcional: separador visual */
}

.card-header.w100 .card-tools {
  order: 2; /* Coloca las herramientas después */
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben */
  gap: 0.5rem; /* Espacio entre elementos */
  align-items: flex-end;
  justify-content: space-between; /* Distribuye el espacio */
}

/* Estilos para los elementos dentro de card-tools */
.card-header.w100 .card-tools .input-group {
  flex: 1; /* Ocupa el espacio disponible */
  min-width: 200px; /* Ancho mínimo para inputs */
  margin: 0.25rem 0; /* Margen vertical */
  width: 100%;
}

/* Opcional: para mantener el diseño responsive */
@media (max-width: 768px) {
  .card-header.w100 .card-tools .input-group {
    min-width: 100%; /* En móviles ocupa todo el ancho */
  }
}
tr[avance='0'] td.cols.col0  { background-color: rgba(186, 2, 2, 0.81); color:#fff; }   /* rojo */
tr[avance='20'] td.cols.col0 { background-color: rgba(182, 64, 5, 0.77); color:#fff; }   /* rojo-anaranjado */
tr[avance='40'] td.cols.col0 { background-color: rgba(172, 104, 0, 0.9); color:#fff; }   /* naranja */
tr[avance='60'] td.cols.col0 { background-color: rgba(204, 153, 0, 0.89); color:#fff; }   /* amarillo verdoso */
tr[avance='80'] td.cols.col0 { background-color: rgb(62, 131, 32); color:#fff; }   /* verde claro */
tr[avance='100'] td.cols.col0{ background-color: rgba(5, 92, 5, 0.87); color:#fff; }   /* verde fuerte */


#CalendarioChof{
  min-width: 1200px;
}
#CalendarioChof .cols{
  min-width: 35px;
  font-size: 10px;
}
#CalendarioChof td:not(:empty):not(.col0){
  background: green;
  color: white;
}
#CalendarioChof td.col0,#CalendarioChof td.col1{
  font-size: 12px;
  background-color: white !important;
  color: #252525 !important;
}