/* =========================================================
   Portal da Vara — JRS Perícia Judicial
   Estrutura: faixas de largura total empilhadas.
   Identidade herdada de institucional.jrspericia.cloud:
   Lora + Inter, azul de ação, ouro JRS, tinta.

   A camada de cor é semântica (--sup-*, --txt-*, --fio*).
   Nenhuma regra abaixo dos tokens escreve cor literal; por
   isso o tema escuro cabe num único bloco de redefinição.
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens — tema claro
   --------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Superfícies claras */
  --sup-0: #ffffff;
  --sup-1: #f4f4f1;
  --sup-2: #e9e8e3;
  --sup-3: rgba(20, 34, 46, 0.05);
  --sup-4: rgba(20, 34, 46, 0.085);

  /* Faixas escuras — vivem em ambos os temas */
  --banda: #151d27;
  --banda-2: #1c2734;
  --banda-txt: #ffffff;
  --banda-txt-2: rgba(255, 255, 255, 0.68);
  --banda-txt-3: rgba(255, 255, 255, 0.5);
  --banda-fio: rgba(255, 255, 255, 0.14);
  --banda-fio-2: rgba(255, 255, 255, 0.28);
  --banda-vel: rgba(255, 255, 255, 0.06);
  --banda-vel-2: rgba(255, 255, 255, 0.11);

  /* Tinta */
  --txt-1: #121d27;
  --txt-2: #46515c;
  --txt-3: #5e6873;

  /* Fios */
  --fio: rgba(20, 34, 46, 0.11);
  --fio-2: rgba(20, 34, 46, 0.19);

  /* Ação */
  --azul: #1c5cb8;
  --azul-txt: #1a55a8;
  --azul-sol: #1c5cb8;
  --azul-sol-h: #174d9c;
  --azul-sol-a: #123f83;
  --azul-sol-txt: #ffffff;
  --azul-vel: rgba(28, 92, 184, 0.085);
  --azul-vel-2: rgba(28, 92, 184, 0.17);

  /* Ouro JRS — acento escasso: marca, etapa atual, chave do gráfico */
  --ouro: #cb9935;
  --ouro-txt: #7a5d1d;
  /* Ouro de preenchimento: o da marca dá 2,51:1 contra o papel e uma forma
     cheia precisa de 3:1. Um passo mais fundo passa e continua ouro —
     validado com o azul: ΔE 27,5 sob protanopia. */
  --ouro-barra: #a97f24;
  --ouro-vel: rgba(203, 153, 53, 0.16);

  /* Estado */
  --alerta: #a33a2a;
  --alerta-txt: #9a3527;
  --alerta-vel: rgba(163, 58, 42, 0.1);
  --ok: #1f6b4f;
  --ok-txt: #1b6047;
  --ok-vel: rgba(31, 107, 79, 0.11);

  --foco: #1c5cb8;
  --foco-vel: rgba(28, 92, 184, 0.24);

  /* Profundidade — sempre duas camadas: contato + difusa com deslocamento */
  --elev-1: 0 1px 2px rgba(16, 27, 37, 0.06), 0 1px 1px rgba(16, 27, 37, 0.04);
  --elev-2: 0 1px 2px rgba(16, 27, 37, 0.05), 0 6px 16px -8px rgba(16, 27, 37, 0.22);
  --elev-3: 0 2px 4px rgba(16, 27, 37, 0.06), 0 18px 40px -18px rgba(16, 27, 37, 0.32);
  --elev-4: 0 4px 10px rgba(8, 17, 24, 0.1), 0 34px 68px -26px rgba(8, 17, 24, 0.44);

  /* Forma */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;

  /* Medidas */
  --larg: 1280px;
  --gutter: clamp(18px, 4vw, 44px);
  --topo-alt: 62px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------
   2. Tokens — tema escuro
   Dois seletores, mesmos valores: a escolha explícita do
   usuário (data-tema) e o padrão do sistema.
   --------------------------------------------------------- */

:root[data-tema="escuro"] {
  color-scheme: dark;

  --sup-0: #161d25;
  --sup-1: #0f151b;
  --sup-2: #1e262f;
  --sup-3: rgba(255, 255, 255, 0.05);
  --sup-4: rgba(255, 255, 255, 0.09);

  --banda: #0a0e13;
  --banda-2: #141c25;

  --txt-1: #e9eef3;
  --txt-2: #a7b3bf;
  --txt-3: #8b98a5;

  --fio: rgba(255, 255, 255, 0.1);
  --fio-2: rgba(255, 255, 255, 0.18);

  --azul: #5b9bf0;
  --azul-txt: #7cb0f4;
  --azul-sol: #2a68c6;
  --azul-sol-h: #3376d6;
  --azul-sol-a: #2359ac;
  --azul-vel: rgba(91, 155, 240, 0.13);
  --azul-vel-2: rgba(91, 155, 240, 0.24);

  --ouro: #dfb055;
  --ouro-txt: #e6bd6d;
  --ouro-barra: #dfb055;
  --ouro-vel: rgba(223, 176, 85, 0.16);

  --alerta: #e07a63;
  --alerta-txt: #ea8d77;
  --alerta-vel: rgba(224, 122, 99, 0.15);
  --ok: #4fae87;
  --ok-txt: #5cbd95;
  --ok-vel: rgba(79, 174, 135, 0.15);

  --foco: #7fb3f5;
  --foco-vel: rgba(127, 179, 245, 0.28);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.42);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.36), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  --elev-3: 0 2px 4px rgba(0, 0, 0, 0.36), 0 18px 40px -18px rgba(0, 0, 0, 0.72);
  --elev-4: 0 4px 10px rgba(0, 0, 0, 0.44), 0 34px 68px -26px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --sup-0: #161d25;
    --sup-1: #0f151b;
    --sup-2: #1e262f;
    --sup-3: rgba(255, 255, 255, 0.05);
    --sup-4: rgba(255, 255, 255, 0.09);

    --banda: #0a0e13;
    --banda-2: #141c25;

    --txt-1: #e9eef3;
    --txt-2: #a7b3bf;
    --txt-3: #8b98a5;

    --fio: rgba(255, 255, 255, 0.1);
    --fio-2: rgba(255, 255, 255, 0.18);

    --azul: #5b9bf0;
    --azul-txt: #7cb0f4;
    --azul-sol: #2a68c6;
    --azul-sol-h: #3376d6;
    --azul-sol-a: #2359ac;
    --azul-vel: rgba(91, 155, 240, 0.13);
    --azul-vel-2: rgba(91, 155, 240, 0.24);

    --ouro: #dfb055;
    --ouro-txt: #e6bd6d;
    --ouro-barra: #dfb055;
    --ouro-vel: rgba(223, 176, 85, 0.16);

    --alerta: #e07a63;
    --alerta-txt: #ea8d77;
    --alerta-vel: rgba(224, 122, 99, 0.15);
    --ok: #4fae87;
    --ok-txt: #5cbd95;
    --ok-vel: rgba(79, 174, 135, 0.15);

    --foco: #7fb3f5;
    --foco-vel: rgba(127, 179, 245, 0.28);

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.42);
    --elev-2: 0 1px 2px rgba(0, 0, 0, 0.36), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
    --elev-3: 0 2px 4px rgba(0, 0, 0, 0.36), 0 18px 40px -18px rgba(0, 0, 0, 0.72);
    --elev-4: 0 4px 10px rgba(0, 0, 0, 0.44), 0 34px 68px -26px rgba(0, 0, 0, 0.8);
  }
}

/* ---------------------------------------------------------
   3. Base
   --------------------------------------------------------- */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-alt) + 16px);
  /* Barreira contra rolagem horizontal: a gaveta do processo e o painel de
     trocar de vara ficam fora da tela com `transform`, não com `display`, e em
     Safari/Chrome no celular esse espaço "fora da tela" ainda conta como área
     de rolagem — dá para arrastar a página inteira para o lado e ver um vão em
     branco. `overflow-x: hidden` no html corta essa área sem tocar na rolagem
     vertical nem nos containers com rolagem própria (`.tabela-rolo` etc.), que
     continuam rolando dentro de si. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--sup-1);
  color: var(--txt-2);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.58;
  font-feature-settings: "cv05" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Sem "voltar" com o dedo para o vão à direita/esquerda da página: só a
     rolagem vertical do próprio corpo faz elástico. */
  overscroll-behavior-x: none;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--txt-1);
  font-family: Lora, Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(31px, 3.5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

h2 {
  font-size: 23px;
}

p {
  margin: 0;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

a {
  color: var(--azul-txt);
}

/* Todo número comparável em tabular, sempre. */
.num,
.tabular,
.trilho-n,
.relogio,
.item-seco-num,
.mov-num,
.mov-data,
.proc-btn,
.prazo,
.evento-data,
.msg-meta,
.g-eixo,
.col-num,
.col-data,
.col-prazo {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   4. Superfícies do navegador
   --------------------------------------------------------- */

::selection {
  background: var(--azul-vel-2);
  color: var(--txt-1);
}

input {
  caret-color: var(--azul);
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Anel de foco reforçado onde o offset sozinho sumiria no fundo. */
.btn:focus-visible,
.mov:focus-visible,
.item-seco:focus-visible {
  box-shadow: 0 0 0 4px var(--foco-vel);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--fio-2) transparent;
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--fio-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--txt-3);
  background-clip: content-box;
}

/* ---------------------------------------------------------
   5. Utilidades
   --------------------------------------------------------- */

.sprite {
  position: absolute;
}

.ic {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic-g {
  width: 28px;
  height: 28px;
  stroke-width: 1.2;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dentro {
  max-width: var(--larg);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.pular {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  transform: translateY(-180%);
  background: var(--banda);
  color: var(--banda-txt);
  padding: 11px 18px;
  border-radius: var(--r-2);
  box-shadow: var(--elev-3);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s var(--ease-saida);
}

.pular:focus-visible {
  transform: translateY(0);
}

/* ---------------------------------------------------------
   6. Botões
   --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease),
    box-shadow 0.16s var(--ease), transform 0.12s var(--ease);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.btn-azul {
  background: var(--azul-sol);
  color: var(--azul-sol-txt);
  font-weight: 600;
  box-shadow: var(--elev-1);
}

.btn-azul:hover:not(:disabled) {
  background: var(--azul-sol-h);
  box-shadow: var(--elev-2);
}

.btn-azul:active:not(:disabled) {
  background: var(--azul-sol-a);
  box-shadow: none;
}

/* Contorno sobre superfície clara */
.btn-fio-tinta {
  border-color: var(--fio-2);
  color: var(--txt-1);
  background: var(--sup-0);
}

.btn-fio-tinta:hover:not(:disabled) {
  border-color: var(--azul);
  color: var(--azul-txt);
  box-shadow: var(--elev-1);
}

/* Contorno sobre faixa escura */
.btn-fio-claro {
  border-color: var(--banda-fio);
  color: var(--banda-txt-2);
}

.btn-fio-claro:hover:not(:disabled) {
  border-color: var(--banda-fio-2);
  background: var(--banda-vel);
  color: var(--banda-txt);
}

/* Contorno neutro, segue o tema (usado no cabeçalho) */
.btn-fio {
  border-color: var(--fio-2);
  color: var(--txt-2);
}

.btn-fio:hover:not(:disabled) {
  border-color: var(--fio-2);
  background: var(--sup-3);
  color: var(--txt-1);
}

.btn-icone {
  width: 38px;
  padding: 0;
}

/* ---------------------------------------------------------
   7. Cabeçalho
   Uma barra só. O contato que vivia numa segunda barra está
   no rodapé; o relógio virou indicador de atendimento no
   painel de mensagens, onde a informação decide algo.
   --------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--sup-0) 84%, transparent);
  backdrop-filter: saturate(1.7) blur(14px);
  -webkit-backdrop-filter: saturate(1.7) blur(14px);
  border-bottom: 1px solid var(--fio);
  transition: box-shadow 0.22s var(--ease), background 0.22s var(--ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo {
    background: var(--sup-0);
  }
}

.topo.rolou {
  box-shadow: var(--elev-2);
  background: color-mix(in srgb, var(--sup-0) 93%, transparent);
}

.topo-in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--topo-alt);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  text-decoration: none;
  color: var(--txt-1);
  border-radius: var(--r-2);
}

.marca-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.24;
}

.marca-txt strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.marca-txt small {
  color: var(--txt-3);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}

.nav a:hover {
  background: var(--sup-3);
  color: var(--txt-1);
}

.nav a[aria-current="page"] {
  color: var(--txt-1);
  background: var(--sup-3);
}

/* O sublinhado ancora no fio do cabeçalho, não no botão. */
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: calc((var(--topo-alt) - 32px) / -2 - 1px);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--azul);
}

.topo-fim {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.vara-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--fio);
  border-radius: var(--r-pill);
  background: var(--sup-3);
  color: var(--txt-1);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.vara-selo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

/* Nome de vara é longo e varia muito ("12ª Vara do Trabalho do Recife-PE"). Quando
   o cabeçalho aperta, ele corta com reticências em vez de empurrar os botões. */
.vara-selo span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alternador de tema */
.btn-tema {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fio-2);
  border-radius: var(--r-2);
  color: var(--txt-2);
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.btn-tema:hover {
  background: var(--sup-3);
  color: var(--txt-1);
}

.btn-tema .ic {
  grid-area: 1 / 1;
  transition: opacity 0.22s var(--ease), transform 0.34s var(--ease-saida);
}

.btn-tema .ic-lua {
  opacity: 0;
  transform: rotate(-55deg) scale(0.6);
}

:root[data-tema="escuro"] .btn-tema .ic-sol {
  opacity: 0;
  transform: rotate(55deg) scale(0.6);
}

:root[data-tema="escuro"] .btn-tema .ic-lua {
  opacity: 1;
  transform: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn-tema .ic-sol {
    opacity: 0;
    transform: rotate(55deg) scale(0.6);
  }

  :root:not([data-tema="claro"]) .btn-tema .ic-lua {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   8. Faixa de destaque
   --------------------------------------------------------- */

.destaque {
  /* Foto da cidade da vara logada. O app.js troca --foto-cidade quando o arquivo
     de VARA.foto carrega; sem ele, fica o desenho genérico de img/_placeholder.svg. */
  --foto-cidade: url("img/_placeholder.svg");
  /* O desenho genérico entra discreto; o app.js sobe a força quando a foto real da
     cidade carrega, porque só ela aguenta ser protagonista da faixa. */
  --foto-forca: 0.16;
  --foto-corte: 50% 38%;

  position: relative;
  isolation: isolate;
  background: var(--sup-1);
  color: var(--txt-2);
  border-top: 2px solid var(--ouro);
  border-bottom: 1px solid var(--fio);
}

/* Foto: preto e branco, esmaecida, e recuada à esquerda para não disputar com o título. */
.destaque::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--foto-cidade);
  background-position: var(--foto-corte);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--foto-forca);
  filter: grayscale(1) contrast(1.34) brightness(0.92);
  -webkit-mask-image: linear-gradient(96deg, transparent 4%, rgba(0, 0, 0, 0.45) 34%, #000 78%);
  mask-image: linear-gradient(96deg, transparent 4%, rgba(0, 0, 0, 0.45) 34%, #000 78%);
  pointer-events: none;
}

.destaque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Véu do lado do texto: a foto pode ser clara ou escura, o título não pode sumir. */
  background: linear-gradient(100deg, var(--sup-1) 16%, rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
}

@media (forced-colors: active) {
  .destaque::after {
    display: none;
  }
}

.destaque-in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* Respiro pela metade: eram 125px de vazio acima do chip e 95px entre a
     bandeira e a faixa de números — espaço que não dizia nada e empurrava a
     primeira lista para fora da tela. A altura mínima cai junto, senão o
     conteúdo continua centrado na mesma caixa e o vazio volta. */
  min-height: 516px;
  padding-top: 60px;
  /* Espaço embaixo para a faixa de números subir por cima do fim da foto. */
  padding-bottom: 114px;
}

.destaque h1 {
  color: var(--txt-1);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
  /* O nome da vara vem por extenso e é longo: o título ocupa a largura da faixa
     em vez de espremer em quatro linhas curtas. */
  max-width: min(100%, 1040px);
  text-wrap: normal;
}

/* Duas linhas fixas: abertura em cima, nome da vara inteiro embaixo. */
.titulo-abre,
.titulo-vara {
  display: block;
}

.titulo-abre {
  color: var(--txt-2);
  font-size: 0.62em;
  letter-spacing: 0;
  margin-bottom: 2px;
}

.destaque-sub {
  max-width: 64ch;
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.75;
}

.destaque-sub time {
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
}

/* --- O agradecimento como composição ---
   Quem abre o portal todo dia não relê este parágrafo; passa o olho por ele.
   Por isso ele é composto e não escrito: as palavras que importam crescem e
   assumem a serifa do título, o ligamento entre elas recua. Continua sendo a
   mesma frase, na mesma ordem, e quem quiser lê inteira — quem só olhar leva
   "parceria", o tempo de casa e "confiança". */
.saudacao-nuvem {
  max-width: 620px;
  font-size: 13px;
  /* O entrelinha é o do texto miúdo, não o da palavra grande: as linhas de
     ligamento fecham, e só as que carregam um destaque abrem o tanto que ele
     precisa. É o que dá o ritmo irregular da composição. */
  line-height: 1.85;
  color: var(--txt-2);
  text-wrap: pretty;
}

.saudacao-nuvem b {
  font-family: Lora, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  /* A caixa da palavra grande acompanha o desenho dela, sem folga extra: o ar
     que a linha ganha é o da própria letra. */
  line-height: 1;
  animation: nuvemSurge 0.5s var(--ease-saida) both;
  animation-delay: calc(var(--k, 0) * 70ms);
}

/* Três degraus, não um destaque só: o que a vara leva de relance, o que
   sustenta a frase e o que apenas pesa um pouco mais que o corpo. */
.saudacao-nuvem .n1 {
  font-size: 29px;
  color: var(--txt-1);
}

.saudacao-nuvem .n2 {
  font-size: 20px;
  color: var(--ouro-txt);
}

.saudacao-nuvem .n3 {
  font-size: 15px;
  color: var(--txt-1);
}

@keyframes nuvemSurge {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 720px) {
  .saudacao-nuvem .n1 {
    font-size: 23px;
  }

  .saudacao-nuvem .n2 {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saudacao-nuvem b {
    animation: none;
  }
}

.destaque-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* Trilho de números: painel de instrumentos, separado por fios, sem caixa. */
.trilho {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--banda-fio);
  border: 1px solid var(--banda-fio);
  border-radius: var(--r-3);
  overflow: hidden;
}

.trilho-item {
  padding: 22px 24px 20px;
  background: rgba(255, 255, 255, 0.035);
  /* Momento autoral: os quatro números sobem uma vez, escalonados. */
  animation: subir 0.62s var(--ease-saida) both;
}

.trilho-item:nth-child(2) {
  animation-delay: 0.07s;
}

.trilho-item:nth-child(3) {
  animation-delay: 0.14s;
}

.trilho-item:nth-child(4) {
  animation-delay: 0.21s;
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.trilho-n {
  display: block;
  color: var(--banda-txt);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.trilho-n small {
  font-size: 0.4em;
  font-weight: 500;
  color: var(--banda-txt-3);
  letter-spacing: 0;
  margin-left: 5px;
}

.trilho-r {
  display: block;
  margin-top: 9px;
  color: var(--banda-txt-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   9. Faixas de conteúdo
   Ritmo: chão → superfície → chão. O bege alternado saiu;
   quem carrega a hierarquia agora é o painel, não o fundo.
   --------------------------------------------------------- */

.faixa {
  padding: 62px 0;
}

/* Duas faixas seguidas somavam 124px de vazio — o buraco entre as movimentações
   e o contato. O respiro de 62px vale para a faixa isolada; no encontro, metade. */
.faixa + .faixa {
  padding-top: 30px;
}

.faixa-sup {
  background: var(--sup-0);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
  padding: 52px 0;
}

.faixa-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.faixa-nota,
.painel-nota,
.bloco-sub {
  color: var(--txt-3);
  font-size: 13px;
}

/* ---------------------------------------------------------
   10. Faixa de atenção
   --------------------------------------------------------- */

.duas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}

.bloco-atencao + .bloco-atencao {
  padding-left: 44px;
  border-left: 1px solid var(--fio);
}

.bloco-sub {
  margin-top: 7px;
  max-width: 46ch;
}

.lista-seca {
  margin-top: 18px;
  border-top: 1px solid var(--fio);
}

.item-seco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  width: calc(100% + 20px);
  padding: 13px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid var(--fio);
  border-radius: var(--r-1);
  text-align: left;
  transition: background 0.16s var(--ease);
}

.item-seco:hover {
  background: var(--sup-3);
}

.item-seco-num {
  grid-column: 1;
  color: var(--txt-1);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.item-seco-sub {
  grid-column: 1;
  color: var(--txt-3);
  font-size: 12.5px;
}

/* Variante dos últimos processos: à direita, etapa em cima e data de nomeação
   embaixo, alinhadas pela borda — as datas ficam numa coluna só e dá para
   comparar a olho qual entrou antes. */
.item-seco-largo {
  padding-block: 15px;
}

.item-seco-largo .item-seco-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-seco-lado {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.item-seco-data {
  color: var(--txt-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A lista é cortada; esta linha diz quantos ficaram de fora e para onde ir. */
.lista-resto {
  margin-top: 12px;
}

.lista-resto[hidden] {
  display: none;
}

.item-seco .selo {
  grid-row: span 2;
}

.lista-vazia {
  padding: 18px 0;
  color: var(--txt-3);
  font-size: 13px;
  border-bottom: 1px solid var(--fio);
}

/* ---------------------------------------------------------
   11. Movimentações
   --------------------------------------------------------- */

/* Duas fileiras de quatro. A cor do cartão diz em que pé está o laudo: azul
   em elaboração, âmbar em esclarecimentos, neutro quando já está com a vara. */
.grade-mov {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mov {
  --tom: var(--ok);
  --tom-fundo: var(--sup-0);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 16px 14px;
  overflow: hidden;
  text-align: left;
  background: var(--tom-fundo);
  border: 1px solid var(--fio);
  border-radius: var(--r-3);
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition:
    transform 0.22s var(--ease-saida),
    box-shadow 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

/* Faixa de cor no alto: fina parada, engrossa quando o cartão é apontado. */
.mov::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--tom);
  transform-origin: top;
  transition: transform 0.22s var(--ease-saida);
}

.mov:hover {
  border-color: color-mix(in srgb, var(--tom) 35%, var(--fio));
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
}

.mov:hover::before {
  transform: scaleY(1.7);
}

.mov:active {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}

.mov-elaboracao {
  --tom: var(--azul);
  --tom-fundo: color-mix(in srgb, var(--azul) 5%, var(--sup-0));
}

.mov-esclarecimento {
  --tom: var(--ouro);
  --tom-fundo: color-mix(in srgb, var(--ouro) 8%, var(--sup-0));
}

.mov-entregue {
  --tom: color-mix(in srgb, var(--ok) 70%, var(--sup-0));
}

/* Perícia recusada ou cancelada: cinza, sem laudo nenhum. */
.mov-encerrado {
  --tom: var(--txt-3);
}

.mov-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mov-data {
  color: var(--txt-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* O estado do laudo, em etiqueta pequena na cor do cartão. */
.mov-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tom) 13%, transparent);
  color: color-mix(in srgb, var(--tom) 72%, var(--txt-1));
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.mov-estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tom);
}

.mov-num {
  margin-top: 6px;
  overflow: hidden;
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mov-tit {
  display: block;
  color: var(--txt-1);
  font-family: Lora, Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mov-pe {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--tom) 18%, var(--fio));
}

.mov-ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--azul-txt);
  font-size: 12px;
  font-weight: 600;
}

.mov-ver .ic {
  width: 14px;
  height: 14px;
  transition: transform 0.22s var(--ease-saida);
}

.mov:hover .mov-ver .ic {
  transform: translateX(4px);
}

#movimentacoes .faixa-cabeca {
  align-items: flex-end;
}

#movimentacoes .faixa-nota {
  margin-top: 6px;
}

/* Legenda das cores, no canto do cabeçalho da faixa. */
.mov-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--txt-2);
}

.mov-legenda li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.mov-legenda li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.mov-legenda-elaboracao::before {
  background: var(--azul);
}

.mov-legenda-esclarecimento::before {
  background: var(--ouro);
}

.mov-legenda-entregue::before {
  background: color-mix(in srgb, var(--ok) 70%, var(--sup-0));
}

.mov-legenda-encerrado::before {
  background: var(--txt-3);
}

@media (prefers-reduced-motion: reduce) {
  .mov,
  .mov::before,
  .mov-ver .ic {
    transition: none;
  }

  .mov:hover,
  .mov:active {
    transform: none;
  }
}

/* ---------------------------------------------------------
   12. Painéis
   --------------------------------------------------------- */

.painel {
  min-width: 0;
  background: var(--sup-0);
  border: 1px solid var(--fio);
  border-radius: var(--r-3);
  box-shadow: var(--elev-2);
  overflow: hidden;
}

.painel-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--fio);
}

