/* ===========================================================================
   JARI PATOS — DESIGN SYSTEM · premium GOV tech
   Cantos quadrados, cor chapada, página branca; a profundidade vem da sombra.
   Fonte única dos tokens: DESIGN.md na raiz. Nenhuma cor literal nas views —
   o teste estático (tests/verificar.php) cobra isso.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --jr-fonte: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Cor — cromo escuro + acento quente (ver DESIGN.md) */
  --jr-tinta:          #08121F;
  --jr-tinta-2:        #0D1E33;
  --jr-texto:          #33404D;
  --jr-texto-2:        #5A6875;
  --jr-canvas:         #F7F9FA;
  --jr-card:           #FFFFFF;
  --jr-borda:          #D8E0E6;
  --jr-borda-forte:    #A9B8C4;

  --jr-primaria:       #3051A0;
  --jr-primaria-forte: #1F3A78;
  --jr-acento:         #F2A413;
  --jr-acento-texto:   #8A5605;
  --jr-ok:             #12805C;
  --jr-ok-texto:       #0C6647;
  --jr-erro:           #C8352A;
  --jr-erro-forte:     #A82A20;
  /* Cor de MARCA do gov.br — exceção documentada à paleta: botão oficial. */
  --jr-govbr:          #1351B4;
  --jr-govbr-forte:    #0C326F;

  /* Preenchimentos tonais (cor chapada do papel, clareada) */
  --jr-primaria-tom: color-mix(in srgb, var(--jr-primaria) 12%, white);
  --jr-acento-tom:   color-mix(in srgb, var(--jr-acento) 16%, white);
  --jr-ok-tom:       color-mix(in srgb, var(--jr-ok) 12%, white);
  --jr-erro-tom:     color-mix(in srgb, var(--jr-erro) 10%, white);

  /* Forma — canto quadrado é o sotaque GOV */
  --jr-r1: 4px;
  --jr-r2: 6px;
  --jr-r3: 8px;
  --jr-r4: 10px;

  /* Profundidade — 3 alturas + brilho de ação */
  --jr-sombra-1:
      0 1px 2px rgba(8, 18, 31, .05),
      0 6px 16px -8px rgba(8, 18, 31, .10);
  --jr-sombra-2:
      0 1px 2px rgba(8, 18, 31, .06),
      0 10px 24px -10px rgba(8, 18, 31, .18),
      0 24px 48px -20px rgba(8, 18, 31, .14);
  --jr-sombra-3:
      0 2px 4px rgba(8, 18, 31, .08),
      0 12px 24px -8px rgba(8, 18, 31, .18),
      0 32px 64px -16px rgba(8, 18, 31, .28),
      0 56px 96px -24px rgba(8, 18, 31, .30);
  --jr-brilho-acao:
      0 2px 6px rgba(31, 58, 120, .24),
      0 10px 24px -8px rgba(48, 81, 160, .38);

  /* A hairline de luz na aresta de superfícies escuras */
  --jr-aresta-escura: inset 0 1px 0 rgba(255, 255, 255, .07);

  /* Fundo escuro é tinta sólida com no máximo UM wash quase imperceptível. */
  --jr-wash-escuro: radial-gradient(90% 65% at 30% 0%, rgba(0, 168, 232, .13), transparent 60%);

  --jr-curva: cubic-bezier(.2, .7, .3, 1);
  --jr-tempo: 180ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--jr-fonte);
  background: var(--jr-canvas);
  color: var(--jr-texto);
  font-size: .9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--jr-primaria-forte); }

.eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jr-acento-texto);
  margin-bottom: .375rem;
}

/* ===========================================================================
   Botões — cor chapada; a hierarquia vem da sombra.
   =========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6875rem 1.375rem;
  border-radius: var(--jr-r1);
  font-family: var(--jr-fonte);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--jr-tempo) var(--jr-curva),
              border-color var(--jr-tempo) var(--jr-curva),
              color var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva),
              transform var(--jr-tempo) var(--jr-curva);
}
.btn:focus-visible { outline: 2px solid var(--jr-primaria); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:active { transform: translateY(1px); }

.btn-primaria {
  background: var(--jr-primaria);
  border-color: var(--jr-primaria-forte);
  color: #fff;
  box-shadow: var(--jr-brilho-acao);
}
.btn-primaria:hover {
  background: var(--jr-primaria-forte);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(31, 58, 120, .26), 0 14px 30px -8px rgba(48, 81, 160, .42);
}

.btn-neutro {
  background: var(--jr-card);
  border-color: var(--jr-borda);
  color: var(--jr-texto);
  box-shadow: var(--jr-sombra-1);
}
.btn-neutro:hover {
  border-color: var(--jr-borda-forte);
  color: var(--jr-tinta);
  transform: translateY(-1px);
  box-shadow: var(--jr-sombra-2);
}

/* Sobre fundo escuro. */
.btn-contorno {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}
.btn-contorno:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  transform: translateY(-1px);
}

.btn-perigo { background: var(--jr-erro); border-color: var(--jr-erro-forte); color: #fff; }
.btn-perigo:hover { background: var(--jr-erro-forte); }

.btn-grande { padding: .875rem 1.875rem; font-size: .9375rem; border-radius: var(--jr-r2); }
.btn-largo  { width: 100%; }
.btn-mini   { padding: .375rem .75rem; font-size: .8rem; }
.btn-icone  { padding: .6875rem; width: 2.625rem; height: 2.625rem; }

/* ===========================================================================
   Formulários
   =========================================================================== */
.form-grupo { margin-bottom: 1.25rem; }

.form-rotulo {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--jr-tinta);
  margin-bottom: .4375rem;
}
.form-opcional { font-weight: 400; color: var(--jr-texto-2); }

.form-controle {
  width: 100%;
  padding: .6875rem .9375rem;
  border: 1px solid var(--jr-borda);
  border-radius: var(--jr-r1);
  font-family: var(--jr-fonte);
  font-size: .9375rem;
  color: var(--jr-tinta);
  background: var(--jr-card);
  box-shadow: inset 0 1px 2px rgba(8, 18, 31, .04);
  transition: border-color var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva);
}
.form-controle:focus {
  outline: none;
  border-color: var(--jr-primaria);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jr-primaria) 16%, transparent),
              inset 0 1px 2px rgba(8, 18, 31, .04);
}
.form-controle-erro { border-color: var(--jr-erro); }
.form-controle-erro:focus {
  border-color: var(--jr-erro);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jr-erro) 14%, transparent);
}

.form-erro { margin-top: .375rem; font-size: .8125rem; font-weight: 600; color: var(--jr-erro); }
.form-dica { margin-top: .375rem; font-size: .8125rem; color: var(--jr-texto-2); }

.form-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1.25rem;
}

.otp-campo {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: .45em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: .875rem .5rem .875rem 1rem;
  border-radius: var(--jr-r2);
}

/* ===========================================================================
   Alertas e badges — retângulos de cor chapada.
   =========================================================================== */
.alerta {
  padding: .875rem 1.125rem;
  border-radius: var(--jr-r1);
  border: 1px solid;
  border-left-width: 3px;
  margin-bottom: 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--jr-sombra-1);
}
.alerta-sucesso { background: var(--jr-ok-tom); border-color: color-mix(in srgb, var(--jr-ok) 35%, white); border-left-color: var(--jr-ok); color: var(--jr-ok-texto); }
.alerta-erro    { background: var(--jr-erro-tom); border-color: color-mix(in srgb, var(--jr-erro) 30%, white); border-left-color: var(--jr-erro); color: var(--jr-erro-forte); }
.alerta-aviso   { background: var(--jr-acento-tom); border-color: color-mix(in srgb, var(--jr-acento) 45%, white); border-left-color: var(--jr-acento); color: var(--jr-acento-texto); }
.alerta-info    { background: var(--jr-primaria-tom); border-color: color-mix(in srgb, var(--jr-primaria) 30%, white); border-left-color: var(--jr-primaria); color: var(--jr-primaria-forte); }

/* ===========================================================================
   Toasts — as mensagens flash flutuam no canto e somem sozinhas (o erro fica).
   O container é reposicionado para o topo do <body> pelo app.js.
   =========================================================================== */
.toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  overflow: hidden;
  padding: .875rem 1rem;
  padding-right: 2.25rem;
  border-radius: var(--jr-r2);
  background: var(--jr-card);
  border: 1px solid var(--jr-borda);
  border-left: 3px solid var(--jr-primaria);
  box-shadow: var(--jr-sombra-3);
  color: var(--jr-tinta);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
  pointer-events: auto;
  /* estado inicial: fora da tela à direita; a classe .entrou traz para dentro */
  transform: translateX(calc(100% + 1.5rem));
  opacity: 0;
  transition: transform 260ms var(--jr-curva), opacity 260ms var(--jr-curva);
}
.toast.entrou { transform: translateX(0); opacity: 1; }
.toast.saindo { transform: translateX(calc(100% + 1.5rem)); opacity: 0; }

.toast-icone {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .0625rem;
}
.toast-icone svg { width: 20px; height: 20px; }
.toast-texto { flex: 1; }

.toast-fechar {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--jr-r1);
  background: transparent;
  color: var(--jr-texto-2);
  cursor: pointer;
  transition: background var(--jr-tempo) var(--jr-curva), color var(--jr-tempo) var(--jr-curva);
}
.toast-fechar:hover { background: var(--jr-canvas); color: var(--jr-tinta); }
.toast-fechar svg { width: 15px; height: 15px; }

/* Barra de progresso do tempo — some junto com o toast. */
.toast-progresso {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  opacity: .5;
}
.toast.contando .toast-progresso { animation: toast-progresso var(--toast-dur, 5000ms) linear forwards; }
@keyframes toast-progresso { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Cores por tipo: filete, ícone e barra na cor do papel. */
.toast-sucesso { border-left-color: var(--jr-ok); }
.toast-sucesso .toast-icone { color: var(--jr-ok); }
.toast-sucesso .toast-progresso { background: var(--jr-ok); }
.toast-erro { border-left-color: var(--jr-erro); }
.toast-erro .toast-icone { color: var(--jr-erro); }
.toast-erro .toast-progresso { background: var(--jr-erro); }
.toast-aviso { border-left-color: var(--jr-acento); }
.toast-aviso .toast-icone { color: var(--jr-acento-texto); }
.toast-aviso .toast-progresso { background: var(--jr-acento); }
.toast-info { border-left-color: var(--jr-primaria); }
.toast-info .toast-icone { color: var(--jr-primaria); }
.toast-info .toast-progresso { background: var(--jr-primaria); }

@media (max-width: 560px) {
  .toasts { top: .625rem; right: .625rem; left: .625rem; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 160ms linear; transform: none; }
  .toast.entrou { transform: none; }
  .toast.saindo { transform: none; }
  .toast.contando .toast-progresso { animation: none; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .25rem .625rem;
  border-radius: var(--jr-r1);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-neutro  { background: var(--jr-canvas); color: var(--jr-texto-2); border: 1px solid var(--jr-borda); }
.badge-info    { background: var(--jr-primaria-tom); color: var(--jr-primaria-forte); }
.badge-ok      { background: var(--jr-ok-tom); color: var(--jr-ok-texto); }
.badge-erro    { background: var(--jr-erro-tom); color: var(--jr-erro-forte); }
.badge-atencao { background: var(--jr-acento-tom); color: var(--jr-acento-texto); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .6875rem;
  border-radius: var(--jr-r1);
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid;
  box-shadow: var(--jr-sombra-1);
}
.chip-ok       { background: var(--jr-ok-tom); border-color: color-mix(in srgb, var(--jr-ok) 30%, white); color: var(--jr-ok-texto); }
.chip-primaria { background: var(--jr-primaria-tom); border-color: color-mix(in srgb, var(--jr-primaria) 28%, white); color: var(--jr-primaria-forte); }
.chip-atencao  { background: var(--jr-acento-tom); border-color: color-mix(in srgb, var(--jr-acento) 42%, white); color: var(--jr-acento-texto); }

/* ===========================================================================
   Cards e indicadores
   =========================================================================== */
.card {
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 70%, white);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-1);
  padding: 1.625rem;
  margin-bottom: 1.5rem;
}
.card-titulo {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--jr-tinta);
  margin-bottom: .625rem;
}
.card-realce { border-top: 3px solid var(--jr-acento); }
.texto-suave { color: var(--jr-texto-2); font-size: .875rem; margin-top: .625rem; }

.kpi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 70%, white);
  border-top: 3px solid var(--jr-borda-forte);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-1);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: transform var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--jr-sombra-2); }

.kpi-info { display: flex; flex-direction: column; }
.kpi-rotulo {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--jr-texto-2);
}
.kpi-numero {
  font-size: 2.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jr-tinta);
  font-variant-numeric: tabular-nums;
  margin-top: .125rem;
}
.kpi-icone {
  width: 52px;
  height: 52px;
  border-radius: var(--jr-r2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icone svg { width: 24px; height: 24px; }

.tom-primaria { border-top-color: var(--jr-primaria); }
.tom-primaria .kpi-icone { background: var(--jr-primaria-tom); color: var(--jr-primaria-forte); }
.tom-acento { border-top-color: var(--jr-acento); }
.tom-acento .kpi-icone { background: var(--jr-acento-tom); color: var(--jr-acento-texto); }
.tom-ok { border-top-color: var(--jr-ok); }
.tom-ok .kpi-icone { background: var(--jr-ok-tom); color: var(--jr-ok-texto); }
.tom-erro { border-top-color: var(--jr-erro); }
.tom-erro .kpi-icone { background: var(--jr-erro-tom); color: var(--jr-erro-forte); }

/* --------------------------------------------------------------------------
   Painel do cidadão: um cartão por VEÍCULO, cada um com o resumo das multas.
   -------------------------------------------------------------------------- */
.secao-titulo {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--jr-tinta);
  margin: .25rem 0 1rem;
}

.veiculos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.veiculo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  border-left: 3px solid var(--jr-primaria);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-1);
  padding: 1.25rem 1.375rem;
  text-decoration: none;
  color: var(--jr-texto);
  transition: transform var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva);
}
.veiculo-card:hover { transform: translateY(-3px); box-shadow: var(--jr-sombra-2); }
.veiculo-card:hover .servico-seta { opacity: 1; transform: translateX(0); }

.veiculo-placa {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--jr-tinta);
  font-variant-numeric: tabular-nums;
}
.veiculo-info { font-size: .875rem; }
.veiculo-info strong { color: var(--jr-tinta); }
.veiculo-meta { font-size: .75rem; color: var(--jr-texto-2); }

.veiculo-card-novo {
  border-left-color: var(--jr-borda-forte);
  border-style: dashed;
  align-items: flex-start;
  justify-content: center;
}
.veiculo-card-novo .veiculo-placa { color: var(--jr-primaria-forte); }

/* Banner escuro de boas-vindas — tinta sólida, momento de marca. */
.banner-escuro {
  background: var(--jr-tinta);
  background-image: var(--jr-wash-escuro);
  color: #fff;
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-2), var(--jr-aresta-escura);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.banner-escuro .eyebrow { color: var(--jr-acento); margin-bottom: .25rem; }
.banner-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.banner-texto { color: rgba(255, 255, 255, .72); font-size: .9rem; margin-top: .25rem; }
.banner-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.banner-chips .chip { box-shadow: none; }

/* ===========================================================================
   Tabelas
   =========================================================================== */
.tabela-rolavel { overflow-x: auto; }

.tabela { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
.tabela th {
  background: var(--jr-canvas);
  color: var(--jr-texto-2);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .6875rem;
  letter-spacing: .07em;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--jr-borda);
}
.tabela td {
  padding: .875rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 55%, white);
  color: var(--jr-tinta);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.tabela tbody tr { transition: background var(--jr-tempo) var(--jr-curva); }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--jr-primaria) 4%, white); }

@media (max-width: 820px) {
  .tabela-rolavel { overflow-x: visible; }

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

  .tabela-cartao tr {
    border: 1px solid var(--jr-borda);
    border-radius: var(--jr-r2);
    padding: .875rem;
    margin-bottom: .75rem;
    background: var(--jr-card);
    box-shadow: var(--jr-sombra-1);
  }
  .tabela-cartao td { border: 0; padding: 0 0 .5rem; }
  .tabela-cartao td:last-child { padding-bottom: 0; }

  .tabela-cartao td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jr-texto-2);
    margin-bottom: .125rem;
  }

  .tabela-cartao .celula-acao {
    padding-top: .625rem;
    border-top: 1px solid var(--jr-canvas);
    display: flex;
    gap: .5rem;
  }
  .tabela-cartao .celula-acao .btn { flex: 1; }
}

