html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-size: 1.6rem;
    font-family: 'Hind Vadodara', sans-serif;
}


/**Globales**/

header {
    background-color: #124d80;
}

a {
    text-decoration: none;
    margin: 0;
}

h1 {
    font-size: 3.6rem;
}

h1,
h2,
h3 {
    text-align: center;
    margin: 0;
    padding: 0;
}

ul,
ol,
li {
    list-style: none;
}


/**Header**/

.contenedor {
    background-color: transparent;
    display: block;
    color: white;
    margin: 0 auto;
    padding: 2rem 3rem;
    align-items: center;
    line-height: 3.5rem;
}

#busqueda {
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .contenedor {
        background-color: transparent;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 120rem;
        color: rgb(255, 255, 255);
        margin: 0 auto;
        padding: 1rem;
        align-items: center;
    }
}

.contenedor span {
    font-size: 1.8rem;
    color: tomato;
    display: block;
}

.logo__header {
    height: 7rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.listaBoton__header2 {
    height: 4rem;
    width: 15rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

@media (min-width: 768px) {
    .listaBoton__header {
        height: 4.5rem;
        width: 11rem;
    }
}

.listaBoton__header a {
    background-color: #10416b;
    color: white;
    padding: .5rem 1.5rem;
    display: block;
}

.listaBoton__header li a p:hover {
    background-color: #012f57;
}

.listaBoton__header p:hover {
    background-color: #033461;
}

.listaBoton__header li ul {
    display: none;
    position: absolute;
    min-width: 10rem;
    top: 5rem;
}

@media (max-width: 560px) {
    .listaBoton__header li ul {
        top: 22rem;
    }
}

.listaBoton__header li:hover>ul {
    display: block;
    z-index: 2;
}


/**Menu atn cliente**/

.menu-atnCliente {
    height: 2rem;
    width: 2rem;
    margin-left: 9px;
    display: block;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    .menu-atnCliente {
        height: 2rem;
        width: 2rem;
    }
}

.menu-atnCliente a {
    background-color: #10416b;
    color: white;
    padding: .5rem 1.5rem;
    display: block;
}

.menu-atnCliente li a p:hover {
    background-color: #012f57;
}

.menu-atnCliente p:hover {
    background-color: #033461;
}

.menu-atnCliente li ul {
    display: none;
    min-width: 30rem;
    position: absolute;
    right: calc(-55%);
    top: calc(-10%);
}

/* @media (max-width: 560px) {
    .menu-atnCliente li ul {
        top: 10rem;
        right: 20px;
        top: 190px;
    }
}

@media (max-width: 768px) {
    .menu-atnCliente li ul {
        top: 10rem;
        right: 40px;
        top: 190px;
    }
} */

.menu-atnCliente li:hover>ul {
    display: block;
    z-index: 2;
}


/**Ofertas**/

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}


/**Productos**/

.contenedor2 {
    max-width: 114.4rem;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

@media (min-width: 550px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.producto {
    background-color: rgb(228, 228, 228);
    padding: 1rem;
}

.producto__nombre {
    font-size: 4rem;
    color: rgb(56, 73, 128);
    ;
}

.producto__precio {
    font-size: 2.8rem;
    color: rgb(224, 120, 35);
}

.producto__nombre,
.producto__precio {
    margin: 1rem 0;
    text-align: center;
    line-height: 1.2;
}

.producto__imagen {
    width: 100%;
}

footer {
    background-color: rgb(87, 87, 87);
    color: white;
    text-align: center;
    width: 100%;
    height: 7rem;
    position: relative;
    left: 0px;
    padding-bottom: 5px;
}

footer h6 {
    margin-bottom: 0;
}

footer a {
    color: white;
    padding: 8px;
}

.tituloNosotros {
    margin: 2rem 2rem;
    font-size: 2rem;
    color: rgb(97, 97, 97);
}

.nosotros {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    background-color: rgb(228, 228, 228);
    padding: 2rem;
    align-items: center;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .nosotros {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
        background-color: rgb(228, 228, 228);
        padding: 1rem;
        align-items: center;
        font-size: 1.5rem;
    }
    .google-maps {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
}

.espacio {
    margin-top: 1rem;
    background-color: rgb(219, 219, 219);
    padding: 0.5rem;
}

.botonSesion {
    background-color: green;
    height: 3rem;
    width: 15rem;
    color: white;
    margin-top: 2rem;
    border: none;
}

.botonSesion:hover {
    background-color: rgb(9, 102, 9);
}

.Formulario {
    width: 60rem;
    margin: auto;
}

.Formulario fieldset {
    display: flex;
    justify-content: space-between;
    border: 1px solid rgb(179, 179, 179);
    border-radius: 0.5em;
}

@media (max-width: 768px) {
    .Formulario fieldset {
        display: block;
    }
    .Formulario {
        width: 30rem;
        margin: auto;
    }
}

.Formulario div {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.Formulario a {
    font-size: 1.4rem;
    margin-left: 16px;
}

.error {
    background-color: red;
    color: white;
    text-align: center;
}
.aviso {
    background-color: green;
    color: white;
    text-align: center;
    margin-top: 8px;
}

.Sesion {
    color: white;
    text-align: center;
}

.Sesion a {
    color: white;
    margin-left: 1.3rem;
    margin-right: 1.3rem;
}

.Sesion a:hover {
    color: yellowgreen;
}

form textarea {
    width: 90%;
    margin-top: 0;
}

.botonImpresion {
    background-color: green;
    height: 3rem;
    width: 15rem;
    color: white;
    border: none;
}

.botonImpresion:hover {
    background-color: rgb(204, 157, 5);
}

.centrarBoton {
    display: flex;
    justify-content: center;
}

.cont_buscar {
    margin: auto;
}

input[type=checkbox] {
    /* Doble-tamaño Checkboxes */
    -ms-transform: scale(2);
    /* IE */
    -moz-transform: scale(2);
    /* FF */
    -webkit-transform: scale(1.7);
    /* Safari y Chrome */
    -o-transform: scale(1.7);
    /* Opera */
    padding: 8px;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.grid2 form {
    grid-column-start: 1;
    grid-column-end: 3;
}

@media (min-width: 768px) {
    .grid2 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid2 form {
        grid-column-start: 3;
        grid-column-end: 4;
    }
}

.form_SolicitudEnviada {
    width: 90%;
    background-color: rgb(23, 187, 124);
    color: rgb(24, 22, 95);
    border-radius: 0.5em;
}

h5 {
    color: rgb(102, 101, 101);
    margin: 1px;
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .grid3 {
        grid-template-columns: repeat(7, 1fr);
    }
}

.titulo_columnasPedidoPendiente {
    background-color: #11426d;
    color: white;
    font-size: 1rem;
}

.gris {
    color: rgb(100, 100, 100);
    font-size: 0.9rem;
}

@media (min-width: 576px) {
    .titulo_columnasPedidoPendiente {
        font-size: 1.8rem;
    }
    .gris {
        font-size: 1.7rem;
    }
}

.btnCancelar {
    background-color: rgb(201, 80, 24);
    width: 60%;
    color: white;
    border: none;
    font-size: 1.3rem;
}

.btnCancelar:hover {
    background-color: rgb(207, 0, 69);
}

@media (max-width: 576px) {
    .centrarBoton {
        grid-column-start: 4;
        grid-column-end: 6;
    }
    .btnCancelar {
        height: 2rem;
        font-size: 1rem;
    }
}

.botonBuscar {
    background-color: #124d80;
    color: white;
    height: 3rem;
    border: 1px solid rgb(129, 204, 248);
    border-radius: 0.5em;
    cursor: pointer;
}

.botonBuscar:hover {
    background-color: #0f3a5f;
}

.imagen_Pomo {
    width: 100%;
    margin: 0.7rem;
    display: flex;
    align-items: center;
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .grid4 {
        grid-template-columns: repeat(8, 1fr);
    }
}

.gris_ServCliente {
    color: rgb(100, 100, 100);
    font-size: 0.9rem;
}

@media (min-width: 576px) {
    .titulo_columnasPedidoPendiente {
        font-size: 1.5rem;
    }
    .gris_ServCliente {
        font-size: 1.3rem;
    }
}

.popup {
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 60%;
    display: none;
}

.popup_pedido {
    background-color: white;
    width: 40%;
    padding: 1rem;
    opacity: none;
    position: absolute;
    top: 7%;
    left: 30%;
    border-radius: 15px;
    display: none;
    color: rgb(38, 45, 90);
    z-index: 999;
}

@media (max-width: 560px){
    .popup_pedido {
        width: 80%;
        left: 10%;
    }
}

.fechas_popup {
    color: rgb(36, 77, 139);
    display: flex;
    justify-content: space-around;
}

.fechas_popup h4 {
    background-color: rgb(190, 229, 252);
    padding-left: 2px;
    padding-right: 2px;
}

.infoPopup {
    display: flex;
    justify-content: space-around;
    margin: 0;
    box-shadow: 0px 2px rgb(103, 129, 177);
    text-align: center;
}

.infoPopup h4 {
    margin: 0;
}

.infoDetalle_popup h4 {
    margin: 2px;
}

.nombreCliente {
    box-shadow: 0px 2px rgb(103, 129, 177);
}

.cerrar_popup {
    position: absolute;
    left: 94%;
}

.btnValidar {
    background-color: rgb(201, 80, 24);
    width: 60%;
    color: white;
    border: none;
    height: 2.5rem;
    font-size: 1.3rem;
    border-radius: 5px;
}

.btnValidar:hover {
    background-color: rgb(207, 0, 69);
}

.contButton {
    display: flex;
    justify-content: center;
}

.cerrar_popup_imgFormato {
    position: absolute;
    left: 94%;
}

.imgFormato {
    width: 100%;
    height: 100%;
    background-color: #F1F1F1;
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 9997;
}

.imForm {
    width: 50%;
}

#verFormato {
    cursor: pointer;
    box-shadow: 0px 2px rgb(103, 129, 177);
    ;
}

#fechaFin {
    width: 13rem;
}

#txtCant {
    display: none;
}

#txtFolio {
    display: none;
}

#verNota {
    cursor: pointer;
    color: black;
}

.btnGuardarNota {
    background-color: rgb(24, 71, 201);
    width: 30%;
    color: white;
    border: none;
    height: 2.5rem;
    font-size: 1.3rem;
    border-radius: 5px;
}

.btnGuardarNota:hover {
    background-color: rgb(79, 11, 110);
}

#btnEntregar {
    background-color: rgb(26, 153, 22);
    width: 60%;
    color: white;
    border: none;
    height: 2.5rem;
    font-size: 1.3rem;
    border-radius: 5px;
}