.painel-cabeca.coluna {
  align-items: center;
}

.painel-nota {
  margin-top: 6px;
}

.painel-dica {
  color: var(--txt-3);
  font-size: 12.5px;
}

/* ---------------------------------------------------------
   13. Tabela
   --------------------------------------------------------- */

.tabela-rolo {
  overflow-x: auto;
}

.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}

.tabela th,
.tabela td {
  text-align: left;
  padding: 0 20px;
  border-bottom: 1px solid var(--fio);
}

/* Sem `position: sticky` aqui: o cabeçalho vive dentro de `.tabela-rolo`
   (overflow-x) dentro de `.painel` (overflow hidden), e nesse aninhamento
   ele gruda no container errado e a primeira linha passa por cima. */
.tabela thead th {
  height: 40px;
  background: var(--sup-2);
  color: var(--txt-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ord {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 4px 0;
  border-radius: var(--r-1);
  transition: color 0.16s var(--ease);
}

.ord:hover {
  color: var(--txt-1);
}

.ord::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
  transition: opacity 0.16s var(--ease), transform 0.2s var(--ease);
}

.ord:hover::after {
  opacity: 0.38;
}

th[aria-sort] .ord {
  color: var(--azul-txt);
}

th[aria-sort] .ord::after {
  opacity: 1;
}

th[aria-sort="descending"] .ord::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.tabela tbody tr {
  cursor: pointer;
  transition: background 0.14s var(--ease);
}

.tabela tbody tr:hover {
  background: var(--sup-3);
}

.tabela tbody tr.ativa {
  background: var(--azul-vel);
  box-shadow: inset 2px 0 0 var(--azul);
}

.tabela td {
  height: 60px;
  font-size: 13.5px;
  color: var(--txt-2);
}

.proc-btn {
  color: var(--txt-1);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  text-align: left;
  padding: 2px 0;
  border-radius: var(--r-1);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 0.16s var(--ease), text-decoration-color 0.16s var(--ease);
}

tr:hover .proc-btn,
.proc-btn:hover {
  color: var(--azul-txt);
  text-decoration-color: currentColor;
}

.proc-partes {
  display: block;
  margin-top: 2px;
  color: var(--txt-3);
  font-size: 12px;
}

.tabela td.col-num,
.tabela td.col-prazo,
.tabela th.col-num,
.tabela th.col-prazo {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cadastro e entrega: datas curtas, uma coluna estreita cada, alinhadas pela
   direita como todo número desta tabela. A data ausente é um travessão. */
.tabela td.col-data,
.tabela th.col-data {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabela td.col-data {
  color: var(--txt-2);
}

.tabela th.col-data .ord {
  flex-direction: row-reverse;
}

.tabela th.col-num .ord,
.tabela th.col-prazo .ord {
  flex-direction: row-reverse;
}

/* ---------------------------------------------------------
   14. Etiquetas e selos
   --------------------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--txt-1);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.etiqueta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marca-etapa, var(--azul));
  flex: none;
}

.prazo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.prazo-dia {
  color: var(--txt-2);
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.selo::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.selo-atencao {
  background: var(--ouro-vel);
  color: var(--ouro-txt);
}

.selo-vencido {
  background: var(--alerta-vel);
  color: var(--alerta-txt);
}

.selo-ok {
  background: var(--ok-vel);
  color: var(--ok-txt);
}

/* ---------------------------------------------------------
   15. Carregando e vazio
   --------------------------------------------------------- */

.esqueleto {
  cursor: default !important;
}

.esqueleto:hover {
  background: transparent !important;
}

.esqueleto td {
  height: 60px;
}

.esqueleto span {
  display: block;
  height: 11px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--sup-2) 25%, var(--sup-4) 50%, var(--sup-2) 75%);
  background-size: 300% 100%;
  animation: brilho 1.5s linear infinite;
}

.esqueleto:nth-child(2n) span {
  max-width: 78%;
}

.esqueleto:nth-child(3n) span {
  max-width: 56%;
}

@keyframes brilho {
  to {
    background-position: -300% 0;
  }
}

.vazio {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 60px 24px 66px;
  text-align: center;
  color: var(--txt-3);
}

.vazio .ic-g {
  color: var(--fio-2);
}

.vazio-t {
  color: var(--txt-1);
  font-family: Lora, Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.vazio-s {
  font-size: 13.5px;
  max-width: 42ch;
}

.vazio .btn {
  margin-top: 14px;
}

/* ---------------------------------------------------------
   16. Gráfico
   --------------------------------------------------------- */

.duas-analise {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  gap: 20px;
  align-items: start;
}

.legenda {
  display: flex;
  gap: 16px;
  color: var(--txt-3);
  font-size: 12px;
  font-weight: 500;
}

.legenda li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chave {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.chave-azul {
  background: var(--azul);
}

.chave-ouro {
  background: var(--ouro);
}

.grafico {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  height: 214px;
  margin: 30px 24px 0;
  padding-bottom: 28px;
  padding-left: 28px;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    var(--fio) calc(25% - 1px),
    var(--fio) 25%
  );
  background-position: 0 -28px;
  background-size: 100% calc(100% - 28px);
  background-repeat: no-repeat;
}

.g-eixo {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  color: var(--txt-3);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.g-eixo-max {
  top: 0;
}

.g-eixo-meio {
  top: calc(50% - 14px);
}

.g-eixo-zero {
  top: calc(100% - 28px);
}

.g-mes {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 100%;
  border-radius: var(--r-1) var(--r-1) 0 0;
  transition: background 0.16s var(--ease);
}

.g-mes:hover {
  background: var(--sup-3);
}

.g-barra {
  width: 11px;
  border-radius: 3px 3px 0 0;
  transition: filter 0.16s var(--ease);
}

.g-entradas {
  background: var(--azul);
}

.g-laudos {
  background: var(--ouro);
}

.g-mes:hover .g-barra {
  filter: brightness(1.14);
}

.g-rot {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--txt-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.g-dica {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 5px);
  padding: 9px 12px;
  background: var(--banda);
  color: #fff;
  border-radius: var(--r-2);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--elev-3);
  transition: opacity 0.16s var(--ease), transform 0.22s var(--ease-saida);
}

.g-dica::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--banda);
}

.g-mes:hover .g-dica {
  opacity: 1;
  transform: translate(-50%, 0);
}

.g-dica b {
  font-weight: 600;
}

/* ---------------------------------------------------------
   17. Conversa com o perito
   --------------------------------------------------------- */

.painel-chat {
  display: flex;
  flex-direction: column;
  min-height: 384px;
}

.painel-chat .painel-cabeca {
  align-items: center;
}

/* Indicador de atendimento: o relógio ao vivo fica aqui, onde
   saber se o perito está no horário muda o que você faz. */
.disponivel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--fio);
  border-radius: var(--r-pill);
  background: var(--sup-3);
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ponto-on {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--txt-3);
  box-shadow: 0 0 0 3px var(--sup-4);
  flex: none;
}

.disponivel-aberto .ponto-on {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-vel);
}

.conversa {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  overflow-y: auto;
  max-height: 322px;
  overscroll-behavior: contain;
}

.msg {
  max-width: 88%;
  padding: 12px 15px;
  border: 1px solid var(--fio);
  border-radius: var(--r-3);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--txt-1);
}

.msg-perito {
  align-self: flex-start;
  background: var(--sup-1);
  border-bottom-left-radius: var(--r-1);
}

.msg-vara {
  align-self: flex-end;
  background: var(--azul-vel);
  border-color: var(--azul-vel-2);
  border-bottom-right-radius: var(--r-1);
}

.msg-meta {
  display: block;
  margin-top: 7px;
  color: var(--txt-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.conversa-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--fio);
}

.conversa-form input {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--fio-2);
  border-radius: var(--r-2);
  background: var(--sup-0);
  color: var(--txt-1);
  font-size: 13.5px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.conversa-form input::placeholder {
  color: var(--txt-3);
}

.conversa-form input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--foco-vel);
}

/* ---------------------------------------------------------
   18. Rodapé
   --------------------------------------------------------- */

.rodape {
  background: var(--banda);
  color: var(--banda-txt-2);
  font-size: 13px;
}

.rodape-in {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 38px;
  padding-top: 56px;
  padding-bottom: 46px;
}

.rodape h2 {
  color: var(--banda-txt);
  font-size: 16px;
  margin-bottom: 15px;
}

.rodape-col p {
  line-height: 1.68;
  max-width: 44ch;
}

.rodape-lista li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
}

.rodape-lista .ic {
  color: var(--ouro);
  width: 16px;
  height: 16px;
}

.rodape-links a {
  color: var(--banda-txt-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.rodape-links a:hover {
  color: var(--banda-txt);
  border-bottom-color: var(--ouro);
}

.rodape-vara {
  color: var(--banda-txt);
  font-weight: 500;
}

.rodape-nota {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--banda-txt-3);
}

.rodape-pe {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--banda-txt-3);
  font-size: 12.5px;
}

/* ---------------------------------------------------------
   19. Gaveta e linha do tempo
   --------------------------------------------------------- */

.fundo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 14, 20, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}

.fundo.aberta {
  opacity: 1;
}

.gaveta {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: min(520px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sup-0);
  /* Sem borda à esquerda: sobre o véu escuro aquele fio de 1px lia como uma
     linha branca colada na gaveta — e, no zoom do navegador, virava uma faixa.
     Quem separa a gaveta da página é a sombra.
     Sem canto arredondado: ela encosta no alto e no pé da janela, e um raio ali
     só cria duas falhas de borda contra a beirada da tela. */
  box-shadow: var(--elev-4);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease-saida);
}

.gaveta.aberta {
  transform: translateX(0);
}

.gaveta-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 22px;
  background: var(--banda-2);
  color: var(--banda-txt);
  border-top: 2px solid var(--ouro);
  /* Sem raio: a gaveta é quadrada (ver .gaveta), e o canto arredondado só aqui
     descobria o branco do painel atrás — a quina clara no alto à esquerda. */
}

.gaveta-topo h2 {
  color: var(--banda-txt);
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* Nosso número e o subtítulo na mesma linha, abaixo do número do CNJ. */
.gaveta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 10px 0 0;
}

.gaveta-sub {
  color: var(--banda-txt-3);
  font-size: 12.5px;
}

.gaveta-corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--fio);
}

.ficha > div {
  min-width: 0;
  padding: 16px 24px 17px;
  border-bottom: 1px solid var(--fio);
}

.ficha > div:nth-child(odd):not(.ficha-larga) {
  border-right: 1px solid var(--fio);
}

.ficha > div:last-child {
  border-bottom: 0;
}

.ficha-larga {
  grid-column: 1 / -1;
}

.ficha dt {
  color: var(--txt-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ficha dd {
  margin: 7px 0 0;
  color: var(--txt-1);
  font-size: 14px;
  line-height: 1.45;
}

.ficha-objeto {
  color: var(--txt-2);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Setor: ponto de cor + nome; o tempo na bancada vem ao lado, mais apagado. */
.ficha-setor-dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.ficha-setor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.ficha-setor::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--txt-3);
  transform: translateY(-1px);
}

.ficha-setor-ativo::before {
  background: var(--ouro);
  box-shadow: 0 0 0 3px var(--ouro-vel);
}

.ficha-setor-entregue::before {
  background: var(--ok);
}

.ficha-dias {
  color: var(--txt-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.ficha dd.num {
  font-variant-numeric: tabular-nums;
}

.linha-tempo {
  padding: 22px 24px 32px;
}

/* Cabeça da lista, não título de seção: o mesmo versalete das listas da tela.
   Em 16px de serifa ela competia com os próprios fatos que anuncia. */
.linha-tempo h3 {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fio);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* Cada fato ganha um marcador redondo com o ícone do setor, no tom da etapa.
   Entrar num setor é marcador cheio — é o trânsito que a vara procura; o que
   acontece dentro do setor é marcador claro, no mesmo tom. O fio liga os
   marcadores pelo centro. */
.evento {
  --tom: var(--azul);
  position: relative;
  padding: 0 0 18px 42px;
}

.evento::before {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 26px;
  bottom: -2px;
  width: 1px;
  background: var(--fio-2);
}

.evento-marca {
  position: absolute;
  left: 0;
  top: -4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--tom);
  background: color-mix(in srgb, var(--tom) 10%, var(--sup-0));
  border: 1px solid color-mix(in srgb, var(--tom) 28%, var(--sup-0));
}

.evento-marca .ic {
  width: 14px;
  height: 14px;
  stroke-width: 1.7;
}

.evento-marca.e-cheia {
  color: #fff;
  background: var(--tom);
  border-color: var(--tom);
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--tom) 70%, transparent);
}

/* O fato mais recente leva o anel de ouro da casa, qualquer que seja o setor. */
.evento-atual .evento-marca {
  box-shadow: 0 0 0 3px var(--sup-0), 0 0 0 5px color-mix(in srgb, var(--ouro) 55%, transparent);
}

/* Data e hora na linha de cima do título: a data só abre o dia, a hora vem
   em toda movimentação, com o relógio. */
.evento-quando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0 0 3px;
  min-height: 20px;
}

.evento-hora {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--txt-3);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.evento-hora .ic {
  width: 12px;
  height: 12px;
  stroke-width: 1.7;
}

.evento-setor,
.evento-setor-de {
  font-weight: 600;
  color: color-mix(in srgb, var(--tom) 70%, var(--txt-1));
}

.evento-setor-de {
  color: var(--txt-2);
}

.evento:last-child::before {
  display: none;
}

.evento-futuro::before,
.evento:has(+ .evento-futuro)::before {
  background: repeating-linear-gradient(to bottom, var(--fio-2) 0 3px, transparent 3px 7px);
}

/* Movimentação do mesmo dia da de cima: sem data, encosta um pouco mais. */
.evento-mesmo-dia {
  margin-top: -4px;
}

/* A virada de dia: faixa entre as movimentações, com o fio correndo até a
   borda. A data era um par de palavras na linha da hora e se perdia — aqui ela
   corta a linha do tempo, e a interrupção é o que marca o dia novo. */
.evento-virada {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
  padding-left: 42px;
  color: var(--txt-1);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* A primeira faixa da gaveta não precisa de ar antes dela. */
.evento-virada:first-child {
  margin-top: 0;
}

.evento-virada::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fio);
}

/* A data abre o dia: é o cabeçalho das movimentações logo abaixo dela. */
.evento-data {
  margin-bottom: 3px;
  color: var(--txt-2);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.evento-tit {
  margin-top: 0;
  color: var(--txt-1);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.evento-futuro .evento-tit {
  color: var(--txt-3);
  font-weight: 400;
}

.evento-txt {
  margin-top: 2px;
  color: var(--txt-2);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 56ch;
}

.evento-pe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.evento-pe:empty {
  display: none;
}

.marca-atual {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--ouro-vel);
  color: var(--ouro-txt);
  font-size: 10px;
  font-weight: 600;
}

/* ---------------------------------------------------------
   20. Entrada (login.html)
   Tela própria, fora das faixas do portal: duas colunas de
   altura cheia. Reaproveita os tokens, .btn e .btn-tema.
   --------------------------------------------------------- */

.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, 0.94fr);
  min-height: 100dvh;
  border-top: 2px solid var(--ouro);
}

