/* Barbosa Advogados — Sistema de Gestao
   Estilo sobrio e legivel. Sem dependencias externas. */

:root {
    --azul: #1f3a5f;
    --azul-claro: #2f5484;
    --tinta: #1c2431;
    --cinza: #5b6472;
    --cinza-claro: #e7eaef;
    --fundo: #f4f6f9;
    --branco: #ffffff;
    --verde: #1f7a4d;
    --verde-bg: #e6f4ec;
    --vermelho: #a12a2a;
    --vermelho-bg: #fbeaea;
    --borda: #d3d8e0;
    --raio: 8px;
    /* Largura da area util (16/09/2026). Era 1000px fixos no centro, o que
       espremia a lista de processos num monitor largo e deixava duas faixas
       vazias dos lados. Agora a tela acompanha a janela ate --largura-max,
       afastada das bordas por --margem-lateral — que o escritorio escolhe em
       Configuracoes (o layout sobrescreve a variavel com o valor gravado).
       Em mm porque foi assim que o usuario pensou a medida. */
    --margem-lateral: 20mm;
    --largura-max: 1800px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    color: var(--tinta);
    background: var(--fundo);
    line-height: 1.5;
}

a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Topo / navegacao ---- */
/* Barra FIXA no alto enquanto a pagina rola (18/09/2026): no celular, com
   listas longas de cartoes, o menu sumia e era preciso rolar tudo de volta
   para usa-lo. sticky, e nao fixed: continua ocupando o seu lugar no fluxo,
   entao nada abaixo precisa de margem para nao ficar escondido. z-index acima
   dos baloes de ajuda (20) e dos paineis de menu (30/40), que moram dentro
   dela ou abaixo. */
.topo {
    background: var(--azul);
    color: #fff;
    position: sticky; top: 0; z-index: 50;
}
/* Link que salta para um ponto da pagina (#andamentos...) desconta a barra
   fixa, senao o titulo de destino para escondido atras dela. */
html { scroll-padding-top: 56px; }
.topo-inner {
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 0 var(--margem-lateral);
    height: 56px;
    display: flex;
    align-items: center;
    gap: 24px;
}
/* Nome do sistema. Desde 10/09/2026 ele vem da tela de Configuracoes e pode
   ser mais longo do que o "Barbosa Advogados" que era fixo aqui — nowrap para
   nao quebrar em duas linhas dentro de uma barra de 56 px de altura. */
