body {
    background-color: #f8f9fa; /* Color de fondo suave */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna */
}

.container {
    max-width: 700px; /* Ancho máximo del contenedor principal */
}

.card {
    border-radius: 15px; /* Bordes redondeados para la tarjeta */
    border: none; /* Elimina el borde por defecto de la tarjeta */
}

.img-container {
    max-height: 500px; /* Limita la altura del contenedor de la imagen para recorte */
    overflow: hidden; /* Oculta cualquier parte de la imagen que exceda el contenedor */
    display: inline-block; /* Permite centrar la imagen dentro de su contenedor */
    max-width: 100%; /* Asegura que no se desborde del contenedor padre */
}

.img-container img {
    display: block; /* Necesario para que Cropper.js funcione correctamente */
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto; /* Mantiene la proporción de la imagen */
}

#imageUpload {
    cursor: pointer; /* Indica que es un elemento interactivo */
}

/* Estilos para los botones con bordes redondeados */
.btn-primary, .btn-success, .btn-info {
    border-radius: 8px;
}