/* --- Coluna institucional --- */

.ent-selo {
  position: relative;
  isolation: isolate;
  display: flex;
  background: var(--banda);
  color: var(--banda-txt-2);
}

/* A foto de fundo saiu: o mapa aceso já é a imagem desta coluna, e a textura
   atrás dele só disputava atenção com as luzes correndo nos contornos. */

.ent-selo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(112% 128% at 8% 0%, rgba(255, 255, 255, 0.07), transparent 58%);
  pointer-events: none;
}

.ent-selo-in {
  overflow: hidden;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: none;
  padding: clamp(34px, 4.4vw, 60px) clamp(28px, 3.6vw, 64px);
}

/* --- Coluna do formulário --- */

.ent-forma {
  overflow-y: auto;
  display: flex;
  /* Coluna: o formulário fica centrado no que sobra (margin:auto) e o rodapé
     cai naturalmente no pé. Absoluto não servia — outra regra, mais abaixo,
     devolve position:relative a .ent-pe, e o rodapé virava item da linha. */
  flex-direction: column;
  background: var(--sup-0);
  border-left: 1px solid var(--fio);
}

.ent-forma-in {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 404px;
  margin: auto;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 3.4vw, 56px);
}

.ent-forma h1 {
  font-size: clamp(27px, 2.5vw, 33px);
}

.ent-sub {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--txt-2);
}

.ent-forma form {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

/* --- Campos --- */

.campo {
  display: grid;
  gap: 7px;
}

.campo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.campo label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--txt-1);
}

.campo input[type="email"],
.campo input[type="text"],
.campo input[type="password"] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--fio-2);
  border-radius: var(--r-2);
  background: var(--sup-0);
  color: var(--txt-1);
  font: inherit;
  font-size: 14.5px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease);
}

.campo input::placeholder {
  color: var(--txt-3);
  opacity: 0.72;
}

.campo input:hover:not(:focus) {
  border-color: var(--txt-3);
}

.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--foco-vel);
}

.campo input[aria-invalid="true"] {
  border-color: var(--alerta);
}

.campo input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--alerta-vel);
}

/* Preenchimento automático do navegador: sem o amarelo padrão. */
.campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--txt-1);
  box-shadow: inset 0 0 0 100px var(--sup-1);
}

.campo-senha {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-senha input {
  padding-right: 50px;
}

.btn-olho {
  position: absolute;
  right: 5px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--txt-3);
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.btn-olho:hover {
  background: var(--sup-3);
  color: var(--txt-1);
}

.btn-olho .ic-olho-corte,
.btn-olho[aria-pressed="true"] .ic-olho {
  display: none;
}

.btn-olho[aria-pressed="true"] .ic-olho-corte {
  display: block;
}

.campo-erro,
.campo-nota {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.campo-erro {
  color: var(--alerta-txt);
}

.campo-nota {
  color: var(--ouro-txt);
}

/* Aviso geral do formulário: credencial recusada, rede fora. */
.ent-aviso {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 22px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--alerta);
  border-radius: var(--r-2);
  background: var(--alerta-vel);
  color: var(--alerta-txt);
  font-size: 13px;
  line-height: 1.5;
}

.ent-aviso .ic {
  margin-top: 2px;
  flex: none;
}

.ent-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: -2px;
  font-size: 13px;
  color: var(--txt-2);
  cursor: pointer;
}

.ent-check input {
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  accent-color: var(--azul);
  cursor: pointer;
}

.btn-largo {
  width: 100%;
  height: 46px;
  margin-top: 4px;
  font-size: 14.5px;
}

.ent-link {
  color: var(--azul-txt);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s var(--ease);
}

.ent-link:hover {
  text-decoration-color: currentColor;
}

.ent-apoio {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--txt-2);
}

.ent-apoio .ent-link {
  font-size: inherit;
}

/* No pé da coluna, com a mesma largura e o mesmo recuo do formulário: o aviso e
   o botão de tema são rodapé da tela, não passo do cadastro. */
.ent-pe {
  flex: none;
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(20px, 3vw, 40px) clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--fio);
}

.ent-pe p {
  margin: 0;
  max-width: 44ch;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--txt-3);
}

/* ---------------------------------------------------------
   21. Mapa de atuação (login.html)
   A peça institucional do site público, no vão da coluna
   escura: antes de pedir a credencial, a tela diz onde a JRS
   já trabalha — e a vara que está entrando costuma se
   encontrar ali.

   É ilustração, não controle: os fatos estão no parágrafo, e
   o desenho não carrega nada que só ele diga. A escala de
   ouro é derivada de --ouro por color-mix, sem cor literal,
   para o mapa virar junto com o tema.
   --------------------------------------------------------- */

/* O texto encosta no topo da coluna e o desenho fica com todo o resto, centrado
   no que sobrar: é a altura livre que manda no tamanho do mapa. */
.ent-mapa {
  flex: 1;
  display: flex;
  flex-direction: column;

  /* O degrau mais baixo subiu de 10% para 17% em relação ao site institucional:
     lá o fundo é uma textura de linhas, aqui é a foto da cidade, e a 10% o estado
     de uma nomeação não se separava do estado sem atuação. */
  --mapa-1: color-mix(in srgb, var(--ouro) 17%, transparent);
  --mapa-2: color-mix(in srgb, var(--ouro) 30%, transparent);
  --mapa-3: color-mix(in srgb, var(--ouro) 40%, transparent);
  --mapa-4: color-mix(in srgb, var(--ouro) 62%, transparent);
  --mapa-5: color-mix(in srgb, var(--ouro) 88%, transparent);
  --mapa-fio: color-mix(in srgb, var(--ouro) 55%, transparent);
  --mapa-claro: color-mix(in srgb, var(--ouro) 38%, var(--banda-txt));
}

.ent-mapa-olho {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ouro);
}

.ent-mapa-olho::before {
  content: "";
  width: 20px;
  height: 1.5px;
  background: var(--ouro);
}

.ent-mapa-txt {
  margin: 14px 0 0;
  max-width: 88ch;
  font-size: 13.5px;
  line-height: 1.62;
}

.ent-mapa-txt strong {
  font-weight: 600;
  color: var(--banda-txt);
}

/* O desenho é dimensionado pela ALTURA que sobra, não pela largura da coluna:
   é a altura que acaba primeiro numa tela de entrada. A largura sai daí pela
   proporção do viewBox (1000 × 1050) e nunca passa da coluna. */
.ent-mapa-svg {
  position: relative;
  /* Toma tudo o que o texto deixou: o desenho cresce até esbarrar na altura
     ou na largura da coluna, o que acabar primeiro. */
  flex: 1;
  min-height: 0;
  width: 100%;
  margin-top: clamp(14px, 2.6vh, 26px);
}

/* Fora do fluxo de propósito. No fluxo, o <svg> resolve a própria altura pela
   proporção do viewBox sobre a largura da coluna — e aí é ele que passa a mandar
   na altura dela: a coluna escura ia a 1171px numa janela de 894px e a tela de
   entrada ganhava rolagem. Absoluto, ele só ocupa o que o flex já reservou, e o
   preserveAspectRatio padrão centra o desenho nessa caixa. */
.mp-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Contorno de estado. O preenchimento é a única leitura quantitativa do
   desenho: cinco degraus, do estado com uma nomeação ao TRT-6. */
.mp-uf {
  fill: var(--mapa-1);
  stroke: var(--mapa-fio);
  stroke-width: 1.4px;
  stroke-linejoin: round;
  transition: fill 0.22s var(--ease), stroke 0.22s var(--ease), stroke-width 0.18s var(--ease);
}

.mp-n1 {
  fill: var(--mapa-1);
}
.mp-n2 {
  fill: var(--mapa-2);
}
.mp-n3 {
  fill: var(--mapa-3);
}
.mp-n4 {
  fill: var(--mapa-4);
}
.mp-n5 {
  fill: var(--mapa-5);
}

.mp-uf:hover {
  stroke: var(--mapa-claro);
  stroke-width: 2.4px;
}

/* Pernambuco: sede e 7 de cada 10 trabalhos. Fica aceso o tempo todo. */
.mp-uf.is-sel {
  fill: var(--ouro);
  stroke: var(--mapa-claro);
  stroke-width: 2.2px;
}

/* Estado sem nomeação: fica no desenho para o Brasil continuar inteiro, mas
   não recebe ponteiro. */
.mp-off {
  fill: var(--banda-vel);
  stroke: var(--banda-fio);
  stroke-width: 1px;
  pointer-events: none;
}

/* Sede do tribunal: raio logarítmico do volume de nomeações. */
.mp-sede {
  fill: var(--ouro);
  opacity: 0.85;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: 50%;
}

.mp-sede.is-sel {
  fill: var(--banda-txt);
  filter: drop-shadow(0 0 7px var(--ouro));
}

/* --- Etiqueta do ponteiro --- */

.mp-tip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--banda-txt-2);
  background: var(--banda-2);
  border: 1px solid var(--mapa-fio);
  border-radius: var(--r-1);
  box-shadow: var(--elev-3);
  pointer-events: none;
  transform: translate(-50%, -135%);
}

.mp-tip[hidden] {
  display: none;
}

/* Sem ponteiro não há etiqueta: no toque ela apareceria sob o dedo, presa no
   último estado tocado, e o parágrafo acima já diz o que ela diria. */
@media (hover: none) {
  .mp-tip {
    display: none;
  }
}

/* Do meio do mapa para a direita a etiqueta vira, senão sai da coluna. */
.mp-tip-esq {
  transform: translate(calc(-100% - 14px), -50%);
}

.mp-tip-txt {
  display: flex;
  flex-direction: column;
}

.mp-tip-nome {
  font-family: Lora, Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--banda-txt);
}

.mp-tip-flag {
  flex: none;
  width: 26px;
  height: 18px;
  object-fit: cover;
  border: 1px solid var(--banda-fio-2);
  border-radius: 2px;
}

/* ---------------------------------------------------------
   22. Responsivo
   --------------------------------------------------------- */

/* Abaixo de 1.180px, quatro cartões ficam estreitos demais para o número do
   processo: a fileira passa a ter três. */
@media (max-width: 1180px) {
  .grade-mov {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .topo-in {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 0;
  }

  .nav {
    order: 3;
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  .nav a[aria-current="page"]::after {
    bottom: -8px;
  }

  .topo-fim {
    margin-left: auto;
  }
}

@media (max-width: 1080px) {
  .destaque-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

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

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

  .duas-analise {
    grid-template-columns: minmax(0, 1fr);
  }

  .rodape-in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
}

@media (max-width: 860px) {
  .duas {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .bloco-atencao + .bloco-atencao {
    padding-left: 0;
    padding-top: 34px;
    border-left: none;
    border-top: 1px solid var(--fio);
  }

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

  .vara-selo {
    max-width: 200px;
  }

  .vara-selo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  :root {
    --topo-alt: 56px;
  }

  .faixa {
    padding: 44px 0;
  }

  .faixa-sup {
    padding: 40px 0;
  }

  .marca-txt small {
    display: none;
  }

  .vara-selo {
    display: none;
  }

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

  /* Doze meses em 390px: barra e respiro encolhem para o gráfico
     caber inteiro, sem rolagem lateral e sem cortar mês. */
  .grafico {
    gap: 3px;
    height: 176px;
    margin: 24px 14px 0;
    padding-left: 22px;
  }

  .g-mes {
    gap: 2px;
  }

  .g-barra {
    width: 6px;
    border-radius: 2px 2px 0 0;
  }

  .g-rot {
    font-size: 9.5px;
    letter-spacing: 0;
  }



  .painel-chat .painel-cabeca {
    align-items: flex-start;
  }

  /* A tabela vira lista: cada linha é um bloco rotulado. */
  .tabela {
    min-width: 0;
  }

  .tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabela tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fio);
  }

  .tabela td {
    height: auto;
    padding: 0;
    border: none;
  }

  .tabela td.col-proc {
    grid-column: 1 / -1;
    margin-bottom: 10px;
  }

  /* As duas datas dividem a linha 2, cada uma com o seu rótulo. */
  .tabela td.col-data {
    grid-row: 2;
    text-align: left;
  }

  .tabela td.col-data:nth-of-type(2) {
    grid-column: 1;
  }

  .tabela td.col-data:nth-of-type(3) {
    grid-column: 2;
    justify-self: end;
    text-align: right;
  }

  /* Etapa e dias dividem a linha 3; o prazo é a faixa de pé da linha,
     rótulo à esquerda e valor à direita. Lado a lado eles não cabem em
     390px — "Documentos pendentes" mais a data colidem. */
  .tabela td.col-etapa {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    text-align: left;
  }

  .tabela td.col-num {
    grid-row: 3;
    justify-self: end;
    text-align: right;
  }

  /* Dias até a entrega divide a linha 3 com dias na etapa. */
  .tabela td.col-num:nth-of-type(5) {
    grid-column: 2;
  }

  .tabela td.col-num:nth-of-type(6) {
    grid-column: 3;
  }

  .tabela td.col-prazo {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--fio);
    text-align: left;
  }

  .tabela td.col-prazo::before {
    margin-bottom: 0;
  }

  .tabela td::before {
    content: attr(data-rot);
    display: block;
    color: var(--txt-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .tabela td.col-proc::before,
  .esqueleto td::before {
    display: none;
  }

  .esqueleto td {
    padding: 18px 20px;
  }

  .gaveta {
    width: 100%;
    border-radius: 0;
    border-left: none;
  }

  .gaveta-topo {
    border-radius: 0;
  }

  .ficha {
    grid-template-columns: minmax(0, 1fr);
  }

  .ficha > div:nth-child(odd):not(.ficha-larga) {
    border-right: 0;
  }

  .rodape-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 42px;
  }
}


/* Entrada — duas colunas só enquanto ambas cabem inteiras. */
@media (max-width: 1000px) {
  .entrada {
    grid-template-columns: minmax(0, 1fr);
  }

  .ent-selo-in {
    max-width: none;
    gap: 26px;
    padding-block: clamp(28px, 6vw, 44px);
  }

  /* Empilhada, a coluna escura vira faixa e o mapa encolhe, para o formulário
     aparecer com pouca rolagem. */
  .entrada {
    height: auto;
  }

  .ent-mapa-svg {
    flex: none;
    height: clamp(200px, 38vh, 330px);
  }

  .ent-selo::after {
    -webkit-mask-image: linear-gradient(0deg, #000 12%, rgba(0, 0, 0, 0.45) 62%, transparent 96%);
    mask-image: linear-gradient(0deg, #000 12%, rgba(0, 0, 0, 0.45) 62%, transparent 96%);
  }

  .ent-forma {
    border-left: 0;
    border-top: 1px solid var(--fio);
  }

  .ent-forma-in {
    max-width: 440px;
    padding-block: clamp(32px, 7vw, 52px);
  }
}

@media (max-width: 560px) {
  .ent-pe {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ---------------------------------------------------------
   23. Preferências do sistema
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mov:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .topo,
  .painel,
  .mov,
  .gaveta {
    border: 1px solid CanvasText;
  }
}

/* =========================================================
   Ligação com os dados reais: listas da API, bloco de contato
   e estados de carregamento e falha da API.
   ========================================================= */

/* Bloco de contato — o portal é somente leitura, não há envio de mensagem. */
.contato {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
}

.contato-txt {
  color: var(--txt-2);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 46ch;
}

.contato-lista {
  display: grid;
  gap: 10px;
}

.contato-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--txt-1);
  font-size: 13.5px;
}

.contato-lista .ic {
  color: var(--ouro);
}

.contato .btn {
  align-self: flex-start;
  margin-top: 2px;
}

/* Falha de carregamento: a tela diz o que houve, não fica em branco. */
.falha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 14px 18px;
  max-width: var(--larg, 1240px);
  border: 1px solid var(--alerta);
  border-radius: var(--raio, 2px);
  background: var(--alerta-vel);
  color: var(--alerta-txt);
  font-size: 13.5px;
}

.carregando {
  color: var(--txt-3);
  font-size: 13px;
}

/* Paginação da tabela: 802 processos não cabem numa página só. */
.tabela-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px 18px;
  border-top: 1px solid var(--fio);
}


/* =========================================================
   Composição da referência corporativa: hero de foto, faixa de
   números sobreposta (duas colunas escuras, duas claras) e a
   seção das perícias em análise.
   ========================================================= */

.btn-largo {
  height: 52px;
  padding: 0 26px;
  font-size: 14.5px;
}

/* ---------- Faixa de números ---------- */

.numeros-faixa {
  position: relative;
  z-index: 3;
  /* Sobe por cima do fim do hero, como na referência. */
  margin-top: -68px;
  margin-bottom: 8px;
}

.numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--fio);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--elev-3);
}

.numero {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 22px 18px;
  background: var(--sup-0);
  border-left: 1px solid var(--fio);
  animation: subir 0.62s var(--ease-saida) both;
}

.numero:first-child {
  border-left: none;
}

.numero:nth-child(2) {
  animation-delay: 0.07s;
}
.numero:nth-child(3) {
  animation-delay: 0.14s;
}
.numero:nth-child(4) {
  animation-delay: 0.21s;
}

/* As duas primeiras na cor da marca; as duas últimas no papel. */
.numero-escuro {
  background: var(--banda-2);
  border-left-color: var(--banda-fio);
}

/* Ícone e número na mesma linha: o card encolhe e o dado sobe. */
.numero-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.numero-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--fio-2);
  border-radius: var(--r-2);
  color: var(--azul-txt);
}

.numero-escuro .numero-ic {
  border-color: var(--banda-fio-2);
  color: var(--ouro);
}

.numero-ic .ic {
  width: 19px;
  height: 19px;
}

