body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;   
    /*overflow: hidden;*/ /* Esto es para que no haga scroll vertical la pantalla y provoque que la ventana de login se moviera en Android */
}

/******** LOGIN *********/
.login-background {
    /*background-image: url('/images/LoginBackground.jpg');*/
    background-image: url('/images/AdobeStock_1465629803.jpeg'); 
    background-color: #014D88;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Fijar la imagen de fondo */
    height: 100vh;
    width: 100vw; /* Ocupar toda la ventana */
    display: flex;
    justify-content: flex-start; /* Mover el contenido hacia la izquierda */
    align-items: center;
    overflow: hidden;
    position: relative;
    /*padding-left: 10%;*/ /* Ajustar cuánto hacia la izquierda */
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .login-background {
        /*background-image: url('/images/LoginBackground_mobile.jpg'); */ /* Imagen para móviles */
        background-image: url('/images/AdobeStock_1465629803.jpeg');
        background-color: #014D88;
        background-size: cover; /* Ajuste de tamaño específico para móviles */
        padding-left: 0px;
        justify-content: center; /* Mover el contenido al centro */
        overflow: hidden; /* Esto es para que no haga scroll vertical la pantalla y provoque que la ventana de login se moviera en Android */
    }
}

/* Media query para pantallas grandes (desktops) */
@media (min-width: 769px) {
    .login-background {
        /*background-image: url('/images/LoginBackground.jpg'); */ /* Imagen para pantallas grandes */
        background-image: url('/images/AdobeStock_1465629803.jpeg');
        background-color: #014D88;
        background-size: cover; /* Ajuste de tamaño específico para desktops */
        overflow: hidden; /* Esto es para que no haga scroll vertical la pantalla y provoque que la ventana de login se moviera en Android */
    }
}

.login-footer-link,
.login-footer-link:link,
.login-footer-link:visited,
.login-footer-link:hover,
.login-footer-link:active {
    color: white !important;
    text-decoration: none; /* Opcional: para quitar el subrayado al pasar el ratón */
}

@media (max-width: 599px) {

    /*
     * Nueva clase para texto más pequeño en las celdas del DataGrid.
     * La usaremos para la columna 'Descripción'.
    */
    .mobile-small-text {
        font-size: 0.55rem !important; /* Aproximadamente 12px, ajústalo a tu gusto */
        line-height: 1.2; /* Reduce el espacio vertical entre líneas si el texto ocupa varias */
    }
}

.truncate-text {
    white-space: nowrap; /* Evita que el texto salte a la línea siguiente */
    overflow: hidden; /* Oculta cualquier parte del texto que se desborde */
    text-overflow: ellipsis; /* Muestra '...' al final del texto cortado */
    max-width: 180px; /* ¡IMPORTANTE! Define el ancho máximo antes de cortar. Ajústalo a tu gusto. */
    display: inline-block; /* Necesario para que max-width funcione en un 'span' */
    vertical-align: middle; /* Ayuda a alinear verticalmente con iconos cercanos */
}

.login-card {
    width: 50%; /* Usar porcentaje en lugar de valores fijos */
    max-width: 600px; /* Limitar el ancho máximo */
    min-width: 300px; /* Limitar el ancho mínimo */
    padding: 1px; /*Añadir un poco de padding para espaciado interno*/
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Añadir sombra */
    background-color: white; /* Asegurar contraste */
    border-radius: 8px; /* Bordes redondeados */
    touch-action: none;
    overflow: hidden; /* Esto es para que no haga scroll vertical la pantalla y provoque que la ventana de login se moviera en Android */
}

/********************* PIE PAGINA GENERAL ********/
.footer {
    position: relative; /* Asegúrate de que el pie de página esté posicionado correctamente */
}

.footer-link {
    color: white !important;
}

/**************** MENU ************/
.clickable-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .clickable-card:hover {
        transform: scale(1.05);
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    }

/**************TRAMITACION PRESUPUESTOS*/
.metodo-envio {
    border: 2px solid #ccc; /* Borde por defecto */
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
}

.metodo-seleccionado {
    border: 2px solid #1E88E5;
    /*background-color: #E3F2FD;*/
}

.radio-container {
    position: absolute;
    top: 8px;
    left: 8px;
}

.metodo-contenido {
    margin-left: 40px; /* Espacio para el radio */    
}

.contenido-espaciado {
    margin-top: 12px; /* Espacio entre el título y el contenido */
}

/********************* Estilos para la sección de cabecera en Menu.razor */
.menu-header-section {
    position: relative;
    height: 45vh; /* Altura de la sección, ajústala a tu gusto */
    background-image: url('/images/AdobeStock_1465629803.jpeg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;*/
    /*background-color: rgba(1, 77, 136, 0.6);*/ /* Superposición de color azul oscuro con opacidad */
/*}*/

/*.hero-content {
    position: relative;*/ /* Para que se ponga por encima del overlay */
    /*z-index: 1;
}*/

/* Estilos para las tarjetas de acción en Menu.razor */
.menu-action-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

    .menu-action-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--mud-elevation-8);
    }