/* =====================================================================
   HERMES · Sistema de design

   Tres decisoes que explicam todo o resto:

   1. Fonte do sistema. Nao ha webfont: o texto aparece no primeiro
      quadro e a interface se parece com o aparelho de quem usa.
   2. Cor com significado. Cinza e a interface, azul e a acao, verde e
      confirmado, ambar e pendente, vermelho e vencido. Cor que nao
      informa nada foi removida.
   3. Espaco e o material principal. Menos linha, menos caixa, menos
      sombra. O que separa e o vazio.

   Escala de espaco: multiplos de 4px.
   Alvo de toque: 44px, o minimo confortavel no dedo.
   ===================================================================== */

:root {
  /* ---- superficie ------------------------------------------------- */
  /* Papel levemente esverdeado, nao cinza neutro nem creme. O creme
     com serifa e acento terracota e o clichê visual do momento; o cinza
     neutro e o de sempre. Este puxa para o verde da marca, e faz o
     branco dos cartoes parecer branco de verdade por contraste. */
  --fundo:        #EFF2F0;
  --superficie:   #FFFFFF;
  --superficie-2: #F7F9F8;
  --elevado:      rgba(255, 255, 255, .84);

  /* ---- texto ------------------------------------------------------- */
  /* Tinta azul-esverdeada, nao preto tingido. Texto preto sobre papel
     esverdeado vibra; puxando a tinta para o mesmo lado do papel, a
     pagina inteira assenta. */
  --tinta:   #15201C;
  --tinta-2: #405049;
  --tinta-3: #66766F;
  --tinta-4: #9AA8A2;

  /* ---- separadores -------------------------------------------------- */
  --separador:       rgba(21, 32, 28, .1);
  --separador-forte: rgba(21, 32, 28, .17);

  /* ---- marca --------------------------------------------------------
     O marinho continua sendo a cor da instituicao. O verde entra como
     segunda voz: e a cor de "em ordem", "no prazo", "conferido", que e
     o estado em que o escritorio quer estar. Aparece pouco e sempre com
     esse sentido, senao vira decoracao e deixa de comunicar. */
  /* O marinho era a cor da instituição e o verde o acento. Invertidos:
     o verde carrega a marca, e este azul fica só para o que é
     informativo, que é o papel que ele exercia de fato. */
  --marinho:       #1C4A6B;
  --marinho-2:     #2A6390;
  --marinho-fraco: rgba(28, 74, 107, .08);

  --verde:         #0E6E53;
  --verde-2:       #0A5540;
  --verde-claro:   #34A07C;
  --verde-fraco:   rgba(14, 110, 83, .09);
  --verde-escuro:  #0B3B2E;

  /* ---- estados do prazo --------------------------------------------- */
  --confirmado:       #0E6E53;
  --confirmado-fundo: rgba(14, 110, 83, .1);
  /* Nem o laranja nem o vermelho do sistema operacional. Bronze e
     tijolo: cores de mesma temperatura que o verde, entao os tres
     estados convivem numa tela sem uma gritar por cima da outra. O
     vencido continua sendo o mais escuro e saturado dos tres, que e o
     que garante a hierarquia. */
  --pendente:         #8A6212;
  --pendente-fundo:   rgba(138, 98, 18, .12);
  --vencido:          #A32B25;
  --vencido-fundo:    rgba(163, 43, 37, .1);
  --info:             #1C4A6B;
  --info-fundo:       rgba(28, 74, 107, .07);

  /* Nomes antigos, mantidos para nao quebrar estilo escrito na marra */
  --papel:   #EFF2F0;
  --grafite: #66766F;
  --linha:   rgba(21, 32, 28, .1);
  --selo:    #0E6E53;
  --ambar:   #8A6212;
  --grana:   #A32B25;
  --indigo:  #1C4A6B;
  --tinta-70: #48484A;
  --r-md: 12px;
  --fonte-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

  /* ---- tipografia ---------------------------------------------------- */
  --texto: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
           Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dado:  ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Roboto Mono',
           Consolas, monospace;

  /* ---- raios ---------------------------------------------------------- */
  --r-p: 8px;
  --r-m: 12px;
  --r-g: 18px;
  --r-pilula: 980px;

  /* ---- profundidade ---------------------------------------------------- */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --sombra-3: 0 20px 48px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08);

  /* ---- medidas --------------------------------------------------------- */
  --lateral-larg: 264px;
  --topo-alt: 52px;
  --curva: cubic-bezier(.32, .72, 0, 1);
}

/* =====================================================================
   Base
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.16;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.125rem); letter-spacing: -0.028em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Link em verde-2, não no azul. Uma cor de ação só, em toda a
   interface: botão, link, foco e página atual. */
a { color: var(--verde-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code {
  font-family: var(--dado);
  font-size: .875em;
  background: var(--marinho-fraco);
  padding: .1em .4em;
  border-radius: 5px;
}

:focus-visible {
  outline: 3px solid rgba(10, 35, 66, .45);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: rgba(14, 110, 83, .16); }

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marinho);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-m) 0;
  z-index: 999;
}
.pular:focus { left: 0; }

/* Rótulo de campo e de seção.
   Estava em caixa alta com espaçamento — o recurso que aparece em toda
   interface gerada e que não diz nada sobre este assunto. Caixa baixa
   com peso funciona igual e some melhor: rótulo existe para ser lido
   uma vez e depois ignorado. */
.rotulo {
  margin: 0;
  font-size: .75rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-3);
}

.dado, .num {
  font-family: var(--dado);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.num { text-align: right; white-space: nowrap; }

/* Numeracao CNJ: o sequencial pesa, o resto recua */
/* =====================================================================
   O número do processo

   É o objeto central deste sistema e o único texto que aparece em toda
   tela. Ninguém o lê inteiro: procura-se o ano, para saber a idade da
   causa, e o tribunal, para saber onde ela corre.

   Os vinte dígitos são rígidos e sempre nos mesmos lugares, então dá
   para dar a cada segmento o peso que ele tem no uso. O dígito
   verificador e a origem recuam quase até sumir; o ano ganha uma caixa
   e vira o ponto de apoio da leitura.

   É aqui que este sistema gasta a ousadia. O resto da interface fica
   quieto de propósito.
   ===================================================================== */

.cnj {
  font-family: var(--dado);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--tinta-3);
}

/* Sequencial: o que distingue um processo do outro */
.cnj b { font-weight: 600; color: var(--tinta); }

/* Dígito de conferência e origem: existem, ninguém lê */
.cnj i { font-style: normal; color: var(--tinta-4); font-weight: 400; }

/* Ano: o que se procura primeiro */
.cnj em {
  font-style: normal;
  font-weight: 600;
  color: var(--tinta);
  background: var(--verde-fraco);
  padding: .0625rem .3125rem;
  margin: 0 .125rem;
  border-radius: 4px;
}

/* Tribunal e justiça: onde a causa corre */
.cnj u {
  text-decoration: none;
  color: var(--verde-2);
  font-weight: 550;
}

/* Em título de página, o número cresce e a marcação vale mais. */
h1 .cnj, .conteudo__topo .cnj { font-size: 1.0625rem; }
h1 .cnj em, .conteudo__topo .cnj em { padding: .125rem .4375rem; }

/* =====================================================================
   Esqueleto
   ===================================================================== */

.app { min-height: 100vh; min-height: 100dvh; }

.topo-movel {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topo-alt);
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  background: var(--elevado);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);

  /* O unico verde aqui: um fio na base, que separa a barra do conteudo
     e assina a tela sem ocupar espaco. */
  border-bottom: 2px solid var(--verde);
}
.topo-movel__marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}
.topo-movel__marca:hover { text-decoration: none; }
/* A figura no topo do celular acompanha o tamanho do menu, dentro do
   que a barra de 52px comporta. */
.topo-movel__marca svg,
.topo-movel__figura {
  width: 34px;
  height: auto;
  aspect-ratio: 327 / 259;
  color: var(--verde);
}

.abrir-menu {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--verde);
  cursor: pointer;
  border-radius: var(--r-p);
}
.abrir-menu svg { width: 22px; height: 22px; }
.abrir-menu:active { background: var(--verde-fraco); }

