:root{
    --inv-color-gris:#f5f5f5;
    --inv-color-verde:#25d366;
    --inv-color-blanco: #ffffff;
    --inv-color-negro: #272727;
    --inv-color-gris-2: #cccccc;
    --inv-color-verde-oscuro: #00a352;
    --inv-color-gris-oscuro: #a5a5a5;
    --inv-color-amarillo: #ffc100;
    --text-muted: #666;
}
html{
    font-family: 'Roboto', sans-serif;
}
body{
    background-color: var(--inv-color-gris);
}
label{
    color: var(--inv-color-negro);
    font-weight: 600;
}
input, select, textarea{
    border-color: var(--inv-color-negro) !important;
}

.contenedores{
  --custom-espacio:1rem;
  background-color: var(--inv-color-blanco);
  border-radius: 10px;
  padding-top: calc(var(--custom-espacio)* .8);
  padding-bottom: calc(var(--custom-espacio)* .8);
  padding-left: calc(var(--custom-espacio)* 1.2);
  padding-right: calc(var(--custom-espacio)* 1.2);
}

header{
  --custom-espacio:1rem;
  padding-top: calc(var(--custom-espacio)* 1);
  padding-left: calc(var(--custom-espacio)* 3);
  padding-right: calc(var(--custom-espacio)* 3);
  margin-bottom: 2rem;
}
header h3{
  color: var(--inv-color-verde);
  text-transform: uppercase;
}
.User{
  font-size: 1.4rem;
}
.BtnOut{
  --custom-espacio:1rem;
  background-color: var(--inv-color-verde);
  color: var(--inv-color-blanco);
  border: 0;
  padding: calc(var(--custom-espacio)* .3);
  width: 90px;
  border-radius: 30px;
}
main{
  --custom-espacio:1rem;
  padding-left: calc(var(--custom-espacio)* 3);
  padding-right: calc(var(--custom-espacio)* 3);
  margin-bottom: 1.5rem;
}
.contenedorMenu{
  --custom-espacio:1rem;
  background-color: var(--inv-color-verde);
  padding-top: calc(var(--custom-espacio)* .8);
  padding-left: calc(var(--custom-espacio)* 2);
  padding-right: calc(var(--custom-espacio)* 2);
  border-radius: 30px;
  height: 50px;
}
.contenedorMenu a{
  color: var(--inv-color-blanco);
  text-decoration: none;
  font-weight: 600;
}
.contenedorMenu a.active{
  color: var(--inv-color-negro);
}

.tab-content {
    display: none;
}
.tab-content.activo{
  display: block;
}
.btnTabsPrincipal {
  --custom-espacio: 1rem;
  background-color: var(--inv-color-gris);
  color: var(--inv-color-negro);
  border: 0;
  padding: calc(var(--custom-espacio)* .4);
  width: 200px;
  border-radius: 30px;
}
.btnTabsPrincipal.activo{
  background-color: var(--inv-color-verde);
  color: var(--inv-color-blanco);
}
table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid var(--inv-color-negro);
}

td {
  padding: 12px;
  border-bottom: 1px solid var(--inv-color-gris-2);
}
.btnVolverInicio{
  --custom-espacio: 1rem;
  background-color: var(--inv-color-gris-oscuro);
  color: var(--inv-color-blanco);
  font-size: 1.1rem;
  padding-top: calc(var(--custom-espacio)* .4);
  padding-bottom: calc(var(--custom-espacio)* .4);
  padding-left: calc(var(--custom-espacio)* 1);
  padding-right: calc(var(--custom-espacio)* 1);
  border-radius: 30px;
  text-decoration: none;

}
textarea{
  resize: none;
  outline: none;
  border-color: var(--inv-color-negro);
}
.form-control:focus{
  box-shadow:none !important;
  outline: none !important;
  border-color: var(--inv-color-negro);
}
/*======================================================================
  Utilidades
======================================================================*/
.u-flex {
  display: flex;
}
.u-flex-min-h-screen {
  display: flex;
  min-height: 100vh;
}
.u-flex-row        { flex-direction: row; }           /* fila */
.u-flex-row-reverse{ flex-direction: row-reverse; }   /* fila invertida */
.u-flex-col        { flex-direction: column; }        /* columna */
.u-flex-col-reverse{ flex-direction: column-reverse;} /* columna invertida */

