/*Fuentes personalizadas */

@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap');/*Titulo de barra de nav empresa*/
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');/*Titulo categorias de terjetas*/
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gelasio&display=swap');/*Titulos principales de control administrativo*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Rozha+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Itim&display=swap');/* cutie */





.leaflet-touch .leaflet-bar{
    background-color: #ffffffd7;
}



/*Provisional mapa*/
#map { 
    height: 480px; 
    width: 100%;
    
}



/*Fin provisional mapa*/


*{
    padding: 0;
    margin: 0;
    font-family: 'Exo', sans-serif;
}


i{
    margin-left: 5px;
    cursor: pointer;
}
.BtnLogOut{
    list-style: none;
    border-style: none;
    background: none;
    color: rgb(85, 85, 85);
    font-size: 25px;
}
.icon-log-out:hover{
    background: rgba(173, 173, 173, 0.349);
    border-radius: 50%;
   
}


/*Botones */
.redondo {
    display: inline-block;
    padding: 12px 50px;
    border: .5px solid #b1b1b1;
    border-radius: 4px;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    font-size: 19px;
    color: black;
    z-index: 1;

    border-radius: 25px;
    background-color: #ffffff;
    
   }
   
   .redondo:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
   }
   
   .redondo:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #00c6e9;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
   }
   
   .redondo:hover {
    color: #ffffff;
    border: .5px solid #00c6e9;
   }
   
   .redondo:hover:before {
    top: -35%;
    background-color: #090c0c;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
   }
   
   .redondo:hover:after {
    top: -45%;
    background-color: #090c0c;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
   }
/*End Botones*/



.centrar{ /*Centra elemento dentro de div*/
    margin-top: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.estiloTitulo{
    font-family: 'Kanit', sans-serif;
    font-weight: bold;
    color: rgb(71, 71, 71);
    text-align: center;
    margin-top: 20px;

}

#titProductos{
    margin-top: 0;
    background-color: #00000069;
    color: #ffffff;
    padding-left: 3%;
    padding-right: 3%;
    border-radius: 25px;

}


.izqText{/*alinear texto a la izquierda*/
    text-align: left;
    margin-bottom: 3px;
}


/*ESTILOS HEADER.PHP */
/*Mensaje de notificacion si esta cerrado el PDV y quieren programar un pedido para el siguiente dia*/

#containerMsjPdv{
    width: 100%;
    height: auto;
    margin-top: 0;
    position: fixed;
    z-index: 25;
}

#alertaPdv{
    width: 60px;
    height: 60px;
    margin-right: 5px;
}

.msjpdv{
    /*border: 2px solid blue;*/
    box-shadow: 20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
    display: none;
}

.iconGif{
    width: 30px;
    height: 30px;
    margin-right: 5px;
}


/*Boton registrate */
#aFormRegistrate{
    text-decoration: none;
    color: white;
}





/*Icono carrito*/
#nprods {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#iconBag{
    font-size: 35px;

    


}

#li1{
    color: #ffffff;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
  


}

/* Boton flotante pdv mas cercano*/

.formInfo_pdv{
    list-style-type: none;
    color:  #c40101;
    background-color: #ffffff;
    z-index: -100 !important;
}


/*BARRA DE BUSQUEDA*/
/*Nueva barra de busqueda 2Feb2023*/
.container {
    position: relative;
    size-button: 40px;
  }
  
  .input {
    padding-left: var(--size-button);
    height: var(--size-button);
    font-size: 15px;
    border: none;
    color: #ffffff;
    outline: none;
    width: var(--size-button);
    transition: all ease 0.3s;
    background-color: #191A1E;
    box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
    border-radius: 50px;
    cursor: pointer;

  }
  
  .input:focus,
  .input:not(:invalid) {
    width: 100%;
    cursor: text;
    box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
  }
  
  .input:focus + .icon,
  .input:not(:invalid) + .icon {
    pointer-events: all;
    cursor: pointer;

  }
  
  .container .icon {
    position: absolute;
    width: var(--size-button);
    height: var(--size-button);
    top: 0;
    left: 12px;
    padding: 8px;
    pointer-events: none;
  }
  
  .container .icon svg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
/*Final Nueva barra de busqueda 2Feb2023*/

/*#barBusqueda{
    height: 100%;
    border: none;
}
*/

#caja-principal{
    margin-top: 40px;
    width: 100%;
    flex-wrap: wrap;

/*     display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    background-color: red; */

}



#titleEmpresa{
    font-family: 'Lobster Two', cursive;
    font-size:30px;
    color: #ffffff;
}

#LogoEmpresaIndex{
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.ico-ppal{
    color: rgb(90, 0, 15);
    font-size: 25px;
}


#a_Empresa{
    margin-right: 2%;
    margin-bottom: 10px;
}

#navbarText{

    display: grid;
    grid-template-columns: 1fr 1fr;
 /*   display: flex;
    justify-content:space-between;
    align-items: center;  */

    width: 100%; 
    
}

#divRRSS {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaciado uniforme */
}

#divRRSS > a {
    text-decoration: none;
    color: white;
}

.rrsss {
    font-size: 2rem;
    margin-left: 15px; /* Reducir margen si es necesario */
}

.iconosNavBar{
    width: 100%;
}


.icon-shopping-bag1{
    color: rgb(27, 50, 70);
    font-size: 20px;
    border-radius: 25px;
}

.iconNumCart{
    font-size: 10px; 
}
.container-fluid{
    margin:0;
    height: 80px;
}

#Logoppal {
    width: 200%;
    max-width: 250px; /* Tamaño máximo en escritorio */
    height: auto;
    margin-right: 6px;
    margin-bottom: 0;
    /* object-fit: contain; */ /* Si estás usando una imagen */
}

/* Para pantallas medianas (tablets) */
@media screen and (max-width: 768px) {
    #Logoppal {
        max-width: 200px;
    }
}

/* Para pantallas pequeñas (móviles) */
@media screen and (max-width: 480px) {
    #Logoppal {
        max-width: 200px;
        margin-right: 4px;
    }
}


#nav{

    background: #0373e3; /* #293DF2;*/
    /*background: radial-gradient(circle farthest-corner at center center, #293DF2 0%, #000105 100%);*/

    -webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.62);
    -moz-box-shadow:    0px 2px 5px 0px rgba(24, 24, 24, 0.62);
    
    box-shadow:         0px 2px 5px 0px rgba(50, 50, 50, 0.62);
    /*
    position: fixed;
    width: 100%;
    z-index: 3;
    */
    top: 0;
    position: fixed;
    z-index: 10;
    width: 100%;
    
}

/* @media screen and (min-width: 992px) { 
    #aCarrito{
    text-align: start;
    position: fixed;
    left: 49%;
    justify-content: center;
    align-items: center;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    margin-left: 15px;
} */

#aCarrito {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    margin-left: 15px;
}

#pli1{
    display: flex;
    align-items: center;
}
.navppal{

    font-size: 18px;
    margin-right: 25px;
    border-radius: 9px;
    border-bottom: 1px solid rgba(128, 128, 128, 0);
    font-family: 'Kanit', sans-serif;
    color: #ffffff;
    width: auto;
    text-align: center;
    
}

.navppal:hover{

    /*background: rgba(0, 26, 110, 0.705);
    border-bottom: 1px solid rgba(128, 128, 128, 0.425);*/
    text-decoration: none;
    font-weight: bold;
}

#aCarrito:hover{
    text-decoration: none;
    color: white;
}

#iconBag:hover{
    text-decoration: none;
    color: white;
}

/*PDV + Cercano
#ContPdvCercano{
    margin-left: 25px;
    height: 100%;
    width: 400px;
    background-color: #00c6e9;
    padding-left: 1%;
    padding-right: 1%;
    flex-direction: row;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/


/*Boton menu barra de navegacion*/
#btnMenuNav{
    border-color: #00c6e9;
    background-color: #b3f4ff;
    color: #00c6e9;
    
}

/*barra secundaria de navegacion acceso a usuarios o empleados*/
#barra_sec_menu{
    display: none;
   height: 30px;
   width: 100%;
   text-align: center;
   
}

.iconoIngresoUser{
    font-size: 25px;
    color: rgba(161, 184, 161, 0.514);
    padding: 2%;
}

.iconoIngresoUser:hover{
    color: rgb(16, 158, 16);

}

/*ESTILO DE INDEX.PHP*/
#Button-categoria{

    background-repeat: no-repeat;
    background-position: center center;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    width: 100%;
    margin-top:2%;
    height: 300px;

    padding: 2%;
    border-radius: 8px;
    border: none;

    -webkit-box-shadow: -1px 0px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -1px 0px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -1px 0px 10px 0px rgba(50, 50, 50, 0.75);
}

#form-categoria{
    width: 100%;
}

#article-categorias{
    width: 100%;
    background: rgba(0, 0, 0, 0.411);
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

}

#article-categorias:hover{
    -webkit-box-shadow: inset 0px 0px 32px 0px #EFEFEF; 
    box-shadow: inset 0px 0px 32px 0px #EFEFEF;
}


#article-categorias h1{
    color: rgb(255, 255, 255);
}

.NombreCateg{
    font-family: 'Kaushan Script', cursive;
    font-size: 80px;
}

/*ESTILOS productos.php*/
/*Testing boton flotante*/

/*final testing boton flotante*/


/*Iconos personalizados*/


/*fondo tarjetas oferta especial */
#container_opcion_oferta_Especial {
  background-color: transparent;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: 100%; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centra horizontalmente */
  gap: 20px;
  text-align: center;
}

/* Centrar tarjetas de promociones */
  #container_opcion_promo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centra horizontalmente */
    gap: 20px; /* espacio entre cards */
    text-align: center;
}


#container_opcion{
    background-color: transparent;
/*      background-image: url('../images/fondos/fondoLadrilloBlanco.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 0%;  */

}

#containerProductosSin .cutie{
    margin-bottom: 50px;
    color: #00154c !important;
}

#containerProductosSin{
    padding-top: 50px;
    width: 100%;
    color: #00154c !important;
    height: auto;
    background-image: url('../images/fondos/fondoLadrilloBlanco.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 0%; 

}




/*Modal Almacenes G superficies*/
#cuerpoModalAlmacenes{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 30% 70%;
    padding: 0;

}

/*Header Modal Almacenes*/
.navModal{
    box-shadow: -3px 6px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: -3px 6px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -3px 6px 5px 0px rgba(0,0,0,0.75);

    background-color: #0062e2;
    color: rgb(255, 255, 255);
}

/*Contenedor de Lista de Almacenes*/
#lineaDivisor{
    margin: 0;
}

#divIconRuta{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0721a286;
    font-size: 20px;
}

#divIconRuta i:hover{
    color: #0721a2ee; 
}

/*CONTENEDOR Slider Prods mas Vendidos en productos.php*/


/* Modal registrate en productos.php */

.modalEmerg{
    background-image: url('../images/fondos/cenefa-marketpf-1024x99-mkt.png');
    background-repeat: no-repeat;
    background-size: cover;
    
}

#titleContacModal{
    background-color: #154897;
    border-radius: 25px;
    padding-left: 10px;
    padding-right: 10px;

}



#titleRegistra{
    background-color: #ffffff;
    border-radius: 25px;
    padding-left: 10px;
    padding-right: 10px;

}

#logoModalRegist{
    width: auto;
    height: auto;
}

#logoModalRegist #Logoppal{
    width: 70px;
    height: 70px;
}


#ContainerSlider2_ProdMasVend{
    width: 100%;
    height: auto;
}

/*Iconos tarjeta almacenes*/
.iconTarjAlm{
    margin-right: 3px;
    color: rgba(40, 117, 206, 0.404);
}
#listadoAlmacenes{
    background-color: #ffffff;
    overflow-x: hidden;
    overflow-y:scroll ;
    
}

/*Scrolls*/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    }
    ::-webkit-scrollbar-button {
        width: 28px;
        height: 28px;
    }
    ::-webkit-scrollbar-thumb {
        background: #e1e1e1;
        border: 47px none #ffffff;
        border-radius: 29px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #ffffff;
    }
    ::-webkit-scrollbar-thumb:active {
        background: #0721a2;
    }
    ::-webkit-scrollbar-track {
        background: #666666;
        border: 42px none #ffffff;
        border-radius: 74px;
    }
    ::-webkit-scrollbar-track:hover {
        background: #666666;
    }
    ::-webkit-scrollbar-track:active {
        background: #8189a2;
    }
    ::-webkit-scrollbar-corner {
        background: transparent;
    }

/*End Scrolls*/

/*Tarjeta Almacenes*/
.cardAlmacenes{
    display: grid;
    grid-template-columns: 80% 20%;
    height: auto;
}

.cardAlmacenes:hover{
    background-color: rgba(128, 128, 128, 0.068);
}

.cardAlmacenes p{
    margin: 0;
}

/*Mapa Modal Almacenes GS*/
#mapa {/*iframe*/
    width: 100%;
    height: 100%;
    background-color: #a8a8a8;
}

/*boton No hay Cobertura - Encuentra nuestros productos en estos almacenes GS*/
/*BOTONERA DE INFORMACION SOBRE EL PUNTO DE VENTA CERCANO*/

/*btn PDV PF*/
#divPDV{
    display: flex;
    justify-content: center;
    align-items: center;    
}

#aPDV{
    color: #ffffff;
}

.btnPDV {
    width: 140px;
    height: 50px;
    background: linear-gradient(to top, #00154c, #12376e, #23487f);
    color: #fff;
    border-radius: 50px;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin-left: 10px;
  }
  
  .btnPDV span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: top 0.5s;
  }
  
  .btn-text-one {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  
  .btn-text-twox {
    position: absolute;
    width: 100%;/* 100%*/
    top: 150%;
    left: 0;
    transform: translateY(-50%);
    color: #ffffff;
  }
  
  .btnPDV:hover .btn-text-one {
    top: -100%;
  }
  
  .btnPDV:hover .btn-text-twox {
    top: 50%;
  }

/*Texto pdv mas cercano*/
#text_pdv{
    font-size: 3vw;
}

.icon-location{
    font-size: 20px;
    font-family: 'Exo', sans-serif;
    margin: 0;


    
}
/*final btn pdv*/


/*Boton de pdv cercano en registro_datos.php*/

