/* Mesa Jurídica, Harvey-style version: the PRODUCT UI inside the illustrative mocks.
   Lifted unchanged from landing/landing.css (the app's own look: these are screenshots of the product, so they keep the app's
   dark palette and scale from tokens.css, 'Product UI' block). The site's own chrome is in styles.css, written new. */

/* Labels, frames, tiles, avatars and the segmented control, as in the app */
.badge { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--size-label); padding: 0 var(--s-2); border-radius: var(--radius-pill); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); white-space: nowrap; background: var(--surface-soft); color: var(--ink-2); }
.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--aviso { background: var(--warn-soft); color: var(--warn-ink); }
.bloco { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--e-1); padding: var(--pad-card); min-width: 0; }
.bloco__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--card-head); }
.bloco__titulo { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.bloco__cab .meta { margin-top: var(--s-half); }
.tile { display: grid; gap: var(--s-half); align-content: start; padding: var(--pad-tile); border-radius: var(--radius-tile); background: var(--surface-soft); min-width: 0; }
.tile .n { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.tile span { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.tile--aviso { background: var(--warn-soft); }
.tile--aviso .n, .tile--aviso span { color: var(--warn-ink); }
.tile__rot { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.tile .tile__rot { margin-bottom: var(--s-2); }
.tile .tile__nota { margin-top: var(--s-2); }

.avatar { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-semibold); flex: none; }
.avatar--sm { width: var(--control-xs); height: var(--control-xs); font-size: var(--t-2xs); }
.avatar--vazio { background: none; border: 1px dashed var(--muted); color: var(--muted); }

/* Segmented control with a sliding marker ("You are here"), as in the app */
.seg { display: inline-flex; position: relative; padding: 3px; border-radius: var(--radius-control); background: var(--surface-soft); border: 1px solid var(--line); isolation: isolate; max-width: 100%; }
.seg button { position: relative; z-index: 1; height: calc(var(--control) - 8px); padding: 0 var(--s-3); border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-base); font-weight: var(--w-medium); border-radius: calc(var(--radius-control) - 3px); cursor: pointer; white-space: nowrap; transition: color var(--dur-exit); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg button:focus-visible { outline: none; box-shadow: var(--focus); }
.seg__marca { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: calc(var(--radius-control) - 3px); background: var(--surface); box-shadow: var(--e-1); transition: transform var(--dur-move) var(--ease-move), width var(--dur-move) var(--ease-move); }
html:not(.js) .vistas__seg { display: none; }


/* The desks' views (Experimente) and the Financeiro card */
/* The views: one grid cell, so the card keeps the height of the tallest view and nothing below jumps.
   Switching crossfades and slides --reveal-y from the side you travelled toward (--rumo: 1 or -1). */
.vistas { display: grid; }
.vista { box-shadow: var(--e-2); min-width: 0; }
.vistas-js .vista { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(calc(var(--rumo, 1) * var(--reveal-y)));
  transition: opacity var(--dur-exit) var(--ease-move), transform var(--dur-exit) var(--ease-move), visibility 0s linear var(--dur-exit); }
.vistas-js .vista.is-ativa { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), visibility 0s; }
.vistas-js .vista.sem-transicao { transition: none; }
.vista__rot { margin: var(--s-4) 0 var(--s-2); }

/* Diretoria: total, the proportion bar, four sums, then where and the trend */
.total { display: grid; justify-items: end; gap: var(--s-half); }
.total .n { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.pilha { display: flex; gap: var(--s-half); height: var(--track); margin-bottom: var(--s-4); }
.pilha span { width: var(--w); min-width: var(--s-1); border-radius: var(--radius-pill); transform-origin: left; }
.pilha--larga { height: var(--s-3); margin-bottom: var(--s-6); }
.pilha__exec, .chave--exec { background: var(--graf-4); }
.pilha__cond, .chave--cond { background: var(--graf-5); }
.pilha__dep, .chave--dep { background: var(--graf-1); }
.pilha__lev, .chave--lev { background: var(--graf-3); }
.pilha__disc, .chave--disc { background: var(--graf-6); }
.chave { display: inline-block; width: var(--dot); height: var(--dot); border-radius: 50%; flex: none; }
.fin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.fin dt { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.fin dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); margin-top: var(--s-half); }
.fin dd .n { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.fin dd > span:not(.badge) { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.vista__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.mapa.mapa--mini { gap: 1px; max-width: calc(var(--s-16) * 2); }
.mapa.mapa--mini span { font-size: 0; border-radius: var(--s-half); }
.tendencia { display: flex; align-items: stretch; gap: var(--s-1); height: calc(var(--s-16) + var(--s-12)); }
.tendencia li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); height: 100%; }
.tendencia li::before { content: ""; flex: 0 1 var(--h); border-radius: var(--radius-mark) var(--radius-mark) 0 0; background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); transform-origin: bottom; }
.tendencia li.is-atual::before { background: var(--graf-1); }
.tendencia span { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); text-align: center; }

