/* Checkpoint Verticci — casco de aplicação sobre o design system (tokens --v-*).
   Conceito: instrumento de medição. A assinatura é a "régua": consumo do pacote
   com marcação de escala, onde o cobalto é o único sinal. */

html { overflow-x: clip; }
body { background: var(--v-canvas); min-block-size: 100svh; }
body:not(.pronto) #app { visibility: hidden; }

/* ------------------------------------------------------------------ casco */
.casco { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-block-size: 100svh; }
.lateral {
  position: sticky; inset-block-start: 0; block-size: 100svh;
  display: flex; flex-direction: column; gap: var(--v-espaco-8);
  padding: var(--v-espaco-6) var(--v-espaco-4);
  background: var(--v-canvas); color: var(--v-texto);
  border-inline-end: var(--v-traco-fino) solid var(--v-borda);
}
.lateral__marca { display: block; padding-inline: var(--v-espaco-2); color: var(--v-texto); }
.lateral__marca img { inline-size: 9.5rem; block-size: auto; display: block; }
.lateral__produto {
  margin-block-start: var(--v-espaco-3); padding-inline: var(--v-espaco-2);
  font-family: var(--v-fonte-mono); font-size: var(--v-fs-micro); color: var(--v-texto-sutil);
  letter-spacing: var(--v-ls-amplo); text-transform: uppercase;
}
.menu { display: flex; flex-direction: column; gap: var(--v-espaco-1); }
.menu__grupo { margin-block: var(--v-espaco-4) var(--v-espaco-1); padding-inline: var(--v-espaco-3); font-size: var(--v-fs-micro); color: var(--v-texto-sutil); }
.menu a {
  display: flex; align-items: center; gap: var(--v-espaco-3);
  min-block-size: 2.5rem; padding-inline: var(--v-espaco-3);
  border-radius: var(--v-raio-sm); color: var(--v-texto-suave); text-decoration: none;
  font-size: var(--v-fs-corpo-p); font-weight: var(--v-peso-medium);
  transition: background-color var(--v-dur-rapida) var(--v-curva-padrao), color var(--v-dur-rapida) var(--v-curva-padrao);
}
.menu a:hover { background: color-mix(in srgb, var(--v-texto) 6%, transparent); color: var(--v-texto); }
.menu a[aria-current='page'] { background: color-mix(in srgb, var(--v-texto) 9%, transparent); color: var(--v-texto); box-shadow: inset 2px 0 0 var(--v-acento); }
.menu svg { inline-size: 1.125rem; block-size: 1.125rem; flex: none; opacity: .85; }
.menu .contador { margin-inline-start: auto; font-family: var(--v-fonte-mono); font-size: var(--v-fs-micro); padding: 0 var(--v-espaco-2); border-radius: var(--v-raio-total); background: var(--v-acento); color: var(--v-acento-contraste); line-height: 1.6; }
.lateral__pe { margin-block-start: auto; display: flex; flex-direction: column; gap: var(--v-espaco-3); padding-inline: var(--v-espaco-2); font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
.lateral__pe strong { color: var(--v-texto); font-weight: var(--v-peso-medium); display: block; }
.lateral__acoes { display: flex; gap: var(--v-espaco-2); flex-wrap: wrap; }

.conteudo { min-inline-size: 0; display: flex; flex-direction: column; }
.faixa-demo { display: block !important;
  display: flex; align-items: center; justify-content: center; gap: var(--v-espaco-2);
  padding: var(--v-espaco-2) var(--v-espaco-4);
  background: var(--v-atencao-suave); color: var(--v-texto);
  border-block-end: var(--v-traco-fino) solid color-mix(in srgb, var(--v-atencao) 35%, transparent);
  font-size: var(--v-fs-legenda); text-align: center;
}
.faixa-demo strong { font-weight: var(--v-peso-semibold); }
.pagina { inline-size: 100%; max-inline-size: 90rem; margin-inline: auto; padding: var(--v-espaco-10) var(--v-espaco-10) var(--v-espaco-16); display: flex; flex-direction: column; gap: var(--v-espaco-8); }

.topo-mobile { display: none; }

/* ------------------------------------------------------------------ cabeçalho de página */
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--v-espaco-6); flex-wrap: wrap; }
.cab__titulo { display: flex; flex-direction: column; gap: var(--v-espaco-2); }
.cab h1 { font-family: var(--v-fonte-display); font-size: var(--v-fs-h2); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); line-height: var(--v-lh-titulo); }
.cab__meta { display: flex; gap: var(--v-espaco-4); flex-wrap: wrap; align-items: center; color: var(--v-texto-sutil); font-size: var(--v-fs-legenda); }
.cab__acoes { display: flex; gap: var(--v-espaco-3); flex-wrap: wrap; }
.voltar { min-block-size: 1.5rem; display: inline-flex; gap: var(--v-espaco-2); align-items: center; font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); text-decoration: none; }
.voltar:hover { color: var(--v-texto); }

