/* Contenedor principal del visor */
.image-viewer {
    max-width: 1000px; /* Ancho máximo de la visualización en la página */
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* La imagen ahora se adapta al contenedor */
.img-responsive-carto {
    display: block;
    width: 100%;      /* Se ajusta al ancho del contenedor */
    height: auto;     /* Mantiene la proporción */
    max-height: 70vh; /* Evita que sea más alta que el 70% de la pantalla del usuario */
    object-fit: contain; /* Asegura que no se deforme */
    cursor: zoom-in;
    border-radius: 4px;
}

.legende-simple {
    margin-top: 15px;
    color: #666;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Si la pantalla es muy pequeña (móvil), permitimos scroll si fuera necesario */
@media (max-width: 700px) {
    .image-viewer {
        padding: 5px;
    }
    .img-responsive-carto {
        max-height: 50vh; /* Más pequeña aún en móviles */
    }
}