/*
   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.
   ═══════════════════════════════════════════════════════════════════════════════════════════
*/

@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 {

    --rs-marca:          #1d344f;   
    --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 */

    --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;      
    --rs-raio-circulo:   50%;

    --rs-largura:        1080px;

    --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;

    --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);
}

/*
   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.
   ═══════════════════════════════════════════════════════════════════════════════════════
*/
/* 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.
*/
/*   ⚠ 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; }

.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) {

    .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); }
}

/*
   • `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.
*/
.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 */

/* ═══ 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; }

.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); }

.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 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; }

/*
   • 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;
   ═══════════════════════════════════════════════════════════════════════════════════════
*/
.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));
}
/*
   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; }

.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; }

.rs-ficha {

    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; }

.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; }

.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; }

.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; }

/*
   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; }

.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); }

.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;
}

.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; }

.cursor-pointer { cursor: pointer; }
.hover-bg { transition: background var(--rs-transicao); }
.hover-bg:hover { background: var(--rs-fundo); }

/*
   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.
*/
    .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 */
}

@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; }
}

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; }
/*   ⚠ 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; }
}

.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); }

/* ── 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) {

    .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; }

.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; }

.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; }

.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; }
}

.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; }

.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 ═══════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════════════════════
*/
*, *::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; }

button, input, select, textarea { font-family: inherit; font-size: inherit;
    line-height: inherit; margin: 0; }

: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) {

    .rs-site-corpo { grid-template-columns: 1fr; gap: 0; }
    .rs-site-feed { position: static; margin: 0 0 34px; }
}

/*   ⚡ 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) {

    .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 ─────────────────────────────
*/
.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; } }

.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); }

.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%; }
}

.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; }

.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; } }

.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; }

.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; }

/*
   `!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; }
}

@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)); }
}

@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; }
}

@media (max-width: 860px) {
    .rs-site-nav { flex-wrap: wrap; overflow-x: visible; justify-content: center;
                   row-gap: 2px; }
}

.rs-site-dialogo .corpo { max-height: 88dvh; }

.rs-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.rs-rola > table { margin-bottom: 0; }

/*     • 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; }
}

@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; }
}

/*
     .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)
*/
@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; }
}

@media (pointer: coarse) {
    .rs-cabeca .rs-acoes .rs-btn { min-height: 44px; }
}

/* ⚠ NÃO mexidos, e o porquê:
   • `.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.
*/

.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; }

.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; }
}

/*
   Uma tela vista de longe não é uma página vista de perto. Quatro decisões governam este bloco:

   • MEDIDA EM `vmin`, NÃO EM `px`. A mesma página serve a TV de 40" da recepção e o monitor do
     escritório sem uma media query por tamanho: texto e vão crescem com a tela, e `clamp()` põe
     piso e teto para não virar cartaz num 4K nem sumir num notebook.
   • DUAS METADES: a notícia e a casa. A esquerda é o canal; a direita é a marca. Era ali que
     ficava a segunda transmissão, e duas TVs concorrendo é o oposto de premium.
   • NADA ROLA E NADA ESTOURA. `100dvh` em três faixas (alto, palcos, pé). Título gigante de
     notícia corta; o que não pode é empurrar o vídeo para fora da tela.
   ═══════════════════════════════════════════════════════════════════════════════════════════
*/

