/*
 * Oficina virtual — estilos propios sobre Bootstrap 5.3.8.
 *
 * La oficina virtual antigua traía Bootstrap 3.3.6 y un `css/index.css` con las
 * reglas del formulario de acceso. Se conserva la composición de aquella pantalla
 * —logo, «Acceso», dos campos apilados y botón azul a todo el ancho— y el color
 * corporativo, que allí se aplicaba pisando `.btn-primary`.
 */

:root {
    /* Azul corporativo. En el CSS antiguo estaba suelto en `.btn-primary`. */
    --v2-azul: #00ADEF;
    --v2-azul-oscuro: #0093cc;
    --v2-gris-texto: #717171;
}

/* ------------------------------------------------------------------ *
 * Botón corporativo
 * ------------------------------------------------------------------ */

/*
 * Se redefinen las variables de Bootstrap en vez de sobreescribir las reglas: así
 * el hover, el focus y el estado deshabilitado siguen funcionando solos.
 */
.btn-v2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--v2-azul);
    --bs-btn-border-color: var(--v2-azul);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--v2-azul-oscuro);
    --bs-btn-hover-border-color: var(--v2-azul-oscuro);
    --bs-btn-focus-shadow-rgb: 0, 173, 239;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--v2-azul-oscuro);
    --bs-btn-active-border-color: var(--v2-azul-oscuro);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--v2-azul);
    --bs-btn-disabled-border-color: var(--v2-azul);
}

/* ------------------------------------------------------------------ *
 * Pantalla de acceso
 * ------------------------------------------------------------------ */

/*
 * El original centraba el formulario con `margin: 0 auto` y un `padding-top` de
 * 40 px sobre fondo blanco. Aquí se centra de verdad, en vertical y horizontal, y
 * el formulario va sobre una tarjeta blanca con el fondo de página en gris muy
 * claro: es el único cambio de aspecto, y es lo que hace que la tarjeta se lea
 * como tal.
 *
 * El centrado va en un envoltorio de la propia vista, no en el `body`: una clase
 * en el `body` tendría que llegar desde el controlador hasta el layout, y es un
 * acoplamiento fácil de romper sin darse cuenta.
 */
.acceso_pagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: #f5f7f9;
}

.acceso_caja {
    width: 100%;
    max-width: 25rem;
}

.acceso_tarjeta {
    border: 1px solid #e6e9ec;
    border-radius: .5rem;
    background-color: #fff;
    padding: 2rem 1.75rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .04);
}

.acceso_logo {
    display: block;
    max-width: 11rem;
    height: auto;
    margin: 0 auto 1.5rem;
}

.acceso_titulo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--v2-gris-texto);
    margin-bottom: 1.25rem;
}

/*
 * Esquinas rectas en los campos, como en el CSS antiguo
 * (`.form-control { border-radius: 0 }`).
 */
.acceso_tarjeta .form-control {
    border-radius: 0;
}

.acceso_tarjeta .form-control:focus {
    border-color: var(--v2-azul);
    box-shadow: 0 0 0 .25rem rgba(0, 173, 239, .15);
}

/* El grupo del campo de contraseña, con el botón de ver/ocultar. */
.acceso_tarjeta .input-group .btn {
    border-radius: 0;
    border-color: var(--bs-border-color);
    color: var(--v2-gris-texto);
}

.acceso_pie {
    font-size: .8125rem;
    color: #8a9199;
    text-align: center;
    margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ *
 * Área privada (provisional)
 * ------------------------------------------------------------------ */

.privada_cabecera {
    background-color: var(--v2-azul);
    color: #fff;
    padding: .75rem 0;
}

.privada_cabecera a {
    color: #fff;
}