/* ================================================================ Fiscaliza Varginha — Painel Cidadão Paleta: Civic Navy + Gold (mesma da apresentação) ================================================================ */ /* Inter — auto-hospedada (sem CDN externo; funciona offline) */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Inter-Variable.woff2") format("woff2"); } :root { --navy: #004B8D; --navy-dk: #00376B; --teal: #078A4B; --gold: #F2C230; --gold-dk: #B8870B; --red: #C93632; --cream: #F4F8FC; --bg: #F7FAFD; --ink: #152131; --muted: #607084; --line: #DCE6F0; --white: #FFFFFF; /* Tokens de superfície — separam os dois papéis do branco (base para dark mode): --surface = fundo de página/card (no dark mode vira escuro) --on-accent = texto/ícone sobre cor forte (no dark mode continua claro) */ --surface: #FFFFFF; --surface-2: #F8FBFE; /* superfície alternativa (near-white, absorve tons ≤4/255) */ --on-accent: #FFFFFF; /* Cores semânticas de estado — valores atuais preservados (paleta Material já em uso). Usar estes tokens no lugar dos hex soltos; base para dark mode futuro. */ --danger: #c62828; --danger-dk: #b71c1c; --danger-ink: #7b0000; --danger-bd: #ef9a9a; --danger-bd-2:#f4b3b3; --danger-bg: #ffebee; --danger-bg-2:#fff5f5; --success: #087a45; --success-dk: #1b5e20; --success-mid:#2e7d32; --success-bd: #86cfae; --success-bg: #e8f5ef; --info: #1565c0; --info-bd: #90caf9; --info-bg: #e8f4fd; --info-bg-2: #e3f2fd; --warn: #f57f17; --warn-2: #ffd54f; --warn-bd: #ffe082; --warn-bg: #fff8e1; --warn-ink: #6d4c00; --warn-ink-2: #6d3800; --purple: #6a1b9a; --purple-bd: #ce93d8; --purple-bg: #f3e5f5; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Escala de raio (base 12px, mantida em --radius por retrocompatibilidade) */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Escala de espaçamento — base 4px. Usar no lugar de px soltos daqui pra frente. 1=4 2=8 3=12 4=16 5=24 6=32 7=48 8=64 */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Breakpoints canônicos — padronizar as media queries nestes 4 valores. Referência (media queries não leem custom properties; usar os números): --bp-sm: 480px (telefone grande) --bp-md: 768px (tablet) --bp-lg: 1024px (desktop) --bp-xl: 1180px (largura máx. do container) */ --font-b: "Inter", "Segoe UI", Arial, sans-serif; --font-h: var(--font-b); --font-mono: "Cascadia Mono", "Consolas", monospace; } /* ================== DARK MODE (automático apenas em desktop) ================== Ativa em telas maiores com mouse/trackpad quando o sistema está em tema escuro. Celulares e dispositivos de toque permanecem sempre no tema claro. Para forçar claro mesmo com SO escuro: . */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) { --bg: #0d141c; --surface: #161f2b; --surface-2: #1c2735; --cream: #172231; --ink: #e7edf4; --muted: #9aabbe; --line: #2a3949; --white: #161f2b; --navy: #5a9bd8; --navy-dk: #4a86c0; --danger-bg: #3a1d1f; --danger-bg-2:#2e1a1c; --danger-bd: #7d3a3a; --danger-ink:#ffb4ac; --danger-dk: #ff8a80; --danger: #ef6b66; --success-bg:#14301f; --success-bd: #2f6b47; --success-dk:#7fdba0; --success: #4caf7a; --success-mid:#57b985; --info-bg: #14273a; --info-bg-2: #152a3f; --info-bd: #3a6a99; --info: #6fb2f0; --warn-bg: #332a12; --warn-bd: #6b5a2a; --warn-ink: #f0d68a; --warn-ink-2: #e6c877; --warn: #f0b64d; --purple-bg: #2a1a33; --purple: #d9a7e6; --purple-bd: #6a4a78; --shadow: 0 4px 6px -1px rgba(0,0,0,.5), 0 2px 4px -1px rgba(0,0,0,.4); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.6), 0 10px 10px -5px rgba(0,0,0,.4); color-scheme: dark; } :root:not([data-theme="light"]) body { background: #0d141c; } :root:not([data-theme="light"]) .topbar { background: rgba(22, 32, 44, 0.96); border-bottom-color: rgba(255, 255, 255, 0.08); } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; color-scheme: light; background: var(--surface); } body { margin: 0; font-family: var(--font-b); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--surface); } h1, h2, h3, h4, h5, h6, .brand__name, .hero__title, .section__title, .bigheader__title, .block__title, .stat__value, .audit-metric__value, .keyword-result strong, .ver-card__name, .em__valor, .contrato__valor, .signal h4 { font-family: var(--font-h); font-weight: 750; letter-spacing: 0; } a { color: var(--navy); text-decoration: none; } a:hover { text-decoration: underline; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-140%); background: var(--gold); color: var(--navy); border-radius: 6px; padding: 10px 14px; font-weight: 700; box-shadow: var(--shadow); } .skip-link:focus { transform: translateY(0); outline: 3px solid var(--white); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } main:focus { outline: none; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .muted { color: var(--muted); font-size: 0.92rem; } /* ================== TOPBAR ================== */ .topbar { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(0, 75, 141, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .topbar--scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .topbar::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--navy) 0 48%, var(--gold) 48% 70%, var(--teal) 70% 88%, var(--red) 88% 100%); } @media print { .topbar, .footer, .breadcrumb, .nav, .skip-link, .civic-actions, .pref-tabs, .filterbar, .loadmore, .block__actions, .pdf-action, .btn-share, .btn-dossie { display: none !important; } body { background: var(--surface) !important; } .section, main { background: var(--surface) !important; padding: 0 !important; } .block, .bigheader, .card, .stat, .signal, .contrato, .em { box-shadow: none !important; break-inside: avoid; } } .topbar__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand__mark { width: 38px; height: 38px; background: var(--surface); border: 2px solid var(--navy); border-radius: 8px; position: relative; box-shadow: inset 0 0 0 4px rgba(0,75,141,.08); } .brand__mark::after { content: "FV"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-h); font-weight: 800; font-size: 13px; letter-spacing: 0; color: var(--navy-dk); } .brand__name { display: block; font-family: var(--font-h); font-size: 21px; font-weight: bold; color: var(--navy); } .brand__tag { display: block; font-size: 11px; letter-spacing: 2px; color: var(--teal); text-transform: uppercase; } .nav { display: flex; gap: 4px; flex-wrap: nowrap; } .nav__link { color: var(--navy); font-size: 13.5px; font-weight: 700; padding: 8px 11px; border-radius: 6px; transition: background .15s, color .15s; } .nav__link:hover { background: rgba(0,75,141,.08); color: var(--navy-dk); text-decoration: none; } .nav__link--cta { background: var(--gold); color: var(--navy); font-weight: 700; } .nav__link--cta:hover { background: var(--navy); color: var(--on-accent); } .nav__link--active { background: var(--navy); color: var(--on-accent); } .nav__link--cta.nav__link--active { background: var(--gold); color: var(--navy); } /* Sub-navegação da Câmara (abas de seção) */ .camara-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding-bottom: 4px; position: sticky; top: 0; z-index: 20; background: var(--bg); padding-top: 10px; } .csec-btn { font-family: inherit; font-weight: 600; font-size: .95rem; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: .15s; } .csec-btn:hover { border-color: var(--navy); color: var(--navy); } .csec-btn--active { background: var(--navy); color: var(--on-accent); border-color: var(--navy); } .csec-hidden { display: none !important; } /* brand vira link na home */ a.brand { text-decoration: none; } a.brand:hover { text-decoration: none; } /* breadcrumb / voltar */ .breadcrumb { margin: 0 0 24px; font-size: 0.9rem; } .breadcrumb a { color: var(--muted); font-weight: 600; transition: color .12s; } .breadcrumb a:hover { color: var(--navy); text-decoration: none; } /* Hamburger toggle button */ .nav__toggle { display: none; background: none; border: 1.5px solid rgba(0,75,141,.28); cursor: pointer; padding: 6px 12px; border-radius: 6px; margin-left: auto; color: var(--navy); font-size: 13px; font-weight: 700; align-items: center; gap: 6px; transition: background .15s; line-height: 1; } .nav__toggle:hover { background: rgba(0,75,141,.08); } @media (max-width: 1180px) { .topbar__inner { flex-wrap: wrap; gap: 8px; padding: 10px 16px; } .nav__toggle { display: flex; } .nav { display: none; width: 100%; order: 3; flex-direction: column; gap: 2px; padding: 6px 0 4px; border-top: 1px solid rgba(0,75,141,.12); } .nav--open { display: flex; } .nav__link { padding: 8px 10px; font-size: 13px; width: 100%; box-sizing: border-box; } } /* Signals groups */ .signals-group { margin-bottom: 16px; } .signals-group__title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 0 6px; margin: 0 0 8px; color: var(--muted); border-bottom: 1.5px solid #eee; } .signals-group__title--critico { color: var(--danger-ink); border-color: var(--danger-ink); } .signals-group__title--alto { color: var(--warn-ink); border-color: #D4651A; } .signals-group__title--medio { color: var(--navy); border-color: rgba(0,75,141,.3); } .signals-group__count { background: var(--navy); color: var(--on-accent); font-size: 11px; padding: 1px 7px; border-radius: 99px; font-weight: 700; } .signals-group__title--critico .signals-group__count { background: var(--danger-ink); } .signals-group__title--alto .signals-group__count { background: #8C3B1A; } /* Load more + CSV export */ .btn-load-more { display: block; width: 100%; margin-top: 12px; padding: 12px 16px; border-radius: 8px; border: 1.5px dashed rgba(0,75,141,.3); background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); transition: all .15s; } .btn-load-more:hover { border-color: var(--navy); color: var(--navy); background: rgba(0,75,141,.04); } .btn-csv { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 700; background: var(--teal); color: var(--on-accent); transition: background .15s; vertical-align: middle; } .btn-csv:hover { background: var(--navy); color: var(--on-accent); } /* ================== HERO MODERN ================== */ .hero--modern { background: radial-gradient(circle at 0% 0%, rgba(242,194,48,0.15) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(7,138,75,0.15) 0%, transparent 50%), linear-gradient(135deg, var(--navy) 0%, #002D54 100%); color: var(--on-accent); padding: 100px 0 120px; text-align: left; position: relative; overflow: hidden; } .hero--modern::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.3; } .hero__kicker { display: inline-block; font-weight: 600; letter-spacing: 2px; color: var(--gold); margin-bottom: 20px; font-size: 13px; } .hero__title { font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.1; margin-bottom: 24px; } .hero__title span { display: block; font-family: var(--font-b); font-weight: 300; opacity: 0.9; } .hero__lead { font-size: 1.2rem; max-width: 600px; line-height: 1.6; opacity: 0.9; margin-bottom: 40px; } .search-box { margin-top: 40px; } .search { display: flex; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 100px; max-width: 600px; transition: all 0.3s ease; } .search:focus-within { background: rgba(255, 255, 255, 0.15); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 194, 48, 0.2); } .search input { flex: 1; background: transparent; border: none; padding: 12px 24px; color: var(--on-accent); font-size: 1.1rem; outline: none; } .search input::placeholder { color: rgba(255, 255, 255, 0.6); } .search button { background: var(--gold); color: var(--navy-dk); border: none; padding: 12px 32px; border-radius: 100px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .search button:hover { background: var(--surface); transform: scale(1.05); } .search-hints { margin-top: 12px; font-size: 0.9rem; opacity: 0.7; padding-left: 20px; } .smart-suggest { max-width: 660px; margin-top: 12px; color: var(--on-accent); } .smart-suggest__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; } .smart-suggest__head strong { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; } .smart-suggest__head span { color: rgba(255,255,255,.72); font-size: .84rem; } .smart-suggest__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .smart-suggest__list button { min-height: 58px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.10); color: var(--on-accent); text-align: left; padding: 9px 11px; cursor: pointer; transition: background .18s, border-color .18s, transform .15s; } .smart-suggest__list button:hover, .smart-suggest__list button:focus-visible, .smart-suggest__list button.is-active { background: rgba(242,194,48,.22); border-color: var(--gold); outline: 0; transform: translateY(-1px); } .smart-suggest__list span { display: block; font-weight: 800; color: var(--on-accent); } .smart-suggest__list small { display: block; margin-top: 3px; color: rgba(255,255,255,.78); line-height: 1.25; } .smart-suggest__list p { grid-column: 1 / -1; margin: 0; color: rgba(255,255,255,.78); font-size: .9rem; } .smart-guide { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid rgba(242,194,48,.45); border-radius: 8px; background: rgba(8, 31, 56, .58); box-shadow: 0 12px 28px rgba(0,0,0,.18); } .smart-guide__head span { display: block; color: var(--gold); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .smart-guide__head strong { display: block; margin-top: 2px; color: var(--on-accent); font-size: 1rem; } .smart-guide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .smart-guide__grid article, .smart-guide__question { border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: rgba(255,255,255,.07); padding: 9px; } .smart-guide b { display: block; margin-bottom: 4px; color: rgba(255,255,255,.76); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .smart-guide span { color: var(--on-accent); font-size: .84rem; line-height: 1.35; } .smart-guide__go { justify-self: start; border: 0; border-radius: 999px; background: var(--gold); color: var(--navy-dk); padding: 9px 15px; font-weight: 850; cursor: pointer; } .smart-guide__go:hover, .smart-guide__go:focus-visible { background: var(--surface); outline: 2px solid var(--gold); outline-offset: 2px; } .audit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .audit-chips button { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255,255,255,0.92); padding: 7px 14px; border-radius: 100px; font-size: 0.82rem; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .15s; font-family: var(--font-b); white-space: nowrap; } .audit-chips button:hover { background: var(--gold); color: var(--navy-dk); border-color: var(--gold); transform: translateY(-2px); } /* ================== HUB V2 ================== */ .hub-v2 { margin-top: 80px; } .hub-v2__title { font-size: 0.8rem; letter-spacing: 3px; margin-bottom: 24px; opacity: 0.8; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .hub-item { background: rgba(255, 255, 255, 1); border: 1px solid var(--line); padding: 32px 20px; border-radius: 16px; text-align: center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); } .hub-item:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 60px rgba(0,75,141,0.15); border-color: var(--gold); background: var(--surface); } .hub-item__icon svg { width: 48px; height: 48px; stroke: var(--navy); transition: all 0.3s ease; } .hub-item:hover .hub-item__icon svg { stroke: var(--gold-dk); transform: scale(1.1) rotate(5deg); } .hub-item span { font-weight: 700; font-size: 1rem; color: var(--navy); letter-spacing: -0.01em; } /* ================== ANIMATIONS ================== */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInDown 0.8s ease-out forwards; } .animate-in-delayed { opacity: 0; animation: fadeInUp 0.8s ease-out 0.4s forwards; } .hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.6; } .mouse { width: 24px; height: 40px; border: 2px solid white; border-radius: 20px; position: relative; } .mouse::before { content: ""; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; background: var(--surface); border-radius: 2px; transform: translateX(-50%); animation: mouseScroll 1.5s infinite; } @keyframes mouseScroll { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(15px); } } /* ================== AUDIT SCORES ================== */ .audit-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; } @media (max-width: 768px) { .audit-scores { grid-template-columns: 1fr; } } .score-card { background: var(--surface); padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 40px; border: 1px solid var(--line); transition: all 0.3s ease; } .score-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .score-card__circle { flex: 0 0 120px; } .circular-chart { display: block; margin: 0 auto; max-width: 100%; max-height: 250px; } .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; } .circle { fill: none; stroke-width: 2.8; stroke-linecap: round; transition: stroke-dasharray 1s ease-out; } #circlePref { stroke: var(--teal); } #circleCam { stroke: var(--gold); } .percentage { fill: var(--navy); font-family: var(--font-b); font-size: 0.5rem; font-weight: 700; text-anchor: middle; } .score-card__info h3 { font-family: var(--font-h); font-size: 1.6rem; margin-bottom: 8px; color: var(--navy); } .score-card__info p { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; } .score-list { padding: 0; list-style: none; font-size: 0.85rem; display: grid; gap: 8px; } .score-list li { padding-left: 20px; position: relative; color: var(--ink); } .score-list li::before { content: "▪"; position: absolute; left: 0; color: var(--teal); } .score-list li.warn::before { color: var(--red); } /* ================== FEATURES ================== */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 60px 0; } .feature-card { background: var(--surface); padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow); transition: all 0.3s ease; border: 1px solid var(--line); } .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--teal); } .feature-card__icon { font-size: 2.5rem; margin-bottom: 24px; } .feature-card h3 { font-family: var(--font-h); font-size: 1.5rem; margin-bottom: 16px; color: var(--navy); } .feature-card p { color: var(--muted); line-height: 1.6; } /* ================== SECTIONS ================== */ .section { padding: 72px 0; } .section--alt { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(244,248,252,.92)), var(--cream); } .section__title { font-family: var(--font-h); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: bold; color: var(--navy); margin: 0 0 8px; } .section__lead { color: var(--muted); max-width: 760px; font-size: 1.05rem; margin: 0 0 36px; } /* Big institutional headers (Prefeitura / Câmara) */ .bigheader { background: rgba(255,255,255,.72); border: 1px solid var(--line); border-left: 8px solid var(--gold); border-radius: var(--radius); padding: 22px 28px; margin-bottom: 48px; box-shadow: 0 1px 2px rgba(0,75,141,.04); } .bigheader__kicker { display: inline-block; font-size: 11px; letter-spacing: 2.5px; font-weight: 750; color: var(--gold-dk); text-transform: uppercase; margin-bottom: 6px; } .bigheader__title { font-family: var(--font-h); font-size: clamp(2rem, 4vw, 3rem); font-weight: bold; color: var(--navy); margin: 0 0 12px; line-height: 1.05; } .bigheader__lead { max-width: 800px; color: var(--ink); font-size: 1.05rem; margin: 0; } .reader-summary { margin-top: 22px; background: var(--surface-2); border: 1px solid #d7e6f3; border-left: 5px solid var(--teal); border-radius: 10px; padding: 18px 20px; color: var(--ink); } .reader-summary--wide { margin: 18px 0 22px; background: var(--surface); } .reader-summary__label { color: var(--teal); font-size: 0.76rem; font-weight: 750; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; } .reader-summary p { margin: 0; max-width: 980px; line-height: 1.65; } .reader-summary p + p { margin-top: 10px; } .reader-summary__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .reader-summary__chips span { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; background: var(--surface); border: 1px solid #cfe0ef; color: var(--navy); padding: 5px 10px; font-size: 0.86rem; font-weight: 700; } /* Color accents for the two institutional sections */ .section--prefeitura .bigheader { border-left-color: var(--teal); } .section--prefeitura .bigheader__kicker { color: var(--teal); } .section--fundacao .bigheader { border-left-color: var(--navy); } .section--fundacao .bigheader__kicker { color: var(--navy); } .section--camara .bigheader { border-left-color: var(--gold); } /* Inner blocks within an institutional section */ .block { margin-top: 36px; } .block:first-of-type { margin-top: 8px; } .block__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 10px; } .block__actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .block__title { font-family: var(--font-h); font-size: 1.45rem; font-weight: bold; color: var(--navy); margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; line-height: 1.2; } .block__titlerow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .block__titlerow .block__title { margin-bottom: 0; } .ano-chips { display: flex; gap: 6px; } .ano-chip { padding: 4px 16px; font-size: .88rem; font-weight: 700; border-radius: 20px; border: 2px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; transition: background .15s, color .15s; } .ano-chip:hover { background: var(--navy-lt, #e8edf5); } .ano-chip--active { background: var(--navy); color: var(--on-accent); } .block__title::before { content: ""; width: 7px; height: 26px; border-radius: 999px; background: linear-gradient(180deg, var(--gold), var(--teal)); flex: 0 0 auto; } .block__toggle { border: 1px solid #cfe0ef; background: var(--surface); color: var(--navy); border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 38px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,75,141,.08); } .block__toggle:hover, .block__toggle:focus-visible { border-color: var(--navy); background: var(--surface-2); outline: none; } .pdf-action { border: 1px solid #cfe0ef; background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--navy); border-radius: 999px; padding: 8px 12px; font-weight: 750; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 38px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,75,141,.08); } .pdf-action span:first-child { background: var(--gold); color: var(--navy); border-radius: 6px; padding: 2px 5px; font-size: 0.72rem; line-height: 1; } .pdf-action:hover, .pdf-action:focus-visible { border-color: var(--navy); background: var(--surface); outline: none; transform: translateY(-1px); } .pdf-action--page { border-color: rgba(0,75,141,.28); } .block__toggle-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--navy); border: 1px solid #cfe0ef; display: inline-grid; place-items: center; line-height: 1; font-size: .95rem; font-weight: 750; flex: 0 0 auto; } .block__content { display: block; } .block__content[hidden] { display: none; } .block.is-collapsed { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 10px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(0,75,141,.06); } .block.is-collapsed .block__head { margin-bottom: 0; } @media (max-width: 640px) { .block__head { grid-template-columns: 1fr; align-items: flex-start; gap: 10px; } .block__title { font-size: 1.18rem; line-height: 1.25; } .block__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .block__toggle { padding: 7px 10px; font-size: 0.82rem; } .block__toggle-text { display: none; } .pdf-action { padding: 7px 10px; font-size: 0.78rem; } .pdf-action span:last-child { display: none; } } .block__lead { color: var(--muted); max-width: 800px; margin: 0 0 24px; font-size: 1rem; } .block__lead .warning { display: block; margin-top: 10px; background: var(--warn-bg); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 6px; color: var(--ink); font-size: 0.92rem; } /* ================== DUO (Quem é quem) ================== */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 28px; } @media (max-width: 720px) { .duo { grid-template-columns: 1fr; } } .duo__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; position: relative; box-shadow: var(--shadow); border-top: 6px solid var(--teal); overflow: hidden; } .duo__card::after, .hub-card::after, .module::after, .signal::after, .personnel-card::after { content: ""; position: absolute; top: 0; right: 0; width: 88px; height: 88px; background: linear-gradient(135deg, transparent 0 48%, rgba(242,194,48,.18) 48% 62%, rgba(7,138,75,.13) 62% 76%, rgba(201,54,50,.10) 76%); pointer-events: none; } .duo__card--camara { border-top-color: var(--gold); } .duo__label { display: block; font-size: 11px; letter-spacing: 4px; font-weight: 700; color: var(--teal); text-transform: uppercase; margin-bottom: 6px; } .duo__card--camara .duo__label { color: var(--gold-dk); } .duo__name { font-family: var(--font-h); font-size: 1.8rem; font-weight: bold; color: var(--navy); margin: 0 0 4px; } .duo__role { color: var(--muted); font-style: italic; margin: 0 0 16px; } .duo__list { margin: 0 0 18px; padding: 0; list-style: none; font-size: 0.95rem; } .duo__list li { padding: 6px 0 6px 22px; border-bottom: 1px solid var(--cream); position: relative; } .duo__list li::before { content: "▸"; position: absolute; left: 4px; top: 6px; color: var(--gold); } .duo__list li:last-child { border-bottom: 0; } .duo__cta { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--teal); font-size: 0.95rem; } .duo__card--camara .duo__cta { color: var(--gold-dk); } .duo__note { background: var(--cream); border-left: 4px solid var(--navy); padding: 14px 18px; border-radius: 6px; margin: 18px 0 0; font-size: 0.92rem; color: var(--ink); } /* ================== MODULES (atalhos Betha) ================== */ .modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; } .module { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; transition: transform .15s, border-color .15s, box-shadow .15s; position: relative; overflow: hidden; } .module:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--shadow); } .module__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; background: rgba(0,75,141,.08); border-radius: 8px; font-size: 22px; margin-bottom: 12px; } .module__name { font-family: var(--font-h); font-size: 1.1rem; font-weight: bold; color: var(--navy); margin: 0 0 4px; } .module__desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 10px; min-height: 44px; } .module__cta { font-size: 0.85rem; color: var(--teal); font-weight: 700; } /* ================== TCE cards ================== */ .tce-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .tce-card { display: block; background: linear-gradient(135deg, var(--navy), var(--navy-dk)); color: var(--on-accent); border-radius: var(--radius); padding: 22px 26px; transition: transform .15s; } .tce-card:hover { text-decoration: none; transform: translateY(-2px); } .tce-card h4 { font-family: var(--font-h); font-size: 1.2rem; color: var(--gold); margin: 0 0 6px; } .tce-card p { margin: 0 0 10px; font-size: 0.95rem; color: rgba(255,255,255,.86); } .tce-card .cta { color: var(--gold); font-weight: 700; font-size: 0.9rem; } /* ================== HUB CARDS ================== */ .hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 24px; } .hub-card { display: block; background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--teal); border-radius: var(--radius); padding: 32px 32px 28px; position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; box-shadow: var(--shadow); overflow: hidden; } .hub-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,75,141,.16); } .hub-card--prefeitura { border-top-color: var(--teal); } .hub-card--camara { border-top-color: var(--gold); } .hub-card--cobrar { border-top-color: var(--navy); } .hub-card--relatorios { border-top-color: var(--red); } .hub-card__icon { font-size: 2.6rem; line-height: 1; margin-bottom: 18px; } .hub-card__kicker { display: block; font-size: 11px; letter-spacing: 4px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; } .hub-card--prefeitura .hub-card__kicker { color: var(--teal); } .hub-card--camara .hub-card__kicker { color: var(--gold-dk); } .hub-card__title { font-family: var(--font-h); font-size: 1.85rem; font-weight: bold; color: var(--navy); margin: 0 0 12px; } .hub-card__lead { color: var(--ink); margin: 0 0 16px; font-size: 0.97rem; line-height: 1.5; } .hub-card__features { margin: 0 0 24px; padding: 0; list-style: none; font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--cream); padding-top: 14px; } .hub-card__features li { padding: 4px 0 4px 20px; position: relative; } .hub-card__features li::before { content: "▸"; position: absolute; left: 4px; top: 4px; color: var(--gold); } .hub-card__features strong { color: var(--ink); font-weight: 700; } .hub-card__cta { display: inline-block; font-weight: 700; color: var(--teal); font-size: 0.95rem; } .hub-card--camara .hub-card__cta { color: var(--gold-dk); } .hub-card--cobrar .hub-card__cta { color: var(--navy); } .hub-card--relatorios .hub-card__kicker, .hub-card--relatorios .hub-card__cta { color: var(--red); } .hub-card:hover .hub-card__cta { transform: translateX(4px); } /* ================== Top fornecedores (Prefeitura ao vivo) ================== */ .subblock__title { font-family: var(--font-h); font-size: 1.15rem; color: var(--navy); margin: 28px 0 4px; } .small { font-size: 0.85rem; } .forn { display: grid; gap: 8px; margin-top: 12px; } .forn-row { display: grid; grid-template-columns: 38px 1fr 220px 160px; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; transition: border-color .12s; } .forn-row:hover { border-color: var(--teal); box-shadow: 0 2px 8px rgba(7,138,75,.12); } .forn-row__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .forn-row__btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: .76rem; font-weight: 600; border-radius: 99px; text-decoration: none; border: 1px solid; font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap; } .forn-row__btn--betha { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); } .forn-row__btn--betha:hover { background: var(--info); color: var(--on-accent); } .forn-row__btn--cnpj { background: var(--purple-bg); color: #6a1b9a; border-color: #ce93d8; } .forn-row__btn--cnpj:hover { background: #6a1b9a; color: var(--on-accent); } .forn-row__btn--filtro { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-2); } .forn-row__btn--filtro:hover { background: var(--warn-ink); color: var(--on-accent); } .forn-row__btn--dossie { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); } .forn-row__btn--dossie:hover { background: var(--success); color: var(--on-accent); } @media (max-width: 720px) { .forn-row { grid-template-columns: 38px 1fr; gap: 8px; } .forn-row__cnpj, .forn-row__valor { grid-column: 2; text-align: left; } .forn-row__actions { grid-column: 1 / -1; } } .forn-row__rank { font-family: var(--font-h); font-size: 1.1rem; font-weight: bold; color: var(--gold-dk); } .forn-row__nome { font-weight: 600; color: var(--ink); } .risk-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border-radius: 999px; border: 1px solid; font-size: .68rem; font-weight: 800; line-height: 1.2; vertical-align: middle; margin-left: 6px; white-space: nowrap; } .risk-chip--red { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger-dk); } .risk-chip--yellow { background: var(--warn-bg); border-color: var(--warn-2); color: #7a5200; } .risk-chip--green { background: var(--success-bg); border-color: var(--success-bd); color: var(--success); } .forn-row__cnpj { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .forn-row__valor { font-family: var(--font-h); font-size: 1.05rem; font-weight: bold; color: var(--navy); text-align: right; } .forn-row__bar { height: 6px; background: var(--cream); border-radius: 3px; overflow: hidden; margin-top: 4px; } .forn-row__bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); } @media (max-width: 720px) { .forn-row { grid-template-columns: 1fr; gap: 4px; } .forn-row__valor { text-align: left; } } /* ================== Contratos ================== */ .contratos { display: grid; gap: 10px; } .contrato { display: grid; grid-template-columns: 190px 1fr 160px; gap: 20px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; transition: border-color .12s, box-shadow .12s; } .contrato:hover { border-color: var(--teal); box-shadow: var(--shadow); } .contrato__valor { font-family: var(--font-h); font-size: 1.1rem; font-weight: bold; color: var(--navy); white-space: nowrap; } .contrato__nome { font-weight: 700; color: var(--ink); font-size: 1rem; margin: 0 0 2px; } .contrato__obj { color: var(--muted); font-size: 0.88rem; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .contrato__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: var(--muted); } .contrato__meta strong { color: var(--ink); font-weight: 600; } .contrato__cnpj { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-align: right; } .contrato__sit { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; background: var(--success-bg); color: var(--success-dk); margin-left: 8px; vertical-align: middle; } .contrato__sit--encerrado { background: var(--surface-2); color: var(--muted); } .contrato--highlight { border-left: 6px solid var(--gold) !important; background: var(--warn-bg); } .block--warn { background: var(--warn-bg); border: 1px solid #FFE0B2; border-left: 6px solid var(--gold); padding: 18px 22px; border-radius: var(--radius); color: var(--navy-dk); margin-bottom: 24px; } .block--warn strong { display: block; font-size: 1.05rem; margin-bottom: 4px; color: var(--red); } .legal-context { margin: 16px 0 20px; padding: 18px; background: var(--surface-2); border: 1px solid #cfe0f2; border-left: 5px solid var(--navy); border-radius: var(--radius); } .legal-context > div:first-child strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.05rem; margin-bottom: 4px; } .legal-context p { margin: 0; color: var(--muted); line-height: 1.55; } .legal-context__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; } .legal-context__grid article { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px; } .legal-context__grid span { display: block; color: var(--navy); font-weight: 700; font-size: 0.82rem; margin-bottom: 5px; } .health-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; } .health-metrics span { display: inline-flex; gap: 6px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--navy); font-size: 0.85rem; font-weight: 700; } /* Auditômetro */ .score-mini { display: block; width: fit-content; font-size: 0.7rem; font-weight: 700; background: var(--teal); color: var(--on-accent); padding: 2px 8px; border-radius: 4px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .score-mini--low { background: var(--red); } .score-mini--relevante { background: var(--red); } .score-mini--atencao { background: var(--gold); color: var(--navy); } .score-mini--ok { background: var(--teal); } .contrato-legal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .legal-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; border: 1px solid var(--line); background: var(--surface-2); color: var(--navy); } .legal-chip--relevante { background: var(--danger-bg); border-color: #f3bbbb; color: #a22828; } .legal-chip--atencao { background: var(--warn-bg); border-color: #f2d27a; color: #765900; } .contrato__legal-note { margin: 7px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; } .contrato__alert { background: var(--warn-bg); border-left: 3px solid var(--gold); padding: 6px 10px; border-radius: 4px; color: var(--warn-ink); font-size: 0.82rem; font-weight: 600; margin: 6px 0; } .btn-dossie { background: var(--surface-2); border: 1px solid #dee2e6; color: var(--muted); padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; cursor: pointer; transition: all 0.1s; } .btn-dossie:hover { background: var(--navy); color: var(--on-accent); border-color: var(--navy); } .btn-copiar-num { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 4px; color: #7b6000; font-size: 0.75rem; cursor: pointer; vertical-align: middle; transition: all .12s; } .btn-copiar-num:hover { background: var(--warn-bd); border-color: #f9a825; } /* Comparativo ano atual × anterior */ .contratos-comparativo { display: flex; align-items: center; gap: 20px; background: var(--surface-2); border: 1px solid #dee2e6; border-radius: 10px; padding: 14px 20px; margin-bottom: 16px; flex-wrap: wrap; } .comp-col { display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .comp-col--ant { opacity: .7; } .comp-ano { font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; } .comp-valor { font-size: 1.2rem; font-weight: 700; color: var(--navy); } .comp-qtd { font-size: .78rem; color: var(--muted); } .comp-seta { font-size: 1.3rem; font-weight: 700; min-width: 60px; text-align: center; } @media (max-width: 480px) { .contratos-comparativo { flex-direction: column; gap: 10px; } .comp-seta { display: none; } } /* Gráfico de barras mensal */ .chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 0 4px 0; overflow-x: auto; border-bottom: 2px solid #dee2e6; } .chart-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 36px; cursor: default; } .chart-bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; } .chart-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height .4s ease; min-height: 3px; } .chart-bar-col:hover .chart-bar-fill { opacity: .8; } .chart-bar-label { font-size: .65rem; text-align: center; color: var(--muted); margin-top: 4px; line-height: 1.2; } .chart-bar-label small { font-size: .6rem; } @media (max-width: 720px) { .contrato { grid-template-columns: 1fr; } .contrato__cnpj { text-align: left; } } /* ================== Licitações ================== */ .licitacoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .lic { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, box-shadow .12s; } .lic:hover { border-color: var(--teal); box-shadow: var(--shadow); } .lic__num { font-family: var(--font-h); font-size: 1rem; font-weight: bold; color: var(--navy); } .lic__val { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--navy); font-family: var(--font-h); font-size: .82rem; font-weight: 800; vertical-align: middle; } .lic__obj { color: var(--ink); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lic__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--muted); margin-top: auto; } .lic__meta strong { color: var(--navy); font-weight: 600; } /* ================== Cruzamento (Câmara × Prefeitura) ================== */ .cruzamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .cruz-cell { text-align: center; padding: 6px 12px; border-right: 1px solid var(--cream); } .cruz-cell:last-child { border-right: 0; } .cruz-cell__num { font-family: var(--font-h); font-size: 1.8rem; font-weight: bold; color: var(--navy); line-height: 1; } .cruz-cell__pct { font-size: 0.85rem; color: var(--muted); margin: 4px 0 8px; } .cruz-cell__lbl { font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dk); } @media (max-width: 720px) { .cruzamento { grid-template-columns: 1fr 1fr; } .cruz-cell { border-right: 0; border-bottom: 1px solid var(--cream); padding-bottom: 12px; } } /* Badge de status nas emendas */ .em__status { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle; } .em__status--ok { background: var(--success-bg); color: var(--success-dk); } .em__status--no { background: var(--danger-bg); color: var(--red); } .em__status--unknown { background: var(--surface-2); color: var(--muted); } .confidence-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 3px 8px; font-size: .72rem; font-weight: 750; letter-spacing: .02em; vertical-align: middle; } .confidence--strong { background: var(--success-bg); color: #0D6B3A; border: 1px solid rgba(13, 107, 58, .18); } .confidence--clue { background: var(--warn-bg); color: #7A5600; border: 1px solid rgba(122, 86, 0, .2); } .confidence--avoid { background: var(--danger-bg); color: var(--warn-ink); border: 1px solid rgba(140, 59, 26, .18); } .confidence--neutral { background: var(--surface-2); color: #50677D; border: 1px solid rgba(80, 103, 125, .18); } .data-trust { display: grid; gap: 7px; margin: 10px 0; padding: 9px 10px; border: 1px solid #d7e4ee; border-left: 4px solid var(--teal); border-radius: 8px; background: var(--surface-2); } .data-trust > strong { color: var(--navy); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .data-trust__chips { display: flex; flex-wrap: wrap; gap: 6px; } .data-trust__chips span { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid #d6e2ee; border-radius: 999px; background: var(--surface); color: #52677b; font-size: .74rem; line-height: 1.25; } .data-trust__chips b { margin-right: 3px; color: var(--ink); } .data-trust--warn { border-color: #f1d48a; border-left-color: var(--gold); background: var(--warn-bg); } .data-trust--warn .data-trust__chips span { border-color: #f3dda3; color: var(--warn-ink); } .data-trust--danger { border-color: #f2c7b8; border-left-color: var(--red); background: var(--danger-bg); } .forn-row .data-trust, .contrato .data-trust, .em .data-trust, .diaria-card .data-trust { margin-top: 8px; margin-bottom: 6px; } .em__pago { margin-top: 6px; font-size: 0.88rem; color: var(--ink); } .em__pago strong { color: var(--navy); } .em__pago .hint { color: var(--muted); font-style: italic; font-size: 0.82rem; } /* ================== Relatorio cidadao ================== */ .citizen-report { display: grid; gap: 18px; margin: 22px 0 24px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow); } .citizen-report__intro span { display: block; color: var(--teal); font-size: 0.78rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; } .citizen-report__intro h3 { margin: 0 0 8px; color: var(--navy); font-family: var(--font-h); font-size: clamp(1.45rem, 3vw, 2.15rem); } .citizen-report__intro p { margin: 0; max-width: 760px; color: var(--muted); line-height: 1.65; } .citizen-report__numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .citizen-report__numbers article { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); } .citizen-report__numbers strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.55rem; line-height: 1; margin-bottom: 6px; } .citizen-report__numbers span, .citizen-report__spotlight span { color: var(--muted); font-size: 0.82rem; font-weight: 700; } .citizen-report__spotlight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .citizen-report__spotlight article { border: 1px solid #d6e3f2; border-radius: 6px; padding: 14px; background: var(--surface); } .citizen-report__spotlight strong { display: block; margin: 6px 0; color: var(--ink); font-size: 1rem; } .citizen-report__spotlight p { margin: 0; color: var(--navy); font-weight: 700; } .citizen-report__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .citizen-report__steps a { display: grid; gap: 7px; padding: 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; } .citizen-report__steps a:hover { border-color: var(--teal); box-shadow: var(--shadow); } .citizen-report__steps strong { color: var(--navy); font-size: 1rem; } .citizen-report__steps span { color: var(--ink); line-height: 1.5; } .citizen-report__steps em { color: var(--teal); font-style: normal; font-weight: 700; font-size: 0.86rem; } .citizen-report__lai { padding: 15px 18px; background: var(--warn-bg); border: 1px solid #f2d27a; border-left: 5px solid var(--gold); border-radius: 6px; } .citizen-report__lai strong { display: block; color: var(--navy); margin-bottom: 6px; } .citizen-report__lai p { margin: 0; color: var(--ink); line-height: 1.55; } .report-divider { margin: 34px 0 18px; padding-top: 18px; border-top: 2px solid #dbe7f3; } .report-divider span { display: block; color: var(--navy); font-family: var(--font-h); font-weight: 750; font-size: 1.25rem; } .report-divider p { margin: 4px 0 0; color: var(--muted); } @media (max-width: 820px) { .citizen-report__numbers, .citizen-report__spotlight, .citizen-report__steps { grid-template-columns: 1fr; } } /* ================== COBRAR blocks ================== */ .cobrar-blocks { display: grid; gap: 40px; } .cobrar-block__title { font-family: var(--font-h); font-size: 1.3rem; color: var(--navy); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); display: inline-block; } /* ================== STATS ================== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 32px; } .stat { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .stat::after { content: ""; position: absolute; right: -28px; bottom: -28px; width: 92px; height: 92px; border-radius: 50%; background: rgba(0,75,141,.06); } .stat__value { font-family: var(--font-h); font-size: 2.4rem; font-weight: bold; color: var(--navy); line-height: 1.1; } .stat__label { font-weight: 600; margin-top: 6px; } .stat__sub { color: var(--muted); font-size: 0.88rem; margin-top: 4px; } .stat--navy { border-left-color: var(--navy); } .stat--teal { border-left-color: var(--teal); } .stat--gold { border-left-color: var(--gold); } /* highlight card */ .card.highlight { background: linear-gradient(135deg, var(--navy), var(--navy-dk)); color: var(--on-accent); border-radius: var(--radius); padding: 28px 36px; border-left: 6px solid var(--gold); box-shadow: var(--shadow); } .highlight__tag { display: inline-block; font-size: 11px; letter-spacing: 2.5px; font-weight: 750; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; } .highlight__body { font-family: var(--font-h); font-size: 1.2rem; font-style: italic; margin: 0; } /* ================== FILTER BAR ================== */ .filterbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; } .filterbar input, .filterbar select { padding: 10px 14px; border: 1px solid #C9D7E5; border-radius: 8px; background: var(--surface); font-size: 0.95rem; font-family: inherit; } .filterbar input { flex: 1; min-width: 220px; } .filterbar input:focus, .filterbar select:focus { outline: 2px solid var(--teal); outline-offset: 0; } .filterbar__count { color: var(--muted); font-size: 0.9rem; } @media (max-width: 560px) { .filterbar { align-items: stretch; } .filterbar input, .filterbar select, .filterbar__count { width: 100%; } } /* ================== PREFEITURA TABS ================== */ .pref-tabs { position: sticky; top: 72px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 10px; margin: 22px 0 8px; background: rgba(244, 248, 252, 0.95); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 75, 141, 0.08); backdrop-filter: blur(10px); } .pref-tab { flex: 0 0 auto; min-height: 40px; border: 1px solid var(--line); background: var(--surface); color: var(--navy); border-radius: 8px; padding: 8px 13px; font-weight: 750; cursor: pointer; } .pref-tab:hover, .pref-tab.is-active { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .pref-tab span { display: inline-flex; min-width: 22px; min-height: 20px; align-items: center; justify-content: center; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--gold); color: var(--navy-dk); font-size: 0.75rem; line-height: 1; } .pref-tab span:empty { display: none; } .pref-panels { margin-top: 10px; } .pref-panel { display: none; } .pref-panel.is-active { display: block; } .pref-panel > .block:first-child { margin-top: 20px; } .audit-overview { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; } .audit-metric { min-height: 112px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 8px; padding: 14px; box-shadow: 0 8px 18px rgba(0, 75, 141, 0.06); } .audit-metric--gold { border-top-color: var(--gold); } .audit-metric--red { border-top-color: var(--red); } .audit-metric__value { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.22rem; font-weight: 750; line-height: 1.15; } .audit-metric__label { display: block; margin-top: 7px; color: var(--ink); font-weight: 750; font-size: 0.86rem; } .audit-metric__sub { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; line-height: 1.35; } .keyword-audit { margin: 18px 0 22px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 10px; padding: 18px; box-shadow: 0 10px 24px rgba(0, 75, 141, 0.07); } .keyword-audit__head h3 { margin: 2px 0 6px; color: var(--navy); font-family: var(--font-h); font-size: 1.35rem; } .keyword-audit__head p, .keyword-audit__note { margin: 0; color: var(--muted); line-height: 1.5; } .keyword-audit__controls { display: grid; grid-template-columns: 260px 1fr; gap: 10px; margin-top: 14px; } .keyword-audit__controls select, .keyword-audit__controls input { width: 100%; min-height: 44px; border: 1px solid #c7d8e8; border-radius: 8px; padding: 0 12px; background: var(--surface); color: var(--ink); font: inherit; } .keyword-audit__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .keyword-audit__chips button { border: 1px solid #d6e2ee; border-radius: 999px; background: var(--surface-2); color: var(--navy); min-height: 32px; padding: 5px 10px; font-weight: 700; cursor: pointer; } .keyword-audit__chips button:hover { border-color: var(--navy); background: var(--info-bg); } .keyword-audit__chips span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 20px; margin-left: 5px; border-radius: 999px; background: var(--gold); color: var(--navy-dk); font-size: 0.75rem; } .keyword-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .keyword-result article { background: var(--surface-2); border-radius: 8px; padding: 12px; } .keyword-result strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.2rem; } .keyword-result span { color: var(--muted); font-size: 0.86rem; } .keyword-audit__warning { margin-top: 10px; padding: 10px 12px; border: 1px solid #f1d48a; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); font-size: .88rem; line-height: 1.45; } .keyword-audit__warning strong { color: #5b3d00; } .keyword-discard-list { display: grid; gap: 3px; margin-top: 6px; } .keyword-discard-list span { color: var(--warn-ink); font-size: .82rem; } .keyword-audit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .keyword-audit__grid h4 { margin: 0 0 8px; color: var(--navy); } .keyword-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); } .keyword-row--button { width: 100%; border-right: 0; border-bottom: 0; border-left: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; } .keyword-row--button:hover, .keyword-row--button:focus-visible { background: var(--info-bg); outline: 2px solid transparent; } .keyword-row span { color: var(--ink); font-weight: 700; } .keyword-row em, .keyword-row__action { display: inline-block; margin-left: 8px; padding: 3px 8px; border: 1px solid var(--info-bd); border-radius: 4px; background: var(--info-bg); color: var(--info); font-size: 0.78rem; font-style: normal; font-weight: 700; } .keyword-row__action { cursor: pointer; } .keyword-match-reason { grid-column: 1 / -1; margin-left: 0; border-color: #c9d9e8; background: var(--surface-2); color: var(--muted); font-style: normal; } .keyword-row__action:hover { background: var(--info-bg); } .keyword-row strong { color: var(--navy); white-space: nowrap; } .keyword-row small { grid-column: 1 / -1; color: var(--muted); } .keyword-audit__note { margin-top: 12px; font-size: 0.9rem; } .citizen-alerts { margin: 10px 0 16px; display: grid; gap: 10px; } .citizen-alerts__title { margin: 0; color: var(--navy); font-family: var(--font-h); font-size: 1.25rem; } .citizen-alert-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 8px; padding: 12px 14px; } .citizen-alert-card strong { color: var(--navy); } .citizen-alert-card p { margin: 3px 0 0; color: var(--muted); } .citizen-alert-card a { font-weight: 750; color: var(--navy); white-space: nowrap; } .audit-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; } .audit-shortcuts button, .audit-shortcuts a { min-height: 112px; text-align: left; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 8px; background: var(--surface); padding: 15px; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 75, 141, 0.06); text-decoration: none; color: inherit; } .audit-shortcuts button:hover, .audit-shortcuts a:hover { border-left-color: var(--gold); transform: translateY(-1px); } .audit-shortcuts strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.06rem; margin-bottom: 7px; } .audit-shortcuts span { color: var(--muted); line-height: 1.45; } @media (max-width: 920px) { .audit-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } .keyword-audit__controls, .keyword-audit__grid { grid-template-columns: 1fr; } .audit-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .citizen-alert-card { grid-template-columns: 1fr; } .indice-head, .indice-card { grid-template-columns: 1fr; } .indice-head__seal, .indice-card__score { text-align: left; } .indice-perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .indice-card__dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pref-tabs { top: 64px; } .audit-overview { grid-template-columns: 1fr 1fr; } .keyword-result { grid-template-columns: 1fr; } .audit-shortcuts { grid-template-columns: 1fr; } .indice-stats, .indice-perfis, .indice-card__dims { grid-template-columns: 1fr; } } /* ================== GRIDS ================== */ .grid { display: grid; gap: 16px; } .grid--vereadores { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid--cobrar { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 16px; } /* vereador card */ .ver-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; overflow: hidden; } .ver-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--teal); } .ver-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold); } .ver-card:hover::before { background: var(--gold); } .ver-card__name { font-family: var(--font-h); font-size: 1.15rem; font-weight: bold; color: var(--navy); margin: 0 0 6px; } .ver-card__total { color: var(--gold-dk); font-weight: 700; font-size: .95rem; margin-bottom: 12px; } .ver-card__bars { display: grid; grid-template-columns: 1fr; gap: 6px; } .ver-bar { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: 0.82rem; color: var(--muted); cursor: pointer; text-align: left; } .ver-bar:hover .ver-bar__label, .ver-bar:focus-visible .ver-bar__label { color: var(--navy); text-decoration: underline; } .ver-bar:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .ver-bar__label { width: 90px; } .ver-bar__track { flex: 1; height: 6px; background: var(--cream); border-radius: 3px; overflow: hidden; } .ver-bar__fill { height: 100%; background: var(--teal); border-radius: 3px; } .ver-bar__val { width: 28px; text-align: right; color: var(--ink); font-weight: 600; } .ver-card__emendas { width: 100%; margin-top: 14px; border: 1px solid rgba(0,75,141,.18); background: var(--cream); color: var(--navy); border-radius: 999px; padding: 9px 12px; font-weight: 700; cursor: pointer; } .ver-card__emendas:hover { background: var(--navy); color: var(--on-accent); } .method-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 18px; align-items: start; border: 1px solid var(--line); border-left: 6px solid var(--gold); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin: 16px 0 18px; } .method-card__tag { display: block; color: var(--teal); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; } .method-card h4 { margin: 0 0 6px; color: var(--navy); font-family: var(--font-h); font-size: 1.2rem; } .method-card p { margin: 0; color: var(--ink); } .method-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .method-card li { border-bottom: 1px solid var(--line); padding-bottom: 8px; } .method-card li:last-child { border-bottom: 0; padding-bottom: 0; } .method-card strong { display: block; color: var(--navy); } .method-card span { color: var(--muted); font-size: .9rem; } /* ===== Indice de relevancia parlamentar ===== */ .indice-relevancia { margin: 18px 0 20px; } .indice-head { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; align-items: start; border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; } .indice-head .block__title { margin-bottom: 6px; } .indice-head__seal { border: 1px solid rgba(0, 75, 141, .18); border-radius: 8px; background: var(--cream); padding: 14px; text-align: center; } .indice-head__seal strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 2.4rem; line-height: 1; } .indice-head__seal span { display: block; margin-top: 5px; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .indice-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; } .indice-stats div { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 12px 14px; } .indice-stats strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.45rem; } .indice-stats span { color: var(--muted); font-size: .86rem; } .indice-alert { border: 1px solid var(--warn-bd); border-left: 5px solid var(--gold); border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); padding: 12px 14px; font-size: .9rem; } .indice-alert code { background: rgba(255, 255, 255, .75); border-radius: 4px; padding: 1px 5px; } .indice-alert span { display: inline-block; margin: 4px 4px 0 0; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(109, 76, 0, .18); font-size: .78rem; font-weight: 700; } .indice-method { border: 1px solid var(--border, #e3e8ef); border-radius: 10px; background: var(--surface-2, #f8fafc); overflow: hidden; } .indice-method > summary { cursor: pointer; list-style: none; padding: 13px 16px; font-weight: 700; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; color: var(--ink, #1f2937); } .indice-method > summary::-webkit-details-marker { display: none; } .indice-method > summary span { font-size: 1.25rem; font-weight: 400; opacity: .55; } .indice-method[open] > summary span { transform: rotate(45deg); } .indice-method__body { padding: 4px 16px 16px; font-size: .9rem; line-height: 1.55; color: var(--ink-soft, #475467); } .indice-method__body p { margin: 0 0 10px; } .indice-method__step { margin-top: 12px; } .indice-method__tbl { width: 100%; border-collapse: collapse; margin: 4px 0 6px; } .indice-method__tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border, #e3e8ef); } .indice-method__tbl td:last-child { text-align: right; font-weight: 700; white-space: nowrap; } .indice-method__tbl small { font-weight: 400; opacity: .7; } .indice-method__tbl .is-pending { opacity: .6; } .indice-method__tbl .is-pending em { font-style: normal; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; } .indice-method__note, .indice-method__example, .indice-method__transp { border-left: 3px solid var(--gold, #d4a017); padding-left: 12px; } .indice-method__transp { font-style: italic; opacity: .85; margin-top: 12px; } .indice-list { display: grid; gap: 10px; margin-top: 12px; } .indice-perfis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .indice-perfis button { min-height: 62px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--navy); padding: 9px 10px; text-align: left; cursor: pointer; } .indice-perfis button:hover, .indice-perfis button:focus-visible, .indice-perfis button.is-active { border-color: var(--gold); background: var(--cream); box-shadow: 0 0 0 2px rgba(242, 188, 27, .16); } .indice-perfis strong { display: block; font-size: .86rem; } .indice-perfis span { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; line-height: 1.25; } .indice-profile-note { margin-top: 10px; border: 1px solid rgba(0, 75, 141, .16); border-radius: 8px; background: var(--surface); color: var(--muted); padding: 10px 12px; font-size: .88rem; } .indice-profile-note strong { color: var(--navy); } .indice-full { margin-top: 10px; } .indice-full summary { cursor: pointer; border: 1px solid rgba(0, 75, 141, .18); border-radius: 8px; background: var(--surface); color: var(--navy); padding: 11px 14px; font-weight: 800; } .indice-full summary:hover, .indice-full summary:focus-visible { border-color: var(--gold); background: var(--cream); } .indice-list--full { margin-top: 10px; } .indice-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) 112px; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 12px 14px; } .indice-card__rank { color: var(--gold-dk); font-family: var(--font-h); font-size: 1.25rem; font-weight: 800; text-align: center; } .indice-card h4 { margin: 0 0 4px; color: var(--navy); font-family: var(--font-h); font-size: 1.05rem; } .indice-card p { margin: 0 0 8px; color: var(--muted); font-size: .84rem; } .indice-why { margin: 9px 0 0; padding: 9px 12px 9px 28px; border-radius: 8px; background: var(--cream); color: var(--ink); font-size: .82rem; line-height: 1.35; } .indice-why li + li { margin-top: 3px; } .indice-card__dims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .indice-dim { min-width: 0; } .indice-dim span, .indice-dim strong { display: inline-block; font-size: .75rem; } .indice-dim span { color: var(--muted); } .indice-dim strong { float: right; color: var(--ink); } .indice-dim i { clear: both; display: block; height: 6px; margin-top: 3px; overflow: hidden; border-radius: 999px; background: var(--cream); } .indice-dim b { display: block; height: 100%; border-radius: inherit; background: var(--teal); } .indice-dim--fisc b { background: var(--red); } .indice-dim--rep b { background: var(--gold); } .indice-dim--pres b { background: var(--navy); } .indice-dim--pending strong { color: var(--muted); font-size: .72rem; } .indice-card__score { text-align: right; } .indice-card__score strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.8rem; line-height: 1; } .indice-card__score span { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .indice-card__score em { display: block; margin-top: 4px; color: var(--teal); font-size: .74rem; font-style: normal; font-weight: 800; } .indice-card__score button { margin-top: 8px; border: 1px solid rgba(0, 75, 141, .18); border-radius: 6px; background: var(--cream); color: var(--navy); padding: 7px 9px; font-size: .78rem; font-weight: 800; cursor: pointer; } .indice-card__score button:hover, .indice-card__score button:focus-visible { background: var(--navy); color: var(--on-accent); } /* Nota clicavel: parece o score, mas convida ao clique (abre o modal explicativo) */ .indice-card__score .indice-score-open { margin: 0 0 2px; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: right; cursor: pointer; transition: background .15s, border-color .15s; } .indice-card__score .indice-score-open:hover, .indice-card__score .indice-score-open:focus-visible { background: var(--cream); border-color: rgba(0, 75, 141, .18); color: inherit; } .indice-score-open__hint { display: block; margin-top: 5px; color: var(--teal); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .85; } /* Modal "entender a nota" — explicacao personalizada por vereador */ .nota-modal { max-width: 640px; } .nota-modal__nome { margin: 8px 0 4px; font-family: var(--font-h); color: var(--navy); font-size: 1.5rem; } .nota-modal__lead { margin: 0 0 14px; color: var(--muted); font-size: .92rem; line-height: 1.5; } .nota-modal__big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } .nota-modal__big > div { border: 1px solid var(--border, #e3e8ef); border-radius: 10px; padding: 12px; text-align: center; background: var(--cream); } .nota-modal__big strong { display: block; font-family: var(--font-h); font-size: 1.7rem; color: var(--navy); line-height: 1; } .nota-modal__big span { display: block; margin-top: 5px; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .nota-modal__h { margin: 18px 0 6px; font-size: 1.02rem; color: var(--navy); } .nota-modal__p { margin: 0 0 10px; font-size: .9rem; line-height: 1.55; color: var(--ink-soft, #475467); } .nota-modal__tbl { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 6px 0 4px; } .nota-modal__tbl th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 6px 8px; border-bottom: 2px solid var(--border, #e3e8ef); } .nota-modal__tbl th:not(:first-child), .nota-modal__tbl td:not(:first-child) { text-align: right; white-space: nowrap; } .nota-modal__tbl td { padding: 7px 8px; border-bottom: 1px solid var(--border, #e3e8ef); vertical-align: top; } .nota-modal__tbl td small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; margin-top: 2px; } .nota-modal__tbl .is-pending { opacity: .55; } .nota-modal__tbl tfoot td { border-bottom: none; color: var(--muted); } .nota-modal__tbl tfoot .is-total td { border-top: 2px solid var(--navy); padding-top: 10px; color: var(--navy); font-size: 1.05rem; } .nota-modal__note { margin: 4px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold, #d4a017); background: var(--warn-bg); border-radius: 0 8px 8px 0; font-size: .84rem; line-height: 1.5; color: var(--warn-ink); } .nota-modal__list { margin: 4px 0 0; padding-left: 18px; font-size: .9rem; line-height: 1.55; color: var(--ink-soft, #475467); } .nota-modal__list li { margin-bottom: 7px; } .nota-modal__transp { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border, #e3e8ef); font-style: italic; font-size: .85rem; color: var(--muted); line-height: 1.55; } @media (max-width: 560px) { .nota-modal__big { grid-template-columns: 1fr; } } .contract-search-note { margin: 12px 0; border-radius: 8px; padding: 12px 14px; font-size: .9rem; line-height: 1.45; } .contract-search-note strong, .contract-search-note span { display: block; } .contract-search-note a { display: inline-flex; margin: 8px 8px 0 0; border-radius: 6px; padding: 6px 10px; font-weight: 800; text-decoration: none; } .contract-search-note--ok { border: 1px solid #80cbc4; border-left: 5px solid var(--teal); background: var(--success-bg); color: #004d40; } .contract-search-note--ok a { background: var(--surface); color: var(--success-dk); } .contract-search-note--warn { border: 1px solid var(--warn-bd); border-left: 5px solid var(--gold); background: var(--warn-bg); color: var(--warn-ink); } .contract-search-note--warn a { background: var(--surface); color: #795200; } .detail-stack { display: grid; gap: 12px; margin-top: 16px; } .detail-stack section { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--cream); } .detail-stack h4 { margin: 0 0 6px; color: var(--navy); font-family: var(--font-h); } .detail-stack p { margin: 0; color: var(--ink); } .detail-stack--list { margin-top: 14px; } .matter-mini { border-top: 1px solid var(--line); padding: 12px 0; } .matter-mini:first-of-type { border-top: 0; } .matter-mini p { margin: 6px 0; color: var(--muted); } .matter-mini span { display: inline-block; margin-right: 10px; color: var(--red); font-weight: 700; font-size: .85rem; } /* ===== Card cidadão de matéria (tema + grau + por que acompanhar) ===== */ .mat-card { border-top: 1px solid var(--line); padding: 14px 0; } .mat-card:first-of-type { border-top: 0; } .mat-card > strong { display: block; margin: 6px 0 4px; } .mat-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mat-selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; border: 1px solid transparent; } .mat-selo--alto { background: var(--danger-bg); color: var(--danger-dk); border-color: var(--danger-bd); } .mat-selo--medio { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-2); } .mat-selo--baixo { background: var(--surface-2); color: var(--muted); border-color: #cfd8dc; } .mat-tema { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--success-bg); color: var(--success-dk); border: 1px solid #80cbc4; } .mat-ementa { margin: 6px 0; color: var(--muted); } .mat-porque { margin: 6px 0; padding: 8px 12px; background: var(--bg, #f7f9fa); border-left: 3px solid var(--teal); border-radius: 6px; } .mat-porque strong { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--teal); } .mat-porque ul { margin: 4px 0 0; padding-left: 18px; } .mat-porque li { font-size: .9rem; color: var(--ink, #263238); margin: 2px 0; } .mat-simbolico { margin: 6px 0; font-size: .88rem; color: #607d8b; font-style: italic; } .mat-doc { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .88rem; margin-top: 4px; } .ver-profile { display: block; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 18px; box-shadow: var(--shadow); } .entity-profile { display: block; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--gold); border-radius: var(--radius); padding: 22px; margin: 18px 0; box-shadow: var(--shadow); } .entity-profile__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .entity-profile__label { display: block; color: var(--teal); font-size: .76rem; font-weight: 700; letter-spacing: .12em; } .entity-profile h4 { margin: 6px 0; font-family: var(--font-h); color: var(--navy); font-size: 1.55rem; } .entity-profile__head button { border: 0; border-radius: 999px; background: var(--navy); color: var(--on-accent); padding: 10px 16px; font-weight: 700; cursor: pointer; } .entity-profile__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .entity-profile__stats div { background: var(--cream); border-radius: 8px; padding: 12px; } .entity-profile__stats strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.25rem; } .entity-profile__stats span, .entity-profile__note, .entity-profile__list span { color: var(--muted); } .entity-profile__note { margin: 14px 0; background: var(--warn-bg); border: 1px solid #f3d57a; border-radius: 8px; padding: 12px; } .entity-profile__list { display: grid; gap: 10px; } .entity-profile__list article { border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .entity-profile__list strong, .entity-profile__list span { display: block; } .entity-profile__list p { margin: 6px 0; } @media (max-width: 760px) { .entity-profile__head { display: block; } .entity-profile__head button { margin-top: 12px; width: 100%; } .entity-profile__stats { grid-template-columns: 1fr; } } .ver-profile__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; margin-bottom: 16px; } .ver-profile__label { display: block; color: var(--teal); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; } .ver-profile h4 { font-family: var(--font-h); color: var(--navy); font-size: 1.45rem; margin: 0 0 4px; } .ver-profile p { margin: 0; color: var(--muted); } .ver-profile__stats { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; } .ver-profile__stats div { background: var(--cream); border-radius: 8px; padding: 10px 12px; } .ver-profile__stats strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.15rem; } .ver-profile__stats span { color: var(--muted); font-size: .82rem; } .ver-profile__note { margin: -4px 0 18px !important; color: var(--muted); font-size: 0.88rem; } .ver-profile button { border: 0; background: var(--navy); color: var(--on-accent); border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer; } .ver-profile button:hover { background: var(--teal); } .ver-profile__analysis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ver-profile__analysis section { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface); } .ver-profile__analysis h5 { margin: 0 0 10px; color: var(--navy); font-family: var(--font-h); font-size: 1rem; } .ver-profile__analysis ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 0.92rem; } .ver-profile__analysis li + li { margin-top: 7px; } .impact-bars, .theme-list { display: grid; gap: 8px; } .impact-row, .theme-list div, .ver-check { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 9px; } .impact-row:first-child, .theme-list div:first-child, .ver-check:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .impact-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; } .impact-row strong, .theme-list strong, .ver-check strong { display: block; color: var(--ink); } .impact-row span, .theme-list span, .ver-check span { display: block; color: var(--muted); font-size: 0.86rem; margin-top: 3px; } .impact-row b { color: var(--navy); font-family: var(--font-h); } .score-box { display: grid; gap: 4px; background: var(--cream); border-radius: 8px; padding: 14px; margin-bottom: 10px; } .score-box strong { color: var(--navy); font-family: var(--font-h); font-size: 1.8rem; } .score-box span { color: var(--muted); font-size: .9rem; } .ver-check p { margin: 6px 0 0; color: var(--ink); font-size: 0.9rem; } .ver-profile__analysis textarea { width: 100%; min-height: 150px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: inherit; resize: vertical; } @media (max-width: 820px) { .method-card, .ver-profile__head, .ver-profile__analysis { grid-template-columns: 1fr; } .ver-profile__stats { grid-template-columns: 1fr 1fr; } .ver-profile button { width: 100%; } } /* ================== EMENDAS ================== */ .emendas { display: grid; gap: 12px; } .em { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; transition: border-color .15s, box-shadow .15s; position: relative; overflow: hidden; } .em:hover { border-color: var(--gold); box-shadow: var(--shadow); } .em__valor { font-family: var(--font-h); font-size: 1.25rem; font-weight: bold; color: var(--navy); text-align: right; white-space: nowrap; padding-top: 2px; } .em__benef { font-weight: 700; color: var(--ink); margin: 0 0 4px; font-size: 1.02rem; } .em__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: var(--muted); } .em__meta strong { color: var(--navy); font-weight: 600; } .em__obj { font-size: 0.9rem; color: var(--ink); margin: 6px 0 0; } .em__cnpj { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .em__pdf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.85rem; } .em__fiscalizar { border: 0; background: var(--navy); color: var(--on-accent); border-radius: 999px; padding: 8px 12px; font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; } .em__fiscalizar:hover { background: var(--teal); } @media (max-width: 720px) { .em { grid-template-columns: 1fr; } .em__valor { text-align: left; font-size: 1.5rem; padding-top: 0; } } .loadmore { text-align: center; margin-top: 24px; } .loadmore button { padding: 12px 32px; border: 2px solid var(--navy); background: transparent; color: var(--navy); font-weight: 700; cursor: pointer; border-radius: 999px; font-family: inherit; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; transition: background .15s, color .15s; } .loadmore button:hover { background: var(--navy); color: var(--gold); } /* ================== DIÁRIO ================== */ .diario { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; } .diario__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: block; transition: transform .15s, border-color .15s; } .diario__item:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow); } .diario__edicao { font-family: var(--font-h); font-size: 1.4rem; font-weight: bold; color: var(--navy); } .diario__data { color: var(--muted); font-size: 0.9rem; margin-top: 4px; } .diario__extra { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; background: var(--gold); color: var(--navy); padding: 2px 8px; border-radius: 4px; margin-top: 8px; } /* ================== AÇÕES ================== */ .action { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 28px 24px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; } .action::after { content: ""; position: absolute; top: 0; right: 0; width: 72px; height: 72px; background: linear-gradient(135deg, transparent 0 50%, rgba(242,194,48,.18) 50% 70%, rgba(0,75,141,.12) 70%); } .action:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 32px rgba(0,75,141,.12); } .action__num { font-family: var(--font-h); font-size: 2.2rem; font-weight: bold; color: var(--gold); display: block; margin-bottom: 10px; } .action__title { font-family: var(--font-h); font-size: 1.2rem; color: var(--navy); margin: 0 0 10px; } .action__desc { color: var(--ink); font-size: 0.95rem; margin: 0 0 14px; } .action__cta { font-weight: 700; color: var(--teal); font-size: 0.92rem; } .action:hover .action__cta { color: var(--navy); } /* ================== FOOTER ================== */ .footer { background: linear-gradient(135deg, var(--navy-dk), var(--navy)); color: var(--on-accent); padding: 40px 0 0; font-size: 0.92rem; border-top: 6px solid var(--gold); } .footer__inner { display: grid; grid-template-columns: 1.8fr 1fr 1.3fr 1.3fr; gap: 32px; padding-bottom: 28px; } .footer__inner > div > strong { display: block; margin-bottom: 10px; font-size: 0.95rem; } .footer .small { font-size: 0.8rem; line-height: 1.5; } .footer__brand span { color: var(--gold); font-weight: 600; } .footer__nav { display: grid; gap: 7px; } .footer__nav a { color: var(--on-accent); opacity: .9; text-decoration: none; } .footer__nav a:hover { opacity: 1; color: var(--gold); text-decoration: underline; } .footer__sources ul { list-style: none; padding: 0; margin: 0; } .footer__sources li { margin: 6px 0; } .footer__sources a { color: var(--gold); } .footer__updated { margin: 0 0 12px; } .footer__updated span { color: var(--gold); font-weight: 700; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.15); /* Folga extra embaixo: a legenda de leitura, o chat e o botao de voltar ao topo sao position:fixed e cobriam o texto de copyright no fim da pagina. */ padding: 16px 0 96px; font-size: .82rem; opacity: .82; } @media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .footer__inner { grid-template-columns: 1fr; } } /* ================== REPORTS ================== */ .report-note { background: var(--warn-bg); border: 1px solid rgba(184,142,46,.35); border-left: 6px solid var(--gold); border-radius: var(--radius); padding: 16px 20px; color: var(--ink); margin: 0 0 28px; } .signals { display: grid; gap: 14px; } .signal { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--teal); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,75,141,.03); position: relative; overflow: hidden; } .signal--alto { border-left-color: var(--red); } .signal--medio { border-left-color: var(--gold-dk); } .signal--critico { border-left-color: var(--danger-ink); background: var(--danger-bg-2); } .signal--critico .signal__level { color: var(--danger-ink); } .signal__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .signal__kind, .signal__level { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; } .signal__kind { color: var(--muted); } .signal__level { color: var(--red); background: var(--danger-bg); border-radius: 999px; padding: 4px 8px; } .signal h4 { font-family: var(--font-h); color: var(--navy); font-size: 1.15rem; margin: 0 0 8px; } .signal p { margin: 0 0 10px; color: var(--ink); } .signal__meta { color: var(--muted); font-size: .9rem; margin-bottom: 10px; } .signal a { font-weight: 700; font-size: .92rem; } .criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .criteria article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; } .criteria h4 { color: var(--navy); font-family: var(--font-h); margin: 0 0 8px; font-size: 1.05rem; } .criteria p { margin: 0; color: var(--muted); font-size: .94rem; } .expansao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 15px; } .source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .source-card { display: block; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--navy); border-radius: var(--radius); padding: 18px; transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; } .source-card:hover { text-decoration: none; transform: translateY(-2px); border-left-color: var(--gold); box-shadow: var(--shadow); } .source-card__value { display: block; font-family: var(--font-h); font-size: 2rem; color: var(--navy); line-height: 1; } .source-card h4 { font-family: var(--font-h); color: var(--navy); margin: 10px 0 6px; font-size: 1.1rem; } .source-card p { margin: 0; color: var(--muted); font-size: .92rem; } .source-card--link { border-left-color: var(--teal); } .source-card--link h4 { margin-top: 0; margin-bottom: 8px; } .source-card__cta { display: inline-block; margin-top: 10px; color: var(--teal); font-size: .88rem; font-weight: 700; } .source-card--future { border-left-color: var(--muted); opacity: .85; } .source-card__badge { display: inline-block; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; } .source-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .source-links a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; color: var(--ink); font-weight: 650; } .source-links a:hover { text-decoration: none; border-color: var(--gold); box-shadow: var(--shadow); } .source-links span { display: block; color: var(--gold-dk); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; } .personnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; } .personnel-card { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--teal); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .personnel-card:nth-child(2) { border-top-color: var(--gold-dk); } .personnel-card__label { color: var(--muted); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } .personnel-card__num { font-family: var(--font-h); color: var(--navy); font-size: 3rem; line-height: 1; margin-top: 8px; } .personnel-card p { margin: 4px 0 14px; color: var(--muted); } .personnel-card dl { display: grid; gap: 8px; margin: 0 0 14px; } .personnel-card dl div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--cream); padding-bottom: 7px; } .personnel-card dt { color: var(--muted); } .personnel-card dd { margin: 0; color: var(--navy); font-weight: 700; text-align: right; } .personnel-card a { font-weight: 700; } .personnel-card__status { margin-top: 12px !important; font-size: .9rem; } /* ================== MODAL ================== */ .modal { width: min(560px, 92vw); border: 0; border-radius: var(--radius); padding: 32px; box-shadow: 0 24px 64px rgba(0,0,0,.4); } .modal::backdrop { background: rgba(0,75,141,.72); } .modal__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; background: var(--cream); border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; color: var(--navy); } .modal__close:hover { background: var(--gold); } .modal h3 { font-family: var(--font-h); font-size: 1.6rem; color: var(--navy); margin: 0 0 4px; } .modal .label { font-size: 11px; letter-spacing: 3px; color: var(--gold-dk); font-weight: 700; } .modal .num { font-family: var(--font-h); font-size: 2.2rem; color: var(--navy); font-weight: bold; } .modal table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.95rem; } .modal table td { padding: 8px 0; border-bottom: 1px solid var(--line); } .modal table td:last-child { text-align: right; font-weight: 700; color: var(--navy); } .modal--wide { width: min(920px, 94vw); } .citizen-explain, .citizen-checklist { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 14px; } .citizen-explain { border-left: 4px solid var(--teal); } .citizen-checklist { border-left: 4px solid var(--gold); } .citizen-explain__head, .citizen-checklist__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .citizen-explain__head span, .citizen-checklist__head span { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .citizen-explain__head strong, .citizen-checklist__head strong { color: var(--navy); font-family: var(--font-h); text-align: right; } .citizen-explain__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .citizen-explain__grid article { background: var(--surface-2); border: 1px solid #e6edf5; border-radius: 8px; padding: 10px; } .citizen-explain__grid b { display: block; color: var(--navy); font-size: .84rem; margin-bottom: 5px; } .citizen-explain__grid span { color: var(--ink); font-size: .9rem; line-height: 1.45; } .citizen-checklist__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 12px; } .citizen-checklist label { display: flex; align-items: flex-start; gap: 8px; min-height: 36px; padding: 8px; border: 1px solid #e6edf5; border-radius: 8px; background: var(--surface-2); cursor: pointer; } .citizen-checklist input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--teal); flex: 0 0 auto; } .citizen-checklist label:has(input:checked) { background: var(--success-bg); border-color: var(--success-bd); } .citizen-checklist label span { color: var(--ink); font-size: .9rem; line-height: 1.35; } .citizen-checklist small { display: block; margin-top: 9px; color: var(--muted); line-height: 1.4; } .dossier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; } .dossier-grid section, .dossier-lai { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .dossier-grid h4, .dossier-lai h4 { margin: 0 0 10px; color: var(--navy); font-family: var(--font-h); } .dossier-text { color: var(--ink); } .dossier-ok { color: var(--teal); font-weight: 700; } .dossier-warn { color: var(--red); font-weight: 700; } .dossier-item { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; } .dossier-item:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .dossier-item span { display: block; color: var(--muted); font-size: 0.9rem; margin: 4px 0; } .dossier-item p { margin: 0; color: var(--ink); font-size: 0.92rem; } .dossier-lai { margin-top: 16px; } .dossier-lai textarea { width: 100%; min-height: 130px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: inherit; resize: vertical; } .supplier-dossier-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; } .supplier-dossier-summary article { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface); } .supplier-dossier-summary strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.05rem; } .supplier-dossier-summary span { display: block; color: var(--muted); font-size: .8rem; margin-top: 4px; } .supplier-dossier-alert { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 12px 0; background: var(--surface); } .supplier-dossier-alert strong { display: block; color: var(--navy); margin-bottom: 6px; } .supplier-dossier-alert p, .supplier-dossier-alert ul { margin: 0; color: var(--ink); } .supplier-dossier-alert ul { padding-left: 18px; } .supplier-dossier-alert li { margin: 4px 0; } .supplier-dossier-alert--warn { background: var(--warn-bg); border-color: #f2c94c; } .supplier-dossier-alert--ok { background: var(--success-bg); border-color: var(--success-bd); } .supplier-dossier-alert--red { background: var(--danger-bg); border-color: var(--danger-bd); } .supplier-dossier-alert--yellow { background: var(--warn-bg); border-color: var(--warn-2); } .supplier-dossier-alert--green { background: var(--success-bg); border-color: var(--success-bd); } .source-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .source-search code { display: inline-block; max-width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--navy); font-weight: 700; white-space: normal; overflow-wrap: anywhere; } .source-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .dossier-checklist { margin: 12px 0 0; padding-left: 20px; color: var(--ink); } .dossier-checklist li { margin: 6px 0; } .diaria-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .diaria-card .btn-dossie, .diaria-actions .btn-dossie { min-height: 30px; padding: 5px 10px; font-size: 0.78rem; } /* Search highlight */ mark.hl { background: #fff176; color: inherit; padding: 0 1px; border-radius: 2px; } /* ================== STALE DATA BANNER ================== */ .stale-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--warn-bg); border-bottom: 2px solid #e6b800; padding: 10px 24px; font-size: 14px; color: var(--warn-ink); } .stale-banner strong { font-weight: 700; } .stale-banner button { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--warn-ink); padding: 0 4px; line-height: 1; flex-shrink: 0; } .stale-banner button:hover { color: var(--ink); } /* ================== UTIL ================== */ [hidden] { display: none !important; } .empty { background: var(--surface); border: 1px dashed var(--line); padding: 40px 20px; text-align: center; border-radius: var(--radius); color: var(--muted); } .empty strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 1rem; } .empty p { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; } .empty .btn-limpar { display: inline-block; padding: 7px 18px; background: var(--navy); color: var(--on-accent); border: none; border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer; } .empty .btn-limpar:hover { background: var(--teal); } .link-button { margin-top: 12px; border: 0; background: transparent; color: var(--navy); font-weight: 700; cursor: pointer; padding: 0; } .link-button:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } .btn-share { background: #25D366; color: var(--on-accent); border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: opacity 0.2s; } .btn-share:hover { opacity: 0.8; } /* Guia Rápido de Fiscalização */ .guia-rapido { margin-top: 32px; padding: 24px; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border-radius: 16px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); } .guia-rapido__title { color: var(--on-accent); font-weight: 700; margin-bottom: 16px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; } .guia-rapido__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .guia-btn { background: var(--surface); color: var(--navy); border: 0; padding: 14px 10px; border-radius: 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .guia-btn:hover { transform: translateY(-3px); background: var(--gold); color: var(--navy-dk); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .guia-btn span { font-size: 1.5rem; } @media (max-width: 600px) { .guia-rapido__grid { grid-template-columns: 1fr 1fr; } } .btn-share { background: #25D366; color: var(--on-accent); border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: opacity 0.2s; } .btn-share:hover { opacity: 0.8; } /* Guia Rápido de Fiscalização */ .guia-rapido { margin-top: 32px; padding: 24px; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border-radius: 16px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); } .guia-rapido__title { color: var(--on-accent); font-weight: 700; margin-bottom: 16px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; } .guia-rapido__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .guia-rapido { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); backdrop-filter: blur(10px); padding: 24px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); margin-top: 30px; } .guia-rapido__title { color: var(--on-accent); font-weight: 700; margin-bottom: 15px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; } .guia-rapido__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .guia-btn { background: var(--surface); color: var(--navy); border: 0; padding: 16px 12px; border-radius: 14px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .guia-btn span { font-size: 1.8rem; } .guia-btn:hover { transform: translateY(-5px) scale(1.02); background: var(--gold); color: var(--navy-dk); box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4); } .guia-btn:active { transform: translateY(0) scale(0.98); } @media (max-width: 600px) { .guia-rapido__grid { grid-template-columns: 1fr 1fr; } .guia-rapido { padding: 15px; } } /* ================== UX REFINADO: HOME, NOVIDADES E MOBILE ================== */ .btn-share { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; background: #128C4A; color: var(--on-accent); border: 0; padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 0.86rem; font-weight: 700; transition: background .15s, transform .15s; } .btn-share:hover { background: #0B6F38; transform: translateY(-1px); } .guia-rapido { margin-top: 30px; padding: 22px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); border-radius: 14px; box-shadow: 0 16px 38px rgba(0,33,77,.18); backdrop-filter: blur(10px); } .guia-rapido__title { color: var(--on-accent); font-weight: 700; margin: 0 0 14px; font-size: 0.96rem; text-transform: uppercase; letter-spacing: 1.2px; text-align: left; } .guia-rapido__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .guia-btn { min-height: 82px; background: var(--surface); color: var(--navy); border: 1px solid rgba(255,255,255,.35); padding: 12px 8px; border-radius: 10px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; box-shadow: 0 5px 14px rgba(0,33,77,.16); } .guia-btn:hover { transform: translateY(-2px); background: var(--gold); color: var(--navy-dk); box-shadow: 0 10px 22px rgba(0,33,77,.24); } .guia-btn span { font-size: 1.45rem; line-height: 1; } .section--updates { background: var(--surface); border-bottom: 1px solid var(--line); } .updates-head { max-width: 820px; margin-bottom: 24px; } .updates-head__kicker { display: inline-block; color: var(--teal); font-size: 12px; font-weight: 750; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; } .updates-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .update-card { background: var(--bg); border: 1px solid var(--line); border-top: 5px solid var(--navy); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 22px rgba(0,75,141,.07); } .update-card--pref { border-top-color: var(--teal); } .update-card--people { border-top-color: var(--navy); } .update-card--neutral { border-top-color: var(--gold); } .update-card--ux { border-top-color: var(--red); } .update-card__tag { display: inline-block; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px; } .update-card h3 { margin: 0 0 8px; color: var(--navy); font-family: var(--font-h); font-size: 1.15rem; } .update-card p { margin: 0; color: var(--ink); font-size: 0.95rem; } .hub-card--pessoal { border-top-color: var(--teal); } .hub-card--pessoal .hub-card__kicker, .hub-card--pessoal .hub-card__cta { color: var(--teal); } .diarias-ranking { margin: 18px 0; display: grid; gap: 12px; } .diarias-ranking__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .diarias-ranking__summary article { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,250,245,.82)); } .diarias-ranking__summary span, .diarias-ranking__panel-head p { color: var(--muted); font-size: .84rem; font-weight: 750; } .diarias-ranking__summary strong { color: var(--navy); font-family: var(--font-h); font-size: 1.35rem; } .diarias-ranking__summary small { color: var(--ink); font-weight: 750; line-height: 1.35; } .diarias-ranking__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .diarias-ranking__panel { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.72); } .diarias-ranking__panel-head { display: grid; gap: 4px; padding: 4px 2px 8px; border-bottom: 1px solid rgba(207,224,239,.7); } .diarias-ranking__panel-head h4 { margin: 0; color: var(--navy); font-family: var(--font-h); font-size: 1rem; } .diarias-ranking__panel-head p { margin: 0; line-height: 1.4; } .diarias-list-heading { display: grid; gap: 4px; margin: 24px 0 10px; padding: 14px 16px; border-left: 4px solid var(--gold); border-radius: 8px; background: var(--gold-soft); } .diarias-list-heading h3, .diarias-list-heading p { margin: 0; } .diarias-list-heading h3 { color: var(--navy); font-family: var(--font-h); font-size: 1.05rem; } .diarias-list-heading p { color: var(--ink); font-size: .9rem; line-height: 1.45; } .diaria-rank-row { display: grid; grid-template-columns: 38px minmax(190px, 1.15fr) minmax(150px, .9fr) minmax(150px, .9fr) 140px 140px; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .diaria-rank-row__pos { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--navy); color: var(--on-accent); font-weight: 750; } .diaria-rank-row__person { display: grid; gap: 3px; } .diaria-rank-row__person strong { color: var(--ink); } .diaria-rank-row__person small, .diaria-rank-row__function { color: var(--muted); font-size: .83rem; font-weight: 750; line-height: 1.3; } .diaria-rank-row__function { padding: 7px 9px; border-radius: 8px; background: rgba(0,75,141,.06); } .diaria-rank-row__function small, .diaria-rank-row__period small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; font-weight: 700; line-height: 1.3; } .diaria-rank-row__period { display: grid; gap: 2px; color: var(--ink); font-size: .86rem; } .diaria-rank-row--compact { grid-template-columns: 30px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .95fr) max-content; gap: 8px; padding: 9px 10px; } /* Permite que as colunas encolham e o texto quebre, em vez de empurrar o valor. */ .diaria-rank-row--compact > * { min-width: 0; } .diaria-rank-row--compact .diaria-rank-row__person strong, .diaria-rank-row--compact .diaria-rank-row__function { overflow-wrap: anywhere; } .diaria-rank-row--compact b { color: var(--navy); text-align: right; white-space: nowrap; } /* Coluna de valores: duas caixinhas rotuladas — diárias (viagens) e salário mensal — em cores diferentes para o leitor leigo não somar nem confundir. */ .diaria-rank-row__valores { display: grid; gap: 4px; justify-items: stretch; text-align: right; max-width: 185px; min-width: 150px; } .dr-val { display: grid; gap: 0; padding: 3px 8px; border-radius: 6px; line-height: 1.25; } .dr-val small { font-size: .68rem; white-space: nowrap; opacity: .85; } .dr-val b { font-size: .92rem; white-space: nowrap; } .dr-val--diarias { background: var(--success-bg); border: 1px solid #bfe0d9; color: #0b5345; } .dr-val--salario { background: var(--surface-2); border: 1px solid #ccd8ec; color: #1a3a6b; } .dr-val--vazio b { font-size: .74rem; font-style: italic; opacity: .8; } .dr-val__nota { font-size: .7rem; color: var(--warn-ink); white-space: nowrap; } .diaria-person-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .diaria-person-tag { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 3px 7px; border: 1px solid #cfe0ef; background: var(--surface-2); color: var(--navy); font-size: .72rem; font-style: normal; font-weight: 800; line-height: 1.1; } .diaria-person-tag--commissioned { border-color: #f7cfcf; background: var(--danger-bg-2); color: var(--red); } .diaria-person-tag--located { border-color: #bde8d0; background: var(--success-bg); color: var(--teal); } .diaria-person-tag--unknown { border-color: #eadfb9; background: var(--warn-bg); color: #8a6500; } .empty--small { padding: 12px; font-size: .9rem; } .diarias-list { display: grid; gap: 12px; } .diaria-card { display: grid; grid-template-columns: 220px 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 8px; padding: 16px; } .diaria-card__value strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.25rem; } .diaria-card__value span, .diaria-card__meta { color: var(--muted); font-size: 0.9rem; } .diaria-card__body h4 { margin: 0 0 6px; color: var(--navy); } .diaria-card__body { min-width: 0; } .diaria-card__person-label { display: block; margin-bottom: 3px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .diaria-card__role { display: inline-flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: rgba(0,75,141,.06); color: var(--ink); font-size: .9rem; } .diaria-card__role small { color: var(--muted); font-weight: 750; } .diaria-card__body p { margin: 0 0 10px; } .diaria-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; } @media (max-width: 940px) { .guia-rapido__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .updates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .diarias-ranking__summary, .diarias-ranking__grid { grid-template-columns: 1fr; } .diaria-rank-row { grid-template-columns: 34px 1fr; } .diaria-rank-row--compact { grid-template-columns: 30px 1fr; row-gap: 4px; } .diaria-rank-row--compact > *:not(.diaria-rank-row__pos) { grid-column: 2; } .diaria-rank-row--compact b { text-align: left; } .diaria-card { grid-template-columns: 1fr; } } @media (max-width: 600px) { .container { padding: 0 16px; } .hero { padding: 46px 0 56px; } .guia-rapido { padding: 14px; margin-top: 22px; } .guia-rapido__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .guia-btn { min-height: 72px; padding: 10px 6px; font-size: 0.82rem; } .updates-grid { grid-template-columns: 1fr; } .update-card { padding: 16px; } .btn-share { width: 100%; } } /* ================== UX POLISH: fiscalização clara ================== */ body { background: linear-gradient(180deg, rgba(0,75,141,.05), transparent 340px), linear-gradient(90deg, rgba(7,138,75,.035), transparent 42%), var(--bg); } .topbar__inner { min-height: 76px; } .nav__link { min-height: 38px; display: inline-flex; align-items: center; } .section { padding: 58px 0 72px; } .section--camara, .section--prefeitura { padding-top: 42px; } .bigheader { position: relative; padding: 30px 34px; margin-bottom: 34px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,251,255,.92)); box-shadow: 0 18px 42px rgba(0,75,141,.08); } .bigheader::after { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--navy), var(--gold), var(--teal)); opacity: .9; } .bigheader__title, .section__title, .block__title, .feature-card h3, .hub-card__title, .keyword-audit__head h3, .citizen-alerts__title, .signal h4 { letter-spacing: 0; } .bigheader__lead { max-width: 900px; line-height: 1.7; } .civic-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .civic-actions a, .civic-actions button { min-height: 40px; border: 1px solid #cfe0ef; border-radius: 999px; background: var(--surface); color: var(--navy); padding: 8px 14px; font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 6px 16px rgba(0,75,141,.08); } .civic-actions a:hover, .civic-actions button:hover { text-decoration: none; background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .reader-summary, .keyword-audit, .report-note, .block.is-collapsed, .method-card, .ver-profile, .entity-profile { box-shadow: 0 12px 30px rgba(0,75,141,.07); } .reader-summary, .keyword-audit { background: linear-gradient(135deg, var(--surface), var(--surface-2)); } .stats, .audit-overview, .keyword-result { gap: 12px; } .stat, .audit-metric, .keyword-result article, .feature-card, .hub-card, .ver-card, .em, .contrato, .signal, .citizen-alert-card { border-radius: 10px; } .stat, .audit-metric { min-height: 128px; box-shadow: 0 10px 24px rgba(0,75,141,.07); } .stat__label, .audit-metric__label, .keyword-result span { font-weight: 750; } .filterbar { background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 8px 20px rgba(0,75,141,.05); } .filterbar input, .filterbar select, .keyword-audit__controls input, .keyword-audit__controls select { border-color: #bfd3e7; box-shadow: inset 0 1px 0 rgba(0,75,141,.03); } .filterbar input:focus, .filterbar select:focus, .keyword-audit__controls input:focus, .keyword-audit__controls select:focus { border-color: var(--teal); outline: 3px solid rgba(7,138,75,.15); } .keyword-audit__head { display: grid; grid-template-columns: 1fr; gap: 4px; } .keyword-audit__chips button { transition: transform .12s ease, background .12s ease, border-color .12s ease; } .keyword-audit__chips button:hover { transform: translateY(-1px); } .keyword-row { align-items: start; } .citizen-alert-card { background: linear-gradient(90deg, var(--surface), var(--surface-2)); } .signal { box-shadow: 0 10px 24px rgba(0,75,141,.06); } .signal__level { background: var(--warn-bg); } .block { margin-top: 44px; } .block__head { padding-bottom: 8px; border-bottom: 1px solid rgba(220,230,240,.8); } .block__toggle { box-shadow: none; } .hero--modern { min-height: calc(100vh - 82px); display: flex; align-items: center; padding: 78px 0 86px; } .hero__lead { max-width: 720px; } .search { max-width: 860px; } .audit-chips { max-width: 900px; } .hub-v2 { max-width: 980px; } .feature-card { padding: 30px; } .feature-card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); color: var(--navy); font-size: 1.7rem; } @media (max-width: 760px) { .bigheader { padding: 24px 20px; } .civic-actions a, .civic-actions button { width: 100%; justify-content: center; } .hero--modern { min-height: auto; padding: 56px 0 68px; } .search { flex-direction: column; padding: 10px; } .search input, .search button { width: 100%; } } /* ================== STRONGER REDESIGN PASS ================== */ .section--prefeitura, .section--camara { background: linear-gradient(180deg, var(--surface-2) 0, var(--surface-2) 220px, var(--cream) 100%); } .section--prefeitura .breadcrumb, .section--camara .breadcrumb, body[data-page="relatorios"] .breadcrumb { margin-bottom: 14px; } .bigheader { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); gap: 24px 34px; align-items: center; overflow: hidden; } .bigheader__kicker, .bigheader__title, .bigheader__lead, .bigheader > .muted { grid-column: 1; } .bigheader .reader-summary { grid-column: 2; grid-row: 1 / span 4; margin: 0; } .bigheader .civic-actions { grid-column: 1 / -1; margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(220,230,240,.85); } .bigheader .reader-summary { background: linear-gradient(135deg, var(--navy), #06345e); border: 0; border-left: 6px solid var(--gold); color: var(--on-accent); padding: 22px; } .bigheader .reader-summary__label { color: var(--gold); } .bigheader .reader-summary p { color: rgba(255,255,255,.9); font-size: 0.98rem; } .bigheader .reader-summary__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .bigheader .reader-summary__chips span { display: block; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: var(--on-accent); border-radius: 10px; padding: 10px; } .bigheader .reader-summary__chips strong, .bigheader .reader-summary__chips small { display: block; } .bigheader .reader-summary__chips strong { color: var(--on-accent); font-size: 1rem; } .bigheader .reader-summary__chips small { margin-top: 2px; color: rgba(255,255,255,.74); font-weight: 700; } .civic-actions a, .civic-actions button { background: var(--navy); color: var(--on-accent); border-color: var(--navy); box-shadow: 0 10px 20px rgba(0,75,141,.16); } .civic-actions a:first-child, .civic-actions button:first-child { background: var(--gold); color: var(--navy-dk); border-color: var(--gold); } .pref-tabs { top: 82px; border-radius: 14px; padding: 8px; background: var(--surface); box-shadow: 0 16px 36px rgba(0,75,141,.12); } .pref-tab { border: 0; background: var(--surface-2); border-radius: 10px; min-height: 44px; } .pref-tab span { display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: rgba(0,75,141,.1); color: var(--navy-dk); font-size: .76rem; font-weight: 800; } .pref-tab.is-active span { background: rgba(255,255,255,.18); color: var(--on-accent); } .pref-tab.is-active { box-shadow: 0 10px 18px rgba(0,75,141,.18); } .audit-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; } .audit-metric { position: relative; min-height: 132px; padding: 16px; border-left: 0; border-top-width: 5px; text-align: left; font: inherit; color: inherit; cursor: pointer; } .audit-metric:first-child { grid-column: span 2; background: linear-gradient(135deg, var(--surface), var(--surface-2)); } .audit-metric:hover { transform: translateY(-2px); border-color: #bfd3e7; box-shadow: 0 16px 34px rgba(0,75,141,.12); } .audit-metric--hero { border-top-color: var(--navy); background: linear-gradient(135deg, rgba(0,75,141,.98), rgba(0,55,107,.94)) !important; color: var(--on-accent); } .audit-metric--hero .audit-metric__value, .audit-metric--hero .audit-metric__label { color: var(--on-accent); } .audit-metric--hero .audit-metric__sub { color: rgba(255,255,255,.76); } .audit-metric__value { font-size: 1.42rem; } .reader-summary--wide { border-left-color: var(--gold); padding: 22px; } .keyword-audit { border-left: 0; border-top: 6px solid var(--teal); padding: 22px; } .keyword-audit__controls { grid-template-columns: 300px 1fr; } .keyword-audit__controls select, .keyword-audit__controls input { min-height: 50px; } .keyword-result article { border: 1px solid var(--line); background: var(--surface); } .citizen-alerts { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .citizen-alert-card { border-left-width: 4px; box-shadow: none; } .audit-shortcuts { gap: 12px; } .audit-shortcuts button, .audit-shortcuts a { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; min-height: 118px; text-align: left; } .audit-shortcuts small { grid-row: span 2; min-width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,75,141,.08); color: var(--navy); font-size: 1.05rem; font-weight: 800; } .audit-shortcuts strong { margin: 1px 0 0; } .audit-shortcuts span { grid-column: 2; } .data-empty { grid-column: 1 / -1; background: var(--warn-bg); border: 1px solid #f2d27a; border-left: 6px solid var(--gold); border-radius: 12px; padding: 18px 20px; color: var(--ink); } .data-empty strong { display: block; color: var(--navy); font-size: 1.08rem; margin-bottom: 4px; } .data-empty p { margin: 0; color: var(--muted); } /* ================== HOME: operational command center ================== */ .home-ops { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .home-ops__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); grid-template-areas: "kicker brief" "title brief" "lead brief" "fresh brief"; gap: 8px 26px; align-self: start; min-height: 0; padding: 22px 24px; border-radius: 10px; background: linear-gradient(135deg, rgba(0,75,141,.98), rgba(0,55,107,.95)); color: var(--on-accent); box-shadow: 0 18px 44px rgba(0,75,141,.16); } .home-ops__head span, .home-action span { display: block; color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; } .home-ops__head > span { grid-area: kicker; } .home-ops__head h2 { grid-area: title; max-width: 19ch; margin: 0; font-size: clamp(1.7rem, 2.55vw, 2.45rem); line-height: 1.08; } .home-ops__head p { grid-area: lead; max-width: 64ch; margin: 0; color: rgba(255,255,255,.82); line-height: 1.55; } .home-ops__brief { grid-area: brief; align-self: stretch; align-content: center; margin-top: 0; padding: 0 0 0 22px; border-top: 0; border-left: 1px solid rgba(255,255,255,.18); display: grid; gap: 8px; } .home-ops__brief strong { color: var(--on-accent); font-size: .95rem; letter-spacing: 0; } .home-ops__brief a { display: block; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font-weight: 750; } .home-ops__brief a:hover { background: rgba(255,255,255,.15); text-decoration: none; } .home-ops__freshness { grid-area: fresh; width: fit-content; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(242,194,48,.14); color: #ffe394; font-size: .82rem; font-weight: 750; } .home-data-health { margin-top: 12px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.09); display: flex; justify-content: space-between; gap: 14px; align-items: center; } .home-data-health span { color: rgba(255,255,255,.7); letter-spacing: 1px; margin-bottom: 4px; } .home-data-health strong { display: block; color: var(--on-accent); font-size: 1.15rem; } .home-data-health small { display: block; color: rgba(255,255,255,.78); line-height: 1.35; font-weight: 650; } .home-data-health a { flex-shrink: 0; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.12); color: var(--on-accent); font-size: .78rem; font-weight: 800; } .home-data-health a:hover { background: rgba(255,255,255,.2); text-decoration: none; } .home-data-health--ok { border-color: rgba(86,196,143,.45); background: rgba(7,138,75,.22); } .home-data-health--attention { border-color: rgba(242,194,48,.5); background: rgba(242,194,48,.16); } .home-data-health--critical { border-color: rgba(198,40,40,.55); background: rgba(198,40,40,.2); } /* Institutional tone: remove illustrative/decorative icon language */ .hub-item__icon, .feature-card__icon, .module__icon, .hub-card__icon { display: none !important; } .hub-item { min-height: 58px; justify-content: center; } .feature-card { padding-top: 24px; } .block__title, .subblock__title, .section__title, .bigheader__title { letter-spacing: 0; } .btn-share, .btn-dossie, .btn-link, .pdf-action { border-radius: 6px !important; font-weight: 750; } .home-ops__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .home-ops__side { display: grid; gap: 12px; align-self: start; min-width: 0; } .home-stat, .priority-row, .home-action { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 18px rgba(0,75,141,.06); } .home-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label cta" "value value" "note note"; align-content: start; gap: 6px 10px; min-height: 0; padding: 13px 14px; } .home-stat:hover, .priority-row:hover, .home-action:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 16px 34px rgba(0,75,141,.12); } .home-stat span { grid-area: label; color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: 1px; } .home-stat strong { grid-area: value; margin: 0; color: var(--navy); font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.05; } .home-stat small { grid-area: note; margin: 0; color: var(--muted); font-weight: 700; line-height: 1.35; } .home-stat em, .priority-row em { align-self: start; justify-self: end; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; background: var(--info-bg); color: var(--navy); font-style: normal; font-size: .72rem; font-weight: 850; white-space: nowrap; } .home-stat em { grid-area: cta; } .home-ops__priorities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .home-money-map { grid-column: 1 / -1; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .home-money-map__head { display: grid; gap: 4px; margin-bottom: 14px; } .home-money-map__head span { color: var(--gold-dk); font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .home-money-map__head strong { color: var(--navy); font-family: var(--font-h); font-size: 1.18rem; } .home-money-map__head small { color: var(--muted); line-height: 1.45; } .home-money-map__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .money-topic { display: grid; gap: 9px; padding: 14px; border: 1px solid #d7e4ef; border-radius: 8px; background: var(--surface-2); } .money-topic__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .money-topic__top span { color: var(--ink); font-weight: 800; } .money-topic__top strong { color: var(--navy); white-space: nowrap; } .money-topic__bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .money-topic__bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--gold)); } .money-topic p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; } .money-topic__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .money-topic__actions a, .money-topic__actions button { display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 30px; padding: 5px 10px; border-radius: 999px; border: 1px solid #b8cee3; background: var(--surface); color: var(--navy); font: inherit; font-size: .78rem; font-weight: 800; text-decoration: none; cursor: pointer; } .money-topic__actions button { border-color: var(--success-bd); color: var(--success); } .money-topic__actions a:hover, .money-topic__actions button:hover { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .home-trend-watch { grid-column: 1 / -1; margin-top: 16px; padding: 18px; border: 1px solid #d7e4ef; border-radius: 10px; background: var(--surface-2); } .home-trend-watch__head { display: grid; gap: 4px; margin-bottom: 14px; } .home-trend-watch__head span { color: var(--teal); font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .home-trend-watch__head strong { color: var(--navy); font-family: var(--font-h); font-size: 1.18rem; } .home-trend-watch__head small { color: var(--muted); line-height: 1.45; } .home-trend-watch__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .trend-card { display: grid; gap: 18px; padding: 20px; border: 1px solid #d7e4ef; border-left: 5px solid var(--navy); border-radius: 8px; background: var(--surface); } .trend-card--up { border-left-color: #b77900; } .trend-card--down { border-left-color: #00845a; } .trend-card--stable, .trend-card--neutral { border-left-color: #5f6f82; } .trend-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .trend-card__top span { color: var(--ink); font-weight: 850; } .trend-card__top strong { padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--navy); font-size: .78rem; text-transform: uppercase; white-space: nowrap; } .trend-card__values { display: grid; gap: 16px; } .trend-card__values div { display: grid; grid-template-columns: minmax(96px, 1fr) auto; gap: 3px 8px; align-items: center; } .trend-card__values small { color: var(--muted); font-size: .76rem; font-weight: 800; } .trend-card__values b { color: var(--navy); font-size: .9rem; white-space: nowrap; } .trend-card__values i { grid-column: 1 / -1; display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--navy)); } .trend-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; } .trend-compare-bars { display: grid; gap: 8px; margin: 12px 0 16px; } .trend-compare-bars div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; } .trend-compare-bars span { color: var(--muted); font-weight: 850; } .trend-compare-bars i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--gold)); } .salary-transparency { display: grid; gap: 14px; margin: 16px 0 20px; padding: 18px; border: 1px solid #d7e4ef; border-left: 5px solid var(--teal); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 24px rgba(0,75,141,.06); } .salary-transparency:empty { display: none; } .salary-transparency__head { display: grid; gap: 4px; } .salary-transparency__head span { color: var(--teal); font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .salary-transparency__head strong { color: var(--navy); font-family: var(--font-h); font-size: 1.18rem; } .salary-transparency__head small { color: var(--muted); line-height: 1.45; } .salary-transparency__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .salary-card { display: grid; gap: 5px; padding: 14px; border: 1px solid #d7e4ef; border-radius: 8px; background: var(--surface-2); } .salary-card--main { background: var(--success-bg); border-color: #add9c4; } .salary-card span { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; } .salary-card strong { color: var(--navy); font-family: var(--font-h); font-size: 1.42rem; line-height: 1.1; } .salary-card small { color: var(--muted); font-weight: 700; line-height: 1.35; } .salary-transparency__note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); } .salary-transparency__note strong { display: block; color: var(--ink); margin-bottom: 4px; } .salary-transparency__note p { margin: 0; color: var(--muted); line-height: 1.45; } .salary-transparency__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .salary-transparency__actions a, .salary-transparency__actions button { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid #b8cee3; border-radius: 999px; background: var(--surface); color: var(--navy); font: inherit; font-size: .78rem; font-weight: 850; text-decoration: none; cursor: pointer; } .salary-transparency__actions button { border-color: var(--success-bd); color: var(--success); } .salary-transparency__actions a:hover, .salary-transparency__actions button:hover { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .salary-payroll { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .salary-payroll--empty { padding: 12px; border: 1px dashed #b8cee3; border-radius: 8px; background: var(--surface-2); } .salary-payroll--empty p { margin: 4px 0 0; color: var(--muted); } .salary-payroll__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .salary-payroll__head span { display: block; color: var(--teal); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .salary-payroll__head strong { display: block; color: var(--navy); font-family: var(--font-h); margin-top: 2px; } .salary-payroll__head small { display: block; color: var(--muted); line-height: 1.45; margin-top: 4px; } .salary-payroll__sum { min-width: 190px; padding: 10px 12px; border: 1px solid #d7e4ef; border-radius: 8px; background: var(--surface-2); text-align: right; } .salary-payroll__sum strong { font-size: 1.2rem; } .salary-payroll__sum span { color: var(--muted); letter-spacing: 0; text-transform: none; } .salary-payroll__table { display: grid; overflow-x: auto; border: 1px solid #d7e4ef; border-radius: 8px; background: var(--surface); } .salary-payroll__row { display: grid; grid-template-columns: minmax(230px, 1.4fr) 70px 130px 130px 130px 112px; gap: 10px; align-items: center; min-width: 820px; padding: 10px 12px; border-top: 1px solid #e7eef5; } .salary-payroll__row:first-child { border-top: 0; } .salary-payroll__row--head { background: var(--surface-2); color: var(--muted); font-size: .74rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .salary-payroll__row span { color: var(--ink); font-size: .88rem; } .salary-payroll__row strong { display: block; color: var(--navy); line-height: 1.2; } .salary-payroll__row small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.3; margin-top: 2px; } .salary-payroll__row button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--success-bd); border-radius: 999px; background: var(--surface); color: var(--success); font: inherit; font-size: .76rem; font-weight: 850; cursor: pointer; } .salary-payroll__row button:hover { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .salary-payroll__warn { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; } .salary-modal-list { display: grid; gap: 8px; margin: 12px 0 16px; } .salary-modal-list article { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #d7e4ef; border-radius: 8px; background: var(--surface-2); } .salary-modal-list strong { color: var(--navy); } .salary-modal-list span, .salary-modal-list small { color: var(--muted); line-height: 1.35; } @media (max-width: 820px) { .salary-transparency__grid, .salary-transparency__note, .salary-payroll__head { grid-template-columns: 1fr; } .salary-transparency__actions { justify-content: flex-start; } .salary-payroll__sum { text-align: left; } } .home-data-backlog { display: grid; gap: 10px; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 24px rgba(0,75,141,.07); padding: 15px; } .home-data-backlog__head span { display: block; color: var(--gold-dk); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: 1px; } .home-data-backlog__head strong { display: block; color: var(--navy); font-size: 1.08rem; margin-top: 3px; } .home-data-backlog__head small { display: block; color: var(--muted); font-weight: 700; margin-top: 4px; } .home-data-backlog__list { display: grid; gap: 8px; } .home-data-issue { display: grid; grid-template-columns: 58px 1fr; gap: 2px 10px; align-items: start; padding: 10px 0 0; border-top: 1px solid var(--line); } .home-data-issue:hover { text-decoration: none; } .home-data-issue span { grid-row: span 2; align-self: start; display: inline-flex; justify-content: center; padding: 4px 7px; border-radius: 999px; background: var(--warn-bg); color: #8a5b00; font-size: .68rem; font-weight: 850; text-transform: uppercase; } .home-data-issue--error span { background: var(--danger-bg); color: var(--danger-ink); } .home-data-issue--info span { background: var(--info-bg); color: var(--navy); } .home-data-issue strong { color: var(--ink); font-size: .9rem; line-height: 1.25; } .home-data-issue small { color: var(--muted); font-weight: 700; line-height: 1.35; } .priority-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 12px; align-items: center; align-content: start; padding: 14px 15px; min-height: 0; } .priority-row span { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(7,138,75,.1); color: var(--teal); font-weight: 800; } .priority-row strong { color: var(--navy); line-height: 1.2; } .priority-row small { grid-column: 2; color: var(--muted); font-weight: 700; } .priority-row em { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; } .home-ops__actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .home-action { display: block; padding: 20px; border-top: 5px solid var(--teal); } .home-action--primary { border-top-color: var(--navy); } .home-action--gold { border-top-color: var(--gold); } .home-action strong { display: block; color: var(--navy); font-size: 1.2rem; margin-bottom: 5px; } .home-action small { display: block; color: var(--muted); line-height: 1.45; font-weight: 700; } @media (max-width: 980px) { .home-ops, .home-ops__actions { grid-template-columns: 1fr; } .home-ops__head { grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "lead" "brief" "fresh"; } .home-ops__brief { padding: 16px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); } .home-ops__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-ops__priorities { grid-template-columns: 1fr; } .home-ops__head { grid-row: auto; } } @media (max-width: 620px) { .priority-row { grid-template-columns: 40px minmax(0, 1fr); } .priority-row em { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; } } /* ================== SITEWIDE DASHBOARD PASS ================== */ body { background: linear-gradient(180deg, var(--surface-2) 0, var(--surface-2) 280px, var(--surface-2) 100%); } .container { max-width: 1220px; } .section { padding: 34px 0 56px; } .section__header { max-width: 860px; margin-bottom: 22px; } .section__title { margin-bottom: 8px; } .section__lead, .block__lead { max-width: 920px; } .bigheader { margin-bottom: 22px; border-radius: 10px; } .bigheader:not(:has(.reader-summary)) { display: block; padding: 24px 28px; } .bigheader:not(:has(.reader-summary)) .bigheader__title { font-size: clamp(2rem, 3.4vw, 3.2rem); margin: 6px 0 10px; } .bigheader:not(:has(.reader-summary)) .bigheader__lead { font-size: 1rem; max-width: 860px; line-height: 1.58; } .bigheader:not(:has(.reader-summary)) .civic-actions { margin-top: 16px; padding-top: 14px; } body[data-page="home"] .hero--modern { min-height: auto; padding: 58px 0 64px; background: linear-gradient(90deg, rgba(242,194,48,.08) 0 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px), linear-gradient(135deg, #044f8f 0%, #06446f 48%, #07334f 100%); background-size: 72px 72px, 72px 72px, auto; border-bottom: 1px solid rgba(255,255,255,.18); } /* ── Duas colunas: conteúdo ← → hub ── */ body[data-page="home"] .hero--modern .container { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 72px; } body[data-page="home"] .hero__content { min-width: 0; max-width: 710px; } body[data-page="home"] .hero__title { font-size: clamp(2.55rem, 5vw, 4.45rem); line-height: 1.02; max-width: 690px; margin: 20px 0 18px; text-wrap: balance; } body[data-page="home"] .hero__lead { font-size: 1.08rem; line-height: 1.65; max-width: 650px; margin: 0 0 20px; color: rgba(255,255,255,.88); } body[data-page="home"] .hero__kicker { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 11px; border: 1px solid rgba(242,194,48,.42); border-radius: 999px; background: rgba(242,194,48,.1); color: #ffd34d; font-size: .72rem; font-weight: 750; letter-spacing: .1em; margin-bottom: 0; text-transform: uppercase; } body[data-page="home"] #atualizado { display: inline-flex; align-items: center; margin-left: 8px; color: rgba(255,255,255,.58); vertical-align: middle; } body[data-page="home"] .hero__proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; } body[data-page="home"] .hero__proof span { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.86); font-size: .78rem; font-weight: 750; } body[data-page="home"] .search-box { margin-top: 0; max-width: 660px; } body[data-page="home"] .search { max-width: 100%; padding: 7px; border-radius: 14px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); box-shadow: 0 22px 44px rgba(0,0,0,.16); } body[data-page="home"] .search input { padding: 12px 16px; font-size: .98rem; } body[data-page="home"] .search button { border-radius: 10px; padding: 12px 20px; font-size: .82rem; text-transform: none; } body[data-page="home"] .start-guide { max-width: 660px; margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.08); box-shadow: 0 18px 36px rgba(0,0,0,.12); } body[data-page="home"] .start-guide__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; } body[data-page="home"] .start-guide__head span { color: var(--gold); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } body[data-page="home"] .start-guide__head strong { color: rgba(255,255,255,.92); font-size: .95rem; } body[data-page="home"] .start-guide__choices { display: flex; flex-wrap: wrap; gap: 8px; } body[data-page="home"] .start-guide__choices button { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); padding: 7px 11px; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; } body[data-page="home"] .start-guide__choices button:hover, body[data-page="home"] .start-guide__choices button.is-active { background: var(--gold); border-color: var(--gold); color: #10243a; } body[data-page="home"] .start-guide__detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); } body[data-page="home"] .start-guide__detail strong { display: block; color: var(--on-accent); margin-bottom: 4px; } body[data-page="home"] .start-guide__detail p { margin: 0; color: rgba(255,255,255,.8); line-height: 1.45; } body[data-page="home"] .start-guide__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body[data-page="home"] .start-guide__facts span { padding: 10px; border-radius: 8px; background: rgba(0,0,0,.12); color: rgba(255,255,255,.82); font-size: .83rem; line-height: 1.45; } body[data-page="home"] .start-guide__facts b { color: var(--gold); } body[data-page="home"] .start-guide__detail a { justify-self: end; display: inline-flex; align-items: center; min-height: 38px; padding: 9px 13px; border-radius: 8px; background: var(--surface); color: var(--navy); font-weight: 850; text-decoration: none; white-space: nowrap; } /* ── Hub — coluna direita compacta ── */ body[data-page="home"] .hub-full { padding: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; box-shadow: 0 24px 54px rgba(0,0,0,.14); } body[data-page="home"] .hub-full__title { color: rgba(255,255,255,0.66); font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; font-family: var(--font-b); } body[data-page="home"] .hub-grid-18 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Glass cards */ body[data-page="home"] .hub-grid-18 .hub-item { background: rgba(255,255,255,0.075); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none; padding: 14px 10px; gap: 8px; border-radius: 8px; } body[data-page="home"] .hub-grid-18 .hub-item:hover { background: rgba(255,255,255,0.15); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.25); } body[data-page="home"] .hub-grid-18 .hub-item__icon svg { width: 28px; height: 28px; stroke: rgba(255,255,255,0.85); } body[data-page="home"] .hub-grid-18 .hub-item:hover .hub-item__icon svg { stroke: var(--gold); transform: scale(1.12) rotate(4deg); } body[data-page="home"] .hub-grid-18 .hub-item span { color: rgba(255,255,255,0.92); font-size: 1rem; font-weight: 750; line-height: 1.3; } body[data-page="home"] .hub-grid-18 .hub-item__cue { display: block; color: var(--gold); font-size: .78rem; font-weight: 600; line-height: 1.25; margin-top: 3px; opacity: .85; } body[data-page="home"] .hub-grid-18 .hub-item:hover .hub-item__cue { opacity: 1; } /* ── Card números ao vivo ── */ body[data-page="home"] .hub-numeros { margin-top: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 16px; } body[data-page="home"] .hub-numeros__titulo { color: rgba(255,255,255,.66); font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; font-family: var(--font-b); } body[data-page="home"] .hub-numeros__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } body[data-page="home"] .hub-numeros__item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } body[data-page="home"] .hub-numeros__item strong { color: var(--gold); font-size: 1.05rem; font-weight: 800; line-height: 1.2; } body[data-page="home"] .hub-numeros__item span { color: rgba(255,255,255,.65); font-size: .72rem; line-height: 1.3; } body[data-page="home"] .hub-numeros__link { display: block; color: rgba(255,255,255,.7); font-size: .78rem; text-decoration: none; text-align: right; transition: color .2s; } body[data-page="home"] .hub-numeros__link:hover { color: var(--gold); } /* ── Mobile: coluna única ── */ @media (max-width: 960px) { body[data-page="home"] .hero--modern .container { grid-template-columns: 1fr; gap: 28px; } body[data-page="home"] .hub-full { width: 100%; } body[data-page="home"] .hub-grid-18 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 480px) { body[data-page="home"] .hero--modern { padding: 44px 0 52px; } body[data-page="home"] .hero__title { font-size: clamp(2.15rem, 11vw, 2.75rem); } body[data-page="home"] .hero__lead { font-size: 1rem; } body[data-page="home"] .search { border-radius: 12px; } body[data-page="home"] .smart-suggest__head { display: grid; gap: 3px; } body[data-page="home"] .smart-suggest__list { grid-template-columns: 1fr; } body[data-page="home"] .smart-guide__grid { grid-template-columns: 1fr; } body[data-page="home"] .smart-guide__go { width: 100%; } body[data-page="home"] .start-guide__detail, body[data-page="home"] .start-guide__facts { grid-template-columns: 1fr; } body[data-page="home"] .start-guide__detail a { justify-self: stretch; justify-content: center; } body[data-page="home"] .hub-grid-18 { grid-template-columns: repeat(2, 1fr); gap: 8px; } } body[data-page="home"] .section--alt { padding-top: 28px; } body[data-page="home"] .audit-scores { margin-bottom: 22px; } .home-ops { margin-top: 34px; } .home-ops__head { min-height: 0; } .block { margin-top: 28px; padding: 24px; border-radius: 10px; } .block__title { margin-bottom: 8px; } .block__head { margin-bottom: 16px; } .stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .stat { min-height: 108px; padding: 16px; } .stat__value { font-size: clamp(1.45rem, 2.4vw, 2.25rem); } #statsDiariasPrefeitura .stat__value, #statsDiariasCamara .stat__value { min-width: 0; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.08; letter-spacing: -.015em; font-variant-numeric: tabular-nums; } .filterbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; align-items: center; } .filterbar input, .filterbar select { width: 100%; min-height: 42px; } /* Ocupa a linha inteira: com min-width max-content dentro de uma coluna de 180px, textos como "86 entidades · R$ 17.841.369,18" estouravam a coluna e vazavam para fora da caixa de filtros. */ .filterbar__count { grid-column: 1 / -1; justify-self: stretch; text-align: center; min-width: 0; padding: 8px 12px; border-radius: 999px; background: rgba(0,75,141,.08); color: var(--navy); font-weight: 750; } /* Faixas por gravidade. O grid multi-coluna vive DENTRO de cada faixa: quando ficava no container, cada grupo virava uma coluna e grupos de 1 a 23 itens deixavam buracos enormes esperando a coluna mais longa terminar. */ .signals { display: grid; gap: 14px; grid-template-columns: 1fr; } .sev { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .sev__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; cursor: pointer; list-style: none; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .sev__head::-webkit-details-marker { display: none; } .sev__head::after { content: "▾"; margin-left: auto; font-size: 1rem; letter-spacing: 0; transition: transform .15s; } .sev[open] > .sev__head::after { transform: rotate(180deg); } .sev__head:hover { background: var(--surface-2); } .sev__head:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; } .sev__count { font-size: .78rem; padding: 1px 9px; border-radius: var(--radius-pill); color: var(--on-accent); letter-spacing: 0; } .sev__resumo { flex: 1 1 220px; font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); } .sev__head--critico { color: var(--danger-ink); } .sev__head--critico .sev__count { background: var(--danger-ink); } .sev__head--alto { color: var(--warn-ink); } .sev__head--alto .sev__count { background: #8C3B1A; } .sev__head--medio { color: var(--navy); } .sev__head--medio .sev__count { background: var(--navy); } .sev__grid { display: grid; gap: 12px; padding: 0 16px 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; } .sev__grid--extra { padding-top: 0; } .sev__mais { margin: 0 16px 16px; padding: 10px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--navy); font-size: .9rem; font-weight: 600; cursor: pointer; } .sev__mais:hover { border-color: var(--navy); background: var(--cream); } @media (max-width: 720px) { .sev__resumo { display: none; } } .signal { min-height: 0; padding: 16px; border-top: 0; border-left: 5px solid var(--navy); } .signal h4 { margin-top: 6px; } .signal p { margin-bottom: 10px; } .source-grid, .expansao-grid, .criteria, .personnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .criteria article, .source-card, .personnel-card { border-radius: 10px; } /* Prefeitura */ body[data-page="prefeitura"] .bigheader { padding: 24px 30px; } body[data-page="prefeitura"] .bigheader .reader-summary { padding: 18px; } body[data-page="prefeitura"] .bigheader .reader-summary__chips strong { font-size: clamp(1.1rem, 1.45vw, 1.22rem); line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } body[data-page="prefeitura"] .audit-overview { margin-top: 18px; } body[data-page="prefeitura"] .keyword-audit { margin-top: 18px; } body[data-page="prefeitura"] .audit-shortcuts { margin-top: 16px; } /* Camara */ body[data-page="camara"] .section--camara { background: linear-gradient(180deg, var(--warn-bg) 0, var(--surface-2) 230px, var(--surface-2) 100%); } body[data-page="camara"] .bigheader { border-left-color: var(--gold); } body[data-page="camara"] .bigheader::after { background: linear-gradient(90deg, var(--gold), var(--navy), var(--teal)); } .method-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 18px; padding: 18px; } .method-card ul { margin: 0; } .grid--vereadores { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .ver-card { padding: 16px; } .emendas { display: grid; gap: 10px; } .em { padding: 16px; } .cruzamento { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Relatorios */ body[data-page="relatorios"] .section--alt { background: linear-gradient(180deg, var(--danger-bg) 0, var(--surface-2) 240px, var(--surface-2) 100%); } body[data-page="relatorios"] .bigheader { border-left-color: var(--red); } body[data-page="relatorios"] .bigheader::after { background: linear-gradient(90deg, var(--red), var(--gold), var(--navy)); } body[data-page="relatorios"] .report-note { margin: 0 0 18px; padding: 16px 18px; border-radius: 10px; } body[data-page="relatorios"] .block { margin-top: 22px; } /* Pessoal */ body[data-page="pessoal"] main.container.section { padding-top: 34px; } body[data-page="pessoal"] .bigheader { border-left-color: var(--teal); } body[data-page="pessoal"] #statsPessoal { margin-top: 18px; } body[data-page="pessoal"] #listaPessoal.contratos { margin-top: 14px; } body[data-page="pessoal"] .contrato { grid-template-columns: 200px 1fr; } body[data-page="pessoal"] .contrato__valor { white-space: normal; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; } body[data-page="pessoal"] .vencimento-titulo { font-size: 0.75rem; color: var(--muted); font-weight: 500; line-height: 1.2; } body[data-page="pessoal"] .vencimento-valor { font-size: 1.25rem; color: var(--navy); margin: 2px 0; } @media (max-width: 720px) { body[data-page="pessoal"] .contrato { grid-template-columns: 1fr; } } /* Como cobrar */ body[data-page="cobrar"] .section--alt { background: linear-gradient(180deg, var(--warn-bg) 0, var(--surface-2) 230px, var(--surface-2) 100%); } body[data-page="cobrar"] .section__title { font-size: clamp(2.1rem, 4vw, 3.5rem); } .cobrar-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 24px; align-items: stretch; margin-bottom: 18px; padding: 26px; border: 1px solid #cfe0ef; border-top: 4px solid var(--teal); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 34px rgba(0,75,141,.08); } .cobrar-hero__copy { display: grid; align-content: center; gap: 12px; min-width: 0; } .cobrar-hero__eyebrow { color: var(--teal); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .cobrar-hero .section__title { margin: 0; } .cobrar-hero .section__lead { max-width: 760px; margin: 0; color: var(--ink); font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.65; } .cobrar-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cobrar-kpis article { min-height: 104px; display: grid; align-content: center; gap: 6px; padding: 14px; border: 1px solid #d7e5f2; border-radius: 8px; background: var(--surface-2); } .cobrar-kpis strong { color: var(--navy); font-family: var(--font-h); font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1; } .cobrar-kpis span { color: var(--muted); font-size: .78rem; font-weight: 850; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; } .cobrar-quick { display: grid; gap: 16px; margin-bottom: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); } .cobrar-quick__head { max-width: 820px; } .cobrar-quick__head h2 { margin: 6px 0 6px; color: var(--navy); font-size: clamp(1.25rem, 2vw, 1.8rem); } .cobrar-quick__head p { margin: 0; color: var(--muted); line-height: 1.6; } .cobrar-path-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .cobrar-path { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; min-height: 148px; padding: 14px; border: 1px solid #d3e2f0; border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .cobrar-path:hover, .cobrar-path:focus-visible { border-color: var(--navy); box-shadow: 0 10px 22px rgba(0,75,141,.11); transform: translateY(-1px); outline: none; } .cobrar-path span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: var(--on-accent); font-family: var(--font-h); font-weight: 900; } .cobrar-path strong { color: var(--navy); line-height: 1.25; } .cobrar-path small { color: var(--muted); font-size: .84rem; line-height: 1.45; } .cobrar-blocks { display: grid; gap: 20px; margin-top: 24px; } .cobrar-block { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 30px rgba(0,75,141,.07); } .cobrar-block__title { margin: 0 0 14px; color: var(--navy); } .grid--cobrar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .action { min-height: 0; padding: 18px; border-radius: 8px; } .action__num { width: 42px; height: 42px; border-radius: 12px; } .action__title { font-size: 1.05rem; } .cobrar-templates { border-top: 4px solid var(--gold); } .cobrar-risk { border-top: 4px solid var(--navy); } .risk-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .risk-stats span { min-width: 86px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--surface-2); text-align: center; } .risk-stats strong { display: block; color: var(--navy); font-family: var(--font-h); font-size: 1.15rem; } .risk-stats small { display: block; color: var(--muted); font-size: .72rem; } .risk-filterbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 16px; padding: 12px; border: 1px solid #d6e4f2; border-radius: 8px; background: var(--surface-2); } .risk-filterbar select { width: 100%; } .risk-queue { display: grid; gap: 12px; } .risk-queue-card { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 4px 16px rgba(0,0,0,0.03); transition: transform 0.2s, box-shadow 0.2s; } .risk-queue-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .risk-queue-card--red { border-left: 6px solid var(--danger); } .risk-queue-card--yellow { border-left: 6px solid #c18a00; } .risk-queue-card--green { border-left: 6px solid var(--teal); } .risk-queue-card__score { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 16px 12px; background: var(--surface-2); border-radius: 8px; border: 1px solid #edf2f7; text-align: center; } .risk-queue-card__score .risk-chip { margin: 0; width: 100%; justify-content: center; } .risk-queue-card__score strong { color: var(--navy); font-family: var(--font-h); font-size: 2rem; line-height: 1.1; margin: 8px 0; } .risk-queue-card__score small, .risk-queue-card__orgao { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .risk-priority { display: grid; gap: 3px; width: 100%; padding: 10px 8px; border: 1px solid #d6e4f2; border-radius: 8px; background: var(--surface); } .risk-priority__label { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .risk-priority strong { margin: 0; color: var(--navy); font-family: var(--font-h); font-size: 1.55rem; line-height: 1.05; } .risk-priority small { color: var(--warn-ink); font-size: .72rem; font-weight: 900; } .risk-queue-card__body { min-width: 0; } .risk-queue-card__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; } .risk-queue-card__head h4 { margin: 0 0 6px 0; color: var(--navy); font-size: 1.2rem; line-height: 1.3; } .risk-queue-card__head > strong { color: var(--navy); font-size: 1.25rem; white-space: nowrap; background: var(--surface-2); padding: 6px 12px; border-radius: 8px; } .risk-reasons { display: grid; gap: 4px; margin: 10px 0; padding-left: 18px; color: var(--ink); } .risk-context { display: grid; gap: 12px; margin: 12px 0; padding: 14px; border: 1px solid #b8d4ee; border-radius: 8px; background: var(--surface-2); } .risk-context__intro strong, .risk-context__ask strong { display: block; color: var(--navy); font-size: .9rem; margin-bottom: 5px; } .risk-context__intro p, .risk-context__ask p { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.5; } .risk-context__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; } .risk-context__facts span { min-height: 38px; padding: 8px 10px; border: 1px solid #d7e5f2; border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .86rem; line-height: 1.35; } .risk-context__facts b { color: var(--muted); } .official-pending { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); margin: 10px 0; } .official-pending strong { display: block; color: var(--navy); font-size: .86rem; margin-bottom: 6px; } .official-pending p { margin: 0; color: var(--ink); font-size: .9rem; line-height: 1.45; } .official-pending__chips { display: flex; gap: 6px; flex-wrap: wrap; } .official-pending__chips span { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; border: 1px solid #c9d9e8; background: var(--surface); color: var(--ink); font-size: .76rem; font-weight: 700; } .followup-status { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 10px 0; } .followup-status label { display: grid; gap: 4px; min-width: min(260px, 100%); color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .followup-status select { min-height: 38px; border: 1px solid #b8cee3; border-radius: 8px; background: var(--surface); color: var(--ink); padding: 0 10px; font: inherit; text-transform: none; letter-spacing: 0; } .followup-status small { color: var(--muted); margin-bottom: 9px; } .risk-queue-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .risk-queue-card__actions .btn-link { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; background-color: var(--surface-2); color: var(--muted); border: 1px solid #dee2e6; border-radius: 8px; font-size: 0.85rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: all 0.2s; } .risk-queue-card__actions .btn-link:hover { background-color: var(--navy); color: var(--on-accent); border-color: var(--navy); } .risk-lai { margin-top: 8px; } .risk-lai summary { cursor: pointer; color: var(--navy); font-weight: 800; } .risk-lai textarea { width: 100%; min-height: 118px; margin: 10px 0 8px; border: 1px solid #c9d9e8; border-radius: 8px; padding: 10px; font: inherit; resize: vertical; } .templates-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 16px; } .templates-head p, .template-note { margin: 0; color: var(--muted); line-height: 1.65; } .template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .template-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); } .template-card h4 { margin: 0; color: var(--navy); } .template-card textarea { width: 100%; min-height: 190px; resize: vertical; border: 1px solid #c9d9e8; border-radius: 8px; padding: 12px; font: inherit; font-size: .92rem; line-height: 1.55; color: var(--ink); background: var(--surface); } .copy-template { justify-self: start; border: 0; border-radius: 8px; padding: 10px 14px; background: var(--navy); color: var(--on-accent); font-weight: 700; cursor: pointer; } @media (max-width: 720px) { .cobrar-hero, .cobrar-path-grid, .risk-filterbar { grid-template-columns: 1fr; } .cobrar-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .risk-queue-card { grid-template-columns: 1fr; } .risk-queue-card__head { display: grid; } .risk-queue-card__head > strong { white-space: normal; } .official-pending { grid-template-columns: 1fr; } .risk-stats { justify-content: flex-start; } } @media (max-width: 520px) { .cobrar-hero, .cobrar-quick { padding: 16px; } .cobrar-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cobrar-path { min-height: 0; } } .copy-template:hover { filter: brightness(1.08); } .template-note { margin-top: 12px; font-size: .94rem; } /* dense mobile */ @media (max-width: 760px) { .section { padding: 24px 0 42px; } .container { padding: 0 16px; } .bigheader, .bigheader:not(:has(.reader-summary)), .block, .cobrar-block { padding: 18px; } .templates-head { grid-template-columns: 1fr; } .method-card, .home-ops__stats, .home-ops__actions { grid-template-columns: 1fr; } .filterbar__count { justify-self: stretch; text-align: center; } } @media (max-width: 980px) { .bigheader { grid-template-columns: 1fr; } .bigheader__kicker, .bigheader__title, .bigheader__lead, .bigheader > .muted, .bigheader .reader-summary, .bigheader .civic-actions { grid-column: 1; grid-row: auto; } .audit-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .audit-metric:first-child { grid-column: span 2; } } @media (max-width: 600px) { .bigheader .reader-summary__chips, .audit-overview, .keyword-audit__controls { grid-template-columns: 1fr; } .audit-metric:first-child { grid-column: auto; } } /* ================== Dark Mode ================== */ /* ================== Botão Voltar ao Topo ================== */ #btn-topo { position: fixed; bottom: 24px; right: 20px; z-index: 900; width: 44px; height: 44px; background: var(--navy); color: var(--on-accent); border: none; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; display: flex; align-items: center; justify-content: center; } #btn-topo.visible { opacity: 1; pointer-events: auto; } #btn-topo:hover { background: var(--teal); transform: translateY(-2px); } @media (max-width: 480px) { #btn-topo { bottom: 16px; right: 12px; } } /* ================== Loading Overlay ================== */ #loading-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(255,255,255,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; backdrop-filter: blur(2px); transition: opacity .3s ease; } #loading-overlay.fadeout { opacity: 0; pointer-events: none; } .loading-spinner { width: 44px; height: 44px; border: 4px solid #e0e8f4; border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #loading-overlay p { margin: 0; color: var(--navy); font-size: .9rem; font-weight: 600; letter-spacing: .5px; } /* ================== WATCHLIST (Marcadores) ================== */ .btn-star { background: transparent; border: 1.5px solid var(--line); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .95rem; transition: all .15s; color: var(--muted); flex-shrink: 0; } .btn-star:hover { border-color: var(--gold); color: var(--gold-dk); transform: scale(1.08); } .btn-star.is-marked { background: var(--gold); border-color: var(--gold-dk); color: var(--navy-dk); } .btn-star.is-marked:hover { background: var(--gold-dk); color: var(--on-accent); } .btn-star:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; } .marcadores-vazio { text-align: center; padding: 60px 20px; background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); } .marcadores-vazio strong { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: 8px; } /* ================== Detector de Fragmentação ================== */ .frag-grupo { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--red); border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; } .frag-grupo__head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .frag-grupo__head h4 { margin: 0; color: var(--red); font-size: 1rem; } .frag-grupo__head h4 small { color: var(--muted); font-weight: 400; } .frag-grupo__total { background: var(--danger-bg); color: var(--danger); padding: 6px 14px; border-radius: 99px; font-weight: 700; font-size: .85rem; } .frag-lista { font-size: .85rem; } .frag-lista li { padding: 6px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 10px; } .frag-lista li:last-child { border-bottom: 0; } .frag-lista li span:last-child { color: var(--navy); font-weight: 700; white-space: nowrap; } .frag-explica { margin-top: 12px; padding: 10px 14px; background: var(--warn-bg); border-left: 3px solid var(--gold-dk); border-radius: 4px; font-size: .82rem; line-height: 1.5; color: var(--warn-ink); } /* ================== Comparativo entre anos ================== */ .comp-anos-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: .88rem; } .comp-anos-table th, .comp-anos-table td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--line); } .comp-anos-table th { background: var(--navy); color: var(--on-accent); font-weight: 700; } .comp-anos-table th:first-child, .comp-anos-table td:first-child { text-align: left; } .comp-anos-table td:first-child { font-weight: 600; color: var(--ink); } .comp-anos-table tr:nth-child(even) td { background: var(--cream); } .comp-anos-table tr:hover td { background: var(--surface-2); } .comp-anos-table tfoot td { font-weight: 700; color: var(--navy); border-top: 2px solid var(--navy); background: var(--cream) !important; } .comp-var--up { color: var(--red); font-weight: 700; } .comp-var--down { color: var(--teal); font-weight: 700; } .comp-var--flat { color: var(--muted); } @media (max-width: 700px) { .comp-anos-table { font-size: .78rem; } .comp-anos-table th, .comp-anos-table td { padding: 8px 6px; } } /* ================== A11y + Mobile polish ================== */ :focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--teal); } .nav__link:focus-visible { outline-offset: -3px; } .skip-link { position: absolute; top: -100px; left: 8px; background: var(--navy); color: var(--on-accent); padding: 12px 18px; border-radius: 6px; z-index: 9999; font-weight: 700; } .skip-link:focus { top: 8px; } /* Mobile polish */ @media (max-width: 720px) { .placar { grid-template-columns: 1fr 1fr; gap: 10px; } .placar-card { padding: 12px 14px; min-height: 110px; border-radius: 10px; } .placar-card__icon { width: 34px; height: 34px; font-size: 1.2rem; } .placar-card__valor { font-size: 1.25rem; } .placar-card--top .placar-card__valor { font-size: .9rem; } .placar-card__label { font-size: .68rem; } .placar-card__sub { font-size: .76rem; } .cat-chips { padding: 10px 12px; gap: 6px; } .cat-chip { padding: 6px 11px; font-size: .8rem; } .filterbar { flex-direction: column; align-items: stretch; } .filterbar > * { width: 100%; } .em-chart-row { grid-template-columns: 1fr; gap: 2px; } .em-chart-name { font-size: .8rem; } .em-chart-val { text-align: left; } .exec-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .exec-card { padding: 10px 12px; } .exec-card__pct { font-size: 1rem; } .sec-bar-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 4px; } .sec-bar-val { text-align: left; } .timeline-sinais { padding-left: 28px; } .tline-titulo { font-size: .92rem; } } @media (max-width: 360px) { .placar { grid-template-columns: 1fr; } .exec-grid { grid-template-columns: 1fr; } } /* Touch-friendly tap targets (mín. 44x44 em mobile) */ @media (max-width: 720px) { .btn-star, button, .nav__link, .cat-chip { min-height: 40px; } .btn-copiar-num { min-height: 32px; padding: 4px 11px; } } /* Garante contraste de texto sobre fundos coloridos */ .placar-card__sub strong, .placar-card__valor { text-shadow: none; } /* ================== Print stylesheet ================== */ @media print { body { background: var(--surface) !important; color: var(--ink) !important; font-size: 11pt; } .topbar, .nav, .nav__toggle, .skip-link, .pref-tabs, .civic-actions, .btn-pdf, .btn-csv, .btn-share, .btn-dossie, .btn-link, .btn-star, .btn-copiar-num, .cat-chips, #btn-topo, #sw-toast, #dataReadingLegend, .loadmore, .filterbar, footer.footer { display: none !important; } .container { max-width: 100%; padding: 0; } .block, .placar-card, .contrato, .em, .lic, .exec-card, .frag-grupo { page-break-inside: avoid; box-shadow: none !important; border: 1px solid #999 !important; background: var(--surface) !important; } .section, .section--alt { padding: 0 !important; background: var(--surface) !important; } a { color: var(--ink); text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--muted); } .placar { grid-template-columns: 1fr 1fr; gap: 8pt; } .placar-card__valor { color: var(--ink) !important; } h1, h2, h3, h4 { page-break-after: avoid; color: var(--ink) !important; } .pref-panel:not(.is-active) { display: block !important; } [hidden] { display: revert !important; } .glossario-termo { border-bottom: none; } .glossario-termo::after { display: none !important; } } /* ================== Carimbo "Última coleta" ================== */ .carimbo-coleta { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 3px 9px; background: var(--cream); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; margin-left: 8px; letter-spacing: .3px; } .carimbo-coleta--fresh { background: var(--success-bg); color: var(--success-dk); border-color: #a5d6a7; } .carimbo-coleta--okay { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-2); } .carimbo-coleta--stale { background: var(--danger-bg); color: var(--danger-dk); border-color: var(--danger-bd); } /* ================== Glossário (tabela em Sobre) ================== */ .glossario-tabela { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .9rem; margin: 14px 0; } .glossario-tabela th, .glossario-tabela td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .glossario-tabela th { background: var(--navy); color: var(--on-accent); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; } .glossario-tabela td:first-child { color: var(--muted); font-style: italic; white-space: nowrap; width: 28%; } .glossario-tabela td:nth-child(2) { font-weight: 700; color: var(--navy); width: 24%; } .glossario-tabela tr:nth-child(even) td { background: var(--cream); } @media (max-width: 600px) { .glossario-tabela { font-size: .82rem; } .glossario-tabela td:first-child { width: auto; white-space: normal; } } /* ================== Legenda fixa de leitura dos dados ================== */ .data-legend { position: fixed; left: 16px; bottom: 18px; z-index: 9997; width: min(360px, calc(100vw - 32px)); font-size: .88rem; color: var(--ink); } .data-legend__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid #0b5c9f; border-radius: 8px; background: var(--navy); color: var(--on-accent); font-weight: 800; box-shadow: 0 10px 24px rgba(0, 75, 141, .22); cursor: pointer; } .data-legend__toggle span[aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--navy-dk); font-weight: 900; } .data-legend__toggle:hover, .data-legend__toggle:focus-visible { background: var(--navy-dk); } .data-legend__panel { position: relative; margin-top: 8px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 18px 42px rgba(21, 33, 49, .18); max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; } .data-legend__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); color: var(--navy); font-size: 1.25rem; line-height: 1; font-weight: 800; cursor: pointer; } .data-legend__close:hover, .data-legend__close:focus-visible { background: var(--navy); color: var(--on-accent); } .data-legend__panel > strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 4px; padding-right: 36px; } .data-legend__panel p { margin: 0; color: var(--muted); line-height: 1.45; } .data-legend__list { display: grid; gap: 8px; margin: 12px 0 0; } .data-legend__item { border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 6px; padding: 9px 10px; background: var(--cream); } .data-legend__item dt { margin: 0 0 2px; color: var(--ink); font-weight: 800; } .data-legend__item dd { margin: 0; color: var(--muted); line-height: 1.38; } .data-legend__item--official { border-left-color: var(--navy); } .data-legend__item--cross { border-left-color: var(--teal); } .data-legend__item--inferred { border-left-color: var(--gold-dk); } .data-legend__item--pending { border-left-color: var(--red); } .data-legend__item--attention { border-left-color: #b7791f; } @media (max-width: 600px) { .data-legend { left: 12px; right: 12px; bottom: 68px; width: auto; font-size: .84rem; } .data-legend__toggle { width: 100%; justify-content: center; } } /* Reduz movimento se usuário preferir */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ================== Ícones SVG (modules/icons.js) ================== */ .zv-icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; stroke: currentColor; fill: none; } /* Quando o ícone está dentro de um span/div container com altura definida, alinha melhor. */ .placar-card__icon .zv-icon, .cat-chip .zv-icon { vertical-align: middle; } /* ================== PLACAR DO DINHEIRO ================== */ .placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 8px; } .placar-card { background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; transition: border-color .15s, transform .15s; min-height: 138px; } .placar-card:hover { border-color: var(--navy); transform: translateY(-2px); } .placar-card__icon { font-size: 1.5rem; width: 42px; height: 42px; background: var(--cream); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; color: var(--navy); } .placar-card--money .placar-card__icon { background: rgba(7,138,75,.10); color: var(--teal); } .placar-card--top .placar-card__icon { background: rgba(184,135,11,.12); color: var(--gold-dk); } .placar-card--count .placar-card__icon { background: rgba(0,75,141,.10); color: var(--navy); } .placar-card--warn .placar-card__icon { background: rgba(201,54,50,.10); color: var(--red); } .placar-card__valor { font-family: var(--font-h); font-size: 1.7rem; font-weight: 750; color: var(--navy); line-height: 1.05; letter-spacing: -.5px; } .placar-card__label { font-size: .76rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 700; } .placar-card__sub { font-size: .82rem; color: var(--ink); margin-top: auto; line-height: 1.4; } .placar-card__sub strong { color: var(--navy); } .placar-card__percapita { font-size: .8rem; font-weight: 700; color: var(--teal); margin-top: 6px; line-height: 1.3; } .placar-card__percapita:empty { display: none; } /* ===== Banner de boas-vindas (primeira visita) ===== */ .onboarding { display: flex; align-items: center; gap: 18px; max-width: 1100px; margin: 16px auto 0; padding: 16px 20px; background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-bg) 100%); border: 1px solid #b2f5ea; border-left: 5px solid var(--teal); border-radius: 12px; animation: onboarding-in .35s ease; } .onboarding__title { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 2px; } .onboarding__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink); } .onboarding__close { flex: 0 0 auto; align-self: flex-start; padding: 9px 18px; background: var(--teal); color: var(--on-accent); border: none; border-radius: 8px; font-weight: 700; font-size: .88rem; cursor: pointer; } .onboarding__close:hover { filter: brightness(1.06); } .onboarding.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; } @keyframes onboarding-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .onboarding { flex-direction: column; align-items: stretch; gap: 12px; margin: 12px; } .onboarding__close { align-self: stretch; } } .placar-card--money { border-top: 5px solid var(--teal); border-color: var(--teal) transparent transparent transparent; border-width: 5px 2px 2px; border-style: solid; border-color: var(--teal) var(--line) var(--line); } .placar-card--top { border-top: 5px solid var(--gold); border-color: var(--gold) var(--line) var(--line); } .placar-card--count { border-top: 5px solid var(--navy); border-color: var(--navy) var(--line) var(--line); } .placar-card--warn { border-top: 5px solid var(--red); border-color: var(--red) var(--line) var(--line); } .placar-card--money .placar-card__valor { color: var(--teal); } .placar-card--top .placar-card__valor { color: var(--gold-dk); font-size: 1.05rem; line-height: 1.25; } .placar-card--warn .placar-card__valor { color: var(--red); } @media (max-width: 600px) { .placar-card { padding: 14px 16px; min-height: 120px; } .placar-card__valor { font-size: 1.4rem; } } /* Placar no mobile: 2 colunas. Precisa vir DEPOIS da regra base .placar (auto-fit minmax 220px), senao o auto-fit colapsa para 1 coluna em <440px. */ @media (max-width: 720px) { .placar { grid-template-columns: 1fr 1fr; } } @media (max-width: 360px) { .placar { grid-template-columns: 1fr; } } /* ================== CHIPS DE CATEGORIA ================== */ .cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } .cat-chips__label { width: 100%; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px; } .cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--cream); border: 1.5px solid var(--line); border-radius: 99px; font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .15s; user-select: none; } .cat-chip:hover { background: var(--surface); border-color: var(--navy); transform: translateY(-1px); } .cat-chip.is-active { background: var(--navy); color: var(--on-accent); border-color: var(--navy-dk); } .cat-chip__count { background: rgba(255,255,255,.7); color: var(--navy-dk); padding: 1px 7px; border-radius: 99px; font-size: .72rem; font-weight: 700; } .cat-chip.is-active .cat-chip__count { background: var(--gold); color: var(--navy-dk); } /* alias used by Resumo Semanal chips */ .cat-chip--active { background: var(--navy); color: var(--on-accent); border-color: var(--navy-dk); } .cat-chip--alto { border-left: 3px solid var(--danger-bd); } .cat-chip--medio { border-left: 3px solid var(--warn-2); } .cat-chip--baixo { border-left: 3px solid #cfd8dc; } .cat-chip--clear { background: transparent; border-style: dashed; color: var(--muted); } .cat-chip--clear:hover { color: var(--red); border-color: var(--red); } /* ================== CITIZEN TOOLS ================== */ /* WhatsApp share button */ .btn-wpp { display: inline-flex; align-items: center; gap: 6px; background: #25D366; color: var(--on-accent) !important; border: none; border-radius: 999px; padding: 7px 14px; font-size: .84rem; font-weight: 700; cursor: pointer; text-decoration: none !important; transition: background .15s, transform .1s; white-space: nowrap; } .btn-wpp:hover { background: #1EBE58; transform: translateY(-1px); text-decoration: none !important; } /* "Como ler esta página" collapsible */ .page-howto { margin-top: 14px; border: 1px solid rgba(0,75,141,.12); border-radius: 8px; background: rgba(247,250,253,.85); } .page-howto summary { padding: 9px 14px; cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--navy); list-style: none; display: flex; align-items: center; gap: 7px; user-select: none; } .page-howto summary::-webkit-details-marker { display: none; } .page-howto summary::before { content: "ℹ"; font-size: 1rem; opacity: .6; flex: 0 0 auto; } .page-howto[open] summary { border-bottom: 1px solid var(--line); } .page-howto[open] summary::before { content: "✕"; opacity: .5; } .page-howto__body { padding: 12px 16px 14px; font-size: .88rem; color: var(--ink); } .page-howto__body p { margin: 0 0 8px; line-height: 1.55; } .page-howto__body p:last-child { margin: 0; } .page-howto__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .page-howto__chips span { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 600; color: var(--navy); } .page-howto__chips span.ok { border-color: #a5d6a7; color: var(--success-mid); background: var(--success-bg); } .page-howto__chips span.warn { border-color: #ffcc80; color: var(--warn-ink); background: var(--warn-bg); } .page-howto__chips span.info { border-color: var(--info-bd); color: var(--navy); background: var(--info-bg); } /* Citizen question slot in home-stat cards */ .home-stat { grid-template-areas: "label cta" "value value" "note note" "cidada cidada"; } .home-stat q { grid-area: cidada; display: block; font-style: italic; font-size: .78rem; color: var(--teal); quotes: none; padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--line); line-height: 1.4; } /* Mobile: cat-chips horizontal scroll instead of wrapping */ @media (max-width: 560px) { .cat-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } .cat-chips::-webkit-scrollbar { display: none; } .cat-chips__label { display: none; } .cat-chip { flex: 0 0 auto; } } /* ===== Resumo Semanal ===== */ .filterbar--semanal { flex-direction: column; align-items: flex-start; gap: 10px; } .btn-small { padding: 4px 12px; font-size: .82rem; font-weight: 600; border-radius: 6px; border: 1px solid var(--navy); background: var(--navy); color: var(--on-accent); cursor: pointer; } .btn-small:hover { background: var(--navy-dk); } .resumo-custom-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; color: var(--text); } .resumo-custom-range input[type="date"] { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: .88rem; background: var(--surface); } .resumo-semanal-feed { display: flex; flex-direction: column; gap: 0; } .resumo-semanal__aviso { background: var(--warn-bg); border-left: 4px solid var(--warn-2); border-radius: 4px; padding: 8px 12px; font-size: .85rem; color: #5a4500; margin-bottom: 12px; } .resumo-semanal__grau-titulo { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 10px 0 6px; margin: 16px 0 0; color: var(--muted); border-top: 1px solid var(--line); } .resumo-semanal__grau-titulo:first-child { border-top: none; margin-top: 0; } .resumo-semanal__grau-titulo--alto { color: var(--danger-dk); } .resumo-semanal__grau-titulo--medio { color: var(--warn-ink); } .resumo-semanal__grau-titulo--baixo { color: var(--muted); } /* ===== Resumo Semanal — sistema rs-* ===== */ .rs-filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .rs-filtros__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .rs-filtros__row--bottom { align-items: center; border-top: 1px solid var(--line); padding-top: 10px; } .rs-grupo { display: flex; flex-direction: column; gap: 6px; } .rs-grupo--grow { flex: 1; min-width: 180px; } .rs-grupo__label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .rs-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rs-chip { padding: 5px 14px; font-size: .82rem; font-weight: 600; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; } .rs-chip:hover { background: var(--cream); border-color: var(--navy); } .rs-chip--active { background: var(--navy); color: var(--on-accent); border-color: var(--navy); } /* Impacto chips — colored dot accent, activate changes border+bg tint */ .rs-chip--alto { border-left: 4px solid var(--danger-dk); } .rs-chip--medio { border-left: 4px solid #bf8600; } .rs-chip--baixo { border-left: 4px solid var(--muted); } .rs-chip--alto.rs-chip--active { background: var(--danger-bg); color: var(--danger-dk); border-color: var(--danger-dk); } .rs-chip--medio.rs-chip--active { background: var(--warn-bg); color: var(--warn-ink); border-color: #bf8600; } .rs-chip--baixo.rs-chip--active { background: var(--cream); color: var(--muted); border-color: var(--muted); } .rs-select { padding: 5px 10px; font-size: .85rem; font-family: var(--font-b); border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; width: 100%; } .rs-select:focus { outline: none; border-color: var(--navy); } .rs-contador { font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; margin-left: auto; padding-left: 8px; } /* Custom date range */ .resumo-custom-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--cream); border-radius: 8px; border: 1px solid var(--line); } /* Mobile */ @media (max-width: 640px) { .rs-filtros__row { gap: 12px; } .rs-grupo--grow { min-width: 100%; } .rs-contador { margin-left: 0; } } /* ================== B — Alerta hero investimentos ================== */ .hero-alert { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,210,90,.32); border-radius: 8px; padding: 8px 12px; margin-top: 14px; font-size: .84rem; color: rgba(255,255,255,.86); font-weight: 650; } .hero-alert__icon { font-size: 1rem; flex-shrink: 0; } .hero-alert strong { color: #ffd34d; } .hero-alert__link { color: #ffd34d; font-weight: 700; text-decoration: underline; margin-left: 4px; white-space: nowrap; } .hero-alert__link:hover { color: var(--on-accent); } /* ================== A — Widget "Esta semana na Câmara" ================== */ .semana-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 10px 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; backdrop-filter: blur(6px); transition: background .15s; } .semana-hero:hover { background: rgba(255,255,255,.13); } .semana-hero__inner { display: flex; flex-direction: column; gap: 2px; } .semana-hero__label { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .09em; } .semana-hero__resume { font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.9); } .semana-hero__link { font-size: .78rem; font-weight: 700; color: var(--gold); white-space: nowrap; text-decoration: none; flex-shrink: 0; } .semana-hero__link:hover { text-decoration: underline; } /* ================== D — CTA Auditômetro ================== */ .audit-cta { text-align: center; margin-top: 32px; padding: 4px 0 8px; } .audit-cta__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy-dk); font-weight: 700; font-size: .9rem; padding: 12px 26px; border-radius: 8px; text-decoration: none; box-shadow: 0 2px 10px rgba(242,194,48,.35); transition: background .15s, box-shadow .15s, transform .1s; } .audit-cta__btn:hover { background: var(--gold-dk); color: var(--on-accent); box-shadow: 0 4px 18px rgba(242,194,48,.45); transform: translateY(-1px); text-decoration: none; } .audit-cta__sub { display: block; font-size: .74rem; color: var(--muted); margin-top: 9px; } /* ================== E — Hub badge "hoje" ================== */ body[data-page="home"] .hub-grid-18 .hub-item { position: relative; } .hub-badge { position: absolute; top: 6px; right: 6px; background: var(--gold); color: var(--navy-dk); font-size: .55rem; font-weight: 750; padding: 2px 5px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; pointer-events: none; } /* ================== F — LOA per capita ================== */ .loa-card__percapita { display: block; font-size: .62rem; color: var(--muted); margin-top: 4px; font-weight: 500; } /* ================== LOA — Por Órgão / Secretaria ================== */ .loa-orgaos { margin-bottom: 22px; } .loa-orgaos__header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .loa-orgaos__titulo { font-size: .78rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .06em; } .loa-orgaos__sub { font-size: .68rem; color: var(--muted); } /* Grade 6 por linha — igual ao loa-strip__grid */ .loa-org-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } @media (max-width: 960px) { .loa-org-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .loa-org-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 400px) { .loa-org-grid { grid-template-columns: repeat(2, 1fr); } } /* Número de ranking no canto superior esquerdo */ .loa-card__rank { display: block; font-size: .58rem; font-weight: 750; color: currentColor; opacity: .35; margin-bottom: 3px; letter-spacing: .04em; } /* Cor nova — Previdência (roxo) */ .loa-card--prev { border-left-color: #6a1a9a; } .loa-card--prev .loa-card__valor { color: #6a1a9a; } /* ================== Faixa LOA 2026 ================== */ .loa-strip { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; } .loa-strip__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 6px; } .loa-strip__titulo { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); } .loa-strip__fonte { font-size: .7rem; color: var(--muted); text-decoration: none; } .loa-strip__fonte:hover { text-decoration: underline; color: var(--navy); } .loa-strip__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .loa-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px; border-left: 4px solid var(--navy); } .loa-card__valor { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); font-family: var(--font-h); line-height: 1.2; } .loa-card__label { display: block; font-size: .7rem; color: var(--muted); margin-top: 4px; line-height: 1.4; } .loa-card__pct { font-weight: 700; color: var(--navy); } .loa-card__pct--alerta { color: var(--red); } .loa-card--total { border-left-color: var(--navy); } .loa-card--saude { border-left-color: var(--danger); } .loa-card--edu { border-left-color: var(--info); } .loa-card--pessoal{ border-left-color: #bf8600; } .loa-card--camara { border-left-color: var(--teal); } .loa-card--inv { border-left-color: var(--red); } .loa-card--total .loa-card__valor { color: var(--navy); } .loa-card--saude .loa-card__valor { color: var(--danger); } .loa-card--edu .loa-card__valor { color: var(--info); } .loa-card--pessoal .loa-card__valor{ color: var(--warn-ink); } .loa-card--camara .loa-card__valor { color: var(--teal); } @media (max-width: 960px) { .loa-strip__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .loa-strip__grid { grid-template-columns: repeat(2, 1fr); } .loa-card__valor { font-size: .95rem; } } /* ================== Tooltip glossário cidadão ================== */ .glossario-termo { border-bottom: 1.5px dotted var(--navy); cursor: help; position: relative; border-radius: 3px; outline-offset: 2px; } .glossario-termo:focus-visible { outline: 2px solid var(--info-bd); background: var(--info-bg); } .glossario-termo:hover::after, .glossario-termo:focus-visible::after, .glossario-termo:focus::after { content: attr(data-explica); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--on-accent); padding: 8px 12px; border-radius: 6px; font-size: .78rem; font-weight: 400; white-space: nowrap; max-width: 280px; white-space: normal; width: max-content; min-width: 140px; overflow-wrap: break-word; text-align: center; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,.25); letter-spacing: 0; line-height: 1.4; } /* ================== Toast "Dados atualizados" ================== */ #sw-toast { position: fixed; top: 70px; right: 16px; z-index: 9998; background: var(--navy); color: var(--on-accent); padding: 12px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.28); display: flex; align-items: center; gap: 12px; font-size: .88rem; font-weight: 500; transform: translateY(-8px); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; } #sw-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; } #sw-toast button { background: var(--gold); color: var(--navy-dk); border: none; border-radius: 6px; padding: 4px 10px; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; } #sw-toast button:hover { background: #e0a800; } /* ================== Contratos vencendo ================== */ .vencendo-block { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .vencendo-block__head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--warn-bg); border-bottom: 1px solid #ffe0b2; font-weight: 700; font-size: .9rem; color: var(--warn-ink-2); cursor: pointer; user-select: none; } .vencendo-block__head span { margin-left: auto; font-size: .8rem; font-weight: 400; } .vencendo-block__body { padding: 12px 16px; } .vencendo-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .85rem; } .vencendo-item:last-child { border-bottom: 0; } .vencendo-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap; } .vencendo-badge--red { background: var(--danger-bg); color: var(--danger); } .vencendo-badge--orange { background: var(--warn-bg); color: var(--warn-ink); } .vencendo-badge--yellow { background: var(--warn-bg); color: var(--warn); } .vencendo-item__info strong { color: var(--ink); } .vencendo-item__info small { color: var(--muted); display: block; } /* ================== % Execução por vereador ================== */ .exec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 4px; } .exec-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .exec-card__name { font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .exec-card__bar { background: var(--cream); height: 8px; border-radius: 4px; overflow: hidden; margin: 6px 0; } .exec-card__fill { height: 100%; transition: width .4s ease; } .exec-card__fill--ok { background: var(--teal); } .exec-card__fill--med { background: var(--warn); } .exec-card__fill--low { background: var(--red); } .exec-card__nums { font-size: .76rem; color: var(--muted); display: flex; justify-content: space-between; } .exec-card__pct { font-size: 1.1rem; font-weight: 700; } .exec-card__pct--ok { color: var(--teal); } .exec-card__pct--med { color: var(--warn); } .exec-card__pct--low { color: var(--red); } /* ================== Emendas em atenção ================== */ .atencao-emendas { background: linear-gradient(135deg, var(--warn-bg) 0%, var(--warn-bd) 100%); border: 1px solid #f9a825; border-left: 6px solid var(--warn); border-radius: 10px; padding: 16px 20px; margin: 16px 0 22px; } .atencao-emendas__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--warn-ink-2); font-weight: 700; font-size: 1.05rem; } .atencao-emendas__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 12px 0; } .atencao-emendas__num { background: rgba(255,255,255,.7); padding: 10px 12px; border-radius: 6px; border: 1px solid var(--warn-2); } .atencao-emendas__num strong { display: block; font-size: 1.3rem; color: #4e2600; font-weight: 700; line-height: 1.1; } .atencao-emendas__num span { font-size: .76rem; color: var(--warn-ink-2); } .atencao-emendas__cta { display: inline-flex; gap: 8px; align-items: center; background: var(--warn); color: var(--on-accent); padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 700; font-size: .85rem; text-decoration: none; } .atencao-emendas__cta:hover { background: #e65100; } /* ================== Distribuição por secretaria ================== */ .sec-bars { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; } .sec-bar-row { display: grid; grid-template-columns: 200px 1fr 130px; align-items: center; gap: 10px; font-size: .85rem; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: background .12s; } .sec-bar-row:hover { background: var(--cream); } .sec-bar-name { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sec-bar-wrap { background: var(--cream); border-radius: 4px; height: 18px; } .sec-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--navy), #0a6cb8); } .sec-bar-val { color: var(--muted); text-align: right; font-size: .78rem; } .sec-bar-val strong { color: var(--ink); display: block; font-size: .82rem; } @media (max-width: 600px) { .sec-bar-row { grid-template-columns: 130px 1fr 90px; } } /* ================== Abas de atualizações ================== */ .update-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .update-tab { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--navy); font: inherit; font-weight: 800; cursor: pointer; } .update-tab:hover { background: var(--cream); } .update-tab.is-active { background: var(--navy); color: var(--on-accent); } /* ── Barra de filtros (busca + toggle) ── */ .filtros-barra { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .filtros-barra__input { flex: 1; min-width: 160px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; background: var(--surface); } .filtros-barra__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; border: 2px solid var(--navy); background: var(--surface); color: var(--navy); font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .filtros-barra__btn[aria-expanded="true"] { background: var(--navy); color: var(--on-accent); } .filtros-barra__badge { display: inline-flex; align-items: center; justify-content: center; background: var(--red, #d32f2f); color: var(--on-accent); border-radius: 10px; font-size: .72rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; } /* ── Painel colapsável de filtros ── */ .filtros-panel { margin-top: 10px; padding: 14px 16px; background: var(--cream, #f8f9fb); border-radius: 10px; border: 1px solid var(--line); } .change-digest { margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); } .change-digest__head { display: grid; gap: 4px; margin-bottom: 14px; } .change-digest__head span { color: var(--gold-dk); font-size: .72rem; font-weight: 900; letter-spacing: .14em; } .change-digest__head h3 { margin: 0; color: var(--navy); font-size: clamp(1.2rem, 2.3vw, 1.7rem); } .change-digest__head p { max-width: 860px; margin: 0; color: var(--muted); line-height: 1.5; } .change-digest__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .change-digest__metrics article { border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; background: var(--cream); } .change-digest__metrics strong { display: block; color: var(--navy); font-size: 1.22rem; line-height: 1.1; } .change-digest__metrics span { display: block; margin-top: 4px; color: var(--muted); font-size: .78rem; font-weight: 700; } .change-digest__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr); gap: 16px; } .change-digest h4 { margin: 0 0 10px; color: var(--ink); font-size: .96rem; } .change-digest__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .change-digest__item { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--line); } .change-digest__item:first-child { border-top: 0; padding-top: 0; } .change-digest__item strong { color: var(--ink); line-height: 1.35; } .change-digest__item small, .change-digest__item p { color: var(--muted); line-height: 1.45; } .change-digest__item p { margin: 0; } .change-digest__item a { justify-self: start; color: var(--navy); font-weight: 800; text-decoration: none; } .change-digest__item a:hover { text-decoration: underline; } .change-digest__badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--info-bg); color: var(--navy); font-size: .72rem; font-weight: 800; } .change-digest__badge--gold { background: var(--warn-bg); color: var(--warn-ink-2); } .change-digest__badge--red { background: var(--danger-bg); color: var(--danger); } .change-digest__side { border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; background: var(--cream); } .change-digest__side ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.45; } .change-digest__side b { color: var(--ink); } .diario-oficial-card { background: color-mix(in srgb, var(--white) 92%, var(--info-bg-2) 8%); border-radius: 8px; padding: 16px 16px 18px; border: 1px solid var(--line); margin-bottom: 12px; } .diario-oficial-summary { margin: 10px 0 12px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 6px; } .diario-oficial-summary strong { display: block; color: var(--navy); margin-bottom: 6px; } .diario-oficial-summary ul { margin: 0 0 0 18px; padding: 0; line-height: 1.5; font-size: .9rem; } .diario-oficial-card .tline-titulo a { color: inherit; text-decoration: none; } .diario-oficial-card .tline-titulo a:hover { color: var(--navy); text-decoration: underline; } .diario-oficial-actions { display: flex; flex-wrap: wrap; gap: 8px; } .diario-oficial-actions .btn-link { padding: 6px 12px; background: var(--info-bg); color: var(--info); border: 1px solid var(--info-bd); border-radius: 4px; font-size: .82rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .diario-oficial-actions .btn-link--primary { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .tline-tag--navy { background: var(--info-bg); color: var(--navy); } @media (max-width: 640px) { .update-tabs { display: flex; width: 100%; } .update-tab { flex: 1; padding-inline: 8px; } .change-digest { padding: 15px; } .change-digest__metrics, .change-digest__body { grid-template-columns: 1fr; } } /* ================== Asfalto e obras viarias ================== */ .asfalto-dashboard { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(300px, 2fr); gap: 14px; margin-bottom: 16px; } .asfalto-hero, .asfalto-metrics article, .asfalto-alert-grid article, .asfalto-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .asfalto-hero { padding: 18px; border-left: 5px solid var(--gold); } .asfalto-hero h4 { margin: 6px 0; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--navy); } .asfalto-hero p { margin: 0; color: var(--muted); line-height: 1.45; } .asfalto-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .asfalto-metrics article, .asfalto-alert-grid article { padding: 14px; } .asfalto-metrics strong, .asfalto-alert-grid strong { display: block; color: var(--navy); font-size: 1.35rem; line-height: 1.15; } .asfalto-metrics span, .asfalto-alert-grid span { display: block; color: var(--muted); font-size: .82rem; margin-top: 4px; } .asfalto-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .asfalto-controls input[type="search"] { flex: 1 1 280px; } .asfalto-controls select { min-width: 170px; } .asfalto-controls label { display: inline-flex; gap: 6px; align-items: center; font-size: .86rem; color: var(--ink); font-weight: 700; } .asfalto-alert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .asfalto-alert-grid .is-warn { border-color: var(--danger-bd-2); background: var(--danger-bg-2); } .asfalto-alert-grid .is-warn strong { color: var(--red); } .asfalto-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .asfalto-tipos button { border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--navy); padding: 7px 12px; font: inherit; cursor: pointer; } .asfalto-tipos strong { margin-right: 8px; } .asfalto-tipos span { color: var(--muted); font-size: .82rem; } .asfalto-pendencias { border: 1px solid var(--danger-bd-2); border-left: 5px solid var(--red); border-radius: 8px; background: var(--danger-bg); padding: 14px; margin: 12px 0 16px; } .asfalto-pendencias__head { display: grid; gap: 4px; margin-bottom: 12px; } .asfalto-pendencias__head span { color: var(--red); font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .asfalto-pendencias__head strong { color: var(--ink); font-size: 1.05rem; } .asfalto-pendencias__head small { color: var(--muted); line-height: 1.45; } .asfalto-pendencias__list { display: grid; gap: 10px; } .asfalto-pendencias__list article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 10px; } .asfalto-pendencias__list p { margin: 3px 0 7px; color: var(--muted); font-size: .86rem; } .asfalto-pendencias__rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--danger-bg); color: var(--red); font-weight: 900; } .asfalto-note { margin: 12px 0 16px; } .asfalto-lista { display: grid; gap: 12px; } .asfalto-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 16px; } .asfalto-card__valor { color: var(--navy); font-size: 1.25rem; font-weight: 900; } .asfalto-card__head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-start; } .asfalto-card__head strong { color: var(--ink); } .asfalto-card__head span { background: var(--info-bg); color: var(--navy); border-radius: 999px; padding: 3px 9px; font-size: .75rem; font-weight: 800; } .asfalto-card__date { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--muted); font-size: .86rem; } .asfalto-card__date b { color: var(--ink); } .asfalto-card__body p { margin: 8px 0; line-height: 1.5; } .asfalto-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: .86rem; color: var(--ink); } .asfalto-card__pending { margin-top: 10px; font-size: .86rem; } .asfalto-pending-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; } .asfalto-pending-chips i, .asfalto-ok { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-style: normal; font-weight: 800; font-size: .75rem; } .asfalto-pending-chips i { background: var(--danger-bg); color: var(--red); border: 1px solid #fecdd3; } .asfalto-ok { background: var(--success-bg); color: #047857; border: 1px solid #bbf7d0; } .asfalto-alert { color: var(--red); font-weight: 800; } .asfalto-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } @media (max-width: 760px) { .asfalto-dashboard, .asfalto-card { grid-template-columns: 1fr; } .asfalto-metrics, .asfalto-alert-grid, .asfalto-card__grid { grid-template-columns: 1fr; } .asfalto-pendencias__list article { grid-template-columns: 1fr; } } /* ================== Timeline de sinais ================== */ .timeline-sinais { position: relative; padding-left: 32px; margin: 18px 0; } .timeline-sinais::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .tline-item { position: relative; padding: 12px 0 14px 14px; border-bottom: 1px dashed var(--line); } .tline-item:last-child { border-bottom: 0; } .tline-item::before { content: ""; position: absolute; left: -26px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--navy); } .tline-item--red::before { background: var(--red); box-shadow: 0 0 0 2px var(--red); } .tline-item--orange::before { background: var(--warn); box-shadow: 0 0 0 2px var(--warn); } .tline-item--gold::before { background: var(--gold-dk); box-shadow: 0 0 0 2px var(--gold-dk); } .tline-data { font-size: .76rem; font-weight: 700; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; } .tline-titulo { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 2px 0 6px; } .tline-desc { font-size: .88rem; color: var(--ink); line-height: 1.5; margin: 0 0 8px; } .tline-tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 700; margin-right: 6px; } .tline-tag--red { background: var(--danger-bg); color: var(--danger); } .tline-tag--orange { background: var(--warn-bg); color: var(--warn-ink); } .tline-tag--gold { background: var(--warn-bg); color: var(--warn-ink-2); } .tline-tag--blue { background: var(--info-bg-2); color: var(--info); } /* ================== Gráfico de emendas por vereador ================== */ .em-chart { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; } .em-chart-row { display: grid; grid-template-columns: 160px 1fr 100px; align-items: center; gap: 8px; font-size: .82rem; } .em-chart-name { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .em-chart-bar-wrap { background: var(--cream); border-radius: 4px; height: 16px; } .em-chart-bar-fill { height: 100%; border-radius: 4px; background: var(--navy); transition: width .4s ease; } .em-chart-val { color: var(--muted); text-align: right; font-size: .78rem; } @media (max-width: 600px) { .em-chart-row { grid-template-columns: 120px 1fr 80px; } } /* ================== CNPJ Cross-reference badge ================== */ .cnpj-cruzado { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 11px; background: var(--warn-bg); border: 1px solid #f9a825; border-left: 4px solid var(--warn); border-radius: 6px; font-size: .8rem; line-height: 1.4; } .cnpj-cruzado__icon { font-size: 1rem; flex-shrink: 0; } .cnpj-cruzado__txt strong { color: var(--warn-ink-2); display: block; } .cnpj-cruzado__txt em { font-style: normal; color: var(--warn-ink); } /* ================== Licitações filterbar ================== */ #licitacoesContador { margin-left: auto; } #licitacoesMais { margin-top: 16px; } /* ============================================================ LVB — LOA Varginha Dobra Rica (lvb-* prefix) ============================================================ */ /* Outer section reset */ .loa-strip { --text: var(--ink); --blue: var(--navy); padding: 0; background: linear-gradient(180deg, var(--surface-2) 0, var(--surface-2) 52%, var(--surface-2) 100%); } /* ── HERO ───────────────────────────────────────────────────── */ .lvb-hero { background: linear-gradient(135deg, var(--navy) 0%, #063f78 54%, #042f5b 100%); padding: 68px 0 72px; position: relative; overflow: hidden; } .lvb-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 84px 84px; opacity: .36; pointer-events: none; } .lvb-hero__inner { position: relative; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(520px, 1.22fr); gap: 56px; align-items: center; } .lvb-hero__left { min-width: 0; max-width: 460px; } /* Eyebrow — mesma família da kicker do hero principal */ .lvb-eye { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 10px; border: 1px solid rgba(242,194,48,.34); border-radius: 999px; background: rgba(242,194,48,.1); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } /* Título — mesmo peso do hero principal, só cor diferente */ .lvb-hero__title { font-size: clamp(2.25rem, 4.2vw, 3.65rem); font-weight: 750; color: var(--on-accent); line-height: 1.02; margin: 0 0 18px; letter-spacing: 0; } .lvb-hero__sub { font-size: 1rem; color: rgba(255,255,255,.82); line-height: 1.65; margin: 0 0 30px; max-width: 430px; } .lvb-hero__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy-dk); font-weight: 700; font-size: .88rem; padding: 12px 22px; border-radius: 8px; text-decoration: none; box-shadow: 0 12px 26px rgba(0,0,0,.18); transition: background .15s, transform .1s, box-shadow .15s; } .lvb-hero__cta:hover { background: #ffd84a; transform: translateY(-1px); box-shadow: 0 16px 30px rgba(0,0,0,.22); text-decoration: none; } /* Stat cards — borda superior colorida, sem ícone */ .lvb-hero__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0; align-items: stretch; } .lvb-stat { min-height: 118px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-top-width: 4px; border-radius: 8px; padding: 18px 16px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 16px 32px rgba(0,0,0,.14); transition: transform .15s, background .15s, border-color .15s; } .lvb-stat:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.24); transform: translateY(-2px); } .lvb-stat--navy { border-top-color: var(--gold); } .lvb-stat--teal { border-top-color: #4dd0e1; } .lvb-stat--orange{ border-top-color: #ffb74d; } .lvb-stat--red { border-top-color: var(--danger-bd); } .lvb-stat--blue { border-top-color: #64b5f6; } .lvb-stat--gold { border-top-color: var(--gold); } .lvb-stat__cat { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.68); letter-spacing: .04em; text-transform: uppercase; } .lvb-stat__val { font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 750; color: var(--on-accent); line-height: 1.2; margin-top: 2px; } .lvb-stat--teal .lvb-stat__val { color: #4dd0e1; } .lvb-stat--orange .lvb-stat__val { color: #ffb74d; } .lvb-stat--red .lvb-stat__val { color: var(--danger-bd); } .lvb-stat--blue .lvb-stat__val { color: #64b5f6; } .lvb-stat__sub { font-size: .74rem; color: rgba(255,255,255,.6); margin-top: auto; } /* ── MIDDLE ─────────────────────────────────────────────────── */ .lvb-mid { background: linear-gradient(180deg, var(--surface-2) 0, var(--surface) 120px), var(--surface); padding: 56px 0 64px; border-bottom: 1px solid #e4ebf3; } .lvb-mid > .container { max-width: 1520px; } .lvb-mid__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; } .lvb-donut-col, .lvb-ranking-col { min-width: 0; background: var(--surface); border: 1px solid #dce7f2; border-radius: 8px; padding: 24px; box-shadow: 0 18px 42px rgba(21,33,49,.08); } .lvb-ranking-col { padding: 26px; border-top: 4px solid var(--navy); } /* Labels de coluna — mesmo peso dos labels da página */ .lvb-col-title { font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #657489; margin: 0 0 18px; } /* Donut */ .lvb-donut-col { display: flex; flex-direction: column; } .lvb-donut-wrap { display: grid; gap: 18px; justify-items: center; margin-bottom: 20px; } .lvb-donut { width: 154px; height: 154px; border-radius: 50%; flex-shrink: 0; background: conic-gradient( #e53935 0% 29%, #1976d2 29% 46%, #7b1fa2 46% 60%, #f57c00 60% 70%, #43a047 70% 100% ); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 18px 26px rgba(21,33,49,.12); } .lvb-donut__center { width: 88px; height: 88px; background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.25; box-shadow: 0 8px 20px rgba(21,33,49,.1); } .lvb-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; width: 100%; font-size: .82rem; color: var(--text); } .lvb-legend li { display: flex; align-items: center; gap: 8px; } .lvb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .lvb-percapita-box { display: flex; gap: 12px; align-items: center; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 100%); border: 1px solid #bfd8f6; border-radius: 8px; padding: 16px 18px; width: 100%; box-sizing: border-box; margin-top: auto; } .lvb-percapita-box p { margin: 2px 0; font-size: .78rem; color: var(--muted); line-height: 1.4; } .lvb-percapita-box strong { font-size: 1.25rem; font-weight: 700; color: var(--navy); display: block; } /* Ranking */ .lvb-ranking-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; } .lvb-ranking-hd .lvb-col-title { margin: 0; } .lvb-ver-link { background: none; border: none; cursor: pointer; font-size: .78rem; color: var(--blue); font-weight: 600; padding: 0; text-decoration: underline; } .lvb-rank-head { display: grid; grid-template-columns: 20px 14px 1fr 78px 44px 60px; gap: 0 10px; padding: 9px 10px; background: var(--surface-2); border-radius: 8px; font-size: .6rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; } .lvb-rank-row { display: grid; grid-template-columns: 20px 14px 1fr 78px 44px 60px; gap: 0 10px; padding: 10px; border-bottom: 1px solid #edf1f5; align-items: center; font-size: .82rem; transition: background .1s; } .lvb-rank-row:hover { background: var(--surface-2); } .lvb-rank-row--hidden { display: none; } .lvb-rn { font-size: .62rem; font-weight: 700; color: var(--muted); } /* Quadrado de cor — sem emoji */ .lvb-ri { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: block; } .lvb-rnome { display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .lvb-rnome span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: .8rem; color: var(--text); } .lvb-bar { height: 3px; background: var(--surface-2); border-radius: 2px; width: 100%; } .lvb-bar-f { height: 3px; border-radius: 2px; min-width: 10px; } .lvb-ta-r { text-align: right; } .lvb-rv { font-size: .78rem; font-weight: 700; color: var(--text); white-space: nowrap; } .lvb-rp { font-size: .75rem; font-weight: 700; } .lvb-rh { font-size: .7rem; color: var(--muted); } .lvb-expand-btn { display: block; width: 100%; margin-top: 12px; background: var(--surface); border: 1px solid #b8cce2; color: var(--navy); font-size: .8rem; font-weight: 700; padding: 10px; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; } .lvb-expand-btn:hover { background: var(--navy); color: var(--on-accent); } /* ── Explorador: controles, chips, grade ───────────────────── */ .lvb-ctrl { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 12px; padding: 12px; background: var(--surface-2); border: 1px solid #e2ebf4; border-radius: 8px; } .lvb-search { flex: 1; min-width: 0; border: 1px solid #d1dce8; border-radius: 8px; padding: 10px 12px; font-size: .82rem; font-family: inherit; color: var(--text); background: var(--surface); } .lvb-search:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,75,141,.12); } .lvb-sort { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); font-weight: 600; } .lvb-sort select { border: 1px solid #d1dce8; border-radius: 8px; padding: 9px 10px; font-size: .8rem; font-family: inherit; color: var(--text); background: var(--surface); cursor: pointer; } .lvb-views { display: flex; gap: 4px; } .lvb-view-btn { border: 1px solid #d1dce8; background: var(--surface); cursor: pointer; width: 38px; height: 38px; border-radius: 8px; font-size: 1rem; color: var(--muted); line-height: 1; transition: background .15s, color .15s, border-color .15s; } .lvb-view-btn.is-active { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .lvb-chips { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom: 12px; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: #b8cce2 transparent; } .lvb-chips::-webkit-scrollbar { height: 6px; } .lvb-chips::-webkit-scrollbar-thumb { background: #b8cce2; border-radius: 999px; } .lvb-chip { flex: 0 0 auto; border: 1px solid #d1dce8; background: var(--surface); cursor: pointer; font-family: inherit; font-size: .68rem; font-weight: 700; color: var(--text); padding: 6px 8px; border-radius: 999px; transition: background .15s, color .15s, border-color .15s; } .lvb-chip:hover { border-color: var(--navy); } .lvb-chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .lvb-count { font-size: .72rem; color: var(--muted); margin: 0 0 12px; } .lvb-empty { font-size: .85rem; color: var(--muted); padding: 24px 0; text-align: center; } /* Grade de cards */ .lvb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .lvb-card { background: var(--surface); border: 1px solid #eceff3; border-top: 3px solid var(--navy); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .lvb-card__eye { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .lvb-card__name { margin: 0; font-size: .92rem; font-weight: 700; color: var(--navy); } .lvb-card__val { font-size: 1.15rem; font-weight: 700; color: var(--text); } .lvb-card .lvb-bar { margin: 2px 0 4px; } .lvb-card__foot { display: flex; gap: 12px; } .lvb-card__foot span { flex: 1; font-size: .62rem; color: var(--muted); display: flex; flex-direction: column; gap: 2px; } .lvb-card__foot b { font-size: .82rem; color: var(--text); font-weight: 700; } .lvb-card__link { margin-top: 4px; font-size: .72rem; font-weight: 700; color: var(--blue); text-decoration: none; } .lvb-card__link:hover { text-decoration: underline; } /* ── FONTE ───────────────────────────────────────────────────── */ .lvb-source { background: var(--surface-2); border-top: 1px solid #e6eaf0; padding: 14px 0; font-size: .72rem; color: var(--muted); } /* ── RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .lvb-hero__inner { grid-template-columns: 1fr; gap: 30px; } .lvb-hero__left { max-width: 720px; } .lvb-hero__cards { grid-template-columns: repeat(2, 1fr); } .lvb-mid__inner { grid-template-columns: 1fr 1fr; } .lvb-ranking-col { grid-column: 1 / -1; order: 3; } } @media (max-width: 900px) { .lvb-hero { padding: 52px 0 56px; } .lvb-mid__inner { grid-template-columns: 1fr; } .lvb-ranking-col { grid-column: auto; order: initial; } .lvb-rank-head, .lvb-rank-row { grid-template-columns: 20px 14px 1fr 72px 44px; } .lvb-hide-sm { display: none; } .lvb-grid { grid-template-columns: 1fr; } .lvb-ctrl { grid-template-columns: 1fr; } .lvb-sort, .lvb-sort select { width: 100%; } .lvb-views { width: 100%; } .lvb-view-btn { flex: 1; } } @media (max-width: 540px) { .lvb-hero__cards { grid-template-columns: 1fr; } .lvb-donut-col, .lvb-ranking-col { padding: 18px; } .lvb-rank-head, .lvb-rank-row { grid-template-columns: 20px 14px 1fr 68px 40px; } } /* ================== DIÁRIO OFICIAL (WHATSAPP SUMMARY CARDS) ================== */ .diario-list-whats { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; } .diario-whats-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden; } .diario-whats-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(0, 75, 141, 0.2); } .diario-whats-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--navy) 0%, var(--teal) 100%); } .diario-whats-card__header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; } .diario-whats-card__title-block { display: flex; flex-direction: column; gap: 4px; } .diario-whats-card__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; } .diario-whats-card__subtitle { font-size: 0.9rem; color: var(--muted); font-weight: 500; } .diario-relevancia-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 6px 12px; border-radius: 20px; letter-spacing: 0.05em; } .diario-relevancia-badge--alta { background: var(--danger-bg-2); border: 1px solid #feb2b2; color: #9b2c2c; } .diario-relevancia-badge--media { background: var(--warn-bg); border: 1px solid #fbd38d; color: var(--warn-ink); } .diario-relevancia-badge--baixa { background: var(--success-bg); border: 1px solid #9ae6b4; color: #22543d; } .diario-whats-card__meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; background: var(--cream); padding: 16px; border-radius: 8px; border: 1px solid rgba(0, 75, 141, 0.05); } .diario-whats-card__meta-item { font-size: 0.88rem; color: var(--ink); display: flex; align-items: center; gap: 8px; } .diario-whats-card__meta-item strong { font-weight: 600; color: var(--navy); } .diario-whats-card__section { display: flex; flex-direction: column; gap: 6px; font-size: 0.94rem; } .diario-whats-card__section-title { font-size: 0.85rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .diario-whats-card__resumo { line-height: 1.5; color: var(--ink); } .diario-whats-card__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .diario-whats-card__list li { line-height: 1.4; } .diario-whats-card__actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; } .diario-whats-card__buttons { display: flex; gap: 8px; flex-wrap: wrap; } .diario-whats-card__btn-zap { background: #0b5f3a; color: var(--on-accent); border: none; border-radius: 6px; padding: 8px 14px; font-size: 0.85rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s; } .diario-whats-card__btn-zap:hover { background: #084c2e; text-decoration: none; } .diario-whats-card__btn-link { background: var(--surface-2); border: 1px solid var(--line); color: var(--navy); border-radius: 6px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, border-color 0.15s; } .diario-whats-card__btn-link:hover { background: var(--line); border-color: rgba(0, 75, 141, 0.2); text-decoration: none; } /* ================== Frota municipal ================== */ .frota-audit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0; } .frota-audit article, .frota-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .frota-audit article { padding: 14px; } .frota-audit article strong { display: block; font-size: 1.45rem; color: var(--navy); line-height: 1.15; } .frota-audit article span { display: block; color: var(--muted); font-size: .84rem; margin-top: 4px; } .frota-audit .is-warn { border-color: var(--danger-bd-2); background: var(--danger-bg-2); } .frota-audit .is-warn strong { color: var(--red); } .frota-centros { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } .frota-centros button { border: 1px solid var(--line); background: var(--surface-2); color: var(--navy); border-radius: 999px; padding: 7px 12px; font: inherit; cursor: pointer; } .frota-centros strong { margin-right: 8px; } .frota-centros span { color: var(--muted); font-size: .82rem; } .frota-list { display: grid; gap: 12px; } .frota-card { display: grid; grid-template-columns: 118px 1fr; overflow: hidden; } .frota-card__placa { display: flex; align-items: center; justify-content: center; min-height: 100%; background: var(--surface-2); border-right: 1px solid var(--line); color: var(--navy); font-weight: 900; font-size: 1.1rem; letter-spacing: .04em; } .frota-card__body { padding: 14px 16px; display: grid; gap: 10px; } .frota-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .frota-card__head strong { color: var(--ink); font-size: 1.04rem; } .frota-card__head span, .frota-mini { color: var(--muted); font-size: .86rem; } .frota-mini--warn { color: var(--red); background: var(--danger-bg-2); border: 1px solid var(--danger-bd-2); border-radius: 8px; padding: 8px 10px; } .frota-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; font-size: .9rem; } .frota-card__grid span { color: var(--ink); } .frota-alertas { display: flex; flex-wrap: wrap; gap: 6px; } .frota-alertas i { font-style: normal; color: var(--red); background: var(--danger-bg-2); border: 1px solid var(--danger-bd-2); border-radius: 999px; padding: 4px 8px; font-size: .78rem; font-weight: 800; } .frota-card__actions { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 760px) { .frota-audit { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frota-card { grid-template-columns: 1fr; } .frota-card__placa { min-height: auto; justify-content: flex-start; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); } .frota-card__head, .frota-card__grid { grid-template-columns: 1fr; display: grid; } } /* Selo de saude do dado — aviso contextual de limite/defasagem por pagina */ /* Selo de saude do dado — aviso contextual de limite/defasagem por pagina */ .data-health-strip { display: grid; gap: 10px; background: var(--warn-bg); border: 1px solid #f2d48a; border-left: 5px solid var(--gold-dk); border-radius: 8px; padding: 14px 16px; margin: 16px 0 20px; font-size: .88rem; color: #5f4300; } .data-health-strip--critical { background: var(--danger-bg-2); border-color: var(--danger-bd); border-left-color: var(--red); color: #7f1d1d; } .data-health-strip--ok { background: var(--success-bg); border-color: #a8dcc0; border-left-color: var(--teal); color: #14532d; } .data-health-strip__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } /* Recolhível: a barra de avisos vira um

tocável. */ .data-health-strip__det > summary.data-health-strip__head { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; } .data-health-strip__det > summary::-webkit-details-marker { display: none; } .data-health-strip__det > summary strong { margin-bottom: 0; flex: 1; } .data-health-strip__det > summary::after { content: "⌄"; font-size: 1.2em; line-height: 1; color: var(--gold-dk); transition: transform .2s ease; } .data-health-strip__det[open] > summary::after { transform: rotate(180deg); } .data-health-strip__body { margin-top: 10px; } /* O pai .data-health-strip é grid e atrapalha o collapse nativo do

; escondemos o corpo explicitamente quando fechado. */ .data-health-strip__det:not([open]) > .data-health-strip__body { display: none; } .data-health-strip strong { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; color: var(--gold-dk); } .data-health-strip--critical strong { color: var(--red); } .data-health-strip--ok strong { color: var(--teal); } .data-health-strip p { margin: 0; color: inherit; line-height: 1.45; } .data-health-strip__head > span { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid rgba(0,0,0,.08); color: var(--ink); font-weight: 800; white-space: nowrap; } .data-health-strip ul { margin: 0; padding-left: 18px; } .data-health-strip li { margin: 5px 0; line-height: 1.5; } .data-health-strip li b { color: var(--ink); } .data-health-strip li em { display: block; color: var(--muted); font-style: normal; } .data-health-strip a { width: fit-content; color: var(--navy); font-weight: 800; } #homeDataHealth.data-health-strip { grid-column: 1 / -1; margin: 0; } .data-health-strip--compact { gap: 12px; } .data-health-strip--compact ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-left: 0; list-style: none; } .data-health-strip--compact li { margin: 0; padding: 9px 10px; border: 1px solid rgba(138,91,0,.18); border-radius: 8px; background: rgba(255,255,255,.58); } .data-health-strip--compact li em { margin-top: 3px; } @media (max-width: 640px) { .data-health-strip__head { grid-template-columns: 1fr; } .data-health-strip__head > span { width: fit-content; } .data-health-strip--compact ul { grid-template-columns: 1fr; } } /* ================== AJUSTES DE DESIGN PREMIUM E RECOMENDAÇÕES ================== */ .nav__link--cta { background: linear-gradient(135deg, var(--gold) 0%, #f39c12 100%) !important; color: var(--navy) !important; box-shadow: 0 4px 6px rgba(243, 156, 18, 0.2); border: 1px solid rgba(243, 156, 18, 0.4); transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important; animation: pulse-cta 3s infinite alternate; } .nav__link--cta:hover { background: var(--navy) !important; color: var(--on-accent) !important; box-shadow: 0 4px 10px rgba(0, 75, 141, 0.3); transform: translateY(-1px); } @keyframes pulse-cta { 0% { box-shadow: 0 4px 6px rgba(243, 156, 18, 0.2); } 100% { box-shadow: 0 4px 12px rgba(243, 156, 18, 0.45); } } /* Efeitos de Hover para os cards da Timeline */ .timeline-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--navy) !important; } /* Filtros Responsivos - Gaveta de Filtros */ @media (max-width: 768px) { .filterbar { display: none !important; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); box-shadow: 0 -10px 25px rgba(0,0,0,0.15); border-radius: 16px 16px 0 0; padding: 20px; z-index: 1001; flex-direction: column; gap: 12px !important; align-items: stretch !important; animation: slide-up-drawer 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .filterbar.is-open { display: flex !important; } .filterbar__count { order: -1; margin-bottom: 8px; text-align: center; } .filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; backdrop-filter: blur(4px); display: none; animation: fade-in-overlay 0.2s ease-out; } .filter-overlay.is-active { display: block; } .btn-filter-trigger { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 12px; padding: 12px; background: var(--surface-2); border: 1.5px solid #cbd5e1; border-radius: 8px; color: var(--navy); font-weight: 700; cursor: pointer; transition: background 0.2s; } .btn-filter-trigger:hover { background: var(--surface-2); } .btn-filter-close { display: block !important; background: var(--navy); color: var(--on-accent); border: none; border-radius: 8px; padding: 10px; font-weight: 700; text-align: center; cursor: pointer; margin-top: 10px; } } @keyframes slide-up-drawer { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fade-in-overlay { from { opacity: 0; } to { opacity: 1; } } .btn-filter-close { display: none; } .btn-filter-trigger { display: none; } /* Tag de periodo dos vencimentos no pessoal */ .tag-periodo-alerta { background: var(--surface-2); color: var(--navy); border: 1px solid #cbd5e1; padding: 3px 8px; border-radius: 4px; font-size: 0.78em; font-weight: 700; margin-top: 4px; display: inline-block; vertical-align: middle; } /* ============================================================ CHAT CIDADÃO ============================================================ */ .chat-cidadao { position: fixed; bottom: 24px; right: 20px; z-index: 1200; font-family: var(--font, Inter, sans-serif); } .chat-cidadao__toggle { display: flex; align-items: center; gap: 8px; background: var(--verde, var(--success-dk)); color: var(--on-accent); border: none; border-radius: 50px; padding: 12px 20px; font-size: .9rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.22); transition: transform .15s, box-shadow .15s, background .15s; } .chat-cidadao__toggle:hover { background: var(--success-mid); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.28); } .chat-cidadao__toggle.is-active { background: var(--danger); } .chat-cidadao__toggle.is-active span::before { content: "Fechar"; } .chat-cidadao__toggle.is-active span { font-size: 0; } .chat-cidadao__toggle.is-active span::before { font-size: .9rem; } .chat-cidadao__panel { position: absolute; bottom: 64px; right: 0; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; animation: chatSlideIn .2s ease; } @keyframes chatSlideIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } .chat-cidadao__header { display: flex; align-items: center; justify-content: space-between; background: var(--verde, var(--success-dk)); color: var(--on-accent); padding: 14px 16px; } .chat-cidadao__header-info strong { display: block; font-size: .9rem; } .chat-cidadao__header-info small { font-size: .72rem; opacity: .8; } .chat-cidadao__close { background: none; border: none; color: var(--on-accent); font-size: 1.1rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 1; opacity: .8; transition: opacity .15s; } .chat-cidadao__close:hover { opacity: 1; } .chat-cidadao__msgs { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; max-height: 360px; background: var(--surface-2); } .chat-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .84rem; line-height: 1.5; word-break: break-word; } .chat-msg a { color: var(--verde, var(--success-dk)); font-weight: 600; text-decoration: underline; } .chat-msg ul { margin: 6px 0 6px 16px; padding: 0; } .chat-msg li { margin-bottom: 2px; } .chat-msg--bot { background: var(--surface); color: var(--ink); border-radius: 4px 14px 14px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); align-self: flex-start; } .chat-msg--user { background: var(--verde, var(--success-dk)); color: var(--on-accent); border-radius: 14px 4px 14px 14px; align-self: flex-end; } /* Typing indicator */ .chat-typing { display: inline-flex; gap: 4px; align-items: center; height: 16px; } .chat-typing i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #aaa; animation: chatDot 1.2s infinite ease-in-out both; font-style: normal; } .chat-typing i:nth-child(1) { animation-delay: 0s; } .chat-typing i:nth-child(2) { animation-delay: .18s; } .chat-typing i:nth-child(3) { animation-delay: .36s; } @keyframes chatDot { 0%, 80%, 100% { transform: scale(.7); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } /* Chips de sugestão */ .chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 2px; } .chat-chip { background: var(--surface); border: 1.5px solid var(--verde, var(--success-dk)); color: var(--verde, var(--success-dk)); border-radius: 50px; padding: 5px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .chat-chip:hover { background: var(--verde, var(--success-dk)); color: var(--on-accent); } /* Input */ .chat-cidadao__footer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border-top: 1px solid #e8e8e8; } .chat-cidadao__input { flex: 1; border: 1.5px solid #ddd; border-radius: 50px; padding: 8px 14px; font-size: .84rem; outline: none; font-family: inherit; transition: border-color .15s; } .chat-cidadao__input:focus { border-color: var(--verde, var(--success-dk)); } .chat-cidadao__send { background: var(--verde, var(--success-dk)); color: var(--on-accent); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s, transform .15s; } .chat-cidadao__send:hover { background: var(--success-mid); transform: scale(1.08); } @media (max-width: 480px) { .chat-cidadao { bottom: 16px; right: 12px; } .chat-cidadao__panel { width: calc(100vw - 24px); right: -8px; } .chat-cidadao__msgs { max-height: 300px; } } /* ================== HOME PRESENTATION REFINEMENT ================== */ body[data-page="home"] .topbar__inner { min-height: 68px; padding-top: 10px; padding-bottom: 10px; gap: 18px; } body[data-page="home"] .brand__mark { width: 36px; height: 36px; } body[data-page="home"] .brand__name { font-size: 19px; } body[data-page="home"] .brand__tag { font-size: 10px; } body[data-page="home"] .nav__link { min-height: 36px; padding: 7px 10px; } body[data-page="home"] .nav__toggle { width: 38px; height: 38px; min-width: 38px; padding: 0; justify-content: center; font-size: 19px; } .onboarding { max-width: 1172px; margin: 10px auto; padding: 10px 14px; gap: 14px; border-radius: 6px; box-shadow: none; } .onboarding__body { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .onboarding__title { flex: 0 0 auto; margin: 0; font-size: .9rem; } .onboarding__text { font-size: .82rem; line-height: 1.4; } .onboarding__close { align-self: center; padding: 7px 14px; border-radius: 6px; font-size: .8rem; } body[data-page="home"] .hero--modern { padding: 46px 0 54px; } body[data-page="home"] .hero--modern .container { grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; } body[data-page="home"] .hero__title { font-size: clamp(2.7rem, 4.8vw, 4rem); line-height: 1.04; margin: 16px 0; } body[data-page="home"] .hero__lead { max-width: 640px; margin-bottom: 16px; font-size: 1rem; line-height: 1.58; } body[data-page="home"] .hero__proof { margin-bottom: 18px; } body[data-page="home"] .search { min-height: 54px; box-shadow: 0 14px 32px rgba(0,0,0,.15); } body[data-page="home"] .start-guide { margin-top: 12px; padding: 12px; box-shadow: none; } body[data-page="home"] .start-guide__head { margin-bottom: 8px; } body[data-page="home"] .start-guide__choices button { min-height: 34px; padding: 6px 10px; } body[data-page="home"] .hub-full { padding: 16px; background: rgba(4, 29, 49, .3); border-color: rgba(255,255,255,.2); } body[data-page="home"] .hub-grid-18 { gap: 8px; } body[data-page="home"] .hub-grid-18 .hub-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 1px; align-items: center; min-height: 64px; padding: 9px 10px; text-align: left; } body[data-page="home"] .hub-grid-18 .hub-item__icon { display: grid !important; grid-row: 1 / 3; place-items: center; width: 26px; height: 26px; } body[data-page="home"] .hub-grid-18 .hub-item__icon svg { width: 22px; height: 22px; } body[data-page="home"] .hub-grid-18 .hub-item span { font-size: .86rem; line-height: 1.2; } body[data-page="home"] .hub-grid-18 .hub-item__cue { margin: 0; font-size: .7rem; line-height: 1.2; } body[data-page="home"] .hub-numeros { padding: 13px; } body[data-page="home"] .hub-numeros__item { padding: 8px 9px; } @media (max-width: 960px) { body[data-page="home"] .hero--modern .container { grid-template-columns: 1fr; gap: 24px; } body[data-page="home"] .hero__content { max-width: 760px; } body[data-page="home"] .hub-full { max-width: 760px; } body[data-page="home"] .hub-grid-18 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .onboarding { margin: 8px 16px; align-items: stretch; } .onboarding__body { display: grid; gap: 3px; } body[data-page="home"] .hero--modern { padding: 36px 0 44px; } } @media (max-width: 480px) { body[data-page="home"] .topbar__inner { min-height: 60px; } body[data-page="home"] .topbar__inner { flex-wrap: nowrap; gap: 8px; } body[data-page="home"] .nav { position: absolute; top: 100%; left: 0; right: 0; padding: 8px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(0,75,141,.12); } body[data-page="home"] .brand__name { font-size: 17px; } body[data-page="home"] .brand__tag { letter-spacing: 1.3px; } body[data-page="home"] .hero__title { font-size: 2.45rem; } body[data-page="home"] .hero__kicker { font-size: .66rem; } body[data-page="home"] #atualizado { display: flex; margin: 8px 0 0; min-height: 24px; } body[data-page="home"] .hub-grid-18 { grid-template-columns: 1fr 1fr; } } /* Reserva o espaço do resumo semanal antes dos dados chegarem. Sem esta reserva, o bloco surgia acima da dobra e empurrava toda a página no celular. */ body[data-page="home"] .semana-hero--pending { visibility: hidden; } html.onboarding-seen #onboarding-banner { display: none; } @media (prefers-reduced-motion: reduce) { .animate-in, .animate-in-delayed, .onboarding, .nav__link--cta { animation: none !important; } } /* ================== TEMA CLARO E RESPONSIVO FINAL ================== */ body, .section--alt, .section--prefeitura, .section--camara, body[data-page="camara"] .section--camara, body[data-page="relatorios"] .section--alt { background: var(--surface); } .hero--modern { min-height: auto; padding: 58px 0 66px; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); } body[data-page="home"] .hero--modern { min-height: auto; background: var(--surface); color: var(--ink); } .hero--modern::before { display: none; } .hero--modern .hero__title { color: var(--navy); } .hero--modern .hero__lead, body[data-page="home"] .hero__lead { color: var(--ink); opacity: 1; } body[data-page="home"] .hero__kicker { border-color: #b8cfe3; background: var(--surface-2); color: var(--navy); } body[data-page="home"] #atualizado { color: var(--muted); } body[data-page="home"] .hero__proof span, .audit-chips button { border-color: #cfe0ef; background: var(--surface-2); color: var(--navy); } body[data-page="home"] .search, .search { background: var(--surface); border-color: #b8cfe3; box-shadow: 0 12px 28px rgba(0,75,141,.1); } body[data-page="home"] .search input, .search input { color: var(--ink); } body[data-page="home"] .search input::placeholder, .search input::placeholder { color: var(--muted); } body[data-page="home"] .start-guide, body[data-page="home"] .hub-full, body[data-page="home"] .hub-numeros { background: var(--surface); border-color: #d5e3ef; box-shadow: 0 10px 28px rgba(0,75,141,.08); } body[data-page="home"] .start-guide__head span, body[data-page="home"] .hub-full__title, body[data-page="home"] .hub-numeros__titulo { color: var(--navy); } body[data-page="home"] .start-guide__head strong, body[data-page="home"] .start-guide__detail strong { color: var(--navy); } body[data-page="home"] .start-guide__choices button { border-color: #cfe0ef; background: var(--surface-2); color: var(--navy); } body[data-page="home"] .start-guide__detail { border-top-color: var(--line); } body[data-page="home"] .start-guide__detail p, body[data-page="home"] .start-guide__facts span { color: var(--ink); } body[data-page="home"] .start-guide__facts span, body[data-page="home"] .hub-grid-18 .hub-item, body[data-page="home"] .hub-numeros__item { background: var(--surface-2); border-color: #d5e3ef; } body[data-page="home"] .start-guide__facts b, body[data-page="home"] .hub-numeros__item strong { color: var(--navy); } body[data-page="home"] .hub-grid-18 .hub-item span, body[data-page="home"] .hub-grid-18 .hub-item__cue, body[data-page="home"] .hub-numeros__item span, body[data-page="home"] .hub-numeros__link { color: var(--muted); } body[data-page="home"] .hub-grid-18 .hub-item__icon svg { stroke: var(--navy); } /* hero-alert, semana-hero, smart-suggest, smart-guide — light mode overrides */ .hero-alert { background: var(--warn-bg); border-color: #f0c040; color: var(--ink); } .hero-alert strong { color: var(--navy-dk); } .hero-alert__link { color: var(--navy); } .hero-alert__link:hover { color: var(--navy-dk); text-decoration: underline; } .semana-hero { background: var(--surface-2); border-color: #d5e3ef; } .semana-hero:hover { background: var(--info-bg); } .semana-hero__label { color: var(--muted); } .semana-hero__resume { color: var(--ink); } .semana-hero__link { color: var(--navy); } .smart-suggest { color: var(--ink); } .smart-suggest__head strong { color: var(--navy); } .smart-suggest__head span { color: var(--muted); } .smart-suggest__list button { border-color: #d5e3ef; background: var(--surface-2); color: var(--ink); } .smart-suggest__list button:hover, .smart-suggest__list button:focus-visible, .smart-suggest__list button.is-active { background: var(--success-bg); border-color: var(--teal); color: var(--navy-dk); } .smart-suggest__list span { color: var(--navy); } .smart-suggest__list small { color: var(--muted); } .smart-suggest__list p { color: var(--muted); } .smart-guide { background: var(--surface-2); border-color: #b8cfe3; box-shadow: 0 4px 16px rgba(0,75,141,.08); } .smart-guide__head span { color: var(--navy); } .smart-guide__head strong { color: var(--navy-dk); } .smart-guide__grid article, .smart-guide__question { border-color: #d5e3ef; background: var(--surface); } .smart-guide b { color: var(--muted); } .smart-guide span { color: var(--ink); } .smart-guide__go { background: var(--navy); color: var(--on-accent); } .smart-guide__go:hover, .smart-guide__go:focus-visible { background: var(--navy-dk); outline-color: var(--navy); } .home-ops__head { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 5px solid var(--navy); box-shadow: 0 10px 28px rgba(0,75,141,.08); } .home-ops__head > span, .home-ops__head h2, .home-ops__brief strong { color: var(--navy); } .home-ops__head p { color: var(--ink); } .home-ops__brief { border-color: var(--line); } .home-ops__brief a { border-color: #d5e3ef; background: var(--surface-2); color: var(--navy); } .home-ops__brief a:hover { background: var(--surface-2); } .home-ops__freshness { background: var(--surface-2); color: var(--navy); } .bigheader .reader-summary { background: var(--surface-2); border: 1px solid #d5e3ef; border-left: 5px solid var(--teal); color: var(--ink); } .bigheader .reader-summary__label, .bigheader .reader-summary p, .bigheader .reader-summary__chips strong { color: var(--navy); } .bigheader .reader-summary__chips span { border-color: #d5e3ef; background: var(--surface); color: var(--ink); } .bigheader .reader-summary__chips small { color: var(--muted); } .card.highlight, .tce-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 5px solid var(--navy); box-shadow: 0 8px 20px rgba(0,75,141,.06); } .card.highlight .highlight__tag, .tce-card h4, .tce-card .cta { color: var(--navy); } .tce-card p { color: var(--muted); } .footer { background: var(--surface); color: var(--ink); border-top: 5px solid var(--navy); } .footer__brand span, .footer__sources a, .footer__updated span, .footer__nav a { color: var(--navy); } .footer__bottom { border-top-color: var(--line); } @media (max-width: 760px) { html, body { overflow-x: clip; } body { font-size: 15px; } .container { padding-inline: 14px; } .topbar__inner, body[data-page="home"] .topbar__inner { min-height: 62px; flex-wrap: nowrap; gap: 8px; padding: 9px 14px; } .brand { min-width: 0; gap: 9px; } .brand__mark { width: 34px; height: 34px; flex: 0 0 34px; } .brand__name, body[data-page="home"] .brand__name { font-size: 17px; line-height: 1.15; } .brand__tag, body[data-page="home"] .brand__tag { font-size: 9px; letter-spacing: 1.2px; } .nav__toggle, body[data-page="home"] .nav__toggle { width: 42px; height: 42px; min-width: 42px; margin-left: auto; padding: 0; justify-content: center; font-size: 0; } .nav__toggle::before { content: "☰"; font-size: 20px; line-height: 1; } .nav__toggle[aria-expanded="true"]::before { content: "✕"; } .nav { position: absolute; top: 100%; left: 0; right: 0; padding: 8px 14px 12px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(0,75,141,.12); } .nav__link { min-height: 42px; display: flex; align-items: center; } .section { padding: 20px 0 34px; } .breadcrumb { margin-bottom: 12px; } .bigheader, .bigheader:not(:has(.reader-summary)) { gap: 14px; margin-bottom: 18px; padding: 18px 16px; border-left-width: 5px; } .bigheader__title { font-size: clamp(1.85rem, 9vw, 2.3rem); } .bigheader__lead { font-size: .98rem; line-height: 1.55; } .bigheader .reader-summary { padding: 15px; } .civic-actions { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; padding-right: 32px; scrollbar-width: none; gap: 8px; mask-image: linear-gradient(to right, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%); } .civic-actions::-webkit-scrollbar { display: none; } .civic-actions a, .civic-actions button { flex-shrink: 0; width: auto; white-space: nowrap; min-height: 40px; } .block, .cobrar-block, .camara-index-spotlight { max-width: 100%; margin-top: 18px; padding: 16px; overflow: hidden; } .block > *, .block__content, .indice-relevancia, .method-card > *, .indice-card > * { min-width: 0; max-width: 100%; } .block__title { font-size: 1.25rem; overflow-wrap: anywhere; } .block__lead { font-size: .94rem; line-height: 1.5; } .data-health-strip li:nth-child(n + 3) { display: none; } .data-health-strip { padding: 13px 14px; } .method-card, .indice-head, .indice-card, .keyword-row, .keyword-row--button { grid-template-columns: minmax(0, 1fr); } .method-card { padding: 14px; } .method-card__tag { overflow-wrap: anywhere; } .indice-stats { grid-template-columns: 1fr; } .indice-perfis { grid-template-columns: 1fr; } .indice-card__dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } .indice-card__rank, .indice-card__score, .indice-card__score .indice-score-open { text-align: left; } .indice-card__score .indice-score-open { padding-left: 0; } .camara-subnav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 8px 0; background: var(--surface); } .camara-subnav .csec-btn { min-width: 0; padding: 9px 8px; border-radius: 7px; font-size: .85rem; } .camara-subnav .csec-btn:last-child { grid-column: 1 / -1; } .keyword-row strong { white-space: normal; overflow-wrap: anywhere; } .keyword-row em, .keyword-row__action { margin-left: 0; width: fit-content; } .forn-row { grid-template-columns: 34px minmax(0, 1fr); } .forn-row__actions, .forn-row__cnpj, .forn-row__valor { grid-column: 2; } .forn-row__valor { text-align: left; } .stats, .audit-scores, .features-grid, .tce-cards, .hub, .home-ops__stats, .home-ops__priorities, .home-ops__actions { grid-template-columns: 1fr; } .stat, .signal, .score-card, .contrato, .em, .action { min-width: 0; overflow-wrap: anywhere; } .score-card { display: grid; gap: 16px; padding: 18px; } .score-card__circle { width: 112px; } .pref-tabs, .cat-chips { max-width: 100%; scroll-snap-type: x proximity; } .pref-tabs { top: 64px; } .pref-tab, .cat-chip { scroll-snap-align: start; } .home-ops { margin-top: 22px; } .home-ops__head { padding: 18px 16px; } .home-ops__head h2 { font-size: 1.65rem; max-width: none; } .home-ops__brief { border-top-color: var(--line); } .data-legend { position: static; width: 100%; margin-top: 14px; font-size: .84rem; } .data-legend__toggle { width: 100%; justify-content: center; } /* No fluxo (static) a página rola normalmente — painel expande livre, sem scroll aninhado */ .data-legend__panel { max-height: none; overflow: visible; } .chat-cidadao { right: 14px; bottom: 14px; } .chat-cidadao__toggle { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; } .chat-cidadao__toggle > span { display: none; } .chat-cidadao__panel { right: 0; bottom: 58px; width: calc(100vw - 28px); max-width: none; border-radius: 10px; } .chat-cidadao__msgs { max-height: min(52vh, 380px); } #btn-topo { right: 72px; bottom: 16px; } .footer { padding-top: 28px; } .footer__inner { gap: 22px; padding-bottom: 22px; } } @media (max-width: 480px) { body[data-page="home"] .hero--modern, .hero--modern { padding: 28px 0 36px; } body[data-page="home"] .hero__title { max-width: 12ch; margin: 14px 0; font-size: clamp(2rem, 10.5vw, 2.35rem); line-height: 1.06; } body[data-page="home"] .hero__lead { margin-bottom: 16px; font-size: .96rem; line-height: 1.55; } body[data-page="home"] #atualizado { display: flex; margin: 8px 0 0; } body[data-page="home"] .hub-grid-18 { grid-template-columns: 1fr; } .onboarding { grid-template-columns: minmax(0, 1fr) auto; margin: 6px 10px; padding: 9px 10px; } .onboarding__body { display: block; } .onboarding__text { font-size: .79rem; line-height: 1.4; } .onboarding__close { padding: 7px 9px; } .frota-audit { grid-template-columns: 1fr; } .modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); } } /* ===== PUBLICACOES ESTRUTURADAS (resumos com IA) ===== */ .pub-secao { margin: 24px 0 8px; } .pub-secao__head h2 { font-size: 1.45rem; color: var(--navy); margin: 0 0 4px; } .pub-secao__tag { font-size: .68rem; font-weight: 700; background: var(--gold); color: var(--navy); padding: 3px 9px; border-radius: 999px; vertical-align: middle; margin-left: 6px; } .pub-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; } .pub-busca { flex: 1 1 240px; min-height: 40px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 10px; font-size: .95rem; } .pub-busca:focus { outline: none; border-color: var(--navy); } .pub-chips { display: flex; gap: 6px; flex-wrap: wrap; } .pub-chip { padding: 7px 14px; border: 2px solid var(--line); background: var(--surface); border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s; } .pub-chip:hover { border-color: var(--navy); } .pub-chip.is-active { background: var(--navy); color: var(--on-accent); border-color: var(--navy); } .pub-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; } .pub-card { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--navy); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .pub-card--camara { border-left-color: #6a4ca8; } .pub-card--diario { border-left-color: var(--teal); } .pub-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pub-tag { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--cream); color: var(--navy); } .pub-tag--fonte { background: var(--navy); color: var(--on-accent); } .pub-tag--tema { background: var(--surface-2); color: var(--muted); font-weight: 600; } .pub-badge { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; } .pub-badge--alta { background: var(--danger-bg); color: var(--danger-ink); } .pub-badge--media { background: var(--warn-bg); color: var(--warn-ink); } .pub-badge--baixa { background: var(--surface-2); color: var(--ink-soft, #5f5e5a); } .pub-card__data { margin-left: auto; font-size: .78rem; color: var(--muted); } .pub-card__titulo { font-size: 1.02rem; font-weight: 700; color: var(--navy); margin: 2px 0 0; line-height: 1.3; } .pub-card__autor { font-size: .82rem; color: var(--muted); margin: 0; } .pub-card__resumo { font-size: .92rem; line-height: 1.55; margin: 4px 0; } .pub-card__sub { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 6px 0 2px; } .pub-card__txt { font-size: .88rem; line-height: 1.5; margin: 0; } .pub-card__list { font-size: .88rem; line-height: 1.5; margin: 2px 0; padding-left: 18px; } .pub-card__valor { font-size: 1.15rem; font-weight: 800; color: var(--teal); margin: 4px 0; } .pub-card__mod { font-size: .7rem; font-weight: 700; background: var(--warn-bg); color: var(--warn-ink); padding: 2px 8px; border-radius: 6px; vertical-align: middle; } .pub-card__atencao { background: var(--warn-bg); border-radius: 8px; padding: 8px 12px; font-size: .84rem; } .pub-card__atencao strong { color: var(--warn-ink); display: block; margin-bottom: 2px; } .pub-card__atencao ul { margin: 0; padding-left: 18px; line-height: 1.5; } .pub-card__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); } .pub-card__links a { font-size: .82rem; font-weight: 600; color: var(--navy); text-decoration: none; } .pub-card__links a:hover { text-decoration: underline; } @media (max-width: 600px) { .pub-feed { grid-template-columns: 1fr; } } /* ===== INDICE DE TRANSPARENCIA (Radar ATRICON/PNTP) ===== */ .section.transp-radar { background: var(--navy); color: var(--on-accent); padding: 42px 0; } .transp-radar__head { text-align: center; max-width: 760px; margin: 0 auto 26px; } .transp-radar__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--gold); } .transp-radar__title { font-size: 1.7rem; color: var(--on-accent); margin: 8px 0 10px; } .transp-radar__lead { font-size: 1rem; line-height: 1.6; color: #dce4ee; margin: 0; } .transp-radar__lead strong { color: var(--on-accent); } .transp-radar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; } .transp-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; } .transp-card__orgao { font-size: .95rem; font-weight: 700; color: var(--on-accent); } .transp-card__nivel { align-self: flex-start; font-size: .76rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; } .transp-nivel--elevado { background: var(--warn-bg); color: var(--warn-ink); } .transp-nivel--inter { background: var(--danger-bg); color: var(--danger-ink); } .transp-card__indice { font-size: 2.4rem; font-weight: 800; color: var(--gold); line-height: 1; margin: 4px 0; } .transp-card__indice small { font-size: 1.1rem; } .transp-card__det { font-size: .82rem; color: #b9c4d4; } .transp-radar__foot { max-width: 760px; margin: 22px auto 0; text-align: center; } .transp-radar__foot .muted { color: #b9c4d4 !important; } .transp-radar__foot strong { color: var(--on-accent); } .transp-radar__btn { display: inline-block; margin-top: 12px; background: var(--gold); color: var(--navy); font-weight: 700; padding: 11px 22px; border-radius: 10px; text-decoration: none; } .transp-radar__btn:hover { filter: brightness(1.08); } @media (max-width: 600px) { .transp-radar__grid { grid-template-columns: 1fr; } .transp-radar__title { font-size: 1.4rem; } } /* ===== FUNDAÇÃO CULTURAL — CAMADA VISUAL ACOLHEDORA ===== */ body[data-page="fundacao"] .section--fundacao { background: radial-gradient(circle at 9% 3%, rgba(255, 183, 3, .16), transparent 24rem), radial-gradient(circle at 92% 16%, rgba(7, 138, 75, .10), transparent 28rem), linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 48%, var(--surface-2) 100%); } body[data-page="fundacao"] .bigheader { position: relative; overflow: hidden; border: 0; border-radius: 24px; padding: clamp(26px, 4vw, 46px); background: linear-gradient(118deg, rgba(0, 75, 141, .97), rgba(7, 102, 103, .94)), var(--navy); box-shadow: 0 20px 50px rgba(0, 55, 99, .18); } body[data-page="fundacao"] .bigheader::after { content: ""; position: absolute; width: 260px; height: 260px; right: -75px; top: -105px; border-radius: 50%; background: rgba(255, 183, 3, .22); box-shadow: -80px 150px 0 rgba(255, 255, 255, .06); pointer-events: none; } body[data-page="fundacao"] .bigheader__kicker { color: #ffd166; } body[data-page="fundacao"] .bigheader__title, body[data-page="fundacao"] .bigheader__lead, body[data-page="fundacao"] .bigheader > .muted { position: relative; z-index: 1; color: var(--on-accent); } body[data-page="fundacao"] .bigheader__lead { color: rgba(255, 255, 255, .86); max-width: 760px; } body[data-page="fundacao"] .bigheader .civic-actions { position: relative; z-index: 1; } body[data-page="fundacao"] .bigheader .civic-actions a { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .11); color: var(--on-accent); backdrop-filter: blur(8px); } body[data-page="fundacao"] .bigheader .civic-actions a:hover { border-color: #ffd166; background: #ffd166; color: var(--navy); } body[data-page="fundacao"] .page-howto { position: relative; z-index: 1; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .10); color: var(--on-accent); } body[data-page="fundacao"] .page-howto summary, body[data-page="fundacao"] .page-howto__body { color: var(--on-accent); } body[data-page="fundacao"] .block { scroll-margin-top: 96px; } body[data-page="fundacao"] .block--cross-suppliers { border: 1px solid rgba(0, 75, 141, .10); border-radius: 24px; padding: clamp(20px, 3vw, 32px); background: rgba(255, 255, 255, .80); box-shadow: 0 18px 46px rgba(0, 64, 104, .08); } .cross-heading { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 22px; } .cross-heading__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(145deg, #ffca3a, #ffad05); color: var(--navy); font-size: 1.55rem; font-weight: 900; box-shadow: 0 10px 24px rgba(255, 173, 5, .25); } .cross-heading__kicker { margin: 1px 0 5px; color: var(--success); font-size: .72rem; font-weight: 800; letter-spacing: .13em; } .block--cross-suppliers .block__title::before { display: none; } .block--cross-suppliers .block__lead { max-width: 840px; margin: 8px 0 0; } .cross-supplier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cross-supplier-card { min-width: 0; border: 1px solid #dbe7e1; border-radius: 18px; padding: 18px; background: linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: 0 8px 24px rgba(22, 72, 60, .07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cross-supplier-card:hover { transform: translateY(-3px); border-color: #8bc8aa; box-shadow: 0 14px 32px rgba(22, 72, 60, .13); } .cross-supplier-card__head { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; } .cross-supplier-card__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--success-bg); color: var(--success); font-size: 1.05rem; font-weight: 850; } .cross-supplier-card:nth-child(3n + 2) .cross-supplier-card__avatar { background: var(--warn-bg); color: #8a5a00; } .cross-supplier-card:nth-child(3n) .cross-supplier-card__avatar { background: var(--info-bg); color: var(--navy); } .cross-supplier-card__identity { min-width: 0; } .cross-supplier-card__name { margin: 0; color: var(--navy); font-size: .94rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .cross-supplier-card__scope { display: inline-block; margin-top: 4px; color: #527064; font-size: .74rem; font-weight: 650; } .cross-supplier-card__total { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 17px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #e7eee9; } .cross-supplier-card__total span { color: #6a7f76; font-size: .76rem; } .cross-supplier-card__total strong { color: var(--navy); font-family: var(--font-h); font-size: clamp(1.08rem, 2vw, 1.3rem); white-space: nowrap; } .cross-supplier-card__breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; } .cross-supplier-card__breakdown > div { min-width: 0; border-radius: 11px; padding: 9px 10px; background: var(--success-bg); } .cross-supplier-card__breakdown span, .cross-supplier-card__breakdown strong { display: block; } .cross-supplier-card__breakdown span { color: #71857c; font-size: .68rem; } .cross-supplier-card__breakdown strong { margin-top: 3px; color: #263d34; font-size: .78rem; overflow-wrap: anywhere; } .cross-supplier-card__note { margin: 12px 0 0; color: #7b8c84; font-size: .68rem; } @media (max-width: 780px) { .cross-supplier-grid { grid-template-columns: 1fr; } .cross-heading { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; } .cross-heading__icon { width: 44px; height: 44px; border-radius: 13px; } } @media (max-width: 480px) { body[data-page="fundacao"] .bigheader { border-radius: 18px; } body[data-page="fundacao"] .block--cross-suppliers { padding: 17px; border-radius: 18px; } .cross-supplier-card { padding: 15px; } .cross-supplier-card__total { align-items: flex-start; flex-direction: column; gap: 4px; } .cross-supplier-card__breakdown { grid-template-columns: 1fr 1fr; } } /* ================================================================== EXPERIENCIA CIDADA V3 — acolhimento, hierarquia e responsividade Camada final: não altera dados, cálculos, fontes ou cruzamentos. ================================================================== */ :root { --warm-bg: #f8f7f2; --warm-surface: #fffefb; --civic-blue: #07558f; --civic-green: #087a4b; --civic-gold: #e6ae25; --soft-blue: #edf5fb; --soft-green: #edf8f2; --soft-gold: #fff7df; --surface-border: #dce7e2; --shadow-civic: 0 12px 34px rgba(23, 50, 77, .08); } body { background: radial-gradient(circle at 8% 3%, rgba(230,174,37,.10), transparent 28rem), radial-gradient(circle at 92% 11%, rgba(8,122,75,.07), transparent 32rem), var(--warm-bg); } .topbar { background: rgba(255,254,251,.96); border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--civic-blue) 0 62%, var(--civic-green) 62% 87%, var(--civic-gold) 87%) 1; } .topbar__inner { min-height: 72px; } .brand__mark { border-radius: 11px; background: var(--soft-blue); } .brand__tag { color: var(--civic-green); } .nav__link { border-radius: 9px; transition: color .16s ease, background .16s ease, transform .16s ease; } .nav__link:hover { background: var(--soft-blue); text-decoration: none; transform: translateY(-1px); } .nav__link--active { background: var(--soft-blue); color: var(--civic-blue); } .nav__link--cta { background: var(--civic-gold); color: #18324a; } .section, .section--alt, .section--prefeitura, .section--camara, body[data-page="camara"] .section--camara, body[data-page="relatorios"] .section--alt { background: transparent; } .bigheader { border: 1px solid var(--surface-border); border-radius: 22px; background: radial-gradient(circle at 93% 8%, rgba(230,174,37,.14), transparent 15rem), linear-gradient(135deg, var(--warm-surface), var(--success-bg)); box-shadow: var(--shadow-civic); } .bigheader::after { height: 5px; background: linear-gradient(90deg, var(--civic-blue), var(--civic-green), var(--civic-gold)); } .bigheader__kicker { color: var(--civic-green); letter-spacing: .11em; } .bigheader__title { color: var(--navy); text-wrap: balance; } .bigheader__lead { color: #536b65; } .block, .feature-card, .hub-card, .stat, .audit-metric, .keyword-audit, .reader-summary, .signal, .citizen-alert-card, .source-card, .method-card, .contrato, .em, .ver-card { border-color: var(--surface-border); } .stat, .audit-metric, .feature-card, .hub-card, .source-card, .signal, .citizen-alert-card { background: var(--warm-surface); box-shadow: 0 8px 24px rgba(23,50,77,.06); } .block__title::before { border-radius: 999px; } .block__lead, .muted { color: var(--muted); } /* Carregamento não bloqueia a leitura do cabeçalho e do conteúdo estático. */ #loading-overlay { inset: 82px 18px auto auto; width: auto; max-width: calc(100vw - 36px); min-height: 0; flex-direction: row; justify-content: flex-start; padding: 10px 14px; border: 1px solid #cfe2d9; border-radius: 999px; background: rgba(255,254,251,.96); box-shadow: 0 10px 30px rgba(23,50,77,.13); backdrop-filter: blur(8px); pointer-events: none; } #loading-overlay .loading-spinner { width: 18px; height: 18px; border-width: 2px; border-color: #d7e9df; border-top-color: var(--civic-green); } #loading-overlay p { color: var(--success-dk); font-size: .78rem; letter-spacing: 0; } /* O resumo de qualidade fica compacto; detalhes continuam acessíveis. */ .data-health-strip { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(23,50,77,.07); } .data-health-strip__head { min-height: 52px; padding: 12px 16px; cursor: pointer; } .data-health-strip__body { max-width: 920px; } .data-health-strip__body li { margin-block: 8px; } /* Ações são atalhos, não uma faixa horizontal escondida. */ .civic-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); align-items: stretch; overflow: visible; } .civic-actions a, .civic-actions button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; white-space: normal; text-align: center; } .page-howto { border-radius: 14px; background: rgba(255,254,251,.78); } .page-howto summary { min-height: 46px; } /* Painel de atenção da Prefeitura: resumo curto antes dos detalhes. */ .citizen-alerts { padding: 18px; border: 1px solid #eadcb6; border-radius: 18px; background: var(--soft-gold); } .citizen-alerts__title { font-size: 1.08rem; } .citizen-alert-card { border-left-color: var(--civic-gold); } /* Leitura institucional: nunca justificar texto corrido em telas estreitas. */ body[data-page="conformidade"] p, body[data-page="conformidade"] li, body[data-page="conformidade"] .section__lead, body[data-page="conformidade"] .disclaimer-box p { text-align: left !important; hyphens: none; } body[data-page="conformidade"] .ift-panel p, body[data-page="conformidade"] .ift-panel .muted, body[data-page="conformidade"] #iftMetodologia { color: rgba(255,255,255,.92) !important; opacity: 1 !important; } /* Links dentro do painel escuro do IFT: azul sobre azul nao contrasta. */ body[data-page="conformidade"] .ift-panel a { color: #ffd166; } body[data-page="conformidade"] .ift-panel { background: linear-gradient(140deg, #064a7f, #08745c); border-radius: 22px; box-shadow: var(--shadow-civic); } /* Controles flutuantes não encobrem cartões no celular. */ .chat-cidadao { bottom: max(18px, env(safe-area-inset-bottom)); } #btn-topo { bottom: max(18px, env(safe-area-inset-bottom)); } @media (max-width: 960px) { .bigheader { grid-template-columns: 1fr; gap: 16px; } .bigheader__kicker, .bigheader__title, .bigheader__lead, .bigheader > .muted, .bigheader .reader-summary, .bigheader .civic-actions { grid-column: 1; grid-row: auto; } .bigheader .reader-summary { margin-top: 4px; } } @media (max-width: 760px) { .section { padding: 34px 0 48px; } .bigheader { padding: 22px 18px; border-radius: 18px; } .bigheader__title { font-size: clamp(1.8rem, 8vw, 2.35rem); } .bigheader__lead { font-size: .95rem; line-height: 1.55; } .bigheader .reader-summary__chips { grid-template-columns: 1fr; } .civic-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .civic-actions a, .civic-actions button { width: auto; padding: 9px 10px; font-size: .84rem; } .citizen-alerts { padding: 14px; } .citizen-alert-card { grid-template-columns: 1fr; gap: 7px; } .citizen-alert-card a { white-space: normal; } #loading-overlay { inset: 68px 10px auto 10px; max-width: none; justify-content: center; } .chat-cidadao { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } #btn-topo { right: 70px; bottom: max(14px, env(safe-area-inset-bottom)); } body { padding-bottom: 68px; } } @media (max-width: 420px) { .container { padding-inline: 14px; } .civic-actions { grid-template-columns: 1fr 1fr; gap: 8px; } .civic-actions a, .civic-actions button { min-height: 46px; } .stats, .audit-overview { gap: 9px; } .stat, .audit-metric { min-height: 112px; padding: 13px; } } /* ===== DADOS PROGRESSIVOS — segunda etapa de desempenho ===== */ .progressive-data { grid-column: 1 / -1; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 104px; padding: 18px; border: 1px solid #cfe2d9; border-radius: 16px; background: linear-gradient(135deg, var(--surface-2), var(--success-bg)); color: var(--success-dk); } .progressive-data strong { display: block; color: var(--navy); } .progressive-data p { margin: 4px 0 0; color: var(--muted); } .progressive-data__icon { width: 38px; height: 38px; border: 3px solid #cfe2d9; border-top-color: var(--civic-green); border-radius: 50%; } .progressive-data--idle .progressive-data__icon { border: 0; border-radius: 12px; background: var(--soft-green); } .progressive-data--idle .progressive-data__icon::before { content: "↓"; display: grid; place-items: center; width: 100%; height: 100%; color: var(--civic-green); font-size: 1.25rem; font-weight: 850; } .progressive-data--loading .progressive-data__icon { animation: spin .75s linear infinite; } .progressive-data--error { border-color: #efc6c2; background: var(--danger-bg); } .progressive-data--error .progressive-data__icon { border: 0; background: var(--danger-bg); } .progressive-data--error .progressive-data__icon::before { content: "!"; display: grid; place-items: center; width: 100%; height: 100%; color: var(--red); font-size: 1.2rem; font-weight: 900; } .btn-progressive-retry { min-height: 40px; margin-top: 10px; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--civic-blue); color: var(--on-accent); font: inherit; font-weight: 750; cursor: pointer; } [data-progressive-state="idle"] .filterbar, [data-progressive-state="loading"] .filterbar, [data-progressive-state="error"] .filterbar { opacity: .52; pointer-events: none; } /* Seções longas abaixo da dobra não exigem pintura até se aproximarem da tela. */ .pref-panel:not(.is-active), body[data-page="camara"] [data-csec], body[data-page="relatorios"] .block { content-visibility: auto; contain-intrinsic-size: auto 620px; } @media (max-width: 520px) { .progressive-data { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; } .progressive-data__icon { width: 32px; height: 32px; } } /* ================================================================== TEMA ESCURO — correção da camada "Experiência Cidadã V3" A V3 fixa superfícies claras (--warm-surface, --soft-*) depois do @media (prefers-color-scheme: dark) do topo do arquivo. No celular em tema escuro isso deixava cartão claro com texto claro (contraste 1.17 em .stat, .audit-metric, .page-howto e no .bigheader). Aqui os mesmos tokens são reescritos para o escuro, no fim do arquivo. ================================================================== */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) { --warm-bg: #0d141c; --warm-surface: #161f2b; --civic-blue: #6fb2f0; --civic-green: #57b985; --civic-gold: #f0b64d; --soft-blue: #14273a; --soft-green: #14301f; --soft-gold: #332a12; --surface-border: #2a3949; --shadow-civic: 0 12px 34px rgba(0, 0, 0, .45); } /* Superfícies escritas em rgba() literal não leem os tokens acima. */ :root:not([data-theme="light"]) .topbar, :root:not([data-theme="light"]) #loading-overlay, :root:not([data-theme="light"]) .page-howto { background: rgba(22, 31, 43, .96); } :root:not([data-theme="light"]) #loading-overlay, :root:not([data-theme="light"]) .progressive-data, :root:not([data-theme="light"]) .citizen-alerts { border-color: var(--line); } :root:not([data-theme="light"]) #loading-overlay .loading-spinner, :root:not([data-theme="light"]) .progressive-data__icon { border-color: var(--line); border-top-color: var(--civic-green); } /* Texto fixo em hex claro/escuro dentro da V3. */ :root:not([data-theme="light"]) .bigheader__lead { color: var(--muted); } :root:not([data-theme="light"]) .cross-supplier-card__breakdown span, :root:not([data-theme="light"]) .cross-supplier-card__note { color: var(--muted); } :root:not([data-theme="light"]) .cross-supplier-card__breakdown strong { color: var(--ink); } /* Sombras claras viram sombras de profundidade. */ :root:not([data-theme="light"]) .stat, :root:not([data-theme="light"]) .audit-metric, :root:not([data-theme="light"]) .feature-card, :root:not([data-theme="light"]) .hub-card, :root:not([data-theme="light"]) .source-card, :root:not([data-theme="light"]) .signal, :root:not([data-theme="light"]) .citizen-alert-card { box-shadow: 0 8px 24px rgba(0, 0, 0, .38); } /* --civic-blue clareou: como fundo de botão precisa de texto escuro. */ :root:not([data-theme="light"]) .btn-progressive-retry { color: #08121c; } } /* Faixas que já nascem escuras usam var(--navy) como fundo. No tema escuro o token clareia e a faixa fica clara com texto claro — aqui o fundo é fixado. */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) .section.transp-radar { background: #0e2f52; } :root:not([data-theme="light"]) .lvb-hero { background: linear-gradient(135deg, #0b3f76 0%, #063f78 54%, #042f5b 100%); } /* Botões dourados levam texto escuro: var(--navy) clareado não contrasta. */ :root:not([data-theme="light"]) :is( .search button, .transp-radar__btn, .lvb-hero__cta, .audit-cta__btn ) { color: #10243a; } :root:not([data-theme="light"]) .lvb-rp { color: var(--danger-dk); } } /* Tokens que só existiam como fallback claro dentro de var(). */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) { --ink-soft: #b3c0d1; --border: #2a3949; --navy-lt: #1c2735; } /* Realces claros dentro de caixas de aviso já escuras. */ :root:not([data-theme="light"]) .indice-alert code, :root:not([data-theme="light"]) .indice-alert span { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); } :root:not([data-theme="light"]) .btn-copiar-num { color: var(--warn-ink); } /* Primeiro atalho da faixa de ações é dourado: texto escuro. */ :root:not([data-theme="light"]) .civic-actions a:first-child, :root:not([data-theme="light"]) .civic-actions button:first-child { color: #10243a; } } /* Fundo dourado + texto var(--navy): no tema escuro o navy clareia e o texto some no dourado. Um único lugar fixa o texto escuro nesses componentes. */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) :is( .skip-link, .nav__link--cta, .search button, .smart-guide__go, .audit-chips button:hover, .pdf-action span:first-child, .score-mini--atencao, .keyword-audit__chips span, .guia-btn:hover, .diario__extra, .data-legend__toggle span[aria-hidden="true"], .cat-chip.is-active .cat-chip__count, .hub-badge, .btn-star.is-marked, .pub-secao__tag, .start-guide__choices button.is-active ) { color: #10243a; } } /* Fundação: cabeçalho próprio (fundo escuro) e cartão de cruzamento translúcido. */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) body[data-page="fundacao"] .bigheader .civic-actions a:first-child { color: var(--on-accent); } :root:not([data-theme="light"]) body[data-page="fundacao"] .block--cross-suppliers { background: var(--surface); border-color: var(--line); box-shadow: 0 18px 46px rgba(0, 0, 0, .40); } } /* Cartão vermelho do hero: --danger-bd escurece no tema escuro e some no azul. */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) .lvb-stat--red .lvb-stat__val { color: var(--danger-dk); } } /* Atalho de participação cidadã: destaque discreto e compatível com os dois temas. */ body[data-page="home"] .hub-grid-18 .hub-item--avalie { border-color: rgba(0, 137, 123, .48); background: linear-gradient(135deg, rgba(0, 137, 123, .12), var(--surface-2)); } body[data-page="home"] .hub-grid-18 .hub-item--avalie span { color: var(--teal); } body[data-page="home"] .hub-grid-18 .hub-item--avalie .hub-item__icon svg { stroke: var(--teal); } /* Abas da Prefeitura: em larguras intermediárias, quebram em linhas em vez de criar uma barra horizontal visível sob o cabeçalho. */ @media (min-width: 761px) { .pref-tabs { flex-wrap: wrap; overflow-x: visible; } } /* Controles com muitos itens continuam deslizáveis no celular, mas sem uma barra de rolagem atravessando o conteúdo. */ @media (max-width: 760px) { .pref-tabs, .lvb-chips { scrollbar-width: none; -ms-overflow-style: none; } .pref-tabs::-webkit-scrollbar, .lvb-chips::-webkit-scrollbar { display: none; } } /* Evita campos espremidos e contadores sobrepostos na faixa de tablet / Windows com escala de tela ampliada. */ @media (min-width: 769px) and (max-width: 1350px) { .filterbar { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .filterbar__count { min-width: 0; width: 100%; justify-self: stretch; text-align: center; } } /* Cobertura por fonte: estado real de cada base sem competir com o conteúdo. */ .source-coverage { margin: 12px 0 4px; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--teal) 8%); color: var(--ink); } .source-coverage > details > summary { min-height: 54px; display: flex; align-items: center; gap: 16px; padding: 10px 14px; cursor: pointer; list-style: none; } .source-coverage > details > summary::-webkit-details-marker { display: none; } .source-coverage > details > summary > span { min-width: 0; display: grid; gap: 2px; flex: 1; } .source-coverage > details > summary b { color: var(--navy); font-size: .84rem; } .source-coverage > details > summary small { color: var(--muted); font-size: .75rem; } .source-coverage > details > summary em { color: var(--navy); font-size: .76rem; font-style: normal; font-weight: 800; white-space: nowrap; } .source-coverage > details > summary::after { content: "+"; color: var(--navy); font-size: 1.1rem; transition: transform .2s ease; } .source-coverage > details[open] > summary { border-bottom: 1px solid var(--line); } .source-coverage > details[open] > summary::after { content: "−"; transform: none; } .source-coverage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px 14px 8px; } .source-coverage__item { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 10px; background: var(--surface); } .source-coverage__item--partial, .source-coverage__item--preserved, .source-coverage__item--manual { border-left-color: var(--gold-dk); } .source-coverage__item--failed, .source-coverage__item--stale { border-left-color: var(--red); } .source-coverage__item > div { display: flex; align-items: start; justify-content: space-between; gap: 8px; } .source-coverage__item strong { color: var(--navy); font-size: .82rem; } .source-coverage__item span { padding: 3px 7px; border-radius: 999px; background: var(--success-bg); color: var(--success-mid); font-size: .67rem; font-weight: 800; text-align: center; } .source-coverage__item--partial span, .source-coverage__item--preserved span, .source-coverage__item--manual span { background: var(--warn-bg); color: var(--warn-ink); } .source-coverage__item--failed span, .source-coverage__item--stale span { background: var(--danger-bg-2); color: var(--red); } .source-coverage__item small { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; } .source-coverage__item p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; } .source-coverage__note { margin: 0; padding: 2px 14px 13px; color: var(--muted); font-size: .73rem; line-height: 1.45; } /* Fila editorial: hierarquia de leitura, sem transformar sinal em acusação. */ .verification-priorities { border-top: 4px solid var(--gold); } .verification-priorities__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; margin-bottom: 16px; } .block__eyebrow { display: block; margin-bottom: 5px; color: var(--teal); font-size: .68rem; font-weight: 900; letter-spacing: .12em; } .verification-list { display: grid; gap: 10px; } .verification-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--gold-dk); border-radius: 12px; background: var(--surface); } .verification-item--error { border-left-color: var(--red); } .verification-item__rank { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--on-accent); font-weight: 900; } .verification-item__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .verification-item__title span { padding: 3px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; } .verification-item--error .verification-item__title span { background: var(--danger-bg-2); color: var(--red); } .verification-item__title h4 { margin: 0; color: var(--navy); font-size: .97rem; } .verification-item__content > p { margin: 7px 0; color: var(--ink); font-size: .84rem; line-height: 1.5; } .verification-item details { margin-top: 8px; border-top: 1px solid var(--line); } .verification-item details summary { padding: 9px 0 3px; color: var(--navy); cursor: pointer; font-size: .77rem; font-weight: 800; } .verification-item__details p { margin: 6px 0; color: var(--muted); font-size: .77rem; } .verification-item__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .verification-more { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, var(--navy) 6%); } .verification-more > summary { min-height: 48px; display: flex; align-items: center; padding: 10px 14px; color: var(--navy); cursor: pointer; font-size: .82rem; font-weight: 900; } .verification-more__list { display: grid; gap: 10px; padding: 0 10px 10px; } .btn-link--quiet { background: transparent; color: var(--navy); } @media (max-width: 760px) { .source-coverage > details > summary { align-items: flex-start; gap: 8px; } .source-coverage > details > summary em { display: none; } .source-coverage__grid { grid-template-columns: 1fr; } .source-coverage__item > div { align-items: center; } .verification-priorities__head { grid-template-columns: 1fr; } .verification-item { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 10px; } .verification-item__rank { width: 28px; height: 28px; font-size: .78rem; } } /* Tema noturno final de desktop: deve permanecer no fim para vencer regras legadas claras. */ @media (prefers-color-scheme: dark) and (min-width: 769px) and (hover: hover) and (pointer: fine) { :root:not([data-theme="light"]) { --bg: #0b121a; --surface: #131d28; --surface-2: #1a2735; --cream: #172331; --ink: #f0f4f8; --ink-soft: #c8d2de; --muted: #b5c2d1; --line: #405166; --border: #405166; --white: #131d28; --navy-lt: #1a2735; --night-blue:#82c2f5; --night-on-blue: #07131f; } :root:not([data-theme="light"]) body { background: var(--bg); color: var(--ink); } :root:not([data-theme="light"]) ::selection { background: rgba(242, 194, 48, .32); color: var(--ink); } :root:not([data-theme="light"]) :is( input, select, textarea, dialog, .modal, .filterbar ) { background-color: var(--surface); border-color: var(--line); color: var(--ink); } :root:not([data-theme="light"]) :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; } :root:not([data-theme="light"]) :is( a, button, input, select, textarea, summary, [tabindex] ):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } :root:not([data-theme="light"]) body[data-page="home"] :is( .hero__kicker, .hero__proof span, .search, .start-guide, .start-guide__choices button, .start-guide__facts span, .hub-full, .hub-grid-18 .hub-item, .hub-numeros, .hub-numeros__item, .semana-hero, .smart-suggest__list button, .smart-guide, .smart-guide__grid article, .smart-guide__question, .home-ops__brief a ) { border-color: var(--line); } :root:not([data-theme="light"]) body[data-page="home"] .hub-grid-18 .hub-item { background: #172433; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); } :root:not([data-theme="light"]) body[data-page="home"] .hub-grid-18 .hub-item span { color: var(--ink); } :root:not([data-theme="light"]) body[data-page="home"] .hub-grid-18 .hub-item__cue, :root:not([data-theme="light"]) body[data-page="home"] .hub-numeros__link { color: var(--night-blue); } :root:not([data-theme="light"]) body[data-page="home"] .hub-grid-18 .hub-item__icon svg { stroke: var(--night-blue); } :root:not([data-theme="light"]) body[data-page="home"] :is( .start-guide, .hub-full, .hub-numeros, .home-ops__head ) { box-shadow: 0 12px 30px rgba(0, 0, 0, .34); } :root:not([data-theme="light"]) :is( .nav__link--active, .csec-btn--active, .ano-chip--active, .pref-tab.is-active, .signals-group__count, .timeline__step, .cobrar-path > span, .pub-chip.is-active, .pub-tag--fonte, .aval-switch__btn.is-active, .rep__btn, .lvb-view-btn.is-active, .lvb-chip.is-active ) { color: var(--night-on-blue); } :root:not([data-theme="light"]) :is( .pref-tab.is-active span, .signals-group__count *, .timeline__step *, .cobrar-path > span * ) { color: inherit; } :root:not([data-theme="light"]) :is( .hub-item, .monitor-card, .monitor-table, .sobre-card ) { background-color: var(--surface); } :root:not([data-theme="light"]) :is( .muted, small, .card__sub, .stat__sub, .page-subtitle ) { color: var(--muted); } :root:not([data-theme="light"]) table :is(th, td) { border-color: var(--line); } :root:not([data-theme="light"]) :is( #btn-topo, .btn--primary, .btn-csv, .update-tab.is-active, .aval-switch__btn[aria-selected="true"], .fonte-table th, .glossario-tabela th ) { color: var(--night-on-blue); } :root:not([data-theme="light"]) .signals-group__title--critico .signals-group__count { color: var(--night-on-blue); } :root:not([data-theme="light"]) .signals-group__title--alto .signals-group__count { color: var(--on-accent); } :root:not([data-theme="light"]) .signal__level { color: var(--warn-ink); } :root:not([data-theme="light"]) .signal--critico .signal__level, :root:not([data-theme="light"]) .em__status--no, :root:not([data-theme="light"]) .lvb-rp { color: var(--danger-dk); } :root:not([data-theme="light"]) .cat-chip__count, :root:not([data-theme="light"]) code { background: var(--surface-2); color: var(--night-blue); border-color: var(--line); } :root:not([data-theme="light"]) code { background: var(--surface-2) !important; color: var(--night-blue) !important; } :root:not([data-theme="light"]) :is(.btn-csv, .obra-cta__btn) { color: #02070b; } :root:not([data-theme="light"]) .timeline-card__step { color: rgba(130, 194, 245, .30); } :root:not([data-theme="light"]) .lvb-col-title { color: var(--muted); } :root:not([data-theme="light"]) .cross-supplier-card__avatar { color: var(--success-dk); } }