/* Menu branco.
   A tela de entrada pode ser escura porque nao tem trabalho acontecendo
   nela. Aqui tem: menu escuro ao lado de conteudo claro cria duas areas
   competindo pelo olho o dia inteiro, e quem perde e o conteudo.
   A marca aparece por acento, nao por fundo. */
.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lateral-larg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 50;
  background: var(--superficie);
  border-right: .5px solid var(--separador);
}

.lateral__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: .25rem .5rem 1rem;
  margin-bottom: .25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  border-bottom: 1px solid var(--separador);
}

/* A figura em verde: no claro ela e o unico elemento colorido do topo,
   e isso basta para a marca estar presente sem tomar a tela. */
.marca-figura {
  width: 58px;
  height: auto;
  aspect-ratio: 327 / 259;
  flex: 0 0 auto;
  color: var(--verde);
}

.lateral__grupo { display: flex; flex-direction: column; gap: 1px; }
.lateral__grupo .rotulo { padding: 0 .5rem .375rem; }

.lateral a {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 40px;
  padding: .5rem .625rem;
  border-radius: var(--r-p);
  font-size: .9375rem;
  font-weight: 450;
  color: var(--tinta-2);
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.lateral a svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .7; }
.lateral a:hover { background: rgba(0, 0, 0, .04); color: var(--tinta); text-decoration: none; }

/* Pagina atual: fundo verde muito claro e um traco na borda. Dois
   sinais fracos somados leem melhor que um forte, e a cor fica
   reservada ao item que importa. */
.lateral a[aria-current="page"] {
  background: var(--verde-fraco);
  color: var(--verde-2);
  font-weight: 590;
  box-shadow: inset 3px 0 0 var(--verde);
}
.lateral a[aria-current="page"] svg { opacity: 1; color: var(--verde); }

.lateral__fim { border-top: 1px solid var(--separador); padding-top: .75rem; }

/* Contador do menu.
   Vermelho e para o que cobra acao: prazo vencendo, publicacao nao
   lida. Volume de carteira e informacao, nao urgencia, e pintar os dois
   de vermelho faz o vermelho parar de significar alguma coisa. */
.conta {
  margin-left: auto;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: var(--vencido);
  color: #fff;
  border-radius: var(--r-pilula);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.conta.-volume {
  background: rgba(0, 0, 0, .07);
  color: var(--tinta-3);
  font-weight: 500;
}

.lateral__fim { margin-top: auto; }

.veu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--curva);
  z-index: 45;
}

.conteudo {
  margin-left: var(--lateral-larg);
  padding: 2.5rem 2.5rem 5rem;
  max-width: 1240px;
}

.conteudo__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.conteudo__topo h1 { margin-top: .375rem; }

/* =====================================================================
   Cartao
   ===================================================================== */

.cartao {
  background: var(--superficie);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.cartao__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  border-bottom: .5px solid var(--separador);
}
.cartao__cabeca h2 { font-size: 1.0625rem; }

.cartao__corpo { padding: 1.5rem; }

.grade { display: grid; gap: 1rem; }
.grade.-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.indicador__valor {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.indicador__rotulo { margin-top: .25rem; }

a.cartao {
  display: block;
  color: inherit;
  transition: transform .18s var(--curva), box-shadow .18s ease;
}
a.cartao:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sombra-2); }

/* =====================================================================
   Botao
   ===================================================================== */

.botao, .bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 40px;
  padding: .5rem 1.125rem;
  border: 0;
  border-radius: var(--r-p);
  background: var(--marinho);
  color: #fff;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, transform .1s ease;
}
.botao:hover, .bt:hover { background: var(--verde-2); color: #fff; text-decoration: none; }
.botao:active, .bt:active { transform: scale(.97); }

.botao.-neutro, .bt.-neutro { background: rgba(0, 0, 0, .05); color: var(--tinta); }
.botao.-neutro:hover, .bt.-neutro:hover { background: rgba(0, 0, 0, .09); color: var(--tinta); }

/* Buscar dado fora do sistema: DataJud, diario, analise de publicacao.
   Verde porque e a acao que traz trabalho pronto para dentro, e porque
   junta num so sinal o que antes eram tres botoes cinzas identicos aos
   demais. */
.botao.-sincronizar, .bt.-sincronizar {
  background: var(--verde);
  color: #fff;
}
.botao.-sincronizar:hover, .bt.-sincronizar:hover { background: var(--verde-2); }

.botao.-selo, .bt.-verde { background: var(--confirmado); }
.botao.-selo:hover, .bt.-verde:hover { background: var(--verde-2); }

.botao.-escuro, .bt.-escuro { background: var(--marinho); color: #fff; }
.botao.-largo { width: 100%; }

.botao.-fantasma {
  background: none;
  color: var(--marinho);
  box-shadow: inset 0 0 0 1px var(--separador-forte);
}
.botao.-fantasma:hover { background: rgba(0, 0, 0, .04); color: var(--marinho); }

/* Filtro em pilula */
.filtros { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filtros a {
  padding: .4375rem 1rem;
  border-radius: var(--r-pilula);
  font-size: .875rem;
  font-weight: 500;
  color: var(--tinta-2);
  background: rgba(0, 0, 0, .045);
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.filtros a:hover { background: rgba(0, 0, 0, .08); text-decoration: none; }
.filtros a.-ativo { background: var(--marinho); color: #fff; }

/* =====================================================================
   Formulario
   ===================================================================== */

.campo { margin-bottom: 1.125rem; }
.campo:last-child { margin-bottom: 0; }

.campo label {
  display: block;
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 550;
  color: var(--tinta-2);
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], input[type="search"],
input[type="file"], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: .6875rem 1rem;
  font-family: inherit;
  /* 16px evita o zoom automatico do iOS ao focar o campo */
  font-size: 16px;
  color: var(--tinta);

  /* Fundo levemente afundado e borda quase invisivel: a caixa parece um
     lugar onde se digita, em vez de uma linha desenhada em volta do
     nada. Ao focar, ela sobe para o branco e ganha o verde. */
  background: rgba(0, 0, 0, .028);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
  appearance: none;
  -webkit-appearance: none;
}

textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236E6E73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 12px;
  padding-right: 2.25rem;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--marinho);
  box-shadow: 0 0 0 3.5px rgba(10, 35, 66, .12);
}

input:disabled, select:disabled, textarea:disabled {
  background: rgba(0, 0, 0, .03);
  color: var(--tinta-3);
  cursor: not-allowed;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--marinho);
  cursor: pointer;
}

.campo p { font-size: .8125rem; color: var(--tinta-3); margin: .375rem 0 0; }

details > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: .9375rem;
  font-weight: 550;
  color: var(--marinho);
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--curva);
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* =====================================================================
   Lista
   ===================================================================== */

.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.lista { width: 100%; border-collapse: collapse; font-size: .9375rem; }

.lista thead th {
  padding: .625rem 1.5rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-3);
  background: var(--superficie-2);
  border-bottom: .5px solid var(--separador);
  white-space: nowrap;
}

.lista td {
  padding: .875rem 1.5rem;
  border-bottom: .5px solid var(--separador);
  vertical-align: top;
}
.lista tbody tr:last-child td { border-bottom: 0; }
.lista tbody tr { transition: background .12s ease; }
.lista tbody tr:hover { background: rgba(0, 0, 0, .015); }

/* =====================================================================
   Sinais
   ===================================================================== */

.selo-status {
  display: inline-flex;
  align-items: center;
  padding: .1875rem .5rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 550;
  background: rgba(0, 0, 0, .06);
  color: var(--tinta-2);
  white-space: nowrap;
}
.selo-status.-ok      { background: var(--confirmado-fundo); color: var(--confirmado); }
.selo-status.-atencao { background: var(--pendente-fundo);   color: var(--pendente); }
.selo-status.-fatal   { background: var(--vencido-fundo);    color: var(--vencido); }
.selo-status.-ia      { background: var(--info-fundo);       color: var(--info); }

