/* ========================================================================================================== Onde Foi Parar · telas novas · BASE (etapa 0 do plano de publicação, 19/10/2026) Três camadas, nesta ordem no arquivo (as de baixo vencem as de cima). Sem @layer: no wiki, estilo fora de camada (o tema Vector) venceria qualquer camada. A ordem vem da posição no arquivo e todo seletor começa por ":root .ofp-t", que vence as regras do Vector: 1. ofp-tokens cores, tipo, espaço, raio, sombra e movimento, claro e escuro. Só variáveis --t-*. 2. ofp-componentes peças das regras do portal (fonte, como publicado, conta do portal, <3, MEI, área restrita, indicador com a mediana dos pares, estados, ações do bloco, busca única). 3. ofp-direcao a "direção visual" (A editorial, B painel escuro, C híbrido): só troca tokens e alguns detalhes de superfície. As telas nunca citam cor, tamanho ou sombra direto: trocar a direção não exige refazer tela nenhuma. Escopo: tudo vive dentro de .ofp-t (o contêiner de cada tela nova); as páginas antigas do wiki não mudam. Tema: data-ofp-tema = auto | claro | escuro no (auto segue o sistema). Direção: data-ofp-direcao = a | b | c. Movimento: só transform e opacity; prefers-reduced-motion desliga tudo (e o JS nem anima). Contraste: conferido por script (gerador/telas/testes/contraste.mjs) nos dois temas e nas três direções. ========================================================================================================== */ /* ---------------------------------------------------------------------------------------------- 1. tokens */ /* ---- camada: ofp-tokens ---- */ /* .ofp-tk: só as variáveis do claro, sem componentes e sem o escuro automático, para blocos dentro de páginas do wiki (fichas) */ :root .ofp-t, :root .ofp-tk { /* superfícies e texto */ --t-fundo: #F6F8FB; --t-sup: #FFFFFF; --t-sup2: #EEF3FA; --t-texto: #1F2937; --t-texto2: #4B5563; --t-linha: #D7DCE4; --t-linha-forte: #7B8798; /* marca (lupa com o pino): azul-marinho #0F3B82 e azul #2F7ED8 */ --t-marinho: #0F3B82; --t-marca: #2F7ED8; --t-link: #1D4F9E; --t-sobre-marinho: #FFFFFF; /* semânticas das regras */ --t-conta: #0E6B5C; --t-conta-fundo: #E6F4F1; /* conta do portal: derivado, sempre AO LADO do publicado */ --t-aviso: #8A4B08; --t-aviso-fundo: #FFF6E0; --t-ok: #166534; --t-ok-fundo: #E9F7EE; --t-perigo: #B42318; --t-restrito: #5B2BB5; --t-restrito-fundo: #F1ECFB; /* D1: área restrita, sem derivação */ --t-sup-fundo: #EEF1F5; /* célula suprimida (< 3) */ --t-ex: #7A2E0E; --t-ex-fundo: #FDEBD8; /* selo EXEMPLO (só bancada e protótipo) */ --t-marca-texto: #FFE07A; --t-ponto-par: #6F7A8F; /* D14: marca-texto e pontos dos pares (empréstimos da direção A) */ /* escala do mapa (5 faixas) */ --t-m0: #E3ECF8; --t-m1: #B9CFEE; --t-m2: #7FA6DD; --t-m3: #3F74C2; --t-m4: #0F3B82; --t-m-borda: #FFFFFF; --t-m-sel: #E4572E; /* tipo: uma fonte só (Inter, servida pelo portal) */ --t-fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --t-fonte-dado: ui-monospace, "Cascadia Mono", Consolas, monospace; /* códigos como publicados */ --t-fs-2xs: .6875rem; --t-fs-xs: .8125rem; --t-fs-sm: .875rem; --t-fs-md: .9375rem; --t-fs-base: 1rem; --t-fs-lg: 1.0625rem; --t-fs-h3: 1.05rem; --t-fs-h2: 1.25rem; --t-fs-h1: clamp(2rem, 8vw, 3rem); --t-fs-numero: clamp(1.75rem, 7vw, 2.25rem); --t-fs-numero-grande: clamp(2rem, 8vw, 2.75rem); --t-peso-numero: 800; --t-espaco-letra-titulo: -.02em; /* espaço, raio, sombra, alvo */ --t-e1: 4px; --t-e2: 8px; --t-e3: 12px; --t-e4: 16px; --t-e5: 24px; --t-e6: 32px; --t-r-p: 8px; --t-r-m: 12px; --t-r-g: 18px; --t-r-pilula: 999px; --t-sombra: 0 1px 2px rgba(15, 59, 130, .06), 0 6px 20px -10px rgba(15, 59, 130, .18); --t-alvo: 44px; --t-topo: 60px; --t-largura: 1180px; /* movimento (a direção pode trocar a curva e a duração) */ --t-curva: cubic-bezier(.2, .7, .2, 1); --t-dur-curta: 180ms; --t-dur: 520ms; --t-dur-longa: 900ms; --t-revela-deslocamento: 14px; /* 2.0 (identidade visual, 29/10/2026): selos de natureza, certeza e maturidade (forma + palavra), camadas do mapa analítico e escala eleitoral neutra */ --t-denuncia: #B42318; --t-denuncia-texto: #FFFFFF; /* Denunciar: o mesmo vermelho em todos os temas (identidade 2.0: o único vermelho) */ --t-s-mat: #FFFFFF; --t-s-mat-fundo: #0F3B82; --t-s-ofi: #0F3B82; --t-s-ofi-fundo: #E8EFFA; --t-s-imp: #3D4A5C; --t-s-imp-fundo: #EEF1F5; --t-s-aut: #0B6656; --t-s-aut-fundo: #E1F2ED; --t-s-rel: #166534; --t-s-rel-fundo: #E9F7EE; --t-s-hip: #6B4A00; --t-s-par: #8A4B08; --t-s-ambar-fundo: #FFF6E0; --t-s-pro: #0F3B82; --t-s-ext: #485366; --t-s-neutro-fundo: #FFFFFF; --t-c-obras: #0F3B82; --t-c-contratos: #1D7A8C; --t-c-equip: #5B6B7F; --t-c-demandas: #8A4B08; --t-c-mapa-fundo: #F2F4F7; --t-v0: #E6E7EF; --t-v1: #B9BCD0; --t-v2: #8287A6; --t-v3: #4A4F6A; color-scheme: light; } /* escuro: automático (segue o sistema) e manual */ @media (prefers-color-scheme: dark) { :root:not([data-ofp-tema="claro"]) .ofp-t { --t-fundo: #0B1220; --t-sup: #111A2B; --t-sup2: #18243A; --t-texto: #E7ECF4; --t-texto2: #A9B5C8; --t-linha: #26354F; --t-linha-forte: #6B7C99; --t-marinho: #9CC0F5; --t-marca: #6FA8F0; --t-link: #A9C8F7; --t-sobre-marinho: #0B1220; --t-conta: #5FD0B8; --t-conta-fundo: #0F2A27; --t-aviso: #F3C57A; --t-aviso-fundo: #2B2112; --t-ok: #6FD49A; --t-ok-fundo: #10281B; --t-perigo: #FF8A80; --t-restrito: #C9B6FF; --t-restrito-fundo: #221A3A; --t-sup-fundo: #1C2638; --t-ex: #FFC9A3; --t-ex-fundo: #3A2114; --t-marca-texto: #5C480C; --t-ponto-par: #8A98B3; --t-m0: #1B2A44; --t-m1: #24406B; --t-m2: #2F5C9A; --t-m3: #4F84CC; --t-m4: #9CC0F5; --t-m-borda: #0B1220; --t-m-sel: #FF8A5C; --t-s-mat: #0A1120; --t-s-mat-fundo: #8DBBFA; --t-s-ofi: #A9C8F7; --t-s-ofi-fundo: #172339; --t-s-imp: #C3CCDA; --t-s-imp-fundo: #1C2638; --t-s-aut: #5FD0B8; --t-s-aut-fundo: #0F2A27; --t-s-rel: #6FD49A; --t-s-rel-fundo: #10281B; --t-s-hip: #F3C57A; --t-s-par: #F3C57A; --t-s-ambar-fundo: #2B2112; --t-s-pro: #8DBBFA; --t-s-ext: #A8B4C7; --t-s-neutro-fundo: #101A2D; --t-c-obras: #8DBBFA; --t-c-contratos: #5FC3D4; --t-c-equip: #A8B4C7; --t-c-demandas: #F3C57A; --t-c-mapa-fundo: #121B2C; --t-v0: #1E2436; --t-v1: #3A4160; --t-v2: #6E7596; --t-v3: #B7BCD6; --t-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6); color-scheme: dark; } } :root[data-ofp-tema="escuro"] .ofp-t { --t-fundo: #0B1220; --t-sup: #111A2B; --t-sup2: #18243A; --t-texto: #E7ECF4; --t-texto2: #A9B5C8; --t-linha: #26354F; --t-linha-forte: #6B7C99; --t-marinho: #9CC0F5; --t-marca: #6FA8F0; --t-link: #A9C8F7; --t-sobre-marinho: #0B1220; --t-conta: #5FD0B8; --t-conta-fundo: #0F2A27; --t-aviso: #F3C57A; --t-aviso-fundo: #2B2112; --t-ok: #6FD49A; --t-ok-fundo: #10281B; --t-perigo: #FF8A80; --t-restrito: #C9B6FF; --t-restrito-fundo: #221A3A; --t-sup-fundo: #1C2638; --t-ex: #FFC9A3; --t-ex-fundo: #3A2114; --t-marca-texto: #5C480C; --t-ponto-par: #8A98B3; --t-m0: #1B2A44; --t-m1: #24406B; --t-m2: #2F5C9A; --t-m3: #4F84CC; --t-m4: #9CC0F5; --t-m-borda: #0B1220; --t-m-sel: #FF8A5C; --t-s-mat: #0A1120; --t-s-mat-fundo: #8DBBFA; --t-s-ofi: #A9C8F7; --t-s-ofi-fundo: #172339; --t-s-imp: #C3CCDA; --t-s-imp-fundo: #1C2638; --t-s-aut: #5FD0B8; --t-s-aut-fundo: #0F2A27; --t-s-rel: #6FD49A; --t-s-rel-fundo: #10281B; --t-s-hip: #F3C57A; --t-s-par: #F3C57A; --t-s-ambar-fundo: #2B2112; --t-s-pro: #8DBBFA; --t-s-ext: #A8B4C7; --t-s-neutro-fundo: #101A2D; --t-c-obras: #8DBBFA; --t-c-contratos: #5FC3D4; --t-c-equip: #A8B4C7; --t-c-demandas: #F3C57A; --t-c-mapa-fundo: #121B2C; --t-v0: #1E2436; --t-v1: #3A4160; --t-v2: #6E7596; --t-v3: #B7BCD6; --t-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6); color-scheme: dark; } /* ---------------------------------------------------------------------------------------------- 2. componentes */ /* ---- camada: ofp-componentes ---- */ :root .ofp-t { background: var(--t-fundo); color: var(--t-texto); font-family: var(--t-fonte); font-size: var(--t-fs-base); line-height: 1.5; -webkit-text-size-adjust: 100%; overflow-wrap: break-word; } :root .ofp-t *, :root .ofp-t *::before, :root .ofp-t *::after { box-sizing: border-box; } :root .ofp-t :is(h1, h2, h3, h4) { font-family: var(--t-fonte); line-height: 1.2; margin: 0; color: var(--t-texto); border: 0; padding: 0; } :root .ofp-t h1 { font-size: var(--t-fs-h1); letter-spacing: var(--t-espaco-letra-titulo); font-weight: 800; } :root .ofp-t h2 { font-size: var(--t-fs-h2); font-weight: 700; } :root .ofp-t h3 { font-size: var(--t-fs-h3); font-weight: 700; } :root .ofp-t p { margin: 0; } :root .ofp-t a { color: var(--t-link); text-underline-offset: .18em; } :root .ofp-t a:hover { text-decoration-thickness: 2px; } :root .ofp-t :focus-visible { outline: 3px solid var(--t-marinho); outline-offset: 2px; border-radius: 4px; } :root .ofp-t :is(img, svg) { max-width: 100%; } :root .ofp-t .t-num { font-variant-numeric: tabular-nums; } :root .ofp-t .t-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* o título cru do wiki (#firstHeading) fica fora do .ofp-t: as telas o escondem com t-sr, e ele continua para o leitor de tela */ :root h1#firstHeading.t-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; } :root .ofp-t .t-envolve { max-width: var(--t-largura); margin: 0 auto; padding: 0 var(--t-e4); } @media (min-width: 768px) { :root .ofp-t .t-envolve { padding: 0 var(--t-e5); } } /* grades nunca crescem além da tela no celular (correção do gerente, 19/10) */ :root .ofp-t [class*="t-grade"] > *, :root .ofp-t [class*="t-resumo"] > * { min-width: 0; } /* ----- botões ----- */ :root .ofp-t .t-bt { display: inline-flex; align-items: center; justify-content: center; gap: var(--t-e2); min-height: 48px; padding: 0 20px; border-radius: var(--t-r-m); border: 1.5px solid var(--t-marinho); background: var(--t-marinho); color: var(--t-sobre-marinho); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--t-dur-curta) var(--t-curva), opacity var(--t-dur-curta) var(--t-curva); } :root .ofp-t .t-bt.t-sec { background: var(--t-sup); color: var(--t-marinho); } :root .ofp-t .t-bt.t-txt { background: transparent; border-color: transparent; color: var(--t-link); padding: 0 var(--t-e2); text-decoration: underline; } :root .ofp-t .t-bt[aria-disabled="true"] { background: var(--t-sup2); border-color: var(--t-linha); color: var(--t-texto2); cursor: not-allowed; } :root .ofp-t .t-bt svg { width: 18px; height: 18px; flex: none; } :root .ofp-t .t-bt:active { transform: scale(.98); } @media (hover: hover) { :root .ofp-t .t-bt:not([aria-disabled="true"]):hover { opacity: .9; } } :root .ofp-t .t-bt.t-pequeno { min-height: var(--t-alvo); padding: 0 14px; font-size: var(--t-fs-sm); } /* ----- cartão ----- */ :root .ofp-t .t-cartao { background: var(--t-sup); border: 1px solid var(--t-linha); border-radius: var(--t-r-g); box-shadow: var(--t-sombra); } /* ----- selos das regras ----- */ :root .ofp-t .t-selo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--t-r-pilula); font-size: var(--t-fs-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; } :root .ofp-t .t-selo svg { width: 14px; height: 14px; flex: none; } :root .ofp-t .t-selo.t-publicado { background: var(--t-sup2); color: var(--t-marinho); } :root .ofp-t .t-selo.t-conta { background: var(--t-conta-fundo); color: var(--t-conta); } :root .ofp-t .t-selo.t-restrito { background: var(--t-restrito-fundo); color: var(--t-restrito); } :root .ofp-t .t-selo.t-aviso { background: var(--t-aviso-fundo); color: var(--t-aviso); } :root .ofp-t .t-selo.t-ok { background: var(--t-ok-fundo); color: var(--t-ok); } :root .ofp-t .t-ex { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 7px; border-radius: var(--t-r-pilula); background: var(--t-ex-fundo); color: var(--t-ex); font-size: var(--t-fs-2xs); font-weight: 800; letter-spacing: .06em; line-height: 1.6; } :root .ofp-t .t-pendente { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--t-r-pilula); border: 1px dashed var(--t-aviso); color: var(--t-aviso); font-size: var(--t-fs-2xs); font-weight: 700; } /* parâmetro que espera decisão do André */ /* ----- rodapé da fonte (em todo bloco) ----- */ :root .ofp-t .t-fonte { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: var(--t-e3) 0 0; padding: 10px 0 0; border-top: 1px dashed var(--t-linha); font-size: var(--t-fs-xs); color: var(--t-texto2); line-height: 1.5; } :root .ofp-t .t-fonte b { color: var(--t-texto); font-weight: 700; } :root .ofp-t .t-fonte .t-sep { opacity: .6; } /* ----- como publicado, conta do portal, resumo do portal ----- */ :root .ofp-t .t-publicado-txt { font-family: var(--t-fonte-dado); font-size: var(--t-fs-sm); background: var(--t-sup2); padding: 1px 6px; border-radius: 4px; } :root .ofp-t .t-valor-conta { color: var(--t-conta); } :root .ofp-t .t-resumo-portal { margin: var(--t-e3) 0 0; padding: 10px 12px; border-left: 3px solid var(--t-conta); background: var(--t-conta-fundo); border-radius: 0 var(--t-r-p) var(--t-r-p) 0; font-size: var(--t-fs-md); } :root .ofp-t .t-resumo-portal .t-selo { margin: 0 0 4px; } /* ----- MEI e pessoa física (nome omitido) ----- */ :root .ofp-t .t-omitido { font-style: italic; color: var(--t-texto2); } /* ----- área restrita (D1) ----- */ :root .ofp-t .t-restrito-caixa { margin: 0 0 var(--t-e3); padding: 10px 12px; border-radius: var(--t-r-m); background: var(--t-restrito-fundo); color: var(--t-texto); font-size: var(--t-fs-md); } :root .ofp-t .t-restrito-caixa b { color: var(--t-restrito); } /* ----- tabelas ----- */ :root .ofp-t .t-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; } :root .ofp-t table.t-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-fs-md); margin: 0; background: transparent; border: 0; } :root .ofp-t table.t-tabela :is(th, td) { overflow-wrap: normal; word-break: normal; hyphens: manual; } /* palavra inteira; a tabela larga rola dentro do bloco */ :root .ofp-t table.t-tabela td { min-width: 6.5em; } :root .ofp-t table.t-tabela caption { text-align: left; font-weight: 700; padding: 0 0 var(--t-e2); color: var(--t-texto); } :root .ofp-t table.t-tabela :is(th, td) { padding: 10px; border: 0; border-bottom: 1px solid var(--t-linha); text-align: left; vertical-align: top; background: transparent; color: var(--t-texto); } :root .ofp-t table.t-tabela thead th { font-size: var(--t-fs-xs); font-weight: 700; color: var(--t-texto2); border-bottom: 1.5px solid var(--t-linha-forte); white-space: nowrap; } :root .ofp-t table.t-tabela :is(td, th).t-v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } :root .ofp-t table.t-tabela td.t-sup { background: var(--t-sup-fundo); text-align: right; font-weight: 700; white-space: nowrap; } :root .ofp-t .t-legenda { display: flex; gap: var(--t-e2); align-items: flex-start; margin: 10px 0 0; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-legenda .t-amostra { flex: none; display: inline-block; min-width: 34px; text-align: center; background: var(--t-sup-fundo); border: 1px solid var(--t-linha); border-radius: 4px; font-weight: 700; color: var(--t-texto); } /* ----- indicador: número grande, referência e régua com a mediana dos pares ----- */ :root .ofp-t .t-indicador { padding: var(--t-e4); } :root .ofp-t .t-indicador .t-rot { font-size: var(--t-fs-md); color: var(--t-texto2); font-weight: 600; } :root .ofp-t .t-indicador .t-grande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; } :root .ofp-t .t-indicador .t-valor { font-size: var(--t-fs-numero); font-weight: var(--t-peso-numero); letter-spacing: -.02em; color: var(--t-marinho); line-height: 1.05; font-variant-numeric: tabular-nums; } :root .ofp-t .t-indicador.t-destaque .t-valor { font-size: var(--t-fs-numero-grande); } :root .ofp-t .t-indicador .t-ref { font-size: var(--t-fs-md); color: var(--t-texto2); margin: 4px 0 0; } :root .ofp-t .t-indicador .t-ref b { color: var(--t-texto); } :root .ofp-t .t-indicador .t-hoje { display: none; margin: 6px 0 0; font-size: var(--t-fs-md); color: var(--t-conta); } :root .ofp-t.t-ver-hoje .t-indicador .t-hoje { display: block; } :root .ofp-t .t-regua { position: relative; height: 30px; margin: 14px 0 0; } :root .ofp-t .t-regua .t-trilho { position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: var(--t-r-pilula); background: var(--t-sup2); border: 1px solid var(--t-linha); } :root .ofp-t .t-regua .t-cheio { position: absolute; left: 0; top: 13px; height: 6px; width: 100%; border-radius: var(--t-r-pilula); background: var(--t-marinho); transform-origin: left center; transform: scaleX(var(--t-fracao, 0)); } :root .ofp-t .t-regua .t-marco { position: absolute; top: 5px; width: 2px; height: 22px; background: var(--t-texto); border-radius: 2px; left: calc(var(--t-pos, 0) * 100%); box-shadow: 0 0 0 2px var(--t-sup); } /* o contorno da cor do cartão separa o marco da barra preenchida (WCAG 1.4.11) */ :root .ofp-t .t-regua .t-marco::after { content: attr(data-r); position: absolute; top: -4px; font-size: var(--t-fs-2xs); font-weight: 700; color: var(--t-texto2); white-space: nowrap; left: 6px; } :root .ofp-t .t-regua .t-marco.t-a-esquerda::after { left: auto; right: 6px; } /* ----- estados de cada bloco: carregando, erro, vazio ----- */ :root .ofp-t .t-vazio-caixa { display: flex; gap: var(--t-e3); align-items: flex-start; padding: 14px; border: 1.5px dashed var(--t-linha-forte); border-radius: var(--t-r-m); color: var(--t-texto2); } :root .ofp-t .t-vazio-caixa svg { width: 24px; height: 24px; flex: none; color: var(--t-texto2); } :root .ofp-t .t-vazio-caixa b { color: var(--t-texto); } :root .ofp-t .t-erro-caixa { display: flex; gap: var(--t-e3); align-items: flex-start; padding: 14px; border-radius: var(--t-r-m); background: color-mix(in srgb, var(--t-perigo) 9%, var(--t-sup)); border: 1px solid color-mix(in srgb, var(--t-perigo) 35%, transparent); } :root .ofp-t .t-erro-caixa svg { width: 24px; height: 24px; flex: none; color: var(--t-perigo); } :root .ofp-t .t-aviso-caixa { margin: var(--t-e3) 0 0; padding: var(--t-e3) 14px; border-radius: var(--t-r-m); background: var(--t-aviso-fundo); color: var(--t-texto); border: 1px solid color-mix(in srgb, var(--t-aviso) 30%, transparent); } :root .ofp-t .t-aviso-caixa b { color: var(--t-aviso); } /* esqueleto: o brilho anda por transform (não por background-position) */ :root .ofp-t .t-esqueleto { display: grid; gap: 10px; } :root .ofp-t .t-esqueleto i { position: relative; display: block; height: 16px; border-radius: 6px; background: var(--t-sup2); overflow: hidden; } :root .ofp-t .t-esqueleto i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-linha) 70%, transparent), transparent); animation: t-brilho 1.4s ease-in-out infinite; } :root .ofp-t .t-esqueleto i:nth-child(1) { width: 40%; height: 22px; } :root .ofp-t .t-esqueleto i:nth-child(3) { width: 85%; } :root .ofp-t .t-esqueleto i:nth-child(4) { width: 60%; } @keyframes t-brilho { to { transform: translateX(100%); } } /* ----- bloco de tema ----- */ :root .ofp-t .t-bloco { padding: 18px var(--t-e4); margin: var(--t-e4) 0 0; scroll-margin-top: calc(var(--t-topo) + 64px); } @media (min-width: 768px) { :root .ofp-t .t-bloco { padding: 22px var(--t-e5); } } :root .ofp-t .t-bloco-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--t-e2) var(--t-e4); align-items: flex-start; margin: 0 0 var(--t-e3); } :root .ofp-t .t-perg { color: var(--t-texto2); font-size: var(--t-fs-md); margin: 4px 0 0; max-width: 62ch; } :root .ofp-t .t-sub { margin: 18px 0 0; padding: var(--t-e4) 0 0; border-top: 1px solid var(--t-linha); } :root .ofp-t .t-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; } :root .ofp-t .t-sub h3 { margin: 0 0 4px; } :root .ofp-t .t-bloco-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--t-e3) 0 0; } /* ----- lista "o que mudou" ----- */ :root .ofp-t .t-mudou { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--t-e2); } :root .ofp-t .t-mudou li { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--t-e3); align-items: start; padding: var(--t-e3) 14px; background: var(--t-sup); border: 1px solid var(--t-linha); border-radius: var(--t-r-m); margin: 0; } :root .ofp-t .t-mudou time { grid-row: span 2; font-size: var(--t-fs-xs); font-weight: 700; color: var(--t-texto2); min-width: 4.2em; font-variant-numeric: tabular-nums; } :root .ofp-t .t-mudou .t-t { font-weight: 600; } :root .ofp-t .t-mudou .t-m { font-size: var(--t-fs-xs); color: var(--t-texto2); } /* ----- busca única (cabeçalho e Início) ----- */ :root .ofp-t .t-busca { position: relative; } :root .ofp-t .t-busca .t-campo { display: flex; gap: var(--t-e2); flex-wrap: wrap; background: var(--t-sup); border: 1.5px solid var(--t-linha-forte); border-radius: var(--t-r-g); padding: 6px; box-shadow: var(--t-sombra); } :root .ofp-t .t-busca .t-campo:focus-within { border-color: var(--t-marinho); outline: 3px solid color-mix(in srgb, var(--t-marinho) 35%, transparent); } :root .ofp-t .t-busca input[type="search"] { flex: 1 1 220px; min-width: 0; min-height: 48px; border: 0; background: transparent; color: var(--t-texto); font: inherit; font-size: var(--t-fs-lg); padding: 0 var(--t-e3); box-shadow: none; } :root .ofp-t .t-busca input[type="search"]:focus { outline: none; } :root .ofp-t .t-busca input::placeholder { color: var(--t-texto2); opacity: 1; } :root .ofp-t .t-busca .t-bt { flex: 1 1 100%; } @media (min-width: 480px) { :root .ofp-t .t-busca .t-bt { flex: 0 0 auto; } } :root .ofp-t .t-busca .t-ajuda { margin: var(--t-e2) 2px 0; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-busca.t-compacta .t-campo { border-radius: var(--t-r-pilula); padding: 2px 2px 2px 6px; box-shadow: none; } :root .ofp-t .t-busca.t-compacta input[type="search"] { min-height: var(--t-alvo); font-size: var(--t-fs-md); } :root .ofp-t .t-busca.t-compacta .t-bt, :root .ofp-t .t-busca.t-compacta .t-ajuda { display: none; } :root .ofp-t .t-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--t-sup); border: 1px solid var(--t-linha); border-radius: var(--t-r-m); box-shadow: var(--t-sombra); padding: 6px 0; max-height: min(420px, 60vh); overflow: auto; } :root .ofp-t .t-sug[hidden] { display: none; } :root .ofp-t .t-sug .t-gt { padding: var(--t-e2) var(--t-e4) 2px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-texto2); } :root .ofp-t .t-sug [role="option"] { display: flex; justify-content: space-between; gap: var(--t-e3); align-items: center; min-height: var(--t-alvo); padding: var(--t-e2) var(--t-e4); color: var(--t-texto); text-decoration: none; cursor: pointer; } :root .ofp-t .t-sug [role="option"] small { color: var(--t-texto2); font-size: var(--t-fs-xs); text-align: right; } :root .ofp-t .t-sug [role="option"][aria-selected="true"], :root .ofp-t .t-sug [role="option"]:hover { background: var(--t-sup2); } :root .ofp-t .t-sug .t-vazio { padding: 10px var(--t-e4); color: var(--t-texto2); } /* ----- alternância (ex.: "como publicados" × "com valor de hoje") ----- */ :root .ofp-t .t-alterna { display: inline-flex; border: 1.5px solid var(--t-linha-forte); border-radius: var(--t-r-pilula); padding: 3px; background: var(--t-sup2); } :root .ofp-t .t-alterna button { min-height: 40px; padding: 0 14px; border-radius: var(--t-r-pilula); border: 0; background: transparent; color: var(--t-texto); font: inherit; font-weight: 600; font-size: var(--t-fs-sm); cursor: pointer; } :root .ofp-t .t-alterna button[aria-pressed="true"] { background: var(--t-marinho); color: var(--t-sobre-marinho); } /* ----- aviso flutuante (ex.: "link copiado") ----- */ :root .ofp-t .t-aviso-flutuante { position: fixed; left: 50%; bottom: var(--t-e4); transform: translateX(-50%); z-index: 90; max-width: calc(100% - 32px); background: var(--t-texto); color: var(--t-fundo); padding: var(--t-e3) var(--t-e4); border-radius: var(--t-r-m); font-weight: 600; box-shadow: var(--t-sombra); } :root .ofp-t .t-aviso-flutuante[hidden] { display: none; } /* ----- página: trilha, cabeçalho, valores, resumo, temas ----- */ :root .ofp-t.t-pagina { padding: 0 0 48px; } :root .ofp-t .t-trilha { font-size: var(--t-fs-sm); color: var(--t-texto2); padding: 14px 0 0; } :root .ofp-t .t-trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } :root .ofp-t .t-trilha li { margin: 0; } :root .ofp-t .t-trilha li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--t-texto2); } :root .ofp-t .t-trilha a { display: inline-block; padding: 6px 0; } :root .ofp-t .t-mun-cab { padding: 6px 0 var(--t-e4); display: grid; gap: 14px; } /* o título agora é a pergunta com o município (telas-6): os botões descem para baixo dele, em vez de espremer o título */ :root .ofp-t .t-uf { font-size: .5em; font-weight: 700; color: var(--t-texto2); letter-spacing: 0; margin-left: 6px; } :root .ofp-t .t-fatos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: var(--t-e2) 0 0; font-size: var(--t-fs-md); color: var(--t-texto2); } :root .ofp-t .t-mun-acoes { display: flex; flex-wrap: wrap; gap: var(--t-e2); align-items: center; } :root .ofp-t .t-mun-acoes .t-bt { flex: 1 1 auto; } @media (min-width: 900px) { :root .ofp-t .t-mun-acoes .t-bt { flex: none; } } :root .ofp-t .t-valores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-e2) var(--t-e3); margin: 0 0 var(--t-e4); padding: 10px var(--t-e3); border-radius: var(--t-r-m); background: var(--t-sup); border: 1px solid var(--t-linha); font-size: var(--t-fs-md); } :root .ofp-t .t-valores .t-exp { color: var(--t-texto2); font-size: var(--t-fs-sm); flex: 1 1 260px; } :root .ofp-t .t-alterna button[aria-disabled="true"] { color: var(--t-texto2); cursor: not-allowed; } :root .ofp-t .t-resumo { display: grid; gap: var(--t-e3); grid-template-columns: 1fr; } @media (min-width: 640px) { :root .ofp-t .t-resumo { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { :root .ofp-t .t-resumo { grid-template-columns: repeat(4, 1fr); } :root .ofp-t .t-resumo.t-resumo-3 { grid-template-columns: repeat(3, 1fr); } } :root .ofp-t .t-resumo .t-indicador { margin: 0; } :root .ofp-t .t-sub .t-resumo .t-indicador { box-shadow: none; } :root .ofp-t .t-temas { position: sticky; top: 0; z-index: 40; background: var(--t-fundo); border-bottom: 1px solid var(--t-linha); margin: var(--t-e5) 0 0; } :root .ofp-t .t-temas ul { list-style: none; margin: 0 auto; padding: 0 var(--t-e4); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: var(--t-largura); } :root .ofp-t .t-temas ul::-webkit-scrollbar { display: none; } :root .ofp-t .t-temas li { margin: 0; } :root .ofp-t .t-temas a { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--t-e3); color: var(--t-texto2); font-weight: 600; font-size: var(--t-fs-md); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; } :root .ofp-t .t-temas a[aria-current] { color: var(--t-marinho); border-bottom-color: var(--t-marinho); } @media (hover: hover) { :root .ofp-t .t-temas a:hover { color: var(--t-texto); } } /* barras horizontais (valor como publicado; o comprimento é a fração do maior, conta do portal) */ :root .ofp-t .t-barras { display: grid; gap: 10px; margin: var(--t-e2) 0 0; } :root .ofp-t .t-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--t-e3); align-items: baseline; } :root .ofp-t .t-barra-rot { font-weight: 600; font-size: var(--t-fs-md); } :root .ofp-t .t-barra-val { font-size: var(--t-fs-sm); color: var(--t-texto2); text-align: right; } :root .ofp-t .t-barra-trilho { grid-column: 1 / -1; height: 8px; border-radius: var(--t-r-pilula); background: var(--t-sup2); overflow: hidden; } :root .ofp-t .t-barra-cheio { display: block; height: 100%; width: 100%; background: var(--t-marinho); transform-origin: left center; transform: scaleX(var(--t-fracao, 1)); } /* valor negativo (ajuste do FUNDEB): outra cor, e o texto diz "negativo" */ :root .ofp-t .t-barra-neg .t-barra-cheio { background: var(--t-aviso); } /* valor de hoje (IPCA, conta do portal): abaixo do publicado, na cor das contas */ :root .ofp-t .t-hoje-cel { color: var(--t-conta); font-size: var(--t-fs-sm); } :root .ofp-t p.t-hoje { margin: 6px 0 0; color: var(--t-conta); font-size: var(--t-fs-md); } :root .ofp-t .t-valores-nota { margin: calc(-1 * var(--t-e3)) 0 var(--t-e4); } :root .ofp-t .t-sem-hoje { color: var(--t-texto2); } /* fichas em cartão (o cartão inteiro é o link) */ :root .ofp-t .t-fichas { list-style: none; margin: var(--t-e3) 0 0; padding: 0; display: grid; gap: 10px; } @media (min-width: 900px) { :root .ofp-t .t-fichas { grid-template-columns: repeat(3, 1fr); } } :root .ofp-t .t-fichas li { position: relative; padding: 14px; border: 1px solid var(--t-linha); border-radius: var(--t-r-m); background: var(--t-sup); display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; } :root .ofp-t .t-fichas a.t-cobre { font-weight: 700; color: var(--t-texto); text-decoration: none; } :root .ofp-t .t-fichas a.t-cobre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } @media (hover: hover) { :root .ofp-t .t-fichas li:hover { border-color: var(--t-marinho); } } :root .ofp-t .t-situ { font-size: var(--t-fs-sm); font-weight: 600; color: var(--t-texto2); } :root .ofp-t .t-meta { font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-fontes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } :root .ofp-t .t-fontes-lista li { padding: var(--t-e3) 14px; border: 1px solid var(--t-linha); border-radius: var(--t-r-m); background: var(--t-sup); font-size: var(--t-fs-md); margin: 0; } :root .ofp-t .t-fontes-lista li p { font-size: var(--t-fs-sm); color: var(--t-texto2); margin: 4px 0 0; } /* ----- topo do município no celular: o 1º número do resumo na primeira tela (portão do gerente, 19/10) ----- */ :root .ofp-t .t-mun-cab h1 { font-size: clamp(1.6rem, 6vw, 2.5rem); } :root .ofp-t .t-mun-nome { margin: 0 0 6px; } :root .ofp-t .t-mun-nome .t-uf { font-size: inherit; } :root .ofp-t .t-fatos-curtos { margin: 4px 0 0; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-fatos-curtos abbr { text-decoration: none; } :root .ofp-t details.t-sobre { margin: 2px 0 0; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t details.t-sobre summary { display: inline-flex; align-items: center; min-height: var(--t-alvo); color: var(--t-link); font-weight: 600; cursor: pointer; } :root .ofp-t details.t-sobre ul { list-style: none; margin: 0 0 var(--t-e2); padding: 0; display: grid; gap: 4px; } :root .ofp-t details.t-sobre li { margin: 0; } :root .ofp-t .t-mun-acoes .t-bt.t-icone { flex: none; min-width: var(--t-alvo); padding: 0 12px; } :root .ofp-t .t-rot-larga { display: none; } @media (min-width: 640px) { :root .ofp-t .t-rot-larga { display: inline; } } :root .ofp-t .t-mun-acoes .t-bt.t-pequeno:not(.t-icone) { flex: 1 1 auto; } @media (min-width: 640px) { :root .ofp-t .t-mun-acoes .t-bt.t-pequeno:not(.t-icone) { flex: none; } } :root .ofp-t .t-valores { padding: 6px 10px; gap: 6px 10px; margin: 0 0 var(--t-e3); } :root .ofp-t .t-valores .t-alterna button { min-height: 36px; padding: 0 12px; } :root .ofp-t .t-valores details.t-exp { font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-valores details.t-exp { flex: 0 0 auto; } :root .ofp-t .t-valores details.t-exp[open] { flex-basis: 100%; } :root .ofp-t .t-valores details.t-exp summary { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--t-linha-forte); color: var(--t-link); font-weight: 800; cursor: pointer; list-style: none; } :root .ofp-t .t-valores details.t-exp summary::-webkit-details-marker { display: none; } :root .ofp-t .t-valores details.t-exp[open] summary { margin-bottom: 6px; } :root .ofp-t .t-mun-acoes .t-pendente { order: 9; flex-basis: 100%; } /* só na bancada: não empurra os botões */ :root .ofp-t .t-resumo .t-indicador.t-destaque .t-valor { font-size: var(--t-fs-numero); } :root .ofp-t .t-valores details.t-exp p { margin: 0 0 6px; } @media (max-width: 639px) { :root .ofp-t .t-mun-cab { gap: 8px; padding-bottom: var(--t-e3); } :root .ofp-t .t-trilha { padding-top: 8px; } } /* ----- Início: hero, mapa como porta, seções ----- */ :root .ofp-t .t-hero { padding: 28px 0 8px; } :root .ofp-t .t-grade-hero { display: grid; gap: 20px; } @media (min-width: 1000px) { :root .ofp-t .t-grade-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--t-e6); align-items: start; } } :root .ofp-t .t-sobrelinha { font-size: var(--t-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-texto2); } :root .ofp-t .t-hero h1 { font-size: clamp(1.75rem, 6.4vw, 2.6rem); margin: var(--t-e2) 0 10px; } :root .ofp-t .t-hero h1 em { font-style: normal; color: var(--t-marinho); } :root .ofp-t .t-lead { color: var(--t-texto2); font-size: var(--t-fs-lg); max-width: 40ch; margin: 0 0 20px; } :root .ofp-t .t-atalhos { display: flex; gap: var(--t-e2); margin: 14px 0 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } :root .ofp-t .t-atalhos::-webkit-scrollbar { display: none; } :root .ofp-t .t-atalhos a:focus-visible { outline-offset: -3px; } /* a faixa rola: o contorno por fora sairia cortado */ :root .ofp-t .t-atalhos a { flex: none; display: inline-flex; align-items: center; min-height: var(--t-alvo); padding: 0 var(--t-e4); border-radius: var(--t-r-pilula); border: 1px solid var(--t-linha); background: var(--t-sup); color: var(--t-texto); font-weight: 600; font-size: var(--t-fs-md); text-decoration: none; } @media (hover: hover) { :root .ofp-t .t-atalhos a:hover { border-color: var(--t-marinho); } } :root .ofp-t .t-regra-curta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: var(--t-e4) 0 0; padding: 0; list-style: none; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-regra-curta li { display: flex; align-items: center; gap: 6px; margin: 0; } :root .ofp-t .t-regra-curta svg { width: 16px; height: 16px; color: var(--t-ok); } :root .ofp-t .t-mapa-porta { padding: var(--t-e4); } :root .ofp-t .t-mapa-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--t-e3); margin: 0 0 10px; } :root .ofp-t .t-mapa-cab p { color: var(--t-texto2); font-size: var(--t-fs-sm); } :root .ofp-t .t-camadas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--t-e4)) 10px; padding: 0 var(--t-e4) 2px; border: 0; min-width: 0; } :root .ofp-t .t-camadas::-webkit-scrollbar { display: none; } :root .ofp-t .t-camadas label { flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--t-alvo); padding: 0 14px; border-radius: var(--t-r-pilula); border: 1px solid var(--t-linha); background: var(--t-sup2); color: var(--t-texto); font-size: var(--t-fs-sm); font-weight: 600; cursor: pointer; } :root .ofp-t .t-camadas input { position: absolute; opacity: 0; width: 1px; height: 1px; } :root .ofp-t .t-camadas label:has(input:checked) { background: var(--t-marinho); border-color: var(--t-marinho); color: var(--t-sobre-marinho); } :root .ofp-t .t-camadas label:has(input:focus-visible) { outline: 3px solid var(--t-marinho); outline-offset: 2px; } :root .ofp-t .t-camadas label.t-pendente-cam { border-style: dashed; color: var(--t-texto2); background: transparent; cursor: not-allowed; } :root .ofp-t .t-mapa-caixa { position: relative; border-radius: var(--t-r-m); background: var(--t-sup2); overflow: hidden; } :root .ofp-t .t-mapa-svg { display: block; width: 100%; height: auto; } :root .ofp-t .t-mapa-svg path { stroke: var(--t-m-borda); stroke-width: 1.2; cursor: pointer; transition: opacity var(--t-dur-curta) var(--t-curva); } :root .ofp-t .t-mapa-svg path.t-k0, :root .ofp-t .t-escala i.t-k0 { fill: var(--t-m0); background: var(--t-m0); } :root .ofp-t .t-mapa-svg path.t-k1, :root .ofp-t .t-escala i.t-k1 { fill: var(--t-m1); background: var(--t-m1); } :root .ofp-t .t-mapa-svg path.t-k2, :root .ofp-t .t-escala i.t-k2 { fill: var(--t-m2); background: var(--t-m2); } :root .ofp-t .t-mapa-svg path.t-k3, :root .ofp-t .t-escala i.t-k3 { fill: var(--t-m3); background: var(--t-m3); } :root .ofp-t .t-mapa-svg path.t-k4, :root .ofp-t .t-escala i.t-k4 { fill: var(--t-m4); background: var(--t-m4); } :root .ofp-t .t-mapa-svg path.t-sem { fill: url(#t-hachura); } :root .ofp-t .t-escala i.t-sem { background: repeating-linear-gradient(45deg, var(--t-sup2) 0 3px, var(--t-linha-forte) 3px 4px); } :root .ofp-t .t-hachura-fundo { fill: var(--t-sup2); } :root .ofp-t .t-hachura-linha { stroke: var(--t-linha-forte); stroke-width: 1.5; } :root .ofp-t .t-mapa-svg path.t-sel { stroke: var(--t-m-sel); stroke-width: 3.5; paint-order: stroke; } @media (hover: hover) { :root .ofp-t .t-mapa-svg path:hover { opacity: .82; } } :root .ofp-t .t-legenda-mapa { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 0; font-size: var(--t-fs-xs); color: var(--t-texto2); } :root .ofp-t .t-escala { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--t-linha-forte); } :root .ofp-t .t-escala i { display: block; width: 22px; height: 12px; } :root .ofp-t .t-mapa-escolha { display: grid; gap: 10px; margin: var(--t-e3) 0 0; } :root .ofp-t .t-mapa-escolha label { display: block; font-size: var(--t-fs-sm); font-weight: 700; margin: 0 0 4px; } :root .ofp-t select.t-campo-sel { width: 100%; min-height: 48px; border-radius: var(--t-r-m); border: 1.5px solid var(--t-linha-forte); background: var(--t-sup); color: var(--t-texto); font: inherit; padding: 0 var(--t-e3); } :root .ofp-t .t-mapa-ficha { margin: var(--t-e3) 0 0; padding: var(--t-e3) 14px; border-radius: var(--t-r-m); background: var(--t-sup2); display: flex; flex-wrap: wrap; gap: var(--t-e2) var(--t-e4); align-items: center; justify-content: space-between; } :root .ofp-t .t-mapa-ficha b { font-size: var(--t-fs-lg); } :root .ofp-t .t-mapa-ficha p { font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t details.t-lista-alt { margin: 10px 0 0; } :root .ofp-t details.t-lista-alt summary { min-height: var(--t-alvo); display: flex; align-items: center; font-weight: 600; color: var(--t-link); cursor: pointer; } :root .ofp-t .t-rolagem-alta { max-height: 280px; overflow: auto; border: 1px solid var(--t-linha); border-radius: var(--t-r-p); } :root .ofp-t .t-secao { padding: 28px 0 0; } :root .ofp-t .t-secao-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px var(--t-e4); margin: 0 0 var(--t-e3); } :root .ofp-t .t-secao-cab p { color: var(--t-texto2); font-size: var(--t-fs-md); } :root .ofp-t .t-novas { display: grid; gap: var(--t-e3); grid-template-columns: 1fr; } @media (min-width: 640px) { :root .ofp-t .t-novas { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { :root .ofp-t .t-novas { grid-template-columns: repeat(4, 1fr); } } :root .ofp-t .t-nova { padding: 14px var(--t-e4); display: flex; flex-direction: column; gap: 6px; min-width: 0; } :root .ofp-t .t-nova .t-de { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-texto2); } :root .ofp-t .t-nova h3 { font-size: var(--t-fs-base); } :root .ofp-t .t-nova p { font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-nova .t-onde { font-size: var(--t-fs-xs); color: var(--t-texto); } :root .ofp-t .t-nova .t-selo { align-self: flex-start; margin-top: auto; } /* ----- MOVIMENTO: só transform e opacity ----- */ /* revelação ao rolar: o JS põe .t-revela (estado inicial) e troca para .t-revelado; sem JS, nada fica escondido */ :root .ofp-t.t-movimento .t-revela { opacity: 0; transform: translateY(var(--t-revela-deslocamento)); } :root .ofp-t.t-movimento .t-revela.t-revelado { opacity: 1; transform: none; transition: opacity var(--t-dur) var(--t-curva), transform var(--t-dur) var(--t-curva); transition-delay: var(--t-atraso, 0ms); } /* barras e réguas que "se desenham": de scaleX(0) até a fração */ :root .ofp-t.t-movimento .t-desenha { transform: scaleX(0); } :root .ofp-t.t-movimento .t-desenha.t-desenhado { transform: scaleX(var(--t-fracao, 1)); transition: transform var(--t-dur-longa) var(--t-curva); transition-delay: var(--t-atraso, 0ms); } /* gráfico de linha que se desenha: um retângulo de recorte que cresce (transform) */ :root .ofp-t.t-movimento .t-recorte-desenha { transform: scaleX(0); transform-origin: left center; transform-box: fill-box; } :root .ofp-t.t-movimento .t-recorte-desenha.t-desenhado { transform: scaleX(1); transition: transform var(--t-dur-longa) var(--t-curva); } @media (prefers-reduced-motion: reduce) { :root .ofp-t *, :root .ofp-t *::before, :root .ofp-t *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } :root .ofp-t .t-revela { opacity: 1 !important; transform: none !important; } :root .ofp-t .t-desenha { transform: scaleX(var(--t-fracao, 1)) !important; } :root .ofp-t .t-recorte-desenha { transform: none !important; } } @media print { :root .ofp-t .t-bloco-acoes, :root .ofp-t .t-aviso-flutuante, :root .ofp-t .t-alterna { display: none !important; } :root .ofp-t { background: #fff; color: #000; } :root .ofp-t .t-cartao { box-shadow: none; border-color: #999; } :root .ofp-t .t-revela { opacity: 1 !important; transform: none !important; } } @media (forced-colors: active) { :root .ofp-t .t-selo, :root .ofp-t .t-ex, :root .ofp-t .t-bt { border: 1px solid CanvasText; } } /* ---------------------------------------------------------------------------------------------- 3. direções */ /* As direções A, B e C são PROVISÓRIAS até o designer entregar as três propostas e o André escolher. Elas existem para provar a troca: só tokens e superfícies mudam; nenhuma tela é tocada. */ /* ----- telas-2 (consultor e dados, 19/10/2026; D14): selo "valor a conferir", marca-texto, pontos dos pares, capa e faixa ----- */ :root .ofp-t .t-a-conferir { background: var(--t-sup2); color: var(--t-texto2); border: 1px dashed var(--t-linha-forte); font-weight: 600; white-space: nowrap; } :root .ofp-t .t-marca-texto { position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap; padding: 0; } :root .ofp-t .t-marca-texto::before { content: ""; position: absolute; z-index: -1; left: -.12em; right: -.12em; top: .14em; bottom: .02em; background: var(--t-marca-texto); border-radius: 3px; transform-origin: left center; transform: skewX(-8deg); } :root .ofp-t.t-movimento .t-revela .t-marca-texto::before { transition: transform .6s var(--t-curva) .35s; } :root .ofp-t.t-movimento .t-revela:not(.t-revelado) .t-marca-texto::before { transform: skewX(-8deg) scaleX(0); } :root .ofp-t .t-pontos { margin: 10px 0 2px; } :root .ofp-t .t-tira { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; } :root .ofp-t .t-tira .t-eixo { stroke: var(--t-linha-forte); stroke-width: 1; } :root .ofp-t .t-tira .t-med { stroke: var(--t-texto); stroke-width: 1.6; stroke-dasharray: 3 2; } :root .ofp-t .t-tira .t-par { fill: var(--t-ponto-par); transform-box: fill-box; transform-origin: center; } :root .ofp-t .t-tira .t-este { fill: var(--t-marinho); stroke: var(--t-sup); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; } :root .ofp-t.t-movimento .t-revela .t-tira .t-par { transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i) * 14ms + 120ms); } :root .ofp-t.t-movimento .t-revela .t-tira .t-este { transition: opacity .3s ease .5s, transform .4s cubic-bezier(.3, 1.5, .5, 1) .5s; } :root .ofp-t.t-movimento .t-revela:not(.t-revelado) .t-tira .t-par, :root .ofp-t.t-movimento .t-revela:not(.t-revelado) .t-tira .t-este { opacity: 0; transform: scale(0); } :root .ofp-t .t-pontos-leg { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; font-size: var(--t-fs-2xs); color: var(--t-texto2); } :root .ofp-t .t-pontos-leg span { display: inline-flex; align-items: center; gap: 5px; } :root .ofp-t .t-pontos-leg i { display: inline-block; } :root .ofp-t .t-lg-este { width: 11px; height: 11px; border-radius: 50%; background: var(--t-marinho); } :root .ofp-t .t-lg-par { width: 8px; height: 8px; border-radius: 50%; background: var(--t-ponto-par); } :root .ofp-t .t-lg-med { width: 0; height: 12px; border-left: 2px dashed var(--t-texto); } :root .ofp-t .t-legenda-regua { margin: 6px 0 0; font-size: var(--t-fs-xs); color: var(--t-texto2); } :root .ofp-t .t-ref.t-pequeno, :root .ofp-t p.t-pequeno { font-size: var(--t-fs-xs); } :root .ofp-t .t-por-hab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; } :root .ofp-t details.t-exp-texto { display: inline; font-size: var(--t-fs-xs); } :root .ofp-t details.t-exp-texto summary { display: inline; color: var(--t-link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } :root .ofp-t details.t-exp-texto[open] { display: block; flex-basis: 100%; } :root .ofp-t details.t-exp-texto p { margin: 4px 0 0; } :root .ofp-t .t-sobrelinha { margin: 0 0 var(--t-e3); font-size: var(--t-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-texto2); } :root .ofp-t .t-marca-andre { display: block; margin: 8px 0; } /* a capa: o cartão do número ganha a faixa da marca (azul-marinho → azul) no alto */ :root .ofp-t .t-capa { position: relative; overflow: hidden; } :root .ofp-t .t-capa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--t-marinho), var(--t-marca)); } /* o painel: os indicadores na faixa escura (onde se explora) */ :root .ofp-t .t-painel { margin-top: var(--t-e5); padding: var(--t-e5) 0 var(--t-e6); } :root .ofp-t .t-painel .t-resumo { margin: 0; } :root .ofp-t .t-faixa-curta { padding-top: var(--t-e4); padding-bottom: var(--t-e3); } :root .ofp-t .t-faixa-curta .t-mudou li { padding-block: 6px; } @media (min-width: 900px) { :root .ofp-t .t-resumo.t-resumo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { :root .ofp-t .t-marca-texto::before, :root .ofp-t .t-tira .t-par, :root .ofp-t .t-tira .t-este { transition: none !important; transform: skewX(-8deg) !important; opacity: 1 !important; } :root .ofp-t .t-tira .t-par, :root .ofp-t .t-tira .t-este { transform: none !important; } } @media (forced-colors: active) { :root .ofp-t .t-marca-texto::before { background: Highlight; opacity: .35; } :root .ofp-t .t-tira .t-este { fill: Highlight; } } @media print { :root .ofp-t .t-faixa-escura { background: #fff !important; color: #000 !important; } } /* ----- Início novo, telas-2: dois números sem total, antes do mapa; o mapa na faixa (preso ao lado no computador) ----- */ :root .ofp-t .t-hero-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--t-e3); } :root .ofp-t .t-hero-topo .t-sobrelinha { margin: 0; } :root .ofp-t .t-capa-inicio { margin-top: var(--t-e5); } :root .ofp-t .t-capa-grade { display: grid; gap: var(--t-e4); margin-bottom: var(--t-e3); } @media (min-width: 900px) { :root .ofp-t .t-capa-grade { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; } } @media (min-width: 900px) { :root .ofp-t .t-capa-grade.t-capa-igual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } :root .ofp-t .t-capa-igual > .t-indicador { display: flex; flex-direction: column; } :root .ofp-t .t-capa-igual > .t-indicador .t-fonte { margin-top: auto; } :root .ofp-t .t-capa-igual > .t-indicador .t-ref:last-of-type { margin-bottom: var(--t-e3); } :root .ofp-t .t-capa-ler { margin-top: var(--t-e2); } :root .ofp-t .t-fontes-tit { font-size: var(--t-fs-md); margin: var(--t-e3) 0 var(--t-e2); } :root .ofp-t .t-fontes-cartoes { list-style: none; margin: 0 0 var(--t-e3); padding: 0; display: grid; gap: var(--t-e2); } @media (min-width: 700px) { :root .ofp-t .t-fontes-cartoes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } :root .ofp-t .t-fontes-cartoes li { border: 1px solid var(--t-linha); border-radius: var(--t-r, 10px); padding: var(--t-e3); background: var(--t-sup); } :root .ofp-t .t-fontes-cartoes p { margin: 4px 0 0; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-mapa-faixa .t-mapa-cab h2 { color: var(--t-texto); } :root .ofp-t .t-mapa-faixa .t-mapa-cab p { color: var(--t-texto2); margin: 4px 0 0; } :root .ofp-t .t-mapa-grade { display: grid; gap: var(--t-e4); margin-top: var(--t-e3); } @media (min-width: 1000px) { :root .ofp-t .t-mapa-grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } :root .ofp-t .t-mapa-col { position: sticky; top: calc(var(--t-topo) + 8px); } } :root .ofp-t .t-mapa-grade > * { min-width: 0; } :root .ofp-t [hidden] { display: none !important; } :root .ofp-t .t-mapa-svg path.t-nenhuma, :root .ofp-t .t-escala i.t-nenhuma { fill: var(--t-sup); background: var(--t-sup); } :root .ofp-t .t-mapa-svg path.t-nenhuma { stroke: var(--t-linha-forte); stroke-dasharray: 3 2; } :root .ofp-t .t-escala i.t-nenhuma { outline: 1px dashed var(--t-linha-forte); outline-offset: -1px; } :root .ofp-t .t-maiores h3 { margin: var(--t-e4) 0 var(--t-e2); font-size: var(--t-fs-sm); color: var(--t-texto2); font-weight: 700; } :root .ofp-t .t-maiores ol { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: var(--t-fs-sm); } :root .ofp-t .t-mapa-faixa .t-mapa-ficha { background: var(--t-sup); border: 1px solid var(--t-linha); } /* ---- camada: ofp-direcao ---- */ /* A · editorial: muito respiro, cartões sem sombra, números como manchete */ :root[data-ofp-direcao="a"] .ofp-t { --t-sombra: none; --t-r-g: 6px; --t-r-m: 6px; --t-fs-numero: clamp(2rem, 8vw, 2.75rem); --t-fs-numero-grande: clamp(2.4rem, 10vw, 3.5rem); --t-espaco-letra-titulo: -.03em; --t-dur: 640ms; } :root[data-ofp-direcao="a"] .ofp-t .t-cartao { border-width: 0 0 1px; border-radius: 0; background: transparent; } /* B · painel escuro: o escuro vem por padrão (o leitor ainda pode escolher claro), números em destaque, curva mais viva */ :root[data-ofp-direcao="b"]:not([data-ofp-tema="claro"]) .ofp-t { --t-fundo: #070D18; --t-sup: #0E1626; --t-sup2: #15213A; --t-texto: #E9EEF6; --t-texto2: #AEB9CB; --t-linha: #22314C; --t-linha-forte: #6B7C99; --t-marinho: #8DB8F7; --t-marca: #6FA8F0; --t-link: #A9C8F7; --t-sobre-marinho: #070D18; --t-conta: #5FD0B8; --t-conta-fundo: #0D2724; --t-aviso: #F3C57A; --t-aviso-fundo: #2A2011; --t-ok: #6FD49A; --t-ok-fundo: #0F2619; --t-perigo: #FF8A80; --t-restrito: #C9B6FF; --t-restrito-fundo: #211A38; --t-sup-fundo: #1A2438; --t-ex: #FFC9A3; --t-ex-fundo: #3A2114; --t-marca-texto: #5C480C; --t-ponto-par: #8A98B3; --t-m0: #16233A; --t-m1: #213C66; --t-m2: #2D5A98; --t-m3: #4F84CC; --t-m4: #9CC0F5; --t-m-borda: #070D18; --t-m-sel: #FF8A5C; --t-s-mat: #0A1120; --t-s-mat-fundo: #8DBBFA; --t-s-ofi: #A9C8F7; --t-s-ofi-fundo: #172339; --t-s-imp: #C3CCDA; --t-s-imp-fundo: #1C2638; --t-s-aut: #5FD0B8; --t-s-aut-fundo: #0F2A27; --t-s-rel: #6FD49A; --t-s-rel-fundo: #10281B; --t-s-hip: #F3C57A; --t-s-par: #F3C57A; --t-s-ambar-fundo: #2B2112; --t-s-pro: #8DBBFA; --t-s-ext: #A8B4C7; --t-s-neutro-fundo: #101A2D; --t-c-obras: #8DBBFA; --t-c-contratos: #5FC3D4; --t-c-equip: #A8B4C7; --t-c-demandas: #F3C57A; --t-c-mapa-fundo: #121B2C; --t-v0: #1E2436; --t-v1: #3A4160; --t-v2: #6E7596; --t-v3: #B7BCD6; --t-sombra: 0 0 0 1px rgba(141, 184, 247, .06), 0 10px 30px -14px rgba(0, 0, 0, .8); color-scheme: dark; } :root[data-ofp-direcao="b"] .ofp-t { --t-curva: cubic-bezier(.16, 1, .3, 1); --t-dur-longa: 1100ms; --t-peso-numero: 700; } /* C · híbrido ("papel e mesa", escolhida pelo André, D14): claro onde se lê (a capa, as obras, as fontes); a faixa azul-marinho, sempre escura, onde se explora (o mapa e os indicadores). Tokens de design/direcao_C (fonte/extra.css). */ :root[data-ofp-direcao="c"] .ofp-t, :root[data-ofp-direcao="c"] .ofp-tk { --t-fundo: #F5F7FB; --t-sup: #FFFFFF; --t-sup2: #EDF2F9; --t-texto: #121A2A; --t-texto2: #485366; --t-linha: #D6DCE6; --t-linha-forte: #758299; --t-marinho: #0F3B82; --t-link: #1B4C9A; --t-conta: #0B6656; --t-conta-fundo: #E1F2ED; --t-r-g: 14px; --t-m0: #DCE5F3; --t-m1: #AEC4E8; --t-m2: #6D97D5; --t-m3: #2F68BD; --t-m4: #0F3B82; --t-sombra: 0 1px 2px rgba(18, 26, 42, .06), 0 8px 24px -12px rgba(15, 59, 130, .2); } @media (prefers-color-scheme: dark) { :root[data-ofp-direcao="c"]:not([data-ofp-tema="claro"]) .ofp-t { --t-fundo: #0A1120; --t-sup: #101A2D; --t-sup2: #172339; --t-texto: #E7ECF4; --t-texto2: #A8B4C7; --t-linha: #24324C; --t-linha-forte: #6A7B98; --t-marinho: #8DBBFA; --t-link: #A9C8F7; --t-conta: #5FD0B8; --t-conta-fundo: #0F2A27; --t-m0: #13213A; --t-m1: #1D3A66; --t-m2: #2A5A9C; --t-m3: #4C86D6; --t-m4: #A5CBFF; } } :root[data-ofp-direcao="c"][data-ofp-tema="escuro"] .ofp-t { --t-fundo: #0A1120; --t-sup: #101A2D; --t-sup2: #172339; --t-texto: #E7ECF4; --t-texto2: #A8B4C7; --t-linha: #24324C; --t-linha-forte: #6A7B98; --t-marinho: #8DBBFA; --t-link: #A9C8F7; --t-conta: #5FD0B8; --t-conta-fundo: #0F2A27; --t-m0: #13213A; --t-m1: #1D3A66; --t-m2: #2A5A9C; --t-m3: #4C86D6; --t-m4: #A5CBFF; } /* a faixa: sempre escura, também no tema claro; no escuro, distingue-se pelo azul-marinho e pelo brilho */ :root[data-ofp-direcao="c"] .ofp-t .t-faixa-escura, :root:not([data-ofp-direcao]) .ofp-t .t-faixa-escura { --t-fundo: #0B1730; --t-sup: #11213F; --t-sup2: #182B4E; --t-texto: #E7ECF4; --t-texto2: #A8B4C7; --t-linha: #263B62; --t-linha-forte: #6A7B98; --t-marinho: #8DBBFA; --t-marca: #6FA8F0; --t-link: #A9C8F7; --t-sobre-marinho: #08111F; --t-conta: #5FD0B8; --t-conta-fundo: #0F2A27; --t-aviso: #F3C57A; --t-aviso-fundo: #2B2112; --t-ok: #74D7A0; --t-ok-fundo: #10281B; --t-ex: #FFC9A3; --t-ex-fundo: #3A2114; --t-m0: #24467A; --t-m1: #2F5C9A; --t-m2: #4C86D6; --t-m3: #7FB0F0; --t-m4: #A5CBFF; --t-m-borda: #0B1730; --t-m-sel: #FFB454; --t-marca-texto: #5C480C; --t-ponto-par: #8A98B3; --t-s-mat: #0A1120; --t-s-mat-fundo: #8DBBFA; --t-s-ofi: #A9C8F7; --t-s-ofi-fundo: #172339; --t-s-imp: #C3CCDA; --t-s-imp-fundo: #1C2638; --t-s-aut: #5FD0B8; --t-s-aut-fundo: #0F2A27; --t-s-rel: #6FD49A; --t-s-rel-fundo: #10281B; --t-s-hip: #F3C57A; --t-s-par: #F3C57A; --t-s-ambar-fundo: #2B2112; --t-s-pro: #8DBBFA; --t-s-ext: #A8B4C7; --t-s-neutro-fundo: #101A2D; --t-c-obras: #8DBBFA; --t-c-contratos: #5FC3D4; --t-c-equip: #A8B4C7; --t-c-demandas: #F3C57A; --t-c-mapa-fundo: #121B2C; --t-v0: #1E2436; --t-v1: #3A4160; --t-v2: #6E7596; --t-v3: #B7BCD6; --t-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7); color-scheme: dark; background: var(--t-fundo); color: var(--t-texto); border-block: 1px solid var(--t-linha); background-image: radial-gradient(900px 420px at 15% 0, rgba(47, 126, 216, .22), transparent 70%); } :root[data-ofp-direcao="c"] .ofp-t .t-faixa-escura .t-cartao, :root:not([data-ofp-direcao]) .ofp-t .t-faixa-escura .t-cartao { background: var(--t-sup); border-color: var(--t-linha); } /* P · painel (Legislativo, 2.0): derivada da C, clara por padrão, mais densa; a barra lateral fica sempre escura (decisão do André, 29/10/2026). Status sempre por forma e palavra; nunca vermelho para contrato, prazo ou demanda (03_IDENTIDADE_VISUAL.md §3.3). */ :root[data-ofp-direcao="p"] .ofp-t, :root[data-ofp-direcao="p"] .ofp-tk { --t-fundo: #F5F7FB; --t-sup: #FFFFFF; --t-sup2: #EDF2F9; --t-texto: #121A2A; --t-texto2: #485366; --t-linha: #D6DCE6; --t-linha-forte: #758299; --t-marinho: #0F3B82; --t-link: #1B4C9A; --t-r-g: 10px; --t-r-m: 8px; --t-sombra: 0 1px 2px rgba(18, 26, 42, .06); --t-fs-base: .9375rem; --t-fs-h1: 1.5rem; --t-fs-h2: 1.125rem; --t-fs-h3: .9375rem; --t-fs-numero: 1.75rem; --t-fs-numero-grande: 2rem; --t-peso-numero: 700; --t-espaco-letra-titulo: -.01em; --t-lateral: #0B1730; --t-lateral-texto: #E7ECF4; --t-lateral-texto2: #A8B4C7; --t-lateral-ativo: #8DBBFA; --t-lateral-ativo-texto: #08111F; --t-zebra: #F5F7FB; --t-linha-tabela: 36px; } @media (prefers-color-scheme: dark) { :root[data-ofp-direcao="p"]:not([data-ofp-tema="claro"]) .ofp-t { --t-fundo: #0A1120; --t-sup: #101A2D; --t-sup2: #172339; --t-texto: #E7ECF4; --t-texto2: #A8B4C7; --t-linha: #24324C; --t-linha-forte: #6A7B98; --t-marinho: #8DBBFA; --t-link: #A9C8F7; --t-zebra: #0E1727; } } :root[data-ofp-direcao="p"][data-ofp-tema="escuro"] .ofp-t { --t-fundo: #0A1120; --t-sup: #101A2D; --t-sup2: #172339; --t-texto: #E7ECF4; --t-texto2: #A8B4C7; --t-linha: #24324C; --t-linha-forte: #6A7B98; --t-marinho: #8DBBFA; --t-link: #A9C8F7; --t-zebra: #0E1727; } /* ---------------------------------------------------------------------------------------------- 4. sanfona e resumo executivo */ /* Escolha do André (P2, 20/10/2026), sobre o protótipo do designer (design/organizacao/P2_sanfona.html), com os tokens das telas. */ /* o índice "Nesta página": no celular, uma barra presa no alto que abre e fecha; no computador, fixo à direita das folhas */ :root .ofp-t .t-indice { position: sticky; top: 0; z-index: 40; background: var(--t-fundo); border-bottom: 1px solid var(--t-linha); margin: var(--t-e4) calc(-1 * var(--t-e4)) 0; padding: 0 var(--t-e4); } :root .ofp-t .t-indice-cab { display: none; } :root .ofp-t .t-folha, :root .ofp-t .t-resumo-exec { scroll-margin-top: 64px; } /* a folha aberta pelo índice não fica embaixo da barra presa */ :root .ofp-t .t-indice-bt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; color: var(--t-texto); font: inherit; text-align: left; cursor: pointer; } :root .ofp-t .t-indice-tit { font-weight: 800; } :root .ofp-t .t-indice-atual { flex: 1; min-width: 0; color: var(--t-texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root .ofp-t .t-indice-atual::before { content: "· "; } :root .ofp-t .t-indice-bt[aria-expanded="true"] .t-folha-seta { transform: rotate(180deg); } :root .ofp-t .t-indice-caixa { display: none; padding: 0 0 var(--t-e3); } :root .ofp-t .t-indice.t-aberto .t-indice-caixa { display: block; } :root .ofp-t .t-indice-caixa ol { list-style: none; margin: 0; padding: 0; counter-reset: folha; } :root .ofp-t .t-indice-caixa li { counter-increment: folha; margin: 0; } :root .ofp-t .t-indice-caixa a { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); align-items: baseline; column-gap: 6px; min-height: 44px; padding: 8px 10px; border-radius: var(--t-r-m); color: var(--t-texto); text-decoration: none; } :root .ofp-t .t-indice-caixa a::before { content: counter(folha) "."; font-weight: 800; color: var(--t-marinho); } :root .ofp-t .t-indice-caixa a[aria-current] { background: var(--t-sup2); } :root .ofp-t .t-indice-rot { font-weight: 700; } :root .ofp-t .t-indice-conta, :root .ofp-t .t-indice .t-folha-estado { grid-column: 2; } :root .ofp-t .t-indice-conta { color: var(--t-texto2); } :root .ofp-t .t-indice .t-folha-estado { color: var(--t-aviso); font-weight: 700; } :root .ofp-t .t-indice-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } @media (min-width: 1100px) { :root .ofp-t .t-sanf-grade { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--t-e4); align-items: start; } :root .ofp-t .t-sanf-grade > .t-sanf-folhas { grid-column: 1; grid-row: 1; } :root .ofp-t .t-sanf-grade > .t-indice { grid-column: 2; grid-row: 1; top: calc(var(--t-topo, 0px) + 16px); margin: var(--t-e3) 0 0; padding: var(--t-e3); border: 1px solid var(--t-linha); border-radius: var(--t-r-g); background: var(--t-sup); } :root .ofp-t .t-indice-cab { display: block; margin: 0 0 6px; font-weight: 800; } :root .ofp-t .t-folha, :root .ofp-t .t-resumo-exec { scroll-margin-top: 16px; } :root .ofp-t .t-indice-bt { display: none; } :root .ofp-t .t-indice-caixa { display: block; padding: 0; } } :root .ofp-t .t-folha { background: var(--t-sup); border: 1px solid var(--t-linha); border-radius: var(--t-r-g); margin: var(--t-e3) 0 0; overflow: clip; } :root .ofp-t .t-folha-h { margin: 0; font-size: 1rem; line-height: 1.2; } :root .ofp-t .t-folha-h button, :root .ofp-t .t-folha-fixa { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; width: 100%; min-height: 64px; padding: 12px var(--t-e4); border: 0; background: none; color: var(--t-texto); font: inherit; text-align: left; } :root .ofp-t .t-folha-h button { cursor: pointer; } :root .ofp-t .t-folha-n { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--t-marinho); color: var(--t-sobre-marinho); font-size: .875rem; font-weight: 800; } :root .ofp-t .t-folha-rot { flex: 1 1 160px; min-width: 0; font-size: clamp(1.15rem, 4.2vw, 1.35rem); font-weight: 800; } :root .ofp-t .t-folha-sempre { font-size: .75rem; font-weight: 700; color: var(--t-texto2); padding: 2px 10px; border-radius: 999px; background: var(--t-sup2); } :root .ofp-t .t-folha-estado { font-size: .8125rem; font-weight: 700; color: var(--t-aviso); } :root .ofp-t .t-folha-seta { flex: none; margin-left: auto; font-size: 1.1rem; color: var(--t-marinho); transition: transform .25s ease; } :root .ofp-t .t-folha-h button[aria-expanded="true"] .t-folha-seta { transform: rotate(180deg); } @media (hover: hover) { :root .ofp-t .t-folha-h button:hover .t-folha-rot { color: var(--t-marinho); } } :root .ofp-t .t-folha-corpo { padding: 0 var(--t-e4) var(--t-e4); } :root .ofp-t .t-folha-corpo[hidden="until-found"] { padding: 0; } :root .ofp-t .t-folha-corpo > .t-faixa-escura { margin-left: calc(-1 * var(--t-e4)); margin-right: calc(-1 * var(--t-e4)); } :root .ofp-t .t-resumo-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: var(--t-e4) 0 var(--t-e3); } :root .ofp-t .t-resumo-acao small { color: var(--t-texto2); } :root .ofp-t .t-resumo-exec { border-left: 4px solid var(--t-conta); margin: var(--t-e3) 0; } :root .ofp-t .t-resumo-exec h3 { margin: var(--t-e3) 0 var(--t-e2); } :root .ofp-t .t-res-frases { padding-left: 1.4em; } :root .ofp-t .t-res-frases li { margin: 0 0 8px; } :root .ofp-t .t-res-nota, :root .ofp-t .t-res-folha { font-size: var(--t-fs-sm); white-space: nowrap; } :root .ofp-t .t-res-fontes { padding-left: 1.6em; font-size: var(--t-fs-sm); color: var(--t-texto2); overflow-wrap: anywhere; } @media print { :root .ofp-t .t-folha-corpo[hidden] { display: block !important; content-visibility: visible !important; padding: 0 var(--t-e4) var(--t-e4) !important; } :root .ofp-t .t-indice, :root .ofp-t .t-folha-seta, :root .ofp-t .t-resumo-acao { display: none !important; } /* "Baixar PDF" do resumo: só o resumo na folha */ html.t-imprime-resumo body * { visibility: hidden !important; } html.t-imprime-resumo #resumo-executivo, html.t-imprime-resumo #resumo-executivo * { visibility: visible !important; } html.t-imprime-resumo #resumo-executivo { position: absolute; left: 0; top: 0; width: 100%; border: 0; } html.t-imprime-resumo #resumo-executivo .t-bloco-acoes { display: none !important; } } /* ---------------------------------------------------------------------------------------------- 5. página do Estado (telas-7) */ :root .ofp-t .t-ir-mun { display: grid; gap: 4px; max-width: 420px; margin: 0 0 var(--t-e3); font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-munis { list-style: none; margin: var(--t-e3) 0 0; padding: 0; display: grid; gap: 6px var(--t-e3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } :root .ofp-t .t-munis li { margin: 0; display: flex; flex-direction: column; min-height: 44px; justify-content: center; } :root .ofp-t .t-munis li[hidden] { display: none; } :root .ofp-t .t-munis small { color: var(--t-texto2); } :root .ofp-t #e-municipios label { display: block; margin: var(--t-e3) 0 4px; font-weight: 700; } :root .ofp-t input.t-campo-sel { box-sizing: border-box; width: 100%; max-width: 420px; min-height: 48px; border-radius: var(--t-r-m); border: 1.5px solid var(--t-linha-forte); background: var(--t-sup); color: var(--t-texto); font: inherit; padding: 0 var(--t-e3); } :root .ofp-t .t-tabela tr.t-nivel-1 td:first-child { padding-left: 1.4em; } :root .ofp-t .t-tabela tr.t-nivel-2 td:first-child { padding-left: 2.8em; } :root .ofp-t .t-tabela tr.t-nivel-0 td { font-weight: 700; } /* ----- nenhum número sai do quadro e nenhuma tabela fica cortada (pedido do André, 22/10/2026) ----- o número grande acompanha a largura do PRÓPRIO cartão (container query); sem suporte, fica o clamp() pela tela de antes */ :root .ofp-t .t-indicador, :root .ofp-t .cv-num { container-type: inline-size; min-width: 0; } :root .ofp-t .t-indicador .t-grande { min-width: 0; } :root .ofp-t .t-indicador .t-valor { max-width: 100%; overflow-wrap: anywhere; } @supports (font-size: 1cqi) { :root .ofp-t .t-indicador .t-valor { font-size: clamp(1.15rem, 15cqi, var(--t-fs-numero)); } :root .ofp-t .t-indicador.t-destaque .t-valor { font-size: clamp(1.25rem, 16cqi, var(--t-fs-numero-grande)); } :root .ofp-t .t-resumo .t-indicador.t-destaque .t-valor { font-size: clamp(1.15rem, 15cqi, var(--t-fs-numero)); } :root .ofp-t .cv-num b { font-size: clamp(1.25rem, 15cqi, 2.5rem); } html.cv-pagina .cv-impressao .cv-a4 .cv-num b { font-size: min(21px, 14cqi); } } :root .ofp-t .cv-num b { max-width: 100%; overflow-wrap: anywhere; } /* tabela larga: rola dentro do bloco com a barra visível e a 1ª coluna presa; a tabela do wiki (Caminho do dinheiro) também */ :root .ofp-t .t-rolagem, :root .ofp-t table.wikitable { scrollbar-width: thin; scrollbar-color: var(--t-linha-forte) transparent; } :root .ofp-t .t-rolagem::-webkit-scrollbar, :root .ofp-t table.wikitable::-webkit-scrollbar { height: 8px; } :root .ofp-t .t-rolagem::-webkit-scrollbar-thumb, :root .ofp-t table.wikitable::-webkit-scrollbar-thumb { background: var(--t-linha-forte); border-radius: 8px; } :root .ofp-t .t-rolagem table.t-tabela :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--t-sup); } :root .ofp-t table.wikitable { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :root .ofp-t table.wikitable :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--t-sup); } :root .ofp-t table.wikitable td { white-space: nowrap; } :root .ofp-t table.wikitable .ofp-forn-objeto { white-space: normal; min-width: 16em; } /* o objeto mostra 3 linhas e abre no toque */ /* tabela empilhada no celular: vira cartões, sem rolagem; o texto quebra a linha */ @media (max-width: 720px) { :root .ofp-t table.wikitable.ofp-empilha { overflow: visible; } :root .ofp-t table.wikitable.ofp-empilha td { white-space: normal; overflow-wrap: anywhere; min-width: 0; } :root .ofp-t table.wikitable.ofp-empilha :is(th, td):first-child { position: static; background: none; } :root .ofp-t table.wikitable.ofp-empilha .ofp-forn-objeto { min-width: 0; } :root .ofp-t table.wikitable.ofp-empilha :is(.ofp-forn-mono, .ofp-forn-val, .ofp-forn-selo) { white-space: normal; } /* nada cortado: rótulo e selo quebram a linha */ :root .ofp-t span.t-an-rot { white-space: normal; overflow-wrap: anywhere; } :root .ofp-t .t-barra-rot .t-selo, :root .ofp-t .t-bt { white-space: normal; max-width: 100%; } .ofp-selo .ofp-topo .ofp-pill { white-space: normal; max-width: 100%; } /* tabela que rola: uma sombra na borda avisa que há mais colunas; some quando chega ao fim */ :root .ofp-t table.t-tabela, :root .ofp-t table.wikitable:not(.ofp-empilha) { background: linear-gradient(to right, var(--t-sup) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--t-sup) 30%, transparent) right center / 28px 100% no-repeat local, linear-gradient(to right, rgba(15, 23, 42, .18), transparent) left center / 12px 100% no-repeat scroll, linear-gradient(to left, rgba(15, 23, 42, .18), transparent) right center / 12px 100% no-repeat scroll; } } /* ----- o Resumo executivo com a cara do cartão executivo (pedido do André, 22/10/2026): faixa do título, números grandes e "O que falta" ----- */ :root .ofp-t .t-resumo-exec { border-left: 0; padding: 0 0 var(--t-e4); overflow: hidden; } :root .ofp-t .t-resumo-exec > :not(.t-rx-cab) { margin-left: var(--t-e4); margin-right: var(--t-e4); } :root .ofp-t .t-rx-cab { background: #0F3B82; color: #fff; padding: 16px var(--t-e4) 14px; margin: 0 0 var(--t-e3); } :root .ofp-t .t-rx-cab .cv-kicker { color: rgba(255, 255, 255, .82); } :root .ofp-t .t-rx-cab .cv-nome { color: #fff; margin: 4px 0 0; font-size: clamp(1.25rem, 5vw, 1.75rem); } :root .ofp-t .t-rx-nums { list-style: none; padding: 0; margin-top: var(--t-e3); margin-bottom: var(--t-e3); } @media (min-width: 560px) { :root .ofp-t .t-resumo-exec .t-rx-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } } :root .ofp-t .t-rx-nums .cv-num span:last-child { color: var(--t-texto2); font-size: .875rem; } :root .ofp-t .t-rx-nums .cv-ic svg, :root .ofp-t .t-resumo-exec .cv-ic-h svg, :root .ofp-t .t-resumo-exec .cv-ic-p svg { width: 100%; height: 100%; } :root .ofp-t .t-resumo-exec .cv-ic-h, :root .ofp-t .t-resumo-exec .cv-ic-p { display: inline-flex; } :root .ofp-t .t-rx-falta { margin-top: var(--t-e3); margin-bottom: var(--t-e3); } :root .ofp-t .t-rx-falta .cv-falta { list-style: none; padding: 0; } :root .ofp-t .t-resumo-exec h4.cv-h2 { margin-top: var(--t-e4); } :root .ofp-t .t-resumo-exec .t-legenda, :root .ofp-t .t-resumo-exec .t-ref, :root .ofp-t .t-resumo-exec .t-res-fontes { overflow-wrap: anywhere; } /* o identificador (SHA-256) e os links longos quebram a linha: nada é cortado */ :root .ofp-t .t-resumo-exec .t-selo { white-space: normal; max-width: 100%; } /* o selo "Resumo do portal (conta do portal)" quebra a linha a 320 px em vez de ser cortado */ /* ---------------------------------------------------------------------------------------------- 5. ecossistema 2.0 (etapa 1, 29/10/2026) */ /* Peças da identidade visual 2.0 (design/ecossistema_2_0/03_IDENTIDADE_VISUAL.md). Nenhuma tela as usa ainda: nada do que está no ar muda. */ /* selos de três famílias, nunca misturadas no mesmo selo: o que é (natureza), quanto sabemos (certeza), já funciona (maturidade). A forma vem antes da palavra e a cor nunca é a única pista; tracejado = conteúdo calculado ou pergunta em aberto. */ :root .ofp-t .t-selo:is(.t-nat, .t-cer, .t-mat) { border: 1.5px solid currentColor; padding: 1px 9px; } :root .ofp-t .t-selo .t-forma { font-size: .85em; line-height: 1; } :root .ofp-t .t-selo.t-nat-materia { background: var(--t-s-mat-fundo); color: var(--t-s-mat); border-color: var(--t-s-mat-fundo); } :root .ofp-t .t-selo.t-nat-oficial, :root .ofp-t .t-selo.t-cer-fato { background: var(--t-s-ofi-fundo); color: var(--t-s-ofi); } :root .ofp-t .t-selo.t-nat-imprensa { background: var(--t-s-imp-fundo); color: var(--t-s-imp); } :root .ofp-t .t-selo.t-nat-automatica, :root .ofp-t .t-selo.t-cer-inferencia { background: var(--t-s-aut-fundo); color: var(--t-s-aut); } :root .ofp-t .t-selo.t-nat-automatica, :root .ofp-t .t-selo.t-cer-hipotese { border-style: dashed; } :root .ofp-t .t-selo.t-nat-relato, :root .ofp-t .t-selo.t-mat-implementado { background: var(--t-s-rel-fundo); color: var(--t-s-rel); } :root .ofp-t .t-selo.t-cer-hipotese { background: var(--t-s-ambar-fundo); color: var(--t-s-hip); } :root .ofp-t .t-selo.t-mat-parcial { background: var(--t-s-ambar-fundo); color: var(--t-s-par); } :root .ofp-t .t-selo.t-mat-proposta { background: var(--t-s-neutro-fundo); color: var(--t-s-pro); } :root .ofp-t .t-selo.t-mat-externa { background: var(--t-s-neutro-fundo); color: var(--t-s-ext); } /* foto: só com o crédito completo (autor, veículo e licença ou autorização); o componente recusa a foto sem ele */ :root .ofp-t .t-figura { margin: 0; } :root .ofp-t .t-figura img { display: block; width: 100%; height: auto; border-radius: var(--t-r-p); background: var(--t-sup2); } :root .ofp-t .t-credito-foto { margin: 6px 0 0; font-size: var(--t-fs-xs); color: var(--t-texto2); line-height: 1.45; } /* aviso eleitoral: fixo, sempre visível junto do mapa e da tabela, sem botão de fechar */ :root .ofp-t .t-aviso-eleitoral { display: flex; gap: 8px; align-items: flex-start; margin: var(--t-e3) 0; padding: 10px 12px; border: 1px solid var(--t-linha); border-radius: var(--t-r-p); background: var(--t-sup2); color: var(--t-texto); font-size: var(--t-fs-sm); font-weight: 700; line-height: 1.45; } :root .ofp-t .t-aviso-eleitoral svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--t-marinho); } /* Início 2.0, em zonas (etapa 3; só com a chave PUBLICO_2_0): o selo da natureza do destaque, os 4 números do município lembrado, os cartões dos temas e o Participe, com Denunciar como o único botão vermelho do portal */ :root .ofp-t .t-z20 { margin-top: var(--t-e5); } :root .ofp-t .t-z20-natureza { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 var(--t-e3); font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-meu-mun { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-e3); margin: 0 0 var(--t-e3); padding: 0; list-style: none; } @media (min-width: 900px) { :root .ofp-t .t-meu-mun { grid-template-columns: repeat(4, minmax(0, 1fr)); } } :root .ofp-t .t-meu-mun li { display: grid; gap: 2px; margin: 0; padding: 12px 14px; border: 1px solid var(--t-linha); border-radius: var(--t-r-p); background: var(--t-sup); min-width: 0; } :root .ofp-t .t-meu-mun .t-rot { font-size: var(--t-fs-xs); font-weight: 700; color: var(--t-texto2); } :root .ofp-t .t-meu-mun b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--t-texto); } :root .ofp-t .t-meu-mun small { font-size: var(--t-fs-xs); color: var(--t-texto2); overflow-wrap: anywhere; } :root .ofp-t .t-temas20 { display: grid; gap: var(--t-e3); } @media (min-width: 900px) { :root .ofp-t .t-temas20 { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } :root .ofp-t .t-tema20 { display: flex; flex-direction: column; gap: var(--t-e2); min-width: 0; padding: var(--t-e4); } :root .ofp-t .t-tema20 h3 { margin: 0; font-size: var(--t-fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--t-texto2); } :root .ofp-t .t-tema20 p { margin: 0; } :root .ofp-t .t-tema20 > a { margin-top: auto; font-weight: 700; } :root .ofp-t .t-participe { display: grid; gap: var(--t-e3); margin: 0; padding: 0; list-style: none; } @media (min-width: 900px) { :root .ofp-t .t-participe { grid-template-columns: repeat(3, minmax(0, 1fr)); } } :root .ofp-t .t-participe li { margin: 0; } :root .ofp-t .t-participe .t-bt { width: 100%; } :root .ofp-t .t-participe p { margin: var(--t-e2) 0 0; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-bt.t-denunciar { background: var(--t-denuncia); border-color: var(--t-denuncia); color: var(--t-denuncia-texto); } /* Matérias e Na imprensa (etapa 4): o cartão, a anatomia da Matéria (selos e "montada a partir de" antes do texto, notas, fontes), a lista de notícias de outros veículos (só o título como publicado, com o link) e o editor da curadoria */ :root .ofp-t .t-materia-selos { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 var(--t-e2); } :root .ofp-t .t-materias-grade { display: grid; gap: var(--t-e3); } @media (min-width: 900px) { :root .ofp-t .t-materias-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } } :root .ofp-t .t-materia-cartao, :root .ofp-t .t-conferir { padding: var(--t-e4); } :root .ofp-t .t-conferir { margin-bottom: var(--t-e4); } :root .ofp-t .t-materia-cartao h3 { margin: 0 0 var(--t-e2); font-size: 1.125rem; line-height: 1.3; } :root .ofp-t .t-materia-cartao p { margin: 0 0 var(--t-e2); } :root .ofp-t .t-materia-envolve { max-width: 760px; } :root .ofp-t .t-materia h1 { font-size: clamp(1.6rem, 5.4vw, 2.2rem); line-height: 1.15; margin: var(--t-e3) 0 var(--t-e2); } :root .ofp-t .t-materia-de { margin: 0; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-materia-corpo p { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 var(--t-e4); max-width: 68ch; } :root .ofp-t .t-nota { font-size: .75em; line-height: 0; margin-left: 1px; } :root .ofp-t .t-nota a { text-decoration: none; font-weight: 700; } :root .ofp-t .t-materia-sec { margin-top: var(--t-e5); padding-top: var(--t-e3); border-top: 1px solid var(--t-linha); } :root .ofp-t .t-materia-sec h2 { font-size: 1.0625rem; margin: 0 0 var(--t-e2); } :root .ofp-t .t-materia-fontes li { margin: 0 0 var(--t-e2); overflow-wrap: anywhere; } :root .ofp-t .t-materia-fontes li:target { outline: 3px solid color-mix(in srgb, var(--t-marinho) 35%, transparent); border-radius: 4px; } :root .ofp-t .t-imprensa-lista { margin: 0; padding: 0; list-style: none; } :root .ofp-t .t-imprensa-item { margin: 0; padding: var(--t-e3) 0; border-top: 1px solid var(--t-linha); } :root .ofp-t .t-imprensa-item:first-child { border-top: 0; } :root .ofp-t .t-imprensa-item p { margin: 0; } :root .ofp-t .t-imprensa-tit { font-weight: 700; overflow-wrap: anywhere; } :root .ofp-t .t-imprensa-item .t-imprensa-resumo { margin-top: 4px; font-size: var(--t-fs-sm); color: var(--t-texto2); } :root .ofp-t .t-imprensa-oculto { opacity: .6; } :root .ofp-t .t-editor fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } :root .ofp-t .t-editor legend { font-weight: 800; margin-bottom: var(--t-e2); } :root .ofp-t .t-editor h3 { margin: var(--t-e4) 0 var(--t-e2); font-size: 1rem; } :root .ofp-t .t-ed-campo { display: grid; gap: 4px; margin: 0 0 var(--t-e3); } :root .ofp-t .t-ed-campo span { font-size: var(--t-fs-sm); font-weight: 700; } :root .ofp-t .t-ed-campo small { font-size: var(--t-fs-xs); color: var(--t-texto2); } :root .ofp-t .t-ed-campo input, :root .ofp-t .t-ed-campo select, :root .ofp-t .t-ed-campo textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--t-linha-forte); border-radius: var(--t-r-p); background: var(--t-sup); color: var(--t-texto); font: inherit; } :root .ofp-t .t-ed-linha { display: flex; gap: 8px; align-items: center; margin: 0 0 var(--t-e3); } :root .ofp-t .t-ed-fontes, :root .ofp-t .t-ed-blocos { padding-left: 1.4em; } :root .ofp-t .t-ed-fonte, :root .ofp-t .t-ed-bloco { margin: 0 0 var(--t-e3); padding: var(--t-e3); border: 1px solid var(--t-linha); border-radius: var(--t-r-p); background: var(--t-sup); } :root .ofp-t .t-ed-previa { margin-top: var(--t-e5); } :root .ofp-t .t-ed-previa:not(:empty) { padding: var(--t-e4); border: 2px dashed var(--t-linha-forte); border-radius: var(--t-r-m); }