#btnEntregar:hover {
    background-color: rgb(6, 77, 33);
}

.busq {
    display: flex;
    justify-content: center;
    align-items: center;
}

.busq img {
    margin-left: 4px;
    padding: 4px;
}

.busq img:hover {
    background-color: #012f57;
}

.popup_pedido_produccion {
    background-color: white;
    width: 40%;
    padding: 1rem;
    border-radius: 15px;
    color: rgb(38, 45, 90);
    z-index: 999;
}
/**Interfaz para produccion**/
.cont_popup_produccion {
    display: flex;
    justify-content: center;
    background-color: rgb(236, 235, 235);
    padding-bottom: 2rem;
}

.infoPopup_Produccion {
    display: flex;
    justify-content: space-around;
    margin: 0;
    box-shadow: 0px 2px rgb(103, 129, 177);
    align-items: center;
    height: 4rem;
}

#numPedido {
    width: 10rem;
    height: 3rem;
}

#formato_produccion {
    z-index: 9998;
}

#progreso {
    display: flex;
    text-align: center;
    margin-bottom: 5px;
}

#progreso div {
    background-color: gray;
    color: rgb(209, 209, 209);
    font-size: 1.5rem;
    width: 20%;
}
#enlace_productos a {
    margin-left: 8px;
    margin-right: 8px
}

