/* ═══════════════════════════════════════════════════════════════════════════════════════════
   rs.css — folha única do Rodrigues & Sousa
   Etapa 01 da proposta de identidade, 19/08/2026.

   POR QUE ESTE ARQUIVO EXISTE
   Antes dele o site tinha doze blocos <style> soltos, 745 linhas repetidas entre páginas,
   126 cores distintas, 33 sombras e 14 raios de canto. Ninguém escolheu 126 cores — elas foram
   aparecendo, porque cada página resolvia do zero o que a anterior já tinha resolvido.

   A REGRA
   Acrescente AQUI, não na página. Se uma tela precisa de um valor novo, ele vira token neste
   arquivo e a tela usa o token. É a mesma regra que já vale no Vértice (vertice.css).

   O QUE ESTA ETAPA MUDA
   Nada de aparência — só de origem. Os componentes globais saíram do includes/header.php para
   cá e passaram a ler tokens, com os MESMOS valores de hoje. A troca para a paleta do timbrado
   (#1d344f / #bba36f), já aprovada, é a etapa 02: são duas linhas, aqui embaixo.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ A fonte da casa ════════════════════════════════════════════════════════════════════
   Mulish — desenho humanista geométrico, o parente livre mais próximo da Avenir Next.
   Fonte VARIÁVEL: um arquivo de 30 KB cobre os pesos 200 a 1000, contra os cinco recortes
   de 26 KB que existiam antes. `font-weight: 200 1000` na declaração é o que autoriza o
   navegador a interpolar — sem isso ele só usaria o peso 400.

   ⛔ POR QUE A AVENIR SAIU (20/08/2026, ele autorizou "resolva da fonte")
   O arquivo declara, no próprio `OS/2.fsType`, o valor 0x0004 = "Preview & Print embedding":
   a Linotype autoriza EMBUTIR EM DOCUMENTO para ver e imprimir, e nada além. Servir .woff2
   ao navegador é distribuir a fonte, não embutir em documento — e o recorte ao latim que
   fizéramos é modificação, que exige autorização expressa. Não houve compra; o arquivo veio
   da pasta de fontes do Mac, cuja licença cobre uso naquela máquina.
   ✔ O PDF CONTINUA EM AVENIR e está correto: `jur_pdf.php` embute a fonte no documento para
   leitura e impressão, que é exatamente o que 0x0004 permite. Os arquivos vivem em
   /var/www/jur_fontes, fora do webroot (drwxr-x---). Nada a mudar lá.
   ✔ Mulish e Nunito Sans são SIL Open Font License — servir e modificar é permitido.
   Trocar para Nunito é uma linha: `mulish-var.woff2` → `nunito-var.woff2`, e o nome da
   família nos tokens. O arquivo já está em /fonts/.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'RS Sans'; font-weight: 200 1000; font-style: normal; font-display: swap;
             src: url('/fonts/mulish-var.woff2') format('woff2-variations'),
                  url('/fonts/mulish-var.woff2') format('woff2'); }
:root {
    /* ── Marca ──────────────────────────────────────────────────────────────────────────────
       Valores atuais do site. Medidos no logo do timbrado (/var/www/jur_timbre/logo_web.png),
       a marca real é #1d344f e o ouro real é #bba36f — mais apagado, ouro velho. A troca é a
       etapa 02 e acontece só nestas duas linhas.                                            */
    --rs-marca:          #1d344f;   /* medido no logo do timbrado, 19/08/2026 */
    --rs-ouro:           #bba36f;   /* ouro velho do timbrado — quebrado com cinza */
    --rs-marca-2:        #2f4d6d;   /* hover e degradê — clareado do navy do timbrado */
    --rs-ouro-2:         #dcca99;   /* ouro claro do timbrado (o brilho da balança) */
    --rs-marca-rgb:      29, 52, 79;
    --rs-ouro-rgb:       187, 163, 111;

    /* ── Tinta e superfície ────────────────────────────────────────────────────────────── */
    --rs-tinta:          #2c3e50;   /* texto de título de componente */
    /* 20/08 (etapa 05) — os dois cinzas foram medidos e escurecidos.
       #6c757d dava 4,69:1 sobre branco mas só 4,45:1 sobre o fundo da página (#f8f9fa), e é
       nele que ficam as legendas fora de cartão: reprovava por pouco, no lugar mais lido.
       #999999 dava 2,70:1 — pior que o dourado que a etapa 02 tirou de texto. Hierarquia
       mantida (tinta > corpo > 2 > 3); a diferença de tom é quase invisível ao lado.         */
    --rs-tinta-2:        #656e76;   /* apoio, legenda — 5,19:1 no branco, 4,92:1 no fundo */
    --rs-tinta-3:        #6e767c;   /* terciário — 4,62:1 no branco (só é usado DENTRO de cartão) */
    --rs-tinta-corpo:    #444444;
    --rs-fundo:          #f8f9fa;
    --rs-superficie:     #ffffff;

    /* ── Fios e bordas ─────────────────────────────────────────────────────────────────── */
    --rs-fio:            #e9ecef;
    --rs-fio-2:          #dee2e6;
    --rs-fio-3:          #f0f0f0;

    /* ── Raio: três, no lugar de catorze ───────────────────────────────────────────────── */
    --rs-raio:           12px;      /* caixa de ícone, campo, modal */
    --rs-raio-cartao:    15px;      /* cartão antigo, ainda em uso em telas não convertidas */
    --rs-raio-cartao-novo: 5px;    /* cartão e painel novos */
    --rs-raio-pilula:    50px;      /* botão — a pílula fica, é escolha dele */
    --rs-raio-circulo:   50%;

    /* ── Largura da página: uma só, no lugar de seis ───────────────────────────────────
       20/08/2026 — 1240px → 1080px. Ele notou que as abas não batiam: o site abria em 1240
       e o módulo Análises, que tem contêiner próprio (`.wrap` no jur_ui.php), em 1080.
       Duas larguras num mesmo sistema é a mesma doença das seis de antes, só que menor.
       Venceu a do Análises, que é onde ele passa mais tempo e onde a leitura é mais densa. */
    --rs-largura:        1080px;

    /* ── O cartão tem UM tamanho no site inteiro ───────────────────────────────────────────
       LARGURA: 246px cabe QUATRO por linha nos 1036px úteis de uma página de 1080
       (4×246 + 3×14 de vão = 1026). A conta é o critério: largura fixa que não deixa buraco na
       tela estreita e simplesmente admite mais colunas na larga. Fica entre os 247px que as
       Ferramentas tinham e os 337px do início.

       ALTURA: 150px é a altura natural do MAIS ALTO dos três tipos de ficha que o site tem — a
       do cliente, que ainda leva dois botões no pé. As outras eram o cartão-medida (140) e o
       atalho (84). Tomar a maior como padrão é o único jeito de igualar sem espremer conteúdo
       nenhum. Ver `.rs-cartoes`. */
    --rs-cartao-larg:    246px;
    --rs-cartao-alt:     150px;

    /* ── Elevação: três, no lugar de trinta e três ─────────────────────────────────────── */
    --rs-elev-0:         none;
    --rs-elev-1:         0 4px 15px rgba(0,0,0,.03);          /* repouso */
    --rs-elev-2:         0 15px 30px rgba(29,52,79,.10);      /* flutuante, no hover */
    --rs-elev-topo:      0 3px 10px rgba(0,0,0,.05);          /* barra do topo */

    /* ── Tipografia ────────────────────────────────────────────────────────────────────────
       Valores atuais. A dupla aprovada — serifada do logo na marca e nos títulos de página,
       Avenir Next na interface, monoespaçada nos dados — é a etapa 03.                      */
    --rs-display:        'RS Sans', 'Segoe UI', system-ui, sans-serif;
    --rs-texto:          'RS Sans', 'Segoe UI', system-ui, sans-serif;
    --rs-dado:           ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ── Semânticas ─────────────────────────────────────────────────────────────────────
       Sucesso, alerta e erro são informação, não decoração — por isso existem à parte da
       marca e não contam como acento. Antes eram 45 cores soltas nas páginas do site:
       quatro verdes diferentes, três vermelhos, três azuis de "informação" e um arco-íris
       roxo/azul/verde no ícone da paleta. Uma de cada.                                    */
    --rs-ok:             #17734a;
    --rs-ok-fraco:       #e8f3ed;
    --rs-alerta:         #8a6410;
    --rs-alerta-fraco:   #f7f1e2;
    --rs-erro:           #a8402f;
    --rs-erro-fraco:     #f7ebe9;

    /* ── Movimento ─────────────────────────────────────────────────────────────────────── */
    --rs-transicao:      .3s;
}

/* ═══ Base ═══════════════════════════════════════════════════════════════════════════════ */
body {
    font-family: var(--rs-texto);
    background-color: var(--rs-fundo);
}

/* ═══ Barra do topo ══════════════════════════════════════════════════════════════════════
   19/08/2026 — a barra passou a trabalhar.

   Antes ela mostrava a marca e um botão de sair; nenhuma navegação. Ir de Clientes para
   Financeiro exigia voltar ao painel. Era decoração, e era daí que vinha o ar de papel timbrado.
   Agora carrega as seções, diz em qual você está e leva às outras.

   Fundo navy: além de tirar o ar clássico, resolve o ouro. Sobre branco ele dá 2,45:1 e reprova;
   sobre este fundo dá 5,18:1 — então o dourado pode voltar, agora com função: marcar a seção
   aberta. E a seção aberta muda TAMBÉM de cor e peso no texto, para não depender só da cor.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* abaixo disto a marca vira borrão */
/* `align-self: stretch` é o que faz a nav ocupar a altura inteira da barra. Sem isso o link
   fica menor que ela e o filete dourado nasce no meio do nada — ou some, porque o
   `overflow-x: auto` (que dá a rolagem lateral no celular) também passa a cortar na vertical. */
/* ═══════════════════════════════════════════════════════════════════════════
   BARRA DO TOPO — blocos separados, como no modelo que ele aprovou (20/08/2026).
   A logo ocupa um bloco CLARO à esquerda e é o botão de início; as seções vêm em
   células divididas por filete, e a aberta ganha fundo mais claro com filete
   dourado embaixo. É o desenho da revisão 2 do artifact.
   ⚠ A barra de 58px da etapa 03 virou 66px: a célula precisa de ar para o filete
   inferior não encostar no texto.
   ═══════════════════════════════════════════════════════════════════════════ */
.rs-topo { background: var(--rs-marca); position: sticky; top: 0; z-index: 1030; }
.rs-topo-in { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
              min-height: 66px; }
/* ⚠ No modelo a logo fica num bloco BRANCO, e ele recusou: o bloco corta a barra ao meio.
   Fica tudo navy, contínuo, com a logo em negativo — que já é a que o site serve. */
.rs-topo-marca { display: flex; align-items: center; padding: 0 26px;
                 text-decoration: none; flex: none; position: relative;
                 border-right: 1px solid rgba(255,255,255,.14); }
/* A logo é o botão de início: quando o início está aberto, ela acende como as demais seções. */
.rs-topo-marca[aria-current="page"] { background: rgba(255,255,255,.08); }
.rs-topo-marca[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 0 0;
                 height: 3px; background: var(--rs-ouro); }
.rs-topo-marca img { height: 42px; width: auto; display: block; }
.rs-topo-marca .texto { color: #fff; font-weight: 900; letter-spacing: .06em; font-size: .9rem; }
.rs-nav { display: flex; align-self: stretch; min-width: 0; overflow-x: auto;
          overflow-y: hidden; scrollbar-width: none; }
.rs-nav::-webkit-scrollbar { display: none; }
.rs-nav a { flex: 1 0 auto; min-width: 120px; display: grid; place-items: center;
            padding: 0 18px; text-decoration: none; color: rgba(255,255,255,.7);
            font-size: .72rem; font-weight: 600; letter-spacing: .14em;
            text-transform: uppercase; white-space: nowrap;
            border-left: 1px solid rgba(255,255,255,.14);
            position: relative; transition: color .18s, background .18s; }
.rs-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.rs-nav a[aria-current="page"] { color: #fff; font-weight: 800; background: rgba(255,255,255,.08); }
.rs-nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 0 0;
            height: 3px; background: var(--rs-ouro); }
.rs-nav a:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: -3px; }
.rs-eu { display: flex; align-items: center; gap: 11px; padding: 0 20px; flex: none;
         border-left: 1px solid rgba(255,255,255,.14); }
.rs-eu-nome { color: rgba(255,255,255,.72); font-size: .78rem; line-height: 1.25; text-align: right; }
.rs-eu-nome b { display: block; color: #fff; font-weight: 700; }
.rs-eu-nome span { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.rs-sair { width: 33px; height: 33px; border-radius: var(--rs-raio-circulo);
           background: var(--rs-ouro); border: 0; color: var(--rs-marca);
           font-weight: 900; font-size: .78rem; cursor: pointer; display: grid;
           place-items: center; transition: filter .18s; }
.rs-sair:hover { filter: brightness(1.08); }
.rs-sair:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 980px) {
    /* ── A navegação cai para a segunda linha (etapa 05, 20/08/2026) ────────────────────────
       Antes deste bloco a barra continuava numa linha só e a nav virava um rolador lateral:
       num aparelho de 390px ficavam 436px de seção ESCONDIDOS — Financeiro, Análises,
       Ferramentas e Gerenciador só apareciam para quem adivinhasse que dava para arrastar a
       barra, sem seta, sem sombra, sem nada. Rolagem que não se anuncia é seção que não existe.
       Aqui a marca e o "sair" ficam em cima e as sete seções ocupam a linha de baixo inteira.
       A barra passa de 58px para ~139px no telefone, e nada some.
       O corte é 980px, não 780: medido link a link, as sete seções começam a não caber já em
       ~950px de largura (a 900px sobravam 91px escondidos, a 820px sobravam 171px). Ponto de
       corte que se escolhe "no olho" deixa o tablet no pior dos dois mundos.                  */
    /* ⚠ A barra virou GRID de três colunas (20/08/2026): aqui ela passa a DUAS LINHAS —
       marca e sair em cima, as seções ocupando a linha inteira embaixo. */
    .rs-topo-in { grid-template-columns: auto 1fr; }
    .rs-topo-marca { padding: 0 16px; }
    .rs-topo-marca img { height: 34px; }
    .rs-eu-nome { display: none; }
    .rs-eu { justify-self: end; }
    .rs-nav {
        grid-column: 1 / -1; flex-wrap: wrap; overflow: visible;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .rs-nav a { min-width: 0; flex: 1 0 auto; padding: 12px 14px; font-size: .68rem;
                border-left: 0; }
    /* Sem altura cheia, o filete da seção aberta precisa nascer embaixo do próprio link. */
    .rs-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rs-ouro); }
}

