/* Chapar :: Área do Cliente
   ---------------------------------------------------------------------------
   O vocabulário visual (fonte, raios, cards de cabeçalho navy, pílulas,
   ausência de destaque de foco) vem do Chapar :: Gerenciador de e-mails.

   A paleta, porém, é escura sempre — e não conforme o tema do sistema
   operacional, como no projeto irmão. O app roda embutido num iframe no site
   do usuário, que tem fundo preto sólido: qualquer variação clara viraria uma
   moldura acesa em volta do conteúdo. Por isso o fundo é preto puro e as cores
   abaixo são as únicas do projeto.
   --------------------------------------------------------------------------- */

:root {
  --bg: #000000;
  --surface: #0f1116;
  --border: #23262f;
  --border-input: #33374a;
  --text: #eef0f4;
  --text-muted: #9aa1ae;
  --navy: #16336f;
  --navy-2: #1b5fd0;
  --brand: #4fa0f5;
  --brand-2: #5fb0ff;
  --brand-soft: rgba(95, 176, 255, 0.18);
  --accent: #3cc9c9;
  --accent-soft: #123333;
  --error: #f87171;
  --error-2: #fb8f8f;
  --error-soft: #3a1c1e;
  --warning: #fbbf6a;
  --warning-soft: #3a2c14;
  --dropdown-hover-bg: #1c2740;
  --dropdown-hover-text: #6fa4f2;
  /* Texto sobre fundo sólido --brand/--accent. Nas duas marcas atuais o
     fundo de marca é escuro (azul, cinza-médio), então branco funciona —
     existe como variável à parte porque a grmjr também tem --brand branco
     (botão primário), onde o texto precisa virar escuro. */
  --brand-contraste: #ffffff;
  --accent-contraste: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;

  /* Escala de espaçamento — base 8.
     Nenhum respiro no projeto é um número solto: todo padding, margem e gap
     sai de um destes degraus. É o que faz blocos diferentes (um cartão, uma
     faixa, uma aba) parecerem parte do mesmo desenho em vez de cada um ter
     sido acertado no olho. A regra que acompanha a escala: paddings opostos
     são sempre iguais — esquerda igual à direita, topo igual à base. A única
     exceção documentada é o respiro final da rolagem, em `main`. */
  --esp-1: 8px;
  --esp-2: 16px;
  --esp-3: 24px;
  --esp-4: 32px;
  --esp-5: 48px;
  --esp-6: 64px;
  /* Meio-degrau, só para o que é menor que o primeiro nível: o vão entre um
     rótulo e o valor logo abaixo dele, a distância de uma etiqueta ao texto. */
  --esp-0: 4px;

  /* A coluna em que a aplicação inteira vive: cabeçalho, faixa do contrato,
     abas e conteúdo saem todos desta mesma medida, centralizada. Uma variável
     só governando as quatro coisas é o que garante que nada desalinhe ao
     trocar de tela ou de aba — e o que dispensa margens fixas na mão. */
  --largura-conteudo: 1120px;

  /* Largura de leitura do texto corrido. Entre 65 e 75 caracteres por linha é
     onde o olho volta para a linha seguinte sem se perder; acima disso, textos
     longos cansam mesmo com o espaçamento certo. */
  --largura-leitura: 680px;

  /* Sombras sobre preto puro. As antigas usavam um azul-ardósia quase
     invisível neste fundo — em preto só sombra francamente escura aparece. */
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.35);
  --sombra-alta: 0 12px 28px rgba(0, 0, 0, 0.45);

  /* Uma duração e uma curva só para toda a interface: elementos diferentes
     respondendo no mesmo tempo é o que dá sensação de peça única. */
  --transicao: 0.18s ease;

  font-family: "Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* grmjr.com: identidade em preto e branco — as mesmas variáveis de marca da
   Ancestral Cidadão (azul/teal), só que em tons de cinza. Cores de estado
   (erro, alerta) continuam iguais nas duas marcas: são semânticas, não de
   identidade visual. */
.marca-grmjr {
  --navy: #2a2a2a;
  --navy-2: #4d4d4d;
  --brand: #ffffff;
  --brand-2: #d5d5d5;
  --brand-soft: rgba(255, 255, 255, 0.14);
  --accent: #b0b0b0;
  --accent-soft: #262626;
  --dropdown-hover-bg: #262626;
  --dropdown-hover-text: #e5e5e5;
  /* --brand e --accent viraram claros nesta marca — o texto por cima deles
     precisa virar escuro para continuar legível. */
  --brand-contraste: #0f1116;
  --accent-contraste: #0f1116;
}

/* ===========================================================================
   Modo claro
   ---------------------------------------------------------------------------
   O escuro continua sendo o padrão: quem abre o app pela primeira vez cai
   nele, e só passa para cá quem acionar a chave. A escolha fica guardada no
   navegador e é reaplicada em base.html antes da página pintar, para não
   haver um piscar escuro no caminho.

   O atributo vive no <html> e as variáveis de marca no <body>, que é mais
   perto de quem as usa — por isso a regra da grmjr precisa combinar os dois
   seletores: `.marca-grmjr` sozinha, sendo mais próxima, venceria os valores
   claros herdados de cima.

   O fundo é cinza-claro e as superfícies brancas, e não tudo branco: é o que
   reproduz no claro a separação por camadas que o escuro faz com preto e
   grafite. Com tudo na mesma cor, cartões e faixas achatam contra o fundo e
   só as bordas os separam.
   =========================================================================== */