/* ------------------------------------------------------------------ KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--v-espaco-4); }
.kpi {
  position: relative; display: flex; flex-direction: column; gap: var(--v-espaco-2);
  padding: var(--v-espaco-5) var(--v-espaco-6); background: var(--v-superficie);
  border: var(--v-traco-fino) solid var(--v-borda); border-radius: var(--v-raio-md);
}
.kpi--acento { box-shadow: inset 2px 0 0 var(--v-acento); }
.kpi--interno { background: var(--v-canvas-rebaixado); }
.kpi__rot { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); font-weight: var(--v-peso-medium); display: flex; align-items: center; gap: var(--v-espaco-2); }
.kpi__val { font-family: var(--v-fonte-display); font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.4rem); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); line-height: 1; font-variant-numeric: tabular-nums; color: var(--v-texto); }
.kpi__val small { font-size: .45em; font-weight: var(--v-peso-regular); color: var(--v-texto-sutil); margin-inline-start: .2em; letter-spacing: 0; }
.kpi__nota { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
.etiqueta-interna { font-family: var(--v-fonte-mono); font-size: var(--v-fs-micro); color: var(--v-texto-sutil); border: var(--v-traco-fino) dashed var(--v-borda-forte); border-radius: var(--v-raio-xs); padding: 0 var(--v-espaco-1); }

/* ------------------------------------------------------------------ superfícies */
.bloco { background: var(--v-superficie); border: var(--v-traco-fino) solid var(--v-borda); border-radius: var(--v-raio-lg); padding: var(--v-espaco-6); display: flex; flex-direction: column; gap: var(--v-espaco-5); min-inline-size: 0; }
.bloco__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--v-espaco-4); flex-wrap: wrap; }
.bloco__cab h2 { font-family: var(--v-fonte-display); font-size: var(--v-fs-h4); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); }
.bloco__cab p { color: var(--v-texto-sutil); font-size: var(--v-fs-legenda); margin-block-start: var(--v-espaco-1); max-inline-size: 60ch; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--v-espaco-6); }
.grade-2--igual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vazio { padding: var(--v-espaco-8); text-align: center; color: var(--v-texto-sutil); border: var(--v-traco-fino) dashed var(--v-borda); border-radius: var(--v-raio-md); font-size: var(--v-fs-corpo-p); }
.carimbo { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
.carimbo time { font-family: var(--v-fonte-mono); }

/* ------------------------------------------------------------------ régua (assinatura) */
.regua { display: flex; flex-direction: column; gap: var(--v-espaco-2); }
.regua__trilho { position: relative; block-size: .75rem; border-radius: var(--v-raio-xs); background: var(--v-canvas-rebaixado); border: var(--v-traco-fino) solid var(--v-borda); overflow: hidden; }
.regua__valor { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--v-acento); transform-origin: left; animation: crescer var(--v-dur-lenta) var(--v-curva-padrao) both; }
.regua__excedente { position: absolute; inset-block: 0; background: repeating-linear-gradient(135deg, var(--v-serie-5) 0 3px, transparent 3px 6px); border-inline-start: 1px solid var(--v-canvas); }
.regua__escala { position: relative; block-size: .5rem; }
.regua__escala i { position: absolute; inset-block-start: 0; inline-size: 1px; block-size: .35rem; background: var(--v-borda-forte); }
.regua__escala i:nth-child(5n+1) { block-size: .5rem; }
.regua__rotulos { display: flex; justify-content: space-between; font-family: var(--v-fonte-mono); font-size: var(--v-fs-micro); color: var(--v-texto-sutil); }
@keyframes crescer { from { transform: scaleX(0); } }

