html {
    min-height: 100%;
    position: relative;
}

body {
    margin: 0;
    /*margin-bottom: 45px;*/
    min-height: 100vh; /* Asegura que el cuerpo ocupe al menos toda la altura de la pantalla */
    display: flex;
    flex-direction: column; /* Coloca el footer después del contenido */
    box-sizing: border-box; /* Incluye padding/margin en los cálculos */
}

footer {
    /* position: fixed; Fija el footer al final de la pantalla */
    bottom: 0;
    width: 100%;
    height: 45px;
    z-index: 10;
}

.hr-divider img {
    width: 100%;
    height: 4px; /* Asegura que el SVG sea consistente */
}

.hr-divider {
    width: 100%;
    height: 4px; /* Altura estándar para el borde */
    margin-bottom: 16px; /* Espacio entre la línea y el contenido */
}

@media (min-width: 768px) {
    /* Reemplaza el SVG por un hr o un borde superior */
    .hr-divider img {
        display: none; /* Oculta el SVG */
    }
    .hr-divider {
        height: 0; /* Oculta el contenedor */
        border-top: 1px solid var(--bs-secondary); /* Agrega un borde superior */
        margin-bottom: 0; /* Espacio entre la línea y el contenido */
    }

    footer {
        height: 30px;
    }
}