.aviso {
  padding: 1rem 1.125rem;
  border-radius: var(--r-m);
  background: var(--info-fundo);
  color: var(--tinta-2);
  font-size: .9375rem;
  line-height: 1.5;
}
.aviso.-ok   { background: var(--confirmado-fundo); color: #14602A; }
.aviso.-ia   { background: var(--info-fundo);       color: var(--marinho); }
.aviso.-erro { background: var(--vencido-fundo);    color: #8C0A0A; }
.aviso strong { font-weight: 600; }
.aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.regua {
  height: 4px;
  border-radius: var(--r-pilula);
  background: rgba(0, 0, 0, .07);
  overflow: hidden;
}
.regua span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tinta-4);
  transition: width .5s var(--curva);
}
.regua.-ok span      { background: linear-gradient(90deg, var(--verde), var(--verde-claro)); }
.regua.-atencao span { background: #FF9500; }
.regua.-fatal span   { background: var(--vencido); }

.trilha { display: flex; flex-direction: column; gap: 1.25rem; }
.trilha__item { position: relative; padding-left: 1.125rem; }
.trilha__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4375rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinta-4);
}
.trilha__item.-acao::before { background: #FF9500; }
.trilha__data { font-family: var(--dado); font-size: .75rem; color: var(--tinta-3); }

/* =====================================================================
   Quadro
   ===================================================================== */

.quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.coluna {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: .875rem;
  background: rgba(0, 0, 0, .028);
  border-radius: var(--r-m);
  scroll-snap-align: start;
  transition: background .18s ease;
}
.coluna.-alvo { background: var(--marinho-fraco); }

.coluna__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .25rem;
}

.coluna__pilha { display: flex; flex-direction: column; gap: .5rem; min-height: 48px; }

.ficha {
  padding: .875rem;
  background: var(--superficie);
  border-radius: var(--r-p);
  box-shadow: var(--sombra-1);
  cursor: grab;
  transition: box-shadow .16s ease, transform .16s var(--curva);
}
.ficha:hover { box-shadow: var(--sombra-2); }
.ficha:active { cursor: grabbing; }
.ficha.-alta, .ficha.-urgente { box-shadow: inset 3px 0 0 var(--vencido), var(--sombra-1); }
.ficha.-media { box-shadow: inset 3px 0 0 #FF9500, var(--sombra-1); }

.ficha__titulo { font-size: .9375rem; font-weight: 550; margin-bottom: .5rem; line-height: 1.35; }
.ficha__pe {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--tinta-3);
}

/* =====================================================================
   Telas de entrada

   Duas composicoes da mesma marcacao. No telefone, cabecalho escuro e
   uma folha branca que sobe por cima dele. No desktop, duas colunas:
   formulario a esquerda, marca a direita.

   A arte do painel e feita so de gradiente. Nao ha imagem para baixar
   nem canvas para pintar, entao a tela aparece pronta no primeiro
   quadro. Numa tela de senha isso vale mais que qualquer efeito: quem
   chega aqui quer entrar, nao contemplar.
   ===================================================================== */

/* A tela de entrada não rola.
 *
 * O 100vh do iPhone mede a altura SEM a barra do navegador, então o
 * conteúdo passa alguns pixels da tela visível e sobra uma rolagem de
 * um dedo — o suficiente para a página tremer a cada toque.
 *
 * Aqui a página é fixa e o conteúdo cabe por construção: a capa tem a
 * tela exata, e o formulário é curto. Travar a rolagem é seguro porque
 * não há nada abaixo da dobra para alcançar.
 *
 * O overflow interno fica no .acesso, e não no body: se um aparelho
 * muito baixo ou uma fonte muito grande fizerem o conteúdo passar, ele
 * ainda rola por dentro em vez de ficar cortado. */
.corpo-acesso {
  background: var(--verde-escuro);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(.corpo-acesso) { height: 100%; overflow: hidden; }

.acesso {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Sem barra visível: ela só apareceria no caso de exceção, e uma
     barra que pisca uma vez incomoda mais do que ajuda. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.acesso::-webkit-scrollbar { display: none; }

/* ---- painel da marca ------------------------------------------------ */

/* No celular o painel é cabeçalho, não capa.
 *
 * Ele estava com 61% dos 844px de um iPhone, e o campo de e-mail caía
 * abaixo da dobra: para entrar no sistema era preciso rolar. Numa tela
 * de senha isso é falha de função, não de gosto.
 *
 * Agora ocupa cerca de um terço, e o formulário inteiro cabe sem rolagem
 * em qualquer aparelho a partir de 640px de altura. */
.acesso__marca {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 1.5rem 4rem;
  color: #fff;
  background:
    radial-gradient(130% 80% at 50% 0%, #146B52 0%, transparent 55%),
    linear-gradient(165deg, #0F4A39 0%, #0B3B2E 45%, #072A21 100%);
}

/* A arte: linhas finas em duas direcoes, como pauta cruzada, mais um
   halo que sugere profundidade. Tres camadas de gradiente, nenhum
   arquivo. */
.acesso__arte {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .07) 0 1px,
      transparent 1px 26px),
    repeating-linear-gradient(-25deg,
      rgba(127, 227, 192, .06) 0 1px,
      transparent 1px 62px),
    radial-gradient(60% 45% at 78% 12%, rgba(127, 227, 192, .22), transparent 70%);
}

/* Clarao lento atras da figura. Uma volta em 24 segundos: percebe-se
   que mudou, nao se ve mudando. */
.acesso__marca::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(closest-side, rgba(52, 160, 124, .32), transparent 72%);
  animation: respirar 24s ease-in-out infinite;
  pointer-events: none;
}

@keyframes respirar {
  0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: .35; }
  50%      { transform: translate3d(3%, 2%, 0)   scale(1.14); opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  .acesso__marca::after { animation: none; }
}

.acesso__miolo {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
}

/* A marca e o assunto desta tela.
   O mensageiro em corrida e um desenho, nao um icone: em 40px ele vira
   mancha e nao se le nada. Grande, ele conta o que a marca quer dizer
   antes de qualquer texto, e essa e a unica tela do sistema onde ha
   espaco para isso. */
.acesso__figura {
  /* 34vw no celular contra 58vw antes. A marca continua sendo a maior
     coisa do cabeçalho; ela é que não pode ser a maior coisa da tela. */
  width: clamp(112px, 34vw, 168px);
  height: auto;
  aspect-ratio: 327 / 259;
  color: #fff;
  display: block;
  margin: 0 auto 1rem;

  /* Duas sombras: uma escura que descola do fundo, uma esverdeada que
     devolve a cor da marca ao redor do desenho. Contorno endureceria o
     traco art deco; sombra nao. */
  filter:
    drop-shadow(0 18px 44px rgba(0, 0, 0, .45))
    drop-shadow(0 0 30px rgba(127, 227, 192, .32));
}

/* O nome, em versalete espacado, logo abaixo da figura. Junto com ela
   forma a marca completa; e o unico texto desta tela em caixa alta. */
/* O nome.
 *
 * Estava em versalete com 0.3em de espaço entre letras — o tratamento
 * que aparece em toda marca de tecnologia e que a figura acima já não
 * precisa. Espaçamento largo serve para dar presença a um nome fraco;
 * aqui o nome vem logo abaixo de um desenho art déco de 220px, e a
 * presença já existe.
 *
 * Agora é caixa alta e baixa, peso médio, espaçamento apertado. Ele
 * assina a figura em vez de disputar com ela — que é o papel de um
 * logotipo escrito ao lado de um símbolo. */
.acesso__nome {
  margin: 0 0 1rem;
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-indent: 0;
  color: #fff;
  opacity: .96;
}


/* A frase única da tela.
   Duas linhas, a primeira dizendo o que o sistema é e a segunda o que
   ele resolve. Peso médio e entrelinha larga: é para ser lida devagar,
   uma vez, e não para gritar. */
.acesso__lema {
  margin: 1.25rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, .86);
  max-width: 22rem;
}

.acesso__lema {
  margin: 1.25rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, .82);
  max-width: 22rem;
}


/* ---- formulario ------------------------------------------------------ */

.acesso__form {
  flex: 1;
  background: var(--superficie);
  border-radius: var(--r-g) var(--r-g) 0 0;
  padding: 2.25rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom));

  /* Sobe por cima do painel: e o gesto que faz a folha parecer folha, e
     nao a metade de baixo de uma tela dividida. */
  margin-top: -2.5rem;
  position: relative;
  z-index: 2;
}

.acesso__caixa { width: 100%; max-width: 23rem; margin: 0 auto; }