body.rs-tv {
    --tv-fundo:   #12263b;            /* o navy do timbrado, com menos luz */
    --tv-fundo-2: #0a1624;
    --tv-painel:  rgba(255,255,255,.045);
    --tv-fio:     rgba(255,255,255,.10);
    --tv-texto:   #eef2f6;
    --tv-apoio:   #9db0c4;

    margin: 0; height: 100dvh; overflow: hidden;
    background-color: var(--tv-fundo-2);
    /* Três camadas, nesta ordem: um facho frio no alto à esquerda (de onde "vem a luz"), um
       calor dourado baixo à direita, e o navy por baixo de tudo. Um gradiente só deixaria a
       tela chapada; três dão profundidade sem desenhar nada.
*/
    background-image:
        radial-gradient(70% 55% at 18% 0%,   rgba(90,140,190,.20), transparent 70%),
        radial-gradient(60% 60% at 92% 96%,  rgba(var(--rs-ouro-rgb), .13), transparent 72%),
        linear-gradient(160deg, #16304a 0%, var(--tv-fundo) 45%, var(--tv-fundo-2) 100%);
    color: var(--tv-texto);
    font-family: var(--rs-texto);
    -webkit-font-smoothing: antialiased;
}
body.rs-tv.parado { cursor: none; }

.rs-tv-brilho, .rs-tv-circulo, .rs-tv-escada { position: fixed; z-index: 0; pointer-events: none; }
.rs-tv-brilho { inset: -18% 30% auto -12%; height: 78%;
    background: radial-gradient(52% 60% at 30% 0%, rgba(120,170,220,.20), transparent 72%); }
.rs-tv-circulo { right: -12vmin; bottom: -22vmin; width: 62vmin; aspect-ratio: 1;
    border: 1px solid rgba(var(--rs-ouro-rgb), .16); border-radius: 50%; }
/* O segundo círculo, menor e deslocado, é o que tira o desenho do "clip-art": um círculo
   sozinho parece enfeite; dois, desencontrados, parecem composição.
*/
.rs-tv-circulo::after { content: ""; position: absolute; right: 26%; bottom: 16%;
    width: 46%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.rs-tv-escada { left: clamp(14px, 2.4vmin, 40px); top: 32%;
    display: flex; flex-direction: column; gap: 1vmin; }
.rs-tv-escada i { display: block; height: 1px; background: rgba(255,255,255,.10); }
.rs-tv-escada i:nth-child(1) { width: 3.5vmin; }
.rs-tv-escada i:nth-child(2) { width: 6vmin; }
.rs-tv-escada i:nth-child(3) { width: 9vmin; background: rgba(var(--rs-ouro-rgb), .42); }
.rs-tv-escada i:nth-child(4) { width: 5vmin; }
.rs-tv-escada i:nth-child(5) { width: 2.5vmin; }

.rs-tv-quadro { position: relative; z-index: 1; height: 100dvh;

    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(10px, 1.4vmin, 22px); padding: clamp(12px, 1.8vmin, 28px) clamp(14px, 2.2vmin, 34px); }

.rs-tv-topo { display: flex; align-items: center; gap: clamp(12px, 2vmin, 26px); min-width: 0; }

.rs-tv-telacheia { display: inline-flex; align-items: center; gap: .6em; cursor: pointer;
    border: 1px solid var(--tv-fio); background: rgba(255,255,255,.06);
    color: var(--tv-apoio); border-radius: 999px;
    padding: .6em 1.1em; font-family: inherit; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    font-size: clamp(.5rem, .95vmin, .8rem);
    transition: opacity .35s, background .18s, color .18s, border-color .18s; }
.rs-tv-telacheia:hover { background: rgba(var(--rs-ouro-rgb), .20); color: #fff;
    border-color: rgba(var(--rs-ouro-rgb), .55); }
.rs-tv-telacheia i { font-size: 1.1em; color: var(--rs-ouro); }

body.rs-tv.parado .rs-tv-telacheia { opacity: 0; max-width: 0; padding-left: 0; padding-right: 0;
    border-width: 0; margin-right: calc(clamp(12px, 2vmin, 26px) * -1); overflow: hidden; }
.rs-tv-telacheia { max-width: 14em; overflow: hidden; white-space: nowrap;
    transition: opacity .35s, max-width .35s, padding .35s, margin .35s,
                background .18s, color .18s, border-color .18s; }
.rs-tv-topo .rs-tv-fio { flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, rgba(var(--rs-ouro-rgb), .55), rgba(255,255,255,.06)); }
/* A temperatura fica à ESQUERDA da hora, separada por um fio: encostada no número das horas
   ela viraria um terceiro bloco de dígitos, e de longe ninguém saberia onde acaba a hora e
   começa o grau. O ícone é o que dá a leitura instantânea; o número confirma.
*/
.rs-tv-tempo { display: flex; align-items: center; gap: .55em;
    padding-right: clamp(12px, 2vmin, 26px); border-right: 1px solid var(--tv-fio);
    color: var(--tv-texto); font-family: var(--rs-display); font-weight: 300;
    font-size: clamp(1rem, 2.6vmin, 2.4rem); line-height: 1;
    font-variant-numeric: tabular-nums; }
.rs-tv-tempo i { color: var(--rs-ouro); font-size: .82em; }

.rs-tv-relogio { text-align: right; line-height: 1; }
.rs-tv-relogio .hora { font-family: var(--rs-display); font-weight: 300;
    font-size: clamp(1.6rem, 4.4vmin, 4.2rem); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: #fff; }
/* Os segundos ficam menores e dourados: quem olha uma TV quer a hora, e um número trocando a
   cada segundo em tamanho cheio rouba o olho do vídeo o tempo todo.
*/
.rs-tv-relogio .hora small { font-size: .4em; color: var(--rs-ouro); margin-left: .2em;
    font-variant-numeric: tabular-nums; }
.rs-tv-relogio .data { margin-top: .5em; color: var(--tv-apoio); text-transform: capitalize;
    font-size: clamp(.62rem, 1.25vmin, 1.05rem); }

/* ── As duas metades ──────────────────────────────────────────────────────────────────────── */
/*     • a FAIXA tem largura máxima e se centraliza — é ela que traz as duas peças para dentro;
     • a marca vale o que o seu conteúdo vale (`fit-content`) e encosta no fim da sua coluna
       (`justify-self: end`), em vez de começar na borda com o texto boiando à esquerda.
   O texto interno continua alinhado à esquerda, na mesma prumada da logo.
*/
/* ⛔ Duas colunas IGUAIS (`1fr 1fr`) não servem aqui, e a medida mostrou por quê: a logo vale
   670 px e a coluna valia 813, então ela nadava dentro da própria coluna — sobravam 273 px na
   borda esquerda e apenas 34 no meio, com os dois blocos quase se tocando. Agora a coluna da
   marca vale O QUE A MARCA VALE (`auto`) e o resto é da televisão: quem separa os dois passa a
   ser o `gap`, que é um número que se lê, e as margens de fora saem iguais sozinhas.
*/

.rs-tv-palcos { display: flex; justify-content: center; align-items: stretch;
    /* a marca à esquerda, a televisão à direita — a ordem do HTML já é esta desde a 3ª volta */
    gap: clamp(18px, 4.2vw, 90px); min-height: 0; min-width: 0;

    transform: translateX(clamp(6px, 0.8vw, 22px)); }
.rs-tv-palcos > * { flex: 0 0 auto; }

.rs-tv-canal { position: relative; z-index: 1; min-width: 0; min-height: 0;
    background: rgba(13,28,45,.72); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--rs-raio-cartao-novo);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0,0,0,.35),
                0 clamp(18px,3.4vmin,54px) clamp(34px,7vmin,110px) rgba(0,0,0,.55); }