/* ------------------------------------------------------------------ gráficos */
.grafico { position: relative; inline-size: 100%; }
.grafico svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.grafico .eixo { font-family: var(--v-fonte-texto); font-size: 12px; fill: var(--v-texto-sutil); }
.grafico .num { font-family: var(--v-fonte-mono); font-size: 12px; fill: var(--v-texto-suave); font-variant-numeric: tabular-nums; }
.grafico .rotulo-direto { font-family: var(--v-fonte-texto); font-size: 12px; font-weight: 500; }
.grafico .linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .linha--anima { stroke-dasharray: var(--comp); stroke-dashoffset: var(--comp); animation: desenhar 900ms var(--v-curva-padrao) forwards; }
.grafico .area { opacity: .12; }
.grafico .barra { transform-box: fill-box; transform-origin: bottom; animation: subir var(--v-dur-lenta) var(--v-curva-padrao) both; }
.grafico .alvo { cursor: crosshair; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes subir { from { transform: scaleY(0); } }
.dica {
  position: absolute; z-index: var(--v-z-tooltip); pointer-events: none; min-inline-size: 10rem;
  padding: var(--v-espaco-3) var(--v-espaco-4); background: var(--v-superficie-alta); border: var(--v-traco-fino) solid var(--v-borda);
  border-radius: var(--v-raio-md); box-shadow: var(--v-sombra-md); font-size: var(--v-fs-legenda); color: var(--v-texto);
  transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity var(--v-dur-rapida) var(--v-curva-padrao);
}
.dica.visivel { opacity: 1; }
.dica b { display: block; font-weight: var(--v-peso-semibold); margin-block-end: var(--v-espaco-1); }
.dica .l { display: flex; justify-content: space-between; gap: var(--v-espaco-4); }
.dica .l span:last-child { font-family: var(--v-fonte-mono); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--v-espaco-5); font-size: var(--v-fs-legenda); color: var(--v-texto-suave); }
.legenda span { display: inline-flex; align-items: center; gap: var(--v-espaco-2); }
.legenda i { inline-size: .75rem; block-size: .75rem; border-radius: 2px; display: inline-block; }
.legenda i.tracejado { background: none !important; border: 1.5px dashed var(--v-serie-2); }
.legenda i.hachura { background: repeating-linear-gradient(135deg, var(--v-serie-5) 0 2px, transparent 2px 4px) !important; border: 1px solid var(--v-serie-5); }
details.dados summary { cursor: pointer; font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
details.dados[open] summary { margin-block-end: var(--v-espaco-3); }

/* ------------------------------------------------------------------ tabelas */
.v-tabela td.n, .v-tabela th.n { text-align: right; font-family: var(--v-fonte-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-tabela td .sub { display: block; font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
.v-tabela td:first-child { color: var(--v-texto); }
.linha-link { cursor: pointer; }
.linha-link:focus-visible { outline: 2px solid var(--v-foco); outline-offset: -2px; }
.mini-medidor { display: inline-block; inline-size: 5rem; block-size: .375rem; border-radius: var(--v-raio-total); background: var(--v-canvas-rebaixado); vertical-align: middle; margin-inline-end: var(--v-espaco-2); overflow: hidden; }
.mini-medidor b { display: block; block-size: 100%; background: var(--v-acento); }

/* ------------------------------------------------------------------ listas de entregas e cronograma */
.linha-tempo { display: flex; flex-direction: column; }
.marco { display: grid; grid-template-columns: 6.5rem 1rem minmax(0, 1fr) auto; gap: var(--v-espaco-3); align-items: start; padding-block: var(--v-espaco-3); }
.marco__data { font-family: var(--v-fonte-mono); font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); padding-block-start: .1rem; text-align: right; }
.marco__ponto { position: relative; block-size: 100%; }
.marco__ponto::before { content: ''; position: absolute; inset-block: -.75rem; inset-inline-start: 50%; inline-size: 1px; background: var(--v-borda); }
.marco:first-child .marco__ponto::before { inset-block-start: .5rem; }
.marco:last-child .marco__ponto::before { inset-block-end: auto; block-size: .75rem; }
.marco__ponto::after { content: ''; position: absolute; inset-block-start: .3rem; inset-inline-start: calc(50% - .3125rem); inline-size: .625rem; block-size: .625rem; border-radius: 50%; background: var(--v-canvas); border: 2px solid var(--v-borda-forte); }
.marco--concluido .marco__ponto::after { background: var(--v-sucesso); border-color: var(--v-sucesso); }
.marco--andamento .marco__ponto::after { border-color: var(--v-acento); background: var(--v-acento-suave); }
.marco--atrasado .marco__ponto::after { border-color: var(--v-critico); }
.marco__titulo { font-weight: var(--v-peso-medium); color: var(--v-texto); }
.marco__sub { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }

.entregas { display: grid; gap: var(--v-espaco-4); }
.entrega { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--v-espaco-4); padding-block: var(--v-espaco-4); border-block-start: var(--v-traco-fino) solid var(--v-borda-sutil); }
.entrega:first-child { border-block-start: none; padding-block-start: 0; }
.entrega__data { font-family: var(--v-fonte-mono); font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
.entrega h3 { font-family: var(--v-fonte-display); font-size: var(--v-fs-corpo-g); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); color: var(--v-texto); }
.entrega__proj { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); margin-block: var(--v-espaco-1) var(--v-espaco-2); }
.entrega dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--v-espaco-1) var(--v-espaco-3); font-size: var(--v-fs-corpo-p); color: var(--v-texto-suave); }
.entrega dt { color: var(--v-texto-sutil); font-size: var(--v-fs-legenda); padding-block-start: .15rem; }

