* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    font-family: "Roboto", Arial, sans-serif;
    color: #000000;
}

h1 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
}

.cuerpo {
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26), 0 2px 10px rgba(0, 0, 0, 0.26);
    border-radius: 3px;
    padding: 0;
    margin: 0 auto;
    max-width: 1070px;
    width: 90%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    /*margin-right: -15px;
    margin-left: -15px;*/
    flex-direction: row-reverse;
    margin-top: -4px;
    border-top: solid 2px orange;
}

.atencion {
    padding: 20px;
    background-color: #f5f7fa;
    width: 32%;
}

.atencion ul {
    line-height: 1.7;
    font-size: 17px;
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.atencion li {
    margin-bottom: 5px;
}

.atencion h3 {
    color: #1E4799;
    font-size: 20px;
    padding-left: 5px;
    margin-top: 10px;
    margin-bottom: 15px;
    border-bottom: solid 2px #ffa500;
}

.productos {
    background-color: #fff;
    padding: 20px;
    width: 68%;
}

h3 svg {
    fill: rgba(30, 71, 153, 1);
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

.atencion svg {
    fill: rgba(30, 71, 153, 1);
    width: 25px;
    height: 25px;
    /* margin-right: 5px; */
    margin-bottom: -5px;
}

.atencion hr {
    border: none;
    border-top: 1px solid #ccc;
    margin-bottom: 15px;
}

.atencion strong {
    color: #1E4799;
    font-weight: bold;
}

p {
    padding-left: 15px;
}

.atencion li {
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.atencion img {
    /* margin-left: 15px; */
    /* margin-right: 15px; */
    /* width: 99%; */
    height: 150px;
    border-radius: 11px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

.atencion video {
    /* margin-left: 15px; */
    /* margin-right: 15px; */
    /* width: 99%; */
    height: 150px;
    border-radius: 11px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

.informacion {
    margin-bottom: 15px;
}

.informacion p{
    margin-bottom: 10px;
    line-height: 1.4;
}

.titulo {
    color: #fff;
    max-width: 100%;
    height: auto;
    font-size: 12px;
    padding: 10px 0px 10px 20px;
    margin-bottom: 21px;
    background: #286090;
    border-radius: 10px;
    text-align: -webkit-auto;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.titulo svg{
    margin-right: 10px;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.product {
    width: 200px;
    margin: 10px;
    text-align: center;
    position: relative;
    border: solid 1px #a19696ee;
    padding: 7px;
    border-radius: 5px;
    display: flex;
    align-content: space-between;
    flex-direction: column;
    justify-content: space-around;
}

.product img {
    width: 100%;
    height: 122px;
    border-radius: 5px;
}

.product-details {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.product-name {
    font-weight: bold;
}

.product-price {
    color: green;
    margin-bottom: 5px;
    margin-top: 5px;
}

.fondo_img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.product-new-price {
    color: red;
    font-weight: bold;
    font-size: 18px;
}

.sale-label {
    background-color: red;
    color: white;
    padding: 4px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
}

.sale-label2 {
    background-color: rgb(253, 177, 35);
    color: white;
    padding: 4px;
    border-radius: 5px;
    position: absolute;
    top: 11px;
    left: 10px;
    font-size: 12px;
}

.sale-label3 {
    background-color: red;
    color: white;
    padding: 4px;
    border-radius: 5px;
    position: absolute;
    top: 11px;
    left: 10px;
    font-size: 12px;
}

.buy-button {
    width: 100%;
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-top: 5px;
    margin-bottom: 5px;
}

.buy-button:hover {
    background-color: #45a049;
}

/* Estilos adicionales para resaltar productos en oferta */
.product .sale-label {
    display: none;
}

.product .product-new-price {
  
}

.product.on-sale .sale-label {
    display: block;
}

.product.on-sale .product-price {
    color: gray;
    text-decoration: line-through;
}

/* Estilos para mostrar la descripción sobre el cuadro del producto */
.product-content {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 7px;
    border-radius: 5px;
    z-index: 1;
    text-align: center;
    transition: opacity 0.3s;
}

.product-content div{
    padding: 5px;
}

.product:hover .product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-content p {
    font-size: 18px;
    margin-bottom: 10px;
    border-bottom: solid 1px #fff;
}

.product-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.product-content ul li {
    margin-bottom: 5px;
}

.product-content a.buy-button {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    width: 100%;
    transition: background-color 0.3s;
}

.product-content a.buy-button:hover {
    background-color: #45a049;
}

/* Estilos para el resto del contenido del producto (como se mencionó anteriormente) */

.note-container {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

.note {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #286090;
    background-color: #ffa5004d;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgb(255 165 0);
    margin: 0 auto;
    width: 98%;
}

.menu {
    width: 100%;
    height: 60px;
    background: #286090;
    transition: all 0.35s;
    display: flex;
    align-items: center;
    color: #fff;
    border-bottom: solid 1px #ffa500;
    justify-content: space-between;
}

.menu h2 {
    margin-left: 15px;
    font-size: 1.8em;
}

/* Estilo para el fondo oscuro que cubre la pantalla cuando se muestra el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semi-transparente */
}

/* Estilo para el contenido del modal */
.modal-contenido {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 580px;
    max-width: 90%; /* Máximo ancho del modal */
    max-height: 90%; /* Máximo alto del modal */
    overflow: auto; /* Habilitar el desplazamiento cuando el contenido exceda el tamaño máximo */
}

/* Estilo para el botón de cerrar */
.cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
}

/* Estilo para el título del modal */
#modalTitulo {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: center;
}

#modalTitulo2 {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: center;
}

/* Estilo para el precio del producto */
#modalPrecio {
    font-size: 20px;
    font-weight: bold;
    text-align: end;
}

/* Estilo para la imagen del producto */
#modalImagen {
    display: block;
    max-width: 95%;
    height: 122px;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}

#modalNewPrecio {
    text-align: end;
}

#modalPrecio2 {
    font-size: 20px;
    font-weight: bold;
    text-align: end;
}

/* Estilo para el contenido del producto */
#modalContenido {
  margin-top: 10px;
}