/* Saudação centralizada e grande. É o único texto da coluna branca que
   compete com a marca do outro lado, e centralizar dá a ela um eixo
   próprio em vez de deixá-la encostada na margem. */
/* "Entrar" no lugar de "Bem-vindo de volta".
   Uma palavra não precisa de 1.75rem para ser vista, e a marca do outro
   lado já deu as boas-vindas. */
.acesso__saudacao {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1.5rem;
  text-align: center;
}

.acesso__apoio {
  margin: .625rem auto 2.25rem;
  font-size: .9375rem;
  color: var(--tinta-3);
  line-height: 1.55;
  text-align: center;
  max-width: 20rem;
}

/* Verde no foco e no botao: e o unico ponto de cor da folha branca, e
   leva o olho para onde se digita e para onde se clica. */
/* Campos altos, cantos generosos e fundo levemente afundado: a caixa
   parece um lugar onde se digita, e não uma borda desenhada em volta do
   nada. É a diferença que mais aparece nas referências. */
.acesso__form input {
  min-height: 50px;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .028);
  border-color: transparent;
  font-size: 1rem;
}

.acesso__form input:focus {
  background: var(--superficie);
  border-color: var(--verde);
  box-shadow: 0 0 0 3.5px var(--verde-fraco);
}

.acesso__form .campo { margin-bottom: 1rem; }
.acesso__form label {
  font-size: .8125rem;
  font-weight: 550;
  color: var(--tinta-2);
  margin-bottom: .375rem;
}
.acesso__form .botao {
  background: var(--verde);
  min-height: 50px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 550;
  margin-top: .75rem;
  width: 100%;
}
.acesso__form .botao:hover { background: var(--verde-2); }

/* Separado por um fio, como nas referências: o rodapé deixa de parecer
   parte do formulário e passa a ser o que é, um aviso sobre o sistema. */
.acesso__rodape {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: .5px solid var(--separador);
  text-align: center;
  font-size: .8125rem;
  color: var(--tinta-4);
}


/* ---- desktop: duas colunas ------------------------------------------- */

@media (min-width: 900px) {
  /* Divisão assimétrica e sangrada até a borda.
   *
   * Estava em 52/48 com moldura em volta das duas: proporção quase igual
   * é a menos decidida que existe, e o resultado eram dois cartões
   * flutuando sem que nenhum liderasse.
   *
   * Agora o formulário tem largura fixa, do tamanho do que ele contém, e
   * a marca fica com todo o resto. A divisão nasce do conteúdo em vez de
   * uma porcentagem escolhida no chute, e em tela larga é a marca que
   * cresce, não o espaço vazio em volta de dois campos.
   *
   * Sem moldura e sem canto arredondado: a linha entre as colunas passa
   * a ser a única divisão da tela, e uma divisão só lê melhor que quatro
   * bordas arredondadas dentro de um fundo cinza. */
  .acesso {
    flex-direction: row;
    padding: 0;
    gap: 0;
    background: var(--superficie);
  }

  .acesso__marca {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 4rem clamp(3rem, 6vw, 6rem);
    border-radius: 0;
  }

  .acesso__miolo { margin: 0; text-align: left; max-width: 32rem; }

  .acesso__figura {
    width: clamp(180px, 15vw, 260px);
    margin: 0 0 1.5rem;
  }

  .acesso__nome {
    text-align: left;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    margin-bottom: 2rem;
  }
  .acesso__lema { margin-left: 0; font-size: 1.125rem; max-width: 24rem; }

  /* Largura do formulário, não porcentagem: 27rem é o que dois campos e
     um botão pedem para respirar, e mais que isso só espalha. */
  /* O formulário cresce junto até certo ponto. Travado em largura fixa,
     numa tela de 2560px ele ficaria com 19% e a marca com 81%, que é
     campo verde vazio, não composição. */
  .acesso__form {
    order: 1;
    flex: 0 0 clamp(24rem, 32vw, 38rem);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 3rem clamp(2rem, 4vw, 3.5rem);
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid var(--separador);
  }

  .acesso__saudacao { font-size: 1.5rem; margin-bottom: 1.75rem; }
}

/* =====================================================================
   Responsivo
   ===================================================================== */

@media (max-width: 1080px) {
  .topo-movel { display: flex; }

  .lateral {
    transform: translateX(-100%);
    transition: transform .34s var(--curva);
    box-shadow: var(--sombra-3);
    width: min(300px, 84vw);
    padding-top: 1.25rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  body.-menu-aberto { overflow: hidden; }
  body.-menu-aberto .lateral { transform: none; }
  body.-menu-aberto .veu { opacity: 1; pointer-events: auto; }

  .lateral a { min-height: 46px; font-size: 1rem; }

  .conteudo { margin-left: 0; padding: 1.75rem 1.25rem 4rem; }
  .conteudo__topo { margin-bottom: 1.5rem; }

  .grade.-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .grade.-2, .grade.-3 { grid-template-columns: 1fr; }

  .acesso { grid-template-columns: 1fr; min-height: 0; }
  .acesso__marca { padding: 2.5rem 1.5rem; }
  .acesso__figura { width: 96px; margin: 1rem auto; }
  .acesso__nome { font-size: 1.5rem; }
  .acesso__lema { font-size: .9375rem; max-width: 18rem; }
  .acesso__form { padding: 2rem 1.25rem 3.5rem; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }

  .conteudo { padding: 1.25rem 1rem 4rem; }
  .conteudo__topo { align-items: stretch; flex-direction: column; gap: .75rem; }

  .grade, .grade.-2, .grade.-3, .grade.-4 { grid-template-columns: 1fr; gap: .75rem; }

  .cartao { border-radius: var(--r-m); }
  .cartao__cabeca { padding: 1rem 1.125rem; }
  .cartao__corpo { padding: 1.125rem; }

  .lista { font-size: .875rem; }
  .lista thead th { padding: .5rem 1.125rem; }
  .lista td { padding: .75rem 1.125rem; }

  .indicador__valor { font-size: 1.75rem; }

  /* Acao principal ocupa a largura: mais facil de acertar com o dedo */
  .conteudo__topo .botao { width: 100%; }

  .quadro { grid-auto-columns: 86vw; gap: .75rem; scroll-snap-type: x mandatory; }

  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -1rem 1.25rem;
    padding: 0 1rem .25rem;
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros a { flex: 0 0 auto; }
}

@media (pointer: fine) {
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: var(--r-pilula);
    border: 2px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .3); background-clip: content-box; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .lateral, .topo-movel, .veu, .filtros, .botao, .bt { display: none !important; }
  .conteudo { margin: 0; padding: 0; max-width: none; }
  .cartao { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body { background: #fff; font-size: 11pt; }
}

/* =====================================================================
   Utilitarios

   Poucos, com nome do que significam e nao do que fazem.
   Existem porque um punhado de padroes se repetia dezenas de vezes
   escrito na mao dentro das telas.
   ===================================================================== */

/* Texto secundario: legenda, apoio, dado de contexto */
.apoio  { font-size: .8125rem; color: var(--tinta-3); line-height: 1.45; }
.apoio-p { font-size: .75rem;  color: var(--tinta-3); line-height: 1.4; }
.fraco  { color: var(--tinta-3); }

/* Vazio: o que aparece quando nao ha nada na lista */
.vazio {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--tinta-3);
  font-size: .9375rem;
}

/* Empilhamento vertical com respiro constante */
.pilha    { display: flex; flex-direction: column; gap: 1rem; }
.pilha.-p { gap: .5rem; }
.pilha.-g { gap: 1.5rem; }

/* Linha de acoes */
.acoes-linha { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Espacamento vertical, so o que se repetia */
.mb   { margin-bottom: 1.5rem; }
.mb-p { margin-bottom: 1rem; }
.mt-p { margin-top: .375rem; }

/* Rotulo de campo com caixa de marcacao ao lado */
.opcao-marcada {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--tinta-2);
  cursor: pointer;
}
.opcao-marcada input[type="checkbox"] { margin-top: .1875rem; flex: 0 0 auto; }

/* Bloco de destaque para o termo de consentimento e afins */
.moldura {
  padding: 1rem 1.125rem;
  background: var(--superficie-2);
  border-radius: var(--r-m);
  border: 1px solid var(--separador);
}


/* =====================================================================
   Grupo que abre e fecha

   Usado nos andamentos, onde cada cartao e um processo. O cabecalho
   inteiro e a area de clique: alvo grande, sem precisar acertar uma
   setinha.
   ===================================================================== */

.grupo__topo {
  display: block;
  padding: 1.125rem 1.5rem;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: background .14s ease;
}
.grupo__topo::-webkit-details-marker { display: none; }
.grupo__topo:hover { background: rgba(0, 0, 0, .02); }

/* Seta a direita, girando ao abrir */
.grupo__topo::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--tinta-4);
  border-bottom: 1.5px solid var(--tinta-4);
  transform: rotate(45deg);
  transition: transform .2s var(--curva);
}
details[open] > .grupo__topo::after { transform: rotate(-135deg); }

