/* SIPDC — azul escuro e cinza claro (docs/09-layout.md) */ :root { --azul-950: #08172D; --azul-900: #0B1F3A; --azul-800: #12305A; --azul-700: #1A4176; --azul-600: #1E4E8C; --azul-100: #E3ECF7; --cinza-50: #F4F6F9; --cinza-100: #EAEEF3; --cinza-200: #DCE2EA; --cinza-300: #C5CEDA; --cinza-500: #6B7787; --cinza-700: #3B4656; --texto: #1A2433; --branco: #FFFFFF; --st-prazo: #1D5FD6; --st-prazo-bg: #DCE8FC; --st-vencida: #C62828; --st-vencida-bg: #FBE3E3; --st-paga: #1E7F43; --st-paga-bg: #DDF3E5; --st-cancelada: #6B7280; --st-cancelada-bg: #ECEEF1; --st-alerta: #9A6400; --st-alerta-bg: #FCF0D6; --raio: 10px; --sombra: 0 1px 2px rgba(11,31,58,.06), 0 2px 8px rgba(11,31,58,.05); --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: var(--fonte); color: var(--texto); background: var(--cinza-50); font-size: 15px; line-height: 1.45; } a { color: var(--azul-600); } .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------- topo ---------- */ .faixa-homologacao { background: #9A6400; color: #fff; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; } .topo { background: var(--azul-900); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 22px; min-height: 64px; position: sticky; top: 0; z-index: 5; } .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; color: #fff; text-decoration: none; } .marca img { width: 30px; height: 30px; border-radius: 7px; } .orgao { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9FB6D6; border-left: 1px solid #2A4569; padding-left: 14px; } .topo .direita { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; } .relogio { text-align: right; line-height: 1.25; color: #C9D6E8; white-space: nowrap; } .relogio b { color: #fff; font-weight: 600; } .usuario { display: flex; align-items: center; gap: 10px; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul-700); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; } .usuario small { display: block; color: #9FB6D6; font-size: 11px; } .botao-topo { color: #C9D6E8; background: transparent; border: 1px solid #2A4569; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; text-decoration: none; } .botao-topo:hover { color: #fff; border-color: #4A6A93; } .seletor-area { display: flex; align-items: center; gap: 8px; } .seletor-area select { font: inherit; font-size: 13px; background: var(--azul-800); color: #fff; border: 1px solid #2A4569; border-radius: 8px; padding: 6px 8px; } /* ---------- estrutura ---------- */ .corpo { display: flex; min-height: calc(100vh - 64px); } .lateral { width: 228px; background: var(--azul-800); color: #C9D6E8; padding: 16px 10px; flex: none; } .lateral a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: inherit; text-decoration: none; margin-bottom: 2px; } .lateral a:hover { background: rgba(255,255,255,.06); color: #fff; } .lateral a.ativo { background: var(--azul-600); color: #fff; } .lateral svg { width: 18px; height: 18px; flex: none; } .lateral .sep { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7F98BC; padding: 14px 12px 6px; } .lateral .contador { margin-left: auto; background: var(--st-vencida); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 700; } .conteudo { flex: 1; padding: 24px 28px 48px; min-width: 0; } .estreito { max-width: 760px; } h1.titulo, h2.titulo { font-size: 22px; margin: 0 0 4px; font-weight: 700; color: var(--azul-900); } .sub { color: var(--cinza-500); font-size: 13px; margin: 0 0 18px; } .cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .cabecalho-pagina .sub { margin: 0; } .cartao { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); } .cartao + .cartao { margin-top: 16px; } .cartao .cab { padding: 14px 18px; border-bottom: 1px solid var(--cinza-100); font-weight: 600; color: var(--azul-900); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cartao .miolo { padding: 16px 18px; } /* ---------- botões, selos, campos ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 15px; border-radius: 9px; padding: 11px 18px; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; } .btn-primario { background: var(--azul-600); color: #fff; } .btn-primario:hover { background: var(--azul-700); } .btn-sec { background: #fff; color: var(--azul-800); border-color: var(--cinza-300); } .btn-sec:hover { border-color: var(--azul-600); } .btn-perigo { background: #fff; color: var(--st-vencida); border-color: #E8B4B4; } .btn-peq { padding: 6px 12px; font-size: 13px; border-radius: 7px; } .btn-bloco { width: 100%; padding: 16px; font-size: 17px; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip.prazo { color: var(--st-prazo); background: var(--st-prazo-bg); } .chip.vencida { color: var(--st-vencida); background: var(--st-vencida-bg); } .chip.paga { color: var(--st-paga); background: var(--st-paga-bg); } .chip.cancelada { color: var(--st-cancelada); background: var(--st-cancelada-bg); } .chip.alerta { color: var(--st-alerta); background: var(--st-alerta-bg); } .rot { display: block; font-size: 12px; font-weight: 600; color: var(--cinza-700); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; } .campo { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--cinza-300); border-radius: 9px; background: #fff; color: var(--texto); } textarea.campo { min-height: 90px; resize: vertical; } .campo:focus { outline: 2px solid var(--azul-600); outline-offset: 1px; } .campo.invalido { border-color: var(--st-vencida); } .erro-campo { color: var(--st-vencida); font-size: 13px; margin-top: 4px; } .ajuda { color: var(--cinza-500); font-size: 13px; margin-top: 4px; } .grupo { margin-bottom: 16px; } .linha { display: flex; gap: 12px; flex-wrap: wrap; } .linha > .grupo { flex: 1; min-width: 160px; } .acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ---------- avisos ---------- */ .aviso { border-radius: 9px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; border: 1px solid; } .aviso.ok { background: var(--st-paga-bg); color: #145A30; border-color: #B7E1C6; } .aviso.erro { background: var(--st-vencida-bg); color: #8E1C1C; border-color: #F0C2C2; } .aviso.info { background: var(--azul-100); color: var(--azul-800); border-color: #C3D5EC; } /* ---------- tabelas e filtros ---------- */ .filtros { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--cinza-100); flex-wrap: wrap; } .filtros .campo { width: auto; padding: 7px 10px; font-size: 13px; } .filtros .campo.busca { flex: 1; min-width: 200px; } .tabela-rolagem { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-500); font-weight: 600; padding: 10px 14px; background: var(--cinza-50); white-space: nowrap; } td { padding: 11px 14px; border-top: 1px solid var(--cinza-100); vertical-align: top; } td.num, th.num { text-align: right; white-space: nowrap; } tr.inativo td { color: var(--cinza-500); } .forte { font-weight: 700; color: var(--azul-900); } .forte .fraco, .forte .mono { font-weight: 400; } .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; } .fraco { color: var(--cinza-500); font-size: 13px; } .vazio { padding: 28px; text-align: center; color: var(--cinza-500); } .paginacao { display: flex; gap: 6px; padding: 12px 14px; justify-content: flex-end; align-items: center; border-top: 1px solid var(--cinza-100); font-size: 13px; } details.json summary { cursor: pointer; color: var(--azul-600); font-size: 13px; } details.json pre { background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-width: 520px; } /* ---------- indicadores ---------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi { padding: 16px 18px; border-left: 4px solid var(--azul-600); text-decoration: none; color: inherit; display: block; } .kpi small { display: block; color: var(--cinza-500); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .kpi b { font-size: 26px; color: var(--azul-900); } .kpi.vencida { border-left-color: var(--st-vencida); } .kpi.alerta { border-left-color: var(--st-alerta); } /* ---------- terminal (tablet e computador) ---------- */ .ola { padding: 24px 24px 8px; } .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 8px 24px 20px; } .tablet .grade { grid-template-columns: 1fr 1fr; } .bloco { background: #fff; border: 1px solid var(--cinza-200); border-radius: 14px; padding: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; min-height: 150px; text-decoration: none; color: inherit; position: relative; } .bloco.indisponivel { opacity: .72; cursor: default; } .bloco .ic { width: 52px; height: 52px; border-radius: 12px; background: var(--azul-100); color: var(--azul-700); display: grid; place-items: center; } .bloco .ic svg { width: 28px; height: 28px; } .bloco b { font-size: 19px; color: var(--azul-900); } .bloco span.desc { font-size: 13px; color: var(--cinza-500); margin-top: -6px; } .bloco .fase { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 600; color: var(--cinza-500); background: var(--cinza-100); border-radius: 999px; padding: 3px 9px; } .info-sessao { margin: 0 24px 24px; } .pagina-terminal { padding: 20px 24px 40px; max-width: 1180px; } .voltar-link { display: inline-block; font-size: 13px; color: var(--azul-600); text-decoration: none; margin-bottom: 8px; } .ficha-topo { margin-bottom: 16px; } .ficha-topo .miolo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; } .docs .cartao + .cartao { margin-top: 0; } .tablet .docs { grid-template-columns: 1fr; } .tablet .pagina-terminal { padding: 18px 18px 40px; } td.forte { white-space: nowrap; } .cab .chip { margin-left: auto; } .borda-topo { border-top: 1px solid var(--cinza-100); } .marcar { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--cinza-700); cursor: pointer; } .marcar.caixa { border: 1px solid var(--cinza-300); border-radius: 8px; padding: 8px 12px; background: #fff; font-weight: 600; } .marcar input { width: 16px; height: 16px; } dl.dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; } dl.dados dt { color: var(--cinza-500); font-size: 13px; } dl.dados dd { margin: 0; } .campo.leitura { background: var(--cinza-50); color: var(--cinza-700); } .veiculo-linha { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 16px 18px; border-top: 1px solid var(--cinza-100); align-items: start; } .veiculo-linha:first-of-type { border-top: 0; } .veiculo-linha .placa { background: #fff; border: 2px solid var(--azul-800); border-radius: 6px; padding: 8px 12px; font-weight: 700; letter-spacing: .14em; color: var(--azul-900); font-size: 18px; margin-top: 22px; } .veiculo-linha .grupo { margin-bottom: 10px; } details.excluir { grid-column: 2; font-size: 13px; } details.excluir summary { cursor: pointer; color: var(--st-vencida); } details.excluir form { margin-top: 8px; } details.excluir .campo { flex: 1; min-width: 220px; padding: 7px 10px; font-size: 13px; } /* ---------- multa ---------- */ .form-multa .cartao { margin-bottom: 14px; } .form-multa .cartao + .cartao { margin-top: 0; } .campo-placa { width: 140px; font-size: 22px; font-weight: 700; letter-spacing: .18em; text-align: center; } .seg { display: inline-flex; border: 1px solid var(--cinza-300); border-radius: 9px; overflow: hidden; } .seg label { cursor: pointer; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg span { display: block; padding: 11px 16px; font-weight: 600; color: var(--cinza-700); background: #fff; } .seg input:checked + span { background: var(--azul-100); color: var(--azul-800); } .seg input:focus-visible + span { outline: 2px solid var(--azul-600); outline-offset: -2px; } .veiculo-achado { display: flex; gap: 14px; align-items: flex-start; background: var(--azul-100); border-radius: 10px; padding: 12px 14px; margin-top: 10px; } .veiculo-achado:empty { display: none; } .placa, .placa-mini { background: #fff; border: 2px solid var(--azul-800); border-radius: 6px; font-weight: 700; letter-spacing: .12em; color: var(--azul-900); } .veiculo-achado .placa { padding: 6px 10px; font-size: 18px; } .placa-mini { padding: 1px 6px; font-size: 13px; border-width: 1.5px; } .escolhido { padding: 10px 12px; background: var(--cinza-50); border: 1px dashed var(--cinza-300); border-radius: 9px; margin-bottom: 8px; min-height: 42px; } .lista-sugestoes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .sugestao { text-align: left; font: inherit; padding: 10px 12px; border: 1px solid var(--cinza-200); border-radius: 8px; background: #fff; cursor: pointer; } .sugestao:hover { border-color: var(--azul-600); } .artigos-selecao { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 8px; } .artigo-sel { display: flex; gap: 8px; align-items: center; } .artigo-sel select { flex: 1; min-width: 0; padding: 12px; font-size: 15px; } .botao-redondo { width: 46px; height: 46px; padding: 0; font-size: 22px; line-height: 1; flex: none; } .botao-redondo[hidden] { display: none; } .artigos-lista { max-height: 360px; overflow-y: auto; padding: 8px 12px; } .artigo-linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cinza-200); border-radius: 9px; margin-bottom: 6px; cursor: pointer; background: #fff; } .artigo-linha.escolhido { border-color: var(--azul-600); background: var(--azul-100); } .artigo-linha b { width: 76px; color: var(--azul-900); flex: none; } .artigo-linha .t { flex: 1; font-size: 14px; } .artigo-linha .val { font-weight: 600; white-space: nowrap; } .artigo-linha .qtd { width: 64px; padding: 6px 8px; text-align: center; } .total { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--azul-900); color: #fff; font-weight: 600; font-size: 16px; } .cartao > .total:last-child { border-radius: 0 0 var(--raio) var(--raio); } .anexos { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; } .thumb { width: 110px; height: 82px; border-radius: 8px; border: 1px solid var(--cinza-200); overflow: hidden; background: var(--cinza-100); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--cinza-700); text-align: center; padding: 4px; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .colar { flex: 1; min-width: 200px; min-height: 82px; border: 2px dashed var(--cinza-300); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cinza-500); font-size: 13px; text-align: center; padding: 10px; background: #fff; } .colar:focus { outline: 2px solid var(--azul-600); } .colar b { color: var(--azul-700); } .link-arquivo { color: var(--azul-600); text-decoration: underline; cursor: pointer; } .assin { font-size: 13px; color: var(--cinza-500); margin: 4px 0 14px; } .assin b { color: var(--azul-900); } .prova { display: flex; flex-direction: column; gap: 4px; max-width: 260px; font-size: 12px; word-break: break-all; } .prova img { max-width: 260px; max-height: 180px; border-radius: 8px; border: 1px solid var(--cinza-200); display: block; } .linha-do-tempo { list-style: none; margin: 0; } .linha-do-tempo li { padding: 8px 0 8px 14px; border-left: 3px solid var(--cinza-200); margin-left: 4px; font-size: 14px; } .riscado { text-decoration: line-through; color: var(--cinza-500); } .aba { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 7px; color: var(--cinza-700); text-decoration: none; } .aba.on { background: var(--azul-100); color: var(--azul-800); } /* ---------- BO e fichamento ---------- */ textarea.relato { min-height: 160px; } .texto-longo { white-space: normal; line-height: 1.55; } .envolvidos { padding: 14px 18px 4px; display: flex; flex-direction: column; gap: 10px; } .envolvido { display: grid; grid-template-columns: 150px 1fr 150px 1fr 46px; gap: 8px; align-items: start; padding-bottom: 10px; border-bottom: 1px dashed var(--cinza-200); } .envolvido:last-child { border-bottom: 0; } .envolvido .pessoa { position: relative; } .envolvido .selo-rg { position: absolute; right: 10px; top: 12px; font-size: 12px; color: var(--st-paga); font-weight: 600; pointer-events: none; } .envolvido .lista-sugestoes { position: absolute; left: 0; right: 0; z-index: 3; } .envolvido .remover-pessoa[hidden] { display: none; } @media (max-width: 900px) { .envolvido { grid-template-columns: 1fr 1fr 46px; } .envolvido .pessoa { grid-column: 2 / 4; grid-row: 1; } .envolvido .papel { grid-row: 1; } .envolvido .profissao { grid-column: 1; } .envolvido .obs { grid-column: 2; } } .tablet .envolvido { grid-template-columns: 1fr 1fr 46px; } .tablet .envolvido .pessoa { grid-column: 2 / 4; grid-row: 1; } .tablet .envolvido .profissao { grid-column: 1; } .tablet .envolvido .obs { grid-column: 2; } /* ---------- processo (MP) ---------- */ .tribunal { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza-500); font-weight: 700; margin-bottom: 4px; } .forte-maiusculo { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 12px; } .divisor { border: 0; border-top: 1px solid var(--cinza-100); margin: 14px 0; } .proc-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; } .proc-cab small { display: block; color: var(--cinza-500); font-size: 12px; } .proc-cab b { font-size: 15px; font-weight: 600; } .processo-topo { margin-bottom: 16px; } .etapas { padding: 4px 18px; } .etapa { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--cinza-100); } .etapa:first-child { border-top: 0; } .etapa .bola { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; background: var(--cinza-100); color: var(--cinza-500); } .etapa.concluida .bola { background: var(--st-paga-bg); color: var(--st-paga); } .etapa.atual .bola { background: var(--azul-600); color: #fff; } .etapa.pulada .bola { background: var(--cinza-50); color: var(--cinza-300); } .etapa.pulada b { color: var(--cinza-500); } .etapa .tx { flex: 1; min-width: 0; } .etapa .tx b { color: var(--azul-900); } .etapa .tx small { display: block; color: var(--cinza-500); font-size: 12px; margin-top: 2px; } .etapa .texto { margin: 10px 0 8px; background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--cinza-700); } .etapa .form-etapa { margin-top: 10px; } .etapa .form-etapa textarea { min-height: 90px; margin-bottom: 8px; } .etapa .sentenca { background: var(--azul-100); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; } /* ---------- prefeitura ---------- */ .kpi.prazo-kpi { border-left-color: var(--st-prazo); } .kpi.paga-kpi { border-left-color: var(--st-paga); } .kpi span.fraco { margin-left: 6px; } .tabela-cobrancas tr td:first-child { border-left: 4px solid transparent; } .tabela-cobrancas tr.faixa-prazo td:first-child { border-left-color: var(--st-prazo); } .tabela-cobrancas tr.faixa-vencida td:first-child { border-left-color: var(--st-vencida); } .tabela-cobrancas tr.faixa-paga td:first-child { border-left-color: var(--st-paga); } .tabela-cobrancas tr.faixa-cancelada td { color: var(--st-cancelada); } .tabela-cobrancas tr.faixa-cancelada td:first-child { border-left-color: var(--st-cancelada); text-decoration: line-through; } .ficha-topo[class*="faixa-cartao-"] { border-left-width: 5px; } .faixa-cartao-prazo { border-left-color: var(--st-prazo); } .faixa-cartao-vencida { border-left-color: var(--st-vencida); } .faixa-cartao-paga { border-left-color: var(--st-paga); } .faixa-cartao-cancelada { border-left-color: var(--st-cancelada); } .valor-grande { font-size: 24px; font-weight: 700; color: var(--azul-900); margin-bottom: 4px; } .previa-notice { background: #2b2f36; color: #e8e8e8; font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 12px 14px; border-radius: 8px; } .previa-notice b { color: #fff; } .ultimos { margin: 0 24px 24px; } .ultimos .item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--cinza-100); text-decoration: none; color: inherit; } .ultimos .item .num { font-weight: 700; color: var(--azul-900); width: 120px; } .ultimos .item .desc { flex: 1; color: var(--cinza-700); font-size: 14px; } /* ---------- páginas simples (login, avisos, simulador) ---------- */ .pagina-simples { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; background: var(--azul-900); } .pagina-simples.clara { background: var(--cinza-50); justify-content: flex-start; } .caixa-simples { width: 100%; max-width: 420px; } .caixa-simples.larga { max-width: 1180px; } .logo-simples { display: block; margin: 0 auto 18px; width: 96px; height: 96px; border-radius: 20px; } .rodape-simples { color: #9FB6D6; font-size: 12px; text-align: center; margin-top: 16px; } .pagina-simples.clara .rodape-simples { color: var(--cinza-500); } pre.detalhe { background: #111; color: #eee; padding: 12px; border-radius: 8px; overflow: auto; font-size: 12px; max-height: 320px; } @media (max-width: 820px) { .corpo { flex-direction: column; } .lateral { width: auto; display: flex; overflow-x: auto; gap: 4px; padding: 8px; } .lateral .sep { display: none; } .lateral a { white-space: nowrap; margin: 0; } .conteudo { padding: 18px 16px 40px; } .topo { padding: 0 16px; gap: 10px; flex-wrap: wrap; } } @media (max-width: 560px) { .relogio { display: none; } } /* ---------- centralizado (29/10/2026): o conteúdo fica no meio, em qualquer tela ---------- */ main.principal { max-width: 1180px; margin: 0 auto; } .pagina-terminal { margin: 0 auto; } .form-multa { max-width: 920px; margin-left: auto; margin-right: auto; } .conteudo > * { max-width: 1180px; margin-left: auto; margin-right: auto; } .conteudo > .estreito { max-width: 760px; } /* ---------- celular / tablet do SL (29/10/2026) ---------- O tablet abre a página com ~480 px de largura (script do tablet): uma coluna, letra e toque maiores, topo enxuto. Vale também para navegador estreito. */ @media (max-width: 640px) { body { font-size: 16px; } .topo { min-height: 52px; padding: 6px 12px; gap: 8px; } .marca { font-size: 15px; gap: 8px; } .marca img { width: 24px; height: 24px; } .topo .direita { gap: 8px; } .orgao { padding-left: 8px; letter-spacing: .04em; } .seletor-area .orgao { display: none; } .seletor-area select { font-size: 14px; padding: 6px; } .usuario > div:not(.avatar) { display: none; } .relogio { display: none; } .faixa-homologacao { font-size: 11px; padding: 4px 8px; } .ola { padding: 14px 12px 4px; } h1.titulo, h2.titulo { font-size: 20px; } .grade { grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 12px 14px; } .bloco { padding: 14px; min-height: 0; gap: 8px; border-radius: 12px; } .bloco .ic { width: 40px; height: 40px; border-radius: 10px; } .bloco .ic svg { width: 22px; height: 22px; } .bloco b { font-size: 16px; } .bloco span.desc { font-size: 12px; margin-top: -4px; } .ultimos, .info-sessao { margin: 0 12px 16px; } .ultimos .item { padding: 12px 14px; flex-wrap: wrap; gap: 4px 10px; } .ultimos .item .num { width: auto; } .ultimos .item .desc { flex-basis: 100%; order: 3; } .pagina-terminal, .tablet .pagina-terminal { padding: 12px 10px 32px; } .cartao .cab { padding: 12px 14px; } .cartao .miolo { padding: 14px; } .campo { font-size: 16px; padding: 12px; } .btn { padding: 12px 16px; font-size: 16px; } .btn-peq { padding: 8px 12px; font-size: 14px; } .linha > .grupo { flex-basis: 100%; max-width: none !important; } .campo-placa { width: 120px; } .seg span { padding: 11px 14px; } .total { font-size: 15px; } .artigos-selecao, .envolvidos { padding-left: 14px; padding-right: 14px; } .envolvido, .tablet .envolvido { grid-template-columns: 1fr 46px; } .envolvido .papel, .tablet .envolvido .papel { grid-column: 1; grid-row: 1; } .envolvido .remover-pessoa { grid-column: 2; grid-row: 1; } .envolvido .pessoa, .envolvido .profissao, .envolvido .obs, .tablet .envolvido .pessoa, .tablet .envolvido .profissao, .tablet .envolvido .obs { grid-column: 1 / 3; grid-row: auto; } .docs, .tablet .docs { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .proc-cab { grid-template-columns: 1fr; gap: 8px; } dl.dados { grid-template-columns: 1fr; gap: 2px; } dl.dados dd { margin-bottom: 8px; } .veiculo-linha { grid-template-columns: 1fr; } .veiculo-linha .placa { margin-top: 0; justify-self: start; } details.excluir { grid-column: 1; } .tabela-rolagem table { font-size: 13px; } .prova, .prova img { max-width: 100%; } } /* ---------- tablet: só o conteúdo rola (29/10/2026) ---------- O topo azul e a faixa ficam parados; a barra de rolagem começa abaixo deles. */ html:has(body.tablet), body.tablet { height: 100%; overflow: hidden; } body.tablet { display: flex; flex-direction: column; } body.tablet .faixa-homologacao, body.tablet .topo { flex: none; position: static; } body.tablet main.principal { flex: 1; min-height: 0; overflow-y: auto; max-width: none; width: 100%; scrollbar-width: thin; } /* ---------- tablet: seletor próprio no lugar da lista do