.u-flex-wrap       { flex-wrap: wrap; }
.u-flex-wrap-reverse { flex-wrap: wrap-reverse; }
.u-flex-nowrap     { flex-wrap: nowrap; }

.u-center {
  align-items: center;    /* centra verticalmente */
  justify-content: center;/* centra horizontalmente */
}
.u-flex-1 {
  flex: 1 1 0%;
}
.u-justify-between {
  justify-content: space-between;
}
.u-justify-center {
    justify-content: center;
}
.u-position-relative{
    position: relative;
}
.u-aling-item-end{
  align-items: flex-end;
}
.u-aling-content-end{
  align-content: end;
}
.u-min-container{
    --custom-espacio: 1rem;
    max-width: 850px;
    padding-left: calc(var(--custom-espacio)* .75rem);
    padding-right:  calc(var(--custom-espacio)* .75rem);
    margin-left: auto;
    margin-right: auto;

}
/* Espaciado horizontal (entre hijos directos) */
.u-space-x-0  > * + * { margin-left: 0rem; }      /* 0px */
.u-space-x-1  > * + * { margin-left: 0.25rem; }   /* 4px */
.u-space-x-2  > * + * { margin-left: 0.5rem; }    /* 8px */
.u-space-x-3  > * + * { margin-left: 0.75rem; }   /* 12px */
.u-space-x-4  > * + * { margin-left: 1rem; }      /* 16px */
.u-space-x-5  > * + * { margin-left: 1.25rem; }   /* 20px */
.u-space-x-6  > * + * { margin-left: 1.5rem; }    /* 24px */
.u-space-x-7  > * + * { margin-left: 1.75rem; }   /* 28px */
.u-space-x-8  > * + * { margin-left: 2rem; }      /* 32px */
.u-space-x-9  > * + * { margin-left: 2.25rem; }   /* 36px */
.u-space-x-10 > * + * { margin-left: 2.5rem; }    /* 40px */

/* Espaciado vertical (entre hijos directos) */
.u-space-y-0  > * + * { margin-top: 0rem; }       /* 0px */
.u-space-y-1  > * + * { margin-top: 0.25rem; }    /* 4px */
.u-space-y-2  > * + * { margin-top: 0.5rem; }     /* 8px */
.u-space-y-3  > * + * { margin-top: 0.75rem; }    /* 12px */
.u-space-y-4  > * + * { margin-top: 1rem; }       /* 16px */
.u-space-y-5  > * + * { margin-top: 1.25rem; }    /* 20px */
.u-space-y-6  > * + * { margin-top: 1.5rem; }     /* 24px */
.u-space-y-7  > * + * { margin-top: 1.75rem; }    /* 28px */
.u-space-y-8  > * + * { margin-top: 2rem; }       /* 32px */
.u-space-y-9  > * + * { margin-top: 2.25rem; }    /* 36px */
.u-space-y-10 > * + * { margin-top: 2.5rem; }     /* 40px */

.u-items-center {
  align-items: center;
}
.u-gap-0  { gap: 0rem; }      /* 0px */
.u-gap-1  { gap: 0.25rem; }   /* 4px */
.u-gap-2  { gap: 0.5rem; }    /* 8px */
.u-gap-3  { gap: 0.75rem; }   /* 12px */
.u-gap-4  { gap: 1rem; }      /* 16px */
.u-gap-5  { gap: 1.25rem; }   /* 20px */
.u-gap-6  { gap: 1.5rem; }    /* 24px */
.u-gap-7  { gap: 1.75rem; }   /* 28px */
.u-gap-8  { gap: 2rem; }      /* 32px */
.u-gap-9  { gap: 2.25rem; }   /* 36px */
.u-gap-10 { gap: 2.5rem; }    /* 40px */