/* Gestão and Advogado */
.stats-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.stats-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linhas { display: grid; }
.linha { display: grid; grid-template-columns: var(--s-12) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding-block: var(--row-pad); border-top: 1px solid var(--line); }
.linha:last-child { padding-bottom: 0; }
.data { display: grid; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.data b { color: var(--ink); font-size: var(--t-md); line-height: var(--lh-md); }
.linha__txt { display: grid; min-width: 0; }
.linha__txt b { font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha__txt span { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* The money, wide */
.financeiro { padding: var(--s-8); box-shadow: var(--e-2); }
.financeiro .bloco__cab { margin-bottom: var(--s-5); }
.financeiro .total .n { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.fin-grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
.fin-grupo { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.fin-grupo__n { font-size: var(--t-3xl); line-height: var(--lh-3xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.fin-itens { display: grid; margin-top: var(--s-2); }
.fin-itens li { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr) auto; column-gap: var(--s-2); align-items: center; padding-block: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-base); line-height: var(--lh-base); color: var(--ink-2); }
.fin-itens .n { font-weight: var(--w-semibold); color: var(--ink); }
.fin-itens small { grid-column: 2 / -1; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }


/* Feature mocks: CNPJs, excerpt, distribution, bars, tile map, ranking, desks and reports, table */
/* The picture sits --feature-visual under the text (the grid's 8 plus the rest) and is as tall as its content */
.mock { margin-top: calc(var(--feature-visual) - var(--s-2)); padding: var(--pad-tile); border-radius: var(--radius-tile); background: var(--surface-soft); font-size: var(--t-base); line-height: var(--lh-base); min-width: 0; display: grid; }
.recurso--largo .mock { margin-top: 0; }

.cnpjs, .dist { display: grid; border-radius: var(--radius-inner); background: var(--surface); padding-inline: var(--s-3); }
.cnpjs li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--line); }
.cnpjs li:first-child { border-top: 0; }
.cnpjs li > span { display: grid; min-width: 0; }
.cnpjs b { font-weight: var(--w-semibold); }
.cnpjs small { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.cnpjs .n { font-size: var(--t-md); }
.cnpjs__total .n { font-size: var(--t-xl); line-height: var(--lh-xl); color: var(--accent); }

.trecho { padding: var(--s-3); border-radius: var(--radius-inner); background: var(--surface); color: var(--ink-2); font-family: var(--mono); font-size: var(--t-sm); line-height: var(--lh-base); }
.trecho mark { padding: 0 var(--s-half); border-radius: var(--radius-mark); background: var(--accent-soft); color: var(--ink); }
.extraido { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* Distribution: the new case gets its owner */
.vista .dist { background: var(--surface-soft); }
.dist__linha { display: grid; grid-template-columns: var(--control-xs) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding-block: var(--s-2); border-top: 1px solid var(--line); }
.dist__linha:first-child { border-top: 0; }
.dist__txt { display: grid; min-width: 0; }
.dist__txt b { font-family: var(--mono); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); overflow-wrap: anywhere; }   /* wraps, never cut */
.dist__txt span { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.dist__sug { color: var(--accent) !important; }
.dono, .dist__btn { display: grid; }
.dono > *, .dist__btn > * { grid-area: 1 / 1; text-align: center; transition: opacity var(--dur-settle) var(--ease-out), transform var(--dur-settle) var(--ease-out); }
.dono__rosto { opacity: 0; transform: scale(.96); }
.dist__btn-b { opacity: 0; color: var(--ok); }
/* Resolved (the app's "It's hers now"): the dashed place becomes the face, the button says so */
.is-atribuido .dono .avatar--vazio, .is-atribuido .dist__btn-a { opacity: 0; }
.is-atribuido .dono__rosto { opacity: 1; transform: none; }
.is-atribuido .dist__btn-b { opacity: 1; }
.is-atribuido .dist__btn { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.is-atribuido .dist__sug { color: var(--muted) !important; }

/* Bars: one grid for every row, so the bars and the values line up */
.barras { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 8fr) auto; gap: var(--s-3); align-items: center; }
.barras li { display: contents; }
.barras__rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: var(--t-base); line-height: var(--lh-base); }
.barras__trilho { height: var(--track); border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; }
.vista .barras__trilho { background: var(--surface-soft); }
.barras__cheio { display: block; height: 100%; width: var(--w); border-radius: var(--radius-pill); background: var(--graf-1); transform-origin: left; }
.barras__cheio--alerta { background: var(--graf-4); }
.barras .n { text-align: right; font-weight: var(--w-semibold); white-space: nowrap; font-size: var(--t-base); }

/* Map by state: a tile map, intensity by count */
.mock--mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.mapa { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-half); max-width: var(--tile-min); }
.mapa span { grid-column: var(--c); grid-row: var(--r); display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-mark); background: var(--surface); color: var(--muted); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); }
.tile .mapa span { background: var(--surface); }
.mapa .n1 { background: color-mix(in srgb, var(--graf-1) 15%, var(--surface)); color: var(--ink-2); }
.mapa .n2 { background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); color: var(--ink); }
.mapa .n3 { background: color-mix(in srgb, var(--graf-1) 60%, var(--surface)); color: var(--ink); }
.mapa .n4 { background: var(--accent); color: var(--on-accent); } /* the one strongest tile: accent, so its label keeps AA */
.tile .mapa .n1 { background: color-mix(in srgb, var(--graf-1) 15%, var(--surface)); }
.tile .mapa .n2 { background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); }
.tile .mapa .n3 { background: color-mix(in srgb, var(--graf-1) 60%, var(--surface)); }
.tile .mapa .n4 { background: var(--accent); }
.ranking { display: grid; gap: var(--s-2); }
.ranking li { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; }
.ranking span { color: var(--muted); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .n { text-align: right; }

/* ---------- Desks and reports: two parts side by side ---------- */
.partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
.parte { display: grid; grid-template-rows: auto auto 1fr; gap: var(--s-3); align-content: start; }
.parte > p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); max-width: var(--measure); }
.parte > [role="img"] { margin-top: var(--s-3); }
/* Three mini desks: rows of modules, the first module of each desk is what that person sees first */
.mini-mesas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-content: start; }
.mini-mesa { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-3); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-1); }
.mini-mesa__rot { margin-bottom: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-semibold); }
.mini-mesa__linha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-1); }
.modulo { display: grid; align-items: end; min-height: var(--s-10); padding: var(--s-1) var(--s-2); border-radius: var(--radius-inner); background: var(--surface-soft); color: var(--muted); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); }   /* wraps, never cut */
.modulo--forte { min-height: var(--s-12); background: var(--accent-soft); color: var(--accent); }
/* Reports: a white slide and three files */
.relatorios { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-3); align-items: start; }
.slide { display: grid; grid-template-rows: auto auto 1fr; aspect-ratio: 16 / 10; padding: var(--s-3) var(--s-4); border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-2); min-width: 0; }
.slide__titulo { font-size: var(--t-base); line-height: var(--lh-base); font-weight: var(--w-semibold); }
.slide__sub { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); }
.slide__barras { display: flex; align-items: stretch; gap: var(--s-2); margin-top: var(--s-2); min-height: 0; }
.slide__barras li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); height: 100%; }
.slide__barras li::before { content: ""; flex: 0 1 var(--h); min-height: var(--s-half); border-radius: var(--radius-mark) var(--radius-mark) 0 0; background: var(--graf-1); transform-origin: bottom; }
.slide__barras span { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); text-align: center; }
.arquivos { display: grid; gap: var(--s-2); }
.arquivos li { display: grid; grid-template-columns: var(--s-10) minmax(0, 1fr); gap: var(--s-2); align-items: center; padding: var(--s-2); border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); }
.arquivos li > span:last-child { display: grid; min-width: 0; }
.arquivos b { font-size: var(--t-base); line-height: var(--lh-base); font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivos small { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.arquivo__tipo { display: grid; place-items: center; height: var(--s-10); border-radius: var(--radius-inner); background: var(--surface-soft); color: var(--ink-2); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); }

/* ---------- Differentiator: the table ---------- */
.tabela-frame { overflow-x: auto; contain: inline-size; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); line-height: var(--lh-base); }
.tabela th { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); color: var(--muted); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela td { padding: var(--row-pad) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.tabela tr > :first-child { padding-left: 0; }
.tabela tr > :last-child { padding-right: 0; }
.tabela tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.tabela td b { display: block; font-weight: var(--w-semibold); }
.tabela td small { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }


/* The home proof: numbers and the interactive map */
/* The home proof: real numbers beside an interactive, illustrative map. Both cards share one top and bottom. */
.prova-mapa { align-items: stretch; margin-top: var(--section-y); }
.prova-numeros { display: grid; align-content: space-between; gap: var(--s-6); padding: var(--s-8); }
.prova-numeros h3 { margin-top: var(--s-2); font-size: var(--t-xl); line-height: var(--lh-xl); }
.prova-numeros__lista { display: grid; }
.prova-numeros__lista > div { display: grid; grid-template-columns: calc(var(--s-16) * 2) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding-block: var(--s-4); border-top: 1px solid var(--line); }
.prova-numeros__lista > div:last-child { padding-bottom: 0; }
.prova-numeros__lista dt { font-size: var(--t-stat); line-height: var(--lh-stat); font-weight: var(--w-display); letter-spacing: var(--tracking-tight); }
.prova-numeros__lista dd { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }

.mapa-int { display: grid; align-content: space-between; gap: var(--s-6); margin: 0; padding: var(--s-8); }
.mapa-int__corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.mapa-int__grade { display: grid; grid-template-columns: repeat(7, var(--control-sm)); grid-auto-rows: var(--control-sm); gap: var(--s-1); }
.uf { grid-column: var(--c); grid-row: var(--r); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-mark); font: inherit; font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro); }
.uf:hover { transform: scale(1.08); }
.uf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uf[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.uf.n0, .uf-chave.n0 { background: var(--surface-soft); color: var(--muted); cursor: default; }
.uf.n1, .uf-chave.n1 { background: color-mix(in srgb, var(--graf-1) 15%, var(--surface)); color: var(--ink); }
.uf.n2, .uf-chave.n2 { background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); color: var(--ink); }
.uf.n3, .uf-chave.n3 { background: color-mix(in srgb, var(--graf-1) 60%, var(--surface)); color: var(--ink); }
.uf.n4, .uf-chave.n4 { background: var(--accent); color: var(--on-accent); }
.uf:disabled:hover { transform: none; }
.mapa-int__lado { display: grid; gap: var(--s-6); align-content: start; }
.mapa-int__leitura { display: grid; gap: var(--s-1); }
.mapa-int__nome { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); }
.mapa-int__dado { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }
.mapa-int__n { font-weight: var(--w-semibold); color: var(--ink); }
.mapa-int__barra { display: block; height: var(--track); margin-top: var(--s-2); border-radius: var(--radius-pill); background: var(--surface-soft); overflow: hidden; }
.mapa-int__barra span { display: block; width: var(--w); height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dur-settle) var(--ease-out); }
.mapa-int__legenda { display: grid; gap: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.mapa-int__legenda li { display: flex; align-items: center; gap: var(--s-2); }
.uf-chave { display: inline-block; width: var(--s-4); height: var(--s-4); border-radius: var(--radius-mark); }
.mapa-int__nota { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .uf, .mapa-int__barra span { transition: none; } .uf:hover { transform: none; } }
@media (max-width: 960px) { .prova-mapa { align-items: start; } }

/* The verticals' vignettes */
/* the vignettes: drawn with the product's own parts, no numbers */
.pilha--vinheta { height: var(--s-3); margin-bottom: var(--s-3); }
.vinheta__chaves { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.vinheta__chaves li { display: inline-flex; align-items: center; gap: var(--s-1); }
.vinheta--fila { display: grid; gap: var(--s-2); }
.vinheta__linha { display: flex; align-items: center; gap: var(--s-2); }
.vinheta__barra { flex: 1; height: var(--track); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); }
.vinheta__barra--curta { flex: 0 1 25%; background: var(--line); }
.vinheta__barra--media { flex: 0 1 55%; }
.vinheta--semana { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1); }
.vinheta__dia { display: grid; grid-template-rows: auto 1fr; gap: var(--s-1); min-height: calc(var(--s-16) + var(--s-2)); padding: var(--s-1); border-radius: var(--radius-inner); background: var(--surface); }
.vinheta__dia span { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); text-align: center; }
.vinheta__evento { align-self: start; height: var(--s-4); border-radius: var(--radius-mark); }
.vinheta__evento--aud, .chave--aud { background: var(--accent); }
.vinheta__evento--prazo, .chave--prazo { background: var(--warn-ink); }
.vinheta__chaves--semana { margin-top: var(--s-3); }
@media (max-width: 960px) { .verticais { grid-template-columns: minmax(0, 1fr); } }