.numero-r {
  color: var(--txt-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.numero-escuro .numero-r {
  color: var(--banda-txt-3);
}

.numero-n {
  color: var(--txt-1);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.numero-escuro .numero-n {
  color: var(--banda-txt);
}

.numero-n small {
  font-size: 0.4em;
  font-weight: 500;
  color: var(--txt-3);
  letter-spacing: 0;
  margin-left: 4px;
}

.numero-escuro .numero-n small {
  color: var(--banda-txt-3);
}

.numero-nota {
  margin-top: 5px;
  color: var(--txt-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.numero-escuro .numero-nota {
  color: var(--banda-txt-2);
}

@media (max-width: 1080px) {
  .numeros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .numero:nth-child(3) {
    border-left: none;
  }

  .numero:nth-child(n + 3) {
    border-top: 1px solid var(--fio);
  }

}

@media (max-width: 720px) {
  .destaque-in {
    min-height: 0;
    padding-top: 44px;
    padding-bottom: 86px;
  }

  .destaque h1 {
    max-width: 18ch;
  }

  .destaque-acoes {
    width: 100%;
  }

  .numeros-faixa {
    margin-top: -60px;
  }

  .numeros {
    grid-template-columns: 1fr;
  }

  .numero {
    border-left: none;
    border-top: 1px solid var(--fio);
  }

  .numero:first-child {
    border-top: none;
  }

  .numero-escuro + .numero-escuro {
    border-top-color: var(--banda-fio);
  }
}

/* Link com cara de botão não carrega sublinhado de link. */
a.btn {
  text-decoration: none;
}

/* =========================================================
   Cabeçalho escuro: a barra passa a ser faixa de marca, como
   nas referências. Os tokens --banda-* já existem nos dois temas.
   ========================================================= */

.topo {
  background: color-mix(in srgb, var(--banda) 92%, transparent);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 var(--ouro);
}

.topo.rolou {
  background: color-mix(in srgb, var(--banda) 97%, transparent);
  box-shadow: 0 1px 0 var(--ouro), var(--elev-3);
}

.topo .marca {
  color: var(--banda-txt);
}

.topo .marca-txt small {
  color: var(--banda-txt-3);
}

.topo .nav a {
  color: var(--banda-txt-2);
}

.topo .nav a:hover {
  background: var(--banda-vel);
  color: var(--banda-txt);
}

.topo .nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--banda-txt) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--banda-fio-2);
  color: var(--banda-txt);
  font-weight: 600;
}

/* O sublinhado do item ativo era ouro e nascia rente ao filete de ouro do próprio
   cabeçalho: ouro sobre ouro, marcação invisível. Quem marca agora é a pílula. */
.topo .nav a[aria-current="page"]::after {
  display: none;
}

.topo .vara-selo {
  border-color: var(--banda-fio);
  background: var(--banda-vel);
  color: var(--banda-txt);
}

.topo .btn-tema {
  border-color: var(--banda-fio);
  color: var(--banda-txt-2);
}

.topo .btn-tema:hover {
  background: var(--banda-vel);
  color: var(--banda-txt);
}

.topo .btn-fio {
  border-color: var(--banda-fio);
  color: var(--banda-txt);
}

.topo .btn-fio:hover {
  background: var(--banda-vel);
  border-color: var(--banda-fio-2);
  color: var(--banda-txt);
}

/* =========================================================
   Faixa de destaque: grão fino do lado do texto e troca suave
   entre as fotos da cidade.
   ========================================================= */

/* Textura: grão de papel sobre o véu claro, onde a foto já foi lavada.
   Dá superfície ao lado do título sem competir com a leitura. */
.destaque::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(100deg, var(--sup-1) 16%, rgba(0, 0, 0, 0) 62%);
  background-size: 180px 180px, auto;
  background-repeat: repeat, no-repeat;
  opacity: 0.85;
}

:root[data-tema="escuro"] .destaque::before,
:root:not([data-tema="claro"]) .destaque::before {
  opacity: 0.7;
}

/* Troca de foto: a camada some e volta, em vez de pular de imagem. */
.destaque::after {
  transition: opacity 0.45s var(--ease);
}

.destaque.trocando::after {
  opacity: 0;
}

/* Bandeira do estado da vara, no lugar onde antes ficava o filtro de período. */
.bandeira {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.bandeira img {
  width: 72px;
  height: auto;
  border: 1px solid var(--fio-2);
  border-radius: var(--r-1);
  box-shadow: var(--elev-1);
  background: var(--sup-0);
}

.bandeira figcaption {
  color: var(--txt-2);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Chip de nomeações: desde quando a vara trabalha com a JRS. É dado, não rótulo. */
.chip-nomeacoes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--fio-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sup-0) 74%, transparent);
  backdrop-filter: blur(6px);
  color: var(--txt-2);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.chip-nomeacoes .ic {
  width: 13px;
  height: 13px;
  color: var(--ouro-txt);
}

.chip-nomeacoes b {
  color: var(--txt-1);
  font-weight: 600;
}

/* Data da atualização: encostada no canto de cima da faixa de números, sobre a foto. */
/* "Atualizado em" à esquerda, a faixa de nomeações à direita: as duas dizem
   quando, e ficam nos dois cantos da mesma linha, logo acima do trilho.

   A linha não recebe clique no vão entre as duas: ela pertence à faixa de
   números, que sobe 68px por cima do hero, e o meio dela cai justo sobre as
   setas da foto. Só os dois textos escutam o ponteiro; o vazio no meio deixa
   passar. */
.numeros-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  pointer-events: none;
}

.numeros-linha > * {
  pointer-events: auto;
}

.numeros-atualizado {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin: 0;
}

.numeros-atualizado .ic {
  width: 14px;
  height: 14px;
  color: var(--txt-3);
}

.numeros-atualizado time {
  color: var(--txt-1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.numeros-atualizado {
  color: var(--txt-2);
  font-size: 12.5px;
}





/* Palavras em destaque na saudação: peso e tinta forte, sem virar outra cor. */
.destaque-sub b {
  color: var(--txt-1);
  font-weight: 600;
}

/* Estado aceso pelo rodízio automático do mapa. */
.mp-uf.is-auto {
  fill: var(--mapa-5);
  stroke: var(--mapa-claro);
  stroke-width: 2.2px;
}

/* --- Ficha do rodízio do mapa ---
   Sem ponteiro não há onde ancorar: a ficha vai para o canto do desenho, em
   vidro sobre a coluna escura, e traz uma barra fina com o tempo até a troca. */

.mp-tip-fixa {
  top: 10px;
  right: 10px;
  left: auto !important;
  transform: none;
  align-items: flex-start;
  gap: 14px;
  min-width: 232px;
  padding: 0;
  /* Sem caixa: nem sombra, nem contorno, nem fundo. O texto pousa no vazio
     escuro do canto, que já é fundo suficiente. */
  border: none;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
  animation: fichaEntra 0.28s var(--ease-saida) both;
}

@keyframes fichaEntra {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
}


.mp-tip-fixa .mp-tip-flag {
  width: 38px;
  height: 26px;
  margin-top: 3px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.mp-tip-fixa .mp-tip-nome {
  font-family: Lora, Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--banda-txt);
}

.mp-tip-fixa .mp-tip-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--banda-txt-2);
}

.mp-tip-fixa .mp-tip-n {
  color: var(--ouro);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .mp-tip-fixa {
    animation: none;
  }
}

/* --- Placar de bandeiras do mapa ---
   Ocupa o canto vazio à esquerda do desenho. Cinza até o rodízio chegar no
   estado; depois a bandeira ganha cor e o número entra. */

.mp-legenda {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.mp-legenda li {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.42;
  filter: grayscale(1) contrast(0.85);
  transition: opacity 0.45s var(--ease), filter 0.45s var(--ease);
}

.mp-legenda img {
  width: 22px;
  height: 15px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mp-legenda-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.mp-legenda-txt b {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--banda-txt-3);
}

/* O número só aparece quando o estado é chamado. */
.mp-legenda-n {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--banda-txt-3);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-saida), color 0.4s var(--ease);
}

.mp-legenda li.is-viva {
  opacity: 1;
  filter: none;
}

.mp-legenda li.is-viva .mp-legenda-txt b {
  color: var(--banda-txt-2);
}

.mp-legenda li.is-viva .mp-legenda-n {
  opacity: 1;
  transform: none;
  color: var(--ouro);
  font-weight: 600;
}

/* Coluna estreita: o placar disputaria espaço com o desenho. */
@media (max-width: 1240px) {
  .mp-legenda {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-legenda li,
  .mp-legenda-n {
    transition: none;
  }
}

/* --- Luz correndo no contorno dos estados ---
   Camada só de traço, por cima do preenchimento: um risco curto dá a volta em
   laço contínuo. O contorno de baixo permanece inteiro. */

.mp-brilho {
  pointer-events: none;
}

.mp-brilho path {
  fill: none;
  stroke: var(--mapa-claro);
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ouro) 60%, transparent));
  animation: correrContorno linear infinite;
}

@keyframes correrContorno {
  to {
    stroke-dashoffset: calc(var(--volta) * -1);
  }
}

/* O estado aceso pelo rodízio recebe a luz mais forte. */
.mp-brilho path[data-uf].is-forte {
  stroke: var(--banda-txt);
  stroke-width: 2.2px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mp-brilho {
    display: none;
  }
}

/* =========================================================
   Coluna do formulário, versão moderna
   O chão vira papel e o formulário sobe num cartão: ele deixa de
   ser "um lado branco" e passa a ser objeto, com profundidade.
   ========================================================= */

.ent-forma {
  background: var(--sup-1);
  border-left: none;
}

.ent-forma-in {
  max-width: 452px;
  padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3vw, 40px);
}

/* O cartão: superfície, fio de 1px e duas camadas de sombra. */
.ent-forma form,
.ent-forma h1,
.ent-sub,
.ent-apoio,
.ent-pe {
  position: relative;
  z-index: 1;
}

.ent-forma-in {
  border-radius: var(--r-3);
  background: var(--sup-0);
  border: 1px solid var(--fio);
  box-shadow: var(--elev-3);
}

.ent-forma h1 {
  font-size: clamp(26px, 2.3vw, 31px);
  letter-spacing: -0.02em;
}

/* Filete de ouro curto acima do título: a marca aparece sem logotipo. */
.ent-forma h1::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: var(--ouro);
}

.ent-sub {
  font-size: 13.5px;
}

.ent-forma form {
  gap: 16px;
  margin-top: 26px;
}

/* --- Campo com ícone --- */

.campo-caixa {
  position: relative;
  display: block;
}

.campo-ic {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  color: var(--txt-3);
  pointer-events: none;
  transition: color 0.16s var(--ease);
}

.campo-caixa:focus-within .campo-ic {
  color: var(--azul);
}

.campo input[type="email"],
.campo input[type="text"],
.campo input[type="password"] {
  height: 48px;
  padding-left: 40px;
  background: var(--sup-1);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--fio-2);
  transition: background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.campo input:hover:not(:focus) {
  background: var(--sup-0);
  box-shadow: inset 0 0 0 1px var(--txt-3);
}

.campo input:focus {
  background: var(--sup-0);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--azul), 0 0 0 4px var(--foco-vel);
}

.campo input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--alerta);
}

.campo input[aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 1.5px var(--alerta), 0 0 0 4px var(--alerta-vel);
}

.campo input:-webkit-autofill {
  box-shadow: inset 0 0 0 100px var(--sup-1), inset 0 0 0 1px var(--fio-2);
}

/* --- Botão --- */

.btn-largo {
  height: 50px;
  width: 100%;
  border-radius: var(--r-2);
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--azul) 70%, transparent);
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn-largo:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--azul) 80%, transparent);
}

.btn-largo:active:not(:disabled) {
  transform: translateY(0);
}

.btn-largo .ic {
  width: 17px;
  height: 17px;
  transition: transform 0.18s var(--ease);
}

.btn-largo:hover:not(:disabled) .ic {
  transform: translateX(4px);
}

/* --- Caixa de seleção --- */

.ent-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--azul);
  border-radius: var(--r-1);
}

/* --- Rodapé da coluna --- */

.ent-pe {
  padding-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-largo:hover:not(:disabled) {
    transform: none;
  }
}

/* Número da ficha: o dado vira o assunto do cartão e entra em zoom a cada troca. */
.mp-tip-fixa .mp-tip-sub {
  margin-top: 6px;
  font-size: inherit;
}

.mp-tip-fixa .mp-tip-n {
  display: block;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
  animation: zoomNumero 0.5s var(--ease-saida) both;
}

.mp-tip-fixa .mp-tip-cauda {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--banda-txt-2);
  animation: zoomCauda 0.5s var(--ease-saida) 0.08s both;
}

@keyframes zoomNumero {
  from {
    opacity: 0;
    transform: scale(1.45);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes zoomCauda {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-tip-fixa .mp-tip-n,
  .mp-tip-fixa .mp-tip-cauda {
    animation: none;
  }
}

/* =========================================================
   Abrangência: "19 dos 24" como composição, não como frase
   O número vira o assunto e a barra de 24 marcas mostra a
   proporção sem o leitor precisar fazer a conta.
   ========================================================= */

/* Manchete da coluna: o volume acumulado, sozinho. A abrangência "19/24" desceu
   para o canto inferior esquerdo do desenho, onde ocupa folga que o mapa nunca
   usa — aqui em cima ela dividiria a atenção com o número maior da tela. */
.atuacao {
  margin-top: 18px;
}

.atuacao-tot {
  margin: 0;
}

.atuacao-tot-n {
  display: block;
  font-family: Lora, Georgia, serif;
  font-size: clamp(48px, 4.4vw, 68px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
}

.atuacao-tot-r {
  margin-top: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--banda-txt-2);
}

/* --- Abrangência, no canto do desenho --- */

/* Os dois blocos do canto inferior esquerdo numa coluna só: a abrangência em
   cima, o placar por tribunal embaixo, ambos ancorados na base. */
.mp-canto {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: clamp(28px, 4.6vh, 46px);
  width: min(38%, 300px);
  pointer-events: none;
}

.atuacao-trt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 16px;
}

.atuacao-n {
  grid-row: span 2;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  font-family: Lora, Georgia, serif;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}

.atuacao-n b {
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ouro);
}

.atuacao-n span {
  font-size: 22px;
  font-weight: 500;
  color: var(--banda-txt-3);
}

.atuacao-r {
  align-self: end;
  margin: 0;
  font-size: 13px;
  line-height: 1.32;
  color: var(--banda-txt-2);
}

/* As 24 marcas: 19 acesas, 5 apagadas. Acendem em sequência na entrada. */
.atuacao-marcas {
  align-self: start;
  display: flex;
  gap: 3px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.atuacao-marcas li {
  width: 4px;
  height: 18px;
  border-radius: 1px;
  background: var(--banda-vel-2);
  transform-origin: bottom;
  animation: marcaSobe 0.4s var(--ease-saida) both;
  animation-delay: var(--atraso, 0ms);
}

.atuacao-marcas li.is-viva {
  background: var(--ouro);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ouro) 45%, transparent);
}

@keyframes marcaSobe {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .atuacao-marcas li {
    animation: none;
  }
}

/* Coluna estreita: o canto do desenho vira faixa cheia sob o mapa. */
@media (max-width: 1000px) {
  .mp-canto {
    width: 100%;
  }
}

/* =========================================================
   Tela de entrada no tema escuro: separar as colunas por
   superfície, não por enfeite.
   A regra do escuro é a mesma do claro invertida: quanto mais
   perto de quem usa, mais clara a superfície. Por isso a coluna
   do mapa afunda e a do formulário sobe — o contrário deixaria
   o cartão sem chão.
   ========================================================= */

:root[data-tema="escuro"] .ent-selo {
  background: #05080c;
}

:root[data-tema="escuro"] .ent-forma {
  background: #11181f;
}

/* O par do tema do sistema vai dentro da media query: sem isso o escuro
   vazava para o tema claro, porque :not([data-tema="claro"]) casa quando
   ninguém escolheu tema nenhum. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ent-selo {
    background: #05080c;
  }

  :root:not([data-tema="claro"]) .ent-forma {
    background: #11181f;
  }
}

/* Costura entre as colunas: um fio que existe nos dois temas. */
.ent-forma {
  border-left: 1px solid var(--fio);
}

/* Grão de papel só do lado institucional — atrás de campo de digitação,
   textura é ruído. */
.ent-selo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
    radial-gradient(112% 128% at 8% 0%, rgba(255, 255, 255, 0.07), transparent 58%);
  background-size: 180px 180px, auto;
  background-repeat: repeat, no-repeat;
  opacity: 0.5;
}

/* =========================================================
   Cartão do formulário: sem sombra
   Sobre papel, um fio de 1px já separa. A sombra forte dava
   ar de caixa de diálogo flutuando — aqui é uma porta, não um
   alerta. A marca no topo é quem assina.
   ========================================================= */

.ent-forma-in {
  box-shadow: none;
  border-color: var(--fio-2);
}

:root[data-tema="escuro"] .ent-forma-in {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.11);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ent-forma-in {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.11);
  }
}

/* --- Marca no topo do cartão --- */

.ent-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 26px;
  color: var(--txt-1);
}

.ent-marca-img {
  width: 252px;
  height: auto;
}

/* Tela baixa: a marca cede alguns pixels para a coluna caber inteira. A regra
   da tela de entrada continua valendo — aqui não se rola. */
@media (max-height: 860px) {
  .ent-marca-img {
    width: 208px;
  }
}

@media (max-height: 740px) {
  .ent-marca-img {
    width: 176px;
  }
}

/* No escuro a marca é navy sobre navy: um leve clareamento a devolve sem
   inventar outra versão do arquivo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ent-marca-img {
    filter: brightness(0) invert(1) opacity(0.92);
  }
}

:root[data-tema="escuro"] .ent-marca-img {
  filter: brightness(0) invert(1) opacity(0.92);
}

/* "Portal da Vara" segue abaixo da marca, na voz de etiqueta do resto da tela. */
.ent-marca-sub {
  padding-left: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* O filete de ouro sobre o título sai: a marca já faz esse papel. */
.ent-forma h1::before {
  display: none;
}

/* =========================================================
   Formulário sem cartão
   Mesmo fundo da coluna: sem superfície, sem fio, sem sombra.
   Quem passa a ter superfície são os campos — senão o
   formulário desaparece no papel.
   ========================================================= */

.ent-forma-in {
  background: none;
  border: none;
  border-radius: 0;
}

.campo input[type="email"],
.campo input[type="text"],
.campo input[type="password"] {
  background: var(--sup-0);
}

.campo input:hover:not(:focus) {
  background: var(--sup-0);
  box-shadow: inset 0 0 0 1px var(--txt-3);
}

.campo input:focus {
  background: var(--sup-0);
}

.campo input:-webkit-autofill {
  box-shadow: inset 0 0 0 100px var(--sup-0), inset 0 0 0 1px var(--fio-2);
}

/* --- Selo do TRT na ficha do mapa ---
   Para uma vara, o tribunal identifica mais que o estado: sai da legenda
   e vira selo ao lado do nome. */

.mp-tip-cabeca {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.mp-tip-trts {
  display: inline-flex;
  gap: 5px;
}

.mp-tip-trt {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--ouro) 55%, transparent);
  border-radius: var(--r-pill);
  color: var(--ouro);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Na ficha grande do rodízio o selo cresce junto. */
.mp-tip-fixa .mp-tip-trt {
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  background: color-mix(in srgb, var(--ouro) 14%, transparent);
}

/* =========================================================
   Ficha do rodízio: o TRT vira manchete
   Para uma vara, o tribunal identifica mais que o estado. O TRT
   assume o topo, em ouro e corpo grande; o estado vira apoio.
   O número segue forte, mas em tinta clara — dois níveis de
   ênfase que não brigam entre si.
   ========================================================= */

.mp-tip-fixa .mp-tip-cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

/* O selo do TRT sobe para cima do nome do estado. */
.mp-tip-fixa .mp-tip-trts {
  order: -1;
  gap: 8px;
}

/* Em corpo grande a pílula pesa: o destaque passa a ser tamanho e cor. */
.mp-tip-fixa .mp-tip-trt {
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--ouro);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.mp-tip-fixa .mp-tip-nome {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--banda-txt-2);
}

/* O número perde o ouro para o TRT e fica em tinta clara. */
.mp-tip-fixa .mp-tip-n {
  color: var(--banda-txt);
  font-size: 30px;
}

.mp-tip-fixa .mp-tip-sub {
  margin-top: 12px;
}

/* Placar por tribunal: item maior e o TRT no lugar da sigla do estado. */
.mp-legenda {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px 14px;
}

.mp-legenda img {
  width: 26px;
  height: 18px;
}

.mp-legenda-txt b {
  font-size: 12px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.mp-legenda-n {
  font-size: 13px;
}

/* =========================================================
   Holofote no estado da vez
   Todo estado com nomeação é ouro; assim, o aceso sumia no meio
   dos outros. Agora ele recebe tom próprio e os demais recuam —
   dá para saber de qual TRT a ficha está falando.
   ========================================================= */

.mp-uf.is-auto {
  /* Continua escuro por dentro — foi o pedido —, mas o contraste agora vem do
     traço: contorno em ouro claro, mais grosso, com um halo fino por fora. Com
     fundo escuro e vizinhos dourados, é a borda que identifica, não a mancha. */
  fill: color-mix(in srgb, var(--ouro) 26%, var(--banda));
  stroke: color-mix(in srgb, var(--ouro) 55%, var(--banda-txt));
  stroke-width: 3px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ouro) 85%, transparent));
}

/* Enquanto há um estado em foco, o resto do mapa dá meio passo atrás. */
.mp-svg.tem-foco .mp-uf:not(.is-auto) {
  opacity: 0.62;
  transition: opacity 0.4s var(--ease);
}