.marca { color: #fff; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.marca:hover { text-decoration: none; opacity: .9; }
/* Navegacao + Sair. No computador e so um trilho flex que ocupa o resto da
   barra (a nav empurra o Sair para a direita, como antes); no celular vira o
   painel do botao "Menu" — ver "Menu do celular" mais abaixo. */
.topo-menu { flex: 1; display: flex; align-items: center; gap: 24px; min-width: 0; }
.menu-botao { display: none; }
.nav { display: flex; gap: 18px; margin-right: auto; }
.nav a { color: #dfe6f0; font-size: .95rem; }
.nav a:hover { color: #fff; text-decoration: none; }
.sair { display: flex; align-items: center; gap: 12px; }
/* "Sair" e um .btn-link, cuja cor e o azul-claro do texto sobre fundo claro —
   mas ele vive na barra AZUL-ESCURA do topo, onde essa cor quase desaparece
   (da para ver isso em qualquer print antigo do sistema). Aqui ele acompanha
   os links da navegacao, que ja resolveram o mesmo problema. */
.sair .btn-link { color: #dfe6f0; }
.sair .btn-link:hover { color: #fff; }
.usuario { color: #cfd9e6; font-size: .88rem; }

/* ---- Conteudo ---- */
.conteudo {
    max-width: var(--largura-max);
    margin: 28px auto;
    padding: 0 var(--margem-lateral);
}

h1 { font-size: 1.5rem; margin: 0 0 16px; }
.contagem { color: var(--cinza); font-weight: 400; font-size: 1rem; }

/* ---- Rodape ---- */
.rodape {
    max-width: var(--largura-max);
    margin: 40px auto 24px;
    padding: 16px var(--margem-lateral) 0;
    border-top: 1px solid var(--borda);
    color: var(--cinza);
    font-size: .82rem;
}
.rodape-end { margin-top: 4px; }

/* ---- Botoes ----
   TODO botao de acao e azul. Antes .btn era branco e so .btn-primario era
   azul, seguindo a convencao de "uma acao principal por tela". A convencao
   existe, mas aqui ela vinha sendo aplicada por habito, e o resultado ficou
   arbitrario: na lista de Processos, dois cartoes lado a lado com acoes
   equivalentes — "Buscar novos processos (DJEN)" e "DataJud - varrer todos" —
   apareciam em cores diferentes sem que a diferenca quisesse dizer nada.
   Decisao do usuario em 02/09/2026: um so peso visual para acao.

   As duas excecoes que ficam sao SEMANTICAS, nao decorativas:

     .btn-perigo  vermelho, acao destrutiva (Excluir). Pintar de azul faria o
                  botao que APAGA um processo ficar igual ao que o salva.
     .btn-link    texto azul sem fundo. E navegacao ("<- Voltar", "Editar"
                  dentro da linha de uma tabela), nao acao; dar peso de botao
                  solido a cada "<- Lista" encheria a tela de azul e roubaria
                  a atencao do que de fato faz alguma coisa.

   .btn-primario continua existindo como APELIDO de .btn: nenhuma view
   precisou mudar, e o nome ainda documenta qual e a acao principal da tela.
   Estado selecionado (filtros do Financeiro) NAO usa mais essas classes —
   ver .filtro-botao, que e indicador de estado e nao hierarquia de acao. */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--azul);
    border-radius: var(--raio);
    background: var(--azul);
    color: #fff;
    font-size: .92rem;
    cursor: pointer;
    line-height: 1.2;
}
/* Sem 'color' no hover de proposito: .btn-link herdaria o branco e sumiria
   no fundo claro. Cada variante ja define a sua cor de texto. */
.btn:hover { background: var(--azul-claro); border-color: var(--azul-claro); text-decoration: none; }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-claro); }
.btn-perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-perigo:hover { background: #8f2222; border-color: #8f2222; }
.btn-link { border-color: transparent; background: transparent; color: var(--azul-claro); }
.btn-link:hover { background: transparent; text-decoration: underline; }

/* Desabilitado: cinza chapado. Passou a ser necessario quando .btn virou
   azul — antes o botao travado (ex.: "Sincronizar via DataJud" em processo
   sem numero CNJ) ja era branco e discreto; azul, sem esta regra, ele
   pareceria clicavel. */
.btn[disabled], .btn:disabled {
    background: var(--cinza-claro);
    border-color: var(--borda);
    color: var(--cinza);
    cursor: not-allowed;
}
.btn[disabled]:hover, .btn:disabled:hover { background: var(--cinza-claro); border-color: var(--borda); }

/* Botao de FILTRO (situacao, no Financeiro): grupo em que um item esta
   selecionado e os outros nao. Aqui a cor diz ESTADO, nao importancia —
   por isso ele nao pode usar .btn/.btn-primario, que agora sao azuis os
   dois e deixariam todos os filtros com cara de selecionado. */
.filtro-botao {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--tinta);
    font-size: .92rem;
    line-height: 1.2;
    cursor: pointer;
}
.filtro-botao:hover { background: #f0f2f6; text-decoration: none; }
.filtro-botao.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.filtro-botao.ativo:hover { background: var(--azul-claro); border-color: var(--azul-claro); }

/* ---- Alertas / flash ---- */
.alerta {
    padding: 11px 14px;
    border-radius: var(--raio);
    margin-bottom: 16px;
    border: 1px solid transparent;
    font-size: .92rem;
}
.alerta-sucesso { background: var(--verde-bg); border-color: #b8e0c9; color: var(--verde); }
.alerta-erro    { background: var(--vermelho-bg); border-color: #eec2c2; color: var(--vermelho); }

/* ---- Cabecalho de lista ---- */
.cabecalho-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.cabecalho-lista h1 { margin: 0; }
.acoes-topo { display: flex; gap: 8px; }

/* ---- Busca ---- */
.busca { display: flex; gap: 8px; margin-bottom: 18px; }
.busca input[type="search"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.filtro-situacao {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--cinza);
    white-space: nowrap;
}
.filtro-situacao select {
    padding: 8px 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: #fff;
}
/* Campo de busca e menus da barra de filtro com cara de CAMPO ATIVO.
   Sem fundo, cor e aparencia declarados, o iPhone aplica o estilo nativo de
   "searchfield" — caixa cinza, letra miuda — e o campo parecia desativado
   (print do usuario, 18/09/2026). appearance:none tira o estilo nativo; o
   select ganha de volta a setinha desenhada aqui. */
.busca input[type="search"], .busca select {
    -webkit-appearance: none; appearance: none;
    background-color: var(--branco); color: var(--tinta);
    border: 1px solid var(--borda); border-radius: var(--raio);
    font: inherit; font-size: .95rem;
}
.busca input[type="search"]::placeholder { color: #8a93a1; opacity: 1; }
.busca input[type="search"]:focus, .busca select:focus {
    outline: none; border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(47, 84, 132, .18);
}
.busca select {
    padding: 8px 32px 8px 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6472' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 12px 8px;
}

/* ---- Tabela ---- */
.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}
.tabela th, .tabela td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cinza-claro);
    font-size: .92rem;
}
.tabela th { background: #eef1f6; color: var(--cinza); font-weight: 600; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tr.inativo td { color: var(--cinza); font-style: italic; }
.tabela .acoes { text-align: right; white-space: nowrap; }

/* Coluna aglutinada "Última movimentação" (data; movimento; complemento; orgao).
   Pode ser um texto longo, entao limita a largura e deixa quebrar linha, para
   nao espremer as demais colunas da lista de processos. */
.tabela td.ultima-mov { width: 30%; line-height: 1.35; }
.cabecalho-dica { display: block; font-weight: 400; font-size: .74rem;
                  color: var(--cinza); margin-top: 2px; }
.tabela td.ultima-mov .sem-mov { color: var(--cinza); font-style: italic; }
.tabela td.ultima-mov .ver-andamentos { margin-left: 4px; white-space: nowrap; }
/* Folga para o titulo "Andamentos processuais" nao colar na borda ao chegar por #andamentos */
#andamentos { scroll-margin-top: 12px; }
/* Caixa "Sincronizar em:" da ficha do processo — tabela de uma celula so.
   overflow visivel: a .tabela corta o que transborda (para o canto
   arredondado), e isso cortaria o balao do "?". A linha e a ancora do balao,
   que abre logo abaixo dela, na largura da caixa. */
.tabela.sincronizar-em { margin-top: 20px; overflow: visible; }
.sincronizar-em .sincronizar-linha { position: relative; display: flex; flex-wrap: wrap;
                                     align-items: center; gap: 8px; }
.sincronizar-em .sincronizar-linha .ajuda { margin-right: 10px; }
.sincronizar-em .sincronizar-linha form { margin: 0; }
.vazio { color: var(--cinza); padding: 24px 0; }

/* ---- Paginacao ---- */
/* Barra compacta (helper paginacao_html): setas, 3 primeiras, 3 ultimas, a
   atual com as vizinhas e o "..." que salta 10 paginas. Largura fixa nos
   botoes para a barra nao "pular" ao trocar de pagina de 1 para 2 digitos. */
.paginacao { display: flex; gap: 6px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
.paginacao a, .paginacao .pg-seta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 32px; padding: 0 8px;
    border: 1px solid var(--borda); border-radius: 6px;
    background: var(--branco); color: var(--azul-claro); font-size: .9rem;
}
.paginacao a:hover { border-color: var(--azul-claro); background: #f0f4fa; text-decoration: none; }
.paginacao a.atual { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600; }
.paginacao a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.paginacao .pg-salto { color: var(--cinza); letter-spacing: 1px; }
/* Ponta da lista: a seta vira <span> apagado — nao e link porque nao leva
   a lugar nenhum (e assim tambem sai da navegacao por teclado). */
.paginacao .pg-seta.desligada { color: #c3c9d4; background: var(--cinza-claro); }
.pg-info { margin-left: 8px; color: var(--cinza); font-size: .85rem; }
.pg-info strong { color: var(--tinta); }

/* ---- Formularios ---- */
.form { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
        padding: 22px; max-width: 720px; }
.form label, .card-login label { display: block; margin-bottom: 16px; font-weight: 600; font-size: .9rem; }
/* type="number" entrou na lista em 10/09/2026: sem ele a "Porta" do IMAP
   ficava como uma caixinha solta ao lado do rotulo, enquanto todo campo
   vizinho ocupava a linha inteira. */
.form input[type="text"], .form input[type="email"], .form input[type="password"],
.form input[type="date"], .form input[type="number"], .form select,
.form textarea, .card-login input {
    width: 100%;
    margin-top: 6px;
    padding: 9px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font: inherit;
    font-weight: 400;
    background: var(--branco);
}
.form textarea { resize: vertical; }
.linha-dupla { display: flex; gap: 16px; flex-wrap: wrap; }
.linha-dupla label { flex: 1; min-width: 150px; }
.tipo-pessoa, .bloco { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px 4px; margin-bottom: 16px; }
/* Ancora do balao de ajuda do "?" que mora na legenda do fieldset: sem isto o
   balao (position:absolute) se penduraria no ancestral posicionado mais
   proximo e escaparia do bloco. */
.bloco { position: relative; }
.tipo-pessoa { padding-bottom: 12px; }
.tipo-pessoa legend, .bloco legend { font-weight: 600; font-size: .9rem; padding: 0 6px; color: var(--azul); }
.radio, .checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin: 0 18px 0 0; }
.checkbox { margin-bottom: 16px; }
.radio input, .checkbox input { width: auto; margin: 0; }
.form-acoes { margin-top: 8px; }
span.erro { display: block; color: var(--vermelho); font-weight: 400; font-size: .84rem; margin-top: 4px; }

/* ---- Sugestoes de preenchimento (formulario do processo) ----
   Aparecem sob um campo VAZIO, com o texto que alguma fonte ja trouxe e um
   botao que preenche. Peso normal e corpo menor de proposito: e oferta, nao
   conteudo do formulario — nao pode competir com o rotulo do campo. */
.sugestao { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
            margin: 5px 0 0; font-weight: 400; font-size: .84rem; color: var(--cinza); }
.sugestao-fonte { flex: 0 0 auto; font-size: .72rem; text-transform: uppercase;
                  letter-spacing: .03em; background: var(--cinza-claro);
                  color: var(--cinza); padding: 1px 7px; border-radius: 10px; }
.sugestao-texto { flex: 1 1 auto; min-width: 0; color: var(--tinta); }
.btn-usar { flex: 0 0 auto; background: none; border: none; padding: 0;
            font: inherit; color: var(--azul); text-decoration: underline;
            cursor: pointer; }
.btn-usar:hover { color: var(--azul-claro); }
.btn-usar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---- Seletor de cliente(s) do processo (autocomplete + tabela) ----
   O <select multiple> continua no HTML como reserva sem-JS; quando o
   seletor-clientes.js liga, marca .com-js no container e esconde o select e a
   dica do Ctrl, deixando à vista só a caixa de busca, o pop-up e a tabela de
   vinculados. */
.seletor-clientes.com-js > label,
.seletor-clientes.com-js .dica-sem-js { display: none; }

.seletor-clientes-busca { width: 100%; }

/* No FLUXO do layout (não flutua): a lista aberta empurra a tabela de
   vinculados para baixo em vez de cobri-la. max-height + rolagem seguram a
   altura quando há muitos clientes. */
.seletor-clientes-pop {
    margin-top: 4px; background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio); max-height: 260px; overflow-y: auto;
}
.seletor-clientes-item { padding: 8px 12px; cursor: pointer; font-size: .9rem;
                         border-bottom: 1px solid var(--cinza-claro); }
.seletor-clientes-item:last-child { border-bottom: none; }
.seletor-clientes-item.ativo,
.seletor-clientes-item:hover { background: var(--fundo); }
.seletor-clientes-item mark { background: #fdf1dc; color: inherit; padding: 0 1px; border-radius: 2px; }
.seletor-clientes-nada { padding: 10px 12px; font-size: .84rem; color: var(--cinza); }

/* Tabela dos clientes já vinculados, logo abaixo da busca. */
.seletor-clientes-lista { width: 100%; border-collapse: collapse; margin-top: 12px; }
.seletor-clientes-lista td { padding: 8px 4px; border-bottom: 1px solid var(--cinza-claro);
                             font-size: .9rem; font-weight: 400; }
.seletor-clientes-remover { text-align: right; white-space: nowrap; }
.seletor-clientes-vazio { margin-top: 12px; padding: 12px; text-align: center;
                          border: 1px dashed var(--borda); border-radius: var(--raio); }

/* "Remover" é link de texto, mas na cor de destruir — coerente com a regra
   "vermelho só para destruir" (não vira um .btn-perigo cheio, que pesaria). */
.btn-link-perigo { background: none; border: none; padding: 0; font: inherit;
                   color: var(--vermelho); text-decoration: underline; cursor: pointer; }
.btn-link-perigo:hover { color: #8f2222; }
.btn-link-perigo:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }

/* Faixa "provável cliente" (partes do processo). Oferta discreta, como as
   demais sugestões: fundo azul-claro, botões que vinculam num clique. */
.sug-clientes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                background: #e8eef7; border-radius: var(--raio); padding: 8px 12px; margin-bottom: 10px; }
.sug-clientes-rotulo { font-size: .84rem; font-weight: 400; color: var(--azul); }
.btn-sug-cliente { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
                   padding: 3px 12px; font: inherit; font-size: .84rem; color: var(--azul-claro);
                   cursor: pointer; }
.btn-sug-cliente:hover { border-color: var(--azul-claro); }
.btn-sug-cliente:disabled { color: var(--verde); border-color: var(--verde-bg);
                            background: var(--verde-bg); cursor: default; }

/* Lista de checkboxes (ex.: vincular contratos ao processo) */
.lista-check { max-height: 240px; overflow-y: auto; border: 1px solid var(--borda);
               border-radius: var(--raio); padding: 6px 10px; background: var(--branco); }
.check-item { display: flex; align-items: flex-start; gap: 8px; font-weight: 400;
              padding: 5px 0; border-bottom: 1px solid var(--cinza-claro); }
.check-item:last-child { border-bottom: none; }
.check-item input { width: auto; margin: 3px 0 0; }
.check-item em { color: var(--cinza); font-style: normal; }
.contrato-fixo { margin: 0; padding: 10px 12px; background: #eef1f6; border-radius: var(--raio); }
.contrato-fixo em { color: var(--cinza); font-style: normal; }

/* Relatório */
.periodo { color: var(--cinza); font-size: .92rem; margin: 4px 0 16px; }
.tabela tr.linha-dia td { background: #e9edf4; font-weight: 700; color: var(--azul); }

/* Impressão: só o conteúdo do relatório */
@media print {
    .topo, .rodape, .no-print, .acoes-topo, .busca { display: none !important; }
    body { background: #fff; }
    .conteudo { margin: 0; max-width: 100%; }
    a { color: #000; text-decoration: none; }
    .tabela { border: 1px solid #999; }
    .tabela th, .tabela td { border-color: #ccc; }
}

/* ---- Detalhe ---- */
.dados { display: grid; grid-template-columns: 180px 1fr; gap: 2px 16px;
         background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
         padding: 20px; margin-bottom: 20px; }
.dados dt { color: var(--cinza); font-size: .85rem; padding: 6px 0; }
.dados dd { margin: 0; padding: 6px 0; }
.tag { font-size: .72rem; background: var(--cinza-claro); color: var(--cinza);
       padding: 2px 9px; border-radius: 10px; vertical-align: middle; white-space: nowrap; }
.tag-ativo     { background: var(--verde-bg);    color: var(--verde); }
.tag-encerrado { background: var(--cinza-claro); color: var(--cinza); }
.tag-suspenso  { background: #fdf1dc;            color: #9a6a10; }
.tag-cancelado { background: var(--vermelho-bg); color: var(--vermelho); }
.tag-arquivado { background: var(--cinza-claro); color: var(--cinza); }
/* Processo que entrou pela descoberta do DJEN e nao e do escritorio.
   Fica na base para nao ser cadastrado de novo — nao e exclusao. */
.tag-descartado { background: var(--vermelho-bg); color: var(--vermelho); }
/* Parte digitada no sistema (ou corrigida a mao) em vez de importada do
   PDPJ/DJEN. Azul claro de proposito: nao e alerta nem sucesso, e so a
   procedencia da linha. */
.tag-manual { background: #e8eef7; color: var(--azul-claro); }
.tag-inativo        { background: var(--cinza-claro); color: var(--cinza); }
.tag-devedor        { background: var(--vermelho-bg); color: var(--vermelho); }
.tag-substabelecido { background: #e8eef7;            color: var(--azul-claro); }
.tag-pago      { background: var(--verde-bg);    color: var(--verde); }
.tag-parcial   { background: #fdf1dc;            color: #9a6a10; }
.tag-pendente  { background: var(--cinza-claro); color: var(--cinza); }
.tag-atrasado  { background: var(--vermelho-bg); color: var(--vermelho); }
.filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.sub-titulo { font-size: 1.15rem; margin: 0; }
.sep { border: none; border-top: 1px solid var(--borda); margin: 24px 0; }

/* Partes x advogados lado a lado na ficha do processo. minmax(0,1fr) e nao
   1fr: sem isso, um nome de parte muito longo estoura a coluna em vez de
   quebrar (o minimo automatico de um item de grid e o conteudo). */
.dados-duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                      gap: 20px; align-items: start; }
.dados-duas-colunas h3 { margin: 0 0 8px; }

/* ---- Acoes do acervo (topo da lista de processos) ----
   Dois cartoes lado a lado, deliberadamente baixos: o espaco da tela e da
   LISTA de processos. A explicacao de cada botao nao fica no fluxo — mora em
   .ajuda-texto, um balao que abre ao clicar no "?" do cartao. */
/* auto-fit em vez de duas colunas fixas: os cartoes de acao ja sao tres
   (DJEN, DataJud e PUSH) e o numero tende a crescer. Assim eles se
   reacomodam sozinhos conforme a largura, sem deixar buraco na grade. */
.acoes-acervo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 16px; margin-bottom: 20px; }
.acao-cartao { position: relative; background: var(--branco); border: 1px solid var(--borda);
               border-radius: var(--raio); padding: 14px 16px; }
.acao-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* Linha de controles do cartao (ex.: data + botao em Publicacoes). Igual ao
   .filtros, mas sem a margem inferior, que aqui sobraria. */
.acao-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acao-linha label { display: inline-flex; align-items: center; gap: 6px; }
.acao-cartao .sub-titulo { font-size: 1rem; }

/* Ajuda do cartao: <details> puro, aberto por CLIQUE no "?".
   Era hover no cartao inteiro e foi trocado (01/09/2026) porque o balao
   aparecia sozinho toda vez que o ponteiro cruzava o cartao a caminho do
   campo de busca — e o cobria. Depois de ler uma vez, o usuario ja sabe
   para que serve o botao; a explicacao passa a ser sob demanda.
   <details> em vez de JavaScript: ja da clique, teclado (Enter/Espaco) e
   estado aberto/fechado de graca. O ajuda.js so fecha com Esc e com clique
   fora, que o elemento nativo nao faz. */
/* inline-block + vertical-align para o "?" caber ao lado do texto quando NAO
   esta num container flex — e o caso da legenda do fieldset no formulario do
   processo, onde sem isto ele quebrava para a linha de baixo. Dentro de
   .acao-topo (flex) o display e blocado pelo proprio flex, entao os cartoes da
   lista continuam iguais. */
.ajuda { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.ajuda > summary { display: inline-flex; align-items: center; justify-content: center;
                   width: 18px; height: 18px; border-radius: 50%;
                   border: 1px solid var(--borda); color: var(--cinza);
                   font-size: .72rem; line-height: 1; cursor: pointer;
                   user-select: none; list-style: none; }
/* Some com o triangulo do <details> nos dois motores. O ::marker so aparece
   quando o summary fica em display:list-item (o padrao); como aqui ele e
   inline-flex, ja nao deveria surgir — as duas regras ficam por seguranca,
   que foi justamente o que faltou a quem abriu a pagina com o CSS antigo em
   cache e viu o triangulo de volta. */
.ajuda > summary::-webkit-details-marker { display: none; }
.ajuda > summary::marker { content: ''; }
.ajuda > summary:hover,
.ajuda[open] > summary { border-color: var(--azul); color: var(--azul); }
.ajuda > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Ancorado no CARTAO (que e position:relative), nao no "?": assim o balao
   ocupa a largura do cartao e nunca escapa da janela. */
.ajuda-texto { position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
               margin: 6px 0 0; padding: 12px 14px; background: var(--branco);
               border: 1px solid var(--borda); border-radius: var(--raio);
               box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
               color: var(--cinza); font-size: .88rem; line-height: 1.5; }


/* Barra de progresso da sincronizacao em lote. */
.progresso { background: var(--cinza-claro); border-radius: 10px; height: 10px;
             overflow: hidden; margin: 10px 0 6px; }
.progresso > span { display: block; height: 100%; width: 0; background: var(--azul);
                    transition: width .25s ease; }

/* ---- Painel (dashboard) ---- */
.ola { color: var(--cinza); margin-top: -8px; }
.cards { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; }
.card { flex: 1; min-width: 150px; background: var(--branco); border: 1px solid var(--borda);
        border-radius: var(--raio); padding: 20px; text-align: center; }
a.card:hover { border-color: var(--azul-claro); text-decoration: none; }
.card-num { display: block; font-size: 2rem; font-weight: 700; color: var(--azul); }
.card-rot { color: var(--cinza); font-size: .9rem; }
.dica { color: var(--cinza); font-size: .9rem; }

/* ---- Login ---- */
.tela-login { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: var(--azul); }
.card-login { background: var(--branco); padding: 34px 30px; border-radius: 12px;
              width: 340px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.card-login h1 { margin: 0; font-size: 1.35rem; text-align: center; color: var(--azul); }
.card-login .sub { text-align: center; color: var(--cinza); margin: 4px 0 22px; font-size: .9rem; }
.card-login .btn { width: 100%; margin-top: 6px; }
/* Face ID / digital (passkeys). Botao BRANCO com borda azul: e uma acao, mas
   a segunda da tela — o "Entrar" azul continua sendo a principal. */
.ou { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px;
      color: var(--cinza); font-size: .8rem; }
.ou::before, .ou::after { content: ""; flex: 1; border-top: 1px solid var(--borda); }
.btn.btn-passkey { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                   background: var(--branco); color: var(--azul); border-color: var(--azul); }
.btn.btn-passkey:hover { background: #eef3fb; border-color: var(--azul); }
.btn-passkey svg { width: 22px; height: 22px; flex: 0 0 auto; }
.passkey-msg { margin: 8px 0 0; min-height: 1.2em; font-size: .85rem; color: var(--cinza); text-align: center; }
.passkey-msg:empty { display: none; }
/* Tela "Face ID / digital" (conta/aparelhos) */
.passkey-cadastro { background: var(--branco); border: 1px solid var(--borda);
                    border-radius: var(--raio); padding: 16px 18px; margin: 0 0 22px; max-width: 640px; }
.passkey-cadastro h2 { margin: 0 0 6px; font-size: 1.05rem; color: var(--azul); }
.passkey-cadastro .linha-cadastro { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.passkey-cadastro label { flex: 1 1 220px; font-weight: 600; font-size: .9rem; }
.passkey-cadastro input { display: block; width: 100%; margin-top: 6px; padding: 9px 12px;
                          border: 1px solid var(--borda); border-radius: var(--raio); font: inherit; font-weight: 400; }
.passkey-cadastro .passkey-msg { text-align: left; }
.texto-explica { color: var(--cinza); max-width: 720px; }

/* ---- 404 ---- */
.erro-404 { text-align: center; padding: 60px 0; }
.erro-404 h1 { font-size: 4rem; color: var(--azul); margin: 0; }

/* ---- Processos fixados no topo (migracao 17) ---- */
/* Formulario que existe so para levar um botao (fixar/desafixar): precisa
   caber na linha da tabela e dentro do .acoes-topo, sem quebrar layout. */
.form-inline { display: inline-block; margin: 0; vertical-align: middle; }

/* Botao-pino da lista. NAO usa classe de botao de proposito: e um alternador
   de estado dentro da linha, e um botao azul solido por linha encheria a
   tabela de peso visual (mesma razao pela qual os filtros do Financeiro
   viraram .filtro-botao). Apagado quando desfixado, azul quando fixado. */
.btn-fixar { background: none; border: none; padding: 0 6px; cursor: pointer;
             font-size: .95rem; line-height: 1; filter: grayscale(1); opacity: .35; }
.btn-fixar:hover { opacity: .85; filter: none; }
.btn-fixar.ativo { opacity: 1; filter: none; }
.btn-fixar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Linha fixada: fundo levemente azulado (a cor da casa) + o pino ao lado do
   numero. O pino e o sinal principal; o fundo so agrupa as linhas. */
.tabela tr.fixada td { background: #eef3fb; }
.pino { font-size: .85rem; }

/* Risco entre o ultimo fixado e o resto da lista. */
.tabela tr.divisor-fixados td { background: var(--fundo); color: var(--cinza);
        font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
        padding: 4px 12px; }

.tag-fixado { background: #e8eef7; color: var(--azul-claro); }
.dica-fixados { margin: -6px 0 14px; }

/* ---- Barra "atualizada em" + recarga automatica ---- */
/* Uma linha discreta abaixo do titulo. Responde "isto que estou vendo e de
   quando?" — pergunta que nasce no momento em que a tela passa a se
   recarregar sozinha. Os controles (caixa, contagem, "atualizar agora") vem
   com [hidden] no HTML e so aparecem se o JavaScript rodar. */
.atualizacao {
    margin: -8px 0 14px;
    color: var(--cinza);
    font-size: .85rem;
}
.atualizacao strong { color: var(--tinta); font-weight: 600; }
.atualizacao label { cursor: pointer; }
.atualizacao input[type="checkbox"] { vertical-align: -1px; margin-right: 3px; }
.atualizacao-contagem { font-variant-numeric: tabular-nums; }

/* Numero da linha. Cinza e estreito: e uma referencia para apontar a linha,
   nao um dado do processo — nao pode competir com o numero do CNJ ao lado. */
.tabela th.col-num { width: 1%; white-space: nowrap; }
.tabela td.num-linha {
    color: var(--cinza);
    font-variant-numeric: tabular-nums;
    text-align: right;
    width: 1%;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

/* Realce breve na linha em que a leitura foi retomada depois da recarga:
   diz "voce estava aqui" sem obrigar o olho a reprocurar. */
.tabela tr.linha-retomada td { background: #fdf6dd; transition: background 1.2s ease; }

/* ---- Responsivo ---- */
@media (max-width: 640px) {
    .linha-dupla { flex-direction: column; gap: 0; }
    .dados { grid-template-columns: 1fr; }
    .dados-duas-colunas { grid-template-columns: 1fr; }
    .acoes-acervo { grid-template-columns: 1fr; }
    .dados dt { padding-bottom: 0; }
    .nav { gap: 12px; }
}

/* ---- Menu "Mais" da barra de navegacao ----
   <details> puro, sem JavaScript para abrir — mesma escolha das ajudas dos
   cartoes. O script do rodape so cuida de fechar ao clicar fora. */
.menu-mais { position: relative; display: inline-block; }
.menu-mais > summary { list-style: none; cursor: pointer; user-select: none;
                       color: #dfe6f0; font-size: .95rem; }
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais > summary::after { content: " \25BE"; }
/* ABERTO fica BRANCO, nao azul.
   Era `color: var(--azul)` — exatamente o azul-escuro do FUNDO da barra. O
   rotulo "Mais" desaparecia no instante em que o menu abria, que foi a
   reclamacao de 10/09/2026. Aqui ele ACENDE em vez de apagar. */
.menu-mais > summary:hover { color: #fff; }
.menu-mais[open] > summary { color: #fff; font-weight: 600; }
.menu-mais > summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px;
                                     border-radius: 4px; }
.menu-lista {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    min-width: 180px; padding: 6px;
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: 0 6px 20px rgba(0,0,0,.12);
    display: flex; flex-direction: column; gap: 2px;
}
/* A COR DO TEXTO precisa ser declarada AQUI.
   Sem esta linha os itens herdavam `.nav a { color: #dfe6f0 }` — um cinza
   quase branco, escolhido para a barra AZUL do topo — e ficavam ilegiveis
   sobre o fundo branco do submenu. E a mesma armadilha que o botao "Sair"
   ja tinha tido, so que no sentido contrario. */
.menu-lista a { padding: 8px 10px; border-radius: 6px; white-space: nowrap;
                color: var(--tinta); font-size: .92rem; }
.menu-lista a:hover { background: #eef2f8; color: var(--azul); text-decoration: none; }
.menu-lista a:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
/* Na tela estreita continua sendo o MESMO painel branco, so que ancorado a
   direita para nao sair da janela.
   Ja foi `position: static` aqui, virando uma lista solta dentro da barra — e
   essa era a outra metade do problema de contraste: a barra tem altura fixa
   de 56 px, entao a lista transbordava para cima do conteudo CLARO levando
   junto a cor de texto pensada para o fundo AZUL. Um painel so, em qualquer
   largura, nao tem esse problema. */
@media (max-width: 860px) {
    .menu-lista { left: auto; right: 0; max-width: calc(100vw - 24px); }
}

/* ---- Menu do celular (18/09/2026) ----
   Abaixo de 1040 px os itens nao cabem numa linha (medido: a barra inteira
   pede ~1000 px com a margem padrao de 20 mm; o iPhone cortava tudo
   depois de "Processos"). A barra fica so com o nome e o botao "Menu"; o
   botao (menu.js) poe .menu-aberto no .topo e o .topo-menu aparece como um
   PAINEL BRANCO logo abaixo da barra, com texto escuro — a licao do "Mais"
   (lista solta na barra azul = texto ilegivel) vale aqui tambem. Dentro do
   painel o "Mais" abre no proprio lugar, sem painel flutuante por cima. */
@media (max-width: 1040px) {
    /* .topo ja e sticky (ancora do painel do Menu, que abre logo abaixo). */
    .topo-inner { gap: 12px; padding: 0 16px; }
    .marca { margin-right: auto; overflow: hidden; text-overflow: ellipsis; }

    .menu-botao {
        display: inline-flex; align-items: center; gap: 6px;
        background: transparent; color: #fff; font: inherit; font-size: .95rem;
        border: 1px solid rgba(255,255,255,.45); border-radius: 6px;
        padding: 6px 12px; cursor: pointer;
    }
    .menu-botao-icone { font-size: 1.1rem; line-height: 1; }
    .topo.menu-aberto .menu-botao { background: rgba(255,255,255,.14); }

    .topo-menu {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--branco); border-bottom: 1px solid var(--borda);
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
        padding: 6px 16px 10px;
        max-height: calc(100vh - 56px); overflow-y: auto;
    }
    .topo.menu-aberto .topo-menu { display: flex; }

    .nav { flex-direction: column; gap: 0; margin: 0; }
    .nav a, .menu-mais > summary {
        display: block; padding: 12px 4px; font-size: 1rem;
        color: var(--tinta); border-bottom: 1px solid var(--cinza-claro);
    }
    .nav a:hover, .menu-mais > summary:hover { color: var(--azul); }
    .menu-mais { display: block; }
    .menu-mais[open] > summary { color: var(--azul); }
    .menu-mais > summary:focus-visible { outline-color: var(--azul); }
    .menu-lista {
        position: static; max-width: none; min-width: 0;
        border: 0; box-shadow: none; padding: 0 0 0 16px; background: transparent;
    }
    .menu-lista a { padding: 12px 4px; font-size: 1rem; border-radius: 0; }

    .sair { justify-content: space-between; padding: 12px 4px 2px; }
    .usuario { color: var(--cinza); font-size: .92rem; }
    .sair .btn-link { color: var(--azul-claro); font-size: 1rem; }
}
/* Conta de PUSH desligada continua visivel, mas apagada. */
tr.inativa td { opacity: .55; }

/* ---- Tela de Configuracoes ----------------------------------------
   Cada topico e uma LINHA de uma lista, separada da seguinte por um
   risco — a pedido do usuario (10/09/2026), porque a tela anterior era
   uma sequencia de titulos e paragrafos soltos e ficava dificil achar
   onde um assunto acabava e o outro comecava.

   A explicacao longa de cada topico NAO fica no fluxo: vive no balao do
   "?", igual ao dos cartoes da tela de Processos. O que sobra na linha e
   o rotulo e o campo. */
.config-lista { background: var(--branco); border: 1px solid var(--borda);
                border-radius: var(--raio); overflow: hidden; max-width: 820px; }
/* position:relative ancora o balao do "?" nesta linha: sem isso ele se
   penduraria no ancestral posicionado mais proximo e escaparia do bloco
   (a mesma correcao que o .bloco do formulario de processo ja teve). */
.config-item { position: relative; padding: 18px 20px; border-top: 1px solid var(--borda); }
.config-item:first-child { border-top: 0; }
.config-cabeca { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.config-cabeca h2 { margin: 0; font-size: 1rem; color: var(--azul); }
/* O campo vem SEMPRE abaixo do rotulo, nunca ao lado: foi o pedido
   explicito para as "Inscricoes", e vale para a tela inteira. */
.config-item label { display: block; margin-bottom: 0; font-weight: 600; font-size: .9rem; }
.config-item label + label { margin-top: 14px; }
.config-item input[type="text"], .config-item input[type="number"],
.config-item textarea {
    width: 100%; margin-top: 6px; padding: 9px 12px;
    border: 1px solid var(--borda); border-radius: var(--raio);
    font: inherit; font-weight: 400; background: var(--branco);
}
.config-item textarea { resize: vertical; }
/* Texto de exemplo dentro da caixa: claro o suficiente para nao se
   confundir com conteudo digitado. */
.config-item ::placeholder { color: #9aa3b0; opacity: 1; }
.config-item input[type="number"] { max-width: 140px; }
.config-item .radio { margin-top: 12px; font-weight: 400; }
.config-acoes { display: flex; align-items: center; gap: 14px;
                padding: 16px 20px; background: #f8fafc; border-top: 1px solid var(--borda); }
.config-acoes .dica { margin: 0; }

/* Advogados do escritorio: uma linha por advogado, nome e OAB.
   Grid (e nao flex) para as colunas ficarem alinhadas de uma linha para a
   outra, que e o que faz a lista parecer uma tabela. */
.adv-linha { display: grid; grid-template-columns: 1fr 170px 32px; gap: 10px;
             align-items: center; margin-bottom: 8px; }
.adv-linha input { margin-top: 0 !important; }
.adv-cabecalho { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
                 color: var(--cinza); margin-bottom: 4px; }
.adv-remover { background: none; border: 1px solid var(--borda); border-radius: 6px;
               color: var(--cinza); cursor: pointer; height: 32px; line-height: 1;
               font-size: 1rem; }
.adv-remover:hover { border-color: var(--vermelho); color: var(--vermelho); }
@media (max-width: 640px) {
    .adv-linha { grid-template-columns: 1fr 110px 32px; }
    .adv-cabecalho { display: none; }
}

/* Resultado do teste de conexao IMAP: uma estrategia por linha, com o
   veredito de cada uma. E o coracao da tela — quando a leitura falha, e
   aqui que se descobre por que. */
.teste-imap { margin: 14px 0 0; padding: 0; list-style: none;
              border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.teste-imap li { display: flex; gap: 10px; align-items: baseline;
                 padding: 8px 12px; border-top: 1px solid var(--borda); font-size: .9rem; }
.teste-imap li:first-child { border-top: 0; }
.teste-imap .ok { color: var(--verde); font-weight: 600; }
.teste-imap .falhou { color: var(--cinza); }
.teste-imap .metodo { flex: 0 0 150px; font-weight: 600; }
/* A resposta do servidor vem com URL de ajuda e identificador de sessao, sem
   espaco nenhum — sem quebrar em qualquer ponto, ela empurraria a largura da
   pagina inteira para fora da tela. */
.teste-imap .detalhe { flex: 1 1 auto; min-width: 0; color: var(--cinza);
                       overflow-wrap: anywhere; word-break: break-word; }

/* ---- Conta de e-mail do PUSH: um CARTAO por conta ------------------
   Era uma linha de tabela, e quebrou na pratica (11/09/2026): a mensagem
   da ultima leitura e uma frase inteira — as vezes com a URL de ajuda do
   Google dentro. Numa celula, ela esticava a tabela para fora da pagina e
   empurrava a coluna dos botoes para longe da vista.

   No cartao o texto tem a largura toda para quebrar, e os botoes ficam num
   rodape, sempre no mesmo lugar. */
.conta-cartao { background: var(--branco); border: 1px solid var(--borda);
                border-radius: var(--raio); margin-bottom: 14px; max-width: 820px; }
.conta-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
              padding: 14px 20px 0; }
.conta-topo h3 { margin: 0; font-size: 1.05rem; color: var(--azul); }
.conta-desc { font-weight: 400; color: var(--cinza); font-size: .9rem; }
/* Conta desligada continua legivel: so o titulo perde a cor. Apagar o
   cartao inteiro (o `opacity: .55` da versao em tabela) tornava ilegivel
   justamente a mensagem de erro que explica por que ela foi desligada. */
.conta-inativa .conta-topo h3 { color: var(--cinza); }

.conta-dados { display: grid; grid-template-columns: 200px 1fr; gap: 2px 16px;
               margin: 12px 0 0; padding: 0 20px; }
.conta-dados dt { color: var(--cinza); font-size: .85rem; padding: 5px 0; }
.conta-dados dd { margin: 0; padding: 5px 0; overflow-wrap: anywhere; }
.conta-dados .dica { font-size: .85rem; }

/* Selo do resultado da ultima TENTATIVA. Nao usa classe de botao: e estado,
   nao acao — a mesma regra dos filtros do Financeiro. */
.selo { font-size: .72rem; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.selo-ok     { background: var(--verde-bg);    color: var(--verde); }
.selo-falhou { background: var(--vermelho-bg); color: var(--vermelho); }

/* A frase que o servidor devolveu. Quebra em qualquer ponto: vem com URL e
   identificador de sessao, sem espaco nenhum onde quebrar. */
.conta-resultado { margin: 12px 20px 0; padding: 10px 14px; border-radius: 6px;
                   font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.resultado-ok    { background: var(--verde-bg);    color: var(--verde);
                   border-left: 3px solid var(--verde); }
.resultado-erro  { background: var(--vermelho-bg); color: var(--vermelho);
                   border-left: 3px solid var(--vermelho); }
.resultado-erro a { color: var(--vermelho); text-decoration: underline; }

.conta-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                margin-top: 14px; padding: 12px 20px; background: #f8fafc;
                border-top: 1px solid var(--borda);
                border-radius: 0 0 var(--raio) var(--raio); }
.conta-rodape form { margin: 0; }
/* Excluir vai para a ponta, longe dos outros: e o unico que nao tem volta. */
.conta-rodape .conta-excluir { margin-left: auto; }

@media (max-width: 640px) {
    .conta-dados { grid-template-columns: 1fr; gap: 0; }
    .conta-dados dt { padding-bottom: 0; }
    .conta-rodape .conta-excluir { margin-left: 0; }
}

/* Fontes de PUSH dentro do cartao da caixa.
   Aqui a tabela cabe — as colunas sao curtas e previsiveis, ao contrario da
   mensagem do servidor, que e uma frase inteira e foi o que quebrou a tabela
   de contas em 11/09/2026. */
.fontes-bloco { margin: 16px 20px 0; padding-top: 14px; border-top: 1px dashed var(--borda); }
.fontes-titulo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.fontes-titulo .btn-link { margin-left: auto; }
.tabela-fontes { font-size: .9rem; }
.tabela-fontes th, .tabela-fontes td { padding: 7px 10px; }
.tabela-fontes .btn { padding: 3px 8px; font-size: .82rem; }
/* Fonte desligada continua legivel: so o texto perde a cor. */
.tabela-fontes tr.inativa td { color: var(--cinza); }
@media (max-width: 640px) {
    .fontes-bloco { margin-left: 12px; margin-right: 12px; }
    .tabela-fontes { display: block; overflow-x: auto; }
}

/* =====================================================================
   Tarefas (planilha de atividades)
   ===================================================================== */

/* Barra de filtros da lista (reusa .filtro-botao, que ja e indicador de estado). */
.filtros-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.filtros-separador { flex: 0 0 1px; align-self: stretch; background: var(--borda); margin: 2px 4px; }

/* Fases (texto livre; a cor sai de classe_fase()). Situacao estruturada. */
.tag-fase-criada     { background: var(--cinza-claro); color: var(--cinza); }
.tag-fase-aguardando { background: #fdf1dc; color: #9a6a10; }
.tag-fase-elaborando { background: #e8eef7; color: var(--azul-claro); }
.tag-fase-revisando  { background: #efe6fb; color: #6d28d9; }
.tag-fase-pje        { background: #dbf1f4; color: #0e7490; }
.tag-fase-conc       { background: var(--verde-bg); color: var(--verde); }
.tag-fase-canc       { background: var(--vermelho-bg); color: var(--vermelho); }
.tag-fase-outra      { background: var(--cinza-claro); color: var(--cinza); }
.tag-situacao-aberta    { background: #e8eef7; color: var(--azul-claro); }
.tag-situacao-concluida { background: var(--verde-bg); color: var(--verde); }
.tag-situacao-cancelada { background: var(--vermelho-bg); color: var(--vermelho); }

/* Coluna Fase da lista de tarefas: so cabe a tag, entao encolhe ate o conteudo
   (mesmo truque da coluna "#") para nao roubar largura de Atividade/Partes. */
.tabela th.col-fase, .tabela td.col-fase { width: 1%; white-space: nowrap; }

/* Prioritaria: destaque discreto na lista + estrela. */
.tabela tr.prioritaria td { background: #fff8e6; }
.tabela tr.prioritaria td:first-child { box-shadow: inset 3px 0 0 #d99a00; }
.estrela-prio { color: #d99a00; }
.prazo-vencido { color: var(--vermelho); font-weight: 700; }
.card-prio { color: #d99a00; font-size: .8rem; font-weight: 600; }

/* Ficha da tarefa. */
.tarefa-topo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tarefa-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 22px; background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 16px 18px; margin-bottom: 14px;
}
.tarefa-meta .kv b {
    display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cinza); font-weight: 600; margin-bottom: 2px;
}
.tarefa-meta .kv span, .tarefa-meta .kv a { font-size: .95rem; }
.tarefa-acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
form.inline { display: inline; margin: 0; }

.registrar-andamento {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 18px 20px; margin-bottom: 24px;
}
.registrar-andamento h2 { margin: 0 0 4px; font-size: 1.1rem; }
.registrar-andamento .form { background: none; border: none; border-radius: 0; padding: 0; margin: 0; }
.checkbox-linha { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.checkbox-linha input { width: auto; }
.titulo-secao { font-size: 1.1rem; margin: 6px 0 12px; }

/* Linha do tempo dos andamentos (mais recente no topo). */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--borda); }
.linha-tempo li { position: relative; padding: 0 0 18px 18px; }
.linha-tempo li::before {
    content: ""; position: absolute; left: -29px; top: 3px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--branco); border: 2px solid var(--azul-claro);
}
.linha-tempo li.atual::before { background: var(--azul-claro); }
.lt-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lt-quando { margin-left: auto; font-size: .8rem; color: var(--cinza); }
.lt-detalhe { margin: 6px 0 0; }
.lt-autor { font-size: .82rem; color: var(--cinza); margin-top: 4px; }
.btn-link-mini { background: none; border: none; color: var(--azul-claro); cursor: pointer;
    font-size: .8rem; padding: 0 0 0 8px; }
.btn-link-mini:hover { text-decoration: underline; }

/* ---- Largura fluida: no celular a margem configurada nao vale ----
   20 mm sao ~76 px; numa tela de 375 px isso comeria 40% da largura. Abaixo
   de 640 px a margem cai para 16 px, seja qual for a configuracao. */
@media (max-width: 640px) {
    :root { --margem-lateral: 16px !important; }
}

/* ---- Topo da lista de processos, compacto (16/09/2026) ----
   Os dois cartoes de acao (DJEN e DataJud) viraram botoes na linha do
   titulo, cada um com o seu "?". A ancora do balao passa a ser o grupo de
   botoes inteiro (position:relative), para o texto ter largura de leitura. */
.cabecalho-lista { flex-wrap: wrap; }
.acoes-compactas { position: relative; display: flex; flex-wrap: wrap;
                   align-items: center; gap: 8px; }
.acao-compacta { display: inline-flex; align-items: center; gap: 4px; }
.acao-compacta form { margin: 0; }
.acoes-compactas .ajuda-texto { left: auto; right: 0; width: min(520px, 90vw); }
/* O painel de progresso da varredura ocupa a linha de baixo, na largura toda. */
.varredura-topo > .varredura-painel { margin: -4px 0 14px; }
.alerta-fino { padding: 7px 14px; }

/* ---- Coluna "Partes" da lista (16/09/2026) ----
   Linha 1: polo ativo X polo passivo (so o X em negrito). Linha 2: terceiros.
   Linha 3: a descricao do processo, numa etiqueta. O "X" e o que separa os
   lados — antes era um ";" igual ao que separa nomes do MESMO polo. */
.tabela td.col-partes { line-height: 1.4; }
.partes-linha { display: block; }

.partes-x { font-weight: 800; color: var(--azul); padding: 0 .35em; }
.partes-mais { color: var(--cinza); font-size: .85em; white-space: nowrap; }
.partes-terceiros { color: var(--cinza); font-size: .85rem; }
.partes-terceiros .terceiro { margin-right: .4em; }
.desc-processo { display: inline-block; margin-top: 3px; padding: 0 7px;
                 border-radius: 4px; background: #fff4d6; color: #7a5a00;
                 font-size: .8rem; font-weight: 600; }
/* Vara abaixo do numero do processo: sai da coluna de movimentacao, que
   ficava com quatro informacoes emendadas por ";". */
.vara-lista { display: block; color: var(--cinza); font-size: .8rem; }
.tabela td.col-numero { width: 16%; }
.tabela td.col-numero > a { white-space: nowrap; }
.tabela td.col-partes { width: 40%; }
.tabela td.ultima-mov .mov-data { font-weight: 600; white-space: nowrap; }
.tabela td.ultima-mov .mov-orgao { display: block; color: var(--cinza); font-size: .82rem; }
/* Origem do andamento, na frente da data: "[TJDFT 1ª]" (migracao 28). */
.mov-origem { color: var(--azul); font-weight: 600; white-space: nowrap; }

/* ---- Telas de formulario (16/09/2026) ----
   A largura toda da janela vale para as LISTAS. Num formulario ela afastava
   os botoes do cabecalho ("Fixar no topo", "Voltar") e o "+ Acrescentar
   parte" para a borda direita, longe do formulario de 720 px. O layout
   marca essas telas com .conteudo-form: a pagina vira uma coluna centrada, e
   o formulario ocupa a coluna inteira. */
.conteudo.conteudo-form { max-width: calc(920px + 2 * var(--margem-lateral)); }
.conteudo-form .form { max-width: none; }

/* ---- Tabelas no celular (18/09/2026) ----
   Auditoria com o print do iPhone: 12 telas tinham tabela de 600 a 960 px
   numa tela de 360, e era preciso arrastar para o lado. Abaixo de 700 px cada
   LINHA vira um cartao e cada celula uma linha do cartao, com o titulo da
   coluna em cima (data-rotulo, posto pelo tabelas.js a partir do <thead> —
   nenhuma view precisou mudar). A primeira coluna de dados e o titulo do
   cartao; o "#" da lista de processos vai para o canto.
   Tabela de pares "rotulo | valor" (sem thead) so empilha.
   Quem precisar continuar tabela: class="tabela-fixa" (e o JS nao mexe). */
@media (max-width: 700px) {
    .tabela-cartoes, .tabela-cartoes tbody { display: block; width: 100%; }
    .tabela-cartoes { background: transparent; border: 0; border-radius: 0;
                      overflow: visible; max-width: none !important; }
    .tabela-cartoes thead { display: none; }
    .tabela-cartoes tr {
        display: block; position: relative;
        background: var(--branco); border: 1px solid var(--borda);
        border-radius: var(--raio); margin-bottom: 10px; padding: 6px 0;
    }
    .tabela-cartoes tr.fixada { background: #eef3fb; }
    .tabela-cartoes td, .tabela.tabela-cartoes td.ultima-mov,
    .tabela.tabela-cartoes td.col-numero, .tabela.tabela-cartoes td.col-partes {
        display: block; width: auto; border: 0; padding: 5px 14px;
        background: transparent; overflow-wrap: anywhere;
    }
    .tabela-cartoes td:empty { display: none; }
    /* Destaques de linha (fixada, prioritaria, retomada) sao pintados nas
       CELULAS na tabela do computador; no cartao, celula com largura propria
       (ex.: Fase das tarefas) deixava uma faixa branca. Aqui a cor passa
       para o cartao inteiro e toda celula ocupa a largura toda. */
    .tabela.tabela-cartoes td { width: auto !important; background: transparent !important;
                                box-shadow: none !important; }
    .tabela.tabela-cartoes tr.prioritaria { background: #fff8e6; box-shadow: inset 4px 0 0 #d99a00; }
    .tabela.tabela-cartoes tr.linha-retomada { background: #fdf6dd; }
    .tabela-cartoes td[data-rotulo]::before {
        content: attr(data-rotulo); display: block;
        font-size: .72rem; font-weight: 600; letter-spacing: .02em;
        text-transform: uppercase; color: var(--cinza); margin-bottom: 1px;
    }
    .tabela-cartoes td.celula-titulo { font-weight: 600; font-size: 1rem; padding-right: 48px; }
    .tabela-cartoes td.celula-titulo .vara-lista { font-weight: 400; }
    .tabela-cartoes td.celula-num {
        position: absolute; top: 8px; right: 12px; padding: 0;
        color: var(--cinza); font-size: .8rem;
    }
    .tabela-cartoes td.celula-num::before { content: "#"; }
    .tabela-cartoes .acoes { text-align: left; white-space: normal; }
    .tabela-cartoes tr.linha-inteira {
        background: transparent; border: 0; padding: 0; margin: 14px 0 6px;
    }
    .tabela-cartoes tr.linha-inteira td { padding: 0 2px; }

    .tabela-pares, .tabela-pares tbody, .tabela-pares tr { display: block; width: 100%; }
    .tabela-pares { max-width: none !important; }
    .tabela-pares th, .tabela-pares td { display: block; border: 0; }
    .tabela-pares th { padding: 10px 14px 0; background: transparent; font-size: .8rem; }
    .tabela-pares td { padding: 2px 14px 10px; border-bottom: 1px solid var(--cinza-claro);
                       overflow-wrap: anywhere; }
    .tabela-pares tr:last-child td { border-bottom: 0; }

    /* Barras de busca/filtro: quebram em linhas em vez de vazar para a
       direita (Clientes, Processos, Tarefas). O campo de busca fica sozinho
       na primeira linha, largura toda. */
    .busca { flex-wrap: wrap; }
    .busca input[type="search"] { flex: 1 1 100%; min-width: 0; }
    .busca select { max-width: 100%; }
    .filtro-situacao { white-space: normal; flex-wrap: wrap; }

    /* Balao do "?" dos botoes compactos (Processos, Publicacoes): ancorado
       no "?", com 90vw de largura, saia pela direita da tela. No celular ele
       ocupa a largura da tela menos as margens, na altura em que abriria. */
    .acoes-compactas .ajuda-texto { position: fixed; top: auto; left: 16px; right: 16px; width: auto; }

    /* Letra de 16 px nos campos: abaixo disso o iPhone da ZOOM na pagina
       inteira ao tocar no campo, e ela fica ampliada depois de sair dele. */
    input[type="search"], input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="date"],
    select, textarea { font-size: 16px !important; }
}

/* ---- Voltar / Avancar / Recarregar (18/09/2026) ----
   Instalado na tela inicial, o app abre sem a barra do navegador — e com ela
   vao embora os botoes de voltar, avancar e recarregar (no iPhone nao ha nem
   o "puxar para recarregar"). Estes tres aparecem SO no app instalado
   (display-mode standalone, ou navigator.standalone do iPhone, que o pwa.js
   traduz em .app-instalado no <html>); no navegador comum, que ja tem os
   seus, ficam escondidos. */
.nav-app { display: none; align-items: center; gap: 2px; margin-left: -6px; }
@media (display-mode: standalone) { .nav-app { display: inline-flex; } }
.app-instalado .nav-app { display: inline-flex; }
.nav-app button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #fff; cursor: pointer;
}
.nav-app button:hover, .nav-app button:focus-visible { background: rgba(255,255,255,.14); }
.nav-app button:active { background: rgba(255,255,255,.24); }
/* Sem para onde ir (inicio ou fim do caminho, ver pwa.js): apagado e inerte. */
.nav-app button:disabled { opacity: .3; cursor: default; background: transparent; }
.nav-app svg { width: 20px; height: 20px; }
@media (max-width: 1040px) {
    .nav-app { gap: 0; margin-left: -10px; }
    .nav-app button { width: 34px; height: 34px; }
}