/* =====================================================================
   SSO IMAP — tema
   ---------------------------------------------------------------------
   A identidade e a mesma de imap.org.br: azul-marinho profundo, azul de
   marca, Jura nos titulos e Open Sans no texto. Os tokens abaixo sao os
   mesmos nomes que o tema do site usa (--cor1..4), para que quem mexe la
   reconheca aqui.

   Carrega DEPOIS do bootstrap e re-tematiza pelas variaveis --bs-*, em
   vez de brigar com as classes: as paginas do painel continuam usando
   card, table, btn e form-control normalmente, e ganham a identidade sem
   reescrever marcacao.
   ===================================================================== */

:root {
    /* Marca — amostrados do tema de imap.org.br */
    --cor1b: #3ab8ff;   /* azul claro: destaques, foco */
    --cor1:  #3081ca;   /* azul de marca: acao primaria */
    --cor2:  #032f47;   /* marinho profundo: barra, titulos */
    --cor3:  #011a28;   /* quase preto azulado: fundo do login */
    --cor4:  #004770;   /* marinho medio: links, hover */

    /* Neutros */
    --corg1: #666666;
    --corg2: #ababab;
    --corg3: #ececec;
    --corg4: #5e5e5e;
    --papel: #ffffff;
    --fundo: #f5f5f5;
    --linha: #e2e6ea;

    /* Estado — sobrios, nunca decorativos */
    --ok: #1b7a4b;
    --ok-fundo: #e6f4ec;
    --perigo: #b3261e;
    --perigo-fundo: #fdeceb;
    --aviso: #8a5a00;
    --aviso-fundo: #fdf3e0;

    --fonte: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --jura: 'Jura', var(--fonte);

    --raio: 6px;
    --raio-botao: 9px;
    --sombra: 0 1px 2px rgba(3, 47, 71, .06), 0 1px 3px rgba(3, 47, 71, .04);
    --sombra-alta: 0 10px 30px rgba(1, 26, 40, .18);

    /* Bootstrap, re-tematizado */
    --bs-primary: var(--cor1);
    --bs-primary-rgb: 48, 129, 202;
    --bs-body-bg: var(--fundo);
    --bs-body-color: #23303a;
    --bs-body-font-family: var(--fonte);
    --bs-link-color: var(--cor4);
    --bs-link-hover-color: var(--cor1);
    --bs-border-color: var(--linha);
    --bs-border-radius: var(--raio);
}

/* Coluna de altura cheia: o rodape desce para o fim da JANELA quando a pagina
   e curta, em vez de parar logo abaixo do conteudo e deixar um vazio embaixo
   dele. O login ja fazia isto por conta propria; agora vale para o painel e
   para "Minha conta" tambem, que sao justamente as telas curtas. */
body {
    font-family: var(--fonte);
    background-color: var(--fundo);
    color: #23303a;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* O bloco do conteudo e quem cresce; cabecalho e rodape ficam do tamanho que
   tem. */
.sso-conteudo { flex: 1 0 auto; }

body > header, body > footer { flex: none; }

h1, h2, h3, h4, h5, h6, .fonte-titulo {
    font-family: var(--jura);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cor2);
    text-wrap: balance;
}

/* A escala vai ate h6 de proposito. Sem h4/h5/h6 aqui, eles caiam no padrao do
   Bootstrap (h4 = 1.5rem), que e MAIOR que o h3 desta folha (1.1rem): uma
   subsecao aparecia maior que a secao que a contem. Cada degrau abaixo do
   anterior, sempre. */
h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
h4 { font-size: .98rem; }
h5 { font-size: .92rem; }
h6 { font-size: .86rem; }

h4, h5, h6 { letter-spacing: 0; }

a { text-underline-offset: 2px; }

/* --- Barra superior ------------------------------------------------- */

.navbar.sso-barra {
    background: var(--cor2);
    border-bottom: 3px solid var(--cor1);
    box-shadow: var(--sombra);
    padding-block: .55rem;
}

