body {
    background-color: rgb(245, 244, 243);
    justify-content: center;
    align-items: center;
}

hr {
    border-color: orange;
}

h3 {
    font-weight: bolder;
    height: auto;
}

/* ESTILOS CONTENEDOR ENCABEZADO */
.encabezado {
    display: flex;
    /* align-items: center;
    justify-content: center;
    position: relative;

    margin: auto;*/
    /*background-color: rgb(228, 218, 197);*/
    background-color: #e4dfc9;
    /*border-radius: 15px;*/
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    padding: 0.5%;
}

.encabezadoImagen {
    width: 20%;
    text-align: center;
    margin: auto;
}

.encabezadoImagen img {
    height: 65px;
    margin-left: 30%;
    /*object-fit: cover;  */
}

.encabezadoTitulo {
    width: 60%;
    text-align: center;
    margin: auto;
}

.encabezadoSesion {
    width: 20%;
    text-align: center;
    margin: auto;
    font-size: small;

}

.encabezado img {
    width: 100px;
    margin-right: 30%;
}

/*ESTILOS CONTENEDOR BOTONES NAVEGACION Y FORMULARIO*/
.botonesNavegacion form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding-bottom: 30px;
    overflow-x: auto;
}

.botonesNavegacion button {
    padding: 1%;
    margin: 1%;
    background-color: rgb(246, 127, 11);
    /*rgb(7, 175, 253)*/
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    color: white;
    font-weight: bold;
}


.formularioConsultas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin: auto;
    font-family: Arial, sans-serif;
}

#operar {
    background-color: rgb(69, 139, 69);
}

/* FORMULARIO DE CONSULTAS */
.formularioConsultas form {
    width: 90%;
    /* Ocupa el 60% del ancho de la pantalla */
    max-width: 600px;
    /* Limita el ancho máximo */
    padding: 20px;
    background-color: rgb(248, 202, 157);
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0 16px 15px rgba(0, 0, 0, 0.2);
    /* Sombra */
    display: flex;
    flex-direction: column;
    align-items: center;
    /*gap: 20px; Espaciado entre filas */
}

.formularioConsultas label {
    margin-top: 20px;
    font-weight: bold;
}

.formularioConsultas input {
    padding: 8px;
    width: 60%;
    /* Los inputs ocupan todo el ancho disponible */
    box-sizing: border-box;
    /* Incluye el relleno dentro del ancho */
    border-radius: 10px;
    margin-bottom: 3px;
}

.formularioConsultas select {
    padding: 8px;
    width: 60%;
    /* Los inputs ocupan todo el ancho disponible */
    box-sizing: border-box;
    /* Incluye el relleno dentro del ancho */
    border-radius: 10px;
    margin-bottom: 3px;
}

.formularioConsultas button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 30%;
    /* Botón ocupa la mitad del ancho del formulario */
    margin-top: 20px;
}

/* FORMULARIO MOVIMIENTOS */

.formularioMovimientos form {
    width: 60%;
    /* Ocupa el 60% del ancho de la pantalla */
    max-width: 600px;
    /* Limita el ancho máximo */
    padding: 1%;
    background-color: rgb(248, 202, 157);
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0 16px 15px rgba(0, 0, 0, 0.2);
    margin: auto;
    text-align: center;
}

.formularioMovimientos label {
    margin-top: 20px;
    font-weight: bold;
}

.formularioMovimientos input {
    padding: 8px;
    /* width: 60%;*/
    /* Los inputs ocupan todo el ancho disponible */
    box-sizing: border-box;
    /* Incluye el relleno dentro del ancho */
    border-radius: 10px;
    margin-top: 7px;
}


.formularioMovimientos button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 50%;
    /* Botón ocupa la mitad del ancho del formulario */
    margin-top: 20px;
}



.error {
    /*ESTILO PARA LOS MENSAJES DE ERROR EN CUALQUIER EVENTO*/
    background-color: rgb(192, 49, 49);
    color: white;
    width: 90%;
    margin: auto;
    padding: 5px;
    text-align: center;

}

