body {
    color: #333; /* Puedes ajustar este valor al tono que desees */
}

.div-superior {
    flex: 1;
}

/* Barras Titulo */
.barra-titulo {
    position: fixed;
    right: 0px;
    color: var(--color-base-texto);
    z-index: 0;
    border-bottom: 1px solid #ccc;
    background-color: var(--color-base-fondo);
    padding: 12px 24px 12px 24px;
    
}


.barra-titulo-texto {
    display: flex;    
    justify-content: space-between;    
    padding: 0px;
}

/* Pagina. Incluye la botonera superior */
.pagina {
    padding:0;
    padding-bottom: 60px;
    overflow-y: auto;
    z-index: -1;
}

.contenido {
    padding-top: 0.8rem;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    z-index: -2;
}

/* Barra Inferior*/
.barra-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0px;
    background-color: var(--color-base-principal_tono2);
    color: var(--color-base-textoinvertido);
}

.barra-inferior-texto {
    color: var(--color-base-textoinvertido);
}

.barra-inferior button {
    color: var(--color-base-textoinvertido);
}


/*Para pantallas grandes (mayores o iguales a 992px)*/
@media (min-width: 641px) {
    .barra-inferior {
        left: 250px;
    }

    .barra-titulo {
        top: 0;
        left: 250px;               
    }
    
    .barra-titulo-texto {
        padding-left:6px;
    }

    .pagina {
        padding-top: 49px;
        height: calc(100% - 49px);
    }

    .barra-subtitulo {
        top: 49px;
        left: 250px;
    }

    .pagina-con-subtitulo {
        padding-top: 98px;
        height: calc(100% - 98px);
    }

}
/*Para pantallas medianas y pequeñas (menores a 992px)*/
@media (max-width: 640px) {
    .barra-inferior {
        left: 0;
    }

    .barra-titulo {
        top: 56px;
        left: 0;
    }
    
    .barra-titulo-texto {
        
    }
    .pagina {
        padding-top: 105px;
        height: calc(100% - 105px);
    }

    .barra-subtitulo {
        top: 105px;
        left: 0px;
    }

    .pagina-con-subtitulo {
        padding-top: 154px;
        height: calc(100% - 154px);
    }
}

/* Otras*/
.cursor-hand {
    cursor: pointer;
}

.row-espacio {
    margin-bottom: 16px;
}
.row-divider {
    border-bottom: 1px solid #ccc;
    margin-top: 5px; 
    margin-bottom: 5px; 
}


.centered-vertical-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nota {
    color: #808080; /* Puedes ajustar este valor al tono que desees */
}

.texto-cantidad-corregida {
    color: goldenrod;
}

.texto-cantidad-devuelta {
    color: goldenrod;
}

.venta-anulada {
    color: red;
}

.venta-con-correciones-devoluciones {
    color: goldenrod;
}

.contenedor {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}



.flecha {
    font-size: 24px;
    cursor: pointer;    
}


/* Componente TABS */
.tab-container {
    width: 100%;
    padding: 0;
}

.tab-header {
    display: flex;
    width: 100%;
    padding: 0;    
    /*background-color: var(--color-base-fondo_tono2 );*/
    border-bottom: 1px solid #ccc;
}

.tab-button {
    cursor: pointer;
    padding: 10px 15px;
    border: none;
    background-color: var(--color-base-fondo_tono2 );
    /*background-color: #f1f1f1;*/
    /*font-weight: bold;*/
    outline: none;
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
}

.tab-button:hover {
    background-color: #ddd;
}

.tab-button.active {
    /*background-color: #fff;*/
    background-color: var(--color-base-fondo_tono2 );
    border-bottom: 2px solid #007bff;
}

.tab-content {        
    border-top: none;
}

.tab-item {
    display: none;
}

    .tab-item.active {
        /*display: block;*/        
    }


.input-busqueda {
    border: 0;
    box-shadow: none;
    margin-left: 10px;
    width: calc(100% - 10px);
}


/* Login */
.login-container {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--color-base-fondo );
    align-items: start;
}


.login-form {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    background-color: var(--color-base-fondo );
}

@media (min-width: 641px) {

    .login-form {
        width: 50%;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 0.5rem;
    }

    .login-container {
        background-color: var(--color-base-fondo_tono2 );
        align-items: center;
    }
}




/* Boton de actualizacion */
.floating-update-button {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    padding: 1rem 1.5rem;
    animation: fadein 2s ease-out;
}

@keyframes fadein {
    from {
        right: -100%;
    }

    to {
        right: 2rem;
    }
}


.custom-col-15 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}