/* visualizar_producto.css */

/* --- Estilos base del contenedor principal de la sección de producto --- */
.contenedorvisualizar {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos salten de línea en pantallas pequeñas */
    justify-content: space-between;
    gap: 40px; /* Espacio entre el panel de información y el panel de imágenes */
    padding: 40px 20px; /* Ajuste el padding horizontal para evitar que se pegue a los bordes */
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor en la página */
    overflow-x: hidden; /* Oculta cualquier desbordamiento horizontal no deseado */
}

/* --- Estilos para el panel de información del producto (nombre, precio, descripción, botón) --- */
.visualinfo {
    flex: 1 1 45%; /* Ocupa aproximadamente el 45% del ancho disponible, y es flexible */
    max-width: 500px; /* Ancho máximo para el panel de información */
    min-width: 280px; /* Asegura que no se colapse demasiado en pantallas pequeñas */
    padding-bottom: 20px; /* Espacio inferior para evitar que el contenido se pegue al fondo */
}

.visualinfo h1 {
    font-size: 36px;
    margin-bottom: 10px;
    font-family: 'Tamrin', cursive;
    color: #333;
}

.precio {
    font-size: 24px;
    color: #00bf63; /* Color de acento para el precio */
    margin-bottom: 15px;
    font-weight: bold;
}

.descripcion {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #555;
}

.boton-carrito-visual {
    padding: 12px 24px;
    background-color: #00bf63;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    max-width: fit-content; /* El botón se ajusta a su contenido */
    font-family: "AbeeZee", sans-serif;
    display: block; /* Para que ocupe su propia línea si es necesario */
}

.boton-carrito-visual:hover {
    background-color: #00994d;
}

/* --- Estilos para el panel de imágenes del producto (imagen principal y carrusel de miniaturas) --- */
.visualimg {
    flex: 1 1 45%; /* Ocupa el resto del ancho, similar al panel de info */
    min-width: 300px; /* Asegura que no se colapse demasiado */
    display: flex;
    flex-direction: column; /* Apila la imagen principal y el carrusel de miniaturas */
    justify-content: flex-start; /* Alinea los elementos al inicio */
    align-items: center; /* Centra el contenido (imagen y carrusel) horizontalmente */
    overflow: hidden; /* Oculta cualquier desbordamiento dentro de este contenedor */
}

.cont-img-y-carrusel {
    width: 100%; /* Ocupa el 100% del contenedor .visualimg */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* Importante para contener el Swiper y evitar desbordamiento */
}

.visualimg .foto-producto {
    width: 100%; /* Ocupa el 100% del ancho disponible en su contenedor */
    max-width: 400px; /* Ancho máximo para la imagen principal */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: contain;
    cursor: pointer;
}

/* =======================================================
   ESTILOS PARA EL MODAL (LIGHTBOX)
   AÑADE ESTOS ESTILOS A TU ARCHIVO CSS (ej. visualizar_producto.css)
   ======================================================= */

/* El fondo oscuro del modal */
.modal {
    display: none; /* Mantén solo esta línea para ocultarlo por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    /* display: flex; <--- ELIMINA ESTA LÍNEA */
    align-items: center;
    justify-content: center;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}

.img-prod-caru {
    cursor: pointer;
}

.zoomable-image {
    cursor: pointer;
}

.productos-recomendados {
    display: flex; /* Para que los elementos se muestren en línea horizontal */
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea si no caben */
    justify-content: center; /* Centra los productos recomendados horizontalmente */
    align-items: flex-start; /* Alinea los elementos en la parte superior si tienen alturas diferentes */
    gap: 20px; /* Espacio entre los productos recomendados */
    padding: 20px 0; /* Un poco de padding arriba y abajo */
    max-width: 1200px; /* Limita el ancho del contenedor */
    margin: 40px auto; /* Centra el contenedor y le da margen */
    overflow-x: auto; /* Permite desplazamiento horizontal si hay demasiados productos y no caben */
    /* Deshabilitar la barra de desplazamiento horizontal en algunos navegadores si quieres */
    /* -ms-overflow-style: none;  /* IE and Edge */
    /* scrollbar-width: none;  /* Firefox */
}

/* Para ocultar la barra de desplazamiento en Webkit (Chrome, Safari) */
/* .productos-recomendados::-webkit-scrollbar {
    display: none;
} */



/* Animación de entrada para el modal */
@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}


/* El botón de cerrar (X) */
.close-button {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1; /* Blanco grisáceo */
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 1001; /* Por encima de la imagen */
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* El contenido del modal (la imagen) */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%; /* Máximo 90% del ancho del viewport */
    max-height: 90vh; /* Máximo 90% del alto del viewport (vh = viewport height) */
    object-fit: contain; /* Ajusta la imagen sin recortar dentro de sus límites */
    -webkit-animation-name: zoomIn;
    -webkit-animation-duration: 0.6s;
    animation-name: zoomIn;
    animation-duration: 0.6s;
}