/* ═══ Arrastar as seções da barra (20/08/2026) ═══════════════════════════════════════════
   Ele segura e arrasta para mudar a ordem. Três detalhes que fazem o gesto funcionar:

   • `touch-action: pan-y` — sem isso, no telefone o navegador entende o gesto como rolagem da
     página e o arrasto nunca começa; com `pan-y`, rolar continua funcionando e o arrasto lateral
     fica para o Sortable.
   • `user-select: none` — segurar 400ms sobre texto seleciona a palavra e o arrasto vira uma
     seleção azul atravessada.
   • enquanto arrasta, o cursor muda e o item pego ganha relevo: o gesto precisa dizer que
     entendeu, senão ele solta achando que não pegou.                                         */
.rs-nav a { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.rs-nav.arrastando { cursor: grabbing; }
.rs-nav.arrastando a { cursor: grabbing; }
.rs-nav-pego { background: rgba(255,255,255,.14) !important; }
.rs-nav-fantasma { opacity: .35; }

/* ═══ Largura e respiro da página ════════════════════════════════════════════════════════
   Havia seis combinações diferentes de contêiner (container mt-3, container-fluid px-4 mt-4,
   container mt-5…), então cada tela começava numa altura e numa largura. Uma só. */
.rs-pagina {
    max-width: var(--rs-largura);
    margin: 0 auto;
    padding: 26px 22px 60px;
}
.rs-pagina-larga { max-width: none; }   /* telas de tabela cheia, quando fizer falta */

/* ═══ Cartão de menu antigo — REMOVIDO em 20/08/2026 ════════════════════════════════════
   `.menu-card`, `.icon-wrapper`, `.card-title`, `.card-sub` e `.watermark` (46 linhas) eram o
   cartão anterior. A última tela que ainda os usava era ferramentas.php, convertida na etapa
   04 — não sobrou consumidor em página nenhuma, nem no módulo Jurídico. Quem quiser ver como
   era: /root/backups_seguranca/2026-08-20-etapa04/antes-da-etapa04.tgz.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ SweetAlert (o modal de sair) ═══════════════════════════════════════════════════════ */
.swal2-popup {
    border-radius: var(--rs-raio-cartao) !important;
    border-top: 5px solid var(--rs-ouro);
    padding-bottom: 30px !important;
}
.swal2-title {
    color: var(--rs-marca) !important;
    font-family: var(--rs-display) !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
}
.swal2-html-container { color: var(--rs-tinta-2) !important; font-size: .9rem !important; }
.swal2-icon.swal2-question { border-color: var(--rs-ouro) !important; color: var(--rs-ouro) !important; }

.btn-swal-confirm {
    background: linear-gradient(135deg, var(--rs-marca) 0%, var(--rs-marca-2) 100%) !important;
    color: #fff !important;
    border-radius: var(--rs-raio-pilula) !important;
    padding: 12px 35px !important;
    font-weight: 700 !important; font-size: .85rem !important;
    box-shadow: 0 5px 15px rgba(var(--rs-marca-rgb), .2) !important;
    border: none !important; margin: 0 10px !important;
}
.btn-swal-confirm:hover { transform: translateY(-2px); }

.btn-swal-cancel {
    background: var(--rs-fundo) !important;
    color: var(--rs-tinta-2) !important;
    border-radius: var(--rs-raio-pilula) !important;
    padding: 12px 35px !important;
    font-weight: 700 !important; font-size: .85rem !important;
    border: 1px solid var(--rs-fio-2) !important;
    margin: 0 10px !important;
}
.btn-swal-cancel:hover { background: var(--rs-fio) !important; color: var(--rs-marca) !important; }

/* ═══ Botões ═════════════════════════════════════════════════════════════════════════════
   Havia 23 classes de botão próprias, espalhadas por 11 páginas — cada tela inventou a sua.
   Aqui ficam três papéis e dois tamanhos. A pílula fica: é escolha dele e funciona.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.rs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--rs-texto); font-size: .82rem; font-weight: 700;
    line-height: 1; letter-spacing: .01em; white-space: nowrap;
    padding: 11px 24px; border-radius: var(--rs-raio-pilula);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: all var(--rs-transicao);
}
.rs-btn:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }
.rs-btn-p  { background: var(--rs-marca); color: #fff; border-color: var(--rs-marca); }
.rs-btn-p:hover  { background: var(--rs-marca-2); border-color: var(--rs-marca-2); color: #fff; }
.rs-btn-n  { background: var(--rs-superficie); color: var(--rs-marca); border-color: var(--rs-fio-2); }
.rs-btn-n:hover  { background: var(--rs-fundo); border-color: var(--rs-tinta-2); color: var(--rs-marca); }
.rs-btn-o  { background: var(--rs-ouro); color: #241b06; border-color: var(--rs-ouro); }
.rs-btn-o:hover  { background: var(--rs-ouro-2); border-color: var(--rs-ouro-2); color: #241b06; }
.rs-btn-sm { padding: 8px 18px; font-size: .76rem; }

.rs-btn-d  { background: var(--rs-superficie); color: var(--rs-erro); border-color: var(--rs-erro); }
.rs-btn-d:hover  { background: var(--rs-erro); color: #fff; border-color: var(--rs-erro); }
.rs-btn-bloco { width: 100%; }

/* Botão redondo de ação em lista — eram `.btn-action-small`, `.btn-action-sm` e `.btn-action-top`,
   três classes com o mesmo desenho em páginas diferentes. */
.rs-btn-ico {
    width: 30px; height: 30px; padding: 0; border-radius: var(--rs-raio-circulo);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; border: 1px solid var(--rs-fio-2);
    background: var(--rs-superficie); color: var(--rs-marca);
    cursor: pointer; transition: all var(--rs-transicao);
    /* ⚡ O Bootstrap 5.3 sublinha todo `<a>`. Como este botão às vezes é link (apagar, arquivar)
       e às vezes é `<button>`, o mesmo componente aparecia com e sem risco embaixo do ícone. */
    text-decoration: none;
}
.rs-btn-ico:hover { background: var(--rs-marca); color: #fff; border-color: var(--rs-marca); }
.rs-btn-ico:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }
.rs-btn-ico.perigo:hover { background: var(--rs-erro); border-color: var(--rs-erro); }

/* ═══ Voltar ═════════════════════════════════════════════════════════════════════════════
   Eram cinco variações do mesmo link (`btn-outline-secondary rounded-pill px-4`, com e sem
   `shadow-sm`, com e sem `btn-sm`) mais um `history.back()` solto. Um só, e sempre no mesmo
   lugar da tela: à direita do título. Com a barra do topo carregando as seções, ele passou a
   ser o retorno de UMA tela, não a navegação do sistema.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.rs-voltar { }                                   /* herda de .rs-btn .rs-btn-n */
.rs-voltar::before { content: "\2039"; font-size: 1.15em; line-height: 0; margin-top: -1px; }

/* ═══ Cabeçalho de tela ══════════════════════════════════════════════════════════════════ */
.rs-cabeca {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 0 0 26px;
}
.rs-cabeca h1, .rs-cabeca h2, .rs-cabeca h3, .rs-cabeca h4, .rs-cabeca h5 {
    font-family: var(--rs-display); font-weight: 700; color: var(--rs-marca);
    font-size: 1.32rem; letter-spacing: -.01em; margin: 0;
}
.rs-cabeca .rs-sub { font-size: .8rem; color: var(--rs-tinta-2); margin: 3px 0 0; }
.rs-cabeca .rs-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ⚡ A TRAVA DE TAMANHO (20/08/2026). Ele mediu a olho e estava certo: "cada um de uma altura
   diferente". A conta era esta — VOLTAR levava `rs-btn-sm` e o botão de criar não; o de
   Processos ainda trazia `btn rounded-pill px-4 btn-sm fw-bold shadow-sm` e um `style` com a cor
   escrita à mão; o do Financeiro era dourado enquanto todos os outros eram azuis. Resultado:
   30px, 37px e 43px lado a lado, e um deles fora de eixo.

   A marcação foi arrumada uma a uma, mas isso sozinho não impede a próxima. Por isso o tamanho
   passa a ser função do LUGAR: o que estiver na faixa de ações do cabeçalho tem estas medidas,
   com ou sem o modificador certo. Especificidade (0,3,0) ganha das utilidades do Bootstrap
   `.shadow-sm` e `.px-4` (0,1,0) sem precisar de `!important`.                                 */
.rs-cabeca .rs-acoes .rs-btn {
    padding: 8px 18px; font-size: .76rem; min-height: 34px;
    border-radius: var(--rs-raio-pilula); box-shadow: none;
}
/* E a ordem: VOLTAR é sempre o PRIMEIRO da faixa. Estava à direita da ação principal no
   Financeiro e à esquerda em todas as outras — o botão de sair da tela mudava de lugar conforme
   a tela. `order` garante isso mesmo que a marcação futura o escreva por último. */
.rs-cabeca .rs-acoes .rs-voltar { order: -1; }

/* ═══ Cartão do painel ═══════════════════════════════════════════════════════════════════
   Substitui o `.menu-card`, aprovado em 19/08/2026. O que mudou e por quê:

   • a borda esquerda de 5px virou um FILETE de 2px — o acento marca, não pinta;
   • o título saiu da caixa alta em peso 800: quando tudo grita, nada tem ênfase;
   • a marca-d'água gigante girando no hover saiu — luxo é contido;
   • o cartão deixou de ser um <div onclick> e virou um <a> que cobre a área toda, então
     funciona no teclado e no leitor de tela. O botão de cor fica ACIMA dele, por z-index,
     em vez de aninhado — <button> dentro de <a> é marcação inválida.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.rs-cartao {
    position: relative; height: 100%;
    background: var(--rs-superficie);
    border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo);
    padding: 18px 20px 16px;
    transition: border-color var(--rs-transicao), box-shadow var(--rs-transicao);
}
.rs-cartao::before {
    content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px;
    width: 2px; border-radius: 0 2px 2px 0;
    background: var(--cor-card, var(--rs-marca));
}
/* ═══ A grade dos cartões — uma só, no site inteiro (20/08/2026) ═════════════════════════
   Antes, cada tela montava a sua: o início usava `col-6 col-lg-3` e as Ferramentas
   `col-6 col-md-4 col-lg-3`. Como as colunas do Bootstrap são FRAÇÕES da linha, o cartão media
   337px no início e 247px nas Ferramentas — o mesmo componente com dois tamanhos, só porque as
   páginas têm larguras diferentes. E o início agora ocupa a tela toda, o que aumentaria ainda
   mais a distância.

   Por isso a coluna aqui é LARGURA FIXA, não fração: `repeat(auto-fill, var(--rs-cartao-larg))`.
   O cartão mede o mesmo em qualquer página; o que muda de uma tela para outra é quantos cabem
   por linha. É o oposto do que o Bootstrap faz, e é justamente por isso que resolve.
   A altura mínima vem junto — sem ela, um cartão de atalho (ícone + nome) fica visivelmente mais
   baixo que um cartão-medida (ícone + número + nome + linha de apoio) na mesma tela.            */
.rs-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--rs-cartao-larg));
    justify-content: start;
    gap: 14px;
}
/* `justify-content: center` é o que faz o cartão curto usar a altura padrão sem parecer errado:
   o conteúdo fica no meio em vez de colado no topo, com um vão morto embaixo. */
.rs-cartao { min-height: var(--rs-cartao-alt); display: flex; flex-direction: column;
             justify-content: center; }

.rs-cartao:hover { border-color: var(--rs-tinta-2); box-shadow: var(--rs-elev-1); }
.rs-cartao:focus-within { border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .18); }

.rs-cartao-ico { color: var(--cor-card, var(--rs-marca)); font-size: 1.05rem; opacity: .55;
                 display: block; margin-bottom: 12px; }
.rs-cartao-link {
    font-family: var(--rs-display); font-weight: 700; font-size: 1.02rem;
    color: var(--rs-marca); line-height: 1.2; letter-spacing: -.005em;
    text-decoration: none; display: block;
}
.rs-cartao-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rs-cartao-link:hover { color: var(--rs-marca-2); }
.rs-cartao-link:focus-visible { outline: none; }
.rs-cartao-sub { font-size: .78rem; color: var(--rs-tinta-2); margin: 4px 0 0; line-height: 1.4;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-cartao-cor {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 26px; height: 26px; border-radius: var(--rs-raio-circulo);
    background: transparent; border: 1px solid transparent; color: var(--rs-tinta-3);
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; cursor: pointer; opacity: 0; transition: all var(--rs-transicao);
}
.rs-cartao:hover .rs-cartao-cor, .rs-cartao-cor:focus-visible { opacity: 1; }
.rs-cartao-cor:hover { border-color: var(--rs-fio-2); color: var(--rs-marca); }
.rs-cartao-cor:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 1px; }

/* ═══ Cartão-medida — o cartão de acesso que também informa (início) ═════════════════════
   Fusão de principal.php + painel.php, 20/08/2026. NÃO é um componente novo: é o `.rs-cartao`
   de sempre, com o número da seção acima do nome. A regra é "a barra navega, a página informa" —
   e o cartão continua sendo a porta, com a cor escolhida e o arrastar-para-ordenar intactos.
   O número herda `--cor-card`, como o filete e o ícone: o acento marca, não pinta.            */
.rs-cartao-medida .rs-cartao-ico { margin-bottom: 10px; }
.rs-cartao-num {
    font-family: var(--rs-display); font-weight: 700; font-size: 1.95rem;
    color: var(--cor-card, var(--rs-marca)); line-height: 1; margin: 0 0 5px;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
/* Dinheiro é mais largo que uma contagem: a 1,95rem, "R$ 12.345,67" quebra em duas linhas
   num cartão de meia coluna no celular. */
.rs-cartao-num.moeda { font-size: 1.35rem; letter-spacing: -.02em; }

/* ═══ Painel de conteúdo — o "card de fundo" ═════════════════════════════════════════════ */
.rs-painel {
    background: var(--rs-superficie);
    border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo);
    padding: 20px 22px;
}
.rs-painel + .rs-painel { margin-top: 16px; }