/* ------------------------------------------------------------------ revisão */
.fila { display: flex; flex-direction: column; gap: var(--v-espaco-4); }
.cartao-reg { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--v-espaco-6); padding: var(--v-espaco-5) var(--v-espaco-6); background: var(--v-superficie); border: var(--v-traco-fino) solid var(--v-borda); border-radius: var(--v-raio-md); }
.cartao-reg--alerta { border-color: color-mix(in srgb, var(--v-atencao) 55%, var(--v-borda)); box-shadow: inset 2px 0 0 var(--v-atencao); }
.cartao-reg h3 { font-size: var(--v-fs-corpo); font-weight: var(--v-peso-medium); color: var(--v-texto); }
.cartao-reg .meta { display: flex; flex-wrap: wrap; gap: var(--v-espaco-2) var(--v-espaco-4); font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); margin-block-start: var(--v-espaco-2); }
.cartao-reg .meta span { display: inline-flex; gap: var(--v-espaco-1); align-items: center; }
.selos { display: flex; gap: var(--v-espaco-2); flex-wrap: wrap; margin-block-start: var(--v-espaco-3); }
.evid { margin-block-start: var(--v-espaco-3); display: flex; flex-wrap: wrap; gap: var(--v-espaco-2); }
.evid code { font-family: var(--v-fonte-mono); font-size: var(--v-fs-micro); background: var(--v-canvas-rebaixado); border: var(--v-traco-fino) solid var(--v-borda); border-radius: var(--v-raio-xs); padding: .1rem var(--v-espaco-2); color: var(--v-texto-suave); }
.decisao { display: flex; flex-direction: column; gap: var(--v-espaco-3); }
.decisao .linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-espaco-3); }
.calculo { font-family: var(--v-fonte-mono); font-size: var(--v-fs-legenda); color: var(--v-texto-suave); background: var(--v-canvas-rebaixado); border-radius: var(--v-raio-sm); padding: var(--v-espaco-2) var(--v-espaco-3); }
.calculo b { color: var(--v-acento-texto); font-weight: var(--v-peso-medium); }
.acoes-linha { display: flex; gap: var(--v-espaco-2); flex-wrap: wrap; }

/* ------------------------------------------------------------------ formulários compactos */
.campo { display: flex; flex-direction: column; gap: var(--v-espaco-1); min-inline-size: 0; }
.campo label { font-size: var(--v-fs-legenda); color: var(--v-texto-suave); font-weight: var(--v-peso-medium); }
.campo .v-input, .campo .v-select, .campo .v-textarea { inline-size: 100%; }
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--v-espaco-4); }
.formulario .largo { grid-column: 1 / -1; }
.check { display: inline-flex; gap: var(--v-espaco-2); align-items: center; font-size: var(--v-fs-legenda); color: var(--v-texto-suave); cursor: pointer; }
.check input { inline-size: 1rem; block-size: 1rem; accent-color: var(--v-acento); }

/* ------------------------------------------------------------------ abas */
.abas { display: flex; gap: var(--v-espaco-1); border-block-end: var(--v-traco-fino) solid var(--v-borda); overflow-x: auto; }
.abas button { appearance: none; background: none; border: 0; padding: var(--v-espaco-3) var(--v-espaco-4); font: inherit; font-size: var(--v-fs-corpo-p); color: var(--v-texto-sutil); cursor: pointer; border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap; }
.abas button[aria-selected='true'] { color: var(--v-texto); border-block-end-color: var(--v-acento); font-weight: var(--v-peso-medium); }
.abas button:hover { color: var(--v-texto); }