/* Animación de zoom para la imagen */
@-webkit-keyframes zoomIn {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoomIn {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Controles de navegación (flechas) */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px; /* Ajuste para centrar verticalmente */
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0,0,0,0.5); /* Fondo semitransparente para las flechas */
    z-index: 1001; /* Para que estén encima de la imagen */
}

/* Posiciona la flecha "Next" a la derecha */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Posiciona la flecha "Prev" a la izquierda */
.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

/* Efecto hover/focus en las flechas */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Leyenda de la imagen */
.caption {
    margin: 15px auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    font-size: 16px;
}

/* Responsive (ajustes para pantallas pequeñas) */
@media only screen and (max-width: 768px) {
    .modal-content {
        width: 100%; /* Ocupa todo el ancho en móviles */
        max-height: 80vh; /* Ajusta la altura */
    }
    .prev, .next, .close-button {
        font-size: 16px; /* Flechas y X más pequeños */
        padding: 8px;
        margin-top: -30px;
    }
    .close-button {
        top: 10px;
        right: 15px;
    }
    .prev, .next {
        padding: 12px 10px;
    }
}

.recomendado {
    flex: 0 0 auto; /* No crece, no se encoge, tamaño automático */
    width: 200px; /* Ancho fijo para cada producto recomendado. AJUSTA ESTE VALOR según necesites */
    padding: 15px; /* Reducimos el padding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra más suave */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    text-align: center; /* Centra el texto */
    background-color: #fff; /* Fondo blanco para cada tarjeta */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transición suave al pasar el ratón */
    display: flex; /* Para controlar el contenido interno */
    flex-direction: column; /* Apila los elementos dentro de la tarjeta */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Centra el contenido horizontalmente */
}

.recomendado:hover {
    transform: translateY(-5px); /* Pequeño efecto de elevación al pasar el ratón */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

.recomendado img {
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: 120px; /* Altura fija para la imagen. AJUSTA ESTE VALOR */
    object-fit: contain; /* Ajusta la imagen sin recortar */
    margin-bottom: 10px; /* Espacio debajo de la imagen */
}

.recomendado h3 {
    font-size: 18px; /* Tamaño de fuente más pequeño para el título */
    margin-bottom: 5px;
    color: #333;
    font-family: 'Tamrin', cursive; /* Usa tu fuente personalizada */
    line-height: 1.2; /* Ajusta el interlineado */
    height: 2.4em; /* Altura fija para dos líneas de texto */
    overflow: hidden; /* Oculta el texto si se desborda */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
    display: -webkit-box;
    /*-webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical;
}

.recomendado .precio {
    font-size: 16px; /* Tamaño de fuente más pequeño para el precio */
    color: #00bf63;
    font-weight: bold;
    margin-top: auto; /* Empuja el precio hacia abajo si hay espacio */
    margin-bottom: 10px;
}

.recomendado .boton-ver-recomendado {
    display: block; /* Para que ocupe todo el ancho disponible */
    width: 100%; /* Asegura que el botón ocupe el 100% del ancho de la tarjeta */
    padding: 8px 15px; /* Padding del botón */
    background-color: #00bf63;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease;
    font-family: "AbeeZee", sans-serif;
}

.recomendado .boton-ver-recomendado:hover {
    background-color: #00994d;
}

/* --- Media Queries para Responsive (Asegurar que se vea bien en diferentes tamaños de pantalla) --- */

@media (max-width: 768px) {
    .productos-recomendados {
        gap: 15px; /* Reduce el espacio entre productos en tabletas */
    }
    .recomendado {
        width: 180px; /* Un poco más pequeños en tabletas */
        padding: 12px;
    }
    .recomendado img {
        height: 100px;
    }
    .recomendado h3 {
        font-size: 16px;
    }
    .recomendado .precio {
        font-size: 14px;
    }
    .recomendado .boton-ver-recomendado {
        padding: 6px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .productos-recomendados {
        flex-wrap: nowrap; /* Desactiva el salto de línea en móviles para un carrusel horizontal */
        overflow-x: scroll; /* Permite desplazamiento horizontal */
        justify-content: flex-start; /* Alinea al inicio para el scroll */
        padding: 15px 10px; /* Padding para evitar que se pegue a los bordes */
    }
    .recomendado {
        flex-shrink: 0; /* Evita que se encojan */
        width: 160px; /* Ancho fijo para móviles */
        padding: 10px;
    }
    .recomendado img {
        height: 90px;
    }
    .recomendado h3 {
        font-size: 15px;
    }
    .recomendado .precio {
        font-size: 13px;
    }
    .recomendado .boton-ver-recomendado {
        font-size: 11px;
    }
    /* Ocultar barra de desplazamiento en móviles si lo deseas */
    .productos-recomendados::-webkit-scrollbar {
        display: none;
    }
    .productos-recomendados {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}