/* ═══ Ficha de lista (cliente, processo) ═════════════════════════════════════════════════
   O cartão de cliente pintava o FUNDO INTEIRO de verde para dizer "compartilhado", e ficava
   ao lado de outro cinza: dois cartões do mesmo tipo, de cores e alturas diferentes. Estado
   é informação — vira selo, não tinta. O fundo é sempre branco; a cor do cliente vive no
   filete, como no cartão do painel.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.rs-ficha {
    /* Mesma altura mínima do `.rs-cartao`: ficha e cartão são o mesmo tijolo do site, e um
       parágrafo a mais de conteúdo não pode mudar o tamanho da peça. Ver `--rs-cartao-alt`. */
    position: relative; height: 100%; min-height: var(--rs-cartao-alt);
    display: flex; flex-direction: column; gap: 9px;
    background: var(--rs-superficie);
    border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo);
    padding: 16px 18px 15px;
    transition: border-color var(--rs-transicao), box-shadow var(--rs-transicao);
}
.rs-ficha::before {
    content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px;
    border-radius: 0 2px 2px 0; background: var(--cor-card, var(--rs-marca));
}
.rs-ficha:hover { border-color: var(--rs-tinta-2); box-shadow: var(--rs-elev-1); }
.rs-ficha-topo { display: flex; align-items: flex-start; gap: 10px; }
.rs-ficha-ico { color: var(--cor-card, var(--rs-marca)); font-size: .95rem; opacity: .55;
                background: none; border: 0; padding: 0; cursor: pointer; line-height: 1.5; }
.rs-ficha-ico:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }
.rs-ficha-nome { font-weight: 700; font-size: .94rem; color: var(--rs-marca); line-height: 1.25;
                 margin: 0; overflow: hidden; text-overflow: ellipsis; }
.rs-selo {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 10px; border-radius: var(--rs-raio-pilula);
    background: var(--rs-ok-fraco); color: var(--rs-ok); border: 1px solid rgba(23,115,74,.18);
}
.rs-dado {
    font-family: var(--rs-dado); font-size: .78rem; color: var(--rs-tinta-2);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    background: var(--rs-fundo); border: 1px solid var(--rs-fio); border-radius: 4px;
    padding: 4px 9px; cursor: copy; align-self: flex-start;
}
.rs-dado:hover { border-color: var(--rs-tinta-2); color: var(--rs-marca); }
.rs-ficha-acoes { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.rs-ficha-acoes .rs-btn { flex: 1; }

/* ═══ Notícias do Judiciário ═════════════════════════════════════════════════════════════
   O `principal.php` era só uma lista de atalhos. Agora abre com o que mudou no Judiciário
   desde a última vez que ele entrou. Os dados vêm de cache gravado por cron — a página nunca
   espera um portal de tribunal responder. Ver includes/noticias.php.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.rs-secao { display: flex; align-items: baseline; justify-content: space-between;
            gap: 14px; flex-wrap: wrap; margin: 34px 0 14px; }
.rs-secao h2 { font-family: var(--rs-display); font-size: 1.06rem; font-weight: 700;
               color: var(--rs-marca); margin: 0; letter-spacing: -.01em; }
.rs-secao .quando { font-size: .74rem; color: var(--rs-tinta-2); }   /* fica sobre o fundo da página, não sobre cartão */

.rs-filtros { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; }
.rs-chip {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: 5px 13px; border-radius: var(--rs-raio-pilula);
    background: var(--rs-superficie); color: var(--rs-tinta-2);
    border: 1px solid var(--rs-fio-2); cursor: pointer; transition: all var(--rs-transicao);
}
.rs-chip:hover { border-color: var(--rs-tinta-2); color: var(--rs-marca); }
.rs-chip[aria-pressed="true"] { background: var(--rs-marca); border-color: var(--rs-marca); color: #fff; }
.rs-chip:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }

/* ⚡ TRÊS COLUNAS FIXAS (20/08/2026, pedido dele): "deixa apenas 3 linhas 3 colunas".
   Com `auto-fill` a 1080px cabiam 3 numa largura e 2 noutra, e o bloco de nove itens
   deixava de ser 3×3. Coluna fixa é o que torna "três linhas" uma promessa cumprida. */
.rs-noticias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rs-noticia {
    position: relative; display: flex; flex-direction: column; gap: 7px;
    background: var(--rs-superficie); border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo); padding: 15px 17px 14px;
    transition: border-color var(--rs-transicao), box-shadow var(--rs-transicao);
}
.rs-noticia:hover { border-color: var(--rs-tinta-2); box-shadow: var(--rs-elev-1); }
.rs-noticia:focus-within { border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .18); }
.rs-noticia-alto { display: flex; align-items: center; gap: 9px; }
.rs-fonte {
    font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 9px; border-radius: var(--rs-raio-pilula);
    background: rgba(var(--rs-marca-rgb), .07); color: var(--rs-marca); flex: none;
}
.rs-fonte.ouro  { background: rgba(var(--rs-ouro-rgb), .16); color: #6b5518; }
.rs-fonte.tinta { background: var(--rs-fundo); color: var(--rs-tinta-2); border: 1px solid var(--rs-fio); }
.rs-noticia time { font-size: .7rem; color: var(--rs-tinta-3); font-variant-numeric: tabular-nums; }
.rs-noticia h3 { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.32;
                 color: var(--rs-marca); letter-spacing: -.005em; }
.rs-noticia h3 a { color: inherit; text-decoration: none; }
.rs-noticia h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rs-noticia h3 a:hover { color: var(--rs-marca-2); }
.rs-noticia h3 a:focus-visible { outline: none; }
.rs-noticia p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--rs-tinta-2); }

.rs-vazio { border: 1px dashed var(--rs-fio-2); border-radius: var(--rs-raio-cartao-novo);
            padding: 28px; text-align: center; color: var(--rs-tinta-2); font-size: .88rem; }

/* ═══ Agenda de prazos (prazos.php, 20/08/2026) ══════════════════════════════════════════
   A tela reaproveita o registro largo (`.rs-linha`) — um prazo é uma linha de lista, não um
   tijolo de 246px: o número do processo, o órgão e o fundamento não cabem num azulejo. O que
   se acrescenta aqui é só o que a agenda tem de próprio: a data em bloco, os selos de origem
   e o "como esta data foi calculada".                                                        */
.rs-sub { font-size: .8rem; color: var(--rs-tinta-2); margin: 2px 0 0; }

/* A nota do topo. `atencao` é a que explica que prazo deduzido é sugestão — a informação mais
   importante da tela, e por isso a única com filete dourado. */
.rs-nota {
    border: 1px solid var(--rs-fio-2); border-left: 3px solid var(--rs-tinta-3);
    border-radius: var(--rs-raio-cartao-novo);
    padding: 13px 16px; margin-bottom: 16px;
    font-size: .84rem; line-height: 1.5; color: var(--rs-tinta-2);
    background: var(--rs-superficie);
}
.rs-nota b { color: var(--rs-marca); }
.rs-nota.atencao { border-left-color: var(--rs-ouro); }
.rs-nota.boa     { border-left-color: var(--rs-marca); }
.rs-nota.ruim    { border-left-color: var(--rs-erro); color: var(--rs-erro); }

/* Abas da agenda — mesmo desenho das fichas do módulo Análises, para não inventar um terceiro. */
.rs-abas { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px;
           border-bottom: 1px solid var(--rs-fio-2); }
.rs-abas a {
    padding: 9px 15px; font-size: .8rem; font-weight: 600; text-decoration: none;
    color: var(--rs-tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rs-abas a:hover { color: var(--rs-marca); }
.rs-abas a.on    { color: var(--rs-marca); border-bottom-color: var(--rs-ouro); }
.rs-abas a b {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    background: var(--rs-fundo); border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-circulo); font-size: .7rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rs-linha-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* A data em bloco, à esquerda do registro. Tabular para os dias alinharem coluna a coluna. */
.rs-prazo-dia {
    width: 62px; flex: 0 0 62px; text-align: center; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.rs-prazo-dia b { display: block; font-family: var(--rs-display); font-weight: 700;
                  font-size: 1.5rem; color: var(--cor-card, var(--rs-marca)); }
.rs-prazo-dia i { display: block; font-style: normal; font-size: .68rem; text-transform: uppercase;
                  letter-spacing: .06em; color: var(--rs-tinta-2); }
.rs-prazo-dia u { display: block; text-decoration: none; font-size: .64rem; color: var(--rs-tinta-3); }

.rs-prazo-selos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.rs-prazo-fund  { font-size: .78rem; color: var(--rs-tinta-2); margin: 8px 0 0; line-height: 1.45; }

.rs-prazo-mais { margin-top: 8px; font-size: .78rem; }
.rs-prazo-mais summary { cursor: pointer; color: var(--rs-marca-2); font-weight: 600; }
.rs-prazo-mais summary:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }
.rs-prazo-mais ol { margin: 8px 0 0 18px; color: var(--rs-tinta-2); line-height: 1.6; }
.rs-prazo-texto {
    margin: 10px 0 0; padding: 10px 12px; background: var(--rs-fundo);
    border-radius: var(--rs-raio-cartao-novo); color: var(--rs-tinta-2);
    line-height: 1.55; max-height: 220px; overflow-y: auto;
}
/* As ações do prazo empilham em coluna: são três botões e um registro só tem 97px de altura. */
.rs-prazo .rs-linha-acoes { flex-direction: column; align-items: stretch; gap: 6px; }
.rs-prazo .rs-linha-acoes form { margin: 0; }
.rs-prazo .rs-linha-acoes .rs-btn { width: 100%; }
/* O registro do prazo cresce com o conteúdo — o `details` aberto não pode ficar espremido. */
.rs-prazo { align-items: flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ETAPA 04 — o que ainda vivia dentro das páginas (20/08/2026)

   Depois da etapa 03 sobraram 368 linhas de <style> local em onze telas. Não era sobra de
   estilo próprio: era o MESMO componente reescrito em cada página, com medidas diferentes.
   A caixa de arrastar arquivo existia em quatro versões (.dropzone-custom, .dropzone-modal,
   .drop-modal, .drop-zone), o aviso flutuante em três (.toast-float, .toast-copy) e o botão
   de cor em três tamanhos (38px, 38px, 30px). Nada disso é decisão de tela — é o mesmo objeto.

   ⚠ O que NÃO subiu de propósito: `.icon-circle`. As três páginas que a declaram querem
   coisas diferentes com o mesmo nome (65px no painel, 38px em clientes, 75px em ferramentas).
   Subir para cá faria as três brigarem. Onde o objeto é o mesmo, vira componente; onde só o
   NOME é o mesmo, a tela deixa de usar esse nome.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ Métrica — o número em destaque (financeiro) ════════════════════════════════════════
   Quatro cartões de valor que hoje pintam o ícone com pastel fora da paleta (#d4f1d4,
   #fadbd8, #d6eaf8, #fef5e7, escritos no atributo style de cada um). A cor entra por
   `--cor`, e só o ícone e o número a recebem: o cartão continua branco como todos.        */
.rs-metrica {
    position: relative; height: 100%;
    background: var(--rs-superficie);
    border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color var(--rs-transicao), box-shadow var(--rs-transicao);
}
.rs-metrica::before {
    content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px;
    border-radius: 0 2px 2px 0; background: var(--cor-card, var(--rs-marca));
}
.rs-metrica:hover { border-color: var(--rs-tinta-2); box-shadow: var(--rs-elev-1); }
.rs-metrica-ico   { color: var(--cor-card, var(--rs-marca)); font-size: 1rem; opacity: .55; }
.rs-metrica-rot   { font-size: .66rem; font-weight: 700; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--rs-tinta-2); }
.rs-metrica-valor { font-family: var(--rs-display); font-size: 1.45rem; font-weight: 700;
                    color: var(--cor-card, var(--rs-marca)); line-height: 1.1; margin: 0;
                    font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ═══ Linha de lista — o registro largo (processos, arquivos, anexos) ════════════════════
   O `.row-processo` de processos.php e o `.file-item` de minutar.php são o mesmo objeto:
   um registro que ocupa a largura toda. O filete de 8px virou 2px, como no cartão.        */
.rs-linha {
    position: relative;
    background: var(--rs-superficie);
    border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo);
    padding: 14px 18px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 14px;
    transition: border-color var(--rs-transicao), box-shadow var(--rs-transicao);
}
.rs-linha::before {
    content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px;
    border-radius: 0 2px 2px 0; background: var(--cor-card, var(--rs-fio-2));
}
.rs-linha:hover { border-color: var(--rs-tinta-2); box-shadow: var(--rs-elev-1); }
.rs-linha-corpo { flex: 1; min-width: 0; }
.rs-linha-nome  { font-weight: 700; font-size: .94rem; color: var(--rs-marca); margin: 0;
                  line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.rs-linha-sub   { font-size: .74rem; color: var(--rs-tinta-3); margin: 3px 0 0; }
.rs-linha-acoes { display: flex; align-items: center; gap: 8px; flex: none; }

/* ═══ Rótulo e valor — o par de leitura (ficha do cliente) ═══════════════════════════════ */
.rs-rotulo { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
             color: var(--rs-tinta-2); margin-bottom: 2px; display: block; }
.rs-valor  { font-size: .95rem; color: var(--rs-tinta); margin: 0 0 14px; line-height: 1.4; }

/* ═══ Caixa de arrastar arquivo — uma, no lugar de quatro ═══════════════════════════════
   Traço tracejado dourado sobre fundo claro; no arrasto, o fundo aquece e a borda vira navy.
   `.rs-drop-g` é a versão grande (a tela cheia de gerenciar_arquivos e a de minutar).      */
.rs-drop {
    border: 2px dashed var(--rs-ouro);
    border-radius: var(--rs-raio);
    background: var(--rs-fundo);
    padding: 22px; min-height: 100px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; cursor: pointer;
    transition: background var(--rs-transicao), border-color var(--rs-transicao);
}
.rs-drop:hover, .rs-drop.dz-drag-hover, .rs-drop.drag-over, .rs-drop.dragover {
    background: var(--rs-alerta-fraco); border-color: var(--rs-marca);
}
.rs-drop .dz-message { margin: 0; text-align: center; }
.rs-drop i { font-size: 2rem; color: var(--rs-ouro); }
.rs-drop:hover i { color: var(--rs-marca); }
.rs-drop h5 { font-size: .95rem; font-weight: 700; color: var(--rs-marca); margin: 0; }
.rs-drop p  { font-size: .8rem; color: var(--rs-tinta-2); margin: 0; }
.rs-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%;
                            opacity: 0; cursor: pointer; }
.rs-drop-g { min-height: 220px; padding: 34px; }
.rs-drop-g i { font-size: 2.8rem; }

/* ═══ Aviso flutuante — um, no lugar de três ═════════════════════════════════════════════ */
.rs-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: var(--rs-marca); color: #fff;
    padding: 11px 26px; border-radius: var(--rs-raio-pilula);
    box-shadow: 0 8px 24px rgba(var(--rs-marca-rgb), .35);
    z-index: 9999; font-size: .84rem; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    opacity: 0; transition: opacity var(--rs-transicao), bottom var(--rs-transicao);
    pointer-events: none;
}
.rs-toast.show { opacity: 1; bottom: 40px; }

/* ═══ Escolha de cor do cartão ═══════════════════════════════════════════════════════════ */
.rs-cor-opc {
    width: 34px; height: 34px; border-radius: var(--rs-raio-circulo);
    display: inline-block; cursor: pointer; margin: 5px;
    border: 2px solid transparent; padding: 0;
    transition: transform var(--rs-transicao), border-color var(--rs-transicao);
}
.rs-cor-opc:hover { transform: scale(1.1); }
.rs-cor-opc.selected { border-color: var(--rs-marca); transform: scale(1.1); }
.rs-cor-opc:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }

/* ═══ Arrastar para reordenar (Sortable) ════════════════════════════════════════════════ */
.sortable-ghost   { opacity: .4; }
.sortable-chosen  { box-shadow: var(--rs-elev-2); transform: scale(1.02); }

/* ═══ Título dentro de painel, e cabeça de tabela ═══════════════════════════════════════
   O título dos painéis era `h6.fw-bold` em caixa alta, escrito à mão em cada tela; o fio
   dourado da cabeça de tabela era `style="border-bottom:2px solid #bba36f"` inline — ouro
   como fio horizontal de 2px sobre branco é o uso que sobrou dele, e é decoração, não texto.
   Vira um fio discreto; o rótulo lê em cinza, que passa na norma.                          */
.rs-painel-tit {
    font-family: var(--rs-display); font-size: .8rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--rs-tinta-2); margin: 0 0 14px;
}
.rs-tabela-cabeca th {
    font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--rs-tinta-2); border-bottom: 1px solid var(--rs-fio-2) !important;
}

