a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

.boton-adicional-login {
    width: auto;
    color: #0363A5;
    border-color: #FFFFFF;
    font-weight: bold;
    text-decoration: none !important;
    white-space: nowrap;
}

.boton-adicional-login:hover {
    color: #0363A5 !important;
    border-color: #FFFFFF !important;
    text-decoration: none !important;
}

.boton-seleccion-login {
    width: 220px;
    color: #707070;
    border-color: #707070;
    text-decoration: none !important;
}

.boton-seleccion-login:hover {
    color: #58A618;
    border-color: #58A618;
}

.boton-seleccion-login-active {
    color: #58A618 !important;
    border-color: #58A618 !important;
}

.dx-texteditor.dx-editor-outlined {
    border: 1px solid #0363A5;
}

.section-login {
    margin-top: 0;
}

.codigo-firma-verificacion {
    font-size: 20px;
    color: #0363A5;
}

.btn-popup-login-aceptar {
    background-color: #58A618;
    color: #FFFFFF;
}

.btn-popup-login-cancelar {
    background-color: #dc3545;
    color: #FFFFFF;
}

.btn-popup-login-aceptar .dx-button-text,
.btn-popup-login-cancelar .dx-button-text {
    font-size: 0.875rem !important;
}

/* US 51455: popup «Solicitud de Acceso al sistema VUCE CR» (Views/Login/_SolicitudAcceso.cshtml). La barra es la
   azul de todos los popups; el título va en el contenido. Los botones de las tarjetas son enlaces <a> con el azul
   de la barra y de los títulos; el hover lo oscurece. */
.solicitud-acceso-titulo {
    color: #0363A5;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.solicitud-acceso-subtitulo {
    color: #707070;
    font-size: 1.1rem;
}

.solicitud-acceso-tarjeta {
    border-color: #DEE2E6;
    border-radius: 1rem;
}

.solicitud-acceso-tarjeta .card-title {
    color: #0363A5;
    font-size: 1.5rem;
    font-weight: bold;
}

.solicitud-acceso-tarjeta .card-text {
    color: #505050;
    font-size: 1rem;
    line-height: 1.6;
}

/* Línea bajo el título de cada tarjeta, como en el prototipo (Figura 2). */
.solicitud-acceso-separador {
    margin: 0.75rem 0 1.25rem;
    border-top: 1px solid #ADB5BD;
    opacity: 1;
}

.solicitud-acceso-boton {
    width: 70%;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-radius: 0.5rem;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #0363A5;
    border-color: #0363A5;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .solicitud-acceso-boton {
        width: 100%;
    }
}

.solicitud-acceso-boton:hover,
.solicitud-acceso-boton:focus {
    color: #FFFFFF;
    background-color: #024E82;
    border-color: #024E82;
}

@media (max-width: 1199.98px) {
    .navbar.sticky-top .container-fluid img {
        max-height: 1.85rem !important;
    }

    .navbar.sticky-top .container-fluid > .ms-auto {
        align-self: flex-end;
    }

    .section-login {
        margin-top: 0;
    }

    .dx-popup-title .dx-closebutton {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Por debajo de xxl (≥1400px) la tarjeta no es lo bastante ancha para los 4
   botones en una sola línea (en xl mide ~475px). Se reparten 2 y 2: cada botón
   toma la mitad descontando el gap horizontal (gap-3 = 1rem). */
@media (max-width: 1399.98px) {
    .botones-adicionales-login {
        flex-wrap: wrap;
    }

    .botones-adicionales-login .boton-adicional-login {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 767.98px) {
    /* En móvil el header deja de ser fijo y se desplaza junto con el contenido,
       evitando que el contenido quede por debajo y se superponga al hacer scroll. */
    .navbar.sticky-top {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .boton-seleccion-login {
        width: 100%;
    }
}