.sso-barra .navbar-brand {
    font-family: var(--jura);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .02em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.sso-barra .navbar-brand:hover { color: var(--cor1b); }

/* Marca: o logotipo institucional do IMAP (o mesmo arquivo de imap.org.br,
   versao branca) e, depois de um divisor, o nome do produto. E a arquitetura
   de marca de sempre: a instituicao primeiro, o sistema em seguida. */
.sso-logo {
    height: 24px;
    width: auto;
    display: block;
}

.sso-logo--grande { height: 32px; }

.sso-divisor {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .28);
    display: inline-block;
}

.sso-produto {
    font-family: var(--jura);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .16em;
    color: var(--cor1b);
}

/* A chave e o icone do produto: aparece no favicon, na arte de
   compartilhamento e onde um simbolo quadrado for preciso. */
.sso-chave {
    width: 26px;
    height: 26px;
    flex: none;
}

.sso-barra .nav-link {
    color: rgba(255, 255, 255, .78);
    font-size: .93rem;
    padding-inline: .8rem;
    border-radius: var(--raio);
}

.sso-barra .nav-link:hover,
.sso-barra .nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }

.sso-barra .nav-link.active {
    color: #fff;
    background: rgba(58, 184, 255, .16);
    box-shadow: inset 0 -2px 0 var(--cor1b);
}

.sso-barra .navbar-text,
.sso-barra .nav-item .btn-link { color: rgba(255, 255, 255, .72); }