.btnx {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 13rem;
    height: 3rem;
    background-size: 300% 300%;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
    transition: 0.5s;
    animation: gradient_301 5s ease infinite;
    border: double 4px transparent;
    background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    font-size: 20px;
  }
  
  #container-starsx {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.5s;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
  }
  
  .strong {
    z-index: 2;
    font-family: 'Avalors Personal Use';
    font-size: 12px;
    letter-spacing: 5px;
    color: #FFFFFF;
    text-shadow: 0 0 4px white;
  }
  
  #glowx {
    position: absolute;
    display: flex;
    width: 12rem;
  }
  
  .circlex {
    width: 100%;
    height: 30px;
    filter: blur(2rem);
    animation: pulse_3011 4s infinite;
    z-index: -1;
  }
  
  .circlex:nth-of-type(1) {
    background: rgba(254, 83, 186, 0.636);
  }
  
  .circlex:nth-of-type(2) {
    background: rgba(142, 81, 234, 0.704);
  }
  
  .btnx:hover #container-starsx {
    z-index: 1;
    background-color: #212121;
  }
  
  .btnx:hover {
    transform: scale(1.1)
  }
  
  .btnx:active {
    border: double 4px #FE53BB;
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: none;
  }
  
  .btnx:active .circle {
    background: #FE53BB;
  }
  
  #starsx {
    position: relative;
    background: transparent;
    width: 200rem;
    height: 200rem;
  }
  
  #starsx::after {
    content: "";
    position: absolute;
    top: -10rem;
    left: -100rem;
    width: 100%;
    height: 100%;
    animation: animStarRotate 90s linear infinite;
  }
  
  #starsx::after {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
  }
  
  #starsx::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 170%;
    height: 500%;
    animation: animStar 60s linear infinite;
  }
  
  #starsx::before {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
    opacity: 0.5;
  }
  
  @keyframes animStar {
    from {
      transform: translateY(0);
    }
  
    to {
      transform: translateY(-135rem);
    }
  }
  
  @keyframes animStarRotate {
    from {
      transform: rotate(360deg);
    }
  
    to {
      transform: rotate(0);
    }
  }
  
  @keyframes gradient_301 {
    0% {
      background-position: 0% 50%;
    }
  
    50% {
      background-position: 100% 50%;
    }
  
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes pulse_3011 {
    0% {
      transform: scale(0.75);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
  
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
  
    100% {
      transform: scale(0.75);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }
/*End boton pdv mas cercano*/

#divBtnSinCobert{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    background-color: #75c5f0;
    padding: 1%;

 box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset;
}

#btnSinCobert{
    width: 200px;
    padding: 1.3em 3em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

#btnSinCobert:hover {
    background-color: #23c483;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
}

#btnSinCobert:active {
    transform: translateY(-1px);
}



/*Container general*/
.container_opcion{
    width:100%;
    height: auto;
    display: flex;
    justify-content: space-around;
   /* background-image: url('../images/fondos/cenefa-m.png');*/
    background:  transparent;/* edit 20Nov2024 */
    flex-wrap: wrap;
    padding-left: 5%;
    padding-right: 5%;
    /* padding-top: 4%; */


}

/*Encabezado*/

/*Pruebas de cards productos ---------------------------*/

.pTest{
    width: 300px;
    height: 150px;
    border-radius: 15px;
    background-color: #9ccccc;
    margin: 10px;

    
}
/* Final Pruebas de cards productos ---------------------*/


#carouselSuperior {
    margin-top: 100px; /* Aumentamos el margen superior para bajarlo un poco */
    display: block;
    height: auto; /* Ajustamos la altura */
    padding-bottom: 0;
    overflow: hidden; /* Previene que algo sobresalga si se desborda */
}

#carouselSuperior img {
    height: 12%;      /* Asegura que las imágenes llenen el carrusel */
    object-fit: cover; /* Mantiene proporciones sin deformar, y recorta suavemente si es necesario */
}


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

    #encabezadoSlider{

        width: 100%;
        height: 100vh;
        background: #c7e6f6;  
        
       
       }
}


#encabezadoSlider {
    width: 100%;
    height: auto;
    background: white; /* Cambia el fondo a blanco */
}



#carouselExampleFade{
    width: 100%;
   height: auto;
}

.video-container{
    position: absolute; /* Para superponer los contenedores */
    opacity: 0.4;
    z-index: 0; /* Este contenedor estará detrás */

    margin-top: 5%;
    width: 100%;
    height: 50vh;    
    transition: background-image 0.5s ease-in-out;
    

}

.fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 3s ease;
    opacity: 0; /* Comienza oculto */
    /* background-position: center bottom;  */
}
.visible {
    opacity: 1; /* Hace visible el fondo */
}




video {
    width: 100%; /* Hace que el video ocupe todo el ancho del contenedor */
    height: 50vh; /* Mantiene la relación de aspecto */
    object-fit: cover; /* Escala el video para cubrir todo el contenedor */
    display: block; /* Elimina espacio en la parte inferior */

  }


/*gIFS*/
#imgGifRecetas{
    width: 50px;
    height: 50px;
}


#carouselExampleCaptions{
    width: 100%;
    background-color: #007500;
    text-align: center;
}


.cajaBotonesSlider{
    color: #e04000;
    background-color: #000000ec;
    border-radius: 35px;
    
}


/*Iconos Slider anterior y proximo*/
.iconSlider{
    color: #ffffff;
    font-size: 30px;
    border-radius: 25px;
    background-color: #0062e2;
}

/*Nuevo Slider*/
.carousel-item{
    width: 100%;
    height: auto;
    background-color: #00154c;


}




/*End Slider*/


/*Barra de busqueda - header.php */
#barBusq{
    width: 300px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    margin-left: 25px;
    align-self: center;
    
}

#ContainerBarraNva{
    height: auto;
    width: 400px;
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: 90% 10%;
    grid-template-rows: 1fr;
    border-radius: 25px;

    justify-content: center;
    align-items: center;

    border: .1px solid rgba(163, 163, 163, 0.568);


}

.inputBusqueda{
    border-radius: 25px 0 0 25px  ;
    
}
.icon-search2{
    font-size: 20px;
    color: #c5c5c5;
}

.icon-search2:hover{
    font-size: 24px;
    color: #00c6e9;
    cursor: pointer;
}

.iconGeneral{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;

    background-color: #707070;
    border-radius: 0 25px 25px 0;
    border: .1px solid rgba(163, 163, 163, 0.568);
    
}

/*End Barra de busqueda*/

#icon-caret-right{
    color: rgb(179, 179, 179);
    margin-right: 7px;
}

/*Tarjetas de opciones*/
.card-opcion{
    margin-top: 30px ;
    margin-right: 30px;
    margin-bottom: 30px;
    width: 18rem;

    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;

    position: relative;


    /*efecto zoom*/
    /*transition: 1s ease;*/
 	/*-moz-transition: 1s ease;*/ /* Firefox */
 	/*-webkit-transition: 1s ease;  Chrome - Safari */
    /*-o-transition: 1s ease;  Opera 
    transform: scale(1.05);*/

}

.card-opcion:hover{
    /*
    -webkit-box-shadow: 0px 0px 16px -1px #000000; 
    box-shadow: 0px 0px 16px -1px #000000;
    -webkit-box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000, inset 0px 0px 19px 7px rgba(0,0,0,0); 
    box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000, inset 0px 0px 19px 7px rgba(0,0,0,0);
    */
    /*efecto de zoom
    transform : scale(1.1);

    transform: scale(1.1);
	-moz-transform : scale(1.1); /* Firefox 
	-webkit-transform : scale(1.1); /* Chrome - Safari 
	-o-transform : scale(1.1); /* Opera 
	-ms-transform : scale(1.1); /* IE9 
    box-shadow: -1px 0px 17px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: -1px 0px 17px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 0px 17px 0px rgba(0,0,0,0.75);*/

    background-color: #ffffff;
    box-shadow: 0px 15px 20px rgba(46, 80, 229, 0.4);
    color: #fff;
    transform: translateY(-7px);

}
.card-opcion {
    position: relative; 
    overflow: hidden;
    display: flex;      
    flex-direction: column;
    min-height: 450px;
}
.formProductos {
    /* La clave: este elemento consume el espacio vertical sobrante */
    margin-top: auto; 
    /* Asegúrate de que el formulario ocupe todo el ancho */
    width: 100%; 
}
.card-opcion .card-title {
    /* Esto fuerza al título a ocupar espacio para dos líneas, incluso si solo usa una */
    min-height: 40px; /* Ajusta según el tamaño de tu fuente para que quepan 2 líneas */
    margin-bottom: 0.5rem; /* Ajusta el espacio debajo del título si es necesario */
}
.card-opcion .card-body {
    display: flex;
    flex-direction: column;
    /* Ocupa el espacio restante después de la imagen/cajaImg */
    flex-grow: 1; 
}
/* B. Aplica el anclaje de margen automático al formulario dentro del card-body */
.card-opcion .card-body .formProductos {
    margin-top: auto;
}

/*icono oferta especial*/
.ioe{
    color: #ffbc0d;
    font-size: 20px;
}

.iconCardOE{
    width: 20px;
    height: 20px;
}




#textOfertaEspecial{
    color: #ffffff;
    text-align: center;
    /*font-family: 'Righteous', cursive;*/
    font-family: 'Kanit', sans-serif;
    background-color: #0000006e;
    border-radius: 15px;
    margin-bottom: 5px;
    padding: 2px;
    
}

#textOfertaEspecial > p{ 
    margin: 0;
    font-family: 'Kanit', sans-serif;
}

#precio_ofertaOE{
    color: #00f7ff;
    font-weight: bold;
    background-color: #0000009a;
    border-radius: 25px;
    padding-left: 3px;
    padding-right: 3px;
}

#preciosOE{
    display: flex;
    justify-content:space-around;
    align-items: center;
}


/*End cards Oferta Especial*/
.spanAntesDesc{
    color: #cccccc;

}

#precio_oferta{
    color: #16e8f0;
    font-weight: bold;
}


/*
.imgProd:hover{
    transform: scale(1.2,1.2);
    transition: 2s;
}
*/



#cajaImg{
    width: 100%;
    height: auto;
    text-align: center;
}

#card-title{
    color: rgb(66, 66, 66);
    font-weight: bold;
    width: 100%;
    text-align: center;
}

#tagPrecio{
    /*color: rgb(201, 201, 201);*/
   color:  rgb(15, 13, 13);
}

#LabelTot{
    width: 100%;
    height: 100%;
    /*color:rgb(223, 223, 223);*/
    color:  rgb(66, 66, 66);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: right;
    align-items: center;


}

#LabelTot  > div{
    text-align: right;

    width: 100%;
    height: 100%;
    font-size: 15px;

}

#text-card{
    color: rgb(201, 201, 201);
    font-size: 12px;
}

#icon-price-tag{
    color: rgb(0, 133, 77);
    margin-right: 4px;
}

#text-precio{
    color: rgb(0, 90, 117);
    margin-bottom: 6px;
}

#cantidad{
    background: rgb(27, 27, 27);
    color: rgb(255, 255, 255);
}
#LabelCantidad{
    color: rgb(255, 255, 255);
}

.icontroles{
    color: rgb(65, 65, 65);
    font-size: 26px;
    
    
}

.icontroles:hover{
    /*color: rgb(24, 247, 255);*/
    color: rgb(0, 132, 172);
    background: rgb(27, 27, 27);
    border-radius: 25px;
}

.Ncantidad{
    border-style: none;
    background: transparent;
    color: rgb(221, 107, 0);
    font-size: 20px;
    width: 60px;
    text-align: center;  
    font-weight: bold;
}


#cajaControles{
    display: flex;
    /*justify-content:space-evenly;*/
    align-items:center;
    width: 130px;
    border-radius: 25px;
    /*border: .5px solid rgba(128, 128, 128, 0.521);*/
    

}

.ResultCalculo{
    width: 120px;
    border-style: none;
    background: transparent;
    font-weight: bold;
    color: rgb(224, 52, 0) !important;
    font-size: 20px;
    text-align: right;

}

#totalDiv{
    display: grid;
    grid-template-columns:1fr auto;
    grid-template-rows: 1fr;
    justify-content: center;
    align-items: center;



}

.icon-info-circle{
    font-size: 20px;
    color: #385ba7;

}
/**/




#box-btn{
    display: flex;
    justify-content: center;
    margin-top: auto;
    width: 100%;
    padding-top: 10px;
}


#btn-agregarOpc{
    /*background: rgb(18, 200, 255);*/
    
}


#btn-agregarOpc:hover{
    color: rgb(247, 245, 245);
    background: rgb(103, 230, 145);
}

/*ESTILO DETALLE_COMPRA.PHP */

/* Nueva Caja Carrito de compras */

/* caja de pagos - totales y descriminacion del pago*/
#avisoGranelCont{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 10% 90%;
    align-items: center;
    background-color:#c95b5b ;
    border-radius: 10px;
    margin-bottom: 15px;
    margin-top: 10px;
    padding: 2px;
}

.cajaTot{
    font-size: x-large;
}


#containerCarrito{
    width: 100%;
    height: auto;
    background-color: #c7e6f648;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 1fr;
    border-radius: 15px 15px 0px 0px;
    padding-top: 3%;

}


/*caja de totales */
#containerTotales{
    width: 100%;
    height: auto;
    background: white;
 
    box-shadow: 0px 1px 5px 0px rgba(182, 182, 182, 0.75);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(182, 182, 182, 0.75);
    -moz-box-shadow: 0px 1px 5px 0px rgba(182, 182, 182, 0.75);
    padding-bottom: 3%;
    padding-top: 3%;
    border-radius: 8px;
    padding: 3%;
}

#cajaTotalesCarrito{
    padding: 5%;
    padding-top: 0;
}


/* Caja de totales en carrito  de compras */

#formPago{
    background-color: #c4000000;
    padding-left: 10%;
    padding-right: 10%;
}



/*LInks*/
.aler{
    color: #c7e6f6 ;
    text-decoration: none;
}
.aler:hover{
    color: rgb(255, 187, 0) ;
    text-decoration: none;
}

/*Tarjetas de detalle de compra*/

/*Titulo card detalle*/
.tituloCardDetalle{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 3%;

}

/*Precio unitario*/
.textPrecioU{
    color: #000000b7;
    font-style: italic
}


/*Caracteristicas del producto*/
.caractProd{
    color: rgba(0, 0, 0, 0.678);
    font-size: 12px;
}

/*Imagen*/
.imgCardDetalle{
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Iconos*/
.icon-check-circle{
    color: #f33100;
    margin-right: 15px;
}

.icon-shopping-bag{
    color: #66004d;
}

.icon-dollar-sign{
    color: #007500;
}

.icon-minus:hover{
    color: #2b2b2b;
}

.icon-plus:hover{
    color: #2b2b2b;
}

/*caja de cantidad*/

.containerCantidadyTotal{/*caja cantidad y precio total */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;

}

.cajaCantidad{
    width: 100px;
    height: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    border: .5px solid rgba(128, 128, 128, 0.555);


}

.subCajaCantidad{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.inputCantidad{/*controlado*/
    border-style: none;
    border-left: .5px solid rgba(128, 128, 128, 0.555);
    border-right: .5px solid rgba(128, 128, 128, 0.555);
    width: 100%;
    text-align: center;
    background: transparent;
    font-size: 15px;
    color: rgb(46, 46, 46);
    font-weight: bold;
    color: #ec2f00;
}

/*Total*/
.total{
    font-weight: bold;
    font-size: 17px;
}

/*Iconos caja de cantidad*/
.iconDetalle{
    font-size: 14px;
    color: gray;
    text-align: center;
}

/*Notificaciones card detalle */
.textNoti{
    background-color: #f80000dc;
    font-size: 10px;
    color: #ffffff;
    padding: 2px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    border-radius: 0px 0px 12px 12px;
-moz-border-radius: 0px 0px 12px 12px;
-webkit-border-radius: 0px 0px 12px 12px;
text-align: center;

}

.textOfEsp{
    background-color: #ff0000;
    color: #ffffff;
    margin: 0;
    padding: 5px;
}

/*Total general detalle compra*/
#cajaTotal{
    width: 100%;
    background-color: #e9e9e900;
    border-radius: 25px;
    
}


/*Tabla de detalle en detalle_compra.php*/
#TablaDetallePedido thead tr{
    background: rgb(68, 68, 68);
    text-align: center;
    font-size: 16px;
    color: rgb(250, 250, 250);
   
    font-family: 'Lato', sans-serif;

/*
    -webkit-box-shadow: inset 0px 0px 19px 7px #000000; 
    box-shadow: inset 0px 0px 19px 7px #000000;
*/
    border-top: 2px solid rgba(94, 94, 94, 0.5);
    border-bottom: 2px solid rgba(94, 94, 94, 0.5);
    
}