[data-tema="claro"] {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --border: #e0e4ec;
  --border-input: #c4cad8;
  --text: #12141a;
  --text-muted: #5d6472;
  /* O azul-marinho do cabeçalho dos cartões continua escuro nos dois modos:
     é ele que dá o contraste do título em branco, e clarear a faixa exigiria
     reescrever o texto por cima dela. */
  --navy: #16336f;
  --navy-2: #1b5fd0;
  --brand: #1b5fd0;
  --brand-2: #16336f;
  --brand-soft: rgba(27, 95, 208, 0.12);
  --accent: #0e7f7f;
  --accent-soft: #ddf1f1;
  --error: #c0392b;
  --error-2: #96271b;
  --error-soft: #fdeceb;
  --warning: #9a6a10;
  --warning-soft: #fdf2dd;
  --dropdown-hover-bg: #e8f0fe;
  --dropdown-hover-text: #1b5fd0;
  --brand-contraste: #ffffff;
  --accent-contraste: #ffffff;

  /* Sombras muito mais fracas: o preto quase opaco que aparece sobre fundo
     escuro vira uma mancha suja sobre branco. */
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sombra-alta: 0 10px 24px rgba(16, 24, 40, 0.12);

  /* O que o navegador desenha sozinho — cursor de campo, menu de
     preenchimento automático — acompanha o modo. */
  color-scheme: light;
}

[data-tema="claro"] .marca-grmjr {
  --navy: #2a2a2a;
  --navy-2: #4d4d4d;
  /* No escuro esta marca tem --brand branco; no claro ele precisa virar quase
     preto, ou botões e links sumiriam contra o fundo. */
  --brand: #1a1a1a;
  --brand-2: #000000;
  --brand-soft: rgba(0, 0, 0, 0.08);
  --accent: #4d4d4d;
  --accent-soft: #ededed;
  --dropdown-hover-bg: #f0f0f0;
  --dropdown-hover-text: #2a2a2a;
  /* --brand voltou a ser escuro, então o texto por cima dele volta a ser claro. */
  --brand-contraste: #ffffff;
  --accent-contraste: #ffffff;
}

/* A logo da grmjr é branca sobre fundo transparente — sobre o claro ela
   desapareceria. Como é monocromática, inverter devolve exatamente o mesmo
   desenho em preto, sem precisar de um segundo arquivo. A da Ancestral é
   colorida e fica de fora: invertida, teria as cores trocadas. */
[data-tema="claro"] .marca-grmjr .app-logo {
  filter: invert(1);
}

* { box-sizing: border-box; }

html {
  /* Rolagem sempre ligada, em toda tela, mesmo nas curtas. É isso que impede o
     solavanco lateral: sem `scroll` fixo, a barra nasce no meio do caminho —
     ao trocar de aba, ao abrir um contrato mais longo — e, ao aparecer, come a
     largura da página e empurra alguns pixels para o lado tudo que está
     centralizado. Com o valor fixo, toda página se comporta igual. */
  overflow-y: scroll;
  scrollbar-gutter: stable;

  /* ...e a barra em si fica invisível. O comportamento não muda: a página
     continua rolando com roda, toque, teclado e barra de espaço — some apenas
     o traço cinza na lateral, que num app preto ficava marcando a moldura. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */

  /* A interface é escura sempre. Declarar isso faz o navegador desenhar de
     escuro o que ele mesmo pinta — a barra de rolagem à direita, o cursor dos
     campos, o menu de preenchimento automático — em vez de encaixar uma barra
     branca na lateral de um app preto. */
  color-scheme: dark;

  /* O fundo precisa estar no <html> também: quando o conteúdo é mais baixo que
     a janela, é ele que aparece atrás, e não o <body>. */
  background: var(--bg);

  /* Altura cheia mesmo quando o conteúdo é curto: é o que faz a tela de acesso
     ficar centralizada de verdade dentro do iframe, e não colada no topo. */
  height: 100%;
}

/* Chrome, Edge e Safari não entendem `scrollbar-width`; a barra some por aqui.
   Zerar a largura, em vez de `display: none`, mantém a área de rolagem
   existindo para o navegador — só não pinta nada nela. */
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Coluna: a barra superior em cima e o resto ocupando o que sobra. É o que
   permite centralizar a tela de acesso no espaço abaixo da barra sem precisar
   descontar a altura dela na mão. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

/* Decisão explícita do projeto irmão, mantida aqui: nenhum elemento mostra
   destaque de foco. Onde o foco precisa ser perceptível (os seis campos do
   código), a pista vem pela cor da borda, que não é outline nem sombra. */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
  outline: none;
  box-shadow: none;
}

a { color: inherit; }

/* Trava de espera. Cobre a janela inteira sem pintar nada: o único sinal é o
   cursor, que vem daqui — por isso `cursor` mora nela, e não no <body>. O
   z-index é o maior do projeto porque ela precisa ficar acima até do bloco
   fixo do topo, que é quem tem o segundo maior. */
.trava {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;
  cursor: progress;
}

/* `hidden` sozinho não basta: qualquer `display` declarado depois o venceria,
   e aqui a folha ainda precisaria ser removida do caminho dos cliques. */
.trava[hidden] { display: none; }

/* Etiqueta do modo de diagnóstico (?diag=1). Fica por cima de tudo e não
   intercepta clique — só informa o tamanho que a moldura entregou. */
.diagnostico {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 999;
  padding: var(--esp-0) var(--esp-1);
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-contraste);
  font-size: 11.5px;
  font-weight: 600;
  pointer-events: none;
}

/* ===========================================================================
   Telas de acesso — entrada por CPF, código de verificação e barreiras
   =========================================================================== */

/* Ocupa o que sobra abaixo da barra superior e centraliza o cartão nesse
   espaço. (Houve aqui um teto de 620px, feito para sobreviver a iframe que
   corta o conteúdo; ele centralizava bem a tela de CPF, curta, e deixava a do
   código, mais alta que o teto, começando no topo — duas telas irmãs com
   alinhamentos diferentes. Sem iframe, saiu.) */