.sso-barra .navbar-toggler {
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.sso-barra .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Canto da conta (na barra escura) -------------------------------- */

.sso-conta { gap: .15rem; }

.sso-conta__inicial {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: rgba(58, 184, 255, .18);
    border: 1px solid rgba(58, 184, 255, .45);
    color: #fff;
    font-family: var(--jura);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
}

.sso-conta__nome {
    color: rgba(255, 255, 255, .72);
    font-size: .86rem;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sair e Entrar: contornado no azul claro, para ler como acao sobre o
   marinho e nao se confundir com os links de navegacao.

   As propriedades sao escritas DIRETO, e nao so pelas variaveis --bs-btn-*.
   O .btn do Bootstrap resolve `color: var(--bs-btn-color)` com o valor que
   ele mesmo declara, e qualquer coisa que redefina essas variaveis depois
   (um tema, um .btn-* que entre na classe, a folha do Identity.UI) devolve o
   botao ao cinza-escuro do corpo -- que sobre o marinho da barra some. Com a
   cor e a borda como propriedades comuns, o resultado nao depende de quem
   ganha a disputa pelas variaveis.

   O seletor leva .sso-barra na frente para ficar acima de qualquer .btn de
   uma classe so, venha de onde vier. */
.sso-barra .sso-sair,
.sso-sair {
    --bs-btn-color: #dff1fc;
    --bs-btn-bg: rgba(58, 184, 255, .12);
    --bs-btn-border-color: rgba(58, 184, 255, .55);
    --bs-btn-hover-color: var(--cor3);
    --bs-btn-hover-bg: var(--cor1b);
    --bs-btn-hover-border-color: var(--cor1b);
    --bs-btn-active-bg: var(--cor1b);
    --bs-btn-active-border-color: var(--cor1b);
    --bs-btn-active-color: var(--cor3);

    color: #dff1fc;
    background-color: rgba(58, 184, 255, .12);
    border: 1px solid rgba(58, 184, 255, .55);
    padding: .3rem .85rem;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.sso-barra .sso-sair:hover,
.sso-barra .sso-sair:focus-visible,
.sso-sair:hover,
.sso-sair:focus-visible {
    color: var(--cor3);
    background-color: var(--cor1b);
    border-color: var(--cor1b);
}

/* O foco pelo teclado tem que aparecer sobre o marinho: o anel padrao do
   Bootstrap e azul sobre azul e nao le. */
.sso-barra .sso-sair:focus-visible,
.sso-sair:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}

/* Empilhado no celular, o menu colapsa e o canto da conta vira uma coluna. */
@media (max-width: 767.98px) {
    .sso-conta { margin-top: .5rem; gap: .4rem; align-items: flex-start; }
    .sso-conta .btn { width: 100%; }
}

/* --- Blocos --------------------------------------------------------- */

.card {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.card-title { font-family: var(--jura); font-weight: 700; color: var(--cor2); }

.card-header, .card-footer { background: #fafcfd; border-color: var(--linha); }

/* Uma etiqueta curta acima do titulo, para dizer onde a pessoa esta. */
.sso-sobretitulo {
    font-family: var(--jura);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cor1);
    margin-bottom: .15rem;
}

.sso-cabecalho {
    border-bottom: 1px solid var(--linha);
    padding-bottom: .9rem;
    margin-bottom: 1.4rem;
}

/* --- Tabelas -------------------------------------------------------- */

.table { --bs-table-border-color: var(--linha); }

.table > thead th {
    font-family: var(--jura);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--corg4);
    background: #fafcfd;
    border-bottom: 1px solid var(--linha);
    white-space: nowrap;
}

.table > tbody td { vertical-align: middle; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Botoes --------------------------------------------------------- */

/* Cantos mais suaves que o resto da interface (--raio serve a caixa; botao e
   um alvo de toque, e o arredondamento maior o separa do campo ao lado), e
   altura de linha folgada para o rotulo nao encostar na borda. */
.btn {
    font-weight: 600;
    border-radius: var(--raio-botao);
    padding: .48rem 1rem;
    line-height: 1.35;
}

/* Nem todo botao e primario. Numa tela com seis acoes, seis botoes cheios
   gritam igual e nenhum vira o proximo passo -- que e exatamente o que a tela
   de duas etapas fazia. A regra desta interface:
     .btn-primary          -> a acao principal da secao, uma por secao
     .btn-outline-primary  -> as demais acoes seguras
     .btn-outline-danger   -> o que tira acesso ou apaga
   O primario perde um pouco de saturacao em relacao ao azul puro do Bootstrap:
   o azul da marca sobre branco ja tem contraste de sobra e cansa menos. */
.btn-primary {
    --bs-btn-bg: var(--cor1);
    --bs-btn-border-color: var(--cor1);
    --bs-btn-hover-bg: var(--cor4);
    --bs-btn-hover-border-color: var(--cor4);
    --bs-btn-active-bg: var(--cor2);
    --bs-btn-active-border-color: var(--cor2);
    --bs-btn-box-shadow: none;
    box-shadow: 0 1px 2px rgba(3, 47, 71, .14);
}

.btn-outline-primary {
    --bs-btn-color: var(--cor4);
    --bs-btn-border-color: #b9d3e6;
    --bs-btn-bg: var(--papel);
    --bs-btn-hover-bg: #eef5fa;
    --bs-btn-hover-color: var(--cor4);
    --bs-btn-hover-border-color: var(--cor1);
    --bs-btn-active-bg: #e2eef7;
    --bs-btn-active-color: var(--cor2);
    --bs-btn-active-border-color: var(--cor1);
}

.btn-outline-danger {
    --bs-btn-color: var(--perigo);
    --bs-btn-border-color: #e6b8b5;
    --bs-btn-bg: var(--papel);
    --bs-btn-hover-bg: var(--perigo-fundo);
    --bs-btn-hover-color: var(--perigo);
    --bs-btn-hover-border-color: var(--perigo);
}

/* Fileira de acoes: os botoes precisam de respiro entre si e quebram para a
   linha de baixo em tela estreita, em vez de encostarem um no outro. */
.sso-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

.sso-acoes form { margin: 0; }

/* Formulario de cartao: largura de leitura e espaco entre os campos vindo do
   proprio bloco, e nao de um mb-3 repetido em cada um -- que era o que fazia o
   ultimo campo colar no botao quando alguem esquecia a classe. */
.sso-formulario {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    max-width: 26rem;
}

.sso-formulario .form-floating { margin-bottom: 0; }

.sso-formulario .sso-acoes { margin-top: .35rem; }

/* O alerta dentro do cartao nao precisa da margem inteira do Bootstrap: ele ja
   esta dentro de um bloco com respiro. */
.card-body > .alert:last-of-type { margin-bottom: 1rem; }

/* --- Tela de ajustes ------------------------------------------------ */

/* Uma chave por bloco, separada por linha em vez de por cartao proprio: sao
   dezenove, e dezenove cartoes empilhados viram uma escada sem hierarquia. */
.sso-ajuste + .sso-ajuste {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--linha);
}

.sso-ajuste__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.sso-ajuste__selos { display: flex; flex-wrap: wrap; gap: .35rem; }

.sso-ajuste__chave {
    font-size: .74rem;
    color: var(--corg1);
    background: var(--corg3);
    border-radius: 4px;
    padding: .1rem .35rem;
}

.sso-ajuste__descricao { margin: .5rem 0 .75rem; max-width: 68ch; }

.sso-ajuste__forma {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 34rem;
}

.sso-ajuste__rodape {
    font-size: .74rem;
    color: var(--corg2);
}

/* --- Formularios ---------------------------------------------------- */

.form-control, .form-select {
    border-color: #cfd8de;
    border-radius: var(--raio);
    padding: .55rem .75rem;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--cor1);
    box-shadow: 0 0 0 .2rem rgba(58, 184, 255, .25);
}

.form-check-input:checked { background-color: var(--cor1); border-color: var(--cor1); }

.form-label { font-weight: 600; font-size: .9rem; color: var(--corg4); }

.form-floating > label { color: var(--corg1); }

/* --- Selos ---------------------------------------------------------- */

.badge, .sso-selo {
    font-family: var(--jura);
    font-weight: 600;
    letter-spacing: .03em;
}

.sso-selo {
    display: inline-block;
    font-size: .72rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--linha);
    background: #fff;
    color: var(--corg4);
    white-space: nowrap;
}

