/* ============================================================================
   Busca de jurisprudência — OAB-ES × JUES
   Deltas em cima do Bootstrap 5.3.3, que é o que a oabes.org.br já carrega.
   As cores saem do styles.min.css de produção deles: #274364 é o --bs-dark do
   portal e a cor dos botões primários; #d02015 é o vermelho institucional.
   Nada aqui reimplementa grid, botão ou card — só o que o Bootstrap não dá.
   ============================================================================ */
:root{
  --oab-azul:#274364;
  --oab-azul-hover:#213955;
  --oab-azul-ativo:#1f3650;
  --oab-vermelho:#d02015;
  --oab-vermelho-hover:#a61a11;
  --oab-fundo:#f1f4f7;
  --oab-borda:#cbd5e1;
  --oab-texto:#0f172a;
  --oab-texto-2:#475569;
  --oab-texto-3:#64748b;
  --oab-superficie:#fff;
  --oab-superficie-2:#f8fafc;
  --oab-grifo:#fde68a;
  /* Verde do estado ligado. `--oab-verde-texto` é mais escuro que
     `--oab-verde` de propósito: o mesmo #16a34a que fica bom numa borda dá
     3,3:1 em texto de 14px sobre branco, abaixo do mínimo de 4,5:1 da WCAG
     AA. #15803d dá 4,9:1. */
  --oab-verde:#16a34a;
  --oab-verde-texto:#15803d;
  --oab-verde-fundo:#f0fdf4;
  --oab-verde-halo:rgba(22,163,74,.18);
}

body{
  background:var(--oab-fundo);
  color:var(--oab-texto);
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
h1,h2,h3,.fonte-titulo{font-family:Montserrat,Roboto,Arial,sans-serif}

.barra-topo{background:var(--oab-azul);border-bottom:1px solid var(--oab-azul-ativo)}
.barra-topo .titulo{font-weight:800;letter-spacing:-.01em}

.selo-parceria{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--oab-texto);border-left:2px solid var(--oab-borda);padding-left:.75rem;
}
.logo-parceria{height:36px;width:auto;object-fit:contain}
/* O "ESPÍRITO SANTO" saiu da imagem: em corpo pequeno dentro do PNG ele virava
   borrão em qualquer altura razoável. A seccional agora é tipografia de
   verdade — nítida em qualquer tela, e acompanha o zoom do navegador.
   O navy #183048 e o vermelho #C01818 foram amostrados da própria marca. */
.marca-oab{display:inline-flex;align-items:flex-end;gap:.18rem}
.logo-oab{height:42px;width:auto;object-fit:contain}
/* Lê-se OAB/ES, uma sigla só — por isso a barra é caractere e não régua:
   régua separa dois blocos, barra une num nome. */
.sigla-es{
  font-family:Montserrat,Arial,sans-serif;
  font-weight:800;font-size:1.3rem;line-height:1;letter-spacing:.01em;
  color:#183048;padding-bottom:2px;
}
.sigla-es .barra{color:#C01818;font-weight:700;margin-right:.02em}
.logo-x{font-weight:900;font-size:.75rem;color:var(--oab-texto-2)}

.painel{
  background:var(--oab-superficie);border:1px solid var(--oab-borda);
  border-radius:.75rem;
}
.rotulo{font-size:.75rem;font-weight:700;color:var(--oab-texto);margin-bottom:.25rem;display:block}
/* A separação por câmara no seletor de desembargador: rótulo pequeno e
   apagado, nome em peso normal. O <optgroup> nativo vem em negrito-itálico por
   padrão, que grita mais que os próprios nomes. */
.form-select optgroup{font-style:normal;font-weight:700;font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--oab-texto-3)}
.form-select optgroup option{font-weight:400;font-size:1rem;
  letter-spacing:normal;text-transform:none;color:var(--oab-texto)}
/* As duas pontas do período lado a lado, com o "até" entre elas. O `min-width:0`
   é o que impede os dois <input type="date"> de estourarem a coluna: o campo
   de data tem largura intrínseca grande e o flex respeita isso por padrão. */
.periodo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
/* `flex-basis` de 135px e `flex-wrap` juntos: onde couber, os dois campos
   ficam lado a lado; onde não couber, eles QUEBRAM em vez de encolher. Medido:
   abaixo de ~135px o Chrome não estreita o campo de data, ele CORTA o texto, e
   "01/01/2026" vira "/01/2026" sem nenhum sinal de que faltou espaço. */
