/* ===========================================================
   QROMA CIHS | NAVEGACIÓN Y FOOTER COMPARTIDOS
   Se carga al final de _Layout.cshtml.
   No modifica formularios, autenticación ni lógica electoral.
   =========================================================== */

/* Mantener el footer al pie incluso si la página tiene poco contenido. */
body.qroma-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

    body.qroma-page > .qroma-main {
        flex: 1 0 auto;
    }

/* Enlace de ida y vuelta entre Acceso y Recursos Humanos. */
.qroma-nav .qroma-nav-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #D5E8FB;
    border-radius: 999px;
    background: #F1F8FF;
    color: #004587;
    text-align: center;
    line-height: 1.4;
}

    .qroma-nav .qroma-nav-switch:hover,
    .qroma-nav .qroma-nav-switch:focus-visible {
        border-color: #A9CDEE;
        background: #E5F2FF;
        color: #003D7A;
    }

.qroma-nav a:focus-visible {
    outline: 3px solid #00C13A;
    outline-offset: 3px;
}

/* Footer: misma presentación centrada del acceso RR. HH. original. */
.qroma-footer {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 18px 20px 23px;
    color: #64748B;
    font-size: .75rem;
}

.qroma-footer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    text-align: center;
}

/* La vista de RR. HH. trae su propio contenedor y márgenes. */
.qroma-main--rrhh-acceso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: none;
    padding: 0;
}

@media (max-width: 575.98px) {
    .qroma-nav {
        width: 100%;
    }

        .qroma-nav .qroma-nav-switch {
            width: 100%;
        }

    .qroma-footer {
        padding: 12px 15px 22px;
    }
}

/* El botón de salida utiliza el mismo diseño del enlace de navegación. */
.qroma-nav-logout-form {
    margin: 0;
}

.qroma-nav .qroma-nav-logout-form .qroma-nav-switch {
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

    .qroma-nav .qroma-nav-logout-form .qroma-nav-switch:focus-visible {
        outline: 3px solid #00C13A;
        outline-offset: 3px;
    }

@media (max-width: 575.98px) {
    .qroma-nav-logout-form {
        width: 100%;
    }
}