/* Width basado en 12 columnas */
.u-w-1-12 { width: 8.3333%; }
.u-w-2-12 { width: 16.6667%; }
.u-w-3-12 { width: 25%; }
.u-w-4-12 { width: 33.3333%; }
.u-w-5-12 { width: 41.6667%; }
.u-w-6-12 { width: 50%; }
.u-w-7-12 { width: 58.3333%; }
.u-w-8-12 { width: 66.6667%; }
.u-w-9-12 { width: 75%; }
.u-w-10-12 { width: 83.3333%; }
.u-w-11-12 { width: 91.6667%; }
.u-w-12-12 { width: 100%; }

/* --- Position --- */
.u-static   { position: static; }
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed    { position: fixed; }
.u-sticky   { position: sticky; }

/* --- Font Weight --- */
.u-font-thin       { font-weight: 100; }
.u-font-extralight { font-weight: 200; }
.u-font-light      { font-weight: 300; }
.u-font-normal     { font-weight: 400; }
.u-font-medium     { font-weight: 500; }
.u-font-semibold   { font-weight: 600; }
.u-font-bold       { font-weight: 700; }
.u-font-extrabold  { font-weight: 800; }
.u-font-black      { font-weight: 900; }

/*anexo*/
.paddCeroCuatro{
    padding: .4rem;
}
/*======================================================================
  Fin Utilidades
======================================================================*/
/*======================================================================
  Login
======================================================================*/
.contenedorLogin {
    --custom-espacio: 1rem;
    background-color: var(--inv-color-blanco);
    width: 550px;
    text-align: center;
    padding: calc(var(--custom-espacio)* 1);
    border-radius: 10px;
}
.contenedorLogin h1{
    font-size: 1.8rem;
    color: var(--inv-color-verde);
    text-transform: uppercase;
    margin-bottom: 3rem;
}
.contenedorLogin form{
    max-width: 400px;
    margin: 0 auto;
}
.BtnIngresar{
    --custom-espacio: 1rem;
    background-color: var(--inv-color-verde);
    color: var(--inv-color-blanco);
    width: 100%;
    border-radius: 30px;
    border: 0;
    padding: calc(var(--custom-espacio)*.3);
    margin-bottom: 1rem;
}
.linkOlvide{
    color: var(--inv-color-negro);
    text-decoration: none;
}
.contenedorMensajeLogin{
  --custom-espacio: 1rem;
  padding-left: calc(var(--custom-espacio)* 1);
  padding-right: calc(var(--custom-espacio)* 1);
  margin-bottom: 2rem;
}
.ulCondicionesPass{
  text-align: left;
}
.ulCondicionesPass li{
      margin-left: 2rem;
}
/*======================================================================
  Fin Login
======================================================================*/
/*======================================================================
  Sucursales
======================================================================*/

.sucursales-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 30px;
}

.sucursales-group input[type="radio"] {
  display: none; 
}