.iconCheck{
    color: rgba(0, 72, 180, 0.596);
    /*background: rgb(225, 250, 0);*/
    border-radius: 50%;
    padding: 1px;
    margin-right: 5px;
}

#FilaDetalleCar td{
    padding-top:45px ;
    border-bottom:none;
    
}

#FilaDetalleCar{
    border-top: .5px solid rgb(182, 182, 182);
    border-left: 10px solid rgba(133, 133, 133, 0.116);
    
}




.FilaTotal .TotalText{
    text-align: end;
    font-size: 16px;
    font-weight: bold;

}

.TotalNum{
    font-size: 20px;
    text-align: center;
   
    
}
.FilaTotal{
    border-top: 0.5px solid rgba(192, 7, 7, 0);
}

#FilaTotal{
    border-top: 2px solid rgb(119, 119, 119);
    
}

#TotalNum{
    border-top: 2px solid rgb(119, 119, 119);
}

.dateNum{
    
    text-align: center;
}

#IdateNum{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}



#TdimgDetalle{

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 150px;
    height: 120px;
    padding: 1%;
    border-radius: 7px;

}

#BtnProcesarPedido{
    -webkit-box-shadow: 0px 0px 16px -1px #a3a3a3; 
    box-shadow: 0px 0px 16px -1px #a3a3a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}



/*imagen mensaje de Sin Compras en detalle_compra.php */

.hrSmall{
    margin-top: 7px;
    margin-bottom: 7px;
}
#ContainerimgDetalleCompraVacio{
    /*display: flex;
    justify-content: space-around;*/
    text-align: center;
    font-size: 18px;
    background-color: #001844b9;
    color: rgb(255, 255, 255);
}

#imgDetalleCompraVacio{
    width: 300px;
    height: 300px;
}

/*Card detalle compra*/
.cardDetalle{
    background: #fcfbfb;
    box-shadow:  20px 20px 60px #bebebe,
                -20px -20px 60px #ffffff;
                padding: 2%;
                border-radius: 12px;
}

/*Boton Eliminar opcion*/
.BtnAccionCarrito{
    border-style: none;
    background: none;
    font-size: 25px;
}

.icon-x-altx-alt:hover{
    color: red;
}

.icon-check-alt:hover{
    color: rgb(82, 165, 0);
}

.icon-x-altx-alt{
    color: rgb(156, 156, 156);
}

.icon-check-alt{
    color: rgb(156, 156, 156);
  
}

.icSum{
    color: rgb(0, 0, 212);
    font-size: 25px;
    cursor: pointer;

} 

.icRes{
    color: rgb(255, 0, 0);
    font-size: 25px;
    cursor: pointer;
}

/* aviso legal prodcutos a granel */
#avisoGranel{

    color: #c95b5b;
    border-radius: 10px;
    margin: 0;
    font-size: 12px;
}
#avisoGranel > small{
    
    text-align: justify;
}

.tags{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: space-around;
}

.tags .TotalNum{
    text-align: right;
    color: #10173d;
}



/*Nota de Domicilio*/
#notaDomicilio{
    text-align: center;
    margin-bottom: 30px;
    color: #ffffff;
    font-weight: bold;
    background-color: #154897;
    border-radius: 10px;
    padding: 2px;
}

/*REGISTRO_DATOS.PHP*/

/*Container Programa tu pedido*/
#containerProgramaPed{
    width: 100%;
    background-color: #00000098;
    color: #e2e2e2;
    padding: 1%;
    border-radius: 12px;
    display: none;

}
/*End programa tu pedido*/

#logoFormClientes{
    width: 50px;
    height: 50px;
}

#LinkTerminos{
    color: goldenrod;
    text-decoration: none;
}

#LinkTerminos:hover{
    text-decoration-line:underline;
}

#labelTerminos{
    width: 100%;
    text-align: center;
    color: rgb(206, 197, 174);
}

/*metodos del cliente*/

.darkSubTitulos{
    color: #EFEFEF;
}

#BoxTotales{
    width:100%;
    height: auto;
    background: rgb(255, 253, 157);
    display: grid;
    grid-template-columns: 50% 50%;
    border-radius: 8px;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2%;
    padding-top: 2%;

}

.SonBoxTotalText1{
    width: 100%;
    text-align: left;
    border-bottom: 0.3px dashed gray;
    
}

.SonBoxTotalNum1{
    width: 100%;
    text-align: right;
    border-bottom: 0.3px dashed gray;
}

/*Formulario modal de registro de datos del cliente */
#ModalForm-RegistroDatosUsu{
     background: rgba(255, 255, 255, 0.75) !important; /* más transparente */
}

.classDark{
    color: white;
}

.HrDark{
    background:white;
}

#NumFactura{
    color: red;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

#TelonHacerPedido{
    background: rgba(190, 190, 190, 0.308);
    color: rgb(214, 214, 214);
}

#aLinkInfoPdv{
    text-decoration: none;
    color: #1d1d1d;

}

/*End Boton header-modal*/

/*ESTILOS DE MI_FACTURA-PHP*/

#factura{
    height: auto;
    background: rgb(255, 255, 255);
    padding: 3%;
}


/*#containerHeaderFactura{}*/

#ContainerLogoEmpresa{
    padding: 2%;
    float: left;
    width: 40%;
}

#containerDatosEmpresaFactura{
    float: left;  
    width: 60%;
}

#LogoEmpresa{
    height: 140px;
    width: 140px;
    border-radius: 50%;
}

#TdLogo{
    width: 60%;
}

#TdTextEmp{
    font-size: 14px;
    text-align: right;

}



/*Estilo de datos clientes*/
.datosCliente{
    margin: 0;
    
}

.datosCliente b{
    font-weight: bold;
}

#DetalleMiFactura thead tr th{
    text-align: center;
}

#TituloDetalleFactura{
    background: rgba(158, 158, 158, 0.219);
    font-size: 20px;
    border-radius: 25px;
    
}

/*Pie de factura en mi_factura.php*/
#TotalesFactura{
    width: 100%;
    border-top: 0.3px solid dimgray;
    
}

.DivTotales{
    width: 100%;
    padding: 3.5%;
}

#TablaTotales{
    width: 100%;
}

.textTot{
    font-weight: bold;
    width: 80%;
    text-align: right;
    border-top: 0.3px solid dimgray;
}

.NumTot{
    width: 20%;
    text-align: right;
}

/*ESTILOS SEGUIR_PEDIDO.PHP*/
.Input-busq{
    margin-left: 3%;
    border-radius: 7px;
}

#form_rastreo button{
    margin-left: 1%;
}

.iconppal{
    font-size: 30px;
    color: rgb(90, 88, 189);
    background: rgba(233, 233, 233, 0);
    border-radius: 50%;
    padding: 1px;
}

.check{
    color: rgb(64, 128, 0);
    font-weight: bold;
    font-size: 30px;
    margin-right: 20px;
}

.nocheck{
    color: rgb(255, 0, 0);
    font-weight: bold;
    font-size: 30px;
    margin-right: 20px;
}

/*Mensaje telon */
#Container_img_Ubic{
    display:flex;
    justify-content:center;
}

#img_Ubic{
    margin-top: 40px;
    width: 300px;
    height: 250px;
}

/*Tabla rastreo o seguimiento*/
#containerTablaRastreo{
    padding-left: 20%;
    padding-right: 20%;
}

#tablaSeguimiento thead tr th{
    text-align: center;
    color: rgb(82, 82, 82);
    border-bottom: 2px solid rgb(255, 255, 255);
    background: rgba(228, 228, 228, 0.603);
}

#tablaSeguimiento tbody tr{
    height: 100px;
}

#tablaSeguimiento tbody tr td{
   padding: 5%;
   text-align: center;
   background: rgb(255, 255, 255);
}

/*Formulario de consulta */
#form_rastreo{
    display: flex;
    justify-content: center;
    
}

#CajaBtnFactura{
    text-align: center;
    margin-bottom:8px;
}

/*etiqueta donde muestra el domiciliario*/
#domiciliario strong{
    color: rgb(82, 82, 82);
}

#BtnRastreo{
    border-radius: 3px 25px 25px 3px;
}

/*ESTILOS PAGINA DE puntodeventa.php*/

/*Notificacion de pedido programado*/
.notiPedProg{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00d9ff;
    font-weight: bold;
}
.notiPedProg > p{
    width: 100%;
    margin: 0;
    text-align: center;
}

.icon-dot-single{
    padding-left: 1%;
    padding-right: 1%;
}

/*DAtos del cliente*/
.pclient{
    margin-bottom: 2px;
    width: auto;
    margin-right: 20px;
    
}

/*Encabezado card orden*/
#nPedido{
   color: rgb(0, 255, 242); 
   margin-left: 8px;
}



/*Icono barra de navegacion*/
.rounded-pill{
    border: 2px solid gold;;
}

/*Tarjeta*/
/*encabezado tarjeta*/

/**/
.encab{
    width: 100%;
    display: grid;
    grid-template-columns: 90% 10%;
    grid-template-rows: 1fr;

}


/*eliminar opcion*/
.eliminar{
    display: flex;
    justify-content: center;
    align-items: center;
}



/*metodo*/
#metodo{
    width: 100%;
    height: auto;
    /*background-color: rgb(0, 48, 94);*/
    text-align: center;
    font-weight: bold;
}

.iconpdv{
    color: rgba(190, 54, 0, 0.76);
    

}

/*Imagen Metodo*/
.imgMetodo{
    width: 4vw;
    height: 4vw;
}
.metodoImg{
    display: flex;
    justify-content: center;
    align-items: center;
}



/*Datos del cliente tarjeta punto de venta*/
#titDatosClientePDV{
    margin-bottom: 2px;
}

#cajaTotalesPDV{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: 1fr;
    background-color: #333333;
    color: rgb(255, 252, 252);
    border-radius: 25px;
    padding-left: 2%;
    padding-right: 2%;
}

#cajaTotalesPDV span{
    margin-left: 2px;
}

/*localidad*/
#spalocalidad{
    margin-left: 15px;
    
}


/*Check */
#flexCheckDefault{
    margin-left: 5px;
}

.TextAreaNovedadControl:focus{
    background-color: #9ccccc;
    color: black;
}

/*input cantidad vendida*/
#cantidadFacturada{
    width: 70px;
    margin: 0;
}

/*datos de la tabla Precio Unitario predeterminado*/

.dataCenter{
    text-align: center;
}

/*caja digitar factura*/
.divFactura{
    width: 400px;
}

.icon-document-stroke{
    margin-left: 2px;
    margin-right: 6px;
}

/*Boton cerrar orden ->puntodeventa.phh*/
.btnCerrarOrden{
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.89);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.89);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.89);
}


/*Tabla de detalle de cada tarjeta puntodeventa.php*/
#detalleTblPdvCard > tr >td{
    font-size: 16px;
}

.icoDet{
    font-size: 25px;
    color: #154897;
}
/*ESTILOS PAGINAS EMPLEADOS - CONTROL ADMINISTRATIVO-----------------------------------------------*/

/*ESTILO login.php ------->*/
.espacio{
    width: 100%;
    height: 55px;
}

#containerEmpleados{
    margin-top: 250px;

    /*padding: 0;*/
}

.espaciador{
    width: 100%;
    height: 90px;
    background-color:rgba(134, 134, 134, 0.116);
}

#textCClave{/* TEXTO: se me olvido la clave*/
    color: rgb(255, 255, 255);
}

.headerLogin{
    width: 100%;
    color: #26ccff;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 0.4px solid rgba(54, 255, 245, 0.438);
    height: 40px;
}

#BoxinputsLogin{

    width: 300px;
    height: auto;
    padding: 1%;
    border-radius: 8px;
    flex-flow: column;
    border: 0.4px solid rgba(54, 255, 245, 0.438);
    /*background: rgba(255, 255, 255, 0.932);*/
    background-color: rgba(17, 24, 39, 1);

    -webkit-box-shadow: 0px 0px 9px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 9px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 9px 0px rgba(50, 50, 50, 0.75);
}

.inputLogin{
    margin-bottom: 2%;
}

#TitleForm{
    padding: 3%;
    text-align: center;
    margin-bottom: 3%;
    font-size: 18px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    color: rgb(73, 73, 73);
}

#containerBtnLogin{
    padding: 4%;
    display: flex;
    justify-content: center;
}

#BtnAccionLogeado{
    border-radius: 25px;
}

.link-acceso{
    color: rgb(0, 23, 233);
    text-decoration: none;
}

.link-acceso:hover{
    color:rgb(75, 75, 75);
}

/*ESTILO PAGINA preparacion.php */

#TitlePage{
    font-size: 25px;
    color: rgb(53, 28, 0);
}

.nav_pdv{
    background: gold;
    position: fixed;
    width: 100%;
    z-index: 3;
    
}

/*Estilos de notas o tarjetas de pedido*/
#rowCardPedido{
    display: flex;
    justify-content: space-around;
    margin: 0;
    
}


.title-card-pedido{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;

    background: rgb(0, 1, 73);
    font-size: 20px;
    color: #ffffff;
}

.aligVert{
    display: flex;
    align-items: center;
}

.aligVert h6{
    margin: 0;
}

.card-pedido{
    width: 70%;
    margin-top: 30px;
    padding: 0;
}


.TablaNotaPedido{
    width: 100%;
    margin-top: 10px;
}

.FilaDatosNotasPedido{
padding: 30%;
 }


.TablaNotaPedido thead tr{
    text-align: center;
    background: rgba(216, 216, 216, 0.644);
    border-radius: 25px;
}


.TablaNotaPedido thead tr th{
    color: rgb(65, 65, 65);
}


#tdt{
    margin-left: 5PX;
    background-color: aqua;
}

#TdCant{
    text-align: center;
}

.inputCenter{
    text-align: center;
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;


}


.datoPedido{
    padding: 1%;
    border-bottom: 0.4px solid rgb(206, 206, 206);
    font-size: 18px;

}

.datoPedidoPDV{
    padding: 1%;
    border-bottom: 0.4px solid rgb(206, 206, 206);
    font-size: 18px;
    width: 100px;
}


#DivbtnListoPed{
  margin: 7px;
}

.icon-fijado{
    font-size: 30px;
    color: rgb(9, 198, 255);
    margin-right: 12px;
}

.division{
    width:100%;
    height: 400px;
    background: transparent;
}

/*ESTILO PAGINA domicilios.php */
.nav_domicilio {
    background: rgb(0, 78, 131);
    color: rgb(252, 252, 252);
}

.ligth_text{
    color: rgb(252, 252, 252);
}

#TitlePageDomic{
    color: rgb(252, 252, 252);
    font-size: 25px;
}

/*Estilos tarjetas de servicio*/
.card-domicilio{
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 30px;
    border-left: 6px solid rgb(33, 162, 236) ;
    border-radius: 9px;
    flex-direction: column;
    
}

.CardTitleDomicilio{
    font-size: 25px;
}

.icoDoll{
    color: rgb(0, 165, 0);
}

.iconFact{
    font-size: 25px; 
    color: rgb(33, 0, 182);
}

.iconDir{
    font-size: 25px; 
    color: rgb(235, 60, 6);
}