.rs-tv-marca { position: relative; z-index: 1; }

.rs-tv-canal { display: flex; flex-direction: column; align-items: center; align-self: center;
    width: min(100%, 48.5vw); max-height: 100%;
    gap: clamp(6px, .9vmin, 14px); padding: clamp(8px, 1.2vmin, 18px); }

.rs-tv-canal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--cor), transparent 78%);
    border-radius: var(--rs-raio-cartao-novo) var(--rs-raio-cartao-novo) 0 0; }

.rs-tv-canal .cabeca { display: flex; align-items: center; width: 100%;
    gap: clamp(7px, 1.1vmin, 16px); padding: clamp(2px,.4vmin,6px) clamp(2px,.5vmin,8px); }
.rs-tv-canal .nome { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
    font-family: var(--rs-display); font-weight: 800; color: #fff;
    font-size: clamp(.78rem, 1.55vmin, 1.35rem); letter-spacing: -.01em; }
/* A logo do canal, em silhueta dourada. A altura acompanha a fonte do nome (`em`), então ela
   cresce junto com a tela e nunca desencontra da linha de base do texto.
*/
.rs-tv-canal .nome .logo-canal { height: 1.35em; width: auto; display: block;
    margin-right: .1em; }
.rs-tv-canal .vivo { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
    text-transform: uppercase; letter-spacing: .18em; font-weight: 800;
    font-size: clamp(.5rem, .95vmin, .8rem); color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid var(--tv-fio);
    border-radius: 999px; padding: .45em .9em; }
