/* Para Chrome, Safari y navegadores basados en Webkit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* Para Firefox */
input:-moz-autofill,
input:-moz-autofill-preview {
    background-color: transparent !important;
    box-shadow: 0 0 0 30px white inset !important;
    
}
  
  
  .selectdesea {
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 0px 0px 5px #ccc;
  }
  .selectdesea:focus {
    outline: none;
    box-shadow: 3px 3px 3px #b6b6b6;
  }
.cajabusca {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 10px;
    width: 500px;
  }
  
  .cajabusca input {
    width: 100%;
    border: none;
    outline: none;
    padding: 5px;
    font-size: 16px;
  }
  
  .cajabusca button {
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
  }
  
  .cajabusca button:hover {
    background-color: #ddd;
  }
.div-caja:hover{
    border: 3px solid #ddd;
    /*box-shadow: 2px 2px 2px #9c9c9c;*/

}
.div-caja {
    border: 3px solid #ddd;
    border-radius: 20px;
    padding: 3px;
    margin: auto;
  }
   
  cajabusca{
    height:47px;
    box-shadow: 0px 0px 1px 1px rgb(204, 204, 204);
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px;
    transition: .5s;
    /*overflow: hidden;*/
}
cajabusca:hover{
    height:47px;
    box-shadow: 0px 0px 3px 2px rgb(179, 179, 179); 
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px;
}

.btntrueque {
    height: 23px;
    background-color:#000000;
    margin:auto;
    width: 30px;
    border-radius: 25px;
  }
 
.carousel-control-prev-icon, .carousel-control-next-icon {
    /*filter: invert(108%);*/
    border-radius: 50%;
    background-color:green;
    
  }
  hr {
    
    border: 0;
    border-top: 2px solid green; 
    border-bottom: 2px solid #000000;
    height:0;    
  }

  
.logobuscar{
    margin-left: 2px;
}

input[type="text"]{
 padding:10px;
 outline:none;
 border: none;
 background-color: #f0f0f0;
 width: 200px; 
}

/* cambia el color de fondo del input cuando se seleciona autocompeltado - caja de bùsqueda */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #f0f0f0 inset;
}

.galeria {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.galeria img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}


/*CONTENIDO PRINCIPAL*/
#contenido {
    width: 80%;
    margin:auto;
    max-width: 1280px;
    min-height: 100vh;
}

.productos {
    display: flex;
    flex-wrap: wrap;
}

.producto {
    width: 25%;
    margin-top: 20px;

}

.producto img {
    width: 100%;
    height: 200px;
    object-fit: cover;

    border-radius: 0px;
    padding: 05px;
    /*box-shadow: 0px 01px 01px rgb(0, 0, 0);*/
}

.img1 {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    padding: 0px
}

.producto .detalle {
    border-radius: 20px;
    padding: 10px;
}

.producto .contenedor_producto {
    background-color: rgb(255, 255, 255);
    width: 94%;
    margin: auto;

    border-radius: 10px;
    padding: 05px;
    box-shadow: 0px 01px 01px rgb(0, 0, 0);
}

.contenedor_producto:hover{
    border-radius: 20px;
    padding: 05px;

    box-shadow: 01px 02px 02px 08px rgb(229, 229, 229); 
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}


.btn {
    padding:5px 10px;
    color: white;
    background-color: #000000;
    border: none;
    border-radius: 1px;
    width:100%;
    border-radius: 20px;
    font-size: 14;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
.btn:hover{
    color: rgb(0, 0, 0);
    color: white;
    background-color: #026C36;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

/*Tablets*/
@media (max-width: 1024px) {
    .galeria {
        grid-template-columns: 1fr 1fr;
    }
    .producto {
        width: 50%;
    }

}

.accordion, .accordion * {
    border:none;
    margin-bottom: 0;
    /*height: 10px;*/
}

.accordion .btn {
    width: 100%;
    font-weight: bold;
    color: #004987;
    padding: 0;
  }

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
    
}
/****************************************/
/* codigo para personalizar el select de lo items del compras*/
.select-css {
	/*display: block;*/
	font-size: 14px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	padding: .6em 1.4em .5em .8em;


	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #ffffff;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}
.select-css:hover {
    border-radius: 05px;
	border-color: #888;
    ;
}

/*Smart phone*/
/*@media (max-width: 480px) { */
@media (min-width: 320px) and (max-width: 767.98px) {  
    body{
        /*tamaño de texto para los todo  en tipo tablet*/
        /*background: #001eff;*/
        font-size: 12;
    }
    /*tamaño de texto para los botones  en tipo tablet*/
    .btn{
        font-size: 12 ;
    }
    

    .galeria {
        grid-template-columns: 1fr;
    }


    
@keyframes animacion_producto_mobile {
        0% {
            transform: scale(0.1); /*0-1*/
            /*opacity: 0 - 1*/
        }

        80% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }

    .producto {
        width: 100%;
        animation: animacion_producto_mobile 0.8s;
    }
}


/*Tablet */
@media (min-width: 767.98px) and (max-width: 991.98px) {
    body{
        /*tamaño de texto para los todo  en tipo tablet*/
        /*background: #1eff00;*/
        font-size: 12;
        /*tamaño de texto para los botones  en tipo tablet*/
        .btn{
            font-size: 14 ;
        }
    }
}

/*laptops */
@media screen and (min-width:1024px) {
    body{
        /*tamaño de texto para los todo  en tipo laptop*/
        /* background: #fffb00; */
        font-size: 12;
        /*tamaño de texto para los botones  en tipo laptop*/
        .btn{
            font-size: 14 ;
        }
    }
    
}

/*Desktop */
@media screen and (min-width:1200px) {
    body{
        /*tamaño de texto para los todo  en tipo laptop*/
        /*background: #ff8800; */
        font-size: 12;
        /*tamaño de texto para los botones  en tipo laptop*/
        .btn{
            font-size: 14 ;
        }
       /* 
        caja{
            width: 1200px; 
        }
        #formcaja{
            font-size: 16px;
            width: 800px;

        }
        #bregistrar{
            width: 100;
        }*/
    }
    
}


/* XX-Large devices (larger desktops, 1400px and up tvs) */
@media (min-width: 1400px) { 
    body{
        /*tamaño de texto para los todo  en tipo laptop*/
        /* background: #ff0000;*/
        font-size: 14;
        /*tamaño de texto para los botones  en tipo laptop*/
        .btn{
            font-size: 14 ;
        }
    }
}

/* Estlos paginador  */
.pagination li {
    margin-left: .25rem;
    margin-right: .25rem;
  }
  
  .pagination .page-item.active .page-link {
    background: #026C36;
  }
  .pagination li .page-link {
    border-radius: .25rem;
    border: none;
    min-width: 2.25rem;
    text-align: center;
    color: #000000;
  }
  .pagination li.active .page-link,
  .pagination li .page-link:hover {
    background: #c5c5c5;
    color: #ffffff;
    font-weight: bold;
  }
  
  /*para el tamaño de los modales*/
  .modal-dialog {
    display: table;
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
  }


/* Código para ocultar y mostra el indicator*/  
.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator{
    display:inline;
}

.my-accordion-button {
    background-color:#026C36;
}