.cardBodyDomicilio{
    display: grid;
    grid-template-columns: 50% 50%;
}

@media screen and (max-width:800px){
    .cardBodyDomicilio{
        display: grid;
        grid-template-columns: 100%;

    }
}

.cardSonDomic{
    width: 100%;
    padding: 2%;
    
}

.headerDomicilio{
    display: flex;
    justify-content:space-between;
   
}

#containerBtns{
    margin-bottom: 1%;
    display: flex;
    justify-content: center;

}

.popover {/*Hace salto de linea dentro del popover */
    white-space: pre-line;    
}

#cardSon2Domic{
    display: flex;
    justify-content:space-evenly;
    margin-bottom: 2%;
}

/*ESTILOS DE ADMIN.PHP    */

.containerAdmin{
    width: 100%;
    height: 500px;
    margin-top: 5%;
    background-color: #ffffffbd;
    padding-left: 15%;
    padding-right: 15%;    
}

/*Titulos Admin*/
.containerAdmin > h5{
    text-align: center;
    margin-top: 3%;
    color: #383838;

}

/*Tarjetas ajustes*/
.cardAjuste{
    display: grid;
    grid-template-columns: 5% 70% 15% 10%;
    grid-template-rows: 1fr;
}

#childAj1, #childAj3, #childAj4 {
    display: flex;
    justify-content: center;
    align-items: center;
}

#childAj2{
    
    display: flex;
    align-items: center;
}

/*Iconos tarjetas*/
.icoAjAdm{
    color: #353535;
    font-size: 20px;
}

/*Contenedor desplegable de cada tarjeta*/
.tCambios{
    flex-direction: column;
    text-align: center;
}

/*Iconos titulo de tarjetas de ajustes generales*/
.icoAjusteTit{
    font-size: 30px;
    color: #2432ff;
}

/*Contenedor productos mas vendidos en tarjeta 2 -Seccion 1*/
#containerProdsMasVend{
    width: 100%;
    height: auto;
    background-color: #242424e0;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 1%;
    padding-bottom: 1%;
}

/*Sub titul prod mas vend*/
#subTitleProdVend{
    width: 100%;
    text-align: center;
}

/*Tarjetas de productos mas vendidos*/
.cardProdVend{
    display: grid;
    grid-template-columns: 10% 75% 15%;
    grid-template-rows: 80px;
}


#a, #b, #c{
    display: flex;
    justify-content: start;
    align-items: center;    
}

/*Ico tarjeta prod +vendidos*/
#a > .i{
    color: #383838;
    font-size: 20px;
}

.i1{
    color: #ffbb00;
}


#c > img{
    width: 80px;
    height: 100%;
}

/* Link de direccionamiento en la mims pagina seccion tarjetas de productos*/
#aSmall{
    text-decoration: none;
    color: #181818;

}




#ContainerGeneral{
    /*display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: auto;
    background: rgb(209, 209, 209);*/
    margin-top: 0;
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
}

.containerEstados{
    width: 400px;
    height: 180px;
    background: rgb(255, 255, 255);
    padding: 1%;
    margin: 10px;
    border-radius: 8px;
    /*border-left: 4px solid rgba(0, 0, 238, 0.705);*/
    -webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}

#containerEstado1{
    background-image: url("https://cdn.pixabay.com/photo/2018/04/29/19/46/smartphone-3360938_960_720.png");
    background-repeat: no-repeat;
    background-size:contain;
}

#containerEstado2{
    background-image: url("https://cdn.pixabay.com/photo/2017/09/25/22/04/man-2786971_960_720.png");
    background-repeat: no-repeat;
    background-size:contain;
}

#containerEstado2:hover{
    border:6px solid rgba(128, 128, 128, 0);
    transition-duration: .1s;
}

#containerEstado3{
    background-image: url("https://cdn.pixabay.com/photo/2021/04/06/03/20/delivery-6155160_960_720.png");
    background-repeat: no-repeat;
    background-size:contain;
}

#containerEstado3:hover{
    border:6px solid rgba(128, 128, 128, 0);
    transition-duration: .1s;
}

#containerEstado4{
    background-image: url("https://camaraecuadorshanghai.com/wp-content/uploads/2021/03/courier-delivering-package-customer_74855-7085.jpg");
    background-repeat: no-repeat;
    background-size:contain;
}


#containerEstado5{
    background-image: url("https://cdn.pixabay.com/photo/2017/02/12/21/29/false-2061132_960_720.png");
    background-repeat: no-repeat;
    background-size:contain;
}

#containerEstado6{
    background-image: url("https://cdn.pixabay.com/photo/2021/07/01/09/18/money-bag-6378861_960_720.png");
    background-repeat: no-repeat;
    background-size:contain;
}

.titlecardEst{
    color: rgb(92, 92, 92);
    text-align: end;
    font-size: 20px;
}

.CantEstado{
    width: 60px;
    height: 60px;
    background: transparent;
    float: right;
    border-radius: 50%;
}

.numico{
    font-size: 25px;
}

.icon-grid{
    font-size: 20px;
    margin-right: 3%;
    font-weight: bold;
    color: rgb(112, 112, 112);
}

.icon-grid:hover{
    color: rgb(58, 58, 58); 
}

#TitleNavAdmin{
    width: 100px;
    
}

/*barra superior de navegacion include en admin.php en header_admin.php*/
.navAdmin{
    /*-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 2px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 2px 5px 0px rgba(50, 50, 50, 0.75);
    */
    background: rgb(255, 255, 255);
    position: fixed;
    z-index: 1;
    width: 100%;
    margin-top:0;
}
#TitlePageAdmin{
    color: rgb(88, 88, 88);
    font-size: 18px;
    font-family: 'Gelasio', serif;
}

/*Barra lateral de menu header_admin.php*/

.tituloMenuLateral{
    color: rgb(255, 255, 255);
    font-size: 16px;
}


.iconBarraLateralAdmin{
    margin-right: 2%;
}

.offcanvas-header{
    display:grid;
    grid-template-columns: 90% 10%;
    grid-template-rows: auto auto;
    background: rgb(243, 243, 243);
}

.linkPanel{
    text-decoration: none;
    color: rgb(238, 238, 238);
}

.linkPanel:hover{
    color: rgb(255, 255, 255);
}


.MenuSec .nav-link{
    color: rgb(116, 116, 116);
    display: flex;
    align-items: center;
    font-family: 'Kanit', sans-serif;



}

.MenuSec .nav-link:hover{
    background: rgba(87, 138, 204, 0.425);
    border-radius: 25px 0 0 25px;
    border-right: 2px solid rgb(0, 44, 190);
    color: rgb(0, 38, 255);
}

.headerCanvas{
    background: rgb(59, 105, 197);
}

.icon-lateral{
    background: rgb(134, 134, 134);
    font-size: auto;
    padding: 7px;
    border-radius: 50%;
    color: rgb(238, 238, 238);
    margin-right: 7px;
}

/*ESTILOS administrar_cuentas_usuario.php*/

/*estilo de tabla de usuarios en administrar_cuentas_usuario.php*/

.hide_column{
    display: none;
}

.titlePpal{
    margin-top: 12px;
    color: rgb(51, 51, 56);
    font-family: 'Gelasio', serif;
    background: rgba(160, 217, 255, 0.158);
    font-family: 'Roboto Mono', monospace;

}

/*ESTILO EDITAR_CATEGORIAS_MENU.PHP */

#MuestraImagenCategoria{
    width: 100%;
    height: 300px;
    border-radius:7px ;
    border:4px solid  rgba(0, 0, 255, 0.267);
    margin-top: 1%;
    
}

/*ESTILO REPROGRAMAR_DOMICILIO.PHP */
.thReprog{
    color: rgb(63, 63, 63);
    text-align: center;
    
}


/*ESTILO CAMBIAR_CLAVE.PHP */
.containerForm{
    padding-left: 35%;
    padding-right: 35%;
    height: 550px;
    display: flex;
    align-items: center;
    
}

#titleFormSaludo{
    text-align: center;
    color: rgb(99, 99, 99);
}

.formCambiarClave{
    border: 0.5px solid rgb(168, 168, 168);
    border-radius: 9px;
    padding: 3%;
    -webkit-box-shadow: -1px 0px 9px 0px rgba(50, 50, 50, 0.68);
    -moz-box-shadow:    -1px 0px 9px 0px rgba(50, 50, 50, 0.68);
    box-shadow:         -1px 0px 9px 0px rgba(50, 50, 50, 0.68);
    background: white;
}

.formCambiarClave #titleForm{
    text-align: center;
    color: rgb(0, 38, 255);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
}

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


/*ESTILOS DE LEGALIZAR.PHP EN EMPLOYEES */
.containerdad{
    width: 100%;
    height: auto;
    background: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: 60% 38%;
    grid-template-rows: auto;
    margin-top: 3%;
    flex-direction: column;
}

.containerson{
    padding-top: 0;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    margin-top: 0;
}



/*ESTILOS ESTADISTICAS.PHP*/
#containerGeneral{
    width: 100%;
    height: auto;
    background: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: repeat(2, 48%);
    grid-template-rows: auto;
    margin-top: 3%;
    flex-direction: column;
}

.container_son{
    width: 100%;
    height: auto;
    padding: 2%;
    border-top: 0.5px solid rgba(128, 128, 128, 0.363);
}

#son-2{
    border-left: 0.5px solid rgba(128, 128, 128, 0.363);
}

.TotalVenta{
    font-size: 20px;
    color: rgb(66, 66, 66);
    font-family: 'Roboto', sans-serif;
    text-align: center;
    display: flex;
}

/*ESTILOS CONFIG_PERFIL.PHP */

.BodyEditEmpresa{
    padding-left: 25%;
    padding-right: 25%;
    padding-top: 4%;
}

#containerImagenEmpresa{
    width: 100%;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
    margin-bottom: 3%;
}

#ImagenEmpresa{
    background: rgb(91, 139, 141);
    border-radius: 50%;
    height: 100%;
    width: 7rem;
    margin: 2%;
}

#DivCheckEmpresaLogo{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/*ESTILOS PIE DE PAGINA footer.php*/
#containerPiePaginaPpal{
    width: 100%;
    height: auto;
    background: #154897;
    
}

/*Container foooter empresarial*/
#footInfoEmp{
    padding-top: 2%;
    width: 100%;
    height: auto;
    background-color: #154897;
    color: white;
}

.linkFooter{
    text-decoration: none;
    color: white;


}

/*container img footer empresa datos*/
.item.text{
    background-color: #63636300;
    border-radius: 25px;
    
}

.imgCenefa{
    width: 100%;
    max-height: 25vh;
}

#imgFooter{/*container Img*/
    width: 100%;
    display: flex;
    justify-content: center;
}

#imgFooter >img{
    width: 15%;
}

@media screen and (max-width: 768px) {
    #footInfoEmp .container {
        text-align: center;
    }

    #footInfoEmp .item {
        margin-bottom: 20px;
    }

    #footInfoEmp .item h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    #footInfoEmp .item ul {
        padding: 0;
        list-style: none;
    }

    #footInfoEmp .item ul li {
        margin: 5px 0;
    }

    #footInfoEmp .social {
        justify-content: center;
        display: flex;
        gap: 15px;
        margin-top: 10px;
    }

    #imgFooter > img {
        width: 40%; /* Más grande y centrado en móviles */
        margin-top: 15px;
    }

    .copyright {
        padding-top: 10px;
        font-size: 12px;
    }
}

/*End container footer empresarial*/

.PiePaginaPpal{
    height: 100px;
    color: rgb(240, 240, 240);
    display: flex;
    justify-content:space-evenly;
}

.linkRRSS{

    text-decoration: none;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:rgb(206, 206, 206); 
    

}





.icoRRSS{
    color: rgb(206, 206, 206);
    font-size: 50px;
}

.icoRRSS:hover{
    color: rgb(255, 255, 255);
    font-size: 50px;

}

.icoCont{
    color: rgb(206, 206, 206);
    font-size: 45px; 
    margin-right:5px;
}

.icoCont:hover{
    color: rgb(255, 255, 255);
}

.TitleRRSS{
    color: rgba(255, 255, 255, 0.979);
    width: 100%;
    text-align: center;
    margin-bottom: 7px;
    margin-top: 7px;

    
}



/*ESTILOS EN VENTAS_DIA*/
#contGeneral{
    padding-left: 15%;
    padding-right: 15%;
}

#DataDescripcion{
    text-align: left;
    font-weight: normal;
}

#thTitleVentas{
    color: rgb(243, 243, 243);
    background: rgba(65, 65, 65, 0.774);
}

#TRvENTAS{
    background: rgb(245, 245, 245);
    margin-bottom: 30px;
}

#DataNFac{
    font-size: 35px;
    color: rgb(0, 110, 110);
    text-align: center;
}


/*slider nueva implementacion 25.01.2023*/

.cont {
    position: relative;
    height: 50vh;
    overflow: hidden;
  }
  
/*boton para cambiar la imagen del slider*/
.btnSlide{
    height: 200px;
}


  .slider {
    position: relative;
    height: 100%;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    cursor: all-scroll;
    user-select: none;
  }
  .slider.animation {
    transition: transform 750ms ease-in-out;
  }
  .slider.animation .slide__darkbg {
    transition: transform 750ms ease-in-out;
  }
  .slider.animation .slide__text {
    transition: transform 750ms ease-in-out;
  }
  .slider.animation .slide__letter {
    transition: transform 750ms ease-in-out;
  }
  
  .slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .slide--1 {
    left: 0%;
  }
  .slide--2 {
    left: 100%;
  } 
  .slide--3 {
    left: 200%;
  }
  .slide--4 {
    left: 300%;
  }
  .slide--5 {
    left: 400%;
  }
  .slide__darkbg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    z-index: 10;
  }
  .slide__text-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 15;
  }
  .slide__letter {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    font-size: 50vw;
    font-weight: 800;
    color: #000;
    z-index: 2;
    will-change: transform;
    user-select: none;
  }
  .slide__text {
    font-size: 8vw;
    font-weight: 800;
    text-transform: uppercase;
    transform: translate3d(0, 0, 0);
    letter-spacing: 12px;
    color: #fff;
    will-change: transform;
    user-select: none;
  }
  .slide__text:nth-child(odd) {
    z-index: 2;
  }
  .slide__text:nth-child(even) {
    z-index: 1;
  }
  .slide--1__darkbg {
    left: 0%;
    background: url("../images/slider3.jpg") center center no-repeat;
    background-size: cover;
    background-position: 0px center, 0px center;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  .slide--1__darkbg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 15, 39, 0.83);
  }
  .slide--1__letter {
    background: url("../images/slider3.jpg") center center no-repeat;
    background-position: 0px center, 0px center;
    background-size: cover;
  }
  .slide--2__darkbg {
    left: -50%;
    background: url("../images/slider2.jpg") center center no-repeat;
    background-size: cover;
    background-position: 0px center, 0px center;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  .slide--2__darkbg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 15, 39, 0.83);
  }
  .slide--2__letter {
    background: url("../images/slider2.jpg") center center no-repeat;
    background-position: 0px center, 0px center;
    background-size: cover;
  }
  .slide--3__darkbg {
    left: -100%;
    background: url("../images/slider1.jpg") center center no-repeat;
    background-size: cover;
    background-position: 0px center, 0px center;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  .slide--3__darkbg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 15, 39, 0.83);
  }
  .slide--3__letter {
    background: url("../images/slider1.jpg") center center no-repeat;
    background-position: 0px center, 0px center;
    background-size: cover;
  }


  /*
  .slide--4__darkbg {
    left: -150%;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
    background-size: cover;
    background-position: 0px center, 0px center;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  .slide--4__darkbg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 15, 39, 0.83);
  }
  .slide--4__letter {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
    background-position: 0px center, 0px center;
    background-size: cover;
  }
  .slide--5__darkbg {
    left: -200%;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
    background-size: cover;
    background-position: 0px center, 0px center;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  .slide--5__darkbg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 15, 39, 0.83);
  }
  .slide--5__letter {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
    background-position: 0px center, 0px center;
    background-size: cover;
  }
*/
  
