/* =====================================================================
   poli360 — CAMADA DE TEMA

   Este arquivo é carregado DEPOIS do style.css, de propósito. Ele não
   substitui nada: só vence na cascata onde precisa mudar de cor ou de
   sombra. Nenhuma linha do style.css foi tocada, nenhuma classe do HTML
   mudou de nome, nenhuma tela foi reescrita.

   Isso importa porque o sistema está em produção. Se algo aqui não
   agradar, o jeito de desfazer é apagar UMA linha do includes/header.php
   (o <link> deste arquivo) — e o Painel volta exatamente ao que era,
   sem migração, sem risco e sem perder conteúdo nenhum.

   ---------------------------------------------------------------------
   O QUE MUDA, E POR QUÊ

   Duas queixas concretas:

   1. "o fundo está com um azul que não está bonito"
      O fundo era #eef2f9 — azul de verdade (r238 g242 b249). Ao lado do
      branco do cartão, o azul aparecia como uma camada colorida atrás de
      tudo. Agora é #edeef4: quase o mesmo claro, mas neutro. De quebra,
      o contraste com o cartão branco SUBIU (1,16 contra 1,12) — o cartão
      passa a se destacar mais, não menos.

   2. "tudo está muito branco"
      O problema não era o branco do cartão: era a falta de cor no resto.
      Os quadradinhos de ícone dos indicadores estavam em tons quase
      cinzas (#EEF6F5, #FAF3E4...), então a tela inteira virava branco
      sobre branco. Aqui eles ganham cor de verdade — azul, verde, âmbar,
      violeta, vermelho e ciano —, e as sombras dos cartões ficam um
      pouco mais presentes, para o cartão flutuar em vez de encostar no
      fundo.

   Todo par de cor foi conferido no contraste (AA, mínimo 4,5:1). Os
   valores estão anotados linha a linha.
   ===================================================================== */

:root {
  /* ---------- o fundo ----------
     Cinza de verdade. O #eef2f9 original tinha 11 pontos de azul a mais
     que de vermelho -- por isso a tela toda parecia ter uma camada azul
     por trás. Este tem 3 pontos: o olho lê como cinza puro, e o pouco
     que sobra só evita o cinza "sujo" de fotocópia.

     Também está um degrau mais fundo, o que faz o cartão branco subir:
     o contraste entre fundo e cartão passou de 1,12 (original) para
     1,20. É o cartão que ganha, não o fundo. */
  --bg: #e9eaec;
  --surface-2: #f2f3f5;
  --line: #dbdcdf;
  --line-soft: #e5e6e9;

  /* ---------- sombras ----------
     Um pouco mais presentes que antes. É isso que tira a sensação de
     "tudo branco": não é mudar a cor do cartão, é fazer ele descolar do
     fundo. A sombra é difusa e de baixa opacidade — presença, não peso. */
  --shadow-sm: 0 1px 2px rgba(20,22,28,.05), 0 4px 14px rgba(20,22,28,.07);
  --shadow-md: 0 4px 10px rgba(20,22,28,.06), 0 16px 34px rgba(20,22,28,.11);
  --shadow-lg: 0 10px 22px rgba(20,22,28,.08), 0 30px 64px rgba(20,22,28,.16);

  /* ---------- cantos ----------
     Cartão um pouco mais arredondado, no espírito do modelo de
     referência. Suave: 16 -> 18. */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;

  /* ---------- o azul de ação ----------
     O #24487A era um azul-aço muito fechado: sério, mas apagado, e é
     parte da razão de a tela parecer sem vida. Este continua na mesma
     família (nada de azul de aplicativo), só que respira.
     Branco sobre ele: 6,12:1 — folgado em AA, e AAA para texto grande. */
  --brand: #2b5fb8;
  --brand-forte: #1f4a94;
  --brand-suave: #eaf1fd;
  --brand-borda: #c3d6f2;

  /* Verde de confirmação um pouco mais vivo, mesma família. */
  --ok: #0f7a52;
  --ok-bg: #e3f6ee;
}