/* ═══ Variantes do selo ═════════════════════════════════════════════════════════════════
   O selo nasceu verde (o "compartilhado" de clientes). O nível do usuário no gerenciador
   usava `.badge-nivel` com fundo navy e texto DOURADO — 2,45:1, o mesmo erro de contraste
   que a etapa 02 corrigiu no resto do site. Sobre navy o texto passa a ser branco.        */
.rs-selo.marca  { background: var(--rs-marca); color: #fff; border-color: var(--rs-marca); }
.rs-selo.neutro { background: var(--rs-fundo); color: var(--rs-tinta-2); border-color: var(--rs-fio-2); }
.rs-selo.aviso  { background: var(--rs-alerta-fraco); color: var(--rs-alerta); border-color: rgba(138,100,16,.2); }
.rs-selo.erro   { background: var(--rs-erro-fraco); color: var(--rs-erro); border-color: rgba(168,64,47,.2); }

/* ═══ O cartão que abre modal ═══════════════════════════════════════════════════════════
   Em ferramentas.php o cartão não navega: abre um modal. O alvo passou a ser um <button>
   com a mesma classe do <a> — mesma aparência, e o teclado continua chegando nele. Sem
   este bloco o navegador desenharia o botão nativo (fundo cinza, borda, texto centrado). */
button.rs-cartao-link {
    background: none; border: 0; padding: 0; width: 100%; text-align: left;
    cursor: pointer; font-family: var(--rs-display);
}

/* ═══ Título em navy ═══════════════════════════════════════════════════════════════════
   `.text-dark-blue` era usada em ONZE telas e declarada em três: nas outras oito o título
   saía preto do navegador. É o tipo de coisa que a folha única existe para não deixar
   acontecer.                                                                              */
.text-dark-blue { color: var(--rs-marca); font-weight: 700; }

/* ═══ Duas utilidades que as páginas usavam sem nunca ter declarado ═════════════════════
   `.cursor-pointer` (o rótulo de compartilhar, em clientes.php) e `.hover-bg` (a linha da
   lista de backups, em gerenciador.php) apareciam na marcação e não existiam em folha
   nenhuma — o Bootstrap 5.3 não traz as duas. Não quebravam nada; simplesmente não faziam
   nada, e é o tipo de coisa que só aparece quando se conta classe usada contra classe
   declarada.                                                                              */
.cursor-pointer { cursor: pointer; }
.hover-bg { transition: background var(--rs-transicao); }
.hover-bg:hover { background: var(--rs-fundo); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ETAPA 05 — o site no celular (20/08/2026)

   A auditoria contou UMA media query no site inteiro. Não era exagero: fora a barra do topo,
   nenhuma tela tinha regra de tela estreita. Não quebrava de forma escandalosa porque o grid
   do Bootstrap empilha as colunas sozinho — o que sobrava era o resto: respiro de desktop
   (26px de cada lado num aparelho de 360px), título e ações lado a lado espremidos, a grade
   de notícias com coluna mínima de 340px, que ESTOURA a largura num telefone pequeno, e os
   botões redondos de 30px, abaixo do alvo de toque de 44px que a norma pede.

   A ordem aqui é de fora para dentro: primeiro o que vale para toda tela pequena, depois o
   que só vale para telefone. Cada bloco diz o que conserta.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .rs-pagina { padding: 20px 16px 48px; }

    /* ── A grade de notícias não pode ter coluna mínima maior que a tela ────────────────────
       `minmax(340px, 1fr)` é um piso ABSOLUTO: num aparelho de 360px, com 22px de respiro de
       cada lado, sobram 316px e a coluna de 340 empurra a página para o lado. `min()` cede.

       ⚡ Esta regra vivia FORA de qualquer media query, logo abaixo da abertura da etapa 05.
       Enquanto a regra base era `auto-fill`, as duas diziam a mesma coisa e ninguém percebia.
       Quando a base virou `repeat(3, …)` — as três colunas que ele pediu —, esta linha passou
       a desfazer aquilo em silêncio, e o feed abria com quatro colunas em vez de três. Dentro
       da media query ela volta a fazer só o que o comentário promete. */
    .rs-noticias { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
    /* Título e ações deixam de disputar a mesma linha. */
    .rs-cabeca { flex-wrap: wrap; gap: 10px; }
    .rs-cabeca .rs-acoes { width: 100%; }
    /* O registro largo vira dois andares em vez de espremer as colunas. */
    .rs-linha { flex-wrap: wrap; }
    .rs-linha-corpo { flex-basis: 100%; order: -1; }
}

@media (max-width: 600px) {
    .rs-pagina { padding: 16px 12px 40px; }

    /* Cartões: o respiro de desktop come metade da largura útil num telefone. */
    .rs-cartao  { padding: 15px 16px 14px; }
    /* ⚡ No telefone a largura fixa deixa de servir: 258px numa tela de 360px com 24px de
       respiro sobra uma faixa branca inútil à direita, e em telas de 320px estoura para fora.
       Aqui a coluna volta a ser fração — dois por linha, ocupando o que há. */
    .rs-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rs-cartao, .rs-ficha { min-height: 0; }
    .rs-ficha   { padding: 14px 15px 13px; }
    .rs-painel  { padding: 16px 15px; }
    .rs-metrica { padding: 14px 15px; }
    .rs-metrica-valor { font-size: 1.25rem; }

    /* Ações de ficha empilham: dois botões lado a lado num cartão de 300px ficam ilegíveis. */
    .rs-ficha-acoes { flex-wrap: wrap; }
    .rs-ficha-acoes .rs-btn { flex: 1 1 100%; }

    /* Modal encostado nas bordas ganha respiro. */
    .modal-dialog { margin: 12px; }
    .modal-content.p-4 { padding: 18px !important; }

    /* Caixa de arrastar: no telefone não se arrasta, se toca — a versão grande é desperdício. */
    .rs-drop-g { min-height: 150px; padding: 22px; }
    .rs-drop-g i { font-size: 2.2rem; }

    /* Tela de acesso. */
    .login-card { padding: 34px 24px; }
    .bg-login   { padding: 16px; height: 100dvh; }
}

/* ── Alvo de toque ─────────────────────────────────────────────────────────────────────────
   Em aparelho de toque o ponteiro é o dedo, não o mouse: 30px é pequeno demais para acertar.
   `pointer: coarse` mira o aparelho, não a largura — um tablet largo também entra aqui.      */
@media (pointer: coarse) {
    .rs-btn-ico { width: 40px; height: 40px; }
    .rs-cor-opc { width: 40px; height: 40px; }
    .rs-cartao-cor { width: 34px; height: 34px; opacity: 1; }   /* sem hover, tem de estar visível */
}

/* ── Quem pediu menos movimento ────────────────────────────────────────────────────────────
   Preferência do sistema operacional. O site anima cartão, ícone e marca-d'água; para quem
   sente enjoo com movimento isso não é enfeite, é obstáculo.                                 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

/* ── Impressão ─────────────────────────────────────────────────────────────────────────────
   Imprimir uma tela do sistema saía com a barra navy chapada em tinta e os botões no papel. */
@media print {
    .rs-topo, .rs-btn, .rs-btn-ico, .rs-voltar, .rs-cartao-cor, .rs-filtros { display: none !important; }
    .rs-pagina { max-width: none; padding: 0; }
    .rs-painel, .rs-cartao, .rs-ficha, .rs-linha, .rs-metrica { border: 1px solid #999; box-shadow: none; }
    body { background: #fff; }
}

/* ═══ O dado copiável virou <button> ═════════════════════════════════════════════════════
   Era `<span onclick>`: o mouse copiava, o teclado não alcançava e o leitor de tela lia um
   texto qualquer, sem dizer que ali havia uma ação. Como <button> ele entra na ordem de
   tabulação e responde ao Enter de graça — em troca é preciso desfazer o desenho nativo. */
button.rs-dado {
    font-family: var(--rs-dado); text-align: left; line-height: 1.35;
    -webkit-appearance: none; appearance: none;
}
button.rs-dado:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }

/* ═══ O cinza do Bootstrap ══════════════════════════════════════════════════════════════
   `.text-muted` aparece 60+ vezes na marcação e vem do Bootstrap com #6c757d — o mesmo
   cinza que acabou de reprovar no contraste. Não adianta escurecer o token e deixar a
   classe do framework pintando por baixo: passa a ler o token.                            */
.text-muted { color: var(--rs-tinta-2) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
   ABERTURA DO INÍCIO — a composição do modelo aprovado (20/08/2026).
   Vive aqui, e não no <style> da página, pela regra da etapa 04: componente
   declarado dentro de uma tela não viaja para a seguinte, e foi assim que o
   financeiro ficou sem folha. Só o `principal.php` a usa hoje.
   ⚠ Todos os acentos geométricos são `position:absolute` dentro de um pai com
   `overflow:hidden` — sem isso, o círculo e o quarto de círculo empurram a
   página lateralmente no celular.
   ═══════════════════════════════════════════════════════════════════════════ */
.rs-abertura { position: relative; overflow: hidden; padding: 46px 0 52px; margin-bottom: 8px; }

.rs-g-pontos { position: absolute; top: 64px; right: 18px; width: 172px; height: 112px;
    background-image: radial-gradient(var(--rs-ouro) 2.4px, transparent 2.4px);
    background-size: 36px 36px; opacity: .5; }
.rs-g-circulo { position: absolute; top: -96px; right: -96px; width: 230px; height: 230px;
    border-radius: 50%; background: var(--rs-ouro); opacity: .28; }
.rs-g-quarto { position: absolute; left: -92px; bottom: -84px; width: 230px; height: 230px;
    border-radius: 0 100% 0 0; background: var(--rs-marca-2); opacity: .13; }
.rs-g-linhas { position: absolute; right: 52px; bottom: 0; display: flex; gap: 15px; opacity: .38; }
.rs-g-linhas i { display: block; width: 1px; height: 92px; background: var(--rs-marca-2); }

.rs-grade { position: relative; display: grid; gap: 0 38px; align-items: center;
    grid-template-columns: 52px minmax(0, .9fr) minmax(0, 1.1fr); }

.rs-lateral { display: grid; justify-items: center; gap: 16px; align-self: stretch; padding-top: 6px; }
.rs-lateral .ano { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.8rem;
    font-weight: 900; letter-spacing: .2em; color: var(--rs-tinta-3); opacity: .55;
    font-variant-numeric: tabular-nums; }
.rs-lateral .risco { width: 44px; height: 1px; background: var(--rs-tinta-3); opacity: .5; }

/* camadas: retângulo ouro + poste + cartão deslocado + retângulo pequeno */
.rs-camadas { position: relative; padding: 28px 0 32px 28px; }
.rs-camadas .bloco-ouro { position: absolute; left: 0; top: 0; width: 78%;
    height: calc(100% - 44px); background: var(--rs-ouro); opacity: .82; }
.rs-camadas .poste { position: absolute; left: 66%; top: -36px; width: 12px; height: 126px;
    background: var(--rs-marca-2); opacity: .33; }
.rs-camadas .bloco-mini { position: absolute; left: 44%; bottom: -14px; width: 62px; height: 76px;
    background: var(--rs-ouro); }

.rs-cartao-agenda { position: relative; z-index: 2; background: #fff;
    border: 1px solid var(--rs-fio); box-shadow: var(--rs-elev-2);
    padding: 24px 26px; margin-left: 32px; }
/* O rodapé do cartão de abertura: leva à agenda inteira, já que aqui só cabem três. */
.rs-cartao-agenda .rs-agenda-link {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--rs-marca-2); text-decoration: none;
}
.rs-cartao-agenda .rs-agenda-link i { font-size: .68rem; transition: transform var(--rs-transicao); }
.rs-cartao-agenda .rs-agenda-link:hover i { transform: translateX(3px); }
.rs-cartao-agenda .rotulo { font-size: .65rem; font-weight: 800; letter-spacing: .17em;
    text-transform: uppercase; color: var(--rs-tinta-2); }
.rs-cartao-agenda h2 { margin: 8px 0 3px; font-size: 1.12rem; font-weight: 800;
    letter-spacing: -.015em; line-height: 1.32; text-wrap: balance; }
.rs-cartao-agenda .onde { margin: 0; font-size: .82rem; color: var(--rs-tinta-2); }
.rs-cartao-agenda .lista { margin-top: 17px; display: grid; }
.rs-cartao-agenda .item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px;
    align-items: center; padding: 11px 0; border-top: 1px solid var(--rs-fio); }
.rs-cartao-agenda .dia { text-align: center; font-variant-numeric: tabular-nums; }
.rs-cartao-agenda .dia b { display: block; font-size: 1.1rem; font-weight: 900; line-height: 1; }
.rs-cartao-agenda .dia i { display: block; font-style: normal; font-size: .57rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--rs-tinta-3); margin-top: 3px; }
.rs-cartao-agenda .que { font-size: .84rem; line-height: 1.38; }
.rs-cartao-agenda .que em { display: block; font-style: normal; font-size: .74rem;
    color: var(--rs-tinta-2); }
.rs-cartao-agenda .selo { font-size: .59rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
    background: var(--rs-fundo); color: var(--rs-tinta-2); white-space: nowrap; }
.rs-cartao-agenda .selo.urgente { background: var(--rs-marca); color: #fff; }

/* escada tipográfica */
.rs-escada h1 { margin: 0; font-weight: 900; letter-spacing: -.042em; line-height: .92;
    font-size: clamp(2.2rem, 5.2vw, 4.1rem); text-wrap: balance; }
.rs-escada h1 span { display: block; }
.rs-escada h1 .a { color: var(--rs-marca); }
.rs-escada h1 .b { color: var(--rs-marca-2); opacity: .55; padding-left: .07em; }
.rs-escada h1 .c { color: var(--rs-ouro); padding-left: .14em; }
.rs-escada .abaixo { margin-top: 30px; display: grid;
    grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; }

/* bloco navy com o botão pílula sobreposto na base — do modelo */
.rs-bloco-nota { position: relative; background: var(--rs-marca); color: #fff;
    padding: 22px 24px 38px; }
.rs-bloco-nota p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.87); max-width: 38ch; }
.rs-pilula { display: inline-block; text-decoration: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: .67rem; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; padding: 12px 24px; border-radius: 999px;
    background: var(--rs-ouro); color: var(--rs-marca); transition: filter .18s; }