.nav {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    list-style-type: none;
    z-index: 10;
  }


  .nav__slide {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: 10px;
    cursor: pointer;
  }



  @media screen and (max-width: 400px) {
    .nav__slide {
      width: 22px;
      height: 22px;
    }
  }
  .nav__slide:hover:after {
    transform: translate(-50%, -50%) scale(1, 1);
    opacity: 1;
  }
  .nav__slide:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0, 0);
    width: 75%;
    height: 75%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0;
    transition: 300ms;
  }
  .nav__slide--1 {
    margin-left: 0;
  }
  
  .nav-active:after {
    transform: translate(-50%, -50%) scale(1, 1);
    opacity: 1;
  }
  
  .side-nav {
    position: absolute;
    width: 10%;
    height: 100%;
    top: 0;
    z-index: 20;
    cursor: pointer;
    opacity: 0;
    transition: 300ms;
  }
  .side-nav:hover {
    opacity: 0.1;
  }
  .side-nav--right {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
  }
  .side-nav--left {
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
  }
  
  /*
  html {
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
  }
  
  *,
  
  body {
    background-color: #000;
    overflow: hidden;
  }
*/

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
html {
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
  }

/*FINAL slider*/


/*DISEÑO RESPONSIVE - ADAPTABLE A CUALQUIER DISPOSITIVO*/
@media screen and (max-width: 992px) {
    /*Barra de nav*/
    .navppal{
        margin-right: 0;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top: 10px;
    }

    #a_Empresa{
        margin-right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.418);
       /*  padding-top: 5px; */
        margin-bottom: 0px;
        /*margin-top: 100px;*/

    }

    #divRRSS{
        /* display: none; */
        display: contents;
        align-items: center;
        justify-content: center;
    }
    
    #contCardLineasProd{
        width: 100%;
        height: auto;
        /*margin-top: 30px;*/
        margin-top: calc(40% + 60px);
      }
    
    
    #encabezadoSlider {
        width: 100%;
        height: auto;
        background: white; /* Cambia el fondo a blanco */
        display: inline-block;
        position: absolute;
        top: 4vh;
    }
}

@media screen and (max-width: 3000px) {
    .navppal{
        margin-right: 0;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top: 10px;
    }
}

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

    .navppal{
        margin-right: 0;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top: 10px;
        width: auto;
        

    }

 





/*productos.php -> card.php *Tarjetas de productos*/




/*CONTAINER TARJETAS PRODUCTOS*/

  
/* eND cintas de tarjetas de productos - aplica cuando hay dcto. */


#card-bodyOferta{
    border-radius: 0 0 12px 12px;
}


    /*tarjetas*/
    .card-opcion{
        width: 90%;  
        margin-top: 20px ;
        margin-left:0;
        margin-right:0;
        border-radius: 12px;

    }

/*TEMPLATE Productos.php*/
/*Barra de busqueda*/
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
        margin-top: 12px;
        
    }

    .input:focus,
    .input:not(:invalid) {
    width: 80%;
    
    }

    .input:focus + .icon{
       display: none;

    }

    
    /*Barra de nav*/
    .navppal{
        margin-right: 0;
        display: flex;
        justify-content: center;

    }

    #a_Empresa{
        margin-right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.418);
        padding-top: 5px;
        padding-top: 5px;
    }

    /* Slider productos de temporada */




    /* End Slider productos de temporada */


  }/*Fin de media screen */




  /*Boton menu resposive barra de nav Cliente*/
    .burger {
        position: relative;
        width: 40px;
        height: 30px;
        background: transparent;
        cursor: pointer;
    }
    
    .burger input {
        display: none;
    }
    
    .burger span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: rgb(255, 255, 255);
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }
    
    .burger span:nth-of-type(1) {
        top: 0px;
        transform-origin: left center;
    }
    
    .burger span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
        transform-origin: left center;
    }
    
    .burger span:nth-of-type(3) {
        top: 100%;
        transform-origin: left center;
        transform: translateY(-100%);
    }
    
    .burger input:checked ~ span:nth-of-type(1) {
        transform: rotate(45deg);
        top: 0px;
        left: 5px;
    }
    
    .burger input:checked ~ span:nth-of-type(2) {
        width: 0%;
        opacity: 0;
    }
    
    .burger input:checked ~ span:nth-of-type(3) {
        transform: rotate(-45deg);
        top: 28px;
        left: 5px;
    }

/* EStilos de banner Descuentos  */
#imgBannerDesc{
    width: 100%;
    height: 6rem;
    object-fit: auto;

}

/* ESTILOS Seguimiento.php */
/*containers*/
#containerTextEncab{
    padding-left: 10%;
    padding-right: 10%;
}


/*Tarjetas de seguimiento*/
.cardSeg > div{

    width: 100%;
    height: 100px;
    background-color: #92db56;
    display: grid;  
    grid-template-columns: 30% 70%;
}

#logoPdvCardSeg{
    width: 100px;
    height: 100px;
    background-color: #306108;
    border-radius: 50px;
    display: flex;
    text-align: center;    
    align-items: center;
}

#divCardSeg2{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
}   

.SegChild > p{
    text-align: center;
}




/* CUBO 3D SLIDER# 2  - productos.php
#contCubo3D{
    height:auto;
    width:100%;
    
    
}*/


/*  btn flotante contactanos*/
.btn-flotante2{
    font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #d80000; /* Color de fondo */
	padding: 0.5%; /* Relleno del boton */
	position: fixed;
	bottom: 120px;
	right: 20px;
	transition: all 300ms ease 0ms;
	/**/box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
	z-index: 99;
    text-decoration: none;
    border-radius: 25px;

    width: 70px;
    height: 70px;

}

.btn-flotante2 img{
    color: #000;
    width: 100%;
    height: 100%;
}

.btn-flotante2:hover{
    color: #ffffff;
}


/*  btn flotante contactanos*/
.btn-flotante2{
    font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #d80000; /* Color de fondo */
	padding: 0.5%; /* Relleno del boton */
	position: fixed;
	bottom: 120px;
	right: 20px;
	transition: all 300ms ease 0ms;
	/**/box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
	z-index: 99;
    text-decoration: none;
    border-radius: 25px;

    width: 70px;
    height: 70px;

}

.btn-flotante2 img{
    color: #000;
    width: 100%;
    height: 100%;
}

.btn-flotante2:hover{
    color: #ffffff;
}

/*-/Modal contactanos */
#modalContactBody{
    background-color: #ffffff;
}



/*boton flotante para mnostrar el PDV mas cercano al cliente header.php*/

.btn-flotante {
	font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	border-radius: 5px; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #057cda; /* Color de fondo */
	padding: 1%; /* Relleno del boton */
	position: fixed;
	bottom: 10px;
	right: 20px;
	transition: all 300ms ease 0ms;
	/*box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);*/
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
	z-index: 99;
    text-decoration: none;
    border-radius: 25px;
}

.btn-flotante:hover {
	background-color: #191a35; /* Color de fondo al pasar el cursor */
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-7px);
    text-decoration: none;
    color: white;
}

@media only screen and (max-width: 600px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 20px;
	}
} 


/*modal inicio.php al iniciar la pagina se muestra*/
#modalSliderPromociones{
    height: 60vh;
}

#modal-bodyPromociones{
    height: auto;
}

#ModalPromociones{
    background-color: #00164c5d;

    
}

#modalInicioPromo{
    width: 100%;
    
}

#contModalPromo{
    /*height: 500px;*/
    background-color: #00f1e5;
    width: 100%;
}

#carouselExampleInterval{
    height: 450px;
    width: 450px;
}

.cii{
    width: 100%;
    height: 100%;
}

.c22{
    width: 100%;
    height: 100%;

}

.c22 > a > img{
    width: 100%;
    height: 100%;
}

.visually-hidden{
    z-index: 1000;
}

.modalOff{
    width: auto;
    height: auto;
    object-fit: cover;
}

.modalOff > img{
    object-fit: auto;
    object-position: center center;
}

.imgPromo{
    object-fit: auto;
    object-position: center center;
    z-index: 100;
}

/*Botones Modal - Slider*/
.iconCarousel{
    background-color: #000000e3;
    color: #ffffff;
    border-radius: 25px;
    padding: 4px;
}

#titleLineas{

text-align: justify;

}



/* encabezProd - PRODUCTOS.PHP*/


#encabezProd{

    width: 100%;
    height: auto;
    background: url("../images/fondos/fondoLineas.png") center center no-repeat;
    background-size: cover;
    background-position: center bottom;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30% 70%;

    justify-content: center;
    align-items: center;
}


/*Imagen del slide*/
.cf{
    width: 50%;
}

/*ESTILOS BANNER OFERTAS PRODUCTOS.PHP**/

  #containerAvisoDescuent{
    width: 100%;
    height:auto;
    background-color: yellow;
    background-image: url('https://cdn.pixabay.com/photo/2017/01/05/18/42/sale-1956066_1280.png');
    background-repeat: repeat;
    background-size: contain;
    margin-top: 80px;
/*https://cdn.pixabay.com/photo/2021/04/16/12/38/discount-6183488_1280.png*/

  }
   /* Ex2 Styling  */ 

   
   #svg1{
  cursor: pointer !important;
   margin:px auto;
   

}

.BannerBorder {
    display: none;
  }

.Banner2{
  display:block;


}

.Mega, .ShopNowEx2,.SalesEx2 {/* ex 2 texts  */
display:block;
}

.BannerBorderLineEx2, .BannerBorderEx2{
   display:block;
}
.BannerHolderEx2{
    background-color: #fd0800;
 display:block;
}

.BorderAnimationEx2 {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation:BannerBorder 50s linear alternate infinite;
  animation-delay: 0s;
}


/* test container - en desarrollo 20nov2024 */
#nuevaSeccionProductosOfertasDesc{
    width: 100%;
    height: auto;
    background-color: rgb(255 255 255);
    background-image: url('../images/fondos/fondoOfertasDM.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
}




/* seccionAlmacenesCadena.php  */

.cardsAlmacenesGS {
    width: 100%;
    padding-top: 3%;
    padding-bottom: 100px;
    background-image: url('../images/fondos/fondoSM.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.titleGr {
    color: white;
}

/* ---------------------- */
/* TARJETA PRINCIPAL      */
/* ---------------------- */
.cardAGS {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

/* Imagen lateral de supermercado */
.imgAlmacenPrincipal img {
    max-width: 65%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
  }

/* ---------------------- */
/* CONTENIDO DERECHA      */
/* ---------------------- */
.tituloProductos {
    text-align: center;
    margin-top: 20px;
  }

  .tituloProductos h3 {
    font-style: italic;
    font-size: 2.0 rem;
    color: #333;
  }


  .galeriaProductos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 20px 0;
  }

  .galeriaProductos img {
    max-width: 140px;
    height: auto;
    transition: transform 0.3s ease;
  }

  .galeriaProductos img:hover {
    transform: scale(1.05);
  }

.btnComprar {
    text-align: center;
    }

.btnComprar a {
    background-color: #00a859;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s;
  }

  .btnComprar a:hover {
    background-color: #008f4c;
  }

/* ---------------------- */
/* BOTONES GENERALES      */
/* ---------------------- */
.button {
    height: 50px;
    display: flex;
    overflow: hidden;
    margin: 10px;
    padding: 2%;
    cursor: pointer;
    user-select: none;
    transition: all 150ms linear;
    text-align: center;
    white-space: nowrap;
    text-decoration: none !important;
    text-transform: capitalize;
    color: #fff;
    border: 0 none;
    border-radius: var(--borderRadius);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    justify-content: center;
    align-items: center;
    flex: 0 0 160px;
    box-shadow: 2px 5px 10px var(--color-smoke);
}

.button:hover {
    opacity: 0.85;
}

.button:active {
    opacity: 0.75;
}

.button:focus {
    outline: 1px dotted #959595;
    outline-offset: -4px;
}

.button.-regular {
    color: #202129;
    background-color: #f2f2f2;
}

.button.-regular:hover {
    color: #202129;
    background-color: #e1e2e2;
    opacity: 1;
}

.button.-regular:active {
    background-color: #d5d6d6;
    opacity: 1;
}

.button.-green {
    color: var(--color-snow);
    background: var(--color-grass);
    margin: 0;
}

/* ---------------------- */
/* LINKS GENERALES        */
/* ---------------------- */
.abtn {
    text-decoration: none;
    color: white;
}

.abtn:hover {
    color: white;
}

.abtn button p,
.btnCardAGS span p {
    margin: 0;
}

/* ---------------------- */
/* MOBILE (NO TOCAR AÚN)  */
/* ---------------------- */
@media (max-width: 768px) {
    .cardAGS {
        background-color: #fff;
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .imgAlmacen img {
        padding: 2%;
        height: auto;
        max-height: 200px;
    }

    .prodAlmacen {
        grid-template-rows: auto auto auto;
        padding: 5% 3%;
        gap: 10px;
    }

    .btnCardAGS {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .button {
        width: 100%;
        max-width: 250px;
        flex: 1;
    }

    .prodAGS .card-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .prodAGS .card-group .card {
        min-width: 120px;
    }

    .card3 img {
        width: 100%;
        max-height: 140px;
    }
}


  /* ESTILOS modalRegistrate.php*/ 

  .checkRegCliente{
    color: #000 !important;
  }





  /* Estilos boton flotante Contactanos */
  @import url("https://fonts.googleapis.com/css?family=Roboto");

  .containerBtnF {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 30px;
    left: 40%;

  }
  
  #toggle {
    display: none; /* Ocultar el checkbox */
  }
  
  .buttonBtnF {
    position: absolute;
    z-index: 999;
    width: 43px;
    height: 43px;
    background: #0b2fff;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -12px;
    transition: all 0.4s ease; /* Añadir transición */
  }
  
  .buttonBtnF:before,
  .buttonBtnF:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 2px;
    background: #fff;
    transition: all 0.4s ease;
  }
  
  .buttonBtnF:before {
    transform: rotate(90deg);
  }
  
  .navBtnF {
    opacity: 0;
    transition: all 0.4s ease-in-out;
    background: #fff;
    width: 100%;
    border-radius: 5px;
    transform: translateY(0%);
    box-shadow: 2px 3px 10px rgba(81, 81, 81, 0.1);
    border: 1px solid #e4e4e4;
    padding: 10px;
    position: absolute; /* Cambiar a posición absoluta */
    top: 50px; /* Ajustar la posición del menú */
    left: 0; /* Alinear a la izquierda */
    z-index: 998; /* Asegurarse de que esté detrás del botón */
  }

  .navBtnF ul li{
    display: flex;
    align-items: center;
    text-align: start;
    list-style-type: none;
  }
  
  .navBtnF ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .iconCont{
    font-size: 18px;
  }
  
  .navBtnF a {
    text-align: center;
    margin: 10px 0; /* Ajustar márgenes */
    color: #0051ff;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
  }
  
  .navBtnF a:hover {
    color: #0037ad;
  }
  
  #toggle:checked ~ .navBtnF {
    opacity: 1;
    transform: translateY(10%);
  }
  
  #toggle:checked + .buttonBtnF:before {
    transform: rotate(225deg);
  }
  
  #toggle:checked + .buttonBtnF:after {
    transform: rotate(135deg);
  }
  
  @media (max-width: 640px) {
    .containerBtnF {
      width: 100%;
    }
  }
  