.acesso {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* `safe` impede o outro efeito colateral da centralização: numa moldura mais
     baixa que o conteúdo, o começo do cartão fica acima da borda de cima e
     vira uma parte inalcançável, sem rolagem que chegue lá. */
  justify-content: safe center;
  /* Espaço igual em cima e embaixo: com valores diferentes o conjunto fica
     alguns pixels fora do meio, e dentro do iframe isso salta aos olhos. */
  padding: var(--esp-5) var(--esp-3);
  gap: var(--esp-4);
}

/* Logo das telas de acesso. Nada de inverter cor como se fazia com a antiga,
   monocromática: esta é colorida, tem fundo transparente e já foi feita para
   aparecer sobre escuro. */
.acesso-logo {
  height: 76px;
  width: auto;
  display: block;
}

/* Caixa de tamanho fixo, igual nas duas telas de acesso: ao passar do CPF para
   o código muda o texto de dentro, e não a moldura. A altura é a da tela mais
   alta (a do código); o conteúdo fica centralizado dentro dela, e por isso a
   tela de CPF, mais curta, não deixa um vão embaixo.
   Sem sombra: sobre preto ela não aparece, e é a borda que separa o cartão. */
.acesso-card {
  width: 100%;
  /* 460px é a largura em que "Enviaremos um código de confirmação para o seu
     e-mail cadastrado." cabe numa linha só, com folga. */
  max-width: 460px;
  /* Altura travada, e não um piso: todas as telas de acesso — CPF, código e as
     quatro barreiras — precisam da mesma moldura, mudando só o conteúdo dentro.
     Com um piso, a tela mais alta crescia além dele e a caixa mudava de tamanho
     no meio do fluxo. O valor cobre a mais alta (a do código, 399px) com folga
     de quase cinquenta pixels, e é múltiplo de 8 como o resto da escala. */
  height: 448px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.acesso-titulo {
  margin: 0 0 var(--esp-1);
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-2);
  text-transform: uppercase;
}

.acesso-texto {
  margin: 0 0 var(--esp-3);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Só as telas de barreira (barreira.html) — o texto é mais longo que a frase
   curta da entrada e da verificação, então alinha à esquerda em vez de ficar
   centralizado linha a linha. Alinhado, e não justificado: em português, sem
   hifenização, justificar abre vãos irregulares entre as palavras num bloco
   estreito como este. Mesma escolha feita no texto das movimentações.

   Meio ponto menor que o texto das outras telas: como o cartão tem altura
   travada, é aqui — no único texto que varia de tamanho conforme o desfecho —
   que precisa sobrar folga para ele nunca encostar no limite da caixa. */
.acesso-texto-erro {
  text-align: left;
  font-size: 13px;
}

/* Link no meio de uma frase (o WhatsApp das telas de barreira). Sublinhado de
   saída, e não só na passagem do mouse: perdido dentro do parágrafo, sem o
   traço ele viraria apenas uma palavra colorida — e num app onde a cor da
   marca também pinta texto comum, cor sozinha não basta para dizer "clique". */
.link-texto {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transicao);
}

.link-texto:hover { color: var(--brand-2); }

.acesso-texto strong {
  color: var(--text);
  font-weight: 600;
}

.campo-cpf {
  width: 100%;
  padding: var(--esp-2);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
}

.campo-cpf::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.campo-cpf:focus {
  border-color: var(--brand-2);
}

.botao-primario {
  width: 100%;
  margin-top: var(--esp-2);
  padding: var(--esp-2);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--brand-contraste);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transicao);
}

.botao-primario:hover {
  background: var(--brand-2);
}

/* Desabilitado só quando o código foi cancelado por tentativas. Sem isto o
   botão continuaria com cara de clicável — a cor do botão, sendo do autor,
   vence o cinza que o navegador daria sozinho. */
.botao-primario:disabled,
.codigo-digito:disabled {
  opacity: .5;
  cursor: default;
}

.botao-primario:disabled:hover {
  background: var(--brand);
}

/* O mesmo botão, quando é um link (o "Voltar" das telas de barreira): um <a>
   não é bloco nem centraliza o próprio texto como o <button>, e sem isto ele
   encolhia até o tamanho da palavra em vez de ocupar a largura do cartão. */
a.botao-primario {
  display: block;
  text-align: center;
  text-decoration: none;
}