.sso-selo--ok      { color: var(--ok);      border-color: #b6dcc6; background: var(--ok-fundo); }

/* Titulo do cartao com o selo de situacao na mesma linha, o selo encostado na
   direita. Em tela estreita o selo desce, em vez de espremer o titulo. */
.sso-cartao__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.sso-cartao__topo > :is(h1, h2, h3, h4) { margin-bottom: 0; }
.sso-selo--perigo  { color: var(--perigo);  border-color: #edbcb8; background: var(--perigo-fundo); }
.sso-selo--aviso   { color: var(--aviso);   border-color: #e8d3a8; background: var(--aviso-fundo); }
.sso-selo--marca   { color: var(--cor4);    border-color: #b9d8ef; background: #eaf4fb; }

/* --- Avisos --------------------------------------------------------- */

.alert { border-radius: var(--raio); border-width: 1px; }

/* O resumo de validacao e o espaco de erro de campo existem na marcacao mesmo
   sem erro nenhum: o tag helper so os PREENCHE quando ha erro, e troca a classe
   para -error. Sem esconder a versao -valid, toda tela com formulario abria com
   uma faixa vermelha vazia em cima. A folha padrao do scaffold tinha esta regra;
   ela se perdeu quando o site.css virou sso.css. */
.validation-summary-valid,
.field-validation-valid { display: none; }
.alert-secondary { background: #fff; border-color: var(--linha); color: var(--corg4); }
.alert-warning { background: var(--aviso-fundo); border-color: #e8d3a8; color: var(--aviso); }
.alert-danger { background: var(--perigo-fundo); border-color: #edbcb8; color: var(--perigo); }
.alert-success { background: var(--ok-fundo); border-color: #b6dcc6; color: var(--ok); }

/* --- Minha conta ----------------------------------------------------- */

/* Menu lateral da area de conta: coluna sobria, sem as "pills" azuis do
   bootstrap, que competiam com a barra de cima. */
.sso-conta-area .nav-pills { gap: .15rem; }

.sso-conta-area .nav-pills .nav-link {
    color: var(--corg4);
    border-radius: var(--raio);
    padding: .5rem .8rem;
    font-size: .93rem;
    border-left: 3px solid transparent;
}

.sso-conta-area .nav-pills .nav-link:hover {
    background: #eef4f8;
    color: var(--cor4);
}

.sso-conta-area .nav-pills .nav-link.active {
    background: #eaf4fb;
    color: var(--cor2);
    font-weight: 600;
    border-left-color: var(--cor1);
}

/* Passos numerados do cadastro do autenticador. */
.sso-passos {
    list-style: none;
    counter-reset: passo;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.6rem;
}

.sso-passos > li {
    counter-increment: passo;
    position: relative;
    padding-left: 2.6rem;
}

.sso-passos > li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -.1rem;
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cor2);
    color: #fff;
    font-family: var(--jura);
    font-weight: 700;
    font-size: .9rem;
}

.sso-passos h3 { margin-bottom: .3rem; }

/* O QR e a chave, lado a lado no desktop e empilhados no celular. */
.sso-qr {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: #fff;
}

.sso-qr img {
    border-radius: 4px;
    flex: none;
}

.sso-qr__chave { min-width: 15rem; flex: 1; }

.sso-chave-secreta {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--cor2);
    background: var(--corg3);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: .45rem .7rem;
    word-break: break-all;
    user-select: all;
}

.sso-form-codigo { max-width: 20rem; }

/* Codigo de seis digitos: monoespacado e espacado, para conferir digito a digito. */
.sso-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.2rem;
    letter-spacing: .32em;
}

/* Codigos de recuperacao: em grade, para dar para conferir e copiar. */
.sso-codigos-recuperacao {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sso-codigos-recuperacao li {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    letter-spacing: .06em;
    background: var(--corg3);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: .4rem .6rem;
    text-align: center;
    user-select: all;
}

/* --- Rodape --------------------------------------------------------- */

.sso-rodape {
    margin-top: 3rem;
    border-top: 1px solid var(--linha);
    background: #fff;
    color: var(--corg1);
    font-size: .85rem;
}

/* Centralizado: sao duas linhas curtas de assinatura, nao uma barra de
   navegacao. Esparramadas nas pontas de uma tela larga, liam como dois
   fragmentos soltos em vez de um rodape so. */
.sso-rodape .container { padding-block: 1.1rem; }

/* O ano, uma linha abaixo e mais discreto: e referencia, nao informacao. */
.sso-rodape__ano {
    font-size: .78rem;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Login — a unica tela que qualquer pessoa do instituto ve.
   Cartao unico sobre o marinho da marca, sem barra de navegacao: quem
   chega aqui ainda nao tem para onde navegar.
   ===================================================================== */

body.sso-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cor3);
    background-image:
        radial-gradient(1100px 520px at 12% -10%, rgba(48, 129, 202, .40), transparent 60%),
        radial-gradient(900px 460px at 92% 8%, rgba(58, 184, 255, .22), transparent 62%);
    background-repeat: no-repeat;
}

/* O bloco de entrada fica centrado na altura util, e nao colado no topo:
   em tela larga e baixa (o caso do navegador do lado) o cartao ficava em cima
   e o rodape la embaixo, com um vazio no meio. min-height junto com o rodape
   fora do fluxo do grid resolve sem depender da altura da janela. */
.sso-login .sso-conteudo { display: flex; }

.sso-login main {
    flex: 1 0 auto;
    width: 100%;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 5vh, 4rem) 1rem;
}

/* O rodape nao encosta no cartao. O `main` cresce e centraliza, entao numa
   tela alta sobra vazio e a distancia aparece sozinha; numa tela baixa o
   `main` encolhe ate o conteudo e o cartao ficava a poucos pixels da linha do
   rodape. A margem garante o respiro nos dois casos, e ela e MINIMA porque o
   `main` ja tem flex-grow: nao empurra o rodape para fora da tela. */
.sso-login .sso-rodape {
    background: transparent;
    border-top-color: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .55);
    margin-top: clamp(2rem, 6vh, 4.5rem);
    flex: none;
}

.sso-entrada { width: 100%; max-width: 26rem; }

/* Respiro entre a marca e o cartao: encostadas, as duas liam como um bloco
   so, e a marca perdia o papel de assinatura da pagina. */
.sso-entrada__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-bottom: 2.6rem;
    font-family: var(--jura);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: .04em;
    color: #fff;
}

.sso-entrada__cartao {
    background: var(--papel);
    border-radius: 10px;
    box-shadow: var(--sombra-alta);
    padding: 2rem 1.75rem 1.75rem;
}

.sso-entrada__cartao h1 { font-size: 1.5rem; margin-bottom: .2rem; }

.sso-entrada__sub {
    color: var(--corg1);
    font-size: .92rem;
    margin-bottom: 1.5rem;
}

.sso-entrada .form-floating { margin-bottom: .85rem; }

.sso-entrada .btn-primary { padding-block: .62rem; font-size: 1rem; }

/* Separador "ou" entre a senha e o provedor externo. */
.sso-ou {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.35rem 0 1.1rem;
    color: var(--corg2);
    font-size: .78rem;
    font-family: var(--jura);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sso-ou::before, .sso-ou::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--linha);
}