.rs-pilula:hover { filter: brightness(1.08); color: var(--rs-marca); }
.rs-bloco-nota .rs-pilula { position: absolute; left: 24px; bottom: -19px; }
.rs-escada .marca-lateral { text-align: right; }
.rs-escada .marca-lateral .txt { font-size: .92rem; font-weight: 800; color: var(--rs-tinta-2); }
.rs-escada .marca-lateral .txt b { color: var(--rs-tinta); }
.rs-escada .marca-lateral .risco-h { margin: 10px 0 0 auto; width: 92px; height: 2px;
    background: var(--rs-marca-2); opacity: .5; }

/* faixa escura horizontal — no modelo é o "FOLLOW US" */
.rs-faixa-agora { grid-column: 1 / 3; justify-self: start; align-self: end;
    background: var(--rs-marca); color: #fff; padding: 11px 26px 11px 22px;
    font-size: .69rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    margin-top: 24px; position: relative; z-index: 3; }
.rs-faixa-agora b { color: var(--rs-ouro-2); }

@media (max-width: 1040px) {
    .rs-grade { grid-template-columns: 1fr; gap: 26px; }
    .rs-lateral { display: none; }
    .rs-faixa-agora { grid-column: 1; margin-top: 0; }
    .rs-camadas { padding: 18px 0 22px 16px; }
    .rs-camadas .poste, .rs-camadas .bloco-mini,
    .rs-g-linhas, .rs-g-pontos { display: none; }
    .rs-cartao-agenda { margin-left: 18px; }
    .rs-escada .abaixo { grid-template-columns: 1fr; }
    .rs-escada .marca-lateral { text-align: left; }
    .rs-escada .marca-lateral .risco-h { margin-left: 0; }
}

/* ═══ Barra de ocultar/exibir o resto do feed ══════════════════════════════════════
   O cache traz 50 notícias. Mostrar as 50 de uma vez transforma a página de início num
   mural — ele pediu 3×3 e o resto atrás de uma barra. A barra é <button>, não <div>:
   a etapa 05 zerou os `div onclick` do site e não é aqui que eles voltam. */
.rs-mais { width: 100%; margin-top: 12px; display: flex; align-items: center;
    justify-content: center; gap: 9px; background: transparent; cursor: pointer;
    border: 1px dashed var(--rs-fio-2); border-radius: var(--rs-raio-cartao-novo);
    padding: 13px 18px; font: inherit; font-size: .78rem; font-weight: 700;
    letter-spacing: .04em; color: var(--rs-tinta-2); transition: .18s; }
.rs-mais:hover { border-color: var(--rs-ouro); color: var(--rs-marca);
    background: rgba(var(--rs-ouro-rgb), .06); }
.rs-mais:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }
.rs-mais i { transition: transform .18s; }
.rs-mais[aria-expanded="true"] i { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SITE PÚBLICO — o cartão de visita (20/08/2026)

   Até hoje `rodriguesesousa.adv.br/` era a tela de login: quem chegasse pelo cartão dele, pelo
   WhatsApp ou por uma busca via um campo de e-mail e um campo de senha. O endereço da banca é
   o primeiro lugar onde um cliente confere se o escritório existe — e ali não havia escritório
   nenhum, só uma porta trancada.

   ⚡ A REGRA DO DESENHO: é a MESMA abertura do `principal.php`, não um site à parte. Os acentos
   geométricos, a escada tipográfica, o bloco ouro, o cartão deslocado e a faixa navy são as
   classes que já existem (`.rs-abertura`, `.rs-grade`, `.rs-camadas`, `.rs-escada`,
   `.rs-cartao-agenda`, `.rs-faixa-agora`). O que este bloco acrescenta é só o que o lado de
   FORA tem e o de dentro não: a barra sem sessão, a lista de contato dentro do cartão, o
   rodapé e a caixa de login.

   ⛔ Nada de foto externa. O CSP do vhost só admite imagem de `self` (a exceção do Unsplash
   existia para o fundo do login antigo e morre com ele). A composição é geométrica — que é
   também o que o timbrado faz.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Barra do topo, versão sem sessão ─────────────────────────────────────────────────────
   Não é a `.rs-topo`: aquela tem grade de três colunas para as seções arrastáveis e o disco de
   sair. Aqui são âncoras da própria página e um botão de entrar. O navy e a altura são os
   mesmos, para quem entra não sentir que trocou de site. */
.rs-site-topo { background: var(--rs-marca); position: sticky; top: 0; z-index: 1030;
    box-shadow: var(--rs-elev-topo); }
.rs-site-topo-in { max-width: var(--rs-largura); margin: 0 auto; padding: 0 22px;
    min-height: 68px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rs-site-marca { display: flex; align-items: center; padding: 13px 0; flex: none; }
.rs-site-marca img { height: 40px; width: auto; display: block; }
.rs-site-marca .texto { color: #fff; font-weight: 900; letter-spacing: .06em; font-size: .92rem; }
.rs-site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; min-width: 0;
    overflow-x: auto; scrollbar-width: none; }
.rs-site-nav::-webkit-scrollbar { display: none; }
.rs-site-nav a { flex: none; color: rgba(255,255,255,.72); text-decoration: none;
    font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    padding: 10px 14px; border-radius: var(--rs-raio-pilula); transition: color var(--rs-transicao); }
.rs-site-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.rs-site-nav a:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: -2px; }
/* O botão de entrar é ouro e é o único elemento dourado da barra: só há um lugar para clicar
   quando o assunto é o sistema. */
.rs-site-entrar { flex: none; border: 0; cursor: pointer; font-family: inherit;
    background: var(--rs-ouro); color: var(--rs-marca);
    font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    padding: 11px 22px; border-radius: var(--rs-raio-pilula); transition: filter .18s;
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.rs-site-entrar:hover { filter: brightness(1.08); color: var(--rs-marca); }
.rs-site-entrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 860px) {
    /* Duas linhas, como no resto do site no celular: marca e botão em cima, âncoras embaixo
       rolando na horizontal. Esconder a navegação seria deixar o visitante sem os endereços. */
    .rs-site-topo-in { padding: 0 16px; gap: 0; }
    .rs-site-marca { padding: 11px 0; }
    .rs-site-marca img { height: 34px; }
    .rs-site-entrar { margin-left: auto; }
    .rs-site-nav { order: 3; width: 100%; margin: 0 0 4px; padding-bottom: 4px;
                   border-top: 1px solid rgba(255,255,255,.10); padding-top: 4px; }
}

/* ── O cartão deslocado da abertura, com os contatos ──────────────────────────────────────
   Dentro do sistema o cartão da abertura lista prazos; aqui lista o endereço, o telefone e o
   e-mail — que é o que um cartão de visita tem de dizer. A moldura é a mesma
   (`.rs-cartao-agenda`), o miolo é este. */
.rs-site-contatos { margin-top: 16px; display: grid; }
.rs-site-contatos > * { display: grid; grid-template-columns: 34px 1fr; gap: 13px;
    align-items: center; padding: 12px 0; border-top: 1px solid var(--rs-fio);
    text-decoration: none; color: inherit; }
.rs-site-contatos a:hover b { color: var(--rs-marca-2); }
.rs-site-contatos .ico { width: 34px; height: 34px; border-radius: var(--rs-raio-circulo);
    display: grid; place-items: center; font-size: .82rem;
    background: rgba(var(--rs-marca-rgb), .07); color: var(--rs-marca); }
.rs-site-contatos b { display: block; font-size: .86rem; font-weight: 700; color: var(--rs-marca);
    line-height: 1.35; }
.rs-site-contatos span { display: block; font-size: .74rem; color: var(--rs-tinta-2); line-height: 1.4; }

/* ── Cartão que não é porta ───────────────────────────────────────────────────────────────
   As áreas de atuação são informação, não link: não há para onde levar. `.rs-cartao-link` é um
   <a> que cobre o cartão inteiro; sem destino, ele viraria um link morto no teclado e no leitor
   de tela. Por isso o título tem a mesma aparência e nenhuma promessa de clique.
   E a linha de apoio aqui é FRASE, não etiqueta: a `.rs-cartao-sub` corta com reticências na
   primeira linha, o que serviria a um e-mail e estraga uma descrição. */
.rs-cartao-tit { font-family: var(--rs-display); font-weight: 700; font-size: 1.02rem;
    color: var(--rs-marca); line-height: 1.2; letter-spacing: -.005em; margin: 0; display: block; }
.rs-cartao-sub.livre { white-space: normal; overflow: visible; text-overflow: clip;
    /* `overflow-wrap` é obrigatório aqui: no cartão de contato a linha é um E-MAIL, uma palavra
       só de 32 caracteres. Sem isto ela não quebra em lugar nenhum, empurra o cartão para fora
       da grade e a página inteira passa a rolar para o lado no celular (medido: 27px). */
    overflow-wrap: anywhere; }
.rs-cartao-area { justify-content: flex-start; }

/* ── Painel de texto do site ──────────────────────────────────────────────────────────────
   O `.rs-painel` de sempre, com a medida de leitura amarrada: linha de 90 caracteres cansa, e
   a página tem 1080px de largura. */
.rs-site-texto p { margin: 0 0 14px; font-size: .93rem; line-height: 1.68; color: var(--rs-tinta-corpo);
    max-width: 68ch; }
.rs-site-texto p:last-child { margin-bottom: 0; }
.rs-site-texto b { color: var(--rs-marca); }
.rs-site-duas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .rs-site-duas { grid-template-columns: 1fr; } }

/* A ficha do advogado: o filete dourado à esquerda é o mesmo acento do resto da identidade. */
.rs-site-ficha { border-left: 3px solid var(--rs-ouro); }
.rs-site-ficha .nome { font-family: var(--rs-display); font-size: 1.08rem; font-weight: 800;
    color: var(--rs-marca); margin: 0; letter-spacing: -.015em; }
.rs-site-ficha .oab { font-family: var(--rs-dado); font-size: .78rem; color: var(--rs-tinta-2);
    margin: 4px 0 14px; }
.rs-site-ficha ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.rs-site-ficha li { display: grid; grid-template-columns: 16px 1fr; gap: 10px;
    font-size: .84rem; line-height: 1.5; color: var(--rs-tinta-corpo); }
.rs-site-ficha li i { color: var(--rs-ouro); font-size: .74rem; margin-top: .32em; }

/* ── A faixa que responde "e se o meu caso não estiver na lista?" ────────────────────────── */
.rs-site-aberto { margin-top: 16px; background: var(--rs-marca); color: #fff;
    border-radius: var(--rs-raio-cartao-novo); padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rs-site-aberto p { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.87);
    max-width: 62ch; }
.rs-site-aberto b { color: var(--rs-ouro-2); font-weight: 700; }

/* ── Rodapé ───────────────────────────────────────────────────────────────────────────────
   Fecha em navy porque a barra abre em navy: a página inteira fica entre duas margens da cor
   da marca, que é o que o timbrado faz no papel. */
.rs-site-rodape { background: var(--rs-marca); color: rgba(255,255,255,.72); margin-top: 20px; }
.rs-site-rodape-in { max-width: var(--rs-largura); margin: 0 auto; padding: 42px 22px 24px;
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 30px; }
.rs-site-rodape img { height: 46px; width: auto; display: block; margin-bottom: 14px; }
.rs-site-rodape p { margin: 0 0 6px; font-size: .8rem; line-height: 1.6; }
.rs-site-rodape a { color: rgba(255,255,255,.85); text-decoration: none; }
.rs-site-rodape a:hover { color: var(--rs-ouro-2); }
.rs-site-rodape h3 { font-size: .68rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--rs-ouro); margin: 0 0 12px; }
.rs-site-rodape .fim { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 12px; padding-top: 16px; display: flex; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; font-size: .72rem; color: rgba(255,255,255,.55); }
@media (max-width: 860px) {
    .rs-site-rodape-in { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px 20px; }
}

/* ── A caixa de login ─────────────────────────────────────────────────────────────────────
   <dialog> nativo, não modal de biblioteca: o Esc para fechar, o foco preso dentro e o fundo
   inerte vêm de graça do navegador — e o site público deixa de carregar o JavaScript do
   Bootstrap só para abrir uma caixa. */
.rs-site-dialogo { border: 0; padding: 0; width: min(430px, 92vw);
    border-radius: var(--rs-raio-cartao-novo); border-top: 5px solid var(--rs-ouro);
    box-shadow: 0 24px 60px rgba(0,0,0,.38); background: var(--rs-superficie); }
.rs-site-dialogo::backdrop { background: rgba(var(--rs-marca-rgb), .58); }
.rs-site-dialogo .corpo { padding: 34px 34px 30px; }
.rs-site-dialogo .fechar { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
    border-radius: var(--rs-raio-circulo); border: 1px solid transparent; background: transparent;
    color: var(--rs-tinta-2); cursor: pointer; font-size: .95rem; line-height: 1; }
.rs-site-dialogo .fechar:hover { border-color: var(--rs-fio-2); color: var(--rs-marca); }
.rs-site-dialogo .fechar:focus-visible { outline: 2px solid var(--rs-ouro); outline-offset: 1px; }
.rs-site-dialogo h2 { font-family: var(--rs-display); font-size: 1.22rem; font-weight: 800;
    color: var(--rs-marca); margin: 0; letter-spacing: -.02em; text-align: center; }