.btnSecursal {
    --custom-espacio: 1rem;
    background-color: var(--inv-color-verde);
    color: var(--inv-color-blanco);
    padding-top: calc(var(--custom-espacio)* .6);
    padding-bottom: calc(var(--custom-espacio)* .6);
    padding-left: calc(var(--custom-espacio)* 1.2);
    padding-right: calc(var(--custom-espacio)* 1.2);
    border-radius: 25px;
    cursor: pointer;
    flex: 1;
    font-weight: 600;
    text-align: center;
    transition: opacity 0.3s;
}
input[type="radio"]:checked + .btnSecursal {
  background-color: var(--inv-color-verde-oscuro); 
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

.courier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.courier-card {
  background: var(--inv-color-blanco);
  border: 1px solid var(--inv-color-gris-2);
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.courier-card:hover {
  border-color: var(--inv-color-verde);
  transform: translateY(-2px);
}

.courier-card img {
  max-width: 230px;
  height: auto;
}
.textMensaje{
  font-size: 1.1rem;
}
/*======================================================================
  Fin Sucursales
======================================================================*/

/*======================================================================
  Listado de Documentos
======================================================================*/

.btnBuscar{
  background-color: var(--inv-color-verde);
  color: var(--inv-color-blanco);
  border: 1px solid var(--inv-color-verde);
  width: 130px;
  border-radius: 30px;
}
.custom-datepicker {
  outline: none;
  cursor: pointer; 
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.pagination-target button {
  border: 1px solid var(--inv-color-gris-2);
  background: var(--inv-color-blanco);
  padding: 5px 10px;
  margin-left: 5px;
  cursor: pointer;
  border-radius: 4px;
}
.pagination-target button.active {
  border-color: var(--inv-color-negro);
  font-weight: bold;
}
.pagination-target button {
  border: 1px solid var(--inv-color-gris-2);
  background: var(--inv-color-blanco);
  padding: 5px 12px;
  margin-left: 5px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  color: var(--inv-color-negro);
}


.pagination-target button.active {
  border-color: var(--inv-color-negro);
  font-weight: bold;
  background-color: var(--inv-color-gris);
}


.pagination button:disabled {
  color: #ccc;
  border-color: #eee;
  cursor: not-allowed;
}


.pagination button:not(:disabled):hover {
  background-color: var(--inv-color-verde);
  color: var(--inv-color-blanco);
  border-color: var(--inv-color-verde);
}
.detail{
  text-align: right;
}
.view-detail{
  color: var(--inv-color-negro);
  font-weight: 600;
  text-decoration: none;
}
.status-active{
  color: var(--inv-color-verde);
  font-weight: 600;
}
.status-procesado{
  font-weight: 600;
  color: var(--inv-color-verde);
}
.status-incompleto{
  font-weight: 600;
  color: var(--inv-color-amarillo);
}
.status-pendiente{
  font-weight: 600;
  color: var(--inv-color-negro);
}

.status-checker {
    display: none;
}

.pill {
    --custom-espacio: 1rem;
    padding-top: calc(var(--custom-espacio)* .5);
    padding-bottom: calc(var(--custom-espacio)* .5);
    padding-left: calc(var(--custom-espacio)* 1.2);
    padding-right: calc(var(--custom-espacio)* 1.2);
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--inv-color-blanco);
    transition: all 0.3s ease;
    opacity: 0.4; /* Se ven semi-transparentes si no están seleccionados */
    user-select: none;
}

.pill-pendiente { background-color: var(--inv-color-negro) }
.pill-incompleto { background-color: var(--inv-color-amarillo); }
.pill-procesado  { background-color: var(--inv-color-verde) }

.status-checker:checked + .pill {
    opacity: 1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.contenedorNroDoc h3{
  color: var(--inv-color-verde);
}
.contenedorNroDoc h3 span{
  color: var(--inv-color-negro);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}
.label-title {
  font-weight: 600;
  color: var(--text-main);
}

.label-count {
  color: var(--text-muted);
}

/* El "riel" de la barra */
.progress-track {
  background-color: var(--track-gray);
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--inv-color-gris-2); 
  overflow: hidden; 
}


.progress-fill {
  height: 100%;
  background-color: var(--inv-color-verde);
  border-radius: 10px;
  transition: width 0.3s ease-in-out; /* Animación suave al cambiar */
}

.progress-percentage {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
}
.bultos-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--inv-color-gris-2);
  border-radius: 30px;
  padding: 5px 15px;
  background: var(--inv-color-blanco);
}

.btn-step {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  padding: 0 10px;
  transition: transform 0.1s ease;
}