/* BOTON FLOTANTE CONTACTANOS */

#hashLink {
	display: none;
}
#hashLink:target {
	display: block;
}
.float-nav {
  position: fixed;
  bottom: 200px;
  right: 40px;
  z-index: 9999999;
}
.float-nav:hover {
cursor:pointer;
}
.float-nav-2 {
  position: fixed;
  bottom: 200px;
  right: 40px;
  z-index: 9999;
}
.float-nav-2:hover {
cursor:pointer;
}
.main-nav-2 {
  font-family: sans-serif;
  position: absolute;
  bottom: 10px;
  right: 0px;
  width: 120px;
  margin-bottom:40px;
/*   background-color: #00000034; */
}
.main-nav-2.active {
  display: block;
  opacity: 1;
}
.main-nav-2 > ul {
  width: 100%;
  display: block;
  list-style: none;
	z-index:10;
}
.main-nav-2 > ul > li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.main-nav-2 > ul > li > a {
  text-decoration: none;
  display: block;
  font-weight: 200;
  padding: 18px 80px 18px 18px;
  color: black;
}
.main-nav-2 > ul > li > a:hover {
  font-weight: 400;
}

.icons{
    font-size: 60px;
	border-radius: 20px;
    color: #ffffff;
    text-decoration: none;


  }

#iconCerrarContactanos{
    font-size: 30px;
}


  .iconCont{
    font-size: 30px;
    text-decoration: none;
    color: #ffffff;
  }


  .aIconExt{
    text-decoration: none;
  }

  .iconCont2{
    font-size: 31px;
  }

  #iconContactanos{
    width: 70px;
    height: 70px;
  }

  /* Modal Contactanos */

  #iconos{
    width: 100%;
    height: 100px;
    background-color: #ffffff00;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  #iconos > a > i{
    color: #662d91;
    text-decoration: none;
    font-size: 70px;

  }

  #iconos > a > i:hover{
    color: #715dc2a9;
    text-decoration: none;
    font-size: 85px;


  }

    #iconos > a {

    text-decoration: none;
    text-align: center;


  }


  #resCont{
    text-align: center;
    color: #154897;
    font-weight: bold;
  }

  a.btn-flotante #txtpdv {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.9rem; /* opcional: ajusta el tamaño */
  font-weight: 400; /* opcional: suaviza la tipografía */
}



.btn-close{
    background-color: #ffffffa2;
    border-radius: 50%;
}







/*  SECCION OFERTAS ESPECIALES */

/* OFERTAS ESPECIALES */
#containerOfertasEspeciales{
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    height: auto;
    background-color: #0c4479be;
    display: block;
    background-image: url('../images/fondos/fondoMesa1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}



#contBannerOE {

    margin-top: 100px;
    padding-bottom: 2%;
  
    margin: 0;
    padding: 0;
    background: #00336600;
    text-align:center;
    
   /* background-image: url('./static/images/fondos/fontoOfertas.jpg');./static/images/fondos/neon.png
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    background-position-y: 50%;*/
    overflow: hidden;
    height: 80px;

    display: flex;
    align-content: center;



}
.pyro > .before, .pyro > .after {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
    to {
        box-shadow: 152px 49.6666666667px #00fbff, 227px -181.3333333333px #fbff00, -180px 28.6666666667px #00ff2b, 153px -260.3333333333px #ffdd00, 119px -200.3333333333px #8400ff, -145px -331.3333333333px #00ffaa, 128px -263.3333333333px #ffa600, 82px -39.3333333333px #00ff55, 116px -311.3333333333px #00ff44, 171px 65.6666666667px #ff0009, -149px -148.3333333333px #ff00dd, 47px -217.3333333333px #7300ff, 224px -78.3333333333px #0059ff, 112px -92.3333333333px #ff00a6, 102px -277.3333333333px #ff0055, 105px -37.3333333333px #5100ff, 198px -193.3333333333px #2200ff, 189px -172.3333333333px #fffb00, -175px 0.6666666667px #00a6ff, 3px -176.3333333333px #6600ff, -99px -124.3333333333px #00f7ff, 219px -123.3333333333px #1a00ff, -22px -219.3333333333px #ff0400, 219px -208.3333333333px #0022ff, 98px 64.6666666667px #6a00ff, 94px -122.3333333333px #00ffb7, 23px -113.3333333333px #ff0015, -187px -291.3333333333px #ff00b3, 220px 60.6666666667px #9dff00, 103px -234.3333333333px #ff3c00, 194px -316.3333333333px #0059ff, 1px -59.3333333333px #8800ff, 116px -157.3333333333px #ff0900, -163px -40.3333333333px #ff00a2, 193px -128.3333333333px #ff2b00, 64px -125.3333333333px #0026ff, -217px -312.3333333333px #00ff1e, 18px -75.3333333333px #ff00aa, -221px -36.3333333333px #11ff00, 49px -260.3333333333px darkorange, -249px 42.6666666667px #00ff1e, -133px -208.3333333333px #ff5900, 106px -71.3333333333px #006fff, 144px -305.3333333333px blue, -152px -219.3333333333px #ff8400, -83px -26.3333333333px #00ff4d, 111px -304.3333333333px lime, -95px -27.3333333333px #00ffcc, 79px -237.3333333333px #a600ff, -245px 46.6666666667px yellow, -217px -167.3333333333px #00ff0d, 21px -7.3333333333px #a600ff, 143px -8.3333333333px #ff7300, 27px -183.3333333333px #ff2600, -137px -54.3333333333px yellow, -10px 26.6666666667px #ff00b7, -66px 53.6666666667px #44ff00, 188px 12.6666666667px #ff4000, 239px 37.6666666667px #0900ff, -208px -76.3333333333px #00ffee, -109px 61.6666666667px #00f2ff;
    }
}
@-moz-keyframes bang {
    to {
        box-shadow: 152px 49.6666666667px #00fbff, 227px -181.3333333333px #fbff00, -180px 28.6666666667px #00ff2b, 153px -260.3333333333px #ffdd00, 119px -200.3333333333px #8400ff, -145px -331.3333333333px #00ffaa, 128px -263.3333333333px #ffa600, 82px -39.3333333333px #00ff55, 116px -311.3333333333px #00ff44, 171px 65.6666666667px #ff0009, -149px -148.3333333333px #ff00dd, 47px -217.3333333333px #7300ff, 224px -78.3333333333px #0059ff, 112px -92.3333333333px #ff00a6, 102px -277.3333333333px #ff0055, 105px -37.3333333333px #5100ff, 198px -193.3333333333px #2200ff, 189px -172.3333333333px #fffb00, -175px 0.6666666667px #00a6ff, 3px -176.3333333333px #6600ff, -99px -124.3333333333px #00f7ff, 219px -123.3333333333px #1a00ff, -22px -219.3333333333px #ff0400, 219px -208.3333333333px #0022ff, 98px 64.6666666667px #6a00ff, 94px -122.3333333333px #00ffb7, 23px -113.3333333333px #ff0015, -187px -291.3333333333px #ff00b3, 220px 60.6666666667px #9dff00, 103px -234.3333333333px #ff3c00, 194px -316.3333333333px #0059ff, 1px -59.3333333333px #8800ff, 116px -157.3333333333px #ff0900, -163px -40.3333333333px #ff00a2, 193px -128.3333333333px #ff2b00, 64px -125.3333333333px #0026ff, -217px -312.3333333333px #00ff1e, 18px -75.3333333333px #ff00aa, -221px -36.3333333333px #11ff00, 49px -260.3333333333px darkorange, -249px 42.6666666667px #00ff1e, -133px -208.3333333333px #ff5900, 106px -71.3333333333px #006fff, 144px -305.3333333333px blue, -152px -219.3333333333px #ff8400, -83px -26.3333333333px #00ff4d, 111px -304.3333333333px lime, -95px -27.3333333333px #00ffcc, 79px -237.3333333333px #a600ff, -245px 46.6666666667px yellow, -217px -167.3333333333px #00ff0d, 21px -7.3333333333px #a600ff, 143px -8.3333333333px #ff7300, 27px -183.3333333333px #ff2600, -137px -54.3333333333px yellow, -10px 26.6666666667px #ff00b7, -66px 53.6666666667px #44ff00, 188px 12.6666666667px #ff4000, 239px 37.6666666667px #0900ff, -208px -76.3333333333px #00ffee, -109px 61.6666666667px #00f2ff;
    }
}
@-o-keyframes bang {
    to {
        box-shadow: 152px 49.6666666667px #00fbff, 227px -181.3333333333px #fbff00, -180px 28.6666666667px #00ff2b, 153px -260.3333333333px #ffdd00, 119px -200.3333333333px #8400ff, -145px -331.3333333333px #00ffaa, 128px -263.3333333333px #ffa600, 82px -39.3333333333px #00ff55, 116px -311.3333333333px #00ff44, 171px 65.6666666667px #ff0009, -149px -148.3333333333px #ff00dd, 47px -217.3333333333px #7300ff, 224px -78.3333333333px #0059ff, 112px -92.3333333333px #ff00a6, 102px -277.3333333333px #ff0055, 105px -37.3333333333px #5100ff, 198px -193.3333333333px #2200ff, 189px -172.3333333333px #fffb00, -175px 0.6666666667px #00a6ff, 3px -176.3333333333px #6600ff, -99px -124.3333333333px #00f7ff, 219px -123.3333333333px #1a00ff, -22px -219.3333333333px #ff0400, 219px -208.3333333333px #0022ff, 98px 64.6666666667px #6a00ff, 94px -122.3333333333px #00ffb7, 23px -113.3333333333px #ff0015, -187px -291.3333333333px #ff00b3, 220px 60.6666666667px #9dff00, 103px -234.3333333333px #ff3c00, 194px -316.3333333333px #0059ff, 1px -59.3333333333px #8800ff, 116px -157.3333333333px #ff0900, -163px -40.3333333333px #ff00a2, 193px -128.3333333333px #ff2b00, 64px -125.3333333333px #0026ff, -217px -312.3333333333px #00ff1e, 18px -75.3333333333px #ff00aa, -221px -36.3333333333px #11ff00, 49px -260.3333333333px darkorange, -249px 42.6666666667px #00ff1e, -133px -208.3333333333px #ff5900, 106px -71.3333333333px #006fff, 144px -305.3333333333px blue, -152px -219.3333333333px #ff8400, -83px -26.3333333333px #00ff4d, 111px -304.3333333333px lime, -95px -27.3333333333px #00ffcc, 79px -237.3333333333px #a600ff, -245px 46.6666666667px yellow, -217px -167.3333333333px #00ff0d, 21px -7.3333333333px #a600ff, 143px -8.3333333333px #ff7300, 27px -183.3333333333px #ff2600, -137px -54.3333333333px yellow, -10px 26.6666666667px #ff00b7, -66px 53.6666666667px #44ff00, 188px 12.6666666667px #ff4000, 239px 37.6666666667px #0900ff, -208px -76.3333333333px #00ffee, -109px 61.6666666667px #00f2ff;
    }
}
@-ms-keyframes bang {
    to {
        box-shadow: 152px 49.6666666667px #00fbff, 227px -181.3333333333px #fbff00, -180px 28.6666666667px #00ff2b, 153px -260.3333333333px #ffdd00, 119px -200.3333333333px #8400ff, -145px -331.3333333333px #00ffaa, 128px -263.3333333333px #ffa600, 82px -39.3333333333px #00ff55, 116px -311.3333333333px #00ff44, 171px 65.6666666667px #ff0009, -149px -148.3333333333px #ff00dd, 47px -217.3333333333px #7300ff, 224px -78.3333333333px #0059ff, 112px -92.3333333333px #ff00a6, 102px -277.3333333333px #ff0055, 105px -37.3333333333px #5100ff, 198px -193.3333333333px #2200ff, 189px -172.3333333333px #fffb00, -175px 0.6666666667px #00a6ff, 3px -176.3333333333px #6600ff, -99px -124.3333333333px #00f7ff, 219px -123.3333333333px #1a00ff, -22px -219.3333333333px #ff0400, 219px -208.3333333333px #0022ff, 98px 64.6666666667px #6a00ff, 94px -122.3333333333px #00ffb7, 23px -113.3333333333px #ff0015, -187px -291.3333333333px #ff00b3, 220px 60.6666666667px #9dff00, 103px -234.3333333333px #ff3c00, 194px -316.3333333333px #0059ff, 1px -59.3333333333px #8800ff, 116px -157.3333333333px #ff0900, -163px -40.3333333333px #ff00a2, 193px -128.3333333333px #ff2b00, 64px -125.3333333333px #0026ff, -217px -312.3333333333px #00ff1e, 18px -75.3333333333px #ff00aa, -221px -36.3333333333px #11ff00, 49px -260.3333333333px darkorange, -249px 42.6666666667px #00ff1e, -133px -208.3333333333px #ff5900, 106px -71.3333333333px #006fff, 144px -305.3333333333px blue, -152px -219.3333333333px #ff8400, -83px -26.3333333333px #00ff4d, 111px -304.3333333333px lime, -95px -27.3333333333px #00ffcc, 79px -237.3333333333px #a600ff, -245px 46.6666666667px yellow, -217px -167.3333333333px #00ff0d, 21px -7.3333333333px #a600ff, 143px -8.3333333333px #ff7300, 27px -183.3333333333px #ff2600, -137px -54.3333333333px yellow, -10px 26.6666666667px #ff00b7, -66px 53.6666666667px #44ff00, 188px 12.6666666667px #ff4000, 239px 37.6666666667px #0900ff, -208px -76.3333333333px #00ffee, -109px 61.6666666667px #00f2ff;
    }
}
@keyframes bang {
    to {
        box-shadow: 152px 49.6666666667px #00fbff, 227px -181.3333333333px #fbff00, -180px 28.6666666667px #00ff2b, 153px -260.3333333333px #ffdd00, 119px -200.3333333333px #8400ff, -145px -331.3333333333px #00ffaa, 128px -263.3333333333px #ffa600, 82px -39.3333333333px #00ff55, 116px -311.3333333333px #00ff44, 171px 65.6666666667px #ff0009, -149px -148.3333333333px #ff00dd, 47px -217.3333333333px #7300ff, 224px -78.3333333333px #0059ff, 112px -92.3333333333px #ff00a6, 102px -277.3333333333px #ff0055, 105px -37.3333333333px #5100ff, 198px -193.3333333333px #2200ff, 189px -172.3333333333px #fffb00, -175px 0.6666666667px #00a6ff, 3px -176.3333333333px #6600ff, -99px -124.3333333333px #00f7ff, 219px -123.3333333333px #1a00ff, -22px -219.3333333333px #ff0400, 219px -208.3333333333px #0022ff, 98px 64.6666666667px #6a00ff, 94px -122.3333333333px #00ffb7, 23px -113.3333333333px #ff0015, -187px -291.3333333333px #ff00b3, 220px 60.6666666667px #9dff00, 103px -234.3333333333px #ff3c00, 194px -316.3333333333px #0059ff, 1px -59.3333333333px #8800ff, 116px -157.3333333333px #ff0900, -163px -40.3333333333px #ff00a2, 193px -128.3333333333px #ff2b00, 64px -125.3333333333px #0026ff, -217px -312.3333333333px #00ff1e, 18px -75.3333333333px #ff00aa, -221px -36.3333333333px #11ff00, 49px -260.3333333333px darkorange, -249px 42.6666666667px #00ff1e, -133px -208.3333333333px #ff5900, 106px -71.3333333333px #006fff, 144px -305.3333333333px blue, -152px -219.3333333333px #ff8400, -83px -26.3333333333px #00ff4d, 111px -304.3333333333px lime, -95px -27.3333333333px #00ffcc, 79px -237.3333333333px #a600ff, -245px 46.6666666667px yellow, -217px -167.3333333333px #00ff0d, 21px -7.3333333333px #a600ff, 143px -8.3333333333px #ff7300, 27px -183.3333333333px #ff2600, -137px -54.3333333333px yellow, -10px 26.6666666667px #ff00b7, -66px 53.6666666667px #44ff00, 188px 12.6666666667px #ff4000, 239px 37.6666666667px #0900ff, -208px -76.3333333333px #00ffee, -109px 61.6666666667px #00f2ff;
    }
}
@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