.rs-site-dialogo .sub { font-size: .78rem; color: var(--rs-tinta-2); text-align: center;
    margin: 6px 0 26px; }
.rs-site-dialogo label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rs-tinta-2); margin: 0 0 6px; }
.rs-site-dialogo input { width: 100%; height: 48px; padding: 0 15px; font-size: .9rem;
    font-family: inherit; color: var(--rs-tinta-corpo);
    background: var(--rs-fundo); border: 1px solid var(--rs-fio-2); border-radius: var(--rs-raio); }
.rs-site-dialogo input:focus { outline: none; background: var(--rs-superficie);
    border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .16); }
.rs-site-dialogo .campo { margin-bottom: 16px; }
.rs-site-dialogo .pe { margin-top: 22px; text-align: center; font-size: .72rem; color: var(--rs-tinta-3); }
/* O aviso de erro do login: vermelho semântico da folha, não o `bg-danger` do Bootstrap. */
.rs-site-erro { background: var(--rs-erro-fraco); color: var(--rs-erro); border-radius: var(--rs-raio);
    padding: 11px 14px; font-size: .8rem; text-align: center; margin: 0 0 18px; }

/* ── A abertura, ajustada ao lado de fora ─────────────────────────────────────────────────
   Uma diferença só em relação ao `principal.php`: lá a escada cumprimenta pelo nome e cabe em
   três palavras; aqui ela diz o que a banca faz e precisa de um pouco menos de corpo para não
   estourar a linha no celular. */
.rs-site-heroi .rs-escada h1 { font-size: clamp(2.05rem, 4.7vw, 3.7rem); }
.rs-site-heroi .rs-escada h1 .b { opacity: .62; }

/* ── Pular para o conteúdo ────────────────────────────────────────────────────────────────
   Quem navega por teclado ou leitor de tela atravessa a barra do topo inteira antes de chegar
   ao texto. Este link é o atalho: invisível até receber o foco, e aí aparece no canto. */
.rs-pular { position: absolute; left: 12px; top: -60px; z-index: 2000;
    background: var(--rs-ouro); color: var(--rs-marca); text-decoration: none;
    font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 11px 20px; border-radius: 0 0 var(--rs-raio) var(--rs-raio);
    transition: top .18s; }
.rs-pular:focus { top: 0; color: var(--rs-marca); }

/* ═══ O chão que o Bootstrap emprestava ═══════════════════════════════════════════════════
   ⛔ ACHADO ao montar o site público (20/08/2026): a folha da casa foi escrita em cima do
   *reboot* do Bootstrap sem saber. Tirar o framework da página pública fez o cartão de 150px
   virar 222px — sem `box-sizing: border-box`, o padding e a borda passam a SOMAR à altura em
   vez de caber dentro dela, e o cartão furou a grade e subiu por cima da faixa navy de baixo.

   As quatro regras abaixo são as do reboot que a folha realmente usa, com os MESMOS valores.
   Dentro do sistema nada muda (o Bootstrap já as declarava, e rs.css carrega depois); fora
   dele, é isto que faz o desenho ficar de pé sem 230 KB de framework atrás.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }
p { margin-top: 0; margin-bottom: 1rem; }
img, svg { vertical-align: middle; }
/* `max-width` NÃO entra no global: o Bootstrap não o tem no reboot (é a classe `.img-fluid`), e
   pô-lo aqui mudaria imagem de tela do sistema que hoje está no ar. As duas imagens do site
   público (a logo do topo e a do rodapé) têm altura fixa e nunca estouram a caixa. */
button, input, select, textarea { font-family: inherit; font-size: inherit;
    line-height: inherit; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SITE PÚBLICO — 2ª rodada (20/08/2026): a coluna de feeds, o formulário de caso e o botão
   discreto de quem já está logado.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── A largura do site público ────────────────────────────────────────────────────────────
   O sistema tem UMA largura (--rs-largura: 1080px) e ela continua valendo lá dentro. Aqui a
   página ganhou mobília nova: uma coluna de notícias à direita, que não existe em tela nenhuma
   do sistema. Somar 300px de feed dentro dos 1080 espremeria a abertura — a composição
   aprovada precisa de ~1000px para não empilhar. Então o site público tem a sua medida, e ela
   é a de dentro MAIS a coluna nova: 1080 + 30 de vão + 300 = 1410. */
:root { --rs-site-largura: 1410px; --rs-site-feed: 300px; }

.rs-site-topo-in, .rs-site-rodape-in { max-width: var(--rs-site-largura); }

.rs-site-corpo { max-width: var(--rs-site-largura); margin: 0 auto; padding: 0 22px;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--rs-site-feed); gap: 30px;
    align-items: start; }
/* Dentro do grid, a `.rs-pagina` não centraliza mais nem recua: quem faz isso agora é a coluna.
   Sem esta linha, cada seção ficaria com 1080px de teto E o recuo lateral em dobro. */
.rs-site-corpo .rs-pagina { max-width: none; margin: 0; padding: 26px 0 34px; }
.rs-site-corpo .rs-pagina + .rs-pagina { padding-top: 8px; }

/* ── A coluna de feeds ────────────────────────────────────────────────────────────────────
   Gruda no alto ao rolar: a notícia acompanha a leitura em vez de ficar para trás no topo.
   Lê o MESMO cache do "Judiciário hoje" do sistema — a página pública não busca feed nenhum. */
.rs-site-feed { position: sticky; top: 88px; margin-top: 26px;
    background: var(--rs-superficie); border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo); padding: 4px 18px 14px; }
.rs-site-feed .topo { display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 14px 0 10px; border-bottom: 2px solid var(--rs-ouro); }
.rs-site-feed h2 { font-family: var(--rs-display); font-size: .96rem; font-weight: 800;
    color: var(--rs-marca); margin: 0; letter-spacing: -.01em; }
.rs-site-feed .quando { font-size: .68rem; color: var(--rs-tinta-2); white-space: nowrap; }
.rs-site-feed .item { position: relative; padding: 13px 0; border-bottom: 1px solid var(--rs-fio); }
.rs-site-feed .item:last-of-type { border-bottom: 0; }
.rs-site-feed .alto { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rs-site-feed time { font-size: .66rem; color: var(--rs-tinta-3); font-variant-numeric: tabular-nums; }
.rs-site-feed h3 { margin: 0; font-size: .84rem; font-weight: 700; line-height: 1.36;
    color: var(--rs-tinta); }
.rs-site-feed h3 a { color: inherit; text-decoration: none; }
.rs-site-feed h3 a::after { content: ""; position: absolute; inset: 0; }
.rs-site-feed h3 a:hover { color: var(--rs-marca-2); }
.rs-site-feed .ver-mais { display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; padding: 11px; border: 1px dashed var(--rs-fio-2);
    border-radius: var(--rs-raio-cartao-novo); text-decoration: none;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rs-tinta-2); transition: .18s; }
.rs-site-feed .ver-mais:hover { border-color: var(--rs-ouro); color: var(--rs-marca);
    background: rgba(var(--rs-ouro-rgb), .06); }
.rs-site-feed .ver-mais i { font-size: .66rem; transition: transform var(--rs-transicao); }
.rs-site-feed .ver-mais:hover i { transform: translateX(3px); }
.rs-site-feed .vazio { font-size: .78rem; color: var(--rs-tinta-2); padding: 16px 0; margin: 0; }

@media (max-width: 1180px) {
    /* Abaixo disto o feed não cabe ao lado sem espremer a abertura: ele desce para o fim do
       conteúdo, que é onde um mural deve ficar quando não há coluna. */
    .rs-site-corpo { grid-template-columns: 1fr; gap: 0; }
    .rs-site-feed { position: static; margin: 0 0 34px; }
}

/* ── A MESMA COLUNA, AGORA DENTRO DO SISTEMA (o início) ───────────────────────────────────
   24/08/2026: *"coloque os feeds na barra lateral à direita na vertical igual no index.php"*.
   ⚡ Reaproveita `.rs-site-feed` INTEIRO — cor, fio dourado, tipos, "ver mais", vazio. O que
      muda aqui é só a GRADE e a altura em que o mural gruda, porque a barra do sistema é
      `sticky` e mede 66px (a do site mede outra coisa). Duas linhas em vez de um bloco novo.
   ⚡ A `.rs-pagina` do início é `-larga` (sem teto de 1080px), e continua sendo: quem recua as
      bordas agora é a grade, senão o recuo entra em dobro. */
.rs-inicio { display: grid; grid-template-columns: minmax(0, 1fr) var(--rs-site-feed);
    gap: 30px; align-items: start; padding: 0 22px; }
.rs-inicio > .rs-pagina { padding-left: 0; padding-right: 0; }
.rs-inicio-feed { top: 78px; }                 /* 66 da barra + 12 de respiro */

@media (max-width: 1180px) {
    /* Mesma regra do site: sem largura para a coluna, o mural desce para o fim do conteúdo. */
    .rs-inicio { grid-template-columns: 1fr; gap: 0; padding: 0; }
    .rs-inicio > .rs-pagina { padding-left: 22px; padding-right: 22px; }
    .rs-inicio-feed { position: static; margin: 0 22px 34px; }
}

/* ── Conte o seu caso / Fale conosco: CONVITE, não formulário ─────────────────────────────
   ⚡ 2ª correção dele, 20/08: *"ficou feio na página com campo aberto, tem que clicar e abrir
   modal"*. Estava certo — dois formulários escancarados no meio de um cartão de visita fazem a
   página parecer um balcão de atendimento, e o visitante que só queria saber quem é o escritório
   passa por dois blocos de campos vazios até chegar ao telefone.
   A página passa a CONVIDAR: texto de um lado, botão do outro. Os campos vivem em <dialog>. */
.rs-site-chamada { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px;
    align-items: center; background: var(--rs-marca); color: rgba(255,255,255,.84);
    border-radius: var(--rs-raio-cartao-novo); padding: 30px 32px; }
.rs-site-chamada h3 { font-family: var(--rs-display); font-size: 1.3rem; font-weight: 800;
    color: #fff; margin: 0 0 12px; letter-spacing: -.02em; }
.rs-site-chamada p { font-size: .88rem; line-height: 1.62; margin: 0 0 20px; max-width: 62ch; }
.rs-site-chamada ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px;
    flex-wrap: wrap; }
.rs-site-chamada li { display: grid; grid-template-columns: 18px 1fr; gap: 10px;
    font-size: .78rem; line-height: 1.45; max-width: 30ch; }
.rs-site-chamada li i { color: var(--rs-ouro); font-size: .82rem; margin-top: .16em; }
.rs-site-chamada .acao { display: grid; justify-items: center; gap: 12px; }
.rs-pilula.grande { display: inline-flex; align-items: center; gap: 9px; font-size: .76rem;
    padding: 16px 30px; white-space: nowrap; }
.rs-site-chamada .alternativa { font-size: .74rem; color: rgba(255,255,255,.6);
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.rs-site-chamada .alternativa:hover { color: #fff; }

/* A barra do "Fale conosco", no fim do Contato. */
.rs-site-fale { margin-top: 16px; display: flex; align-items: center; justify-content: space-between;
    gap: 22px; flex-wrap: wrap; background: var(--rs-superficie);
    border: 1px solid var(--rs-fio-2); border-left: 3px solid var(--rs-ouro);
    border-radius: var(--rs-raio-cartao-novo); padding: 20px 24px; }
.rs-site-fale h3 { font-family: var(--rs-display); font-size: 1.02rem; font-weight: 800;
    color: var(--rs-marca); margin: 0 0 3px; }
.rs-site-fale p { margin: 0; font-size: .84rem; color: var(--rs-tinta-2); line-height: 1.5; }

@media (max-width: 760px) {
    .rs-site-chamada { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
    .rs-site-chamada .acao { justify-items: stretch; }
    .rs-pilula.grande { justify-content: center; }
    .rs-site-fale { flex-direction: column; align-items: stretch; }
    .rs-site-fale .rs-btn { width: 100%; }
}

/* ── Os campos, agora dentro da caixa ─────────────────────────────────────────────────────
   Mesmo desenho de campo do login — é a mesma casa; muda só a largura, porque um relato de
   caso não cabe em 430px. */
.rs-site-dialogo.largo { width: min(660px, 94vw); }
.rs-site-dialogo .corpo { max-height: 88vh; overflow-y: auto; }
.rs-site-forma { margin-top: 22px; text-align: left; }
.rs-site-forma .par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rs-site-forma .campo { margin-bottom: 14px; }
.rs-site-forma label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rs-tinta-2); margin: 0 0 6px; }
.rs-site-forma label span { font-weight: 600; letter-spacing: .02em; text-transform: none;
    color: var(--rs-tinta-3); }
.rs-site-forma textarea { width: 100%; padding: 12px 14px; font-size: .9rem; font-family: inherit;
    line-height: 1.6; resize: vertical; min-height: 130px; color: var(--rs-tinta-corpo);
    background: var(--rs-fundo); border: 1px solid var(--rs-fio-2); border-radius: var(--rs-raio); }
.rs-site-forma textarea:focus { outline: none; background: var(--rs-superficie);
    border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .16); }
.rs-site-forma .aviso { font-size: .7rem; line-height: 1.55; color: var(--rs-tinta-3);
    margin: 14px 0 0; }
/* Fora da tela, sem `display:none` — robô que respeita display não cai na isca. */
.rs-site-forma .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-site-forma .canais label:not(.canal) { margin-bottom: 8px; }

/* O agradecimento ocupa a caixa inteira, no lugar do formulário. */
.rs-site-dialogo .recebido { text-align: center; padding: 8px 0 4px; }
.rs-site-dialogo .recebido i { font-size: 2.2rem; color: var(--rs-ouro); margin-bottom: 14px; }
.rs-site-dialogo .recebido h2 { margin-bottom: 8px; }
.rs-site-dialogo .recebido p { font-size: .88rem; line-height: 1.62; color: var(--rs-tinta-corpo);
    margin: 0 auto 22px; max-width: 44ch; }
.rs-site-dialogo .recebido a { color: var(--rs-marca); }

@media (max-width: 620px) {
    .rs-site-forma .par { grid-template-columns: 1fr; gap: 0; }
    .rs-site-dialogo .corpo { padding: 28px 20px 24px; }
}

/* ── O botão de quem já está logado ───────────────────────────────────────────────────────
   ⚡ "ir para o sistema ficou feio" — e estava mesmo: era a MESMA pílula dourada do "Área
   restrita", ou seja, o chamariz da barra apontando para uma porta que só interessa a uma
   pessoa no mundo. Agora é um contorno fino, do peso das âncoras ao lado. Quem não é da casa
   nem repara; quem é, acha na hora, porque é o único item com borda. */