.botao-texto {
  border: none;
  background: none;
  color: var(--brand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: var(--esp-1);
  text-decoration: none;
}

.botao-texto:hover {
  text-decoration: underline;
}

.botao-texto:disabled {
  color: var(--text-muted);
  cursor: default;
  text-decoration: none;
}

.acesso-rodape {
  margin-top: var(--esp-3);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Meio ponto a menos que o resto do texto de apoio: é o que falta para a
     frase do e-mail caber numa linha em vez de quebrar no meio. */
  font-size: 12px;
  gap: var(--esp-1);
  color: var(--text-muted);
  /* Texto longo ao lado do "Reenviar código" (o limite de reenvios) desce
     para a linha de baixo em vez de espremer os dois. Com a contagem curta
     ("em 58s") tudo continua numa linha só. */
  flex-wrap: wrap;
}

.acesso-rodape .botao-texto {
  white-space: nowrap;
}

/* Sem a margem que o navegador dá a todo parágrafo: dentro do flex ela não
   colapsa e sobra como um vão extra embaixo, deixando a tela do código doze
   pixels mais baixa que a de CPF. O espaçamento aqui é do `gap` do container. */
.acesso-ajuda {
  margin: var(--esp-1) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

/* Os seis campos do código. Um input por dígito porque o cliente costuma
   digitar olhando o e-mail aberto ao lado: campo separado deixa óbvio quantos
   números faltam, e o salto automático dispensa navegar com Tab. */
.codigo-campos {
  display: flex;
  justify-content: center;
  gap: var(--esp-1);
  margin-bottom: var(--esp-1);
}

.codigo-digito {
  width: 46px;
  height: 56px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  transition: border-color var(--transicao);
}

.codigo-digito:focus {
  border-color: var(--brand-2);
}

.codigo-digito.preenchido {
  border-color: var(--brand-soft);
  background: var(--dropdown-hover-bg);
  color: var(--dropdown-hover-text);
}

.contagem {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  /* A mensagem de limite, quando quebra, quebra em duas linhas parecidas —
     e não com o "min." sozinho embaixo. Navegador sem suporte só ignora. */
  text-wrap: balance;
}

/* Emblema das telas de barreira: o círculo grande resolve o tom da mensagem
   antes da leitura — o cliente já sabe se é bloqueio, aviso ou pendência. */
.emblema {
  width: 62px;
  height: 62px;
  margin: 0 auto var(--esp-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  line-height: 1;
}

.emblema-erro { background: var(--error-soft); color: var(--error); }
.emblema-aviso { background: var(--warning-soft); color: var(--warning); }
.emblema-info { background: var(--accent-soft); color: var(--accent); }

.alerta {
  border-radius: var(--radius-sm);
  padding: var(--esp-2);
  margin-bottom: var(--esp-2);
  font-size: 13px;
  text-align: center;
}

.alerta-erro {
  background: var(--error-soft);
  color: var(--error);
}

/* Aviso, não erro ("Sua sessão terminou"): nada deu errado, o cliente só
   precisa entrar de novo. O texto fica em --text, e não em --warning, porque
   o tom de alerta sobre o fundo claro não passa no contraste mínimo. */
.alerta-aviso {
  background: var(--warning-soft);
  color: var(--text);
}

/* ===========================================================================
   Cabeçalho das telas internas
   =========================================================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sombra);
}

/* A faixa do cabeçalho atravessa a tela inteira (é o fundo dela que separa o
   app do resto), mas o conteúdo dentro dela obedece à mesma coluna central de
   todo o resto — é isso que põe a logo exatamente sobre a margem esquerda do
   conteúdo abaixo, em vez de colada na borda da tela. */
.app-header-inner {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-2) var(--esp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.app-logo {
  height: 52px;
  width: auto;
  display: block;
}

/* Reserva enquanto a logo de uma marca ainda não tem arquivo — texto no
   lugar da imagem, mesma altura de linha, para o cabeçalho não pular. */
.app-logo-texto {
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.02em;
}

/* Coluna encostada à direita: nome, CPF e saída, um sob o outro. Tudo
   alinhado à direita porque é essa a borda que o olho compara com a margem do
   conteúdo abaixo — alinhado à esquerda, as três linhas teriam comprimentos
   diferentes e a borda ficaria irregular bem no canto da tela. */
.app-usuario {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
  text-align: right;
}

.app-usuario-nome {
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-usuario-cpf {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Do mesmo tamanho e peso do "Meus contratos": os dois são navegação
   secundária, e não ações em destaque. Nasce cinza, como o CPF logo acima,
   para não competir com o conteúdo — e vira vermelho quando o cliente mira,
   que é o instante em que importa lembrar que ali a sessão termina. */
.sair-link {
  margin-top: var(--esp-0);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transicao);
}

.sair-link:hover { color: var(--error); }

/* A mesma coluna do cabeçalho, centralizada. O respiro de baixo é a única
   assimetria proposital do projeto: sem ele o último item da página termina
   colado na borda inferior da moldura, sem folga para a rolagem. */
main {
  /* `width: 100%` não é redundante: o <main> é filho direto do <body>, que é
     um flex em coluna. Numa caixa dessas, margem lateral automática desliga o
     esticamento padrão e o elemento passa a encolher até o tamanho do próprio
     conteúdo — o teto de largura nunca chegava a valer, e a grade de contratos
     ficava mais estreita que a coluna. Com a largura declarada, ele volta a
     ocupar a linha inteira antes de o teto e a centralização entrarem.

     Sem respiro no topo: nas duas telas que usam <main>, quem define a
     distância até o conteúdo é o bloco fixo logo acima — a faixa do contrato
     na área e o título na escolha. Mantê-lo aqui somava dois respiros e era
     o que fazia cada aba começar numa altura diferente da Agenda. */
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--esp-3) var(--esp-6);
}

/* Centralizado e em caixa alta: a tela de escolha do contrato é toda simétrica
   em torno do eixo, do título aos cartões. O espaçamento entre letras é
   positivo aqui — o negativo que fecha títulos em caixa baixa aperta demais
   uma linha em versal, onde cada letra ocupa a mesma altura. */
.pagina-titulo {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
}

.pagina-subtitulo {
  margin: 0 0 var(--esp-3);
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ===========================================================================
   Escolha do contrato
   =========================================================================== */

/* Colunas de largura fixa e o conjunto centralizado, em vez de colunas
   elásticas ocupando a linha inteira. São duas consequências: o cartão tem
   sempre o mesmo tamanho, seja o cliente com dois contratos ou com seis; e
   uma linha incompleta fica no meio da tela, e não encostada à esquerda com
   um buraco à direita.

   `auto-fit` é o que permite isso: ele descarta as colunas que sobraram vazias
   antes de centralizar — com `auto-fill` elas continuariam ocupando lugar e
   puxariam os cartões para a esquerda. O teto de três por linha sai sozinho da
   conta: dentro da coluna de 1120px, um quarto cartão de 340px não cabe. */
.contratos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, 340px);
  justify-content: center;
  gap: var(--esp-3);
}

/* O topo da escolha de contrato: a linha do botão de tema conta como parte do
   bloco fixo, e é a partir dela que a folga do título é medida. Os mesmos
   --esp-3 acima e abaixo dele — o de baixo vem do recuo do bloco, já que os
   cartões começam onde ele termina. É essa a compensação que faz o título
   parecer no meio do vão, apesar da linha do botão acima dele. */
/* Os dois seletores juntos, e não `.topo-contratos` sozinho: a regra genérica
   de `.area-fixa-conteudo` vem depois nesta folha e declara o recuo pelo
   atalho, zerando o de baixo. Com a mesma força, quem vem por último vence —
   daí a especificidade a mais. */
.area-fixa-conteudo.topo-contratos {
  padding-bottom: var(--esp-3);
}

.topo-contratos .pagina-titulo {
  margin-top: var(--esp-3);
}

.contrato-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}

.contrato-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-soft);
  box-shadow: var(--sombra-alta);
}