/* ===========================================================================
   Barra de ações da ficha
   =========================================================================== */
.ficha-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}
.ficha-acoes .acao-grupo { display: flex; flex-wrap: wrap; gap: .375rem; }

.acao {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  padding: .5rem .75rem;
  border-radius: var(--jr-r1);
  border: 1px solid var(--jr-borda);
  background: var(--jr-card);
  color: var(--jr-texto);
  text-decoration: none;
  box-shadow: var(--jr-sombra-1);
  transition: background var(--jr-tempo) var(--jr-curva),
              border-color var(--jr-tempo) var(--jr-curva),
              color var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva),
              transform var(--jr-tempo) var(--jr-curva);
}
.acao:hover { border-color: var(--jr-borda-forte); color: var(--jr-tinta); transform: translateY(-1px); box-shadow: var(--jr-sombra-2); }
.acao:focus-visible { outline: 2px solid var(--jr-primaria); outline-offset: 2px; }

.acao-voltar {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--jr-texto-2);
  padding-left: .375rem;
  padding-right: .5rem;
}
.acao-voltar:hover { background: color-mix(in srgb, var(--jr-borda) 35%, white); color: var(--jr-tinta); box-shadow: none; }

.acao-principal {
  background: var(--jr-primaria);
  border-color: var(--jr-primaria-forte);
  color: #fff;
  box-shadow: var(--jr-brilho-acao);
}
.acao-principal:hover { background: var(--jr-primaria-forte); color: #fff; }

.acao-nota { font-weight: 400; color: var(--jr-texto-2); }
.acao:hover .acao-nota { color: var(--jr-texto); }

.acao-divisor { width: 1px; align-self: stretch; min-height: 22px; background: var(--jr-borda); margin: 0 .125rem; }

@media (max-width: 820px) {
  .ficha-acoes { justify-content: flex-start; }
  .acao-divisor { display: none; }
  .ficha-acoes .acao-grupo { width: 100%; }
  .ficha-acoes .acao-grupo .acao { flex: 1; justify-content: center; }
}

/* ===========================================================================
   Casca da área logada
   =========================================================================== */
.app-casca { display: flex; min-height: 100vh; }

.sidebar {
  width: 264px;
  background: var(--jr-tinta);
  background-image: var(--jr-wash-escuro);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(8, 18, 31, .16), var(--jr-aresta-escura);
}

.sidebar-cabecalho {
  padding: 1.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .8125rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar-sigla {
  width: 44px;
  height: 44px;
  border-radius: var(--jr-r2);
  background: var(--jr-primaria);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8125rem;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px -6px rgba(48, 81, 160, .5);
}
.sidebar-nome { display: flex; flex-direction: column; line-height: 1.25; }
.sidebar-nome strong { font-size: .9375rem; font-weight: 800; letter-spacing: -0.01em; }
.sidebar-nome small {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--jr-acento);
}

.sidebar-menu {
  padding: 1.375rem .875rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.menu-grupo-titulo {
  font-size: .6563rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .42);
  padding: 0 .75rem .5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .6875rem 1rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--jr-r1);
  background: transparent;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  font-family: var(--jr-fonte);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--jr-tempo) var(--jr-curva),
              color var(--jr-tempo) var(--jr-curva);
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.ativo {
  background: rgba(255, 255, 255, .08);
  border-left-color: var(--jr-acento);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--jr-aresta-escura);
}
.nav-icone { width: 20px; height: 20px; flex-shrink: 0; }

.sidebar-rodape { padding: .875rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.nav-sair:hover { color: #FF9C93; }

.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Topbar de vidro claro: o conteúdo desliza por baixo dela. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 68px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(8, 18, 31, .08);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.migalhas { font-size: .875rem; font-weight: 700; color: var(--jr-tinta); white-space: nowrap; }
.topbar-direita { display: flex; align-items: center; gap: 1rem; }

/* Busca global da mesa — atalho "/" foca; Enter cai na lista filtrada. */
.topbar-busca {
  flex: 1;
  max-width: 420px;
  margin: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--jr-canvas);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 70%, white);
  border-radius: var(--jr-r1);
  padding: .4375rem .75rem;
  color: var(--jr-texto-2);
  transition: border-color var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva),
              background var(--jr-tempo) var(--jr-curva);
}
.topbar-busca:focus-within {
  background: var(--jr-card);
  border-color: var(--jr-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jr-primaria) 14%, transparent);
}
.topbar-busca svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-busca input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--jr-fonte);
  font-size: .8438rem;
  color: var(--jr-tinta);
  outline: none;
}

.usuario-pilula {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .3125rem .875rem .3125rem .3125rem;
  background: var(--jr-card);
  border: 1px solid var(--jr-borda);
  border-radius: var(--jr-r2);
  box-shadow: var(--jr-sombra-1);
}
.usuario-nome { font-size: .875rem; font-weight: 700; color: var(--jr-tinta); }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--jr-r1);
  background: var(--jr-primaria);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .875rem;
  flex-shrink: 0;
}

.conteudo { padding: 2rem; flex: 1; }

.cabecalho-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.titulo-pagina {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jr-tinta);
}
.subtitulo-pagina { font-size: .875rem; color: var(--jr-texto-2); margin-top: .25rem; }

/* --------------------------------------------------------------------------
   Cabeçalho móvel + gaveta
   -------------------------------------------------------------------------- */
.cabecalho-movel {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  background: var(--jr-tinta);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--jr-sombra-2);
}
.cabecalho-movel-titulo { font-weight: 800; font-size: .9375rem; }
.hamburguer {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: .5rem;
  display: flex;
}
.hamburguer svg { width: 24px; height: 24px; }

.sidebar-veu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 18, 31, .6);
  z-index: 45;
  opacity: 0;
  transition: opacity var(--jr-tempo) var(--jr-curva);
}
.sidebar-veu.ativo { display: block; opacity: 1; }

@media (max-width: 768px) {
  .app-casca { flex-direction: column; }
  .sidebar {
    position: fixed;
    left: -280px;
    z-index: 50;
    transition: left 220ms var(--jr-curva);
  }
  .sidebar.sidebar-aberta { left: 0; }
  .cabecalho-movel { display: flex; }
  .topbar { display: none; }
  .conteudo { padding: 1.125rem; }
  .cabecalho-pagina { flex-direction: column; align-items: flex-start; }
  .kpi-grade { grid-template-columns: 1fr; }
  .banner-escuro { padding: 1.375rem 1.25rem; }
}

/* ===========================================================================
   Autenticação — cartão flutuante em dois painéis sobre página CLARA.
   =========================================================================== */
.auth-fundo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--jr-canvas);
}

.auth-cartao {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: 5fr 6fr;
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  border-radius: var(--jr-r4);
  box-shadow: var(--jr-sombra-3);
  overflow: hidden;
}

/* Painel institucional: o único momento escuro da tela. */
.auth-painel {
  background: var(--jr-tinta);
  background-image: var(--jr-wash-escuro);
  color: #fff;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--jr-aresta-escura);
}
.auth-painel .eyebrow { color: var(--jr-acento); }
.auth-orgao {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: #fff;
}
.auth-lista { list-style: none; display: flex; flex-direction: column; gap: .875rem; margin-top: auto; }
.auth-lista li {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  font-size: .8438rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.5;
}
.auth-check {
  width: 20px;
  height: 20px;
  border-radius: var(--jr-r1);
  background: rgba(48, 81, 160, .3);
  color: #7FD6EA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .0625rem;
  font-size: .6875rem;
  font-weight: 800;
}

.auth-form-lado { padding: 2.25rem 2.25rem 2rem; }

.auth-titulo {
  font-size: 1.4375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jr-tinta);
  margin-bottom: .375rem;
}
.auth-texto { color: var(--jr-texto-2); font-size: .9rem; margin-bottom: 1.375rem; }
.auth-alternativa {
  margin-top: 1.375rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--jr-borda);
  font-size: .875rem;
  color: var(--jr-texto-2);
}
.auth-reenvio { margin-top: .75rem; }

/* Divisor "ou" entre o código por e-mail e o gov.br. */
.auth-ou {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: 1.125rem 0;
  color: var(--jr-texto-2);
  font-size: .8125rem;
}
.auth-ou::before,
.auth-ou::after { content: ''; flex: 1; height: 1px; background: var(--jr-borda); }