/* =====================================================================
   OS INDICADORES DO TOPO

   Era aqui que a tela mais parecia "branca demais": seis cartões
   brancos, cada um com um quadradinho quase cinza. Agora cada
   quadradinho tem cor própria, e o olho separa um indicador do outro
   antes mesmo de ler o número.

   Os tons são pastel no fundo e fechados no ícone — cor suficiente para
   dar vida, escura o bastante para o ícone continuar legível.
   ===================================================================== */

.kpi-card {
  border-color: var(--line-soft);
  padding: 22px 16px 20px;
}

.kpi-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
}
.kpi-icon .icon { width: 20px; height: 20px; }

/* 1 · azul       — #1d4ed8 sobre #e6efff = 5,79:1 */
.kpi-card .kpi-icon                     { background:#e6efff; color:#1d4ed8; }
/* 2 · verde      — #0f7a52 sobre #e3f6ee = 4,76:1 */
.kpi-card:nth-child(6n+2) .kpi-icon     { background:#e3f6ee; color:#0f7a52; }
/* 3 · âmbar      — #8a5a06 sobre #fdf0dc = 5,27:1 */
.kpi-card:nth-child(6n+3) .kpi-icon     { background:#fdf0dc; color:#8a5a06; }
/* 4 · violeta    — #4c3bcf sobre #eceaff = 6,27:1 */
.kpi-card:nth-child(6n+4) .kpi-icon     { background:#eceaff; color:#4c3bcf; }
/* 5 · vermelho   — #b42318 sobre #feeaea = 5,69:1 */
.kpi-card:nth-child(6n+5) .kpi-icon     { background:#feeaea; color:#b42318; }
/* 6 · ciano      — #0e6c8a sobre #e2f2f9 = 5,18:1 */
.kpi-card:nth-child(6n+6) .kpi-icon     { background:#e2f2f9; color:#0e6c8a; }

/* O cartão de destaque (o escuro, no fim da fileira) ganha o mesmo
   arredondamento e uma sombra à altura — ele é o único escuro da linha,
   e é ele que fecha a leitura. */
.kpi-card.highlight { box-shadow: 0 6px 16px rgba(10,16,36,.20), 0 20px 44px rgba(10,16,36,.22); }

/* =====================================================================
   CARTÕES E PAINÉIS

   Mesmo branco de antes. O que muda é a borda (mais discreta) e a
   sombra (mais presente) — a combinação que faz o cartão parecer
   apoiado sobre o fundo, e não desenhado nele.
   ===================================================================== */

section.panel,
.card,
.painel-card {
  border-color: var(--line-soft);
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   TABELAS

   O cabeçalho ganha o cinza-lavanda do fundo, para separar do corpo
   branco sem precisar de linha grossa. A faixa de hover fica no azul
   suave da marca — é o mesmo azul dos botões, então a tela continua
   falando uma língua só.
   ===================================================================== */

table thead th {
  background: var(--surface-2);
  border-bottom-color: var(--line);
  /* O style.css escreve o cabeçalho em BRANCO, porque lá o fundo era a
     faixa navy. Quando este arquivo trocou a faixa pelo cinza-lavanda,
     a cor da letra ficou para trás: branco sobre #f2f3f5 dá 1,11:1 de
     contraste -- o título da coluna simplesmente sumia, em toda tabela
     do painel. Com o navy dá 15,1:1.
     A borda vertical tinha o mesmo problema: era branca a 14%. */
  color: var(--navy);
  border-right-color: var(--line);
}
table tbody tr:hover > td { background: var(--brand-suave); }

/* =====================================================================
   BOTÕES

   O primário herda o azul novo pelo --brand, então não precisa de regra
   aqui. O fantasma só acompanha a borda mais discreta.
   ===================================================================== */

.btn.ghost { border-color: var(--line); }
.btn.ghost:hover { background: var(--brand-suave); border-color: var(--brand-borda); }

/* =====================================================================
   CAMPOS DE FORMULÁRIO

   Fundo branco (era o do sistema) e o anel de foco no azul novo. O anel
   é o que diz "é aqui que você está digitando" para quem navega por
   teclado — vale a cor viva.
   ===================================================================== */

input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43,95,184,.16);
}

/* =====================================================================
   RESPEITO A QUEM PEDE MENOS MOVIMENTO

   O sistema já tem transições curtas nos cartões. Quem marcou "reduzir
   movimento" no aparelho não deve ver nenhuma.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kpi-card, section.panel, .card { transition: none; }
}


/* =====================================================================
   A TELA DE ENTRAR
   =====================================================================

   A porta do sistema. É a primeira coisa que a equipe vê todo dia, e a
   primeira coisa que um cliente novo vê depois de fechar -- então ela
   fala pelo produto antes de qualquer tela.

   O desenho é o mesmo da página comercial: navy profundo, a malha
   discreta ao fundo, dois halos fora de foco e o anel do "360". Site e
   sistema passam a parecer a mesma casa, que era o que faltava.

   Aqui também nada foi reescrito: as regras abaixo só vencem na cascata
   sobre as de .login-* que já existiam no style.css. Apagando o <link>
   do tema no login.php, a tela volta ao que era.
   ===================================================================== */

.login-body {
  background: radial-gradient(120% 130% at 50% -20%, #1d2c55 0%, var(--navy) 48%, var(--navy-2) 100%);
  position: relative;
  overflow: hidden;
}

/* A malha e os halos são pintados em CSS -- nenhuma imagem para baixar,
   e a tela de login continua abrindo instantaneamente. */
.login-body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 0%, transparent 78%);
  pointer-events: none;
}
.login-body::after {
  content: "";
  position: fixed;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: #2b5fb8;
  filter: blur(120px);
  opacity: .34;
  top: -180px; right: -140px;
  pointer-events: none;
}

.login-shell { position: relative; z-index: 1; gap: 26px; }

/* ---- a marca ---- */

.login-top-brand { gap: 14px; }

/* O anel do 360, desenhado em SVG dentro do proprio login.php. O
   .login-top-logo era um <img> de arquivo; agora e vetor -- nao depende
   de imagem no servidor e fica nitido em qualquer tela. */
.login-top-logo {
  width: 68px; height: 68px;
  border-radius: 0;
  box-shadow: none;
}

.login-top-brand-text {
  font-family: "Inter", sans-serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
  text-shadow: none;
  line-height: 1;
}
.login-top-brand-text em { font-style: normal; color: #5b93ff; }
.login-top-brand-sub {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8fa3c8;
}

/* ---- o cartão ---- */

.login-card {
  max-width: 412px;
  padding: 38px 34px 32px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 20px 50px rgba(4,9,24,.42), 0 60px 120px rgba(4,9,24,.3);
}

/* O "Painel de Gestão Estratégica" saiu daqui: ele agora fica embaixo da
   marca, no topo, onde não disputa espaço com o título da tela. */
.login-brand { display: none; }

.login-card h1 {
  font-size: 23px;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}
.login-card .panel-sub {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 26px;
  color: var(--muted);
}

.login-card .form-field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.login-card .form-field input {
  padding: 13px 15px;
  font-size: 15px;
  border-radius: 11px;
}

.login-submit {
  padding: 14px 20px;
  font-size: 15.5px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(31,74,148,.3), 0 10px 26px rgba(43,95,184,.28);
}
.login-submit:hover { box-shadow: 0 3px 8px rgba(31,74,148,.34), 0 16px 34px rgba(43,95,184,.34); }

/* ---- o rodapé da tela ---- */

.login-rodape {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12.5px;
  color: #7e90b4;
  line-height: 1.6;
}
.login-rodape a { color: #9db4dd; font-weight: 600; }
.login-rodape a:hover { color: #fff; }

@media (max-width: 480px) {
  .login-top-logo { width: 58px; height: 58px; }
  .login-top-brand-text { font-size: 24px; }
  .login-card { padding: 30px 22px 26px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-submit { transition: none; }
}

/* ================================================================
   A BARRA LATERAL VOLTA A ACOMPANHAR A ROLAGEM

   O defeito: descendo a página, o menu escuro ficava para trás e o
   conteúdo seguia sozinho. Embaixo sobrava um vazio claro do lado
   esquerdo, do tamanho do que faltava.

   A causa não estava na barra. A barra sempre foi "position: sticky",
   que é o certo. O que a matava era uma linha lá no style.css:

       html, body { overflow-x: hidden; }

   "overflow" diferente de "visible" transforma o elemento numa caixa
   de rolagem própria. Com isso o <body> virou uma caixa que nunca
   rola -- quem rola é o documento. E "sticky" gruda na caixa de
   rolagem mais próxima: a barra passou a grudar no <body>, que está
   parado, então ela simplesmente descia junto com a página e sumia.
   (O próprio style.css já sabia disso: na regra do celular há um
   comentário explicando que ali se usou "fixed" justamente porque o
   sticky "rola junto e some".)

   A correção é trocar "hidden" por "clip" no <body>:

     * "hidden"  -> corta o que passa da largura E cria caixa de rolagem
     * "clip"    -> corta o que passa da largura e NÃO cria caixa nenhuma

   Ou seja: continua impedindo a barra de rolagem horizontal (que era
   o motivo de a linha existir), e devolve o sticky. O <html> segue com
   "hidden" como estava, e é ele quem rola.

   Para navegador antigo que não conheça "clip", a linha é ignorada e
   tudo fica exatamente como está hoje -- nada quebra.
   ================================================================ */
body { overflow-x: clip; }

/* A barra passa a ocupar a altura da janela inteira, sempre. Assim o
   fim do conteúdo e o fim do menu nunca mais ficam em alturas
   diferentes: o escuro acompanha até o rodapé.
   (100dvh no celular: no Android e no iPhone a barra de endereço
   entra e sai, e "vh" congela no tamanho maior, deixando uma sobra.) */
.sidebar { height: 100vh; height: 100dvh; }

/* O conteúdo precisa ter, no mínimo, a altura da janela. Numa tela
   curta -- um relatório com duas linhas -- sem isso o fundo claro
   terminava logo abaixo do último cartão e o escuro continuava,
   invertendo o mesmo desencontro. */
.app-shell > .content { min-height: 100vh; min-height: 100dvh; }

@media (max-width: 860px) {
  /* No celular o menu é uma gaveta por cima da tela: nada disso vale. */
  .app-shell > .content { min-height: 0; }
}

/* ================================================================
   OS AVISOS VOLTAM A SER TEXTO CORRIDO
   ----------------------------------------------------------------
   `.alert` nasceu com `display:flex`. Enquanto o aviso era uma frase
   seca ninguém percebeu -- mas todo <strong>, <code> e <a> dentro dele
   vira um ITEM DE FLEX, e itens de flex ficam lado a lado, em colunas.
   Um aviso como

       As colunas <strong>Indicação</strong>, <strong>Data do 1º
       pagamento</strong> e ... importe <code>arquivo.sql</code> ...

   saía picado em cinco colunas empilhadas, quase ilegível. São 241
   avisos no painel: consertar a marcação de cada um seria trocar de
   lugar o mesmo problema.

   Aqui o aviso volta a ser um bloco de texto normal e o ícone (que é o
   ::before) passa a flutuar à esquerda -- `flow-root` é o que segura o
   flutuante dentro da caixa, sem o truque do clearfix.

   Desfazer: apagar este bloco. O <link> do tema.css já é opcional.
   ================================================================ */
.alert { display: flow-root; }
.alert::before { float: left; margin-right: 10px; }

/* O aviso "warning" empurrava um formulário para a direita com
   `margin-left:auto`, que só existe no flex. Sem flex, quem faz isso é
   o flutuante do outro lado. */
.alert.warning .inline-form { float: right; margin-left: 12px; }

/* =====================================================================
   O CABEÇALHO DA COLUNA DE AÇÕES

   Três listas (Colaborador, Locações, Termos/Autorizações/Diversos)
   grudam a coluna de ações na direita e pintam o `th` dela de navy —
   herança da época em que TODO cabeçalho era navy. Depois que o tema
   trocou a faixa pelo cinza-lavanda, sobrou um retângulo escuro solto
   no canto, que ao rolar parecia uma tarja por cima da tabela.
   ===================================================================== */
body.tab-contratos #lista-colaboradores table th:last-child,
body.tab-contratos_locacao #lista-locacoes table th:last-child,
body.tab-contratos_termos #lista-documentos table th:last-child,
body.tab-contratos_autorizacoes #lista-documentos table th:last-child,
body.tab-contratos_diversos #lista-documentos table th:last-child {
  background: var(--surface-2);
  color: var(--navy);
}

/* =====================================================================
   "JÁ LIGOU PARA O ELEITOR?"

   O botão de ligação usa o mesmo cinza dos demais quando ninguém ligou
   ainda, e fica navy sólido quando alguém já ligou. Sem isso a coluna
   inteira ficava igual e a única pista era a data pequena embaixo --
   um estado que só se lê parando para ler não é estado, é enigma.
   ===================================================================== */
.icon-btn.ligou.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* =====================================================================
   O DESTAQUE DA ESTIMATIVA DE VOTOS

   É o número que resume a campanha inteira — coordenadores e lideranças
   + cabos eleitorais + eleitores estimados. Ele estava disperso em três
   telas; aqui ele aparece uma vez, grande, com a conta escrita embaixo
   para ninguém precisar acreditar: dá para conferir a soma no olho.
   ===================================================================== */
/* `section.panel` em style.css pinta o fundo de branco com
   especificidade (0,1,1) — uma classe sozinha não vence isso. Daí o
   seletor repetir o `section.panel` aqui. */
section.panel.est-destaque {
  background: linear-gradient(135deg, var(--navy) 0%, #17244a 100%);
  color: #fff;
  border-color: transparent;
}
.est-destaque .panel-sub,
.est-destaque .field-hint { color: rgba(255,255,255,.72); }
.est-destaque .field-hint a,
.est-destaque .panel-sub a,
.est-destaque code { color: #fff; }
.est-destaque .field-hint a,
.est-destaque .panel-sub a { text-decoration: underline; }
.est-destaque code { background: rgba(255,255,255,.14); }

.est-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: flex-end;
  justify-content: space-between;
}
.est-numero { display: flex; flex-direction: column; gap: 2px; min-width: 260px; }
.est-rotulo {
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.66);
}
.est-valor {
  font-size: 62px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.est-conta { font-size: 13px; color: rgba(255,255,255,.78); }

.est-parcelas { display: flex; flex-wrap: wrap; gap: 10px; }
.est-parcela {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 132px;
  display: flex; flex-direction: column; gap: 2px;
}
.est-parcela-valor { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-parcela-rotulo { font-size: 11.5px; color: rgba(255,255,255,.7); }

/* As duas tabelas do destaque vivem dentro do bloco escuro, então
   voltam ao fundo claro: tabela sobre gradiente não se lê. */
.est-tabelas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.est-titulo { font-size: 14px; margin: 0 0 8px; color: rgba(255,255,255,.9); }
/* As tabelas voltam ao fundo claro e à cor de texto normal: elas
   herdariam o branco do bloco escuro e sumiriam sobre o próprio
   fundo. */
.est-tabelas .full-table-wrap { background: var(--surface); border-radius: 12px; color: var(--navy); }
/* `.full-table-wrap table` tem min-width 640px para poder rolar no
   celular. Aqui a tabela vive dentro de meia largura de painel — o
   min-width empurrava a última coluna para fora do cartão. Estas duas
   têm três colunas curtas e cabem sem ele. */
.est-tabelas .full-table-wrap table { min-width: 0; }
.est-tabelas table, .est-tabelas table td { color: var(--text); }
.est-tabelas table th { color: var(--navy); }
.est-tabelas table td strong { color: var(--navy); }
.est-barra { background: rgba(16,26,51,.10); border-radius: 6px; height: 9px; overflow: hidden; }
.est-barra > div { height: 100%; border-radius: 6px; }

@media (max-width: 640px) {
  .est-valor { font-size: 46px; }
  .est-parcela { min-width: 108px; padding: 10px 13px; }
}

/* =====================================================================
   DE ONDE VEM CADA ELEITOR

   A origem zerada continua na tela, mais apagada. Uma origem que some
   quando está em zero faz a pessoa achar que ela não existe — e o zero
   é uma informação, não um silêncio.
   ===================================================================== */
.origem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.origem-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 2px;
}
.origem-card.vazia { opacity: .55; }
.origem-valor { font-size: 26px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.origem-rotulo { font-size: 13px; font-weight: 600; color: var(--navy); }
.origem-pct { font-size: 11.5px; color: var(--muted); }

/* =====================================================================
   VOTO CONFIRMADO E POSSÍVEL VOTO

   Dois botões na mesma célula, com cores que dizem coisas diferentes:
   verde para o voto confirmado (é certeza) e âmbar para o possível voto
   (é aposta). Apagados quando não marcados — a coluna tem de dar para
   ler de relance, não uma linha de cada vez.
   ===================================================================== */
.voto-celula { display: flex; gap: 4px; justify-content: center; }
.voto-selo { margin-top: 4px; text-align: center; }
.voto-selo .status-pill { font-size: 10.5px; padding: 2px 7px; }

.icon-btn.voto-conf { background: var(--success-bg); color: var(--success); border-color: rgba(21,128,61,.16); }
.icon-btn.voto-poss { background: var(--warn-bg);    color: var(--warn);    border-color: rgba(146,64,14,.16); }
.icon-btn.voto-conf.active { background: var(--success); color: #fff; }
.icon-btn.voto-poss.active { background: var(--warn);    color: #fff; }

/* A barra de filtros do Cadastro Eleitor cresceu de dois para oito
   campos: eles quebram em linhas em vez de espremerem tudo numa só. */
#lista-contatos .filter-form { flex-wrap: wrap; align-items: flex-end; }
#lista-contatos .filter-form .filter-field { min-width: 150px; }


/* =====================================================================
   ESQUECI MINHA SENHA

   O link fica DENTRO do cartão de entrada, abaixo do botão, e não no
   rodapé escuro: quem esqueceu a senha acabou de errá-la ali em cima --
   a saída tem de estar onde o olho já está.
   ===================================================================== */
.login-esqueci { margin: 14px 0 0; text-align: center; font-size: 13.5px; }
.login-esqueci a {
  color: var(--brand, #2b5fb8);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(43,95,184,.28);
}
.login-esqueci a:hover { border-bottom-color: currentColor; }

/* O botão só libera quando a senha passa em todos os requisitos (ver
   assets/app.js). Sem esta regra ele fica com a MESMA cara de botão
   pronto: a pessoa clica, nada acontece, e não há como adivinhar por
   quê -- a lista acesa acima é a explicação, e o botão apagado é o que
   manda o olho subir até ela. */
#senha-enviar:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* O relógio da página no rodapé (só para quem administra) -- discreto de
   propósito: é ferramenta de diagnóstico, não informação de trabalho. */
.rodape-tempo { display:inline-block; margin-top:4px; font-size:11.5px; opacity:.65; }