/* Os três blocos do cartão (cabeçalho, corpo e rodapé) usam o mesmo par de
   respiros, para que o título, o objeto e a data comecem todos na mesma
   vertical — antes eram 18px de lado com 16px, 16px e 12px de topo. */
.contrato-card-header {
  min-height: 104px;
  padding: var(--esp-2) var(--esp-3);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--esp-1);
}

.contrato-card-header h2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* O corte em quatro linhas fica no parágrafo de dentro, não no bloco: como o
   bloco é esticado pelo flex para alinhar os rodapés dos cards da mesma
   linha, o corte aplicado nele mostraria as reticências no meio e o texto
   continuaria aparecendo abaixo. */
.contrato-card-corpo {
  flex: 1;
  padding: var(--esp-2) var(--esp-3);
}

.contrato-card-objeto {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contrato-card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-3);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.contrato-card-rodape .abrir {
  color: var(--brand);
  font-weight: 600;
}

/* Pílula de situação. Sobre o azul do cabeçalho ela ganha fundo próprio; nas
   demais telas (faixa do contrato) ela aparece sobre o fundo claro. */
.pilula {
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px var(--esp-1);
  border-radius: 999px;
  white-space: nowrap;
}

.pilula-andamento { background: var(--accent); color: var(--accent-contraste); }
.pilula-concluido { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ===========================================================================
   Área do contrato — faixa de identificação
   =========================================================================== */

/* Item de navegação secundário, não um botão: pequeno e discreto, porque
   concorre com a faixa do contrato logo abaixo — que é o assunto da tela.
   `inline-flex` em vez de `inline-block` para a seta e o texto dividirem a
   mesma linha de base óptica; alinhados pelo centro, e não pela base, o
   traço da seta fica na altura do meio das letras em caixa alta. */
.voltar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-0);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transicao);
}

/* A seta acompanha o corpo do texto: some o descompasso de um ícone de
   tamanho fixo ao lado de uma fonte pequena. */
.voltar-link svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.voltar-link:hover { text-decoration: underline; }

/* Cliente com um contrato só: não há para onde voltar, mas a linha continua
   ali segurando o espaçamento. Apagado e sem reagir ao mouse — presente como
   estrutura, não como promessa de clique. */
.voltar-link-inativo {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ===========================================================================
   Faixa de utilidades e chave de tema
   =========================================================================== */

/* A linha fina que atravessa todas as telas logo abaixo do cabeçalho: à
   esquerda o "Meus contratos" (só onde ele existe), à direita a chave de
   tema. Estando em todas, a chave nunca muda de lugar de uma tela para
   outra — e a faixa mantém a mesma altura mesmo quando o lado esquerdo
   está vazio, que é o que evita o conteúdo abaixo subir e descer. */
.barra-utilidades {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  min-height: 24px;
  margin-top: var(--esp-2);
}

/* Fora da área do contrato não existe uma coluna pronta em volta, então a
   faixa carrega a sua própria — a mesma de todo o resto do app.

   `width: 100%` pela mesma razão do <main>: filha direta do <body>, que é um
   flex em coluna, a margem lateral automática desliga o esticamento padrão e
   a faixa encolhe até o tamanho do botão, levando a chave para o meio da
   tela em vez da borda direita da coluna. */
.barra-utilidades-pagina {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--esp-3);
}

/* Chave de liga e desliga: trilho com os dois ícones à mostra e uma bolinha
   que desliza sobre o ícone do modo em vigor. Mostrar os dois — em vez de só
   o do modo oposto — é o que deixa claro que existe uma escolha, e não um
   botão que faz algo desconhecido. */
.tema-btn {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-input);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: border-color var(--transicao), background var(--transicao);
}

.tema-btn:hover { border-color: var(--brand); }

/* Cada ícone ocupa metade do trilho, e o seu centro é exatamente onde a
   bolinha para — por isso um cai sempre em cima do outro, sem acerto fino. */
.tema-btn-icone {
  position: relative;
  z-index: 1;
  display: flex;
  width: 22px;
  justify-content: center;
  transition: color var(--transicao);
}

.tema-btn-icone svg { display: block; }

/* No escuro (padrão) a bolinha repousa sobre a lua; no claro ela desliza para
   o sol. O ícone coberto usa a cor de contraste da bolinha, e o outro fica
   apagado — é o par de cores que diz qual modo está valendo. */
.tema-btn-lua { color: var(--brand-contraste); }
.tema-btn-sol { color: var(--text-muted); }

[data-tema="claro"] .tema-btn-lua { color: var(--text-muted); }
[data-tema="claro"] .tema-btn-sol { color: var(--brand-contraste); }

.tema-btn-bolinha {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand);
  transition: transform var(--transicao);
}

/* 22px é o percurso exato: a largura interna do trilho (44px) menos a bolinha
   (18px) menos os dois respiros de 2px. */
[data-tema="claro"] .tema-btn-bolinha { transform: translateX(22px); }

/* Cabeçalho da marca, faixa do contrato e abas: um bloco só, fixo no topo.
   Só o conteúdo da aba, abaixo, rola por baixo dele. */