/* Botão oficial do gov.br: azul da marca federal, chapado. */
.btn-govbr { background: var(--jr-govbr); border-color: var(--jr-govbr-forte); color: #fff; }
.btn-govbr:hover { background: var(--jr-govbr-forte); color: #fff; transform: translateY(-1px); }
.btn-govbr strong { font-weight: 800; font-style: italic; }

@media (max-width: 760px) {
  .auth-cartao { grid-template-columns: 1fr; max-width: 480px; }
  .auth-painel { padding: 1.5rem 1.75rem; gap: .75rem; }
  .auth-lista { display: none; }
  .auth-form-lado { padding: 1.75rem 1.75rem 1.5rem; }
}

/* ===========================================================================
   Site público
   =========================================================================== */
.site-corpo { background: var(--jr-canvas); }

/* Miolo: o container central que alinha faixa, cabeçalho e conteúdo na MESMA
   largura — nada de elemento colado na borda da tela. */
.miolo {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Faixa governamental fina — o sotaque institucional acima de tudo. */
.faixa-gov {
  background: var(--jr-tinta);
  color: rgba(255, 255, 255, .78);
  font-size: .75rem;
  padding: .4375rem clamp(1rem, 4vw, 1.5rem);
  box-shadow: var(--jr-aresta-escura);
}
.faixa-gov-orgao { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; white-space: nowrap; }
.faixa-gov-orgao strong { color: #fff; font-weight: 700; }
.faixa-gov-divisor { width: 1px; height: .875rem; background: rgba(255, 255, 255, .25); }
.faixa-gov-curto { display: none; }   /* versão curta, só no celular */
.faixa-gov-links { display: flex; gap: 1.125rem; white-space: nowrap; }
.faixa-gov-links a {
  color: var(--jr-acento);
  text-decoration: none;
  font-weight: 700;
}
.faixa-gov-links a:hover { text-decoration: underline; }

/* Cabeçalho de vidro CLARO, colado no topo — o site é branco; a tinta fica
   para o hero e para a faixa institucional. */
.site-cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: .9375rem clamp(1rem, 4vw, 1.5rem);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(8, 18, 31, .08);
  box-shadow: 0 6px 20px -12px rgba(8, 18, 31, .18);
}
.site-marca { display: flex; align-items: center; gap: .9375rem; text-decoration: none; color: var(--jr-tinta); }

/* A logomarca OFICIAL da STTRANS — nada de sigla inventada. */
.site-marca-logo { height: 42px; width: auto; display: block; }
.site-marca-divisor { width: 1px; height: 2rem; background: var(--jr-borda); }

.site-marca-sigla {
  width: 48px;
  height: 48px;
  border-radius: var(--jr-r2);
  background: var(--jr-primaria);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px -6px rgba(48, 81, 160, .5);
}
.site-marca-texto { display: flex; flex-direction: column; line-height: 1.3; }
.site-marca-texto strong { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.015em; }
.site-marca-texto small {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--jr-texto-2);
}
.site-nav { display: flex; align-items: center; gap: .375rem; }

/* Links de navegação: texto firme, sublinhado de 2px no hover/atual. */
.site-nav-link {
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--jr-texto);
  text-decoration: none;
  border-radius: var(--jr-r1);
  border-bottom: 2px solid transparent;
  transition: color var(--jr-tempo) var(--jr-curva),
              border-color var(--jr-tempo) var(--jr-curva),
              background var(--jr-tempo) var(--jr-curva);
}
.site-nav-link:hover { color: var(--jr-primaria-forte); border-bottom-color: var(--jr-primaria); }
.site-nav .btn-primaria { margin-left: .5rem; }

/* --------------------------------------------------------------------------
   Hero — o momento de marca: tinta sólida, vitrine flutuando.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--jr-tinta);
  background-image: var(--jr-wash-escuro);
  color: #fff;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(3.5rem, 8vw, 5.5rem);
  overflow: hidden;
}
.hero-grade {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-conteudo { min-width: 0; }
.hero .eyebrow { color: var(--jr-acento); }
.hero-titulo {
  font-size: clamp(1.875rem, 4.2vw, 2.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 1.125rem;
}
.hero-texto {
  font-size: 1.0313rem;
  color: rgba(255, 255, 255, .75);
  max-width: 540px;
  margin-bottom: 1.75rem;
}
.hero-acoes { display: flex; gap: .75rem; flex-wrap: wrap; }

.hero-selos {
  display: flex;
  gap: 1.375rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.375rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.selo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .68);
}
.selo svg { width: 16px; height: 16px; color: var(--jr-acento); flex-shrink: 0; }

/* A vitrine: dois cartões reais do produto, empilhados e levemente girados. */
.hero-vitrine { position: relative; min-height: 380px; }

.mock-card {
  position: absolute;
  background: var(--jr-card);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-3);
  padding: 1.375rem;
  width: min(360px, 92%);
  color: var(--jr-texto);
}
.mock-card-tras {
  top: 0;
  right: 0;
  transform: rotate(3.5deg);
  opacity: .92;
}
.mock-card-frente {
  bottom: 0;
  left: 0;
  transform: rotate(-2deg);
  z-index: 2;
  transition: transform var(--jr-tempo) var(--jr-curva);
}
.hero-vitrine:hover .mock-card-frente { transform: rotate(0deg) translateY(-4px); }

.mock-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .875rem;
}
.mock-ait {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jr-texto-2);
}
.mock-ait strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--jr-tinta);
  font-variant-numeric: tabular-nums;
}
.mock-desc {
  font-size: .8438rem;
  color: var(--jr-texto);
  line-height: 1.5;
  padding-bottom: .875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  margin-bottom: .875rem;
}

.mock-prazo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 700;
  color: var(--jr-ok-texto);
  margin-bottom: .4375rem;
}
.mock-prazo-trilho {
  height: 7px;
  border-radius: var(--jr-r1);
  background: color-mix(in srgb, var(--jr-borda) 55%, white);
  overflow: hidden;
  margin-bottom: 1rem;
}
.mock-prazo-barra {
  height: 100%;
  width: 72%;
  background: var(--jr-ok);
}
.mock-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero-grade { grid-template-columns: 1fr; }
  .hero-vitrine { min-height: 300px; max-width: 430px; }
  .mock-card-tras { right: -4%; }
}

/* --------------------------------------------------------------------------
   Faixa de números institucionais — meio afundada no hero.
   -------------------------------------------------------------------------- */
.faixa-numeros {
  max-width: 1140px;
  margin: -2.75rem auto 0;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  position: relative;
  z-index: 3;
}
.faixa-numeros-cartao {
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  overflow: hidden;
}
.numero-item {
  padding: 1.375rem 1.5rem;
  border-left: 1px solid color-mix(in srgb, var(--jr-borda) 55%, white);
}
.numero-item:first-child { border-left: 0; }
.numero-valor {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jr-tinta);
  font-variant-numeric: tabular-nums;
}
.numero-rotulo {
  font-size: .75rem;
  font-weight: 600;
  color: var(--jr-texto-2);
  margin-top: .125rem;
}

@media (max-width: 640px) {
  .numero-item { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--jr-borda) 55%, white); }
  .numero-item:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   Catálogo de serviços — cards no padrão dos portais estaduais, com o
   acabamento NexLink: borda quase invisível, muito respiro, seta que aparece.
   -------------------------------------------------------------------------- */
.servicos { padding: clamp(3rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 3rem) 0; max-width: 1140px; margin: 0 auto; }
.servicos-cabecalho { margin-bottom: 1.75rem; }

.servicos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.servico-card {
  position: relative;
  display: block;
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 55%, white);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-1);
  padding: 1.625rem 1.625rem 1.75rem;
  text-decoration: none;
  color: var(--jr-texto);
  transition: transform var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva),
              border-color var(--jr-tempo) var(--jr-curva);
}
.servico-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--jr-sombra-2);
  border-color: color-mix(in srgb, var(--jr-primaria) 35%, white);
}

.servico-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--jr-r2);
  background: var(--jr-primaria-tom);
  color: var(--jr-primaria-forte);
  margin-bottom: 1rem;
}
.servico-icone svg { width: 24px; height: 24px; }

.servico-card h3 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--jr-tinta);
  margin-bottom: .375rem;
}
.servico-card p { font-size: .875rem; color: var(--jr-texto-2); line-height: 1.55; }

