:root {
    --clr-main: #000080;
    --clr-main-light: #0099FF;
    --clr-white: #FFFFFF;
    --clr-gray: #D3D3D3;
    --clr-red: #fa0303;
    --clr-green: #099d2e;
    --clr-blu: #1e03ec;
    
    --clr-dark-gray: #8d8888;
}
 
.compras img{
    position: absolute;
    width: 3rem;
    height:3rem;
    left:  15px;
    padding: 0;
    border-radius: 5rem;
    border: 1px solid var(--clr-gray);
}
.compras div{
    
    width: 60%;
    font-size: 1.55rem;
    padding: 5px;
  
    
}
.compras div label{
    color: var(--clr-main-light);
    float: left;
    margin-left: 6rem;
}

.compras div p{
    color: var(--clr-white);
    margin-left: 11rem;
  

}

#contenedorCompras {
    /* Fondo modal: negro con opacidad al 50% */
    display: none;
    /* Por defecto, estará oculto */
    position: fixed;
    /* Posición fija */
    z-index: 1;
    /* Se situará por encima de otros elementos de la página*/
    padding-top: 32vh;
    /* El contenido estará situado a 200px de la parte superior */
    left: 0;
    top: 0;
    width: 100%;
    /* Ancho completo */
    height: 100%;
    /* Algura completa */
    overflow: auto;
    /* Se activará el scroll si es necesario */
    background-color: rgba(0, 0, 0, 0.5);
    /*Color negro con opacidad del 50% */
    

}

.contenidoCompras {

    position: relative;
    /* Relativo con respecto al contenedor -modal- */
    background-color: var(--clr-white) ;
    margin: auto;
    /* Centrada */
    margin-top: -13%;
    padding: 20px;
    width: 55vw;
    border-radius: 1rem;
    -webkit-animation-name: animarsuperior;
    -webkit-animation-duration: 0.5s;
    animation-name: animarsuperior;
    animation-duration: 0.5s;
    
}



.comproFormulario {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 7vh;
    padding: 10px;


}

.compro-imagen {
    float: left;
    width: 15vw;
    height: 17vh;
    margin-left: 3%;
    padding: .15rem;
    border-radius: 1rem;
}


.compro-detalles {
    background-color: transparent;
    color: var(--clr-blu);
    padding: .45rem;
    border-radius: 1rem;
    margin-top: .25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 35vw;
    height: 17vh;
    border: solid 1px var(--clr-white);
    overflow: hidden;
    text-overflow: ellipsis;
     
}

.comproprecio {
    font-size: 1.35rem;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}
.muestraUnidad {
    color: var(--clr-blu) ;
    font-size: 1rem;
    
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
   margin: 0; 
}
 

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.pack,
.pallet,
.chasis,
.equipo {
    width: 5vw;
    height: 4vh;
    margin-left: -5vw;
    color: var(--clr-main-light);
    
}

.cantidad-compras {
    color: var(--clr-blu);
    margin-left: 5vw;
    width: 46%;
}

#resultado {
    margin-left: 30vw;
    margin-top: 2vh;
    font-size: 1.5rem;
    color: var(--clr-green);
    border: solid 1px var(--clr-dark-gray)
}

.pagos {
    font-size: 1.5rem;
    color: var(--clr-blu);
    margin-left: 2vw;
    width: 50%;
    margin-top: -5vh;
}

.txt-pagos{
    font-size: .75rem;
    color: var(--clr-blu);
    margin-left: 30vw;
    width: 50%;
    margin-top: -5vh;
}

#botonPagos,
#botonCancela {
   
    background-color: var(--clr-main-light);
    border: 1px solid var(--clr-dark-gray);
    border-radius: .45rem;
    text-transform: uppercase;
    width: 10vw;
    height: 5vh;
    padding: 2px;
    font-size: 1.25rem;
    color: var(--clr-white);
    cursor: pointer;

}

#botonPagos:hover,
#botonCancela:hover {
    background-color: var(--clr-white);
    color: var(--clr-main);
  }
#botonCancela {
    margin-left: 5vw;
    margin-top: -3vh;

}

#botonPagos {
    margin-left: 22vw;
    margin-top: -3vh;
}
 

.carrito-media-queries{
    display: none;

    
  }
  .numero{
    display: none;
  }
 .salir{
    display: none;
   
 }

/*** pantalla de compras ***/