.rs-site-entrar.discreto { background: transparent; color: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.26); font-weight: 700; letter-spacing: .1em;
    padding: 9px 16px; }
.rs-site-entrar.discreto:hover { background: rgba(255,255,255,.08); color: #fff;
    border-color: rgba(255,255,255,.5); filter: none; }
.rs-site-entrar.discreto i { font-size: .72rem; opacity: .8; }

/* ── A página inteira de notícias (/noticias.php) ─────────────────────────────────────────
   Aqui a grade de 3 colunas do sistema vale igual; o que muda é que não há dobra — quem abriu
   esta página veio ver todas. */
.rs-site-noticias { max-width: var(--rs-largura); }
.rs-site-noticias .rs-cabeca h1 { font-family: var(--rs-display); }
.rs-site-fonte-nota { margin: 22px 0 0; font-size: .74rem; line-height: 1.6;
    color: var(--rs-tinta-2); max-width: 76ch; }
@media (max-width: 900px) { .rs-noticias { grid-template-columns: 1fr; } }

/* ═══ Aba Consultas — o caso que chegou pelo site ════════════════════════════════════════
   Duas colunas: à esquerda o que a pessoa escreveu e o parecer que vai para ela; à direita
   quem é ela e a nota interna. A nota fica visualmente APARTADA — fundo e filete diferentes —
   porque a única regra que não pode falhar nesta tela é: aquele quadro não vai no e-mail. */
.rs-consulta { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px;
    align-items: start; }
.rs-consulta > div > .rs-painel + .rs-painel { margin-top: 16px; }
.rs-consulta-relato { font-size: .92rem; line-height: 1.68; color: var(--rs-tinta-corpo);
    margin-top: 6px; white-space: normal; }
.rs-consulta-parecer textarea { width: 100%; font-family: var(--rs-texto); font-size: .9rem;
    line-height: 1.66; color: var(--rs-tinta-corpo); padding: 16px 18px; resize: vertical;
    background: var(--rs-fundo); border: 1px solid var(--rs-fio-2); border-radius: var(--rs-raio); }
.rs-consulta-parecer textarea:focus { outline: none; background: var(--rs-superficie);
    border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .16); }
.rs-consulta-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rs-consulta-botoes .rs-btn-p { margin-left: auto; }
.rs-consulta-dica { font-size: .76rem; line-height: 1.55; color: var(--rs-tinta-2); margin: 12px 0 0; }
.rs-consulta-dica code { font-family: var(--rs-dado); font-size: .92em; color: var(--rs-marca); }
.rs-consulta-espera { display: flex; align-items: center; gap: 14px; padding: 26px 4px;
    color: var(--rs-tinta-2); }
.rs-consulta-espera i { font-size: 1.4rem; color: var(--rs-ouro); }
.rs-consulta-espera p { margin: 0; font-size: .86rem; line-height: 1.55; max-width: 52ch; }
.rs-consulta-lado .rs-valor a { color: var(--rs-marca); }
.rs-consulta-nota { background: var(--rs-fundo); border-left: 3px solid var(--rs-ouro); }
.rs-consulta-nota .rs-rotulo { color: #6b5518; }
.rs-consulta-nota .corpo { font-size: .82rem; line-height: 1.6; color: var(--rs-tinta-corpo);
    margin-top: 8px; }
.rs-consulta-nota .vazio { font-size: .78rem; color: var(--rs-tinta-3); margin: 8px 0 0; }
.rs-linha-nome a { color: inherit; text-decoration: none; }
.rs-linha-nome a:hover { color: var(--rs-marca-2); }
.rs-linha-nome .rs-selo { margin-left: 8px; vertical-align: middle; }
/* O chip também serve de link (os filtros da lista de consultas são <a>, não <button>). */
a.rs-chip { display: inline-block; text-decoration: none; }
@media (max-width: 900px) { .rs-consulta { grid-template-columns: 1fr; } }

/* O número da aba Consultas: disco dourado ao lado do rótulo. Só aparece com o que está em
   aberto — zero não se mostra, senão a barra vira painel. */
.rs-nav-conta { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
    padding: 0 5px; margin-left: 7px; border-radius: 9px; background: var(--rs-ouro);
    color: var(--rs-marca); font-size: .64rem; font-weight: 900; line-height: 1;
    font-variant-numeric: tabular-nums; vertical-align: middle; }

/* Botão desligado precisa PARECER desligado: sem isto, o "Aprovar e enviar" da aba Consultas
   ficava idêntico ao ligado enquanto faltavam as credenciais de e-mail. */
.rs-btn:disabled, .rs-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rs-btn:disabled:hover { background: var(--rs-marca); border-color: var(--rs-marca); }

/* ── Fale conosco ─────────────────────────────────────────────────────────────────────────
   A porta leve: telefone e e-mail, e o escritório retorna. Fica logo abaixo dos cartões de
   contato e usa o mesmo desenho de campo do formulário de caso — é a mesma casa. */
.rs-site-fale { margin-top: 16px; background: var(--rs-superficie);
    border: 1px solid var(--rs-fio-2); border-left: 3px solid var(--rs-ouro);
    border-radius: var(--rs-raio-cartao-novo); padding: 24px 26px 22px; }
.rs-site-fale .dizer { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px; }
.rs-site-fale h3 { font-family: var(--rs-display); font-size: 1.06rem; font-weight: 800;
    color: var(--rs-marca); margin: 0; letter-spacing: -.01em; }
.rs-site-fale .dizer p { margin: 0; font-size: .84rem; color: var(--rs-tinta-2); line-height: 1.5; }
.rs-site-fale .linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rs-site-fale .campo { margin-bottom: 14px; }
.rs-site-fale label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--rs-tinta-2); margin: 0 0 6px; }
.rs-site-fale label span { font-weight: 600; letter-spacing: .02em; text-transform: none;
    color: var(--rs-tinta-3); }
.rs-site-fale input[type=text], .rs-site-fale input[type=tel], .rs-site-fale input[type=email] {
    width: 100%; height: 46px; padding: 0 14px; font-size: .9rem; font-family: inherit;
    color: var(--rs-tinta-corpo); background: var(--rs-fundo);
    border: 1px solid var(--rs-fio-2); border-radius: var(--rs-raio); }
.rs-site-fale input:focus { outline: none; background: var(--rs-superficie);
    border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .16); }
.rs-site-fale .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-site-fale .pe { display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.rs-site-fale .pronto { display: flex; align-items: center; gap: 18px; }
.rs-site-fale .pronto i { font-size: 1.9rem; color: var(--rs-ouro); }
.rs-site-fale .pronto p { margin: 6px 0 0; font-size: .87rem; line-height: 1.6;
    color: var(--rs-tinta-corpo); }
.rs-site-fale .pronto a { color: var(--rs-marca); }

/* ── Por onde a pessoa quer ser respondida ────────────────────────────────────────────────
   Rádio de verdade por baixo (teclado, leitor de tela, e o navegador cuidando do grupo), com
   a pastilha desenhada por cima. Nada de <div onclick> — a etapa 05 zerou esses no site. */
.canais { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.canais > span { font-size: .74rem; color: var(--rs-tinta-2); }
.opcoes { display: flex; gap: 9px; flex-wrap: wrap; }
.canal { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: .78rem; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--rs-tinta-2); background: var(--rs-fundo); border: 1px solid var(--rs-fio-2);
    border-radius: var(--rs-raio-pilula); padding: 9px 15px; margin: 0;
    transition: all var(--rs-transicao); }
.canal input { position: absolute; opacity: 0; width: 0; height: 0; }
.canal i { font-size: .82rem; opacity: .7; }
.canal:hover { border-color: var(--rs-tinta-2); color: var(--rs-marca); }
.canal:has(input:checked) { background: var(--rs-marca); border-color: var(--rs-marca); color: #fff; }
.canal:has(input:checked) i { opacity: 1; color: var(--rs-ouro); }
.canal:has(input:focus-visible) { outline: 2px solid var(--rs-ouro); outline-offset: 2px; }
.rs-site-forma .canais label.canal { text-transform: none; letter-spacing: 0; }

@media (max-width: 760px) {
    .rs-site-fale .linha { grid-template-columns: 1fr; gap: 0; }
    .rs-site-fale .pe { flex-direction: column; align-items: stretch; }
    .rs-site-fale .pe .rs-btn { width: 100%; }
}

/* Aba Consultas: as duas portas do site se distinguem na lista e na ficha. */
.rs-consulta-tipo { font-size: .62rem; font-weight: 900; letter-spacing: .1em;
    color: #6b5518; background: rgba(var(--rs-ouro-rgb), .18);
    padding: 2px 7px; border-radius: 4px; margin-right: 6px; }
.rs-consulta-canal { display: flex; align-items: center; gap: 8px; }
.rs-consulta-canal i { color: var(--rs-ouro); font-size: .9rem; }

/* ═══ Custos das APIs ════════════════════════════════════════════════════════════════════
   Duas colunas: à esquerda a conta e o extrato (o que aconteceu), à direita o que ele lança
   (recarga e piso do aviso). A conta fica ABERTA, linha a linha, porque um saldo que não mostra
   de onde veio é um número em que ninguém confia — e este aqui é estimativa. */
.rs-custos { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px;
    align-items: start; }
.rs-custos > div > .rs-painel + .rs-painel { margin-top: 16px; }

.rs-custo-conta table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.rs-custo-conta td { padding: 9px 0; font-size: .86rem; color: var(--rs-tinta-corpo);
    border-bottom: 1px solid var(--rs-fio); }
.rs-custo-conta td.v { text-align: right; font-family: var(--rs-dado); white-space: nowrap; }
.rs-custo-conta td.v.mais  { color: var(--rs-ok); }
.rs-custo-conta td.v.menos { color: var(--rs-erro); }
.rs-custo-conta tr.fim td { border-bottom: 0; border-top: 2px solid var(--rs-marca);
    font-size: 1rem; color: var(--rs-marca); padding-top: 12px; }
.rs-custo-conta .dica { font-size: .76rem; line-height: 1.6; color: var(--rs-tinta-2);
    margin: 14px 0 0; }
.rs-custo-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rs-fio); }
.rs-custo-numeros span { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--rs-tinta-2); margin-bottom: 4px; }
.rs-custo-numeros b { font-family: var(--rs-dado); font-size: 1rem; color: var(--rs-marca); }

/* A barra do dia é proporcional ao maior dia da janela — serve para ver o PICO, não o valor
   absoluto; o valor está escrito ao lado, que é onde se lê número. */
.rs-custo-dia { display: grid; grid-template-columns: 44px 1fr 44px 92px; gap: 12px;
    align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rs-fio-3); }
.rs-custo-dia:last-child { border-bottom: 0; }
.rs-custo-dia .data { font-size: .76rem; color: var(--rs-tinta-2); font-variant-numeric: tabular-nums; }
.rs-custo-dia .barra { height: 7px; background: var(--rs-fundo); border-radius: 4px; overflow: hidden; }
.rs-custo-dia .barra i { display: block; height: 100%; background: var(--rs-ouro); }
.rs-custo-dia .n { font-size: .72rem; color: var(--rs-tinta-3); text-align: right; }
.rs-custo-dia .valor { font-family: var(--rs-dado); font-size: .8rem; color: var(--rs-marca);
    text-align: right; }

.rs-custo-lista .linha { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px;
    align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rs-fio-3); }
.rs-custo-lista .linha:last-child { border-bottom: 0; }
.rs-custo-lista .quando { font-size: .73rem; color: var(--rs-tinta-3);
    font-variant-numeric: tabular-nums; }
.rs-custo-lista .op { font-size: .82rem; color: var(--rs-tinta-corpo); min-width: 0; }
.rs-custo-lista .op em { display: block; font-style: normal; font-size: .72rem;
    color: var(--rs-tinta-3); font-family: var(--rs-dado);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-custo-lista .valor { font-family: var(--rs-dado); font-size: .8rem; color: var(--rs-marca);
    white-space: nowrap; }
.rs-custo-lista .poupada .valor { color: var(--rs-ok); }
.rs-custo-nota { font-size: .74rem; line-height: 1.55; color: var(--rs-tinta-2); margin: 12px 0 0; }

.rs-custo-form { margin-top: 12px; }
.rs-custo-form label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--rs-tinta-2); margin: 0 0 5px; }
.rs-custo-form label span { font-weight: 600; letter-spacing: .02em; text-transform: none;
    color: var(--rs-tinta-3); }
.rs-custo-form input { width: 100%; height: 44px; padding: 0 13px; margin-bottom: 12px;
    font-family: inherit; font-size: .9rem; color: var(--rs-tinta-corpo);
    background: var(--rs-fundo); border: 1px solid var(--rs-fio-2); border-radius: var(--rs-raio); }
.rs-custo-form input:focus { outline: none; background: var(--rs-superficie);
    border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .16); }

.rs-custo-recargas { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rs-fio); }
.rs-custo-recargas .item { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 0; }
.rs-custo-recargas b { font-family: var(--rs-dado); font-size: .88rem; color: var(--rs-marca); }
.rs-custo-recargas em { display: block; font-style: normal; font-size: .72rem;
    color: var(--rs-tinta-3); margin-top: 2px; }
.rs-custo-recargas form { margin: 0; }

.rs-custo-oficial { background: var(--rs-fundo); border-left: 3px solid var(--rs-ouro); }
.rs-custo-oficial p { font-size: .8rem; line-height: 1.6; color: var(--rs-tinta-corpo);
    margin: 10px 0 0; }
.rs-custo-oficial p.fim { color: var(--rs-tinta-2); }
.rs-custo-oficial code { font-family: var(--rs-dado); font-size: .92em; color: var(--rs-marca); }

@media (max-width: 900px) { .rs-custos { grid-template-columns: 1fr; } }

/* A tira de saldo no Gerenciador: um número por fonte paga, clicável para o extrato. */
.rs-custo-tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; }
.rs-custo-tira .item { display: block; text-decoration: none; padding: 14px 16px;
    background: var(--rs-fundo); border: 1px solid var(--rs-fio-2);
    border-left: 3px solid var(--rs-marca); border-radius: var(--rs-raio-cartao-novo);
    transition: border-color var(--rs-transicao), box-shadow var(--rs-transicao); }
.rs-custo-tira .item:hover { border-color: var(--rs-tinta-2); box-shadow: var(--rs-elev-1);
    border-left-color: var(--rs-ouro); }