.servico-seta {
  position: absolute;
  right: 1.375rem;
  bottom: 1.125rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jr-primaria-forte);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--jr-tempo) var(--jr-curva),
              transform var(--jr-tempo) var(--jr-curva);
}
.servico-card:hover .servico-seta { opacity: 1; transform: translateX(0); }

/* --------------------------------------------------------------------------
   Passos
   -------------------------------------------------------------------------- */
.passos { padding: clamp(3rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 3rem) 1rem; max-width: 1140px; margin: 0 auto; }
.passos-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.passos-cabecalho .passos-titulo { margin-bottom: 0; }
.passos-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jr-tinta);
  margin-bottom: 1.75rem;
}
.passos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.passo {
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  border-radius: var(--jr-r3);
  padding: 1.5rem;
  box-shadow: var(--jr-sombra-1);
  transition: transform var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva);
}
.passo:hover { transform: translateY(-4px); box-shadow: var(--jr-sombra-2); }
.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--jr-r1);
  background: var(--jr-primaria);
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-bottom: .875rem;
  box-shadow: 0 8px 16px -6px rgba(48, 81, 160, .45);
}
.passo h3 { font-size: 1rem; font-weight: 800; color: var(--jr-tinta); margin-bottom: .375rem; }
.passo p { font-size: .875rem; color: var(--jr-texto-2); }

.prazos-aviso { max-width: 1140px; margin: 0 auto; padding: 1.5rem clamp(1.25rem, 5vw, 3rem) 3.5rem; }

.site-rodape {
  background: var(--jr-tinta);
  color: rgba(255, 255, 255, .6);
  text-align: center;
  padding: 2rem 1.25rem;
  font-size: .8125rem;
  box-shadow: var(--jr-aresta-escura);
}

@media (max-width: 640px) {
  /* No celular: faixa centralizada só com o órgão; cabeçalho compacto com
     marca + a única ação que importa. */
  .faixa-gov { font-size: .6875rem; padding-top: .375rem; padding-bottom: .375rem; }
  .faixa-gov .miolo { justify-content: center; text-align: center; }
  .faixa-gov-orgao { justify-content: center; gap: .4375rem; flex-wrap: nowrap; }
  .faixa-gov-divisor { display: inline-block; height: .75rem; }
  .faixa-gov-extra { display: none; }   /* nome longo cede lugar à sigla */
  .faixa-gov-curto { display: inline; }
  .faixa-gov-links { display: none; }

  .site-cabecalho { padding-top: .625rem; padding-bottom: .625rem; }
  .site-marca { gap: .625rem; }
  .site-marca-logo { height: 32px; }
  .site-marca-divisor,
  .site-marca-texto { display: none; }   /* no celular a logo fala sozinha */
  .site-marca-sigla { width: 40px; height: 40px; font-size: .75rem; }
  .site-nav-link { display: none; }              /* fica marca + ação principal */
  .site-nav .btn { padding: .5625rem .875rem; font-size: .8125rem; white-space: nowrap; }

  .hero-acoes .btn { flex: 1 1 100%; }
}

/* ===========================================================================
   Guia "Como funciona" — orientação passo a passo por serviço.
   =========================================================================== */
.miolo-coluna { flex-direction: column; align-items: stretch; }

.guia-hero {
  background: var(--jr-tinta);
  background-image: var(--jr-wash-escuro);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
}
.guia-hero .eyebrow { color: var(--jr-acento); }
.guia-titulo {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: .625rem;
}
.guia-sub { font-size: 1.0313rem; color: rgba(255, 255, 255, .76); max-width: 620px; }

/* Índice: chips que rolam para cada bloco. */
.guia-indice { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.guia-chip {
  display: inline-flex;
  align-items: center;
  padding: .4375rem .875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--jr-tempo) var(--jr-curva), border-color var(--jr-tempo) var(--jr-curva);
}
.guia-chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }

.guia-corpo { padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem) 3.5rem; gap: 1.5rem; }

.guia-bloco {
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-1);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  scroll-margin-top: 84px;   /* para o header sticky não cobrir ao ancorar */
}

.guia-bloco-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 55%, white);
}
.guia-bloco-icone {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--jr-r2);
  background: var(--jr-primaria-tom);
  color: var(--jr-primaria-forte);
  display: flex;
  align-items: center;
  justify-content: center;
}
.guia-bloco-icone svg { width: 26px; height: 26px; }
.guia-bloco-titulo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--jr-tinta); }
.guia-bloco-linha { font-size: .9375rem; color: var(--jr-texto-2); margin-top: .1875rem; }

/* Os passos: número grande ligado por uma linha vertical. */
.guia-passos { list-style: none; position: relative; padding-left: 0; }
.guia-passo { position: relative; display: flex; gap: 1rem; padding-bottom: 1.5rem; }
.guia-passo:last-child { padding-bottom: 0; }
/* linha que liga um número ao próximo */
.guia-passo:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  width: 2px;
  background: color-mix(in srgb, var(--jr-primaria) 22%, white);
}
.guia-passo-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--jr-primaria);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -6px rgba(48, 81, 160, .5);
}
.guia-passo-corpo h3 { font-size: 1rem; font-weight: 700; color: var(--jr-tinta); margin-bottom: .1875rem; margin-top: .375rem; }
.guia-passo-corpo p { font-size: .9rem; color: var(--jr-texto); line-height: 1.6; }

.guia-dica {
  margin-top: 1.5rem;
  padding: .875rem 1.125rem;
  border: 1px solid color-mix(in srgb, var(--jr-acento) 42%, white);
  border-left: 3px solid var(--jr-acento);
  border-radius: var(--jr-r1);
  background: var(--jr-acento-tom);
  font-size: .875rem;
  color: var(--jr-acento-texto);
  line-height: 1.55;
}
.guia-dica-rotulo {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: .5rem;
}

.guia-acao { margin-top: 1.5rem; }

/* ===========================================================================
   Páginas de erro
   =========================================================================== */
.jr-pagina-erro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--jr-canvas);
}
.jr-erro-caixa {
  max-width: 480px;
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  border-radius: var(--jr-r4);
  box-shadow: var(--jr-sombra-3);
  padding: 2.25rem;
  text-align: center;
}
.jr-erro-caixa h1 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jr-tinta);
  margin-bottom: .625rem;
}
.jr-erro-caixa p { color: var(--jr-texto-2); font-size: .9rem; margin-bottom: 1rem; }
.jr-erro-codigo {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jr-erro-forte);
  letter-spacing: .1em;
}

/* ===========================================================================
   Consulta de placa — o formulário central e a lista de autos.
   =========================================================================== */
.consulta-caixa {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 3rem;
}
.card-flutuante { box-shadow: var(--jr-sombra-2); padding: 2rem; }
.card-flutuante .titulo-pagina { margin-bottom: .25rem; }
.card-flutuante .subtitulo-pagina { margin-bottom: 1.5rem; }
.consulta-form { margin-top: .5rem; }

.placa-campo {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.chassi-campo {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.consulta-identidade {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.consulta-nota {
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--jr-texto-2);
  text-align: center;
  line-height: 1.6;
}

/* Lista de autos da placa */
.auto-lista { display: flex; flex-direction: column; gap: 0; }

.auto-card { position: relative; }
.auto-destacado { border-color: var(--jr-acento); box-shadow: var(--jr-sombra-2); }
.auto-chip-busca { position: absolute; top: -0.8125rem; left: 1.25rem; }

.auto-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .625rem;
}
.auto-ait .eyebrow { margin-bottom: .125rem; }
.auto-ait strong {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--jr-tinta);
  font-variant-numeric: tabular-nums;
}
.auto-meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--jr-texto-2);
  font-variant-numeric: tabular-nums;
}

.auto-desc {
  font-size: .9rem;
  color: var(--jr-texto);
  margin-bottom: .875rem;
}
.auto-local { color: var(--jr-texto-2); }

/* Faixa de prazo: retângulo chapado, cor com significado. */
.prazo-faixa {
  padding: .5625rem .875rem;
  border-radius: var(--jr-r1);
  border: 1px solid;
  border-left-width: 3px;
  font-size: .8125rem;
  font-weight: 700;
  margin-bottom: .875rem;
  font-variant-numeric: tabular-nums;
}
.prazo-ok {
  background: var(--jr-ok-tom);
  border-color: color-mix(in srgb, var(--jr-ok) 30%, white);
  border-left-color: var(--jr-ok);
  color: var(--jr-ok-texto);
}
.prazo-atencao {
  background: var(--jr-acento-tom);
  border-color: color-mix(in srgb, var(--jr-acento) 42%, white);
  border-left-color: var(--jr-acento);
  color: var(--jr-acento-texto);
}
.prazo-vencido {
  background: var(--jr-erro-tom);
  border-color: color-mix(in srgb, var(--jr-erro) 28%, white);
  border-left-color: var(--jr-erro);
  color: var(--jr-erro-forte);
}

