/* 1. Sombra para los títulos (Login Form) */
h1, h2, .card-header {
    color: #0000ff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    background: transparent !important;
}

/* 2. Sombra para las etiquetas de Username y Password */
.card label {
    color: #0000ff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* 3. Sombra para los enlaces de abajo (Forgot password?) */
.card a {
    color: #0000ff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    text-decoration: underline !important;
}

/* 4. Sombra exterior a las cajas de entrada para que "floten" */
.form-control {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

/* 5. Mantenemos el fondo de la caja blanca muy sutil */
.card-body {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

/* Cambiar solo el fondo de los campos de texto a gris flojito */
.form-control {
    background-color: #f2f2f2 !important; /* Gris muy suave */
    border: 1px solid #d1d1d1 !important; /* Un borde sutil para que no se pierda */
    color: #495057 !important;           /* Color del texto al escribir */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075) !important; /* Sombra interna suave */
}

/* Opcional: Que cambie ligeramente al hacer clic (focus) */
.form-control:focus {
    background-color: #ffffff !important; /* Se vuelve blanco al escribir */
    border-color: #86b7fe !important;
    outline: 0 !important;
}

/* Contenedor principal de contacto */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
    padding: 20px;
}

/* Estilo para la parte del texto */
.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h2 {
    color: #001B4C;
    border-bottom: 2px solid #001B4C;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Estilo para los recuadros de información (Gris flojito como pediste) */
.info-box {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 5px solid #001B4C;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Estilo para el Mapa */
.contact-map {
    flex: 1;
    min-width: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.contact-map img {
    width: 100%;
    height: auto;
    display: block;
}

/* Si el logo se ve muy pequeño o grande, ajústalo aquí */
.navbar-brand img {
    height: 80px !important; /* Ajusta este número según te guste */
    width: auto !important;
}

/* Añade esto a lo que ya tienes */
.navbar-brand img {
    height: 200px !important; /* Un poco más grande para que luzca el logo */
    width: auto !important;
    padding: 10px 0 !important; /* Espacio arriba y abajo */
}

/* --- SOLUCIÓN FINAL: LOGO FANTASMA (ABSOLUTO) --- */

/* 1. Volvemos a poner el header "normal" para que no desborde la pantalla */
header.header.container-header.full-width {
    display: block !important;
    position: relative !important; /* Necesario para que el logo "fantasma" sepa dónde está */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important; /* Eliminamos cualquier empujón anterior */
}

/* 2. Convertimos el Logo en un FANTASMA (Posicionamiento Absoluto) */
div.navbar-brand {
    position: absolute !important; /* <--- AQUÍ ESTÁ LA MAGIA */
    top: 0 !important; /* Pegado arriba del todo de su contenedor */
    left: 20px !important; /* Un poco separado del borde izquierdo */
    z-index: 1000 !important; /* Se asegura de estar por encima del menú si se tocan */
}

/* 3. Asegurar que la imagen del logo mantenga su tamaño pero no moleste */
div.navbar-brand img {
    height: 150px !important; /* El tamaño de tu logo, ajústalo si quieres */
    width: auto !important;
    display: block !important;
}

/* 4. Arreglar el contenedor del MENÚ para que se alinee solo */
div.container-nav {
    display: flex !important;
    justify-content: flex-end !important; /* Empuja el menú a la derecha */
    align-items: center !important;
    padding-top: 50px !important; /* Ajusta este número para bajar el menú y alinearlo verticalmente con el logo */
    padding-right: 20px !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 5. Alinear los botones del menú en horizontal sin que se rompa en dos líneas */
ul.mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* <--- Esta es la clave para que no salte de línea */
    gap: 30px !important; 
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important; /* Asegura que los textos no se partan */
}

/* 6. Retoques finales de espaciado inferior */

/* Esto añade espacio en blanco ENTRE el header azul y el contenido de abajo (el Login) */
header.header.container-header.full-width {
    margin-bottom: 40px !important; 
}

/* Esto hace que el fondo azul baje un poco más para que no corte justo a ras de las letras del menú */
div.container-nav {
    padding-bottom: 60px !important; 
}