/* Demandas administrativas: the flow of one demand */
.fluxo { display: grid; gap: var(--s-1); }
.fluxo__passo { position: relative; display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-3); }
.fluxo__passo b { display: block; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semibold); }
.fluxo__passo small { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.fluxo__marca { width: var(--s-3); height: var(--s-3); margin-top: var(--s-1); border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); }
.fluxo__passo--feito .fluxo__marca { background: var(--accent); }
.fluxo__passo--atual .fluxo__marca { background: var(--ok); border-color: var(--ok); }
.fluxo__passo:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--s-3) / 2 - 1px); top: calc(var(--s-1) + var(--s-3)); bottom: 0; width: 2px; background: var(--line); }

/* Buttons drawn inside a mock are the app's buttons, not the site's (styles.css .btn): scoped here so the site's
   touch-target heights and padding never reach them. display is left to the component (.dist__btn stacks its two states). */
:is(.bloco:not(.form-cartao), .mock, [role="img"]) .btn { justify-content: center; gap: var(--s-2); width: auto; min-height: 0; height: var(--control); padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-medium); letter-spacing: 0; white-space: nowrap; }
:is(.bloco:not(.form-cartao), .mock, [role="img"]) .btn--sm { height: var(--control-sm); padding: 0 var(--s-3); font-size: var(--t-base); border-radius: var(--radius-tile); }
:is(.bloco:not(.form-cartao), .mock, [role="img"]) .btn:hover { background: var(--surface-soft); }
:is(.bloco, .mock, [role="img"]) .dist__btn { display: grid; align-items: center; justify-items: center; justify-self: end; align-self: center; }

/* A mock is a picture of the dark product: its text takes the product ink even on a light section. */
[role="img"]:not(.app), .mini-mesas, .relatorios { color: var(--ink); }

/* A frame's first mock starts at the frame's padding; slides carry no shadow (nothing else on the site does). */
.bloco--visual > .mock:first-child, .bloco--visual > [role="img"]:first-child > .mock:first-child { margin-top: 0; }
.slide { box-shadow: none; }
/* No frame inside a frame: a mock inside .bloco--visual is flat. */
.bloco--visual .mock { background: none; padding: 0; }