/* Registro do sistema anterior para o mesmo AIT — informação, não alarme. */
.auto-historico {
  margin: -0.375rem 0 .875rem;
  padding: .375rem .625rem;
  border-left: 3px solid var(--jr-borda-forte);
  background: var(--jr-canvas);
  border-radius: var(--jr-r1);
}

.auto-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .auto-acoes .btn { flex: 1 1 calc(50% - .5rem); }
}

/* ===========================================================================
   Requerimento: formulário, anexos e linha do tempo.
   =========================================================================== */
.form-grupo-uf { max-width: 110px; }
.texto-corrido { white-space: pre-line; line-height: 1.7; }

.form-arquivo { padding: .5rem .625rem; cursor: pointer; }
.form-arquivo::file-selector-button {
  font-family: var(--jr-fonte);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--jr-primaria-forte);
  background: var(--jr-primaria-tom);
  border: 0;
  border-radius: var(--jr-r1);
  padding: .375rem .75rem;
  margin-right: .75rem;
  cursor: pointer;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .625rem 0;
  font-size: .875rem;
  color: var(--jr-texto);
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  accent-color: var(--jr-primaria);
  flex-shrink: 0;
}

.anexo-lista { list-style: none; display: flex; flex-direction: column; }
.anexo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 55%, white);
}
.anexo-item:last-child { border-bottom: 0; }
.anexo-nome { display: block; font-weight: 700; color: var(--jr-tinta); font-size: .875rem; }
.anexo-meta { display: block; font-size: .8125rem; color: var(--jr-texto-2); }

/* Linha do tempo: trilho à esquerda, ponto sólido por evento. */
.linha-tempo { list-style: none; position: relative; padding-left: 1.5rem; }
.linha-tempo::before {
  content: '';
  position: absolute;
  left: .3125rem;
  top: .375rem;
  bottom: .375rem;
  width: 2px;
  background: var(--jr-borda);
}
.lt-item { position: relative; padding: 0 0 1.125rem; }
.lt-item:last-child { padding-bottom: 0; }
.lt-ponto {
  position: absolute;
  left: -1.5rem;
  top: .3125rem;
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: var(--jr-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jr-primaria) 18%, white);
}
.lt-corpo p { font-size: .875rem; }
.lt-quando { font-size: .75rem; color: var(--jr-texto-2); margin-top: .25rem; }

/* --------------------------------------------------------------------------
   Mesa de julgamento: processo em duas colunas + ações em sanfona.
   -------------------------------------------------------------------------- */
.grade-processo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
  gap: 1.5rem;
  align-items: start;
}
.grade-processo-principal { min-width: 0; }
.grade-processo-acoes { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 84px; }
.grade-processo-acoes .card { margin-bottom: 0; }

@media (max-width: 1020px) {
  .grade-processo { grid-template-columns: 1fr; }
  .grade-processo-acoes { position: static; }
}

/* Sanfona de ação: fechada, a coluna vira um índice; aberta, um formulário. */
.sanfona {
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 70%, white);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-1);
}
.sanfona > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 800;
  font-size: .9375rem;
  color: var(--jr-tinta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.sanfona > summary::-webkit-details-marker { display: none; }
.sanfona > summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jr-primaria-forte);
  line-height: 1;
}
.sanfona[open] > summary::after { content: '−'; }
.sanfona[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white); }
.sanfona > form { padding: 1.125rem 1.25rem 1.25rem; }

/* A caixa que declara o impacto ANTES do clique. */
.impacto {
  background: var(--jr-acento-tom);
  border: 1px solid color-mix(in srgb, var(--jr-acento) 42%, white);
  border-left: 3px solid var(--jr-acento);
  border-radius: var(--jr-r1);
  padding: .625rem .875rem;
  font-size: .8125rem;
  color: var(--jr-acento-texto);
  margin-bottom: 1rem;
}

/* Filtros em linha */
.filtros-linha {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filtros-linha .form-grupo { margin-bottom: 0; flex: 1 1 180px; }
.filtros-linha .filtros-acao { flex: 0 0 auto; }

/* Seções do documento de parecer */
.doc-secao { margin-top: 1.375rem; }
.doc-secao h3 {
  font-size: .8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--jr-tinta);
  border-bottom: 2px solid var(--jr-tinta);
  padding-bottom: .25rem;
  margin-bottom: .625rem;
}

.doc-chave {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--jr-tinta);
  background: var(--jr-canvas);
  border: 1px dashed var(--jr-borda-forte);
  border-radius: var(--jr-r1);
  padding: .375rem .75rem;
  display: inline-block;
}
.doc-linha-chave { border-bottom: 0; margin-top: 1rem; }

/* ===========================================================================
   Documento imprimível (2ª via, comprovantes)
   =========================================================================== */
.doc-corpo {
  background: var(--jr-canvas);
  padding: clamp(1rem, 4vw, 2.5rem) 1rem;
}
.doc-folha {
  max-width: 760px;
  margin: 0 auto;
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-2);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.doc-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--jr-tinta);
  margin-bottom: 1.5rem;
}
.doc-orgao {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--jr-tinta);
  line-height: 1.4;
  max-width: 30rem;
}
.doc-selo {
  border: 2px solid var(--jr-tinta);
  border-radius: var(--jr-r1);
  padding: .375rem .75rem;
  font-weight: 800;
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--jr-tinta);
  white-space: nowrap;
}
.doc-titulo {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--jr-tinta);
  margin-bottom: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.doc-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--jr-borda); }
.doc-linha {
  display: flex;
  flex-direction: column;
  padding: .625rem .125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 55%, white);
}
.doc-linha dt {
  font-size: .6563rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jr-texto-2);
}
.doc-linha dd { font-size: .9375rem; font-weight: 600; color: var(--jr-tinta); }
.doc-ficha .doc-linha:nth-child(odd) { padding-right: 1.25rem; }

.doc-prazo {
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--jr-acento) 42%, white);
  border-left: 3px solid var(--jr-acento);
  border-radius: var(--jr-r1);
  background: var(--jr-acento-tom);
  font-size: .875rem;
  color: var(--jr-acento-texto);
}
.doc-rodape {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--jr-borda);
  font-size: .75rem;
  color: var(--jr-texto-2);
  line-height: 1.6;
}
.doc-acoes { display: flex; gap: .625rem; justify-content: center; margin-top: 1.5rem; }

@media (max-width: 560px) {
  .doc-ficha { grid-template-columns: 1fr; }
  .doc-ficha .doc-linha:nth-child(odd) { padding-right: .125rem; }
}

/* Autenticidade com QR: o código é conveniência de leitura; o endereço e a
   chave impressos ao lado continuam sendo a prova. O alvo fica invisível
   enquanto vazio — se o CDN não vier, não sobra buraco no documento. */
.doc-autenticidade {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--jr-borda);
}
.doc-qr { flex-shrink: 0; width: 108px; height: 108px; padding: 4px; background: #fff; border: 1px solid var(--jr-borda); border-radius: var(--jr-r1); }
.doc-qr:empty { display: none; }
.doc-qr.qr-pronto { display: block; }
.doc-qr svg { display: block; width: 100%; height: 100%; }
.doc-autenticidade-corpo { min-width: 0; flex: 1; }
.doc-autenticidade-linha { font-size: .8125rem; color: var(--jr-texto-2); line-height: 1.5; margin-top: .25rem; overflow-wrap: anywhere; }
.doc-autenticidade .doc-linha-chave { margin-top: .625rem; padding-left: 0; }

@media print {
  .doc-corpo { background: #fff; padding: 0; }
  .doc-folha { border: 0; box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
  .nao-imprime { display: none !important; }
  .doc-autenticidade { break-inside: avoid; }
}

/* ===========================================================================
   Ferramentas da mesa (padrões trazidos do protocolo_cmsaobento):
   sininho, minha caixa, gráficos do painel, marcadores, vínculos, lixeira.
   =========================================================================== */

/* --- Sininho no topo ------------------------------------------------------ */
.topbar-sino {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jr-card);
  border: 1px solid var(--jr-borda);
  border-radius: var(--jr-r2);
  color: var(--jr-texto);
  box-shadow: var(--jr-sombra-1);
  transition: color var(--jr-tempo) var(--jr-curva),
              border-color var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva);
}
.topbar-sino:hover { color: var(--jr-primaria); border-color: var(--jr-primaria); box-shadow: var(--jr-sombra-2); }
.topbar-sino svg { width: 18px; height: 18px; }
.topbar-sino-conta {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jr-erro);
  color: #fff;
  font-size: .6563rem;
  font-weight: 800;
  line-height: 1;
  border-radius: var(--jr-r1);
  border: 2px solid var(--jr-card);
  font-variant-numeric: tabular-nums;
}
.topbar-sino-conta[hidden] { display: none; }