/* Espaco para a seta nao encostar no conteudo */
.grupo__topo > div { padding-right: 1.5rem; }

@media (max-width: 640px) {
  .grupo__topo { padding: 1rem 1.125rem; }
  .grupo__topo::after { right: 1.125rem; top: 1.375rem; }
}

/* Campo de busca do menu */
.lateral__busca { padding: 0 .5rem; }
.lateral__busca input {
  min-height: 38px;
  font-size: .9375rem;
  padding: .4375rem .75rem .4375rem 2rem;
  background: rgba(0, 0, 0, .045) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E6E53' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat .625rem center;
  background-size: 14px;
  border-color: transparent;
}

/* A lupa verde e o campo que acende em verde ao receber o foco: dois
   detalhes pequenos, no ponto que a pessoa mais usa. */
.lateral__busca input:focus {
  background-color: var(--superficie);
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-fraco);
}

/* =====================================================================
   Controles de lista e paginacao
   ===================================================================== */

.lista__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .875rem;
}
.lista__controles p { margin: 0; }

.paginacao {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.25rem;
}

.paginacao a,
.paginacao span[aria-current] {
  min-width: 38px;
  min-height: 38px;
  padding: 0 .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-p);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta-2);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  transition: background .14s ease, color .14s ease;
}
.paginacao a:hover { background: rgba(0, 0, 0, .04); text-decoration: none; }

.paginacao span[aria-current] {
  background: var(--verde);
  color: #fff;
  font-weight: 600;
}

@media (max-width: 640px) {
  .lista__controles { flex-direction: column; align-items: stretch; }
  .paginacao { justify-content: center; }
}

/* =====================================================================
   Sino de novidades

   Abre no lugar, dentro do menu, em vez de flutuar sobre a tela. Painel
   suspenso obriga a acertar um alvo pequeno e fecha ao menor deslize;
   aqui a lista empurra o menu para baixo e fica aberta enquanto a
   pessoa lê.
   ===================================================================== */

.sino { padding: 0 .5rem; }

.sino__gatilho {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 40px;
  padding: .5rem .625rem;
  border-radius: var(--r-p);
  font-size: .9375rem;
  font-weight: 550;
  color: var(--verde-2);
  background: var(--verde-fraco);
  cursor: pointer;
  list-style: none;
}
.sino__gatilho::-webkit-details-marker { display: none; }
.sino__gatilho svg { width: 18px; height: 18px; }
.sino__gatilho:hover { background: rgba(14, 110, 83, .15); }

.sino__lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: .375rem;
  max-height: 21rem;
  overflow-y: auto;
}

.sino__lista a {
  display: block;
  padding: .5rem .625rem;
  border-radius: var(--r-p);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--tinta-2);
  text-decoration: none;
}
.sino__lista a:hover { background: rgba(0, 0, 0, .04); text-decoration: none; }
.sino__lista strong { display: block; font-weight: 550; color: var(--tinta); }

.sino__quando {
  font-family: var(--dado);
  font-size: .6875rem;
  color: var(--tinta-4);
}
.sino__quem { color: var(--tinta-3); }

.sino__todos {
  margin-top: .25rem;
  font-weight: 550;
  color: var(--verde-2) !important;
  text-align: center;
}

/* =====================================================================
   Acentos da marca

   O verde nao tem area propria no sistema: ele aparece em detalhe, no
   ponto exato onde a pessoa age ou onde algo esta em ordem. Cor que
   ocupa fundo vira decoracao; cor que aparece sempre no mesmo tipo de
   lugar vira linguagem, e depois de uma semana ninguem precisa mais
   ler o rotulo para saber o que aquilo significa.
   ===================================================================== */

/* Foco. O mesmo verde da tela de entrada, em todo campo do sistema. */
input:focus, select:focus, textarea:focus {
  background: var(--superficie);
  border-color: var(--verde);
  box-shadow: 0 0 0 3.5px var(--verde-fraco);
}

/* Rótulo um pouco mais firme: em formulário longo, rótulo fraco faz o
   olho pular direto para os campos e perder a ordem das perguntas. */
.campo label {
  font-size: .8125rem;
  font-weight: 550;
  color: var(--tinta-2);
}

:focus-visible {
  outline-color: rgba(14, 110, 83, .5);
}

/* Cabecalho de cartao: fio verde curto sob o titulo. Assina a secao sem
   moldura e sem fundo colorido. */
.cartao__cabeca h2 {
  position: relative;
  padding-bottom: .3125rem;
}
.cartao__cabeca h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  border-radius: var(--r-pilula);
  background: var(--verde);
}

/* Titulo de pagina: mesmo fio, um pouco maior. */
.conteudo__topo h1 {
  position: relative;
  padding-bottom: .5rem;
}
.conteudo__topo h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 3px;
  border-radius: var(--r-pilula);
  background: var(--verde);
}

/* Filtro escolhido: verde, nao marinho. E a acao que a pessoa acabou de
   tomar, e a cor confirma a escolha. */
.filtros a.-ativo { background: var(--verde); }
.filtros a.-ativo:hover { background: var(--verde-2); }

/* Linha da tabela sob o cursor ganha um fio verde na borda esquerda:
   ajuda a nao pular de linha em tabela larga, e some quando o cursor
   sai. */
.lista tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--verde);
}

/* Coluna do quadro sob arrasto e ficha de tarefa: o verde marca o
   destino, o vermelho continua reservado ao que esta atrasado. */
.coluna.-alvo {
  background: var(--verde-fraco);
  box-shadow: inset 0 0 0 1px rgba(14, 110, 83, .22);
}

/* Link comum: sublinhado verde ao passar, em vez do sublinhado padrao. */
.conteudo a:not(.botao):not(.bt):not(.cartao):hover {
  text-decoration-color: var(--verde);
  text-decoration-thickness: 2px;
}

/* Detalhe que abre e fecha: a seta e o titulo em verde. */
details > summary { color: var(--verde-2); }

/* Paginacao: a pagina atual em verde, seguindo o filtro. */
.paginacao span[aria-current] { background: var(--verde); }

/* Barra de rolagem do conteudo, no desktop. Detalhe minusculo, mas e o
   tipo de coisa que aparece o tempo todo. */
@media (pointer: fine) {
  .sino__lista::-webkit-scrollbar-thumb,
  .rolagem::-webkit-scrollbar-thumb {
    background: rgba(14, 110, 83, .35);
    background-clip: content-box;
  }
}

/* Numero dentro da aba de filtro.
   Fundo translucido para funcionar tanto na pilula clara quanto na
   verde da aba escolhida, sem precisar de regra para cada caso. */