.area-fixa {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

/* Mesma coluna central do `main` logo abaixo — é o que faz a faixa do
   contrato, as abas e o conteúdo de qualquer aba alinharem na mesma vertical,
   sempre, em vez de variar conforme o que está aberto. */
.area-fixa-conteudo {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--esp-3);
}

.contrato-faixa {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 1fr 260px;
  margin: var(--esp-2) 0;
  overflow: hidden;
}

/* Sem o objeto, sobra só o nome do contrato deste lado — e ele fica no meio da
   coluna nos dois eixos, na mesma altura da vigência que está ao lado. */
.contrato-faixa-principal {
  padding: var(--esp-3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contrato-faixa h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

.contrato-faixa-numero {
  display: block;
  margin-bottom: var(--esp-1);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rotulo {
  display: block;
  margin-bottom: var(--esp-0);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Coluna da direita separada por linha, não por caixa: mantém a faixa como um
   objeto só, mas dá à vigência e à situação o destaque de ficha. */
.contrato-faixa-lateral {
  padding: var(--esp-3);
  border-left: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  text-align: center;
}

/* Em caixa alta como o rótulo logo acima: os dois formam uma ficha só, e a
   data em caixa baixa no meio de tanto texto em versal destoava. */
.ficha-valor {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Mesmo corpo da data logo acima: as duas são o valor da sua ficha, e a única
   diferença entre elas passa a ser a tarja em volta desta. Com tamanhos
   diferentes, uma parecia legenda da outra. */
.pilula-clara {
  align-self: center;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--esp-0) var(--esp-2);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.pilula-clara.encerrada {
  background: var(--dropdown-hover-bg);
  color: var(--dropdown-hover-text);
}

/* ===========================================================================
   Abas
   =========================================================================== */

/* Direto sobre o fundo da página — sem caixa própria. Só o traço azul da aba
   ativa marca qual está selecionada, sem linha cinza separando do conteúdo. */
/* Direto sobre o fundo da página — sem caixa própria. Só o traço azul da aba
   ativa marca qual está selecionada, sem linha cinza separando do conteúdo.
   Sem recuo lateral: a primeira aba precisa começar exatamente na mesma
   vertical do conteúdo abaixo dela e da faixa acima. */
/* Moldura das abas: existe só para ancorar as setas, que precisam ficar presas
   às bordas enquanto o conteúdo rola por baixo delas. */
.abas-area {
  position: relative;
  margin-bottom: var(--esp-1);
}

/* Seta de arrasto. Apagada e sem interceptar clique: ela informa que há mais
   aba daquele lado, e quem rola é o dedo ou a roda — virar botão criaria uma
   segunda forma de fazer a mesma coisa. O degradê atrás dela é o que dá o
   efeito de a aba se dissolver na borda em vez de ser cortada a seco. */
.abas-seta {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 40px;
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao);
}

.abas-seta-esq {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(to right, var(--bg) 40%, transparent);
}

.abas-seta-dir {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to left, var(--bg) 40%, transparent);
}

/* Acesas só quando sobrou aba escondida daquele lado — quem decide é o script
   em area.html, medindo a rolagem. */
.abas-area.tem-antes .abas-seta-esq,
.abas-area.tem-depois .abas-seta-dir { opacity: 1; }

/* Centralizadas, como o resto da coluna. O `safe` é a mesma precaução já usada
   na tela de acesso: quando as abas não cabem na largura e passam a rolar de
   lado, centralizar cortaria a primeira delas para fora da borda esquerda, num
   pedaço que a rolagem não alcança. Com `safe`, nesse caso ele volta sozinho a
   alinhar pelo começo. */
.abas {
  position: relative;
  display: flex;
  justify-content: safe center;
  gap: var(--esp-0);
  overflow-x: auto;
  scrollbar-width: none;
}

.abas::-webkit-scrollbar { display: none; }

/* Ícone e rótulo na mesma linha: o ícone dá o reconhecimento rápido e o texto
   confirma. Os dois herdam a cor do estado da aba (apagada, sobrevoada,
   ativa), então mudam juntos e nunca destoam um do outro. */
.aba {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  border: none;
  background: none;
  padding: var(--esp-2);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transicao);
}

/* O traço óptico do ícone é mais fino que o peso do texto em caixa alta ao
   lado; sem isso ele parece apagado mesmo tendo exatamente a mesma cor. */
.aba svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.aba:hover { color: var(--text); }

/* O traço fica no ::after e não na borda do botão para não empurrar o texto
   um pixel para cima quando a aba é ativada. */
.aba::after {
  content: "";
  position: absolute;
  left: var(--esp-1);
  right: var(--esp-1);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background var(--transicao);
}

.aba.ativa {
  color: var(--brand);
}

.aba.ativa svg { opacity: 1; }

.aba.ativa::after {
  background: var(--brand);
}

.aba-conteudo {
  padding: var(--esp-3) 0;
  min-height: 320px;
}

/* (Havia aqui um indicador de carregamento — anel girando e a palavra
   "Carregando" na ponta da barra de abas. Saiu junto com o spinner e a sua
   animação: a espera passou a ser dita só pelo cursor, com a tela travada por
   baixo, e nada mais aparece ou desaparece na interface a cada clique.) */

/* Estado vazio das abas: centralizado e discreto, nunca um erro. */
.vazio {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  text-align: center;
  color: var(--text-muted);
}

.vazio-icone {
  font-size: 30px;
  opacity: 0.55;
}

.vazio strong {
  color: var(--text);
  font-size: 14.5px;
  text-transform: uppercase;
}

/* ===========================================================================
   Aba — Linha do tempo
   =========================================================================== */

/* Invólucro da lista inteira, e é ele — não cada item — que se centraliza.
   `fit-content` encolhe o bloco até o item mais largo antes de centralizar: numa
   aba de textos longos (Andamentos) ele bate no teto de 800px e nada muda; numa
   de entradas curtas (Agenda) ele fica bem mais estreito, e é essa diferença que
   antes desequilibrava a tela. Com a largura fixa em 800px, as entradas curtas
   ocupavam só o começo do bloco e deixavam um vazio grande à direita — o bloco
   estava centralizado, mas o conteúdo dentro dele não.

   Centralizar o grupo, e não cada item, é o que mantém todas as entradas com a
   mesma borda esquerda: item a item, cada um se centraria pela própria largura
   e a lista viraria uma escada.

   Os 800px do teto saem de uma conta: a coluna da data (~63px), o trilho (22px)
   e os dois vãos (32px) somam ~117px, e o que sobra para o texto é justamente a
   largura de leitura de 680px definida lá em cima. */
.tl {
  width: fit-content;
  max-width: 800px;
  margin: 0 auto;
}

.tl-item {
  display: grid;
  grid-template-columns: max-content 22px 1fr;
  column-gap: var(--esp-2);
}

.tl-data {
  padding-top: 1px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* O trilho é desenhado no próprio elemento do marcador: a linha é o fundo da
   coluna e o ponto fica por cima, então nenhum pseudo-elemento precisa saber a
   altura do item — que varia com o tamanho da descrição. */
.tl-trilho {
  position: relative;
  display: flex;
  justify-content: center;
}

.tl-trilho::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.tl-item:last-child .tl-trilho::before { bottom: auto; height: 14px; }

.tl-ponto {
  position: relative;
  margin-top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--surface);
  box-sizing: content-box;
}

.tl-corpo {
  padding-bottom: var(--esp-3);
  min-width: 0;
}

.tl-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin-bottom: var(--esp-0);
}

.tl-titulo strong {
  font-size: 14.5px;
  font-weight: 600;
}

.tl-descricao {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* A atualização enviada ao cliente costuma vir em vários parágrafos curtos;
   sem respiro entre eles o texto vira um bloco só. */
.tl-descricao + .tl-descricao {
  margin-top: var(--esp-1);
}

.tl-autor {
  margin-top: var(--esp-1);
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Etiqueta de tipo. As cores dizem a natureza do evento sem depender de
   ícone, e são as mesmas do ponto no trilho. */
.chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px var(--esp-1);
  border-radius: 999px;
  background: var(--dropdown-hover-bg);
  color: var(--dropdown-hover-text);
}

.chip-reuniao, .tl-ponto-reuniao { background: var(--accent-soft); color: var(--accent); }
.tl-ponto-reuniao { background: var(--accent); }
.chip-documento { background: var(--brand-soft); color: var(--brand); }
.tl-ponto-documento { background: var(--navy-2); }
.chip-financeiro { background: var(--warning-soft); color: var(--warning); }
.tl-ponto-financeiro { background: var(--warning); }
.chip-contrato { background: var(--accent-soft); color: var(--accent); }
.tl-ponto-contrato { background: var(--accent); }

/* ===========================================================================
   Aba — Solicitações de pagamento
   =========================================================================== */

/* Linha do tempo menor, dentro da movimentação da solicitação. O traço à
   esquerda amarra os resultados ao pedido de onde saíram, sem transformar cada
   solicitação numa caixa fechada.

   Pontilhado e de um pixel de propósito: sólido como o trilho de fora, os dois
   traços competiam pela atenção e a leitura ficava pesada. Aqui o de dentro
   fica claramente subordinado ao de fora. */
.tl-mini {
  margin: var(--esp-1) 0 0;
  padding-left: var(--esp-2);
  border-left: 1px dotted var(--border-input);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.mini-item {
  position: relative;
}

/* O ponto fica por cima do traço da esquerda, na altura da data. O -22px sai
   da conta do recuo: 16px de espaçamento, 1px de traço e a metade do ponto. */
.mini-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warning);
  border: 2px solid var(--surface);
  box-sizing: content-box;
}

.mini-data {
  display: block;
  margin-bottom: var(--esp-0);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ===========================================================================
   Aba — Drive
   =========================================================================== */

/* Os mesmos 800px centralizados da linha do tempo: é o que faz a largura do
   painel não mudar ao passar de Andamentos para Drive. Duas abas irmãs com
   medidas diferentes dariam a impressão de que a página inteira pulou. */
/* A margem negativa no topo cancela o respiro interno do primeiro item: sem
   ela o nome do primeiro arquivo nasceria dezesseis pixels abaixo do primeiro
   título das outras abas, e o Drive pareceria começar mais fundo que as
   irmãs. Os itens seguem todos com o mesmo respiro por dentro. */
.arq-lista {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: calc(var(--esp-2) * -1) auto 0;
}

/* A linha entre um arquivo e outro, inclusive abaixo do último. Além de separar,
   ela resolve um efeito colateral do nome curto: sozinho no bloco, o texto
   terminava no meio e deixava a metade direita parecendo um vão aberto. A linha
   atravessa a largura toda e fecha a lista.

   A margem negativa faz a linha e o realce de fundo transbordarem o alinhamento
   do texto, para o nome do arquivo continuar começando na mesma vertical dos
   títulos das outras abas mesmo com o item tendo respiro interno próprio.

   Sem raio de canto: o arredondamento sobrava nas pontas da linha e a deixava
   com um repuxo nas extremidades, em vez do traço reto que separa a lista. */
.arq-item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-1);
  margin: 0 calc(var(--esp-1) * -1);
  border-bottom: 1px solid var(--border);
}