/*Letras NEON*/
@font-face {
  font-family: neon;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}

.contBannerOE {
  display: table-cell;
  text-align: center;
  vertical-align: middle;

}

.neon {
  font-family: neon;
  color: #FB4264;
  font-size: 3vw;
  line-height: 3vw;
  text-shadow: 0 0 3vw #F40A35;
}

.flux {
  font-family: neon;
  color: #426DFB;
  font-size: 3vw;
  line-height: 3vw;
  text-shadow: 0 0 3vw #2356FF;
}

.neon {
  animation: neon 1s ease infinite;
  -moz-animation: neon 1s ease infinite;
  -webkit-animation: neon 1s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}

.flux {
  animation: flux 2s linear infinite;
  -moz-animation: flux 2s linear infinite;
  -webkit-animation: flux 2s linear infinite;
  -o-animation: flux 2s linear infinite;
}

@keyframes flux {
  0%,
  100% {
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #28D7FE;
  }
  50% {
    text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
    color: #146C80;
  }
}

/* ProducTemporada.php */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

.c {
  min-width: 500px;
  width: 500px;
  height: 500px;
  border-radius: 12px;
  padding: 20px;
  padding-bottom: 100px;
  
  box-shadow: 0 8px 48px 2px hsla(10 6% 15% / .4);

  display: flex;
  align-items: flex-end;
  justify-content: center;

  position: relative;
  overflow: hidden;
  background: hsl(0 0% 90%);
  box-sizing: border-box;
  padding-top: 150px;
  padding-bottom: 150px;



}

.ci {
  position: absolute;
  top: 0;
  left: 0;

  width: inherit;
  height: inherit;
  transform-origin: left 50%;

  background: inherit;

  z-index: var(--z);
  transition: .3s ease-out;
}

.ci img {
  -moz-user-select: none;
  user-select: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ch {
  position: absolute;
  top: 70%;
  left: 4%;
  transform: translateY(-50%);

  font-size: 2rem;
  color: hsla(var(--h) var(--s) var(--l) / .8);
  text-shadow: 0 2px 10px hsla(var(--h) var(--s) 10% / .3);
}

.c > .inputSliderTemp {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -10;
}

.c > .label {
  width: 10%;
  height: 10px;
  margin-right: 4px;
  border-radius: 20px;

  background: hsla(0 0% 90% / .3);
  cursor: pointer;

  position: relative;
  z-index: 10;
}

.c > .label:last-child {
  margin-right: 0;
}

.c > .inputSliderTemp:checked+.label {
  background: linear-gradient(to right,
    hsla(var(--hue) 80% 70% / .7),
    hsla(calc(var(--hue) + 30) 80% 50% / .7));
}

.c > .inputSliderTemp:not(:checked)+.label+.ci {
  transform: translateX(-100%);
  opacity: 0;
}

.c > .inputSliderTemp:checked+.label+.ci~.ci {
  transform: translateX(100%);
}

.c > .inputSliderTemp:not(:checked)+.label+.ci {
  transition: 0;
}




.cutieSmall{
    font-family: "Handlee", cursive !important;
    font-weight: bold !important;
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 50px;


}

.cutieMed{
    font-family: "Handlee", cursive !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 50px;


}




/* linea_producto.php */
/* Banner de la línea de producto */
#bannerLineaSeleccionada {
    width: 100%;
    height: 500px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 40%;
    margin-bottom: 0; /* Elimina espacio innecesario */
    padding-bottom: 0;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    #bannerLineaSeleccionada {
        height: 150px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
    }
}

@media (max-width: 480px) {
    #bannerLineaSeleccionada {
        height: 140px;
        margin-top: 35px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
    }
}


  /* Carrusel Lineas Sugeridas en liea_producto.php */
/* From Uiverse.io by satyamchaudharydev */ 
/* this card is inspired from this - https://georgefrancis.dev/ */

.cardLS {
    --border-radius: 0.75rem;
    --primary-color: #1046f8;
    --secondary-color: #3c3852;
    width: 210px;
    font-family: "Arial";
    padding: 1rem;
    cursor: pointer;
    border-radius: var(--border-radius);
    background: #f1f1f3;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);
    position: relative;
    height: 150px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    margin-right: 100px;

    
    margin-bottom: 100px;
  }
  
  .cardLS > * + * {
    margin-top: 1.1em;
  }
  
  .cardLS .card__contentLS {
    color: var(--secondary-color);
    font-size: 0.86rem;
  }
  
  .cardLS .card__titleLS {
    padding: 0;
    font-size: 1.3rem;
    font-weight: bold;
  }
  
  .cardLS .card__dateLS {
    color: #6e6b80;
    font-size: 0.8rem;
  }
  
  .cardLS .card__arrowLS {
    position: absolute;
    background: var(--primary-color);
    padding: 0.4rem;
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    bottom: 0;
    right: 0;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .cardLS svg {
    transition: 0.2s;
  }
  
  /* hover */
  .cardLS:hover .card__titleLS {
    color: var(--primary-color);
    text-decoration: underline;
  }
  
  .cardLS:hover .card__arrowLS {
    background: #111;
  }
  
  .cardLS:hover .card__arrowLS svg {
    transform: translateX(3px);
  }


  #contCardLS{
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
  }

/* Container de tarjetas de productos por linea seleccionada */
    #contCardPorLinea{

        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        background-color: #fcfcfc;
    }


/* tarjetas de linea de productos en productos.php - LLeva a los productos de cada linea*/
.card.pfl-card {
    width: 300px;
    height: 200px;
    position: relative;
    padding: 25px;
    background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%), #FFFFFF;
    box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 23px;
    transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);
    cursor: pointer;
    margin-bottom: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 25px;
    
  }

  .card:hover.pfl-card {
    transform: scale(1.05);
    
  }
  

  #contCardPFL{
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 50px;
    
  }

  #titleLineasProd{
    margin-top: 20px; 
    display: block;
    margin-bottom: 30px;
    color: #00154c !important;
  }

  #contCardLineasProd{
    width: 100%;
    height: auto;
    /*margin-top: 30px;*/
    margin-top: calc(40% + 60px);
  }




.botonCart {
    position: absolute;
    top: 15px; 
    right: -25px; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background-color: transparent; 
    cursor: pointer;
    text-decoration: none; 
    transition: background-color 0.3s, color 0.3s;

}
.botonCart img:hover{
    width: 80px;
    height: 80px;
}


.botonCart img{
  width: 70px;
  height: 70px;
}

.card-body{
    padding-top: 0;
}

/* Controles del carrusel sin fondo ni sombra */
.carousel-control-prev,
.carousel-control-next {
    background: none !important; /* Quita fondo */
    border: none !important;
    width: auto; /* Evita que sea un bloque ancho */
    opacity: 0; /* Ocultos por defecto */
    transition: opacity 0.3s ease;
}

/* Mostrar controles solo al pasar el mouse */
#carouselSuperior:hover .carousel-control-prev,
#carouselSuperior:hover .carousel-control-next {
    opacity: 1;
}

/* Quitar imagen por defecto de Bootstrap */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none !important;
}

/* Flechas personalizadas */
.carousel-control-prev-icon::after {
    content: '❮';
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.carousel-control-next-icon::after {
    content: '❯';
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.carousel-control-prev .visually-hidden,
.carousel-control-next .visually-hidden {
    display: none !important;
}

/*NUEVOS ESTILOS PARA FORMULARIO DE COMPRA 15/08/2025*/


/* ===== ESTILOS MEJORADOS PARA FORMULARIO DE REGISTRO ===== */

/* Contenedor principal del modal */
#ModalForm-RegistroDatosUsu {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: none;
    background: rgba(255, 255, 255, 0.75)
    position: relative;
    overflow: hidden;
}

/* Overlay con patrón sutil */
#ModalForm-RegistroDatosUsu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="50" cy="10" r="1" fill="rgba(255,255,255,0.02)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
    z-index: 1;
}




/* Header del modal */
.modal-header {
    background: rgba(255, 255, 255, 0.75) !important; /* más transparente */
    backdrop-filter: blur(14px) !important; /* más difuminado */
    -webkit-backdrop-filter: blur(14px) !important;
    color: #2c3e50 !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px 15px 0 0;
    position: relative;
    z-index: 2;
    padding: 1.5rem 2rem;
}

.modal-title {
    color: #2c3e50 !important;
    font-weight: 600;
    font-size: 1.4rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Body del modal */
.modal-body {
     background: rgba(255, 255, 255, 0.75) !important; /* más transparente */
    backdrop-filter: blur(14px) !important; /* más difuminado */
    -webkit-backdrop-filter: blur(14px) !important;
    color: #2c3e50 !important; 
    position: relative;
    z-index: 2;
    padding: 2rem;
}

/* Footer del modal */
.modal-footer {
    background: rgba(255, 255, 255, 0.75) !important; /* más transparente */
    backdrop-filter: blur(14px) !important; /* más difuminado */
    -webkit-backdrop-filter: blur(14px) !important;
    color: #2c3e50 !important; 
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 15px 15px;
    position: relative;
    z-index: 2;
    padding: 1.5rem 2rem;
}

/* Textos y labels mejorados */
.classDark, 
.darkSubTitulos {
    color: #2c3e50 !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.darkSubTitulos {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #3498db;
    display: inline-block;
}

/* Separadores */
.HrDark, hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    margin: 1.5rem 0;
}

/* Campos de formulario mejorados */
.form-floating {
    margin-bottom: 1rem;
    position: relative;
}


/* Campos con más padding para acomodar los labels más grandes */
.form-control, 
.form-select {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(52, 152, 219, 0.3) !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    padding: 1.4rem 0.75rem 0.7rem !important; /* Más espacio arriba */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    min-height: 62px !important; /* Altura mínima más grande */
    color: #2c3e50 !important;
    font-weight: 500 !important;
}


.form-control:focus, 
.form-select:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25), 
                0 4px 16px rgba(52, 152, 219, 0.2) !important;
    transform: translateY(-2px);
}

.form-control:hover:not(:focus), 
.form-select:hover:not(:focus) {
    border-color: rgba(52, 152, 219, 0.5) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== AJUSTES PARA LABELS MÁS GRANDES Y SEPARADOS ===== */

/* Labels más grandes y mejor posicionados */
.form-floating > label,
.form-floating label,
label[for="departamento"],
label[for="ciudad"], 
label[for="localidad"],
label[for="telefono"],
label[for="correo"],
label[for="metodoPago"],
label[for="franjaProgramada"],
label[for="metodo"],
label[for="direccion"],
label[for="comentario"],
label[for="nombreCliente"] {
    color: #5a6c7d !important;
    font-weight: 600 !important;
    font-size: 1rem !important; /* Aumentado de 0.95rem */
    padding-left: 0.75rem !important;
    padding-top: 1.8rem !important; /* Más separación del campo */
    transition: all 0.3s ease !important;
    background: transparent !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
}


/* Labels cuando están flotando (activos) - MÁS GRANDES */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.form-floating .form-select ~ label,
#departamento ~ label,
#ciudad ~ label,
#localidad ~ label,
#telefono ~ label,
#correo ~ label,
#metodoPago ~ label,
#franjaProgramada ~ label,
#metodo ~ label,
#direccion ~ label,
#comentario ~ label,
#nombreCliente ~ label {
    color: #3498db !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important; /* Más grande que antes */
    transform: scale(1) translateY(-0.2rem) translateX(0.1rem) !important; /* Más separación */
    padding-top: 0.3rem !important;
    opacity: 1 !important;
}

/* Forzar estilos en todos los select y sus labels específicamente */
select.form-select ~ label {
    color: #5a6c7d !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    opacity: 1 !important;
}

/* Iconos en labels */
.form-floating > label i {
    margin-right: 0.5rem;
    color: #3498db;
    font-size: 1rem;
}

/* Textarea especial */
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Checkboxes mejorados */
.form-check {
    margin: 1rem 0;
    padding-left: 2rem;
}

.form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
    margin-left: -2rem;
    border: 2px solid #3498db;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.form-check-input:checked {
    background-color: #3498db;
    border-color: #3498db;
    transform: scale(1.1);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.form-check-label {
    color: #2c3e50 !important;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
}

.form-check-label:hover {
    color: #3498db !important;
}

/* Links en labels */
#LinkTerminos {
    color: #e74c3c;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

#LinkTerminos:hover {
    color: #c0392b;
    text-decoration: underline;
}