/**Interfaz para registro de nuevo cliente**/

.flecha {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 10px;
    border-top: solid 5px;
    border-right: solid 5px;
    border-color: white;
    transform: rotate(225deg);
}

.cont-flecha {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cont-flecha a {
    color: white;
}

.cont-flecha:hover .flecha {
    border-color: greenyellow;
}

.cont-flecha:hover a {
    color: greenyellow;
}

.contenedor-form-nuevoCliente {
    width: 50rem;
    margin: auto;
}

@media (max-width: 520px) {
    .contenedor-form-nuevoCliente {
        width: 30rem;
    }
}

.inputNuevoCliente {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.spanDeNuevoCliente {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-bottom: 2px;
}

.inputCliente {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-bottom: 2px;
}

.inputNuevoCliente>.inputCliente {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0
}

.buscador {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-busqueda-clientes {
    display: flex;
    gap: 5px;
}

.form-busqueda-clientes input {
    margin-bottom: 7px;
    margin-top: 7px;
    border: 1px solid #b4b8bb;
}

.form-busqueda-clientes label {
    margin-bottom: 7px;
    margin-top: 7px;
    color: #3b3b3b;
    font-size: 1.8rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 0.5rem;
}

thead {
    background-color: rgb(112, 151, 182);
}

tr:nth-child(even) {
    background-color: rgb(217, 243, 188);
}

.popup_modCliente {
    background-color: white;
    padding: 2rem;
    opacity: none;
    position: absolute;
    top: 7%;
    left: 25%;
    border-radius: 15px;
    display: none;
    color: rgb(38, 45, 90);
    z-index: 999;
}

@media (max-width:570px) {
    .popup_modCliente {
        left: 15%;
    }
}

.cliente-Formatos {
    font-size: 2rem;
    color: #CA5900;
}


/**Botones de tabla lista de clientes**/

.listaBoton-Cliente li ul {
    display: none;
    position: absolute;
}

.listaBoton-Cliente p {
    margin: 0;
}

.listaBoton-Cliente ul li {
    background-color: #e0af45;
    padding: 4px;
}

.listaBoton-Cliente li:hover>ul {
    display: block;
    z-index: 2;
}

.listaBoton-Cliente li:hover>p {
    color: #c76000;
}

.ulCliente {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .tabla_datos {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .tabla_datos {
        font-size: 0.8rem;
    }
}

.fieldset_Form_imagen {
    border: 1px solid rgb(151, 151, 151);
    border-radius: 5px;
    margin-top: 8px;
}


/**Edición de un formato existente**/

.barraNombreCliente {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

#signoMas {
    height: 24px;
    width: 24px;
    margin-left: 9rem;
    background-image: url('../img/signoMas.png');
}

#signoMas:hover {
    height: 24px;
    background-image: url('../img/SignoMas2.png');
    cursor: pointer;
}

.eliminarForm {
    color: #CA5900;
    margin-top: 8px;
    margin-left: 8px;
}

.eliminarForm a:hover {
    color: #ca0000;
    cursor: pointer;
}

.botonEliminar {
    background-color: rgb(209, 49, 0);
    color: white;
    width: 10rem;
    padding: 5px;
    border: none;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.botonEliminar img {
    margin-right: 5px;
}

.botonEliminar:hover {
    background-color: red;
    cursor: pointer;
}

.lugar_en_index {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: 4px;
}

.lugar_en_index select {
    width: 55px;
}

.lugar_en_index label {
    font-size: 1.15rem;
}

/** Botones Formato nuevo**/

.botones_FormatoNuevo {
    margin-top: 10px;
}

.contenedor_canvas {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}

.canvas_Admin {
    width: 100%;
}

.menuHorizontal {
    margin: 0;
    padding: 0;
    justify-content: space-around;
}

.menuHorizontal li {
    display: block;
    float: left;
    padding: 0 10px;
}


/** Grafico**/

.cont_grafico {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    height: 80vh;
}

@media (max-width: 576px){
    .cont_grafico{
        flex-direction: column;
    }
}

.datos_grafico h3 {
    text-align: end;
    padding: 5px;
}

.datos_grafico h2 {
    text-align: end;
}

.datos_grafico span {
    font-size: 1.5rem;
    padding: 4px;
    margin-left: 8px;
    border-radius: 5px;
}

#D_Total {
    margin-right: 60px;
}

#signoMas2 {
    height: 24px;
    width: 24px;
    margin-left: 1rem;
    background-image: url('../img/signoMas.png');
}

#signoMas2:hover {
    height: 24px;
    background-image: url('../img/SignoMas2.png');
    cursor: pointer;
}

#iniciaSesion {
    text-decoration: none;
    font-size: 1.7rem;
    color: white;
}

#iniciaSesion:hover {
    color: #1cf1e7;
}
.precarga {
    display:flex;
    justify-content: center;
}

#listaPedidos{
    margin-right: 6px;
}

.espacioFinal{
    width: 100%;
    height: 120px;
}