.rs-custo-tira .item.baixo { border-left-color: var(--rs-erro); background: var(--rs-erro-fraco); }
.rs-custo-tira .rot { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--rs-tinta-2); }
.rs-custo-tira b { display: block; font-family: var(--rs-dado); font-size: 1.35rem;
    color: var(--rs-marca); margin: 5px 0 2px; letter-spacing: -.02em; }
.rs-custo-tira .item.baixo b { color: var(--rs-erro); }
.rs-custo-tira .sub { font-size: .72rem; color: var(--rs-tinta-3); }
.rs-custo-conta tr.fim.zerado td { border-top-color: var(--rs-erro); color: var(--rs-erro); }
.rs-custo-esgotado { margin: 12px 0 0; padding: 11px 14px; border-radius: var(--rs-raio);
    background: var(--rs-erro-fraco); color: var(--rs-erro); font-size: .8rem; line-height: 1.55; }

/* O quadro de e-mail do Gerenciador: estado, teste e — quando falta — o molde do arquivo. */
.rs-email-teste { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.rs-email-teste input { flex: 1 1 240px; height: 44px; padding: 0 14px; font-family: inherit;
    font-size: .9rem; color: var(--rs-tinta-corpo); background: var(--rs-fundo);
    border: 1px solid var(--rs-fio-2); border-radius: var(--rs-raio); }
.rs-email-teste input:focus { outline: none; background: var(--rs-superficie);
    border-color: var(--rs-ouro); box-shadow: 0 0 0 3px rgba(var(--rs-ouro-rgb), .16); }
.rs-email-exemplo { font-family: var(--rs-dado); font-size: .74rem; line-height: 1.6;
    background: var(--rs-marca); color: #dbe3ec; padding: 16px 18px;
    border-radius: var(--rs-raio); overflow-x: auto; margin: 0 0 12px; }

/* ── Página não encontrada ────────────────────────────────────────────────────────────────
   O 404 gigante é decoração e vai marcado aria-hidden; quem lê com leitor de tela ouve a frase,
   não o número solto. */
.rs-site-404 { text-align: center; padding: 90px 22px 110px; max-width: 640px; }
.rs-site-404 .numero { display: block; font-family: var(--rs-display); font-size: clamp(4rem, 14vw, 7rem);
    font-weight: 900; line-height: 1; letter-spacing: -.06em; color: var(--rs-ouro);
    opacity: .5; margin-bottom: 8px; }
.rs-site-404 h1 { font-family: var(--rs-display); font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 900; letter-spacing: -.03em; color: var(--rs-marca); margin: 0 0 12px; }
.rs-site-404 p { font-size: .92rem; line-height: 1.66; color: var(--rs-tinta-2);
    margin: 0 auto 30px; max-width: 46ch; }
.rs-site-404 .acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ═══ iPHONE — varredura de 25/08/2026 ═══════════════════════════════════════════════════
   Ele mandou um print do iPhone com a tarja de notificação presa no rodapé, por baixo da
   barra do Safari. A tarja tinha bug próprio (ver includes/webpush-banner.php); a varredura
   que veio atrás achou mais cinco coisas que só doem no telefone. Estão todas neste bloco
   único, no fim da folha, para poderem sair de uma vez se alguma desagradar.

   ⚠ MEDIDO em tela de iPhone 16 Pro — 402×874 px de CSS, que é o aparelho do print
   (1206 px de imagem ÷ 3). Não foi escolhido no olho.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. O ZOOM AO TOCAR NUM CAMPO ────────────────────────────────────────────────────────
   O Safari do iPhone dá zoom na página quando o campo que recebe o toque tem fonte menor
   que 16px — e NÃO desfaz sozinho: o site fica torto até recarregar. Medido ao vivo: os oito
   campos do "Conte o seu caso" e os dois do login a 14,4px; dentro do sistema o jurídico
   desce a 11,8px nos seletores de mover arquivo. 16px aqui não é gosto, é o limiar do Safari.

   `!important` porque as regras originais são mais específicas (`.arq-gaveta select`,
   `.rs-site-fale input`…) e a intenção aqui é justamente atropelá-las — só no telefone.
   Botões e caixas de marcar ficam de fora: não recebem digitação, logo não disparam zoom, e
   mexer neles mudaria o desenho à toa. */
@media (max-width: 820px) {
    input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select,
    textarea { font-size: 16px !important; }
}

/* ── 2. A FAIXA DE BAIXO DO IPHONE ───────────────────────────────────────────────────────
   Nenhum arquivo do site usava `env(safe-area-inset-*)` — conferido, zero ocorrências. Tudo
   que é `position: fixed; bottom:` nascia por baixo da barra do Safari e do traço de início.
   Foi exatamente o que ele fotografou. O `@supports` deixa o navegador antigo em paz. */
@supports (padding: env(safe-area-inset-bottom)) {
    #rsPush     { bottom: calc(12px + env(safe-area-inset-bottom)); }
    .rs-toast   { bottom: calc(30px + env(safe-area-inset-bottom)); }
    .rs-toast.show { bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* ── 3. ALVOS DE TOQUE ───────────────────────────────────────────────────────────────────
   A Apple pede 44px de lado; o dedo não tem ponteiro. Medido: as âncoras do site público a
   37px, o botão de login a 36px e o "Ver no mapa" a 18px de altura — esse último é metade do
   mínimo, e é o link que leva o cliente até a porta do escritório.
   `pointer: coarse` limita a regra a quem navega com o dedo: no mouse nada muda. */
@media (pointer: coarse) {
    .rs-site-nav a,
    .rs-site-entrar,
    .rs-nav a { min-height: 44px; display: inline-flex; align-items: center;
                justify-content: center; }
    .rs-agenda-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
}

/* ── 4. A NAVEGAÇÃO DO SITE PÚBLICO QUE ESCONDIA O "CONTATO" ─────────────────────────────
   O bloco de 860px acima diz, com todas as letras, que "esconder a navegação seria deixar o
   visitante sem os endereços" — e a intenção era essa mesmo. Só que `overflow-x: auto` numa
   barra sem seta e sem sombra esconde do mesmo jeito: medido a 402px, "O ESCRITÓRIO" termina
   em 414px e "CONTATO" em 513px, os dois FORA da tela. Num cartão de visita, o item escondido
   ser justamente o "Contato" é o pior sorteio possível.
   Mesma cura que a barra do sistema levou em 20/08: em vez de rolar, quebra a linha. */
@media (max-width: 860px) {
    .rs-site-nav { flex-wrap: wrap; overflow-x: visible; justify-content: center;
                   row-gap: 2px; }
}

/* ── 5. `vh` NO IPHONE ───────────────────────────────────────────────────────────────────
   No Safari do iPhone `100vh` é MAIOR que a área visível: conta a barra de endereço, que só
   encolhe depois que a pessoa rola. Uma caixa de 88vh nasce, portanto, com um pedaço debaixo
   da barra. `dvh` é a altura dinâmica, que já desconta. A linha antiga fica logo acima como
   reserva para navegador que não conhece `dvh`. */
.rs-site-dialogo .corpo { max-height: 88dvh; }

/* ── 6. TABELAS QUE ESTOURAM A TELA ──────────────────────────────────────────────────────
   34 tabelas no site, nenhuma com embrulho de rolagem. Numa tela de 402px, uma tabela de
   cinco colunas empurra a PÁGINA INTEIRA para o lado — e aí todo o resto fica torto junto.
   Quem embrulha é o rodapé compartilhado (includes/footer.php e jur_ui_rodape), porque são
   34 tabelas em 24 arquivos; aqui mora só a aparência do embrulho.
   Quando a tabela cabe, este `div` não faz absolutamente nada — é `auto`, não `scroll`. */
.rs-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.rs-rola > table { margin-bottom: 0; }

/* ── 7. ALVOS DE TOQUE, SEGUNDA PASSADA ──────────────────────────────────────────────────
   Medida de novo depois do bloco 3, o que sobrou abaixo de 44px:
     • `.rs-btn` a 37px — é o botão de TODO o site público ("Pedir retorno", "Ir para o
       início", "Falar no WhatsApp"). Sete pixels que faltam no botão principal.
     • os links do rodapé a 16px — e entre eles estão o TELEFONE e o E-MAIL. Num cartão de
       visita, o alvo mais difícil de acertar não pode ser justamente o caminho de contato.
       Cada link mora sozinho no seu <p>, então crescer a altura não desalinha texto corrido.
     • as pílulas de filtro do Judiciário hoje a 29px.
   Tudo em `pointer: coarse`: no computador, com mouse, nada disso muda. */
@media (pointer: coarse) {
    .rs-btn { min-height: 44px; }
    .rs-site-rodape p > a { min-height: 44px; display: inline-flex; align-items: center; }
    .rs-filtros a, .rs-filtros button { min-height: 44px; display: inline-flex;
                                        align-items: center; }
}

/* ── 8. O JURÍDICO NO TELEFONE ───────────────────────────────────────────────────────────
   O módulo não tem folha própria: `jur_ui.php` injeta o <style> dele dentro do <head> que o
   `includes/header.php` monta — ou seja, ele carrega ESTA folha e as regras acima já valem
   lá (por isso o `!important` do bloco 1; o <style> do módulo vem depois desta folha e, em
   igualdade de peso, venceria).
   Falta o que é só de lá. As pílulas de filtro do módulo chamam `.filtros` (sem "s" de
   `.rs-filtros`, que é a do site) e ficam em ~27px de altura.
   `.filtros` já é flex com quebra de linha, então crescer a pílula não desmonta a fila. */
@media (pointer: coarse) {
    .filtros a { min-height: 44px; display: inline-flex; align-items: center; }
    .arq-acoes-caso a, .arq-acoes-caso button { min-height: 44px; display: inline-flex;
                                                align-items: center; }
}

/* ── 9. ALVOS DE TOQUE DO JURÍDICO — medidos com sessão, 25/08 ───────────────────────────
   O bloco 8 mirou `.filtros`, que é a pílula do ACERVO. Medindo de dentro do login apareceu
   que a navegação do módulo é outra classe — `.jnav` — e que faltava o resto:

     .jnav a       33px  as 7 seções do módulo (Casos, Julgadores, Acervo, Autos…)
     .aba          34px  as abas de dentro das fichas
     .chip         36px  os filtros de escopo da busca
     .btn-j        37px  o botão do módulo
     .rs-sair      33px  o avatar de sair, no alto
     .jur-faixa-in a  17px  a migalha "Início"
     .arq-abrir    17px  ⚠ o NOME DO ARQUIVO na aba Arquivos — é o alvo principal da tela,
                         e era o menor de todos: 17px de altura, 68 deles na lista
     .arq-x        30px  o X de apagar (tem confirmação, então errar o toque é recuperável)

   ⚠ `!important` aqui pelo mesmo motivo do bloco 1: `jur_ui.php` injeta o <style> do módulo
   DEPOIS desta folha, então em igualdade de peso ele venceria. */
@media (pointer: coarse) {
    .jnav a, .aba, .chip, .btn-j,
    .jur-faixa-in a, .arq-abrir {
        min-height: 44px !important; display: inline-flex !important;
        align-items: center !important;
    }
    .rs-sair, .arq-x { min-height: 44px !important; min-width: 44px !important; }
    .arq-gaveta select { min-height: 44px !important; }
}

/* ── 10. A FAIXA DE AÇÕES DO CABEÇALHO, NO DEDO ──────────────────────────────────────────
   `VOLTAR` e os botões de ação continuavam a 34px depois do bloco 4, e a causa é a TRAVA DE
   TAMANHO de 20/08 (`.rs-cabeca .rs-acoes .rs-btn`, especificidade 0,3,0, que ganha do
   `.rs-btn` simples). A trava está certa e não sai: o que ela resolve é a altura DESIGUAL —
   "cada um de uma altura diferente", 30px, 37px e 43px lado a lado.
   Aqui ela é respeitada, não desfeita: no dedo a faixa inteira sobe junto, de 34 para 44, e
   segue uniforme. No mouse continua 34px, exatamente como ele aprovou.
   Mesma especificidade (0,3,0) e mais abaixo na folha — por isso vence sem `!important`. */
@media (pointer: coarse) {
    .rs-cabeca .rs-acoes .rs-btn { min-height: 44px; }
}

/* ⚠ NÃO mexidos, e o porquê:
   • `.rs-cartao-link` mede 20px de alto, mas o alvo NÃO é ele: `.rs-cartao-link::after` é
     absoluto com `inset: 0` e estica o clique por todo o cartão de 246×150 (o "stretched
     link"). Conferido no CSS e na marcação. Aumentar o texto só quebraria o cartão.
   • `.rs-cartao-cor` são as amostras de cor da paleta, 34px com 5px de margem: crescer
     desmancha a fileira, e são escolha rara, não ação de rotina. */

/* ═══ RECADO DA TELA — 25/08/2026, achado nº 13 ══════════════════════════════════════════
   O que substituiu o `alert()`. O `alert()` some quando se toca em OK e não deixa rastro; o
   recado fica na tela, é lido pelo leitor de tela (`role="status"` na marcação de quem usar) e
   sobrevive ao redirecionamento porque viaja na sessão, não no DOM.
   Verde e vermelho vêm da mesma paleta das mensagens do módulo Jurídico (.arq-msg), para não
   inventar uma terceira linguagem de cor no site. */
.rs-recado {
    border-radius: 10px; padding: 11px 15px; margin: 0 0 16px;
    font-size: .88rem; font-weight: 600; line-height: 1.45;
}
.rs-recado.ok   { background: rgba(30,158,99,.12);  color: #17734a; }
.rs-recado.erro { background: rgba(194,80,60,.12);  color: #a83e2c; }

/* ── 11. O "LIGAR AGORA" QUE NÃO LIGAVA ──────────────────────────────────────────────────
   Medido em 25/08: tocar em "ligar agora" abria o **WhatsApp**, não a ligação. Não era
   tamanho — era um link MORTO. O cartão usa o padrão do "stretched link"
   (`.rs-cartao-link::after { inset: 0 }`), que estica o clique por todo o cartão de propósito;
   só que o `tel:` mora DENTRO desse cartão e ficava debaixo da camada esticada. O
   `elementFromPoint` no meio do texto devolvia `a.rs-cartao-link → wa.me/...`.

   Um link dentro de um cartão-link precisa subir acima da camada. Isto vale para o dedo E
   para o mouse — no computador ele também estava morto —, por isso fica FORA do
   `pointer: coarse`. Só a altura de 44px é do toque. */
.rs-cartao-sub a { position: relative; z-index: 2; }

@media (pointer: coarse) {
    .rs-cartao-sub a { min-height: 44px; display: inline-flex; align-items: center; }
}