/* RastroGov — institutional UI. Tokens → base → components → breakpoints. */
/* Fonts come from /static/fonts.css (self-hosted, see that file). */

/* Tokens */
:root {
  --navy:#002776; --navy-deep:#0A1F44; --green:#009C3B; --yellow:#FFDF00;
  --green-dark:#00702D; --green-soft:#E9F6EE; --blue-soft:#EEF3FB;
  --ink:#0F172A; --ink-2:#334155; --muted:#52627A; --faint:#61718A;
  --line:#E1E7EF; --line-2:#CBD5E1; --surface:#FFF; --bg:#F4F6FA; --bg-2:#FAFBFD;
  --block:#B42318; --block-soft:#FDECEA; --warn:#885000; --warn-soft:#FFF6E5;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --text-xs:11px; --text-sm:12px; --text-md:14px; --text-lg:16px;
  --text-data:18px; --text-xl:20px; --text-2xl:24px; --text-3xl:32px; --text-4xl:40px;
  --r-sm:4px; --r:8px; --r-lg:12px; --r-pill:999px;
  --shadow:0 1px 2px rgb(15 23 42 / 5%); --shadow-raised:0 8px 24px rgb(15 23 42 / 7%);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --container:1200px; --row-h:40px;
}

/* Base and layout */
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body { margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font:var(--text-md)/1.5 var(--font); -webkit-font-smoothing:antialiased }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.25; color:var(--ink) }
h1 { font-size:var(--text-3xl) } h2 { font-size:var(--text-2xl) } h3 { font-size:var(--text-lg) }
p { margin:0 }
a { color:var(--navy); text-decoration:none }
a:hover { text-decoration:underline }
img { display:block; max-width:100% }
svg { flex-shrink:0 }
code { font-family:var(--mono); font-size:var(--text-sm); overflow-wrap:anywhere }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
::selection { background:var(--yellow); color:var(--navy-deep) }
:focus-visible { outline:2px solid var(--navy); outline-offset:3px }
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s5) }
.container-narrow { max-width:820px }
main { flex:1 0 auto; padding-block:var(--s5) 0 }
.main-flush { padding-block:0 }
main > :last-child,main > .container > :last-child,.col-main > :last-child,.col-side > :last-child { margin-bottom:0 }
.muted { color:var(--muted) } .small { font-size:var(--text-sm) }
.block { display:block } .strong { font-weight:600 }
.num,.mono { font-family:var(--mono); font-variant-numeric:tabular-nums }
.num { text-align:right; white-space:nowrap }
.nowrap { white-space:nowrap }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s4); align-items:start }
.layout > *,.hero-grid > *,.page-head > *, .field { min-width:0 }
.col-side { position:sticky; top:var(--s5) }