.btn-step:active {
  transform: scale(1.2); /* Efecto visual al hacer clic */
}

#input-bultos {
  width: 50px;
  text-align: center;
  border: none;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  appearance: textfield;
}

/* Quita las flechas en Chrome, Safari y Edge */
#input-bultos::-webkit-outer-spin-button,
#input-bultos::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btnPendiente{
  --custom-espacio:1rem;
  background-color: var(--inv-color-negro);
  color: var(--inv-color-blanco);
  padding: calc(var(--custom-espacio)* .4);
  width: 100%;
  border-radius: 30px;
  cursor: default !important;
}
.btnIncompleto{
  --custom-espacio:1rem;
  background-color: var(--inv-color-amarillo);
  border: 1px solid var(--inv-color-amarillo);
  color: var(--inv-color-blanco);
  padding: calc(var(--custom-espacio)* .4);
  width: 100%;
  border-radius: 30px;
}
.btnProcesar{
  --custom-espacio:1rem;
  background-color: var(--inv-color-verde);
  border: 1px solid var(--inv-color-verde);
  color: var(--inv-color-blanco);
  padding: calc(var(--custom-espacio)* .4);
  width: 100%;
  border-radius: 30px;
}

.btnProcesar:disabled, .btnIncompleto:disabled{
  background-color: var(--inv-color-gris-2) !important;
  border: 1px solid var(--inv-color-gris-2);

}
.btnGuardar{
   --custom-espacio:1rem;
  background-color: var(--inv-color-verde);
  border: 1px solid var(--inv-color-verde);
  color: var(--inv-color-blanco);
  padding: calc(var(--custom-espacio)* .4);
  width: 200px;
  border-radius: 30px;
}
.activeBtn{
  display: block;
}
.contedorProductosDetalle{
  --custom-espacio: 1rem;
  border-left: 1px solid var(--inv-color-negro);
  padding-left: calc(var(--custom-espacio)* .8);
}
.detalleEstado{
  --custon-espacio: 1rem;
  border: 1px solid var(--inv-color-negro);
  border-radius: 7px;
  height: 38px;
  align-items: center;
  align-content: center;
  padding-left: calc(var(--custom-espacio)* .8);
  background-color: var(--bs-secondary-bg);
}
.checkCompleto{
  color: var(--inv-color-verde);
}
.checkIncompleto{
  color: var(--inv-color-gris-oscuro);
}
.descripcionPack{
  --custon-espacio: 1rem;
  border: 1px solid var(--inv-color-negro);
  border-radius: 7px;
  height: 100%;
  align-items: center;
  align-content: center;
  padding-left: calc(var(--custom-espacio)* .8);
  padding-right: calc(var(--custom-espacio)* .8);
  background-color: var(--bs-secondary-bg);

}

.contenedorEstadoHistorial {
    --custom-espacio: 1rem;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--inv-color-negro);
    padding-top: calc(var(--custom-espacio)* .4);
    padding-bottom: calc(var(--custom-espacio)* .4);
    padding-left: calc(var(--custom-espacio)* 1);
    padding-right: calc(var(--custom-espacio)* 1);
    border-radius: 10px;
}
.estadoNA {
    --custom-espacio: 1rem;
    padding-left: calc(var(--custom-espacio)* 1.3);
}

.Incompleto {
    color: var(--inv-color-amarillo);
}

.Completo {
    color: var(--inv-color-verde);
}
.version {
    
    color: #333333;
    font-size: 1rem;
    position:fixed;
    width:100%;
    margin:0 auto;
    bottom:1rem;
    text-align:center;

}

.borderBottom {
    border-bottom: 1px solid var(--inv-color-negro);
}
.btnNumeroSerie{
  --custom-espacio: 1rem;  
  width: 100%;
  padding: calc(var(--custom-espacio)* .4);
  border-radius: 30px;
  background: transparent;
  border: 1px solid var(--inv-color-negro);

}