/* Estilos principales para RadSolutions Reports */

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-bottom: 1rem;
}

.navbar-brand {
    font-weight: 700;
    color: #002B5A;
}

.navbar-brand:hover {
    color: #0056b3; /* Azul más claro al pasar el mouse */
}

.navbar-logo {
    height: 50px;
    margin-right: 8px;
    vertical-align: middle; /* Ayuda a alinear mejor con el texto adyacente */
}

.navbar {
    border-bottom-color: #002B5A !important; /* Azul oscuro para la barra de navegación */
    border-bottom-width: 1px !important; /* Grosor de la línea inferior */
    border-bottom-style: solid !important; /* Estilo de línea sólida */
    padding-top: 0.5rem; /* Añade espacio vertical para acomodar el logo más grande */
    padding-bottom: 0.5rem; /* Añade espacio vertical para acomodar el logo más grande */
}

/* Personalización de colores */
.bg-primary {
    background-color: #002B5A !important; /* Azul oscuro */
}

.navbar-color {
    background-color: white !important; /* Color de fondo blanco para la barra de navegación */
}

.nav-link {
    color: #002B5A !important; /* Azul oscuro para los enlaces */
    border-radius: 10px; /* Bordes redondeados para los enlaces */
    padding-left: 10px;
}

.nav-link:hover {
    background-color: #e9ecef !important; /* Azul más claro al pasar el mouse */
}

.nav-link.active {
    background-color: #002B5A4F !important; /* Azul oscuro para el enlace activo */
}

.bg-dark {
    background-color: #0d1a30 !important;
}

.nav-link.greeting-text:hover {
    background-color: transparent !important; /* Anula el hover, manteniendo el fondo transparente o el de la navbar */
}

footer {
    flex-shrink: 0;
}

/* Estilos para contenedores de contenido */
.content-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* Botones personalizados */
.btn-primary {
    background-color: #009dd1;
    border-color: #009dd1;
}

.btn-primary:hover {
    background-color: #007FAA;
    border-color: #007FAA;
}

/* Cambiar color del icono de hamburguesa del navbar */
.navbar-color .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23002B5A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Estilo por defecto (Mobile-First): se aplica a pantallas pequeñas primero */
body {
    /* Reemplaza 'background-mobile.jpg' con el nombre de tu imagen vertical */
    background-image: url('../images/fondo_3.jpg');
    background-size: cover; /* Hace que la imagen cubra todo el fondo */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Fija la imagen para que no se desplace con el contenido */
}

/* Media Query para pantallas más grandes (tablets y desktops) */
/* El breakpoint '768px' es un estándar común, pero puedes ajustarlo */
@media (min-width: 768px) {
    body {
        /* Reemplaza 'background-desktop.jpg' con el nombre de tu imagen horizontal */
        background-image: url('../images/fondo_2.jpg');
    }
}