/* Estilo para la lista de elementos del combo */
#modalContenido ul {
  padding-left: 20px;
}

/* Estilo para los elementos de la lista */
#modalContenido li {
  list-style-type: disc;
  margin-bottom: 5px;
}

/* Estilo para el botón "Comprar" */
#btnComprar {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #1E4799;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 20px;
}

#btnCarrito {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 20px;
}

/* Estilo para el botón "Comprar" al pasar el mouse */
#btnComprar:hover {
  background-color: #10487e;
}

.modal .row_modal {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.modal .row_modal2 {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.modal .img_modal {
    width: 35%;
    padding: 10px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
}

.modal img{
    height: 122px;
}

.modal .contenido {
    width: 65%;
    padding: 5px;
}

#modalContenido p {
    font-size: 18px;
    width: 100%;
    padding-bottom: 5px;
    border-bottom: solid 1px black;
    margin-bottom: 12px;
}

.contenido-oferta .product-price {
    color: gray;
    text-decoration: line-through;
}

.contenido-oferta {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.contenidon {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

/* Estilos para el combobox */
#opcion {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%; /* Ancho del combobox */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

/* Estilos para las opciones desplegadas */
#opcion option {
    background-color: #f5f5f5;
    color: #333;
}

/* Estilos para la opción seleccionada */
#opcion option:checked {
    background-color: #007bff;
    color: #fff;
}

.modal h5 {
    display: flex;
    color: #000;
    padding-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: solid 1px #ffa500;
    align-items: center;
    padding-bottom: 3px;
}

.modal svg {
    fill: rgba(30, 71, 153, 1);
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

/* Estilos para el input del calendario */
.modal input {
    width: 100%;
    margin-top: 5px;
    font-size: 16px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilos para las celdas de los días */
.ui-datepicker-calendar td {
    text-align: center;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ddd;
}

/* Estilos para los días seleccionables */
.ui-datepicker-calendar .ui-datepicker-week-end a,
.ui-datepicker-calendar .ui-datepicker-week-end span {
    color: #007bff;
    font-weight: bold;
}

/* Estilos para los días no seleccionables */
.ui-datepicker-calendar td:not(.ui-datepicker-week-end) a,
.ui-datepicker-calendar td:not(.ui-datepicker-week-end) span {
    color: #666;
}

/* Estilos para el contenedor del calendario */
.ui-datepicker {
    font-family: Arial, sans-serif;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Estilo para resaltar el campo de fecha si está vacío */
input.campo-vacio {
    border: 2px solid red !important;
}

/* Estilo para el modal */
.modal-exito,
.modal-error {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0 0 0 / 8%);
}

/* Estilo para el contenido del modal */
.modal-content-exito,
.modal-content-error {
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #fff;
    width: 50%;
    border-radius: 10px;
}

.modal-content-exito {
    background-color: #4CAF50;
}

.modal-content-exito h2 {
    color: #fff;
}

.modal-content-exito p {
    color: #fff;
}

.modal-content-error {
    background-color: #e34343;
}

.modal-content-error h2 {
    color: #fff;
}

.modal-content-error p {
    color: #fff;
}

/* Estilo para el botón de cierre del modal */
.close-exito,
.close-error {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-exito:hover,
.close-exito:focus,
.close-error:hover,
.close-error:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Estilos del modal */

.modal-content {
    background-color: #f8f8f8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
}

.close-btn {
    color: #aaaaaa;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.close-btn:hover {
    color: #555555;
}

.modal-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.modal-content p {
    font-size: 16px;
    margin-bottom: 20px;
}

.modal-content a {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 5px;
}

.modal-content a:hover {
    background-color: #45a049;
}

/* Estilos para el carrito */
.carrito-container {
    position: relative;
}
  
.carrito-icon {
    font-size: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-right: 12px;
}

.carrito-icon img {
    width: 80%;
    padding: 0;
    margin: 0;
    padding-top: 10px;
}
  
.carrito {
    display: none;
    position: absolute;
    top: 100%;
    right: 10px;
    width: 350px;
    background-color: #f1f1f1;
    padding: 10px;
    border: 1px solid #ccc;
    z-index: 1; /* Asegura que el carrito aparezca por encima del ícono */
    margin: solid 2px #000;
    border-radius: 5px;
}
  
.carrito-container:hover .carrito {
    display: block;
}

.carrito-container h2 {
    width: 100%;
    text-align: center;
    color: #000;
}

.contador {
    position: absolute;
    top: 10px;
    right: 61px;
    background-color: #ff5a5f;
    color: #fff;
    border-radius: 50%;
    padding: 5px;
    font-size: 12px;
    min-width: 24px;
    text-align: center;
    font-weight: bold;
}

.lista-productos {
    list-style: none;
    padding: 0;
    margin: 0;
}
  
.lista-productos li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #000;
    padding-bottom: 5px;
    border-bottom: solid 1px #666;
}
  
.lista-productos li img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 5px;
}
  
.cantidad {
    width: 40px;
    padding: 2px;
}
  
.agregar {
    display: none;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.carrito-detalle {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

#listaCate a {
    text-decoration: none;
    color: #000;
}

#butonlista {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-radius: 5px;
    border: solid 1px black;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: -10px;
    background: #ffa500;
    color: #000;
    cursor: pointer;
}

@media screen and (max-width: 860px){
    
    .cuerpo {
        width: 100%;
    }
    
    .atencion img {
        margin-left: auto;
        margin-right: auto;
        width: 99%;
        height: auto;
    }

    .atencion video {
        margin-left: auto;
        margin-right: auto;
        width: 99%;
        height: auto;
    }
    
}

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

    .menu {
        position: fixed;
        z-index: 2;
    }

}

@media screen and (max-width: 500px){
    
    .row {
        flex-direction: column-reverse;
    }
    
    .atencion {
        width: 100%;
    }
    
    .productos {
        width: 100%;
    }
    
    .modal .row_modal {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column-reverse;
    }
    
    .modal .contenido {
        width: 100%;
    }
    
    .modal .img_modal {
        width: 100%;
        padding: 10px;
        display: flex;
        position: relative;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
    #modalImagen {
        display: block;
        max-width: 40%;
        max-height: 150px;
        border-radius: 5px;
        margin-top: 5px;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    #modalContenido {
        margin-top: 10px;
        width: 50%;
    }

    .carrito {
        width: 400px;
    }
    
}

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

    .carrito {
        width: 260px;
    }

}

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

    .modal-contenido {
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translate(0%, 0%);
        background-color: #fff;
        padding: 20px;
        border-radius: 0px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
    }    

    .cerrar {
        position: absolute;
        top: 9px;
        right: 11px;
        font-size: 47px;
        color: #fff;
        cursor: pointer;
        background: #000;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
}