/* 1. Fondo general */
body {
    background-color: #F8FAFC !important;
    background-image: none !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
}

/* 2. Cabecera Inmersiva (100% Azul) */
.navbar-default {
    background-color: #002A5A !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 42, 90, 0.25) !important;
    padding: 10px 0 !important;
}
.navbar-default .navbar-brand, 
.navbar-default .navbar-nav > li > a {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover {
    background-color: #1F6FB7 !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(31, 111, 183, 0.3) !important;
}
.navbar-default .navbar-nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
}

/* 3. Tarjeta Flotante (AHORA CON MARCO AZUL INSTITUCIONAL) */
.panel, .card, #wrapper {
    background-color: #FFFFFF !important;
    border: 2px solid #002A5A !important; /* Borde completo azul */
    border-top: 8px solid #002A5A !important; /* Corona gruesa azul */
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(0, 42, 90, 0.15) !important;
    padding: 40px 30px !important;
    margin-top: 40px !important;
}

/* 4. Logo institucional */
#logo img, .text-center img, img[src*="logo_cmq"] {
    max-width: 240px !important;
    height: auto !important;
    margin-bottom: 30px !important;
}

/* 5. Caja de Instrucciones "A Prueba de Tontos" */
.alert-info, .alert-warning {
    background-color: #E8F4FD !important; /* Fondo celeste suave */
    color: #002A5A !important;
    border: 2px solid #1F6FB7 !important; /* Borde azul interactivo */
    border-left: 8px solid #002A5A !important; /* Borde grueso izquierdo */
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 16px 20px !important;
    box-shadow: 0 4px 12px rgba(0, 42, 90, 0.08) !important;
}

/* 6. Formularios (Bordes Azules) */
.form-control {
    border-radius: 0 8px 8px 0 !important;
    border: 2px solid #1F6FB7 !important; /* Borde azul en lugar de gris */
    border-left: none !important;
    padding: 12px 15px !important;
    height: auto !important;
    background-color: #F8FAFC !important;
    color: #002A5A !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
.form-control:focus {
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    border-color: #002A5A !important;
}

/* Íconos de formulario */
.input-group-addon {
    border-radius: 8px 0 0 8px !important;
    background-color: #002A5A !important;
    color: #FFFFFF !important;
    border: 2px solid #002A5A !important;
    padding: 0 18px !important;
}

/* 7. Botón Principal */
.btn-success, .btn-primary, button[type="submit"] {
    background-color: #1F6FB7 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    letter-spacing: 0.5px;
    width: 100% !important;
    margin-top: 15px !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background-color 0.3s ease !important;
}
.btn-success:hover, .btn-primary:hover, button[type="submit"]:hover {
    background-color: #002A5A !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(0, 42, 90, 0.25) !important;
}