.periodo input{min-width:0;flex:1 1 135px}
.periodo span{font-size:.75rem;color:var(--oab-texto-3);flex:0 0 auto}
.dica{display:block;margin-top:.25rem;font-size:.72rem;color:var(--oab-texto-3)}

/* ── seletor com busca ───────────────────────────────────────────────────
   O <select> continua no HTML e continua sendo a verdade; ele é escondido de
   um jeito que NÃO o tira do formulário (display:none no Chrome cancela a
   validação nativa de campo required, e `recurso` é required). */
.seletor{position:relative}
.seletor-nativo{position:absolute;opacity:0;pointer-events:none;width:100%;height:0;padding:0;border:0}
.seletor-gatilho{
  text-align:left;display:flex;align-items:center;width:100%;
  background-image:var(--bs-form-select-bg-img);
}
.seletor-valor{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seletor-vazio-valor{color:var(--oab-texto-3)}
.seletor-painel{
  position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;
  background:var(--oab-superficie);border:1px solid var(--oab-borda);
  border-radius:.5rem;box-shadow:0 8px 24px rgba(15,23,42,.14);padding:.5rem;
}
.seletor-busca{font-size:.9rem;margin-bottom:.4rem}
.seletor-lista{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.seletor-item{
  padding:.4rem .55rem;border-radius:.35rem;cursor:pointer;font-size:.9rem;
  color:var(--oab-texto);
}
.seletor-item:hover,.seletor-ativo{background:var(--oab-fundo)}
.seletor-escolhido{font-weight:700;color:var(--oab-azul)}
.seletor-grupo{
  padding:.5rem .55rem .2rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--oab-texto-3);
}
.seletor-vazio{margin:.4rem .55rem;font-size:.85rem;color:var(--oab-texto-3)}

/* ── toggle "só concedidas" ──────────────────────────────────────────────
   CÁPSULA COM PONTO DE ESTADO, e não trilho deslizante.

   O trilho anterior tinha 38px de largura ao lado dos campos e destoava de
   uma linha em que tudo o mais é caixa: recurso, assunto, comarca, período.
   Aqui ele é uma caixa como as outras — mesma altura, mesma borda, mesmo
   fundo — e o que muda de estado é o ponto à esquerda.

   O VERDE NÃO ESTÁ SOZINHO. Quem não distingue verde de cinza (8% dos homens)
   continua vendo a mudança: o ponto ganha halo, a borda muda, o texto engorda
   de 500 para 700 e a caixa ganha fundo. Cor é o reforço, não o sinal. */
.interruptor{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;user-select:none;
  height:38px;padding:0 .75rem;border-radius:10px;
  background:var(--oab-superficie);border:1px solid var(--oab-borda);
  transition:border-color .15s,background .15s;
}
/* `opacity:0` e não `display:none`: escondido de verdade some da navegação
   por teclado e do leitor de tela, e a caixa vira um clique que não existe
   para quem não usa mouse. */
.interruptor input{position:absolute;opacity:0;width:0;height:0}
.interruptor .ponto{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--oab-texto-3);transition:background .15s,box-shadow .15s;
}
.interruptor .rotulo-interruptor{
  font-size:.85rem;font-weight:500;color:var(--oab-texto-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.interruptor:hover{border-color:var(--oab-texto-3)}

.interruptor:has(input:checked){
  background:var(--oab-verde-fundo);border-color:var(--oab-verde);
}
.interruptor:has(input:checked) .ponto{
  background:var(--oab-verde);box-shadow:0 0 0 3px var(--oab-verde-halo);
}
.interruptor:has(input:checked) .rotulo-interruptor{
  color:var(--oab-verde-texto);font-weight:700;
}
/* `:has()` não existe em navegador velho, e aí a caixa ficaria sem nenhum
   estado ligado. O irmão adjacente cobre o ponto e o rótulo sozinho — a
   caixa não muda, mas o sinal continua visível. */
.interruptor input:checked ~ .ponto{
  background:var(--oab-verde);box-shadow:0 0 0 3px var(--oab-verde-halo);
}
.interruptor input:checked ~ .rotulo-interruptor{
  color:var(--oab-verde-texto);font-weight:700;
}
.interruptor:has(input:focus-visible){
  outline:2px solid var(--oab-azul);outline-offset:2px;
}
.form-control,.form-select{
  background:var(--oab-superficie);border-color:var(--oab-borda);color:var(--oab-texto);
  font-weight:500;
}
.form-control:focus,.form-select:focus{
  border-color:var(--oab-azul);box-shadow:0 0 0 .2rem rgba(39,67,100,.18);
  background:var(--oab-superficie);color:var(--oab-texto);
}
.form-control::placeholder{color:var(--oab-texto-3)}

.btn-oab{background:var(--oab-azul);border-color:var(--oab-azul);color:#fff;font-weight:700}
.btn-oab:hover,.btn-oab:focus{background:var(--oab-azul-hover);border-color:var(--oab-azul-hover);color:#fff}
.btn-oab-vermelho{background:var(--oab-vermelho);border-color:var(--oab-vermelho);color:#fff;font-weight:700}
.btn-oab-vermelho:hover{background:var(--oab-vermelho-hover);border-color:var(--oab-vermelho-hover);color:#fff}
.btn-contorno{background:var(--oab-superficie-2);border:1px solid var(--oab-borda);color:var(--oab-azul);font-weight:700}
.btn-contorno:hover{background:var(--oab-fundo);color:var(--oab-azul)}

/* Seletor de câmara — o segmentado do protótipo */
.segmentado{display:inline-flex;padding:2px;border-radius:.5rem;
  background:var(--oab-superficie-2);border:1px solid var(--oab-borda)}
.segmentado button{
  border:0;background:transparent;color:var(--oab-texto-2);
  font-size:.75rem;font-weight:700;padding:.25rem .75rem;border-radius:.375rem;
}
.segmentado button[aria-pressed="true"]{background:var(--oab-azul);color:#fff}

.selo-grau{
  font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:.375rem;
  background:#e8eef5;border:1px solid #bcd0e4;color:var(--oab-azul);
}

/* Faixa da jurimetria — o CTA do protótipo */
.faixa-jurimetria{background:var(--oab-azul);border-radius:.75rem;color:#fff}
.faixa-jurimetria p{color:#d7e0ea}

.cabecalho-resultados{border-bottom:2px solid var(--oab-borda)}

/* Cartão de decisão */
.cartao{background:var(--oab-superficie);border:1px solid var(--oab-borda);border-radius:.75rem}
.numero-processo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  color:var(--oab-azul);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:2px;
}
.rotulo-campo{font-weight:600;color:var(--oab-texto-2);font-size:.85rem}
.valor-recurso{font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--oab-azul);font-size:.85rem}
.valor-assunto{font-weight:700;color:var(--oab-texto)}

.bloco-teor{
  background:var(--oab-superficie-2);border:1px solid var(--oab-borda);
  border-radius:.5rem;padding:.75rem;font-size:.9rem;line-height:1.6;color:var(--oab-texto-2);
}
.bloco-teor .titulo{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--oab-azul);display:block;margin-bottom:.25rem;
}
.bloco-teor p{margin:0;white-space:pre-wrap}
/* O inteiro teor vem do PDF com linhas longuíssimas sem ponto de quebra
   (números de processo, nomes em caixa alta, citações). Sem isto a linha
   estica o card e empurra os botões para fora da tela — medido. */
.bloco-teor p,.teor{overflow-wrap:anywhere;word-break:break-word}
.bloco-teor p.sem-texto{font-style:italic;color:var(--oab-texto-3)}
/* 3 linhas: o trecho é acórdão, não ementa curta — em 2 linhas mal sai do
   cabeçalho da classe processual. O texto inteiro abre no botão. */
.bloco-teor p.cortada{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
mark{background:var(--oab-grifo);color:inherit;padding:0 .15em;border-radius:2px;font-weight:600}

/* Distintivo de resultado — as cores do protótipo */
.distintivo{font-size:.72rem;font-weight:700;padding:.15rem .55rem;border-radius:.25rem;border:1px solid}
.distintivo.concedida{background:#d1fae5;border-color:#059669;color:#064e3b}
.distintivo.parcial{background:#fef3c7;border-color:#d97706;color:#78350f}
.distintivo.negada{background:#ffe4e6;border-color:#e11d48;color:#4c0519}
.distintivo.outro{background:#e2e8f0;border-color:#64748b;color:#0f172a}

.aviso-motor{
  background:#fdf6e3;border:1px solid #e5d4a1;color:#7a5c10;
  border-radius:.5rem;padding:.7rem .9rem;font-size:.88rem;
}

.teor{
  white-space:pre-wrap;font-size:.9rem;line-height:1.7;color:var(--oab-texto-2);
  max-height:34rem;overflow-y:auto;background:var(--oab-superficie-2);
  border:1px solid var(--oab-borda);border-radius:.5rem;padding:1rem;
}
.cabecalho-recentes{
  border-bottom:2px solid var(--oab-borda);padding-bottom:.5rem;margin-bottom:1rem;
}
.cabecalho-recentes h2{
  font-family:Montserrat,Arial,sans-serif;font-size:.95rem;font-weight:700;
  color:var(--oab-azul);margin:0;
}
.cabecalho-recentes .desde{font-size:.78rem;color:var(--oab-texto-3);font-weight:600}

.rodape{color:var(--oab-texto-3);font-size:.8rem;border-top:1px solid var(--oab-borda)}

/* O Bootstrap declara [hidden]{display:none!important} no reboot e
   .d-flex{display:flex!important} nas utilities. Empate de !important, e quem
   vem depois ganha — então .d-flex vencia e o atributo hidden não escondia
   nada. Esta folha carrega DEPOIS do Bootstrap, então devolve o hidden ao
   comportamento que qualquer um espera dele. */
[hidden]{display:none!important}

/* Estado vazio: convida a pesquisar, em vez de deixar a área em branco. */
.estado{
  background:var(--oab-superficie);border:1px solid var(--oab-borda);
  border-radius:.75rem;padding:2.75rem 1.5rem;text-align:center;
}
.estado .icone{color:var(--oab-azul);opacity:.35;font-size:2.25rem;margin-bottom:.75rem}
.estado h2{font-size:1.15rem;font-weight:700;color:var(--oab-texto);margin:0 0 .4rem}
.estado p{font-size:.92rem;color:var(--oab-texto-2);max-width:34rem;margin:0 auto 1.25rem}
/* O "nada encontrado" da lista dos últimos acórdãos: mesmo desenho do estado
   vazio da busca, mas com menos ar — ele fica DENTRO de uma seção que já tem
   título, e não sozinho na página. */
.estado.estado-compacto{padding:1.75rem 1.25rem}
.estado.estado-compacto .icone{font-size:1.75rem;margin-bottom:.5rem}
.estado.estado-compacto h2{font-size:1rem}
.estado.estado-compacto p{margin-bottom:0}

.exemplos{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.exemplos button{
  background:var(--oab-superficie-2);border:1px solid var(--oab-borda);
  color:var(--oab-azul);border-radius:2rem;padding:.35rem .9rem;
  font-size:.82rem;font-weight:600;
}
.exemplos button:hover{background:var(--oab-fundo);border-color:var(--oab-azul)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Página do acórdão (acordao.html) ─────────────────────────────────────
   Porte de src/components/InteiroTeorView.tsx para as cores da OAB-ES. */

.numero-acordao{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:900;letter-spacing:-.02em;color:var(--oab-texto);
  font-size:clamp(1.15rem,1rem + 1.2vw,1.75rem);
}
.btn-icone{
  background:none;border:0;border-radius:.375rem;padding:.35rem;line-height:1;
  color:var(--oab-texto-3);cursor:pointer;
}
.btn-icone:hover{background:var(--oab-superficie-2);color:var(--oab-texto)}

/* Rótulo à esquerda, valor à direita — o mesmo par do componente. */
.lista-campos{
  display:grid;grid-template-columns:8.5rem 1fr;gap:.9rem 1.5rem;
  padding-top:1.25rem;border-top:1px solid var(--oab-borda);
}
.lista-campos dt{font-size:.82rem;font-weight:600;color:var(--oab-texto-2)}
.lista-campos dd{
  margin:0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-size:.92rem;
}
.valor-magistrado{font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--oab-texto)}
.valor-classe{font-weight:700;text-transform:uppercase;color:var(--oab-texto)}
.atalho-jues{
  font-size:.76rem;font-weight:700;color:var(--oab-azul);text-decoration:none;white-space:nowrap;
}
.atalho-jues:hover{text-decoration:underline;color:var(--oab-azul-ativo)}

@media (max-width:575.98px){
  .lista-campos{grid-template-columns:1fr;gap:.25rem}
  .lista-campos dd{margin-bottom:.75rem}
}

.faixa-jues{
  background:var(--oab-azul);color:#fff;border-radius:.5rem;padding:1rem 1.25rem;
}
.faixa-jues h2{font-size:.98rem;font-weight:800;line-height:1.3;margin:0}
.faixa-jues p{font-size:.82rem;opacity:.85}
.abas{
  display:inline-flex;gap:.25rem;padding:.25rem;
  background:var(--oab-superficie-2);border:1px solid var(--oab-borda);border-radius:.5rem;
}
.abas button{
  border:1px solid transparent;background:none;border-radius:.375rem;
  padding:.3rem 1rem;font-size:.78rem;font-weight:700;color:var(--oab-texto-2);cursor:pointer;
}
.abas button[aria-selected="true"]{
  background:#fff;border-color:var(--oab-borda);color:var(--oab-azul);
}

.barra-busca-texto{
  display:flex;background:var(--oab-superficie-2);
  border:1px solid var(--oab-borda);border-radius:.5rem;padding:.4rem;
}
.barra-busca-texto[hidden]{display:none!important}
.barra-busca-texto input{flex:1}
.barra-busca-texto .contagem{
  font-size:.75rem;font-weight:700;white-space:nowrap;padding:.2rem .5rem;
  border-radius:.25rem;background:var(--oab-borda);color:var(--oab-texto-2);
}

/* O acórdão em fonte de texto, não de código: é documento para ler. */
.teor-integral{
  margin:0;font-family:inherit;font-size:.92rem;line-height:1.75;color:var(--oab-texto);
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
}

.icone-redondo{
  width:3.25rem;height:3.25rem;border-radius:.75rem;display:flex;
  align-items:center;justify-content:center;font-size:1.25rem;
  background:var(--oab-superficie-2);border:1px solid var(--oab-borda);color:var(--oab-azul);
}

/* ── convite do JUES (abre ao credenciar) e suporte ────────────────────── */
.convite-fundo{
  position:fixed;inset:0;z-index:1080;display:flex;align-items:center;
  justify-content:center;padding:1rem;background:rgba(15,23,42,.55);
  animation:convite-entra .16s ease-out;
}
@keyframes convite-entra{from{opacity:0}to{opacity:1}}
/* Quem pediu menos movimento no sistema não recebe animação nenhuma. */
@media (prefers-reduced-motion:reduce){.convite-fundo{animation:none}}
.convite{
  position:relative;width:100%;max-width:480px;background:var(--oab-superficie);
  border-radius:14px;padding:1.5rem;box-shadow:0 18px 48px rgba(15,23,42,.28);
  max-height:calc(100vh - 2rem);overflow:auto;
}
.convite-x{
  position:absolute;top:.6rem;right:.6rem;width:32px;height:32px;border:0;
  border-radius:8px;background:transparent;color:var(--oab-texto-3);cursor:pointer;
}
.convite-x:hover{background:var(--oab-fundo);color:var(--oab-texto)}
.convite-marcas{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
.convite-titulo{font-size:1.2rem;font-weight:800;margin:0 0 .6rem}
.convite-texto{font-size:.9rem;line-height:1.55;color:var(--oab-texto-2);margin:0}
.convite-texto-2{font-size:.85rem}
.convite-linha{height:1px;background:var(--oab-borda);margin:.9rem 0}
.convite-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
.convite-depois{
  color:var(--oab-texto-3);text-decoration:none;font-size:.85rem;font-weight:600;padding:.5rem .25rem;
}
.convite-depois:hover{color:var(--oab-texto);text-decoration:underline}
.convite-rodape{
  margin:.9rem 0 0;font-size:.78rem;color:var(--oab-texto-3);
  border-top:1px solid var(--oab-borda);padding-top:.7rem;
}
.btn-jues{
  background:var(--oab-azul);border-color:var(--oab-azul);color:#fff;
  font-weight:700;font-size:.88rem;
}
.btn-jues:hover,.btn-jues:focus{background:var(--oab-azul-hover);border-color:var(--oab-azul-hover);color:#fff}

.link-voltar{color:rgba(255,255,255,.85);text-decoration:none;font-size:.85rem;font-weight:600}
.link-voltar:hover{color:#fff;text-decoration:underline}
.titulo-lateral{font-size:.8rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--oab-texto-3);margin:0 0 .7rem}
.painel-jues{border-left:3px solid var(--oab-azul)}

.chat{display:flex;flex-direction:column;overflow:hidden}
.chat-topo{
  display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  border-bottom:1px solid var(--oab-borda);background:var(--oab-superficie-2);
}
.chat-ponto{width:9px;height:9px;border-radius:50%;background:var(--oab-verde);
  box-shadow:0 0 0 3px var(--oab-verde-halo);flex:0 0 auto}
.chat-sub{display:block;font-size:.76rem;color:var(--oab-texto-3)}
.conversa{
  list-style:none;margin:0;padding:1rem;display:flex;flex-direction:column;
  gap:.6rem;min-height:280px;max-height:52vh;overflow-y:auto;
}
.balao{max-width:88%;padding:.6rem .8rem;border-radius:12px;font-size:.88rem;line-height:1.5}
.balao-suporte{align-self:flex-start;background:var(--oab-fundo);
  color:var(--oab-texto);border-bottom-left-radius:4px}
.balao-eu{align-self:flex-end;background:var(--oab-azul);color:#fff;
  border-bottom-right-radius:4px;font-weight:500}
.balao code{background:rgba(15,23,42,.08);padding:.05rem .3rem;border-radius:4px;font-size:.85em}
.opcoes{
  display:flex;flex-wrap:wrap;gap:.5rem;padding:.85rem 1rem;
  border-top:1px solid var(--oab-borda);background:var(--oab-superficie-2);
}
.opcao{
  border:1px solid var(--oab-borda);background:var(--oab-superficie);
  color:var(--oab-texto);border-radius:999px;padding:.42rem .85rem;
  font-size:.83rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:border-color .15s,background .15s;
}
.opcao:hover{border-color:var(--oab-azul);background:var(--oab-fundo);color:var(--oab-texto)}
.opcao-saida{border-color:var(--oab-azul);color:var(--oab-azul)}
.opcao-saida:hover{background:var(--oab-azul);color:#fff}
.opcao-saida i{font-size:.7em;opacity:.75}

.canal{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;margin-bottom:.4rem;
  border:1px solid var(--oab-borda);border-radius:10px;text-decoration:none;
  color:var(--oab-texto);font-size:.85rem;transition:border-color .15s,background .15s;
}
.canal:hover{border-color:var(--oab-azul);background:var(--oab-fundo);color:var(--oab-texto)}
.canal i{font-size:1.2rem;color:var(--oab-azul);width:22px;text-align:center}
.canal span{line-height:1.35;font-size:.8rem;color:var(--oab-texto-3)}
.rodape-suporte{
  margin:0;padding-top:.9rem;border-top:1px solid var(--oab-borda);
  font-size:.83rem;color:var(--oab-texto-3);
}
.rodape-suporte a{color:var(--oab-azul);font-weight:600;text-decoration:none}
.rodape-suporte a:hover{text-decoration:underline}
.texto-legal h2{font-size:1rem;font-weight:800;margin:1.4rem 0 .5rem;color:var(--oab-texto)}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p,.texto-legal li{font-size:.89rem;line-height:1.6;color:var(--oab-texto-2)}
.texto-legal ul{padding-left:1.1rem;margin-bottom:.8rem}
.texto-legal li{margin-bottom:.35rem}
.texto-legal a{color:var(--oab-azul);font-weight:600}
.texto-legal code{background:rgba(15,23,42,.07);padding:.05rem .3rem;border-radius:4px;font-size:.88em}
.texto-legal .aviso-titulo{color:var(--oab-vermelho)}
.destaque-legal{
  display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0;padding:.8rem .9rem;
  border-left:3px solid var(--oab-verde);background:var(--oab-verde-fundo);border-radius:0 8px 8px 0;
}
.destaque-legal i{color:var(--oab-verde-texto);margin-top:.2rem}
.destaque-legal p{margin:0;font-size:.86rem}
.aviso-privacidade{
  margin:.6rem 0 0;font-size:.78rem;color:var(--oab-texto-3);line-height:1.5;
}
.aviso-privacidade a{color:var(--oab-azul);font-weight:600}

.aviso-janela{
  border-left:3px solid var(--oab-azul);background:var(--oab-fundo);
  border-radius:0 8px 8px 0;padding:.65rem .8rem;font-size:.85rem;
  color:var(--oab-texto-2);margin-bottom:.75rem;
}
.aviso-janela strong{color:var(--oab-texto)}