.producto-razon_social-c{
    padding-left: 10px;
    color: var(--clr-main-light);
    font-size: 1.25rem;
    width: 17vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container-producto-c{
    border: 1px solid var(--clr-main) ;
    border-radius: 12px;
    height: 47vh;
    width: 25vmax;
    background-color: transparent;
    padding: 0;
    
}

.producto-sinStock-c{
    position: absolute;
    font-size: 14px;
    padding: 5px 0 0 5px;
    color: var(--clr-red);
    
}

.container-imagen-c{
    width: 130px; /* Ajusta el tamaño del contenedor */
    height: 150px;
    overflow: hidden; /* Oculta las partes de la imagen que sobresalen */
    margin: auto;
 
    
}

.producto-imagen-c {
    width: 100%; /* Hace que la imagen llene el ancho del contenedor */
    height: 100%;
    object-fit: cover; /* Mantiene la relación de aspecto y rellena el contenedor, cortando lo que sobra */
    object-position: center; /* Centra la imagen */   object-fit: cover; /* Mantiene la relación de aspecto y rellena el contenedor, cortando lo que sobra */
    object-fit: contain;
    border-radius: 1rem;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    background-color: transparent;
}

.producto-detalles-c {
    background-color: transparent;
    color:  var(--clr-main);
    border-radius: 1rem;
    position: relative;
    display: flex;
    width: 100%;
    height: 23%;
    padding: 2px;
    box-sizing: border-box;
    white-space: pre-wrap;
     overflow: hidden;
}

.producto-titulo-c {
    font-size: 1.05rem;
    font-family: 'Courier New', Courier, monospace;
}
.producto-precio-buttom-c{
 
    margin: auto;   
}
.producto-precio-c {
    font-size: 1.35rem;
    padding-top: 5px;
    padding-bottom: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--clr-red) ;
    text-align: center;
    
}

 .producto-agregar {
    
    border: 0;
    background-color: var(--clr-white);
    color: var(--clr-main);
    text-transform: uppercase;
    padding: 6px 25px; 
    border-radius: .55rem;
    cursor: pointer;
    font-size: 1rem;
    margin: auto;
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
      
}

.producto-agregar:hover {
    background-color: var(--clr-main);
    color: var(--clr-white);
}

/*** MEDIA QUERIES ***/

@media screen and (max-width: 850px) {
  
.compro-imagen {
    width: 12vw;
    height: 14vh;
    }
    .contenidoCompras {
        margin-top: -52%;
        padding: 20px;
        width: 75vw;
 
    }
    
.compro-detalles {
     width: 55vw;
    height: 14vh;
      
}
.pagos {
    font-size: 1rem;
    margin-left: 1vw;
    width: 40%;
    margin-top: -19vh;

}

}

@media screen and (max-width: 675px) {
    .compro-imagen {
        width: 10vw;
        height: 12vh;
        }
        .contenidoCompras {
            margin-top: -52%;
            padding: 20px;
            width: 100vw;
           margin-left: 0;
        }
        .compro-detalles {
            width: 55vw;
           height: 12vh;
           font-size: .75rem;
             
       }
                   
.cantidad-compras {
    font-size: .75rem;
    width: 46%;
}
       .muestraUnidad {
          font-size: .75rem;
    }  

    .pack,
    .pallet,
    .chasis,
    .equipo {
        width: 8vw;
        height: 2vh;
    }
    
#resultado {
    margin-left: 40vw;
    margin-top: 2vh;
    font-size: 1rem;
}

    .pagos {
        font-size: 1rem;
        margin-left: 1vw;
        width: 40%;
        margin-top: -11vh;
    
    }
    .container-producto-c{
   
        height: 28vh;
    }
    
.producto-agregar-c {
    margin-left: 5vw;
   
    
   }
  
}




@media screen and (max-width: 600px) {

    .carrito-media-queries{
      
        display: flex;
        background-color: transparent;
        color: var(--clr-blu);
        font-size: 1rem;
        font-style: oblique;
        border-radius: 1.25rem;
        position: absolute;
        top: 7rem;
        left:  2rem;
        z-index: 1;
       
      }
      .numero{
         display: block;
        background-color: transparent;
        color: var(--clr-blu);
        padding: .15rem .45rem;
        

      }

     .salir{
        display: block;
        font-size: 2rem;
        position: absolute;
        top: 4rem;
        right: 2rem;
     }

    .compras div p{
       margin-left: 5rem;
    }
    .compras img{
        width: 2rem;
        height:2rem;

    }
    
    
    .compras div{
        width: 80%;
        font-size: 1rem;
    
      
        
    }
    
    .compro-imagen {
        width: 10vw;
        height: 12vh;
        }
        .contenidoCompras {
            margin-top: -55%;
            padding: 20px;
            width: 100vw;
            margin-left: 0;
        }
        .compro-detalles {
            width: 65vw;
           height: 12vh;
           font-size: .75rem;  
       }
       .cantidad-compras input {
         width: 36%;
    
    }
    
       
.cantidad-compras {
    
    width: 46%;
    font-size: .75rem;
}
       .muestraUnidad {
          font-size: .75rem;
    }
    
 
    .pack,
    .pallet,
    .chasis,
    .equipo {
        width: 8vw;
        height: 4vh;
    
    }
    #resultado {
        margin-left: 40vw;
        margin-top: 3vh;
        font-size: 1rem;
    }
    
    .pagos {
        font-size: 1rem;
        margin-left: 1vw;
        width: 40%;
        margin-top: -5vh;
    
    }

    #botonPagos,
    #botonCancela {
        width: 25vw;
        height: 4vh;
        padding: 2px;
        font-size: .75rem;
        margin-bottom: 0;
    }
    
    #botonCancela {
        margin-left: 5vw;
        
    
    }
    
    #botonPagos {
        margin-left: 22vw;
        
    }
    
}