/* ------------------------------------------------------------------ diálogo e aviso */
dialog.modal { inline-size: min(36rem, calc(100vw - 2rem)); max-block-size: calc(100svh - 2rem); padding: 0; border: var(--v-traco-fino) solid var(--v-borda); border-radius: var(--v-raio-lg); background: var(--v-superficie-alta); color: var(--v-texto); box-shadow: var(--v-sombra-xl); }
dialog.modal::backdrop { background: color-mix(in srgb, var(--v-cor-grafite-950) 55%, transparent); }
.modal__corpo { padding: var(--v-espaco-6); display: flex; flex-direction: column; gap: var(--v-espaco-5); }
.modal__corpo h2 { font-family: var(--v-fonte-display); font-size: var(--v-fs-h4); font-weight: var(--v-peso-semibold); }
.modal__pe { display: flex; justify-content: flex-end; gap: var(--v-espaco-3); }
.toast { position: fixed; inset-block-end: var(--v-espaco-6); inset-inline-end: var(--v-espaco-6); z-index: var(--v-z-toast); max-inline-size: 26rem; padding: var(--v-espaco-4) var(--v-espaco-5); border-radius: var(--v-raio-md); background: var(--v-superficie-alta); border: var(--v-traco-fino) solid var(--v-borda); box-shadow: var(--v-sombra-lg); font-size: var(--v-fs-corpo-p); animation: entrar var(--v-dur-media) var(--v-curva-padrao); }
.toast--erro { box-shadow: inset 3px 0 0 var(--v-critico), var(--v-sombra-lg); }
.toast--ok { box-shadow: inset 3px 0 0 var(--v-sucesso), var(--v-sombra-lg); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
.revela { animation: entrar var(--v-dur-lenta) var(--v-curva-padrao) both; }

/* ------------------------------------------------------------------ login */
.entrada { min-block-size: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.entrada__marca { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--v-espaco-12); background: var(--v-canvas); color: var(--v-texto); }
.entrada__marca img { inline-size: 11rem; }
.entrada__tese { font-family: var(--v-fonte-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-display); line-height: var(--v-lh-display); max-inline-size: 18ch; }
.entrada__tese span { color: var(--v-acento-texto); }
.entrada__apoio { color: var(--v-texto-suave); max-inline-size: 44ch; margin-block-start: var(--v-espaco-5); }
.entrada__regua { margin-block-start: var(--v-espaco-10); max-inline-size: 26rem; }
.entrada__form { display: flex; align-items: center; justify-content: center; padding: var(--v-espaco-10) var(--v-espaco-6); }
.entrada__form form { inline-size: min(24rem, 100%); display: flex; flex-direction: column; gap: var(--v-espaco-5); }
.entrada__form h1 { font-family: var(--v-fonte-display); font-size: var(--v-fs-h3); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-titulo); }
.demo-logins { display: flex; flex-direction: column; gap: var(--v-espaco-2); padding: var(--v-espaco-4); border: var(--v-traco-fino) dashed var(--v-borda-forte); border-radius: var(--v-raio-md); }
.demo-logins p { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }

/* ------------------------------------------------------------------ portal do cliente */
.portal-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--v-espaco-8); align-items: center; padding: var(--v-espaco-8); border-radius: var(--v-raio-xl); background: var(--v-superficie); border: var(--v-traco-fino) solid var(--v-borda); }
.anel { position: relative; inline-size: min(15rem, 70vw); aspect-ratio: 1; margin-inline: auto; }
.anel svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.anel__centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.anel__centro strong { font-family: var(--v-fonte-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); font-weight: var(--v-peso-semibold); letter-spacing: var(--v-ls-display); line-height: 1; font-variant-numeric: tabular-nums; }
.anel__centro span { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); margin-block-start: var(--v-espaco-2); }
.anel .progresso { transition: stroke-dashoffset 900ms var(--v-curva-padrao); }
.portal-hero__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-espaco-5); }
.portal-hero__numeros div { display: flex; flex-direction: column; gap: var(--v-espaco-1); padding-inline-start: var(--v-espaco-4); border-inline-start: var(--v-traco-fino) solid var(--v-borda); }
.portal-hero__numeros dt { font-size: var(--v-fs-legenda); color: var(--v-texto-sutil); }
.portal-hero__numeros dd { font-family: var(--v-fonte-display); font-size: var(--v-fs-h3); font-weight: var(--v-peso-semibold); font-variant-numeric: tabular-nums; }
.pendencia { display: flex; gap: var(--v-espaco-4); align-items: flex-start; padding: var(--v-espaco-4); border: var(--v-traco-fino) solid var(--v-borda); border-radius: var(--v-raio-md); background: var(--v-canvas); }
.pendencia--atrasado { border-color: color-mix(in srgb, var(--v-critico) 45%, var(--v-borda)); }

