body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f4f4;
}

.container {
    width: 100%; /* Toma el ancho completo de la ventana de visualización */
    max-width: 595px; /* Ancho máximo de una hoja A4 */
    height: 100vh; /* Altura completa de la ventana de visualización */
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrollable {
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Habilita el desplazamiento vertical si es necesario */
    scrollbar-width: thin; /* Estilo del scrollbar más fino para no ocupar mucho espacio */
    scrollbar-color: #888 #f4f4f4; /* Colores del scrollbar */
}

.responsive-image {
    width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor */
    height: auto; /* La altura se ajusta automáticamente para mantener la proporción */
}

@media print {
    body {
        zoom: 80%; /* Ajustar según necesidades específicas para impresión */
    }
}