/* Official bar and masthead */
.official-bar { background:var(--navy-deep); color:#E0E7F1 }
.official-bar .container { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:32px; padding-block:var(--s1); font-size:var(--text-xs) }
.flag { display:flex; align-items:center; gap:var(--s2) }
.flag i,.hero-badge i,.consulta-head .dot { display:block; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--green) }
.official-bar .links { display:flex; gap:var(--s4); white-space:nowrap }
.masthead { background:var(--surface); border-bottom:1px solid var(--line) }
.masthead-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:80px; padding-block:var(--s4) }
.masthead-brand { display:flex; align-items:center; gap:var(--s3); min-width:0 }
.masthead-brand:hover { text-decoration:none }
.masthead-logo { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface) }
.brand-name { font-size:var(--text-xl); font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.1; white-space:nowrap }
.brand-name span { color:var(--green) }
.brand-sub { display:block; font-size:var(--text-xs); color:var(--muted); margin-top:var(--s1); line-height:1.3 }
.masthead-actions { display:flex; flex-shrink:0; align-items:center; gap:var(--s2) }
.masthead-actions form { margin:0 }
.masthead-nav { border-top:1px solid var(--line); background:var(--bg-2) }
.masthead-nav .container { display:flex; align-items:center; gap:var(--s1); padding-block:var(--s1) }
.masthead-nav a { display:flex; align-items:center; justify-content:center; min-height:40px; padding:var(--s2) var(--s3); border-radius:var(--r-sm); font-size:var(--text-sm); font-weight:600; color:var(--ink-2); white-space:nowrap }
.masthead-nav a:hover { background:var(--blue-soft); color:var(--navy); text-decoration:none }
.masthead-nav a.active { background:var(--navy); color:#FFF }
.masthead-nav .sep { width:1px; height:16px; background:var(--line); margin-inline:var(--s2) }
.user { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-sm) }
.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--blue-soft); color:var(--navy); font-size:var(--text-xs) }
.user-name { max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* O bloco do usuário é um link para a conta: sem sublinhado, com foco visível. */
.user-link{color:inherit;text-decoration:none;border-radius:var(--r-sm);padding:2px 4px}
.user-link:hover{background:var(--bg-2);text-decoration:none;color:var(--ink)}
.user-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Actions */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:40px; padding:var(--s2) var(--s4); border:1px solid transparent; border-radius:var(--r); font-size:var(--text-sm); font-weight:600; line-height:1.4; white-space:nowrap }
.btn:hover { text-decoration:none }
.btn-primary { background:var(--navy); color:#FFF }
.btn-primary:hover { background:var(--navy-deep) }
.btn-secondary { background:var(--surface); color:var(--navy); border-color:var(--line-2) }
.btn-secondary:hover { border-color:var(--navy); background:var(--bg-2) }
.btn-ghost { background:transparent; color:var(--ink-2) }
.btn-ghost:hover { background:var(--blue-soft) }
.btn-yellow { background:var(--yellow); color:var(--navy-deep) }
.btn-lg { min-height:48px; padding-inline:var(--s5); font-size:var(--text-md) }
.btn-sm { min-height:32px; padding:var(--s1) var(--s3) }
.btn-block { width:100% }

/* Landing and section rhythm */
.hero { background:var(--surface); border-bottom:1px solid var(--line); padding-block:var(--s7) }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s7); align-items:start }
.hero-badge { display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--text-xs); font-weight:600; color:var(--navy); background:var(--blue-soft); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--s1) var(--s2) }
.hero h1 { margin-block:var(--s4) var(--s3); font-size:clamp(24px,3vw,40px); line-height:1.15; letter-spacing:-.03em }
.hero-lead { color:var(--muted); max-width:60ch }
.hero-points { display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); margin-top:var(--s5) }
.hero-points span { display:flex; align-items:center; gap:var(--s2); font-size:var(--text-sm); color:var(--ink-2) }
.hero-points svg { color:var(--green-dark) }
.consulta { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow) }
.consulta-head { display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line) }
.consulta-head h2 { font-size:var(--text-md) }
.consulta-body { padding:var(--s4); display:grid; gap:var(--s3) }
.consulta-grid { display:grid; grid-template-columns:104px minmax(0,1fr); gap:var(--s3) }
.chips { display:flex; gap:var(--s2); flex-wrap:wrap }
.chip-filter { font-size:var(--text-xs); font-weight:600; color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--s2) var(--s3) }
.chip-filter:hover { border-color:var(--navy); text-decoration:none }
.chip-filter.on { background:var(--navy); border-color:var(--navy); color:#FFF }
.section { margin-top:var(--s7) }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s4) }
.eyebrow { display:block; font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:var(--s2) }
.section-title { font-size:var(--text-xl) }
.section-lead { margin-top:var(--s2); color:var(--muted); max-width:78ch }
.pillars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) }
.pillar { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s5) }
.pillar .tag-line { margin-bottom:var(--s3) }
.pillar .pilar { font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.pillar h3 { margin-bottom:var(--s2) }
.pillar p { color:var(--muted) }
.pillar ul,.checklist { list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:var(--s2) }
.pillar li,.checklist li { position:relative; padding-left:var(--s5); font-size:var(--text-sm); color:var(--ink-2) }
.pillar li::before,.checklist li::before,.auth-pitch li::before { content:""; position:absolute; left:0; top:6px; width:10px; height:6px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg) }
.cta-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r) }