.filtros__conta {
  margin-left: .375rem;
  padding: 0 .375rem;
  border-radius: var(--r-pilula);
  background: rgba(0, 0, 0, .08);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.filtros a.-ativo .filtros__conta { background: rgba(255, 255, 255, .25); }

/* =====================================================================
   Modo noturno

   Duas formas de entrar: a preferencia do aparelho, e a escolha manual
   guardada no navegador. A manual ganha da automatica, porque quem
   trabalha de madrugada as vezes quer o contrario do que o sistema
   operacional decidiu, e o inverso tambem acontece.

   As cores nao sao invertidas. Fundo preto puro com texto branco puro
   cansa mais que o claro: o contraste extremo faz o texto vibrar. O
   fundo aqui e um cinza-azulado escuro, e o texto para em 90% de branco.

   O verde e o vermelho ficam mais claros que no modo diurno. Cor
   saturada sobre fundo escuro perde legibilidade, e prazo vencido
   precisa gritar tambem as onze da noite.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo:        #121614;
    --superficie:   #1A201D;
    --superficie-2: #212823;
    --elevado:      rgba(26, 32, 29, .88);

    --tinta:   #E4EAE7;
    --tinta-2: #AFBCB6;
    --tinta-3: #85938D;
    --tinta-4: #5E6D66;

    --separador:       rgba(255, 255, 255, .1);
    --separador-forte: rgba(255, 255, 255, .18);

    --marinho:       #4A7FC4;
    --marinho-2:     #6B9AD8;
    --marinho-fraco: rgba(74, 127, 196, .16);

    --verde:         #2FA37D;
    --verde-2:       #46BC94;
    --verde-claro:   #7FE3C0;
    --verde-fraco:   rgba(47, 163, 125, .16);
    --verde-escuro:  #0B3B2E;

    --confirmado:       #2FA37D;
    --confirmado-fundo: rgba(47, 163, 125, .18);
    --pendente:         #D2A048;
    --pendente-fundo:   rgba(210, 160, 72, .18);
    --vencido:          #E8756C;
    --vencido-fundo:    rgba(232, 117, 108, .16);
    --info:             #6B9AD8;
    --info-fundo:       rgba(107, 154, 216, .14);

    --papel:   #121614;
    --grafite: #85938D;
    --linha:   rgba(255, 255, 255, .1);
    --selo:    #2FA37D;
    --ambar:   #D2A048;
    --grana:   #E8756C;
    --indigo:  #6B9AD8;

    /* Sombra quase nao aparece no escuro. A separacao entre superficies
       passa a vir da propria cor de fundo, mais clara conforme sobe. */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-2: 0 4px 16px rgba(0, 0, 0, .55);
  }
}

/* Escolha manual: as mesmas cores, sem depender do aparelho. */
:root[data-tema="escuro"] {
  --fundo:        #121614;
  --superficie:   #1A201D;
  --superficie-2: #212823;
  --elevado:      rgba(26, 32, 29, .88);

  --tinta:   #E4EAE7;
  --tinta-2: #AFBCB6;
  --tinta-3: #85938D;
  --tinta-4: #5E6D66;

  --separador:       rgba(255, 255, 255, .1);
  --separador-forte: rgba(255, 255, 255, .18);

  --marinho:       #4A7FC4;
  --marinho-2:     #6B9AD8;
  --marinho-fraco: rgba(74, 127, 196, .16);

  --verde:         #2FA37D;
  --verde-2:       #46BC94;
  --verde-claro:   #7FE3C0;
  --verde-fraco:   rgba(47, 163, 125, .16);
  --verde-escuro:  #0B3B2E;

  --confirmado:       #2FA37D;
  --confirmado-fundo: rgba(47, 163, 125, .18);
  --pendente:         #D2A048;
  --pendente-fundo:   rgba(210, 160, 72, .18);
  --vencido:          #E8756C;
  --vencido-fundo:    rgba(232, 117, 108, .16);
  --info:             #6B9AD8;
  --info-fundo:       rgba(107, 154, 216, .14);

  --papel:   #121614;
  --grafite: #85938D;
  --linha:   rgba(255, 255, 255, .1);
  --selo:    #2FA37D;
  --ambar:   #D2A048;
  --grana:   #E8756C;
  --indigo:  #6B9AD8;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .55);
}

/* ---- ajustes que a troca de variavel nao resolve --------------------- */

/* O fundo dos campos e definido em rgba preto, que some no escuro.
   Precisa de regra propria em cada um dos dois caminhos. */
:root[data-tema="escuro"] input,
:root[data-tema="escuro"] select,
:root[data-tema="escuro"] textarea,
:root[data-tema="escuro"] .lateral__busca input {
  background: rgba(255, 255, 255, .06);
}

:root[data-tema="escuro"] input:focus,
:root[data-tema="escuro"] select:focus,
:root[data-tema="escuro"] textarea:focus {
  background: rgba(255, 255, 255, .1);
}

/* Fundos claros fixos que precisam escurecer */
:root[data-tema="escuro"] .lateral a:hover,
:root[data-tema="escuro"] .lista tbody tr:hover,
:root[data-tema="escuro"] .sino__lista a:hover,
:root[data-tema="escuro"] .paginacao a:hover,
:root[data-tema="escuro"] .grupo__topo:hover {
  background: rgba(255, 255, 255, .06);
}

:root[data-tema="escuro"] .conta.-volume,
:root[data-tema="escuro"] .filtros__conta {
  background: rgba(255, 255, 255, .12);
  color: var(--tinta-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) input,
  :root:not([data-tema="claro"]) select,
  :root:not([data-tema="claro"]) textarea,
  :root:not([data-tema="claro"]) .lateral__busca input {
    background: rgba(255, 255, 255, .06);
  }

  :root:not([data-tema="claro"]) input:focus,
  :root:not([data-tema="claro"]) select:focus,
  :root:not([data-tema="claro"]) textarea:focus {
    background: rgba(255, 255, 255, .1);
  }

  :root:not([data-tema="claro"]) .lateral a:hover,
  :root:not([data-tema="claro"]) .lista tbody tr:hover,
  :root:not([data-tema="claro"]) .sino__lista a:hover,
  :root:not([data-tema="claro"]) .paginacao a:hover,
  :root:not([data-tema="claro"]) .grupo__topo:hover {
    background: rgba(255, 255, 255, .06);
  }

  :root:not([data-tema="claro"]) .conta.-volume,
  :root:not([data-tema="claro"]) .filtros__conta {
    background: rgba(255, 255, 255, .12);
    color: var(--tinta-2);
  }
}

/* =====================================================================
   Botão de tema

   Fixo no canto superior direito, na ponta. Discreto ao ponto de
   desaparecer: fundo translúcido, ícone em cinza fraco, e só ganha
   contorno quando o cursor chega perto.

   É uma preferência de quem olha, não uma função do sistema. Um botão
   com rótulo e cor competiria com o que importa na tela o dia inteiro,
   para ser usado uma vez por semana.
   ===================================================================== */

.tema {
  position: fixed;
  top: .625rem;
  right: .625rem;
  z-index: 60;

  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--tinta-4);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.tema:hover {
  color: var(--tinta-2);
  background: var(--superficie);
  border-color: var(--separador);
}

.tema svg { width: 18px; height: 18px; }

/* Um ícone por vez: sol quando está escuro, lua quando está claro. O
   ícone mostra o destino do clique, não o estado atual. */
.tema__sol { display: none; }
.tema.-escuro .tema__lua { display: none; }
.tema.-escuro .tema__sol { display: block; }
.tema.-escuro:hover { color: var(--verde-claro); }

/* No celular a barra do topo já ocupa a faixa. O botão de menu tem 44px
   mais 16px de respiro na borda, então o tema fica a 68px da direita
   para encostar nele sem sobrepor. Centralizado na altura de 52px da
   barra: (52 - 36) / 2 = 8px. */
@media (max-width: 900px) {
  .tema { top: 8px; right: 68px; }
  .tema:hover { background: rgba(0, 0, 0, .05); }
}

/* A coluna do formulário na tela de entrada usa a superfície, então
   escurece sozinha. O que não segue é o fundo da página no desktop, que
   emoldura as duas colunas. */
:root[data-tema="escuro"] .acesso { background: var(--fundo); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .acesso { background: var(--fundo); }
}

/* Campo de senha com o olho.
   O botão fica dentro da caixa, e o campo ganha espaço à direita para o
   texto não passar por baixo dele. */
.senha { position: relative; }

.senha input { padding-right: 3rem; }

.senha__olho {
  position: absolute;
  right: .375rem;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-p);
  background: none;
  color: var(--tinta-4);
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}

.senha__olho svg { width: 19px; height: 19px; }
.senha__olho:hover { color: var(--tinta-2); background: rgba(0, 0, 0, .04); }

/* Mostrando a senha, o ícone assume o verde: é um estado de atenção,
   porque tem texto legível na tela. */
.senha input[type="text"] ~ .senha__olho { color: var(--verde); }

:root[data-tema="escuro"] .senha__olho:hover { background: rgba(255, 255, 255, .07); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .senha__olho:hover { background: rgba(255, 255, 255, .07); }
}