/* Linha sem ação nenhuma: o cliente vê que o documento existe, e nada mais.
   Sem cursor de mão e sem realce de passagem, para a lista não sugerir um
   clique que não vai acontecer. */
.arq-item-estatico {
  cursor: default;
}

/* Selo com a extensão em vez de ícone desenhado: identifica o tipo de longe,
   não depende de fonte de ícones e continua legível em qualquer tamanho. */
.arq-selo {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--text-muted);
}

.arq-selo-pdf { background: #c0392b; }

.arq-info {
  flex: 1;
  min-width: 0;
}

/* Nome de documento aqui passa de cem caracteres. Duas linhas no máximo:
   mantém a lista escaneável sem esconder o fim do nome numa reticência
   logo no meio. */
.arq-nome {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ===========================================================================
   Aba — Agenda
   =========================================================================== */

/* Os dois totalizadores abrem a aba: é o número que o cliente procura antes
   de olhar a lista. Mesma cara das fichas da faixa do contrato. */
/* Fica fixo junto do bloco do topo — só a lista de compromissos, abaixo,
   rola. --altura-area-fixa vem medida por JS (area.html), porque a altura
   do bloco fixo varia (nome de contrato longo, tela estreita etc.). */
/* Preso no topo desde o primeiro pixel de rolagem, e não depois de um trecho
   percorrido. A margem negativa é o que consegue isso: ela sobe a caixa até
   encostar na base do bloco fixo, que é exatamente a altura em que o `top`
   manda grudar — nascendo já na posição final, não sobra percurso para
   percorrer. O recuo interno devolve por dentro o respiro que a margem tirou
   por fora, e de quebra é ele que tapa a faixa por onde os compromissos
   passam por baixo: sem isso, apareceria conteúdo rolando no vão entre a barra
   de abas e os cartões.

   O que a margem cancela é o recuo que o conteúdo da aba herda de cima —
   --esp-4 do `main` mais --esp-3 do `.aba-conteudo`. Mudando um dos dois, este
   valor muda junto. */
.totais {
  position: sticky;
  top: var(--altura-area-fixa, 0px);
  z-index: 10;
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
  max-width: 800px;
  margin: calc(var(--esp-3) * -1) auto var(--esp-3);
  padding-top: var(--esp-3);
  padding-bottom: var(--esp-2);
}

.total {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--esp-2) var(--esp-3);
  text-align: center;
}

/* Puxador de recolher as horas. Só existe em tela estreita (ver o fim da
   folha): é lá que os dois totalizadores empilham e tomam metade da altura
   disponível para a lista de compromissos. Apagado como as setas das abas,
   pela mesma razão — é uma pista de manuseio, não um comando em destaque. */
.totais-chave {
  display: none;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  padding: var(--esp-0);
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--transicao), transform var(--transicao);
}