/* --- Bandeja de avisos --------------------------------------------------- */
.aviso-lista { list-style: none; display: flex; flex-direction: column; }
.aviso-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem .25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
}
.aviso-item:last-child { border-bottom: 0; }
.aviso-ponto {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: .45rem;
  border-radius: var(--jr-r1);
  background: var(--jr-borda-forte);
}
.aviso-nao-lido .aviso-ponto { background: var(--jr-primaria); box-shadow: 0 0 0 3px var(--jr-primaria-tom); }
.aviso-corpo { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.aviso-texto { font-size: .9375rem; color: var(--jr-tinta); font-weight: 600; }
.aviso-nao-lido .aviso-texto { font-weight: 800; }
a.aviso-texto:hover { color: var(--jr-primaria); text-decoration: underline; }
.aviso-quando { font-size: .75rem; color: var(--jr-texto-2); }

/* --- Minha caixa --------------------------------------------------------- */
.caixa-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.25rem;
  margin-bottom: 1.25rem;
  padding: .875rem 1.125rem;
  background: var(--jr-card);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 70%, white);
  border-radius: var(--jr-r3);
  box-shadow: var(--jr-sombra-1);
}
.caixa-resumo-item { display: inline-flex; align-items: center; gap: .5rem; }
.caixa-resumo-rotulo { font-size: .8125rem; font-weight: 700; color: var(--jr-texto); }
.caixa-prazo-nota { display: block; font-size: .75rem; font-weight: 600; opacity: .85; }
.card-titulo .badge { vertical-align: middle; margin-right: .25rem; }

/* --- Painel: gráfico de meses e distribuições ---------------------------- */
.painel-graficos {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.painel-graficos .card { margin-bottom: 0; }
.card-titulo-espaco { margin-top: 1.5rem; }

.jr-grafico { display: flex; flex-direction: column; gap: .75rem; }
.jr-grafico-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.jr-grafico-rotulo { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; color: var(--jr-tinta); }
.jr-grafico-total { font-size: .75rem; font-weight: 700; color: var(--jr-texto-2); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.jr-grafico-vazio { font-size: .875rem; color: var(--jr-texto-2); padding: 2rem 0; text-align: center; }
.jr-grafico-svg { display: block; width: 100%; height: auto; font-family: var(--jr-fonte); }
.jr-grafico-grade { stroke: var(--jr-borda); stroke-width: 1; }
.jr-grafico-grade-rotulo { fill: var(--jr-texto-2); font-size: 11px; font-weight: 600; }
.jr-grafico-mes { fill: var(--jr-texto-2); font-size: 11px; font-weight: 600; }
.jr-grafico-barra { fill: var(--jr-primaria); transition: fill var(--jr-tempo) var(--jr-curva); }
.jr-grafico-barra:hover { fill: var(--jr-primaria-forte); }

.jr-dist { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.jr-dist-linha {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
}
.jr-dist-rotulo { font-size: .8125rem; font-weight: 600; color: var(--jr-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-dist-trilho {
  display: block;
  height: 10px;
  background: var(--jr-canvas);
  border: 1px solid color-mix(in srgb, var(--jr-borda) 70%, white);
  border-radius: var(--jr-r1);
  overflow: hidden;
}
.jr-dist-valor { font-size: .8125rem; font-weight: 800; color: var(--jr-tinta); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.jr-barra { display: block; height: 100%; border-radius: var(--jr-r1); transition: width 300ms var(--jr-curva); }
.jr-barra-primaria { background: var(--jr-primaria); }
.jr-barra-atencao  { background: var(--jr-acento); }
.jr-barra-ok       { background: var(--jr-ok); }
.jr-barra-erro     { background: var(--jr-erro); }
.jr-barra-neutro   { background: var(--jr-borda-forte); }

/* --- Marcadores (post-its internos) --------------------------------------- */
.rotulo-interno {
  display: inline-block;
  margin-left: .5rem;
  font-size: .6563rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--jr-texto-2);
  vertical-align: middle;
}
.marcador-botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.marcador-botoes form { margin: 0; }
.marcador-chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .6875rem;
  border-radius: var(--jr-r1);
  border: 1px solid var(--jr-borda);
  background: var(--jr-card);
  color: var(--jr-texto-2);
  font-family: var(--jr-fonte);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--jr-tempo) var(--jr-curva),
              color var(--jr-tempo) var(--jr-curva),
              border-color var(--jr-tempo) var(--jr-curva),
              box-shadow var(--jr-tempo) var(--jr-curva);
}
.marcador-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--jr-r1);
  background: var(--jr-borda-forte);
  flex-shrink: 0;
}
.marcador-chip:hover { border-color: var(--jr-borda-forte); color: var(--jr-tinta); box-shadow: var(--jr-sombra-1); }
.marcador-chip:focus-visible { outline: 2px solid var(--jr-primaria); outline-offset: 2px; }
/* O tom só colore a bolinha enquanto desligado; ligado, colore o chip todo. */
.marcador-primaria::before { background: var(--jr-primaria); }
.marcador-atencao::before  { background: var(--jr-acento); }
.marcador-ok::before       { background: var(--jr-ok); }
.marcador-erro::before     { background: var(--jr-erro); }
.marcador-neutro::before   { background: var(--jr-borda-forte); }
.marcador-ligado { box-shadow: var(--jr-sombra-1); }
.marcador-ligado.marcador-primaria { background: var(--jr-primaria-tom); border-color: color-mix(in srgb, var(--jr-primaria) 28%, white); color: var(--jr-primaria-forte); }
.marcador-ligado.marcador-atencao  { background: var(--jr-acento-tom);   border-color: color-mix(in srgb, var(--jr-acento) 42%, white);   color: var(--jr-acento-texto); }
.marcador-ligado.marcador-ok       { background: var(--jr-ok-tom);       border-color: color-mix(in srgb, var(--jr-ok) 30%, white);       color: var(--jr-ok-texto); }
.marcador-ligado.marcador-erro     { background: var(--jr-erro-tom);     border-color: color-mix(in srgb, var(--jr-erro) 30%, white);     color: var(--jr-erro-forte); }
.marcador-ligado.marcador-neutro   { background: var(--jr-canvas);       border-color: var(--jr-borda-forte);                              color: var(--jr-tinta); }

/* --- Protocolos vinculados ----------------------------------------------- */
.vinculo-lista { list-style: none; display: flex; flex-direction: column; margin-top: .25rem; }
.vinculo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white);
}
.vinculo-item:last-child { border-bottom: 0; }
.vinculo-item form { margin: 0; }
.vinculo-proto { display: block; font-weight: 800; color: var(--jr-primaria); font-variant-numeric: tabular-nums; }
.vinculo-proto:hover { text-decoration: underline; color: var(--jr-primaria-forte); }
.vinculo-meta { display: block; font-size: .75rem; color: var(--jr-texto-2); }
.vinculo-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--jr-borda) 60%, white); }

/* --- Lixeira: a sanfona de perigo ---------------------------------------- */
.sanfona-perigo > summary { color: var(--jr-erro-forte); }
.sanfona-perigo { border-left: 3px solid var(--jr-erro); }

@media (max-width: 960px) {
  .painel-graficos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .jr-dist-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .jr-dist-trilho { grid-column: 1 / -1; }
  .doc-autenticidade { flex-direction: column; }
}

/* ===========================================================================
   Movimento respeita quem pediu menos movimento.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   ACESSIBILIDADE — botão flutuante + painel + modos (padrão do Gilliard,
   adaptado aos tokens do JARI). Cores literais aqui são só do modo de alto
   contraste (e-MAG/gov.br); o resto vem dos tokens --jr-*.
   =========================================================================== */