/* ------------------------------------------------------------------ código (integração) */
pre.codigo { font-family: var(--v-fonte-mono); font-size: var(--v-fs-legenda); background: var(--v-canvas-rebaixado); border: var(--v-traco-fino) solid var(--v-borda); border-radius: var(--v-raio-md); padding: var(--v-espaco-4); overflow-x: auto; color: var(--v-texto); white-space: pre; }
.passos { counter-reset: p; display: flex; flex-direction: column; gap: var(--v-espaco-5); }
.passos > li { counter-increment: p; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--v-espaco-3); }
.passos > li::before { content: counter(p); font-family: var(--v-fonte-mono); font-size: var(--v-fs-legenda); inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; border: var(--v-traco-fino) solid var(--v-borda-forte); display: grid; place-items: center; color: var(--v-texto-suave); }

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 1100px) {
  .grade-2, .grade-2--igual { grid-template-columns: minmax(0, 1fr); }
  .cartao-reg { grid-template-columns: minmax(0, 1fr); }
  .portal-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .casco { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; inline-size: min(18rem, 85vw); z-index: var(--v-z-modal); transform: translateX(-100%); transition: transform var(--v-dur-media) var(--v-curva-padrao); overflow-y: auto; }
  .lateral.aberta { transform: none; box-shadow: var(--v-sombra-xl); }
  .topo-mobile { display: flex; align-items: center; justify-content: space-between; padding: var(--v-espaco-3) var(--v-espaco-4); border-block-end: var(--v-traco-fino) solid var(--v-borda); background: var(--v-canvas); position: sticky; inset-block-start: 0; z-index: var(--v-z-fixo); }
  .topo-mobile img { block-size: 1.25rem; inline-size: auto; }
  .pagina { padding: var(--v-espaco-6) var(--v-espaco-4) var(--v-espaco-12); gap: var(--v-espaco-6); }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada__marca { padding: var(--v-espaco-8) var(--v-espaco-5); gap: var(--v-espaco-8); }
  .bloco { padding: var(--v-espaco-5) var(--v-espaco-4); }
  .portal-hero { padding: var(--v-espaco-6) var(--v-espaco-4); }
  .portal-hero__numeros { grid-template-columns: minmax(0, 1fr); }
  .marco { grid-template-columns: 5rem .75rem minmax(0, 1fr); }
  .marco > :last-child { grid-column: 3; }
  .decisao .linha-campos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .regua__valor, .grafico .barra, .revela, .toast { animation: none; }
  .grafico .linha--anima { animation: none; stroke-dashoffset: 0; }
}

/* Logo por máscara dentro de flex: não esticar. */
.v-logo-mascara { inline-size: auto; align-self: flex-start; }

/* Ícones em linha: nunca no tamanho intrínseco do SVG. */
.voltar svg, .v-btn svg, .v-link svg { inline-size: 1rem; block-size: 1rem; flex: none; }
.abas { overflow-y: hidden; scrollbar-width: thin; }

/* Linha do tempo em coluna estreita: a situação desce para baixo do título. */
.bloco { container-type: inline-size; }
@container (max-width: 34rem) {
  .marco { grid-template-columns: 4.75rem .75rem minmax(0, 1fr); }
  .marco > :last-child { grid-column: 3; justify-self: start; }
  .entrega { grid-template-columns: minmax(0, 1fr); gap: var(--v-espaco-1); }
}

/* Atalhos de entrada da equipe. */
.botoes-equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--v-espaco-3); }
.botoes-equipe [aria-pressed='true'] { border-color: var(--v-acento); box-shadow: inset 0 0 0 1px var(--v-acento); }