/* ══════════════════════════════════════════════════════════════ TEMA F — "Tipografia" Carregado DEPOIS de app.css, sobrescrevendo os tokens e acrescentando os componentes de lista da Etapa 6. Por que camada de tema e não reescrita do app.css: o design ainda está em avaliação (seis variantes). Mantendo o tema num arquivo à parte, trocar de proposta — ou voltar ao verde original — é remover uma linha do , e não refazer a folha inteira. Os nomes de variável do app.css são reaproveitados de propósito: como todo componente já lê `var(--g)`, `var(--gd)` etc., redefinir o token aqui repinta a aplicação inteira sem tocar em nenhum seletor de componente. ── ATENÇÃO ── Este arquivo deixou de ser o tema padrão. Ele passou a ser a CAMADA BASE: por cima dele vem `tema-institucional.css`, que repinta os tokens quando o traz data-tema="institucional" — hoje o padrão. Sem esse atributo, o que se vê é exatamente este arquivo, e é isso que mantém os dois temas disponíveis a custo de uma requisição. Componente novo continua entrando AQUI e lendo token. Cor fixa em componente quebra os dois temas de uma vez. ══════════════════════════════════════════════════════════════ */ :root{ /* ── PALETA ÂMBAR sobre os tokens existentes ── */ --g:#F97316; --gd:#EA580C; --gxd:#B4470D; --gl:#FFF2E8; --gm:#FDBA8C; --gold:#D97706; --gold-lt:#FDF3E3; --gold-dk:#B45309; /* Neutros quentes: cinza puro brigaria com o laranja */ --bg:#FAF7F4; --sur:#FFFFFF; --bord:#EAE1D9; --blt:#F4EEE8; --tx:#4A423C; --tx2:#6A5C52; --tx3:#9B8B7F; --chumbo:#37413F; --red:#C2352B; --rlt:#FCECEA; --warn:#B45309; --wlt:#FDF3E3; --blue:#1D4ED8; --blt2:#EAF0FE; /* ── CINZAS DE FORMULÁRIO ── Deliberadamente fora da faixa do laranja. Num sistema de fiscalização a cor quente carrega significado (prazo, irregularidade); se a borda de foco de um campo usa a mesma faixa, o usuário aprende a ignorá-la e a cor perde força justamente onde precisa alertar. */ --f-bord:#CFCAC4; --f-bord-foco:#6B6560; --f-anel:rgba(107,101,96,.14); --f-fundo:#FFFFFF; --f-fundo-ro:#F3F1EF; --f-rot:#7A736C; /* ── DEGRADÊ DE MARCA ── Começa no laranja médio (--gd) e não no queimado (--gxd): o tom escuro pesava demais numa barra que ocupa a largura inteira da tela. O --gxd continua existindo para superfícies pequenas (toast), onde a área é mínima e o contraste com o texto branco importa mais que a leveza. */ --grad-topo: linear-gradient(135deg, var(--gd) 0%, var(--g) 100%); --grad-fundo: linear-gradient(150deg, var(--gd) 0%, var(--g) 55%, #FB9142 100%); } /* Cabeçalho do app no degradê mais claro (app.css usa --gxd → --gd). */ .topo{background:var(--grad-topo)} /* ── MARCA NA BARRA SUPERIOR ── Sem moldura nem fundo: a marca tem um conjunto por tema (ver js/tema.js), então ela nunca fica da mesma cor da barra e não precisa de apoio. O miolo branco do desenho já é o contraste. */ .topo-marca{width:28px;height:28px;flex-shrink:0} /* O bloco do título precisa poder encolher para o ellipsis funcionar: sem min-width:0 o flex respeita o tamanho do conteúdo e "Fiscalização de Obras" quebrava em três linhas dentro de uma barra de 56px. */ .topo > div{min-width:0} .topo h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* O cabeçalho em tela estreita é tratado junto do .perfil-btn, mais abaixo: a media query precisa vir DEPOIS da regra base para vencer na cascata. */ /* ── CAMPOS EM CINZA ────────────────────────────────────────── */ .field{background:var(--f-fundo);border-color:var(--f-bord)} .field:focus-within{border-color:var(--f-bord-foco);box-shadow:0 0 0 3px var(--f-anel)} .field label{color:var(--f-rot)} .field input[readonly],.field select:disabled{background:var(--f-fundo-ro)} .data-hora-combo{border-color:var(--f-bord)} .data-hora-combo:focus-within{border-color:var(--f-bord-foco);box-shadow:0 0 0 3px var(--f-anel)} .chk-item.marcado{border-color:var(--f-bord-foco);background:#F4F2F0} .chk-item input,.field input[type=checkbox]{accent-color:var(--f-bord-foco)} /* ── TAGS "Modelo D" do AppPOSTURAS ───────────────────────── Fundo em gradiente do tom do status, ícone por máscara CSS pintado na cor do status, e TEXTO SEMPRE cinza-chumbo — nunca colorido. Só o fundo e o ícone carregam a cor, o que mantém a leitura quando há várias tags juntas. */ :root{ --ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.5l4 2.4-1 1.6-5-3V7h2z'/%3E%3C/svg%3E"); --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); --ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm-1 7h2v6h-2V9zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E"); --ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.29l6.29 6.3 6.29-6.3z'/%3E%3C/svg%3E"); --ic-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E"); --ic-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 7V3.5L19.5 9H14z'/%3E%3C/svg%3E"); } .badge{gap:5px;padding:4px 9px 4px 7px;border-radius:8px;color:var(--chumbo); border:1px solid var(--badge-border);box-shadow:0 1px 2px rgba(0,0,0,.05)} .badge::before{width:11px;height:11px;border-radius:0;background:var(--badge-color); -webkit-mask-image:var(--badge-icon);mask-image:var(--badge-icon); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center} .bd-ok {background:linear-gradient(135deg,#E7F6EC,#D5F0DE);--badge-border:#C6EAD2;--badge-color:#2E7D32;--badge-icon:var(--ic-check)} .bd-al {background:linear-gradient(135deg,#FFF6DD,#FCECBE);--badge-border:#F2DE9C;--badge-color:#B8860B;--badge-icon:var(--ic-clock)} .bd-pe {background:linear-gradient(135deg,#FFF6DD,#FCECBE);--badge-border:#F2DE9C;--badge-color:#B8860B;--badge-icon:var(--ic-clock)} .bd-er {background:linear-gradient(135deg,#FCEAE9,#F8D6D2);--badge-border:#F2C4C0;--badge-color:#C62828;--badge-icon:var(--ic-alert)} .bd-in {background:linear-gradient(135deg,#F1F5F9,#E3E9EF);--badge-border:#E2E8F0;--badge-color:#6B7280;--badge-icon:var(--ic-dot)} .bd-cx {background:linear-gradient(135deg,#FCEAE9,#F5CDC8);--badge-border:#F0B8B3;--badge-color:#B71C1C;--badge-icon:var(--ic-x)} .bd-tipo{background:linear-gradient(135deg,#F6F3F0,#EDE8E3);--badge-border:#E2DCD6;--badge-color:#8A8078;--badge-icon:var(--ic-file)} /* ── ABAS ───────────────────────────────────────────────────── */ /* Rodapé: FLEX, não grid de N colunas fixas. Com grid o número de colunas precisa acompanhar a quantidade de abas — foi o que quebrou ao entrar a terceira aba num grid de 2: a última ficava fora da barra. Em flex, cada aba divide o espaço sozinha e acrescentar uma nova não exige tocar no CSS. */ /* Barra flutuante em pílula: descolada das bordas, com a aba ativa marcada por uma pílula interna em vez do traço no topo. O ícone fica sempre em cinza-chumbo — quem muda de cor é o RÓTULO (laranja quando ativo), então o realce vem da palavra, que é o que de fato se lê. Largura travada em 560px e centralizada em qualquer tela: esticada de ponta a ponta num monitor grande, cada aba virava um retângulo enorme. */ .abas{position:fixed;left:50%;right:auto;transform:translateX(-50%);z-index:950; width:min(560px, calc(100% - 24px)); bottom:calc(10px + env(safe-area-inset-bottom)); background:var(--sur);border:1px solid var(--bord);border-radius:999px; box-shadow:0 8px 26px rgba(74,66,60,.17), 0 2px 6px rgba(74,66,60,.08); display:flex;align-items:stretch;padding:6px;gap:3px} .aba{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:2px;padding:7px 3px;border:none;background:none;cursor:pointer; border-radius:999px;font-size:10px;line-height:1.15;color:var(--chumbo); position:relative;text-align:center;transition:background .15s; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .aba svg{width:19px;height:19px;color:var(--chumbo)} .aba:hover{background:var(--blt)} .aba.at{background:var(--gl);color:var(--gd)} .aba.at svg{color:var(--chumbo)} .tela{display:none} .tela.at{display:block} /* ── LISTA DE DOCUMENTOS — padrão do módulo Autos do AppPOSTURAS ── Ficha de quatro linhas: a primeira carrega o peso (data · tipo · número em badge monoespaçado · status), as demais formam pares rótulo/valor. */ .mob-card{background:var(--sur);border:1.5px solid var(--bord);border-radius:var(--rl); padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh);cursor:pointer} .mob-card:hover{box-shadow:var(--shl);border-color:var(--gm)} .mc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;gap:8px;flex-wrap:wrap} .mc-top > :first-child{min-width:0;flex:1} .mc-acoes{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .notif-card-l1{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .notif-card-data{font-size:12px;color:var(--tx3)} .notif-card-tipo{font-size:14px;color:var(--chumbo)} .notif-card-linhas{margin-top:10px;padding-top:10px;border-top:1px solid var(--blt); display:flex;flex-direction:column;gap:5px} .notif-card-linhas>div{font-size:12.5px;color:var(--tx2);display:flex;gap:6px;line-height:1.4} .notif-card-rot{flex-shrink:0;min-width:74px;font-size:10px;color:var(--tx3); text-transform:uppercase;letter-spacing:.04em;padding-top:1px} .proto-badge{display:inline-flex;align-items:center;font-size:11px;padding:2px 8px; border-radius:6px;background:var(--blt);color:var(--chumbo);letter-spacing:.05em; border:1.5px solid var(--bord)} .topo-lista{display:flex;align-items:center;gap:10px;margin-bottom:12px} .topo-lista .sec-simples{margin:0;flex:1} .sec-simples{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--chumbo); display:flex;align-items:center;gap:9px;margin:0 0 10px} .sec-simples .cont{background:var(--gl);color:var(--gd);border-radius:999px;padding:2px 9px; font-size:10px;letter-spacing:0} .linha-filtro{display:flex;gap:7px;margin-bottom:9px;flex-wrap:wrap} .linha-filtro input,.linha-filtro select{font-size:13px;padding:8px 10px; border:1.5px solid var(--f-bord);border-radius:var(--r);background:#fff; color:var(--chumbo);outline:none} .linha-filtro input{flex:2;min-width:150px} .linha-filtro select{flex:1;min-width:130px;cursor:pointer} .linha-filtro input:focus,.linha-filtro select:focus{border-color:var(--f-bord-foco); box-shadow:0 0 0 3px var(--f-anel)} .lista-vazia{font-size:12.5px;color:var(--tx3);text-align:center;padding:22px 10px; border:1.5px dashed var(--bord);border-radius:var(--rl)} .aviso-legal{background:var(--rlt);border:1.5px solid #F3CFCB;border-radius:var(--r); padding:11px 13px;font-size:12.5px;color:var(--tx2);margin-bottom:12px} .aviso-legal b{color:var(--chumbo)} #t-documentos,#t-protocolos{padding:14px;padding-bottom:80px} /* ── PARÂMETROS (modal, só administrador) ── Modal largo para conteúdo tabular: 520px é confortável para um formulário, mas espremeria uma lista de usuários com e-mail e perfil. */ .modal.largo{max-width:860px} /* Confirmação SEMPRE por cima: ela costuma ser aberta de dentro de outro modal (remover assinatura, excluir UPF) e, com o mesmo z-index, quem vencia era o último no DOM — a pergunta ficava atrás da tela que a pediu. */ #m-confirm{z-index:2200} /* ── ABAS — DESENHO ÚNICO DA APLICAÇÃO ── Segmento sobre trilho: a aba ativa vira uma pastilha branca em relevo, as demais ficam rentes ao fundo. Era o desenho das abas de documento e agora vale para todas — ficha técnica, perfil, parâmetros. Dois desenhos de aba na mesma aplicação faziam parecer que uma delas era outra coisa. As regras estruturais são compartilhadas; o que muda entre um lugar e outro é só a margem, definida junto de cada modal. */ .sub-abas{display:flex;gap:2px;background:var(--bg);border-radius:var(--r); padding:3px;overflow-x:auto;margin:12px 0 10px} .sub-abas button{flex:1 1 0;min-width:84px;padding:8px 6px;border:none;border-radius:6px; background:transparent;cursor:pointer;font-family:'Inter',sans-serif;font-size:12px; font-weight:700;color:var(--tx3);white-space:nowrap;transition:background .15s,color .15s} .sub-abas button.at{background:var(--sur);color:var(--gd);box-shadow:var(--sh)} /* Altura fixa e rolagem interna: sem isto cada aba esticava o modal ao tamanho do próprio conteúdo, e a janela pulava de tamanho a cada troca de aba. Com altura travada, todas as abas ocupam o mesmo container. */ .par-painel{display:none} .par-painel.at{display:block;height:min(60vh, 540px);overflow-y:auto;padding-right:4px} /* Linha de cadastro rápido (padrão .cad-row do AppPOSTURAS): o que cabe numa linha entra sem abrir janela — ano, valor, nome de lei. */ .cad-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;align-items:center} .cad-row input,.cad-row select{flex:1;min-width:120px;font-size:13.5px;padding:9px 12px; border:1.5px solid var(--f-bord);border-radius:var(--r);background:#fff; color:var(--chumbo);font-family:inherit;outline:none} .cad-row input:focus,.cad-row select:focus{border-color:var(--f-bord-foco); box-shadow:0 0 0 3px var(--f-anel)} .cad-row .btn{flex-shrink:0} .cad-dica{font-size:11px;color:var(--tx3);margin:2px 0 10px} /* Topo das sub-telas (artigos da lei, feriados do ano) */ .sub-topo{display:flex;align-items:center;gap:10px;margin-bottom:12px} .sub-topo .titulo{flex:1;min-width:0;font-family:'Manrope',sans-serif;font-weight:700; font-size:14px;color:var(--gd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Sub-abas internas do detalhe da lei */ .leg-painel{display:none} .leg-painel.at{display:block} /* Linha que leva a um detalhe: ganha a seta e o realce de clique. */ .par-linha.clicavel{cursor:pointer;transition:border-color .13s,background .13s} .par-linha.clicavel:hover{border-color:var(--gm);background:var(--gl)} .par-linha .seta{flex-shrink:0;color:var(--tx3);font-size:20px;line-height:1} /* Linha de dados simples (UPF/feriado): não é ficha, cabe numa linha. */ .par-linha{display:flex;align-items:center;gap:10px;background:var(--sur); border:1.5px solid var(--bord);border-radius:var(--rl);padding:11px 14px;margin-bottom:8px} .par-linha .principal{flex:1;min-width:0} .par-linha .principal b{font-size:13.5px;color:var(--chumbo);display:block} .par-linha .principal span{font-size:11.5px;color:var(--tx3)} .par-linha .acao-x{background:none;border:none;color:var(--tx3);cursor:pointer;padding:4px;flex-shrink:0} .par-linha .acao-x:hover{color:var(--red)} .par-secao{margin-bottom:18px} .par-secao-tit{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} /* Ficha do protocolo: pares rótulo/valor em coluna estreita à esquerda. */ .ficha-linha{display:flex;gap:8px;font-size:13px;color:var(--tx2);line-height:1.45; padding:7px 0;border-bottom:1px solid var(--blt)} .ficha-linha:last-child{border-bottom:none} .ficha-rot{flex-shrink:0;width:104px;font-size:10px;color:var(--tx3); text-transform:uppercase;letter-spacing:.04em;padding-top:2px} /* Botão de GPS sobe para não colidir com a pílula flutuante. */ .acoes{bottom:calc(76px + env(safe-area-inset-bottom));background:none} @media(min-width:1024px){ #t-documentos,#t-protocolos{max-width:900px;margin:0 auto;padding:18px 20px 40px} .acoes{max-width:none} } /* ── AJUSTES DE TELA ESTREITA ── No celular o cabeçalho do cartão não cabe em uma linha: título e badges disputavam a mesma faixa e a data acabava cortada ("11/") com o tipo quebrando letra a letra. Aqui os badges descem para a própria linha. */ @media(max-width:560px){ .mc-top{flex-direction:column;align-items:flex-start;gap:6px} .mc-top > :first-child{flex:1 1 auto;width:100%} .notif-card-rot{min-width:64px} /* Dois campos por linha em 375px só cabem com mínimos menores. */ .linha-filtro input{min-width:0;flex:1 1 55%} .linha-filtro select{min-width:0;flex:1 1 40%} .ficha-rot{width:84px} } /* Com quatro abas o rótulo não cabe inteiro em telas de 360px. Reduzir a fonte e o ícone é preferível a cortar o texto: "Protocolos" e "Documentos" só se distinguem pelas letras, não pelos ícones. */ @media(max-width:400px){ .aba{font-size:9px;padding:8px 1px} .aba svg{width:18px;height:18px} } /* ══════════════════════════════════════════════════════════════ SISTEMA TIPOGRÁFICO — por último, de propósito. Peso de fonte é definido em dezenas de componentes no app.css; se estas regras viessem antes, cada componente sobrescreveria o peso e o sistema não valeria nada. Vindo depois, vence por ordem de cascata. ══════════════════════════════════════════════════════════════ */ body{font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;font-weight:400} /* Display — Manrope 800 */ .topo h1,.mc .n{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.025em} /* Títulos — Manrope 700 (seções em 600) */ h1,h2,h3,h4,.modal h3,.notif-card-tipo,.item .t,.field .valor,.hist-data, .login-logo h1{font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:-.012em} .sec-title,.sec-simples{font-family:'Manrope',sans-serif;font-weight:600} /* Números e KPIs — Manrope, dígitos tabulares para alinhar coluna */ .sec-simples .cont,.mc .n{font-family:'Manrope',sans-serif;font-variant-numeric:tabular-nums;font-weight:700} /* Corpo — Inter 400/500 */ .item .s,.hist-irr,.hist-obs,.modal .sub,.tl-x{font-family:'Inter',sans-serif;font-weight:400} /* Rótulos — Inter 500 */ .field label,.notif-card-rot,.notif-card-data,.hist-meta,.chk-item .cod, .aba{font-family:'Inter',sans-serif;font-weight:500} /* Aba ativa em 600: o peso reforça o realce sem depender só da cor. */ .aba.at{font-weight:600} /* Botões — Inter 600. `.sub-abas button` saiu daqui: por marcação é um