/* escala de texto: A- desce dois degraus abaixo do padrao; A+ sobe tres */
html.jr-fonte-m2 { font-size: 75%; }
html.jr-fonte-m1 { font-size: 87.5%; }
html.jr-fonte-1  { font-size: 112.5%; }
html.jr-fonte-2  { font-size: 125%; }
html.jr-fonte-3  { font-size: 137.5%; }

/* --- botao flutuante (simbolo universal) + painel --- */
.jr-a11y {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.jr-a11y[hidden] { display: none; }
.jr-a11y-btn {
  width: 56px; height: 56px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: var(--jr-primaria); border: 3px solid #fff;
  box-shadow: var(--jr-sombra-3); display: grid; place-items: center;
  transition: transform var(--jr-tempo) var(--jr-curva), background var(--jr-tempo) var(--jr-curva);
}
.jr-a11y-btn svg { width: 30px; height: 30px; }
.jr-a11y-btn:hover, .jr-a11y-btn[aria-expanded="true"] { background: var(--jr-primaria-forte); transform: translateY(-2px); }
.jr-a11y-btn:focus-visible { outline: 3px solid var(--jr-acento); outline-offset: 3px; }
.jr-a11y-menu {
  width: 288px; max-height: min(70vh, 600px); overflow: auto; padding: 8px;
  background: var(--jr-card); border: 1px solid var(--jr-borda); border-radius: var(--jr-r4);
  box-shadow: var(--jr-sombra-3);
}
.jr-a11y-menu[hidden] { display: none; }
.jr-a11y-titulo { margin: 4px 8px 6px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--jr-texto-2); }
.jr-a11y-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px 6px 8px;
  border: 0; border-left: 3px solid transparent; border-radius: var(--jr-r2); background: none;
  font: inherit; font-weight: 600; font-size: .875rem; color: var(--jr-texto); cursor: pointer; text-align: left;
}
.jr-a11y-menu button:hover { background: var(--jr-canvas); }
.jr-a11y-menu button:focus-visible { outline: 2px solid var(--jr-primaria); outline-offset: -2px; }
.jr-a11y-menu button[aria-pressed="true"] { border-left-color: var(--jr-acento); background: var(--jr-primaria-tom); color: var(--jr-primaria-forte); }
.jr-a11y-menu button[aria-pressed="true"]::after { content: "\2713"; margin-left: auto; font-weight: 800; color: var(--jr-primaria-forte); }
.jr-a11y-menu button[disabled] { opacity: .5; cursor: not-allowed; }
.jr-a11y-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--jr-primaria-tom); color: var(--jr-primaria); border-radius: var(--jr-r2); }
.jr-a11y-ic svg { width: 16px; height: 16px; }
.jr-a11y-sep { height: 1px; margin: 6px 8px; background: var(--jr-borda); }
@media (max-width: 560px) {
  .jr-a11y { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .jr-a11y-btn { width: 48px; height: 48px; }
  .jr-a11y-btn svg { width: 26px; height: 26px; }
  .jr-a11y-menu { position: fixed; left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--jr-r4) var(--jr-r4) 0 0; }
}
@media (prefers-reduced-motion: reduce) { .jr-a11y-btn { transition: none; } .jr-a11y-btn:hover { transform: none; } }
@media print { .jr-a11y, [vw] { display: none !important; } }
mark.jr-lendo { background: var(--jr-acento-tom); color: inherit; outline: 2px solid var(--jr-acento); border-radius: 3px; }

/* --- modos combinaveis: fonte legivel, links sublinhados --- */
html.jr-legivel body, html.jr-legivel h1, html.jr-legivel h2, html.jr-legivel h3 { font-family: Arial, Verdana, "Segoe UI", sans-serif; }
html.jr-legivel body { letter-spacing: .02em; word-spacing: .08em; line-height: 1.7; }
html.jr-sublinhar a { text-decoration: underline !important; text-underline-offset: 2px; }

/* --- escala de cinza / contraste negativo: filtro nos filhos do body, nunca no
       html/body (filter cria bloco de contencao e quebra position:fixed). O
       proprio painel e o VLibras ficam de fora. --- */
html.jr-cinza body > :not(.jr-a11y):not([vw]):not(script):not(style):not([data-toasts]) { filter: grayscale(1); }
html.jr-negativo body > :not(.jr-a11y):not([vw]):not(script):not(style):not([data-toasts]) { filter: invert(1) hue-rotate(180deg); }
html.jr-negativo img, html.jr-negativo video, html.jr-negativo iframe { filter: invert(1) hue-rotate(180deg); }

/* --- alto contraste (e-MAG / gov.br): fundo preto, texto branco, realces
       amarelos. Como o JARI e dirigido por tokens, o modo REDEFINE os tokens
       --jr-* e neutraliza foto/gradiente/sombra dos poucos blocos de chrome
       escuro. Todo par texto/fundo fica >= 7:1 (AAA). --- */
html.jr-contraste {
  color-scheme: dark;
  --jr-tinta: #000; --jr-tinta-2: #000; --jr-canvas: #000; --jr-card: #000;
  --jr-texto: #fff; --jr-texto-2: #e6e6e6; --jr-borda: #fff; --jr-borda-forte: #fff;
  --jr-primaria: #ffd200; --jr-primaria-forte: #ffd200; --jr-primaria-tom: #000;
  --jr-acento: #ffd200; --jr-acento-texto: #ffd200; --jr-acento-tom: #000;
  --jr-ok: #6ee7a0; --jr-ok-texto: #6ee7a0; --jr-ok-tom: #000;
  --jr-erro: #ff9a90; --jr-erro-forte: #ff9a90; --jr-erro-tom: #000;
  --jr-govbr: #ffd200; --jr-govbr-forte: #ffd200;
  --jr-wash-escuro: none;
  --jr-sombra-1: none; --jr-sombra-2: none; --jr-sombra-3: none; --jr-brilho-acao: none;
}
html.jr-contraste body { background: #000; color: #fff; }
html.jr-contraste a { color: #ffd200; text-decoration: underline; }
html.jr-contraste a:hover { color: #fff; }
html.jr-contraste :focus-visible { outline: 3px solid #ffd200; outline-offset: 3px; }
html.jr-contraste ::selection { background: #ffd200; color: #000; }
html.jr-contraste mark.jr-lendo { background: #ffd200; color: #000; outline-color: #ffd200; }
html.jr-contraste .faixa-gov, html.jr-contraste .site-cabecalho, html.jr-contraste .hero,
html.jr-contraste .banner-escuro, html.jr-contraste .site-rodape, html.jr-contraste .sidebar,
html.jr-contraste .topbar, html.jr-contraste .cabecalho-movel, html.jr-contraste .auth-fundo,
html.jr-contraste .auth-cartao, html.jr-contraste .auth-painel, html.jr-contraste .card,
html.jr-contraste .kpi-card, html.jr-contraste .servico-card, html.jr-contraste .doc-folha,
html.jr-contraste .form-controle, html.jr-contraste .badge, html.jr-contraste .chip {
  background-image: none !important; background-color: #000; box-shadow: none;
}
html.jr-contraste .card, html.jr-contraste .kpi-card, html.jr-contraste .servico-card,
html.jr-contraste .topbar, html.jr-contraste .site-cabecalho, html.jr-contraste .doc-folha,
html.jr-contraste .form-controle, html.jr-contraste .badge, html.jr-contraste .chip,
html.jr-contraste .auth-cartao { border: 1px solid #fff; }
html.jr-contraste .btn, html.jr-contraste .btn-neutro, html.jr-contraste .btn-contorno {
  background: #000; color: #ffd200; border: 1px solid #ffd200; box-shadow: none;
}
html.jr-contraste .btn-primaria { background: #ffd200; color: #000; border: 1px solid #ffd200; }
html.jr-contraste .btn:hover, html.jr-contraste .btn-primaria:hover { background: #fff; color: #000; border-color: #fff; }
html.jr-contraste .jr-a11y-btn { background: #000; border-color: #ffd200; color: #ffd200; }
html.jr-contraste .jr-a11y-menu { background: #000; border-color: #fff; }
html.jr-contraste .jr-a11y-menu button { color: #fff; }
html.jr-contraste .jr-a11y-menu button[aria-pressed="true"] { background: #000; color: #ffd200; border-left-color: #ffd200; }
html.jr-contraste .jr-a11y-ic { background: #000; color: #ffd200; border: 1px solid #ffd200; }