/* KPI values get the full card width; icons occupy a fixed label-row anchor. */
.kpis,.kpi-band { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); margin-bottom:var(--s5) }
.kpi-band { margin-top:var(--s5) }
.kpi,.kpi-band .cell { min-width:0; position:relative; background:var(--surface); padding:var(--s4) }
.kpi:first-child,.kpi-band .cell:first-child { border-radius:var(--r) 0 0 var(--r) }
.kpi:last-child,.kpi-band .cell:last-child { border-radius:0 var(--r) var(--r) 0 }
.kpi-alert { background:#FFFCFB }
.kpi-label,.kpi-band .label { display:block; min-height:32px; font-size:var(--text-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.kpi-with-icon .kpi-label { padding-right:40px }
.kpi-value,.kpi-band .value { display:block; margin-top:var(--s2); font:500 var(--text-data)/1.5 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em; color:var(--ink); white-space:nowrap }
.kpi-small { font-size:var(--text-sm); letter-spacing:0 }
.kpi-icon { position:absolute; top:var(--s4); right:var(--s4); display:grid; place-items:center; width:28px; height:28px; border-radius:var(--r-sm); background:var(--blue-soft); color:var(--navy) }
.kpi-icon-green { background:var(--green-soft); color:var(--green-dark) }
.kpi-icon-alert { background:var(--block-soft); color:var(--block) }
.kpi-band .foot { display:block; margin-top:var(--s1); font-size:var(--text-xs); color:var(--green-dark) }
.kpi-band .foot.neutral { color:var(--muted) }

/* IC-Gov */
.icgov { display:grid; grid-template-columns:260px minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:var(--s5) }
.icgov-score { background:var(--navy); color:#FFF; padding:var(--s5); border-radius:var(--r) 0 0 var(--r) }
.icgov-score .label { display:block; font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:#D2DDF2; font-weight:600 }
.icgov-score .value { display:block; margin-top:var(--s3); font:500 var(--text-4xl)/1.1 var(--mono); white-space:nowrap }
.icgov-score .value small { font-size:var(--text-md); color:#D2DDF2 }
.icgov-score .grade { display:inline-block; margin-top:var(--s3); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; background:var(--yellow); color:var(--navy-deep); border-radius:var(--r-sm); padding:var(--s1) var(--s2) }
.icgov-score p { margin-top:var(--s4); font-size:var(--text-sm); color:#D2DDF2 }
.icgov-dims { padding:var(--s5); display:grid; align-content:center; gap:var(--s4); min-width:0 }
.dim { display:grid; grid-template-columns:minmax(0,1fr) minmax(80px,28%) 64px; gap:var(--s4); align-items:center }
.dim-name { font-size:var(--text-sm); color:var(--ink); line-height:1.5 }
.dim-bar { height:6px; background:var(--line); border-radius:var(--r-pill); overflow:hidden }
.dim-bar span { display:block; height:100%; max-width:100%; background:var(--navy) }
.dim-val { font:var(--text-sm)/1.5 var(--mono); color:var(--ink-2); text-align:right; white-space:nowrap }

/* Page headers, surfaces, data tables */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s5) }
.page-head h1 { font-size:var(--text-2xl) }
.page-head > .btn { flex-shrink:0 }
.page-head .uf { display:inline-block; font-size:var(--text-sm); color:var(--muted); background:var(--blue-soft); border-radius:var(--r-sm); padding:var(--s1) var(--s2); vertical-align:middle }
.sub { margin-top:var(--s2); color:var(--muted); max-width:80ch; font-size:var(--text-sm) }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); color:var(--muted); font-size:var(--text-sm); margin-bottom:var(--s3) }
.head-meta { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:var(--s1) }
.head-meta strong { font:500 var(--text-2xl)/1.1 var(--mono) }
.head-meta span { font-size:var(--text-xs); color:var(--muted) }
.card,.panel { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:var(--s4) }
.card-pad { padding:var(--s4) }
.card-head,.panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2) var(--s4); padding:var(--s3) var(--s4); border-bottom:1px solid var(--line) }
.card-title,.panel-head h2 { font-size:var(--text-md); font-weight:600 }
.card-pad > .card-title { margin-bottom:var(--s4) }
.card p:not([class]) { color:var(--muted) }
.panel-head .meta { font-size:var(--text-xs); color:var(--muted) }
.table-wrap { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border-radius:var(--r); -webkit-overflow-scrolling:touch }
.table { width:100%; border-collapse:collapse; font-size:var(--text-sm); line-height:1.4 }
.table thead th { height:32px; background:var(--bg-2); color:var(--muted); font-size:var(--text-xs); font-weight:600; text-align:left; padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); white-space:nowrap }
.table tbody td { height:var(--row-h); padding:var(--s1) var(--s3); border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle }
.table tbody tr:last-child td { border-bottom:0 }
.table tbody tr:hover { background:var(--bg-2) }
.table th.num,.table td.num,.table td.right { text-align:right }
.table .num,.table .date { font-family:var(--mono); white-space:nowrap }
.table .btn { min-height:28px; padding:var(--s1) var(--s2) }
.table-fixed { table-layout:fixed; min-width:840px }
.col-name { width:auto } .col-uf { width:48px } .col-num { width:92px }
.col-value { width:176px } .col-updated { width:116px } .col-status { width:152px }
.link-strong { font-weight:600 }
.clamp { min-width:200px; max-width:340px; overflow-wrap:anywhere }