/* =====================================================================
   Busca do painel

   Campo largo, com a lupa dentro e o botão colado à direita. A altura
   maior não é estética: é o que faz o olho encontrar o campo antes de
   ler qualquer outra coisa da tela.
   ===================================================================== */

.busca-painel {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding: .375rem .375rem .375rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--separador);
  border-radius: 14px;
  box-shadow: var(--sombra-1);
  transition: border-color .14s ease, box-shadow .14s ease;
}

.busca-painel:focus-within {
  border-color: var(--verde);
  box-shadow: 0 0 0 3.5px var(--verde-fraco);
}

.busca-painel svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--tinta-4);
}
.busca-painel:focus-within svg { color: var(--verde); }

/* O campo perde a moldura própria: a moldura agora é a barra inteira. */
.busca-painel input {
  flex: 1;
  min-height: 42px;
  padding: .5rem;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 1rem;
}
.busca-painel input:focus {
  background: none;
  border: 0;
  box-shadow: none;
}

.busca-painel .botao {
  flex: 0 0 auto;
  min-height: 42px;
  border-radius: 10px;
  padding: 0 1.25rem;
}

@media (max-width: 640px) {
  .busca-painel { padding-left: .75rem; }
  .busca-painel .botao { padding: 0 .875rem; font-size: .875rem; }
  .busca-painel input { font-size: 16px; }
}

/* Cartão-número do painel.
   Ele é um link, mas nada na tela dizia isso. Uma elevação leve ao passar
   e a seta que aparece deixam claro que dá para clicar, sem precisar de
   texto "ver mais" em cada um. */
a.cartao {
  position: relative;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.cartao:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2);
}
a.cartao::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--tinta-4);
  border-top: 1.5px solid var(--tinta-4);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .14s ease;
}
a.cartao:hover::after { opacity: 1; }

/* Telas vazias com orientação: o texto cabe melhor centralizado e com
   largura de leitura, em vez de esticado na largura do cartão. */
.vazio p { margin: 0 auto; max-width: 34rem; }
.vazio p + p { margin-top: .5rem; }

/* =====================================================================
   Tabelas no celular

   Rolagem horizontal é o pior padrão possível numa lista: ao arrastar
   para ver a última coluna, a pessoa perde de vista a primeira, que é
   justamente a que diz de quem é aquela linha.

   Abaixo de 640px a tabela deixa de ser tabela. Cada linha vira um
   bloco, o cabeçalho some, e as células empilham. A informação é a
   mesma; o que muda é que ela cabe.
   ===================================================================== */

@media (max-width: 640px) {
  .rolagem { overflow-x: visible; }

  .lista, .lista tbody, .lista tr, .lista td { display: block; width: 100%; }
  .lista thead { display: none; }

  .lista tr {
    padding: .875rem 1.125rem;
    border-bottom: .5px solid var(--separador);
  }
  .lista tr:last-child { border-bottom: 0; }

  .lista td {
    padding: 0;
    border: 0;
    text-align: left !important;
  }

  /* Da segunda célula em diante, o conteúdo recua e afina: a primeira
     linha do bloco é o assunto, o resto é apoio. */
  .lista td + td {
    margin-top: .25rem;
    font-size: .875rem;
    color: var(--tinta-3);
  }

  /* Célula numérica volta à esquerda: alinhamento à direita só faz
     sentido quando há uma coluna de números para comparar. */
  .lista td.num { font-family: var(--dado); }
}

/* Cartões de número no celular.
   Empilhados um a um, os quatro indicadores do painel ocupavam quase uma
   tela inteira antes da primeira informação útil. Lado a lado, cabem em
   duas linhas e a busca continua visível junto com eles. */
@media (max-width: 640px) {
  .grade.-4 { grid-template-columns: 1fr 1fr; }
  .grade.-4 .cartao__corpo { padding: .875rem 1rem; }
  .grade.-4 .indicador__valor { font-size: 1.75rem; }
  .grade.-4 .indicador__rotulo { font-size: .6875rem; line-height: 1.3; }

  /* A seta de "clicável" some: no toque não há passagem do cursor, e o
     dedo já é a confirmação de que dá para tocar. */
  a.cartao::after { display: none; }
}

/* A busca do painel no celular: o botão sai e a lupa fica.
   Com o botão, sobravam menos de 140px para digitar num aparelho de
   360px. O teclado já tem a tecla de buscar. */
@media (max-width: 560px) {
  .busca-painel .botao { display: none; }
  .busca-painel { padding-right: 1rem; }
}

/* =====================================================================
   Tela de entrada no celular: uma superfície só

   Estava em dois blocos, cabeçalho colorido e folha branca subindo por
   cima. Dois fundos numa tela de 390px criam uma costura no meio e
   fazem a página parecer duas telas empilhadas.

   Agora é uma superfície contínua: a arte nasce no topo e desvanece,
   e o conteúdo desce sobre ela sem que nada corte. O formulário não
   tem fundo próprio — ele está sobre a mesma coisa que a marca.

   Duas versões, claro e escuro, com a mesma composição. Muda a cor, não
   o desenho.
   ===================================================================== */

@media (max-width: 899px) {
  /* Coluna de altura cheia, com o formulário empurrado para baixo.
   *
   * Antes o conteúdo terminava onde terminava, e o que sobrava embaixo
   * era fundo verde sem nada — uma faixa vazia de tamanho variável
   * conforme o aparelho, que é o pior tipo de espaço: não é respiro nem
   * conteúdo, é sobra.
   *
   * Agora a marca fica no alto, o formulário assenta na base, e o vazio
   * vai para o meio, onde vira intervalo entre duas coisas em vez de
   * rabo de página. */
  .acesso {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--entrada-fundo);
    color: var(--entrada-tinta);
  }

  .acesso__marca { flex: 0 0 auto; }

  /* Com o teclado aberto sobram cerca de 516px de tela. A marca recua
     para caber junto com os campos, em vez de empurrá-los para fora e
     obrigar a rolar no meio da digitação.
     
     O gatilho é a altura da janela, que o teclado reduz: não há evento
     de "teclado aberto" no navegador, e a altura é o sinal disponível. */
  @media (max-height: 600px) {
    .acesso__figura { width: clamp(64px, 18vw, 88px); margin-bottom: .5rem; }
    .acesso__nome { font-size: 1.125rem; margin-bottom: .5rem; }
    .acesso__lema { display: none; }
    .acesso__marca { padding-top: calc(1rem + env(safe-area-inset-top)); padding-bottom: .5rem; }
  }

  .acesso__form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* O painel deixa de ser bloco: vira só o topo da página. A arte fica,
     desvanecendo antes do formulário começar. */
  .acesso__marca {
    background: none;
    padding: 3rem 1.5rem 1.5rem;
    color: inherit;
  }

  /* A arte fica presa ao topo da tela inteira, não ao painel da marca:
     como o painel agora tem altura própria e o formulário desce até a
     base, uma arte que terminasse com o painel deixaria a metade de
     baixo lisa e vazia. */
  .acesso__arte {
    position: fixed;
    inset: 0 0 auto 0;
    height: 55vh;
    opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  }

  .acesso__marca::after {
    position: fixed;
    inset: -20% -25% auto -25%;
    height: 60vh;
  }

  .acesso__marca::after {
    inset: -30% -30% auto -30%;
    height: 70vh;
  }

  .acesso__nome { color: var(--entrada-tinta); }

  /* O formulário perde o fundo e a subida: não há mais folha, há
     continuação. */
  .acesso__form {
    background: none;
    border-radius: 0;
    margin-top: 0;
    padding: .5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom));
  }

  .acesso__saudacao { color: var(--entrada-tinta); }
  .acesso__apoio { color: var(--entrada-apoio); }

  .acesso__form label { color: var(--entrada-apoio); }

  /* Campo vazado, com contorno em vez de fundo. Sobre superfície única,
     caixa preenchida voltaria a criar blocos dentro da tela. */
  .acesso__form input {
    background: var(--entrada-campo);
    border: 1px solid var(--entrada-borda);
    color: var(--entrada-tinta);
  }
  .acesso__form input::placeholder { color: var(--entrada-apoio); opacity: .7; }
  .acesso__form input:focus {
    background: var(--entrada-campo-foco);
    border-color: var(--verde-claro);
    box-shadow: 0 0 0 3.5px rgba(127, 227, 192, .16);
  }

  .senha__olho { color: var(--entrada-apoio); }
  .senha__olho:hover { background: var(--entrada-campo-foco); }

  /* Sobre o verde escuro do fundo, o verde do sistema quase não se
     separa. O botão clareia para virar o ponto mais luminoso da tela,
     que é onde a pessoa precisa tocar. */
  .acesso__form .botao {
    background: var(--verde-claro);
    color: #06251C;
  }
  .acesso__form .botao:hover { background: #96EDD0; }

  .acesso__rodape {
    color: var(--entrada-apoio);
    border-top-color: var(--entrada-borda);
  }
}

