/* ==============================
   VARIABLES DE COLOR
   ============================== */
:root {
    --color-primary: #002341;
    --color-secondary: #FFBE00;
    --color-accent: #6283FD;
}

/* ==============================
   CONTENEDOR GENERAL
   ============================== */


/* ==============================
   GRID PRINCIPAL
   LOGO | MENU (CENTRO REAL) | USER
   ============================== */

/* ==============================
   LOGO (GRANDE, SOLO SE MUEVE HORIZONTAL)
   ============================== */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: translateX(200px);
}

.logo-image {
    height: 75px;          /* requerido */
    max-width: 275px;       /* requerido */
    width: auto;
    object-fit: contain;
}



/* ==============================
   LINKS DEL MENÚ
   ============================== */
#mainmenu li a:hover {
    color: var(--color-secondary);
}

#mainmenu{
    transform: translateX(-120px);
}



/* ==============================
   DROPDOWN USER
   ============================== */
#mainmenu li ul {
    background-color: var(--color-primary);
}

@media (max-width: 991px) {
    .logo-image {
        height: 42px !important;
        max-width: 180px !important;
        width: auto;
    }

    /* Logo alineado a la izquierda */
    .logo-container {
        transform: translateX(0) !important;
    }

    #mainmenu{
        transform: translateX(0) !important;
    }
}