/* Botones mejorados */
.btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-warning {
    background: linear-gradient(45deg, #f39c12, #e67e22) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(45deg, #e67e22, #d35400) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
}

.bg-danger {
    background: linear-gradient(45deg, #e74c3c, #c0392b) !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.bg-danger:hover {
    background: linear-gradient(45deg, #c0392b, #a93226) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.btn-success {
    background: linear-gradient(45deg, #27ae60, #229954) !important;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-success:hover {
    background: linear-gradient(45deg, #229954, #1e8449) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}
.btn-outline-secondary {
    background: linear-gradient(45deg, #4FE3DC, #229954) !important;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}
.btn-outline-secondary:hover {
    background: linear-gradient(45deg, #4FE3DC, #1e8449) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

/* Box de totales mejorado */
#BoxTotales {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
    border: 2px solid rgba(52, 152, 219, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.SonBoxTotalText1 {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
}

.SonBoxTotalNum1 {
    font-weight: 700;
    color: #27ae60;
    font-size: 1.1rem;
    text-align: right;
}

/* Pequeños textos informativos */
small {
    color: #FFFFFF !important;
    font-weight: 500;
    line-height: 1.4;
}

small code {
    background: rgba(201, 91, 91);
    color: #f7f2f2 !important;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Listas informativas */
ul {
    padding-left: 1.5rem;
}

ul li {
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-weight: 500;
    line-height: 1.5;
}

ul li i {
    color: #3498db;
    margin-right: 0.5rem;
    width: 1.2rem;
    text-align: center;
}

/* Contenedor de programación de pedido */
#containerProgramaPed {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

#containerProgramaPed h5 {
    margin-bottom: 1rem;
}

#containerProgramaPed small {
    color: rgba(255, 255, 255, 0.9) !important;
}

#containerProgramaPed .form-floating > label {
    color: #2c3e50 !important;
}

/* Responsividad mejorada */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-body {
        padding: 1.5rem 1rem;
    }
    
    .modal-header,
    .modal-footer {
        padding: 1rem;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    #BoxTotales {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .SonBoxTotalNum1 {
        text-align: center;
    }
}

/* Animaciones suaves */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-floating {
    animation: fadeInUp 0.6s ease-out backwards;
}

.form-floating:nth-child(1) { animation-delay: 0.1s; }
.form-floating:nth-child(2) { animation-delay: 0.2s; }
.form-floating:nth-child(3) { animation-delay: 0.3s; }
.form-floating:nth-child(4) { animation-delay: 0.4s; }
.form-floating:nth-child(5) { animation-delay: 0.5s; }

/* Mejoras adicionales para mejor UX */
.form-control::placeholder {
    color: rgba(90, 108, 125, 0.6);
    font-style: italic;
}

/* Estados de validación mejorados */
.form-control:invalid {
    border-color: rgba(231, 76, 60, 0.5) !important;
}

.form-control:valid {
    border-color: rgba(39, 174, 96, 0.5) !important;
}

/* Mejora del botón especial PDV */
.btnx {
    background: linear-gradient(45deg, #667eea, #764ba2);
    border: none;
    border-radius: 25px;
    padding: 0.75rem 2rem;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.btnx:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btnx:active {
    transform: translateY(-1px);
}


/* ===== CORRECCIÓN COMPLETA DEL BOTÓN CONFIRMAR PEDIDO ===== */

/* Eliminar TODOS los estilos previos del botón */
.btn-warning,
.bg-warning,
#HacerPedido,
#TelonHacerPedido {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 1rem 2rem !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Estado DESHABILITADO - GRIS */
#HacerPedido:not(.btn-enabled),
#TelonHacerPedido:not(.btn-enabled),
#HacerPedido.btn-disabled,
#TelonHacerPedido.btn-disabled {
    background-color: #6c757d !important;
    background-image: none !important;
    color: #ffffff !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    border-color: #6c757d !important;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

#HacerPedido:not(.btn-enabled):hover,
#TelonHacerPedido:not(.btn-enabled):hover,
#HacerPedido.btn-disabled:hover,
#TelonHacerPedido.btn-disabled:hover {
    background-color: #6c757d !important;
    background-image: none !important;
    transform: none !important;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

/* Estado HABILITADO - AMARILLO BRILLANTE */
#HacerPedido.btn-enabled,
#TelonHacerPedido.btn-enabled {
    background-color: #ffc107 !important;
    background-image: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
    color: #212529 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    border-color: #ffc107 !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4) !important;
    font-weight: 800 !important;
}

#HacerPedido.btn-enabled:hover,
#TelonHacerPedido.btn-enabled:hover {
    background-color: #ff8f00 !important;
    background-image: linear-gradient(135deg, #ff8f00 0%, #f57c00 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.5) !important;
    border-color: #ff8f00 !important;
}

/* Efecto de brillo en el botón habilitado */
#HacerPedido.btn-enabled::before,
#TelonHacerPedido.btn-enabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* ===== MEJOR COMPATIBILIDAD CON BOOTSTRAP 4 ===== */

/* Sobrescribir estilos específicos de Bootstrap 4 que pueden interferir */
.form-floating .form-control:not(:placeholder-shown),
.form-floating .form-control:focus {
    padding-top: 1.4rem !important;
    padding-bottom: 0.7rem !important;
}

.form-floating .form-control:not(:placeholder-shown) ~ label,
.form-floating .form-control:focus ~ label {
    opacity: 1 !important;
    transform: scale(0.95) translateY(-0.8rem) translateX(0.15rem) !important;
    color: #3498db !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

.form-floating .form-select ~ label {
    opacity: 1 !important;
    color: #3498db !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    transform: scale(0.95) translateY(-0.8rem) translateX(0.15rem) !important;
}

/* Asegurar que los selects también funcionen correctamente */
.form-select:focus ~ label,
.form-select:not([size]):not([multiple]) ~ label {
    color: #3498db !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    opacity: 1 !important;
}

/* Mejorar los estados focus de todos los campos */
.form-control:focus, 
.form-select:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #3498db !important;
    color: #2c3e50 !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25), 0 4px 16px rgba(52, 152, 219, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Estados hover mejorados */
.form-control:hover:not(:focus), 
.form-select:hover:not(:focus) {
    border-color: rgba(52, 152, 219, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}




/* Sobrescribir cualquier estilo de Bootstrap que esté interfiriendo */
.form-select:focus ~ label,
.form-select:not([size]):not([multiple]) ~ label {
    color: #3498db !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    opacity: 1 !important;
}


/* Header: Logo + Iconos alineados */
#nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
}

/* Contenedor de los iconos */
#nav .icons-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Ajuste de íconos */
#iconBag,
.header-register i {
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

/* Badge del carrito */
#bagdeProductos {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 50%;
  background: red;
  color: white;
}

/* Responsive: ocultar texto */
@media (max-width: 768px) {
  .header-register span {
    display: none;
  }
}




/* --- FOOTER --- */
#containerPiePaginaPpal {
  background: #00BBCC;
  color: #fff;
}

#containerPiePaginaPpal h5 {
  font-weight: bold;
  margin-bottom: 10px;
}

.linkFooter {
  text-decoration: none;
  color: #ddd;
  font-size: 0.95rem;
}

.linkFooter:hover {
  color: #ffd700;
}

.footer-social a {
  color: #fff;
  margin: 0 10px;
  font-size: 1.6rem;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #ffd700;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .footer-social {
    margin-top: 15px;
  }

  #containerPiePaginaPpal .row {
    text-align: center;
  }
}

/* ======================================= */
/* SOLUCIÓN FINAL CON FLOAT (MÁS SEGURO) */
/* ======================================= */

/* 1. Botones: Fuerza la alineación horizontal */
.btn-aplicar, .btn-reset {
    /* Clave: Pone los botones uno al lado del otro */
    float: left;
    /* Anula cualquier ancho del 100% */
    width: auto !important; 
    /* Margen a la derecha para separarlos */
    margin-right: 10px; 
}

/* 2. Contenedor: Limpia el efecto float para que los elementos siguientes no se suban */
.campo-filtro::after {
    content: "";
    display: table;
    clear: both;
}

/* Opcional: Elimina cualquier margen vertical restante del botón */
.btn-aplicar {
    margin-bottom: 0 !important;
}
/* ======================================= */
/* ANCHO FORZADO SÓLO PARA OFERTAS Y PROMOS (FINAL) */
/* ======================================= */

@media (min-width: 768px) {
    .seccion-ofertas-y-promos .col-md-3 {
        flex-basis: 14.5% !important; 
        max-width: 14.5% !important;
        
        /* Añade espacio vertical (12px) para separar las filas de tarjetas */
        margin-bottom: 35px !important; 

        /* Mantiene el padding horizontal mínimo para el efecto delgado */
        padding-left: 2px !important; 
        padding-right: 2px !important; 
        margin-top: 0 !important; /* Aseguramos que solo haya margen abajo */
    }
}
/* ======================================= */
/* ESTILOS DE CONTROL DE CANTIDAD (UNIFICADOS) */
/* ======================================= */
#totalDiv {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

#cajaControles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 25px;
    padding: 5px 15px;
    border: 1px solid #dee2e6;
}


.icontroles {
    cursor: pointer;
    padding: 8px 12px;
    background: #006B7D; /* Azul petróleo */
    color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 14px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Unificar altura sin cortar contenido === */
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  min-height: 460px; /* 🔹 altura mínima uniforme */
  box-sizing: border-box;
  overflow: hidden;
}

/* Contenedor de imagen */
.card .product-image-container {
  flex: 0 0 220px; /* altura reservada para la imagen */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fff;
  padding: 5px;
}

/* Imagen proporcional (sin recorte) */
.card .product-image-container img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  transition: transform 0.3s ease;
}

/* Efecto hover opcional */
.card .product-image-container:hover img {
  transform: scale(1.03);
}

/* Cuerpo de la card */
.card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 10px;
}

/* Botón siempre al final */
.card #box-btn {
  margin-top: auto;
}

/* Ajuste responsive */
@media (max-width: 768px) {
  .card {
    min-height: 420px;
  }
  .card .product-image-container {
    flex: 0 0 180px;
  }
}
/* === Ajuste final: imágenes centradas y proporcionadas === */

/* Contenedor uniforme en todas las cards */
.card,
.card-promo,
.card-fix-oe,
.card-oferta-especial {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* evita empuje hacia abajo */
  height: auto !important;
  min-height: 430px; /* asegura uniformidad sin cortar */
  box-sizing: border-box;
}

/* Contenedor de imagen (único y corregido) */
.card .product-image-container,
.card-promo .product-image-container,
.card-fix-oe .product-image-container,
.card-oferta-especial .product-image-container {
  position: relative;
  width: 100%;
  height: 180px !important; /* alto global uniforme */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  background: #fff;
  padding: 5px;
}

/* Imagen principal y hover */
.card .product-image-container img,
.card-promo .product-image-container img,
.card-fix-oe .product-image-container img,
.card-oferta-especial .product-image-container img {
  width: auto !important;
  height: 100% !important;
  max-height: 170px !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  margin: 0 auto; /* centra la imagen horizontalmente */
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center center; /* asegura que el zoom salga del centro */
}

/* Hover centrado sin desplazamiento */
.card .product-image-container:hover img,
.card-promo .product-image-container:hover img,
.card-fix-oe .product-image-container:hover img,
.card-oferta-especial .product-image-container:hover img {
  transform: scale(1.05);
}

/* === EFECTO HOVER SIN JITTER, IMAGEN FIJA === */
.product-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fff;
  width: 100%;
  height: 180px;
}

/* la imagen base permanece inmóvil */
.product-image-container img {
  width: auto;
  height: 100%;
  max-height: 170px;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;   /* evita repintar por eventos */
}

/* capa de zoom */
.product-image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-image: var(--img-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: scale(1);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* en hover, la capa se agranda, la imagen no se toca */
.product-image-container:hover::after {
  opacity: 1;
  transform: scale(1.04);
}

/* === CENTRADO VISUAL DE LOS TOTALES === */
#cajaCalculo,
.contTotalCard,
.total-container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

#textTotalCard,
.contTotalCard .total-label {
  text-align: center;
  margin-bottom: 3px;
  font-weight: 600;
  color: #333;
}

.ResultCalculo,
.contTotalCard .total-value input {
  text-align: center !important;
  font-size: 1.1rem;
  font-weight: bold;
  color: #28a745;
  border: none;
  background: transparent;
}
/* === CENTRADO VISUAL PERFECTO DEL BLOQUE TOTAL === */
.contTotalCard {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.1; /* compacta la distancia vertical */
}

.contTotalCard .total-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 2px;
}

.contTotalCard .total-value {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  margin: 0;
  padding: 0;
}

.contTotalCard .total-value input.ResultCalculo {
  text-align: center !important;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 1.15rem;
  color: #28a745 !important;
  line-height: 1; /* evita salto visual */
  padding: 0;
  margin: 0;
}
/* === CORRECCIÓN DE CENTRADO EN SECCIÓN PROMOCIONES === */
.card-promo .contTotalCard {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  margin: 10px auto;
  padding: 0;
}

.card-promo .contTotalCard .total-label {
  text-align: center !important;
  width: 100%;
  margin-bottom: 3px;
}

.card-promo .contTotalCard .total-value {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

.card-promo .contTotalCard .total-value input.ResultCalculo {
  text-align: center !important;
  width: auto !important;
  font-weight: bold;
  font-size: 1.1rem;
  color: #28a745 !important;
  border: none;
  background: transparent;
}
/* === CORRECCIÓN FINAL DE CENTRADO SOLO PARA PROMOCIONES === */
.card-promo #cajaCalculo,
.card-promo #totalDiv,
.card-promo .contTotalCard {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.card-promo .contTotalCard .total-label {
  text-align: center !important;
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 3px !important;
}

.card-promo .contTotalCard .total-value {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

.card-promo .contTotalCard .total-value input.ResultCalculo {
  text-align: center !important;
  font-weight: bold;
  font-size: 1.15rem;
  color: #28a745 !important;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

/* === BOTÓN AGREGAR: color azul petróleo uniforme === */
#btn-agregarOpc,
button#btn-agregarOpc,
.card #btn-agregarOpc,
.card-promo #btn-agregarOpc,
.card-fix-oe #btn-agregarOpc,
.card-oferta-especial #btn-agregarOpc {
  background-color: #006B7D !important; /* 🔸 azul petróleo */
  border: none;
  color: white !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Hover efecto */
#btn-agregarOpc:hover,
button#btn-agregarOpc:hover,
.card #btn-agregarOpc:hover,
.card-promo #btn-agregarOpc:hover,
.card-fix-oe #btn-agregarOpc:hover,
.card-oferta-especial #btn-agregarOpc:hover {
  background-color: #004D5A !important; /* tono más oscuro al pasar el mouse */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* === UNIFICAR COLOR DE TOTAL EN TODAS LAS TARJETAS === */

/* Total general en cards (todas las secciones) */
.contTotalCard .ResultCalculo,
.total-container .ResultCalculo,
#cajaCalculo .ResultCalculo {
  color: #165B33 !important;      /* Azul igual al botón + / - */
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  text-align: center !important;
}

/* Etiqueta "Total" o "Total Aprox" en negro para contraste */
.contTotalCard .total-label,
.total-container #textTotalCard,
#textTotalCard {
  color: #000 !important;
  font-weight: 600 !important;
}
/* === Corregir palabra "OFERTA !" en las tarjetas de promo === */
.promo #text_promo {
  color: #000 !important;     /* 🔹 texto negro permanente */
  font-weight: 700 !important;
  background: transparent !important; /* 🔹 sin fondo de color */
  text-shadow: none !important;       /* 🔹 sin brillo ni sombra */
}

/* Evita que cambie al pasar el mouse */
.promo:hover #text_promo {
  color: #000 !important;
}
/* === CORRECCIÓN COMBINADA: mantiene el botón alineado en todas las vistas === */

/* 🔹 Aplica solo cuando la card NO tiene clases especiales (por los filtros) */
.card:not(.card-oferta-especial):not(.card-fix-oe):not(.card-promo) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card:not(.card-oferta-especial):not(.card-fix-oe):not(.card-promo) .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.card:not(.card-oferta-especial):not(.card-fix-oe):not(.card-promo) .card-body form {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.card:not(.card-oferta-especial):not(.card-fix-oe):not(.card-promo) #box-btn {
  margin-top: auto !important;
  margin-bottom: 10px !important;
  position: relative !important;
  top: 0 !important;
  align-self: center;
}

/* 🔹 Para las secciones normales (mantiene su posición actual) */
.card-oferta-especial #box-btn,
.card-fix-oe #box-btn,
.card-promo #box-btn {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  position: relative;
  top: -20px; /* Ajusta si lo quieres más arriba o abajo */
}
/* ==== ESTILO NAVIDEÑO PARA TÍTULOS ==== */
.titulo-navideno {
  font-family: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #c62828;
  text-align: center;
  position: relative;
  margin: 40px 0;
  padding: 20px 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  
}