/*
 * Pantalla de inicio de sesión (Bootstrap 5) - layout-signin.phtml
 * Misma estructura que SGE, con los colores de Tengo Comunicaciones.
 */
html,
body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #DFDFDF;
}

.form-signin {
    max-width: 330px;
    padding: 1rem;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Espacio para el botón de mostrar/ocultar contraseña */
.form-signin input[name="password"] {
    padding-right: 2.75rem;
}

/* Botón principal con el azul de la marca Tengo */
.form-signin .btn-primary {
    --bs-btn-bg: #333A66;
    --bs-btn-border-color: #333A66;
    --bs-btn-hover-bg: #282E52;
    --bs-btn-hover-border-color: #282E52;
    --bs-btn-active-bg: #1F2441;
    --bs-btn-active-border-color: #1F2441;
    --bs-btn-disabled-bg: #333A66;
    --bs-btn-disabled-border-color: #333A66;
    --bs-btn-focus-shadow-rgb: 51, 58, 102;
}

.form-signin .form-control:focus {
    border-color: #8A90B8;
    box-shadow: 0 0 0 .25rem rgba(51, 58, 102, .25);
}

.form-signin .marca-eme a {
    color: #333A66;
    text-decoration: none;
    font-weight: 600;
}

.form-signin .marca-eme a:hover {
    text-decoration: underline;
}