.correcto {
    /*ESTILO PARA LOS MENSAJES DE CONFIRMACION DE CUALQUIER EVENTO*/
    background-color: green;
    color: white;

    width: 90%;
    padding: 5px;
    margin: auto;
    text-align: center;
}

.correctoPDF {
    /*ESTILO PARA LOS MENSAJES DE CONFIRMACION DE CUALQUIER EVENTO*/
    background-color: green;
    color: white;
    width: 40%;
    padding: 5px;
    margin: auto;
    text-align: center;
}

/* PRUEBAS MOSTRAR TABLA RECUENTO MOVIMIENTOS FILTRADA */
#pruebaDiv {
    display: flex;
    margin: auto;
    width: 90%;
}

#pruebaDiv div {
    margin: 5px;
}

/*ESTILOS TABLA ALMACEN COMPLETA*/
#tabla-contenedor {
    margin: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 15px;
    background-color: #d0d4d4;
    box-shadow: 0 16px 15px rgba(0, 0, 0, 0.2);
    /*EFECTO PROFUNDIDAD*/
    width: 90%;
    overflow-x: auto;
    margin-bottom: 20px;
    margin-top: 30px;
    border-top: rgb(255, 123, 0);
    border-top-style: solid;
}

/*ESTILOS TABLA CONTEOS RESUMEN*/
.tabla-resumen {
    margin: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 15px;
    background-color: #d0d4d4;
    box-shadow: 0 16px 15px rgba(0, 0, 0, 0.2);
    /*EFECTO PROFUNDIDAD*/
    width: 200px;
    margin-bottom: 20px;
    margin-top: 30px;
    border-top: rgb(255, 123, 0);
    border-top-style: solid;
}

.tabla-resumen table {
    width: 80%;
    border-collapse: collapse;
    margin: auto;
}


#tabla-contenedor table {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    min-width: 600px;
    /* Ajusta este valor según tu tabla */
}

#tabla-contenedor table caption {
    font-weight: bold;
}

#tabla-contenedor th,
td {
    border: 1px solid #9e9d9d;
    padding: 8px;
    text-align: center;
    color: blue;
    text-size-adjust: auto;
    font-family: Arial;
    font-size: small;
}

#tabla-contenedor th {
    background-color: #6663fd;
    color: white;

}

/* ESTILOS PARA LA PAGINA CONVERSOR PDF */
/* CONTENEDOR PRINCIPAL */
.formularioPDF {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: 50px;
    font-family: Arial, sans-serif;
}

/* FORMULARIO INTERNO */
.formularioPDF form {
    text-align: center;
    width: 90%;
    max-width: 600px;
    padding: 20px;
    background-color: cornsilk;
    border-top: 5px solid rgb(255, 123, 0);
    border-radius: 10px;
    box-shadow: 0 16px 15px rgba(0, 0, 0, 0.2);
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* LABELS */
.formularioPDF label {
    font-weight: bold;
    margin-top: 10px;
}

/* INPUTS DE ARCHIVO */
.formularioPDF input[type="file"] {
    /*display: none;  Ocultamos el input real */
    margin: auto; 
    padding: 12px ;
    background-color: rgb(127, 154, 243);
    color: white;
    border-radius: 5px;
}

/* BOTÓN PARA SELECCIONAR ARCHIVOS */
.archivo-etiqueta {
    background: #007bff;
    color: white;
    padding: 8px 12px;
    margin: auto;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    width: fit-content;
}

/* BOTÓN DE ENVÍO */
.formularioPDF button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 40%;
    margin: auto;
    margin-top: 20px;
}

.procesando {
    width: 50%;
    max-width: 600px;
    margin: auto;
    margin-top: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: green;
    color: white;
    border-radius: 10px;
    text-align: center;
}

.procesandoError {
    width: 50%;
    max-width: 600px;
    margin: auto;
    margin-top: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: rgb(245, 32, 32);
    color: white;
    border-radius: 10px;
    text-align: center;
}