.mp-svg.tem-foco .mp-sede {
  opacity: 0.55;
}

.mp-uf {
  transition: opacity 0.4s var(--ease), fill 0.3s var(--ease);
}

/* No placar, o tribunal da vez se separa dos que já foram chamados. */
.mp-legenda li.is-atual .mp-legenda-txt b {
  color: var(--banda-txt);
}

.mp-legenda li.is-atual .mp-legenda-n {
  color: var(--ouro);
}

.mp-legenda li.is-atual img {
  outline: 2px solid var(--ouro);
  outline-offset: 1px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mp-uf,
  .mp-svg.tem-foco .mp-uf:not(.is-auto) {
    transition: none;
  }
}

/* --- Modo exploração: com o ponteiro no mapa, só o tribunal apontado tem cor --- */

.explorando .mp-legenda li:not(.is-atual) {
  opacity: 0.3;
  filter: grayscale(1) contrast(0.8);
}

/* O acumulado nacional também recua: o assunto, naquele instante, é o tribunal
   sob o ponteiro. */
.explorando .atuacao,
.explorando .atuacao-trt {
  opacity: 0.45;
}

.atuacao,
.atuacao-trt,
.mp-legenda li {
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
}

/* =========================================================
   Trilho da margem esquerda: só ícones
   Consulta, contato e voltar ao topo. Fica no meio da altura
   da janela, do hero ao rodapé, na margem que sobra — e some
   quando não há margem para ocupar.
   ========================================================= */

.margem {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: 1px solid var(--fio);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sup-0) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--elev-2);

  /* Fixo desde o primeiro quadro: é a barra de contato da página, não um atalho
     que aparece quando a rolagem lembra dele. Entra uma vez, com a página. */
  animation: trilhoEntra 0.45s var(--ease-saida) 0.25s both;
}

