/* Tábula · estilo do site. Uma folha só para todas as páginas, pensada primeiro para o celular. Paleta: rubro é marca (nunca dado), púrpura é a única cor de dado, ouro é ornamento, nero é texto e linha de referência, mármore é fundo. Tema claro no :root; escuro pelo sistema (sem carimbo) e pelo carimbo data-theme, como hoje. */ :root { color-scheme: light; --plano: #F6F3EC; /* mármore, fundo da página */ --superficie: #FFFFFF; /* cartões */ --tinta: #1A1411; /* nero: texto e linhas de referência */ --tinta-2: #4A3F38; --apagado: #6E625A; --grade: #E8E2D6; --trilho: #ECE6DA; /* fundo das barras de proporção */ --borda: rgba(26, 20, 17, .12); --rubro: #A3241C; /* marca: cabeçalho, aba atual, borda de ligações */ --rubro-texto: #A3241C; --purpura: #5E3593; /* série de dados */ --purpura-fraca: #D6C8EA; /* mês ou ano incompleto */ --link: #4F2A80; --ouro: #B8902A; /* filetes, borda do selo */ --ouro-texto: #8A6A1C; /* numerais romanos e rótulos em Cinzel */ --selo: #F2E2B3; --selo-tinta: #5A4100; --nero: #1A1411; /* rodapé, igual nos dois temas */ --fonte-marca: 'Cinzel', 'Trajan Pro', Georgia, serif; --fonte-titulo: 'Spectral', Georgia, serif; --fonte-texto: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --plano: #120E0C; --superficie: #1D1815; --tinta: #F4EFE6; --tinta-2: #CFC5B8; --apagado: #A2968A; --grade: #2E2722; --trilho: #2E2722; --borda: rgba(255, 255, 255, .10); --rubro: #8F1F18; --rubro-texto: #F08A7E; --purpura: #A57FE0; --purpura-fraca: #4A3570; --link: #C3A6F0; --ouro: #D9B44A; --ouro-texto: #D9B44A; --selo: #3A2F12; --selo-tinta: #F0D488; } } :root[data-theme="dark"] { color-scheme: dark; --plano: #120E0C; --superficie: #1D1815; --tinta: #F4EFE6; --tinta-2: #CFC5B8; --apagado: #A2968A; --grade: #2E2722; --trilho: #2E2722; --borda: rgba(255, 255, 255, .10); --rubro: #8F1F18; --rubro-texto: #F08A7E; --purpura: #A57FE0; --purpura-fraca: #4A3570; --link: #C3A6F0; --ouro: #D9B44A; --ouro-texto: #D9B44A; --selo: #3A2F12; --selo-tinta: #F0D488; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--plano); color: var(--tinta); font: 17px/1.55 var(--fonte-texto); } a { color: var(--link); text-underline-offset: .18em; } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--purpura); outline-offset: 2px; } h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0; text-wrap: balance; } h1 { font-weight: 800; font-size: clamp(34px, 8vw, 56px); line-height: 1.02; } h2 { font-weight: 700; font-size: clamp(23px, 5vw, 28px); line-height: 1.15; } h3 { font-weight: 700; font-size: 20px; line-height: 1.2; } .so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .faixa { max-width: 1120px; margin: 0 auto; padding: 0 16px; } /* ---------- cabeçalho: duas linhas (marca + busca + tema / menu) ---------- */ .topo { background: var(--rubro); border-bottom: 4px solid var(--ouro); } .topo .faixa { padding-top: 8px; display: flex; flex-direction: column; gap: 4px; } .topo-linha { display: flex; align-items: center; gap: 12px; } .marca { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; text-decoration: none; flex: 0 0 auto; } .marca svg { width: 36px; height: 27px; } .marca span { font: 700 23px/1 var(--fonte-marca); letter-spacing: .06em; } .busca { flex: 1 1 0; min-width: 0; max-width: 520px; margin-left: auto; position: relative; } .busca label { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; background: #fff; border-radius: 4px; } .busca input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #1A1411; font: 16px var(--fonte-texto); } .modo { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: transparent; color: #fff; cursor: pointer; } .topo-linha .modo:first-child, .topo-linha .marca + .modo { margin-left: auto; } /* páginas sem busca no topo */ .menu { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; } .menu a { color: #FBEDE9; text-decoration: none; padding: 10px 0 7px; border-bottom: 3px solid transparent; } .menu a[aria-current="page"] { color: #fff; font-weight: 700; border-bottom-color: var(--ouro); } /* resultados da busca do topo (busca.js) */ .busca-resultados { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px 14px 10px; max-height: 70vh; overflow-y: auto; } .busca-resultados[hidden] { display: none; } .busca-grupo h2 { font: 700 12px var(--fonte-marca); letter-spacing: .18em; color: var(--rubro-texto); padding: 10px 0 6px; border-bottom: 2px solid var(--tinta); } .busca-grupo a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--grade); text-decoration: none; } .busca-grupo a strong { color: var(--link); font-size: 16px; } .busca-grupo a span { color: var(--apagado); font-size: 13px; } /* ---------- abertura da página ---------- */ .abre { padding-top: 22px; display: flex; flex-direction: column; gap: 10px; } .caminho { font-size: 14px; color: var(--tinta-2); display: flex; gap: 8px; flex-wrap: wrap; } .fatos { margin: 0; display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 15px; color: var(--tinta-2); } .fatos strong { color: var(--tinta); } .lede { margin: 0; font-size: 17px; color: var(--tinta-2); max-width: 62ch; } .olho { font: 600 13px var(--fonte-marca); letter-spacing: .18em; color: var(--rubro-texto); text-transform: uppercase; } /* ficha (hospital, empresa): pares de rótulo e valor; um valor longo ocupa a linha inteira */ .ficha { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 15px; } .ficha > div { min-width: 0; } .ficha > div:last-child:nth-child(odd), .ficha .largo { grid-column: 1 / -1; } .ficha dt { font: 700 11px var(--fonte-marca); letter-spacing: .16em; color: var(--apagado); } .ficha dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 760px) { .ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ficha > div:last-child:nth-child(odd) { grid-column: auto; } } /* abas: uma linha, sem rolagem; nomes curtos (Resumo, Saúde, Atendimento, Dinheiro) */ .abas { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; border-bottom: 1px solid var(--borda); } .abas a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 46px; padding: 0 2px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--tinta); font-size: 15px; text-decoration: none; } .abas a[aria-current="page"] { border-bottom-color: var(--rubro); font-weight: 700; } .abas.cinco a { font-size: 14px; } /* RN tem 5 abas */ /* ---------- conteúdo ---------- */ main.faixa { padding-top: 20px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 40px; } .secao { display: flex; flex-direction: column; gap: 14px; } .secao-cab { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; border-top: 2px solid var(--tinta); padding-top: 12px; } .num { font: 700 17px var(--fonte-marca); color: var(--ouro-texto); } /* I, II, III… */ .nota-sec { margin: 0; font-size: 15px; color: var(--tinta-2); max-width: 70ch; } /* cartões: 1 por linha no celular, 2 no computador; o que sobra sozinho ocupa a linha inteira; mesma altura por linha */ .cartoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } @media (min-width: 760px) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cartoes > :last-child:nth-child(odd) { grid-column: 1 / -1; } } .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cartao-cab { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; } .cartao-cab h2 { font-size: 23px; } .cartao-cab .quando { font-size: 14px; color: var(--apagado); } .cartao-pe { margin-top: auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--grade); padding-top: 12px; } /* links “Ver…” alinhados no rodapé */ .fonte { font-size: 13px; color: var(--apagado); } .ver { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 700; font-size: 16px; } /* números em pares: sempre 2 por linha; se sobra um, ocupa a linha inteira. Nada quebra linha. */ .pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .pares > :last-child:nth-child(odd) { grid-column: 1 / -1; } .par { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .par .rot, .par .val, .par .nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .par .rot { font-size: 14px; color: var(--tinta-2); } .par .val { font-weight: 700; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; } .par .val.medio { font-size: 21px; line-height: 1.15; } .par .val.grande { font-size: 40px; line-height: 1.05; } .par .nota { font-size: 12px; color: var(--apagado); } @media (min-width: 760px) { .pares.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* faixa de números fora de cartão */ .selo { display: inline-block; font: 700 11px var(--fonte-texto); letter-spacing: .04em; text-transform: uppercase; background: var(--selo); color: var(--selo-tinta); padding: 3px 8px; border-radius: 3px; border: 1px solid var(--ouro); } /* barra de proporção com referência neutra (meta, mínimo legal, média do RN) */ .barra { display: flex; flex-direction: column; gap: 4px; } .barra-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .barra-trilho { position: relative; height: 12px; background: var(--trilho); border-radius: 2px; margin: 7px 0; } .barra-valor { position: absolute; inset: 0 auto 0 0; background: var(--purpura); border-radius: 2px; } /* width: X% */ .barra-ref { position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--tinta); } /* left: Y% */ .barra-legenda { position: relative; height: 20px; font-size: 12px; color: var(--apagado); } .barra-legenda .ref { position: absolute; transform: translateX(-50%); color: var(--tinta); font-weight: 700; white-space: nowrap; } /* linhas empilhadas (no lugar de tabela visível) */ .linhas { margin: 0; padding: 0 16px; list-style: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; } .linhas li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--grade); } .linhas li:last-child { border-bottom: 0; } .linha-nome { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 44px; } .linha-nome .meta { font-size: 13px; color: var(--apagado); } .linha-valor { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* “Ver os números em tabela”: a tabela de verdade, fechada; só ela rola de lado, e só depois de aberta */ .ver-tabela { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; } .ver-tabela summary { min-height: 48px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; color: var(--link); font-weight: 700; font-size: 15px; } .ver-tabela .rolagem { overflow-x: auto; border-top: 1px solid var(--grade); } .ver-tabela table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .ver-tabela th { text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--tinta); font-size: 13px; color: var(--tinta-2); } .ver-tabela td { padding: 8px 14px; border-bottom: 1px solid var(--grade); } .ver-tabela .n { text-align: right; } /* listas (municípios, hospitais, empresas): um campo, contagem + ordenar na mesma linha, “Mostrar mais” */ .filtro label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 2px solid var(--tinta); border-radius: 4px; background: var(--superficie); } .filtro input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--tinta); font: 17px var(--fonte-texto); } .lista-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 15px; color: var(--tinta-2); } .ordenar { display: inline-flex; align-items: center; gap: 8px; } .ordenar span.caixa { position: relative; display: inline-flex; } .ordenar select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--borda); border-radius: 4px; background: var(--superficie); color: var(--tinta); font: 700 15px var(--fonte-texto); cursor: pointer; } .ordenar svg { position: absolute; right: 12px; top: 50%; margin-top: -4px; pointer-events: none; } .mais { min-height: 52px; width: 100%; border: 2px solid var(--tinta); border-radius: 6px; background: var(--superficie); color: var(--tinta); font: 700 16px var(--fonte-texto); cursor: pointer; } [data-escondido] { display: none !important; } /* ligações: o que se conecta a esta página, nos dois sentidos */ .ligacoes { background: var(--superficie); border: 1px solid var(--borda); border-top: 4px solid var(--rubro); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 16px; } .ligacoes-grupos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; } @media (min-width: 760px) { .ligacoes-grupos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .ligacoes h3 { font: 700 11px var(--fonte-marca); letter-spacing: .16em; color: var(--ouro-texto); text-transform: uppercase; padding-bottom: 2px; } .ligacoes a { display: flex; align-items: center; min-height: 40px; font-size: 15px; border-bottom: 1px solid var(--grade); } /* blog: capa e fotos */ .destaque { background: var(--superficie); border: 1px solid var(--borda); border-top: 4px solid var(--rubro); border-radius: 6px; padding: 20px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; align-items: center; } @media (min-width: 760px) { .destaque { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .capa { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 4px; background: var(--trilho); } .miniatura { width: 72px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; flex: 0 0 72px; background: var(--trilho); } .foto { margin: 6px 0; display: flex; flex-direction: column; gap: 8px; } .foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; } .foto figcaption { font-size: 14px; line-height: 1.45; color: var(--tinta-2); } .foto figcaption .credito { color: var(--apagado); } .texto { max-width: 68ch; font-size: 18px; line-height: 1.65; } /* gráficos SVG feitos no servidor: só estas cores */ .serie { fill: var(--purpura); } .serie-parcial { fill: var(--purpura-fraca); } /* mês/ano incompleto */ .serie-linha { stroke: var(--purpura); fill: none; stroke-width: 2; } .ref-linha { stroke: var(--tinta); stroke-width: 2; } /* meta, mínimo legal, média do RN */ .grade-linha { stroke: var(--grade); } .eixo { fill: var(--apagado); font-size: 12px; } /* ---------- rodapé ---------- */ .rodape { background: var(--nero); color: #D8CDBF; margin-top: 32px; border-top: 4px solid #B8902A; } .rodape .faixa { padding-top: 28px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 14px; } .rodape-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; } .rodape .marca span { color: #D9B44A; font-size: 20px; } .rodape nav { display: flex; gap: 4px 20px; flex-wrap: wrap; font-size: 15px; } .rodape a { display: inline-flex; align-items: center; min-height: 40px; color: #E3C46A; } .rodape p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 80ch; } /* ====================================================================== Complemento da implementação: peças que as telas usam e a folha do pacote não trazia (interior dos gráficos SVG, dica, barras horizontais, início, lista do blog). Mesmos tokens e mesmas regras. ====================================================================== */ /* figura: gráfico dentro de cartão */ .figura { margin: 0; } .figura figcaption { display: flex; flex-direction: column; gap: 2px; } .figura figcaption h3 { font-size: 19px; } .figura .sub { margin: 0; font-size: 14px; color: var(--apagado); } .graf-caixa { width: 100%; overflow-x: auto; } .graf { width: 100%; height: auto; display: block; overflow: visible; } .graf .grade-linha { stroke: var(--grade); stroke-width: 1; } .graf .base { stroke: var(--tinta); stroke-width: 1; } .graf .eixo { font: 11px var(--fonte-texto); font-variant-numeric: tabular-nums; } .graf .serie-parcial { fill: var(--purpura-fraca); } .graf .ref-linha { stroke-dasharray: 5 4; } .graf .alvo { fill: transparent; } .graf .alvo:hover, .graf .alvo:focus { fill: var(--tinta); fill-opacity: .06; outline: none; } .dica { position: fixed; z-index: 30; pointer-events: none; background: var(--tinta); color: var(--superficie); font-size: 14px; font-weight: 700; padding: 6px 10px; border-radius: 4px; white-space: nowrap; } /* barras horizontais (causas, agravos, destinos): nome em cima, valor na ponta */ .bh { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bh li { display: grid; gap: 3px; min-width: 0; } .bh-nome { font-size: 14px; color: var(--tinta-2); line-height: 1.3; } .bh-linha { display: flex; align-items: center; gap: 8px; } .bh-barra { height: 10px; background: var(--purpura); border-radius: 0 2px 2px 0; min-width: 2px; } .bh-barra.pouco { background: repeating-linear-gradient(135deg, var(--purpura) 0 3px, var(--purpura-fraca) 3px 6px); } .bh-barra.zero { width: 2px !important; background: var(--apagado); border-radius: 0; } .bh-valor { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } /* indicadores com meta, avisos, vazio */ .metas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .aviso { margin: 0; font-size: 14px; color: var(--tinta-2); border-left: 3px solid var(--ouro); padding: 2px 0 2px 12px; max-width: 70ch; } .vazio { margin: 0; font-size: 15px; color: var(--apagado); } .caminho a { color: var(--link); } .secao > .cartao-pe, .secao > .fonte { border: 0; padding: 0; } .legenda-ref { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--apagado); } /* troca de gráfico por menu (