:root {
  --tinta: #16181d;
  --tinta-fraca: #5f6572;
  --linha: #e3e6ec;
  --fundo: #f6f7f9;
  --papel: #ffffff;
  --marca: #1f3864;
  --marca-clara: #eef2fa;
  --alto: #b3261e;
  --alto-fundo: #fdf0ef;
  --medio: #9a6400;
  --medio-fundo: #fdf6e8;
  --bom: #1c6c3c;
  --bom-fundo: #edf7f1;
  --raio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

a { color: var(--marca); }

/* ---------------------------------------------------------------- topo */

.topo {
  background: var(--marca);
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 58px;
}

.marca {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

.marca-ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: #7fd1a4; display: inline-block;
}

.menu { display: flex; gap: 4px; flex: 1; }

.menu a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 14px;
}

.menu a:hover { background: rgba(255,255,255,.12); color: #fff; }
.menu a.ativo { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }

.selo {
  background: var(--alto); color: #fff;
  border-radius: 20px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; margin-left: 5px;
}

.conta { font-size: 13px; color: rgba(255,255,255,.78); display: flex; gap: 14px; align-items: center; }
.conta a { color: rgba(255,255,255,.78); text-decoration: none; }
.conta a:hover { color: #fff; }

/* -------------------------------------------------------------- layout */

/* A barra de cima ocupa a tela inteira; com o conteúdo em 1080px sobrava um
   palmo vazio de cada lado num monitor comum, e as duas coisas não pareciam da
   mesma página. O teto continua existindo para o texto não virar linha longa
   demais de ler num monitor largo. */
.pagina { max-width: 1760px; margin: 0 auto; padding: 26px 18px 64px; }

.cabecalho-pagina {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}

h1 { font-size: 25px; margin: 0 0 3px; letter-spacing: -0.3px; }
h2 { font-size: 17px; margin: 0 0 14px; letter-spacing: -0.2px; }
.subtitulo { color: var(--tinta-fraca); font-size: 14px; margin: 0; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 18px;
}

.grade { display: grid; gap: 18px; }
.grade-2 { grid-template-columns: 1fr 1fr; }
.grade-4 { grid-template-columns: repeat(4, 1fr); }
.grade-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) {
  .grade-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .grade-2, .grade-4, .grade-5 { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; height: auto; padding: 10px 16px; }
}

/* ------------------------------------------------------------ métricas */

.metrica { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.metrica .valor { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; }
.metrica .rotulo { font-size: 12.5px; color: var(--tinta-fraca); margin-top: 3px; }
.metrica.perigo { background: var(--alto-fundo); border-color: #f2c9c6; }
.metrica.perigo .valor { color: var(--alto); }
/* O cartão dos mandados leva à lista deles. Um cartão que se comporta como
   cartão, não como link: sem sublinhado e sem azul, só o cursor denuncia. */
a.metrica { display: block; text-decoration: none; color: inherit; }
a.metrica:hover { border-color: var(--tinta-fraca); }

/* ------------------------------------------------------------- alertas */

.alerta {
  border: 1px solid var(--linha);
  border-left: 4px solid var(--tinta-fraca);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 11px;
  background: var(--papel);
}

.alerta.alta { border-left-color: var(--alto); background: var(--alto-fundo); border-color: #f2c9c6; }
.alerta.media { border-left-color: var(--medio); background: var(--medio-fundo); border-color: #f0e2c2; }

.alerta .faixa {
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; margin-bottom: 5px;
}
.alerta.alta .faixa { color: var(--alto); }
.alerta.media .faixa { color: var(--medio); }

.alerta .titulo { font-weight: 650; font-size: 15.5px; }
.alerta .cpf { font-weight: 400; color: var(--tinta-fraca); }
.alerta .detalhe { font-size: 13.5px; color: var(--tinta-fraca); margin-top: 5px; }
.alerta .numero { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--tinta); }
.alerta .rodape { margin-top: 10px; display: flex; gap: 10px; align-items: center; }

/* O mandado decide se o carro sai esta semana. Fica em cima, sempre aberto, e
   as movimentações comuns recolhem para trás de um clique. */
.mandados {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(0,0,0,.03); border-radius: 8px;
}
.linha-mandado { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.linha-mandado + .linha-mandado { margin-top: 7px; }
.linha-mandado .menor { font-size: 12.5px; color: var(--tinta-fraca); }
.ordem-mandado {
  font-size: 12px; font-weight: 700; color: var(--tinta-fraca);
  min-width: 18px;
}

.movimentacoes { margin-top: 9px; }
.movimentacoes > summary {
  cursor: pointer; font-weight: 600; color: var(--tinta);
  list-style: revert; padding: 2px 0;
}
.movimentacoes > summary:hover { color: var(--marca); }
.movimentacoes[open] > summary { margin-bottom: 5px; }

/* ------------------------------------------------------------- tabelas */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--tinta-fraca);
  padding: 8px 10px; border-bottom: 1px solid var(--linha); font-weight: 700;
}
td { padding: 11px 10px; border-bottom: 1px solid var(--linha); }
tr:last-child td { border-bottom: none; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }

/* Nome de cliente é link em três telas. Sublinhar todos deixava a carteira
   parecendo uma lista de links, não uma lista de pessoas; o sublinhado volta
   ao passar o mouse, para continuar claro que dá para clicar. */
td a, .nome-cliente { color: inherit; text-decoration: none; }
td a:hover, .nome-cliente:hover { text-decoration: underline; color: var(--marca); }

/* ------------------------------------------------------------ formulário */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.dica { font-weight: 400; color: var(--tinta-fraca); font-size: 12.5px; margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=file], select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid #cfd4de; border-radius: 7px;
  font: inherit; font-size: 14px; background: #fff;
}

input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(31,56,100,.12);
}

.campo { margin-bottom: 15px; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.entrada-com-olho { position: relative; }
.entrada-com-olho input { padding-right: 44px; }
.olho-senha {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--tinta-fraca); cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 0;
}
.olho-senha:hover { background: var(--fundo); color: var(--tinta); }

.requisitos-senha {
  list-style: none; margin: 8px 0 0; padding: 0;
  color: var(--tinta-fraca); font-size: 12.5px;
}
.requisitos-senha li { margin: 3px 0; }
.requisitos-senha li span { display: inline-block; width: 18px; font-weight: 800; }
.requisitos-senha li.cumprida { color: var(--bom); font-weight: 650; }
.requisitos-senha .aviso-frase {
  color: var(--marca); background: var(--marca-clara);
  border-radius: 6px; padding: 7px 9px; margin-top: 6px;
}

/* A partir do segundo cliente, um traço separa um do outro: sem ele, quatro
   caixas seguidas viram uma parede de campos e ninguém sabe qual nome pertence
   a qual CPF. */
.cliente-novo + .cliente-novo {
  border-top: 1px dashed #d7dce5;
  padding-top: 14px;
}

.botao {
  display: inline-block; padding: 9px 17px;
  background: var(--marca); color: #fff; border: none;
  border-radius: 7px; font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none;
}
.botao:hover { background: #16294a; }
.botao.secundario { background: #fff; color: var(--tinta); border: 1px solid #cfd4de; }
.botao.secundario:hover { background: #f2f4f8; }
.botao.perigo { background: var(--alto); }
.botao.perigo:hover { background: #8f1e17; }
.botao.pequeno { padding: 5px 11px; font-size: 12.5px; }

/* -------------------------------------------------------------- avisos */

.aviso-caixa {
  padding: 12px 15px; border-radius: 8px; margin-bottom: 13px;
  font-size: 14px; border: 1px solid;
}
.aviso-caixa.sucesso { background: var(--bom-fundo); border-color: #bfe3cd; color: var(--bom); }
.aviso-caixa.erro { background: var(--alto-fundo); border-color: #f2c9c6; color: var(--alto); }
.aviso-caixa.aviso { background: var(--medio-fundo); border-color: #f0e2c2; color: var(--medio); }
.aviso-caixa.aviso-envio {
  padding: 17px 18px;
  border-width: 2px;
  font-size: 15px;
}
.aviso-caixa.aviso-envio strong { display: block; font-size: 16px; }
/* O detalhe de uma falha traz seletor de CSS e número de processo, tudo grudado
   sem espaço onde quebrar. Sem `overflow-wrap`, o navegador mantém esses
   pedaços inteiros, a coluna estica além do `max-width` e o texto escapa do
   cartão — foi o que aconteceu com o erro da conferência de movimentações. */
.detalhe-varredura { color: var(--tinta-fraca); font-size: 12.5px; }

/* A altura tem que ficar num elemento dentro da célula: `max-height` em `td` é
   ignorado pelo navegador, que dimensiona a célula pelo conteúdo. Uma falha
   longa esticava a linha por meia tela e empurrava as passadas seguintes para
   fora da vista. */
.detalhe-rolagem {
  /* Sem a tabela de largura fixa, é esta caixa que segura a coluna do detalhe:
     é o único conteúdo longo o bastante para esticar a tabela sozinho. */
  width: 240px;
  max-height: 92px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

/* Larguras fixas para a coluna do detalhe ficar com o que sobra, em vez de
   disputar espaço com números de um dígito. Os rótulos são palavras inteiras e
   sem hífen: apertar demais fazia "PROCESSOS" transbordar por cima da coluna
   vizinha, em vez de quebrar. */
/* Sem largura fixa de propósito. Pinar pixel só funciona na fonte da máquina
   onde foi medido: no Windows do escritório "Processos" partiu no meio e virou
   "Processo / s". Na disposição automática cada coluna pede exatamente o que o
   texto ocupa naquela máquina, e quem tem tamanho definido é só o detalhe. */
.tabela-varreduras .quando-data { white-space: nowrap; }
.tabela-varreduras .quando .pilula { margin-top: 4px; }
.tabela-varreduras th {
  text-transform: none; letter-spacing: 0; font-size: 12px;
  white-space: nowrap; padding-left: 7px; padding-right: 7px;
}
.tabela-varreduras td { padding-left: 7px; padding-right: 7px; }
.tabela-varreduras th.num, .tabela-varreduras td.num { text-align: center; white-space: nowrap; }
.tabela-varreduras td.com-erro { color: var(--alto); font-weight: 700; }

.coluna-buscas { min-width: 300px; }
.linha-busca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha-busca + .linha-busca { margin-top: 6px; }
.linha-busca .numero {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; color: var(--tinta);
}
.linha-busca .dica { margin: 0; }
/* "Ainda não conferido" não é bom nem mau: é ausência de leitura. Em itálico
   para não se confundir com as pílulas, que afirmam um estado do mandado. */
.linha-busca .dica.aguardando { font-style: italic; }

.resultado-importacao { margin-top: 14px; }
.resultado-importacao .aviso-caixa { margin-bottom: 8px; }
.lista-problemas {
  margin: 6px 0 0; padding-left: 18px;
  max-height: 190px; overflow-y: auto;
}
.lista-problemas li { margin-bottom: 3px; }

.faixa-info {
  background: var(--marca-clara); border: 1px solid #d5deef;
  border-radius: 8px; padding: 13px 15px; font-size: 13.5px; margin-bottom: 18px;
}

.vazio { text-align: center; padding: 44px 20px; color: var(--tinta-fraca); }
.vazio .icone { font-size: 30px; opacity: .35; margin-bottom: 8px; }

/* --------------------------------------------------------------- entrar */

.centro { max-width: 420px; margin: 8vh auto; padding: 0 20px; }
.centro .marca-grande {
  font-size: 26px; font-weight: 700; text-align: center;
  color: var(--marca); margin-bottom: 4px; letter-spacing: -0.5px;
}
.centro .lema { text-align: center; color: var(--tinta-fraca); font-size: 14px; margin-bottom: 26px; }

/* --------------------------------------------------------------- planos */

.plano {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; background: var(--papel);
}
.plano.atual { border-color: var(--marca); box-shadow: 0 0 0 2px rgba(31,56,100,.1); }
.plano .nome { font-weight: 700; font-size: 15px; }
.plano .preco { font-size: 21px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -0.5px; }
.plano .limite { font-size: 12.5px; color: var(--tinta-fraca); margin-bottom: 10px; }

.aviso-vigilancia {
  border: 2px solid var(--medio); border-radius: var(--raio);
  background: var(--medio-fundo); color: var(--tinta);
  padding: 16px 18px; margin-bottom: 20px; font-size: 15px;
}
.aviso-vigilancia.bloqueada {
  border-width: 3px; border-color: var(--alto);
  background: var(--alto-fundo); color: var(--alto);
}
.aviso-vigilancia a { font-weight: 700; color: inherit; }

.barra-uso { height: 6px; background: var(--linha); border-radius: 3px; overflow: hidden; margin-top: 7px; }
.barra-uso div { height: 100%; background: var(--marca); }
.barra-uso.cheia div { background: var(--alto); }

.pilula {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
  /* "em andamento" partia no meio dentro da coluna estreita de CPFs e
     desalinhava a linha inteira da tabela. */
  white-space: nowrap;
}
.pilula.ok { background: var(--bom-fundo); color: var(--bom); }
.pilula.pendente { background: var(--medio-fundo); color: var(--medio); }
.pilula.alta { background: var(--alto-fundo); color: var(--alto); }

footer { text-align: center; color: var(--tinta-fraca); font-size: 12.5px; padding: 26px 20px 40px; }