@keyframes trilhoEntra {
  from {
    opacity: 0;
    transform: translate(-10px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

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

.margem-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--txt-2);
  text-decoration: none;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.margem-item:hover {
  background: var(--sup-3);
  color: var(--azul-txt);
}

.margem-item .ic {
  width: 19px;
  height: 19px;
}

.margem-fio {
  width: 18px;
  height: 1px;
  background: var(--fio-2);
}

/* Etiqueta ao lado, só no ponteiro: o ícone sozinho não diz o que faz. */
.margem-dica {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 5px 10px;
  border-radius: var(--r-1);
  background: var(--banda);
  color: var(--banda-txt);
  font-size: 11.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.margem-item:hover .margem-dica,
.margem-item:focus-visible .margem-dica {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Sem margem sobrando, o trilho sai: não pode cobrir conteúdo. */
@media (max-width: 1500px) {
  .margem {
    display: none;
  }
}

/* --- Trilho estreito e ícones nas cores das marcas --- */

.margem {
  width: 56px;
  padding: 8px 0;
  gap: 4px;
  border-radius: 28px;
}

.margem-item {
  width: 40px;
  height: 40px;
}

/* O site é da casa: vai no azul do portal, que já se ajusta ao tema escuro. */
.margem-site {
  color: var(--azul);
}

.margem-site:hover {
  background: var(--azul-vel);
  color: var(--azul);
}

/* Cada rede na sua cor: é marca registrada, não decoração. */
.margem-zap {
  color: #1faf52;
}

.margem-insta {
  color: #c13584;
}

.margem-tube {
  color: #e0342a;
}

.margem-zap:hover {
  background: color-mix(in srgb, #1faf52 14%, transparent);
  color: #1faf52;
}

.margem-insta:hover {
  background: color-mix(in srgb, #c13584 14%, transparent);
  color: #c13584;
}

.margem-tube:hover {
  background: color-mix(in srgb, #e0342a 14%, transparent);
  color: #e0342a;
}

/* No tema escuro as três clareiam, senão somem no fundo. */
:root[data-tema="escuro"] .margem-zap {
  color: #35d16b;
}
:root[data-tema="escuro"] .margem-insta {
  color: #e469b0;
}
:root[data-tema="escuro"] .margem-tube {
  color: #ff5c52;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .margem-zap {
    color: #35d16b;
  }
  :root:not([data-tema="claro"]) .margem-insta {
    color: #e469b0;
  }
  :root:not([data-tema="claro"]) .margem-tube {
    color: #ff5c52;
  }
}

/* =========================================================
   Trocar de vara — só na sessão de manutenção
   O portal é de uma vara por sessão; quem mantém precisa abrir
   qualquer uma. O botão é discreto de propósito: é ferramenta
   interna dentro de uma tela que pertence à vara.
   ========================================================= */

.trocavara {
  position: relative;
  flex: none;
}

.trocavara-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 30px;
  padding: 0 10px;
  white-space: nowrap;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--banda-txt-2);
  background: var(--banda-vel);
  border: 1px solid var(--banda-fio);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.trocavara-btn .ic {
  width: 15px;
  height: 15px;
}

.trocavara-btn:hover {
  color: var(--banda-txt);
  background: var(--banda-vel-2);
  border-color: var(--banda-fio-2);
}

.trocavara-btn[aria-expanded="true"] {
  color: var(--banda-txt);
  background: var(--banda-vel-2);
  border-color: var(--ouro);
}

.trocavara-btn:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

/* --- Painel --- */

.trocavara-painel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(420px, calc(100vw - 32px));
  padding: 12px;
  background: var(--sup-0);
  border: 1px solid var(--fio);
  border-radius: var(--r-3);
  box-shadow: var(--elev-3);
  animation: trocaAbre 0.16s var(--ease-saida) both;
}

@keyframes trocaAbre {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

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

.trocavara-busca {
  position: relative;
  display: block;
}

.trocavara-busca .ic {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--txt-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.trocavara-busca input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--txt-1);
  background: var(--sup-1);
  border: 1px solid var(--fio);
  border-radius: var(--r-1);
}

.trocavara-busca input:focus {
  outline: none;
  background: var(--sup-0);
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--foco-vel);
}

.trocavara-nota {
  margin: 10px 2px 6px;
  font-size: 11.5px;
  color: var(--txt-3);
}

.trocavara-lista {
  max-height: min(58vh, 420px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.trocavara-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 12px;
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background 0.14s var(--ease);
}

.trocavara-item:hover {
  background: var(--sup-2);
}

.trocavara-item:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

.trocavara-item[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.trocavara-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-1);
}

.trocavara-sub {
  grid-column: 1;
  font-size: 11.5px;
  color: var(--txt-3);
}

.trocavara-n {
  grid-row: span 2;
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
  font-variant-numeric: tabular-nums;
}

/* A vara aberta agora fica marcada: o trocador mostra onde se está. */
.trocavara-item.e-atual {
  background: color-mix(in srgb, var(--azul) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--azul);
}

.trocavara-item.e-atual .trocavara-nome {
  color: var(--azul);
}

@media (max-width: 900px) {
  .trocavara-btn span {
    display: none;
  }

  .trocavara-btn {
    padding: 0 9px;
  }
}

/* Dias até a entrega, num processo ainda sem laudo: o número é o tempo corrido
   até hoje, não um prazo cumprido. Fica em tom secundário para não se confundir
   com o dos entregues. */
.col-num-curso {
  color: var(--txt-3);
}

.col-num-curso::after {
  content: "…";
  margin-left: 1px;
}

/* Com sete colunas, o número do processo começou a quebrar no meio. Ele é uma
   unidade — CNJ, 25 dígitos — e não se lê partido em duas linhas. */
.tabela .proc-btn {
  white-space: nowrap;
}

/* Sete colunas: as cinco da direita são curtas — datas e números — e não
   precisam dos 20px de respiro que a coluna do processo precisa. */
.tabela th.col-data,
.tabela td.col-data,
.tabela th.col-num,
.tabela td.col-num,
.tabela th.col-prazo,
.tabela td.col-prazo {
  padding-left: 14px;
  padding-right: 14px;
}

/* =========================================================
   Lista de processos em linha única
   Sete colunas iguais em toda a página: nosso número, o do
   CNJ, as partes em iniciais, a etapa e as três datas. Os
   rótulos ficam no cabeçalho da lista, uma vez só.
   ========================================================= */

.lista-seca {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-cabeca,
.item-linha {
  display: grid;
  /* Setor e status em colunas próprias: onde o processo está dentro da JRS e em
     que estado ele está na perícia são perguntas diferentes. */
  /* A coluna do processo leva o número, o copiar e o olho de abrir o histórico. */
  grid-template-columns: 62px 262px minmax(90px, 1fr) auto 82px 84px 112px 60px;
  align-items: center;
  gap: 0 18px;
  width: 100%;
  text-align: left;
}

.lista-cabeca {
  padding: 0 12px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--fio);
  color: var(--txt-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.item-linha {
  min-height: 30px;
  padding: 0 12px;
  font-family: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fio);
  cursor: pointer;
  transition: background 0.14s var(--ease);
}

.item-linha:hover {
  background: var(--sup-2);
}

.item-linha:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

/* Nosso número: o mesmo que o sistema interno mostra, para a vara poder citá-lo
   ao pedir informação. Fica discreto — quem lê a lista procura pelo número do
   CNJ, não por ele. */
.item-ref {
  color: var(--txt-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.item-num {
  color: var(--txt-1);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Iniciais no lugar do nome: o nome inteiro fica no title e no histórico. */
.item-partes {
  overflow: hidden;
  color: var(--txt-3);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-cel {
  color: var(--txt-2);
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lista-cabeca span:nth-child(n + 5) {
  text-align: right;
}

.item-cel-dias {
  color: var(--azul);
  font-weight: 600;
}

/* --- Abas das duas listas --- */

.abas-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--fio);
}

.abas {
  display: flex;
  gap: 4px;
}

/* A aba é o título da lista: mesma serifa dos títulos de faixa, tamanho um
   degrau abaixo. A inativa fica em tinta fraca e só o fio dourado diz qual é a
   aberta — sem caixa, sem fundo, sem pastilha. */
.aba {
  position: relative;
  /* Alvo maior e inativa em tinta de corpo: a 21px em --txt-3 a aba fechada
     lia como texto desligado, não como algo que se pode abrir. */
  padding: 4px 6px 14px;
  margin-bottom: -1px;
  font-family: Lora, Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--txt-2);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.aba + .aba {
  margin-left: 22px;
}

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

.aba.e-ativa {
  color: var(--txt-1);
  border-bottom-color: var(--ouro);
}

.aba:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Quantos há na lista, ao lado do nome — em Inter, porque é dado, e numa
   pastilha: solto, o número sumia ao lado de um título em serifa de 21px. */
.aba-n {
  display: inline-block;
  min-width: 26px;
  margin-left: 9px;
  padding: 2px 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--txt-2);
  background: var(--sup-2);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

/* Na aba aberta a pastilha veste o ouro da casa. */
.aba.e-ativa .aba-n {
  color: var(--ouro-txt);
  background: color-mix(in srgb, var(--ouro) 20%, transparent);
}

.abas-cabeca .faixa-nota {
  margin: 0 0 12px;
}

/* --- Paginação --- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.pag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-1);
  background: var(--sup-0);
  border: 1px solid var(--fio);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease);
}

.pag-btn .ic {
  width: 15px;
  height: 15px;
  color: var(--txt-3);
  transition: color 0.16s var(--ease), transform 0.16s var(--ease);
}

/* A seta do "Anterior" é a mesma do "Próxima", virada — um ícone, dois sentidos. */
#pagAnterior .ic {
  transform: scaleX(-1);
}

.pag-btn:hover:not([disabled]) {
  border-color: var(--azul);
  color: var(--azul);
}

.pag-btn:hover:not([disabled]) .ic {
  color: var(--azul);
}

.pag-btn:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.pag-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.pag-conta {
  margin: 0;
  font-size: 12.5px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

/* Telas estreitas: a linha vira quatro — nosso número e o setor em cima, o
   número do processo sozinho embaixo deles, partes e status depois, e as três
   datas por último —, e o cabeçalho de colunas some, porque já não descreve
   a linha.
   O número do processo é CNJ, 25 dígitos, e nunca se lê partido — por isso
   ganha a largura inteira da linha, em vez de dividir coluna com mais
   alguém: espremido, ele vazava por cima do selo do setor ao lado (o texto
   não cabia na própria caixa e pintava sobre a vizinha). E as duas colunas
   que esta regra não tinha lugar nenhum para (nosso número, o selo do setor)
   caíam por conta própria em cima do número do processo — dava para ver os
   dois escritos um sobre o outro. Aqui as oito colunas do cabeçalho recebem,
   todas, um lugar. */
@media (max-width: 1000px) {
  .lista-cabeca {
    display: none;
  }

  .item-linha {
    grid-template-columns: auto 1fr auto;
    grid-auto-rows: auto;
    gap: 4px 12px;
    padding: 12px;
  }

  .item-ref {
    grid-column: 1;
    grid-row: 1;
  }

  .item-marca {
    grid-column: 3;
    grid-row: 1;
  }

  .item-proc {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .item-partes {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  /* Status na linha das partes, à direita, logo abaixo do setor: os dois ficam
     empilhados na mesma coluna e se leem juntos. */
  .item-status {
    grid-column: 3;
    grid-row: 3;
  }

  .item-cel {
    grid-row: 4;
    text-align: left;
  }

  .item-cel-dias {
    text-align: right;
  }

  /* Rede de segurança: numa tela ainda mais estreita que o normal, o número
     encolhe com reticências em vez de voltar a vazar por cima da linha
     seguinte. O número inteiro continua a um toque, no botão de copiar. */
  .item-num {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
  }

  .pag-btn span {
    display: none;
  }
}

/* Sete colunas: as cinco da direita são curtas — datas e números — e não
   precisam dos 20px de respiro que a coluna do processo precisa. */
.tabela th.col-data,
.tabela td.col-data,
.tabela th.col-num,
.tabela td.col-num,
.tabela th.col-prazo,
.tabela td.col-prazo {
  padding-left: 14px;
  padding-right: 14px;
}

/* =========================================================
   Três datas por item e a carteira inteira, dez por página
   O item de lista responde, à direita, quando o processo
   entrou, quando o laudo saiu e quanto tempo levou entre as
   duas — na mesma ordem em toda a página.
   ========================================================= */

.item-datas {
  display: flex;
  align-items: baseline;
  gap: 22px;
}

.item-data {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 78px;
}

.item-data b {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.item-data small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* Os dias são o número que a vara procura: ficam em azul, os únicos coloridos
   da trinca, e separados por um fio do par de datas que os origina. */
.item-data-dias {
  min-width: 96px;
  padding-left: 22px;
  border-left: 1px solid var(--fio);
}

.item-data-dias b {
  color: var(--azul);
}

/* --- Paginação --- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

/* Rodapé das duas abas, na mesma altura: de um lado a paginação, do outro a nota
   do que sobrou. A altura é a do botão de página, o mais alto dos dois — é o que
   impede a página de pular quando a vara troca de aba. */
.lista-resto {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 20px 0 0;
}

.pag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-1);
  background: var(--sup-0);
  border: 1px solid var(--fio);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease);
}

.pag-btn .ic {
  width: 15px;
  height: 15px;
  color: var(--txt-3);
  transition: color 0.16s var(--ease), transform 0.16s var(--ease);
}

/* A seta do "Anterior" é a mesma do "Próxima", virada — um ícone, dois sentidos. */
#pagAnterior .ic {
  transform: scaleX(-1);
}

.pag-btn:hover:not([disabled]) {
  border-color: var(--azul);
  color: var(--azul);
}

.pag-btn:hover:not([disabled]) .ic {
  color: var(--azul);
}

.pag-btn:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.pag-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.pag-conta {
  margin: 0;
  font-size: 12.5px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

/* Telas estreitas: as três datas viram uma linha só, embaixo das partes. */
@media (max-width: 900px) {
  .item-datas {
    gap: 14px;
  }

  .item-data {
    min-width: 0;
    align-items: flex-start;
  }

  .item-data-dias {
    min-width: 0;
    padding-left: 14px;
  }

  .pag-btn span {
    display: none;
  }
}

/* Nosso número, acima do número do CNJ na gaveta: a vara cita um dos dois ao
   pedir informação, e o interno é o que a equipe procura mais rápido. */
.gaveta-ref {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--banda-fio);
  border-radius: var(--r-pill);
  background: var(--banda-vel);
  color: var(--banda-txt-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.gaveta-ref:empty {
  display: none;
}

/* Passo de troca de área: diz que a linha é um trânsito interno, e de onde veio. */
.evento-passo {
  margin: 2px 0 0;
  color: var(--txt-3);
  font-size: 11px;
}

/* A bolinha do passo herda a cor da área para a qual o processo foi — o mesmo
   código de cor da etiqueta de etapa, para a leitura ser uma só na página.
   O passo mais recente continua em ouro: ali a informação é "é aqui que está". */

/* --- Copiar o número do processo --- */

.item-num {
  padding: 0;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.item-num:hover {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.item-num:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

/* O número e o botão de copiar são uma coisa só: o botão fica encostado nele,
   sempre visível, porque copiar é a ação que a vara mais repete nesta tela. */
.item-proc {
  display: flex;
  align-items: center;
  /* Os dois botões pertencem ao número, não à coluna: encostados nele, a linha
     lê-se como uma coisa só. Com o ar de antes pareciam uma terceira coluna. */
  gap: 1px;
  min-width: 0;
}

.item-proc .item-copiar,
.item-proc .item-olho {
  width: 22px;
  height: 22px;
}

/* O porquê de um prazo alto: ícone discreto ao lado do número, a explicação na
   dica. Quem só quer o número não é interrompido por ela. */
.item-cel-dias {
  /* O ícone tem lugar guardado em toda linha, tenha ela explicação ou não. Sem
     isso, o número de quem tem ícone recuava 23px e a coluna deixava de ser uma
     régua: comparar 48 com 7 exigia procurar onde cada um começava. */
  display: grid;
  grid-template-columns: auto 18px;
  align-items: center;
  justify-content: end;
  gap: 5px;
}

/* Sem explicação, o lugar do ícone vai vazio na marcação — e não como trilha
   vazia da grade: assim a coluna fica reta mesmo que a grade não sobre. */
.item-info-vazio {
  display: block;
  width: 18px;
  height: 18px;
}

/* A cabeça recua o mesmo tanto, para "Dias" ficar sobre os números. */
.lista-cabeca span:nth-child(8) {
  padding-right: 23px;
}

.item-info {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--txt-3);
  background: none;
  border: 0;
  cursor: help;
  transition: color 0.14s var(--ease);
}

.item-info .ic {
  width: 14px;
  height: 14px;
}

.item-info:hover,
.item-linha:hover .item-info {
  color: var(--ouro-barra);
}

.item-info:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-radius: var(--r-1);
}

/* Abrir o histórico: o mesmo alvo da linha inteira, mas visível — a vara vê que
   há o que abrir sem precisar descobrir que a linha é clicável. */
.item-olho {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--txt-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
}

.item-olho .ic {
  width: 16px;
  height: 16px;
}

.item-olho:hover,
.item-linha:hover .item-olho {
  color: var(--azul);
}

.item-olho:hover {
  background: var(--azul-vel);
  border-color: color-mix(in srgb, var(--azul) 30%, transparent);
}

.item-olho:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

.item-copiar {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--txt-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
}

.item-copiar .ic {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
}

.item-copiar .ic-feito {
  opacity: 0;
}

.item-copiar:hover {
  color: var(--azul);
  background: var(--sup-1);
  border-color: var(--fio-2);
}

.item-copiar:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

/* Confirmação no próprio botão: o ícone vira um certo por 1,4 s. */
.item-copiar.copiado {
  color: var(--ok);
  background: none;
  border-color: transparent;
}

.item-copiar.copiado .ic-copia {
  opacity: 0;
}

.item-copiar.copiado .ic-feito {
  opacity: 1;
}

.item-copiar.falhou {
  color: var(--erro, #a33a2a);
}

/* A linha do processo aberto na gaveta fica marcada nas duas listas. */
.item-linha.aberta {
  background: var(--azul-vel);
  box-shadow: inset 2px 0 0 var(--azul);
}


/* Setor da bancada: onde o processo está agora dentro da JRS. Fica antes da
   etapa porque é o estado que explica a etapa — e, quando o laudo já saiu, a
   coluna de dias mostra travessão, porque contar do cadastro mediria o ciclo
   anterior; o tempo no setor está no title. */
.item-marca {
  display: flex;
  justify-content: flex-end;
}

.selo-setor {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ouro-tinta, #8a6a23);
  background: color-mix(in srgb, var(--ouro) 14%, transparent);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.ficha .selo-setor {
  margin-left: 8px;
}

/* Linha vaga: a faixa de análise pericial guarda cinco lugares mesmo quando não
   há cinco perícias em curso, para a lista de baixo não pular de posição a cada
   troca de vara. A vaga tem o mesmo fio e a mesma altura da linha cheia. */
.item-vaga {
  pointer-events: none;
}

.item-vaga-dito {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--txt-3);
  font-size: 13px;
}

/* Situação: estado grosso do processo, em tinta fraca — quem manda na leitura da
   linha é a etapa, ao lado. A marca de esclarecimento ocupa esta mesma coluna. */
.item-situacao {
  color: var(--txt-3);
  font-size: 12px;
  white-space: nowrap;
}

/* Status: tinta fraca, alinhado à direita como as datas que vêm depois. */
.item-status {
  color: var(--txt-2);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

/* Sem setor (laudo entregue, perícia encerrada): um travessão, não a situação. */
.item-vazio {
  color: var(--txt-3);
  font-size: 12px;
}

.lista-cabeca span:nth-child(4) {
  text-align: right;
}

/* Repetição do mesmo passo no mesmo dia: a contagem no lugar de seis linhas. */
.evento-vezes {
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--txt-3);
  background: var(--sup-2);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Controle da foto do destaque
   A faixa troca de foto sozinha; isto é o atalho para quem
   não quer esperar. Mora sobre a foto, à direita, onde não
   há texto, e some quando só existe uma imagem.
   ========================================================= */

.foto-controle {
  position: absolute;
  /* No meio da faixa, logo acima do cartão de números — que sobe por cima do
     hero e engolia o controle quando ele ficava colado no pé. */
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  /* Acima da faixa de números, que também é 3 e vence o empate por vir depois
     no documento. */
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  /* Sem cápsula: só as setas e os pontos, soltos sobre a foto. Qualquer fundo
     ali — branco ou escuro — vira uma peça a mais competindo com o título, e
     muda de peso a cada cidade do rodízio. O que sustenta a leitura é a sombra
     projetada em cada elemento: ela acompanha a forma da seta e do ponto, e
     funciona tanto sobre a areia clara quanto sobre o morro escuro. */
  background: none;
  border: 0;
  filter: drop-shadow(0 1px 2px rgba(8, 14, 20, 0.7)) drop-shadow(0 0 8px rgba(8, 14, 20, 0.5));
}

.foto-seta {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.foto-seta .ic {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

/* Uma seta desenhada, dois sentidos. */
.foto-seta[data-passo="-1"] .ic {
  transform: scaleX(-1);
}

.foto-seta:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.foto-seta:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.foto-pontos {
  display: flex;
  align-items: center;
  gap: 8px;
}

.foto-ponto {
  width: 9px;
  height: 9px;
  padding: 0;
  background: rgba(255, 255, 255, 0.72);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s var(--ease), width 0.2s var(--ease);
}

.foto-ponto:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* O da vez vira um traço: a posição se lê sem contar bolinhas. */
.foto-ponto.e-atual {
  width: 24px;
  border-radius: var(--r-pill);
  background: var(--ouro);
}

.foto-ponto:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

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

/* =========================================================
   Gráfico de nomeações por mês
   Duas curvas sobre a mesma base, área esmaecida embaixo e
   um guia que segue o ponteiro. Desenho em SVG com viewBox
   fixo: a caixa estica, o traço e o rótulo não.
   ========================================================= */

.painel-serie {
  margin-top: 28px;
}

.serie {
  position: relative;
  margin: 0;
}

.serie-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Régua de leitura, não moldura: pontilhado fino e quase apagado. */
.serie-grade {
  stroke: var(--fio);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}

/* A linha do zero sustenta o desenho e é a única sólida. */
.serie-base {
  stroke: var(--fio-2);
  stroke-dasharray: none;
}

.serie-eixo,
.serie-mes {
  fill: var(--txt-2);
  font-family: Inter, system-ui, sans-serif;
  /* 16 no viewBox ≈ 12,5px na tela: o SVG é exibido a ~0,77 da escala. */
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.serie-linha {
  fill: none;
  filter: url(#sombraLinha);
  /* 3,2 no viewBox de 1000 — que a caixa reduz para ~2,4px na tela. Com 2,25 o
     traço afinava demais ao lado das colunas do painel vizinho. */
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.serie-nomeacoes {
  stroke: var(--azul);
}

/* As curvas entram desenhando, uma vez, quando o painel aparece. */
.serie-linha {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: serieDesenha 1.1s var(--ease-saida) forwards;
}

.serie-area {
  opacity: 0;
  animation: serieSurge 0.7s var(--ease) 0.5s forwards;
}

@keyframes serieDesenha {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes serieSurge {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .serie-linha,
  .serie-area {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.serie-guia-fio {
  stroke: var(--fio-2);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.serie-bola {
  stroke: var(--sup-0);
  stroke-width: 2;
}

.serie-bola-nomeacoes {
  fill: var(--azul);
}

/* A faixa de captura não pinta nada: só recebe o ponteiro. */
.serie-alvo {
  fill: transparent;
}

/* Leitura do mês apontado, presa ao topo e centrada na coluna. */
.serie-dica {
  position: absolute;
  top: -6px;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 8px 11px;
  background: var(--sup-0);
  border: 1px solid var(--fio);
  border-radius: var(--r-2);
  box-shadow: var(--elev-2);
  font-size: 12px;
  color: var(--txt-2);
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.serie-dica b {
  color: var(--txt-1);
  font-size: 12.5px;
}

.serie-dica span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
}

.serie-dica .chave {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* O olho do cartão: abre a lista dos processos que formam aquele número. Fica
   à direita do valor, em tinta fraca — o número é que manda no cartão. */
.numero-olho {
  display: grid;
  place-items: center;
  flex: none;
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--txt-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
}

.numero-olho .ic {
  width: 16px;
  height: 16px;
}

.numero-olho:hover {
  color: var(--azul);
  background: var(--sup-2);
  border-color: var(--fio);
}

.numero-olho:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

/* No cartão de fundo escuro a tinta fraca some: ali o olho usa o branco. */
.numero-escuro .numero-olho {
  color: var(--banda-fio-2);
}

.numero-escuro .numero-olho:hover {
  color: #fff;
  background: var(--banda-fio);
  border-color: var(--banda-fio-2);
}

/* A faixa de prazos ocupa a largura inteira, entre a lista e os gráficos de
   volume: responde de relance à pergunta que o prazo médio do trilho levanta e
   não responde — onde está a massa dos laudos. */
.painel-prazos {
  margin-top: 28px;
}

/* O tamanho da amostra recua: ele diz se a frase se sustenta, não é a frase. */
.prazo-amostra {
  color: var(--txt-3);
}

/* A resposta do painel, em tinta cheia, com o número no azul dos dias — o mesmo
   da coluna DIAS da lista logo acima, para os dois se lerem como a mesma
   grandeza. */
.prazo-frase {
  color: var(--txt-1);
}

.prazo-frase b {
  color: var(--azul-txt);
}

/* Rótulo, barra e régua em três linhas da mesma grade: as colunas são as
   mesmas, então tudo se alinha sem ninguém repetir a conta das larguras. */
.prazo-faixas {
  display: grid;
  grid-template-rows: auto 22px auto;
  gap: 0;
  margin-top: 18px;
}

/* A parte de cada faixa, acima da barra. O número manda, a contagem acompanha. */
/* Duas medidas lado a lado, separadas por um fio: à esquerda quantos laudos
   saíram naquele prazo, à direita a parte que isso representa. São a mesma coisa
   em escalas diferentes, e o fio diz isso melhor que um ponto no meio da frase. */
.prazo-rot {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0 0 9px 12px;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.prazo-medida {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

/* O olho fica na linha da unidade, sob o número: ali ele não se mete entre as
   duas medidas nem empurra a porcentagem para longe do fio. */
.prazo-sob {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

/* A porcentagem do outro lado do fio, no peso do número da esquerda mas em
   Inter: ela é leitura de escala, não o dado bruto. */
.prazo-pct {
  flex: none;
  padding-left: 16px;
  border-left: 1px solid var(--fio-2);
  color: var(--txt-1);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Numa faixa estreita — quatro colunas de celular cabem menos de 90px cada —
   a fração e a porcentagem não sobram lado a lado: mesmo com colunas iguais
   (ver desenharPrazos em app.js), a porcentagem, de largura fixa, brigava
   pelo mesmo espaço da fração e as duas se pintavam uma em cima da outra. A
   porcentagem desce para debaixo da fração, com fio em cima no lugar do fio
   ao lado. */
@media (max-width: 1000px) {
  .prazo-rot {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 2px;
    white-space: normal;
  }

  .prazo-medida {
    white-space: nowrap;
  }

  .prazo-pct {
    padding: 4px 0 0;
    border-left: 0;
    border-top: 1px solid var(--fio-2);
    font-size: 14px;
  }
}

/* O olho fica visível sempre, em tinta fraca: se só aparecesse no hover, quem
   não passasse o ponteiro nunca saberia que há o que abrir. */
.prazo-rot .ic {
  width: 15px;
  height: 15px;
  color: var(--txt-3);
  transition: color 0.14s var(--ease);
}

.prazo-rot:hover .ic,
.prazo-rot:focus-visible .ic {
  color: var(--azul);
}

.prazo-rot:hover b {
  color: var(--azul);
}

.prazo-rot:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* "32/91": o que saiu naquele prazo sobre o total. A fração diz a proporção sem
   prometer casa decimal — vale igual numa vara de noventa laudos e numa de sete,
   onde a porcentagem já não se sustenta. O numerador é o dado; o denominador é a
   base dele, e recua. */
.prazo-rot b {
  color: var(--txt-1);
  font-family: Lora, Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.prazo-de {
  color: var(--txt-3);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.prazo-rot em {
  color: var(--txt-3);
  font-size: 11.5px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* A barra é fina: ela mede uma proporção, não pede volume. */
.prazo-seg {
  grid-row: 2;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 2px solid var(--sup-1);
  cursor: pointer;
  transition: filter 0.16s var(--ease);
}

.prazo-seg:first-of-type {
  border-radius: 3px 0 0 3px;
}

.prazo-seg:last-of-type {
  border-right: 0;
  border-radius: 0 3px 3px 0;
}

.prazo-seg:hover {
  filter: brightness(1.08);
}

.prazo-seg:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* Os números de cada faixa na cor da faixa: assim o rótulo pertence ao pedaço
   de barra embaixo dele, e não ao vizinho. Os dois tons claros não repetem o
   preenchimento — 42% de azul sobre branco dá 2,1:1 de contraste e não se lê
   como texto. Eles usam a ponta escura da mesma cor, que é a mesma família sem
   deixar de ser legível. */
.prazo-rot.e-tom-0 b,
.prazo-rot.e-tom-0 .prazo-pct {
  color: color-mix(in srgb, var(--azul) 82%, var(--txt-1));
}

.prazo-rot.e-tom-1 b,
.prazo-rot.e-tom-1 .prazo-pct {
  color: var(--azul);
}

.prazo-rot.e-tom-2 b,
.prazo-rot.e-tom-2 .prazo-pct {
  color: var(--azul-txt);
}

.prazo-rot.e-tom-3 b,
.prazo-rot.e-tom-3 .prazo-pct {
  color: var(--ouro-txt);
}

/* Um azul só, do mais fundo ao mais claro: a ordem das faixas é uma régua, e
   cor por cor faria cada uma parecer categoria à parte. A última é o ouro da
   espera — é o prazo que a vara quer ver encolher. */
.prazo-seg.e-tom-0 {
  background: color-mix(in srgb, var(--azul) 82%, var(--txt-1));
}

.prazo-seg.e-tom-1 {
  background: var(--azul);
}

.prazo-seg.e-tom-2 {
  background: color-mix(in srgb, var(--azul) 42%, var(--sup-0));
}

.prazo-seg.e-tom-3 {
  background: var(--ouro-barra);
}

/* A régua: o intervalo de cada faixa. O dia de fechamento não vem em número à
   parte — ele já está escrito no rótulo ("6 a 10 dias"), e repeti-lo sobre a
   junção punha dois textos no mesmo lugar. */
.prazo-tick {
  grid-row: 3;
  min-width: 0;
  padding: 9px 8px 0 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--txt-3);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* O tracejado corre acima e abaixo da barra, nas duas linhas de texto; dentro
   dela quem separa é a folga entre os pedaços. Desenhar o tracejado por cima da
   cor sujaria o único elemento da faixa que é dado puro.

   Não é `border: dashed`: a borda tracejada do CSS não deixa escolher o tamanho
   do traço, e no fio fino do portal ela virava um pontilhado quase invisível.
   Com gradiente o traço tem 6px e a folga 5px — é o tamanho do traço, não a
   força da tinta, que faz a linha se enxergar de longe. Por isso o cinza pode
   ficar claro: ele separa sem competir com a barra, que é o dado. */
.prazo-rot,
.prazo-tick {
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--txt-3) 38%, transparent) 0 6px,
    transparent 6px 11px
  );
  background-size: 1px 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

/* A primeira junção não existe: ali é o começo, não um limite entre duas faixas. */
.prazo-rot:first-of-type,
.prazo-tick:first-of-type {
  padding-left: 2px;
  background-image: none;
}

@media (max-width: 720px) {
  .prazo-rot {
    gap: 8px;
    padding-left: 8px;
  }

  .prazo-tick {
    padding-left: 8px;
    font-size: 10px;
  }
}

/* --- Os dois gráficos lado a lado: um terço e dois terços --- */

.duas-series {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  margin-top: 28px;
}

.duas-series .painel-serie {
  margin-top: 0;
}

/* Abaixo de 1000px as colunas empilham: a de um terço ficaria estreita demais
   para caber ano, coluna e valor. */
@media (max-width: 1000px) {
  .duas-series {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Colunas do gráfico anual --- */

.barra {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: barraSobe 0.55s var(--ease-saida) both;
  animation-delay: var(--atraso, 0ms);
}

.barra {
  fill: url(#gradBarra);
}

@keyframes barraSobe {
  from {
    transform: scaleY(0);
    opacity: 0.4;
  }
}

/* Valor de cada coluna em tinta fraca; só o maior ano fica em tinta cheia. Uma
   fileira de números todos no mesmo peso não tem hierarquia — tem ruído. */
.serie-valor {
  fill: var(--txt-2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

/* --- Acabamento dos dois painéis de série --- */

/* O número que o painel resume, na serifa dos títulos: é ele que a vara leva da
   olhada rápida; o desenho explica como se chegou lá. */
.serie-total {
  margin: 4px 0 0;
  font-family: Lora, Georgia, serif;
  font-size: 15px;
  color: var(--txt-2);
}

.serie-total b {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
}

/* Rodapé do painel: diz o que ainda não fechou, para ninguém ler o período
   corrente como queda. */
.serie-pe {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: var(--txt-3);
}

.serie-pe:empty {
  display: none;
}

/* Coluna do período em curso: vazada e tracejada — contagem ainda aberta. */
.barra.e-parcial {
  fill: color-mix(in srgb, var(--azul) 12%, transparent);
  stroke: var(--azul);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.barra.e-parcial + .serie-valor {
  fill: var(--txt-3);
}

/* Fim da curva mensal: bolinha vazada no mês que ainda corre. */
.serie-agora {
  fill: var(--sup-0);
  stroke: var(--azul);
  stroke-width: 2;
}

/* Um ponto e o número em cada mês: a curva dá a forma, o rótulo dá o valor sem
   depender do ponteiro — que no toque não existe. Número um degrau abaixo do
   eixo, para marcar o dado sem competir com a curva. */
.serie-ponto {
  fill: var(--sup-0);
  stroke: var(--azul);
  stroke-width: 1.8;
}

.serie-valor {
  fill: var(--txt-2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* Eixo e meses com a mesma voz do cabeçalho de tabela: caixa alta discreta. */
.serie-eixo,
.serie-mes {
  letter-spacing: 0.04em;
}

/* --- Os dois gráficos sem cartão ---
   Nada de moldura, fundo nem sombra: são figuras da página, não painéis. O que
   separa um do outro é o espaço entre eles, e o que segura cada um é o próprio
   desenho — caixa branca sobre fundo claro só empilhava borda em cima de borda. */

.painel-serie {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.painel-serie .painel-cabeca {
  padding: 0 0 14px;
  border-bottom: 0;
}

.painel-serie .barras,
.painel-serie .serie {
  padding: 0;
}

.duas-series {
  /* Corte explícito entre a lista e os gráficos: são dois assuntos e o espaço
     sozinho não estava separando. Fio no token das divisórias, não cor literal. */
  gap: 0;
  margin-top: 44px;
  padding-top: 40px;
  /* Divisória com peso: 2px no fio forte. O fio de 1px claro serve para separar
     linha de lista; aqui ele separa blocos, e sumia. */
  border-top: 2px solid var(--fio-2);
}

/* O mesmo fio, de pé, entre os dois desenhos. O respiro vem do recuo de cada
   lado — divisória, não moldura: segue sem fundo, sem caixa e sem sombra. */
.duas-series > .painel-serie:first-child {
  padding-right: 34px;
}

.duas-series > .painel-serie + .painel-serie {
  padding-left: 34px;
  border-left: 2px solid var(--fio-2);
}

/* Empilhados, o fio de pé vira deitado: separar continua valendo, muda a direção. */
@media (max-width: 1000px) {
  .duas-series > .painel-serie:first-child {
    padding-right: 0;
    padding-bottom: 30px;
  }

  .duas-series > .painel-serie + .painel-serie {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 2px solid var(--fio-2);
  }
}

/* =========================================================
   Modal do período
   Abre do gráfico: a coluna de um mês ou de um ano leva à
   lista dos processos que a formam. Camada acima da página,
   abaixo da gaveta — o histórico continua sendo o mais fundo.
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  /* A trilha precisa ser presa à altura da tela. Sem isto ela cresce com o
     conteúdo, o `max-height: 100%` da caixa passa a valer sobre uma trilha de
     2.146px e nada rola: a lista de quarenta peritos simplesmente saía pela
     borda de baixo, sem barra e sem rodapé. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  /* Presa ao alto, não centrada: a altura da caixa muda com o que há dentro —
     sete laudos numa faixa, vinte noutra, quarenta peritos numa terceira — e
     centrada isso faz a borda de cima subir e descer a cada abertura. Com o
     topo fixo, o título e o botão de fechar caem sempre no mesmo lugar da tela,
     e é para eles que o olho vai primeiro. */
  align-items: start;
  justify-items: center;
  padding: clamp(16px, 7vh, 72px) 16px clamp(16px, 4vh, 48px);
}

.modal-veu {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 20, 0.5);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.modal.aberto .modal-veu {
  opacity: 1;
}

.modal-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Uma largura só para todo modal do portal — a caixa é sempre a mesma peça,
     seja ela a lista de peritos de um mês ou a de processos de uma média. E ela
     é a largura de que a maior das listas precisa, não uma escolha de gosto:
     48 + 250 + 110 + 160 + 74 + 78 + 104 + 52 de colunas, 84 de ar entre elas e
     24 de recuo da linha dão 984; o corpo do modal come mais 33 de recuo, 15 de
     barra de rolagem reservada e 2 de borda. Daí 1.140 — o que sobra vai para
     as partes, que é a coluna elástica. Abaixo disso a lista não cabe e o modal
     rola de lado, que é o que a vara não deve ter de fazer. */
  width: min(1140px, 100%);
  max-height: 100%;
  background: var(--sup-0);
  border: 1px solid var(--fio);
  border-radius: var(--r-3);
  box-shadow: var(--elev-4);
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition: opacity 0.2s var(--ease-saida), transform 0.2s var(--ease-saida);
}

.modal.aberto .modal-caixa {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .modal-veu,
  .modal-caixa {
    transition: none;
  }
}

.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--fio);
}

.modal-olho {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro-txt);
}

.modal-topo h2 {
  margin: 0;
  font-family: Lora, Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--txt-1);
}

/* "abril de 2026" vem em caixa baixa da fonte de dados e precisa virar título —
   mas só a primeira letra: `capitalize` escrevia "Abril De 2026". */
.modal-topo h2::first-letter {
  text-transform: uppercase;
}

.modal-corpo {
  min-height: 0;
  /* A barra ocupa 11px à direita; com 11px de recuo, o conteúdo fica à mesma
     distância das duas bordas. */
  padding: 4px 11px 0 22px;
  overflow-y: auto;
  /* Lugar reservado sempre: sem isto a lista salta 11px no instante em que a
     rolagem aparece, e a barra cobre a coluna de participação. */
  scrollbar-gutter: stable;
  /* Listas de quarenta peritos precisam dizer que continuam abaixo. O cinza de
     fio, que basta numa tabela larga, some contra o branco do modal. */
  scrollbar-color: var(--txt-3) transparent;
}

/* O topo do modal e as abas já fecham com um fio; o da lista, logo abaixo,
   dobrava a linha. */
.modal-corpo .lista-seca,
#pericias .lista-seca {
  border-top: 0;
}

.modal-corpo::-webkit-scrollbar-thumb {
  background: var(--txt-3);
  border-width: 2px;
}

.modal-corpo::-webkit-scrollbar-thumb:hover {
  background: var(--txt-2);
}

.modal-pe {
  margin: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--fio);
  font-size: 12px;
  color: var(--txt-3);
}

/* Cada período é alvo de clique: o cursor precisa dizer isso. */
.serie-alvo {
  cursor: pointer;
}

.serie-alvo:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* Coluna sob o ponteiro: a tinta fecha um degrau, como nas linhas de lista. */
.modal-corpo {
  overflow-x: auto;
}

/* =========================================================
   Falar com o perito — faixa de contato
   Quem assina à esquerda, por onde falar à direita, em lista.
   Sem cartão: tipografia, fios finos e respiro.
   ========================================================= */

.perito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-areas:
    "quem canais"
    "nota canais";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 6vw, 96px);
  padding-top: 40px;
  border-top: 1px solid var(--fio-2);
}

.perito-quem {
  grid-area: quem;
  min-width: 0;
}

.perito-olho {
  margin: 0 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro-txt);
}

.perito-nome {
  margin: 0;
  font-family: Lora, Georgia, serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--txt-1);
}

.perito-cargo {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--txt-2);
}

/* Registros em texto corrido, separados por ponto: a assinatura do laudo,
   sem moldura. */
.perito-registros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

.perito-registros li + li::before {
  content: "·";
  margin: 0 10px;
}

.perito-registros small {
  margin-right: 5px;
  font-size: inherit;
}

.perito-nota {
  grid-area: nota;
  align-self: end;
  max-width: 46ch;
  margin: 28px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--txt-3);
}

/* Contatos como lista: fio em cima e embaixo de cada linha, rótulo à esquerda,
   dado à direita. Nada de caixa — a linha inteira é o clique. */
.perito-canais {
  grid-area: canais;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fio);
}

.perito-canal {
  display: grid;
  grid-template-columns: 18px 96px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  text-decoration: none;
  border-bottom: 1px solid var(--fio);
  transition: background-color 0.16s var(--ease);
}

.perito-canal:hover {
  background: var(--sup-3);
}

.perito-canal:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

.perito-canal-ic {
  display: grid;
  place-items: center;
  color: var(--txt-3);
  transition: color 0.16s var(--ease);
}

.perito-canal-ic .ic {
  width: 17px;
  height: 17px;
}

/* O rótulo e o dado vão lado a lado, nas colunas da linha. */
.perito-canal-txt {
  display: contents;
}

.perito-canal-txt small {
  font-size: 12.5px;
  color: var(--txt-3);
}

/* Sem algarismo tabular: ele existe para alinhar coluna de números, e aqui não
   há coluna nenhuma — o que fazia era abrir os dígitos do telefone e dar ao
   contato um ar de máquina de escrever, diferente de todo o resto da página. É a
   fonte padrão do portal, no mesmo corpo do texto dos cartões acima. */
.perito-canal-txt b {
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  color: var(--txt-1);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.16s var(--ease);
}

.perito-canal-seta {
  width: 16px;
  height: 16px;
  color: var(--txt-3);
  transition: transform 0.16s var(--ease), color 0.16s var(--ease);
}

.perito-canal:hover .perito-canal-ic,
.perito-canal:hover .perito-canal-txt b,
.perito-canal:hover .perito-canal-seta {
  color: var(--azul-txt);
}

.perito-canal:hover .perito-canal-seta {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .perito-canal,
  .perito-canal-seta,
  .perito-canal-ic,
  .perito-canal-txt b {
    transition: none;
  }

  .perito-canal:hover .perito-canal-seta {
    transform: none;
  }
}

@media (max-width: 900px) {
  .perito {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "quem"
      "canais"
      "nota";
    grid-template-rows: auto;
  }

  .perito-canais {
    margin-top: 28px;
  }

  .perito-nota {
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .perito-canal {
    grid-template-columns: 18px 72px minmax(0, 1fr) 16px;
    gap: 12px;
  }
}

/* --- Marco da perícia na linha do tempo ---
   Nomeação recebida, laudo entregue, perícia recusada ou cancelada: são os
   quatro fatos que a vara procura no histórico. Eles deixam de ter o mesmo peso
   do passo a passo interno — ganham o ouro da casa, um degrau de corpo e uma
   base para se apoiar. */

.evento-marco .evento-tit {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--txt-1);
}

.evento-marco .evento-data {
  color: var(--ouro-txt);
  font-weight: 600;
}

/* Fundo discreto atrás do marco, recuado até a margem do texto, para ele se
   destacar da coluna sem virar um cartão dentro da linha do tempo. */
.evento-marco {
  position: relative;
}

.evento-marco::before {
  z-index: 0;
}

.evento-marco .evento-tit,
.evento-marco .evento-txt,
.evento-marco .evento-data,
.evento-marco .evento-pe {
  position: relative;
  z-index: 1;
}

.evento-marco .evento-txt {
  color: var(--txt-2);
}

/* --- Botões de forma do gráfico --- */

.forma {
  display: inline-flex;
  padding: 2px;
  background: var(--sup-2);
  border-radius: var(--r-pill);
}

.forma button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  color: var(--txt-3);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.forma button .ic {
  width: 15px;
  height: 15px;
}

.forma button:hover {
  color: var(--txt-1);
}

.forma button.e-ativa {
  color: var(--azul);
  background: var(--sup-0);
  box-shadow: var(--elev-1);
}

.forma button:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* Ponto da linha: o mesmo azul do traço, com miolo claro para não virar borrão
   onde os meses se aproximam. */
.serie-ponto {
  fill: var(--sup-0);
  stroke: var(--azul);
  stroke-width: 2.8;
}

.serie-ponto.e-parcial {
  stroke-dasharray: 2 2;
}

/* Barra sob o ponteiro, quando a série está em colunas. */
.barra.e-ativa {
  fill: var(--azul);
}

.barra.e-parcial.e-ativa {
  fill: color-mix(in srgb, var(--azul) 20%, transparent);
}

/* Valor sobre a curva ou a coluna: contorno da cor do papel para o número
   continuar legível quando passa por cima de uma linha de grade. */
.serie-valor {
  paint-order: stroke fill;
  stroke: var(--sup-1);
  stroke-width: 3px;
  stroke-linejoin: round;
}


/* --- Acabamento das duas formas --- */

/* O azul do pé da coluna: o mesmo tom, um degrau mais claro. */
:root {
  --azul-fundo: #5b8ddb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --azul-fundo: #2f5da8;
  }
}

:root[data-tema="escuro"] {
  --azul-fundo: #2f5da8;
}

/* Coluna sob o ponteiro: sobe um fio e fecha a cor, em vez de piscar. */
.barra {
  transition: fill 0.16s var(--ease), transform 0.16s var(--ease-saida);
  transform-box: fill-box;
  transform-origin: bottom;
}

.barra.e-ativa {
  fill: var(--azul);
  transform: scaleY(1.03);
}

.barra.e-parcial.e-ativa {
  fill: color-mix(in srgb, var(--azul) 22%, transparent);
}

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

  .barra.e-ativa {
    transform: none;
  }
}

/* --- Faixa das nomeações da vara (registro do CNJ) --- */

.vara-nomeia {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 2px solid var(--fio-2);
}

/* A fonte é outra, e isso precisa estar escrito: o resto da página vem do
   sistema da JRS, esta faixa vem do registro do CNJ. */
.serie-fonte {
  margin: 6px 2px 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--txt-3);
}

/* Segunda série em barra: mesma escala da primeira, ouro em vez de azul. É por
   isso que ela pode ficar encostada na outra — as alturas são comparáveis. */
.barra-2 {
  fill: url(#gradBarra2);
}

/* Segunda série em linha: escala própria, com o eixo à direita. */
.serie-segunda {
  stroke: var(--ouro);
  stroke-dasharray: none;
  animation: none;
  filter: none;
}

.serie-ponto2 {
  fill: var(--sup-0);
  stroke: var(--ouro);
  stroke-width: 2.4;
}

.serie-eixo-2 {
  fill: var(--ouro-txt);
}

/* Legenda e seletor de período dividem o canto direito do cabeçalho. */
.cabeca-fim {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* O seletor de período é o mesmo botão do de forma, com palavra no lugar do
   ícone — "Ano" e "Mês" não têm desenho óbvio. */
.forma.periodo button {
  width: auto;
  padding: 0 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Virada de ano no eixo mensal: o mês que abre o ano leva o ano junto e vem em
   tinta cheia, para o olho achar a fronteira sem contar colunas. */
.serie-mes-virada {
  fill: var(--txt-2);
  font-weight: 600;
}

/* Recorte de ano no gráfico mensal: pastilha com o ano e um X para desfazer. */
.recorte {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 6px 0 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--azul);
  background: var(--azul-vel);
  border: 1px solid color-mix(in srgb, var(--azul) 28%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.recorte .ic {
  width: 13px;
  height: 13px;
}

.recorte:hover {
  background: color-mix(in srgb, var(--azul) 16%, transparent);
  border-color: var(--azul);
}

.recorte:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* =========================================================
   Matriz perito × mês
   Quem a vara nomeia e com que frequência. O número é o dado;
   o fundo é só intensidade, para a linha cheia saltar sem
   precisar ler célula por célula.
   ========================================================= */

/* O quadro fecha dos dois lados: o fio de cima o separa da faixa de nomeações,
   e o de baixo o separa das movimentações. Sem o de baixo, o bloco parecia
   escorrer para dentro da seção seguinte. */
.matriz-envolve {
  position: relative;
  margin-top: 34px;
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

.matriz-titulo {
  margin: 0 0 14px;
  font-family: Lora, Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--txt-1);
}

/* Cabeça do desenho de curvas, abaixo da tabela: o mesmo título da seção teria
   dito o mesmo duas vezes, então aqui ele nomeia o que o desenho acrescenta —
   a forma do ano, que a tabela de números não mostra. */
.matriz-curvas-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--fio);
}

.matriz-titulo-2 {
  margin-bottom: 0;
  font-size: 15px;
}

/* Na linha do trilho o chip continua com cápsula, e mais fechada que a do alto
   da faixa: ali ele cai sobre a parte carregada da foto — céu, prédio, mar — e
   os 74% de branco que bastavam sobre o claro deixavam a data se misturar ao
   fundo. Com 94% ele é uma plaqueta, e o que está escrito se lê de primeira. */
.numeros-linha .chip-nomeacoes {
  margin: 0;
  background: color-mix(in srgb, var(--sup-0) 94%, transparent);
  border-color: var(--fio);
}

.matriz-rolo {
  overflow-x: auto;
}

.matriz {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.matriz th,
.matriz td {
  padding: 7px 6px;
  text-align: center;
  border-bottom: 1px solid var(--fio);
}

.matriz thead th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-3);
  white-space: nowrap;
}

/* A coluna dos nomes segura a leitura: alinhada à esquerda e presa na rolagem
   horizontal, porque em doze meses a tabela passa da largura da tela. */
.matriz tbody th,
.matriz-canto {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 160px;
  padding-left: 0;
  text-align: left;
  background: var(--sup-1);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--txt-2);
  white-space: nowrap;
}

/* Os nomes descolam 10px da borda: a marca de ouro da linha da JRS fica na
   beira e o texto não encosta nela. */
.matriz tbody th {
  padding-left: 10px;
}

.matriz td {
  font-size: 12.5px;
  color: var(--txt-2);
  background: color-mix(in srgb, var(--azul) calc(var(--forca, 0) * 26%), transparent);
}

/* Célula cheia pede tinta mais firme; célula vazia não pede nada. */
.matriz td[style] {
  color: var(--txt-1);
  font-weight: 600;
}

.matriz-total {
  font-weight: 600;
  color: var(--txt-1);
  border-left: 1px solid var(--fio);
}

/* A linha da JRS é a que a vara procura: fica marcada, sem cor de alarme. */
.matriz tr.e-casa th,
.matriz tr.e-casa td {
  background: var(--ouro-vel);
}

/* O nome preso na rolagem (position: sticky) precisa de um fundo opaco: o
   `--ouro-vel` do resto da linha é translúcido de propósito, e nessa célula
   deixava passar por baixo os números dos meses que já deviam ter saído da
   tela — na rolagem horizontal, o nome da linha da JRS ficava com dígitos de
   outra coluna aparecendo por cima dele. Mesma cor, sem transparência. */
.matriz tr.e-casa th {
  background: color-mix(in srgb, var(--ouro) 16%, var(--sup-1));
  color: var(--txt-1);
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--ouro);
}

/* --- Linha de perito como controle ---
   Marcar na tabela e marcar no gráfico é a mesma seleção. O nome é um botão sem
   cara de botão: continua lendo como célula, mas recebe teclado e foco. */
.matriz tbody tr[data-nome] {
  cursor: pointer;
}

.matriz-escolha {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.matriz-escolha:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Apontada: o ponteiro está na linha ou na curva correspondente. Um fio à
   esquerda e o nome firme — o fundo fica com o calor das células, que é dado. */
.matriz tr.e-apontada th {
  color: var(--txt-1);
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--azul);
}

/* Marcada para comparação: o mesmo fio, mais grosso, e fica. */
.matriz tr.e-marcada th {
  color: var(--txt-1);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--azul);
}

/* Fora da comparação: some para o fundo, sem sumir da tabela — é daqui que a
   vara traz o perito de volta. */
.matriz tr.e-fora th,
.matriz tr.e-fora td {
  opacity: 0.38;
}

.matriz tr.e-fora.e-apontada th,
.matriz tr.e-fora.e-apontada td {
  opacity: 0.75;
}

.matriz tr.e-agrupado th,
.matriz tr.e-agrupado td {
  color: var(--txt-3);
  font-style: italic;
}

/* A legenda vira controle: clicar acende ou apaga a série. */
.legenda-botoes {
  display: flex;
  gap: 14px;
}

.legenda-botoes button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--txt-2);
  background: none;
  border: 0;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: color 0.16s var(--ease), opacity 0.16s var(--ease);
}

.legenda-botoes button:hover {
  color: var(--txt-1);
}

.legenda-botoes button:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

/* Série apagada: a chave de cor esvazia e o rótulo recua — o botão continua ali,
   dizendo que dá para acender de volta. */
.legenda-botoes button.e-apagada {
  color: var(--txt-3);
}

.legenda-botoes button.e-apagada .chave {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--fio-2);
}

/* Segunda linha do cabeçalho: o mês inteiro em dois números — nomeações e
   peritos distintos —, separados por um ponto médio. */
.matriz-resumo th {
  padding: 0 4px 9px;
  font-size: 10.5px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt-3);
  border-bottom: 1px solid var(--fio-2);
}

.matriz-resumo b {
  color: var(--txt-1);
  font-weight: 600;
}

/* O mesmo resumo no pé da tabela: o fio vai para cima, e a coluna dos nomes
   continua presa na rolagem horizontal como no corpo. */
.matriz-pe th {
  padding: 9px 4px 0;
  border-bottom: 0;
  border-top: 1px solid var(--fio-2);
}

.matriz tfoot th.matriz-canto {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--sup-1);
  text-align: left;
}

/* Cada número do resumo vem com o seu ícone: processo e pessoas. Dois números
   lado a lado, no mesmo corpo, não diriam qual é qual. */
.matriz-nomeacoes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--txt-1);
}

.matriz-nomeacoes .ic {
  width: 11px;
  height: 11px;
  color: var(--txt-3);
  opacity: 0.85;
}

.matriz-peritos {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 5px;
  color: var(--txt-3);
}

.matriz-peritos .ic {
  width: 11px;
  height: 11px;
  opacity: 0.8;
}

.matriz-resumo .matriz-canto span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* Código da unidade no CNJ, ao lado da abertura do título: é por ele que a vara
   se identifica no PJe, e cabe na mesma linha sem disputar com o nome. */
.titulo-codigo {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--txt-2);
  background: color-mix(in srgb, var(--sup-0) 70%, transparent);
  border: 1px solid var(--fio);
  border-radius: var(--r-pill);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* --- A matriz em colunas empilhadas --- */

.matriz-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

/* Sem quebra, o resumo + "mais nomeados" + 3/5/10 não cabem ao lado do título
   numa tela de celular — o grupo vazava para fora da faixa e ficava cortado,
   sem rolagem nem quebra para mostrar o resto. Aqui ele desce para a linha de
   baixo, do próprio tamanho, e o título deixa de disputar espaço com ele. */
@media (max-width: 720px) {
  .matriz-cabeca {
    flex-wrap: wrap;
  }

  .matriz-fim {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

.matriz-cabeca .matriz-titulo {
  margin: 0;
}

.matriz-grafico {
  margin: 40px 0 0;
}

/* Este SVG é o mais largo da tela (1570 unidades: doze meses e a coluna de
   nomes) — `width: 100%` (regra geral de .serie-svg) o encolhe junto com a
   tela, e numa tela de celular a letra ficava pequena demais para ler, como
   se o gráfico tivesse ficado longe.
   A largura vai na FIGURA, não no SVG: desenharMatrizGrafico (app.js) lê
   `figura.clientWidth` na hora de desenhar e calcula a altura do viewBox a
   partir dele, para o SVG (que continua em `width: 100%`, sem regra própria
   aqui) escalar do mesmo jeito que o resto da tela. Forçar largura só no SVG
   — uma tentativa anterior — descasava os dois cálculos: o SVG ficava mais
   largo do que o viewBox esperava, e o desenho aparecia encolhido, centrado
   num vão em branco. Alargando a FIGURA antes do desenho, os dois lados
   enxergam a mesma largura e o SVG ocupa a figura inteira sem sobra. 785px é
   a metade do que o gráfico pede por inteiro (1570) — letra bem maior que o
   encolhimento total, sem virar tamanho de desktop dentro do celular. */
@media (max-width: 1000px) {
  .matriz-grafico {
    width: 785px;
  }

  /* A figura, mais larga que o cartão, rola dentro dele — o cartão
     (#varaNomeia) é quem passa a ter a barra de rolagem, não a figura. */
  #varaNomeia {
    overflow-x: auto;
  }
}

/* Cada perito recebe um tom da mesma família: do azul cheio ao azul lavado, na
   ordem da tabela. Uma paleta de treze cores viraria mapa de metrô. */
/* Alvo do ponteiro. O fio visível tem 2px, e acertar 2px entre dez curvas que se
   cruzam é sorte, não interação — a dica com o nome do perito existia desde sempre
   e quase nunca era alcançada pela linha, só pela lista. Este traço largo e
   invisível recebe o ponteiro no lugar do fio. `pointer-events: stroke` faz o teste
   pelo traço mesmo sem pintura, sem depender de como o navegador trata a cor
   transparente. */
.trilha-alvo {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
}

.trilha-fio {
  fill: none;
  stroke: color-mix(in srgb, var(--azul) calc(100% - var(--tom) * 62%), var(--sup-1));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trilha-ponto {
  fill: color-mix(in srgb, var(--azul) calc(100% - var(--tom) * 62%), var(--sup-1));
}

/* O nome abre a linha, à esquerda do eixo: corpo maior e tinta mais firme que o
   rótulo de mês, porque é ele que identifica a trilha. */
.trilha-nome {
  fill: var(--txt-2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* A trilha da JRS é a que a vara procura: ouro e um traço mais grosso. */
.trilha.e-casa .trilha-fio {
  stroke: var(--ouro);
  stroke-width: 3;
}

.trilha.e-casa .trilha-ponto {
  fill: var(--ouro);
}

.trilha.e-casa .trilha-nome {
  fill: var(--ouro-txt);
  font-weight: 700;
}

.trilha {
  cursor: default;
  transition: opacity 0.14s var(--ease);
}

/* Com o ponteiro numa trilha, as demais recuam — treze linhas juntas viram
   emaranhado, e a leitura de uma delas exige as outras fora do caminho. */
.trilha.e-apagada {
  opacity: 0.18;
}

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

/* O número de cada mês só aparece na trilha apontada: dez linhas com doze
   números cada seriam cento e vinte rótulos sobre o desenho. */
.trilha-valor {
  fill: var(--txt-1);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill;
  stroke: var(--sup-1);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.14s var(--ease);
}

.trilha.e-ativa .trilha-valor {
  opacity: 1;
}

/* Perito marcado mostra os números o tempo todo, na cor da própria linha —
   escurecida o bastante para se ler como texto, e não como traço. */
.trilha.e-marcada .trilha-valor {
  opacity: 1;
  fill: color-mix(
    in srgb,
    color-mix(in srgb, var(--azul) calc(100% - var(--tom) * 62%), var(--sup-1)) 55%,
    var(--txt-1)
  );
}

.trilha.e-marcada.e-casa .trilha-valor {
  fill: color-mix(in srgb, var(--ouro) 55%, var(--txt-1));
}

.trilha.e-ativa .trilha-fio {
  stroke-width: 3;
}

.trilha.e-ativa .trilha-nome {
  fill: var(--txt-1);
  font-weight: 700;
}

/* O nome na coluna, quando o ponteiro está sobre a curva correspondente. */
.escolha.e-apontada .trilha-nome {
  fill: var(--txt-1);
  font-weight: 700;
}

.escolha.e-apontada .escolha-area {
  fill: color-mix(in srgb, var(--azul) 9%, transparent);
}

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

/* Total de cada perito nos doze meses, fechando a coluna dos nomes. */
.trilha-total {
  fill: var(--txt-1);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trilha.e-casa .trilha-total {
  fill: var(--ouro-txt);
}

/* Resumo da janela, no alto do quadro de peritos. */
.matriz-fim {
  display: flex;
  align-items: center;
  gap: 20px;
}

.matriz-resumo-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 12.5px;
  color: var(--txt-2);
}

.matriz-resumo-topo span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.matriz-resumo-topo .ic {
  width: 13px;
  height: 13px;
  color: var(--txt-3);
}

.matriz-resumo-topo b {
  color: var(--txt-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.matriz-resumo-topo small {
  font-size: 11.5px;
  color: var(--txt-3);
}

@media (max-width: 760px) {
  .matriz-resumo-topo small {
    display: none;
  }
}

/* --- Seleção de peritos para comparar --- */

.escolha {
  cursor: pointer;
}

/* A área de clique cobre a linha inteira do nome, não só o texto. */
.escolha-area {
  fill: transparent;
}

.escolha:hover .escolha-area {
  fill: color-mix(in srgb, var(--azul) 6%, transparent);
}

.escolha:focus-visible .escolha-area {
  fill: color-mix(in srgb, var(--azul) 10%, transparent);
  stroke: var(--foco);
  stroke-width: 1.5;
}

/* O quadrado carrega a cor da linha daquele perito: é por ele que o olho liga
   o nome ao traço no desenho. */
.escolha-cor {
  fill: color-mix(in srgb, var(--azul) calc(100% - var(--tom) * 62%), var(--sup-1));
}

.escolha.e-casa .escolha-cor {
  fill: var(--ouro);
}

/* Fora da comparação, o quadrado fica vazado — a cor continua reconhecível e a
   linha, ausente do desenho. */
.escolha.e-fora .escolha-cor {
  fill: none;
  stroke: color-mix(in srgb, var(--azul) calc(100% - var(--tom) * 62%), var(--sup-1));
  stroke-width: 1.5;
}

.escolha.e-casa.e-fora .escolha-cor {
  stroke: var(--ouro);
}

/* Perito fora da comparação: fica na lista, em tinta apagada, pronto para
   voltar com um clique. */
.escolha.e-fora .trilha-nome,
.escolha.e-fora .trilha-total {
  fill: var(--txt-3);
  opacity: 0.55;
}

/* --- Peritos do período, dentro do modal ---
   Mesma régua das listas de processos: cinco colunas, cabeça em versalete e o
   fio de sempre. A barra ocupa a coluna larga para o olho pegar de relance se a
   vara concentra em poucos peritos ou espalha — leitura que a lista ordenada
   sozinha exigiria contar número por número. */
.lista-cabeca-peritos,
.item-perito {
  grid-template-columns: 40px 132px minmax(80px, 1fr) 76px 84px;
}

/* Linhas de 34px nas listas do modal: a caixa mostra cinco de cada uma sem virar
   uma tela de rolagem. */
.item-linha.item-perito {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}


.item-perito {
  cursor: default;
}

.item-perito:hover {
  background: none;
}

.item-perito.e-casa .item-num {
  color: var(--ouro);
}

.perito-barra {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--sup-2);
  overflow: hidden;
}

.perito-barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--azul) 82%, var(--sup-0));
}

.item-perito.e-casa .perito-barra i {
  background: var(--ouro);
}

/* O número que a linha existe para dizer. */
.item-forte {
  color: var(--txt-1);
  font-size: 13px;
  font-weight: 600;
}

/* Cabeça: as duas colunas de número acompanham o alinhamento das células. */
.lista-cabeca-peritos span:nth-child(4),
.lista-cabeca-peritos span:nth-child(5) {
  text-align: right;
}

/* --- Processos do período, abaixo dos peritos --- */
/* Os dois blocos da caixa respondem a perguntas diferentes — a quem a vara
   nomeou e em que processos — e por isso se separam: fio de ponta a ponta e ar
   dos dois lados, para a segunda lista não parecer continuação da primeira. */
.modal-secao {
  margin-top: 26px;
  padding: 20px 12px 10px;
  border-top: 1px solid var(--fio-2);
  list-style: none;
}

.modal-secao-tit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--txt-1);
  font-family: Lora, Georgia, serif;
  font-size: 15px;
  font-weight: 600;
}

.modal-secao-tit span {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--sup-2);
  color: var(--txt-2);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.modal-secao .carregando {
  margin: 10px 0 0;
}

/* Linha de enchimento da última página: existe só para a caixa não encolher ao
   virar a página. Guarda a altura de uma linha e não mostra nada. */
.item-vago {
  cursor: default;
  border-bottom-color: transparent;
}

.item-vago:hover {
  background: none;
}

/* Nomeação que não é processo da JRS: a linha existe e diz o que se sabe dela —
   número, perito e nada mais. Não abre histórico, então não se comporta como
   clicável. */
.item-cnj {
  cursor: default;
}

.item-cnj:hover {
  background: none;
}

/* Número que não abre nada: mesma tinta e mesmo peso do que abre, sem o
   sublinhado e sem o cursor que prometem um clique. */
.item-num.e-so-leitura {
  cursor: default;
}

/* O perito ocupa a coluna do status nestas linhas: é o que responde "e esse,
   com quem ficou?". Em versalete, para não se confundir com "Entregue". */
.item-perito-cnj {
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.item-cnj.e-casa .item-perito-cnj {
  color: var(--ouro-txt);
  font-weight: 600;
}

.modal-paginacao {
  list-style: none;
}

/* O lugar da paginação enquanto a busca não volta. */
.esqueleto-pag {
  height: 50px;
}

.modal-paginacao .paginacao {
  margin-top: 14px;
}

.modal-aviso {
  padding: 12px;
  color: var(--txt-3);
  font-size: 12px;
  line-height: 1.5;
  list-style: none;
}

/* A lista de processos da página tem oito colunas e nasceu para a largura
   inteira; dentro da caixa padrão ela aperta o ar entre as colunas em vez de
   esticar a caixa. As duas listas próprias do modal têm a régua delas. */
#modalLista .lista-cabeca:not(.lista-cabeca-peritos),
#modalLista .item-linha:not(.item-perito) {
  /* A coluna do processo leva o número inteiro do CNJ mais os dois botões: 250px
     é o que isso mede. Abaixo disso o olho invadia a coluna das partes. */
  grid-template-columns: 48px 250px minmax(90px, 1fr) minmax(0, auto) 74px 78px 104px 52px;
  gap: 0 12px;
}

@media (max-width: 640px) {
  .lista-cabeca-peritos,
  .item-perito {
    grid-template-columns: 30px 104px minmax(50px, 1fr) 56px;
    gap: 0 12px;
  }

  .lista-cabeca-peritos span:nth-child(5),
  .item-perito .item-cel:last-child {
    display: none;
  }
}


/* A mesma ficha, solta na página: acompanha um ícone de qualquer lista, e não
   uma figura. Presa à janela, para não ser cortada pela borda do painel. */
.serie-dica.dica-solta {
  position: fixed;
  z-index: 70;
  max-width: 320px;
  white-space: normal;
  transform: translateY(-50%);
}

/* O quadrado de cor da ficha do prazo é o ouro da espera, não o azul de perito. */
.dica-cor.e-espera {
  background: var(--ouro-barra);
}

.dica-cor.e-obra {
  background: var(--azul);
}

/* A mesma dica, ancorada numa linha da lista de peritos em vez de numa coluna
   do gráfico: sai para a direita do nome e fica centrada na altura da linha. */
.serie-dica.e-lista {
  transform: translateY(-50%);
  max-width: 320px;
  white-space: normal;
}

/* O número da segunda série usa o ouro dela, escurecido para se ler como texto —
   é o que diz qual dos dois números pertence a qual barra do par. */
.serie-valor-2 {
  fill: color-mix(in srgb, var(--ouro) 62%, var(--txt-1));
}

/* --- A dica de um perito, para quem administra o portal ---
   Não é a mesma coisa que a dica de uma coluna: ali basta o valor, aqui é uma
   ficha — quem é, quanto pesa, em quantos meses aparece. Por isso ganha grade de
   duas colunas, com o rótulo à esquerda e o número alinhado à direita. */
.serie-dica.e-perito {
  padding: 11px 13px 10px;
  gap: 0;
}

.serie-dica .dica-quem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.serie-dica .dica-quem b {
  font-family: Lora, Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.dica-cor {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--azul) calc(100% - var(--tom) * 62%), var(--sup-1));
}

.dica-cor.e-casa {
  background: var(--ouro);
}

/* Precisa vencer `.serie-dica span { display: flex }`, senão os oito campos da
   ficha entram todos na mesma linha. */
.serie-dica .dica-grade {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 5px 24px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--fio);
}

.serie-dica .dica-grade span {
  display: block;
  font-size: 11.5px;
  color: var(--txt-3);
}

.serie-dica .dica-grade em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Diz por que este nome está aparecendo — a vara vê iniciais na mesma tela. */
.serie-dica .dica-nota {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* --- A ficha do prazo ---
   Cartão com seta apontando o ícone, sombra de painel solto e uma fita de duas
   cores antes dos números: o tamanho das duas faixas responde à pergunta do
   ícone — "por que 41 dias?" — antes de a vara ler qualquer número. */
.serie-dica.dica-prazo {
  --seta: 7px;
  max-width: 304px;
  padding: 13px 15px 12px;
  gap: 0;
  border-radius: var(--r-3);
  box-shadow: var(--elev-3);
  animation: dicaPrazoEntra 0.16s var(--ease-saida) both;
}

/* A seta é o próprio cartão: um quadrado girado, com as duas bordas do lado de
   fora, encostado na aresta por onde a ficha abriu. */
.serie-dica.dica-prazo::after {
  content: '';
  position: absolute;
  top: var(--seta-y, 50%);
  width: calc(var(--seta) * 2);
  height: calc(var(--seta) * 2);
  background: var(--sup-0);
  border: 1px solid var(--fio);
  transform: translateY(-50%) rotate(45deg);
}

.serie-dica.dica-prazo.e-seta-dir::after {
  right: calc(var(--seta) * -1);
  border-width: 1px 1px 0 0;
  border-radius: 0 3px 0 0;
}

.serie-dica.dica-prazo.e-seta-esq::after {
  left: calc(var(--seta) * -1);
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 3px;
}

/* O título é a resposta, e vai sozinho na linha: tentar espremer a janela da
   espera ao lado dele quebrava a frase em duas e não dizia de que era a data. */
.dica-prazo .dica-quem {
  display: block;
}

/* Cada linha da grade é rótulo + valor; o rótulo pode ter uma segunda linha —
   a janela da espera — recuada sob o texto, não sob o quadrado de cor. */
.dica-prazo .dica-grade span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 7px;
}

.dica-prazo .dica-grade small {
  grid-column: 2;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

/* O intervalo cheio fecha a conta: é o número que a vara acharia subtraindo as
   duas datas da linha, e por isso vem por último e em tinta fraca — explica o
   que a coluna não mostra, sem competir com o que ela mostra. */
.dica-prazo .dica-grade .dica-total {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--fio);
  color: var(--txt-3);
  font-weight: 500;
}

.dica-prazo .dica-fita {
  display: flex;
  gap: 2px;
  height: 6px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.dica-prazo .dica-fita i {
  display: block;
  border-radius: var(--r-pill);
  transform-origin: left;
  animation: dicaFitaAbre 0.34s var(--ease-saida) both;
}

/* A segunda faixa toma o que sobra em vez de repetir a conta em porcentagem:
   assim as duas somam a largura exata, com a folga do gap já descontada. */
.dica-prazo .dica-fita .e-obra {
  flex: 1;
  min-width: 0;
  background: var(--azul);
}

.dica-prazo .dica-fita .e-espera {
  background: var(--ouro-barra);
}

/* Sem o fio de cima da ficha do perito: a fita já separa o título dos números. */
.dica-prazo .dica-grade {
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  margin-top: 11px;
  padding-top: 0;
  border-top: 0;
}

/* O rótulo continua em tinta média; só o total desce para a fraca. */
.dica-prazo .dica-grade span {
  color: var(--txt-2);
}

/* O que a ficha existe para dizer, depois de dar os números: este laudo não
   entra na conta do prazo médio. Em ouro, a cor da espera. */
.dica-prazo .dica-fora {
  display: block;
  margin-top: 8px;
  color: var(--ouro-txt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.dica-prazo .dica-nota {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--fio);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
}

@keyframes dicaPrazoEntra {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.97);
  }
}

@keyframes dicaFitaAbre {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .serie-dica.dica-prazo,
  .dica-prazo .dica-fita i {
    animation: none;
  }
}

/* Diz o que os números 3, 5 e 10 escolhem — sozinhos, eles não se explicam.
   A mesma classe também rotula "O ano de cada perito, em curvas" — lá ela é a
   explicação do gráfico, não um comentário sobre botões, então continua
   visível no celular; esconder as duas juntas tirava as duas de cena. */
.matriz-etiqueta {
  margin: 0 -12px 0 0;
  font-size: 12.5px;
  color: var(--txt-3);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .matriz-fim .matriz-etiqueta {
    display: none;
  }
}

/* A coluna dos peritos tem cabeça como as listas da tela têm: versalete, fino,
   quase apagado — diz o que cada coluna é sem disputar com os nomes. */
.trilha-cabeca {
  fill: var(--txt-3);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* O fio que separa a lista do desenho: sem ele, o total de cada perito encosta
   nos números do eixo e os dois se leem como uma coisa só. */
.trilha-corte {
  stroke: var(--fio);
  stroke-width: 1;
}


/* O número do processo e o botão de copiar, no alto da gaveta. */
.gaveta-numero {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mesma peça das listas, sobre fundo escuro. */
.item-copiar-claro {
  color: rgba(255, 255, 255, 0.55);
}

.item-copiar-claro:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.item-copiar-claro.copiado {
  color: var(--ouro);
}

/* =========================================================
   Apresentação — vara que ainda não nomeou a JRS
   As listas, os gráficos e as movimentações da vara somem (não
   há o que mostrar); entra a JRS com os próprios números.
   ========================================================= */

.modo-apresentacao .abas-cabeca,
.modo-apresentacao #painelAnalise,
.modo-apresentacao #painelEntregues,
.modo-apresentacao #painelPrazos,
.modo-apresentacao #serie,
.modo-apresentacao #movimentacoes,
.modo-apresentacao #chipNomeacoes {
  display: none !important;
}

.apres-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.apres-tit {
  margin: 0;
  font-family: Lora, Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--txt-1);
}

.apres-rolo {
  overflow-x: auto;
}

.apres-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.apres-tabela th,
.apres-tabela td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--fio);
  text-align: left;
  white-space: nowrap;
}

.apres-tabela thead th {
  padding-top: 12px;
  padding-bottom: 10px;
  color: var(--txt-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--sup-1);
}

.apres-tabela tbody th {
  color: var(--txt-1);
  font-weight: 500;
}

.apres-tabela tbody tr:last-child > * {
  border-bottom: 0;
}

.apres-tabela tbody tr {
  transition: background-color 0.16s var(--ease);
}

.apres-tabela tbody tr:hover {
  background: var(--sup-3);
}

.apres-n {
  text-align: right !important;
  color: var(--txt-2);
}

.apres-barra-th {
  width: 40%;
}

.apres-barra-td {
  display: flex;
  align-items: center;
  gap: 12px;
}

.apres-barra-td b {
  min-width: 52px;
  font-weight: 600;
  color: var(--txt-1);
  text-align: right;
}

/* Barra fina, no azul do portal; a do tribunal da vara vai em ouro. */
.apres-barra {
  position: relative;
  flex: 1;
  height: 6px;
  min-width: 60px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--sup-2);
}

.apres-barra i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--azul);
}

.apres-tabela tr.e-seu {
  background: var(--ouro-vel);
}

.apres-tabela tr.e-seu:hover {
  background: color-mix(in srgb, var(--ouro) 22%, transparent);
}

.apres-tabela tr.e-seu .apres-barra i {
  background: var(--ouro-barra);
}

.apres-seu {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--ouro-vel);
  color: var(--ouro-txt);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.apres-varas {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.apres-varas li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--fio);
}

.apres-varas li:last-child {
  border-bottom: 0;
}

.apres-pos {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sup-2);
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.apres-varas li:first-child .apres-pos {
  background: var(--ouro-vel);
  color: var(--ouro-txt);
}

.apres-vara {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.apres-vara b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--txt-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apres-vara .apres-barra {
  flex: none;
  height: 4px;
}

.apres-vara-n {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.apres-vara-n b {
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-1);
}

.apres-vara-n small {
  font-size: 11.5px;
  color: var(--txt-3);
}

@media (max-width: 1080px) {
  .apres-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apres-tabela tbody tr {
    transition: none;
  }
}