.rs-tv-canal .vivo i { width: .62em; height: .62em; border-radius: 50%; background: var(--cor);
    animation: rs-tv-pulso 2s ease-in-out infinite; }
@keyframes rs-tv-pulso { 0%, 100% { opacity: 1; transform: scale(1); }
                         50%      { opacity: .35; transform: scale(.78); } }
/* O nome do programa cede primeiro: é a única coisa da barra que pode faltar sem prejuízo. */
.rs-tv-canal .programa { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis; color: var(--tv-apoio); font-size: clamp(.62rem, 1.2vmin, 1rem); }

.rs-tv-canal .palco { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 3px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.rs-tv-canal .palco iframe { position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; display: block; }

.rs-tv-bt { display: inline-grid; place-items: center; cursor: pointer; margin-left: auto;
    width: clamp(26px, 3.1vmin, 46px); height: clamp(26px, 3.1vmin, 46px);
    border-radius: 50%; border: 1px solid var(--tv-fio); background: rgba(255,255,255,.06);
    color: var(--tv-apoio); font-size: clamp(.62rem, 1.2vmin, 1rem); transition: .18s; }
.rs-tv-bt:hover { background: rgba(var(--rs-ouro-rgb), .18); color: #fff;
    border-color: rgba(var(--rs-ouro-rgb), .55); }
.rs-tv-bt.ligado { background: var(--rs-ouro); border-color: var(--rs-ouro); color: var(--rs-marca); }

.rs-tv-marca { display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; text-align: left; min-width: 0;
    width: fit-content; max-width: 100%;
    gap: clamp(8px, 1.5vmin, 22px);
    padding: clamp(10px, 2vmin, 30px) 0; }

.rs-tv-marca .logo { position: relative; display: block; width: 100%;
    max-width: clamp(280px, 62vmin, 900px); }
.rs-tv-marca .logo img { width: 100%; height: auto; display: block;
    /* A sombra projetada é o que impede a logo de parecer "colada" no fundo. */
    filter: drop-shadow(0 6px 26px rgba(0,0,0,.55)); }

.rs-tv-marca .lema { position: relative; margin: clamp(4px,.8vmin,12px) 0 0; color: #fff;
    font-family: var(--rs-display); font-weight: 300; letter-spacing: .01em;
    font-size: clamp(.8rem, 1.9vmin, 1.7rem); }
.rs-tv-marca .risco { position: relative; width: clamp(56px, 9vmin, 140px); height: 2px;
    background: linear-gradient(90deg, var(--rs-ouro), transparent); }
.rs-tv-marca .onde { position: relative; margin: 0; color: var(--tv-apoio);
    font-size: clamp(.58rem, 1.15vmin, .95rem); letter-spacing: .06em; }
.rs-tv-marca .onde span { display: block; margin-top: .4em; color: rgba(157,176,196,.75);
    font-size: .92em; }

/* ── O pé: a fita do Judiciário ───────────────────────────────────────────────────────────── */
.rs-tv-rodape { display: flex; align-items: center; min-width: 0;
    gap: clamp(8px, 1.4vmin, 20px);
    background: rgba(0,0,0,.28); border: 1px solid var(--tv-fio);
    border-radius: var(--rs-raio-cartao-novo);
    padding: clamp(10px,1.8vmin,28px) clamp(14px,2.4vmin,34px); }   

.rs-tv-rodape { border-radius: 0; border-width: 1px 0 0;
    margin: 0 calc(-1 * clamp(14px, 2.2vmin, 34px)); }   
.rs-tv-rodape .selo { display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
    text-transform: uppercase; letter-spacing: .2em; font-weight: 800; color: var(--rs-ouro);
    font-size: clamp(.8rem, 2vmin, 1.7rem); }
.rs-tv-rodape .quando { white-space: nowrap; color: var(--tv-apoio);
    font-size: clamp(.8rem, 1.9vmin, 1.6rem); }
.rs-tv-rodape .fita { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden;
    transition: opacity .3s;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.rs-tv-rodape .corre { display: flex; align-items: center; gap: clamp(30px, 5vmin, 80px);
    width: max-content; animation: rs-tv-fita 150s linear infinite; }
.rs-tv-rodape .peca { display: inline-flex; align-items: center; gap: .7em; white-space: nowrap;
    color: var(--tv-texto); font-size: clamp(1rem, 2.6vmin, 2.2rem); }
.rs-tv-rodape .peca b { text-transform: uppercase; letter-spacing: .12em; font-weight: 800;
    color: var(--rs-ouro); font-size: .82em; }
/* -50% é exatamente uma cópia da fita (a lista é escrita duas vezes em /tv.php): o fim do ciclo
   cai num ponto idêntico ao começo, e a volta não aparece.
*/
@keyframes rs-tv-fita { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .rs-tv-rodape .corre { animation: none; }
    .rs-tv-canal .vivo i { animation: none; }
}

/* Retrato (alguém conferindo pelo celular, ou a TV girada): o canal em cima, a marca embaixo. */
@media (max-aspect-ratio: 1/1) {
    .rs-tv-palcos { flex-direction: column; transform: none; }
    .rs-tv-marca { width: auto; }
    .rs-tv-canal { width: 100%; }
    .rs-tv-marca { align-items: center; text-align: center; padding: clamp(8px,2vmin,24px); }
    .rs-tv-marca .canais { justify-content: center; }
    .rs-tv-marca .risco { background: linear-gradient(90deg, transparent, var(--rs-ouro), transparent); }
    .rs-tv-relogio .data { display: none; }
    .rs-tv-tempo { font-size: clamp(.9rem, 3.4vmin, 1.6rem); }
}

.rs-tv-canal, .rs-tv-canal::before, .rs-tv-canal .cabeca, .rs-tv-canal .palco {
    transition: background-color .5s, border-color .5s, box-shadow .5s, opacity .5s; }
body.rs-tv.parado .rs-tv-canal { background-color: transparent; border-color: transparent;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.rs-tv.parado .rs-tv-canal::before,
body.rs-tv.parado .rs-tv-canal .cabeca { opacity: 0; }
body.rs-tv.parado .rs-tv-canal .palco { box-shadow: 0 18px 60px rgba(0,0,0,.5); }

/*   ⛔ Tudo aqui fica DENTRO do @supports: navegador novo não lê uma linha, e o desenho aprovado
   não muda. Os valores são o termo do meio de cada clamp() — o que vale numa tela de 1080.
   ═══════════════════════════════════════════════════════════════════════════════════════════
*/
@supports not (width: min(1px, 2px)) {
    body.rs-tv, .rs-tv-quadro { height: 100vh; }
    body.rs-tv { background-repeat: no-repeat; }
    .rs-tv-quadro { grid-gap: 1.4vmin; }
    .rs-tv-brilho { top: -18%; right: 30%; left: -12%; }
    .rs-tv-circulo { height: 62vmin; }
    .rs-tv-circulo::after { height: 28.5vmin; }
    .rs-tv-canal .palco iframe { top: 0; left: 0; }
    /* o palco nasce 16:9 pela conta (o JS refina depois, como no navegador novo) */
    .rs-tv-canal .palco { height: calc((48.5vw - 2.4vmin - 2px) * 9 / 16); }
    .rs-tv-marca { width: -webkit-fit-content; }
    /* clamp()/min() → o termo do meio */
    .rs-tv-escada { left: 2.4vmin; }
    .rs-tv-quadro { padding: 1.8vmin 2.2vmin; }
    .rs-tv-telacheia { font-size: .95vmin; }
    body.rs-tv.parado .rs-tv-telacheia { margin-right: calc(2vmin * -1); }
    .rs-tv-tempo { padding-right: 2vmin; font-size: 2.6vmin; }
    .rs-tv-relogio .hora { font-size: 4.4vmin; }
    .rs-tv-relogio .data { font-size: 1.25vmin; }
    .rs-tv-palcos { transform: translateX(0.8vw); }
    .rs-tv-canal { box-shadow: 0 2px 6px rgba(0,0,0,.35),
                0 3.4vmin 7vmin rgba(0,0,0,.55); }
    .rs-tv-canal { width: 48.5vw; padding: 1.2vmin; }
    .rs-tv-canal .cabeca { padding: .4vmin .5vmin; }
    .rs-tv-canal .nome { font-size: 1.55vmin; }
    .rs-tv-canal .vivo { font-size: .95vmin; }
    .rs-tv-canal .programa { font-size: 1.2vmin; }
    .rs-tv-bt { width: 3.1vmin; height: 3.1vmin; font-size: 1.2vmin; }
    .rs-tv-marca { padding: 2vmin 0; }
    .rs-tv-marca .logo { max-width: 62vmin; }
    .rs-tv-marca .lema { margin: .8vmin 0 0; font-size: 1.9vmin; }
    .rs-tv-marca .risco { width: 9vmin; }
    .rs-tv-marca .onde { font-size: 1.15vmin; }
    .rs-tv-rodape { padding: 1.8vmin 2.4vmin; }
    .rs-tv-rodape { margin: 0 -2.2vmin; }
    .rs-tv-rodape .selo { font-size: 2vmin; }
    .rs-tv-rodape .quando { font-size: 1.9vmin; }
    .rs-tv-rodape .peca { font-size: 2.6vmin; }

    /* gap de flex → margem, peça a peça */
    .rs-tv-escada i + i { margin-top: 1vmin; }
    .rs-tv-topo > * + * { margin-left: 2vmin; }
    .rs-tv-palcos > .rs-tv-marca { margin-right: 4.2vw; }
    .rs-tv-canal .cabeca { margin-bottom: .9vmin; }
    .rs-tv-canal .cabeca > * + * { margin-left: 1.1vmin; }
    .rs-tv-canal .nome .logo-canal { margin-right: .5em; }
    .rs-tv-canal .vivo i { margin-right: .5em; }
    .rs-tv-telacheia i { margin-right: .6em; }
    .rs-tv-tempo i { margin-right: .55em; }
    .rs-tv-marca > * + * { margin-top: 1.5vmin; }
    .rs-tv-rodape > * + * { margin-left: 1.4vmin; }
    .rs-tv-rodape .selo i { margin-right: .55em; }
    .rs-tv-rodape .peca { margin-right: 5vmin; }
    .rs-tv-rodape .peca b { margin-right: .7em; }

    .rs-tv-marca .logo img { filter: none; }
    .rs-tv-marca .lema { font-weight: 500; font-size: 2.2vmin; }
    .rs-tv-marca .onde { font-weight: 600; font-size: 1.5vmin; color: #c9d5e2; }
    .rs-tv-relogio .hora, .rs-tv-tempo { font-weight: 400; }
}

.rs-tv-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 0 2px; }
.rs-tv-atalhos .rs-pilula { min-width: 0; display: inline-flex; align-items: center;
    justify-content: center; gap: .55em; padding: 11px 8px; font-size: .6rem;
    letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-tv-atalhos .rs-pilula i { font-size: .82em; }

.mesa-badge { display:inline-block; margin-left:5px; padding:1px 7px; border-radius:999px;
              font-size:.66rem; font-weight:800; line-height:1.5; vertical-align:1px;
              background:rgba(255,255,255,.24); color:inherit; }
.btn-sec .mesa-badge { background:#e6eaf1; color:#5b667a; }
.mesa-badge.viva { background:#22c55e; color:#06240f; animation:mesaPisca 1.4s ease-in-out infinite; }
@keyframes mesaPisca { 0%,100%{ opacity:1 } 50%{ opacity:.45 } }