.totais-chave:hover { opacity: 1; }

/* O chevron aponta para onde o bloco vai, e não para o estado em que ele
   está: aberto, aponta para cima, porque clicar recolhe; recolhido, aponta
   para baixo, porque clicar traz as horas de volta. É o mesmo desenho girado,
   em vez de um segundo ícone para manter em dia. */
.totais-chave { transform: rotate(180deg); }

.totais.recolhido .totais-chave { transform: none; }

.totais.recolhido .total { display: none; }

.total-valor {
  margin: var(--esp-0) 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

/* O que ainda vai acontecer ganha a cor de destaque, para separar de relance
   do que já passou. */
.total-valor-futuro { color: var(--accent); }

/* Compromisso não tem parágrafos de texto como as movimentações, então o item
   fica mais baixo e a lista mais compacta. */
.tl-corpo-curto {
  padding-bottom: var(--esp-2);
}

.ag-horario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
  margin-top: var(--esp-0);
  font-size: 13px;
  color: var(--text-muted);
}

.ag-duracao {
  font-weight: 600;
  color: var(--accent);
}

/* ===========================================================================
   Telas estreitas
   =========================================================================== */

/* Um degrau abaixo na escala: onde a tela larga usa --esp-3 de respiro
   lateral, a estreita usa --esp-2. A proporção entre os blocos continua a
   mesma, só o conjunto encolhe. */
@media (max-width: 900px) {
  main { padding: var(--esp-3) var(--esp-2) var(--esp-5); }

  .area-fixa-conteudo { padding: 0 var(--esp-2); }

  .app-header-inner { padding: var(--esp-2); }

  .app-logo { height: 40px; }

  .app-logo-texto { height: 40px; font-size: 16px; }

  .pagina-titulo { font-size: 24px; }

  .contrato-faixa {
    grid-template-columns: 1fr;
  }

  .contrato-faixa-lateral {
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--esp-4);
  }

  .aba-conteudo { padding: var(--esp-3) 0; }
}

@media (max-width: 560px) {
  .app-usuario-nome { display: none; }

  .contratos-grade { grid-template-columns: 1fr; }

  /* Sem espaço para a coluna de data à esquerda: o trilho vem primeiro e a
     data passa a ser a primeira linha do próprio evento. */
  .tl-item {
    grid-template-columns: 22px 1fr;
    max-width: none;
  }

  .tl-data {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    margin-bottom: var(--esp-0);
  }

  .tl-trilho { grid-row: 1 / span 2; }

  .tl-corpo { grid-column: 2; }

  .codigo-digito { width: 40px; height: 50px; font-size: 20px; }

  .acesso-card { padding: var(--esp-4) var(--esp-3); }

  /* Dois totalizadores lado a lado não cabem em 375px sem apertar o número. */
  .totais { grid-template-columns: 1fr; gap: var(--esp-1); }

  /* Empilhados, os dois totalizadores tomam boa parte da altura útil e a lista
     de compromissos fica espremida embaixo — é só aqui que o puxador de
     recolher aparece, e é só aqui que ele faz falta. */
  .totais-chave { display: flex; }

  /* Selo menor: em 375px o nome do documento precisa de toda a largura. */
  .arq-selo { width: 32px; height: 32px; }
}