.sso-google {
    --bs-btn-color: #23303a;
    --bs-btn-border-color: #cfd8de;
    --bs-btn-hover-bg: #f5f8fa;
    --bs-btn-hover-border-color: var(--cor1);
    --bs-btn-hover-color: #23303a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    background: #fff;
    font-weight: 600;
}

.sso-google svg { width: 18px; height: 18px; flex: none; }

.sso-entrada__nota {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linha);
    color: var(--corg1);
    font-size: .82rem;
    text-align: center;
}

/* "Lembrar deste dispositivo", no segundo fator. Sem margem propria a caixa
   encostava no campo do codigo e no botao. */
.sso-entrada__lembrar {
    margin: .25rem 0 1.15rem;
    font-size: .9rem;
    color: var(--corg1);
}

.sso-entrada__lembrar .form-check-input { margin-top: .2rem; }

/* --- Telas de recado ------------------------------------------------
   Conta bloqueada, acesso negado, senha redefinida, saiu. Sao o MESMO cartao
   da entrada, mas sem formulario: o que elas tem e um titulo, uma explicacao
   e o proximo passo. Centralizadas porque nao ha campo para o olho seguir. */

.sso-recado { text-align: center; }

.sso-recado h1 { margin-bottom: .35rem; }

.sso-recado .sso-entrada__sub { margin-bottom: 1.5rem; }

/* A faixa de cor no topo diz o tom do recado antes de a pessoa ler: nada de
   icone, que precisaria de mais um arquivo e nao sobrevive a leitor de tela. */
.sso-recado--alerta { border-top: 3px solid var(--aviso); }

.sso-recado--certo { border-top: 3px solid var(--ok); }

/* O iframe de front-channel logout avisa cada sistema consumidor para encerrar
   a propria sessao. Nao pode sair da pagina e nao pode aparecer. */
.signout { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .btn, .nav-link, .form-control { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
}

/* Foco visivel sempre, inclusive sobre o marinho. */
:focus-visible { outline: 2px solid var(--cor1b); outline-offset: 2px; }