/* Badges and status */
.uf-badge,.chip,.stage,.grade-pill { display:inline-flex; align-items:center; gap:var(--s1); border-radius:var(--r-sm); padding:var(--s1) var(--s2); font-size:var(--text-xs); line-height:1.3; white-space:nowrap }
.uf-badge { justify-content:center; background:var(--blue-soft); color:var(--navy); font-family:var(--mono) }
.chip,.stage { font-weight:600 }
.chip::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor }
.chip.plain::before { display:none }
.chip.ok,.grade-a,.st-payment { background:var(--green-soft); color:var(--green-dark) }
.chip.blocked,.chip.blocking,.grade-d { background:var(--block-soft); color:var(--block) }
.chip.warning,.grade-c,.st-liquidation { background:var(--warn-soft); color:var(--warn) }
.chip.info,.stage,.st-unknown { background:var(--bg); color:var(--ink-2) }

/* Status pill: same palette as chips, sized for page headers and cards. */
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--bg); color:var(--ink-2); font-size:var(--text-xs); font-weight:600; line-height:1.3; white-space:nowrap }
.pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:0 0 auto }
.pill-neutral { background:var(--bg-2); color:var(--ink-2) }
.pill-ok { background:var(--green-soft); border-color:#C9E9D6; color:var(--green-dark) }
.pill-warning { background:var(--warn-soft); border-color:#E7D6B5; color:var(--warn) }
.pill-blocking,.pill-blocked { background:var(--block-soft); border-color:#F0C9C4; color:var(--block) }
.pill-info { background:var(--bg); color:var(--ink-2) }
/* Selo de valor atípico: quebra a linha dentro da célula, nunca sobrepõe o número. */
.tag-atypical{display:block;margin-top:5px;font:600 10px/1.35 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--warn);white-space:normal;text-align:right}
.table td.num{white-space:nowrap}
.table td.num:has(.tag-atypical){white-space:normal;min-width:150px}
.tag-corrected{display:block;margin-top:5px;font:500 10px/1.35 var(--sans);color:var(--muted);white-space:normal;text-align:right}
.table td.num:has(.tag-corrected){white-space:normal;min-width:150px}
.grade-b,.st-commitment { background:var(--blue-soft); color:var(--navy) }
.grade-pill { font-family:var(--mono) }
.tag { display:inline-block; margin-left:var(--s2); font-size:var(--text-xs); color:var(--muted); background:var(--bg); border-radius:var(--r-sm); padding:0 var(--s1) }
.status { display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--text-xs); font-weight:500 }
.status i { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0 }
.status.ok { color:var(--green-dark) } .status.warn { color:var(--warn) }

/* Facts, findings and progress */
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s5); margin:0 }
.facts dt { font-size:var(--text-xs); text-transform:uppercase; color:var(--muted); font-weight:600 }
.facts dd { margin:var(--s1) 0 0; overflow-wrap:anywhere }
.purpose { margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line) }
.totais { display:grid; gap:var(--s2); margin:0 }
.totais > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); font-size:var(--text-sm) }
.totais dt { color:var(--muted) } .totais dd { margin:0; font-family:var(--mono); white-space:nowrap }
.list { list-style:none; margin:0; padding:0 }
.list li { display:flex; justify-content:space-between; gap:var(--s3); font-size:var(--text-sm); padding:var(--s3) 0; border-bottom:1px solid var(--line) }
.list li:last-child { border-bottom:0; padding-bottom:0 }
.list-value { font-family:var(--mono); font-size:var(--text-sm); white-space:nowrap }
.list-suppliers li { display:grid; gap:var(--s2) }
.supplier-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); align-items:baseline }
.list-name { min-width:0; overflow-wrap:anywhere }
.supplier-bar,.bar { display:block; height:4px; border-radius:var(--r-sm); background:var(--line); overflow:hidden }
.supplier-bar > span,.bar > span { display:block; height:100%; max-width:100%; background:var(--green) }
.supplier-bar > span { background:var(--navy) }
.checklist { margin:0 }
.checklist + .notice { margin-top:var(--s4) }
.findings { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3) }
.finding { border-left:2px solid var(--line-2); padding:var(--s1) 0 var(--s1) var(--s3) }
.finding.blocking { border-color:var(--block) } .finding.warning { border-color:var(--yellow) }
.finding-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-bottom:var(--s1) }
.finding code { font-size:var(--text-xs); color:var(--muted); background:var(--bg); padding:0 var(--s1) }
.finding-title { margin-bottom:var(--s1); font-weight:600 }
.finding-why { color:var(--muted); font-size:var(--text-sm) }
.bar { min-width:60px } .bar-lg { height:8px }
.bar-label { display:block; font:var(--text-xs)/1.5 var(--mono); color:var(--muted); margin-top:var(--s1) }
.progress { margin-bottom:var(--s4) }
.progress-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s2); font-size:var(--text-sm) }
.side-cta p { margin-bottom:var(--s4) }

