/* --- Estilos CSS para el Lightbox (Modo Cover) --- */
/* Estilos para el overlay de Lightbox */
#lightboxOverlay {
position: fixed; /* Fija el overlay en la ventana */
top: 0;
left: 0;
width: 100vw; /* Cubre el 100% del ancho del viewport */
height: 100vh; /* Cubre el 100% del alto del viewport */
background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente oscuro */
z-index: 9998; /* Asegura que esté debajo del lightbox pero encima del contenido */
}
/* Estilos para el contenedor principal del Lightbox */
#lightbox {
position: fixed; /* Fija el lightbox en la ventana */
top: 0;
left: 0;
width: 100vw; /* Cubre el 100% del ancho del viewport */
height: 100vh; /* Cubre el 100% del alto del viewport */
display: flex; /* Usa flexbox para centrar el contenido */
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
z-index: 9999999; /* Asegura que esté encima del overlay */
overflow: hidden; /* Oculta cualquier desbordamiento */
}
/* Estilos para el contenedor exterior de la imagen (lb-outerContainer) */
.lightbox .lb-outerContainer {
display: flex; /* Usa flexbox para centrar el lb-container */
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
background-color: transparent; /* Fondo transparente para no ocultar la imagen */
border-radius: 4px; /* Bordes redondeados */
box-shadow: none; /* Sombra eliminada para un look más limpio */
box-sizing: border-box; /* Incluye el padding en el cálculo del ancho/alto */
}
/* Estilos para el contenedor de la imagen (lb-container) */
.lightbox .lb-container {
padding: 0 !important; /* Elimina cualquier padding interno para maximizar el espacio de la imagen */
display: flex; /* Usa flexbox para centrar la imagen */
justify-content: center;
align-items: center;
overflow: hidden; /* Asegura que la imagen no se desborde del contenedor */
width: 100%; /* Ocupa el 100% del contenedor exterior */
height: 100%; /* Ocupa el 100% del contenedor exterior */
}
/* Estilos para la imagen dentro del lightbox */
.lightbox .lb-image {
max-width: 100%; /* Asegura que la imagen no se desborde de su contenedor */
max-height: 100%; /* Asegura que la imagen no se desborde de su contenedor */
width: auto; /* Permite que el ancho se ajuste automáticamente si el alto es fijo, o viceversa */
height: auto; /* Permite que el alto se ajuste automáticamente */
object-fit: cover; /* La imagen cubrirá el espacio, recortando si es necesario */
display: block; /* Elimina el espacio extra debajo de las imágenes */
border: none !important; /* Elimina cualquier borde por defecto */
border-radius: 3px; /* Bordes ligeramente redondeados para la imagen */
}
/* Estilos para los controles de navegación (flechas) */
.lightbox .lb-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10; /* Asegura que estén encima de la imagen */
display: flex; /* Usa flexbox para posicionar las flechas */
justify-content: space-between; /* Espacia las flechas a los extremos */
align-items: center; /* Centra verticalmente las flechas */
padding: 0 20px; /* Pequeño padding horizontal para las flechas */
box-sizing: border-box; /* Incluir padding en el width/height */
}
.lightbox .lb-prev,
.lightbox .lb-next {
width: 60px; /* Tamaño fijo para el icono de flecha */
height: 60px; /* Asegura que el área clicable sea cuadrada */
background-size: 80%; /* Ajusta el tamaño del SVG dentro del botón */
background-repeat: no-repeat;
background-position: center;
opacity: 0.7; /* Ligeramente transparente */
transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Añadida transición para el color */
cursor: pointer; /* Indicar que es interactivo */
border-radius: 50%; /* Hacer los botones circulares */
background-color: rgba(255, 255, 255, 0.7); /* Fondo semitransparente para los botones */
}
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover {
opacity: 1; /* Opacidad completa al pasar el ratón */
background-color: rgba(255, 255, 255, 0.4); /* Fondo más visible al pasar el ratón */
}
.lightbox .lb-prev {
/* Icono SVG de flecha izquierda */
background-image: url('data:image/svg+xml;utf8,');
}
.lightbox .lb-next {
/* Icono SVG de flecha derecha */
background-image: url('data:image/svg+xml;utf8,');
}
/* Estilos para el cargador y el botón de cerrar */
.lightbox .lb-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
/* Icono SVG de cargador */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
width: 40px;
height: 40px;
}
.lightbox .lb-closeContainer {
position: absolute;
top: 0px; /* Posición superior */
right: 20px; /* Posición izquierda */
z-index: 11;
}
.lightbox .lb-close {
display: block;
width: 35px;
height: 35px;
/* Icono SVG de cerrar (X) */
background-image: url('data:image/svg+xml;utf8,');
background-size: 70%;
background-repeat: no-repeat;
background-position: center;
opacity: 0.7;
transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
cursor: pointer;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
}
.lightbox .lb-close:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.4);
}
/* Estilos para los detalles (título y número de imagen) */
.lightbox .lb-dataContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Inter', sans-serif; /* Usar la fuente Inter */
}
.lightbox .lb-caption {
flex-grow: 1;
margin-right: 10px;
font-size: 16px;
}
.lightbox .lb-number {
font-size: 14px;
white-space: nowrap;
}
/* Media queries para responsividad */
@media (max-width: 768px) {
.lightbox .lb-closeContainer {
right: 10px; /* Posición izquierda */
}
.lightbox .lb-dataContainer {
flex-direction: column;
align-items: flex-start;
padding: 8px 15px;
}
.lightbox .lb-caption {
margin-bottom: 5px;
margin-right: 0;
font-size: 14px;
}
.lightbox .lb-number {
font-size: 12px;
}
}