/* ---- as duas versões da tela de entrada ------------------------------
   Variáveis próprias, e não as do sistema: a tela de entrada tem fundo
   escuro mesmo quando o resto está claro, então ela precisa de uma
   paleta que não dependa do tema geral. */

:root {
  --entrada-fundo:      #0B3B2E;
  --entrada-tinta:      #FFFFFF;
  --entrada-apoio:      rgba(255, 255, 255, .68);
  --entrada-campo:      rgba(255, 255, 255, .08);
  --entrada-campo-foco: rgba(255, 255, 255, .14);
  --entrada-borda:      rgba(255, 255, 255, .18);
}




/* No desktop ele fica sobre a coluna branca do formulário, então volta
   às cores do sistema. */

/* =====================================================================
   Capa da tela de entrada, no celular

   Duas telas em vez de uma: a marca ocupa o aparelho inteiro, e o
   formulário só aparece depois do toque. É o padrão da referência, e
   funciona porque separa duas coisas que competiam pela mesma altura —
   apresentar o sistema e receber a senha.

   Aparece uma vez por aparelho. Numa ferramenta de trabalho diário, um
   toque a mais todo dia é imposto sobre quem já sabe onde está; a capa
   serve a quem chega, não a quem volta.
   ===================================================================== */

.acesso__puxador { display: none; }

@media (max-width: 899px) {
  /* Capa aberta */
  :root[data-capa="1"] .acesso__marca {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
  }

  :root[data-capa="1"] .acesso__arte {
    height: 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 92%);
  }

  /* Na capa a marca cresce: é a única coisa na tela, e o tamanho que
     ficaria exagerado ao lado de um formulário aqui é o assunto. */
  :root[data-capa="1"] .acesso__figura { width: clamp(150px, 46vw, 220px); }
  :root[data-capa="1"] .acesso__nome { font-size: clamp(1.75rem, 6vw, 2.25rem); }
  :root[data-capa="1"] .acesso__lema { margin-top: 1.125rem; font-size: 1.125rem; }

  :root[data-capa="1"] .acesso__form { display: none; }

  /* Formulário aberto: a marca encolhe e sobe, revelando os campos.
     A transição mostra o que mudou, em vez de trocar a tela de uma vez. */
  .acesso__marca {
    transition: min-height .3s var(--curva), padding .3s var(--curva);
  }
  .acesso__figura, .acesso__nome,
}

@media (prefers-reduced-motion: reduce) {
  .acesso__marca, .acesso__figura, .acesso__nome,
}

/* Voltar para a capa.
   Discreto e no alto do formulário, onde o polegar alcança sem esticar.
   Só existe no celular: no desktop as duas coisas estão na mesma tela. */
.acesso__voltar { display: none; }

@media (max-width: 899px) {
  .acesso__voltar {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: 1.25rem;
    padding: .375rem .625rem .375rem .375rem;
    min-height: 36px;
    border: 0;
    border-radius: var(--r-p);
    background: none;
    font: inherit;
    font-size: .875rem;
    color: var(--entrada-apoio);
    cursor: pointer;
  }
  .acesso__voltar svg { width: 17px; height: 17px; }
  .acesso__voltar:hover { color: var(--entrada-tinta); }

  :root[data-capa="1"] .acesso__voltar { display: none; }
}


/* =====================================================================
   Puxador da capa

   Substitui o botão. Arrastar para cima é o gesto que o telefone já
   ensina — é assim que se abre a câmera, o painel de controle, a lista
   de apps. Um botão escrito "Entrar" numa capa em tela cheia é o padrão
   de site, não de aplicativo.

   A seta sobe e volta devagar, num ciclo de 2,4 segundos. É a única
   animação da tela: ela existe para dizer para onde arrastar, e para
   nada mais.

   Continua sendo tocável, e por baixo é uma âncora. Gesto sozinho
   excluiria quem navega por teclado ou leitor de tela, e tela de senha
   não pode ter porta única.
   ===================================================================== */

@media (max-width: 899px) {
  :root[data-capa="1"] .acesso__puxador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: 2.25rem;
    padding: .75rem 1rem;
    text-decoration: none;
    color: var(--entrada-apoio);
    -webkit-tap-highlight-color: transparent;
  }

  .acesso__puxador-seta {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--entrada-borda);
    color: var(--entrada-tinta);
    animation: puxar 2.4s ease-in-out infinite;
  }
  .acesso__puxador-seta svg { width: 20px; height: 20px; }

  .acesso__puxador-texto {
    font-size: .8125rem;
    letter-spacing: .01em;
  }

  .acesso__puxador:active .acesso__puxador-seta {
    background: var(--entrada-campo-foco);
    animation: none;
  }
}

@keyframes puxar {
  0%, 100% { transform: translateY(4px); opacity: .65; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .acesso__puxador-seta { animation: none; }
}

/* =====================================================================
   Áreas seguras do aparelho

   iPhone 15: 393x852, com 59px de ilha dinâmica no topo e 34px de
   indicador de home embaixo. Sem respeitar as duas, a marca fica atrás
   da ilha e o puxador cai em cima da barra de gesto do sistema — que é
   justamente onde o dedo já arrasta para outra coisa.
   ===================================================================== */

@media (max-width: 899px) {
  :root[data-capa="1"] .acesso__marca {
    padding-top: calc(2rem + env(safe-area-inset-top));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }

  .acesso__marca { padding-top: calc(2.25rem + env(safe-area-inset-top)); }

}

/* =====================================================================
   Painel da plataforma

   Diferente do sistema de advocacia de propósito: barra escura no topo,
   sem menu lateral. Quem está aqui administra a plataforma, não trabalha
   num escritório — e as duas telas não podem ser confundidas.
   ===================================================================== */

.corpo-ti { background: var(--fundo); }

.ti-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 4vw, 2.5rem);
  background: var(--tinta);
  color: #fff;
}

.ti-topo__marca {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
}
.ti-topo__marca span {
  font-weight: 400;
  opacity: .6;
  margin-left: .25rem;
}

.ti-topo__menu { display: flex; gap: 1.25rem; }
.ti-topo__menu a {
  color: rgba(255, 255, 255, .78);
  font-size: .9375rem;
  text-decoration: none;
}
.ti-topo__menu a:hover { color: #fff; text-decoration: none; }

.ti-corpo {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem);
}

/* Nome do escritório aberto, no menu.
   Discreto: é orientação, não navegação. Quem trabalha num escritório só
   nunca vê isto, porque a instalação de escritório único não tem
   escritório na sessão. */
.lateral__escritorio {
  display: block;
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--verde-2);
}

/* =====================================================================
   Entrada do painel da plataforma

   Sóbria de propósito. Quem entra aqui pode tirar um escritório do ar, e
   a tela lembra disso em vez de vender o produto.
   ===================================================================== */

.corpo-ti-acesso { background: var(--tinta); }

.ti-acesso {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.ti-acesso__caixa {
  width: 100%;
  max-width: 23rem;
  background: var(--superficie);
  padding: 2.25rem;
  border-radius: 18px;
}

.ti-acesso__marca {
  margin: 0 0 .5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ti-acesso__marca span { font-weight: 400; color: var(--tinta-3); }

.ti-acesso__aviso {
  margin: 0 0 1.75rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--tinta-3);
}

.ti-acesso .botao { width: 100%; min-height: 48px; border-radius: 12px; }

/* Contador de chamados em aberto, na barra do painel. */
.ti-topo__conta {
  display: inline-block;
  margin-left: .25rem;
  padding: 0 .375rem;
  min-width: 18px;
  border-radius: var(--r-pilula);
  background: var(--vencido);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}