/* Forms, filters and pagination */
.form { display:grid; gap:var(--s4); margin:0 }
.grid-form { grid-template-columns:repeat(2,minmax(0,1fr)) }
.form-inline { grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr) minmax(0,.9fr) auto; align-items:end; margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line) }
.field { display:grid; gap:var(--s2) }
.field > span { font-size:var(--text-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.field-wide { grid-column:1/-1 }
.field input,.field select,.field textarea { width:100%; min-width:0; min-height:40px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:var(--s2) var(--s3) }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--navy); outline:2px solid var(--blue-soft); outline-offset:1px }
.form-actions { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:flex-end }
.filters { display:grid; grid-template-columns:minmax(0,1fr) 192px auto; gap:var(--s3); align-items:end; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4); margin-bottom:var(--s4) }
.uf-chips { display:flex; flex-wrap:wrap; gap:var(--s1); margin-bottom:var(--s4) }
.uf-chip { display:inline-flex; align-items:center; justify-content:center; gap:var(--s1); min-height:32px; padding:var(--s1) var(--s2); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--muted); font-size:var(--text-xs) }
.uf-chip em { font:normal var(--text-xs)/1.5 var(--mono) }
.uf-chip:hover { border-color:var(--navy); text-decoration:none }
.uf-chip.active { background:var(--navy); border-color:var(--navy); color:#FFF }
.notice,.alert { margin:0; padding:var(--s3) var(--s4); border-radius:var(--r); background:var(--warn-soft); border:1px solid #E7D6B5; color:var(--warn); font-size:var(--text-sm) }
.notice-ok { background:var(--green-soft); border-color:#C9E9D6; color:var(--green-dark) }
.alert { margin-bottom:var(--s4); background:var(--block-soft); border-color:#F2CDC8; color:var(--block) }
.result-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s3); font-size:var(--text-sm); color:var(--muted) }
.result-bar strong { color:var(--ink); font-family:var(--mono); font-weight:500 }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3); margin-top:var(--s4) }
.page-numbers { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s1) }
.page-num,.page-btn { display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:var(--s2) var(--s3); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink-2); font-size:var(--text-sm) }
.page-num { font-family:var(--mono) }
.page-num:hover,.page-btn:hover { border-color:var(--navy); text-decoration:none }
.page-num.active { background:var(--navy); border-color:var(--navy); color:#FFF }
.page-btn.disabled { color:var(--muted); background:var(--bg-2) }
.sweep { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s3) var(--s4); margin-bottom:var(--s4) }
.sweep-line { display:flex; align-items:center; gap:var(--s4) }
.sweep-title { font-size:var(--text-xs); font-weight:600; text-transform:uppercase; color:var(--ink-2) }
.sweep-bar { flex:1; height:6px; border-radius:var(--r-sm); background:var(--line); overflow:hidden; min-width:80px }
.sweep-bar > span { display:block; height:100%; max-width:100%; background:var(--green) }
.sweep-num { font:var(--text-xs)/1.5 var(--mono); white-space:nowrap }
.sweep-note { font-size:var(--text-xs); color:var(--muted); white-space:nowrap }
.m-cards { display:none; flex-direction:column; gap:var(--s2) }
.m-card { display:grid; gap:var(--s2); padding:var(--s4); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink) }
.m-card:hover { border-color:var(--navy); text-decoration:none }
.m-card-top,.m-card-line { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3) }
.m-card-name { font-weight:600; color:var(--navy) }
.m-card-line { flex-wrap:wrap; font-size:var(--text-sm) }
.m-card-k { color:var(--muted) }
.m-card-v { font-family:var(--mono); white-space:nowrap }
.m-card-status { padding-top:var(--s2); border-top:1px solid var(--line) }

