, sem margin próprio — quem afasta é o margin-top:8px de .clientes-cards-wrap nos cards abaixo; aqui o botão vazio ficava colado direto no label, sem equivalente). Carlos, 31/08/2026: "a box de adicionar parte contraria está muito colada no titulo, deixe com o mesmo afastamento de clientes do caso". */ margin-top: 8px; } .parte-contraria-add-btn:hover { border-color: var(--azul-claro); color: var(--azul-claro); background: var(--teal-bg); } /* Bloco "Modelo de petição sugerido" (casos/form.php, abaixo do checklist de documentos) — melhor palpite (área/subárea do caso) com prévia já preenchida, mais um dropdown "Outros modelos". Carlos, 28/07/2026: "quero que apareça o editor de texto, com um modelo sugerido autopreenchido com as informações já preenchidas no cadastro do caso". */ .modelo-sugerido-cabe { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .modelo-sugerido-preview { margin-top: 4px; padding: 18px 22px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--borda); border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--texto); position: relative; } .modelo-sugerido-preview::after { content: ''; position: sticky; display: block; bottom: -18px; left: 0; right: 0; height: 28px; margin-top: -28px; background: linear-gradient(transparent, #fff); pointer-events: none; } .modelo-sugerido-preview p { margin: 0 0 10px; } .modelo-sugerido-preview p:last-child { margin-bottom: 0; } /* Tela do Laurel embutida (não mais só uma prévia estática) — Carlos, 29/07/2026: "preciso que apareça uma tela do laurel dentro do cadastro do caso e também no caso já cadastrado". SEMPRE em modo COMPACTO agora (tanto no cadastro quanto no caso já cadastrado — Carlos, 31/07/2026: "leve a visualização compacta do laurel... para o caso já cadastrado, substitua pela laurel que está no caso cadastrado"; "Abrir no editor" continua indo pra tela cheia de verdade, fora do iframe). Alto o bastante pra mostrar a 1ª folha A4 inteira, sem cortar — a rolagem interna do iframe só entra em ação a partir da 2ª folha (Carlos, 30/07/2026 e 31/07/2026: "quero que apareça apenas 1 página, antes de ativar a rolagem"). 297mm (altura A4) + folga pra toolbar fixa e espaçador. */ .modelo-sugerido-iframe { /* Borda nos 4 lados de novo — só topo/base (Carlos, 06/08/2026: "borda dos 2 lados... quase zero") deixava o border-radius com um efeito estranho nos cantos e passava a impressão de "sem borda nenhuma" (Carlos, 08/08/2026: "o editor de texto nao possui borda"). Altura reduzida em 28px — o mesmo tanto que o padding-inferior do .ed-layout compacto encolheu logo abaixo, senão sobrava um vão vazio entre o fim da folha A4 e essa borda (Carlos, 08/08/2026: "entre a folha a4 e a borda, existe um espaço desnecessário"). */ width: 100%; height: calc(297mm + 122px); border: 1px solid var(--borda); border-radius: 10px; background: #fff; display: block; } /* Placeholder "sem página" do Laurel — só uma barra no lugar da toolbar, sem folha A4 nem texto de cabeçalho nenhum (Carlos, 24/08/2026: "não precisa adicionar a folha a4 muito menos exibir um texto novo no cabeçalho" — correção de uma tentativa anterior que carregava o modelo em branco de verdade pra "mostrar a toolbar"). Altura só o suficiente pra barra + uma linha de instrução, não a altura de uma folha inteira. */ .modelo-sugerido-vazio { width: 100%; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); overflow: hidden; display: flex; flex-direction: column; } .modelo-sugerido-vazio-toolbar { height: 44px; flex: none; background: var(--cinza-bg); border-bottom: 1px solid var(--borda); } .modelo-sugerido-vazio-corpo { padding: 16px 20px; text-align: center; } .modelo-sugerido-vazio-corpo .subtitulo { margin: 0; color: var(--suave); font-size: 12.5px; } /* Editor Laurel + navegador de arquivos lado a lado (detalhe do caso) — o editor tem prioridade fixa (mostra a folha A4 real, nunca encolhe); o navegador é quem cede espaço, com largura ajustável arrastando o divisor entre os dois (Carlos, 06/08/2026: "a prioridade sempre será o editor de texto... quem deve ir diminuindo é o navegador de arquivos... permita que o usuário redimencione as telas, arrastando o divisor"). flex-wrap: sem espaço nem no mínimo do navegador (220px), o Laurel desce pra própria linha em vez de estourar a largura da tela (Carlos, 10/08/2026). */ .detalhe-editor-drive-split { display: flex; flex-wrap: wrap; align-items: flex-start; } /* Trava dura contra barra de rolagem horizontal (Carlos, 22/08/2026: "isso nao deve acontecer jamais, o laurel deve ter 100% do espaço disponivel para a folha a4") — o navegador de arquivos NUNCA deve conseguir esticar a linha inteira além da largura do bloco; overflow-x:hidden aqui garante isso mesmo se algo dentro do navegador (nome de arquivo comprido etc.) tentar forçar mais largura do que o previsto. */ .bloco-modelo-sugerido { overflow-x: hidden; } /* flex-grow:1 + flex-basis:auto (via width, não um valor fixo no `flex` shorthand) — cresce pra absorver a largura que o editor deixou de vir a assumir a mais (ver .detalhe-editor-col abaixo) e encolhe até min-width antes de o Laurel ter que descer de linha; width continua sendo o alvo ajustável arrastando o divisor (Carlos, 08/08/2026: "o navegador de arquivos e o editor de texto devem ocupar sempre 100% do width"). SEM max-width — enquanto o usuário não arrasta o divisor (sem a classe .largura-manual abaixo), o flex-grow:1 sozinho já ocupa TODO o espaço que sobrar, sem teto artificial (Carlos, 10/08/2026: "o navegador de arquivos, deve sempre ocupar o maximo de espaço horizontal que conseguir" — um max-width:600px antigo aqui deixava espaço vazio sobrando em telas largas). */ .detalhe-drive-col { flex: 1 1 auto; width: 220px; min-width: 220px; overflow-x: hidden; } /* Depois que o usuário arrasta o divisor uma vez (JS liga esta classe), vira largura FIXA (flex:none) — sem isso o flex-grow:1 acima ignoraria qualquer largura arrastada e voltaria a preencher 100% sozinho. */ .detalhe-drive-col.largura-manual { flex: none; } /* Largura fixa = exatamente a folha A4 (+ a borda de 1px do iframe de cada lado) — nunca mais nem menos, sem sobrar "gordura" cinza nas laterais dentro do iframe (Carlos, 10/08/2026: "existe um espaçamento entre a folha a4 e a borda do laurel... economizar o width dessa pagina" — opção escolhida: encolher o editor até a folha e devolver a largura sobrando pro navegador, ver .detalhe-drive-col acima). */ .detalhe-editor-col { flex: none; width: calc(210mm + 2px); max-width: 100%; } /* Empilha sozinho (JS mede a largura disponível — ver script abaixo) quando o navegador de arquivos ficaria ILEGÍVEL espremido ao lado do editor (Carlos, 22/08/2026: "os 2 devem ocupar 100% do width, todavia o tamanho do navegador sempre terá que ser 100% da pagina a4 [entenda-se: o EDITOR], o navegador de arquivos pode recolher tranquilamente, quando começar a ficar ilegivel, pode deixar o navegador de arquivos no topo e descer o laurel pra baixo"). Diferente de .split-maximizado (esse aqui é automático por espaço, não uma escolha manual do usuário) — sem altura forçada de 70vh, cada um fica com a altura natural do conteúdo. flex-wrap:wrap sozinho (a regra de cima) já resolveria matematicamente, mas só troca de linha quando ESTOURA — sem essa classe o navegador ainda passava um bom tempo espremido e ilegível ANTES de estourar de vez. */ .detalhe-editor-drive-split.split-auto-empilhado { flex-direction: column; flex-wrap: nowrap; } .detalhe-editor-drive-split.split-auto-empilhado .detalhe-drive-col { width: 100% !important; max-width: 100%; flex: none; } .detalhe-editor-drive-split.split-auto-empilhado .detalhe-editor-col { width: 100%; } .detalhe-editor-drive-split.split-auto-empilhado .detalhe-split-divisor { display: none; } .detalhe-split-divisor { flex: none; width: 14px; align-self: stretch; cursor: col-resize; position: relative; border-radius: 4px; transition: background .15s; } .detalhe-split-divisor.arrastando { background: rgba(30, 64, 121, .08); } /* Botão "Maximizar navegador" (Carlos, 10/08/2026: "crie o botão de maximizar, assim o navegador de arquivos irá ocupar todo o espaço vertical daquele bloco, empurrando o editor de textos para baixo") — empilha as duas colunas, dá altura generosa e rolagem própria pro navegador, e o editor desce pra abaixo dele. */ /* Botão de maximizar mudou pra dentro da própria toolbar do navegador (ao lado da engrenagem do scanner — ver opt.mostrarMaximizar em drive-explorer.js), não precisa mais de uma barra à parte aqui em cima (Carlos, 10/08/2026). */ .detalhe-editor-drive-split.split-maximizado { flex-wrap: nowrap; flex-direction: column; } /* O .fm (caixa com borda do navegador, injetada pelo partial) não herdava a altura do pai — sobrava um vão vazio e SEM borda entre o fim da caixa visível e o início do Laurel, lá embaixo do bloco de 70vh (Carlos, 11/08/2026: "quando maximizo... aparece um espaço exagerado entre o navegador de arquivos e o laurel"). flex column aqui só pro título (h4) ficar com altura própria em cima e o .fm ocupar exatamente o resto — a rolagem agora é do .fm mesmo (não mais do wrapper), senão o próprio overflow:hidden do .fm cortava o conteúdo antes da barra de rolagem do wrapper ter chance de aparecer. */ .detalhe-editor-drive-split.split-maximizado .detalhe-drive-col { width: 100% !important; max-width: 100%; flex: none; height: 70vh; display: flex; flex-direction: column; } /* .fm não é filho DIRETO de .detalhe-drive-col — o partial injeta um wrapper (.drive-pasta-caso) no meio; flex:1 só funciona no filho direto do flex container, por isso precisa dos dois passos aqui (esticar o wrapper primeiro, depois o .fm dentro dele em 100% do wrapper). */ .detalhe-editor-drive-split.split-maximizado .detalhe-drive-col > .drive-pasta-caso { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .detalhe-editor-drive-split.split-maximizado .detalhe-drive-col .fm { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .detalhe-editor-drive-split.split-maximizado .detalhe-split-divisor { display: none; } .detalhe-editor-drive-split.split-maximizado .detalhe-editor-col { width: 100%; } /* Títulos e botões (Abrir no editor / Escolher outro modelo) das duas colunas foram removidos (Carlos, 17/08/2026: "remova os titulos do navegador de arquivos e do laurel, inclusive remova os botões") — CSS correspondente removido junto (era só pra esses elementos).*/ .modelo-peticao-item svg { flex: none; color: #97a3b5; } .modelo-peticao-item:hover svg { color: var(--azul-claro); } /* Modal da parte contrária — mesmo padrão visual da modal de agenda (.ag-modal-*), classes próprias (pc-*) pra não depender do CSS local do editor.php. */ .pc-modal-overlay { display:none; position:fixed; inset:0; background:rgba(20,40,80,.4); z-index:400; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; } .pc-modal-overlay.aberto { display:flex; } .pc-modal { background:var(--superficie); border-radius:12px; box-shadow:0 20px 60px rgba(20,40,80,.25); width:100%; max-width:560px; } .pc-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--borda); font-size:15px; font-weight:700; } .pc-modal-header button { background:none; border:none; cursor:pointer; color:var(--suave); padding:4px; border-radius:6px; } .pc-modal-header button:hover { background:#eef2fa; color:var(--texto); } [data-tema="escuro"] .pc-modal-header button:hover { background:var(--menu-hover); } .pc-modal-body { padding:18px 20px; } .pc-grupo { position:relative; } .pc-label { font-size:12px; font-weight:600; color:var(--suave); margin-bottom:4px; } .pc-modal-body input, .pc-modal-body select { width:100%; padding:8px 10px; border:1px solid var(--borda); border-radius:6px; font-family:inherit; font-size:13px; box-sizing:border-box; } .pc-btn { padding:9px 16px; border-radius:6px; border:none; background:var(--azul-claro); color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; } .pc-btn:hover { background:var(--azul); } /* ---- Responsivo (mantém logo · menu · usuário em uma linha, nunca sobrepõe) ---- Medido em JS (ver "Responsividade do header" no fim do layout.php), não por largura fixa de tela — cada estágio só liga quando o conteúdo de verdade deixa de caber, nem um pixel antes. Ordem de degradação conforme o espaço aperta (Carlos, 16/08/2026 — "impeça que os ícones do laurel encavalem com o menu"): 1) esconde o sobrenome do advogado (só o primeiro nome) 2) esconde o nome inteiro, só o ícone/foto aparece 3) remove a logo inteira (não só a escrita) — o menu ocupa o lugar dela (Carlos, 17/08/2026: "quando não houver espaço para a logo completa, já pode remover a logo, deixe o menu ocupar o lugar da logo") 4) menu principal vira ícone de três risquinhos (clique abre as opções) */ .topo-menu a { white-space: nowrap; } .topo.topo-oculta-sobrenome .mu-sobrenome { display: none; } .topo.topo-oculta-nome .mu-nome { display: none; } .topo.topo-oculta-logo .topo-marca { display: none; } /* Sem a logo, o lado esquerdo não tem mais conteúdo pra "empatar" com o lado direito (ver flex-grow em .topo-lado) — deixa de crescer e o menu passa a crescer no lugar dela, herdando o espaço que sobrou. */ .topo.topo-oculta-logo .topo-lado:not(.topo-lado-dir) { flex: 0 0 0; } .topo.topo-oculta-logo .topo-menu { flex: 1 1 auto; } .topo.topo-compacta .topo-lado:not(.topo-lado-dir) { display: none; } .topo.topo-compacta .menu-hamburguer { display: inline-flex; } .topo.topo-compacta .topo-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); box-shadow: 0 10px 24px rgba(20,40,80,.12); padding: 8px; display: none; z-index: 49; } .topo.topo-compacta.menu-aberto .topo-menu { display: flex; } .topo.topo-compacta .topo-menu a { border-bottom: none; border-radius: 8px; padding: 12px 14px; font-size: 15px; } .topo.topo-compacta .topo-menu a:hover { border-bottom-color: transparent; background: var(--menu-hover); } .topo.topo-compacta .topo-menu a.ativo { border-bottom-color: transparent; background: var(--teal-bg); } /* ---- Cabeçalho de página ---- */ .pagina-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } /* Título do caso encolheu (Carlos, 27/08/2026), sobrou espaço demais até o bloco "Identificação do caso" — reduzido só nesta tela pra não afetar o .pagina-topo das outras (lista de casos, financeiro, clientes...). */ .caso-pagina-topo { margin-bottom: 10px; } /* Quando o título da página foi substituído pela timeline de cadastro (ver .timeline-cadastro acima), esta barra sobra só com os botões de ação — sem o bloco da esquerda, joga tudo pra direita. */ .pagina-topo-so-acoes { justify-content: flex-end; } .pagina-topo h1 { font-size: 26px; margin: 0; font-weight: 600; color: var(--titulo); letter-spacing: -.01em; } .pagina-topo .subtitulo { color: var(--suave); font-size: 13px; margin-top: 4px; } /* Título à esquerda, stepper à direita, na mesma linha — os botões de ação saíram daqui e foram pro rodapé do formulário (.rodape-form abaixo); Carlos, 21/07/2026. .timeline-cadastro normalmente é width:100% (quando é a única coisa na linha), aqui ganha uma largura própria pra sobrar espaço pro título. */ .pagina-topo-stepper { align-items: center; } /* Ocupa até 90% do espaço disponível na linha do cabeçalho (ao lado do título) e encolhe conforme esse espaço diminui — antes era uma largura fixa de 320px, sem se adaptar (Carlos, 26/07/2026: "quero que vc faça ele ocupar 90% do width disponivel e vá diminuindo conforme o espaço diminui"). min-width:0 é necessário pra um item flex conseguir encolher abaixo do tamanho natural do conteúdo. */ .pagina-topo-stepper .timeline-cadastro { flex: 0 1 90%; min-width: 0; margin-bottom: 0; } .pagina-topo-stepper .tlc-trilha { margin-bottom: 0; } /* Rodapé fixo do formulário de cadastro — Cancelar/Salvar, alinhados à direita, com uma linha separando do conteúdo acima. */ .rodape-form { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--borda); } /* ---- Botões ---- */ /* Hover aprovado: Flash Interno Radial — o botão NÃO se move. Ver docs/INTERFACE.md */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; background: var(--azul-claro); color: #fff; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit; line-height: 1; transition: background .2s ease; white-space: nowrap; flex-shrink: 0; } .btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%); opacity: 0; transition: opacity .2s ease; } .btn:hover { background: var(--azul); } .btn:hover::after { opacity: 1; } .btn svg { width: 16px; height: 16px; position: relative; z-index: 1; } .btn.secundario { background: var(--superficie); color: var(--azul-claro); border: 1.5px solid #c8d6ec; } .btn.secundario:hover { background: var(--teal-bg); border-color: var(--azul-claro); } .btn.secundario:hover::after { background: radial-gradient(circle at 50% 50%, rgba(30,64,121,.1) 0%, rgba(30,64,121,0) 70%); } .btn.perigo { background: #fde8e8; color: #d6453f; border: 1.5px solid #f5c6c6; } .btn.perigo:hover { background: #fbd5d5; border-color: #e9a2a2; } .btn.perigo:hover::after { background: radial-gradient(circle at 50% 50%, rgba(192,57,43,.12) 0%, rgba(192,57,43,0) 70%); } .btn-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--azul-claro); text-decoration: none; } .btn-link:hover { text-decoration: underline; } .btn.verde { background: #1a9850; color: #fff; border: none; } .btn.verde:hover { background: #158040; } .btn.verde svg { color: #fff; } /* ---- Botões de ação em ícone ---- */ .btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--borda); border-radius: 5px; color: var(--suave); background: var(--superficie); } .btn-icone:hover { border-color: var(--azul-claro); color: var(--azul-claro); background: var(--teal-bg); } /* flex-shrink:0 — sem isso o Chrome encolhe o SVG abaixo do width/height definidos (ex.: 12px vira 8px) dentro do container inline-flex, mesmo sobrando espaço de sobra; é um comportamento real do navegador com SVG como flex item, não um erro de seletor CSS (achado investigando "o icone de disquete ainda nao está aparecendo", Carlos, 10/08/2026 — o disquete não estava ausente, estava desenhado ilegível/espremido). */ .btn-icone svg { width: 16px; height: 16px; flex-shrink: 0; } /* ---- Senha do gov.br (Cliente) — oculta por padrão, só revela sob clique (Carlos, 03/08/2026: "a senha aparecerá, más oculta, será necessário clicar em um icone de olho para exibi-la"). ---- */ .senha-gov-atual { display: flex; align-items: center; gap: 8px; border: 1.5px solid #0c7a52; background: #f2faf6; border-radius: 8px; padding: 9px 12px; } .senha-gov-valor { font-family: monospace; font-size: 14px; letter-spacing: 1px; color: var(--texto); min-width: 90px; } /* Documento pessoal + CPF/senha lado a lado — CPF/senha à direita da caixa de documento, quebrando pra linha de baixo se não couber (Carlos, 24/08/2026: "podem aparecer a direita da imputbox de documento pessoal... se faltar espaço no layout, jogue o CPF e senha pra linha de baixo"). */ /* CPF/senha sempre embaixo do documento pessoal, não mais do lado (Carlos, 27/08/2026: "o cpf e senha, pode levar pra baixo do documento pessoal") — a coluna da esquerda ficou mais estreita (2/5 do bloco, ver .checklist-caso-grid), não sobrava espaço pra ficar lado a lado mesmo. */ .doc-cpf-senha-linha { display: flex; flex-direction: column; gap: 4px; } .doc-cpf-senha-doc { width: 100%; } /* CPF/senha no quadro Dados do caso — uma linha só, sem caixa/borda (Carlos, 24/08/2026: "ocupam muito espaço, diminua o destaque, algo minimalista"). */ .cpf-senha-mini-linha { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 12.5px; flex: 0 0 auto; } .cpf-senha-mini-item { display: inline-flex; align-items: center; gap: 6px; font-family: monospace; color: var(--texto); } /* Mesmo bug do display sobrepondo [hidden] (ver .campo-senha-gov-inline logo abaixo) — precisa dessa regra pra linha.hidden=true (JS do duplo clique) esconder de verdade. */ .cpf-senha-mini-item[hidden] { display: none; } .cpf-senha-mini-rot { font-family: Cambria, Georgia, serif; color: var(--suave); } .cpf-senha-mini-vazio { font-family: Cambria, Georgia, serif; color: var(--suave); } .cpf-senha-mini-vazio a { color: var(--azul-claro); } /* Campo inline pra definir/alterar a senha do gov.br sem sair da tela do caso (Carlos, 28/08/2026: "quero poder atualizar a senha do meu inss ali mesmo no campo de senha em casos"). */ /* Do mesmo tamanho dos "••••••••••" que ela substitui, não uma caixa grande numa linha própria (Carlos, 28/08/2026: "amenize isso, faça uma imputbox pequena, do mesmo tamanho dos asteriscos"). */ .campo-senha-gov-inline { display: inline-block; width: 92px; font-size: 12.5px; font-family: monospace; padding: 1px 4px; border: 1px solid var(--borda); border-radius: 4px; vertical-align: baseline; } /* .campo-senha-gov-inline força um `display` próprio, o que por si só já sobrepõe o display:none do atributo `hidden` nativo (CSS de autor sempre vence a regra do agente de usuário) — o campo nunca escondia de verdade, e o duplo clique parecia não funcionar (Carlos, 28/08/2026: "ainda continua aparecendo... ainda nao estou conseguindo editar a senha clicando duas vezes"). Mesmo bug já visto e corrigido em .tl-tag-oculto[hidden]. */ .campo-senha-gov-inline[hidden] { display: none; } .cpf-senha-mini-copiar { background: none; border: none; padding: 2px; color: var(--suave); cursor: pointer; display: inline-flex; } .cpf-senha-mini-copiar:hover { color: var(--azul-claro); } .cpf-senha-mini-copiar svg { width: 13px; height: 13px; } /* Botão "Entrar no INSS" — igual espírito do copiar/olho ao lado (discreto, sem caixa pesada), só com texto porque é uma AÇÃO (abre aba nova), não só revelar/copiar (Carlos, 27/08/2026: "quero implementar login automatico no site do meu inss"). */ .cpf-senha-entrar-inss { background: none; border: 1px solid var(--borda); border-radius: 20px; padding: 2px 10px 2px 8px; color: var(--azul-claro); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-family: inherit; } .cpf-senha-entrar-inss:hover { background: var(--teal-bg); border-color: var(--azul-claro); } .cpf-senha-entrar-inss svg { flex: none; } .cpf-senha-entrar-inss[hidden] { display: none; } .campo-senha-wrap { display: flex; align-items: center; gap: 8px; } .campo-senha-wrap input { flex: 1; } /* Documento do cliente — mesmo bloco visual da checklist de documentos do caso (.checklist-doc-linha), na tela de cadastro/edição do cliente (Carlos, 10/08/2026: "quero poder subir na hora de cadastrar o cliente, ou na hora de editar o cadastro do cliente... deve aparecer como se fosse uma bloco do checklist de documentos" — não no cartão de cliente do formulário de caso, que é só pra identificação). */ .cliente-doc-linha { margin-top: 6px; padding: 8px 12px; } /* ---- Botão de documento com ícone PDF (Procuração / Hipossuficiência) ---- */ /* flex-shrink:0 de propósito — sem isso o botão ia encolhendo sozinho (texto vazando por cima do próprio botão) em vez de deixar a CÉLULA (.acoes-cel, que aí sim tem overflow:hidden) reportar o estouro de verdade pro JS medir. */ .btn-doc-pdf { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d3dbeb; border-radius: 7px; background: #fff; color: #33415a; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s; flex-shrink: 0; } .btn-doc-pdf:hover { border-color: var(--azul-claro); background: var(--teal-bg); } .btn-doc-pdf .ico-pdf { width: 16px; height: 16px; flex-shrink: 0; } /* Itens equivalentes dentro do menu "⋮" (só aparecem em telas estreitas — ver breakpoint logo abaixo, telefone/carlos, 20/07/2026). */ .menu-item-doc-estreito { display: none; } .menu-item-doc-estreito .ico-pdf { width: 16px; height: 16px; flex-shrink: 0; } .menu-dropdown-item:hover { background: var(--teal-bg); } /* ---- Lista de Clientes: responsiva ---- Tela estreita: Procuração/Hipossuficiência somem da linha e passam a aparecer dentro do menu "⋮"; abaixo disso, some também a coluna de e-mail e o avatar (bolinha com iniciais), pra sobrar espaço pro essencial. O 1º passo (botões → "⋮") é medido em JS, não por largura fixa de tela — ver "Responsividade da lista de Clientes" no fim de clientes/lista.php: um breakpoint fixo não sabia se a célula de Ações estava REALMENTE apertada (cabia numa tela, estourava alguns pixels antes em outra, dependendo do conteúdo real de cada linha) — Carlos, 17/08/2026: "antes de começar a encolher qualquer linha, quero que vc retire os botões e jogue para os 3 pontinhos". A classe .clientes-acoes-compacta é quem liga essas regras. table-layout:auto SÓ NESTA TABELA (o resto do sistema continua fixed+% — ver tabelas-layout-fluido) — Telefone/E-mail curtos não precisam ficar ocupando a mesma fatia sempre; cada coluna encolhe pro que o conteúdo real precisa (Carlos, 17/08/2026: "o certo é exibir o tamanho mínimo necessário para comportar o texto"). */ .tabela.tabela-auto { table-layout: auto; } /* Telefone/E-mail não quebram linha (são valores curtos por natureza) — sem isso, table-layout:auto preferia quebrar o TEXTO deles em vez de encolher a célula de Ações, e o JS nunca detectava aperto nenhum (Ações sempre "cabia" às custas de Telefone/E-mail virando 2 linhas silenciosamente). */ #conteudo-clientes .tabela-auto .cli-tel-cel, #conteudo-clientes .tabela-auto td:nth-child(3) .cli-campo-rapido { white-space: nowrap; } /* Cabeçalhos também não podem quebrar linha — "E-mail"/"Ações" quebrando ("E-MAI/L") era outra válvula de escape que deixava a coluna de Ações encolher além do mínimo sem o JS nunca detectar estouro de verdade (Carlos, 17/08/2026: "não permita que a coluna ações fique oculta"). E min-width incondicional no último th/td (Ações, sempre a última coluna aqui) garante um piso mesmo antes do JS ligar .clientes-acoes-compacta. */ #conteudo-clientes .tabela-auto th { white-space: nowrap; } #conteudo-clientes .tabela-auto th:last-child, #conteudo-clientes .tabela-auto td:last-child { min-width: 64px; } #conteudo-clientes.clientes-acoes-compacta .btn-doc-pdf { display: none; } #conteudo-clientes.clientes-acoes-compacta .menu-item-doc-estreito { display: flex; } /* Sem os botões de Procuração/Hipossuficiência, a célula de Ações vira só o "⋮" — a coluna pode encolher pro mínimo, sobrando espaço pra Nome (Carlos, 17/08/2026: "é necessário que a coluna ações redimensione para o mínimo possível"). */ #conteudo-clientes.clientes-acoes-compacta .tabela .col-cli-acoes { width: 64px !important; } @media (max-width: 640px) { /* E-mail é a 3ª coluna agora — CPF saiu da tabela (mora embaixo do nome, ver .cli-nome-cpf) e Ações é sempre a última, medida em JS. */ #conteudo-clientes .tabela th:nth-child(3), #conteudo-clientes .tabela td:nth-child(3) { display: none; } #conteudo-clientes .cli-nome .avatar { display: none; } } /* ── Grade financeira: botão de ações minimalista (sem borda em repouso) ── */ .grade-fin .acoes-fin .btn-icone, .grade-fin .btn-icone { border-color: transparent; background: transparent; color: #b8c4d4; width: 28px; height: 28px; } .grade-fin .acoes-fin .btn-icone:hover, .grade-fin .btn-icone:hover { border-color: var(--borda); background: var(--teal-bg); color: var(--azul-claro); } .grade-fin td:last-child { width: 36px; min-width: 36px; text-align: right; } .grade-fin .acoes-fin { flex-wrap: nowrap; min-width: 28px; } /* overflow:hidden é o que faz o JS conseguir medir estouro de verdade (ver "Responsividade da lista de Clientes" em clientes/lista.php) — sem isso, quando os botões não cabem eles vazam pra fora da célula (por causa do justify-content:flex-end) em vez de serem contados como overflow, e o scrollWidth mentia dizendo que cabia. */ .acoes-cel { display: flex; gap: 7px; justify-content: flex-end; overflow: hidden; } /* ---- Cartões / grid ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; box-shadow: var(--sombra); } .card .num { font-size: 28px; font-weight: 600; color: var(--azul); } .card .rotulo { color: var(--suave); font-size: 13px; } /* ---- Painel: board de casos por status ---- */ .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; } @media (max-width: 900px) { .board { grid-template-columns: 1fr; } } .coluna { background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--col-cor, #ccc); border-radius: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; } .coluna-cab .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--col-cor); flex: none; } .coluna-cab .contador { background: var(--col-bg); color: var(--col-forte); font-size: 12px; font-weight: 700; min-width: 24px; text-align: center; padding: 2px 9px; border-radius: 20px; } /* ---- Painel: cartões de indicador (KPIs) ---- */ @media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .kpis { grid-template-columns: 1fr; } } .kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); padding: 18px; display: flex; gap: 14px; align-items: flex-start; } .kpi-corpo .kpi-mes.zero { color: var(--suave); font-weight: 400; } /* ---- Painel: rodapé ---- */ /* ---- Tabelas ---- */ .tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; box-shadow: var(--sombra); table-layout: fixed; } /* Larguras proporcionais das colunas da grade financeira — definidas aqui (e não só no cabeçalho) para que a tabela de lançamento rápido, que não tem , fique com as colunas alinhadas às da tabela principal. */ .grade-fin .col-venc { width: 9%; } .grade-fin .col-cliente { width: 26%; } .grade-fin .col-par { width: 4%; } .grade-fin .col-previsto { width: 12%; } .grade-fin .col-conta { width: 12.5%; } .grade-fin .col-valor { width: 12%; } .grade-fin .col-anota { width: 8%; } .grade-fin .col-acoes { width: 4%; } /* Layout fluido: conteúdo longo quebra dentro da célula em vez de esticar a coluna */ .tabela td, .tabela th { word-break: break-word; overflow-wrap: anywhere; } .tabela th, .tabela td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--borda); } .tabela th { background: var(--th-bg); font-size: 11px; text-transform: uppercase; color: var(--suave); font-weight: 700; letter-spacing: .04em; } .tabela tr:last-child td { border-bottom: none; } /* Efeito zebra (exceto a grade financeira, que tem zebra própria). Com zebra, dispensa a linha separadora; usa o mesmo tom e hover da grade financeira. Linha não lida (.linha-nova) fica de fora da zebra E do hover: mantém o azul sólido, sem alternância e sem cinza no hover — igual ao Financeiro. */ .tabela:not(#grade-fin) tbody td { border-bottom: none; } .tabela:not(#grade-fin) tbody tr:nth-child(even):not(:hover):not(.linha-nova) td { background: #f7f9fc; } .tabela:not(#grade-fin) tbody tr:hover:not(.linha-nova) td { background: #e1e6ef; } .tabela#grade-fin tbody tr:hover td { background: #e1e6ef; } /* Linha de lançamento rápido: tabela separada, isolada da tabela principal (ordenação/filtros/recarregamentos dela não a afetam), mas visualmente emendada logo abaixo — sem borda dupla nem espaço entre as duas. */ .grade-fin-principal { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; margin-bottom: 0; } .grade-fin-add { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; margin-top: 0; } .grade-fin tbody tr.linha-pago:hover td { background: #d4f3e2 !important; } .grade-fin tbody tr.linha-parcial:hover td { background: #f5edc8 !important; } .grade-fin tbody tr.linha-vencido:hover td { background: #f5d0d0 !important; } .grade-fin tbody tr.linha-pendente:hover td { background: #e1e6ef !important; } .th-arrastavel { cursor: grab; user-select: none; } .th-arrastavel.arrastando { opacity: .45; } .th-arrastavel.col-alvo { box-shadow: inset 3px 0 0 var(--azul-claro); } .col-num { width: 44px; color: var(--suave); } .cli-nome { display: flex; align-items: center; gap: 11px; min-width: 0; } .cli-nome strong { font-weight: 700; color: var(--texto); } /* Nunca quebra linha (corta com "…") — numa tabela com table-layout:auto (ver .tabela-auto), deixar o Nome quebrar em 2 linhas era uma "válvula de escape" silenciosa: a tabela nunca chegava a estourar de verdade e os botões de Ações não escondiam a tempo (Carlos, 17/08/2026: "os botões procuração e hipossuficiência não ocultam mais"). */ #conteudo-clientes .tabela-auto .cli-nome-txt strong, #conteudo-clientes .tabela-auto .cli-nome-cpf { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .zap { color: #25d366; vertical-align: -3px; margin-left: 6px; width: 13px; height: 13px; } /* ---- Campo de busca novo ---- */ .busca-wrap-interno { position: relative; width: 100%; max-width: 400px; display: flex; align-items: center; } .busca-wrap-interno .campo-busca-novo { padding-right: 38px; } /* Botão lupa (submit) fixo à direita */ .busca-wrap-interno .busca-submit { position: absolute; right: 6px; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; cursor: pointer; flex: none; transition: background .15s; } .busca-wrap-interno .busca-submit svg { width: 15px; height: 15px; fill: none; stroke: #b0bcc8; stroke-width: 2.2; stroke-linecap: round; transition: stroke .15s; } .busca-wrap-interno .busca-submit:hover { background: #1e3a5f; } .busca-wrap-interno .busca-submit:hover svg { stroke: #fff; } .campo-busca-novo { display: block; width: 100%; height: 38px; padding: 0 14px; font-size: 13.5px; font-family: inherit; color: var(--texto); background-color: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; outline: none; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color .15s; } .campo-busca-novo::placeholder { color: var(--suave); } .campo-busca-novo:focus { border-color: var(--azul-claro); } .campo-busca-novo.compacto { height: 34px; font-size: 13px; } .busca-outros-meses { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--suave); } .busca-outros-meses[hidden] { display: none; } .busca-spinner { width: 13px; height: 13px; animation: busca-spin .8s linear infinite; } @keyframes busca-spin { to { transform: rotate(360deg); } } /* Barra padrão: busca à esquerda, botões à direita */ .barra-acoes { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .barra-acoes-busca { width: 100%; max-width: 400px; } .barra-acoes-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* campo-busca legado (CEP em formulários — mantido) */ .campo-busca { position: relative; flex: 1; } .campo-busca .lupa { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--suave); pointer-events: none; } .campo-busca input:not([type=checkbox]):not([type=radio]):not([type=submit]) { padding-left: 38px; background: var(--superficie); } /* ---- Paginação ---- */ .lista-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; gap: 12px; } .lista-rodape .contagem { color: var(--suave); font-size: 13px; } .lista-rodape .contagem strong { color: var(--texto); } .lista-rodape .rodape-esq { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .por-pagina { display: inline-flex; align-items: center; gap: 7px; color: var(--suave); font-size: 12.5px; } .por-pagina select { width: auto; padding: 5px 9px; font-size: 12.5px; } .paginacao { display: flex; align-items: center; gap: 6px; } .paginacao a, .paginacao span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--suave); font-weight: 600; font-size: 13px; } .paginacao a:hover { border-color: var(--azul-claro); color: var(--azul-claro); } .paginacao .ativo { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; } .paginacao .reticencias { border: none; background: none; } .paginacao .desativado { opacity: .4; pointer-events: none; } .paginacao svg { width: 16px; height: 16px; } /* ---- Detalhe do cliente / fichas ---- */ .ficha-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); padding: 20px 22px; margin-bottom: 18px; } .ficha-ident { display: flex; align-items: center; gap: 15px; } .ficha-ident .avatar { width: 56px; height: 56px; font-size: 19px; background: var(--teal-bg); color: var(--azul-claro); } .ficha-nome { font-size: 21px; font-weight: 400; color: var(--texto); display: flex; align-items: center; gap: 10px; } .ficha-sub { color: var(--suave); font-size: 13px; margin-top: 3px; } .ficha-acoes { display: flex; gap: 10px; } .drop { position: relative; } details.drop > summary { list-style: none; } details.drop > summary::-webkit-details-marker { display: none; } .ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 900px) { .ficha-grid { grid-template-columns: 1fr; } } .bloco-icone { display: flex; align-items: center; gap: 9px; } .bloco-icone svg { width: 18px; height: 18px; color: var(--azul-claro); } .bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } @media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } } .info-linha { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; } .info-linha .il-rot { color: var(--suave); font-size: 11.5px; } .info-linha .il-val { color: var(--texto); cursor: text; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; width: fit-content; max-width: 100%; } .info-linha .il-val-vazio:hover { background: var(--linha-hover); } .info-linha .il-val-input { font: inherit; padding: 3px 6px; border: 1px solid var(--azul-claro); border-radius: 4px; background: var(--superficie); color: var(--texto); width: 100%; max-width: 260px; } .info-linha .il-val-select { font: inherit; padding: 3px 6px; border: 1px solid var(--azul-claro); border-radius: 4px; background: var(--superficie); color: var(--texto); } .info-linha .il-val-grupo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .il-whats-inline { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--suave); white-space: nowrap; } .badge-ok { display: inline-block; background: #e4f6ec; color: #1a8a52; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .resumo-fin { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .rf-icone { width: 48px; height: 48px; border-radius: 50%; background: #e4f6ec; color: var(--verde); display: flex; align-items: center; justify-content: center; flex: none; } .rf-icone svg { width: 22px; height: 22px; } .rf-tit strong { display: block; color: var(--texto); } .rf-tit small { color: var(--suave); font-size: 12.5px; } .rf-metricas { display: flex; gap: 32px; margin-left: 14px; } .rf-metrica { display: flex; flex-direction: column; } .rf-metrica .rf-rot { color: var(--suave); font-size: 12.5px; } .rf-metrica .rf-val { font-size: 20px; font-weight: 700; } .resumo-fin > .btn { margin-left: auto; } .proto-badge { font-weight: 700; font-size: 11.5px; letter-spacing: .02em; } .tabela-rolavel { overflow-x: auto; } @media (max-width: 680px) { .tabela-resp { min-width: 0 !important; } .tabela-resp, .tabela-resp tbody, .tabela-resp tr, .tabela-resp td { display: block; width: 100%; } .tabela-resp thead { display: none; } .tabela-resp tr { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .tabela-resp tbody tr:nth-child(even) td { background: transparent; } .tabela-resp td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--borda); text-align: right; } .tabela-resp td:last-child { border-bottom: none; } .tabela-resp td[data-label]:not([data-label=""])::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--suave); text-align: left; } .tabela-resp td[data-label=""] { justify-content: flex-end; padding-top: 12px; } .tabela-resp td[data-label="Nome"] { flex-direction: column; align-items: flex-start; text-align: left; } } .tabela td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .seta-cel { color: var(--suave); width: 30px; } .seta-cel svg { width: 16px; height: 16px; } .ver-todos-rodape { text-align: center; margin-top: 14px; } .ver-todos-rodape a { font-weight: 700; } /* ---- Formulário em cards (cliente) ---- */ .form-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; } @media (max-width: 900px) { .form-cards { grid-template-columns: 1fr; } } .obg { color: var(--vermelho); } .radio-linha { display: flex; gap: 22px; padding: 7px 0 2px; } .radio-op { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; font-size: 14px; color: var(--texto); margin: 0; cursor: pointer; } .radio-op input { width: auto; } .check-inline { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; font-size: 13px; margin-top: 8px; color: var(--suave); } .check-inline input { width: auto; } .campo-busca .lupa-dir { left: auto; right: 13px; } .campo-busca:has(.lupa-dir) input:not([type=checkbox]):not([type=radio]):not([type=submit]) { padding-left: 11px; padding-right: 38px; } .nota-form { display: flex; gap: 11px; align-items: flex-start; background: var(--teal-bg); border: 1px solid var(--borda); color: var(--texto); border-radius: 12px; padding: 13px 16px; font-size: 13px; } .nota-form svg { width: 18px; height: 18px; color: var(--azul-claro); flex: none; margin-top: 1px; } /* ---- Financeiro: barra de meses e rodapé de indicadores ---- */ .sub-proto { color: var(--suave); font-size: 11.5px; margin-top: 2px; } .acoes-fin { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .fin-kpi { flex: 1 1 160px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 16px; display: flex; align-items: center; gap: 12px; } /* ---- Nova cobrança ---- */ .trilha { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12.5px; color: #9aa4b2; font-weight: 400; margin-bottom: 14px; } .trilha a { color: #9aa4b2; font-weight: 400; } .trilha a:hover { text-decoration: underline; } .trilha .sep { color: #c7cedb; } .trilha .atual { color: #9aa4b2; font-weight: 400; } /* Botão "···" da trilha compacta do navegador de arquivos (Carlos, 25/08/2026, "opção 2" dos layouts sugeridos) — some com o meio do caminho quando há mais de 2 níveis, clicável pra expandir a trilha inteira de novo. */ .trilha-colapso { border: 1px solid var(--borda, #d8dee9); background: var(--superficie, #fff); color: #9aa4b2; font-size: 12px; line-height: 1; padding: 2px 7px; border-radius: 5px; cursor: pointer; font-family: inherit; } .trilha-colapso:hover { background: var(--cinza-bg, #f1f4f9); color: var(--texto, #1f2a3d); } /* Ponto de extensão da trilha (ex.: engrenagem de casos/detalhe.php) — empurra pro fim da mesma linha, não pra baixo dela. */ .trilha-acoes-extra { margin-left: auto; display: flex; align-items: center; } .secao-num { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--texto); font-size: 14px; margin: 0 0 14px; } .secao-num svg { width: 18px; height: 18px; color: var(--azul-claro); } hr.divisor { border: none; border-top: 1px solid var(--borda); margin: 22px 0; } /* #bloco-valores na especificidade é necessário: ".bloco h3" (mais abaixo neste arquivo) também bate aqui e vencia o espaçamento por vir depois no arquivo — o título ficava colado na inputbox de valor acima (Carlos, 21/07/2026). */ #bloco-valores h3.parcelas-titulo { font-size: 14px; font-weight: 700; color: var(--texto); margin: 32px 0 8px; } .cobranca-parcelas td, .cobranca-parcelas th { padding: 8px 12px; } .cobranca-parcelas .p-num { font-weight: 600; color: var(--suave); } .cobranca-parcelas input:not([type=checkbox]):not([type=radio]):not([type=submit]) { max-width: 240px; } /* À vista: a coluna "Parcela" fica sem sentido (é um pagamento único) — o cabeçalho já ficava sem texto, mas a coluna (14% de largura) continuava reservando o espaço vazia, empurrando Vencimento/Valor pra direita (Carlos, 18/08/2026). */ .cobranca-parcelas.parcela-oculta col:first-child { display: none; } .cobranca-parcelas.parcela-oculta th:first-child, .cobranca-parcelas.parcela-oculta td.p-num { display: none; } .cobranca-total { margin-top: 14px; padding: 12px 16px; background: var(--teal-bg); border-radius: 10px; font-size: 14px; color: var(--texto); } .cobranca-total strong { color: var(--azul-claro); font-size: 15px; margin-left: 4px; } /* ---- Formulários ---- */ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not(.campo-busca-novo):not(.campo-senha-gov-inline), select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: var(--radius); font-size: 14px; font-family: inherit; background: var(--superficie); color: var(--texto); transition: border-color .4s cubic-bezier(.34,1.56,.64,1); } /* Padrão de foco do sistema inteiro: só a borda azul, sem glow acinzentado, com uma transição elástica (assenta suave, com leve exagero no final) em vez de trocar instantâneo. Carlos, 27/07/2026: "gosto dessa borda azul, o que não me agrada é o efeito cinza que vem junto... [opção 9] implemente como padrão para todo o sistema" — escolhida entre 10 alternativas mostradas no chat. */ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not(.campo-busca-novo):not(.campo-senha-gov-inline):hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--azul-claro); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul-claro); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; } .form-grid .full { grid-column: 1 / -1; } .bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 20px; margin-bottom: 18px; box-shadow: var(--sombra); } .bloco h3 { margin: 0 0 16px; font-size: 15px; color: var(--azul); font-weight: 600; } /* Blocos recolhíveis (relatorios/index.php) —

nativos, fechados por padrão; o conteúdo só chega via AJAX na primeira abertura (ver script inline da view). Carlos, 27/07/2026: "ambos os blocos serão recolhíveis e devem aparecer encolhidos já na abertura da tela". */ .bloco-recolhivel > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; user-select: none; } .bloco-recolhivel > summary::-webkit-details-marker { display: none; } .bloco-recolhivel > summary h3 { margin: 0; } .bloco-recolhivel-seta { width: 15px; height: 15px; flex: none; color: var(--suave); transition: transform .15s; } .bloco-recolhivel[open] > summary .bloco-recolhivel-seta { transform: rotate(90deg); } .bloco-recolhivel[open] > summary { margin-bottom: 16px; } .bloco-recolhivel-corpo { animation: blocoRecolhivelSurge .18s ease; } @keyframes blocoRecolhivelSurge { from { opacity: 0; } to { opacity: 1; } } .bloco-recolhivel-loading { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--suave); font-size: 13px; padding: 24px 0; text-align: center; } .bloco-recolhivel-spinner { width: 16px; height: 16px; animation: busca-spin .8s linear infinite; } .bloco-sub + .bloco-sub { margin-top: 22px; } .bloco-sub h4 { margin: 0 0 10px; font-size: 13px; color: var(--texto); font-weight: 600; } /* ---- Bloco de Produtividade (relatórios) — cards, mini-gráficos de barra (div, sem lib externa) e pizza via conic-gradient (Carlos, 21/08/2026: prints de referência de "Processos por Estágio", "Processos por Fase"/"Mix por Tipo de Ação", "Distribuição por Categoria", "Indicadores de Protocolo" e "Protocolados × Arquivados"/"Últimos Protocolos"/ "Pipeline"). ---- */ .prod-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--sombra); } .prod-card-estagios { border-top: 3px solid var(--azul-claro); } .prod-card-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin-bottom: 14px; } .prod-card-subtitulo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin: 16px 0 10px; } .prod-duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 860px) { .prod-duas-col { grid-template-columns: 1fr; } } .prod-estagios-linha { display: flex; justify-content: space-around; text-align: center; gap: 10px; flex-wrap: wrap; } .prod-estagio-num { font-size: 30px; font-weight: 700; line-height: 1.1; } .prod-estagio-rotulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); margin-top: 4px; } .prod-estagio-nota { font-size: 11px; color: #7c4dbd; margin-top: 2px; } .prod-estagios-resumo { text-align: center; font-size: 12.5px; color: var(--suave); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); } /* Gráfico de barras simples (divs com height%, sem SVG/lib). */ .prod-barras { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 0 4px; } .prod-barra-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .prod-barra-valor { font-size: 11px; font-weight: 700; color: var(--texto); margin-bottom: 4px; } .prod-barra { width: 60%; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .2s; } .prod-barra-rotulo { font-size: 10px; color: var(--suave); margin-top: 6px; white-space: nowrap; } .prod-barra-dupla-par { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 100%; justify-content: center; } .prod-barra-fina { width: 30%; } .prod-barras-dupla { height: 140px; } .prod-legenda-dupla { display: flex; gap: 16px; font-size: 12px; color: var(--suave); margin-bottom: 10px; } /* Pizza via conic-gradient — leve, sem depender de canvas/SVG externo. */ .prod-pizza-linha { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .prod-pizza { width: 130px; height: 130px; border-radius: 50%; flex: none; } .prod-pizza-legenda { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--texto); } .prod-pizza-item { display: flex; align-items: center; gap: 7px; } .prod-pizza-bolinha { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; } /* Lista "Distribuição por Categoria" — rótulo+número numa linha, barra fina embaixo (mesmo idioma visual do .barra já usado em "Casos por status", só que colorido por categoria). */ .prod-categoria-lista { display: flex; flex-direction: column; gap: 10px; } .prod-categoria-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; } .prod-categoria-rotulo { color: var(--texto); } .prod-categoria-num { font-weight: 700; color: var(--texto); } .prod-categoria-barra-trilha { height: 5px; background: var(--teal-bg); border-radius: 3px; margin-top: -4px; overflow: hidden; } .prod-categoria-barra { height: 100%; border-radius: 3px; } /* Mini-cards (Indicadores de Protocolo / Pipeline). */ .prod-mini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .prod-mini-card { background: var(--cinza-bg); border: 1px solid var(--borda); border-top: 3px solid var(--azul-claro); border-radius: 10px; padding: 12px 14px; } .prod-mini-rotulo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } .prod-mini-num { font-size: 22px; font-weight: 700; color: var(--texto); margin-top: 4px; } .prod-mini-sub { font-size: 11px; color: var(--suave); margin-top: 2px; } .prod-pipeline-titulo { margin-top: 4px; } /* Ranking "Últimos Protocolos". */ .prod-ranking { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; } .prod-ranking-item { display: flex; align-items: center; gap: 10px; } .prod-ranking-num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--azul-claro); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .prod-ranking-corpo { flex: 1 1 auto; min-width: 0; } .prod-ranking-nome { font-size: 12.5px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prod-ranking-area { font-size: 11px; color: var(--suave); } .prod-ranking-data { flex: none; font-size: 11.5px; color: #1e8449; font-weight: 600; } /* Funil do escritório — barras horizontais, largura proporcional ao valor. */ .prod-funil { display: flex; flex-direction: column; gap: 14px; } .prod-funil-linha { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 12px; } .prod-funil-rotulo { font-size: 13px; color: var(--texto); text-align: right; } .prod-funil-barra-trilha { height: 34px; } .prod-funil-barra { height: 100%; border-radius: 6px; min-width: 8px; transition: width .2s; } .prod-funil-num { font-size: 13.5px; font-weight: 700; } /* Listas "Aguardando Protocolo" / "Últimos Arquivados" — faixa colorida na lateral do card (vermelho = atenção/atraso, verde = concluído) e cada linha nome + subtítulo à esquerda, valor em destaque à direita. */ .prod-card-listra-vermelha { border-left: 3px solid var(--vermelho); } .prod-card-listra-verde { border-left: 3px solid var(--verde); } .prod-lista-nomes { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; } .prod-lista-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--borda); } .prod-lista-linha:last-child { border-bottom: none; } .prod-lista-corpo { min-width: 0; } .prod-lista-nome { font-size: 12.5px; font-weight: 600; color: var(--texto); } .prod-lista-sub { font-size: 11px; color: var(--suave); margin-top: 1px; } .prod-lista-valor { flex: none; font-size: 12.5px; font-weight: 700; } .prod-lista-valor-vermelho { color: var(--vermelho); } .prod-lista-valor-laranja { color: #b5490f; } .prod-card-nota { font-size: 11px; color: var(--suave); margin-top: 8px; } /* Ranking por Área (bloco Financeiro) — um mini-card por área, com duas colunas (melhores/piores) reaproveitando o selo numerado .prod-ranking-num. */ .fin-ranking-areas { display: flex; flex-direction: column; gap: 14px; } .fin-ranking-area-card { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; } .fin-ranking-area-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); margin-bottom: 10px; } .fin-ranking-duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 700px) { .fin-ranking-duas-col { grid-template-columns: 1fr; } } .fin-ranking-sub { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; } .fin-ranking-sub-verde { color: var(--verde); } .fin-ranking-sub-laranja { color: #b5490f; } .fin-ranking-linha { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .fin-ranking-nome { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fin-ranking-valor { flex: none; font-size: 12.5px; font-weight: 700; } .fin-ranking-valor-verde { color: var(--verde); } .fin-ranking-valor-laranja { color: #b5490f; } label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #4b5a62; } .acoes { display: flex; gap: 10px; margin-top: 8px; } /* ---- Atividade do caso: Painel de recados + Linha do tempo (casos/detalhe.php) ---- Um só bloco, os dois LADO A LADO (Carlos, 12/08/2026: primeiro pediu abas, depois voltou atrás: "eles nao devem aparecer em abas, más sum um do lado do outro"). Linha do tempo migrada de app/Views/casos/detalhe.php (antes em