/* Diagnostic: ordered-list numbering remains visible at every width. */
.questions { margin:0; padding:0; display:grid; gap:var(--s3); list-style:none; counter-reset:question }
.question { position:relative; counter-increment:question; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4) var(--s4) var(--s4) 56px }
.question::before { content:counter(question); position:absolute; left:var(--s4); top:var(--s4); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--blue-soft); color:var(--navy); font:var(--text-sm)/1 var(--mono) }
.question-label { margin-bottom:var(--s2); font-weight:600 }
.question-why { margin-bottom:var(--s3); font-size:var(--text-sm); color:var(--muted) }
.segmented { display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden }
.segmented label { position:relative; display:flex; align-items:center; justify-content:center; min-width:72px; min-height:44px; padding:var(--s2) var(--s4); font-size:var(--text-sm); font-weight:600; color:var(--muted); cursor:pointer }
.segmented input { position:absolute; opacity:0; inset:0; cursor:pointer }
.segmented label:has(input:checked) { background:var(--navy); color:#FFF }
.segmented label:has(input:focus-visible) { outline:2px solid var(--yellow); outline-offset:-4px }
.score-card,.report-score { display:flex; align-items:center; gap:var(--s5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); margin-bottom:var(--s4) }
.score-ring { position:relative; flex:0 0 128px; width:128px; height:128px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:conic-gradient(var(--green) calc(var(--score) * 1%),var(--line) 0) }
.score-ring::before { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--surface) }
.score-warning { background:conic-gradient(var(--yellow) calc(var(--score) * 1%),var(--line) 0) }
.score-blocked { background:conic-gradient(var(--block) calc(var(--score) * 1%),var(--line) 0) }
.score-value { position:relative; font:var(--text-3xl)/1.2 var(--mono) }
.score-max { position:relative; font:var(--text-xs)/1.5 var(--mono); color:var(--muted) }
.score-text h2 { font-size:var(--text-xl); margin-bottom:var(--s2) }
.score-text p { color:var(--muted); max-width:52ch }
.lead-card { border-color:#C9E9D6 }
.lead-card .form { margin-top:var(--s4) }

/* Pricing and authentication */
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); align-items:stretch }
.plan { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); position:relative }
.plan-featured { border-color:var(--navy) }
.plan-badge { position:absolute; top:-12px; left:var(--s5); background:var(--navy); color:#FFF; font-size:var(--text-xs); font-weight:600; border-radius:var(--r-sm); padding:var(--s1) var(--s2) }
.plan h2 { font-size:var(--text-lg); margin-bottom:var(--s3) }
.plan-price { font:500 var(--text-2xl)/1.3 var(--mono); letter-spacing:-.03em; margin-bottom:var(--s1); white-space:nowrap }
.plan-price span { font:var(--text-sm)/1.5 var(--font); color:var(--muted) }
.plan-note { margin-bottom:var(--s5); color:var(--muted); font-size:var(--text-sm) }
.plan .checklist { flex:1; margin-bottom:var(--s5) }
.plan .btn:last-child { margin-top:auto }
.pricing-foot { text-align:center; margin-top:var(--s5) }
.empty { text-align:center; padding:var(--s7) var(--s5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r) }
.empty h2 { font-size:var(--text-lg); margin-bottom:var(--s2) }
.empty p { color:var(--muted); margin-bottom:var(--s4) }
.empty-inline { padding:var(--s5); color:var(--muted) }
.auth-page { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:var(--s5) }
.auth-shell { width:100%; max-width:960px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-raised) }
.auth-brandpanel { background:var(--navy); color:#FFF; padding:var(--s6); display:flex; flex-direction:column; justify-content:space-between; gap:var(--s6); min-height:480px; border-radius:var(--r-lg) 0 0 var(--r-lg) }
.auth-brandpanel .masthead-logo { background:#FFF }
.auth-brandpanel .brand-name { color:#FFF }
.auth-brandpanel .brand-sub { color:#D2DDF2 }
.auth-pitch h1 { color:#FFF; font-size:var(--text-2xl); max-width:26ch }
.auth-pitch ul { list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3) }
.auth-pitch li { position:relative; padding-left:var(--s5); font-size:var(--text-sm); color:#D2DDF2 }
.auth-legal { font-size:var(--text-xs); color:#D2DDF2 }
.auth-formpanel { display:grid; place-items:center; padding:var(--s6); min-width:0 }
.auth-form { width:100%; max-width:336px; display:grid; gap:var(--s4) }
.auth-form h2 { font-size:var(--text-xl) }
.auth-hint { font-size:var(--text-sm); color:var(--muted) }
.auth-demo { font-size:var(--text-xs); line-height:1.8; color:var(--muted) }
.auth-demo code { background:var(--bg); border-radius:var(--r-sm); padding:0 var(--s1); font-size:var(--text-xs) }

/* Report and shared footer. Main has no bottom padding: one source for the gap. */
.report-head { display:flex; justify-content:space-between; gap:var(--s5); border-bottom:1px solid var(--navy); padding-bottom:var(--s4); margin-bottom:var(--s5) }
.report-title { font-size:var(--text-2xl); margin-top:var(--s3) }
.report-meta { font:var(--text-sm)/1.6 var(--mono); color:var(--muted); text-align:right }
.report h2 { font-size:var(--text-lg); margin:var(--s5) 0 var(--s3) }
.report ol { padding-left:var(--s5) }
.report li { margin-bottom:var(--s3) }
.report li strong { display:block; margin-bottom:var(--s1) }
.report li span { color:var(--muted) }
.report-foot { margin-top:var(--s6); border-top:1px solid var(--line); padding-top:var(--s4); font-size:var(--text-xs); color:var(--muted) }
.print-btn { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5) }
.footer { flex:0 0 auto; margin-top:var(--s7); background:var(--surface); border-top:1px solid var(--navy) }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s5); padding-block:var(--s6) var(--s5) }
.footer-brand p { margin-top:var(--s3); color:var(--muted); font-size:var(--text-sm); max-width:40ch }
.footer h4 { font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3) }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2) }
.footer li a { font-size:var(--text-sm); color:var(--ink-2) }
.footer-bottom { border-top:1px solid var(--line); padding-block:var(--s4); display:flex; justify-content:space-between; gap:var(--s4); font-size:var(--text-xs); color:var(--muted) }
/* beforeprint/afterprint toggle this class; no fourth media query is needed. */
body.printing { display:block; background:#FFF }
.printing .official-bar,.printing .masthead,.printing .footer,.printing .btn,.printing .form,.printing .pagination,.printing .uf-chips,.printing .filters,.printing .print-btn { display:none }
.printing main { padding:0 }
.printing .card,.printing .panel,.printing .icgov,.printing .score-card { box-shadow:none; break-inside:avoid }
.printing .table-wrap { overflow:visible }

/* Responsive rules — exactly three breakpoints, always last. */
@media (max-width:1080px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:var(--s5) }
  .kpis,.kpi-band { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .kpi,.kpi:first-child,.kpi:last-child,.kpi-band .cell:first-child,.kpi-band .cell:last-child { border-radius:0 }
  .layout { grid-template-columns:minmax(0,1fr) }
  .col-side { position:static }
  .form-inline { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .plans { grid-template-columns:minmax(0,1fr); gap:var(--s5) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:860px) {
  .container { padding-inline:var(--s4) }
  main { padding-top:var(--s4) }
  .main-flush { padding-top:0 }
  .official-bar .container { justify-content:center; gap:0 }
  .official-bar .links { display:none }
  .masthead-top { min-height:60px; height:60px; padding-block:var(--s2); gap:var(--s2); flex-wrap:nowrap }
  .masthead-top .masthead-brand { gap:var(--s2) }
  .masthead-top .masthead-logo { flex-basis:32px; width:32px; height:32px }
  .masthead-top .brand-name { font-size:var(--text-lg) }
  .masthead-top .brand-sub,.masthead-actions a.btn-ghost,.masthead-actions .user { display:none }
  .masthead-actions .btn { min-height:36px; padding-inline:var(--s2); font-size:var(--text-xs) }
  .masthead-actions .pill { max-width:16ch; overflow:hidden; text-overflow:ellipsis; display:inline-block }
  .masthead-nav .container { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s1); padding-block:var(--s2) }
  .masthead-nav a { white-space:normal; text-align:center; min-height:40px; padding:var(--s2); font-size:var(--text-sm) }
  .masthead-nav .sep { display:none }
  .hero { padding-block:var(--s6) }
  .pillars { grid-template-columns:minmax(0,1fr) }
  .page-head { flex-direction:column; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s4) }
  .head-meta { flex-direction:row; align-items:baseline; gap:var(--s2) }
  .head-meta strong { font-size:var(--text-xl) }
  .icgov { grid-template-columns:minmax(0,1fr) }
  .icgov-score { display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s3); padding:var(--s4); border-radius:var(--r) var(--r) 0 0 }
  .icgov-score .label,.icgov-score p { grid-column:1/-1 }
  .icgov-score .value,.icgov-score .grade,.icgov-score p { margin:0 }
  .icgov-dims { padding:var(--s4) }
  .filters { grid-template-columns:minmax(0,1fr) }
  .sweep-line { flex-wrap:wrap; gap:var(--s2) var(--s3) }
  .sweep-bar { order:1; flex-basis:100% }
  .table { min-width:640px }
  .only-wide { display:none }
  .m-cards { display:flex }
  .page-numbers { order:1; flex-basis:100% }
  .cta-row { flex-direction:column; align-items:flex-start }
  .score-card,.report-score { flex-direction:column; align-items:flex-start; padding:var(--s4) }
  .auth-shell { grid-template-columns:minmax(0,1fr); max-width:480px }
  .auth-brandpanel { min-height:0; padding:var(--s5); gap:var(--s5); border-radius:var(--r-lg) var(--r-lg) 0 0 }
  .auth-pitch h1 { font-size:var(--text-xl); max-width:none }
  .auth-pitch ul { display:none }
  .auth-formpanel { padding:var(--s5) }
  .report-head { flex-direction:column }
  .report-meta { text-align:left }
  .footer { margin-top:var(--s6) }
  .footer-grid { padding-block:var(--s5) }
  .footer-bottom { flex-direction:column; gap:var(--s2) }
}
@media (max-width:520px) {
  .official-bar .container { min-height:32px; font-size:var(--text-xs) }
  .official-bar .flag { gap:var(--s1); white-space:nowrap; letter-spacing:-.02em }
  .official-bar .flag i { display:none }
  .masthead-nav .container { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .masthead-nav a { font-size:var(--text-xs) }
  .kpis,.kpi-band { grid-template-columns:minmax(0,1fr) }
  .kpi-value,.kpi-band .value { font-size:var(--text-xl) }
  .kpi-small { font-size:var(--text-md) }
  .hero h1 { font-size:var(--text-2xl) }
  .hero h1 br { display:none }
  .hero-points { gap:var(--s3) }
  .consulta-grid,.grid-form,.form-inline,.facts { grid-template-columns:minmax(0,1fr) }
  .section { margin-top:var(--s6) }
  .pillar,.cta-row,.plan { padding:var(--s4) }
  .plan-badge { left:var(--s4) }
  .dim { grid-template-columns:minmax(0,1fr) auto; gap:var(--s2) var(--s3) }
  .dim-name { grid-column:1; grid-row:1 }
  .dim-val { grid-column:2; grid-row:1; align-self:start }
  .dim-bar { grid-column:1/-1; grid-row:2 }
  .field input,.field select,.field textarea { font-size:var(--text-lg); min-height:44px }
  .page-btn,.page-num { min-height:44px; min-width:44px }
  .question { padding-left:48px }
  .question::before { left:var(--s3) }
  .auth-page { padding:var(--s4) }
  .auth-brandpanel,.auth-formpanel { padding:var(--s4) }
  .footer-grid { grid-template-columns:minmax(0,1fr) }
}


/* ============================================================================
   v11 — paywall sneak peek
   ========================================================================== */
.gate{margin-top:var(--s4);padding:var(--s4);border:1px dashed var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,#FBFCFF,#F7F9FD);display:grid;gap:6px}
.gate-compact{margin-top:var(--s3);padding:var(--s3)}
.gate-lock{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.gate-lock svg{flex:0 0 auto;margin-top:-1px}
.gate p{font-size:var(--fs-xs);color:var(--muted);margin:0}
.gate-actions{display:flex;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.locked{filter:blur(3.5px);user-select:none;pointer-events:none;opacity:.72}
/* Estado bloqueado legível: agregado público + o que está atrás do plano. */
.gate-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.gate-summary-item{display:grid;gap:4px;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r);background:var(--bg-2)}
.gate-summary-label{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.gate-summary-value{font-size:var(--text-sm);font-weight:600;color:var(--ink)}
.gate-summary-hint{font-size:var(--text-xs);color:var(--muted)}
@media print{ .gate{display:none} .locked{filter:none;opacity:1} }

/* cota estourada */
.bar-over>span{background:var(--block)}